/* =====================================================================
   The LLM Stack — editorial design system
   Fraunces (display serif) · Inter (text) · JetBrains Mono (code)
   Warm paper light theme + deep ink dark theme. Clay accent.
   ===================================================================== */

/* ----------------------------------------------------------- tokens */
html[data-theme="light"] {
  --bg:        #faf8f3;
  --surface:   #ffffff;
  --surface-2: #f3efe6;
  --surface-3: #ece7da;
  --ink:       #211f1b;
  --ink-soft:  #45413a;
  --muted:     #6d675d;
  --faint:     #908a7e;
  --border:    #e7e1d4;
  --border-2:  #d8d1c0;
  --accent:    #c15b39;
  --accent-2:  #b04e2d;
  --accent-soft:#f6e7df;
  --link:      #b4502e;
  --link-hover:#8f3d22;
  --shadow:    0 1px 2px rgba(40,32,20,.05), 0 8px 28px -12px rgba(40,32,20,.16);
  --shadow-sm: 0 1px 2px rgba(40,32,20,.06);
  --sel:       #f6ddcf;
  --code-bg:   #f7f3ec;
  --hi-bg:     #fbf7f0;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg:        #181614;
  --surface:   #201d1a;
  --surface-2: #262320;
  --surface-3: #2f2b27;
  --ink:       #ece7de;
  --ink-soft:  #cbc4b8;
  --muted:     #978f83;
  --faint:     #756e63;
  --border:    #322e29;
  --border-2:  #413c35;
  --accent:    #e1845f;
  --accent-2:  #ec9069;
  --accent-soft:#33251e;
  --link:      #e89a78;
  --link-hover:#f1ad8f;
  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 10px 30px -12px rgba(0,0,0,.5);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --sel:       #4a3326;
  --code-bg:   #1c1a17;
  --hi-bg:     #1c1916;
  color-scheme: dark;
}

:root{
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --maxw: 50rem;
  --sidebar-w: 19rem;
  --toc-w: 15rem;
  --topbar-h: 60px;
  --radius: 12px;
  --radius-sm: 8px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--topbar-h) + 16px); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:var(--sel); }
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); }

/* --------------------------------------------------------- progress */
.progress-bar{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); z-index:60;
  transition:width .1s linear;
}

/* ----------------------------------------------------------- topbar */
.topbar{
  position:sticky; top:0; z-index:50; height:var(--topbar-h);
  display:flex; align-items:center; gap:14px; padding:0 20px;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:11px; color:var(--ink); min-width:0; }
.brand:hover{ color:var(--ink); }
.logo{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  font-family:var(--serif); font-weight:600; font-size:20px; color:#fff;
  background:linear-gradient(150deg,var(--accent),var(--accent-2));
  border-radius:9px; box-shadow:var(--shadow-sm);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; font-weight:600;
  font-family:var(--serif); font-size:17px; letter-spacing:.1px; min-width:0; }
.brand-text small{ font-family:var(--sans); font-weight:450; font-size:11.5px;
  color:var(--muted); letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spacer{ flex:1; }

.icon-btn{
  display:grid; place-items:center; width:38px; height:38px; flex:none;
  border:1px solid var(--border); background:var(--surface); color:var(--ink-soft);
  border-radius:9px; cursor:pointer; font-size:17px; transition:.15s;
}
.icon-btn:hover{ background:var(--surface-2); color:var(--ink); border-color:var(--border-2); }
.menu-toggle{ display:none; }

/* ----------------------------------------------------------- search */
.search-box{ position:relative; width:min(340px,38vw); }
.search-box .si{ position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--faint); font-size:16px; pointer-events:none; }
#search-input{
  width:100%; height:38px; padding:0 12px 0 34px;
  border:1px solid var(--border); border-radius:9px; background:var(--surface);
  color:var(--ink); font-family:var(--sans); font-size:14px; transition:.15s;
}
#search-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.search-results{
  position:absolute; top:46px; right:0; width:min(560px,82vw); max-height:70vh; overflow:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:6px; display:none; z-index:80;
}
.search-results.open{ display:block; }
.sr-item{ display:block; padding:10px 12px; border-radius:var(--radius-sm); color:var(--ink); }
.sr-item:hover,.sr-item.sel{ background:var(--surface-2); }
.sr-title{ font-weight:600; font-size:14.5px; }
.sr-title mark,.sr-snippet mark{ background:var(--sel); color:inherit; border-radius:3px; padding:0 2px; }
.sr-part{ font-size:11.5px; color:var(--accent); margin:1px 0 3px; text-transform:uppercase; letter-spacing:.4px; }
.sr-snippet{ font-size:12.5px; color:var(--muted); line-height:1.5; }
.sr-empty{ padding:14px; color:var(--muted); font-size:13.5px; }

/* ------------------------------------------------------------ layout */
.layout{ display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--toc-w);
  max-width:1500px; margin:0 auto; align-items:start; }
.scrim{ display:none; }

/* ----------------------------------------------------------- sidebar */
.sidebar{
  position:sticky; top:var(--topbar-h); align-self:start;
  height:calc(100vh - var(--topbar-h)); overflow-y:auto; overscroll-behavior:contain;
  padding:22px 14px 60px; border-right:1px solid var(--border);
  scrollbar-width:thin; scrollbar-color:var(--border-2) transparent;
}
.sidebar::-webkit-scrollbar{ width:9px; }
.sidebar::-webkit-scrollbar-thumb{ background:var(--border-2); border-radius:9px; border:3px solid var(--bg); }
.sidebar-parent{ display:block; font-size:12.5px; color:var(--muted); padding:4px 10px 12px;
  margin-bottom:6px; border-bottom:1px dashed var(--border); }
.sidebar-parent:hover{ color:var(--accent); }
.nav-part{ margin-bottom:3px; }
.nav-part-title{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 10px; cursor:pointer; border-radius:var(--radius-sm);
  font-size:11.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:var(--muted); user-select:none;
}
.nav-part-title:hover{ background:var(--surface-2); color:var(--ink-soft); }
.nav-part-title .chev{ font-size:10px; transition:transform .18s; color:var(--faint); }
.nav-part.collapsed .chev{ transform:rotate(-90deg); }
.nav-chapters{ list-style:none; margin:2px 0 8px; padding:0; overflow:hidden; }
.nav-part.collapsed .nav-chapters{ display:none; }
.nav-chapters a{
  display:flex; gap:8px; padding:6px 10px 6px 12px; border-radius:var(--radius-sm);
  color:var(--ink-soft); font-size:13.5px; line-height:1.4; border-left:2px solid transparent;
}
.nav-chapters a:hover{ background:var(--surface-2); color:var(--ink); }
.nav-chapters a.active{ background:var(--accent-soft); color:var(--accent-2); font-weight:600;
  border-left-color:var(--accent); }
.nav-num{ color:var(--faint); font-variant-numeric:tabular-nums; font-size:12px; flex:none; padding-top:1px; }
.nav-chapters a.active .nav-num{ color:var(--accent); }

/* -------------------------------------------------------------- main */
.main{ min-width:0; display:flex; flex-direction:column; min-height:calc(100vh - var(--topbar-h)); }
.content{ width:100%; max-width:var(--maxw); margin:0 auto; padding:34px 40px 40px; }

.chapter-eyebrow{
  font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px;
}

/* headings */
.content h1{
  font-family:var(--serif); font-weight:600; font-size:2.5rem; line-height:1.12;
  letter-spacing:-.5px; margin:.1em 0 .7em; color:var(--ink);
}
.content h2{
  font-family:var(--serif); font-weight:600; font-size:1.62rem; line-height:1.2;
  letter-spacing:-.2px; margin:2.4em 0 .7em; padding-bottom:.32em;
  border-bottom:1px solid var(--border); scroll-margin-top:80px;
}
.content h3{ font-family:var(--sans); font-weight:680; font-size:1.2rem; margin:1.9em 0 .5em;
  color:var(--ink); scroll-margin-top:80px; }
.content h4{ font-family:var(--sans); font-weight:680; font-size:1.02rem; margin:1.5em 0 .4em;
  color:var(--ink-soft); }
.content h2 .headerlink,.content h3 .headerlink{
  color:var(--faint); margin-left:.4em; opacity:0; font-weight:400; text-decoration:none; transition:.15s; }
.content h2:hover .headerlink,.content h3:hover .headerlink{ opacity:1; }

.content p{ margin:0 0 1.15em; }
.content > p:first-of-type,.content .lead{ font-size:1.06rem; color:var(--ink-soft); }
.content a{ text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--link) 35%,transparent);
  text-underline-offset:2px; transition:.12s; }
.content a:hover{ text-decoration-color:var(--link-hover); }
.content strong{ font-weight:680; color:var(--ink); }
.content em{ font-style:italic; }
.content ul,.content ol{ margin:0 0 1.2em; padding-left:1.4em; }
.content li{ margin:.32em 0; }
.content li::marker{ color:var(--accent); }
.content hr{ border:none; border-top:1px solid var(--border); margin:2.4em 0; }

blockquote{
  margin:1.5em 0; padding:.5em 1.2em; border-left:3px solid var(--accent);
  background:var(--surface-2); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--ink-soft); font-style:italic;
}
blockquote p:last-child{ margin-bottom:0; }

/* tables */
.content table{ width:100%; border-collapse:collapse; margin:1.5em 0; font-size:14.5px;
  display:block; overflow-x:auto; }
.content th,.content td{ padding:9px 13px; border:1px solid var(--border); text-align:left; vertical-align:top; }
.content th{ background:var(--surface-2); font-weight:680; font-size:13px; letter-spacing:.2px; }
.content tbody tr:nth-child(even){ background:color-mix(in srgb,var(--surface-2) 50%,transparent); }

/* inline + block code */
.content code{ font-family:var(--mono); font-size:.86em; background:var(--code-bg);
  border:1px solid var(--border); border-radius:5px; padding:.12em .38em; color:var(--accent-2); }
.content pre{ margin:1.4em 0; }
.highlight{ position:relative; background:var(--hi-bg); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.highlight pre{ margin:0; padding:16px 18px; overflow-x:auto; font-family:var(--mono);
  font-size:13.4px; line-height:1.62; }
.highlight code{ background:none; border:none; padding:0; color:inherit; font-size:inherit; }
.highlight .copy-btn{
  position:absolute; top:8px; right:8px; padding:4px 10px; font-family:var(--sans); font-size:11.5px;
  color:var(--muted); background:var(--surface); border:1px solid var(--border);
  border-radius:6px; cursor:pointer; opacity:0; transition:.15s;
}
.highlight:hover .copy-btn{ opacity:1; }
.copy-btn:hover{ color:var(--ink); border-color:var(--border-2); }
.copy-btn.copied{ color:#fff; background:var(--accent); border-color:var(--accent); opacity:1; }

/* KaTeX */
.katex{ font-size:1.04em; }
.katex-display{ margin:1.4em 0; padding:.4em 0; overflow-x:auto; overflow-y:hidden; }
.katex-display>.katex{ white-space:nowrap; }

/* -------------------------------------------------------- admonitions */
.admonition,details.admonition{
  margin:1.6em 0; padding:14px 18px; border-radius:var(--radius);
  border:1px solid var(--border); border-left:4px solid var(--muted);
  background:var(--surface-2); box-shadow:var(--shadow-sm); font-size:15.5px;
}
.admonition>:last-child{ margin-bottom:0; }
.admonition-title{
  font-weight:700; font-family:var(--sans); font-size:13.5px; letter-spacing:.2px;
  margin:0 0 .55em; display:flex; align-items:center; gap:.5em; color:var(--ink);
}
.admonition-title::before{ font-size:1.05em; line-height:1; }

.admonition.interview{ border-left-color:#a855f7; background:color-mix(in srgb,#a855f7 7%,var(--surface)); }
html[data-theme="dark"] .admonition.interview{ background:color-mix(in srgb,#a855f7 13%,var(--surface)); }
.admonition.interview .admonition-title::before{ content:"🎯"; }
.admonition.key{ border-left-color:var(--accent); background:var(--accent-soft); }
.admonition.key .admonition-title::before{ content:"🔑"; }
.admonition.warning{ border-left-color:#e0a106; background:color-mix(in srgb,#e0a106 9%,var(--surface)); }
html[data-theme="dark"] .admonition.warning{ background:color-mix(in srgb,#e0a106 12%,var(--surface)); }
.admonition.warning .admonition-title::before{ content:"⚠️"; }
.admonition.example{ border-left-color:#2f9e6e; background:color-mix(in srgb,#2f9e6e 8%,var(--surface)); }
html[data-theme="dark"] .admonition.example{ background:color-mix(in srgb,#2f9e6e 13%,var(--surface)); }
.admonition.example .admonition-title::before{ content:"🧪"; }
.admonition.note{ border-left-color:#3b82f6; background:color-mix(in srgb,#3b82f6 7%,var(--surface)); }
html[data-theme="dark"] .admonition.note{ background:color-mix(in srgb,#3b82f6 12%,var(--surface)); }
.admonition.note .admonition-title::before{ content:"📝"; }
.admonition.tip{ border-left-color:#14b8a6; background:color-mix(in srgb,#14b8a6 8%,var(--surface)); }
html[data-theme="dark"] .admonition.tip{ background:color-mix(in srgb,#14b8a6 12%,var(--surface)); }
.admonition.tip .admonition-title::before{ content:"💡"; }
.admonition.sota{ border-left-color:#6366f1;
  background:linear-gradient(180deg, color-mix(in srgb,#6366f1 9%,var(--surface)), var(--surface)); }
html[data-theme="dark"] .admonition.sota{ background:linear-gradient(180deg, color-mix(in srgb,#6366f1 16%,var(--surface)), var(--surface)); }
.admonition.sota .admonition-title{ color:#6366f1; font-size:14px; }
.admonition.sota .admonition-title::before{ content:"📡"; }
.admonition.sota a{ font-weight:500; }
.admonition.quote .admonition-title::before,.admonition.abstract .admonition-title::before{ content:"❝"; }
details.admonition>summary{ cursor:pointer; list-style:none; }
details.admonition>summary::-webkit-details-marker{ display:none; }
details.admonition>summary .admonition-title{ margin-bottom:0; }
details.admonition[open]>summary .admonition-title{ margin-bottom:.55em; }

/* ----------------------------------------------- figures / visualizations */
figure.viz{
  margin:1.9em 0; padding:18px 18px 12px; border:1px solid var(--border);
  border-radius:var(--radius); background:
    radial-gradient(120% 100% at 50% 0%, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:var(--shadow-sm); text-align:center; overflow:hidden;
  --v-stroke:var(--ink-soft); --v-grid:var(--border-2); --v-accent:var(--accent);
  --v-accent2:#3b82f6; --v-good:#2f9e6e; --v-warn:#e0a106; --v-fill:var(--surface-3);
  --v-muted:var(--muted);
}
figure.viz svg{ max-width:100%; height:auto; display:block; margin:0 auto; }
figure.viz figcaption{ margin-top:12px; font-size:13px; color:var(--muted); line-height:1.55;
  font-family:var(--sans); text-align:center; }
figure.viz figcaption b,figure.viz figcaption strong{ color:var(--ink-soft); }
.viz-replay{ float:right; font-size:11px; color:var(--faint); background:none; border:1px solid var(--border);
  border-radius:6px; padding:2px 8px; cursor:pointer; font-family:var(--sans); }
.viz-replay:hover{ color:var(--accent); border-color:var(--accent); }
.viz-missing{ background:var(--surface-2); }
.viz-missing-note{ color:var(--muted); font-size:13px; padding:10px; }
.viz .v-stroke{ stroke:var(--v-stroke); } .viz .v-fill{ fill:var(--v-fill); }
.viz .v-accent{ fill:var(--v-accent); } .viz .v-accent-s{ stroke:var(--v-accent); }
.viz .v-label{ fill:var(--ink-soft); font-family:var(--sans); }
.viz .v-muted{ fill:var(--v-muted); }
.viz .v-mono{ font-family:var(--mono); }
.viz .v-grid{ stroke:var(--v-grid); }

/* ------------------------------------------------------------ page nav */
.page-nav{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:3em 0 1em; }
.page-nav a{ display:flex; flex-direction:column; gap:3px; padding:14px 16px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);
  transition:.15s; box-shadow:var(--shadow-sm); }
.page-nav a:hover{ border-color:var(--accent); background:var(--surface-2); transform:translateY(-1px); }
.page-nav .next{ text-align:right; }
.pn-label{ font-size:11.5px; color:var(--accent); font-weight:600; letter-spacing:.3px; }
.pn-title{ font-size:14.5px; color:var(--ink); font-weight:600; font-family:var(--serif); }

/* footer */
.site-footer{ margin-top:auto; padding:24px 40px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12.5px; color:var(--faint); }

/* ------------------------------------------------------------- toc side */
.toc-side{ position:sticky; top:var(--topbar-h); align-self:start;
  height:calc(100vh - var(--topbar-h)); overflow-y:auto; padding:34px 16px 40px 8px;
  scrollbar-width:thin; scrollbar-color:var(--border-2) transparent; }
.toc-title{ font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  color:var(--faint); margin-bottom:10px; padding-left:12px; }
.toc-side ul{ list-style:none; margin:0; padding:0; border-left:1px solid var(--border); }
.toc-side li a{ display:block; padding:4px 12px; font-size:12.8px; line-height:1.4;
  color:var(--muted); border-left:2px solid transparent; margin-left:-1px; }
.toc-side li a:hover{ color:var(--ink); }
.toc-side li a.active{ color:var(--accent-2); border-left-color:var(--accent); font-weight:600; }
.toc-side .toc-l3 a{ padding-left:24px; font-size:12.2px; }

/* --------------------------------------------------------------- hero */
.hero{ padding:18px 0 28px; border-bottom:1px solid var(--border); margin-bottom:30px; }
.hero-eyebrow{ font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px; }
.hero-title{ font-family:var(--serif); font-weight:600; font-size:3.1rem; line-height:1.05;
  letter-spacing:-1px; margin:0 0 .3em; display:flex; flex-direction:column; }
.hero-sub{ font-size:1.5rem; font-weight:400; font-style:italic; color:var(--accent-2); letter-spacing:-.3px; margin-top:.15em; }
.hero-tagline{ font-size:1.16rem; color:var(--ink-soft); max-width:40rem; line-height:1.55; margin:.2em 0 1.6em; }
.stats{ display:flex; gap:14px; flex-wrap:wrap; margin:1.4em 0; }
.stat{ flex:1; min-width:108px; padding:16px; text-align:center; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.stat .num{ font-family:var(--serif); font-weight:600; font-size:1.9rem; color:var(--accent-2); line-height:1; }
.stat .lbl{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-top:6px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:1.4em; }
.btn-primary,.btn-ghost{ display:inline-block; padding:11px 22px; border-radius:10px; font-weight:600;
  font-size:14.5px; transition:.15s; cursor:pointer; }
.btn-primary{ background:linear-gradient(150deg,var(--accent),var(--accent-2)); color:#fff;
  box-shadow:var(--shadow-sm); }
.btn-primary:hover{ color:#fff; transform:translateY(-1px); box-shadow:var(--shadow); }
.btn-ghost{ border:1px solid var(--border-2); color:var(--ink); background:var(--surface); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-2); }

/* part cards on the landing page */
.toc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px; margin:10px 0 50px; }
.toc-card{ padding:18px 20px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); box-shadow:var(--shadow-sm); transition:.18s; }
.toc-card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); border-color:var(--border-2); }
.part-tag{ font-family:var(--serif); font-weight:600; font-size:1.04rem; color:var(--ink);
  margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--border);
  display:flex; align-items:baseline; gap:9px; }
.part-no{ font-size:12px; font-weight:700; color:#fff; background:var(--accent); border-radius:5px;
  padding:2px 7px; letter-spacing:.4px; font-family:var(--sans); flex:none; }
.toc-card ol{ list-style:none; margin:0; padding:0; counter-reset:c; }
.toc-card li{ margin:0; counter-increment:c; }
.toc-card li a{ display:flex; gap:8px; padding:5px 0; font-size:13.6px; color:var(--ink-soft); line-height:1.4; }
.toc-card li a::before{ content:counter(c); color:var(--faint); font-variant-numeric:tabular-nums;
  font-size:12px; min-width:1.1em; }
.toc-card li a:hover{ color:var(--accent-2); }

/* ------------------------------------------------------------ motion */
@media (prefers-reduced-motion:no-preference){
  figure.viz [data-anim]{ opacity:0; }
  figure.viz.in-view [data-anim]{ animation:viz-fade .6s ease forwards; }
  figure.viz.in-view [data-anim="1"]{ animation-delay:.05s; }
  figure.viz.in-view [data-anim="2"]{ animation-delay:.35s; }
  figure.viz.in-view [data-anim="3"]{ animation-delay:.65s; }
  figure.viz.in-view [data-anim="4"]{ animation-delay:.95s; }
  figure.viz.in-view [data-anim="5"]{ animation-delay:1.25s; }
  .viz-draw{ stroke-dasharray:var(--len,1000); stroke-dashoffset:var(--len,1000); }
  figure.viz.in-view .viz-draw{ animation:viz-draw 1.1s ease forwards; }
  .viz-sweep{ transform-box:fill-box; transform-origin:left center; }
  figure.viz.in-view .viz-sweep{ animation:viz-sweep 1.6s ease-in-out infinite; }
  figure.viz.in-view .viz-pulse{ animation:viz-pulse 2.4s ease-in-out infinite; }
}
figure.viz.no-anim [data-anim]{ opacity:1; }
figure.viz.no-anim .viz-draw{ stroke-dashoffset:0; }
@keyframes viz-fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
@keyframes viz-draw{ to{ stroke-dashoffset:0; } }
@keyframes viz-sweep{ 0%{transform:translateX(0);} 50%{transform:translateX(var(--sweep,120px));} 100%{transform:translateX(0);} }
@keyframes viz-pulse{ 0%,100%{opacity:.35;} 50%{opacity:1;} }

/* ------------------------------------------------------------ responsive */
@media (max-width:1180px){
  .layout{ grid-template-columns:var(--sidebar-w) minmax(0,1fr); }
  .toc-side{ display:none; }
}
@media (max-width:920px){
  :root{ --sidebar-w:17rem; }
  .layout{ grid-template-columns:1fr; }
  .menu-toggle{ display:grid; }
  .sidebar{
    position:fixed; top:var(--topbar-h); left:0; z-index:45; width:min(86vw,var(--sidebar-w));
    background:var(--surface); transform:translateX(-104%); transition:transform .22s ease;
    box-shadow:var(--shadow);
  }
  .sidebar.open{ transform:none; }
  .scrim.open{ display:block; position:fixed; inset:var(--topbar-h) 0 0 0; z-index:44;
    background:rgba(0,0,0,.4); }
  .content{ padding:24px 20px 30px; }
  .brand-text small{ display:none; }
  .search-box{ width:auto; flex:1; max-width:none; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .content h1{ font-size:1.95rem; }
  .content h2{ font-size:1.4rem; }
  .hero-title{ font-size:2.2rem; }
  .hero-sub{ font-size:1.15rem; }
  .page-nav{ grid-template-columns:1fr; }
  .stat .num{ font-size:1.5rem; }
}

/* ---------- quick-wins: chapter meta, footer, cite, print ---------- */
.chapter-meta{ display:flex; gap:.5rem; align-items:center; font-size:.82rem;
  color:var(--muted); margin:.15rem 0 1.5rem; }
.chapter-meta .cm-dot{ opacity:.45; }
.chapter-meta time{ color:var(--muted); }

.footer-links a{ color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; }
.footer-links a:hover{ border-bottom-color:currentColor; }

.cite-book{ margin:2.5rem 0 1rem; }
.cite-book h2{ font-size:1.05rem; margin-bottom:.55rem; }
.cite-bibtex{ overflow-x:auto; }

@media print {
  @page { margin: 16mm 14mm; }
  html, html[data-theme="dark"] {
    color-scheme: light;
    --bg:#ffffff; --surface:#ffffff; --surface-3:#f0ece3;
    --ink:#1a1a1a; --ink-soft:#333333; --muted:#555555;
    --accent:#c15b39; --border-2:#94a3b8;
  }
  body{ background:#fff !important; color:#1a1a1a !important; }
  .topbar,.sidebar,.toc-side,.scrim,.progress-bar,.page-nav,.search-box,
  .menu-toggle,#theme-toggle,.viz-replay,.headerlink{ display:none !important; }
  .layout{ display:block; }
  .main,.content{ margin:0 !important; max-width:none !important; padding:0 !important; }
  .content{ font-size:11pt; }
  h1,h2,h3,h4{ break-after:avoid; }
  pre,figure,table,.admonition,.viz{ break-inside:avoid; }
  pre,code{ font-size:8.5pt; white-space:pre-wrap; word-wrap:break-word; }
  a{ color:#1a1a1a; text-decoration:none; }
  .site-footer{ border-top:1px solid #ccc; margin-top:1rem; color:#555; }
  figure.viz svg{ max-width:100%; height:auto; }
}
.chapter-meta .cm-colab{ color:var(--accent); text-decoration:none; font-weight:500; }
.chapter-meta .cm-colab:hover{ text-decoration:underline; }
.tool-hub-intro{ color:var(--muted); font-size:.95rem; }
.tool-hub-item{ margin:2.2rem 0; }
.tool-hub-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-bottom:1px solid var(--border-2,#94a3b8); padding-bottom:.3rem; margin-bottom:.6rem; }
.tool-hub-head h2{ margin:0; border:none; }
.tool-chapter-link{ font-size:.82rem; color:var(--accent); text-decoration:none; white-space:nowrap; }
.tool-chapter-link:hover{ text-decoration:underline; }