/* ============================================================================
   BridgeVLA++ project page
   Self-contained stylesheet, no external dependencies (fonts are self-hosted).

   Design language: "journal masthead" — warm paper surface, ink typography,
   one accent. The accent orange is the paper's own visual semantic: in
   Figure 1 and the radar chart, orange marks "ours", so the page uses the
   same hue for our rows, our bars and points of emphasis.

     type    Newsreader (display serif) · Geist (UI/body) · Geist Mono (data)
     shape   interactive controls are pills (999px); containers 14px; inner
             media 10px — no other radii
     depth   hairline borders carry structure; shadows only on floating
             layers (dropdown menu, video-stage chrome)
     theme   light only, deliberately: a print-emulating journal page whose
             figures and tables are white-background images
   ========================================================================== */

/* ------------------------------------------------------------------- fonts */

@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-italic-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geistmono-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ tokens */

:root {
  color-scheme: light;

  --paper: #FAF9F7;          /* page                                        */
  --surface: #FFFFFF;        /* cards, tables                               */
  --surface-2: #F5F3EF;      /* wells, quiet fills                          */
  --well: #EFECE6;           /* media slots before load                     */
  --line: #E9E6E0;           /* hairline                                    */
  --line-strong: #D9D5CD;

  --ink: #1E1C19;            /* headings, emphasis          16.2:1 on paper */
  --ink-body: #37342F;       /* running text                11.8:1          */
  --ink-soft: #57524A;       /* secondary text               7.4:1          */
  --ink-faint: #736D63;      /* captions, fine print         4.9:1 (AA)     */

  --accent-ink: #A94E06;     /* accent as text               5.3:1 (AA)     */
  --accent: #D2620E;         /* accent as mark / large type  3.6:1 (3:1 ok) */
  --accent-bright: #ED7D31;  /* the figures' "ours" orange — on dark only   */
  --accent-wash: #FBEFE3;    /* solid tint for washes                       */
  --row-ours: #FBF1E7;       /* "ours" table row                            */
  --row-ours-edge: #F7EADB;  /* its pinned first column                     */

  --neg-ink: #9C2C21;        /* failure / negative deltas — semantic only   */
  --neg-wash: #FAEDEA;

  --dark: #17140F;           /* video stage + on-media chrome               */

  --radius: 14px;
  --radius-sm: 10px;

  --shadow-pop: 0 14px 36px rgba(32, 26, 18, 0.16);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --measure: 1200px;      /* single page column — every wrap shares one left edge   */
  --measure-wide: 1200px; /* alias of --measure so wide + narrow blocks stay aligned */
  --gutter: 2.6rem;       /* one horizontal gutter for all wraps (1.3rem each side)  */

  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 74px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; }

a { color: var(--accent-ink); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--accent); }
p a, li a, .figcap a, .table-note a {
  text-decoration: underline;
  text-decoration-color: rgba(169, 78, 6, .35);
  text-underline-offset: 2px;
}
p a:hover, li a:hover { text-decoration-color: currentColor; }

::selection { background: #F4D4B4; color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

code, pre { font-family: var(--font-mono); }

/* One column for the whole page. `.wrap` and `.wrap-wide` resolve identically so a
   section's banner header and its body always start on the same left edge, and every
   section shares that edge with every other. */
.wrap { width: min(100% - var(--gutter), var(--measure)); margin-inline: auto; }
.wrap-wide { width: min(100% - var(--gutter), var(--measure-wide)); margin-inline: auto; }

.section { padding: 3.8rem 0 4.8rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- headings */

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
h4 { font-family: var(--font-sans); font-weight: 600; color: var(--ink); line-height: 1.35; }

.lede { font-size: 1.06rem; line-height: 1.72; color: var(--ink-body); }
.lede b { color: var(--ink); }

/* ------------------------------------------------------------------- hero */

.hero { background: var(--paper); }

.hero-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0 .4rem;
}
.hero-topbar .brandline {
  font-family: var(--font-sans); font-weight: 600; font-size: .95rem;
  color: var(--ink);
}

.more-research { position: relative; }
.more-research > button {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font: inherit; font-size: .86rem; font-weight: 500;
  padding: .4rem 1rem; border-radius: 999px; cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.more-research > button::after {
  content: '';
  width: .5em; height: .5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s var(--ease);
}
.more-research > button:hover { border-color: var(--ink); color: var(--ink); }
.more-research.is-open > button::after { transform: rotate(225deg) translateY(-1px); }
.more-research .menu {
  position: absolute; right: 0; top: calc(100% + .55rem);
  min-width: 240px; padding: .4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 60; text-align: left;
}
/* Visibility is driven solely by .is-open, which the script sets on hover,
   focus and click alike — a CSS :hover rule alongside a JS toggle lets the
   menu be visible while aria-expanded still reads "false". */
.more-research.is-open .menu { opacity: 1; visibility: visible; transform: translateY(0); }
.more-research .menu a {
  display: block; padding: .55rem .8rem; border-radius: 8px;
  color: var(--ink-body); font-size: .9rem; font-weight: 500;
}
.more-research .menu a:hover { background: var(--surface-2); color: var(--ink); }
.more-research .menu a span { color: var(--ink-faint); }

.hero-inner { padding: 2.6rem 0 3.9rem; text-align: center; }

/* The mark is a wide line-art vignette (image stack → bridge → robot arm),
   sized as a journal-masthead emblem: large enough that the story reads. */
/* Icon sits to the left of the wordmark, forming a masthead lockup. */
.hero-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.6rem, 2vw, 1.4rem);
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.hero-logo {
  width: clamp(128px, 16vw, 196px);
  height: auto;
  margin: 0;
  flex: 0 0 auto;
  /* Nudge up slightly so the mark's optical centre lines up with the wordmark. */
  transform: translateY(-0.45rem);
}

.hero-venue {
  display: block;
  font-size: .95rem;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
.hero-venue a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(210, 98, 14, .5);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.hero-venue a:hover { color: var(--accent-ink); }

.hero-title {
  font-weight: 500;
  font-size: clamp(3rem, 7vw, 4.7rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.hero-title .pp { color: var(--accent); letter-spacing: -0.05em; margin-left: -0.04em; }

.hero-subtitle {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.22rem, 2.6vw, 1.6rem);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 900px;
  text-wrap: balance;
}

.authors {
  font-family: var(--font-serif);
  font-size: 1.17rem;
  line-height: 2.05;
  max-width: 1000px;
  margin: 2.3rem auto .4rem;
  color: var(--ink);
}
.authors a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.authors a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
.authors .author { margin: 0 .5rem; white-space: nowrap; }
.authors sup { color: var(--ink-faint); font-size: .68em; }
.author-notes, .affiliations {
  font-size: .93rem;
  color: var(--ink-soft);
  max-width: 940px;
  margin: .4rem auto 0;
  line-height: 1.85;
}
.author-notes sup, .affiliations sup { color: var(--ink-faint); }
.affiliations span { margin: 0 .55rem; white-space: nowrap; }
/* Affiliation strings are longer than a phone viewport — let them wrap there.
   Author names stay atomic: the row breaks between names, never inside one. */
@media (max-width: 640px) {
  .affiliations span { white-space: normal; }
}

.links {
  display: flex; flex-wrap: wrap; gap: .6rem;
  justify-content: center;
  margin-top: 2.2rem;
}
.link-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .58rem 1.2rem;
  border-radius: 999px;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper) !important;
  font-size: .93rem; font-weight: 500;
  transition: transform .18s var(--ease), background .18s var(--ease),
              box-shadow .18s var(--ease);
}
.link-btn:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(30, 26, 18, .16);
}
.link-btn:active { transform: translateY(0) scale(.98); }
.link-btn svg { width: 1.05em; height: 1.05em; fill: currentColor; }
.link-btn.is-muted {
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--ink-faint) !important;
  cursor: default;
}
.link-btn.is-muted:hover { transform: none; background: transparent; box-shadow: none; }

/* -------------------------------------------------------------- sticky nav */

.docnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 249, 247, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.docnav .wrap-wide {
  display: flex; align-items: center; gap: .3rem;
  overflow-x: auto; scrollbar-width: none;
  padding: .5rem 0;
}
.docnav .wrap-wide::-webkit-scrollbar { display: none; }
.docnav .nav-brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: .98rem;
  color: var(--ink);
  margin-right: auto;
  padding: .3rem .2rem;
  white-space: nowrap;
}
.docnav .nav-brand .pp { color: var(--accent); }
.docnav a:not(.nav-brand) {
  flex: 0 0 auto;
  padding: .36rem .85rem;
  border-radius: 999px;
  font-size: .85rem; font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.docnav a:not(.nav-brand):hover { background: var(--surface-2); color: var(--ink); }
.docnav a.is-active { background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------- section header */

/* A hairline plus generous top space makes each major section start
   unmistakable — explicit "separation" without clutter. */
.banner { padding: 5.2rem 0 0; border-top: 1px solid var(--line); }
.banner .wrap::before {
  content: '';
  display: block;
  width: 46px; height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: 1.15rem;
}
.banner h2 {
  font-size: clamp(2rem, 4.4vw, 2.8rem);
  margin: 0;
}
.banner p {
  margin: .6rem 0 0;
  max-width: 72ch;
  color: var(--ink-soft);
  font-size: 1.03rem;
}

.subhead {
  font-size: clamp(1.35rem, 2.6vw, 1.65rem);
  margin: 3.4rem 0 .9rem;
}

/* Small monospace-caps kicker above a subhead (e.g. "Part I · Base model"). */
.eyebrow {
  margin: 0 0 .15rem;
  font-family: var(--font-sans);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent-ink);
}
.eyebrow + .subhead { margin-top: .2rem; }
.subhead-sm {
  font-family: var(--font-sans);
  font-size: 1.04rem;
  font-weight: 600;
  margin: 2.3rem 0 .55rem;
  color: var(--ink);
}

/* ---------------------------------------------------------------- passages */

.tldr {
  border-left: 3px solid var(--accent);
  padding: .3rem 0 .35rem 1.6rem;
}
.tldr h2 {
  margin: 0 0 .55rem;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.tldr p { margin: 0; font-size: 1.13rem; line-height: 1.76; color: var(--ink-body); }
.tldr b { color: var(--ink); }

.abstract { hyphens: auto; }
.abstract p { margin: 0 0 1rem; }

/* --------------------------------------------------------------- stat grid */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.7rem 2.2rem;
}
@media (min-width: 900px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* A four-card group reads better as 2 × 2 than as a row of three plus an orphan. */
@media (min-width: 900px) { .stats.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .stats { grid-template-columns: 1fr; gap: 1.4rem; } }
.stat {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.05rem;
}
.stat .value {
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stat .label { font-weight: 600; font-size: .95rem; color: var(--ink); margin-top: .35rem; }
.stat .note { font-size: .84rem; color: var(--ink-soft); line-height: 1.55; margin-top: .3rem; }

/* ----------------------------------------------------------------- figures */

.figure {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem;
}
.figure img { display: block; width: 100%; height: auto; border-radius: 8px; }
.figcap {
  margin: .95rem .3rem .15rem;
  font-size: .875rem;
  color: var(--ink-soft);
  text-align: left;
  line-height: 1.62;
}
.figcap b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ tables */

.table-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.05rem 1.1rem .95rem;
  overflow: hidden;
}
.table-scroll { position: relative; width: 100%; overflow-x: auto; }
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 8px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }

/* Right-edge fade, shown only while the table actually overflows.
   `.can-scroll` is toggled by the script on load and on resize. */
.table-card.can-scroll::after {
  content: '';
  position: absolute;
  top: 1.05rem; right: 1.1rem; width: 46px;
  height: var(--scroll-h, 0px);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95));
}
.scroll-hint {
  display: none;
  margin: .55rem .15rem -.1rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-faint);
}
.table-card.can-scroll .scroll-hint { display: block; }

/* Booktabs, the journal way: heavy top and bottom rules, a medium rule under
   the header, hairlines between body rows, no vertical grid. */
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .855rem;
  font-variant-numeric: tabular-nums;
}
table.data th, table.data td {
  padding: .5rem .6rem;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid rgba(30, 28, 25, .08);
  white-space: nowrap;
}
table.data thead th {
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border-bottom: 1px solid var(--line-strong);
}
table.data thead tr:first-child th { border-top: 2px solid var(--ink); }
table.data thead tr:last-child th,
table.data thead tr:first-child th[rowspan] { border-bottom: 1.5px solid var(--ink); }
table.data tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
.col-sep { border-left: 1px solid var(--line-strong); }

/* Pin the row-label column. Scoped to the FIRST header row and to the body.
   Most tables now use a single-row header, but a few keep a two-row grouped
   header (M(1)/M(n) tasks, Memory-dependent/-free, …); there the second row's
   first cell is an ordinary data column and must not be pinned to left: 0. */
table.data thead tr:first-child th:first-child,
table.data tbody td:first-child {
  text-align: left;
  position: sticky; left: 0;
  background: var(--surface);
  z-index: 1;
  box-shadow: 1px 0 0 var(--line);
}
table.data thead tr:first-child th:first-child { z-index: 3; }
table.data tbody tr:hover td { background: #F7F5F0; }
table.data tbody tr:hover td:first-child { background: #F7F5F0; }

table.data .ours td { background: var(--row-ours); font-weight: 600; color: var(--ink); }
table.data .ours td:first-child {
  background: var(--row-ours-edge);
  box-shadow: inset 3px 0 0 var(--accent), 1px 0 0 var(--line);
}
table.data .ours:hover td { background: #F8ECDC; }
table.data .ours:hover td:first-child { background: #F5E6D2; }
table.data .ablation td { background: var(--paper); color: var(--ink-faint); }
table.data .ablation td:first-child { background: var(--paper); padding-left: 1.6rem; }
/* Selector kept deliberately specific: the pinned-first-column rule above is
   (0,2,3), so a plainer `.group-head td` would lose its background to it. */
table.data tbody tr.group-head td {
  background: var(--surface-2);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); text-align: left;
}
table.data .best { color: var(--accent-ink); font-weight: 700; }
table.data .avg { font-weight: 600; color: var(--ink); background: rgba(30, 28, 25, .04); }
table.data .cite { display: inline-block; margin-left: .2rem; color: var(--ink-faint); font-size: .86em; font-weight: 400; }
table.data .yes { color: var(--accent-ink); font-weight: 700; }
table.data .no { color: var(--ink-faint); font-weight: 600; }
table.data .std { color: var(--ink-faint); font-size: .84em; font-weight: 400; }

.table-note { margin: .85rem .15rem 0; font-size: .84rem; color: var(--ink-soft); line-height: 1.6; }
.table-note b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------- media cards */

/* Explicit column counts rather than auto-fit: auto-fit leaves ragged final
   rows (nine cards became 4+4+1) and the card counts here are known. */
.media-grid { display: grid; gap: 1rem; align-items: start; }
.media-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .media-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .media-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  {
  .media-grid.cols-2,
  .media-grid.cols-3,
  .media-grid.cols-4 { grid-template-columns: 1fr; }
}
/* Wide data tables get their own full-width row — side by side they clip
   columns that carry the headline numbers. */
.stack { display: grid; gap: 1.25rem; }

.media-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .55rem .55rem .1rem;
}

.media-slot {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--well);
}
/* RMBench renders 320x240 — cropping it to 16:9 would cut the memory cue cards
   pinned above the table, so those cards get a stage that matches the source. */
.media-slot.ratio-43 { aspect-ratio: 4 / 3; }
.media-slot video, .media-slot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.media-slot.is-contain video, .media-slot.is-contain img { object-fit: contain; background: #fff; }
.media-slot.is-missing video, .media-slot.is-missing img { display: none; }

.media-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .45rem; padding: 1rem; text-align: center;
  background: var(--surface-2);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}
.media-placeholder .ph-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--paper); font-size: .85rem; padding-left: 2px;
}
.media-placeholder .ph-title { font-weight: 600; font-size: .88rem; color: var(--ink); }
.media-placeholder .ph-path {
  font-size: .68rem; color: var(--ink-faint);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px; padding: .14rem .45rem;
  max-width: 100%; overflow-wrap: anywhere;
}

.media-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .7rem;
  margin: .6rem .35rem .55rem;
  font-size: .86rem;
  color: var(--ink-soft);
  text-align: left;
}
.media-caption b { color: var(--ink); font-weight: 600; }
.media-score {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.sub-note { color: var(--ink-faint); font-size: .92em; font-weight: 400; }

.task-chip {
  display: inline-block;
  margin: .15rem 0 .5rem .35rem;
  padding: .13rem .55rem;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: .66rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft);
}
/* Failure-case cards must not read as another row of successes. */
.task-chip.is-fail { background: var(--neg-wash); color: var(--neg-ink); }

/* ------------------------------------------------------- speed control */
/* Explicit 1×/2×/4× playback-rate switch. The default (light) variant sits
   in the page flow, right-aligned over a video grid; the --overlay variant
   sits on a video stage, stacked above the trial/rollout buttons. */

.speed-bar {
  display: flex;
  justify-content: flex-end;
  margin: 1rem 0 .6rem;
}

.speed-control {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .26rem .3rem .26rem .8rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
.speed-control .sc-label {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.speed-control .sc-seg { display: inline-flex; gap: .2rem; }
.speed-control .sc-seg button {
  font: inherit;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  min-width: 2.2rem;
  padding: .22rem .5rem;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.speed-control .sc-seg button:hover:not([aria-pressed="true"]) {
  background: var(--surface-2);
  color: var(--ink);
}
.speed-control .sc-seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* Column pinned to a stage's top-right corner: speed pill on top, then the
   Trial/Rollout switch (which used to pin itself there). */
.stage-controls {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
}
.speed-control--overlay {
  gap: .42rem;
  padding: .18rem .24rem .18rem .7rem;
  background: rgba(23, 20, 15, .55);
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.speed-control--overlay .sc-label { color: rgba(250, 249, 247, .72); }
.speed-control--overlay .sc-seg button {
  font-size: .68rem;
  min-width: 1.9rem;
  padding: .16rem .42rem;
  color: #FAF9F7;
}
.speed-control--overlay .sc-seg button:hover:not([aria-pressed="true"]) {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
.speed-control--overlay .sc-seg button[aria-pressed="true"] {
  background: rgba(210, 98, 14, .92);
  color: #fff;
}

/* ------------------------------------------------------- demo explorer */
/* Pick a task, pick a setting, watch that exact rollout. One <video> whose
   src is swapped, so only the selected clip is ever fetched. */

.demo-explorer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem 1.35rem;
}

.picker-group + .picker-group { margin-top: .9rem; }
.picker-label {
  display: block;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .45rem;
}
.picker-label .dot-mem,
.picker-label .dot-free {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: .42rem; vertical-align: .05em;
}
.picker-label .dot-mem  { background: var(--accent); }
.picker-label .dot-free { background: var(--line-strong); }

.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.picker-chip {
  font: inherit;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .44rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: .875rem; font-weight: 500;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease),
              border-color .16s var(--ease), transform .16s var(--ease);
}
/* Most pickers are toggles and report state with aria-pressed; the rollout
   browser's platform switch is a tablist and reports it with aria-selected.
   Both must light up the same way. */
.picker-chip:hover:not(:disabled):not([aria-pressed="true"]):not([aria-selected="true"]) {
  border-color: var(--ink);
  color: var(--ink);
}
.picker-chip:active:not(:disabled) { transform: scale(.98); }
.picker-chip[aria-pressed="true"],
.picker-chip[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.picker-chip:disabled {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.picker-chip .chip-sub { font-weight: 400; opacity: .72; font-size: .84em; }

.setting-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.setting-tabs .picker-chip { padding: .44rem 1.1rem; }

/* The camera is mounted sideways, so the clips are rotated upright at encode
   time and end up 4:5 — hence a capped-width video column rather than the
   usual wide one, otherwise a portrait clip would run past a screenful. */
.demo-stage {
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(280px, 1fr);
  gap: 1.5rem;
  margin-top: 1.3rem;
  align-items: start;
}
/* The Franka clips are ordinary landscape recordings, unlike the rotated
   4:5 DOBOT ones — wider video column, 16:9 frame. Declared before the
   960px collapse so the single-column override still wins on small screens. */
.demo-stage--wide { grid-template-columns: minmax(0, 640px) minmax(260px, 1fr); }
@media (max-width: 960px) { .demo-stage { grid-template-columns: 1fr; } }

.demo-video {
  position: relative;
  /* width:100% matters: auto margins disable grid stretch, and a <video> in
     error state has a 300×150 intrinsic size the frame would shrink to. */
  width: 100%;
  aspect-ratio: 4 / 5;
  max-width: 540px;
  margin-inline: auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--dark);
}
.demo-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* After .demo-video so the wide variant's frame wins at equal specificity. */
.demo-video--wide { aspect-ratio: 16 / 9; max-width: 640px; }
.demo-video .demo-badge {
  position: absolute; top: .6rem; left: .6rem; z-index: 2;
  padding: .2rem .62rem; border-radius: 999px;
  background: rgba(23, 20, 15, .6);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #FAF9F7;
  font-size: .66rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.demo-video .demo-unavailable {
  position: absolute; inset: 0; z-index: 3;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
  padding: 1.2rem; text-align: center;
  background: var(--surface-2);
  color: var(--ink-soft); font-size: .9rem;
}
.demo-explorer.is-unavailable .demo-unavailable { display: flex; }
/* Long file paths in the coming-soon overlay: wrap anywhere, chip styling. */
.demo-unavailable .demo-path {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--ink-faint);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .12rem .45rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.demo-explorer.is-unavailable .demo-video video,
.demo-explorer.is-unavailable .demo-video .demo-badge { visibility: hidden; }

.demo-info { display: flex; flex-direction: column; gap: .85rem; }
.demo-instruction {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.24rem; line-height: 1.45; color: var(--ink);
  margin: 0;
}
.demo-family {
  display: inline-flex; align-items: center; gap: .4rem;
  align-self: flex-start;
  padding: .16rem .6rem; border-radius: 999px;
  background: var(--accent-wash);
  font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-ink);
}
.demo-family.is-free { background: var(--surface-2); color: var(--ink-soft); }
.demo-setting-note {
  font-size: .89rem; line-height: 1.62; color: var(--ink-soft);
  padding-left: .75rem; border-left: 2px solid var(--line-strong);
  margin: 0;
}
.demo-setting-note b { color: var(--ink); }

.score-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  padding: .85rem .95rem;
}
.score-block h5,
.setting-overview h5,
.keyframe-block h5 {
  margin: 0 0 .55rem;
  font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.score-block h5 .light,
.keyframe-block h5 .light { text-transform: none; letter-spacing: 0; font-weight: 500; }
.score-row {
  display: grid;
  grid-template-columns: minmax(0, 10rem) 1fr auto;
  align-items: center;
  gap: .55rem;
  padding: .24rem 0;
  font-size: .85rem;
}
.score-row .name { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-row.is-ours .name { color: var(--ink); font-weight: 600; }
.score-row .bar {
  height: 7px; border-radius: 999px;
  background: rgba(30, 28, 25, .07);
  overflow: hidden;
}
.score-row .bar i {
  display: block; height: 100%; border-radius: 999px;
  background: #C4BEB4;
  transition: width .4s var(--ease);
}
.score-row.is-ours .bar { background: var(--accent-wash); }
.score-row.is-ours .bar i { background: var(--accent); }
.score-row .val {
  font-family: var(--font-mono);
  font-size: .78rem; color: var(--ink-soft); min-width: 3.2rem; text-align: right;
}
.score-row.is-ours .val { color: var(--ink); font-weight: 600; }

/* Mini bar chart of the selected task across all five settings — doubles as a
   shortcut: clicking a bar switches to that setting. */
.setting-overview { margin-top: .1rem; }
.overview-bars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.overview-bars button {
  font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .35rem .1rem .3rem;
  border: 1px solid transparent; border-radius: 10px;
  background: none; cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.overview-bars button:hover:not(:disabled) { background: var(--surface-2); }
.overview-bars button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); }
.overview-bars button:disabled { opacity: .38; cursor: not-allowed; }
.overview-bars .col {
  width: 100%; height: 46px;
  display: flex; align-items: flex-end;
  background: rgba(30, 28, 25, .05);
  border-radius: 4px; overflow: hidden;
}
.overview-bars .col i {
  display: block; width: 100%;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  transition: height .4s var(--ease);
}
.overview-bars .n {
  font-family: var(--font-mono);
  font-size: .74rem; font-weight: 600; color: var(--ink);
}
.overview-bars .t {
  font-size: .58rem; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-faint); text-align: center; line-height: 1.25;
  overflow-wrap: anywhere;
}

.keyframe-block { margin-top: .2rem; }
.keyframe-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
@media (max-width: 700px) { .keyframe-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.keyframe-strip figure { margin: 0; }
.keyframe-strip img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--well);
  display: block;
}
.keyframe-strip figcaption {
  margin-top: .32rem; text-align: center;
  font-family: var(--font-mono);
  font-size: .68rem; color: var(--ink-faint);
}

/* ------------------------------------------------------- tabbed switchers */
/* Benchmark tabs (simulation) and platform tabs (real robot). Panels are
   plain wrappers toggled with the `hidden` attribute; the fadeUp animation
   restarts each time a panel is shown because its display flips. */

[hidden] { display: none !important; }

.bench-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .55rem;
  margin-top: 1.3rem;
}
@media (max-width: 1080px) { .bench-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .bench-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bench-tab, .platform-tab {
  font: inherit;
  text-align: left;
  display: flex; flex-direction: column; gap: .14rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease),
              transform .16s var(--ease);
}
.bench-tab { padding: .66rem .85rem .58rem; }
.bench-tab[aria-selected="false"]:hover,
.platform-tab[aria-selected="false"]:hover { border-color: var(--ink); }
.bench-tab:active, .platform-tab:active { transform: scale(.985); }
.bench-tab[aria-selected="true"], .platform-tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
}
.bench-tab .bt-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.bench-tab .bt-name {
  font-weight: 600; font-size: .92rem;
  color: var(--ink); white-space: nowrap;
}
.bench-tab .bt-val {
  font-family: var(--font-mono);
  font-weight: 600; font-size: .95rem;
  color: var(--accent-ink);
}
.bench-tab .bt-sub { font-size: .7rem; line-height: 1.35; color: var(--ink-faint); }
.bench-tab[aria-selected="true"] .bt-name { color: var(--paper); }
.bench-tab[aria-selected="true"] .bt-val { color: #F5A15F; }
.bench-tab[aria-selected="true"] .bt-sub { color: rgba(250, 249, 247, .66); }

.platform-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  margin-top: 1.5rem;
}
@media (max-width: 640px) { .platform-tabs { grid-template-columns: 1fr; } }
.platform-tab { padding: .85rem 1.15rem .78rem; border-radius: 12px; }
.platform-tab .pt-name { font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.platform-tab .pt-sub { font-size: .78rem; line-height: 1.4; color: var(--ink-faint); }
.platform-tab[aria-selected="true"] .pt-name { color: var(--paper); }
.platform-tab[aria-selected="true"] .pt-sub { color: rgba(250, 249, 247, .66); }

.bench-panel, .platform-panel { margin-top: 1.4rem; }
.bench-panel:not([hidden]), .platform-panel:not([hidden]) { animation: fadeUp .4s var(--ease); }
/* Panel h3s sit right under the tabs — trim the default 2.9rem gap. */
.platform-panel > .subhead:first-child { margin-top: .4rem; }

/* Two-column panel head: description + facts left, suite figure right. */
.bench-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 500px);
  gap: 1.4rem;
  align-items: start;
}
@media (max-width: 980px) { .bench-head { grid-template-columns: 1fr; } }
.bench-head .lede { margin-top: 0; }
.bench-facts { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.bench-facts li {
  padding: .55rem .1rem;
  border-top: 1px solid var(--line);
  font-size: .9rem; line-height: 1.58; color: var(--ink-soft);
}
.bench-facts li:last-child { border-bottom: 1px solid var(--line); }
.bench-facts b { color: var(--ink); }

/* The COLOSSEUM suite figure is a very tall strip — pre-split into two
   equal-height halves shown side by side (they stack on small screens). */
.bench-fig-pair .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
@media (max-width: 700px) { .bench-fig-pair .pair { grid-template-columns: 1fr; } }
.bench-fig-pair .pair img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* ------------------------------------------------------ figure tab gallery */
/* Chip-picked figures in a fixed-height viewport: uniform height regardless
   of each figure's aspect ratio (replaces the old centred-arrow carousels). */

.fig-tabs {
  margin-top: 1.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.05rem;
}
.fig-tab-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .95rem; }
.fig-tab-stage figure { margin: 0; display: none; }
.fig-tab-stage figure.is-active { display: block; animation: fadeUp .35s var(--ease); }
.fig-tab-stage img {
  display: block; width: 100%;
  height: min(60vh, 540px);
  object-fit: contain;
  border-radius: 8px;
  background: var(--surface);
}

/* --------------------------------------------------------------- key ideas */

/* Two method parts, each an eyebrow + subhead + card row; the gap between
   them carries the "Part I / Part II" separation. */
.method-part + .method-part { margin-top: 3.6rem; }

.idea-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.9rem 2.1rem; }
.idea {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.05rem;
}
.idea .num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600; font-size: .92rem;
  color: var(--accent-ink);
  margin-bottom: .5rem;
}
.idea h4 { margin: 0 0 .45rem; font-size: 1.02rem; line-height: 1.4; }
.idea p { margin: 0; font-size: .93rem; line-height: 1.66; color: var(--ink-soft); }
.idea p + p { margin-top: .6rem; }
.idea b { color: var(--ink); }

.delta {
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 500;
  padding: .06rem .42rem;
  border-radius: 6px;
  vertical-align: .1em;
  white-space: nowrap;
}
.delta-neg { color: var(--neg-ink); background: var(--neg-wash); }

.callout {
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--accent-wash);
  padding: 1rem 1.3rem;
  font-size: .95rem; line-height: 1.66; color: var(--ink-body);
}
.callout b { color: var(--ink); }

/* ------------------------------------------------------------------ bibtex */

pre.bibtex {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.35rem;
  overflow-x: auto;
  font-size: .84rem;
  line-height: 1.7;
  color: var(--ink-body);
}
.copy-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .8rem; padding: .42rem 1.05rem;
  border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-soft);
  font: inherit; font-size: .85rem; font-weight: 500;
  transition: border-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.copy-btn:hover { border-color: var(--ink); color: var(--ink); }
.copy-btn:active { transform: scale(.98); }

/* ------------------------------------------------------------------ footer */

footer.page-footer {
  margin-top: 3rem;
  padding: 2.6rem 0 3rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .9rem;
  text-align: center;
}
footer.page-footer p { margin: .35rem 0; }

/* ------------------------------------------------------------- todo marker */

.todo {
  border: 1.5px dashed rgba(180, 130, 50, .5);
  background: #FBF5E8;
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  font-size: .88rem;
  color: #7A5C1F;
}
.todo b { color: #64490F; }

/* ---------------------------------------------------------------- keyframes */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scoped to .js-reveal, which the script adds to <html> on start-up: if the
   script never runs (or throws before this point) the content simply stays
   visible instead of being stranded at opacity 0. */
.js-reveal .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .js-reveal .reveal { opacity: 1; transform: none; }
}