:root{--bg:#080f1a;--surface:#0d1724;--text:#edf3fa;--secondary:#9aaabc;--line:#233143;--blue:#278dff;--amber:#f2b35b;--press-duration:140ms;--panel-duration:360ms;--muted-control:#a2b1c4;--ease:cubic-bezier(.2,.75,.2,1)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{border:0;color:inherit;cursor:pointer;background:transparent;padding:0;transition:background-color var(--press-duration),color var(--press-duration),transform var(--press-duration) var(--ease)}button:hover{background:#202c3b}button:active{background:#2d3b4d;transform:scale(.97)}button:focus-visible,input:focus-visible{outline:2px solid #d7e5f5;outline-offset:3px}button:disabled{opacity:.32;cursor:default;transform:none}button:disabled:hover{background:transparent}[hidden]{display:none!important}b{font-weight:400}svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}
.cockpit{position:relative;width:1920px;height:720px;overflow:hidden}.map{position:absolute;left:0;top:0;width:1468px;height:612px;overflow:hidden;background:#101b2a;transition:width 360ms var(--ease)}.cockpit[data-nav="turn"] .map{width:1920px}.map-stage{position:absolute;inset:0;width:1920px;height:612px;transform-origin:751px 443px;touch-action:none;cursor:grab;transition:transform 360ms var(--ease)}.map-stage.dragging{transition:none;cursor:grabbing}.map-art,.route-art{display:block;position:absolute;left:-320px;top:-120px;width:2560px;height:852px;transition:opacity 220ms}.route-art{pointer-events:none}.vehicle-marker{position:absolute;width:200px;height:300px;left:651px;top:243px;pointer-events:none;transition:left 450ms var(--ease),top 450ms var(--ease),opacity 220ms}
.maneuver{position:absolute;left:40px;top:32px;background:#0b1422;display:grid;grid-template-columns:56px 1fr;grid-template-rows:90px auto;align-items:center;gap:28px;padding:24px 30px;width:376px;height:138px;border-radius:20px;box-shadow:0 4px 24px #03091340;transform-origin:top left;transition:opacity 220ms,background-color 220ms,box-shadow 220ms,width 360ms var(--ease),height 360ms var(--ease),padding 360ms var(--ease),grid-template-columns 360ms var(--ease),grid-template-rows 360ms var(--ease),column-gap 360ms var(--ease),row-gap 360ms var(--ease)}.turn-icon{width:56px;height:56px;color:var(--amber);stroke-width:4;transition:width 360ms var(--ease),height 360ms var(--ease)}.distance{display:flex;gap:12px;align-items:baseline;line-height:1.05}.distance span{font-family:Arial,sans-serif;font-size:44px;font-weight:500;letter-spacing:-1.5px;font-variant-numeric:tabular-nums;transition:font-size 360ms var(--ease)}.distance small{font-size:21px;color:#c0cedf;transition:font-size 360ms var(--ease)}.maneuver p{font-size:22px;margin:14px 0 0;white-space:nowrap;transition:font-size 360ms var(--ease),margin-top 360ms var(--ease)}.lane-guidance{grid-column:1/-1;display:flex;align-items:center;gap:28px;padding-top:24px;border-top:1px solid #39404a;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity 200ms,transform 300ms var(--ease),visibility 300ms}.lanes{display:flex;gap:26px}.lanes svg{width:38px;height:48px;stroke-width:3;color:#627183}.lanes .selected-lane{color:var(--amber)}.lane-guidance>span{color:#c0cad6;font-size:23px}
.cockpit[data-nav="turn"] .maneuver{width:588px;height:318px;padding:36px 40px;grid-template-columns:104px 1fr;grid-template-rows:138px auto;gap:24px 32px}.cockpit[data-nav="turn"] .turn-icon{width:96px;height:96px}.cockpit[data-nav="turn"] .distance span{font-size:82px;color:var(--amber);letter-spacing:-3px}.cockpit[data-nav="turn"] .distance small{font-size:26px}.cockpit[data-nav="turn"] .maneuver p{font-size:28px;margin-top:20px}.cockpit[data-nav="turn"] .lane-guidance{opacity:1;visibility:visible;transform:translateY(0)}
.map-tools{position:absolute;left:1376px;top:32px}.square{width:64px;height:64px;background:#0c1624;border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 14px #060c1640}.square svg{width:28px;height:28px}.trip{position:absolute;left:40px;bottom:30px;width:428px;background:#0b1422;border-radius:20px;padding:18px 24px 8px;transition:opacity 220ms}.trip-top{display:flex;align-items:baseline;gap:24px}.trip-top strong{font-family:Arial,sans-serif;font-size:36px;font-weight:500;letter-spacing:-1px;font-variant-numeric:tabular-nums}.trip-top>span{font-family:Arial,sans-serif;font-size:25px;white-space:nowrap}.trip-top .unit{font-family:"PingFang SC",sans-serif;font-size:17px;color:var(--secondary)}.trip-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:4px;font-size:20px;color:#acbdd1;min-height:64px}.trip-bottom button{font-size:18px;color:#c5d1df;width:72px;height:64px;border-radius:0;flex-shrink:0;border-left:1px solid #223144}.map-position{position:absolute;left:1300px;bottom:32px;display:flex;gap:12px}.compass{gap:6px;font-size:17px}.compass svg{height:25px;width:21px;color:#c8d6e8}.current-road{position:absolute;bottom:34px;left:671px;font-size:21px;color:#c2cee0;background:#152437;border-radius:10px;padding:8px 16px;line-height:1.2;transition:opacity 220ms,left 360ms var(--ease)}.cockpit[data-nav="turn"] .current-road{left:851px}.scale{position:absolute;left:1376px;bottom:122px;font-size:13px;color:#8699b0;width:60px;text-align:center;border-bottom:2px solid #7489a1;padding-bottom:4px}
/* Media content moves toward one permanent pause anchor. */
.side{position:absolute;right:0;top:0;width:452px;height:612px;pointer-events:none}.side::before{content:"";position:absolute;inset:0;background:var(--surface);border-left:1px solid #1b293a;transition:opacity 360ms var(--ease)}.status{position:absolute;top:0;left:37px;right:36px;height:90px;display:flex;align-items:center;justify-content:space-between;transition:opacity 220ms}.time{font-family:Arial,sans-serif;font-size:25px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}.connection{display:flex;align-items:center;gap:12px;color:#adbacb;font-family:Arial,sans-serif;font-size:17px}.connection svg{width:21px;height:21px}.connection .battery{width:29px;height:18px}.music{position:absolute;left:37px;top:119px;width:379px;height:283px;transition:opacity 220ms}.track{position:absolute;left:0;top:0;display:flex;align-items:center;gap:24px;transition:top 360ms 60ms var(--ease),gap 360ms 60ms var(--ease)}.track img{width:112px;height:112px;object-fit:cover;border-radius:12px;filter:saturate(.25);background:#182536;transition:width 360ms 60ms var(--ease),height 360ms 60ms var(--ease),border-radius 360ms 60ms var(--ease)}.track h1{font-size:30px;font-weight:500;letter-spacing:.5px;margin:0 0 14px;transition:font-size 360ms var(--ease),margin 360ms var(--ease)}.track p{font-size:18px;color:var(--secondary);margin:0;white-space:nowrap;transition:opacity 180ms}.progress{position:absolute;top:135px;width:100%;pointer-events:auto;transition:opacity 90ms,visibility 90ms}.progress-line{display:block;width:100%;height:44px;border:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer;margin:0}.progress-line::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,#bac8d9 var(--progress,49.64%),#2b394b var(--progress,49.64%))}.progress-line::-webkit-slider-thumb{appearance:none;width:12px;height:12px;margin-top:-4.5px;background:#cad7e8;border-radius:50%;opacity:0}.progress-line:hover::-webkit-slider-thumb,.progress-line:focus-visible::-webkit-slider-thumb{opacity:1}.progress-line::-moz-range-track{height:3px;background:#2b394b}.progress-line::-moz-range-progress{height:3px;background:#bac8d9}.progress-line::-moz-range-thumb{width:12px;height:12px;background:#cad7e8;border:0}.transport{position:absolute;top:203px;left:0;width:100%;height:80px;pointer-events:none}.transport button{position:absolute;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:auto;transition:opacity 180ms,visibility 180ms,background-color 140ms,transform 140ms}.transport button svg{width:30px;height:30px}.transport #previous{left:18px;top:4px}.transport #next{right:18px;top:4px}.transport .play-button{left:150px;top:0;background:#263447;width:80px;height:80px}.transport .play-button:hover{background:#35455a}
.cockpit[data-nav="turn"] .side::before{opacity:0}.cockpit[data-nav="turn"] .music{opacity:.64}.cockpit[data-nav="turn"] .track{top:215px;gap:18px}.cockpit[data-nav="turn"] .track img{width:56px;height:56px;border-radius:8px}.cockpit[data-nav="turn"] .track h1{font-size:24px;margin:0}.cockpit[data-nav="turn"] .track p{opacity:0;position:absolute;visibility:hidden}.cockpit[data-nav="turn"] .progress,.cockpit[data-nav="turn"] #previous,.cockpit[data-nav="turn"] #next{opacity:0;visibility:hidden;pointer-events:none}.cockpit[data-nav="turn"] .play-button{background:transparent}
.climate{position:absolute;bottom:0;left:0;width:1920px;height:108px;background:var(--bg);border-top:1px solid #223144;display:flex;align-items:center;padding:0 36px;gap:20px;z-index:3}.vehicle-button{width:112px;height:76px;border-right:1px solid #243143;display:flex;align-items:center;justify-content:center;margin-right:28px;border-radius:10px 0 0 10px}.vehicle-button svg{width:40px;height:40px;stroke-width:1.65}.temperature{position:relative;isolation:isolate;display:flex;align-items:center;gap:14px;width:300px;margin-right:34px;transition:opacity 220ms}.temperature button{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:12px;flex-shrink:0}.temperature::before{content:"";position:absolute;inset:-22px -12px;z-index:-1;background:#132031;opacity:0;transition:opacity 220ms}.cockpit[data-ui="climate"][data-side="driver"] .temperature:not(.passenger)::before,.cockpit[data-ui="climate"][data-side="passenger"] .passenger::before{opacity:1}.temperature svg{width:24px;height:24px;color:#9caec4}.temperature .temp-number{font-family:Arial,sans-serif;font-size:40px;font-weight:400;letter-spacing:-1.5px;width:117px;text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums;display:block;color:var(--text)}.temp-number small{font-size:26px;margin-left:3px;vertical-align:top;position:relative;top:2px}.climate-action{position:relative;height:72px;min-width:96px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:500;color:var(--muted-control);transition:opacity 220ms,color 140ms,background-color 140ms,transform 140ms}.climate-action svg{width:36px;height:36px;stroke-width:1.8}.climate-action[aria-pressed=true]{color:var(--text)}.climate-action[aria-pressed=true]::after{content:"";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:20px;height:3px;background:#edf3fa;border-radius:2px}.fan-button{color:var(--text);gap:20px;min-width:175px;margin:0 6px}.fan-level{display:flex;gap:5px;align-items:center}.fan-level i{height:18px;width:5px;background:#34445a;border-radius:2px}.passenger{margin-left:auto;margin-right:20px;width:287px}.seat-button{min-width:78px;border-left:1px solid #243143;border-radius:0}
.search-panel{position:absolute;top:32px;right:108px;display:block;min-width:422px;padding:12px;background:#0b1422;border-radius:16px;box-shadow:0 6px 20px #050a12;z-index:2}.search-input{display:flex;gap:8px}.search-panel input{background:#1b2a3b;border:0;color:var(--text);font-size:22px;height:48px;width:320px;padding:0 16px;border-radius:10px}.search-panel button{min-width:56px;height:48px;border-radius:10px;font-size:20px}.search-result{margin-top:10px;width:100%;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;height:64px!important}.search-result span{font-size:17px;color:var(--secondary)}.search-empty{padding:10px 16px;color:var(--secondary);font-size:20px}.vehicle-panel{position:absolute;left:36px;bottom:126px;padding:30px 36px;background:#0b1422;border-radius:20px;width:480px;box-shadow:0 8px 32px #03081180;z-index:4}.vehicle-panel h2{font-size:25px;font-weight:500;margin:0 0 24px}.vehicle-panel>button{position:absolute;right:16px;top:12px;width:64px;height:64px;font-size:32px;border-radius:12px}.vehicle-panel-actions{display:flex;gap:16px}.vehicle-panel-actions button{display:flex;align-items:center;justify-content:center;gap:12px;height:72px;padding:0 16px;background:#1a283b;border-radius:12px;font-size:20px;flex:1}.vehicle-panel-actions button[aria-pressed=false]{color:var(--muted-control)}
/* A non-modal drawer leaves the only navigation instruction unobscured. */
.climate-modal{position:absolute;left:160px;top:auto;bottom:108px;width:760px;height:218px;max-width:none;max-height:none;overflow:hidden;padding:0;margin:0;border:0;background:transparent;color:var(--text);z-index:2}.climate-modal[data-side="passenger"]{left:1028px}.temperature-panel{position:absolute;inset:0;background:#132031;border-top:1px solid #34475e;border-radius:20px 20px 0 0;transform:translateY(218px)}.climate-modal.is-open .temperature-panel{transform:translateY(0)}.temperature-panel header{position:absolute;left:32px;right:24px;top:16px;height:64px}.temperature-panel h2{font-size:23px;font-weight:400;margin:6px 0 0;color:#b5c4d7}.temperature-panel header>button{position:absolute;right:0;top:0;font-size:38px;font-weight:300;width:64px;height:64px;border-radius:16px;color:#a5b5ca}.temperature-editor{position:absolute;left:32px;top:64px;display:flex;align-items:center;justify-content:center;gap:14px;height:96px;width:282px}.temperature-editor button{width:64px;height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:12px}.temperature-editor button svg{width:28px;height:28px}.temperature-editor output{font-family:Arial,sans-serif;font-variant-numeric:tabular-nums;font-size:64px;letter-spacing:-3px;min-width:126px;text-align:center}.temperature-editor output small{font-size:22px;vertical-align:top;position:relative;top:11px;letter-spacing:0;margin-left:4px;color:#b5c4d7}.slider-wrap{position:absolute;left:362px;right:48px;top:86px}.slider-wrap input{display:block;width:100%;height:64px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;border:0}.slider-wrap input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,#e1eaf6 var(--temperature-progress,42.85%),#35485f var(--temperature-progress,42.85%))}.slider-wrap input::-webkit-slider-thumb{appearance:none;width:36px;height:36px;margin-top:-15px;background:#edf3fa;border:0;border-radius:50%;box-shadow:0 0 0 7px #edf3fa14;transition:box-shadow 120ms}.slider-wrap input:active::-webkit-slider-thumb{box-shadow:0 0 0 12px #edf3fa20}.slider-wrap input::-moz-range-track{height:6px;background:#35485f}.slider-wrap input::-moz-range-progress{height:6px;background:#e1eaf6}.slider-wrap input::-moz-range-thumb{width:36px;height:36px;border:0;background:#edf3fa;border-radius:50%}.slider-labels{position:relative;height:28px;font:19px Arial,sans-serif;color:#9aaabc}.slider-labels span{position:absolute;top:4px;transform:translateX(-50%)}.slider-labels span:nth-child(1){left:0;transform:none}.slider-labels span:nth-child(2){left:28.5714%}.slider-labels span:nth-child(3){left:57.1429%}.slider-labels span:nth-child(4){right:0;transform:none}.climate-modal[data-side="passenger"] .temperature-editor{left:auto;right:32px}.climate-modal[data-side="passenger"] .slider-wrap{left:48px;right:362px}.climate-modal[data-side="passenger"] h2{position:absolute;right:8px}.climate-modal[data-side="passenger"] header>button{left:0;right:auto}
.cockpit[data-ui="climate"][data-nav="cruise"] .maneuver{opacity:.68;background:#0d1724;box-shadow:none}.cockpit[data-ui="climate"] .map-art{opacity:.32}.cockpit[data-ui="climate"] .route-art,.cockpit[data-ui="climate"] .vehicle-marker{opacity:.5}.cockpit[data-ui="climate"] .music,.cockpit[data-ui="climate"] .status,.cockpit[data-ui="climate"] .trip,.cockpit[data-ui="climate"] .current-road,.cockpit[data-ui="climate"] .map-tools,.cockpit[data-ui="climate"] .map-position,.cockpit[data-ui="climate"] .scale{opacity:.32}.cockpit[data-ui="climate"] .trip,.cockpit[data-ui="climate"] .current-road{opacity:0;pointer-events:none}.cockpit[data-ui="climate"] .climate-action,.cockpit[data-ui="climate"] .vehicle-button{opacity:.52}.cockpit[data-ui="climate"][data-side="driver"] .passenger,.cockpit[data-ui="climate"][data-side="passenger"] .temperature:not(.passenger){opacity:.52}
.intro .map-art{animation:first-map 360ms ease-out backwards}.intro .maneuver{animation:first-controls 420ms 60ms var(--ease) backwards}.intro .side{animation:first-controls 380ms 120ms var(--ease) backwards}.intro .climate{animation:first-controls 360ms 160ms var(--ease) backwards}.temp-number.changed,.temperature-editor output.changed{animation:number-feedback 200ms var(--ease)}
@keyframes first-map{from{opacity:.3}to{opacity:1}}@keyframes first-controls{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@keyframes number-feedback{from{opacity:.55;translate:0 3px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.temperature-panel{transform:none}.intro .maneuver,.intro .side,.intro .climate{opacity:1;translate:none}}