#hero button{font:inherit;color:inherit;cursor:pointer}#hero button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}#hero .toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px}#hero .toolbar p{font:12px 'JetBrains Mono',monospace;margin:0}#hero .actions{display:flex;gap:16px;flex-wrap:wrap}#hero .text-button{background:none;border:0;border-bottom:1px solid var(--gold);padding:7px 0;font-size:13px}#hero .stage{position:relative;min-height:350px;display:flex;align-items:center;overflow:hidden}#hero .grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;width:100%}#hero .tile{display:block;border:0;padding:0;text-align:left;background:transparent;min-width:0;transform-origin:top left}#hero .film{position:relative;background:var(--ink);aspect-ratio:2 / 1;overflow:hidden}#hero .film video{display:block;width:100%;height:100%;object-fit:contain}#hero .labels{position:absolute;inset:6px 7px auto;display:flex;justify-content:space-between;pointer-events:none}#hero .labels span{font:10px 'JetBrains Mono',monospace;background:#1a1814cf;color:#f0e6d0;padding:3px 5px}#hero .tile-name{display:flex;justify-content:space-between;gap:4px;padding-top:8px;font-size:12px}#hero .tile-name span:last-child{color:var(--teal-text)}#hero .tile[aria-pressed=true] .film{outline:2px solid var(--gold);outline-offset:3px}#hero.intro .tile:not(:first-child){opacity:0}#hero.intro .tile:first-child{position:relative;z-index:2}#hero.intro .tile-name{visibility:hidden}#hero .detail{margin-bottom:24px}#hero .detail[hidden]{display:none}#hero .detail .film{aspect-ratio:2 / 1}#hero .detail video{background:var(--ink)}#hero .detail .labels{inset:14px 16px auto}#hero .detail .labels span{font-size:12px}#hero .detail-title{display:flex;justify-content:space-between;align-items:center;margin:13px 0;gap:12px}#hero .detail-title h2{font-size:19px;font-weight:500;margin:0}#hero .detail-title p{font-size:12px;color:var(--body);margin:5px 0 0}#hero.selected .stage{min-height:0}#hero.selected .grid{gap:12px}#hero .caption{font-size:13px;line-height:1.6;color:var(--body);margin:20px auto 0;max-width:740px;text-align:center}
#hero{margin:40px auto 56px;max-width:1100px}#hero [hidden]{display:none!important}#hero .caption{max-width:740px;margin:20px auto 0;font-size:14px}#hero .detail-title h2{margin:0;font-size:20px}#hero .detail-title p{font-size:13px;margin:6px 0}#hero button{font-family:inherit}#hero .toolbar p{font-size:12px;margin:0}#hero .film video{width:100%;height:100%}
/* widths and the title follow _drafts/site.css, the way the published posts do: one --article column, left aligned in the --column frame, h1 at the site's size and weight */article>p,article>h2,article>h3,article>.draft-note{max-width:var(--article)}article>h1{max-width:var(--article)}article>.standfirst{max-width:var(--article)}article>.takeaways{max-width:var(--article);margin-bottom:40px}article>.release-kicker{max-width:var(--article)}article>.distribution-compare{max-width:var(--article)}.distribution-compare .stock-scenes{display:grid;grid-template-columns:1fr 1fr;gap:12px}.draft-note{border-left:2px solid var(--gold);padding:12px 16px;background:color-mix(in srgb,var(--rule) 7%,transparent);font-size:14px;line-height:1.6;margin-top:24px;margin-bottom:24px;overflow-wrap:anywhere}.draft-note strong{font-weight:500}.takeaways li{font-size:17px}.takeaways{padding-left:22px}article h2{padding-top:8px}#hero .detail .film{aspect-ratio:2/1}
@media(max-width:650px){#hero .stage{min-height:420px}#hero .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}#hero.selected .grid{display:flex;overflow-x:auto;padding:5px 3px 12px;scroll-snap-type:x mandatory}#hero.selected .tile{flex:0 0 145px;scroll-snap-align:start}#hero.selected .stage{overflow:visible}#hero .detail-title{align-items:start}#hero .toolbar p{font-size:11px}}
@media(prefers-reduced-motion:reduce){#hero *{scroll-behavior:auto!important}}


/* Twelve-task gallery: paired head views above four synchronized wrist views. */
#hero .stage{min-height:0;display:block;overflow:visible}#hero.intro .stage{min-height:320px;overflow:hidden}#hero .grid,#hero.selected .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 16px;overflow:visible;padding:0;scroll-snap-type:none}#hero .tile{width:100%;min-width:0}#hero .film,#hero .detail .film{aspect-ratio:8/3}#hero .film video{object-fit:contain}#hero .tile-name{font-size:13px;line-height:1.4}#hero .tile-name span:first-child{color:var(--ink)}#hero .tile-meta{display:block;margin-top:3px;color:var(--muted);font-size:11px}#hero .detail{margin-bottom:36px}#hero .detail-title{margin:0 0 16px}#hero .detail-title p{max-width:650px}#hero .wrist-panel,#hero #missing-wrists{margin:18px auto 0;max-width:720px}#hero .wrist-film{position:relative;aspect-ratio:4/3;background:var(--ink)}#hero .wrist-film video{display:block;width:100%;height:100%;object-fit:contain}#hero .wrist-labels{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;pointer-events:none}#hero .wrist-labels span{justify-self:start;align-self:start;margin:7px;background:#1a1814cf;color:#f0e6d0;padding:3px 5px;font:10px var(--font-mono)}#hero .wrist-help{font-size:13px;margin:0 0 10px}#hero .missing-wrist-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}#hero .missing-wrist-grid>div{padding:20px 12px;background:color-mix(in srgb,var(--rule) 9%,transparent);font-size:12px}#hero .missing-wrist-grid span{display:block;margin-top:8px;color:var(--muted)}#hero .detail .labels span{font-size:11px}#hero .text-button{min-height:36px}
@media(max-width:1000px){#hero .grid,#hero.selected .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){#hero .grid,#hero.selected .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}#hero .stage,#hero.selected .stage{min-height:0}#hero.intro .stage{min-height:230px}#hero.selected .tile{flex:none}#hero .labels span{font-size:8px;padding:2px 3px}#hero .labels{inset:4px 4px auto}#hero .tile-name{font-size:12px}#hero .actions{gap:12px}#hero .wrist-labels span{font-size:8px;margin:4px;padding:2px 3px}#hero .detail .labels span{font-size:9px}#hero .detail .labels{inset:7px 7px auto}}
@media(max-width:340px){#hero .grid,#hero.selected .grid{grid-template-columns:1fr}}

/* Each real/sim montage: one full-width head above two half-width wrists. */
#hero .wrist-panel,#hero #missing-wrists{max-width:none;width:100%;margin:0}#hero .wrist-film{aspect-ratio:16/3}#hero .wrist-labels{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr}#hero .wrist-labels span{font-size:9px;margin:5px;max-width:calc(100% - 10px);line-height:1.4}#hero .missing-wrist-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}#hero .missing-wrist-grid>div{aspect-ratio:4/3;box-sizing:border-box;padding:12px 6px;font-size:10px;overflow-wrap:anywhere}#hero .wrist-film:after,#hero .head-film:after,#hero .missing-wrist-grid:after{content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--bg);pointer-events:none}#hero .missing-wrist-grid{position:relative}
@media(max-width:650px){#hero .wrist-labels span{font-size:7px;margin:3px;padding:2px;max-width:calc(100% - 6px)}#hero .missing-wrist-grid>div{font-size:8px;padding:6px 3px}#hero .missing-wrist-grid span{margin-top:4px}}

.eval-table-wrap{max-width:var(--article);overflow-x:auto;margin:24px 0;overscroll-behavior-x:contain}.eval-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5;color:var(--body);font-variant-numeric:tabular-nums}.eval-table caption{text-align:left;color:var(--ink);font-weight:500;margin-bottom:12px}.eval-table th,.eval-table td{text-align:left;border-bottom:1px solid color-mix(in srgb,var(--rule) 35%,transparent);padding:12px 10px;vertical-align:top}.eval-table th{font-weight:500}.eval-table thead th{font-size:12px;color:var(--muted)}article .eval-note{font-size:13px;line-height:1.6;color:var(--muted);max-width:var(--article);margin:16px 0 24px}.eval-details{max-width:var(--article);margin:24px 0 40px}.eval-details summary{cursor:pointer;color:var(--teal-text);font-size:15px}.eval-details .eval-table-wrap{max-width:var(--article)}.eval-details .eval-note{margin-top:16px}@media(max-width:650px){.eval-table{font-size:12px}.eval-table th,.eval-table td{padding:9px 7px}.eval-table-wrap>.eval-table{min-width:580px}.eval-details .eval-table{min-width:360px}}

#hero .tile-credit{display:block;margin-top:4px;font-size:10px;line-height:1.45;color:var(--muted)}article .media-credit{display:block;font-size:12px;line-height:1.5;color:var(--muted)}#hero #detail-credit{margin:10px 0 0;font-size:12px}.scene .media-credit{font-size:11px}

/* Screw-scene comparison: real episode, its reconstruction, ABC default. */
article .distribution-compare{display:block}.distribution-compare .stock-scenes{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

.eval-table caption.eval-table-caption{caption-side:bottom;margin:0;padding-top:12px;font-size:13px;font-weight:300;line-height:1.6;color:var(--muted);text-align:left}

article .distribution-compare{margin:var(--space-20) auto var(--space-24)}.distribution-compare .stock-compare figcaption{text-align:center}@media(hover:hover) and (pointer:fine){.distribution-compare .pair-im{cursor:crosshair}}

/* Failure comparisons share the hero head-over-wrists montage, three across. */


/* hero: one film, four tasks, real beside sim */
figure.hero-film{max-width:var(--article);margin:40px 0 56px}
.hero-frame{position:relative;aspect-ratio:1448/548;background:var(--bg)}
.hero-frame video{display:block;width:100%;height:100%}
.hero-quads{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;pointer-events:none}
.hero-quads > div{position:relative}
.q-side{position:absolute;top:5px;font:9.5px var(--font-mono);letter-spacing:.04em;background:#1a1814cf;color:#f0e6d0;padding:2px 4px}
.q-side:first-child{left:5px}
.q-side:nth-child(2){left:calc(50% + 5px)}
.q-name{position:absolute;left:5px;bottom:5px;font:11px/1.2 Figtree,system-ui,sans-serif;font-weight:500;background:#1a1814cf;color:#f0e6d0;padding:3px 6px}
figure.hero-film figcaption{margin-top:var(--space-10);font-size:13px;line-height:1.6;color:var(--muted)}

/* explorer: one player, the tasks as stills beneath it. The behavior comparison (#behaviors) shares its player. */
:is(#explorer,#behaviors){max-width:var(--article);margin:48px 0}
:is(#explorer,#behaviors) h3{margin:0 0 var(--space-16)}
.explorer-main{min-width:0}
.explorer-main .film{position:relative;background:var(--ink);aspect-ratio:8/3}
.explorer-main video{display:block;width:100%;height:100%;object-fit:contain}
.explorer-meta{margin:0;font-size:16px;font-weight:500;color:var(--ink)}
.explorer-note{font-size:13px;color:var(--muted)}
:is(#explorer,#behaviors) .wrist-panel{margin-top:3px;max-width:none;width:100%}
:is(#explorer,#behaviors) .caption{max-width:var(--article);margin:var(--space-16) 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
@media (max-width:860px){
  .hero-tiles{grid-template-columns:1fr}
}
/* the overlay labels and the wrist montage were written as #hero rules; the explorer needs its own */
:is(#explorer,#behaviors) .film{position:relative}
:is(#explorer,#behaviors) .labels{position:absolute;inset:7px 8px auto;display:grid;grid-template-columns:1fr 1fr;pointer-events:none}
:is(#explorer,#behaviors) .labels span{justify-self:start;font:10px var(--font-mono);background:#1a1814cf;color:#f0e6d0;padding:3px 5px}
:is(#explorer,#behaviors) .wrist-film{position:relative;aspect-ratio:16/3;background:var(--ink)}
:is(#explorer,#behaviors) .wrist-film video{display:block;width:100%;height:100%;object-fit:contain}
:is(#explorer,#behaviors) .wrist-labels{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));pointer-events:none}
:is(#explorer,#behaviors) .wrist-labels span{justify-self:start;align-self:start;margin:5px;padding:3px 5px;background:#1a1814cf;color:#f0e6d0;font:9px var(--font-mono);line-height:1.4;max-width:calc(100% - 10px)}
:is(#explorer,#behaviors) .wrist-film:after{content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--bg);pointer-events:none}
/* scene sets: one credit for the figure, and dots for which pair of layouts is showing */
.scene-toolbar{display:flex;align-items:center;gap:4px;margin-right:-8px}
.scene-toolbar .scene-next{width:32px;height:32px;padding:0;border:0;border-radius:2px;display:inline-grid;place-items:center;color:var(--muted)}
.scene-toolbar .scene-next svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.scene-toolbar .scene-next:hover{color:var(--ink)}
.scene-toolbar .scene-next:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.scene-dots{display:inline-flex;gap:7px;align-items:center}
.scene-dots span{width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--rule) 65%,transparent)}
.scene-dots span.on{background:var(--gold)}
.scenesets-hint{max-width:var(--article);margin:0 0 var(--space-16);font-size:14px;line-height:1.6;color:var(--muted)}
/* the credit belongs to the images above it, not to the prose that follows */
article .scenesets{margin-bottom:var(--space-10)}
.scenesets-credit{max-width:var(--article);margin:0 0 var(--space-40);font-size:13px;line-height:1.6}

/* section index: in the left margin on wide screens; on narrower ones, in the free space right of the text column
   (the text is left aligned, so that side is wider); hidden where neither side has room */
.toc{display:none;position:fixed;top:140px;z-index:5}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.toc li.sub{padding-left:12px}
.toc a{display:block;font-size:12px;line-height:1.35;color:var(--muted);text-decoration:none;border-left:2px solid transparent;padding-left:10px}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--gold)}
@media (min-width:1660px){
  .toc{display:block;left:max(24px,calc((100vw - var(--column))/2 - 372px));width:min(340px,calc((100vw - var(--column))/2 - 56px))}
}
@media (min-width:1200px) and (max-width:1659px){
  .toc{display:block;left:calc(max(var(--space-56),(100vw - var(--column))/2) + var(--article) + 40px);width:min(260px,calc(100vw - max(var(--space-56),(100vw - var(--column))/2) - var(--article) - 64px))}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* the three panes differ in aspect ratio; centre each image in its box so the row reads as one strip */
.distribution-compare .stock-scenes{align-items:center}
.distribution-compare .pair-im{display:flex;align-items:center;justify-content:center;background:var(--ink)}
.distribution-compare .pair-im img{width:100%;height:100%;aspect-ratio:4/3;object-fit:contain;object-position:center}

/* the three-pane comparison sits on the text column, not centred in the wider frame */
article .distribution-compare{margin-left:0;margin-right:0}
.distribution-compare .stock-compare figcaption{text-align:left}

/* explorer: one film with head over wrists; the frame keeps 16:9 and a real or sim cut sits centred in it */
:is(#explorer,#behaviors) .explorer-film{position:relative;aspect-ratio:16/9;background:var(--ink)}
:is(#explorer,#behaviors) .explorer-film video{display:block;width:100%;height:100%;object-fit:contain}
:is(#explorer,#behaviors) .explorer-film .labels{position:absolute;inset:7px 8px auto;display:block;pointer-events:none}
:is(#explorer,#behaviors) .explorer-film .labels span{position:absolute;top:0;font:10px var(--font-mono);background:#1a1814cf;color:#f0e6d0;padding:3px 5px}
:is(#explorer,#behaviors) .explorer-film[data-view="full"] .lab-real{left:0}
:is(#explorer,#behaviors) .explorer-film[data-view="full"] .lab-sim{left:50%}
:is(#explorer,#behaviors) .explorer-film[data-view="real"] .lab-real{left:0}
:is(#explorer,#behaviors) .explorer-film[data-view="real"] .lab-sim,:is(#explorer,#behaviors) .explorer-film[data-view="sim"] .lab-real{display:none}
:is(#explorer,#behaviors) .explorer-film[data-view="sim"] .lab-sim{left:0}
.explorer-views{display:flex;gap:var(--space-16);margin:0 0 var(--space-10)}
.explorer-views button{padding:0 0 2px;border:0;border-bottom:1.5px solid transparent;background:none;font:500 13px Figtree,system-ui,sans-serif;color:var(--body);cursor:pointer}
.explorer-views button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--gold)}
/* real and sim cuts are 2:1, head beside its two wrist cameras; the frame follows so they fill it */
:is(#explorer,#behaviors) .explorer-film[data-view="real"],:is(#explorer,#behaviors) .explorer-film[data-view="sim"]{aspect-ratio:2/1}

/* checkpoint scores as grouped bars: real against sim per checkpoint, three tasks side by side on one scale.
   Colours validated for lightness, chroma, colour-blind separation and contrast on each mode's surface. */
.bars-chart{--real:#a96d06;--sim:#008c82}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bars-chart,:root:not([data-theme="light"]) .bars-legend{--real:#bf8519;--sim:#1a9d91}}
:root[data-theme="dark"] .bars-chart,:root[data-theme="dark"] .bars-legend{--real:#bf8519;--sim:#1a9d91}
.bars-legend{--real:#a96d06;--sim:#008c82;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:var(--space-16) 0 var(--space-10);font-size:13px;color:var(--body)}
.bars-legend .key{width:10px;height:10px;border-radius:2px;display:inline-block}
.bars-legend .key.real{background:var(--real)}
.bars-legend .key.sim{background:var(--sim);margin-left:10px}
.bars-note{flex-basis:100%;font-size:12.5px;color:var(--muted)}
.bars-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-20);max-width:var(--article)}
.bars-chart{margin:0;position:relative}
.bars-chart figcaption{margin:0 0 4px;font-size:14px;font-weight:500;color:var(--ink)}
.bars-chart svg{display:block;width:100%;height:auto;overflow:visible}
.bars-chart .grid{stroke:var(--rule);stroke-opacity:.22;stroke-width:1;pointer-events:none}
.bars-chart .axis{stroke:var(--rule);stroke-opacity:.6;stroke-width:1}
.bars-chart .tick,.bars-chart .cat{font:10.5px Figtree,system-ui,sans-serif;fill:var(--muted)}
.bars-chart .bar{cursor:pointer;outline:none}
.bars-chart .bar.real{fill:var(--real)}
.bars-chart .bar.sim{fill:var(--sim)}
.bars-chart .bar:hover,.bars-chart .bar:focus-visible{opacity:.8}
.bars-chart .err{stroke:var(--ink);stroke-opacity:.55;stroke-width:1;pointer-events:none}
.bars-tip{position:absolute;z-index:3;pointer-events:none;padding:6px 8px;background:var(--bg);border:1px solid var(--rule);font-size:12.5px;line-height:1.4;color:var(--ink);white-space:pre}
.bars-tip[hidden]{display:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
table.visually-hidden{display:block}  /* a table ignores width:1px and kept its full width, widening the page on phones */
@media (max-width:760px){.bars-grid{grid-template-columns:1fr}}
/* the unfolded evaluation detail sits indented under its summary */
.eval-details > :not(summary){margin-left:var(--space-32)}
.eval-details > .bars-legend{margin-top:var(--space-16)}
.bars-chart .val{font:9.5px Figtree,system-ui,sans-serif;fill:var(--body)}
.bars-chart .ylab{font:10.5px Figtree,system-ui,sans-serif;fill:var(--muted)}
.bars-caption{max-width:var(--article);margin:var(--space-10) 0 var(--space-20);font-size:13px;line-height:1.6;color:var(--muted)}
.bars-chart .val-bg{fill:var(--bg);pointer-events:none}
.bars-chart .val{pointer-events:none}
.eval-method{max-width:var(--article);margin:var(--space-16) 0 var(--space-10);font-size:18px;line-height:1.65;font-weight:300;color:var(--body)}
.eval-method strong{font-weight:500;color:var(--ink)}
.eval-heading{max-width:var(--article);margin:var(--space-20) 0 0;font-size:18px;font-weight:500;color:var(--ink)}
.eval-heading + .eval-method{margin-top:var(--space-10)}

/* behavior comparison: the player, then the selected failure, then the three failures as stills; narrower than the column */
#behaviors{max-width:min(var(--article),720px)}
.behavior-detail{margin:var(--space-10) 0 0}
.behavior-description{margin:4px 0 0;font-size:14px;line-height:1.55;color:var(--body);max-width:var(--article)}
/* task stills: a picker under a player (the failures here, the tasks in the explorer) */
.task-picks{list-style:none;margin:var(--space-16) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-10)}
.task-picks li{margin:0}
.task-picks button{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--body)}
.task-picks img{display:block;width:100%;aspect-ratio:8/3;object-fit:cover;background:var(--ink);opacity:.7;outline:2px solid transparent;outline-offset:2px}
/* the name under the still; the selected one is underlined in gold, as the site marks its current link */
.task-picks span{display:inline-block;margin-top:6px;padding-bottom:2px;border-bottom:2px solid transparent;font:500 13px/1.35 Figtree,system-ui,sans-serif}
.task-picks button:hover img{opacity:1}
.task-picks button[aria-pressed="true"] img{opacity:1;outline-color:var(--gold)}
.task-picks button[aria-pressed="true"] span{color:var(--ink);border-bottom-color:var(--gold)}
.task-picks button:focus-visible{outline:2px solid var(--teal-text);outline-offset:4px}
@media(max-width:520px){.behavior-picks{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 8px}.behavior-picks li{scroll-snap-align:start}}  /* phones: one swipeable row, as in the explorer */
/* the explorer's ten tasks: five to a row above the player, the sim scene at the start of each episode; one scrolling
   row on phones. Stills and player are left-aligned and narrower than the column. */
#explorer .explorer-body{max-width:85%}
/* the view buttons: a column at the player's top right */
#explorer .explorer-main{display:grid;grid-template-columns:minmax(0,1fr) max-content;column-gap:var(--space-10);align-items:start}
#explorer .explorer-views{flex-direction:column;gap:6px;margin:0}
#explorer .explorer-views{align-items:stretch}
#explorer .explorer-views button{padding:6px 10px;border:1px solid color-mix(in srgb,var(--rule) 45%,transparent);border-radius:6px;background:none;color:var(--body);font:500 12px/1.2 Figtree,system-ui,sans-serif}
#explorer .explorer-views button:hover{color:var(--ink);border-color:var(--rule)}
#explorer .explorer-views button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
#explorer .explorer-views button:focus-visible{outline:2px solid var(--teal-text);outline-offset:2px}
.explorer-picks{margin:0 0 var(--space-20);grid-template-columns:repeat(5,minmax(0,1fr));row-gap:var(--space-16)}
.explorer-picks span{font-size:12px}
.explorer-picks img{aspect-ratio:4/3}
@media(max-width:640px){#explorer .explorer-body{max-width:none}.explorer-picks{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:38%;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 8px}.explorer-picks li{scroll-snap-align:start}}

/* simulated training data: four 4:3 episode films, each looping on its own clock (they differ in length), in one row;
   two by two on phones */
.lighting-grid{max-width:var(--article);margin:var(--space-24) 0 40px}
.lighting-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.lighting-film{position:relative;aspect-ratio:4/3;background:var(--ink)}
.lighting-film video{display:block;width:100%;height:100%;object-fit:cover}
.lighting-sim{position:absolute;top:6px;left:6px;padding:3px 5px;font:10px var(--font-mono);background:#1a1814cf;color:#f0e6d0;pointer-events:none}
@media(max-width:620px){.lighting-mosaic{grid-template-columns:repeat(2,1fr)}.lighting-sim{top:4px;left:4px;padding:2px 3px;font-size:9px}}
.lighting-grid figcaption{margin-top:var(--space-10);font-size:13px;line-height:1.6;color:var(--muted);text-align:left}

/* sim-to-real results: two compact panels side by side; one series, so one colour */
.transfer-results{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:var(--space-40,40px);align-items:start;max-width:var(--article);margin:var(--space-24) 0 0}
.transfer-results .transfer-rollout{max-width:none;margin:0}
.transfer-title{margin:0 0 4px;font-size:14px;font-weight:500;color:var(--ink)}
.transfer-bars{grid-template-columns:1fr;gap:var(--space-16)}
@media(max-width:650px){.transfer-results{grid-template-columns:1fr}}
.bars-chart .bar.one{fill:var(--sim)}

/* sim-to-real rollout: head over both wrists, sized so the tall frame stays on screen */
.transfer-rollout{max-width:min(var(--article),440px);margin:var(--space-24) 0 40px}
.transfer-rollout .film{position:relative;aspect-ratio:8/9;background:var(--ink)}
.transfer-rollout video{display:block;width:100%;height:100%;object-fit:contain}
/* whether the episode on show completed the task, over the film's top-left corner */
.rollout-outcome{position:absolute;top:8px;left:8px;padding:3px 6px;font:11px var(--font-mono);background:#1a1814cf;color:#f0e6d0;pointer-events:none}
.rollout-outcome[data-outcome="success"]{color:#8fd8b8}
.rollout-outcome[data-outcome="failure"]{color:#f0a38f}
.transfer-rollout figcaption{margin-top:var(--space-10);font-size:13px;line-height:1.6;color:var(--muted);text-align:left}
.transfer-toolbar{position:static;height:auto;justify-content:flex-start;margin-top:var(--space-10);margin-left:-8px;margin-right:0}

/* second download link, after the release bullets; same link look as the one above the title */
article>.release-link{max-width:var(--article);margin:var(--space-24) 0 var(--space-32)}
/* the download link after the figure: larger teal text with a small mono label, so it reads as the release's call to action */
.release-link a{display:inline-flex;align-items:baseline;gap:12px;font:500 19px/1.35 Figtree,system-ui,sans-serif;color:var(--teal-text);text-decoration:none;border-bottom:1.5px solid color-mix(in srgb,var(--teal-text) 45%,transparent);padding-bottom:3px}
.release-link .rl-k{font:12px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.release-link a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.release-link a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* phones: the correlation plot keeps its plot area only, with readable text and the legend below it */
.plot-legend{display:none}
@media(max-width:650px){
  .plot svg .legend,.plot svg .labels{display:none}
  .plot svg text{font-size:21px}
  .plot-legend{display:grid;gap:6px;margin:var(--space-10) 0 0}
  .plot-legend button{display:flex;align-items:center;gap:8px;padding:4px 0;border:0;background:none;text-align:left;font:300 13px/1.4 Figtree,system-ui,sans-serif;color:var(--body);cursor:pointer}
  .plot-legend button[aria-pressed="false"]{opacity:.4}
  article figure.plot .plot-legend svg{width:12px;height:12px;flex:none}
  .plot-legend strong{font-weight:500;color:var(--ink)}
  .plot-legend button>span{flex:1;min-width:0;white-space:normal}
  .plot-legend button>span span{display:inline}
  .eval-table caption{position:sticky;left:0;max-width:calc(100vw - 48px)}
  .eval-details > :not(summary){margin-left:var(--space-16)}
}

/* sim-to-real results: each column carries its own caption */
.transfer-charts{min-width:0}
.transfer-charts .bars-caption{margin:var(--space-10) 0 0}

/* RL episodes in What's next: four side by side from the head camera, a label under each */
.rl-film{max-width:var(--article);margin:var(--space-24) 0 40px}
.rl-film .film{position:relative;aspect-ratio:16/3;background:var(--ink)}
.rl-film video{display:block;width:100%;height:100%;object-fit:contain}
.rl-film .labels{position:absolute;inset:7px 8px auto;pointer-events:none}
.rl-film .labels span{font:10px var(--font-mono);background:#1a1814cf;color:#f0e6d0;padding:3px 5px}
.rl-labels{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rl-labels li{margin:0;font:500 12px/1.35 Figtree,system-ui,sans-serif;color:var(--ink)}
.rl-film figcaption{margin-top:var(--space-10);font-size:13px;line-height:1.6;color:var(--muted);text-align:left}
/* the RL episodes as the second row of the training-data figure */
.lighting-grid .rl-mosaic{margin-top:3px}

/* hero: the caption on the left, a button down to the task explorer on its right; stacked on phones */
figure.hero-film figcaption{display:flex;gap:24px;align-items:flex-start;justify-content:space-between}
@media (max-width:640px){figure.hero-film figcaption{flex-direction:column;gap:14px}}
.hero-explore{flex:none;white-space:nowrap;display:inline-block;padding:8px 16px;border-radius:999px;background:var(--ink);color:var(--bg);font:500 14px/1.2 Figtree,system-ui,sans-serif;text-decoration:none}
.hero-explore:hover{background:var(--teal-text);color:#fff}
.hero-explore:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#explorer{scroll-margin-top:100px}

/* the summary as three short points above the hero film: the standfirst's light weight and size, a small teal triangle for each
   point, and a measure narrower than the column so each point is two lines at most; site.css sets article li, so items reset it */
article>h1:has(+ .standfirst-points){margin-bottom:28px}
article>.standfirst-points{max-width:min(var(--article),820px);margin:0 0 44px;padding:0;list-style:none;display:grid;gap:14px;font-size:20px;font-weight:300;line-height:1.45;color:var(--body)}
article>.standfirst-points>li{position:relative;margin:0;padding:0 0 0 26px;font:inherit;color:inherit}
article>.standfirst-points>li::before{content:"";position:absolute;left:2px;top:.5em;width:0;height:0;border-style:solid;border-width:.3em 0 .3em .48em;border-color:transparent transparent transparent var(--teal)}
article>.standfirst-points+*{margin-top:0}
@media (max-width:600px){article>h1:has(+ .standfirst-points){margin-bottom:20px}article>.standfirst-points{margin-bottom:28px;gap:12px;font-size:15px}article>.standfirst-points>li{padding-left:22px}}

/* phones: the hero plays one task (hero_phone_padlock.mp4, swapped in by the inline script) with its own labels and caption */
.cap-phone{display:none}
@media (max-width:640px){
  .hero-frame{aspect-ratio:1044/390}
  .hero-quads{grid-template-columns:1fr;grid-template-rows:1fr}
  .hero-quads>div:not(:first-child){display:none}
  .q-side{font-size:10.5px}.q-name{font-size:12.5px}
  .cap-wide{display:none}.cap-phone{display:inline}
}
/* phones: the real / Versor / ABC comparison becomes one swipeable row, about 2.3 images in view, like the explorer and
   failure pickers; desktop keeps three side by side */
@media (max-width:600px){.distribution-compare .stock-scenes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:42%;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.distribution-compare .stock-scenes>*{scroll-snap-align:start}}
/* phones: the explorer's Real / Sim / Both buttons sit in a row above the video, so the video takes the full width */
@media (max-width:600px){#explorer .explorer-main{grid-template-columns:1fr;row-gap:8px}#explorer .explorer-views{order:-1;flex-direction:row;justify-content:flex-start;gap:6px}}

/* the real-to-sim-to-real overview (work/blog-tools/make-pipeline-figure.py): four steps, arrows between them on wide screens */
.pipeline-figure{max-width:var(--article);margin:var(--space-28) 0 var(--space-24)}
.pf-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.pf-step{position:relative;margin:0;min-width:0}
.pf-step:not(:last-child)::after{content:'→';position:absolute;right:-22px;top:calc(50% - 46px);font-size:18px;line-height:1;color:var(--muted)}
.pf-art{display:block;width:100%;height:auto;overflow:visible}
.pf-title{margin:10px 0 0;font-size:14px;font-weight:500;line-height:1.35;color:var(--ink)}
.pf-num{display:inline-block;margin-right:7px;font:11px var(--font-mono);color:var(--muted)}
.pf-sub{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.pipeline-figure figcaption{margin-top:var(--space-16);font-size:13px;line-height:1.6;color:var(--muted)}
.pipeline-figure{--real:#a96d06;--sim:#008c82}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pipeline-figure{--real:#bf8519;--sim:#1a9d91}}
:root[data-theme="dark"] .pipeline-figure{--real:#bf8519;--sim:#1a9d91}
.pf-real{--tone:var(--real)}.pf-sim{--tone:var(--sim)}
.pf-face{stroke:var(--tone);stroke-width:1.1;stroke-linejoin:round}
.pf-top{fill:color-mix(in srgb,var(--tone) 10%,var(--bg))}
.pf-side-a{fill:color-mix(in srgb,var(--tone) 24%,var(--bg))}
.pf-side-b{fill:color-mix(in srgb,var(--tone) 38%,var(--bg))}
.pf-line,.pf-path,.pf-loop,.pf-axis,.pf-trace{fill:none;stroke-linecap:round;stroke-linejoin:round}
.pf-line{stroke:var(--tone);stroke-width:1.6}
.pf-link{fill:none;stroke:var(--tone);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.pf-link-hi{fill:none;stroke:color-mix(in srgb,var(--tone) 40%,var(--bg));stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pf-wrist{fill:none;stroke:var(--tone);stroke-width:4.5;stroke-linecap:round}
.pf-arm-link{stroke-width:1.2}
.pf-jaw{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.pf-joint{fill:var(--bg);stroke:var(--tone);stroke-width:1.4}
.pf-path{stroke:color-mix(in srgb,var(--gold) 82%,var(--ink));stroke-width:1.5;opacity:.6}
.pf-path-main{opacity:1;stroke-width:2.8;stroke-dasharray:none}
.pf-loop{stroke:var(--tone);stroke-width:1.6}
.pf-loop-text{font:500 10px var(--font-mono);fill:var(--tone)}
.pf-card{fill:color-mix(in srgb,var(--tone) 8%,var(--bg));stroke:color-mix(in srgb,var(--tone) 60%,var(--bg));stroke-width:1}
.pf-card-front{fill:var(--bg);stroke:var(--tone);stroke-width:1.2}
.pf-axis{stroke:var(--muted);stroke-width:1}
.pf-trace{stroke-width:2}
.pf-trace-0,.pf-trace-2{stroke:var(--tone)}.pf-trace-1,.pf-trace-3{stroke:var(--gold)}
.pf-rec{fill:#d2483c;r:4.2px}
.pf-badge{fill:var(--tone)}
.pf-badge-text{font:500 20px var(--font-sans);fill:var(--bg)}
@media(max-width:640px){.pf-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}.pf-step::after{display:none}.pf-sub{font-size:12px}}
.pf-scatter-frame{fill:var(--bg);stroke:color-mix(in srgb,var(--tone) 55%,var(--bg));stroke-width:1}
.pf-scatter-diag{stroke:var(--muted);stroke-width:.8;stroke-dasharray:2 2;opacity:.7}
.pf-scatter-dot{fill:var(--tone)}
.pf-scatter-text{font:11px var(--font-mono);fill:var(--body)}
/* Citation card: a label and copy button above the BibTeX; long values wrap under their opening brace */
article>.cite-card{max-width:var(--article);min-width:0;margin:var(--space-20) 0 var(--space-40);border:1px solid color-mix(in srgb,var(--rule) 35%,transparent);border-radius:6px;background:color-mix(in srgb,var(--rule) 6%,transparent);overflow:hidden}
.cite-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 8px var(--space-20);border-bottom:1px solid color-mix(in srgb,var(--rule) 25%,transparent)}
.cite-label{font:12px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cite-copy{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid color-mix(in srgb,var(--rule) 40%,transparent);border-radius:4px;background:none;color:var(--body);font:500 12px/1 Figtree,system-ui,sans-serif;cursor:pointer;transition:color .15s,border-color .15s}
.cite-copy:hover{color:var(--ink);border-color:var(--rule)}
.cite-copy:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.cite-copy.done{color:var(--teal-text);border-color:var(--teal)}
pre.citation{margin:0;padding:var(--space-16) var(--space-20) var(--space-20);white-space:pre-wrap;overflow-wrap:anywhere;font:12.5px/1.75 var(--font-mono);color:var(--body)}
.citation .bt-line{display:block;min-height:1.75em;padding-left:var(--hang,0);text-indent:calc(-1 * var(--hang,0))}
pre.citation code{font:inherit}
.citation .bt-type{color:var(--teal-text);font-weight:500}
.citation .bt-key{color:var(--ink);font-weight:500}
.citation .bt-field{color:var(--muted)}
.citation .bt-punct{color:var(--muted);opacity:.7}
@media(max-width:650px){pre.citation{font-size:11.5px;padding:var(--space-16)}.cite-head{padding-left:var(--space-16)}}