:root{--bg-0:#05070d;--bg-1:#0a0f1c;--glass:rgba(14, 20, 34, 0.55);--glass-strong:rgba(16, 23, 39, 0.78);--stroke:rgba(140, 170, 220, 0.16);--stroke-soft:rgba(140, 170, 220, 0.09);--text:#e7eefb;--text-dim:#93a4c4;--text-faint:#5d6f92;--accent:#45d0ff;--accent-warm:#ffd166;--shadow:0 10px 40px rgba(0, 0, 0, 0.55);--radius:14px;--font:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;--mono:"SFMono-Regular","JetBrains Mono","Roboto Mono",ui-monospace,Menlo,Consolas,monospace}*{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body,html{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg-0);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;user-select:none;-webkit-tap-highlight-color:transparent}#app{position:fixed;inset:0;background:radial-gradient(1200px 900px at 72% 18%,#0d1730 0,rgba(13,23,48,0) 60%),radial-gradient(1400px 1100px at 18% 88%,#0a1426 0,rgba(10,20,38,0) 55%),radial-gradient(circle at 50% 50%,#070b16 0,#04060c 100%)}#app::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 75% 20%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 40% 70%,rgba(255,255,255,.45),transparent),radial-gradient(1.4px 1.4px at 88% 62%,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 62% 85%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 10% 80%,rgba(255,255,255,.45),transparent),radial-gradient(1.2px 1.2px at 55% 12%,rgba(255,255,255,.5),transparent);opacity:.5;pointer-events:none}canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#map{z-index:1}#flow{z-index:2;pointer-events:none}#app.grabbing #flow,#app.grabbing #map{cursor:grabbing}#map{cursor:grab}.hud{z-index:5}.panel{position:absolute;background:var(--glass);border:1px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}.top-left{top:20px;left:20px;padding:16px 18px 14px;min-width:230px}.brand{display:flex;align-items:center;gap:10px}.brand-dot{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#8af0ff,#1aa0ff 60%,#0b6bd6);box-shadow:0 0 14px rgba(60,180,255,.8)}.brand h1{margin:0;font-size:20px;font-weight:800;letter-spacing:3px;display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,#eaf3ff,#9fd8ff);-webkit-background-clip:text;background-clip:text;color:transparent}.brand-live{width:7px;height:7px;border-radius:50%;background:#36e07e;box-shadow:0 0 10px #36e07e;animation:pulse 2s infinite}@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}.sub{margin-top:4px;font-size:11.5px;color:var(--text-dim);letter-spacing:.4px}.meta{margin-top:12px;display:grid;gap:5px}.meta>div{display:flex;justify-content:space-between;gap:14px;font-size:11px}.meta .k{color:var(--text-faint);text-transform:uppercase;letter-spacing:1px}.meta .v{color:var(--text);font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:11px}.controls{bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:8px}.ctl{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--stroke-soft);color:var(--text-dim);cursor:pointer;transition:all .15s ease}.ctl:hover{background:rgba(70,160,255,.14);color:#fff;border-color:rgba(70,160,255,.4)}.ctl:active{transform:scale(.94)}.ctl svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.ctl .i-pause,.ctl .i-play{fill:currentColor;stroke:none}.ctl.paused{color:var(--accent-warm);border-color:rgba(255,209,102,.4)}.sep{width:1px;height:26px;background:var(--stroke-soft);margin:0 2px}.seg{display:flex;align-items:center;gap:2px;padding:3px;background:rgba(0,0,0,.22);border-radius:9px}.seg-btn{border:none;background:0 0;color:var(--text-dim);font-family:var(--mono);font-size:12px;font-weight:600;padding:7px 10px;border-radius:7px;cursor:pointer;transition:all .14s ease}.seg-btn:hover{color:#fff}.seg-btn.active{background:linear-gradient(180deg,rgba(70,160,255,.32),rgba(70,160,255,.16));color:#fff;box-shadow:0 0 0 1px rgba(70,160,255,.35) inset}.seg-unit{font-size:10px;color:var(--text-faint);padding:0 6px 0 4px;letter-spacing:.5px}.slider-wrap{display:flex;align-items:center;gap:7px;padding:0 6px}.slider-wrap .i-mini{width:17px;height:17px;fill:none;stroke:var(--text-faint);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}.slider-wrap .i-mini circle{fill:var(--text-faint);stroke:none}input[type=range]{-webkit-appearance:none;appearance:none;width:78px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent),rgba(70,160,255,.25));outline:0;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#eaf3ff;box-shadow:0 0 8px rgba(70,160,255,.9);border:none;cursor:pointer}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#eaf3ff;border:none;box-shadow:0 0 8px rgba(70,160,255,.9);cursor:pointer}.legend{bottom:22px;left:20px;padding:13px 15px 11px;width:248px}.legend-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.legend-title{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--text-dim)}.unit-toggle{font-family:var(--mono);font-size:11px;color:var(--accent);cursor:pointer;background:rgba(70,160,255,.12);border:1px solid rgba(70,160,255,.28);border-radius:6px;padding:3px 8px;transition:all .14s ease;min-width:44px}.unit-toggle:hover{background:rgba(70,160,255,.22);color:#fff}.legend-bar{height:11px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}.legend-ticks{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--mono);font-size:9.5px;color:var(--text-faint)}.attribution{position:absolute;right:18px;bottom:16px;z-index:5;text-align:right;font-size:10.5px;color:var(--text-faint);letter-spacing:.3px;line-height:1.7;pointer-events:none}.attribution a{color:var(--text-dim);text-decoration:none;pointer-events:auto}.attribution a:hover{color:var(--accent)}.readout{display:block;font-family:var(--mono);color:var(--text-dim);font-size:11px;min-height:14px;text-shadow:0 1px 6px #000}.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,rgba(8,12,22,.55),rgba(4,6,12,.92));backdrop-filter:blur(3px);transition:opacity .6s ease}.overlay.hidden{opacity:0;pointer-events:none}.overlay-card{text-align:center;padding:30px 40px}.overlay-title{font-size:26px;font-weight:800;letter-spacing:6px;margin-top:18px;background:linear-gradient(90deg,#eaf3ff,#6fc4ff);-webkit-background-clip:text;background-clip:text;color:transparent}.overlay-msg{margin-top:8px;font-size:13px;color:var(--text-dim);min-height:18px;letter-spacing:.3px}.progress{margin:18px auto 0;width:240px;height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}.progress-bar{height:100%;width:0%;border-radius:3px;background:linear-gradient(90deg,#1aa0ff,#8af0ff);box-shadow:0 0 12px rgba(70,180,255,.8);transition:width .35s ease}.spinner{display:inline-flex;gap:7px;align-items:flex-end;height:34px}.spinner span{width:5px;height:12px;border-radius:3px;background:var(--accent);box-shadow:0 0 10px rgba(70,180,255,.7);animation:bounce 1s infinite ease-in-out}.spinner span:nth-child(2){animation-delay:.15s}.spinner span:nth-child(3){animation-delay:.3s}@keyframes bounce{0%,100%{height:12px;opacity:.5}50%{height:30px;opacity:1}}.overlay-actions{display:flex;gap:10px;justify-content:center}.retry-btn{margin-top:20px;padding:10px 26px;border-radius:10px;cursor:pointer;background:linear-gradient(180deg,rgba(70,160,255,.3),rgba(70,160,255,.15));border:1px solid rgba(70,160,255,.45);color:#fff;font-size:13px;font-weight:600;letter-spacing:.5px}.retry-btn:hover{background:rgba(70,160,255,.3)}.retry-btn.ghost{background:rgba(255,255,255,.04);border-color:var(--stroke);color:var(--text-dim)}.retry-btn.ghost:hover{background:rgba(255,255,255,.09);color:#fff}.demo-badge{display:none;margin-top:8px;font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--accent-warm);border:1px solid rgba(255,209,102,.4);background:rgba(255,209,102,.08);padding:2px 8px;border-radius:6px}#app.demo .demo-badge{display:inline-block}@media (max-width:760px){.top-left{min-width:0;padding:12px 14px}.brand h1{font-size:17px;letter-spacing:2px}.meta{display:none}.controls{gap:3px;padding:6px;bottom:14px;flex-wrap:wrap;max-width:94vw;justify-content:center}.slider-wrap{display:none}.legend{display:none}.attribution .attr-text{display:none}}