:root{
  --bg:#F5F6F3; --surface:#FFFFFF; --surface-2:#EFF1EC;
  --ink:#22282C; --muted:#68727A; --line:#DCE0DA;
  --accent:#0B6E8F; --accent-ink:#0A5A77; --accent-soft:#E2EEF3;
  --ok:#2C7A4B; --ok-soft:#E2F0E6; --warn:#A2670F; --warn-soft:#F6EEDC;
  --fail:#B4472F; --fail-soft:#F7E6E0;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14181B; --surface:#1B2125; --surface-2:#222A30;
    --ink:#E2E7E5; --muted:#93A0A0; --line:#2D363C;
    --accent:#62BBD6; --accent-ink:#8AD0E6; --accent-soft:#1D313A;
    --ok:#63B585; --ok-soft:#1D3327; --warn:#D6A24A; --warn-soft:#383020;
    --fail:#E07B5F; --fail-soft:#3A251F;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.78 'Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif}
.wrap{max-width:1020px;margin:0 auto;padding:0 26px 90px}
.hero{padding:58px 0 34px;border-bottom:1px solid var(--line)}
.hero.slender{padding:40px 0 24px}
.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.22em;color:var(--accent)}
h1{font-size:34px;line-height:1.28;margin:16px 0 12px;font-weight:700;text-wrap:balance}
.hero.slender h1{font-size:26px}
.lede{color:var(--muted);max-width:64ch;margin:0}

/* 跨页面导航 */
.pages{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg);z-index:6}
.pages a{font-size:13px;font-weight:500;color:var(--ink);text-decoration:none;padding:4px 12px;
  border:1px solid var(--line);border-radius:99px;background:var(--surface)}
.pages a:hover{border-color:var(--accent);color:var(--accent-ink)}
.pages a[aria-current="page"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);font-weight:700}

/* 页内目录 */
nav.toc{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0;border-bottom:1px solid var(--line)}
nav.toc a{font-size:13px;color:var(--ink);text-decoration:none;padding:4px 12px;
  border:1px solid var(--line);border-radius:99px;background:var(--surface)}
nav.toc a:hover{border-color:var(--accent);color:var(--accent-ink)}
section{padding:46px 0 6px}
h2{font-size:22px;line-height:1.35;margin:0 0 10px;font-weight:700;display:flex;gap:12px;align-items:baseline}
h2 .no{font:600 13px var(--mono);color:var(--accent);letter-spacing:.05em}
h3{font-size:16px;margin:28px 0 8px;font-weight:700}
p{max-width:76ch;margin:8px 0}
figure{margin:20px 0 10px}
.diagram{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:18px 16px;overflow-x:auto}
.diagram.zoomable{cursor:zoom-in;position:relative}
.diagram.zoomable:hover{border-color:var(--accent)}
.zoom-hint{position:absolute;top:8px;right:10px;font:600 11px var(--mono);color:var(--muted);
  border:1px solid var(--line);border-radius:4px;padding:1px 7px;background:var(--surface);
  pointer-events:none;opacity:.85}
.lightbox{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
  background:rgba(12,16,19,.88);backdrop-filter:blur(2px)}
.lightbox[hidden]{display:none}
.lb-bar{display:flex;gap:8px;align-items:center;padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.15)}
.lb-bar .lb-title{font-size:13px;color:#E2E7E5;margin-right:auto}
.lb-bar button{font:600 13px var(--mono);padding:4px 12px;border:1px solid rgba(255,255,255,.25);
  border-radius:6px;background:rgba(255,255,255,.08);color:#E2E7E5;cursor:pointer}
.lb-bar button:hover{border-color:#62BBD6;color:#8AD0E6}
.lb-bar button:focus-visible{outline:2px solid #62BBD6;outline-offset:2px}
.lb-stage{flex:1;overflow:auto;padding:24px;display:grid}
.lb-stage svg{max-width:none;background:#F5F6F3;border-radius:8px;margin:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px;margin:14px 0 6px}
th{background:var(--surface-2);text-align:left;font-weight:600;white-space:nowrap}
th,td{border:1px solid var(--line);padding:7px 11px;vertical-align:top;line-height:1.6}
td code,p code,li code,figcaption code{font:12px/1.5 var(--mono);background:var(--surface-2);
  padding:1px 5px;border-radius:4px;word-break:break-all}
.pill{display:inline-block;font:600 12px/1.5 var(--mono);padding:0 9px;border-radius:99px;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.fail{background:var(--fail-soft);color:var(--fail)}
.pill.acc{background:var(--accent-soft);color:var(--accent-ink)}
ul,ol{padding-left:1.3em;max-width:76ch}
li{margin:4px 0}
.mech{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:18px 0}
.mech .card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.mech .card h4{margin:0 0 6px;font-size:14px}
.mech .card p{margin:0;font-size:13.5px;color:var(--muted)}
.mech .card .k{font:600 11.5px var(--mono);color:var(--accent-ink)}
/* 首页分篇卡片 */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:26px 0 8px}
.split a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:20px 22px;text-decoration:none;color:var(--ink)}
.split a:hover{border-color:var(--accent)}
.split a .t{font-size:17px;font-weight:700;margin-bottom:6px}
.split a .d{font-size:13.5px;color:var(--muted);line-height:1.7}
.split a .go{display:inline-block;margin-top:10px;font:600 12px var(--mono);color:var(--accent-ink)}
footer{margin-top:60px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}