/* ==========================================================================
   Design tokens. Every color, size and space on the site should come from
   here; the dark theme only redefines the values below.
   ========================================================================== */
:root {
  /* type: two families, a 1.25 scale (13 / 16 / 20 / 31 / display) */
  --font-display: 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-1: 0.8125rem;   /* 13px: labels, tags, chips, meta, chart text */
  --fs-2: 1rem;        /* 16px: all reading text */
  --fs-3: 1.25rem;     /* 20px: h3, lead sentences, authors */
  --fs-4: 1.953rem;    /* 31px: h2 */
  --fs-display: clamp(1.953rem, 1.2rem + 3vw, 3.052rem); /* h1: 31px -> 49px */
  --lh-tight: 1.2;
  --lh-ui: 1.35;
  --lh-body: 1.6;
  --measure: 68ch;

  /* space: 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* shape */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.15);
  --motion-fast: 150ms;
  --motion: 220ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* neutrals */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #fafaf9;
  --surface-sunken: #f3f3f1;
  --surface-hover: #ececea;
  --ink: #1f1f1d;
  --text: #3a3a37;
  --text-muted: #6b6a65;
  --border: #e6e5e0;
  --border-strong: #c9c8c0;
  --media-bg: #111111;

  /* the one UI accent: links, secondary controls, focus, selection */
  --link: #0b6bae;
  --link-hover: #08507f;
  --focus: #0b6bae;
  --accent-soft: rgba(11, 107, 174, 0.12);

  /* status (all >= 4.5:1 on their background) */
  --success-fg: #257942;
  --success-bg: #effaf3;
  --danger-fg: #cc0f35;
  --danger-bg: #feecf0;
  --warning-fg: #8c7000;
  --warning-bg: #fffbeb;
  --info-fg: #1d72aa;
  --info-bg: #eef6fc;

  /* data encodings: these match the paper's figures, keep the hexes */
  --c-dna: #d81b60;
  --c-dna-star: #f4a9c8;
  --c-dna-text: #d81b60;   /* D&A pink when used as text */
  --c-naive: #007d68;
  --c-gvl: #7f8c8d;
  --c-topreward: #9467bd;
  --c-sole: #17becf;
  --c-roboreward: #fcbf07;
  --c-robometer: #ff7f0e;
  --c-rynnvalue: #8c564b;
  --c-gemini: #d81b60;
  --c-gpt: #007d68;
  --c-claude: #d97757;
  --c-muse: #0082fb;
  --c-kimi: #000000;
  --c-qwen: #615ced;
  --c-success-text: #007d68;

  /* charts (apply through classes or el.style, never presentation attributes) */
  --chart-grid: #ecece9;
  --chart-axis: #c9c8c0;
  --chart-tick: #6b6a65;
  --chart-label: #3a3a37;
  --chart-value: #1f1f1d;
  --marker-halo: #ffffff;
  --playhead: #3a3a37;
  --tooltip-bg: #ffffff;
}

:root[data-theme="dark"] {
  --bg: #141416;
  --surface: #1c1c1f;
  --surface-2: #18181a;
  --surface-sunken: #26262a;
  --surface-hover: #2e2e33;
  --ink: #ecebe7;
  --text: #c9c7c1;
  --text-muted: #a3a19b;
  --border: #2e2e33;
  --border-strong: #45454b;
  --media-bg: #000000;
  --link: #6cb6f0;
  --link-hover: #9ccdf5;
  --focus: #6cb6f0;
  --accent-soft: rgba(108, 182, 240, 0.16);
  --success-fg: #6fd69a;
  --success-bg: rgba(72, 199, 116, 0.16);
  --danger-fg: #ff8fa3;
  --danger-bg: rgba(241, 70, 104, 0.18);
  --warning-fg: #f2c94c;
  --warning-bg: rgba(255, 221, 87, 0.14);
  --info-fg: #7cc4f5;
  --info-bg: rgba(62, 142, 208, 0.18);
  --c-dna-text: #f06292;
  --c-success-text: #2bb59a;
  --chart-grid: #2a2a2e;
  --chart-axis: #45454b;
  --chart-tick: #a3a19b;
  --chart-label: #c9c7c1;
  --chart-value: #ecebe7;
  --marker-halo: #1c1c1f;
  --playhead: #c9c7c1;
  --tooltip-bg: #26262a;
  --shadow-1: 0 0 0 1px var(--border);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* ==========================================================================
   Base + Bulma 0.9 re-pointed at the tokens (Bulma has no CSS variables)
   ========================================================================== */
html {
  background-color: var(--bg);
}

body {
  font-family: var(--font-text);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--text);
  background-color: var(--bg);
}

.title,
.content h1,
.content h2,
.content h3,
strong,
.content strong {
  color: var(--ink);
}

.title {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
}

.subtitle {
  color: var(--text);
}

a {
  color: var(--link);
}

a:hover {
  color: var(--link-hover);
}

/* links inside running text look like links (underlined) */
p a:not(.button),
li a:not(.button),
.figure-caption a,
.footer a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Bulma replaces outlines with a faint box-shadow (1.6:1 on dark buttons): use the ring instead */
.button:focus-visible,
.select select:focus-visible,
.input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: none !important;
}

.button:focus:not(:focus-visible),
.select select:focus:not(:focus-visible) {
  box-shadow: none;
}

.hero,
.section {
  background-color: transparent;
}

.footer {
  background-color: var(--surface-2);
  color: var(--text);
}

code {
  background-color: var(--surface-sunken);
  color: var(--ink);
}

pre {
  background-color: var(--surface-sunken);
  color: var(--text);
}

.content pre code {
  color: inherit;
}

.button {
  background-color: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.button:hover,
.button.is-hovered {
  background-color: var(--surface-hover);
  border-color: var(--text-muted);
  color: var(--ink);
}

.button:active:not([disabled]) {
  transform: scale(0.97);
}

.button.is-dark,
.button.is-dark:focus {
  background-color: var(--ink);
  border-color: transparent;
  color: var(--bg);
}

.button.is-dark:hover,
.button.is-dark.is-hovered {
  background-color: var(--text);
  color: var(--bg);
}

.button.is-white {
  background-color: transparent;
  color: var(--text);
}

.button[disabled],
fieldset[disabled] .button {
  background-color: var(--surface-sunken);
  border-color: var(--border);
  color: var(--text-muted);
}

.input,
.textarea,
.select select {
  background-color: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-muted);
}

.input:hover,
.select select:hover {
  border-color: var(--text-muted);
}

.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--link);
  box-shadow: 0 0 0 0.125em var(--accent-soft);
}

.select:not(.is-multiple):not(.is-loading)::after {
  border-color: var(--link);
}

.select select option,
.select select optgroup {
  background-color: var(--surface);
  color: var(--ink);
}

.tag:not(body) {
  background-color: var(--surface-sunken);
  color: var(--text);
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 2em;
  padding: 0.25em 0.75em;
  line-height: 1;
}

.tag:not(body).is-success.is-light {
  background-color: var(--success-bg);
  color: var(--success-fg);
}

.tag:not(body).is-danger.is-light {
  background-color: var(--danger-bg);
  color: var(--danger-fg);
}

.tag:not(body).is-warning.is-light {
  background-color: var(--warning-bg);
  color: var(--warning-fg);
}

.tag:not(body).is-info.is-light {
  background-color: var(--info-bg);
  color: var(--info-fg);
}

.table {
  background-color: transparent;
  color: var(--text);
}

.table th {
  color: var(--ink);
}

.table td,
.table th {
  border-color: var(--border);
}

.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background-color: var(--surface-2);
}

/* paper figures are white PNGs: in dark mode they sit on an intentional white plate */
:root[data-theme="dark"] img.figure-img {
  background-color: #fff;
  padding: var(--space-3);
}

/* shared utilities */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.prose {
  max-width: var(--measure);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
}

/* legend chips are toggle <button>s: reset the native button look */
button.legend-chip {
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-display);
  line-height: var(--lh-ui);
  margin: 0;
}

/* toggle state is shown by a glyph too, not only by color/opacity */
button.legend-chip[aria-pressed]::before {
  content: "\2713";
  font-weight: 700;
  margin-right: 0.1em;
}

button.legend-chip[aria-pressed="false"]::before {
  content: "\25CB";
}

/* section anatomy: h2 -> lead sentence -> figure/widget -> caption; plus one UI hint line near controls */
.section-lead {
  max-width: var(--measure);
  margin: 0 auto var(--space-5);
  font-family: var(--font-text);
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}

.section-hint {
  font-size: var(--fs-1);
  line-height: var(--lh-ui);
  color: var(--text-muted);
}

@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;
  }
}

/* ==========================================================================
   Components
   ========================================================================== */

/* Model badge (tags, legend chips): the swatch is a data color, the label color is
   picked for contrast. Set both per element: style="--c:#9467bd; --on-c:#000". */
.tag.is-model,
.legend-chip.is-model {
  background-color: var(--c, var(--surface-sunken));
  color: var(--on-c, #fff);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* model / benchmark names in running text (replaces red <code>) */
.term {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
/* ==========================================================================
   Page layout (index.html)
   ========================================================================== */
:root {
  --gutter: 1.5rem;
  --nav-h: 48px;
}

@media screen and (max-width: 768px) {
  :root {
    --gutter: var(--space-4);
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--space-4));
}

/* Bulma's is-max-desktop caps content at 960px, which reads as a narrow
   column on wide monitors. Widen it so the page uses roughly half the
   viewport on large screens, while never exceeding it on small ones. */
@media screen and (min-width: 1024px) {
  .container.is-max-desktop {
    max-width: clamp(960px, 50vw, 1400px);
  }
}

.hero-body {
  padding: 0 var(--gutter) var(--space-6);
}

.section {
  padding: var(--space-7) var(--gutter);
}

@media screen and (max-width: 768px) {
  .section {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
}

.section,
.hero {
  scroll-margin-top: calc(var(--nav-h) + var(--space-4));
}

/* type scale for headings: h1 display, h2 fs-4, h3 fs-3 */
.title.is-3 {
  font-size: var(--fs-4);
}

.title.is-5 {
  font-size: var(--fs-3);
}

.tag:not(body) {
  font-family: var(--font-display);
  font-size: var(--fs-1);
  line-height: var(--lh-ui);
}

/* ---------- skip link + sticky section nav ---------- */
.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--motion-fast) var(--ease-out);
}

.skip-link:focus {
  transform: none;
  color: var(--bg);
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--motion) var(--ease-out), visibility 0s linear var(--motion);
  height: var(--nav-h);
  padding: 0 var(--gutter);
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* hidden until the hero marquee has scrolled past */
.site-nav.is-visible {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav { transition: none; }
}

.site-nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 100%;
}

.site-nav-brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2);
  color: var(--ink);
  text-decoration: none;
}

.site-nav-brand:hover {
  color: var(--link);
}

.site-nav-links {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-nav-links::-webkit-scrollbar {
  display: none;
}

.site-nav-links li {
  display: flex;
  flex: none;
}

.site-nav .site-nav-links a {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
  .site-nav .site-nav-links a:hover {
    color: var(--ink);
  }
}

.site-nav .site-nav-links a[aria-current] {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--link);
}

.theme-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  padding: 0;
  font-size: var(--fs-2);
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
@media (hover: hover) {
  .theme-toggle:hover { color: var(--ink); background: var(--surface); }
}
@media (pointer: coarse) {
  .theme-toggle { width: 44px; height: 44px; }
}

/* ---------- hero ---------- */
.title.publication-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.title-icon {
  width: auto;
  height: 1em;
  vertical-align: -0.1em;
  margin-right: 0.15em;
}

.publication-authors {
  max-width: 52rem;
  margin: var(--space-4) auto 0;
  font-family: var(--font-display);
  font-size: var(--fs-3);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: balance;
}

.publication-authors a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--motion-fast) var(--ease-out), text-decoration-color var(--motion-fast) var(--ease-out);
}

.publication-authors a:hover {
  color: var(--link);
  text-decoration-color: var(--link);
}

.author-block {
  display: inline-block;
}

.publication-affiliations {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-2);
  color: var(--text-muted);
}

.publication-affiliations .author-block + .author-block {
  margin-left: var(--space-3);
}

.publication-note {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-1);
  color: var(--text-muted);
}

.publication-venue {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--ink);
}

.publication-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.link-block a {
  margin: 0;
}

.publication-soon {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-1);
  color: var(--text-muted);
}

/* ---------- TL;DR ---------- */
.abstract-lead {
  max-width: var(--measure);
  margin: 0 auto var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-3);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
}

.abstract-boxes {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-4);
  max-width: 100%;
  margin: 0 auto;
}

.abstract-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: left;
}

.abstract-box-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.abstract-box {
  flex: 1 1 0;
  min-width: 0;
}

@media screen and (max-width: 768px) {
  .abstract-boxes {
    flex-direction: column;
  }
}

.abstract-box p {
  max-width: var(--measure);
  margin: 0;
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--text);
}

/* ---------- containers: .section-card at top level (.panel-card is nested, defined with the widgets) ---------- */
.section-card,
.chart-card {
  width: 100%;
  max-width: 100%;
  margin: var(--space-5) auto 0;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  text-align: left;
  position: relative;
}

@media screen and (max-width: 768px) {
  .section-card,
  .chart-card {
    padding: var(--space-4);
  }
}

/* ---------- figures and captions ---------- */
img.figure-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.figure-caption {
  max-width: var(--measure);
  margin: var(--space-3) auto 0;
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--text);
  text-align: left;
}

.txt-success {
  color: var(--c-success-text);
}

.txt-dna {
  color: var(--c-dna-text);
}

/* ---------- RL + embodiment video tiles ---------- */
.embodiment-group {
  margin-top: var(--space-7);
}

.embodiment-group:first-of-type {
  margin-top: var(--space-5);
}

.embodiment-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.embodiment-title .title {
  margin-bottom: 0;
}

.embodiment-source {
  font-size: var(--fs-1);
  color: var(--text-muted);
}

.embodiment-instruction {
  margin: var(--space-1) 0 0;
  font-family: var(--font-text);
  font-style: italic;
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--text);
  text-align: center;
}

.embodiment-instruction .embodiment-tag {
  display: inline-block;
  margin-left: var(--space-3);
  padding: 2px var(--space-3);
  vertical-align: middle;
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--fs-1);
  font-weight: 600;
  line-height: var(--lh-ui);
  color: var(--text);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.gen-video-card {
  height: 100%;
}

.gen-video-card video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--media-bg);
}

.gen-video-wrap {
  position: relative;
}

.gen-video-caption {
  margin-top: var(--space-3);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--text);
  text-align: center;
}

.gen-video-caption .tag {
  display: flex;
  width: fit-content;
  margin: 0 auto var(--space-1);
}

.tag.is-policy {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--ink);
}

.speed-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: 2px var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 700;
  line-height: var(--lh-ui);
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  border-radius: var(--radius-pill);
  pointer-events: none;
}

/* ---------- BibTeX ---------- */
.bibtex-block {
  text-align: left;
}

.bibtex-block h2.title {
  font-size: var(--fs-4);
  margin-bottom: var(--space-5);
}

.bibtex-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.bibtex-copy {
  align-self: flex-end;
  margin-bottom: var(--space-2);
}

.bibtex-copy.is-copied {
  color: var(--success-fg);
  border-color: var(--success-fg);
}

.bibtex-wrap pre {
  margin: 0;
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-code, 0.875em);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.bibtex-wrap pre code {
  padding: 0;
  background: transparent;
  font-size: inherit;
}

/* ---------- footer on the content grid ---------- */
.footer {
  padding: var(--space-6) var(--gutter);
  background-color: var(--bg);
  border-top: 1px solid var(--border);
}

.footer p {
  max-width: none;            /* the full width of the page container, not a single reading column */
  margin: 0;
  font-size: var(--caption-size, 0.9375rem);     /* same type as the other captions */
  line-height: 1.55;
  color: var(--caption-color, var(--text));
  text-align: center;
  text-wrap: pretty;
}

.footer p + p {
  margin-top: var(--space-3);
}

/* ---------- legend chips (shared: bar charts, scaling plot, bench widget) ---------- */
.chart-plot-wrap {
  position: relative;
}

.chart-plot-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  cursor: crosshair;
}

.bar-chart-wrap {
  position: relative;
  margin: 0 auto;
}

.bar-chart-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart-legend {
  margin-top: var(--space-2);
}

.legend-group + .legend-group {
  margin-top: var(--space-3);
}

.legend-group-title {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.legend-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-family: var(--font-display);
  font-size: var(--fs-1);
  line-height: var(--lh-ui);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
  .legend-chip:hover {
    background-color: var(--surface-hover);
  }
}

.legend-chip:active {
  transform: scale(0.97);
}

.legend-chip.is-off {
  color: var(--text-muted);
  text-decoration: line-through;
}

.legend-chip .legend-swatch {
  flex: none;
  width: 14px;
  height: 14px;
}

/* model badge variant: data-color swatch, label color chosen for contrast */
.legend-chip.is-model {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
}

@media (hover: hover) {
  .legend-chip.is-model:hover {
    background-color: var(--c, var(--surface-hover));
    filter: brightness(1.1);
  }
}

/* off: drop the fill, keep the data color as a bar so the series stays identifiable; no text opacity */
.legend-chip.is-model.is-off {
  background-color: var(--surface-sunken);
  color: var(--text-muted);
  text-decoration: none;
  box-shadow: inset 0 -3px 0 var(--c, var(--border-strong));
}

@media (hover: hover) {
  .legend-chip.is-model.is-off:hover {
    background-color: var(--surface-hover);
    filter: none;
  }
}

/* always-on entries are plain labels, not toggles */
.legend-chip.is-static,
.legend-chip.is-dna {
  cursor: default;
}

@media (hover: hover) {
  .legend-chip.is-static:hover,
  .legend-chip.is-dna:hover {
    filter: none;
  }
}

.legend-chip.is-static:active,
.legend-chip.is-dna:active {
  transform: none;
}

/* ---------- touch targets ---------- */
@media (pointer: coarse) {
  .legend-chip {
    min-height: 40px;
  }

  .site-nav-links a {
    min-height: 44px;
  }

  .button {
    min-height: 44px;
  }

  .bibtex-copy {
    min-width: 44px;
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
}

.hero-body {
  position: relative;
  z-index: 1;
}

/* ---------- TL;DR: Problem -> Method -> Results as a three-step flow ---------- */
.abstract-boxes {
  gap: var(--space-5);
}

.abstract-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--motion) var(--ease-out), transform var(--motion) var(--ease-out);
}

@media (hover: hover) {
  .abstract-box:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
  }
}

.abstract-box-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.abstract-box-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--link);
  font-size: var(--fs-2);
}

.abstract-box .abstract-box-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--fs-3);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.abstract-box-step {
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--text-muted);
}

.abstract-box-step::after {
  content: ".";
}

.abstract-stats {
  display: flex;
  gap: var(--space-5);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.abstract-stats dt {
  order: 2;
  font-size: var(--fs-1);
  line-height: var(--lh-ui);
  color: var(--text-muted);
}

.abstract-stats dd {
  order: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--c-success-text);
}

.abstract-stats > div {
  display: flex;
  flex-direction: column;
}

/* Problem and Method side by side; Results full width below, groups as a 2x2 grid */
@media screen and (min-width: 769px) {
  .abstract-boxes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
  }

  .abstract-box.is-problem { grid-column: 1; grid-row: 1; }
  .abstract-box.is-method { grid-column: 2; grid-row: 1; }
  .abstract-box.is-results {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-5);
  }

  .abstract-box.is-results .abstract-box-head {
    grid-column: 1 / -1;
  }
}

.abstract-box .result-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.result-group-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--ink);
}

.result-group-title span {
  margin-left: var(--space-1);
  font-size: var(--fs-1);
  font-weight: 400;
  color: var(--text-muted);
}

.abstract-box .result-statement {
  max-width: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.result-da {
  color: var(--c-dna-text);
  font-weight: 700;
}

.abstract-box .abstract-stats {
  margin: 0;
  padding: 0;
  border: 0;
}

.abstract-box .abstract-stats dd {
  font-size: calc(var(--fs-4) + 0.5rem);
}

.abstract-box .result-note {
  font-size: var(--fs-1);
  line-height: var(--lh-ui);
  color: var(--text-muted);
}

.result-sota {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-sota li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: var(--fs-1);
  line-height: 1;
}

.result-sota li strong {
  color: var(--c-success-text);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

/* result groups link to their section */
a.result-group {
  color: inherit;
  text-decoration: none;
  margin: 0 calc(-1 * var(--space-3));
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background-color var(--motion-fast) var(--ease-out);
}

a.result-group::after {
  content: "View results \2192";
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--link);
}

a.result-group:hover {
  color: inherit;
  background-color: var(--surface-2);
}

a.result-group:hover::after {
  text-decoration: underline;
}

/* Problem text: only the key phrases are bold, model names stay regular */
.abstract-box.is-problem .term {
  font-weight: 400;
}

.abstract-box .abstract-stats.is-compact {
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.abstract-box .abstract-stats.is-compact dd {
  font-size: var(--fs-4);
}

.abstract-box .abstract-stats dd.is-muted {
  color: var(--text-muted);
}

/* ---------- frontier models: dumbbell plots (Naive -> D&A per model) ---------- */
.frontier-legend {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-1);
  color: var(--text);
}

.frontier-legend > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.frontier-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media screen and (max-width: 900px) {
  .frontier-panels {
    grid-template-columns: minmax(0, 1fr);
  }
}

.frontier-panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--ink);
}

.frontier-panel-metric {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-1);
  color: var(--text-muted);
}

.db-chart {
  display: grid;
  grid-template-columns: max-content minmax(120px, 1fr) max-content;
  column-gap: var(--space-4);
  align-items: center;
}

.db-row {
  display: contents;
}

.db-row > * {
  margin-block: var(--space-2);
}

.db-label {
  font-size: var(--fs-1);
  color: var(--text);
  white-space: nowrap;
}

.db-track {
  position: relative;
  height: 28px;
  background:
    linear-gradient(var(--border), var(--border)) 16.67% 0 / 1px 100% no-repeat,
    linear-gradient(var(--border), var(--border)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--border), var(--border)) 83.33% 0 / 1px 100% no-repeat;
}

.db-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--border-strong);
}

.db-line {
  position: absolute;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: var(--text-muted);
  opacity: 0.45;
}

.db-dot {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
}

.db-dot.is-naive { background: var(--c-naive); }
.db-dot.is-dna { background: var(--c-dna); }

.db-dot.is-static {
  position: static;
  display: inline-block;
  margin: 0;
}

.db-values {
  font-family: var(--font-display);
  font-size: var(--fs-1);
  color: var(--text);
  white-space: nowrap;
  text-align: right;
}

.db-delta {
  display: inline-block;
  min-width: 4.2em;
  margin-left: var(--space-2);
  font-size: var(--fs-2);
  font-weight: 700;
  text-align: left;
}

.db-delta.is-up { color: var(--success-fg); }
.db-delta.is-down { color: var(--danger-fg); }

.db-axis > * {
  margin-block: 0;
}

.db-ticks {
  position: relative;
  height: 1.4em;
  font-size: var(--fs-1);
  color: var(--text-muted);
}

.db-ticks span {
  position: absolute;
  transform: translateX(-50%);
}

@media screen and (max-width: 520px) {
  .db-chart {
    grid-template-columns: minmax(0, 1fr);
  }

  .db-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: baseline;
    column-gap: var(--space-3);
  }

  .db-row .db-label { grid-column: 1; grid-row: 1; }
  .db-row .db-values { grid-column: 2; grid-row: 1; }

  .db-row .db-track,
  .db-row .db-ticks {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .db-row .visually-hidden {
    grid-column: 1;
  }

  .db-axis > span:first-child,
  .db-axis > span:last-child {
    display: none;
  }
}

.frontier-panel-note {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-1);
  line-height: var(--lh-ui);
  color: var(--text-muted);
}

#frontier .section-card > .section-lead {
  margin-top: 0;
}

/* ---------- hero marquee: rollouts drifting right to left, annotated on hover ---------- */
/* The stage is the grid plus a landing slot below it. The title card is sticky across the whole stage:
   it rides along while the grid scrolls past and settles in the slot, above the authors. */
.marquee {
  /* five rows fill the window height exactly, so the top and bottom margins match */
  --tile-h: max(90px, calc((100svh - 6 * var(--space-2)) / 5));
  --tile-w: calc(var(--tile-h) * 16 / 9);
  --lift: 1.35; /* hover zoom; marquee.js reads it to cut the matching hole in the title card */
  --card-h: 370px;
  --grid-h: calc(5 * var(--tile-h) + 6 * var(--space-2));
  position: relative;
  display: grid;
  grid-template-rows: auto var(--card-h);
}

.marquee-viewport {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  overflow: hidden;
}

/* the last row lives below the first screen; the grid fades into the page so the way down to the authors is soft */
.marquee-viewport::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--tile-h) * 0.9);
  z-index: 1;                    /* above the rows, below a hovered clip (row z-index 2+) */
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

/* edge fades as overlays (a mask would lump all clips into one layer and keep them under the title card) */
.marquee::before,
.marquee::after {
  content: "";
  grid-area: 1 / 1;
  width: 5%;
  z-index: 3;
  pointer-events: none;
}

.marquee::before {
  justify-self: start;
  background: linear-gradient(to right, var(--bg), transparent);
}

.marquee::after {
  justify-self: end;
  background: linear-gradient(to left, var(--bg), transparent);
}

.marquee-row {
  position: relative;
  display: flex;
  width: max-content;
  animation: marquee-scroll 120s linear infinite;
}

.marquee-row:nth-child(2) { animation-duration: 150s; animation-delay: -50s; }
.marquee-row:nth-child(3) { animation-duration: 105s; animation-delay: -20s; }
.marquee-row:nth-child(4) { animation-duration: 140s; animation-delay: -80s; }
.marquee-row:nth-child(5) { animation-duration: 125s; animation-delay: -35s; }
.marquee-row:nth-child(6) { animation-duration: 135s; animation-delay: -65s; }

/* edge rows grow inward so the zoom is not clipped by the viewport */
.marquee-row:first-child .marquee-tile { transform-origin: 50% 0; }
.marquee-row:last-child .marquee-tile { transform-origin: 50% 100%; }

.marquee-row:has(.is-active),
.marquee-row:hover,
.marquee-row:focus-within {
  z-index: 2;
}

/* paused only while a clip is being inspected (set from marquee.js), never by stray focus */
.marquee.is-paused .marquee-row {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

.marquee-track {
  display: flex;
  gap: var(--space-2);
  padding-right: var(--space-2);
}

.marquee-tile {
  position: relative;
  flex: none;
  width: var(--tile-w);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-sunken);
  box-shadow: var(--shadow-1);
  transition: transform var(--motion) var(--ease-out), box-shadow var(--motion) var(--ease-out);
}

.marquee-tile.is-active,
.marquee-tile:focus-visible {
  z-index: 3;
  transform: scale(var(--lift));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.marquee-poster,
.marquee-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* outcome of the rollout, top left */
.marquee-mark {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.marquee-mark.is-success { background: #2e9e55; }
.marquee-mark.is-failure { background: #e03131; }

/* top right while a clip is inspected: open it in the demo, and a link to the original video */
.marquee-links {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion) var(--ease-out);
}

.marquee-tile.is-active .marquee-links,
.marquee-tile:focus-within .marquee-links {
  opacity: 1;
  pointer-events: auto;
}

.marquee-demo,
.marquee-src {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--motion) var(--ease-out);
}

.marquee-demo { padding: 0 8px; white-space: nowrap; }
.marquee-src { width: 22px; }

.marquee-demo:hover,
.marquee-src:hover {
  background: var(--link);
  color: #fff;
}

/* D&A's reward progress over the clip: along the bottom, lifting out of the way on hover */
.marquee-spark {
  position: absolute;
  bottom: 6%;
  left: 6%;
  width: 88%;
  height: 30%;
  overflow: visible;
  pointer-events: none;
  transition: transform var(--motion) var(--ease-out);
}

.marquee-tile.is-active .marquee-spark,
.marquee-tile:focus-visible .marquee-spark {
  transform: translateY(-165%);
}

.marquee-spark-line {
  fill: none;
  stroke: var(--c-dna);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  paint-order: stroke;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff);
}

.marquee-spark-head {
  stroke: #fff;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}

.marquee-tile.is-active .marquee-spark-head {
  opacity: 0.9;
}

.marquee-info {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-5) var(--space-2) var(--space-1);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.88) 40%);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: opacity var(--motion) var(--ease-out);
  pointer-events: none;
}

.marquee-tile.is-active .marquee-info,
.marquee-tile:focus-visible .marquee-info {
  opacity: 1;
}

.marquee-info-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.marquee-label {
  font-weight: 700;
  opacity: 0.7;
}

.marquee-score {
  flex: none;
  font-size: 0.625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-dna-star);
}

.marquee-task {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.625rem;
  line-height: 1.3;
  font-weight: 700;
}

.marquee-text {
  margin: 0;
  font-size: 0.5625rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.marquee-overlay {
  grid-area: 1 / 1 / 3 / 2;
  align-self: start;
  justify-self: center;
  position: sticky;
  /* pinned exactly where it starts (centered in the first screen), so it does not move at all while the grid
     scrolls past; it only moves again once it reaches its resting place above the authors */
  top: calc((var(--grid-h) - var(--card-h)) / 2);
  margin-top: calc((var(--grid-h) - var(--card-h)) / 2);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-8) var(--space-2);
  /* no backdrop blur: it would be recomputed for every frame of the video playing behind the card */
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  text-align: center;
  /* the card catches the pointer, so clips behind it are not hovered through it */
  transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}

/* once it has landed above the authors it drops its box, so title and authors read as one block */
.marquee-overlay.is-docked {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* While a clip is hovered the title card fades, so its button moves to the bottom of the grid.
   It lingers briefly so the pointer can cross the gaps between clips on the way to it. */
/* shared look: dark pill in a flowing gradient ring with a soft pulse */
.cta-ring {
  padding: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #d81b60, #ff9800, #00a98f, #1e88e5, #d81b60);
  background-size: 300% 100%;
  box-shadow: 0 0 0 0 rgba(216, 27, 96, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: cta-flow 4s linear infinite, cta-pulse 2s ease-out infinite;
}

.cta-ring .button {
  min-height: 3rem;
  padding-inline: var(--space-6);
  border: 0;
  font-size: var(--fs-3);
  font-weight: 700;
  gap: var(--space-2);
}

.cta-ring .cta-arrow {
  transition: transform var(--motion) var(--ease-out);
}

.cta-ring:hover .cta-arrow {
  transform: translateX(4px);
}

@keyframes cta-flow {
  to { background-position: 300% 0; }
}

@keyframes cta-pulse {
  70%, 100% { box-shadow: 0 0 0 14px rgba(216, 27, 96, 0), 0 8px 24px rgba(0, 0, 0, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
  .cta-ring { animation: none; }
}

/* small looping cue: a cursor glides onto a tile, which lights up like a hovered clip */
.marquee-hint {
  grid-area: 1 / 1;
  justify-self: end;
  align-self: start;
  /* stays in the first screen even though the grid continues below it */
  margin: calc(var(--grid-h) - 52px - var(--space-5)) var(--space-5) 0 0;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--ink);
  pointer-events: none;
  transition: opacity var(--motion) var(--ease-out);
}

.marquee.has-used .marquee-hint {
  opacity: 0;
}

.marquee-hint-tile {
  position: relative;
  width: 52px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  animation: hint-tile 3s var(--ease-out) infinite;
}

.marquee-hint-tile i {
  position: absolute;
  left: 4px;
  top: 20px;
  font-size: 20px;
  color: var(--ink);
  filter: drop-shadow(0 0 1px var(--bg)) drop-shadow(0 0 1px var(--bg));
  animation: hint-cursor 3s var(--ease-out) infinite;
}

@keyframes hint-cursor {
  0%, 10%   { transform: translate(0, 0); }
  40%, 80%  { transform: translate(24px, -12px); }
  100%      { transform: translate(0, 0); }
}

@keyframes hint-tile {
  0%, 38%   { transform: none; background: var(--surface-sunken); box-shadow: none; }
  45%, 80%  { transform: scale(1.3); background: var(--c-dna-star); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); }
  90%, 100% { transform: none; background: var(--surface-sunken); box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-hint-tile, .marquee-hint-tile i { animation: none; }
  .marquee-hint-tile i { transform: translate(24px, -12px); }
}

@media (pointer: coarse) {
  .marquee-hint { display: none; }
}

.marquee-overlay .publication-title {
  max-width: 46rem;
  margin: 0;
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

@media (max-width: 768px) {
  .marquee { --card-h: 300px; }
  .marquee-overlay { padding: var(--space-4); width: calc(100% - 2 * var(--gutter)); }
  .marquee-overlay { padding: var(--space-5); }
  .marquee-overlay .publication-title { font-size: var(--fs-4); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-row { animation: none; }
  .marquee-viewport { overflow-x: auto; }
  .marquee-tile { transition: none; }
}

/* ---------- code snippet ---------- */
.code-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: var(--measure-wide, 760px);
  margin: 0 auto;
  text-align: left;
}

.code-wrap pre {
  margin: 0;
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-code, 0.875em);
  line-height: 1.55;
  overflow-x: auto;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.code-wrap pre code {
  padding: 0;
  background: transparent;
  font-size: inherit;
  color: var(--ink);
}

/* icon-only copy button living inside the code block, top right */
.code-wrap .code-copy {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 1;
  margin: 0;
  background: var(--surface);
}

.code-wrap pre {
  padding-right: var(--space-8);
}

.tok-k { color: var(--c-dna-text); font-weight: 600; }
.tok-s { color: var(--link); }
.tok-c { color: var(--text-muted); font-style: italic; }

.hero-use {
  margin-top: var(--space-7);
}

.hero-use .title.is-3 {
  margin-bottom: var(--space-3);
}

.hero-use .section-lead {
  margin-bottom: var(--space-4);
}

.use-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ---------- "More results": collapsed until asked for (kept laid out so charts size correctly) ---------- */
#more .container .button {
  gap: var(--space-2);
}

.more-body {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--motion-slow, 0.35s) var(--ease-out), visibility 0s linear var(--motion-slow, 0.35s);
}

.more-body.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}

.more-body.is-instant {
  transition: none;
}

.more-body-inner {
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .more-body { transition: none; }
}

/* method figure -> Problem / Method / Results: keep the same gap as between the boxes themselves */
#method {
  padding-bottom: 0;
}

#overview {
  padding-top: var(--space-5);
}

/* the bench subtitle is one line on wide screens */
@media screen and (min-width: 1025px) {
  #bench .section-lead,
  #method .section-lead,
  #feedback .section-lead {
    max-width: none;
    white-space: nowrap;
  }
}

/* ---------- "Better VLM, Better Reward Model": one bar per model ---------- */
.ladder {
  --c: var(--c-dna);
  padding: var(--space-5);
}

.ladder-fams {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.ladder-fam {
  padding: var(--space-1) var(--space-4);
  border: 1.5px solid var(--c);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--c);
  font: inherit;
  font-size: var(--fs-1);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.ladder-fam.is-on {
  background: var(--c);
  color: #fff;
}

/* rows share one grid: model name | bar | score */
.ladder-chart {
  --name-w: 190px;
  --val-w: 60px;
  position: relative;
  padding-right: 34px;          /* room for the price arrow */
  min-height: 352px;           /* room for the longest family, so switching tabs does not move the page */
}

.ladder-headrow,
.ladder-row {
  display: grid;
  grid-template-columns: var(--name-w) minmax(0, 1fr) var(--val-w);
  align-items: center;
  column-gap: var(--space-3);
}

.ladder-headrow {
  height: 30px;
  font-size: var(--fs-1);
  color: var(--text-muted);
}

.ladder-headtrack {
  position: relative;
  height: 100%;
}

/* the label is centred on the dashed line */
.ladder-ref-label {
  position: absolute;
  left: calc(var(--ref) / 0.8 * 100%);
  transform: translateX(-50%);
  bottom: 4px;
  white-space: nowrap;
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--ink);
}

.ladder-rowswrap {
  position: relative;
}

/* arrow down on the right: output token price goes up the list */
.ladder-price {
  position: absolute;
  right: -30px;
  top: 6px;
  bottom: 6px;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.ladder-price::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 6px;
  border-left: 2px solid var(--border-strong);
  transform: translateX(-50%);
}

.ladder-price::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top: 8px solid var(--border-strong);
  border-bottom: 0;
}

.ladder-price-label {
  position: relative;
  z-index: 1;
  padding: var(--space-2) 0;
  background: var(--surface);
  writing-mode: vertical-rl;
  font-size: var(--fs-1);
  white-space: nowrap;
}

.ladder-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ladder-row {
  height: 32px;
}

.ladder-name {
  text-align: right;
  font-size: var(--fs-1);
  color: var(--text);
  white-space: nowrap;
}

.ladder-bar {
  position: relative;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}

/* the dashed line for the best model trained on robot data, drawn through every row */
.ladder-bar::after {
  content: "";
  position: absolute;
  top: -9px;
  bottom: -9px;
  left: calc(var(--ref) / 0.8 * 100%);
  border-left: 2px dashed var(--border-strong);
}

.ladder-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--c);
  opacity: 0.55;
  transition: width 650ms var(--ease-out), opacity var(--motion) var(--ease-out);
}

.ladder-val {
  font-size: var(--fs-1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* bars that reach the line stand out */
.ladder-row.is-above .ladder-fill { opacity: 1; }
.ladder-row.is-above .ladder-val { color: var(--c); }
.ladder-row.is-above .ladder-val::after { content: "\00a0\2713"; }

.ladder-note {
  margin: var(--space-4) 0 0;
  text-align: center;
}

.ladder-links {
  margin-top: var(--space-2);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .ladder { padding: var(--space-4) var(--space-3); }
  .ladder-chart { --name-w: 112px; --val-w: 52px; padding-right: 28px; }
  .ladder-price { right: -26px; }
  .ladder-name { font-size: 0.75rem; white-space: normal; line-height: 1.15; }
  .ladder-ref-label { font-size: 0.875rem; }
  .ladder-headname { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .ladder-fill { transition: none; }
}

/* ---------- static grid: the same clips at rest, with a dice to reshuffle ---------- */
.hero-grid {
  --lift: 2.7;                 /* hover zoom (about 480px wide); the caption, badge and links are counter-scaled so they stay readable */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  text-align: left;
}

.hero-grid-lead {
  margin: var(--space-2) auto var(--space-4);
}

.hero-grid-note {
  margin: var(--space-4) 0 0;
  padding: 0 var(--space-7);   /* keeps the text clear of the dice in the corner */
  text-align: center;
  text-wrap: balance;          /* even lines, no single word left on its own */
}

.hero-grid .marquee-tile {
  width: 100%;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  box-shadow: 0 0 0 1px var(--border);
}

/* edge tiles zoom inward so the enlarged clip never leaves the page */
.hero-grid .marquee-tile:nth-child(-n+5) { --oy: 0%; }
.hero-grid .marquee-tile:nth-last-child(-n+5) { --oy: 100%; }
.hero-grid .marquee-tile:nth-child(5n+1) { --ox: 0%; }
.hero-grid .marquee-tile:nth-child(5n) { --ox: 100%; }

/* badge: small at rest, about 2x its resting size when zoomed */
.hero-grid .marquee-mark {
  top: 4px;
  left: 4px;
  padding: 1px 4px;
  font-size: 6.5px;
  transform-origin: 0 0;
  transition: transform var(--motion) var(--ease-out), top var(--motion) var(--ease-out), left var(--motion) var(--ease-out);
}

.hero-grid .marquee-tile.is-active .marquee-mark {
  top: calc(8px / var(--lift));
  left: calc(8px / var(--lift));
  transform: scale(calc(2.2 / var(--lift)));
}

/* the caption and links are laid out at zoomed size and scaled back down, so they read at normal size */
.hero-grid .marquee-info {
  width: calc(100% * var(--lift));
  padding: 56px 14px 10px;
  gap: 4px;
  transform: scale(calc(1 / var(--lift)));
  transform-origin: 0 100%;
}

.hero-grid .marquee-task { font-size: 12px; }
.hero-grid .marquee-score { font-size: 12px; }
.hero-grid .marquee-text {
  font-size: 11px;
  -webkit-line-clamp: 6;
}

.hero-grid .marquee-links {
  top: calc(8px / var(--lift));
  right: calc(8px / var(--lift));
  gap: 5px;
  transform: scale(calc(1 / var(--lift)));
  transform-origin: 100% 0;
}

.hero-grid .marquee-demo,
.hero-grid .marquee-src {
  height: 24px;
  font-size: 11px;
  white-space: nowrap;
}

/* the progress line is part of the zoomed picture; keep it from getting fat */
.hero-grid .marquee-tile.is-active .marquee-spark-line { stroke-width: calc(3px / var(--lift)); }
.hero-grid .marquee-tile.is-active .marquee-spark-head { stroke-width: calc(1.2px / var(--lift)); }

.hero-grid .marquee-demo { padding: 0 10px; }
.hero-grid .marquee-src { width: 24px; }

/* every clip can be scrubbed by pressing and sliding (see marquee.js) */
.marquee-tile {
  touch-action: pan-y;        /* horizontal drags scrub, vertical drags still scroll */
  user-select: none;
  -webkit-user-select: none;
}

.marquee-tile.is-active { cursor: ew-resize; }
.marquee-tile.is-scrubbing { cursor: grabbing; }
.marquee-poster,
.marquee-video { -webkit-user-drag: none; user-drag: none; }

/* dice: tiles shrink out, new ones pop in, staggered */
.hero-grid .marquee-tile.is-out {
  transform: scale(0.5);
  opacity: 0;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
}

.hero-grid .marquee-tile.is-in {
  animation: tile-pop 340ms var(--ease-out) both;
}

@keyframes tile-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.hero-grid-head {
  position: relative;
  margin: var(--space-7) 0 0;
}

.hero-grid-head .hero-grid-title {
  margin: 0;
}

.hero-grid-dice {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
}

.dice-btn.is-rolling span {
  display: inline-block;
  animation: dice-roll 700ms var(--ease-out);
}

/* content that was just swapped by a dice roll pops in, like the grid's tiles */
.dice-pop {
  animation: dice-pop 340ms var(--ease-out) both;
}

@keyframes dice-pop {
  from { transform: scale(0.96); opacity: 0.35; }
  to { transform: none; opacity: 1; }
}

@keyframes dice-roll {
  to { transform: rotate(540deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dice-btn.is-rolling span, .dice-pop { animation: none; }
  .hero-grid .marquee-tile.is-in { animation: none; }
}

@media (max-width: 768px) {
  .hero-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); --lift: 2.2; }
  .hero-grid .marquee-tile:nth-child(n) { --ox: 50%; --oy: 50%; }
  .hero-grid .marquee-tile:nth-child(-n+4) { --oy: 0%; }
  .hero-grid .marquee-tile:nth-last-child(-n+4) { --oy: 100%; }
  .hero-grid .marquee-tile:nth-child(4n+1) { --ox: 0%; }
  .hero-grid .marquee-tile:nth-child(4n) { --ox: 100%; }
}

/* the code block fills its card */
.hero-code-card .code-wrap {
  max-width: none;
}

/* the frontier section's lead is one line on wide screens */
@media screen and (min-width: 1025px) {
  #frontier .section-card > .section-lead {
    max-width: none;
    white-space: nowrap;
    font-size: var(--fs-2);       /* the full sentence is wider than the card at the larger lead size */
  }
}

.hero-code-link {
  margin: var(--space-3) 0 0;
  text-align: center;
}

/* ---------- collapsible "Online RL Training": hidden by default so the results stay in focus ---------- */
.rl-collapse {
  margin-top: var(--space-5);
  text-align: center;
}

/* the content wrapper of <details> resets box-sizing, which the columns inside would inherit: set it explicitly */
.rl-collapse .columns,
.rl-collapse .column {
  box-sizing: border-box;
}

.rl-collapse > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-md);
}

.rl-collapse > summary::-webkit-details-marker {
  display: none;
}

/* a small note, not a heading: same type as the other captions */
.rl-collapse-title {
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--text-muted);
}

.rl-collapse[open] > summary {
  margin-bottom: var(--space-4);
}

/* the opened training runs get their own space below the note */
.rl-collapse[open] .embodiment-instruction {
  margin-top: 0;
}

.rl-collapse-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--link);
}

.rl-collapse-hint::before {
  content: "show training runs";
}

.rl-collapse[open] .rl-collapse-hint::before {
  content: "hide training runs";
}

.rl-collapse-hint::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--motion) var(--ease-out);
}

.rl-collapse[open] .rl-collapse-hint::after {
  transform: rotate(-135deg) translateY(-2px);
}

.rl-collapse > summary:hover .rl-collapse-hint {
  text-decoration: underline;
}

/* ---------- method widget (experimental): the Describe & Assess pipeline, stepped through ---------- */
.method-widget {
  --c-input: #1e88e5;
  --c-describe: #f57c00;
  --c-assess: #8e63b8;
  --c-output: var(--c-dna);
  --c-score: #f4b400;
  --step-c: var(--c-input);
  padding: var(--space-5);
}

.method-widget[data-step="describe"] { --step-c: var(--c-describe); }
.method-widget[data-step="assess"] { --step-c: var(--c-assess); }
.method-widget[data-step="output"] { --step-c: var(--c-output); }

/* example toggle */
.mw-outcome {
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.mw-outcome button {
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-1);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.mw-outcome button.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* the pipeline: four steps, joined by arrows */
.mw-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}

.mw-steps li {
  position: relative;
}

.mw-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--space-4) + 3px);
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--border-strong);
  border-right: 2px solid var(--border-strong);
  transform: translateY(-50%) rotate(45deg);
}

.mw-step {
  --c: var(--c-input);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  height: 100%;
  padding: var(--space-3);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion) var(--ease-out), background-color var(--motion) var(--ease-out), transform var(--motion) var(--ease-out);
}

.mw-step.is-input { --c: var(--c-input); }
.mw-step.is-describe { --c: var(--c-describe); }
.mw-step.is-assess { --c: var(--c-assess); }
.mw-step.is-output { --c: var(--c-output); }

.mw-step.is-done {
  border-color: color-mix(in srgb, var(--c) 45%, var(--border));
}

.mw-step.is-active {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 9%, var(--surface));
  transform: translateY(-2px);
}

.mw-step-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text);
  font-size: var(--fs-1);
  font-weight: 700;
  transition: background-color var(--motion) var(--ease-out), color var(--motion) var(--ease-out);
}

.mw-step.is-done .mw-step-n,
.mw-step.is-active .mw-step-n {
  background: var(--c);
  color: #fff;
}

.mw-step-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mw-step-title {
  font-family: var(--font-display);
  font-size: var(--fs-3);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}

.mw-step-math {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--c);
}

.mw-step-sub {
  margin-top: 2px;
  font-size: var(--fs-1);
  color: var(--text-muted);
}

/* stage: the video on the left, what the current step produces on the right */
.mw-stage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-5);
  align-items: start;
}

.mw-video-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}

.mw-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mw-kf {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: var(--fs-1);
  font-weight: 600;
}

.mw-slider {
  width: 100%;
  margin: var(--space-3) 0 0;
  accent-color: var(--step-c);
}

.mw-task {
  margin: var(--space-2) 0 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  text-align: left;
}

.mw-task-label,
.mw-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--step-c);
}

.mw-meta { margin-top: var(--space-2); }
.mw-meta .mw-task { margin: 0; }
.mw-links { position: absolute; top: var(--space-2); right: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1); }
.mw-src, .mw-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.62);
  background-image: none;
  color: #fff;
  font-size: var(--fs-1);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.mw-src { width: 26px; padding: 0; }
.mw-src:hover, .mw-demo:hover { background: rgba(0, 0, 0, 0.85); color: #fff; }
.mw-focus {
  margin: var(--space-4) 0 0;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--c-score, #d81b60);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--c-score, #d81b60) 8%, var(--surface));
  font-size: var(--caption-size, 0.9375rem);
  line-height: 1.4;
  color: var(--text);
}
.mw-focus-tag { font-weight: 700; text-transform: uppercase; font-size: var(--fs-1); letter-spacing: 0.04em; margin-right: var(--space-1); color: var(--ink); }

.mw-task-label { display: inline; margin-right: var(--space-1); color: var(--c-input); }
.mw-label i { text-transform: none; letter-spacing: 0; font-family: var(--font-mono); }

.mw-panel {
  min-height: 300px;   /* the descriptions vary in length (capped); keep the page from jumping while the tour runs */
  text-align: left;
}

.mw-panel > :first-child { margin-top: 0; }
.mw-panel.mw-in { animation: mw-in 320ms var(--ease-out); }

@keyframes mw-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.mw-blurb {
  margin: 0 0 var(--space-4);
  min-height: 3em;   /* the Assess line wraps to two lines: keep the layout from shifting between steps */
  text-align: left;
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--ink);
}

.mw-card {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--step-c);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--step-c) 7%, var(--surface));
}

.mw-card .mw-text {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-2);
  line-height: 1.5;
  color: var(--text);
}

.mw-card .mw-text + .mw-text { margin-top: var(--space-2); }

/* a few descriptions run to a whole paragraph of scene detail: cap the card, the critical parts come first */
.mw-card.is-describe { display: flex; flex-direction: column; height: var(--mw-vh, auto); min-height: 0; box-sizing: border-box; }
.mw-card.is-describe .mw-text { flex: 1 1 0; min-height: 0; overflow-y: auto; }

.mw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.mw-chip {
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-size: var(--fs-1);
  color: var(--text);
}

.mw-blind {
  margin-left: auto;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.mw-blind::before { content: "\1F512\00a0"; }

/* assess: the score of the current key frame */
.mw-score {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.mw-score .mw-label { flex: none; }

.mw-bar {
  flex: 1;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}

.mw-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--c-score);
  transition: width 260ms var(--ease-out);
}

.mw-score-num {
  min-width: 3.4ch;
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--fs-3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* output: the curve and the feedback, kept compact so the widget does not grow on this step */
.mw-out .mw-card {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
}

.mw-out .mw-card .mw-text {
  margin-top: var(--space-1);
  font-size: var(--caption-size, 0.9375rem);
  line-height: 1.4;
}

.mw-out .mw-card .mw-text + .mw-text { margin-top: var(--space-1); }

.mw-out .mw-card.is-score { --step-c: var(--c-score); }
.mw-out .mw-card.is-feedback { --step-c: var(--c-output); }
.mw-out .mw-card.is-feedback.is-ok { --step-c: var(--success-fg); }

.mw-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--space-1);
}

.mw-axis { stroke: var(--border-strong); stroke-width: 1; }
.mw-axis.is-dash { stroke-dasharray: 3 3; }
.mw-tick { font-size: 11px; fill: var(--text-muted); }
.mw-line { fill: none; stroke: var(--c-score); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mw-line.is-faint { stroke-width: 2; opacity: 0.28; }
.mw-play { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.mw-dot { fill: var(--c-score); stroke: var(--surface); stroke-width: 2; }

.method-static {
  margin-top: var(--space-4);
  text-align: center;
}

.method-static summary {
  cursor: pointer;
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--link);
}

.method-static figure { margin-top: var(--space-3); }

@media (max-width: 860px) {
  .mw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-3); }
  .mw-steps li:nth-child(2)::after { display: none; }
  .mw-stage { grid-template-columns: minmax(0, 1fr); }
  .mw-panel { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mw-panel.mw-in { animation: none; }
  .mw-bar-fill, .mw-step { transition: none; }
}

/* the walk-through sits under the paper figure and is collapsed by default */
.method-collapse {
  margin-top: var(--space-4);
}

.method-collapse > summary {
  display: flex;
  justify-content: center;
  list-style: none;
  cursor: pointer;
}

.method-collapse > summary::-webkit-details-marker {
  display: none;
}

.method-collapse-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--link);
}

.method-collapse-hint::before { content: "Step through an example"; }
.method-collapse[open] .method-collapse-hint::before { content: "Hide the walk-through"; }

.method-collapse-hint::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--motion) var(--ease-out);
}

.method-collapse[open] .method-collapse-hint::after { transform: rotate(-135deg) translateY(-2px); }
.method-collapse > summary:hover .method-collapse-hint { text-decoration: underline; }

.method-collapse[open] > summary { margin-bottom: var(--space-2); }

/* <details> resets box-sizing for what is inside; the widget grid needs border-box */
.method-collapse .method-widget,
.method-collapse .method-widget * { box-sizing: border-box; }

/* the little ball under the footer links to a video */
.footer p.footer-egg {
  margin-top: var(--space-3);
  font-size: 1.5rem;
  line-height: 1;
}

.footer .footer-egg a {
  display: inline-block;
  border-bottom: 0;
  background-image: none;
  text-decoration: none;
  transition: transform var(--motion) var(--ease-out);
}

.footer .footer-egg a:hover { transform: rotate(25deg) scale(1.2); border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .footer .footer-egg a { transition: none; }
}