:root {
  color-scheme: light;
  --paper: #fbfaf7;
  --ink: #172a30;
  --muted: #607176;
  --line: #dce3df;
  --accent: #206b5d;
  --policy: #246cb2;
  --simulation: #137c7c;
  --progress: #9b6517;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 2px; }
::selection { background: #d6e8df; }
.skip-link { position: absolute; left: 20px; top: -80px; padding: 12px 18px; background: white; z-index: 10; }
.skip-link:focus { top: 12px; }
.site-header, .site-footer { max-width: 1240px; margin: auto; padding: 24px 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-header { min-height: 92px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 13px; color: var(--ink); text-decoration: none; font-weight: 650; }
.brand-symbol { font: 36px/1 Georgia, serif; }
.brand-detail { color: var(--muted); font-size: 13px; font-weight: 400; padding-left: 8px; }
.results-link { font-size: 13px; text-decoration: none; color: var(--ink); padding: 8px 0; }
main { max-width: 1240px; margin: auto; padding: 0 40px; }
.article-header { padding: 72px 0 0; max-width: 1030px; }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; font-size: 12px; color: var(--muted); }
.draft-label { color: var(--accent); border: 1px solid #b8d2c7; border-radius: 3px; padding: 5px 9px; }
h1 { margin: 28px 0 24px; font-size: clamp(32px, 3.6vw, 44px); letter-spacing: -.035em; line-height: 1.16; font-weight: 650; }
.resource-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; padding: 0; list-style: none; }
.resource-links a, .resource-links .is-pending { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 14px; border: 1px solid rgba(17, 17, 17, .24); border-radius: 8px; color: var(--ink); font-size: .86rem; font-weight: 800; text-decoration: none; }
.resource-links a:hover { background: #f0f1ec; }
.resource-links .is-pending { color: var(--muted); border-style: dashed; }
.resource-links small { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.standfirst { font: 24px/1.5 Georgia, "Times New Roman", serif; max-width: 740px; margin: 0 0 22px; color: #3b535b; }
.draft-note { color: var(--muted); font-size: 13px; line-height: 1.7; max-width: 700px; }
.capability-index { display: flex; gap: 38px; padding: 24px 0; margin-top: 42px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.policy-label { color: var(--policy); }
.simulation-label { color: var(--simulation); }
.progress-label { color: var(--progress); }
.article-layout { display: grid; grid-template-columns: 195px minmax(0, 740px); gap: 60px; padding: 48px 0 100px; border-top: 1px solid var(--line); }
.contents nav { position: sticky; top: 40px; }
.contents-title { margin: 0 0 20px; text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
.contents a { display: flex; gap: 14px; padding: 10px 0; text-decoration: none; font-size: 13px; color: var(--ink); }
.contents a span { font-size: 11px; color: var(--muted); line-height: 19px; }
.contents a:hover { color: var(--accent); }
.prose { font: 19px/1.8 Georgia, "Times New Roman", serif; min-width: 0; }
.prose > section + section { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); }
.prose p { margin: 0 0 22px; }
.prose h2, .prose h3, .prose dt { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.prose h2 { font-size: clamp(27px, 3vw, 36px); line-height: 1.22; letter-spacing: -.035em; font-weight: 600; margin: 8px 0 28px; }
.prose h3 { font-size: 23px; line-height: 1.35; letter-spacing: -.025em; font-weight: 600; margin: 32px 0 18px; }
.prose .section-number { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 11px; line-height: 1.5; color: var(--accent); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 15px; }
.data-groups { margin: 28px 0; }
.data-groups > div { padding: 18px 0; border-top: 1px solid var(--line); }
.data-groups > div:last-child { border-bottom: 1px solid var(--line); }
.data-groups dt { font-size: 16px; font-weight: 650; line-height: 1.4; margin-bottom: 6px; }
.data-groups dd { margin: 0; font-size: 18px; }
.interface { margin: 32px 0; padding-left: 0; border: 0; }
.interface.policy { --interface-color: var(--policy); }
.interface.simulation { --interface-color: var(--simulation); }
.interface.progress { --interface-color: var(--progress); }
.prose .interface-label { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--interface-color); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 8px; }
.interface h3 { margin-top: 0; }
.prose .sequence { display: flex; align-items: center; gap: 14px; margin: 24px 0 14px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.6; }
.sequence-arrow { color: var(--interface-color); font-size: 22px; }
.sequence > span:last-child { color: var(--interface-color); font-weight: 650; }
.prose .sequence-note { color: var(--muted); font: 12px/1.8 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
code { font: .95em/1.8 ui-monospace, "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.section-status { font-style: italic; color: var(--muted); }
.prose .related-link { font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding-top: 10px; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; min-height: 100px; }
.site-footer a { text-decoration: none; color: inherit; padding: 8px 0; }
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 30px; }
  .prose { font-size: 18px; }
}
@media (max-width: 680px) {
  .site-header, .site-footer { padding: 20px 22px; }
  main { padding: 0 22px; }
  .site-header { min-height: 78px; }
  .brand-detail { display: none; }
  .article-header { padding-top: 44px; }
  h1 { font-size: clamp(28px, 6vw, 34px); margin-top: 24px; }
  .standfirst { font-size: 21px; }
  .article-meta { font-size: 11px; gap: 10px 13px; }
  .capability-index { gap: 14px; flex-wrap: wrap; font-size: 11px; margin-top: 30px; }
  .article-layout { display: block; padding-top: 24px; padding-bottom: 56px; }
  .contents { margin-bottom: 44px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
  .contents nav { position: static; display: flex; flex-wrap: wrap; gap: 4px 20px; }
  .contents-title { flex-basis: 100%; margin-bottom: 6px; }
  .contents a { gap: 6px; padding: 8px 0; font-size: 12px; }
  .interface { padding-left: 0; }
  .prose .sequence { flex-direction: column; align-items: flex-start; gap: 5px; }
  .sequence-arrow { transform: rotate(90deg); display: block; }
  .prose > section + section { margin-top: 44px; padding-top: 30px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  :root { --paper: white; --ink: black; }
  .site-header, .contents, .site-footer, .skip-link { display: none; }
  main { padding: 0; }
  .article-header { padding-top: 0; }
  h1 { font-size: 40px; }
  .article-layout { display: block; }
  .prose { font-size: 11pt; }
  h2, h3 { break-after: avoid; }
  .interface { break-inside: avoid; }
}

/* Minimal token sequences, following the author's sketch. */
.token-sequence-gif { margin: 24px 0 30px; background: var(--paper); }
.token-sequence-gif picture, .token-sequence-gif img { display: block; width: 100%; height: auto; }

/* Task-selectable, synchronized policy and progress results. */
@media(min-width:901px) { .article-layout { grid-template-columns:195px minmax(0,1fr); } .prose > section { max-width:740px; } .prose > #results { max-width:none; } }
.results-demo { margin:24px 0 36px; font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.results-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0 18px; border-top:1px solid var(--line); }
.results-toolbar label { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.results-toolbar select { font-family:inherit; font-size:13px; font-weight:500; line-height:1.4; background:var(--paper); border:1px solid #c4d1cb; color:var(--ink); border-radius:5px; padding:8px 28px 8px 10px; }
.results-toolbar select:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.results-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.results-video-panel,.results-graph-panel { min-width:0; }
.results-panel-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; margin-bottom:10px; }
.results-clock { color:var(--muted); font:11px ui-monospace,monospace; }
.dt-readout { color:#9b6517; font:600 12px ui-monospace,monospace; }
.results-demo video { display:block; width:100%; aspect-ratio:912/512; background:#162124; border-radius:6px; }
.dt-chart { display:block; width:100%; height:auto; overflow:visible; }
.dt-grid { stroke:#dde4df; stroke-width:1; }
.dt-tick,.dt-axis-label { fill:#66786f; font-size:13px; }
.dt-axis-label { font-size:12px; }
.dt-goal-line { stroke:#b88025; stroke-width:1.2; stroke-dasharray:4 4; }
.dt-goal-label { fill:#946119; font-size:12px; }
.dt-goal { cursor:pointer; opacity:.65; }
.dt-goal.reached,.dt-goal:hover,.dt-goal:focus-visible { opacity:1; }
.dt-goal:focus-visible { outline:2px solid var(--accent); }
.dt-trace { fill:none; stroke-linejoin:round; stroke-linecap:round; }
.dt-trace { stroke:#a66b14; stroke-width:2.5; }
.dt-single { fill:#a66b14; }
.dt-playhead { stroke:#245d56; stroke-width:1.5; }
.dt-current-point { fill:#a66b14; stroke:var(--paper); stroke-width:2; }
.results-status { color:var(--muted); font-size:11px; margin-top:12px; }
@media(max-width:1000px) { .results-pair { grid-template-columns:1fr; gap:20px; } }
@media(max-width:480px) { .results-toolbar { align-items:flex-start; gap:8px; } .results-toolbar label { flex-direction:column; align-items:flex-start; gap:5px; } .results-toolbar select { padding-right:20px; max-width:190px; } }

/* Benchmark examples with compact, auditable comparison tables. */
.prose .benchmark-kicker { color:var(--accent); font-size:12px; margin-bottom:12px; }
.benchmark-toolbar { flex-wrap:wrap; align-items:end; }
.benchmark-toolbar label { flex-direction:column; align-items:start; gap:6px; min-width:0; }
.benchmark-toolbar .episode-select { flex:1 1 280px; }
.benchmark-toolbar select { width:100%; max-width:100%; }
.benchmark-media { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr); gap:20px; align-items:start; }
.benchmark-media > div { min-width:0; }
.benchmark-media video { aspect-ratio:auto; max-height:400px; object-fit:contain; }
.benchmark-outcome { color:var(--muted); white-space:nowrap; }
.benchmark-goal { margin:0; }
.benchmark-goal figcaption { font-size:12px; margin-bottom:10px; }
.benchmark-goal img { display:block; width:100%; border-radius:5px; }
.prose .benchmark-goal-note { font-size:11px; line-height:1.5; color:var(--muted); margin:8px 0 0; }
.prose .benchmark-description { font-size:12px; color:var(--muted); margin:14px 0 24px; }
.benchmark-table-wrap { overflow-x:auto; }
.benchmark-table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.benchmark-table caption { text-align:left; font-size:13px; font-weight:600; padding:0 0 12px; }
.benchmark-table th,.benchmark-table td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:right; vertical-align:middle; }
.benchmark-table thead th { color:var(--muted); font-size:11px; font-weight:500; border-top:1px solid var(--line); }
.benchmark-table th:first-child { text-align:left; padding-left:0; }
.benchmark-table tbody th { font-weight:500; }
.benchmark-table tr.ours { background:rgba(32,107,93,.045); }
.benchmark-table .best { font-weight:700; color:var(--accent); }
.prose .benchmark-table-note { font-size:11px; line-height:1.65; color:var(--muted); margin:12px 0; }
.benchmark-details { font-size:12px; color:var(--muted); line-height:1.7; }
.benchmark-details summary { cursor:pointer; color:var(--accent); padding:8px 0; }
.prose .benchmark-details p { margin:10px 0; }
.benchmark-status:empty { display:none; }
.benchmark-status { color:var(--muted); font-size:12px; }
@media(max-width:600px) { .benchmark-media { gap:12px; grid-template-columns:minmax(0,3fr) minmax(0,1fr); } .benchmark-table { font-size:11px; } .benchmark-table th,.benchmark-table td { padding:10px 6px; } .benchmark-table thead th { font-size:10px; } .benchmark-outcome { display:none; } .benchmark-toolbar .episode-select { order:3; flex-basis:100%; } }

.benchmark-intro { max-width:740px; }

/* A shared video clock keeps the stacked camera views and live curves aligned. */
.benchmark-paired { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
.benchmark-graph-panel { display:flex; flex-direction:column; min-width:0; }
.benchmark-legend { display:flex; gap:22px; flex-wrap:wrap; font-size:12px; min-height:28px; align-items:start; }
.benchmark-legend output { font-variant-numeric:tabular-nums; margin-left:6px; }
.benchmark-wsm { color:#206b5d; }
.benchmark-success { color:#206b5d; }
.benchmark-failure { color:#b6532a; }
.benchmark-success::before,.benchmark-failure::before { content:""; display:inline-block; width:18px; margin-right:5px; vertical-align:middle; border-top:3px solid currentColor; }
.benchmark-failure::before { border-top-style:dashed; }
[data-benchmark="failure"] .benchmark-legend { gap:8px 16px; }
.benchmark-chart { display:block; width:100%; height:auto; min-height:0; }
.benchmark-cameras { display:flex; flex-direction:column; gap:14px; }
.benchmark-camera { margin:0; }
.benchmark-camera > figcaption { font-size:11px; color:var(--muted); margin-bottom:7px; }
.benchmark-camera canvas { display:block; width:100%; height:auto; border-radius:5px; background:#172a30; }
.benchmark-camera-frame { position:relative; }
.benchmark-paired .benchmark-goal { position:absolute; top:7px; left:7px; width:27%; border:2px solid var(--paper); border-radius:3px; overflow:hidden; box-shadow:0 1px 6px #0003; }
.benchmark-paired .benchmark-goal img { border-radius:0; }
.benchmark-paired .benchmark-goal figcaption { background:var(--paper); font-size:9px; padding:1px 4px; margin:0; }
.results-demo .benchmark-source[hidden] { display:none; }
.benchmark-clock { font:11px ui-monospace,monospace; color:var(--muted); white-space:nowrap; }
.benchmark-axis { fill:var(--muted); font-size:12px; }
.benchmark-trace { fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.benchmark-event { stroke:#84968d; stroke-dasharray:4 4; }
@media(max-width:600px) {
 .benchmark-paired { grid-template-columns:minmax(0,1fr); gap:20px; }
 .benchmark-chart { aspect-ratio:520/400; }
 .benchmark-cameras { width:100%; }
 .benchmark-clock { font-size:10px; }
}

.results-fixed-speed { font-size:12px; color:var(--muted); white-space:nowrap; }

/* One decoded frame drives both expert replay and model prediction. */
.simulation-toolbar { flex-wrap:wrap; }
.simulation-recipe { font-size:12px; color:var(--muted); }
.simulation-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.simulation-pair figure { margin:0; min-width:0; }
.simulation-pair figcaption { display:flex; justify-content:space-between; gap:8px; font-size:12px; margin-bottom:10px; }
.simulation-pair figcaption span { color:var(--muted); font-size:11px; }
.simulation-pair canvas { display:block; width:100%; height:auto; background:#e8e9e5; border-radius:6px; }
.results-demo .simulation-source[hidden] { display:none; }
.prose .simulation-description { margin:14px 0 0; color:var(--muted); font-size:12px; }
.simulation-clock { font:11px ui-monospace,monospace; white-space:nowrap; color:var(--muted); }
.simulation-status { color:var(--muted); font-size:12px; }
.simulation-status:empty { display:none; }
@media(max-width:600px) { .simulation-pair { grid-template-columns:1fr; } .simulation-toolbar { align-items:center; } .simulation-recipe { max-width:160px; font-size:11px; text-align:right; } }

.benchmark-legend-label { color:var(--muted); }

.benchmark-scene[role="button"] { cursor: pointer; }
.benchmark-scene[role="button"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.video-controls { display:flex; align-items:center; gap:14px; margin-top:12px; }
.video-play { display:inline-flex; justify-content:center; align-items:center; min-width:92px; min-height:38px; padding:7px 14px; border:1px solid #b7c9c0; border-radius:6px; background:var(--paper); color:var(--accent); font:inherit; font-size:13px; cursor:pointer; }
.video-play:hover { background:#eaf0ec; }
.video-play:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }

/* Temporary, server-saved editorial comments; separate from the article. */
.review-section { border-top:1px solid var(--line); padding:32px 0 64px; margin-bottom:32px; font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.review-heading,.review-list-heading,.review-card-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.review-kicker { color:var(--accent); font-size:10px; font-weight:650; text-transform:uppercase; letter-spacing:.1em; margin:0 0 5px; }
.review-section h2 { margin:0; font-size:28px; letter-spacing:-.025em; font-weight:600; }
.review-section h3 { font-size:16px; font-weight:600; margin:0 0 18px; }
.review-count { color:var(--muted); font-size:12px; white-space:nowrap; }
.review-intro { color:var(--muted); max-width:760px; margin:16px 0 28px; }
.review-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px; }
.review-section label { display:block; margin:16px 0 6px; font-weight:550; font-size:12px; }
.review-section label span { color:var(--muted); font-weight:400; }
.review-section select,.review-section textarea { width:100%; min-width:0; border:1px solid #c4d1cb; border-radius:6px; padding:10px 12px; font:inherit; color:var(--ink); background:var(--paper); }
.review-section textarea { resize:vertical; display:block; }
.review-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.review-section button { font:inherit; font-size:12px; cursor:pointer; border:1px solid #c4d1cb; border-radius:5px; padding:7px 12px; background:var(--paper); color:var(--accent); }
.review-section button.review-primary { background:var(--accent); border-color:var(--accent); color:white; }
.review-section button:hover { filter:brightness(.96); }
.review-section button:disabled { opacity:.6; cursor:wait; }
.review-section :focus-visible,.review-launcher:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
#review-status { min-height:24px; color:var(--accent); font-size:12px; }
#review-status.review-error { color:#963b2f; }
.review-list-heading h3 { margin:0; }
.review-section .review-filter { display:flex; align-items:center; gap:8px; font-weight:400; color:var(--muted); margin:15px 0; }
.review-filter input { accent-color:var(--accent); }
.review-card { border:1px solid var(--line); padding:18px; border-radius:7px; margin:0 0 16px; overflow-wrap:anywhere; }
.review-card-heading { align-items:flex-start; font-size:12px; font-weight:600; }
.review-card blockquote { font-family:Georgia,serif; font-size:14px; color:var(--muted); border-left:2px solid #c4d1cb; padding-left:12px; margin:14px 0; white-space:pre-wrap; max-height:180px; overflow:auto; }
.review-comment-text { white-space:pre-wrap; margin:14px 0; }
.review-card time { font-size:11px; color:var(--muted); }
.review-badge { color:var(--muted); font-weight:400; }
.review-empty { color:var(--muted); padding:20px 0; }
.review-launcher { position:fixed; right:24px; bottom:22px; z-index:20; border:1px solid var(--accent); border-radius:24px; padding:11px 18px; background:var(--accent); color:white; font:500 13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; cursor:pointer; box-shadow:0 3px 14px #172a3020; }
@media(max-width:680px) { .review-grid { grid-template-columns:minmax(0,1fr); gap:30px; } .review-heading { align-items:flex-start; flex-wrap:wrap; } .review-launcher { right:14px; bottom:14px; max-width:calc(100vw - 28px); } .review-section { padding-bottom:64px; } }
@media print { .review-section,.review-launcher { display:none; } }

/* The paper's real training examples, animated in three equal panels. */
.dataset-figure { margin:30px 0 36px; font:13px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.dataset-panels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.dataset-panel { min-width:0; padding:14px 0 0; border-top:1px solid var(--line); }
.dataset-panel h4 { font-size:16px; line-height:1.4; min-height:2.8em; font-weight:600; letter-spacing:-.015em; margin:0 0 8px; }
.dataset-panel img { display:block; width:100%; height:auto; aspect-ratio:720/772; background:var(--paper); }
.dataset-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
.dataset-controls a { font-size:11px; color:var(--muted); text-decoration:none; white-space:nowrap; }
.dataset-controls a:hover { color:var(--accent); text-decoration:underline; }
.dataset-figure > figcaption { color:var(--muted); font-size:12px; line-height:1.6; margin-top:16px; max-width:740px; }
@media(min-width:901px) { .prose > #model-and-training { max-width:none; } #model-and-training > p,#model-and-training > .interface { max-width:740px; } }
@media(max-width:680px) { .dataset-panels { grid-template-columns:minmax(0,1fr); gap:24px; } .dataset-panel h4 { font-size:16px; min-height:0; } }
@media print { .dataset-controls { display:none; } }

/* Opening figure: real examples, three queries, one shared model. */
.model-overview {
  --rgb-fill:#e7f2ff; --rgb-stroke:#91bcea; --rgb-text:#195da5;
  --action-fill:#f1eafd; --action-stroke:#bca1dc; --action-text:#7440a9;
  --time-fill:#fff1d4; --time-stroke:#dfb55e; --time-text:#94600c;
  margin:32px 0 44px; padding:18px 0; border-block:1px solid var(--line);
  font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.overview-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; }
.overview-heading > span { font-size:20px; font-weight:600; letter-spacing:-.03em; }
.overview-legend { display:flex; gap:14px; font-size:10px; color:var(--muted); }
.model-overview .rgb { --token-fill:var(--rgb-fill); --token-stroke:var(--rgb-stroke); --token-text:var(--rgb-text); }
.model-overview .action { --token-fill:var(--action-fill); --token-stroke:var(--action-stroke); --token-text:var(--action-text); }
.model-overview .time { --token-fill:var(--time-fill); --token-stroke:var(--time-stroke); --token-text:var(--time-text); }
.overview-legend > span { display:flex; align-items:center; gap:5px; }
.overview-legend > span::before { content:""; width:8px; height:8px; border-radius:2px; background:var(--token-fill); border:1px solid var(--token-stroke); }
.overview-diagram { display:grid; grid-template-columns:minmax(0,2fr) minmax(94px,.64fr) minmax(0,1.35fr); gap:16px 8px; }
.overview-row { display:contents; }
.overview-inputs { grid-column:1; grid-row:var(--row); display:flex; flex-direction:column; }
.prose .overview-inputs h3 { margin:0 0 8px; font-size:15px; font-weight:600; letter-spacing:-.015em; }
.overview-inputs h3 > span { color:var(--muted); font-size:10px; letter-spacing:.03em; font-weight:500; margin-right:8px; }
.overview-input-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:auto 0; }
.overview-simulation .overview-input-pair { grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.overview-simulation .overview-inputs .overview-token-line { flex-direction:column; gap:5px; }
.overview-output { grid-column:3; grid-row:var(--row); min-width:0; }
.overview-output-heading { color:var(--muted); font-size:11px; margin:0 0 8px; line-height:20px; }
.overview-card { min-width:0; }
.overview-media { width:min(100%,168px); margin-inline:auto; aspect-ratio:7/4; overflow:hidden; border-radius:5px; background:var(--paper); }
.overview-media img { display:block; width:100%; height:100%; object-fit:contain; }
.overview-media picture { display:block; width:100%; height:100%; }
.overview-token-line { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 8px; margin-top:7px; color:var(--token-text); }
.overview-token-label { font-size:14px; font-weight:500; line-height:20px; }
.overview-token-label sub { font-size:.72em; }
.overview-tokens { display:flex; gap:4px; }
.overview-tokens i { width:14px; height:14px; border-radius:2px; border:1px solid var(--token-stroke); background:var(--token-fill); }
.overview-model { grid-column:2; grid-row:1/4; position:relative; min-width:0; }
.overview-connections { position:absolute; inset:0; width:100%; height:100%; }
.overview-model-mark { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(72%,72px); }
.overview-model-mark > img { width:100%; height:auto; display:block; background:var(--paper); }
.overview-model-mark > span { position:absolute; top:100%; left:50%; transform:translateX(-50%); white-space:nowrap; color:var(--muted); font-size:10px; background:var(--paper); padding:5px 2px; }
.model-overview > figcaption { margin-top:18px; color:var(--muted); font-size:12px; line-height:1.6; max-width:740px; }
.prose .overview-source-note { margin:8px 0 0; max-width:740px; font-size:10px; line-height:1.6; color:var(--muted); }
@media(max-width:1000px) and (min-width:681px) {
  .overview-diagram { grid-template-columns:minmax(0,2fr) 82px minmax(0,1.35fr); gap:16px 4px; }
  .overview-input-pair { gap:8px; }
  .overview-heading { align-items:flex-start; }
  .overview-legend { gap:8px; }
  .overview-tokens { gap:2px; }
  .overview-tokens i { width:12px; height:12px; }
  .prose .overview-inputs h3 { font-size:13px; }
}
@media(max-width:680px) {
  .overview-heading { align-items:flex-start; flex-direction:column; gap:12px; margin-bottom:22px; }
  .overview-diagram { display:flex; flex-direction:column; gap:16px; }
  .overview-model { display:flex; justify-content:center; }
  .overview-model-mark { position:static; transform:none; width:68px; }
  .overview-model-mark > span { position:static; display:block; transform:none; text-align:center; font-size:9px; }
  .overview-connections { display:none; }
  .overview-row { display:block; border-top:1px solid var(--line); padding-top:14px; }
  .overview-input-pair { gap:12px; }
  .overview-simulation .overview-input-pair { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 8px; }
  .overview-output { margin:12px 0 0; }
  .overview-output-heading::before { content:"↓"; font-size:16px; padding-right:10px; }
  .overview-output .overview-card { width:100%; margin:auto; }
  .overview-token-line { justify-content:center; }
  .model-overview { margin:32px 0 40px; }
}

/* PsiBorg: graphite surfaces, luminous telemetry, and a readable research layout. */
@media screen {
  :root {
    color-scheme: dark;
    --paper: #0b1117;
    --ink: #edf3f5;
    --muted: #9aafb9;
    --line: #263640;
    --accent: #79e3d5;
    --policy: #83bfff;
    --simulation: #79e3d5;
    --progress: #f2c579;
    --surface: #111c24;
    --surface-raised: #182630;
    --success: #78deb5;
    --failure: #ffad83;
  }
  body { background: radial-gradient(ellipse 900px 650px at 85% 0, #17303955, transparent), var(--paper); }
  ::selection { color: var(--ink); background: #2d625f; }
  a { text-decoration-color: #79e3d570; }
  a:hover { text-decoration-color: var(--accent); }
  .skip-link { background: var(--surface-raised); }
  .site-header { border-bottom-color: var(--line); }
  .brand-symbol { color: var(--accent); }
  .brand-detail { font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .03em; }
  .results-link { border: 1px solid var(--line); border-radius: 6px; padding: 9px 13px; }
  .results-link:hover { color: var(--accent); border-color: #79e3d570; }
  .article-header { position: relative; isolation: isolate; max-width: none; padding: 58px 0 32px; }
  .article-header::before {
    content: ""; position: absolute; z-index: -1; inset: 0 -16px;
    background-image: linear-gradient(#79e3d50a 1px, transparent 1px), linear-gradient(90deg, #79e3d50a 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(120deg, transparent 5%, #000 100%);
    pointer-events: none;
  }
  .article-meta { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; letter-spacing: .06em; }
  .article-meta > span:first-child { color: var(--accent); text-transform: uppercase; }
  .article-meta > span:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; background: var(--accent); box-shadow: 0 0 12px #79e3d560; }
  h1 { max-width: 1030px; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.18; letter-spacing: -.035em; font-weight: 600; margin: 25px 0 28px; }
  .title-name { color: var(--accent); }
  .resource-links { margin-bottom: 8px; }
  .resource-links a, .resource-links .is-pending { background: #111c24c9; border-color: #3b505b; font-weight: 600; }
  .resource-links .is-pending { color: #c0ced4; }
  .resource-links small { font-size: 10px; letter-spacing: .06em; color: var(--muted); }
  .resource-links a:hover { background: var(--surface-raised); }
  .article-layout { padding-top: 56px; }
  .contents nav { border-left: 1px solid var(--line); padding-left: 15px; }
  .contents-title { color: var(--accent); }
  .contents a { color: #b6c6ce; }
  .contents a span { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: #78919e; }
  .contents a:hover { color: var(--accent); }
  .prose { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 18px; line-height: 1.85; color: #c4d0d6; }
  .prose strong, .prose h2, .prose h3, .prose h4, .data-groups dt { color: var(--ink); }
  .prose > section + section { margin-top: 64px; padding-top: 42px; }
  .prose .section-number { display: flex; align-items: baseline; gap: 14px; font-size: clamp(25px, 2.4vw, 30px); font-weight: 600; line-height: 1.3; letter-spacing: -.025em; text-transform: none; color: var(--ink); margin: 0 0 25px; }
  .section-number .section-index { font: 500 .8em/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--accent); letter-spacing: .04em; flex-shrink: 0; }
  .prose h3 { font-size: 23px; }
  .data-groups dt { font-size: 17px; }
  .data-groups dd { font-size: 17px; color: #b4c5cd; }
  .interface { margin: 26px 0; }
  .model-overview {
    --rgb-fill: #19334d; --rgb-stroke: #6ca8e5; --rgb-text: #9dcdff;
    --action-fill: #332745; --action-stroke: #b294d5; --action-text: #d8b5ff;
    --time-fill: #3b3020; --time-stroke: #cda457; --time-text: #f5cb83;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px 18px;
  }
  .overview-media { background: #0b1117; border: 1px solid #344750; border-radius: 5px; }
  .overview-model-mark > img { background: var(--surface); filter: drop-shadow(0 0 12px #4db7f325); }
  .overview-connections g, .overview-connections marker path { stroke: #577c89; }
  .overview-tokens i { box-shadow: inset 0 1px 0 #ffffff0a; }
  .dataset-panels { gap: 14px; }
  .dataset-panel { background: var(--surface); padding: 14px 12px 12px; border: 1px solid var(--line); border-radius: 9px; }
  .dataset-panel img { border-radius: 5px; background: #fbfaf7; }
  .dataset-panel h4 { font-size: 15px; }
  .results-demo { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
  .results-toolbar { border-top: 0; padding-top: 0; }
  .results-toolbar select { background: #0d161e; border-color: #3b505b; color: var(--ink); min-height: 40px; }
  .results-panel-heading, .simulation-pair figcaption, .benchmark-goal figcaption { color: #d6e1e7; }
  .video-play { background: #17312f; color: var(--accent); border-color: #3b6865; font-weight: 600; min-height: 40px; }
  .video-play:hover { background: #224642; border-color: var(--accent); }
  .dt-readout { color: var(--progress); }
  .dt-grid { stroke: #2b3e49; }
  .dt-tick, .dt-axis-label, .benchmark-axis { fill: #a7bac4; }
  .dt-goal-line { stroke: var(--progress); }
  .dt-goal-label { fill: var(--progress); }
  .dt-trace { stroke: var(--progress); }
  .dt-single, .dt-current-point { fill: var(--progress); }
  .dt-current-point { stroke: var(--surface); }
  .dt-playhead { stroke: var(--accent); }
  .benchmark-success, .benchmark-wsm { color: var(--success); }
  .benchmark-failure { color: var(--failure); }
  .benchmark-trace[data-series="success"], .benchmark-trace[data-series="wsm"] { stroke: var(--success); }
  .benchmark-trace[data-series="failure"] { stroke: var(--failure); }
  [data-points="success"], [data-points="wsm"] { fill: var(--success); }
  [data-points="failure"] { fill: var(--failure); }
  .benchmark-event { stroke: #a7bac4; }
  .benchmark-paired .benchmark-goal { border-color: var(--surface); }
  .benchmark-paired .benchmark-goal figcaption { background: var(--surface); }
  .review-section button.review-primary, .review-launcher { color: #0b211f; }
  .review-section select, .review-section textarea, .review-section button { border-color: #3b505b; }
  .site-footer { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
  @media (max-width: 680px) {
    .article-header { padding: 38px 0 26px; }
    h1 { font-size: clamp(28px, 6vw, 34px); }
    .article-header::before { inset-inline: 0; background-size: 32px 32px; }
    .article-layout { padding-top: 28px; }
    .contents { margin-bottom: 32px; padding-bottom: 22px; }
    .contents nav { border-left: 0; padding-left: 0; }
    .prose { font-size: 17px; }
    .prose .section-number { font-size: 25px; gap: 10px; }
    .prose > section + section { margin-top: 42px; padding-top: 32px; }
    .model-overview { padding: 18px 12px; }
    .dataset-panels { gap: 16px; }
    .results-demo { padding: 12px; }
    .results-toolbar { gap: 10px; flex-wrap: wrap; }
    .results-toolbar label { max-width: 100%; }
    .results-toolbar select { max-width: 100%; }
  }
}

/* Keep result presentation minimal; retain accessible names and playback controls. */
[hidden] { display: none !important; }
.results-status:empty { display: none; }
.video-play { min-width: 40px; width: 40px; height: 40px; padding: 0; border-radius: 50%; }

/* Release destinations: quiet status, distinct hardware-like accents. */
.resource-links { gap: 12px; }
.resource-links li { flex: 0 1 218px; min-width: 0; }
.resource-button {
  --resource-accent: #79e3d5;
  appearance: none; position: relative; display: flex; align-items: center; gap: 13px;
  width: 100%; min-height: 68px; padding: 13px 15px; text-align: left;
  border: 1px solid #375356; border-radius: 10px;
  background: linear-gradient(125deg, #193333, #101c24 75%);
  color: #edf3f5; font-family: inherit; opacity: 1;
  box-shadow: inset 0 1px 0 #ffffff0d, 0 5px 18px #00000020;
}
.resource-links li:nth-child(2) .resource-button { --resource-accent: #c2a5f4; border-color: #51445f; background: linear-gradient(125deg, #2c263b, #151b26 75%); }
.resource-links li:nth-child(3) .resource-button { --resource-accent: #f2c579; border-color: #5b513c; background: linear-gradient(125deg, #332e21, #181d23 75%); }
.resource-icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--resource-accent); }
.resource-hf { font-size: 25px; line-height: 1; }
.resource-copy { display: flex; flex-direction: column; gap: 3px; }
.resource-copy strong { color: #edf3f5; font-size: 15px; line-height: 1.2; font-weight: 600; }
.resource-links .resource-copy small { color: #aebdc7; text-transform: none; letter-spacing: 0; font-size: 11px; line-height: 1.2; white-space: nowrap; }
.resource-soon { margin-left: auto; align-self: center; padding: 4px 6px; border-radius: 4px; background: #ffffff06; color: var(--resource-accent); font: 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.resource-button:not(:disabled):hover { border-color: var(--resource-accent); }
.resource-button:focus-visible { outline: 2px solid var(--resource-accent); outline-offset: 4px; }
@media (max-width: 680px) { .resource-links { gap: 9px; } .resource-links li { flex: 1 1 180px; } .resource-button { min-height: 62px; } }

/* Theme switch and the light counterpart of the same visual system. */
.header-actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.theme-toggle-icon { font-size: 17px; line-height: 1; }
@media screen {
  :root[data-theme="light"] {
    color-scheme: light;
    --paper: #fbfaf7; --ink: #182d36; --muted: #576f7b; --line: #d5e0e5;
    --accent: #096e69; --policy: #246cb2; --simulation: #137c7c; --progress: #94600c;
    --surface: #fbfaf7; --surface-raised: #edf3f4; --success: #176e50; --failure: #ac4b26;
  }
  [data-theme="light"] body { background: radial-gradient(ellipse 900px 650px at 85% 0, #d5efed88, transparent), var(--paper); }
  [data-theme="light"] ::selection { background: #bde6df; color: #143b39; }
  [data-theme="light"] a { text-decoration-color: #096e6960; }
  [data-theme="light"] .article-header::before { background-image: linear-gradient(#096e6910 1px, transparent 1px), linear-gradient(90deg, #096e6910 1px, transparent 1px); }
  [data-theme="light"] .contents a { color: #415b68; }
  [data-theme="light"] .contents a span { color: #577784; }
  [data-theme="light"] .prose { color: #344e5b; }
  [data-theme="light"] .data-groups dd { color: #48616c; }
  [data-theme="light"] .model-overview {
    --rgb-fill: #e7f2ff; --rgb-stroke: #91bcea; --rgb-text: #195da5;
    --action-fill: #f1eafd; --action-stroke: #bca1dc; --action-text: #7440a9;
    --time-fill: #fff1d4; --time-stroke: #dfb55e; --time-text: #94600c;
  }
  [data-theme="light"] .overview-media { background: #fbfaf7; border-color: #d5e0e5; }
  [data-theme="light"] .overview-connections g, [data-theme="light"] .overview-connections marker path { stroke: #8aa3ad; }
  [data-theme="light"] .results-toolbar select { background: #f7fafb; border-color: #bcced6; }
  [data-theme="light"] .results-panel-heading, [data-theme="light"] .simulation-pair figcaption, [data-theme="light"] .benchmark-goal figcaption { color: #344e5b; }
  [data-theme="light"] .video-play { background: #e5f3ef; border-color: #a1c9be; }
  [data-theme="light"] .video-play:hover { background: #d1eae2; }
  [data-theme="light"] .dt-grid { stroke: #d8e3e8; }
  [data-theme="light"] .dt-tick, [data-theme="light"] .dt-axis-label, [data-theme="light"] .benchmark-axis { fill: #536c79; }
  [data-theme="light"] .benchmark-event { stroke: #7f96a2; }
  [data-theme="light"] .resource-button { --resource-accent: #096e69; background: linear-gradient(125deg, #e3f3ee, #ffffff 85%); border-color: #a4cbc3; color: var(--ink); box-shadow: inset 0 1px 0 white, 0 4px 14px #123b4910; }
  [data-theme="light"] .resource-links li:nth-child(2) .resource-button { --resource-accent: #715095; background: linear-gradient(125deg, #eee8f8, #ffffff 85%); border-color: #c7b8d9; }
  [data-theme="light"] .resource-links li:nth-child(3) .resource-button { --resource-accent: #856018; background: linear-gradient(125deg, #fbf0d9, #ffffff 85%); border-color: #dac9a4; }
  [data-theme="light"] .resource-copy strong { color: var(--ink); }
  [data-theme="light"] .resource-links .resource-copy small { color: #58707d; }
  [data-theme="light"] .resource-soon { background: #ffffff80; }
  [data-theme="light"] .review-section button.review-primary, [data-theme="light"] .review-launcher { color: white; }
  [data-theme="light"] .review-section select, [data-theme="light"] .review-section textarea, [data-theme="light"] .review-section button { border-color: #bcced6; }
}
@media(max-width:680px) { .site-header { gap: 12px; } .header-actions { gap: 6px; } .results-link { font-size: 11px; padding: 8px; } .theme-toggle { padding: 8px; font-size: 11px; gap: 5px; } }

.dataset-panel img { background: var(--surface); }

/* Figure canvases follow the page, with balanced headings on both sides. */
.model-overview, .dataset-panel, .dataset-panel img, .overview-model-mark > img { background: var(--paper); }
.prose .overview-inputs h3, .overview-output-heading { font-size: 18px; font-weight: 600; line-height: 1.35; text-align: center; color: var(--ink); margin: 0 0 14px; }
.overview-inputs h3 > span { font-size: .9em; }
@media(max-width:680px) { .prose .overview-inputs h3, .overview-output-heading { font-size: 18px; } }

.overview-model-mark > img { background: transparent; filter: none; }

/* November 3: centered editorial flow and one shared-model animation. */
.article-header::before { content:none; background:none; }
.article-header, .prose, .article-meta, .resource-links { text-align:center; }
.article-header h1 { margin-left:auto; margin-right:auto; max-width:950px; }
.article-meta, .resource-links { justify-content:center; }
.article-layout { display:block; padding-top:34px; }
.prose { max-width:1040px; margin:0 auto; }
.prose > section { border:0; margin-left:auto; margin-right:auto; }
.prose .benchmark-intro, #model-and-training > .interface { margin-left:auto; margin-right:auto; }
.prose p { max-width:780px; margin-left:auto; margin-right:auto; }
.prose > section + section { margin-top:44px; padding-top:18px; }
.prose > section p:first-child { margin-top:0; }
.prose figure, .results-demo { margin-left:auto; margin-right:auto; }
.results-toolbar { justify-content:center; }
.results-toolbar label { justify-content:center; }
.result-chapter { margin:36px 0 48px; }
.dataset-panel { padding-top:12px; }
.teaser-placeholder { min-height:260px; max-width:1040px; margin:42px auto 8px; border:1px dashed var(--line); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; color:var(--muted); background:var(--paper); }
.teaser-placeholder .teaser-mark { font-size:42px; color:var(--accent); opacity:.5; }
.teaser-placeholder > span:not(.teaser-mark) { font-size:15px; letter-spacing:.01em; }
.teaser-placeholder small { font-size:12px; opacity:.6; }
.prompt-film { --rgb:#83bfff; --action:#c4a2ec; --time:#f2c579; position:relative; width:100%; margin:40px auto 48px; padding:22px 16px 16px; box-sizing:border-box; background:var(--paper); border-block:1px solid var(--line); color:var(--ink); }
.film-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:24px; }
.film-chapters { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; }
.film-chapters button, .film-toggle { border:1px solid transparent; background:transparent; color:var(--muted); font:12px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; border-radius:20px; padding:7px 12px; cursor:pointer; }
.film-chapters button[aria-pressed=true] { color:var(--accent); border-color:var(--line); background:var(--surface); }
.film-toggle { border-color:var(--line); width:34px; height:34px; padding:0; flex-shrink:0; }
.film-controls button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.film-stage { display:grid; grid-template-columns:minmax(0,1fr) 142px minmax(0,1fr); align-items:center; min-height:234px; gap:12px; }
.film-role { font-size:14px; font-weight:600; margin-bottom:14px; min-height:22px; }
.film-cards { display:flex; align-items:center; justify-content:center; gap:12px; }
.film-card { min-width:0; flex:1; max-width:205px; }
.film-card img { width:100%; height:auto; aspect-ratio:1.75; display:block; object-fit:contain; border-radius:5px; }
.film-card-label { display:block; font-size:11px; color:var(--muted); line-height:1.4; margin:7px 0; }
.film-token-strip { display:flex; justify-content:center; gap:4px; }
.film-token-strip i { display:block; width:9px; height:9px; border:1px solid currentColor; border-radius:2px; background:currentColor; opacity:.75; }
.film-card.rgb, .film-token.rgb { color:var(--rgb); }
.film-card.action, .film-token.action { color:var(--action); }
.film-card.time, .film-token.time { color:var(--time); }
.film-model { display:flex; align-items:center; justify-content:center; gap:10px; }
.film-model img { width:82px; height:auto; }
.film-arrow { color:var(--muted); font-size:23px; opacity:.6; }
.film-output .film-card { opacity:0; transform:translateY(5px); transition:opacity .6s,transform .6s; }
.film-answer-visible .film-output .film-card { opacity:1; transform:none; }
.film-output .film-token-strip i { opacity:.12; }
.film-output .film-token-strip i.revealed { opacity:.9; }
.film-history .film-context { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.film-history .film-context .film-card { width:100%; }
.film-history .film-card-label { font-size:10px; }
.film-history .film-context .film-token-strip i { width:6px;height:6px;gap:2px; }
.film-history .film-context .film-card:nth-child(5) { grid-column:2; }
.film-feedback .film-output .film-card { box-shadow:0 0 0 2px var(--rgb); border-radius:5px; }
.film-feedback .film-arrow:last-child { color:var(--rgb); transform:rotate(180deg); }
.film-summary .film-output .film-cards { gap:8px; }
.film-summary .film-card-label { font-size:10px; }
.film-summary .film-output .film-token-strip i { width:5px;height:5px;gap:2px; }
.film-sequence { display:flex; justify-content:center; align-items:center; gap:12px; min-height:52px; margin-top:18px; }
.film-token { opacity:.12; transition:opacity .35s; display:flex; align-items:center; gap:8px; border:1px solid currentColor; border-radius:6px; padding:7px 10px; font:12px/1.3 ui-monospace,monospace; }
.film-token.revealed { opacity:1; }
.film-token > span { display:flex; gap:3px; }
.film-token i { width:5px; height:7px; background:currentColor; border-radius:1px; }
.film-token-arrow { font-size:15px; color:var(--muted); }
.prose .film-caption { font-size:14px; line-height:1.65; max-width:750px; margin:15px auto 20px; min-height:46px; color:var(--muted); }
.film-timeline { height:2px; background:var(--line); width:180px; margin:0 auto; overflow:hidden; }
.film-timeline i { display:block; width:100%; height:100%; background:var(--accent); transform-origin:left; transform:scaleX(var(--film-progress,0)); }
html[data-theme=light] .prompt-film { --rgb:#246cb2; --action:#7950a6; --time:#94600c; }
@media(max-width:700px){
 .article-header { padding-top:36px; }
 .teaser-placeholder { min-height:190px; margin-top:30px; }
 .prompt-film { padding:17px 0 14px; }
 .film-controls { gap:7px; }
 .film-chapters button { padding:6px 8px; font-size:11px; }
 .film-stage { grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr); gap:7px; min-height:225px; }
 .film-model { gap:3px; }.film-model img { width:50px; }.film-arrow { font-size:15px; }
 .film-cards { flex-wrap:wrap; gap:8px; }.film-card { flex:1 1 80px; max-width:150px; }
 .film-history .film-context { grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }.film-history .film-context .film-card:nth-child(5){grid-column:1/-1;max-width:72px;margin:auto;}
 .film-role { font-size:11px;margin-bottom:10px; }.film-card-label { font-size:10px; }
 .film-token-strip { gap:3px; }.film-token-strip i { width:6px;height:6px; }
 .film-sequence { gap:5px; flex-wrap:wrap; }.film-token { padding:6px;font-size:10px;gap:4px; }.film-token > span{display:none;}
 .prose .film-caption { font-size:12px;min-height:60px; }
}
@media(prefers-reduced-motion:reduce){.film-output .film-card,.film-token{transition:none;}.film-timeline{display:none;}}

.film-summary .film-context { display:grid; grid-template-columns:1fr; gap:7px; }
.film-abstract { border:1px solid currentColor; border-radius:6px; padding:8px 12px; width:100%; max-width:270px; margin:auto; box-sizing:border-box; }
.film-prompt-name { font-size:12px; }
.film-abstract .film-card-label { margin:2px 0 6px; }
.film-abstract .film-token-strip i { width:6px;height:6px; }

/* Reference-draft prose: shared margins, no framed sections or media panels. */
.article-layout { padding-top:30px; border:0; }
.prose { max-width:1100px; width:100%; text-align:left; }
.prose > section, .prose > #results, .prose > #model-and-training { max-width:none; width:100%; margin-left:auto; margin-right:auto; padding-top:0; border:0; }
.prose p, #model-and-training > p, #model-and-training > .interface, .prose .benchmark-intro { max-width:none; width:auto; margin-left:0; margin-right:0; text-align:left; }
.prose > section + section { margin-top:50px; }
.prose h2 { font-size:28px; margin-top:52px; margin-bottom:24px; }
.prose h3 { font-size:21px; margin:25px 0 15px; }
.prose .results-demo, .prose .dataset-panel, .prose .dataset-figure, .prose .prompt-film, .prose .model-overview, .prose .results-video-panel, .prose .results-graph-panel, .prose .benchmark-graph-panel, .prose .benchmark-camera, .prose .benchmark-camera-frame, .prose .simulation-pair > figure, .prose .simulation-pair canvas, .prose .results-pair video, .prose .benchmark-scene { border:0; box-shadow:none; border-radius:0; background:var(--paper); }
.prose .results-demo { padding:0; }
.prose .dataset-panel { padding:0; }
.prose .results-toolbar { border:0; }
.prose .results-pair, .prose .simulation-pair, .prose .benchmark-media { border:0; }
.trajectory-film { margin:38px 0 48px; padding:0; border:0; background:var(--paper); width:100%; position:relative; }
.trajectory-film canvas { display:block; width:100%; border:0; background:transparent; }
.trajectory-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.prose .trajectory-note { color:var(--muted); font-size:11px; line-height:1.5; margin:0; }
.trajectory-controls { display:flex; gap:8px; flex-shrink:0; }
.trajectory-controls button { display:grid; place-items:center; background:transparent; color:var(--muted); border:0; width:30px;height:30px; padding:0; font-size:19px;cursor:pointer; }
.trajectory-controls button:hover { color:var(--accent); }
.trajectory-controls button:focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
@media(max-width:600px){.trajectory-footer{gap:8px}.prose .trajectory-note{font-size:10px;max-width:230px}.trajectory-film{margin-top:20px}.prose{font-size:16px;line-height:1.8}}
.article-header .hero-subtitle { margin:0 auto 30px; max-width:none; color:var(--muted);font-size:19px;line-height:1.6; }
.prose .results-video-panel, .prose .results-graph-panel, .prose .benchmark-graph-panel, .prose .benchmark-camera-frame { outline:0; }
.prose .benchmark-goal { box-shadow:none; }
.prose figure, .prose video, .prose canvas, .prose .benchmark-cameras, .prose .benchmark-camera-frame, .prose .benchmark-goal, .prose .results-pair, .prose .dataset-panels { border:0; border-radius:0; box-shadow:none; }
.teaser-placeholder { border:0; }
.site-header, .site-footer { border:0; }
.prose > section + section { border:0; }
@media(min-width:681px){.prose p, #model-and-training > p { text-align:justify; text-align-last:left; }}
@media(max-width:680px){.prose p, #model-and-training > p { text-align:left; }}

/* Unmodified teaser videos from Klemen's draft. */
.hero-demos { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1100px;margin:42px auto 12px;text-align:left; }
.hero-demo { position:relative;min-width:0;margin:0;padding:0;border:0;background:transparent; }
.hero-demo figcaption { margin:0 0 14px; }
.hero-kind { display:block;color:var(--accent);font-size:12px;letter-spacing:.06em;margin-bottom:5px; }
.hero-demo h2 { font-size:clamp(19px,1.8vw,24px);line-height:1.25;margin:0;color:var(--ink); }
.hero-demo video { width:100%;height:auto;display:block;border:0;border-radius:0;background:var(--paper); }
.hero-demo p { font-size:12px;line-height:1.6;color:var(--muted);margin:12px 28px 0 0; }
.hero-demo p span { white-space:nowrap;display:inline-block;margin-left:5px; }
.hero-toggle { position:absolute;right:0;bottom:0;display:grid;place-items:center;width:26px;height:26px;padding:0;background:transparent;border:0;color:var(--muted);font-size:16px;cursor:pointer; }
.hero-toggle:hover { color:var(--accent); }.hero-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
@media(max-width:700px){.hero-demos{grid-template-columns:1fr;gap:30px;max-width:520px;margin-top:30px}.hero-demo h2{font-size:22px}.hero-demo p{font-size:13px}}

/* Keep the opening focused on the title, resource links and footage. */
.site-header { justify-content:flex-end;min-height:64px;padding-top:12px;padding-bottom:12px; }
.hero-media { position:relative; }
.hero-fallback { position:absolute;inset:0;width:100%;height:100%;pointer-events:none; }
.hero-fallback[hidden] { display:none; }
.hero-toggle { z-index:1;right:8px;bottom:8px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;opacity:0;transition:opacity .15s; }
.hero-media:hover .hero-toggle, .hero-media:focus-within .hero-toggle { opacity:1; }
@media(hover:none){.hero-toggle{opacity:.8;}}
.prose .capabilities-heading { text-align:center;font-size:clamp(23px,3vw,32px);line-height:1.3;margin:46px 0 18px; }
.capabilities-heading + .trajectory-film { margin-top:18px; }

/* Author credit follows the complete article, with the same quiet typography. */
.prose > .article-authors { margin-top:48px; padding-top:24px; border-top:1px solid var(--line); }
.prose .article-authors h2 { margin:0 0 12px; font-size:15px; line-height:1.4; font-weight:600; text-align:center; color:var(--muted); }
.prose .article-authors p { max-width:900px; margin:0 auto; font:15px/1.8 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align:center; text-align-last:center; text-wrap:balance; }
.article-authors span { white-space:nowrap; }