@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 400 600;
  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+2013-2014, U+2018-201D, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, 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-latin.woff2") format("woff2");
  font-weight: 400 500;
  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+2013-2014, U+2018-201D, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #fbfaf7;
  --ink: #1a1a1a;
  --muted: #5c5a55;
  --rule: #e2dfd8;
  --accent: #0e6b6b;
  --tint: rgba(26, 26, 26, .04);
  --dim: rgba(20, 20, 19, .52);
  --plate-filter: none;
  --fig-filter: none;
  --plate-blend: multiply;
  --show-sun: none;
  --show-moon: block;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --gutter: 16px;
  --measure: var(--bleed);
  --bleed: 72rem;
  --radius: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141413;
    --ink: #e8e6e1;
    --muted: #a5a29b;
    --rule: #2c2b29;
    --accent: #63c5bf;
    --tint: rgba(232, 230, 225, .06);
    --dim: rgba(0, 0, 0, .58);
    --plate-filter: brightness(.92);
    --fig-filter: brightness(.84) contrast(.96);
    --plate-blend: normal;
    --show-sun: block;
    --show-moon: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #141413;
  --ink: #e8e6e1;
  --muted: #a5a29b;
  --rule: #2c2b29;
  --accent: #63c5bf;
  --tint: rgba(232, 230, 225, .06);
  --dim: rgba(0, 0, 0, .58);
  --plate-filter: brightness(.92);
  --fig-filter: brightness(.84) contrast(.96);
  --plate-blend: normal;
  --show-sun: block;
  --show-moon: none;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.5;
  font-optical-sizing: auto;
  overflow-x: clip;
}
h1, h2, h3, h4 { font-weight: 500; line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); font-weight: 400; font-variation-settings: "opsz" 72; letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); font-variation-settings: "opsz" 36; }
h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); }
p, ul, ol, dl, figure, table, pre { margin: 0 0 1em; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
img, video, svg { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
small { font-size: .85em; }
sup, sub { line-height: 0; }
/* Italic correction: keeps a following comma or bracket clear of a slanted subscript such as o_f. */
sub i:last-child, sup i:last-child { padding-right: .08em; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--paper); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sym { font-weight: 600; }
.ovl { text-decoration: overline; text-decoration-thickness: .06em; }

.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.bleed { max-width: var(--bleed); margin-inline: auto; padding-inline: var(--gutter); }
.ui { font-family: var(--sans); font-size: .82rem; letter-spacing: .01em; }
.muted { color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--sans); font-size: .85rem; line-height: 1;
  padding: .55em .95em; border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: inherit; text-decoration: none; cursor: pointer;
}
.btn:hover { border-color: var(--ink); color: inherit; }
.btn[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; border-style: dashed; }
.btn[aria-disabled="true"]:hover { border-color: var(--rule); color: var(--muted); }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn svg { width: 1em; height: 1em; flex: none; }
.btn-icon { padding: .5em; border-radius: 50%; }
.btn-icon svg { width: 1.1em; height: 1.1em; }
.theme-toggle .ico-sun { display: var(--show-sun); }
.theme-toggle .ico-moon { display: var(--show-moon); }
.btn-row { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1.25rem; list-style: none; }
.btn-row .btn { padding-inline: .7em; }
.soon { font-size: .75em; color: var(--muted); }
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }

/* ---------- plates (paper figures and video) ---------- */
.plate {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  filter: var(--plate-filter);
}
.plate img { width: 100%; mix-blend-mode: var(--plate-blend); }
.plate video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
/* The video fills the plate, whose overflow:hidden clips the video's own focus ring, so draw it on the plate. */
.plate:has(> video:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
/* White-background paper figures get dimmed further than photos and video in dark mode. */
.paperfig .plate { filter: var(--fig-filter); }
figure { margin-inline: 0; }
figcaption { font-size: .9rem; color: var(--muted); margin-top: .6rem; line-height: 1.45; }
figure figcaption { max-width: 48rem; }
/* Full-width figures: let the caption span the figure so Enlarge sits under its right edge. */
figure.bleed figcaption, .walk-fig figcaption { max-width: none; }
figcaption b, figcaption strong { color: var(--ink); font-weight: 500; }
figcaption .enlarge { float: right; margin: 0 0 .25rem .75rem; font-size: .78rem; padding: .4em .8em; }
figcaption .enlarge:hover { border-color: var(--ink); }

/* ---------- masthead ---------- */
.masthead { padding-block: 1.5rem 1rem; }
.masthead-top { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.subtitle { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem); font-style: italic; font-weight: 400; color: var(--muted); margin: 0 0 1.25rem; line-height: 1.3; }
.authors { margin-bottom: .35rem; }
.authors span { white-space: nowrap; }
.authors .author-row { display: block; white-space: normal; }
.authors a { text-decoration-color: var(--rule); }
.authors a:hover { text-decoration-color: currentColor; }
.affil { font-family: var(--sans); font-size: .85rem; color: var(--muted); margin-bottom: 1.25rem; }
.affil .logo { display: inline-block; height: 1.3em; width: auto; vertical-align: middle; margin: 0 .35em 0 0; }
.affil-gap { display: inline-block; width: 1.6em; }
.affil .logo-lis { height: 1.9em; }
.affil .logo-mit { height: 1.5em; }
.affil + .affil { margin-top: -.9rem; }
.affil .logo-rss { height: 1.6em; margin: 0 .35em; }

.sitenav { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: .55rem 0; margin: 0 0 1.5rem; }
.sitenav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; font-family: var(--sans); font-size: .82rem; }
.sitenav a { text-decoration: none; color: var(--muted); }
.sitenav a:hover { color: var(--accent); }
.sitenav .num { font-variant-numeric: tabular-nums; margin-right: .3em; color: var(--muted); }
.sitenav details { display: none; }
.sitenav summary { cursor: pointer; font-family: var(--sans); font-size: .85rem; list-style: none; display: flex; justify-content: space-between; }
.sitenav summary::-webkit-details-marker { display: none; }
.sitenav summary::after { content: "+"; }
.sitenav details[open] summary::after { content: "–"; }
.sitenav details ul { flex-direction: column; gap: .5rem; padding-top: .75rem; }

.tldr { border-left: 3px solid var(--accent); padding-left: 1rem; margin: 0 0 2rem; }
.tldr p { margin: 0 0 .5em; font-size: 1.08em; }
.tldr p:last-child { margin: 0; }
.method-name { text-decoration: underline; text-underline-offset: .15em; }

/* ---------- hero and video overlays ---------- */
.hero { margin-bottom: 3rem; }
/* Icon-only, bottom left: the bottom-right corner holds the mug in the hero's UR5 Pour quadrant and in the
   UR5 Pour loop, and the machine base in the UR5 Place loop. The text labels stay in the accessible name. */
.media-ctrl { position: absolute; left: .6rem; bottom: .6rem; padding: .5em; background: rgba(20, 20, 19, .72); color: #fff; border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(4px); }
.media-ctrl:hover { border-color: #fff; color: #fff; }
.media-ctrl[data-paused="true"] { background: #fff; color: #141413; border-color: #fff; }
.media-ctrl .lbl-play, .media-ctrl .ico-play, .media-ctrl[data-paused="true"] .lbl-pause, .media-ctrl[data-paused="true"] .ico-pause { display: none; }
.media-ctrl[data-paused="true"] .lbl-play { display: inline; }
.media-ctrl[data-paused="true"] .ico-play { display: block; }
.media-ctrl .lbl-pause, .media-ctrl .lbl-play {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Labels for the four quadrants of the 2x2 grid videos. */
.quads { position: absolute; inset: 0; pointer-events: none; }
.quads .q {
  position: absolute; font-family: var(--sans); font-size: .72rem; line-height: 1.2;
  background: rgba(20, 20, 19, .72); color: #fff; padding: .25em .55em; border-radius: 4px; white-space: nowrap;
}
.quads .q1 { left: .5rem; top: .5rem; }
.quads .q2 { left: calc(50% + .5rem); top: .5rem; }
.quads .q3 { left: .5rem; top: calc(50% + .5rem); }
.quads .q4 { left: calc(50% + .5rem); top: calc(50% + .5rem); }

/* ---------- sections ---------- */
section.sec { padding: 2.5rem 0 1rem; }
.sec-head { max-width: var(--measure); margin: 0 auto 1.25rem; padding-inline: var(--gutter); }
.sec-head .num { font-family: var(--sans); font-size: .8rem; letter-spacing: .08em; color: var(--accent); display: block; margin-bottom: .4rem; }
.sec-head .footnote { margin-top: 0; }
.lede { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); line-height: 1.45; }
.abstract { padding-block: 2.5rem 1rem; }
.footnote { font-size: .92rem; color: var(--muted); margin-top: 1.25rem; }
.bleed > .footnote { max-width: 48rem; }
.method h3 { margin-top: 2rem; }
.method > p, .media-side p { margin-bottom: 1em; }
.method .ui.muted { margin-top: 1.5rem; }
.media-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 2rem; align-items: start; margin: 1.5rem 0; }
.media-side figure { margin: 0; }
.media-side-fig { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); margin-top: 0; }
figure.bleed { margin-top: 1.5rem; margin-bottom: 1.5rem; }

/* ---------- pipeline walk-through ---------- */
.step-tabs { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.step-tabs legend { font-family: var(--sans); font-size: .8rem; color: var(--muted); margin-bottom: .5rem; padding: 0; }
.step-tabs .seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.step-tabs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.step-tabs label {
  display: inline-flex; align-items: center;
  font-family: var(--sans); font-size: .85rem; line-height: 1; padding: .5em .9em;
  border: 1px solid var(--rule); border-radius: 999px; cursor: pointer;
}
.step-tabs label:hover { border-color: var(--ink); }
.step-tabs input:checked + label { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.step-tabs input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; }
.cn {
  display: inline-grid; place-items: center; flex: none;
  width: 1.45em; height: 1.45em; margin-right: .4em;
  border: 1px solid currentColor; border-radius: 50%;
  font-family: var(--sans); font-size: .72em; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums;
}
.walk-fig { margin-bottom: 0; }
.walk-view:focus-visible { outline-offset: 3px; }
.hl {
  position: absolute; pointer-events: none; border-radius: 6px;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(255, 255, 255, .85), 0 0 0 200vmax var(--dim);
  transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease;
}
.walk-steps { list-style: none; padding: 0; margin: 1rem 0 0; }
.walk-steps > li { max-width: var(--measure); margin-bottom: 1.25rem; }
.walk-steps h3 { display: flex; align-items: center; font-size: 1.15rem; margin-bottom: .35em; }
.walk-steps h3 .cn { font-size: .7em; }
.walk-steps p { margin: 0; }
.walk.is-live .walk-steps { min-height: 9rem; }
.walk.is-live .walk-steps > li { display: none; margin: 0; }
.walk.is-live .walk-steps > li.on { display: block; }
.walk-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; }
.step-count { font-family: var(--sans); font-size: .82rem; color: var(--muted); margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- math ---------- */
math { font-family: "Newsreader", "Latin Modern Math", "STIX Two Math", Cambria Math, serif; }
.math-fallback { display: none; font-family: var(--serif); font-style: italic; }
.no-mathml math { display: none; }
.no-mathml .math-fallback { display: inline; }
.equation { margin: 1rem 0 1.25rem; padding-block: .25rem; overflow-x: auto; text-align: center; font-size: 1.1em; }
.equation math { width: max-content; min-width: 100%; margin: 0; }
.equation > .math-fallback { white-space: nowrap; }

/* ---------- tasks ---------- */
.tasks .chip-row { margin-bottom: 1rem; }
.prompt { font-size: 1.15em; margin-bottom: .75rem; }
.task-name { font-family: var(--sans); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-right: .6em; vertical-align: .15em; }
.task-block + .task-block { margin-top: 2rem; }
.loops { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.loops figure { margin: 0; }
.loops figcaption { font-family: var(--sans); font-size: .82rem; }

/* ---------- results ---------- */
details.plain summary { cursor: pointer; font-family: var(--sans); font-size: .9rem; padding: .5rem 0; }
details.plain { margin-bottom: 1.5rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0 0 .75rem; }
.kpi { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem .9rem; display: flex; flex-direction: column; }
.kpi .lbl { font-family: var(--sans); font-size: .9rem; font-weight: 600; margin: 0 0 .6rem; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 .75rem; }
.kv dt { font-family: var(--sans); font-size: .78rem; color: var(--muted); margin-bottom: .2rem; }
.kv dd { margin: 0; }
.kpi .val { font-size: clamp(1.6rem, .9rem + 2.2vw, 2.75rem); line-height: 1; font-weight: 400; font-variation-settings: "opsz" 72; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi .data { font-family: var(--sans); font-size: .78rem; color: var(--muted); margin: auto 0 0; padding-top: .6rem; border-top: 1px solid var(--rule); }
/* Share the three card rows so the footer rules line up when the footers wrap to different line counts. */
@supports (grid-template-rows: subgrid) {
  .kpi { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .kpi .data { margin: 0; }
}
.kpi-ours { border-color: var(--accent); }
.kpi-ours .lbl, .kpi-ours .val { color: var(--accent); }
.kpi-line { font-family: var(--sans); font-size: .82rem; color: var(--muted); margin-bottom: 2rem; }

.results-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-bottom: 1.5rem; }
.results-table caption { text-align: left; caption-side: bottom; font-size: .9rem; color: var(--muted); padding-top: .6rem; line-height: 1.45; }
.results-table th, .results-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--rule); text-align: right; }
.results-table th[scope="row"], .results-table thead th:first-child { text-align: left; font-weight: 500; }
.results-table thead th { font-family: var(--sans); font-size: .8rem; font-weight: 500; color: var(--muted); }
.results-table thead tr:first-child th { border-bottom: 0; padding-bottom: .1rem; text-align: center; color: var(--ink); }
.results-table thead tr:first-child td { border-bottom: 0; }
.results-table th.g-start, .results-table td.g-start { border-left: 1px solid var(--rule); }
.results-table td.mean, .results-table th.mean { background: var(--tint); }
.results-table strong { font-weight: 700; }
.results-table tr.ours th[scope="row"], .results-table tr.ours td { color: var(--accent); }
.results-table td.demos, .results-table th.demos { text-align: left; font-family: var(--sans); font-size: .82rem; color: var(--muted); }
.t2 { max-width: 46rem; }

.cmp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; margin-bottom: .9rem; }
.btn-play .ico-pause, .btn-play[data-playing="true"] .ico-play { display: none; }
.btn-play[data-playing="true"] .ico-pause { display: block; }
.cmp-now { font-family: var(--sans); font-size: .82rem; color: var(--muted); margin: 0 0 .5rem; }
.cmp-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cmp-row figure { margin: 0; }
.cmp-row .who { font-family: var(--sans); font-size: .85rem; color: var(--ink); margin: 0 0 .4rem; }
.cmp-row .who-ours { color: var(--accent); font-weight: 600; }
.cmp-row .speed { font-size: .78rem; color: var(--muted); margin-left: .3em; }
.clip-table { border-collapse: collapse; font-family: var(--sans); font-size: .85rem; margin-top: 1.25rem; }
.clip-table caption { text-align: left; color: var(--muted); padding-bottom: .4rem; }
.clip-table th, .clip-table td { text-align: left; padding: .3rem .9rem .3rem 0; border-bottom: 1px solid var(--rule); font-weight: 400; }
.clip-table thead th { color: var(--muted); }

/* ---------- wider distribution ---------- */
.fig-dist { max-width: 46rem; }
.d1 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-top: 1rem; }
.d1 figure { margin: 0; }

/* ---------- gallery ---------- */
.gallery { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.tile { display: block; text-decoration: none; color: inherit; border-radius: var(--radius); }
.tile-img { position: relative; display: block; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: #000; filter: var(--plate-filter); }
.tile-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tile .play {
  position: absolute; left: 50%; top: 50%; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(20, 20, 19, .7); color: #fff; border: 1px solid rgba(255, 255, 255, .45);
}
.tile .play svg { width: 1.1rem; height: 1.1rem; margin-left: .12rem; }
.tile:hover .play, .tile:focus-visible .play { background: #fff; color: #141413; }
.tile:hover { color: var(--accent); }
.tile-lbl { display: block; font-family: var(--sans); font-size: .82rem; margin-top: .45rem; }
.tile-lbl small { color: var(--muted); margin-left: .3em; white-space: nowrap; }

/* ---------- bibtex ---------- */
.bib pre {
  font-family: var(--mono); font-size: .82rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--tint); margin: 0;
}
.bib .copy-row { display: flex; gap: .75rem; align-items: center; margin-top: .75rem; }
.bib output { font-family: var(--sans); font-size: .82rem; color: var(--muted); }

/* ---------- dialog ---------- */
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 80rem); width: fit-content; overflow: visible; }
dialog.lightbox::backdrop { background: rgba(0,0,0,.82); }
dialog.lightbox .frame { position: relative; background: var(--paper); border-radius: var(--radius); padding: .75rem; }
dialog.lightbox img { max-height: 84vh; width: auto; max-width: 100%; margin: 0 auto; filter: var(--fig-filter); mix-blend-mode: var(--plate-blend); }
dialog.lightbox video { width: min(90vw, 64rem); height: auto; max-width: calc(84vh * 16 / 9); aspect-ratio: 16 / 9; margin: 0 auto; background: #000; }
/* Wraps an enlarged video so a cloned .quads overlay can sit on it. */
dialog.lightbox .lb-media { position: relative; width: fit-content; margin: 0 auto; }
/* contain: the caption wraps to the media's width instead of widening the frame. */
dialog.lightbox .lb-cap { font-family: var(--sans); font-size: .85rem; color: var(--muted); margin: .5rem 0 0; contain: inline-size; }
dialog.lightbox .lb-cap b, dialog.lightbox .lb-cap strong { color: var(--ink); font-weight: 500; }
dialog.lightbox .close { position: absolute; top: -.5rem; right: -.5rem; background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); margin-top: 3rem; padding: 2rem 0 3rem; font-size: .92rem; color: var(--muted); }
.foot p { margin-bottom: .6em; }
.foot a { color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 63.999rem) {
  /* Long text beside a short figure leaves a tall gap under the figure; stack them. The D1 block is balanced. */
  .media-side:not(.media-side-fig) { grid-template-columns: minmax(0, 1fr); }
  .media-side:not(.media-side-fig) figcaption { max-width: none; } /* stacked, the figure is full width */
  .step-tabs label { padding-inline: .75em; }
  .soon-pre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 48rem) and (max-width: 63.999rem) {
  /* Three tiles are too small under the native control bar; Diffusion Policy moves to a second row. */
  .cmp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (hover: none) {
  .walk-nav .ui.muted { display: none; } /* the arrow-key hint */
}
@media (max-width: 47.999rem) {
  .loops, .two-col, .media-side, .media-side-fig, .cmp-row, .d1 { grid-template-columns: minmax(0, 1fr); }
  .sitenav > ul { display: none; }
  .sitenav details { display: block; }
  .kpis { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .tile-lbl small { display: block; margin: 0; }
  .tile .play { left: .4rem; top: auto; bottom: .4rem; margin: 0; width: 1.9rem; height: 1.9rem; }
  .tile .play svg { width: .9rem; height: .9rem; }
  .media-ctrl { left: .4rem; bottom: .4rem; padding: .45em; }
  .affil:not(.venue) { display: grid; gap: .4rem; }
  .affil + .affil { margin-top: -.75rem; }
  .affil .logo-rss { flex: none; height: 1.4em; margin: 0 .3em; }
  .affil-gap { display: none; }
  .affil-item { display: flex; align-items: center; }
  .affil .logo { flex: none; }
  .walk.is-live .walk-steps { min-height: 0; }
  .quads .q { font-size: .62rem; }
  .quads .q1, .quads .q3 { left: .3rem; }
  .quads .q2, .quads .q4 { left: calc(50% + .3rem); }
  .quads .q1, .quads .q2 { top: .3rem; }
  .quads .q3, .quads .q4 { top: calc(50% + .3rem); }

  .results-table, .results-table tbody, .results-table tr, .results-table th, .results-table td { display: block; text-align: left; }
  .results-table thead, .results-table colgroup { display: none; }
  .results-table caption { display: block; }
  .results-table tr { border: 1px solid var(--rule); border-radius: var(--radius); padding: .5rem .85rem; margin-bottom: .75rem; }
  .results-table tr.ours { border-color: var(--accent); }
  .results-table th[scope="row"] { border: 0; padding: .2rem 0 .4rem; font-size: 1.05em; }
  .results-table td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .15rem 0; background: none; }
  .results-table td.mean, .results-table th.mean { background: none; }
  .results-table td.mean { font-weight: 600; }
  .results-table td.g-start { border-left: 0; border-top: 1px solid var(--rule); padding-top: .35rem; margin-top: .25rem; }
  .results-table td::before { content: attr(data-label); font-family: var(--sans); font-size: .8rem; color: var(--muted); font-weight: 400; }
  .results-table td.demos { font-size: inherit; }

  /* Lightbox: show figures taller than the screen is wide and let them pan sideways (never above native size). */
  dialog.lightbox { width: 100vw; max-width: 100vw; margin: auto 0; }
  dialog.lightbox .frame { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: .5rem; }
  dialog.lightbox img { height: auto; max-height: min(70vh, 40rem); width: auto; max-width: none; margin: 0; }
  dialog.lightbox .lb-media { width: auto; }
  dialog.lightbox video { width: 100%; max-width: 100%; }
  dialog.lightbox .close { position: fixed; top: .75rem; right: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
@media print {
  .sitenav, .media-ctrl, .enlarge, .theme-toggle, .btn-row, .step-tabs, .walk-nav, .cmp-controls { display: none !important; }
  video { display: none; }
  .walk.is-live .walk-steps > li { display: block; }
  .hl { display: none; }
}