:root {
  --bg: #000;
  --fg: #f4f4f2;
  --dim: #8d8d8a;
  --faint: #2a2a2a;
  --line: #1c1c1c;
  --certify: #5fe0b0;
  --abstain: #f2b544;
  --blind: #8f9bb3;
  --arm1: #6cc6ff;
  --arm2: #ff8fc0;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
code { font-family: var(--mono); font-size: 0.86em; color: var(--fg); }
button { font: inherit; color: inherit; }

/* ---- header ---- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 6vw;
  background: linear-gradient(#000c, #0000);
  transition: background .3s, padding .3s;
}
.top.solid { background: #000000f0; padding-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.wordmark {
  font-size: 22px; font-weight: 400; letter-spacing: 0.62em; text-decoration: none;
  background: linear-gradient(180deg, #ffffff 0%, #b9b9b9 55%, #6f6f6f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wordmark.small { font-size: 14px; }
.top nav { display: flex; gap: 44px; }
.top nav a {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  font-weight: 400; opacity: 0.85;
}
.top nav a:hover { opacity: 1; }

/* ---- hero ---- */
.hero { position: relative; height: 100vh; min-height: 620px; overflow: hidden; display: grid; place-items: center; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.55) brightness(0.42) contrast(1.05);
}
.hero-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #0000 0%, #000a 60%, #000 100%); }
.hero-text { position: relative; text-align: center; padding: 0 6vw; max-width: 1100px; }
h1 {
  font-weight: 200; font-size: clamp(48px, 8.4vw, 124px); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 28px;
}
.lede { font-size: clamp(17px, 1.6vw, 21px); color: #d6d6d3; max-width: 680px; margin: 0 auto 40px; }
.verdict-key { list-style: none; padding: 0; margin: 0; display: flex; gap: 34px; justify-content: center; flex-wrap: wrap; font-size: 14px; color: var(--dim); }
.verdict-key li { display: flex; align-items: center; gap: 10px; }
.scroll-cue {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: var(--dim);
}
.scroll-cue::after { content: ""; display: block; width: 1px; height: 34px; background: var(--dim); margin: 12px auto 0; }

/* ---- chips ---- */
.chip {
  display: inline-block; font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: 0.14em;
  padding: 4px 9px 3px; border: 1px solid currentColor; border-radius: 2px; line-height: 1.3; white-space: nowrap;
}
.chip.certify { color: var(--certify); }
.chip.abstain { color: var(--abstain); }
.chip.blind { color: var(--blind); }

/* ---- blocks ---- */
.block { padding: 150px 6vw 40px; max-width: 1360px; margin: 0 auto; }
.block.narrow { max-width: 900px; padding-top: 110px; }
.eyebrow { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); margin: 0 0 22px; font-weight: 400; }
h2 { font-weight: 200; font-size: clamp(36px, 5vw, 68px); line-height: 1.06; letter-spacing: -0.015em; margin: 0 0 30px; }
h3 { font-weight: 300; font-size: 30px; margin: 0 0 14px; }
.intro { font-size: 18px; color: #c9c9c6; max-width: 760px; margin: 0 0 56px; }
.fine { font-size: 12.5px; color: var(--dim); margin: 10px 0 0; }

/* ---- watch ---- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs button {
  background: none; border: 1px solid var(--faint); padding: 10px 18px; cursor: pointer;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.tabs button.on { color: var(--fg); border-color: var(--fg); }
.tabs button span { opacity: 0.6; margin-left: 6px; }
.group-note { color: var(--dim); font-size: 14px; margin: 0 0 18px; min-height: 1.5em; max-width: 820px; }
.rail { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 14px; margin-bottom: 30px; scrollbar-width: thin; scrollbar-color: #333 #000; }
.thumb {
  position: relative; flex: 0 0 150px; height: 84px; padding: 0; border: 1px solid transparent; cursor: pointer;
  background: #111 center/cover no-repeat; filter: grayscale(0.4) brightness(0.65); transition: filter .2s, border-color .2s;
}
.thumb:hover { filter: none; }
.thumb.on { filter: none; border-color: var(--fg); }
.thumb i { position: absolute; left: 8px; bottom: 8px; width: 8px; height: 8px; border-radius: 50%; }
.thumb i.certify { background: var(--certify); }
.thumb i.abstain { background: var(--abstain); }
.thumb i.blind { background: var(--blind); }
.thumb.nothing { filter: grayscale(1) brightness(0.45); }
.thumb.nothing::after {
  content: "frames missing"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: #ddd;
  background: repeating-linear-gradient(135deg, #0000 0 6px, #0008 6px 12px);
}
.thumb.nothing:hover, .thumb.nothing.on { filter: grayscale(1) brightness(0.7); }

.stage { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.screen { position: relative; aspect-ratio: 16 / 9; background: #050505; overflow: hidden; }
.screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.screen video.ghosted { opacity: 0.35; filter: grayscale(1); }
.screen-top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; gap: 14px; align-items: center; }
.screen-top .chip { background: #000b; }
.screen-label { font-size: 13px; color: #e6e6e3; text-shadow: 0 1px 4px #000; }
.missing {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 64px 22px 22px;
}
.missing div {
  border: 1px dashed #6a6a6a; display: grid; place-items: center; font-family: var(--mono); font-size: 10.5px; color: #d8d8d5;
  background: #000a;
}
.missing div.trunc { border-style: solid; border-color: #555; background: linear-gradient(#ffffff14 0 38%, #000c 38%); }
.controls { display: flex; align-items: center; gap: 18px; margin: 14px 0 26px; flex-wrap: wrap; }
.controls button, .ghost {
  background: none; border: 1px solid var(--faint); padding: 7px 14px; cursor: pointer; font-size: 12px; letter-spacing: 0.08em;
}
.speeds { display: flex; }
.speeds button { border-right-width: 0; }
.speeds button:last-child { border-right-width: 1px; }
.speeds button.on { background: var(--fg); color: #000; border-color: var(--fg); }
.clock { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.ghost:hover, .controls button:hover { border-color: var(--fg); }

.robot { margin: 0; }
.robot figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; color: #cfcfcc; margin-bottom: 10px; }
.legend { color: var(--dim); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.legend i { display: inline-block; width: 18px; height: 2px; margin-left: 10px; }
.l-arm1 { background: var(--arm1); }
.l-arm2 { background: var(--arm2); }
.l-rec { background: repeating-linear-gradient(90deg, #bbb 0 4px, #0000 4px 7px); }
.robot canvas { width: 100%; height: 200px; display: block; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.evidence { border-left: 1px solid var(--line); padding-left: 34px; position: sticky; top: 100px; }
.outcome { font-size: 46px; font-weight: 200; letter-spacing: 0.06em; line-height: 1; margin-bottom: 12px; }
.outcome.certify { color: var(--certify); }
.outcome.abstain { color: var(--abstain); }
.outcome.blind { color: var(--blind); }
.reviewed { font-size: 13px; color: var(--dim); margin: 0 0 24px; }
.codes { margin: 0 0 26px; }
.codes dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-top: 14px; }
.codes dd { margin: 4px 0 0; font-size: 14px; }
.codes dd code { display: block; margin-bottom: 3px; }
.codes dd span { color: #b5b5b2; font-size: 13px; }
.score { margin-bottom: 13px; }
.score-head { display: flex; justify-content: space-between; font-size: 12.5px; color: #cfcfcc; }
.score-head code { font-size: 11.5px; color: var(--dim); }
.score-bar { height: 3px; background: var(--faint); margin-top: 6px; position: relative; }
.score-bar b { position: absolute; inset: 0 auto 0 0; background: var(--fg); }
.pipeline { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 22px 0 20px; font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.pipeline span::before { content: "●"; color: var(--certify); margin-right: 5px; font-size: 8px; vertical-align: 1px; }
.provenance { font-size: 11.5px; color: var(--dim); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 22px; word-break: break-word; }

/* ---- compare ---- */
.pair-pick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.pair-pick button {
  background: none; border: 1px solid var(--faint); padding: 8px 14px; cursor: pointer; font-size: 12px; color: var(--dim);
}
.pair-pick button.on { color: var(--fg); border-color: var(--fg); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.pair figure { margin: 0; }
.pair video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #050505; filter: brightness(0.9); }
.pair figcaption { display: flex; gap: 14px; align-items: baseline; margin-top: 14px; font-size: 14px; color: #cfcfcc; }
.tag { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.pair-verdict { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 34px 0 34px; font-size: 14px; color: #cfcfcc; }
.pair-verdict > span:first-child { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }

/* ---- how ---- */
.beats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-bottom: 90px; }
.beats p { color: #bdbdba; font-size: 15.5px; }
.beats > div { border-top: 1px solid #333; padding-top: 26px; }
.trace-title { font-size: 14px; letter-spacing: 0.04em; color: #cfcfcc; margin: 0 0 16px; }
.trace-title span { color: var(--dim); font-family: var(--mono); font-size: 12px; margin-left: 10px; }
.trace-bar { display: flex; height: 44px; background: #0c0c0c; }
.trace-bar div {
  height: 100%; display: flex; align-items: center; padding-left: 14px; font-family: var(--mono); font-size: 12px; color: #000;
  background: linear-gradient(90deg, #e9e9e6, #a9a9a6); white-space: nowrap; overflow: hidden;
}
.trace-bar div.small { background: var(--certify); padding: 0; min-width: 4px; }
.trace-rest { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--dim); }

/* ---- results ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.stat { border-top: 1px solid #333; padding-top: 26px; }
.stat b { display: block; font-weight: 200; font-size: clamp(44px, 5vw, 76px); line-height: 1; letter-spacing: -0.02em; margin-bottom: 16px; }
.stat span { display: block; font-size: 14.5px; color: #bdbdba; }
#stats-note { margin-top: 40px; max-width: 820px; }

/* ---- limits / credits ---- */
.limits { padding: 0; margin: 0; list-style: none; }
.limits li { padding: 18px 0; border-top: 1px solid var(--line); color: #d0d0cd; font-size: 17px; }
.credit { color: #a9a9a6; font-size: 14px; }
.credit a { color: #d0d0cd; }
.foot { display: flex; justify-content: space-between; align-items: center; padding: 70px 6vw 50px; color: var(--dim); font-size: 12px; letter-spacing: 0.08em; }

/* ---- reveal on scroll ---- */
.fade { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.fade.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade { opacity: 1; transform: none; transition: none; }
}

/* ---- small screens ---- */
@media (max-width: 1000px) {
  .stage { grid-template-columns: 1fr; }
  .evidence { position: static; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 30px; }
  .beats, .stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .top nav { display: none; }
  .pair, .beats, .stats { grid-template-columns: 1fr; }
  .block { padding-top: 100px; }
  .missing { grid-template-columns: repeat(4, 1fr); padding-top: 56px; }
}