/* =============================================================
   Designing Planning Algorithms for the Era of Parallelism
   RoboARCH @ ICRA 2026 · An Thai Le
   Style v2 · Watson-defence minimal · white paper · semantic glyph color
   ============================================================= */

:root {
  /* Surface: pure white (Watson defence) */
  --paper:        #ffffff;
  --paper-soft:   #f7f8fa;
  --ink:          #0a0c0f;
  --ink-soft:     #34383d;
  --ink-muted:    #7b858e;
  --rule:         #e3e7ec;
  --rule-strong:  #c2cad2;
  --rule-soft:    rgba(10,12,15,.06);

  /* ── Three disjoint color tiers ──────────────────────────────
     STRUCTURE = blue (where am I) · META = pink (the point) ·
     OBJECT = teal/sage/orchid (the math object's parts).        */

  /* STRUCTURE tier - Watson blue: headings · footer · citations */
  --heading-blue: #1f3fff;

  /* META tier - Watson pink: this-talk / highlight / active fragment / links */
  --ink-rose:     #ff217d;

  /* OBJECT tier, GSR semantic glyph inks (math + GSR components ONLY) */
  --ink-teal:     #2f7d8a;   /* GENERATE · tensors / batch axes        */
  --ink-sage:     #557a3a;   /* SCORE · objectives / cost / value      */
  --ink-orchid:   #8a3f9c;   /* REDUCE · operators / reducers          */
  --ink-amber:    #b07d1f;   /* in-prep tag only (demoted, rare)       */

  --serif: "Dante MT Std", "Palatino Linotype", "Book Antiqua", Palatino, "STIX Two Text", "Iowan Old Style", Georgia, serif;
  --sans:  "HK Grotesk", "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Motion (Watson fast) */
  --t-fast: .2s;
  --t-frag: .35s;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);          /* Watson serif body */
  font-feature-settings: "ss01","cv11","tnum","liga","calt";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}
body { overflow: hidden; }
aside.notes, .reveal aside.notes { display: none !important; }
a { color: var(--ink-rose); text-decoration: none; border-bottom: 1px solid rgba(255,33,125,.32); }
.cite { color: var(--heading-blue); }
.reveal { width: 100%; height: 100%; }
.reveal .slides { text-align: left; }
.reveal .slides section { text-align: left; }

/* ─── reveal.js minimal reset ────────────────────────────────
   Keep reveal's layout/transform engine; reject its paint so the
   white paper aesthetic survives. Loaded after reveal.css.        */
html.reveal-viewport, .reveal-viewport { background: var(--paper); }
.reveal { background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: inherit; }
.reveal .slides { font-size: inherit; }
.reveal .slides section { font-size: inherit; line-height: inherit; background: var(--paper); }
.reveal .progress { color: var(--rule-strong); height: 2px; }
.reveal .controls { color: var(--ink-muted); }
.reveal .slide-number { display: none; }   /* per-slide .page-n owns numbering */

/* ─── Watson equation choreography ───────────────────────────
   Two reusable tiers + a fixed five-colour role map.             */
.eq-hero { text-align: center; font-size: 33px; line-height: 1.5; margin: 24px auto; max-width: 1000px; }
.eq-hero .katex-display, .eq-hero .katex-display > .katex { text-align: center !important; display: block !important; }
.eq-stack { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.eq-stack.centered { align-items: center; }
.eq-stack .eq, .eq-stack .eq-display { margin: 0; }

/* KaTeX-inside-fragment needs a box for opacity/colour transitions */
.reveal .katex .fragment { display: inline-block; }
.reveal .fragment { transition: opacity var(--t-frag) ease, color var(--t-frag) ease; }

/* Fixed semantic role colours for equation terms (mirrors the glyph palette) */
.fr-tensor { color: var(--ink-teal); }
.fr-cost, .fr-val { color: var(--ink-sage); }
.fr-op { color: var(--ink-orchid); }
.fr-hi { color: var(--ink-rose); }
.fr-caution { color: var(--ink-amber); }

/* Dim-then-highlight: term is always present (opacity 1, overriding reveal's
   .fragment{opacity:0;visibility:hidden}), sits muted until revealed, then takes its
   .fr-* role colour; the active step flashes rose. Put the role colour in the .fr-*
   class (NOT \textcolor) so the muting can win first. Selectors match reveal's
   `.reveal .slides section .fragment` specificity, with !important on opacity. */
.reveal .slides section .fragment.reveal-color { opacity: 1 !important; visibility: visible !important; }
.reveal .slides section .fragment.reveal-color:not(.visible) { color: var(--ink-muted) !important; }
.reveal .slides section .fragment.reveal-color.current-fragment { color: var(--ink-rose) !important; }

/* ─── Joe-Watson fragment primitives ─────────────────────────
   Use reveal's BUILT-IN class names so they also animate on slides.com.
   Layered on reveal's state classes (.visible / .current-fragment).      */

/* fade-in-then-semi-out: appear, then fall to .35 once the NEXT step fires
   (Joe's signature "argument scrolls forward, history stays faint"). */
.reveal .slides section .fragment.fade-in-then-semi-out { opacity: 0; }
.reveal .slides section .fragment.fade-in-then-semi-out.visible { opacity: 1; }
.reveal .slides section .fragment.fade-in-then-semi-out.visible.current-fragment { opacity: 1; }
.reveal .slides section .fragment.fade-in-then-semi-out.visible:not(.current-fragment) { opacity: .35; }

/* fade-in-then-out: appear, then vanish once the next fires (transient terms). */
.reveal .slides section .fragment.fade-in-then-out { opacity: 0; }
.reveal .slides section .fragment.fade-in-then-out.visible.current-fragment { opacity: 1; }
.reveal .slides section .fragment.fade-in-then-out.visible:not(.current-fragment) { opacity: 0; }

/* highlight-current-*: term ALWAYS present, muted until reached, flashes blue/pink
   when current, then SETTLES to its GSR .fr-* role colour ("accumulate meaning"). */
.reveal .slides section .fragment.hl-cur { opacity: 1 !important; visibility: visible !important; color: var(--ink-muted) !important; }
.reveal .slides section .fragment.hl-cur.current-fragment.hl-blue { color: var(--heading-blue) !important; }
.reveal .slides section .fragment.hl-cur.current-fragment.hl-pink { color: var(--ink-rose) !important; }
.reveal .slides section .fragment.hl-cur.current-fragment.hl-bold { font-weight: 700; color: var(--ink) !important; }
.reveal .slides section .fragment.hl-cur.visible:not(.current-fragment).fr-tensor { color: var(--ink-teal)   !important; }
.reveal .slides section .fragment.hl-cur.visible:not(.current-fragment).fr-cost,
.reveal .slides section .fragment.hl-cur.visible:not(.current-fragment).fr-val   { color: var(--ink-sage)   !important; }
.reveal .slides section .fragment.hl-cur.visible:not(.current-fragment).fr-op    { color: var(--ink-orchid) !important; }

/* reveal's built-in highlight-current-blue, recoloured to our blue + a pink sibling */
.reveal .slides section .fragment.highlight-current-blue.current-fragment { color: var(--heading-blue) !important; }
.reveal .slides section .fragment.highlight-current-pink { opacity: 1 !important; visibility: visible !important; }
.reveal .slides section .fragment.highlight-current-pink.current-fragment { color: var(--ink-rose) !important; }

/* ─── New-slide components (GSR spine) ───────────────────────── */
/* Generate -> Score -> Reduce three-stage strip */
.gsr-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center;
            gap: 0 14px; margin: 14px 0 8px; }
.gsr-stage { border-top: 2px solid var(--rule-strong); padding: 12px 0 0; }
.gsr-stage .gsr-name { font-family: var(--sans); font-size: 12px; font-weight: 700;
                       letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.gsr-stage.s-gen .gsr-name { color: var(--ink-teal); }
.gsr-stage.s-score .gsr-name { color: var(--ink-sage); }
.gsr-stage.s-reduce .gsr-name { color: var(--ink-orchid); }
.gsr-stage .gsr-sub { font-size: 14px; color: var(--ink-soft); line-height: 1.4; margin-top: 6px; }
.gsr-stage .gsr-eq { margin-top: 8px; font-size: 17px; }
.gsr-arrow { font-size: 22px; color: var(--ink-muted); align-self: center; }

/* Reducer continuum: min <-> soft-min <-> expectation <-> score */
.continuum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 10px 0 6px;
             border-top: 2px solid var(--rule); position: relative; }
.continuum .cont-node { padding: 14px 16px 0; border-right: 1px solid var(--rule); }
.continuum .cont-node:last-child { border-right: 0; }
.cont-node .cont-op { font-size: 16px; }
.cont-node .cont-lab { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
                       font-weight: 700; margin-top: 8px; }
.cont-node .cont-meth { font-size: 13px; color: var(--ink-muted); margin-top: 3px; }
.cont-node.n-min .cont-lab { color: var(--ink-orchid); }
.cont-node.n-soft .cont-lab { color: var(--ink-sage); }
.cont-node.n-exp .cont-lab { color: var(--ink-teal); }
.cont-node.n-score .cont-lab { color: var(--ink-rose); }
.cont-lambda { text-align: center; font-size: 13px; color: var(--ink-muted); margin-top: 8px; font-style: italic; }

/* Semiring table reuses .compare; left-align method/cells, tighten math cells */
.semiring-table td .katex, .semiring-table th { font-size: 14px; }
.semiring-table td:first-child { font-weight: 600; }

section {
  width: 1280px; height: 720px;
  position: relative;
  padding: 60px 92px 56px 92px;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
section::before { content: none; }

.wrap {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; gap: 10px;
}

/* ─── Typography ─────────────────────────────────────────── */

.kicker {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 6px;
}

h1 {
  font-family: var(--sans);
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 18px 0;
  max-width: 1020px;
}
h2 {
  font-family: var(--sans);
  font-size: 32px;
  line-height: 1.16;
  letter-spacing: -0.016em;
  font-weight: 560;
  color: var(--heading-blue);          /* Watson blue section headings (kept centered) */
  margin: 0 0 22px 0;
  max-width: 1100px;
}
h2 .muted { color: var(--ink-muted); } /* keep secondary clause grey, not blue */
h3 {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px 0;
}
h4 {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.22;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}
p { font-size: 18px; line-height: 1.42; color: var(--ink-soft); margin: 0 0 12px 0; }
ul, ol { margin: 0; padding-left: 1.15em; }
li { font-size: 18px; line-height: 1.40; color: var(--ink-soft); margin-bottom: 7px; }
li::marker { color: var(--ink-muted); }
.tiny { font-size: 11.5px; line-height: 1.36; color: var(--ink-muted); }
.muted { color: var(--ink-muted); }

/* Font system: serif body (inherited) + sans for ALL uppercase tracked micro-labels,
   so every label/metadata caption reads uniformly across the deck. */
.cred-label, .ls-axis, .ls-this, .ll-label, .cont-lab, .cont-meth,
.la-lab, .tk-name, .lane-name, .pm-card .role,
.qr-block .qr-text .label { font-family: var(--sans); }
.subtitle {
  font-size: 20px;
  line-height: 1.38;
  color: var(--ink-soft);
  max-width: 680px;
  font-weight: 400;
}
.tagline {
  font-size: 17px;
  color: var(--ink-soft);
  margin-top: 10px;
  text-align: center;
}
.bigline {
  font-size: 23px;
  line-height: 1.30;
  letter-spacing: -0.016em;
  font-weight: 580;
  color: var(--ink);
}
.quote {
  font-size: 25px;
  line-height: 1.28;
  color: var(--ink);
  letter-spacing: -0.014em;
  font-weight: 540;
  font-style: italic;
}

/* Semantic inline colors mirror the math-glyph palette */
.teal   { color: var(--ink-teal); }
.sage   { color: var(--ink-sage); }
.orchid { color: var(--ink-orchid); }
.rose   { color: var(--ink-rose); }
.amber  { color: var(--ink-amber); }
.accent { color: var(--ink-rose); }
.green  { color: var(--ink-sage); }     /* legacy aliases */
.violet { color: var(--ink-orchid); }
.magenta{ color: var(--ink-rose); }
.red    { color: var(--ink-rose); }

/* ─── Footer / page number ───────────────────────────────── */

/* Persistent Watson footer: blue, bottom-left, per-section data-footer */
.footer {
  position: absolute;
  left: 92px; bottom: 26px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--heading-blue);
  z-index: 2;
  pointer-events: none;
  opacity: .92;
}
.title-slide .footer, .thank-you-slide .footer { display: none !important; }
.page-n {
  position: absolute;
  right: 32px; bottom: 26px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--ink-muted);
  z-index: 2;
}
.title-slide .page-n, .thank-you-slide .page-n { display: none; }

/* ─── Layout primitives ──────────────────────────────────── */

.grid { display: grid; gap: 22px; }
.grid.two    { grid-template-columns: 1fr 1fr; }
.grid.two-60 { grid-template-columns: 1.2fr .8fr; }
.grid.two-40 { grid-template-columns: .8fr 1.2fr; }
.grid.three  { grid-template-columns: repeat(3, 1fr); }
.grid.four   { grid-template-columns: repeat(4, 1fr); }

/* Card = typographic grouping, not a panel */
.card {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--rule);
  border-radius: 0;
  padding: 2px 0 2px 18px;
  box-shadow: none;
}
.card.flat  { padding-left: 0; border-left: 0; }
.card.tight { padding-left: 14px; }
.card h3 { color: var(--ink); }
.card h4 { color: var(--ink); }
.card p, .card li { font-size: 16.5px; line-height: 1.42; color: var(--ink-soft); }

/* Callout = left semantic bar on white */
.callout {
  border-left: 3px solid var(--ink-rose);
  padding: 4px 0 4px 18px;
  background: transparent;
  border-radius: 0;
  margin: 4px 0;
}
.callout p { color: var(--ink); font-size: 18.5px; line-height: 1.40; margin: 0; }
.callout p.bigline { font-size: 21px; line-height: 1.32; }

/* Image cards, borderless default; .framed adds a hairline */
/* Figure card = flex column: a rounded image that FILLS its frame (no grey
   letterbox) with the caption sitting cleanly below it. The card height is the
   image area; the caption flows underneath without being clipped. */
.img-card {
  display: flex; flex-direction: column; gap: 6px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;              /* caption below the image is never clipped */
  box-shadow: none;
}
/* Default: demo GIFs / photos FILL the frame edge-to-edge, rounded all 4 corners. */
.img-card img {
  width: 100%; flex: 1 1 auto; min-height: 0;
  object-fit: cover; display: block;
  border-radius: 12px; background: var(--paper);
}
/* .contain: schematic diagrams / charts / illustrations keep full content; the
   contain letterbox is white and borderless, so it blends into the white slide. */
.img-card.contain img { object-fit: contain; }
/* .framed is now a no-op (rounding + fill carry the figure; no grey hairline box). */
.img-card.framed { border: 0; }
.img-card .caption { flex: 0 0 auto; }
.caption {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 8px;
  font-weight: 600;
}
.attrib { font-size: 11px; color: var(--ink-muted); font-style: italic; margin-top: 4px; letter-spacing: 0; text-transform: none; }
/* Long attribution captions: sentence case, normal tracking, readable line-height
   (the uppercase tracked .caption reads badly for multi-sentence credits). */
.caption.cap-long { text-transform: none; letter-spacing: .005em; font-size: 11px; line-height: 1.5; font-weight: 500; }

/* ─── Equations: bare display, semantic glyph color ──────── */

.eq, .eq-display {
  font-family: var(--serif);
  margin: 6px 0;
  font-size: 25px;
  line-height: 1.32;
  color: var(--ink);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 2px 0;
  overflow-wrap: normal;
}
.eq.small-eq, .eq-display.small { font-size: 19px; }
.eq.tight, .eq-display.tight { margin: 2px 0; }

/* KaTeX inherits ink color; \textcolor{} overrides per glyph */
.eq .katex, .eq-display .katex { color: inherit !important; font-size: 1em !important; }
.eq .katex-display, .eq-display .katex-display { margin: 0 !important; }
.eq .katex-display > .katex, .eq-display .katex-display > .katex { text-align: left !important; display: inline-block !important; }

/* Old colored-box aliases retained as no-ops so existing markup keeps working */
.eq-cyan, .eq-amber, .eq-green, .eq-violet {
  background: transparent !important;
  border: 0 !important;
  color: var(--ink) !important;
}
.eq-cyan .katex, .eq-amber .katex, .eq-green .katex, .eq-violet .katex { color: var(--ink) !important; }

.math-inline { font-family: var(--serif); }
.math-inline .katex { font-size: 1.04em; }
.katex { color: inherit; }

/* ─── Metric row, tags, pills ────────────────────────────── */

.metric-row {
  display: flex;
  gap: 28px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.metric {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  flex: 1;
  text-align: left;
}
.metric .num {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .20em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.metric .label {
  display: block;
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.34;
}

.pill, .tag {
  display: inline;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
}
.tag.cyan   { color: var(--ink-teal); }
.tag.amber  { color: var(--ink-amber); }
.tag.green  { color: var(--ink-sage); }
.tag.violet { color: var(--ink-orchid); }

/* ─── Slide 1 · Title ────────────────────────────────────── */

.title-slide { background: var(--paper); }
.title-slide::before { content: none; display: none; }
.title-lockup {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
  height: 100%;
}
.title-kicker {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.title-kicker .kicker-line { display: none; }
.title-kicker .kicker-text {
  font-size: 11.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.title-h1 {
  font-family: var(--sans);
  font-size: 50px;
  line-height: 1.06;
  margin: 0 0 22px 0;
  letter-spacing: -0.022em;
  font-weight: 600;
  color: var(--ink);
  max-width: 600px;
}
.title-h1 .accent {
  color: var(--ink);
  font-style: normal;
  font-weight: 600;
}
.title-credentials {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 30px;
  align-items: start;
}
.title-credentials .cred-divider { display: none; }
.title-credentials .cred-block { display: flex; flex-direction: column; gap: 4px; }
.title-credentials .cred-label {
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
}
.title-credentials .cred-value {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.42;
}
.title-credentials .cred-value.cred-stack {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.50;
}
.title-credentials .cred-value.mono {
  font-family: var(--mono);
  color: var(--ink-rose);
  font-weight: 500;
  border-bottom: 1px solid rgba(255,33,125,.32);
  display: inline-block;
}
.hero-visual {
  height: 420px;
  border-radius: 14px;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  background: var(--paper);
}
.hero-visual img { width: 100%; height: 100%; object-fit: contain; background: var(--paper); }

/* Title montage: four flagship demos spanning the planner family (global graph,
   OT trajopt, rollout MPC, multi-robot), so the title announces the paradigm. */
.hero-montage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  height: 392px;
}
.hero-montage .hm-cell {
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
}
.hero-montage .hm-cell img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  background: var(--paper);
}
.hero-kernel {
  margin-top: 12px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ─── Slide 4 · Landscape ────────────────────────────────── */

.landscape-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1100px;
  margin: 4px auto 0 auto;
}
.landscape-card {
  position: relative;
  padding: 4px 0 4px 18px;
  border: 0;
  border-left: 2px solid var(--rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex; flex-direction: column;
  min-height: 200px;
}
.landscape-card::before { display: none; }
.landscape-card.cyan   { border-left-color: var(--ink-teal); }
.landscape-card.green  { border-left-color: var(--ink-sage); }
.landscape-card.violet { border-left-color: var(--ink-orchid); }
.landscape-card.anchor { border-left-color: var(--ink-rose); }
.landscape-card .ls-axis {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.landscape-card.cyan   .ls-axis { color: var(--ink-teal); }
.landscape-card.green  .ls-axis { color: var(--ink-sage); }
.landscape-card.violet .ls-axis { color: var(--ink-orchid); }
.landscape-card.anchor .ls-axis { color: var(--ink-rose); }
.landscape-card .ls-this {
  font-size: 10px;
  color: var(--ink-rose);
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
}
.landscape-card .ls-system {
  font-family: var(--sans);
  font-size: 20px;
  margin: 12px 0 8px 0;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.20;
  font-weight: 600;
}
.landscape-card.anchor .ls-system { font-size: 13.5px; line-height: 1.42; font-weight: 600; }
.landscape-card .ls-cite {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.46;
}
.landscape-card .ls-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 12px 0;
}
.landscape-card .ls-pitch {
  font-size: 13.5px;
  line-height: 1.44;
  color: var(--ink-soft);
  font-weight: 500;
}
.landscape-lineage {
  margin-top: 22px;
  padding: 14px 18px;
  border: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.landscape-lineage .ll-label {
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
  margin-bottom: 10px;
  text-align: center;
}
.landscape-lineage .ll-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px;
}
.landscape-lineage .ll-cite { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.landscape-lineage .ll-cite b { color: var(--ink); font-weight: 700; }
.landscape-lineage .ll-cite .muted { color: var(--ink-muted); margin-left: 4px; }

/* Lineage strip extras (slide 4 cousins row) */
.cousins { letter-spacing: .015em; }
.cousins .muted { color: var(--ink-muted); }

/* ─── Slide 6 · Program map ──────────────────────────────── */

.program-map {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 4px;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
.program-map .pm-card {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--rule);
  border-radius: 0;
  padding: 12px 4px 0 4px;
  text-align: left;
}
.program-map .pm-card.spine { border-top-color: var(--ink-teal); }
.program-map .pm-card .pm-thumb {
  height: 130px;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.program-map .pm-card .pm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--paper); }
.program-map .pm-card h4 {
  font-family: var(--sans);
  font-size: 15px;
  margin: 0 0 4px 0;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}
.program-map .pm-card .role {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.40;
}

/* ─── Slide 11 · "manuscript in preparation" ─────────────── */

.in-prep {
  font-size: 12px;
  color: var(--ink-amber);
  font-style: italic;
  margin: 10px 0 0 0;
  letter-spacing: 0;
}

/* ─── Slide 15 · SVG flow ────────────────────────────────── */

.svg-flow { width: 100%; height: auto; display: block; }
.svg-flow text { font-family: var(--sans); fill: var(--ink); font-size: 13px; font-weight: 500; }
.svg-flow text.label-sub { fill: var(--ink-muted); font-size: 11px; }
.svg-flow text.label-head { font-weight: 700; font-size: 14px; }
.svg-flow .node-box { fill: var(--paper); stroke: var(--rule); stroke-width: 1; }
.svg-flow .node-cyan   { stroke: var(--ink-teal); }
.svg-flow .node-amber  { stroke: var(--ink-amber); }
.svg-flow .node-green  { stroke: var(--ink-sage); }
.svg-flow .node-violet { stroke: var(--ink-orchid); }
.svg-flow .arrow-line { stroke: var(--ink); stroke-width: 1.4; fill: none; marker-end: url(#flow-arrow); }
.svg-flow .arrow-feedback { stroke: var(--ink-rose); stroke-width: 1.4; fill: none; stroke-dasharray: 5 4; marker-end: url(#flow-arrow); }

/* ─── Slide 16 · Comparison table & bignum ───────────────── */

.compare {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14.5px;
  font-family: var(--sans);
}
.compare th, .compare td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  text-align: center;
}
.compare th {
  color: var(--ink);
  font-weight: 700;
  background: transparent;
  border-bottom: 1.5px solid var(--ink);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.compare td:first-child, .compare th:first-child { text-align: left; }
.compare tr:last-child td { border-bottom: 0; }
.compare .ours { color: var(--ink-sage); font-weight: 700; }
.compare tr:has(.ours) { background: rgba(107,142,78,.05); }

.bignum {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0 18px 22px;
  background: transparent;
  border: 0;
  border-left: 2px solid var(--ink-sage);
  border-radius: 0;
}
.bignum .n {
  font-family: var(--sans);
  font-size: 64px;
  font-weight: 600;
  color: var(--ink-sage);
  letter-spacing: -0.04em;
  line-height: 1;
}
.bignum .unit {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.42;
  max-width: 280px;
}

/* ─── Slide 20 · Swimlanes ───────────────────────────────── */

.swimlanes { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 6px; }
.swimlane {
  display: grid;
  grid-template-columns: 58px 170px 1fr;
  gap: 18px;
  align-items: center;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 12px 0 4px 0;
}
.swimlane:first-of-type { border-top: 0; padding-top: 0; }
.swimlane .lane-letter {
  font-family: var(--sans);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.swimlane.gpu  .lane-letter { color: var(--ink-teal); }
.swimlane.cpu  .lane-letter { color: var(--ink-sage); }
.swimlane.edge .lane-letter { color: var(--ink-orchid); }
.swimlane .lane-label { display: flex; flex-direction: column; gap: 3px; }
.swimlane .lane-label .lane-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
.swimlane .lane-label .lane-hw {
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: .04em;
}
.swimlane .lane-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--ink-soft);
}
.swimlane .lane-item {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.swimlane .lane-item + .lane-item::before { content: "·  "; color: var(--ink-muted); }

/* ─── Slide 22 · Take-home stack & closing ──────────────── */

.takeaway-stack {
  display: flex; flex-direction: column;
  gap: 14px;
  margin-top: 6px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.takeaway-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  align-items: baseline;
  gap: 22px;
  padding: 12px 0 4px 18px;
  border: 0;
  border-left: 2px solid var(--rule);
  border-radius: 0;
  background: transparent;
}
.takeaway-row .tk-layer { display: flex; align-items: baseline; gap: 12px; }
.takeaway-row .tk-num {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0;
}
.takeaway-row .tk-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.takeaway-row .tk-body {
  font-size: 16px;
  line-height: 1.44;
  color: var(--ink-soft);
}
.takeaway-row.violet { border-left-color: var(--ink-orchid); }
.takeaway-row.violet .tk-name { color: var(--ink-orchid); }
.takeaway-row.cyan   { border-left-color: var(--ink-teal); }
.takeaway-row.cyan   .tk-name { color: var(--ink-teal); }
.takeaway-row.green  { border-left-color: var(--ink-sage); }
.takeaway-row.green  .tk-name { color: var(--ink-sage); }

.closing-line {
  text-align: center;
  margin: 24px auto 0 auto;
  max-width: 980px;
  font-size: 22px;
  line-height: 1.34;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.012em;
}
.closing-line .rose { color: var(--ink-rose); }
.signature {
  text-align: center;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ink-muted);
  font-style: italic;
  letter-spacing: 0;
}

/* ─── Slide 23 · Thank you ───────────────────────────────── */

.thank-you-slide { background: var(--paper); }
.thank-you-slide::before { content: none; display: none; }
.thank-you-slide h1 {
  font-size: 56px;
  text-align: center;
  margin-bottom: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.collaborator-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 28px;
  margin-top: 8px;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
.collab-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 10px 0 0 0;
  text-align: left;
}
.collab-card .name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}
.collab-card .affil {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.4;
}
.affiliations-row {
  margin-top: 22px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 13px;
  color: var(--ink-soft);
}
.affiliations-row .tag {
  border: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-weight: 600;
}
.affiliations-row .sep { color: var(--ink-muted); }

.qr-block {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
  justify-content: center;
}
.qr-block .qr-text { text-align: left; }
.qr-block .qr-text .url {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-rose);
  border-bottom: 1px solid rgba(255,33,125,.32);
}
.qr-block .qr-text .url + .url { margin-top: 4px; }
.qr-block .qr-text .label {
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
}
.qr-block .qr-img {
  width: 86px; height: 86px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 4px;
  object-fit: contain;
}
.funding {
  text-align: center;
  margin-top: 22px;
  font-size: 11px;
  color: var(--ink-muted);
  font-style: italic;
  letter-spacing: 0;
}

/* ─── Misc / legacy normalizations ───────────────────────── */

.codebox {
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.42;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 14px 18px;
  color: var(--ink);
}
.stamp { display: none; }       /* slide 11 rotated badge removed */
.logo-mark { display: none; }
hr.soft { border: 0; border-top: 1px solid var(--rule); margin: 14px 0; }
hr { border: 0; border-top: 1px solid var(--rule); }
.diagram { position: relative; min-height: 320px; }
.node {
  position: absolute;
  border-radius: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 12px 14px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.22;
  box-shadow: none;
}
.node small { display: block; color: var(--ink-muted); font-size: 11px; margin-top: 4px; }
.arrow { position: absolute; height: 1px; background: var(--ink); transform-origin: left center; }
.arrow::after {
  content: "";
  position: absolute;
  right: -1px; top: -4px;
  border-left: 8px solid var(--ink);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.gif-placeholder { display: none; }   /* not used in v2 */

.source-list { columns: 2; column-gap: 36px; }
.source-list li { break-inside: avoid; font-size: 13px; line-height: 1.32; margin-bottom: 6px; color: var(--ink-soft); }

.viz-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.viz-strip .img-card { height: 170px; }
.viz-strip.five { grid-template-columns: repeat(5, 1fr); }
.viz-strip.five .img-card { height: 160px; }
.slim { max-width: 860px; }
.narrow { max-width: 720px; }

/* ─── Five reusable equation + visualization layouts ─────────
   Inner canvas ≈ 1096×604 at 1280×720. Hard-cap figures ≤360px. */

/* P1 · eq-stack | figure (the workhorse) */
.layout-eqfig { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: center; }
.layout-eqfig.fig-left { grid-template-columns: .85fr 1.15fr; }
.layout-eqfig .eq-stack .eq { font-size: 21px; }
.layout-eqfig .img-card { height: 320px; }

/* P2 · hero-eq over 3-up figure-strip */
.layout-herostrip { display: grid; grid-template-rows: auto 1fr; gap: 16px; }
.layout-herostrip .eq-hero { font-size: 30px; margin: 6px auto 2px; }
.figure-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.figure-strip.two { grid-template-columns: repeat(2, 1fr); }
.figure-strip .img-card { height: 300px; }

/* P3 · math-card grid (GSR-coloured left rules) */
.layout-mathcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.layout-mathcards.two { grid-template-columns: repeat(2, 1fr); }
.layout-mathcards .card { border-left: 2px solid var(--rule); padding-left: 16px; }
.layout-mathcards .card.gen    { border-left-color: var(--ink-teal); }
.layout-mathcards .card.score  { border-left-color: var(--ink-sage); }
.layout-mathcards .card.reduce { border-left-color: var(--ink-orchid); }
.layout-mathcards .card .eq.small-eq { font-size: 18px; margin: 4px 0 8px; }
.layout-mathcards .card p { font-size: 15px; line-height: 1.42; }

/* P4 · figure-dominant + eq-caption callout (results / hardware) */
.layout-figcaption { display: grid; grid-template-rows: 1fr auto; gap: 14px; }
.layout-figcaption .figure-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.layout-figcaption .figure-row.three { grid-template-columns: repeat(3,1fr); }
.layout-figcaption .figure-row .img-card { height: 340px; }
.layout-figcaption .eq-callout { border-left: 3px solid var(--ink-rose); padding-left: 18px; }
.layout-figcaption .eq-callout .katex { font-size: 19px; }

/* P5 · morph derivation column | pinned figure (auto-animate slides) */
.layout-morph { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.layout-morph .eq-zone { min-height: 220px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.layout-morph .img-card { height: 340px; }

/* hard overflow guardrails */
.img-card { max-height: 372px; }

/* ─── Theorem / Proposition box (formal slides 7·9·11) ─────── */
.theorem {
  border-left: 3px solid var(--heading-blue);
  padding: 6px 0 6px 20px;
  margin: 4px auto;
}
.theorem .thm-label {
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--heading-blue); margin-bottom: 8px;
}
.theorem .eq { font-size: 22px; }
.theorem .thm-line { display: flex; gap: 12px; align-items: baseline; margin: 8px 0; }
.theorem .thm-line .lhs { color: var(--ink-soft); font-size: 15px; min-width: 26px; font-style: italic; }

/* small inset SVG plot (softmin -> min collapse) */
.inset-plot { width: 100%; height: auto; display: block; }
.inset-plot text { font-family: var(--sans); fill: var(--ink-muted); font-size: 12px; }
.inset-plot .axis { stroke: var(--rule-strong); stroke-width: 1; }
.inset-plot .curve { fill: none; stroke-width: 2; }
.inset-plot .c-hi  { stroke: var(--ink-muted); }
.inset-plot .c-mid { stroke: var(--ink-sage); }
.inset-plot .c-lo  { stroke: var(--ink-orchid); }
.inset-plot .c-min { stroke: var(--ink-rose); stroke-dasharray: 4 3; }

/* ─── λ-axis (continuum slider + final recap) ─────────────── */
.lambda-axis { position: relative; margin: 18px auto 6px; max-width: 1080px; padding: 0 8px; }
.lambda-axis .la-line { height: 2px; background: var(--rule-strong); position: relative; margin: 34px 0 0; }
.lambda-axis .la-line::after {
  content: ""; position: absolute; right: -1px; top: -4px;
  border-left: 9px solid var(--rule-strong); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.lambda-axis .la-ticks { display: grid; grid-template-columns: repeat(5, 1fr); }
.lambda-axis .la-node { text-align: center; position: relative; }
.lambda-axis .la-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-muted); margin: 10px auto 12px; }
.lambda-axis .la-node.on .la-dot { background: var(--ink-rose); box-shadow: 0 0 0 4px rgba(255,33,125,.15); }
.lambda-axis .la-meth { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.lambda-axis .la-op { font-size: 14px; margin-top: 4px; }
.lambda-axis .la-thumb { height: 118px; border: 0; border-radius: 8px; margin-top: 10px; overflow: hidden; background: var(--paper); display: flex; align-items: center; justify-content: center; }
.lambda-axis .la-thumb img { width: 100%; height: 100%; object-fit: contain; }
.lambda-axis .la-lab { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin-top: 6px; font-weight: 700; }
.lambda-marker {
  position: absolute; top: -2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink-rose); box-shadow: 0 0 0 5px rgba(255,33,125,.16);
}

/* nested-GSR insets (slide 26) */
.nest-stack { position: relative; max-width: 760px; margin: 6px auto; }
.nest-box { border: 1px solid var(--rule); padding: 14px 16px; margin: 0 auto; }
.nest-box.outer  { border-left: 3px solid var(--ink-orchid); }
.nest-box.middle { border-left: 3px solid var(--ink-sage);  margin-top: 12px; }
.nest-box.inner  { border-left: 3px solid var(--ink-teal);  margin-top: 12px; }
.nest-box .nb-name { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.nest-box.outer  .nb-name { color: var(--ink-orchid); }
.nest-box.middle .nb-name { color: var(--ink-sage); }
.nest-box.inner  .nb-name { color: var(--ink-teal); }
.nest-box .eq { font-size: 18px; margin: 6px 0 0; }

/* ─── Editorial composition: vertically centered, optical bias ─── */
/* Content centers on the canvas with a slight upward optical bias
   (achieved via asymmetric .wrap padding: more bottom than top).
   This places the visual mass at the optical center (~45% from top)
   rather than geometric center (50%), which reads as "deliberately
   composed" rather than mechanically split.                            */

section:not(.title-slide):not(.thank-you-slide) .wrap {
  justify-content: center;
  gap: 0;
  padding-top: 0;
  padding-bottom: 48px;
}
section:not(.title-slide):not(.thank-you-slide) .wrap > * {
  width: 100%;
  max-width: 100%;
}
section:not(.title-slide):not(.thank-you-slide) .wrap > .kicker {
  text-align: center;
  margin: 0 auto 14px auto;
  width: auto;
  max-width: 940px;
}
section:not(.title-slide):not(.thank-you-slide) .wrap > h2 {
  text-align: center;
  margin: 0 auto 28px auto;
  max-width: 1080px;
}
section:not(.title-slide):not(.thank-you-slide) .wrap > .tagline,
section:not(.title-slide):not(.thank-you-slide) .wrap > .cousins,
section:not(.title-slide):not(.thank-you-slide) .wrap > .in-prep {
  text-align: center;
  margin: 14px auto 0 auto;
  max-width: 1080px;
}
section:not(.title-slide):not(.thank-you-slide) .wrap > .grid,
section:not(.title-slide):not(.thank-you-slide) .wrap > .callout,
section:not(.title-slide):not(.thank-you-slide) .wrap > .program-map,
section:not(.title-slide):not(.thank-you-slide) .wrap > .landscape-row,
section:not(.title-slide):not(.thank-you-slide) .wrap > .swimlanes,
section:not(.title-slide):not(.thank-you-slide) .wrap > .takeaway-stack,
section:not(.title-slide):not(.thank-you-slide) .wrap > svg {
  margin-left: auto;
  margin-right: auto;
}
section:not(.title-slide):not(.thank-you-slide) .wrap > .metric-row {
  margin: 18px auto 0 auto;
  max-width: 1100px;
}
section:not(.title-slide):not(.thank-you-slide) .wrap > .landscape-lineage {
  margin: 18px auto 0 auto;
}

/* Thank-you slide composes vertically with breathing room                */
.thank-you-slide .wrap {
  justify-content: center;
  gap: 0;
  padding-top: 0;
}

/* ─── Responsive / fallback ──────────────────────────────── */

@media (max-width: 900px) {
  section { width: 100vw; height: 56.25vw; min-height: 100vh; padding: 36px; }
  h1 { font-size: 40px; }
  h2 { font-size: 26px; }
  .grid.two, .grid.two-60, .grid.two-40, .grid.three, .grid.four, .title-lockup { grid-template-columns: 1fr; }
}
body.fallback section { display: none; transform-origin: top left; }
body.fallback section.active { display: block; }
body.fallback::after { content: none; display: none; }
/* The fallback shim's counter is suppressed; we use the per-slide .page-n element instead. */