/* ============================================================
   Per-slide styles. One block per slide, namespaced by #sNN.
   Order matches narrative order. Each block can be edited in
   isolation without touching the others.
   ============================================================ */

/* ============================================================
   Slide 1 — Title
   ============================================================ */
#s01 {
  justify-content: center;
  align-items: flex-start;
  padding: 0 80px;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(255,107,31,0.10), transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(220,38,38,0.04), transparent 60%),
    var(--bg);
}
#s01 .marker {
  display: flex; gap: 14px; align-items: center; margin-bottom: 28px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-dim);
}
#s01 .marker .dot { width: 8px; height: 8px; background: var(--accent); }
#s01 h1 {
  font-family: var(--display);
  font-size: 220px;
  line-height: 0.94;
  letter-spacing: -0.01em;
  color: var(--text);
  text-transform: uppercase;
}
#s01 .sub {
  margin-top: 12px;
  font-family: var(--display);
  font-size: 56px;
  line-height: 1;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
#s01 .deck-meta { margin-top: 44px; display: flex; gap: 56px; align-items: flex-start; }
#s01 .meta-col h4 {
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--text-muted); margin-bottom: 8px;
}
#s01 .meta-col p {
  font-size: 18px; color: var(--text);
  max-width: 360px; line-height: 1.4;
}

/* Decorative dot grid (populated by scripts/generators.js) */
#s01 .dots {
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 18px;
  width: 380px;
  opacity: 0.5;
}
#s01 .dots span {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  display: block;
  opacity: var(--o, 0.4);
}

/* Decorative gauntlet glyph corner (currently unused but reserved) */
#s01 .glyph {
  position: absolute;
  right: -120px; top: 50%;
  transform: translateY(-50%);
  width: 700px; height: 700px;
  opacity: 0.08;
  pointer-events: none;
}

/* ============================================================
   Slide 2 — Why this matters
   ============================================================ */
#s02 .dom-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  flex: 1;
  align-content: start;
}
#s02 .dom {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 24px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: center;
}
#s02 .dom .ico {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-ghost);
  border: 1px solid var(--accent);
  color: var(--accent);
}
#s02 .dom h3 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
#s02 .dom p  { font-size: 15px; color: var(--text-dim); }
#s02 .pull {
  margin-top: 28px;
  padding: 22px 28px;
  border-left: 3px solid var(--accent);
  background: var(--accent-ghost);
  font-family: var(--display);
  font-size: 32px;
  text-transform: uppercase;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
#s02 .pull span { color: var(--accent); }

/* ============================================================
   Slide 3 — The problem (sequence modeling)
   ============================================================ */
#s03 .seq { margin-top: 12px; display: flex; gap: 10px; align-items: stretch; }
#s03 .tok {
  flex: 1;
  height: 110px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: 44px;
  color: var(--text);
  text-transform: uppercase;
  position: relative;
}
#s03 .tok.target {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
#s03 .tok.target::before {
  content: 'PREDICT';
  position: absolute;
  top: -22px;
  left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
}
#s03 .quote {
  margin-top: 36px;
  font-family: var(--display);
  font-size: 44px;
  text-transform: uppercase;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.05;
}
#s03 .quote span { color: var(--accent); }
#s03 .hard-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 36px;
}
#s03 .hard {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  align-items: baseline;
}
#s03 .hard .n {
  font-family: var(--mono); font-size: 13px;
  color: var(--accent); letter-spacing: 0.1em;
}
#s03 .hard p { font-size: 16px; }
#s03 .hard strong { color: var(--text); }

/* ============================================================
   Slide 4 — Before transformers (RNNs)
   ============================================================ */
#s04 .rnn-chain {
  margin-top: 24px;
  display: flex; align-items: stretch; justify-content: center;
  gap: 0;
}
#s04 .rnn-col {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; max-width: 200px; position: relative;
}
#s04 .rnn-cell {
  width: 130px; height: 100px;
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--display);
  font-size: 30px;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase;
}
#s04 .rnn-down {
  width: 1px; height: 24px;
  background: var(--border-3);
  margin: 8px 0;
  position: relative;
}
#s04 .rnn-down::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 6px; height: 6px;
  border-right: 1px solid var(--border-3);
  border-bottom: 1px solid var(--border-3);
  transform: translateX(-50%) rotate(45deg);
}
#s04 .rnn-tok {
  font-family: var(--mono); font-size: 14px;
  color: var(--text-2);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 8px 14px;
  min-width: 80px;
  text-align: center;
}
#s04 .rnn-arrow {
  position: absolute;
  top: 45px; right: -16px;
  width: 32px; height: 2px;
  background: var(--accent);
}
#s04 .rnn-arrow::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--accent);
  transform: translateY(-50%);
}
#s04 .rnn-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  margin-top: -4px; margin-bottom: 12px;
}
#s04 .core-idea {
  margin-top: 36px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  padding: 22px 28px;
}
#s04 .core-idea h4 {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
#s04 .core-idea p { font-size: 17px; color: var(--text-2); line-height: 1.55; }
#s04 .core-idea .small { margin-top: 10px; font-size: 14px; color: var(--text-muted); font-style: italic; }

/* ============================================================
   Slide 5 — Two fatal flaws
   ============================================================ */
#s05 .flaws { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; flex: 1; }
#s05 .flaw {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--crimson);
  padding: 32px;
  display: flex; flex-direction: column;
}
#s05 .flaw .marker {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 12px;
}
#s05 .flaw h3 {
  font-family: var(--display);
  font-size: 56px;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 20px;
}
#s05 .flaw .why { font-size: 17px; color: var(--text-2); margin-bottom: 18px; }
#s05 .flaw .impact-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
#s05 .flaw .impact { font-size: 15px; color: var(--text-dim); font-style: italic; }

/* ============================================================
   Slide 6 — Attention is all you need (section break)
   ============================================================ */
#s06 {
  justify-content: center;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255,107,31,0.10), transparent 60%),
    var(--bg);
}
#s06 .year {
  font-family: var(--mono); font-size: 14px;
  letter-spacing: 0.3em; color: var(--accent);
  margin-bottom: 32px;
}
#s06 h1 {
  font-family: var(--display);
  font-size: 168px;
  line-height: 0.96;
  text-transform: uppercase;
}
#s06 .lead {
  margin-top: 36px;
  font-size: 24px; line-height: 1.45;
  max-width: 1000px;
  color: var(--text);
}
#s06 .lead span { color: var(--accent); }
#s06 .cite {
  margin-top: 40px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--text-muted); text-transform: uppercase;
}
#s06 .punch {
  margin-top: 28px;
  font-family: var(--display);
  font-size: 36px;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.1;
}

/* ============================================================
   Slide 7 — Attention intuitively
   ============================================================ */
#s07 .sent {
  margin: 28px 0 0;
  display: flex; gap: 8px;
  position: relative;
  padding-top: 60px;
}
#s07 .word {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 16px 8px;
  text-align: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  color: var(--text-2);
}
#s07 .word.target {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 700;
}
#s07 .word.match {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}
#s07 .arrows {
  position: absolute; left: 0; right: 0; top: 0; height: 60px;
  pointer-events: none;
}
#s07 .qkv {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
#s07 .role {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: center;
}
#s07 .role .letter {
  width: 56px; height: 56px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--display);
  font-size: 36px;
  display: flex; align-items: center; justify-content: center;
}
#s07 .role h4 { font-family: var(--display); font-size: 22px; text-transform: uppercase; margin-bottom: 4px; }
#s07 .role p  { font-size: 14px; color: var(--text-dim); font-style: italic; }

/* ============================================================
   Slide 8 — Self-attention formally
   ============================================================ */
#s08 .formula {
  margin: 24px 0 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 28px 36px;
  font-family: var(--mono);
  font-size: 36px;
  font-weight: 500;
  color: var(--text);
  text-align: center;
}
#s08 .formula .qk { color: var(--accent); font-weight: 700; }
#s08 .formula .sq { color: var(--amber); }
#s08 .formula .vv { color: var(--accent); font-weight: 700; }
#s08 .formula .mu { color: var(--text-muted); }
#s08 .grid-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 36px;
  align-content: start;
}

/* ============================================================
   Slide 9 — Attention matrix (rendered by scripts/generators.js)
   ============================================================ */
#s09 { --matrix-size: 380px; }
#s09 .layout {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: 48px;
  flex: 1;
  align-items: start;
}
#s09 .matrix-wrap { position: relative; padding: 28px 0 0 60px; }
#s09 .axis-x, #s09 .axis-y {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#s09 .axis-x { top: 0; left: 60px; }
#s09 .axis-y {
  top: calc(28px + var(--matrix-size) - 12px);
  left: 12px;
  transform: rotate(-90deg);
  transform-origin: left top;
  white-space: nowrap;
}
#s09 .matrix {
  display: grid;
  grid-template-columns: 50px repeat(6, 1fr);
  grid-template-rows: 24px repeat(6, 1fr);
  gap: 2px;
  width: var(--matrix-size);
  height: var(--matrix-size);
}
#s09 .matrix .corner { background: transparent; }
#s09 .matrix .colhead, #s09 .matrix .rowhead {
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}
#s09 .matrix .rowhead { justify-content: flex-end; padding-right: 10px; }
#s09 .matrix .cell {
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text);
}
#s09 .matrix .cell.e { background: transparent; border-color: var(--border); }
#s09 .notes ul { list-style: none; display: grid; gap: 24px; margin-top: 6px; }
#s09 .notes li {
  display: grid; grid-template-columns: 28px 1fr; gap: 14px;
  align-items: baseline;
}
#s09 .notes .marker {
  width: 18px; height: 18px;
  background: var(--accent);
  display: inline-block;
  margin-top: 3px;
}
#s09 .notes strong { color: var(--text); font-weight: 600; }
#s09 .notes p { color: var(--text-dim); font-size: 16px; }

/* ============================================================
   Slide 10 — Multi-head attention
   ============================================================ */
#s10 .layout { display: grid; grid-template-columns: 0.85fr 1fr; gap: 60px; flex: 1; align-items: start; }
#s10 .arch { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 8px; }
#s10 .block {
  width: 320px;
  padding: 14px 0;
  text-align: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
}
#s10 .block.input { background: var(--surface-3); color: var(--text); border: 1px solid var(--border-2); }
#s10 .heads { display: flex; gap: 10px; }
#s10 .head {
  width: 70px; height: 110px;
  background: var(--accent);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: 18px;
  flex-direction: column;
}
#s10 .head small { font-size: 11px; font-family: var(--mono); margin-top: 4px; }
#s10 .concat { background: var(--amber); color: var(--bg); }
#s10 .output { background: var(--surface-3); color: var(--text); border: 1px solid var(--border-2); }
#s10 .dn { width: 1px; height: 16px; background: var(--border-3); }
#s10 .dn::after {
  content: '';
  display: block;
  width: 6px; height: 6px;
  border-right: 1px solid var(--border-3);
  border-bottom: 1px solid var(--border-3);
  transform: rotate(45deg) translate(-2px, -2px);
  margin-top: 8px;
  margin-left: -3px;
}
#s10 .intuit { display: grid; gap: 16px; }
#s10 .intuit .lead {
  font-family: var(--display);
  font-size: 28px;
  text-transform: uppercase;
  line-height: 1.08;
  color: var(--text);
  letter-spacing: -0.005em;
}
#s10 .intuit ul { list-style: none; display: grid; gap: 10px; }
#s10 .intuit li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.5;
}
#s10 .intuit li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  background: var(--accent);
}
#s10 .intuit .punch {
  margin-top: 8px;
  font-family: var(--display);
  font-size: 22px;
  color: var(--accent);
  text-transform: uppercase;
  line-height: 1.05;
}

/* ============================================================
   Slide 11 — Positional encoding
   ============================================================ */
#s11 .pe-top { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 8px; }
#s11 .pe-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 22px 26px;
}
#s11 .pe-card.bug { border-left: 3px solid var(--crimson); }
#s11 .pe-card.fix { border-left: 3px solid var(--green); }
#s11 .pe-card .marker {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 10px;
}
#s11 .pe-card.bug .marker { color: var(--crimson); }
#s11 .pe-card.fix .marker { color: var(--green); }
#s11 .pe-card h3 { font-size: 22px; font-weight: 600; margin-bottom: 10px; color: var(--text); }
#s11 .pe-card p  { font-size: 15px; color: var(--text-dim); }
#s11 .flavor-head {
  margin-top: 28px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
}
#s11 .flavors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
#s11 .flavor {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px 22px;
  position: relative;
}
#s11 .flavor::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
}
#s11 .flavor h4 { font-size: 19px; font-weight: 600; margin-bottom: 4px; }
#s11 .flavor .who { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-bottom: 12px; letter-spacing: 0.1em; }
#s11 .flavor p   { font-size: 14px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.55; }
#s11 .flavor code { font-family: var(--mono); font-size: 12px; color: var(--accent-bright); }

/* ============================================================
   Slide 12 — The transformer block
   ============================================================ */
#s12 .layout {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 50px;
  flex: 1;
  align-items: start;
}
#s12 .arch {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; position: relative; padding-top: 8px;
}
#s12 .arch .row { display: flex; align-items: center; }
#s12 .arch .blk {
  width: 320px;
  padding: 12px 0;
  text-align: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  margin-top: 6px;
}
#s12 .arch .blk.input  { background: var(--surface-3); color: var(--text); border: 1px solid var(--border-2); margin-top: 0; }
#s12 .arch .blk.ln     { background: var(--amber); color: var(--bg); }
#s12 .arch .blk.attn   { background: var(--accent); color: var(--bg); }
#s12 .arch .blk.ff     { background: var(--accent); color: var(--bg); }
#s12 .arch .blk.res {
  background: transparent;
  color: var(--text-dim);
  font-style: italic;
  border: 1px dashed var(--border-3);
}
#s12 .arch .blk.output { background: var(--surface-3); color: var(--text); border: 1px solid var(--border-2); }
#s12 .arch .arrow { width: 1px; height: 14px; background: var(--border-3); margin-top: 6px; }
#s12 .arch .repeat {
  position: absolute;
  right: -40px; top: 60px; bottom: 60px;
  width: 100px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}
#s12 .arch .repeat::before, #s12 .arch .repeat::after {
  content: '';
  width: 1px; flex: 1;
  background: var(--accent);
}
#s12 .arch .repeat span {
  padding: 8px 4px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
#s12 .pieces { display: grid; gap: 14px; }
#s12 .piece {
  background: var(--surface);
  border-left: 2px solid var(--accent);
  padding: 14px 20px;
}
#s12 .piece h4 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
#s12 .piece p  { font-size: 14px; color: var(--text-dim); line-height: 1.5; }

/* ============================================================
   Slide 13 — Residuals + LayerNorm
   ============================================================ */
#s13 .layout {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  flex: 1;
}
#s13 .col h3 { font-size: 24px; font-weight: 600; margin-bottom: 14px; }
#s13 .col .form {
  font-family: var(--mono);
  font-size: 19px;
  color: var(--accent-bright);
  margin-bottom: 24px;
}
#s13 .col .form .mu { color: var(--text-muted); }
#s13 .res-diag {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 50px 0 8px;
  margin-bottom: 28px;
}
#s13 .res-diag .b {
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  padding: 14px 0;
  flex: 0 0 80px;
  text-align: center;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 16px;
}
#s13 .res-diag .b.mid {
  background: var(--accent); color: var(--bg);
  border-color: var(--accent);
  flex: 0 0 160px;
}
#s13 .res-diag .b.plus {
  background: var(--amber); color: var(--bg);
  border-color: var(--amber); border-radius: 50%;
  flex: 0 0 36px; width: 36px; height: 36px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
#s13 .res-diag .ar {
  flex: 0 0 28px; height: 2px;
  background: var(--border-3);
  position: relative;
}
#s13 .res-diag .ar::after {
  content: '';
  position: absolute;
  right: -1px; top: 50%;
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--border-3);
  transform: translateY(-50%);
}
#s13 .skip-line {
  position: absolute;
  top: 28px; left: 40px; right: 18px;
  height: 28px;
  border: 2px solid var(--accent);
  border-bottom: none;
}
#s13 .skip-label {
  position: absolute;
  top: 8px;
  left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
  background: var(--bg);
  padding: 0 8px;
}
#s13 .why-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
#s13 .why-body { font-size: 16px; color: var(--text-2); line-height: 1.55; }

/* ============================================================
   Slide 14 — Three flavors (encoder / decoder / enc-dec)
   ============================================================ */
#s14 .flavors {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; flex: 1; align-content: start; margin-top: 14px;
}
#s14 .flavor {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px 26px;
  display: flex; flex-direction: column;
}
#s14 .flavor.dec { border-top: 3px solid var(--accent); }
#s14 .flavor h3 {
  font-family: var(--display);
  font-size: 36px;
  text-transform: uppercase;
  line-height: 1.02;
  margin-bottom: 6px;
}
#s14 .flavor .who {
  font-family: var(--mono); font-size: 12px;
  color: var(--accent); letter-spacing: 0.1em;
  margin-bottom: 18px;
}
#s14 .flavor .mini {
  width: 144px; height: 144px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
  margin-bottom: 18px;
}
#s14 .mini .c       { background: var(--accent); }
#s14 .mini .c.off   { background: var(--surface-3); }
#s14 .flavor .mini-label {
  font-family: var(--mono); font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 14px;
}
#s14 .flavor p {
  font-size: 15px; color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 18px;
  flex: 1;
}
#s14 .flavor .good {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
#s14 .flavor .good span {
  color: var(--accent);
  margin-left: 8px;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.04em;
}

/* ============================================================
   Slide 15 — Next-token prediction
   ============================================================ */
#s15 .seq { margin-top: 18px; display: flex; align-items: center; gap: 10px; }
#s15 .seq .tok {
  flex: 1;
  height: 92px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: 32px;
  text-transform: uppercase;
}
#s15 .seq .arrow {
  width: 60px; height: 2px;
  background: var(--accent);
  position: relative;
  flex: 0 0 60px;
}
#s15 .seq .arrow::after {
  content: '';
  position: absolute;
  right: -1px; top: 50%;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--accent);
  transform: translateY(-50%);
}
#s15 .seq .arrow::before {
  content: 'predict';
  position: absolute;
  top: -20px;
  left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px;
  color: var(--accent); letter-spacing: 0.22em;
  text-transform: uppercase;
}
#s15 .seq .tok.target {
  background: var(--accent); color: var(--bg);
  border-color: var(--accent);
}
#s15 .group-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: center;
}
#s15 .group-label.in  { flex: 1; }
#s15 .group-label.out { flex: 0 0 92px; }
#s15 .loss {
  margin-top: 30px;
  text-align: center;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--text-dim);
}
#s15 .loss .key { color: var(--accent); }
#s15 .pairs { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
#s15 .pair {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 22px 26px;
}
#s15 .pair h4 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
#s15 .pair p  { font-size: 15px; color: var(--text-dim); }
#s15 .pair h4 .ico {
  display: inline-block;
  width: 18px; height: 18px;
  background: var(--accent);
  margin-right: 10px;
  transform: translateY(2px);
}

/* ============================================================
   Slide 16 — Tokenization
   ============================================================ */
#s16 .tk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; flex: 1; margin-top: 14px; }
#s16 .tk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 26px 24px;
  display: flex; flex-direction: column;
}
#s16 .tk-card.bpe { border: 1px solid var(--accent); }
#s16 .tk-card .head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
#s16 .tk-card h3 { font-size: 20px; font-weight: 600; }
#s16 .tk-card .winner {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}
#s16 .tk-card .strip {
  background: var(--bg);
  border: 1px solid var(--border-2);
  padding: 14px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--accent);
  text-align: center;
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}
#s16 .tk-card .vocab {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-muted);
}
#s16 .tk-card .vocab-num {
  font-size: 16px; font-weight: 600;
  color: var(--text);
  margin: 4px 0 16px;
  font-family: var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
#s16 .tk-card ul { list-style: none; display: grid; gap: 10px; margin-bottom: 18px; }
#s16 .tk-card li { font-size: 14px; color: var(--text-2); padding-left: 24px; position: relative; }
#s16 .tk-card li.yes::before { content: '+'; position: absolute; left: 0; color: var(--green);   font-weight: 700; }
#s16 .tk-card li.no::before  { content: '−'; position: absolute; left: 0; color: var(--crimson); font-weight: 700; }
#s16 .tk-card .used {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-muted);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
#s16 .tk-card .used .who {
  display: block;
  font-style: italic;
  color: var(--text-2);
  text-transform: none;
  letter-spacing: 0.02em;
  margin-top: 4px;
  font-family: var(--sans);
}

/* ============================================================
   Slide 17 — Why transformers won
   ============================================================ */
#s17 .vs { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 8px; }
#s17 .lane h3 {
  font-family: var(--display);
  font-size: 36px;
  text-transform: uppercase;
  line-height: 1.02;
  margin-bottom: 14px;
}
#s17 .lane.rnn h3 { color: var(--crimson); }
#s17 .lane.tr  h3 { color: var(--accent); }
#s17 .timeline {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 18px;
  margin-bottom: 14px;
}
#s17 .steps-row { display: flex; gap: 6px; }
#s17 .steps-row .s {
  flex: 1;
  height: 36px;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px;
  color: var(--text-2);
}
#s17 .lane.rnn .steps-row .s {
  background: rgba(220,38,38,0.10);
  border-color: var(--crimson);
  color: var(--text);
}
#s17 .lane.tr .full {
  flex: 1;
  height: 36px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px;
  color: var(--text);
  gap: 18px;
}
#s17 .timeline-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
#s17 .lane p { font-size: 16px; color: var(--text-2); }
#s17 .lane .o { font-family: var(--mono); font-size: 14px; color: var(--text-dim); }
#s17 .conseq {
  margin-top: 26px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  padding: 22px 28px;
}
#s17 .conseq .label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
#s17 .conseq p { font-size: 18px; color: var(--text); line-height: 1.5; }
#s17 .conseq .small { font-size: 13px; color: var(--text-muted); margin-top: 10px; font-style: italic; }

/* ============================================================
   Slide 18 — Scaling laws
   ============================================================ */
#s18 .layout {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 52px; flex: 1; align-items: start; margin-top: 4px;
}
#s18 .chart { position: relative; width: 100%; max-width: 720px; }
#s18 .chart svg { width: 100%; height: auto; display: block; }
#s18 .levers { display: grid; gap: 18px; }
#s18 .lev    { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: center; }
#s18 .lev .badge {
  width: 56px; height: 56px;
  background: var(--accent); color: var(--bg);
  font-family: var(--display); font-size: 32px;
  display: flex; align-items: center; justify-content: center;
}
#s18 .lev h4 { font-size: 18px; font-weight: 600; margin-bottom: 2px; }
#s18 .lev p  { font-size: 14px; color: var(--text-dim); }
#s18 .chinch {
  margin-top: 20px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  padding: 16px 22px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}
#s18 .chinch strong { color: var(--accent-bright); }

/* ============================================================
   Slide 19 — Modern optimizations
   ============================================================ */
#s19 .grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; flex: 1; align-content: start; margin-top: 14px;
}
#s19 .opt {
  background: var(--surface);
  border-left: 2px solid var(--accent);
  padding: 18px 22px;
}
#s19 .opt .top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
#s19 .opt h4 { font-size: 16px; font-weight: 600; }
#s19 .opt .yr {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--accent);
}
#s19 .opt .what-label,
#s19 .opt .why-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
  margin-top: 8px;
}
#s19 .opt .what { font-size: 14px; color: var(--text-2); line-height: 1.5; }
#s19 .opt .why  { font-size: 13px; color: var(--text-dim); font-style: italic; line-height: 1.5; }

/* ============================================================
   Slide 20 — Putting it together (section break)
   ============================================================ */
#s20 {
  background:
    radial-gradient(ellipse at 70% 50%, rgba(255,107,31,0.08), transparent 60%),
    var(--bg);
}
#s20 .recap { display: grid; gap: 18px; margin-top: 28px; }
#s20 .recap .item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: baseline;
}
#s20 .recap .n {
  font-family: var(--display);
  font-size: 48px;
  line-height: 0.94;
  color: var(--accent);
}
#s20 .recap h3 { font-size: 22px; font-weight: 600; margin-bottom: 2px; }
#s20 .recap p  { font-size: 16px; color: var(--text-dim); }
#s20 .recap p .mono { font-size: 14px; }

/* ============================================================
   Slide 21 — The takeaway repo
   ============================================================ */
#s21 .layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; flex: 1; }
#s21 .terminal {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0;
  display: flex;
  flex-direction: column;
}
#s21 .terminal .bar {
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}
#s21 .terminal .dot { width: 10px; height: 10px; border-radius: 50%; }
#s21 .terminal .dot.r { background: #FF5F57; }
#s21 .terminal .dot.y { background: #FFBD2E; }
#s21 .terminal .dot.g { background: #28C940; }
#s21 .terminal .bar .term-title { margin-left: auto; margin-right: auto; }
#s21 .terminal .body {
  padding: 18px 22px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
  line-height: 1.85;
}
#s21 .terminal .body .file    { color: var(--accent); }
#s21 .terminal .body .arrow   { color: var(--text-muted); }
#s21 .terminal .body .comment { color: var(--text-dim); }
#s21 .terminal .footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.08em;
}
#s21 .commands { display: grid; gap: 12px; }
#s21 .cmd {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--text);
}
#s21 .cmd .p { color: var(--accent); margin-right: 10px; }
#s21 .preview {
  margin-top: 18px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  padding: 18px 22px;
}
#s21 .preview .label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px;
}
#s21 .preview p { font-size: 14px; color: var(--text-2); margin-bottom: 12px; }
#s21 .preview pre {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent-bright);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ============================================================
   Slide 22 — Q&A + resources
   ============================================================ */
#s22 {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,107,31,0.08), transparent 60%),
    var(--bg);
}
#s22 .q {
  font-family: var(--display);
  font-size: 168px;
  line-height: 0.96;
  text-transform: uppercase;
  color: var(--text);
  letter-spacing: -0.01em;
}
#s22 .q span { color: var(--accent); }
#s22 .rule { width: 80px; height: 3px; margin: 24px 0 32px; }
#s22 .dig-head {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
#s22 .res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#s22 .res {
  background: var(--surface);
  border-left: 2px solid var(--accent);
  padding: 14px 20px;
}
#s22 .res h4 { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
#s22 .res .who {
  font-family: var(--mono); font-size: 11px;
  color: var(--accent); letter-spacing: 0.08em;
  margin-bottom: 6px;
}
#s22 .res p { font-size: 13px; color: var(--text-dim); line-height: 1.5; }