:root{
  --ink:#16111f;--paper:#f7f0df;--pink:#ff4fa3;--cyan:#21d4e8;
  --gold:#ffd447;--lime:#7cff72;--red:#ff5b5b;--purple:#8f5cff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:#fff;font-family:Inter,ui-rounded,system-ui,-apple-system,sans-serif}
button{font:inherit}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;z-index:9999;background:#fff;color:#000;padding:10px}
.topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 24px;background:linear-gradient(100deg,#351154,#141b44);border-bottom:5px solid var(--cyan)}
.topbar h1{font-size:clamp(2rem,5vw,4rem);line-height:.9;margin:4px 0;text-shadow:4px 4px 0 #000,7px 7px 0 var(--pink);transform:rotate(-1deg)}
.topbar p,.eyebrow{margin:0}.eyebrow{font-size:.72rem;letter-spacing:.18em;color:var(--gold);font-weight:900}
.header-actions{display:flex;gap:10px;flex-wrap:wrap}
button{border:2px solid #fff;border-radius:999px;padding:10px 14px;background:#2d2440;color:#fff;font-weight:800;cursor:pointer;box-shadow:3px 3px 0 #000}
button:hover,button:focus{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #000}
button.primary{background:var(--lime);color:#111;border-color:#111}
main{max-width:1600px;margin:auto;padding:18px}
.hero-card{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:var(--paper);color:#17131e;border-radius:24px;padding:24px;margin-bottom:18px;position:relative;overflow:hidden}
.hero-card:after{content:"LOU";position:absolute;right:15%;top:-35px;font-size:10rem;font-weight:1000;color:#0000000d;transform:rotate(-10deg)}
.hero-card h2{font-size:clamp(1.6rem,4vw,3.2rem);max-width:900px;margin:.6rem 0}
.sticker{display:inline-block;background:var(--pink);border:2px solid #111;padding:5px 9px;margin:3px;font-size:.72rem;font-weight:1000;transform:rotate(-2deg)}
.sticker.teal{background:var(--cyan);transform:rotate(2deg)}.sticker.gold{background:var(--gold)}
.mascot{width:145px;height:120px;background:var(--cyan);border:6px solid #111;border-radius:28px 28px 18px 18px;box-shadow:10px 10px 0 var(--pink);display:grid;place-content:center;text-align:center;transform:rotate(2deg)}
.train-face{font-size:2.3rem}.train-name{font-weight:1000;background:#111;color:#fff;padding:3px 10px;margin-top:8px}
.workspace{display:grid;grid-template-columns:250px minmax(420px,1fr) 300px;gap:14px}
.panel{background:#241b31;border:2px solid #594b69;border-radius:18px;padding:16px}
.controls h2,.story-panel h2{margin-top:0}
.small{font-size:.83rem;color:#cfc4d8}
.layer-list{display:grid;gap:8px}
.layer-list label{background:#31263f;border-radius:10px;padding:8px;cursor:pointer}
.layer-list input{accent-color:var(--pink)}
.story{width:100%;text-align:left;margin:5px 0;border-radius:10px;background:#3b2d4e}
#status{margin-top:12px;padding:9px;border-left:4px solid var(--cyan);background:#15101c;font-size:.83rem}
.map-wrap{position:relative;min-height:680px}
#map{height:680px;border-radius:18px;border:4px solid var(--paper);background:#272334}
.demo-banner{position:absolute;left:50%;top:20px;transform:translateX(-50%);z-index:1000;background:#111;color:#fff;border:3px solid var(--gold);padding:12px 18px;border-radius:999px;font-size:1.05rem;font-weight:900;box-shadow:6px 6px 0 var(--pink);max-width:85%;text-align:center}
.hidden{display:none}
.map-key{position:absolute;z-index:500;bottom:12px;left:12px;background:#15101ddd;padding:8px 10px;border-radius:12px;display:flex;gap:12px;font-size:.75rem}
.swatch{display:inline-block;width:18px;height:5px;margin-right:4px}.route{background:var(--pink)}.bus{background:var(--cyan)}.injury{background:var(--red)}
.graffiti-title{font-weight:1000;font-size:1.5rem;color:var(--gold);text-shadow:2px 2px 0 var(--pink);transform:rotate(-1deg);margin-bottom:15px}
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metric-grid div{background:#15101c;padding:10px;border-radius:10px}.metric-grid strong,.metric-grid span{display:block}.metric-grid strong{color:var(--cyan)}.metric-grid span{font-size:.75rem}
.today-box{margin-top:15px;border-top:2px dashed var(--pink)}.compare{display:grid;gap:8px}.compare div{display:flex;justify-content:space-between;background:#15101c;padding:9px;border-radius:8px}.compare span{color:var(--gold)}
.principles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:18px}.principles article{background:var(--paper);color:#17131e;border-radius:14px;padding:14px;min-height:145px}.principles h3{margin-top:0}
footer{text-align:center;color:#b8a9c4;padding:30px 10px}
body.screenshot .controls,body.screenshot footer{display:none}body.screenshot .workspace{grid-template-columns:1fr 320px}body.screenshot .topbar{padding:12px 18px}body.screenshot #map{height:720px}body.screenshot .map-wrap{min-height:720px}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#21182d;color:#fff}.leaflet-control-layers,.leaflet-control-zoom a{background:#21182d!important;color:#fff!important}
@media(max-width:1050px){.workspace{grid-template-columns:220px 1fr}.story-panel{grid-column:1/-1}.principles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.topbar,.hero-card{grid-template-columns:1fr;display:grid}.mascot{display:none}.workspace{grid-template-columns:1fr}.controls{order:2}.story-panel{order:3}.map-wrap{order:1;min-height:58vh}#map{height:58vh}.principles{grid-template-columns:1fr 1fr}.header-actions button{width:100%}}

.swatch.circulator{background:#ffd447}.swatch.brt{background:#21d4e8}