/* ==========================================================================
   NVIDIA-ZPPO project page — dark-default, NVIDIA green, mobile-first
   ========================================================================== */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03', 'cv02';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hov); }
button { font: inherit; cursor: pointer; }
kbd {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.85em;
  color: var(--fg-2);
}

/* ---------- Theme tokens ---------- */
:root {
  --nv: #76B900;
  --nv-dark: #5f9600;
  --nv-soft: rgba(118, 185, 0, 0.14);
  --nv-glow: rgba(118, 185, 0, 0.35);
  --pos: #66cc44;
  --neg: #e64a4a;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --maxw: 1180px;
  --shadow-1: 0 2px 8px rgba(0,0,0,0.18);
  --shadow-2: 0 10px 40px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 30px rgba(118,185,0,0.18), 0 0 80px rgba(118,185,0,0.08);

  /* timing */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Dark is the default theme (applied to :root too), so the page is dark even
   before/without a data-theme attribute. Light only applies when explicitly set. */
:root,
html[data-theme="dark"] {
  --bg: #0a0c08;
  --bg-grad: radial-gradient(1100px 700px at 80% -10%, rgba(118,185,0,0.10), transparent 60%),
             radial-gradient(900px 600px at -10% 30%, rgba(118,185,0,0.06), transparent 60%),
             linear-gradient(180deg, #07090a 0%, #0a0c08 100%);
  --fg: #e9eee2;
  --fg-2: #b9bfb3;
  --fg-3: #8a9082;
  --surface: rgba(20, 23, 18, 0.7);
  --surface-2: #181b15;
  --surface-3: #1f2419;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.14);
  --link: var(--nv);
  --link-hov: #9adc24;
  --hl-bg-good: rgba(118,185,0,0.18);
  --hl-bg-bad: rgba(230,74,74,0.16);
  --table-row: rgba(255,255,255,0.025);
  --table-row-alt: rgba(255,255,255,0.045);
  --table-zppo: rgba(118,185,0,0.13);
}
html[data-theme="light"] {
  --bg: #f7faf2;
  /* softer near-black for body text */
  --bg-grad: radial-gradient(1100px 700px at 80% -10%, rgba(118,185,0,0.18), transparent 60%),
             radial-gradient(900px 600px at -10% 30%, rgba(118,185,0,0.08), transparent 60%),
             linear-gradient(180deg, #ffffff 0%, #f3f7ec 100%);
  --fg: #2a2f25;
  --fg-2: #525a4c;
  --fg-3: #7d8475;
  --surface: rgba(255,255,255,0.82);
  --surface-2: #ffffff;
  --surface-3: #f0f4e8;
  --line: rgba(15,20,16,0.10);
  --line-strong: rgba(15,20,16,0.18);
  --link: #4a8000;
  --link-hov: #5fa600;
  --hl-bg-good: rgba(118,185,0,0.18);
  --hl-bg-bad: rgba(230,74,74,0.12);
  --table-row: #ffffff;
  --table-row-alt: #f5f9ec;
  --table-zppo: rgba(118,185,0,0.16);
}

body {
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
}

/* ---------- Top nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg) 60%, transparent));
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav__brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.nav__logo {
  height: 26px;
  width: auto;
  display: block;
  color: var(--fg);
  transition: transform 200ms var(--ease), filter 200ms var(--ease);
}
html[data-theme="dark"] .nav__logo {
  /* subtle green glow in dark mode so the eye reads cleanly against the dark background */
  filter: drop-shadow(0 1px 10px rgba(118,185,0,0.20));
}
.nav__brand:hover .nav__logo { transform: scale(1.03); }
.nav__links {
  display: flex;
  gap: 22px;
  margin: 0;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
  overflow: hidden;
}
.nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2);
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.nav__links a:hover {
  color: var(--fg);
  border-bottom-color: var(--nv);
}
.nav__toggle {
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--fg);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 160ms var(--ease), transform 160ms var(--ease), border-color 160ms var(--ease);
}
.nav__toggle:hover { border-color: var(--nv); transform: rotate(10deg); }
html[data-theme="dark"] .icon-sun { display: block; }
html[data-theme="dark"] .icon-moon { display: none; }
html[data-theme="light"] .icon-sun { display: none; }
html[data-theme="light"] .icon-moon { display: block; }

/* Vertical scroll-progress rail pinned to the right edge of the viewport. */
.scroll-rail {
  position: fixed;
  top: 0; right: 0;
  width: 4px;
  height: 100vh;
  height: 100dvh;
  z-index: 60;
  background: var(--line);
  pointer-events: none;
}
.scroll-rail__fill {
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--nv), #c5ff3a);
  box-shadow: 0 0 10px var(--nv-glow);
  transition: height 80ms linear;
}
/* The fixed progress rail overlays the right edge of cards on phones; hide it
   on mobile (native scrolling is enough there). */
@media (max-width: 640px) { .scroll-rail { display: none; } }
@media (prefers-reduced-motion: reduce) { .scroll-rail__fill { transition: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding: 64px 22px 32px;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 0%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 30%, transparent 75%);
  opacity: 0.55;
}
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
/* Ambient now sits ONLY behind ZPPO — centered top */
.hero__glow--a {
  top: 40px;
  left: 50%;
  width: 820px;
  height: 460px;
  transform: translateX(-50%);
  opacity: 0.7;
  background: radial-gradient(ellipse at center,
    rgba(118,185,0,0.32) 0%,
    rgba(118,185,0,0.18) 35%,
    transparent 70%);
  animation: zppo-ambient 12s ease-in-out infinite;
}
/* Side glow disabled */
.hero__glow--b { display: none; }

@keyframes zppo-ambient {
  0%, 100% {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 0.65;
  }
  50% {
    transform: translateX(-50%) translateY(-14px) scale(1.06);
    opacity: 0.85;
  }
}
@media (max-width: 820px) {
  .hero__glow--a {
    width: 100%;
    height: 320px;
    top: 20px;
  }
}

.hero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
}

.hero__title {
  margin: 0 auto 14px;
  max-width: 1180px;
  font-family: 'Rubik', sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.04;
}
.hero__zppo {
  display: block;
  font-size: clamp(76px, 14vw, 200px);
  font-weight: 800;
  letter-spacing: -0.06em;
  position: relative;
  filter: drop-shadow(0 8px 30px rgba(118,185,0,0.28));
  transform-origin: 50% 60%;
  opacity: 0;
  animation:
    zppo-emerge    1.0s cubic-bezier(0.34,1.56,0.64,1) 1.9s forwards,
    zppo-glow      7.5s ease-in-out 3.4s infinite,
    zppo-breathe   9.5s cubic-bezier(0.45,0.05,0.55,0.95) 4.0s infinite,
    zppo-inhale    9.5s cubic-bezier(0.45,0.05,0.55,0.95) 4.0s infinite;
}
.zppo-letter {
  display: inline-block;
  background-image:
    linear-gradient(115deg,
      rgba(255,255,255,0) 38%,
      rgba(255,255,255,0.85) 50%,
      rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #ffffff 0%, #cdebb1 45%, #76B900 100%);
  background-size: 250% 100%, 100% 100%;
  background-position: 200% 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 4px 60px rgba(118,185,0,0.18);
  will-change: transform, background-position;
  opacity: 1;
}
html[data-theme="light"] .zppo-letter {
  background-image:
    linear-gradient(115deg,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,0.28) 50%,
      rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #76B900 0%, #5d9300 55%, #3d6200 100%);
  background-size: 250% 100%, 100% 100%;
  background-position: 200% 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 18px rgba(76,140,0,0.25);
}
html[data-theme="light"] .hero__zppo {
  filter: drop-shadow(0 6px 18px rgba(76,140,0,0.28));
}
.zppo-letter:nth-child(1) { animation:
  letter-in .7s var(--ease) 1.90s both,
  zppo-bob 4.8s ease-in-out 3.4s infinite,
  zppo-shimmer 5.5s ease-in-out 3.4s infinite;
}
.zppo-letter:nth-child(2) { animation:
  letter-in .7s var(--ease) 2.02s both,
  zppo-bob 4.8s ease-in-out 3.55s infinite,
  zppo-shimmer 5.5s ease-in-out 3.65s infinite;
}
.zppo-letter:nth-child(3) { animation:
  letter-in .7s var(--ease) 2.14s both,
  zppo-bob 4.8s ease-in-out 3.70s infinite,
  zppo-shimmer 5.5s ease-in-out 3.90s infinite;
}
.zppo-letter:nth-child(4) { animation:
  letter-in .7s var(--ease) 2.26s both,
  zppo-bob 4.8s ease-in-out 3.85s infinite,
  zppo-shimmer 5.5s ease-in-out 4.15s infinite;
}
@keyframes letter-in {
  0% { transform: translateY(50px) scale(0.82); filter: blur(10px); }
  60% { transform: translateY(-4px) scale(1.02); filter: blur(0); }
  100% { transform: none; filter: blur(0); }
}
@keyframes zppo-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes zppo-shimmer {
  0%   { background-position: 200% 0, 0 0; }
  55%  { background-position: -120% 0, 0 0; }
  100% { background-position: -120% 0, 0 0; }
}
@keyframes zppo-glow {
  0%, 100% { filter: drop-shadow(0 8px 30px rgba(118,185,0,0.28)); }
  50%      { filter: drop-shadow(0 12px 48px rgba(118,185,0,0.55)); }
}
@keyframes zppo-breathe {
  0%, 100% { letter-spacing: -0.08em; }
  44%      { letter-spacing:  0.16em; }
  56%      { letter-spacing:  0.16em; }
}
@keyframes zppo-inhale {
  0%, 100% { transform: scale(1.000); }
  44%      { transform: scale(1.028); }
  56%      { transform: scale(1.028); }
}
@keyframes zppo-emerge {
  0%   { opacity: 0; transform: translateY(40px) scale(0.6); filter: drop-shadow(0 0 0 transparent) blur(6px); }
  55%  { opacity: 1; transform: translateY(-10px) scale(1.07); filter: drop-shadow(0 12px 48px rgba(118,185,0,0.55)) blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 8px 30px rgba(118,185,0,0.28)) blur(0); }
}
@keyframes full-zoom {
  0%   { opacity: 0;  transform: translateY(calc(-7vw - 12px)) scale(var(--full-peak, 1.35)); }
  18%  { opacity: 1;  transform: translateY(calc(-7vw - 12px)) scale(var(--full-peak, 1.35)); }
  58%  { opacity: 1;  transform: translateY(calc(-7vw - 12px)) scale(var(--full-peak, 1.35)); }
  100% { opacity: 1;  transform: translateY(0) scale(1); }
}
@keyframes cap-lift {
  0%, 56% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }
  68% {
    transform: translateY(-0.18em) scale(1.18);
    filter: drop-shadow(0 0 18px rgba(155,220,40,0.85));
  }
  80% {
    transform: translateY(-0.38em) scale(1.32);
    filter: drop-shadow(0 0 28px rgba(118,185,0,1));
  }
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 6px rgba(118,185,0,0.4));
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__zppo,
  .zppo-letter:nth-child(1),
  .zppo-letter:nth-child(2),
  .zppo-letter:nth-child(3),
  .zppo-letter:nth-child(4),
  .hero__full,
  .hero__full-cap { animation: none !important; }
  .hero__zppo { letter-spacing: -0.06em !important; transform: none !important; opacity: 1 !important; }
  .hero__full { transform: none !important; opacity: 1 !important; }
  .hero__full-cap { transform: none !important; filter: none !important; }
  .zppo-letter { background-position: -120% 0, 0 0; }
}
.hero__full {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.42em;
  font-family: "JetBrains Mono", "Fira Code", "Consolas", "Courier New", ui-monospace, monospace;
  font-feature-settings: "ss01", "cv01", "calt";
  font-weight: 500;
  font-size: var(--full-fs, clamp(24px, 4.0vw, 46px));
  color: var(--fg-2);
  margin-top: 16px;
  letter-spacing: 0.002em;
  line-height: 1.12;
  text-shadow: 0 1px 24px rgba(118,185,0,0.08);
  transform-origin: 50% 0%;
  will-change: transform, opacity;
  animation: full-zoom 2.7s cubic-bezier(0.65,0.05,0.36,1) 0s backwards;
}
/* JS fits the full title to the viewport: on wide screens it sizes the line to
   fill the available width on a single line (.is-oneline); on narrow screens the
   class is removed so the words wrap with the responsive clamp() below. */
.hero__full.is-oneline {
  flex-wrap: nowrap;
  white-space: nowrap;
}
.hero__full-word {
  display: inline-block;
  white-space: nowrap;
}
.hero__full-of {
  display: inline-block;
  color: inherit;
  font-weight: 500;
  opacity: 1;
  margin: 0 -0.05em;
}
.hero__full-cap {
  display: inline-block;
  font-weight: 800;
  color: var(--nv);
  font-size: 1.05em;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #cdebb1 0%, #76B900 70%, #5a8c00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 24px rgba(118,185,0,0.35);
  transition: transform 220ms var(--ease), filter 220ms var(--ease);
  transform-origin: 50% 100%;
  animation: cap-lift 2.7s cubic-bezier(0.65,0.05,0.36,1) 0s backwards;
}
.hero__full-word:nth-child(1) .hero__full-cap { animation-delay: 0s;    } /* Z */
.hero__full-word:nth-child(3) .hero__full-cap { animation-delay: 0.06s; } /* P (Proximal) */
.hero__full-word:nth-child(4) .hero__full-cap { animation-delay: 0.12s; } /* P (Policy) */
.hero__full-word:nth-child(5) .hero__full-cap { animation-delay: 0.18s; } /* O */
.hero__full-cap:hover {
  transform: translateY(-0.04em) scale(1.06);
  filter: drop-shadow(0 4px 14px rgba(118,185,0,0.55));
}
html[data-theme="light"] .hero__full { color: var(--fg-2); }
html[data-theme="light"] .hero__full-cap {
  background: linear-gradient(180deg, #2d4a05 0%, #76B900 60%, #4a7800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__sub {
  position: relative;
  margin: 28px auto 24px;
  font-family: 'Rubik', sans-serif;
  font-size: clamp(22px, 3.8vw, 40px);
  font-weight: 500;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  letter-spacing: -0.01em;
  color: var(--fg-2);
}
.hero__sub > span:not(.hero__hl):not(.hero__sub-sep):not(.emoji-wrap) {
  color: var(--fg-2);
  font-weight: 500;
}
/* Robot teacher sits OUTSIDE the centered text flow */
.emoji-wrap {
  position: absolute;
  left: 0;
  top: 50%;
  margin-left: -2.6em;
  margin-top: -0.45em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
  transform: translateY(-50%);
  animation: robot-fly 9s linear 2s infinite;
}
@keyframes robot-fly {
  /* idle — sitting just left of "Teacher" */
  0%, 12% {
    transform: translate(0, -50%) rotate(0deg) scale(1);
    opacity: 1;
    filter: drop-shadow(0 4px 12px rgba(118,185,0,0.25));
  }
  /* tiny wind-up tilt */
  16% {
    transform: translate(-0.3em, -50%) rotate(-12deg) scale(0.96, 1.04);
    opacity: 1;
  }
  /* launch — flying forward with trail */
  22% {
    transform: translate(2em, -55%) rotate(12deg) scale(1);
    opacity: 1;
    filter:
      drop-shadow(-14px 0 10px rgba(155,220,40,0.75))
      drop-shadow(-30px 0 16px rgba(118,185,0,0.45))
      drop-shadow(-52px 0 24px rgba(118,185,0,0.22))
      drop-shadow(-80px 0 34px rgba(118,185,0,0.10));
  }
  /* mid-flight at peak speed — outside Prompts box, fully visible */
  32% {
    transform: translate(5.8em, -55%) rotate(10deg) scale(1);
    opacity: 1;
    filter:
      drop-shadow(-16px 0 12px rgba(155,220,40,0.80))
      drop-shadow(-34px 0 18px rgba(118,185,0,0.50))
      drop-shadow(-58px 0 28px rgba(118,185,0,0.25))
      drop-shadow(-90px 0 40px rgba(118,185,0,0.12));
  }
  /* CROSSING the Prompts box edge — fade triggers instantly */
  38% {
    transform: translate(7em, -52%) rotate(5deg) scale(0.95);
    opacity: 0.75;
    filter:
      drop-shadow(-14px 0 14px rgba(155,220,40,0.85))
      drop-shadow(-30px 0 20px rgba(118,185,0,0.5))
      drop-shadow(0 0 22px rgba(155,220,40,0.6));
  }
  /* deep inside Prompts — fading through */
  44% {
    transform: translate(7.9em, -50%) rotate(2deg) scale(0.78);
    opacity: 0.4;
    filter:
      drop-shadow(0 0 24px rgba(155,220,40,0.95))
      drop-shadow(0 0 50px rgba(118,185,0,0.55));
  }
  /* reaching "m" — almost gone */
  48% {
    transform: translate(8.6em, -50%) rotate(0deg) scale(0.55);
    opacity: 0.15;
    filter:
      drop-shadow(0 0 30px rgba(155,220,40,1))
      drop-shadow(0 0 64px rgba(118,185,0,0.65));
  }
  /* fully absorbed at "m" */
  54% {
    transform: translate(8.6em, -50%) rotate(0deg) scale(0.32);
    opacity: 0;
    filter:
      drop-shadow(0 0 38px rgba(155,220,40,1))
      drop-shadow(0 0 78px rgba(118,185,0,0.7));
  }
  /* invisible teleport back to home */
  75% {
    transform: translate(0, -50%) rotate(0deg) scale(0.5);
    opacity: 0;
    filter: none;
  }
  /* pop back in at home — small scale bounce */
  80% {
    transform: translate(0, -50%) rotate(0deg) scale(1.18);
    opacity: 1;
    filter: drop-shadow(0 0 18px rgba(155,220,40,0.85));
  }
  86% {
    transform: translate(0, -50%) rotate(0deg) scale(0.96);
    opacity: 1;
    filter: drop-shadow(0 4px 14px rgba(118,185,0,0.4));
  }
  92%, 100% {
    transform: translate(0, -50%) rotate(0deg) scale(1);
    opacity: 1;
    filter: drop-shadow(0 4px 12px rgba(118,185,0,0.25));
  }
}
.teacher-mascot {
  width: 1.95em;
  height: 1.95em;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(118,185,0,0.38));
  transition: transform 280ms var(--ease), filter 280ms var(--ease);
  overflow: visible;
}

.emoji-wrap:hover .teacher-mascot {
  transform: rotate(-6deg) scale(1.08);
  filter: drop-shadow(0 6px 18px rgba(118,185,0,0.45));
}
@media (prefers-reduced-motion: reduce) {
  .emoji-wrap { animation: none; }
}
@keyframes nudge {
  0%, 92%, 100% { transform: translateY(2px) rotate(0); }
  94% { transform: translateY(2px) rotate(-10deg); }
  96% { transform: translateY(2px) rotate(10deg); }
}
.hero__sub-sep { margin-left: -6px; }
.hero__hl {
  position: relative;
  font-weight: 800;
  padding: 0 6px;
  border-radius: 8px;
}
.hero__hl--good {
  color: #b6e85f;
  background: linear-gradient(180deg, rgba(118,185,0,0.22) 0%, rgba(118,185,0,0.05) 100%);
  text-shadow: 0 0 20px rgba(118,185,0,0.35);
  box-shadow: inset 0 0 0 1px rgba(118,185,0,0.45);
}
html[data-theme="light"] .hero__hl--good { color: #4a8000; }
.hero__hl--bad {
  background: linear-gradient(180deg, #ffc1da 0%, #ff66a3 38%, #ff2e80 72%, #e6005c 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration: line-through;
  text-decoration-color: #a8003f;
  text-decoration-thickness: 5px;
  text-underline-offset: 4px;
  filter: drop-shadow(0 0 18px rgba(255,46,128,0.55))
          drop-shadow(0 0 32px rgba(255,46,128,0.25));
}
html[data-theme="light"] .hero__hl--bad {
  background: linear-gradient(180deg, #ff4d8f 0%, #d61f6d 55%, #9c0e4e 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration-color: #6e0030;
  filter: drop-shadow(0 0 10px rgba(214,31,109,0.35));
}

/* Authors */
.authors {
  list-style: none;
  margin: 40px auto 8px;
  padding: 32px 0 0;
  /* Wider track + slightly smaller type so all 11 names fit on a balanced
     2 lines on laptops/desktops (instead of spilling a lone name onto a 3rd). */
  max-width: 1160px;
  /* Inline flow + text-wrap: balance so the browser distributes the names
     evenly across lines (no lone "orphan" name). Each name is kept whole via
     white-space: nowrap on the <li>. */
  display: block;
  text-align: center;
  text-wrap: balance;
  line-height: 1.7;
  /* Unified site font (Rubik) — a clean modern sans that stands in for the
     proprietary NVIDIA Sans across the whole page. */
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(16px, 1.85vw, 21px);
  letter-spacing: 0.002em;
  position: relative;
}
.authors::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(118,185,0,0.12) 6%,
    rgba(118,185,0,0.45) 28%,
    rgba(118,185,0,0.85) 50%,
    rgba(118,185,0,0.45) 72%,
    rgba(118,185,0,0.12) 94%,
    transparent 100%);
  box-shadow:
    0 0 14px rgba(118,185,0,0.35),
    0 0 32px rgba(118,185,0,0.12);
  pointer-events: none;
}
.authors::after {
  /* accent node at center of divider */
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nv);
  box-shadow: 0 0 10px var(--nv), 0 0 20px rgba(118,185,0,0.55);
  pointer-events: none;
}
html[data-theme="light"] .authors::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(118,185,0,0.20) 6%,
    rgba(118,185,0,0.55) 28%,
    var(--nv) 50%,
    rgba(118,185,0,0.55) 72%,
    rgba(118,185,0,0.20) 94%,
    transparent 100%);
  box-shadow: 0 0 14px rgba(118,185,0,0.30);
}
.authors li {
  color: var(--fg-2);
  display: inline;
  /* Keep each name (and its dagger) whole; line breaks only happen between
     authors, never inside a name. */
  white-space: nowrap;
}
/* Bullet separator between every author except the last. Balanced spacing on
   both sides of the dot. */
.authors li:not(:last-child)::after {
  content: "•";
  color: var(--fg);
  opacity: 0.55;
  font-size: 0.75em;
  font-weight: 700;
  pointer-events: none;
  margin: 0 7px 0 10px;
}
.authors a {
  color: #e6ede0;
  font-weight: 400;
  position: relative;
  padding: 0 1px;
  background-image: linear-gradient(180deg, transparent calc(100% - 2px), rgba(118,185,0,0) calc(100% - 2px), rgba(118,185,0,0) 100%);
  background-position: 0 100%;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  transition: color 220ms var(--ease), background-image 220ms var(--ease), text-shadow 220ms var(--ease);
}
html[data-theme="light"] .authors a { color: #353a30; }
.authors a:hover {
  color: var(--nv);
  background-image: linear-gradient(180deg, transparent calc(100% - 2px), var(--nv) calc(100% - 2px), var(--nv) 100%);
  text-shadow: 0 0 12px rgba(118,185,0,0.45);
}
/* LaTeX-style superscript dagger: ^\dagger right next to the name */
.aff {
  display: inline-block;
  position: relative;
  top: -0.55em;
  vertical-align: baseline;
  color: var(--fg);
  font-weight: 400;
  /* Same font (Rubik) as every other dagger on the page so the author †, the
     "†Project Lead" note, and the table method daggers all share one shape. */
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.7em;
  line-height: 0;
  margin: 0 0 0 1px;
  padding: 0;
}
html[data-theme="light"] .aff {
  color: #0d1410;
  text-shadow: none;
}
.affiliation {
  margin: 34px auto 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  color: var(--fg-2);
}
.affiliation__org {
  font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: var(--fg);
  font-size: clamp(21px, 2.3vw, 26px);
  letter-spacing: 0.01em;
  line-height: 1.35;
}
/* Official NVIDIA vertical logo (eye stays green; wordmark uses currentColor
   so it reads white in dark mode and dark in light mode). */
.affiliation__logo {
  display: block;
  height: clamp(54px, 7vw, 76px);
  width: auto;
  color: var(--fg);
}
html[data-theme="light"] .affiliation__logo { color: #0d1410; }
.affiliation__note {
  color: var(--fg);
  font-weight: 400;
  font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 1.75vw, 20px);
  letter-spacing: 0;
  line-height: 1.35;
  opacity: 1;
}
.affiliation__note sup {
  font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--fg);
  font-weight: 400;
  margin-right: 2px;
}

/* CTA */
.hero__cta {
  margin: 56px auto 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  justify-content: center;
  align-items: flex-start;
}
.cta-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
/* "✨ Coming soon to public ✨" subtext under Code/Models */
.cta-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--nv);
  text-shadow: 0 0 12px rgba(118,185,0,0.4);
  padding: 0 4px;
}
html[data-theme="light"] .cta-note {
  color: var(--nv);
  text-shadow: 0 0 8px rgba(118,185,0,0.25);
}
.cta-note__text {
  background: linear-gradient(95deg, #9bdc28 0%, #b8f73a 50%, #9bdc28 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cta-text-shimmer 3.6s ease-in-out infinite;
}
html[data-theme="light"] .cta-note__text {
  background: linear-gradient(95deg, #4a7800 0%, #76B900 50%, #4a7800 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes cta-text-shimmer {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}
/* Bling-bling sparkle ✨ — twinkle + scale + rotate */
.cta-note .spark {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  transform-origin: center;
  filter: drop-shadow(0 0 4px rgba(155,220,40,0.7));
  animation: bling 1.6s ease-in-out infinite;
}
.cta-note .spark:last-child {
  animation-delay: 0.8s;
}
.cta-col:nth-child(3) .cta-note .spark { animation-duration: 1.9s; }
.cta-col:nth-child(3) .cta-note .spark:last-child { animation-delay: 0.6s; }
@keyframes bling {
  0%, 100% {
    transform: scale(0.85) rotate(0deg);
    opacity: 0.65;
    filter: drop-shadow(0 0 3px rgba(155,220,40,0.5));
  }
  25% {
    transform: scale(1.25) rotate(18deg);
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(155,220,40,1))
            drop-shadow(0 0 22px rgba(118,185,0,0.6));
  }
  50% {
    transform: scale(1.05) rotate(-12deg);
    opacity: 0.9;
    filter: drop-shadow(0 0 10px rgba(155,220,40,0.8));
  }
  75% {
    transform: scale(1.2) rotate(8deg);
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(155,220,40,1))
            drop-shadow(0 0 20px rgba(118,185,0,0.5));
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta-note .spark { animation: none; }
  .cta-note__text { animation: none; background: none; -webkit-text-fill-color: currentColor; }
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease);
}
.btn:hover {
  border-color: var(--nv);
  color: var(--fg);
  background: color-mix(in srgb, var(--surface-2) 80%, var(--nv-soft));
  transform: translateY(-1px);
}
.btn--ghost[aria-disabled="true"] {
  opacity: 0.85;
  cursor: not-allowed;
}
.btn--locked { color: var(--fg-2); }
.btn__icon { flex: 0 0 auto; display: block; transition: transform 220ms var(--ease); }
.btn:hover .btn__icon { transform: translateY(-1px) scale(1.06); }
.btn__pill {
  margin-left: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--nv-soft);
  color: var(--nv);
  border: 1px solid rgba(118,185,0,0.45);
}

/* ============ Themed CTA buttons ============ */
/* Common: brighter text + more solid background */
.btn--paper, .btn--code, .btn--models {
  color: #ffffff;
  font-weight: 700;
  backdrop-filter: blur(2px);
}

/* Paper — ArXiv red */
.btn--paper {
  border-color: rgba(239,68,68,0.85);
  background: linear-gradient(180deg, rgba(220,38,38,0.32), rgba(127,29,29,0.28));
}
.btn--paper:hover {
  border-color: #ff6b6b;
  background: linear-gradient(180deg, rgba(239,68,68,0.42), rgba(153,27,27,0.36));
  box-shadow: 0 6px 22px rgba(220,38,38,0.35);
}
.btn--paper .btn__pill {
  background: rgba(255,255,255,0.92);
  color: #b91c1c;
  border-color: rgba(255,255,255,0.7);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
}

/* Code — GitHub purple/violet */
.btn--code {
  border-color: rgba(167,139,250,0.85);
  background: linear-gradient(180deg, rgba(139,92,246,0.36), rgba(76,29,149,0.30));
}
.btn--code:hover {
  border-color: #c4b5fd;
  background: linear-gradient(180deg, rgba(167,139,250,0.46), rgba(91,33,182,0.38));
  box-shadow: 0 6px 22px rgba(139,92,246,0.40);
}
.btn--code .btn__pill {
  background: rgba(255,255,255,0.92);
  color: #6d28d9;
  border-color: rgba(255,255,255,0.7);
}

/* Models — HuggingFace amber/yellow */
.btn--models {
  border-color: rgba(255,178,0,0.85);
  background: linear-gradient(180deg, rgba(255,178,0,0.34), rgba(146,64,14,0.30));
}
.btn--models:hover {
  border-color: #ffd200;
  background: linear-gradient(180deg, rgba(255,210,0,0.44), rgba(146,64,14,0.36));
  box-shadow: 0 6px 22px rgba(255,178,0,0.40);
}
.btn--models .btn__pill {
  background: rgba(255,255,255,0.92);
  color: #a16207;
  border-color: rgba(255,255,255,0.7);
}

/* ===== Light-mode CTA buttons — saturated text, solid colored pills ===== */
html[data-theme="light"] .btn--paper,
html[data-theme="light"] .btn--code,
html[data-theme="light"] .btn--models {
  font-weight: 700;
}

html[data-theme="light"] .btn--paper {
  color: #9b1c1c;
  border-color: rgba(185,28,28,0.85);
  background: linear-gradient(180deg, rgba(220,38,38,0.18), rgba(220,38,38,0.08));
}
html[data-theme="light"] .btn--paper:hover {
  color: #7f1d1d;
  border-color: #b91c1c;
  background: linear-gradient(180deg, rgba(220,38,38,0.28), rgba(220,38,38,0.14));
  box-shadow: 0 6px 22px rgba(220,38,38,0.30);
}
html[data-theme="light"] .btn--paper .btn__pill {
  background: #b91c1c;
  color: #ffffff;
  border-color: #991b1b;
}

html[data-theme="light"] .btn--code {
  color: #5b21b6;
  border-color: rgba(91,33,182,0.80);
  background: linear-gradient(180deg, rgba(139,92,246,0.18), rgba(139,92,246,0.08));
}
html[data-theme="light"] .btn--code:hover {
  color: #4c1d95;
  border-color: #6d28d9;
  background: linear-gradient(180deg, rgba(139,92,246,0.28), rgba(139,92,246,0.14));
  box-shadow: 0 6px 22px rgba(139,92,246,0.32);
}
html[data-theme="light"] .btn--code .btn__pill {
  background: #6d28d9;
  color: #ffffff;
  border-color: #5b21b6;
}

html[data-theme="light"] .btn--models {
  color: #92400e;
  border-color: rgba(180,83,9,0.80);
  background: linear-gradient(180deg, rgba(255,178,0,0.22), rgba(255,178,0,0.10));
}
html[data-theme="light"] .btn--models:hover {
  color: #78350f;
  border-color: #b45309;
  background: linear-gradient(180deg, rgba(255,178,0,0.32), rgba(255,178,0,0.16));
  box-shadow: 0 6px 22px rgba(255,178,0,0.35);
}
html[data-theme="light"] .btn--models .btn__pill {
  background: #b45309;
  color: #ffffff;
  border-color: #92400e;
}

/* ---------- Section base ---------- */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 84px 22px;
  position: relative;
  scroll-margin-top: 80px;
}
/* Method now holds a single figure — trim its tall bottom padding so it doesn't
   leave a big empty gap before the next section. */
#method { padding-bottom: clamp(8px, 1.2vw, 18px); }
/* Method holds a single figure, so pull the next section up close instead of
   leaving the full 84px section gap below it. */
#qualitative { padding-top: clamp(18px, 2.6vw, 32px); max-width: min(1340px, 95vw); }
#qualitative .section__head { text-align: center; }

/* Full-bleed shaded bands so Method and Qualitative read as distinct sections
   (each a different tone), like the TL;DR / RQ bands. */
#method::before,
#results::before,
#qualitative::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
#method::before      { background: #0f130c; }   /* green-tinted dark */
#results::before     { background: #0c1110; }   /* deep teal-neutral dark */
#qualitative::before { background: #0d120b; }   /* neutral green-tinted dark (not blue) */
/* same raised-slab lift as the TL;DR / Insight bands */
#method::before,
#results::before,
#qualitative::before {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 46px -22px rgba(0, 0, 0, 0.85);
}
html[data-theme="light"] #method::before      { background: #edf2e2; border-color: rgba(15, 20, 16, 0.08); }
html[data-theme="light"] #results::before     { background: #e6efe9; border-color: rgba(15, 20, 16, 0.08); }
html[data-theme="light"] #qualitative::before { background: #eef2e7; border-color: rgba(15, 20, 16, 0.08); }
html[data-theme="light"] #method::before,
html[data-theme="light"] #results::before,
html[data-theme="light"] #qualitative::before {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 20px 46px -22px rgba(15, 20, 16, 0.22);
}
.section__head { margin-bottom: 28px; }

/* ============================================================
   Results · graduation-dynamics small multiples (animated)
   ============================================================ */
:root {
  --grad-zppo: #76B900;          /* protagonist */
  --grad-grpo: #a685ff;          /* GRPO† */
  --grad-axis: rgba(255, 255, 255, 0.20);
  --grad-grid: rgba(255, 255, 255, 0.07);
  --grad-card: rgba(255, 255, 255, 0.025);
}
html[data-theme="light"] {
  --grad-grpo: #7a52e0;
  --grad-axis: rgba(15, 20, 16, 0.22);
  --grad-grid: rgba(15, 20, 16, 0.08);
  --grad-card: rgba(15, 20, 16, 0.018);
}
.grad { width: min(1000px, 94vw); margin: clamp(20px, 3vw, 34px) auto 0; }
.grad__legend {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(18px, 3vw, 40px);
  margin-bottom: clamp(16px, 2.4vw, 26px);
}
.grad__leg {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: clamp(13px, 1.4vw, 15.5px); font-weight: 600; color: var(--fg-2);
}
.grad__swatch { width: 28px; flex: 0 0 auto; }
.grad__leg--zppo .grad__swatch { border-top: 3px solid var(--grad-zppo); }
.grad__leg--grpo .grad__swatch { border-top: 3px dashed var(--grad-grpo); }

/* 2×2 so each chart is ~2× larger (the SVG scales up, so axes/labels/curves all
   become legible). One column on narrow screens. */
.grad__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.2vw, 30px);
}
@media (max-width: 620px) { .grad__grid { grid-template-columns: 1fr; } }

.grad-chart {
  background: var(--grad-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 16px 10px;
}
.grad-chart__title {
  text-align: center;
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 600; color: var(--fg-2);
  margin-bottom: 6px;
}
.grad-chart__title b { color: var(--fg); font-weight: 800; }
.grad-chart svg { width: 100%; height: auto; display: block; overflow: visible; }

.grad-axis { stroke: var(--grad-axis); stroke-width: 1; }
.grad-grid { stroke: var(--grad-grid); stroke-width: 1; stroke-dasharray: 2 4; }
.grad-axis-label, .grad-axis-title {
  fill: var(--fg-3);
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
}
.grad-axis-label { font-size: 9px; }
.grad-axis-title { font-size: 9.5px; font-weight: 600; }

.grad-line { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.grad-line--zppo { stroke: var(--grad-zppo); filter: drop-shadow(0 0 4px rgba(118, 185, 0, 0.35)); }
.grad-line--grpo { stroke: var(--grad-grpo); stroke-dasharray: 7 5; }

.grad-dot { stroke: rgba(0, 0, 0, 0.3); stroke-width: 0.5; transition: opacity 0.3s ease; }
.grad-dot--zppo { fill: var(--grad-zppo); }
.grad-dot--grpo { fill: var(--grad-grpo); }
.grad-endlabel {
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; font-weight: 800; transition: opacity 0.3s ease;
}
.grad-endlabel--zppo { fill: var(--grad-zppo); }
.grad-endlabel--grpo { fill: var(--grad-grpo); }
/* Method figure: reveal its panels in reading order — (a) → (b) → (c) → (d) —
   by wiping the clip-path, so the reader takes it in one piece at a time. */
#methodFigure { position: relative; --fig-crop: 1%; }
/* figure2.png ships with a band of empty whitespace below the "(d)" label.
   The media wrapper clips that bottom strip (overflow + negative margin) so it
   doesn't leave a gap, while the clip-path reveal still runs on the <img>.
   Tune --fig-crop (% of figure width) if it trims too much / too little. */
#methodFigure .methodfig__media { position: relative; overflow: hidden; border-radius: var(--radius); line-height: 0; }
#methodFigure .methodfig__media img {
  display: block;
  margin-bottom: calc(-1 * var(--fig-crop));
  transform: translateZ(0);   /* own GPU layer so the animated clip-path renders cleanly (no faint ghost of the hidden panels) */
  backface-visibility: hidden;
}
#methodFigure img { transition: clip-path 0.9s ease; }
/* Replay jumps straight back to (a): snap the clip so the wide image never flashes
   (and never overlaps the panel-(a) intro text) while shrinking. */
#methodFigure.mf-instant img { transition: none; }
#methodFigure.stage-hidden img { clip-path: inset(0 100% 100% 0); }
#methodFigure.stage-a   img { clip-path: inset(0 51% 43% 0); }   /* top-left panel (a) incl. its rollouts + caption */
#methodFigure.stage-ab  img { clip-path: inset(0 26% 43% 0); }   /* + (b) */
#methodFigure.stage-abc img { clip-path: inset(0 0 43% 0); }     /* full top row: (a)+(b)+(c) */
#methodFigure.stage-all img { clip-path: inset(0 0 0 0); }       /* + (d): full figure */
#methodFigure figcaption { min-height: 4.8em; }
/* "Why a replay buffer?" sits in the empty top-right region while only panel (a)
   is shown, then fades out as (b)/(c) reveal and the caption takes over below. */
.methodfig__intro {
  position: absolute;
  top: 0;
  left: 50%;          /* hug the right of panel (a) instead of floating far right */
  right: 0;
  width: auto;
  height: 57%;
  display: flex;
  align-items: flex-start;   /* sit near the top of panel (a), not vertically centred */
  justify-content: flex-start;
  padding: 6% 3% 2% 2%;
  opacity: 0;
  visibility: hidden;        /* fully gone when inactive — no ghost text behind later stages */
  pointer-events: none;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}
.methodfig__intro p {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(13px, 1.4vw, 17px);
  line-height: 1.55;
  color: var(--fg-2);
  text-align: center;
}
/* Numbered walkthrough shown in an empty region of the figure (panel (a) intro
   on the right; the (b)+(c) note over the lower band). */
#methodFigure .methodfig__steps {
  margin: 0;
  padding: 0 0 0 1.5em;
  max-width: 60ch;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  font-size: clamp(14px, 1.7vw, 19px);
  line-height: 1.5;
  color: var(--fg-2);
  text-align: left;
}
.methodfig__intro .methodfig__steps { max-width: 34ch; }
/* (b)+(c) note spans the wide lower band, so let each step run on one line. */
#methodFigure .methodfig__bc .methodfig__steps { max-width: none; white-space: nowrap; }
/* (d) caption sits below the full figure → use the whole width, not a narrow column.
   It's a single line, so drop the "1." marker and its indent. */
#methodFigure .methodfig__steps--cap {
  max-width: 100%;
  margin-left: 0; margin-right: 0;
  list-style: none; padding-left: 0;
  text-align: left;
  font-size: clamp(15px, 1.65vw, 18.5px);
}
#methodFigure .methodfig__steps li { padding-left: 0.15em; }
#methodFigure .methodfig__steps li::marker { color: var(--nv); font-weight: 800; }
.methodfig__intro strong,
.methodfig__bc strong { color: var(--nv); font-weight: 700; }
html[data-theme="light"] .methodfig__intro strong,
html[data-theme="light"] .methodfig__bc strong { color: var(--nv); }
/* BCQ / NCQ keep their signature colours even inside the green-strong overlay. */
.methodfig__bc strong.hl-cyan-text,
html[data-theme="light"] .methodfig__bc strong.hl-cyan-text { color: #22d3ee; }
.methodfig__bc strong.hl-magenta-text,
html[data-theme="light"] .methodfig__bc strong.hl-magenta-text { color: #e879f9; }
#methodFigure.stage-a .methodfig__intro { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease), visibility 0s linear 0s; }
/* (b)+(c) note: fills the empty lower band that is clipped away while only the
   top row is shown. */
.methodfig__bc {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 43%;
  display: none;             /* not rendered at all unless we're on the (b)+(c) stage */
  align-items: center;
  justify-content: center;
  padding: 1.5% 6%;
  line-height: normal;
  pointer-events: none;
}
#methodFigure.stage-abc .methodfig__bc { display: flex; animation: mf-fade-in 0.5s var(--ease) both; }
@keyframes mf-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .methodfig__intro, .methodfig__bc { display: none; } }
@media (max-width: 720px) {
  /* On narrow screens the panels stack, so keep the intro out of the way. */
  .methodfig__intro { position: static; width: auto; height: auto; opacity: 1; visibility: visible; }
}
.methodfig__replay {
  display: none;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 20px auto 0;
  padding: 12px 30px;
  border-radius: 10px;
  border: 1px solid rgba(118, 185, 0, 0.5);
  background: rgba(118, 185, 0, 0.12);
  color: var(--nv);
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.methodfig__replay.is-show { display: flex; }
.methodfig__replay:hover { background: rgba(118, 185, 0, 0.22); border-color: rgba(118, 185, 0, 0.8); }
.methodfig__replay-ic { font-size: 18px; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
  #methodFigure img { transition: none; clip-path: none !important; }
  .methodfig__replay { display: none !important; }
}
.section__kicker {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 12px;
  font-weight: 800;
  color: #0b1d05;
  padding: 5px 14px;
  background: linear-gradient(135deg, #b8f73a, #76b900);
  border: 1px solid rgba(118,185,0,0.7);
  border-radius: 999px;
  margin-bottom: 14px;
}

/* Centered head variant (used by TL;DR) */
.section__head--center { text-align: center; }
.section__head--center .section__kicker { margin-bottom: 0; }

/* Method section head — centered like TL;DR / Research Question (kicker keeps
   its default bottom margin; the lede block is centered via auto margins). */
#method .section__head { text-align: center; }
/* Method lede framed in a dashed box, text left-aligned (block stays centered). */
#method .section__lede {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  text-align: left;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px);
  border: 1.5px dashed var(--line-strong);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}

/* XL kicker — used as the standalone TL;DR marker */
.section__kicker--xl {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: 0.34em;
  padding: 12px 28px 12px 32px;
  color: #0b1d05;
  background: linear-gradient(135deg, #b8f73a, #76b900);
  border: 1px solid rgba(118,185,0,0.7);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 8px 28px rgba(118,185,0,0.34);
  position: relative;
  isolation: isolate;
}
.section__kicker--xl::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(155,220,40,0.55), rgba(118,185,0,0.05) 60%, rgba(155,220,40,0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}
html[data-theme="light"] .section__kicker--xl {
  background: linear-gradient(135deg, #b8f73a, #76b900);
  color: #0b1d05;
  border-color: rgba(118,185,0,0.7);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.25) inset,
    0 6px 20px rgba(118,185,0,0.22);
}
.section__title {
  font-family: 'Rubik', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.12;
}
.section__title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--nv), #c5ff3a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Consistent BCQ = cyan, NCQ = magenta accents (matches the Solution diagram).
   Solid colors — no gradient. */
.section__title em.hl-cyan    { background: none; color: #22d3ee; -webkit-text-fill-color: #22d3ee; }
.section__title em.hl-magenta { background: none; color: #e879f9; -webkit-text-fill-color: #e879f9; }
.section__lede {
  max-width: 760px;
  color: var(--fg-2);
  margin: 14px 0 0;
  font-size: 15.5px;
}
/* In a centred head, centre the lede block itself (not just its text), so it
   isn't pinned to the left. */
.section__head--center .section__lede { margin-left: auto; margin-right: auto; }
@keyframes zv-ring-pulse {
  0%, 100% { stroke-opacity: 0.55; }
  50%      { stroke-opacity: 0.95; }
}
@keyframes zv-dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@keyframes zv-migrate-a {
  /* outer ring waiting */
  0%, 10% {
    transform: translate(190px, 110px);
    opacity: 0;
  }
  14% {
    transform: translate(190px, 110px);
    opacity: 1;
  }
  /* BCQ transformation flash midway */
  38% {
    transform: translate(265px, 170px) scale(1.5);
    opacity: 1;
  }
  /* landed inside zone */
  55% {
    transform: translate(285px, 195px) scale(1);
    opacity: 1;
  }
  /* hold */
  82% {
    transform: translate(285px, 195px) scale(1);
    opacity: 1;
  }
  /* turn green & fade (assimilated) */
  92% {
    transform: translate(285px, 195px) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translate(190px, 110px);
    opacity: 0;
  }
}
@keyframes zv-migrate-a-color {
  0%, 30%  { fill: #ff9ab5; filter: drop-shadow(0 0 6px rgba(255,154,181,0.7)); }
  38%      { fill: #ffffff; filter: drop-shadow(0 0 16px #76B900); }
  60%, 100%{ fill: #b6e85f; filter: drop-shadow(0 0 6px rgba(118,185,0,0.6)); }
}
@keyframes zv-migrate-tag {
  0%, 28%   { opacity: 0; transform: translateY(2px); }
  34%, 46%  { opacity: 1; transform: translateY(-4px); }
  56%, 100% { opacity: 0; transform: translateY(-12px); }
}
@keyframes zv-migrate-b {
  0%, 10%  { transform: translate(540px, 365px); opacity: 0; }
  14%      { transform: translate(540px, 365px); opacity: 1; }
  38%      { transform: translate(450px, 305px) scale(1.5); opacity: 1; }
  55%      { transform: translate(440px, 285px) scale(1); opacity: 1; }
  82%      { transform: translate(440px, 285px) scale(1); opacity: 1; }
  92%      { transform: translate(440px, 285px) scale(0.9); opacity: 0; }
  100%     { transform: translate(540px, 365px); opacity: 0; }
}

/* ---------- TL;DR · Training trajectory animation ---------- */
:root {
  --traj-off:  #b39ddb;   /* light lavender for off-policy distill */
  --traj-on:   #4f6fbc;   /* navy/blue for on-policy distill */
  --traj-grpo: #f59e0b;   /* warm orange for GRPO */
  --traj-zppo: #76B900;   /* NVIDIA green for ZPPO (protagonist) */
  --traj-axis: rgba(255,255,255,0.18);
  --traj-grid: rgba(255,255,255,0.06);
  --traj-zero: rgba(255,255,255,0.32);
}
html[data-theme="light"] {
  --traj-axis: rgba(0,0,0,0.18);
  --traj-grid: rgba(0,0,0,0.06);
  --traj-zero: rgba(0,0,0,0.34);
}

/* ============ Static performance comparison panel ============ */
.perf {
  margin: 0 0 30px;
  padding: 26px 26px 22px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(118,185,0,0.10) 0%, rgba(118,185,0,0) 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(255,77,77,0.06) 0%, rgba(255,77,77,0) 60%),
    var(--surface);
  position: relative;
  overflow: hidden;
}
.perf__head { margin-bottom: 18px; }
.perf__head--center { text-align: center; }
.perf__head--center .perf__controls {
  justify-content: center;
}
.perf__title {
  font-family: 'Rubik', sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
  color: var(--fg);
}

/* ===== Train button + progress indicator =====
   Single-row layout, all three blocks on the same baseline:
       [ model stack | TRAIN button | progress bar ]
   The two outer columns are equal-width (1fr) so the Train button stays
   mathematically centered, and the progress bar stretches across the full
   right column so it never gets squeezed into a tiny lane. */
.perf__controls {
  /* Train button is gone — student-size clicks now drive training directly.
     Two columns: model stack on the left, progress bar on the right. */
  margin-top: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 28px;
  row-gap: 18px;
}
.perf__controls > .perf__model-stack { grid-column: 1; justify-self: start;   align-self: center; }
.perf__controls > .perf__progress    {
  grid-column: 2;
  justify-self: stretch;
  align-self: center;
  width: 100%;
  max-width: none;
  min-width: 0;
}

/* On narrower screens, stack everything vertically + centered. */
@media (max-width: 820px) {
  .perf__controls { grid-template-columns: 1fr; }
  .perf__controls > .perf__model-stack,
  .perf__controls > .perf__progress {
    grid-column: 1;
    justify-self: center;
  }
  .perf__controls > .perf__progress { width: 100%; max-width: 520px; }
}

/* Teacher → Student vertical group: Teacher Size sits directly above the
   Student Size selector. We use a 2-column grid with `display: contents` on
   the inner rows so the two labels share column 1 and the two value blocks
   (27B chip / size buttons) share column 2 — that's what makes the chip and
   the button group line up at exactly the same x. */
.perf__model-stack {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 14px;
  row-gap: 10px;
}
.perf__model-stack > .perf__teacher,
.perf__model-stack > .perf__sizes {
  display: contents;
}

/* Model size segmented control */
.perf__sizes {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.perf__sizes-label {
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--fg-2);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 104px;
}
.perf__sizes-cue {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  animation: cue-nudge 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes cue-nudge {
  0%, 100% { transform: translateX(0)   rotate(-3deg); }
  50%      { transform: translateX(5px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .perf__sizes-cue { animation: none; }
}
.perf__sizes-group {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
html[data-theme="light"] .perf__sizes-group {
  background: rgba(0,0,0,0.045);
  border-color: rgba(0,0,0,0.08);
}
.perf__size {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: color 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease), transform 120ms var(--ease);
  min-width: 44px;
}
.perf__size:hover { color: var(--fg); }
.perf__size:focus-visible {
  outline: 2px solid rgba(118,185,0,0.45);
  outline-offset: 2px;
}
.perf__size.is-active {
  color: #ffffff;
  background: linear-gradient(180deg, #76B900 0%, #5a9000 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 4px 14px rgba(118,185,0,0.42);
}
html[data-theme="light"] .perf__size.is-active {
  color: #ffffff;
  background: linear-gradient(180deg, #6aa800 0%, #4a7800 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 3px 10px rgba(118,185,0,0.32);
}
/* Size buttons remain interactive during training: clicking any size mid-run
   cancels the in-flight animation and resets the panel to the new size
   (see runToken handling in script.js). No visual lock applied. */

/* Fixed-teacher display — visually parallels the student selector
   but is non-interactive (the teacher is always 27B). */
.perf__teacher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.perf__teacher-label {
  /* Match `.perf__sizes-label` exactly so both labels are inline-flex grid
     items with identical metrics — that keeps their left edges (and the
     "T" of "Teacher" / "S" of "Student") at the same x position. */
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--fg-2);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 104px;
}
.perf__teacher-chip {
  /* Align the 27B chip to the start of its grid cell so its left edge sits
     directly above the "0.8B" button below — same left margin as the Student
     Size button group. */
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: linear-gradient(180deg, #76B900 0%, #5a9000 100%);
  border: 1px solid rgba(118,185,0,0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 3px 12px rgba(118,185,0,0.32);
  cursor: default;
  user-select: none;
}
html[data-theme="light"] .perf__teacher-chip {
  background: linear-gradient(180deg, #6aa800 0%, #4a7800 100%);
  border-color: rgba(118,185,0,0.6);
}
@keyframes hint-bounce {
  0%, 100% { transform: translateY(0)   rotate(-2deg); }
  50%      { transform: translateY(6px) rotate(2deg); }
}

/* Progress indicator */
.perf__progress {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 220px;
  max-width: 440px;
}
.perf__progress-label {
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Magenta/purple to match the left edge of the progress gradient */
  color: #c25cff;
  text-shadow: 0 0 16px rgba(194, 92, 255, 0.42);
  white-space: nowrap;
}
html[data-theme="light"] .perf__progress-label {
  color: #8a2bd1;
  text-shadow: 0 0 12px rgba(138, 43, 209, 0.22);
}
.perf__progress-track {
  position: relative;
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
html[data-theme="light"] .perf__progress-track {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.06);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}
.perf__progress-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background:
    linear-gradient(
      90deg,
      #4d8eff 0%,
      #6f5cff 22%,
      #b04dff 42%,
      #ff5fad 62%,
      #ff8a4d 82%,
      #ffae3d 100%
    );
  box-shadow:
    0 0 14px rgba(154, 77, 255, 0.45),
    0 0 20px rgba(255, 95, 173, 0.38),
    0 0 24px rgba(255, 174, 61, 0.34);
  border-radius: 999px;
  transition: width 80ms linear;
}
.perf__progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0) 55%);
  pointer-events: none;
}
.perf__progress-num {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-weight: 800;
  font-size: clamp(17px, 1.55vw, 20px);
  /* Warm amber/orange to match the right edge of the progress gradient */
  color: #ffae3d;
  text-shadow: 0 0 16px rgba(255, 174, 61, 0.45);
  min-width: 64px;
  text-align: right;
  letter-spacing: 0.01em;
}
html[data-theme="light"] .perf__progress-num {
  color: #d57700;
  text-shadow: 0 0 12px rgba(213, 119, 0, 0.22);
}

.perf__table {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}
.perf__row {
  display: grid;
  /* Method column wide enough to hold "GRPO† + Teacher response" on one line. */
  grid-template-columns: minmax(210px, 1.1fr) 2fr 2fr 2fr;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.02);
  transition: background 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
/* Linked-row highlight: synced with the active Problem carousel slide so the
   reader can see which table row(s) each problem refers to. */
.perf__row.is-linked {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 80, 95, 0.60);
  box-shadow: inset 5px 0 0 0 #ff6b7a, inset 0 0 0 1.5px rgba(255, 80, 95, 0.55);
}
html[data-theme="light"] .perf__row.is-linked {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(195, 36, 58, 0.50);
  box-shadow: inset 5px 0 0 0 #c3243a, inset 0 0 0 1.5px rgba(195, 36, 58, 0.50);
}
.perf__row--head {
  background: transparent;
  padding: 6px 14px 4px;
}
.perf__row--head .perf__method,
.perf__row--head .perf__cell-head {
  color: var(--fg-2);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}
.perf__row--head .perf__cell-head {
  text-align: center;
}
.perf__cell-head strong {
  display: block;
  color: var(--fg);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
}
.perf__cell-head small {
  display: block;
  color: var(--fg-3);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}
.perf__method {
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  color: var(--fg);
  font-size: 15px;
  /* Keep method names on a single line (the method column auto-widens to fit
     the longest label, e.g. "GRPO† + Teacher response"). */
  white-space: nowrap;
}
.perf__method sup {
  color: var(--fg-3);
  font-weight: 500;
  font-size: 0.7em;
  margin-left: 1px;
}
.perf__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.perf__bar {
  position: relative;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
}
/* zero divider at the center */
.perf__zero {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1.5px;
  background: rgba(255,255,255,0.45);
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}
.perf__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  z-index: 1;
}
/* positive: starts at center, grows RIGHTWARD (only when panel is visible) */
.perf__fill--pos {
  left: 50%;
  background: linear-gradient(90deg, rgba(118,185,0,0.55) 0%, rgba(155,220,40,0.92) 100%);
  border-radius: 0 999px 999px 0;
  box-shadow: 0 0 12px rgba(118,185,0,0.30) inset;
}
/* negative: starts at center, grows LEFTWARD */
.perf__fill--neg {
  right: 50%;
  background: linear-gradient(270deg, rgba(220,38,38,0.55) 0%, rgba(255,77,77,0.92) 100%);
  border-radius: 999px 0 0 999px;
  box-shadow: 0 0 12px rgba(220,38,38,0.25) inset;
}
/* ZPPO uses brighter green with glow */
.perf__fill--zppo {
  left: 50%;
  background: linear-gradient(90deg, #76B900 0%, #9bdc28 50%, #b8f73a 100%);
  border-radius: 0 999px 999px 0;
  box-shadow:
    0 0 16px rgba(155,220,40,0.55) inset,
    0 0 22px rgba(118,185,0,0.55);
}
/* Animations only fire after the panel scrolls into view */
.perf.is-visible .perf__fill--pos,
.perf.is-visible .perf__fill--zppo {
  /* linear — keeps the bar growing all the way to its final width in lock-step
     with the linear VLM Training progress bar (no early ease-out plateau). */
  animation: perf-grow-pos var(--dur, 3.6s) linear forwards;
  animation-delay: var(--d, 0.4s);
}
.perf.is-visible .perf__fill--neg {
  animation: perf-grow-neg var(--dur, 3.6s) linear forwards;
  animation-delay: var(--d, 0.4s);
}
@keyframes perf-grow-pos {
  0%   { width: 0; }
  100% { width: calc(var(--w) / 2); }
}
@keyframes perf-grow-neg {
  0%   { width: 0; }
  100% { width: calc(var(--w) / 2); }
}
.perf__val {
  font-family: 'JetBrains Mono', 'Consolas', 'Menlo', monospace;
  font-weight: 700;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* Neutral starting color — color is overridden by --pos / --neg / --zppo
     modifiers the moment the value diverges from zero during animation. */
  color: var(--fg-2);
  transition: color 240ms var(--ease);
}
.perf__val--pos { color: #b6e85f; }
.perf__val--neg { color: #ff8a96; }
.perf__val--zppo {
  color: #d4ff66;
  text-shadow: 0 0 10px rgba(155,220,40,0.5);
  font-size: clamp(17px, 1.45vw, 19px);
}

/* ZPPO highlight — paint just the method name in NVIDIA green, no row tint */
.perf__row--zppo .perf__method {
  color: var(--nv);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.perf__row--zppo .perf__method strong {
  letter-spacing: 0.04em;
  font-weight: 800;
}
.perf__method-ours {
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-3);
  font-style: italic;
}

/* Stagger START per row (--d), but stretch DURATION (--dur) so every bar
   finishes at --d + --dur = 4.30s — exactly when the VLM Training progress
   bar hits 100%. This keeps the cascade-in feel while all bars stop together. */
.perf__row[data-method="off"]    .perf__fill { --d: 0.20s; --dur: 4.10s; }
.perf__row[data-method="on"]     .perf__fill { --d: 0.35s; --dur: 3.95s; }
.perf__row[data-method="grpo"]   .perf__fill { --d: 0.50s; --dur: 3.80s; }
.perf__row[data-method="prefix"] .perf__fill { --d: 0.60s; --dur: 3.70s; }
.perf__row[data-method="zppo"]   .perf__fill { --d: 0.70s; --dur: 3.60s; }

.perf__foot {
  margin: 18px 0 0;
  color: var(--fg-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
}
.perf__foot #perfFootSize {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  color: var(--nv);
  font-weight: 700;
}
.perf__foot-sep { opacity: 0.45; margin: 0 4px; }

/* Light mode adjustments */
html[data-theme="light"] .perf__bar {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.05);
}
html[data-theme="light"] .perf__val--pos { color: var(--nv); }
html[data-theme="light"] .perf__val--neg { color: #b91c1c; }
html[data-theme="light"] .perf__val--zppo { color: var(--nv); text-shadow: 0 0 8px rgba(118,185,0,0.3); }
html[data-theme="light"] .perf__row {
  background: rgba(0,0,0,0.015);
}
html[data-theme="light"] .perf__method-ours { color: #6c757d; }

@media (max-width: 720px) {
  .perf__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .perf__row--head { display: none; }
  .perf__cell::before {
    content: attr(data-label);
    font-size: 11px;
    color: var(--fg-3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    width: 60px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .perf__fill { animation: none; width: calc(var(--w) / 2); }
}
.hl-good-text { color: var(--nv); font-weight: 700; }
.hl-bad-text { color: var(--neg); font-weight: 700; }
.hl-cyan-text { color: #22d3ee; font-weight: 700; }      /* BCQ */
.hl-magenta-text { color: #e879f9; font-weight: 700; }

/* ---------- Problem / Research Question / Solution stack ---------- */
.prs {
  margin-top: 22px;
  display: grid;
  gap: 14px;
}

/* ---------- Research Question ----------
   A boxed quote that mirrors the TL;DR panel's card treatment (surface +
   subtle radial tint + rounded border), bridging Problem and Method. */
/* Full-width tonal band that sets the Research Question apart from the TL;DR
   block above — a subtly different shade than the page background, fenced by
   hairline rules so the two sections read as distinct blocks. */
/* Full-width tonal bands that set the TL;DR and Research Question apart from
   the page background as distinct blocks (a hair off the page bg, fenced by
   hairline rules, with clear page-bg gaps between them). */
.tldr-band,
.rq-band {
  background: #0f120b;            /* dark: a hair lighter than --bg (#0a0c08) */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* lift the band off the page so the section reads as a raised slab */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 46px -22px rgba(0, 0, 0, 0.85);
}
html[data-theme="light"] .tldr-band,
html[data-theme="light"] .rq-band {
  background: #edf2e2;            /* light: a hair darker than --bg (#f7faf2) */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 20px 46px -22px rgba(15, 20, 16, 0.22);
}
/* The TL;DR section already carries its own 84px vertical padding, so the band
   only needs a gap below it to separate from the Research Question block. */
.tldr-band {
  margin: 0 0 clamp(44px, 7vw, 84px);
}
.rq-band {
  margin: clamp(44px, 7vw, 84px) 0;
  padding: 40px 16px 40px;
  scroll-margin-top: 80px;
}
/* Section-title row: title pill on top, Skip control centered directly below it. */
.rq-band__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.8vw, 18px);
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto clamp(18px, 2.6vw, 30px);
  text-align: center;
}

/* Outer wrapper that centers the Question and Solution panels. */
.rq {
  width: min(1080px, calc(100% - 40px));
  margin: clamp(10px, 1.5vw, 18px) auto 0;
  text-align: center;
  position: relative;
}
/* "Skip" control, centered under the title — a filled rectangle that lets
   impatient readers jump past the typewriter animation. */
.rq__skip {
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 9px 18px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), opacity 260ms var(--ease);
}
.rq__skip:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.7); }
.rq__skip-note { color: rgba(255, 255, 255, 0.72); font-weight: 600; }
html[data-theme="light"] .rq__skip { background: rgba(15, 20, 16, 0.06); border-color: rgba(15, 20, 16, 0.4); color: var(--fg); }
html[data-theme="light"] .rq__skip-note { color: var(--fg-2); }
.rq__skip.is-hidden { opacity: 0; pointer-events: none; }
/* A panel = a badge that straddles the top edge of its own box. Used by both
   the Question and the Solution so the two read as matching cards. */
.rq__panel {
  position: relative;
  margin-top: 20px;          /* room for the straddling badge's upper half */
}
/* The boxed card (TL;DR-style). overflow: hidden clips the decorative quote
   marks (Question box only); the badge sits outside the box so it isn't clipped. */
.rq__box {
  position: relative;
  /* Larger top padding reserves a clean band for the badge tucked inside the box. */
  padding: clamp(60px, 6vw, 76px) clamp(28px, 5vw, 64px) clamp(38px, 5vw, 56px);
  border-radius: 22px;
  /* All three boxes (Question / Inspiration / Solution) share one frosted-white
     surface so the section reads as a single, consistent card style. */
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045) 60%);
  overflow: hidden;
}
html[data-theme="light"] .rq__box {
  border-color: rgba(15, 20, 16, 0.12);
  background: linear-gradient(160deg, #ffffff, #eef3e6);
}
/* Big decorative quotation marks — Question box only (they belong to the
   question, so they bracket it and never drift down to the Solution). */
.rq__box--quote::before,
.rq__box--quote::after {
  position: absolute;
  z-index: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(76px, 9.5vw, 132px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  opacity: 1;
  text-shadow: none;
  pointer-events: none;
}
.rq__box--quote::before { content: "\201C"; left: 18px;  top: -0.06em; }
.rq__box--quote::after  { content: "\201D"; right: 18px; bottom: -0.46em; }
html[data-theme="light"] .rq__box--quote::before,
html[data-theme="light"] .rq__box--quote::after {
  color: rgba(15, 20, 16, 0.22);
  text-shadow: none;
}
/* Research Question box: rounded corners + a light, frosted "white" card so the
   question reads as a distinct surface (Solution / Inspiration keep their look). */
.rq__box--quote {
  border-radius: 22px;
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045) 60%);
}
html[data-theme="light"] .rq__box--quote {
  border-color: rgba(15, 20, 16, 0.12);
  background: linear-gradient(160deg, #ffffff, #eef3e6);
}

/* Pill badge (TL;DR-style) tucked just inside the top of its box (not straddling
   the border). The badge is a sibling of the box, so the box's overflow:hidden
   never clips it; the box's extra top padding keeps content clear of the badge. */
.rq__kicker {
  position: absolute;
  top: clamp(14px, 1.8vw, 20px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  isolation: isolate;
  display: inline-block;
  /* Keep the badge on a single line. It's absolutely positioned at left:50%,
     so its shrink-to-fit width is otherwise capped at ~half the box and it
     wraps to 2–3 lines on phones, colliding with the content below. */
  white-space: nowrap;
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(13px, 1.4vw, 17px);
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  /* Solid green "filled" pill (same design as the SOLUTION badge). */
  color: #0b1d05;
  padding: 10px 22px 10px 28px;   /* extra left padding offsets trailing letter-spacing */
  border-radius: 999px;
  background: linear-gradient(135deg, #b8f73a, #76b900);
  border: 1px solid rgba(118,185,0,0.7);
  box-shadow: 0 8px 28px rgba(118,185,0,0.35);
}
.rq__kicker::before { display: none; }   /* no outline ring on the filled pill */
/* All three badges (RESEARCH QUESTION / INSPIRATION / SOLUTION) are text-only —
   no green fill — so they read as quiet corner-bracket labels, not loud pills. */
.rq > .rq__panel > .rq__kicker {
  background: transparent;
  color: #ffffff;
  border: none;
  box-shadow: none;
}
html[data-theme="light"] .rq > .rq__panel > .rq__kicker {
  background: transparent;
  color: #1c2118;
  border: none;
  box-shadow: none;
}
/* Corner-bracket frame: four L-shaped corners (built from short line segments)
   wrap each badge like a box — no solid border. */
.rq > .rq__panel > .rq__kicker,
.rq__inspiration .rq__kicker,
.rq__solution .rq__kicker--solution,
.rq__effect .rq__kicker--effect {
  display: inline-block;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.18);
}
.rq > .rq__panel > .rq__kicker::after,
.rq__inspiration .rq__kicker::after,
.rq__solution .rq__kicker--solution::after,
.rq__effect .rq__kicker--effect::after { content: none; }
.rq > .rq__panel > .rq__kicker::before,
.rq__inspiration .rq__kicker::before,
.rq__solution .rq__kicker--solution::before,
.rq__effect .rq__kicker--effect::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  --c: rgba(255, 255, 255, 0.72);
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-position:
    top left, top left, top right, top right,
    bottom left, bottom left, bottom right, bottom right;
  background-size:
    14px 1.6px, 1.6px 14px, 14px 1.6px, 1.6px 14px,
    14px 1.6px, 1.6px 14px, 14px 1.6px, 1.6px 14px;
}
html[data-theme="light"] .rq > .rq__panel > .rq__kicker,
html[data-theme="light"] .rq__inspiration .rq__kicker,
html[data-theme="light"] .rq__solution .rq__kicker--solution,
html[data-theme="light"] .rq__effect .rq__kicker--effect { text-shadow: none; }
html[data-theme="light"] .rq > .rq__panel > .rq__kicker::before,
html[data-theme="light"] .rq__inspiration .rq__kicker::before,
html[data-theme="light"] .rq__solution .rq__kicker--solution::before,
html[data-theme="light"] .rq__effect .rq__kicker--effect::before { --c: rgba(15, 20, 16, 0.55); }
html[data-theme="light"] .rq__kicker {
  background: linear-gradient(135deg, #b8f73a, #76b900);
  color: #0b1d05;
  border-color: rgba(118,185,0,0.7);
  box-shadow:
    0 0 0 1px rgba(118,185,0,0.08) inset,
    0 6px 18px rgba(118,185,0,0.18);
}
.rq__quote {
  position: relative;
  z-index: 1;
  /* fill the box width (it's already capped by the .rq container) instead of a
     narrow 880px column that left a big empty band on the right. */
  max-width: none;
  margin: 0 auto;
  text-align: left;
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(16px, 1.85vw, 23px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--fg);
  /* normal (not balance): the line breaks must stay identical while typing and
     after it finishes, otherwise removing .is-typing would re-balance the words
     and the whole quote visibly jumps at the end. */
  text-wrap: normal;
}
.rq__quote em { font-style: italic; }
.rq__quote strong { color: var(--nv); font-weight: 700; }
html[data-theme="light"] .rq__quote strong { color: var(--nv); }
/* "hard questions" reads as the failure case → red (beats the green strong rule). */
.rq__quote strong.rq__hard,
html[data-theme="light"] .rq__quote strong.rq__hard { color: var(--neg); }
/* The summarized punch line — shown as a code block (monospace) so it reads as the
   crisp, quotable takeaway. */
.rq__quote .rq__punch {
  display: block;
  /* shrink the box to its text so its background doesn't cover the decorative
     closing quotation mark in the bottom-right corner. */
  width: fit-content;
  max-width: 100%;
  margin-top: clamp(16px, 2vw, 24px);
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  font-family: Consolas, 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0;
}
/* Highlight the failure mode ("policy drift (degrading generalization)") in red —
   in both themes. The light-theme selectors carry extra specificity so they beat
   the light-theme green-strong rule above. */
.rq__quote .rq__punch strong,
.rq__quote .rq__punch-note,
html[data-theme="light"] .rq__quote .rq__punch strong,
html[data-theme="light"] .rq__quote .rq__punch-note { color: var(--neg); font-weight: inherit; }
/* Invisible clause-boundary markers used only to time the typewriter pauses. */
.rq__quote .rqp { display: none; }
/* Blinking typewriter caret (an inline bar appended during typing). */
.rq__caret {
  /* zero-width inline marker: takes no layout space, so it can never wrap a word
     to a new line (or briefly bump the line) at the end of typing. */
  display: inline;
  position: relative;
}
.rq__caret::before {
  content: "";
  position: absolute;
  left: 2px;
  bottom: -0.02em;
  width: 3px;
  height: 1.05em;
  background: var(--nv);
  border-radius: 1px;
  box-shadow: 0 0 9px rgba(118, 185, 0, 0.65);
  animation: rq-caret-blink 0.7s steps(1, end) infinite;
  pointer-events: none;
}
@keyframes rq-caret-blink {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rq__caret::before { animation: none; }
}
@media (max-width: 640px) {
  .rq { padding-left: 22px; padding-right: 22px; }
}

/* Solution — collapsed until the Research Question finishes typing, then the
   box expands ONCE to a fixed, JS-measured height and never resizes while the
   text types in (overflow: hidden guarantees the size stays put). */
.rq__solution {
  overflow: hidden;
  height: 0;
  opacity: 0;
  margin-top: 0;
  transition:
    height 540ms var(--ease),
    opacity 420ms var(--ease),
    margin-top 540ms var(--ease);
}
.rq__solution.is-shown {
  height: var(--sol-h, 460px);   /* fixed height pinned by measureSolutionHeight() */
  opacity: 1;
  margin-top: clamp(22px, 3vw, 34px);
}
/* Once the diagram has finished building, release the pinned height so content
   is never clipped — important on mobile, where the BCQ/NCQ branches stack and
   the box grows much taller than the measured single-row desktop height. */
.rq__solution.is-open {
  height: auto;
  overflow: visible;
}
.rq__solution-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* Solution box spans the full panel width (like the Question box) so it never
   shrinks to its content width. */
.rq__solution .rq__panel { width: 100%; }
.rq__solution .rq__solution-arrow { align-self: center; }
.rq__solution-arrow {
  width: clamp(34px, 4.2vw, 48px);
  height: auto;
  color: rgba(255, 255, 255, 0.92);
  opacity: 1;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
}
html[data-theme="light"] .rq__solution-arrow {
  color: rgba(15, 20, 16, 0.7);
  filter: drop-shadow(0 0 10px rgba(15, 20, 16, 0.18));
}
/* Solution badge — text only (no green fill / border), like RESEARCH QUESTION
   and INSPIRATION. */
.rq__solution .rq__kicker--solution,
.rq__effect .rq__kicker--effect {
  background: transparent;
  color: #ffffff;
  border: none;
  box-shadow: none;
}
html[data-theme="light"] .rq__solution .rq__kicker--solution,
html[data-theme="light"] .rq__effect .rq__kicker--effect { color: #1c2118; background: transparent; border: none; box-shadow: none; }

/* ---------- Inspiration (Zone of Proximal Development) ----------
   Sits between the Question and the Solution; collapses (0fr) until revealed. */
.rq__inspiration {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin: 0;
  transition: grid-template-rows 600ms var(--ease), opacity 420ms var(--ease), margin 600ms var(--ease);
}
.rq__inspiration.is-shown {
  grid-template-rows: 1fr;
  opacity: 1;
  margin: clamp(22px, 3vw, 34px) 0 0;
}
.rq__inspiration-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.rq__inspiration .rq__panel { width: 100%; }
/* Make the Inspiration box read clearly as a contained box (its border is more
   visible than the default hairline so all the content sits inside it). */
.rq__inspiration .rq__box { border-color: rgba(255, 255, 255, 0.16); }
html[data-theme="light"] .rq__inspiration .rq__box { border-color: rgba(0, 0, 0, 0.14); }
@media (prefers-reduced-motion: reduce) { .rq__inspiration { transition: none; } }
/* Through Our Lens: its own collapse/reveal step (nested in the inspiration block)
   so it animates in only after Inspiration finishes. */
.rq__lens-wrap {
  width: 100%;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 600ms var(--ease), opacity 420ms var(--ease);
}
.rq__lens-wrap.is-shown { grid-template-rows: 1fr; opacity: 1; }
.rq__lens-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
@media (prefers-reduced-motion: reduce) { .rq__lens-wrap { transition: none; } }
/* Effect: revealed + typed after the Solution. */
.rq__effect {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin: 0;
  transition: grid-template-rows 600ms var(--ease), opacity 420ms var(--ease), margin 600ms var(--ease);
}
.rq__effect.is-shown { grid-template-rows: 1fr; opacity: 1; margin: clamp(22px, 3vw, 34px) 0 0; }
.rq__effect-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.rq__effect .rq__panel { width: 100%; }
/* Extra top padding so the cards sit clearly below the EFFECT badge. */
.rq__effect .rq__box { padding-top: clamp(86px, 8.5vw, 112px); }
@media (prefers-reduced-motion: reduce) { .rq__effect { transition: none; } }
/* Two side-by-side effect cards (BCQ cyan / NCQ magenta). */
.effect__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 28px); }
@media (max-width: 720px) { .effect__grid { grid-template-columns: 1fr; } }
.effect__card {
  padding: clamp(16px, 2vw, 22px);
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.effect__card--bcq { border-color: rgba(34, 211, 238, 0.4); }
.effect__card--ncq { border-color: rgba(232, 121, 249, 0.4); }
.effect__text {
  margin: 0;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.6;
  color: var(--fg-2);
  text-align: left;
  min-height: 6.4em;     /* reserve space so the typed text doesn't grow the card */
}
.effect__text strong { color: var(--nv); font-weight: 700; }
html[data-theme="light"] .effect__text strong { color: var(--nv); }
/* Inspiration badge — text only (no teal fill / border), like RESEARCH QUESTION. */
.rq__inspiration .rq__kicker {
  background: transparent;
  color: #ffffff;
  border: none;
  box-shadow: none;
}
html[data-theme="light"] .rq__inspiration .rq__kicker { color: #1c2118; background: transparent; border: none; box-shadow: none; }

.zpd {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* the circle (auto) is the dead-centre column */
  align-items: center;
  justify-items: center;
  gap: clamp(16px, 3vw, 40px);
}
.zpd__author { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }
.zpd__author img {
  width: clamp(124px, 16vw, 158px);
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
}
/* BK's headshot is square (1:1); Vygotsky's is portrait (~3:4). Widen BK so its
   rendered height matches Vygotsky's photo height (width × ~1.39). */
.zpd--ours .zpd__author img { width: clamp(146px, 18vw, 182px); }
.zpd--ours .zpd__author-ph { width: clamp(146px, 18vw, 182px); aspect-ratio: 1 / 1; }
.zpd__author figcaption {
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fg-2);
  text-align: center;
}
.zpd__author figcaption a.zpd__name,
.zpd__author figcaption .zpd__name a { color: inherit; text-decoration: none; transition: color 160ms var(--ease); }
.zpd__author figcaption a.zpd__name:hover,
.zpd__author figcaption .zpd__name a:hover { color: var(--nv); text-decoration: underline; text-underline-offset: 2px; }
html[data-theme="light"] .zpd__author figcaption a.zpd__name:hover,
html[data-theme="light"] .zpd__author figcaption .zpd__name a:hover { color: var(--nv); }
.zpd__credit {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fg-3);
  text-decoration: none;
}
.zpd__credit:hover { color: var(--fg-3); text-decoration: none; }
/* "et al." in a distinct italic serif. */
.zpd__name .zpd__etal {
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: 0;
}
/* NVIDIA logo under the Byung-Kwan Lee photo (eye stays green, wordmark follows
   the text color so it reads in both themes). */
.zpd__credit-logo {
  display: block;
  height: 17px;
  width: auto;
  margin: 7px auto 0;
  color: var(--fg-2);
}
/* The wrapper passes its children (circle + legend) straight into the .zpd grid
   so the circle can be the centered middle column, with the photo to its left and
   the legend to its right (both hugging the circle). */
.zpd__right { display: contents; }
.zpd__author { justify-self: end; }
.zpd__legend { justify-self: start; }
.zpd__svg { width: clamp(195px, 30vw, 250px); height: auto; }
/* Narrower screens: stack photo → circle → legend, all centered. */
@media (max-width: 880px) {
  .zpd { grid-template-columns: 1fr; }
  .zpd__author, .zpd__legend { justify-self: center; }
}
/* Cohesive green scale where the vivid NVIDIA-green ZPD ring is the bright "spotlight"
   between two darker zones — all dark enough for clean white labels. */
.zpd__ring--anx     { fill: #4a78a0; filter: drop-shadow(0 0 10px rgba(74, 120, 160, 0.45)); }    /* out of reach — soft steel blue */
.zpd__ring--learn   { fill: #76b900; filter: drop-shadow(0 0 16px rgba(118, 185, 0, 0.7)); }      /* ZPD — NVIDIA green (vivid hero) */
.zpd__ring--comfort { fill: #0e5a28; filter: drop-shadow(0 0 12px rgba(14, 90, 40, 0.6)); }       /* mastered — deep saturated emerald */
.zpd__t {
  fill: #fff;
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
}
/* All three rings are dark enough for white labels now. */
.zpd__t--out { fill: #ffffff; }
.zpd__t--in  { fill: #ffffff; }
/* Cap the legend width so the long rollout-accuracy descriptions wrap inside it
   instead of widening the row and pushing the legend below the diagram. */
/* Typed intro line above the diagram. */
.zpd__intro {
  margin: 0 auto clamp(16px, 2.4vw, 26px);
  max-width: 760px;
  min-height: 4.4em;
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--fg);
  text-align: center;
}
.zpd__intro strong { color: var(--nv); font-weight: 700; white-space: nowrap; }   /* keep this one white, not green */
.zpd__intro em { font-style: italic; }

/* Zone entrance: circles grow in (outer → middle → inner); labels + legend fade
   in after. Armed by JS once the intro line finishes typing. */
.zpd--anim .zpd__ring { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; }
.zpd--anim .zpd__t { opacity: 0; }
.zpd--anim .zpd__legend { opacity: 0; transform: translateY(8px); }
.zpd--anim .zpd__author { opacity: 0; transform: translateY(8px); }   /* photo appears with the diagram, after the intro types */
.zpd--anim.is-zones .zpd__ring {
  transition: transform 0.62s cubic-bezier(.2, .75, .3, 1), opacity 0.45s ease;
  transform: scale(1); opacity: 1;
}
.zpd--anim.is-zones .zpd__ring--anx     { transition-delay: 0s; }
.zpd--anim.is-zones .zpd__ring--learn   { transition-delay: 0.4s; }
.zpd--anim.is-zones .zpd__ring--comfort { transition-delay: 0.8s; }
.zpd--anim.is-zones .zpd__t { transition: opacity 0.45s ease; opacity: 1; }
.zpd--anim.is-zones .zpd__t--out { transition-delay: 0.35s; }
.zpd--anim.is-zones .zpd__t--mid { transition-delay: 0.75s; }
.zpd--anim.is-zones .zpd__t--in  { transition-delay: 1.15s; }
.zpd--anim.is-zones .zpd__legend { transition: opacity 0.5s ease 1.2s, transform 0.5s ease 1.2s; opacity: 1; transform: none; }
.zpd--anim.is-zones .zpd__author { transition: opacity 0.55s ease, transform 0.55s ease; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .zpd--anim .zpd__ring, .zpd--anim .zpd__t, .zpd--anim .zpd__legend, .zpd--anim .zpd__author { transform: none; opacity: 1; }
}

.zpd__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 300px; flex: 0 1 300px; text-align: left; }
.zpd__legend li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: clamp(12.5px, 1.1vw, 14px);
  line-height: 1.3;
  color: var(--fg-3);
}
.zpd__legend strong { display: block; color: var(--fg); font-weight: 700; font-size: 1.05em; }
.zpd__legend .zpd-hl { color: var(--nv); font-weight: 700; white-space: nowrap; }
html[data-theme="light"] .zpd__legend .zpd-hl { color: var(--nv); }
.zpd__legend-hl strong { color: var(--fg); }
/* Mark the ZPD row as the "target" zone: a dashed green frame + a corner badge. */
.zpd__legend-target {
  position: relative;
  margin: 10px 0;                /* extra breathing room from Can't do / Can do alone */
  padding: 9px 13px;
  border-radius: 12px;
  border: 1.5px dashed rgba(118, 185, 0, 0.6);
  background: rgba(118, 185, 0, 0.10);
}
.zpd__target {
  position: absolute;
  top: -11px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #b8f73a, #76b900);
  color: #0b1d05;
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(118, 185, 0, 0.4);
  white-space: nowrap;
}
.zpd__sw { width: 15px; height: 15px; border-radius: 4px; flex: 0 0 auto; margin-top: 2px; }
.zpd__sw--anx     { background: #4a78a0; box-shadow: 0 0 7px rgba(74, 120, 160, 0.6); }
.zpd__sw--learn   { background: #76b900; box-shadow: 0 0 8px rgba(118, 185, 0, 0.6); }
.zpd__sw--comfort { background: #0e5a28; box-shadow: 0 0 7px rgba(14, 90, 40, 0.6); }
/* "Our Interpretation": photo + the same three zones re-read as rollout accuracy
   (no circle, so the legend gets more room). */
/* Tighter column gap here so the ZPPO legend gets more room (the circle still
   matches Inspiration's size for a consistent pair). */
.zpd--ours { align-items: center; gap: clamp(12px, 1.8vw, 22px); }
.zpd--ours .zpd__legend { max-width: 440px; flex: 0 1 440px; gap: 16px; }
.zpd__legend--rl li { font-size: clamp(13px, 1.15vw, 15px); }
.zpd__legend--rl .rl-no { color: var(--neg); font-weight: 700; }
.zpd__legend--rl .rl-up { color: var(--nv); font-weight: 700; }
/* "Zone of Proximal Policy Optimization" must stay on one line. */
.zpd__legend--rl .rl-zppo {
  display: block;
  white-space: nowrap;
  color: var(--nv); font-weight: 800;
  font-size: clamp(12.5px, 1.25vw, 14px);
}
html[data-theme="light"] .zpd__legend--rl .rl-up,
html[data-theme="light"] .zpd__legend--rl .rl-zppo { color: var(--nv); }
/* Placeholder shown when assets/byungkwan.jpg is missing. */
.zpd__author-ph {
  width: clamp(124px, 16vw, 158px);
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px dashed var(--line);
  background: var(--surface-3, var(--surface));
  color: var(--fg-3);
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
html[data-theme="light"] .zpd__caption strong,
.zpd__ref {
  margin: 0 auto clamp(16px, 2.4vw, 26px);
  max-width: 720px;
  min-height: 3.2em;             /* reserve space so the typed citation doesn't shove the diagram */
  text-align: center;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--fg-3);
}
.zpd__ref em { font-style: italic; }
.zpd__ref a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; transition: color 160ms var(--ease); }
.zpd__ref a:hover { color: var(--nv); }
/* Citation-count badge — shows how influential the source is, links to Scholar. */
.zpd__ref a.zpd__cites {
  margin-left: 6px;
  color: inherit;                /* same as the rest of the citation, not green */
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms var(--ease);
}
.zpd__ref a.zpd__cites strong { font-weight: 800; }
.zpd__ref a.zpd__cites:hover { text-decoration: underline; text-underline-offset: 2px; }
/* BCQ / NCQ construction diagram inside the Solution box (above the text). */
.rq__diagram {
  width: 100%;
  max-width: 100%;
  margin: 0 auto clamp(20px, 3vw, 30px);
}
/* ---- HTML/CSS rebuild of the BCQ/NCQ construction diagram ----
   A shared "Hard Question" forks into two stacked case-cards. Each card shows
   the reformulated prompt (Question + verbatim instruction) and the candidate
   blocks that get appended. */
.dh {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  text-align: left;
}
/* Hard Question forks into two side-by-side branches: BCQ (left) · NCQ (right). */
.dh__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
  align-items: start;
}
.dh__fork-svg { display: block; width: 50%; height: auto; color: var(--fg-3); margin: -2px 0 2px; }
@media (max-width: 760px) {
  .dh__grid { grid-template-columns: 1fr; }
}

/* ---- Staged "build" animation ----
   While animating, pieces are hidden with opacity only (layout/height stays
   reserved so the box never resizes) and faded in on cue; the case labels type
   out into a line held open by min-height. */
.dh__case { min-height: 1.45em; }
.dh__case .rq__caret::before { background: currentColor; box-shadow: none; }
.dh.is-anim .dh__qpill,
.dh.is-anim .dh__fork-svg,
.dh.is-anim .dh__label,
.dh.is-anim .dh__card,
.dh.is-anim .dh__cand,
.dh.is-anim .dh__dots,
.dh.is-anim .dh__caption {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}
.dh.is-anim .dh__qpill.is-in,
.dh.is-anim .dh__fork-svg.is-in,
.dh.is-anim .dh__label.is-in,
.dh.is-anim .dh__card.is-in,
.dh.is-anim .dh__cand.is-in,
.dh.is-anim .dh__dots.is-in,
.dh.is-anim .dh__caption.is-in {
  opacity: 1;
  transform: none;
}
/* The two fork arrows reveal one at a time: cyan (→ BCQ) first, magenta (→ NCQ)
   only after the BCQ branch finishes building. */
.dh.is-anim .dh__fork-path { opacity: 0; transition: opacity 0.5s var(--ease); }
.dh.is-anim .dh__fork-path.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .dh.is-anim .dh__qpill,
  .dh.is-anim .dh__fork-svg,
  .dh.is-anim .dh__label,
  .dh.is-anim .dh__card { opacity: 1; transform: none; transition: none; }
}
.dh__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 700;
}
/* "Question Reformulation" pill stays centered (col 2); the "— no policy drift…"
   line sits to its right (col 3), with a balancing spacer on the left (col 1). */
.dh__intro-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.dh__intro-row .dh__qpill { grid-column: 2; }
.dh__intro-row .dh__intro-line--post { grid-column: 3; justify-self: start; text-align: left; }
@media (max-width: 640px) {
  .dh__intro-row { grid-template-columns: 1fr; justify-items: center; }
  .dh__intro-row .dh__qpill,
  .dh__intro-row .dh__intro-line--post { grid-column: 1; }
  .dh__intro-row .dh__intro-line--post { justify-self: center; text-align: center; }
}
.dh__intro-line { font-size: clamp(17px, 1.8vw, 22px); font-weight: 600; color: var(--fg-2); }
.dh__hard-def { font-size: 0.82em; font-weight: 500; color: var(--fg-3); }
/* "hard question" and "policy drift" both read as the failure mode → red. */
.dh__intro-line strong { color: var(--neg); font-weight: 700; }
html[data-theme="light"] .dh__intro-line strong { color: var(--neg); }
.dh__qpill {
  display: inline-block;
  padding: 0;
  /* No box — the core idea reads as bold green text so it stands out on the
     frosted-white box without a loud filled pill. */
  background: none;
  border: none;
  box-shadow: none;
  color: var(--nv);
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 800;
  letter-spacing: 0.01em;
}
html[data-theme="light"] .dh__qpill { color: var(--nv); }
.dh__branch { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.dh__case {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* No flex gap: the label is typed in, and the typewriter caret is appended as
     a sibling flex item — a gap here would push the caret away from the text. */
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.dh__case--ok { color: #22d3ee; }   /* cyan — matches the BCQ pill */
.dh__case--no { color: #e879f9; }   /* magenta — matches the NCQ pill */
html[data-theme="light"] .dh__case--ok { color: #0e7490; }
html[data-theme="light"] .dh__case--no { color: #a21caf; }
.dh__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: clamp(12.5px, 1.1vw, 14px);
  font-weight: 600;
  color: var(--fg-2);
}
/* Subtitle text colored to match each pill (the pill keeps its own fill color). */
.dh__label--bcq { color: #22d3ee; }   /* cyan */
.dh__label--ncq { color: #e879f9; }   /* magenta */
html[data-theme="light"] .dh__label--bcq { color: #0e7490; }
html[data-theme="light"] .dh__label--ncq { color: #a21caf; }
.dh__pill {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--nv);
  color: #0b1d05;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
/* Distinct icon colors so BCQ and NCQ are told apart at a glance. */
.dh__pill--bcq { background: #22d3ee; color: #06232a; }   /* cyan */
.dh__pill--ncq { background: #e879f9; color: #3a0a44; }   /* magenta */
.dh__card {
  border-radius: 14px;
  border: 1px solid rgba(118, 185, 0, 0.30);
  background: rgba(7, 11, 5, 0.55);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
html[data-theme="light"] .dh__card {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(118, 185, 0, 0.35);
}
/* Example cards tinted to their branch accent: BCQ → cyan, NCQ → magenta. */
.dh__card--bcq {
  position: relative;
  border-color: rgba(34, 211, 238, 0.45);
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.07), transparent 55%), rgba(7, 11, 5, 0.55);
}
/* "shuffle" badge that flashes on every swap cycle. */
.dh__card--bcq .dh__cands { position: relative; }
.dh__shuffle-tag {
  position: absolute;
  top: 50%;
  right: clamp(6px, 3%, 16px);          /* sit in the empty space right of the boxes, not over them */
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #22d3ee;
  background: rgba(34, 211, 238, 0.18);
  border: 1px solid rgba(34, 211, 238, 0.6);
  opacity: 0;
  pointer-events: none;
}
html[data-theme="light"] .dh__shuffle-tag { color: #0e7490; border-color: rgba(14, 116, 144, 0.55); }
/* Visible (fixed, fully opaque) once the cards are built — no pulsing. */
.dh__card--bcq.is-built .dh__shuffle-tag { opacity: 1; animation: none; }
@media (prefers-reduced-motion: reduce) { .dh__shuffle-tag { display: none; } }
.dh__card--ncq {
  border-color: rgba(232, 121, 249, 0.45);
  background: linear-gradient(180deg, rgba(232, 121, 249, 0.07), transparent 55%), rgba(7, 11, 5, 0.55);
}
html[data-theme="light"] .dh__card--bcq {
  border-color: rgba(14, 116, 144, 0.40);
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.10), transparent 55%), rgba(255, 255, 255, 0.7);
}
html[data-theme="light"] .dh__card--ncq {
  border-color: rgba(162, 28, 175, 0.38);
  background: linear-gradient(180deg, rgba(232, 121, 249, 0.10), transparent 55%), rgba(255, 255, 255, 0.7);
}
.dh__field { display: flex; flex-direction: column; gap: 5px; }
.dh__field-k {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.dh__qtext {
  margin: 0;
  align-self: flex-start;            /* hug the text instead of spanning full width */
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--fg-2);
  padding: 8px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.22);
}
html[data-theme="light"] .dh__qtext {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.20);
}
.dh__instr {
  margin: 0;
  font-size: clamp(13px, 1.2vw, 14px);
  line-height: 1.5;
  color: var(--fg);
}
.dh__instr code {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 0.88em;
  color: #f0a35a;                     /* matches the orange <candidate> tags in the boxes */
  background: rgba(240, 163, 90, 0.13);
  padding: 1px 5px;
  border-radius: 5px;
}
html[data-theme="light"] .dh__instr code { color: #b9701a; background: rgba(240, 163, 90, 0.16); }
.dh__instr strong { color: var(--fg); font-weight: 700; }
.dh__cands { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.dh__cand {
  position: relative;
  flex: 1 1 0;
  min-width: 92px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 10px;
}
/* NCQ stacks its wrong-rollout candidates vertically so they read as a list in
   the narrow column. */
/* Responses stack in a single grid column sized to the widest box, so every
   response box is the same width (and only as wide as its content needs). */
.dh__card--bcq .dh__cands,
.dh__card--ncq .dh__cands {
  display: grid;
  grid-template-columns: max-content;
  justify-content: start;
  gap: 8px;
}
.dh__card--ncq .dh__dots { text-align: center; }
/* BCQ stacks its two candidates vertically (so the placeholder text fits on one
   line) and shuffles them: the Teacher / Student cards swap top/bottom and back
   (each arcs slightly sideways while crossing) to convey "shuffled & anonymized". */
.dh__card--bcq.is-built .dh__cand--ok {
  z-index: 2;
  animation: dh-shuffle-a 10s ease-in-out infinite;
}
.dh__card--bcq.is-built .dh__cand--no {
  z-index: 1;
  animation: dh-shuffle-b 10s ease-in-out infinite;
}
@keyframes dh-shuffle-a {              /* top card → bottom slot (straight) */
  0%, 25%   { transform: translateY(0); }
  50%, 75%  { transform: translateY(calc(100% + 8px)); }
  100%      { transform: translateY(0); }
}
@keyframes dh-shuffle-b {              /* bottom card → top slot (straight) */
  0%, 25%   { transform: translateY(0); }
  50%, 75%  { transform: translateY(calc(-100% - 8px)); }
  100%      { transform: translateY(0); }
}
/* Disable the shuffle for reduced-motion and very narrow screens. */
@media (prefers-reduced-motion: reduce) {
  .dh__card--bcq.is-built .dh__cand--ok,
  .dh__card--bcq.is-built .dh__cand--no { animation: none; }
}
@media (max-width: 560px) {
  .dh__card--bcq.is-built .dh__cand--ok,
  .dh__card--bcq.is-built .dh__cand--no { animation: none; }
}
.dh__cand--ok { background: rgba(118, 185, 0, 0.14); border: 1px solid rgba(118, 185, 0, 0.50); }
.dh__cand--no { background: rgba(255, 95, 95, 0.12); border: 1px solid rgba(255, 95, 95, 0.50); }
html[data-theme="light"] .dh__cand--no { background: rgba(195, 36, 58, 0.10); border-color: rgba(195, 36, 58, 0.45); }
/* Candidate content shown as a brace placeholder (mono, like the question one). */
.dh__cand-ph {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.dh__cand--ok .dh__cand-ph { color: #9bdc28; }
.dh__cand--no .dh__cand-ph { color: #ff7a7a; }
html[data-theme="light"] .dh__cand--ok .dh__cand-ph { color: var(--nv); }
html[data-theme="light"] .dh__cand--no .dh__cand-ph { color: #c3243a; }
.dh__dots { align-self: center; color: #ff7a7a; font-size: 24px; font-weight: 800; flex: 0 0 auto; }
html[data-theme="light"] .dh__dots { color: #c3243a; }
/* One-line takeaway under the whole diagram. */
.dh__caption {
  margin: 6px auto 0;
  max-width: 660px;
  text-align: center;
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--fg-2);
}
.dh__caption strong { color: var(--nv); font-weight: 700; }
html[data-theme="light"] .dh__caption strong { color: var(--nv); }

/* Solution text matches the question's quote styling so the two boxes pair up. */
.rq__solution-text {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 880px;
  margin-inline: auto;
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(16px, 1.85vw, 23px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--fg);
  /* normal (not balance) so the typed lines never re-flow mid/after typing. */
  text-wrap: normal;
}
.rq__solution-text strong { color: var(--nv); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .rq__solution { transition: none; }
}
.prs__card {
  position: relative;
  padding: 22px 26px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prs__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}
/* Problem header doubles as the accordion toggle (FAQ / show-more pattern):
   the whole bar is clickable and the caret flips when the box unfolds. */
.prs__head--toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  flex-wrap: nowrap;
  cursor: pointer;
}
.prs__head-hint {
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(12.5px, 1.05vw, 14px);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-transform: none;
  white-space: nowrap;
  color: var(--fg);
  transition: color 160ms var(--ease);
}
.prs__head--toggle:hover .prs__head-hint { color: #ff6b7a; }
html[data-theme="light"] .prs__head--toggle:hover .prs__head-hint { color: #c3243a; }
.prs__head-right { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.prs__head-caret {
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.85;
  transition: transform 260ms var(--ease), opacity 160ms var(--ease);
}
.prs__head--toggle:hover .prs__head-caret { opacity: 1; }
.prs__head--toggle[aria-expanded="true"] .prs__head-caret { transform: rotate(180deg); }
/* "Tap here" finger: bobs continuously with a ripple while the box is folded,
   inviting the reader to click. Removed once unfolded. */
.prs__tap {
  position: relative;
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
  color: #ff6b7a;                       /* drives the ripple ring color */
  animation: prs-tap 1.4s ease-in-out infinite;
}
html[data-theme="light"] .prs__tap { color: #c3243a; }
/* Ripple pulses outward from the fingertip toward the caret. */
.prs__tap::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  pointer-events: none;
  animation: prs-tap-ring 1.4s ease-out infinite;
}
.prs__head--toggle[aria-expanded="true"] .prs__head-hint,
.prs__head--toggle[aria-expanded="true"] .prs__tap { display: none; }
@keyframes prs-tap {
  0%   { transform: translateX(0); }
  28%  { transform: translateX(6px); }
  56%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}
@keyframes prs-tap-ring {
  0%   { transform: scale(0.3); opacity: 0; }
  28%  { opacity: 0.55; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .prs__tap { animation: none; }
  .prs__tap::after { display: none; }
}
/* On narrow screens let the invite drop below the PROBLEM tag instead of
   overflowing the header bar. The right group must be allowed to shrink and
   wrap (it was flex-shrink:0), otherwise the caret pokes out past the box. */
@media (max-width: 768px) {
  .prs__head--toggle { flex-wrap: wrap; }
  .prs__head-right { margin-left: 0; flex-shrink: 1; min-width: 0; flex-wrap: wrap; }
  .prs__head-hint { white-space: normal; }
}
.prs__head--toggle:focus { outline: none; }
.prs__head--toggle:focus-visible { outline: none; }
.prs__dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}
.prs__tag {
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(14px, 1.25vw, 16px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.prs__card p {
  margin: 0;
  color: var(--fg);
  font-size: clamp(19px, 1.65vw, 23px);
  line-height: 1.55;
  font-weight: 500;
}
.prs__card strong { color: var(--fg); font-weight: 700; }
@keyframes mloop-pop { 0% { transform: scale(1); } 42% { transform: scale(1.5); } 100% { transform: scale(1); } }

.takeaway { position: relative; }
/* The slide box stays collapsed until the reader clicks "What is the Problem?".
   The 0fr -> 1fr grid trick animates to the real content height (no fixed cap). */
.takeaway__reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 460ms var(--ease), opacity 340ms var(--ease);
}
.takeaway.is-revealed .takeaway__reveal {
  grid-template-rows: 1fr;
  opacity: 1;
}
.takeaway__viewport { overflow: hidden; min-height: 0; }
/* Position dots only appear once the box is unfolded (no empty gap when folded). */
.takeaway:not(.is-revealed) .takeaway__controls { display: none; }
.takeaway__track {
  display: flex;
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.takeaway__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 4px 2px 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.takeaway__num {
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(11px, 1vw, 12.5px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff6b7a;                 /* matches the Problem accent */
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 80, 95, 0.12);
  border: 1px solid rgba(255, 80, 95, 0.32);
}
html[data-theme="light"] .takeaway__num {
  color: #c3243a;
  background: rgba(195, 36, 58, 0.08);
  border-color: rgba(195, 36, 58, 0.28);
}
.takeaway__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
}
/* The whole ref is a single box (so the "and" / "+" glue is enclosed too),
   tinted to match the red-outlined rows it points at in the TL;DR table. */
.takeaway__ref {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 8px;
  border: 1px solid rgba(255, 80, 95, 0.45);
  background: rgba(255, 80, 95, 0.10);
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(13px, 1.15vw, 14.5px);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--fg);            /* "and" / "+" share the chip color, not muted */
  white-space: normal;
  line-height: 1.5;
}
html[data-theme="light"] .takeaway__ref {
  border-color: rgba(195, 36, 58, 0.40);
  background: rgba(195, 36, 58, 0.08);
}
.takeaway__ref sup {
  font-size: 0.72em;
  color: inherit;
}
/* Method names: bold emphasis within the single ref box. */
.takeaway__chip { color: var(--fg); font-weight: 700; white-space: nowrap; }
.takeaway__slide p {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  font-weight: 500;
  color: var(--fg);
}
.takeaway__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
/* Prev/next arrows flank the dots so it's obvious the problems slide. */
.takeaway__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg-2);
  cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease),
              background 160ms var(--ease), transform 160ms var(--ease);
}
.takeaway__nav:hover {
  color: var(--fg);
  border-color: rgba(255, 80, 95, 0.5);
  background: rgba(255, 80, 95, 0.08);
  transform: translateY(-1px);
}
.takeaway__nav:active { transform: translateY(0); }
html[data-theme="light"] .takeaway__nav { background: rgba(0, 0, 0, 0.03); }
/* Navigation hint below the controls (keys on desktop, swipe on touch). */
.takeaway__hint {
  margin: 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg-3);
}
.takeaway__hint.is-hidden { display: none; }
.takeaway__hint kbd {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 9.5px;
  padding: 1px 5px;
  margin: 0 1px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg-2);
}
html[data-theme="light"] .takeaway__hint kbd { background: rgba(0, 0, 0, 0.04); }
.takeaway__hint-touch { display: none; }   /* desktop default: show the keys hint */
@media (hover: none), (pointer: coarse) {
  .takeaway__hint-touch { display: inline; }
  .takeaway__hint-keys { display: none; }
}
/* Controls hold prev/next arrows + the position dots; shown once box unfolds. */
.takeaway__dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.takeaway__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--fg-3);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease), background 160ms var(--ease);
}
.takeaway__dot:hover { opacity: 0.8; }
.takeaway__dot.is-active {
  opacity: 1;
  background: #ff6b7a;
  transform: scale(1.25);
}
html[data-theme="light"] .takeaway__dot.is-active { background: #c3243a; }
@media (prefers-reduced-motion: reduce) {
  /* The slide transform stays animated even under reduce-motion: it's a small,
     user-initiated horizontal glide (not autoplay/parallax), and without it the
     carousel jumps abruptly between problems. Only the reveal grow is dropped. */
  .takeaway__reveal { transition: none; }
}

.prs__card--problem {
  border-color: rgba(255, 80, 95, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 80, 95, 0.10), transparent 75%),
    var(--surface);
}
.prs__card--problem .prs__head { color: #ff6b7a; }

html[data-theme="light"] .prs__card--problem  .prs__head { color: #c3243a; }

/* ---------- Method figures + pills ---------- */
.figure {
  margin: 24px 0 0;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.figure--wide img { width: 100%; border-radius: var(--radius); }
.figure img { border-radius: var(--radius); width: 100%; }
/* Placeholder shown when a figure image is missing (e.g. assets/figures/figure2.png). */
.figure__ph {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px;
  border-radius: var(--radius);
  border: 1px dashed var(--line);
  background: repeating-linear-gradient(45deg, rgba(118, 185, 0, 0.05) 0 14px, transparent 14px 28px), var(--surface-2, var(--surface));
  color: var(--fg-2);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13.5px;
  text-align: center;
  padding: 24px;
}
.figure figcaption {
  margin-top: 12px;
  color: var(--fg-2);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 0 6px;
}
.results {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  min-width: 540px;
}
.results th, .results td {
  padding: 10px 10px;
  text-align: center;
  white-space: nowrap;
}
.results thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  color: var(--fg-2);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
}
.results tbody tr:nth-child(odd) td { background: var(--table-row); }
.results tbody tr:nth-child(even) td { background: var(--table-row-alt); }

/* ---------- Qualitative carousel ---------- */
.qual {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 14px 14px 24px;
  outline: none;
  overflow: hidden;                 /* clip the off-screen slides of the track */
}
.qual:focus-visible { box-shadow: 0 0 0 2px var(--nv); }
/* The slides sit side-by-side in one flex track that translates horizontally,
   so swiping/clicking glides between examples instead of cutting. */
.qual__track {
  display: flex;
  align-items: flex-start;
  /* height is driven by JS to the *current* slide so short examples don't leave
     a large empty band; both transform and height glide. */
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1),
              height 420ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.qual__slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 1.4fr;
  gap: 22px;
  padding: 12px;
  align-items: start;
}
.qual__media {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qual__media img {
  border-radius: var(--radius-sm);
  max-height: 260px;
  width: 100%;
  object-fit: contain;
  background: #0c0e09;
}
html[data-theme="light"] .qual__media img { background: #f0f4e8; }
/* Placeholder shown when an example figure (assets/qualitative/*.png) is missing. */
.qual__imgph {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line);
  background:
    repeating-linear-gradient(45deg, rgba(118, 185, 0, 0.05) 0 14px, transparent 14px 28px),
    var(--surface-3, var(--surface));
  color: var(--fg-2);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.qual__q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.65;
  color: var(--fg);
  background: var(--surface-3);
  border: 1px solid var(--line);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
}
.qual__q .qual__ans { color: var(--fg); font-weight: 400; }
/* "Initial Rollout Accuracy" stat — grows to fill the empty space below the Q/A
   box (the BCQ/NCQ column is taller), with a big highlighted 0%. */
.qual__stat {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  min-height: 130px;
  padding: 18px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(255, 159, 67, 0.12), rgba(255, 159, 67, 0) 70%),
    var(--surface-3);
}
.qual__stat-label {
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.qual__stat-model {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
}
.qual__stat-val {
  margin-top: 8px;
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(44px, 7vw, 68px);
  font-weight: 800;
  line-height: 1;
  color: #ff9f43;
  text-shadow: 0 0 24px rgba(255, 159, 67, 0.45);
}
.qual__stat-hard {
  font-size: 0.3em;
  font-weight: 700;
  color: var(--fg-2);
  vertical-align: middle;
  letter-spacing: 0.02em;
  text-shadow: none;
}

.qual__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 0;
}
.qual__card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.qual__card h4 {
  margin: 0;
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 800;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* BCQ = cyan, NCQ = magenta — solid lettering (matches the section title). */
.qual__card--bcq h4 { color: #22d3ee; }
.qual__card--ncq h4 { color: #e879f9; }
.qual__card--bcq { border-color: rgba(34, 211, 238, 0.40); }
.qual__card--ncq { border-color: rgba(232, 121, 249, 0.40); }
.qual__card .trace {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--fg-2);
  background: var(--surface-3);
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: 8px;
  /* Preserve the newlines we inject between `<think>` / `</think>` / `\boxed{...}`
     so each rollout reads like a real model output trace, not a wrapped run-on. */
  white-space: pre-wrap;
  word-break: break-word;
}
.qual__card .think-tag {
  color: var(--fg-3);
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.qual__card .verdict {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: auto;
  padding: 5px 16px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
}

.qual__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  border: 1px solid var(--line-strong);
  color: var(--fg);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 3;
  transition: background 160ms var(--ease), transform 160ms var(--ease), border-color 160ms var(--ease);
  backdrop-filter: blur(8px);
}
.qual__nav:hover { border-color: var(--nv); background: color-mix(in srgb, var(--surface-2) 80%, var(--nv-soft)); }
.qual__nav--prev { left: -10px; }
.qual__nav--next { right: -10px; }

.qual__dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.qual__dot {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  padding: 0;
  transition: background 160ms var(--ease), transform 160ms var(--ease);
}
.qual__dot.is-active {
  background: var(--nv);
  box-shadow: 0 0 10px var(--nv-glow);
  width: 28px;
}
.math {
  font-family: 'JetBrains Mono','Cambria Math','STIX Two Math',ui-monospace,monospace;
  font-style: italic;
  font-size: 0.95em;
  letter-spacing: 0.01em;
  color: var(--fg);
  white-space: nowrap;
}
.math sub { font-style: normal; font-size: 0.78em; vertical-align: sub; }
.boxed {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  padding: 1px 8px;
  border: 1.5px solid var(--nv);
  border-radius: 5px;
  background: var(--nv-soft);
  color: var(--fg);
  margin: 0 2px;
  font-size: 0.95em;
  line-height: 1.4;
}
/* Make the final \boxed{} answer pop a bit more inside the BCQ / NCQ traces. */
.qual__card .trace .boxed {
  font-size: 1.05em;
  padding: 2px 11px;
  box-shadow: 0 0 12px rgba(118, 185, 0, 0.28);
}
/* Explicit "omitted reasoning" marker inside the BCQ / NCQ traces. */
.qual__card .trace .trace-omit {
  color: #d39a4e;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* Correct = green box, wrong = red box (paired with the O / X mark). */
.boxed--no { border-color: var(--neg); background: rgba(230, 74, 74, 0.12); color: var(--fg); }
.qual__card .trace .boxed--no { box-shadow: 0 0 12px rgba(230, 74, 74, 0.30); }
/* Inline "Correct" / "Wrong" verdict box next to the boxed answer. */
.ans-verdict {
  display: inline-block;
  margin-left: 9px;
  padding: 2px 12px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.92em;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
}
.ans-verdict--ok { color: var(--nv);  background: rgba(118, 185, 0, 0.14); }
.ans-verdict--no { color: var(--neg); background: rgba(230, 74, 74, 0.14); }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding: 28px 22px;
}
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
/* logo left · copyright centered · Top right */
.footer__brand { order: 1; }
.footer__meta  { order: 2; flex: 1; text-align: center; }
.footer__top   { order: 3; }
.footer__logo {
  height: 22px;
  width: auto;
  display: block;
  color: var(--fg-2);
  opacity: 0.9;
}
.footer__meta { color: var(--fg-2); font-size: 13.5px; }
.footer__top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 600;
}
.footer__top:hover { border-color: var(--nv); color: var(--fg); }

/* ---------- Mobile / Responsive ---------- */
@media (max-width: 820px) {
  .nav__inner { gap: 10px; padding: 10px 16px; }
  .nav__links { display: none; }
  .nav__logo { height: 22px; }

  .hero { padding: 36px 16px 18px; }
  .hero__inner { text-align: center; }
  .hero__title { margin-left: auto; margin-right: auto; }
  .hero__zppo { letter-spacing: -0.08em; }
  .hero__sub { justify-content: center; }
  /* On mobile, drop the robot back into normal flow so it doesn't overflow */
  .emoji-wrap {
    position: static;
    margin-left: 0;
    transform: translateY(2px);
    animation: none;
  }
  .authors, .affiliation, .hero__cta, .hero__eyebrow { justify-content: center; }

  .section { padding: 56px 16px; }

  .qual__slide { grid-template-columns: 1fr; gap: 12px; }
  .qual__cards { grid-template-columns: 1fr; }
  .qual__media img { max-height: 220px; }
  .qual__nav { width: 40px; height: 40px; }
  .qual__nav--prev { left: 4px; }
  .qual__nav--next { right: 4px; }
}

@media (max-width: 600px) {
  /* Stack the Paper / Code / Models CTAs one per row so they never wrap into
     an uneven 2 + 1 layout on phones. Centered to match the mobile hero. */
  .hero__cta {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .cta-col {
    width: 100%;
    align-items: center;
  }
}

@media (max-width: 520px) {
  .hero__zppo { font-size: clamp(64px, 18vw, 96px); }
  .hero__full { font-size: clamp(24px, 7vw, 34px); gap: 0.36em; }
  .hero__sub { font-size: clamp(16px, 4.4vw, 22px); }
  .figure { padding: 8px; }
  .figure figcaption { font-size: 12.5px; }
}

/* ---- Insight section · mobile hardening ----
   The Question / Inspiration / Lens / Solution / Effect boxes all clip their
   content (overflow: hidden), so on phones any phrase pinned to a single line
   with white-space: nowrap gets cut off at the box edge. These rules live here,
   after the base rules they override, so source order lets them win at ≤640px.
   Trim the box side padding for more room and let the long emphasis phrases and
   the BCQ/NCQ subtitles wrap instead of overflowing. */
@media (max-width: 640px) {
  .rq__box { padding-left: 18px; padding-right: 18px; }

  /* The decorative quote marks are pinned to ~88px on phones, which crowds the
     centered RESEARCH QUESTION badge in the now-narrow box and makes the badge
     read as off-center. Shrink them so they tuck into the corners, clear of the
     badge. */
  .rq__box--quote::before,
  .rq__box--quote::after { font-size: clamp(46px, 13vw, 70px); }
  .rq__box--quote::before { left: 12px; }
  .rq__box--quote::after  { right: 12px; }

  .zpd__legend .zpd-hl,
  .zpd__legend--rl .rl-zppo,
  .zpd__intro strong { white-space: normal; }

  .dh__label { width: 100%; }
  .dh__label-t { min-width: 0; overflow-wrap: break-word; text-align: center; }

  /* Keep the BCQ/NCQ cards from exceeding the box: let the (single) grid column
     shrink, make the candidate boxes fill the card width, and wrap their text —
     the nowrap placeholders were forcing the card wider than the box. */
  .dh__grid { grid-template-columns: minmax(0, 1fr); }
  .dh__card--bcq .dh__cands,
  .dh__card--ncq .dh__cands { grid-template-columns: minmax(0, 1fr); }
  .dh__cand { min-width: 0; }
  .dh__cand-ph { white-space: normal; overflow-wrap: anywhere; }
}

/* Very narrow phones: tighten the badge tracking so even the longest labels
   ("RESEARCH QUESTION") comfortably stay on one line within the viewport. */
@media (max-width: 400px) {
  .rq__kicker { letter-spacing: 0.12em; font-size: 11.5px; padding: 7px 13px; }
}
@keyframes zppo-card-new {
  0%   { transform: translate(40px, 110px); opacity: 0; }
  3%   { transform: translate(40px, 110px); opacity: 1; }
  11%  { transform: translate(210px, 170px); opacity: 1; }
  96%  { transform: translate(210px, 170px); opacity: 1; }
  100% { transform: translate(40px, 110px);  opacity: 0; }
}
@keyframes zppo-card-replay {
  0%   { transform: translate(40px, 250px); opacity: 0; }
  5%   { transform: translate(40px, 250px); opacity: 1; }
  13%  { transform: translate(210px, 240px); opacity: 1; }
  96%  { transform: translate(210px, 240px); opacity: 1; }
  100% { transform: translate(40px, 250px);  opacity: 0; }
}
@keyframes zppo-sample {
  0%, 13%  { transform: translate(290px, 238px); opacity: 0; }
  17%      { transform: translate(290px, 238px); opacity: 1; }
  24%      { transform: translate(350px, 218px); opacity: 1; }
  30%      { transform: translate(390px, 200px); opacity: 1; }
  34%      { transform: translate(390px, 200px); opacity: 1; }
  38%      { transform: translate(390px, 200px); opacity: 0; }
  100%     { transform: translate(290px, 238px); opacity: 0; }
}

/* Each chip: invisible until its pop %, visible from (pop+3)% through 96%,
   fade out 96→100% so the chip is gone before the cycle resets. */
@keyframes zppo-chip-t  { 0%, 31% { opacity: 0; transform: scale(0.3); } 34% { opacity: 1; transform: scale(1); } 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.3); } }
@keyframes zppo-chip-s0 { 0%, 33% { opacity: 0; transform: scale(0.3); } 36% { opacity: 1; transform: scale(1); } 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.3); } }
@keyframes zppo-chip-s1 { 0%, 35% { opacity: 0; transform: scale(0.3); } 38% { opacity: 1; transform: scale(1); } 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.3); } }
@keyframes zppo-chip-s2 { 0%, 37% { opacity: 0; transform: scale(0.3); } 40% { opacity: 1; transform: scale(1); } 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.3); } }
@keyframes zppo-chip-s3 { 0%, 39% { opacity: 0; transform: scale(0.3); } 42% { opacity: 1; transform: scale(1); } 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.3); } }
@keyframes zppo-chip-s4 { 0%, 41% { opacity: 0; transform: scale(0.3); } 44% { opacity: 1; transform: scale(1); } 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.3); } }
@keyframes zppo-chip-s5 { 0%, 43% { opacity: 0; transform: scale(0.3); } 46% { opacity: 1; transform: scale(1); } 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.3); } }
@keyframes zppo-chip-s6 { 0%, 45% { opacity: 0; transform: scale(0.3); } 48% { opacity: 1; transform: scale(1); } 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.3); } }
@keyframes zppo-chip-s7 { 0%, 47% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1); } 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.3); } }
@keyframes zppo-admit-draw {
  0%, 56%  { stroke-dashoffset: 360; opacity: 0; }
  58%      { stroke-dashoffset: 360; opacity: 1; }
  66%      { stroke-dashoffset: 0;   opacity: 1; }
  96%      { stroke-dashoffset: 0;   opacity: 1; }
  100%     { stroke-dashoffset: 360; opacity: 0; }
}
@keyframes zppo-bcq-teacher {
  0%, 60%  { opacity: 0; transform: translate(0, -20px); }
  64%      { opacity: 1; transform: translate(0, 0); }
  68%      { opacity: 1; transform: translate(0, 0); }
  72%      { opacity: 0.55; transform: translate(0, 0); filter: saturate(0.3); }
  96%      { opacity: 0.55; transform: translate(0, 0); filter: saturate(0.3); }
  100%     { opacity: 0; transform: translate(0, -20px); filter: saturate(1); }
}
@keyframes zppo-bcq-student {
  0%, 63%  { opacity: 0; transform: translate(0, 20px); }
  67%      { opacity: 1; transform: translate(0, 0); }
  71%      { opacity: 1; transform: translate(0, 0); }
  75%      { opacity: 0.55; transform: translate(0, 0); filter: saturate(0.3); }
  96%      { opacity: 0.55; transform: translate(0, 0); filter: saturate(0.3); }
  100%     { opacity: 0; transform: translate(0, 20px); filter: saturate(1); }
}
@keyframes zppo-bcq-slot-1 {
  0%, 70%  { transform: translateY(0); }
  78%      { transform: translateY(75px); }
  96%      { transform: translateY(75px); }
  100%     { transform: translateY(0); }
}
@keyframes zppo-bcq-slot-2 {
  0%, 70%  { transform: translateY(0); }
  78%      { transform: translateY(-75px); }
  96%      { transform: translateY(-75px); }
  100%     { transform: translateY(0); }
}
@keyframes zppo-ncq-pop-0 { 0%, 75% { opacity: 0; transform: translate(40px, 0); } 78% { opacity: 1; transform: translate(0, 0); } 96% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(40px, 0); } }
@keyframes zppo-ncq-pop-1 { 0%, 78% { opacity: 0; transform: translate(40px, 0); } 81% { opacity: 1; transform: translate(0, 0); } 96% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(40px, 0); } }
@keyframes zppo-ncq-pop-2 { 0%, 81% { opacity: 0; transform: translate(40px, 0); } 84% { opacity: 1; transform: translate(0, 0); } 96% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(40px, 0); } }
@keyframes zppo-ncq-stamp {
  0%, 86%  { opacity: 0; transform: rotate(-9deg) scale(2.2); }
  90%      { opacity: 1; transform: rotate(-9deg) scale(0.92); }
  93%      { opacity: 1; transform: rotate(-9deg) scale(1.06); }
  96%      { opacity: 1; transform: rotate(-9deg) scale(1);    }
  100%     { opacity: 0; transform: rotate(-9deg) scale(2.2);  }
}
@keyframes zppo-cursor-blink {
  0%, 75%   { opacity: 0; }
  78%       { opacity: 1; }
  80%       { opacity: 0; }
  82%       { opacity: 1; }
  84%       { opacity: 0; }
  86%       { opacity: 1; }
  96%       { opacity: 1; }
  100%      { opacity: 0; }
}
@keyframes zppo-cursor-blink-ncq {
  0%, 90%   { opacity: 0; }
  92%       { opacity: 1; }
  94%       { opacity: 0; }
  96%       { opacity: 1; }
  100%      { opacity: 0; }
}
@keyframes zppo-judge {
  0%, 50%  { opacity: 0; transform: translateY(8px); }
  54%      { opacity: 1; transform: translateY(0); }
  96%      { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(8px); }
}
@keyframes zppo-branch {
  0%, 27%  { opacity: 0; }
  31%      { opacity: 1; }
  96%      { opacity: 1; }
  100%     { opacity: 0; }
}
@keyframes zppo-sample-arrow {
  0%, 15%  { opacity: 0; }
  20%      { opacity: 1; }
  36%      { opacity: 1; }
  42%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes zppo-ncq-more {
  0%, 84%  { opacity: 0; }
  88%      { opacity: 1; }
  96%      { opacity: 1; }
  100%     { opacity: 0; }
}

/* ---------- Reveal on scroll ---------- */
.to-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  will-change: opacity, transform;
}
.to-reveal.is-in {
  opacity: 1;
  transform: none;
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Exception: the carousels are navigated by the user (arrows / dots / swipe),
   so keep their horizontal slide animated even under reduce-motion. The global
   reset above zeroes every transition; a class selector (higher specificity)
   restores the duration for just these two tracks. */
@media (prefers-reduced-motion: reduce) {
  .qual__track { transition-duration: 420ms !important; }
  .takeaway__track { transition-duration: 380ms !important; }
}

/* ---------- Print ---------- */
@media print {
  .nav, .qual__nav, .qual__dots, .footer__top { display: none; }
  body { background: white; color: black; }
  .hero__zppo { -webkit-text-fill-color: #76B900; color: #76B900; }
}