.viz-wrapper{--bg-deep:#050810;--bg-base:#080d18;--bg-surface:#0c121ee0;--bg-elevated:#121a2ac7;--bg-glass:#0e142399;--bg-card:#101828a6;--accent:#06b6d4;--accent-soft:#06b6d41f;--accent-glow:#06b6d44d;--accent-hover:#22d3ee;--warm:#f59e0b;--warm-soft:#f59e0b1f;--success:#10b981;--success-soft:#10b9811f;--danger:#ef4444;--purple:#a78bfa;--purple-soft:#a78bfa1a;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--border-subtle:#94a3b812;--border-default:#94a3b81f;--border-strong:#94a3b833;--shadow-sm:0 1px 2px #00000059;--shadow-md:0 4px 16px #00000047, 0 0 0 1px var(--border-subtle);--shadow-lg:0 8px 32px #00000061;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-full:9999px;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{background:var(--bg-deep);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.01em;font-family:DM Sans,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.viz-wrapper{flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:hidden}#loading-overlay{z-index:9999;background:var(--bg-deep);transition:opacity .5s var(--ease-out);flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex;position:fixed;inset:0}#loading-overlay.fade-out{opacity:0;pointer-events:none}.spinner{width:36px;height:36px;position:relative}.spinner:before,.spinner:after{content:"";border:2.5px solid #0000;border-top-color:var(--accent);border-radius:50%;animation:1s cubic-bezier(.5,0,.5,1) infinite spin;position:absolute;inset:0}.spinner:after{border-top-color:#0000;border-right-color:var(--accent);opacity:.5;animation-duration:1.5s;animation-direction:reverse;inset:4px}.loading-text{color:var(--text-muted);letter-spacing:.02em;font-size:13px;font-weight:500}@keyframes spin{to{transform:rotate(360deg)}}#error-overlay{z-index:9999;background:var(--bg-deep);justify-content:center;align-items:center;padding:24px;display:none;position:fixed;inset:0}#error-overlay.show{display:flex}.error-box{background:linear-gradient(145deg,var(--bg-elevated),var(--bg-base));border-radius:var(--radius-lg);text-align:center;max-width:400px;box-shadow:var(--shadow-lg),0 0 40px #ef44440d;border:1px solid #ef444433;padding:28px 36px}.error-title{color:var(--danger);letter-spacing:-.01em;margin-bottom:10px;font-size:15px;font-weight:700}.error-msg{color:var(--text-secondary);font-size:13px;line-height:1.65}.viz-header{z-index:10;background:var(--bg-surface);-webkit-backdrop-filter:blur(24px)saturate(1.5);border:1px solid var(--border-default);border-radius:var(--radius-lg);pointer-events:auto;box-shadow:var(--shadow-lg);align-items:center;gap:12px;padding:8px 18px;transition:border-color .2s,box-shadow .2s;display:flex;position:absolute;top:10px;left:12px}.viz-header:hover{border-color:var(--border-strong);box-shadow:var(--shadow-lg),0 0 20px #06b6d40f}.viz-header-left{align-items:center;gap:10px;display:flex}.badge{letter-spacing:.05em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--accent),#0891b2);border-radius:var(--radius-full);box-shadow:0 3px 12px var(--accent-glow);align-items:center;padding:4px 14px;font-size:12px;font-weight:800;display:inline-flex}.graph-info{color:var(--text-secondary);letter-spacing:.01em;font-size:11.5px;font-weight:500}.viz-status-panel{z-index:10;background:var(--bg-surface);-webkit-backdrop-filter:blur(24px)saturate(1.5);border:1px solid var(--border-default);border-radius:var(--radius-lg);pointer-events:auto;min-width:200px;box-shadow:var(--shadow-lg);flex-direction:column;gap:8px;padding:14px 18px;transition:border-color .2s;display:flex;position:absolute;top:10px;right:12px}.viz-status-panel:hover{border-color:var(--border-strong)}.viz-status-panel .viz-status-item{min-width:unset;white-space:nowrap;background:0 0;border:none;border-radius:6px;flex-direction:row;flex-shrink:0;justify-content:space-between;align-items:center;gap:16px;padding:6px 8px;transition:background .15s;display:flex;position:static}.viz-status-panel .viz-status-item:before{display:none}.viz-status-panel .viz-status-item:hover{background:#ffffff0d}.viz-status-panel .viz-status-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.07em;flex-shrink:0;font-size:11px;font-weight:600;line-height:1}.viz-status-panel .viz-status-value{color:#fff;font-variant-numeric:tabular-nums;text-align:right;font-size:15px;font-weight:700;line-height:1.3}.viz-status-panel .viz-status-mono{letter-spacing:-.01em;color:#67e8f9;text-align:right;word-break:break-all;font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;font-size:11.5px;line-height:1.4}.viz-canvas-wrap{background:radial-gradient(ellipse 700px 450px at 20% 35%,#06b6d409 0%,transparent 70%),radial-gradient(ellipse 550px 380px at 82% 55%,#8b5cf606 0%,transparent 70%),radial-gradient(ellipse 350px 220px at 48% 88%,#f59e0b05 0%,transparent 70%),linear-gradient(180deg,var(--bg-deep) 0%,var(--bg-base) 100%);background-image:radial-gradient(circle at 1px 1px,#94a3b80f 1px,transparent 1px),radial-gradient(ellipse 700px 450px at 20% 35%,#06b6d409 0%,transparent 70%),radial-gradient(ellipse 550px 380px at 82% 55%,#8b5cf606 0%,transparent 70%),radial-gradient(ellipse 350px 220px at 48% 88%,#f59e0b05 0%,transparent 70%),linear-gradient(180deg,var(--bg-deep) 0%,var(--bg-base) 100%);background-position:0 0,0 0,0 0,0 0,0 0;background-size:22px 22px,100% 100%,100% 100%,100% 100%,100% 100%;flex:auto;width:100%;position:relative;overflow:hidden}#viz-canvas{width:100%;height:100%;display:block;position:absolute;top:0;left:0}.tooltip{z-index:20;pointer-events:none;animation:tooltipIn .25s var(--ease-out);position:absolute}.viz-tooltip{pointer-events:none}.tooltip-inner,.viz-tooltip-inner{color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);white-space:pre-line;background:linear-gradient(135deg,#06b6d4ed,#0891b2f5);border:1px solid #ffffff24;border-radius:8px;max-width:200px;padding:7px 14px;font-size:11.5px;font-weight:600;line-height:1.45;display:inline-block;box-shadow:0 4px 24px #06b6d447,0 0 0 1px #ffffff1a}@keyframes tooltipIn{0%{opacity:0;transform:translateY(-6px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.viz-bottom-bar{z-index:10;-webkit-backdrop-filter:blur(32px)saturate(1.6);pointer-events:auto;background:linear-gradient(#080e1cd9,#060a14f2 60%,#03050cfa);border-top:1px solid #94a3b814;flex-direction:column;display:flex;position:absolute;bottom:0;left:0;right:0}.viz-timeline{align-items:center;gap:16px;padding:14px 32px 4px;display:flex}.timeline-track{cursor:pointer;background:#ffffff0f;border-radius:2px;flex:1;height:4px;transition:height .2s;position:relative}.timeline-track:hover{height:7px}.timeline-fill{background:linear-gradient(90deg,#06b6d4,#22d3ee,#a5f3fc);border-radius:2px;width:0%;height:100%;transition:width .1s ease-out;position:relative}.timeline-glow{pointer-events:none;opacity:0;background:radial-gradient(#06b6d459,#0000 70%);width:60px;height:16px;transition:opacity .25s;position:absolute;top:50%;right:0;transform:translateY(-50%)}.timeline-track:hover .timeline-glow{opacity:1}.timeline-thumb{opacity:0;width:16px;height:16px;transition:left .1s ease-out,opacity .2s ease,transform .2s var(--ease-spring);background:#22d3ee;border:2.5px solid #0f172a;border-radius:50%;position:absolute;top:50%;left:0;transform:translate(-50%,-50%)scale(0);box-shadow:0 0 18px #22d3ee80,0 2px 8px #0006}.timeline-track:hover .timeline-thumb{opacity:1;transform:translate(-50%,-50%)scale(1)}.timeline-counter{color:#94a3b899;letter-spacing:.03em;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;min-width:52px;font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;font-size:11px;font-weight:600}.viz-transport{justify-content:center;align-items:center;gap:24px;padding:8px 32px 14px;display:flex}.transport-group{align-items:center;gap:6px;display:flex}.ctrl-btn{color:#94a3b873;cursor:pointer;width:38px;height:38px;transition:all .2s var(--ease-out);background:0 0;border:1px solid #0000;border-radius:10px;outline:none;justify-content:center;align-items:center;display:inline-flex}.ctrl-btn:hover{color:#cbd5e1d9;background:#ffffff0f;border-color:#94a3b81f;transform:scale(1.06)}.ctrl-btn:active{transform:scale(.95)}.ctrl-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.play-hero{cursor:pointer;width:56px;height:56px;transition:all .3s var(--ease-spring);background:linear-gradient(145deg,#0891b2,#06b6d4,#22d3ee);border:none;border-radius:50%;outline:none;padding:0;position:relative;box-shadow:0 4px 24px #06b6d459,inset 0 0 0 1px #ffffff14,0 0 80px #06b6d41a}.play-hero:before{content:"";opacity:0;background:conic-gradient(from 180deg,#0000 70%,#22d3ee26,#0000 90%);border-radius:50%;transition:opacity .4s;animation:6s linear infinite heroSpin;position:absolute;inset:-3px;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 3px))}.play-hero:hover:before{opacity:1}@keyframes heroSpin{to{transform:rotate(360deg)}}.play-hero:hover{transform:scale(1.1);box-shadow:0 6px 36px #06b6d480,inset 0 0 0 1px #ffffff1f,0 0 120px #06b6d426}.play-hero:active{transform:scale(1.03)}.play-hero:focus-visible{outline-offset:4px;outline:2px solid #67e8f9}.play-hero__ring{color:#fff;filter:drop-shadow(0 1px 3px #0003);border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.play-icon--play{margin-left:2px}.play-icon--pause,.play-icon--replay{opacity:.95}.play-hero.replay-pulse{background:linear-gradient(145deg,#059669,#10b981,#34d399);animation:2.5s ease-in-out infinite replayGlow;box-shadow:0 4px 24px #10b98159,inset 0 0 0 1px #ffffff14}@keyframes replayGlow{0%,to{box-shadow:0 4px 24px #10b9814d}50%{box-shadow:0 6px 36px #10b9818c,0 0 80px #10b9811f}}.speed-control-inline{color:#94a3b859;text-transform:uppercase;letter-spacing:.04em;background:#ffffff05;border:1px solid #94a3b80f;border-radius:9999px;align-items:center;gap:5px;padding:3px 12px;font-size:9.5px;font-weight:600;display:inline-flex}.speed-control-inline label{white-space:nowrap}.speed-slider{appearance:none;cursor:pointer;background:#ffffff14;border:none;border-radius:2px;width:52px;height:3px}.speed-slider::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border:1.5px solid #0f172a99;border-radius:50%;width:11px;height:11px;transition:transform .15s;box-shadow:0 0 6px #06b6d459}.speed-slider::-webkit-slider-thumb:hover{transform:scale(1.25)}.speed-val{color:var(--accent);text-align:right;font-variant-numeric:tabular-nums;min-width:20px;font-size:10px;font-weight:700}.viz-legend{border-top:1px solid #94a3b80d;flex-wrap:wrap;justify-content:center;gap:6px;padding:6px 32px 14px;display:flex}.legend-chip{color:#94a3b88c;transition:all .22s var(--ease-out);letter-spacing:.02em;background:#ffffff08;border:1px solid #94a3b812;border-radius:9999px;align-items:center;gap:6px;padding:4px 12px;font-size:10.5px;font-weight:500;line-height:1.2;display:inline-flex}.legend-chip:hover{color:#f1f5f9e6;background:#ffffff12;border-color:#94a3b826;transform:translateY(-1px)}.legend-chip .legend-dot{border:1px solid #ffffff26;border-radius:50%;flex-shrink:0;width:8px;height:8px;display:inline-block;box-shadow:0 1px 4px #00000059}.legend-chip .legend-bar{border-radius:2px;flex-shrink:0;width:16px;height:3px;display:inline-block}.status-strip{border-top:1px solid #94a3b80a;flex-wrap:wrap;justify-content:center;gap:6px;padding:7px 32px 8px;display:flex}.strip-item{color:#94a3b873;background:#ffffff05;border:1px solid #94a3b80f;border-radius:9999px;align-items:center;gap:6px;padding:3px 12px;font-size:10.5px;line-height:1.2;display:inline-flex}.strip-label{text-transform:uppercase;letter-spacing:.05em;color:#94a3b859;font-size:9px;font-weight:600}.strip-value{letter-spacing:-.01em;color:var(--accent);font-variant-numeric:tabular-nums;font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;font-size:10.5px}.hidden{display:none!important}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}