/* math-of-ai — editorial, Distill-inspired layout. System fonts only (no downloads, strict CSP). */

/* ------------------------------------------------------------------ tokens */

:root {
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --mathfont: "Latin Modern Math", "STIX Two Math", "Cambria Math", math;

  --col: 680px;
  --outdent: 150px;

  --hue: 255;
  --chroma: 0.13;

  --bg: #ffffff;
  --bg-soft: #f6f5f1;
  --bg-figure: #fafaf7;
  --fg: #16181c;
  --text: rgba(16, 18, 22, 0.86);
  --muted: #636870;
  --faint: #9a9ea5;
  --rule: #e3e1da;
  --grid: #ecebe6;
  --accent: oklch(0.5 var(--chroma) var(--hue));
  --accent-strong: oklch(0.42 var(--chroma) var(--hue));
  --accent-soft: oklch(0.965 0.022 var(--hue));
  --accent-line: oklch(0.84 0.06 var(--hue));

  /* Categorical marks shared by every demo (class A / class B / highlights). */
  --k1: #2f6db5;
  --k2: #d2553b;
  --k3: #2e8b57;
  --k4: #9a5bbf;
  --k1-soft: rgba(47, 109, 181, 0.16);
  --k2-soft: rgba(210, 85, 59, 0.16);
  --good: #2e8b57;
  --bad: #c2412d;
  --winter: rgba(70, 120, 190, 0.07);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #14161a;
  --bg-soft: #1b1e23;
  --bg-figure: #191c21;
  --fg: #eef0f3;
  --text: rgba(236, 239, 243, 0.87);
  --muted: #a3a8b0;
  --faint: #6f747c;
  --rule: #2c3037;
  --grid: #23272d;
  --accent: oklch(0.78 calc(var(--chroma) * 0.85) var(--hue));
  --accent-strong: oklch(0.86 calc(var(--chroma) * 0.7) var(--hue));
  --accent-soft: oklch(0.25 0.035 var(--hue));
  --accent-line: oklch(0.42 0.06 var(--hue));
  --k1: #6ea8ec;
  --k2: #f08a6c;
  --k3: #6cc48e;
  --k4: #c592e3;
  --k1-soft: rgba(110, 168, 236, 0.2);
  --k2-soft: rgba(240, 138, 108, 0.2);
  --good: #6cc48e;
  --bad: #f07a63;
  --winter: rgba(110, 168, 236, 0.07);
  color-scheme: dark;
}

/* One hue per chapter: it tints the chain, the headings' marks, the figures and the timeline. */
.ch-automata { --hue: 232; --chroma: 0.06; }
.ch-computation { --hue: 262; --chroma: 0.07; }
.ch-logic { --hue: 5; --chroma: 0.09; }
.ch-probability { --hue: 25; }
.ch-information { --hue: 58; }
.ch-linear-algebra { --hue: 105; --chroma: 0.12; }
.ch-calculus { --hue: 150; --chroma: 0.12; }
.ch-optimization { --hue: 185; --chroma: 0.11; }
.ch-neural-networks { --hue: 222; }
.ch-learning-theory { --hue: 252; }
.ch-transformers { --hue: 292; }
.ch-llms { --hue: 340; }

/* Accent colours are recomputed wherever a chapter sets its own --hue (custom properties resolve where defined). */
[class^="ch-"], [class*=" ch-"] {
  --accent: oklch(0.5 var(--chroma) var(--hue));
  --accent-strong: oklch(0.42 var(--chroma) var(--hue));
  --accent-soft: oklch(0.965 0.022 var(--hue));
  --accent-line: oklch(0.84 0.06 var(--hue));
}
:root[data-theme="dark"] [class^="ch-"], :root[data-theme="dark"] [class*=" ch-"] {
  --accent: oklch(0.78 calc(var(--chroma) * 0.85) var(--hue));
  --accent-strong: oklch(0.86 calc(var(--chroma) * 0.7) var(--hue));
  --accent-soft: oklch(0.25 0.035 var(--hue));
  --accent-line: oklch(0.42 0.06 var(--hue));
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.1875rem/1.65 var(--serif);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-soft); color: var(--fg); }

a { color: var(--accent-strong); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4 { font-family: var(--sans); color: var(--fg); line-height: 1.2; letter-spacing: -0.01em; }

p, ul, ol { margin: 0 0 1.05em; }
li { margin: 0.2em 0; }
strong { color: var(--fg); font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

code, kbd {
  font-family: var(--mono);
  font-size: 0.84em;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.05em 0.3em;
}

.tex-error { color: var(--bad); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ math */

math { font-family: var(--mathfont); font-size: 1.08em; color: var(--fg); }
.math-block {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 1.1em 0 1.3em;
  padding: 0.25em 0;
  text-align: center;
}
.math-block math { display: inline-block; font-size: 1.12em; }
mtable.aligned mtd.al-r { text-align: right; padding: 0.15em 0 0.15em 0; }
mtable.aligned mtd.al-l { text-align: left; padding: 0.15em 0 0.15em 0; }
mtable.matrix mtd { padding: 0.15em 0.4em; }
mtable.cases mtd { padding: 0.15em 0.6em 0.15em 0.2em; text-align: left; }

/* Colour-coded terms: the same class on a formula term and on the words that explain it. */
.k1, math .k1 { color: var(--k1); }
.k2, math .k2 { color: var(--k2); }
.k3, math .k3 { color: var(--k3); }
.k4, math .k4 { color: var(--k4); }
span.k1, span.k2, span.k3, span.k4 { font-weight: 600; }

/* ------------------------------------------------------------------ header and footer */

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 8px; z-index: 50; background: var(--bg); padding: 6px 10px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 54px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.9rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--fg);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--mathfont);
  font-size: 17px;
  line-height: 1;
}

.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav > a, .chapters-menu > summary {
  color: var(--muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.site-nav > a:hover, .chapters-menu > summary:hover, .site-nav > a[aria-current] { color: var(--fg); background: var(--bg-soft); }

.chapters-menu { position: relative; }
.chapters-menu > summary { list-style: none; }
.chapters-menu > summary::-webkit-details-marker { display: none; }
.chapters-menu > summary::after { content: " ▾"; font-size: 0.8em; }
.chapters-menu ol {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(320px, 86vw);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}
.chapters-menu li { margin: 0; }
.chapters-menu li a {
  display: flex;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
}
.chapters-menu li a:hover, .chapters-menu li a[aria-current] { background: var(--accent-soft); color: var(--fg); }
.chapters-menu .num { font-family: var(--mono); color: var(--accent); font-size: 0.85em; padding-top: 1px; }

.langs { display: flex; gap: 2px; }
.langs a { color: var(--muted); text-decoration: none; font-size: 0.8rem; padding: 4px 6px; border-radius: 5px; }
.langs a[aria-current] { color: var(--fg); background: var(--bg-soft); }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}
.theme-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

.site-footer {
  max-width: calc(var(--col) + 40px);
  margin: 5rem auto 0;
  padding: 24px 20px 48px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font: 0.85rem/1.6 var(--sans);
}
.site-footer p { margin: 0 0 0.4em; }
.site-footer a { color: var(--muted); }

/* ------------------------------------------------------------------ layout */

main { display: block; }

.chapter-head, .prose, .page-head, .home, .timeline > * {
  max-width: calc(var(--col) + 40px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.prose { counter-reset: figure; }
.prose::after { content: ""; display: block; clear: both; }

.prose h2 {
  position: relative;
  font-size: 1.65rem;
  margin: 3.2rem 0 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.prose h3 { font-size: 1.2rem; margin: 2.2rem 0 0.7rem; }
.prose h4 { font-size: 1rem; margin: 1.6rem 0 0.5rem; }
.anchor {
  position: absolute;
  left: -1.1em;
  color: var(--faint);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.15s;
}
.prose h2:hover .anchor, .anchor:focus { opacity: 1; }

.prose > p:first-child::first-letter {
  float: left;
  font-size: 3.4em;
  line-height: 0.9;
  padding: 0.06em 0.08em 0 0;
  color: var(--accent);
  font-family: var(--serif);
}

blockquote {
  margin: 1.6em 0;
  padding: 0 0 0 1.2em;
  border-left: 3px solid var(--rule);
  color: var(--muted);
  font-style: italic;
}
blockquote cite { display: block; margin-top: 0.4em; font: normal 0.8rem var(--sans); }

/* Margin notes: in the right gutter on wide screens, inline callouts otherwise. */
.note {
  font: 0.86rem/1.55 var(--sans);
  color: var(--muted);
  margin: 1.2em 0;
  padding: 10px 14px;
  border-left: 2px solid var(--accent-line);
  background: var(--bg-soft);
  border-radius: 0 6px 6px 0;
}
.note strong { color: var(--text); }
.note math { font-size: 1em; }
@media (min-width: 1180px) {
  .note {
    float: right;
    clear: right;
    width: 220px;
    margin: 0.3em -260px 1em 0;
    padding: 0 0 0 12px;
    background: none;
    border-radius: 0;
  }
}

/* Wider-than-text elements. */
@media (min-width: 1040px) {
  .wide { margin-left: calc(-1 * var(--outdent)); margin-right: calc(-1 * var(--outdent)); }
}

/* ------------------------------------------------------------------ chapter head */

.chapter-head { padding-top: 2.2rem; }

.kicker {
  font: 700 0.78rem/1.4 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2rem 0 0.6rem;
}
.chapter-head h1, .page-head h1 {
  font-size: clamp(2.2rem, 5.2vw, 3.3rem);
  font-weight: 750;
  letter-spacing: -0.025em;
  margin: 0 0 0.9rem;
}
.dek { font-size: 1.32rem; line-height: 1.5; color: var(--muted); margin-bottom: 1.8rem; }

.byline {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 14px 28px;
  margin: 0 0 1.6rem;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font: 0.86rem/1.5 var(--sans);
}
.byline .wide { grid-column: 1 / -1; margin: 0; }
.byline dt { color: var(--faint); text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.72rem; margin-bottom: 3px; }
.byline dd { margin: 0; color: var(--text); }
.byline ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.byline li {
  margin: 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.byline li math { font-size: 1em; }

.toc { font: 0.9rem/1.5 var(--sans); margin-bottom: 1rem; }
.toc-title { font-weight: 700; color: var(--fg); margin: 0 0 0.4rem; }
.toc ol { columns: 2; column-gap: 28px; margin: 0; padding-left: 1.3em; color: var(--faint); }
.toc li { break-inside: avoid; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--accent-strong); text-decoration: underline; }

/* Compact chain: where this chapter sits in DATA -> ... -> LLM. */
.chain-compact {
  display: flex;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.chain-compact li { flex: 1 0 auto; min-width: 58px; margin: 0; position: relative; }
.chain-compact li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--rule);
}
.chain-compact li:first-child::before { left: 50%; }
.chain-compact li:last-child::before { right: 50%; }
.chain-compact a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--faint);
  font: 600 0.62rem/1.2 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 4px;
}
.chain-compact .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent-line);
}
.chain-compact a:hover { color: var(--accent-strong); }
.chain-compact a:hover .dot { background: var(--accent-soft); border-color: var(--accent); }
.chain-compact a[aria-current] { color: var(--accent-strong); }
.chain-compact a[aria-current] .dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
/* Twelve labelled stops need more than the text column: on wide screens the strip overhangs it a little. */
@media (min-width: 940px) { .chapter-head > .chain-compact { margin-left: -90px; margin-right: -90px; } }
@media (max-width: 939px) {
  .chain-compact .lbl { display: none; }
  .chain-compact li { min-width: 28px; }
}

/* ------------------------------------------------------------------ theorem, definition, proof */

.theorem, .definition, .idea {
  margin: 1.8em 0;
  padding: 14px 20px 6px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 8px 8px 0;
}
.definition { border-left-color: var(--faint); background: var(--bg-soft); }
.idea { border-left-color: var(--k3); background: var(--bg-soft); }
.th-title {
  display: block;
  font: 700 0.76rem/1.4 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 0.45em;
}
.definition .th-title { color: var(--muted); }
.idea .th-title { color: var(--k3); }
.th-title .th-name { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--fg); }
.theorem .math-block { margin: 0.7em 0; }

details.proof {
  margin: 0.6em 0 1em;
  font-size: 0.97em;
}
details.proof > summary {
  cursor: pointer;
  font: 600 0.82rem/1.4 var(--sans);
  color: var(--accent-strong);
  list-style: none;
}
details.proof > summary::-webkit-details-marker { display: none; }
details.proof > summary::before { content: "▸ "; }
details.proof[open] > summary::before { content: "▾ "; }
details.proof > div { padding: 0.6em 0 0.2em; }
details.proof > div::after { content: "∎"; display: block; text-align: right; color: var(--muted); }

/* ------------------------------------------------------------------ figures and demos */

figure { margin: 2.4em 0; }
figure.demo {
  counter-increment: figure;
  padding: 18px 18px 14px;
  background: var(--bg-figure);
  border: 1px solid var(--rule);
  border-radius: 10px;
  clear: both;
}
figcaption {
  margin-top: 14px;
  font: 0.86rem/1.55 var(--sans);
  color: var(--muted);
}
figure.demo figcaption::before {
  content: "Fig. " counter(figure) " · ";
  font-weight: 700;
  color: var(--accent-strong);
}
figcaption math { font-size: 1em; }
@media (max-width: 720px) {
  figure.demo { margin-left: -20px; margin-right: -20px; border-radius: 0; border-left: 0; border-right: 0; padding: 16px 14px 12px; }
}

.demo-stage { font: 0.9rem/1.45 var(--sans); color: var(--text); }
.demo-canvas { display: block; width: 100%; touch-action: none; border-radius: 6px; }
.demo-svg { display: block; width: 100%; height: auto; overflow: visible; }
.demo-error { color: var(--bad); font: 0.9rem var(--sans); }
.js [data-demo]:not([data-ready]):not([data-error]) .demo-stage:empty { min-height: 120px; }
html:not(.js):lang(es) figure.demo::after { content: "Esta figura es interactiva y necesita JavaScript."; }
html:not(.js) figure.demo::after {
  content: "This figure is interactive and needs JavaScript.";
  display: block;
  font: 0.85rem var(--sans);
  color: var(--muted);
}

.demo-title { font: 700 0.95rem/1.3 var(--sans); color: var(--fg); margin: 0 0 10px; }
.demo-hint { font-size: 0.82rem; color: var(--muted); margin: 6px 0 0; }

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 12px 0 4px;
}
.ctl { display: flex; align-items: center; gap: 8px; font: 0.84rem/1.3 var(--sans); }
.ctl label, .ctl-label { color: var(--muted); white-space: nowrap; }
.ctl-slider { flex: 1 1 210px; min-width: 190px; }
.ctl-slider.ctl-wide { flex-basis: 100%; }
.ctl-slider input { flex: 1; min-width: 70px; accent-color: var(--accent); }
.ctl output { font-family: var(--mono); font-size: 0.8rem; color: var(--fg); min-width: 4.4em; text-align: right; }
.ctl select {
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 4px 6px;
}
.ctl-toggle input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }

.btn {
  font: 600 0.82rem/1 var(--sans);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn.primary:hover { background: var(--accent-strong); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

.seg-group { display: inline-flex; border: 1px solid var(--rule); border-radius: 7px; overflow: hidden; }
.seg {
  font: 600 0.78rem/1 var(--sans);
  color: var(--muted);
  background: var(--bg);
  border: 0;
  border-right: 1px solid var(--rule);
  padding: 7px 10px;
  cursor: pointer;
}
.seg:last-child { border-right: 0; }
.seg[aria-pressed="true"] { background: var(--accent); color: var(--bg); }

.stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 10px 0 2px; }
.stat { display: flex; flex-direction: column; min-width: 80px; }
.stat-label { font: 600 0.74rem/1.3 var(--sans); color: var(--faint); }
.stat-val { font: 500 1.05rem/1.35 var(--mono); color: var(--fg); }
.stat.good .stat-val { color: var(--good); }
.stat.bad .stat-val { color: var(--bad); }
.stat.accent .stat-val { color: var(--accent-strong); }

.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel-grid > * { min-width: 0; }
@media (max-width: 640px) { .panel-grid { grid-template-columns: 1fr; } }
.panel-label { font: 600 0.8rem/1.3 var(--sans); color: var(--muted); margin: 0 0 6px; }

/* SVG chart vocabulary used by the demos. */
.demo-svg text { font: 11px var(--sans); fill: var(--muted); }
.demo-svg .axis line, .demo-svg .axis path, .demo-svg line.axis { stroke: var(--faint); stroke-width: 1; }
.demo-svg .gridline { stroke: var(--grid); stroke-width: 1; }
.demo-svg .curve { fill: none; stroke: var(--accent); stroke-width: 2.2; }
.demo-svg .curve-2 { fill: none; stroke: var(--k2); stroke-width: 2; }
.demo-svg .curve-muted { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 4 4; }
.demo-svg .area { fill: var(--accent-soft); }
.demo-svg .bar { fill: var(--accent); }
.demo-svg .bar-soft { fill: var(--accent-line); }
.demo-svg .bar-2 { fill: var(--k2); }
.demo-svg .pt-a { fill: var(--k1); }
.demo-svg .pt-b { fill: var(--k2); }
.demo-svg .label-strong { fill: var(--fg); font-weight: 600; }
.demo-svg .mono { font-family: var(--mono); }

/* ------------------------------------------------------------------ prev / next */

.prev-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: calc(var(--col) + 40px);
  margin: 4rem auto 0;
  padding: 0 20px;
}
.pn-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  text-decoration: none;
  font-family: var(--sans);
  color: var(--text);
}
.pn-card:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.pn-card.next { text-align: right; }
.pn-card.empty { border: 0; }
.pn-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.pn-title { font-weight: 700; color: var(--accent-strong); }
.pn-dek { font-size: 0.86rem; color: var(--muted); }
@media (max-width: 560px) { .prev-next { grid-template-columns: 1fr; } .pn-card.next { text-align: left; } }

/* ------------------------------------------------------------------ references */

.references { font: 0.86rem/1.55 var(--sans); color: var(--muted); }
.references ol { padding-left: 1.4em; }
.references li { margin-bottom: 0.5em; }
.references h2 { font-size: 1.2rem; }

/* ------------------------------------------------------------------ home */

.home { padding-top: 3rem; }
.home figure.demo { margin-left: 0; margin-right: 0; }
.hero-title {
  font-size: clamp(2.5rem, 7vw, 4.4rem);
  font-weight: 780;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0.3rem 0 1.2rem;
}
.home .lead { font-size: 1.38rem; line-height: 1.5; color: var(--muted); }
.home h2 { font-size: 1.65rem; margin: 3.6rem 0 1rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.home .kicker { --hue: 340; }

.chain { list-style: none; margin: 1.6rem 0; padding: 0; position: relative; }
.chain::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(var(--rule), var(--rule));
}
.chain > li { margin: 0 0 12px; position: relative; }
.chain-card {
  display: flex;
  gap: 18px;
  padding: 14px 16px 14px 0;
  text-decoration: none;
  color: var(--text);
  border-radius: 10px;
}
.chain-card:hover { background: var(--accent-soft); }
.chain-num {
  position: relative;
  flex: 0 0 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  color: var(--accent-strong);
  font: 700 0.95rem var(--mono);
}
.chain-card:hover .chain-num { background: var(--accent); color: var(--bg); }
.chain-body { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.chain-tag { font: 700 0.72rem/1.3 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.chain-era { color: var(--faint); font-weight: 600; letter-spacing: 0.02em; margin-left: 6px; }
.chain-title { font: 700 1.2rem/1.3 var(--sans); color: var(--fg); }
.chain-dek { font-size: 1rem; line-height: 1.5; color: var(--muted); }
.chain-theorems { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font: 0.76rem/1.4 var(--sans); }
.chain-theorems li { margin: 0; padding: 2px 8px; border: 1px solid var(--accent-line); border-radius: 999px; color: var(--accent-strong); }
.chain-theorems math { font-size: 1em; }

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.6rem 0; font-family: var(--sans); }
.cta {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  text-decoration: none;
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--fg);
}
.cta.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.cta:hover { border-color: var(--faint); }

.home figure.demo { counter-increment: none; }
.home figure.demo figcaption::before { content: none; }

/* ------------------------------------------------------------------ timeline */

.timeline .page-head { padding-top: 3rem; }
.timeline-filter {
  position: sticky;
  top: 54px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 0.72rem/1 var(--sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-line); }
.chip[data-filter="all"][aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.era { margin: 2.6rem 0 0; }
.era-head { margin-bottom: 1rem; }
.era-years { font: 700 0.75rem var(--mono); color: var(--faint); margin: 0; }
.era-head h2 { font-size: 1.5rem; margin: 0.2rem 0 0.5rem; }
.era-head p { color: var(--muted); font-size: 1.02rem; }
.era-winter .era-head h2::after { content: " ❄"; color: var(--k1); }
.era-winter .events { background: var(--winter); border-radius: 10px; }

.events { list-style: none; margin: 0; padding: 4px 0; position: relative; }
.events::before { content: ""; position: absolute; left: 76px; top: 0; bottom: 0; width: 2px; background: var(--rule); }
.event { display: grid; grid-template-columns: 64px 1fr; gap: 26px; margin: 0; padding: 12px 10px 12px 0; position: relative; }
.event::before {
  content: "";
  position: absolute;
  left: 71px;
  top: 19px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--accent);
}
.event.ch-none::before { border-color: var(--faint); }
.event.ev-milestone::before { background: var(--accent); }
.ev-year { font: 700 0.95rem/1.5 var(--mono); color: var(--accent-strong); text-align: right; padding-top: 6px; }
.event.ch-none .ev-year { color: var(--muted); }
.ev-body h3 { font-size: 1.08rem; margin: 0.25rem 0 0.15rem; }
.ev-body h3 math { font-size: 1em; }
.ev-who { font: 0.8rem var(--sans); color: var(--faint); margin: 0 0 0.35rem; }
.ev-body p { font-size: 1rem; margin-bottom: 0.4rem; }
.ev-link { font: 600 0.8rem var(--sans); text-decoration: none; }
.event[hidden] { display: none; }
.era.empty { display: none; }
@media (max-width: 560px) {
  .event { grid-template-columns: 46px 1fr; gap: 20px; }
  .events::before { left: 56px; }
  .event::before { left: 51px; }
  .ev-year { font-size: 0.82rem; }
}

/* ------------------------------------------------------------------ demo-specific bits */

/* Next-token bars (home + LLM chapter). */
.tok-prompt {
  font: 1.25rem/1.5 var(--serif);
  color: var(--fg);
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  min-height: 2.2em;
}
.tok-prompt .added { color: var(--accent-strong); font-weight: 600; }
.tok-prompt .caret { display: inline-block; width: 2px; height: 1.05em; background: var(--accent); vertical-align: -0.15em; margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tok-prompt .caret { animation: none; } }
.tok-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; }
.tok-row {
  display: grid;
  grid-template-columns: 7.5em 1fr 4.2em;
  align-items: center;
  gap: 10px;
  width: 100%;
  font: 0.92rem var(--sans);
  color: var(--text);
  background: none;
  border: 0;
  padding: 2px 0;
  text-align: left;
  cursor: pointer;
}
.tok-row:disabled { cursor: default; }
.tok-word { font-family: var(--serif); font-size: 1.02rem; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tok-track { height: 18px; background: var(--grid); border-radius: 4px; overflow: hidden; }
.tok-fill { display: block; height: 100%; background: var(--accent-line); border-radius: 4px; transition: width 0.3s; }
.tok-row:hover:not(:disabled) .tok-fill, .tok-row.picked .tok-fill { background: var(--accent); }
.tok-row.cut { opacity: 0.35; }
.tok-p { font: 0.8rem var(--mono); text-align: right; color: var(--muted); }

/* Turing machine tape. */
.tape { display: flex; justify-content: center; gap: 3px; margin: 8px 0 4px; overflow: hidden; }
.cell {
  flex: 0 0 34px;
  height: 40px;
  display: grid;
  place-items: center;
  font: 600 1.1rem var(--mono);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 5px;
}
.cell.blank { color: var(--faint); }
.cell.head { border: 2px solid var(--accent); background: var(--accent-soft); }
.head-marker { text-align: center; font: 700 0.75rem var(--mono); color: var(--accent); }
.rules { width: 100%; border-collapse: collapse; font: 0.82rem var(--mono); margin-top: 10px; }
.rules th { font: 600 0.7rem var(--sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--rule); }
.rules td { padding: 4px 8px; border-bottom: 1px solid var(--grid); }
.rules tr.active td { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
.tm-status { font: 600 0.85rem var(--sans); color: var(--muted); margin: 6px 0; text-align: center; }
.tm-status.halted { color: var(--good); }

.tm-input {
  font: 600 0.95rem var(--mono);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 4px 8px;
  width: 9em;
}

/* Code listings in the prose. */
pre.code-block {
  font: 0.84rem/1.55 var(--mono);
  color: var(--fg);
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0 0 1.2em;
}
pre.code-block code { background: none; border: 0; padding: 0; font-size: 1em; }

/* Logic: unification step by step. */
.pl-term, .pl-query {
  font: 0.9rem var(--mono);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 6px 8px;
  min-width: 0;
}
.uni-inputs { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; }
.uni-inputs .pl-term { flex: 1 1 0; }
.uni-eq-sign { font: 700 1.1rem var(--mono); color: var(--muted); }
.uni-panels { margin-top: 14px; }
.uni-eqs, .uni-log { list-style: none; margin: 0; padding: 0; max-height: 15em; overflow-y: auto; }
.uni-eqs { font: 0.84rem/1.5 var(--mono); }
.uni-eqs li { padding: 3px 8px; margin: 0 0 4px; border-left: 3px solid var(--rule); border-radius: 0 4px 4px 0; overflow-wrap: anywhere; }
.uni-eqs li.solved { border-left-color: var(--good); }
.uni-eqs li.active { background: var(--accent-soft); border-left-color: var(--accent); }
.uni-log { font: 0.82rem/1.5 var(--sans); }
.uni-log li { padding: 2px 0; overflow-wrap: anywhere; }
.uni-log code { font-size: 0.86em; }
.uni-bad, .uni-log li.uni-bad strong { color: var(--bad); }
.uni-empty { color: var(--faint); }
.uni-result, .sld-answers { font: 600 0.88rem/1.45 var(--sans); color: var(--muted); margin: 12px 0 0; overflow-wrap: anywhere; }
.uni-result.good, .sld-answers.good { color: var(--good); }
.uni-result.bad, .sld-answers.bad { color: var(--bad); }

/* Logic: the SLD tree, one row per node in depth-first order. */
.sld-head { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin: 6px 0 12px; }
@media (max-width: 640px) { .sld-head { grid-template-columns: 1fr; } }
.sld-program { list-style: none; margin: 0; padding: 0; font: 0.8rem/1.55 var(--mono); }
.sld-program li { display: flex; gap: 8px; margin: 0; }
.sld-program code { background: none; border: 0; padding: 0; font-size: 1em; }
.sld-cn { flex: 0 0 2em; color: var(--accent-strong); font-weight: 700; }
.sld-query { font: 600 0.88rem var(--mono); color: var(--fg); margin: 0; }
.sld-rows { list-style: none; margin: 12px 0 0; padding: 0; font: 0.82rem/1.45 var(--mono); }
.sld-row {
  --d: 0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0;
  padding: 3px 8px 3px calc(10px + var(--d) * 1.3em);
  border-radius: 5px;
}
.sld-row::before { /* elbow from the parent row */
  content: "";
  position: absolute;
  left: calc(var(--d) * 1.3em - 0.5em);
  top: -0.25em;
  width: 0.8em;
  height: 1.05em;
  border-left: 1px solid var(--accent-line);
  border-bottom: 1px solid var(--accent-line);
}
.sld-row:first-child::before { display: none; }
.sld-row.active { background: var(--accent-soft); }
.sld-row.unreached { opacity: 0.38; }
.sld-edge { font: 600 0.72rem var(--sans); color: var(--accent-strong); }
.sld-goal { color: var(--fg); overflow-wrap: anywhere; }
.sld-ok { color: var(--good); font-weight: 700; }
.sld-mark { font: 600 0.78rem var(--sans); color: var(--muted); }
.sld-bad, .sld-loop { color: var(--bad); }

/* Logic: the Prolog playground. */
.pl-editor {
  display: block;
  width: 100%;
  min-height: 15em;
  resize: vertical;
  font: 0.84rem/1.5 var(--mono);
  color: var(--fg);
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
  tab-size: 4;
  white-space: pre;
  overflow: auto;
}
.pl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0 14px; }
.pl-status { margin: 0; font: 0.82rem var(--sans); color: var(--muted); }
.pl-status.good { color: var(--good); }
.pl-status.bad { color: var(--bad); }
.pl-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pl-prompt { font: 700 0.95rem var(--mono); color: var(--accent-strong); }
.pl-query { flex: 1 1 16em; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.pl-chips .chip { font-family: var(--mono); font-size: 0.74rem; text-transform: none; letter-spacing: 0; }
.pl-console {
  font: 0.82rem/1.5 var(--mono);
  color: var(--fg);
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 9em;
  max-height: 24em;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pl-line { margin: 0; }
.pl-ask-line { color: var(--accent-strong); font-weight: 700; margin-top: 8px; }
.pl-ask-line:first-child { margin-top: 0; }
.pl-no, .pl-info { color: var(--muted); }
.pl-err { color: var(--bad); }
.pl-out { color: var(--k1); }
.pl-trace { color: var(--muted); font-size: 0.92em; }
.pl-trace.pl-exit { color: var(--good); }
.pl-trace.pl-fail { color: var(--bad); }
.pl-trace.pl-redo { color: var(--k4); }
.pl-foot { align-items: center; margin-top: 8px; }
.pl-foot .demo-hint { margin: 0; }

/* Automata: the 4-bit adder. */
.add-circuit { max-width: 600px; margin: 8px auto 0; }
.add-grid { display: grid; gap: 4px; margin: 6px 0 10px; font: 0.95rem var(--mono); justify-content: center; }
.add-row { display: grid; grid-template-columns: 5.5em repeat(5, 2.6em); gap: 6px; align-items: center; }
.add-row.total { border-top: 2px solid var(--fg); padding-top: 6px; }
.add-lbl { font: 600 0.78rem var(--sans); color: var(--muted); text-align: right; padding-right: 6px; }
.add-idx { font: 600 0.7rem var(--sans); color: var(--faint); text-align: center; border-radius: 4px; }
.add-idx.sel { color: var(--accent-strong); background: var(--accent-soft); }
.add-carry { font-size: 0.78rem; color: var(--faint); text-align: center; }
.add-carry.on { color: var(--k2); font-weight: 700; }
.add-bit, .add-sum {
  height: 2.2em;
  display: grid;
  place-items: center;
  font: 700 1rem var(--mono);
  border-radius: 6px;
}
.add-bit { color: var(--muted); background: var(--bg); border: 1px solid var(--rule); cursor: pointer; padding: 0; }
.add-bit.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.add-sum { color: var(--muted); border: 1px dashed var(--rule); }
.add-sum.on { color: var(--fg); border: 1px solid var(--accent-line); background: var(--accent-soft); }
.add-sum.overflow { border-color: var(--k2); }
.add-carry.sel, .add-sum.sel { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.demo-svg .wire { fill: none; stroke: var(--faint); stroke-width: 1.6; }
.demo-svg .wire.on { stroke: var(--accent); stroke-width: 2.6; }
.demo-svg .junction { fill: var(--faint); }
.demo-svg .junction.on { fill: var(--accent); }
.demo-svg .gate { fill: var(--bg); stroke: var(--muted); stroke-width: 1.4; }
.demo-svg .gate.on { fill: var(--accent-soft); stroke: var(--accent); }
.demo-svg .gate-lbl { font: 700 11px var(--sans); fill: var(--muted); }
.demo-svg .gate-lbl.on { fill: var(--accent-strong); }
.demo-svg .pin { font: 600 12px var(--mono); fill: var(--muted); }
.demo-svg .pin.on { fill: var(--accent-strong); }

/* Automata: a finite automaton. */
.dfa-input { width: 11em; }
.dfa-diagram { max-width: 560px; margin: 4px auto 0; }
.demo-svg .dfa-edge { fill: none; stroke: var(--faint); stroke-width: 1.5; }
.demo-svg .dfa-edge.on { stroke: var(--accent); stroke-width: 2.6; }
.demo-svg .dfa-arrowhead { fill: var(--faint); }
.demo-svg .dfa-arrowhead-on { fill: var(--accent); }
.demo-svg .dfa-sym { font: 600 13px var(--mono); fill: var(--muted); }
.demo-svg .dfa-sym.on { fill: var(--accent-strong); }
.demo-svg .dfa-row { font: 600 11px var(--sans); fill: var(--faint); }
.demo-svg .dfa-state circle { fill: var(--bg); stroke: var(--muted); stroke-width: 1.6; transition: fill 0.2s; }
.demo-svg .dfa-state text { font: 700 14px var(--mono); fill: var(--fg); }
.demo-svg .dfa-state.accept circle.inner { fill: none; }
.demo-svg .dfa-state.active circle { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.4; }
.demo-svg .dfa-state.active circle.inner { fill: none; }
.demo-svg .dfa-state.active text { fill: var(--accent-strong); }
.dfa-tape .cell { flex-basis: 30px; height: 34px; font-size: 1rem; }
.dfa-tape .cell.read { color: var(--faint); }
.tm-status.bad { color: var(--bad); }

/* Automata: a toy CPU. */
.cpu-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; margin: 10px 0 12px; }
@media (max-width: 640px) { .cpu-layout { grid-template-columns: 1fr; } }
.cpu-mem { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; align-content: start; }
.cpu-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 2px 4px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  min-width: 0;
}
.cpu-cell.data { background: var(--bg-soft); }
.cpu-cell.pc { border: 2px solid var(--accent); }
.cpu-cell.read { background: var(--k1-soft); }
.cpu-cell.write { background: var(--k2-soft); }
.cpu-addr { font: 600 0.62rem var(--sans); color: var(--faint); }
.cpu-val { font: 700 0.9rem var(--mono); color: var(--fg); }
.cpu-mn { font: 0.6rem var(--mono); color: var(--accent-strong); min-height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cpu-regs { margin-top: 0; }
.cpu-phases { list-style: none; display: flex; gap: 4px; padding: 0; margin: 12px 0 8px; font: 600 0.74rem var(--sans); }
.cpu-phases li { flex: 1; text-align: center; padding: 5px 4px; border-radius: 6px; color: var(--faint); border: 1px solid var(--rule); margin: 0; }
.cpu-phases li.next { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.cpu-explain { font: 0.84rem/1.45 var(--sans); color: var(--text); margin: 0; min-height: 3.2em; }
.cpu-explain.halted { color: var(--good); font-weight: 600; }

/* Coin flips. */
.coin-strip { display: flex; flex-wrap: wrap; gap: 3px; min-height: 22px; margin: 8px 0 12px; }
.coin-strip span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font: 700 0.62rem var(--mono);
}
.coin-strip .c-head { background: var(--accent); color: var(--bg); }
.coin-strip .c-tail { border: 1.5px solid var(--accent-line); color: var(--muted); }

/* Generic tables inside demos. */
.mini-table { width: 100%; border-collapse: collapse; font: 0.82rem var(--sans); }
.mini-table th { text-align: left; font-weight: 600; color: var(--faint); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 6px; border-bottom: 1px solid var(--rule); }
.mini-table td { padding: 4px 6px; border-bottom: 1px solid var(--grid); }
.mini-table td.num, .mini-table th.num { text-align: right; font-family: var(--mono); }
.mini-table code { background: none; border: 0; padding: 0; font-size: 0.95em; color: var(--accent-strong); }

/* Generated text (n-grams, sampling). */
.gen-text {
  font: 1rem/1.6 var(--serif);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 5.5em;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Attention heatmap. */
.attn-tokens { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.attn-tok {
  position: relative;
  font: 1rem var(--serif);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 4px 9px 7px;
  cursor: pointer;
}
.attn-tok .w { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 0 0 6px 6px; background: var(--accent); transform-origin: left; }
.attn-tok[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.attn-tok.masked { opacity: 0.35; }

/* Curves, points and graphs used across chapters 04–07. */
.demo-svg .curve-fn { fill: none; stroke: var(--fg); stroke-width: 2; }
.demo-svg .dashed { stroke-dasharray: 6 4; }
.demo-svg .pt-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.demo-svg .pt-dot-2 { fill: var(--k2); stroke: var(--bg); stroke-width: 2; }
.demo-svg .pt-star { fill: var(--good); stroke: var(--bg); stroke-width: 2; }
.demo-svg .contour { fill: none; stroke: var(--accent-line); stroke-width: 1; }
.demo-svg .trail { fill: none; stroke: var(--fg); stroke-width: 1.4; stroke-linejoin: round; opacity: 0.8; }
.canvas-holder { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--rule); cursor: crosshair; }

.demo-svg .edge { stroke: var(--rule); stroke-width: 2.5; }
.demo-svg .edge-back { stroke: var(--k2); stroke-width: 2.5; stroke-dasharray: 6 4; }
.demo-svg .node circle { fill: var(--bg); stroke: var(--fg); stroke-width: 1.6; }
.demo-svg .node-input circle { stroke: var(--faint); }
.demo-svg .node-param circle { stroke: var(--accent); stroke-width: 2.4; }
.demo-svg .node-target circle { stroke-dasharray: 4 3; }
.demo-svg .node-active circle { fill: var(--k2-soft); stroke: var(--k2); stroke-width: 2.6; }
.demo-svg .node-label { font: 600 16px var(--serif); fill: var(--fg); }
.demo-svg .node-val { font-size: 11px; fill: var(--muted); }
.demo-svg .node-grad { font-size: 11.5px; font-weight: 700; fill: var(--k2); }
.bp-explain { font: 0.95rem/1.5 var(--mono); color: var(--fg); background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; min-height: 2.8em; margin: 8px 0; overflow-x: auto; white-space: pre-wrap; }

/* Draggable probability bars. */
.bar-editor { cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.demo-svg .ghost-bar { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 4 3; }

/* Vectors, words and the transformed plane. */
.demo-svg .vec line { stroke-width: 2.4; }
.demo-svg .vec-1 line { stroke: var(--k1); }
.demo-svg .vec-1 path, .demo-svg .vec-1 text { fill: var(--k1); }
.demo-svg .vec-2 line { stroke: var(--k2); }
.demo-svg .vec-2 path, .demo-svg .vec-2 text { fill: var(--k2); }
.demo-svg .vec text { font: 600 13px var(--sans); }
.demo-svg .word { cursor: pointer; }
.demo-svg .word circle { fill: var(--faint); }
.demo-svg .word text { font-size: 13px; fill: var(--text); }
.demo-svg .word:hover circle, .demo-svg .word:focus circle { fill: var(--accent); }
.demo-svg .word-a circle, .demo-svg .word-b circle, .demo-svg .word-c circle { fill: var(--k1); }
.demo-svg .word-a text, .demo-svg .word-b text, .demo-svg .word-c text { font-weight: 600; fill: var(--fg); }
.demo-svg .word-best circle { fill: var(--good); }
.demo-svg .word-best text { font-weight: 700; fill: var(--good); }
.demo-svg .result-ring { fill: none; stroke: var(--good); stroke-width: 2; stroke-dasharray: 3 3; }
.demo-svg .tgrid line { stroke: var(--accent-line); stroke-width: 1; }
.demo-svg .tgrid line.axis0 { stroke: var(--accent); stroke-width: 1.6; }
.demo-svg .unit-sq { fill: var(--accent); fill-opacity: 0.14; stroke: var(--accent); stroke-width: 1; }
.demo-svg .shape-f { fill: var(--k3); fill-opacity: 0.55; stroke: var(--k3); stroke-width: 1; }
.tr-grid { grid-template-columns: 3fr 2fr; align-items: start; }
@media (max-width: 640px) { .tr-grid { grid-template-columns: 1fr; } }
.tr-sliders { display: grid; gap: 6px; margin: 10px 0; }
.tr-sliders .ctl-slider { min-width: 0; }
.matrix-view { display: flex; align-items: center; gap: 4px; margin: 12px 0 6px; font: 600 1rem var(--mono); }
.mv-bracket { font: 300 3.4rem/1 var(--sans); color: var(--muted); }
.mv-grid { display: grid; grid-template-columns: auto auto; gap: 4px 18px; text-align: right; }

@media print {
  .site-header, .prev-next, .timeline-filter, .controls { display: none; }
  figure.demo { break-inside: avoid; }
}

/* Theory table on the home page. */
.theory-table { width: 100%; border-collapse: collapse; font: 0.92rem/1.45 var(--sans); margin: 1rem 0 1.6rem; }
.theory-table th { text-align: left; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.theory-table td { padding: 8px; border-bottom: 1px solid var(--grid); vertical-align: top; }
.theory-table td:first-child { font-weight: 650; color: var(--fg); }
.theory-table td:last-child { font-family: var(--mono); text-align: right; }
@media (max-width: 560px) { .theory-table td:nth-child(2) { font-size: 0.85rem; } }

/* Sampling: probability bar plus observed frequency. */
.tok-list-counts .tok-row { grid-template-columns: 7.5em 1fr 4.2em 2.6em; cursor: default; }
.tok-track { position: relative; }
.tok-freq { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--k2); border-radius: 2px; transition: width 0.3s; }
.tok-count { color: var(--k2); }

/* Scaling laws. */
.demo-svg .iso-curve { fill: none; stroke: var(--accent-line); stroke-width: 1.2; }
.demo-svg .iso-label { font-size: 10px; fill: var(--faint); }
.demo-svg .opt-line { fill: none; stroke: var(--good); stroke-width: 1.4; stroke-dasharray: 2 4; }

/* Attention heatmap. */
.attn-grid { grid-template-columns: 3fr 2fr; align-items: start; }
@media (max-width: 640px) { .attn-grid { grid-template-columns: 1fr; } }
.demo-svg .heat-cell { fill: var(--accent); cursor: pointer; }
.demo-svg .heat-masked { fill: var(--grid); }
.demo-svg .heat-label { font: 600 10.5px var(--mono); fill: var(--fg); pointer-events: none; }
.demo-svg .heat-label.on-dark { fill: var(--bg); }
.demo-svg .heat-row { fill: none; stroke: var(--k2); stroke-width: 2; pointer-events: none; }
.mini-table tr.best-row td { color: var(--accent-strong); font-weight: 700; }
.attn-tok .w { transition: transform 0.25s; }

/* Universal approximation, overfitting, shattering. */
.demo-svg .neuron-curve { fill: none; stroke: var(--accent-line); stroke-width: 1; opacity: 0.8; }
.demo-svg .target-curve { fill: none; stroke: var(--faint); stroke-width: 5; stroke-linecap: round; opacity: 0.55; }
.demo-svg .pt-test { fill: var(--faint); opacity: 0.5; }
.demo-svg .interp-line { stroke: var(--k2); stroke-width: 1; stroke-dasharray: 2 3; }
.demo-svg .legend-1 { fill: var(--accent-strong); font-weight: 600; }
.demo-svg .legend-2 { fill: var(--k2); font-weight: 600; }
.shatter-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
@media (max-width: 640px) { .shatter-layout { grid-template-columns: 1fr; } .shatter-main { max-width: 260px; } }
.shatter-main .demo-svg { touch-action: none; }
.shatter-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.shatter-grid .mini { width: 70px; height: 70px; }
.demo-svg .frame { fill: var(--bg); stroke: var(--rule); stroke-width: 1; }
.demo-svg.mini.fail .frame { stroke: var(--bad); stroke-dasharray: 3 3; }
.demo-svg .sep-line { stroke: var(--fg); stroke-width: 1.6; }
.demo-svg .fail-mark { font: 700 13px var(--sans); fill: var(--bad); }
.demo-svg .drag-pt { fill: var(--accent); stroke: var(--bg); stroke-width: 2; cursor: grab; }
.demo-svg .drag-lbl { font: 700 10px var(--sans); fill: var(--bg); pointer-events: none; }

/* ------------------------------------------------------------------ theme: neural networks */
/* A light, thematic layer: a faint weight-matrix dot grid at the top of every page, a small network
   in the home hero, a "next token" caret after the title, and a gradient through the chapter hues. */

:root {
  --theme-dots: rgba(110, 116, 126, 0.22);
  --theme-net: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 220'%3E%3Cg stroke='%238a8f98' stroke-opacity='.35' stroke-width='1'%3E%3Cpath d='M20 40L120 20M20 40L120 75M20 40L120 130M20 40L120 185M20 110L120 20M20 110L120 75M20 110L120 130M20 110L120 185M20 180L120 20M20 180L120 75M20 180L120 130M20 180L120 185M120 20L220 50M120 20L220 110M120 20L220 170M120 75L220 50M120 75L220 110M120 75L220 170M120 130L220 50M120 130L220 110M120 130L220 170M120 185L220 50M120 185L220 110M120 185L220 170M220 50L300 110M220 110L300 110M220 170L300 110'/%3E%3C/g%3E%3Cg fill='%238a8f98' fill-opacity='.45'%3E%3Ccircle cx='20' cy='40' r='6'/%3E%3Ccircle cx='20' cy='110' r='6'/%3E%3Ccircle cx='20' cy='180' r='6'/%3E%3Ccircle cx='120' cy='20' r='6'/%3E%3Ccircle cx='120' cy='75' r='6'/%3E%3Ccircle cx='120' cy='130' r='6'/%3E%3Ccircle cx='120' cy='185' r='6'/%3E%3Ccircle cx='220' cy='50' r='6'/%3E%3Ccircle cx='220' cy='110' r='6'/%3E%3Ccircle cx='220' cy='170' r='6'/%3E%3C/g%3E%3Ccircle cx='300' cy='110' r='8' fill='%23e0794f' fill-opacity='.75'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] { --theme-dots: rgba(160, 166, 176, 0.16); }

main { position: relative; z-index: 0; }
main::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 440px;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(var(--theme-dots) 1.1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}

.brand-mark { background: linear-gradient(135deg, oklch(0.55 0.15 25), oklch(0.5 0.14 292)); color: #fff; }

/* The home hero: a small network drawn behind the title, and a caret as if the model were still writing. */
.home { position: relative; }
.home::before {
  content: "";
  position: absolute;
  top: -0.6rem;
  right: -150px;
  width: 280px;
  height: 192px;
  background: var(--theme-net) no-repeat center / contain;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 900px) { .home::before { opacity: 0.45; right: 0; width: 220px; height: 150px; } }
.hero-title::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.8em;
  margin-left: 0.08em;
  vertical-align: -0.02em;
  background: oklch(0.6 0.15 25);
  animation: blink 1.1s steps(2) infinite;
}
@media (prefers-reduced-motion: reduce) { .hero-title::after { animation: none; } }

/* The chain of chapters as a single signal flowing through every layer. */
.chain::before {
  background: linear-gradient(oklch(0.72 0.07 262), oklch(0.72 0.12 25), oklch(0.74 0.12 105), oklch(0.72 0.11 185),
    oklch(0.7 0.12 252), oklch(0.7 0.13 340));
  width: 3px;
  border-radius: 2px;
}
.chain-compact li::before { background: linear-gradient(90deg, oklch(0.8 0.05 262), oklch(0.8 0.08 25), oklch(0.8 0.08 150), oklch(0.8 0.08 292), oklch(0.8 0.08 340)); }
:root[data-theme="dark"] .chain-compact li::before { background: linear-gradient(90deg, oklch(0.4 0.05 262), oklch(0.42 0.08 25), oklch(0.42 0.08 150), oklch(0.42 0.08 292), oklch(0.42 0.08 340)); }

/* ------------------------------------------------------------------ title screen (home) */
/* The home page is a single screen: the copy on the left and, behind it, a live figure on a canvas
   (js/demos/splash.js). On narrow screens the canvas goes under the copy. The guided tour starts on the intro page. */

.splash {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: max(calc(100svh - 54px), 600px);
  overflow: hidden;
  font-family: var(--sans);
  background: var(--bg);
}
.splash-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; cursor: crosshair; }
.splash-copy {
  position: relative;
  z-index: 1;
  width: min(44vw, 580px);
  margin-left: max(28px, calc((100vw - 1320px) / 2));
  padding-top: clamp(28px, 9vh, 110px);
  pointer-events: none;
}
.splash-copy a, .splash-copy button, .splash-copy input { pointer-events: auto; }
.splash-kicker { margin: 0 0 0.8rem; font: 700 0.76rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.splash-title { margin: 0 0 1rem; font: 800 clamp(2.8rem, 6vw, 4.9rem)/0.98 var(--sans); letter-spacing: -0.04em; color: var(--fg); }
.splash-mark {
  display: inline-grid;
  place-items: center;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.16em;
  vertical-align: -0.08em;
  border-radius: 0.2em;
  background: var(--fg);
  color: var(--bg);
  font: 0.6em/1 var(--mathfont, var(--serif));
  overflow: hidden;
}
.splash-sub { display: block; margin-top: 0.14em; font-size: 0.5em; font-weight: 750; letter-spacing: -0.02em; color: var(--accent-strong); }
.splash-lead { margin: 0; font: 1.14rem/1.6 var(--serif); color: var(--text); max-width: 34rem; }
.splash-hint { margin: 1.1rem 0 0; font-size: 0.84rem; color: var(--muted); }

.splash-hud {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 12px max(20px, calc((100vw - 1320px) / 2)) 16px;
  font-size: 0.8rem;
}
.splash-caption {
  flex: 1 1 260px;
  margin: 0;
  padding: 5px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.splash-opts, .splash-ctrls { display: flex; flex-wrap: wrap; gap: 6px; }
.splash-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(6px);
  color: var(--fg);
  font: 650 0.78rem var(--sans);
  cursor: pointer;
}
.splash-btn:hover { border-color: var(--faint); }
.splash-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.splash-btn .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }

.chapters-menu li.menu-intro a { font-weight: 650; }

@media (max-width: 899px) {
  .splash { min-height: 0; }
  .splash-copy { order: 1; width: auto; margin: 0; padding: 30px 20px 14px; }
  .splash-canvas { order: 2; position: relative; height: clamp(380px, 62svh, 520px); }
  .splash-hud { order: 3; position: relative; padding: 10px 16px 16px; }
}
.opt-sgd .dot { background: #5ec8f2; }
.opt-momentum .dot { background: #ffb347; }
.opt-adam .dot { background: #ff6fa5; }
.splash-mark { background: linear-gradient(135deg, oklch(0.55 0.15 25), oklch(0.5 0.14 292)); color: #fff; }