:root{
  --bg:#070b11; --panel:#0e1622; --panel2:#122032; --line:#1e2a3a;
  --ink:#eaf1f8; --ink2:#c3d0df; --muted:#7f8ea3;
  --green:#35d07f; --teal:#22c3c9; --blue:#4aa8ff; --gold:#f5c451; --amber:#ff8a4c; --violet:#9a7bff;
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --acc:var(--teal);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none}

.app{position:fixed;inset:0;overflow:hidden}

/* ---------- map ---------- */
#map-stage{position:absolute;inset:0;z-index:0;transition:filter .9s ease}
#map-stage.flash{filter:brightness(1.16) saturate(1.1)}
#map-stage.bg-blur{filter:blur(5px) brightness(.55) saturate(.9)}
#map-stage.bg-blur.flash{filter:blur(5px) brightness(.75) saturate(1)}
#map{position:absolute;inset:0;background:var(--bg);transition:transform .1s linear}
.leaflet-container{background:var(--bg)}
.leaflet-fade-anim .leaflet-tile{transition:opacity .35s linear}
.leaflet-zoom-anim .leaflet-zoom-animated{transition:transform .55s cubic-bezier(.2,.7,.25,1)}
.map-scrim{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at 50% 38%, rgba(7,11,17,0) 0%, rgba(7,11,17,.35) 62%, rgba(7,11,17,.82) 100%);
  transition:opacity .6s ease}

.leaflet-control-scale{margin-bottom:165px !important;margin-left:18px !important;opacity:.85}
@media(max-width:640px){.leaflet-control-scale{margin-bottom:225px !important}}
.leaflet-control-scale-line{background:rgba(7,11,17,.5) !important;border-color:var(--ink2) !important;
  color:var(--ink2) !important;font-size:10px !important;padding:1px 6px !important}

/* synthetic overlay vector styling */
.twk-path{transition:opacity .5s ease}
.fade-in{animation:fadeIn .7s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.breathe-marker{animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:1}}

.twinkle{animation-name:twk;animation-iteration-count:infinite;animation-timing-function:ease-in-out;transform-box:fill-box;transform-origin:center}
@keyframes twk{0%{opacity:0;transform:scale(.5)}14%{opacity:.95;transform:scale(1)}38%{opacity:0;transform:scale(.5)}100%{opacity:0}}

/* ---------- locator inset ---------- */
.loc{position:absolute;top:20px;right:20px;width:clamp(96px,11vw,150px);height:auto;z-index:5;
  background:rgba(8,12,18,.72);border:1px solid var(--line);border-radius:10px;padding:8px;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.7));opacity:0;transition:opacity .5s ease .2s}
.loc.show{opacity:1}

/* ---------- brand ---------- */
.brand{position:absolute;top:26px;left:5vw;z-index:5;display:inline-flex;align-items:center;gap:9px;
  font-weight:700;letter-spacing:.03em;font-size:13px;color:var(--ink2)}
.brand .m{width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,var(--teal),var(--green));
  display:grid;place-items:center;color:#04110c;font-size:14px;font-weight:800}

/* ---------- floating panels ---------- */
.panels{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none;padding:2vh 5vw 14vh}
.panel{position:absolute;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .55s ease,transform .55s ease;
  pointer-events:none;max-width:min(96vw,1120px)}
.panel.show{opacity:1;transform:none;pointer-events:auto}

.numrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:stretch;
  background:rgba(7,11,17,.5);border:1px solid var(--line);border-radius:18px;padding:16px 18px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}
.nst{text-align:center;min-width:112px;padding:8px 12px;border-right:1px solid var(--line)}
.nst:last-child{border-right:none}
.nst b{display:block;font-family:var(--serif);font-size:clamp(28px,4.6vw,50px);line-height:1;color:var(--ink)}
.nst span{display:block;margin-top:9px;font-size:12px;color:var(--muted)}
.nst.hl b{color:var(--gold)}
@media(max-width:820px){.nst{border-right:none}}

.dash{display:flex;gap:34px;align-items:center;background:rgba(7,11,17,.5);border:1px solid var(--line);
  border-radius:20px;padding:26px 32px;backdrop-filter:blur(4px)}
@media(max-width:720px){.dash{flex-direction:column}}
.ring{position:relative;width:min(24vh,190px);aspect-ratio:1;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring .val{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .val b{font-family:var(--serif);font-size:clamp(34px,5.6vh,54px);color:var(--gold);line-height:1}
.ring .val span{font-size:11px;color:var(--muted);letter-spacing:.2em}
.gauges{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.g{border:1px solid var(--line);border-radius:13px;padding:13px 20px;background:var(--panel2);text-align:center}
.g .n{font-family:var(--serif);font-size:clamp(19px,2.6vh,26px);line-height:1}
.g .ic{font-size:16px;margin-bottom:6px}
.g.w .n{color:var(--blue)}.g.y .n{color:var(--green)}.g.c .n{color:var(--blue)}.g.i .n{color:var(--gold)}

.pp{display:flex;align-items:center;gap:18px}
@media(max-width:820px){.pp{flex-direction:column}}
.pp-card{position:relative;background:rgba(14,22,34,.72);border:1px solid var(--line);border-radius:16px;
  padding:10px;backdrop-filter:blur(4px)}
.pp-card svg{width:min(38vw,300px);height:auto;display:block}
.pp-card span{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.2em;color:var(--muted)}
.pp-arrow{font-size:28px;color:var(--muted)}

.diagram-card{background:rgba(10,16,26,.55);border:1px solid var(--line);border-radius:22px;
  padding:22px 26px 14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.hub-svg,.road-svg{width:min(88vw,780px);height:auto;display:block}

/* ---------- breadcrumb trail ---------- */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:10px;
  font-size:12px;letter-spacing:.03em;color:var(--muted)}
.crumbs .crumb{transition:color .3s ease}
.crumbs .crumb.on{color:var(--acc);font-weight:600}
.crumbs .sep{font-style:normal;color:#3a4a5e;font-size:11px}

/* ---------- corner legends ---------- */
.legend{position:absolute;left:20px;bottom:210px;z-index:5;display:flex;align-items:center;flex-wrap:wrap;
  gap:6px 10px;max-width:280px;background:rgba(7,11,17,.58);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  font-size:11.5px;color:var(--ink2);opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .5s ease .15s,transform .5s ease .15s}
.legend.show{opacity:1;transform:none}
.legend b{flex-basis:100%;font-family:var(--sans);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:10px;color:var(--muted);margin-bottom:2px}
.legend b.lg-gap{margin-top:4px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px}
.legend span{margin-right:2px}

@media(max-width:820px){.legend{max-width:min(90vw,320px)}}

/* ---------- footer text ---------- */
.foot{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:flex-end;
  justify-content:space-between;gap:24px;padding:20px 5vw 28px;pointer-events:none}
.foot::before{content:"";position:absolute;top:-1px;left:5vw;width:64px;height:2px;background:var(--acc);
  box-shadow:0 0 14px var(--acc)}
.foot-text{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.foot-text.show{opacity:1;transform:none}
.f-head{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.08;
  font-size:clamp(23px,3.6vw,46px);color:var(--ink)}
.f-head .hi{color:var(--acc)}
.f-sub{margin-top:10px;color:var(--muted);font-size:clamp(12px,1.35vw,15px);max-width:64ch}
.f-right{display:flex;align-items:center;gap:16px;flex:none;padding-bottom:5px}
.f-idx{font-size:12px;color:var(--muted);letter-spacing:.14em;font-variant-numeric:tabular-nums}
.alt{display:flex;flex-direction:column;gap:5px}
.alt i{width:7px;height:7px;border-radius:50%;background:#28374b;transition:.3s}
.alt i.on{background:var(--acc);box-shadow:0 0 9px var(--acc)}

/* ---------- nav controls ---------- */
.nav-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:rgba(8,12,18,.55);color:var(--ink2);font-size:22px;line-height:1;
  cursor:pointer;backdrop-filter:blur(3px);transition:background .2s ease,border-color .2s ease,transform .2s ease}
.nav-btn:hover{background:rgba(8,12,18,.85);border-color:var(--acc);color:var(--ink)}
.nav-btn:active{transform:translateY(-50%) scale(.92)}
.nav-btn.prev{left:18px}
.nav-btn.next{right:18px}
.nav-btn:disabled{opacity:.25;cursor:default;pointer-events:none}

.dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;display:flex;gap:8px}
.dots i{width:7px;height:7px;border-radius:50%;background:#28374b;cursor:pointer;transition:.25s}
.dots i.on{background:var(--acc);box-shadow:0 0 9px var(--acc);width:20px;border-radius:5px}

.leaflet-control-attribution{font-size:9px !important;padding:1px 5px !important;opacity:.55;
  background:rgba(7,11,17,.5) !important;color:var(--muted) !important}
.leaflet-control-attribution a{color:var(--ink2) !important}

@media(max-width:640px){
  .nav-btn{width:38px;height:38px;font-size:18px}
  .dots{bottom:8px}
  .foot{padding-bottom:40px}
  .leaflet-control-attribution{font-size:7px !important}
  .legend{bottom:270px}
}

/* ---------- clickable extra-data points ---------- */
.click-target{cursor:pointer;transition:filter .2s ease,transform .2s ease}
.click-target:hover{filter:brightness(1.28)}
.nst.click-target,.g.click-target,.pp-card.click-target,.ring.click-target{position:relative}
.nst.click-target::after,.g.click-target::after,.pp-card.click-target::after,.ring.click-target::after{
  content:"i";position:absolute;top:6px;right:8px;width:16px;height:16px;border-radius:50%;
  background:rgba(255,255,255,.09);border:1px solid var(--line);color:var(--ink2);
  font-size:10px;font-style:italic;font-family:Georgia,serif;font-weight:700;
  display:grid;place-items:center;pointer-events:none}
.ring.click-target::after{top:-2px;right:-2px}
.leaflet-interactive.click-target:hover{filter:brightness(1.4)}

.popover{position:fixed;z-index:60;max-width:min(78vw,280px);background:rgba(9,14,22,.94);
  border:1px solid var(--line);border-radius:14px;padding:14px 18px 15px 16px;
  box-shadow:0 34px 70px -24px rgba(0,0,0,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transform:scale(.92);pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.popover.show{opacity:1;transform:scale(1);pointer-events:auto}
.popover-close{position:absolute;top:6px;right:8px;width:22px;height:22px;background:none;border:none;
  color:var(--muted);font-size:17px;line-height:1;cursor:pointer;border-radius:50%}
.popover-close:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.popover-title{font-family:var(--serif);font-weight:700;color:var(--acc);font-size:14.5px;
  margin-right:14px;margin-bottom:6px}
.popover-body{font-size:12.5px;line-height:1.55;color:var(--ink2)}