:root {
  --ink: #f2f6f4;
  --muted: #9aa7a2;
  --dim: #707d78;
  --mint: #77e3a7;
  --cyan: #68c8d5;
  --amber: #f0b75d;
  --critical: #ff6b5e;
  --recovery: #68c8d5;
  --offline: #a6ada9;
  --panel: rgba(7, 11, 11, .9);
  --panel-soft: rgba(12, 17, 16, .82);
  --line: rgba(207, 222, 215, .18);
  --line-strong: rgba(207, 222, 215, .3);
  --map-bottom: 84px;
  --hmi-topbar: 72px;
  --hmi-touch-primary: 52px;
  --hmi-touch-secondary: 48px;
  --hmi-icon-primary: 24px;
  --hmi-icon-secondary: 20px;
  --hmi-type-label: 11px;
  --hmi-type-meta: 12px;
  --hmi-type-body: 14px;
  --hmi-type-action: 13px;
  --hmi-type-state: 16px;
  --hmi-radius-0: 0;
  --hmi-radius-1: 4px;
  --hmi-radius-2: 8px;
  --hmi-radius-3: 8px;
  --hmi-radius-full: 999px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #050807; }
body { color: var(--ink); font-family: "Avenir Next", "Noto Sans JP", "Helvetica Neue", sans-serif; font-variant-numeric: tabular-nums; }
button { color: inherit; font: inherit; letter-spacing: 0; }
a { color: inherit; }

.screen { position: relative; width: 100%; height: 100%; min-width: 900px; min-height: 500px; overflow: hidden; background: #07100d; }
#map { position: absolute; inset: 0 0 var(--map-bottom); background: #07110e; }
.maplibregl-canvas:focus-visible, .mapboxgl-canvas:focus-visible { outline: 2px solid var(--mint); outline-offset: -3px; }
.maplibregl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-left { left: 22px; bottom: 10px; opacity: .48; }
.maplibregl-ctrl-attrib, .mapboxgl-ctrl-attrib { color: #83908b; background: rgba(4, 7, 7, .76) !important; }
.maplibregl-ctrl-attrib a, .mapboxgl-ctrl-attrib a { color: #aeb9b5; }
.map-vignette { position: absolute; inset: 0 0 var(--map-bottom); pointer-events: none; background: linear-gradient(180deg, rgba(3, 6, 6, .82), transparent 18%, transparent 69%, rgba(3, 6, 6, .62)), linear-gradient(90deg, rgba(3, 6, 6, .58), transparent 24%, transparent 79%, rgba(3, 6, 6, .5)); }

.topbar { position: absolute; z-index: 21; top: 0; left: 0; right: 0; height: var(--hmi-topbar); padding: 0 26px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(207, 222, 215, .12); background: linear-gradient(180deg, rgba(3, 6, 6, .96), rgba(3, 6, 6, .48)); }
.project-nav { display: flex; align-items: center; gap: 14px; min-width: 0; }
.case-study-return { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; color: var(--muted); border: 1px solid var(--line); border-radius: var(--hmi-radius-2); background: rgba(4, 8, 7, .72); font-size: 9px; text-decoration: none; }
.case-study-return:hover { color: var(--ink); border-color: var(--line-strong); }
.case-study-return:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.case-study-return span { color: var(--mint); font-size: 13px; }
.brand, .system-status, .world-row, .drive-state, .progress-copy, .panel-heading, .autonomy-health, .pilot-status { display: flex; align-items: center; }
.center-status { display: flex; align-items: center; gap: 12px; }
.journey-select { width: 100%; height: 38px; padding: 0 10px; color: var(--ink); border: 1px solid var(--line); border-radius: var(--hmi-radius-2); background: rgba(8, 15, 12, .96); font-size: 11px; cursor: pointer; }
.journey-select:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.journey-select:disabled { cursor: not-allowed; opacity: .42; }
.state-switch { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 2px; border: 1px solid var(--line); border-radius: 4px; background: rgba(0, 0, 0, .24); }
.state-button { min-width: 0; height: 38px; padding: 0 5px; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; border: 1px solid transparent; border-radius: var(--hmi-radius-1); background: transparent; cursor: pointer; }
.state-button.active { color: #07110e; background: var(--mint); }
.state-button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.state-button:disabled { cursor: not-allowed; opacity: .42; }
.flow-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.flow-button { min-height: 38px; padding: 0 10px; color: var(--muted); border: 1px solid var(--line); border-radius: var(--hmi-radius-2); background: rgba(255, 255, 255, .025); font-size: 9px; font-weight: 700; cursor: pointer; }
.flow-button:hover { color: var(--ink); border-color: var(--line-strong); }
.flow-button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.flow-button:disabled { cursor: not-allowed; opacity: .42; }
.demo-console { position: absolute; z-index: 14; right: 26px; bottom: 102px; width: 540px; color: var(--muted); }
.demo-console summary { width: max-content; margin-left: auto; padding: 9px 12px; color: var(--dim); border: 1px solid var(--line); border-radius: var(--hmi-radius-2); background: rgba(4, 8, 7, .9); font-size: 9px; font-weight: 700; cursor: pointer; list-style: none; }
.demo-console summary::-webkit-details-marker { display: none; }
.demo-console summary::before { content: "+"; margin-right: 8px; color: var(--mint); }
.demo-console[open] summary::before { content: "−"; }
.demo-console-body { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px 12px; margin-top: 6px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 4px; background: rgba(4, 8, 7, .96); box-shadow: 0 18px 44px rgba(0, 0, 0, .48); backdrop-filter: blur(18px); }
.demo-console-body > label, .demo-console-body > span { color: var(--dim); font-size: 9px; font-weight: 700; }
.runtime-metrics { min-height: 38px; display: flex; align-items: center; padding: 0 10px; color: var(--muted); border: 1px solid var(--line); border-radius: var(--hmi-radius-2); background: rgba(8, 15, 12, .7); font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.runtime-metrics.live { color: var(--mint); border-color: rgba(119, 227, 167, .34); background: rgba(18, 37, 28, .78); }
.brand { gap: 11px; }
.brand-mark { width: 34px; height: 34px; border: 1px solid var(--mint); border-radius: var(--hmi-radius-0); background: linear-gradient(135deg, transparent 43%, var(--mint) 44% 48%, transparent 49%); }
.brand-copy strong, .brand-copy span { display: block; }
.brand-copy strong { font-size: 16px; font-weight: 650; }
.brand-copy span { margin-top: 2px; color: var(--muted); font-size: var(--hmi-type-label); font-weight: 600; }
.pilot-status { min-width: 204px; height: var(--hmi-touch-primary); justify-content: center; gap: 11px; padding: 0 13px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: rgba(8, 15, 12, .52); }
.pilot-orbit { position: relative; width: 22px; height: 22px; border: 1px solid rgba(119, 227, 167, .45); border-radius: 50%; }
.pilot-orbit::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--mint); border-radius: 50%; }
.pilot-orbit i { position: absolute; width: 4px; height: 4px; left: 8px; top: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 9px rgba(119, 227, 167, .8); }
.pilot-status small, .pilot-status strong { display: block; }
.pilot-status small { color: var(--muted); font-size: var(--hmi-type-label); }
.pilot-status strong { margin-top: 1px; color: var(--mint); font-size: var(--hmi-type-state); }
.pilot-status b { color: var(--dim); font-size: var(--hmi-type-label); }
.system-status { justify-self: end; gap: 10px; color: var(--muted); font-size: var(--hmi-type-meta); }
.status-dot { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px rgba(119, 227, 167, .68); }
.map-health { display: none; }
.network-status { min-width: 52px; height: var(--hmi-touch-primary); display: grid; grid-template-columns: 24px auto; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 4px; padding: 5px 8px; color: var(--muted); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.network-icon { width: 24px; height: 24px; grid-row: 1 / 3; fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; }
.network-status b { align-self: end; color: var(--ink); font-size: var(--hmi-type-label); line-height: 1; }
.network-status small { align-self: start; color: var(--dim); font-size: 8px; line-height: 1; }
.network-status.offline .network-icon { stroke: var(--critical); opacity: .5; }
.network-status.offline b { color: var(--critical); }
.connected-quick-actions { display: flex; align-items: center; gap: 8px; padding: 2px; border-radius: var(--hmi-radius-2); background: rgba(4, 10, 10, .46); }
.connected-quick-actions button { position: relative; width: var(--hmi-touch-primary); height: var(--hmi-touch-primary); display: grid; place-items: center; padding: 0; color: var(--muted); border: 0; border-radius: var(--hmi-radius-3); background: transparent; }
.bluetooth-status { position: relative; width: 36px; height: var(--hmi-touch-primary); display: grid; place-items: center; color: var(--muted); border-radius: var(--hmi-radius-2); }
.connected-quick-actions button { cursor: pointer; }
.ui-icon { display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.connected-quick-actions .ui-icon { width: var(--hmi-icon-primary); height: var(--hmi-icon-primary); color: var(--cyan); }
.bluetooth-status i { font-size: var(--hmi-type-label); }
.connected-device-button b { position: absolute; right: 5px; bottom: 4px; color: var(--dim); font-size: 8px; }
.bluetooth-status::after { position: absolute; right: 4px; top: 4px; width: 4px; height: 4px; content: ""; border-radius: 50%; background: var(--mint); box-shadow: 0 0 6px rgba(119, 227, 167, .62); }
.connected-quick-actions button:hover, .connected-device-button[aria-expanded="true"] { color: var(--ink); background: rgba(104, 200, 213, .12); }
.connected-quick-actions button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.connected-quick-actions button:disabled { cursor: not-allowed; opacity: .34; }
.connected-device-panel { position: absolute; z-index: 16; top: calc(var(--hmi-topbar) + 8px); right: 218px; width: 320px; padding: 18px; border: 1px solid rgba(159, 222, 219, .12); border-radius: var(--hmi-radius-2); background: linear-gradient(145deg, rgba(7, 16, 15, .97), rgba(4, 9, 9, .93)); box-shadow: 0 24px 58px rgba(0, 0, 0, .46); backdrop-filter: blur(18px); }
.connected-device-panel[hidden] { display: none; }
.connected-device-heading, .connected-device-meta, .connected-device-actions { display: flex; align-items: center; }
.connected-device-heading { justify-content: space-between; }
.connected-device-heading span, .connected-device-heading strong { display: block; }
.connected-device-heading span { color: var(--cyan); font-size: var(--hmi-type-label); font-weight: 700; }
.connected-device-heading strong { margin-top: 4px; font-size: var(--hmi-type-state); }
.connected-device-heading > b { color: var(--mint); font-size: var(--hmi-type-label); }
.connected-device-meta { justify-content: space-between; margin-top: 13px; padding: 12px 0; color: var(--dim); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--hmi-type-label); }
.connected-device-meta b { color: var(--muted); }
.connected-device-actions { gap: 7px; margin-top: 12px; }
.connected-device-actions button { flex: 1; min-height: var(--hmi-touch-primary); display: grid; place-items: center; gap: 4px; padding: 6px; color: var(--muted); border: 1px solid rgba(159, 222, 219, .12); border-radius: var(--hmi-radius-2); background: rgba(255, 255, 255, .025); cursor: pointer; }
.connected-device-actions button:hover { color: var(--ink); border-color: rgba(104, 200, 213, .34); background: rgba(104, 200, 213, .08); }
.connected-device-actions button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.connected-device-actions button:disabled { cursor: not-allowed; opacity: .38; }
.connected-device-actions .ui-icon { width: var(--hmi-icon-secondary); height: var(--hmi-icon-secondary); color: var(--cyan); }
.connected-device-actions span { font-size: var(--hmi-type-label); font-weight: 700; }
.connected-device-panel > small { display: block; margin-top: 12px; color: var(--dim); font-size: var(--hmi-type-label); line-height: 1.45; }

.vehicle-services-panel { position: absolute; z-index: 17; right: 26px; bottom: calc(var(--map-bottom) + 16px); width: min(560px, calc(100% - 52px)); max-height: calc(100% - var(--hmi-topbar) - var(--map-bottom) - 32px); overflow: auto; padding: 18px; border: 1px solid rgba(159, 222, 219, .18); border-radius: var(--hmi-radius-2); background: linear-gradient(145deg, rgba(7, 16, 15, .98), rgba(4, 9, 9, .96)); box-shadow: 0 28px 70px rgba(0, 0, 0, .54); backdrop-filter: blur(20px); }
.vehicle-services-panel[hidden] { display: none; }
.vehicle-services-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.vehicle-services-heading span, .vehicle-services-heading strong { display: block; }
.vehicle-services-heading span { color: var(--cyan); font-size: var(--hmi-type-label); font-weight: 700; }
.vehicle-services-heading strong { margin-top: 4px; font-size: var(--hmi-type-state); font-weight: 600; }
.vehicle-services-heading > button { width: 44px; height: 44px; padding: 0; color: var(--muted); border: 1px solid var(--line); border-radius: var(--hmi-radius-2); background: transparent; font-size: 22px; cursor: pointer; }
.vehicle-service-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 16px; padding: 4px; border: 1px solid var(--line); border-radius: var(--hmi-radius-2); background: rgba(0, 0, 0, .2); }
.vehicle-service-tab { min-height: 44px; padding: 0 8px; color: var(--dim); border: 1px solid transparent; border-radius: var(--hmi-radius-1); background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; }
.vehicle-service-tab.active { color: #07110e; background: var(--cyan); }
.vehicle-service-pane { margin-top: 14px; }
.vehicle-service-pane[hidden] { display: none; }
.vehicle-service-pane[data-service-pane="comfort"].active { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.climate-zone { padding: 14px; border: 1px solid var(--line); border-radius: var(--hmi-radius-2); background: rgba(255, 255, 255, .025); }
.climate-zone > span { color: var(--dim); font-size: var(--hmi-type-label); font-weight: 700; }
.climate-zone > strong { display: block; margin-top: 8px; font-size: 28px; font-weight: 500; }
.climate-zone > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.climate-zone button, .comfort-actions button, .voice-suggestions button, #guest-mode { min-height: 44px; color: var(--muted); border: 1px solid var(--line); border-radius: var(--hmi-radius-2); background: rgba(255, 255, 255, .03); font-size: 10px; font-weight: 700; cursor: pointer; }
.comfort-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.comfort-actions button[aria-pressed="true"] { color: var(--mint); border-color: rgba(119, 227, 167, .32); background: rgba(119, 227, 167, .06); }
.energy-gauge { position: relative; min-height: 112px; display: grid; align-content: center; padding-left: 128px; border: 1px solid var(--line); border-radius: var(--hmi-radius-2); background: radial-gradient(circle at 64px 56px, rgba(119, 227, 167, .12), transparent 38%), rgba(255, 255, 255, .02); }
.energy-gauge i { position: absolute; left: 24px; top: 21px; width: 76px; height: 76px; border: 8px solid rgba(119, 227, 167, .12); border-top-color: var(--mint); border-right-color: var(--mint); border-radius: 50%; transform: rotate(14deg); }
.energy-gauge strong, .energy-gauge span { display: block; }
.energy-gauge strong { font-size: 30px; font-weight: 500; }
.energy-gauge span { margin-top: 4px; color: var(--muted); font-size: var(--hmi-type-meta); }
.energy-facts, .privacy-facts { display: grid; gap: 8px; margin-top: 12px; }
.energy-facts span, .privacy-facts span { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; color: var(--dim); border-bottom: 1px solid var(--line); font-size: var(--hmi-type-label); }
.energy-facts b, .privacy-facts b { color: var(--muted); }
.vehicle-service-pane > small { display: block; margin-top: 12px; color: var(--dim); font-size: var(--hmi-type-label); line-height: 1.5; }
.vehicle-service-pane[data-service-pane="assistant"] { grid-template-columns: 112px 1fr; gap: 16px; align-items: center; }
.vehicle-service-pane[data-service-pane="assistant"].active { display: grid; }
.voice-orb { width: 104px; height: 104px; display: grid; place-content: center; gap: 8px; color: var(--cyan); border: 1px solid rgba(104, 200, 213, .34); border-radius: 50%; background: radial-gradient(circle, rgba(104, 200, 213, .15), rgba(104, 200, 213, .02) 64%, transparent 65%); cursor: pointer; }
.voice-orb i { justify-self: center; width: 18px; height: 28px; border: 2px solid currentColor; border-radius: 12px; }
.voice-orb span { font-size: 7px; font-weight: 700; }
.voice-orb[aria-pressed="true"] { color: var(--mint); box-shadow: 0 0 0 8px rgba(119, 227, 167, .05), 0 0 36px rgba(119, 227, 167, .16); }
.voice-response span, .voice-response strong, .voice-response small { display: block; }
.voice-response span, .profile-card span { color: var(--cyan); font-size: var(--hmi-type-label); font-weight: 700; }
.voice-response strong, .profile-card strong { margin-top: 6px; font-size: var(--hmi-type-state); }
.voice-response small, .profile-card small { margin-top: 7px; color: var(--dim); font-size: var(--hmi-type-label); line-height: 1.45; }
.voice-suggestions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.profile-card { padding: 16px; border: 1px solid var(--line); border-radius: var(--hmi-radius-2); background: rgba(255, 255, 255, .025); }
.profile-card strong, .profile-card small { display: block; }
#guest-mode { width: 100%; margin-top: 12px; }
#guest-mode[aria-pressed="true"] { color: #07110e; border-color: var(--mint); background: var(--mint); }
.vehicle-services-panel button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.maneuver { position: absolute; z-index: 8; top: calc(var(--hmi-topbar) + 18px); left: 50%; width: 480px; min-height: 94px; transform: translateX(-50%); display: grid; grid-template-columns: 58px 1fr 84px; gap: 15px; align-items: center; padding: 14px 18px; border: 1px solid var(--line-strong); border-top-color: rgba(119, 227, 167, .58); border-radius: var(--hmi-radius-2); background: rgba(4, 9, 8, .94); box-shadow: 0 20px 48px rgba(0, 0, 0, .38); backdrop-filter: blur(16px); }
.turn-icon { width: 50px; height: 52px; display: grid; place-items: center; color: var(--mint); border-right: 1px solid var(--line); }
.turn-icon svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.label, .panel-kicker { display: block; color: var(--mint); font-size: var(--hmi-type-label); font-weight: 700; }
.maneuver strong { display: block; margin-top: 5px; overflow-wrap: anywhere; font-size: 21px; font-weight: 600; line-height: 1.15; }
.maneuver small { display: block; margin-top: 4px; overflow-wrap: anywhere; color: var(--muted); font-size: var(--hmi-type-meta); }
.maneuver-distance { text-align: right; }
.maneuver-distance strong { display: inline; font-size: 27px; }
.maneuver-distance span { margin-left: 4px; color: var(--muted); font-size: var(--hmi-type-label); }
.drive-context { position: absolute; z-index: 7; top: calc(var(--hmi-topbar) + 114px); left: 50%; width: 176px; min-height: 40px; display: none; grid-template-columns: 1fr; align-items: center; padding: 0 13px 0 27px; transform: translateX(-50%); color: var(--dim); border: 1px solid rgba(104, 200, 213, .22); border-radius: var(--hmi-radius-2); background: rgba(5, 13, 13, .78); box-shadow: 0 8px 24px rgba(0, 0, 0, .22); backdrop-filter: blur(14px); font-size: var(--hmi-type-label); }
.drive-context::before { content: ""; position: absolute; left: 13px; top: 50%; width: 6px; height: 6px; transform: translateY(-50%); border: 1px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 0 4px rgba(104, 200, 213, .08), 0 0 10px rgba(104, 200, 213, .42); }
.drive-context::after { content: ""; position: absolute; left: 15%; right: 15%; bottom: -9px; height: 1px; background: linear-gradient(90deg, transparent, rgba(223, 231, 227, .3), transparent); }
.drive-context > span, .drive-context > small { display: none; }
.drive-context > strong { overflow: hidden; color: var(--ink); font-size: var(--hmi-type-label); font-weight: 600; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.drive-context b { color: var(--ink); }

.journey-panel, .autonomy-panel, .world-panel { position: absolute; z-index: 7; border: 1px solid var(--line); border-radius: var(--hmi-radius-2); background: var(--panel); backdrop-filter: blur(16px); }
.panel-heading { justify-content: space-between; gap: 10px; }
.data-tag, .object-count { font-size: 9px; }
.data-tag { padding: 3px 5px; border: 1px solid var(--line); color: var(--dim); }
.data-tag.verified { border-color: rgba(119, 227, 167, .32); color: var(--mint); }
.data-tag.simulated { border-color: rgba(104, 200, 213, .32); color: var(--cyan); }
.data-tag.unavailable { border-color: rgba(166, 173, 169, .42); color: var(--offline); }

.journey-panel { left: 26px; top: calc(var(--hmi-topbar) + 24px); width: 230px; padding: 15px; }
.journey-panel h1 { margin: 11px 0 3px; overflow-wrap: anywhere; font-size: 24px; font-weight: 600; line-height: 1.12; }
.journey-panel > p, .journey-duration, .journey-panel .data-tag { display: none; }
.journey-metrics { display: grid; grid-template-columns: 1fr 1fr; margin: 15px -16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.journey-metrics div { min-width: 0; padding: 11px 16px; }
.journey-metrics div + div { border-left: 1px solid var(--line); }
.journey-metrics strong, .journey-metrics span { display: block; }
.journey-metrics strong { overflow-wrap: normal; word-break: keep-all; white-space: nowrap; font-size: 18px; font-weight: 600; }
.journey-metrics span { margin-top: 3px; color: var(--dim); font-size: var(--hmi-type-label); }
.journey-duration { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 11px; }
.journey-duration span { color: var(--dim); font-size: var(--hmi-type-label); }
.journey-duration strong { font-size: var(--hmi-type-body); font-weight: 600; }
.journey-panel .journey-duration { display: none; }

.autonomy-panel { left: 26px; top: calc(var(--hmi-topbar) + 220px); width: 230px; padding: 15px 16px; display: none; border-left-color: rgba(104, 200, 213, .4); }
.autonomy-panel > strong, .autonomy-panel > small { display: block; overflow-wrap: anywhere; }
.autonomy-panel > strong { margin-top: 12px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.autonomy-panel > small { margin-top: 4px; color: var(--muted); font-size: var(--hmi-type-label); }
.autonomy-health { justify-content: space-between; gap: 12px; margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--hmi-type-label); }
.autonomy-health span { white-space: nowrap; }
.autonomy-health i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--cyan); }
.autonomy-health b { color: var(--dim); font-size: var(--hmi-type-label); white-space: nowrap; }
.safety-context { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.safety-context span { display: flex; justify-content: space-between; gap: 10px; color: var(--dim); font-size: 8px; font-weight: 700; }
.safety-context b { color: var(--muted); text-align: right; }

.world-panel { display: none; right: 26px; top: calc(var(--hmi-topbar) + 24px); width: 218px; padding: 16px; }
.object-count { color: var(--cyan); }
.world-row { justify-content: space-between; gap: 10px; margin-top: 15px; color: #c7d0cc; font-size: 11px; }
.world-row span { min-width: 0; display: flex; align-items: center; gap: 8px; }
.world-row b { color: var(--dim); font-size: 9px; }
.view-switch { display: grid; width: calc(var(--hmi-touch-primary) * 2 + 4px); grid-template-columns: 1fr 1fr; padding: 2px; border: 1px solid var(--line); border-radius: var(--hmi-radius-2); background: rgba(0, 0, 0, .24); }
.view-button { height: var(--hmi-touch-primary); padding: 0; color: var(--dim); font-size: var(--hmi-type-action); font-weight: 700; border: 0; border-radius: var(--hmi-radius-1); background: transparent; cursor: pointer; }
.view-button.active { color: #07110e; background: var(--mint); }
.view-button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.view-button:disabled, .layer-button:disabled { cursor: not-allowed; opacity: .42; }
.cabin-switch { display: grid; width: calc(var(--hmi-touch-primary) * 2 + 28px); grid-template-columns: 1fr 1fr; padding: 2px; border: 1px solid var(--line); border-radius: var(--hmi-radius-2); background: rgba(0, 0, 0, .24); }
.cabin-button { height: var(--hmi-touch-primary); padding: 0; color: var(--dim); border: 0; border-radius: var(--hmi-radius-1); background: transparent; font-size: var(--hmi-type-label); font-weight: 700; cursor: pointer; }
.cabin-button.active { color: #07110e; background: var(--cyan); }
.cabin-button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cabin-button:disabled { cursor: not-allowed; opacity: .38; }
.agent-summary { display: grid; gap: 8px; margin-top: 13px; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #b9c5c0; font-size: 10px; }
.agent-summary span { display: grid; grid-template-columns: 10px 18px 1fr; align-items: center; }
.agent-summary b { color: var(--ink); font-size: 9px; }
.type-dot { width: 6px; height: 6px; border: 1px solid var(--cyan); }
.swatch { flex: 0 0 auto; width: 16px; height: 3px; display: inline-block; }
.route-swatch { background: var(--mint); box-shadow: 0 0 8px rgba(119, 227, 167, .5); }
.building-swatch { background: #727d78; }
.object-swatch { width: 7px; height: 7px; border: 1px solid var(--cyan); background: rgba(104, 200, 213, .2); }
.layer-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); }
.layer-button { min-width: 0; height: var(--hmi-touch-secondary); padding: 0 4px; overflow: hidden; color: var(--muted); font-size: var(--hmi-type-label); text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--line); border-radius: var(--hmi-radius-2); background: rgba(255, 255, 255, .02); cursor: pointer; }
.layer-button:hover { color: var(--ink); border-color: var(--line-strong); }
.layer-button.active { color: var(--ink); border-color: rgba(119, 227, 167, .42); background: rgba(119, 227, 167, .09); }
.layer-button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.vehicle-marker { z-index: 5; width: 66px; height: 66px; pointer-events: none; will-change: transform; transition: width .2s ease, height .2s ease; }
.vehicle-marker::before { content: ""; position: absolute; left: 13%; right: 13%; bottom: 5%; height: 18%; border-radius: 50%; background: rgba(0, 0, 0, .56); filter: blur(5px); transform: perspective(40px) rotateX(55deg); }
.vehicle-glow { position: absolute; inset: 16px 5px 3px; border-radius: 50%; background: radial-gradient(ellipse, rgba(119, 227, 167, .24), transparent 70%); }
.vehicle-render { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .78)); }
.vehicle-marker::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(119, 227, 167, .5); border-radius: 50%; box-shadow: 0 0 0 6px rgba(119, 227, 167, .05), 0 0 18px rgba(119, 227, 167, .16); }

.drivebar { position: absolute; z-index: 11; left: 0; right: 0; bottom: 0; height: var(--map-bottom); display: grid; grid-template-columns: 190px minmax(300px, 1fr) 246px; align-items: center; gap: 28px; padding: 0 26px; border-top: 1px solid var(--line-strong); background: #050808; }
.drive-state { gap: 17px; }
.drive-state > div:first-child { white-space: nowrap; }
.drive-state > div:first-child strong { font-size: 34px; font-weight: 600; line-height: 1; }
.drive-state > div:first-child span { margin-left: 5px; color: var(--dim); font-size: 9px; }
.drive-mode { padding-left: 16px; border-left: 1px solid var(--line); }
.drive-mode b, .drive-mode small { display: block; }
.drive-mode b { color: var(--mint); font-size: 11px; }
.drive-mode small { margin-top: 2px; color: var(--dim); font-size: 9px; }
.route-progress { min-width: 0; }
.progress-copy { justify-content: space-between; gap: 18px; color: var(--muted); font-size: 10px; }
.progress-copy span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-copy strong { flex: 0 0 auto; color: var(--ink); font-weight: 500; }
.progress-track { height: 3px; margin-top: 10px; overflow: hidden; background: #28302d; }
.progress-track i { display: block; width: 0; height: 100%; background: var(--mint); box-shadow: 0 0 7px rgba(119, 227, 167, .36); transition: width .25s linear; }
.data-source { display: none; min-width: 0; text-align: right; }
.data-source span, .data-source strong, .data-source small { display: block; }
.data-source span { color: var(--dim); font-size: 9px; }
.data-source strong { margin-top: 3px; font-size: 12px; font-weight: 600; }
.data-source small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.cabin-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cabin-controls button { min-width: 0; min-height: 52px; padding: 6px 10px; text-align: left; color: var(--muted); border: 1px solid var(--line); border-radius: var(--hmi-radius-2); background: rgba(255, 255, 255, .02); cursor: pointer; }
.cabin-controls span, .cabin-controls strong, .cabin-controls small { display: block; }
.cabin-controls span { color: var(--dim); font-size: 7px; font-weight: 700; }
.cabin-controls strong { margin-top: 2px; color: var(--ink); font-size: 15px; font-weight: 600; }
.cabin-controls small { margin-top: 1px; font-size: 7px; }
.cabin-controls button:hover { border-color: rgba(104, 200, 213, .34); background: rgba(104, 200, 213, .05); }
.cabin-controls button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.map-agent { width: 20px; height: 32px; transform-origin: center; will-change: transform; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .42)); }
.map-agent .agent-halo { position: absolute; inset: -7px; border: 1px solid rgba(224, 234, 230, .24); border-radius: 50%; background: rgba(224, 234, 230, .035); }
.map-agent .agent-car { position: absolute; inset: 2px 4px; border: 1px solid rgba(238, 245, 242, .82); border-radius: var(--hmi-radius-1); background: linear-gradient(145deg, #f1f5f2, #9ca9a4 56%, #626d69); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), 0 0 8px rgba(231, 241, 236, .14); }
.map-agent .agent-car::before { content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 7px; border-radius: 3px 3px 2px 2px; background: linear-gradient(180deg, rgba(38, 49, 48, .78), rgba(90, 103, 99, .45)); }
.map-agent .agent-car::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 3px; height: 2px; border-radius: 50%; background: rgba(255, 255, 255, .75); }
.map-agent .agent-car.van { inset: 0 2px; border-radius: var(--hmi-radius-1); background: linear-gradient(145deg, #e9eeeb, #98a49f 62%, #5d6763); }
.map-agent .agent-car.van::before { top: 3px; height: 6px; border-radius: 2px 2px 1px 1px; }
.map-agent .agent-car.van::after { left: 3px; right: 3px; }
.map-agent .agent-model { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .88; filter: saturate(.22) brightness(1.08) contrast(.86) drop-shadow(0 4px 4px rgba(0, 0, 0, .62)); }
.map-agent .agent-model-drive { display: none; }
.map-agent.far { scale: .72; }
.map-agent.mid { scale: .86; }
.map-agent.near { scale: 1; }
.map-agent.far > i { opacity: .42; }
.map-agent.mid > i { opacity: .68; }
.map-agent.near > i { opacity: .92; }
.map-agent.risk .agent-halo { border-color: rgba(240, 183, 93, .62); background: rgba(240, 183, 93, .09); }
.map-agent.risk .agent-car { border-color: var(--amber); }

.road-context-marker { display: none; width: 30px; height: 42px; pointer-events: none; transform-origin: center; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .52)); }
.screen[data-view="driving"] .road-context-marker { display: block; }
.screen[data-view="driving"] .road-context-marker.out-of-range { display: none; }
.road-context-marker.near { scale: 1; opacity: .82; }
.road-context-marker.mid { scale: .82; opacity: .62; }
.road-context-marker.far { scale: .64; opacity: .4; }
.tree-crown { position: absolute; left: 4px; top: 0; width: 22px; height: 25px; border: 1px solid rgba(220, 230, 225, .44); background: linear-gradient(145deg, rgba(178, 194, 185, .58), rgba(78, 94, 86, .66)); clip-path: polygon(50% 0, 100% 42%, 82% 100%, 18% 100%, 0 42%); }
.tree-trunk { position: absolute; left: 13px; bottom: 2px; width: 4px; height: 17px; background: #727e78; }
.signal-head { position: absolute; left: 8px; top: 0; width: 14px; height: 25px; display: grid; place-items: center; padding: 2px 0; border: 1px solid rgba(226, 233, 230, .54); border-radius: 3px; background: #333a37; }
.signal-head b { width: 5px; height: 5px; border-radius: 50%; background: #737d78; }
.signal-head.red b:first-child { background: var(--critical); box-shadow: 0 0 7px rgba(255, 107, 94, .7); }
.signal-post { position: absolute; left: 14px; top: 24px; width: 2px; height: 17px; background: #929d98; }
.road-context-marker.crossing { width: 46px; height: 20px; }
.crossing-stripes { position: absolute; inset: 3px 0; border: 1px solid rgba(226, 233, 230, .18); background: repeating-linear-gradient(90deg, rgba(226, 233, 230, .65) 0 4px, transparent 4px 8px); }
.road-context-marker.barrier { width: 42px; height: 16px; }
.barrier-body { position: absolute; inset: 4px 0; border: 1px solid rgba(226, 233, 230, .5); background: repeating-linear-gradient(135deg, #cfd8d4 0 6px, #6c7872 6px 12px); }

.screen[data-view="driving"] .journey-panel,
.screen[data-view="driving"] .autonomy-panel,
.screen[data-view="driving"] .world-panel { visibility: hidden; opacity: 0; pointer-events: none; }
.screen[data-view="driving"] .maneuver { top: 76px; width: 410px; min-height: 80px; grid-template-columns: 48px 1fr 74px; }
.screen[data-view="driving"] .turn-icon { width: 42px; height: 46px; }
.screen[data-view="driving"] .drive-context { display: grid; }
.screen[data-view="driving"] .vehicle-marker { width: 96px; height: 96px; }
.screen[data-view="driving"] .vehicle-marker::before,
.screen[data-view="driving"] .vehicle-marker::after,
.screen[data-view="driving"] .vehicle-glow { display: none; }
.screen[data-view="driving"] .map-agent { width: 54px; height: 36px; translate: var(--drive-lane-shift, 0) 0; }
.screen[data-view="driving"] .map-agent.far { scale: .84; }
.screen[data-view="driving"] .map-agent.mid { scale: 1; }
.screen[data-view="driving"] .map-agent.near { scale: 1.14; }
.screen[data-view="driving"] .map-agent.far > i { opacity: .52; }
.screen[data-view="driving"] .map-agent.mid > i { opacity: .76; }
.screen[data-view="driving"] .map-agent.near > i { opacity: 1; }
.screen[data-view="driving"] .vehicle-marker::after { border-color: rgba(119, 227, 167, .26); box-shadow: 0 0 0 4px rgba(119, 227, 167, .035); }
.screen[data-view="driving"] .map-vignette { background: linear-gradient(180deg, rgba(3, 6, 6, .56), transparent 22%, transparent 78%, rgba(3, 6, 6, .3)); }
.screen[data-view="driving"] .map-agent .agent-halo { display: none; }
.screen[data-view="driving"] .map-agent::after { content: ""; position: absolute; z-index: 0; left: 14%; right: 14%; bottom: -2px; height: 22%; border-radius: 50%; background: rgba(0, 0, 0, .72); filter: blur(3px); }
.screen[data-view="driving"] .map-agent .agent-model-map { display: none; }
.screen[data-view="driving"] .map-agent .agent-model-drive { z-index: 1; display: block; transform: scale(1.28); transform-origin: center bottom; }

.drive-world { position: absolute; z-index: 6; inset: var(--hmi-topbar) 0 var(--map-bottom); display: none; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, rgba(3, 7, 8, .18), transparent 34%, rgba(2, 5, 6, .22)); perspective: 760px; }
.screen[data-view="driving"] .drive-world { display: block; }
.screen[data-cabin="media"] .drive-world { display: none; }
.screen[data-view="driving"] #map { filter: brightness(1.02) saturate(.78) contrast(1.05); }
.screen[data-view="driving"] .road-context-marker { visibility: hidden; opacity: 0; }
.screen[data-view="driving"] .map-agent { visibility: hidden; opacity: 0; }
.screen[data-view="driving"] .vehicle-marker { visibility: hidden; opacity: 0; }
.vehicle-marker .ego-front-wheel { display: none; }
.vehicle-marker .vehicle-render { clip-path: inset(0 6% 0 6%); }
.vehicle-marker .ego-front-wheel-left { left: 25%; }
.vehicle-marker .ego-front-wheel-right { right: 25%; }
.drive-map-inset { position: absolute; z-index: 5; right: 22px; top: 22px; width: 176px; height: 124px; padding: 10px 11px; border: 0; border-radius: 8px; background: linear-gradient(135deg, rgba(8, 20, 21, .88), rgba(5, 12, 13, .62) 62%, rgba(5, 11, 12, .12)); box-shadow: 0 16px 38px rgba(0, 0, 0, .24); backdrop-filter: blur(12px); }
.inset-heading, .inset-footer { display: flex; align-items: center; justify-content: space-between; }
.inset-heading span { color: var(--cyan); font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.inset-heading b { padding: 2px 5px; color: var(--dim); border: 0; border-radius: 999px; background: rgba(126, 193, 195, .07); font-size: 6px; letter-spacing: .06em; }
.inset-route { position: relative; height: 68px; margin-top: 6px; overflow: hidden; border-radius: var(--hmi-radius-2); background: radial-gradient(circle at 62% 38%, rgba(80, 147, 151, .11), transparent 42%), linear-gradient(180deg, rgba(7, 16, 18, .56), rgba(7, 16, 18, .08)); }
.inset-north { position: absolute; z-index: 2; top: 5px; right: 6px; width: 13px; height: 18px; display: grid; place-items: start center; color: rgba(216, 238, 234, .76); font-size: 7px; font-weight: 700; }
.inset-north::after { position: absolute; left: 50%; top: 9px; content: ""; width: 1px; height: 7px; transform: translateX(-50%); background: linear-gradient(180deg, var(--cyan), transparent); }
.inset-route svg { width: 100%; height: 100%; display: block; }
.inset-route-shadow { fill: none; stroke: rgba(2, 5, 6, .9); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.inset-route-line { fill: none; stroke: #5acbd8; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(90, 203, 216, .5)); }
.inset-destination-halo { fill: rgba(119, 227, 167, .12); stroke: rgba(119, 227, 167, .28); }
.inset-destination { fill: #a9f4c8; }
.inset-ego-halo { fill: rgba(92, 203, 216, .14); }
.inset-ego-shape { fill: #d8eee9; stroke: rgba(231, 255, 246, .84); stroke-width: 1; }
.inset-footer { margin-top: 6px; }
.inset-footer strong { font-size: 10px; font-weight: 600; }
.inset-footer small { color: var(--dim); font-size: 6px; letter-spacing: .06em; }
.drive-world-claim { position: absolute; z-index: 5; left: 22px; bottom: 18px; display: none; gap: 14px; padding: 9px 11px; border: 1px solid rgba(104, 200, 213, .18); border-radius: var(--hmi-radius-2); background: rgba(4, 10, 11, .78); font-size: var(--hmi-type-label); }
.drive-world-claim b { color: var(--cyan); }
.drive-world-claim span { color: var(--muted); }
.screen[data-view="driving"] .maneuver { left: 22px; right: auto; width: 360px; transform: none; }
.screen[data-view="driving"] .drive-context { top: calc(var(--hmi-topbar) + 104px); }

.media-surface { position: absolute; z-index: 6; inset: var(--hmi-topbar) 0 var(--map-bottom); visibility: hidden; padding: 34px 44px 28px; opacity: 0; pointer-events: none; background: rgba(4, 8, 7, .96); transition: opacity .22s ease; }
.screen[data-cabin="media"] .media-surface { visibility: visible; opacity: 1; pointer-events: auto; }
.screen[data-cabin="media"] .maneuver, .screen[data-cabin="media"] .drive-context, .screen[data-cabin="media"] .journey-panel, .screen[data-cabin="media"] .autonomy-panel, .screen[data-cabin="media"] .world-panel, .screen[data-cabin="media"] .vehicle-marker { visibility: hidden; opacity: 0; pointer-events: none; }
.screen[data-cabin="media"] .demo-console { display: none; }
.media-heading { min-height: 54px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); }
.media-heading > div > small { display: none; }
.media-heading span, .now-playing > span, .media-queue > span, .media-route-strip > span { display: block; color: var(--cyan); font-size: var(--hmi-type-label); font-weight: 700; }
.media-heading strong { display: block; margin-top: 5px; font-size: 18px; font-weight: 500; line-height: 1.2; }
.media-provider { display: block; margin-top: 5px; color: var(--dim); font-size: var(--hmi-type-label); }
.media-mode-switch { display: grid; grid-template-columns: repeat(3, 1fr); width: 320px; padding: 4px; border: 1px solid rgba(159, 222, 219, .14); border-radius: var(--hmi-radius-3); background: rgba(9, 18, 17, .72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 10px 30px rgba(0, 0, 0, .2); }
.media-mode-button { min-height: var(--hmi-touch-primary); display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; color: var(--dim); border: 0; border-radius: var(--hmi-radius-2); background: transparent; font-size: var(--hmi-type-label); font-weight: 700; letter-spacing: 0; cursor: pointer; transition: color .18s ease, background .18s ease, box-shadow .18s ease; }
.media-mode-button i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .38; box-shadow: 0 0 0 0 transparent; }
.media-mode-button.active { color: #dffbf4; background: linear-gradient(180deg, rgba(111, 211, 222, .2), rgba(111, 211, 222, .08)); box-shadow: inset 0 0 0 1px rgba(111, 211, 222, .38), 0 6px 18px rgba(0, 0, 0, .22); }
.media-mode-button.active i { color: var(--mint); opacity: 1; box-shadow: 0 0 10px rgba(119, 227, 167, .72); }
.media-mode-button:focus-visible, .video-play:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.media-layout, .podcast-layout { height: calc(100% - 54px); display: none; grid-template-columns: minmax(230px, .78fr) minmax(300px, 1fr) minmax(220px, .72fr); align-items: center; gap: 48px; max-width: 1320px; margin: 0 auto; }
.media-surface[data-media-mode="music"] .media-layout, .media-surface[data-media-mode="podcast"] .podcast-layout { display: grid; }
.album-art { position: relative; min-width: 0; margin: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(126, 224, 210, .24); border-radius: var(--hmi-radius-2); background: #07100f; box-shadow: 0 28px 70px rgba(0, 0, 0, .42), 0 0 42px rgba(103, 213, 218, .08); }
.album-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.album-art::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 55%, rgba(2, 6, 6, .72)), radial-gradient(circle at 75% 25%, rgba(122, 229, 211, .08), transparent 38%); }
.album-art figcaption { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 17px; display: flex; justify-content: space-between; color: #dce9e4; font-size: 9px; font-weight: 700; letter-spacing: .05em; }
.album-art figcaption b { color: var(--mint); }
.now-playing h2 { max-width: 520px; margin: 14px 0 8px; font-size: 48px; font-weight: 450; line-height: 1.04; }
.now-playing p { margin: 0; color: var(--muted); font-size: var(--hmi-type-body); }
.music-catalog-link { display: inline-block; margin-top: 18px; color: var(--cyan); font-size: var(--hmi-type-label); font-weight: 700; text-decoration: none; }
.music-catalog-link:hover { color: var(--ink); }
.music-catalog-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.media-progress { height: 2px; margin-top: 38px; background: #33403a; }
.media-progress i { width: 48%; height: 100%; display: block; background: var(--cyan); }
.media-time { display: flex; justify-content: space-between; margin-top: 8px; color: var(--dim); font-size: var(--hmi-type-label); }
.media-controls { display: flex; align-items: center; gap: 14px; margin-top: 25px; }
.media-controls button { width: var(--hmi-touch-primary); height: var(--hmi-touch-primary); padding: 0; color: var(--muted); border: 1px solid rgba(159, 222, 219, .16); border-radius: var(--hmi-radius-3); background: rgba(11, 21, 19, .64); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035); cursor: pointer; transition: color .18s ease, border-color .18s ease, transform .18s ease; }
.media-controls button:hover { color: var(--ink); border-color: rgba(111, 211, 222, .42); transform: translateY(-1px); }
.media-controls .play-button { position: relative; width: 76px; height: 76px; color: #06100d; border: 1px solid rgba(175, 255, 225, .72); border-radius: 50%; background: linear-gradient(145deg, #9af2c4, #68cedc); box-shadow: 0 0 0 7px rgba(105, 213, 217, .075), 0 14px 34px rgba(39, 156, 166, .2), inset 0 1px 0 rgba(255, 255, 255, .52); }
.music-play > span::before { position: absolute; left: 50%; top: 50%; content: ""; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #07110e; transform: translate(-38%, -50%); }
.music-play.is-playing > span::before { width: 5px; height: 18px; border: 0; border-left: 5px solid #07110e; border-right: 5px solid #07110e; transform: translate(-50%, -50%); }

.screen[data-reel="true"] .demo-console { display: none; }
.screen[data-reel="true"] .media-surface { transition: opacity .55s cubic-bezier(.22, 1, .36, 1); }
.screen[data-reel="true"][data-reel-beat="media-enter"] .album-art { animation: reel-art-enter .9s cubic-bezier(.22, 1, .36, 1) both; }
.screen[data-reel="true"][data-reel-beat="media-enter"] .now-playing { animation: reel-copy-enter .82s .12s cubic-bezier(.22, 1, .36, 1) both; }
.screen[data-reel="true"][data-reel-beat="media-enter"] .media-queue { animation: reel-copy-enter .82s .24s cubic-bezier(.22, 1, .36, 1) both; }
.screen[data-reel="true"][data-reel-beat="music-play"] .play-button { animation: reel-play-confirm .62s cubic-bezier(.22, 1, .36, 1); }
.screen[data-reel="true"][data-reel-beat="track-change"] .album-art,
.screen[data-reel="true"][data-reel-beat="track-change"] .now-playing h2,
.screen[data-reel="true"][data-reel-beat="track-change"] .now-playing p { animation: reel-track-change .72s cubic-bezier(.22, 1, .36, 1) both; }
.screen[data-reel="true"][data-reel-beat="track-change"] .now-playing h2 { animation-delay: .08s; }
.screen[data-reel="true"][data-reel-beat="track-change"] .now-playing p { animation-delay: .14s; }

@keyframes reel-art-enter { from { opacity: 0; transform: translate3d(-28px, 18px, 0) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes reel-copy-enter { from { opacity: 0; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes reel-play-confirm { 0% { transform: scale(1); } 45% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes reel-track-change { from { opacity: 0; transform: translate3d(22px, 0, 0); } to { opacity: 1; transform: none; } }
.skip-button span::before, .skip-button span::after { position: absolute; top: 50%; content: ""; transform: translateY(-50%); }
.skip-button { position: relative; }
.previous-track span::before { left: 17px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 8px solid currentColor; }
.previous-track span::after { left: 15px; width: 2px; height: 14px; background: currentColor; }
.next-track span::before { right: 17px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid currentColor; }
.next-track span::after { right: 15px; width: 2px; height: 14px; background: currentColor; }
.podcast-skip { position: relative; display: inline-grid; place-items: center; gap: 1px; }
.podcast-skip b { position: absolute; bottom: 8px; color: currentColor; font-size: 8px; font-weight: 800; line-height: 1; }
.podcast-rewind span::before, .podcast-forward span::before { position: absolute; top: 16px; width: 16px; height: 11px; border: 2px solid currentColor; border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; content: ""; }
.podcast-rewind span::after, .podcast-forward span::after { position: absolute; top: 14px; width: 0; height: 0; content: ""; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.podcast-rewind span::before { left: 14px; transform: rotate(-35deg); }
.podcast-rewind span::after { left: 12px; border-right: 5px solid currentColor; transform: rotate(-32deg); }
.podcast-forward span::before { right: 14px; transform: rotate(145deg); }
.podcast-forward span::after { right: 12px; border-left: 5px solid currentColor; transform: rotate(32deg); }
.podcast-play > span::before { position: absolute; left: 50%; top: 50%; width: 0; height: 0; content: ""; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #07110e; transform: translate(-38%, -50%); }
.podcast-play.is-playing > span::before { width: 5px; height: 18px; border: 0; border-left: 5px solid #07110e; border-right: 5px solid #07110e; transform: translate(-50%, -50%); }
.media-controls button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.media-queue { align-self: center; padding-left: 24px; border-left: 1px solid var(--line); }
.media-queue ol { margin: 12px 0 0; padding: 0; list-style: none; }
.media-queue li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.media-queue li > b { color: var(--dim); font-size: 9px; }
.media-queue li span { color: #cbd5d1; font-size: 11px; }
.media-queue li small { display: block; margin-top: 4px; color: var(--dim); font-size: 9px; }
.media-route-strip { display: none; height: 48px; grid-template-columns: 130px 1fr auto auto; align-items: center; gap: 16px; border-top: 1px solid var(--line); }
.media-route-strip strong { font-size: 11px; font-weight: 600; }
.media-route-strip strong b { color: var(--mint); }
.media-route-strip small { color: var(--muted); font-size: 9px; }
.media-back { min-width: 92px; min-height: var(--hmi-touch-primary); padding: 0 14px; color: var(--cyan); border: 1px solid var(--line-strong); border-radius: var(--hmi-radius-3); background: transparent; font-size: var(--hmi-type-label); font-weight: 700; cursor: pointer; }
.media-back:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.video-layout { display: none; height: calc(100% - 54px); grid-template-columns: minmax(340px, 1.15fr) minmax(280px, .85fr); align-items: center; gap: 48px; max-width: 1320px; margin: 0 auto; }
.media-surface[data-media-mode="video"] .media-layout { display: none; }
.media-surface[data-media-mode="video"] .podcast-layout { display: none; }
.media-surface[data-media-mode="video"] .video-layout { display: grid; }
.video-poster { position: relative; min-width: 0; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--hmi-radius-2); background: #0d1713; }
.video-poster img, .video-poster video { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.72) brightness(.76) contrast(1.12); }
.video-poster::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(180deg, rgba(3, 6, 5, .08), rgba(3, 6, 5, .72)); transition: opacity .25s ease; }
.video-poster.is-playing::after { opacity: .14; }
.video-poster figcaption { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; display: flex; justify-content: space-between; gap: 16px; color: #dce9e4; font-size: 9px; font-weight: 700; }
.video-poster figcaption b { color: var(--mint); }
.video-copy > span { display: block; color: var(--cyan); font-size: 9px; font-weight: 700; }
.video-copy h2 { margin: 16px 0 7px; font-size: 56px; font-weight: 450; line-height: 1.04; }
.video-copy > p { margin: 0; color: var(--muted); font-size: 13px; }
.video-policy { display: grid; gap: 7px; margin-top: 34px; padding: 14px 0 14px 14px; border-left: 2px solid var(--mint); }
.video-policy b { color: var(--mint); font-size: 9px; }
.video-policy span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.video-play { min-height: var(--hmi-touch-primary); margin-top: 28px; padding: 0 18px; color: #07110e; border: 1px solid var(--mint); border-radius: var(--hmi-radius-3); background: var(--mint); font-size: var(--hmi-type-action); font-weight: 700; cursor: pointer; }
.video-play:disabled { color: var(--muted); border-color: var(--line-strong); background: transparent; cursor: not-allowed; }
.podcast-art { position: relative; min-width: 0; margin: 0; aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--hmi-radius-2); background: linear-gradient(145deg, #15231e, #07100d 64%); }
.podcast-art::before { position: absolute; z-index: 1; inset: 0; content: ""; pointer-events: none; background: linear-gradient(180deg, transparent 56%, rgba(3, 6, 5, .82)); }
.podcast-art img { width: 100%; height: 100%; object-fit: cover; }
.podcast-art-mark { position: relative; z-index: 1; color: var(--ink); font-size: clamp(42px, 6vw, 80px); font-weight: 500; letter-spacing: .08em; }
.podcast-art figcaption { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; display: flex; justify-content: space-between; gap: 12px; color: #dce9e4; font-size: 9px; font-weight: 700; }
.podcast-art figcaption b { color: var(--cyan); }
.podcast-copy > span { display: block; color: var(--cyan); font-size: 9px; font-weight: 700; }
.podcast-copy h2 { max-width: 560px; margin: 14px 0 8px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 36px; font-weight: 450; line-height: 1.08; }
.podcast-copy > p { margin: 0; color: var(--muted); font-size: 13px; }
.podcast-queue li span { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.continuity-card, .call-card { position: absolute; z-index: 18; left: 50%; top: calc(var(--hmi-topbar) + 20px); transform: translateX(-50%); display: grid; align-items: center; gap: 14px; width: min(690px, calc(100% - 40px)); padding: 14px 16px; border: 1px solid var(--line-strong); border-top-color: var(--cyan); border-radius: var(--hmi-radius-2); background: rgba(4, 9, 8, .97); box-shadow: 0 20px 52px rgba(0, 0, 0, .48); backdrop-filter: blur(18px); }
.continuity-card[hidden], .call-card[hidden], .cabin-notice[hidden] { display: none; }
.continuity-card { grid-template-columns: 34px 1fr auto auto; }
.continuity-device { position: relative; width: 22px; height: 34px; justify-self: center; border: 1px solid var(--cyan); border-radius: var(--hmi-radius-1); }
.continuity-device i { position: absolute; left: 50%; bottom: 3px; width: 4px; height: 1px; transform: translateX(-50%); background: var(--cyan); }
.continuity-card span, .call-card span { display: block; color: var(--cyan); font-size: var(--hmi-type-label); font-weight: 700; }
.continuity-card strong, .call-card strong { display: block; margin-top: 3px; font-size: var(--hmi-type-state); }
.continuity-card small, .call-card small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--hmi-type-label); }
.continuity-card button { min-width: 104px; height: var(--hmi-touch-primary); padding: 0 14px; color: #06100b; border: 1px solid var(--mint); border-radius: var(--hmi-radius-3); background: var(--mint); font-size: var(--hmi-type-action); font-weight: 700; cursor: pointer; }
.continuity-card button.secondary { color: var(--muted); border-color: var(--line); background: transparent; }
.call-card { grid-template-columns: 44px 1fr var(--hmi-touch-primary) var(--hmi-touch-primary); width: min(560px, calc(100% - 40px)); }
.caller-avatar { width: 44px; height: 44px; display: grid; place-items: center; color: #07110e; border-radius: 50%; background: var(--cyan); font-size: var(--hmi-type-state); font-weight: 700; }
.call-card button { width: var(--hmi-touch-primary); height: var(--hmi-touch-primary); padding: 0; border-radius: 50%; font-size: var(--hmi-icon-secondary); cursor: pointer; }
.reject-call { color: var(--critical); border: 1px solid rgba(255, 107, 94, .54); background: rgba(255, 107, 94, .08); }
.accept-call { color: #06100b; border: 1px solid var(--mint); background: var(--mint); }
.cabin-notice { position: absolute; z-index: 19; left: 50%; top: calc(var(--hmi-topbar) + 18px); transform: translateX(-50%); padding: 12px 16px; color: #151004; border: 1px solid var(--amber); border-radius: var(--hmi-radius-2); background: var(--amber); font-size: var(--hmi-type-action); font-weight: 700; }

/* Reserve the media header when a connected-device interruption is visible. */
.screen[data-cabin="media"]:has(.continuity-card:not([hidden])) .media-surface,
.screen[data-cabin="media"]:has(.call-card:not([hidden])) .media-surface,
.screen[data-cabin="media"]:has(.cabin-notice:not([hidden])) .media-surface { padding-top: 122px; }
.screen[data-cabin="media"]:has(.continuity-card:not([hidden])) .continuity-card,
.screen[data-cabin="media"]:has(.call-card:not([hidden])) .call-card,
.screen[data-cabin="media"]:has(.cabin-notice:not([hidden])) .cabin-notice { top: calc(var(--hmi-topbar) + 16px); }

.screen[data-state="limited"] .pilot-status { border-color: rgba(240, 183, 93, .45); }
.screen[data-state="limited"] .autonomy-panel,
.screen[data-state="minimal-risk"] .autonomy-panel,
.screen[data-state="recovery"] .autonomy-panel,
.screen[data-state="takeover"] .autonomy-panel,
.screen[data-state="odd-boundary"] .autonomy-panel,
.screen[data-state="unavailable"] .autonomy-panel { display: block; visibility: visible; opacity: 1; pointer-events: auto; }
.screen[data-state="limited"] .pilot-status strong, .screen[data-state="limited"] .label, .screen[data-state="limited"] .panel-kicker { color: var(--amber); }
.screen[data-state="limited"] .maneuver { border-top-color: rgba(240, 183, 93, .72); }
.screen[data-state="limited"] .state-button[data-state="limited"] { color: #130d03; border-color: var(--amber); background: var(--amber); }
.screen[data-state="minimal-risk"] .pilot-status { border-color: rgba(255, 107, 94, .58); }
.screen[data-state="minimal-risk"] .pilot-status strong, .screen[data-state="minimal-risk"] .label, .screen[data-state="minimal-risk"] .panel-kicker { color: var(--critical); }
.screen[data-state="minimal-risk"] .maneuver { border-color: rgba(255, 107, 94, .58); border-top-color: var(--critical); }
.screen[data-state="minimal-risk"] .autonomy-panel { border-left-color: rgba(255, 107, 94, .65); }
.screen[data-state="minimal-risk"] .state-button[data-state="minimal-risk"] { color: #160504; border-color: var(--critical); background: var(--critical); }
.screen[data-state="recovery"] .pilot-status { border-color: rgba(104, 200, 213, .58); }
.screen[data-state="recovery"] .pilot-status strong, .screen[data-state="recovery"] .label, .screen[data-state="recovery"] .panel-kicker { color: var(--cyan); }
.screen[data-state="recovery"] .maneuver { border-top-color: rgba(104, 200, 213, .72); }
.screen[data-state="recovery"] .state-button[data-state="recovery"] { color: #031113; border-color: var(--recovery); background: var(--recovery); }
.screen[data-state="takeover"] .pilot-status { border-color: rgba(255, 107, 94, .68); }
.screen[data-state="takeover"] .pilot-status strong, .screen[data-state="takeover"] .label, .screen[data-state="takeover"] .panel-kicker { color: var(--critical); }
.screen[data-state="takeover"] .maneuver { border-color: rgba(255, 107, 94, .66); border-top-color: var(--critical); }
.screen[data-state="takeover"] .autonomy-panel { border-left-color: rgba(255, 107, 94, .72); }
.screen[data-state="takeover"] .state-button[data-state="takeover"] { color: #160504; border-color: var(--critical); background: var(--critical); }
.screen[data-state="odd-boundary"] .pilot-status { border-color: rgba(240, 183, 93, .52); }
.screen[data-state="odd-boundary"] .pilot-status strong, .screen[data-state="odd-boundary"] .label, .screen[data-state="odd-boundary"] .panel-kicker { color: var(--amber); }
.screen[data-state="odd-boundary"] .maneuver { border-top-color: rgba(240, 183, 93, .78); }
.screen[data-state="odd-boundary"] .autonomy-panel { border-left-color: rgba(240, 183, 93, .62); }
.screen[data-state="odd-boundary"] .state-button[data-state="odd-boundary"] { color: #130d03; border-color: var(--amber); background: var(--amber); }
.screen[data-state="unavailable"] .pilot-status { border-color: rgba(166, 173, 169, .5); }
.screen[data-state="unavailable"] .pilot-status strong, .screen[data-state="unavailable"] .label, .screen[data-state="unavailable"] .panel-kicker { color: var(--offline); }
.screen[data-state="unavailable"] .pilot-orbit { opacity: .3; }
.screen[data-state="unavailable"] .maneuver { border-color: rgba(166, 173, 169, .38); border-top-color: var(--offline); }
.screen[data-state="unavailable"] .autonomy-panel { border-left-color: rgba(166, 173, 169, .5); }
.screen[data-state="unavailable"] .state-button[data-state="unavailable"] { color: #090b0a; border-color: var(--offline); background: var(--offline); }
.screen[data-state="unavailable"] .vehicle-marker { filter: grayscale(1) saturate(0); opacity: .72; }
.screen[data-state="arrival"] .pilot-status { border-color: rgba(119, 227, 167, .58); }
.screen[data-state="arrival"] .pilot-status strong, .screen[data-state="arrival"] .label, .screen[data-state="arrival"] .panel-kicker { color: var(--mint); }
.screen[data-state="arrival"] .maneuver { border-top-color: rgba(119, 227, 167, .72); }
.screen[data-state="arrival"] .state-button[data-state="arrival"] { color: #07110e; border-color: var(--mint); background: var(--mint); }
.screen[data-state="arrival"] .vehicle-marker { filter: saturate(.72); }
.screen[data-state="available"] .pilot-status strong { color: var(--cyan); }
.screen[data-state="available"] .status-dot { background: var(--cyan); box-shadow: 0 0 8px rgba(104, 200, 213, .68); }
.screen[data-state="available"] .vehicle-marker { filter: saturate(.58); }

.loading { position: absolute; z-index: 20; inset: 0; display: grid; place-content: center; gap: 14px; color: var(--muted); font-size: 10px; background: #07100d; transition: opacity .35s ease; }
.loading[hidden] { display: none; }
.loading i { justify-self: center; width: 28px; height: 28px; border: 1px solid rgba(119, 227, 167, .22); border-top-color: var(--mint); border-radius: 50%; animation: spin 1s linear infinite; }
.loading.ready { opacity: 0; pointer-events: none; }
.error { position: absolute; z-index: 30; left: 50%; bottom: 106px; max-width: min(520px, calc(100% - 40px)); transform: translateX(-50%); padding: 10px 14px; overflow-wrap: anywhere; color: #ffd9a0; border: 1px solid rgba(240, 183, 93, .38); background: rgba(23, 14, 4, .94); font-size: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 1600px) {
  :root {
    --hmi-topbar: 96px;
    --hmi-touch-primary: 76px;
    --hmi-touch-secondary: 64px;
    --hmi-icon-primary: 44px;
    --hmi-icon-secondary: 36px;
    --hmi-type-label: 14px;
    --hmi-type-meta: 16px;
    --hmi-type-body: 20px;
    --hmi-type-action: 18px;
    --hmi-type-state: 22px;
  }
  .brand-mark { width: 44px; height: 44px; }
  .brand-copy strong { font-size: 20px; }
  .pilot-status { min-width: 264px; }
  .maneuver { width: 620px; min-height: 122px; grid-template-columns: 72px 1fr 110px; padding: 18px 22px; }
  .turn-icon { width: 62px; height: 66px; }
  .turn-icon svg { width: 48px; height: 48px; }
  .maneuver strong { font-size: 28px; }
  .maneuver-distance strong { font-size: 38px; }
  .journey-panel, .autonomy-panel { width: 304px; padding: 20px; }
  .journey-panel h1 { font-size: 30px; }
  .autonomy-panel { top: calc(var(--hmi-topbar) + 286px); }
  .world-panel { width: 270px; padding: 20px; }
  .connected-device-panel { width: 382px; padding: 22px; }
  .media-mode-switch { width: 370px; }
  .media-controls .play-button { width: 92px; height: 92px; }
}

@media (max-width: 1320px) {
  .system-status { gap: 12px; }
  .system-status .wide-only, .connected-device-button span { display: none; }
}

@media (max-width: 1100px) {
  .system-status > #map-status, .system-status > span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .progress-track i, .loading, .media-surface, .media-mode-button, .media-controls button { transition: none; }
  .media-controls button:hover { transform: none; }
  .screen[data-reel="true"] .album-art, .screen[data-reel="true"] .now-playing, .screen[data-reel="true"] .media-queue, .screen[data-reel="true"] .play-button, .screen[data-reel="true"] .now-playing h2, .screen[data-reel="true"] .now-playing p { animation: none !important; }
}

@media (max-width: 1180px), (max-height: 680px) {
  .topbar { padding: 0 20px; }
  .wide-only { display: none; }
  .demo-console { right: 20px; }
  .maneuver { top: calc(var(--hmi-topbar) + 12px); width: 420px; }
  .journey-panel { left: 20px; top: calc(var(--hmi-topbar) + 14px); width: 236px; }
  .world-panel { right: 20px; top: calc(var(--hmi-topbar) + 14px); width: 198px; }
  .autonomy-panel { left: 20px; top: calc(var(--hmi-topbar) + 220px); width: 236px; }
  .drivebar { grid-template-columns: 184px minmax(260px, 1fr); gap: 24px; padding: 0 20px; }
  .cabin-controls { display: none; }
  .cabin-switch { width: 122px; }
  .media-surface { padding: 26px 30px 22px; }
  .media-layout, .podcast-layout { grid-template-columns: minmax(200px, .7fr) minmax(280px, 1fr); }
  .media-queue { display: none; }
  .video-layout { grid-template-columns: minmax(260px, 1fr) minmax(240px, .85fr); gap: 28px; }
  .connected-device-panel { right: 20px; }
  .vehicle-services-panel { right: 20px; width: min(520px, calc(100% - 40px)); }
}

@media (max-height: 680px) {
  .journey-duration { display: none; }
  .journey-panel { width: 226px; }
  .maneuver { min-height: 86px; }
}

@media (max-width: 980px) {
  .screen { min-width: 760px; }
  .world-panel { display: none; }
  .pilot-status { min-width: 156px; }
  .journey-panel { left: 16px; width: 218px; }
  .autonomy-panel { left: 16px; width: 218px; }
  .maneuver { left: auto; right: 16px; width: 402px; transform: none; }
  .drivebar { grid-template-columns: 174px minmax(240px, 1fr); gap: 18px; padding: 0 16px; }
  .demo-console { right: 16px; width: min(540px, calc(100% - 32px)); }
  .journey-metrics div { padding-right: 10px; padding-left: 10px; }
  .screen[data-state="arrival"] .journey-metrics strong { font-size: 16px; }
}

@media (max-width: 759px), (max-height: 420px) {
  :root {
    --map-bottom: 68px;
    --hmi-topbar: 52px;
    --hmi-touch-primary: 44px;
    --hmi-touch-secondary: 44px;
    --hmi-icon-primary: 21px;
    --hmi-icon-secondary: 18px;
    --hmi-type-label: 8px;
    --hmi-type-meta: 10px;
    --hmi-type-body: 12px;
    --hmi-type-action: 10px;
    --hmi-type-state: 12px;
  }
  .screen { min-width: 0; min-height: 0; }
  .topbar { height: var(--hmi-topbar); padding: 0 10px; grid-template-columns: auto 1fr auto; }
  .project-nav { gap: 7px; }
  .case-study-return { width: 36px; min-height: 36px; justify-content: center; padding: 0; }
  .case-study-return b { display: none; }
  .brand-copy span, .system-status span:not(#clock), .pilot-orbit, .pilot-status b, .view-switch, .cabin-switch, .journey-panel, .autonomy-panel, .world-panel, .drive-context, .data-source { display: none; }
  .brand { gap: 7px; }
  .brand-mark { width: 23px; height: 23px; }
  .pilot-status { min-width: 0; height: 44px; padding: 0 9px; border-right: 0; }
  .pilot-status small { font-size: 7px; }
  .pilot-status strong { font-size: 11px; white-space: nowrap; }
  .system-status { gap: 0; font-size: 10px; }
  .connected-quick-actions { gap: 4px; padding: 0; }
  .connected-quick-actions button { width: var(--hmi-touch-primary); height: var(--hmi-touch-primary); }
  .bluetooth-status { width: 28px; height: var(--hmi-touch-primary); }
  .connected-device-button b { display: none; }
  .connected-device-panel { top: 58px; right: 10px; width: min(286px, calc(100% - 20px)); }
  .vehicle-services-panel { right: 10px; bottom: 78px; width: calc(100% - 20px); max-height: calc(100% - 140px); padding: 12px; }
  .vehicle-service-tabs { grid-template-columns: repeat(2, 1fr); }
  .vehicle-service-pane[data-service-pane="comfort"].active { grid-template-columns: 1fr 1fr; }
  .comfort-actions, .voice-suggestions { grid-template-columns: 1fr; }
  .vehicle-service-pane[data-service-pane="assistant"].active { grid-template-columns: 82px 1fr; }
  .voice-orb { width: 76px; height: 76px; }
  .maneuver { top: 62px; left: 10px; right: 10px; width: auto; min-height: 76px; transform: none; grid-template-columns: 42px minmax(0, 1fr) 62px; gap: 9px; padding: 10px 12px; }
  .turn-icon { width: 38px; height: 38px; }
  .maneuver strong { font-size: 15px; }
  .maneuver-distance strong { font-size: 18px; }
  .drivebar { height: var(--map-bottom); grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 0 10px; }
  .drive-state > div:first-child strong { font-size: 28px; }
  .drive-mode { padding-left: 9px; }
  .progress-copy { font-size: 8px; }
  .demo-console { right: 10px; bottom: 78px; width: calc(100% - 20px); }
  .demo-console-body { max-height: calc(100vh - 140px); overflow-y: auto; grid-template-columns: 92px minmax(0, 1fr); padding: 10px; gap: 8px; }
  .state-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .maplibregl-ctrl-attrib, .mapboxgl-ctrl-attrib { display: none; }
  .media-surface { inset: var(--hmi-topbar) 0 var(--map-bottom); padding: 18px 14px 14px; }
  .media-heading { min-height: 44px; }
  .media-heading strong { font-size: 14px; }
  .media-mode-switch { width: 194px; }
  .media-layout, .podcast-layout { height: calc(100% - 86px); grid-template-columns: minmax(120px, .72fr) minmax(170px, 1fr); gap: 18px; }
  .video-layout { height: calc(100% - 86px); grid-template-columns: 1fr; align-content: center; gap: 18px; }
  .video-poster { max-width: 470px; }
  .video-copy h2, .podcast-copy h2 { margin-top: 9px; font-size: 28px; }
  .video-policy { margin-top: 16px; }
  .video-play { margin-top: 16px; }
  .now-playing h2 { margin-top: 8px; font-size: 24px; }
  .now-playing p { font-size: 10px; }
  .media-progress { margin-top: 18px; }
  .media-controls { margin-top: 14px; }
  .media-controls button { width: 44px; height: 44px; }
  .media-controls .play-button { width: 48px; height: 48px; }
  .media-route-strip { height: 44px; grid-template-columns: 86px 1fr auto; }
  .media-route-strip small { display: none; }
  .media-back { min-width: 72px; min-height: 44px; }
  .continuity-card { top: 62px; grid-template-columns: 30px 1fr; gap: 10px; }
  .continuity-card button { min-width: 0; }
  .call-card { top: 62px; grid-template-columns: 34px 1fr 38px 38px; gap: 8px; }
  .cabin-notice { top: 62px; max-width: calc(100% - 20px); text-align: center; }
  .screen[data-view="driving"] .maneuver { top: 62px; left: 10px; right: 10px; width: auto; }
  .screen[data-view="driving"] .drive-context { display: none; }
  .drive-map-inset { right: 10px; top: 100px; width: 144px; height: 118px; padding: 8px 9px; border-radius: var(--hmi-radius-2); }
  .inset-heading span { font-size: 6px; }
  .inset-route { height: 66px; margin-top: 5px; }
  .inset-footer { margin-top: 5px; }
  .inset-footer strong { font-size: 8px; }
  .inset-footer small { font-size: 5px; }
  .drive-world-claim { left: 10px; bottom: 10px; gap: 6px; padding: 6px 8px; font-size: 6px; }
}

@media (max-width: 380px) {
  .brand-copy { display: none; }
  .maneuver { grid-template-columns: 36px minmax(0, 1fr) 54px; }
  .maneuver strong { font-size: 13px; }
  .drivebar { grid-template-columns: 104px minmax(0, 1fr); }
  .flow-actions { grid-template-columns: 1fr; }
  .video-layout { grid-template-rows: 74px auto; gap: 7px; align-content: start; overflow: hidden; }
  .video-poster { height: 74px; aspect-ratio: auto; }
  .video-poster figcaption { left: 10px; right: 10px; bottom: 9px; font-size: 7px; }
  .video-copy > span { font-size: 7px; }
  .video-copy h2 { margin-top: 4px; font-size: 19px; }
  .video-copy > p { display: none; }
  .video-policy { gap: 3px; margin-top: 5px; padding: 5px 0 5px 8px; }
  .video-policy b, .video-policy span { font-size: 7px; }
  .video-play { min-height: 44px; margin-top: 5px; padding: 0 10px; font-size: 8px; }
  .media-mode-switch { width: 166px; }
  .media-mode-button { min-height: 44px; padding: 0 4px; font-size: 7px; }
  .media-provider { display: none; }
  .media-layout { grid-template-columns: 1fr; grid-template-rows: 74px auto; gap: 7px; align-content: start; overflow: hidden; }
  .album-art { height: 74px; aspect-ratio: auto; }
  .album-art figcaption { left: 10px; bottom: 8px; font-size: 8px; }
  .now-playing h2 { margin-top: 4px; font-size: 19px; }
  .now-playing p { display: none; }
  .now-playing .media-progress { margin-top: 8px; }
  .now-playing .media-controls { margin-top: 7px; }
  .media-layout > .media-queue { display: none; }
  .podcast-layout { grid-template-columns: 1fr; grid-template-rows: 74px auto; gap: 7px; align-content: start; overflow: hidden; }
  .podcast-art { height: 74px; aspect-ratio: auto; }
  .podcast-art figcaption { left: 10px; right: 10px; bottom: 8px; font-size: 7px; }
  .podcast-art-mark { font-size: 28px; }
  .podcast-copy > span { font-size: 7px; }
  .podcast-copy h2 { margin-top: 4px; font-size: 17px; }
  .podcast-copy > p { display: none; }
  .podcast-copy .media-progress { margin-top: 8px; }
  .podcast-copy .media-controls { margin-top: 7px; }
}