/* 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;inset: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%;inset: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:82px;padding:0 34px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(255,255,255,.065);background:linear-gradient(180deg,rgba(5,8,10,.82),rgba(5,8,10,.08));backdrop-filter:blur(10px)}.brand{display:flex;align-items:center;gap:12px}.brand-mark,.sound-icon,.dock-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);background:rgba(255,255,255,.045);border-radius:11px;color:var(--accent)}.brand div{display:grid;gap:2px}.brand strong{font-size:12px;letter-spacing:.18em}.brand small,.control-dock small,.panel small{font-size:8px;letter-spacing:.16em;color:#76838a;font-weight:750}.session-pill{display:flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--line);background:rgba(14,19,22,.72);border-radius:100px;font-size:9px;letter-spacing:.12em}.session-pill i{width:6px;height:6px;background:#56e3b3;border-radius:50%;box-shadow:0 0 9px #56e3b3}.session-pill span{font-weight:850}.session-pill em{font-style:normal;color:#6f7a80;text-transform:none;letter-spacing:0}.icon-btn{justify-self:end;display:grid;place-items:center;border:1px solid var(--line);background:rgba(16,21,25,.8);border-radius:12px;height:42px;width:42px;cursor:pointer;transition:.2s}.icon-btn:hover{border-color:rgba(255,255,255,.25);background:#1a2126}.route-ribbon{position:absolute;z-index:4;top:105px;left:38px;display:flex;align-items:center;gap:15px}.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:7px;font-weight:950;line-height:.9}.speed-sign strong{display:block;font-size:33px;line-height:1.02;letter-spacing:-.05em}.route-copy{display:flex;flex-direction:column}.eyebrow,.turn-card small,.section-label{font-size:8px;letter-spacing:.16em;color:var(--accent);font-weight:850}.route-copy>strong{font-size:18px;margin:3px 0 2px}.route-copy>small{font-size:9px;color:#6f7a80}.turn-card{position:absolute;z-index:5;right:35px;top:107px;width:310px;padding:14px 15px;background:rgba(13,18,21,.82);border:1px solid rgba(255,255,255,.12);border-radius:15px;display:grid;grid-template-columns:45px 1fr 18px;gap:12px;align-items:center;box-shadow:0 16px 50px rgba(0,0,0,.28);backdrop-filter:blur(18px);transition:.25s}.turn-symbol{width:45px;height:45px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--accent) 14%,transparent);font-size:27px;color:var(--accent)}.turn-card div:nth-child(2){display:grid;gap:2px}.turn-card strong{font-size:13px}.turn-card span{font-size:11px;color:#879299}.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:34px;right:34px;bottom:127px;display:grid;grid-template-columns:200px minmax(280px,1fr) 110px;gap:38px;align-items:end}.speed{display:flex;align-items:flex-end;gap:12px}.speed strong{font-variant-numeric:tabular-nums;font-size:94px;font-weight:250;line-height:.72;letter-spacing:-.09em}.speed>span,.gear>span{font-size:10px;color:#8d989d;font-weight:850;letter-spacing:.15em}.speed>span{padding-bottom:3px}.engine-meter{max-width:600px;justify-self:center;width:100%}.meter-label{display:flex;justify-content:space-between;align-items:end;margin-bottom:9px}.meter-label span{font-size:8px;color:#7c888e;letter-spacing:.17em;font-weight:850}.meter-label strong{font-size:23px;font-weight:450;font-variant-numeric:tabular-nums}.meter{height:5px;background:rgba(255,255,255,.09);border-radius:8px;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}.meter-scale{display:flex;justify-content:space-between;margin-top:7px;color:#4e595f;font-size:7px}.gear{text-align:right}.gear strong{display:block;font-size:72px;font-weight:250;line-height:.8}.control-dock{position:absolute;z-index:6;bottom:35px;left:50%;transform:translateX(-50%);width:min(760px,calc(100vw - 68px));height:68px;padding:0 14px;display:grid;grid-template-columns:1.4fr 1px 1.2fr 1px .65fr;align-items:center;gap:14px;background:rgba(14,19,22,.8);border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.4);backdrop-filter:blur(22px)}.divider{height:30px;background:rgba(255,255,255,.09)}.sound-btn{height:100%;display:flex;align-items:center;gap:11px;padding:0;background:none;border:0;text-align:left;cursor:pointer}.sound-btn>div{display:grid;gap:3px}.sound-btn strong{font-size:12px;letter-spacing:.035em}.sound-btn.active .sound-icon{background:var(--accent);color:#07100e;box-shadow:0 0 22px var(--glow)}.audio-bars{margin-left:auto;height:20px;display:flex;align-items:center;gap:2px}.audio-bars b{display:block;width:2px;height:6px;border-radius:2px;background:var(--accent)}.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;gap:11px}.destination>div{display:grid;gap:4px}.destination strong{display:flex;gap:8px;align-items:center;font-size:12px}.destination strong i{width:3px;height:3px;background:#59656b;border-radius:50%}.battery svg{color:#62dab3}.battery>div{display:grid;gap:3px}.battery strong{font-size:13px}.disclaimer{position:absolute;z-index:7;bottom:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;white-space:nowrap;color:#536067;font-size:7px;letter-spacing:.15em}.stale{position:absolute;z-index:10;top:92px;left:50%;transform:translateX(-50%);background:#4f2922;color:#ffb6a4;padding:9px 14px;border-radius:9px;font-size:10px;font-weight:800;transition:.2s}.scrim{position:fixed;z-index:19;inset:0;background:rgba(2,4,5,.55);opacity:0;pointer-events:none;transition:.35s;backdrop-filter:blur(3px)}.scrim.visible{opacity:1;pointer-events:auto}.panel{position:fixed;z-index:20;top:0;right:0;width:min(460px,100vw);height:100vh;padding:30px;background:#0d1215;border-left:1px solid rgba(255,255,255,.1);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:24px;border-bottom:1px solid var(--line)}.panel-kicker{display:flex;align-items:center;gap:6px;color:var(--accent);font-size:8px;letter-spacing:.16em;font-weight:850}.panel h1{margin:8px 0 2px;font-size:36px;letter-spacing:-.04em}.panel-head p{margin:0;color:#79858b;font-size:12px}.setting-section{padding:24px 0;border-bottom:1px solid var(--line)}.section-label{display:flex;justify-content:space-between;margin-bottom:12px}.section-label small{color:#59656b}.profiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}.profile{position:relative;display:flex;align-items:center;gap:10px;min-height:68px;padding:10px;border:1px solid rgba(255,255,255,.08);background:#13191d;border-radius:13px;text-align:left;cursor:pointer;transition:.2s}.profile:hover{background:#182025}.profile.active{border-color:color-mix(in srgb,var(--accent) 65%,transparent);background:color-mix(in srgb,var(--accent) 7%,#11171a);box-shadow:inset 0 0 20px color-mix(in srgb,var(--accent) 5%,transparent)}.profile-orb{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:hsl(var(--profile-hue) 75% 50% / .13);color:hsl(var(--profile-hue) 85% 65%)}.profile>span:nth-child(2){display:grid;gap:3px}.profile strong{font-size:11px}.profile small{font-size:7px}.profile>i{position:absolute;right:7px;top:6px;font-style:normal;font-size:6px;letter-spacing:.12em;color:var(--accent)}.volume-row{display:flex;align-items:center;gap:12px;color:#849096}.volume-row input{width:100%;accent-color:var(--accent)}.toggles{display:grid;gap:8px;margin-top:18px}.toggles label{display:flex;justify-content:space-between;align-items:center;padding:12px 13px;background:#13191d;border-radius:11px}.toggles label>span{display:grid;gap:3px}.toggles strong{font-size:11px}.toggles input{width:33px;height:18px;accent-color:var(--accent)}.privacy{display:flex;gap:12px;margin-top:22px;padding:15px;border:1px solid rgba(84,232,183,.2);background:rgba(42,129,98,.1);border-radius:13px;color:#62dcb5}.privacy div{display:grid;gap:3px}.privacy strong{font-size:12px}.privacy p{margin:1px 0 0;color:#75958a;font-size:10px}.tesla-connect{margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding:15px 16px;background:#edf1ee;color:#0b0f11;border-radius:12px;text-decoration:none;font-size:12px;font-weight:850}.tesla-connect span{display:flex;align-items:center;gap:8px}.keys{text-align:center;font-size:9px;color:#58646a;line-height:1.7}.keys b{color:#9ca7ac}@media(max-width:850px){.topbar{padding:0 20px}.session-pill em{display:none}.route-ribbon{left:20px;top:96px;transform:scale(.88);transform-origin:left top}.turn-card{right:20px;top:97px;transform:scale(.9);transform-origin:right top}.drive-readout{left:20px;right:20px;bottom:118px;grid-template-columns:150px 1fr 70px;gap:20px}.speed strong{font-size:70px}.gear strong{font-size:58px}.control-dock{width:calc(100vw - 40px)}.car{width:88px;height:176px}}@media(max-height:700px){#app{min-height:500px}.topbar{height:64px}.route-ribbon{top:76px}.turn-card{top:77px}.vehicle-stage{top:43%;transform:translate(-50%,-50%) scale(.78)}.drive-readout{bottom:105px}.control-dock{bottom:28px;height:62px}.disclaimer{bottom:6px}.panel{padding-top:20px}.setting-section{padding:16px 0}.profiles{gap:6px}.profile{min-height:57px}}
/* 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:116px;height:auto;border-radius:5px}
@media(max-width:600px){.brand-logo{width:94px}}

/* ODbL attribution shown whenever OpenStreetMap road data is on screen. */
.route-attribution{display:block;margin-top:2px;font-size:10px;letter-spacing:.02em;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:7px;font-weight:900;letter-spacing:.08em;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;inset: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;gap:10px}
.car-colors>button,.custom-color{position:relative;width:35px;height:35px;border:2px solid rgba(255,255,255,.12);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;inset:-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:19px;font-weight:300}
.custom-color input{position:absolute;inset: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:20px;border:0;padding:0;margin:0;min-width:0}.profile-group{display:grid;gap:9px}.profile-group h3{margin:0;color:#78858b;font-size:8px;letter-spacing:.16em;font-weight:850}.profile-group+.profile-group{padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.profile{min-height:62px}
.profile>input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.profile:focus-within{outline:2px solid var(--accent);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:18px}
.profile small{letter-spacing:.02em;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:8px}
.environments button{display:flex;align-items:center;gap:10px;min-height:58px;padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#13191d;color:#fff;text-align:left;cursor:pointer;transition:.18s}
.environments button:hover{background:#192126}
.environments button.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,#13191d)}
.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:900;font-size:17px}
.environments span{display:grid;gap:3px}
.environments strong{font-size:10px}
.environments small{font-size:7px;letter-spacing:.02em;text-transform:none;line-height:1.25}
.vehicle-stage{display:none}
.drive-side{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drive-side button{padding:13px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:#13191d;color:#fff;text-align:left;cursor:pointer}.drive-side button.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,#13191d)}.drive-side strong,.drive-side small{display:block}.drive-side strong{font-size:11px}.drive-side small{margin-top:4px;font-size:7px;letter-spacing:.02em;text-transform:none}
.gear>div{display:flex;justify-content:flex-end;align-items:center;gap:6px}.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:18px;cursor:pointer}.gear.manual button{display:grid;place-items:center}.gear.manual strong{font-size:58px;min-width:42px;text-align:center}
.drive-side button:disabled{opacity:.38;cursor:not-allowed}
.country-list{display:grid;gap:8px}.country-list details{border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#12181c;overflow:hidden}.country-list summary{display:flex;align-items:center;gap:10px;padding:10px;cursor:pointer;list-style:none}.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:900}.country-list summary>span{display:grid;gap:3px;flex:1}.country-list summary strong{font-size:11px}.country-list summary small{font-size:7px;letter-spacing:.02em;text-transform:none}.country-list summary>b{color:#718087}.region-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 9px 9px}.region-grid button{min-height:52px;padding:9px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:#182025;color:#fff;text-align:left;cursor:pointer}.region-grid button.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,#182025)}.region-grid strong,.region-grid small{display:block}.region-grid strong{font-size:9px}.region-grid small{margin-top:3px;font-size:7px;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:18px;font-style:italic}.nitro-btn small{font-size:6px;letter-spacing:.12em}.nitro-btn:disabled{opacity:.55}.nitro-active canvas{filter:saturate(1.35) contrast(1.08)}.nitro-active:before{content:"";position:absolute;z-index:4;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 8%,rgba(115,220,255,.09) 8.2%,transparent 8.5%);animation:nitro-lines .18s linear infinite}@keyframes nitro-lines{to{transform:translateY(18px)}}
.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:7px;letter-spacing:.14em}.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:32px;padding:5px 24px 5px 9px;border:1px solid rgba(255,255,255,.2);border-radius:9px;background:#11191de8;color:#dfe9e8;font:600 10px/1.2 inherit;letter-spacing:.02em;cursor:pointer}.horn-control select:focus-visible{outline:2px solid var(--accent);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:86px;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;padding:13px}.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:7px;letter-spacing:.05em}.visual-choices button.active>span{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}html[data-visual-mode="2d"] #app:after{background:linear-gradient(90deg,rgba(4,7,9,.66),transparent 34%,transparent 66%,rgba(4,7,9,.66)),linear-gradient(0deg,rgba(5,8,10,.88),transparent 44%,rgba(5,8,10,.18))}
.visual-choices{grid-template-columns:1fr 1fr}.visual-choices button{min-height:86px;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;padding:13px}.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:7px;letter-spacing:.05em}.visual-choices button.active>span{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}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"] .demo-coach,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:650;line-height:.8;letter-spacing:-.07em}html[data-visual-mode="2d"] .speed>span{padding:0;font-size:13px;color:rgba(255,255,255,.72);letter-spacing:.04em;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 */
.section-label small:has(.engine-loader){display:flex;align-items:center;gap:7px}
.engine-loader{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:10px;align-items:center;padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:#11181c}.horn-preview-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:color-mix(in srgb,var(--accent) 13%,#10171a);font-size:24px}.horn-picker label{display:grid;gap:5px;min-width:0}.horn-picker label>small{color:#718087;font-size:7px;font-weight:800;letter-spacing:.12em}.horn-studio-select{width:100%;height:36px;padding:0 30px 0 10px;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:#0b1114;color:#edf4f2;font-size:10px;font-weight:700}.horn-picker>button{height:38px;padding:0 12px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:9px;background:color-mix(in srgb,var(--accent) 10%,#11181c);color:var(--accent);font-size:8px;font-weight:850;cursor:pointer}.horn-picker>button:disabled{opacity:.45}.horn-upgrade{display:flex;justify-content:space-between;width:100%;margin-top:8px;padding:10px 12px;border:1px dashed rgba(255,255,255,.13);border-radius:10px;background:transparent;color:#87959a;font-size:8px;cursor:pointer}.horn-upgrade b{color:var(--accent);font-size:7px;letter-spacing:.1em}@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. */
: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}
#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))}
.topbar{height:78px;padding:0 32px;background:linear-gradient(180deg,rgba(4,8,10,.94),rgba(5,9,11,.68));border-bottom-color:rgba(255,255,255,.1)}
.brand-mark{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.065)}.brand strong{font-size:13px}.brand small{font-size:9px;color:#95a3a8}.session-pill{min-height:38px;padding:0 16px;font-size:10px}.topbar>.icon-btn{width:58px;height:58px;border-radius:16px}
.route-ribbon{top:101px;left:32px;gap:14px;padding:12px 16px 12px 12px;min-width:310px;border:1px solid var(--hairline);border-radius:18px;background:var(--glass);box-shadow:0 18px 54px rgba(0,0,0,.28);backdrop-filter:blur(18px)}
.speed-sign{width:66px;height:72px}.speed-sign strong{font-size:36px}.route-copy .eyebrow{font-size:10px}.route-copy>strong{font-size:22px;line-height:1.12}.route-copy>small{font-size:10px;color:#91a0a6}
.scene-status{position:absolute;z-index:5;right:108px;top:101px;display:flex;align-items:center;gap:11px;min-width:210px;padding:11px 14px;border:1px solid var(--hairline);border-radius:16px;background:var(--glass);backdrop-filter:blur(18px)}.scene-status>i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:#06100d;font-style:normal;font-size:18px;font-weight:900}.scene-status>span{display:grid;gap:3px}.scene-status small{font-size:8px;letter-spacing:.14em;color:var(--text-3)}.scene-status strong{font-size:13px;color:var(--text-1)}
.turn-card{top:188px;right:32px;width:330px;min-height:76px;background:var(--glass);border-color:var(--hairline)}
.drive-readout{left:50%;right:auto;bottom:116px;transform:translateX(-50%);width:min(840px,calc(100vw - 360px));min-height:100px;padding:18px 22px;grid-template-columns:170px minmax(260px,1fr) 150px;gap:30px;align-items:center;border:1px solid var(--hairline);border-radius:22px;background:linear-gradient(135deg,rgba(12,18,22,.9),rgba(8,13,16,.76));box-shadow:0 22px 64px rgba(0,0,0,.4);backdrop-filter:blur(22px)}
.speed{align-items:center}.speed strong{font-size:78px;font-weight:320;line-height:.82}.speed>span{font-size:12px;color:var(--text-2)}.engine-meter{max-width:none}.meter-label span{font-size:9px;color:var(--text-2)}.meter-label strong{font-size:27px}.meter{height:7px}.meter-scale{font-size:8px;color:#77858b}.gear{text-align:center}.gear>span{font-size:9px;color:var(--text-2)}.gear>div{justify-content:center}.gear strong{font-size:62px;font-weight:320}
.control-dock{bottom:25px;width:min(850px,calc(100vw - 330px));height:76px;padding:0 16px;border-radius:20px;background:var(--glass-strong);border-color:var(--hairline)}.sound-icon,.dock-icon{width:44px;height:44px}.control-dock small{font-size:9px;color:#91a0a6}.sound-btn strong,.destination strong,.battery strong{font-size:14px}.battery{justify-content:center}
.nitro-btn{right:32px;bottom:25px;width:108px;height:76px;border-radius:20px}.nitro-btn strong{font-size:21px}.nitro-btn small{font-size:8px}.horn-btn{right:150px;bottom:25px;width:86px;height:76px;border-radius:20px}.horn-btn small{font-size:8px}.disclaimer{bottom:7px;color:#77868d;font-size:8px}
.panel{width:min(570px,100vw);padding:0 34px 34px;background:rgba(10,15,18,.985)}.panel-head{position:sticky;z-index:3;top:0;margin:0 -4px;padding:28px 4px 22px;background:linear-gradient(#0a0f12 82%,transparent)}.panel h1{font-size:42px}.panel-head p{font-size:14px;color:#9ba8ad}.panel-head .icon-btn{width:56px;height:56px}.setting-section{padding:26px 0}.section-label{font-size:10px;margin-bottom:14px}.profile{min-height:72px;padding:12px}.profile-orb{width:44px;height:44px}.profile strong{font-size:13px}.profile small{font-size:9px;color:#91a0a6}.environments button{min-height:72px;padding:12px}.environments i{width:44px;height:44px}.environments strong{font-size:12px}.environments small{font-size:9px;color:#91a0a6}.country-list summary{min-height:68px;padding:12px}.country-list summary>i{width:44px;height:44px}.country-list summary strong{font-size:13px}.country-list summary small{font-size:9px}.region-grid button{min-height:66px;padding:11px}.region-grid strong{font-size:11px}.region-grid small{font-size:9px;line-height:1.25}.drive-side button{min-height:76px;padding:15px}.drive-side strong{font-size:13px}.drive-side small{font-size:9px;color:#91a0a6}.tesla-connect{min-height:58px;font-size:14px}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 75%,white);outline-offset:3px}
@media(max-width:1100px){.scene-status{display:none}.drive-readout{width:calc(100vw - 260px);grid-template-columns:145px 1fr 115px}.control-dock{width:calc(100vw - 210px)}.route-ribbon{transform:scale(.9);transform-origin:left top}}
@media(max-height:720px){.drive-readout{bottom:100px;min-height:82px;padding:12px 18px}.control-dock{height:64px;bottom:26px}.nitro-btn,.horn-btn{height:64px}.speed strong{font-size:64px}.route-ribbon,.scene-status{top:80px}}

.region-grid .route-stops{margin-top:7px;color:#acb8b9;font-size:10px;line-height:1.45;overflow-wrap:anywhere}

/* design-nav.css */
.panel-nav {
  position: sticky;
  z-index: 4;
  top: 132px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 0 -4px;
  padding: 8px 4px 12px;
  background: linear-gradient(#0a0f12 78%, transparent);
}

.panel-nav button {
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #12191d;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.panel-nav button:hover {
  border-color: var(--accent);
  color: var(--text-1);
  background: #172126;
}

.panel-nav button > span { font-size: 17px; line-height: 1; }
.panel-nav button > small { font-size: 9px; font-weight: 750; letter-spacing: .04em; }
.setting-section { scroll-margin-top: 214px; }

@media (max-height: 720px) {
  .panel-nav { top: 112px; }
  .panel-nav button { min-height: 50px; }
  .setting-section { scroll-margin-top: 186px; }
}

/* traffic-controls.css */
.setting-subtitle { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:4px 0 10px; }
.setting-subtitle + .choice-grid { margin-bottom:20px; }
.setting-subtitle strong { color:var(--text-1); font-size:12px; }
.setting-subtitle small { color:var(--text-3); font-size:9px; letter-spacing:0; text-align:right; }
.choice-grid { display:grid; gap:7px; }
.traffic-choices { grid-template-columns:repeat(5,1fr); }
.lane-choices { grid-template-columns:repeat(4,1fr); }
.choice-grid button { min-height:48px; padding:8px 5px; border:1px solid var(--hairline); border-radius:11px; background:#12191d; color:var(--text-2); cursor:pointer; }
.choice-grid button strong { font-size:10px; }
.choice-grid button:hover { border-color:color-mix(in srgb,var(--accent) 55%,transparent); color:var(--text-1); }
.choice-grid button.active { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,#11171a); color:var(--accent); box-shadow:inset 0 0 18px color-mix(in srgb,var(--accent) 7%,transparent); }
.time-choices { grid-template-columns:repeat(3,1fr); }
.time-choices button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:56px; }
.time-choices button span { font-size:19px; line-height:1; }
.setting-hint { margin:10px 2px 0; color:var(--text-3); font-size:10px; line-height:1.5; }
@media(max-width:430px){.traffic-choices{grid-template-columns:repeat(3,1fr)}.lane-choices{grid-template-columns:repeat(2,1fr)}}
.safety-note { display:flex; gap:12px; margin-bottom:16px; padding:14px; border:1px solid color-mix(in srgb,var(--accent) 28%,transparent); border-radius:13px; background:color-mix(in srgb,var(--accent) 7%,#11171a); color:var(--accent); }
.safety-note > svg { flex:0 0 auto; margin-top:2px; }
.safety-note strong { display:block; color:var(--text-1); font-size:12px; }
.safety-note p { margin:4px 0 0; color:var(--text-2); font-size:10px; line-height:1.5; }
.vehicle-style-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:22px; }
.vehicle-style-grid button { min-height:76px; display:grid; place-items:center; align-content:center; gap:7px; padding:8px 4px; border:1px solid var(--hairline); border-radius:12px; background:#12191d; color:var(--text-2); cursor:pointer; }
.vehicle-style-grid button i { font-size:23px; line-height:1; color:var(--accent); font-style:normal; }
.vehicle-style-grid button strong { font-size:9px; }
.vehicle-style-grid button:hover,.vehicle-style-grid button.active { border-color:var(--accent); color:var(--text-1); background:color-mix(in srgb,var(--accent) 9%,#11171a); }
@media(max-width:430px){.vehicle-style-grid{grid-template-columns:repeat(2,1fr)}}

.time-choices button { flex-direction:column; gap:4px; min-height:64px; padding:8px 4px; text-align:center; }
.time-choices button strong { overflow-wrap:anywhere; }
.season-choices { grid-template-columns:repeat(3,minmax(0,1fr)); }
.season-choices button strong { overflow-wrap:anywhere; }

/* commerce.css */
.top-actions{justify-self:end;display:flex;align-items:center;gap:9px}.top-actions .icon-btn{justify-self:auto}.purchase-cta{min-height:44px;padding:0 17px;border:1px solid var(--accent);border-radius:13px;background:var(--accent);color:#06100d;font-size:11px;font-weight:850;cursor:pointer}.account-btn{width:44px;height:44px;border:1px solid var(--hairline);border-radius:50%;background:#131a1e;color:var(--text-1);font-weight:850;cursor:pointer}
.locked{position:relative;opacity:.68}.locked:after{content:'⌁';position:absolute;top:6px;right:7px;color:#f4ca70;font-size:10px}.lock-tag{position:absolute;right:7px;bottom:6px;padding:2px 5px;border-radius:5px;background:#463a20;color:#ffd879;font-size:6px;letter-spacing:.1em}.car-colors .locked{outline:2px solid rgba(255,205,105,.32);outline-offset:2px}
.free-tag{position:absolute;right:7px;bottom:6px;padding:2px 5px;border-radius:5px;background:rgba(65,211,163,.13);color:#65e1b5;font-size:6px;letter-spacing:.1em}
.commerce-layer{position:fixed;z-index:80;inset:0;display:grid;place-items:center;padding:24px;background:rgba(2,5,7,.76);backdrop-filter:blur(18px);animation:commerce-in .22s ease-out}.commerce-modal{position:relative;width:min(510px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:38px;border:1px solid rgba(255,255,255,.13);border-radius:26px;background:linear-gradient(145deg,#11191d,#090e11);box-shadow:0 35px 120px rgba(0,0,0,.64);animation:commerce-rise .32s cubic-bezier(.2,.8,.2,1)}.commerce-close{position:absolute;right:18px;top:18px;width:42px;height:42px;border:1px solid var(--hairline);border-radius:12px;background:#151d21;color:var(--text-1);font-size:24px;cursor:pointer}.commerce-mark,.success-orb{display:grid;place-items:center;width:54px;height:54px;margin-bottom:18px;border-radius:16px;background:var(--accent);color:#07100d}.commerce-kicker{margin:0 0 8px;color:var(--accent);font-size:9px;font-weight:850;letter-spacing:.17em}.commerce-modal h2{margin:0;font-size:36px;letter-spacing:-.045em}.commerce-copy{margin:10px 0 25px;color:var(--text-2);font-size:13px;line-height:1.55}.login-form{display:grid;gap:9px}.login-form label{font-size:10px;font-weight:800;color:var(--text-2)}.login-form input{width:100%;height:58px;padding:0 16px;border:1px solid var(--hairline);border-radius:13px;background:#0c1215;color:var(--text-1);outline:none}.login-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}.login-form button,.checkout-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;margin-top:5px;padding:0 18px;border:0;border-radius:13px;background:var(--accent);color:#06100d;font-weight:850;cursor:pointer}.commerce-legal{display:flex;align-items:center;gap:7px;margin:17px 0 0;color:var(--text-3);font-size:9px}.plan-grid{display:grid;gap:9px}.plan-grid>button{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:74px;padding:13px 14px;border:1px solid var(--hairline);border-radius:14px;background:#11181c;color:var(--text-1);text-align:left;cursor:pointer}.plan-grid>button.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,#11181c)}.plan-grid span{display:grid;gap:4px}.plan-grid span small{color:var(--text-3);font-size:9px}.plan-grid b{white-space:nowrap;font-size:16px}.plan-grid b small{display:block;color:var(--text-3);font-size:7px;text-align:right}.text-action{display:block;margin:15px auto 0;border:0;background:none;color:var(--text-2);font-size:10px;cursor:pointer}.success-orb{border-radius:50%;font-size:24px}@keyframes commerce-in{from{opacity:0}}@keyframes commerce-rise{from{opacity:0;transform:translateY(18px) scale(.98)}}
@media(max-width:700px){.purchase-cta{display:none}.top-actions{gap:6px}.commerce-modal{padding:30px 22px}.commerce-modal h2{font-size:30px}}
.mix-control{display:grid;grid-template-columns:1fr auto;gap:4px 14px;margin:12px 0;padding:13px 14px;border:1px solid var(--hairline);border-radius:12px;background:#11181c}.mix-control>span{display:grid;gap:3px}.mix-control strong{font-size:11px}.mix-control small{font-size:8px!important;letter-spacing:.04em!important;color:var(--text-3)}.mix-control output{align-self:center;color:var(--text-2);font-size:10px;font-variant-numeric:tabular-nums}.mix-control input{grid-column:1/-1;width:100%;accent-color:var(--accent)}.mix-control.engine-priority{border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 6%,#11181c)}.mix-note{display:flex;align-items:flex-start;gap:8px;margin:10px 2px 18px;color:var(--text-3);font-size:9px;line-height:1.45}.mix-note svg{color:var(--accent);flex:0 0 auto}
.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:10px;line-height:1.4}
.mix-control input[type=range]{grid-column:1/-1;width:100%;height:34px;margin:2px 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)}

/* drive-selector.css */
.drive-selector{position:relative;align-self:center;min-width:176px;text-align:left}.drive-label{display:block;margin-bottom:7px;color:#9ba8ad;font-size:9px;font-weight:850;letter-spacing:.15em;text-transform:uppercase}.prnd{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#080d10;box-shadow:inset 0 1px 8px rgba(0,0,0,.48)}.prnd button{position:relative;display:grid;place-items:center;min-width:36px;min-height:42px;padding:4px 2px;border:1px solid transparent;border-radius:10px;background:transparent;color:#7f8c92;line-height:1;transition:background .16s,border-color .16s,color .16s,transform .12s}.prnd button strong{font-size:15px;font-weight:800}.prnd button small{position:absolute;left:50%;bottom:-19px;max-width:70px;overflow:hidden;transform:translateX(-50%);color:#87949a;font-size:7px;font-weight:700;letter-spacing:0;opacity:0;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}.prnd button:hover{color:#dbe4e4;background:#151d21}.prnd button:focus-visible{outline:2px solid #fff;outline-offset:2px}.prnd button:active{transform:scale(.95)}.prnd button.active{border-color:rgba(84,232,207,.58);background:#17302d;color:var(--accent);box-shadow:0 0 18px rgba(84,232,207,.18),inset 0 0 0 1px rgba(84,232,207,.12)}.prnd button.active small{color:var(--accent)}.manual-gear{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:7px}.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:38px;height:38px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:#121a1e;color:#e9f2f1;font-size:20px}.manual-gear>span{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:5px;min-width:46px}.manual-gear>span small{color:#7f8c92;font-size:7px;font-weight:800;letter-spacing:.08em}.manual-gear strong{min-width:18px!important;color:var(--accent);font-size:18px!important;text-align:center}.drive-message{position:absolute;z-index:4;right:0;top:76px;width:230px;padding:10px 11px;border:1px solid rgba(255,190,95,.32);border-radius:11px;background:#241e13;color:#ffd489!important;box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:9px!important;line-height:1.4;letter-spacing:0!important;text-align:left}

@media(max-width:620px){.drive-selector{min-width:164px}.prnd button{min-width:34px}.prnd button small{display:none}.drive-message{right:0;width:min(230px,calc(100vw - 28px))}}

/* competitive.css */
.drive-dynamics {
  position: absolute;
  z-index: 5;
  right: 35px;
  top: 185px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(13, 18, 21, .76);
  backdrop-filter: blur(16px);
}
.drive-dynamics div { display: grid; gap: 3px; min-width: 74px; }
.drive-dynamics small { font-size: 7px; letter-spacing: .15em; 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;inset: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;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--accent) 13%,transparent),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);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:inset 0 0 110px color-mix(in srgb,var(--accent) 5%,transparent),0 0 90px color-mix(in srgb,var(--accent) 5%,transparent);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:17px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:17px;background:color-mix(in srgb,var(--accent) 12%,#10171a);color:var(--accent);box-shadow:0 0 34px color-mix(in srgb,var(--accent) 18%,transparent)}.loader-console p{margin:0 0 8px;color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.24em}.loader-console h1{margin:0;font-size:clamp(26px,4vw,39px);font-weight:520;letter-spacing:-.045em}.loader-wave{height:36px;margin:25px 0 18px;display:flex;align-items:center;gap:4px}.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:8px;font-weight:800;letter-spacing:.14em}.loader-version{position:absolute;bottom:26px;color:#536168;font-size:7px;font-weight:800;letter-spacing:.2em}@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;gap:8px;color:var(--world-accent);font-size:8px;font-weight:900;letter-spacing:.22em}.cinema-title span:before,.cinema-title span:after{content:"";width:28px;height:1px;background:currentColor;opacity:.55}
.cinema-title h1{margin:8px 0 3px;color:#f7fbfa;font-size:clamp(27px,3vw,48px);font-weight:330;letter-spacing:-.055em;line-height:.95}.cinema-title p{margin:0;color:rgba(228,239,239,.68);font-size:10px;letter-spacing:.08em}
.world-reel{position:absolute;z-index:6;left:30px;top:50%;width:225px;display:grid;gap:7px;transform:translateY(-44%)}
.world-reel button{position:relative;display:grid;grid-template-columns:21px 35px 1fr;align-items:center;gap:9px;min-height:53px;padding:7px 10px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:linear-gradient(100deg,rgba(8,13,16,.82),rgba(8,13,16,.5));color:#eef5f4;text-align:left;backdrop-filter:blur(14px);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:color-mix(in srgb,var(--world-accent) 58%,transparent);background:linear-gradient(100deg,color-mix(in srgb,var(--world-accent) 13%,rgba(8,13,16,.88)),rgba(8,13,16,.55));box-shadow:inset 3px 0 0 var(--world-accent),0 15px 38px rgba(0,0,0,.18)}
.world-reel b{color:#6f7c81;font-size:7px;letter-spacing:.12em}.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:900}.world-reel span{display:grid;gap:3px;min-width:0}.world-reel strong{font-size:10px}.world-reel small{overflow:hidden;color:#7f8d92;font-size:7px;letter-spacing:.02em;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}
.demo-coach{position:absolute;z-index:7;left:30px;bottom:31px;display:grid;grid-template-columns:auto auto;align-items:center;gap:4px 12px;padding:10px 13px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(7,11,14,.82);backdrop-filter:blur(16px)}.demo-coach>span{color:var(--world-accent);font-size:7px;font-weight:900;letter-spacing:.17em}.demo-coach>div{grid-row:1/3;grid-column:2;display:flex;gap:3px}.demo-coach kbd{display:grid;place-items:center;width:24px;height:24px;border:1px solid rgba(255,255,255,.16);border-bottom-width:3px;border-radius:6px;background:#12191d;color:#dce7e6;font:800 9px/1 system-ui}.demo-coach small{color:#718087;font-size:7px;letter-spacing:.03em}
.billing-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:-9px 0 14px;padding:4px;border:1px solid var(--hairline);border-radius:12px;background:#090e11}.billing-toggle button{min-height:38px;border:0;border-radius:9px;background:transparent;color:var(--text-3);font-size:10px;font-weight:800;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:5px;padding:3px 5px;border-radius:5px;background:rgba(85,231,208,.12);color:var(--accent);font-size:6px;letter-spacing:.08em}

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"] .demo-coach { opacity: 0 !important; pointer-events: none !important; }
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 { font-size: 120px; 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}.demo-coach{left:20px;bottom:107px}.cinema-title h1{font-size:28px}
}

@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:28px}.world-reel{top:47%;transform:translateY(-42%) scale(.88);transform-origin:left center}.demo-coach{display:none}}
@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: 11px; padding: 18px; border: 1px solid var(--hairline); border-radius: 18px; background: #eef3ef; color: #07100d; }
.pairing-card > strong { letter-spacing: .24em; font-size: 13px; }
.pairing-card > small { max-width: 300px; color: #52605a; font-size: 9px; line-height: 1.45; text-align: center; }
.pairing-qr { display: grid; grid-template-columns: repeat(9, 8px); grid-auto-rows: 8px; gap: 2px; padding: 12px; border-radius: 9px; background: white; }
.pairing-qr i { display: block; border-radius: 1px; background: transparent; }
.pairing-qr i.on { background: #08110e; }
.pairing-alternative { margin-top: 19px; color: var(--accent); }
.google-login { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; border: 1px solid var(--hairline); border-radius: 13px; background: #f3f5f4; color: #17201c; font-weight: 800; cursor: pointer; }
.google-login b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: white; color: #4285f4; font-size: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--text-3); font-size: 8px; letter-spacing: .15em; }
.login-divider::before,.login-divider::after { content: ''; height: 1px; flex: 1; background: var(--hairline); }
.login-links { display: flex; justify-content: space-between; gap: 15px; margin-top: 14px; }
.login-links button { border: 0; padding: 0; background: none; color: var(--text-2); font-size: 9px; cursor: pointer; }
.login-notice { margin: 12px 0 0; padding: 10px 12px; border: 1px solid color-mix(in srgb,var(--accent) 24%,transparent); border-radius: 10px; background: color-mix(in srgb,var(--accent) 7%,transparent); color: var(--text-2); font-size: 9px; 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"] .scene-status,
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;gap:12px;text-shadow:none}
html[data-visual-mode="2d"] .speed strong{font-size:94px;font-weight:250;line-height:.72;letter-spacing:-.09em}
html[data-visual-mode="2d"] .speed>span{padding-bottom:3px;font-size:10px;color:#8d989d;letter-spacing:.15em;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}
@media(max-width:850px){html[data-visual-mode="2d"] .speed strong{font-size:70px}}

/* One product, two renderers: shared HUD hierarchy with an explicit view identity. */
.render-mode-badge{position:absolute;z-index:8;right:34px;top:86px;display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(8,13,16,.66);backdrop-filter:blur(12px);transition:opacity .22s,transform .22s}
.render-mode-badge>i{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);font-style:normal}.render-mode-badge>span{display:grid;gap:2px}.render-mode-badge small{font-size:6px;letter-spacing:.18em;color:#819096}.render-mode-badge strong{font-size:8px;letter-spacing:.08em}

/* 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"] .demo-coach,html[data-moving="true"] .purchase-cta{opacity:0;pointer-events:none;transform:translateY(-8px)}
html[data-moving="true"] .scene-status,html[data-moving="true"] .render-mode-badge{opacity:.56}
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(max-width:850px){.render-mode-badge{right:20px;top:72px}.render-mode-badge>span{display:none}}
@media(prefers-reduced-motion:reduce){.render-mode-badge,html[data-moving="true"] .cinema-title,html[data-moving="true"] .world-reel,html[data-moving="true"] .demo-coach{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);
}

.tesla-connect:is(button){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;gap:7px;min-height:40px;padding:0 14px;border:1px solid rgba(84,232,207,.5);border-radius:11px;background:rgba(84,232,207,.12);color:var(--accent);font-size:10px;font-weight:850;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}
.setup-gate{position:fixed;z-index:75;inset:0;display:grid;place-items:center;padding:24px;background:rgba(2,5,7,.9);backdrop-filter:blur(18px)}
.setup-gate>section{width:min(540px,100%);padding:38px;border:1px solid rgba(255,255,255,.13);border-radius:26px;background:linear-gradient(145deg,#11191d,#090e11);box-shadow:0 35px 120px rgba(0,0,0,.64)}
.setup-gate p{margin:0 0 8px;color:var(--accent);font-size:9px;font-weight:850;letter-spacing:.17em}.setup-gate h2{margin:0 0 24px;font-size:32px}.setup-step{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px;border:1px solid var(--hairline);border-radius:14px;background:#11181c}.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:9px;line-height:1.4}.setup-step button,.setup-step a,.setup-upgrade{min-height:44px;padding:0 15px;border:0;border-radius:11px;background:var(--accent);color:#06100d;font-size:10px;font-weight:850;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:10px}.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:950}.setup-step.complete small{color:var(--accent)}
.setup-brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.setup-brand img{display:block;width:136px;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:8px;font-weight:900;letter-spacing:.15em}.setup-copy{max-width:430px;margin:-13px 0 24px!important;color:var(--text-2)!important;font-size:12px!important;font-weight:500!important;letter-spacing:0!important;line-height:1.55}.setup-privacy{display:flex;align-items:flex-start;gap:7px;margin-top:18px;color:var(--text-3);font-size:8px;line-height:1.45}.setup-privacy svg{flex:0 0 auto;color:var(--accent)}
@media(max-width:600px){.setup-gate{padding:14px}.setup-gate>section{padding:26px 22px}.setup-brand{margin-bottom:22px}.setup-brand img{width:118px}.setup-gate h2{font-size:27px}.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: .2em; }
.brand small { font-size: 7px; }
.session-pill { min-height: 34px; background: rgba(255,255,255,.035); }
.top-actions { gap: 7px; }
.purchase-cta { min-height: 40px; padding-inline: 16px; border-radius: 11px; }
.topbar .icon-btn, .account-btn { width: 42px; height: 42px; border-radius: 11px; }

.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: 31px; }
.route-copy>strong { font-size: 18px; }
.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;
  gap: 10px;
  width: max-content;
  min-width: 0;
  max-width: min(360px, calc(100vw - 40px));
  padding: 7px 14px 7px 7px;
  border-radius: 14px;
}
.route-copy { gap: 2px; justify-content: center; }
.route-copy>strong { margin: 0; font-size: 16px; line-height: 1.15; letter-spacing: -.01em; font-weight: 700; }
.route-copy>strong.route-road--none { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.route-copy>small { font-size: 11px; line-height: 1.2; letter-spacing: .01em; }
.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: .01em; }
.speed-sign strong { font-size: 27px; 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: 9px; }
.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: 23px; letter-spacing: -.04em; }
.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: 420; }
.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: 70px; font-weight: 360; }
.speed>span { font-size: 10px; }
.meter-label { margin-bottom: 7px; }
.meter-label strong { font-size: 22px; }
.gear strong { font-size: 54px; }

.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; }
.demo-coach { left: 20px; bottom: 22px; }
.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(600px, 100vw);
  padding: 0 36px 40px;
  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;
}
.panel-head { padding-top: 30px; }
.panel h1 { font-size: 40px; font-weight: 540; }
.panel-head p { color: var(--muted); }
.panel-nav { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.panel-nav button { min-height: 62px; background: rgba(255,255,255,.035); }
.panel-nav button:active { transform: scale(.98); }
.setting-section {
  padding: 30px 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-inline: 11px; }
  .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;
  }
  .speed strong { font-size: 60px; }
  .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) {
  .topbar { grid-template-columns: 1fr auto; }
  .session-pill, .purchase-cta, .topbar .icon-btn[aria-label*="full screen"] { display: none; }
  .brand strong { font-size: 10px; }
  .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: 26px; }
  .route-copy>strong { max-width: 150px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  .cinema-title { top: 154px; width: calc(100vw - 32px); }
  .cinema-title h1 { font-size: 28px; }
  .scene-status, .drive-dynamics, .world-reel, .demo-coach, .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; }
  .speed strong { font-size: 58px; }
  .control-dock { grid-template-columns: 1fr; padding: 0 10px; }
  .control-dock .divider, .destination, .battery { display: none; }
  .sound-btn { padding-inline: 4px; }
  .nitro-btn, .horn-btn, .horn-control select, .disclaimer { display: none; }
  .panel { padding: 0 18px 28px; }
  .panel-head { padding-top: 20px; }
  .panel h1 { font-size: 32px; }
  .panel-nav { top: 105px; margin-inline: -2px; overflow-x: auto; }
  .panel-nav button { min-width: 76px; min-height: 54px; }
  .profiles { grid-template-columns: 1fr; }
  .setting-section { padding: 24px 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-block: 8px; }
  .control-dock { bottom: 14px; height: 64px; }
  .speed strong { font-size: 56px; }
  .demo-coach { display: none; }
}

@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: 10px; }
  .purchase-cta { min-height: 48px; padding-inline: 20px; font-size: 12px; }
  .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: 8px; }
  .world-reel button:hover { transform: none; }
  .scene-status { top: 100px; }
  .drive-dynamics { top: 170px; }
  .render-mode-badge { top: 100px; }
  .demo-coach { display: none; }

  .drive-readout { bottom: 120px; min-height: 96px; }
  .control-dock { bottom: 24px; height: 84px; }
  .sound-btn { min-height: 58px; padding-inline: 4px; }
  .sound-icon, .dock-icon { width: 48px; height: 48px; }
  .nitro-btn { bottom: 24px; height: 84px; min-width: 104px; }
  .prnd { gap: 5px; }
  .prnd button, .manual-gear button { min-width: 44px; min-height: 44px; }

  .scrim { transition-duration: .16s; }
  .panel {
    width: min(680px, 58vw);
    padding-inline: 40px;
    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-head .icon-btn { width: 54px; height: 54px; }
  .panel-nav button { min-height: 72px; }
  .panel-nav button>small { font-size: 10px; }
  .profile, .environments button { min-height: 82px; }
  .choice-grid button, .drive-side button, .vehicle-style-grid button { min-height: 64px; }
  .toggles label { min-height: 64px; }
  .toggles input[type="checkbox"] { width: 44px; height: 26px; }
  .car-colors button, .custom-color { min-width: 52px; min-height: 52px; }
  input[type="range"] { height: 44px; }
  input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; }
  .tesla-connect { min-height: 64px; }
  .commerce-close { width: 52px; height: 52px; }
  .billing-toggle button, .login-form button, .google-login, .plan-card button { min-height: 52px; }
}

/* 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: 46px; height: 46px; }
  .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:44px; min-height:44px; }
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: 19px; }
html[data-tesla="true"] .panel {
  width: min(680px, 58vw); padding-inline: 40px;
  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,
html[data-tesla="true"] .profile,
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: 64px; }
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;gap:10px}
.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:.02em;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:2px solid var(--accent);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"] .demo-coach,[dir="rtl"] .disclaimer,[dir="rtl"] .drive-message{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{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;gap:3px;min-width:0}

/* 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:46px;height:46px}
  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-block: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"] .demo-coach{display:none}
  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-block:20px}
}

/* 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"] .speed strong{font-size:52px}
  html[data-tesla="true"] .gear strong{font-size:44px}
  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-inline: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"] .demo-coach,
  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"] .speed strong{font-size:60px}
  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-inline: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-inline:22px}
}

/* 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:min(300px,100%);aspect-ratio:1;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: 28px; font-weight: 800; cursor: pointer; }
.gear .compact-drive:focus-visible { outline: 2px solid white; outline-offset: 3px; }
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:flex;flex-direction:column;gap:8px;border:1px solid #ffffff26;border-radius:16px;padding:22px;margin:14px 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:14px;margin:22px 0 12px}.purchase-addons{margin:18px 0;border-block:1px solid #ffffff20;padding:16px 0}.purchase-addons summary{cursor:pointer;font-weight:600;padding:8px 0}.purchase-addons .commerce-copy{margin-top:12px}
.purchase-total{display:flex;justify-content:space-between;gap:16px;font-size:14px;margin:20px 0}.purchase-total strong{white-space:nowrap}
@media(max-width:600px){.experience-switch{font-size:11px;padding:8px 4px}.top-actions{gap:4px}.purchase-total{flex-wrap:wrap}}

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

/* Subscription selection and focused settings. */
.panel [hidden]{display:none!important}
.panel .settings-tabs{position:sticky;top:0;z-index:4;display:flex;flex-wrap:wrap;gap:6px;background:#101719;padding:12px 0;margin-bottom:20px}
.panel .settings-tabs button{flex:1 1 auto;min-height:44px;padding:10px 12px;border:1px solid #ffffff24;border-radius:10px;color:#b5bdc2;background:#172125;font:inherit;font-size:12px;letter-spacing:0}
.panel .settings-tabs button.active{background:var(--accent);border-color:var(--accent);color:#081012;font-weight:750}
.settings-subscription{margin-top:16px}.subscription-summary{padding:20px;border:1px solid #ffffff26;border-radius:16px;background:#ffffff05;margin:18px 0}.subscription-heading{display:flex;justify-content:space-between;gap:16px;font-size:16px}.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:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #ffffff15;font-size:13px}.subscription-summary li small{display:block;font-size:11px;color:#a6b1b8;margin-top:5px}.subscription-summary li b{font-size:10px;color:var(--accent)}.subscription-link{display:flex;justify-content:space-between;width:100%;padding:14px 0 0;border:0;border-top:1px solid #ffffff20;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:24px 0;min-width:0;display:grid;gap:10px}.subscription-options legend,.addon-options legend{font-size:15px;font-weight:750;margin-bottom:14px}.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:12px;padding:16px;border:1px solid #ffffff26;border-radius:14px;background:#121b1f;cursor:pointer;min-height:70px}.subscription-option.selected,.addon-option.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,#121b1f)}.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:17px;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:650}.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:2px solid var(--accent);outline-offset:3px}
.order-summary{border-top:1px solid #ffffff26;padding-top:16px}.order-summary h3{font-size:15px;margin:0 0 14px}.order-summary>div{display:flex;justify-content:space-between;gap:14px;font-size:13px;margin:10px 0}.order-summary .order-total{font-size:18px;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:14px}.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:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.product-name{display:inline-flex;align-items:center;gap:8px;min-width:0}
.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-inline-end:4px}
@media(max-width:600px){.product-name{gap:6px}.product-name .icon{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;gap:8px}
.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:24px}.demo-touch-controls small{font-size:10px}
.demo-driving button:active{background:#28524e}.demo-driving button:focus-visible{outline:2px solid white;outline-offset:3px}
@media(max-width:760px){.demo-driving{left:12px;bottom:calc(100px + env(safe-area-inset-bottom));gap:6px}.demo-touch-controls{gap:6px}.demo-touch-controls button{min-width:58px;padding:8px}}

/* 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. */
.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:16px;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;gap:6px;min-height:28px;white-space:normal;overflow-wrap:anywhere;text-align:center;font-size:11px;line-height:1.3;letter-spacing:.02em;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:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #ffb481;outline-offset:4px}
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%;inset:0;object-fit:cover}
.welcome-visual:after{content:"";position:absolute;inset: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:44px;left:48px;z-index:1;display:flex;align-items:center;min-height:48px}
.welcome-brand{text-decoration:none;color:#f1eee7}
.welcome-editorial{position:relative;z-index:1;padding:150px 48px 0}
.welcome-editorial>p,.welcome-eyebrow{font-size:10px;font-weight:750;letter-spacing:.18em;color:#efab83}
.welcome-editorial h1{font-size:64px;line-height:1.05;letter-spacing:-.055em;font-weight:550;margin:22px 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:.04em;display:flex;align-items:center;gap:9px;color:#ddd7c9}
.status-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:#f4a879}
.welcome-content{padding:60px 48px;align-self:center;max-width:640px;width:100%;margin:auto}
.welcome-intro h2{font-size:36px;line-height:1.18;letter-spacing:-.035em;font-weight:600;margin:18px 0 14px;max-width:410px}
.welcome-intro>p{color:var(--ui-muted);font-size:14px;line-height:1.6;margin:0 0 28px}
.welcome-choices{display:grid;gap:14px}
.welcome-page .experience-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;margin:0;padding:24px;border:1px solid #3c4547;border-radius:20px;background:#172023;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:14px;background:#253033;color:#e3c9b0!important}
.welcome-page .entry-overline{display:block;font-size:9px;font-weight:700;letter-spacing:.14em;color:#a4afb0}
.welcome-page .experience-card strong{display:block;font-size:24px;font-weight:600;letter-spacing:-.025em;margin-top:8px}
.welcome-page .experience-card p{font-size:13px;line-height:1.6;color:#b5bec0;margin:10px 0 18px}
.welcome-page .entry-action{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:#f4c49d;min-height:30px}
.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;gap:12px;margin:26px 4px 0;color:#acb6b8}
.welcome-footnote .icon{margin-top:3px;color:#c5b19b}
.welcome-footnote p{margin:0;font-size:12px;line-height:1.7}.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 img{width:108px;height:auto}.launch-wordmark>span{font-size:10px;letter-spacing:.15em;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;inset:0;border:1px solid transparent;border-top-color:#f5b687;border-radius:50%;animation:launch-orbit 2.4s linear infinite}
.launch-eyebrow{font-size:9px;color:#af947e;font-weight:700;letter-spacing:.22em}.launch-center h1{font-size:34px;line-height:1.2;letter-spacing:-.035em;font-weight:550;color:#f1eee7;margin:18px 0 12px}
.launch-description{font-size:14px;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;gap:9px;color:#89969a;font-size:12px}
.launch-recovery{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:24px}.launch-recovery button{display:flex;align-items:center;gap:28px;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:13px;min-height:44px;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:750}
.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:.025em}.control-dock small{color:#adb8b9;letter-spacing:.09em}
.route-copy>.route-road{font-weight:600}.drive-readout .speed>strong{font-weight:500;letter-spacing:-.055em}
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(--ui-stroke);padding-bottom:24px}.panel-head h1{font-weight:550;letter-spacing:-.04em}.panel-head p{color:#adb8ba;font-size:13px;letter-spacing:0}
.panel .settings-tabs{gap:6px;padding:14px 0}.panel .settings-tabs button{border-color:#303d40;background:#182225;color:#b9c2c3;border-radius:13px;min-height:66px}
.panel .settings-tabs button.active{background:#e7ae84;border-color:#e7ae84;color:#192122}
.panel .setting-section{border-bottom:1px solid #2a3437;padding-bottom:24px;margin-bottom:24px}
.panel .section-label{font-size:11px;letter-spacing:.1em;color:#d5b59a}.panel .section-label small{color:#a8b4b7;font-size:10px;letter-spacing:.02em}
.panel .profile,.panel .environments button,.panel .choice-grid button,.panel .drive-side button,.mix-control,.country-list details,.subscription-summary{background:#172124;border-color:#344044;border-radius:14px}
.panel .profile small,.panel .environments small,.panel .setting-hint{color:#aab6b8;letter-spacing:0;line-height:1.5}
.panel .profile.active{background:#2b2923;border-color:#c68c61}.panel .profile-orb{box-shadow:none}.panel .profile-group h3{color:#aab6b8;letter-spacing:.12em;font-size:10px}
html[data-tesla="true"] .commerce-layer{background:rgba(4,9,11,.8)}
.commerce-modal{background:#10191c;border-color:#3a4547;border-radius:24px;box-shadow:0 24px 70px rgba(0,0,0,.3)}
.commerce-modal h2{font-weight:550;letter-spacing:-.04em;line-height:1.15;padding-inline-end:26px}.commerce-copy{color:#b0bdc0;font-size:14px}.commerce-kicker{color:#d5b59a}
.commerce-close{background:#1c272a;border-color:#344044}.checkout-btn,.login-form button[type=submit]{background:#efad7a;color:#182020;min-height:54px;letter-spacing:0}
.subscription-option,.addon-option{background:#182225;border-color:#354145}.subscription-option.selected,.addon-option.selected{background:#2b2923;border-color:#daa77d}.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:#0e1619}.setup-gate>section{background:#162023;border-color:#394649;box-shadow:none}.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:32px;padding-bottom:32px}
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:52px}.welcome-intro h2{font-size:29px}.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:46px}.welcome-brand{left:30px}.welcome-scene-note{left:30px}.welcome-intro h2{font-size:29px}.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:22px}}
@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:38px;margin:12px 0}.welcome-editorial>p{font-size:8px}.welcome-editorial>span,.welcome-scene-note{display:none}.welcome-brand{top:20px;left:26px}.welcome-brand img{width:154px}.welcome-content,html[data-tesla="true"] .welcome-content{padding:28px 22px 36px}.welcome-intro h2{font-size:28px;max-width:300px;margin:12px 0}.welcome-eyebrow{font-size:9px}.welcome-page .experience-card{border-radius:17px;padding:20px}.welcome-footnote{margin-top:22px}.launch-wordmark{top:24px;left:24px;right:24px}.launch-center h1{font-size:27px}.launch-emblem{width:116px;height:116px}.launch-note{font-size:11px;bottom:24px}.commerce-modal{border-radius:20px}.panel .settings-tabs button{font-size:10px;padding-inline:7px}.panel .section-label{flex-wrap:wrap;gap:8px}}
@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:6px}
html[data-tesla="true"] .panel .settings-tabs button{padding-inline:5px;font-size:11px}
html[data-tesla="true"] .welcome-page a:focus,html[data-tesla="true"] .launch-recovery button:focus{outline:2px solid #ffb481;outline-offset:4px}
@media(max-width:640px){html[data-tesla="true"] .panel .settings-tabs button{font-size:10px}}

.launch-wordmark img{mix-blend-mode:screen}
/* 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:16px;font-weight:700;letter-spacing:.3em;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:100vh}
.welcome-intro-nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.welcome-intro-nav>a{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:#e4b58e;text-decoration:none;min-height:48px}
.home-details{max-width:1180px;padding:70px 48px;margin:auto;scroll-margin-top:20px}
.home-section-heading{max-width:640px;margin-bottom:30px}.home-section-heading h2{font-size:36px;font-weight:550;line-height:1.16;letter-spacing:-.035em;margin:14px 0}.home-section-heading p,.home-features p{font-size:14px;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:19px;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(3,minmax(0,1fr));gap:16px}.home-plan{display:flex;flex-direction:column;padding:26px;border:1px solid #384346;border-radius:20px;background:#172124}.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:10px;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:38px;letter-spacing:-.03em;font-weight:550}.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:10px}
.home-plan-link{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:50px;padding:12px 16px;border:1px solid #59605a;border-radius:11px;color:#e6c3a4;text-decoration:none;font-size:13px;font-weight:700}.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:24px;font-weight:550;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:14px;padding:20px;background:#182225;border:1px solid #344044;border-radius:14px;color:inherit;text-decoration:none}.home-addon>.icon{color:#dcb18d;margin-top:2px}.home-addon strong{font-size:14px}.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{padding:18px 6px;font-size:15px;line-height:1.5;min-height:54px;cursor:pointer;color:#d6ded8}.home-faq details p{max-width:700px;margin:0 6px 20px;color:#aeb9ba;font-size:14px;line-height:1.7}.home-final-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:54px;padding:28px;background:#1c2727;border-radius:18px}.home-final-cta h3{font-weight:550;font-size:24px;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;gap:20px;max-width:1180px;margin:auto;padding:28px 48px 40px;color:#a2adb0;font-size:11px}.home-footer>span{font-weight:700;letter-spacing:.15em;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:32px}.home-plan-grid{gap:12px}.home-section-heading h2{font-size:30px}}
@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:28px}}
@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-brand img{display:block;width:190px;height:auto;filter:none;mix-blend-mode:normal}
.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}}
@media(max-width:640px){.welcome-brand{top:14px;left:12px}.welcome-brand img{width:154px}}

/* Peraly company footer, with the original Driwe brand artwork. */
.site-footer{max-width:1180px;margin:auto;padding:48px 48px 36px;border-top:1px solid #303a2d;color:#acb4aa}
.footer-navigation{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:32px;align-items:start;padding-bottom:36px}
.footer-original-logo{display:block;width:180px}.footer-original-logo img{display:block;width:100%;height:auto;filter:none;mix-blend-mode:normal}
.footer-navigation nav{display:flex;flex-direction:column;align-items:flex-start}.footer-navigation h3{font-size:13px;font-weight:650;color:#f4f5f2;margin:12px 0 14px}
.footer-navigation nav>a,.footer-link-pending,.footer-navigation nav>button{display:flex;align-items:center;min-height:48px;padding:8px 0;font-size:12px;line-height:1.5;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;gap:32px;border-top:1px solid #303a2d;padding-top:26px}.footer-company-details p{font-size:11px;line-height:1.8;margin:0 0 4px}.footer-trademark-notice{max-width:420px}
.cookie-settings-dialog{width:480px;max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);overflow:auto;padding:28px;border:1px solid #4a593c;border-radius:20px;background:#171d18;color:#f4f5f2;box-shadow:0 18px 60px #0008}.cookie-settings-dialog::backdrop{background:rgba(5,9,6,.8)}.cookie-settings-dialog h2{font-size:25px;letter-spacing:-.025em;margin:0 0 24px;font-weight:600}.cookie-settings-dialog h3{font-size:14px;margin:0}.cookie-settings-dialog p{font-size:13px;line-height:1.7;color:#adb8a8}.cookie-settings-dialog section{border-top:1px solid #354030;padding:18px 0 4px}.cookie-category{display:flex;align-items:center;justify-content:space-between;gap:16px}.cookie-category span{font-size:11px;color:#b7e879}.cookie-settings-dialog form>button{margin-top:14px;min-height:48px;width:100%;border:0;border-radius:10px;background:#a3e635;color:#15200c;font-weight:700}
@media(max-width:700px){.site-footer{padding:30px 22px}.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{flex-direction:column;gap:18px}.footer-desktop-break{display:none}.cookie-settings-dialog{padding:24px}}
/* 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,html[data-tesla="true"] .footer-navigation nav>a,html[data-tesla="true"] .footer-navigation nav>button{min-height:52px}
html[data-tesla="true"] .home-plan-link,html[data-tesla="true"] .home-addon strong,html[data-tesla="true"] .footer-navigation nav>a,html[data-tesla="true"] .footer-navigation nav>button,html[data-tesla="true"] .footer-link-pending{font-size:14px}
html[data-tesla="true"] .home-plan li,html[data-tesla="true"] .home-addon p{font-size:13px}
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-block:24px 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:18px;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}
html[data-tesla="true"] .cookie-settings-dialog p{font-size:15px}
@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:46px}.welcome-intro h2{font-size:27px}.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:28px}.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:38px;margin:14px 0}html[data-tesla="true"] .welcome-editorial>span,html[data-tesla="true"] .welcome-scene-note{display:none}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-inline:24px}}
@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;gap:24px;padding:24px 48px;margin:auto;border-bottom:1px solid #303a2d}
.information-header img{display:block;width:170px;height:auto}.information-header>a:last-child{display:flex;align-items:center;gap:14px;min-height:52px;color:#b9e986;font-size:14px;text-decoration:none}
.information-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;max-width:1180px;padding:48px;margin:auto}
.information-sidebar{align-self:start;position:sticky;top:24px}.information-sidebar>span{font-size:11px;letter-spacing:.12em;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:52px;padding:12px;border-radius:10px;color:#b5bfb0;text-decoration:none;font-size:14px;line-height:1.5}.information-sidebar nav>a[aria-current=page]{background:#27351e;color:#d4f5b0}.information-support{justify-content:space-between;border-top:1px solid #303a2d;border-radius:0;padding-inline:0;color:#a3e635}
.information-article{max-width:760px;min-width:0;user-select:text;-webkit-user-select:text}.information-article h1{font-size:42px;line-height:1.15;letter-spacing:-.035em;font-weight:550;margin:16px 0}.information-intro{font-size:17px!important;color:#b9c4b2!important}.information-article .policy-revision{font-size:12px;color:#8f9e86;margin:20px 0 30px}.information-article p{font-size:16px;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:26px 0;border-top:1px solid #303a2d;scroll-margin-top:24px}.information-article h2{font-size:23px;line-height:1.4;font-weight:550;margin:0 0 16px}.information-contents{display:grid;gap:4px;margin:24px 0 32px;padding:16px 20px;background:#181f16;border:1px solid #34402d;border-radius:14px}.information-contents a{display:flex;align-items:center;min-height:48px;font-size:14px;line-height:1.5;text-decoration:none}.policy-related{display:flex;flex-wrap:wrap;gap:20px;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:34px}}
@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:14px 22px;gap:12px}.information-header img{width:130px}.information-header>a:last-child{font-size:12px;gap:6px}.information-layout{padding:28px 22px}.information-article h1{font-size:32px}.information-article h2{font-size:21px}.information-article p{font-size:15px}.information-contents{padding:14px}.policy-related{gap:12px}}

/* Clear product disclosures without a blocking setup step. */
.home-subscription-benefits{display:flex;align-items:flex-start;gap:18px;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:16px;line-height:1.65}.home-data-note{margin-top:20px;max-width:960px}
.purchase-details{margin:18px 0;color:#bcc4c8;font-size:14px;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;gap:8px;max-width:1180px;margin:0 auto;padding:20px 48px;border-bottom:1px solid #2b3228}
.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:14px}
.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;gap:16px;align-items:center;margin-top:24px}.home-feature-actions>a{display:inline-flex;align-items:center;gap:12px;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:28px;letter-spacing:-.04em;color:#a3e635}.home-steps a{display:inline-flex;gap:12px;align-items:center;min-height:48px;color:#c4ed82;text-decoration:none}.home-step-note{display:block;color:#899480;font-size:14px;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;gap:6px}.home-section-nav a{padding:0 14px}}

/* Pricing: full billed amounts first, then verifiable annual savings. */
.home-plan-saving{display:flex;flex-direction:column;gap:7px;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;gap:12px;margin-top:24px;color:#b8c7aa}.home-plan-common>.icon{flex-shrink:0;margin-top:3px}.home-plan-common p{margin:0;font-size:14px;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{gap:8px;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:14px}.home-plan p{font-size:14px}

.purchase-inclusions{display:flex;align-items:flex-start;gap:14px;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:16px}.purchase-inclusions p{font-size:14px;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:24px 40px;display:flex;justify-content:space-between;gap:24px;align-items:center;border-bottom:1px solid #30382d}.shop-header img{width:160px;display:block}.shop-header nav{display:flex;flex-wrap:wrap;gap:24px}.shop-header a{display:inline-flex;align-items:center;gap:8px;min-height:48px;color:#c4ed82;text-decoration:none;font-size:14px}
.shop-shell{max-width:1280px;margin:auto;padding:40px}.shop-heading{margin-bottom:36px}.shop-heading h1{font-size:42px;letter-spacing:-.04em;margin:12px 0}.shop-heading>p{color:#aeb9a5;line-height:1.65}.shop-progress{list-style:none;padding:0;display:flex;gap:24px;flex-wrap:wrap;color:#8e9a85;font-size:13px}.shop-progress [aria-current]{color:#c4ed82}
.shop-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}.purchase-selection{min-width:0}.purchase-review{min-width:0}.shop-layout>.purchase-review{position:sticky;top:20px;border:1px solid #455638;background:#192116;border-radius:20px;padding:24px}.shop-layout .commerce-kicker{display:none}.shop-layout h2{font-size:24px;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:52px;white-space:normal;background:#a3e635;color:#172013;border-radius:12px;border:0;padding:14px;font-weight:700}.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:#192019;border-color:#35412f}.shop-layout .selected{border-color:#8fba4a;background:#25301d}.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;gap:8px;margin:18px 0}.addon-group-tabs button{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 14px;border:1px solid #3d4935;border-radius:12px;background:#171f15;color:#c1ccb6;cursor:pointer;font-size:13px}.addon-group-tabs button[aria-selected="true"]{color:#c4ed82;background:#2c3c1e;border-color:#86b842}.addon-group-heading h3{font-size:20px;margin:22px 0 8px}.addon-group-heading p{font-size:14px;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:28px;border:1px solid #455638;border-radius:20px;background:#192116}.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:24px;background:#1e2c18;border:1px solid #526c38;border-radius:16px;margin-bottom:28px}.shop-return p{line-height:1.7;color:#bbc9ae}.shop-return a,.shop-return button{display:inline-flex;align-items:center;gap:8px;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:18px}
@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-header nav{gap:16px}.shop-heading h1{font-size:34px}.shop-progress{gap:12px}.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{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid #34442b;border-radius:12px;background:#172016;color:#b8c9a8;font-size:13px;line-height:1.7}.garage-starters 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:44px;padding:8px 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;gap:12px;width:100%;min-height:56px;padding:16px;border:0;border-radius:12px;background:#a3e635;color:#172013;font-size:16px;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:28px;border:1px solid #405232;background:#172015;border-radius:20px}.phone-handoff-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:center}.phone-handoff h2{font-size:32px;line-height:1.2;margin:16px 0}.phone-handoff p,.phone-handoff li{font-size:16px;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:2px;color:#c4ed82;font-size:22px;margin:18px 0 8px}.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:26px}.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:19px;line-height:1.4;color:#d9f5b4;margin:10px 0}.pro-offer p{font-size:14px;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;gap:14px;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}

.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:14px;line-height:1.65}.billing-management h2{font-size:24px}.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;gap:24px;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;gap:18px;align-items:end;margin:18px 0}.billing-change-fields label{display:flex;flex-direction:column;gap:10px;font-size:14px}.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:14px;line-height:1.65}.billing-preview button{margin:8px 10px 0 0}.billing-subscription .text-action{margin-inline:0}.billing-preview h4{font-size:18px;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;gap:12px;min-height:52px;padding:12px 14px;cursor:pointer;color:#d9edc2;font-size:14px;font-weight:650;list-style:none}.purchase-promo summary::-webkit-details-marker{display:none}.purchase-promo summary>span{display:flex;align-items:center;gap:8px}.purchase-promo summary small{font-size:12px;font-weight:400;color:#b3c4a1}.purchase-promo summary small:after{content:' +';font-size:18px}.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:148px;max-width:100%;height:auto;object-fit:contain;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;gap:10px;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:650;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:14px;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:14px;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}

.shop-browser-check{margin:20px 0;padding:18px;border:1px solid #526c38;border-radius:14px;background:#1d2818;color:#d1edb9}.shop-browser-check p{font-size:14px;line-height:1.6;color:#c0cbb6}.shop-browser-check a{display:inline-flex;align-items:center;min-height:48px;padding:12px;color:#d1edb9;border:1px solid #88b748;border-radius:10px}

/* 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;gap:8px}
.panel .section-label>*{min-width:0;overflow-wrap:anywhere}
.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-inline:16px}
  .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:22px 16px}
  .commerce-modal h2{font-size:28px;padding-inline-end:32px;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-inline:16px}
  .shop-login,.phone-handoff{padding:18px}
  .topbar .experience-switch{max-width:72px;white-space:normal;text-align:center}
  .topbar .brand-logo{width:60px;max-width:100%}
}
@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,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:44px;height:44px}
  .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,.demo-coach{display:none}
  .drive-readout,html[data-tesla="true"] .drive-readout{left:12px;right:124px;bottom:86px;min-height:72px;padding:6px 12px;grid-template-columns:minmax(0,1fr) auto;gap:12px;transform:none}
  .engine-meter{display:none}
  .drive-readout .speed strong,html[data-tesla="true"] .drive-readout .speed strong{font-size:44px}
  .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:8px 0;margin-bottom:12px}
  .panel .settings-tabs button,html[data-tesla="true"] .panel .settings-tabs button{flex:0 0 auto;min-width:86px;min-height:48px;padding:8px;font-size:12px}
  .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;gap:4px;min-width:0;min-height:48px;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:10px;line-height:1.2;color:#adb8b9;letter-spacing:.04em}
.metrics-placeholder strong{font-size:13px;line-height:1.25;font-weight:600}
.metrics-placeholder:hover{background:#45d8c426}
.metrics-placeholder:focus-visible{outline:2px solid #45d8c4;outline-offset:3px}
.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:56px;padding:7px 10px;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)}
.metrics-preview-label{position:relative;z-index:1;font-size:9px;font-weight:600;line-height:1.1;letter-spacing:.07em;text-transform:uppercase;color:#c2d3d0}
.metrics-preview-tag{position:absolute;inset-inline-end:8px;top:8px;font-size:7px;line-height:1;letter-spacing:.08em;color:#839d97}
.metrics-preview-art{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.22;color:#b2e8d9;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;inset-inline-end:10px;top:19px;font-size:27px;font-weight:500;line-height:1;letter-spacing:-.05em;white-space:nowrap}.preview-number>span{font-size:12px;letter-spacing:0}.preview-distance{position:absolute;inset-inline-end:10px;bottom:5px;font-size:8px;letter-spacing:.02em}
.preview-battery{position:absolute;inset-inline-end:10px;bottom:5px;display:flex;gap:2px}.preview-battery i{width:5px;height:3px;background:currentColor;border-radius:1px}.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;gap:5px;min-height:23px;padding:3px 7px;border:1px solid rgba(165,229,204,.26);border-radius:7px;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}.metrics-preview--map .metrics-unlock{gap:6px}
.metrics-preview--battery .metrics-preview-tag{font-size:6px;inset-inline-end:6px}.metrics-preview--battery .metrics-preview-label{font-size:8px}
.metrics-preview--battery .metrics-unlock{gap:3px;padding-inline:5px}
@media(max-width:600px){.metrics-preview--map{width:190px;min-height:58px}}
@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:44px;padding:8px 12px}
  .demo-mode .demo-touch-controls{gap:6px}
  .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;gap:8px}
  .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{gap:6px;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:18px;line-height:18px}
  .demo-mode .demo-touch-controls small{font-size:9px}
}
@media(max-height:500px){
  #app.demo-mode .drive-readout{min-height:72px;padding-block:6px}
  #app.demo-mode .drive-readout .speed strong{font-size:40px}
  #app.demo-mode .gear .compact-drive{min-height:44px;padding-block:4px;font-size:22px}
  #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; }
:where(button,a,input,select,summary):focus-visible { outline: 2px solid var(--design-lime); outline-offset: 4px; }
.welcome-page,.shop-page,.information-page { background: var(--design-ink); color: var(--design-copy); }
:where(.welcome-page,.shop-page,.information-page) p { text-wrap: pretty; }
:where(.welcome-page,.shop-page,.information-page) h1,
:where(.welcome-page,.shop-page,.information-page) h2 { text-wrap: balance; }

/* 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: 500; line-height: 1.02; letter-spacing: -.055em; 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: .2em; font-weight: 700; }
.welcome-scene-note { padding: 10px 14px; border: 1px solid #ffffff20; border-radius: 99px; background: #0c151bb3; }
.welcome-intro h2 { font-weight: 500; letter-spacing: -.045em; }
.welcome-intro>p { line-height: 1.75; color: var(--design-muted); }
.welcome-page .experience-card { border-color: var(--design-line); background: #151c1f; border-radius: 18px; padding: 26px; box-shadow: 0 12px 32px #00000014; }
.welcome-page .experience-card strong { font-weight: 550; letter-spacing: -.035em; }
.welcome-page .experience-card p { color: #b5c0c2; }
.welcome-page .entry-icon { background: #242f29; color: var(--design-lime)!important; border: 1px solid #b3ed5920; 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: 14px; border-top: 1px solid #dcebc612; }
.welcome-page .entry-overline { color: #a4b0b3; letter-spacing: .16em; }
.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: 500; letter-spacing: -.045em; }
.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: #141b1e; border: 1px solid var(--design-line); border-radius: 18px; box-shadow: 0 8px 28px #00000012; }
.welcome-page .home-plan.recommended { background: linear-gradient(150deg,#263023,#141c1c); border-color: #819f50; }
.home-features article,.home-steps li { padding: 24px; }
.home-price { font-variant-numeric: tabular-nums; letter-spacing: -.055em; }
.home-price span { letter-spacing: 0; }
.home-plan h3,.home-features h3,.home-steps h3 { letter-spacing: -.025em; 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: 48px; border-color: #46534a; border-radius: 11px; }
.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: linear-gradient(115deg,#243121,#152022); border: 1px solid #46583a; border-radius: 20px; }
.welcome-page .home-faq details { border-color: var(--design-line); }
.home-faq summary { padding-block: 23px; font-weight: 550; }
.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: #ffffff26; box-shadow: 0 10px 32px #00000026; }
.drive-readout .speed>strong { font-weight: 450; font-variant-numeric: tabular-nums; letter-spacing: -.06em; }
.meter-label strong { font-variant-numeric: tabular-nums; font-weight: 500; }
.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: 500; letter-spacing: -.05em; }
.panel-head p { color: var(--design-muted); }
.panel .settings-tabs button { background: #1b2529; border-color: #354146; color: #bac7c9; border-radius: 12px; }
.panel .settings-tabs button.active { background: var(--design-lime); border-color: var(--design-lime); color: #182210; box-shadow: none; }
.panel .section-label { color: #dbe5e3; letter-spacing: .12em; }
.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: #192226; border-color: #354147; }
.panel .profile.active,.panel .environments button.active,
.panel .choice-grid button.active,.panel .drive-side button.active { background: #263323; border-color: #91b85a; box-shadow: inset 3px 0 0 var(--design-lime); }
.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: 500; letter-spacing: -.05em; }
.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: #151e21; border-color: #3a474c; border-radius: 18px; }
.subscription-option.selected,.addon-option.selected,.shop-layout .subscription-option.selected,.shop-layout .addon-option.selected { background: #263222; border-color: #8eaf57; }
.checkout-btn,.shop-layout .checkout-btn,.login-form button[type=submit] { background: var(--design-lime); color: #17200f; border-radius: 12px; }
.purchase-footer { background: #111a1d; border-color: #344146; }
.billing-toggle,.welcome-page .home-billing { background: #0d1518; border-color: #364349; border-radius: 13px; padding: 5px; }
.billing-toggle button.active,.welcome-page .home-billing button.active { background: #303d2b; color: #eaf5df; border-radius: 9px; }
.commerce-copy,.subscription-option small,.addon-option small { color: #b4c1c4; }
.commerce-kicker,.recommendation { color: var(--design-lime); }
.login-form input { background: #0e171a; border-color: #48585e; border-radius: 10px; color: var(--design-copy); }
.information-article h1 { font-weight: 500; letter-spacing: -.05em; }
.information-article p { line-height: 1.85; }
.information-contents { border-color: #354248; background: #151e21; border-radius: 14px; }
.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: clamp(52px,4.6vw,76px); }
  .home-details { padding-block: 76px; }
}
@media(max-width:640px) {
  .welcome-page .experience-card { padding: 20px; gap: 14px; }
  .welcome-editorial h1 { font-size: 40px; }
  .welcome-scene-note { padding: 8px 10px; }
  .home-faq summary { padding-block: 18px; }
}
@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:650;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:16px}
.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:24px;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-inline:10px}}
.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;gap:8px}
.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-inline-start:8px}
.showcase-tools button[aria-pressed="true"]{background:#b3ed59;color:#15200e;border-color:#b3ed59}

.showcase-panel{position:fixed;z-index:40;left:0;right:0;bottom:0;height:40vh;max-height:40vh;overflow:auto;padding:18px 24px;background:#11181b;border-top:1px solid #354146;overscroll-behavior:contain}
.showcase-panel h3{margin:0 0 10px;font-size:18px}
.showcase-panel .tuning-control{margin:12px 0 0}
.showcase-panel>p{margin:8px 0 0}.showcase-panel>p:empty{display:none}

/* Settings polish: flags, readable cards, and a quick-settings row. */
.quick-settings{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:8px 0 12px}
.quick-settings button{display:grid;place-items:center;align-content:center;gap:2px;min-height:58px;padding:6px 4px;border:1px solid var(--hairline,rgba(224,241,244,.14));border-radius:12px;background:#12191d;color:var(--text-2,#aab7bc);font:inherit;cursor:pointer}
.quick-settings button svg{width:20px;height:20px}
.quick-settings button small{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.quick-settings button b{font-size:11px;font-weight:600;color:var(--text-1,#f6faf9)}
.quick-settings button[aria-pressed="true"]{border-color:var(--accent);background:#152522;color:var(--accent)}
.quick-settings button:focus-visible{outline:2px solid var(--accent);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:10px;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:10px;letter-spacing:0;text-transform:none;line-height:1.35;color:#9fb0b6}
.region-grid .route-stops{font-size:10px;letter-spacing:0}
.environments strong{font-size:12px;letter-spacing:0}
.environments small{font-size:10px;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:.02em;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:20px 22px 18px;border:1px solid #2d3a3e;border-radius:20px;background:#10191c;box-shadow:0 24px 70px rgba(0,0,0,.4);text-align:center}
@media (max-width:559px){.resume-gate{top:140px;left:12px;right:12px}}
@media (max-height:500px){.resume-gate{top:126px}.resume-gate>section{padding:12px 16px}.resume-gate h2{font-size:18px;margin:0 0 2px}.resume-gate .resume-setup{margin:0 0 10px}.resume-gate .checkout-btn{min-height:44px;font-size:15px}}
.resume-gate .commerce-kicker{margin:0 0 6px}
.resume-gate h2{margin:0 0 6px;font-size:26px;font-weight:420}
.resume-gate .resume-setup{margin:0 0 18px;color:#9fb0b5;font-size:14px}
.resume-gate .checkout-btn{width:100%;min-height:56px;font-size:17px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.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:1fr auto auto;gap:10px;align-items:center;padding:12px 14px;border:1px solid #3a4a4f;border-radius:16px;background:#10191c;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.bookmark-nudge strong{display:block;font-size:14px}.bookmark-nudge p{margin:2px 0 0;font-size:12px;color:#9fb0b5}
.bookmark-nudge button{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid #3a4a4f;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;inset:0;z-index:62;display:grid;place-items:center;padding:20px;background:rgba(8,12,14,.6)}
.trip-card>section{width:min(560px,100%);padding:22px;border:1px solid #2d3a3e;border-radius:20px;background:#10191c;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.trip-card h2{margin:0 0 4px;font-size:24px;font-weight:420}
.trip-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0}
.trip-stats div{padding:12px;border-radius:14px;background:#182226}
.trip-stats small{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8fa0a5}
.trip-stats strong{display:block;margin-top:4px;font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.trip-stats strong em{font-style:normal;font-size:13px;color:#9fb0b5;margin-inline-start: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:1fr auto;gap:8px;padding:10px 12px;border-radius:12px;background:#141d20;font-size:13px}
.trip-list li small{color:#8fa0a5}
.trip-toggles label{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px}
@media (max-height:800px){.resume-gate>section{padding:20px}.resume-gate h2{font-size:22px}.trip-stats strong{font-size:19px}}

/* Motion source tag, drive of the day, chapter line. */
.motion-tag{margin-inline-start:8px;padding:2px 7px;border-radius:999px;font-size:9px;letter-spacing:.08em;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:1fr auto;gap:10px;align-items:center;padding:14px;border-radius:14px;background:linear-gradient(135deg,#182226,#11191c);border:1px solid #2d3a3e}
.today-card strong{display:block;font-size:16px}.today-card span{font-size:12px;color:#9fb0b5}
.today-card button{min-height:44px;padding:0 16px;border-radius:12px;border:1px solid #3a4a4f;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:9px;letter-spacing:.1em;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)}

/* 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:2px solid #6ce3c4;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;gap:10px;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:.12em;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;gap:8px;min-width:0;color:var(--text-1,#f6faf9)}
.navigation-peek .maneuver-icon{flex-shrink:0;color:#6ce3c4}
.navigation-peek b{font-size:17px;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;gap:8px;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;gap:12px;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:.1em;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;gap:8px;font-size:26px;font-weight:700;line-height:1.05;letter-spacing:-.01em;color:#fff}
.navigation-exit-badge{padding:3px 7px;border-radius:6px;background:#6ce3c4;color:#072922;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.08em;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;gap:1px;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;gap:4px 16px;padding:6px 14px 8px;border-top:1px solid var(--hairline,#34434b)}
.navigation-trip span{display:flex;align-items:baseline;gap:5px;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;gap:6px;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:2px solid #6ce3c4;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:9px;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:.1em;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:10px;color:var(--text-3,#77868d)}
@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-drawing-button{grid-area:drawing;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;gap:3px;padding:6px 10px 6px 12px;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:14px}
html[data-tesla="true"] .navigation-modal #navigation-content{display:block}
html[data-tesla="true"] .navigation-modal .navigation-distance{font-size:30px}
html[data-tesla="true"] .navigation-modal .navigation-instruction{font-size:17px}
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:6px}
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}}

/* clean-ui.css */
/* Clean UI pass (9 Sep 2026): one surface language across the cockpit and
   the settings panel. Radii 14 px, hairline borders, no stacked shadows;
   brand lime for actions and active state, teal for live data, amber only for
   warnings; icons rather than emoji. Loaded before car-density.css. */
:root{--ui-lime:#c8f048;--ui-teal:#6ce3c4;--ui-hair:rgba(224,241,244,.12)}
.panel-kicker{color:var(--text-2,#aab7bc);letter-spacing:.14em}
.panel-kicker .icon{color:var(--ui-lime)}
.panel-head h1{letter-spacing:-.03em}
.experience-entry button{border-radius:14px;border-color:var(--ui-hair);background:#12191d;color:var(--text-1,#f6faf9);font-weight:600}
.experience-entry button:hover{border-color:var(--ui-lime)}
.panel-nav button{border-radius:14px}
.section-label>span{font-size:11px;letter-spacing:.1em}
.section-label small{font-size:10px;letter-spacing:.06em}
.horn-picker{border-radius:14px;border-color:var(--ui-hair)}
.horn-preview-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#16262b;color:var(--ui-teal);font-size:0}
.horn-picker>button{min-height:44px;padding:0 16px;border:1px solid var(--ui-lime);border-radius:999px;background:transparent;color:var(--ui-lime);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.horn-picker>button:hover{background:rgba(200,240,72,.1)}
.horn-btn .horn-choice-icon{top:6px;right:8px;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:14px;border-color:var(--ui-hair)}
.environments button.active,.region-grid button.active{border-color:var(--ui-lime)}
.lock-tag{border-radius:999px;font-size:8px;letter-spacing:.12em;padding:2px 7px}
.region-grid button.locked,.environments button.locked{opacity:.78}
.subscription-link,.text-action{color:var(--ui-lime)}
.subscription-link{min-height:44px;display:inline-flex;align-items:center;gap:6px}
.icon-btn,.account-btn{border-color:var(--ui-hair)}
.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{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.section-label>span{flex:1;min-width:0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-1,#f6faf9)}
.visual-choices button>span .icon{color:var(--text-2,#aab7bc)}
.visual-choices button.active>span .icon{color:var(--ui-lime)}
.section-label small{white-space:nowrap;color:var(--text-3,#77868d)}
.section-label{position:relative}
.setting-section[data-section]>.section-label::before{content:'';flex-shrink:0;width:28px;height:28px;border-radius:9px;background:rgba(200,240,72,.12)}
.setting-section[data-section]>.section-label::after{content:'';position:absolute;left:5px;top:50%;width:18px;height:18px;margin-top:-9px;background-color:var(--ui-lime);-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}
.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:22px 0;border-bottom:1px solid var(--ui-hair)}
.setting-section:last-of-type{border-bottom:0}
.choice-grid button,.drive-side button,.vehicle-style-grid button,.toggles label{min-height:52px;padding:10px 12px;border:1px solid var(--ui-hair);border-radius:14px;background:#12191d;color:var(--text-1,#f6faf9);text-align:left}
.choice-grid button strong,.drive-side button strong,.vehicle-style-grid button strong{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}
.choice-grid button small,.drive-side button small,.vehicle-style-grid button small{font-size:10px;letter-spacing:0;text-transform:none;color:var(--text-3,#77868d)}
.choice-grid button.active,.drive-side button.active,.vehicle-style-grid button.active,.toggles label.active{border-color:var(--ui-lime);background:rgba(200,240,72,.08);color:var(--text-1,#f6faf9)}
.choice-grid button.active strong,.drive-side button.active strong{color:var(--ui-lime)}
.drive-side{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drive-side button{display:grid;gap:3px}
.setting-subtitle strong{font-size:13px}
.setting-subtitle small{font-size:10px;color:var(--text-3,#77868d)}
/* Parked showcase: a card row instead of a paragraph. */
.setting-section.showcase-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding:16px;margin:0 0 6px;border:1px solid var(--ui-hair);border-radius:14px;background:#12191d}
.setting-section.showcase-tools h3{grid-column:1;margin:0;font-size:14px;font-weight:600}
.setting-section.showcase-tools p{grid-column:1;margin:0;font-size:12px;line-height:1.4;color:var(--text-3,#77868d)}
.setting-section.showcase-tools>button{grid-column:2;grid-row:1/3;min-height:44px;padding:0 14px;border:1px solid var(--ui-lime);border-radius:999px;background:transparent;color:var(--ui-lime);font-weight:600;white-space:nowrap;font-size:13px}
.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;gap:8px}
.season-choices button .icon{flex-shrink:0;color:var(--ui-teal)}
.season-choices button.active .icon{color:var(--ui-lime)}

/* car-density.css */
/* Car density. The Tesla browser's split view is roughly 960–1100 CSS px wide
   and 540–780 tall, so the instruments shrink to leave the scene most of the
   screen; every touch target stays at 48 px. Loaded after the decorative
   sheets and before tesla-compatibility.css, which must remain last. Heights
   of 500 px and under keep the phone-landscape rules from responsive.css. */
@media (max-height:800px) and (min-height:501px){
 html[data-tesla="true"] .topbar{height:54px;padding:0 14px}
 html[data-tesla="true"] .topbar .brand-logo{width:70px}
 html[data-tesla="true"] .topbar .purchase-cta{white-space:nowrap;padding:0 14px;font-size:13px}
 html[data-tesla="true"] .topbar .session-pill em{display:none}
 html[data-tesla="true"] .topbar .experience-switch{font-size:13px}
 /* Road ribbon: one line of road name, a 44 px sign. */
 html[data-tesla="true"] .route-ribbon{top:70px;left:14px;gap:10px;min-width:0;padding:6px 12px 6px 8px;border-radius:14px}
 html[data-tesla="true"] .speed-sign{width:46px;height:50px}
 html[data-tesla="true"] .speed-sign strong{font-size:24px}
 html[data-tesla="true"] .speed-sign[data-metric="true"] strong{font-size:19px}
 html[data-tesla="true"] .route-copy>strong{font-size:16px;line-height:1.15}
 html[data-tesla="true"] .route-copy>small,html[data-tesla="true"] .route-copy .eyebrow{font-size:10px}
 html[data-tesla="true"] .route-ribbon .speed-warning{max-width:220px;font-size:11px}
 html[data-tesla="true"] .demo-mode .demo-driving{top:140px;left:14px}
 /* Bottom cluster: a 64 px readout over a 52 px dock, horn and nitro in the
    same row as the dock, and a slim entertainment notice under everything. */
 html[data-tesla="true"] .disclaimer{bottom:2px;min-height:16px;font-size:9px;line-height:1.2;color:#9aa6ab}
 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:20px}
 html[data-tesla="true"] .control-dock{left:14px;right:238px;bottom:10px;width:auto;height:52px;padding:0 10px;border-radius:14px;transform:none}
 html[data-tesla="true"] .control-dock .sound-icon,html[data-tesla="true"] .control-dock .dock-icon{width:34px;height:34px}
 html[data-tesla="true"] .control-dock small{font-size:8px}
 html[data-tesla="true"] .sound-btn strong,html[data-tesla="true"] .destination strong,html[data-tesla="true"] .battery strong{font-size:12px}
 html[data-tesla="true"] .drive-readout{left:14px;right:238px;bottom:70px;width:auto;min-height:64px;padding:8px 16px;grid-template-columns:118px minmax(140px,1fr) 118px;gap:16px;border-radius:16px;transform:none}
 html[data-tesla="true"] .drive-readout .speed strong{font-size:44px;line-height:.9}
 html[data-tesla="true"] .speed>span{font-size:9px}
 html[data-tesla="true"] .meter-label{margin-bottom:4px}
 html[data-tesla="true"] .meter-label strong{font-size:18px}
 html[data-tesla="true"] .meter{height:5px}
 html[data-tesla="true"] .meter-scale{font-size:7px}
 html[data-tesla="true"] .gear strong{font-size:34px}
 html[data-tesla="true"] .gear .compact-drive{min-height:44px;padding:4px 10px;font-size:22px}
 html[data-tesla="true"] .nitro-btn{right:14px;bottom:10px;width:100px;height:52px;border-radius:14px}
 html[data-tesla="true"] .horn-btn{right:122px;bottom:10px;width:96px;height:52px;border-radius:14px}
 html[data-tesla="true"] .horn-control select{right:122px;bottom:72px}
 html[data-tesla="true"] .nitro-btn strong{font-size:15px}
 html[data-tesla="true"] .nitro-btn small,html[data-tesla="true"] .horn-btn small{font-size:6px}
 /* The route card may use the freed height. */
 html[data-tesla="true"] .navigation-map{top:70px;right:14px;max-height:calc(100vh - 252px)}
 html[data-tesla="true"] .navigation-compact:not(.navigation-modal){top:70px}
 /* Settings: a one-line head so the first options are visible without scrolling. */
 html[data-tesla="true"] .panel{padding:0 22px 22px}
 html[data-tesla="true"] .panel-head{padding:10px 4px 8px}
 html[data-tesla="true"] .panel-head h1{font-size:22px;line-height:1.1;margin:2px 0 0}
 html[data-tesla="true"] .panel-head p{display:none}
 html[data-tesla="true"] .panel-kicker{font-size:9px}
 html[data-tesla="true"] .experience-entry{margin:6px 0 4px}
 html[data-tesla="true"] .experience-entry button{min-height:44px;padding:6px 10px;font-size:12px}
 html[data-tesla="true"] .panel-nav{top:62px;padding:6px 4px 8px}
 html[data-tesla="true"] .panel-nav button{min-height:50px}
 html[data-tesla="true"] .setting-section{scroll-margin-top:132px}
}

/* Second pass from the car photos of 9 September: driving controls as a slim
   row that never sits under the ribbon, a compact speed warning, smaller
   digits, 44 px top-bar buttons. */
@media (max-height:800px) and (min-height:501px){
 /* The ribbon is at most 90 px tall here (one-line road name, two-line warning), so the controls start at 168 px. */
 html[data-tesla="true"] .demo-mode .demo-driving{top:168px;bottom:auto;left:14px;right:auto;max-width:none;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
 html[data-tesla="true"] .route-copy>strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 html[data-tesla="true"] .demo-mode .demo-driving>.demo-drive-toggle{width:48px;min-width:48px;height:48px;padding:0;border-radius:14px;background:rgba(10,18,23,.86)}
 /* Pedals: two 48 px icon buttons under the toggle, brake left and accelerator right (tesla-compatibility.css keeps the two-column grid). */
 html[data-tesla="true"] .demo-touch-controls{gap:6px;min-width:0;width:102px}
 html[data-tesla="true"] .demo-touch-controls button{display:flex;align-items:center;justify-content:center;width:48px;min-width:48px;height:48px;min-height:48px;padding:0;border-radius:14px;border-color:rgba(255,255,255,.16);background:rgba(10,18,23,.82)}
 html[data-tesla="true"] .demo-touch-controls button:last-child{color:#7ef0d4}
 html[data-tesla="true"] .demo-touch-controls button:first-child{color:#ffb4a4}
 html[data-tesla="true"] .demo-driving button:active{transform:scale(.97)}
 html[data-tesla="true"] .route-ribbon{max-width:300px}
 html[data-tesla="true"] .route-ribbon .speed-warning{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:230px;margin-top:4px;padding-top:4px;font-size:10.5px;line-height:1.3}
 html[data-tesla="true"] .route-ribbon .speed-warning.hidden{display:none}
 html[data-tesla="true"] .speed-sign.over-limit:after{display:none}
 html[data-tesla="true"] .drive-readout{bottom:66px;min-height:56px;padding:6px 14px;gap:14px;grid-template-columns:104px minmax(120px,1fr) 110px}
 html[data-tesla="true"] .drive-readout .speed strong{font-size:38px}
 html[data-tesla="true"] .meter-label{margin-bottom:3px}
 html[data-tesla="true"] .meter-label strong{font-size:15px}
 html[data-tesla="true"] .meter-label span{font-size:8px}
 html[data-tesla="true"] .meter{height:4px}
 html[data-tesla="true"] .meter-scale{display:none}
 html[data-tesla="true"] .drive-label{font-size:8px}
 html[data-tesla="true"] .gear .compact-drive{min-height:44px;width:64px;min-width:64px;padding:2px 8px;font-size:19px}
 html[data-tesla="true"] .topbar .icon-btn,html[data-tesla="true"] .account-btn{width:44px;height:44px}
 html[data-tesla="true"] .topbar .icon-btn .icon{width:18px;height:18px}
}

/* Third pass, QA of 9 September (docs/QA_REPORT_2026-09-09.md): the chapter
   title sits in the free band between the world reel and the navigation card
   instead of under the card, stays centred in right-to-left languages, and
   the studio's secondary controls reach 44 px. */
@media (max-height:800px) and (min-height:501px){
 html[data-tesla="true"] .demo-mode .cinema-title{left:calc(50% - 76px);width:min(360px,calc(100vw - 520px))}
}
[dir="rtl"] .cinema-title{text-align:center}
html[data-tesla="true"] .horn-upgrade{min-height:44px;align-items:center;font-size:11px}
html[data-tesla="true"] .car-colors>button,html[data-tesla="true"] .custom-color{width:44px;height:44px}
html[data-tesla="true"] .lightweight-toggle{min-height:44px}

/* 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;inset:0;z-index:30}
html[data-showcase="true"] #road{z-index:1}