:root{--background:#0a0a0b;--foreground:#f5f5f6;--muted:#8e8e99;--card:#0e0e108c;--hairline:#ffffff14;--bright:#fff;--dim:#3f3f4a;--font:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}html,body,#app{height:100%}body{background:var(--background);color:var(--foreground);font-family:var(--font);overflow:hidden}#app{position:relative}.stage,.scene-canvas{touch-action:none;display:block;position:absolute;inset:0}.scene-labels{pointer-events:none;position:absolute;inset:0}.street-label{letter-spacing:.14em;text-transform:uppercase;color:#ffffff61;text-shadow:0 1px 8px #000000e6;white-space:nowrap;opacity:0;font-size:9.5px;font-weight:500;transition:opacity .5s}.street-label.is-visible{opacity:1}.overlay{z-index:10;pointer-events:none;position:absolute;inset:0}.overlay>*{pointer-events:auto}.muted{color:var(--muted)}.pill{border:1px solid var(--hairline);background:var(--card);color:var(--foreground);font-family:var(--font);-webkit-backdrop-filter:blur(12px);cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:8px 15px;font-size:12.5px;font-weight:500;transition:border-color .2s,background .2s;display:inline-flex}.pill:hover{border-color:#ffffff59}.topbar{justify-content:space-between;align-items:flex-start;padding:18px 20px;display:flex;position:absolute;top:0;left:0;right:0}.brand{letter-spacing:-.02em;font-size:19px;font-weight:900}.brand-dot{color:var(--muted)}.app-name{letter-spacing:.14em;text-transform:uppercase;font-size:12px}.route-head{pointer-events:none;max-width:min(430px,100vw - 40px);position:absolute;top:84px;left:20px}.route-name{letter-spacing:-.01em;text-shadow:0 2px 18px #000c;font-size:clamp(19px,3.4vw,26px);font-weight:800}.demo-note{margin-top:6px;font-size:12.5px;line-height:1.5}.gpx-help-link{color:var(--muted);font-family:var(--font);text-underline-offset:3px;cursor:pointer;pointer-events:auto;background:0 0;border:none;margin-top:8px;padding:0;font-size:12px;text-decoration:underline;transition:color .2s}.gpx-help-link:hover{color:var(--foreground)}.help-title{margin-bottom:4px;padding-right:36px;font-size:17px;font-weight:800}.help-intro{margin-bottom:12px;font-size:12.5px}.help-card{border:1px solid var(--hairline);border-radius:12px;margin-bottom:8px;padding:10px 12px}.help-card h3{margin-bottom:2px;font-size:13.5px;font-weight:700}.help-card p{font-size:12.5px;line-height:1.55}.help-outro{margin-top:10px;font-size:11.5px;line-height:1.55}.toast{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#161619e6;border:1px solid #ffffff40;border-radius:12px;padding:9px 16px;font-size:13px;position:absolute;top:20px;left:50%;transform:translate(-50%)}.stats{flex-wrap:wrap;gap:8px;max-width:calc(100vw - 40px);display:flex;position:absolute;bottom:88px;left:20px}.stat{border:1px solid var(--hairline);background:var(--card);-webkit-backdrop-filter:blur(12px);border-radius:14px;flex-direction:column;gap:1px;min-width:86px;padding:9px 14px;display:flex}.stat-label{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:10px}.stat-value{font-variant-numeric:tabular-nums;font-size:15px;font-weight:700}.controls{border:1px solid var(--hairline);background:var(--card);-webkit-backdrop-filter:blur(14px);border-radius:18px;align-items:center;gap:10px;width:min(560px,100vw - 32px);padding:10px 14px;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.play-btn{flex-shrink:0;justify-content:center;width:38px;height:38px;padding:0;font-size:13px}.mode-btn{white-space:nowrap;flex-shrink:0}.scrub{appearance:none;opacity:.9;cursor:pointer;background:linear-gradient(90deg,#22c55e,#84cc16 35%,#eab308 60%,#f97316 80%,#dc2626);border-radius:99px;flex:1;height:3px}.progress-km{text-align:right;font-variant-numeric:tabular-nums;min-width:58px;color:var(--muted);flex-shrink:0;font-size:12px;font-weight:600}.scrub::-webkit-slider-thumb{appearance:none;background:#fff;border:none;border-radius:99px;width:14px;height:14px;box-shadow:0 0 8px #ffffff8c}.scrub::-moz-range-thumb{background:#fff;border:none;border-radius:99px;width:14px;height:14px;box-shadow:0 0 8px #ffffff8c}.legend{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);pointer-events:none;align-items:center;gap:8px;font-size:9.5px;display:flex;position:absolute;bottom:62px;left:20px}.legend-bar{background:linear-gradient(90deg, var(--dim), var(--bright));border-radius:99px;width:68px;height:3px}.dropzone{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;background:#ffffff0d;border:2px dashed #ffffff73;border-radius:22px;place-items:center;font-size:18px;font-weight:700;display:grid;position:absolute;inset:12px}.osm-credit{opacity:.75;pointer-events:none;font-size:9.5px;position:absolute;bottom:92px;right:20px}.topbar-actions{gap:8px;display:flex}.majors-wrap{position:relative}.majors-menu{border:1px solid var(--hairline);-webkit-backdrop-filter:blur(14px);z-index:30;background:#0e0e10eb;border-radius:16px;flex-direction:column;gap:2px;min-width:220px;padding:6px;display:flex;position:absolute;top:calc(100% + 8px);right:0}.majors-item{color:var(--foreground);font-family:var(--font);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:10px;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 12px;font-size:13.5px;font-weight:600;transition:background .15s;display:flex}.majors-item:hover{background:#ffffff12}.majors-sub{font-size:10.5px;font-weight:400}.modal{z-index:50;-webkit-backdrop-filter:blur(6px);background:#000000a6;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.modal-card{border:1px solid var(--hairline);background:#101013;border-radius:20px;width:min(400px,100%);max-height:calc(100dvh - 32px);padding:16px;position:relative;overflow-y:auto}.modal-close{z-index:1;padding:5px 9px;font-size:12px;position:absolute;top:10px;right:10px}.poster-frame{border:1px solid var(--hairline);border-radius:12px;overflow:hidden}.poster-frame canvas{width:100%;height:auto;display:block}.modal-actions{gap:10px;margin-top:14px;display:flex}.modal-actions .pill{flex:1;justify-content:center}.pill-primary{color:#0a0a0b;background:#fff;border-color:#0000;font-weight:700}.pill-primary:hover{opacity:.88;border-color:#0000}.modal-note{text-align:center;margin-top:10px;font-size:11.5px;line-height:1.5}.no-webgl{text-align:center;height:100%;color:var(--muted);place-items:center;padding:24px;line-height:1.6;display:grid}.boot{letter-spacing:-.02em;place-items:center;font-size:30px;font-weight:900;animation:1.8s ease-in-out infinite pulse;display:grid;position:absolute;inset:0}.boot span{color:var(--muted)}.firstrun{pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;bottom:104px;left:50%;transform:translate(-50%)}.fly-cta{pointer-events:auto;color:#0a0a0b;font-family:var(--font);cursor:pointer;background:#fff;border:none;border-radius:999px;padding:13px 26px;font-size:15px;font-weight:700;animation:2.6s ease-in-out infinite breathe}.fly-cta:hover{animation-play-state:paused;box-shadow:0 0 36px #fff6}.gesture-hint{letter-spacing:.04em;text-shadow:0 1px 8px #000000e6;font-size:11px;transition:opacity 1.2s}.gesture-hint.is-faded{opacity:0}@keyframes breathe{0%,to{transform:scale(1);box-shadow:0 0 22px #ffffff2e}50%{transform:scale(1.04);box-shadow:0 0 34px #ffffff57}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}@media (width<=640px){.topbar{padding:12px 14px}.brand{font-size:16px}.app-name{font-size:10px}.pill{padding:6px 11px;font-size:11.5px}.route-head{max-width:none;top:62px;left:14px;right:14px}.route-name{font-size:18px}.demo-note{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:11.5px;display:-webkit-box;overflow:hidden}.legend{display:none}.stats{left:10px;right:10px;bottom:calc(76px + env(safe-area-inset-bottom));scrollbar-width:none;flex-wrap:nowrap;max-width:none;overflow-x:auto}.stats::-webkit-scrollbar{display:none}.stat{min-width:78px;padding:7px 11px}.stat-value{font-size:13.5px}.osm-credit{right:12px;bottom:calc(140px + env(safe-area-inset-bottom));font-size:8.5px}.controls{width:calc(100vw - 20px);bottom:calc(10px + env(safe-area-inset-bottom));gap:8px;padding:8px 10px}.play-btn{width:34px;height:34px}.progress-km{min-width:46px;font-size:11px}.firstrun{bottom:calc(150px + env(safe-area-inset-bottom))}.fly-cta{padding:12px 22px;font-size:14px}.modal{place-items:end stretch;padding:0}.modal-card{width:100%;padding-bottom:calc(16px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0}.majors-menu{top:auto;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));min-width:0;position:fixed}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}