*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100dvh;overflow:hidden}body{color:#e8e8e8;background:#0b0e14;font-family:system-ui,-apple-system,sans-serif}.app{height:100%;position:relative}.app canvas{display:block}.header{z-index:10;pointer-events:none;background:linear-gradient(#0b0e14bf,#0000);align-items:center;gap:12px;padding:12px 16px;display:flex;position:absolute;top:0;left:0;right:0}.header h1{font-size:18px;font-weight:700}.line-badge{color:#fff;background:#7b1fa2;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600}.clock-controls{pointer-events:auto;align-items:center;gap:6px;margin-left:auto;display:flex}.clock-time{font-variant-numeric:tabular-nums;margin-right:6px;font-size:16px;font-weight:700}.speed-btn{font:inherit;color:#e8e8e8;cursor:pointer;background:#ffffff1f;border:1px solid #ffffff40;border-radius:6px;padding:3px 9px;font-size:12px;font-weight:600;transition:background .14s,border-color .14s,transform .14s}.speed-btn:hover{background:#ffffff38}.speed-btn:active{transform:translateY(1px)}.speed-btn.active{background:#7b1fa2;border-color:#7b1fa2}:focus-visible{outline-offset:2px;outline:2px solid #c98ae0}.station-card{z-index:20;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0d111aeb;border:1px solid #ffffff24;border-radius:10px;width:300px;padding:14px 16px;animation:.18s ease-out card-in;position:absolute;top:64px;right:16px;box-shadow:0 8px 28px #00000073}@keyframes card-in{0%{opacity:0;transform:translateY(-6px)}}.station-card header{align-items:center;gap:8px;display:flex}.station-card h2{flex:1;font-size:17px}.card-sub{color:#9aa4b5;margin-top:2px;font-size:13px}.halt-badge{letter-spacing:.4px;background:#ffffff24;border-radius:999px;padding:2px 7px;font-size:10px;font-weight:700}.halt-badge.fast{color:#201400;background:#e0a020}.card-close{font:inherit;color:#9aa4b5;cursor:pointer;background:0 0;border:none;padding:2px 4px;font-size:18px;line-height:1;transition:color .14s}.card-close:hover{color:#fff}.follow-hint{animation:.18s ease-out card-in}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.arrivals-direction{letter-spacing:.3px;color:#9aa4b5;text-transform:uppercase;margin-top:12px;font-size:11px;font-weight:600}.arrivals{flex-direction:column;gap:7px;margin-top:6px;list-style:none;display:flex}.arrivals li{align-items:center;gap:8px;font-size:13px;display:flex}.svc{text-align:center;color:#3d1157;background:#efecf1;border-radius:4px;width:30px;padding:2px 0;font-size:10px;font-weight:700}.svc-fast{color:#201400;background:#e0a020}.svc-ac{color:#fff;background:#3a7bd5}.svc-express{color:#ffe2b0;background:#77302c}.arr-time{font-variant-numeric:tabular-nums;font-weight:600}.arr-dest{color:#c6cdd8;white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.arr-eta{color:#9aa4b5;font-variant-numeric:tabular-nums}.arr-none{color:#9aa4b5}.follow-hint{z-index:20;color:#c6cdd8;pointer-events:none;background:#0d111ad9;border:1px solid #ffffff24;border-radius:999px;padding:6px 14px;font-size:12px;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.strip{z-index:10;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:auto;background:#0b0e14d1;border:1px solid #ffffff1f;border-radius:10px;flex-direction:column;width:172px;display:flex;position:absolute;top:64px;bottom:16px;left:16px}.strip-head{border-bottom:1px solid #ffffff1a;align-items:baseline;gap:6px;padding:8px 10px 6px;display:flex}.strip-title{letter-spacing:.04em;text-transform:uppercase;color:#cfd3da;font-size:12px;font-weight:700}.strip-count{color:#8b93a1;font-variant-numeric:tabular-nums;font-size:11px}.strip-toggle{font:inherit;color:#cfd3da;cursor:pointer;background:0 0;border:none;margin-left:auto;padding:2px 4px;font-size:12px;line-height:1}.strip-toggle-closed{z-index:10;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0b0e14d1;border:1px solid #ffffff1f;border-radius:8px;padding:6px 10px;font-size:11px;font-weight:600;position:absolute;top:64px;left:16px}.strip-body{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff38 transparent;flex:1;margin:6px 0;position:relative;overflow-y:auto}.strip-body::-webkit-scrollbar{width:6px}.strip-body::-webkit-scrollbar-thumb{background:#ffffff38;border-radius:3px}.strip-scale{height:calc(var(--rows) * 14px);min-height:100%;position:relative}.strip-rail{background:linear-gradient(#7b1fa280,#7b1fa2e6);border-radius:2px;width:2px;margin-left:-1px;position:absolute;top:3%;bottom:3%;left:26px}.strip-stn{font:inherit;cursor:pointer;white-space:nowrap;background:0 0;border:none;align-items:center;gap:5px;padding:0;display:flex;position:absolute;left:26px;transform:translate(-50%,-50%)}.strip-tick{background:#ffffff73;border-radius:1px;flex:none;width:7px;height:2px}.strip-stn-fast .strip-tick{background:#e0a020;width:11px;height:3px}.strip-name{color:#aab1bd;letter-spacing:.01em;font-size:9.5px;position:absolute;left:32px}.strip-stn-fast .strip-name{color:#e8e8e8;font-weight:600}.strip-stn:hover .strip-name{color:#fff}.strip-stn-on .strip-tick{background:#fff;width:13px;height:3px}.strip-stn-on .strip-name{color:#fff;font-weight:700}.strip-train{cursor:pointer;border:none;border-radius:50%;width:6px;height:6px;padding:0;transition:top .25s linear;position:absolute;transform:translate(-50%,-50%)}.strip-up{left:18px}.strip-down{left:34px}.strip-train-slow{background:#e8e8e8}.strip-train-fast{background:#e0a020}.strip-train-ac{background:#3a7bd5}.strip-train-express{background:#b8564f}.strip-dwell{box-shadow:inset 0 0 0 2px #0b0e14d9}.strip-train-on{outline-offset:1px;outline:2px solid #fff}.strip-train:hover{outline-offset:1px;outline:2px solid #fff9}.strip-foot{color:#8b93a1;border-top:1px solid #ffffff1a;justify-content:space-between;padding:6px 10px 8px;font-size:9.5px;display:flex}.follow-views{vertical-align:middle;pointer-events:auto;gap:4px;margin-right:10px;display:inline-flex}.follow-view{font:inherit;color:#cfd3da;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:6px;padding:2px 8px;font-size:11px;font-weight:600}.follow-view:hover{background:#ffffff2e}.follow-view-on{color:#fff;background:#7b1fa2;border-color:#9c40c4}@media (width<=720px){.header{flex-wrap:wrap;gap:6px 8px;padding:8px 10px}.header h1{font-size:15px}.line-badge{display:none}.clock-controls{gap:4px}.clock-time{margin-right:2px;font-size:14px}.strip{width:min(72vw,280px);top:84px;bottom:10px;left:10px}.strip-scale{height:calc(var(--rows) * 22px)}.strip-name{font-size:12px;left:34px}.strip-stn{padding:10px 0}.strip-toggle-closed{padding:10px 14px;font-size:13px;top:84px;left:10px}.station-card{overscroll-behavior:contain;width:auto;max-height:46dvh;inset:auto 10px 10px;overflow-y:auto}.follow-hint{text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;display:flex;bottom:10px;left:10px;right:10px;transform:none}.follow-views{margin-right:0}}@media (pointer:coarse){.speed-btn,.follow-view,.strip-toggle,.card-close{min-height:40px;padding:8px 12px}.strip-toggle,.card-close{min-width:40px}.strip-toggle-closed{padding:12px 16px}.strip-train{width:12px;height:12px}}@media (height<=520px){.station-card{overscroll-behavior:contain;max-height:calc(100dvh - 80px);overflow-y:auto}}@media (pointer:coarse) and (width>=721px){.strip-stn{padding:6px 0}}