/* style.css */
:root{color-scheme:dark;--accent:#54e8cf;--glow:rgba(84,232,207,.42);--panel:#101519;--line:rgba(255,255,255,.1);font-family:Inter,"SF Pro Display",ui-sans-serif,system-ui,-apple-system,sans-serif;background:#070a0c;color:#f5f8f7}
*{box-sizing:border-box}
body{margin:0;overflow:hidden;background:#070a0c}
button,input,a{font:inherit}
button,a{color:inherit}
.icon{display:block;flex:0 0 auto}
.hidden{opacity:0!important;pointer-events:none!important}
#app{position:relative;width:100vw;height:100vh;min-height:600px;overflow:hidden;background:#080b0e;isolation:isolate}
#app:after{content:"";position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,7,9,.8),transparent 30%,transparent 70%,rgba(4,7,9,.8)),linear-gradient(0deg,rgba(5,8,10,.92),transparent 42%,rgba(5,8,10,.35))}
canvas{position:absolute;z-index:0;width:100%;height:100%;top:0;right:0;bottom:0;left:0}
.ambient-orb{position:absolute;z-index:1;left:50%;top:48%;width:34vw;height:34vw;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 67%);filter:blur(35px);opacity:.42}
.topbar{position:absolute;z-index:5;top:0;left:0;right:0;height:48px;padding:0 var(--s5);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--card-line);background:linear-gradient(180deg,rgba(5,8,10,.82),rgba(5,8,10,.08))}
/* Chrome 79 renders flex `gap` as zero: horizontal rows use margins with an
   explicit right-to-left mirror. Grid `gap` is supported and stays. */
.brand{display:flex;align-items:center}
.brand>*+*{margin-left:var(--s4)}
[dir="rtl"] .brand>*+*{margin-left:0;margin-right:var(--s4)}
.sound-icon,.dock-icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--ctl-line);background:var(--ctl-bg);border-radius:var(--ctl-r);color:var(--text-2)}
.control-dock small{font-size:var(--t-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-3);font-weight:var(--w-med)}
.panel small{font-size:var(--t-small);color:var(--text-3)}
.session-pill{display:flex;align-items:center;min-height:32px;padding:0 var(--s4);border:1px solid var(--card-line);background:rgba(14,19,22,.72);border-radius:100px;font-size:var(--t-small);letter-spacing:0}
.session-pill>*+*{margin-left:var(--s3)}
[dir="rtl"] .session-pill>*+*{margin-left:0;margin-right:var(--s3)}
.session-pill i{width:var(--s2);height:var(--s2);background:#56e3b3;border-radius:50%;box-shadow:0 0 9px #56e3b3}
.session-pill span{font-weight:var(--w-med)}
.session-pill em{font-style:normal;color:var(--text-3);text-transform:none;letter-spacing:0}
.icon-btn{justify-self:end;display:grid;place-items:center;border:1px solid var(--ctl-line);background:var(--ctl-bg);border-radius:var(--ctl-r);height:var(--ctl-h-min);width:var(--ctl-h-min);cursor:pointer;transition:.2s}
.icon-btn:hover{border-color:rgba(255,255,255,.25);background:var(--card-bg-raise)}
.route-ribbon{position:absolute;z-index:4;top:56px;left:var(--s5);display:flex;align-items:center}
.route-ribbon>*+*{margin-left:var(--s4)}
[dir="rtl"] .route-ribbon>*+*{margin-left:0;margin-right:var(--s4)}
/* Identity exception: real road signage keeps its own proportions and its 8 px legend. */
.speed-sign{width:60px;height:68px;background:#f5f5ee;border:3px solid #171a1c;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);color:#111;text-align:center;padding-top:5px;transition:.25s}
.speed-sign small{display:block;font-size:8px;font-weight:var(--w-strong);line-height:.9}
.speed-sign strong{display:block;font-size:var(--n-lg);line-height:1.02;letter-spacing:var(--ls-tight)}
.route-copy{display:flex;flex-direction:column}
.eyebrow{font-size:var(--t-micro);letter-spacing:var(--ls-caps);color:var(--text-2);font-weight:var(--w-med)}
.turn-card small,.section-label{font-size:var(--t-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-2);font-weight:var(--w-med)}
.route-copy>strong{font-size:var(--t-title);margin:var(--s1) 0 0}
.route-copy>small{font-size:var(--t-small);color:var(--text-3)}
.turn-card{position:absolute;z-index:5;right:var(--s5);top:116px;width:300px;padding:var(--card-pad);background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-r);display:grid;grid-template-columns:40px 1fr 18px;gap:var(--s4);align-items:center;box-shadow:var(--float-shadow);transition:.25s}
.turn-symbol{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--ctl-r);background:var(--ctl-bg);font-size:var(--t-head);color:var(--text-1)}
.turn-card div:nth-child(2){display:grid;gap:var(--s1)}
.turn-card strong{font-size:var(--t-ctl)}
.turn-card span{font-size:var(--t-small);color:var(--text-3)}
.vehicle-stage{position:absolute;z-index:3;left:50%;top:46%;width:250px;height:320px;transform:translate(-50%,-50%);display:grid;place-items:center}
.vehicle-halo{position:absolute;width:180px;height:280px;border-radius:50%;background:radial-gradient(ellipse,var(--glow),transparent 68%);filter:blur(22px);opacity:.48}
.car{position:relative;width:108px;height:215px;transform-origin:center;filter:drop-shadow(0 20px 20px #000);will-change:transform}
.car img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:42px;mix-blend-mode:screen}
.tail{position:absolute;bottom:15px;width:16px;height:3px;border-radius:5px;background:#ff5145;box-shadow:0 0 12px #ff5145}
.tail.left{left:17px}
.tail.right{right:17px}
.drive-readout{position:absolute;z-index:5;left:var(--s5);right:var(--s5);bottom:100px;display:grid;grid-template-columns:132px minmax(200px,1fr) 110px;gap:var(--s5);align-items:center}
.speed{display:flex;align-items:baseline}
.speed>*+*{margin-left:var(--s3)}
[dir="rtl"] .speed>*+*{margin-left:0;margin-right:var(--s3)}
.speed strong{font-variant-numeric:tabular-nums;font-size:var(--n-hud);font-weight:var(--w-strong);line-height:1;letter-spacing:var(--ls-tight)}
.speed>span,.gear>span{font-size:var(--t-micro);color:var(--text-2);font-weight:var(--w-med);letter-spacing:var(--ls-caps);text-transform:uppercase}
.engine-meter{max-width:600px;justify-self:center;width:100%}
.meter-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s1)}
.meter-label span{font-size:var(--t-micro);color:var(--text-2);letter-spacing:var(--ls-caps);text-transform:uppercase;font-weight:var(--w-med)}
.meter-label strong{font-size:var(--n-sm);font-weight:var(--w-strong);letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums}
.meter{height:4px;background:rgba(255,255,255,.09);border-radius:4px;overflow:hidden}
.meter i{display:block;height:100%;width:10%;background:linear-gradient(90deg,#4ae6c8,var(--accent),#fff);box-shadow:0 0 16px var(--glow);transition:width .08s}
/* The five tick numbers repeat the RPM readout above them. */
.meter-scale{display:none}
.gear{text-align:center}
.gear>div{justify-content:center}
.control-dock{position:absolute;z-index:6;bottom:var(--s7);left:50%;transform:translateX(-50%);width:min(760px,calc(100vw - 68px));height:var(--ctl-h-lg);padding:0 var(--s4);display:grid;grid-template-columns:1.4fr 1px 1.2fr 1px .65fr;align-items:center;gap:var(--s4);background:var(--glass-strong);border:1px solid var(--card-line);border-radius:var(--card-r);box-shadow:var(--float-shadow)}
.divider{height:var(--s7);background:rgba(255,255,255,.09)}
.sound-btn{height:100%;display:flex;align-items:center;padding:0;background:none;border:0;text-align:start;cursor:pointer}
.sound-btn>*+*{margin-left:var(--s4)}
[dir="rtl"] .sound-btn>*+*{margin-left:0;margin-right:var(--s4)}
.sound-btn>.audio-bars{margin-left:auto}
[dir="rtl"] .sound-btn>.audio-bars{margin-left:0;margin-right:auto}
.sound-btn>div{display:grid;gap:var(--s1)}
.sound-btn strong{font-size:var(--t-ctl);font-weight:var(--w-med);letter-spacing:0}
.sound-btn.active .sound-icon{background:var(--accent);color:#07100e;box-shadow:0 0 22px var(--glow)}
.audio-bars{height:20px;display:flex;align-items:center}
.audio-bars b{display:block;width:2px;height:var(--s2);border-radius:2px;background:var(--accent)}
.audio-bars b+b{margin-left:var(--s1)}
.sound-btn.active .audio-bars b{animation:levels .65s ease-in-out infinite alternate}
.sound-btn.active .audio-bars b:nth-child(2){animation-delay:-.25s}
.sound-btn.active .audio-bars b:nth-child(3){animation-delay:-.45s}
@keyframes levels{to{height:18px}}
.destination,.battery{display:flex;align-items:center}
.battery{justify-content:center}
.destination>*+*,.battery>*+*{margin-left:var(--s4)}
[dir="rtl"] .destination>*+*,[dir="rtl"] .battery>*+*{margin-left:0;margin-right:var(--s4)}
.destination>div{display:grid;gap:var(--s1)}
.destination strong{display:flex;align-items:center;font-size:var(--t-ctl)}
.destination strong>*+*{margin-left:var(--s3)}
[dir="rtl"] .destination strong>*+*{margin-left:0;margin-right:var(--s3)}
.destination strong i{width:3px;height:3px;background:#59656b;border-radius:50%}
.battery svg{color:#62dab3}
.battery>div{display:grid;gap:var(--s1)}
.battery strong{font-size:var(--t-ctl)}
/* Legal line: the only 10 px exception on the drive screen. */
.disclaimer{position:absolute;z-index:7;bottom:var(--s1);left:50%;transform:translateX(-50%);display:flex;align-items:center;white-space:nowrap;color:var(--text-3);font-size:var(--t-micro,10px);letter-spacing:0}
.disclaimer .icon{margin-right:var(--s2)}
[dir="rtl"] .disclaimer .icon{margin-right:0;margin-left:var(--s2)}
/* Identity exception: the stale-data warning keeps its amber alarm colour. */
.stale{position:absolute;z-index:10;top:92px;left:50%;transform:translateX(-50%);background:#4f2922;color:#ffb6a4;padding:var(--row-pad);border-radius:var(--ctl-r);font-size:var(--t-small);font-weight:var(--w-med);transition:.2s}
.scrim{position:fixed;z-index:19;top:0;right:0;bottom:0;left:0;background:var(--scrim);opacity:0;pointer-events:none;transition:.35s}
.scrim.visible{opacity:1;pointer-events:auto}
.panel{position:fixed;z-index:20;top:0;right:0;width:min(560px,100vw);height:100vh;padding:var(--s6);background:#0d1215;border-left:1px solid var(--card-line);transform:translateX(102%);transition:transform .38s cubic-bezier(.22,.8,.25,1);overflow:auto}
.panel.open{transform:none}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:var(--s5);border-bottom:1px solid var(--card-line)}
.panel-kicker{display:flex;align-items:center;color:var(--text-2);font-size:var(--t-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;font-weight:var(--w-med)}
.panel-kicker .icon{margin-right:var(--s2)}
[dir="rtl"] .panel-kicker .icon{margin-right:0;margin-left:var(--s2)}
.panel h1{margin:var(--s1) 0 0;font-size:var(--t-head);font-weight:var(--w-med);letter-spacing:var(--ls-tight)}
.panel-head p{margin:0;color:var(--text-3);font-size:var(--t-body)}
.setting-section{padding:var(--s6) 0;border-bottom:1px solid var(--card-line)}
.section-label{display:flex;justify-content:space-between;margin-bottom:var(--s4)}
.section-label small{color:var(--text-3)}
.profiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.profile{position:relative;display:flex;align-items:center;min-height:var(--ctl-h-tile);padding:var(--card-pad);border:1px solid var(--card-line);background:var(--card-bg);border-radius:var(--card-r);text-align:start;cursor:pointer;transition:.2s}
.profile>*+*{margin-left:var(--s4)}
[dir="rtl"] .profile>*+*{margin-left:0;margin-right:var(--s4)}
.profile:hover{background:var(--card-bg-raise)}
.profile.active{border-color:var(--sel-line);background:var(--sel-bg);box-shadow:none}
.profile-orb{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;border-radius:var(--ctl-r);background:hsl(var(--profile-hue) 75% 50% / .13);color:hsl(var(--profile-hue) 85% 65%)}
.profile>span:nth-child(2){display:grid;gap:var(--s1)}
.profile strong{font-size:var(--t-ctl)}
.profile small{font-size:var(--t-small)}
.profile>i{position:absolute;right:var(--s3);top:var(--s2);font-style:normal;font-size:var(--t-micro);letter-spacing:var(--ls-caps);color:var(--sel-line)}
.toggles{display:grid;gap:var(--s3);margin-top:var(--s5)}
.toggles label{display:flex;justify-content:space-between;align-items:center;min-height:var(--ctl-h);padding:var(--row-pad);background:var(--ctl-bg);border-radius:var(--ctl-r)}
.toggles label>span{display:grid;gap:var(--s1)}
.toggles strong{font-size:var(--t-ctl)}
.toggles input{width:36px;height:20px;accent-color:var(--sel-line)}
.privacy{display:flex;margin-top:var(--s6);padding:var(--card-pad);border:1px solid var(--card-line);background:var(--card-bg);border-radius:var(--card-r);color:var(--text-2)}
.privacy>*+*{margin-left:var(--s4)}
[dir="rtl"] .privacy>*+*{margin-left:0;margin-right:var(--s4)}
.privacy div{display:grid;gap:var(--s1)}
.privacy strong{font-size:var(--t-ctl);color:var(--text-1)}
.privacy p{margin:0;color:var(--text-3);font-size:var(--t-small)}
.tesla-connect{margin-top:var(--s4);display:flex;align-items:center;justify-content:space-between;min-height:var(--ctl-h-lg);padding:0 var(--s5);background:#edf1ee;color:#0b0f11;border-radius:var(--ctl-r);text-decoration:none;font-size:var(--t-ctl);font-weight:var(--w-strong)}
.tesla-connect span{display:flex;align-items:center}
.tesla-connect span .icon{margin-right:var(--s3)}
[dir="rtl"] .tesla-connect span .icon{margin-right:0;margin-left:var(--s3)}
@media(max-width:850px){.topbar{padding:0 var(--s4)}.session-pill em{display:none}.route-ribbon{left:var(--s4)}.turn-card{right:var(--s4)}.drive-readout{left:var(--s4);right:var(--s4);grid-template-columns:120px 1fr 104px;gap:var(--s4)}.control-dock{width:calc(100vw - 40px)}.car{width:88px;height:176px}}
@media(max-height:700px){#app{min-height:500px}.vehicle-stage{top:43%;transform:translate(-50%,-50%) scale(.78)}.drive-readout{bottom:88px}.control-dock{bottom:var(--s6)}.setting-section{padding:var(--s5) 0}.profiles{gap:var(--s2)}}
/* DRIWE brand assets */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.brand-logo{display:block;width:88px;height:auto;color:inherit}
@media(max-width:600px){.brand-logo{width:72px}}
/* ODbL attribution shown whenever OpenStreetMap road data is on screen. */
.route-attribution{display:block;margin-top:var(--s1);font-size:var(--t-small);letter-spacing:0;opacity:.55}

/* customization.css */
:root{--car-color:#45d8c4}
.speed-sign{position:relative}
.speed-sign.near-limit{border-color:#dfaa35;box-shadow:0 0 0 2px rgba(223,170,53,.28),0 10px 35px rgba(223,170,53,.22)}
.speed-sign.over-limit{color:#fff;background:#e34232;border-color:#ff988c;animation:limit-pulse 1.35s ease-in-out infinite}
.speed-sign.over-limit:after{content:attr(data-over) " " attr(data-unit);position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);min-width:56px;padding:4px 6px;border-radius:6px;background:#e34232;color:#fff;font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em;white-space:nowrap;box-shadow:0 7px 18px rgba(227,66,50,.3)}
@keyframes limit-pulse{50%{box-shadow:0 0 0 5px rgba(227,66,50,.18),0 0 28px rgba(227,66,50,.42)}}
.car img{position:relative;z-index:1}
.car-tint{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;background:var(--car-color);opacity:.72;mix-blend-mode:color;-webkit-mask-image:url('/assets/road-synth-car.png');mask-image:url('/assets/road-synth-car.png');-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;pointer-events:none}
.tail{z-index:3}
.car-colors{display:flex;align-items:center;flex-wrap:wrap}
.car-colors>*{margin:0 var(--s3) var(--s3) 0}
[dir="rtl"] .car-colors>*{margin:0 0 var(--s3) var(--s3)}
.car-colors>button,.custom-color{position:relative;width:48px;height:48px;border:1px solid var(--ctl-line);border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 3px #101519;transition:transform .18s,border-color .18s}
.car-colors>button:hover,.car-colors>button.selected{transform:scale(1.12);border-color:#fff}
.car-colors>button.selected:after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border:1px solid var(--accent);border-radius:50%}
.custom-color{display:grid;place-items:center;overflow:hidden;background:conic-gradient(#f33,#fc3,#3d7,#3cf,#74f,#f4b,#f33);color:white;font-size:15px;font-weight:400}
.custom-color input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}
.custom-color span{position:relative;z-index:1;text-shadow:0 1px 4px #000;pointer-events:none}
@media(prefers-reduced-motion:reduce){.speed-sign.over-limit{animation:none}}
.profiles{grid-template-columns:1fr;border:0;padding:0;margin:0;min-width:0}
.profile-catalog{display:grid;gap:var(--s4);border:0;padding:0;margin:0;min-width:0}.profile-group{display:grid;gap:var(--s3)}.profile-group h3{margin:0;color:#78858b;font-size:var(--t-micro,10px);letter-spacing:.06em;font-weight:700}.profile-group+.profile-group{padding-top:var(--s4);border-top:1px solid var(--card-line)}
.profile{min-height:62px}
.profile>input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.profile:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.profiles.switching .profile.active{cursor:progress}
.profile-spinner{display:block;width:12px;height:12px;border:2px solid rgba(84,232,207,.28);border-top-color:var(--accent);border-radius:50%;animation:profile-spin .65s linear infinite}
@keyframes profile-spin{to{transform:rotate(360deg)}}
.profile-orb{font-size:15px}
.profile small{letter-spacing:0;text-transform:none;line-height:1.25}
.sound-btn.error .sound-icon{color:#ff7868;border-color:rgba(255,120,104,.55)}
.sound-btn.error small{color:#ff7868}
.environments{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.environments button{display:flex;align-items:center;min-height:var(--ctl-h-tile);padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);color:#fff;text-align:left;cursor:pointer;transition:.18s}
.environments button:hover{background:#192126}
.environments button.active{border-color:var(--sel-line);background:var(--sel-bg)}
.environments>button>i{margin-right:var(--s3)}
[dir="rtl"] .environments>button>i{margin-right:0;margin-left:var(--s3)}
.environments i{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border-radius:10px;color:#07100e;font-style:normal;font-weight:700;font-size:15px}
.environments span{display:grid}
.environments strong{font-size:11px}
.environments small{font-size:11px;letter-spacing:0;text-transform:none;line-height:1.25}
.vehicle-stage{display:none}
.drive-side{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.drive-side button{padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);color:#fff;text-align:left;cursor:pointer}.drive-side button.active{border-color:var(--sel-line);background:var(--sel-bg)}.drive-side strong,.drive-side small{display:block}.drive-side strong{font-size:11px}.drive-side small{margin-top:4px;font-size:11px;letter-spacing:0;text-transform:none}
.gear>div{display:flex;justify-content:flex-end;align-items:center}
.gear>div>*+*{margin-left:var(--s2)}.gear button{display:none;width:29px;height:34px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(15,20,23,.85);color:#fff;font-size:15px;cursor:pointer}.gear.manual button{display:grid;place-items:center}.gear.manual strong{font-size:20px;min-width:42px;text-align:center}
.drive-side button:disabled{opacity:.38;cursor:not-allowed}
.country-list{display:grid;gap:var(--s3)}.country-list details{border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);overflow:hidden}.country-list summary{display:flex;align-items:center;padding:var(--row-pad);cursor:pointer;list-style:none}.country-list summary>*+*{margin-left:var(--s3)}[dir="rtl"] .country-list summary>*+*{margin-left:0;margin-right:var(--s3)}.country-list summary::-webkit-details-marker{display:none}.country-list summary>i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#08100e;font-style:normal;font-weight:700}.country-list summary>span{display:grid;flex:1;min-width:0}.country-list summary strong{font-size:11px}.country-list summary small{font-size:11px;letter-spacing:0;text-transform:none}.country-list summary>b{color:#718087}.region-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);padding:0 var(--s3) var(--s3)}.region-grid button{min-height:var(--ctl-h);padding:var(--row-pad);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:#fff;text-align:left;cursor:pointer}.region-grid button.active{border-color:var(--sel-line);background:var(--sel-bg)}.region-grid strong,.region-grid small{display:block}.region-grid strong{font-size:11px}.region-grid small{margin-top:3px;font-size:11px;color:#748087}
.nitro-btn{position:absolute;z-index:8;right:34px;bottom:126px;width:86px;height:58px;display:grid;place-items:center;border:1px solid rgba(105,208,255,.45);border-radius:14px;background:linear-gradient(145deg,rgba(21,49,63,.92),rgba(10,18,23,.92));color:#8be4ff;box-shadow:0 8px 28px rgba(0,0,0,.35);cursor:pointer}.nitro-btn strong{font-size:15px;font-style:italic}.nitro-btn small{font-size:var(--t-micro,10px);letter-spacing:.06em}.nitro-btn:disabled{opacity:.55}
/* One expanding exhaust shockwave, behind the HUD. Only transform and opacity
   animate; the bounded layer does not filter the scene or capture touches. */
#app.nitro-active::before{
 content:"";position:absolute;z-index:2;left:50%;top:59%;
 width:62vw;max-width:480px;height:20vh;max-height:150px;
 pointer-events:none;border:3px solid rgba(111,218,255,.65);border-radius:50%;
 background:radial-gradient(ellipse at center,rgba(57,167,236,.28),rgba(66,196,248,.12) 42%,transparent 67%);
 opacity:0;transform:translate(-50%,-50%) scale(.16,.45);
 animation:nitro-blast .85s cubic-bezier(.12,.58,.28,1) 1;
}
#app.nitro-active .nitro-btn{opacity:1;border-color:#81d9f6;background:#173c49;color:#c6f1ff}
@keyframes nitro-blast{
 0%{opacity:0;transform:translate(-50%,-50%) scale(.16,.45)}
 18%{opacity:.8}
 100%{opacity:0;transform:translate(-50%,-50%) scale(1,1)}
}
html[data-reduced-effects="true"] #app.nitro-active::before{content:none;animation:none}
@media(prefers-reduced-motion:reduce){#app.nitro-active::before{content:none;animation:none}}

.horn-btn{position:absolute;z-index:8;right:130px;bottom:126px;width:76px;height:58px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:linear-gradient(145deg,rgba(30,35,38,.94),rgba(10,15,18,.94));color:#eef6f5;box-shadow:0 8px 28px rgba(0,0,0,.35);cursor:pointer}.horn-btn strong{display:grid;place-items:center}.horn-btn small{font-size:var(--t-micro,10px);letter-spacing:.06em}.horn-btn:hover,.horn-btn:focus-visible{border-color:var(--accent);color:var(--accent)}.horn-btn:active{transform:scale(.96)}.horn-btn:disabled{opacity:.55}
.horn-control{display:contents}.horn-control select{position:absolute;z-index:9;right:130px;bottom:190px;width:190px;min-height:var(--ctl-h-min);padding:0 24px 0 var(--s4);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:#11191de8;color:#dfe9e8;font-family:inherit;font-weight:600;font-size:var(--t-micro,10px);line-height:1.2;letter-spacing:0;cursor:pointer}.horn-control select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.horn-choice-icon{position:absolute;top:5px;right:7px;font-size:15px;line-height:1}.horn-btn strong .icon{opacity:.82}
@media(max-width:850px){.nitro-btn{right:20px;bottom:112px}.horn-btn{right:116px;bottom:112px}.horn-control select{right:116px;bottom:176px}}
.visual-choices{grid-template-columns:1fr 1fr}.visual-choices button{min-height:var(--ctl-h-tile);display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;padding:var(--card-pad)}.visual-choices button>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.055);font-size:20px}.visual-choices button>strong{align-self:end}.visual-choices button>small{align-self:start;color:#6f7d84;font-size:11px;letter-spacing:0}.visual-choices button.active>span{background:var(--sel-bg);color:var(--sel-line)}html[data-visual-mode="2d"] #app:after{background:linear-gradient(90deg,rgba(4,7,9,.34),transparent 30%,transparent 70%,rgba(4,7,9,.34)),linear-gradient(0deg,rgba(5,8,10,.72),transparent 33%,rgba(5,8,10,.05))}html[data-visual-mode="2d"] .cinema-title,html[data-visual-mode="2d"] .world-reel,html[data-visual-mode="2d"] .scene-status,html[data-visual-mode="2d"] .drive-dynamics{opacity:0;pointer-events:none}html[data-visual-mode="2d"] .speed{position:fixed;z-index:8;left:50%;top:35%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;text-shadow:0 4px 22px rgba(0,0,0,.5)}html[data-visual-mode="2d"] .speed strong{font-size:clamp(86px,10vw,148px);font-weight:600;line-height:.8;letter-spacing:-.02em}html[data-visual-mode="2d"] .speed>span{padding:0;font-size:13px;color:rgba(255,255,255,.72);letter-spacing:0;text-transform:lowercase}html[data-visual-mode="2d"] .engine-meter{opacity:.42}html[data-visual-mode="2d"] .route-ribbon{opacity:.58;transform:scale(.86);transform-origin:left top}html[data-visual-mode="2d"] .turn-card{opacity:.72}
/* DRIWE audio/profile loaders */
.engine-loader{vertical-align:middle;margin-right:var(--s3);width:22px;height:16px;object-fit:contain;animation:driwe-eq .65s ease-in-out infinite alternate}
.profile-loader{display:block;width:64px;height:8px;object-fit:cover;object-position:left}
@keyframes driwe-eq{to{transform:scaleY(.58);opacity:.62}}
@media(prefers-reduced-motion:reduce){.engine-loader{animation:none}}
/* Horn choice belongs in Drive Studio; the driving HUD stays one-tap. */
.horn-picker{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}.horn-preview-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--ctl-r);background:var(--ctl-bg);font-size:var(--t-head)}.horn-picker label{display:grid;gap:var(--s1);min-width:0}.horn-picker label>small{color:#718087;font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em}.horn-studio-select{width:100%;height:var(--ctl-h);padding:0 30px 0 var(--s4);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:#edf4f2;font-size:var(--t-ctl);font-weight:var(--w-med)}.horn-picker>button{height:var(--ctl-h);padding:0 var(--s4);border:1px solid var(--sel-line);border-radius:var(--ctl-r);background:var(--sel-bg);color:var(--sel-line);font-size:var(--t-ctl);font-weight:var(--w-med);cursor:pointer}.horn-picker>button:disabled{opacity:.45}.horn-upgrade{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--ctl-h-min);margin-top:var(--s3);padding:var(--row-pad);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:transparent;color:#87959a;font-size:var(--t-ctl);cursor:pointer}.horn-upgrade b{color:var(--accent);font-size:var(--t-micro,10px);letter-spacing:.06em}@media(max-width:460px){.horn-picker{grid-template-columns:42px 1fr}.horn-preview-icon{width:42px;height:42px}.horn-picker>button{grid-column:1/-1}}

/* design-system.css */
/* Automotive HMI refinement: high contrast, stable zones, large targets.
   This block owns the Drive and Shop half of the Driwe design system; the
   Racing surfaces declare the same token names on .race-display. Seven type
   steps, three weights, three tracks, one 4/6/8/12/16/20/24 spacing scale,
   one card, one control. car-density.css lifts the type steps one notch for
   html[data-tesla="true"], where the screen sits at arm's length. */
:root{
 --glass:rgba(9,14,18,.82);--glass-strong:rgba(10,15,18,.94);--hairline:rgba(224,241,244,.14);--text-1:#f6faf9;--text-2:#aab7bc;--text-3:#77868d;
 --t-micro:10px;--t-small:11px;--t-body:12px;--t-ctl:13px;--t-title:15px;--t-head:20px;--t-display:26px;
 --n-sm:20px;--n-lg:24px;--n-hud:40px;
 --w-body:400;--w-med:600;--w-strong:700;
 --ls-caps:.06em;--ls-tight:-.02em;
 --s1:4px;--s2:6px;--s3:8px;--s4:12px;--s5:16px;--s6:20px;--s7:24px;
 --card-bg:#12191d;--card-bg-raise:#172126;--card-line:rgba(224,241,244,.12);--ctl-bg:#151d21;--ctl-line:rgba(224,241,244,.12);
 --card-r:12px;--ctl-r:10px;--card-pad:12px;--row-pad:8px 12px;
 --float-shadow:0 10px 28px rgba(0,0,0,.28);--dialog-shadow:0 18px 50px rgba(0,0,0,.45);--scrim:rgba(4,9,11,.8);
 --sel-line:var(--design-lime,#b3ed59);--sel-bg:rgba(179,237,89,.08);--focus:#b3ed59;
 --ctl-h-min:48px;--ctl-h:50px;--ctl-h-lg:52px;--ctl-h-tile:56px
}
#app:after{background:linear-gradient(90deg,rgba(2,5,7,.55),transparent 24%,transparent 76%,rgba(2,5,7,.55)),linear-gradient(0deg,rgba(3,6,8,.8),transparent 38%,rgba(3,6,8,.18))}
/* The 48 px floor has to out-rank the older decorative sheets. */
.topbar>button.icon-btn,.topbar .top-actions>button.account-btn{width:var(--ctl-h-min);height:var(--ctl-h-min);border-radius:var(--ctl-r)}
/* The ribbon is a card and follows the bar: 48 px of chrome plus one step. */
.route-ribbon{top:56px;left:var(--s5);min-width:0;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--glass);box-shadow:var(--float-shadow)}
/* Wide screens centre the cluster over the road instead of spanning it. */
.drive-readout{left:50%;right:auto;transform:translateX(-50%);width:min(760px,calc(100vw - 360px))}
.control-dock{width:min(760px,calc(100vw - 330px))}
.engine-meter{max-width:none}
.nitro-btn{right:var(--s5);bottom:var(--s7);width:96px;height:var(--ctl-h-lg);border-radius:var(--ctl-r)}
.horn-btn{right:120px;bottom:var(--s7);width:96px;height:var(--ctl-h-lg);border-radius:var(--ctl-r)}
.nitro-btn strong{font-size:var(--t-title)}
.nitro-btn small,.horn-btn small{font-size:var(--t-micro)}
.panel{width:min(560px,100vw);padding:0 var(--s6) var(--s6)}
.panel-head{position:sticky;z-index:3;top:0;margin:0 -4px;padding:var(--s6) var(--s1) var(--s5);background:linear-gradient(#0a0f12 82%,transparent)}
.panel-head .icon-btn{width:var(--ctl-h-min);height:var(--ctl-h-min)}
.profile,.environments button,.country-list summary,.drive-side button{min-height:var(--ctl-h-tile);padding:var(--card-pad)}
.profile-orb,.environments i,.country-list summary>i{width:40px;height:40px}
.environments strong,.country-list summary strong,.region-grid strong{font-size:var(--t-ctl)}
.environments small,.country-list summary small,.region-grid small{font-size:var(--t-small);color:var(--text-3);line-height:1.35}
.region-grid button{min-height:var(--ctl-h);padding:var(--row-pad)}
.region-grid .route-stops{margin-top:var(--s1);color:var(--text-2);font-size:var(--t-small);line-height:1.45;overflow-wrap:anywhere}
/* A literal focus colour: the car's Chromium has no color-mix(). */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:1100px){.drive-readout{width:calc(100vw - 260px);grid-template-columns:120px 1fr 104px}.control-dock{width:calc(100vw - 210px)}}
@media(max-height:760px){.panel{padding:0 var(--s5) var(--s5)}.panel-head{padding:var(--s5) var(--s1) var(--s4)}}

/* design-nav.css */
/* Settings tabs: one sticky row of five, parked under the sticky panel head. */
.panel-nav {
  position: sticky;
  z-index: 4;
  top: 96px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s3);
  margin: 0 -4px;
  padding: var(--s3) var(--s1) var(--s4);
  background: linear-gradient(#0a0f12 78%, transparent);
}

.panel-nav button {
  min-height: var(--ctl-h-tile);
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s1);
  padding: var(--row-pad);
  border: 1px solid var(--ctl-line);
  border-radius: var(--ctl-r);
  background: var(--ctl-bg);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.panel-nav button:hover { border-color: var(--sel-line); color: var(--text-1); background: var(--card-bg-raise); }
.panel-nav button.active { border-color: var(--sel-line); background: var(--sel-bg); color: var(--text-1); }
/* Five tabs across one row: long translations wrap rather than widen the row. */
.panel-nav button > span { font-size: var(--t-ctl); font-weight: var(--w-med); line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.setting-section { scroll-margin-top: 172px; }

@media (max-height: 760px) {
  .panel-nav { top: 88px; }
  .panel-nav button { min-height: var(--ctl-h); }
  .setting-section { scroll-margin-top: 158px; }
}

/* traffic-controls.css */
/* Settings choice grids: one control style for traffic, lanes, time and season. */
.setting-subtitle { display:flex; align-items:baseline; justify-content:space-between; margin:var(--s1) 0 var(--s3); }
.setting-subtitle > small { margin-left:var(--s4); }
[dir="rtl"] .setting-subtitle > small { margin-left:0; margin-right:var(--s4); }
.setting-subtitle + .choice-grid { margin-bottom:var(--s6); }
.setting-subtitle strong { color:var(--text-1); font-size:var(--t-ctl); font-weight:var(--w-med); }
.setting-subtitle small { color:var(--text-3); font-size:var(--t-small); letter-spacing:0; text-align:end; }
.choice-grid { display:grid; gap:var(--s3); }
.traffic-choices { grid-template-columns:repeat(5,1fr); }
.lane-choices { grid-template-columns:repeat(4,1fr); }
.choice-grid button { min-height:var(--ctl-h); padding:var(--row-pad); border:1px solid var(--ctl-line); border-radius:var(--ctl-r); background:var(--ctl-bg); color:var(--text-2); cursor:pointer; }
.choice-grid button:hover { border-color:var(--sel-line); color:var(--text-1); }
.choice-grid button.active { border-color:var(--sel-line); background:var(--sel-bg); color:var(--text-1); box-shadow:none; }
.time-choices { grid-template-columns:repeat(3,1fr); }
.time-choices button { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:var(--ctl-h-tile); text-align:center; }
.time-choices button > * + * { margin-top:var(--s1); }
.time-choices button span { font-size:var(--t-head); line-height:1; }
.time-choices button strong { overflow-wrap:anywhere; }
.season-choices { grid-template-columns:repeat(3,minmax(0,1fr)); }
.season-choices button strong { overflow-wrap:anywhere; }
.setting-hint { margin:var(--s4) 0 0; color:var(--text-3); font-size:var(--t-small); line-height:1.5; }
@media(max-width:430px){.traffic-choices{grid-template-columns:repeat(3,1fr)}.lane-choices{grid-template-columns:repeat(2,1fr)}}
/* The parked-and-ready note is a plain card; only its shield carries colour. */
.safety-note { display:flex; margin-bottom:var(--s5); padding:var(--card-pad); border:1px solid var(--card-line); border-radius:var(--card-r); background:var(--card-bg); color:var(--text-2); }
.safety-note > * + * { margin-left:var(--s4); }
[dir="rtl"] .safety-note > * + * { margin-left:0; margin-right:var(--s4); }
.safety-note > svg { flex:0 0 auto; margin-top:2px; color:var(--sel-line); }
.safety-note strong { display:block; color:var(--text-1); font-size:var(--t-ctl); font-weight:var(--w-med); }
.safety-note p { margin:var(--s1) 0 0; color:var(--text-3); font-size:var(--t-small); line-height:1.5; }

/* commerce.css */
.top-actions{justify-self:end;display:flex;align-items:center}.top-actions .icon-btn{justify-self:auto}.purchase-cta{min-height:var(--ctl-h-min);padding:0 var(--s5);border:1px solid var(--accent);border-radius:var(--ctl-r);background:var(--accent);color:#06100d;font-size:var(--t-ctl);font-weight:var(--w-strong);cursor:pointer}.account-btn{width:var(--ctl-h-min);height:var(--ctl-h-min);border:1px solid var(--card-line);border-radius:50%;background:#131a1e;color:var(--text-1);font-weight:700;cursor:pointer}
.locked{position:relative;opacity:.68}.locked:after{content:'⌁';position:absolute;top:6px;right:7px;color:#f4ca70;font-size:11px}.lock-tag{position:absolute;right:var(--s3);bottom:var(--s2);padding:2px var(--s1);border-radius:var(--s1);background:#463a20;color:#ffd879;font-size:var(--t-micro,10px);letter-spacing:.06em}.car-colors .locked{outline:2px solid rgba(255,205,105,.32);outline-offset:2px}
.free-tag{position:absolute;right:var(--s3);bottom:var(--s2);padding:2px var(--s1);border-radius:var(--s1);background:rgba(65,211,163,.13);color:#65e1b5;font-size:var(--t-micro,10px);letter-spacing:.06em}
.commerce-layer{position:fixed;z-index:80;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:var(--s5);background:var(--scrim);animation:commerce-in .22s ease-out}.commerce-modal{position:relative;width:min(510px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:var(--s6);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);box-shadow:var(--dialog-shadow);animation:commerce-rise .32s cubic-bezier(.2,.8,.2,1)}.commerce-close{position:absolute;right:var(--s4);top:var(--s4);width:var(--ctl-h-lg);height:var(--ctl-h-lg);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:var(--text-1);font-size:var(--t-head);cursor:pointer}.commerce-mark,.success-orb{display:grid;place-items:center;width:48px;height:48px;margin-bottom:var(--s4);border-radius:var(--ctl-r);background:var(--accent);color:#07100d}.commerce-kicker{margin:0 0 var(--s1);color:var(--accent);font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em}.commerce-modal h2{margin:0;font-size:var(--t-head);line-height:20px;letter-spacing:var(--ls-tight)}.commerce-copy{margin:var(--s3) 0 var(--s5);color:var(--text-2);font-size:var(--t-body);line-height:1.55}.login-form{display:grid;gap:var(--s3)}.login-form label{font-size:var(--t-small);font-weight:var(--w-med);color:var(--text-2)}.login-form input{width:100%;height:var(--ctl-h-lg);padding:0 var(--s4);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:var(--text-1);outline:none}.login-form input:focus{border-color:var(--sel-line)}.login-form button,.checkout-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--ctl-h-lg);margin-top:var(--s1);padding:0 var(--s5);border:0;border-radius:var(--ctl-r);background:var(--accent);color:#06100d;font-size:var(--t-ctl);font-weight:var(--w-strong);cursor:pointer}.commerce-legal{display:flex;align-items:center;margin:var(--s4) 0 0;color:var(--text-3);font-size:var(--t-small)}.commerce-legal>svg{margin-right:var(--s2)}[dir="rtl"] .commerce-legal>svg{margin-right:0;margin-left:var(--s2)}.plan-grid{display:grid;gap:var(--s3)}.plan-grid>button{display:grid;grid-template-columns:minmax(0,1fr) auto;justify-content:space-between;align-items:center;gap:var(--s5);min-height:var(--ctl-h-tile);padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);color:var(--text-1);text-align:left;cursor:pointer}.plan-grid>button.selected{border-color:var(--sel-line);background:var(--sel-bg)}.plan-grid span{display:grid}.plan-grid span small{color:var(--text-3);font-size:11px}.plan-grid b{white-space:nowrap;font-size:15px}.plan-grid b small{display:block;color:var(--text-3);font-size:11px;text-align:right}.text-action{display:block;min-height:var(--ctl-h-min);margin:var(--s4) auto 0;border:0;background:none;color:var(--text-2);font-size:var(--t-ctl);cursor:pointer}.success-orb{border-radius:50%;font-size:20px}@keyframes commerce-in{from{opacity:0}}@keyframes commerce-rise{from{opacity:0;transform:translateY(18px) scale(.98)}}
@media(max-height:760px){.commerce-modal{padding:var(--s5)}}
@media(max-width:700px){.purchase-cta{display:none}}
.mix-control{display:grid;grid-template-columns:1fr auto;gap:var(--s1) var(--s4);margin:var(--s4) 0;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}.mix-control>span{display:grid}.mix-control strong{font-size:11px}.mix-control small{font-size:11px!important;letter-spacing:0!important;color:var(--text-3)}.mix-control output{align-self:center;color:var(--text-2);font-size:11px;font-variant-numeric:tabular-nums}.mix-control input{grid-column:1/-1;width:100%;accent-color:var(--accent)}.mix-control.engine-priority{border-color:var(--sel-line);background:var(--sel-bg)}.mix-note{display:flex;align-items:flex-start;margin:var(--s3) 0 var(--s5);color:var(--text-3);font-size:11px;line-height:1.45}.mix-note svg{color:var(--accent);flex:0 0 auto;margin-right:var(--s3)}[dir="rtl"] .mix-note svg{margin-right:0;margin-left:var(--s3)}
.checkout-btn:disabled{opacity:.58;cursor:wait}.checkout-error{margin:10px 0 0;padding:10px 12px;border:1px solid rgba(255,130,105,.25);border-radius:10px;background:rgba(108,38,28,.18);color:#ffb7a8;font-size:11px;line-height:1.4}
.mix-control input[type=range]{grid-column:1/-1;width:100%;height:var(--ctl-h-min);margin:var(--s1) 0 0;accent-color:var(--accent);cursor:pointer;touch-action:pan-x;-webkit-appearance:none;appearance:none;background:transparent}.mix-control input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:#263238}.mix-control input[type=range]::-webkit-slider-thumb{width:26px;height:26px;margin-top:-9px;border:3px solid #07100d;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px rgba(255,255,255,.18),0 0 18px var(--glow);-webkit-appearance:none}.mix-control input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:#263238}.mix-control input[type=range]::-moz-range-thumb{width:22px;height:22px;border:3px solid #07100d;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px rgba(255,255,255,.18),0 0 18px var(--glow)}

/* Analytics consent sits beside the terms line but stays visually its own
   choice: GDPR art. 7(2) wants a bundled consent request clearly distinguishable
   from the other matters it is presented with. Unticked by default, and DNT or
   Global Privacy Control still override whatever is chosen here. */
.commerce-consent{display:flex;align-items:flex-start;margin:var(--s4) 0 0;cursor:pointer;color:var(--text-2);font-size:11px;line-height:1.4;text-align:left}
.commerce-consent input{flex:0 0 auto;width:20px;height:20px;margin:1px var(--s3) 0 0;accent-color:var(--accent);cursor:pointer}
.commerce-consent small{display:block;margin-top:2px;color:var(--text-3);font-size:11px}
.commerce-consent+.commerce-legal{margin-top:var(--s4)}
[dir="rtl"] .commerce-consent input{margin:1px 0 0 var(--s3)}

/* The analytics ask. Stays until answered either way, so it is deliberately
   dismissible only by choosing: closing it would be neither consent nor refusal.
   Anchored bottom-centre so it never covers the drive HUD's top bar. */
.cookie-consent{position:fixed;left:50%;bottom:var(--s5);transform:translateX(-50%);z-index:70;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s4);
 width:min(660px,calc(100vw - 32px));padding:var(--card-pad);box-sizing:border-box;
 background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-r);
 box-shadow:var(--float-shadow);color:var(--text-2);font-size:var(--t-small);line-height:1.45}
.cookie-consent-copy strong{display:block;margin-bottom:var(--s1);color:var(--text-1);font-size:var(--t-body)}
.cookie-consent-copy p{margin:0}
.cookie-consent-copy a{color:var(--accent)}
.cookie-consent-actions{display:grid;grid-auto-flow:column;gap:var(--s3)}
.cookie-consent-actions button{min-height:var(--ctl-h-min);min-width:104px;padding:0 var(--s5);border-radius:var(--ctl-r);cursor:pointer;font-size:var(--t-ctl);font-weight:var(--w-med)}
.cookie-decline{background:transparent;border:1px solid var(--line);color:var(--text-2)}
.cookie-accept{background:var(--accent);border:1px solid var(--accent);color:#06231f}
/* Short car screens: stack so the buttons keep their full touch target. */
@media(max-height:800px){.cookie-consent{gap:var(--s4);padding:var(--card-pad);bottom:var(--s3)}}
@media(max-width:700px){.cookie-consent{grid-template-columns:minmax(0,1fr);align-items:stretch;gap:var(--s4)}
 .cookie-consent-actions button{flex:1}}

/* drive-selector.css */
/* The gear column: a native select showing the current letter, with the
   manual paddles underneath. The old .prnd button grid is gone from the
   markup, so only the select and the paddles are styled here. */
.drive-selector{position:relative;align-self:center;min-width:96px;text-align:start}
.drive-label{display:block;margin-bottom:var(--s1);color:var(--text-2);font-size:var(--t-micro);font-weight:var(--w-med);letter-spacing:var(--ls-caps);text-transform:uppercase}
.gear select.compact-drive{display:block;width:100%;min-width:0;min-height:var(--ctl-h);padding:0 var(--s3);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:var(--text-1);font-family:inherit;font-size:var(--n-sm);font-weight:var(--w-strong);letter-spacing:var(--ls-tight);text-align:center;cursor:pointer}
.manual-gear{display:flex;justify-content:center;align-items:center;margin-top:var(--s3)}
.manual-gear>*+*{margin-left:var(--s2)}
[dir="rtl"] .manual-gear>*+*{margin-left:0;margin-right:var(--s2)}
.manual-gear.concealed{visibility:hidden;height:0;margin:0}
.gear .manual-gear button{display:none}
.gear.manual .manual-gear button{display:grid;place-items:center;width:var(--ctl-h-min);height:var(--ctl-h-min);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:var(--text-1);font-size:var(--t-head)}
.manual-gear>span{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:var(--s1);min-width:46px}
.manual-gear>span small{color:var(--text-2);font-size:var(--t-micro);font-weight:var(--w-med);letter-spacing:var(--ls-caps);text-transform:uppercase}
.manual-gear strong{min-width:18px;color:var(--text-1);font-size:var(--n-sm);font-weight:var(--w-strong);text-align:center}
/* Identity exception: the drive warning keeps its amber alarm colour. */
.drive-message{position:absolute;z-index:4;right:0;top:76px;width:230px;padding:var(--row-pad);border:1px solid rgba(255,190,95,.32);border-radius:var(--ctl-r);background:#241e13;color:#ffd489;box-shadow:var(--float-shadow);font-size:var(--t-small);line-height:1.4;letter-spacing:0;text-align:start}
@media(max-width:620px){.drive-message{right:0;width:min(230px,calc(100vw - 28px))}}

/* competitive.css */
.drive-dynamics {
  position: absolute;
  z-index: 5;
  right: 35px;
  top: 185px;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: var(--s4);
  padding: var(--row-pad);
  border: 1px solid var(--card-line);
  border-radius: var(--card-r);
  background: var(--glass);
}
.drive-dynamics div { display: grid; min-width: 74px; }
.drive-dynamics small { font-size: var(--t-micro,10px); letter-spacing:.06em; color: #758188; }
.drive-dynamics strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.drive-dynamics > i { width: 1px; height: 25px; background: var(--line); }

/* Drive Cinema art direction: the world is the product, the HUD is supporting cast. */
.cinema-grain{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.12;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E")}
.launch-loader{position:absolute;z-index:70;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(84,232,207,.13),transparent 32%),linear-gradient(145deg,#070b0e,#030506 72%);opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s linear 0s}.launch-loader.ready{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .7s ease,visibility 0s linear .7s}.loader-aura{position:absolute;left:50%;top:48%;width:min(640px,80vw);height:min(640px,80vw);transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(84,232,207,.16);box-shadow:inset 0 0 110px rgba(84,232,207,.05),0 0 90px rgba(84,232,207,.05);animation:loader-breathe 2.6s ease-in-out infinite}.loader-road{position:absolute;left:50%;bottom:-10%;width:min(560px,72vw);height:58%;transform:translateX(-50%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);background:linear-gradient(90deg,transparent 48.8%,rgba(255,255,255,.16) 49%,rgba(255,255,255,.16) 51%,transparent 51.2%),linear-gradient(#11181c,#080c0e);opacity:.48}.loader-road:before,.loader-road:after{content:"";position:absolute;top:0;bottom:0;width:2px;background:linear-gradient(transparent,var(--accent));box-shadow:0 0 16px var(--accent)}.loader-road:before{left:1%}.loader-road:after{right:1%}.loader-road i{position:absolute;left:0;width:100%;height:1px;background:rgba(255,255,255,.09);animation:loader-road 1.4s linear infinite}.loader-road i:nth-child(2){animation-delay:-.46s}.loader-road i:nth-child(3){animation-delay:-.92s}.loader-console{position:relative;z-index:2;display:grid;justify-items:center;width:min(410px,calc(100vw - 48px));padding:32px 34px 28px;border:1px solid rgba(255,255,255,.12);border-radius:25px;background:linear-gradient(145deg,rgba(17,25,29,.92),rgba(7,12,15,.88));box-shadow:0 34px 100px rgba(0,0,0,.58);backdrop-filter:blur(24px)}.loader-mark{display:grid;place-items:center;width:56px;height:56px;margin-bottom:var(--s5);border:1px solid rgba(84,232,207,.55);border-radius:var(--card-r);background:#18292b;color:var(--accent);box-shadow:none}.loader-console p{margin:0 0 8px;color:var(--accent);font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em}.loader-console h1{margin:0;font-size:var(--t-display);font-weight:600;letter-spacing:-.02em}.loader-wave{height:36px;margin:var(--s7) 0 var(--s5);display:flex;align-items:center}.loader-wave>i+i{margin-left:var(--s1)}.loader-wave i{display:block;width:3px;height:8px;border-radius:3px;background:var(--accent);box-shadow:0 0 9px var(--glow);animation:loader-wave .8s ease-in-out infinite alternate}.loader-wave i:nth-child(3n){animation-delay:-.55s}.loader-wave i:nth-child(3n+1){animation-delay:-.25s}.loader-wave i:nth-child(3n+2){animation-delay:-.08s}.loader-track{width:100%;height:3px;overflow:hidden;border-radius:5px;background:rgba(255,255,255,.08)}.loader-track i{display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--accent),#fff,var(--accent),transparent);animation:loader-progress 1.35s cubic-bezier(.45,0,.55,1) infinite}.loader-console small{margin-top:13px;color:#74838a;font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em}.loader-version{position:absolute;bottom:26px;color:#536168;font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em}@keyframes loader-wave{to{height:32px;opacity:.45}}@keyframes loader-progress{from{transform:translateX(-110%)}to{transform:translateX(250%)}}@keyframes loader-road{from{top:0;opacity:0}35%{opacity:1}to{top:100%;opacity:0}}@keyframes loader-breathe{50%{transform:translate(-50%,-50%) scale(1.055);opacity:.62}}
.cinema-title{position:absolute;z-index:4;left:50%;top:102px;transform:translateX(-50%);width:min(520px,42vw);text-align:center;pointer-events:none;text-shadow:0 3px 24px rgba(0,0,0,.8)}
.cinema-title span{display:inline-flex;align-items:center;color:var(--world-accent);font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em}.cinema-title span:before,.cinema-title span:after{content:"";width:28px;height:1px;background:currentColor;opacity:.55}.cinema-title span:before{margin-right:var(--s3)}.cinema-title span:after{margin-left:var(--s3)}
.cinema-title h1{margin:var(--s3) 0 var(--s1);color:#f7fbfa;font-size:var(--t-display);font-weight:var(--w-body);letter-spacing:var(--ls-tight);line-height:26px}.cinema-title p{margin:0;color:rgba(228,239,239,.68);font-size:var(--t-micro,10px);letter-spacing:.06em}
.world-reel{position:absolute;z-index:6;left:30px;top:50%;width:225px;display:grid;gap:var(--s3);transform:translateY(-44%)}
.world-reel button{position:relative;display:grid;grid-template-columns:21px 34px minmax(0,1fr);align-items:center;gap:var(--s3);min-height:var(--ctl-h-tile);padding:var(--row-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:linear-gradient(100deg,rgba(8,13,16,.82),rgba(8,13,16,.5));color:#eef5f4;text-align:left;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.world-reel button:hover{transform:translateX(4px);border-color:rgba(255,255,255,.24)}.world-reel button.active{border-color:var(--world-accent);background:var(--sel-bg);box-shadow:none}
.world-reel b{color:#6f7c81;font-size:var(--t-micro,10px);letter-spacing:.06em}.world-reel i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#07100e;font-size:15px;font-style:normal;font-weight:700}.world-reel span{display:grid;min-width:0}.world-reel strong{font-size:11px}.world-reel small{overflow:hidden;color:#7f8d92;font-size:11px;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap}.world-reel .all-worlds{margin-top:3px;border-style:dashed}.world-reel .all-worlds i{background:rgba(255,255,255,.07);color:#dbe5e4}
.billing-toggle{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1);margin:0 0 var(--s4);padding:var(--s1);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}.billing-toggle button{min-height:var(--ctl-h-min);border:0;border-radius:var(--ctl-r);background:transparent;color:var(--text-3);font-size:var(--t-ctl);font-weight:var(--w-med);cursor:pointer}.billing-toggle button.active{background:#172126;color:var(--text-1);box-shadow:0 6px 16px rgba(0,0,0,.2)}.billing-toggle b{margin-left:var(--s1);padding:2px var(--s1);border-radius:var(--s1);background:rgba(85,231,208,.12);color:var(--accent);font-size:var(--t-micro,10px);letter-spacing:.06em}

html[data-hud="true"] .scene-status,
html[data-hud="true"] .turn-card,
html[data-hud="true"] .drive-dynamics,
html[data-hud="true"] .vehicle-stage,
html[data-hud="true"] .engine-meter,
html[data-hud="true"] .nitro-btn,
html[data-hud="true"] .horn-btn,
html[data-hud="true"] .purchase-cta,
html[data-hud="true"] .account-btn { opacity: 0 !important; pointer-events: none !important; }
html[data-hud="true"] .cinema-title,
html[data-hud="true"] .world-reel,
html[data-hud="true"] .topbar { background: transparent; border-color: transparent; }
html[data-hud="true"] .drive-readout { grid-template-columns: 1fr 110px; }
html[data-hud="true"] .speed strong { text-shadow: 0 0 35px rgba(0,0,0,.8); }

@media (max-width: 850px) {
  .drive-dynamics { right: 20px; top: 165px; transform: scale(.88); transform-origin: right top; }
  .world-reel{display:none}.cinema-title{top:92px;width:62vw}.cinema-title p{display:none}.cinema-title h1{font-size:20px}
}

@media (max-width: 1100px){.world-reel{width:190px}.world-reel button{grid-template-columns:31px 1fr}.world-reel button>b{display:none}.cinema-title{top:94px}}
@media (max-height: 720px){.cinema-title{top:73px}.cinema-title h1{font-size:20px}.world-reel{top:47%;transform:translateY(-42%) scale(.88);transform-origin:left center}}
@media (prefers-reduced-motion:reduce){.world-reel button{transition:none}.cinema-grain{display:none}.loader-aura,.loader-road i,.loader-wave i,.loader-track i{animation:none}.loader-track i{width:100%;opacity:.7}}
/* DRIWE launch identity */
.loader-logo{display:block;width:168px;height:auto;margin-bottom:12px;border-radius:7px}
.loader-brand-stage{position:relative;width:112px;height:82px;margin:0 0 10px;display:grid;place-items:center}
.loader-sound-pulse{position:absolute;width:112px;height:112px;animation:driwe-pulse 1.45s ease-in-out infinite}
.loader-w-draw{position:relative;width:70px;height:42px;filter:drop-shadow(0 0 12px rgba(163,230,53,.28));animation:driwe-mark 1.35s ease-in-out infinite}
@keyframes driwe-pulse{50%{transform:scale(1.08);opacity:.48}}
@keyframes driwe-mark{50%{transform:scale(.94);opacity:.72}}
@media(prefers-reduced-motion:reduce){.loader-sound-pulse,.loader-w-draw{animation:none}}

/* auth-flow.css */
.pairing-card { display: grid; justify-items: center; gap: var(--s4); padding: var(--card-pad); border: 1px solid var(--card-line); border-radius: var(--card-r); background: #eef3ef; color: #07100d; }
.pairing-card > strong { letter-spacing:.06em; font-size: 13px; }
.pairing-card > small { max-width: 300px; color: #52605a; font-size: 11px; line-height: 1.45; text-align: center; }
.pairing-qr { display: grid; grid-template-columns: repeat(9, 8px); grid-auto-rows: 8px; gap: 2px; padding: var(--card-pad); border-radius: var(--ctl-r); background: white; }
.pairing-qr i { display: block; border-radius: 1px; background: transparent; }
.pairing-qr i.on { background: #08110e; }
.pairing-alternative { margin-top: var(--s5); color: var(--accent); }
.google-login { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--ctl-h-lg); border: 1px solid var(--card-line); border-radius: var(--ctl-r); background: #f3f5f4; color: #17201c; font-weight:700; cursor: pointer; }
.google-login b { display: grid; place-items: center; margin-right: var(--s3); width: 24px; height: 24px; border-radius: 50%; background: white; color: #4285f4; font-size: 13px; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.login-divider { display: flex; align-items: center; margin: var(--s5) 0; color: var(--text-3); font-size: var(--t-micro); letter-spacing: var(--ls-caps); }
.login-divider>*+* { margin-left: var(--s3); }
[dir="rtl"] .google-login b { margin-right: 0; margin-left: var(--s3); }
.login-divider::before,.login-divider::after { content: ''; height: 1px; flex: 1; background: var(--hairline); }
.login-links { display: flex; justify-content: space-between; margin-top: var(--s4); }
.login-links button { min-height: var(--ctl-h-min); border: 0; padding: 0 var(--s2); background: none; color: var(--text-2); font-size: var(--t-ctl); cursor: pointer; }
.login-notice { margin: var(--s4) 0 0; padding: var(--row-pad); border: 1px solid var(--sel-line); border-radius: var(--ctl-r); background: var(--sel-bg); color: var(--text-2); font-size: var(--t-small); line-height: 1.45; }

/* 2d-mode.css */
html[data-visual-mode="2d"] .cinema-title,
html[data-visual-mode="2d"] .world-reel,
html[data-visual-mode="2d"] .drive-dynamics{opacity:1;pointer-events:auto}
html[data-visual-mode="2d"] .speed{position:static;z-index:auto;left:auto;top:auto;transform:none;display:flex;justify-items:initial;text-shadow:none}
html[data-visual-mode="2d"] .speed strong{font-size:var(--n-hud);font-weight:var(--w-strong);line-height:1;letter-spacing:var(--ls-tight)}
html[data-visual-mode="2d"] .speed>span{padding-bottom:0;font-size:var(--t-micro);color:var(--text-2);letter-spacing:var(--ls-caps);text-transform:uppercase}
html[data-visual-mode="2d"] .engine-meter{opacity:1}
html[data-visual-mode="2d"] .route-ribbon{opacity:1;transform:none}
html[data-visual-mode="2d"] .turn-card{opacity:1}

/* Driving state: retain glanceable road, maneuver and vehicle information. */
html[data-moving="true"] .cinema-title,html[data-moving="true"] .world-reel,html[data-moving="true"] .purchase-cta{opacity:0;pointer-events:none;transform:translateY(-8px)}
html[data-moving="true"] .drive-dynamics{opacity:.72}
html[data-moving="true"] .route-ribbon,html[data-moving="true"] .turn-card,html[data-moving="true"] .drive-readout,html[data-moving="true"] .control-dock{opacity:1}

@media(prefers-reduced-motion:reduce){html[data-moving="true"] .cinema-title,html[data-moving="true"] .world-reel{transition:none}}

/* ux-refresh.css */
/* 2026 cockpit refresh: quieter hierarchy, safer targets, responsive controls. */
:root {
  --surface-0: #06090b;
  --surface-1: rgba(12, 18, 21, .78);
  --surface-2: rgba(17, 24, 28, .94);
  --stroke: rgba(232, 244, 244, .12);
  --stroke-strong: rgba(232, 244, 244, .21);
  --muted: #91a0a6;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

button.tesla-connect{width:100%;border:0;cursor:pointer}
.tesla-connect.connected{color:var(--accent);background:rgba(84,232,207,.14);border:1px solid rgba(84,232,207,.32)}
.tesla-connect.connected small{color:inherit}
.tesla-quick-connect{display:none;align-items:center;min-height:var(--ctl-h-min);padding:0 var(--s4);border:1px solid rgba(84,232,207,.5);border-radius:var(--ctl-r);background:rgba(84,232,207,.12);color:var(--accent);font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s}
.tesla-quick-connect:hover,.tesla-quick-connect:focus-visible{background:rgba(84,232,207,.22);border-color:var(--accent);transform:translateY(-1px)}
html[data-tesla="true"] .tesla-quick-connect{display:flex}
.tesla-quick-connect>*+*{margin-left:var(--s2)}
[dir="rtl"] .tesla-quick-connect>*+*{margin-left:0;margin-right:var(--s2)}
.setup-gate{position:fixed;z-index:75;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:var(--s5);background:var(--scrim)}
.setup-gate>section{width:min(540px,100%);padding:var(--s6);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);box-shadow:var(--dialog-shadow)}
.setup-gate p{margin:0 0 8px;color:var(--accent);font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em}.setup-gate h2{margin:0 0 var(--s4);font-size:var(--t-head);line-height:20px;letter-spacing:var(--ls-tight)}.setup-step{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s4);padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg-raise)}.setup-step>svg{color:var(--accent)}.setup-step div{display:grid;gap:4px}.setup-step strong{font-size:13px}.setup-step small{color:var(--text-3);font-size:11px;line-height:1.4}.setup-step button,.setup-step a,.setup-upgrade{min-height:var(--ctl-h-lg);padding:0 var(--s4);border:0;border-radius:var(--ctl-r);background:var(--accent);color:#06100d;font-size:var(--t-ctl);font-weight:var(--w-strong);text-decoration:none;display:grid;place-items:center;cursor:pointer}.setup-step button:disabled{opacity:.55}.setup-upgrade{width:100%;margin-top:12px}
.setup-step+.setup-step{margin-top:var(--s3)}.setup-step.complete{grid-template-columns:auto 1fr;border-color:rgba(84,232,207,.35);background:rgba(84,232,207,.08)}.setup-check{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#06100d;font-weight:700}.setup-step.complete small{color:var(--accent)}
.setup-brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4)}.setup-brand svg{display:block;width:96px;height:auto}.setup-brand span{padding:7px 10px;border:1px solid rgba(84,232,207,.3);border-radius:999px;background:rgba(84,232,207,.08);color:var(--accent);font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em}.setup-copy{display:none}.setup-privacy{display:flex;align-items:flex-start;margin-top:var(--s4);color:var(--text-3);font-size:var(--t-small);line-height:1.45}.setup-privacy>svg{margin-right:var(--s3)}[dir="rtl"] .setup-privacy>svg{margin-right:0;margin-left:var(--s3)}.setup-privacy svg{flex:0 0 auto;color:var(--accent)}
@media(max-height:760px){.setup-gate>section{padding:var(--s5)}}
@media(max-width:600px){.setup-brand svg{width:80px}.setup-step{grid-template-columns:auto 1fr}.setup-step button,.setup-step a{grid-column:1/-1;width:100%}}

button { -webkit-tap-highlight-color: transparent; }
button:not(:disabled) { cursor: pointer; }
html { overscroll-behavior: none; }
body { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
input { user-select: auto; -webkit-user-select: auto; }
html, body { width: 100%; height: 100%; overflow: hidden; }
#app {
  height: 100vh;
  height: 100dvh;
  height: var(--app-height, 100vh);
  min-height: 0;
  background: var(--surface-0);
}
#app:after {
  background:
    linear-gradient(90deg, rgba(3, 6, 8, .54), transparent 25%, transparent 75%, rgba(3, 6, 8, .54)),
    linear-gradient(0deg, rgba(3, 6, 8, .9), transparent 38%, rgba(3, 6, 8, .2));
}

/* A floating command bar keeps global actions distinct from drive content. */
.topbar {
  top: 14px;
  left: 18px;
  right: 18px;
  height: 64px;
  padding: 0 10px 0 16px;
  border: 1px solid var(--stroke);
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(10, 15, 18, .9), rgba(10, 15, 18, .68));
  box-shadow: 0 16px 48px rgba(0, 0, 0, .22);
  backdrop-filter: blur(24px) saturate(1.2);
}
.brand-mark { width: 38px; height: 38px; border-radius: 11px; }
.brand strong { font-size: 11px; letter-spacing:.06em; }
.brand small { font-size: 11px; }
.session-pill { min-height: 34px; background: rgba(255,255,255,.035); }
.top-actions>*+* { margin-left: var(--s2); }
[dir="rtl"] .top-actions>*+* { margin-left: 0; margin-right: var(--s2); }
.purchase-cta { min-height: var(--ctl-h-min); padding: 0 var(--s5); border-radius: var(--ctl-r); }
.topbar .icon-btn, .account-btn { width: var(--ctl-h-min); height: var(--ctl-h-min); border-radius: var(--ctl-r); }

.route-ribbon {
  top: 96px;
  left: 20px;
  width: min(340px, calc(100vw - 40px));
  min-width: 292px;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  background: var(--surface-1);
}
.speed-sign { width: 58px; height: 62px; border-width: 2px; border-radius: 9px; }
.speed-sign strong { font-size: 20px; }
.route-copy>strong { font-size: 15px; }
.route-copy { min-width: 0; flex: 1; }
.route-copy>strong, .route-copy>small, .route-copy>.eyebrow {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route-copy>small { color: var(--muted); }

/* Route ribbon, compact: the road is the headline, the status is a footnote,
   and the sign is the market's own — a rectangular SPEED LIMIT plate for mph,
   a red-ringed roundel for km/h. With no known limit the sign leaves entirely
   so the ribbon shrinks to the road name. */
.route-ribbon {
  top: 92px;
  width: max-content;
  min-width: 0;
  max-width: min(360px, calc(100vw - 40px));
  padding: 7px 14px 7px 7px;
  border-radius: 14px;
}
.route-copy { justify-content: center; }
.route-copy>*+* { margin-top: var(--s1); }
.route-copy>strong { margin: 0; font-size: 15px; line-height: 1.15; letter-spacing:-.02em; font-weight:700; }
.route-copy>strong.route-road--none { color: var(--muted); font-size: 11px; font-weight:700; letter-spacing:.06em; text-transform: uppercase; }
.route-copy>small { font-size: 11px; line-height: 1.2; letter-spacing:0; }
.speed-sign { width: 50px; height: 54px; padding-top: 4px; border-width: 2px; border-radius: 8px; }
.speed-sign small { font-size: 6.5px; line-height: 1; letter-spacing:0; }
.speed-sign strong { font-size: 20px; line-height: 1.05; }
.speed-sign.hidden, .route-copy>small.hidden { display: none; }
.speed-sign.over-limit:after { top: calc(100% + 6px); min-width: 0; padding: 3px 6px; font-size: 11px; }
.speed-sign[data-metric="true"] {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 5px solid #d3262e;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px #f5f5ee, 0 10px 30px rgba(0,0,0,.35);
}
.speed-sign[data-metric="true"] small { display: none; }
.speed-sign[data-metric="true"] strong { font-size: 20px; letter-spacing:-.02em; }
.speed-sign[data-metric="true"].near-limit { border-color: #d3262e; box-shadow: 0 0 0 1.5px #f5f5ee, 0 0 0 4px rgba(223,170,53,.4), 0 10px 35px rgba(223,170,53,.22); }
.speed-sign[data-metric="true"].over-limit { border-color: #ff988c; }

.cinema-title { top: 104px; }
.cinema-title h1 { font-weight:400; }
.world-reel { left: 20px; width: 212px; gap: 6px; }
.world-reel button {
  min-height: 56px;
  border-color: var(--stroke);
  background: linear-gradient(100deg, rgba(9, 14, 17, .88), rgba(9, 14, 17, .6));
}
.world-reel button:focus-visible { transform: translateX(4px); }
.world-reel small { color: var(--muted); }

.scene-status { top: 96px; right: 20px; min-width: 188px; padding: 9px 12px; }
.render-mode-badge { top: 96px; right: 220px; }
.drive-dynamics { top: 163px; right: 20px; }
.turn-card { top: 222px; right: 20px; }

/* Primary telemetry is one stable scan zone above the utility dock. */
.drive-readout {
  bottom: 112px;
  width: min(760px, calc(100vw - 520px));
  min-height: 88px;
  padding: 14px 18px;
  grid-template-columns: 146px minmax(180px, 1fr) 196px;
  gap: 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(13, 20, 24, .94), rgba(8, 13, 16, .78));
}
.speed strong { font-size: var(--n-hud); font-weight: var(--w-strong); }
.speed>span { font-size: 11px; }
.meter-label { margin-bottom: 7px; }
.meter-label strong { font-size: 20px; }
.gear strong { font-size: 20px; }

.control-dock {
  bottom: 22px;
  width: min(760px, calc(100vw - 520px));
  height: 76px;
  border-radius: 20px;
  background: rgba(10, 15, 18, .94);
}
.sound-btn { border-radius: 14px; }
.sound-btn:focus-visible { outline-offset: -2px; }
.nitro-btn { right: 20px; bottom: 22px; height: 76px; border-radius: 18px; }
.horn-btn { right: 138px; bottom: 22px; height: 76px; border-radius: 18px; }
.horn-control select { right: 138px; bottom: 104px; }
.disclaimer { bottom: 7px; opacity: .8; }

/* The studio reads as a product workspace, with predictable sections. */
.scrim { background: rgba(1, 3, 4, .78); backdrop-filter: none; }
.panel {
  width: min(520px, 100vw);
  padding: 0 var(--s6) var(--s6);
  border-left-color: var(--stroke);
  background: linear-gradient(145deg, #0b1013, #080c0e);
  box-shadow: -32px 0 90px rgba(0,0,0,.45);
  overscroll-behavior: contain;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}
/* The head is one row: the title and the close control. The kicker repeats
   the title and the subtitle repeats the tabs, so both go. */
.panel-head { padding: var(--s2) 0; }
.panel-kicker, .panel-head p { display: none; }
.panel h1 { margin: 0; font-size: var(--t-head); line-height: 20px; font-weight: var(--w-med); letter-spacing: var(--ls-tight); }
.panel-head .icon-btn { width: var(--ctl-h-min); height: var(--ctl-h-min); }
.panel-nav { grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.panel-nav button { min-height: var(--ctl-h); background: var(--ctl-bg); }
.panel-nav button:active { transform: scale(.98); }
.setting-section {
  padding: var(--s5) 0;
}
.profile, .environments button, .choice-grid button, .drive-side button,
.vehicle-style-grid button, .toggles label, .country-list summary {
  border-color: var(--stroke);
  background-color: rgba(255,255,255,.035);
}
.profile:hover, .environments button:hover, .choice-grid button:hover,
.drive-side button:hover, .vehicle-style-grid button:hover {
  border-color: var(--stroke-strong);
  background-color: rgba(255,255,255,.06);
}
.profile, .environments button, .choice-grid button, .drive-side button,
.vehicle-style-grid button { transition: transform .18s var(--ease-out), border-color .18s, background .18s; }
.profile:active, .environments button:active, .choice-grid button:active,
.drive-side button:active, .vehicle-style-grid button:active { transform: scale(.985); }

@media (max-width: 1180px) {
  .world-reel { width: 184px; }
  .world-reel button { grid-template-columns: 34px 1fr; }
  .world-reel button>b { display: none; }
  .drive-readout, .control-dock { width: calc(100vw - 430px); }
  .render-mode-badge { display: none; }
}

@media (max-width: 850px) {
  #app { min-height: 520px; }
  .topbar { top: 10px; left: 10px; right: 10px; height: 58px; padding-left: 12px; }
  .brand small, .session-pill em { display: none; }
  .brand-mark { width: 36px; height: 36px; }
  .session-pill { padding-left: 12px; padding-right: 12px; }
  .route-ribbon { top: 82px; left: 12px; min-width: 0; transform: none; }
  .route-copy>small { display: none; }
  .scene-status, .drive-dynamics, .turn-card { right: 12px; }
  .cinema-title { top: 88px; }
  .drive-readout {
    left: 12px;
    right: 12px;
    bottom: 96px;
    width: auto;
    min-height: 76px;
    transform: none;
    grid-template-columns: 128px minmax(120px, 1fr) 196px;
    gap: 14px;
    padding: 11px 14px;
  }
  .control-dock { bottom: 14px; width: calc(100vw - 24px); height: 70px; }
  .nitro-btn { right: 12px; bottom: 96px; height: 58px; }
  .horn-btn { right: 108px; bottom: 96px; height: 58px; }
  .horn-control select { right: 108px; bottom: 160px; }
}

@media (max-width: 620px) {
  .panel .experience-entry{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .topbar { grid-template-columns: 1fr auto; }
  .session-pill, .purchase-cta, .topbar .icon-btn[aria-label*="full screen"] { display: none; }
  .brand strong { font-size: 11px; }
  .top-actions { justify-self: end; }
  .route-ribbon { padding: 7px 10px 7px 7px; }
  .speed-sign { width: 48px; height: 52px; }
  .speed-sign small { font-size: 6px; }
  .speed-sign strong { font-size: 20px; }
  .route-copy>strong { max-width: 150px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .cinema-title { top: 154px; width: calc(100vw - 32px); }
  .cinema-title h1 { font-size: 20px; }
  .scene-status, .drive-dynamics, .world-reel, .render-mode-badge { display: none; }
  .vehicle-stage { top: 47%; transform: translate(-50%,-50%) scale(.82); }
  .drive-readout { grid-template-columns: 1fr auto; }
  .engine-meter { display: none; }
  .gear { min-width: 92px; }
  .control-dock { grid-template-columns: 1fr; padding: 0 10px; }
  .control-dock .divider, .destination, .battery { display: none; }
  .sound-btn { padding-left: 4px; padding-right: 4px; }
  .nitro-btn, .horn-btn, .horn-control select, .disclaimer { display: none; }
  .panel { padding: 0 var(--s5) var(--s5); }
  .panel-nav { top: 105px; margin-left: -2px; margin-right: -2px; overflow-x: auto; }
  .panel-nav button { min-width: 76px; min-height: var(--ctl-h); }
  .profiles { grid-template-columns: 1fr; }
  .setting-section { padding: var(--s5) 0; scroll-margin-top: 178px; }
}

@media (max-height: 680px) and (min-width: 621px) {
  .topbar { top: 8px; height: 54px; }
  .route-ribbon { top: 74px; }
  .cinema-title { top: 76px; }
  .drive-readout { bottom: 88px; min-height: 70px; padding-top: 8px; padding-bottom: 8px; }
  .control-dock { bottom: 14px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .panel, .scrim, .profile, .environments button, .choice-grid button,
  .drive-side button, .vehicle-style-grid button { transition-duration: .01ms !important; }
}

/* Tesla center display: touch-first, landscape, readable at arm's length. */
@media (pointer: coarse) and (min-width: 900px) {
  .topbar {
    top: max(12px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    height: 72px;
    padding-left: 18px;
  }
  .brand-mark { width: 44px; height: 44px; }
  .brand strong { font-size: 12px; }
  .session-pill { min-height: 42px; font-size: 11px; }
  .purchase-cta { min-height: var(--ctl-h-lg); padding: 0 var(--s6); font-size: var(--t-ctl); }
  .topbar .icon-btn, .account-btn { width: 50px; height: 50px; }

  .route-ribbon { top: 100px; min-width: 310px; }
  .world-reel { width: 226px; }
  .world-reel button { min-height: 62px; padding: 9px 11px; }
  .world-reel strong { font-size: 11px; }
  .world-reel small { font-size: 11px; }
  .world-reel button:hover { transform: none; }
  .scene-status { top: 100px; }
  .drive-dynamics { top: 170px; }
  .render-mode-badge { top: 100px; }

  .drive-readout { bottom: 120px; min-height: 96px; }
  .control-dock { bottom: 24px; height: 84px; }
  .sound-btn { min-height: 58px; padding-left: 4px; padding-right: 4px; }
  .sound-icon, .dock-icon { width: 48px; height: 48px; }
  .nitro-btn { bottom: 24px; height: 84px; min-width: 104px; }
  .prnd button, .manual-gear button { min-width: var(--ctl-h-min); min-height: var(--ctl-h-min); }

  .scrim { transition-duration: .16s; }
  .panel {
    width: min(520px, 100vw);
    padding-left: var(--s6);
    padding-right: var(--s6);
    transition-duration: .2s;
    box-shadow: -18px 0 52px rgba(0,0,0,.38);
  }
  .panel.open { transform: translateZ(0); }
  .panel.open ~ * { animation-play-state: paused !important; }
  .panel *, .panel-head, .panel-nav { backdrop-filter: none !important; }
  .panel:not(.open) { visibility: hidden; transition: transform .2s var(--ease-out), visibility 0s linear .2s; }
  .panel.open { visibility: visible; transition: transform .2s var(--ease-out); }
  .panel-nav button { min-height: var(--ctl-h); }
  .panel-nav button>small { font-size: var(--t-small); }
  .environments button { min-height: var(--ctl-h-tile); }
  .choice-grid button, .drive-side button, .vehicle-style-grid button, .toggles label { min-height: var(--ctl-h-lg); }
  .toggles input[type="checkbox"] { width: 44px; height: 26px; }
  .car-colors button, .custom-color { min-width: var(--ctl-h-lg); min-height: var(--ctl-h-lg); }
  input[type="range"] { height: var(--ctl-h-min); }
  input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; }
  .tesla-connect { min-height: var(--ctl-h-lg); }
  .commerce-close { width: var(--ctl-h-lg); height: var(--ctl-h-lg); }
  .billing-toggle button, .login-form button, .google-login, .plan-card button { min-height: var(--ctl-h-lg); }
}

/* Common Tesla browser viewport: retain usable road area at 1280x720. */
@media (pointer: coarse) and (min-width: 900px) and (max-height: 760px) {
  .topbar { height: 62px; }
  .topbar .icon-btn, .account-btn { width: var(--ctl-h-min); height: var(--ctl-h-min); }
  .route-ribbon { top: 86px; }
  .scene-status, .render-mode-badge { top: 86px; }
  .drive-dynamics { top: 150px; }
  .cinema-title { top: 91px; }
  .world-reel { top: 47%; transform: translateY(-42%); }
  .world-reel button { min-height: 56px; }
  .drive-readout { bottom: 105px; min-height: 82px; }
  .control-dock { bottom: 20px; height: 74px; }
  .nitro-btn, .horn-btn { bottom: 20px; height: 74px; }
  .horn-control select { bottom: 100px; }
}

/* Tesla Chromium does not consistently expose a coarse pointer. The runtime
   marker makes the cockpit rules deterministic on the center display. */
html[data-tesla="true"], html[data-tesla="true"] body {
  width: 100%;
  height: var(--app-height, 100vh);
  overflow: hidden;
  overscroll-behavior: none;
}
html[data-tesla="true"] #app,
html[data-tesla="true"] .panel,
html[data-tesla="true"] .commerce-layer { height: var(--app-height, 100vh); }
html[data-tesla="true"] button,
html[data-tesla="true"] label,
html[data-tesla="true"] summary,
html[data-tesla="true"] select { touch-action: manipulation; }
html[data-tesla="true"] .topbar {
  top: 12px; left: 16px; right: 16px; height: 68px;
  backdrop-filter: none; background: rgba(8,13,16,.96);
}
html[data-tesla="true"] .topbar .icon-btn,
html[data-tesla="true"] .account-btn { width: 50px; height: 50px; }
html[data-tesla="true"] .topbar .icon-btn[aria-label*="full screen"] { display: none; }
html[data-tesla="true"] .purchase-cta { min-height: 48px; }
html[data-tesla="true"] .sound-btn,
html[data-tesla="true"] .world-reel button { min-height: 58px; }
html[data-tesla="true"] .prnd button,
html[data-tesla="true"] .manual-gear button { min-width:var(--ctl-h-min); min-height:var(--ctl-h-min); }
html[data-tesla="true"] .horn-control select {
  right: 138px; bottom: 106px; width: 240px; min-height: 52px;
  padding: 10px 38px 10px 14px; border-radius: 14px;
  border-color: rgba(255,255,255,.32); background-color: rgba(8,13,16,.98);
  font-size: 15px; font-weight:700; box-shadow: 0 8px 24px rgba(0,0,0,.42);
}
html[data-tesla="true"] .horn-btn { width: 96px; }
html[data-tesla="true"] .horn-choice-icon { top: 7px; right: 8px; font-size: 15px; }
html[data-tesla="true"] .panel {
  width: min(520px, 100vw); padding-left: var(--s6); padding-right: var(--s6);
  background: #090e11; transition-duration: .18s;
  scrollbar-width: thin; scrollbar-color: var(--accent) #11191d;
}
html[data-tesla="true"] .panel-head,
html[data-tesla="true"] .panel-nav { backdrop-filter: none; background-color: #090e11; }
html[data-tesla="true"] .panel-nav button { min-height: var(--ctl-h); }
html[data-tesla="true"] .environments button,
html[data-tesla="true"] .choice-grid button,
html[data-tesla="true"] .drive-side button,
html[data-tesla="true"] .vehicle-style-grid button,
html[data-tesla="true"] .toggles label { min-height: var(--ctl-h-lg); }
html[data-tesla="true"] input[type="range"] { min-height: 48px; }
html[data-tesla="true"] .commerce-modal {
  max-height: calc(var(--app-height, 100vh) - 28px);
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
html[data-tesla="true"] .scrim,
html[data-tesla="true"] .commerce-layer { backdrop-filter: none; }
html[data-tesla="true"] * { -webkit-tap-highlight-color: transparent; }

/* Engine picker: recording-unavailable notice (see App.jsx profile fallback) */
.section-label small.sound-notice{color:#ffb15b}

/* Language picker (Drive Studio) */
.language-control{display:flex;align-items:center}
.language-control>*+*{margin-left:var(--s3)}
[dir="rtl"] .language-control>*+*{margin-left:0;margin-right:var(--s3)}
.language-select{flex:1;min-width:0;appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.06);color:inherit;border:1px solid var(--line);border-radius:12px;padding:12px 40px 12px 14px;font:inherit;font-size:15px;font-weight:700;letter-spacing:0;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.language-select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[dir="rtl"] .language-select{padding:12px 14px 12px 40px;background-position:20px 55%,14px 55%}

/* Right-to-left scripts (Hebrew, Arabic): `dir="rtl"` on <html> mirrors the
   layout the way the car's own UI does — panels, nav and HUD read from the
   right. Speed, RPM, distances and form fields keep left-to-right flow so
   numbers and addresses never reverse. */
[dir="rtl"] .panel,[dir="rtl"] .commerce-modal,[dir="rtl"] .cinema-title,[dir="rtl"] .disclaimer,[dir="rtl"] .drive-message,[dir="rtl"] .shop-page,[dir="rtl"] .welcome-page,[dir="rtl"] .information-page,[dir="rtl"] .setup-gate>section,[dir="rtl"] .cookie-settings-dialog{direction:rtl;text-align:start}
[dir="rtl"] .speed,[dir="rtl"] .drive-readout .engine-meter,[dir="rtl"] .drive-dynamics,[dir="rtl"] .route-ribbon,[dir="rtl"] .control-dock .destination strong,[dir="rtl"] .meter-scale{direction:ltr}
[dir="rtl"] .login-form input,[dir="rtl"] .pairing-card strong,[dir="rtl"] .home-price,[dir="rtl"] .shop-login input,[dir="rtl"] .phone-check-code{direction:ltr;text-align:start}

/* Five sections in the Drive Studio nav (Language joined Sound/Worlds/Vehicle/Gearbox) */
.panel-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.panel-nav button{min-width:0}

/* Engine picker: the radio input is the first child, so the old
   `span:nth-child(2)` rule styled the orb and left name + description inline.
   Target the text column directly. */
.profile>span:not(.profile-orb){display:grid;min-width:0}
/* Twenty engines in one column is 1676 px of scrolling. Two columns of dense
   rows, each naming its engine; the character line lives on the card that
   plays it, not in the list. */
.profiles{grid-template-columns:1fr 1fr;gap:var(--s3)}
.profile{min-height:var(--ctl-h-min);padding:var(--row-pad);padding-right:38px;border-radius:var(--ctl-r)}
.profile-orb{width:32px;height:32px;font-size:var(--t-small)}
.profile strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile small{display:none}
.profile>i{top:50%;right:var(--s3);margin-top:-7px;font-size:var(--t-micro);letter-spacing:var(--ls-caps)}
.lock-tag,.free-tag{top:50%;bottom:auto;right:var(--s3);margin-top:-9px;font-size:var(--t-micro);letter-spacing:var(--ls-caps)}
.profile-group{gap:var(--s3)}
.profile-group h3{font-size:var(--t-micro);font-weight:var(--w-med);letter-spacing:var(--ls-caps);text-transform:uppercase}
.profile-group+.profile-group{padding-top:var(--s4)}
@media(max-width:479px){.profiles{grid-template-columns:1fr}}

/* Gear names are longer than "Drive" in most languages (ドライブ, Marche
   avant, Estacionar): let the selector grow to its label instead of clipping. */
.drive-mode-select select{width:auto;min-width:112px;max-width:180px;text-overflow:ellipsis}

/* Tesla's older Chromium build can paint a native select popup with a light
   surface even when the page uses `color-scheme: dark`, making inherited text
   effectively disappear. Give both the closed control and every option an
   explicit, high-contrast palette and a car-sized touch target. */
html[data-tesla="true"] .language-control{
  position:relative;
  z-index:2;
  width:100%;
  min-height:58px;
}
html[data-tesla="true"] .language-select{
  display:block;
  width:100%;
  min-height:58px;
  opacity:1;
  visibility:visible;
  color:#f5f8f7;
  background-color:#11191d;
  border-color:rgba(255,255,255,.3);
  color-scheme:dark;
}
html[data-tesla="true"] .language-select option{
  color:#f5f8f7;
  background:#11191d;
}

/* Keep the two driving effects in one vertical control rail. Reserving the
   same rail beside the readout prevents the upper button covering the gear. */
html[data-tesla="true"] .nitro-btn,
html[data-tesla="true"] .horn-btn{
  right:20px;
  width:96px;
  height:74px;
}
html[data-tesla="true"] .nitro-btn{bottom:20px}
html[data-tesla="true"] .horn-btn{bottom:102px}
html[data-tesla="true"] .drive-readout{right:132px}

/* The Tesla browser does not consistently advertise a coarse pointer. Apply
   compact geometry from its marker too, so 1280x720 cannot miss these rules. */
@media (min-width:900px) and (max-height:760px) {
  html[data-tesla="true"] .topbar{top:8px;height:62px}
  html[data-tesla="true"] .topbar .icon-btn,
  html[data-tesla="true"] .account-btn{width:var(--ctl-h-min);height:var(--ctl-h-min)}
  html[data-tesla="true"] .route-ribbon,
  html[data-tesla="true"] .scene-status,
  html[data-tesla="true"] .render-mode-badge{top:82px}
  html[data-tesla="true"] .drive-dynamics{top:146px}
  html[data-tesla="true"] .cinema-title{top:86px}
  html[data-tesla="true"] .world-reel{top:47%;transform:translateY(-42%) scale(.88);transform-origin:left center}
  html[data-tesla="true"] .world-reel button{min-height:54px}
  html[data-tesla="true"] .drive-readout{bottom:96px;min-height:76px;padding-top:8px;padding-bottom:8px}
  html[data-tesla="true"] .control-dock{bottom:14px;height:72px}
  html[data-tesla="true"] .nitro-btn,
  html[data-tesla="true"] .horn-btn{height:70px}
  html[data-tesla="true"] .nitro-btn{bottom:14px}
  html[data-tesla="true"] .horn-btn{bottom:92px}
  html[data-tesla="true"] .horn-control select{bottom:168px}
  html[data-tesla="true"] .panel{padding-top:0;padding-bottom:24px}
  html[data-tesla="true"] .panel-head{padding-top:18px}
  html[data-tesla="true"] .setting-section{padding-top:var(--s4);padding-bottom:var(--s4)}
}

/* The meter follows the active profile's redline; its final band is the
   caution/redline zone. Silent visualization has no fictitious RPM. */
.meter i{background:linear-gradient(90deg,#4ae6c8 0%,var(--accent) 72%,#ffd166 88%,#ff5145 100%)}
.engine-meter.silent{opacity:.35}
.engine-meter.silent .meter i{width:0!important}

/* At the minimum supported browser height, secondary scene information gives
   way before primary sound and drive controls shrink or overlap. */
@media (max-height:620px) {
  html[data-tesla="true"] .cinema-title,
  html[data-tesla="true"] .world-reel,
  html[data-tesla="true"] .scene-status,
  html[data-tesla="true"] .drive-dynamics,
  html[data-tesla="true"] .render-mode-badge,
  html[data-tesla="true"] .turn-card,
  html[data-tesla="true"] .disclaimer{display:none}
  html[data-tesla="true"] .drive-readout{left:16px;right:126px;width:auto;transform:none;bottom:86px;min-height:66px}
  html[data-tesla="true"] .control-dock{left:16px;width:calc(100vw - 142px);transform:none;bottom:10px;height:66px}
  html[data-tesla="true"] .nitro-btn,
  html[data-tesla="true"] .horn-btn{right:14px;width:96px;height:62px}
  html[data-tesla="true"] .nitro-btn{bottom:10px}
  html[data-tesla="true"] .horn-btn{bottom:80px}
}

/* Legacy Model S/X browsers can expose a tall portrait viewport. This is a
   first-class layout, not a rotate-screen placeholder: telemetry, sound and
   both effect controls remain reachable while decorative scene UI collapses. */
@media (orientation:portrait) and (max-width:850px) {
  html[data-tesla="true"] .topbar{top:8px;left:8px;right:8px;height:58px;padding-left:12px;padding-right:12px;grid-template-columns:1fr auto}
  html[data-tesla="true"] .brand small,
  html[data-tesla="true"] .session-pill,
  html[data-tesla="true"] .purchase-cta,
  html[data-tesla="true"] .topbar .icon-btn[aria-label*="full screen"]{display:none}
  html[data-tesla="true"] .top-actions{justify-self:end}
  html[data-tesla="true"] .route-ribbon{top:78px;left:12px;right:12px;min-width:0;width:max-content;max-width:calc(100vw - 24px);transform:none}
  html[data-tesla="true"] .route-copy>small{display:none}
  html[data-tesla="true"] .cinema-title,
  html[data-tesla="true"] .world-reel,
  html[data-tesla="true"] .scene-status,
  html[data-tesla="true"] .drive-dynamics,
  html[data-tesla="true"] .render-mode-badge,
  html[data-tesla="true"] .turn-card,
  html[data-tesla="true"] .disclaimer{display:none}
  html[data-tesla="true"] .vehicle-stage{top:43%;transform:translate(-50%,-50%) scale(.88)}
  html[data-tesla="true"] .drive-readout{left:12px;right:12px;width:auto;bottom:174px;transform:none;grid-template-columns:1fr auto;min-height:76px;padding:11px 14px}
  html[data-tesla="true"] .engine-meter{display:none}
  html[data-tesla="true"] .gear{min-width:104px}
  html[data-tesla="true"] .control-dock{display:grid;left:12px;bottom:12px;width:calc(100vw - 24px);height:70px;transform:none;grid-template-columns:1fr;padding-left:10px;padding-right:10px}
  html[data-tesla="true"] .control-dock .divider,
  html[data-tesla="true"] .destination,
  html[data-tesla="true"] .battery{display:none}
  html[data-tesla="true"] .horn-btn,
  html[data-tesla="true"] .nitro-btn{display:grid;bottom:92px;width:96px;height:66px}
  html[data-tesla="true"] .nitro-btn{right:12px}
  html[data-tesla="true"] .horn-btn{right:116px}
  html[data-tesla="true"] .horn-control select{right:116px;bottom:164px;max-width:calc(100vw - 128px)}
  html[data-tesla="true"] .panel{width:100vw;max-width:none;padding-left:var(--s5);padding-right:var(--s5)}
}

/* Real pairing/hand-off QR: white quiet zone so the car screen scans reliably. */
.pairing-qr.real{grid-template-columns:none;grid-auto-rows:auto;width:260px;max-width:100%;height:260px;background:#fff;border-radius:10px;padding:12px;display:grid}
.pairing-qr.real svg{width:100%;height:100%;display:block}

/* The drive selector shows the current letter; its native menu exposes the other modes. */
.gear.drive-selector { min-width: 76px; }
.gear .compact-drive { display: block; width: 76px; min-width: 76px; min-height: 56px; padding: 8px 14px; border: 1px solid rgba(84,232,207,.58); border-radius: 12px; background: #17302d; color: var(--accent); font-family: inherit; font-size: 20px; font-weight:700; cursor: pointer; }
.gear .compact-drive:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
html[data-tesla="true"] .gear .compact-drive { min-height: 60px; }

/* Clear entry points and optional purchases. */
.experience-switch{color:var(--accent,#45d8c4);font-size:13px;text-decoration:none;padding:12px;white-space:nowrap}
.experience-card{display:grid;gap:var(--s3);border:1px solid var(--card-line);border-radius:var(--card-r);padding:var(--card-pad);margin:var(--s4) 0;text-decoration:none;color:inherit;background:#ffffff06}
.experience-card:hover,.experience-card:focus-visible{border-color:#45d8c4;background:#45d8c410}
.experience-card strong{font-size:20px}.experience-card span{color:#b1bac3;line-height:1.5}
.purchase-section-title{font-size:13px;margin:22px 0 12px}.purchase-addons{margin:var(--s5) 0;border-top:1px solid var(--card-line);border-bottom:1px solid var(--card-line);padding:var(--s4) 0}.purchase-addons summary{cursor:pointer;font-weight:600;padding:8px 0}.purchase-addons .commerce-copy{margin-top:12px}
.purchase-total{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);font-size:var(--t-ctl);margin:var(--s6) 0}.purchase-total strong{white-space:nowrap}
@media(max-width:600px){.experience-switch{font-size:var(--t-small);padding:var(--s3) var(--s1)}.top-actions>*+*{margin-left:var(--s1)}[dir="rtl"] .top-actions>*+*{margin-left:0;margin-right:var(--s1)}}

@media(max-width:700px){html[data-tesla="true"] .topbar .purchase-cta{display:inline-flex;align-items:center;padding-left:8px;padding-right:8px;font-size:var(--t-small);min-height:var(--ctl-h-min)}.topbar .brand-logo{max-width:72px}.topbar .experience-switch{font-size:var(--t-small);padding-left:4px;padding-right:4px}}

/* Subscription selection and focused settings. */
.panel [hidden]{display:none!important}
.panel .settings-tabs{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2);background:#101719;padding:var(--s2) 0;margin-bottom:var(--s3)}
.panel .settings-tabs button{min-height:var(--ctl-h);padding:0 var(--s2);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);color:#b5bdc2;background:var(--ctl-bg);font:inherit;font-size:var(--t-ctl);letter-spacing:0}
.panel .settings-tabs button.active{background:var(--sel-line);border-color:var(--sel-line);color:#15200c;font-weight:var(--w-med)}
.settings-subscription{margin-top:16px}.subscription-summary{padding:20px;border:1px solid #ffffff26;border-radius:16px;background:#ffffff05;margin:18px 0}.subscription-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);font-size:var(--t-title)}.subscription-heading>span{color:#a6b1b8;font-size:13px}.subscription-summary p{color:#a6b1b8;font-size:13px;line-height:1.5}.subscription-summary ul{list-style:none;margin:16px 0;padding:0}.subscription-summary li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s4);padding:var(--s3) 0;border-top:1px solid var(--card-line);font-size:var(--t-ctl)}.subscription-summary li small{display:block;font-size:11px;color:#a6b1b8;margin-top:5px}.subscription-summary li b{font-size:11px;color:var(--accent)}.subscription-link{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:var(--ctl-h-min);padding:var(--s4) 0 0;border:0;border-top:1px solid var(--card-line);background:none;color:var(--accent);font-weight:700;cursor:pointer}
.purchase-modal{width:min(650px,100%)}.purchase-modal .commerce-copy{margin-bottom:18px}.subscription-options,.addon-options{border:0;padding:0;margin:var(--s5) 0;min-width:0;display:grid;gap:var(--s3)}.subscription-options legend,.addon-options legend{font-size:var(--t-title);font-weight:var(--w-med);margin-bottom:var(--s4)}.addon-options legend small{font-weight:400;color:#a6b1b8;margin-left:8px}
.subscription-option,.addon-option{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:var(--s4);padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);cursor:pointer;min-height:var(--ctl-h-tile)}.subscription-option.selected,.addon-option.selected{border-color:var(--sel-line);background:var(--sel-bg)}.subscription-option input,.addon-option input{width:20px;height:20px;margin:0;accent-color:var(--accent)}.subscription-option strong,.addon-option strong{font-size:15px}.subscription-option small,.addon-option small{display:block;margin-top:5px;font-size:12px;color:#a6b1b8;line-height:1.45}.subscription-option>b,.addon-option>b{font-size:15px;text-align:right;white-space:nowrap}.subscription-option>b small,.addon-option>b small{font-weight:400;font-size:11px}.recommendation{display:block;margin:7px 0;color:var(--accent);font-size:11px;font-style:normal;font-weight:600}.addon-option.included{cursor:default;background:#101719}.addon-option.included>b{font-size:11px;color:#a6b1b8}.subscription-option:focus-within,.addon-option:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.order-summary{border-top:1px solid #ffffff26;padding-top:16px}.order-summary h3{font-size:15px;margin:0 0 14px}.order-summary>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);font-size:var(--t-ctl);margin:var(--s3) 0}.order-summary .order-total{font-size:15px;padding-top:14px;border-top:1px solid #ffffff20}.order-summary p,.purchase-reassurance{font-size:11px;line-height:1.5;color:#a6b1b8}.purchase-footer{position:sticky;bottom:-38px;background:#101719;padding:14px 0 20px;margin-bottom:-20px}.purchase-reassurance{text-align:center;margin-bottom:0}
@media(max-width:600px){.subscription-option,.addon-option{padding:12px;gap:9px;grid-template-columns:20px minmax(0,1fr) auto}.subscription-option strong,.addon-option strong{font-size:13px}.subscription-option small,.addon-option small{font-size:11px}.subscription-option>b,.addon-option>b{font-size:13px}.addon-option.included>b{max-width:68px;white-space:normal}.purchase-footer{bottom:-30px}.panel .settings-tabs button{font-size:11px;padding:10px 8px}}

/* Shared line icons retain visible text and native selection controls. */
.panel .settings-tabs button{display:grid;justify-items:center;align-content:center;gap:var(--s1)}
.panel .experience-entry{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin:var(--s2) 0}
.product-name{display:inline-flex;align-items:center;min-width:0}
.product-name>.icon{margin-right:var(--s3)}
[dir="rtl"] .product-name>.icon{margin-right:0;margin-left:var(--s3)}
.product-name .icon{flex-shrink:0;color:var(--accent)}
.subscription-heading>.product-name{display:inline-flex}
.purchase-reassurance .icon{display:inline-block;vertical-align:middle;margin-right:4px}
@media(max-width:600px){.product-name>.icon{margin-right:var(--s2);width:16px;height:16px}}
.panel .settings-tabs button>span{font:inherit;color:inherit;line-height:1.2}

.demo-driving{position:fixed;z-index:9;left:20px;bottom:20px;display:grid;gap:8px}
.demo-driving button{min-height:48px;padding:10px 16px;border:1px solid #607877;border-radius:14px;background:rgba(8,18,23,.94);color:#eefafa;font-weight:700;cursor:pointer}
.demo-driving button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.demo-touch-controls{display:flex}
.demo-touch-controls>*+*{margin-left:var(--s3)}
.demo-touch-controls button{min-width:64px;touch-action:none;user-select:none;-webkit-user-select:none;display:grid;place-items:center;gap:4px}
.demo-touch-controls span{font-size:20px}.demo-touch-controls small{font-size:11px}
.demo-driving button:active{background:#28524e}.demo-driving button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:760px){.demo-driving{left:12px;bottom:calc(100px + env(safe-area-inset-bottom));gap:var(--s2)}.demo-touch-controls>*+*{margin-left:var(--s2)}.demo-touch-controls button{min-width:58px;padding:var(--s3)}}
/* Chrome 79 (the car) has no logical properties: physical values, mirrored for RTL. */
[dir=rtl] .purchase-reassurance .icon{margin-right:0;margin-left:4px}

/* product-polish.css */
/* Driving notices sit above the readout, clear of the gear and sound controls.
   Use normal flow so simultaneous warnings and translated text cannot overlap. */
/* A warning the driver has to read while the vehicle is moving has a 16px
   floor — the same floor every other control on this screen keeps, and the one
   test/e2e/tesla.spec.js asserts. This rule carries !important because it is
   undoing the compact per-screen sizing that the rest of the chrome wants, so
   the floor has to be stated here rather than inherited. */
.drive-notices{position:absolute;z-index:10;left:0;right:0;bottom:calc(100% + 12px);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.drive-notices .drive-message,.drive-notices .stale{position:static;transform:none;width:100%;max-width:560px;min-width:0;margin:0;padding:14px 18px;border:1px solid #b48143;border-radius:12px;background:#241e13;color:#ffe0a8!important;box-shadow:0 6px 24px #0006;font-size:16px!important;font-weight:600;line-height:1.5;letter-spacing:normal!important;text-align:start;white-space:normal;overflow-wrap:break-word;overflow-wrap:anywhere}
.drive-notices .stale{border-color:#c67c68;background:#3b211d;color:#ffd3c7!important}
.drive-notices .stale.hidden{display:none}
.drive-notices .drive-message + .stale:not(.hidden){margin-top:8px}
.panel .section-label.has-sound-notice{flex-wrap:wrap}
.panel .section-label small.sound-notice{display:block;flex:0 0 100%;min-width:0;margin-top:10px;padding:12px 14px;border:1px solid #b48143;border-radius:10px;background:#241e13;color:#ffe0a8;font-size:16px;line-height:1.5;letter-spacing:normal;text-align:start;white-space:normal;overflow-wrap:break-word;overflow-wrap:anywhere}
.login-notice,.checkout-error{min-width:0;padding:12px 14px;border:1px solid #b48143;border-radius:10px;background:#241e13;color:#ffe0a8;font-size:15px;line-height:1.5;letter-spacing:normal;white-space:normal;overflow-wrap:break-word;overflow-wrap:anywhere}
@media(max-height:620px){.drive-notices{bottom:calc(100% + 8px)}.drive-notices .drive-message,.drive-notices .stale{padding:10px 14px}}

/* Keep speed advice beside its sign, within the existing route ribbon. */
.route-ribbon .speed-sign{flex-shrink:0}
.route-ribbon .route-copy{min-width:0}
.route-ribbon .speed-warning{max-width:250px;margin-top:5px;padding:5px 0 0;border-top:1px solid #b4814366;color:#ffe0a8;font-size:12px;line-height:1.35;text-align:start;overflow-wrap:anywhere}
[dir="rtl"] .route-ribbon .speed-warning{direction:rtl}
.speed-warning strong,.speed-warning span{display:block}
.speed-warning strong{font-size:12px;font-weight:700}
.speed-warning span{margin-top:3px;font-size:11px;color:#d5c8b4}
.route-ribbon .speed-warning.hidden{display:none}
.route-ribbon .speed-warning.over-limit{border-color:#ff988c66;color:#ffb6a4}
.speed-sign.over-limit{animation:overspeed-glow 1.5s ease-in-out infinite}
@keyframes overspeed-glow{50%{box-shadow:0 0 0 5px #ff988c,0 0 24px #e34232}}
html[data-reduced-effects="true"] .speed-sign.over-limit{animation:none}
@media(prefers-reduced-motion:reduce){.speed-sign.over-limit{animation:none}}

/* Reserve a footer for the existing translated entertainment notice, including
   compact and portrait Tesla browsers whose earlier rules hide it. */
html[data-tesla="true"] .disclaimer{display:flex;left:12px;right:12px;bottom:3px;transform:none;justify-content:center;min-height:28px;white-space:normal;overflow-wrap:anywhere;text-align:center;font-size:11px;line-height:1.3;letter-spacing:0;color:#b9c3c7;opacity:1}
html[data-tesla="true"] .control-dock,
html[data-tesla="true"] .drive-readout,
html[data-tesla="true"] .horn-btn,
html[data-tesla="true"] .nitro-btn{margin-bottom:36px}

/* A lightweight finish: solid surfaces, quiet hierarchy, native touch controls. */
:root{--ui-paper:#f1eee7;--ui-muted:#aeb5b7;--ui-stroke:rgba(227,225,214,.14);--ui-raised:#182023;--ui-base:#101719}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
button,a,summary{touch-action:manipulation}

/* The entry page is immediately usable, before any WebGL or audio is loaded. */
.welcome-page{height:100vh;min-height:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);overflow:auto;background:#101719;color:var(--ui-paper)}
.welcome-visual{position:relative;min-height:640px;overflow:hidden;background:#232b2a}
.welcome-art{position:absolute;width:100%;height:100%;top:0;right:0;bottom:0;left:0;object-fit:cover}
.welcome-visual:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(8,14,15,.65),transparent 65%,rgba(8,14,15,.4));pointer-events:none}
.welcome-brand{position:absolute;top:var(--s6);left:var(--s6);z-index:1;display:flex;align-items:center;min-height:48px}
.welcome-brand{text-decoration:none;color:#f1eee7}
/* The language control, beside Sign in. A <details> disclosure rather than a
   scripted menu: the list is links, so the server resolves the language and
   sets the cookie, and it works before the bundle arrives — which is the
   whole point on a car browser that drops sessions. */
.welcome-language>summary{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ctl-h-min);min-width:var(--ctl-h-min);padding:0 var(--s4);border:1px solid var(--ctl-line);border-radius:30px;background:#0d1417cc;color:#dfe6dd;font-size:var(--t-ctl);cursor:pointer;list-style:none}
.welcome-language>summary::-webkit-details-marker{display:none}
.welcome-language>summary>.icon{margin-right:var(--s2)}
[dir=rtl] .welcome-language>summary>.icon{margin-right:0;margin-left:var(--s2)}
.welcome-language[open]>summary,.welcome-language>summary:hover{border-color:#a3e635;color:#c9ee8f}
.welcome-language>ul{position:absolute;top:calc(100% + 6px);right:0;z-index:4;margin:0;padding:var(--s2);max-height:min(60vh,340px);overflow-y:auto;list-style:none;border:1px solid var(--card-line);border-radius:var(--card-r);background:#0d1417f2}
[dir=rtl] .welcome-language>ul{right:auto;left:0}
.welcome-language li{margin:0}
.locale-flag{flex:0 0 auto;border-radius:2px;box-shadow:0 0 0 1px #ffffff26}
.welcome-language li>a>.locale-flag{margin-right:var(--s3)}
[dir=rtl] .welcome-language li>a>.locale-flag{margin-right:0;margin-left:var(--s3)}
.welcome-language>summary>.locale-flag{margin-right:var(--s2)}
[dir=rtl] .welcome-language>summary>.locale-flag{margin-right:0;margin-left:var(--s2)}
.welcome-language li>a{display:flex;align-items:center;min-height:44px;padding:0 var(--s4);border-radius:8px;color:#cfd8ce;text-decoration:none;font-size:var(--t-ctl);white-space:nowrap}
.welcome-language li>a:hover,.welcome-language li>a:focus-visible{background:#24301b;color:#c4ed82}
.welcome-language li>a[aria-current]{color:#a3e635}
.welcome-corner{position:absolute;top:var(--s6);right:var(--s6);z-index:3;display:flex;align-items:center}
.welcome-corner>*+*{margin-left:var(--s4)}
[dir=rtl] .welcome-corner>*+*{margin-left:0;margin-right:var(--s4)}
.welcome-corner>.welcome-signin{position:static;top:auto;right:auto}
.welcome-corner>.welcome-language{position:relative;top:auto;right:auto}
.welcome-signin{position:absolute;top:var(--s6);right:var(--s6);z-index:2;display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border:1px solid rgba(241,238,231,.28);border-radius:999px;background:rgba(16,18,20,.38);color:#f1eee7;font-size:13px;font-weight:600;letter-spacing:0;text-decoration:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.welcome-signin:hover,.welcome-signin:focus-visible{border-color:#a3e635;color:#a3e635}
.welcome-art-lane{animation:welcome-lane 2s linear infinite}
@keyframes welcome-lane{to{stroke-dashoffset:-54}}
@media(prefers-reduced-motion:reduce){.welcome-art-lane{animation:none}}
html[data-reduced-effects="true"] .welcome-art-lane{animation:none}
.welcome-editorial{position:relative;z-index:1;padding:150px 48px 0}
.welcome-editorial>p,.welcome-eyebrow{font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em;color:#efab83}
.welcome-editorial h1{font-size:var(--t-display);line-height:26px;letter-spacing:var(--ls-tight);font-weight:var(--w-med);margin:var(--s4) 0}
.welcome-editorial>span{display:block;max-width:290px;font-size:15px;line-height:1.65;color:#d4d4c9}
.welcome-scene-note{position:absolute;z-index:1;bottom:34px;left:48px;font-size:11px;letter-spacing:0;display:flex;align-items:center;color:#ddd7c9}
.status-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:#f4a879}
.welcome-content{padding:var(--s7) var(--s7);align-self:center;max-width:640px;width:100%;margin:auto}
.welcome-intro h2{font-size:var(--t-head);line-height:1.18;letter-spacing:var(--ls-tight);font-weight:var(--w-med);margin:var(--s3) 0 var(--s4);max-width:410px}
.welcome-intro>p{color:var(--ui-muted);font-size:var(--t-body);line-height:1.6;margin:0 0 var(--s6)}
.welcome-choices{display:grid;gap:var(--s4)}
.welcome-page .experience-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s4);margin:0;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);transition:background .16s,border-color .16s;text-decoration:none}
.welcome-page .experience-card:hover{background:#20292b;border-color:#c38d68}
.entry-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--ctl-r);background:#253033;color:#e3c9b0!important}
.welcome-page .entry-overline{display:block;font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em;color:#a4afb0}
.welcome-page .experience-card strong{display:block;font-size:var(--t-head);font-weight:var(--w-med);letter-spacing:var(--ls-tight);margin-top:var(--s1)}
.welcome-page .experience-card p{font-size:var(--t-body);line-height:1.6;color:#b5bec0;margin:var(--s2) 0 var(--s4)}
.welcome-page .entry-action{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-ctl);font-weight:var(--w-med);color:#f4c49d;min-height:var(--s7)}
.welcome-page .drive-entry{border-color:#b57955;background:#282723}
.welcome-page .drive-entry .entry-icon{background:#3d3026;color:#ffbc8c!important}
.welcome-footnote{display:flex;align-items:flex-start;margin:var(--s5) 0 0;color:#acb6b8}
.welcome-footnote .icon{margin-top:3px;color:#c5b19b}
.welcome-footnote p{margin:0;font-size:var(--t-small);line-height:1.5}.welcome-footnote p span{color:#808e92}

/* A single restrained animation, with no pretend progress percentage. */
.launch-loader.refined-loader{position:absolute;z-index:90;background:#101719;opacity:1;transition:opacity .3s ease,visibility 0s;display:flex;align-items:center;justify-content:center}
.launch-loader.refined-loader.ready{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s .3s}
.launch-wordmark{position:absolute;top:36px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between}
.launch-wordmark svg{width:96px;height:auto;color:#f5f7f8}.launch-wordmark>span{font-size:var(--t-micro,10px);letter-spacing:.06em;color:#99a5a8}
.launch-center{width:560px;max-width:calc(100% - 48px);text-align:center}
.launch-emblem{position:relative;width:144px;height:144px;margin:0 auto 26px;color:#f5b687}
.launch-emblem>svg{width:100%;height:100%}.launch-orbit{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid transparent;border-top-color:#f5b687;border-radius:50%;animation:launch-orbit 2.4s linear infinite}
.launch-eyebrow{font-size:var(--t-micro,10px);color:#af947e;font-weight:700;letter-spacing:.06em}.launch-center h1{font-size:20px;line-height:1.2;letter-spacing:-.02em;font-weight:600;color:#f1eee7;margin:18px 0 12px}
.launch-description{font-size:13px;color:#aeb5b7;line-height:1.6}.launch-progress{height:3px;width:200px;margin:32px auto;background:#2b3437;border-radius:4px;overflow:hidden}.launch-progress>span{display:block;height:100%;width:65%;background:#efad7a;border-radius:4px;animation:launch-sweep 1.8s ease-in-out infinite}
.launch-note{position:absolute;bottom:30px;margin:0;display:flex;align-items:center;color:#89969a;font-size:12px}
.launch-recovery{display:flex;flex-direction:column;align-items:center;margin-top:24px}.launch-recovery button{display:flex;align-items:center;min-height:52px;padding:0 22px;border:0;border-radius:12px;background:#efad7a;color:#192022;font-weight:700}.launch-recovery a{color:#b4bdbd;font-size:var(--t-ctl);min-height:var(--ctl-h-min);display:flex;align-items:center}
@keyframes launch-orbit{to{transform:rotate(360deg)}}
@keyframes launch-sweep{0%{transform:translateX(-110%)}100%{transform:translateX(160%)}}
.launch-loader.ready *{animation:none!important}

/* Consistent cockpit, settings and commerce surfaces. */
html[data-tesla="true"] .topbar{border:1px solid var(--ui-stroke);border-radius:18px;background:#101719;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.topbar .purchase-cta{background:#edaa7d;color:#1b211f;border-color:#edaa7d;font-weight:700}
.topbar .icon-btn,.account-btn{background:#1a2326;border:1px solid #344044;color:#dce1dd}
.experience-switch{color:#c4cdcb}.session-pill{border-color:#39413e;background:#1b2424}.session-pill em{color:#acb8b6}
.route-ribbon,.control-dock,.drive-readout,.turn-card{border-color:var(--ui-stroke);box-shadow:0 10px 28px rgba(0,0,0,.15)}
.control-dock{background:rgba(16,23,25,.96)}.control-dock .sound-btn strong{letter-spacing:0}.control-dock small{color:#adb8b9;letter-spacing:.06em}
.route-copy>.route-road{font-weight:600}.drive-readout .speed>strong{font-weight:600;letter-spacing:-.02em}
html[data-tesla="true"] .panel{background:#101719;padding-top:26px;box-shadow:-20px 0 48px rgba(0,0,0,.25)}
html[data-tesla="true"] .panel-head,html[data-tesla="true"] .panel .settings-tabs{background:#101719}
.panel-head{border-bottom:1px solid var(--card-line);padding-bottom:var(--s2)}.panel-head h1{font-weight:600;letter-spacing:-.02em}.panel-head p{color:#adb8ba;font-size:13px;letter-spacing:0}
.panel .settings-tabs{gap:var(--s2);padding:var(--s2) 0}.panel .settings-tabs button{border-color:var(--ctl-line);background:var(--ctl-bg);color:#b9c2c3;border-radius:var(--ctl-r);min-height:var(--ctl-h)}
.panel .settings-tabs button.active{background:#e7ae84;border-color:#e7ae84;color:#192122}
/* The rule between sections is separation enough: no 24 px margin on top of it. */
.panel .setting-section{border-bottom:1px solid var(--card-line);padding-bottom:var(--s5);margin-bottom:0}
.panel .section-label{font-size:var(--t-micro);letter-spacing:var(--ls-caps);color:#d5b59a}.panel .section-label small{color:#a8b4b7;font-size:11px;letter-spacing:0}
.panel .profile,.panel .environments button,.panel .choice-grid button,.panel .drive-side button,.mix-control,.country-list details,.subscription-summary{background:var(--card-bg);border-color:var(--card-line);border-radius:var(--card-r)}
.panel .profile small,.panel .environments small,.panel .setting-hint{color:#aab6b8;letter-spacing:0;line-height:1.5}
.panel .profile.active{background:var(--sel-bg);border-color:var(--sel-line)}.panel .profile-orb{box-shadow:none}.panel .profile-group h3{color:#aab6b8;letter-spacing:var(--ls-caps);font-size:var(--t-micro)}
html[data-tesla="true"] .commerce-layer{background:rgba(4,9,11,.8)}
.commerce-modal{background:var(--card-bg);border-color:var(--card-line);border-radius:var(--card-r);box-shadow:var(--dialog-shadow)}
.commerce-modal h2{font-weight:var(--w-med);letter-spacing:var(--ls-tight);line-height:20px;padding-right:var(--s7)}[dir="rtl"] .commerce-modal h2{padding-right:0;padding-left:var(--s7)}.commerce-copy{color:#b0bdc0;font-size:13px}.commerce-kicker{color:#d5b59a}
.commerce-close{background:var(--ctl-bg);border-color:var(--ctl-line)}.checkout-btn,.login-form button[type=submit]{background:#efad7a;color:#182020;min-height:var(--ctl-h-lg);letter-spacing:0}
.subscription-option,.addon-option{background:var(--card-bg);border-color:var(--card-line)}.subscription-option.selected,.addon-option.selected{background:var(--sel-bg);border-color:var(--sel-line)}.recommendation,.product-name .icon{color:#e9b58b}.addon-option.included{background:#141e21}.subscription-option small,.addon-option small{color:#b0bdc0}
.purchase-footer{background:#10191c;border-top:1px solid #303d40}.order-summary p,.purchase-reassurance{color:#a8b6b9}.billing-toggle{background:#0c1416;border:1px solid #303c40}.billing-toggle button.active{background:#263134;color:#f0eee8}
.setup-gate{background:var(--scrim)}.setup-gate>section{background:var(--card-bg);border-color:var(--card-line);box-shadow:var(--dialog-shadow)}.setup-brand span{color:#e3b896;background:#2a2922;border-color:#69513e}

/* Old Tesla Chromium: no backdrop blur, mask effects or layout animation. */
html[data-tesla="true"] .route-ribbon,html[data-tesla="true"] .control-dock,html[data-tesla="true"] .drive-readout,html[data-tesla="true"] .turn-card,html[data-tesla="true"] .setup-gate{backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-tesla="true"] .cinema-grain,html[data-tesla="true"] .ambient-orb{display:none}
html[data-tesla="true"] .welcome-page{height:var(--app-height,100vh)}
html[data-tesla="true"] .welcome-content{padding-top:var(--s6);padding-bottom:var(--s6)}
html[data-tesla="true"] .welcome-page a,html[data-tesla="true"] .text-action{min-height:48px}
@media(min-width:901px) and (max-height:720px){.welcome-visual{min-height:600px}.welcome-content{padding:24px 36px}.welcome-editorial{padding-top:130px}.welcome-editorial h1{font-size:20px}.welcome-intro h2{font-size:20px}.welcome-intro>p{margin-bottom:20px}.welcome-page .experience-card{padding:18px}.welcome-footnote{margin-top:18px}}
@media(max-width:900px){.welcome-content{padding:36px 28px}.welcome-editorial{padding:140px 30px 0}.welcome-editorial h1{font-size:20px}.welcome-brand{left:30px}.welcome-corner{right:30px}.welcome-scene-note{left:30px}.welcome-intro h2{font-size:20px}.welcome-page .experience-card{padding:20px;gap:12px;grid-template-columns:40px minmax(0,1fr)}.entry-icon{width:40px;height:40px}.welcome-page .experience-card strong{font-size:20px}}
@media(max-width:640px){.welcome-page{display:block}.welcome-visual{min-height:300px;height:300px}.welcome-art{object-position:center 45%;height:540px;top:-120px}.welcome-editorial{padding:100px 26px 0}.welcome-editorial h1{font-size:20px;margin:12px 0}.welcome-editorial>p{font-size:11px}.welcome-brand{top:20px;left:26px}.welcome-brand svg{width:124px}.welcome-corner{top:var(--s4);right:var(--s4)}.welcome-signin{min-height:var(--ctl-h-min);padding:0 var(--s4);font-size:var(--t-ctl)}.welcome-content,html[data-tesla="true"] .welcome-content{padding:28px 22px 36px}.welcome-intro h2{font-size:20px;max-width:300px;margin:12px 0}.welcome-eyebrow{font-size:11px}.welcome-page .experience-card{border-radius:var(--card-r);padding:var(--card-pad)}.welcome-footnote{margin-top:22px}.launch-wordmark{top:24px;left:24px;right:24px}.launch-center h1{font-size:20px}.launch-emblem{width:116px;height:116px}.launch-note{font-size:11px;bottom:24px}.commerce-modal{border-radius:var(--card-r)}.panel .settings-tabs button{font-size:var(--t-small);padding-left:var(--s2);padding-right:var(--s2)}.panel .section-label{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.launch-orbit,.launch-progress>span{animation:none}.launch-progress>span{width:100%;opacity:.6}.refined-loader,.refined-loader.ready,.welcome-page .experience-card{transition:none!important}.commerce-layer,.commerce-modal{animation:none}}
html[data-tesla="true"] .panel .settings-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2)}
html[data-tesla="true"] .panel .settings-tabs button{padding-left:var(--s1);padding-right:var(--s1)}
@media(max-width:640px){html[data-tesla="true"] .panel .settings-tabs button{font-size:var(--t-small)}}

.launch-wordmark svg{display:block}
/* The loader uses the supplied DRIWE W path, drawn in the brand color. */
.launch-emblem.brand-loader{width:148px;height:auto;margin-bottom:28px;color:#a3e635}
.brand-loader svg{display:block;width:148px;height:96px;overflow:visible}
.brand-loader path{stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.logo-trace-base{opacity:.13}.logo-trace{stroke-dasharray:100 100;animation:brand-draw 2.6s ease-in-out infinite}
.loading-brand-name{display:block;margin-top:20px;color:#e9eee6;font-size:15px;font-weight:700;letter-spacing:.06em;padding-left:.3em}
.brand-loader.stopped .logo-trace{animation:none;stroke-dashoffset:0}
@keyframes brand-draw{0%,12%{stroke-dashoffset:100;opacity:.5}58%,78%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-100;opacity:.5}}
@media(prefers-reduced-motion:reduce){.brand-loader .logo-trace{animation:none;stroke-dashoffset:0}}
/* Scrollable product information, sharing the checkout price catalog. */
.welcome-page{display:block;scroll-behavior:smooth}
.welcome-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:var(--app-height,100vh)}
/* The short-screen treatment of the hero lives in public/app-density.css,
   with the rest of the responsive layer. It used to live here and it deleted
   the sub-headline, the intro paragraph and all three card descriptions below
   760 px of height — which is the car. See that sheet for why they stayed. */
.welcome-intro-nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.welcome-intro-nav>a{display:inline-flex;align-items:center;font-size:var(--t-ctl);color:#e4b58e;text-decoration:none;min-height:var(--ctl-h-min)}
.home-details{max-width:1180px;padding:var(--s7) var(--s7);margin:auto;scroll-margin-top:var(--s6)}
.home-section-heading{max-width:640px;margin-bottom:30px}.home-section-heading h2{font-size:20px;font-weight:600;line-height:1.16;letter-spacing:-.02em;margin:14px 0}.home-section-heading p,.home-features p{font-size:13px;line-height:1.7;color:#aeb9ba}
.home-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.home-features article>.icon{color:#dfad85}.home-features h3{font-size:15px;font-weight:600;margin:18px 0 8px}.home-features p{margin:0}
.home-pricing{border-top:1px solid #303a3b}.home-billing{max-width:340px;margin-bottom:28px}.home-billing button{min-height:48px}
.home-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px}.home-plan{display:flex;flex-direction:column;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}.home-plan.recommended{border-color:#bd8b63;background:#242721}.home-plan>.icon,.home-plan-top>.icon{color:#e5b48b}.home-plan-top{display:flex;justify-content:space-between;align-items:center}.home-plan-top>span{font-size:11px;color:#e5b48b;padding:7px 10px;border:1px solid #65543c;border-radius:30px}.home-plan h3{font-size:20px;margin:22px 0 14px;font-weight:600}.home-price{font-size:var(--n-lg);letter-spacing:var(--ls-tight);font-weight:var(--w-body)}.home-price span{font-size:12px;font-weight:400;letter-spacing:0;color:#aeb9ba}.home-plan p{font-size:13px;line-height:1.6;color:#b3bdbd;min-height:62px}.home-plan ul{padding:0;margin:12px 0 26px;list-style:none;flex:1}.home-plan li{position:relative;padding:8px 0 8px 17px;font-size:12px;line-height:1.5;color:#c6cfca}.home-plan li:before{content:'✓';position:absolute;left:0;color:#d8b895;font-size:11px}
.home-plan-link{display:flex;align-items:center;justify-content:space-between;min-height:var(--ctl-h);padding:0 var(--s4);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);color:#e6c3a4;text-decoration:none;font-size:var(--t-ctl);font-weight:var(--w-med)}.recommended .home-plan-link,.home-final-cta .home-plan-link{background:#e6ac7f;color:#172022;border-color:#e6ac7f}.home-plan-link:hover{border-color:#e6ac7f;background:#2e352e}.recommended .home-plan-link:hover,.home-final-cta .home-plan-link:hover{background:#f1be96;color:#172022}
.home-billing-note{margin:20px 0 44px;color:#a4afb2;font-size:12px;line-height:1.6}.home-addons-heading h3{font-size:20px;font-weight:600;margin:0 0 10px}.home-addons-heading p{font-size:13px;color:#aeb9ba;margin-bottom:24px}.home-addon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.home-addon{display:grid;grid-template-columns:24px minmax(0,1fr) 16px;align-items:start;gap:var(--s4);padding:var(--card-pad);background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-r);color:inherit;text-decoration:none}.home-addon>.icon{color:#dcb18d;margin-top:2px}.home-addon strong{font-size:13px}.home-addon p{color:#aeb9ba;font-size:12px;line-height:1.6;margin:8px 0 12px}.home-addon span{color:#ecc19b;font-size:12px}.home-addon:hover{border-color:#ba8f69}
.home-faq{border-top:1px solid #303a3b}.home-faq details{border-bottom:1px solid #303a3b;padding:6px 0}.home-faq summary{display:flex;align-items:center;justify-content:space-between;list-style:none}
.home-faq summary::-webkit-details-marker{display:none}
.home-faq summary>.icon{flex:0 0 auto;margin-left:var(--s4);color:#9fca63;transition:transform .16s}
[dir=rtl] .home-faq summary>.icon{margin-left:0;margin-right:var(--s4);transform:rotate(180deg)}
.home-faq details[open]>summary>.icon{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.home-faq summary>.icon{transition:none}}
.home-faq summary{padding:var(--s4) var(--s2);font-size:var(--t-title);line-height:1.5;min-height:var(--ctl-h-min);cursor:pointer;color:#d6ded8}.home-faq details p{max-width:700px;margin:0 6px 20px;color:#aeb9ba;font-size:13px;line-height:1.7}.home-final-cta{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s7);padding:var(--s6);background:var(--card-bg);border-radius:var(--card-r)}.home-final-cta h3{font-weight:600;font-size:20px;margin:0 0 10px}.home-final-cta p{color:#aeb9ba;font-size:13px;margin:0}.home-final-cta>a{min-width:180px}
.home-footer{display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:28px 48px 40px;color:#a2adb0;font-size:11px}.home-footer>span{font-weight:700;letter-spacing:.06em;color:#dce4db}.home-footer a{color:#e2b48e;display:flex;align-items:center;min-height:48px}
@media(max-width:900px){.home-details{padding:48px 28px}.home-plan{padding:20px}.home-price{font-size:20px}.home-plan-grid{gap:12px}.home-section-heading h2{font-size:20px}}
@media(max-width:640px){.welcome-hero{display:block;min-height:0}.home-details{padding:40px 22px}.home-plan-grid,.home-features,.home-addon-grid{grid-template-columns:1fr}.home-features{gap:26px}.home-plan p{min-height:0}.home-final-cta{align-items:stretch;flex-direction:column;padding:22px}.home-footer{padding:20px 22px;flex-wrap:wrap}.home-footer p{order:3;width:100%;margin:0 0 14px}.home-section-heading h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){.welcome-page{scroll-behavior:auto}}

/* Homepage follows the unchanged DRIWE logo: graphite, white and lime. */
.welcome-page{--accent:#a3e635;--ui-paper:#f4f5f2;--ui-muted:#a9b0a8;background:#101214;color:#f4f5f2}
.welcome-brand{top:30px;left:34px}
.welcome-corner{top:30px;right:34px}
.welcome-brand svg{display:block;width:150px;height:auto}
.home-footer-brand img{display:block;width:142px;height:auto;filter:none;mix-blend-mode:normal}
.home-footer-brand{text-decoration:none}
.welcome-visual{background:#101214}
.welcome-visual:after{background:linear-gradient(180deg,rgba(16,18,20,.8),transparent 65%,rgba(16,18,20,.35))}
.welcome-page .welcome-eyebrow,.welcome-page .welcome-editorial>p,.welcome-page .welcome-intro-nav>a,.welcome-page .entry-action,.welcome-page .welcome-footnote .icon,.welcome-page .home-features article>.icon,.welcome-page .home-plan>.icon,.welcome-page .home-plan-top>.icon,.welcome-page .home-addon>.icon,.welcome-page .home-addon span,.welcome-page .home-footer a{color:#a3e635}
.welcome-page .welcome-editorial>span,.welcome-page .welcome-scene-note{color:#d5ded0}
.welcome-page .status-dot{background:#a3e635}
.welcome-page .experience-card,.welcome-page .home-plan,.welcome-page .home-addon{background:#191e1c;border-color:#354033}
.welcome-page .entry-icon{background:#283222;color:#c8ef94!important}
.welcome-page .drive-entry,.welcome-page .home-plan.recommended{background:#20291b;border-color:#759f3d}
.welcome-page .drive-entry .entry-icon{background:#334323;color:#a3e635!important}
.welcome-page .experience-card:hover,.welcome-page .home-addon:hover{background:#242d20;border-color:#a3e635}
.welcome-page .home-plan-top>span{background:#2d3b22;color:#c8ef94;border-color:#566d38}
.welcome-page .home-plan li:before{color:#a3e635}
.welcome-page .home-plan-link{color:#d3edb4;border-color:#586b43}
.welcome-page .recommended .home-plan-link,.welcome-page .home-final-cta .home-plan-link{background:#a3e635;border-color:#a3e635;color:#15200c}
.welcome-page .home-plan-link:hover{background:#2b3922;border-color:#a3e635}
.welcome-page .recommended .home-plan-link:hover,.welcome-page .home-final-cta .home-plan-link:hover{background:#bbf367;color:#15200c}
.welcome-page .home-final-cta{background:#1e281b}
.welcome-page .home-billing{background:#151a15;border-color:#354033}
.welcome-page .home-billing button.active{background:#2d3b23;color:#f4f5f2}
.welcome-page .home-billing b{color:#d3f5a7;background:#3b5029}
.welcome-page .home-pricing,.welcome-page .home-faq,.welcome-page .home-faq details{border-color:#303a2d}
.welcome-page a:focus-visible,.welcome-page button:focus-visible,.welcome-page summary:focus-visible{outline-color:#a3e635}
html[data-tesla="true"] .welcome-page a:focus{outline-color:#a3e635}
@media(max-width:900px){.welcome-brand{left:16px}.welcome-corner{right:16px}}
@media(max-width:640px){.welcome-brand{top:14px;left:12px}.welcome-brand svg{width:124px}.welcome-corner{top:14px;right:12px}}

/* Peraly company footer, with the original Driwe brand artwork. */
/* The invitation to follow: its own row, so it reads as an invitation rather
   than a fifth column of links. One target, comfortably over the touch floor. */
.footer-social{display:flex;align-items:center;margin:0 0 var(--s5);padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);color:inherit;text-decoration:none;min-height:var(--ctl-h-min)}
.footer-social:hover,.footer-social:focus-visible{border-color:#a3e635}
.footer-social>.icon:first-child{flex:0 0 auto;color:#a3e635}
.footer-social>span{flex:1 1 auto;min-width:0;margin:0 var(--s4)}
.footer-social strong{display:block;font-size:var(--t-ctl);font-weight:var(--w-med);color:#e8efe4}
.footer-social small{display:block;margin-top:2px;font-size:var(--t-small);line-height:1.5;color:#a5b0a3}
.footer-social>.icon:last-child{flex:0 0 auto;color:#a3e635}
.site-footer{max-width:1180px;margin:auto;padding:var(--s6) var(--s7) var(--s5);border-top:1px solid var(--card-line);color:#acb4aa}
.footer-navigation{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:var(--s5);align-items:start;padding-bottom:var(--s5)}
.footer-original-logo{display:block;width:120px}.footer-original-logo svg{display:block;width:100%;height:auto}
.footer-navigation nav{display:flex;flex-direction:column;align-items:flex-start}.footer-navigation h3{font-size:var(--t-micro);font-weight:var(--w-med);letter-spacing:var(--ls-caps);text-transform:uppercase;color:#f4f5f2;margin:0 0 var(--s1)}
.footer-navigation nav>a,.footer-link-pending,.footer-navigation nav>button{display:flex;align-items:center;min-height:var(--ctl-h-min);padding:0;font-size:var(--t-ctl);line-height:1.35;text-align:start;letter-spacing:0;color:#acb4aa;text-decoration:none;background:none;border:0}
.footer-navigation nav>a:hover,.footer-navigation nav>button:hover{color:#a3e635}.footer-link-pending{cursor:default}
.footer-company-details{display:flex;justify-content:space-between;border-top:1px solid var(--card-line);padding-top:var(--s4)}.footer-company-details p{font-size:var(--t-small);line-height:1.45;margin:0}.footer-trademark-notice{max-width:420px}
.cookie-settings-dialog{width:480px;max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);overflow:auto;padding:var(--s6);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);color:#f4f5f2;box-shadow:var(--dialog-shadow)}.cookie-settings-dialog::backdrop{background:var(--scrim)}.cookie-settings-dialog h2{font-size:var(--t-head);line-height:20px;letter-spacing:var(--ls-tight);margin:0 0 var(--s4);font-weight:var(--w-med)}.cookie-settings-dialog h3{font-size:13px;margin:0}.cookie-settings-dialog p{font-size:13px;line-height:1.7;color:#adb8a8}.cookie-settings-dialog section{border-top:1px solid var(--card-line);padding:var(--s4) 0 var(--s1)}.cookie-category{display:flex;align-items:center;justify-content:space-between}.cookie-category span{font-size:11px;color:#b7e879}.cookie-settings-dialog form>button{margin-top:var(--s4);min-height:var(--ctl-h-lg);width:100%;border:0;border-radius:var(--ctl-r);background:#a3e635;color:#15200c;font-weight:700}
@media(max-height:760px){.cookie-settings-dialog{padding:var(--s5)}}
@media(max-width:700px){.site-footer{padding:var(--s5)}.footer-navigation{grid-template-columns:1fr 1fr;gap:16px 26px}.footer-original-logo{grid-column:1/-1;width:156px}.footer-navigation nav:last-child{grid-column:1/-1}.footer-company-details{display:grid;gap:var(--s4)}.footer-desktop-break{display:none}}
/* Car viewport support applies to every customer-facing page and dialog. */
html[data-tesla="true"] .welcome-page{height:var(--app-height,100vh);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html[data-tesla="true"] .welcome-hero{min-height:var(--app-height,100vh)}
html[data-tesla="true"] .home-billing button,html[data-tesla="true"] .home-plan-link,html[data-tesla="true"] .home-faq summary{min-height:var(--ctl-h-lg)}
html[data-tesla="true"] .commerce-layer{padding:14px;box-sizing:border-box;overflow:hidden}
html[data-tesla="true"] .commerce-modal{width:560px;max-width:100%;max-height:calc(var(--app-height,100vh) - 28px);overflow-x:hidden;overflow-y:auto;scroll-padding-top:var(--s7);scroll-padding-bottom:110px}
html[data-tesla="true"] .commerce-modal.purchase-modal{width:650px}
html[data-tesla="true"] .commerce-close{width:48px;height:48px;min-width:48px;min-height:48px}
html[data-tesla="true"] .login-form input{font-size:15px;min-height:56px}
html[data-tesla="true"] .subscription-option,html[data-tesla="true"] .addon-option{min-height:76px}
html[data-tesla="true"] .subscription-option input,html[data-tesla="true"] .addon-option input{width:22px;height:22px}
html[data-tesla="true"] .purchase-footer{padding-top:12px}
html[data-tesla="true"] .panel{height:var(--app-height,100vh);overflow-x:hidden;overflow-y:auto;box-sizing:border-box;scroll-padding-bottom:32px}
html[data-tesla="true"] .cookie-settings-dialog{box-sizing:border-box;width:520px;max-width:calc(100vw - 32px);max-height:calc(var(--app-height,100vh) - 32px);overflow:auto}
@media(max-height:650px) and (min-width:901px){html[data-tesla="true"] .welcome-visual{min-height:var(--app-height,100vh)}html[data-tesla="true"] .welcome-content{padding:24px 28px}.welcome-editorial{padding-top:120px}.welcome-editorial h1{font-size:20px}.welcome-intro h2{font-size:20px}.welcome-page .experience-card{padding:16px}.welcome-page .experience-card p{margin:8px 0 12px}.welcome-footnote{margin-top:16px}html[data-tesla="true"] .commerce-modal{padding:24px}html[data-tesla="true"] .purchase-footer{bottom:-24px}html[data-tesla="true"] .launch-emblem.brand-loader{width:112px;margin-bottom:16px}.brand-loader svg{max-width:100%}.launch-center h1{font-size:20px}.launch-wordmark{top:20px}.launch-note{bottom:18px}}
@media(orientation:portrait) and (max-width:900px){html[data-tesla="true"] .welcome-hero{display:block;min-height:0}html[data-tesla="true"] .welcome-visual{height:300px;min-height:300px}html[data-tesla="true"] .welcome-editorial{padding:104px 30px 0}html[data-tesla="true"] .welcome-editorial h1{font-size:20px;margin:14px 0}html[data-tesla="true"] .welcome-brand{top:20px;left:16px}html[data-tesla="true"] .welcome-content{max-width:680px;padding:32px 28px}html[data-tesla="true"] .home-plan-grid{grid-template-columns:1fr}html[data-tesla="true"] .home-plan p{min-height:0}html[data-tesla="true"] .footer-navigation{grid-template-columns:repeat(2,minmax(0,1fr))}html[data-tesla="true"] .footer-original-logo{grid-column:1/-1}html[data-tesla="true"] .panel{width:100%;max-width:none;padding-left:var(--s5);padding-right:var(--s5)}}
@media(max-width:600px){html[data-tesla="true"] .welcome-content{padding:28px 22px}html[data-tesla="true"] .footer-navigation{gap:16px}html[data-tesla="true"] .home-addon-grid{grid-template-columns:1fr}}
html[data-tesla="true"] .commerce-layer{grid-template-columns:minmax(0,1fr)}
html[data-tesla="true"] .commerce-modal{width:calc(100vw - 28px);max-width:560px;min-width:0;box-sizing:border-box}
html[data-tesla="true"] .commerce-modal.purchase-modal{width:calc(100vw - 28px);max-width:650px}
/* Readable company and policy pages across Tesla landscape and portrait views. */
.information-page{height:var(--app-height,100vh);overflow:auto;background:#101214;color:#f4f5f2}
.information-header{max-width:1180px;display:flex;align-items:center;justify-content:space-between;padding:var(--s4) var(--s7);margin:auto;border-bottom:1px solid var(--card-line)}
.information-header svg{display:block;width:140px;height:auto}.information-header>a:last-child{display:flex;align-items:center;min-height:52px;color:#b9e986;font-size:13px;text-decoration:none}
.information-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s7);max-width:1180px;padding:var(--s7);margin:auto}
.information-sidebar{align-self:start;position:sticky;top:24px}.information-sidebar>span{font-size:11px;letter-spacing:.06em;color:#a6b09f;text-transform:uppercase}.information-sidebar nav{display:grid;gap:4px;margin:16px 0 24px}.information-sidebar nav>a,.information-support{display:flex;align-items:center;min-height:var(--ctl-h-lg);padding:var(--row-pad);border-radius:var(--ctl-r);color:#b5bfb0;text-decoration:none;font-size:13px;line-height:1.5}.information-sidebar nav>a[aria-current=page]{background:var(--sel-bg);color:#d4f5b0}.information-support{justify-content:space-between;border-top:1px solid var(--card-line);border-radius:0;padding-left:0;padding-right:0;color:#a3e635}
.information-article{max-width:760px;min-width:0;user-select:text;-webkit-user-select:text}.information-article h1{font-size:var(--t-display);line-height:1.15;letter-spacing:var(--ls-tight);font-weight:var(--w-med);margin:var(--s4) 0}.information-intro{font-size:15px!important;color:#b9c4b2!important}.information-article .policy-revision{font-size:12px;color:#8f9e86;margin:20px 0 30px}.information-article p{font-size:15px;line-height:1.85;color:#bcc5b8;margin:14px 0;overflow-wrap:break-word}.information-article a{color:#b8ec80;text-underline-offset:4px}.information-article section{padding:var(--s6) 0;border-top:1px solid var(--card-line);scroll-margin-top:var(--s7)}.information-article h2{font-size:20px;line-height:1.4;font-weight:600;margin:0 0 16px}.information-contents{display:grid;gap:var(--s1);margin:var(--s6) 0;padding:var(--card-pad);background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-r)}.information-contents a{display:flex;align-items:center;min-height:48px;font-size:13px;line-height:1.5;text-decoration:none}.policy-related{display:flex;flex-wrap:wrap;padding:24px 0;border-top:1px solid #303a2d}.policy-related a{display:flex;align-items:center;min-height:48px;font-size:13px}.purchase-policies{font-size:11px;line-height:1.8;color:#aeb9ba;margin-top:20px}.purchase-policies a{color:#bde791;text-underline-offset:3px}
@media(max-width:900px){.information-header{padding:20px 28px}.information-layout{padding:32px 28px;gap:28px;grid-template-columns:190px minmax(0,1fr)}.information-article h1{font-size:20px}}
@media(orientation:portrait) and (max-width:900px){.information-layout{display:block}.information-sidebar{position:static;margin-bottom:30px}.information-sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.information-sidebar nav>a{border:1px solid #303a2d}.information-support{display:none}.information-article{max-width:none}}
@media(max-width:600px){.information-header{padding:var(--s4) var(--s5)}.information-header svg{width:110px}.information-header>a:last-child{font-size:12px}.information-layout{padding:28px 22px}.information-article h1{font-size:20px}.information-article h2{font-size:20px}.information-article p{font-size:15px}.information-contents{padding:14px}}

/* Clear product disclosures without a blocking setup step. */
.home-subscription-benefits{display:flex;align-items:flex-start;padding:24px;margin:28px 0;border:1px solid #39432e;border-radius:16px;background:#192017;color:#c4ed82}
.home-subscription-benefits>svg{flex-shrink:0}.home-subscription-benefits h3{margin:0 0 8px;color:#f0f2eb;font-size:20px}
.home-subscription-benefits p,.home-data-note{margin:0;color:#b3b8b0;font-size:15px;line-height:1.65}.home-data-note{margin-top:20px;max-width:960px}
.purchase-details{margin:18px 0;color:#bcc4c8;font-size:13px;line-height:1.65}.purchase-details summary{min-height:48px;display:list-item;align-content:center;cursor:pointer;color:#e4ebde}.purchase-details p{margin:8px 0 16px}.subscription-summary a{color:#c4ed82}
.welcome-footnote p{line-height:1.55}.welcome-footnote p span{display:inline-block;max-width:480px}

/* Homepage feature catalog and setup guide; static content keeps entry light. */
.home-section-nav{display:flex;flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:20px 48px;border-bottom:1px solid #2b3228}
.home-section-nav a>.icon{margin-right:var(--s2);color:#9fca63}
[dir=rtl] .home-section-nav a>.icon{margin-right:0;margin-left:var(--s2)}
.home-section-nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:1px solid #343d2d;border-radius:24px;color:#d6ddce;text-decoration:none;font-size:13px}
.home-section-nav a:hover,.home-section-nav a:focus-visible{background:#24301b;color:#c4ed82}
.home-feature-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.home-feature-catalog article{display:flex;flex-direction:column;min-width:0;padding:26px;border:1px solid #30362e;border-radius:18px;background:#171b18}
.home-feature-catalog .icon{color:#a3e635}.home-feature-catalog h3,.home-steps h3{font-size:20px;line-height:1.3;margin:20px 0 10px;font-weight:600}
.home-feature-catalog p,.home-steps p{color:#b3b8b0;font-size:15px;line-height:1.7;margin:0 0 22px}
.home-feature-availability{margin-top:auto;border-top:1px solid #30362e;padding-top:16px;font-size:13px;line-height:1.6;color:#c4d4b3}
.home-feature-actions{display:flex;flex-wrap:wrap;align-items:center;margin-top:24px}.home-feature-actions>a{display:inline-flex;align-items:center;min-height:48px;color:#c4ed82;text-decoration:none}.home-feature-actions .home-plan-link{width:auto;padding:12px 20px}
.home-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;list-style:none;padding:0;margin:0}.home-steps li{min-width:0;border-top:1px solid #3e4c32;padding-top:22px}.home-step-number{font-size:20px;letter-spacing:-.02em;color:#a3e635}.home-steps a{display:inline-flex;align-items:center;min-height:48px;color:#c4ed82;text-decoration:none}.home-step-note{display:block;color:#899480;font-size:13px;line-height:1.6;padding:12px 0}
@media(max-width:1000px){.home-feature-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.home-section-nav{padding:20px 28px}}
@media(max-width:640px){.home-feature-catalog,.home-steps{grid-template-columns:1fr}.home-feature-catalog article{padding:22px}.home-section-nav{padding:16px 22px}.home-section-nav a{padding:0 14px}}

/* Pricing: full billed amounts first, then verifiable annual savings. */
.home-plan-saving{display:flex;flex-direction:column;margin:16px 0 4px;padding:14px 0;border-top:1px solid #394332;border-bottom:1px solid #394332;font-size:13px;line-height:1.55;color:#b8c2af}
.home-plan-saving strong{align-self:flex-start;color:#c5f28b;font-size:15px}.home-plan-saving.monthly{min-height:96px;justify-content:center}
.home-plan-common{display:flex;align-items:flex-start;margin-top:24px;color:#b8c7aa}.home-plan-common>.icon{flex-shrink:0;margin-top:3px}.home-plan-common p{margin:0;font-size:13px;line-height:1.7}
.home-billing-note a{color:#c4ed82;text-underline-offset:3px}.home-addon-saving{display:block;margin-top:9px;color:#c4ed82;font-size:12px;line-height:1.6}
.home-plan-top{align-items:flex-start}.home-plan-top>.icon{flex-shrink:0}.home-plan-top>span{line-height:1.5;text-align:center}.home-plan li{font-size:13px}.home-plan p{font-size:13px}

.purchase-inclusions{display:flex;align-items:flex-start;margin:20px 0;padding:18px;border:1px solid #526c38;border-radius:14px;background:#1d2818;color:#c4ed82}.purchase-inclusions>.icon{flex-shrink:0}.purchase-inclusions strong{font-size:15px}.purchase-inclusions p{font-size:13px;line-height:1.65;color:#c0cbb6;margin:8px 0 0}.purchase-inclusions .subscription-link{min-height:48px}.order-summary .order-covered{color:#c4ed82}
/* Dedicated storefront: one scroll surface, grouped choices and a visible review. */
.shop-page{display:block!important;height:var(--app-height,100vh);overflow:auto;background:#101412;color:#e9eee4;scroll-padding:24px;box-sizing:border-box}
.shop-page *{box-sizing:border-box}.shop-header{max-width:1280px;margin:auto;padding:var(--s4) var(--s7);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--card-line)}.shop-header svg.brand-logo{width:130px;display:block}.shop-header nav{display:flex;flex-wrap:wrap}.shop-header a{display:inline-flex;align-items:center;min-height:48px;color:#c4ed82;text-decoration:none;font-size:13px}
.shop-shell{max-width:1280px;margin:auto;padding:var(--s7)}.shop-heading{margin-bottom:var(--s6)}.shop-heading h1{font-size:var(--t-display);line-height:26px;letter-spacing:var(--ls-tight);margin:var(--s2) 0}.shop-heading>p{color:#aeb9a5;line-height:1.65}/* The three steps are worth showing once they are true. They were hidden
   because they never advanced: step two said "Sign in" to someone who already
   had a session, and step three never lit at all. Shop.jsx now derives the
   state, so the list is visible again and each step carries its own. */
.shop-progress{display:flex;flex-wrap:wrap;margin:var(--s5) 0 0;padding:0;list-style:none}
.shop-progress li{display:inline-flex;align-items:center;min-height:44px;margin:0 var(--s5) var(--s2) 0;color:#8f9e86;font-size:12px;line-height:1.4}
.shop-progress li b{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;margin-right:var(--s3);border:1px solid #3b4a33;border-radius:50%;background:#161e14;color:#8f9e86;font-size:11px;font-weight:700}
.shop-progress li[data-state="current"]{color:#e9eee4}
.shop-progress li[data-state="current"] b{border-color:var(--sel-line);background:var(--sel-bg);color:#c4ed82}
.shop-progress li[data-state="done"]{color:#c4ed82}
.shop-progress li[data-state="done"] b{border-color:#526c38;background:#1d2818;color:#c4ed82}
[dir="rtl"] .shop-progress li{margin:0 0 var(--s2) var(--s5)}
[dir="rtl"] .shop-progress li b{margin-right:0;margin-left:var(--s3)}

/* The header carries the brand and the language on one side and every action
   on the other. Both sides shrink: the actions are ToolbarButtons, so they
   drop to short labels and then to icons with the density attribute, and the
   account chip gives up the address before it gives up the word. */
.shop-brand{display:flex;align-items:center;min-width:0}
.shop-brand>a{min-width:0}
.shop-brand>a+.race-language{margin-left:var(--s5)}
[dir="rtl"] .shop-brand>a+.race-language{margin-left:0;margin-right:var(--s5)}
.shop-header-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;min-width:0}
.shop-header .ui-tool{border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:#c4ed82;text-decoration:none;cursor:pointer}
.shop-header .ui-tool--secondary{border-color:var(--sel-line);background:var(--sel-bg)}
.shop-header .shop-return-action{background:#a3e635;border-color:#a3e635;color:#172013}
.shop-account{display:inline-flex;align-items:center;min-width:0;max-width:100%;min-height:var(--ctl-h-min);padding:0 var(--s4);border:1px solid #526c38;border-radius:var(--ctl-r);background:#1d2818;color:#c4ed82;font-size:var(--t-ctl)}
.shop-account>.icon{flex:none}
.shop-account b{flex:none;margin-left:var(--s3);font-weight:var(--w-med)}
.shop-account small{min-width:0;margin-left:var(--s3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b6c8a6}
[dir="rtl"] .shop-account b,[dir="rtl"] .shop-account small{margin-left:0;margin-right:var(--s3)}

/* What the page is not selling. Racing, the Arcade and everything earned on
   track are free, and a pricing page that never says so reads as if they are
   not. */
.shop-earned{display:flex;align-items:flex-start;margin:0 0 var(--s6);padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}
.shop-earned>.icon{flex:none;color:#c4ed82}
.shop-earned strong{display:block;font-size:15px;color:#e9eee4}
.shop-earned p{margin:8px 0 0;font-size:13px;line-height:1.65;color:#aab69f}
.shop-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s7);align-items:start}.purchase-selection{min-width:0}.purchase-review{min-width:0}.shop-layout>.purchase-review{position:sticky;top:var(--s6);border:1px solid var(--card-line);background:var(--card-bg);border-radius:var(--card-r);padding:var(--card-pad)}.shop-layout .commerce-kicker{display:none}.shop-layout h2{font-size:20px;margin-top:0}.shop-layout .commerce-copy{line-height:1.65;margin-bottom:22px}.shop-layout fieldset{min-width:0}.shop-layout .order-summary{margin:0;border:0;padding:0;background:none}.shop-layout .order-summary>div{gap:20px;align-items:start}.shop-layout .order-summary>div>span:last-child{flex-shrink:0}.shop-layout .purchase-footer{position:static!important;margin:0;padding:18px 0 0;background:none}.shop-layout .checkout-btn{width:100%;min-height:var(--ctl-h-lg);white-space:normal;background:#a3e635;color:#172013;border-radius:var(--ctl-r);border:0;padding:0 var(--s4);font-weight:var(--w-strong)}.shop-layout .purchase-policies{font-size:12px;line-height:1.7}.shop-layout .purchase-policies a{color:#c4ed82}.shop-layout .subscription-option,.shop-layout .addon-option{background:var(--card-bg);border-color:var(--card-line)}.shop-layout .selected{border-color:var(--sel-line);background:var(--sel-bg)}.shop-layout .product-name .icon{color:#b4e875}.shop-layout .billing-toggle{max-width:350px}.shop-layout .billing-toggle button{min-height:48px}
.addon-group-tabs{display:flex;flex-wrap:wrap;margin:18px 0}.addon-group-tabs button{display:inline-flex;align-items:center;min-height:var(--ctl-h-min);padding:0 var(--s4);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:#c1ccb6;cursor:pointer;font-size:var(--t-ctl)}.addon-group-tabs button[aria-selected="true"]{color:#c4ed82;background:var(--sel-bg);border-color:var(--sel-line)}.addon-group-heading h3{font-size:20px;margin:22px 0 8px}.addon-group-heading p{font-size:13px;line-height:1.65;color:#aab69f;margin:0 0 18px}.addon-group-products{display:grid;gap:10px}.addon-group-products .addon-option{margin:0;min-width:0}.addon-options [hidden]{display:none!important}.addon-option>span{min-width:0}.addon-option>b{max-width:120px}.addon-option .product-name{line-height:1.4}
.shop-login{max-width:520px;padding:var(--s6);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}.shop-login>.icon{display:block;color:#a3e635;margin:16px 0}.shop-login p{color:#b8c3ae;line-height:1.65}.shop-login input{width:100%;min-height:52px}.shop-login button{min-height:48px}.shop-login .text-action{color:#c4ed82}.shop-return{padding:var(--card-pad);background:var(--sel-bg);border:1px solid var(--sel-line);border-radius:var(--card-r);margin-bottom:var(--s6)}.shop-return p{line-height:1.7;color:#bbc9ae}.shop-return a,.shop-return button{display:inline-flex;align-items:center;min-height:48px;padding:12px;margin-right:12px;color:#c4ed82;border:1px solid #526c38;background:transparent;border-radius:10px;text-decoration:none}.home-addon-categories .home-addon{min-height:150px}.home-addon-categories strong{font-size:15px}
@media(max-width:1000px){.shop-layout{grid-template-columns:minmax(0,1fr) 290px;gap:20px}.shop-shell{padding:28px}.shop-header{padding:16px 28px}.shop-layout>.purchase-review{padding:18px}}
@media(max-width:760px){.shop-layout{grid-template-columns:1fr}.shop-layout>.purchase-review{position:static}.shop-shell{padding:24px 20px}.shop-header{padding:14px 20px;flex-wrap:wrap}.shop-heading h1{font-size:20px}.shop-layout .addon-option{grid-template-columns:22px minmax(0,1fr) auto}.shop-layout .addon-option>b{max-width:88px;font-size:13px}}
@media(max-height:650px){.shop-layout>.purchase-review{position:static}}

.shop-product-section{margin:24px 0}.shop-product-section h4{font-size:15px;font-weight:600;color:#d2e3c3;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid #34442b}.garage-starters,.group-footnote{display:flex;flex-direction:column;padding:18px;border:1px solid #34442b;border-radius:12px;background:#172016;color:#b8c9a8;font-size:13px;line-height:1.7}.garage-starters strong,.group-footnote strong{color:#c4ed82}

.category-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;min-height:22px;padding:2px 5px;border-radius:20px;background:#b5e876;color:#14200b;font-size:12px;font-weight:700}.order-summary .order-remove{display:block;min-height:var(--ctl-h-min);padding:var(--s3) 0;border:0;background:none;color:#afc894;font-size:12px;text-decoration:underline;cursor:pointer;text-align:start}
.phone-checkout-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:16px;border:0;border-radius:12px;background:#a3e635;color:#172013;font-size:15px;font-weight:700;cursor:pointer}.phone-checkout-note{font-size:12px;line-height:1.6;color:#b7c6ac;text-align:center;margin:10px 0 18px}.shop-layout .phone-checkout-btn~.checkout-btn{background:transparent;color:#c4ed82;border:1px solid #526c38}.shop-header button{font:inherit;min-height:48px;color:#c4ed82;background:none;border:0;cursor:pointer}.phone-handoff{padding:var(--s6);border:1px solid var(--card-line);background:var(--card-bg);border-radius:var(--card-r)}.phone-handoff-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:center}.phone-handoff h2{font-size:20px;line-height:1.2;margin:16px 0}.phone-handoff p,.phone-handoff li{font-size:15px;line-height:1.7;color:#b8c6ad}.phone-handoff ol{padding-left:22px}.phone-handoff li{padding:8px 0}.phone-handoff .text-action{min-height:48px;color:#c4ed82}.phone-code-card{text-align:center}.phone-qr{background:#fff;padding:22px;border-radius:16px;max-width:280px;margin:auto}.phone-qr svg{width:100%;height:auto;display:block}.phone-check-code{display:block;letter-spacing:var(--ls-caps);color:#c4ed82;font-size:var(--n-lg);margin:var(--s4) 0 var(--s3)}.phone-code-card small{display:block;color:#a9b99b}.phone-code-card a{display:flex;align-items:center;justify-content:center;min-height:48px;color:#c4ed82;font-size:13px;margin-top:8px}.phone-code-card button{min-height:48px;padding:12px 20px;border-radius:10px;background:#a3e635;border:0;color:#14200b;font-weight:700}
@media(max-width:760px){.phone-handoff-layout{grid-template-columns:1fr;gap:24px}.phone-handoff{padding:22px}.phone-handoff h2{font-size:20px}.phone-code-card{grid-row:1}.phone-qr{max-width:240px}}

.pro-offer{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid #4d6634}.pro-offer>.icon{color:#b7ee72}.pro-offer h3{font-size:15px;line-height:1.4;color:#d9f5b4;margin:10px 0}.pro-offer p{font-size:13px;line-height:1.65;color:#bccbb0}.pro-offer .pro-offer-terms{font-size:12px}.pro-offer .subscription-link{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;border:1px solid #88b748;border-radius:10px;background:#263b19;color:#c4ed82;padding:12px;cursor:pointer}

.shop-layout>.purchase-review.has-pro-offer{position:static}
.shop-layout .checkout-error .subscription-link{display:flex;align-items:center;min-width:48px;min-height:48px;width:100%;margin-top:8px;padding:12px 0;white-space:normal;text-align:left;line-height:1.5}

.billing-management{margin:0 0 32px;padding:24px;border:1px solid #405333;border-radius:18px;background:#172014}.billing-management>p,.billing-note,.billing-current p{color:#b3c3a5;font-size:13px;line-height:1.65}.billing-management h2{font-size:20px}.billing-management button,.billing-management select{min-height:48px;padding:12px 16px;border:1px solid #56743d;border-radius:10px;background:#23341a;color:#d1edb9;cursor:pointer;font:inherit}.billing-management button:disabled{opacity:.5;cursor:default}.billing-management a{color:#c4ed82}.billing-subscription{margin-top:24px;padding-top:24px;border-top:1px solid #3c4e30}.billing-current{display:flex;justify-content:space-between;align-items:start}.billing-current h3{margin:0;font-size:20px}.billing-current button{flex-shrink:0}.billing-change-fields{display:flex;flex-wrap:wrap;align-items:end;margin:18px 0}.billing-change-fields label{display:flex;flex-direction:column;font-size:13px}.billing-change-fields select{max-width:100%}.billing-change-fields .billing-metrics{flex-direction:row;align-items:center;min-height:48px}.billing-metrics input{width:22px;height:22px;accent-color:#a3e635}.billing-preview{border:1px solid #8ab65a;border-radius:14px;padding:20px;margin-top:20px;background:#24341b}.billing-preview p{font-size:13px;line-height:1.65}.billing-preview button{margin:8px 10px 0 0}.billing-subscription .text-action{margin-left:0;margin-right:0}.billing-preview h4{font-size:15px;margin-top:0}@media(max-width:760px){.billing-management{padding:18px}.billing-current{flex-direction:column}.billing-change-fields{display:grid;grid-template-columns:1fr}.billing-current button{max-width:100%}}

.purchase-promo{margin:18px 0;border:1px solid #3d5032;border-radius:12px;background:#151e13;overflow:hidden}.purchase-promo summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:12px 14px;cursor:pointer;color:#d9edc2;font-size:13px;font-weight:600;list-style:none}.purchase-promo summary::-webkit-details-marker{display:none}.purchase-promo summary>span{display:flex;align-items:center}.purchase-promo summary small{font-size:12px;font-weight:400;color:#b3c4a1}.purchase-promo summary small:after{content:' +';font-size:15px}.purchase-promo[open] summary small:after{content:' −'}.purchase-promo summary:focus-visible{outline:2px solid #b5e876;outline-offset:-3px}.purchase-promo>div{padding:0 14px 12px}.purchase-promo p{margin:0 0 10px;color:#bac7b0;font-size:13px;line-height:1.6}.purchase-promo p:last-child{margin-bottom:0}

.signin-logo{display:block;width:120px;max-width:100%;height:auto;margin:0 0 22px}.signin-alternative{margin-top:24px;padding-top:18px;border-top:1px solid #34412c}.signin-alternative p{margin:0 0 10px}.signin-alternative small{display:block;margin-top:10px;color:#b7c3ae;font-size:13px;line-height:1.5}.signin-switch{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;margin-top:16px;padding:12px 16px;border:1px solid #7ba54f;border-radius:12px;background:#1c2915;color:#d7efba;font:inherit;font-size:15px;font-weight:600;cursor:pointer;touch-action:manipulation}.signin-switch:focus{outline:2px solid #b5e876;outline-offset:3px}.signin-switch:disabled{opacity:.55;cursor:wait}

.session-notice{margin:16px 0;padding:14px 18px;border:1px solid #697345;border-radius:12px;background:#232b18;color:#e2edc6;font-size:13px;line-height:1.5}.drive-session-notice{position:fixed;z-index:85;top:12px;left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:650px;box-sizing:border-box}

/* Subscription management is reachable from account, settings and shop. */
.subscription-manage-link{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:12px;margin:16px 0;border:1px solid #88b748;border-radius:10px;color:#d1edb9;background:#23341a;text-decoration:none;font-size:13px;line-height:1.5}
.subscription-manage-link .icon{flex-shrink:0;margin-left:12px}
.billing-management .billing-downgrade-action,.billing-management .billing-cancel-action{display:block;width:100%;min-height:48px;text-align:left;margin-top:16px;white-space:normal}
.billing-management .billing-cancel-action{border-color:#ac8075;color:#f2cbc2;background:#30221e}
.billing-management:focus-visible,.subscription-manage-link:focus-visible{outline:2px solid #c4ed82;outline-offset:4px}

/* The free browser self-check, and its receipt, back on the shop page. Sized
   from the spacing and control tokens rather than the literals it carried
   before, so it follows the density the rest of the page is on. */
.shop-browser-check{margin:var(--s6,20px) 0;padding:var(--card-pad,18px);border:1px solid #526c38;border-radius:var(--card-r,14px);background:#1d2818;color:#d1edb9}
.shop-browser-check p{font-size:var(--t-body,13px);line-height:1.6;color:#c0cbb6}
.shop-browser-check a{display:inline-flex;align-items:center;min-height:var(--ctl-h-min,48px);padding:var(--s4,12px);color:#d1edb9;border:1px solid #88b748;border-radius:var(--ctl-r,10px)}
.billing-account-deletion{margin-top:24px;padding-top:24px;border-top:1px solid #3c4e30}.billing-account-deletion h3{margin:0 0 10px;font-size:15px}.billing-account-deletion p{color:#b3c3a5;font-size:13px;line-height:1.65}



.analytics-choice{display:flex;align-items:center;min-height:48px;cursor:pointer}.analytics-choice input{width:24px;height:24px;flex:none}

/* Guide pages end with one call to action, styled like the site button. */
.information-cta{margin:28px 0 8px}
.information-cta .primary{display:inline-block;min-height:44px;padding:12px 20px;border-radius:12px;text-decoration:none;font-size:15px}

/* The car's Chromium has no flex gap, so every flex row on these pages spaces
   itself with margins, mirrored for right-to-left. Grid rows keep their gap. */
.welcome-page .icon:first-child,.shop-page .icon:first-child,.information-page .icon:first-child,
.launch-note>.icon:first-child,.purchase-inclusions>.icon:first-child,.purchase-promo summary>span>.icon:first-child{margin-right:var(--s3)}
.welcome-page .icon:last-child,.shop-page .icon:last-child,.information-page .icon:last-child{margin-left:var(--s3)}
[dir="rtl"] .welcome-page .icon:first-child,[dir="rtl"] .shop-page .icon:first-child,[dir="rtl"] .information-page .icon:first-child,
[dir="rtl"] .launch-note>.icon:first-child,[dir="rtl"] .purchase-inclusions>.icon:first-child{margin-right:0;margin-left:var(--s3)}
[dir="rtl"] .welcome-page .icon:last-child,[dir="rtl"] .shop-page .icon:last-child,[dir="rtl"] .information-page .icon:last-child{margin-left:0;margin-right:var(--s3)}
.status-dot{margin-right:var(--s3)}
[dir="rtl"] .status-dot{margin-right:0;margin-left:var(--s3)}
.home-plan-top>*+*,.signin-switch>*+*,.purchase-promo summary>span>*+*{margin-left:var(--s3)}
.welcome-intro-nav>*+*,.phone-checkout-btn>*+*,.pro-offer .subscription-link>*+*,.purchase-promo summary>*+*,.launch-recovery button>*+*{margin-left:var(--s4)}
.information-header>*+*,.shop-header>*+*,.cookie-category>*+*,.home-subscription-benefits>svg+*{margin-left:var(--s5)}
.footer-company-details>*+*,.home-final-cta>*+*,.home-footer>*+*,.billing-current>*+*{margin-left:var(--s6)}
[dir="rtl"] .home-plan-top>*+*,[dir="rtl"] .signin-switch>*+*,[dir="rtl"] .purchase-promo summary>span>*+*{margin-left:0;margin-right:var(--s3)}
[dir="rtl"] .welcome-intro-nav>*+*,[dir="rtl"] .phone-checkout-btn>*+*,[dir="rtl"] .pro-offer .subscription-link>*+*,
[dir="rtl"] .purchase-promo summary>*+*,[dir="rtl"] .launch-recovery button>*+*{margin-left:0;margin-right:var(--s4)}
[dir="rtl"] .information-header>*+*,[dir="rtl"] .shop-header>*+*,[dir="rtl"] .cookie-category>*+*,[dir="rtl"] .home-subscription-benefits>svg+*{margin-left:0;margin-right:var(--s5)}
[dir="rtl"] .footer-company-details>*+*,[dir="rtl"] .home-final-cta>*+*,[dir="rtl"] .home-footer>*+*,[dir="rtl"] .billing-current>*+*{margin-left:0;margin-right:var(--s6)}
.garage-starters>*+*,.group-footnote>*+*,.billing-change-fields label>*+*{margin-top:var(--s3)}
.home-plan-saving>*+*{margin-top:var(--s2)}
.launch-recovery>*+*{margin-top:var(--s6)}
.home-section-nav>a,.addon-group-tabs>button,.policy-related>a{margin:0 var(--s3) var(--s3) 0}
.shop-header nav>*,.home-feature-actions>*,.billing-change-fields>*{margin:0 var(--s5) var(--s3) 0}
[dir="rtl"] .home-section-nav>a,[dir="rtl"] .addon-group-tabs>button,[dir="rtl"] .policy-related>a{margin:0 0 var(--s3) var(--s3)}
[dir="rtl"] .shop-header nav>*,[dir="rtl"] .home-feature-actions>*,[dir="rtl"] .billing-change-fields>*{margin:0 0 var(--s3) var(--s5)}
html[data-tesla="true"] .disclaimer>*{margin-right:var(--s2)}
.analytics-choice>input{margin-right:var(--s4)}
[dir="rtl"] .analytics-choice>input{margin-right:0;margin-left:var(--s4)}

/* responsive.css */
/* Shared viewport sizing also applies before the driving runtime starts. */
:root{--app-height:100vh}
@supports(height:100dvh){:root{--app-height:100dvh}}
#app{min-height:0;height:var(--app-height,100vh)}
.welcome-page,.shop-page,.information-page{height:var(--app-height,100vh);min-height:0;overflow-y:auto}
.panel,html[data-tesla="true"] .panel{max-width:100vw;height:var(--app-height,100vh);overflow-y:auto;overscroll-behavior:contain}
.commerce-layer{max-height:var(--app-height,100vh);overflow-y:auto}
.commerce-modal,.cookie-settings-dialog{max-height:calc(var(--app-height,100vh) - 28px);overscroll-behavior:contain}
.setup-gate{overflow-y:auto;max-height:var(--app-height,100vh)}
.setup-gate>section{min-width:0;max-width:100%;margin:auto}
.panel .settings-tabs button{min-width:0;white-space:normal;overflow-wrap:anywhere}
.panel .section-label{flex-wrap:wrap}
.panel .section-label>*{min-width:0;overflow-wrap:anywhere}
.panel .section-label{flex-wrap:wrap}
.login-form input,.login-form button,.shop-header nav,.shop-progress,.subscription-heading{min-width:0}
.shop-progress,.shop-header nav,.subscription-heading{flex-wrap:wrap}
.login-form label,.order-summary>div,.subscription-summary,.billing-management{overflow-wrap:anywhere}
.phone-handoff-layout>*{min-width:0}

@media(max-width:850px){
  .topbar,html[data-tesla="true"] .topbar{grid-template-columns:minmax(0,1fr) auto}
  .topbar .session-pill{display:none}
  .topbar .brand{min-width:0}
}
@media(max-width:480px){
  .panel,html[data-tesla="true"] .panel{width:100%;padding-left:var(--s5);padding-right:var(--s5)}
  .panel .settings-tabs,html[data-tesla="true"] .panel .settings-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .panel .settings-tabs button,html[data-tesla="true"] .panel .settings-tabs button{min-height:54px;font-size:12px;padding:8px 4px}
  .panel .settings-tabs button span{max-width:100%}
  .commerce-modal,html[data-tesla="true"] .commerce-modal{padding:var(--s5)}
  .commerce-modal h2{font-size:var(--t-head);padding-right:var(--s7);overflow-wrap:anywhere}
  .subscription-option,.addon-option,.shop-layout .addon-option{grid-template-columns:22px minmax(0,1fr)}
  .subscription-option>b,.addon-option>b{grid-column:2;text-align:start;white-space:normal}
  .shop-shell{padding-left:var(--s5);padding-right:var(--s5)}
  .shop-login,.phone-handoff{padding:18px}
  .topbar .experience-switch{max-width:72px;white-space:normal;text-align:center}
  .topbar .brand-logo{width:52px;max-width:100%}
}
/* Small viewports carry the brand icon, not the wordmark. A 60–110px lockup
   crowds a phone toolbar that also has to hold the language button and the
   action row, and a cropped wordmark is neither readable nor recognisable. The
   W mark is the same glyph as the favicon and home-screen icon, so it is what
   a phone already knows the product by. Both images are in the DOM with the
   same accessible name; only the visible one is announced. The selectors carry
   the tag so they outrank the per-surface sizing (`.shop-header svg`,
   the density layer) without an !important. */
svg.brand-icon{display:none;width:37px;height:22px;max-width:none;flex:none}
/* Only where the compact W is actually mounted beside the wordmark — the
   toolbars and the shop header. A wordmark standing alone (welcome hero,
   information header, footer) has nothing to swap to and stays. */
@media(max-width:700px){
  .topbar .brand svg.brand-logo,.shop-brand svg.brand-logo{display:none}
  .topbar .brand svg.brand-icon,.shop-brand svg.brand-icon{display:block;width:37px;height:22px}
}
html[data-phone="true"] .topbar .brand svg.brand-logo,html[data-phone="true"] .shop-brand svg.brand-logo{display:none}
html[data-phone="true"] .topbar .brand svg.brand-icon,html[data-phone="true"] .shop-brand svg.brand-icon{display:block;width:37px;height:22px}
@media(max-width:700px){
  .information-layout{display:block}
  .information-sidebar{position:static;margin-bottom:24px}
  .information-sidebar nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1000px){
  .phone-handoff-layout{grid-template-columns:minmax(0,1fr);gap:24px}
}

/* Short landscape windows must fit the real viewport, including browser chrome.
   Keep the controls usable while secondary scene decoration gives way. */
@media(max-height:500px) and (orientation:landscape){
  .topbar svg.brand-logo{display:none}
  .topbar svg.brand-icon{display:block;width:33px;height:20px}
  .topbar,html[data-tesla="true"] .topbar{top:8px;left:12px;right:12px;height:54px;padding:0 10px}
  .topbar .icon-btn,html[data-tesla="true"] .topbar .icon-btn,
  .account-btn,html[data-tesla="true"] .account-btn{width:var(--ctl-h-min);height:var(--ctl-h-min)}
  .route-ribbon,html[data-tesla="true"] .route-ribbon{top:70px;left:12px;min-width:0;max-width:calc(100vw - 150px);transform:none}
  .cinema-title,.world-reel,.scene-status,.drive-dynamics,.render-mode-badge,.turn-card{display:none}
  .drive-readout,html[data-tesla="true"] .drive-readout{left:12px;right:124px;bottom:86px;min-height:72px;padding:var(--row-pad);grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);transform:none}
  .engine-meter{display:none}
  .drive-readout .speed strong,html[data-tesla="true"] .drive-readout .speed strong{font-size:20px}
  .control-dock,html[data-tesla="true"] .control-dock{left:12px;bottom:10px;width:calc(100vw - 136px);height:64px;transform:none;grid-template-columns:minmax(0,1fr)}
  .control-dock .divider,.control-dock .destination,.control-dock .battery{display:none}
  .horn-btn,html[data-tesla="true"] .horn-btn,.nitro-btn,html[data-tesla="true"] .nitro-btn{display:grid;right:12px;width:96px;height:62px}
  .horn-btn,html[data-tesla="true"] .horn-btn{bottom:80px}
  .nitro-btn,html[data-tesla="true"] .nitro-btn{bottom:10px}
  .panel,html[data-tesla="true"] .panel{padding-top:12px}
  .panel-head{padding-top:0;padding-bottom:12px}
  .panel .settings-tabs,html[data-tesla="true"] .panel .settings-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:var(--s2) 0;margin-bottom:var(--s3)}
  .panel .settings-tabs>button+button{margin-left:var(--s2)}
  [dir="rtl"] .panel .settings-tabs>button+button{margin-left:0;margin-right:var(--s2)}
  .panel .settings-tabs button,html[data-tesla="true"] .panel .settings-tabs button{flex:0 0 auto;min-width:86px;min-height:var(--ctl-h-min);padding:var(--row-pad);font-size:var(--t-ctl)}
  .purchase-footer{position:static;margin-bottom:0}
  .setup-gate{padding:12px;place-items:start center}
}

/* Keep runtime-owned metric nodes mounted while React owns access prompts. */
.metrics-locked > :not(.metrics-placeholder){display:none!important}
.metrics-placeholder{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:var(--ctl-h-min);max-width:100%;padding:5px 10px;border:1px solid #45d8c44d;border-radius:10px;background:#45d8c410;color:#d5f9f3;text-align:start;cursor:pointer;white-space:normal}
.metrics-placeholder small{font-size:var(--t-small);line-height:1.2;color:var(--text-2)}
.metrics-placeholder strong{font-size:var(--t-ctl);line-height:1.25;font-weight:var(--w-med)}
.metrics-placeholder:hover{background:#45d8c426}
.metrics-placeholder:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.route-ribbon.metrics-locked{min-width:0;transform:none}
.destination.metrics-locked,.battery.metrics-locked{min-width:0}
.control-dock .metrics-placeholder{width:100%}

/* Locked previews: muted sample metrics beneath a crisp unlock action. */
.metrics-preview{position:relative;isolation:isolate;overflow:hidden;min-height:var(--ctl-h-tile);padding:var(--row-pad);gap:7px;border-color:rgba(131,219,199,.22);background:linear-gradient(115deg,#162a29 0%,#112020 58%,#172e2c 100%);box-shadow:inset 0 1px 0 rgba(214,255,245,.05);transition:border-color .18s ease,background .18s ease}
.metrics-preview:hover{border-color:rgba(131,219,199,.6);background:linear-gradient(115deg,#1c3733,#142825)}
/* Label and tag share one grid row, so a long label (or a long translation
   of PREVIEW) ellipsises instead of printing on top of its neighbour. */
.metrics-preview{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;column-gap:var(--s2);row-gap:7px}
.metrics-preview-label{grid-column:1;grid-row:1;position:relative;z-index:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--t-micro,10px);font-weight:600;line-height:1.1;letter-spacing:.06em;text-transform:uppercase;color:#c2d3d0}
.metrics-preview-tag{grid-column:2;grid-row:1;position:relative;right:auto;top:auto;z-index:1;justify-self:end;align-self:center;white-space:nowrap;font-size:var(--t-micro,10px);line-height:1;letter-spacing:.06em;color:#839d97}
.metrics-preview .metrics-unlock{grid-column:1/-1;grid-row:2;justify-self:start}
.metrics-preview-art{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;opacity:.22;color:#b2e8d9;-webkit-mask-image:linear-gradient(90deg,transparent 10%,#000 75%);mask-image:linear-gradient(90deg,transparent 10%,#000 75%)}
.metrics-preview-art>svg{width:100%;height:100%}.preview-streets{stroke:#9fc0b8;stroke-width:1}.preview-route{stroke:#71f2c9;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.metrics-preview-art circle{fill:#baffeb;stroke:#71f2c9;stroke-width:4}
.preview-number{position:absolute;right:var(--s3);top:19px;font-size:20px;font-weight:600;line-height:1;letter-spacing:-.02em;white-space:nowrap}.preview-number>span{font-size:12px;letter-spacing:0}.preview-distance{position:absolute;right:var(--s3);bottom:var(--s1);font-size:11px;letter-spacing:0}
.preview-battery{position:absolute;right:var(--s3);bottom:var(--s1);display:flex}.preview-battery i{width:5px;height:3px;background:currentColor;border-radius:1px}.preview-battery i+i{margin-left:2px}.preview-battery i:nth-last-child(-n+3){opacity:.2}
.metrics-unlock{position:relative;z-index:1;display:inline-flex;align-items:center;align-self:flex-start;min-height:var(--s7);padding:var(--s1) var(--s3);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:rgba(29,56,46,.92);color:#dcf9e6;font-size:11px;font-weight:600;line-height:1;box-shadow:0 2px 6px #0002}
.metrics-preview--map{width:230px;min-height:64px}.metrics-preview--map .metrics-preview-art{opacity:.35}
/* The narrow battery tile keeps label + value + action; the PREVIEW badge is
   redundant beside the lock pill and the bar repeats the number. */
.metrics-preview--battery .metrics-preview-tag,.metrics-preview--battery .preview-battery{display:none}
.metrics-preview--battery .metrics-preview-label{font-size:11px}
.metrics-preview--battery .preview-number{top:var(--s3);font-size:15px}
.metrics-preview--battery .metrics-unlock{padding-left:var(--s1);padding-right:var(--s1)}
@media(max-width:600px){.metrics-preview--map{width:190px;min-height:58px}
 /* The narrow map tile gives its label the whole row: the lock pill under it
    already says the metrics are a preview, so the badge only cost letters. */
 .metrics-preview--map .metrics-preview-tag{display:none}}
@media(prefers-reduced-motion:reduce){.metrics-preview{transition:none}}

/* Demo inputs occupy their own area above the instruments. */
.demo-mode .demo-driving{top:180px;bottom:auto;left:20px;max-width:calc(100vw - 40px)}
.demo-driving-active .world-reel{visibility:hidden;pointer-events:none}
@media(max-width:760px){
  .demo-mode .demo-driving{top:156px;left:12px;max-width:calc(100vw - 24px);gap:6px}
  .demo-mode .demo-driving>button{min-height:var(--ctl-h-min);padding:var(--row-pad)}
  .demo-mode .demo-touch-controls button{min-width:48px;min-height:48px;padding:6px 10px}
  .demo-mode .demo-touch-controls span{font-size:20px;line-height:20px}
}
@media(max-height:650px) and (max-width:760px){
  .demo-mode .route-ribbon{display:none}
  .demo-mode .demo-driving{top:78px}
}
@media(max-height:500px) and (orientation:landscape){
  .demo-mode .route-ribbon{display:none}
  .demo-mode .demo-driving{top:70px;left:12px;right:124px;max-width:none;display:flex;align-items:stretch}
  .demo-mode .demo-driving>*+*{margin-left:var(--s3)}
  .demo-mode .demo-driving>button{min-width:0;min-height:48px;max-width:150px;padding:6px 10px;font-size:11px}
  .demo-mode .demo-touch-controls{min-width:0}
  .demo-mode .demo-touch-controls button{min-width:48px;min-height:48px;padding:4px 8px}
  .demo-mode .demo-touch-controls span{font-size:15px;line-height:18px}
  .demo-mode .demo-touch-controls small{font-size:11px}
}
@media(max-height:500px){
  #app.demo-mode .drive-readout{min-height:72px;padding-top:var(--s2);padding-bottom:var(--s2)}
  #app.demo-mode .drive-readout .speed strong{font-size:20px}
  #app.demo-mode .gear .compact-drive{min-height:var(--ctl-h-min);padding-top:var(--s1);padding-bottom:var(--s1);font-size:var(--n-sm)}
  #app.demo-mode .drive-label{display:none}
}

/* art-direction.css */
/* Driwe: graphite surfaces, electric lime, and a clear instrument hierarchy.
   Presentation only; responsive layouts and driving visibility stay intact. */
:root {
  --design-ink: #0c1012;
  --design-panel: #141a1d;
  --design-raised: #1b2326;
  --design-line: #303a3e;
  --design-copy: #eef2ed;
  --design-muted: #a9b5b8;
  --design-lime: #b3ed59;
  --ui-paper: var(--design-copy);
  --ui-muted: var(--design-muted);
  --ui-stroke: rgba(206,222,225,.15);
}
body { -webkit-font-smoothing: antialiased; }
button, input, select { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.welcome-page,.shop-page,.information-page { background: var(--design-ink); color: var(--design-copy); }

/* The road illustration and generous type establish the product's mood. */
.welcome-visual { background: #121c20; }
.welcome-visual:after { background: linear-gradient(180deg,#081116b8,transparent 64%,#08111666); }
.welcome-editorial h1 { font-weight: var(--w-med); line-height: 26px; letter-spacing: var(--ls-tight); max-width: 610px; }
.welcome-editorial>span { max-width: 320px; line-height: 1.8; }
.welcome-page .welcome-editorial>p,
.welcome-page .welcome-eyebrow { color: var(--design-lime); letter-spacing:.06em; font-weight:700; }
.welcome-scene-note { padding: var(--row-pad); border: 1px solid var(--card-line); border-radius: 99px; background: #0c151bb3; }
.welcome-intro h2 { font-weight:600; letter-spacing:-.02em; }
.welcome-intro>p { line-height: 1.75; color: var(--design-muted); }
.welcome-page .experience-card { border-color: var(--card-line); background: var(--card-bg); border-radius: var(--card-r); padding: var(--card-pad); box-shadow: none; }
.welcome-page .experience-card strong { font-weight:600; letter-spacing:-.02em; }
.welcome-page .experience-card p { color: #b5c0c2; }
.welcome-page .entry-icon { background: #242f29; color: var(--design-lime)!important; border: 1px solid var(--card-line); border-radius: 50%; }
.welcome-page .drive-entry { background: linear-gradient(120deg,#202a22,#151e1e); border-color: #76924c; }
.welcome-page .drive-entry .entry-icon { background: var(--design-lime); color: #1c2813!important; }
.welcome-page .entry-action { color: var(--design-lime); padding-top: var(--s3); border-top: 1px solid var(--card-line); }
.welcome-page .entry-overline { color: #a4b0b3; letter-spacing:.06em; }
.welcome-page .welcome-footnote p { color: #b6c0bf; }
.welcome-page .welcome-footnote p span { color: #92a1a4; }
.home-section-nav { background: #111719; border-color: var(--design-line); }
.home-section-nav a { color: #c1cbcc; border-radius: 8px; }
.home-section-heading h2 { font-weight:600; letter-spacing:-.02em; }
.home-section-heading p { color: var(--design-muted); line-height: 1.8; max-width: 650px; }
.welcome-page .home-plan,
.welcome-page .home-addon,
.home-features article,
.home-steps li { background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--card-r); box-shadow: none; }
.welcome-page .home-plan.recommended { background: linear-gradient(150deg,#263023,#141c1c); border-color: #819f50; }
.home-features article,.home-steps li { padding: var(--card-pad); }
.home-price { font-variant-numeric: tabular-nums; letter-spacing:-.02em; }
.home-price span { letter-spacing: 0; }
.home-plan h3,.home-features h3,.home-steps h3 { letter-spacing:-.02em; font-weight:600; }
.home-plan p,.home-features p,.home-steps p { color: var(--design-muted); line-height: 1.75; }
.welcome-page .home-plan-link { min-height: var(--ctl-h); border-color: var(--ctl-line); border-radius: var(--ctl-r); }
.welcome-page .recommended .home-plan-link,
.welcome-page .home-final-cta .home-plan-link { background: var(--design-lime); border-color: var(--design-lime); }
.welcome-page .home-final-cta { background: var(--card-bg-raise); border: 1px solid var(--card-line); border-radius: var(--card-r); }
.welcome-page .home-faq details { border-color: var(--design-line); }
.home-faq summary { padding-top: var(--s4); padding-bottom: var(--s4); font-weight: var(--w-med); }
.home-faq details[open] summary { color: var(--design-lime); }
.home-faq details p { max-width: 800px; color: #b3c0c3; line-height: 1.85; }

/* A quiet cockpit: the scene provides color, instruments provide contrast. */
.topbar,html[data-tesla="true"] .topbar { background: #11181bf2; border-color: #ffffff21; box-shadow: 0 8px 28px #00000024; }
.topbar .purchase-cta { background: var(--design-lime); color: #17200f; border-color: var(--design-lime); border-radius: 11px; }
.topbar .icon-btn,.account-btn { background: #20292d; color: #e1e9e7; border-color: #384348; }
.session-pill { background: #1c2526; border-color: #36423e; }
.session-pill em { color: #acbcb6; }
.route-ribbon,.control-dock,.drive-readout,.turn-card { background: #10181bed; border-color: var(--card-line); box-shadow: var(--float-shadow); }
.drive-readout .speed>strong { font-weight:400; font-variant-numeric: tabular-nums; letter-spacing:-.02em; }
.meter-label strong { font-variant-numeric: tabular-nums; font-weight:600; }
.control-dock small,.meter-label span,.meter-scale { color: #a7b6ba; }
.control-dock .sound-icon { border-radius: 12px; background: #25332b; color: var(--design-lime); }
.compact-drive { background: #1d2928; border-color: #556940; color: var(--design-lime); }
.horn-btn,.nitro-btn { background: #172024; border-color: #354347; box-shadow: 0 8px 24px #0002; }
.demo-driving>button { background: #19231eeF; color: var(--design-lime); border-color: #657b48; font-size: 13px; }
.demo-driving>button[aria-pressed="true"] { background: var(--design-lime); color: #17200f; }
.demo-touch-controls button { background: #172125f5; border-color: #536164; }
.demo-touch-controls small { color: #c0cccd; }

/* Settings use the same surfaces and selection language as the shop. */
.panel,html[data-tesla="true"] .panel { background: #11181b; }
.panel-head,html[data-tesla="true"] .panel-head,
.panel .settings-tabs,html[data-tesla="true"] .panel .settings-tabs { background: #11181b; }
.panel-head h1 { font-weight:600; letter-spacing:-.02em; }
.panel-head p { color: var(--design-muted); }
.panel .settings-tabs button { background: var(--ctl-bg); border-color: var(--ctl-line); color: #bac7c9; border-radius: var(--ctl-r); }
.panel .settings-tabs button.active { background: var(--sel-line); border-color: var(--sel-line); color: #182210; box-shadow: none; }
.panel .section-label { color: #dbe5e3; letter-spacing:.06em; }
.panel .section-label small { color: #a3b4b9; }
.panel .profile,.panel .environments button,.panel .choice-grid button,
.panel .drive-side button,.mix-control,.country-list details { background: var(--card-bg); border-color: var(--card-line); }
.panel .profile.active,.panel .environments button.active,
.panel .choice-grid button.active,.panel .drive-side button.active { background: var(--sel-bg); border-color: var(--sel-line); box-shadow: none; }
.panel .profile small,.panel .environments small,.panel .setting-hint { color: #acbabd; }

.shop-header,.information-header { border-color: var(--design-line); }
.shop-shell>h1,.shop-heading h1 { font-weight:600; letter-spacing:-.02em; }
.subscription-option,.addon-option,.shop-layout .subscription-option,.shop-layout .addon-option,.subscription-summary,
.shop-layout .purchase-review,.shop-login,.commerce-modal,.cookie-settings-dialog { background: var(--card-bg); border-color: var(--card-line); border-radius: var(--card-r); }
.subscription-option.selected,.addon-option.selected,.shop-layout .subscription-option.selected,.shop-layout .addon-option.selected { background: var(--sel-bg); border-color: var(--sel-line); }
.checkout-btn,.shop-layout .checkout-btn,.login-form button[type=submit] { background: var(--design-lime); color: #17200f; border-radius: var(--ctl-r); }
.purchase-footer { background: #111a1d; border-color: #344146; }
.billing-toggle,.welcome-page .home-billing { background: var(--card-bg); border-color: var(--card-line); border-radius: var(--card-r); padding: var(--s1); }
.billing-toggle button.active,.welcome-page .home-billing button.active { background: var(--sel-bg); color: #eaf5df; border-radius: var(--ctl-r); }
.commerce-copy,.subscription-option small,.addon-option small { color: #b4c1c4; }
.commerce-kicker,.recommendation { color: var(--design-lime); }
.login-form input { background: var(--ctl-bg); border-color: var(--ctl-line); border-radius: var(--ctl-r); color: var(--design-copy); }
.information-article h1 { font-weight:600; letter-spacing:-.02em; }
.information-article p { line-height: 1.85; }
.information-contents { border-color: var(--card-line); background: var(--card-bg); border-radius: var(--card-r); }
.site-footer { border-color: #303b3f; }
.footer-company-details { border-color: #303b3f; }
.footer-navigation nav>a,.footer-navigation nav>button { color: #adbbbe; }
.launch-loader.refined-loader { background: #101719; }
.launch-eyebrow { color: var(--design-lime); }
.launch-progress>span { background: var(--design-lime); }

@media(hover:hover) {
  .welcome-page .experience-card:hover { background: #202b2b; border-color: #9bb975; }
  .home-section-nav a:hover { background: #25302a; color: var(--design-lime); }
  .panel .profile:hover,.panel .choice-grid button:hover { border-color: #72817a; }
  .topbar .icon-btn:hover,.account-btn:hover { background: #2b383c; }
  .checkout-btn:hover,.topbar .purchase-cta:hover { background: #c4f67c; }
}
@media(min-width:1100px) and (min-height:650px) {
  .welcome-content { padding: 64px 56px; }
  .welcome-editorial { padding-top: 170px; }
  .welcome-editorial h1 { font-size: var(--t-display); }
  .home-details { padding-top: var(--s7); padding-bottom: var(--s7); }
}
@media(max-width:640px) {
  .welcome-page .experience-card { padding: var(--card-pad); }


  .home-faq summary { padding-top: var(--s4); padding-bottom: var(--s4); }
}
@media(prefers-reduced-motion:reduce) {
  .welcome-page .experience-card,.home-plan-link,.topbar button { transition: none; }
}

/* product-experience.css */
/* Product discovery uses existing scrolling panels, keeping the cockpit clear. */
.welcome-page .demo-entry{background:linear-gradient(120deg,#263523,#151e1e);border-color:#9bc363}
.welcome-page .demo-entry .entry-icon{background:var(--design-lime);color:#17200f!important}
.welcome-page .drive-entry{background:#151c1f;border-color:#354348}
.welcome-page .drive-entry .entry-icon{background:#242f29;color:var(--design-lime)!important}
.resume-drive{margin:0 0 16px;display:flex;justify-content:space-between;background:#243420;color:#dbefcc}
.home-demo .home-plan-link{display:flex;justify-content:space-between;margin-top:18px}
.plan-exclusion{color:#d3e3bf!important;font-size:13px;line-height:1.6}
.collection-browser{margin:24px 0;border:1px solid #38474b;border-radius:14px;padding:0 16px}
.collection-browser>summary{min-height:54px;padding:16px 0;cursor:pointer;font-weight:600;color:#dfebd5}
.experience-entry{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.experience-entry button,.experience-library button,.compatibility-actions button,.compatibility-steps button{min-height:48px;padding:10px 14px;border:1px solid #536646;border-radius:10px;background:#202e24;color:#e4efd9;font-size:13px}
.experience-library{padding:20px 0;border-bottom:1px solid #374247}
.experience-library h3{font-size:20px;margin:16px 0 10px}
.experience-library p,.experience-library small{font-size:13px;line-height:1.6;color:#b3c2c3}
.experience-presets{display:grid;gap:10px}
.experience-presets button{text-align:start;display:grid;gap:6px}
.experience-presets strong{font-size:15px}
.favorite-save{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:8px}
.favorite-save input{min-width:0;min-height:48px;background:#101a1e;border:1px solid #526267;border-radius:10px;padding:10px;color:white}
.favorite-list{list-style:none;padding:0;display:grid;gap:8px}
.favorite-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.favorite-list button{overflow-wrap:anywhere;text-align:start}
.compatibility-steps{padding:0;list-style:none;display:grid;gap:16px}
.compatibility-steps li{border:1px solid #3b4d4e;border-radius:12px;padding:16px}
.compatibility-steps strong{display:block;margin-bottom:10px}
.compatibility-steps p{font-size:13px;line-height:1.6;color:#b4c4c6}
.compatibility-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.compatibility-actions button:last-child{grid-column:1/-1}
.compatibility-steps button[aria-pressed=true]{background:#b3ed59;color:#15200e}
.upgrade-item-preview{display:grid;place-items:center;gap:16px;min-height:130px;padding:20px;border-radius:16px;background:#223027;color:#c7ef99}
.preview-price{font-size:20px;font-variant-numeric:tabular-nums}
.commerce-modal .subscription-link{min-height:48px;margin-top:10px}
.home-compatibility>p{color:#9faeb1;line-height:1.6;font-size:13px;margin-top:18px}
@media(max-width:480px){.favorite-save{grid-template-columns:1fr}.collection-browser{padding-left:var(--s3);padding-right:var(--s3)}}
.experience-library small{letter-spacing:normal;font-weight:400}
/* Entertainment tools share the settings panel and its scroll area. */
.tuning-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin:16px 0}
.tuning-control small{display:block;color:#aabdc1;font-size:12px;margin-top:4px}
.tuning-control input{grid-column:1/-1;width:100%;min-height:48px}
.garage-actions{display:flex;flex-wrap:wrap}
.garage-actions button,.showcase-tools button,.sound-preview button{min-height:48px;padding:10px 14px}
.favorite-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px}
.favorite-list button{min-width:48px;min-height:48px;overflow-wrap:anywhere}
.shared-setup{border:1px solid #536164;border-radius:12px;padding:12px;margin:16px 0}
.shared-setup input{width:100%;min-height:48px;margin:8px 0}
.setup-qr{max-width:220px;background:white;margin:12px auto;padding:8px}
.setup-qr svg{display:block;width:100%;height:auto}
.addon-product{min-width:0}.addon-product>.addon-option{height:auto;min-height:0}
.sound-preview{padding:4px 0 12px}.sound-preview small{display:block}
html[data-lightweight="true"] #road,html[data-lightweight="true"] #road2d{visibility:hidden!important}
html[data-lightweight="true"] .world-reel{visibility:hidden;pointer-events:none}
html[data-lightweight="true"] #app{background:#101a20}
@media(max-width:480px){.favorite-list li{grid-template-columns:1fr 1fr}.favorite-list li>button:first-child{grid-column:1/-1}}
/* A simulated drive must keep its shop entry reachable as the demo speeds up. */
html[data-moving="true"] .demo-mode .purchase-cta{opacity:1;pointer-events:auto;transform:none}


.showcase-tools button{background:#1b2529;border:1px solid #536164;border-radius:10px;color:#edf4f4}
.showcase-tools button+button{margin-left:8px}
.showcase-tools button[aria-pressed="true"]{background:#b3ed59;color:#15200e;border-color:#b3ed59}


/* Settings polish: flags, readable cards, and a quick-settings row. */
.quick-settings{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2);margin:var(--s3) 0}
.quick-settings button{display:grid;place-items:center;align-content:center;gap:var(--s1);min-height:var(--ctl-h-tile);padding:0 var(--s2);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:var(--text-2,#aab7bc);font:inherit;cursor:pointer}
.quick-settings button svg{width:20px;height:20px}
.quick-settings button small{font-size:var(--t-micro);font-weight:var(--w-med);letter-spacing:var(--ls-caps);text-transform:uppercase}
.quick-settings button b{font-size:var(--t-small);font-weight:var(--w-med);color:var(--text-1)}
.quick-settings button[aria-pressed="true"]{border-color:var(--sel-line);background:var(--sel-bg);color:var(--sel-line)}
.quick-settings button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.country-list summary>i.country-flag{width:38px;height:34px;padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0f171b;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.country-flag .flag{display:block;width:100%;height:100%}
.country-list summary strong{font-size:13px;letter-spacing:0}
.country-list summary small{font-size:11px;letter-spacing:0;text-transform:none;color:#9fb0b6}
.country-list summary>b{font-size:11px;font-weight:600;padding:4px 9px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#cfe0e6}
.region-grid button strong{font-size:12px;letter-spacing:0}
.region-grid button small{font-size:11px;letter-spacing:0;text-transform:none;line-height:1.35;color:#9fb0b6}
.region-grid .route-stops{font-size:11px;letter-spacing:0}
.environments strong{font-size:12px;letter-spacing:0}
.environments small{font-size:11px;letter-spacing:0;line-height:1.3;color:#9fb0b6}
/* Account button: a round avatar with the initial, a person icon when signed out. */
.account-btn{border-radius:50%;font-weight:700;font-size:15px;letter-spacing:0;background:linear-gradient(145deg,#1b262c,#0f1519);color:#eaf6f2;box-shadow:inset 0 0 0 1.5px rgba(108,227,196,.55),0 4px 14px rgba(0,0,0,.25)}
.account-btn .icon{width:18px;height:18px;opacity:.9}
/* Pedals carry icons; the label stays for screen readers. */
.demo-touch-controls button .icon{width:22px;height:22px}

/* Daily-drive layer: one-tap resume, bookmark nudge, trip summary, trip log. */
/* A card, not a wall: it sits in the free band under the ribbon and left of
   the navigation card (which hugs the right edge at 320 px wide), clear of the
   demo controls on the left, so every other control stays tappable; any other
   action, or twelve seconds, dismisses it. */
.resume-gate{position:absolute;z-index:60;top:160px;left:74px;right:calc(320px + 28px);display:flex;justify-content:flex-end;pointer-events:none}
.resume-gate>section{pointer-events:auto;width:min(340px,100%);padding:var(--s6);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);box-shadow:var(--dialog-shadow);text-align:center}
@media (max-width:559px){.resume-gate{top:140px;left:12px;right:12px}}
@media (max-height:760px){.resume-gate>section,.trip-card>section{padding:var(--s5)}}
@media (max-height:500px){.resume-gate{top:126px}.resume-gate .resume-setup{margin:0 0 var(--s3)}}
.resume-gate .commerce-kicker{margin:0 0 6px}
.resume-gate h2{margin:0 0 var(--s2);font-size:var(--t-head);line-height:20px;font-weight:var(--w-med);letter-spacing:var(--ls-tight)}
.resume-gate .resume-setup{margin:0 0 var(--s4);color:#9fb0b5;font-size:var(--t-body)}
.resume-gate .checkout-btn{width:100%;min-height:var(--ctl-h-lg);font-size:var(--t-ctl);display:inline-flex;align-items:center;justify-content:center}
.resume-gate .subscription-link{margin-top:6px;width:100%;justify-content:center}
.bookmark-nudge{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 86px);z-index:65;transform:translateX(-50%);width:min(520px,calc(100vw - 32px));display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s3);align-items:center;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);box-shadow:var(--float-shadow)}
.bookmark-nudge strong{display:block;font-size:13px}.bookmark-nudge p{margin:2px 0 0;font-size:12px;color:#9fb0b5}
.bookmark-nudge button{min-height:var(--ctl-h-min);padding:0 var(--s4);border-radius:var(--ctl-r);border:1px solid var(--ctl-line);background:transparent;color:#e6edf3;font-size:13px}
.bookmark-nudge button.primary{background:var(--ui-lime,#b7ee72);color:#0b1408;border-color:transparent;font-weight:600}
.trip-card{position:absolute;top:0;right:0;bottom:0;left:0;z-index:62;display:grid;place-items:center;padding:var(--s5);background:var(--scrim)}
.trip-card>section{width:min(560px,100%);padding:var(--s6);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);box-shadow:var(--dialog-shadow)}
.trip-card h2{margin:0 0 var(--s1);font-size:var(--t-head);line-height:20px;font-weight:var(--w-med);letter-spacing:var(--ls-tight)}
.trip-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s3);margin:var(--s4) 0}
.trip-stats div{padding:var(--card-pad);border-radius:var(--card-r);background:var(--card-bg-raise)}
.trip-stats small{display:block;font-size:var(--t-micro,10px);letter-spacing:.06em;text-transform:uppercase;color:#8fa0a5}
.trip-stats strong{display:block;margin-top:var(--s1);font-size:var(--n-sm);font-weight:var(--w-body);letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums}
.trip-stats strong em{font-style:normal;font-size:13px;color:#9fb0b5;margin-left:4px}
.trip-card .trip-note{margin:0 0 12px;font-size:13px;color:#9fb0b5}
.trip-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.trip-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);padding:var(--row-pad);border-radius:var(--ctl-r);background:var(--card-bg-raise);font-size:var(--t-ctl)}
.trip-list li small{color:#8fa0a5}
.trip-toggles label{display:flex;justify-content:space-between;align-items:center;min-height:48px}


/* Motion source tag, drive of the day, chapter line. */
.motion-tag{margin-left:8px;padding:2px 7px;border-radius:999px;font-size:var(--t-micro,10px);letter-spacing:.06em;text-transform:uppercase;color:#9fb0b5;border:1px solid #2f3d42;white-space:nowrap}
.motion-tag[data-source="pedal"]{color:#0b1408;background:var(--ui-lime,#b7ee72);border-color:transparent}
.motion-tag[data-source="tesla"]{color:var(--ui-teal,#45d8c4);border-color:#2b5c56}
.today-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--card-pad);border-radius:var(--card-r);background:var(--card-bg);border:1px solid var(--card-line)}
.today-card strong{display:block;font-size:15px}.today-card span{font-size:12px;color:#9fb0b5}
.today-card button{min-height:var(--ctl-h-min);padding:0 var(--s5);border-radius:var(--ctl-r);border:1px solid var(--ctl-line);background:transparent;color:#e6edf3;font-size:13px}
.today-card button.primary{background:var(--ui-lime,#b7ee72);color:#0b1408;border-color:transparent;font-weight:600}
.resume-gate .today-line{display:grid;width:100%;margin:10px 0 0;padding:8px 12px;border-radius:12px;border:1px solid #2d3a3e;background:#141d20;color:#e6edf3;text-align:start;min-height:48px;cursor:pointer}
.resume-gate .today-line small{font-size:var(--t-micro,10px);letter-spacing:.06em;color:var(--ui-lime,#b7ee72)}.resume-gate .today-line span{font-size:13px}
.trip-chapter{margin:0 0 8px;font-size:13px;color:var(--ui-lime,#b7ee72)}

/* Passenger mode (Cybercab): no driver controls, no overspeed nag. */
html[data-passenger="true"] .drive-selector,html[data-passenger="true"] .speed-warning{display:none}
.passenger-badge{margin-left:8px;padding:2px 8px;border-radius:999px;font-size:var(--t-micro,10px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#0b1408;background:var(--ui-lime,#b7ee72)}
.seat-choices{grid-template-columns:repeat(3,minmax(0,1fr))}
.seat-choices button{display:grid;justify-items:center;gap:6px;min-height:64px;font-size:12px}

/* Sound trials: the countdown beside the sound tile, and the try button in the preview. */
.trial-pill{display:inline-flex;align-items:center;margin-left:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:0;color:#0b1408;background:var(--ui-lime,#b7ee72);white-space:nowrap;font-variant-numeric:tabular-nums}
.trial-btn{margin-top:10px;background:transparent;border:1px solid var(--ui-lime,#b7ee72);color:var(--ui-lime,#b7ee72)}
.trial-used{margin:10px 0 0;font-size:13px;color:#9fb0b5}
@media (max-height:800px){.trial-pill{font-size:11px;padding:3px 8px}}
/* Long subtitles in the newer sections wrap on narrow screens instead of widening the studio (320 px phones). */
[data-section="seat"] .section-label small,[data-section="trips"] .section-label small,[data-section="today"] .section-label small,[data-section="response"] .section-label small{white-space:normal;line-height:1.35}

/* RAW comparisons stay touchable and wrap at the car's compact width. */
.sound-preview{display:flex;flex-wrap:wrap}
.sound-preview small{flex-basis:100%}
.raw-v12-offer{padding:12px;border:1px solid var(--line, #444);border-radius:12px;margin-bottom:12px;min-width:0}
.raw-v12-offer h4,.raw-v12-offer p{margin:0 0 8px}
.raw-v12-offer .subscription-link,.raw-metrics-offer .subscription-link{min-width:48px;min-height:48px;white-space:normal}

.sound-preview button{display:inline-flex;align-items:center;justify-content:center}
.sound-preview button>.icon{flex:0 0 auto;margin-right:var(--s2)}
[dir=rtl] .sound-preview button>.icon{margin-right:0;margin-left:var(--s2)}
.billing-toggle button{display:inline-flex;align-items:center;justify-content:center}
.billing-toggle button>b{white-space:nowrap}
.billing-toggle button>.icon{flex:0 0 auto;margin-right:var(--s2)}
[dir=rtl] .billing-toggle button>.icon{margin-right:0;margin-left:var(--s2)}
.home-halloween-cta>.icon:first-child{margin-right:var(--s2)}
.home-halloween-cta>.icon:last-child{margin-left:var(--s2)}
.sound-preview button{background:#1a2427;color:#eef1ef;border:1px solid #46504b;border-radius:10px;font:inherit;max-width:100%;white-space:normal}
.sound-preview button[aria-pressed="true"]{border-color:#b9ef53;color:#b9ef53}
.sound-preview button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* RAW landing cards prioritize the compact Tesla browser. */
.home-raw-grid{gap:16px}
.home-raw-card{display:flex;flex-direction:column;min-width:0}
.home-raw-card .sound-preview{margin-top:16px}
.home-raw-price{margin-top:auto;padding:12px 0 16px;font-size:15px}
.home-raw-price strong{font-size:20px}
.home-raw-price span{color:#aeb9ba}
.home-raw-card .home-plan-link{margin-top:0}
.home-raw-metrics-link{max-width:640px;margin-top:20px}
@media (min-width:641px) and (max-width:1000px){.home-raw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-raw-card:last-child{grid-column:1/-1}}



.showcase-demo-link{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;color:var(--ui-lime,#b3ed59);text-decoration:underline}

.showcase-confirm{grid-column:1/-1;padding:12px;border:1px solid #b3ed59;border-radius:10px}.showcase-confirm>div{display:flex;flex-wrap:wrap;margin-top:10px}.showcase-confirm button{min-height:48px;white-space:normal}.showcase-confirm button+button{margin-left:0}

/* Showcase uses the existing upper 60% canvas; only this lower tray scrolls. */
.showcase-panel{position:fixed;z-index:40;left:0;right:0;bottom:0;box-sizing:border-box;height:40vh;max-height:40vh;display:flex;flex-direction:column;overflow:hidden;padding:12px 20px;background:#10171b;border-top:1px solid #3d4c54;box-shadow:0 -8px 28px #0002}
.showcase-header{display:flex;align-items:center;justify-content:space-between;flex:none;width:100%;max-width:1200px;margin:0 auto 10px;min-height:48px}
.showcase-heading{display:flex;align-items:center;min-width:0}
.showcase-mark{margin-right:12px}
.showcase-heading>div{min-width:0}
.showcase-mark{display:flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;border:1px solid #415149;border-radius:12px;background:#1c2924;color:#b3ed8b}
.showcase-panel .showcase-heading h3{margin:0;font-size:15px;line-height:1.3;letter-spacing:-.02em;font-weight:600;color:#f1f6f4}
.showcase-heading p{margin:4px 0 0;font-size:11px;line-height:1.2;color:#95a5ab;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.showcase-panel .showcase-close{display:flex;align-items:center;justify-content:center;flex:none;min-width:48px;min-height:48px;padding:0 14px;margin:0;border:1px solid #3b4a52;border-radius:10px;background:#192329;color:#ecf2f3;font-size:12px;font-weight:600}
.showcase-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding:8px;scrollbar-width:thin}
.showcase-deck{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,1fr);gap:20px;align-items:start;width:100%;max-width:1200px;margin:0 auto;padding:2px 2px 8px;box-sizing:border-box}
.showcase-appearance{min-width:0}
.showcase-customization{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 12px}
.showcase-customization label{display:grid;gap:6px;min-width:0}
.showcase-customization label>span{color:#a6b4b9;font-size:11px;line-height:1.2;font-weight:600}
.showcase-customization select{box-sizing:border-box;width:100%;min-width:48px;min-height:48px;padding:10px 12px;border:1px solid #3b4a52;border-radius:10px;background:#1a252b;color:#eff5f6;font:inherit;font-size:13px}
.showcase-paint-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;color:#a6b4b9;font-size:var(--t-micro,10px);line-height:1.2;letter-spacing:.06em}
.showcase-paint-heading output{font-size:11px;font-variant-numeric:tabular-nums;color:#788d97;letter-spacing:0}
.showcase-colors{display:flex;align-items:center;flex-wrap:wrap;padding:2px}
.showcase-panel .showcase-colors button{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;min-height:48px;flex:none;padding:0;margin:0 6px 6px 0;border:2px solid transparent;border-radius:50%;background:transparent;color:#fff;outline:none;text-shadow:none}
.showcase-color-fill{position:absolute;top:var(--s1);right:var(--s1);bottom:var(--s1);left:var(--s1);border:1px solid var(--card-line);border-radius:50%;background:var(--swatch-color)}
.showcase-color-symbol{position:relative;display:flex;align-items:center;justify-content:center;z-index:1;font-size:13px;font-weight:700}
.showcase-panel .showcase-colors button[aria-pressed="true"]{border-color:#c2eeaa;background:#c2eeaa12}
.showcase-colors button[aria-pressed="true"] .showcase-color-symbol{width:22px;height:22px;border-radius:50%;background:#13201b;color:#e0ffc8}
.showcase-panel .showcase-colors button:disabled{opacity:.45;cursor:not-allowed}
.showcase-colors button:disabled .showcase-color-symbol{width:22px;height:22px;border-radius:50%;background:#10171bc9}
.showcase-custom-color{margin:0 6px 6px 0;position:relative;display:flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 10px;border:1px dashed #587078;border-radius:10px;color:#bfccd0;font-size:11px;box-sizing:border-box;cursor:pointer}
.showcase-custom-color input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;min-height:var(--ctl-h-min);opacity:0;cursor:pointer}
.showcase-audio{min-width:0;padding:12px;border:1px solid #334249;border-radius:12px;background:#172227}
.showcase-panel .showcase-sound{display:flex;align-items:center;width:100%;min-width:48px;min-height:48px;padding:8px 10px;margin:0;border:1px solid #a6dc85;border-radius:9px;background:#b7e799;color:#172217;text-align:start}
.showcase-sound>span:first-of-type{flex:1;min-width:0}
.showcase-sound small{display:block;font-size:11px;font-weight:600;line-height:1.2;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.showcase-sound strong{display:block;font-size:12px;line-height:1.5;font-weight:600}
.showcase-panel .showcase-sound.is-ready{background:#233c2d;border-color:#5e8661;color:#d0efbd}
.showcase-panel .showcase-sound:disabled{opacity:.65}
.showcase-rev-control{display:grid;grid-template-columns:1fr auto;align-items:center;margin-top:10px;color:#b6c5ca;font-size:11px}
.showcase-rev-control output{color:#eef6f7;font-size:20px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums}
.showcase-rev-control output small{font-size:11px;margin-left:3px;color:#8fa6ad}
.showcase-rev-control input{grid-column:1/-1;box-sizing:border-box;width:100%;min-width:48px;height:48px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
.showcase-rev-control input::-webkit-slider-runnable-track{height:5px;border-radius:4px;background:linear-gradient(to right,#b7e799 var(--showcase-rev),#394c54 var(--showcase-rev))}
.showcase-rev-control input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9.5px;border:3px solid #1b2a28;border-radius:50%;background:#c8f1ae;box-shadow:0 0 0 1px #789d73}
.showcase-rev-control input::-moz-range-track{height:5px;border-radius:4px;background:#394c54}
.showcase-rev-control input::-moz-range-progress{height:5px;background:#b7e799}
.showcase-rev-control input::-moz-range-thumb{width:22px;height:22px;border:2px solid #1b2a28;border-radius:50%;background:#c8f1ae}
.showcase-audio .showcase-sound-notice{margin:0;min-height:14px;color:#9fb3ba;font-size:11px;line-height:1.4}
.showcase-panel button:focus,.showcase-panel select:focus,.showcase-panel input:focus{outline:3px solid var(--focus);outline-offset:2px}
.showcase-custom-color:focus-within{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:620px){.showcase-panel{padding:var(--row-pad)}.showcase-deck{grid-template-columns:minmax(0,1fr);gap:var(--s4)}.showcase-mark{display:none}.showcase-panel .showcase-heading h3{font-size:15px}.showcase-panel .showcase-close{padding:0;width:48px}.showcase-close>span{display:none}.showcase-customization{gap:8px}.showcase-custom-color>span{display:none}}
@media(min-width:621px) and (max-height:600px){.showcase-panel{padding:8px 16px}.showcase-header{margin-bottom:6px}.showcase-deck{gap:16px}.showcase-audio{padding:8px}.showcase-customization{margin-bottom:8px}.showcase-heading p{margin-top:2px}}

.showcase-close>svg{margin-left:var(--s3)}
.garage-actions>*,.sound-preview>*,.showcase-confirm>div>*{margin:0 var(--s3) var(--s3) 0}
[dir="rtl"] .garage-actions>*,[dir="rtl"] .sound-preview>*,[dir="rtl"] .showcase-confirm>div>*{margin:0 0 var(--s3) var(--s3)}
.showcase-header>*+*,.showcase-heading>*+*,.showcase-paint-heading>*+*,.first-drive-coach .coach-head>*+*,.first-drive-coach .coach-actions>*+*{margin-left:var(--s4)}
.trip-toggles label>*+*{margin-left:var(--s4)}
.showcase-panel .showcase-sound>*+*{margin-left:var(--s3)}
.showcase-panel .showcase-close,.showcase-panel .showcase-sound,.showcase-custom-color{gap:0}
.showcase-sound>svg,.showcase-custom-color>svg{margin-right:8px}
@media(max-width:620px){.showcase-close>svg,.showcase-custom-color>svg{margin-left:0;margin-right:0}}

/* First-drive coach: one anchored card at a time, never modal. Hidden while a
   real car moves; the demo drives itself, so there it stays visible. */
.first-drive-coach{position:fixed;z-index:66;width:min(320px,calc(100vw - 32px));padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);color:var(--ui-paper,#f1eee7);box-shadow:var(--float-shadow);animation:coach-in .2s ease}
.first-drive-coach:before{content:"";position:absolute;left:var(--coach-arrow,32px);top:-8px;width:14px;height:14px;background:var(--card-bg);border:1px solid var(--card-line);border-width:1px 0 0 1px;transform:rotate(45deg)}
.first-drive-coach[data-place="above"]:before{top:auto;bottom:-8px;transform:rotate(225deg)}
.first-drive-coach .coach-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.first-drive-coach .commerce-kicker{margin:0}
.first-drive-coach .coach-step{font-size:11px;letter-spacing:.06em;color:var(--ui-muted,#aeb5b7)}
.first-drive-coach h2{margin:0 0 var(--s1);font-size:var(--t-title);font-weight:var(--w-med);line-height:1.2}
.first-drive-coach p{margin:0 0 var(--s4);font-size:var(--t-body);line-height:1.5;color:#b0bdc0}
.first-drive-coach .coach-actions{display:flex;align-items:center;justify-content:space-between}
.first-drive-coach .coach-actions .checkout-btn{min-height:var(--ctl-h-min);margin:0;padding:0 var(--s6);font-size:var(--t-ctl);display:inline-flex;align-items:center}
.first-drive-coach .coach-actions .text-action{min-height:var(--ctl-h-min);padding:0 var(--s3);white-space:nowrap}
.coach-target{outline:3px solid var(--focus)!important;outline-offset:2px;border-radius:var(--card-r)}
html[data-moving="true"] #app:not(.demo-mode) .first-drive-coach{opacity:0;pointer-events:none}
html[data-moving="true"] #app:not(.demo-mode) .coach-target{outline:none!important}
/* Phone-landscape heights leave no room beside the demo controls. */
@media(max-height:440px){.first-drive-coach{display:none}.coach-target{outline:none!important}}
@keyframes coach-in{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.first-drive-coach{animation:none}}

@media(max-width:620px){.showcase-customization{grid-template-columns:repeat(2,minmax(0,1fr))}.showcase-customization label:last-child{grid-column:1/-1}}

/* Car editor: one appearance task at a time, with no extra rendering context. */
.car-editor{margin:var(--s4) 0;color:#e8eff1;min-width:0;border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);overflow:hidden}
.editor-summary{display:grid;grid-template-columns:minmax(0,1fr) 130px;align-items:center;padding:16px 16px 8px}
.editor-eyebrow{font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em;color:#9eb7ae}
.car-editor .editor-summary h2{margin:5px 0;font-size:20px;font-weight:600;letter-spacing:-.02em;color:#f2f6f4}
.car-editor .editor-summary p{margin:0;font-size:11px;color:#a6b6bd;line-height:1.5}
.editor-car-outline{display:block;width:100%;max-width:160px;height:60px}
.editor-preview{padding:0 12px 12px}.editor-preview .showcase-tools{padding:0;border:0}.editor-preview .showcase-tools>p:empty{display:none}
.editor-preview .showcase-tools .editor-preview-button{width:100%;min-height:48px;display:grid;grid-template-columns:24px minmax(0,1fr) 18px;align-items:center;padding:8px 12px;margin:0;border:1px solid #405249;border-radius:10px;background:#1b2b25;color:#d5ebd7;text-align:left;font-size:12px;font-weight:600}
.editor-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0 8px;border-top:1px solid #2b383f;border-bottom:1px solid #2b383f;background:#10181c}
.car-editor .editor-tabs button{min-width:0;min-height:48px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:#9caeb7;font-size:12px;font-weight:600;cursor:pointer;padding:8px 4px}
.car-editor .editor-tabs button[aria-selected="true"]{border-bottom-color:#b7dd9f;color:#d9eecf;background:#1b2724}
.editor-content{padding:12px}.car-editor .editor-hint{margin:0 0 12px;color:#adbbc2;font-size:12px;line-height:1.5}
.editor-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.car-editor .editor-option{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;min-height:var(--ctl-h-tile);padding:var(--row-pad);column-gap:var(--s3);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:#dfe9eb;text-align:left;cursor:pointer;min-width:0}
.car-editor .editor-option.is-selected{border-color:var(--sel-line);background:var(--sel-bg);box-shadow:none}
.editor-option-label{font-size:12px;font-weight:600;line-height:1.25;overflow-wrap:break-word}.editor-option-state{display:flex;align-items:center;color:#a0b0b9;font-size:11px;line-height:1.3}.editor-option-state svg{margin-right:4px}.editor-option.is-selected .editor-option-state{color:#cee8bc}
.editor-option>.editor-car-outline{grid-column:1/-1;height:42px;justify-self:center;margin-bottom:6px}.editor-bodies .editor-option{grid-template-columns:1fr;padding:8px 12px;min-height:98px}.editor-bodies .editor-option-label,.editor-bodies .editor-option-state{justify-content:center;text-align:center}
.editor-wheel,.editor-finish{grid-row:1/3;width:42px;height:42px}.editor-finish{border-radius:50%;background:linear-gradient(140deg,#ffffffaa,transparent 42%,#0008),var(--editor-color);border:1px solid #ffffff30;box-shadow:inset 0 0 8px #0004}.editor-finish.finish-matte{background:var(--editor-color);box-shadow:inset -7px -7px 14px #0005}.editor-finish.finish-satin{background:linear-gradient(120deg,#fff4,transparent 65%),var(--editor-color)}.editor-finish.finish-brushed{background:repeating-linear-gradient(0deg,#fff2 0 1px,transparent 1px 3px),linear-gradient(120deg,#fff5,#0006),var(--editor-color)}.editor-finish.finish-pearl{background:linear-gradient(135deg,#f0c9e7aa,#caefffaa 35%,transparent 60%,#0006),var(--editor-color)}
.car-editor h3{margin:16px 0 10px;font-size:12px;color:#dbe5e8;letter-spacing:0;text-transform:none}.editor-field-heading{display:flex;align-items:center;justify-content:space-between}.editor-field-heading h3{margin-top:0}.editor-field-heading output{font-size:11px;color:#9bafb9}
.car-editor .editor-swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-bottom:10px}
html[data-tesla="true"] .car-editor .editor-swatches>button,.car-editor .editor-swatches>button{position:relative;display:grid;place-items:center;width:100%;min-width:48px;height:48px;min-height:48px;margin:0;padding:6px;border:1px solid #39484f;border-radius:9px;background:#182329;box-shadow:none;transform:none;cursor:pointer}
.car-editor .editor-swatches>button>span{display:block;width:28px;height:28px;border-radius:50%;background:var(--editor-color);border:1px solid #ffffff40}.car-editor .editor-swatches>button[aria-pressed="true"]{border-color:var(--sel-line);background:var(--sel-bg)}.editor-swatches b,.editor-swatches svg{position:absolute;right:3px;bottom:3px;color:#fff;background:#142018;border-radius:3px;font-size:11px;padding:1px}
.editor-custom-color,.car-editor .editor-upgrade{display:flex;justify-content:space-between;align-items:center;min-height:48px;width:100%;padding:0 10px;border:1px solid #35464d;border-radius:9px;background:#19242a;color:#c6d6dd;font-size:12px;box-sizing:border-box}.editor-custom-color input{width:56px;height:48px;background:transparent;border:0;cursor:pointer}.editor-upgrade span{margin-left:8px;font-size:11px;color:#bad39f}
.editor-more{margin-top:10px}.editor-more summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:48px;font-size:12px;cursor:pointer;color:#c0cfd5}.editor-more summary::-webkit-details-marker{display:none}.editor-more[open] summary>svg{transform:rotate(90deg)}.editor-more .editor-hint{margin:12px 0 0}
.car-editor .editor-pro-note{display:flex;align-items:center;margin:14px 0 0;font-size:11px;line-height:1.5;color:#b4c6ac}.editor-pro-note svg{flex:none;margin-right:8px}
.editor-builds{display:grid;gap:10px}.car-editor .editor-builds button{display:grid;grid-template-columns:92px minmax(0,1fr) 16px;column-gap:12px;align-items:center;min-height:100px;width:100%;padding:12px;border:1px solid #3c4c52;border-radius:12px;background:#1c282e;text-align:left;color:#e3ecee;cursor:pointer}.editor-builds strong,.editor-builds small,.editor-builds b{display:block}.editor-builds strong{font-size:13px}.editor-builds small{font-size:11px;color:#a6b8c0;margin-top:6px;line-height:1.4}.editor-builds b{color:#b4d5a1;font-size:11px;margin-top:8px}
.editor-footer{display:flex;align-items:center;padding:12px;border-top:1px solid #2b383f;font-size:11px;line-height:1.4;color:#9bafa6}.editor-saved-dot{width:5px;height:5px;border-radius:50%;background:#aec698;flex:none;margin-right:7px}
.car-editor button:focus-visible,.car-editor summary:focus-visible,.car-editor input:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
@media(max-width:380px){.editor-summary{grid-template-columns:minmax(0,1fr) 86px;padding:12px}.car-editor .editor-summary h2{font-size:20px}.car-editor .editor-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.editor-options{gap:6px}.car-editor .editor-option{padding:8px;column-gap:6px;grid-template-columns:34px minmax(0,1fr)}.editor-wheel,.editor-finish{width:34px;height:34px}.editor-bodies .editor-option{grid-template-columns:1fr}.car-editor .editor-builds button{grid-template-columns:66px minmax(0,1fr) 16px;column-gap:8px}}
.editor-select{display:grid;gap:7px;margin:14px 0 10px;font-size:12px;color:#ccdbdf}.editor-select select{width:100%;min-width:48px;min-height:48px;padding:8px 10px;border:1px solid #43565e;border-radius:9px;background:#1b282e;color:#e3ecee;font:inherit}.editor-select select:disabled{opacity:.6}
.editor-footer>span:nth-child(2){flex:1}.car-editor .editor-footer button{min-width:56px;min-height:48px;margin-left:8px;padding:8px;border:1px solid #43564a;border-radius:8px;background:#243029;color:#d0e6c4;font-size:12px;cursor:pointer}
.editor-preview .setting-section.showcase-tools{display:block;padding:0;margin:0;border:0;background:transparent;border-radius:0}
.editor-preview .setting-section.showcase-tools>button{grid-column:auto;grid-row:auto;white-space:normal}
/* One fixed settings header is enough while editing: stacked sticky navigation
   can obscure the editor's tabs on tall browser viewports. */
.panel.car-editor-panel .panel-nav{position:static}
.car-editor button,.car-editor select,.car-editor input,.car-editor summary{scroll-margin-top:90px;scroll-margin-bottom:12px}

/* Racing on the landing page. The counts come from the catalogue, so they are
   rendered rather than written, and the strip has to hold four numbers of
   varying width without reflowing the section. */
.home-racing-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 28px;padding:0;list-style:none;text-align:center}
.home-racing-stats li{padding:16px 8px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.03)}
.home-racing-stats strong{display:block;font-size:var(--n-sm);line-height:1.1;letter-spacing:var(--ls-tight)}
.home-racing-stats span{display:block;margin-top:4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.home-racing-steps{margin-top:28px}
/* The strip between the hero and the page body: the objections that stop a
   first visit, answered before the page asks for anything. auto-fit, because
   the racing item is only there when /race exists. */
.home-proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;max-width:1180px;margin:0 auto;padding:20px 48px;list-style:none}
.home-proof li{display:flex;align-items:flex-start;padding:14px 16px;border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}
.home-proof>li>.icon{flex:0 0 auto;margin-top:1px;color:#a3e635}
.home-proof li>div{margin-left:12px;min-width:0}
[dir=rtl] .home-proof li>div{margin-left:0;margin-right:12px}
.home-proof strong{display:block;font-size:13px;font-weight:600;color:#e4ebe2}
.home-proof span{display:block;margin-top:4px;font-size:12px;line-height:1.5;color:#aeb9ba}
@media(max-width:900px){.home-proof{padding:16px 28px}}

/* The same three answers again where they decide a purchase rather than a
   visit: beside the price, not 600 px below it in the billing small print. */
.home-assurance{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:16px;margin:28px 0 4px;padding:0;list-style:none}
.home-assurance li{display:flex;align-items:flex-start;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}
.home-assurance>li>.icon{flex:0 0 auto;margin-top:2px;color:#e5b48b}
.home-assurance li>div{margin-left:14px;min-width:0}
[dir=rtl] .home-assurance li>div{margin-left:0;margin-right:14px}
.home-assurance strong{display:block;font-size:14px;font-weight:600;color:#e4ebe2}
.home-assurance p{margin:6px 0 0;font-size:12px;line-height:1.6;color:#aeb9ba}

/* Four arguments for the road-and-charger loop read as a square, not as a row
   of three with one stranded underneath it. */
.home-loop .home-features{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.home-loop .home-features{grid-template-columns:minmax(0,1fr)}}

.home-racing-access{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.home-racing-access article{padding:20px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.03)}
.home-racing-access h3{margin:10px 0 8px;font-size:15px}
.home-racing-access p{margin:0;font-size:13px;line-height:1.55;opacity:.82}
.home-racing-access .home-plan-link{margin-top:14px}
@media(max-width:900px){.home-racing-access{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){
 .home-racing-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .home-racing-stats strong{font-size:20px}
}

/* The road-and-charger pitch under the demo. Two calls to action sit side by
   side here, so the row wraps rather than squeezing on a narrow screen. */
.home-loop .home-feature-actions{display:flex;flex-wrap:wrap}
.home-loop .home-feature-actions>*{margin:0 14px 10px 0}
.home-loop-note{margin:18px 0 0;font-size:13px;line-height:1.6;opacity:.72}

/* Racing on the first screen. It sits between the demo, which asks nothing of
   anyone, and setting up a real drive: the same accent as the demo card so the
   two free doors read as a pair. */
.welcome-page .experience-card.race-entry-card .entry-icon{color:var(--race-lime,#54e8cf)}
.welcome-page .experience-card.race-entry-card .entry-action{color:var(--race-lime,#54e8cf)}

/* The open League season on the home page: one line, the season's colour. */
.home-racing-stats .home-racing-season{grid-column:1/-1;flex-basis:100%;text-align:left}
.home-racing-stats .home-racing-season strong{font-size:var(--n-sm)}
.home-racing-stats .home-racing-season[data-season="halloween"] strong{color:#f8af65}

/* Halloween on the home page: one dark band while the season is open. Fog,
   a moon and three bats are CSS and one inline path each — no assets, no
   animation heavier than a slow drift, and nothing without the season. */
.home-halloween{position:relative;overflow:hidden;margin:0 0 28px;padding:28px 26px 26px;border-radius:22px;color:#f3ecff;background:radial-gradient(120% 90% at 20% 110%,#2a1436 0,#140f22 48%,#0b0f1a 100%);border:1px solid #4a2a63;isolation:isolate}
.home-halloween-moon{position:absolute;right:8%;top:-34px;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#fff4d0 0,#f3e2b0 40%,#d8c48e 70%,rgba(216,196,142,0) 72%);box-shadow:0 0 60px 18px rgba(255,232,170,.22);opacity:.92;z-index:0}
.home-halloween-fog{position:absolute;top:auto;right:0;bottom:0;left:0;height:46%;background:linear-gradient(180deg,rgba(38,49,69,0) 0,rgba(38,49,69,.55) 60%,rgba(38,49,69,.8) 100%);z-index:0;pointer-events:none}
.home-halloween-bat{position:absolute;width:38px;height:14px;color:#0a0a12;opacity:.9;z-index:1;animation:home-bat-drift 9s ease-in-out infinite}
.home-halloween-bat-0{left:14%;top:18%}.home-halloween-bat-1{left:22%;top:30%;width:28px;animation-delay:-3s}.home-halloween-bat-2{right:26%;top:14%;width:30px;animation-delay:-6s}
@keyframes home-bat-drift{0%,100%{transform:translate(0,0) scaleY(1)}25%{transform:translate(9px,-6px) scaleY(.7)}50%{transform:translate(0,-10px) scaleY(1)}75%{transform:translate(-8px,-4px) scaleY(.75)}}
@media (prefers-reduced-motion:reduce){.home-halloween-bat{animation:none}}
.home-halloween-copy{position:relative;z-index:2;max-width:720px}
.home-halloween .welcome-eyebrow{color:#ffb15c}
.home-halloween h2{margin:var(--s3) 0;font-size:var(--t-head);line-height:20px;letter-spacing:var(--ls-tight);color:#fff}
.home-halloween p{margin:0 0 12px;color:#d9cfec;line-height:1.5}
.home-halloween-ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:14px 0 16px;padding:0;list-style:none;counter-reset:tier}
.home-halloween-ladder li{padding:10px 8px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,177,92,.28);text-align:center}
.home-halloween-ladder li strong{display:block;color:#ffb15c;font-size:var(--t-ctl);letter-spacing:0}
.home-halloween-ladder li span{display:block;margin-top:3px;font-size:12px;color:#cdbfe6}
.home-halloween-field,.home-halloween-prize{font-size:13px}
/* `.welcome-button` had no definition in any stylesheet, so the season's only
   call to action rendered as an underlined link with a stray orange block
   behind it: 48 px tall, zero padding, the label sitting outside its own
   background. It is the page's primary button shape, named here once. */
.welcome-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s6,20px);border:1px solid transparent;border-radius:var(--ctl-r,12px);font-size:var(--t-ctl,14px);font-weight:var(--w-med,600);line-height:1.2;text-align:center;text-decoration:none;background:#e6ac7f;color:#172022}
.welcome-button:hover,.welcome-button:focus-visible{background:#f1be96;color:#172022}
.home-halloween-cta{margin-top:14px;background:#ff982e;color:#1a0f05;border-color:#ffb15c}
.home-halloween-cta:hover{background:#ffb15c}
.race-entry-card.is-halloween{border-color:#ff982e;box-shadow:0 0 0 1px rgba(255,152,46,.35),0 12px 40px rgba(255,152,46,.12)}
.race-entry-card.is-halloween .entry-icon{color:#ff982e}
@media (max-width:760px){.home-halloween{padding:22px 18px 20px}.home-halloween h2{font-size:20px}.home-halloween-ladder{grid-template-columns:repeat(2,minmax(0,1fr))}.home-halloween-ladder li:last-child{grid-column:1/-1}.home-halloween-moon{right:-20px;top:-40px;width:92px;height:92px}}
.home-halloween-skeleton{position:absolute;right:16%;bottom:8px;width:44px;height:106px;color:#e9e2cf;opacity:.85;z-index:1;transform:rotate(-6deg)}
@media (max-width:760px){.home-halloween-skeleton{right:6px;width:34px;height:82px}}
/* Chrome 79 (the car) has no logical properties: physical values, mirrored for RTL. */
[dir=rtl] .showcase-tools button+button{margin-left:0;margin-right:8px}
[dir=rtl] .trip-stats strong em{margin-left:0;margin-right:4px}
[dir=rtl] /* Motion source tag,[dir=rtl] drive of the day,[dir=rtl] chapter line. */
.motion-tag{margin-left:0;margin-right:8px}
[dir=rtl] .passenger-badge{margin-left:0;margin-right:8px}
[dir=rtl] /* Sound trials: the countdown beside the sound tile,[dir=rtl] and the try button in the preview. */
.trial-pill{margin-left:0;margin-right:10px}
[dir=rtl] .showcase-confirm button+button{margin-left:0;margin-right:0}
[dir=rtl] .showcase-mark{margin-right:0;margin-left:12px}
[dir=rtl] .showcase-rev-control output small{margin-left:0;margin-right:3px}
[dir=rtl] .showcase-close>svg{margin-left:0;margin-right:var(--s3)}
[dir=rtl] .showcase-header>*+*,[dir=rtl] .showcase-heading>*+*,[dir=rtl] .showcase-paint-heading>*+*,[dir=rtl] .first-drive-coach .coach-head>*+*,[dir=rtl] .first-drive-coach .coach-actions>*+*{margin-left:0;margin-right:var(--s4)}
[dir=rtl] .trip-toggles label>*+*{margin-left:0;margin-right:var(--s4)}
[dir=rtl] .showcase-panel .showcase-sound>*+*{margin-left:0;margin-right:var(--s3)}
[dir=rtl] .showcase-sound>svg,[dir=rtl] .showcase-custom-color>svg{margin-right:0;margin-left:8px}
[dir=rtl] .editor-option-state svg{margin-right:0;margin-left:4px}
[dir=rtl] .editor-upgrade span{margin-left:0;margin-right:8px}
[dir=rtl] .editor-pro-note svg{margin-right:0;margin-left:8px}
[dir=rtl] .editor-saved-dot{margin-right:0;margin-left:7px}
[dir=rtl] .car-editor .editor-footer button{margin-left:0;margin-right:8px}

/* navigation.css */
/* Route card: a glance surface for the car, not a document. Tokens come from
   design-system.css. The outer bounds per viewport were tuned against
   test/e2e/navigation-layout.spec.js and navigation-compact.spec.js; change
   them with those suites running. */
/* The heading stays put and the content scrolls beneath it, so no control ever sits half under the heading. */
.navigation-map{position:absolute;z-index:8;right:24px;top:190px;width:320px;max-height:calc(100% - 330px);overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--hairline,#34434b);border-radius:18px;background:var(--glass-strong,rgba(10,15,18,.94));color:var(--text-1,#f6faf9);box-shadow:0 14px 40px rgba(0,0,0,.4);font-size:13px;line-height:1.35;scrollbar-width:thin}
.navigation-map button{cursor:pointer;color:inherit;background:transparent;border:0;font:inherit;min-width:48px;min-height:48px}
.navigation-map button:focus{outline:3px solid var(--focus);outline-offset:-3px}

/* Heading: the title, or the next maneuver while collapsed. */
#navigation-content{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.navigation-heading{position:relative;flex-shrink:0;z-index:3;display:flex;align-items:center;width:100%;min-height:48px;padding:6px 10px 6px 14px;text-align:left;background:#0f1a20;border-bottom:1px solid var(--hairline,#34434b)}
.navigation-heading[aria-expanded="false"]{border-bottom:0}
.navigation-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2,#aab7bc);white-space:nowrap}
.navigation-toggle-label{margin-left:auto;flex-shrink:0;padding:6px 10px;border:1px solid var(--hairline,#34434b);border-radius:999px;font-size:12px;font-weight:600;color:var(--text-2,#aab7bc)}
.navigation-heading[aria-expanded="false"] .navigation-toggle-label{padding:2px 10px 4px;font-size:20px;line-height:1}
.navigation-peek{display:flex;flex:1;align-items:center;min-width:0;color:var(--text-1,#f6faf9)}
.navigation-peek .maneuver-icon{flex-shrink:0;color:#6ce3c4}
.navigation-peek b{font-size:15px;font-weight:700;white-space:nowrap}
.navigation-peek>span{font-size:12px;color:var(--text-2,#aab7bc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navigation-has-peek .navigation-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.navigation-approaching .navigation-peek b{color:#6ce3c4}

/* Status and warnings. */
.navigation-map p{margin:10px 14px;line-height:1.5;color:var(--text-2,#aab7bc)}
.navigation-status{display:flex;align-items:center;padding:8px 10px;border:1px dashed var(--hairline,#34434b);border-radius:10px;font-size:13px}
.navigation-status::before{content:'';flex-shrink:0;width:8px;height:8px;border-radius:50%;background:#6ce3c4;box-shadow:0 0 0 3px rgba(108,227,196,.18)}

/* Locked and not-yet-connected states. */
.navigation-locked{padding:6px}
.navigation-locked button{display:flex;align-items:center;width:100%;padding:8px 10px;border-radius:12px;text-align:left}
.navigation-locked-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:10px;background:#16262b;color:#6ce3c4}
.navigation-locked span{display:grid;gap:3px;min-width:0}
.navigation-locked small{font-size:11px;color:var(--text-2,#aab7bc)}
.navigation-locked strong{font-size:13px;color:#6ce3c4}

/* Guidance: the one block a driver reads in a glance. */
.navigation-guidance{display:grid;gap:5px;padding:8px 14px 8px}
.navigation-maneuver-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#75dfba}
.navigation-next{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start}
.navigation-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--hairline,#34434b);border-radius:12px;background:#16262b;color:#eaf6f3}
.navigation-next-text{display:grid;gap:2px;min-width:0}
.navigation-distance{display:flex;flex-wrap:wrap;align-items:center;font-size:20px;font-weight:700;line-height:1.05;letter-spacing:-.02em;color:#fff}
.navigation-exit-badge{padding:3px 7px;border-radius:6px;background:#6ce3c4;color:#072922;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.navigation-instruction{font-size:15px;line-height:1.3;color:var(--text-1,#f6faf9);overflow-wrap:anywhere}
.navigation-exit{font-size:12px;color:var(--text-2,#aab7bc);overflow-wrap:anywhere}
.navigation-progress{height:4px;overflow:hidden;border-radius:2px;background:#22313a}
.navigation-progress i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#3fb8a0,#6ce3c4);transition:width .6s linear}
.navigation-approaching{border-color:rgba(108,227,196,.45)}
.navigation-approaching .navigation-icon{background:#6ce3c4;border-color:#6ce3c4;color:#072922}
.navigation-approaching .navigation-distance{color:#6ce3c4}
.navigation-arrived .navigation-distance{font-size:20px}
.navigation-lanes{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(30px,1fr);gap:4px;max-width:100%;margin-top:2px}
.navigation-lanes span{display:flex;align-items:center;justify-content:center;height:32px;padding:0 4px;border:1px solid transparent;border-radius:8px;background:#121c21;color:#4d5b62}
.navigation-lanes .valid{border-color:rgba(255,255,255,.55);color:#fff}
.navigation-lanes .active{border-color:#6ce3c4;background:#6ce3c4;color:#072922}

/* Trip line and destination row with the view toggle. */
.navigation-trip{display:flex;flex-wrap:wrap;align-items:baseline;padding:6px 14px 8px;border-top:1px solid var(--hairline,#34434b)}
.navigation-trip span{display:flex;align-items:baseline;white-space:nowrap}
.navigation-trip strong{font-size:15px;font-weight:700;color:#fff}
.navigation-trip small{font-size:11px;color:var(--text-2,#aab7bc)}
/* The view toggle floats over the map's corner so the destination line keeps its full width. */
.navigation-caption{position:relative;z-index:1;display:flex;justify-content:flex-end;margin:-54px 6px 6px 0;pointer-events:none}
.navigation-caption button{pointer-events:auto;background:#0f1a20f2}
.navigation-destination{display:flex;align-items:center;min-width:0;max-width:100%;font-size:12px;color:var(--text-2,#aab7bc)}
.navigation-destination .maneuver-icon{flex-shrink:0;color:#6ce3c4}
.navigation-destination>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navigation-view{flex-shrink:0;padding:0 12px;border:1px solid var(--hairline,#34434b);border-radius:999px;font-size:12px;font-weight:600;color:var(--text-1,#f6faf9)}
.navigation-view[aria-pressed="true"]{border-color:#6ce3c4;background:#16262b;color:#6ce3c4}

/* Map and its credit. The map is a button: tap to enlarge at street-name zoom. */
.navigation-drawing-button{display:block;width:100%;padding:0;border:0;border-radius:0;background:none;text-align:left}
.navigation-drawing-button:focus{outline:none}
.navigation-drawing-button:focus-visible{outline:3px solid var(--focus);outline-offset:-4px}
.navigation-drawing{display:block;width:100%;height:150px;background:#14232d}
.navigation-mapmode .navigation-drawing{height:220px}
.navigation-mapmode .navigation-instruction,.navigation-mapmode .navigation-exit,.navigation-mapmode .navigation-lanes,.navigation-mapmode .navigation-upcoming,.navigation-mapmode .navigation-progress{display:none}
.navigation-mapmode .navigation-guidance{padding-bottom:6px}
.navigation-attribution{padding:4px 10px;font-size:11px;color:var(--text-3,#77868d);background:#0d151b}
.navigation-attribution a{color:var(--text-2,#aab7bc)}

/* Then: the two maneuvers after the next one. */
.navigation-upcoming{padding:8px 14px 4px;border-top:1px solid var(--hairline,#34434b)}
.navigation-upcoming>small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2,#aab7bc)}
.navigation-upcoming ol{display:grid;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.navigation-upcoming li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:center;min-height:32px}
.navigation-upcoming li div{display:grid;gap:1px;overflow-wrap:anywhere}
.navigation-upcoming li span{font-size:13px;color:var(--text-1,#f6faf9)}
.navigation-upcoming li strong{font-size:12px;color:#75dfba}
.navigation-step-arrow{display:flex;align-items:center;justify-content:center;color:var(--text-2,#aab7bc)}
.navigation-map .navigation-note{margin:6px 14px 10px;font-size:11px;color:var(--text-3,#77868d)}
.navigation-heading>*+*:not(.navigation-toggle-label),.navigation-locked button>*+*{margin-left:var(--s3)}
.navigation-peek>*+*,.navigation-status>*+*,.navigation-distance>*+*,.navigation-destination>*+*,.navigation-trip span>*+*{margin-left:var(--s2)}
.navigation-trip>*{margin-right:var(--s5)}
.navigation-lanes span>*+*{margin-left:1px}
@media(prefers-reduced-motion:reduce){.navigation-progress i{transition:none}}

/* Car bounds. The drive page always carries data-tesla; these keep the card
   above the instruments at every viewport in test/e2e/tesla-viewports.js. */
html[data-tesla="true"] .navigation-map{top:230px;right:16px;width:320px;max-height:calc(100vh - 506px);backdrop-filter:none;-webkit-backdrop-filter:none}
@media(max-height:850px){html[data-tesla="true"] .navigation-map{top:94px;max-height:calc(100vh - 370px)}}
@media(max-height:740px){html[data-tesla="true"] .navigation-map{top:82px;max-height:calc(100vh - 322px)}}
@media(max-height:620px){html[data-tesla="true"] .navigation-map{top:82px;max-height:calc(100vh - 312px)}}
@media(max-width:850px) and (min-height:741px){html[data-tesla="true"] .navigation-map{top:82px;max-height:calc(100vh - 406px)}}

/* Tight heights (every landscape car size): guidance first at full width, then
   the map beside the trip line; the "Then" list scrolls under the sticky heading. */
@media(max-height:850px),(max-width:850px){
 html[data-tesla="true"] #navigation-content{display:grid;grid-template-columns:132px minmax(0,1fr);grid-template-areas:"status status" "guidance guidance" "drawing trip" "view trip" "attribution upcoming" "warning warning" "note note";align-content:start}
 html[data-tesla="true"] .navigation-mapmode #navigation-content{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"status status" "guidance guidance" "drawing drawing" "trip view" "attribution attribution" "warning warning" "note note"}
 html[data-tesla="true"] .navigation-status{grid-area:status}
 html[data-tesla="true"] .navigation-guidance{grid-area:guidance}
 html[data-tesla="true"] .navigation-map-frame{grid-area:drawing}
 html[data-tesla="true"] .navigation-drawing-button{align-self:stretch;height:100%;min-height:84px;max-height:118px}
 html[data-tesla="true"] .navigation-drawing{height:100%;min-height:84px}
 html[data-tesla="true"] .navigation-mapmode .navigation-drawing-button{max-height:none;height:auto}
 html[data-tesla="true"] .navigation-mapmode .navigation-drawing{height:200px}
 html[data-tesla="true"] .navigation-caption{grid-area:view;margin:0;padding:0;justify-content:stretch;background:#0d151b}
 html[data-tesla="true"] .navigation-caption button{width:100%;border-radius:0;border-width:0 0 1px;background:transparent}
 html[data-tesla="true"] .navigation-mapmode .navigation-caption{background:transparent;padding-right:6px}
 html[data-tesla="true"] .navigation-mapmode .navigation-caption button{width:auto;border-radius:999px;border-width:1px;padding:0 12px}
 html[data-tesla="true"] .navigation-trip{grid-area:trip;flex-direction:column;align-items:flex-start;padding:var(--row-pad);border-top:0}
 html[data-tesla="true"] .navigation-trip .navigation-destination{margin-top:2px}
 html[data-tesla="true"] .navigation-attribution{grid-area:attribution}
 html[data-tesla="true"] .navigation-upcoming{grid-area:upcoming;padding-top:4px;border-top:0}
 html[data-tesla="true"] .navigation-warning{grid-area:warning}
 html[data-tesla="true"] .navigation-note{grid-area:note}
}

/* Small windows: a compact pill that opens as a bounded dialog. */
.navigation-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:17;background:#0009}
html[data-tesla="true"] .navigation-compact:not(.navigation-modal){top:78px;right:12px;width:180px;max-width:calc((100vw - 36px)/2);max-height:none}
html[data-tesla="true"] .navigation-compact:not(.navigation-modal) .navigation-peek>span{display:none}
html[data-tesla="true"] .navigation-modal{position:fixed;z-index:18;top:12px;right:12px;bottom:12px;left:12px;width:auto;max-width:640px;max-height:calc(var(--app-height,100vh) - 24px);margin:auto;background:#10191f;font-size:13px}
html[data-tesla="true"] .navigation-modal #navigation-content{display:block}
html[data-tesla="true"] .navigation-modal .navigation-distance{font-size:20px}
html[data-tesla="true"] .navigation-modal .navigation-instruction{font-size:15px}
html[data-tesla="true"] .navigation-modal .navigation-drawing{height:240px}
html[data-tesla="true"] .navigation-modal .navigation-mapmode .navigation-drawing,html[data-tesla="true"] .navigation-modal.navigation-mapmode .navigation-drawing{height:320px}
html[data-tesla="true"] .navigation-modal .navigation-caption{margin-top:-60px;margin-right:12px}
html[data-tesla="true"] .navigation-modal .navigation-lanes{grid-auto-columns:minmax(40px,1fr);gap:var(--s2)}
html[data-tesla="true"] .navigation-modal .navigation-lanes span{height:44px}
html[data-tesla="true"] .navigation-modal .navigation-upcoming li span{font-size:15px}
@media(max-height:500px) and (orientation:landscape){html[data-tesla="true"] .navigation-compact:not(.navigation-modal){top:70px}}

/* Map upgrade: controls over the map (48 px, at the edges so the map stays tappable), typed destinations, marks and scale. */
.navigation-map-frame{position:relative;min-width:0}
.navigation-map-frame .navigation-drawing-button{height:100%}
.navigation-map-controls{position:absolute;top:8px;right:8px;display:grid;gap:6px;z-index:2}
.navigation-map-controls button,.navigation-orient{min-width:48px;min-height:48px;padding:0;border-radius:12px;border:1px solid #34434b;background:#0f1a20f2;color:#f6faf9;font-size:20px;font-weight:600;display:grid;place-items:center;line-height:1}
.navigation-map-controls button:disabled{opacity:.4}
.navigation-orient{position:absolute;left:8px;bottom:8px;z-index:2;font-size:11px;font-weight:600;letter-spacing:0;padding:0 10px}
.navigation-orient[aria-pressed="true"]{border-color:#6ce3c4;color:#6ce3c4}
.navigation-clear{width:100%;min-height:48px;margin:0 0 8px;padding:0 12px;border-radius:12px;border:1px solid #34434b;background:#141d20;color:#f6faf9;font-size:13px;text-align:start}
.navigation-scale text{font-size:11px;fill:#dbe7ee;font-family:-apple-system,system-ui,sans-serif}
.navigation-mark text{font-family:-apple-system,system-ui,sans-serif}
@keyframes navigation-pulse{0%{r:8;opacity:.9}100%{r:18;opacity:0}}
.navigation-next-ring{animation:navigation-pulse 1.6s ease-out infinite}
@media (prefers-reduced-motion:reduce){.navigation-next-ring{animation:none;opacity:.6}}
/* Chrome 79 (the car) has no logical properties: physical values, mirrored for RTL. */
[dir=rtl] .navigation-heading>*+*:not(.navigation-toggle-label),[dir=rtl] .navigation-locked button>*+*{margin-left:0;margin-right:var(--s3)}
[dir=rtl] .navigation-peek>*+*,[dir=rtl] .navigation-status>*+*,[dir=rtl] .navigation-distance>*+*,[dir=rtl] .navigation-destination>*+*,[dir=rtl] .navigation-trip span>*+*{margin-left:0;margin-right:var(--s2)}
[dir=rtl] .navigation-trip>*{margin-right:0;margin-left:var(--s5)}
[dir=rtl] .navigation-lanes span>*+*{margin-left:0;margin-right:1px}

/* clean-ui.css */
/* Clean UI pass (9 Sep 2026, retuned 13 Sep): one surface language across the
   cockpit and the settings panel. One card, one control, one green - the panel
   borrows the design lime instead of keeping a second one of its own. Loaded
   before car-density.css. */
:root{--ui-lime:var(--design-lime,#b3ed59);--ui-teal:#6ce3c4;--ui-hair:var(--card-line)}
.panel-kicker .icon{color:var(--sel-line)}
.panel-head h1{letter-spacing:var(--ls-tight)}
.experience-entry button{min-height:var(--ctl-h);border-radius:var(--ctl-r);border-color:var(--ctl-line);background:var(--ctl-bg);color:var(--text-1);font-size:var(--t-ctl);font-weight:var(--w-med)}
.experience-entry button:hover{border-color:var(--sel-line)}
.horn-picker{border-radius:var(--card-r);border-color:var(--card-line)}
.horn-preview-icon{display:grid;place-items:center;width:var(--ctl-h-min);height:var(--ctl-h-min);border-radius:var(--ctl-r);background:#16262b;color:var(--ui-teal);font-size:0}
.horn-picker>button{min-height:var(--ctl-h);padding:0 var(--s5);border:1px solid var(--sel-line);border-radius:var(--ctl-r);background:transparent;color:var(--sel-line);font-size:var(--t-ctl);font-weight:var(--w-strong);letter-spacing:var(--ls-caps);text-transform:uppercase}
.horn-picker>button:hover{background:var(--sel-bg)}
.horn-btn .horn-choice-icon{top:var(--s2);right:var(--s3);color:var(--ui-teal);opacity:.9}
.environments button,.region-grid button,.country-list details,.experience-presets button,.favorite-list li,.visual-choices button{border-radius:var(--card-r);border-color:var(--card-line)}
.environments button.active,.region-grid button.active{border-color:var(--sel-line);background:var(--sel-bg)}
.lock-tag{border-radius:999px;font-size:var(--t-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;padding:var(--s1) var(--s2)}
.region-grid button.locked,.environments button.locked{opacity:.78}
.subscription-link,.text-action{color:var(--sel-line)}
.subscription-link{min-height:var(--ctl-h-min);display:inline-flex;align-items:center}
.subscription-link .icon{margin-right:var(--s2)}
[dir="rtl"] .subscription-link .icon{margin-right:0;margin-left:var(--s2)}
.icon-btn,.account-btn{border-color:var(--ctl-line)}
.speed,.drive-readout strong,.control-dock strong,.navigation-distance,.navigation-trip strong{font-variant-numeric:tabular-nums}

/* Settings sections: an icon tile anchors every eyebrow; one choice-button
   style for side, time, visual, units, transmission and traffic. */
.section-label{position:relative;display:flex;align-items:center;margin-bottom:var(--s4)}
.section-label>span{flex:1;min-width:0;font-size:var(--t-micro);font-weight:var(--w-med);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-1)}
.section-label>small{margin-left:var(--s4);white-space:nowrap;color:var(--text-3);font-size:var(--t-small);letter-spacing:0;text-transform:none}
[dir="rtl"] .section-label>small{margin-left:0;margin-right:var(--s4)}
.visual-choices button>span .icon{color:var(--text-2)}
.visual-choices button.active>span .icon{color:var(--sel-line)}
.setting-section[data-section]>.section-label::before{content:'';flex-shrink:0;width:28px;height:28px;margin-right:var(--s4);border-radius:9px;background:var(--sel-bg)}
[dir="rtl"] .setting-section[data-section]>.section-label::before{margin-right:0;margin-left:var(--s4)}
.setting-section[data-section]>.section-label::after{content:'';position:absolute;left:5px;top:50%;width:18px;height:18px;margin-top:-9px;background-color:var(--sel-line);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:18px 18px;mask-size:18px 18px}
[dir="rtl"] .setting-section[data-section]>.section-label::after{left:auto;right:5px}
.setting-section[data-section="sound"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%2010v4h3l8%204V6l-8%204H4zm3%204%201%205h3l-1-4m8-5c1%201%201%203%200%204m2-7c3%203%203%207%200%2010'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%2010v4h3l8%204V6l-8%204H4zm3%204%201%205h3l-1-4m8-5c1%201%201%203%200%204m2-7c3%203%203%207%200%2010'/></svg>")}
.setting-section[data-section="engine"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M7%207h9l3%203h3v7h-4l-2%203H7l-3-3V9h3V7zm1-4h7M11%203v4M1%2011v5'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M7%207h9l3%203h3v7h-4l-2%203H7l-3-3V9h3V7zm1-4h7M11%203v4M1%2011v5'/></svg>")}
.setting-section[data-section="worlds"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200M3%2012h18M12%203c-4%204-4%2014%200%2018%204-4%204-14%200-18'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200M3%2012h18M12%203c-4%204-4%2014%200%2018%204-4%204-14%200-18'/></svg>")}
.setting-section[data-section="visual"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%204h18v16H3zM3%2016l5-6%204%205%203-3%206%207M16%208h.01'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%204h18v16H3zM3%2016l5-6%204%205%203-3%206%207M16%208h.01'/></svg>")}
.setting-section[data-section="season"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%2019C5%209%2011%205%2020%205c0%209-4%2015-14%2015M5%2019l7-7'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%2019C5%209%2011%205%2020%205c0%209-4%2015-14%2015M5%2019l7-7'/></svg>")}
.setting-section[data-section="time"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%204v2M12%2018v2M4%2012h2M18%2012h2M6.3%206.3l1.4%201.4M16.3%2016.3l1.4%201.4M6.3%2017.7l1.4-1.4M16.3%207.7l1.4-1.4M12%208.4a3.6%203.6%200%201%200%200%207.2%203.6%203.6%200%200%200%200-7.2z'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%204v2M12%2018v2M4%2012h2M18%2012h2M6.3%206.3l1.4%201.4M16.3%2016.3l1.4%201.4M6.3%2017.7l1.4-1.4M16.3%207.7l1.4-1.4M12%208.4a3.6%203.6%200%201%200%200%207.2%203.6%203.6%200%200%200%200-7.2z'/></svg>")}
.setting-section[data-section="country"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%205l6-2%206%202%206-2v16l-6%202-6-2-6%202V5zm6-2v16m6-14v16'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%205l6-2%206%202%206-2v16l-6%202-6-2-6%202V5zm6-2v16m6-14v16'/></svg>")}
.setting-section[data-section="vehicle"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%2019c5%200%204-7%209-7h5m-3-3l3%203-3%203M5%205h.01'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%2019c5%200%204-7%209-7h5m-3-3l3%203-3%203M5%205h.01'/></svg>")}
.setting-section[data-section="traffic"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%208l2-4h10l2%204M3%209h18v9H3zM5%2018v3m14-3v3M6%2013h2m8%200h2'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%208l2-4h10l2%204M3%209h18v9H3zM5%2018v3m14-3v3M6%2013h2m8%200h2'/></svg>")}
.setting-section[data-section="gearbox"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%207h10M18%207h2M4%2017h2M10%2017h10M14%205v4M6%2015v4'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%207h10M18%207h2M4%2017h2M10%2017h10M14%205v4M6%2015v4'/></svg>")}
.setting-section[data-section="units"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%2015a8%208%200%201%201%2016%200M12%2015l4-5M12%2015h.01'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%2015a8%208%200%201%201%2016%200M12%2015l4-5M12%2015h.01'/></svg>")}
.setting-section[data-section="car"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%208l2-4h10l2%204M3%209h18v9H3zM5%2018v3m14-3v3M6%2013h2m8%200h2'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%208l2-4h10l2%204M3%209h18v9H3zM5%2018v3m14-3v3M6%2013h2m8%200h2'/></svg>")}
.setting-section[data-section="color"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%203a9%209%200%201%200%200%2018h1a2%202%200%200%200%200-4h-1a2%202%200%200%201%200-4h3a5%205%200%200%200%200-10zM8%209h.01M12%206.5h.01M16%209h.01'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%203a9%209%200%201%200%200%2018h1a2%202%200%200%200%200-4h-1a2%202%200%200%201%200-4h3a5%205%200%200%200%200-10zM8%209h.01M12%206.5h.01M16%209h.01'/></svg>")}
.setting-section[data-section="safety"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%203l7%203v5c0%204.6-2.8%208-7%2010-4.2-2-7-5.4-7-10V6l7-3z'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%203l7%203v5c0%204.6-2.8%208-7%2010-4.2-2-7-5.4-7-10V6l7-3z'/></svg>")}
.setting-section[data-section="language"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%203a9%209%200%201%200%200%2018%209%209%200%200%200%200-18zM3%2012h18M12%203c3%203%203%2015%200%2018M12%203c-3%203-3%2015%200%2018'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%203a9%209%200%201%200%200%2018%209%209%200%200%200%200-18zM3%2012h18M12%203c3%203%203%2015%200%2018M12%203c-3%203-3%2015%200%2018'/></svg>")}
.setting-section{padding:var(--s6) 0;border-bottom:1px solid var(--card-line)}
.setting-section:last-of-type{border-bottom:0}
.choice-grid button,.drive-side button,.toggles label{min-height:var(--ctl-h);padding:var(--row-pad);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:var(--text-1);text-align:start}
.choice-grid button strong,.drive-side button strong{font-size:var(--t-ctl);font-weight:var(--w-med);letter-spacing:0;text-transform:none}
.choice-grid button small,.drive-side button small{font-size:var(--t-small);letter-spacing:0;text-transform:none;color:var(--text-3)}
.choice-grid button.active,.drive-side button.active,.toggles label.active{border-color:var(--sel-line);background:var(--sel-bg);color:var(--text-1)}
.choice-grid button.active strong,.drive-side button.active strong{color:var(--sel-line)}
.drive-side{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.drive-side button{display:grid;gap:var(--s1)}
.setting-subtitle strong{font-size:var(--t-ctl)}
.setting-subtitle small{font-size:var(--t-small);color:var(--text-3)}
/* Parked showcase: a card row instead of a paragraph. */
.setting-section.showcase-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s4);align-items:center;padding:var(--card-pad);margin:0 0 var(--s2);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}
.setting-section.showcase-tools h3{grid-column:1;margin:0;font-size:var(--t-title);font-weight:var(--w-med)}
.setting-section.showcase-tools p{grid-column:1;margin:0;font-size:var(--t-small);line-height:1.4;color:var(--text-3)}
.setting-section.showcase-tools>button{grid-column:2;grid-row:1/3;min-height:var(--ctl-h);padding:0 var(--s4);border:1px solid var(--sel-line);border-radius:var(--ctl-r);background:transparent;color:var(--sel-line);font-size:var(--t-ctl);font-weight:var(--w-med);white-space:nowrap}
.setting-section.showcase-tools>button:disabled{opacity:.5}
/* Season choices carry an icon each. */
.season-choices button{display:flex;align-items:center;justify-content:flex-start}
.season-choices button>*+*{margin-left:var(--s3)}
[dir="rtl"] .season-choices button>*+*{margin-left:0;margin-right:var(--s3)}
.season-choices button .icon{flex-shrink:0;color:var(--ui-teal)}
.season-choices button.active .icon{color:var(--sel-line)}
/* Settings touch fixes (QA 10 Sep): the horn collection select was 36 px; anything scrolled into view lands below the fixed heading. */
.horn-studio-select{min-height:var(--ctl-h);padding:0 var(--s4);font-size:var(--t-ctl);border-radius:var(--ctl-r)}
html[data-tesla="true"] .panel{scroll-padding-top:130px}
/* Language switch in the top bar: a small globe pill next to the brand, opening the 23 languages. */
.lang-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ctl-h-min);min-width:var(--ctl-h-min);padding:0 var(--s4);border-radius:var(--ctl-r);border:1px solid var(--ctl-line);background:transparent;color:var(--text-1);font-size:var(--t-ctl);font-weight:var(--w-med);letter-spacing:0;cursor:pointer}
.lang-btn>*+*{margin-left:var(--s2)}
[dir="rtl"] .lang-btn>*+*{margin-left:0;margin-right:var(--s2)}
.lang-btn[aria-expanded="true"]{border-color:var(--sel-line);color:var(--sel-line)}
.lang-menu{position:fixed;z-index:260;width:240px;max-height:min(60vh,440px);overflow:auto;margin:0;padding:var(--s2);list-style:none;background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-r);box-shadow:var(--dialog-shadow)}
.lang-menu button{width:100%;min-height:var(--ctl-h);padding:0 var(--s4);border:0;border-radius:var(--ctl-r);background:transparent;color:var(--text-1);font-size:var(--t-ctl);text-align:start;cursor:pointer}
.lang-menu button[aria-selected="true"]{background:var(--sel-bg);color:var(--sel-line);font-weight:var(--w-med)}
@media (max-width:640px){.lang-btn span{display:none}.lang-btn{padding:0 var(--s4)}}

/* driwe-loader.css */
/* ===========================================================================
   The DRIWE loader.
   ---------------------------------------------------------------------------
   Loaded after the racing sheets so it can settle the scene-status geometry,
   and before car-density/app-density/tesla-compatibility, which stay last.

   The mark is the wordmark's zigzag with a stroke that runs along it and off
   the end — the same path and animation the Drive launch screen uses, so the
   two loading states are recognisably the same product. Racing previously had
   an unlabelled teal dot in a grey pill; this replaces it.

   The important part is not the mark, it is where it sits. Loading is an
   expected state, so it must never cover a control: on the race surfaces the
   loading variant drops to z-index 1 — above the canvas, below the pitch
   column, the sign-in card and the launch dock — and stops taking pointer
   events. Only the states a driver has to act on (slow, unavailable, lost)
   come forward, because only those carry a button.
   =========================================================================== */

.driwe-loader{display:grid;justify-items:center;text-align:center}
.driwe-loader-mark{display:block;width:100%;height:auto;overflow:visible;color:var(--loader-ink,#54e8cf)}
.driwe-loader-mark path{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.driwe-loader .logo-trace-base{opacity:.13}
/* pathLength="100" on the drawn path is what lets this be written in
   percentages whatever the real length of the stroke is. */
.driwe-loader .logo-trace{stroke-dasharray:100 100;animation:driwe-trace 2.6s ease-in-out infinite}
.driwe-loader.is-stopped .logo-trace{animation:none;stroke-dashoffset:0}
@keyframes driwe-trace{
 0%,12%{stroke-dashoffset:100;opacity:.5}
 58%,78%{stroke-dashoffset:0;opacity:1}
 100%{stroke-dashoffset:-100;opacity:.5}
}
.driwe-loader-word{
 margin-top:var(--s2,6px);
 color:#e9f6f4;font-size:var(--t-small,11px);font-weight:var(--w-strong,700);
 letter-spacing:.24em;text-indent:.24em;line-height:1;
}
.driwe-loader-label{margin-top:var(--s3,8px);color:#bdd4dd;font-size:var(--t-body,12px);line-height:1.45;max-width:26ch}
.driwe-loader-detail{margin-top:var(--s1,4px);color:#89a3ae;font-size:var(--t-small,11px);line-height:1.4}

/* Sizes name the job, not the pixels. */
.driwe-loader--sm .driwe-loader-mark{width:34px}
.driwe-loader--sm{grid-auto-flow:column;align-items:center;justify-items:start;text-align:left}
.driwe-loader--md .driwe-loader-mark{width:96px}
.driwe-loader--scene .driwe-loader-mark{width:clamp(96px,16vmin,168px)}

/* --- On the race surfaces ------------------------------------------------ */
/* Loading and slow keep the card's box out of the way entirely: no border, no
   background, centred on the scene the visitor is waiting for. */
.race-display .race-scene-status.scene-loading{
 left:0;right:0;top:0;bottom:0;
 z-index:1;
 display:grid;align-content:center;justify-items:center;
 max-width:none;padding:var(--s5,16px);
 border:0;background:none;box-shadow:none;
 pointer-events:none;
}
/* The pitch column and the sign-in card already darken this half of the
   screen; the mark reads through from the middle of the scene instead of
   competing with them. */
.race-home .race-scene-status.scene-loading{justify-items:center}
.race-display .race-scene-status.scene-loading .driwe-loader-label{color:#cadfe7}

/* Signed in, the loading state is a veil over the stage, not a mark behind
   it. Before this the garage — route card, welcome-back, the dock — was
   painted over a black canvas with the loader peeking out between them for
   as long as the scene took (seconds in the car), which read as a broken
   page rather than a loading one. The veil sits under the bar and above every
   panel (the day-start card is 9, the bar 10), on the theme's own ground, and
   takes the taps meant for what it hides. Notices, consent and the guide
   stay above it. Once the scene is ready the veil fades and the garage is
   simply there underneath; visibility follows the fade so a hidden veil is
   hidden to assistive tech and to tests alike. */
.race-display .race-scene-status.scene-loading[data-surface="garage"]{
 top:var(--shell-header,64px);
 z-index:10;
 pointer-events:auto;
 background:radial-gradient(120% 90% at 50% 0%,#11212b 0%,#070a0d 62%);
 transition:opacity .35s ease,visibility 0s linear .35s;
}
.race-display .race-scene-status.scene-loading[data-surface="garage"].is-leaving{opacity:0;visibility:hidden;pointer-events:none}
html[data-phone="true"] .race-display .race-scene-status.scene-loading[data-surface="garage"]{top:calc(var(--shell-header,56px) + env(safe-area-inset-top,0px))}
@media(prefers-reduced-motion:reduce){
 .race-display .race-scene-status.scene-loading[data-surface="garage"]{transition:none}
}

/* Slow is the one loading state with something to press, so it comes forward
   and takes pointer events back. It is still not a card — the same mark, with
   a button under it. */
.race-display .race-scene-status.scene-loading[data-scene="slow"]{z-index:11;pointer-events:auto}
.race-display .race-scene-status.scene-loading[data-scene="slow"] button{margin-top:var(--s4,12px)}

/* The unavailable and lost states keep the card they already had: they are
   alerts with a retry and a way out, and both have to be reachable. */
.race-display .race-scene-status.scene-unavailable{z-index:12}

/* Inline, in the catalogue notice: the same mark at a size that sits on a
   line of text, so "Loading…" is recognisably the same product loading. */
.race-notice .driwe-loader--sm .driwe-loader-mark{width:30px;color:#ffd79a}
.race-notice .driwe-loader--sm>*+*{margin-left:var(--s3,8px)}
[dir=rtl] .race-notice .driwe-loader--sm>*+*{margin-left:0;margin-right:var(--s3,8px)}

@media(max-width:700px){
 .driwe-loader--scene .driwe-loader-mark{width:clamp(84px,26vw,120px)}
 .driwe-loader-label{max-width:30ch}
}
/* A short landscape band has no room for a wordmark under the mark. */
@media(max-height:520px){
 .race-display .race-scene-status.scene-loading .driwe-loader-word{display:none}
 .driwe-loader--scene .driwe-loader-mark{width:clamp(72px,14vmin,110px)}
}

/* The setting asks for less movement, not less information: the stroke rests
   drawn rather than disappearing, so the mark still reads as the loader. */
@media(prefers-reduced-motion:reduce){
 .driwe-loader .logo-trace{animation:none;stroke-dashoffset:0;opacity:1}
}

/* --- Where the loader can stand ------------------------------------------
   The lobby's scene has a free middle: the route card is top-left, the
   challenge top-right, the dock along the bottom. The signed-out page has no
   free middle at all — the pitch column, the proof row and the sign-in card
   between them use the whole viewport — so there the loader takes the one
   band nothing else claims, between the bar and the top of the pitch, and
   lies down into a single line. */
.race-display .race-scene-status.scene-loading[data-surface="entry"]{
 top:var(--shell-header,64px);bottom:auto;
 align-content:start;justify-items:start;
 padding:var(--s2,6px) var(--s7,24px);
}
[dir=rtl] .race-display .race-scene-status.scene-loading[data-surface="entry"]{justify-items:end}
.driwe-loader--entry{grid-auto-flow:column;align-items:center;justify-items:start;text-align:left}
[dir=rtl] .driwe-loader--entry{text-align:right}
.driwe-loader--entry .driwe-loader-mark{width:42px}
.driwe-loader--entry .driwe-loader-label{margin-top:0;margin-left:var(--s3,8px);max-width:none;font-size:var(--t-small,11px)}
[dir=rtl] .driwe-loader--entry .driwe-loader-label{margin-left:0;margin-right:var(--s3,8px)}
@media(max-width:700px){
 .race-display .race-scene-status.scene-loading[data-surface="entry"]{padding:var(--s2,6px) var(--s5,16px)}
 .driwe-loader--entry .driwe-loader-mark{width:34px}
}

/* car-density.css */
/* --- cockpit density --- */
/* The type lift is the one rule here that really is about the car and not the
   viewport: the screen is at arm's length, so micro reads at 11, control at 14,
   title at 16. A laptop window of the same size is at desk distance and keeps
   the base scale. Numerals, headings and the display step are unchanged. */
html[data-tesla="true"]{--t-micro:11px;--t-small:12px;--t-body:13px;--t-ctl:14px;--t-title:16px}

/* Top bar: one 48 px band, 48 px buttons, no second row. */
/* The band is defined here in full. Height alone was not enough: the offset
   came from a rule that also set a 68px height, so where that rule won the bar
   started at 12 and ended at 60 while everything positioned below it — the
   route card, the ribbon — was written for a bar ending at 56. Four pixels of
   overlap, on exactly the screens where the two rules disagreed. */
html[data-car-density] .topbar{top:8px;height:48px;padding:0 var(--s4)}
html[data-car-density] .topbar .icon-btn,html[data-car-density] .account-btn{width:var(--ctl-h-min);height:var(--ctl-h-min)}
html[data-car-density] .topbar .icon-btn .icon{width:20px;height:20px}
html[data-car-density] .topbar .purchase-cta{white-space:nowrap;padding:0 var(--s4);font-size:var(--t-ctl)}
html[data-car-density] .topbar .session-pill em{display:none}
html[data-car-density] .topbar .experience-switch{font-size:var(--t-ctl)}

/* Road ribbon: follows the bar, one line of road name, a 46 px sign. */
html[data-car-density] .route-ribbon{top:56px;left:var(--s4);min-width:0;max-width:300px;padding:var(--s3);border-radius:var(--card-r)}
html[data-car-density] .route-ribbon>*+*{margin-left:var(--s3)}
html[dir="rtl"][data-car-density] .route-ribbon>*+*{margin-left:0;margin-right:var(--s3)}
html[data-car-density] .speed-sign{width:46px;height:50px}
html[data-car-density] .speed-sign strong{font-size:var(--n-lg)}
html[data-car-density] .speed-sign[data-metric="true"] strong{font-size:var(--n-sm)}
html[data-car-density] .speed-sign.over-limit:after{display:none}
html[data-car-density] .route-copy>strong{font-size:var(--t-title);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-car-density] .route-copy>small{font-size:var(--t-small)}
html[data-car-density] .route-ribbon .speed-warning{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:230px;margin-top:var(--s1);padding-top:var(--s1);font-size:var(--t-small);line-height:1.3}
html[data-car-density] .route-ribbon .speed-warning.hidden{display:none}

/* Driving controls: a column under the ribbon, three 48 px icon buttons. */
html[data-car-density] .demo-mode .demo-driving{top:160px;bottom:auto;left:var(--s4);right:auto;max-width:none;display:grid;justify-items:start;gap:var(--s3)}
html[data-car-density] .demo-mode .demo-driving>.demo-drive-toggle{width:var(--ctl-h-min);min-width:var(--ctl-h-min);height:var(--ctl-h-min);padding:0;border-radius:var(--ctl-r);background:rgba(10,18,23,.86)}
html[data-car-density] .demo-touch-controls{gap:var(--s2);min-width:0;width:102px}
html[data-car-density] .demo-touch-controls button{display:flex;align-items:center;justify-content:center;width:var(--ctl-h-min);min-width:var(--ctl-h-min);height:var(--ctl-h-min);min-height:var(--ctl-h-min);padding:0;border-radius:var(--ctl-r);border-color:rgba(255,255,255,.16);background:rgba(10,18,23,.82)}
html[data-car-density] .demo-touch-controls button:last-child{color:#7ef0d4}
html[data-car-density] .demo-touch-controls button:first-child{color:#ffb4a4}
html[data-car-density] .demo-driving button:active{transform:scale(.97)}

/* Bottom cluster: a 52 px dock and the pedal buttons on one line, the
   readout one step above it, and the legal line under everything. */
html[data-car-density] .control-dock,html[data-car-density] .drive-readout,html[data-car-density] .horn-btn,html[data-car-density] .nitro-btn{margin-bottom:0}
html[data-car-density] .disclaimer{bottom:var(--s1);min-height:16px;font-size:var(--t-micro,10px);line-height:1.2;color:var(--text-3)}
html[data-car-density] .control-dock{left:var(--s4);right:220px;bottom:var(--s7);width:auto;height:var(--ctl-h-lg);padding:0 var(--s3);border-radius:var(--card-r);transform:none}
html[data-car-density] .control-dock .sound-icon,html[data-car-density] .control-dock .dock-icon{width:36px;height:36px}
html[data-car-density] .drive-readout{left:var(--s4);right:220px;bottom:84px;width:auto;min-height:0;padding:var(--row-pad);grid-template-columns:112px minmax(140px,1fr) 104px;gap:var(--s4);border-radius:var(--card-r);transform:none}
html[data-car-density] .meter-label{margin-bottom:var(--s1)}
/* The select says P R N D; the label above it said the same thing. */
html[data-car-density] .drive-label{display:none}
html[data-car-density] .gear select.compact-drive{min-height:var(--ctl-h);width:100%}
html[data-car-density] .manual-gear{margin-top:var(--s1)}
html[data-car-density] .nitro-btn{right:var(--s4);bottom:var(--s7);width:96px;height:var(--ctl-h-lg);border-radius:var(--ctl-r)}
html[data-car-density] .horn-btn{right:116px;bottom:var(--s7);width:96px;height:var(--ctl-h-lg);border-radius:var(--ctl-r)}
html[data-car-density] .horn-control select{right:116px;bottom:84px}
/* The legal line is positioned, not laid out, so it cannot push anything: at
   phone-portrait widths its text wraps to a second line and grows *upward*,
   into the dock it is supposed to sit beneath. The cluster reserves the second
   line across the band where the wrap actually happens. Narrower than this the
   ultra tokens already stack the dock well clear of it, and wider than this the
   line fits in one — including every in-car viewport, which keeps its cluster
   exactly where it was. */
@media (min-width:360px) and (max-width:620px){
 html[data-car-density] .control-dock,
 html[data-car-density] .nitro-btn,
 html[data-car-density] .horn-btn{bottom:calc(var(--s7) + 16px)}
 html[data-car-density] .drive-readout,
 html[data-car-density] .horn-control select{bottom:100px}
}

/* The route card takes the height the bar and the ribbon gave back. */
html[data-car-density] .navigation-map{top:56px;right:var(--s4);max-height:calc(100vh - 238px)}
html[data-car-density] .navigation-compact:not(.navigation-modal){top:56px}
/* The chapter title sits in the free band beside the navigation card. */
html[data-car-density] .demo-mode .cinema-title{left:calc(50% - 76px);width:min(360px,calc(100vw - 520px))}

/* Settings: a one-line head so the first options are visible without scrolling. */
html[data-car-density] .panel{padding:0 var(--s5) var(--s5)}
html[data-car-density] .panel-head{padding:var(--s4) var(--s1) var(--s3)}
html[data-car-density] .panel-head h1{font-size:var(--t-head);line-height:1.1;margin:var(--s1) 0 0}
html[data-car-density] .panel-head p{display:none}
html[data-car-density] .panel-kicker{font-size:var(--t-micro)}
html[data-car-density] .experience-entry{margin:var(--s2) 0 var(--s1)}
html[data-car-density] .experience-entry button{min-height:var(--ctl-h);padding:0 var(--s4);font-size:var(--t-ctl)}
html[data-car-density] .panel-nav{top:62px;gap:var(--s3);padding:var(--s2) var(--s1) var(--s3)}
html[data-car-density] .panel-nav button{min-height:var(--ctl-h)}
html[data-car-density] .setting-section{scroll-margin-top:130px}
[dir="rtl"] .cinema-title{text-align:center}
html[data-car-density] .horn-upgrade,html[data-tesla="true"] .horn-upgrade{min-height:var(--ctl-h-min);align-items:center;font-size:var(--t-ctl)}
html[data-car-density] .car-colors>button,html[data-car-density] .custom-color,html[data-tesla="true"] .car-colors>button,html[data-tesla="true"] .custom-color{width:var(--ctl-h-min);height:var(--ctl-h-min)}
html[data-car-density] .lightweight-toggle,html[data-tesla="true"] .lightweight-toggle{min-height:var(--ctl-h-min)}
html[data-car-density] .manual-gear button,html[data-tesla="true"] .manual-gear button{min-width:var(--ctl-h-min);min-height:var(--ctl-h-min)}

/* app-density.css */
/* ===========================================================================
   Density — one responsive layer for the whole application.
   ---------------------------------------------------------------------------
   Loaded after the screen sheets and before tesla-compatibility.css, which
   stays last.

   Everything here keys on `html[data-density]`, written by src/client/density.js
   from the *available viewport* on both axes. That is the change this sheet
   exists to make: the geometry that used to live behind `html[data-tesla]`
   asked which browser was rendering, when the question is how much room it is
   offering. The car at 880x670 and a laptop window at 1024x700 want the same
   answer; the car at 1920x1200 does not.

     comfortable  wide and tall — full labels, full chrome
     compact      under 1100 wide or under 780 tall — short labels, thin chrome
     ultra        500-560 tall landscape, or a phone — icons, one merged bar

   A media-query fallback follows at the end so the layout is right on the
   first paint, before the script has run, and stays right if it never does.
   Chrome 79 (the car) is the floor: no :has(), no container queries without a
   declaration before them, no gap on flex rows.
   =========================================================================== */

/* --- The proportional unit ------------------------------------------------
   One length that everything drawn — icons, glyphs, badge dots, rules — is a
   multiple of, so the interface keeps its proportions instead of holding some
   parts at a fixed pixel size while the type around them scales.

   It follows vmin, the honest measure of "how big is this screen": it tracks
   the short side, so a phone in the hand, the car's landscape panel and a
   desktop window each get a unit sized to what they actually are. The value is
   tuned to land on exactly 1px at 1280x720 — the standard car target — which
   is why every existing `size={18}` renders unchanged there and only moves as
   the screen moves away from that reference.

   Density shifts the curve rather than replacing it: a compact screen is
   usually the car, read at arm's length, so its floor is higher than raw
   proportion would give; an ultra-short screen is a phone at reading distance
   and can afford a smaller one. Touch targets are NOT on this scale — 44px is
   a fact about thumbs, not about screens, and stays absolute throughout. */
:root {
  /* The ceiling was 1.5px, which grew a size={24} glyph to 36px on a 1920x1200
     panel and overflowed cards whose icon slots were drawn for a fixed 24. A
     28px cap keeps the proportion visible without outgrowing the boxes the
     icons live in — proportional, not disruptive. */
  --ui-scale: clamp(.92px, .1389vmin, 1.18px);
  --ui-radius: clamp(8px, 1.1vmin, 14px);
  --ui-hairline: max(1px, .085vmin);
}
html[data-density="compact"] {
  /* Arm's length: the floor rises so the car never drops below a readable glyph. */
  --ui-scale: clamp(1px, .155vmin, 1.32px);
  --ui-radius: clamp(8px, 1vmin, 12px);
}
html[data-density="ultra"] {
  --ui-scale: clamp(.88px, .2vmin, 1.12px);
  --ui-radius: clamp(7px, .9vmin, 10px);
}

/* The 111 literal icon sizes scattered through the sheets were the other half
   of the problem: they pinned a glyph to 20px while its label grew. They are
   superseded here — the element carries its size inline from the unit above,
   which is what a per-icon value has to be. This rule only guarantees the
   glyph never collapses or overflows its control. */
.ui-tool > .icon, button > .icon, a > .icon, label > .icon {
  flex: 0 0 auto;
  max-width: 2.4em;
  max-height: 2.4em;
}

/* Checkboxes and radios are drawn controls too, and the parked confirmation is
   the one that gates every race. At 21x21 it was the smallest aim point in the
   product. It scales with the unit and keeps a floor a thumb can hit; its label
   remains the real 48px target, so the box growing costs no reachability. */
.race-check input[type="checkbox"], .race-check input[type="radio"] {
  width: clamp(24px, 22 * var(--ui-scale, 1px), 32px);
  height: clamp(24px, 22 * var(--ui-scale, 1px), 32px);
  min-height: clamp(24px, 22 * var(--ui-scale, 1px), 32px);
  flex: 0 0 auto;
}

/* --- Type, proportional ---------------------------------------------------
   Three separate declarations were fighting here and the flat ones were
   winning: design-system.css sets the whole application scale in fixed pixels,
   racing.css sets a proportional one, and car-density.css plus racing.css both
   override the proportional one back to fixed pixels for the car. The result
   was type that never answered the screen — a control label read 14px at
   880x670 and the same 14px at 1920x1200, which is the complaint.

   The curve is restored, and the car's arm's-length bump becomes a raised
   floor rather than a flat value. Calibration is deliberate: at 1280x720 and
   880x670 — the two sizes the car actually reports — the compact steps land on
   the values shipping today, so nothing a current driver sees changes size. It
   is the larger panels that finally grow, which is the whole point. */
:root, html[data-density="comfortable"] {
  --t-micro: clamp(10px, 1.55vmin, 13px);
  --t-small: clamp(11px, 1.75vmin, 14px);
  --t-body: clamp(12px, 1.95vmin, 16px);
  --t-ctl: clamp(13px, 2.1vmin, 17px);
  --t-title: clamp(15px, 2.5vmin, 20px);
  --t-head: clamp(19px, 3.1vmin, 26px);
  --t-display: clamp(24px, 4vmin, 34px);
}
/* Read at arm's length: higher floors, same curve. The floors reproduce the
   car's current sizes exactly at vmin 6.7-7.2. */
html[data-density="compact"], html[data-density="compact"] .race-app, html[data-density="compact"] .race-display {
  --t-micro: clamp(11px, 1.53vmin, 14px);
  --t-small: clamp(12px, 1.67vmin, 15px);
  --t-body: clamp(13px, 1.81vmin, 17px);
  --t-ctl: clamp(14px, 1.95vmin, 18px);
  --t-title: clamp(16px, 2.22vmin, 21px);
  --t-head: clamp(19px, 3.1vmin, 26px);
  --t-display: clamp(24px, 4vmin, 34px);
}
/* A phone on its side has the least room and the shortest reading distance. */
html[data-density="ultra"], html[data-density="ultra"] .race-app, html[data-density="ultra"] .race-display {
  --t-micro: clamp(10px, 2.4vmin, 12px);
  --t-small: clamp(11px, 2.7vmin, 13px);
  --t-body: clamp(12px, 3vmin, 14px);
  --t-ctl: clamp(13px, 3.2vmin, 15px);
  --t-title: clamp(14px, 3.6vmin, 17px);
  --t-head: clamp(17px, 4.4vmin, 21px);
  --t-display: clamp(21px, 5.4vmin, 27px);
}

/* --- Density tokens ------------------------------------------------------ */
/* The chrome bands are named once here. Every header, HUD bar and footer in
   the app sizes from these, so "the header is too tall" is one edit. */
:root {
  --shell-header: 64px;
  --shell-bar: 56px;
  --shell-dock: 60px;
  --shell-gut: 16px;
  --shell-pad: 16px;
}
html[data-density="compact"] {
  --shell-header: 52px;
  --shell-bar: 52px;
  --shell-dock: 52px;
  --shell-gut: 12px;
  --shell-pad: 12px;
}
html[data-density="ultra"] {
  /* The header band is the one that gives: at 46px the controls inside it still
     hold their own 48px floor and overhang it by a pixel, because that floor is
     about thumbs, not screens. The merge while racing is done by collapsing the
     top bar (below), not by shrinking the band the controls live in, which is
     what a zero-height bar did: the cap derived from it computed a negative
     height and the lobby's Pause button vanished. */
  --shell-header: 46px;
  --shell-bar: 52px;
  --shell-dock: 52px;
  --shell-gut: 8px;
  --shell-pad: 8px;
}

/* The racing scale tightens with density rather than with a user agent. The
   car keeps the larger type it needs at arm's length, because at 880x670 it is
   `compact`, and compact raises the small steps rather than lowering them. */
html[data-density="compact"] .race-app, html[data-density="compact"] .race-display {
  --s5: 12px; --s6: 14px; --s7: 16px;
  --card-pad: 10px;
}
html[data-density="ultra"] .race-app, html[data-density="ultra"] .race-display {
  --s4: 8px; --s5: 10px; --s6: 12px; --s7: 12px;
  --card-pad: 8px;
  --card-r: 10px;
  /* A short screen gives back padding, never the aim point: 48px is the floor
     `targetsReachable` in the layout suite enforces at every viewport, and 46
     put the lobby chat, the pairing actions and Get ready under it at 960x540. */
  --ctl-h: 48px; --ctl-h-lg: 48px; --ctl-h-tile: 48px;
}

/* --- The responsive label ------------------------------------------------ */
/* See src/client/ToolbarButton.jsx. Both forms are in the DOM; this chooses.
   The whole label is aria-hidden, so hiding it never removes a control's name. */
.ui-label { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-label-short { display: none; }

html[data-density="compact"] .ui-tool--secondary .ui-label-full,
html[data-density="compact"] .ui-tool--tertiary .ui-label-full { display: none; }
html[data-density="compact"] .ui-tool--secondary .ui-label-short,
html[data-density="compact"] .ui-tool--tertiary .ui-label-short { display: inline; }

/* Ultra keeps the icon and drops the words — but only where a short form was
   never the point. A control with no icon would become an empty box (§55), so
   the label stays unless something visible remains. */
html[data-density="ultra"] .ui-tool--secondary .ui-label-full,
html[data-density="ultra"] .ui-tool--secondary .ui-label-short { display: none; }
html[data-density="ultra"] .ui-tool--tertiary .ui-label-full,
html[data-density="ultra"] .ui-tool--tertiary .ui-label-short { display: none; }
html[data-density="ultra"] .ui-tool--secondary > .icon:only-child ~ .ui-label,
html[data-density="ultra"] .ui-tool--tertiary > .icon:only-child ~ .ui-label { display: none; }
/* Primary actions keep their words at every size: Pause, Resume, Race again,
   Confirm and every destructive answer (§12). */
html[data-density="ultra"] .ui-tool--primary .ui-label-full { display: inline; }

/* A control that has lost its label is a square, not a pill. */
html[data-density="ultra"] .ui-tool--secondary,
html[data-density="ultra"] .ui-tool--tertiary { padding-left: 0; padding-right: 0; }

.ui-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ctl-h-min, 48px);
  min-width: var(--ctl-h-min, 48px);
  max-width: 100%;
  padding: 0 var(--s4, 12px);
  border-radius: var(--ctl-r, 10px);
  font-size: var(--t-ctl, 13px);
  font-weight: var(--w-med, 600);
  white-space: nowrap;
}
.ui-tool > .icon + .ui-label { margin-left: var(--s3, 8px); }
[dir="rtl"] .ui-tool > .icon + .ui-label { margin-left: 0; margin-right: var(--s3, 8px); }
/* An icon-only control is square and never squeezes its glyph. */
.ui-tool > .icon { flex: 0 0 auto; }
.ui-tool .ui-label:empty { display: none; }

/* --- Application shell ---------------------------------------------------- */
/* Application screens are screens, not pages: the document does not scroll and
   exactly one region inside it may. Marketing and legal pages keep normal page
   scrolling and are excluded by not carrying the attribute. */
html[data-app-shell="true"], html[data-app-shell="true"] body {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
html[data-app-shell="true"] body > #root {
  height: 100vh;
  height: var(--app-height, 100dvh);
  min-height: 0;
  overflow: hidden;
}

/* Scrollbars, where a region genuinely owns one: subtle, contained, and never
   able to push the document sideways (§39). */
html[data-app-shell="true"] * { scrollbar-width: thin; }
html[data-app-shell="true"] *::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-app-shell="true"] *::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(255, 255, 255, .18); }
html[data-app-shell="true"] *::-webkit-scrollbar-track { background: transparent; }

/* ===========================================================================
   Racing
   =========================================================================== */

/* The race document scrolled because `.race-app` asked for `min-height:100vh`
   inside a padded box: any rounding, any 1 px border, and the page grew a
   scrollbar. It is now a fixed shell whose middle row takes what is left. */
body.race-body { overflow: hidden; }
body.race-body #root { min-height: 0; height: 100vh; height: var(--app-height, 100dvh); overflow: hidden; }
.race-app.race-display {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: var(--app-height, 100dvh);
  min-height: 0;
  padding: 0 var(--shell-pad) 0;
  overflow: visible;
}
/* Placement is explicit, never by source order. The screen has a dozen direct
   children — canvas, countdown, nameplates, grain, coin bursts, notices — and
   auto-placement would give each its own implicit row and leave the road with
   whatever was left. Everything defaults to the backdrop cell; the three
   structural bands are the only things that claim a row. */
.race-app.race-display > * { grid-area: 1 / 1 / -1 / 2; }
.race-app.race-display > .topbar {
  grid-area: 1 / 1 / 2 / 2;
  /* Drive floats its bar over the map. Racing cannot afford to: a floating bar
     is out of flow, so the shell's first row collapsed to nothing and the bar
     landed on the race HUD underneath it. Here it is a band the grid measures. */
  position: static;
  top: auto; left: auto; right: auto;
  margin: 0;
  border-radius: 0;
  border-width: 0 0 1px;
  height: var(--shell-header);
  min-height: var(--shell-header);
}
/* Panels that float inside the road still need to know where the bar ends.
   They read the band rather than repeating a number that has now moved twice. */
.race-display .race-stage-menu,
.race-display .race-garage .race-offer { top: var(--s4, 12px); }
/* The sign-in card is the exception, and only on a narrow screen. Everywhere
   else it floats beside the pitch and hangs from the top of the band like the
   panels above. On a phone there is no beside: racing-entry.css stacks the
   two, pitch in the upper 44% and the card under it, and an unconditional
   top here overrode that media query and grew the card over the whole page —
   the signed-out home screen was nothing but a login box. */
@media (min-width: 701px) {
  .race-display .race-entry > .race-login { top: var(--s4, 12px); }
}
/* Clearing the bands, not sitting on them. When the stale `top:62px` offsets
   went I replaced this with a flat gutter, which put every notice — including
   "Race connection lost" — straight over the toolbar's logo and audio control.
   Photographed in Safari. It clears the header, and the race bar too once
   there is one. */
.race-display > .race-notice { top: calc(var(--shell-header) + var(--s2, 6px)); }
.race-display[data-race-state="room"] > .race-notice,
.race-display[data-race-state="finished"] > .race-notice,
.race-display[data-race-state="driving"] > .race-notice {
  top: calc(var(--shell-header) + var(--shell-bar) + var(--s2, 6px));
}
.race-app.race-display > .race-garage,
.race-app.race-display > .race-play,
.race-app.race-display > .race-entry,
.race-app.race-display > .race-login { grid-area: 2 / 1 / 3 / 2; }
.race-app.race-display > .race-page-footer { grid-area: 3 / 1 / 4 / 2; }

/* The middle row is the game. It is never given a pixel height — that is the
   whole point of the grid — and `min-height:0` is what lets it shrink instead
   of pushing the dock off the bottom. */
.race-garage, .race-display .race-play {
  height: auto;
  min-height: 0;
  align-self: stretch;
}
.race-display .race-play { display: block; position: relative; }

/* The two chrome bands, sized from the shared tokens. */
.race-display .race-play-top { height: var(--shell-bar); padding: 0 var(--shell-gut); }
.race-display .race-play-footer { height: var(--shell-dock); padding: 0 var(--shell-gut); }
.race-app .topbar { height: var(--shell-header); }
/* HUD offsets follow the bands rather than repeating their numbers. */
.race-app, .race-display { --hud-bar: var(--shell-bar); --hud-dock: var(--shell-dock); --hud-gut: var(--shell-gut); }

/* --- The top toolbar ----------------------------------------------------- */
/* The logo was a 52 px wordmark floating in a 96 px box. It is now sized to the
   bar it sits in and nothing else (§10). The selector has to outrank the car
   layer's `html[data-tesla] .race-display .topbar .brand-logo`, which is what
   pinned it to 26 px tall in the first place. */
.topbar .brand-logo,
html[data-app-shell] .race-app.race-display .topbar .brand-logo {
  width: clamp(76px, 7vw, 96px);
  max-width: none;
  height: auto;
  max-height: calc(var(--shell-header) - 20px);
}
html[data-density="ultra"] .topbar .brand-logo,
html[data-density="ultra"] .race-app.race-display .topbar .brand-logo { width: clamp(52px, 10vw, 68px); }

/* Controls in a band are 48px, and the bands are sized to hold them — rather
   than the reverse, which made the control a function of the band and produced
   a negative height the moment a band went to zero. */
.race-display .race-play-top .ui-tool,
.race-display .race-play-top button,
.race-display .race-play-footer .ui-tool,
.race-display .race-play-footer button {
  min-height: 48px;
  height: 48px;
}
.race-display .topbar .top-actions > button,
.race-display .topbar .top-actions > a {
  height: min(48px, calc(var(--shell-header) - 4px));
  min-height: 44px;
}

/* Every action in the bar is the same control, so they stop disagreeing about
   their own size. The blanket 52 px square that crushed the labels is gone. */
.race-display .topbar .top-actions > button,
.race-display .topbar .top-actions > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ctl-h-min, 48px);
  min-width: var(--ctl-h-min, 48px);
  max-width: 100%;
  padding: 0 var(--s3, 8px);
  white-space: nowrap;
  overflow: hidden;
}
.race-display .topbar .top-actions > button > span,
.race-display .topbar .top-actions > a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* A phone's floor is 44, not 48 (racing-mobile.css sets it; this sheet loads
   after it, so the 48 px square above was winning and the six utilities needed
   314 px of a 302 px bar — the driver's own avatar was the one clipped off the
   end). Restated here so the later sheet stops overriding the narrower floor. */
html[data-phone="true"] .race-display .topbar .top-actions > button,
html[data-phone="true"] .race-display .topbar .top-actions > a,
html[data-phone="true"] .race-display .topbar .top-actions .race-audio-trigger {
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0 var(--s1, 4px);
}

/* Compact and below, the bar's utilities are icons. Each one already carries an
   aria-label, so this removes decoration and not meaning. */
html[data-density="compact"] .race-display .topbar .top-actions .race-audio-trigger > span,
html[data-density="compact"] .race-display .topbar .top-actions > .race-friends-trigger > span,
html[data-density="compact"] .race-display .topbar .top-actions > .experience-switch > span,
html[data-density="ultra"] .race-display .topbar .top-actions > button > span:not(.ui-label),
html[data-density="ultra"] .race-display .topbar .top-actions > a > span:not(.ui-label) { display: none; }
html[data-density="compact"]:not([data-phone="true"]) .race-display .topbar .top-actions .race-audio-trigger,
html[data-density="compact"]:not([data-phone="true"]) .race-display .topbar .top-actions > .race-friends-trigger,
html[data-density="compact"]:not([data-phone="true"]) .race-display .topbar .top-actions > .experience-switch {
  width: var(--ctl-h-min, 48px);
  padding: 0;
}
/* The pending-requests badge is meaning, not decoration: it stays. */
.race-display .topbar .race-friends-trigger > b { display: block; }

/* The session pill is a status, and the first thing to go when width is short. */
html[data-density="compact"] .race-display .topbar .session-pill em { display: none; }
html[data-density="ultra"] .race-display .topbar .session-pill { display: none; }

/* Currency is a pill, not a card (§47). */
/* Outranks racing-i18n.css, which stacked the coin glyph above the number in a
   56 px column. A currency readout is a pill: one line, icon then figure. */
.race-display .topbar .top-actions > .race-wallet-trigger,
.race-display .topbar .race-wallet-trigger {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: 120px;
  padding: 0 var(--s4, 12px);
  border-radius: 999px;
}
.race-display .topbar .top-actions > .race-wallet-trigger > .icon + b,
.race-display .topbar .race-wallet-trigger > .icon + b { margin-left: var(--s2, 6px); }
.race-display .topbar .race-wallet-trigger > b { font-size: var(--t-ctl, 13px); font-weight: var(--w-med, 600); }
[dir="rtl"] .race-display .topbar .race-wallet-trigger > .icon + b { margin-left: 0; margin-right: var(--s2, 6px); }
.race-display .topbar .race-wallet-trigger > b { font-variant-numeric: tabular-nums; }

/* --- The race HUD bar ---------------------------------------------------- */
/* One row: where you are, then the numbers, then Pause. Grid, so a long stage
   name ellipses instead of pushing the Pause button off the screen (§49). */
.race-display .race-play-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: var(--s4, 12px);
}
.race-display .race-play-top > div:first-child { min-width: 0; }
.race-display .race-play-top h1 {
  font-size: clamp(13px, 1.5vw, 18px);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.race-display .race-play-top .race-eyebrow {
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.race-display .race-live-stats > span { min-width: 0; }
.race-display .race-live-stats small { font-size: clamp(.68rem, .8vw, .9rem); white-space: nowrap; }
.race-display .race-live-stats b { font-size: clamp(1.05rem, 1.7vw, 1.9rem); line-height: 1.05; }

/* Compact merges the eyebrow into the title line: "Night City · S3". The
   heading keeps the name; the stage moves beside it rather than above it. */
html[data-density="compact"] .race-display .race-play-top > div:first-child,
html[data-density="ultra"] .race-display .race-play-top > div:first-child {
  display: flex;
  align-items: baseline;
  min-width: 0;
}
html[data-density="compact"] .race-display .race-play-top .race-eyebrow,
html[data-density="ultra"] .race-display .race-play-top .race-eyebrow {
  order: 2;
  margin: 0 0 0 var(--s3, 8px);
  flex: 0 1 auto;
}
[dir="rtl"] html[data-density="compact"] .race-display .race-play-top .race-eyebrow { margin: 0 var(--s3, 8px) 0 0; }
html[data-density="compact"] .race-display .race-play-top h1,
html[data-density="ultra"] .race-display .race-play-top h1 { order: 1; flex: 0 1 auto; }

/* Ultra short landscape merges the global bar into the race bar entirely (§22,
   §35): one row carrying brand, race state, numbers and Pause. The toolbar's
   own utilities move into the dock's overflow rather than disappearing. */
/* Only while the car is actually moving. In the lobby, paused, or on the
   result the second row comes back, because that is when Friends, the wallet
   and the profile are what the screen is for — §33 says secondary features
   move, never disappear. */
html[data-density="ultra"] .race-display[data-race-state="driving"] .topbar {
  position: static;
  height: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: hidden;
  /* Not merely clipped: a 0px-tall bar with overflow:hidden still holds its
     seven controls in the tab order and in the accessibility tree, so a
     keyboard user tabbed through invisible buttons and a reader announced
     them. visibility:hidden takes them out of both. */
  visibility: hidden;
}
html[data-density="ultra"] .race-display[data-race-state="driving"] .race-play-top { height: var(--shell-dock); }
/* With both rows present the shell is still only two bands of 46 px. */
html[data-density="ultra"] .race-display[data-race-state="room"],
html[data-density="ultra"] .race-display[data-race-state="finished"] { --shell-header: 46px; }

/* --- Race result --------------------------------------------------------- */
/* On a landscape screen the result is a side panel over a living scene (§17),
   not a dialog that fills the car. `.race-overlay` already aligns to the start;
   what was missing was a width that reads as a panel and a scrim that does not
   black out the road behind it. */
.race-display .race-play .race-overlay { background: linear-gradient(90deg, var(--scrim) 0%, var(--scrim) 42%, rgba(4, 9, 11, .35) 100%); }
[dir="rtl"] .race-display .race-play .race-overlay { background: linear-gradient(270deg, var(--scrim) 0%, var(--scrim) 42%, rgba(4, 9, 11, .35) 100%); }
.race-display .race-dialog.race-results-dialog {
  width: clamp(340px, 32vw, 500px);
  max-width: 100%;
  padding: var(--s4, 12px) var(--s5, 16px);
}
html[data-density="compact"] .race-display .race-dialog.race-results-dialog { padding: var(--s3, 8px) var(--s4, 12px); }

/* The stats read as one row of three, and the supporting lines sit under them
   rather than each in its own card. */
.race-result-stats { column-gap: var(--s3, 8px); margin-top: var(--s2, 6px); }
.race-result-stats strong { font-size: clamp(1.3rem, 2vw, 2.2rem); }
.race-result-stats small { font-size: clamp(.68rem, .8vw, .9rem); }
/* Personal best and tour progress on one line (§71.12). */
.race-results .race-result-best { margin-top: var(--s2, 6px) !important; }
html[data-density="compact"] .race-results .race-result-mark,
html[data-density="ultra"] .race-results .race-result-mark { display: none; }

/* The upgrade nudge was a card with a heading, a sentence, a price and a
   full-width button — 35-40% of the panel for a secondary action (§19). It is
   now one row: what, why, how much, and the action. */
.race-upgrade-advice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s3, 8px);
  flex-wrap: nowrap;
  padding: var(--s2, 6px) var(--s3, 8px);
  margin: var(--s2, 6px) 0;
}
.race-upgrade-advice > * + * { margin-left: 0; }
[dir="rtl"] .race-upgrade-advice > * + * { margin-right: 0; }
.race-upgrade-advice > div { min-width: 0; }
.race-upgrade-advice strong { margin: 0; font-size: var(--t-ctl, 13px); }
/* The explanatory sentence is the first thing to go: the part name and the
   price carry the decision. */
.race-upgrade-advice p { display: none; }
.race-upgrade-advice small { display: inline; font-size: var(--t-small, 11px); }
.race-upgrade-advice small + small:before { content: " · "; }
.race-upgrade-advice button {
  flex: 0 0 auto;
  margin: 0;
  min-height: var(--ctl-h-min, 48px);
  padding: 0 var(--s3, 8px);
  white-space: nowrap;
}
html[data-density="comfortable"] .race-upgrade-advice p { display: block; margin: 0; font-size: var(--t-small, 11px); }

/* The secondary cards — tour progress, mastery, track badge, receipt — were
   four stacked boxes with a heading and a sentence each, which is what pushed
   the panel past the screen. Compact and below they are single rows: the fact
   on the left, the figure on the right, no second line of prose (§18). */
html[data-density="compact"] .race-result-body .race-arcade-journey,
html[data-density="ultra"] .race-result-body .race-arcade-journey,
html[data-density="compact"] .race-result-body .race-scenario-result,
html[data-density="ultra"] .race-result-body .race-scenario-result,
html[data-density="compact"] .race-result-body .race-track-result,
html[data-density="ultra"] .race-result-body .race-track-result {
  padding: var(--s2, 6px) var(--s3, 8px);
  margin: var(--s1, 4px) 0;
  border-radius: var(--ctl-r, 10px);
}
html[data-density="compact"] .race-result-body .race-scenario-result > div > span,
html[data-density="ultra"] .race-result-body .race-scenario-result > div > span,
html[data-density="compact"] .race-result-body .race-track-result > div > span,
html[data-density="ultra"] .race-result-body .race-track-result > div > span,
html[data-density="compact"] .race-result-body .race-arcade-journey .race-arcade-next,
html[data-density="ultra"] .race-result-body .race-arcade-journey .race-arcade-next,
html[data-density="compact"] .race-result-body .race-recap p,
html[data-density="ultra"] .race-result-body .race-recap p { display: none; }
html[data-density="compact"] .race-result-body .race-scenario-result strong,
html[data-density="ultra"] .race-result-body .race-scenario-result strong,
html[data-density="compact"] .race-result-body .race-track-result strong,
html[data-density="ultra"] .race-result-body .race-track-result strong { font-size: var(--t-ctl, 13px); }

/* "Prepare for your next race" said nothing the part name did not. */
html[data-density="compact"] .race-upgrade-advice > div > small:first-child,
html[data-density="ultra"] .race-upgrade-advice > div > small:first-child { display: none; }

/* The result is not the race: once the finish line is crossed the HUD bar is
   showing numbers the panel repeats, and the dock's Mute/Exit are the same two
   actions the panel offers. So the result overlay takes the whole play area
   rather than the band between them — 104 px of panel back on a 670 px screen,
   which is a third of the body's height (§18). */
.race-display .race-play .race-overlay.is-result {
  top: var(--s2, 6px);
  bottom: var(--s2, 6px);
  /* The scrim covers the dock to gain the panel its height. It must not also
     take the dock's taps: Mute and Exit stayed visible under it and stopped
     working. The backdrop is scenery; the panel is the control. */
  pointer-events: none;
}
.race-display .race-play .race-overlay.is-result > .race-dialog { pointer-events: auto; }
/* Pause goes only when the race is over. Hiding it whenever the car was not
   moving took it away in the lobby and while paused too, where the layout
   contract still requires a reachable 48px control — the result screen was the
   only place it was both covered and pointless. */
.race-display[data-race-state="finished"] .race-hud-pause { display: none; }
/* A landscape result also uses the width it has (§36): the panel widens with
   the screen so the blocks below the stats have somewhere to go. */
@media (min-width: 1100px) and (orientation: landscape) {
  .race-display .race-dialog.race-results-dialog { width: clamp(420px, 38vw, 620px); }
}

/* On a tall-enough landscape screen the result must simply fit (§18). The body
   keeps its scroll for genuinely short screens and long multiplayer standings,
   but nothing inside it may own a second one (§7). */
.race-result-body > * { overscroll-behavior: contain; }
.race-result-body .race-chat-messages,
.race-result-body .race-standings,
.race-result-body .race-leaderboard-list { max-height: none; overflow: visible; }

/* Race again is the strongest action; Garage is secondary (§71.15-16). */
.race-result-actions { padding-top: var(--s3, 8px); }
.race-result-actions > button { margin-bottom: var(--s2, 6px); }
.race-result-secondary { column-gap: var(--s2, 6px); }

/* --- The race dock ------------------------------------------------------- */
.race-display .race-play-footer > span { font-size: var(--t-small, 11px); }
html[data-density="compact"] .race-display .race-play-footer small,
html[data-density="ultra"] .race-display .race-play-footer small { display: none; }
.race-display .race-play-footer .ui-tool { padding: 0 var(--s3, 8px); }

/* --- Menus --------------------------------------------------------------- */
/* The setup panel is a master/detail: tabs stay put, one region scrolls, the
   launch action is pinned. It already had that shape; what it lacked was a
   width that uses the car's horizontal room instead of a 330 px column beside
   an empty screen (§9). */
html:not([data-phone="true"]) .race-stage-menu { width: clamp(320px, 30vw, 460px); }
/* Phones are excluded from all three widths: there the panel is a full-bleed
   bottom sheet (racing-mobile.css), and this sheet loads after it, so an
   unscoped `width` won here and left a 300 px sheet in a 390 px screen with
   90 px of dead space beside it. Width only. The panel is anchored to the screen's right edge, and the car
   showcase tools are anchored bottom-left with `max-width:calc(100% - 432px)`
   reserving the panel's column — so an over-constrained box that sets `left`
   against the base rule's `right` does not move the panel, it moves it to the
   other side of the screen and parks it on the car-view buttons. */
html[data-density="compact"]:not([data-phone="true"]) .race-stage-menu { width: clamp(300px, 42vw, 400px); }

/* The setup panel stops above the launch dock, at every height.
   Both are floating cards over the same screen, and the panel is on top, so
   where they meet the panel wins and the dock's Car & sound and Course buttons
   stop responding. The reservations for this were literals — 107px, then 132px
   for the car, then 105px in one media query — each true for the dock as it was
   when that line was written and none of them true once density changed its
   padding. At 1280x600 the panel ran to 588 while the dock started at 499.
   It reads the dock's measured height instead (published by the ResizeObserver
   in RaceApp), plus the dock's own 31px offset and a gutter. Specificity has to
   clear `html[data-tesla] .race-home.has-setup-footer .race-stage-menu`. */
html[data-app-shell] .race-display.race-home.has-setup-footer .race-stage-menu {
  bottom: calc(var(--launch-dock-h, 96px) + 31px + var(--s4, 12px));
}
.race-menu-tabs button { min-height: var(--ctl-h-min, 48px); }
html[data-density="ultra"] .race-menu-tabs button > span { display: none; }
html[data-density="ultra"] .race-menu-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Six 48px tabs, five gaps and the close button's 60px slot need 374px. The
   ultra sheet is clamp(320px, 30vw, 460px) — 320px at 960x540 — so each tab
   overlapped the next by 5px. A floor on the sheet keeps the tabs whole. */
html[data-density="ultra"]:not([data-phone="true"]) .race-home .race-stage-menu { min-width: 374px; }
/* Switching section must not inherit the previous section's scroll (§40). */
.race-menu-content { scroll-behavior: auto; }

/* --- The garage's two decisions ------------------------------------------
   Which car and which engine sound are the two choices that define a race, and
   they sat 300px apart: the car picker, then the selected-car profile card,
   then a three-way section switcher, and only then the sound. Measured at
   880x670 the garage tab held 898px of content in a 294px window, which put
   the engine picker — the thing this product is actually about — two screens
   below the fold with nothing to say it was there.

   They now share the first row. Everything else keeps its order underneath.
   Grid rather than flex because the car's Chrome 79 renders flex gap as zero. */
.race-menu-page.race-garage-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.race-menu-page.race-garage-editor > * { grid-column: 1 / -1; }
.race-menu-page.race-garage-editor > label:first-of-type {
  grid-column: 1;
  grid-row: 1;
}
.race-menu-page.race-garage-editor > .race-garage-audio { grid-column: 2; grid-row: 1; }
/* Its label is a two-column grid whose select reserves 140px. In half a panel
   that leaves nothing for the caption, so "Engine sound" collapsed to a clipped
   icon. Paired, the caption sits above the select like every other field. */
.race-menu-page.race-garage-editor > .race-garage-audio > label { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
/* Under about 340px of panel two columns would truncate both labels, so the
   narrow case keeps the single column and the original order. */
@media (max-width: 480px) {
  .race-menu-page.race-garage-editor { grid-template-columns: minmax(0, 1fr); }
  .race-menu-page.race-garage-editor > label:first-of-type,
  .race-menu-page.race-garage-editor > .race-garage-audio { grid-column: 1; grid-row: auto; }
}

/* Selectable collections are grids, not columns (§6, §44). The car has the
   width for three; a compact screen takes two. */
.race-menu-page .race-tracks { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* The course picker is sized to show a whole page of courses without a scroll:
   filters, six cards and the pager. At 880x670 it ran nine pixels over, which
   is a scrollbar and a half-visible last row for the sake of three gaps. The
   gaps give way instead — the cards and their touch targets do not move. */
html[data-density="compact"] .race-home .race-course-browser,
html[data-density="ultra"] .race-home .race-course-browser { padding: var(--s2, 6px); gap: var(--s1, 4px); }
html[data-density="compact"] .race-home .race-course-browser .race-tracks,
html[data-density="ultra"] .race-home .race-course-browser .race-tracks { gap: var(--s1, 4px); }
html[data-density="compact"] .race-home .race-course-filters,
html[data-density="ultra"] .race-home .race-course-filters { gap: var(--s2, 6px); }
html[data-density="comfortable"]:not([data-phone="true"]) .race-stage-menu { width: clamp(420px, 34vw, 560px); }
html[data-density="comfortable"] .race-menu-page .race-tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- The lobby's quick actions -------------------------------------------
   Photographed in Safari, reproduced in Chromium at every desktop size: the
   Change car and Coins buttons rendering 73px wide and 162px tall, one letter
   per line. Three nested halvings did it — a 500px dialog, split into a main
   column and a roster beside it, and the main column split again into two
   buttons. What was left for a label was about 27px.

   Where the roster takes half the dialog, the quick actions take the full
   remaining column rather than dividing it again, and the dialog is widened to
   carry both. This is the same defect the toolbar had: a box shrunk without
   deciding what happens to what is inside it. */
@media (min-width: 840px) and (orientation: landscape) {
  .race-display .race-dialog.race-lobby-dialog { width: clamp(420px, 46vw, 760px); }
  .race-lobby-body.has-side .race-lobby-quick { grid-template-columns: minmax(0, 1fr); row-gap: var(--s2, 6px); }
}

/* The general guarantee behind it: a label in one of these controls ends in an
   ellipsis, never in a column of characters. Shrinking the box and deciding
   what happens to its contents are one decision, everywhere. */
.race-icon-action { white-space: nowrap; }
.race-icon-action > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Pause --------------------------------------------------------------- */
/* A light overlay, not a page (§42). */
.race-display .race-dialog:not(.race-results-dialog) { width: clamp(340px, 34vw, 520px); }

/* The lobby is the exception. Pause is a light interruption over a race you can
   still see; the lobby is the screen where the car is chosen, the coins are
   spent and the grid fills, and at 340px it put its roster and its ready action
   several hundred pixels down a 320px scroller while half the car's display
   stayed black. On a landscape screen with the room it takes a panel width, and
   racing-results.css gives it two columns at the same breakpoint. */
/* The width follows the screen rather than a breakpoint: a 340px column is
   right on a phone and wrong on every panel the car ever shows, and the cap
   keeps it a panel rather than a page on a desktop monitor. */
.race-display .race-dialog.race-lobby-dialog { width: clamp(340px, 86vw, 820px); }

/* The rotate hint sat at 44% of the screen — the middle of whatever was on it,
   which over a result panel meant the middle of the result. It belongs under
   the bars, reading as a status: the one band of the screen that is never an
   action, and clear of Race again and Garage at the bottom. */
.race-rotate-hint {
  top: calc(var(--shell-bar) + var(--s3, 8px));
  bottom: auto;
  max-width: calc(100% - var(--s5, 16px) * 2);
  transform: translateX(-50%);
  pointer-events: none;
}
/* And only while there is a race to turn sideways for. On the lobby, pause and
   result the dialog is the content, and a floating hint over its heading is
   noise the reader cannot dismiss. */
.race-display:not([data-race-state="driving"]) .race-rotate-hint { display: none; }

/* --- Two features a phone lost entirely ----------------------------------
   Both were found by walking the tasks rather than the layout: at 390px wide
   the language picker and the way back to Drive could not be reached from the
   racing screen at all.

   The language control lives inside `.brand`, and a `max-width:420px` rule hid
   that whole block to buy room — taking the only language switch with it, with
   no other route to it anywhere in racing. The block stays; the wordmark is
   what goes, because the wordmark is decoration and the picker is a feature.

   The Drive link was hidden on phones on the grounds that the page footer
   carries it. The footer's link goes to "/" rather than to Drive, and on the
   racing screen it is not always shown, so on a phone there was no way across
   to the other half of the product. It comes back as a 48px icon, which is what
   compact density already renders it as. */
@media (max-width: 420px) {
  .race-display .topbar .brand { display: flex; align-items: center; }
  .race-display .topbar .brand > a { display: none; }
}
html[data-phone="true"] .race-display .topbar .top-actions .experience-switch { display: inline-flex; }

/* --- The iPhone chrome-collapse workaround --------------------------------
   Safari on iPhone has no element fullscreen, and folds its toolbars away only
   when the page scrolls. The shell is deliberately unscrollable, so for the
   length of a race on that browser — and nowhere else — the document is given
   just enough height to scroll through, which is what Safari watches for. The
   game itself still measures `--app-height`, so it reflows into the bars'
   space as they collapse rather than being sized for either state. */
html.is-chrome-collapsible,
html.is-chrome-collapsible body {
  height: auto;
  min-height: 100%;
  overflow: visible;
}
html.is-chrome-collapsible body > #root {
  /* 100vh on iOS is the LARGE viewport — the height with the chrome already
     collapsed. Asking for it is what makes the document taller than the window
     and gives the scroll somewhere to go. */
  height: 100vh;
  min-height: 100vh;
}
html.is-chrome-collapsible .race-app.race-display { height: 100vh; }

/* --- Touch controls, sized to the orientation -----------------------------
   The steering pad was `width:min(44vw,300px)` with a fixed 150px zone. 44vw is
   a portrait measure: held sideways it made the pad a third of the screen wide
   and nearly 40% of its height, so it covered the nitro meter on the left and
   took road the driver needs to see. Photographed on an iPhone mid-race.

   Sized from the short side instead, which is the same in both orientations, so
   the pad is the same physical size in the hand whichever way the phone is
   held; landscape simply has less height to give, and gets a shorter zone. The
   pedals keep their own floors — those are thumb targets and stay absolute. */
html[data-orientation="landscape"] .race-display .race-play > .race-joystick-controls > .race-joystick-steering {
  width: clamp(180px, 46vmin, 260px);
}
html[data-orientation="landscape"] .race-display .race-play > .race-joystick-controls .race-joystick-zone {
  height: clamp(84px, 28vmin, 124px);
}
html[data-orientation="portrait"] .race-display .race-play > .race-joystick-controls > .race-joystick-steering {
  width: clamp(190px, 58vmin, 300px);
}
html[data-orientation="portrait"] .race-display .race-play > .race-joystick-controls .race-joystick-zone {
  height: clamp(110px, 34vmin, 170px);
}
/* The nitro meter shares the left edge with the steering pad. It rides above
   it rather than under it, so neither has to guess the other's height. */
html[data-phone="true"] .race-display .race-play > .race-nitro,
html[data-density="ultra"] .race-display .race-play > .race-nitro {
  bottom: calc(var(--shell-dock) + clamp(84px, 28vmin, 124px) + var(--s4, 12px));
  max-width: min(42vw, 240px);
}

/* --- Narrow screens ------------------------------------------------------ */
/* Under about 560 px the HUD cannot show the stage line and the numbers and
   Pause, and truncating all three to "Nig… BOT RAC…" serves nobody. The stage
   name wins; the mode is on the result and in the setup panel. */
@media (max-width: 560px) {
  .race-display .race-play-top .race-eyebrow { display: none; }
  .race-display .race-live-stats > span:nth-child(2) { display: none; }
  .race-upgrade-advice { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--s2, 6px); }
  .race-upgrade-advice button { grid-column: 1 / -1; width: 100%; }
}

/* --- Notices and the consent ask ----------------------------------------- */
/* The banner was pinned to the top of the race document at z-index 60 and
   landed squarely on the toolbar — it covered the logo, the audio control and
   the account button at every viewport in the matrix. It now sits below the
   bar it was colliding with, and still clear of the throttle. */
.race-body .cookie-consent {
  top: calc(var(--shell-header) + var(--s4, 12px) + 14px);
  bottom: auto;
  z-index: 60;
}
html[data-density="ultra"] .race-body .cookie-consent {
  top: auto;
  bottom: calc(var(--shell-dock) + var(--s2, 6px));
  max-width: min(560px, calc(100% - 16px));
}

/* ===========================================================================
   Drive, and the pages that share its shell
   ---------------------------------------------------------------------------
   Drive's bar floats over the map and every instrument below it is offset from
   its height, so the band token does not apply here — only the gutters do.
   =========================================================================== */
html[data-density="ultra"] .topbar { left: 8px; right: 8px; padding: 0 6px 0 8px; border-radius: 12px; }
html[data-density="ultra"] .topbar .session-pill { display: none; }

/* The settings panel is a master/detail on a wide screen rather than a 560 px
   column of stacked sections behind one scrollbar (§28). */
html[data-density="comfortable"] .panel { width: min(760px, 100vw); }

/* --- Footer navigation --------------------------------------------------- */
/* The race page footer is bottom-anchored and was 24px tall, which was fine
   while its links were 26px of text. Raising them to a 44px touch target — the
   right call on a touch screen — pushed them 10px past the bottom of a phone
   with nothing able to scroll, so Privacy and Back to Driwe became unreachable.
   The band sizes to what it holds. */
.race-display .race-page-footer { height: auto; min-height: 44px; }
/* Every footer link is a navigation target on a touch screen, so it gets a
   real target (§13, §38). The exception, deliberately, is a link inside running
   legal prose — an address in the middle of a sentence cannot be 44 px tall
   without breaking the paragraph, and it is read rather than aimed at. */
.site-footer .footer-navigation a,
.footer-legal a,
.race-page-footer a,
.home-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--s2, 6px);
}
.information-page p a, .site-footer p a { min-height: 0; min-width: 0; padding: 0; }
/* Policy links sit inside a sentence on the checkout page, where a 44 px line
   box would break the paragraph. The target grows instead of the text: padding
   out, the same margin back, so the hit area is 44 px and the layout is not. */
.purchase-policies a, .home-billing-note a {
  display: inline-block;
  padding: 13px 6px;
  margin: -13px -2px;
}

/* --- The garage's floating controls ------------------------------------- */
/* The car-view buttons cleared the launch dock by a literal 183 px — the dock's
   height on the day the rule was written. Once density changed the dock's own
   spacing the literal was wrong and the dock covered the buttons. They ride on
   a measured offset instead: the dock's height, published by the dock. */
.race-home .race-showcase-tools { bottom: calc(var(--launch-dock-h, 183px) + var(--s3, 8px)); }
html[data-density="comfortable"] .race-home .race-showcase-tools { bottom: calc(var(--launch-dock-h, 195px) + var(--s3, 8px)); }

/* Safe areas, for the phones and tablets that have them (§37). */
@supports (padding: env(safe-area-inset-left)) {
  html[data-app-shell="true"] body > #root {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .race-display .race-play-footer { padding-bottom: env(safe-area-inset-bottom); height: calc(var(--shell-dock) + env(safe-area-inset-bottom)); }
}

/* ===========================================================================
   Home — the page that has to sell the app
   ---------------------------------------------------------------------------
   The short-screen rule here used to be "hide the prose": below 760 px of
   height the hero sub-headline, the intro paragraph and all three entry-card
   descriptions were display:none. 760 px of height is the car — the primary
   target — so the page arrived on the screen that matters most with its
   reasons to tap removed, in order to fit a hero into one viewport on a
   document that is 13 700 px long and scrolls anyway. Nothing was bought that
   the copy did not pay for.

   The copy therefore stays at every density and the type and spacing shrink
   instead. Only `ultra` — a 390 px-tall landscape band — drops anything, and
   what it drops is decoration rather than argument.
   =========================================================================== */
html[data-density="compact"] .welcome-hero { min-height: 0; }
html[data-density="compact"] .welcome-visual { min-height: 340px; }
html[data-density="compact"] .welcome-editorial { padding-top: 104px; }
html[data-density="compact"] .welcome-editorial > span { max-width: 30em; font-size: 13px; line-height: 1.55; }
html[data-density="compact"] .welcome-content { padding: var(--s6); }
html[data-density="compact"] .welcome-intro h2 { margin: var(--s2) 0 var(--s3); }
html[data-density="compact"] .welcome-intro > p { margin: 0 0 var(--s4); font-size: 13px; line-height: 1.55; }
html[data-density="compact"] .welcome-footnote { margin-top: var(--s4); }

/* Two lines of "why tap this", clipped rather than deleted. The card title
   names the destination; this names the cost and the payoff, which is the part
   a visitor is actually deciding on. -webkit-line-clamp is Chrome 79 safe. */
html[data-density="compact"] .welcome-page .experience-card p,
html[data-density="ultra"] .welcome-page .experience-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

html[data-density="ultra"] .welcome-hero { min-height: 0; }
html[data-density="ultra"] .welcome-visual { min-height: 240px; }
html[data-density="ultra"] .welcome-editorial { padding-top: 96px; }
html[data-density="ultra"] .welcome-editorial > span { font-size: 12px; line-height: 1.5; }
html[data-density="ultra"] .welcome-content { padding: var(--s5); }
html[data-density="ultra"] .welcome-page .experience-card p { -webkit-line-clamp: 1; }
/* The ambient line sits over artwork that is 240 px tall here. It is mood. */
html[data-density="ultra"] .welcome-scene-note { display: none; }

/* --- Rows that line up ---------------------------------------------------- */
/* A grid of cards is read across as well as down, so the part being compared —
   the availability line, the step's action — sits on one line across the row
   instead of wherever that card's prose happened to stop. */
.home-features article,
.home-feature-catalog article,
.home-racing-access article,
.home-steps li { display: flex; flex-direction: column; }
/* Only in the catalogue, where the availability line is the card's last child.
   The RAW cards and the access cards open with the same class as a heading
   label, and pushing *that* to the bottom moves the whole card with it. */
.home-feature-catalog article > .home-feature-availability { margin-top: auto; }
.home-steps li > a,
.home-steps li > .home-step-note,
.home-racing-access article > .home-plan-link { margin-top: auto; }

/* --- The bands that answer objections ------------------------------------- */
/* Four items across a 1180 px page; two-by-two on the car, where a third
   column would cost each answer two extra lines of wrapping. */
html[data-density="compact"] .home-proof,
html[data-density="ultra"] .home-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px var(--s6); }
html[data-density="compact"] .home-assurance,
html[data-density="ultra"] .home-assurance { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --- The section nav ------------------------------------------------------ */
/* Seven pills wrap to two rows at 880 px. They keep the 44 px target and lose
   the padding, which is what was making the second row. */
html[data-density="compact"] .home-section-nav { padding: 12px var(--s6); }
html[data-density="compact"] .home-section-nav a { min-height: 44px; padding: 0 13px; font-size: 12px; }
html[data-density="ultra"] .home-section-nav { padding: 8px var(--s5); }
html[data-density="ultra"] .home-section-nav a { min-height: 44px; padding: 0 11px; font-size: 12px; }

/* --- The consent ask on a marketing page ---------------------------------- */
/* At ultra the banner covered the entry cards it was asking about. It keeps
   its own row at the bottom and the page keeps room underneath it. */
html[data-density="ultra"] .welcome-page ~ .cookie-consent,
html[data-density="ultra"] .cookie-consent { bottom: var(--s2, 6px); padding: var(--s4, 12px); }

/* ===========================================================================
   Shop — the page that has to be readable while it takes money
   ---------------------------------------------------------------------------
   The storefront had exactly two breakpoints, at 1000 px and 760 px of width,
   so the screens between them were sized by neither: a car at 1280x720 and a
   laptop window at the same size both got the roomy 1280 px shell with a
   340 px sticky review column and a 64 px header, on 720 px of height. Density
   answers for those, on both axes, and the two width queries in
   product-polish.css stay where they are for the narrow case.

   Nothing here deletes copy. What shrinks is chrome, type and the gaps — the
   reasons to buy, the policies and the price lines survive every size, because
   this is the page where they are the product (§the Home note above).
   =========================================================================== */
html[data-density="compact"] .shop-header { padding: var(--s3) var(--s5); }
html[data-density="compact"] .shop-header svg.brand-logo { width: 104px; }
html[data-density="compact"] .shop-shell { padding: var(--s5); }
html[data-density="compact"] .shop-heading { margin-bottom: var(--s5); }
html[data-density="compact"] .shop-heading h1 { font-size: 20px; }
html[data-density="compact"] .shop-heading > p { font-size: 13px; line-height: 1.55; }
html[data-density="compact"] .shop-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s6); }
html[data-density="compact"] .shop-layout > .purchase-review { padding: var(--s5); top: var(--s4); }
html[data-density="compact"] .shop-earned,
html[data-density="compact"] .shop-return { padding: var(--s5); margin-bottom: var(--s5); }

/* A short screen cannot hold a sticky column: the review panel is taller than
   the viewport, so pinning it hides its own checkout button. It scrolls with
   the page and the button arrives under the choices it belongs to. */
html[data-density="compact"] .shop-layout > .purchase-review { position: static; }

/* Ultra is a phone, or the car with its browser chrome open. One column, and
   the header keeps the brand, the language and the actions as icons. */
html[data-density="ultra"] .shop-header { padding: var(--s2) var(--s4); }
html[data-density="ultra"] .shop-header svg.brand-logo { width: 88px; }
html[data-density="ultra"] .shop-shell { padding: var(--s4); }
html[data-density="ultra"] .shop-heading h1 { font-size: 20px; margin: var(--s2) 0; }
html[data-density="ultra"] .shop-heading > p { font-size: 12px; line-height: 1.5; }
html[data-density="ultra"] .shop-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
html[data-density="ultra"] .shop-layout > .purchase-review { position: static; padding: var(--s4); }
html[data-density="ultra"] .shop-earned,
html[data-density="ultra"] .shop-return { padding: var(--s4); margin-bottom: var(--s4); }
html[data-density="ultra"] .shop-login, html[data-density="ultra"] .phone-handoff { padding: var(--s4); }
html[data-density="ultra"] .phone-handoff-layout { grid-template-columns: minmax(0, 1fr); }

/* The address is the part of the account chip that can be 40 characters long,
   and it is the part the shopper already knows. The word stays, so a narrow
   header still answers "am I signed in?" — which is the question it is there
   to answer (§13). */
html[data-density="compact"] .shop-account { max-width: 210px; }
html[data-density="ultra"] .shop-account small { display: none; }
html[data-density="ultra"] .shop-account { padding: 0 var(--s3); }
/* Long language names and long step labels both wrap; the numbers do not. */
html[data-density="ultra"] .shop-progress li { min-height: 36px; margin-right: var(--s4); font-size: 11px; }
html[dir="rtl"][data-density="ultra"] .shop-progress li { margin-right: 0; margin-left: var(--s4); }

/* Group tabs are a row of six. At 880 px they wrap to two rows rather than
   scrolling sideways, which is the rule the whole sheet is built on (§39). */
html[data-density="compact"] .addon-group-tabs button,
html[data-density="ultra"] .addon-group-tabs button { font-size: 12px; padding: 0 var(--s3); }

/* ===========================================================================
   First paint, and no-script
   ---------------------------------------------------------------------------
   The attribute arrives with the first effect. These give the same answer from
   the stylesheet alone, so the layout never flashes the wrong density. They are
   deliberately written to be overridden by the attribute rules above: a media
   query cannot see the visual viewport, and the script can.
   =========================================================================== */
@media (max-width: 1099px), (max-height: 779px) {
  html:not([data-density]) { --shell-header: 52px; --shell-bar: 46px; --shell-dock: 52px; --shell-gut: 12px; --shell-pad: 12px; }
  html:not([data-density]) .ui-tool--secondary .ui-label-full,
  html:not([data-density]) .ui-tool--tertiary .ui-label-full { display: none; }
  html:not([data-density]) .ui-tool--secondary .ui-label-short,
  html:not([data-density]) .ui-tool--tertiary .ui-label-short { display: inline; }
}
@media (max-height: 560px) and (orientation: landscape), (max-height: 500px) {
  html:not([data-density]) { --shell-header: 46px; --shell-bar: 0px; --shell-dock: 46px; --shell-gut: 8px; --shell-pad: 8px; }
  html:not([data-density]) .ui-tool--secondary .ui-label,
  html:not([data-density]) .ui-tool--tertiary .ui-label { display: none; }
}

/* shop-refresh.css */
/* Storefront: compact car-first catalogue, with a separate review column.
   Scoped so the in-drive purchase dialog keeps its existing layout. */
html .shop-page{scroll-behavior:auto}
html .shop-page .shop-header{padding:12px 24px;max-width:1280px}
html .shop-page .shop-header nav>*{margin:0 0 0 8px}
html .shop-page .shop-header .shop-return-action{background:var(--ctl-bg);border-color:var(--ctl-line);color:#dce8d2}
html .shop-page .shop-shell{padding:24px;max-width:1280px}
html .shop-page .shop-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;margin-bottom:24px}
html .shop-page .shop-heading .welcome-eyebrow{font-size:10px;letter-spacing:.14em}
html .shop-page .shop-heading h1{font-size:30px;line-height:1.15;margin:6px 0 8px}
html .shop-page .shop-heading>p{font-size:13px;line-height:1.5;margin:0;color:#aeb9ad}
html .shop-page .shop-progress{grid-column:2;grid-row:1/4;align-self:center;margin:0}
html .shop-page .shop-progress li{font-size:11px;margin:0 0 0 12px;min-height:32px}
html .shop-page .shop-layout{grid-template-columns:minmax(0,1fr) 270px;gap:24px}
html .shop-page .shop-layout h2{font-size:18px;line-height:1.3;margin:0 0 12px}
html .shop-page .billing-toggle{margin:0 0 16px;max-width:100%;width:100%}
html .shop-page .billing-toggle button{min-width:48px;min-height:48px}
.shop-plan-legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
html .shop-page .subscription-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
html .shop-page .subscription-option{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);align-content:start;align-items:start;gap:10px;padding:16px;min-height:154px;border-radius:14px;background:#151c18}
html .shop-page .subscription-option.selected{background:#202b1b;border-color:#a9d779;box-shadow:inset 0 0 0 1px #a9d779}
html .shop-page .subscription-option:focus-within{outline:2px solid #e2f5cd;outline-offset:3px}
html .shop-page .subscription-option input{margin:1px 0 0;width:20px;height:20px}
html .shop-page .subscription-option strong{font-size:14px}
html .shop-page .subscription-option small{font-size:12px;line-height:1.5}
html .shop-page .subscription-option>b{grid-column:2;grid-row:2;text-align:start;font-size:23px;line-height:1.2;white-space:normal}
html .shop-page .subscription-option>b small{font-weight:400;font-size:11px;text-align:start;margin-top:3px}
html .shop-page .subscription-option .product-name .icon{display:none}
html .shop-page .subscription-option em{font-size:11px;line-height:1.4;font-style:normal;margin:6px 0;display:block}
html .shop-page .subscription-option .plan-savings{color:#b5d994;font-size:11px;margin-top:6px}
html .shop-page .shop-layout>.purchase-review{padding:20px;top:16px;background:#1a221c;border-radius:16px}
html .shop-page .order-summary h3{font-size:15px;margin-bottom:20px}
html .shop-page .order-summary>div{gap:12px;font-size:12px;line-height:1.5}
html .shop-page .order-summary .order-total{align-items:center;margin-top:16px;padding-top:16px}
html .shop-page .order-total strong:last-child{font-size:26px;letter-spacing:-.03em}
html .shop-page .purchase-policies,html .shop-page .purchase-reassurance{font-size:11px;line-height:1.6;text-align:start}
html .shop-page .purchase-footer{padding-top:12px}
html .shop-page .phone-checkout-btn{font-size:13px;min-height:48px;padding:12px}
html .shop-page .phone-checkout-note{font-size:11px;margin:8px 0 12px}
html .shop-page .collection-browser{margin:20px 0 12px;background:#151c18;border-color:#354032;border-radius:14px}
html .shop-page .collection-browser>summary{min-height:56px;font-size:14px}
html .shop-page .addon-group-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
html .shop-page .addon-group-tabs button{min-width:48px;min-height:48px;margin:0;white-space:normal;font-size:12px;padding:8px}
html .shop-page .shop-support{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid #354032;margin-top:28px;padding-top:24px}
html .shop-page .shop-support>section{margin:0;padding:0;border:0;background:none;border-radius:0}
html .shop-page .shop-support strong{font-size:13px;line-height:1.5}
html .shop-page .shop-support p{font-size:12px;line-height:1.6;color:#aeb9ad}
html .shop-page .shop-browser-check a{font-size:12px;min-height:48px;text-decoration:none}
html .shop-page .shop-earned>.icon{margin-inline-end:12px}
html .shop-page .footer-navigation nav{min-width:0}
html .shop-page .footer-navigation a{max-width:100%;overflow-wrap:break-word;word-break:break-word}
html .shop-page .shop-plan-details{margin-top:12px}
/* Navigation uses one icon size and short, visible labels at car widths. */
html .shop-page .shop-header{min-height:72px;--ui-scale:1px}
html .shop-page .shop-header .ui-tool{min-width:48px;min-height:48px;padding:0 12px;border-color:transparent;background:transparent;color:#c2ccc2;border-radius:10px}
html .shop-page .shop-header .ui-tool:hover{background:#202922;color:#eef4e9}
html .shop-page .shop-header .shop-signin-action{border-color:#42513b;background:#1c271a;color:#d5edb8}
html .shop-page .shop-header .shop-return-action{border-color:#354032;background:#151d18;color:#e7eee0}
html .shop-page .shop-header .icon{width:20px!important;height:20px!important;flex:0 0 20px;margin:0}
html .shop-page .shop-header .ui-label{display:inline;max-width:140px}
html .shop-page .shop-header .ui-label-full{display:none}
html .shop-page .shop-header .ui-label-short{display:inline}
html .shop-page .shop-header .shop-account{border:0;background:none;padding:0 8px}
html .shop-page .shop-header .shop-account small{display:none}
html .shop-page .shop-header .ui-tool:focus-visible{outline:2px solid #d5edb8;outline-offset:2px}
html .shop-page #buy,html .shop-page .phone-handoff,html .shop-page #shop-phone-status{scroll-margin-top:16px}
html .shop-page #buy:focus{outline:2px solid #92b974;outline-offset:4px}
html .shop-page .purchase-promo{margin:12px 0 0;border:0;border-top:1px solid #354032;border-radius:0;background:transparent;overflow:visible}
html .shop-page .purchase-promo summary{display:grid;grid-template-columns:minmax(0,1fr) 18px;gap:8px;min-height:48px;padding:8px 0;font-size:12px;font-weight:500}
html .shop-page .purchase-promo summary>span{min-width:0;margin:0}
html .shop-page .purchase-promo summary .icon{flex:0 0 18px;width:18px!important;height:18px!important;margin:0 8px 0 0}
html .shop-page .purchase-promo summary>small{display:none}
html .shop-page .purchase-promo summary>.icon{margin:0;transform:rotate(90deg)}
html .shop-page .purchase-promo[open] summary>.icon{transform:rotate(-90deg)}
html .shop-page .purchase-promo>div{padding:0 0 12px}
html .shop-page .purchase-promo p{font-size:12px;line-height:1.6}
html .shop-page .purchase-selection>.pro-offer{margin:16px 0;padding:16px;border:1px solid #425a32;border-radius:14px;background:#1a2418}
html .shop-page .purchase-selection>.pro-offer .pro-offer-terms{font-size:11px}
html[dir=rtl] .shop-page .shop-header nav>*{margin:0 8px 0 0}
html[dir=rtl] .shop-page .purchase-promo summary>span>.icon{margin:0 0 0 8px}
@media(min-width:761px) and (max-height:800px){
 html .shop-page .shop-shell{padding-top:16px}
 html .shop-page .shop-heading{margin-bottom:16px}
 html .shop-page .shop-heading h1{font-size:26px}
 html .shop-page .subscription-option{padding:14px;gap:8px;min-height:154px}
}
@media(min-width:1100px){html .shop-page .shop-layout{grid-template-columns:minmax(0,1fr) 320px;gap:32px}html .shop-page .subscription-option{min-height:164px}}
@media(max-width:760px){
 html .shop-page .shop-header{padding:12px 16px;row-gap:8px}
 html .shop-page .shop-header nav>*{margin:0 6px 6px 0}
 html .shop-page .shop-shell{padding:20px 16px}
 html .shop-page .shop-heading{display:block;margin-bottom:20px}
 html .shop-page .shop-heading h1{font-size:28px}
 html .shop-page .shop-progress{margin-top:12px}
 html .shop-page .shop-progress li{margin:0 12px 0 0}
 html .shop-page .shop-layout{grid-template-columns:minmax(0,1fr);gap:20px}
 html .shop-page .shop-layout>.purchase-review{position:static}
 html .shop-page .shop-support{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media(max-width:420px){html .shop-page .subscription-options{grid-template-columns:minmax(0,1fr)}html .shop-page .subscription-option{min-height:0}html .shop-page .addon-group-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){
 html .shop-page .shop-header{align-items:center}
 html .shop-page .shop-header-actions{width:100%;justify-content:space-between;margin:0}
 html .shop-page .shop-header .shop-home-action .ui-label,html .shop-page .shop-header .shop-phone-action .ui-label{display:none}
 html .shop-page .shop-header .shop-account{max-width:112px;font-size:11px}
 html .shop-page .shop-header .ui-tool{padding:0 10px}
 html .shop-page .shop-header nav>*{margin:0}
}
@media(max-height:650px){html .shop-page .shop-layout>.purchase-review{position:static}}

/* 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))}}