/* CEG5305 course site. Plain CSS, no build step. */
:root {
  --blue: #003d7c;
  --blue-2: #1f5aa6;
  --orange: #ef7c00;
  --orange-2: #b85f00;
  --deep: #17375e;
  --bg: #fbfcfd;
  --panel: #eef2f7;
  --panel-2: #e3e9f1;
  --card: #ffffff;
  --text: #1b2430;
  --muted: #5a6877;
  --line: #d4dce6;
  --good: #1f7a4d;
  --bad: #b3261e;
  --tint: #fff3e5;
  --code: #f3f5f8;
  --shadow: 0 1px 2px rgba(16, 32, 56, .06), 0 4px 16px rgba(16, 32, 56, .05);
  --radius: 10px;
  --maxw: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --blue: #7fb2ff;
    --blue-2: #9cc4ff;
    --orange: #ffa53d;
    --orange-2: #ffc27a;
    --deep: #cfe0f7;
    --bg: #0f141b;
    --panel: #18212c;
    --panel-2: #212c39;
    --card: #141b24;
    --text: #e4eaf1;
    --muted: #9aa8b7;
    --line: #2d3947;
    --good: #5cc98f;
    --bad: #ff8a80;
    --tint: #2a2013;
    --code: #1b2430;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.62 var(--font);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--blue-2); text-underline-offset: 2px; }
a:hover { color: var(--orange-2); }
code, kbd { font-family: var(--mono); font-size: .88em; background: var(--code); padding: .08em .35em; border-radius: 4px; }
h1, h2, h3, h4 { line-height: 1.25; color: var(--deep); margin: 1.6em 0 .5em; }
h1 { font-size: 2.3rem; margin-top: .2em; letter-spacing: -.01em; }
h2 { font-size: 1.65rem; padding-top: .4em; border-top: 1px solid var(--line); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.02rem; margin-top: 1.2em; }
p, li { max-width: 72ch; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* ── top bar ─────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--blue); color: #fff;
  border-bottom: 3px solid var(--orange);
}
@media (prefers-color-scheme: dark) { .topbar { background: #0b2a52; } }
.topbar .inner {
  max-width: var(--maxw); margin: 0 auto; padding: .55rem 16px;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar .brand { font-weight: 700; letter-spacing: .01em; }
.topbar .brand span { font-weight: 400; opacity: .8; }
.topbar nav { margin-left: auto; display: flex; gap: 1.1rem; font-size: .92rem; flex-wrap: wrap; }
.topbar nav a { opacity: .9; }
.topbar nav a:hover { opacity: 1; text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: 16px; }
.crumbs { font-size: .9rem; color: var(--muted); margin: 1.2rem 0 0; }
.crumbs a { color: var(--muted); }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero { padding-block: 1.6rem 1.2rem; }
.badge {
  display: inline-block; background: var(--orange); color: #fff;
  font-weight: 700; font-size: .85rem; letter-spacing: .03em;
  padding: .22rem .65rem; border-radius: 4px;
}
.lede { font-size: 1.18rem; color: var(--muted); max-width: 64ch; }
.meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; color: var(--muted); font-size: .95rem; margin-top: .8rem; }
.meta b { color: var(--text); font-weight: 600; }

.question {
  margin: 1.4rem 0; padding: 1.1rem 1.3rem; border-left: 5px solid var(--orange);
  background: var(--tint); border-radius: 0 var(--radius) var(--radius) 0;
}
.question .q { font-size: 1.35rem; font-weight: 700; color: var(--deep); }
.question p { margin: .3rem 0 0; }

/* ── layout with side TOC ────────────────────────────────────────────── */
.layout { display: block; }
.toc { display: none; }
@media (min-width: 1180px) {
  .layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2.4rem; }
  .toc { display: block; position: sticky; top: 4.2rem; align-self: start; max-height: calc(100vh - 5rem); overflow: auto; font-size: .88rem; padding-top: 1.6rem; }
  .toc ol { list-style: none; padding: 0; margin: 0; }
  .toc li { margin: .15rem 0; }
  .toc a { color: var(--muted); text-decoration: none; display: block; padding: .15rem .5rem; border-left: 2px solid transparent; }
  .toc a:hover, .toc a.active { color: var(--blue); border-left-color: var(--orange); }
  .toc .sub a { padding-left: 1.2rem; font-size: .84rem; }
}

/* ── part headers ────────────────────────────────────────────────────── */
.part {
  margin: 3rem 0 1rem; padding: 1.3rem 1.4rem; border-radius: var(--radius);
  background: var(--blue); color: #fff;
}
@media (prefers-color-scheme: dark) { .part { background: #0b2a52; } }
.part .label { color: var(--orange); font-weight: 700; letter-spacing: .06em; font-size: .85rem; }
.part h2 { color: #fff; border: 0; margin: .2rem 0 .3rem; padding: 0; font-size: 1.8rem; }
.part p { margin: 0; opacity: .88; }

/* ── cards, callouts, tables ─────────────────────────────────────────── */
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; box-shadow: var(--shadow);
}
.card h4 { margin: 0 0 .35rem; }
.card p { margin: .2rem 0; }
.card.accent { border-color: var(--orange); background: var(--tint); }
.card .tag { font-size: .78rem; font-weight: 700; letter-spacing: .05em; color: var(--orange-2); text-transform: uppercase; }

.verdict { display: grid; gap: .5rem; margin: .8rem 0; }
.verdict div { padding: .55rem .9rem; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
.verdict .fixed { border-color: var(--orange); background: var(--tint); }
.verdict b { margin-right: .5rem; }
.verdict .fixed b { color: var(--orange-2); }
.verdict .not b { color: var(--blue); }

.note { font-size: .9rem; color: var(--muted); }
.src { font-size: .85rem; color: var(--muted); font-style: italic; margin-top: .4rem; }
.callout { padding: .9rem 1.1rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); margin: 1rem 0; }
.callout.warn { background: var(--tint); border-color: var(--orange); }

.table-wrap { overflow-x: auto; margin: 1rem 0; position: relative; }
/* KaTeX's hidden MathML is absolutely positioned; anchor it so it cannot widen the page */
.katex { position: relative; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; }
tr.hl td { background: var(--tint); font-weight: 600; }

.timeline { list-style: none; padding: 0; margin: 1rem 0; border-left: 3px solid var(--line); }
.timeline li { position: relative; padding: .25rem 0 .75rem 1.2rem; max-width: none; }
.timeline li::before { content: ""; position: absolute; left: -8px; top: .6rem; width: 13px; height: 13px; border-radius: 50%; background: var(--panel-2); border: 2px solid var(--line); }
.timeline li.key::before { background: var(--orange); border-color: var(--orange); }
.timeline .yr { font-weight: 700; color: var(--blue); margin-right: .5rem; font-variant-numeric: tabular-nums; }

/* ── visualizations ──────────────────────────────────────────────────── */
.viz {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); margin: 1.2rem 0 1.6rem; overflow: hidden;
}
.viz-head { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: var(--panel); }
.viz-head .t { font-weight: 700; color: var(--deep); }
.viz-head .s { font-size: .88rem; color: var(--muted); }
.viz-body { padding: .9rem 1rem 1rem; }
.viz-body svg { display: block; width: 100%; height: auto; }
.viz-foot { padding: .55rem 1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); background: var(--panel); }

.controls { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: .2rem 0 .8rem; }
.controls label { font-size: .9rem; color: var(--muted); display: inline-flex; align-items: center; gap: .45rem; }
.controls input[type=range] { width: 150px; accent-color: var(--orange); }
.controls output { font-family: var(--mono); font-size: .88rem; color: var(--text); min-width: 3.2em; display: inline-block; }
.controls select { font: inherit; font-size: .9rem; padding: .25rem .4rem; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--text); }
button, .btn {
  font: inherit; font-size: .9rem; cursor: pointer;
  padding: .38rem .8rem; border-radius: 6px;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { border-color: var(--orange); color: var(--text); }
button.primary, .btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
@media (prefers-color-scheme: dark) { button.primary, .btn.primary { color: #0f141b; } }
button.primary:hover, .btn.primary:hover { background: var(--orange); border-color: var(--orange); }
button[aria-pressed=true] { background: var(--orange); border-color: var(--orange); color: #fff; }
button:disabled { opacity: .45; cursor: default; }

.readout { font-family: var(--mono); font-size: .92rem; background: var(--code); border-radius: 6px; padding: .5rem .7rem; overflow-x: auto; white-space: pre-wrap; }
.readout b { color: var(--orange-2); }
.two { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 820px) { .two { grid-template-columns: 1fr; } }

/* svg vocabulary — every visualization draws with these classes */
.s-box { fill: var(--panel); stroke: var(--line); stroke-width: 1.2; }
.s-box.on { fill: var(--tint); stroke: var(--orange); stroke-width: 2; }
.s-box.blue { fill: var(--blue); stroke: var(--blue); }
.s-box.clickable { cursor: pointer; }
.s-box.clickable:hover { stroke: var(--orange); stroke-width: 2; }
.s-edge { stroke: var(--muted); stroke-width: 1.4; fill: none; }
.s-edge.on { stroke: var(--orange); stroke-width: 2.6; }
.s-edge.faint { stroke: var(--line); stroke-width: 1; }
.s-edge.dash { stroke-dasharray: 5 4; }
.s-text { fill: var(--text); font-family: var(--font); font-size: 13px; }
.s-text.m { fill: var(--muted); font-size: 11.5px; }
.s-text.b { font-weight: 700; }
.s-text.w { fill: #fff; }
.s-text.o { fill: var(--orange-2); font-weight: 700; }
.s-text.mono { font-family: var(--mono); font-size: 12px; }
.s-axis { stroke: var(--line); stroke-width: 1; }
.s-line { fill: none; stroke-width: 2.4; }
.s-bar { fill: var(--blue-2); opacity: .55; }
.s-bar.on { fill: var(--orange); opacity: .95; }
.s-bar.hi { fill: var(--orange); opacity: .45; }
.s-arrow { fill: var(--muted); }
.s-arrow.on { fill: var(--orange); }

/* buttons set their own display, which would otherwise override the hidden attribute */
[hidden] { display: none !important; }

/* citations and the reference list */
a[data-ref] { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--muted); text-underline-offset: 3px; }
a[data-ref]:hover { color: var(--orange-2); }
.refs-list { list-style: none; padding: 0; }
.refs-list li { padding-left: 1.5em; text-indent: -1.5em; margin-bottom: .35rem; }

/* history reel: one node-link sketch per timeline step, the list rolling beneath */
.reel { display: flex; flex-direction: column; }
.reel-stage { position: relative; flex: none; height: 18rem; overflow: hidden; cursor: pointer; transition: opacity .4s; }
.reel-frame {
  position: absolute; left: 50%; top: 0; width: 22rem; margin: 0; transform-origin: 50% 45%;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1), opacity .7s;
}
.reel-frame svg { display: block; width: 100%; height: auto; }
.reel-frame figcaption { text-align: center; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.reel-frame.cur figcaption { color: var(--blue); }
.reel-badge { position: absolute; right: 0; top: 0; display: none; font-size: .8rem; color: var(--muted); background: var(--panel); border-radius: 999px; padding: .1rem .7rem; }
.reel.paused .reel-badge { display: block; }
.reel-list {
  position: relative; flex: 1; min-height: 0; overflow: hidden; transition: opacity .4s;
  -webkit-mask-image: linear-gradient(transparent, #000 24%, #000 68%, transparent);
  mask-image: linear-gradient(transparent, #000 24%, #000 68%, transparent);
}
.reel-list > ol { margin: 0; transition: transform .7s cubic-bezier(.4, 0, .2, 1); }
.reel-list li { cursor: pointer; opacity: .4; transition: opacity .5s; }
.reel-list li::before { transition: transform .5s, background-color .5s, border-color .5s; }
.reel-list li.key::before { background: var(--panel-2); border-color: var(--line); }
.reel-list li.now { opacity: 1; }
.reel-list li.now::before { background: var(--orange); border-color: var(--orange); transform: scale(1.35); }
.reel.fade .reel-stage, .reel.fade .reel-list { opacity: 0; }
.reel.instant, .reel.instant * { transition: none !important; }
.r-node { fill: var(--card); stroke: var(--muted); stroke-width: 2; }
.r-node.tok { fill: var(--panel-2); }
.r-node.h { fill: var(--blue-2); stroke: var(--blue-2); }
.r-node.dec { fill: var(--deep); stroke: var(--deep); }
.r-node.emb { fill: var(--good); stroke: var(--good); }
.r-node.out { fill: var(--orange); stroke: var(--orange); }
.r-node.gate { stroke: var(--orange); stroke-width: 3; }
.r-node.faint { opacity: .3; }
.r-node.op { fill: var(--card); stroke: var(--muted); }
.r-node.ctx { fill: var(--orange); stroke: var(--orange); }
.r-node.slot { fill: var(--card); stroke-width: 2.5; stroke-dasharray: 4 3; }
.r-group { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.r-label { font-family: var(--font); font-size: 18px; font-weight: 700; fill: var(--text); text-anchor: middle; dominant-baseline: central; }
.r-label.w { fill: #fff; }
.r-label.o { fill: var(--orange-2); }
.r-label.m { fill: var(--muted); font-size: 16px; font-weight: 600; }
.r-edge { fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; }
.r-edge.on, .r-edge.attn { stroke: var(--orange); stroke-width: 3; }
.r-edge.thick { stroke-width: 6; }
.r-edge.faint { opacity: .35; stroke-width: 1.5; }
.r-edge.thin { stroke-width: 1; }
.r-edge.dash { stroke-dasharray: 5 5; }
.r-edge.win { stroke: var(--blue-2); stroke-width: 4; }
.r-edge.pair { stroke: var(--panel-2); stroke-width: 42; }
.reel-frame.cur .flow { animation: r-build .45s ease-out both; animation-delay: calc(var(--d) * 110ms); }
@keyframes r-build { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reel, .reel * { transition: none !important; animation: none !important; } }

/* heatmap tables for matrices */
.mats { display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; align-items: flex-start; }
.mat { display: inline-block; }
.mat .cap { font-size: .8rem; color: var(--muted); margin-bottom: .2rem; font-family: var(--mono); }
.mat table { border-collapse: separate; border-spacing: 2px; width: auto; font-size: .72rem; font-family: var(--mono); }
.mat td, .mat th { border: 0; padding: 0; text-align: center; }
.mat td { width: 2.6em; height: 1.9em; border-radius: 3px; color: var(--text); }
.mat th { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; padding: 0 .25em; font-size: .72rem; }
.mat td.masked { background: repeating-linear-gradient(45deg, var(--panel), var(--panel) 3px, var(--panel-2) 3px, var(--panel-2) 6px); color: var(--muted); }
.mat tr.hl td { outline: 2px solid var(--orange); }
.stage { opacity: .35; transition: opacity .2s; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: .15em 0; }
.card .katex-display > .katex { font-size: 1.02em; }
.mat.off { opacity: .3; }
.mat tr.dim td, .mat tr.dim th { opacity: .18; }
.mat tr.focus th { color: var(--text); font-weight: 700; }
.mat tr.focus td { box-shadow: inset 0 0 0 1.5px var(--text); }
.mat.cmp .verdict { margin-top: .3rem; font-family: var(--mono); font-weight: 700; color: var(--orange-2, var(--orange)); }

/* nanoGPT map: component badges, the parts table, the small corner copy on slides */
.badge circle { fill: var(--blue); }
.badge text { fill: #fff; font-size: 12px; font-weight: 700; font-family: var(--font); }
.badge.on circle { fill: var(--orange); }
table.parts { border-collapse: collapse; width: 100%; }
[data-viz=nanoMap] .two { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
[data-viz=nanoMap] .two svg { width: 100%; max-height: 520px; }
table.parts td { padding: .45rem .5rem; border: 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.parts tr { cursor: pointer; }
table.parts tr.on { background: var(--tint); }
table.parts td.id { font-weight: 700; color: var(--orange-2); font-family: var(--mono); }
table.parts td b { display: block; }
table.parts td span { color: var(--muted); font-size: .92em; }
table.parts td.code a { display: block; white-space: nowrap; }
.minimap .s-box { stroke: var(--muted); stroke-width: 5; }
.minimap .s-box.on { fill: var(--orange); stroke: var(--orange); }
.minimap .s-edge { stroke-width: 5; }
.minimap .s-edge.on { stroke-width: 12; }
.minimap .cap { font-size: .8rem; color: var(--muted); text-align: right; }
.minimap .cap span, .minimap .cap b { display: block; }
.minimap .cap b { color: var(--orange-2); }
.why-gelu p { margin: .3rem 0; }
.why-gelu p.f { text-align: center; margin: .5rem 0; }
.res-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr); gap: 1rem; align-items: center; }
.ln-note { font-size: .92rem; color: var(--muted); text-align: center; }
.stage.on { opacity: 1; }

.steps { display: flex; flex-wrap: wrap; gap: .35rem; }
.steps button { font-size: .82rem; padding: .25rem .6rem; }

/* token chips */
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; }
.chip { font-family: var(--mono); font-size: .88rem; padding: .2rem .5rem; border-radius: 5px; border: 1px solid var(--line); background: var(--panel); }
.chip.ctx { border-color: var(--orange); background: var(--tint); font-weight: 700; }
.chip.new { background: var(--blue); border-color: var(--blue); color: #fff; }
@media (prefers-color-scheme: dark) { .chip.new { color: #0f141b; } }
button.chip { cursor: pointer; }

.bars { display: grid; grid-template-columns: max-content 1fr max-content; gap: .25rem .6rem; align-items: center; font-size: .9rem; }
.bars .bar { height: .8rem; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.bars .bar i { display: block; height: 100%; background: var(--blue-2); }
.bars .lab { font-family: var(--mono); }
.bars .val { font-family: var(--mono); color: var(--muted); font-size: .85rem; }

/* ── embedded demos ──────────────────────────────────────────────────── */
.demo { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); margin: 1rem 0 1.4rem; box-shadow: var(--shadow); }
.demo-head { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; padding: .65rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line); }
.demo-head .t { font-weight: 700; color: var(--deep); }
.demo-head .by { font-size: .85rem; color: var(--muted); }
.demo-head .act { margin-left: auto; display: flex; gap: .5rem; }
.demo-stage { position: relative; background: var(--panel); aspect-ratio: 16 / 10; max-height: 78vh; }
.demo-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.demo-stage .gate { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 1rem; gap: .6rem; }
.demo-stage .gate p { margin: 0 auto; color: var(--muted); font-size: .92rem; max-width: 52ch; }
.demo-foot { padding: .55rem 1rem; font-size: .85rem; color: var(--muted); border-top: 1px solid var(--line); }
@media (max-width: 640px) { .demo-stage { aspect-ratio: 3 / 4; } }

/* ── lecture list on the home page ───────────────────────────────────── */
.lectures { display: grid; gap: .8rem; }
.lec { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: .3rem 1rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.lec .id { font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.lec .ti { font-weight: 600; }
.lec .sub { grid-column: 2; font-size: .9rem; color: var(--muted); }
.lec .st { font-size: .82rem; color: var(--muted); }
.lec.live { border-color: var(--orange); }
.lec.live .st { color: var(--orange-2); font-weight: 700; }
.lec .st a { color: inherit; text-decoration: none; white-space: nowrap; }
.lec .st a + a { margin-left: .9rem; }
.lec .st a:hover { text-decoration: underline; }
@media (max-width: 640px) { .lec { grid-template-columns: 1fr; } .lec .sub { grid-column: 1; } }

footer { margin-top: 4rem; padding-block: 1.5rem 2.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
footer .wrap > * { max-width: none; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 560px) { .topbar .brand span { display: none; } }

/* Transformers beyond language: six sketches (lecture page; the slide overrides in polish.css) */
.beyond-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px 24px; margin: 1rem 0; }
.beyond-grid .b-card { border-top: 1px solid var(--line); padding-top: 8px; }
.beyond-grid .b-card .tag { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.beyond-grid .b-card h4 { margin: 2px 0 6px; font-weight: 500; }
.beyond-grid .b-card p { font-size: .92rem; margin: 6px 0 0; }
[data-viz=beyondArch] svg { width: 100%; height: auto; display: block; }
[data-viz=beyondArch] .s-text.cap { font-size: 14px; }
[data-viz=beyondArch] .s-text.core { fill: #fff; font-size: 17px; font-weight: 700; }
[data-viz=beyondArch] .s-text.core-sub { fill: #dbe7f3; font-size: 13px; }
[data-viz=beyondArch] .s-text.out { font-size: 16px; font-weight: 700; }
[data-viz=beyondArch] .s-text.tok-t { font-size: 14px; }
[data-viz=beyondArch] .s-text.aa { font-size: 10.5px; font-weight: 700; }
[data-viz=beyondArch] .series { stroke: var(--blue-2); }
[data-viz=beyondArch] .series.fut { stroke: var(--orange); }
[data-viz=beyondArch] .wave { fill: var(--blue-2); stroke: var(--blue-2); stroke-width: .6; }
[data-viz=beyondArch] .cut { stroke: #fff; stroke-width: 1.4; }
[data-viz=beyondArch] .s-text.tok-t.sm { font-size: 12.5px; }
pre.cmd { font-family: var(--mono); font-size: .86rem; line-height: 1.5; background: var(--code); border-radius: 6px; padding: .6rem .8rem; overflow-x: auto; white-space: pre; }
pre.cmd code { font-size: 1em; background: none; padding: 0; }
.small-curve { max-width: 480px; margin: 1rem 0; }
[data-viz=smallGptCurve] svg { width: 100%; height: auto; display: block; }
[data-viz=smallGptCurve] .s-text.val { fill: var(--orange); font-weight: 600; }
[data-viz=smallGptCurve] .s-text.tr { fill: var(--blue-2); font-weight: 600; }
.reel-controls { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 4px 0 6px; }
.reel-controls .reel-count { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3.5em; }
.reel-stage { cursor: pointer; }
.r-group.gone { fill: none; stroke-dasharray: 6 5; opacity: .6; }
.r-label.sm { font-size: 15px; }
/* pen-move stepper (slide 24) */
[data-viz=penSteps] svg { width: 100%; height: auto; display: block; background: var(--panel); border-radius: 8px; }
[data-viz=penSteps] .pen-ink { fill: none; stroke: var(--deep, #16324f); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
[data-viz=penSteps] .pen-jump { stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 3 4; }
[data-viz=penSteps] .pen-pdf { fill: var(--orange); stroke: none; }
[data-viz=penSteps] .pen-next { fill: var(--orange); }
[data-viz=penSteps] .pen-tip { fill: var(--blue-2); stroke: #fff; stroke-width: 1.5; }
/* click-to-play YouTube clip */
.yt { display: flex; flex-direction: column; gap: 6px; }
.yt .yt-poster, .yt iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; }
.yt[data-vertical] .yt-poster, .yt[data-vertical] iframe { aspect-ratio: 9 / 16; }
.yt .yt-poster { position: relative; cursor: pointer; background: #000 center / cover no-repeat; padding: 0; }
.yt .yt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #fff; font-size: 28px; line-height: 64px; text-align: center; padding-left: 4px; }
.yt .yt-poster:hover .yt-play { background: var(--orange); }
.yt .yt-link { font-size: .8rem; color: var(--muted); }
[data-viz=attnMatrix] .s-text.mean { font-size: 15px; font-weight: 700; fill: var(--orange-2, #b35c00); }
/* slide 44: the ConvNeXt claims, shown on the staircase */
[data-viz=convnextClaims] svg { width: 100%; height: auto; display: block; }
[data-viz=convnextClaims] .cx-noattn { fill: var(--blue-2); }
[data-viz=convnextClaims] .cx-dim { fill: var(--line); }
[data-viz=convnextClaims] .cx-hi { fill: var(--orange); }
[data-viz=convnextClaims] .cx-swin { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 6 4; }
[data-viz=convnextClaims] .cx-swin.on { stroke: var(--orange); stroke-width: 3; }
[data-viz=convnextClaims] .s-text.cx-swin-t { fill: var(--orange-2, #b35c00); font-weight: 700; }
[data-viz=convnextClaims] .s-text.cx-lab { font-size: 12.5px; }
[data-viz=convnextClaims] .s-text.cx-head { font-size: 15px; font-weight: 700; fill: var(--text); }
[data-claim] { cursor: pointer; border-radius: 6px; padding: 4px 8px; margin-left: -8px; }
[data-claim]:hover { background: var(--panel); }
[data-claim].on { background: var(--panel); box-shadow: inset 4px 0 0 var(--orange); }
/* slide 41: ConvNet vs ViT sketch */
[data-viz=convVsVit] svg { width: 100%; height: auto; display: block; }
[data-viz=convVsVit] .cvv-group { fill: var(--panel); stroke: var(--line); stroke-width: 1.4; }
[data-viz=convVsVit] .s-text.cvv { font-size: 14px; }
[data-viz=convVsVit] .s-text.cvv-title { font-size: 17px; font-weight: 700; fill: var(--deep, #16324f); }
[data-viz=convVsVit] .s-text.cvv-sub { font-size: 13.5px; fill: var(--muted); font-weight: 600; }
[data-viz=convVsVit] .s-text.cvv-out { font-size: 16px; font-weight: 700; }
[data-viz=convVsVit] .cvv-badge { fill: var(--orange); }
[data-viz=convVsVit] .s-text.cvv-num { fill: #fff; font-size: 12px; font-weight: 700; }
[data-viz=convVsVit] .cvv-cut { stroke: #fff; stroke-width: 1.2; }

/* How neural models learn: gradient descent and backpropagation, side by side */
.learn-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.learn-row .tag { font-size: .8rem; color: var(--muted); font-weight: 600; margin-bottom: .2rem; }
.learn-row svg { display: block; width: 100%; height: auto; }
.learn-row .readout { white-space: pre-line; }
.learn-fig { margin: 1rem 0; }
@media (max-width: 720px) { .learn-row { grid-template-columns: 1fr; } }