@font-face{font-family:Oxanium;src:url('./assets/fonts/Oxanium-Variable.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
:root{--ink:#ecf0ee;--muted:#9cadaa;--accent:#aee2c9;--line:#ffffff16}*{box-sizing:border-box}body{margin:0;background:#0c1214;color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:disabled{opacity:.4;cursor:wait}[hidden]{display:none!important}header{height:76px;max-width:1640px;padding:0 36px;margin:auto;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}header .brand{font-weight:800;color:var(--ink);text-decoration:none;letter-spacing:3px;font-size:20px}header .brand span{margin-left:14px;color:var(--muted);font-size:10px;font-weight:400;letter-spacing:1.5px}header button{background:none;border:0;color:var(--muted);font-size:12px}main{max-width:1640px;margin:auto;padding:30px 36px 0}.intro{display:flex;justify-content:space-between;align-items:end;margin:0 0 24px;padding:0}.intro h1{font-size:clamp(30px,3.5vw,50px);line-height:1.1;letter-spacing:-1.8px;margin:6px 0 8px}.intro p{color:var(--muted);font-size:14px;margin:0;line-height:1.6}.eyebrow{color:var(--accent)!important;font-size:10px!important;letter-spacing:2px;text-transform:uppercase}.edition{font-size:11px;color:var(--muted);letter-spacing:1px}.topic-nav{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line)}.topic-nav button{border:0;background:transparent;color:var(--muted);padding:16px 10px;text-align:left;border-bottom:2px solid transparent;font-size:13px;line-height:1.3}.topic-nav button span{display:block;font-size:9px;color:#60746f;margin-bottom:7px;letter-spacing:1px}.topic-nav button:hover{background:#ffffff05;color:white}.topic-nav button[aria-pressed=true]{color:var(--accent);border-bottom-color:var(--accent)}.explorer{display:grid;grid-template-columns:minmax(0,1fr) 330px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#111a1c}.stage{min-width:0;background:radial-gradient(ellipse at 45% 38%,#253438 0%,#141f22 65%,#10191c 100%);position:relative}.toolbar{display:flex;gap:6px;align-items:center;padding:16px 18px;position:relative;z-index:2;border-bottom:1px solid #ffffff0b}.toolbar button,.view-choices button,.action-row button{border:1px solid #ffffff20;color:#cdd9d5;background:#111a1ca6;border-radius:6px;font-size:12px;padding:9px 12px;min-height:36px}.toolbar button[aria-pressed=true],.view-choices button[aria-pressed=true],.action-row button[aria-pressed=true]{border-color:#aee2c980;background:#aee2c91a;color:#d8f9e7}.toolbar .camera-menu{margin-left:auto;position:relative}.camera-menu summary{cursor:pointer;color:var(--muted);font-size:12px;padding:8px;list-style:none}.camera-menu>div{position:absolute;right:0;top:34px;width:200px;padding:12px;background:#0f191c;border:1px solid #ffffff20;border-radius:8px;box-shadow:0 10px 40px #0008;display:grid;gap:6px}.camera-menu p{font-size:11px;color:var(--muted);line-height:1.7;margin:5px}.camera-menu button{text-align:left}#viewport{position:relative;height:clamp(350px,calc(100dvh - 330px),600px);width:100%;min-height:0;overflow:hidden;background:none;border:0}#viewport canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-4px}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#152125e8;color:var(--accent);z-index:5;padding:30px;text-align:center}.view-caption{padding:0 22px 18px;min-height:54px;max-width:720px;font-size:13px;line-height:1.6;color:#bdceca}.scene-badge{position:absolute;left:20px;top:18px;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#a7bdb5;pointer-events:none}.scene-note{position:absolute;left:20px;bottom:15px;font-size:10px;color:#849c96;pointer-events:none}.markers{position:absolute;inset:0;pointer-events:none}.marker{position:absolute;transform:translate(-50%,-100%);background:#0b171de6;border:1px solid #b7e8d14d;border-radius:5px;padding:5px 8px;color:#d4eddf;font-size:10px;white-space:nowrap;pointer-events:auto;box-shadow:0 4px 12px #0003}.marker:after{content:'';position:absolute;left:50%;top:100%;height:12px;border-left:1px solid #b7e8d180}.marker:before{content:'';position:absolute;left:calc(50% - 2px);top:calc(100% + 12px);width:5px;height:5px;border-radius:50%;background:var(--accent)}#detail{padding:28px 25px;background:#111a1c;border-left:1px solid var(--line);min-width:0;overflow:visible}#detail .topic-index{font-size:10px;color:var(--accent);letter-spacing:1.5px;text-transform:uppercase}#detail h2{font-size:27px;line-height:1.18;letter-spacing:-.7px;margin:17px 0}#detail p{font-size:13px;line-height:1.75;color:#aabdb7;margin:12px 0}#detail h3{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#d7e7e0;margin:24px 0 8px}.view-choices{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0 12px}.view-choices button{font-size:11px;padding:8px 9px}.action-row{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0}.action-row button{color:var(--accent);border-color:#aee2c944}.action-row button.primary{background:#b7e7d1;color:#10231b;border-color:transparent}#detail details{border-top:1px solid var(--line);padding-top:16px;margin-top:22px}#detail summary{font-size:12px;color:var(--accent);cursor:pointer}#detail .legend{font-size:11px;line-height:1.6;color:#a9c1b7;border-left:2px solid var(--accent);padding-left:10px}.next-topic{display:block;margin-top:28px;background:none;border:0;color:var(--accent);font-size:12px;padding:0;text-align:left}.overview-steps{list-style:none;padding:0;margin:28px 0}.overview-steps li{display:flex;gap:12px;align-items:baseline;margin:16px 0;font-size:13px;color:#aabdb7}.overview-steps b{font-size:10px;color:var(--accent);font-weight:400}.model-credit{font-size:10px;color:#758f86;line-height:1.7;padding:14px 0;margin:0}.model-credit a{color:#98b7aa}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:18px 0 28px;color:#7c938c;font-size:10px;letter-spacing:.5px;background:none;margin-top:8px}dialog{background:#142023;color:#d5e2dc;border:1px solid #ffffff24;border-radius:12px;max-width:650px;width:calc(100% - 36px);padding:30px;max-height:85vh}dialog::backdrop{background:#0009}dialog h2{font-size:25px}dialog p,dialog li{font-size:13px;line-height:1.8;color:#aebfb7}dialog a{color:var(--accent)}dialog .close{float:right;background:transparent;color:#e0eee7;border:0;font-size:22px}noscript{display:block;padding:20px;background:#563d22}
@media(min-width:1400px){.explorer{grid-template-columns:minmax(0,1fr) 360px}#detail{padding:32px}}@media(max-width:1000px){main{padding:24px 20px 0}header{padding:0 20px}.explorer{grid-template-columns:minmax(0,1fr) 290px}#detail{padding:22px 18px}#detail h2{font-size:23px}.topic-nav button{font-size:11px;padding:12px 7px}#viewport{height:clamp(350px,calc(100dvh - 310px),520px)}.toolbar{padding:12px;gap:4px}.toolbar button{padding:8px;font-size:11px}}@media(max-width:760px){header{height:60px}.brand span{display:none}.intro{margin-bottom:16px}.edition{display:none}.intro h1{font-size:34px}.intro p{font-size:12px}.topic-nav{grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:12px}.topic-nav button{font-size:12px;padding:10px 7px}.topic-nav button span{display:none}.explorer{display:flex;flex-direction:column}.toolbar{padding:10px;flex-wrap:wrap}#viewport{height:440px}#detail{border-left:0;border-top:1px solid var(--line);padding:22px}.view-caption{font-size:12px;padding:0 16px 15px;min-height:50px}.scene-note{font-size:9px}.marker{font-size:9px;padding:4px 6px}footer{gap:12px;line-height:1.6}}@media(max-width:420px){main{padding:20px 12px 0}header{padding:0 14px}.toolbar button{font-size:10px;padding:7px}.toolbar .camera-menu summary{font-size:10px;padding:7px}#viewport{height:380px}.intro h1{font-size:30px}.scene-badge{left:14px}.scene-note{left:14px;font-size:8px}.view-choices button{font-size:11px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Motorsport display type; keep longer explanations in the body face. */
:root{--font-display:Oxanium,'Arial Narrow',sans-serif}
header .brand,.intro h1,#detail h2,dialog h2{font-family:var(--font-display);font-weight:600}
header .brand{font-weight:800;letter-spacing:2px}
header .brand span{font-family:Arial,Helvetica,sans-serif}
.intro h1{letter-spacing:-1.2px;line-height:1.15}
#detail h2{letter-spacing:-.4px;line-height:1.25}
.topic-nav button,.eyebrow,.edition,.scene-badge{font-family:var(--font-display)}
.topic-nav button{font-weight:500}
@media(max-width:420px){.intro h1{font-size:28px;letter-spacing:-.6px}header .brand span{margin-left:10px;font-size:8px;letter-spacing:1px}}
/* Component explanations stay next to the model; every label has a keyboard-accessible equivalent. */
.part-list{display:flex;gap:7px;flex-wrap:wrap;padding:0 22px 16px}.part-list:empty{display:none}.part-list button{background:transparent;color:#c4dfd2;border:1px solid #aee2c92b;border-radius:5px;padding:8px 10px;font-size:11px}.part-list button[aria-pressed=true],.marker[aria-pressed=true]{border-color:var(--accent);background:#244136}.component-info{margin:0 18px 20px;padding:20px;border:1px solid #aee2c940;border-radius:8px;background:#10221f;scroll-margin:15px}.component-info:focus{outline:1px solid #aee2c980}.component-heading{display:flex;justify-content:space-between;gap:12px}.component-heading h2{margin:7px 0 12px;font-size:23px}.component-heading button{align-self:start;background:none;color:#bce2ce;border:0;font-size:23px}.component-info p{font-size:13px;line-height:1.7;color:#c1d2c9;margin:6px 0 12px}.component-info h3{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#b0d8c4;margin:17px 0 6px}.connection-path{border-top:1px solid #ffffff16}.brake-lesson{border-top:1px solid var(--line);margin-top:20px}#detail .brake-lesson h3{text-transform:none;letter-spacing:0;font-size:18px;line-height:1.3}.temperature-fact{display:flex;flex-direction:column;gap:5px;border-left:2px solid #ffb966;padding:12px 14px;background:#ffb96608;margin:18px 0}.temperature-fact strong{font-size:30px;color:#ffcb8e}.temperature-fact span{font-size:11px;line-height:1.6;color:#d4bfa4}#detail .lesson-sources{font-size:10px;line-height:1.7}#detail .lesson-sources:empty{display:none}.lesson-sources a{color:#9ac5b1}.heat-chain{padding:0;list-style:none;counter-reset:heat}.heat-chain li{counter-increment:heat;position:relative;padding:0 0 18px 30px;border-left:1px solid #ffb96655;margin-left:8px;font-size:12px}.heat-chain li:before{content:counter(heat);position:absolute;left:-10px;top:0;background:#24332f;color:#ffcb8e;border:1px solid #ffb96666;border-radius:50%;width:19px;height:19px;text-align:center;line-height:18px;font-size:10px}.heat-chain b{display:block;font-size:12px;margin-bottom:6px}.heat-chain span{display:block;color:#aabdb7;line-height:1.7}.tire-choices{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}.tire-choices button{border:1px solid #ffffff26;border-radius:5px;background:#0b1417;color:#cdd9d5;font-size:11px;padding:8px}.tire-choices i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tire-color);margin-right:5px}.tire-choices [aria-pressed=true]{border-color:var(--tire-color)}.tire-choice{display:flex;gap:15px;align-items:start}.tire-choice h4{margin:0;font-size:18px}.tire-choice>div:last-child{min-width:0}#detail .tire-use{font-size:10px;color:#c9ddce;margin:7px 0}.tread-swatch{flex:0 0 52px;height:102px;background:#090d0e;border-left:4px solid var(--tire-color);border-right:4px solid var(--tire-color);border-radius:14px;box-shadow:inset 6px 0 12px #ffffff13,inset -6px 0 12px #ffffff13}.tread-swatch.intermediate{background:repeating-linear-gradient(60deg,#0b1012 0 14px,#6d7b7e 15px 17px,#0b1012 18px 28px)}.tread-swatch.wet{background:repeating-linear-gradient(60deg,#0b1012 0 8px,#6d7b7e 9px 12px,#0b1012 13px 19px)}
@media(min-width:761px){.stage{align-self:start;position:sticky;top:0}.explorer{overflow:clip}}@media(max-width:760px){.part-list{padding:0 16px 14px}.component-info{margin:0 14px 18px;padding:16px}}

/* Close-up comparison: one WebGL canvas, five synchronized scissored views. */
.explorer.comparing{grid-template-columns:minmax(0,1fr)}
.comparing .stage{position:relative}
.comparing #detail{border-left:0;border-top:1px solid var(--line)}
.comparing #viewport{height:680px}
.comparing #tire-controls .action-row{display:inline-flex;margin:8px 12px 6px 0}
.comparing #tire-controls p{font-size:12px;color:#aabdb7;margin:7px 0}
.comparing #tire-controls [aria-pressed=true]{background:#25483e;border-color:#aee2c9}
.comparison-tile{position:absolute;box-sizing:border-box;border:1px solid #ffffff12;padding:15px;text-align:center}
.comparison-tile strong{font:600 17px var(--font-display);display:block;text-shadow:0 1px 5px #000}
.comparison-tile p{position:absolute;bottom:5px;left:12px;right:12px;color:#cfdfda;font-size:12px;line-height:1.5;margin:8px 0;background:#102024dd;border-radius:6px;padding:8px}
@media(max-width:760px){.comparing #viewport{height:960px}.comparison-tile{padding:12px 6px}.comparison-tile p{font-size:11px;left:5px;right:5px;padding:5px}.comparison-tile strong{font-size:15px}}

.dry-stage{display:block;font-size:10px;color:#ffc494;margin-top:7px}.dry-stage[hidden]{display:none}