:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#f4f5f7;--surface:#fff;--surface-2:#f0f1f4;--text:#16181d;--text-muted:#5f6672;--border:#dcdfe5;--grid:#16181d12;--accent:#e8521b;--accent-strong:#a8350a;--accent-btn:#c9410e;--accent-btn-hover:#a8350a;--accent-fill:#e8521b29;--on-accent:#fff;--shadow:0 1px 2px #0000000f, 0 4px 16px #0000000f;--radius:10px;color:var(--text);background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.4}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#0f1115;--surface:#171a20;--surface-2:#1f232b;--text:#e9ebef;--text-muted:#9aa1ad;--border:#2b3039;--grid:#e9ebef12;--accent:#ff6a33;--accent-strong:#ff8456;--accent-btn:#ff6a33;--accent-btn-hover:#ff8456;--on-accent:#16181d;--accent-fill:#ff6a332e;--shadow:0 1px 2px #0006, 0 6px 20px #00000059}}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);grid-template-rows:auto 1fr;display:grid}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}[hidden]{display:none!important}.topbar{background:var(--surface);border-bottom:1px solid var(--border);align-items:center;gap:16px;min-width:0;padding:10px 16px;display:flex}.brand{letter-spacing:-.01em;color:var(--text);flex-shrink:0;align-items:center;gap:8px;font-size:17px;font-weight:700;display:flex}.brand svg{width:24px;height:24px;color:var(--accent)}.route-title{border-left:1px solid var(--border);align-items:baseline;gap:10px;min-width:0;padding-left:16px;display:flex}.route-title strong{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.route-title span{color:var(--text-muted);white-space:nowrap;font-size:13px}.actions{flex-shrink:0;align-items:center;gap:8px;margin-left:auto;display:flex}.btn{border:1px solid var(--border);background:var(--surface);height:36px;color:var(--text);font:inherit;cursor:pointer;white-space:nowrap;border-radius:8px;align-items:center;gap:6px;padding:0 14px;font-weight:500;display:inline-flex}.btn:hover{background:var(--surface-2)}.btn:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn.primary{background:var(--accent-btn);border-color:var(--accent-btn);color:var(--on-accent)}.btn.primary:hover{background:var(--accent-btn-hover);border-color:var(--accent-btn-hover)}.btn svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.segmented{border:1px solid var(--border);background:var(--surface-2);border-radius:8px;gap:2px;height:36px;padding:3px;display:inline-flex}.segmented button{min-width:34px;color:var(--text-muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:5px;padding:0 8px;font-size:13px;font-weight:600}.segmented button:hover{color:var(--text)}.segmented button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 2px #0000001f}.segmented button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}select{border:1px solid var(--border);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center / 12px;height:36px;color:var(--text);font:inherit;appearance:none;cursor:pointer;border-radius:8px;padding:0 32px 0 12px}.layout{grid-template:"map stats"minmax(0,1fr)"profile stats"210px/minmax(0,1fr) 300px;min-height:0;display:grid;position:relative}.map-wrap{grid-area:map;min-height:0;position:relative}#map{background:var(--surface-2);position:absolute;inset:0}.empty{text-align:center;background:var(--surface);border:1px solid var(--border);width:min(420px,100% - 32px);box-shadow:var(--shadow);border-radius:14px;padding:28px;position:absolute;top:50%;left:50%;translate:-50% -50%}.empty svg{fill:none;width:56px;height:56px;stroke:var(--accent);stroke-width:3px;stroke-linecap:round}.empty h1{letter-spacing:-.01em;margin:8px 0;font-size:20px;line-height:1.25}.empty p{color:var(--text-muted);margin:0 0 16px}.empty .lead{color:var(--text);font-size:14px}.empty .noscript{color:var(--accent);margin:16px 0 0}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}.stats{background:var(--surface);border-left:1px solid var(--border);grid-area:stats;grid-template-columns:1fr 1fr;align-content:start;display:grid;overflow-y:auto}.stat{border-bottom:1px solid var(--border);flex-direction:column;gap:2px;min-width:0;padding:14px 16px;display:flex}.stat:not(.hero):nth-child(2n){border-right:1px solid var(--border)}.stat.hero{grid-column:1/-1;padding:18px 16px}.stat .label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-weight:500}.stat .value{font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-size:20px;font-weight:650}.stat.hero .value{color:var(--accent);font-size:34px}.stat .sub{color:var(--text-muted);font-variant-numeric:tabular-nums;min-height:1.4em;font-size:12.5px}body:not(.has-route) .stat .value{color:var(--text-muted)}.profile{background:var(--surface);border-top:1px solid var(--border);flex-direction:column;grid-area:profile;min-height:0;padding:10px 16px 8px;display:flex}.profile-head{justify-content:space-between;align-items:center;gap:12px;min-height:28px;margin-bottom:4px;display:flex}.profile h2{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin:0;font-size:12px;font-weight:500}.badge{background:var(--accent-fill);color:var(--accent-strong);letter-spacing:.02em;text-transform:none;border-radius:999px;margin-left:6px;padding:2px 7px;font-size:11px}.btn.small{height:28px;padding:0 10px;font-size:13px}.btn:disabled{opacity:.5;cursor:default}.btn[aria-busy=true]{cursor:progress}.profile-canvas{flex:1;min-height:0;position:relative}.profile-canvas canvas{position:absolute;inset:0}.profile-empty{color:var(--text-muted);place-items:center;margin:0;font-size:14px;display:grid;position:absolute;inset:0}.map-dot{border:3px solid #fff;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 4px #00000073}.start-dot{background:#1fa45b}.end-dot{background:#d7263d}.hover-dot{pointer-events:none;background:#ff5a1f;width:16px;height:16px}.map-modes{z-index:2;pointer-events:none;flex-wrap:wrap;gap:8px;display:flex;position:absolute;top:12px;left:12px;right:60px}.flyover-start{pointer-events:auto;border:1px solid var(--border);background:color-mix(in srgb, var(--surface) 88%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);height:40px;box-shadow:var(--shadow);color:var(--text);font:inherit;cursor:pointer;border-radius:999px;align-items:center;gap:8px;padding:0 16px 0 12px;font-weight:600;display:inline-flex}.flyover-start:hover{background:var(--surface)}.flyover-start svg{fill:none;width:20px;height:20px;stroke:var(--accent);stroke-width:2px;stroke-linejoin:round;stroke-linecap:round}.flyover-panel{z-index:2;border:1px solid var(--border);background:color-mix(in srgb, var(--surface) 84%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);width:min(760px,100% - 24px);box-shadow:var(--shadow);border-radius:14px;padding:12px 14px 10px;position:absolute;bottom:40px;left:50%;translate:-50%}.flyover-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 10px;display:grid}.flyover-stats dt{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:11px;font-weight:500}.flyover-stats dd{font-variant-numeric:tabular-nums;white-space:nowrap;margin:0;font-size:19px;font-weight:650}.flyover-controls{align-items:center;gap:10px;display:flex}.fo-btn{border:1px solid var(--border);background:var(--surface);width:36px;height:36px;color:var(--text);cursor:pointer;border-radius:50%;flex-shrink:0;place-items:center;display:grid}.fo-btn svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;width:16px;height:16px}.fo-btn.fo-play{border-color:var(--accent-btn);background:var(--accent-btn);width:42px;height:42px;color:var(--on-accent)}.fo-btn.fo-play:hover{background:var(--accent-btn-hover)}.fo-btn.fo-play svg{fill:currentColor;stroke:none;width:18px;height:18px}.fo-play .i-pause,.fo-play.playing .i-play{display:none}.fo-play.playing .i-pause{display:block}.fo-seek{min-width:60px;accent-color:var(--accent);cursor:pointer;flex:1}.fo-distance{color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px}.fo-duration select{height:32px;font-size:13px}.fo-hint{color:var(--text-muted);text-align:center;margin:8px 0 0;font-size:11px}@media (hover:none){.fo-hint{display:none}}.rider-dot{pointer-events:none;background:#ff5a1f;width:20px;height:20px;position:relative}.rider-dot:after{content:"";border:2px solid #ff5a1f;border-radius:50%;animation:1.6s ease-out infinite rider-pulse;position:absolute;inset:-3px}@keyframes rider-pulse{0%{opacity:.9;scale:1}to{opacity:0;scale:2.6}}@media (prefers-reduced-motion:reduce){.rider-dot:after{animation:none}}.diorama{z-index:30;background:var(--bg);position:fixed;inset:0;overflow:hidden}.diorama-view{position:absolute;inset:0}.diorama-view canvas{touch-action:none;display:block}.diorama-title{border:1px solid var(--border);background:color-mix(in srgb, var(--surface) 84%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);max-width:calc(100% - 96px);box-shadow:var(--shadow);pointer-events:none;border-radius:12px;flex-direction:column;gap:2px;padding:10px 14px;display:flex;position:absolute;top:16px;left:16px}.diorama-title strong{white-space:nowrap;text-overflow:ellipsis;font-size:16px;overflow:hidden}.diorama-title span{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:13px}.diorama-label{background:color-mix(in srgb, var(--surface) 88%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;will-change:transform;border-radius:8px;flex-direction:column;align-items:center;padding:5px 10px;display:flex;position:absolute;top:0;left:0}.diorama-label:after{content:"";background:inherit;width:10px;height:10px;position:absolute;bottom:-5px;left:50%;translate:-50%;rotate:45deg}.diorama-label strong{font-size:14px}.diorama-label span{color:var(--text-muted);font-size:11px}.diorama-close{z-index:2;width:40px;height:40px;box-shadow:var(--shadow);position:absolute;top:16px;right:16px}.diorama-loading{z-index:1;color:var(--text-muted);background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:absolute;inset:0}.diorama-loading p{margin:0}.diorama-loading.soft{background:color-mix(in srgb, var(--bg) 55%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--text)}.diorama-loading .progress{background:var(--border);border-radius:2px;width:min(240px,60%);height:4px;overflow:hidden}.diorama-loading .progress div{background:var(--accent);width:0;height:100%;transition:width .2s}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:36px;height:36px;animation:.9s linear infinite spin}@keyframes spin{to{rotate:360deg}}.diorama-toolbar{z-index:2;border:1px solid var(--border);background:color-mix(in srgb, var(--surface) 84%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);width:max-content;max-width:calc(100% - 24px);box-shadow:var(--shadow);border-radius:14px;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 16px;padding:10px 14px;display:flex;position:absolute;bottom:40px;left:50%;translate:-50%}.diorama-field{color:var(--text-muted);align-items:center;gap:8px;font-size:13px;display:flex}.diorama-field select{height:32px;font-size:13px}.diorama-color{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:8px;width:32px;height:32px;padding:3px}.diorama-color::-webkit-color-swatch-wrapper{padding:0}.diorama-color::-webkit-color-swatch{border:none;border-radius:5px}.diorama-color::-moz-color-swatch{border:none;border-radius:5px}.diorama-height input{width:120px;accent-color:var(--accent)}.diorama-height output{min-width:3.2em;color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}#diorama-rotate[aria-pressed=true],#diorama-animate[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.diorama-hint{color:var(--text-muted);text-align:center;pointer-events:none;margin:0;font-size:11px;position:absolute;bottom:12px;left:0;right:0}@media (hover:none){.diorama-hint{display:none}}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}#video-btn svg{width:16px;height:16px}.video-dialog{border:1px solid var(--border);background:var(--surface);width:min(460px,100% - 32px);color:var(--text);box-shadow:var(--shadow);border-radius:14px;padding:24px}.video-dialog::backdrop{background:#00000073}.video-dialog h2{margin:0 0 4px;font-size:18px}.video-intro{color:var(--text-muted);margin:0 0 18px;font-size:14px}.video-options{border:0;flex-direction:column;gap:14px;margin:0;padding:0;display:flex}.video-options:disabled{opacity:.55}.video-row{align-items:center;gap:12px;display:flex}.video-label{color:var(--text-muted);flex:0 0 96px;font-size:13px}.video-formats{flex:1;grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.video-format{border:1px solid var(--border);text-align:center;cursor:pointer;border-radius:10px;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;font-size:12px;display:flex;position:relative}.video-format input{opacity:0;position:absolute}.video-format:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.video-format:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}.video-shape{opacity:.7;border:2px solid;border-radius:4px;height:30px}.video-shape.landscape{width:48px;height:27px}.video-shape.portrait{width:17px;height:30px}.video-shape.square{width:28px;height:28px}.video-check{cursor:pointer;align-items:center;gap:8px;font-size:14px;display:flex}.video-check input{width:16px;height:16px;accent-color:var(--accent)}.video-progress{margin-top:18px}.video-progress p{font-variant-numeric:tabular-nums;margin:0 0 8px;font-size:14px}.video-progress .progress{background:var(--border);border-radius:3px;height:6px;overflow:hidden}.video-progress .progress div{background:var(--accent);width:0;height:100%}.dialog-actions{justify-content:flex-end;gap:8px;margin-top:20px;display:flex}.share-link{gap:8px;display:flex}.share-link input{border:1px solid var(--border);background:var(--bg);min-width:0;height:36px;color:var(--text);font:inherit;border-radius:8px;flex:1;padding:0 10px;font-size:14px}.share-link input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.share-note{margin:12px 0 0}.share-error{color:var(--accent-strong);margin:16px 0 0;font-size:14px}.drop-overlay{z-index:50;background:color-mix(in srgb, var(--bg) 70%, transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;place-items:center;padding:16px;transition:opacity .12s;display:grid;position:fixed;inset:0}.drop-overlay.visible{opacity:1}.drop-overlay div{border:3px dashed var(--accent);background:var(--surface);width:min(520px,100%);height:220px;color:var(--accent);border-radius:18px;place-items:center;font-size:20px;font-weight:600;display:grid}.toast{z-index:60;background:var(--text);max-width:min(520px,100% - 32px);color:var(--bg);box-shadow:var(--shadow);opacity:0;pointer-events:none;border-radius:8px;padding:10px 16px;transition:opacity .15s,translate .15s;position:fixed;bottom:24px;left:50%;translate:-50% 12px}.toast.visible{opacity:1;translate:-50%}@media (width<=760px){body{height:auto;min-height:100%}.topbar{flex-wrap:wrap;gap:8px 12px}.route-title{border-left:0;flex-basis:100%;order:3;padding-left:0}.layout{grid-template:"map"60vh"stats""profile"200px/minmax(0,1fr)}.stats{border-left:0;border-top:1px solid var(--border)}.actions{flex-basis:100%;gap:6px;margin-left:0}.segmented button{min-width:30px;padding:0 6px}.actions select{background-position:right 8px center;padding-right:26px}.actions .select{flex:1;min-width:0}.actions select{width:100%}.flyover-panel{padding:10px;bottom:32px}.flyover-stats{gap:6px}.flyover-stats dt{font-size:10px}.flyover-stats dd{font-size:14px}.fo-distance{display:none}#open-btn,#export-btn,#share-btn{justify-content:center;width:36px;padding:0}.actions .btn-label{display:none}}
