:root {
  color-scheme: light;
  --plot-teal: #438780;
  --plot-clay: #b8795c;
  --plot-blue: #7e91ad;
  --plot-lavender: #9380b0;
  --plot-sage: #66895d;
  --plot-grid: #e4e8e2;
  --plot-projection: #f0f1ee;
  --bg: #f8f7f3;
  --bg-2: #ffffff;
  --bg-3: #eeede7;
  --ink: #242b27;
  --ink-dim: #656b63;
  --ink-dimmer: #787e75;
  --line: #dedfd6;
  --line-strong: #c5c9bd;
  --accent: #bd492b;
  --accent-soft: #f6ece5;
  --agent: #287a75;
  --object: #bd492b;
  --skeleton: #ba7522;
  --ours: #447641;
  --baseline: #737c74;
  --edge: #7e64a0;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
::selection { background: #ead0bb; color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button, a { touch-action: manipulation; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
img, video { display: block; max-width: 100%; height: auto; }
video { background: #1d2421; width: 100%; }
figure, p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 550; letter-spacing: -.045em; }
[hidden] { display: none !important; }
.mono, .eyebrow, .section-head .num { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; padding: 12px 20px; background: var(--ink); color: white; }
.skip-link:focus { top: 12px; }

/* A quiet, persistent table of contents. */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(248, 247, 243, .96); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.header-inner { max-width: 1392px; padding: 0 44px; height: 80px; margin: auto; display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 25px; font-weight: 650; letter-spacing: -.055em; line-height: 1; flex-shrink: 0; }
.brand-mark { width: 25px; height: 25px; color: var(--accent); }
.brand-divider { color: #9ea698; margin: 0 4px; font-weight: 400; }
.brand-period { color: var(--accent); }
.site-header nav { display: flex; align-items: center; gap: 27px; }
.site-header nav a { font-size: 12px; font-weight: 500; white-space: nowrap; padding: 28px 0; position: relative; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 19px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .2s; }
.site-header nav a.active { color: var(--accent); }
.site-header nav a.active::after { transform: scaleX(1); }
.header-cite { font-size: 12px; border-left: 1px solid var(--line); padding-left: 25px; white-space: nowrap; }
.header-cite span { padding-left: 14px; }
.reading-progress { position: absolute; bottom: -1px; left: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.menu-toggle { display: none; }
.page { max-width: 1256px; margin: 0 auto; padding: 0 48px; }
.main { min-width: 0; }

/* Opening spread. */
.hero { text-align: center; padding: 78px 0 48px; scroll-margin-top: 90px; }
.eyebrow { font-size: 10px; line-height: 1.6; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.hero .eyebrow { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 29px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.eyebrow-divider { color: #a1a69b; margin: 0 4px; }
.hero h1 { font-size: clamp(45px, 5.2vw, 76px); line-height: 1.07; font-weight: 500; letter-spacing: -.055em; }
.hero h1 .title-number { font-weight: 600; }
.hero h1 em { font-family: var(--serif); font-weight: 400; color: var(--accent); letter-spacing: -.02em; font-size: 1.2em; line-height: 1.06; }
.hero .tag { max-width: 720px; margin: 27px auto 25px; font-size: 16px; line-height: 1.75; color: var(--ink-dim); letter-spacing: -.015em; }
.hero .tag b { font-weight: 500; color: var(--ink); }
.authors { max-width: 975px; margin: 0 auto 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; font-size: 12px; line-height: 1.85; }
.authors sup { color: var(--accent); font-size: 8px; padding-left: 2px; }
.authors a:hover { text-decoration: underline; text-underline-offset: 3px; }
.institution-logos { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px auto 0; }
.institution-logo { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 48px; padding: 6px 10px; background: transparent; }
.institution-logo sup { flex: 0 0 auto; color: var(--accent); font-size: 9px; line-height: 1; position: relative; top: -6px; }
.institution-logo img { display: block; object-fit: contain; max-width: calc(100% - 14px); min-width: 0; height: auto; }
.institution-logo .logo-dark { display: none; }
[data-theme="dark"] .institution-logo .logo-light { display: none; }
[data-theme="dark"] .institution-logo .logo-dark { display: block; }
[data-theme="dark"] .institution-logo .logo-monochrome { filter: brightness(0) invert(1); }
.institution-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dataset-acknowledgment { display: flex; align-items: center; gap: 22px; padding: 20px 0; margin: 0 0 24px; border-block: 1px solid var(--line); }
.dataset-partner { flex: 0 0 auto; padding: 14px 0; background: transparent; }
.dataset-partner img { display: block; }
.dataset-acknowledgment p { color: var(--ink-dim); font-size: 14px; line-height: 1.7; }
.dataset-acknowledgment p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.actions { margin-top: 28px; display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 12px; padding: 11px 19px; background: transparent; border: 1px solid var(--line-strong); border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 1.6; transition: background .2s, border-color .2s, color .2s; }
.btn:hover { background: var(--bg-3); border-color: var(--ink); color: var(--ink); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: #3f4c40; }
.btn .ico { width: 15px; height: 15px; }
.resource-status { font-size: 10px; margin-top: 13px; color: var(--ink-dim); }
.resource-status span { color: var(--ink-dimmer); }
.hero-film { overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: 7px; }
.film-heading, .figure-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 21px; font-size: 10px; }
.film-heading .mono, .figure-heading .mono { text-transform: uppercase; letter-spacing: .07em; }
.film-heading .status-dot { margin-right: 8px; background: var(--agent); }
.film-heading > span:last-child { color: var(--ink-dim); }
.hero-film video { aspect-ratio: 1362 / 444; object-fit: contain; }
.hero-film figcaption { display: flex; gap: 16px; justify-content: space-between; align-items: center; padding: 18px 22px; font-size: 11px; color: var(--ink-dim); }
.hero-film figcaption b { color: var(--ink); font-weight: 500; }
.hero-film figcaption a { color: var(--ink); white-space: nowrap; }
.hero-film figcaption a span { margin-left: 8px; }
.study-summary { display: grid; grid-template-columns: 1.6fr .7fr .7fr; gap: 20px 60px; align-items: center; padding: 42px 0 40px; margin-bottom: 4px; }
.study-summary > div:first-child > p { margin-top: 8px; font-size: 26px; line-height: 1.28; letter-spacing: -.035em; }
.study-summary em { font-family: var(--serif); font-size: 1.18em; font-weight: 400; }
.summary-meter { display: flex; flex-direction: column; font-size: 11px; color: var(--ink-dim); }
.meter-value { font-size: 44px; line-height: 1.3; letter-spacing: -.05em; color: var(--agent); }
.meter-value > span { font-size: 22px; margin-left: 2px; }
.meter-track { background: var(--bg-3); height: 4px; margin-top: 11px; }
.meter-track i { display: block; height: 100%; background: var(--agent); }
.object-meter .meter-value { color: var(--accent); }
.object-meter .meter-track i { background: var(--accent); }
.summary-note { grid-column: 1 / -1; color: var(--ink-dim); font-size: 10px; text-align: right; }
.summary-note a { text-decoration: underline; text-underline-offset: 3px; }

/* Shared editorial section structure. */
section { padding: 85px 0; border-top: 1px solid var(--line); }
.section-head { max-width: none; margin-bottom: 35px; }
.section-head .num { color: var(--accent); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 20px; }
.section-head .num span { color: var(--line-strong); margin: 0 12px; }
.section-head h2 { font-size: clamp(34px, 3.45vw, 50px); line-height: 1.1; font-weight: 500; margin-bottom: 22px; }
.section-head h2 em { font-family: var(--serif); color: var(--ink-dim); font-weight: 400; font-size: 1.13em; letter-spacing: -.025em; }
.section-head .lede { font-size: 16px; line-height: 1.85; max-width: none; color: var(--ink-dim); }
.section-head .lede b { color: var(--ink); font-weight: 500; }

.stat-num { display: block; margin-top: 11px; color: var(--ink); font-size: clamp(29px, 3vw, 41px); letter-spacing: -.055em; line-height: 1.3; font-weight: 500; font-variant-numeric: tabular-nums; }
.stat-num .unit { font-size: .6em; color: var(--ink-dim); margin-left: 3px; }
.stat-label { font-size: 11px; color: var(--ink-dim); }
.overview-fig { margin-top: 28px; }
.figure-heading > span:last-child { color: var(--ink-dim); font-size: 11px; }
.figure-heading > span:last-child span { margin: 0 10px; color: var(--line-strong); }
.overview-fig video { aspect-ratio: 16 / 9; object-fit: contain; }

/* Interactive scaling figures. */
.plot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 30px 0; }
.plot-card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 22px 24px 20px; min-width: 0; position: relative; }
.plot-card .head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: 20px; }
.plot-card .head h3 { font-size: 15px; font-weight: 500; letter-spacing: -.025em; }
.plot-card .head .metric { font-size: 9px; color: var(--ink-dim); white-space: nowrap; }
.plot-card > svg { display: block; width: 100%; height: auto; aspect-ratio: 460 / 260; overflow: visible; }
.plot-card .legend { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 14px 0 0; font-size: 9px; color: var(--ink-dim); line-height: 1.7; }
.plot-card .callout { margin-top: 18px; border-top: 1px solid var(--line); padding: 15px 0 0; font-size: 12px; line-height: 1.75; color: var(--ink-dim); }
.plot-card .callout b { font-weight: 500; color: var(--ink); }
.plot-card .callout .mono { font-size: 11px; }
.plot-card .plot-point { cursor: crosshair; }
.plot-card .plot-point:focus { outline: none; stroke-width: 3; }
.plot-tooltip { position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: #fff; padding: 8px 11px; border-radius: 4px; font: 10px/1.7 var(--mono); max-width: 240px; box-shadow: 0 4px 14px #242b2718; }
.plot-note { margin-top: 16px; color: var(--ink-dim); font-size: 10px; }
.plot-controls { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; background: #f0f0e9; border: 1px solid var(--line); border-radius: 5px; padding: 24px; margin: 28px 0; }
.plot-controls .explainer { display: flex; align-items: flex-start; gap: 20px; }
.plot-controls .thumb { width: 96px; height: 110px; flex-shrink: 0; border-radius: 3px; background: center / cover no-repeat; }
.plot-controls .txt { font-size: 12px; line-height: 1.75; color: var(--ink-dim); }
.plot-controls .txt b { font-weight: 500; color: var(--ink); }
.plot-controls .hint { display: block; margin-top: 7px; font-weight: 500; color: var(--accent); font-size: 11px; }
.plot-controls .toggles { display: flex; flex-direction: column; gap: 20px; justify-content: center; border-left: 1px solid var(--line-strong); padding-left: 28px; }
.toggle { display: flex; gap: 11px; align-items: center; font-size: 12px; cursor: pointer; }
.toggle input { appearance: none; width: 34px; height: 20px; border: 1px solid #a6ad9e; border-radius: 20px; background: #d8dccf; flex-shrink: 0; position: relative; cursor: pointer; margin: 0; transition: background .2s; }
.toggle input::after { content: ""; position: absolute; width: 14px; height: 14px; top: 2px; left: 2px; background: #fff; border-radius: 50%; transition: transform .2s; }
.toggle input:checked { background: var(--accent); border-color: var(--accent); }
.toggle input:checked::after { transform: translateX(14px); }
.toggle .sub { display: block; color: var(--ink-dim); font-size: 10px; }
.takeaway { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.takeaway > div { padding: 27px 25px; border-right: 1px solid var(--line); }
.takeaway > div:first-child { padding-left: 0; }
.takeaway > div:last-child { padding-right: 0; border: none; }
.takeaway .k { color: var(--accent); font: 9px var(--mono); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; }
.takeaway .v { font-size: 22px; letter-spacing: -.035em; line-height: 1.3; margin-bottom: 13px; }
.takeaway .d { font-size: 12px; color: var(--ink-dim); line-height: 1.8; }
.design-block { padding-top: 8px; }
.design-block > h3 { font-size: 23px; font-weight: 500; margin-bottom: 10px; }
.design-block .desc { font-size: 14px; color: var(--ink-dim); line-height: 1.8; max-width: none; margin-bottom: 26px; }
.design-block > .plot-card { max-width: 850px; margin-left: auto; margin-right: auto; }
.design-controls { grid-template-columns: 1fr; }
.design-controls .toggles { border-left: none; padding-left: 0; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 32px; }
.cmp-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 30px; }
.video-wrap { overflow: hidden; border-radius: 4px; background: #1d2421; }
.cmp-videos video { aspect-ratio: 720 / 1460; }
.cmp-videos figcaption { margin-top: 14px; font-size: 12px; color: var(--ink-dim); line-height: 1.75; }

/* Browsable failure examples, with real controls on every clip. */
.gallery-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 25px; }
.tab { border: 1px solid var(--line-strong); border-radius: 4px; background: transparent; padding: 10px 17px; color: var(--ink-dim); font-size: 12px; transition: color .2s, border-color .2s, background .2s; }
.tab:hover { border-color: var(--ink); color: var(--ink); }
.tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab-count { font: 9px var(--mono); opacity: .65; margin-left: 8px; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gallery .cell { background: #fff; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; display: flex; flex-direction: column; }
.gallery .video-wrap { border-radius: 0; }
.gallery video { aspect-ratio: 720 / 1006; }
.gallery .caption { padding: 19px; font-size: 12px; line-height: 1.75; color: var(--ink-dim); }
.gallery .caption b { display: block; color: var(--ink); font-weight: 500; font-size: 13px; margin-bottom: 4px; }
.humanoid-block { padding: 25px; margin: 26px 0; background: white; border: 1px solid var(--line); border-radius: 5px; }
.humanoid-block h3 { font-size: 22px; font-weight: 500; margin-bottom: 6px; }
.humanoid-block .sub { font: 9px/1.7 var(--mono); letter-spacing: .06em; color: var(--ink-dim); margin-bottom: 24px; }
.humanoid-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.humanoid-row video { aspect-ratio: 720 / 1634; }
.humanoid-row .cap { font-size: 11px; line-height: 1.75; color: var(--ink-dim); margin-top: 13px; }
.verdict { font: 8px var(--mono); display: inline-block; text-transform: uppercase; padding: 4px 7px; border-radius: 2px; margin-right: 4px; }
.verdict.match { background: #e8f0e5; color: #416b38; }
.verdict.miss { background: #f6e6de; color: var(--accent); }
.table-scroll { overflow-x: auto; margin-top: 30px; }
.metric-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.metric-table th, .metric-table td { padding: 16px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.metric-table th:first-child, .metric-table td:first-child { text-align: left; }
.metric-table th { color: var(--ink-dim); font: 9px var(--mono); text-transform: uppercase; }
.metric-table td:not(:first-child) { font-family: var(--mono); }
.metric-table tr.ours { background: #eaf0e5; }
.metric-table .delta { font-size: 9px; color: var(--ours); margin-left: 7px; }

/* A citation you can copy without changing its contents. */
footer { border-top: 1px solid var(--line); padding: 60px 0 30px; }
.footer-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 30px; }
.footer-intro h2 { font-size: 34px; font-weight: 500; line-height: 1.2; }
.footer-intro h2 em { color: var(--accent); font-family: var(--serif); font-weight: 400; }
.footer-intro p { font-size: 12px; color: var(--ink-dim); align-self: end; }
.citation-box { background: white; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.citation-heading { display: flex; justify-content: space-between; align-items: center; padding: 13px 22px; border-bottom: 1px solid var(--line); font: 10px var(--mono); }
.copy-bib { background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: 7px 11px; color: var(--ink); font: 10px var(--mono); }
.copy-bib:hover { border-color: var(--ink); }
.bib { font: 11px/1.9 var(--mono); color: var(--ink-dim); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 24px; }
.citation-status { color: var(--ink-dim); font-size: 11px; padding: 0 24px; }
.citation-status:not(:empty) { padding-bottom: 15px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 30px; font-size: 10px; color: var(--ink-dim); }
.footer-bottom a { color: var(--ink); }

@media (min-width: 1500px) { .hero { padding-top: 88px; } }
@media (max-width: 1100px) {
  .header-inner { padding: 0 28px; gap: 22px; }
  .site-header nav { gap: 18px; }
  .header-cite { display: none; }
  .page { padding: 0 34px; }
  .explorer-body { grid-template-columns: minmax(0, 1fr) 250px; gap: 23px; }
  .budget-bars { gap: 18px; }
  .budget-detail { padding: 18px; }
  .plot-controls { grid-template-columns: 1fr; gap: 20px; }
  .plot-controls .toggles { border-left: none; border-top: 1px solid var(--line); padding: 18px 0 0; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .design-controls .toggles { border-top: none; padding-top: 0; }
  .study-summary { gap: 20px 35px; }
}
@media (max-width: 760px) {
  .institution-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; max-width: 360px; margin-top: 14px; }
  .institution-logo { padding: 6px 4px; }
  .dataset-acknowledgment { flex-wrap: wrap; gap: 14px; }
  html { scroll-padding-top: 90px; }
  .header-inner { height: 66px; padding: 0 22px; flex-wrap: wrap; }
  .brand { font-size: 23px; }
  .brand-mark { width: 22px; height: 22px; }
  .menu-toggle { display: flex; gap: 17px; align-items: center; border: 0; padding: 12px 0 12px 12px; background: none; font-size: 12px; }
  .menu-toggle span { font-size: 23px; line-height: 1; transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
  .site-header nav { display: none; position: absolute; top: 66px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px 24px 20px; box-shadow: 0 14px 24px #242b2710; }
  .site-header nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .site-header nav a { padding: 11px 0; font-size: 14px; }
  .site-header nav a::after { display: none; }
  .page { padding: 0 23px; }
  .hero { padding: 52px 0 34px; }
  .hero .eyebrow { font-size: 8px; flex-wrap: wrap; gap: 5px 8px; max-width: 330px; margin: 0 auto 23px; }
  .hero .eyebrow > span:last-child { flex-basis: 100%; }
  .eyebrow-divider { display: none; }
  .hero h1 { font-size: clamp(39px, 7.8vw, 59px); }
  .hero .tag { font-size: 14px; line-height: 1.8; margin: 23px auto; }
  .desktop-break { display: none; }
  .authors { max-width: 550px; font-size: 10px; gap: 4px 13px; }
  .actions { margin-top: 24px; gap: 6px; }
  .btn { font-size: 11px; padding: 10px 13px; gap: 8px; }
  .film-heading { padding: 12px 14px; font-size: 8px; }
  .film-heading > span:last-child { display: none; }
  .hero-film figcaption { flex-direction: column; align-items: flex-start; padding: 14px; gap: 10px; font-size: 10px; }
  .study-summary { grid-template-columns: 1fr 1fr; gap: 22px 35px; padding: 32px 0; }
  .study-summary > div:first-child { grid-column: 1 / -1; }
  .study-summary > div:first-child > p { font-size: 26px; }
  .summary-note { text-align: left; }
  .meter-value { font-size: 37px; }
  section { padding: 57px 0; }
  .section-head { margin-bottom: 27px; }
  .section-head h2 { font-size: 36px; }
  .section-head .lede { font-size: 14px; line-height: 1.85; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div { padding: 20px; }
  .stats > div:nth-child(2) { border-right: 0; }
  .stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .stat-num { font-size: 33px; }
  .stat-index { font-size: 8px; }
  .stat-label { font-size: 10px; }
  .explorer-heading { padding: 23px 20px 0; flex-direction: column; align-items: flex-start; gap: 15px; }
  .explorer-heading h3 { font-size: 21px; }
  .chart-actions { width: 100%; justify-content: space-between; }
  .explorer-body { grid-template-columns: 1fr; padding: 35px 20px 23px; gap: 33px; }
  .budget-plot { height: 285px; }
  .budget-bars { gap: clamp(13px, 4vw, 28px); }
  .budget-detail { margin-top: 0; padding: 21px; }
  .budget-readout { font-size: 45px; }
  .budget-detail > p { min-height: 0; }
  .budget-detail dl div { font-size: 11px; }
  .budget-detail dl { margin: 15px 0 19px; }
  .explorer-caption { padding: 14px 20px; font-size: 9px; }
  .bar-value { font-size: 9px; }
  .bar-label { font-size: 9px; }
  .figure-heading { padding: 13px 15px; flex-wrap: wrap; gap: 5px; font-size: 9px; }
  .figure-heading > span:last-child { font-size: 10px; }
  .plot-grid { grid-template-columns: 1fr; }
  .plot-card { padding: 20px 17px; }
  .plot-card .head { margin-bottom: 16px; gap: 8px; }
  .plot-card .head h3 { font-size: 14px; }
  .plot-controls { padding: 20px; }
  .plot-controls .explainer { gap: 14px; }
  .plot-controls .thumb { width: 75px; height: 96px; }
  .plot-controls .txt { font-size: 11px; }
  .plot-controls .toggles { flex-direction: column; gap: 16px; }
  .takeaway { grid-template-columns: 1fr; }
  .takeaway > div, .takeaway > div:first-child, .takeaway > div:last-child { padding: 24px 0; border-right: 0; }
  .takeaway > div:not(:last-child) { border-bottom: 1px solid var(--line); }
  .takeaway .v { font-size: 23px; }
  .design-block > h3 { font-size: 21px; }
  .design-block .desc { font-size: 13px; }
  .cmp-videos { gap: 15px; }
  .cmp-videos figcaption { font-size: 10px; }
  .gallery { grid-template-columns: 1fr; gap: 22px; }
  .gallery .cell { max-width: 440px; margin: 0 auto; }
  .gallery-controls { gap: 7px; }
  .tab { padding: 10px 12px; font-size: 11px; }
  .humanoid-block { padding: 20px; }
  .humanoid-block h3 { font-size: 21px; }
  .humanoid-row { grid-template-columns: 1fr; gap: 27px; max-width: 360px; margin: auto; }
  .humanoid-row .cap { font-size: 12px; }
  .metric-table th, .metric-table td { padding: 13px 10px; }
  .metric-table td { font-size: 11px; }
  .footer-intro { grid-template-columns: 1fr; gap: 18px; }
  .footer-intro h2 { font-size: 30px; }
  .bib { padding: 18px; font-size: 9px; }
  .citation-heading { padding: 13px 18px; }
  .footer-bottom { flex-wrap: wrap; font-size: 9px; }
}
@media (max-width: 380px) {
  .page { padding: 0 17px; }
  .hero h1 { font-size: 35px; }
  .hero .actions .btn { font-size: 10px; padding: 10px; }
  .section-head h2 { font-size: 32px; }
  .stats > div { padding: 17px; }
  .stat-num { font-size: 29px; }
  .budget-bars { gap: 12px; }
  .explorer-body { padding-left: 14px; padding-right: 14px; }
  .bar-value { font-size: 8px; }
  .plot-controls .thumb { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .chart-ready .bar-fill { transform: scaleY(1); }
  .chart-ready .bar-value { opacity: 1; }
}

/* Soft research figures, with space for both the result and its evidence. */
.findings-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.findings-toolbar > div:first-child > p { font-size: 13px; margin-top: 4px; color: var(--ink-dim); }
.layer-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.layer-button { display: inline-flex; align-items: center; gap: 8px; min-height: 41px; border: 1px solid #d7ded4; border-radius: 6px; background: #fff; padding: 9px 12px; color: #5b675e; font-size: 11px; transition: background .2s, border-color .2s, color .2s; }
.layer-button:hover { background: #eef2ec; border-color: #a7b6a2; }
.layer-button.active { background: #edf1e9; border-color: #a0b094; color: #526f4a; }
.skeleton-layer.active { background: #faf0e9; border-color: #d5b9a7; color: #a66845; }
.ours-layer.active { background: #edf3e9; border-color: #b0c4a1; color: #597d4e; }
.layer-icon { font: 19px/1 var(--mono); font-weight: 400; }
.findings-toolbar + .plot-grid { margin-top: 0; }
.plot-card { background: linear-gradient(150deg, #ffffff, #fafcf9); border-color: #dce3d7; border-radius: 10px; padding: 26px 24px 24px; }
.object-plot { background: linear-gradient(150deg, #ffffff, #fcfaf7); }
.design-plot { background: linear-gradient(150deg, #ffffff, #f8faf5); }
.plot-card .head { margin-bottom: 22px; align-items: center; }
.plot-card .head h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 500; }
.series-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.agent-dot { background: #438780; }
.object-dot { background: #c07956; }
.ours-dot { background: #66895d; }
.chart-badge { font: 9px var(--mono); color: #768270; padding: 5px 9px; border: 1px solid #e2e7dc; border-radius: 20px; white-space: nowrap; }
.plot-readout { display: flex; gap: 18px; align-items: center; margin: 0 0 24px; }
.plot-readout > span { color: #386f68; font-size: 45px; letter-spacing: -.055em; line-height: 1.1; font-weight: 450; font-variant-numeric: tabular-nums; }
.object-plot .plot-readout > span { color: #ab775c; }
.design-plot .plot-readout > span { color: #66895d; }
.plot-readout > div { display: flex; flex-direction: column; color: #697567; font-size: 10px; line-height: 1.9; }
.plot-readout .plot-trend { font-size: 9px; color: #7a8676; }
.plot-card > svg { aspect-ratio: 540 / 330; }
.plot-card .legend { font-family: 'DM Sans', sans-serif; font-size: 11px; gap: 8px 17px; margin: 21px 0 0; min-height: 20px; }
.plot-card .legend > span { display: inline-flex; align-items: center; gap: 6px; }
.plot-card .legend i { display: inline-block; width: 18px; height: 0; }
.plot-card .callout { font-size: 12px; line-height: 1.8; border-color: #e1e6db; padding-top: 18px; margin-top: 20px; }
.plot-card .callout-label { display: block; font: 8px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: #778471; margin-bottom: 6px; }
.plot-card .callout b { color: #414f3e; }
.plot-card .plot-tooltip { background: #35483e; font-size: 10px; font-family: 'DM Sans', sans-serif; }
.plot-note { margin: 0 0 20px; max-width: 950px; line-height: 1.8; }
.skeleton-explainer { border: 1px solid #dce3d7; border-radius: 6px; padding: 16px 20px; background: #f0f3ed; }
.skeleton-explainer summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; font-size: 12px; color: #52644c; }
.skeleton-explainer summary::-webkit-details-marker { display: none; }
.skeleton-explanation { display: flex; align-items: flex-start; gap: 20px; margin-top: 18px; }
.skeleton-explanation img { width: 135px; border-radius: 4px; }
.skeleton-explanation p { font-size: 12px; color: var(--ink-dim); }
.design-block > .plot-card { max-width: 100%; }
.design-plot > svg { max-height: 410px; }
.design-toolbar { justify-content: center; border: 0; padding: 18px 0; }
@media (max-width: 1050px) { .findings-toolbar { flex-direction: column; align-items: flex-start; gap: 13px; } .design-toolbar { align-items: center; } }
@media (max-width: 760px) {
  .plot-card { padding: 22px 17px; }
  .plot-card .head h3 { font-size: 16px; }
  .plot-readout > span { font-size: 43px; }
  .plot-readout { gap: 14px; margin-bottom: 17px; }
  .chart-badge { font-size: 8px; padding: 4px 7px; }
  .plot-card .legend { font-size: 10px; }
  .layer-button { font-size: 10px; min-height: 41px; }
  .layer-buttons { gap: 7px; }
  .skeleton-explanation { flex-direction: column; gap: 12px; }
  .skeleton-explanation img { width: 100%; max-width: 220px; }
  .design-plot > svg { max-height: none; }
}

/* Choreographed footage: one perspective becomes the full 256-clip mosaic. */
.dataset-sequence { position: relative; aspect-ratio: 16 / 9; background: #1b2420; border-radius: 7px; overflow: hidden; }
.sequence-canvas { width: 100%; height: 100%; display: none; background: url('../img/teaser-poster.jpg') center / cover; }
.sequence-ready .sequence-canvas { display: block; }
.sequence-ready > [data-sequence-source] { display: none; }
.sequence-overlay { position: absolute; top: 25px; left: 26px; pointer-events: none; color: #fff; display: none; text-shadow: 0 1px 10px #000a; }
.sequence-ready .sequence-overlay { display: flex; flex-direction: column; gap: 4px; }
.sequence-kicker { font: 9px var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.sequence-counter { font-size: 13px; }
.sequence-counter b { font-size: 36px; line-height: 1.3; font-weight: 450; letter-spacing: -.04em; margin-right: 5px; }
.sequence-controls { position: static; }
.dataset-sequence:not(.sequence-ready) + .sequence-toolbar { display: none; }
.sequence-toolbar { display: flex; justify-content: flex-end; margin-top: 10px; }
.sequence-stages { display: flex; gap: 22px; }
.sequence-stages button { padding: 7px 0; border: 0; border-bottom: 2px solid transparent; background: none; font-size: 10px; color: #7a8676; }
.sequence-stages button > span { font: 9px var(--mono); margin-right: 4px; }
.sequence-stages button.active { border-color: #6c8f77; color: #40684e; }
.sequence-playback { display: flex; gap: 2px; }
.playback-pause-icon, [data-playing="true"] .playback-play-icon { display: none; }
[data-playing="true"] .playback-pause-icon { display: block; }
.comparison-viewer { margin-top: 35px; border: 1px solid #dce3d7; background: #fff; border-radius: 9px; overflow: hidden; }
.comparison-gallery { display: grid; gap: 28px; margin-top: 35px; }
.comparison-gallery > .comparison-viewer { margin-top: 0; }
.comparison-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px; }
.comparison-heading h3 { font-size: 22px; margin-top: 5px; font-weight: 500; }
.comparison-tabs { display: flex; gap: 5px; padding: 4px; background: #f1f4ee; border-radius: 5px; }
.comparison-tabs button { font-size: 10px; padding: 8px 11px; border: 0; background: transparent; border-radius: 3px; color: #728168; }
.comparison-tabs button.active { color: #426747; background: #fff; box-shadow: 0 1px 4px #25382010; }
.comparison-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0 22px; }
.comparison-panels figure { min-width: 0; }
.comparison-panels figcaption { display: grid; grid-template-columns: 7px 1fr; column-gap: 7px; align-items: center; padding: 0 2px 12px; }
.comparison-panels figcaption b { font-size: 13px; font-weight: 500; }
.comparison-panels figcaption > span:last-child { grid-column: 2; color: #7a8672; font-size: 9px; }
.comparison-dot { width: 6px; height: 6px; border-radius: 50%; }
.gt-dot { background: #7e91ad; }
.cosmos-dot { background: #b297af; }
.ours-dot { background: #66895d; }
.comparison-panels video { aspect-ratio: 720 / 406; border-radius: 4px; }

.comparison-panels p { color: #75806c; font-size: 11px; line-height: 1.75; padding: 13px 2px 20px; }
.comparison-playback { position: absolute; right: 10px; bottom: 34px; }
@media (max-width: 1000px) {
  .sequence-stages { justify-content: space-between; gap: 10px; }
  .sequence-playback { justify-content: flex-end; }
}
@media (max-width: 760px) {
  .sequence-overlay { top: 12px; left: 14px; }
  .sequence-kicker { font-size: 7px; }
  .sequence-counter b { font-size: 24px; }
  .sequence-counter { font-size: 10px; }
  .sequence-stages button { font-size: 9px; }
  .sequence-stages button > span { display: block; margin: 0; }
  .comparison-heading { flex-direction: column; align-items: flex-start; padding: 21px 18px; gap: 17px; }
  .comparison-heading h3 { font-size: 22px; }
  .comparison-panels { gap: 11px; padding: 0 18px; grid-template-columns: 1fr; }
  .comparison-panels figcaption { grid-template-columns: 7px auto 1fr; padding-bottom: 10px; }
  .comparison-panels figcaption > span:last-child { grid-column: 3; text-align: right; }
  .comparison-panels p { font-size: 11px; padding-bottom: 20px; }
}

/* Four dataset totals, without arbitrary scales or implied comparisons. */
.brand { font-size: 17px; letter-spacing: -.03em; }
.hero .tag { max-width: 835px; }
.hero h1 { max-width: 1030px; margin: auto; }
.hero h1 em { display: inline; }
.btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
.dataset-totals { border: 1px solid #dce3d7; border-radius: 10px; background: #fff; overflow: hidden; }
.metric-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card { --metric-color: var(--plot-teal); padding: 30px 24px 32px; border-right: 1px solid #e1e7dc; background: linear-gradient(150deg, #fff, #f7faf5); }
.metric-card:last-child { border-right: 0; }
.metric-clips { --metric-color: var(--plot-blue); background: linear-gradient(150deg, #fff, #f7f9fc); }
.metric-tasks { --metric-color: var(--plot-lavender); background: linear-gradient(150deg, #fff, #faf8fc); }
.metric-people { --metric-color: var(--plot-sage); }
.metric-heading .stat-num { font-size: clamp(28px, 3vw, 39px); margin-top: 22px; color: var(--ink); font-weight: 450; }
.metric-heading .stat-label { font-size: 11px; color: #77816e; }
.metric-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 32px; margin-block: -11px; }
.metric-card-heading .metric-index { gap: 6px; white-space: nowrap; }
.original-explainer { grid-template-columns: 1fr; }
.original-explainer .txt { font-size: 13px; }
.sequence-stages button { min-width: 48px; }
.sequence-stages button > span { font-size: 11px; }
@media (max-width: 1000px) { .metric-card { padding: 23px 18px 16px; } }
@media (max-width: 760px) {
  .metric-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card { padding: 23px 14px 18px; }
  .metric-card:nth-child(2) { border-right: 0; }
  .metric-card:nth-child(-n+2) { border-bottom: 1px solid #e1e7dc; }
  .metric-heading .stat-num { font-size: 31px; }
  .metric-heading .stat-label { font-size: 10px; }
  .hero h1 { font-size: 40px; }
  .hero .eyebrow { max-width: none; }
  .brand { font-size: 16px; }
  .plot-card .head h3 { font-size: 14px; }
  .chart-badge { font-size: 7px; }
  .comparison-panels figcaption { display: flex; gap: 7px; }
}

.nowrap { white-space: nowrap; }
.hero h1 { text-wrap: balance; }
.replay-icon { display: inline-block; width: 13px; height: 13px; vertical-align: -.15em; flex-shrink: 0; }

.metric-index { display: flex; align-items: center; gap: 9px; color: var(--ink-dim); font: 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.metric-index::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--metric-color); }
.plot-note { font-size: 12px; color: var(--ink-dim); line-height: 1.8; margin: 18px 0; }
.findings-toolbar .plot-note { margin: 0; max-width: 320px; text-align: right; }
@media (max-width: 1050px) { .findings-toolbar .plot-note { max-width: none; text-align: left; } }
.evaluation-scope { color: var(--ink-dim); font-size: 12px; margin: -10px 0 24px; max-width: 760px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 30px; padding: 9px 12px; font-size: 11px; white-space: nowrap; }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle:hover { border-color: var(--ink-dim); }
.header-inner { gap: 20px; }
.site-header nav { gap: 20px; }
.menu-toggle { color: var(--ink); }
@media (max-width: 1200px) and (min-width: 761px) {
  .header-inner { padding-inline: 24px; gap: 12px; }
  .site-header nav { gap: 12px; }
  .header-cite { display: none; }
  .brand { font-size: 14px; }
  .theme-toggle span { display: none; }
}
@media (max-width: 760px) {
  .header-inner { flex-wrap: nowrap; gap: 12px; padding-inline: 18px; }
  .brand { margin-right: auto; font-size: 14px; }
  .brand-mark { width: 18px; }
  .menu-toggle { order: 3; padding-left: 0; gap: 8px; }
  .theme-toggle { width: 34px; height: 34px; padding: 8px; }
  .theme-toggle span { display: none; }
  .metric-index { font-size: 8px; }
  .metric-heading .stat-num { margin-top: 16px; }
  .metric-heading .stat-label { display: block; min-height: 32px; }
}

/* Theme tokens also color SVG paths, so changing mode preserves animation state. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171d1c;
  --bg-2: #202826;
  --bg-3: #2b3531;
  --ink: #e4e9e3;
  --ink-dim: #b2bdb3;
  --ink-dimmer: #9eaaa0;
  --line: #35423c;
  --line-strong: #536157;
  --accent: #dca58b;
  --accent-soft: #382d28;
  --agent: #92c9bf;
  --object: #dca58b;
  --skeleton: #d8b18a;
  --ours: #acc99d;
  --baseline: #b2bdb3;
  --edge: #b7a4d1;
  --plot-teal: #92c9bf;
  --plot-clay: #dca58b;
  --plot-blue: #9db8d9;
  --plot-lavender: #b7a4d1;
  --plot-sage: #acc99d;
  --plot-grid: #37443e;
  --plot-projection: #29322e;
}
[data-theme="dark"] ::selection { background: #536b60; }
[data-theme="dark"] .site-header { background: rgba(23, 29, 28, .96); }
[data-theme="dark"] :is(.plot-card, .dataset-totals, .metric-card, .comparison-viewer, .gallery .cell, .humanoid-block, .citation-box) { background: var(--bg-2); border-color: var(--line); }
[data-theme="dark"] :is(.plot-controls, .comparison-tabs, .metric-table tr.ours, .citation-heading) { background: var(--bg-3); border-color: var(--line); }
[data-theme="dark"] :is(.metric-card, .plot-card .callout, .chart-badge) { border-color: var(--line); }
[data-theme="dark"] :is(.metric-heading .stat-label, .chart-badge, .plot-readout > div, .plot-readout .plot-trend, .sequence-stages button, .comparison-panels p, .comparison-tabs button) { color: var(--ink-dim); }
[data-theme="dark"] .plot-card .callout b { color: var(--ink); }
[data-theme="dark"] :is(.comparison-tabs button.active) { background: var(--bg-2); color: var(--ink-dim); border-color: var(--line-strong); }
[data-theme="dark"] :is(.layer-button, .tab) { background: #26352f; color: #e4eee7; border-color: #819b8b; }
[data-theme="dark"] :is(.layer-button.active, .tab.active) { background: #b9d4bd; color: #172a1e; border-color: #cbe4ce; box-shadow: inset 0 0 0 1px #cbe4ce; font-weight: 600; }
[data-theme="dark"] :is(.layer-button, .tab):hover { background: #354b3e; border-color: #c0d9c6; color: #f2f7ef; }
[data-theme="dark"] :is(.layer-button.active, .tab.active):hover { background: #cce3cf; color: #172a1e; }
[data-theme="dark"] :is(.layer-button, .tab):focus-visible { outline: 3px solid #e8c7a6; outline-offset: 4px; }
[data-theme="dark"] .sequence-stages button.active { color: var(--ours); border-color: var(--ours); }
[data-theme="dark"] :is(.btn.primary, .skip-link) { color: var(--bg); background: var(--ink); }
[data-theme="dark"] .btn.primary:hover { background: #c9d9ce; }
[data-theme="dark"] .verdict.match { background: #30452f; color: #c1d6b4; }
[data-theme="dark"] .verdict.miss { background: #49332b; }
[data-theme="dark"] .agent-plot .plot-readout > span { color: var(--plot-teal); }
[data-theme="dark"] .object-plot .plot-readout > span { color: var(--plot-clay); }
[data-theme="dark"] .design-plot .plot-readout > span { color: var(--plot-sage); }
[data-theme="dark"] .plot-card .plot-tooltip { background: #dce9de; color: #1e3026; }
@media (max-width: 380px) {
  .header-inner { padding-inline: 14px; gap: 8px; }
  .brand { font-size: 12px; gap: 8px; }
}

/* Reviewed paper details and controls. */
.theme-sun { display: none; }
[data-theme="dark"] .theme-sun { display: block; }
[data-theme="dark"] .theme-moon { display: none; }
.theme-toggle { min-height: 44px; }
.metric-table caption { text-align: left; color: var(--ink-dim); font-size: 12px; padding: 8px 0; }
.evaluation-summary { margin-top: 40px; max-width: none; }
.evaluation-summary h3 { font-size: 25px; margin-bottom: 14px; }
.evaluation-summary p { color: var(--ink-dim); font-size: 14px; margin: 14px 0; line-height: 1.85; }
.footer-intro p + p { margin-top: 16px; }
.plot-card > svg { max-width: 820px; max-height: none; margin-inline: auto; }
.design-toolbar { justify-content: flex-start; }
.plot-card .chart-badge { display: none; }
.plot-card .head h3 { font-size: 18px; }
.plot-readout > div, .plot-readout .plot-trend { font-size: 12px; }
.plot-card .legend { font-size: 12px; }
.plot-card .callout { font-size: 13px; }
.plot-point { pointer-events: all; }
.plot-card .plot-tooltip { font-size: 12px; }
.motion-toggle { background: none; color: var(--ink-dim); padding: 10px 0 10px 12px; min-height: 44px; border: 0; font-size: 12px; }
.media-status { color: var(--ink-dim); background: var(--bg-3); padding: 12px 18px; font-size: 13px; }
.media-status button { color: var(--ink); background: var(--bg-2); border: 1px solid var(--line-strong); padding: 7px 12px; border-radius: 4px; }
.comparison-panels video { cursor: pointer; }
.sequence-stages button { min-height: 44px; font-size: 12px; }
.sequence-counter { background: #17221b99; padding: 3px 11px; border-radius: 5px; }
.layer-button { min-height: 44px; }
@media (max-width: 760px) {
  .plot-card { padding: 22px 12px; }
  .plot-card .head, .plot-readout, .plot-card .legend, .plot-card .callout { margin-left: 5px; margin-right: 5px; }
  .plot-card .head h3 { font-size: 16px; }
  .plot-card .legend { gap: 10px; }
  .theme-toggle { width: 44px; }
  .figure-heading { align-items: center; }
  .figure-heading > span:last-child { font-size: 10px; }
  .motion-toggle { padding-left: 0; }
}

/* One plot beside the synchronized, vertically stacked GT / Ours samples. */
.hero { display: flex; flex-direction: column; padding: 46px 0 42px; }
.hero .eyebrow { order: 0; margin-bottom: 22px; }
.hero h1 { order: 1; font-size: clamp(52px, 4.8vw, 72px); max-width: 1060px; }
.hero-identity { order: 2; margin-top: 24px; }
.hero h1 em { font-size: 1.12em; }
.hero-scaling { order: 3; width: 100%; max-width: 844px; margin: 32px auto 25px; text-align: left; }
.hero-takeaway { margin-top: 30px; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); }
.hero-takeaway-lead { font-size: clamp(20px, 1.9vw, 27px); line-height: 1.38; font-weight: 500; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.hero-takeaway-lead .takeaway-agent { color: #2877b4; }
.hero-takeaway-lead .takeaway-object { color: #d97827; }
.hero-takeaway-sub { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--ink-dim); }
.hero-figure-grid { display: grid; grid-template-columns: minmax(0, 1fr) 284px; gap: 30px; align-items: start; }
.hero-plot.plot-card { padding: 14px 10px 8px; background: var(--bg-2); border-color: var(--line); }
.hero-plot-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 8px 10px; }
.hero-plot-heading h3 { font-size: 15px; font-weight: 500; letter-spacing: -.02em; }
.hero-plot-heading .hero-variant { color: var(--ink-dim); font: 10px var(--mono); white-space: nowrap; }
.hero-plot-actions { display: flex; align-items: center; gap: 10px; }
.hero-sample { min-width: 0; }
.hero-sample .hero-plot-heading { margin-inline: 0; }
.hero-sample .hero-plot-heading h3 { font-size: 13px; }
.hero-sample .hero-plot-heading > a { font-size: 10px; color: var(--ink-dim); white-space: nowrap; }
.hero-sample .comparison-panels { grid-template-columns: 1fr; gap: 14px; padding: 0; }
.hero-sample .comparison-panels figcaption { display: flex; gap: 6px; padding: 0 0 8px; }
.hero-sample .comparison-panels figcaption b { font-size: 12px; }
.hero-sample video { aspect-ratio: 720 / 406; border-radius: 5px; }
.hero .actions { margin-top: 18px; }
#model-comparison { scroll-margin-top: 110px; }
.comparison-tabs { flex-wrap: wrap; }
.comparison-panels p:empty { display: none; }
.comparison-panels:has(p:empty) { padding-bottom: 20px; }

/* Borderless, synchronized video pairs; all labels live in the page. */
.video-pair-labels { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: 8px; font-size: 12px; color: var(--ink-dim); }
.video-pair-labels span:last-child { color: var(--plot-teal); }
.gallery { grid-template-columns: 1fr; gap: 28px; }
.gallery .cell { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 28px; align-items: center; border: 0; border-radius: 0; background: transparent; }
.gallery .video-wrap { background: transparent; }
.gallery video { aspect-ratio: 1440 / 406; }
.gallery .caption { padding: 0; font-size: 14px; }
.gallery .caption b { font-size: 16px; }
.humanoid-block { background: transparent; border: 0; padding: 25px 0; }
.humanoid-row video { aspect-ratio: 2 / 1; }
.humanoid-row .video-wrap { border: 0; border-radius: 0; background: transparent; }
.verdict.match, .verdict.miss { background: transparent; border: 0; padding-left: 0; }
[data-theme="dark"] :is(.gallery .cell, .humanoid-block) { background: transparent; }
[data-theme="dark"] :is(.verdict.match, .verdict.miss) { background: transparent; }

@media (min-width: 761px) and (max-height: 850px) {
  .hero { padding-top: 16px; padding-bottom: 30px; }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero h1 { font-size: clamp(45px, 4vw, 60px); }
  .hero-scaling { margin-top: 28px; margin-bottom: 16px; }
  .hero .actions { margin-top: 12px; }
}
@media (max-width: 760px) {
  .hero { padding: 30px 0 32px; }
  .hero .eyebrow { margin-bottom: 15px; }
  .hero h1 { font-size: clamp(33px, 7.5vw, 46px); }
  .hero-scaling { margin-top: 28px; }
  .hero-figure-grid { grid-template-columns: 1fr; gap: 18px; }
  .hero-plot.plot-card { padding: 14px 6px 8px; }
  .hero-plot > .hero-plot-heading { flex-wrap: wrap; }
  .hero-plot-actions { flex: 1 0 100%; justify-content: space-between; }
  .replay-metrics span { display: none; }
  .hero-sample .hero-plot-heading h3 { font-size: 15px; }
  .hero-sample .hero-plot-heading > a { font-size: 12px; }
  .hero-sample .comparison-panels { gap: 14px; }
  .gallery .cell { grid-template-columns: 1fr; gap: 14px; max-width: none; }
  .gallery .caption { font-size: 13px; }
  .humanoid-row { max-width: none; }
}

/* Shared round controls for videos, dataset counters and plot animations. */
.playback-cluster { display: inline-flex; align-items: center; flex-shrink: 0; gap: 1px; padding: 3px; border: 1px solid #ffffff30; border-radius: 999px; background: #17211ce6; backdrop-filter: blur(12px); }
.playback-button { display: inline-grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 1px solid #ffffff30; border-radius: 50%; background: #17211ce6; color: #fff; cursor: pointer; }
.playback-button:hover { background: #354b3e; }
.playback-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.playback-button > svg { display: block; width: 16px; height: 16px; }
.playback-cluster .playback-button { border: 0; background: transparent; }
.playback-cluster .playback-button:hover { background: #ffffff24; }
.playback-cluster .playback-button:focus-visible { outline-color: #fff; outline-offset: -3px; }
.hero-plot .replay-plots { margin-block: -3px; }
.replay-plots > svg, .replay-metrics > svg { width: 16px; height: 16px; }
:is(.btn, .layer-button, .tab, .copy-bib, .media-status button, .menu-toggle) { border-radius: 999px; }
.inline-video-player, .comparison-video-frame { position: relative; min-width: 0; }
.inline-video-player video { cursor: pointer; }
.video-controls { position: absolute; right: 10px; bottom: 34px; }
.video-seek { appearance: none; position: absolute; left: 10px; bottom: 2px; width: calc(100% - 20px); height: 28px; margin: 0; background: transparent; cursor: pointer; }
.inline-video-player:fullscreen { display: flex; flex-direction: column; width: 100%; height: 100%; background: #171d1c; }
.inline-video-player:fullscreen video { width: 100%; height: 0; min-height: 0; flex: 1; object-fit: contain; }
.inline-video-player:fullscreen .video-toolbar { flex-shrink: 0; margin: 10px 16px; }
.comparison-panels:fullscreen { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(var(--comparison-columns, 3), minmax(0, 1fr)); align-content: center; align-items: start; gap: 20px; padding: 24px; background: #171d1c; color: #fff; }
.comparison-panels:fullscreen p { color: #d3ddd5; }
.comparison-panels:fullscreen video { max-height: calc(100vh - 160px); object-fit: contain; }
@media (max-width: 760px) {
  .comparison-panels:fullscreen { grid-template-columns: 1fr; align-content: start; overflow-y: auto; }
}

/* Readable labels and a larger seek target on every video. */
.video-time { position: absolute; left: 10px; bottom: 44px; padding: 7px 8px; border: 1px solid #ffffff30; border-radius: 999px; background: #17211ce6; color: #fff; font: 14px/1.3 var(--mono); white-space: nowrap; pointer-events: none; }
@container (max-width: 330px) { .video-duration { display: none; } }
.video-seek::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: linear-gradient(to right, #edf5e9 var(--seek-progress, 0%), #ffffff66 var(--seek-progress, 0%)); box-shadow: 0 0 2px #000; }
.video-seek::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: -6.5px; border: 2px solid #fff; border-radius: 50%; background: #c0d4bb; box-shadow: 0 1px 4px #0008; }
.video-seek::-moz-range-track { height: 5px; border-radius: 999px; background: #ffffff66; box-shadow: 0 0 2px #000; }
.video-seek::-moz-range-progress { height: 5px; border-radius: 999px; background: #edf5e9; }
.video-seek::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #c0d4bb; box-shadow: 0 1px 4px #0008; }
.video-seek:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 999px; }
p, .caption, .callout, .takeaway .d { text-wrap: pretty; }
h2, h3, .metric-heading .stat-label { text-wrap: balance; }
.metric-index { flex-shrink: 0; }
@media (min-width: 761px) and (max-width: 900px) {
  .comparison-gallery .comparison-panels { grid-template-columns: 1fr; }
}

/* Playback controls stay below every video so the footage remains unobscured. */
.video-toolbar { container-type: inline-size; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 8px; margin-top: 8px; }
.video-toolbar :is(.comparison-playback, .video-controls) { position: static; grid-column: 1; grid-row: 1; }
.video-toolbar .video-time { position: static; grid-column: 2; grid-row: 1; justify-self: end; padding: 0; border: 0; background: none; color: var(--ink); }
.video-toolbar .video-seek { position: static; grid-column: 1 / -1; grid-row: 2; width: 100%; }
.video-toolbar .video-seek::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--plot-teal) var(--seek-progress, 0%), var(--line-strong) var(--seek-progress, 0%)); box-shadow: none; }
.video-toolbar .video-seek::-moz-range-track { background: var(--line-strong); box-shadow: none; }
.video-toolbar .video-seek::-moz-range-progress { background: var(--plot-teal); }
.video-toolbar .video-seek:focus-visible { outline-color: var(--accent); }
:is(.comparison-panels, .inline-video-player):fullscreen .video-toolbar .video-time { color: #fff; }

/* ===== Ghost button system ===== */
:root .page { --ghost-hover: color-mix(in srgb, var(--ink) 6%, transparent); }

/* Hero actions */
:root .page .actions { gap: 4px; }
:root .page .btn { gap: 8px; padding: 8px 14px; background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--ink-dim); font-size: 12.5px; font-weight: 500; letter-spacing: .01em; }
:root .page .btn:hover { background: var(--ghost-hover); border-color: transparent; color: var(--ink); }
:root .page .btn.primary { background: transparent; border-color: var(--line-strong); color: var(--ink); }
:root .page .btn.primary:hover { background: var(--ghost-hover); border-color: var(--ink); }
:root .page .btn .ico { width: 14px; height: 14px; opacity: .75; }
:root .page .btn[aria-disabled="true"], :root .page .btn:disabled { opacity: .55; cursor: default; }
:root .page .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Failure-mode tabs: text + underline */
:root .page .gallery-controls { gap: 22px; border-bottom: 1px solid var(--line); }
:root .page .tab, :root .page .tab:hover { background: transparent; border: 0; border-bottom: 1.5px solid transparent; border-radius: 0; margin-bottom: -1px; padding: 10px 1px; color: var(--ink-dim); font-size: 12.5px; font-weight: 500; box-shadow: none; }
:root .page .tab:hover { color: var(--ink); }
:root .page .tab.active, :root .page .tab.active:hover { background: transparent; color: var(--ink); border-bottom-color: var(--ink); box-shadow: none; font-weight: 500; }

/* Plot layer toggles: ghost chips with a state dot */
:root .page .layer-buttons { gap: 6px; }
:root .page .layer-button { --dot: var(--ink-dim); min-height: 36px; gap: 8px; padding: 7px 13px; background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-dim); font-size: 11.5px; font-weight: 500; box-shadow: none; }
:root .page .layer-button.skeleton-layer { --dot: var(--skeleton); }
:root .page .layer-button.ours-layer { --dot: var(--ours); }
:root .page .layer-button:hover { background: var(--ghost-hover); border-color: var(--line-strong); color: var(--ink); }
:root .page .layer-button.active { background: transparent; border-color: var(--line-strong); color: var(--ink); box-shadow: none; font-weight: 500; }
:root .page .layer-button.active:hover { background: var(--ghost-hover); color: var(--ink); }
:root .page .layer-icon { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--dot); font-size: 0; line-height: 0; flex: 0 0 auto; transition: background .2s; }
:root .page .layer-button.active .layer-icon { background: var(--dot); }
:root .page .layer-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Copy citation */
:root .page .copy-bib { background: transparent; border: 1px solid transparent; color: var(--ink-dim); padding: 6px 10px; }
:root .page .copy-bib:hover { background: var(--ghost-hover); color: var(--ink); border-color: transparent; }

@media (max-width: 640px) {
  :root .page .btn { padding: 8px 11px; font-size: 11.5px; }
  :root .page .gallery-controls { gap: 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  :root .page .tab { white-space: nowrap; font-size: 12px; }
}

/* ===== Ghost playback controls ===== */
:root .page { --pb-ink: var(--ink-dim); --pb-ink-strong: var(--ink); --pb-track: color-mix(in srgb, var(--ink) 14%, transparent); --pb-fill: var(--ink); }
:root .page :is(.comparison-panels, .inline-video-player):fullscreen { --pb-ink: #c9d3cc; --pb-ink-strong: #fff; --pb-track: #ffffff30; --pb-fill: #fff; --ghost-hover: #ffffff1a; }

/* Clusters: no dark capsule, just a row of quiet icons */
:root .page .playback-cluster { gap: 0; padding: 0; border: 0; background: transparent; backdrop-filter: none; }
:root .page .playback-button { width: 30px; height: 30px; min-height: 30px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--pb-ink); transition: background .15s, color .15s; }
:root .page .playback-button:hover { background: var(--ghost-hover); color: var(--pb-ink-strong); }
:root .page .playback-button > svg { width: 15px; height: 15px; }
:root .page .playback-button[data-comparison-play] > svg, :root .page .playback-button[data-video-play] > svg, :root .page .playback-button[data-sequence-play] > svg { width: 14px; height: 14px; }
:root .page .playback-cluster .playback-button:focus-visible, :root .page .playback-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
/* Standalone replay buttons (charts, metrics) get a hairline ring */
:root .page .playback-button:not(.playback-cluster .playback-button) { border-color: var(--line); }
:root .page .playback-button:not(.playback-cluster .playback-button):hover { border-color: var(--line-strong); }

/* Toolbar: controls · seek · time on one line */
:root .page .video-toolbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 10px; margin-top: 6px; }
:root .page .video-toolbar :is(.comparison-playback, .video-controls) { grid-column: 1; grid-row: 1; }
:root .page .video-toolbar .video-seek { grid-column: 2; grid-row: 1; height: 20px; }
:root .page .video-toolbar .video-time { grid-column: 3; grid-row: 1; color: var(--pb-ink); font: 11px/1 var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* Seek bar: thin track, ink fill, small thumb that grows on hover */
:root .page .video-toolbar .video-seek::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: linear-gradient(to right, var(--pb-fill) var(--seek-progress, 0%), var(--pb-track) var(--seek-progress, 0%)); box-shadow: none; }
:root .page .video-toolbar .video-seek::-webkit-slider-thumb { width: 11px; height: 11px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--pb-fill); box-shadow: 0 0 0 3px var(--bg); transition: transform .15s; }
:root .page .video-toolbar .video-seek:hover::-webkit-slider-thumb, :root .page .video-toolbar .video-seek:active::-webkit-slider-thumb { transform: scale(1.25); }
:root .page .video-toolbar .video-seek::-moz-range-track { height: 3px; border-radius: 999px; background: var(--pb-track); box-shadow: none; }
:root .page .video-toolbar .video-seek::-moz-range-progress { height: 3px; border-radius: 999px; background: var(--pb-fill); }
:root .page .video-toolbar .video-seek::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--pb-fill); box-shadow: 0 0 0 3px var(--bg); }
:root .page .video-toolbar .video-seek:disabled { opacity: .45; cursor: default; }
:root .page .video-toolbar .video-seek:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root .page :is(.comparison-panels, .inline-video-player):fullscreen .video-seek::-webkit-slider-thumb { box-shadow: none; }
:root .page :is(.comparison-panels, .inline-video-player):fullscreen .video-seek::-moz-range-thumb { box-shadow: none; }
:root .page .comparison-viewer .video-toolbar .video-seek::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bg-2); }
:root .page .comparison-viewer .video-toolbar .video-seek::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bg-2); }

/* Dataset sequence toolbar */
:root .page .sequence-toolbar { margin-top: 6px; }

/* Measured regional appearance and matched training-scale comparisons. */
.ladder-legend-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0; }
.ladder-model-label { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.ladder-legend-row .ladder-mask-legend { flex-basis: auto; justify-content: flex-end; gap: 6px 12px; margin: 0; font-size: 11px; }
.ladder-conclusion { margin: 18px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-dim); }
.ladder-mask-legend i.hand-overlap { background: #c3d9ea; }
.ladder-mask-legend i.object-overlap { background: #f4d9c3; }
.ladder-mask-legend i.conflict { background: repeating-linear-gradient(135deg, #dc5a7f 0 3px, #7062bb 3px 6px); }
.findings-extension { margin-top: 46px; }
.appearance-details > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; list-style: none; font-size: 14px; color: var(--ink-dim); }
.appearance-details > summary::-webkit-details-marker { display: none; }
.appearance-details > summary:hover { color: var(--ink); border-color: var(--line-strong); }
.appearance-details[open] > summary { color: var(--ink); }
.appearance-summary-label { flex: 1; }
.appearance-metric { font-size: 11px; color: var(--ink-dimmer); }
.appearance-details > summary > svg { flex: 0 0 16px; width: 16px; height: 16px; }
.appearance-details[open] > summary > svg { transform: rotate(90deg); }
.appearance-details > .plot-grid { margin: 20px 0 0; }
:root .page #ladder-tabs { flex-wrap: wrap; }
#ladder-tabs .tab { white-space: nowrap; }
.ladder-gallery { display: block; margin-top: 0; }
.ladder-gallery > .ladder-comparison { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.ladder-gallery .comparison-panels { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 0; }
.ladder-gallery .comparison-panels video { aspect-ratio: 720 / 406; object-fit: contain; }
.scale-dot { background: var(--fig-nano); }
.ladder-playback { grid-column: 1 / -1; margin: 0; }
.ladder-gallery .comparison-panels:fullscreen .ladder-playback { align-self: start; }

@media (max-width: 760px) {
  .findings-extension { margin-top: 34px; }
  .ladder-gallery .comparison-panels { gap: 8px; }
  .ladder-gallery .comparison-panels figcaption { gap: 5px; padding-bottom: 8px; }
  .ladder-gallery .comparison-panels figcaption b { font-size: 11px; }
}

/* SCS metric explainer (Findings) */
.metric-block { padding-top: 28px; margin-bottom: 36px; border-top: 1px solid var(--line); }
.metric-title { font-size: 20px; font-weight: 500; letter-spacing: -.02em; margin-bottom: 12px; }
.metric-title .mono { color: var(--accent); }
.metric-lede { font-size: 15px; line-height: 1.8; color: var(--ink-dim); max-width: 950px; }
.metric-cite { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.metric-details { margin-top: 20px; }
.metric-steps { margin-top: 20px; }
.metric-steps .d b { font-weight: 500; color: var(--ink); }
.metric-block .metric-note { margin: 14px 0 0; }

/* SCS illustration */
.scs-demo { margin: 26px 0 0; padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); }
.scs-controls { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 18px; }
.scs-group { display: flex; align-items: center; gap: 6px; }
.scs-group-label { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dimmer); margin-right: 6px; }
.scs-group .tab { padding: 7px 13px; }
.scs-panels { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.scs-panels figure { min-width: 0; margin: 0; }
.scs-panels figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 34px; padding-bottom: 10px; }
.scs-panels figcaption b { font-size: 13px; font-weight: 500; }
.scs-panels figcaption > span:not(.scs-legend) { font: 9.5px var(--mono); color: var(--ink-dimmer); }
.scs-panels .scs-legend { flex-basis: auto; }
.scs-swatch { width: 9px; height: 9px; border-radius: 2px; }
.scs-swatch.gt { background: #dc5a7f; } .scs-swatch.pr { background: #7062bb; } .scs-swatch.ov { background: #cae5db; }
.scs-panels canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: 4px; background: #171d1c; }
.scs-status { position: absolute; inset: 44px 0 0; background: transparent; padding: 0; display: grid; place-items: center; margin: 0; color: #d3ddd5; font-size: 12px; pointer-events: none; }
.scs-status[hidden] { display: none; }
.scs-score { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.scs-readout { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: start; }
.scs-readout > div { display: flex; flex-direction: column; gap: 4px; }
.scs-k { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dimmer); }
.scs-v { font-size: 30px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.1; }
.scs-total { color: var(--accent); }
.scs-d { font-size: 10.5px; line-height: 1.5; color: var(--ink-dim); }
.scs-play { width: 34px; height: 34px; display: grid; place-items: center; }
.scs-play svg { width: 14px; height: 14px; }
.scs-play .icon-play, .scs-play.paused .icon-pause { display: none; }
.scs-play.paused .icon-play { display: block; }
.scs-bars { width: 100%; height: auto; overflow: visible; }
.scs-bars .scs-grid { stroke: var(--line); stroke-width: 1; }
.scs-bars .scs-tick { font: 9px var(--mono); fill: var(--ink-dimmer); }
.scs-bars .scs-hit { fill: transparent; cursor: pointer; }
.scs-bars .scs-fill { fill: var(--line-strong); transition: fill .15s; }
.scs-bars .scs-bar:hover .scs-fill { fill: var(--ink-dim); }
.scs-bars .scs-bar.active .scs-fill { fill: var(--ink); }
.scs-bars .scs-mean { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
@media (max-width: 900px) {
  .scs-score { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .scs-demo { padding: 14px; }
  .scs-panels { gap: 8px; }
  .scs-panels figcaption { min-height: 0; }
  .scs-panels figcaption > span, .scs-panels .scs-legend { display: none; }
  .scs-panels figcaption b { font-size: 11px; }
  .scs-v { font-size: 24px; }
}
.metric-details .scs-demo { margin: 20px 0 0; }
.scs-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.scs-strip:empty { display: none; }
.scs-strip button { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 4px; padding: 6px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--ink-dim); cursor: pointer; text-align: left; transition: border-color .15s; }
.scs-strip button:hover { border-color: var(--line-strong); }
.scs-strip button.active { border-color: var(--ink); color: var(--ink); }
.scs-strip canvas { grid-column: 1 / -1; display: block; width: 100%; aspect-ratio: 1; border-radius: 3px; }
.scs-strip span { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.scs-strip b { font-size: 15px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .scs-strip { gap: 5px; }
  .scs-strip button { padding: 3px; grid-template-columns: 1fr; }
  .scs-strip span { display: none; }
  .scs-strip b { font-size: 11px; text-align: center; }
}