:root{--background:222 47% 8%;--card:222 40% 12%;--popover:222 44% 10%;--primary:265 89% 68%;--secondary:222 30% 20%;--secondary-foreground:210 40% 92%;--muted:222 24% 22%;--muted-foreground:217 15% 62%;--border:222 22% 24%;--ring:var(--primary);--foreground:210 40% 96%;--radius:.65rem;color:hsl(var(--foreground));background:radial-gradient(1200px 600px at 50% -10%, #2e145259, transparent 60%), hsl(var(--background));font-synthesis:none;text-rendering:optimizelegibility;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;height:100dvh;margin:0;overflow:hidden}.visualizer{grid-template-rows:auto minmax(0,1fr) auto;align-content:center;justify-items:center;gap:1rem;height:100dvh;min-height:0;padding:clamp(.75rem,2vh,1.5rem);display:grid}h1,p{margin:0}.visualizer__header{justify-content:space-between;align-items:center;gap:1rem;width:90%;display:flex}h1{letter-spacing:.04em;font-family:Helvetica Neue,Arial Black,Segoe UI,system-ui,sans-serif;font-size:clamp(1.5rem,4vw,2.2rem);font-weight:900}.badge{border:1px solid hsl(var(--border));background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));letter-spacing:.01em;border-radius:999px;flex-shrink:0;align-items:center;gap:.45rem;padding:.3rem .7rem;font-size:.75rem;font-weight:600;display:inline-flex}.badge__dot{background:hsl(var(--muted-foreground));border-radius:50%;flex-shrink:0;width:7px;height:7px}.badge[data-state=analyzing] .badge__dot,.badge[data-state=loading] .badge__dot{background:#f6a823;animation:1.2s ease-in-out infinite badge-pulse}.badge[data-state=ready] .badge__dot{background:hsl(var(--primary))}.badge[data-state=playing] .badge__dot{background:#31c467;animation:1.2s ease-in-out infinite badge-pulse}@keyframes badge-pulse{0%,to{opacity:1}50%{opacity:.35}}.visualizer__stage{outline:1px solid hsl(var(--border));background:radial-gradient(500px 300px at 50% 40%,#331c5466,#0000 70%),#0a0f1a;border-radius:1rem 1rem 0 0;width:90%;height:100%;max-height:none;position:relative;overflow:hidden}.visualizer__stage--empty{cursor:pointer}#status{z-index:1;color:hsl(var(--muted-foreground));position:absolute;inset:1rem auto auto 50%;transform:translate(-50%)}.dropzone{text-align:center;border:1.5px dashed hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card) / .5);pointer-events:none;max-width:340px;padding:2rem;transition:border-color .15s,background .15s;display:none;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.visualizer__stage--empty .dropzone{display:block}.visualizer__stage--empty:hover .dropzone{border-color:hsl(var(--primary) / .7);background:hsl(var(--primary) / .06)}.visualizer__stage--dragover{outline:2px solid hsl(var(--primary));box-shadow:inset 0 0 60px hsl(var(--primary) / .25)}.visualizer__stage--dragover .dropzone{border-color:hsl(var(--primary));background:hsl(var(--primary) / .1)}.dropzone__icon{font-size:1.8rem}.dropzone h3{margin:.5rem 0 .25rem;font-size:1rem}.dropzone p{color:hsl(var(--muted-foreground));margin:0;font-size:.85rem}#visualizer-canvas{display:block;width:100%!important;height:100%!important}.error{color:#f99494}.visualizer__controls{border:1px solid hsl(var(--border));background:hsl(var(--popover) / .85);border-radius:0 0 1rem 1rem;flex-direction:column;gap:.6rem;width:90%;padding:.85rem 1.15rem;display:flex}.controls__row{align-items:center;gap:1rem;display:flex}.controls__row--play{gap:.75rem}.controls__spacer{flex:1}.now{align-items:center;gap:.5rem;min-width:0;font-size:.8rem;display:flex}.now__eq{flex-shrink:0;align-items:flex-end;gap:2px;height:14px;display:flex}.now__eq i{background:hsl(var(--primary));border-radius:2px;width:3px;height:3px}.visualizer__controls--playing .now__eq i{animation:.8s ease-in-out infinite eq}.now__eq i:nth-child(2){animation-delay:.15s}.now__eq i:nth-child(3){animation-delay:.3s}.now__eq i:nth-child(4){animation-delay:.45s}@keyframes eq{0%,to{height:3px}50%{height:14px}}.now__title{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.now__sub{color:hsl(var(--muted-foreground));white-space:nowrap}.level-meter{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.level-meter__label{letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--muted-foreground));font-size:.6rem}.level-meter__bars{gap:3px;display:flex}.level-meter__bars b{background:hsl(var(--muted));border-radius:3px;width:16px;height:6px}.level-meter__bars b.on{background:hsl(var(--primary));box-shadow:0 0 8px hsl(var(--primary) / .7)}.transport,.filebtns{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.seekbar{flex:1;align-items:center;gap:.6rem;min-width:0;display:flex}.seekbar__time{color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums;text-align:center;min-width:2.4rem;font-size:.7rem}.seekbar__track{background:hsl(var(--muted));cursor:pointer;border-radius:999px;flex:1;height:6px;position:relative}.seekbar__played{background:hsl(var(--primary));border-radius:999px;width:0;position:absolute;inset:0 auto 0 0}.seekbar__knob{width:12px;height:12px;box-shadow:0 0 0 3px hsl(var(--primary));background:#fff;border-radius:50%;position:absolute;top:50%;left:0;transform:translate(-50%,-50%)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.btn{border-radius:var(--radius);height:2.4rem;color:inherit;font:inherit;cursor:pointer;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:0 .95rem;font-size:.875rem;font-weight:500;transition:background .15s,border-color .15s,opacity .15s,transform 50ms;display:inline-flex}.btn:active{transform:translateY(1px)}.btn:focus-visible{box-shadow:0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));outline:none}.btn:disabled{opacity:.4;cursor:not-allowed}.btn svg{fill:currentColor;width:1.05rem;height:1.05rem}.btn--secondary{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));border-color:hsl(var(--border))}.btn--secondary:hover{background:#2d3853}.btn--ghost{background:0 0}.btn--ghost:hover{background:hsl(var(--muted) / .6)}.btn--icon{width:2.4rem;padding:0}.btn--play{background:hsl(var(--primary));color:#fff;border-radius:50%;width:3rem;height:3rem}.btn--play:hover{filter:brightness(.92)}.btn--play svg{width:1.3rem;height:1.3rem}.file-button{cursor:pointer}.now__slot{align-items:center;gap:.25rem;min-width:0;display:inline-flex}.file-remove{width:1em;height:1em;color:hsl(var(--muted-foreground));cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.file-remove.is-hidden{visibility:hidden}.file-remove:hover{color:hsl(var(--foreground))}.file-remove svg{width:.7em;height:.7em}@media (width<=640px){.controls__row{flex-wrap:wrap;justify-content:center}}@media (prefers-reduced-motion:reduce){*{animation:none!important}}