/* Job talk: light paper, ink, one hot accent. Signal thread motif from AISafetyHot. */
:root {
  --paper: #f5f4f0;
  --paper-2: #ecebe4;
  --card: #fbfaf7;
  --ink: #141412;
  --ink-2: #3c3b36;
  --muted: #77756d;
  --faint: #b9b6ac;
  --line: rgba(20, 20, 18, .13);
  --line-2: rgba(20, 20, 18, .07);
  --navy: #17365d;
  --navy-soft: rgba(23, 54, 93, .09);
  --navy-2: #2f5f94;
  --hot: #a33a2b;
  --brand: #a33a2b; /* deck accent; slides may re-map --hot locally, never --brand */
  --hot-2: #c4513f;
  --hot-soft: rgba(163, 58, 43, .09);
  --safe: #2e6b63;
  --safe-soft: rgba(46, 107, 99, .10);
  --safe-2: #3f8a7e;
  --amber: #a8650f;
  --amber-soft: rgba(168, 101, 15, .11);
  --amber-2: #c98a2c;
  /* text on the always-dark terminal panels: same roles, lighter tints for contrast */
  --t-hot: #ff8a78; --t-safe: #8fd3a6; --t-amber: #e6a85a; --t-muted: #8d8a82;
  --t-hot-solid: #b3392b; --t-safe-solid: #2e7d5b; /* solid badges on photos / terminals, white text */
  --subtitle: var(--ink-2); /* slide subtitles: neutral, never a semantic accent */
  --night: #121211;
  --night-ink: #ecebe4;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --math: "STIX Two Math", "Cambria Math", serif;
}

html, body, .reveal-viewport { background: var(--paper); }
:root { --r-background-color: #f5f4f0; }
/* ---------- dark theme (press T, or ?theme=dark) ---------- */
html[data-theme="dark"] {
  --paper: #141413;
  --paper-2: #1c1c1a;
  --card: #1d1d1b;
  --ink: #ecebe4;
  --ink-2: #c6c4ba;
  --muted: #918e85;
  --faint: #5d5b55;
  --line: rgba(236, 235, 228, .16);
  --line-2: rgba(236, 235, 228, .08);
  --navy: #9ebfe3;
  --navy-soft: rgba(158, 191, 227, .12);
  --navy-2: #c9dcf2;
  --hot: #d8664f;
  --brand: #d8664f;
  --hot-2: #e9806a;
  --hot-soft: rgba(216, 102, 79, .16);
  --safe: #62ab9f;
  --safe-soft: rgba(98, 171, 159, .14);
  --safe-2: #94d2c6;
  --amber: #d69d47;
  --amber-soft: rgba(214, 157, 71, .14);
  --amber-2: #edc27e;
  --r-background-color: #141413;
}
html[data-theme="dark"] .title-logos img:last-child { filter: invert(1); }
html[data-theme="dark"] .term { background: #0d0d0c; border: 1px solid var(--line); }
html[data-theme="dark"] img.fig { background: #f5f4f0; }

.reveal .slide-number a { color: inherit; text-decoration: none; }
::selection { background: color-mix(in srgb, var(--hot) 20%, transparent); }

/* light / dark switch: fixed in the viewport corner, quiet until hovered */
.theme-toggle { position: fixed; left: 16px; bottom: 14px; z-index: 40; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--muted); cursor: pointer; opacity: .5; transition: opacity .2s, color .2s; }
.theme-toggle:hover, .theme-toggle:focus-visible { opacity: 1; color: var(--ink); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .sun, html[data-theme="dark"] .theme-toggle .moon { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: block; }
@media print { .theme-toggle { display: none; } }

/* ---------- model diagrams: one vocabulary across the deck ----------
   box = a model, unit = a layer, dashed rep = a repeated block (×N / ×L), wire = data flow */
svg .mdl-box { fill: var(--card); stroke: var(--navy); stroke-width: 1.8; transition: fill .4s; }
svg .mdl-unit { fill: var(--navy-soft); stroke: var(--line); stroke-width: 1.5; }
svg .mdl-rep { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 5 4; }
svg .mdl-x { fill: var(--navy); font-family: var(--math); text-anchor: middle; }
svg .mdl-title { fill: var(--ink); font-weight: 600; text-anchor: middle; }
svg .mdl-label { fill: var(--ink); text-anchor: middle; }
svg .mdl-wire { fill: none; stroke: var(--navy); stroke-width: 2.5; }

.reveal {
  font-family: var(--sans);
  color: var(--ink);
  font-size: 28.8px;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}
.reveal .slides { text-align: left; }
/* no orphaned last words: balance headings, keep paragraph endings at least two words */
.reveal h2, .reveal h3 { text-wrap: balance; }
.reveal .slides { text-wrap: pretty; } /* inherited by every text block; headings below override to balance */
.reveal p, .reveal li { text-wrap: pretty; }
.reveal .slides > section {
  width: 1600px;
  height: 900px;
  padding: 0;
  box-sizing: border-box;
}
.reveal .progress { color: var(--brand); height: 3px; }
.reveal .slide-number {
  background: transparent;
  color: var(--muted);
  font: 500 18px/1 var(--mono);
  right: 30px;
  bottom: 26px;
}

/* ---------- frame ---------- */
.frame {
  position: absolute;
  inset: 0;
  padding: 78px 104px 96px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.frame.center { justify-content: center; }
.reveal h1, .reveal h2, .reveal h3, .reveal p { margin: 0; }
.reveal h1 {
  font-size: 88px;
  font-weight: 600;
  letter-spacing: -.038em;
  line-height: 1.0;
  text-wrap: balance;
}
.reveal h2 {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.08;
  max-width: 1320px;
  text-wrap: balance;
}
.reveal h3 {
  font-size: 30.8px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.2;
}
.lead {
  margin-top: 22px !important;
  font-size: 29.7px;
  line-height: 1.42;
  color: var(--ink-2);
  max-width: 1160px;
  text-wrap: pretty;
}
.small { font-size: 24px; line-height: 1.45; color: var(--ink-2); }
.muted { color: var(--muted); }
.hot { color: var(--hot); }
.safe { color: var(--safe); }
.amber { color: var(--amber); }
.navy { color: var(--navy); }
.mono { font-family: var(--mono); }
.strong { font-weight: 600; }
.stage { position: relative; flex: 1; margin-top: 40px; min-height: 0; }
.row { display: flex; gap: 36px; }
.col { display: flex; flex-direction: column; gap: 18px; }
.grow { flex: 1; }
.src {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  font-size: 16px;
  line-height: 1.35;
  color: var(--muted);
}
.src:has(> .apa ~ .apa) { font-size: 14px; line-height: 1.3; gap: 3px; }
.src i { font-style: italic; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 20.4px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--card);
  white-space: nowrap;
}
.tag.hot { color: var(--hot); border-color: color-mix(in srgb, var(--hot) 35%, transparent); background: var(--hot-soft); }
.tag.safe { color: var(--safe); border-color: color-mix(in srgb, var(--safe) 35%, transparent); background: var(--safe-soft); }
.tag.amber { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 35%, transparent); background: var(--amber-soft); }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--brand); display: inline-block; flex: none; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 30px;
  box-sizing: border-box;
}
.card h3 + p { margin-top: 10px; }
.card p { font-size: 25.2px; line-height: 1.45; color: var(--ink-2); }
.card.hot { border-color: color-mix(in srgb, var(--hot) 40%, transparent); background: linear-gradient(var(--hot-soft), var(--hot-soft)), var(--card); }
.card.safe { border-color: color-mix(in srgb, var(--safe) 40%, transparent); background: linear-gradient(var(--safe-soft), var(--safe-soft)), var(--card); }
.card.amber { border-color: color-mix(in srgb, var(--amber) 40%, transparent); background: linear-gradient(var(--amber-soft), var(--amber-soft)), var(--card); }
/* Gradient highlight: at most one per slide, on the key number or word, in that element's own role. */
.grad-hot, .grad-navy, .grad-safe, .grad-amber { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.grad-hot { background-image: linear-gradient(110deg, var(--hot) 15%, var(--hot-2) 85%); }
.grad-navy { background-image: linear-gradient(110deg, var(--navy) 15%, var(--navy-2) 85%); }
.grad-safe { background-image: linear-gradient(110deg, var(--safe) 15%, var(--safe-2) 85%); }
.grad-amber { background-image: linear-gradient(110deg, var(--amber) 15%, var(--amber-2) 85%); }
.label {
  font-size: 19.2px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
}
.reveal .takeaway {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 28.6px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.takeaway .dot { width: 14px; height: 14px; }
.big-num {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}
.eq {
  font-family: var(--math);
  font-size: 37.4px;
  color: var(--ink);
}
.eq i { font-style: italic; }
.eq .op { font-family: inherit; padding: 0 .2em; }
.eq sub, .eq sup { font-size: .62em; }
.math, math, [role="math"], svg text.math, svg tspan.math, svg .math text, svg .math tspan { font-family: var(--math); }
figure { margin: 0; }
img.fig { display: block; border-radius: 10px; }
.pixel { image-rendering: pixelated; }
.redact {
  display: inline-block;
  background: var(--ink);
  color: transparent;
  border-radius: 3px;
  user-select: none;
  line-height: 1.05;
}

/* ---------- scene engine ---------- */
[data-in] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .32s ease, transform .5s var(--ease);
}
[data-in].on { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .7s var(--ease); }
[data-in][data-fx="fade"] { transform: none; }
[data-in][data-fx="scale"] { transform: scale(.92); }
[data-in][data-fx="left"] { transform: translateX(-24px); }
[data-in][data-fx="right"] { transform: translateX(24px); }
[data-in][data-fx="wipe"] { transform: none; clip-path: inset(0 100% 0 0); transition: opacity .2s ease, clip-path .3s ease; }
[data-in][data-fx="wipe"].on { clip-path: inset(0 0 0 0); transition: opacity .2s ease, clip-path .9s var(--ease-io); }
[data-in][data-fx="drop"] { transform: translateY(-18px); }
[data-in].on[data-fx] { transform: none; }
[data-in].off-hidden { visibility: hidden; }
.dim { opacity: .22 !important; transition: opacity .45s var(--ease) !important; }
.focus-ring { box-shadow: 0 0 0 3px var(--hot); }

svg .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-io); }
svg .draw.on, .on svg .draw, svg .on .draw { stroke-dashoffset: 0; }
svg [data-in] { transform: none; }

.bar { position: relative; height: 30px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.bar > i {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--faint);
  border-radius: 4px;
  transition: transform 1.1s var(--ease);
}
.on .bar > i, .bar.on > i { transform: scaleX(calc(var(--v) / var(--max, 100))); }
.bar.hot > i { background: var(--hot); }
.bar.safe > i { background: var(--safe); }
.bar.amber > i { background: var(--amber); }
.bar.ink > i { background: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  [data-in], [data-in].on { transform: none !important; transition: opacity .3s linear !important; }
  .bar > i, svg .draw { transition-duration: .01s !important; }
}
.no-motion *, .no-motion *::before, .no-motion *::after { transition: none !important; animation: none !important; }

/* ---------- chapter thread (footer navigation) ---------- */
.thread-nav {
  position: absolute;
  left: 104px;
  right: 104px;
  top: 0;
  height: 0;
  pointer-events: none;
}
.thread-nav ol {
  position: absolute;
  right: 0;
  top: 34px;
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16.8px;
  font-weight: 500;
  color: var(--faint);
}
.thread-nav li { display: flex; align-items: center; gap: 7px; }
.thread-nav li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.thread-nav li.done { color: var(--muted); }
.thread-nav li.now { color: var(--brand); }

/* ---------- chapter dividers ---------- */
.divider canvas { position: absolute; inset: 0; width: 1600px; height: 900px; }
.divider .frame { justify-content: flex-end; padding-bottom: 110px; pointer-events: none; }
.divider .chapter-no {
  font: 500 22px/1 var(--mono);
  color: var(--brand);
  letter-spacing: .04em;
  margin-bottom: 22px;
}
.reveal .divider h2 { font-size: 80px; letter-spacing: -.038em; color: var(--ink); max-width: 1150px; }
.divider .lead { color: var(--ink-2); }
.reveal .divider h2.one-line { font-size: 64px; max-width: none; white-space: nowrap; }
.divider-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--paper) 92%, transparent) 80%);
  pointer-events: none;
}

/* ---------- title ---------- */
.title-slide .frame { padding-top: 0; align-items: center; justify-content: center; text-align: center; }
.title-slide h1 { max-width: 1300px; margin-top: 70px; font-size: 92px; }
.title-slide .lead { font-size: 35.2px; max-width: 1100px; margin-top: 30px !important; }
.title-slide .who { position: absolute; left: 0; right: 0; bottom: 110px; text-align: center; }
.title-slide .who strong { display: block; font-size: 35.2px; font-weight: 600; }
.title-slide .who span { display: block; margin-top: 8px; font-size: 25.2px; color: var(--muted); }
.title-logos { position: absolute; top: 56px; right: 72px; display: flex; align-items: center; gap: 40px; }
.title-logos img { display: block; }
.title-logos img:first-child { height: 150px; }
.title-logos img:last-child { height: 110px; }

/* ---------- era strip (hook / closing) ---------- */
.eras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; margin-top: 110px; }
.era .node::after {
  content: ""; position: absolute; left: 16px; top: 6px; width: 334px; height: 2px; background: var(--ink);
  transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease-io) .1s;
}
.era.on .node::after { transform: scaleX(1); }
.era:last-child .node::after { display: none; }
.era { padding-right: 34px; }
.era .yr { font: 500 21.6px/1 var(--mono); color: var(--muted); }
.era h3 { margin-top: 14px; font-size: 35.2px; }
.era .node { margin-top: 26px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); position: relative; z-index: 1; }
.era .cap { margin-top: 30px; font-size: 25.2px; color: var(--ink-2); line-height: 1.4; min-height: 60px; }
.era .fail { margin-top: 20px; font-size: 26.4px; color: var(--hot); font-weight: 600; line-height: 1.3; }
.era .fail small { display: block; font-weight: 400; color: var(--ink-2); font-size: 21.6px; margin-top: 6px; }
.era.on .node { background: var(--ink); border-color: var(--ink); }

/* ---------- research map ---------- */
.pubmap { position: relative; height: 640px; margin-top: 30px; }
.pubmap .links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pubmap .link { fill: none; stroke: var(--ink-2); stroke-width: 1.6; opacity: 0; transition: opacity .6s var(--ease); }
.pubmap .link.drawn { opacity: .32; }
.pubmap .link.main.drawn { stroke: var(--brand); opacity: .6; stroke-width: 2.2; }
.pubmap .link.flow { stroke-dasharray: 1.5 7.5; stroke-linecap: round; stroke-width: 2; opacity: .16; animation: map-flow 1.9s linear infinite; }
.pubmap .link.main.flow { stroke-width: 2.6; opacity: .42; }
@keyframes map-flow { to { stroke-dashoffset: -9; } }
@media (prefers-reduced-motion: reduce) { .pubmap .link.flow { animation: none; } }
.pubmap .lane { position: absolute; left: 236px; right: 0; height: 1px; background: var(--line-2); }
.pubmap .lane-label { position: absolute; left: 44px; width: 190px; font-size: 22px; font-weight: 600; color: var(--ink-2); transform: translateY(-50%); line-height: 1.2; }
.pubmap .yr { position: absolute; top: -14px; font: 500 18px/1 var(--mono); color: var(--muted); transform: translateX(-50%); }
.pubmap .pub { position: absolute; width: 0; height: 0; }
.pubmap .pub b { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--paper); }
.pubmap .pub span { position: absolute; left: 0; transform: translateX(-50%); font-size: 18px; line-height: 1.12; text-align: center; color: var(--ink); white-space: nowrap; }
.pubmap .pub.up span { bottom: 14px; }
.pubmap .pub.down span { top: 14px; }
.pubmap .pub em { display: block; font-style: normal; font-family: var(--mono); font-size: 15px; color: var(--muted); }
.pubmap .pub.up em { margin-top: 2px; }
.pubmap .pub.key b { left: -11px; top: -11px; width: 22px; height: 22px; background: var(--brand); box-shadow: 0 0 0 3px var(--paper), 0 0 0 9px color-mix(in srgb, var(--brand) 14%, transparent); }
.pubmap .pub.key span { color: var(--ink); font-weight: 600; font-size: 20px; }
.pubmap .pub.key.up span { bottom: 16px; }
.pubmap .pub.key.down span { top: 16px; }
.pubmap .pub { transition: opacity .6s var(--ease); }
.pubmap .pub b { transition: transform .55s cubic-bezier(.34, 1.4, .64, 1); }
.pubmap .pub span { transition: opacity .5s var(--ease) .1s, translate .6s var(--ease) .1s; }
.pubmap .pub:not(.shown) b { transform: scale(0); }
.pubmap .pub:not(.shown) span { opacity: 0; translate: 0 6px; }
.pubmap.focus .pub:not(.key) { opacity: .3; }
.pubmap.focus .link:not(.main) { opacity: .12; }

.pubmap .umbrella { position: absolute; left: 0; top: 40px; bottom: 50px; width: 22px; border: 2px solid var(--brand); border-right: 0; border-radius: 10px 0 0 10px; }
.pubmap .umbrella span { position: absolute; left: -16px; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); font: 600 19.2px/1 var(--mono); letter-spacing: .08em; color: var(--brand); white-space: nowrap; background: var(--paper); padding: 0 8px; }

.pubmap a.pub { color: inherit; text-decoration: none; cursor: pointer; }
.pubmap a.pub:hover span { color: var(--brand); }
.pubmap a.pub:hover b { background: var(--brand); }
.pubmap .ysep { position: absolute; top: 0; bottom: 36px; width: 1px; background: var(--line-2); }

/* ---------- roadmap ---------- */
.roadmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 70px; }
.roadmap .card { min-height: 330px; display: flex; flex-direction: column; gap: 14px; }
.roadmap .verb { font-size: 44px; font-weight: 600; letter-spacing: -.03em; }
.roadmap .q { font-size: 25.2px; line-height: 1.42; color: var(--ink-2); }
.roadmap .papers { margin-top: auto; display: flex; flex-direction: column; gap: 6px; font-size: 19.2px; color: var(--muted); }
.roadmap .papers b { color: var(--ink); font-weight: 600; }

.roadmap .no { font: 500 18px/1 var(--mono); color: var(--muted); letter-spacing: .04em; }
.roadmap .card.bg { background: transparent; border-style: dashed; }
.roadmap .verb { font-size: 38px; line-height: 1.08; }

/* ---------- panda ---------- */
.panda-row { display: flex; align-items: center; gap: 38px; margin-top: 70px; justify-content: center; }
.panda-row figure { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.panda-row img { width: 300px; height: 300px; border-radius: 12px; }
.panda-row .op { font-size: 46px; color: var(--muted); font-weight: 300; }
.panda-row .pred { font-size: 28.8px; text-align: center; line-height: 1.3; }
.panda-row .pred b { display: block; font-size: 33px; }

.adv-eq { margin: 56px auto auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.panda-row:has(+ .adv-eq) { margin-bottom: 0 !important; }
.adv-eq .eq { font-size: 50px; }
.adv-eq .eq sub { font-size: .58em; }
.adv-eq .eq .hot { font-family: inherit; font-weight: 600; }

/* ---------- generic two-up ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.split-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

/* ---------- code / terminal ---------- */
.term {
  background: #1b1b19;
  color: #e9e7df;
  border-radius: 14px;
  padding: 22px 26px;
  font: 400 22.2px/1.6 var(--mono);
  box-sizing: border-box;
  overflow: hidden;
}
.term .c { color: #8d8a80; }
.term .k { color: var(--t-amber); }
.term .s { color: #d6d2c6; }
.term .err { color: var(--t-hot); }
.term .ok { color: var(--t-safe); }
.term .bar-top { display: flex; gap: 8px; margin-bottom: 14px; }
.term .bar-top i { width: 11px; height: 11px; border-radius: 50%; background: #3b3a36; }
.term .ln { display: block; white-space: pre; }
.term .redact { background: #e9e7df; }

/* ---------- chat ---------- */
.chat { display: flex; flex-direction: column; gap: 14px; }
.bubble { padding: 16px 20px; border-radius: 16px; font-size: 25.2px; line-height: 1.42; max-width: 92%; }
.bubble.user { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
.bubble.bot { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble.bot.hot { border-color: color-mix(in srgb, var(--hot) 45%, transparent); background: linear-gradient(var(--hot-soft), var(--hot-soft)), var(--card); }

/* ---------- bar chart ---------- */
.chart { display: flex; flex-direction: column; gap: 13px; }
.chart .r { display: grid; grid-template-columns: 230px 1fr 80px; align-items: center; gap: 18px; font-size: 24px; }
.chart .r .v { font-family: var(--mono); font-size: 22.8px; text-align: right; color: var(--ink-2); }
.chart .r.me .v { color: var(--hot); font-weight: 600; }
.chart .r.me span:first-child { font-weight: 600; }
.chart .sep { height: 1px; background: var(--line); margin: 6px 0; }

/* ---------- bandit grid ---------- */
.bandit { display: grid; grid-template-columns: repeat(16, 1fr); gap: 9px; }
.bandit .enc {
  aspect-ratio: 1;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--card);
  position: relative;
  transition: background .25s ease, border-color .25s ease, transform .35s var(--ease);
}
.bandit .enc::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 14%;
  height: calc(var(--u, 0) * 62%); background: var(--faint); border-radius: 2px;
  transition: height .35s var(--ease);
}
.bandit .enc.all { background: var(--ink-2); border-color: var(--ink-2); }
.bandit .enc.pick { background: var(--hot); border-color: var(--hot); transform: translateY(-3px); }
.bandit .enc.pick::after, .bandit .enc.all::after { background: rgba(255, 255, 255, .55); }

/* ---------- radar / misc svg text ---------- */
svg text { font-family: var(--sans); fill: var(--ink); }
svg .t-muted { fill: var(--muted); }
svg .t-hot { fill: var(--hot); }
svg .t-safe { fill: var(--safe); }
svg .t-amber { fill: var(--amber); }
svg .mono { font-family: var(--mono); }
svg .t-paper { fill: var(--paper); }

/* ---------- print ---------- */
.reveal-print [data-in], .print-pdf [data-in] { transition: none !important; }
@media print {
  .thread-nav { display: none; }
}

/* ---------- paper title cards ---------- */
.paper-slide .frame { padding-left: 140px; padding-right: 140px; z-index: 1; }
/* Observatory backdrop (AISafetyHot): faint dot grid and orbit rings from off the right edge, fading out under the text;
   four signal points travel one ring slowly. Decorative only. */
.paper-slide::before, .paper-slide::after { content: ""; position: absolute; pointer-events: none; z-index: 0; }
.paper-slide::before {
  inset: 0;
  background:
    repeating-radial-gradient(circle at 1888px 414px, transparent 0 138px, var(--line-2) 138px 139.5px, transparent 139.5px 140px),
    radial-gradient(circle, var(--line) 1.3px, transparent 1.7px) 0 0 / 30px 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000 92%);
  mask-image: linear-gradient(90deg, transparent 45%, #000 92%);
}
.paper-slide::after {
  left: 1328px; top: -146px; width: 1120px; height: 1120px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 0, var(--brand) 0 5px, color-mix(in srgb, var(--brand) 20%, transparent) 6px 14px, transparent 15px),
    radial-gradient(circle at 0 50%, var(--navy) 0 4px, color-mix(in srgb, var(--navy) 18%, transparent) 5px 12px, transparent 13px),
    radial-gradient(circle at 50% 100%, var(--brand) 0 4px, color-mix(in srgb, var(--brand) 20%, transparent) 5px 12px, transparent 13px),
    radial-gradient(circle at 100% 50%, var(--navy) 0 5px, color-mix(in srgb, var(--navy) 18%, transparent) 6px 14px, transparent 15px);
  border: 1.5px solid var(--line);
  animation: paper-orbit 80s linear infinite;
}
@keyframes paper-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .paper-slide::after { animation: none; } }
.paper-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 46px; margin-top: 34px; }
.paper-logos img { display: block; height: 64px; width: auto; }
.paper-logos img[src*="smu-"] { height: 56px; }
.paper-logos img[src*="cityu-"] { height: 66px; }
.paper-logos img[src*="uiuc-"] { height: 30px; }
html[data-theme="dark"] .paper-logos img { box-sizing: content-box; padding: 8px 12px; border-radius: 10px; background: #f5f4f0; }
.paper-venue { font: 500 24px/1 var(--mono); color: var(--brand); letter-spacing: .03em; }
.reveal h2.paper-title { margin-top: 26px; font-size: 62px; letter-spacing: -.034em; max-width: 1320px; }
.paper-authors { margin-top: 30px !important; font-size: 29px; color: var(--ink-2); line-height: 1.45; }
.paper-authors b { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ink); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.paper-slide sup { font-size: .65em; color: var(--muted); margin-left: 3px; }
.paper-slide .affiliations { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 20px; font-size: 25px; line-height: 1.4; color: var(--ink-2); }
.paper-links { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 22px; }
.paper-slide .resource { display: inline-flex; align-items: center; gap: 14px; padding: 14px 22px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-size: 27px; text-decoration: none; background: var(--card); transition: border-color .2s, background .2s; }
.paper-slide .resource:hover { border-color: var(--navy); background: var(--navy-soft); }
.paper-slide .resource:focus-visible { outline: 3px solid var(--navy); outline-offset: 5px; }
.paper-slide .resource img, .paper-slide .resource svg { width: 36px; height: 36px; object-fit: contain; }
.paper-slide .resource svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="dark"] .paper-slide .github-mark { filter: invert(1); }

/* layout balance */
.stage.split, .stage.split-3 { align-content: center; }
.card p { font-size: 26.4px; }
.card p + p { margin-top: 10px !important; }
html.print-pdf .reveal .pdf-page > section { width: 1600px !important; height: 900px !important; padding: 0 !important; box-sizing: border-box; }

/* projection: centre content vertically */
.stage.col { justify-content: center; }
.panda-row, .eras, .roadmap { margin-top: auto !important; margin-bottom: auto; }
.frame > .split-3:not(.stage) { margin-top: auto !important; margin-bottom: auto; }

/* ---------- citations and references ---------- */
.src, .ref-list { --reference-indent: 32px; text-align: left; }
.src a, .ref-list a { color: inherit; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
.src a:hover, .ref-list a:hover { color: var(--navy); text-decoration-color: var(--navy); }
.src .apa, .ref-list li { padding-left: var(--reference-indent); text-indent: calc(-1 * var(--reference-indent)); }
.src .apa { display: block; }
.ref-list { margin: 34px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.ref-list li { font-size: 19px; line-height: 1.38; color: var(--ink-2); }

/* A shared bottom baseline; additional references grow upward and retain space above. */
.frame > .src { margin: auto 0 0; padding-top: 16px; flex-shrink: 0; }
.frame:has(> .src) { padding-bottom: 34px; }