/* A quiet instrument panel around the drive. The car remains the focal point. */
:root{--ease-drive:cubic-bezier(.22,.68,.2,1)}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.top__cta{display:inline-flex}
.journey-nav{display:flex;gap:2px;margin-left:auto}
.journey-nav button{padding:9px 12px;border-radius:6px;color:var(--muted);font-size:.85rem;transition:color .2s,background .2s}
.journey-nav button:hover,.journey-nav button[aria-current="step"]{background:rgba(255,255,255,.07);color:var(--text)}
.journey-nav + .top__cta{margin-left:12px!important}
.v1stage{height:100dvh;touch-action:pan-y pinch-zoom}
.jload{flex-direction:column;gap:16px;pointer-events:none;background:var(--bg);z-index:5;transition:opacity .6s ease,visibility .6s}
.jload small{font-size:.85rem;font-weight:400;letter-spacing:0;color:var(--muted)}
.v1drive.is-3d .jload{visibility:hidden}
.jhud{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
.jhud__id .s{color:#b3b6bf}
.jhud__rail{font-size:.8rem}
.jhud__rail i{width:100%;transform:scaleX(var(--jp,0));transform-origin:left}

/* A complete readable journey when motion or WebGL is unavailable. */
.journey-fallback{display:none;max-width:850px;margin:0 auto;padding:150px var(--pad) 100px}
.journey-fallback>p{margin-top:22px;color:var(--text2)}
.journey-fallback article{padding:32px 0;border-bottom:1px solid var(--line);scroll-margin-top:130px}
.journey-fallback h2{margin-bottom:14px}
.journey-fallback p{color:var(--text2)}
.journey-fallback dl{margin-top:20px;display:grid;gap:8px}
.journey-fallback dl>div{display:flex;justify-content:space-between;gap:18px}
.journey-fallback dt{color:var(--muted)}
.journey-fallback dd{font-variant-numeric:tabular-nums;white-space:nowrap}
.journey-fallback small{display:block;margin-top:12px;color:var(--muted)}
.journey-fallback>.button{margin-top:32px}
.v1drive.is-fallback{min-height:100svh}
.v1drive.is-fallback .v1stage{display:none}
.v1drive.is-fallback .journey-fallback{display:block}
html:not(.js) .v1drive{min-height:100svh}
html:not(.js) .v1stage,html:not(.js) .journey-nav{display:none}
html:not(.js) .journey-fallback{display:block}

@media(max-width:900px){
  .top__in{gap:12px}
  .journey-nav button{padding:9px;font-size:.8rem}

  .jhud__id .s{font-size:.85rem}

}
@media(max-width:620px){
  .top__in{height:106px;align-items:flex-start;padding-top:13px;position:relative}
  .top.is-condensed{padding:6px 8px}
  .top.is-condensed .top__in{height:96px;padding-top:9px}
  .wordmark{padding-top:6px;font-size:.94rem}
  .top__cta{font-size:.78rem;height:32px;padding:0 11px}
  .journey-nav{position:absolute;bottom:7px;left:10px;right:10px;justify-content:space-between}
  .journey-nav button{min-height:36px;padding:7px 14px}
  .journey-nav + .top__cta{margin-left:auto!important}
  .jhud{padding-top:122px;padding-left:16px;padding-right:16px}
  .jhud__id{gap:9px}
  .jhud__id .t{font-size:1.2rem}
  .jhud__id .n{font-size:.8rem}
  .jhud__id .s{font-size:.75rem}

  .journey-fallback{padding-top:145px;font-size:.94rem}
  .journey-fallback dl>div{flex-wrap:wrap;gap:3px 14px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .v1drive{min-height:100svh}
  .v1stage{display:none}
  .journey-fallback{display:block}
  .journey-nav button,.jload{transition:none;animation:none}
}