:root{
  --bg:#0b0f12;
  --bg-2:#0f1419;
  --text:#e8eef5;
  --muted:#aeb9c6;
  --brand:#0f766e;
  --brand-2:#14b8a6;
  --gold:#e5b66b;
  --card:#0f1419;
  --border:#1b242f;
  --shadow: rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1160px;margin:0 auto;padding:24px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0;position:sticky;top:0;background:linear-gradient(180deg,var(--bg),transparent);z-index:10}
.brand{font-weight:800;letter-spacing:.6px}
.brand a{color:var(--text)}
.links a{margin-left:16px;color:var(--muted)}
.hero{position:relative;border-radius:22px;padding:46px 24px;margin:10px 0 24px;background:radial-gradient(1200px 420px at 20% -60%, rgba(20,184,166,.20), transparent 60%),linear-gradient(180deg,var(--bg-2),var(--bg))}
.hero h1{font-size:44px;margin:0 0 8px;line-height:1.18}
.kicker{display:inline-block;color:#c2d7e5;letter-spacing:.2em;font-size:12px;text-transform:uppercase;margin-bottom:6px}
.hero p{color:var(--muted);max-width:760px;line-height:1.8}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:26px 0 6px}
.card{background:linear-gradient(180deg,var(--bg-2),var(--card));border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 14px 40px var(--shadow)}
.card h3{margin:0 0 6px}
.card p{color:var(--muted)}

.badge{display:inline-block;background:linear-gradient(45deg,var(--brand),var(--gold));padding:4px 10px;border-radius:999px;color:#121212;font-weight:700;font-size:12px}

.prose h1,.prose h2,.prose h3{scroll-margin-top:90px}
.prose h2{margin-top:28px}
.prose p,.prose li{line-height:1.85;color:#d7dee7}
.prose img{max-width:100%;border-radius:14px;border:1px solid var(--border);display:block;margin:12px 0}

.note{background:#0b1220;border:1px solid #192235;padding:12px 14px;border-radius:12px;color:#c5d0dc}
.table{width:100%;border-collapse:collapse;margin:12px 0}
.table th,.table td{border:1px solid var(--border);padding:10px;text-align:left}
.toc{background:#0c131c;border:1px solid var(--border);border-radius:14px;padding:12px 14px}

.footer{opacity:.85;color:var(--muted);padding:28px 0;margin-top:28px;border-top:1px solid var(--border);font-size:14px}

.cloud{
  position:absolute;inset:0;pointer-events:none;border-radius:22px;
  background:
    radial-gradient(400px 120px at 20% 0%, rgba(229,182,107,.15), transparent 70%),
    radial-gradient(600px 200px at 120% 10%, rgba(20,184,166,.12), transparent 60%);
  box-shadow: 0 0 0 1px rgba(229,182,107,.18) inset, 0 0 40px rgba(229,182,107,.08) inset;
}

.adslot{background:#09131d;border:1px dashed #223246;color:#89a6bd;text-align:center;padding:16px;border-radius:12px;margin:22px 0}
blockquote{border-left:3px solid var(--gold);padding-left:12px;color:#d9e5ee}
details.card{cursor:pointer}
details.card summary{font-weight:700;color:#dfeaf7}
.btn{display:inline-block;background:var(--brand);color:#091015;padding:10px 14px;border-radius:12px;font-weight:700}
.btn:hover{filter:brightness(1.05)}

@media (max-width:640px){
  .hero h1{font-size:28px}
  .container{padding:18px}
}
/* Prevent long tokens (e.g., Life/Wealth/Spouse/...) from overflowing cards */
.card { overflow: hidden; }
.card h3, .card p, .card a {
  word-break: break-word;      /* 兼容 Safari 等 */
  overflow-wrap: anywhere;     /* 现代浏览器 */
  word-wrap: break-word;       /* 旧规范别名 */
  hyphens: auto;               /* 自动断字（可选） */
}
/* ====== Font stacks ====== */
:root{
  --font-sans: "Inter Var", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif-latin: "Lora", Georgia, "Times New Roman", serif;
  --font-serif-cjk: "Noto Serif SC","Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC", serif;
  --font-hand-cjk: "LXGW WenKai Screen","LXGW WenKai","Kaiti SC","STKaiti", serif;
}

html{ font-size: 17px; }
body{
  font-family: var(--font-sans);
  line-height: 1.7;
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--fg, #e8eef5);
}

/* 标题用中式衬线，带一点国风气质 */
h1,h2,h3{
  font-family: var(--font-serif-cjk), var(--font-serif-latin), var(--font-sans);
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.25;
}
h1{ font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem); }
h2{ font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); }
h3{ font-size: clamp(1.25rem, 1.0rem + .6vw, 1.5rem); }

/* 正文可读性：控制行宽、段距 */
.prose p{ max-width: 72ch; margin: .75rem 0 1rem; }
.prose li{ margin:.25rem 0; }

/* 中文页面（<html lang="zh-CN">）优先用楷体或宋体，提升国风味 */
:lang(zh) body,
:lang(zh) .prose{
  font-family: var(--font-hand-cjk), var(--font-serif-cjk), var(--font-sans);
  line-height: 1.75;
  letter-spacing: 0;
}

/* 链接/按钮的字体稍重一点，提升层级 */
a, .btn{ font-weight: 600; }

/* 你之前问的卡片溢出，也顺手保留这个处理 */
.card { overflow: hidden; }
.card h3, .card p, .card a{
  word-break: break-word;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  hyphens: auto;
}
.ill { margin: 1.2rem auto; text-align: center; }
.ill img, .ill svg { width: 100%; max-width: 720px; display: block; margin-inline: auto; }
.ill figcaption { opacity:.75; font-size:.95rem; margin-top:.5rem; }

:root{
  --ink: rgba(255,255,255,.85);     /* 线条颜色（深色背景下的“墨色”） */
  --accent: #18c4b8;               /* 站点薄荷绿/青色 */
  --accent-20: rgba(24,196,184,.22);
}
/* Illustration block */
.ill{
  max-width: 960px;
  margin: 2rem auto;
  text-align: center;
}
.ill img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  background: #fff8;
}
.ill figcaption{
  margin-top: .6rem;
  font-size: .95rem;
  opacity: .8;
}

/* 可选：国风边框（轻装饰） */
.ill{
  padding: 10px;
  border: 1px solid rgba(0,0,0,.06);
  backdrop-filter: saturate(120%) blur(1px);
}