/* Unknown Nodes — shared styles. Tokens: see ../theme-spec.md */
/* ---------- offline fonts (static/fonts) — 9f: Oswald+得意黑 (UI) × Literata+思源宋体 (词条/正文) ---------- */
/* EN-first：只打包英文所需的 Oswald + Literata（约 2MB）。中文字体 Noto Serif SC
   （3×14.8MB=44MB）+ Smiley Sans 等 ZH 上线时再随中文界面一并加入，届时取消下方注释并补字体文件。 */
@font-face{font-family:'Oswald';src:url('fonts/Oswald-Variable.ttf') format('truetype-variations');font-weight:200 700;font-display:swap}
@font-face{font-family:'Literata';src:url('fonts/Literata-Variable.ttf') format('truetype-variations');font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:'Literata';src:url('fonts/Literata-Italic-Variable.ttf') format('truetype-variations');font-weight:200 900;font-style:italic;font-display:swap}
/* ZH 待启用（字体文件未打包）：
@font-face{font-family:'Smiley Sans Oblique';src:url('fonts/SmileySans-Oblique.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Serif SC';src:url('fonts/NotoSerifSC-Light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'Noto Serif SC';src:url('fonts/NotoSerifSC-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Serif SC';src:url('fonts/NotoSerifSC-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap} */
:root{
  --ink:#000e4d; --blue:#0048df; --warm:#d86d56;
  --canvas-tint:rgba(251,244,236,.75);
  --border-soft:#eee2d0; --border-line:#e6d9c2; --border-dot:#c9bda3; --border-ui:#ddd0ba;
  --text-muted:#9a8f7d; --text-body:#5c5341; --label-visited:#b08d7f;
  --font-ui:'Oswald','Smiley Sans Oblique',sans-serif; --font-word:'Literata','Noto Serif SC',serif;
  /* 9f 注：小字副文理想为思源黑体 Noto Sans SC 300（字体包过大未打包），先落系统黑体 */
  --font-sub:'Oswald','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:#fff;font-family:var(--font-ui);color:var(--ink)}
a{color:var(--blue);text-decoration:none}
a:hover{color:#0038ad}
/* ---------- top nav (shared) ---------- */
.nav{display:flex;align-items:center;gap:40px;padding:22px 40px;border-bottom:1px solid var(--border-soft);background:#fff}
.nav-brand{display:flex;align-items:center;gap:16px;color:var(--ink)}
.nav-brand:hover{color:var(--ink)}
.nav-title{font-weight:500;font-size:20px;letter-spacing:.02em}
.nav-spacer{flex:1}
.nav-right{display:flex;gap:22px;align-items:center;font-size:14px;font-weight:400;text-transform:uppercase;letter-spacing:.1em}
.lang-toggle{display:flex;align-items:center;border:1px solid var(--border-ui);border-radius:99px;padding:3px;letter-spacing:.06em}
.lang-on{background:var(--ink);color:#fff;padding:4px 14px;border-radius:99px}
.lang-off{color:var(--text-muted);padding:4px 14px}
.nav-link{color:var(--ink)}
.nav-cta{background:var(--ink);color:#fff;padding:9px 24px;border-radius:99px}
.nav-cta:hover{color:#fff;background:#001a70}
/* ---------- landing hero ---------- */
.hero{padding:88px 32px 110px;text-align:center}
.hero h1{font-size:64px;line-height:1.16;font-weight:500;letter-spacing:.01em;text-transform:uppercase}
.pill-ink{background:var(--ink);color:#fff;padding:0 26px;border-radius:99px}
.pill-blue{background:var(--blue);color:#fff;padding:0 26px;border-radius:99px}
.hero-sub{margin:26px auto 0;font-size:17px;font-weight:400;color:var(--text-body);max-width:560px;line-height:1.7}
/* weave bar — extendable: grows with word length, long words never wrap */
.weave-bar{margin-top:40px;display:inline-flex;align-items:center;max-width:calc(100% - 48px);background:#fff;border:2px solid var(--ink);border-radius:99px;padding:6px;box-shadow:0 3px 0 rgba(0,14,77,.12)}
.weave-slot{padding:10px 14px 10px 26px;text-align:left;flex:none}
.weave-slot.right{padding:10px 22px 10px 14px}
.weave-label{font-size:12px;letter-spacing:.16em;color:var(--text-muted);text-transform:uppercase}
.weave-word{font-family:var(--font-word);font-size:20px;margin-top:2px;white-space:nowrap}
.weave-word.known{color:var(--ink)}
.weave-word.want{color:var(--blue)}
.weave-arrow{padding:0 12px;font-size:20px;color:var(--warm);flex:none}
.weave-btn{align-self:stretch;display:flex;align-items:center;flex:none;background:var(--blue);color:#fff;font-size:15px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:0 36px;border-radius:99px}
.weave-btn:hover{color:#fff;background:#0038ad}
/* ---------- explore canvas ---------- */
.board-wrap{padding:24px;display:flex;justify-content:safe center;overflow-x:auto}
.board{position:relative;flex:none;width:1120px;height:660px;border-radius:28px;overflow:hidden;background-color:#fff}
.board-bg{position:absolute;inset:0;background:var(--canvas-tint)}
.board-grid{position:absolute;inset:0;background-image:radial-gradient(#fff 2.5px,transparent 2.5px);background-size:44px 44px}
.board svg{position:absolute;inset:0;width:100%;height:100%}
.node-label{position:absolute;transform:translateX(-50%);font-family:var(--font-word);font-size:17px;color:var(--ink);white-space:nowrap;cursor:pointer}
.node-label.visited{color:var(--label-visited);cursor:pointer}
.node-label.visited:hover{color:var(--warm)}
.node-label.target:hover{text-decoration:underline dotted;cursor:pointer}
.rel-dots circle{cursor:pointer}
.rel-dots circle:hover{stroke:var(--ink)}
.node-label.target{color:var(--blue);cursor:default}
.center-node{position:absolute;transform:translate(-50%,-50%);width:176px;height:176px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-word);font-size:23px;text-align:center;box-shadow:0 16px 40px rgba(0,14,77,.25)}
.def-card{position:absolute;left:32px;bottom:28px;width:430px;background:#fff;border:1px solid var(--border-soft);border-radius:20px;padding:24px 30px;box-shadow:0 8px 28px rgba(0,14,77,.08)}
.def-title{font-family:var(--font-word);font-size:25px;font-weight:600;color:var(--ink)}
.def-body{font-family:var(--font-word);font-size:17px;font-weight:300;line-height:1.6;color:var(--text-body);margin-top:8px}
.def-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px}
.field-tag{font-size:14px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:rgba(0,72,223,.5);border:1px solid rgba(0,72,223,.22);border-radius:99px;padding:4px 16px}
.def-source{margin-left:auto;font-size:13px;font-weight:400;letter-spacing:.06em;color:var(--text-muted);white-space:nowrap}
.def-source:hover{color:var(--blue)}
/* ---------- modal (shared) ---------- */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:50}
.modal.open{display:flex}
.modal-overlay{position:absolute;inset:0;background:rgba(0,14,77,.35)}
.modal-card{position:relative;background:#fff;border:1px solid var(--border-soft);border-radius:24px;padding:42px 46px 38px;width:500px;max-width:calc(100vw - 48px);box-shadow:0 24px 64px rgba(0,14,77,.28);text-align:center}
.modal-kicker{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--warm);margin-bottom:14px}
.modal-title{font-family:var(--font-word);font-size:26px;font-weight:600;color:var(--ink);line-height:1.35}
.modal-body{font-family:var(--font-word);font-size:16.5px;font-weight:300;line-height:1.7;color:var(--text-body);margin-top:12px}
.modal-btn{display:inline-block;margin-top:26px;background:var(--blue);color:#fff;font-family:var(--font-ui);font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:12px 36px;border-radius:99px;border:none;cursor:pointer}
.modal-btn:hover{background:#0038ad;color:#fff}
/* ---------- autocomplete (landing) ---------- */
.weave-slot.right{position:relative}
.autocomplete{display:none;position:absolute;top:calc(100% + 16px);left:0;min-width:330px;background:#fff;border:1px solid var(--border-soft);border-radius:18px;box-shadow:0 14px 40px rgba(0,14,77,.14);padding:8px;text-align:left;z-index:20}
.autocomplete.open{display:block}
.ac-hint{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);padding:8px 16px 6px}
.ac-row{font-family:var(--font-word);font-size:17px;color:var(--text-body);padding:10px 16px;border-radius:12px;cursor:pointer}
.ac-row:hover{background:var(--canvas-tint);color:var(--ink)}
.ac-row b{color:var(--blue);font-weight:600}
/* ---------- UI-state preview strip (design handoff only) ---------- */
.state-strip{margin-top:70px;display:flex;gap:20px;justify-content:center;align-items:center;flex-wrap:wrap;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.state-strip span{color:var(--text-muted)}
.state-strip a{color:var(--label-visited);border-bottom:1px dashed var(--border-dot);cursor:pointer}
.state-strip a:hover{color:var(--warm)}
/* ---------- 9f 中文排版微调（html lang=zh-CN 时生效） ---------- */
.nav-zh{font-family:'Smiley Sans Oblique',sans-serif;font-size:17px;color:var(--blue);white-space:nowrap}
html[lang="zh-CN"] .hero h1{font-size:62px;line-height:1.4;letter-spacing:.02em}
html[lang="zh-CN"] .hero h1 .pill-ink,html[lang="zh-CN"] .hero h1 .pill-blue{padding:2px 30px}
html[lang="zh-CN"] .hero-sub{font-family:var(--font-sub);font-weight:300;line-height:1.95}
html[lang="zh-CN"] .def-body,html[lang="zh-CN"] .modal-body{line-height:1.9}
html[lang="zh-CN"] .center-node{font-size:22px;letter-spacing:.04em}