:root{
  --must:#b42318; --should:#b54708; --plus:#087443;
  --teal:#0f766e; --violet:#5925dc;
  --sidebar:#0f172a;
  --shadow:0 10px 40px rgba(15,23,42,.08); --sidebar-w:280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--soft);
  font:15.5px/1.7 "Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.layout{display:flex;min-height:100vh}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--sidebar),#111827);color:#e2e8f0;overflow-y:auto;z-index:40;
  border-right:1px solid rgba(255,255,255,.06)}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:99px}
.brand{padding:22px 20px 16px;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;
  background:rgba(15,23,42,.96);backdrop-filter:blur(8px);z-index:2}
.brand .mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;margin-right:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#0f172a;font-weight:800;font-size:13px}
.brand h1{display:flex;align-items:center;margin:0;font-size:16px;font-weight:750;color:var(--sidebar-text)}
.brand p{margin:8px 0 0;font-size:12px;color:#94a3b8;line-height:1.5}
.toc{padding:14px 12px 28px}
.toc-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#64748b;padding:6px 10px 8px;font-weight:700}
.toc a{display:block;color:#cbd5e1;text-decoration:none;padding:8px 12px;border-radius:10px;font-size:13px;margin:2px 0;border:1px solid transparent}
.toc a:hover{background:rgba(255,255,255,.05);color:#fff;text-decoration:none}
.toc a.active{background:linear-gradient(90deg,rgba(56,189,248,.18),rgba(129,140,248,.12));color:#fff;border-color:rgba(56,189,248,.25)}
.toc a small{display:block;color:#64748b;font-size:11px;margin-top:2px}
.toc a.placeholder{opacity:.55}
.sidebar-foot{padding:12px 18px 20px;font-size:11.5px;color:#64748b;border-top:1px solid rgba(255,255,255,.06)}
.hub{padding:10px 12px 6px;border-bottom:1px solid rgba(255,255,255,.06)}
.hub a{display:block;color:#cbd5e1;text-decoration:none;padding:7px 12px;border-radius:10px;font-size:13px;margin:2px 0;border:1px solid transparent}
.hub a:hover{background:rgba(255,255,255,.05);color:#fff;text-decoration:none}
.hub a.here{background:linear-gradient(90deg,rgba(56,189,248,.18),rgba(129,140,248,.12));color:#fff;border-color:rgba(56,189,248,.25)}
.hub a small{display:block;color:#64748b;font-size:11px;margin-top:2px}
.main{margin-left:var(--sidebar-w);flex:1;min-width:0}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 28px;background:rgba(241,245,249,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .crumb{font-size:13px;color:var(--muted)}.topbar .crumb b{color:var(--ink);font-weight:650}
.menu-btn{display:none;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:8px 12px;font-size:13px;cursor:pointer}
.content{width:100%;padding:24px 28px 96px}
.book-cover{background:radial-gradient(900px 280px at 10% -10%,rgba(56,189,248,.18),transparent 55%),
  radial-gradient(700px 260px at 90% 0%,rgba(129,140,248,.16),transparent 50%),var(--paper);
  border:1px solid var(--line);border-radius:20px;padding:28px 32px 24px;box-shadow:var(--shadow);margin-bottom:22px}
.book-cover .eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:8px}
.book-cover h2{margin:0 0 10px;font-size:28px;line-height:1.25;border:0;padding:0}
.book-cover .lead{color:var(--muted);margin:0}
.badge{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 10px;border-radius:8px;color:#fff;font-size:11px;font-weight:700}
.badge.must{background:var(--must)}.badge.should{background:var(--should)}.badge.plus{background:var(--plus)}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin:0 0 18px;box-shadow:var(--shadow)}
.panel h2{margin:0 0 12px;font-size:20px;border-bottom:1px solid var(--line);padding-bottom:10px}
.panel h3{margin:18px 0 8px;font-size:15px}
.muted{color:var(--muted);font-size:13.5px}
.effect-list{display:grid;gap:10px;margin:12px 0 0}
.effect{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--soft)}
.effect b{display:block;margin-bottom:4px}
.pos-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px}
.pos-table th,.pos-table td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.pos-table th{background:#f3f7fb}
.pos-table tr[data-href]{cursor:pointer}
.pos-table tr[data-href]:hover{background:#eff6ff}
.graph{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.gnode{border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:140px;max-width:200px;background:linear-gradient(180deg,var(--paper),var(--soft));cursor:pointer;transition:border-color .15s,transform .15s}
.gnode:hover{border-color:#93c5fd;transform:translateY(-1px)}
.gnode .t{font-weight:700;font-size:13px}
.gnode .s{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.4}
.gnode.placeholder{opacity:.55;cursor:default}
.edges{font-size:12.5px;color:var(--muted);margin:8px 0 0;line-height:1.6}
.layer-head{margin-bottom:14px}
.cmap{margin:0 0 16px;padding:14px 16px 12px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--soft),var(--paper))}
.cmap .cmap-title{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.cmap .cmap-note{font-size:12px;color:var(--muted);margin:8px 0 0}
.cmap svg,.cmap img{width:100%;height:auto;display:block}
.subtabs{position:sticky;top:52px;z-index:15;display:flex;flex-wrap:wrap;gap:6px;padding:10px 0;margin:0 0 14px;background:rgba(241,245,249,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.subtabs button{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:7px 12px;font-size:12.5px;cursor:pointer;color:var(--ink)}
.subtabs button.active{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8;font-weight:650}
.subtabs button:hover{border-color:#93c5fd}
.skill-summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.chip{font-size:12px;padding:5px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.chip b{color:var(--blue)}
.rel{font-size:13px;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 14px}
.rel a{font-weight:650}
.block{margin:0 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.block h3{margin:0 0 8px;font-size:15px;display:flex;align-items:center;gap:8px}
.block .idx{width:22px;height:22px;border-radius:7px;background:#e0e7ff;color:#3730a3;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.block ul{margin:8px 0 0;padding-left:18px}
.block li{margin:4px 0}
.rubric{display:grid;gap:8px}
.rubric .lv{border-left:3px solid var(--teal);padding:6px 10px;background:var(--soft);border-radius:0 8px 8px 0}
.rubric .lv b{color:var(--teal);margin-right:6px}
.timeline{display:flex;flex-direction:column;gap:0;margin:8px 0 0;padding-left:4px}
.tl-item{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:10px 0;border-left:2px solid #cbd5e1;padding-left:14px;margin-left:6px;position:relative}
.tl-item::before{content:"";position:absolute;left:-5px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.tl-item .d{font-size:12px;font-weight:700;color:var(--blue)}
.tl-item .e{font-size:13px}
.tl-item .o{font-size:11.5px;color:var(--muted)}
.ref-grid,.mat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:960px){.ref-grid,.mat-grid{grid-template-columns:1fr}}
.ref-card{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--soft)}
.ref-card h4{margin:0 0 8px;font-size:13px}
.ref-card a,.mat-link{display:block;font-size:12.5px;margin:6px 0;line-height:1.45;color:var(--blue)}
.mat-note{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.core-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 14px}
@media(max-width:800px){.core-grid{grid-template-columns:1fr}}
.core-card{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--soft)}
.core-name{font-weight:750;font-size:13.5px;margin-bottom:6px}
.core-what{font-size:13px;line-height:1.55}
.core-why{font-size:12px;margin-top:6px}
.bp-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 10px;background:linear-gradient(180deg,var(--paper),var(--soft))}
.bp-title{font-weight:750;font-size:14px;margin-bottom:8px}
.bp-pattern,.bp-detail{font-size:13.5px;line-height:1.6;margin:4px 0}
.bp-when{font-size:12.5px;margin-top:6px}
.bp-avoid{font-size:12.5px;margin-top:4px;color:var(--must)}
html[data-theme="dark"] .core-card,
html[data-theme="dark"] .bp-card{background:#151e32;border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .bp-avoid{color:#fca5a5}
html[data-theme="dark"] .mat-note{color:var(--muted)}
.jd-box details{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--soft)}
.jd-box summary{cursor:pointer;font-weight:650;font-size:13px}
.cos{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.co{font-size:11.5px;padding:4px 8px;border-radius:8px;background:#eef4ff;color:#1e3a8a;border:1px solid #d6e3ff;cursor:default;position:relative}
.co .ev{display:none;position:absolute;left:0;top:110%;z-index:3;width:280px;padding:8px 10px;background:#111827;color:#f9fafb;
  border-radius:8px;font-size:11px;line-height:1.45;box-shadow:var(--shadow)}
.co:hover .ev{display:block}
.placeholder-panel{text-align:center;padding:48px 20px;color:var(--muted)}
.md-body h1,.md-body h2,.md-body h3{margin:14px 0 8px}
.md-body p{margin:8px 0}
.md-body table{width:100%;border-collapse:collapse;font-size:13px;margin:10px 0}
.md-body th,.md-body td{border:1px solid var(--line);padding:6px 8px}
.md-body th{background:#f3f7fb}
.md-body code{font-size:12.5px;background:#f1f5f9;padding:1px 5px;border-radius:4px}
.md-body pre{background:#0f172a;color:#e2e8f0;padding:12px;border-radius:10px;overflow:auto}
.md-body pre code{background:transparent;color:inherit;padding:0}
.backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:30}
body.nav-open .backdrop{display:block}
@media(max-width:960px){
  .sidebar{transform:translateX(-105%);transition:transform .2s ease}
  body.nav-open .sidebar{transform:translateX(0)}
  .main{margin-left:0}.menu-btn{display:inline-flex}
  .content{padding:16px 12px 80px}
  .subtabs{top:48px}
  .core-grid,.graph-wrap,.map-stage,.topictabs{max-width:100%;overflow-x:auto}
  .gnode{max-width:min(200px,70vw)}
}
html[data-theme="dark"]{
  --ink:#e8eef7;
  --muted:#9aa8bc;
  --line:#2a364a;
  --soft:#0b1220;
  --paper:#151e32;
}
html[data-theme="dark"] body{color:var(--ink);background:var(--soft)}
html[data-theme="dark"] .main,
html[data-theme="dark"] .content,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .block,
html[data-theme="dark"] .md-body,
html[data-theme="dark"] .rel,
html[data-theme="dark"] .effect,
html[data-theme="dark"] .gnode,
html[data-theme="dark"] .ref-card{color:var(--ink)}
html[data-theme="dark"] .panel p,
html[data-theme="dark"] .block p,
html[data-theme="dark"] .block li,
html[data-theme="dark"] .md-body p,
html[data-theme="dark"] .md-body li,
html[data-theme="dark"] .md-body td,
html[data-theme="dark"] .pos-table td{color:var(--ink)}
html[data-theme="dark"] .muted,
html[data-theme="dark"] .book-cover .lead,
html[data-theme="dark"] .cmap .cmap-note,
html[data-theme="dark"] .cmap .cmap-title,
html[data-theme="dark"] .gnode .s,
html[data-theme="dark"] .tl-item .o{color:var(--muted)}
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .block h3,
html[data-theme="dark"] .gnode .t,
html[data-theme="dark"] .tl-item .e{color:var(--ink)}
html[data-theme="dark"] .topbar{background:rgba(15,23,42,.92);border-bottom-color:var(--line);color:var(--muted)}
html[data-theme="dark"] .topbar .crumb b{color:var(--ink)}
html[data-theme="dark"] .menu-btn{background:#1a2438;border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .book-cover{background:radial-gradient(900px 280px at 10% -10%,rgba(56,189,248,.12),transparent 55%),
  radial-gradient(700px 260px at 90% 0%,rgba(129,140,248,.1),transparent 50%),var(--paper);border-color:var(--line)}
html[data-theme="dark"] .subtabs{background:rgba(11,18,32,.94);border-bottom-color:var(--line)}
html[data-theme="dark"] .subtabs button{background:#1a2438;border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .subtabs button.active{background:#1e3a5f;border-color:#60a5fa;color:#93c5fd}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .block,
html[data-theme="dark"] .effect,
html[data-theme="dark"] .gnode,
html[data-theme="dark"] .ref-card,
html[data-theme="dark"] .cmap,
html[data-theme="dark"] .rel,
html[data-theme="dark"] .jd-box details,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .rubric .lv{background:#151e32;border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .rel{color:#c7d2e0}
html[data-theme="dark"] .chip b,
html[data-theme="dark"] .tl-item .d{color:#93c5fd}
html[data-theme="dark"] .block .idx{background:#1e3a5f;color:#93c5fd}
html[data-theme="dark"] .pos-table th,
html[data-theme="dark"] .md-body th{background:#1a2438;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .pos-table td{border-color:var(--line)}
html[data-theme="dark"] .pos-table tr[data-href]:hover{background:#1e3a5f}
html[data-theme="dark"] .co{background:#1a2438;color:#93c5fd;border-color:#334155}
html[data-theme="dark"] .md-body code{background:#1a2438;color:#e2e8f0}
html[data-theme="dark"] .md-body th,
html[data-theme="dark"] .md-body td{border-color:var(--line)}
html[data-theme="dark"] .timeline .tl-item{border-left-color:#475569}
html[data-theme="dark"] .cmap svg .n{fill:#1a2438;stroke:#64748b}
html[data-theme="dark"] .cmap svg .n.core{fill:#1e3a5f;stroke:#60a5fa}
html[data-theme="dark"] .cmap svg .n.mem{fill:#164e63;stroke:#22d3ee}
html[data-theme="dark"] .cmap svg .n.tool{fill:#14532d;stroke:#4ade80}
html[data-theme="dark"] .cmap svg .n.eval{fill:#7c2d12;stroke:#fb923c}
html[data-theme="dark"] .cmap svg text{fill:#e8eef7}
html[data-theme="dark"] .cmap svg text.sub{fill:#9aa8bc}
html[data-theme="dark"] .cmap svg .edge{stroke:#64748b}

.path-hint{font-size:13px;color:var(--teal);background:rgba(15,118,110,.08);border:1px solid rgba(15,118,110,.2);border-radius:10px;padding:8px 12px;margin:0 0 14px}
.topictabs{margin:8px 0 16px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.topictabs-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.topictabs-row{display:flex;flex-wrap:wrap;gap:8px}
.topictabs button{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:10px 12px;cursor:pointer;text-align:left;min-width:140px;color:var(--ink)}
.topictabs button small{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.topictabs button .tn{display:inline-flex;width:18px;height:18px;border-radius:6px;background:#e0e7ff;color:#3730a3;font-size:11px;font-weight:800;align-items:center;justify-content:center;margin-right:6px}
.topictabs button.active{border-color:#93c5fd;background:#eff6ff;box-shadow:0 0 0 1px rgba(37,99,235,.15)}
.chapter{margin-top:8px}
.chapter-head{margin-bottom:14px}
.chapter-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.chapter-meta .lvl{font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:#ecfdf5;color:#047857}
.chapter-title{margin:0 0 8px;font-size:22px;border:0;padding:0}
.chapter-summary{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
.fig{margin:0 0 16px;padding:14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--soft),var(--paper))}
.fig figcaption{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin:0 0 10px}
.fig-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fig-step{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid #bfdbfe;background:#eff6ff;font-size:13px;font-weight:650;color:#1e3a8a;max-width:220px}
.fig-n{width:22px;height:22px;border-radius:7px;background:#2563eb;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex:0 0 auto}
.fig-arrow{color:#64748b;font-weight:700}
.fig-layers{display:grid;gap:8px}
.fig-layer{display:grid;grid-template-columns:140px 1fr;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--paper);font-size:13px}
.fig-table{width:100%;border-collapse:collapse;font-size:13px}
.fig-table th,.fig-table td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.fig-table th{background:#f3f7fb}
.chap-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:16px 0}
.chap-btn{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:10px 14px;font-size:13px;cursor:pointer;color:var(--ink);text-decoration:none}
.chap-btn.primary{background:#2563eb;border-color:#2563eb;color:#fff}
.vendor-list{display:grid;gap:6px}
html[data-theme="dark"] .topictabs,
html[data-theme="dark"] .fig,
html[data-theme="dark"] .fig-layer,
html[data-theme="dark"] .chap-btn{background:#151e32;border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .topictabs button{background:#1a2438;border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .topictabs button.active{background:#1e3a5f;border-color:#60a5fa}
html[data-theme="dark"] .topictabs button .tn{background:#1e3a5f;color:#93c5fd}
html[data-theme="dark"] .fig-step{background:#1e3a5f;border-color:#60a5fa;color:#dbeafe}
html[data-theme="dark"] .fig-table th{background:#1a2438}
html[data-theme="dark"] .chapter-meta .lvl{background:#064e3b;color:#6ee7b7}
html[data-theme="dark"] .path-hint{background:rgba(45,212,191,.08);border-color:rgba(45,212,191,.25);color:#5eead4}
html[data-theme="dark"] .chap-btn.primary{background:#2563eb;color:#fff}