.viz{
  --tc-low:0;--tc-mid:0;--tc-high:0;--tc-energy:0;--tc-beat:0;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 42%,rgba(113,40,190,calc(.10 + var(--tc-energy)*.20)),transparent 44%),
    linear-gradient(180deg,rgba(4,0,16,.86),rgba(11,2,28,.94));
  box-shadow:
    inset 0 0 60px rgba(141,92,255,calc(.10 + var(--tc-energy)*.16)),
    inset 0 -70px 90px rgba(3,0,14,.55),
    0 0 34px rgba(82,236,255,.10);
}
.viz::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,rgba(82,236,255,calc(.025 + var(--tc-high)*.08)),transparent 16%,transparent 84%,rgba(255,68,214,calc(.03 + var(--tc-mid)*.10))),radial-gradient(circle at 50% 48%,transparent 0 42%,rgba(5,0,18,.24) 72%,rgba(2,0,10,.52) 100%);box-shadow:inset 0 0 0 1px rgba(121,240,255,.08),inset 0 0 38px rgba(255,68,214,.05)}
.viz.viz-beat::before{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,calc(var(--tc-beat)*.12)),transparent 36%),linear-gradient(90deg,rgba(82,236,255,.08),transparent 22%,transparent 78%,rgba(255,68,214,.10));}
.viz-art-image{opacity:calc(.20 + var(--tc-energy)*.22)!important;filter:brightness(calc(.42 + var(--tc-energy)*.18)) saturate(calc(1.12 + var(--tc-mid)*.72)) contrast(calc(1.08 + var(--tc-high)*.18))!important;transform:scale(calc(1.035 + var(--tc-low)*.075)) translate3d(0,calc(var(--tc-beat)*-2px),0)!important;transition:opacity .18s linear,filter .18s linear,transform .12s linear!important;}
.viz .viz-art-image.playing{animation:none!important}
.viz-art-overlay{background:radial-gradient(circle at 50% 44%,rgba(8,0,24,.02),rgba(7,0,20,.38) 58%,rgba(4,0,14,.72) 100%),linear-gradient(135deg,rgba(82,236,255,.08),transparent 34%,rgba(255,68,214,.12) 74%,rgba(255,154,77,.06));mix-blend-mode:screen}
.viz-perspective-grid{position:absolute;z-index:1;left:-10%;right:-10%;bottom:-35%;height:72%;pointer-events:none;opacity:calc(.20 + var(--tc-energy)*.18);transform:perspective(360px) rotateX(63deg);transform-origin:center bottom;background-image:linear-gradient(rgba(82,236,255,.19) 1px,transparent 1px),linear-gradient(90deg,rgba(255,68,214,.15) 1px,transparent 1px);background-size:42px 28px;mask-image:linear-gradient(to top,#000 8%,rgba(0,0,0,.85) 48%,transparent 100%);filter:drop-shadow(0 0 5px rgba(82,236,255,.12))}
.viz-lens-flare{position:absolute;z-index:1;left:50%;top:42%;width:58%;aspect-ratio:1;transform:translate(-50%,-50%) scale(calc(.88 + var(--tc-energy)*.18));pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,calc(.018 + var(--tc-beat)*.07)) 0 3%,rgba(82,236,255,calc(.06 + var(--tc-energy)*.10)) 6%,rgba(255,68,214,calc(.04 + var(--tc-mid)*.08)) 17%,transparent 55%);filter:blur(1px)}
.viz .viz-aux{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;overflow:visible}
#tcSpectrumPath{vector-effect:non-scaling-stroke}
#tcWaveGhostA,#tcWaveGhostB{vector-effect:non-scaling-stroke}
#tcPulseOuter,#tcPulseInner,#tcOrbitA,#tcOrbitB{transform-box:view-box;transform-origin:500px 180px;vector-effect:non-scaling-stroke}
.viz-track-readout{position:absolute;z-index:6;left:14px;top:13px;display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 8px;max-width:min(52%,360px);padding:9px 11px;border:1px solid rgba(82,236,255,.30);border-radius:10px;background:linear-gradient(135deg,rgba(8,1,24,.80),rgba(31,4,46,.64));backdrop-filter:blur(10px);box-shadow:0 0 20px rgba(82,236,255,.06),inset 0 0 18px rgba(141,92,255,.05);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;pointer-events:none}
.viz-track-readout span{color:#7ef4ff;font-size:10px;letter-spacing:.16em}.viz-track-readout strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:11px;letter-spacing:.11em;text-shadow:0 0 9px rgba(255,68,214,.36)}.viz-track-readout small{grid-column:1/-1;color:#9588b3;font-size:7px;letter-spacing:.16em}
.viz-band-panel{position:absolute;z-index:6;left:14px;bottom:12px;width:min(236px,43%);padding:9px 10px;border:1px solid rgba(82,236,255,.24);border-radius:10px;background:rgba(7,1,21,.72);backdrop-filter:blur(9px);box-shadow:inset 0 0 22px rgba(82,236,255,.035);font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;pointer-events:none}
.viz-band-row{display:grid;grid-template-columns:34px 1fr 24px;align-items:center;gap:7px}.viz-band-row+.viz-band-row{margin-top:7px}.viz-band-row span{color:#9eb2c7;letter-spacing:.12em}.viz-band-row i{position:relative;height:5px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.075);box-shadow:inset 0 0 5px rgba(0,0,0,.7)}.viz-band-row i b{position:absolute;inset:0;transform:scaleX(0);transform-origin:left center;transition:transform 70ms linear;border-radius:inherit}.viz-band-row:nth-child(1) i b{background:linear-gradient(90deg,#2ee7ff,#7effff)}.viz-band-row:nth-child(2) i b{background:linear-gradient(90deg,#8d5cff,#ff44d6)}.viz-band-row:nth-child(3) i b{background:linear-gradient(90deg,#ff44d6,#ff9a4d)}.viz-band-row em{font-style:normal;text-align:right;color:#e7f9ff;font-variant-numeric:tabular-nums}
.viz-energy-panel{position:absolute;z-index:6;right:14px;bottom:12px;min-width:92px;padding:9px 10px;border:1px solid rgba(255,68,214,.31);border-radius:10px;background:linear-gradient(145deg,rgba(20,2,37,.78),rgba(7,1,21,.74));backdrop-filter:blur(9px);text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;pointer-events:none}.viz-energy-panel span{display:block;color:#ad9ec0;font-size:7px;letter-spacing:.14em}.viz-energy-panel strong{display:block;margin:2px 0;color:#ffb7eb;font-size:24px;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(255,68,214,calc(.25 + var(--tc-energy)*.35))}.viz-energy-panel small{display:block;color:#7ef4ff;font-size:7px;letter-spacing:.08em}
.viz-beat-lamp{position:absolute;z-index:6;left:50%;top:14px;transform:translateX(-50%);padding:6px 9px;border:1px solid rgba(255,154,77,.16);border-radius:999px;background:rgba(14,4,20,.54);font:700 7px ui-monospace,SFMono-Regular,Menlo,monospace;color:#74697e;letter-spacing:.15em;pointer-events:none;transition:.09s ease}.viz-beat-lamp::before{content:"";display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:#4b3d4f;vertical-align:1px}.viz-beat-lamp.hot{color:#fff0df;border-color:rgba(255,154,77,.70);background:rgba(255,92,49,.18);box-shadow:0 0 18px rgba(255,96,54,.30)}.viz-beat-lamp.hot::before{background:#fff4d7;box-shadow:0 0 9px #ff9a4d,0 0 16px #ff44d6}
.time-circuits{transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}.viz.viz-beat .time-circuits{border-color:rgba(82,236,255,.60);box-shadow:0 0 24px rgba(82,236,255,.18),0 0 36px rgba(255,68,214,.08);transform:translateY(-1px)}
.visualizer-card>h2{display:flex;align-items:center;gap:8px}.visualizer-card>h2::after{content:"MULTIBAND / TRANSIENT / TIME DOMAIN";font:700 7px ui-monospace,SFMono-Regular,Menlo,monospace;color:#736987;letter-spacing:.12em}
@media(max-width:720px){.viz-track-readout{max-width:58%;padding:7px 8px}.viz-track-readout small{display:none}.viz-band-panel{width:46%}.viz-energy-panel{min-width:78px}.viz-beat-lamp{top:auto;bottom:61px}.visualizer-card>h2::after{display:none}}
@media(max-width:520px){.viz-track-readout{left:9px;top:9px;max-width:52%}.time-circuits{inset:9px 9px auto auto;font-size:10px}.viz-band-panel{left:9px;bottom:8px;width:58%;padding:7px 8px}.viz-energy-panel{right:9px;bottom:8px;padding:7px 8px;min-width:68px}.viz-energy-panel strong{font-size:19px}.viz-band-row{grid-template-columns:29px 1fr 20px;gap:5px}.viz-beat-lamp{display:none}}
@media(prefers-reduced-motion:reduce){.viz-art-image,.time-circuits,.viz-band-row i b,.viz-beat-lamp{transition:none!important}}