:root{color-scheme:dark;--bg:#101512;--panel:#181e1a;--raised:#202823;--border:#2a342d;--text:#f0f4ee;--muted:#91a095;--lime:#d3fa76;--red:#ff7972;--font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-tap-highlight-color:transparent}button,input,textarea{font:inherit}button,a,input{-webkit-touch-callout:none}button{cursor:pointer;color:inherit;border:0;background:none;touch-action:manipulation}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--lime);outline-offset:4px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}svg.icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;display:block}i{display:inline-flex;font-style:normal}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.app-shell{max-width:1200px;margin:auto;padding:0 36px 132px}.topbar{height:96px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:760;letter-spacing:2px;line-height:1.1}.brand-symbol{position:relative;display:flex;align-items:center;justify-content:center;background:var(--lime);color:#151c11;width:41px;height:41px;border-radius:12px;font-size:37px;font-weight:800;letter-spacing:-4px;padding:0 8px 5px 0}.brand-symbol>span{font-size:26px;margin-left:-3px;margin-top:3px}.brand-caption{display:block;font-size:11px;letter-spacing:2px;font-weight:400;color:var(--muted);margin-top:7px}.header-actions{display:flex;align-items:center;gap:17px}.demo-badge{font-size:12px;letter-spacing:.4px;border:1px solid #3b4738;background:#20281e;border-radius:6px;padding:5px 9px;color:#becbb5;white-space:nowrap}.icon-button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#b5c0b6}.icon-button:hover{background:var(--raised);color:var(--text)}.page-heading{display:flex;align-items:center;justify-content:space-between;padding:33px 0 25px}.eyebrow{font-size:11px;letter-spacing:2.5px;color:#7a8b7c;margin-bottom:8px}h1{margin:0;font-size:30px;font-weight:650;letter-spacing:1px}.heading-dot{color:var(--lime);margin-left:3px}.vehicle-id{display:flex;align-items:center;gap:11px;font-size:14px;letter-spacing:.8px;font-weight:600}.vehicle-id small{display:block;font-weight:400;font-size:12px;letter-spacing:0;color:var(--muted);margin-top:3px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px #d3fa7609}.status-dot.offline{background:#809087;box-shadow:none}.workspace{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(350px,1fr);gap:25px;align-items:start}.vision-column{min-width:0}.camera-panel{overflow:hidden;border:1px solid var(--border);border-radius:17px;background:var(--panel)}.camera-top{padding:9px 16px;display:flex;justify-content:space-between;align-items:center;min-height:55px}.camera-title{display:flex;align-items:center;gap:9px;font-size:14px}.camera-title i{color:#a6b2a9}.camera-actions{display:flex;gap:10px;align-items:center}.view-switch{min-height:36px;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;padding:4px 7px;border-radius:6px}.view-switch:hover,.camera-icon:hover{background:#2c352e;color:var(--lime)}.view-switch .icon{width:16px;height:16px}.camera-icon{display:grid;place-items:center;width:32px;height:36px;border-radius:6px;color:#a4b2a7}.camera-icon .icon{width:17px;height:17px}.camera-viewport{aspect-ratio:1.64;position:relative;overflow:hidden;background:#1c241f}.camera-image{width:100%;height:100%;object-fit:cover;filter:brightness(.84) saturate(.6);will-change:transform;transition:transform .8s ease-out}.camera-shade{position:absolute;inset:0;background:linear-gradient(180deg,#07110b44 0%,transparent 45%,#07100cee 100%);pointer-events:none}.video-badges{position:absolute;left:16px;right:16px;top:15px;display:flex;justify-content:space-between;font-size:11px;align-items:center;letter-spacing:1px}.live-badge{border-radius:4px;background:#0c171aaa;backdrop-filter:blur(8px);padding:4px 7px;display:flex;align-items:center;gap:6px;letter-spacing:0;color:#eef3ec}.live-badge>span{height:5px;width:5px;background:var(--lime);border-radius:50%}.resolution{color:#e2eae1;font-family:monospace;font-size:10px;letter-spacing:1px}.crosshair{position:absolute;top:46%;left:50%;width:30px;height:30px;transform:translate(-50%,-50%);opacity:.55}.crosshair:before,.crosshair:after{content:"";position:absolute;background:#eee}.crosshair:before{width:1px;height:30px;left:15px}.crosshair:after{height:1px;width:30px;top:15px}.camera-caption{position:absolute;bottom:21px;left:21px;right:21px;display:flex;flex-direction:column;align-items:flex-start}.camera-mode{font-size:11px;color:var(--lime);margin-bottom:5px;letter-spacing:1px}.camera-caption>strong{font-size:22px;font-weight:550;letter-spacing:.8px}.camera-coordinates{display:flex;width:100%;justify-content:space-between;align-items:center;margin-top:14px;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.9px;color:#b7c6bd}.camera-footer{display:flex;justify-content:space-between;padding:12px 16px;font-size:12px;color:var(--muted)}.camera-footer>span:first-child{display:flex;align-items:center;gap:7px}.tiny-dot{width:5px;height:5px;border-radius:50%;background:#90a285}.map-view{position:absolute;inset:0;background:#141f19}.map-view>svg{width:100%;height:100%;object-fit:cover}.map-label{position:absolute;top:16px;left:20px;font-size:12px;color:var(--muted);display:flex;gap:12px}.map-label strong{color:var(--lime);font-weight:500;font-family:monospace}.camera-offline{position:absolute;inset:0;background:#121c17e8;display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:center;color:var(--muted)}.camera-offline .icon{width:30px;height:30px;margin-bottom:10px}.camera-offline strong{color:var(--text);font-size:17px}.camera-offline>span{font-size:13px}.camera-panel.expanded{position:fixed;inset:16px;z-index:50;display:flex;flex-direction:column;box-shadow:0 0 0 100vw #07100cef}.camera-panel.expanded .camera-viewport{flex:1;aspect-ratio:auto}.camera-panel.expanded .camera-image{object-fit:contain}.telemetry{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:13px;margin-top:17px;padding:18px 0;background:var(--panel)}.metric{padding:0 23px;min-width:0}.metric+.metric{border-left:1px solid var(--border)}.metric>span{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--muted)}.metric>span .icon{width:15px;height:15px}.metric>div:not(.battery-line){display:flex;gap:5px;align-items:baseline;margin:7px 0 4px}.metric strong{font-size:29px;line-height:1.1;font-weight:500;letter-spacing:-.7px;font-variant-numeric:tabular-nums}.metric small{color:var(--muted);font-size:12px}.metric .metric-note{font-size:11px;color:#a6b59f}.battery-line{height:3px;background:#36412f;border-radius:5px;max-width:70px;margin-top:13px}.battery-line span{display:block;width:86%;height:100%;background:var(--lime);border-radius:5px}.session-strip{display:flex;align-items:center;gap:12px;margin-top:20px;padding:3px 3px 10px}.session-icon{background:#1d271f;border:1px solid #2a362a;border-radius:10px;width:42px;height:42px;display:grid;place-items:center;color:#b7cca6}.session-strip>div:nth-child(2){display:flex;align-items:center;gap:18px}.session-strip>div>span{color:var(--muted);font-size:13px}.session-strip strong{font-weight:500;font-size:20px;font-variant-numeric:tabular-nums}.session-strip small{font-size:12px;color:var(--muted)}.session-strip>button{margin-left:auto;display:flex;align-items:center;gap:3px;font-size:12px;color:#b0bcae;min-height:44px}.session-strip>button .icon{height:15px;width:15px}.demo-note{display:flex;align-items:flex-start;gap:6px;font-size:12px;color:#75867a;margin:8px 0 0;line-height:1.7}.demo-note .icon{width:14px;height:14px;margin-top:3px}.control-panel{border:1px solid var(--border);border-radius:17px;background:var(--panel);padding:8px 21px 19px}.mode-tabs{display:flex;gap:5px;border-bottom:1px solid var(--border);margin:0 -3px}.mode-tab{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-height:55px;font-size:14px;position:relative;color:#8d9c91;padding:0 3px}.mode-tab .icon{width:18px;height:18px}.mode-tab.active{color:var(--lime)}.mode-tab.active:after{content:"";position:absolute;bottom:-1px;left:20px;right:20px;height:2px;background:var(--lime);border-radius:2px}.tab-tag{font-family:monospace;font-size:9px;letter-spacing:.5px;padding:2px 4px;background:#2b3427;border-radius:3px;color:#a6b09b}.control-heading{display:flex;justify-content:space-between;align-items:center;padding:22px 0 0;font-size:14px}.subtle{color:#829288;font-size:11px}.drive-area{position:relative;display:flex;justify-content:center;align-items:center;min-height:241px}.dpad{width:174px;height:174px;position:relative;display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px);border-radius:50%;box-shadow:0 0 0 11px #141a16,0 0 0 12px #2c382c;background:#202a21;z-index:1;transform:rotate(0deg)}.direction{display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none;color:#c0cfb9;position:relative;min-width:44px;min-height:44px;border-radius:13px;z-index:2}.direction .icon{width:27px;height:27px;pointer-events:none}.direction:hover{background:#35452b}.direction.active{background:var(--lime);color:#19220f;box-shadow:0 0 25px #d3fa7618}.forward{grid-area:1/2;border-radius:35px 35px 12px 12px}.left{grid-area:2/1;border-radius:35px 12px 12px 35px}.right{grid-area:2/3;border-radius:12px 35px 35px 12px}.backward{grid-area:3/2;border-radius:12px 12px 35px 35px}.dpad-stop{grid-area:2/2;display:grid;place-items:center;margin:4px;border-radius:50%;border:1px solid #455238;background:#303d2b;z-index:3;touch-action:none}.dpad-stop>span{width:15px;height:15px;border-radius:3px;background:#c3d3b0}.dpad-stop:hover{background:#435237}.dial-decoration{position:absolute;width:221px;height:221px;border:1px dashed #303b31;border-radius:50%;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:space-between;color:#6f816e;font-size:9px;padding:1px}.drive-side{position:absolute;font-size:10px;color:#6c7e71;display:flex;flex-direction:column;gap:7px;align-items:center;z-index:3}.left-side{left:-1px}.right-side{right:1px}.drive-side small{font-family:monospace;font-size:10px;color:#a3b495}.direction-indicator{width:5px;height:5px;background:#68815c;border-radius:50%}.direction-indicator.moving{background:var(--lime);box-shadow:0 0 7px #d3fa7644}.speed-control{border-top:1px solid var(--border);padding-top:17px}.speed-control>div:first-child{display:flex;align-items:center;justify-content:space-between;font-size:13px}.speed-control label{color:#c2cdc0}.speed-control>div>span{color:#91a185;font-size:12px}.speed-control strong{font-size:17px;font-weight:500;color:var(--lime);font-variant-numeric:tabular-nums}.speed-control input{width:100%;height:25px;margin:10px 0 0;cursor:pointer;appearance:none;background:transparent;touch-action:pan-y}.speed-control input::-webkit-slider-runnable-track{height:4px;border-radius:5px;background:linear-gradient(to right,var(--lime) 44.44%,#354030 44.44%)}.speed-control input::-moz-range-track{height:4px;background:#354030;border-radius:5px}.speed-control input::-moz-range-progress{background:var(--lime);height:4px}.speed-control input::-webkit-slider-thumb{appearance:none;border:4px solid #e4ffa7;background:#63852e;width:17px;height:17px;border-radius:50%;margin-top:-6.5px;box-shadow:0 0 0 4px #d3fa7610}.speed-control input::-moz-range-thumb{border:4px solid #e4ffa7;background:#63852e;width:10px;height:10px;border-radius:50%}.range-labels{display:flex;justify-content:space-between}.range-labels>span{font-size:10px!important;color:#7e8e80!important}.ai-shortcut{width:100%;display:flex;align-items:center;gap:10px;border:1px solid #34412b;border-radius:11px;background:linear-gradient(105deg,#273220,#202a1e);padding:13px 12px;text-align:left;margin-top:22px;min-height:65px}.shortcut-icon{color:var(--lime);display:grid;place-items:center;width:30px;height:30px}.shortcut-icon .icon{width:24px;height:24px}.ai-shortcut>span:nth-child(2){font-size:13px;color:#d1deca}.ai-shortcut small{display:block;font-size:11px;color:#90a383;margin-top:2px}.ai-shortcut>i:last-child{margin-left:auto;color:#bdcea9}.ai-shortcut>i:last-child .icon{width:18px;height:18px}.ai-intro{padding:26px 0 19px;text-align:left}.ai-orb{display:flex;align-items:center;justify-content:center;width:39px;height:39px;background:#2c3922;border:1px solid #415134;border-radius:11px;color:var(--lime);margin-bottom:14px}.ai-orb .icon{width:22px;height:22px}.ai-intro h2{font-size:22px;letter-spacing:.5px;font-weight:550;margin:0 0 7px}.ai-intro p{font-size:12px;color:#99a68f;margin:0}.suggestions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:19px}.suggestions>button{display:flex;gap:7px;align-items:center;justify-content:center;min-height:42px;padding:7px 3px;border:1px solid #35402f;background:#222b21;color:#c2cdb8;font-size:12px;border-radius:8px}.suggestions>button:hover{border-color:#6d8450;background:#2c3826}.suggestions .icon{width:15px;height:15px;color:#abbf90}.command-composer{border:1px solid #45523b;border-radius:11px;background:#131a14;padding:12px;transition:border-color .2s}.command-composer:focus-within{border-color:var(--lime)}.command-composer textarea{display:block;width:100%;resize:vertical;min-height:55px;max-height:120px;border:0;background:none;outline:none!important;color:var(--text);font-size:14px;line-height:1.7;padding:0}.command-composer textarea::placeholder{color:#6f806f}.composer-footer{display:flex;justify-content:space-between;align-items:center;margin-top:5px}.composer-footer>span{font-size:10px;color:#778873}.composer-footer>button{display:grid;place-items:center;width:36px;height:36px;background:var(--lime);border-radius:9px;color:#1a2511}.ai-feedback{font-size:12px;color:#8c9d86;line-height:1.7;margin-top:11px}.ai-feedback.error{color:#ffb18e}.task-card{border:1px solid #3c4931;background:#202a1d;border-radius:11px;padding:13px;margin-top:16px}.task-title{display:flex;justify-content:space-between;align-items:center;font-size:12px}.task-title>span:first-child{display:flex;align-items:center;gap:7px;color:#c5d5b2}.task-title .icon{width:15px;height:15px}.task-title>span:last-child{font-size:10px;padding:2px 6px;border-radius:4px;background:#35402b;color:var(--lime)}.task-card ol{padding:0;margin:12px 0;list-style:none}.task-card li{display:flex;align-items:center;gap:8px;color:#96a789;font-size:12px;padding:6px 0}.step-number{display:grid;place-items:center;border:1px solid #51623e;width:21px;height:21px;border-radius:50%;font-size:10px;font-family:monospace}.task-card li.current{color:var(--lime)}.task-card li.done .step-number{background:var(--lime);color:#1b2513;border-color:var(--lime)}.task-progress{height:3px;border-radius:5px;background:#3b462f;margin:12px 0}.task-progress>span{width:0;height:100%;display:block;background:var(--lime);transition:width .15s}.primary-button{background:var(--lime);color:#1d2a11;font-size:13px;border-radius:8px;min-height:41px;display:flex;align-items:center;justify-content:center;gap:7px;width:100%;font-weight:600}.primary-button .icon{width:16px;height:16px}.safety-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#151c17ed;backdrop-filter:blur(20px);border-top:1px solid #36412f;padding:19px 36px calc(19px + env(safe-area-inset-bottom))}.safety-inner{max-width:1128px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}.safety-state{display:flex;align-items:center;gap:12px;min-width:0}.safety-symbol{height:39px;width:39px;display:grid;place-items:center;border:1px solid #38492d;border-radius:50%;color:#b3d784;background:#25331e;flex-shrink:0}.safety-state strong{font-size:14px;font-weight:500;display:block}.safety-state small{display:block;font-size:11px;color:#8f9d8b;margin-top:2px}.emergency-button{display:flex;align-items:center;justify-content:center;gap:10px;background:#3c2423;border:1px solid #713e39;border-radius:10px;min-width:170px;min-height:49px;color:#ffb0a4;font-size:14px;font-weight:550;flex-shrink:0}.emergency-button:hover{background:#62302b}.emergency-button .icon{width:19px;height:19px}.safety-bar.stopped{background:#291b1aec;border-top-color:#783e39}.safety-bar.stopped .safety-symbol{border-color:#783e39;color:var(--red);background:#3c2523}.safety-bar.stopped .safety-state strong{color:#ffb0a4}.reset-button{min-height:49px;min-width:132px;border:1px solid #8a5248;color:#fcd5bc;background:#533329;border-radius:10px;font-size:14px;display:flex;align-items:center;justify-content:center;gap:7px}.reset-button .icon{width:18px;height:18px}.sheet{background:#1b231d;border:1px solid #39432f;border-radius:21px;color:var(--text);width:min(450px,calc(100% - 24px));max-height:85dvh;padding:22px;box-shadow:0 30px 100px #0008}.sheet::backdrop{background:#080e0bcc;backdrop-filter:blur(7px)}.sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.sheet-header h2{font-size:19px;font-weight:550;margin:0}.sheet-header .icon-button{margin-right:-8px}.device-identity{display:flex;align-items:center;gap:12px;margin:19px 0 24px}.device-mark{width:46px;height:46px;display:grid;place-items:center;color:var(--lime);background:#2c3923;border-radius:13px}.device-identity>div{display:flex;flex-direction:column;gap:2px}.device-identity strong{font-size:15px;letter-spacing:1px}.device-identity>div>span{font-size:12px;color:var(--muted)}.device-identity>.demo-badge{margin-left:auto;font-size:10px}.device-details>div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #313a2d;padding:13px 0;font-size:14px}.device-details dt{color:var(--muted)}.device-details dd{margin:0}.sheet-note{font-size:13px;color:var(--muted);line-height:1.8}.secondary-button{display:block;width:100%;min-height:48px;border:1px solid #54613e;border-radius:9px;color:var(--lime);background:#2a3621;font-size:14px;margin-top:22px}.text-button{display:block;width:100%;min-height:44px;font-size:13px;color:var(--muted);margin-top:7px}.activity-log{padding:0;list-style:none;max-height:55dvh;overflow:auto}.activity-log li{display:flex;gap:15px;padding:13px 0;border-bottom:1px solid var(--border);font-size:13px}.activity-log time{font-family:monospace;font-size:11px;color:#8fa67c;flex-shrink:0;padding-top:2px}.activity-log li>span{color:#c6d0be}.toast{position:fixed;left:50%;bottom:110px;z-index:70;transform:translate(-50%,12px);opacity:0;pointer-events:none;border:1px solid #5a6a42;background:#2a3825f5;color:#e7f0de;border-radius:10px;padding:11px 18px;font-size:13px;max-width:calc(100% - 36px);width:max-content;transition:opacity .15s,transform .15s;box-shadow:0 6px 30px #0004}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1000px){.camera-viewport{aspect-ratio:1.62}.control-panel{min-height:575px}.drive-area{min-height:250px}.drive-side{font-size:11px}.camera-caption>strong{font-size:25px}.telemetry{margin-top:20px}.metric strong{font-size:32px}}
@media(max-width:800px){.app-shell{max-width:510px;padding:0 18px 110px}.topbar{height:76px;border-bottom:0}.brand{font-size:21px;gap:10px}.brand-symbol{width:35px;height:35px;border-radius:10px;font-size:32px}.brand-symbol>span{font-size:23px}.brand-caption{font-size:9px;letter-spacing:1.5px;margin-top:6px}.header-actions{gap:8px}.demo-badge{font-size:10px;padding:4px 7px}.header-actions .icon-button{width:36px;height:40px}.page-heading{padding:6px 0 17px;align-items:center}.eyebrow{display:none}h1{font-size:22px;letter-spacing:.5px}.vehicle-id{font-size:11px;gap:8px;letter-spacing:.5px}.vehicle-id small{font-size:10px;margin-top:2px}.status-dot{width:6px;height:6px}.workspace{display:flex;flex-direction:column;gap:16px}.vision-column,.control-panel{width:100%}.camera-panel{border-radius:14px}.camera-top{min-height:41px;padding:2px 12px}.camera-title{font-size:12px;gap:7px}.camera-title .icon{width:16px;height:16px}.camera-actions{gap:3px}.camera-viewport{aspect-ratio:1.77}.camera-footer{padding:8px 12px;font-size:10px}.camera-caption{bottom:13px;left:14px;right:14px}.camera-caption>strong{font-size:17px;letter-spacing:.5px}.camera-mode{font-size:10px;margin-bottom:4px}.camera-coordinates{margin-top:8px;font-size:9px}.video-badges{left:12px;right:12px;top:12px;font-size:10px}.resolution{font-size:9px}.live-badge{padding:3px 5px}.crosshair{width:22px;height:22px}.crosshair:before{height:22px;left:11px}.crosshair:after{width:22px;top:11px}.telemetry{margin-top:12px;padding:12px 0;border-radius:12px}.metric{padding:0 15px}.metric>span{font-size:10px;gap:5px}.metric>span .icon{width:13px;height:13px}.metric>div:not(.battery-line){margin:7px 0 2px}.metric strong{font-size:25px}.metric small{font-size:10px}.metric .metric-note{display:none}.battery-line{display:none}.session-strip{display:none}.demo-note{font-size:10px;gap:4px;margin-top:8px;line-height:1.5}.demo-note .icon{width:12px;height:12px;margin-top:1px}.control-panel{padding:5px 18px 17px;border-radius:14px}.mode-tab{min-height:47px;font-size:14px}.tab-tag{font-size:8px}.control-heading{padding-top:15px;font-size:13px}.subtle{font-size:10px}.drive-area{min-height:203px}.dpad{width:156px;height:156px;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);box-shadow:0 0 0 9px #141a16,0 0 0 10px #2c382c}.direction .icon{width:24px;height:24px}.dpad-stop{margin:4px}.dpad-stop>span{width:13px;height:13px}.dial-decoration{width:192px;height:192px;font-size:8px}.drive-side{font-size:9px}.drive-side small{font-size:9px}.left-side{left:3px}.right-side{right:4px}.speed-control{padding-top:12px}.speed-control>div:first-child{font-size:12px}.speed-control input{margin-top:6px;height:26px}.range-labels>span{font-size:9px!important}.ai-shortcut{margin-top:15px;min-height:57px;padding:9px 10px}.ai-shortcut>span:nth-child(2){font-size:12px}.ai-shortcut small{font-size:10px}.ai-intro{padding-top:20px;padding-bottom:16px}.ai-intro h2{font-size:21px}.ai-orb{width:33px;height:33px;margin-bottom:11px}.ai-orb .icon{width:19px;height:19px}.ai-intro p{font-size:12px}.suggestions{gap:7px;margin-bottom:14px}.suggestions>button{font-size:12px;min-height:42px}.command-composer textarea{font-size:16px;min-height:60px}.safety-bar{padding:12px 18px calc(12px + env(safe-area-inset-bottom))}.safety-inner{max-width:474px;gap:10px}.safety-state{gap:9px}.safety-symbol{width:34px;height:34px}.safety-symbol .icon{height:18px;width:18px}.safety-state strong{font-size:12px}.safety-state small{font-size:10px;max-width:150px}.emergency-button{min-width:133px;min-height:48px;font-size:13px;gap:8px;border-radius:9px}.emergency-button .icon{width:18px;height:18px}.reset-button{min-width:123px;font-size:12px;min-height:48px}.toast{bottom:90px;font-size:12px}.sheet{margin:auto auto 0;border-radius:22px 22px 0 0;width:100%;max-width:510px;border-bottom:0;padding:18px 22px calc(20px + env(safe-area-inset-bottom))}.camera-panel.expanded{inset:10px 10px 90px}.camera-panel.expanded .camera-viewport{flex:1}.camera-panel.expanded .camera-caption{bottom:25px}}
@media(max-width:360px){.app-shell{padding-left:12px;padding-right:12px}.brand-caption{display:none}.page-heading{padding-bottom:14px}h1{font-size:21px}.camera-caption>strong{font-size:16px}.metric{padding:0 12px}.control-panel{padding-left:13px;padding-right:13px}.drive-side{max-width:38px;font-size:9px;line-height:1.8}.safety-bar{padding-left:12px;padding-right:12px}.safety-symbol{display:none}.safety-state small{max-width:132px}.emergency-button{min-width:123px}.control-heading{font-size:12px}.subtle{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
/* Comfortable mobile type, full thumb targets, and a complete visible D-pad. */
.brand-caption,.eyebrow,.live-badge,.resolution,.camera-mode,.camera-coordinates,.metric>span,.metric .metric-note,.subtle,.drive-side,.drive-side small,.range-labels>span,.ai-shortcut small,.ai-intro p,.composer-footer>span,.task-title>span:last-child,.task-card li,.safety-state small,.device-identity>.demo-badge{font-size:12px!important}
.camera-title,.mode-tab,.control-heading,.speed-control>div:first-child,.ai-shortcut>span:nth-child(2),.suggestions>button,.primary-button,.safety-state strong{font-size:14px}
.tab-tag{font-size:10px}.brand-caption{letter-spacing:.6px}.dial-decoration{display:none}.camera-panel.expanded{bottom:110px}.camera-top{min-height:48px}.camera-icon,.view-switch{min-height:44px;min-width:44px}.view-switch{font-size:12px}.composer-footer>button{width:44px;height:44px}.speed-control input::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--lime) var(--speed-progress,44.44%),#354030 var(--speed-progress,44.44%))}.speed-control input{min-height:36px}
@media(max-width:800px){.topbar{height:65px}.brand-caption{font-size:10px!important}.header-actions .icon-button{width:44px;height:44px}.page-heading{padding:4px 0 13px}.vehicle-id{font-size:12px}.vehicle-id small{font-size:12px}.camera-top{min-height:44px;padding-top:0;padding-bottom:0}.camera-viewport{aspect-ratio:2}.camera-footer{display:none}.camera-caption{bottom:10px}.camera-caption>strong{font-size:17px}.camera-coordinates{margin-top:6px;font-size:10px!important}.camera-mode{font-size:11px!important}.resolution{font-size:10px!important}.live-badge{font-size:11px!important}.telemetry{padding:11px 0}.metric>span{font-size:12px!important}.metric{padding:0 13px}.metric>span .icon{width:14px;height:14px}.metric small{font-size:12px}.demo-note{font-size:12px;margin-top:8px}.control-heading{padding-top:13px}.subtle{font-size:12px!important}.drive-area{min-height:191px}.drive-side,.drive-side small{font-size:11px!important}.speed-control{padding-top:9px}.speed-control input{margin-top:3px;min-height:32px}.range-labels>span{font-size:12px!important}.ai-shortcut{margin-top:13px}.ai-shortcut small{font-size:12px!important}.suggestions>button{min-height:44px;font-size:14px}.ai-feedback{font-size:13px}.safety-state strong{font-size:14px}.safety-state small{font-size:11px!important}.emergency-button,.reset-button{font-size:14px}.camera-panel.expanded{bottom:98px}.camera-panel.expanded .camera-footer{display:flex}.session-strip{display:flex;margin-top:0;padding:0;justify-content:flex-end;position:relative;height:0;top:2px;overflow:visible}.session-strip>.session-icon,.session-strip>div:nth-child(2){display:none}.session-strip>button{position:absolute;top:13px;right:0;min-height:24px;font-size:12px}.demo-note{padding-right:68px;min-height:36px}.demo-note .icon{margin-top:2px}.drive-side.left-side{left:0}.drive-side.right-side{right:0}}
@media(max-width:360px){.metric{padding:0 9px}.metric>span{gap:4px}.metric>span .icon{width:12px;height:12px}.drive-side{max-width:34px;font-size:10px!important}.subtle{font-size:11px!important}.safety-state strong{font-size:13px}.safety-state small{font-size:11px!important}.camera-coordinates{font-size:9px!important}}
.camera-canvas{display:block;width:100%;height:100%;background:#738a94}.camera-error{position:absolute;inset:0;z-index:5;display:grid;place-items:center;text-align:center;background:#15241ded;color:#f0c58b;font-size:14px;padding:20px}.camera-live-clock{font-size:11px;letter-spacing:.4px;color:#f0f7ef;background:#10201866;border-radius:4px;padding:2px 6px}.camera-shade{background:linear-gradient(180deg,#07110b15 0%,transparent 50%,#07100c99 100%)}.telemetry-live{display:flex;justify-content:space-between;gap:8px;padding:12px 5px 0;color:#90a38f;font-size:12px;font-variant-numeric:tabular-nums}.telemetry-live>span{display:flex;gap:9px;align-items:baseline}.telemetry-live strong{color:#d5e3cb;font-weight:500;font-family:ui-monospace,monospace;font-size:13px}.telemetry-live .near{color:#ffb58b}.camera-panel.expanded .camera-canvas{flex:1}.metric strong{font-variant-numeric:tabular-nums}.camera-offline{z-index:6}
@media(max-width:800px){.telemetry-live{padding:9px 2px 0;gap:4px;font-size:11px}.telemetry-live>span{gap:5px}.telemetry-live strong{font-size:12px}.demo-note{min-height:20px;font-size:11px;padding-right:68px}.session-strip>button{top:3px}.camera-live-clock{font-size:10px}.camera-caption>strong{font-size:15px}.metric strong{font-size:24px}.video-badges{gap:5px}.resolution{min-width:43px;text-align:right}.camera-caption{bottom:9px}.drive-area{min-height:175px}.camera-viewport{aspect-ratio:1.95}}
@media(max-width:360px){.metric strong{font-size:21px}.metric>div:not(.battery-line){gap:3px}.telemetry-live{font-size:10px}.telemetry-live strong{font-size:11px}.camera-live-clock{display:none}.drive-side{display:none}}
.highway-steering{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 5px 14px}.steer-button{width:64px;height:52px;border:1px solid #3d4b34;border-radius:12px;display:grid;place-items:center;background:#222d21;touch-action:none;user-select:none}.steer-button .icon{width:26px;height:26px}.highway-steering>div{display:flex;flex-direction:column;align-items:center;gap:3px}.highway-steering>div>span{display:block;color:var(--lime);transform-origin:center}.highway-steering>div .icon{width:35px;height:35px}.highway-steering small{font-size:12px;color:var(--muted);font-family:monospace}.pedals{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:20px}.pedal{display:flex;align-items:center;justify-content:center;gap:10px;min-height:75px;border-radius:12px;border:1px solid #405332;touch-action:none;user-select:none;background:#273720;color:#d3eeae}.pedal .icon{width:24px;height:24px}.pedal>span{font-size:17px;font-weight:600}.pedal small{display:block;font-size:12px;font-weight:400;color:#9fb58b;margin-top:2px}.brake-pedal{background:#3a2a23;border-color:#6e4a37;color:#ffd4ac}.brake-pedal small{color:#cba489}.steer-button.active,.pedal.active{background:var(--lime);color:#17230f;border-color:var(--lime);box-shadow:0 0 22px #d3fa7615}.pedal.active small{color:#34442b}.brake-pedal.active{background:#ffb682;border-color:#ffb682;color:#3d2418}.brake-pedal.active small{color:#72442d}.road-settings{display:flex;align-items:center;gap:10px;margin-top:15px;font-size:12px;color:var(--muted)}.road-settings>div{display:flex;gap:4px;border:1px solid var(--border);border-radius:8px;padding:3px;margin-left:auto}.road-settings button{font-size:12px;min-height:34px;padding:3px 13px;border-radius:5px;color:var(--muted)}.road-settings button.selected{color:var(--lime);background:#35442a}.road-settings>span:last-child{font-family:monospace;min-width:42px;text-align:right}.normal-brake-button{width:100%;min-height:44px;border:1px solid #62503d;background:#30291f;color:#e8cda8;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:13px}.normal-brake-button .icon{width:16px;height:16px}.highway-metrics .metric strong{font-size:29px}.highway-metrics .metric-note{display:block;font-size:10px!important;white-space:normal}.braking-hud{position:absolute;right:16px;top:50px;display:flex;flex-direction:column;align-items:flex-end;background:#1c221bce;border:1px solid #b8bb6555;border-radius:7px;padding:8px 11px;z-index:2;backdrop-filter:blur(5px)}.braking-hud>span{font-size:11px;color:#ffdb9b}.braking-hud strong{font-size:22px;font-weight:550;color:#fff0ca;font-variant-numeric:tabular-nums}.braking-hud small{font-size:10px;color:#b9c4b0}.highway-metrics .metric:nth-child(2) strong{color:#f6d99c}.highway-metrics .metric:nth-child(3) strong{color:var(--lime)}.camera-panel.expanded .braking-hud{right:25px;top:60px}.safety-bar.stopped .reset-button:disabled{opacity:.85}.crosshair{display:none}
@media(max-width:800px){.highway-steering{padding:15px 4px 12px}.steer-button{width:60px;height:48px}.highway-steering>div .icon{width:29px;height:29px}.pedals{gap:11px;margin-bottom:15px}.pedal{min-height:67px}.pedal>span{font-size:16px}.pedal small{font-size:12px}.highway-metrics .metric{padding:0 9px}.highway-metrics .metric strong{font-size:24px}.highway-metrics .metric-note{font-size:9px!important}.highway-metrics .metric>span{font-size:11px!important;gap:4px}.highway-metrics .metric>span .icon{width:12px;height:12px}.telemetry-live>span{font-size:10px;gap:3px}.telemetry-live strong{font-size:11px}.braking-hud{right:10px;top:39px;padding:5px 8px}.braking-hud strong{font-size:18px}.control-panel .control-heading{font-size:13px}.control-panel .subtle{font-size:10px!important}.road-settings button{min-height:39px}.range-labels>span{font-size:10px!important}.normal-brake-button{margin-top:11px}.reset-button{min-width:132px;max-width:158px;padding:6px 9px;font-size:12px}.ai-shortcut{margin-top:12px}}
@media(max-width:360px){.highway-metrics .metric strong{font-size:21px}.highway-metrics .metric-note{font-size:8px!important}.highway-metrics .metric>span .icon{display:none}.telemetry-live{flex-wrap:wrap}.pedal>span{font-size:14px}.control-panel .subtle{font-size:9px!important}}

/* Road rules and traffic stay visible beneath the driving view. */
.road-awareness{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 15px;background:#1b241b;border:1px solid #354332;border-radius:12px;margin-top:13px;font-variant-numeric:tabular-nums}.road-limit{display:flex;align-items:center;gap:11px;min-width:0}.speed-sign{flex:0 0 45px;width:45px;height:45px;display:grid;place-items:center;border:4px solid #d74b42;border-radius:50%;background:#f8f8ee;color:#19221d;font-family:ui-sans-serif,system-ui,sans-serif;font-size:19px;font-weight:800;line-height:1}.road-limit>div{display:flex;flex-direction:column;gap:1px}.road-awareness span:not(.speed-sign){color:#a7b99d;font-size:11px}.road-awareness strong{font-size:14px;color:#d6edbe;font-weight:600}.road-awareness small{font-size:10px;color:#96a88d;display:block}.traffic-awareness{text-align:right;min-width:86px;display:flex;flex-direction:column;gap:1px}.road-awareness.overspeed{border-color:#985442;background:#30231d}.road-awareness.overspeed #road-speed-status{color:#ffc392}.road-awareness.contact{box-shadow:inset 3px 0 #f0b66b}.traffic-awareness.close #traffic-gap{color:#ffba87}.camera-panel.wall-contact{border-color:#cb985e}.road-limit-note{font-size:11px;color:#a7b69d;margin:6px 0 0}.road-awareness+.telemetry{margin-top:10px}
@media(max-width:800px){.road-awareness{padding:9px 10px;margin-top:10px;gap:8px}.speed-sign{flex-basis:39px;width:39px;height:39px;font-size:17px;border-width:3px}.road-limit{gap:8px}.road-awareness strong{font-size:12px}.road-awareness span:not(.speed-sign){font-size:10px}.road-awareness small{font-size:9px}.traffic-awareness{min-width:78px}.camera-caption>strong{max-width:100%;font-size:14px}.road-limit-note{font-size:10px}}
@media(max-width:360px){.road-awareness{padding:8px;gap:5px}.road-limit{gap:6px}.speed-sign{flex-basis:35px;width:35px;height:35px;font-size:15px}.road-awareness strong{font-size:11px}}

/* Traffic presets and forward/reverse controls. */
.traffic-controls{margin-top:10px;padding:11px 13px;border:1px solid var(--border);background:#19221b;border-radius:12px}.traffic-controls-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;color:#c6d6bd;font-size:12px;margin-bottom:8px}.traffic-controls-heading small{color:var(--muted);font-size:10px}.density-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.density-options button,.gear-options button{border:1px solid #3c4d35;border-radius:8px;background:#222d21;color:#aaba9e;min-height:40px;font-size:13px}.density-options button.selected,.gear-options button.selected{color:var(--lime);background:#35442a;border-color:#819853}.density-options button:focus-visible,.gear-options button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}.gear-control{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px}.gear-options{display:grid;grid-template-columns:1fr 1fr;gap:7px;flex:1;max-width:250px}.gear-options button{min-height:44px;font-size:13px}.gear-options b{font:700 16px ui-monospace,monospace;margin-left:6px}.gear-options button:disabled{opacity:.5}.gear-control>span{font-size:12px;color:#d3e4be;white-space:nowrap}.gear-hint{font-size:11px;color:var(--muted);margin:7px 0 0;line-height:1.5}.gear-control.shifting>span{color:#ffd096}.camera-panel.reversing{border-color:#68a5bc}.road-awareness.auto-braking{border-color:#c49754;background:#30291d}.road-awareness.auto-braking #road-speed-status{color:#ffda9b}
@media(max-width:800px){.traffic-controls{padding:9px 10px}.density-options button{min-height:40px}.traffic-controls-heading{font-size:11px}.gear-control{gap:9px}.gear-options{max-width:230px}.gear-options button{min-height:44px}.gear-hint{font-size:10px}.gear-control>span{font-size:11px}.road-limit{flex:1}.road-limit>div{min-width:0}.road-awareness small{line-height:1.4}.traffic-awareness{max-width:108px}.traffic-controls+.telemetry{margin-top:10px}}
@media(max-width:360px){.gear-options{max-width:175px}.traffic-controls-heading small{font-size:9px}.road-awareness strong{font-size:10px}.gear-control>span{font-size:10px}.road-awareness .traffic-awareness{min-width:68px;max-width:85px}}

/* Discrete lane changes and the emergency shoulder. */
.lane-status{font-size:12px;font-weight:600;color:var(--lime);text-align:center;line-height:1.4}.highway-steering{gap:10px}.highway-steering>div{min-width:0}.lane-hint{font-size:11px;color:var(--muted);margin:0 0 12px;line-height:1.5}.steer-button{flex:0 0 60px;touch-action:manipulation}.steer-button.shoulder-next{border-color:#9f6d36;color:#ffcb89;background:#342b1d}.shoulder-alert{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border:1px solid #b86056;border-radius:11px;background:#3e2421;color:#ffc5ba}.shoulder-alert i{flex:none;margin-top:2px}.shoulder-alert strong,.shoulder-alert span{display:block}.shoulder-alert strong{font-size:14px}.shoulder-alert span{margin-top:3px;font-size:12px;color:#e9aba1;line-height:1.5}.camera-panel.shoulder-emergency{border-color:#ec8170}.highway-steering.changing .lane-status{color:#ffdb9b}
@media(max-width:800px){.lane-status{font-size:11px}.lane-hint{font-size:10px}.shoulder-alert{padding:10px;gap:8px}.shoulder-alert strong{font-size:12px}.shoulder-alert span{font-size:11px}}
@media(max-width:360px){.steer-button{flex-basis:50px;width:50px}.lane-status{font-size:10px}.highway-steering{gap:6px}}

/* Live advice shares the same lane controls and never engages by itself. */
.lane-advice{margin-top:12px;padding:14px;border:1px solid var(--border);border-radius:13px;background:var(--panel)}
.lane-advice-heading{display:flex;align-items:center;gap:10px}.lane-advice-heading>div{min-width:0;flex:1}.lane-advice-symbol{display:grid;place-items:center;width:34px;height:38px;flex:none;border-radius:9px;background:#26332a;color:#b4c5b5;font-size:25px}.lane-advice-eyebrow{font-size:10px;letter-spacing:.8px;color:var(--muted)}.lane-advice h2{font-size:15px;line-height:1.4;margin:2px 0 0;font-weight:600}.lane-advice-tag{font-size:10px;color:#9daf9f;white-space:nowrap}.lane-advice p{font-size:12px;line-height:1.6;color:#a5b4a7;margin:10px 0}.advice-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.advice-lanes>div{display:flex;flex-direction:column;gap:5px;min-width:0;border:1px solid #344037;border-radius:8px;padding:9px 7px;background:#151e18}.advice-lanes strong{font-size:12px;font-weight:500;color:#c5d0c4}.advice-lanes span{font-size:10px;color:#90a08f}.advice-lanes small{font-size:10px;line-height:1.5;color:#8b9c8d;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.advice-lanes .current{border-color:#678269}.advice-lanes .recommended{border-color:var(--lime);background:#28351d}.advice-lanes .recommended span{color:var(--lime)}.advice-lanes .blocked span{color:#e6b780}.lane-advice button{width:100%;min-height:44px;border:1px solid #354636;border-radius:9px;background:#263427;color:#adc1a9;font-size:12px;font-weight:600;margin-top:10px;touch-action:manipulation}.lane-advice button:disabled{cursor:default;opacity:.5}.lane-advice-note{display:block;text-align:center;font-size:10px;line-height:1.5;color:#7e9181;margin-top:7px}.lane-advice[data-status="recommend"]{border-color:#72934c;background:linear-gradient(130deg,#26351e,var(--panel) 75%)}.lane-advice[data-status="recommend"] .lane-advice-symbol{background:var(--lime);color:#1b2913}.lane-advice[data-status="recommend"] h2{color:var(--lime)}.lane-advice[data-status="recommend"] button{background:var(--lime);border-color:var(--lime);color:#1b2913}.steer-button.recommended-direction{border-color:var(--lime);box-shadow:0 0 0 2px #d3fa7620}
@media(max-width:800px){.lane-advice{padding:11px;margin-top:10px}.lane-advice h2{font-size:13px}.lane-advice p{font-size:11px}.lane-advice-heading{gap:8px}.lane-advice-symbol{width:31px;height:35px}.advice-lanes>div{padding:8px 6px}.advice-lanes strong{font-size:11px}}
@media(max-width:360px){.lane-advice-tag{display:none}.advice-lanes{gap:4px}.advice-lanes>div{padding:7px 4px}.advice-lanes small{font-size:9px}}

/* Road rules and exits share the same compact mobile card. */
.road-events{margin-top:12px;padding:14px;border:1px solid #3d4c40;border-radius:13px;background:#19231d;min-width:0}.road-rule{display:flex;align-items:flex-start;gap:10px}.road-event-icon{display:grid;place-items:center;flex:0 0 32px;height:34px;border:1px solid #49604c;border-radius:8px;color:#b8d6ba;font-size:24px}.road-rule>div,.exit-preview>div{min-width:0;flex:1}.road-event-label{display:block;font-size:10px;color:#91a596;letter-spacing:.5px}.road-events strong{display:block;font-size:13px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}.road-events p{margin:3px 0 0;color:#9caf9e;font-size:11px;line-height:1.6;overflow-wrap:anywhere}.road-events.solid-zone,.road-events.solid,.road-events[data-solid="true"]{border-color:#8a7247;background:#28251b}.road-events.solid-zone #road-rule-title,.road-events.solid #road-rule-title,.road-events[data-solid="true"] #road-rule-title{color:#ffdb9e}.road-events.solid-zone .road-event-icon,.road-events.solid .road-event-icon,.road-events[data-solid="true"] .road-event-icon{border-color:#8a7247;color:#ffdb9e}.exit-preview{display:flex;align-items:center;gap:10px;border-top:1px solid #354438;padding-top:11px;margin-top:11px}.exit-badge{display:block;flex:none;padding:5px 7px;border:1px solid #5d9977;border-radius:5px;background:#22513b;color:#eff8ed;font:600 10px ui-monospace,monospace;letter-spacing:.3px}.road-events button{display:block;width:100%;min-height:44px;margin-top:11px;padding:9px 12px;border:1px solid #5f7e51;border-radius:9px;background:#2a3e25;color:#d8ecbb;font-size:12px;font-weight:600;line-height:1.5;white-space:normal;overflow-wrap:anywhere}.road-events button:disabled{opacity:.45}.road-events.exiting,.road-events[data-mode="exit"]{border-color:#6e9863}.road-events.exiting .exit-badge,.road-events[data-mode="exit"] .exit-badge{background:#306c48}.task-waiting{padding:9px 10px;border:1px solid #7c673f;border-radius:8px;background:#352f1e;color:#f3d297;font-size:11px;line-height:1.6;overflow-wrap:anywhere}.task-card li{align-items:flex-start}.task-card .step-number{flex-shrink:0;margin-top:1px}.keyboard-legend{display:flex;flex-wrap:wrap;gap:8px 13px;padding-top:14px;margin-top:16px;border-top:1px solid var(--border);color:#8f9f90;font-size:10px;line-height:1.7}.keyboard-legend>span{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.keyboard-legend kbd{display:inline-block;min-width:17px;padding:0 3px;border:1px solid #435040;border-bottom-width:2px;border-radius:4px;font:10px/1.7 ui-monospace,monospace;text-align:center;color:#bccbb2}.keyboard-legend small{display:block;width:100%;font-size:10px;color:#788d7c}.suggestions button{min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:left}.command-composer textarea{max-width:100%}
@media(max-width:800px){.road-events{margin-top:10px;padding:11px}.road-events strong{font-size:12px}.road-events p{font-size:10px}.road-event-icon{flex-basis:29px;height:32px}.road-rule,.exit-preview{gap:8px}.keyboard-legend{gap:7px 11px}}
@media(max-width:360px){.road-events{padding:10px}.road-events strong{font-size:11px}.exit-badge{padding:5px;font-size:9px}.keyboard-legend{font-size:9px;gap:6px 9px}}

/* Autonomous driving controls stay touch-sized in the three-mode layout. */
.mode-tabs .mode-tab{gap:5px;white-space:nowrap;font-size:13px;min-width:0}.mode-tabs .mode-tab .icon{width:16px;height:16px}
.auto-intro{padding:24px 0 16px}.auto-pill{font-size:10px;letter-spacing:1.4px;color:var(--lime)}.auto-intro h2{font-size:23px;font-weight:550;margin:10px 0}.auto-intro p,.auto-note{color:var(--muted);font-size:12px;line-height:1.8;margin:0}.auto-route-label{font-size:12px;color:var(--muted);margin-bottom:9px}.auto-routes{display:grid;grid-template-columns:1fr 1fr;gap:9px}.auto-routes button{padding:14px 10px;border:1px solid var(--border);border-radius:11px;background:#151f18;text-align:left;min-height:107px}.auto-routes button.selected{border-color:#9bb662;background:#29351f}.auto-routes i{color:var(--lime);margin-bottom:7px}.auto-routes strong,.auto-routes small{display:block}.auto-routes strong{font-size:13px;font-weight:550}.auto-routes small{font-size:10px;line-height:1.6;color:var(--muted);margin-top:5px}.auto-status{margin:18px 0 14px;padding:14px 12px;background:#141d17;border:1px solid var(--border);border-radius:11px;display:flex;gap:10px}.auto-status strong{font-size:14px;font-weight:550}.auto-status p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.7}.auto-indicator{width:7px;height:7px;flex:0 0 7px;background:#75846d;border-radius:50%;margin-top:7px}.auto-status.active .auto-indicator{background:var(--lime);box-shadow:0 0 0 4px #d3fa7612}.auto-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}.auto-controls>span{font-size:11px;color:var(--muted)}.auto-controls strong{display:block;font-size:13px;font-weight:500;color:var(--text);margin-top:4px}.auto-note{margin:14px 0 3px;font-size:11px}#auto-start{width:100%;min-height:48px}#auto-stop{margin-top:0}
@media(max-width:360px){.mode-tabs .mode-tab{font-size:12px;gap:3px}.mode-tabs .mode-tab .icon{width:14px;height:14px}.auto-routes button{padding:12px 8px}.auto-routes strong{font-size:12px}.auto-intro h2{font-size:21px}}
/* A thumb-accessible horn stays beside braking in every driving mode. */
.horn-button{display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;min-width:90px;min-height:49px;padding:8px 12px;border:1px solid #69734d;border-radius:10px;background:#2b3424;color:#d3fa76;font:inherit;font-size:14px;cursor:pointer;touch-action:manipulation}
.horn-button .icon{width:22px;height:22px}
.horn-button:hover,.horn-button.sounding{background:#475735;border-color:#d3fa76}
.horn-button:disabled,.horn-button[aria-disabled="true"]{opacity:.55;cursor:default}
.horn-button.sounding{opacity:1}
.horn-button:focus-visible{outline:2px solid #d3fa76;outline-offset:3px}
.safety-inner .safety-state{flex:1}
.horn-feedback{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;margin-top:12px;background:#19211a;border:1px solid #333e2c;border-radius:12px;color:#a8b29c}
.horn-feedback>i{margin-top:2px;flex-shrink:0;color:#d3fa76}
.horn-feedback strong{font-size:13px;font-weight:500;color:#d9e4cd}
.horn-feedback p{margin:3px 0 0;font-size:12px;line-height:1.65}
.horn-feedback[data-status="yielding"],.horn-feedback[data-status="completed"]{border-color:#657849}
@media(max-width:760px){
  .safety-inner{gap:8px}
  .safety-inner .safety-symbol{display:none}
  .horn-button{flex-direction:column;gap:2px;min-width:54px;min-height:48px;padding:4px 8px;font-size:11px;border-radius:9px}
  .horn-button .icon{width:19px;height:19px}
  .safety-state strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .safety-state small{font-size:10px!important}
}
@media(max-width:360px){
  .safety-inner .emergency-button,.safety-inner .reset-button{min-width:110px;max-width:110px;gap:5px;font-size:12px}
  .safety-state strong{font-size:12px}
}

/* Collision is a paused round, with an explicit touch-sized restart. */
.collision-dialog{width:calc(100% - 32px);max-width:420px;max-height:calc(100dvh - 32px);margin:auto;padding:28px 24px 22px;overflow:auto;border:1px solid #785447;border-radius:22px;background:#1e2620;color:var(--text);box-shadow:0 24px 100px #0008;text-align:center}
.collision-dialog::backdrop{background:#080e0cbb;backdrop-filter:blur(4px)}
.collision-symbol{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 16px;border:1px solid #956254;border-radius:17px;background:#3d2924;color:#ffc1a2}
.collision-symbol .icon{width:28px;height:28px}.collision-eyebrow{font-size:11px;letter-spacing:2px;color:#d3a08a}
.collision-dialog h2{font-size:28px;font-weight:600;margin:8px 0 12px;letter-spacing:1px}
.collision-dialog p{font-size:13px;color:#acb9a8;line-height:1.8;margin:0;overflow-wrap:anywhere}
.collision-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0;padding:17px 4px;border-top:1px solid #3c4537;border-bottom:1px solid #3c4537}
.collision-metrics dt{font-size:11px;color:#95a28e}.collision-metrics dd{font:500 19px/1.5 ui-monospace,monospace;margin:5px 0 0;color:#e2e9d6;overflow-wrap:anywhere}
#collision-restart{width:100%;min-height:50px;justify-content:center;touch-action:manipulation}
.collision-dialog .collision-note{margin-top:15px;font-size:11px;color:#92a08b}.collision-ended{border-color:#cb8d73}
@media(max-width:360px){.collision-dialog{padding:23px 18px 18px}.collision-dialog h2{font-size:25px}.collision-metrics dd{font-size:17px}}

/* Roadside entrances share the route card without adding another control. */
.entrance-preview{display:flex;align-items:flex-start;gap:10px;margin-top:13px;padding-top:13px;border-top:1px solid #38463c}
.entrance-preview>div{flex:1;min-width:0}.entrance-badge{flex:none;padding:6px 7px;border:1px solid #657664;border-radius:6px;background:#27382a;color:#cbdcb9;font-size:11px;white-space:nowrap}
.entrance-preview #entrance-status{display:block;font-size:11px;line-height:1.6;color:#9dac9d;margin-top:5px;overflow-wrap:anywhere}
.entrance-preview.nearby .entrance-badge{border-color:#a18b4f;background:#38321f;color:#f4dfa3}
.entrance-preview.joining #entrance-name,.entrance-preview.joining #entrance-status{color:#f4dfa3}
@media(max-width:800px){.entrance-preview{gap:8px;margin-top:11px;padding-top:11px}.entrance-preview #entrance-status{font-size:10px}.entrance-badge{font-size:10px;padding:5px 6px}}
.collision-animating .camera-shade{background:linear-gradient(180deg,#07110b18 0%,transparent 65%,#07100c77 100%)}
.collision-animating #camera-status{font-size:12px}
/* Keep the full airborne body and its ground shadow visible on phones. */
.collision-ended .camera-viewport{aspect-ratio:4/3;min-height:260px}
#exit-traffic-status{display:block;margin-top:6px;color:#a5b59f;font-size:11px;line-height:1.65;overflow-wrap:anywhere}
#exit-traffic-status[hidden]{display:none}