:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;background:#061119;color:#eef8fc}*{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0;background:#061119}body{overflow:auto}button,input{font:inherit}.hidden,.menu-legacy-hidden,#cesiumContainer,#threeContainer{display:none!important}.skip-link{position:fixed;z-index:10000;left:12px;top:-60px;padding:10px 14px;border-radius:10px;background:#fff;color:#061119}.skip-link:focus{top:12px}.splash-screen{position:fixed;z-index:9999;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;background:#061119;transition:opacity .35s ease}.splash-screen.is-ready{opacity:0;pointer-events:none}.splash-mark{font-size:32px}.splash-wordmark,.brand-name{font-weight:760;letter-spacing:.16em}.splash-skeleton{display:flex;gap:5px}.splash-skeleton span{width:28px;height:3px;border-radius:3px;background:#75cce8;animation:rw-pulse 1.1s ease-in-out infinite}.splash-skeleton span:nth-child(2){animation-delay:.15s}.splash-skeleton span:nth-child(3){animation-delay:.3s}.splash-screen p{margin:0;color:#a8c1cc}.splash-retry{min-height:44px;padding:0 18px;border:1px solid #7bbfd6;border-radius:12px;background:#0d2a38;color:#fff}@keyframes rw-pulse{50%{opacity:.3;transform:scaleX(.7)}}
#mainMenu.menu-v3{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.42fr);grid-template-areas:"brand stats" "hero context" "rail context";gap:16px;min-height:100svh;padding:clamp(22px,4vw,56px);overflow:hidden;background:radial-gradient(circle at 72% 28%,rgba(54,142,179,.22),transparent 38%),linear-gradient(145deg,#07151f,#031017 70%);color:#edf8fc}#mainMenu.menu-v3:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,#000,transparent 82%)}.menu-brand{grid-area:brand;align-self:start}.brand-name{margin:0;font-size:clamp(32px,4vw,52px);line-height:1}.brand-tagline{margin:7px 0 0;color:#9db5bf}.menu-stats{grid-area:stats;display:grid;grid-template-columns:repeat(4,1fr);align-self:start;border:1px solid rgba(151,211,233,.15);border-radius:16px;background:rgba(255,255,255,.035)}.stat-card{display:grid;gap:2px;padding:12px;text-align:center}.stat-value{font-weight:700}.stat-label{color:#9fb5be;font-size:11px}.hero-tiles{grid-area:hero;display:grid;grid-template-columns:1.3fr .85fr;gap:14px}.hero-stack{display:grid;gap:14px}.hero-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:180px;padding:22px;border:1px solid rgba(151,211,233,.18);border-radius:20px;background:linear-gradient(145deg,rgba(25,74,95,.82),rgba(7,24,34,.92));color:#eef9fd;text-align:left;cursor:pointer;box-shadow:0 20px 60px rgba(0,0,0,.18)}.hero-primary{min-height:374px;background:linear-gradient(155deg,rgba(28,105,135,.82),rgba(8,30,42,.95))}.hero-icon{position:absolute;top:20px;right:22px;color:#8edcf3;font-size:24px}.hero-kicker{color:#91dff5;font-size:11px;font-weight:750;letter-spacing:.14em}.hero-title{margin-top:8px;font-size:clamp(25px,3vw,42px);font-weight:680;letter-spacing:-.035em}.hero-desc{margin-top:8px;color:#b7ccd5;font-size:13px}.hero-cta{margin-top:16px;color:#9ce5f7;font-size:12px;font-weight:700}.menu-context{grid-area:context;display:grid;grid-template-rows:auto minmax(240px,1fr) auto;border:1px solid rgba(151,211,233,.16);border-radius:22px;background:rgba(4,18,27,.76);overflow:hidden}.menu-context-head,.menu-context-destination{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px}.menu-context-head>div{display:grid;gap:6px}.menu-context-eyebrow,.menu-context-destination span{color:#8edcf3;font-size:10px;letter-spacing:.12em}.menu-context-link,.menu-context-destination button{min-height:44px;border:0;background:transparent;color:#bfefff;cursor:pointer}.menu-vehicle-preview{position:relative;display:grid;place-items:center;min-height:240px;overflow:hidden}.menu-preview-poster{width:90%;height:90%;object-fit:contain;filter:drop-shadow(0 22px 32px rgba(0,0,0,.38))}.menu-context-destination{border-top:1px solid rgba(151,211,233,.12)}.menu-context-destination>div:nth-child(2){display:grid;gap:3px;flex:1}.menu-context-destination small{color:#8ca3ad}.menu-rail{grid-area:rail;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.rail-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1px solid rgba(151,211,233,.14);border-radius:14px;background:rgba(255,255,255,.035);color:#cde0e7;cursor:pointer}.auth-bar{position:fixed;z-index:20;top:16px;right:18px}.auth-pill-btn,.auth-user{min-height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(5,20,29,.78);color:#fff}.noscript-summary{max-width:680px;margin:40px auto;padding:24px;color:#dcecf2}.loading-container{position:fixed;z-index:1000;inset:auto 50% 24px auto;transform:translateX(50%);padding:12px 16px;border-radius:13px;background:rgba(5,20,29,.9)}
@media(max-width:767px){#mainMenu.menu-v3{display:flex;flex-direction:column;gap:12px;padding:20px 16px 28px}.menu-brand{text-align:center}.brand-name{font-size:30px}.brand-tagline{font-size:12px}.menu-stats{width:100%}.stat-card{padding:9px 5px}.hero-tiles{display:grid;grid-template-columns:1fr;gap:10px}.hero-primary{min-height:170px}.hero-stack{grid-template-columns:1fr 1fr}.hero-tile{min-height:118px;padding:16px}.hero-secondary .hero-desc{display:none}.hero-title{font-size:21px}.menu-context{min-height:280px}.menu-vehicle-preview{min-height:170px}.menu-rail{order:5}.rail-btn{min-width:0;flex-direction:column;gap:3px;font-size:11px}.auth-bar{top:10px;right:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* The idle Three.js preview must never participate in intrinsic grid sizing.
   Its ResizeObserver otherwise feeds the canvas height back into the spanning
   context row and makes every menu action move indefinitely. */
.menu-context{grid-template-rows:auto clamp(240px,36svh,360px) auto}
.menu-vehicle-preview{height:clamp(240px,36svh,360px);min-height:0}
.menu-vehicle-preview .vp-canvas-wrap,.menu-vehicle-preview canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
@media(max-width:767px){.menu-context{grid-template-rows:auto 170px auto}.menu-vehicle-preview{height:170px;min-height:0}}

/* The menu shell is the actual first product screen. Keep it visually equal
   to the hydrated app instead of exposing a temporary, differently sized UI. */
.menu-vehicle-preview .vp-copy{display:none!important}
@media(min-width:1024px){
  #mainMenu.menu-v3{grid-template-columns:minmax(0,1fr) minmax(360px,420px);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"brand context" "stats context" "hero context" "rail context";column-gap:clamp(22px,3vw,44px);row-gap:14px;padding:clamp(24px,3vh,38px) clamp(34px,5vw,76px)}
  .menu-stats{width:min(600px,100%)}
  .hero-tiles{min-height:0;grid-template-rows:minmax(210px,1.2fr);align-self:stretch}
  .hero-tile,.hero-primary{min-height:0;height:100%}
  .menu-context{align-self:stretch;grid-template-rows:auto minmax(0,1fr) auto}
  .menu-vehicle-preview{height:auto;min-height:0}
  .menu-rail{width:min(720px,100%);justify-self:center}
}
@media(max-width:767px){
  #mainMenu.menu-v3{min-height:100svh;gap:9px;padding:58px 14px max(12px,env(safe-area-inset-bottom))}
  .menu-brand{text-align:left}.brand-name{font-size:29px}.brand-tagline{display:none}
  .hero-tiles{flex:1 0 auto}.hero-primary{min-height:154px}.hero-tile{padding:16px 18px}
  .menu-context{display:grid;grid-template-rows:auto auto;min-height:0;padding:9px;border-radius:15px}
  .menu-context-head{padding:0 4px}.menu-vehicle-preview{display:none!important}
  .menu-context-destination{min-height:52px;padding:9px;margin-top:2px;border:1px solid rgba(151,211,233,.12);border-radius:12px}
  .menu-rail{position:sticky;z-index:6;bottom:max(4px,env(safe-area-inset-bottom));padding:4px;border:1px solid rgba(151,211,233,.12);border-radius:14px;background:rgba(5,20,29,.92);backdrop-filter:blur(14px)}
}
.shell-pending-surface{position:fixed!important;z-index:1200!important;inset:0!important;display:grid!important;place-items:center!important;padding:24px!important;background:radial-gradient(circle at 50% 38%,rgba(34,112,143,.22),transparent 42%),rgba(3,14,21,.96)!important}
.shell-pending-surface>:not(.shell-pending-card){display:none!important}
.shell-pending-card{display:grid;justify-items:center;gap:10px;width:min(420px,100%);padding:32px;border:1px solid rgba(151,211,233,.2);border-radius:22px;background:rgba(9,30,42,.92);box-shadow:0 24px 80px rgba(0,0,0,.32);color:#effaff;text-align:center}
.shell-pending-card>span{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:rgba(105,205,239,.12);color:#8bdcf4;font-size:24px;animation:rw-pulse 1.1s ease-in-out infinite}
.shell-pending-card>strong{font-size:20px}.shell-pending-card>small{max-width:34ch;color:#9fb7c1;line-height:1.5}

/* Match the hydrated product from the first paint. This critical shell is
   removed as soon as either the explorer or simulator stylesheet takes over,
   so it must use the same tokens and must not expose in-flight controls. */
:root{background:#080807;color:#f7f3ea}
html,body{background:#080807}
#mainMenu.menu-v3{background:radial-gradient(ellipse at 68% 8%,rgba(231,202,130,.08),transparent 28%),radial-gradient(ellipse at 12% 100%,rgba(255,255,255,.035),transparent 36%),linear-gradient(135deg,#0b0b09,#080807 58%,#11100d);color:#f7f3ea}
#mainMenu.menu-v3:after{background:linear-gradient(rgba(238,216,161,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(238,216,161,.018) 1px,transparent 1px);background-size:48px 48px}
.brand-tagline,.stat-label,.hero-desc,.menu-context-destination small{color:rgba(247,243,234,.62)}
.menu-stats,.hero-tile,.menu-context,.rail-btn{border-color:rgba(238,216,161,.18)}
.menu-stats,.rail-btn{background:rgba(255,255,255,.025)}
.hero-tile,.hero-primary{background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:0 24px 70px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.06)}
.hero-icon,.hero-kicker,.hero-cta,.menu-context-eyebrow,.menu-context-destination span{color:#e7ca82}
.menu-context{background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.014));box-shadow:0 24px 70px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.06)}
.menu-context-link,.menu-context-destination button{color:#f7f3ea}
.auth-pill-btn,.auth-user{border-color:rgba(238,216,161,.24);background:rgba(18,17,14,.82);color:#f7f3ea}
.splash-screen{background:radial-gradient(circle at 50% 42%,rgba(231,202,130,.1),transparent 23%),radial-gradient(circle at 50% 50%,#181711 0,#0d0d0b 42%,#060605 100%)}
.splash-skeleton span{background:#e7ca82}
.splash-screen p{color:rgba(247,243,234,.5)}
.shell-pending-surface{background:radial-gradient(circle at 50% 38%,rgba(231,202,130,.12),transparent 42%),rgba(8,8,7,.97)!important}
.shell-pending-card{border-color:rgba(238,216,161,.2);background:rgba(24,23,19,.94);color:#f7f3ea}
.shell-pending-card>span{background:rgba(231,202,130,.1);color:#e7ca82}
.shell-pending-card>small{color:rgba(247,243,234,.55)}
.map-status,.live-mode-switcher{display:none!important}
.vp-model-fallback{display:none!important}
@media(max-width:767px){.menu-rail{border-color:rgba(238,216,161,.16);background:rgba(18,17,14,.94)}.menu-context-destination{border-color:rgba(238,216,161,.16)}}
