/* Read the method in execution order, then evaluate it. */
/* Give laptop pages clear margins; all figures stay in the shared column. */
@media(min-width:761px) {
 body :is(.container,.reading-width) {width:min(var(--content-width),calc(100% - 128px));}
 body .container .reading-width {width:100%;}
}
body #pretraining .research-figure:has(#policy-figure) {width:100%; max-width:none; margin-left:0; transform:none;}
body #pretraining #policy-figure {padding:24px 0;}
body #steer .steering-studies-intro {margin:48px 0 28px;}

.story-route { display:flex; flex-wrap:wrap; gap:12px 0; margin-block:10px 32px; }
.story-route a { font:400 var(--type-label)/1.5 var(--serif); white-space:nowrap; }
.story-route a:not(:last-child)::after { content:'→'; display:inline-block; padding-inline:16px; color:#92a68d; }
.story-lead { max-width:780px; margin:0 0 32px; font:400 var(--type-body)/1.65 var(--serif); }
.story-transition { max-width:780px; margin:40px 0 0; color:var(--green); font:400 var(--type-body)/1.65 var(--serif); }
.story-transition::before { content:'↓'; display:inline-block; margin-right:12px; color:#78916e; }
.story-chapter > .subsection { margin-top:36px; }
.story-chapter > .subsection + .subsection { margin-top:56px; }
body .story-chapter [data-processing-player] { padding:0; }
body [data-processing-player] .process-panel { display:flex; flex-direction:column; gap:18px; }
body [data-processing-player] .process-image-pair { width:100%; }
body .story-chapter .policy-context > :is(.finetuning-story,.steering-story) { margin-top:0; padding-top:0; }
body #pretraining .architecture-media { margin-top:0; }
body #pretraining .example-sequence { padding-top:16px; }
body #deploy #deployment { margin-top:0; }
body #experiments #generalization { padding-block:0; margin-top:64px; }
body #experiments > .section-lead { margin:0 0 32px; }
body #experiments > .story-lead { margin-bottom:16px; }
@media(max-width:760px) {
 .story-route a:not(:last-child)::after { padding-inline:10px; }
 .story-lead { margin-bottom:24px; }
 .story-transition { margin-top:28px; }
 body .story-chapter > .subsection + .subsection { margin-top:44px; }
 body #deploy #deployment { margin-top:0; }
}

/* Compact local flows within the larger chronological story. */
body .story-chapter { padding-block:36px; }
body .story-chapter .story-transition { margin-top:24px; }
.preparation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; align-items:start; }
body #prepare .preparation-grid > .subsection { min-width:0; margin:0; }
body #prepare .preparation-grid h4 { margin:0; }
body #prepare .preparation-grid .research-figure { margin-top:18px; }
body #prepare .process-image-pair { grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); gap:12px 8px; align-items:start; }
body #prepare .process-image-pair > figure { min-width:0; }
body #prepare .process-image-pair figcaption { min-height:3em; padding-top:8px; }
.preparation-arrow { align-self:start; margin-top:42px; color:var(--green); text-align:center; font-size:24px; }
body #prepare .process-playback { grid-column:1 / -1; margin-top:0; }
body #prepare .process-description p { text-align:left; }
body #prepare .process-panel { gap:12px; }
body #deploy #deployment { margin-top:0; }
@container (min-width:801px) {
 #overview .transfer-grid { --transfer-gap:28px; grid-template-columns:1.18fr 1fr 1fr 1.18fr; }
 #overview .transfer-method { display:contents; }
 #overview .transfer-step { min-height:210px; padding:18px 16px; }
 #overview .transfer-arrow.arrow-next { width:var(--transfer-gap); height:2px; top:50%; left:100%; }
 #overview .transfer-arrow.arrow-next::before { background:linear-gradient(90deg,transparent 25%,#244c3b 50%,transparent 75%); background-size:200% 100%; animation-name:flow-between-horizontal; }
 #overview .transfer-arrow.arrow-next::after { top:-3px; right:0; bottom:auto; transform:rotate(45deg); }
}
@keyframes flow-between-horizontal {
 0%,42% {background-position:200% 0; opacity:0;}
 43% {opacity:1;}
 52% {background-position:-200% 0; opacity:1;}
 53%,100% {background-position:-200% 0; opacity:0;}
}
@media(max-width:960px) {
 .preparation-grid { grid-template-columns:minmax(0,1fr); gap:32px; }
 body #prepare .preparation-grid > .subsection { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:28px; align-items:start; }
 body #prepare .preparation-grid .research-figure { margin:0; }
 .preparation-arrow { margin-top:54px; }
}
@media(max-width:600px) {
 body .story-chapter { padding-block:28px; }
 body #prepare .preparation-grid > .subsection { display:block; }
 body #prepare .preparation-grid .research-figure { margin-top:18px; }
 .preparation-arrow { margin-top:42px; }
}

body .overview-intro { padding-block:20px 36px; }
body #overview .transfer-topline { margin-bottom:8px; flex-wrap:nowrap; }
body #overview .transfer-topline > span { flex:1 1 auto; }
body #overview .transfer-caption { margin:0 0 28px; text-align:left; }

/* Trimming precedes per-clip processing; the three input views stay compact. */
body #prepare > .contact-story { margin-top:0; }
.preparation-bridge { max-width:850px; margin:0 0 14px; }
.preparation-example { margin:0 0 24px; color:var(--muted); font-size:var(--type-label); }

/* Keep comparison scores aligned when labels wrap on narrow screens. */
body .object-task + .object-task {border-top:0;}
@media(max-width:480px) {
 body .object-score {flex-direction:column; align-items:flex-start; gap:4px;}
}

/* All five demonstrations feed LoRA; the frozen base is the second input. */
.ft-training-sequence {--ft-arrow-gap:48px; --ft-data-target:50%;}
.ft-training-collector {position:relative; height:52px; margin-top:16px; color:#78916e;}
.ft-training-collector::before {content:''; position:absolute; inset:0 0 auto; height:12px; border-inline:1px solid currentColor; border-bottom:1px solid currentColor;}
.ft-training-collector > span {position:absolute; left:var(--ft-data-target); top:12px; bottom:0; width:1px; background:currentColor;}
.ft-training-collector > span::after {content:''; position:absolute; left:-3px; bottom:1px; width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg);}
.ft-training-row {display:grid; grid-template-columns:minmax(0,1fr) var(--ft-arrow-gap) minmax(0,1fr) var(--ft-arrow-gap) minmax(0,1fr); align-items:stretch;}
.ft-training-node {min-width:0; min-height:136px; padding:22px; display:flex; flex-direction:column; justify-content:center; gap:8px; background:#f1f0e9;}
body #finetune .ft-training-node h4 {margin:0; color:var(--ink); text-align:left;}
body .ft-training-node p {margin:0; color:var(--muted);}
.ft-training-base p {display:flex; align-items:center; gap:8px;}
.ft-training-lock {width:18px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5;}
.ft-training-update {background:#e4ecdf;}
body #finetune .ft-training-update :is(h4,p) {color:var(--green);}
.ft-training-result {background:var(--green);}
body #finetune .ft-training-result h4 {color:var(--paper);}
.ft-training-arrow {position:relative; height:1px; margin-inline:8px; align-self:center; color:#78916e; background:currentColor;}
.ft-training-arrow::after {content:''; position:absolute; right:1px; top:-3px; width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg);}
.task-demo-toolbar {display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; margin-bottom:16px; color:var(--muted);}
body .task-demo-toolbar h4 {margin:0; margin-right:auto;}
.task-demo-toolbar button {padding:8px 0; min-height:44px; border:0; background:none; color:var(--green); cursor:pointer;}
.task-demo-toolbar button:focus-visible {outline:2px solid var(--green); outline-offset:4px;}
.task-demo-toolbar button[hidden] {display:none;}
.task-demo-grid {display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px;}
.task-demo-grid figure {margin:0; min-width:0;}
.task-demo-grid video {display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; background:var(--paper); border-radius:0;}
.task-demo-grid figcaption {margin-top:8px; color:var(--muted); text-align:left;}
#overview .human-photo {padding:0; background:transparent;}
#overview .human-photo video {box-shadow:none;}
#overview .demo-count {padding:0; background:transparent;}
@media(max-width:900px) {
 .task-demo-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:760px) {
 .ft-training-sequence {--ft-arrow-gap:28px; --ft-data-target:calc(75% + 7px);}
 .ft-training-row {grid-template-columns:minmax(0,1fr) var(--ft-arrow-gap) minmax(0,1fr);}
 .ft-training-node {min-height:0; padding:16px 12px;}
 .ft-training-base {grid-column:1; grid-row:1;}
 .ft-training-model-arrow {grid-column:2; grid-row:1; margin-inline:3px;}
 .ft-training-update {grid-column:3; grid-row:1;}
 .ft-training-result-arrow {grid-column:3; grid-row:2; width:1px; height:32px; margin:0; justify-self:center;}
 .ft-training-result-arrow::after {right:-3px; top:auto; bottom:1px; transform:rotate(135deg);}
 .ft-training-result {grid-column:3; grid-row:3;}
}
@media(max-width:480px) {
 .task-demo-grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px;}
 .task-demo-grid figure:last-child {grid-column:1 / -1; width:calc((100% - 12px)/2); justify-self:start;}
 .task-demo-toolbar {gap:8px 16px;}
 .task-demo-toolbar h4 {flex-basis:100%;}
}

/* Phone figures use short reading paths instead of shrinking the desktop diagrams. */
@media(max-width:600px){
 body #pretraining .research-figure:has(#policy-figure) {width:100%; margin-left:0; transform:none;}
 body #pretraining #policy-figure {padding:0;}
 body #policy-figure .ag-toolbar {display:flex; gap:8px; margin-bottom:24px;}
 body #policy-figure .ag-controls {width:auto; margin-left:auto;}
 body #policy-figure .ag-pause {white-space:normal;}
 body #steering-chart,body .scaling-panel {padding-inline:0;}
 body #steering-chart .steering-svg {width:100%; min-width:0;}
 body #steering-chart .steering-viewport {overflow:visible;}
 body #steering-chart .plot-scroll-hint {display:none;}
 body #steering-chart .steering-key {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px;}
 body #steering-chart .steering-key-item {align-items:flex-start;}
 body #steering-chart .steering-key-item::before {flex-shrink:0; margin-top:14px;}
 body #steering-deployment .sc-scrub {display:grid; grid-template-columns:1fr auto; gap:8px 12px; min-width:0;}
 body #steering-deployment .sc-scrub input {grid-column:1 / -1; grid-row:2; min-width:0; margin:0;}
 body #deployment-figure {padding-inline:0;}
 body .deploy-flow {gap:32px;}
 body .deploy-wires {display:none;}
 body .deploy-column + .deploy-column::before {content:'↓'; position:absolute; top:-31px; left:50%; color:#78916e;}
 body .deploy-planner {max-width:none; display:flex; align-items:center; justify-content:space-between; gap:12px; border:0; background:#eef1e8; padding:20px;}
 body .deploy-brand {margin:0;}
 body .deploy-plan {grid-template-columns:1fr; gap:8px;}
 body .deploy-step {display:flex; align-items:center; gap:16px; min-height:60px; padding:16px 20px; text-align:left; border:0; background:#eeeae240;}
 body .deploy-step-number {margin:0; flex:0 0 2ch;}
 body .deploy-step > span:nth-child(2) {display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline;}
 body .deploy-step small {margin:0;}
 body .deploy-step[aria-pressed=true] {background:#e4ecdf; box-shadow:inset 3px 0 var(--green);}
 body .deploy-skills {gap:12px;}
 body .deploy-skill {padding:20px; border:0; background:#eeeae240;}
 body .deploy-skill.is-active {background:#e4ecdf;}
 body .deploy-output {width:100%;}
 body .deploy-inspector-heading {flex-wrap:wrap;}
 /* Keep the full action footage clear; sampled thumbnails are desktop detail. */
 body .contact-story :is(.annotation-clips,.annotation-feed-clip,.annotation-prompt-flight) {display:none;}
 body .contact-story .annotation-model span {display:none;}
 body .contact-story .contact-stage-heading {flex-wrap:wrap; gap:4px 12px;}
}

/* Let diagram cards size to their content, preserving room around 20 px labels. */
body .deploy-step {padding:16px 20px;}
body .deploy-step > span:nth-child(2) {min-width:0;}
@media(min-width:601px) and (max-width:760px){
 body .deploy-plan {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:380px){
 body .deploy-skills {grid-template-columns:1fr;}
 body #steering-chart .steering-key {grid-template-columns:1fr;}
}

/* Irmak review: minimal copy, with every processing pair visible. */
body #collect .dataset-toolbar {gap:16px; align-items:center;}
body #collect [data-dataset-toggle],body #finetune [data-task-demo-toggle] {width:44px; height:44px; min-width:44px; padding:0; flex:none;}
body #collect [data-dataset-toggle]::before {content:none;}
body #prepare .contact-layout {align-items:center;}
body #prepare .contact-chart {min-height:0;}
body #prepare .contact-controls {margin-top:16px; gap:16px;}
body #prepare .contact-controls button {min-width:64px;}
body #prepare .contact-controls input {flex:1; min-width:0; accent-color:var(--green);}
body #prepare .preparation-grid {display:grid; grid-template-columns:1fr; max-width:860px; margin-inline:auto; gap:40px;}
body #prepare .preparation-description {margin:0 0 14px;}
body #prepare .preparation-grid .process-panel {padding:0;}
body #prepare .preparation-grid > .subsection {display:block;}
body #prepare .preparation-grid .research-figure {margin:0;}
body #prepare .process-image-pair {grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); gap:16px 12px;}
body #prepare .preparation-arrow {align-self:center; margin:0;}
body #prepare .process-playback {display:flex; flex-wrap:nowrap; gap:16px;}
body #prepare .process-playback output {display:none;}
body #prepare [data-process-play-label] {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);}
body #prepare [data-process-toggle] {min-width:44px; width:44px; height:44px; padding:0; justify-content:center;}
body #finetune .task-demo-toolbar {justify-content:flex-end;}
body #pretraining .ag-detail:empty {display:none;}
body #steer .sc-header {margin-bottom:20px;}
.sc-comparison-intro {display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px;}
.sc-reference {display:flex; align-items:center; gap:16px; margin:0;}
.sc-reference img {width:120px; aspect-ratio:4/3; object-fit:contain;}
.sc-reference figcaption {max-width:120px; color:var(--muted);}
body #steer .sm-target-key {margin:0; gap:12px 24px;}
.sc-comparison-grid {display:grid; grid-template-columns:minmax(0,1fr); gap:28px; scroll-margin-top:20px;}
.sc-comparison-panel {min-width:0; margin:0;}
body #steer .sc-illustration-caption {margin:20px 0 0; max-width:850px;}
body #steer .sm-view {margin:0;}
body #steer .sm-canvas {height:400px;}
.sc-comparison-foot {display:flex; justify-content:space-between; align-items:center; gap:20px; color:var(--green); margin-top:12px; min-height:44px;}
body #steer .sc-playback {padding:0; background:none; margin-top:8px; gap:16px;}
body #steer .sc-scrub {display:flex; flex:1;}
body #steer .sc-result.sr-only {position:absolute;}
body #steer .sm-note {margin:12px 0 0;}
@media(max-width:600px){
 body #prepare .contact-controls {flex-wrap:wrap;}
 body #prepare .contact-controls input {flex-basis:100%; order:3;}
 body #prepare .preparation-grid {gap:32px;}
 body #prepare .process-image-pair {gap:12px 6px; grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);}
 .sc-comparison-intro {align-items:flex-start; gap:16px; flex-direction:column;}
 .sc-reference img {width:96px;}
 .sc-reference figcaption {max-width:none;}
 .sc-comparison-grid {gap:12px;}
 body #steer .sm-canvas {height:280px;}
 body #steer .sm-target-key {display:flex; flex-wrap:wrap; gap:8px 16px;}
 .sc-comparison-foot {gap:8px;}
 body #steer .sc-playback {grid-template-columns:auto minmax(0,1fr);}
}

/* Compact experiment readouts retain the measured uncertainty. */
body :is(#ablations,#steer) .plot-readout {display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; min-height:0;}

/* Full-stack recordings roll in sequence; the active video owns diagram time. */
body .deploy-videos {margin-top:24px; padding-top:0; border:0;}
.deploy-gallery-toolbar,.deploy-gallery-heading {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px;}
.deploy-gallery-select {display:flex; flex-wrap:wrap; gap:8px;}
.deploy-gallery-select button,.deploy-gallery-arrows button {border:0; background:transparent; color:var(--muted); min-height:44px; padding:8px 12px; cursor:pointer;}
.deploy-gallery-select button[aria-pressed="true"] {background:#e4ecdf; color:var(--green);}
.deploy-gallery-arrows {display:flex; align-items:center; gap:12px; flex:none;}
.deploy-gallery-arrows button {width:44px; padding:0; color:var(--green);}
.deploy-gallery-heading strong {color:var(--green);}
.deploy-gallery-window {overflow:hidden;}
body .deploy-video-grid {display:grid; grid-auto-flow:column; grid-auto-columns:100%; grid-template-columns:none; gap:0; transform:translateX(calc(var(--gallery-index,0) * -100%)); transition:transform .45s cubic-bezier(.22,1,.36,1);}
body .deploy-video-card {width:100%;}
body .deploy-video-card video {width:100%; height:auto; object-fit:contain; background:transparent;}
body .deploy-gallery-note {margin:12px 0 0; color:var(--muted);}
body .deploy-gallery-toolbar .deploy-controls {gap:8px;}
@media(max-width:600px){
 .deploy-gallery-toolbar {align-items:flex-start; flex-wrap:wrap;}
 .deploy-gallery-select {flex:1 1 100%;}
 .deploy-gallery-heading {align-items:flex-start; gap:8px;}
 .deploy-gallery-arrows {gap:4px;}
 .deploy-gallery-select button {padding:8px;}
}
@media(prefers-reduced-motion:reduce){body .deploy-video-grid {transition:none;}}

body .deploy-planner:not(button) {cursor:default;}