:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#10213d;background:#f5f1e9}*{box-sizing:border-box}body{margin:0}.app-shell{min-height:100dvh;display:grid;grid-template-columns:390px 1fr}.panel{z-index:2;padding:28px 24px;background:#fffdf9;overflow:auto}.brand-row{display:flex;justify-content:space-between;align-items:center}.brand{font-size:34px;font-weight:850;letter-spacing:-2.4px}.language,.secondary{border:1px solid #d9dfeb;background:#fff;border-radius:10px;color:#263b5d;font-weight:650}.language{padding:8px 10px}.tagline{color:#65728a;font-size:13px;margin:4px 0 26px}.panel h1{font-size:28px;line-height:1.05;margin:0 0 9px;letter-spacing:-.8px}.intro{line-height:1.45;color:#60708a;margin:0 0 26px}.control{margin:20px 0;font-weight:700}.segments{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}.segments button,.primary,.listen{border:0;border-radius:11px;padding:12px 8px;font-weight:750;cursor:pointer}.segments button{background:#edf1f7;color:#3b4e6d}.segments button.active{background:#10213d;color:#fff}.segments small{font-size:11px}.start-actions{display:flex;gap:8px;margin-top:9px}.secondary{padding:10px 9px;cursor:pointer;font-size:12px}.primary{width:100%;margin:6px 0 16px;background:#eb5a35;color:#fff;font-size:15px}.route-summary{min-height:22px;color:#526078;font-size:13px}.stops{padding-left:0;list-style:none;margin:9px 0}.stops li{border-top:1px solid #e6e9ee;padding:12px 2px;cursor:pointer;display:flex;gap:11px;align-items:flex-start}.stop-number{display:grid;place-items:center;background:#e8edf5;border-radius:50%;width:25px;height:25px;font-weight:800;font-size:12px;flex:0 0 auto}.stop-name{font-weight:750}.stop-theme{font-size:12px;color:#6a7890;margin-top:2px}.map-area{position:relative;min-height:58vh}#map{position:absolute;inset:0}.map-status{position:absolute;left:18px;bottom:16px;background:#10213de8;color:#fff;padding:9px 12px;border-radius:9px;font-size:12px}.story{position:fixed;z-index:4;right:22px;bottom:22px;width:min(390px,calc(100vw - 32px));background:#fffdf9;border-radius:18px;padding:22px;box-shadow:0 18px 60px #10213d40}.story.hidden{display:none}.story #close-story{position:absolute;right:14px;top:10px;border:0;background:none;font-size:24px;color:#617087;cursor:pointer}.story-kicker{font-size:12px;color:#eb5a35;text-transform:uppercase;font-weight:800;letter-spacing:.08em}.story h2{font-size:23px;margin:5px 0 8px;letter-spacing:-.5px}.story p{line-height:1.5;color:#4f6079}.listen{background:#10213d;color:#fff;padding:10px 14px}.mapboxgl-popup-content{font-family:inherit;padding:11px 13px;font-weight:700}@media(max-width:760px){.app-shell{display:flex;min-height:100dvh;flex-direction:column-reverse}.panel{height:47dvh;padding:19px 17px;border-radius:22px 22px 0 0}.map-area{height:53dvh;min-height:0}.brand{font-size:29px}.tagline{margin-bottom:15px}.panel h1{font-size:24px}.intro{margin-bottom:14px}.control{margin:13px 0}.stops{padding-bottom:24px}.story{bottom:12px;right:12px}}