/* The landscape supplies the color. The interface stays quiet and legible. */
:root{--ink:#f3f3e9;--accent:#e0ac6d;color:#f3f3e9;background:#6c95b4}body{color:#f3f3e9}.vignette{background:linear-gradient(90deg,rgba(7,17,22,.36),transparent 53%),linear-gradient(0deg,rgba(6,15,19,.58),transparent 30%),linear-gradient(180deg,rgba(10,26,38,.26),transparent 16%)}body.driving .vignette{background:linear-gradient(0deg,rgba(5,14,18,.48),transparent 26%),linear-gradient(180deg,rgba(7,21,32,.27),transparent 15%)}.brand{color:#f5f6ed;font-size:25px;text-shadow:0 2px 15px #0003}.brand-mark,body.night .brand-mark{background:#f3f4e8}.brand-mark i,body.night .brand-mark i{background:#29433f}.brand-dot{color:#e2b678}.route-label{color:#f0f2edbb;letter-spacing:2.8px}.live-dot{background:#c7d7a1;box-shadow:0 0 8px #b4d78d44}.tools button,body.night .tools button{background:#172b3833;border-color:#ffffff25;color:#eef4f4}.tools button:hover{background:#d1e4e135}.intro{top:24%;max-width:430px}.eyebrow{color:#e4e9e0c4}.eyebrow>span{background:#dae4d4}h1{font-size:clamp(48px,5.3vw,78px);font-weight:400;letter-spacing:-3.6px;text-shadow:0 3px 25px #0e201b33}h1>span{color:#e0b87b}.intro p{color:#f1f4e4bd;font-size:12px;line-height:1.9;text-shadow:0 1px 4px #11282744}.primary,body.night .primary{background:#f1f2e7;color:#233430;font-weight:600;border-radius:5px;box-shadow:0 5px 25px #0b171e22}.primary:hover{background:#fffdf4}.start-note{color:#e2e9d8b0}.key,kbd{border-color:#e0e8d33b;background:#17302f25;color:#e4ecdf}.world-card,body.night .world-card{background:#142c3a42;border:1px solid #ffffff20;color:#e8f0e8;box-shadow:0 5px 20px #0001;backdrop-filter:blur(18px);width:180px}.world-card-bottom{color:#e0e8dec2;border-color:#e0e8de24}.world-card canvas{opacity:.85}.garage-label{color:#e0e6d4a6;letter-spacing:2.1px}.vehicles,body.night .vehicles{background:#12232b80;border:1px solid #ffffff22;backdrop-filter:blur(16px);padding:4px;border-radius:10px;box-shadow:0 8px 30px #0002}.vehicle{color:#d0ddd1;width:98px;height:60px}.vehicle.active{background:#e3e9dc;color:#283d36;box-shadow:none}.vehicle.active:after{background:#e2ba7e;height:2px;bottom:-7px}.vehicle:hover:not(.active){background:#d5e5dd18}.vehicle kbd{color:inherit}.mountain-icon{background:#19303c55;border-color:#d7e6d633;color:#eef3e7}.environment small,.bottom-actions button,.garage-label,body.night .environment small,body.night .bottom-actions button{color:#d5e1d0b0}.environment strong{font-weight:450}.environment strong span{color:#e9eee2}.circle-question{border-color:#d8e4ce99}.divider{background:#d9e6d12b}.speed-value>span{font-weight:400;color:#f9fbf1;text-shadow:0 3px 20px #0004}.speed-value>small{color:#dbe6d1b5}.dial-track{stroke:#edf5dd36}.dial-tick{stroke:#e2efd282}#speed-arc{stroke:#e8e7c5}.gear{color:#dbe8d9;border-color:#d4e4cc66}.rpm{position:absolute;bottom:6px;right:0;font-size:6px;letter-spacing:.5px;color:#d0decaa3}.distance{border-color:#d8e8ce38}.distance span{color:#dbe8d0b0}.distance strong{color:#f0f5e9}#cruise{color:#e6eddf}.toggle{background:#d4e3ca44}#cruise[aria-pressed=true] .toggle{background:#90b58e}.in-drive-controls{color:#e5eddebf;bottom:145px}.drive-status{color:#e3ead8b0;font-size:8px}.toast{background:#152b34df;color:#f3f5eb;border:1px solid #d2e3cd33;backdrop-filter:blur(14px)}dialog,body.night dialog{--ink:#e9efe7;background:#142832f2;color:#e9efe7;border-color:#cfdfd22b;max-height:90vh;overflow:auto}dialog::backdrop{background:#08131c80;backdrop-filter:blur(9px)}dialog p{color:#bfcec3}dialog .eyebrow{color:#aebfb4}dialog h2{font-size:28px}.option-row button{border-color:#b8d1bf33;color:#c9d7ce}.option-row button.selected{background:#e0e9d8;color:#1c342d;border-color:#e0e9d8}dialog label{color:#9db4a9}.setting-footer{border-color:#c1d6c329}.setting-footer>span{color:#9fb6a9}.close{color:#cfdfd2}.control-list>div{border-color:#b8d2bd26}#volume{width:100%;accent-color:#c2d8b8;height:4px}#quality{width:100%;background:#1c3641;color:#dfeadf;border:1px solid #b9d0bc33;border-radius:7px;padding:11px;font:11px 'DM Sans',sans-serif}.touch-controls button{background:#132b3a80;border-color:#c5d9cb33;color:#e1ecdd}.touch-controls button:active{background:#a1bda078}.intro.departed{visibility:hidden;transition:opacity .5s,transform .5s,visibility .5s}body.night .vignette{background:linear-gradient(0deg,#07121a88,transparent 26%)}body.night .dial-track{stroke:#d0e6d433}body.night #speed-arc{stroke:#e1edcf}
@media(max-width:700px){.intro{top:23%;left:25px;max-width:260px}h1{font-size:53px;letter-spacing:-2.5px}.intro p{font-size:10px;max-width:225px}.world-card,body.night .world-card{width:125px}.vehicle{width:67px;height:58px}.garage-label{font-size:6px;letter-spacing:1.2px}.in-drive-controls{bottom:auto}.rpm{font-size:5px;right:-2px;bottom:3px}.vignette{background:linear-gradient(90deg,#0c222b66,transparent 95%),linear-gradient(0deg,#07151d88,transparent 30%)}.dashboard{bottom:22px}.intro .primary{padding:13px 17px}.intro .eyebrow{font-size:6px}.world-card-bottom{font-size:6px}}

#dev-diagnostics {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  padding: 7px 9px;
  border-radius: 5px;
  background: #111c23e8;
  color: #f3f5eb;
  font: 11px/1.45 ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
#dev-diagnostics:empty { display: none; }
@media (max-width: 700px) {
  #dev-diagnostics {
    top: 108px;
    left: 12px;
    max-width: calc(100vw - 150px);
    transform: none;
    font-size: 10px;
    white-space: pre-wrap;
  }
}

#grade-indicator {
  position: absolute;
  right: 30px;
  bottom: 25px;
  padding: 2px 4px;
  border-radius: 3px;
  background: #142832d9;
  color: #f3f3e9;
  font: 9px/1.2 ui-monospace, monospace;
  white-space: nowrap;
}
dialog .setting-checkbox {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  letter-spacing: 0;
  font-size: 11px;
}
.setting-checkbox input { margin: 0; accent-color: #c2d8b8; }
.charge-option:has(input:disabled) { color: #aabbb9; }
.charge-option span { margin-left: auto; font-size: 10px; color: #aabbb9; }
.charge-option:has(input:enabled) span { display: none; }
.steering-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px 12px;
  margin-top: 23px;
}
dialog .steering-setting label { margin: 0; }
.steering-setting output { font-size: 11px; font-variant-numeric: tabular-nums; color: #c2d8b8; }
#steering-sensitivity { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: #c2d8b8; }
.steering-range-labels {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  color: #9db4a9;
  font-size: 10px;
}
.charge-hud {
  position: absolute;
  top: 135px;
  left: 43px;
  width: max-content;
  max-width: calc(100vw - 44px);
  padding: 8px 10px;
  border: 1px solid #dce8db30;
  border-radius: 8px;
  background: #122d36bf;
  color: #e7f7ed;
  backdrop-filter: blur(12px);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.charge-readout { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.charge-readout svg { width: 14px; height: 14px; color: #99e5c9; }
#charge-meter { display: block; width: 100%; height: 6px; margin: 4px 0 5px; }
#charge-meter::-webkit-meter-bar { background: #c3dfdc33; border: 0; }
#charge-meter::-webkit-meter-optimum-value { background: #80dcb6; }
#charge-meter::-moz-meter-bar { background: #80dcb6; }
.charge-low #charge-meter::-webkit-meter-optimum-value { background: #f1b97e; }
.charge-low #charge-meter::-moz-meter-bar { background: #f1b97e; }
.charge-station-distance { color: #d8eae3; font-size: 10px; }
#charge-button {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 8px;
  border-radius: 5px;
  background: #b5e9d6;
  color: #143933;
  font-weight: 600;
}
#charge-button:disabled { opacity: .65; }
@media (max-width: 700px) {
  #grade-indicator { right: 18px; bottom: 21px; padding-inline: 3px; font-size: 8px; }
  .drive-status.traffic-active:not([hidden]) { display: block !important; left: 22px; top: 106px; }
  .charge-hud { left: 22px; top: 125px; max-width: min(185px, calc(100vw - 162px)); }
  body:has(#dev-diagnostics) .drive-status.traffic-active { top: 226px; }
  body:has(#dev-diagnostics) .charge-hud { top: 245px; }
}