/* manechinul-de-la-volan: test-lab concrete by day, the dark of the crash hall by night. Calibration yellow marks, never text. */
:root{
  --bg:#f2f1ec; --bg2:#e7e5de; --surface:#fbfaf6; --ink:#16171a; --ink2:#2a2c30; --muted:#45474c; --line:#c6c3b9; --line-soft:#dbd8cf;
  --acc-ink:#6a3f00; --mark:#f2c200; --mark-ink:#16171a; --focus:#1f4fd1; --tip-bg:#16171a; --tip-ink:#f6f4ee;
  --him:#245a85; --her:#a3361a; --her-soft:rgba(163,54,26,.14); --him-soft:rgba(36,90,133,.14); --ghost:#8a877f;
  --r0:#e4e1d6; --r1:#f2d58f; --r2:#eda457; --r3:#d25a2c; --r4:#8c2214; --body:#d9c3a5; --body-line:#5b4a37; --seat:#3c3f44; --wheel:#2a2c30;
  --b5:rgba(60,140,90,.13); --b4:rgba(220,170,40,.15); --b3:rgba(220,110,40,.15); --b2:rgba(190,50,30,.15);
  --to-top-bg:#f2f1ec; --to-top-fg:#16171a;
  --disp:"Fraunces",Georgia,serif; --serif:"Source Serif 4",Georgia,serif; --ui:"Atkinson Next",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}
html.dark{
  --bg:#111214; --bg2:#17191c; --surface:#1d1f23; --ink:#efede7; --ink2:#dcd9d1; --muted:#b9b6ae; --line:#3d4046; --line-soft:#2a2d32;
  --acc-ink:#ffd25a; --mark:#f2c200; --focus:#9db8ff; --tip-bg:#efede7; --tip-ink:#111214;
  --him:#8dbbe6; --her:#ff9b7a; --her-soft:rgba(255,155,122,.16); --him-soft:rgba(141,187,230,.16); --ghost:#8d8a83;
  --r0:#34363b; --r1:#6b5a2a; --r2:#a8692f; --r3:#e0683a; --r4:#ff9c80; --body:#6f6252; --body-line:#c9b79c; --seat:#5b5f66; --wheel:#c9c6be;
  --b5:rgba(90,190,130,.13); --b4:rgba(240,190,60,.13); --b3:rgba(240,130,60,.14); --b2:rgba(240,90,70,.15);
  --to-top-bg:#111214; --to-top-fg:#efede7;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
svg[hidden]{display:none}
html{-webkit-text-size-adjust:100%;scroll-padding-top:56px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.125rem/1.62 var(--serif);text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:var(--acc-ink);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:.5rem 1rem;z-index:50}
.skip:focus{left:8px;top:8px}
h1,h2,h3{font-family:var(--disp);font-weight:520;letter-spacing:-.012em;line-height:1.13;margin:0 0 .55em}
h1{font-size:clamp(1.8rem,2.4vw + .9rem,2.9rem);font-variation-settings:"opsz" 120;font-weight:470;text-wrap:balance}
h2{font-size:clamp(1.45rem,1.5vw + 1rem,2.05rem);font-variation-settings:"opsz" 72;text-wrap:balance;position:relative}
h3{font-size:1.2rem;margin-top:1.6em}
p{margin:0 0 1em}
.anchor{position:absolute;left:-1.1em;opacity:0;text-decoration:none;color:var(--muted);font-weight:400}
h2:hover .anchor,.anchor:focus{opacity:1}
.kicker{font:600 .8rem/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--acc-ink);margin:0 0 .9rem;display:flex;align-items:center;gap:.5rem}
.kicker .tgt{width:16px;height:16px;flex:none}
.note{font:400 .9rem/1.5 var(--ui);color:var(--muted)}
.wrap{max-width:42rem;margin:0 auto;padding:0 16px}
.wide{max-width:66rem;margin:0 auto;padding:0 16px}
.nw{white-space:nowrap}
.him{color:var(--him);font-weight:600}.her{color:var(--her);font-weight:600}

/* topbar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.9rem;height:44px;padding:0 max(16px,env(safe-area-inset-left));background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:1px solid var(--line-soft);font:500 .9rem/1 var(--ui)}
.home{display:flex;align-items:center;gap:.45rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.home .motif{width:20px;height:20px}
.t-y{fill:var(--mark)}
.topnav{display:flex;gap:1rem;overflow:hidden;min-width:0}
.topnav a{color:var(--ink2);text-decoration:none;white-space:nowrap}
.topnav a:hover{color:var(--ink);text-decoration:underline}
.spacer{flex:1}
.chip{color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.36rem .7rem;min-height:32px;display:inline-flex;align-items:center}
.icon-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.progress i{display:block;height:100%;width:100%;background:repeating-linear-gradient(90deg,var(--mark) 0 10px,var(--ink) 10px 20px);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:1060px){.topnav{display:none}}
@media (pointer:coarse){.icon-btn{width:44px;height:44px}.chip{min-height:44px}}

/* rail */
.rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:8px;opacity:0;transition:opacity .4s}
html.past-hero .rail{opacity:1}
.rail-dot{position:relative;display:block;width:14px;height:14px}
.rail-dot .dot{position:absolute;inset:5px;border-radius:50%;background:var(--line)}
.rail-dot[aria-current] .dot{background:var(--ink);inset:3px}
.rail-label{position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;font:500 .8rem/1 var(--ui);background:var(--tip-bg);color:var(--tip-ink);padding:.35rem .5rem;border-radius:4px;opacity:0;pointer-events:none}
.rail-dot:hover .rail-label,.rail-dot:focus .rail-label{opacity:1}
@media (max-width:1240px){.rail{display:none}}

/* hero */
.hero{padding:1.6rem 0 2.2rem}
.intro{max-width:72rem;margin:0 auto;padding:0 16px 1.1rem;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:.5rem 2.6rem;align-items:end}
.intro h1{margin:0;max-width:22ch}
.deck{font-size:1.08rem;line-height:1.52;color:var(--ink2);max-width:37rem;margin:0}
@media (max-width:900px){.intro{grid-template-columns:1fr}.deck{margin-top:.7rem}}
.pair{max-width:72rem;margin:0 auto;padding:0 16px}
.pair-ctl{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:.2rem 0 .7rem}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.seg button{font:600 .92rem/1 var(--ui);padding:.5rem .95rem;min-height:44px;border:0;background:transparent;color:var(--ink2);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:700px){.pair-grid{grid-template-columns:1fr}}
.shot{margin:0;background:var(--surface);border:1px solid var(--line-soft);border-radius:.6rem;overflow:hidden}
.shot .ph{position:relative;aspect-ratio:2619/1825;background:var(--bg2)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .35s}
.shot img.after{opacity:0}
.pair[data-state=after] .shot img.after{opacity:1}
@media (prefers-reduced-motion:reduce){.shot img{transition:none}}
.tag{position:absolute;left:.6rem;top:.6rem;font:700 .82rem/1 var(--ui);padding:.42rem .6rem;border-radius:.35rem;background:var(--tip-bg);color:var(--tip-ink);letter-spacing:.02em}
.shot figcaption{padding:.7rem .85rem .8rem;font:400 .9rem/1.45 var(--ui);color:var(--ink2)}
.shot figcaption b{font-weight:700;color:var(--ink)}
.stars{font:700 1rem/1 var(--ui);letter-spacing:.06em;white-space:nowrap}
.stars .off{opacity:.28}
.him-c .stars{color:var(--him)}.her-c .stars{color:var(--her)}
.credit{font:400 .78rem/1.4 var(--ui);color:var(--muted);margin:.5rem 0 0}
.tiles{max-width:72rem;margin:1.6rem auto 0;padding:0 16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
@media (max-width:820px){.tiles{grid-template-columns:1fr}}
.tile{border-top:3px solid var(--ink);padding:.7rem .1rem 0}
.tile .big{font:470 2.3rem/1 var(--disp);font-variant-numeric:tabular-nums;margin:0 0 .35rem}
.tile p{font:400 .95rem/1.45 var(--ui);color:var(--ink2);margin:0}

/* sections */
.block{padding:3.2rem 0}
.tinted{background:var(--bg2)}
.fig{margin:1.2rem 0 1.4rem}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-family:var(--ui)}
.chart .ax{font-size:12px;fill:var(--muted)}
.chart .lab{font-size:13px;fill:var(--ink2)}
.chart .labb{font-size:13px;fill:var(--ink);font-weight:700}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .band5{fill:var(--b5)}.chart .band4{fill:var(--b4)}.chart .band3{fill:var(--b3)}.chart .band2{fill:var(--b2)}
.chart .bandlab{font-size:12px;fill:var(--ink2);font-weight:600}
.chart .him-d{fill:var(--surface);stroke:var(--him);stroke-width:2.4}
.chart .her-d{fill:var(--her)}
.chart .her-p{fill:var(--surface);stroke:var(--her);stroke-width:2}
.chart .link{stroke:var(--muted);stroke-width:1.6}
.chart .up{stroke:var(--her);stroke-width:2.2;fill:none}
.chart .down{stroke:var(--him);stroke-width:2.2;fill:none}
.chart .flat{stroke:var(--ghost);stroke-width:2;fill:none}
.chart .diag{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:4 4}
.chart .pt{fill:var(--ink2);opacity:.38}
.chart .pt.lt{fill:var(--her);opacity:.62}
.chart .pt.gt{fill:var(--him);opacity:.62}
.chart .sel{fill:none;stroke:var(--ink);stroke-width:2.5}
.chart .sel-dot{fill:var(--mark);stroke:var(--ink);stroke-width:1.5}
.legend{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;font:500 .85rem/1.3 var(--ui);color:var(--ink2);margin:.6rem 0 0;padding:0;list-style:none}
.legend li{display:flex;align-items:center;gap:.4rem}
.legend i{display:inline-block;width:.85rem;height:.85rem;border-radius:50%}
.legend .lh{border:2.4px solid var(--him);background:var(--surface)}
.legend .lf{background:var(--her)}
.legend .lp{border:2px solid var(--her);background:var(--surface)}
.legend .sq{border-radius:.15rem}
.scrollx{overflow-x:auto}
.ph-only{display:none}
@media (max-width:640px){.ph-only{display:block}.dt-only{display:none}.twin .chart .ax,.twin .chart .labb{font-size:15px}.scat .chart .ax{font-size:21px}.scat .pt{r:5px}}
.twin{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media (max-width:760px){.twin{grid-template-columns:1fr}}
.twin h3{margin:0 0 .3rem;font-size:1.08rem}

/* picker */
.picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin:1.2rem 0 .4rem}
@media (max-width:760px){.picker{grid-template-columns:1fr 1fr}}
.picker label{display:block;font:600 .82rem/1.3 var(--ui);color:var(--ink2);margin-bottom:.3rem}
select{width:100%;font:500 1rem/1.2 var(--ui);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:.6rem .6rem;min-height:44px}
select:disabled{opacity:.5}
.pick-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:.5rem 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.55rem 1rem;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font:600 .92rem/1 var(--ui);cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.small{min-height:40px;padding:.4rem .85rem;font-size:.88rem}
.car{background:var(--surface);border:1px solid var(--line-soft);border-radius:.8rem;padding:1.1rem 1.1rem 1.2rem;margin-top:1rem;font:400 .95rem/1.5 var(--ui)}
.car-title{font:520 1.5rem/1.15 var(--disp);margin:0 0 .25rem}
.car-sub{color:var(--muted);margin:0 0 .8rem;font-size:.88rem}
.car-lede{font:500 1.06rem/1.5 var(--serif);color:var(--ink);margin:0 0 .9rem}
.seats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
@media (max-width:860px){.seats{grid-template-columns:1fr}}
.seat{border:1px solid var(--line-soft);border-radius:.6rem;padding:.7rem .75rem .8rem;background:var(--bg)}
.seat.ghosted{border-style:dashed}
.seat h4{margin:0 0 .15rem;font:700 .95rem/1.25 var(--ui)}
.seat .who{margin:0 0 .4rem;font-size:.82rem;color:var(--muted)}
.seat svg{display:block;width:100%;height:auto;max-height:190px}
.seat .st{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin:.35rem 0 .2rem;font-size:.86rem;color:var(--ink2)}
.regions{list-style:none;margin:.3rem 0 0;padding:0;font-size:.82rem}
.regions li{display:grid;grid-template-columns:4.6rem 1fr 3.2rem;align-items:center;gap:.4rem;margin:.18rem 0}
.regions .bar{height:.55rem;background:var(--line-soft);border-radius:.3rem;overflow:hidden}
.regions .bar i{display:block;height:100%;border-radius:.3rem}
.regions .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink2)}
.seat .why{font-size:.85rem;color:var(--ink2);margin:.5rem 0 0}
.rk{font:500 .8rem/1.3 var(--ui);color:var(--muted);display:flex;flex-wrap:wrap;gap:.3rem .8rem;margin:.8rem 0 0;padding:0;list-style:none}
.rk li{display:flex;align-items:center;gap:.3rem}.rk i{width:.8rem;height:.8rem;border-radius:.15rem;display:inline-block;border:1px solid var(--line)}
.dm .rg{stroke:var(--body-line);stroke-width:1.3}
.dm .limb{stroke:var(--body-line);stroke-width:1.3;fill:var(--body)}
.dm .arm{fill:none;stroke:var(--body);stroke-width:7;stroke-linecap:round}
.dm.ghost .arm{stroke:var(--ghost);stroke-width:1.3;stroke-dasharray:4 3}
.dm .seatp{fill:var(--seat);opacity:.35}
.dm .wheel{fill:none;stroke:var(--wheel);stroke-width:4.5;stroke-linecap:round}
.dm .wheel.col{stroke-width:3}
.dm .dash{fill:var(--seat);opacity:.25}
.dm .dist{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:3 3}
.dm .distt{font:700 11px var(--ui);fill:var(--ink)}
.dm.ghost .rg,.dm.ghost .limb{fill:none;stroke:var(--ghost);stroke-dasharray:4 3}
.rc0{fill:var(--r0)}.rc1{fill:var(--r1)}.rc2{fill:var(--r2)}.rc3{fill:var(--r3)}.rc4{fill:var(--r4)}
.bg0{background:var(--r0)}.bg1{background:var(--r1)}.bg2{background:var(--r2)}.bg3{background:var(--r3)}.bg4{background:var(--r4)}

.callout{border-left:4px solid var(--mark);padding:.2rem 0 .2rem 1rem;margin:1.2rem 0}
table.data{width:100%;border-collapse:collapse;font:400 .92rem/1.35 var(--ui);margin-top:1rem}
table.data th,table.data td{padding:.5rem .5rem;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
table.data .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.data thead th{font-weight:600;color:var(--ink2);border-bottom-color:var(--line)}
table.data caption{caption-side:bottom;text-align:left;font:400 .88rem/1.45 var(--ui);color:var(--muted);padding-top:.6rem}
table.data tbody th{font-weight:600}
.share-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:.9rem}
.share-row .lbl{font:500 .85rem/1 var(--ui);color:var(--muted);margin-right:.2rem}
.sh{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--ink);cursor:pointer}
.sh svg{width:18px;height:18px}
.sh:hover,.sh:focus-visible{color:var(--acc-ink);border-color:var(--acc-ink)}
@media (pointer:coarse){.sh{width:44px;height:44px}}
.status{font:400 .85rem/1.3 var(--ui);color:var(--muted);min-height:1.2em;margin:.3rem 0 0}
.plain{list-style:none;padding:0}
.sources li{margin:.5rem 0;font:400 .95rem/1.45 var(--ui)}
.checklist{padding-left:1.2rem}.checklist li{margin:.45rem 0}
footer{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;padding:2rem 16px 3rem;font:400 .9rem/1.4 var(--ui);color:var(--muted);border-top:1px solid var(--line-soft)}
footer a{color:var(--ink2)}
.mt{margin-top:1.2rem}
@media (max-width:760px){body{font-size:1.06rem}.hero{padding-top:1rem}h1{font-size:1.7rem}.deck{font-size:1.02rem}.tile .big{font-size:2rem}}
@media print{.topbar,.rail,.share-row,.pair-ctl,.picker,.pick-actions{display:none}}