: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 */
  --red-lit:#FF5D6E;   /* red used as text on the film */
  --lcd:#E9A23B;       /* tripmeter amber, telemetry only */
  --film:#0F1113;      /* the dark ground under the clips */
  --chalk:#F1EFE8;     /* text on the film */
  --chalk-2:#CFCBC0;
  --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);
  --bar-h:52px;
  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{-webkit-text-size-adjust:100%; background:var(--film)}
body{margin:0; background:var(--film); color:var(--chalk); font-family:var(--body); font-size:17px; line-height:1.55; font-feature-settings:"kern"; overscroll-behavior-y:none}
body.no-scroll{overflow:hidden}
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)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }

/* ---------- topbar (over the film) ---------- */
.topbar{position:fixed; top:0; left:0; right:0; z-index:30; height:var(--bar-h); display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 var(--gutter); background:linear-gradient(to bottom, rgba(12,13,15,.72), rgba(12,13,15,.38)); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--chalk); transition:opacity .4s ease}
.topbar.hidden{opacity:0; pointer-events:none}
.brand{font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; display:flex; align-items:center; gap:10px; text-decoration:none}
.brand .plate{display:inline-block; background:var(--chalk); color:var(--film); padding:1px 6px; font-size:13px; letter-spacing:.12em; border-radius:2px}
.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(--chalk-2); white-space:nowrap; border-bottom:2px solid transparent}
.steps a .n{font-size:11px; color:#9c988d; margin-right:6px}
.steps a[aria-current="true"]{color:#fff; border-bottom-color:var(--red)}
.steps a[aria-current="true"] .n{color:var(--red-lit)}
.progress{position:absolute; left:0; right:0; bottom:-1px; height:2px; background:rgba(255,255,255,.12)}
.progress i{display:block; height:100%; width:0; background:var(--red); transition:width .08s linear}
@media (max-width:720px){
  .brand{font-size:0; gap:0}
  .brand .plate{font-size:13px}
  .steps a{padding:8px 7px; font-size:13px}
  .steps a .n{display:none}
}

/* ---------- the film ---------- */
.film{position:fixed; inset:0; z-index:1; background:var(--film); overflow:hidden}
.reel{position:absolute; inset:0}
.reel video,.reel img.poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; will-change:opacity; pointer-events:none}
.reel video.gone{display:none}
.grade{position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(12,13,15,.88) 0, rgba(12,13,15,.55) 26%, rgba(12,13,15,.12) 52%, transparent 70%); opacity:1; transition:opacity .5s ease}
.grade.off{opacity:0}
.game{position:absolute; inset:0; opacity:0; pointer-events:none}
.game.on{pointer-events:auto}
.game canvas{display:block; width:100%; height:100%}
.game-fail{position:absolute; inset:0; display:grid; place-items:center; padding:24px; color:var(--chalk); text-align:center}

/* cards ride on the film; site.js sets --o (opacity) and --ty (rise) from scroll */
.cards{position:absolute; inset:0; pointer-events:none}
.card{position:absolute; left:var(--gutter); right:var(--gutter); bottom:max(28px, env(safe-area-inset-bottom)); max-width:620px; color:var(--chalk); opacity:var(--o, 0); transform:translate3d(0, var(--ty, 24px), 0); pointer-events:none; will-change:opacity, transform}
.card.live{pointer-events:auto}
.card .eyebrow{font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--chalk-2); display:flex; gap:12px; align-items:center; margin:0 0 12px}
.card .eyebrow::before{content:""; width:28px; height:3px; background:var(--red)}
.card .eyebrow .no{color:#fff; font-size:15px}
.h1{font-family:var(--display); font-weight:700; font-size:clamp(38px, 6vw, 82px); line-height:.94; letter-spacing:-.005em; text-transform:uppercase; color:#fff}
.h1 em{font-style:normal; color:var(--red-lit)}
.h2{font-family:var(--display); font-weight:700; font-size:clamp(32px, 4.4vw, 58px); line-height:.96; text-transform:uppercase; letter-spacing:-.005em; color:#fff}
.claim{font-size:clamp(16px, 1.35vw, 19px); max-width:60ch; color:#e6e3da; margin-top:16px}
.line{font-size:clamp(15.5px, 1.25vw, 18px); color:#e6e3da; margin:12px 0 0; max-width:58ch}
.facts{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 18px; margin:18px 0 0; border-top:1px solid rgba(255,255,255,.22); padding-top:12px}
.facts dt{font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#b9b5aa}
.facts dd{margin:4px 0 0; font-size:15px; line-height:1.35; color:#fff}
.facts dd code{font-size:13px; color:#f1efe8; background:rgba(255,255,255,.08); padding:1px 5px; border-radius:2px}
.card .actions{display:flex; flex-wrap:wrap; gap:12px 16px; margin-top:20px; align-items:center}
.card .hint{font-size:14px; color:var(--chalk-2)}
.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; line-height:1}
.btn.ghost{background:transparent; color:inherit; border-color:currentColor}
.btn:hover{filter:brightness(1.08)}
.card.intro{max-width:760px}
.card.drive{left:50%; right:auto; bottom:auto; top:50%; width:min(92vw, 720px); max-width:none; text-align:center; transform:translate(-50%, -50%) translate3d(0, var(--ty, 24px), 0)}
.card.drive .line{margin:22px auto 0; max-width:52ch; color:var(--chalk-2); font-size:15px}
.card.drive.hidden{display:none}
.wheel{display:grid; gap:8px; justify-items:center; margin:0 auto; padding:clamp(22px, 3.4vw, 34px) clamp(34px, 6vw, 72px) clamp(20px, 3vw, 30px); border:0; border-radius:8px; background:var(--red); color:#fff; cursor:pointer; box-shadow:0 30px 80px -24px rgba(200,16,46,.95), 0 0 0 0 rgba(200,16,46,.55); animation:ring 2.4s ease-out infinite; transition:transform .15s ease, filter .15s ease}
.wheel .big{font-family:var(--display); font-weight:700; font-size:clamp(34px, 6vw, 72px); line-height:.95; letter-spacing:.06em; text-transform:uppercase}
.wheel .small{font-family:var(--display); font-weight:600; font-size:clamp(12px, 1.2vw, 15px); letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.85)}
.wheel:hover{transform:scale(1.03); filter:brightness(1.06)}
.wheel:active{transform:scale(.99)}
@keyframes ring{0%{box-shadow:0 30px 80px -24px rgba(200,16,46,.95), 0 0 0 0 rgba(200,16,46,.55)} 70%{box-shadow:0 30px 80px -24px rgba(200,16,46,.95), 0 0 0 22px rgba(200,16,46,0)} 100%{box-shadow:0 30px 80px -24px rgba(200,16,46,.95), 0 0 0 22px rgba(200,16,46,0)}}
/* mini tiles on the dash card */
.tiles.mini{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:16px 0 10px}
.tiles.mini .tile{background:rgba(12,13,15,.55); border:1px solid rgba(255,255,255,.16); border-radius:3px; padding:10px 12px 9px; min-width:0}
.tiles.mini .tile .lab{font-size:12px; color:#b9b5aa; line-height:1.3}
.tiles.mini .tile .val{font-family:var(--mono); font-weight:500; font-size:28px; line-height:1.05; margin:4px 0 2px; color:var(--lcd); text-shadow:0 0 10px rgba(233,162,59,.45)}
.tiles.mini .tile .sub{display:none}
.lcdline{margin:0}
.lcd{display:inline-flex; align-items:baseline; gap:10px; font-family:var(--mono); font-size:12px; color:var(--chalk-2); border:1px solid rgba(255,255,255,.2); border-radius:3px; padding:5px 9px; background:rgba(12,13,15,.5); 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:4px; flex:none}
.lcd[data-live="false"] .dot{background:#8a877e; box-shadow:none}
@media (max-width:640px){
  .card{bottom:max(18px, env(safe-area-inset-bottom)); right:var(--gutter)}
  .facts{grid-template-columns:1fr; gap:8px}
  .facts div{display:grid; grid-template-columns:72px 1fr; gap:10px; align-items:baseline}
  .facts dd{margin:0}
  .tiles.mini .tile .val{font-size:22px}
  .card .hint{display:none}
  .card.intro .hint{display:inline}
}
@media (max-height:640px) and (orientation:landscape){
  .h1{font-size:clamp(28px, 5.4vw, 48px)} .h2{font-size:clamp(24px, 3.6vw, 40px)} .claim,.line{display:none} .facts{margin-top:10px}
}
.scrollhint{position:absolute; right:var(--gutter); bottom:22px; display:grid; justify-items:center; gap:6px; font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--chalk-2); opacity:1; transition:opacity .5s ease; pointer-events:none}
.scrollhint i{display:block; width:1px; height:28px; background:linear-gradient(to bottom, var(--chalk), transparent); animation:drop 1.6s ease-in-out infinite}
.scrollhint.off{opacity:0}
@keyframes drop{0%{transform:scaleY(0); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}

/* ---------- the track: invisible scroll length ---------- */
.track{position:relative; z-index:0; pointer-events:none}
.track section{display:block; height:100vh}

/* ---------- details sheet ---------- */
.sheet-layer{position:fixed; inset:0; z-index:60}
.sheet-layer[hidden]{display:none}
.sheet-back{position:absolute; inset:0; background:rgba(12,13,15,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:fade .25s ease}
.sheet-panel{position:absolute; top:0; right:0; bottom:0; width:min(900px, 100%); background:var(--bg); color:var(--ink); overflow:auto; overscroll-behavior:contain; box-shadow:-20px 0 60px -30px rgba(0,0,0,.8); animation:slide .32s cubic-bezier(.2,.7,.2,1); -webkit-overflow-scrolling:touch}
@keyframes fade{from{opacity:0} to{opacity:1}}
@keyframes slide{from{transform:translateX(40px); opacity:.6} to{transform:none; opacity:1}}
@media (max-width:720px){ .sheet-panel{top:8vh; width:100%; border-radius:12px 12px 0 0} @keyframes slide{from{transform:translateY(40px); opacity:.6} to{transform:none; opacity:1}} }
.sheet-head{position:sticky; top:0; z-index:2; display:grid; grid-template-columns:1fr auto; gap:0 16px; align-items:start; padding:18px var(--gutter) 14px; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.sheet-eyebrow{grid-column:1; font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--red-ink); margin:0 0 4px}
.sheet-title{grid-column:1; font-family:var(--display); font-weight:700; font-size:clamp(28px, 3.4vw, 44px); line-height:.98; text-transform:uppercase; letter-spacing:-.005em}
.sheet-close{grid-column:2; grid-row:1 / span 2; align-self:start; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-2); background:var(--panel); color:var(--ink); font-size:15px; cursor:pointer; display:grid; place-items:center}
.sheet-close:hover{border-color:var(--red)}
.sheet-body{padding:22px var(--gutter) 64px}
.sheet-body .sub{font-size:16.5px; color:var(--ink-2); max-width:var(--measure); margin:0 0 22px}

/* ---------- content inside the sheet (build logs) ---------- */
dl.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)}
dl.sheet > div{padding:14px 16px 16px; border-right:1px solid var(--line); min-width:0}
dl.sheet > div:last-child{border-right:0}
@media (max-width:640px){ dl.sheet > div{border-right:0; border-bottom:1px solid var(--line)} dl.sheet > div:last-child{border-bottom:0} }
dl.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}
dl.sheet dd{margin:0; font-size:15px; line-height:1.45; color:var(--ink)}
dl.sheet dd code{font-size:12.5px; word-break:break-all; 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:48px; align-items:start} .station-grid > .side{position:sticky; top:110px} }
.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:first-child{margin-top:0}
.prose h3::after{content:""; flex:1; height:1px; background:var(--line)}
.prose p{color:var(--ink)}
.prose ul,.prose ol{padding-left:1.1em; margin:0 0 1em}
.prose li{margin:.3em 0}
.prose li::marker{color:var(--red-ink)}
.steps-list{padding-left:1.2em}
.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}
.side-h{font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin:22px 0 6px}
.side-h:first-child{margin-top:0}
.side-p{font-size:15px; color:var(--ink-2)}
.side-p.dim{font-size:14px; color:var(--ink-3)}
.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{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)}
@media (max-width:640px){ table.plain td:first-child{white-space:normal} }
.tablewrap{overflow-x:auto}
/* telemetry inside the sheet */
.tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin:0 0 26px}
.tile{background:var(--panel); 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(--panel); 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}
.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}
.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} }
.detail[hidden]{display:none}

/* ---------- drive HUD ---------- */
.drive-hud{position:absolute; inset:0; pointer-events:none; color:#f1efe8; font-family:var(--mono); opacity:0; transition:opacity .4s ease}
.drive-hud.on{opacity:1}
.drive-hud .trips{position:absolute; top:14px; left:14px; right:250px; display:flex; flex-wrap:wrap; gap:8px}
.drive-hud .trip{position:relative; 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.gear b{color:#fff; text-shadow:none}
.drive-hud .trip.gear b.shift{color:var(--red-lit)}
.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)}
.drive-ctl button.hand{grid-column:1 / -1; height:48px; font-size:13px; letter-spacing:.14em}
@media (hover:none) and (pointer:coarse){ .drive-ctl{display:grid} .drive-help{display:none} .drive-hud .trip.surf{display:none} }
@media (max-width:640px){ .scrollhint{display:none} .drive-hud .trips{right:14px; top:60px} .drive-hud .trip{min-width:70px; padding:6px 8px 4px} .drive-hud .trip b{font-size:20px} .drive-hud .trip.surf{display:none} .drive-hud .drive-exit button{font-size:12px; padding:8px 10px 7px} }
.drive-hud .pace{position:absolute; left:50%; top:22%; 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}