:root{color-scheme:dark;--ink:#edf2f5;--dim:#b4c1cc;--red:#c81e2a;--cream:#f3e6c4;--panel:#101a24ed;--line:#ffffff30;--good:#85edac;--bad:#ff9b9b;--top:max(8px,env(safe-area-inset-top));--bottom:max(8px,env(safe-area-inset-bottom));--left:max(10px,env(safe-area-inset-left));--right:max(10px,env(safe-area-inset-right))}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0c1116;color:var(--ink);font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",system-ui,sans-serif}button,input{font:inherit;color:inherit}button{min-width:44px;min-height:44px;cursor:pointer;touch-action:manipulation;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:8px 10px}button:disabled,input:disabled{cursor:default;opacity:.5}button:focus-visible,input:focus-visible{outline:3px solid var(--cream);outline-offset:2px}[hidden]{display:none!important}
#world{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:0}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(#070b1020,transparent 25%,transparent 80%,#070b1040)}
/* Only immediate driving information overlays the scene. Secondary UI is modal. */
#hud{position:fixed;inset:0;z-index:4;pointer-events:none;padding:var(--top) var(--right) var(--bottom) var(--left)}#hud button,#hud input{pointer-events:auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.brand{padding:5px 10px;background:var(--panel);border-left:3px solid var(--red);border-radius:6px;min-width:0}.brand b{font-size:13px;display:block;white-space:nowrap}.brand small{display:block;font-size:10px;color:var(--dim)}.tools{display:flex;gap:4px}.tool{font-size:12px;white-space:nowrap}#cam{min-width:76px}
.station-card{display:flex;align-items:center;gap:14px;width:max-content;max-width:100%;margin-top:6px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 12px}.station-card h2{font-size:18px;white-space:nowrap;margin:0}.station-card h2 small{color:var(--dim);font-size:10px;font-weight:400}.meta{display:flex;gap:12px;font-size:12px;font-variant-numeric:tabular-nums}.meta span{white-space:nowrap}.ats{font-size:12px}.ats.clear{color:var(--good)}.ats.alarm,.ats.eb{color:var(--bad);font-weight:700}#last-stop:empty{display:none}.station-card .ats.clear{font-size:10px}
.speed-wrap{position:absolute;bottom:calc(var(--bottom) + 112px);left:var(--left)}.speed-wrap canvas{display:none}.speed-digital{display:flex;align-items:baseline;gap:5px;font-size:11px;color:var(--dim);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:5px 10px}.speed-digital strong{color:var(--cream);font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.notch-panel{position:absolute;bottom:var(--bottom);left:var(--left);width:500px;max-width:calc(100% - var(--left) - var(--right));background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px;display:grid;grid-template-columns:60px 1fr 1fr 60px;grid-template-rows:44px 44px;gap:6px;pointer-events:auto}.controller-title{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;color:var(--dim)}#notch-now{font-size:28px;color:var(--cream);font-variant-numeric:tabular-nums}.notch-btns{grid-column:2/4;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:6px}.notch-btns button{font-size:14px;font-weight:650;padding:6px}.notch-btns button:first-child{border-color:#ee717188;background:#522b32}.notch-btns button:last-child{border-color:#72b1f388;background:#22445a}.quick-controls{display:contents}#neutral{grid-column:2;grid-row:2}#emergency{grid-column:4;grid-row:1;color:#ffb2b2;font-size:11px;padding:4px}#door-btn{grid-column:3;grid-row:2;font-size:12px;padding:4px;background:#29464b}#horn{grid-column:4;grid-row:2;font-size:11px;padding:4px}#neutral{font-size:12px;padding:4px}
.stop-bar{position:absolute;bottom:calc(var(--bottom) + 114px);left:calc(var(--left) + 110px);width:390px;max-width:calc(100% - var(--left) - var(--right) - 110px);border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:5px 8px;font-size:12px}.track{height:7px;position:relative;margin-top:4px;background:#ffffff20;overflow:hidden}.track i,.track em{position:absolute;height:100%;top:0}.track i{left:50%;width:3px;background:var(--cream)}.track em{width:18px;background:var(--red);transform:translateX(-50%)}#toast,#paused-label{position:absolute;top:calc(var(--top) + 104px);left:50%;transform:translateX(-50%);background:#111c29ed;border:1px solid var(--line);padding:6px 12px;border-radius:6px;font-size:12px;text-align:center;max-width:calc(100% - 24px);width:max-content}#paused-label{border-color:var(--cream)}#paused-label:not([hidden])~*{pointer-events:none}
/* Title leaves a clear train preview above the copy on phones. */
#title-screen{position:fixed;inset:0;z-index:6;overflow:auto;display:flex;align-items:center;background:linear-gradient(90deg,#0b1018ef,#0b10189a 35%,transparent 56%)}.title-copy{width:40%;max-width:600px;padding:28px 3vw;margin:auto 0}.eyebrow{letter-spacing:.14em;font-size:10px;color:var(--cream);margin:0 0 18px}h1{font-family:"Yu Mincho",Georgia,serif;font-size:clamp(30px,4vw,56px);line-height:1.25;margin:0 0 16px;font-weight:600}h1 em{font-style:normal;color:var(--cream)}h1 small{display:block;font:500 .42em/1.8 system-ui,sans-serif;letter-spacing:.13em}.lede{color:#ced8e2;font-size:14px;line-height:1.9}.entry-actions{display:flex;gap:10px;flex-wrap:wrap}.primary{min-height:48px;background:var(--red);border-color:var(--red);font-weight:650;padding:10px 22px}.ghost{background:#ffffff0c}.legal{margin-top:18px;color:var(--dim);font-size:12px;line-height:1.8}
dialog{width:min(520px,calc(100% - var(--left) - var(--right)));max-height:calc(100dvh - var(--top) - var(--bottom));overflow:auto;border:1px solid var(--line);border-radius:12px;background:#101820;color:var(--ink);padding:20px;line-height:1.7}dialog::backdrop{background:#070b10c9}dialog h2{margin:4px 0 14px;font-size:22px}#help-close,#details-close{float:right;margin:0 0 8px 12px}dialog p{font-size:14px}dialog .legal{font-size:12px}.clocks{display:flex;gap:20px;justify-content:space-between;border-block:1px solid var(--line);padding:12px 0;margin-bottom:16px}.clocks span{display:block;font-size:11px;color:var(--dim)}.clocks strong{font-size:17px;font-variant-numeric:tabular-nums}.notch-rail input{width:100%;height:44px;margin:0;accent-color:var(--red);cursor:pointer;touch-action:none}.range-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--dim)}.detail-actions{display:flex;gap:8px;flex-wrap:wrap}#details-dialog label{font-size:12px}#result-stats{font-size:13px;margin-bottom:16px}#result-stats div{padding:5px 0;border-bottom:1px solid var(--line)}.result-actions{position:sticky;bottom:-20px;background:#101820;padding:10px 0;display:flex;gap:8px;flex-wrap:wrap}#load-error{position:fixed;inset:0;z-index:8;display:grid;place-content:center;justify-items:center;gap:14px;background:#0c1116;padding:24px;text-align:center;overflow:auto}#load-error h2,#load-error p{margin:0}#load-error p{max-width:480px;color:var(--dim);line-height:1.7}
@media(max-width:600px){.brand{padding:4px 6px}.brand b{font-size:11px}.brand small{font-size:9px}.tools{gap:4px}.tool{padding:6px;font-size:11px}#cam{min-width:68px}.station-card{width:100%;gap:8px;padding:6px 8px;flex-wrap:wrap;position:relative}.station-card h2{font-size:16px}.meta{margin-left:auto;gap:8px;font-size:11px}.station-card .ats.clear{display:none}.station-card .ats:not(.clear){flex-basis:100%;font-size:11px}.notch-panel{width:auto;right:var(--right);grid-template-columns:44px 1fr 1fr 48px;gap:5px}.notch-btns{gap:5px}.notch-btns button{font-size:12px}.controller-title{font-size:8px}#notch-now{font-size:25px}.stop-bar{width:auto;right:var(--right)}#title-screen{align-items:flex-start;background:linear-gradient(180deg,transparent 25%,#0b10189c 39%,#0b1018ed 58%)}.title-copy{width:100%;max-width:none;margin:36dvh 0 0;padding:18px max(24px,env(safe-area-inset-left)) max(24px,env(safe-area-inset-bottom))}.title-copy h1{font-size:32px;margin-bottom:10px}.title-copy .eyebrow{margin-bottom:12px}}
/* Landscape keeps the middle of the railway clear, not between two tall panels. */
@media(min-width:601px) and (max-height:520px){.topbar{position:absolute;top:var(--top);left:var(--left);right:var(--right)}.station-card{position:absolute;top:var(--top);left:50%;transform:translateX(-50%);max-width:calc(100% - 390px);margin:0;display:block;padding:4px 8px}.station-card h2{font-size:13px}.meta{gap:8px;font-size:10px}.station-card .ats.clear{display:none}.station-card .ats{font-size:10px}.notch-panel{width:460px}.speed-wrap{bottom:var(--bottom);left:auto;right:var(--right)}.stop-bar{bottom:calc(var(--bottom) + 52px);left:auto;right:var(--right);width:190px;max-width:calc(100% - 490px)}#toast,#paused-label{top:calc(var(--top) + 57px);font-size:11px}.title-copy{width:40%;padding:12px max(16px,env(safe-area-inset-left));margin:auto 0}.title-copy h1{font-size:28px}.title-copy .eyebrow{font-size:9px;margin-bottom:8px}.title-copy .lede{font-size:12px;line-height:1.6}.title-copy .legal{font-size:10px;line-height:1.5;margin-top:10px}.entry-actions{gap:6px}.entry-actions button{font-size:13px;padding:8px 10px;min-height:44px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}