:root {
  --paper:#f8f7f3;
  --ink:#182a32;
  --muted:#69777c;
  --line:#dce1df;
  --blue:#287ca8;
  --orange:#c58026;
  --purple:#8565b6;
  --radius:16px;
  --sans:Inter,"Segoe UI",Arial,sans-serif;
  --body-font:"Times New Roman",Times,serif;
  --serif:Georgia,"Times New Roman",serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button,select,input {
  font:inherit
}
button,a,select {
  touch-action:manipulation
}
button {
  cursor:pointer
}
img {
  display:block;
  width:100%;
  height:auto
}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:5px
}
h1,h2,h3,p {
  margin:0
}
p,.scene-caption,.source-note,.results-note {
  font-family:var(--body-font)
}
h2 {
  font-size:clamp(30px,3.3vw,42px);
  font-weight:500;
  letter-spacing:-1.5px;
  line-height:1.16
}
h3 {
  font-size:22px;
  font-weight:600;
  letter-spacing:-.3px;
  line-height:1.35
}
sup {
  line-height:0
}
.section-shell {
  max-width:1160px;
  margin:auto;
  padding-left:32px;
  padding-right:32px
}
.site-header {
  max-width:1260px;
  margin:auto;
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 44px;
  border-bottom:1px solid var(--line)
}
.wordmark {
  font-size:26px;
  font-weight:700;
  letter-spacing:-1px;
  display:inline-flex;
  align-items:baseline;
  line-height:1.2
}
.wordmark sup {
  font-size:16px;
  position:relative;
  top:-.55em
}
.wordmark>span:not(.brand-dot) {
  font-weight:400
}
.brand-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
  margin-left:6px
}
.site-header nav {
  display:flex;
  gap:32px;
  font-size:16px;
  font-weight:500
}
.site-header nav a {
  transition:color .15s
}
.site-header nav a:hover {
  color:var(--blue)
}
.skip-link {
  position:absolute;
  top:-80px;
  left:20px;
  background:var(--ink);
  color:white;
  z-index:10;
  padding:12px
}
.skip-link:focus {
  top:12px
}
.hero {
  padding-top:56px;
  padding-bottom:62px
}
.eyebrow {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:14px;
  letter-spacing:.65px
}
.status-dot {
  width:6px;
  height:6px;
  background:#7e958a;
  border-radius:50%
}
.eyebrow-line {
  height:12px;
  width:1px;
  background:var(--line);
  margin:0 4px
}
.hero h1 {
  text-align:center;
  font-size:clamp(72px,10.2vw,122px);
  letter-spacing:-7px;
  font-weight:650;
  line-height:1;
  margin:29px 0 21px
}
.hero h1 sup {
  font-size:.48em;
  position:relative;
  top:-.65em;
  margin-left:2px
}
.hero h1>span {
  font-weight:350
}
.paper-title {
  max-width:850px;
  margin:auto;
  text-align:center;
  font-size:22px;
  font-weight:450;
  line-height:1.5;
  letter-spacing:-.2px
}
.hero-message {
  text-align:center;
  font-family:var(--serif);
  font-size:32px;
  line-height:1.24;
  letter-spacing:-.7px;
  margin:24px 0
}
.hero-message>span {
  font-style:italic;
  color:var(--blue)
}
.resource-links {
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap
}
.resource-button {
  min-width:146px;
  min-height:48px;
  padding:12px 18px;
  border:1px solid #d4dcda;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:transparent;
  box-shadow:0 1px 2px #182a3205;
  line-height:1.2;
  color:var(--ink);
  transition:border-color .15s, color .15s, box-shadow .15s
}
.resource-button svg {
  flex-shrink:0;
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.resource-icon {
  width:20px;
  height:20px
}
.resource-button strong {
  font-size:16px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap
}
.resource-arrow {
  width:13px;
  height:13px;
  color:var(--muted)
}
.resource-button:hover {
  border-color:var(--blue);
  color:var(--blue);
  box-shadow:0 2px 7px #182a320d
}
.hero-stream {
  margin-top:42px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:20px 22px 13px;
  box-shadow:0 12px 30px #20303905
}
.stream-topline,.stream-footnote {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
.micro {
  font-size:13px;
  font-weight:600;
  letter-spacing:1.1px;
  color:var(--muted)
}
.hero-scenes {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin:18px 0 20px
}
.perception {
  --accent:var(--blue);
  --tint:#eff7fa
}
.prediction {
  --accent:var(--orange);
  --tint:#fcf5eb
}
.intervention {
  --accent:var(--purple);
  --tint:#f5f0fa
}
.hero-scene {
  display:block;
  min-width:0
}
.scene-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--accent);
  font-size:16px;
  font-weight:600;
  margin-bottom:9px
}
.scene-icon {
  display:inline-flex;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
}
.scene-icon img {
  width:24px;
  height:24px;
}
.scene-image {
  position:relative;
  overflow:hidden;
  border-radius:7px;
  background:#dfe3e2
}
.scene-image img {
  aspect-ratio:16/9;
  object-fit:cover;
  transition:transform .3s
}
.hero-scene:hover .scene-image img {
  transform:scale(1.035)
}
.frame-time {
  position:absolute;
  bottom:9px;
  right:9px;
  border-radius:4px;
  background:#182a32d9;
  color:white;
  padding:3px 6px;
  font-size:13px;
  font-variant-numeric:tabular-nums
}
.mini-timeline {
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:15px 2px 13px;
  height:6px
}
.mini-timeline:before {
  content:"";
  height:1px;
  background:#ced8d9;
  position:absolute;
  left:0;
  right:0
}
.mini-timeline i {
  border:1px solid #b9c6c9;
  border-radius:50%;
  width:5px;
  height:5px;
  background:white;
  position:relative
}
.mini-timeline i.active {
  width:9px;
  height:9px;
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--tint)
}
.hero-scene p {
  font-size:20px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.3px
}
.scene-caption {
  display:block;
  font-size:14px;
  color:var(--muted);
  margin-top:4px
}
.stream-footnote {
  border-top:1px solid #edf0ee;
  padding-top:12px;
  font-size:13px;
  color:var(--muted)
}
.abstract {
  display:grid;
  grid-template-columns:.85fr 1.6fr;
  gap:75px;
  padding-top:48px;
  padding-bottom:60px;
  border-top:1px solid var(--line)
}
.section-number {
  font-size:13px;
  font-weight:600;
  letter-spacing:1.5px;
  color:var(--muted);
  display:block;
  margin-bottom:17px
}
.abstract h2 {
  font-size:33px;
  letter-spacing:-1px
}
.abstract-text {
  font-size:18px;
  line-height:1.9;
  color:#45565e
}
.source-note {
  display:block;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  margin-top:16px
}
.section-block {
  padding-top:78px;
  padding-bottom:78px
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:34px
}
.section-heading h2 {
  max-width:680px
}
.section-heading>p {
  color:var(--muted);
  font-size:16px;
  line-height:1.8;
  min-width:240px
}
.case-tabs {
  display:flex;
  gap:10px;
  margin-bottom:0
}
.case-tabs button {
  border:1px solid var(--line);
  border-radius:8px 8px 0 0;
  padding:14px 22px;
  color:var(--muted);
  background:transparent;
  font-size:14px;
  display:flex;
  gap:16px;
  align-items:center;
  position:relative;
  top:1px
}
.case-tabs button span {
  font-size:18px;
  font-weight:500
}
.case-tabs button[aria-selected=true] {
  background:white;
  border-bottom-color:white;
  color:var(--blue);
  z-index:1
}
.case-tabs button:nth-child(2)[aria-selected=true] {
  color:var(--orange)
}
.case-tabs button:nth-child(3)[aria-selected=true] {
  color:var(--purple)
}
.case-panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:0 12px 12px 12px;
  padding:30px;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:38px;
  min-height:405px
}
.case-copy {
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.case-copy>.micro {
  color:var(--accent)
}
.case-copy h3 {
  font-family:var(--serif);
  font-size:34px;
  line-height:1.15;
  font-weight:400;
  letter-spacing:-.65px;
  margin:14px 0 22px
}
.instruction {
  width:100%;
  border-left:2px solid var(--accent);
  padding:6px 0 6px 15px;
  margin-bottom:24px
}
.instruction small {
  font-size:12px;
  color:var(--muted);
  letter-spacing:1px;
  display:block;
  margin-bottom:5px
}
.instruction p {
  font-size:16px;
  line-height:1.7
}
.target-response {
  background:var(--tint);
  border-radius:8px;
  padding:14px 16px;
  width:100%;
  margin-top:auto
}
.target-response .micro {
  color:var(--accent);
  font-size:12px
}
.target-response p {
  font-size:16px;
  line-height:1.6;
  margin-top:6px
}
.case-stage {
  min-width:0
}
.case-photo {
  position:relative;
  background:#182a32;
  border-radius:8px;
  overflow:hidden
}
.case-photo img {
  aspect-ratio:16/9;
  object-fit:contain;
  width:100%;
  height:auto
}
.case-photo .frame-time {
  font-size:16px
}
.case-photo .state-pill {
  position:absolute;
  left:12px;
  top:12px;
  padding:4px 8px;
  font-size:12px;
  font-weight:600;
  background:#ffffffed;
  border-radius:4px;
  color:var(--accent)
}
.time-nodes {
  display:flex;
  margin:18px 0 0;
  gap:8px;
  position:relative
}
.time-nodes:before {
  content:"";
  height:1px;
  background:var(--line);
  position:absolute;
  left:12%;
  right:12%;
  top:9px
}
.time-node {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:0 0 2px;
  background:transparent;
  border:none;
  text-align:center;
  color:var(--muted);
  position:relative;
  font-size:14px
}
.time-node:before {
  content:"";
  display:block;
  width:7px;
  height:7px;
  background:white;
  border:1px solid #aebec2;
  border-radius:50%;
  margin:6px auto 11px;
  position:relative
}
.time-node[aria-pressed=true]:before {
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--tint)
}
.time-node[aria-pressed=true] {
  color:var(--accent);
  font-weight:600
}
.time-node small {
  display:block;
  font-size:12px;
  font-weight:400;
  margin-top:2px
}
.frame-description {
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
  margin-top:12px;
  min-height:35px
}
.benchmark-wrap {
  background:#eef2f1;
  border-top:1px solid #e6ebe8;
  border-bottom:1px solid #e6ebe8
}
.stat-strip {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:42px 0 50px
}
.stat-strip>div {
  border-left:1px solid #cfd8d5;
  padding:0 26px
}
.stat-strip>div:first-child {
  padding-left:0;
  border:0
}
.stat-strip strong {
  display:block;
  font-size:52px;
  font-weight:400;
  letter-spacing:-2px;
  line-height:1.1
}
.stat-strip span {
  font-size:14px;
  color:var(--muted);
  display:block;
  margin-top:10px
}
.dataset-viz {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:42px
}
.chart-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:22px
}
.chart-heading h3 {
  font-size:19px
}
.chart-heading .micro {
  font-size:11px
}
.composition-main {
  display:flex;
  align-items:center;
  gap:26px;
  padding-top:18px
}
.donut {
  width:174px;
  height:174px;
  border-radius:50%;
  flex-shrink:0;
  display:grid;
  place-items:center;
  transform:rotate(-90deg)
}
.donut>div {
  transform:rotate(90deg);
  background:#eef2f1;
  border-radius:50%;
  width:130px;
  height:130px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center
}
.donut strong {
  font-size:37px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:-1px
}
.donut span {
  font-size:13px;
  color:var(--muted)
}
#task-legend {
  flex:1;
  min-width:0
}
.legend-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  margin:12px 0;
  gap:10px
}
.legend-name {
  display:flex;
  align-items:center;
  gap:8px
}
.legend-name i {
  height:6px;
  width:6px;
  border-radius:50%;
  flex-shrink:0
}
.legend-row strong {
  font-size:14px;
  font-weight:500;
  white-space:nowrap
}
.legend-row strong small {
  font-size:12px;
  color:var(--muted);
  margin-left:5px
}
.duration-key {
  display:flex;
  justify-content:flex-end;
  gap:14px;
  font-size:12px;
  color:var(--muted);
  margin-top:-12px;
  margin-bottom:8px
}
.duration-row {
  margin:10px 0 14px
}
.duration-row-head {
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:13px;
  align-items:center
}
.duration-row-head span:last-child {
  font-size:12px;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
.duration-range {
  position:relative;
  height:12px;
  border-bottom:1px solid #dce3e0
}
.duration-range .range-line {
  position:absolute;
  height:2px;
  top:7px;
  background:var(--color);
  min-width:2px
}
.range-line:before,.range-line:after {
  content:"";
  position:absolute;
  top:-2px;
  width:1px;
  height:6px;
  background:var(--color)
}
.range-line:after {
  right:0
}
.median-dot {
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  top:5px;
  background:var(--color)
}
.construction {
  border-top:1px solid #d5dfdb;
  margin-top:34px;
  padding-top:24px;
  display:grid;
  gap:18px;
}
.construction-heading { min-width:0; }
.construction-heading h3 {
  margin:0;
  font-size:23px;
  line-height:1.4;
  font-weight:500;
}
.quality-highlights {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  list-style:none;
  margin:0;
  padding:0;
}
.quality-highlights li {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:16px;
  padding:13px 16px;
  background:#f7faf8;
  border:1px solid #d5dfdb;
  border-radius:8px;
}
.quality-highlights svg {
  fill:none;
  stroke:var(--blue);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}
.quality-highlights svg { width:18px; height:18px; }
.protocol {
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
  overflow:hidden
}
.evaluation-context {
  padding:20px 30px;
  display:flex;
  align-items:center;
  gap:18px;
}
.evaluation-context .micro { white-space:nowrap; }
.evaluation-context p {
  font-size:16px;
  color:#52646a;
  line-height:1.7;
}
.scoring {
  border-top:1px solid var(--line);
  padding:28px 30px 30px;
  background:#fbfcfb;
}
.scoring-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:24px;
}
.scoring-heading h3 { font-size:24px; }
.scoring-heading h3 span { font-weight:400; color:var(--muted); }
.score-scale {
  font-size:13px;
  color:var(--blue);
  white-space:nowrap;
  border:1px solid #d6e4e8;
  padding:5px 9px;
  border-radius:5px;
}
.prs-variants {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
.prs-variant {
  min-width:0;
  padding:22px;
  background:white;
  border:1px solid var(--line);
  border-radius:8px;
}
.prs-variant-heading { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.prs-variant h5 { color:var(--blue); }
.prs-variant-heading span { font-size:13px; color:var(--muted); }
.prs-variant h5, .prs-stage-heading h4 { margin:0; font-size:18px; font-weight:600; }
.prs-variant p, .prs-shared p, .prs-symbols, .prs-overview, .prs-stage-intro { color:#52646a; font-size:16px; line-height:1.7; }
.prs-variant-heading + p { margin-top:12px; }
.prs-overview { margin:0 0 24px; }
.prs-stage-heading { display:flex; align-items:center; gap:10px; }
.prs-step-number {
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  flex-shrink:0;
  border-radius:50%;
  background:#eaf3f6;
  color:var(--blue);
  font-size:12px;
}
.prs-stage-intro { margin-top:12px; }
.prs-variant strong, .prs-shared strong { color:var(--ink); font-weight:600; }
.prs-variant .prs-exception { margin-top:12px; border-left:2px solid #c7dce3; padding-left:12px; }
.prs-equation {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:18px 0;
  min-height:56px;
}
.prs-equation math {
  font-family:"Cambria Math","STIX Two Math","Latin Modern Math",serif;
  font-size:24px;
  math-style:normal;
}
.prs-symbols { margin:16px 0 0; }
.prs-shared {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
}
.prs-shared article { min-width:0; }
.prs-shared .prs-equation { margin:16px 0; min-height:68px; }
.prs-shared .prs-equation math { font-size:22px; }
.prs-sample { margin-top:24px; padding-top:24px; border-top:1px solid var(--line); }
.results-panel {
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
  padding:26px 30px 18px
}
.results-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.results-toolbar label[for] {
  font-size:12px;
  letter-spacing:1px;
  color:var(--muted);
  margin-right:13px
}
.results-toolbar select {
  border:1px solid var(--line);
  border-radius:6px;
  padding:8px 30px 8px 12px;
  font-size:16px;
  background:#fbfcfb;
  color:var(--ink);
  max-width:100%
}
.metric-switch {
  border:0;
  padding:3px;
  margin:0;
  background:#eef2f1;
  border-radius:6px;
  display:flex;
  gap:3px
}
.metric-switch label {
  position:relative;
  cursor:pointer
}
.metric-switch input {
  position:absolute;
  opacity:0;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer
}
.metric-switch span {
  display:block;
  padding:6px 14px;
  font-size:14px;
  border-radius:4px
}
.metric-switch input:checked+span {
  background:var(--ink);
  color:white
}
.metric-switch input:focus-visible+span {
  outline:3px solid var(--blue);
  outline-offset:3px
}
.chart-legend {
  display:flex;
  gap:22px;
  font-size:13px;
  color:var(--muted);
  margin:24px 0 20px;
  flex-wrap:wrap
}
.chart-legend span {
  display:flex;
  align-items:center;
  gap:7px
}
.chart-legend span:before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--bar)
}
.offline {
  --bar:#6196ae
}
.native {
  --bar:#a293ba
}
.ours {
  --bar:#293f49
}
.chart-axis {
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:var(--muted);
  margin:0 0 10px;
  padding-bottom:9px;
  border-bottom:1px solid #e7ece9
}
#ranking-chart {
  display:flex;
  flex-direction:column;
  gap:7px
}
.ranking-row {
  display:grid;
  grid-template-columns:210px 1fr 45px;
  gap:16px;
  align-items:center;
  min-height:28px
}
.ranking-name {
  font-size:14px;
  line-height:1.3
}
.ranking-name small {
  font-size:11px;
  font-weight:500;
  background:#e9efed;
  color:#58686e;
  padding:2px 5px;
  border-radius:3px;
  margin-left:5px
}
.bar-track {
  height:13px;
  background:repeating-linear-gradient(to right,#f6f7f6 0,#f6f7f6 calc(25% - 1px),#e4e9e6 calc(25% - 1px),#e4e9e6 25%);
  border-radius:2px;
  overflow:hidden
}
.bar-fill {
  height:100%;
  background:var(--bar);
  border-radius:2px;
  transition:width .3s
}
.ranking-row.ours .ranking-name {
  font-weight:650
}
.ranking-score {
  font-size:16px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  text-align:right
}
.results-note {
  border-top:1px solid #e7ece9;
  margin-top:18px;
  padding-top:14px;
  font-size:12px;
  color:var(--muted);
  line-height:1.8
}
.findings {
  margin-top:42px;
}
.findings > article + article { border-top:1px solid var(--line); margin-top:32px; padding-top:32px; }
.finding-index {
  font-size:13px;
  letter-spacing:1px;
  color:var(--muted);
  display:block;
  margin-bottom:12px
}
.findings h3 {
  font-size:24px;
  margin-bottom:14px;
}
.findings p {
  font-size:16px;
  color:var(--muted);
  line-height:1.85
}
.findings p + p { margin-top:14px; }
.finding-summary > p { max-width:100ch; }
.finding-with-chart {
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:32px;
  align-items:start;
}
.finding-copy { min-width:0; }
.analysis-figure {
  margin:0;
  padding:22px;
  min-width:0;
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
}
.analysis-figure h4 { font-size:18px; line-height:1.45; margin:0 0 8px; font-weight:600; }
.analysis-scope { display:block; font-size:12px; line-height:1.6; color:var(--muted); }
.findings .source-note, .analysis-figure figcaption {
  font-family:var(--body-font);
  font-size:13px;
  color:var(--muted);
  line-height:1.65;
}
.analysis-figure figcaption { border-top:1px solid #e7ece9; margin-top:20px; padding-top:12px; }
.frequency-legend { display:flex; flex-wrap:wrap; gap:8px 14px; margin:18px 0 20px; }
.frequency-legend > span { display:flex; align-items:center; gap:6px; font-size:13px; }
.frequency-legend i { width:10px; height:10px; border-radius:2px; }
.frequency-row + .frequency-row { margin-top:18px; }
.frequency-model { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:3px 10px; margin-bottom:7px; }
.frequency-model strong { font-size:14px; font-weight:500; }
.frequency-model > span { font-size:12px; color:var(--muted); }
.frequency-bar { display:flex; height:30px; border-radius:5px; overflow:hidden; }
.frequency-bar > span { display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; border-right:1px solid white; }
.frequency-bar > span:last-child { border-right:0; }
.context-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:22px; }
.context-panel { min-width:0; }
.context-panel h5 { font-size:14px; font-weight:600; margin:0 0 12px; }
.context-axis { display:flex; justify-content:space-between; margin:0 48px 7px 70px; font-size:12px; color:var(--muted); }
.context-row { display:grid; grid-template-columns:62px minmax(0,1fr) 40px; gap:8px; align-items:center; min-height:33px; font-size:13px; }
.context-row strong { text-align:right; font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; }
.context-track { height:15px; background:repeating-linear-gradient(to right,#f0f3f2 0,#f0f3f2 calc(50% - 1px),#dfe6e3 calc(50% - 1px),#dfe6e3 50%); }
.context-track i { display:block; height:100%; border-radius:0 2px 2px 0; }
.findings p strong {
  font-weight:600;
  color:var(--ink)
}
.assistant-wrap {
  background:#edf1f3;
  border-top:1px solid #e1e7e9;
  border-bottom:1px solid #e1e7e9
}
.training-stages {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin:38px 0
}
.training-stage {
  position:relative;
  border-left:1px solid #cfd8dc;
  padding:0 34px
}
.training-stage:first-child {
  border:0;
  padding-left:0
}
.training-stage .micro {
  font-size:13px
}
.training-stage .stage-score {
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:10px 0 2px
}
.stage-score strong {
  font-weight:400;
  font-size:52px;
  letter-spacing:-2px;
  line-height:1.2
}
.stage-score span {
  font-size:13px;
  color:var(--muted)
}
.training-stage p {
  font-size:14px;
  color:var(--muted)
}
.training-stage:not(:last-child):after {
  content:"→";
  position:absolute;
  right:25px;
  top:28px;
  font-size:27px;
  color:#9ba9af
}
.training-stage:last-child strong {
  color:var(--blue)
}
.training-detail {
  display:grid;
  grid-template-columns:.85fr 1.3fr;
  gap:80px;
  border-top:1px solid #d5dde1;
  padding-top:30px
}
.training-detail h3 {
  font-size:23px
}
.training-detail p {
  font-size:16px;
  color:var(--muted);
  line-height:1.8;
  margin-top:12px
}
.training-table-wrap {
  min-width:0
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  text-align:right
}
th,td {
  padding:9px 12px;
  border-bottom:1px solid #d9e0e3;
  font-variant-numeric:tabular-nums
}
th {
  font-size:13px;
  font-weight:500;
  color:var(--muted)
}
th:first-child,td:first-child {
  text-align:left;
  padding-left:0
}
td:last-child {
  font-weight:600;
  color:var(--blue)
}
tbody tr:last-child td {
  border:0
}
.failure {
  padding:28px 0 32px;
  border-top:1px solid var(--line)
}
.failure-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:14px
}
.failure-header .micro {
  margin-bottom:8px;
  display:block;
  color:var(--accent)
}
.failure-header h3 {
  font-family:var(--serif);
  font-size:29px;
  font-weight:400;
  letter-spacing:-.5px
}
.failure-model {
  font-size:13px;
  color:var(--muted);
  text-align:right
}
.failure-instruction {
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  margin-bottom:17px
}
.failure-frames {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px
}
.failure-frames figure {
  margin:0;
  min-width:0
}
.failure-frames img {
  border-radius:5px;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#e2e5e4
}
.failure-frames figcaption {
  font-size:12px;
  line-height:1.6;
  margin-top:7px;
  color:var(--muted)
}
.failure-frames figcaption strong {
  font-weight:500;
  color:var(--ink)
}
.trace-comparison {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:17px
}
.trace-comparison>div {
  padding:13px 16px;
  border-radius:6px;
  background:#eef4f2
}
.trace-comparison>div:last-child {
  background:#f1eff5
}
.trace-comparison .micro {
  font-size:12px;
  color:#4e7a6c
}
.trace-comparison>div:last-child .micro {
  color:var(--purple)
}
.trace-comparison p {
  font-size:14px;
  line-height:1.7;
  margin-top:5px
}
.failure-takeaway {
  font-size:14px;
  color:var(--muted);
  margin-top:13px;
  display:flex;
  align-items:center;
  gap:8px
}
.failure-takeaway:before {
  content:"↳";
  color:var(--accent);
  font-size:18px
}
.resources-section {
  text-align:center;
  padding-top:60px;
  padding-bottom:78px;
  border-top:1px solid var(--line)
}
.resources-section h2 {
  font-size:44px;
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-1.5px
}
.resources-section>p {
  font-size:16px;
  color:var(--muted);
  margin:18px 0 25px
}
.resources-section>.source-note {
  margin-top:25px
}
footer {
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:28px;
  padding-bottom:28px
}
footer .wordmark {
  font-size:23px
}
footer p,footer>a:last-child {
  font-size:13px;
  color:var(--muted)
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.noscript-message {
  margin:30px;
  padding:20px;
  background:#fcf5eb;
  font-size:16px
}
@media(min-width:1600px) {
  .hero {
    padding-top:70px
  }
  .hero-stream {
    margin-top:52px
  }
}
@media(max-width:1000px) {
  .section-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:18px
  }
  .section-heading>p {
    min-width:0
  }
  .section-heading>p br {
    display:none
  }
  .abstract {
    gap:40px
  }
  .dataset-viz {
    gap:30px
  }
  .composition-main {
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding-top:0
  }
  #task-legend {
    width:100%
  }
  .donut {
    align-self:center
  }
  .training-detail {
    gap:40px
  }
  .hero-scenes {
    gap:15px
  }
  .hero-scene p {
    font-size:18px
  }
  .case-panel {
    gap:24px;
    padding:24px;
    grid-template-columns:1fr 1.25fr
  }
  .case-copy h3 {
    font-size:30px
  }
  .ranking-row {
    grid-template-columns:190px 1fr 40px;
    gap:12px
  }
  .site-header nav {
    gap:22px
  }
  .scoring {
    gap:25px
  }
  .finding-with-chart { grid-template-columns:1fr; gap:24px; }
}
@media(max-width:700px) {
  html {
    scroll-padding-top:24px
  }
  .section-shell {
    padding-left:22px;
    padding-right:22px
  }
  .site-header {
    height:70px;
    padding:0 22px
  }
  .site-header .wordmark {
    font-size:24px
  }
  .site-header nav {
    gap:17px;
    font-size:14px
  }
  .site-header nav a:first-child,.site-header nav a:last-child {
    display:none
  }
  .hero {
    padding-top:37px;
    padding-bottom:44px
  }
  .eyebrow {
    font-size:12px;
    letter-spacing:.5px;
    flex-wrap:wrap;
    gap:7px
  }
  .eyebrow-line {
    display:none
  }
  .hero h1 {
    font-size:78px;
    letter-spacing:-4.5px;
    margin:28px 0 20px
  }
  .paper-title {
    font-size:18px;
    line-height:1.65;
    letter-spacing:0
  }
  .desktop-break {
    display:none
  }
  .hero-message {
    font-size:26px;
    margin:23px 0
  }
  .resource-links {
    gap:7px
  }
  .resource-button {
    min-width:0;
    padding:10px 12px;
    gap:7px
  }
  .resource-button strong {
    font-size:14px
  }
  .hero-stream {
    margin-top:32px;
    padding:16px 15px 12px;
    border-radius:12px
  }
  .stream-topline .micro {
    font-size:11px;
    letter-spacing:.65px
  }
  .stream-topline>.micro:last-child {
    display:none
  }
  .hero-scenes {
    grid-template-columns:1fr;
    gap:22px;
    margin-top:18px;
    margin-bottom:18px
  }
  .hero-scene {
    display:grid;
    grid-template-columns:114px 1fr;
    column-gap:15px;
    position:relative
  }
  .scene-heading {
    grid-column:2;
    font-size:13px;
    margin:1px 0 5px;
    align-items:flex-start
  }
  .scene-icon {
    font-size:18px
  }
  .scene-image {
    grid-row:1/5;
    grid-column:1;
    align-self:start
  }
  .scene-image img {
    height:83px;
    aspect-ratio:auto;
    object-fit:cover
  }
  .frame-time {
    font-size:11px;
    bottom:5px;
    right:5px;
    padding:2px 4px
  }
  .hero-scene p {
    font-size:18px;
    grid-column:2;
    grid-row:2
  }
  .scene-caption {
    font-size:12px;
    grid-column:2;
    grid-row:3;
    margin-top:2px
  }
  .mini-timeline {
    grid-column:2;
    grid-row:4;
    margin:8px 0 0;
    height:6px
  }
  .stream-footnote {
    font-size:11px;
    gap:8px;
    align-items:flex-start
  }
  .stream-footnote>span:last-child {
    max-width:140px;
    text-align:right
  }
  .abstract {
    grid-template-columns:1fr;
    gap:22px;
    padding-top:34px;
    padding-bottom:30px
  }
  .abstract h2 {
    font-size:30px
  }
  .abstract h2 br {
    display:none
  }
  .abstract-text {
    font-size:16px;
    line-height:1.85
  }
  .section-number {
    font-size:12px;
    margin-bottom:12px
  }
  .section-block {
    padding-top:49px;
    padding-bottom:49px
  }
  h2 {
    font-size:32px;
    letter-spacing:-1px
  }
  .section-heading {
    margin-bottom:25px;
    gap:14px
  }
  .section-heading>p {
    font-size:14px
  }
  .case-tabs {
    gap:5px
  }
  .case-tabs button {
    padding:12px 11px;
    font-size:12px;
    gap:7px;
    flex:1;
    justify-content:center
  }
  .case-tabs button span {
    font-size:14px
  }
  .case-panel {
    padding:21px;
    grid-template-columns:1fr;
    gap:22px;
    border-radius:0 0 10px 10px
  }
  .case-copy h3 {
    font-size:30px;
    margin:10px 0 15px
  }
  .instruction {
    margin-bottom:16px
  }
  .instruction p {
    font-size:16px
  }
  .target-response p {
    font-size:16px
  }
  .case-stage {
    grid-row:2
  }
  .case-copy {
    display:contents
  }
  .case-copy>.micro {
    grid-row:1
  }
  .case-copy h3 {
    grid-row:2;
    margin:-10px 0 -4px
  }
  .case-copy .instruction {
    grid-row:3;
    margin-bottom:0
  }
  .case-stage {
    grid-row:4
  }
  .target-response {
    grid-row:5
  }
  .case-panel {
    gap:16px
  }
  .case-photo img {
    aspect-ratio:4/3;
    max-height:290px
  }
  .frame-description {
    font-size:13px;
    min-height:0
  }
  .source-note {
    font-size:12px;
    line-height:1.75
  }
  .stat-strip {
    grid-template-columns:1fr 1fr;
    gap:26px;
    margin:30px 0 36px
  }
  .stat-strip>div {
    padding-left:18px
  }
  .stat-strip>div:nth-child(3) {
    padding-left:0;
    border:0
  }
  .stat-strip strong {
    font-size:43px
  }
  .stat-strip span {
    font-size:13px;
    margin-top:7px
  }
  .dataset-viz {
    grid-template-columns:1fr;
    gap:32px
  }
  .composition-main {
    flex-direction:row;
    align-items:center;
    gap:20px
  }
  .donut {
    width:128px;
    height:128px
  }
  .donut>div {
    width:94px;
    height:94px
  }
  .donut strong {
    font-size:32px
  }
  .donut span {
    font-size:12px
  }
  .legend-row {
    font-size:12px;
    gap:5px;
    margin:10px 0
  }
  .legend-row strong {
    font-size:13px
  }
  .legend-row strong small {
    font-size:11px;
    margin-left:3px
  }
  .legend-name {
    gap:5px
  }
  .chart-heading h3 {
    font-size:18px
  }
  .chart-heading {
    margin-bottom:15px
  }
  .chart-heading .micro {
    font-size:10px
  }
  .construction {
    margin-top:26px;
    padding-top:18px
  }
  .evaluation-context {
    padding:18px 22px;
    gap:6px;
    flex-direction:column;
    align-items:flex-start;
  }
  .scoring {
    grid-template-columns:1fr;
    gap:20px;
    padding:20px 22px
  }
  .results-panel {
    padding:20px 16px 16px
  }
  .results-toolbar {
    gap:10px
  }
  .results-toolbar>div {
    min-width:0
  }
  .results-toolbar label[for] {
    display:block;
    font-size:11px;
    margin-bottom:4px
  }
  .results-toolbar select {
    width:100%;
    font-size:13px;
    padding:7px 21px 7px 7px
  }
  .metric-switch {
    align-self:flex-end;
    flex-shrink:0
  }
  .metric-switch span {
    font-size:13px;
    padding:6px 9px
  }
  .chart-legend {
    font-size:11px;
    gap:9px 15px;
    margin-top:19px;
    margin-bottom:16px
  }
  .chart-legend span {
    gap:5px
  }
  .chart-legend span:before {
    width:5px;
    height:5px
  }
  .chart-axis {
    font-size:12px
  }
  .ranking-row {
    grid-template-columns:124px 1fr 33px;
    gap:8px;
    min-height:31px
  }
  .ranking-name {
    font-size:12px;
    overflow-wrap:anywhere
  }
  .ranking-name small {
    display:none
  }
  .ranking-score {
    font-size:13px
  }
  .bar-track {
    height:11px
  }
  #ranking-chart {
    gap:5px
  }
  .results-note {
    font-size:11px
  }
  .findings { margin-top:30px; }
  .findings h3 {
    font-size:22px;
  }
  .analysis-figure { padding:18px; }
  .context-panels { grid-template-columns:1fr; gap:24px; }
  .context-row { font-size:13px; grid-template-columns:70px minmax(0,1fr) 44px; }
  .context-axis { margin-left:78px; margin-right:52px; }
  .training-stages {
    margin:29px 0
  }
  .training-stage {
    padding:0 13px
  }
  .training-stage .micro {
    font-size:11px
  }
  .stage-score strong {
    font-size:35px;
    letter-spacing:-1px
  }
  .stage-score span {
    font-size:11px
  }
  .training-stage .stage-score {
    display:block;
    margin:9px 0 3px
  }
  .stage-score span {
    display:block;
    margin-top:5px
  }
  .training-stage p {
    font-size:12px;
    line-height:1.6
  }
  .training-stage:not(:last-child):after {
    right:8px;
    top:0;
    font-size:14px;
    line-height:1.25
  }
  .training-detail {
    grid-template-columns:1fr;
    gap:22px;
    padding-top:24px
  }
  .training-detail h3 {
    font-size:21px
  }
  .training-detail p {
    font-size:14px;
    margin-top:8px
  }
  th,td {
    padding:9px 7px;
    font-size:13px
  }
  .failure {
    padding:24px 0
  }
  .failure-header {
    align-items:flex-start;
    flex-direction:column;
    gap:7px
  }
  .failure-header h3 {
    font-size:27px
  }
  .failure-model {
    text-align:left;
    font-size:12px
  }
  .failure-frames {
    grid-template-columns:repeat(2,1fr);
    gap:14px 10px
  }
  .failure-frames figcaption {
    font-size:11px
  }
  .trace-comparison {
    grid-template-columns:1fr;
    gap:8px;
    margin-top:14px
  }
  .trace-comparison p {
    font-size:13px
  }
  .failure-instruction {
    font-size:13px
  }
  .failure-takeaway {
    font-size:13px
  }
  .resources-section {
    padding-top:43px;
    padding-bottom:48px
  }
  .resources-section h2 {
    font-size:33px
  }
  .resources-section>p {
    font-size:14px
  }
  .resources-section>.source-note {
    font-size:12px
  }
  footer {
    padding-top:23px;
    padding-bottom:23px;
    gap:10px
  }
  footer p {
    display:none
  }
  footer .wordmark {
    font-size:22px
  }
}
@media(max-width:360px) {
  .section-shell {
    padding-left:16px;
    padding-right:16px
  }
  .hero h1 {
    font-size:70px
  }
  .case-tabs button {
    padding:11px 6px
  }
  .ranking-row {
    grid-template-columns:110px 1fr 32px;
    gap:5px
  }
  .composition-main {
    gap:13px
  }
  .donut {
    width:110px;
    height:110px
  }
  .donut>div {
    width:80px;
    height:80px
  }
  .hero-scene {
    grid-template-columns:100px 1fr;
    gap:0 12px
  }
  .scene-image img {
    height:78px
  }
  .resource-button {
    padding:10px
  }
  .scene-caption {
    font-size:11px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
}

/* Compact research highlights at narrow widths. */
@media(max-width:700px) {
  .scene-icon img { width:20px; height:20px; }
  .scoring { padding:22px; }
  .scoring-heading { flex-direction:column; align-items:flex-start; gap:12px; padding-bottom:20px; }
  .scoring-heading h3 { font-size:22px; }
  .score-scale { font-size:12px; }
}

/* Readable type with room for longer labels at every viewport. */
.ranking-row {
  grid-template-columns:230px minmax(0,1fr) 52px;
  min-height:34px;
}
.duration-row-head {
  flex-wrap:wrap;
  gap:3px 12px;
}
.duration-key, .duration-row-head span:last-child {
  font-size:12px;
}
.legend-row {
  flex-wrap:wrap;
  row-gap:4px;
}
.findings p, .training-detail p {
  line-height:1.8;
}
@media(max-width:1000px) {
  .ranking-row { grid-template-columns:210px minmax(0,1fr) 50px; }
}
@media(max-width:700px) {
  .eyebrow-description {
    flex-basis:100%;
    text-align:center;
  }
  .section-heading > p,
      .findings p, .training-detail p,
  .failure-instruction, .trace-comparison p,
  .resources-section > p {
    font-size:16px;
    line-height:1.75;
  }
  .resource-links {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .resource-button {
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:7px;
    padding:12px 7px;
  }
  .resource-button strong { font-size:14px; }
  .hero-scene { grid-template-columns:114px minmax(0,1fr); }
  .scene-image img { min-height:95px; }
  .stream-footnote { flex-wrap:wrap; }
  .stream-footnote > span:last-child { max-width:none; text-align:left; }
  .case-tabs button { padding:12px 6px; gap:5px; }
  .case-tabs button span { font-size:14px; }
  .time-node { font-size:13px; }
  .time-node small { font-size:11px; }
  .frame-description, .failure-takeaway { font-size:14px; }
  .composition-main { flex-direction:column; gap:18px; }
  #task-legend { width:100%; }
  .legend-row, .legend-row strong { font-size:14px; }
  .legend-row strong small { font-size:12px; }
  .duration-row-head { font-size:14px; }
  .results-toolbar { flex-wrap:wrap; }
  .ranking-row {
    grid-template-columns:136px minmax(0,1fr) 42px;
    min-height:40px;
  }
  .ranking-name { font-size:13px; }
  .ranking-score { font-size:14px; }
  .chart-axis { flex-wrap:wrap; gap:8px; }
  .training-stage .micro { display:block; line-height:1.6; }
  th, td { font-size:13px; padding:10px 6px; }
  .failure-frames figcaption { font-size:12px; }
}
@media(max-width:360px) {
  .hero-scene { grid-template-columns:100px minmax(0,1fr); }
  .case-tabs button { flex-direction:column; gap:3px; }
  .ranking-row { grid-template-columns:118px minmax(0,1fr) 42px; gap:7px; }
  .training-stage { padding-left:10px; padding-right:10px; }
  .training-stage:not(:last-child):after { right:1px; }
}

@media(max-width:700px) {
  .construction-heading h3 { font-size:21px; }
  .construction-heading h3 span { display:block; }
  .quality-highlights { grid-template-columns:1fr; gap:8px; }
  .quality-highlights li { padding:10px 14px; }
  .prs-variants, .prs-shared { grid-template-columns:1fr; }
  .prs-variant { padding:18px; }
  .prs-shared { gap:24px; }
  .prs-equation math { font-size:22px; }
  .prs-shared .prs-equation math { font-size:21px; }
}