/* ambient.css */
/* DRIWE Ambient — the scenes page and the phone remote.
   Built for the car's split-view browser first (880×670 CSS px): every control
   is at least 48×48, panels scroll inside themselves, nothing uses blur, and
   only CSS that Chrome 79 understands (no flex gap, inset or aspect-ratio). */
:root{
 --amb-bg:#05070c;--amb-glass:rgba(8,12,16,.88);--amb-glass-strong:rgba(9,13,17,.96);--amb-line:rgba(224,241,244,.14);
 --amb-text:#f4f8f7;--amb-text-2:#b8c4c9;--amb-text-3:#82919a;--amb-accent:#b3ed59;--amb-accent-ink:#0c1206;--amb-accent-soft:rgba(179,237,89,.14);
 --amb-top:72px;--amb-dock:96px;--amb-radius:16px;
 color-scheme:dark
}
html.ambient-document,html.ambient-document body{margin:0;height:100%;background:var(--amb-bg);color:var(--amb-text);font-family:Inter,"SF Pro Display",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
html.ambient-document[data-ambient="screen"],html.ambient-document[data-ambient="screen"] body{overflow:hidden;overscroll-behavior:none}
.ambient-document *{box-sizing:border-box}
.ambient-document button,.ambient-document input,.ambient-document a{font:inherit;color:inherit;touch-action:manipulation}
.ambient-document button{cursor:pointer}
.ambient-document button:focus,.ambient-document input:focus,.ambient-document a:focus{outline:none}
.ambient-document button:focus-visible,.ambient-document input:focus-visible,.ambient-document a:focus-visible{outline:2px solid var(--amb-accent);outline-offset:2px}
.ambient-noscript{position:fixed;left:16px;right:16px;top:40%;text-align:center;color:var(--amb-text-2)}

/* The stage */
#ambient-root{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;user-select:none;-webkit-user-select:none}
html[data-ambient="remote"] #ambient-root{position:static;overflow:visible;user-select:auto;-webkit-user-select:auto}
#ambient-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block;z-index:0;background:#05070c}
.ambient-boot{position:absolute;left:0;right:0;top:46%;margin:0;text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--amb-text-3)}
.amb-shade,.amb-sunrise{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0}
.amb-shade{z-index:1;background:#000;transition:opacity 1.2s ease}
.amb-sunrise{z-index:2;background:linear-gradient(to top,rgba(255,176,96,.9),rgba(255,128,88,.42) 42%,rgba(130,90,170,0) 78%);transition:opacity 2s ease}
.amb-media{position:fixed;left:0;top:0;width:1px;height:1px;opacity:.001;pointer-events:none}
.amb-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none}
.amb-icon svg{display:block;width:24px;height:24px}

/* Top bar: brand, scene, live timers, clock */
.amb-top{position:absolute;z-index:4;top:0;left:0;right:0;display:flex;align-items:center;min-height:var(--amb-top);padding:10px 16px;background:linear-gradient(rgba(2,4,7,.62),rgba(2,4,7,0));transition:opacity .8s ease}
.amb-title{display:flex;flex-direction:column;min-width:0}
.amb-brand{margin:0;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amb-text-3)}
.amb-brand em{font-style:normal;color:var(--amb-accent)}
.amb-scene-name{font-size:17px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.amb-chips{flex:1;display:flex;flex-wrap:wrap;justify-content:flex-end;margin:0 8px 0 12px}
.amb-status-chip{min-height:48px;min-width:48px;margin:2px 3px;padding:0 14px;border:1px solid var(--amb-line);border-radius:999px;background:rgba(8,12,16,.7);font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--amb-text)}
.amb-time{font-size:15px;font-weight:600;color:var(--amb-text-2);font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* Dock */
.amb-dock{position:absolute;z-index:5;bottom:12px;left:50%;display:flex;max-width:calc(100% - 24px);padding:6px;transform:translateX(-50%);border:1px solid var(--amb-line);border-radius:18px;background:var(--amb-glass);box-shadow:0 12px 32px rgba(0,0,0,.4);overflow-x:auto;transition:opacity .8s ease}
.amb-dock-btn{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:84px;min-height:64px;margin:0 2px;padding:6px 4px;border:0;border-radius:12px;background:transparent;color:var(--amb-text);font-size:12px;font-weight:650}
.amb-dock-label{margin-top:4px;white-space:nowrap}
.amb-dock-btn:active{background:rgba(255,255,255,.1)}
.amb-dock-btn[aria-expanded="true"],.amb-dock-btn[aria-pressed="true"]{background:var(--amb-accent-soft);color:var(--amb-accent)}
.amb-dock-btn[data-id="sound"]{background:var(--amb-accent);color:var(--amb-accent-ink)}
.amb-dock-btn[data-id="sound"].is-on{background:rgba(179,237,89,.2);color:var(--amb-accent)}

/* Idle: the chrome fades away; one tap anywhere brings it back. */
.amb-idle .amb-top,.amb-idle .amb-dock{opacity:0;pointer-events:none}
.amb-idle{cursor:none}

/* Centre overlays */
.amb-center{position:absolute;z-index:3;top:var(--amb-top);bottom:var(--amb-dock);left:16px;right:16px;display:flex;align-items:center;justify-content:center;text-align:center;pointer-events:none;transition:opacity .6s ease}
.amb-center>*{pointer-events:auto}
.amb-has-panel .amb-center{right:448px}
.amb-start{max-width:520px;padding:24px 28px 22px;border:1px solid var(--amb-line);border-radius:20px;background:rgba(5,8,12,.74);box-shadow:0 18px 48px rgba(0,0,0,.45)}
.amb-start h1{margin:4px 0 8px;font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.01em}
.amb-start p{margin:0;font-size:15px;line-height:1.45;color:var(--amb-text-2)}
.amb-kicker{margin:0;font-size:11px !important;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amb-accent) !important}
.amb-start-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin:16px -6px 0}
.amb-start-actions>*{margin:6px}
.amb-start-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;min-width:120px;padding:0 28px;border:0;border-radius:14px;background:var(--amb-accent);color:var(--amb-accent-ink);font-size:17px !important;font-weight:750}
.amb-start-btn .amb-icon{margin-right:8px}
.amb-action{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:0 18px;border:1px solid var(--amb-line);border-radius:12px;background:rgba(255,255,255,.06);color:var(--amb-text);font-size:14px;font-weight:650;text-decoration:none;text-align:center}
.amb-action .amb-icon{margin-right:8px}
.amb-action:active,.amb-chip:active,.amb-scene:active,.amb-story:active{transform:scale(.98)}
.amb-action-primary{border-color:var(--amb-accent);background:var(--amb-accent);color:var(--amb-accent-ink)}
.amb-action-wide{width:100%;margin-top:6px}
.amb-note-accent{color:var(--amb-accent) !important}

.amb-clock{color:#fff}
.amb-clock-main{margin:0;font-size:22vh;font-size:clamp(72px,22vh,170px);font-weight:300;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.amb-clock-suffix{margin-left:.18em;font-size:26%;font-weight:500;letter-spacing:.04em;vertical-align:.9em}
.amb-clock-date{margin:10px 0 0;font-size:20px;color:var(--amb-text-2)}
.amb-clock-extra{margin:8px 0 0;font-size:15px;color:var(--amb-text-3)}

.amb-breath{display:flex;flex-direction:column;align-items:center}
.amb-breath-stage{position:relative;display:flex;align-items:center;justify-content:center;width:44vh;height:44vh;max-width:300px;max-height:300px;min-width:160px;min-height:160px}
.amb-breath-circle{position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid rgba(179,237,89,.62);border-radius:50%;background:radial-gradient(circle,rgba(179,237,89,.34),rgba(84,232,207,.14) 60%,rgba(84,232,207,0) 72%);transform:scale(.42);transition-property:transform;transition-timing-function:ease-in-out}
.amb-breath-count{position:relative;font-size:44px;font-weight:300;font-variant-numeric:tabular-nums}
.amb-breath-label{margin:16px 0 2px;font-size:26px;font-weight:650}
.amb-breath-left{margin:0 0 10px;font-size:14px;color:var(--amb-text-3)}

.amb-nap h2{margin:0;font-size:34px;font-weight:650}
.amb-nap-left{margin:6px 0 0;font-size:18px;color:var(--amb-text-2);font-variant-numeric:tabular-nums}
.amb-sleeping{min-height:48px;padding:0 20px;border:0;background:transparent;color:rgba(255,255,255,.3);font-size:15px}

/* Toast */
.amb-toast{position:absolute;z-index:7;top:84px;left:50%;max-width:calc(100% - 32px);max-width:min(560px,calc(100% - 32px));padding:12px 18px;border:1px solid var(--amb-line);border-radius:12px;background:var(--amb-glass-strong);font-size:14px;line-height:1.4;box-shadow:0 12px 30px rgba(0,0,0,.4);opacity:0;transform:translate(-50%,-8px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.amb-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* Panels */
.amb-panel{position:absolute;z-index:6;top:var(--amb-top);right:16px;bottom:var(--amb-dock);display:flex;flex-direction:column;width:416px;max-width:calc(100% - 32px);border:1px solid var(--amb-line);border-radius:var(--amb-radius);background:var(--amb-glass-strong);box-shadow:0 18px 50px rgba(0,0,0,.5);overflow:hidden}
.amb-panel[hidden]{display:none}
.amb-panel-head{display:flex;align-items:center;justify-content:space-between;flex:none;padding:6px 6px 6px 18px;border-bottom:1px solid var(--amb-line)}
.amb-panel-head h2{margin:0;font-size:17px;font-weight:700}
.amb-panel-body{flex:1;min-height:0;padding:2px 16px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;user-select:none}
.amb-section{padding:14px 0;border-bottom:1px solid var(--amb-line)}
.amb-section:last-child{border-bottom:0}
.amb-section h3{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amb-text-3)}
.amb-note{margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--amb-text-3)}
.amb-live{margin:8px 0;font-size:15px;font-weight:650;color:var(--amb-accent);font-variant-numeric:tabular-nums}
.amb-chip-row{display:flex;flex-wrap:wrap;margin:-4px}
.amb-chip-row>*{margin:4px}
.amb-chip{min-height:48px;min-width:48px;padding:0 16px;border:1px solid var(--amb-line);border-radius:999px;background:rgba(255,255,255,.05);color:var(--amb-text);font-size:14px;font-weight:650}
.amb-chip.is-active{border-color:var(--amb-accent);background:var(--amb-accent-soft);color:var(--amb-accent)}
.amb-chip-tall{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:8px 14px;border-radius:14px;text-align:left}
.amb-chip-tall>span{display:flex;flex-direction:column;align-items:flex-start}
.amb-chip-tall strong{font-size:14px}
.amb-chip-tall small{font-size:12px;color:var(--amb-text-3)}
.amb-icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border:0;border-radius:12px;background:transparent;color:var(--amb-text-2)}
.amb-icon-btn:active{background:rgba(255,255,255,.08)}

.amb-scene-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:10px;padding:14px 0}
.amb-scene{display:flex;flex-direction:column;min-height:48px;padding:0;border:1px solid var(--amb-line);border-radius:14px;background:rgba(255,255,255,.04);text-align:left;overflow:hidden}
.amb-scene.is-selected{border-color:var(--amb-accent);box-shadow:0 0 0 1px var(--amb-accent)}
.amb-thumb{display:block;width:100%;height:auto;background:#0b0f14}
.amb-scene-text{display:block;padding:8px 10px 10px}
.amb-scene-text strong{display:block;font-size:14px;line-height:1.25}
.amb-scene-text small{display:-webkit-box;margin-top:3px;font-size:12px;line-height:1.35;color:var(--amb-text-3);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.amb-slider{display:grid;grid-template-columns:112px minmax(0,1fr) 46px;grid-column-gap:10px;align-items:center;min-height:48px}
.amb-slider-label{font-size:14px;line-height:1.2}
.amb-slider output{font-size:13px;color:var(--amb-text-3);text-align:right;font-variant-numeric:tabular-nums}
.ambient-document input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:48px;margin:0;background:transparent}
.ambient-document input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--amb-accent) var(--fill,0%),rgba(255,255,255,.16) var(--fill,0%))}
.ambient-document input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border:0;border-radius:50%;background:#f4f8f7;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.ambient-document input[type="range"]::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.16)}
.ambient-document input[type="range"]::-moz-range-progress{height:6px;border-radius:3px;background:var(--amb-accent)}
.ambient-document input[type="range"]::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#f4f8f7}

.amb-toggle{position:relative;display:flex;align-items:center;min-height:48px;padding:4px 0;cursor:pointer}
.amb-toggle input{position:absolute;width:1px;height:1px;opacity:0}
.amb-toggle-track{position:relative;flex:none;width:46px;height:28px;margin-right:12px;border-radius:14px;background:rgba(255,255,255,.18);transition:background .2s ease}
.amb-toggle-track:after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:#f4f8f7;transition:transform .2s ease}
.amb-toggle input:checked+.amb-toggle-track{background:var(--amb-accent)}
.amb-toggle input:checked+.amb-toggle-track:after{transform:translateX(18px)}
.amb-toggle input:focus-visible+.amb-toggle-track{outline:2px solid var(--amb-accent);outline-offset:2px}
.amb-toggle-text{font-size:14px;line-height:1.3}
.amb-toggle-text small{display:block;margin-top:2px;font-size:12px;color:var(--amb-text-3)}

.amb-save-row{display:flex;align-items:center}
.amb-name,.amb-link{min-height:48px;padding:0 12px;border:1px solid var(--amb-line);border-radius:12px;background:rgba(255,255,255,.05);color:var(--amb-text);font-size:14px;user-select:text;-webkit-user-select:text}
.amb-name{flex:1;min-width:0;margin-right:8px}
.amb-link{width:100%;margin:8px 0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.amb-action-row{display:flex;flex-wrap:wrap;margin:8px -4px 0}
.amb-action-row>*{margin:4px}
.amb-saved{margin:0;padding:0;list-style:none}
.amb-saved li{display:flex;align-items:center;border-bottom:1px solid var(--amb-line)}
.amb-saved li:last-child{border-bottom:0}
.amb-saved-apply{flex:1;min-width:0;min-height:56px;padding:6px 0;border:0;background:none;text-align:left}
.amb-saved-apply strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amb-saved-apply small{font-size:12px;color:var(--amb-text-3)}
.amb-share{display:flex;align-items:flex-start;margin:4px 0 0;padding:12px;border:1px solid var(--amb-line);border-radius:14px;background:rgba(255,255,255,.04)}
.amb-share>div:last-child{flex:1;min-width:0}
.amb-share strong{display:block;margin-bottom:4px;font-size:14px}
.amb-qr{flex:none;width:128px;height:128px;margin-right:12px;padding:6px;border-radius:10px;background:#fff}
.amb-qr svg{display:block;width:100%;height:100%}
.amb-qr svg path,.amb-qr svg rect{shape-rendering:crispEdges}
.amb-qr-large{width:196px;height:196px}
.amb-stories{margin:0 0 10px;padding:0;list-style:none}
.amb-stories li{margin-bottom:8px}
.amb-story{display:flex;align-items:center;width:100%;min-height:64px;padding:10px 12px;border:1px solid var(--amb-line);border-radius:14px;background:rgba(255,255,255,.04);text-align:left}
.amb-story .amb-icon{margin-right:12px;color:var(--amb-accent)}
.amb-story strong{display:block;font-size:14px}
.amb-story small{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--amb-text-3)}
.amb-story.is-playing{border-color:var(--amb-accent);background:var(--amb-accent-soft)}
.amb-remote{display:flex;align-items:flex-start;padding:14px 0}
.amb-remote>div:last-child{flex:1;min-width:0}
.amb-steps{margin:0 0 8px;padding-left:18px;font-size:14px;line-height:1.5;color:var(--amb-text-2)}
.amb-remote-status{margin:8px 0;font-size:15px;font-weight:650;color:var(--amb-text-2)}
.amb-remote-status.is-on{color:var(--amb-accent)}

/* Narrow or portrait screens: the panel becomes a sheet above the dock. */
@media (max-width:760px){
 .amb-dock-btn{width:66px}
 .amb-panel{left:12px;right:12px;top:auto;width:auto;max-width:none;max-height:62vh;max-height:calc(var(--app-height,100vh) * .62)}
 .amb-has-panel .amb-center{right:16px;opacity:0;pointer-events:none}
 .amb-remote{flex-direction:column;align-items:center}
 .amb-remote .amb-qr-large{margin:0 0 12px}
 .amb-chips{display:none}
}
@media (orientation:portrait) and (min-width:761px){
 .amb-panel{left:16px;right:16px;top:auto;width:auto;max-width:none;max-height:58vh}
 .amb-has-panel .amb-center{right:16px;opacity:0;pointer-events:none}
}
@media (max-width:560px){
 .amb-dock-btn{width:58px;min-height:58px;font-size:10px}
 .amb-start h1{font-size:24px}
 .amb-slider{grid-template-columns:92px minmax(0,1fr) 42px}
}
@media (max-height:560px){
 :root{--amb-top:64px;--amb-dock:86px}
 .amb-dock-btn{min-height:56px}
 .amb-start{padding:16px 20px}
 .amb-start h1{font-size:24px}
 .amb-breath-stage{width:34vh;height:34vh}
}

/* Phone remote */
html[data-ambient="remote"] body{background:#070a0d}
.ambient-remote{max-width:560px;margin:0 auto;padding:16px 16px 40px}
.amb-remote-head{display:flex;align-items:center;justify-content:space-between;min-height:48px}
.amb-remote-pill{padding:6px 12px;border:1px solid var(--amb-line);border-radius:999px;font-size:12px;font-weight:650;color:var(--amb-text-2)}
.amb-remote-pill.is-on{border-color:rgba(179,237,89,.5);color:var(--amb-accent)}
.amb-remote-warn{margin:8px 0 0;padding:12px 14px;border:1px solid rgba(255,179,92,.4);border-radius:12px;background:rgba(255,179,92,.12);color:#ffd9a8;font-size:14px;line-height:1.4}
.amb-remote-now{margin-top:12px;padding:18px 16px 10px;border:1px solid var(--amb-line);border-radius:18px;background:rgba(255,255,255,.04);text-align:center}
.amb-remote-now h1{margin:4px 0 12px;font-size:24px}
.amb-remote-play{width:100%;margin-bottom:6px}
.amb-remote-section{margin-top:20px}
.amb-remote-section h2{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amb-text-3)}
.amb-remote-scenes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:8px;margin-bottom:8px}
.amb-remote-scenes .amb-chip{width:100%;padding:0 6px;border-radius:12px}
.amb-remote-group h3{margin:12px 0 0;font-size:12px;color:var(--amb-text-2)}
.amb-remote-empty{padding:64px 16px;text-align:center;color:var(--amb-text-2);font-size:15px;line-height:1.5}
.amb-remote-empty .amb-icon{width:44px;height:44px;margin-bottom:10px;color:var(--amb-accent)}
.amb-remote-empty .amb-icon svg{width:44px;height:44px}
.amb-remote-foot{margin-top:24px;text-align:center}
.ambient-remote .ambient-boot{position:static;margin-top:30vh}

/* tesla-compatibility.css */
/* Keep vehicle compatibility last in the cascade: decorative refreshes must
   not restore expensive effects or override native touch gestures. */
html[data-tesla="true"] .topbar,
html[data-tesla="true"] .route-ribbon,
html[data-tesla="true"] .drive-readout,
html[data-tesla="true"] .control-dock,
html[data-tesla="true"] .turn-card,
html[data-tesla="true"] .demo-driving {
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
}
/* Grid spacing also works in Chromium versions without flex-gap support. */
html[data-tesla="true"] .demo-touch-controls {
 display:grid;
 grid-template-columns:repeat(2,minmax(48px,1fr));
 gap:6px;
}
html[data-tesla="true"] .demo-touch-controls button {
 min-width:48px;
 min-height:48px;
 touch-action:none;
}
html[data-tesla="true"] .panel,
html[data-tesla="true"] .shop-page,
html[data-tesla="true"] .welcome-page {
 -webkit-overflow-scrolling:touch;
}

html[data-tesla="true"] .demo-driving button {min-width:48px;min-height:48px}
@media(max-height:850px){
 html[data-tesla="true"] .scene-status,
 html[data-tesla="true"] .render-mode-badge,
 html[data-tesla="true"] .drive-dynamics,
 html[data-tesla="true"] .turn-card {display:none}
}
@media(min-width:550px) and (max-width:760px){
 html[data-tesla="true"] .route-ribbon {max-width:calc(100vw - 360px)}
 html[data-tesla="true"] .route-copy {min-width:0}
 html[data-tesla="true"] .route-copy>strong {overflow:hidden;text-overflow:ellipsis}
 html[data-tesla="true"] .demo-mode .demo-driving {top:260px;max-width:calc(100vw - 360px)}
 html[data-tesla="true"] .demo-touch-controls {min-width:0;width:100%}
 html[data-tesla="true"] .demo-touch-controls button {padding:6px 2px}
 html[data-tesla="true"] .demo-touch-controls small {font-size:9px;letter-spacing:0}
}

@media(max-width:549px){
 html[data-tesla="true"] .route-ribbon{max-width:calc((100vw - 36px)/2)}
 html[data-tesla="true"] .route-copy{min-width:0}
 html[data-tesla="true"] .route-copy>strong{overflow:hidden;text-overflow:ellipsis}
}
@media(min-width:550px) and (max-width:760px) and (max-height:740px){
 html[data-tesla="true"] .demo-mode .demo-driving{top:78px;max-width:calc(100vw - 224px)}
}
@media(max-width:549px) and (max-height:620px) and (orientation:portrait){
 html[data-tesla="true"] .demo-mode .demo-driving>button{width:calc((100vw - 36px)/2);min-height:50px}
}
@media(max-height:500px) and (orientation:landscape){
 html[data-tesla="true"] .demo-mode .demo-driving{right:224px}
}
/* Driving actions keep full touch targets without covering road information. */
html[data-tesla="true"] .experience-switch{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px}
html[data-tesla="true"] .experience-switch .icon{flex-shrink:0;margin-right:6px}
html[data-tesla="true"] .demo-mode .demo-driving>.demo-drive-toggle{width:48px;min-width:48px;height:48px;min-height:48px;max-width:48px;padding:10px;justify-self:start;flex-shrink:0;display:flex;align-items:center;justify-content:center}
html[data-tesla="true"] .account-btn.session-attention{position:relative;border-color:#e7c975}
html[data-tesla="true"] .account-btn.session-attention::after{content:'';position:absolute;right:5px;top:5px;width:8px;height:8px;border-radius:50%;background:#e7c975}
.session-notice-inline{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px;align-items:start;padding:10px 12px;text-align:left}
.session-notice-inline p{margin:0;overflow-wrap:anywhere;line-height:1.5;font-size:14px}
.session-notice-inline button{min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center;padding:8px;background:transparent;color:inherit;border:1px solid #697345;border-radius:8px;cursor:pointer}
@media(max-width:549px){
 html[data-tesla="true"] .experience-switch{width:48px;padding:0}
 html[data-tesla="true"] .experience-switch .icon{margin:0}
 html[data-tesla="true"] .experience-switch span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

/* A parked showcase keeps the car unobscured and its controls together. */
html[data-showcase="true"] .panel,html[data-showcase="true"] .scrim{display:none!important}
html[data-showcase="true"] #app>:not(canvas),html[data-showcase="true"] #app:after{display:none!important}
html[data-showcase="true"] #app{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:30}
html[data-showcase="true"] #road{z-index:1}

/* Race settings must read independently of the scene behind them. Keep these
   viewport rules last: device-specific density must not squeeze field values. */
html .race-display.race-home .race-stage-menu {background:#0d1216}
html .race-display .race-setup-fields>label {min-width:0}
@media(max-width:700px){
 html .race-display.race-home .race-stage-menu .race-setup-fields {
  grid-template-columns:minmax(0,1fr);
 }
 html .race-display.race-home .race-stage-menu .race-setup-fields>label {grid-column:1 / -1}
 html .race-display.race-home .race-options-launch .race-check .ui-label-full {display:none}
 html .race-display.race-home .race-options-launch .race-check .ui-label-short {display:inline}
}
html[data-phone="true"] .race-display.race-home .race-stage-menu select {min-height:48px}
html[data-phone="true"] .race-display.race-home .race-stage-menu .race-garage-editor>label,
html[data-phone="true"] .race-display.race-home .race-stage-menu .race-garage-audio>label {
 display:grid;grid-template-columns:minmax(0,1fr);gap:6px;
}
html[data-phone="true"] .race-display.race-home .race-stage-menu select {font-size:16px}
@media(max-width:540px){
 html .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-car-stats.is-compact {
  grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;
 }
 html .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-car-stats.is-compact>div {
  grid-template-columns:minmax(0,1fr);gap:2px;align-content:start;
 }
 html .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-car-stats.is-compact>div>span {
  white-space:normal;overflow:visible;font-size:12px;line-height:1.3;
 }
 html .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-car-stats.is-compact>div>b {text-align:start}
}
@media(max-width:540px){
 html[data-tesla="true"] .race-display.race-home .topbar {padding:0 8px}
 html[data-tesla="true"] .race-display.race-home .topbar .brand>*+* {margin-left:4px}
 html[data-tesla="true"] .race-display.race-home .topbar .top-actions {gap:0}
 html[data-tesla="true"] .race-display.race-home .topbar .top-actions>*+* {margin-left:4px}
 html[data-tesla="true"] .race-display.race-home .topbar .top-actions>.account-btn {width:48px;min-width:48px;height:48px;min-height:48px}
 html[data-tesla="true"] .race-display.race-home .topbar .top-actions>.race-wallet-trigger {min-width:48px;max-width:64px;padding:4px}
 html[dir="rtl"][data-tesla="true"] .race-display.race-home .topbar .top-actions>*+*,
 html[dir="rtl"][data-tesla="true"] .race-display.race-home .topbar .brand>*+* {margin-left:0;margin-right:4px}
}

/* Keep the selected car and course readable in a narrow browser window. The
   observed dock height reserves room for both rows above the setup footer. */
@media(max-width:540px){
 html .race-display.race-home .race-launch-choices {grid-template-columns:repeat(2,minmax(0,1fr))}
 html .race-display.race-home .race-launch-choices .race-dock-choice strong {display:block;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}
}

/* The selected joystick is available on the car display as well as phones. */
html:not([data-phone="true"]) .race-display .race-play>.race-joystick-controls{position:absolute;z-index:3;left:var(--hud-gut);right:var(--hud-gut);bottom:var(--pedal-bottom);display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;direction:ltr}
html:not([data-phone="true"]) .race-display .race-play>.race-joystick-controls>*{pointer-events:auto}
html:not([data-phone="true"]) .race-display .race-play>.race-joystick-controls.is-swapped{flex-direction:row-reverse}
html:not([data-phone="true"]) .race-display .race-joystick-steering{width:180px;max-width:35%}
html:not([data-phone="true"]) .race-display .race-joystick-zone{height:112px}
html:not([data-phone="true"]) .race-display .race-joystick-ring{width:84px;height:84px}
html:not([data-phone="true"]) .race-display .race-joystick-hint{display:none}
html:not([data-phone="true"]) .race-display .race-joystick-pedals{grid-template-columns:repeat(2,minmax(48px,1fr));grid-template-rows:repeat(2,48px);column-gap:8px;row-gap:8px;padding:0;width:180px;max-width:35%}
html:not([data-phone="true"]) .race-display .race-joystick-pedal{min-width:48px;min-height:48px;padding:4px;touch-action:none;user-select:none;-webkit-user-select:none}
html:not([data-phone="true"]) .race-display .race-joystick-pedal.is-held{background:#285e53}
html:not([data-phone="true"]) .race-display .race-joystick-pedal{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:12px;line-height:1.2}
html:not([data-phone="true"]) .race-display .race-joystick-pedal>.icon{flex-shrink:0;width:18px;height:18px;margin:0 0 2px}

/* Keep course filters above the cards in reduced-height car browsers. */
html .race-display.race-hub .race-course-filters .race-choice-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:480px){html .race-display.race-hub .race-course-filters .race-choice-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
/* First-use controls are sized for the 880 × 670 browser viewport. */
.welcome-quick-start { display:flex; flex-direction:column; gap:12px; margin:18px 0; }
.welcome-primary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:12px 20px; border-radius:14px; background:#54e8cf; color:#102124; font-size:20px; font-weight:750; text-decoration:none; }
.welcome-quick-start > span { font-size:14px; line-height:1.5; }
.welcome-practice-link { display:flex; align-items:center; gap:12px; min-height:48px; color:inherit; }
.welcome-other-ways > summary { min-height:48px; display:flex; align-items:center; cursor:pointer; }
.race-first-use { align-self:center; padding:20px; min-width:0; }
.race-first-use > button,.race-first-use summary { min-height:56px; padding:14px; cursor:pointer; }
.race-first-use p { line-height:1.5; }
.race-first-use .race-login { width:100%; }
/* Practice: compact instrument panel, unobstructed course and tactile controls.
   Opaque surfaces avoid a costly blur pass in the car browser. */
.demo-next-actions {grid-column:1/-1;display:flex;gap:8px}
.demo-next-actions a {display:flex;align-items:center;justify-content:center;min-height:48px;flex:1;padding:8px;border:1px solid #54e8cf;border-radius:10px;text-align:center;color:inherit;text-decoration:none}
.bookmark-nudge.has-demo-next {grid-template-columns:minmax(0,1fr) auto}
.bookmark-nudge .demo-next-actions + button {grid-column:1}
/* Guest practice: the road is the screen. A one-row header, a slim strip of
   numbers under it, the item as a chip at the edge, and the controls in the
   bottom corners — the same shapes the phone controller and the race use. */
.guest-practice {position:relative;display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:360px;overflow:auto;color:#edf5f4;background:#101b23;font-variant-numeric:tabular-nums}
.practice-scene {position:absolute;inset:0;width:100%;height:100%}
.practice-scene[hidden] {display:none}
.practice-header {position:relative;z-index:4;flex:none;display:flex;flex-wrap:nowrap;align-items:center;gap:10px;min-height:56px;padding:6px 16px;background:#101b23;border-bottom:1px solid #31414a}
.practice-identity {display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.practice-identity>.icon {color:#82eed4;flex-shrink:0}
.practice-identity small,.practice-livery small {display:block;color:#a2b8be;font-size:11px;line-height:1.4}
.practice-identity strong {display:block;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.practice-speed {font-size:18px;font-weight:700;white-space:nowrap;margin-inline-end:4px}
.guest-practice button {min-width:48px;min-height:48px;padding:10px 14px;border:1px solid #465962;border-radius:12px;background:#1c2c36;color:#edf5f4;font:inherit;font-weight:600;cursor:pointer;touch-action:none}
.guest-practice button:disabled {opacity:.45;cursor:default}
.guest-practice button:focus-visible,.guest-practice select:focus-visible,.guest-practice a:focus-visible {outline:3px solid #a8f4df;outline-offset:3px}
.guest-practice button:active:not(:disabled) {background:#35574f}
.guest-practice .race-primary {background:#9af1cf!important;color:#10251e!important;border:1px solid #9af1cf!important;font-weight:750}
.practice-header>button {display:inline-flex;align-items:center;flex:none;padding:8px 12px}
.practice-header>button>.icon {flex:none;margin-inline-end:6px}
.practice-card {position:relative;z-index:2;width:calc(100% - 40px);max-width:460px;margin:20px;padding:24px;border:1px solid #43555f;border-radius:20px;background:#13212b;box-shadow:0 12px 32px #0005}
.practice-card-eyebrow {display:flex;align-items:center;gap:8px;color:#9af1cf;font-size:12px;font-weight:700;letter-spacing:.06em}
.practice-card h1 {margin:12px 0;font-size:32px;line-height:1.1;letter-spacing:-.025em;max-width:360px}
.practice-card p {color:#b6c8cd;font-size:14px;line-height:1.55;margin:12px 0}
.practice-card>button,.practice-card .practice-start-row>button {display:block;width:100%;margin-top:12px;min-height:52px}
.practice-card .race-login {width:100%}
.practice-livery {display:flex;align-items:center;gap:12px;margin:18px 0;padding:12px 0;border-top:1px solid #334550;border-bottom:1px solid #334550}
.practice-livery-swatch {display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex-shrink:0;border-radius:12px;color:#e8d7ff;background:linear-gradient(135deg,var(--paint,#151c28) 45%,var(--trim,#ac5eed) 46%,#2b2440 70%);border:1px solid #8b73a8}
.practice-livery strong {display:block;font-size:15px;line-height:1.5}
.practice-preview-tag {margin-inline-start:auto;max-width:90px;border:1px solid #4d4264;border-radius:20px;padding:4px 8px;color:#d2bfe9;font-size:10px;text-align:center}
.practice-control-choice label {display:block;color:#b6c8cd;font-size:12px;font-weight:600}
.practice-control-choice select {display:block;min-height:48px;width:100%;margin:6px 0 12px;padding:8px 12px;border:1px solid #526570;border-radius:10px;font:inherit;font-size:15px;background:#20333e;color:#fff}
.practice-control-choice a {display:flex;align-items:center;justify-content:center;min-height:48px;color:#9af1cf}
.practice-pair-qr {width:168px;max-width:100%;background:white;margin:12px auto;padding:6px;border-radius:10px}.practice-pair-qr svg {display:block;width:100%}
.practice-countdown {position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);z-index:3;width:160px;border:1px solid #6b927f;border-radius:24px;padding:18px;text-align:center;pointer-events:none;background:#142b2b;box-shadow:0 8px 24px #0004}
.practice-countdown small {font-size:11px;color:#bce4d9}.practice-countdown strong {display:block;font-size:76px;line-height:1.05;color:#a8f4df}
.practice-graphics {position:relative;z-index:1;margin:8px 20px;padding:8px 12px;border-radius:8px;background:#342b21;color:#ffd7a6;font-size:12px}
.practice-phone-guide {margin:20px;max-width:420px;color:#b6c8cd;line-height:1.5}.practice-phone h1 {font-size:20px;margin:0}.practice-phone .practice-header [role=status] {font-size:12px;color:#9af1cf}
.practice-card {flex:none}
/* The in-race strip: course, one line of guidance, the numbers. Nothing sits over the road. */
.practice-hud {position:relative;z-index:1;flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:18px;margin:0;padding:6px 16px;width:auto;max-width:none;border:0;border-bottom:1px solid #31414a66;border-radius:0;background:#101b23cc;overflow:hidden;pointer-events:none}
.practice-objective {display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:baseline;min-width:0;padding:0;background:none}
.practice-objective>strong {font-size:14px;color:#9af1cf;white-space:nowrap}
.practice-objective p {margin:0;max-width:none;color:#c9d9dd;font-size:13px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.practice-hud .race-live-stats {display:flex;gap:16px;align-items:baseline}
.practice-hud small {display:block;font-size:10px;line-height:1.3;color:#a2b8be;text-transform:uppercase;letter-spacing:.06em}
.practice-hud b {font-size:20px;line-height:1.1}
.practice-hud em {font-style:normal;font-size:12px;color:#b8c9ce}
.practice-timer {display:grid;grid-template-columns:auto 72px;column-gap:10px;align-items:center;width:auto;padding:0;background:none}
.practice-timer>div {display:flex;flex-direction:column}
.practice-timer strong {display:block;font-size:26px;line-height:1;letter-spacing:-.03em}
.practice-timer strong em {margin-left:2px;font-size:13px}
.practice-timer progress {appearance:none;-webkit-appearance:none;width:100%;height:5px;border:0;border-radius:8px;overflow:hidden;background:#3c535c}
.practice-timer progress::-webkit-progress-bar {background:#3c535c}.practice-timer progress::-webkit-progress-value {background:#9af1cf}.practice-timer progress::-moz-progress-bar {background:#9af1cf}
.practice-timer>span {grid-column:2;font-size:11px;color:#b8c9ce;text-align:right}
.practice-timer[data-urgent=true] strong {color:#ffcf99}
/* The item chip: on the practice screen it sits with the boost button (see the corner rules below); the phone page keeps it in flow. */
.practice-utilities {position:relative;z-index:2;flex:none;align-self:flex-end;display:flex;align-items:center;gap:8px;margin:8px 16px 0;max-width:calc(100% - 32px);pointer-events:none}
.practice-utilities>* {pointer-events:auto}
.practice-item-slot {display:flex;align-items:center;padding:4px;border:1px solid #2d434c;border-radius:14px;background:#0f1d24d9}
.practice-item-slot>*+* {margin-inline-start:8px}
.practice-item-slot .race-item-button {min-width:56px;min-height:44px;padding:0 10px;font-size:13px}
.practice-item-help {margin:0;padding-right:6px;max-width:15em;font-size:11px;line-height:1.3;color:#b8c9ce}
.practice-utilities>span {padding:8px;border-radius:8px;background:#182c35;font-size:12px}
/* Controls in the bottom corners; the middle stays road. */
.guest-practice .practice-race-controls {position:absolute;bottom:16px;left:16px;right:16px;z-index:2;pointer-events:none}
.guest-practice .race-touch-controls {padding:0;direction:ltr;justify-content:space-between;align-items:flex-end;pointer-events:none}
.guest-practice .race-touch-controls>* {margin:0;flex:0 0 auto;gap:8px;min-width:0;pointer-events:auto}
.guest-practice .race-touch-controls button {margin:0;width:88px;max-width:none;height:60px;min-height:60px;min-width:48px;padding:3px 6px;background:#172a34d9;color:#dce9ec;border:1px solid #68808a;box-shadow:0 3px 0 #08151c;font-size:12px!important}
.guest-practice .race-touch-controls button>.icon {width:18px;height:18px;margin-bottom:1px}
.guest-practice .race-touch-controls button span {display:block;font-size:11px;line-height:1.15;letter-spacing:.06em;margin-top:0}
.guest-practice .race-touch-controls button .race-control-hint {font-size:9px;letter-spacing:0;color:#9fb6bd;margin-top:1px}
.guest-practice .race-touch-controls .race-throttle {background:#9af1cf!important;color:#13342a;border-color:#b4f9df}
.guest-practice .race-touch-controls .race-brake {background:#26323dd9!important;border-color:#80909a}
.guest-practice .race-touch-controls .race-nitro-control {color:#dcc9ff;border-color:#77678e;background:#29273bd9}
.guest-practice .race-touch-controls .is-held,.guest-practice .race-joystick-pedal.is-held {background:#467b69!important;color:#fff;box-shadow:none}
.guest-practice .race-joystick-controls {display:flex;justify-content:space-between;align-items:flex-end;direction:ltr;pointer-events:none}
.guest-practice .race-joystick-controls>* {pointer-events:auto}
.guest-practice .race-joystick-steering {width:clamp(184px,42vmin,280px);max-width:44%}
.guest-practice .race-joystick-zone {height:clamp(96px,26vmin,140px);max-width:none;border:2px solid #355d62;border-radius:999px;background:radial-gradient(ellipse at center,#1d3940 0,#13282f 58%,#0f2129 100%);box-shadow:inset 0 2px 0 #41646a,0 5px 0 #051016}
.guest-practice .race-joystick-ring {display:none}
.guest-practice .race-joystick-knob {width:clamp(52px,14vmin,64px);height:clamp(52px,14vmin,64px)}
.guest-practice .race-joystick-caption {bottom:10px;font-size:9px;letter-spacing:1px}
.guest-practice .race-joystick-hint {display:none}
.guest-practice .race-joystick-pedals {display:grid;grid-template-columns:repeat(2,64px);grid-template-rows:64px;gap:10px;padding:0}
.guest-practice .race-joystick-pedal {display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:64px;min-width:48px;min-height:48px;padding:4px;border-radius:50%;border-width:2px;font-size:9px;line-height:1.1;letter-spacing:.5px;box-shadow:0 4px 0 #061116,inset 0 2px 0 rgba(255,255,255,.06)}
.guest-practice .race-joystick-pedal>.icon {width:20px;height:20px;margin:0 0 3px}
.guest-practice .race-joystick-brake {background:#3c292f;border-color:#88545f;color:#fac5cb}
.guest-practice .race-joystick-nitro {background:#1a3349;border-color:#527c9c;color:#bde8fc}
@media(max-width:600px){
 .practice-header {min-height:52px;padding:6px 12px;gap:8px}.practice-speed {font-size:16px}
 .practice-header>button {width:48px;padding:0;justify-content:center}
 .practice-header>button>span {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.practice-header>button>.icon {margin-inline-end:0}
 .practice-card {width:calc(100% - 24px);margin:12px;padding:20px}.practice-card h1 {font-size:28px}
 .practice-hud {grid-template-columns:minmax(0,1fr) auto;row-gap:4px;padding:6px 12px;column-gap:12px}
 .practice-objective {grid-column:1/-1}
 .practice-hud .race-live-stats {gap:12px}.practice-hud b {font-size:18px}
 .practice-timer {grid-template-columns:auto 56px}.practice-timer strong {font-size:22px}
 .guest-practice .practice-race-controls {left:12px;right:12px;bottom:12px}
 .guest-practice .race-touch-controls>.race-steering {flex:2 1 0}.guest-practice .race-touch-controls>.race-pedals {flex:3 1 0;margin-left:12px}
 .guest-practice .race-touch-controls button {width:auto;flex:1 1 0;min-width:52px;height:60px;padding:3px 2px}
 .practice-item-help {white-space:normal;max-width:14em;line-height:1.25}
 .guest-practice .race-joystick-steering {max-width:none;width:clamp(150px,54vmin,230px)}
 .practice-countdown {top:48%;width:130px;padding:12px}.practice-countdown strong {font-size:64px}
}
@media(max-height:450px) and (min-width:601px){
 .practice-header {min-height:48px;padding:4px 12px}.practice-hud {padding:4px 12px}.practice-hud b {font-size:18px}.practice-timer strong {font-size:22px}
 .practice-countdown {top:46%;left:65%;width:120px;padding:8px}.practice-countdown strong {font-size:52px}
 .practice-card {margin:12px;padding:20px}
 .guest-practice .practice-race-controls {bottom:10px;left:12px;right:12px}
}

.practice-choice-label {color:#b6c8cd;font-size:12px;font-weight:600;margin-bottom:8px}
.practice-choice-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.guest-practice .practice-choice-grid button {display:flex;align-items:center;gap:8px;min-height:52px;padding:10px;text-align:start;font-size:13px;background:#1c2d38;border-color:#475e69}
.practice-choice-grid button>.icon {flex-shrink:0;color:#a9bec6}.practice-choice-grid button>span {flex:1}
.guest-practice .practice-choice-grid button[aria-checked=true] {border-color:#9af1cf;background:#22463d;color:#d6ffeb}
.practice-choice-grid button[aria-checked=true]>.icon {color:#9af1cf}

/* Chrome 79 supports grid gaps, but not flex gaps. */
.practice-header {display:grid;grid-template-columns:minmax(0,1fr) auto auto auto}
.practice-identity,.practice-card-eyebrow,.practice-livery,.practice-hud .race-live-stats,.practice-utilities,.guest-practice .practice-choice-grid button,.guest-practice .race-touch-controls,.guest-practice .race-touch-controls>* {gap:0}
.practice-identity>*+* {margin-inline-start:10px}.practice-card-eyebrow>*+* {margin-inline-start:8px}
.practice-livery>*+* {margin-inline-start:12px}.practice-livery .practice-preview-tag {margin-inline-start:auto}
.practice-hud .race-live-stats>*+* {margin-inline-start:16px}.practice-timer {border-inline-start:1px solid #31424c;padding-inline-start:14px}
.practice-utilities>*+*,.practice-choice-grid button>*+* {margin-inline-start:8px}
.guest-practice .race-touch-controls>*+* {margin-left:32px}.guest-practice .race-touch-controls button+button {margin-left:8px}
@media(max-width:600px){.guest-practice .race-touch-controls>*+* {margin-left:12px}.practice-hud .race-live-stats>*+* {margin-inline-start:12px}.practice-timer {padding-inline-start:10px}}

.guest-practice .practice-utilities .race-item-button {max-width:180px;min-height:48px;white-space:nowrap;text-align:start;overflow:hidden;text-overflow:ellipsis}
.guest-practice .practice-utilities .race-item-button>span {min-width:0;overflow:hidden;text-overflow:ellipsis}
.guest-practice .practice-utilities .race-item-button.is-ready {background:#29463d;border-color:#9af1cf;color:#d8ffeb}
.guest-practice .practice-utilities .race-item-button>.icon {margin-inline-end:8px}

/* Item guidance stays visible on touch screens; it never relies on hover. */
.practice-item-slot {width:auto;max-width:100%;padding:4px;border:1px solid #2d434c;border-radius:14px;background:#0f1d24d9}
.guest-practice .practice-item-slot .race-item-button {width:auto;opacity:1}
.guest-practice .practice-item-slot .race-item-button:disabled {background:#233640;color:#bdcdd2;border-color:#576d76}
.practice-item-help {margin:0;padding-right:6px;max-width:22em;color:#d3e2e5;font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guest-practice .race-control-hint {display:block;font-size:9px;line-height:1.1;margin-top:1px;color:inherit;opacity:.85}
.practice-controls-help {margin:12px 0;color:#bdd3d7;font-size:13px}.practice-controls-help summary {min-height:48px;display:flex;align-items:center;cursor:pointer;border-top:1px solid #40565f}.practice-controls-help summary::before {content:'+';margin-inline-end:10px;color:#9af1cf;font-size:20px}.practice-controls-help[open] summary::before {content:'−'}
@media(max-height:450px) and (min-width:601px){.practice-item-help {max-width:18em}}
.practice-card .practice-race-note {font-size:12px;line-height:1.5;color:#b6c8cd;margin:12px 0 0}
/* The practice ladder: a goal cell in the strip, a rivals line on the cards, and the results. */
.practice-goal b em {font-size:12px}
.practice-ladder-line {display:flex;align-items:center;flex-wrap:wrap;margin:10px 0 0;font-size:13px;line-height:1.4;color:#b6c8cd}
.practice-ladder-line>.icon {flex:none;color:#9af1cf;margin-inline-end:8px}.practice-ladder-line>span+span {margin-inline-start:12px}
.practice-results {margin:12px 0}
.practice-verdict {margin:0 0 10px;font-size:14px;color:#dfe9ec}
.practice-bests {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 12px;padding:10px 0;border-top:1px solid #334550;border-bottom:1px solid #334550}
.practice-bests dt {font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#a2b8be}
.practice-bests dd {margin:2px 0 0;font-size:24px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.practice-bests dd em {font-style:normal;font-size:12px;font-weight:600;color:#b8c9ce;margin-inline-start:4px}
.practice-bests dd em[data-good=true] {color:#9af1cf}.practice-bests dd em[data-good=false] {color:#ffcf99}
.practice-goal-list {list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin:0;padding:0}
.practice-goal-list li {display:flex;align-items:center;font-size:13px;color:#97b1b6}
.practice-goal-list li>.icon {flex:none;margin-inline-end:8px}
.practice-goal-list li[data-state=passed] {color:#9af1cf}.practice-goal-list li[data-state=done] {color:#d6ffeb}
.practice-results+p {margin-top:0}
/* Narrow screens: the item hint wraps to two lines instead of clipping mid-word. */
@media (max-width:600px){.guest-practice .practice-item-help {white-space:normal;max-width:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
/* Narrow screens: the cue line wraps to two lines; long translations must not clip mid-sentence. */
@media (max-width:600px){.guest-practice .practice-objective p {white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}

/* The mystery box rides with the boost button: a small chip in the bottom
   corner where the thumb already rests, so the road stays clear and the item
   is one reach from NITRO. Its words move to the coached line in the strip and
   stay in the slot for screen readers. The phone controller page is exempt —
   there the slot is the only place the item is named. */
.guest-practice:not(.practice-phone) .practice-utilities {position:absolute;z-index:3;left:auto;right:16px;bottom:90px;margin:0;max-width:calc(100% - 32px);justify-content:flex-end}
.guest-practice:not(.practice-phone) .practice-item-slot {padding:0;border:0;background:none}
.guest-practice:not(.practice-phone) .practice-utilities .race-item-button {max-width:128px;min-width:56px;min-height:48px;padding:0 10px;font-size:12px;background:#0f1d24e6;border-color:#4a626d}
.guest-practice:not(.practice-phone) .practice-utilities .race-item-button>.icon {margin-inline-end:6px}
.guest-practice:not(.practice-phone) .practice-item-help {position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* A box just collected asks to be spent. */
@keyframes practice-item-ready {0%,100% {box-shadow:0 0 0 0 rgba(154,241,207,0)} 50% {box-shadow:0 0 0 7px rgba(154,241,207,.2)}}
.guest-practice:not(.practice-phone) .practice-utilities .race-item-button.is-ready {animation:practice-item-ready 1.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.guest-practice .practice-utilities .race-item-button.is-ready {animation:none}}
/* The coached line carries the colour of the control it asks for. */
.practice-objective p[data-cue=item] {color:#9af1cf}
.practice-objective p[data-cue=boost] {color:#dcc9ff}
@media(max-width:600px){.guest-practice:not(.practice-phone) .practice-utilities {right:12px;bottom:86px}}
@media(max-height:450px) and (min-width:601px){.guest-practice:not(.practice-phone) .practice-utilities {bottom:84px}}

/* The guide read before the race starts: the chosen control first, then the
   two rules that decide a run. One line each, icons on the start edge. */
.practice-guide {list-style:none;display:grid;row-gap:8px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid #33454f}
.practice-guide li {display:flex;align-items:flex-start;font-size:12.5px;line-height:1.4;color:#c3d5d9}
.practice-guide li>.icon {flex:none;margin:1px 10px 0 0;color:#9af1cf}
[dir=rtl] .practice-guide li>.icon {margin:1px 0 0 10px}
/* Room is tight on the car and on a phone held sideways: the card gives up its
   decoration before it gives up the button that starts the race. */
@media (max-height:700px){
 .guest-practice .practice-card h1 {font-size:26px;margin:10px 0}
 .guest-practice .practice-card p {margin:10px 0}
 .guest-practice .practice-card .practice-livery {margin:10px 0;padding:8px 0}
 .guest-practice .practice-card>button {margin-top:10px}
 .practice-guide {margin-top:10px;padding-top:10px;row-gap:6px}
 /* The guide earns its room from the skin promo, which the finished card still carries. */
 .guest-practice[data-phase=ready] .practice-card .practice-livery,.guest-practice[data-phase=paused] .practice-card .practice-livery {display:none}
}
@media (max-height:560px){
 /* Too short to show the card and the button at once: the button becomes a bar
    pinned to the bottom of the card, so starting never needs a scroll. */
 .guest-practice .practice-start-row {position:sticky;bottom:0;z-index:2;margin:0 -24px;padding:10px 24px 0;background:linear-gradient(to top,#142530 72%,rgba(20,37,48,0))}
 .guest-practice .practice-start-row>button {margin-top:0}
 .guest-practice .practice-card {padding-bottom:0}
}
/* While the analytics ask is on screen, a scrolling page keeps room to bring
   its own controls out from under it. */
html[data-phone="true"][data-consent=open] .race-display.race-hub #race-welcome,html[data-phone="true"][data-consent=open] .race-entry,html[data-phone="true"][data-consent=open] .guest-practice {padding-bottom:calc(var(--consent-height,150px) + 28px)}

/* The controls tour rides along with the first race rather than standing in
   front of it: a slim panel in the free middle of the screen, above the
   thumbs, that names one control at a time and steps down once they are all
   found. It never covers the road's horizon or the instruments. */
.practice-tour {position:absolute;z-index:4;left:16px;right:16px;bottom:148px;margin:0 auto;max-width:460px;padding:10px 12px;border:1px solid #3a4f5a;border-radius:14px;background:#0f1d24e6;box-shadow:0 10px 26px #04090c99}
.practice-tour-head {display:flex;align-items:center}
.practice-tour-head>.icon {flex:none;margin-inline-end:10px;color:#9af1cf}
.practice-tour-head>div {flex:1;min-width:0}
.practice-tour-head strong {display:block;font-size:15px;line-height:1.25;color:#edf5f4}
.practice-tour-count {flex:none;margin-inline-start:10px;font-size:11px;color:#a2b8be;white-space:nowrap}
.practice-tour-steps {list-style:none;display:flex;flex-wrap:wrap;margin:6px 0 0;padding:0}
.practice-tour-steps li {display:flex;align-items:center;margin:0 14px 6px 0;font-size:12px;color:#8ea4ab}
[dir=rtl] .practice-tour-steps li {margin:0 0 6px 14px}
.practice-tour-steps li>.icon {flex:none;margin-inline-end:6px}
.practice-tour-steps li[data-state=now] {color:#edf5f4;font-weight:600}
.practice-tour-steps li[data-state=done] {color:#9af1cf}
.practice-tour-close {flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin:-6px -8px -6px 2px;padding:0;border:0;border-radius:12px;background:none;color:#a2b8be}
.practice-tour-start {display:inline-flex;align-items:center;min-height:48px;margin:0 0 10px;padding:0 14px;border:1px solid #4a626d;border-radius:12px;background:#17292f;color:#d6ffeb;font-size:13px;font-weight:600}
.practice-tour-start>.icon {margin-inline-end:8px}
@media(max-width:600px){.practice-tour {left:12px;right:12px;bottom:140px;padding:10px}}
@media(max-height:450px){.practice-tour {bottom:132px;padding:8px 10px}.practice-tour-steps {margin-top:4px}.practice-tour-head strong {font-size:14px}}
html .open-wheel-development,html .open-wheel-race-panel{display:grid;gap:8px;padding:12px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(12,17,23,.78);color:#f4f5f6}
html .open-wheel-development h3{display:flex;justify-content:space-between;gap:12px;margin:0;font-size:16px}
html .open-wheel-career{display:grid;gap:3px;padding:9px;border-left:3px solid #e83f48;background:rgba(232,63,72,.1)}
html .open-wheel-career span{font-size:12px;color:#c2cbd4}
html .open-wheel-development h3 small,html .open-wheel-upgrade-grid article small{color:#aeb7c2;font-size:12px}
html .open-wheel-upgrade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html .open-wheel-upgrade-grid article{display:grid;gap:6px;min-width:0;padding:9px;border-radius:9px;background:rgba(255,255,255,.05)}
html .open-wheel-upgrade-grid button,html .open-wheel-pit-controls button{min-height:48px;padding:8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:9px;background:#c8323c;color:#fff;font-weight:700}
html .open-wheel-upgrade-grid button:disabled,html .open-wheel-pit-controls button:disabled{opacity:.6}
html .open-wheel-race-panel{max-width:330px;font-size:13px}
html .open-wheel-pit-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
html .open-wheel-pit-controls .race-choice-label{white-space:nowrap;font-size:11px;letter-spacing:-.2px}
html[data-tesla="true"] .open-wheel-development{gap:7px;padding:9px}
html[data-tesla="true"] .open-wheel-upgrade-grid button,html[data-tesla="true"] .open-wheel-pit-controls button{min-height:48px}

html .open-wheel-race-panel .open-wheel-drs,html .race-display .race-play .open-wheel-race-panel .open-wheel-drs{min-height:48px;padding:8px 12px;border:1px solid rgba(255,255,255,.24);border-radius:9px;background:#a82430;color:#fff;font-weight:800;touch-action:manipulation}
html .open-wheel-race-panel .open-wheel-drs:disabled,html .race-display .race-play .open-wheel-race-panel .open-wheel-drs:disabled{background:#41474d;color:#d5dadd;opacity:.85}
html .open-wheel-race-panel .open-wheel-drs[aria-pressed="true"],html .race-display .race-play .open-wheel-race-panel .open-wheel-drs[aria-pressed="true"]{background:#167b56}
/* Next corner: direction, distance and holding speed; red at the braking point. */
html .open-wheel-race-panel .open-wheel-corner-call{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:40px;padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.08);font-weight:700;font-variant-numeric:tabular-nums}
html .open-wheel-race-panel .open-wheel-corner-call b{font-size:22px;line-height:1}
html .open-wheel-race-panel .open-wheel-corner-call span{white-space:nowrap}
html .open-wheel-race-panel .open-wheel-corner-call[data-brake="true"]{background:#c21f2d;color:#fff}
html .open-wheel-race-panel .open-wheel-corner-call strong{margin-left:auto;letter-spacing:.06em;text-transform:uppercase}
/* Driving assists: three 48px toggles in one row, lit when on. Scoped under
   .race-play to outrank its generic in-race button rule. */
html .open-wheel-race-panel .open-wheel-assists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
html .race-display .race-play .open-wheel-race-panel .open-wheel-assists button{min-height:48px;min-width:48px;padding:4px 6px;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:#262c32;color:#d5dadd;font:700 12px/1.15 inherit;touch-action:manipulation}
html .race-display .race-play .open-wheel-race-panel .open-wheel-assists button[aria-pressed="true"]{background:#1f6f52;border-color:#3fbf8c;color:#fff}
html .open-wheel-race-panel .open-wheel-lockup{grid-column:1/-1;padding:4px 8px;border-radius:7px;background:#e07b1f;color:#1b1206;text-align:center;letter-spacing:.06em;text-transform:uppercase}
/* Engine mode: Save / Balanced / Push as three 48px buttons, the ERS battery
   under them. Scoped under .race-play to outrank its in-race button rule. */
html .open-wheel-race-panel .open-wheel-engine{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
html .race-display .race-play .open-wheel-race-panel .open-wheel-engine button{min-height:48px;min-width:48px;padding:4px 6px;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:#262c32;color:#d5dadd;font:700 12px/1.15 inherit;touch-action:manipulation}
html .race-display .race-play .open-wheel-race-panel .open-wheel-engine button[data-engine="save"][aria-pressed="true"]{background:#1d5f86;border-color:#5ab4e6;color:#fff}
html .race-display .race-play .open-wheel-race-panel .open-wheel-engine button[data-engine="balanced"][aria-pressed="true"]{background:#8a6d12;border-color:#e8c64b;color:#fff}
html .race-display .race-play .open-wheel-race-panel .open-wheel-engine button[data-engine="push"][aria-pressed="true"]{background:#a82430;border-color:#ff6b75;color:#fff}
html .open-wheel-race-panel .open-wheel-ers{position:relative;grid-column:1/-1;height:18px;overflow:hidden;border-radius:6px;background:#262c32}
html .open-wheel-race-panel .open-wheel-ers i{position:absolute;inset:0 auto 0 0;background:#2f9d6f;transition:width .2s linear}
html .open-wheel-race-panel .open-wheel-ers[data-deploying="true"] i{background:#e0a524}
html .open-wheel-race-panel .open-wheel-ers[data-empty="true"]{outline:2px solid #e05a5a}
html .open-wheel-race-panel .open-wheel-ers span{position:relative;display:block;padding:0 6px;font-size:11px;font-weight:700;line-height:18px;font-variant-numeric:tabular-nums}
/* Tyres and the track: wear against the cliff, water and the forecast. */
html .open-wheel-race-panel .open-wheel-tyres{display:grid;gap:3px}
html .open-wheel-race-panel .open-wheel-tyres i{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;vertical-align:-1px}
html .open-wheel-race-panel .open-wheel-tyres strong{padding:4px 8px;border-radius:7px;background:#e07b1f;color:#1b1206;font-size:12px}
html .open-wheel-race-panel .open-wheel-tyres[data-cliff="past"] strong:first-of-type{background:#c21f2d;color:#fff}
html .open-wheel-race-panel .open-wheel-tyres[data-wet="true"] span:nth-child(2){color:#8fc8f0}
@media(max-height:800px){html .open-wheel-race-panel{gap:6px;padding:9px}}
html .open-wheel-upgrade-grid article[data-focus="true"]{box-shadow:inset 0 0 0 1px #e8c64b}
html .open-wheel-focus-chip{justify-self:start;padding:2px 7px;border-radius:999px;background:#e8c64b;color:#1b1606;font-size:11px;font-style:normal;font-weight:700}
html .open-wheel-yellow-flag{padding:7px 9px;border-radius:6px;background:#efc637;color:#17191b;font-size:12px}

/* Open Wheel: the measured car viewport sets the budget. Strategy sheets and
   results scroll independently; controls keep 48px targets without blur. */
html .race-display .race-play .open-wheel-race-panel{grid-template-columns:1fr 1fr;gap:5px;padding:8px;max-width:330px;max-height:300px;overflow-y:auto;}
html .race-display[data-race-mode="open_wheel"] .race-play .race-hud-rail-left .race-circuit-map{position:relative;left:auto;right:auto;top:auto;max-width:100%;flex:none;}
html .race-display .race-play .open-wheel-race-panel>strong,html .race-display .race-play .open-wheel-corner-call,html .race-display .race-play .open-wheel-engine,html .race-display .race-play .open-wheel-tyres{grid-column:1/-1;}
html .race-display .race-play .open-wheel-race-panel .open-wheel-corner-call{min-height:30px;padding:4px 6px;font-size:11px;}
html .race-display .race-play .open-wheel-race-panel .open-wheel-tyres{font-size:11px;line-height:1.25;}
html .race-display .race-play .open-wheel-race-panel .open-wheel-engine{gap:4px;}
html .race-display .race-play .open-wheel-box,html .race-display .race-play .open-wheel-pit-sheet button{min-width:48px;min-height:48px;padding:6px 10px;border:1px solid #6d7983;border-radius:8px;background:#253f50;color:#fff;touch-action:manipulation;}
html .race-display .race-play .open-wheel-assists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:8px 0;}
html .race-display .race-play .open-wheel-assists button{min-height:48px;min-width:48px;margin-right:4px;padding:6px;border:1px solid #61737a;border-radius:8px;background:#24323a;color:#fff;}
html .race-display .race-play .open-wheel-assists button[aria-pressed=true]{background:#1f6f52;}
html .open-wheel-sheet-backdrop{position:fixed;inset:0;z-index:350;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(0,0,0,.72);}
html .open-wheel-pit-sheet{width:440px;max-width:100%;max-height:calc(100% - 28px);overflow:auto;padding:16px;background:#17232d;border:1px solid #6d7983;border-radius:14px;color:#fff;box-sizing:border-box;}
html .open-wheel-pit-sheet header{display:flex;align-items:center;justify-content:space-between;}
html .open-wheel-compounds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:8px;}
html .open-wheel-compounds button{min-width:48px;min-height:56px;white-space:normal;}
html .open-wheel-compounds small{display:block;}
html .open-wheel-compounds [data-advised=true]{border:2px solid #6be2a8;}
html .open-wheel-pit-sheet label{display:flex;align-items:center;min-height:48px;margin-top:8px;}
html .open-wheel-pit-sheet input{width:28px;height:28px;margin-right:10px;}
html .race-display .race-countdown.is-open-wheel{top:43%;width:380px;max-width:calc(100% - 32px);min-width:0;padding:14px 18px;box-sizing:border-box;}
html .race-display .open-wheel-start-lights{display:grid;grid-template-columns:repeat(5,34px);justify-content:center;column-gap:12px;margin:12px 0;}
html .race-display .open-wheel-start-lights i{display:block;width:34px;height:34px;border:2px solid #855c62;border-radius:50%;background:#35282c;}
html .race-display .open-wheel-start-lights i[data-lit="true"]{border-color:#ffb4a9;background:#ef3f3f;}
html .race-display .open-wheel-start-rule{max-width:320px;margin:4px 0 0;font-size:13px;line-height:1.4;color:#eef9f6;text-transform:none;}
html .race-display .open-wheel-start-guide{padding:10px 12px;border:1px solid #bd8950;border-radius:9px;background:#352b1c;color:#fff2d2;font-size:13px;line-height:1.4;}
html .open-wheel-career table{width:100%;border-collapse:collapse;}
html .open-wheel-career td,html .open-wheel-career th{padding:5px 8px;text-align:left;border-bottom:1px solid #44525a;}
html .open-wheel-career h4,html .open-wheel-results h4{margin:8px 0;}
html .open-wheel-licence{display:inline-block;padding:6px 10px;border-radius:7px;background:#254c42;color:#ebfff6;}
html .open-wheel-results{padding:12px;border:1px solid #52616b;border-radius:10px;background:#17232d;}
html .open-wheel-results dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:6px;margin:8px 0;}
html .open-wheel-results dl div{display:flex;justify-content:space-between;align-items:center;padding:4px 6px;border-bottom:1px solid #3e4d55;}
html .open-wheel-results dt{font-size:12px;}
html .open-wheel-results dd{margin-left:8px;font-variant-numeric:tabular-nums;}
html .race-display .race-play .open-wheel-vsc-banner,html .race-display .race-play .open-wheel-reaction{position:absolute;top:76px;left:50%;transform:translateX(-50%);max-width:70%;padding:8px;border-radius:7px;background:#ffe074;color:#161d23;font-weight:700;z-index:20;pointer-events:none;}
html .race-display .race-play .open-wheel-reaction{top:110px;background:#143f38;color:#fff;}
@media(max-width:700px){html .open-wheel-results dl{grid-template-columns:1fr;}}

/* Both event switches are full-width, focusable car-sized touch controls. */
.race-app label.open-wheel-event-toggle{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;column-gap:12px;min-height:48px;padding:12px 14px;border:1px solid rgba(107,223,203,.25);border-radius:12px;background:rgba(107,223,203,.06);cursor:pointer;}
.race-app label.open-wheel-event-toggle:focus-within{outline:2px solid var(--race-accent,#6bdfcb);outline-offset:2px;}
.race-app label.open-wheel-event-toggle input{width:24px;height:24px;margin:0;}
.race-app label.open-wheel-event-toggle span{min-width:0;line-height:1.4;}