:root{
  --bg:#ECEAE3;        /* chalk: white body panel under snow light */
  --panel:#F6F5F0;
  --panel-2:#E2DFD6;
  --ink:#17171B;       /* suede black */
  --ink-2:#55544F;
  --ink-3:#7E7C74;
  --line:#CFCBC0;      /* dust hairline */
  --line-2:#B9B4A6;
  --red:#C8102E;       /* harness webbing */
  --red-ink:#A40D25;   /* red used as text on light */
  --lcd:#E9A23B;       /* tripmeter amber, telemetry only */
  --code-bg:#1D1D22;
  --code-ink:#E8E6DE;
  --shadow:0 1px 0 rgba(23,23,27,.06), 0 12px 32px -20px rgba(23,23,27,.35);
  --display:"Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --body:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --measure:66ch;
  --gutter:clamp(18px, 5vw, 64px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#131418; --panel:#1B1D22; --panel-2:#23262C;
    --ink:#ECEAE3; --ink-2:#B7B4AB; --ink-3:#8A877E;
    --line:#2C2F36; --line-2:#3C404A;
    --red:#E1364A; --red-ink:#F06A7A; --lcd:#F0B04E;
    --code-bg:#0E0F12; --code-ink:#E8E6DE;
    --shadow:0 1px 0 rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#131418; --panel:#1B1D22; --panel-2:#23262C;
  --ink:#ECEAE3; --ink-2:#B7B4AB; --ink-3:#8A877E;
  --line:#2C2F36; --line-2:#3C404A;
  --red:#E1364A; --red-ink:#F06A7A; --lcd:#F0B04E;
  --code-bg:#0E0F12; --code-ink:#E8E6DE;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.8);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.55; font-feature-settings:"kern"}
img{max-width:100%; display:block}
a{color:inherit; text-decoration-color:var(--line-2); text-underline-offset:3px}
a:hover{text-decoration-color:var(--red)}
:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:2px}
h1,h2,h3{margin:0; text-wrap:balance}
p{margin:0 0 1em}
code,pre,kbd{font-family:var(--mono)}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- station strip (sticky nav) ---------- */
.strip{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.strip-in{display:flex; align-items:stretch; gap:0; padding:0 var(--gutter); overflow-x:auto; scrollbar-width:none}
.strip-in::-webkit-scrollbar{display:none}
.brand{font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:.06em; text-transform:uppercase; padding:14px 18px 14px 0; margin-right:6px; border-right:1px solid var(--line); white-space:nowrap; display:flex; align-items:center; gap:10px; text-decoration:none}
.brand .plate{display:inline-block; background:var(--ink); color:var(--bg); padding:1px 6px; font-size:13px; letter-spacing:.12em; border-radius:2px}
.strip nav{display:flex; gap:2px}
.strip nav a{font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:14px 12px; color:var(--ink-2); white-space:nowrap; border-bottom:2px solid transparent; display:flex; gap:8px; align-items:baseline}
.strip nav a .n{font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.strip nav a:hover{color:var(--ink)}
.strip nav a[aria-current="true"]{color:var(--ink); border-bottom-color:var(--red)}
.strip nav a[aria-current="true"] .n{color:var(--red-ink)}

/* ---------- hero ---------- */
.hero{padding:0 0 12px}
@media (min-width:1000px){
  .hero{display:grid; grid-template-columns:minmax(0, 62fr) minmax(0, 38fr); align-items:start; padding:0}
  .hero .car{grid-column:1}
  .hero .hero-copy{grid-column:2; grid-template-columns:minmax(0,1fr); gap:20px; padding:34px var(--gutter) 28px 40px; align-self:stretch; display:flex; flex-direction:column; justify-content:flex-end}
  .hero .h1{font-size:clamp(40px, 5.4vw, 84px)}
  .hero .car-bar{padding-left:var(--gutter); padding-right:24px}
}
.car{margin:0; position:relative}
.car-scroller{overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.car-scroller::-webkit-scrollbar{display:none}
.car-frame{position:relative; width:100%; aspect-ratio:1400/781; background:var(--panel-2)}
.car-frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.car-frame img[hidden]{display:none}
@media (max-width:720px){
  .car-frame{width:190vw; min-width:700px}
  .brand{font-size:0; gap:0; padding-right:12px}
  .brand .plate{font-size:13px}
}
.station{scroll-margin-top:54px}
@media (max-width:640px){ table.plain td:first-child{white-space:normal} }
.marker{position:absolute; transform:translate(-50%,-50%); width:44px; height:44px; border:0; background:transparent; padding:0; cursor:pointer; display:grid; place-items:center; border-radius:50%}
.marker i{display:block; width:18px; height:18px; border-radius:50%; background:var(--bg); border:2px solid var(--ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--bg) 70%, transparent), 0 2px 8px rgba(0,0,0,.35); transition:transform .15s ease, background .15s ease}
.marker i::after{content:""; position:absolute; inset:50%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--ink); transition:background .15s ease}
.marker span{position:absolute; top:calc(50% + 16px); left:50%; transform:translateX(-50%); font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(20,20,24,.82); padding:3px 7px 2px; border-radius:2px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s ease}
.marker:hover i,.marker:focus-visible i,.marker[data-active="true"] i{background:var(--red); border-color:#fff; transform:scale(1.1)}
.marker:hover i::after,.marker:focus-visible i::after,.marker[data-active="true"] i::after{background:#fff}
.marker:hover span,.marker:focus-visible span,.marker[data-active="true"] span{opacity:1}
.marker[hidden]{display:none}
@media (hover:none){ .marker span{opacity:1; font-size:11px; top:calc(50% + 14px)} }
.car-bar{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; padding:12px var(--gutter) 0}
.seg{display:inline-flex; border:1px solid var(--line-2); border-radius:3px; overflow:hidden}
.seg button{font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.1em; text-transform:uppercase; padding:8px 14px 7px; background:var(--panel); color:var(--ink-2); border:0; cursor:pointer}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.hint{font-size:14px; color:var(--ink-3)}
.hint b{color:var(--ink-2); font-weight:500}
.hint .swipe{display:none}
@media (max-width:720px){ .hint .swipe{display:inline} .hint .tap{display:none} }

.hero-copy{display:grid; grid-template-columns:minmax(0, 1fr); gap:22px; padding:34px var(--gutter) 20px}
@media (min-width:900px){ .hero-copy{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:48px; align-items:end} }
.eyebrow{font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); display:flex; gap:12px; align-items:center; margin-bottom:14px}
.eyebrow::before{content:""; width:28px; height:3px; background:var(--red)}
.h1{font-family:var(--display); font-weight:700; font-size:clamp(44px, 7.2vw, 96px); line-height:.94; letter-spacing:-.005em; text-transform:uppercase}
.h1 em{font-style:normal; color:var(--red-ink)}
.lede{font-size:clamp(17px, 1.4vw, 20px); line-height:1.5; max-width:var(--measure); color:var(--ink)}
.lede p+p{margin-top:.6em}
.hero-meta{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:14px; color:var(--ink-2); border-top:1px solid var(--line); padding-top:14px; align-self:end}
.hero-meta dt{font-family:var(--display); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-size:12px; padding-top:2px}
.hero-meta dd{margin:0}

/* ---------- stations ---------- */
.station{border-top:1px solid var(--line); padding:44px var(--gutter) 56px}
.station-head{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 22px; align-items:start; margin-bottom:26px}
.station-no{font-family:var(--display); font-weight:700; font-size:clamp(56px, 8vw, 104px); line-height:.85; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.02em; position:relative; padding-right:18px}
.station-no::after{content:""; position:absolute; right:0; top:8%; bottom:8%; width:3px; background:var(--red)}
.station-part{font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--red-ink); margin-bottom:6px}
.station h2{font-family:var(--display); font-weight:700; font-size:clamp(34px, 4.6vw, 60px); line-height:.98; text-transform:uppercase; letter-spacing:-.005em}
.station .sub{font-size:16px; color:var(--ink-2); margin-top:8px; max-width:var(--measure)}
.sheet{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:0; border:1px solid var(--line); border-radius:3px; background:var(--panel); margin:0 0 28px; box-shadow:var(--shadow)}
.sheet > div{padding:14px 16px 16px; border-right:1px solid var(--line); min-width:0}
.sheet > div:last-child{border-right:0}
@media (max-width:640px){ .sheet > div{border-right:0; border-bottom:1px solid var(--line)} .sheet > div:last-child{border-bottom:0} }
.sheet dt{font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px}
.sheet dd{margin:0; font-size:15px; line-height:1.45; color:var(--ink)}
.sheet dd code{font-size:12.5px; word-break:break-all; color:var(--ink-2)}
.sheet dd a{color:var(--ink-2)}
.station-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:28px}
@media (min-width:1000px){ .station-grid{grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); gap:56px; align-items:start} .station-grid > .side{position:sticky; top:66px} }
.prose{max-width:var(--measure)}
.prose h3{font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin:26px 0 8px; display:flex; align-items:center; gap:10px}
.prose h3::after{content:""; flex:1; height:1px; background:var(--line)}
.prose p{color:var(--ink)}
.prose ul{padding-left:1.1em; margin:0 0 1em}
.prose li{margin:.25em 0}
.prose li::marker{color:var(--red-ink)}
.photo{border-radius:3px; overflow:hidden; background:var(--panel-2); box-shadow:var(--shadow)}
.photo img{width:100%; height:auto}
.photo figcaption{font-size:13px; color:var(--ink-3); padding:8px 2px 0}
.side .photo{margin-bottom:18px}
.callout{border-left:3px solid var(--red); padding:4px 0 4px 16px; margin:18px 0; color:var(--ink); font-size:16.5px}
.callout p{margin:0}
pre.code{background:var(--code-bg); color:var(--code-ink); border-radius:3px; padding:16px 18px; overflow-x:auto; font-size:12.5px; line-height:1.55; margin:14px 0 18px; tab-size:2}
pre.code .c{color:#8F9BA8}
pre.code .k{color:#F2B8C0}
pre.code .s{color:#C9E4A8}
pre.code .n{color:#F0B04E}
.code-cap{font-size:13px; color:var(--ink-3); margin:-10px 0 18px}

/* funnel numerals (editorial, not a chart) */
.funnel{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:12px 0 22px}
.funnel > div{padding:14px 14px 14px 0; border-right:1px solid var(--line); margin-right:14px}
.funnel > div:last-child{border-right:0; margin-right:0}
.funnel b{display:block; font-family:var(--display); font-weight:700; font-size:clamp(40px, 5vw, 60px); line-height:.9; letter-spacing:-.01em}
.funnel span{display:block; font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.35}
.funnel > div:last-child b{color:var(--red-ink)}

table.plain{width:100%; border-collapse:collapse; font-size:14.5px; margin:8px 0 20px}
table.plain th{text-align:left; font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:8px 10px 8px 0; border-bottom:1px solid var(--line-2)}
table.plain td{padding:9px 10px 9px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink)}
table.plain td:first-child{font-weight:500; white-space:nowrap}
table.plain td.dim{color:var(--ink-2)}
.tablewrap{overflow-x:auto}

/* ---------- telemetry ---------- */
.tele{background:var(--panel); border-top:1px solid var(--line)}
.lcd{display:inline-flex; align-items:baseline; gap:10px; font-family:var(--mono); font-size:13px; color:var(--ink-2); border:1px solid var(--line-2); border-radius:3px; padding:6px 10px; background:var(--bg)}
.lcd{flex-wrap:wrap}
.lcd .dot{width:8px; height:8px; border-radius:50%; background:var(--lcd); box-shadow:0 0 8px var(--lcd); align-self:flex-start; margin-top:5px; flex:none}
.lcd[data-live="false"] .dot{background:var(--ink-3); box-shadow:none}
.tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin:22px 0 26px}
.tile{background:var(--bg); border:1px solid var(--line); border-radius:3px; padding:14px 14px 12px; min-width:0}
.tile .lab{font-size:13px; color:var(--ink-2); line-height:1.3}
.tile .val{font-family:var(--body); font-weight:600; font-size:34px; line-height:1.05; margin:6px 0 4px; letter-spacing:-.01em}
.tile .sub{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); overflow-wrap:anywhere}
.charts{display:grid; grid-template-columns:minmax(0,1fr); gap:26px; margin:0 0 26px}
@media (min-width:900px){ .charts{grid-template-columns:1fr 1fr} }
.chart{background:var(--bg); border:1px solid var(--line); border-radius:3px; padding:16px 16px 12px}
.chart h3{font-family:var(--body); font-weight:600; font-size:15px; margin:0 0 2px}
.chart .desc{font-size:13px; color:var(--ink-2); margin:0 0 14px}
.bars{display:grid; gap:10px}
.bar{display:grid; grid-template-columns:minmax(120px, 34%) 1fr auto; gap:0 10px; align-items:center; font-size:13.5px}
.bar .l{color:var(--ink-2); line-height:1.25}
.bar .t{height:24px; display:flex; align-items:center}
.bar .f{height:16px; background:var(--red); border-radius:0 4px 4px 0; min-width:2px; position:relative}
.bar .f.dim{background:var(--line-2)}
.bar .v{font-variant-numeric:tabular-nums; font-weight:500; color:var(--ink); min-width:3ch; text-align:right}
.chart details{margin-top:12px; font-size:13px}
.chart summary{cursor:pointer; color:var(--ink-2)}
.chart table{width:100%; border-collapse:collapse; margin-top:8px}
.chart td,.chart th{text-align:left; padding:5px 8px 5px 0; border-bottom:1px solid var(--line); font-size:13px}
.chart td:last-child,.chart th:last-child{text-align:right; font-variant-numeric:tabular-nums}
.tele .prose{max-width:var(--measure)}
.tablelist{width:100%; border-collapse:collapse; font-size:14px; margin:6px 0 4px}
.tablelist th{text-align:left; font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:8px 10px 8px 0; border-bottom:1px solid var(--line-2)}
.tablelist td{padding:9px 10px 9px 0; border-bottom:1px solid var(--line); vertical-align:top}
.tablelist td code{font-size:12px; color:var(--ink-2)}
.tablelist td:last-child{text-align:right; font-variant-numeric:tabular-nums; font-weight:500}

/* ---------- pace notes ---------- */
.notes{display:grid; gap:0; border-top:1px solid var(--line-2)}
.note{display:grid; grid-template-columns:minmax(90px, 110px) minmax(0,1fr); gap:6px 18px; padding:16px 0; border-bottom:1px solid var(--line)}
@media (min-width:800px){ .note{grid-template-columns:110px minmax(0,1fr) minmax(0,1fr); gap:0 28px} }
.note .d{font-family:var(--mono); font-size:12.5px; color:var(--ink-3); padding-top:3px}
.note .w{color:var(--ink)}
.note .w b{font-weight:600}
.note .c{color:var(--ink-2)}
.note .c::before{content:"Fix. "; font-family:var(--display); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:12px; color:var(--red-ink)}
.note .c.open::before{content:"Open. "}
@media (max-width:799px){ .note .w{grid-column:2} .note .c{grid-column:2} }

/* ---------- plate / footer ---------- */
.plate-sec{position:relative; border-top:1px solid var(--line)}
.plate-sec .photo{border-radius:0; box-shadow:none}
.plate-sec .photo img{aspect-ratio:1000/558; object-fit:cover; max-height:60vh}
.plate-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:24px; padding:34px var(--gutter) 40px}
@media (min-width:900px){ .plate-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px} }
.rally-plate{border:3px solid var(--ink); border-radius:6px; padding:16px 18px 14px; display:grid; gap:6px; max-width:420px; background:var(--panel)}
.rally-plate .top{display:flex; justify-content:space-between; font-family:var(--display); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:13px; color:var(--ink-2)}
.rally-plate .num{font-family:var(--display); font-weight:700; font-size:88px; line-height:.85; letter-spacing:-.02em}
.rally-plate .num small{font-size:26px; letter-spacing:.06em; color:var(--red-ink); vertical-align:top; margin-left:8px}
.rally-plate .bot{font-size:14px; color:var(--ink-2); border-top:1px solid var(--line-2); padding-top:8px; display:flex; flex-wrap:wrap; gap:6px 16px}
.links{display:grid; gap:10px; font-size:16px}
.links a{display:flex; gap:12px; align-items:baseline; text-decoration:none; border-bottom:1px solid var(--line); padding:10px 0}
.links a .k{font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); min-width:92px}
.links a:hover .k{color:var(--red-ink)}
footer{padding:18px var(--gutter) 40px; font-size:13px; color:var(--ink-3); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between}

/* ---------- v2: stage flow ---------- */
html{scroll-behavior:smooth}
.topbar{position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px var(--gutter); background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.topbar .brand{border-right:0; padding:4px 0; margin:0}
.steps{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.steps a{font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; padding:8px 10px; color:var(--ink-2); white-space:nowrap; border-bottom:2px solid transparent}
.steps a .n{font-size:11px; color:var(--ink-3); margin-right:6px}
.steps a[aria-current="true"]{color:var(--ink); border-bottom-color:var(--red)}
.stage{position:relative; background:#0f1113; overflow:hidden}
.stage .media{position:relative; width:100%; aspect-ratio:16/9; max-height:82vh; background:#0f1113}
.stage video,.stage img.poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.stage img.poster{transition:opacity .6s ease}
.stage[data-played="true"] img.poster{opacity:0}
.stage .kb img.poster{animation:kb 14s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1) translate(0,0)} to{transform:scale(1.08) translate(-1.5%, -1%)}}
.stage .over{position:absolute; inset:auto 0 0 0; padding:clamp(16px,4vw,44px) var(--gutter); background:linear-gradient(to top, rgba(12,13,15,.86), rgba(12,13,15,.35) 60%, transparent); color:#f1efe8}
.stage .over .eyebrow{color:#d9d6cc}
.stage .over .eyebrow::before{background:var(--red)}
.stage .over .h1{color:#fff; font-size:clamp(34px, 5.2vw, 68px)}
.stage .over .h1 em{color:#ff5d6e}
.stage .over .lede{color:#e6e3da; max-width:60ch}
.stage .over .actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; align-items:center}
.btn{font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:.12em; text-transform:uppercase; padding:12px 18px 11px; border-radius:3px; border:2px solid var(--red); background:var(--red); color:#fff; cursor:pointer; text-decoration:none; display:inline-flex; gap:10px; align-items:center}
.btn.ghost{background:transparent; color:inherit; border-color:currentColor}
.btn:hover{filter:brightness(1.08)}
.next{display:flex; justify-content:flex-end; padding:8px var(--gutter) 40px}
.station{padding-top:36px}
.station .sheet dt{color:var(--ink-3)}
.claim{font-size:clamp(17px,1.5vw,20px); max-width:64ch; color:#e6e3da}
.claim b{color:#fff; font-weight:600}
.start-wrap{display:grid; gap:14px; justify-items:start; padding:10px var(--gutter) 48px}
.start-wrap .btn{font-size:20px; padding:16px 26px 15px}
.start-wrap .note{font-size:14px; color:var(--ink-3); max-width:60ch}
/* start overlay + drive */
#driveLayer{position:fixed; inset:0; z-index:50; background:#0f1113; display:none}
#driveLayer.on{display:block}
#driveLayer video.start{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
#driveLayer .mount{position:absolute; inset:0}
#driveLayer canvas{display:block; width:100%; height:100%}
.drive-hud{position:absolute; inset:0; pointer-events:none; color:#f1efe8; font-family:var(--mono)}
.drive-hud .trip{position:absolute; top:14px; background:rgba(12,13,15,.7); border:1px solid rgba(255,255,255,.12); border-radius:3px; padding:8px 10px 6px; display:grid; gap:2px; min-width:92px}
.drive-hud .trip .lab{font-size:10px; letter-spacing:.14em; color:#b9b5aa}
.drive-hud .trip b{font-size:26px; line-height:1; color:var(--lcd); font-weight:500; text-shadow:0 0 10px rgba(240,176,78,.5)}
.drive-hud .trip .unit{font-size:11px; color:#b9b5aa}
.drive-hud .trip:nth-child(1){left:14px} .drive-hud .trip:nth-child(2){left:120px} .drive-hud .trip:nth-child(3){left:226px} .drive-hud .trip:nth-child(4){left:332px}
.drive-hud .drive-help{position:absolute; bottom:14px; left:14px; font-size:12px; color:#cfcbc0; background:rgba(12,13,15,.55); padding:6px 8px; border-radius:3px}
.drive-hud .drive-exit{position:absolute; top:14px; right:14px; display:flex; gap:8px; pointer-events:auto}
.drive-hud .drive-exit button{font-family:var(--display); font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:13px; padding:9px 12px 8px; background:rgba(12,13,15,.75); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:3px; cursor:pointer}
.drive-ctl{position:absolute; bottom:18px; right:14px; display:none; grid-template-columns:repeat(2, 64px); gap:10px; pointer-events:auto}
.drive-ctl button{height:64px; border-radius:8px; border:1px solid rgba(255,255,255,.3); background:rgba(12,13,15,.6); color:#fff; font-family:var(--display); font-weight:700; letter-spacing:.1em; font-size:16px; touch-action:none; user-select:none; -webkit-user-select:none}
.drive-ctl button:active{background:var(--red)}
@media (hover:none) and (pointer:coarse){ .drive-ctl{display:grid} .drive-help{display:none} .drive-hud .trip:nth-child(4){display:none} }
@media (max-width:640px){ .drive-hud .trip{min-width:78px; padding:6px 8px 4px} .drive-hud .trip b{font-size:20px} .drive-hud .trip:nth-child(2){left:100px} .drive-hud .trip:nth-child(3){left:186px} .drive-hud .trip:nth-child(4){left:272px} }

.drive-hud .pace{position:absolute; left:50%; top:18%; transform:translateX(-50%); font-family:var(--display); font-weight:700; font-size:clamp(28px, 5vw, 56px); letter-spacing:.06em; text-transform:uppercase; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6); opacity:0; transition:opacity .25s ease; pointer-events:none}
.drive-hud .pace.on{opacity:1}