:root{color-scheme:light dark;--bg:#f4f5f7;--panel:#fff;--ink:#1b2230;--muted:#626b7a;--line:#dfe3e9;--accent:#285bd5;--soft:#e9efff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,sans-serif;overflow-wrap:anywhere}header,main,nav{max-width:640px;margin:auto}header{display:flex;align-items:center;gap:12px;padding:calc(22px + var(--safe-top,env(safe-area-inset-top))) 20px 20px;font-size:12px;letter-spacing:1px;font-weight:750}small{display:block;color:var(--muted);font-size:12px;font-weight:400;letter-spacing:0}.mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--ink);color:var(--panel);font-size:24px}main{padding:12px 20px calc(110px + var(--safe-bottom,env(safe-area-inset-bottom)))}h1{font-size:30px;line-height:1.2;letter-spacing:-1px;margin:16px 0}h2{font-size:20px}p{color:var(--muted)}section,.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;margin:14px 0}.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:1.6px;color:var(--muted)}button,input,select{font:inherit;max-width:100%;min-width:0}button{cursor:pointer;background:var(--accent);color:#fff;border:0;border-radius:12px;padding:13px 16px;min-height:46px}button:disabled{opacity:.55;cursor:wait}.secondary{background:var(--soft);color:var(--accent)}.danger{background:#b82e36;color:white}.back{padding-left:0;background:none;color:var(--accent)}.full{display:block;width:100%;margin-top:10px}.id{font-family:ui-monospace,monospace;font-size:12px;overflow-wrap:anywhere;color:var(--muted)}.placeholder{height:150px;background:var(--bg);border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:16px;border:1px dashed var(--line)}.placeholder strong{font-size:23px;letter-spacing:-.6px}.placeholder small{margin-top:8px}.vehicle{width:100%;height:180px;object-fit:contain}.avatar{width:64px;height:64px;border-radius:50%;object-fit:cover}.avatar-empty{display:grid;place-items:center;background:var(--soft);color:var(--accent);font-size:28px}.profile{display:flex;align-items:center;gap:15px}.profile>div{min-width:0}nav{position:fixed;bottom:0;left:0;right:0;display:flex;gap:4px;padding:10px 12px calc(10px + var(--safe-bottom,env(safe-area-inset-bottom)));border-top:1px solid var(--line);background:var(--panel)}nav[hidden]{display:none}nav button{flex:1;padding:12px 3px;background:none;color:var(--muted);font-size:14px}nav button.active{background:var(--soft);color:var(--accent)}input,select{width:100%;padding:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;margin:6px 0 12px}label{display:block;font-size:14px}.empty{text-align:center;padding:35px 18px}.error{border-left:3px solid #b82e36;padding:12px;background:var(--panel)}dl{display:grid;gap:8px}dt{font-size:13px;color:var(--muted)}dd{margin:0 0 8px}.count{font-size:44px;font-weight:700;line-height:1.2}.history{padding:12px 0;border-bottom:1px solid var(--line)}@media(prefers-color-scheme:dark){:root{--bg:#11151c;--panel:#1c222c;--ink:#edf1f7;--muted:#a1acbc;--line:#333d4b;--accent:#769dff;--soft:#28364f}button{color:#101726}.danger{color:white}}:root[data-theme=dark]{--bg:#11151c;--panel:#1c222c;--ink:#edf1f7;--muted:#a1acbc;--line:#333d4b;--accent:#769dff;--soft:#28364f}:root[data-theme=light]{--bg:#f4f5f7;--panel:#fff;--ink:#1b2230;--muted:#626b7a;--line:#dfe3e9;--accent:#285bd5;--soft:#e9efff}
.avatar{flex-shrink:0}.profile h2{margin:0;font-size:18px}.profile{align-items:flex-start}
.balance{font-size:clamp(25px,8vw,38px);font-weight:750;letter-spacing:-1px}.amount{font-size:21px;font-weight:650;color:var(--ink);margin:8px 0}.positive{color:#248245}.success{padding:12px;border:1px solid #248245;border-radius:12px;background:var(--panel);color:var(--ink)}.specs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px}.specs dd{font-size:14px}input,select{min-height:46px}h1{overflow-wrap:anywhere}
:root{--button-ink:#fff}@media(prefers-color-scheme:dark){:root{--button-ink:#101726}}:root[data-theme=light]{--button-ink:#fff}:root[data-theme=dark]{--button-ink:#101726}button{color:var(--button-ink)}button.secondary,button.back,nav button{color:var(--accent)}button.danger{color:#fff}
.viewer{width:100%;height:300px;touch-action:none;border-radius:12px;overflow:hidden;background:var(--bg)}.viewer canvas{display:block;width:100%;height:100%}.taxi-status{padding:12px;border-radius:12px;background:var(--soft);color:var(--ink);margin:12px 0}.taxi-status strong{display:block}.viewer-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.viewer-actions button{flex:1}.model-note{font-size:13px;color:var(--muted)}

.viewer{position:relative}.viewer-progress{position:absolute;left:12px;right:12px;top:12px;margin:0;padding:10px;border-radius:10px;background:var(--panel,#fff);color:var(--ink,#172034);font-size:14px}.viewer>p:not(.viewer-progress){padding:12px}

.car-angle{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#e9edf2;border-radius:12px}.angle-buttons{display:flex;gap:8px;margin-top:10px}.angle-buttons button{flex:1}.appearance-form{border-top:1px solid var(--line,#ddd);margin-top:18px;padding-top:12px}.appearance-form input[type=color]{height:48px;width:100%;padding:4px}.appearance-form label{display:block;margin:12px 0}

.paint-palette{display:flex;flex-wrap:wrap;gap:6px}.paint-palette button{font-size:13px;padding:9px 12px}
/* v0.3 graphite / gold; the game uses one consistent automotive theme. */
:root,:root[data-theme=light],:root[data-theme=dark]{color-scheme:dark;--bg:#0d1015;--panel:#181d25;--ink:#f3f0e8;--muted:#a6abb6;--line:#2c333e;--accent:#e1b968;--soft:#30291e;--button-ink:#17140f}
body{background:radial-gradient(ellipse at 80% 0,#28231b 0,transparent 420px),var(--bg)}header{padding-top:calc(18px + var(--safe-top,0px));gap:10px;letter-spacing:1.1px}header>div{flex:1;min-width:0}header .mark{background:var(--accent);color:#18150f;box-shadow:0 4px 24px #e1b96822}.header-profile{font-size:11px;padding:8px;min-height:40px;letter-spacing:0}#header-balance{color:var(--accent);font-weight:700;font-size:13px;margin-top:4px}h1{font-size:32px;font-weight:800}h2{letter-spacing:-.5px}section,.card{background:linear-gradient(140deg,#1d232d,#171c24);box-shadow:0 10px 30px #00000015}button{font-weight:650;transition:background .15s,transform .15s;color:var(--button-ink)}button:active{transform:scale(.985)}button.secondary,button.back,nav button{color:var(--accent)}button.danger{background:#662d36;color:#ffdde0}nav{background:#131820f5;backdrop-filter:blur(16px);padding-top:8px;gap:1px;z-index:5}nav button{font-size:12px;letter-spacing:-.2px;border-radius:10px}nav button.active{background:#342b1e;color:#f3cc80}input,select,textarea{background:#10151d;border-color:#343d4a;color:var(--ink)}textarea{width:100%;font:inherit;padding:12px;border-radius:10px;resize:vertical;min-height:130px}.amount,.balance{font-variant-numeric:tabular-nums}.positive{color:#86d9a1}.success{border-color:#41634d;background:#17271f}.eyebrow{color:var(--accent);font-size:10px}.badge{display:inline-flex;padding:5px 9px;border:1px solid #d4ac5d55;border-radius:7px;color:var(--accent);font-size:10px;letter-spacing:1px;font-weight:700}.hero{border-color:#6d5630;background:radial-gradient(ellipse at 100% 0,#51402455,transparent 80%),#1d201f}.hero h2{font-size:25px;line-height:1.15;margin:14px 0}.hero p{font-size:14px}.reward-range{font-size:27px;font-weight:800;color:var(--accent);letter-spacing:-1px}.onboarding{border-color:#66532f}.onboarding h2{font-size:21px}.onboarding ol{padding-left:22px;color:var(--muted);font-size:13px}.onboarding li{padding:4px}.onboarding li.done{color:#86d9a1;text-decoration:line-through}.metric-grid,.profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}.metric-grid strong,.profile-stats strong{display:block;font-size:23px;color:var(--ink)}.metric-grid small{font-size:11px}.feedback-text{white-space:pre-wrap}.taxi-status{background:#30291c;border:1px solid #58492d}.taxi-status small{margin:6px 0}.taxi-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}.taxi-options button{font-size:12px;padding:9px 5px}.car-angle{background:#e9edf2}.paint-palette button{border:1px solid #554728}.model-note{font-size:12px}details{margin:16px 0}summary{cursor:pointer;color:var(--accent);font-size:13px}.result-card{text-align:center}.result-time{font-size:62px;font-weight:850;line-height:1.1;letter-spacing:-3px;color:var(--accent);margin:16px 0}.result-time small{letter-spacing:0;font-size:12px;margin:8px}.mission-complete{padding:14px;background:#2e3b27;border-radius:12px;color:#b6e0a2;font-size:13px}.mission-complete strong{display:block;font-size:24px;margin-top:4px}.shift-results{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:20px 0}.shift-results span{padding:5px 8px;border-radius:6px;background:#0e141c;font-size:12px}.grade-perfect{color:#e9c376!important}.grade-good{color:#a5dfb5!important}.grade-early{color:#e0aa78!important}.grade-late{color:#ec8995!important}.race-heading{display:flex;align-items:center;gap:10px}.race-heading>div{flex:1}.race-heading h1{font-size:25px}.race-hud{position:relative;padding:16px;overflow:hidden}.race-lane{height:105px;position:relative;border-bottom:2px solid #5b5b56;overflow:hidden;background:linear-gradient(transparent,#293039);border-radius:12px}.race-lane .vehicle{position:absolute;bottom:10px;left:10%;width:80%;height:85px;object-fit:contain;background:transparent;border-radius:8px}.lane-lines{position:absolute;bottom:0;width:200%;height:4px;background:repeating-linear-gradient(90deg,#d5c59f 0 35px,transparent 35px 70px);animation:road-move .7s linear infinite}.race-instruments{display:grid;grid-template-columns:1fr 1fr;text-align:center;margin:15px 0}.race-instruments strong{display:block;font-size:53px;line-height:1.1;font-variant-numeric:tabular-nums}.race-instruments strong small{font-size:11px}.rpm-label{display:flex;justify-content:space-between;align-items:center;font-size:21px;color:var(--ink);font-weight:650}.tacho-track{height:22px;border-radius:7px;position:relative;background:#0c1017;overflow:hidden;border:1px solid #4c4f50}.tacho-good{position:absolute;height:100%;background:#a7803755;z-index:1}#race-rpm-fill{position:absolute;height:100%;width:0;background:linear-gradient(90deg,#9ba8a5,#e4be70);border-radius:5px}.rpm-caption{display:flex;justify-content:space-between;margin:4px 0 12px}.rpm-caption small{font-size:8px}progress{display:block;width:100%;height:8px;accent-color:var(--accent);margin:15px 0;border:0;border-radius:5px}.shift-button{display:block;width:100%;height:82px;font-size:29px;letter-spacing:5px;font-weight:850;border:2px solid #c4a068;background:linear-gradient(#e9c780,#bd9146);box-shadow:0 7px 20px #d8af5d22}.shift-button.perfect-window{background:#ffe0a0;box-shadow:0 0 25px #e9c78066}.race-tip{text-align:center;margin-top:12px;font-size:10px}#race-shift-result{text-align:center;min-height:23px;font-weight:700;margin:8px 0 12px}.race-countdown{position:absolute;inset:0;background:#10141cee;display:grid;place-items:center;font-size:90px;font-weight:900;z-index:3;color:var(--accent);pointer-events:none}.race-countdown[hidden]{display:none}.race-car .vehicle{height:140px}.race-hud .error{font-size:12px}.card .id{font-size:10px;opacity:.8}.error{border-color:#d27784}main{animation:screen-in .18s ease-out}@keyframes screen-in{from{opacity:.7;transform:translateY(3px)}to{opacity:1;transform:none}}@keyframes road-move{to{transform:translateX(-70px)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Model inspection: one active canvas, immediate image fallback. */
.garage-room{height:clamp(260px,55vw,430px);background:radial-gradient(ellipse at 50% 30%,#34363e,#15171d 75%);border:1px solid #b89a5b38;border-radius:18px}.garage-room>.vehicle{height:100%;object-fit:contain;margin:0}.inspection{margin-bottom:22px}.inspection>small{display:block;color:var(--muted);margin-top:12px;line-height:1.5}.inspection #viewer-message{font-size:13px;color:var(--muted);min-height:20px}.inspection .viewer-actions{gap:8px}.inspection .viewer-actions button{font-size:13px;min-width:100px}.viewer-progress{z-index:1;pointer-events:none}.appearance-form{padding:18px;border:1px solid #b89a5b38;border-radius:16px;background:#ffffff04}.appearance-form h2{margin-top:0}