:root{--bg: #04070f;--panel: rgba(7, 13, 26, .78);--hairline: rgba(140, 170, 215, .18);--ink: #dde7f5;--ink-dim: #8a9cba;--ns-yellow: #ffc917;--ns-blue: #003082;--mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;--display: "Barlow Condensed", "Arial Narrow", sans-serif;--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--mono)}#app,#app canvas{position:fixed;inset:0;display:block;touch-action:none}#vignette{position:fixed;inset:0;z-index:5;pointer-events:none;background:radial-gradient(120% 100% at 50% 42%,#0000 52%,#0204098c 88%,#010206d1),repeating-linear-gradient(to bottom,#ffffff04 0px 1px,#0000 1px 3px)}.hud{position:fixed;z-index:10;pointer-events:none;-webkit-user-select:none;user-select:none}.hud-top,.hud-legend,.hud-controls,#popup{background:linear-gradient(var(--ns-yellow),var(--ns-yellow)) top left / 14px 2px,linear-gradient(var(--ns-yellow),var(--ns-yellow)) top left / 2px 14px,linear-gradient(var(--ns-yellow),var(--ns-yellow)) bottom right / 14px 2px,linear-gradient(var(--ns-yellow),var(--ns-yellow)) bottom right / 2px 14px,var(--panel);background-repeat:no-repeat;border:1px solid var(--hairline);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hud-top{top:calc(18px + var(--safe-t));left:calc(18px + var(--safe-l));padding:14px 20px 12px;display:flex;flex-direction:column;gap:10px;max-width:calc(100vw - 36px)}.hud-title{display:flex;align-items:center;gap:10px;min-width:0}.hud-title h1{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:.14em;text-transform:uppercase;color:#f2f7ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-sub{margin-left:8px;font-weight:500;color:var(--ink-dim);letter-spacing:.1em}.live-dot{width:9px;height:9px;border-radius:50%;background:var(--ns-yellow);box-shadow:0 0 8px 1px #ffc917b3;animation:pulse 1.6s ease-in-out infinite;flex:none}.live-dot.paused{background:#5b6c85;box-shadow:none;animation:none}@keyframes pulse{0%,to{opacity:1}50%{opacity:.25}}.hud-stats{display:flex;gap:28px}.stat{display:flex;flex-direction:column;gap:1px}.stat-label{font-size:9px;letter-spacing:.28em;color:var(--ink-dim)}.stat-value{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ns-yellow);line-height:1.1}#train-count{color:#e8f0fb}.hud-controls{bottom:calc(22px + var(--safe-b));left:50%;transform:translate(-50%);display:flex;align-items:stretch;gap:6px;padding:8px;pointer-events:auto;max-width:calc(100vw - 16px)}.btn{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--ink-dim);background:transparent;border:1px solid transparent;padding:8px 13px;min-height:44px;cursor:pointer;transition:color .15s,background .15s}.btn:hover:not(:disabled){color:#fff}.btn:disabled{opacity:.35;cursor:not-allowed}.speed-group,.source-group{display:flex}.speed-group{border-left:1px solid var(--hairline)}.source-group{border-right:1px solid var(--hairline)}.btn.speed.active{color:#0a0f1a;background:var(--ns-yellow)}.btn.src{font-size:11px;letter-spacing:.12em}.btn.src.active{color:var(--ns-yellow);border-color:#ffc91766}.btn-pause{min-width:48px;font-size:11px}.btn-pause.paused{color:var(--ns-yellow)}body.live-mode .speed-group,body.live-mode .btn-pause,body.live-mode .hud-foot{display:none}.hud-legend{right:calc(18px + var(--safe-r));bottom:calc(22px + var(--safe-b));padding:12px 16px;max-height:46vh;overflow-y:auto;pointer-events:auto;scrollbar-width:thin;scrollbar-color:rgba(140,170,215,.3) transparent}.hud-legend h2{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px}.legend-row{display:flex;align-items:center;gap:9px;font-size:11px;line-height:1.9;white-space:nowrap;color:var(--ink)}.legend-chip{width:16px;height:3px;border-radius:2px;flex:none;box-shadow:0 0 6px 0 currentColor}.legend-types{display:flex;gap:14px;margin-top:10px;padding-top:8px;border-top:1px solid var(--hairline);font-size:10px;color:var(--ink-dim)}.legend-types span{display:flex;align-items:center;gap:6px}.swatch{width:14px;height:7px;border-radius:2px}.swatch-ic{background:var(--ns-yellow)}.swatch-spr{background:#dde6f2;border-bottom:2px solid var(--ns-yellow)}#popup{display:none;pointer-events:auto;padding:12px 14px;min-width:230px;max-width:320px;transform:translate(-50%,-100%);font-size:12px;z-index:20}#popup.open{display:block}.popup-close{position:absolute;top:2px;right:2px;width:32px;height:32px;background:none;border:none;color:var(--ink-dim);font-size:16px;cursor:pointer}.popup-close:hover{color:#fff}.popup-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;padding-right:24px}.popup-dest{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:.04em;color:#f2f7ff}.popup-line{color:var(--ink-dim);font-size:10px;letter-spacing:.08em;margin-bottom:8px}.popup-next{margin-bottom:10px}.popup-next b{color:#fff;font-weight:600}.eta{color:var(--ns-yellow);margin-left:6px}.popup-follow{font-family:var(--mono);font-size:11px;font-weight:600;width:100%;padding:9px 10px;background:transparent;color:var(--ink);border:1px solid var(--hairline);cursor:pointer}.popup-follow:hover{border-color:#ffc91780;color:#fff}.popup-follow.on{background:var(--ns-yellow);color:#0a0f1a;border-color:var(--ns-yellow)}.badge{font-size:9px;font-weight:700;letter-spacing:.1em;padding:3px 6px;border-radius:3px;flex:none}.badge-ic{background:var(--ns-yellow);color:#0a0f1a}.badge-sprinter{background:#dde6f2;color:var(--ns-blue)}.popup-station{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#f2f7ff;margin-bottom:8px;padding-right:24px}.dep-row{display:flex;align-items:center;gap:8px;padding:4px 0;border-top:1px solid rgba(140,170,215,.1)}.dep-time{font-weight:700;color:var(--ns-yellow);font-variant-numeric:tabular-nums}.dep-dest{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dep-chip{width:10px;height:3px;border-radius:2px;flex:none}.dep-empty{color:var(--ink-dim)}#toast{left:50%;top:calc(18px + var(--safe-t));transform:translate(-50%);background:var(--panel);border:1px solid rgba(255,201,23,.4);padding:10px 16px;font-size:12px;opacity:0;transition:opacity .3s;z-index:30}#toast.show{opacity:1}.hud-compass{left:calc(20px + var(--safe-l));bottom:calc(64px + var(--safe-b));width:60px;height:60px;pointer-events:none}.compass-dial{position:absolute;inset:0;border:1px solid var(--hairline);border-radius:50%;background:#070d1a8c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);will-change:transform}.compass-arrow{position:absolute;left:50%;top:6px;width:0;height:0;transform:translate(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:13px solid var(--ns-yellow)}.compass-label{position:absolute;left:50%;transform:translate(-50%);font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.1em}.compass-n{top:19px;color:var(--ns-yellow)}.compass-s{bottom:6px;color:var(--ink-dim)}@media(max-width:720px){.hud-compass{width:48px;height:48px;bottom:calc(72px + var(--safe-b))}.compass-n{top:15px}}.hud-foot{left:calc(18px + var(--safe-l));bottom:calc(22px + var(--safe-b));font-size:10px;letter-spacing:.04em;color:var(--ink-dim);max-width:240px;line-height:1.5}@media(max-width:1100px){.hud-foot{display:none}}@media(max-width:720px){.hud-legend{display:none}.hud-title h1{font-size:16px}.hud-sub{display:none}.hud-top{padding:10px 14px 8px}.stat-value{font-size:24px}.hud-controls{bottom:calc(12px + var(--safe-b));flex-wrap:wrap;justify-content:center}#popup.open{left:50%!important;top:auto!important;bottom:calc(84px + var(--safe-b));transform:translate(-50%);width:calc(100vw - 24px);max-width:420px}}.hud-search{margin-top:4px}#search{width:100%;font-family:var(--mono);font-size:12px;color:var(--ink);background:#03070f99;border:1px solid var(--hairline);padding:7px 10px;outline:none}#search::placeholder{color:var(--ink-dim)}#search:focus{border-color:#ffc91780}.hud-tools{top:calc(18px + var(--safe-t));right:calc(18px + var(--safe-r));display:flex;flex-direction:column;gap:6px;pointer-events:auto}.tool{width:40px;height:40px;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink-dim);background:var(--panel);border:1px solid var(--hairline);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;transition:color .15s,border-color .15s}.tool:hover{color:#fff}.tool.on{color:#0a0f1a;background:var(--ns-yellow);border-color:var(--ns-yellow)}.card-head{display:flex;align-items:center;gap:8px;margin-bottom:3px;padding-right:24px}.line-bar{width:4px;align-self:stretch;min-height:20px;background:var(--line, var(--ns-yellow));border-radius:2px}.card-route{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:.04em;color:#f2f7ff}.card-sub{font-size:10px;letter-spacing:.06em;color:var(--ink-dim);margin-bottom:10px}.prog{position:relative;margin:4px 2px 12px}.prog-track{position:absolute;top:50%;left:4px;right:4px;height:2px;transform:translateY(-50%);background:#8caad738}.prog-fill{height:100%}.prog-dots{position:relative;display:flex;justify-content:space-between}.pdot{width:9px;height:9px;border-radius:50%;background:#0a0f1a;border:2px solid #4a5d7a}.pdot-done{border-color:var(--ns-yellow);background:var(--ns-yellow)}.pdot-next{border-color:#fff;background:#fff;box-shadow:0 0 7px 1px #fffc}.card-rows{margin-bottom:8px}.card-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:12px}.card-row span{color:var(--ink-dim)}.card-row b{color:#f2f7ff;font-weight:600}.stop-list{max-height:150px;overflow-y:auto;margin:4px 0 10px;border-top:1px solid rgba(140,170,215,.12);scrollbar-width:thin;scrollbar-color:rgba(140,170,215,.3) transparent}.stop-row{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:11px}.stop-dot{width:7px;height:7px;border-radius:50%;flex:none;background:#3a4a63}.stop-done{color:var(--ink-dim)}.stop-done .stop-dot{background:var(--ns-yellow)}.stop-next b,.stop-next{color:#fff}.stop-next .stop-dot{background:#fff;box-shadow:0 0 6px #fffc}.stop-name{flex:1}.stop-time{color:var(--ink-dim);font-variant-numeric:tabular-nums}.popup-action{font-family:var(--mono);font-size:11px;font-weight:600;width:100%;padding:9px 10px;background:transparent;color:var(--ink);border:1px solid var(--hairline);cursor:pointer}.popup-action:hover{border-color:#ffc91780;color:#fff}.popup-action.on{background:var(--ns-yellow);color:#0a0f1a;border-color:var(--ns-yellow)}#popup{max-height:72vh;overflow-y:auto}.route-buttons{display:flex;gap:8px;margin-top:10px}.rb{flex:1;font-family:var(--mono);font-size:11px;font-weight:600;padding:8px;background:transparent;color:var(--ink);border:1px solid var(--hairline);cursor:pointer}.rb:hover{border-color:#ffc91780}.rb.on{background:var(--ns-yellow);color:#0a0f1a;border-color:var(--ns-yellow)}#route-panel{display:none;top:calc(18px + var(--safe-t));left:50%;transform:translate(-50%);width:320px;max-width:calc(100vw - 36px);padding:12px 14px;pointer-events:auto;z-index:18}#route-panel.open{display:block}.route-title{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px}.route-endpoints{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:8px}.route-pin{font-size:9px;font-weight:700;background:var(--ns-yellow);color:#0a0f1a;border-radius:3px;padding:1px 5px}.route-arrow{color:var(--ink-dim)}.route-empty{color:var(--ink-dim);font-style:italic}.route-legs{border-top:1px solid rgba(140,170,215,.12);padding-top:8px}.route-leg{display:flex;gap:8px;font-size:12px;padding:4px 0}.route-legbar{width:4px;border-radius:2px;flex:none}.route-legname{color:var(--ink-dim);font-size:10px}.route-transfer{font-size:11px;color:var(--ns-yellow);padding:2px 0 2px 12px}.route-summary{margin-top:8px;font-size:11px;color:var(--ink-dim);letter-spacing:.04em}#route-panel .popup-action{margin-top:10px}#route-panel .popup-close{top:6px;right:8px}#a11y-panel{display:none;top:calc(64px + var(--safe-t));right:calc(18px + var(--safe-r));width:240px;max-height:60vh;padding:12px;pointer-events:auto;z-index:25;background:var(--panel);border:1px solid var(--hairline);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#a11y-panel.open{display:flex;flex-direction:column}#a11y-search{font-family:var(--mono);font-size:12px;color:var(--ink);background:#03070f99;border:1px solid var(--hairline);padding:7px 9px;margin-bottom:8px;outline:none}.a11y-items{overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:rgba(140,170,215,.3) transparent}.a11y-item{text-align:left;font-family:var(--mono);font-size:12px;color:var(--ink);background:transparent;border:none;border-bottom:1px solid rgba(140,170,215,.08);padding:7px 4px;cursor:pointer}.a11y-item:hover{color:var(--ns-yellow);background:#ffc9170f}a:focus-visible,button:focus-visible,input:focus-visible,.legend-row:focus-visible,.a11y-item:focus-visible{outline:2px solid var(--ns-yellow);outline-offset:2px}.legend-row{width:100%;text-align:left;background:transparent;border:none;cursor:pointer;font-family:var(--mono)}.legend-row.active{color:#fff}.legend-row.active .legend-chip{box-shadow:0 0 9px 1px currentColor}.legend-row[aria-pressed=false]{opacity:.92}.hud-legend:hover .legend-row:not(:hover){opacity:.6}.big-text .stat-value{font-size:36px}.big-text .legend-row,.big-text .dep-row,.big-text .card-row,.big-text .stop-row,.big-text #search,.big-text .a11y-item{font-size:14px}.big-text .card-route,.big-text .popup-station{font-size:21px}@media(prefers-reduced-motion:reduce){.live-dot{animation:none}}.reduced-motion .live-dot{animation:none}.reduced-motion #toast{transition:none}@media(max-width:720px){.hud-tools{flex-direction:row;top:calc(150px + var(--safe-t));right:calc(12px + var(--safe-r))}.tool{width:38px;height:38px}#route-panel{width:calc(100vw - 24px);top:calc(196px + var(--safe-t))}#a11y-panel{top:calc(196px + var(--safe-t));bottom:auto;right:12px;left:12px;width:auto;max-height:50vh}.hud-compass{display:none}}