:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#edf1ee;background:#101b27;color-scheme:dark;--lime:#d9f78d;--muted:#9dafbb;--panel:#172635}*{box-sizing:border-box}html,body,#game{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{touch-action:none;-webkit-user-select:none;user-select:none}button,select,input{font:inherit}button,select{border:1px solid #ffffff24;background:#ffffff0b;color:inherit;border-radius:9px;min-height:38px;padding:7px 12px;cursor:pointer}button:active{transform:translateY(1px);background:#ffffff24}button:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:3px}select option{background:var(--panel)}button:disabled{opacity:.5;cursor:wait}canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}#toolbar{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:max(9px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 9px max(14px,env(safe-area-inset-left));background:linear-gradient(#101b27f0,#101b27b0,transparent)}.brand{display:flex;align-items:center;gap:8px;margin-right:auto;white-space:nowrap}.brand strong{letter-spacing:2px;font-size:13px}.brand-mark{background:var(--lime);color:#172324;width:27px;height:27px;display:grid;place-items:center;border-radius:8px;font-size:23px;font-weight:700}#telemetry{position:absolute;left:max(16px,env(safe-area-inset-left));top:66px;display:flex;align-items:baseline;gap:7px;pointer-events:none;font-variant-numeric:tabular-nums}#telemetry>span:not(.sensor){font-size:20px;font-weight:650}#telemetry small{font-size:10px;color:var(--muted)}.divider{width:1px;height:16px;background:#ffffff20;margin:0 5px}.sensor{color:var(--muted);font-size:10px;margin-left:15px}.sensor.ready{color:var(--lime)}#drive-hints{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));display:flex;justify-content:space-between;pointer-events:none;color:#ffffff55;letter-spacing:2px;font-size:16px;font-weight:700}#drive-hints small{font-size:10px;font-weight:400;letter-spacing:1px}#drive-hints .active{color:var(--lime);text-shadow:0 0 24px #d9f78d66}#input-meter{position:absolute;bottom:max(23px,env(safe-area-inset-bottom));left:calc(50% - 60px);width:120px;height:4px;border-radius:3px;background:#ffffff20;pointer-events:none}#input-meter i{position:absolute;height:10px;width:1px;background:#ffffff60;left:50%;top:-3px}#tilt-dot{position:absolute;left:60px;top:-3px;width:10px;height:10px;background:var(--lime);border-radius:50%;transform:translateX(-50%)}.shade{position:absolute;z-index:5;inset:0;background:#0b1525a8;backdrop-filter:blur(7px);display:grid;place-items:center;padding:15px}.card{text-align:center;width:min(440px,100%);padding:28px 34px;border:1px solid #ffffff20;border-radius:22px;background:linear-gradient(145deg,#213243f5,#101f2ef5);box-shadow:0 22px 100px #0005}.eyebrow{font-size:10px;color:var(--lime);letter-spacing:2px;font-weight:700;margin:0 0 12px}h1{font-size:40px;letter-spacing:-1.6px;font-weight:650;margin:0 0 14px}h2{font-size:26px;margin:0 0 13px;letter-spacing:-.6px}.card p{line-height:1.5;color:#b8c6cd;margin:12px 0}.instructions{display:flex;justify-content:center;gap:20px;margin:22px 0;color:#aebfc6;font-size:12px}.instructions b{display:block;color:#f3f7f2;font-size:10px;letter-spacing:1.8px;margin-bottom:5px}.primary{background:var(--lime);color:#1a2a24;border:0;font-weight:750;min-height:44px}.card>.primary{width:100%}.primary:active{background:#bdd875}.fine,.card p.fine{font-size:11px;color:#93a6b3;line-height:1.5}.desktop{margin-bottom:0!important;font-size:10px!important}.compact{max-width:360px}.actions{display:flex;gap:10px}.actions button{flex:1}.link-button{border:0;font-size:11px;margin-top:14px;color:#a6bbc6}#toast{position:absolute;z-index:20;left:50%;bottom:66px;transform:translateX(-50%);background:#253747ed;padding:10px 16px;border:1px solid #ffffff25;border-radius:10px;font-size:12px;max-width:90%;text-align:center;opacity:0;pointer-events:none;transition:opacity .15s}#toast.visible{opacity:1}.hidden{display:none!important}dialog{background:var(--panel);color:inherit;border:1px solid #ffffff30;border-radius:18px;padding:22px;max-width:390px;width:calc(100% - 30px);max-height:90dvh;overflow:auto;touch-action:pan-y;box-shadow:0 25px 90px #0008}dialog::backdrop{background:#07121caa;backdrop-filter:blur(5px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.dialog-heading h2{font-size:22px;margin:0}.dialog-heading button{min-height:30px;border:0}dialog label{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0;font-size:13px}dialog input[type=range]{width:140px;accent-color:var(--lime)}dialog .check{justify-content:flex-start;gap:10px}input[type=checkbox]{accent-color:var(--lime);width:17px;height:17px}dialog>.primary,dialog>#enable-tilt{width:100%;margin-top:10px}dialog summary{font-size:11px;color:#9fb1bc;cursor:pointer}a{color:var(--lime)}#portrait{display:none;position:absolute;z-index:30;inset:0;background:#101b27;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px}#portrait>span{font-size:60px;color:var(--lime)}#portrait p{color:var(--muted)}@media(orientation:portrait) and (pointer:coarse){#portrait{display:flex}}@media(max-height:500px){.card{padding:18px 25px}h1{font-size:32px;margin-bottom:8px}.card p{margin:9px 0}.instructions{margin:14px 0}.eyebrow{margin-bottom:8px}.desktop{display:none}#toolbar{gap:5px;padding-top:max(6px,env(safe-area-inset-top))}#toolbar button,#toolbar select{min-height:32px;padding:5px 9px;font-size:11px}#telemetry{top:51px}}@media(max-width:650px){.brand strong{font-size:11px;letter-spacing:1px}#toolbar{gap:4px}#toolbar button,#toolbar select{padding:6px;font-size:11px}.brand-mark{width:23px;height:23px}#drive-hints small{display:none}}

/* A camera preview is available before a ride, including embedded ride modes. */
#map-overview{position:absolute;z-index:6;right:max(14px,env(safe-area-inset-right));top:max(66px,calc(env(safe-area-inset-top) + 58px));min-height:44px;padding:8px 13px;background:#172635ed;border-color:#d9f78d66;font-size:12px;touch-action:manipulation}
#map-overview[hidden]{display:none!important}
.map-overview #welcome{visibility:hidden;pointer-events:none}
.map-overview #drive-hints,.map-overview #input-meter,.map-overview #throttle-status{visibility:hidden}
/* Keep riding cues legible against the brighter near ridge. */
#drive-hints{color:#f1f7f4cc;text-shadow:0 1px 3px #102838,0 0 10px #10283888}#input-meter{background:#17374766}#tilt-dot{box-shadow:0 0 0 1px #16324366}

#times-list{padding-left:28px;margin:18px 0;font-variant-numeric:tabular-nums}#times-list li{padding:8px 5px;border-bottom:1px solid #ffffff15}#times-list li:first-child{color:var(--lime);font-weight:700}#best{font-size:14px}#records p{font-size:13px;line-height:1.5}#records .fine{font-size:11px;color:var(--muted)}

#celebration{position:absolute;z-index:9;inset:0;overflow:hidden;pointer-events:none}#celebration i{position:absolute;left:50%;top:42%;width:7px;height:11px;border-radius:2px;animation:best-confetti 900ms ease-out var(--delay) both}.new-best .card{border-color:#d9f78d99;animation:best-pop 420ms ease-out}.new-best h2{color:var(--lime)}
@keyframes best-confetti{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 180px)) rotate(var(--r))}}
@keyframes best-pop{0%{transform:scale(.92);box-shadow:0 0 0 0 #d9f78d55}60%{transform:scale(1.025);box-shadow:0 0 0 18px #d9f78d00}100%{transform:scale(1);box-shadow:0 22px 100px #0005}}
@media(prefers-reduced-motion:reduce){#celebration i,.new-best .card{animation:none}}

#times-list li{display:flex;align-items:center;justify-content:space-between;gap:18px}#times-list button{min-height:32px;padding:5px 12px;font-size:12px}
#community{max-width:520px}#community p{font-size:13px;line-height:1.5}#community .fine{font-size:11px;color:var(--muted)}#community-list{padding-left:24px;font-variant-numeric:tabular-nums}#community-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #ffffff20}#community-list button{min-height:32px;font-size:12px}#community input{min-width:0;width:58%;padding:8px;border:1px solid #ffffff30;border-radius:6px;background:#10202d;color:inherit;user-select:text;touch-action:auto}#community-status{min-height:2.5em;color:var(--lime)}#community summary{margin:16px 0 10px}#records>#community-open{width:100%}


#internet-status{position:absolute;top:83px;left:max(16px,env(safe-area-inset-left));right:16px;color:var(--lime);font-size:11px;pointer-events:none;z-index:2}#internet-status:empty,#result-clock:empty{display:none}@media(max-height:500px){#internet-status{top:78px}}

#throttle-status{pointer-events:none;position:absolute;z-index:3;left:50%;transform:translateX(-50%);white-space:nowrap;top:100px;padding:7px 12px;border:1px solid #d9f78d55;border-radius:9px;background:#101b27dc;color:#d9f78d;font-size:12px;pointer-events:none}#throttle-status.slipping{color:#ffd08e;border-color:#ffd08e}#experiment-controls{border:1px solid #d9f78d44;border-radius:12px;padding:12px;margin:12px 0}#experiment-controls input{width:76px;min-width:0}#experiment-controls label{font-size:12px;gap:8px}#options>label select{max-width:205px}@media(max-height:500px){#throttle-status{top:82px;font-size:11px}}

.challenge-link{color:inherit;text-decoration:none;border:1px solid #ffffff24;border-radius:9px;padding:8px 10px;font-size:12px}.challenge-ride #toolbar>*:not(.brand):not(#zero):not(.mp-ride-control),.challenge-ride #result,.challenge-ride #celebration{display:none!important}.studio-test .challenge-link{display:none}@media(max-height:500px){.challenge-link{font-size:11px;padding:6px}}
#maps {
  max-width: 620px;
  padding: 0 16px 12px;
  overscroll-behavior: contain;
}
#maps [hidden] { display: none !important; }
#maps-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 225px;
}
#current-track {
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#welcome-maps { margin-left: 4px; }
.studio-test #maps-open, .studio-test #welcome-maps,
.challenge-ride #welcome-maps { display: none; }
#maps .maps-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 0 7px;
  background: var(--panel);
}
#maps .dialog-heading { gap: 6px; margin-bottom: 6px; }
#maps .dialog-heading h2 { margin-right: auto; }
#maps .dialog-heading button { min-width: 44px; min-height: 44px; }
#maps .map-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: #101b27; }
#maps .map-tabs button { flex: 1 1 0; min-width: 0; padding-inline: 4px; border: 0; background: transparent; }
#maps .map-tabs button[aria-selected="true"] { background: #344756; font-weight: 700; }
#maps button { min-height: 44px; }
#maps .map-list { margin: 0; padding: 0; list-style: none; }
#maps .map-card { min-width: 0; padding: 4px 0; border-bottom: 1px solid #ffffff18; }
#maps .map-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#maps .map-description { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
#maps .map-description small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
#maps .map-ride { flex: 0 0 auto; min-width: 62px; padding: 5px 10px; font-size: 13px; }
#maps .map-panel-actions, #maps .map-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
#maps .map-tools summary, #maps a {
  color: #c2d4df;
  font-size: 13px;
}
#maps .map-tools summary { padding: 12px 0; }
#maps .map-tools[open] { padding-bottom: 7px; }
#maps .map-panel-actions a, #maps .studio-link { display: inline-flex; align-items: center; min-height: 44px; }
#maps .map-edit { margin-top: 8px; }
#maps .map-edit p { flex-basis: 100%; margin: 0; }
#maps .map-edit input {
  width: 100%;
  padding: 9px;
  border: 1px solid #ffffff40;
  border-radius: 7px;
  background: #101b27;
  color: inherit;
  font-size: 16px;
  user-select: text;
  touch-action: auto;
}
#maps-feedback, #maps-status { color: var(--lime); font-size: 13px; }
#maps-feedback { margin: 7px 0 0; }
#maps-status:empty { display: none; }
#my-maps-empty { color: var(--muted); font-size: 13px; }
@media (min-width: 560px) {
  #standard-maps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 18px; }
}
@media (max-width: 730px) {
  .brand strong { display: none; }
  #toolbar { gap: 4px; }
  #toolbar button { padding: 6px; font-size: 11px; }
}
@media (max-width: 435px) {
  #current-track { display: none; }
}
.challenge-link { position: relative; }
#friends-unread {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff515d;
  box-shadow: 0 0 0 1px #101b27;
  pointer-events: none;
}
.settings-version { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.mp-ride-control[hidden] { display: none !important; }
.challenge-ride #toolbar { z-index: 31; }
.challenge-ride #mp-home { order: -1; }
#mp-display #mp-scale { width: 100%; margin-bottom: 8px; }
#mp-display .primary { margin-top: 8px; }