/* =========================================================================
   KnowML — design system
   One stylesheet, every page. Dark by default, light on toggle.
   ========================================================================= */

:root {
  /* Dark theme. Tuned against measured WCAG ratios rather than by eye:
     the page sits at Material's ~#121212 baseline instead of near-black (the
     old #08080c put body text at 17:1, which is the halation zone), each
     surface step clears Material's elevation-0-to-1 ratio of 1.124 so cards
     actually read as cards, and --text-faint now passes AA on every surface
     it lands on. --accent stays put because filled buttons put white on it;
     --accent-text is the legible variant for accent-coloured text. */
  --bg: #0c0a16;
  --bg-1: #1c1829;
  --bg-2: #221d33;
  --bg-card: #15121f;
  --border: rgba(214,204,255,.11);
  --border-soft: rgba(214,204,255,.06);
  --border-hover: rgba(214,204,255,.22);
  --text: #eeeaf8;
  --text-dim: #b6adcc;
  --text-faint: #958cb0;
  --link: #c4b5fd;

  --accent: #a78bfa;
  --on-accent: #ffffff;
  --accent-text: #c4b5fd;

  /* code panel — VS Code Dark+ family */
  --code-bg:  #16161d;
  --code-fg:  #d4d4d4;
  --code-com: #6a9955;
  --code-str: #ce9178;
  --code-num: #b5cea8;
  --code-kw:  #c586c0;
  --code-bi:  #4ec9b0;
  --code-fn:  #dcdcaa;
  --accent-2: #f472b6;
  --accent-glow: rgba(167,139,250,.32);
  --ease: cubic-bezier(.16,1,.3,1);

  --c-map: #9ca3af;
  --c-math: #a78bfa;
  --c-classical: #34d399;
  --c-unsup: #2dd4bf;
  --c-nn: #60a5fa;
  --c-vision: #38bdf8;
  --c-visionfm: #22d3ee;
  --c-sequence: #fb923c;
  --c-attention: #f472b6;
  --c-nlp: #4ade80;
  --c-llm: #818cf8;
  --c-rag: #2dd4bf;
  --c-genai: #e879f9;
  --c-speech: #fbbf24;
  --c-multimodal: #c084fc;
  --c-rl: #f59e0b;
  --c-rec: #93c5fd;
  --c-ts: #86efac;
  --c-graph: #67e8f9;
  --c-sci: #a3e635;
  --c-3d: #7dd3fc;
  --c-robot: #fca5a5;
  --c-world: #d8b4fe;
  --c-efficient: #94a3b8;
  --c-mlops: #a1a1aa;
  --c-eval: #fda4af;
  --c-frontier: #f87171;
  --c-interview: #ff6b6b;
  --c-gpu: #facc15;
  --c-practice: #22c55e;
  --c-atlas: #a855f7;
  --c-challenge: #3b82f6;

  --know-cold: #f87171;
  --know-conceptual: #fbbf24;
  --know-nice: #34d399;

  --hl-yellow: #fde68a;
  --hl-green: #86efac;
  --hl-pink: #f9a8d4;
  --hl-blue: #93c5fd;

  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 4px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 20px 60px -12px rgba(0,0,0,.5);
  /* The roadmap mode switch asked for --shadow-sm, which was never defined in
     either theme, so that rule resolved to nothing. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --content-w: 940px;
  --font-ui: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  /* Prose was set in Source Serif; KnowSys reads better in one sans, so the
     "serif" slot now points at the same face. Name kept so 30+ rules still work. */
  --font-serif: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

html[data-theme='light'] {
  /* The light theme used to be white on white: --bg, --bg-1 and --bg-card were
     all #ffffff, so the page-to-card ratio was exactly 1.000 and none of the 56
     card surfaces lifted off the page at all. The dark theme had the same
     disease and was retuned to 1.143; this is the same fix in reverse. The page
     drops to a faintly cool off-white and the card stays pure white, so the
     card is the thing that glows rather than the thing that disappears.

       page  -> card    1.000 -> 1.106
       card  -> inset   1.081 -> 1.176
       body text        18.04 -> 15.68   (near-black on pure white halates
                                          over a long read, same reason the
                                          dark theme came down from 17.13)  */
  --bg: #f7f5ff;
  --bg-1: #ffffff;          /* floating surfaces: drawers, search, toolbars */
  --bg-2: #efebfb;          /* insets, pressed states, code chrome */
  --bg-card: #ffffff;
  --border: rgba(50,25,110,.11);
  --border-soft: rgba(50,25,110,.06);
  --border-hover: rgba(50,25,110,.20);
  --text: #1b1530;
  --text-dim: #524a6b;
  /* #86868f measured 3.61:1 on white — a fail for the 11-13px text this is
     used on (stat labels, scroll cue, chip labels, 89 uses in all). Raised to
     #6b6b76, then to #66666e when the page background dropped to #f3f3f8 and
     five .tag elements slipped to 4.48. Now 5.69:1 on white, worst real
     background 4.84, still clearly lighter than --text-dim's 8.64:1. */
  --text-faint: #6c6487;

  /* The topic palette, re-derived for a light background.
     The :root values are tuned for dark surfaces: as small text on white they
     measured 1.4:1 to 3.9:1, and 181 inline `color:var(--c-*)` labels plus the
     card borders and swatches all read washed out. Each token here keeps its
     hue, caps saturation at 0.72 so it deepens rather than turning neon, and is
     solved to 4.6:1 on white. Generated, not eyeballed. The four reds are given
     distinct hues because normalising contrast collapsed them into one colour
     and pages 25, 26 and 27 sit side by side on the browse page. */
  --c-map: #6c7686;
  --c-math: #7f5ce5;
  --c-classical: #1d855f;
  --c-unsup: #1b8376;
  --c-nn: #2374d8;
  --c-vision: #1b7da9;
  --c-visionfm: #188191;
  --c-sequence: #b2601d;
  --c-attention: #da2483;
  --c-nlp: #198741;
  --c-llm: #5c68e4;
  --c-rag: #1b8376;
  --c-genai: #c224db;
  --c-speech: #927018;
  --c-multimodal: #994fe2;
  --c-rl: #9c6c19;
  --c-rec: #2275d2;
  --c-ts: #16873f;
  --c-graph: #17818f;
  --c-sci: #588115;
  --c-3d: #1c7dab;
  --c-robot: #c0551f;
  --c-world: #9750e2;
  --c-efficient: #627794;
  --c-mlops: #747480;
  --c-eval: #dd2e4e;
  --c-frontier: #bd341f;   /* also used as a label on a 6% wash of itself */
  --c-interview: #dd3131;
  --c-gpu: #8b7317;
  --c-practice: #178740;
  --c-atlas: #9a4ee2;
  --c-challenge: #3072dd;

  /* The knowledge-state trio was only ever defined in :root. As callout
     labels and qa-level badges on white they measured 1.92, 1.67 and 2.77.
     Derived like the topic palette, but against a 14% tint of themselves
     rather than plain white — a badge's background is a wash of its own
     colour, which is the hardest surface these ever sit on, and solving
     against white left them at 3.5:1 there. */
  --know-nice: #1a7654;
  --know-conceptual: #826415;
  --know-cold: #c62121;

  --link: #6d28d9;
  --accent: #7c3aed;
  --on-accent: #ffffff;
  --accent-text: #6d28d9;

  /* code panel — VS Code Light+ family */
  --code-bg:  #f7f7f9;
  --code-fg:  #24292f;
  --code-com: #008000;
  --code-str: #a31515;
  /* #098658 and #267f99 are VS Code Light+ values and measured 4.30 and 4.29
     against --code-bg — just under AA, and there are a few hundred of these
     spans now that the Try it blocks open by default. Darkened along their own
     hue until they clear it. */
  --code-num: #098155;
  --code-kw:  #af00db;
  --code-bi:  #247a93;
  --code-fn:  #795e26;
  --accent-2: #db2777;
  --accent-glow: rgba(124,58,237,.14);
  /* Tinted toward the indigo accent rather than neutral grey. A pure-black
     shadow on a cool background reads as dirt; carrying a little of the accent
     hue is most of what separates a designed light UI from a default one. */
  --shadow: 0 1px 2px rgba(60,30,120,.05), 0 6px 20px rgba(60,30,120,.07);
  --shadow-lg: 0 2px 6px rgba(60,30,120,.05), 0 24px 48px -14px rgba(60,30,120,.16);
  --shadow-sm: 0 1px 2px rgba(60,30,120,.06);
}

/* smooth cross-fade between full page navigations (Chrome/Edge 126+;
   silently ignored elsewhere — plain instant navigation, no error) */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) { animation-duration: .32s; animation-timing-function: var(--ease); }
::view-transition-new(root) { animation-duration: .32s; animation-timing-function: var(--ease); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* The colour transition is opt-in, added by app.js only on a deliberate toggle.
   As an always-on rule it animated the load-time theme correction too, which is
   what made navigation look like it passed through a broken intermediate state. */
html.theme-anim body,
html.theme-anim .sidebar-left,
html.theme-anim .topnav { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }

/* ambient depth — soft, fixed color glows instead of a flat panel; the
   single biggest lever for "premium" vs "generated-looking" dark UI */
html[data-theme='dark'] body {
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(167,139,250,.18), transparent 60%),
    radial-gradient(900px 560px at 105% 8%, rgba(244,114,182,.10), transparent 60%),
    radial-gradient(1000px 700px at 45% 115%, rgba(167,139,250,.05), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
html[data-theme='light'] body {
  /* Two washes rather than one: indigo from above and a warmer pink low on the
     right, the same pair the hero art uses, so the page has a direction to its
     light instead of an even grey field. */
  background-image:
    radial-gradient(1200px 620px at 50% -14%, rgba(124,58,237,.07), transparent 60%),
    radial-gradient(900px 600px at 108% 8%, rgba(236,72,153,.05), transparent 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

a { color: var(--link); text-decoration: none; transition: color .15s var(--ease); }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
::selection { background: var(--accent); color: var(--on-accent); }

code, kbd, pre, .mono { font-family: var(--font-mono); }
code { background: var(--bg-2); border: 1px solid var(--border-soft); padding: .1em .4em; border-radius: 5px; font-size: .88em; }
pre { background: var(--code-bg); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 16px; overflow-x: auto; }
pre code { border: none; padding: 0; background: none; }
kbd { border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; font-size: .8em; background: var(--bg-2); }

hr { border: none; border-top: 1px solid var(--border-soft); margin: 32px 0; }

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

/* ---------- top nav ---------- */
.topnav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 14px;
  height: 60px; padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--border-soft);
}
.topnav .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.02em; font-size: 16px; color: var(--text); transition: opacity .15s var(--ease); }
.topnav .brand:hover { opacity: .8; text-decoration: none; }
.topnav .brand .dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 14px 1px var(--accent-glow); }
.topnav .brand .brand-logo { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; box-shadow: 0 0 14px 1px var(--accent-glow); }
.topnav .spacer { flex: 1; }
.navbtn {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text-dim);
  padding: 7px 12px; border-radius: 9px; font-size: 13px; cursor: pointer; font-family: var(--font-ui);
  transition: color .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .2s var(--ease);
}
.navbtn:hover { color: var(--text); border-color: var(--border-hover); background: var(--bg-card); box-shadow: 0 0 0 3px var(--accent-glow); }
.navbtn kbd { margin-left: 6px; }
.iconbtn {
  background: none; border: 1px solid var(--border); width: 34px; height: 34px; border-radius: 9px; color: var(--text-dim);
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px;
  transition: color .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease), transform .15s var(--ease);
}
.iconbtn:hover { color: var(--text); border-color: var(--border-hover); background: var(--bg-2); transform: translateY(-1px); }
.hamburger { display: none; }

/* ---------- layout ---------- */
/* The right rail used to hold a fixed 264px of table of contents that was
   mostly whitespace. It is now a 52px rail that opens on hover. */
.layout { display: grid; grid-template-columns: 272px minmax(0,1fr) 52px; width: 100%; align-items: start; }
.layout.no-right { grid-template-columns: 272px minmax(0,1fr); }
.layout.home { grid-template-columns: minmax(0,1fr); }

.sidebar-left {
  position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto;
  padding: 20px 12px 60px; border-right: 1px solid var(--border-soft);
}
.sidebar-left::-webkit-scrollbar { width: 6px; }
.sidebar-left::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.navgroup { margin-bottom: 2px; }
.navgroup summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px;
  padding: 8px 8px; border-radius: 7px; font-size: 12px; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.navgroup summary::-webkit-details-marker { display: none; }
.navgroup summary:hover { background: var(--bg-2); color: var(--text); }
.navgroup summary .chev { transition: transform .2s var(--ease); font-size: 9px; opacity: .5; }
.navgroup[open] summary .chev { transform: rotate(90deg); }
.navgroup summary .swatch {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}
.navgroup .links {
  padding: 3px 0 10px 15px; margin-left: 11px; display: flex; flex-direction: column; gap: 1px;
  border-left: 1px solid var(--border-soft);
}
.navgroup .links a {
  color: var(--text-dim); font-size: 13px; padding: 6.5px 10px; border-radius: 7px;
  display: flex; align-items: center; gap: 7px; position: relative;
  transition: color .15s var(--ease), background-color .15s var(--ease), transform .15s var(--ease);
}
.navgroup .links a:hover { color: var(--text); background: var(--bg-2); text-decoration: none; transform: translateX(2px); }
.navgroup .links a.active {
  color: var(--accent-text); background: color-mix(in srgb, var(--accent) 9%, transparent);
  font-weight: 700; box-shadow: inset 3px 0 0 var(--accent);
}
.navgroup .links a .done { width: 5px; height: 5px; border-radius: 50%; background: var(--know-nice); flex-shrink: 0; opacity: 0; box-shadow: 0 0 6px var(--know-nice); }
.navgroup .links a.is-done .done { opacity: 1; }
.navgroup .links a .stub-mark {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); background: var(--bg-2); border: 1px solid var(--border-soft);
  padding: 1.5px 6px; border-radius: 20px; margin-left: auto; flex-shrink: 0;
}
.navgroup .links a .lab-mark {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 1.5px 6px; border-radius: 20px; margin-left: auto; flex-shrink: 0;
}

.content { width: 100%; min-width: 0; padding: 40px 56px 100px; max-width: var(--content-w); margin: 0 auto; }
.layout.home .content { max-width: 1320px; padding: 0; }

.sidebar-right { position: sticky; top: 60px; height: calc(100vh - 60px); padding: 0; overflow: visible; }

/* ---------- the contents drawer ----------
   Collapsed it is a column of ticks, one per heading, with the current one lit,
   so the reading-position indicator survives the collapse. Hover, focus or tap
   opens the panel over the content rather than pushing it, so nothing reflows. */
.tocd { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 30px; }
.tocd-rail { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 14px; }
.tocd-rail i {
  display: block; width: 14px; height: 2px; border-radius: 2px;
  background: var(--border-hover); transition: background-color .18s var(--ease), width .18s var(--ease);
}
.tocd-rail i.lvl3 { width: 8px; }
.tocd-rail i.active { background: var(--accent); width: 20px; }

.tocd-toggle {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; order: -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--bg-2); border: 1px solid var(--border); cursor: pointer; padding: 0;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.tocd-toggle span { display: block; width: 13px; height: 1.5px; border-radius: 2px; background: var(--text-dim); }
.tocd-toggle span:nth-child(2) { width: 9px; }
.tocd-toggle:hover { border-color: var(--border-hover); background: var(--bg-card); }
.tocd-toggle:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

.tocd-panel {
  /* right:6px, and the closed state slides in from the LEFT. Anchoring at
     right:0 and translating +10px pushed a 258px panel past the viewport edge,
     which gave all 37 topic pages a horizontal scrollbar. */
  position: absolute; top: 0; right: 6px; width: 258px;
  max-height: calc(100vh - 96px); overflow-y: auto;
  padding: 16px 14px 20px; border-radius: 12px;
  background: var(--bg-1); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateX(-8px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 60;
}
/* :focus-within is on the PANEL, not the whole drawer. With it on .tocd, the
   toggle button counted — so Escape removed .is-open, returned focus to the
   toggle, and :focus-within immediately reopened the thing you just closed.
   A keyboard user presses the toggle to open, then tabs into the panel, and
   focus inside the panel is what holds it open. */
.tocd:hover .tocd-panel,
.tocd-panel:focus-within,
.tocd.is-open .tocd-panel { opacity: 1; visibility: visible; transform: none; }
.tocd:hover .tocd-rail i, .tocd.is-open .tocd-rail i { opacity: .35; }
.tocd-panel .toc { margin-bottom: 16px; }
.tocd-panel .sidebar-notes-btn { width: 100%; }

@media (prefers-reduced-motion: reduce) { .tocd-panel { transition: none; } }
@media (hover: none) { .tocd-toggle { background: var(--bg-card); } }
.toc-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint);
  margin-bottom: 12px; font-weight: 800; display: flex; align-items: center; gap: 7px;
}
.toc-title::before { content: ''; width: 12px; height: 2px; border-radius: 2px; background: var(--accent); }
.toc { display: flex; flex-direction: column; gap: 2px; margin-bottom: 30px; border-left: 1px solid var(--border-soft); }
.toc a {
  color: var(--text-faint); font-size: 12.5px; padding: 6px 10px 6px 14px; border-left: 2px solid transparent;
  margin-left: -1px; border-radius: 0 6px 6px 0; transition: color .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease);
}
.toc a:hover { color: var(--text); background: var(--bg-2); text-decoration: none; }
.toc a.active { color: var(--accent-text); border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); font-weight: 700; }
.toc a.lvl3 { padding-left: 26px; font-size: 12px; }


.sidebar-notes-btn {
  width: 100%; background: color-mix(in srgb, var(--accent) 8%, var(--bg-2)); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  color: var(--accent-text); padding: 11px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left;
  transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.sidebar-notes-btn:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 0 0 3px var(--accent-glow); }
.sidebar-notes-btn.is-active { background: color-mix(in srgb, var(--know-nice) 12%, var(--bg-2)); border-color: color-mix(in srgb, var(--know-nice) 35%, var(--border)); color: var(--know-nice); }

/* ---------- sidebar progress widget (JS-injected, every page) ---------- */
.sidebar-progress { padding: 10px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
.sidebar-progress .sp-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.sidebar-progress .sp-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 700; }
.sidebar-progress .sp-count { font-size: 11.5px; color: var(--accent-text); font-weight: 700; font-family: var(--font-mono); }
.sidebar-progress .sp-track { height: 5px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.sidebar-progress .sp-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 3px; transition: width .3s ease; }

/* ---------- topic header ---------- */
.crumbs { font-size: 12.5px; color: var(--text-faint); margin-bottom: 14px; }
.crumbs a { color: var(--text-faint); }
h1 { font-family: var(--font-ui); font-size: 40px; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 10px; font-weight: 800; }
.dek { font-family: var(--font-serif); font-size: 19px; color: var(--text-dim); margin: 0 0 18px; max-width: 62ch; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 36px; }

/* The old "Know cold / Know conceptually / Nice to know" priority scale is gone,
   along with the sidebar legend that decoded it. What survives is a small set of
   page-type labels — Reference, Context, Interactive — which describe what a page
   is rather than ranking it, so they render neutral instead of traffic-lit. */
.tag {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--bg-2); color: var(--text-faint); border: 1px solid var(--border);
}
.reading-time { font-size: 12.5px; color: var(--text-faint); }

/* ---------- content typography ---------- */
.content section { margin-bottom: 60px; scroll-margin-top: 72px; }
.content h2 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 20px; display: flex; align-items: baseline; gap: 10px; scroll-margin-top: 72px; }
.content h2 .num { font-family: var(--font-mono); font-size: 14px; color: var(--text-faint); font-weight: 500; flex-shrink: 0; }
.content h3 { font-size: 19px; font-weight: 700; margin: 34px 0 14px; scroll-margin-top: 72px; }
.content p { font-family: var(--font-serif); font-size: 19px; line-height: 1.72; color: var(--text); margin: 0 0 26px; max-width: 68ch; letter-spacing: -.001em; }
.content p.lede { font-size: 21px; color: var(--text-dim); }
.content li { font-family: var(--font-serif); font-size: 17.5px; line-height: 1.6; margin-bottom: 12px; max-width: 64ch; }
.content ul, .content ol { padding-left: 22px; margin: 0 0 22px; }
.content strong { color: var(--text); font-weight: 600; }
.content em.term { font-style: normal; color: var(--text); font-weight: 600; border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); }

/* ---------- TL;DR ---------- */
.tldr { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--bg-card)), var(--bg-card)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 26px; box-shadow: 0 0 0 1px transparent, var(--shadow); }
.tldr .tldr-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--accent-text); margin-bottom: 8px; }
.tldr p { margin-bottom: 0; font-size: 17px; }
/* zeroing margin-bottom above collapses the gap between sibling paragraphs, so a
   multi-paragraph TL;DR renders as one wall. Space the siblings instead. */
.tldr p + p { margin-top: 14px; }

/* ---------- before/innovation/after ---------- */
/* Three stages on a rail.
   This was a 5-column grid with `align-items: stretch`, which was wrong twice.
   The stretch made every box as tall as the tallest, so short stages became a
   lake of empty space with an arrow floating in the middle of it. And three
   columns inside a 790px content well gives each stage ~250px — measured
   across all 72 boxes on the site the median is 68 words, so that was twenty
   lines at twenty-eight characters, every time. Vertical gives each stage the
   full column: the same 68 words become four lines. The rail and the numbered
   markers carry the before-to-after direction that the columns used to. */
.bia { display: block; margin: 26px 0; position: relative; padding-left: 30px; }
.bia::before {                            /* the rail itself */
  content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--border-hover), color-mix(in srgb, var(--accent) 45%, transparent));
}
.bia .bia-box {
  position: relative; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 18px 14px; margin-bottom: 10px;
}
.bia .bia-box::before {                   /* the node on the rail */
  content: ''; position: absolute; left: -30px; top: 15px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--border-hover); box-sizing: border-box;
}
.bia .bia-box.innovation {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.bia .bia-box.innovation::before { background: var(--accent); border-color: var(--accent); }
.bia .bia-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 7px;
}
.bia .bia-box.innovation .bia-label { color: var(--accent-text); }
.bia .bia-box p, .bia .bia-box li { font-size: 14.5px; margin-bottom: 9px; }
.bia .bia-box p:last-child, .bia .bia-box li:last-child { margin-bottom: 0; }
/* The arrow cells are now redundant — the rail is the direction. Kept in the
   markup on 24 pages, so hide them here rather than editing all of them. */
.bia .bia-arrow { display: none; }

/* ---------- callouts ---------- */
.callout { border-radius: var(--radius); padding: 16px 20px; margin: 20px 0; border: 1px solid var(--border); background: var(--bg-card); }
.callout p:last-child { margin-bottom: 0; }
.callout-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; display: block; }
.callout-teach { border-left: 3px solid var(--accent-2); }
.callout-teach .callout-label { color: var(--accent-2); }
.callout-warn { border-left: 3px solid var(--know-conceptual); }
.callout-warn .callout-label { color: var(--know-conceptual); }
.callout-fail { border-left: 3px solid var(--know-cold); }
.callout-fail .callout-label { color: var(--know-cold); }
.callout-status { border-left: 3px solid var(--c-frontier); background: color-mix(in srgb, var(--c-frontier) 6%, var(--bg-card)); }
.callout-status .callout-label { color: var(--c-frontier); }

/* ---------- diagrams ---------- */
/* diagram shells are always-dark schematic panels, in BOTH site themes — every
   diagram's internal boxes/nodes were authored as solid dark fills with
   hardcoded light text (see the .diagram svg text rule below), so the shell
   itself must stay dark too, or dark boxes strand on a white card in light
   mode. Fixed colors here are intentional, not theme-reactive. */
/* Sits at #1d1d27 rather than #111117 so it still separates from the page in
   dark mode: the page bg moved up to Material's baseline, and at these
   luminances contrast ratios compress hard, so a *darker* panel could not
   clear 1.05:1 against it. Lighter is the only direction that works, and it
   keeps the hardcoded light SVG labels at 13.8:1. */
.diagram { background: #17132a; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 24px; margin: 24px 0; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.diagram-title { font-size: 12.5px; font-weight: 700; color: #b0a8c8; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
/* diagram boxes are hand-authored dark schematic panels in every theme, each
   text label already carries its own intentional inline fill color (accent
   colors like the pink/indigo Q/K labels) — only fall back to a light neutral
   for the few labels with no fill of their own. Never blanket-override fill
   here: a CSS rule beats an inline SVG fill attribute and would clobber every
   hand-picked label color on every diagram, in both themes. */
.diagram svg text { font-family: var(--font-ui); }
.diagram svg text:not([fill]) { fill: #e9e9ef; }
.diagram svg .dim:not([fill]) { fill: #9a9aa8; }
.diagram-controls { display: flex; gap: 8px; }
.diagram-controls button { background: #221d33; border: 1px solid rgba(255,255,255,.1); color: #b0a8c8; font-size: 11px; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-family: var(--font-ui); transition: color .15s var(--ease), border-color .15s var(--ease); }
.diagram-controls button:hover { color: #ededf2; border-color: var(--accent); }
/* The diagram panel is a hardcoded dark surface in BOTH themes, so anything
   inside it must use dark-theme colours regardless of the page theme. Without
   the <strong> rule below, .content strong sets near-black text on the dark
   panel in light mode — measured at 1.08:1, i.e. invisible. The caption colour
   is also lifted from #6c6c7d (3.24:1, under AA) to #b0a8c8 (6.16:1). */
.diagram-caption { font-size: 13px; color: #b0a8c8; margin-top: 12px; font-family: var(--font-serif); }
.diagram-caption strong, .diagram-title strong { color: #ededf2; }
.diagram-caption em { color: #ededf2; font-style: italic; }
.diagram-caption code { background: rgba(255,255,255,.08); color: #ededf2; border-color: rgba(255,255,255,.12); }
.diagram-caption a { color: #c4b5fd; }

/* Pause everything inside the figure, rather than naming classes. The old rule
   listed .flow-line, .pulse-node and .roll only, so .flow-line-slow,
   .flow-line-rev and .pulse-scale kept running through a "pause" — on 13 pages
   the button visibly stopped some strands and not others. A wildcard cannot
   drift out of date as new animated classes are added. */
.diagram.paused *, .diagram.paused { animation-play-state: paused !important; }

.flow-line { stroke-dasharray: 7 6; animation: flow-dash 1s linear infinite; }
@keyframes flow-dash { to { stroke-dashoffset: -26; } }
.flow-line-slow { stroke-dasharray: 5 8; animation: flow-dash 2.2s linear infinite; }
.flow-line-rev { stroke-dasharray: 7 6; animation: flow-dash-rev 1.1s linear infinite; }
@keyframes flow-dash-rev { to { stroke-dashoffset: 26; } }

.pulse-node { animation: pulse-glow 2.2s ease-in-out infinite; transform-origin: center; }
@keyframes pulse-glow { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

.pulse-scale { animation: pulse-scale 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse-scale { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.roll { offset-rotate: 0deg; animation: roll-move 3.2s linear infinite; }
@keyframes roll-move { from { offset-distance: 0%; } to { offset-distance: 100%; } }

.fade-cycle { animation: fade-cycle 3s ease-in-out infinite; }
@keyframes fade-cycle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

.rise { animation: rise 2.6s ease-in-out infinite; }
@keyframes rise { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------- comparison table ---------- */
.tbl-wrap { overflow-x: auto; margin: 20px 0; border: 1px solid var(--border); border-radius: var(--radius); }
table.cmp { width: 100%; border-collapse: collapse; font-size: 14px; font-family: var(--font-ui); }
table.cmp th { text-align: left; background: var(--bg-2); color: var(--text-dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; border-bottom: 1px solid var(--border); position: sticky; top: 0; }
table.cmp td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: top; }
table.cmp tr:last-child td { border-bottom: none; }
table.cmp td:first-child, table.cmp th:first-child { font-weight: 700; color: var(--text); white-space: nowrap; }

/* ---------- math ---------- */
.eq-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin: 16px 0; overflow-x: auto; }
.eq-explain { list-style: none; padding: 0; margin: 12px 0 0; }
.eq-explain li { display: flex; gap: 12px; padding: 6px 0; border-top: 1px solid var(--border-soft); font-size: 15px; }
.eq-explain li:first-child { border-top: none; }
.eq-explain .sym { font-family: var(--font-mono); color: var(--accent-text); min-width: 64px; flex-shrink: 0; font-size: 14px; }

/* ---------- reference figures (real external architecture images) ---------- */
.ref-figure { margin: 22px 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-card); box-shadow: var(--shadow); }
.ref-figure .rf-img-wrap { background: #ffffff; padding: 22px; display: flex; align-items: center; justify-content: center; }
.ref-figure img { display: block; max-width: 100%; height: auto; }
.ref-figure .rf-caption { padding: 12px 18px; font-size: 12.5px; color: var(--text-faint); border-top: 1px solid var(--border-soft); font-family: var(--font-ui); line-height: 1.5; }
.ref-figure .rf-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; color: var(--accent-text); margin-bottom: 4px; display: block; }
.ref-figure .rf-caption a { color: var(--text-dim); }

/* ---------- resource cards ---------- */
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 16px 0; }
.resource-card { display: flex; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease); }
.resource-card:hover { border-color: var(--border-hover); transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; }
.resource-card .r-icon { font-size: 20px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.resource-card .r-body { min-width: 0; }
.resource-card .r-kind { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 700; margin-bottom: 3px; }
.resource-card .r-title { font-size: 13.5px; color: var(--text); font-weight: 600; line-height: 1.35; }
.resource-card .r-sub { font-size: 12px; color: var(--text-faint); margin-top: 3px; }

/* ---------- interview questions ---------- */
.qa { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; background: var(--bg-card); transition: border-color .2s var(--ease); }
.qa:hover { border-color: var(--border-hover); }
.qa summary { padding: 14px 16px; cursor: pointer; font-weight: 600; font-size: 14.5px; list-style: none; display: flex; gap: 10px; align-items: flex-start; transition: background-color .15s var(--ease); }
.qa summary:hover { background: var(--bg-2); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: '+'; color: var(--accent-text); font-weight: 800; flex-shrink: 0; width: 16px; transition: transform .2s var(--ease); }
.qa[open] summary::before { content: '–'; }
.qa .qa-body { padding: 0 16px 16px 42px; font-family: var(--font-serif); font-size: 15px; color: var(--text-dim); }
.qa .qa-body p { font-size: 15px; }
.qa-level { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 20px; font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.qa-level.beginner { background: color-mix(in srgb, var(--know-nice) 18%, transparent); color: var(--know-nice); }
.qa-level.intermediate { background: color-mix(in srgb, var(--know-conceptual) 18%, transparent); color: var(--know-conceptual); }
/* 18% of a light red over a dark card lightens the surface toward the text;
   14% keeps the badge readable at 10px. */
.qa-level.deep { background: color-mix(in srgb, var(--know-cold) 14%, transparent); color: var(--know-cold); }

/* ---------- related pages ---------- */
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.related-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; border-top: 3px solid var(--accent); transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease); }
.related-card:hover { border-left-color: var(--border-hover); border-right-color: var(--border-hover); border-bottom-color: var(--border-hover); text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.related-card .rc-sec { font-size: 10.5px; text-transform: uppercase; color: var(--text-faint); font-weight: 700; letter-spacing: .05em; margin-bottom: 6px; }
.related-card .rc-title { font-size: 14.5px; font-weight: 700; color: var(--text); }
.related-card .rc-hook { font-size: 12.5px; color: var(--text-faint); margin-top: 5px; font-family: var(--font-serif); }

/* ---------- prev / next ---------- */
.prevnext { display: flex; justify-content: space-between; gap: 16px; margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--border-soft); }
.prevnext a { flex: 1; max-width: 48%; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.prevnext a:hover { border-color: var(--accent); text-decoration: none; }
.prevnext .pn-dir { font-size: 10.5px; text-transform: uppercase; color: var(--text-faint); font-weight: 700; letter-spacing: .06em; }
.prevnext .pn-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin-top: 4px; }
.prevnext .next { text-align: right; margin-left: auto; }

/* ---------- highlight marks ---------- */
/* One highlight can paint as several <mark>s when it crosses inline markup.
   Pad and round only the two outer ends so the run reads as one band. */
mark.hl { padding: 1px 0; border-radius: 0; cursor: pointer; color: #14141a; transition: filter .12s var(--ease); }
mark.hl.hl-first { padding-left: 1px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
mark.hl.hl-last { padding-right: 1px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
mark.hl:hover { filter: brightness(0.93); }
mark.hl-yellow { background: var(--hl-yellow); }
mark.hl-green { background: var(--hl-green); }
mark.hl-pink { background: var(--hl-pink); }
mark.hl-blue { background: var(--hl-blue); }
mark.hl.has-note { box-shadow: 0 2px 0 0 currentColor; }

/* ---------- inline comment anchors (shared, Confluence-style) ---------- */
.cm-anchor-wrap { white-space: nowrap; }
mark.cm-anchor {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-bottom: 2px dotted color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 2px; cursor: pointer;
}
.cm-pin {
  display: inline-flex; align-items: center; gap: 2px; vertical-align: super;
  background: var(--accent); color: var(--on-accent); border: none; border-radius: 20px;
  font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 5px; margin-left: 2px;
  cursor: pointer; transform: translateY(-2px); transition: transform .15s var(--ease);
}
.cm-pin:hover { transform: translateY(-3px) scale(1.06); }
.cm-pin svg { width: 10px; height: 10px; }

/* ---------- selection toolbar ---------- */
.select-toolbar { position: absolute; display: none; gap: 4px; background: var(--bg-1); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 10px; padding: 6px; z-index: 150; }
.select-toolbar button { width: 26px; height: 26px; border-radius: 6px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.select-toolbar .sw-yellow { background: var(--hl-yellow); }
.select-toolbar .sw-green { background: var(--hl-green); }
.select-toolbar .sw-pink { background: var(--hl-pink); }
.select-toolbar .sw-blue { background: var(--hl-blue); }
.select-toolbar .sw-note { background: var(--bg-2); color: var(--text); border: 1px solid var(--border); font-size: 12px; width: auto; padding: 0 10px; }
.select-toolbar .sw-comment { background: var(--bg-2); color: var(--text); border: 1px solid var(--border); }
.select-toolbar .sw-remove { background: var(--bg-2); color: var(--know-cold); border: 1px solid var(--border); display: none; }
.select-toolbar[data-mode="edit"] .sw-remove { display: flex; }
.select-toolbar[data-mode="edit"] .sw-comment { display: none; }

/* ---------- notes drawer ---------- */
.notes-drawer { position: fixed; top: 0; right: -380px; width: 360px; height: 100vh; background: var(--bg-1); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 180; transition: right .3s var(--ease); display: flex; flex-direction: column; }
.notes-drawer.open { right: 0; }
.notes-head { padding: 16px 18px; border-bottom: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; }
.notes-head h3 { margin: 0; font-size: 15px; }
.notes-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.notes-body h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin: 18px 0 8px; }
.notes-body h4:first-child { margin-top: 0; }
#freeNotes { width: 100%; min-height: 130px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: var(--font-serif); font-size: 14px; padding: 10px 12px; resize: vertical; }
.hl-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; }
.hl-item .hl-quote { border-left: 3px solid var(--accent); padding-left: 8px; color: var(--text-dim); font-style: italic; margin-bottom: 6px; font-family: var(--font-serif); }
.hl-item .hl-note { color: var(--text); font-size: 13px; }
.hl-item .hl-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.hl-item .hl-row .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hl-item .hl-del, .hl-item .hl-go { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 11px; padding: 0; }
.hl-item .hl-del { margin-left: auto; }
.hl-item .hl-go:hover { color: var(--accent-text); }
.hl-item .hl-del:hover { color: var(--know-cold); }
.hl-item .hl-go:disabled { opacity: .4; cursor: default; }
.hl-item.is-orphan { border-style: dashed; }
.hl-orphan { color: var(--text-faint); font-size: 11.5px; line-height: 1.45; margin-top: 6px; font-family: var(--font-ui); }

/* briefly ring a highlight after jumping to it from the drawer */
@keyframes hl-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px var(--accent); } }
mark.hl-flash { animation: hl-flash 1.2s var(--ease); }

/* ---------- inline note editor ---------- */
.note-editor {
  position: absolute; display: none; z-index: 160; width: 290px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg); padding: 10px;
}
.note-editor.open { display: block; }
.note-editor textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--border); border-radius: 7px;
  color: var(--text); font-family: var(--font-serif); font-size: 13.5px; line-height: 1.5;
  padding: 8px 10px; resize: vertical; box-sizing: border-box;
}
.note-editor textarea:focus { outline: none; border-color: var(--accent); }
.ne-row { display: flex; gap: 8px; margin-top: 8px; }
.ne-row button {
  flex: 1; border-radius: 7px; padding: 7px; cursor: pointer;
  font-family: var(--font-ui); font-size: 12px; border: 1px solid var(--border);
}
.ne-cancel { background: var(--bg-2); color: var(--text-dim); }
.ne-cancel:hover { color: var(--text); }
.ne-save { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.notes-foot { padding: 14px 18px; border-top: 1px solid var(--border-soft); display: flex; gap: 8px; }
.notes-foot button { flex: 1; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-dim); padding: 9px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-family: var(--font-ui); }
.notes-foot button:hover { color: var(--text); border-color: var(--accent); }
.empty-hint { color: var(--text-faint); font-size: 13px; font-family: var(--font-serif); }

/* ---------- search modal ---------- */
.search-modal { position: fixed; inset: 0; background: rgba(4,4,8,.6); backdrop-filter: blur(3px); z-index: 300; display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.search-modal.open { display: flex; }
.search-box { width: 100%; max-width: 600px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.search-input-row { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); gap: 10px; }
.search-input-row .si-icon { color: var(--text-faint); }
#searchInput { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 16px; font-family: var(--font-ui); }
.search-results { max-height: 55vh; overflow-y: auto; padding: 8px; }
.search-hit { display: block; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.search-hit.active, .search-hit:hover { background: var(--bg-2); text-decoration: none; }
.search-hit .sh-sec { font-size: 10.5px; text-transform: uppercase; font-weight: 700; letter-spacing: .05em; }
.search-hit .sh-title { font-size: 14.5px; color: var(--text); font-weight: 600; margin-top: 2px; }
.search-hit .sh-sum { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; }
.search-hit--section { padding-left: 22px; }
.search-hit--section .sh-title { font-weight: 500; font-size: 14px; }
.search-hit--section .sh-sum { font-style: italic; }
.search-empty { padding: 24px; text-align: center; color: var(--text-faint); font-size: 13.5px; }
.search-hint { padding: 10px 16px; border-top: 1px solid var(--border-soft); font-size: 11.5px; color: var(--text-faint); display: flex; gap: 14px; }

/* ---------- scroll to top ---------- */
.to-top { position: fixed; bottom: 22px; right: 22px; width: 42px; height: 42px; border-radius: 50%; background: var(--bg-1); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); z-index: 90; transition: transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.to-top:hover { transform: translateY(-3px); border-color: var(--border-hover); color: var(--text); }
.to-top.show { display: flex; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .layout { grid-template-columns: 260px minmax(0,1fr); }
  .sidebar-right { display: none; }
}
@media (max-width: 880px) {
  .hamburger { display: flex; }
  .layout { grid-template-columns: 1fr; }
  .sidebar-left { position: fixed; left: -300px; top: 60px; width: 280px; background: var(--bg-1); z-index: 150; transition: left .25s var(--ease); box-shadow: var(--shadow-lg); }
  .sidebar-left.open { left: 0; }
  .content { padding: 28px 20px 80px; }
  h1 { font-size: 30px; }
  .bia { grid-template-columns: 1fr; }
  .notes-drawer { width: 100%; right: -100%; }
}
@media (max-width: 560px) {
  .topnav { gap: 8px; padding: 0 12px; }
  .navbtn kbd, .navbtn .navbtn-label { display: none; }
  .navbtn { padding: 8px; }
}

/* ---------- misc home-page specific ---------- */
.hero { padding: 88px 24px 40px; max-width: 1240px; margin: 0 auto; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: -60px -24px auto -24px; height: 440px; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 22%, transparent) 1px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 30% 20%, black 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 60% 60% at 30% 20%, black 30%, transparent 78%);
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: center; }
.hero-copy, .hero-visual { min-width: 0; }
.hero-copy { max-width: 660px; }
.hero h1 { font-size: 48px; line-height: 1.1; letter-spacing: -.015em; }
.hero p.dek { margin: 0 0 30px; font-size: 18px; max-width: 54ch; }

/* A 4-up grid rather than a wrapping flex row: with flex, one wide value
   ("1950s→2026") pushed itself onto a second line and left the row looking
   broken. A grid keeps all four abreast and wraps to 2x2 only when narrow. */
.stat-row { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0 0; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--border); }
@media (max-width: 620px) { .stat-row { grid-template-columns: repeat(2, auto); row-gap: 18px; } }
.stat { text-align: left; padding-right: 18px; margin-right: 18px; border-right: 1px solid var(--border); }
.stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.stat .num { font-size: 25px; font-weight: 800; color: var(--text); font-family: var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.hero-cta { display: flex; gap: 14px; margin-top: 4px; flex-wrap: wrap; }
.hero-links { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; align-items: flex-start; }
.hero-links .hero-techmap-link { margin-top: 0; }
.hero-techmap-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--text-dim); }
.hero-techmap-link:hover { color: var(--accent-text); text-decoration: none; }
.hero-techmap-link .arrow { transition: transform .2s var(--ease); }
.hero-techmap-link:hover .arrow { transform: translateX(3px); }
.btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--text); color: var(--bg);
  padding: 14px 26px; border-radius: 10px; font-weight: 700; font-size: 15px;
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-primary .arrow { transition: transform .2s var(--ease); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px color-mix(in srgb, var(--accent) 65%, transparent); text-decoration: none; color: var(--bg); }
.btn-primary:hover .arrow { transform: translateX(3px); }
.btn-secondary {
  display: inline-flex; align-items: center; background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); padding: 14px 24px; border-radius: 10px; font-weight: 600; font-size: 15px;
  transition: border-color .2s var(--ease), transform .2s var(--ease), background-color .2s var(--ease);
}
.btn-secondary:hover { border-color: var(--border-hover); transform: translateY(-2px); background: var(--bg-2); text-decoration: none; }

/* ---------- hero visual: animated network panel ---------- */
.hero-visual { position: relative; z-index: 1; }
/* ---------- hero: a perspective stage, not a flat card ----------
   Three planes at different translateZ inside one perspective container, so
   pointer movement parallaxes them against each other and the depth is real
   rather than drawn. The subject earns it: a network has layers, so separating
   them in Z depicts the thing rather than decorating it.
   Everything below degrades to a static, correctly-composed card with no JS
   and under prefers-reduced-motion. */
.hv-stage { perspective: 1100px; perspective-origin: 50% 45%; }
.hv-deck {
  position: relative; transform-style: preserve-3d;
  border-radius: var(--radius-lg); background: #111117;
  border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-lg);
  padding: 18px; overflow: hidden;
  min-height: 316px;
  /* Two independent inputs write here: app.js writes --rx/--ry from the
     pointer, home-scroll.js writes --sr/--sz from scroll position. Composing
     them in one transform rather than having both set .style.transform is what
     stops them clobbering each other. */
  transform: rotateX(calc(var(--rx, 0deg) + var(--sr, 0deg)))
             rotateY(var(--ry, 0deg))
             translateZ(var(--sz, 0px));
  transition: transform .5s var(--ease);
}
.hv-deck::after {              /* a soft sheen that follows the tilt */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 20%),
              rgba(167,139,250,.16), transparent 62%);
  transition: background .35s var(--ease);
}
.hv-plane { transform-style: preserve-3d; }
.hv-plane svg { display: block; width: 100%; height: auto; }
.hv-plane--far, .hv-plane--near { position: absolute; inset: 18px; }
.hv-plane--far  { transform: translateZ(-90px) scale(1.18); opacity: 1; }
.hv-plane--mid  { position: relative; transform: translateZ(0); }
.hv-plane--near { transform: translateZ(60px); }
.hv-node { filter: drop-shadow(0 0 6px rgba(167,139,250,.75)); }
.hv-signal { filter: drop-shadow(0 0 5px rgba(244,114,182,.6)); animation: hv-pulse 3.4s ease-in-out infinite; }
@keyframes hv-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.hv-mote {
  position: absolute; left: var(--x); top: var(--y);
  width: 4px; height: 4px; border-radius: 50%;
  background: #f472b6; box-shadow: 0 0 8px rgba(244,114,182,.8);
  animation: hv-drift 7s ease-in-out infinite; animation-delay: var(--d);
}
@keyframes hv-drift {
  0%,100% { transform: translate3d(0,0,0); opacity: .35; }
  50%     { transform: translate3d(6px,-10px,0); opacity: .9; }
}
/* Pointer parallax is an enhancement. Without it the deck sits square, which
   is a deliberate resting state rather than a broken one. */
@media (prefers-reduced-motion: reduce) {
  .hv-deck { transform: none !important; transition: none; }
  .hv-signal, .hv-mote { animation: none; }
}
.hv-caption { font-family: var(--font-serif); font-size: 12.5px; color: var(--text-faint); margin-top: 12px; line-height: 1.5; text-align: center; }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 420px; margin: 0 auto 8px; }
  .hero h1 { font-size: 38px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — scroll narrative
   The homepage is six short acts rather than one long page. Everything below
   is progressive enhancement: with JS off, or under prefers-reduced-motion,
   every [data-reveal] element renders in its final state and the scroll-driven
   custom properties simply keep their fallback values.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- reveal on scroll ---------- */
/* Gated on html.js-reveal, which home-scroll.js sets before first paint. With
   no JS the class never appears, so the rules never apply and the content is
   just visible — the correct no-JS outcome rather than a blank page. */
/* The lift uses the independent `translate` property rather than `transform`.
   A .door is both [data-reveal] and [data-tilt]: with transform, the reveal's
   `transform: none` won the cascade on specificity and silently cancelled the
   pointer tilt. `translate` and `transform` compose instead of competing. */
html.js-reveal [data-reveal] {
  opacity: 0;
  translate: 0 16px;
  transition: opacity .62s var(--ease), translate .62s var(--ease);
  transition-delay: calc(var(--i, 0) * 65ms);
  will-change: opacity, translate;
}
html.js-reveal [data-reveal].in { opacity: 1; translate: none; }

/* ---------- hero, restyled as a stage ---------- */
.hero { min-height: 78vh; display: flex; align-items: center; padding: 76px 24px 56px; }
.hero-grid { width: 100%; }
.hero h1 { font-size: 52px; margin-bottom: 18px; }
.hero p.dek { margin: 0 0 32px; font-size: 18.5px; max-width: 50ch; }
.hero-eyebrow {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent-text); margin-bottom: 16px;
}
.hero-scrollcue {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 40px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint);
}
.hsc-line {
  width: 34px; height: 1px; background: currentColor; transform-origin: left center;
  animation: hsc-reach 2.4s var(--ease) infinite;
}
@keyframes hsc-reach {
  0%, 100% { transform: scaleX(.4); opacity: .45; }
  50%      { transform: scaleX(1);  opacity: 1; }
}

/* ---------- the act shell ---------- */
.act { position: relative; padding: 96px 0; }
.act-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.act-eyebrow {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--accent-text); margin-bottom: 10px;
}
.act-title { font-size: 32px; line-height: 1.18; margin: 0 0 12px; letter-spacing: -.015em; max-width: 20ch; }
.act--thesis .act-title, .act--rail .act-title { max-width: 24ch; }
.act-sub { font-family: var(--font-serif); color: var(--text-dim); font-size: 16.5px; max-width: 62ch; margin: 0 0 34px; }
.act--thesis .mental-flow { margin-top: 34px; }
@media (max-width: 700px) { .act { padding: 72px 0; } .act-title { font-size: 26px; } }

/* A hairline between acts, so the scroll has punctuation without a heavy rule. */
.act + .act::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1192px, calc(100% - 48px)); height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent);
}

/* ---------- act 3 · the four doors ---------- */
.door-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
@media (max-width: 1080px) { .door-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .door-grid { grid-template-columns: 1fr; } }
.door {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px 22px 20px; overflow: hidden;
  color: var(--text);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.door::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--door, var(--accent));
}
/* A wash that only appears on hover, tinted by the door's own colour, so the
   four cards stay visually quiet until you aim at one. */
.door::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at 50% -10%,
              color-mix(in srgb, var(--door, var(--accent)) 16%, transparent), transparent 70%);
  transition: opacity .3s var(--ease);
}
/* --tx/--ty come from home-scroll.js as normalised pointer position; they stay
   at 0 until a pointer is over the card, so the resting state is square. */
.door { transform: perspective(900px) rotateY(calc(var(--tx, 0) * 3.5deg)) rotateX(calc(var(--ty, 0) * -3.5deg)); }
.door:hover { transform: perspective(900px) translateY(-5px) rotateY(calc(var(--tx, 0) * 3.5deg)) rotateX(calc(var(--ty, 0) * -3.5deg)); box-shadow: var(--shadow-lg); border-color: var(--border-hover); text-decoration: none; }
.door:hover::after { opacity: 1; }
.door-icon {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  margin-bottom: 16px; color: var(--door, var(--accent));
  background: color-mix(in srgb, var(--door, var(--accent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--door, var(--accent)) 26%, transparent);
}
.door-icon svg { width: 20px; height: 20px; }
/* --text-faint measured 3.61:1 here in light theme, and this is 11.5px so it
   needs 4.5. Size and italic carry the hierarchy instead of lightness. */
.door-kicker { font-size: 11.5px; font-weight: 700; color: var(--text-dim); font-style: italic; margin-bottom: 6px; }
.door-title { font-size: 20px; font-weight: 800; letter-spacing: -.012em; margin-bottom: 9px; }
.door-hook { font-family: var(--font-serif); font-size: 13.5px; line-height: 1.58; color: var(--text-dim); flex: 1; margin-bottom: 18px; }
/* The --c-* palette is tuned for swatches and borders on a dark card, not for
   text. Used raw here it measured 1.67:1 (amber), 1.92:1 (green) and 2.78:1
   (red) on the light card, and 4.15:1 for --accent on the dark one. Mixing half
   the door colour into the body text colour self-corrects per theme: the
   measured minimum becomes 5.02:1 light and 7.39:1 dark, and the hue survives. */
.door-cta { font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--door, var(--accent)) 50%, var(--text)); display: flex; align-items: center; gap: 6px; }
.door-cta .arrow { transition: transform .2s var(--ease); }
.door:hover .door-cta .arrow { transform: translateX(4px); }

/* The labs hub reuses the door card at a wider gauge: its hooks are longer
   than the homepage's, so four abreast would leave each one a column of text. */
.door-grid--labs { grid-template-columns: repeat(3, 1fr); margin-top: 22px; }
@media (max-width: 980px) { .door-grid--labs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .door-grid--labs { grid-template-columns: 1fr; } }

/* ---------- act 4 · the era rail ---------- */
/* --p is written by home-scroll.js: 0 when the act's top reaches the bottom of
   the viewport, 1 when its bottom reaches the top. The track slides left across
   that range, so the seven eras pass by as a consequence of scrolling rather
   than on a timer. Fallback --p:.5 centres it if JS never runs. */
.rail-viewport {
  margin: 8px 0 40px; padding: 26px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 9%, black 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 9%, black 91%, transparent);
}
.rail-track {
  display: flex; align-items: center; gap: 22px; width: max-content;
  padding-left: 24px;
  transform: translate3d(calc(var(--p, .5) * -46%), 0, 0);
  will-change: transform;
}
.rail-item {
  white-space: nowrap; font-size: 21px; font-weight: 700; letter-spacing: -.012em;
  color: var(--text-faint); transition: color .3s var(--ease);
}
.rail-item b { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent-text); margin-right: 9px; }
.rail-item--now { color: var(--text); }
.rail-dot { color: var(--border-hover); font-size: 20px; }
@media (max-width: 700px) { .rail-item { font-size: 17px; } }

.rail-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rail-chips-label { font-size: 12.5px; font-weight: 700; color: var(--text-faint); margin-right: 4px; }
.rail-chips a {
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 14px;
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.rail-chips a:hover { color: var(--text); border-color: var(--border-hover); transform: translateY(-2px); text-decoration: none; }
.rail-chips .rail-chip-more { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 34%, transparent); }

/* ---------- act 5 · the tool row ---------- */
.tool-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 34px; }
@media (max-width: 1080px) { .tool-row { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 560px)  { .tool-row { grid-template-columns: 1fr; } }
.tool-icon { color: var(--accent-text); margin-bottom: 12px; }
.tool-icon svg { width: 22px; height: 22px; }
.tool-title { font-size: 15px; font-weight: 700; margin-bottom: 7px; }
.tool-body { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); font-family: var(--font-serif); }
.tool-body kbd { font-size: 11px; }

/* ---------- act 6 · the close ---------- */
.act--close { padding-bottom: 120px; }
.close-stats {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: start;
  padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid var(--border);
}
@media (max-width: 620px) { .close-stats { grid-template-columns: repeat(2, auto); row-gap: 20px; } }
.close-cta h2 { font-size: 30px; margin: 0 0 10px; letter-spacing: -.015em; }
.close-cta p { font-family: var(--font-serif); color: var(--text-dim); font-size: 16px; max-width: 56ch; margin: 0 0 26px; }
.close-cta .btn-secondary { margin-left: 12px; }
@media (max-width: 520px) { .close-cta .btn-secondary { margin-left: 0; margin-top: 12px; } }

/* Motion here is all decoration over a page that already reads correctly, so
   under reduced-motion every piece of it simply stops. */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal [data-reveal] { opacity: 1 !important; translate: none !important; transition: none; }
  .rail-track { transform: none; }
  .door, .door:hover { transform: none; }
  .hsc-line { animation: none; }
}

/* The badge family is a colour used as text on a wash of the same colour. Under
   the light theme the wash lightens the surface toward the text instead of away
   from it, so the same 18% that reads well on a dark card costs a full point of
   contrast here. */
html[data-theme='light'] .qa-level.beginner { background: color-mix(in srgb, var(--know-nice) 13%, transparent); }
html[data-theme='light'] .qa-level.intermediate { background: color-mix(in srgb, var(--know-conceptual) 13%, transparent); }
html[data-theme='light'] .qa-level.deep { background: color-mix(in srgb, var(--know-cold) 13%, transparent); }
html[data-theme='light'] .topic-card .tc-status.full { background: color-mix(in srgb, var(--know-nice) 13%, transparent); }

/* Under 1080px the primary nav collapses out of the header, so the sidebar
   drawer has to carry those destinations or they become unreachable again. */
.sb-primary { display: none; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.sb-primary a { display: block; padding: 8px; font-size: 12.5px; font-weight: 700; color: var(--accent-text); }
.sb-primary a:hover { color: var(--text); text-decoration: none; }
@media (max-width: 1080px) { .sb-primary { display: block; } }

.lab-tips { list-style: none; padding: 0; margin: 18px 0 22px; display: flex; flex-direction: column; gap: 10px; }
.lab-tips li { font-size: 14.5px; line-height: 1.6; color: var(--text-dim); padding-left: 18px; position: relative; }
.lab-tips li::before { content: '›'; position: absolute; left: 0; color: var(--accent-text); font-weight: 700; }
.lab-tips strong { color: var(--text); }

/* ---------- practice.html — the decision tree ----------
   This page was five sections of prose describing platforms, 1,300 words to
   answer one question: which of these fixes the gap I actually have. It is now
   a root, four branches and the platforms hanging off each. */
.ptree { margin: 30px 0 46px; }
.pt-root::after {
  content: ''; position: absolute; top: 100%; left: 50%; width: 2px; height: 22px;
  background: var(--border-hover);
}
.pt-root {
  display: inline-block; margin: 0 auto 22px; padding: 11px 22px;
  border-radius: 999px; background: var(--bg-card); border: 1.5px solid var(--border-hover);
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  position: relative; left: 50%; transform: translateX(-50%);
}
/* One rail under the root spanning the first branch's centre to the last, with
   a stem dropping into each. Four per-branch rails looked like four unrelated
   lines rather than one fork. */
.pt-branches { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 22px; }
.pt-branches::before {
  content: ''; position: absolute; top: 0; left: 12.5%; right: 12.5%; height: 2px;
  background: var(--border-hover);
}
@media (max-width: 1000px) { .pt-branches { grid-template-columns: 1fr 1fr; } .pt-branches::before { left: 25%; right: 25%; } }
@media (max-width: 560px)  { .pt-branches { grid-template-columns: 1fr; } .pt-branches::before { display: none; } }

.pt-branch { position: relative; display: flex; flex-direction: column; gap: 9px; }
/* the stem from the rail down into this branch */
.pt-branch::before {
  content: ''; position: absolute; top: -22px; left: 50%; width: 2px; height: 22px;
  background: color-mix(in srgb, var(--pb, var(--accent)) 60%, transparent);
}
@media (max-width: 560px) { .pt-branch::before { display: none; } }

.pt-gap {
  font-family: var(--font-serif); font-size: 13.5px; line-height: 1.5;
  color: var(--text); font-style: italic; margin-bottom: 4px; min-height: 3.2em;
}
.pt-node {
  display: block; padding: 12px 14px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--pb, var(--accent)); color: var(--text);
  transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.pt-node:hover { transform: translateY(-2px); border-color: var(--border-hover); box-shadow: var(--shadow); text-decoration: none; }
.pt-node--here { background: var(--bg-2); }
.pt-name { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.pt-meta { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }
.pt-why { display: block; font-family: var(--font-serif); font-size: 12.5px; line-height: 1.45; color: var(--text-dim); margin-top: 7px; }

.pt-loop { counter-reset: s; list-style: none; padding: 0; margin: 16px 0 18px; display: flex; flex-direction: column; gap: 7px; }
.pt-loop li { counter-increment: s; position: relative; padding-left: 30px; font-size: 14.5px; color: var(--text-dim); }
.pt-loop li::before {
  content: counter(s); position: absolute; left: 0; top: -1px;
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-text);
}

/* ---------- Deep-ML practice block ---------- */
.dm-list { display: flex; flex-direction: column; gap: 1px; margin: 20px 0 14px; }
.dm-item {
  display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 14px;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); color: var(--text);
  transition: border-color .15s var(--ease), transform .15s var(--ease), background-color .15s var(--ease);
}
.dm-item + .dm-item { margin-top: 7px; }
.dm-item:hover { border-color: var(--border-hover); background: var(--bg-2); transform: translateX(2px); text-decoration: none; }
.dm-diff {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; text-align: center;
  padding: 3px 0; border-radius: 5px;
}
.dm-easy   { color: var(--know-nice);       background: color-mix(in srgb, var(--know-nice) 13%, transparent); }
.dm-medium { color: var(--know-conceptual); background: color-mix(in srgb, var(--know-conceptual) 13%, transparent); }
.dm-hard   { color: var(--know-cold);       background: color-mix(in srgb, var(--know-cold) 13%, transparent); }
.dm-title { font-size: 14px; font-weight: 600; min-width: 0; }
.dm-go { font-size: 12px; font-weight: 700; color: var(--text-faint); white-space: nowrap; }
.dm-go .arrow { transition: transform .15s var(--ease); display: inline-block; }
.dm-item:hover .dm-go { color: var(--accent-text); }
.dm-item:hover .dm-go .arrow { transform: translateX(3px); }
.dm-foot { font-size: 13px; color: var(--text-dim); font-family: var(--font-serif); }
@media (max-width: 620px) {
  .dm-item { grid-template-columns: 56px 1fr; gap: 10px; }
  .dm-go { display: none; }
}

/* ---------- primary nav ----------
   The top bar used to be brand + search + two icons, so every destination that
   is not a topic page — labs, practice, roadmaps — was reachable only from the
   homepage or by already knowing it existed. These five are the major parts of
   the site; everything else hangs off one of them. */
/* Sits right of the spacer, next to search, with a gap so the two groups
   read as separate controls rather than one run of buttons. */
.navlinks { display: flex; align-items: center; gap: 2px; margin-right: 14px; }
.navlinks a {
  padding: 7px 11px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  white-space: nowrap;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.navlinks a:hover { color: var(--text); background: var(--bg-2); text-decoration: none; }
.navlinks a.is-here { color: var(--text); background: var(--bg-2); }
.navlinks a.is-here::after {
  content: ''; display: block; height: 2px; margin: 5px -3px -7px;
  background: var(--accent); border-radius: 2px;
}
/* Below this the bar is already carrying back, brand, search and two icons.
   The links live in the sidebar drawer on small screens instead. */
@media (max-width: 1080px) { .navlinks { display: none; } }

/* ---------- the nav back control ----------
   Lives in the sticky header so it is reachable from anywhere on a page. The
   prev/next pager at the foot of each topic page answers "what's next"; this
   answers "how do I get out of here", which previously only the browser's own
   back button could. */
.backbtn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 32px; padding: 0 12px 0 9px; margin-right: 2px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-2); color: var(--text-dim);
  font-size: 12.5px; font-weight: 600; line-height: 1;
  transition: color .15s var(--ease), border-color .15s var(--ease),
              background-color .15s var(--ease), transform .15s var(--ease);
}
.backbtn:hover { color: var(--text); border-color: var(--border-hover); background: var(--bg-card); text-decoration: none; }
.backbtn:active { transform: translateX(-1px); }
.backbtn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.bb-arrow { font-size: 14px; line-height: 1; transition: transform .15s var(--ease); }
.backbtn:hover .bb-arrow { transform: translateX(-2px); }
.bb-label { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* On a phone the header already carries a menu, a logo, search and two icons.
   The arrow alone is still a target; the label is what has to give. */
@media (max-width: 720px) { .bb-label { display: none; } .backbtn { padding: 0 9px; } }

/* ---------- sitemap.html — the site as a graph ---------- */
.mm-head { max-width: 1240px; margin: 0 auto; padding: 40px 0 0; }
.mm-head h1 { font-size: 34px; line-height: 1.12; letter-spacing: -.02em; margin: 10px 0 12px; }
.mm-head .dek { font-size: 16.5px; max-width: 70ch; margin: 0 0 22px; }
.mm-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.mm-search {
  flex: 1 1 320px; min-width: 220px; max-width: 460px;
  padding: 9px 14px; font: inherit; font-size: 13.5px;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
}
.mm-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.mm-zoom { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.mm-zoom button {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--text-dim); padding: 5px 13px; border-radius: 999px; min-width: 34px;
}
.mm-zoom button:hover { background: var(--bg-card); color: var(--text); }
.mm-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-faint); }
.mm-key { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.mm-key--group { background: var(--accent); }
.mm-key--topic { background: var(--bg-card); border: 1.5px solid var(--border-hover); }
.mm-key--lab { background: var(--bg-card); border: 2px solid var(--accent); transform: rotate(45deg); border-radius: 2px; }

.mm-stage {
  position: relative; max-width: 1240px; margin: 0 auto;
  height: min(74vh, 760px);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
#map { width: 100%; height: 100%; }

/* The hover card is a plain div positioned over the canvas rather than a
   Cytoscape node, so it can carry real markup and inherit the site's type. */
.mm-tip {
  position: absolute; width: 264px; pointer-events: none;
  background: var(--bg-1); border: 1px solid var(--border-hover);
  border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(4px); transition: opacity .14s var(--ease), transform .14s var(--ease);
  z-index: 5;
}
.mm-tip.is-on { opacity: 1; transform: none; }
.mm-tip .mt-kind { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-text); }
.mm-tip .mt-title { font-size: 14px; font-weight: 800; margin: 3px 0 5px; letter-spacing: -.01em; }
.mm-tip .mt-hook { font-family: var(--font-serif); font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.mm-tip .mt-cta { font-size: 11px; font-weight: 700; color: var(--text-faint); border-top: 1px solid var(--border); padding-top: 7px; margin-top: 8px; }

@media (max-width: 700px) {
  .mm-head h1 { font-size: 26px; }
  .mm-stage { height: 64vh; }
  .mm-legend { display: none; }
}

/* ---------- sections.html — the browse page ---------- */
.tgroup-more { font-size: 12px; font-weight: 700; color: var(--accent-text); margin-left: 10px; letter-spacing: 0; text-transform: none; }
.tgroup-more:hover { text-decoration: underline; }
.browse-head { max-width: 1240px; margin: 0 auto 64px; padding: 68px 24px 0; }
.browse-head h1 { font-size: 40px; line-height: 1.12; letter-spacing: -.02em; margin: 10px 0 16px; }
.browse-head .dek { font-size: 17px; max-width: 62ch; margin: 0 0 26px; }
.browse-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.browse-jump a {
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 14px;
}
.browse-jump a:hover { color: var(--text); border-color: var(--border-hover); text-decoration: none; }
@media (max-width: 700px) { .browse-head h1 { font-size: 30px; } }

/* ---------- featured "start here" cards ---------- */
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.featured-card {
  display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px 24px 22px; position: relative; overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
}
.featured-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--fc-color, var(--accent)); }
.featured-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-hover); text-decoration: none; }
.featured-card .fc-num { font-family: var(--font-mono); font-size: 11.5px; color: var(--fc-color, var(--accent)); font-weight: 700; margin-bottom: 12px; }
.featured-card .fc-title { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 10px; letter-spacing: -.01em; }
.featured-card .fc-hook { font-size: 13.5px; color: var(--text-dim); font-family: var(--font-serif); line-height: 1.55; margin-bottom: 18px; }
.featured-card .fc-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.featured-card .fc-time { font-size: 11.5px; color: var(--text-faint); }
.featured-card .fc-cta { font-size: 13px; font-weight: 700; color: var(--fc-color, var(--accent)); display: flex; align-items: center; gap: 6px; }
.featured-card .fc-cta .arrow { transition: transform .2s var(--ease); }
.featured-card:hover .fc-cta .arrow { transform: translateX(4px); }
@media (max-width: 900px) { .featured-grid { grid-template-columns: 1fr; } }
.stat .lbl { font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- home: how-it-works strip ---------- */
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1240px; margin: 0 auto 90px; padding: 0 24px; }
.how-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease); }
.how-card:hover { border-color: var(--border-hover); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.how-card .hc-icon { margin-bottom: 12px; color: var(--accent-text); }
.how-card .hc-icon svg { width: 22px; height: 22px; }
.how-card .hc-title { font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.how-card .hc-body { font-size: 13px; color: var(--text-faint); font-family: var(--font-serif); line-height: 1.5; }
@media (max-width: 880px) { .how-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- home: section wrapper ---------- */
.home-section { max-width: 1240px; margin: 0 auto 100px; padding: 0 24px; }
.home-section .hs-head { margin-bottom: 24px; }
.home-section .hs-eyebrow { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text); margin-bottom: 8px; }
.home-section h2 { font-size: 28px; margin: 0 0 8px; }
.home-section .hs-sub { font-family: var(--font-serif); color: var(--text-dim); font-size: 16px; max-width: 66ch; }

/* ---------- scope diagram (AI > ML > DL > FM > agents) ---------- */
.scope-diagram { display: flex; justify-content: center; padding: 20px 0; }
.scope-ring { fill: none; stroke-width: 1.6; }
.scope-diagram text { font-family: var(--font-ui); }

/* ---------- mental-model flow ---------- */
.mental-flow { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; padding: 8px 0; }
.mf-step { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; text-align: center; font-size: 13px; font-weight: 700; flex: 1; min-width: 108px; }
.mf-arrow { color: var(--accent-text); font-size: 18px; flex-shrink: 0; }
@media (max-width: 760px) { .mental-flow { flex-direction: column; } .mf-arrow { transform: rotate(90deg); } .mf-step { width: 100%; } }

/* ---------- era timeline ---------- */
.timeline-scroll { display: flex; gap: 16px; overflow-x: auto; padding: 30px 4px 20px; scroll-snap-type: x proximity; }
.timeline-scroll::-webkit-scrollbar { height: 6px; }
.timeline-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.era-card { scroll-snap-align: start; flex: 0 0 260px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; position: relative; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease); }
.era-card:hover { border-color: var(--border-hover); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.era-card::before { content: ''; position: absolute; top: -16px; left: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: pulse-glow 2.4s ease-in-out infinite; }
.era-card .era-range { font-family: var(--font-mono); font-size: 12px; color: var(--accent-text); font-weight: 700; margin-bottom: 8px; }
.era-card .era-title { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.era-card ul { margin: 0; padding-left: 18px; }
.era-card li { font-size: 12.5px; color: var(--text-dim); font-family: var(--font-serif); margin-bottom: 4px; }

/* ---------- home: topic groups ---------- */
.tgroup { margin-bottom: 34px; }
.tgroup-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.tgroup-head .swatch { width: 8px; height: 8px; border-radius: 50%; }
.topic-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 16px; height: 100%; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease); position: relative; }
.topic-card:hover { border-left-color: var(--border-hover); border-right-color: var(--border-hover); border-bottom-color: var(--border-hover); text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.topic-card .tc-num { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.topic-card .tc-title { font-weight: 700; font-size: 14.5px; margin: 4px 0 6px; color: var(--text); }
.topic-card .tc-hook { font-size: 12px; color: var(--text-faint); font-family: var(--font-serif); line-height: 1.45; }
.topic-card .tc-status { display: inline-block; margin-top: 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 20px; }
.topic-card .tc-status.full { background: color-mix(in srgb, var(--know-nice) 16%, transparent); color: var(--know-nice); }
.topic-card .tc-status.stub { background: color-mix(in srgb, var(--text-faint) 16%, transparent); color: var(--text-faint); }
.topic-card .tc-status.interactive { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
.topic-card .tc-num.tc-num--icon { font-size: 20px; letter-spacing: 0; }
.topic-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }

/* full sections read as inviting/available; stubs recede so the eye lands on what's ready */
.topic-card:has(.tc-status.full) { box-shadow: 0 1px 0 0 color-mix(in srgb, var(--know-nice) 12%, transparent) inset; }
.topic-card:has(.tc-status.full)::after {
  content: 'Read \2192'; position: absolute; right: 16px; top: 16px; font-size: 11px; font-weight: 700;
  color: var(--accent-text); opacity: 0; transform: translateX(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.topic-card:has(.tc-status.full):hover::after { opacity: 1; transform: translateX(0); }
.topic-card:has(.tc-status.stub) { border-top-color: color-mix(in srgb, var(--text-faint) 45%, transparent) !important; opacity: .62; }
.topic-card:has(.tc-status.stub):hover { opacity: 1; }

.order-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 12px; }
.order-strip .os-node { background: var(--bg-2); border: 1px solid var(--border); padding: 4px 9px; border-radius: 6px; color: var(--text-dim); }
.order-strip .os-arrow { color: var(--text-faint); }

/* ---------- home: learn beyond this site ---------- */
.learnmore-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: stretch; }
.creators-col { display: flex; flex-direction: column; gap: 10px; }
.lm-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; color: var(--text-faint); margin-bottom: 2px; }
.creator-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease); }
.creator-card:hover { transform: translateY(-2px); border-color: var(--border-hover); box-shadow: var(--shadow); text-decoration: none; }
.creator-card .cc-name { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 4px; }
.creator-card .cc-hook { font-size: 12.5px; color: var(--text-faint); font-family: var(--font-serif); line-height: 1.45; }
.lm-footnote { font-size: 12px; color: var(--text-faint); font-family: var(--font-serif); padding: 4px 2px 0; }
.practice-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease); }
.practice-card:hover { transform: translateY(-3px); border-color: var(--border-hover); box-shadow: var(--shadow-lg); text-decoration: none; }
.practice-card .pcard-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; color: var(--accent-text); margin-bottom: 12px; }
.practice-card .pcard-title { font-size: 23px; font-weight: 800; margin-bottom: 10px; letter-spacing: -.01em; }
.practice-card .pcard-hook { font-size: 13.5px; color: var(--text-dim); font-family: var(--font-serif); line-height: 1.55; margin-bottom: 18px; flex: 1; }
.practice-card .pcard-cta { font-size: 13px; font-weight: 700; color: var(--accent-text); display: flex; align-items: center; gap: 6px; }
@media (max-width: 860px) { .learnmore-grid { grid-template-columns: 1fr; } }

/* ---------- views + likes widget ---------- */
.page-community { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; font-size: 13px; color: var(--text-faint); }
.pc-views { display: flex; align-items: center; gap: 6px; }
.pc-eye { width: 15px; height: 15px; flex-shrink: 0; }
.pc-like-btn {
  display: flex; align-items: center; gap: 7px; background: var(--bg-card); border: 1px solid var(--border);
  padding: 6px 13px; border-radius: 20px; cursor: pointer; font-size: 13px; color: var(--text-dim);
  font-family: var(--font-ui); transition: border-color .2s var(--ease), transform .2s var(--ease), background-color .2s var(--ease);
}
.pc-like-btn:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.pc-like-btn.is-liked { background: color-mix(in srgb, var(--know-cold) 12%, var(--bg-card)); border-color: color-mix(in srgb, var(--know-cold) 40%, var(--border)); color: var(--know-cold); }
.pc-like-btn .pc-heart { display: inline-block; transition: transform .2s var(--ease); }
.pc-like-btn.is-liked .pc-heart { transform: scale(1.15); }
.pc-comment-btn {
  display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 0;
  cursor: pointer; font-size: 13px; color: var(--text-faint); font-family: var(--font-ui);
  transition: color .2s var(--ease);
}
.pc-comment-btn:hover { color: var(--text); }
.pc-comment-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ---------- shared modal: replaces confirm()/alert()/prompt() ---------- */
.kml-modal-overlay {
  position: fixed; inset: 0; background: rgba(4,4,8,.55); backdrop-filter: blur(3px); z-index: 400;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .15s var(--ease);
}
.kml-modal-overlay.open { opacity: 1; pointer-events: auto; }
.kml-modal-box {
  width: 100%; max-width: 420px; background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 22px 24px;
  transform: translateY(8px) scale(.98); transition: transform .15s var(--ease);
}
.kml-modal-overlay.open .kml-modal-box { transform: translateY(0) scale(1); }
.kml-modal-title { font-family: var(--font-ui); font-weight: 800; font-size: 17px; color: var(--text); margin-bottom: 12px; }
.kml-modal-msg, .kml-modal-desc { font-family: var(--font-serif); font-size: 15px; line-height: 1.55; color: var(--text-dim); margin: 0 0 18px; }
.kml-modal-desc { font-style: italic; border-left: 2px solid var(--border); padding-left: 12px; }
.kml-modal-field { display: block; margin-bottom: 14px; }
.kml-modal-field-label { display: block; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; color: var(--text-faint); margin-bottom: 6px; }
.kml-modal-input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px;
  font-family: var(--font-ui); font-size: 14px; color: var(--text); resize: vertical; box-sizing: border-box;
}
.kml-modal-input:focus { outline: none; border-color: var(--accent); }
textarea.kml-modal-input { min-height: 88px; font-family: var(--font-serif); }
.kml-modal-input--error { border-color: var(--know-cold); }
.kml-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.kml-modal-btn {
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-family: var(--font-ui);
  font-weight: 700; font-size: 13.5px; padding: 9px 18px; border-radius: 9px; cursor: pointer; transition: all .15s var(--ease);
}
.kml-modal-btn:hover { border-color: var(--border-hover); }
.kml-modal-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.kml-modal-primary:hover { opacity: .9; border-color: var(--accent); color: var(--on-accent); }
.kml-modal-danger { background: var(--know-cold); border-color: var(--know-cold); color: #fff; }
.kml-modal-danger:hover { opacity: .9; color: #fff; }

/* ---------- discussion / comments (collapsed until clicked) ---------- */
.discussion-section { margin-top: 60px; padding-top: 32px; border-top: 1px solid var(--border-soft); }
.discussion-section summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 2px 0 4px; }
.discussion-section summary::-webkit-details-marker { display: none; }
.discussion-section .disc-title { font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.discussion-count { font-size: 13px; color: var(--text-faint); flex: 1; }
.disc-chev { font-size: 12px; color: var(--text-faint); transition: transform .2s var(--ease); flex-shrink: 0; }
.discussion-section details[open] .disc-chev { transform: rotate(90deg); }
.discussion-body { padding-top: 24px; }
.comment-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.comment-item { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 16px; }
.comment-item .c-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 10px; }
.comment-item .c-author { font-weight: 700; font-size: 13.5px; color: var(--text); }
.comment-item .c-time { font-size: 11.5px; color: var(--text-faint); flex-shrink: 0; }
.comment-item .c-body { font-size: 14.5px; font-family: var(--font-serif); color: var(--text-dim); line-height: 1.55; white-space: pre-wrap; }
.comment-item .c-anchor-quote { border-left: 3px solid var(--accent); padding-left: 8px; color: var(--text-faint); font-style: italic; font-size: 12.5px; margin-bottom: 8px; font-family: var(--font-serif); }
.comment-item.flash { animation: comment-flash 1.6s var(--ease); }
@keyframes comment-flash { 0%, 100% { box-shadow: none; } 15% { box-shadow: 0 0 0 3px var(--accent-glow); } }
.comment-form { display: flex; flex-direction: column; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
.comment-form input, .comment-form textarea {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  font-family: var(--font-ui); font-size: 13.5px; color: var(--text); resize: vertical; width: 100%;
}
.comment-form textarea { min-height: 84px; font-family: var(--font-serif); }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--accent); }
.comment-form-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.comment-submit-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); border: none;
  padding: 10px 22px; border-radius: 9px; font-weight: 700; font-size: 13.5px; cursor: pointer;
  font-family: var(--font-ui); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.comment-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
.comment-submit-btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.comment-hint { font-size: 11.5px; color: var(--text-faint); }

/* ---------- technique tree (collapsible model/algorithm map) ---------- */
.techtree { font-family: var(--font-ui); }
.techtree .tt-node { border: none; margin: 2px 0; }
.techtree summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px; transition: background-color .15s var(--ease);
}
.techtree summary::-webkit-details-marker { display: none; }
.techtree summary:hover { background: var(--bg-2); }
.techtree .tt-swatch {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--tt-color, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tt-color, var(--accent)) 18%, transparent);
}
.techtree .tt-label { font-weight: 700; font-size: 14px; color: var(--text); }
.techtree .tt-stub-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 20px; padding: 2px 8px;
}
.techtree .tt-count { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); margin-left: auto; padding-left: 10px; }
.techtree summary::after {
  content: '›'; font-size: 17px; line-height: 1; color: var(--text-faint);
  transition: transform .2s var(--ease); flex-shrink: 0;
}
.techtree .tt-node[open] > summary::after { transform: rotate(90deg); }
.techtree .tt-children {
  padding: 3px 0 6px 22px; margin-left: 11px; border-left: 1px dashed var(--border);
}
.techtree .tt-leaf {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; margin: 3px 0;
  border-radius: 8px; text-decoration: none; color: var(--text);
  border-left: 2px solid var(--tt-color, var(--border)); background: var(--bg-card);
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
a.tt-leaf:hover { background: var(--bg-2); text-decoration: none; }
.techtree .tt-leaf-name { font-weight: 600; font-size: 13.5px; }
.techtree .tt-leaf-desc { font-size: 12px; color: var(--text-faint); font-family: var(--font-serif); line-height: 1.4; }
.techtree .tt-leaf-desc-stub { font-style: italic; }
.techtree .tt-hidden { display: none !important; }
.techtree-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.techtree-toolbar input {
  flex: 1; min-width: 200px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 9px; padding: 9px 14px; color: var(--text); font-size: 14px; font-family: var(--font-ui);
}
.techtree-toolbar input:focus { outline: none; border-color: var(--accent); }
.techtree-toolbar button {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px; padding: 9px 14px;
  color: var(--text-dim); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: var(--font-ui);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.techtree-toolbar button:hover { border-color: var(--border-hover); color: var(--text); }
.tt-footnote { font-size: 12px; color: var(--text-faint); font-family: var(--font-serif); margin-top: 18px; }

/* =========================================================================
   Review page — spaced-repetition drill
   ========================================================================= */
/* specificity has to beat `.layout.home .content`, which zeroes padding */
.layout.home .content.review-page { max-width: 900px; margin: 0 auto; padding: 48px 24px 100px; }
.rv-header { margin-bottom: 34px; }
.rv-header h1 { font-size: 42px; line-height: 1.1; letter-spacing: -.015em; margin: 6px 0 14px; }
.rv-header .dek { max-width: 62ch; }

/* while a card is up, everything below the drill fades back */
body.in-session .rv-section, body.in-session .rv-footer, body.in-session .rv-stats, body.in-session .rv-overall { opacity: .25; pointer-events: none; transition: opacity .3s var(--ease); }

.rv-stats { display: flex; flex-wrap: wrap; row-gap: 16px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.rv-stat { padding-right: 22px; margin-right: 22px; border-right: 1px solid var(--border); }
.rv-stat:last-child { border-right: none; }
.rv-num { font-size: 27px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rv-lbl { font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }

.rv-overall { margin-bottom: 40px; }
.rv-overall-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.rv-overall-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); }
.rv-overall-pct { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rv-overall-track { height: 8px; border-radius: 20px; background: var(--bg-2); overflow: hidden; border: 1px solid var(--border-soft); }
.rv-overall-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .5s var(--ease); }
.rv-overall-detail { font-size: 12.5px; color: var(--text-faint); margin-top: 8px; font-family: var(--font-serif); }

.rv-setup { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; margin-bottom: 40px; }
.rv-setup h2 { font-size: 21px; font-weight: 800; margin: 0 0 6px; }
.rv-setup-hint { font-size: 13.5px; color: var(--text-faint); font-family: var(--font-serif); margin: 0 0 20px; max-width: 62ch; }
.rv-controls { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.rv-controls label { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.rv-controls select {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px;
  color: var(--text); font-size: 14px; font-family: var(--font-ui); font-weight: 500; min-width: 150px; cursor: pointer;
}
.rv-controls select:focus { outline: none; border-color: var(--accent); }
.rv-controls .btn-primary { padding: 12px 22px; }
.rv-empty { font-size: 13.5px; color: var(--text-faint); font-family: var(--font-serif); margin: 16px 0 0; }

/* ---------- the drill card ---------- */
.drill {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 0 0 26px; margin-bottom: 40px; box-shadow: var(--shadow-lg); overflow: hidden; position: relative;
}
.drill-track { height: 3px; background: var(--bg-2); }
.drill-track-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .3s var(--ease); }
.drill-meta { display: flex; align-items: center; gap: 10px; padding: 16px 26px 0; flex-wrap: wrap; }
.drill-chip {
  font-size: 11.5px; font-weight: 700; color: var(--dc, var(--accent));
  background: color-mix(in srgb, var(--dc, var(--accent)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--dc, var(--accent)) 30%, transparent);
  padding: 3px 10px; border-radius: 20px;
}
.drill-chip:hover { text-decoration: none; background: color-mix(in srgb, var(--dc, var(--accent)) 20%, transparent); }
.drill-state { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.drill-count { font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); margin-left: auto; }
.drill-exit { background: none; border: none; color: var(--text-faint); font-size: 15px; cursor: pointer; padding: 2px 4px; }
.drill-exit:hover { color: var(--text); }

.drill-q { padding: 22px 26px 0; font-size: 22px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; }
.drill-a {
  padding: 20px 26px 0; margin-top: 20px; font-family: var(--font-serif); font-size: 17px; line-height: 1.65;
  color: var(--text-dim); border-top: 1px solid var(--border-soft); animation: drill-in .25s var(--ease);
}
.drill-a p { font-size: 17px; margin: 0 0 14px; max-width: none; }
@keyframes drill-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.drill-reveal {
  display: block; margin: 24px 26px 0; padding: 14px; width: calc(100% - 52px);
  background: var(--text); color: var(--bg); border: none; border-radius: 10px;
  font-size: 15px; font-weight: 700; font-family: var(--font-ui); cursor: pointer;
  transition: transform .15s var(--ease);
}
.drill-reveal:hover { transform: translateY(-1px); }
.drill-reveal kbd { margin-left: 8px; opacity: .55; }

.drill-rate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 26px 0; }
.drill-rate button {
  padding: 14px 10px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: var(--font-ui); border: 1px solid var(--border); background: var(--bg-2); color: var(--text);
  transition: transform .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease);
}
.drill-rate button:hover { transform: translateY(-2px); }
.drill-rate kbd { display: block; margin-top: 4px; font-size: 10px; opacity: .5; }
.drill-rate .dr-again:hover { border-color: var(--know-cold); background: color-mix(in srgb, var(--know-cold) 12%, var(--bg-2)); color: var(--know-cold); }
.drill-rate .dr-hard:hover { border-color: var(--know-conceptual); background: color-mix(in srgb, var(--know-conceptual) 12%, var(--bg-2)); color: var(--know-conceptual); }
.drill-rate .dr-good:hover { border-color: var(--know-nice); background: color-mix(in srgb, var(--know-nice) 12%, var(--bg-2)); color: var(--know-nice); }

.drill-source { display: inline-block; margin: 20px 26px 0; font-size: 12.5px; color: var(--text-faint); }
.drill-source:hover { color: var(--accent-text); text-decoration: none; }

/* ---------- session complete ---------- */
.rv-done { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 26px; text-align: center; margin-bottom: 40px; }
.rv-done-check {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--know-nice) 16%, transparent); color: var(--know-nice); font-size: 22px; font-weight: 800;
}
.rv-done h2 { font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.rv-done p { font-family: var(--font-serif); color: var(--text-dim); margin: 0 0 20px; max-width: none; }

/* ---------- mastery bars ---------- */
.rv-section { margin-bottom: 48px; }
.rv-section-head { margin-bottom: 18px; }
.rv-section-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 6px; }
.rv-sub { font-size: 13.5px; color: var(--text-faint); font-family: var(--font-serif); margin: 0; max-width: 66ch; }
.rv-count { font-size: 13px; font-weight: 500; color: var(--text-faint); }

.mastery-list { display: flex; flex-direction: column; gap: 12px; }
.mastery-row { cursor: pointer; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border-soft); background: var(--bg-card); transition: border-color .15s var(--ease), transform .15s var(--ease); }
.mastery-row:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.mr-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.mr-name { font-size: 13.5px; font-weight: 700; }
.mr-num { font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); }
.mr-track { height: 6px; border-radius: 20px; background: var(--bg-2); overflow: hidden; }
.mr-fill { height: 100%; border-radius: 20px; background: var(--mc, var(--accent)); transition: width .4s var(--ease); }
.mr-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 6px; }

/* ---------- resurfaced highlights ---------- */
.hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.hl-card { display: block; padding: 14px 16px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--hc, var(--accent)); transition: border-color .15s var(--ease), transform .15s var(--ease); }
.hl-card:hover { transform: translateY(-2px); text-decoration: none; border-color: var(--border-hover); border-left-color: var(--hc, var(--accent)); }
.hl-card .hl-text { font-family: var(--font-serif); font-size: 14px; line-height: 1.5; color: var(--text); }
.hl-card .hl-note { font-size: 12.5px; color: var(--text-dim); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.hl-card .hl-meta { font-size: 11px; color: var(--text-faint); margin-top: 10px; }

.rv-footer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--text-faint); }
.rv-reset { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; color: var(--text-faint); font-size: 12px; cursor: pointer; font-family: var(--font-ui); }
.rv-reset:hover { border-color: var(--know-cold); color: var(--know-cold); }

@media (max-width: 700px) {
  .layout.home .content.review-page { padding: 32px 18px 80px; }
  .rv-header h1 { font-size: 32px; }
  .drill-q { font-size: 19px; }
  .drill-rate { grid-template-columns: 1fr; }
  .rv-controls label, .rv-controls select { width: 100%; }
  .rv-controls .btn-primary { width: 100%; justify-content: center; }
}

/* ---------- step-by-step derivations ----------
   Every line carries the justification for the step, because "and then we get"
   is where most write-ups lose people. */
.derivation {
  background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius); margin: 20px 0; overflow: hidden;
  transition: border-color .2s var(--ease);
}
.derivation:hover { border-color: var(--border-hover); border-left-color: var(--accent); }
.derivation > summary {
  list-style: none; cursor: pointer; padding: 16px 22px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  transition: background-color .15s var(--ease);
}
.derivation > summary::-webkit-details-marker { display: none; }
.derivation > summary:hover { background: var(--bg-2); }
.derivation > summary::after {
  content: '+'; margin-left: auto; color: var(--accent-text); font-weight: 800; font-size: 17px; line-height: 1;
}
.derivation[open] > summary::after { content: '–'; }
.derivation[open] > summary { border-bottom: 1px solid var(--border-soft); }
.drv-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-text); flex-shrink: 0; }
.drv-goal { font-weight: 700; font-size: 15.5px; color: var(--text); line-height: 1.4; }
.drv-body { padding: 18px 22px 20px; }
.drv-given { font-family: var(--font-serif); font-size: 14.5px; color: var(--text-dim); margin: 0 0 4px; max-width: none; }

.drv-steps { list-style: none; counter-reset: drv; padding: 0; margin: 16px 0 0; }
.drv-steps > li {
  counter-increment: drv; position: relative; padding: 0 0 18px 38px; margin: 0;
  border-left: 1px dashed var(--border); max-width: none;
}
.drv-steps > li:last-child { padding-bottom: 0; border-left-color: transparent; }
.drv-steps > li::before {
  content: counter(drv); position: absolute; left: -11px; top: 0;
  width: 22px; height: 22px; border-radius: 50%; background: var(--bg-2);
  border: 1px solid var(--border); color: var(--text-faint);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.drv-eq { overflow-x: auto; padding: 4px 0 2px; }
.drv-eq .katex-display { margin: .4em 0; }
.drv-why { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.55; color: var(--text-dim); margin-top: 2px; }
.drv-why strong { color: var(--text); }

.drv-payoff {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft);
  font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: var(--text);
}
.drv-payoff strong { font-weight: 700; }
@media (max-width: 700px) {
  .derivation { padding: 16px 14px; }
  .drv-steps > li { padding-left: 26px; }
}

/* ---------- "build this" project ---------- */
.project {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--c-practice); border-radius: var(--radius-lg);
  padding: 22px 24px; margin: 22px 0;
}
.proj-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.proj-label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--c-practice); flex-shrink: 0;
}
.proj-title { font-weight: 800; font-size: 18px; letter-spacing: -.01em; color: var(--text); }
.proj-meta {
  margin-left: auto; font-size: 11.5px; color: var(--text-faint);
  font-family: var(--font-mono); flex-shrink: 0;
}
.project > p { font-family: var(--font-serif); font-size: 15.5px; line-height: 1.6; margin: 10px 0 0; max-width: none; }

.proj-steps { list-style: none; counter-reset: proj; padding: 0; margin: 16px 0 0; }
.proj-steps > li {
  counter-increment: proj; position: relative; padding: 0 0 12px 34px; margin: 0;
  font-family: var(--font-serif); font-size: 15px; line-height: 1.55; color: var(--text-dim); max-width: none;
}
.proj-steps > li:last-child { padding-bottom: 0; }
.proj-steps > li::before {
  content: counter(proj); position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px; border-radius: 50%;
  background: color-mix(in srgb, var(--c-practice) 14%, transparent);
  color: var(--c-practice); font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.proj-steps > li strong { color: var(--text); }

.proj-done, .proj-stretch {
  margin-top: 16px; padding: 12px 14px; border-radius: var(--radius);
  font-family: var(--font-serif); font-size: 14.5px; line-height: 1.55;
}
.proj-done {
  background: color-mix(in srgb, var(--know-nice) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--know-nice) 28%, transparent); color: var(--text);
}
.proj-stretch {
  background: var(--bg-2); border: 1px solid var(--border-soft); color: var(--text-dim); margin-top: 10px;
}
.proj-done strong, .proj-stretch strong { color: var(--text); font-weight: 700; }

/* ---------- "where you meet this in the wild" ---------- */
.wild-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; margin: 22px 0 26px; align-items: stretch; }
.wild-card {
  background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius);
  border-top: 3px solid var(--wc, var(--accent)); padding: 16px 18px;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .25s var(--ease);
  /* column + auto margin on the footer keeps the ✓ line flush to the bottom,
     so cards of unequal prose length still align across a row */
  display: flex; flex-direction: column;
}
.wild-card .reach:not(.reach + .reach) { margin-top: auto; }
.wild-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-bottom-color: var(--border-hover); }
.wild-card .wc-domain {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--wc, var(--accent)); margin-bottom: 8px;
}
.wild-card .wc-what { font-weight: 700; font-size: 14.5px; line-height: 1.35; margin-bottom: 7px; color: var(--text); }
.wild-card .wc-body { font-family: var(--font-serif); font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
.wild-card .wc-body a { font-weight: 600; }
/* The card's own prose. Constrained so a recommendation line below it reads as
   a distinct footer rather than another paragraph. */
.wild-card > p { font-family: var(--font-serif); font-size: 13.5px; line-height: 1.58; color: var(--text-dim); margin: 0 0 12px; max-width: none; }
.wild-card > p:last-child { margin-bottom: 0; }

/* ---------- the "reach for it / not this" line inside a card ----------
   These were originally a two-column .reach grid with an uppercase .reach-head
   label. Used on a bare <p> inside .wild-card they inherited `display:grid`
   with a 1fr 1fr template, which is what squeezed the text into a narrow
   column beside an unexplained colour bar. Rebuilt as a labelled footer row:
   the icon carries the yes/no meaning, so no header element is needed. */
.wild-card .reach {
  /* Deliberately NOT flex: these lines contain inline links, and a flex
     container turns every child into a flex item, which shattered sentences
     with an <a> in them into separate columns. Indent + a positioned marker
     keeps the text a single normal flow. */
  position: relative;
  margin: 12px -18px -16px; padding: 11px 18px 13px 38px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.5;
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
}
.wild-card .reach::before {
  position: absolute; left: 18px; top: 11px;
  font-size: 12px; font-weight: 700; line-height: 1.5;
}
.wild-card .reach-yes {
  background: color-mix(in srgb, var(--know-nice) 7%, transparent);
  color: var(--text-dim);
}
.wild-card .reach-yes::before { content: '✓'; color: var(--know-nice); }
.wild-card .reach-no {
  background: color-mix(in srgb, var(--know-cold) 7%, transparent);
  color: var(--text-dim);
}
.wild-card .reach-no::before { content: '✕'; color: var(--know-cold); }
/* Two stacked recommendations. The second keeps its own tint but drops the
   divider, and the pair share the card's bottom radius. */
.wild-card .reach + .reach { margin-top: 0; border-top: none; padding-top: 4px; }
.wild-card .reach + .reach::before { top: 4px; }
.wild-card .reach:not(:last-child) { border-radius: 0; padding-bottom: 4px; }
.wild-card .reach a { font-weight: 600; }
@media (max-width: 760px) { .reach { grid-template-columns: 1fr; } }

/* ---------- sidebar mastery (topic pages) ---------- */
.sb-mastery { margin-top: 6px; }
.sb-mastery-track { height: 4px; border-radius: 20px; background: var(--bg-2); overflow: hidden; margin-top: 6px; }
.sb-mastery-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .4s var(--ease); }
.sb-drill-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px;
  padding: 9px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text); font-size: 12.5px; font-weight: 700; font-family: var(--font-ui); cursor: pointer;
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.sb-drill-btn:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; color: var(--accent-text); }


/* =========================================================================
   Attention Lab — step-through matrix visualizer (attention-lab.html)
   ========================================================================= */

.lab-howto {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
  padding: 4px 18px; margin-bottom: 22px;
}
.lab-howto summary {
  cursor: pointer; list-style: none; font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  color: var(--text-dim); padding: 12px 0; display: flex; align-items: center; gap: 8px;
}
.lab-howto summary::-webkit-details-marker { display: none; }
.lab-howto-chev { color: var(--accent-text); font-size: 11px; transition: transform .15s var(--ease); }
.lab-howto[open] .lab-howto-chev { transform: rotate(180deg); }
.lab-howto p { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.55; color: var(--text-dim); max-width: 78ch; margin: 0 0 16px; }
.lab-howto p strong { color: var(--text); }

.lab-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.lab-tab {
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-dim);
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; padding: 10px 16px; border-radius: 10px;
  cursor: pointer; transition: all .15s var(--ease); display: flex; align-items: center; gap: 8px;
}
.lab-tab .lab-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tc, var(--accent)); flex-shrink: 0; }
.lab-tab:hover { border-color: var(--border-hover); color: var(--text); transform: translateY(-1px); }
.lab-tab.active { border-color: var(--tc, var(--accent)); color: var(--text); background: color-mix(in srgb, var(--tc, var(--accent)) 12%, var(--bg-card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc, var(--accent)) 12%, transparent); }

.lab-dimstrip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.lab-chip {
  display: inline-flex; align-items: baseline; gap: 3px; font-family: var(--font-mono); font-size: 12.5px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; cursor: help;
}
.lab-chip-sym { color: var(--accent-text); font-weight: 700; }
.lab-chip-eq { color: var(--text-faint); }
.lab-chip-val { color: var(--text); font-weight: 700; }
.lab-dimdefs { position: relative; }
.lab-dimdefs summary {
  cursor: pointer; list-style: none; font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  color: var(--accent-text); padding: 5px 2px; white-space: nowrap;
}
.lab-dimdefs summary::-webkit-details-marker { display: none; }
.lab-dimdefs-body {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 320px; max-width: 80vw;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.lab-dim-row { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); text-align: left; }
.lab-dim-row:last-child { border-bottom: none; }
.lab-dim-sym { font-family: var(--font-mono); font-weight: 700; color: var(--accent-text); font-size: 13px; min-width: 46px; flex-shrink: 0; }
.lab-dim-val { font-family: var(--font-mono); font-weight: 700; color: var(--text); font-size: 12.5px; flex-shrink: 0; }
.lab-dim-def { font-size: 12px; color: var(--text-dim); line-height: 1.4; font-family: var(--font-serif); }

.lab-panelbox { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); overflow: hidden; }

.lab-toolbar { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.lab-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.lab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-hover); cursor: pointer; transition: all .15s var(--ease); border: none; padding: 0; }
.lab-dot:hover { background: var(--text-faint); }
.lab-dot.active { background: var(--tc, var(--accent)); width: 20px; border-radius: 4px; }
.lab-dot.done { background: color-mix(in srgb, var(--tc, var(--accent)) 45%, var(--border-hover)); }
.lab-stepcount { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); font-weight: 600; }
.lab-toolbar-nav { display: flex; gap: 8px; margin-left: auto; }
.lab-navbtn {
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-family: var(--font-ui);
  font-size: 13.5px; font-weight: 700; padding: 9px 16px; border-radius: 9px; cursor: pointer; transition: all .15s var(--ease);
}
.lab-navbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text); }
.lab-navbtn:disabled { opacity: .35; cursor: default; }
/* White on a flat --accent measured 3.94 in dark. Deepening the fill keeps
   the button obviously the accent colour and takes the label to 4.90. */
.lab-navbtn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); padding: 9px 22px; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.lab-navbtn--primary:hover:not(:disabled) { color: var(--on-accent); opacity: .92; transform: translateY(-1px); }

.lab-stepintro { padding: 22px 26px 6px; }
.lab-stepintro h2 { font-size: 20px; font-weight: 800; margin: 0 0 12px; letter-spacing: -.01em; }
.lab-formula { margin: 4px 0 14px; overflow-x: auto; font-size: 15px; }
.lab-formula .katex-display { margin: 0; }
.lab-stepnote { font-family: var(--font-serif); font-size: 15.5px; line-height: 1.6; color: var(--text-dim); max-width: 76ch; margin: 0; }
.lab-stepnote code { background: var(--bg-2); padding: 1px 6px; border-radius: 5px; font-size: 13px; color: var(--text); }
.lab-stepnote strong { color: var(--text); font-weight: 700; }

.lab-stage { padding: 20px 26px; overflow-x: auto; }
.lab-stage-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; animation: lab-fade-in .28s var(--ease); }
@keyframes lab-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.lab-panel { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; flex-shrink: 0; transition: box-shadow .2s var(--ease), border-color .2s var(--ease); }
.lab-panel--dim { opacity: .5; }
.lab-panel--new { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); animation: lab-pop .35s var(--ease); }
@keyframes lab-pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lab-panel--cache { border-style: dashed; }
.lab-panel-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.lab-panel-title { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--text); }
.lab-panel-shape { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); }
.lab-panel-badge { font-family: var(--font-mono); font-size: 10px; color: var(--accent-text); margin-bottom: 6px; }
.lab-panel-meaning { font-family: var(--font-serif); font-size: 12.5px; color: var(--text-dim); line-height: 1.42; margin-top: 10px; max-width: 32ch; }

.lab-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 38px); gap: 3px; }
.lab-grid[style*="--haslabels: 1"] { grid-template-columns: auto repeat(var(--cols, 2), 38px); }
.lab-cell {
  height: 32px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text); border-radius: 5px;
  background: var(--bg-card); white-space: nowrap;
}
.lab-cell--head { background: transparent; color: var(--text-faint); font-weight: 700; font-size: 10.5px; }
.lab-cell--corner { background: transparent; }
.lab-cell--masked { color: var(--text-faint); background: var(--bg); border: 1px dashed var(--border); font-size: 13px; }
.lab-cell--fresh-row { outline: 1.5px solid var(--accent); outline-offset: -1.5px; }

.lab-heads-group { flex-shrink: 0; }
.lab-heads-group-title { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.lab-heads-row { display: flex; gap: 14px; flex-wrap: wrap; }

.lab-arrow { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; padding: 0 2px; }
.lab-arrow-glyph { font-size: 22px; color: var(--accent-text); line-height: 1; }
.lab-arrow-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); white-space: nowrap; }

.lab-textcard { border-radius: var(--radius); padding: 14px 16px; font-family: var(--font-serif); font-size: 14.5px; line-height: 1.55; background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); color: var(--text-dim); max-width: 70ch; }
.lab-textcard--warn { border-left-color: var(--know-cold); }
.lab-textcard code { background: var(--bg-card); padding: 1px 5px; border-radius: 4px; color: var(--text); }

.lab-tokens { display: flex; gap: 10px; flex-wrap: wrap; }
.lab-token { border: 1.5px solid var(--tc, var(--accent)); border-radius: 10px; padding: 10px 14px; text-align: center; }
.lab-token-word { display: block; font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--text); }
.lab-token-id { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }
.lab-token--active { background: color-mix(in srgb, var(--tc, var(--accent)) 12%, var(--bg-card)); }

.lab-groupmap { display: flex; flex-direction: column; gap: 8px; }
.lab-groupmap-row { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 13.5px; }
.lab-groupmap-q { min-width: 150px; color: var(--text); font-weight: 600; }
.lab-groupmap-arrow { color: var(--accent-text); }
.lab-groupmap-kv { color: var(--text-dim); }

.lab-pool { display: flex; gap: 6px; flex-wrap: wrap; }
.lab-pool-block { width: 40px; height: 40px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.lab-pool-block--used { background: color-mix(in srgb, var(--accent) 18%, var(--bg-card)); border-color: var(--accent); color: var(--text); font-weight: 700; }
.lab-pool-block--wasted { background: color-mix(in srgb, var(--know-cold) 10%, var(--bg-card)); border-color: var(--know-cold); color: var(--know-cold); }

.lab-table { border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; }
.lab-table th { text-align: left; color: var(--text-faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 12px; border-bottom: 1px solid var(--border); }
.lab-table td { padding: 7px 12px; border-bottom: 1px solid var(--border-soft); color: var(--text); }
.lab-row--highlight td { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 700; }

.lab-bars { display: flex; flex-direction: column; gap: 12px; min-width: 280px; }
.lab-bar-row { display: grid; grid-template-columns: 1fr; gap: 4px; }
.lab-bar-label { font-family: var(--font-ui); font-size: 12.5px; color: var(--text-dim); }
.lab-bar-track { height: 16px; border-radius: 8px; background: var(--bg-card); overflow: hidden; }
.lab-bar-fill { height: 100%; border-radius: 8px; transition: width .5s var(--ease); }
.lab-bar-value { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }

.lab-checkbadge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.lab-checkbadge--ok { background: color-mix(in srgb, var(--c-practice) 15%, var(--bg-card)); color: var(--c-practice); border: 1px solid color-mix(in srgb, var(--c-practice) 40%, transparent); }
.lab-checkbadge--bad { background: color-mix(in srgb, var(--know-cold) 15%, var(--bg-card)); color: var(--know-cold); border: 1px solid color-mix(in srgb, var(--know-cold) 40%, transparent); }

.lab-ledger { border-top: 1px solid var(--border); }
.lab-ledger summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  padding: 12px 26px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .05em;
}
.lab-ledger summary::-webkit-details-marker { display: none; }
.lab-ledger summary::before { content: '▸'; color: var(--accent-text); font-size: 11px; transition: transform .15s var(--ease); }
.lab-ledger[open] summary::before { transform: rotate(90deg); }
.lab-ledger-count { background: var(--bg-2); color: var(--accent-text); border-radius: 999px; padding: 1px 8px; font-family: var(--font-mono); }
.lab-ledger-row { display: grid; grid-template-columns: 170px 100px 1fr; gap: 10px; padding: 8px 26px; border-top: 1px solid var(--border-soft); align-items: baseline; }
.lab-ledger-name { font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; color: var(--text); }
.lab-ledger-shape { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent-text); }
.lab-ledger-meaning { font-family: var(--font-serif); font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }

@media (max-width: 640px) {
  .lab-toolbar { flex-wrap: wrap; }
  .lab-toolbar-nav { margin-left: 0; width: 100%; justify-content: space-between; }
  .lab-grid { grid-template-columns: repeat(var(--cols, 2), 30px); }
  .lab-cell { height: 28px; font-size: 10px; }
  .lab-stage, .lab-stepintro { padding-left: 16px; padding-right: 16px; }
  .lab-ledger-row { grid-template-columns: 1fr; gap: 2px; padding: 10px 16px; }
}

/* ---------- in-page find (⌘F) ---------- */
.fip-bar {
  position: fixed; top: 14px; right: 18px; z-index: 350;
  display: none; align-items: center; gap: 8px;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 10px; box-shadow: var(--shadow-lg);
}
.fip-bar.is-open { display: flex; }
.fip-icon { color: var(--text-faint); font-size: 15px; padding-left: 2px; }
#fipInput {
  background: none; border: none; outline: none; color: var(--text);
  font-family: var(--font-ui); font-size: 13.5px; width: 200px;
}
#fipInput::placeholder { color: var(--text-faint); }
.fip-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); white-space: nowrap; min-width: 62px; text-align: right; }
.fip-btn {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 7px; width: 24px; height: 24px; cursor: pointer; font-size: 11px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.fip-btn:hover { color: var(--text); border-color: var(--accent); }

/* Painted via the CSS Custom Highlight API, so no DOM nodes are inserted and
   notes.js's offset-based anchoring is never disturbed. */
::highlight(kml-find) { background: color-mix(in srgb, var(--c-gpu) 32%, transparent); color: inherit; }
/* Pinned rather than tokenised: this is the one place --c-gpu is a fill with
   text on top, and the light theme's darkened #8b7317 would leave near-black
   text sitting on dark olive. A highlight has to stay a highlight. */
::highlight(kml-find-current) { background: #facc15; color: #16161a; }

@media (max-width: 640px) {
  .fip-bar { left: 12px; right: 12px; top: 10px; }
  #fipInput { width: 100%; }
}

/* ---------- "Try it" runnable code block ----------
   Collapsed by default: the code is there when you want to go deeper, and out
   of the way when you are reading for the argument. Rendered as an editor
   panel — title bar, gutter-ish padding, VS Code-family token colours — because
   code that looks like code reads as something you could run. */
.tryit { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); margin: 26px 0; overflow: hidden; }
.tryit[open] { border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); }
.tryit-head {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  cursor: pointer; list-style: none; flex-wrap: wrap;
  transition: background-color .15s var(--ease);
}
.tryit-head::-webkit-details-marker { display: none; }
.tryit-head:hover { background: var(--bg-2); }
.tryit[open] .tryit-head { border-bottom: 1px solid var(--border-soft); }
/* the disclosure chevron, rotated when open */
.tryit-head::after {
  content: '›'; margin-left: auto; font-size: 17px; line-height: 1;
  color: var(--text-faint); transform: rotate(90deg);
  transition: transform .18s var(--ease), color .15s var(--ease);
}
.tryit[open] .tryit-head::after { transform: rotate(-90deg); }
.tryit-head:hover::after { color: var(--accent-text); }
.tryit-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 2px 8px; border-radius: 5px; flex-shrink: 0;
}
.tryit-what { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text); }
.tryit pre {
  margin: 0; border: none; border-radius: 0; background: var(--code-bg);
  font-size: 12.5px; line-height: 1.65; padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
  /* Every snippet is wrapped under 74 chars so it fits without scrolling on a
     normal screen. On a phone it cannot, and wrapping Python would corrupt the
     indentation that carries its meaning — so it scrolls horizontally instead. */
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) { .tryit pre { font-size: 11.5px; padding: 14px; } }

/* Copy button. The wrapper is what it positions against — anchoring to <pre>
   would make the button scroll away with the code on a narrow screen. */
.tryit-codewrap { position: relative; }
.tryit-copy {
  position: absolute; top: 10px; right: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--code-bg) 80%, var(--text));
  border: 1px solid var(--border); border-radius: 7px;
  color: var(--text-dim); cursor: pointer;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  padding: 5px 9px; opacity: 0;
  transition: opacity .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.tryit-copy svg { width: 13px; height: 13px; flex-shrink: 0; }
/* revealed on hover, but always present for keyboard users */
.tryit-codewrap:hover .tryit-copy,
.tryit-copy:focus-visible { opacity: 1; }
.tryit-copy:hover { color: var(--text); border-color: var(--border-hover); }
.tryit-copy.is-done { opacity: 1; color: var(--know-nice); border-color: color-mix(in srgb, var(--know-nice) 45%, transparent); }
.tryit-copy.is-failed { opacity: 1; color: var(--know-conceptual); border-color: color-mix(in srgb, var(--know-conceptual) 45%, transparent); }
/* on touch there is no hover, so keep it visible */
@media (hover: none) { .tryit-copy { opacity: 1; } }
.tryit-out {
  padding: 12px 18px; background: var(--bg-2);
  font-family: var(--font-serif); font-size: 13.5px; line-height: 1.55; color: var(--text-dim);
}
.tryit-out strong { color: var(--text); }
.tryit-out code { font-size: 12px; }

/* Token colours. Dark values track the VS Code Dark+ palette most people will
   recognise; the light block below swaps in Light+ equivalents so the panel
   stays legible in both themes. */
.tryit pre code, .content pre code { color: var(--code-fg); }
.tok-com { color: var(--code-com); font-style: italic; }
.tok-str { color: var(--code-str); }
.tok-num { color: var(--code-num); }
.tok-kw  { color: var(--code-kw); }
.tok-bi  { color: var(--code-bi); }
.tok-fn  { color: var(--code-fn); }

/* ---------- mid-page checkpoint ----------
   Pages average 2,400 words. This is a breath: what you now know, what is next. */
.checkpoint {
  border-left: 3px solid var(--accent); background: var(--bg-2);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 14px 18px; margin: 30px 0;
}
.checkpoint-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: 6px;
}
.checkpoint p { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.6; color: var(--text-dim); margin: 0; max-width: 72ch; }
.checkpoint p + p { margin-top: 8px; }

/* =========================================================================
   KnowSys look, Violet palette (swapped with KnowSys, Sep 2026)
   The sister site reads better, and most of that is proportion rather than
   colour: one sans at 17px instead of a 19px serif, tighter display type,
   tables and callouts that sit on cards, and an accent that marks structure
   (section numbers, "why" heads) rather than decoration. These rules sit last
   so they win without editing the older ones above.
   ========================================================================= */
body { font-feature-settings: "ss01", "cv11"; }
h1 { font-size: 46px; line-height: 1.06; letter-spacing: -.035em; font-weight: 800; }
.dek { font-size: 19px; line-height: 1.6; }
.content p { font-size: 17px; line-height: 1.78; margin-bottom: 1.15em; letter-spacing: 0; }
.content p.lede { font-size: 19px; line-height: 1.6; }
.content li { font-size: 17px; line-height: 1.72; margin-bottom: .45em; }
.content h2 { font-size: 29px; font-weight: 750; letter-spacing: -.025em; line-height: 1.2; gap: 14px; }
.content h2 .num { color: var(--accent-text); font-size: 15px; }
.content h3 { font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.content h4.why { font-size: 17px; font-weight: 700; margin: 1.6em 0 .4em; display: flex; align-items: center; gap: 9px; }
.content h4.why::before { content: "?"; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); font-size: 12px; font-weight: 800; flex-shrink: 0; }
.content strong { font-weight: 700; }
.content code { font-size: .86em; }

.tbl-wrap { background: var(--bg-card); box-shadow: var(--shadow); }
table.cmp { font-size: 14.5px; }
table.cmp th { text-transform: none; letter-spacing: .02em; font-size: 12.5px; font-weight: 650; }
table.cmp td { line-height: 1.55; }

.callout { display: block; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); border-radius: var(--radius); padding: 16px 20px; }
.callout-label { font-size: 12.5px; letter-spacing: .05em; color: var(--accent-text); }
.callout p { font-size: 16px; line-height: 1.65; }
.callout-teach { border-left: 1px solid color-mix(in srgb, var(--accent-2) 30%, var(--border)); border-color: color-mix(in srgb, var(--accent-2) 30%, var(--border)); background: color-mix(in srgb, var(--accent-2) 6%, var(--bg-card)); }
.callout-warn { border-left: 1px solid; border-color: color-mix(in srgb, var(--know-conceptual) 35%, var(--border)); background: color-mix(in srgb, var(--know-conceptual) 6%, var(--bg-card)); }
.callout-fail { border-left: 1px solid; border-color: color-mix(in srgb, var(--know-cold) 35%, var(--border)); background: color-mix(in srgb, var(--know-cold) 6%, var(--bg-card)); }

.tldr { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--bg-card)), var(--bg-card)); }
.tldr p { font-size: 16.5px; }
.eq-block, .derivation, .qa, .resource-card, .related-card { box-shadow: var(--shadow); }
.qa summary { font-size: 15px; }
.qa .qa-body, .qa .qa-body p { font-size: 15.5px; line-height: 1.65; }
.related-card { border-top: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--bg-card)), var(--bg-card) 60%); }

@media (max-width: 640px) {
  h1 { font-size: 34px; }
  .content p, .content li { font-size: 16.5px; }
  .content h2 { font-size: 24px; }
}

/* The off-canvas notes drawer sat past the right edge and made every page
   27px wider than a 390px phone, so the whole page panned sideways. */
html, body { overflow-x: clip; }

/* Sidebar head: one progress card, then a quiet list of site tools.
   It used to be five differently styled pieces (a grey Home link, two bars,
   a boxed button and four bold accent links with emoji, each ruled off). */
.sidebar-progress { padding: 14px 14px 12px; margin: 0 0 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: var(--shadow); }
.sidebar-progress .sp-label { font-size: 11px; letter-spacing: .07em; font-weight: 650; }
.sidebar-progress .sp-count { color: var(--text-dim); font-weight: 500; }
.sidebar-progress .sp-track, .sb-mastery-track { height: 4px; }
.sb-mastery { margin-top: 12px; }
.sb-drill-btn { justify-content: space-between; margin-top: 14px; padding: 9px 12px; border: 0; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-text); font-size: 13px; font-weight: 650; }
.sb-drill-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); transform: none; }
.sb-drill-count { font: 500 12px var(--font-mono); color: var(--text-dim); }
.sb-tools { display: flex; flex-direction: column; gap: 1px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.sb-tools a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--text-dim); }
.sb-tools a:hover { background: var(--bg-2); color: var(--text); text-decoration: none; }
.sb-tools a.active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-text); }
.sb-tools svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

/* Chapter header, KnowSys style: chip + number, gradient title, pills,
   Start reading / Mark as complete, and an "In this chapter" card that
   scripts/build.py generates from the page's h2s. */
.topic-header { position: relative; padding: 4px 0 30px; margin-bottom: 40px; border-bottom: 1px solid var(--border-soft); }
.topic-header::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: -120px; left: 50%; width: 100vw; height: 520px; transform: translateX(-50%);
  background: radial-gradient(40% 60% at 30% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(30% 50% at 80% 5%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
.th-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; min-height: 30px; }
.th-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 650;
  background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-text); }
.th-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--accent)); }
.th-num { font-size: 13.5px; color: var(--text-faint); }
.th-top .page-community { margin: 0 0 0 auto; gap: 12px; }
.th-top .pc-views { font-size: 13px; }
.th-top .pc-views, .th-top .pc-like-btn, .th-top .pc-comment-btn { color: var(--text-faint); }
.topic-header h1 { font-size: 50px; line-height: 1.05; margin-bottom: 16px; }
.th-grad { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topic-header .dek { font-size: 19px; line-height: 1.6; margin-bottom: 22px; }
.topic-header .meta-row { gap: 8px; margin-bottom: 0; }
.th-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); font-size: 13px; color: var(--text-dim); line-height: 1.35; }
.th-pill svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.th-pill.tag { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.th-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.th-start, .th-done { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 11px; font: 650 14.5px var(--font-ui); cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s var(--ease), border-color .15s; }
.th-start { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: var(--on-accent); box-shadow: 0 8px 24px -10px var(--accent); }
.th-start:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 12px 28px -10px var(--accent); }
.th-start svg { width: 13px; height: 13px; fill: currentColor; }
.th-done { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); }
.th-done:hover { border-color: var(--accent); }
.th-done-ic { width: 14px; height: 14px; border-radius: 50%; border: 1.6px solid currentColor; opacity: .8; }
.th-done.is-active { border-color: color-mix(in srgb, var(--know-nice) 50%, var(--border)); color: var(--know-nice); }
.th-done.is-active .th-done-ic { background: var(--know-nice); border-color: var(--know-nice); opacity: 1; box-shadow: inset 0 0 0 2.5px var(--bg-card); }
.th-toc { margin-top: 28px; padding: 20px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: var(--shadow); }
.th-toc-label { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; }
.th-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; }
.content .th-toc li { margin: 0; font-size: 14.5px; line-height: 1.45; max-width: none; font-family: var(--font-ui); }
.th-toc a { display: flex; gap: 12px; padding: 5px 0; color: var(--text-dim); }
.th-toc a:hover { color: var(--text); text-decoration: none; }
.th-toc .tn { font: 500 12px var(--font-mono); color: var(--text-faint); min-width: 18px; padding-top: 2px; }
@media (max-width: 640px) {
  .topic-header h1 { font-size: 36px; }
  .th-toc ol { grid-template-columns: 1fr; }
  .th-top { flex-wrap: wrap; }
}