:root{--bg:#eee;--surface:#fffcf6e6;--panel:#fffaf1d1;--text:#17313b;--text-strong:#0d1d24;--muted:#5f737b;--muted-strong:#ffd7a1;--muted-soft:#a8b7bc;--border:#0734401f;--line-strong:#0c5a6b;--accent:#ffb74d;--accent-deep:#7a4b06;--success:#04becb;--hero-text:#f6f2e9;--shadow:0 28px 60px #0c1c221f;--sans:"Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;--heading:"Aptos Display", "Franklin Gothic Medium", "Arial Narrow", sans-serif;--mono:"Cascadia Mono", "Consolas", monospace;font:17px/1.5 var(--sans);color:var(--text);background-color:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;margin:0}body:before{content:"";pointer-events:none;background-image:linear-gradient(#0c5a6b0a 1px,#0000 1px),linear-gradient(90deg,#0c5a6b0a 1px,#0000 1px);background-size:42px 42px;position:fixed;inset:0;-webkit-mask-image:radial-gradient(circle,#000,#0000 78%);mask-image:radial-gradient(circle,#000,#0000 78%)}#root{min-height:100svh;margin:0 auto;display:grid}h1,h2,h3{font-family:var(--heading);color:var(--text-strong)}h1{letter-spacing:-.05em;margin:0;font-size:clamp(2.6rem,6vw,4.7rem);line-height:.98}h2{font-size:clamp(1.35rem,2vw,1.9rem)}h3{font-size:1.15rem}p{margin:0}strong{color:inherit}@media (width<=720px){:root{font-size:15px}}.app-shell{grid-template-rows:auto 1fr auto;gap:16px;min-height:100svh;padding:16px;display:grid}.loading-shell{grid-template-rows:1fr;place-items:center}.loading-card{border:1px solid var(--border);background:var(--panel);min-width:min(360px,100%);box-shadow:var(--shadow);text-align:center;border-radius:20px;justify-items:center;gap:10px;padding:28px 24px;display:grid}.loading-card strong{color:var(--text-strong);font-size:1.15rem}.loading-card p{color:var(--muted)}.loading-spinner{border:3px solid #0c5a6b24;border-top-color:var(--success);border-radius:50%;width:34px;height:34px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.top-bar{grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);grid-template-areas:"title metrics""map map";align-items:stretch;gap:16px;display:grid}.top-title,.route-map-panel,.metric-card,.station-card{border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);border-radius:20px}.top-title{background:linear-gradient(135deg,#073440f5,#0b1b22fa);grid-area:title;align-content:center;gap:8px;padding:18px 20px;display:grid}.top-title h1{color:var(--hero-text);margin:0;font-size:clamp(1.8rem,3.4vw,3rem)}.current-time-card{box-shadow:inset 0 0 0 1px #0c5a6b14, var(--shadow);background:#fffaf1e6;justify-content:center}.current-time-card span{letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;font-weight:700}.route-map-panel{background:linear-gradient(#0c5a6b0f 1px,#0000 1px) 0 0/18px 18px,linear-gradient(90deg,#0c5a6b0f 1px,#0000 1px) 0 0/18px 18px,linear-gradient(#fffcf6fa,#eee7dafa);grid-area:map;padding:14px 18px}.route-map{background:#ffffff57;border-radius:16px;height:168px;padding:8px;box-shadow:inset 0 0 0 1px #0c5a6b14}.route-map svg{width:100%;height:100%;overflow:visible}.route-map polyline{fill:none;stroke:#0c5a6b80;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round}.map-stop{fill:var(--line-strong);opacity:.95}.map-stop.is-past{fill:#5f737b8c;opacity:.85}.map-stop[data-next=true]{fill:var(--success);stroke:#fffffffa;stroke-width:1.5px;filter:drop-shadow(0 0 6px #1ba39c73)}.top-metrics{grid-area:metrics;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;display:grid}.metric-card{flex-direction:column;justify-content:space-around;gap:4px;padding:14px 16px;display:flex}.metric-card span,.eta-clock{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:.78rem;font-weight:700}.metric-card strong{font-size:1.15rem;line-height:1.15}.metric-card small{color:var(--muted)}.stations-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;min-height:0;display:grid}.station-card{grid-template-rows:auto 1fr auto;gap:10px;min-height:0;padding:14px 16px;display:grid}.station-head{justify-content:space-between;align-items:start;gap:12px;display:flex}.station-head h2{margin:0;font-size:1rem;line-height:1.2}.status-pill{color:var(--accent-deep);background:#ffb74d29;border-radius:999px;flex-shrink:0;padding:5px 9px;font-size:.72rem;font-weight:700}.eta-value{font-family:var(--heading);color:var(--text-strong);align-self:center;font-size:50px;line-height:1}.is-departed{opacity:.72}.is-departed .status-pill{color:#000;background:#5f737b24}.is-next{background:linear-gradient(#1ba39c24,#fffcf6fa);border-color:#1ba39cb8;box-shadow:0 18px 34px #1ba39c29}.is-next .status-pill{background:var(--success);color:#f4fffd}.is-next .station-head h2,.is-next .eta-value{color:#0d6a65}@media (width<=1100px){.top-bar{grid-template-columns:1fr;grid-template-areas:"title""map""metrics"}.stations-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=820px){.top-metrics,.stations-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){.app-shell{min-height:auto;padding:12px}.top-metrics,.stations-grid{grid-template-columns:1fr}.top-title{padding:12px}.route-map-panel{padding:10px 12px}.route-map{height:140px}.station-card,.metric-card,.top-title,.route-map-panel{border-radius:16px}}.current-time-card strong{font-family:var(--mono);font-size:30px}.route-direction{color:#fff;letter-spacing:.08em;text-transform:uppercase;background-color:#0ea6b1;border-radius:999px;padding:5px 12px;font-size:1rem;font-weight:700;display:inline-block}.app-footer{justify-content:flex-end;display:flex}.funding-panel{border:1px solid var(--border);width:min(520px,100%);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fffaf1f0;border-radius:20px;gap:12px;padding:14px 16px;display:grid}.funding-logos{justify-content:space-between;align-items:center;gap:16px;display:flex}.funding-logo{object-fit:contain;max-width:100%;height:auto;display:block}.project-logo{width:110px}.euspa-logo{width:190px}.funding-copy{color:var(--text);font-size:.92rem;line-height:1.45}@media (width<=820px){.app-footer{justify-content:stretch}.funding-panel{width:100%}}@media (width<=560px){.funding-panel{border-radius:16px;padding:12px}.funding-logos{flex-direction:column;align-items:flex-start}.project-logo{width:96px}.euspa-logo{width:170px}}.euspa-logo-card p{font-size:10px}.euspa-logo-card{padding:12px}.logo-card{background-color:#5e5e5ec5}
