:root { --launch-ink:#141918; --launch-paper:#eff1e8; --launch-lime:#e6f87b; --launch-muted:#a6aaa4; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip-path:inset(50%); white-space:nowrap; }
#starter-status:empty { display:none; }
#splash, #menu, #settings { font-family:Inter,Arial,Helvetica,sans-serif; }
#splash *, #menu *, #settings * { box-sizing:border-box; }
#splash [hidden], #menu [hidden], #settings [hidden] { display:none!important; }
#splash[hidden] { display:none!important; }
body.booting .hud, body.home .hud, body.home #scorestrip, body.home #arrows,
body.home #touch-select, body.home #touch-controls, body.home #garage-shortcut,
body.home #account-shortcut, body.booting #account-shortcut, body.home #rotate { display:none!important; }
body.home.garage #account-shortcut:not([hidden]) { display:block!important; }
.brand-mark { display:block; width:52px; height:52px; }
.eyebrow { font:700 10px/1.5 ui-monospace,Menlo,monospace; letter-spacing:.13em; }
#splash { position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; justify-content:space-between; overflow:auto;
  padding:32px 4vw; background:#141918; color:var(--launch-paper); isolation:isolate; }
.splash-stripes { position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,#373f2980,transparent 65%); }
.splash-stripes::before, .splash-stripes::after { content:""; position:absolute; width:12vw; height:180vh; top:-40vh; right:10%; transform:rotate(32deg); background:#e6f87b06; border-inline:1px solid #e6f87b0d; }
.splash-stripes::after { right:29%; width:3vw; }
.splash-header, .splash-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; font:600 10px ui-monospace,Menlo,monospace; letter-spacing:.13em; color:#a6aaa4; }
.splash-content { margin:56px auto; width:min(880px,100%); text-align:center; }
.splash-content .eyebrow { color:var(--launch-lime); margin-bottom:32px; }
#splash-title { margin:0; }
#splash-title img { display:block; width:100%; height:auto; }
.splash-tagline { color:#a6aaa4; font-size:15px; margin:30px 0 46px; }
.splash-loader { width:230px; margin:0 auto 24px; }
#boot-progress { height:3px; background:#eff1e81a; overflow:hidden; }
#boot-progress>span { display:block; width:0; height:100%; background:var(--launch-lime); transition:width .35s; }
#boot-status { font:11px/1.5 ui-monospace,Menlo,monospace; color:#a6aaa4; min-height:32px; }
.launch-primary, #menu .launch-primary { display:inline-block; width:auto; min-width:220px; border:0; border-radius:3px; padding:19px 24px; margin:0;
  background:var(--launch-lime); color:var(--launch-ink); font:750 17px/1.2 Arial,sans-serif; text-align:left; cursor:pointer; transition:background .15s,transform .15s; }
.launch-primary>.ui-arrow { float:right; margin-left:24px; width:20px; height:20px; }
.launch-primary:hover, #menu .launch-primary:hover { background:#f0ffa4; transform:translateY(-2px); }
.launch-primary:disabled { opacity:.4; cursor:wait; transform:none; }
#btn-enter { text-align:center; }
#btn-enter:disabled::after { display:none; }
#boot-error { max-width:480px; margin:20px auto; color:#ffb59f; font-size:14px; line-height:1.5; }
#boot-retry { display:inline-block; color:var(--launch-lime); font-size:16px; padding:16px; }
.no-script { position:fixed; inset:40% 5% auto; z-index:2100; background:#141918; color:white; padding:32px; text-align:center; }
#splash :focus-visible, #menu :focus-visible, #settings :focus-visible { outline:3px solid #94c6dd; outline-offset:5px; }
#menu { display:none; align-items:stretch; justify-content:flex-start; background:var(--launch-ink); overflow:auto; color:var(--launch-paper); }
#menu .menu-shell { width:min(1440px,100%); margin:auto; padding:0 42px; min-height:100%; display:flex; flex-direction:column; }
#menu button { display:inline-block; width:auto; margin:0; border-radius:3px; font-family:inherit; }
#menu .home-header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:104px; border-bottom:1px solid #edf1df24; }
.home-brand { display:flex; align-items:center; flex:none; min-height:48px; text-decoration:none; }
.home-brand img { display:block; width:218px; height:auto; }
.home-location { font:10px ui-monospace,Menlo,monospace; letter-spacing:.06em; color:#a6aaa4; }
.home-location>span { color:#686e66; margin-left:12px; }
.home-tools { display:flex; align-items:center; gap:10px; }
.home-wallet { display:grid; grid-template-columns:auto auto; column-gap:8px; padding-right:16px; align-items:center; font-size:15px; }
.home-wallet>span { grid-row:1/3; color:var(--launch-lime); font-size:23px; }
.home-wallet small { font:7px/1.6 ui-monospace,Menlo,monospace; color:#a6aaa4; letter-spacing:.04em; }
#menu .tool-button { background:transparent; border:1px solid #edf1df35; padding:12px 14px; font-size:12px; color:var(--launch-paper); }
#menu .tool-button>span:last-child { margin-left:12px; }
#menu .tool-button:hover { background:#edf1df12; }
#menu-main { flex:1; }
.home-hero { display:grid; grid-template-columns:1fr 1.15fr; gap:36px; padding:42px 0 32px; align-items:stretch; }
.home-copy { padding:20px 0 22px; }
.home-copy .eyebrow { margin:0 0 25px; color:#b9c39e; }
.live-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--launch-lime); margin-right:7px; vertical-align:middle; }
#menu h1 { margin:0; font-size:clamp(36px,4.4vw,64px); letter-spacing:-.065em; line-height:1.02; font-weight:900; }
#menu h1 em { font-style:italic; color:var(--launch-lime); }
.home-copy>p:not(.eyebrow) { color:var(--launch-muted); font-size:14px; line-height:1.65; margin:23px 0 28px; }
#menu #btn-single { min-width:260px; font-size:19px; }
#menu #btn-single small { font-size:11px; margin-top:7px; font-weight:400; opacity:.75; }
.home-welcome { display:block; margin-top:16px; color:#828b7e; font:10px/1.4 ui-monospace,Menlo,monospace; }
.home-showcase, .starter-showcase { border-radius:4px; overflow:hidden; background:#e4e9dd; color:var(--launch-ink); position:relative; min-width:0; }
.showcase-heading { position:relative; z-index:1; display:flex; justify-content:space-between; padding:20px 22px; font:9px ui-monospace,Menlo,monospace; letter-spacing:.09em; }
.vehicle-window { width:100%; height:300px; position:relative; }
.vehicle-window canvas { width:100%; height:100%; display:block; touch-action:pan-y; cursor:grab; }
.vehicle-window canvas.dragging { cursor:grabbing; }
.preview-hint { display:block; text-align:center; font:7px/1.5 ui-monospace,Menlo,monospace; letter-spacing:.1em; color:#6d7862; margin:-14px 0 3px; position:relative; pointer-events:none; }
.showcase-caption { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 22px 20px; }
#home-car-name { display:block; font-size:20px; font-weight:800; letter-spacing:-.035em; }
#home-car-drive { display:block; font:9px ui-monospace,Menlo,monospace; margin-top:6px; color:#54604e; letter-spacing:.08em; }
#menu #btn-hero-garage { padding:10px 0 10px 15px; color:var(--launch-ink); font-size:11px; border:0; border-radius:0; border-bottom:1px solid #65726055; background:transparent; }
.home-showcase { min-height:415px; background:#263638; color:var(--launch-paper); border:1px solid #edf1df24; }
.home-showcase .vehicle-window { position:absolute; inset:0; height:100%; }
.home-showcase .showcase-heading { position:absolute; inset:0 0 auto; pointer-events:none; padding-bottom:45px; background:linear-gradient(#172326dd,transparent); }
.home-showcase .showcase-caption { position:absolute; inset:auto 0 0; padding-top:42px; background:linear-gradient(transparent,#172326ed 48%); pointer-events:none; }
.home-showcase .preview-hint { position:absolute; top:43px; right:22px; margin:0; color:#d7e2d6; text-shadow:0 1px 4px #172326; }
.home-showcase #home-car-drive { color:#bccbbc; }
#menu .home-showcase #btn-hero-garage { color:var(--launch-paper); border-color:#c2d1bd66; pointer-events:auto; }
.home-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
#menu .mode-card { display:flex; align-items:center; gap:16px; padding:23px 20px; color:var(--launch-paper); border:1px solid #edf1df30; background:transparent; min-width:0; }
#menu .mode-card:hover { background:#edf1df08; border-color:#edf1df80; }
.mode-icon { align-self:flex-start; font-size:31px; line-height:1; color:#df9b7a; }
.garage-card .mode-icon { color:#b2d6d7; }.board-card .mode-icon { color:#d5dc99; }
#menu .mode-card small { font:7px/1.4 ui-monospace,Menlo,monospace; color:#a6aaa4; letter-spacing:.06em; margin:0 0 8px; opacity:1; }
.mode-card strong { display:block; font-size:20px; font-weight:700; letter-spacing:-.035em; }
.mode-card>span>span { display:block; font-size:10px; color:var(--launch-muted); margin-top:8px; line-height:1.5; }
.mode-card>b { margin-left:auto; align-self:center; font-size:22px; font-weight:400; }
.home-secondary { display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin:30px 0 32px; }
.home-secondary>span { color:#7f8879; font:8px ui-monospace,Menlo,monospace; letter-spacing:.08em; margin-right:auto; }
#menu .home-secondary button { padding:6px 0; background:transparent; border:0; font-size:12px; color:#d0d5c9; }
.home-secondary button>span { margin-left:16px; color:#727c69; }
.home-footer { margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:18px; border-top:1px solid #edf1df24; padding:22px 0; color:#838b7c; font:8px ui-monospace,Menlo,monospace; letter-spacing:.04em; }
.home-footer nav { display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.home-footer a { color:#b5bdad; text-decoration:none; }.home-footer a:hover { color:var(--launch-lime); text-decoration:underline; }
.menu-subviews { width:min(820px,100%); margin:0 auto; }
#menu[data-screen="main"] .menu-subviews, #menu[data-screen="onboarding"] .menu-subviews { display:none; }
#menu .menu-subviews>div:not([hidden]) { padding:42px 0; }
#menu .menu-subviews h2 { font-size:32px; letter-spacing:-.045em; margin-bottom:26px; }
#menu .menu-subviews button { display:block; width:100%; background:#232b24; border:1px solid #59654a; color:var(--launch-paper); margin:8px 0; padding:16px 20px; font-size:15px; }
#menu .menu-subviews button:hover { background:#303c2a; border-color:var(--launch-lime); }
#menu .menu-subviews .card { background:#20291e; border-color:#526047; }
#menu .menu-subviews .card .row button { width:auto; }
#menu #track-list { display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; }
#menu #track-list .track-choice { display:flex; align-items:center; gap:20px; text-align:left; min-width:0; }
.track-map { width:40%; max-width:150px; flex-shrink:0; color:#b3c5a4; }
.track-map-start { stroke:var(--launch-lime); }
#menu .track-choice:hover .track-map { color:var(--launch-lime); }
#menu .menu-subviews .back { text-align:left; border:0; background:transparent; width:auto; color:#bdc9ad; opacity:1; }
#onboarding { padding:30px 0 44px; flex:1; }
#menu[data-screen="onboarding"] .home-tools, #menu[data-screen="onboarding"] .home-location { visibility:hidden; }
.onboarding-progress { display:flex; justify-content:flex-end; align-items:center; margin:0 0 30px; color:#afb8a4; font:9px ui-monospace,Menlo,monospace; letter-spacing:.07em; }
.onboarding-progress>div { display:flex; gap:4px; }.onboarding-progress i { width:40px; height:3px; background:#3b4434; }.onboarding-progress i.active { background:var(--launch-lime); }
#onboarding-intro>.eyebrow { color:var(--launch-lime); }
.onboarding-lede { color:var(--launch-muted); font-size:15px; margin:22px 0 34px; }
.intro-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.intro-grid article { padding:26px; border:1px solid #4a5540; border-radius:3px; }
.intro-grid article>span { display:flex; justify-content:space-between; align-items:center; color:#a3b58e; font:10px ui-monospace,Menlo,monospace; }
.intro-grid b { font-size:28px; font-weight:400; color:var(--launch-lime); }
#menu .intro-grid h2 { font-size:23px; letter-spacing:-.045em; margin:32px 0 12px; }
.intro-grid p { font-size:13px; color:#a6aaa4; line-height:1.65; margin:0; }
.onboarding-driving { margin-top:24px; color:#a6aaa4; font-size:11px; line-height:1.8; }
.onboarding-driving>span { font:8px ui-monospace,Menlo,monospace; letter-spacing:.08em; color:#c3cca8; }
.onboarding-driving kbd { padding:5px 7px; border:1px solid #4a5540; border-radius:3px; color:#d9e4c8; margin-left:14px; font-size:10px; }.onboarding-driving kbd:first-child { margin-left:0; }
.touch-guide { display:none; }body.touch .touch-guide { display:block; }body.touch .keyboard-guide { display:none; }
.onboarding-controls { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:30px; }
.onboarding-controls>span, .onboarding-controls>p { font-size:12px; line-height:1.5; color:#a6aaa4; margin:0; max-width:340px; }
#menu .text-button { background:transparent; border:0; color:#b4c19f; padding:12px 0; font-size:12px; margin-left:auto; }
.starter-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:30px; }
.starter-heading .eyebrow { color:#adb49f; margin:0 0 14px; }
.starter-heading>p { font-size:13px; line-height:1.6; color:var(--launch-muted); margin:0 0 4px; }
.starter-layout { display:grid; grid-template-columns:.85fr 1.5fr; gap:24px; }
.starter-choices { display:flex; flex-direction:column; gap:12px; }
#menu .starter-choice { flex:1; position:relative; display:flex; align-items:center; gap:17px; width:100%; padding:22px; background:#1c231b; color:var(--launch-paper); border:1px solid #4b5542; }
#menu .starter-choice[aria-pressed="true"] { border-color:var(--launch-lime); box-shadow:inset 3px 0 var(--launch-lime); background:#2b341e; }
.starter-number { color:var(--starter-color); font:italic 900 28px Arial,sans-serif; }
.starter-choice strong { display:block; font-size:19px; letter-spacing:-.03em; }
#menu .starter-choice small { font-size:11px; margin:7px 0 0; opacity:1; color:#aeb89f; }
.starter-choice .starter-tick { margin-left:auto; color:var(--launch-lime); opacity:0; }
.starter-choice[aria-pressed="true"] .starter-tick { opacity:1; }
.starter-showcase .vehicle-window { height:255px; }
.starter-caption { padding:10px 24px 22px; }
#menu .starter-caption h2 { font-size:22px; letter-spacing:-.04em; margin:0 0 9px; }
.starter-caption p { margin:0; color:#54604e; font-size:12px; line-height:1.6; max-width:470px; }
#settings { background:#11170fe8; backdrop-filter:blur(10px); }
#settings .panel { background:#1c231b; border:1px solid #57634b; border-radius:8px; padding:28px 32px; color:var(--launch-paper); width:min(560px,92vw); }
#settings .eyebrow { color:#a7b68e; margin:0 0 12px; }
#settings h2 { text-align:left; font-size:32px; font-weight:800; letter-spacing:-.04em; margin-bottom:20px; }
#settings .srow { padding:12px 0; border-color:#455039; }
#settings .srow .lbl { font-size:14px; } #settings .srow small { font-size:10px; line-height:1.5; color:#a3ad97; }
#settings button { background:#303e23; border-color:#667c4a; color:#d9ecbc; border-radius:3px; font-size:11px; }
#settings button:hover { background:#435732; }
#settings .back { color:var(--launch-lime); }
@media(min-width:1450px) { .home-hero { padding-top:54px; padding-bottom:40px; }.vehicle-window { height:350px; } }
@media(max-width:1100px) { #menu .menu-shell { padding-inline:28px; }.home-location { display:none; }.home-hero { gap:24px; }.mode-icon { display:none; }#menu .mode-card { padding:22px 16px; }.home-secondary { gap:20px; } }
@media(max-width:760px) {
  #menu .menu-shell { padding-inline:20px; }.home-header { flex-wrap:wrap; padding:22px 0; gap:20px; }
  .home-tools { margin-left:auto; }.home-wallet { display:none; }
  #menu .tool-button { font-size:11px; padding:10px; }.home-tools { gap:6px; }#menu .tool-button>span:last-child { margin-left:5px; }
  .home-hero { grid-template-columns:1fr; padding-top:26px; gap:26px; }.home-copy { padding:0; }
  #menu h1 { font-size:clamp(42px,9vw,68px); }.home-copy .eyebrow { margin-bottom:18px; }.home-copy>p:not(.eyebrow) { margin:18px 0 23px; }
  .home-showcase { order:0; min-height:350px; }.home-modes { grid-template-columns:1fr; gap:10px; }
  #menu .mode-card { padding:20px; }.mode-icon { display:block; }.home-secondary { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.home-secondary>span { grid-column:1/-1; }
  .home-secondary button { display:flex!important; justify-content:space-between; }.home-footer { align-items:flex-start; flex-direction:column; padding-block:24px; gap:18px; }
  .intro-grid { grid-template-columns:1fr; gap:10px; }.intro-grid article { padding:20px; }.intro-grid article>span { float:right; gap:18px; }#menu .intro-grid h2 { margin:0 0 12px; font-size:22px; }
  .intro-grid p { max-width:90%; }.starter-heading { align-items:flex-start; flex-direction:column; gap:14px; }.starter-layout { grid-template-columns:1fr; gap:16px; }
  .starter-choices { flex-direction:row; gap:8px; }#menu .starter-choice { flex-direction:column; align-items:flex-start; padding:14px 10px; gap:10px; min-width:0; }
  .starter-choice strong { font-size:12px; }#menu .starter-choice small { font-size:9px; line-height:1.4; }.starter-number { font-size:22px; }.starter-tick { position:absolute; right:10px; top:15px; }
  .starter-showcase .vehicle-window { height:230px; }.starter-caption { padding:10px 20px 20px; }.onboarding-progress { margin-bottom:26px; }#onboarding { padding-top:24px; }
  #menu[data-screen="onboarding"] .home-tools { display:none; }.onboarding-controls { gap:16px; }.onboarding-controls .launch-primary { width:100%!important; }.onboarding-controls .text-button { margin-left:0!important; }
  #menu #track-list { grid-template-columns:1fr; }#settings .panel { padding:24px; }
}
@media(max-width:420px) { .home-brand img { width:168px; }#menu .menu-shell { padding-inline:16px; }#menu #btn-home-account { max-width:120px; }#home-account-label { overflow:hidden; text-overflow:ellipsis; display:inline-block; max-width:76px; vertical-align:middle; white-space:nowrap; }.splash-header,.splash-footer { font-size:8px; }.splash-content .eyebrow { font-size:8px; } }
@media(max-width:600px) {
  #menu #btn-settings { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; }
  #btn-settings .tool-label { display:none; }
  #menu #btn-settings>span:last-child { margin:0; font-size:16px; }
  #menu #btn-home-account { min-height:44px; }
}
@media(max-width:380px) { .home-brand img { width:140px; } }
@media(prefers-reduced-motion:reduce) { #splash *, #menu * { animation:none!important; transition:none!important; } }

#menu .track-choice .course-highlights { color:#d3ddc7; line-height:1.5; font-size:11px; margin-top:8px; text-transform:none; letter-spacing:.01em; }