:root{--bg:#0d1a1f;--land:#14282a;--ink:#eef3f1;--mute:#9fb3ae;--card:rgba(10,22,26,.86);--line:#2a4446;
--yel:#f2d230;--blu:#3fb5ea;--ora:#f07b22;--grn:#36d14a;--mag:#e83ad6;--pur:#6b3fd6;--g2:#c9cfd0}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
#stage{position:relative;width:100%;height:100vh;min-height:520px;overflow:hidden}
svg#map{position:absolute;inset:0;width:100%;height:100%;display:block}
.road{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lbl{font-weight:600;paint-order:stroke;stroke:#0d1a1f;stroke-width:4px;fill:#e8efec;letter-spacing:.04em}
.lbl.small{fill:#b9c8c4;font-weight:500}
.draw{transition:stroke-dashoffset 2.6s ease-in-out}
.fade{transition:opacity .8s}
#panel{position:absolute;left:24px;bottom:84px;max-width:min(460px,calc(100% - 48px));background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;backdrop-filter:blur(4px)}
#panel h1{font-size:26px;line-height:1.15;margin:0 0 6px}
#panel h2{font-size:20px;margin:0 0 6px}
#panel .kick{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--mute);margin-bottom:6px}
#panel p{margin:6px 0;color:#d6e2de}
#panel .src{font-size:12px;color:var(--mute);margin-top:10px}
.chip{display:inline-block;margin:4px 6px 0 0;padding:4px 9px;border-radius:999px;background:#1d3438;border:1px solid #2f4d50;font-size:13px}
.chip b{color:#fff}
.sw{display:inline-block;width:18px;height:4px;border-radius:2px;vertical-align:middle;margin-right:6px}
table.t{border-collapse:collapse;width:100%;font-size:13px;margin-top:6px}
table.t td{padding:3px 4px;border-bottom:1px solid #253d40}
.bar{height:10px;border-radius:5px;background:var(--yel)}
#bars{position:absolute;right:24px;top:24px;width:min(520px,calc(100% - 48px));background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:none}
#bars .row{display:grid;grid-template-columns:190px 1fr 64px;gap:8px;align-items:center;font-size:13px;margin:5px 0}
#bars .row .v{text-align:right;font-variant-numeric:tabular-nums}
.steps{display:grid;gap:6px;margin-top:8px}
.step{display:flex;gap:10px;align-items:center;font-size:13.5px}
.step i{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;background:#1d3438;border:1px solid #3a5a5d}
.step.done i{background:#2f7d3a;border-color:#3ea84c}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.cols div{background:#16292c;border:1px solid #2a4446;border-radius:10px;padding:10px 12px;font-size:13.5px}
.cols ul{margin:6px 0 0 16px;padding:0}
#bar{position:absolute;left:0;right:0;bottom:0;height:64px;display:flex;align-items:center;gap:10px;padding:0 18px;background:linear-gradient(transparent,rgba(5,12,14,.92))}
#bar button{background:#1d3438;color:var(--ink);border:1px solid #35575a;border-radius:10px;height:38px;min-width:42px;padding:0 12px;font-size:15px;cursor:pointer}
#bar button:hover{background:#25444a}
#dots{display:flex;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}
#dots span{width:9px;height:9px;border-radius:50%;background:#3a5558;cursor:pointer}
#dots span.on{background:var(--yel)}
#foot{position:absolute;right:18px;bottom:70px;font-size:11px;color:var(--mute);text-align:right;max-width:60%}
#brand{position:absolute;left:24px;top:20px;font-size:12px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
#brand b{color:var(--ink)}
@media (max-width:700px){#panel{left:12px;right:12px;bottom:74px;max-width:none;padding:14px}#panel h1{font-size:21px}#bars{left:12px;right:12px;width:auto;top:46px}#bars .row{grid-template-columns:120px 1fr 54px}#foot{display:none}.cols{grid-template-columns:1fr}}

#w3{position:absolute;inset:0;display:none;background:#aec6d1}
#w3 canvas{display:block}
.l3{position:absolute;transform:translate(-50%,-120%);font-weight:700;font-size:15px;color:#fff;text-shadow:0 0 4px #000,0 0 2px #000;white-space:nowrap;pointer-events:none}
.l3.road{color:#ddd;font-size:12px}.l3.rail{color:#f1f1f1;font-size:12px;font-weight:600}.l3.railp{color:#ffb4b4;font-size:12px;font-weight:600}
.legend3{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:12px;color:#c9d6d2}
.l3.vb{color:#ff6b77;font-weight:700}
.l3.vc{color:#5ff0e2;font-weight:700}
.l3.pur{color:#c6b3ff;font-weight:700}
#cnt{font-size:13px;color:var(--mute)}
.bars-h{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.12em}
#bars .bar.alt{background:#c9cfd0}
.sw-36d14a{background:#36d14a}
.sw-3fb5ea{background:#3fb5ea}
.sw-6b3fd6{background:#6b3fd6}
.sw-8ea3a0{background:#8ea3a0}
.sw-c9cfd0{background:#c9cfd0}
.sw-e83ad6{background:#e83ad6}
.sw-f07b22{background:#f07b22}
.sw-f2d230{background:#f2d230}
.sw-ff2b3d{background:#ff2b3d}
.sw-14d8c8{background:#14d8c8}
#brand a{color:inherit;text-decoration:none}#brand .back{margin-left:14px;color:var(--ink);text-transform:none;letter-spacing:0;font-size:13px;border:1px solid var(--line);border-radius:999px;padding:3px 10px}
#brand .back:hover,#brand .back:focus-visible{border-color:var(--ink)}
.nojs{position:absolute;inset:auto 24px 90px 24px;z-index:5}.nojs a{color:var(--blu)}