@font-face{font-family:"Space Grotesk";src:url("assets/SpaceGrotesk-Variable.woff2") format("woff2");font-style:normal;font-weight:300 700;font-display:swap}
:root{color-scheme:dark;--ink:#0b0d12;--graphite:#181c24;--paper:#f4f1ea;--mist:#b7bdc8;--signal:#c5ff61;--line:#697382;--light-x:50%}
*{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:auto}
body{margin:0;color:var(--paper);background:var(--ink);font-family:"Space Grotesk",Arial,sans-serif;font-size:16px;line-height:1.5}
button,input{font:inherit}
button{cursor:pointer}
button,summary,a,input{-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--signal);outline-offset:5px}
[hidden]{display:none!important}
.page-shell{width:min(100% - 96px,1320px);margin:auto}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 0 20px;border-bottom:1px solid #333944}
.wordmark{margin:0;font-size:22px;line-height:1;letter-spacing:.2em;font-weight:700}
.wordmark-dot{color:var(--signal);letter-spacing:0}
.edition{margin:0;text-align:right;font-size:10px;line-height:1.6;letter-spacing:.1em;color:var(--mist)}
.edition span{color:var(--paper)}
.hero-copy{position:relative;z-index:1;padding-top:25px;pointer-events:none}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:11px;letter-spacing:.14em}
.rule{display:inline-block;width:30px;height:2px;background:var(--signal)}
.study-number{color:var(--mist)}
h1{font-size:clamp(56px,6.25vw,90px);letter-spacing:-.055em;line-height:.93;font-weight:700;margin:0}
h1 span{display:block}
.dek{margin:14px 0 0;font-size:18px;line-height:1.4;color:var(--mist)}
.vehicle-study{margin:-8px auto 0;max-width:1160px}
.stage{position:relative;height:clamp(260px,29vw,400px);isolation:isolate;overflow:hidden;background:var(--ink)}
.vehicle{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 43%;display:block;mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 90%,transparent 100%)}
.lit{display:none}
.is-interactive:not(.is-static) .base{filter:brightness(.36)}
.is-interactive:not(.is-static) .lit{display:block;mask-image:linear-gradient(90deg,transparent calc(var(--light-x) - 32%),#000 calc(var(--light-x) - 11%),#000 calc(var(--light-x) + 11%),transparent calc(var(--light-x) + 32%));-webkit-mask-image:linear-gradient(90deg,transparent calc(var(--light-x) - 32%),#000 calc(var(--light-x) - 11%),#000 calc(var(--light-x) + 11%),transparent calc(var(--light-x) + 32%))}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,var(--ink),transparent 10%,transparent 86%,var(--ink)),linear-gradient(90deg,var(--ink),transparent 4%,transparent 96%,var(--ink))}
.image-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid var(--line);color:var(--mist);padding:24px}
.image-fallback p{margin:6px 0}
.image-fallback p:first-child{font-size:24px;color:var(--paper)}
.control-panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:44px;align-items:center;padding-top:12px;border-top:1px solid #333944;scroll-margin-top:16px}
.control-panel:focus{outline:none}
.control-heading{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:14px}
.control-heading label{font-weight:700}
output{font-size:12px;color:var(--mist);white-space:nowrap;font-variant-numeric:tabular-nums}
input[type=range]{display:block;width:100%;height:44px;margin:2px 0 0;padding:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:ew-resize;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--line);border-radius:4px}
input[type=range]::-webkit-slider-thumb{width:24px;height:24px;appearance:none;-webkit-appearance:none;margin-top:-10px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);outline:1px solid var(--paper)}
input[type=range]::-moz-range-track{height:4px;background:var(--line);border-radius:4px}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);outline:1px solid var(--paper)}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.presets button{border:1px solid var(--line);border-radius:3px;min-height:44px;color:var(--paper);background:var(--graphite);padding:9px 12px;font-size:13px}
.presets button[aria-pressed=true]{border-color:var(--paper);box-shadow:inset 0 0 0 1px var(--paper);background:#303540}
.presets button:hover{background:#303540}
.control-help{font-size:11px;line-height:1.5;color:var(--mist);margin:8px 0 0}
.finish-summary{border-left:1px solid #333944;padding-left:36px;display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:8px 22px;align-items:center}
.finish-name{display:flex;align-items:center;gap:12px}
.finish-chip{width:23px;height:32px;border-radius:50%;border:1px solid #bcaef4;background:linear-gradient(110deg,#271e41,#a08ad1 45%,#352447 60%,#554278);transform:rotate(18deg);flex-shrink:0}
.finish-name p{margin:0;font-size:16px}
.finish-name p span{color:var(--mist)}
.finish-name .finish-caption{font-size:12px;color:var(--mist);margin-top:4px}
.full-light{border:2px solid var(--signal);background:var(--signal);color:var(--ink);border-radius:3px;min-height:50px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:14px;font-weight:700}
.full-light svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.4;flex-shrink:0}
.full-light[aria-pressed=true]{background:var(--ink);color:var(--signal)}
.full-light:hover{box-shadow:0 0 0 2px var(--ink),0 0 0 3px var(--signal)}
.view-status{grid-column:1/-1;margin:0;font-size:11px;line-height:1.5;color:var(--mist)}
.mode-note{margin:14px 0 0;font-size:12px;color:var(--mist)}
.footer{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;margin-top:20px;padding:16px 0 22px;border-top:1px solid #333944}
.footer>p{font-size:10px;letter-spacing:.07em;text-align:right;color:var(--mist);margin:12px 0 0}
.footer>p span{display:block;letter-spacing:.04em;margin-top:4px}
.study-notes{max-width:650px;min-width:140px}
.study-notes summary{cursor:pointer;list-style:none;font-size:12px;min-height:44px;display:flex;align-items:center;gap:24px}
.study-notes summary::-webkit-details-marker{display:none}
.study-notes summary span{color:var(--signal);font-size:20px}
.study-notes[open] summary span{transform:rotate(45deg)}
.notes-content{font-size:14px;line-height:1.65;color:var(--mist);padding-bottom:8px}
.notes-content p{margin:0 0 12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:20px;top:12px;z-index:10;background:var(--signal);color:var(--ink);padding:12px 18px;transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
@media(min-width:1000px){.is-static .control-heading output{color:var(--paper)}}
@media(max-width:999px){.page-shell{width:calc(100% - 64px)}h1{font-size:clamp(56px,8.5vw,80px)}.hero-copy{padding-top:32px}.vehicle-study{margin-top:12px;margin-left:-20px;margin-right:-20px}.stage{height:clamp(290px,43vw,400px)}.control-panel{gap:28px;grid-template-columns:1fr}.finish-summary{border-left:0;border-top:1px solid #333944;padding:20px 0 0;grid-template-columns:1fr 190px}.view-status{grid-column:1/-1}.footer{margin-top:24px}}
@media(max-width:539px){.page-shell{width:calc(100% - 40px)}.masthead{gap:12px;padding:22px 0 18px}.wordmark{font-size:17px;letter-spacing:.14em}.edition{font-size:8px;letter-spacing:.06em}.hero-copy{padding-top:25px}.eyebrow{font-size:10px;gap:10px;margin-bottom:15px}.rule{width:24px}h1{font-size:clamp(36px,11.8vw,60px);letter-spacing:-.055em;line-height:.97}.dek{font-size:16px;margin-top:13px}.vehicle-study{margin:8px -20px 0}.stage{height:232px}.vehicle{object-position:50% 43%}.control-panel{padding-top:14px;gap:18px}.control-heading{font-size:12px;gap:8px}output{font-size:10px}.control-help{font-size:10px;max-width:310px}.finish-summary{padding-top:18px;column-gap:12px;grid-template-columns:minmax(0,1fr) 118px}.finish-name{gap:9px}.finish-name p{font-size:13px}.finish-name .finish-caption{font-size:10px}.finish-chip{width:17px;height:25px}.full-light{min-height:48px;font-size:12px;padding:10px 12px;gap:8px}.full-light svg{width:18px;height:18px}.view-status{font-size:10px}.mode-note{font-size:11px;margin-top:12px}.footer{gap:10px;margin-top:18px;padding-top:6px}.footer>p{font-size:8px;line-height:1.65;margin-top:14px}.study-notes summary{font-size:11px;gap:12px}.notes-content{font-size:13px}.study-notes[open]{width:100%}.footer:has(.study-notes[open]){flex-wrap:wrap}.footer:has(.study-notes[open])>p{text-align:left}.study-notes{min-width:125px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.presets button,.full-light{border:2px solid ButtonText}.presets button[aria-pressed=true],.full-light[aria-pressed=true]{outline:2px solid Highlight;outline-offset:-5px}.finish-chip{border-color:CanvasText}input[type=range]{appearance:auto;-webkit-appearance:auto}.rule{background:CanvasText}}
