diff --git a/playground/README.md b/playground/README.md
new file mode 100644
index 00000000..d66ec22f
--- /dev/null
+++ b/playground/README.md
@@ -0,0 +1,80 @@
+# Sovereign Sound Playground
+
+Interactive audio-visual experience — no servers, no dependencies, pure browser.
+
+## Apps
+
+### Playground v3 (Full Instrument)
+`playground.html` — The complete experience:
+- Visual piano keyboard (2 octaves)
+- 6 visualization modes: Waveform, Particles, Bars, Spiral, Gravity Well, Strobe
+- 5 color palettes: Cosmic, Sunset, Ocean, Forest, Neon
+- Ambient beat with chord progressions
+- Mouse/touch playback on visualizer
+- Chord detection
+- Recording to WAV
+- Export as PNG
+
+### Synesthesia
+`synesthesia.html` — Paint with sound:
+- Click and drag to create colors and shapes
+- Each position generates a unique tone
+- Particles respond to your movement
+- Touch supported
+
+### Ambient
+`ambient.html` — Evolving soundscape:
+- Automatic chord progressions
+- Floating orbs respond to audio
+- Reverb-drenched textures
+- Click to enter, let it wash over you
+
+### Interactive
+`interactive.html` — 26 key-shape mappings:
+- Press A-Z to play notes
+- Each key has a unique shape and color
+- Shapes animate and fade
+- Visual keyboard at bottom
+- Touch supported
+
+### Visualizer
+`visualizer.html` — WAV frequency visualization:
+- Load any audio file
+- 4 modes: Spectrum, Waveform, Spectrogram, Circular
+- Drag and drop support
+- Real-time frequency analysis
+
+## Features
+
+- Zero dependencies — just open in a browser
+- Local-first — no network requests
+- Touch support on all apps
+- Keyboard support
+- Recording and export
+- Multiple visualization modes
+- Color palettes
+
+## Usage
+
+Open any HTML file in a browser. That's it.
+
+```bash
+# Quick start
+open playground/playground.html
+
+# Or serve locally
+python3 -m http.server 8080 --directory playground
+```
+
+## Keyboard Shortcuts (Playground v3)
+
+- A-; (lower row): Play piano notes
+- Mouse drag on visualizer: Create sound
+- Click piano keys: Play notes
+
+## Technical
+
+- Web Audio API for sound generation
+- Canvas 2D for visualization
+- MediaRecorder for recording
+- No build step, no framework
diff --git a/playground/ambient.html b/playground/ambient.html
new file mode 100644
index 00000000..a621f88f
--- /dev/null
+++ b/playground/ambient.html
@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ambient — Evolving Soundscape</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { background: #0a0a0f; overflow: hidden; height: 100vh; }
+        canvas { display: block; width: 100%; height: 100%; }
+        .overlay {
+            position: fixed; inset: 0; display: flex; align-items: center;
+            justify-content: center; background: rgba(0,0,0,0.7);
+            transition: opacity 0.5s; z-index: 10;
+        }
+        .overlay.hidden { opacity: 0; pointer-events: none; }
+        .start-btn {
+            background: rgba(100,50,150,0.5); border: 2px solid rgba(150,100,200,0.7);
+            color: #e0e0e0; padding: 20px 40px; font-size: 18px; border-radius: 30px;
+            cursor: pointer; font-family: sans-serif; letter-spacing: 2px;
+            transition: all 0.3s;
+        }
+        .start-btn:hover { background: rgba(150,100,200,0.5); transform: scale(1.05); }
+        .title {
+            position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
+            color: rgba(255,255,255,0.1); font-size: 24px; font-family: sans-serif;
+            letter-spacing: 4px; text-transform: uppercase; pointer-events: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="title">Ambient</div>
+    <canvas id="canvas"></canvas>
+    <div class="overlay" id="overlay">
+        <button class="start-btn" id="start-btn">Enter Soundscape</button>
+    </div>
+    <script>
+        class AmbientSoundscape {
+            constructor() {
+                this.canvas = document.getElementById('canvas');
+                this.ctx = this.canvas.getContext('2d');
+                this.audioCtx = null;
+                this.masterGain = null;
+                this.analyser = null;
+                this.isPlaying = false;
+                this.currentChord = 0;
+                this.time = 0;
+                this.orbs = [];
+
+                this.resize();
+                window.addEventListener('resize', () => this.resize());
+
+                // Create orbs
+                for (let i = 0; i < 15; i++) {
+                    this.orbs.push({
+                        x: Math.random() * this.canvas.width,
+                        y: Math.random() * this.canvas.height,
+                        radius: Math.random() * 50 + 20,
+                        speed: Math.random() * 0.5 + 0.2,
+                        angle: Math.random() * Math.PI * 2,
+                        color: [
+                            [167, 139, 250], [129, 140, 248], [99, 102, 241],
+                            [139, 92, 246], [124, 58, 237]
+                        ][i % 5]
+                    });
+                }
+
+                this.bindEvents();
+                this.animate();
+            }
+
+            resize() {
+                this.canvas.width = window.innerWidth;
+                this.canvas.height = window.innerHeight;
+            }
+
+            async initAudio() {
+                if (this.audioCtx) return;
+
+                this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                this.masterGain = this.audioCtx.createGain();
+                this.masterGain.gain.value = 0.2;
+
+                this.analyser = this.audioCtx.createAnalyser();
+                this.analyser.fftSize = 256;
+                this.analyser.smoothingTimeConstant = 0.95;
+
+                this.masterGain.connect(this.analyser);
+                this.analyser.connect(this.audioCtx.destination);
+
+                // Create reverb
+                const convolver = this.audioCtx.createConvolver();
+                const reverbTime = 3;
+                const sampleRate = this.audioCtx.sampleRate;
+                const length = sampleRate * reverbTime;
+                const impulse = this.audioCtx.createBuffer(2, length, sampleRate);
+
+                for (let channel = 0; channel < 2; channel++) {
+                    const channelData = impulse.getChannelData(channel);
+                    for (let i = 0; i < length; i++) {
+                        channelData[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, 2);
+                    }
+                }
+
+                convolver.buffer = impulse;
+                convolver.connect(this.masterGain);
+                this.reverb = convolver;
+            }
+
+            playChord() {
+                if (!this.audioCtx || !this.isPlaying) return;
+
+                const progressions = [
+                    [[261.63, 329.63, 392.00], [392.00, 493.88, 587.33],
+                     [440.00, 523.25, 659.25], [349.23, 440.00, 523.25]],
+                    [[220.00, 277.18, 329.63], [329.63, 415.30, 493.88],
+                     [369.99, 466.16, 554.37], [293.66, 369.99, 440.00]]
+                ];
+
+                const prog = progressions[this.currentChord % 2];
+                const chord = prog[Math.floor(this.time / 4) % prog.length];
+
+                chord.forEach((freq, i) => {
+                    const osc = this.audioCtx.createOscillator();
+                    const gain = this.audioCtx.createGain();
+                    const filter = this.audioCtx.createBiquadFilter();
+
+                    osc.type = 'sine';
+                    osc.frequency.value = freq * (1 + (Math.random() - 0.5) * 0.01);
+
+                    filter.type = 'lowpass';
+                    filter.frequency.value = 800 + Math.sin(this.time * 0.1) * 400;
+
+                    gain.gain.setValueAtTime(0, this.audioCtx.currentTime);
+                    gain.gain.linearRampToValueAtTime(0.15, this.audioCtx.currentTime + 0.5);
+                    gain.gain.exponentialRampToValueAtTime(0.01, this.audioCtx.currentTime + 4);
+
+                    osc.connect(filter);
+                    filter.connect(gain);
+                    gain.connect(this.reverb);
+
+                    osc.start();
+                    osc.stop(this.audioCtx.currentTime + 4);
+                });
+
+                // High texture
+                const highOsc = this.audioCtx.createOscillator();
+                const highGain = this.audioCtx.createGain();
+
+                highOsc.type = 'sine';
+                highOsc.frequency.value = chord[0] * 4 + Math.random() * 50;
+
+                highGain.gain.setValueAtTime(0, this.audioCtx.currentTime);
+                highGain.gain.linearRampToValueAtTime(0.03, this.audioCtx.currentTime + 1);
+                highGain.gain.exponentialRampToValueAtTime(0.001, this.audioCtx.currentTime + 5);
+
+                highOsc.connect(highGain);
+                highGain.connect(this.reverb);
+                highOsc.start();
+                highOsc.stop(this.audioCtx.currentTime + 5);
+
+                this.time += 4;
+            }
+
+            start() {
+                this.isPlaying = true;
+                document.getElementById('overlay').classList.add('hidden');
+
+                const loop = () => {
+                    if (!this.isPlaying) return;
+                    this.playChord();
+                    setTimeout(loop, 4000);
+                };
+
+                loop();
+            }
+
+            stop() {
+                this.isPlaying = false;
+            }
+
+            animate() {
+                this.ctx.fillStyle = 'rgba(10, 10, 15, 0.03)';
+                this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+
+                const freqData = this.analyser ? new Uint8Array(this.analyser.frequencyBinCount) : [];
+                if (this.analyser) this.analyser.getByteFrequencyData(freqData);
+
+                const energy = freqData.length > 0 ? freqData[10] / 255 : 0;
+
+                // Move and draw orbs
+                this.orbs.forEach((orb, i) => {
+                    orb.angle += orb.speed * 0.01;
+                    orb.x += Math.cos(orb.angle) * (1 + energy * 3);
+                    orb.y += Math.sin(orb.angle * 0.7) * (1 + energy * 3);
+
+                    // Wrap around
+                    if (orb.x < -orb.radius) orb.x = this.canvas.width + orb.radius;
+                    if (orb.x > this.canvas.width + orb.radius) orb.x = -orb.radius;
+                    if (orb.y < -orb.radius) orb.y = this.canvas.height + orb.radius;
+                    if (orb.y > this.canvas.height + orb.radius) orb.y = -orb.radius;
+
+                    // Draw glow
+                    const gradient = this.ctx.createRadialGradient(
+                        orb.x, orb.y, 0,
+                        orb.x, orb.y, orb.radius * (1 + energy * 0.5)
+                    );
+                    gradient.addColorStop(0, `rgba(${orb.color.join(',')}, 0.3)`);
+                    gradient.addColorStop(1, 'rgba(0,0,0,0)');
+
+                    this.ctx.beginPath();
+                    this.ctx.arc(orb.x, orb.y, orb.radius * (1 + energy * 0.5), 0, Math.PI * 2);
+                    this.ctx.fillStyle = gradient;
+                    this.ctx.fill();
+
+                    // Inner glow
+                    this.ctx.beginPath();
+                    this.ctx.arc(orb.x, orb.y, orb.radius * 0.3, 0, Math.PI * 2);
+                    this.ctx.fillStyle = `rgba(${orb.color.join(',')}, 0.5)`;
+                    this.ctx.fill();
+                });
+
+                requestAnimationFrame(() => this.animate());
+            }
+
+            bindEvents() {
+                document.getElementById('start-btn').addEventListener('click', async () => {
+                    await this.initAudio();
+                    this.start();
+                });
+
+                document.addEventListener('click', async () => {
+                    if (!this.audioCtx) {
+                        await this.initAudio();
+                    }
+                }, { once: true });
+            }
+        }
+
+        new AmbientSoundscape();
+    </script>
+</body>
+</html>
diff --git a/playground/interactive.html b/playground/interactive.html
new file mode 100644
index 00000000..114a9395
--- /dev/null
+++ b/playground/interactive.html
@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive — 26 Key Shapes</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { background: #0a0a0f; overflow: hidden; height: 100vh; }
+        canvas { display: block; width: 100%; height: 100%; }
+        .title {
+            position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
+            color: rgba(255,255,255,0.1); font-size: 24px; font-family: sans-serif;
+            letter-spacing: 4px; text-transform: uppercase; pointer-events: none;
+        }
+        .key-hint {
+            position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
+            color: rgba(255,255,255,0.3); font-size: 14px; font-family: monospace;
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="title">Interactive</div>
+    <div class="key-hint">Press A-Z to play</div>
+    <canvas id="canvas"></canvas>
+    <script>
+        class Interactive {
+            constructor() {
+                this.canvas = document.getElementById('canvas');
+                this.ctx = this.canvas.getContext('2d');
+                this.audioCtx = null;
+                this.analyser = null;
+                this.shapes = [];
+                this.activeKeys = new Set();
+
+                this.resize();
+                window.addEventListener('resize', () => this.resize());
+
+                // 26 key mappings with unique shapes and frequencies
+                this.keyMap = {
+                    'a': { freq: 261.63, shape: 'circle', color: [255,100,100] },
+                    'b': { freq: 277.18, shape: 'square', color: [255,150,100] },
+                    'c': { freq: 293.66, shape: 'triangle', color: [255,200,100] },
+                    'd': { freq: 311.13, shape: 'diamond', color: [255,255,100] },
+                    'e': { freq: 329.63, shape: 'star', color: [200,255,100] },
+                    'f': { freq: 349.23, shape: 'hexagon', color: [150,255,100] },
+                    'g': { freq: 369.99, shape: 'cross', color: [100,255,100] },
+                    'h': { freq: 392.00, shape: 'circle', color: [100,255,150] },
+                    'i': { freq: 415.30, shape: 'square', color: [100,255,200] },
+                    'j': { freq: 440.00, shape: 'triangle', color: [100,255,255] },
+                    'k': { freq: 466.16, shape: 'diamond', color: [100,200,255] },
+                    'l': { freq: 493.88, shape: 'star', color: [100,150,255] },
+                    'm': { freq: 523.25, shape: 'hexagon', color: [100,100,255] },
+                    'n': { freq: 554.37, shape: 'cross', color: [150,100,255] },
+                    'o': { freq: 587.33, shape: 'circle', color: [200,100,255] },
+                    'p': { freq: 622.25, shape: 'square', color: [255,100,255] },
+                    'q': { freq: 659.25, shape: 'triangle', color: [255,100,200] },
+                    'r': { freq: 698.46, shape: 'diamond', color: [255,100,150] },
+                    's': { freq: 739.99, shape: 'star', color: [255,120,120] },
+                    't': { freq: 783.99, shape: 'hexagon', color: [255,170,120] },
+                    'u': { freq: 830.61, shape: 'cross', color: [255,220,120] },
+                    'v': { freq: 880.00, shape: 'circle', color: [220,255,120] },
+                    'w': { freq: 932.33, shape: 'square', color: [170,255,120] },
+                    'x': { freq: 987.77, shape: 'triangle', color: [120,255,120] },
+                    'y': { freq: 1046.50, shape: 'diamond', color: [120,255,170] },
+                    'z': { freq: 1108.73, shape: 'star', color: [120,255,220] }
+                };
+
+                this.bindEvents();
+                this.animate();
+            }
+
+            resize() {
+                this.canvas.width = window.innerWidth;
+                this.canvas.height = window.innerHeight;
+            }
+
+            async initAudio() {
+                if (this.audioCtx) return;
+
+                this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                this.analyser = this.audioCtx.createAnalyser();
+                this.analyser.fftSize = 256;
+                this.analyser.connect(this.audioCtx.destination);
+            }
+
+            playKey(key) {
+                if (!this.audioCtx || !this.keyMap[key]) return;
+
+                const { freq, shape, color } = this.keyMap[key];
+
+                // Play sound
+                const osc = this.audioCtx.createOscillator();
+                const gain = this.audioCtx.createGain();
+
+                osc.type = 'triangle';
+                osc.frequency.value = freq;
+                gain.gain.setValueAtTime(0.3, this.audioCtx.currentTime);
+                gain.gain.exponentialRampToValueAtTime(0.01, this.audioCtx.currentTime + 1);
+
+                osc.connect(gain);
+                gain.connect(this.analyser);
+                osc.start();
+                osc.stop(this.audioCtx.currentTime + 1);
+
+                // Create shape
+                const x = Math.random() * (this.canvas.width - 200) + 100;
+                const y = Math.random() * (this.canvas.height - 200) + 100;
+
+                this.shapes.push({
+                    key, x, y, shape, color,
+                    size: 50,
+                    maxSize: 150,
+                    life: 1,
+                    rotation: 0
+                });
+            }
+
+            drawShape(shape) {
+                const { x, y, size, rotation, shape: shapeType, color, life } = shape;
+
+                this.ctx.save();
+                this.ctx.translate(x, y);
+                this.ctx.rotate(rotation);
+                this.ctx.globalAlpha = life;
+
+                this.ctx.strokeStyle = `rgb(${color.join(',')})`;
+                this.ctx.lineWidth = 3;
+                this.ctx.fillStyle = `rgba(${color.join(',')}, 0.2)`;
+
+                this.ctx.beginPath();
+
+                switch (shapeType) {
+                    case 'circle':
+                        this.ctx.arc(0, 0, size, 0, Math.PI * 2);
+                        break;
+
+                    case 'square':
+                        this.ctx.rect(-size, -size, size * 2, size * 2);
+                        break;
+
+                    case 'triangle':
+                        this.ctx.moveTo(0, -size);
+                        this.ctx.lineTo(size * 0.866, size * 0.5);
+                        this.ctx.lineTo(-size * 0.866, size * 0.5);
+                        this.ctx.closePath();
+                        break;
+
+                    case 'diamond':
+                        this.ctx.moveTo(0, -size);
+                        this.ctx.lineTo(size * 0.7, 0);
+                        this.ctx.lineTo(0, size);
+                        this.ctx.lineTo(-size * 0.7, 0);
+                        this.ctx.closePath();
+                        break;
+
+                    case 'star':
+                        for (let i = 0; i < 5; i++) {
+                            const angle = (i * 4 * Math.PI) / 5 - Math.PI / 2;
+                            const method = i === 0 ? 'moveTo' : 'lineTo';
+                            this.ctx[method](Math.cos(angle) * size, Math.sin(angle) * size);
+                        }
+                        this.ctx.closePath();
+                        break;
+
+                    case 'hexagon':
+                        for (let i = 0; i < 6; i++) {
+                            const angle = (i * Math.PI) / 3;
+                            const method = i === 0 ? 'moveTo' : 'lineTo';
+                            this.ctx[method](Math.cos(angle) * size, Math.sin(angle) * size);
+                        }
+                        this.ctx.closePath();
+                        break;
+
+                    case 'cross':
+                        const w = size * 0.3;
+                        this.ctx.moveTo(-w, -size);
+                        this.ctx.lineTo(w, -size);
+                        this.ctx.lineTo(w, -w);
+                        this.ctx.lineTo(size, -w);
+                        this.ctx.lineTo(size, w);
+                        this.ctx.lineTo(w, w);
+                        this.ctx.lineTo(w, size);
+                        this.ctx.lineTo(-w, size);
+                        this.ctx.lineTo(-w, w);
+                        this.ctx.lineTo(-size, w);
+                        this.ctx.lineTo(-size, -w);
+                        this.ctx.lineTo(-w, -w);
+                        this.ctx.closePath();
+                        break;
+                }
+
+                this.ctx.fill();
+                this.ctx.stroke();
+
+                // Draw key label
+                this.ctx.fillStyle = `rgba(${color.join(',')}, ${life})`;
+                this.ctx.font = `${size * 0.4}px monospace`;
+                this.ctx.textAlign = 'center';
+                this.ctx.textBaseline = 'middle';
+                this.ctx.fillText(shape.key.toUpperCase(), 0, 0);
+
+                this.ctx.restore();
+            }
+
+            animate() {
+                this.ctx.fillStyle = 'rgba(10, 10, 15, 0.1)';
+                this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+
+                // Update and draw shapes
+                this.shapes = this.shapes.filter(shape => {
+                    shape.size += (shape.maxSize - shape.size) * 0.05;
+                    shape.rotation += 0.02;
+                    shape.life -= 0.01;
+
+                    if (shape.life <= 0) return false;
+
+                    this.drawShape(shape);
+                    return true;
+                });
+
+                // Draw active key indicators
+                const keyWidth = this.canvas.width / 13;
+                const keyHeight = 40;
+                const startY = this.canvas.height - 60;
+
+                let col = 0;
+                for (const key of 'abcdefghijklmnopqrstuvwxyz') {
+                    const x = col * keyWidth + keyWidth / 2;
+                    const isActive = this.activeKeys.has(key);
+
+                    this.ctx.fillStyle = isActive
+                        ? `rgba(${this.keyMap[key].color.join(',')}, 0.5)`
+                        : 'rgba(255,255,255,0.05)';
+
+                    this.ctx.beginPath();
+                    this.ctx.roundRect(x - 15, startY, 30, keyHeight, 5);
+                    this.ctx.fill();
+
+                    this.ctx.fillStyle = isActive ? '#fff' : 'rgba(255,255,255,0.3)';
+                    this.ctx.font = '12px monospace';
+                    this.ctx.textAlign = 'center';
+                    this.ctx.fillText(key.toUpperCase(), x, startY + 25);
+
+                    col++;
+                }
+
+                requestAnimationFrame(() => this.animate());
+            }
+
+            bindEvents() {
+                document.addEventListener('keydown', async (e) => {
+                    if (e.repeat) return;
+                    const key = e.key.toLowerCase();
+                    if (this.keyMap[key] && !this.activeKeys.has(key)) {
+                        await this.initAudio();
+                        this.activeKeys.add(key);
+                        this.playKey(key);
+                    }
+                });
+
+                document.addEventListener('keyup', (e) => {
+                    const key = e.key.toLowerCase();
+                    this.activeKeys.delete(key);
+                });
+
+                // Touch support
+                this.canvas.addEventListener('touchstart', async (e) => {
+                    e.preventDefault();
+                    await this.initAudio();
+
+                    // Map touch area to key
+                    for (const touch of e.changedTouches) {
+                        const keyIndex = Math.floor(touch.clientX / (this.canvas.width / 26));
+                        const key = 'abcdefghijklmnopqrstuvwxyz'[keyIndex];
+                        if (key) {
+                            this.activeKeys.add(key);
+                            this.playKey(key);
+                        }
+                    }
+                });
+
+                this.canvas.addEventListener('touchend', (e) => {
+                    e.preventDefault();
+                    this.activeKeys.clear();
+                });
+            }
+        }
+
+        new Interactive();
+    </script>
+</body>
+</html>
diff --git a/playground/playground.html b/playground/playground.html
new file mode 100644
index 00000000..643ccab2
--- /dev/null
+++ b/playground/playground.html
@@ -0,0 +1,1216 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sovereign Sound Playground</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            background: #0a0a0f;
+            color: #e0e0e0;
+            font-family: 'Segoe UI', system-ui, sans-serif;
+            overflow: hidden;
+            height: 100vh;
+        }
+
+        .playground-container {
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+        }
+
+        .visualizer-area {
+            flex: 1;
+            position: relative;
+            overflow: hidden;
+        }
+
+        #visualizer-canvas {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+
+        .controls-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding: 15px;
+            background: linear-gradient(to bottom, rgba(10,10,15,0.9), transparent);
+            display: flex;
+            gap: 15px;
+            align-items: center;
+            flex-wrap: wrap;
+            z-index: 10;
+        }
+
+        .control-group {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .control-group label {
+            font-size: 12px;
+            color: #888;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        select, button {
+            background: rgba(30,30,40,0.9);
+            border: 1px solid rgba(100,100,120,0.3);
+            color: #e0e0e0;
+            padding: 8px 12px;
+            border-radius: 6px;
+            font-size: 13px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        select:hover, button:hover {
+            background: rgba(50,50,70,0.9);
+            border-color: rgba(150,150,180,0.5);
+        }
+
+        button.active {
+            background: rgba(100,50,150,0.5);
+            border-color: rgba(150,100,200,0.7);
+        }
+
+        button.recording {
+            background: rgba(200,50,50,0.5);
+            border-color: rgba(250,100,100,0.7);
+            animation: pulse 1s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+
+        .piano-container {
+            height: 180px;
+            background: linear-gradient(to top, #0a0a0f, transparent);
+            position: relative;
+            z-index: 5;
+        }
+
+        #piano-canvas {
+            width: 100%;
+            height: 100%;
+        }
+
+        .info-panel {
+            position: absolute;
+            bottom: 190px;
+            left: 15px;
+            background: rgba(20,20,30,0.9);
+            border: 1px solid rgba(100,100,120,0.2);
+            border-radius: 8px;
+            padding: 12px 16px;
+            font-size: 13px;
+            max-width: 300px;
+            z-index: 10;
+        }
+
+        .info-panel h3 {
+            color: #a78bfa;
+            margin-bottom: 8px;
+            font-size: 14px;
+        }
+
+        .info-panel p {
+            color: #888;
+            line-height: 1.5;
+        }
+
+        .chord-display {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 48px;
+            font-weight: bold;
+            color: rgba(255,255,255,0.1);
+            pointer-events: none;
+            text-align: center;
+            z-index: 1;
+        }
+
+        .mode-indicator {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background: rgba(30,30,40,0.9);
+            border: 1px solid rgba(100,100,120,0.3);
+            border-radius: 20px;
+            padding: 6px 14px;
+            font-size: 12px;
+            color: #a78bfa;
+            z-index: 10;
+        }
+
+        .app-selector {
+            position: absolute;
+            top: 15px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 10;
+            display: flex;
+            gap: 8px;
+            background: rgba(20,20,30,0.9);
+            padding: 6px;
+            border-radius: 25px;
+            border: 1px solid rgba(100,100,120,0.2);
+        }
+
+        .app-btn {
+            padding: 6px 14px;
+            border-radius: 20px;
+            font-size: 12px;
+            background: transparent;
+            border: 1px solid transparent;
+        }
+
+        .app-btn.active {
+            background: rgba(100,50,150,0.3);
+            border-color: rgba(150,100,200,0.5);
+        }
+
+        .toast {
+            position: fixed;
+            bottom: 200px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(30,30,40,0.95);
+            border: 1px solid rgba(100,100,120,0.3);
+            border-radius: 8px;
+            padding: 10px 20px;
+            font-size: 13px;
+            color: #a78bfa;
+            z-index: 100;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+
+        .toast.show {
+            opacity: 1;
+        }
+
+        /* Synesthesia mode styles */
+        body.synesthesia .piano-container {
+            display: none;
+        }
+
+        body.synesthesia .visualizer-area {
+            cursor: crosshair;
+        }
+
+        /* Ambient mode styles */
+        body.ambient .controls-overlay {
+            opacity: 0;
+            transition: opacity 0.5s;
+        }
+
+        body.ambient .controls-overlay:hover {
+            opacity: 1;
+        }
+
+        /* Interactive mode styles */
+        body.interactive .chord-display {
+            font-size: 72px;
+            color: rgba(255,255,255,0.15);
+        }
+    </style>
+</head>
+<body>
+    <div class="playground-container">
+        <div class="visualizer-area">
+            <canvas id="visualizer-canvas"></canvas>
+
+            <div class="app-selector">
+                <button class="app-btn active" data-app="playground">Playground v3</button>
+                <button class="app-btn" data-app="synesthesia">Synesthesia</button>
+                <button class="app-btn" data-app="ambient">Ambient</button>
+                <button class="app-btn" data-app="interactive">Interactive</button>
+                <button class="app-btn" data-app="visualizer">Visualizer</button>
+            </div>
+
+            <div class="controls-overlay">
+                <div class="control-group">
+                    <label>Mode</label>
+                    <select id="mode-select">
+                        <option value="waveform">Waveform</option>
+                        <option value="particles">Particles</option>
+                        <option value="bars">Bars</option>
+                        <option value="spiral">Spiral</option>
+                        <option value="gravity">Gravity Well</option>
+                        <option value="strobe">Strobe</option>
+                    </select>
+                </div>
+
+                <div class="control-group">
+                    <label>Palette</label>
+                    <select id="palette-select">
+                        <option value="cosmic">Cosmic</option>
+                        <option value="sunset">Sunset</option>
+                        <option value="ocean">Ocean</option>
+                        <option value="forest">Forest</option>
+                        <option value="neon">Neon</option>
+                    </select>
+                </div>
+
+                <div class="control-group">
+                    <button id="ambient-toggle">Start Ambient</button>
+                    <button id="record-btn">Record</button>
+                    <button id="export-btn">Export PNG</button>
+                </div>
+            </div>
+
+            <div class="mode-indicator" id="mode-indicator">Waveform</div>
+
+            <div class="info-panel" id="info-panel">
+                <h3>Sovereign Sound Playground</h3>
+                <p>Play notes on the piano below, or click/drag on the visualizer to create sound. Use the mode selector to change visualization styles.</p>
+                <p style="margin-top: 8px; font-size: 11px; color: #666;">Touch supported • MIDI coming soon</p>
+            </div>
+
+            <div class="chord-display" id="chord-display"></div>
+        </div>
+
+        <div class="piano-container">
+            <canvas id="piano-canvas"></canvas>
+        </div>
+    </div>
+
+    <div class="toast" id="toast"></div>
+
+    <script>
+        // ===== AUDIO ENGINE =====
+        class SovereignAudio {
+            constructor() {
+                this.ctx = null;
+                this.masterGain = null;
+                this.analyser = null;
+                this.isInitialized = false;
+                this.activeOscillators = new Map();
+                this.recorder = null;
+                this.recordedChunks = [];
+                this.isRecording = false;
+            }
+
+            async init() {
+                if (this.isInitialized) return;
+
+                this.ctx = new (window.AudioContext || window.webkitAudioContext)();
+                this.masterGain = this.ctx.createGain();
+                this.masterGain.gain.value = 0.3;
+
+                this.analyser = this.ctx.createAnalyser();
+                this.analyser.fftSize = 2048;
+                this.analyser.smoothingTimeConstant = 0.8;
+
+                this.masterGain.connect(this.analyser);
+                this.analyser.connect(this.ctx.destination);
+
+                this.isInitialized = true;
+            }
+
+            playNote(frequency, duration = null, type = 'sine') {
+                if (!this.isInitialized) return;
+
+                const osc = this.ctx.createOscillator();
+                const gain = this.ctx.createGain();
+
+                osc.type = type;
+                osc.frequency.value = frequency;
+
+                gain.gain.setValueAtTime(0.4, this.ctx.currentTime);
+                gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + (duration || 2));
+
+                osc.connect(gain);
+                gain.connect(this.masterGain);
+
+                osc.start();
+                osc.stop(this.ctx.currentTime + (duration || 2));
+
+                const id = Date.now() + Math.random();
+                this.activeOscillators.set(id, { osc, gain });
+
+                osc.onended = () => {
+                    this.activeOscillators.delete(id);
+                };
+
+                return id;
+            }
+
+            playChord(frequencies, type = 'sine') {
+                frequencies.forEach((freq, i) => {
+                    setTimeout(() => this.playNote(freq, 1.5, type), i * 50);
+                });
+            }
+
+            stopAll() {
+                this.activeOscillators.forEach(({ osc, gain }) => {
+                    try {
+                        gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + 0.1);
+                        osc.stop(this.ctx.currentTime + 0.15);
+                    } catch (e) {}
+                });
+                this.activeOscillators.clear();
+            }
+
+            getFrequencyData() {
+                if (!this.analyser) return new Uint8Array(0);
+                const data = new Uint8Array(this.analyser.frequencyBinCount);
+                this.analyser.getByteFrequencyData(data);
+                return data;
+            }
+
+            getTimeDomainData() {
+                if (!this.analyser) return new Uint8Array(0);
+                const data = new Uint8Array(this.analyser.frequencyBinCount);
+                this.analyser.getByteTimeDomainData(data);
+                return data;
+            }
+
+            async startRecording() {
+                if (!this.ctx || this.isRecording) return;
+
+                const dest = this.ctx.createMediaStreamDestination();
+                this.masterGain.connect(dest);
+
+                this.recorder = new MediaRecorder(dest.stream);
+                this.recordedChunks = [];
+
+                this.recorder.ondataavailable = (e) => {
+                    if (e.data.size > 0) {
+                        this.recordedChunks.push(e.data);
+                    }
+                };
+
+                this.recorder.onstop = () => {
+                    const blob = new Blob(this.recordedChunks, { type: 'audio/wav' });
+                    const url = URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = `sovereign-sound-${Date.now()}.wav`;
+                    a.click();
+                    URL.revokeObjectURL(url);
+                };
+
+                this.recorder.start();
+                this.isRecording = true;
+            }
+
+            stopRecording() {
+                if (this.recorder && this.isRecording) {
+                    this.recorder.stop();
+                    this.isRecording = false;
+                }
+            }
+        }
+
+        // ===== VISUALIZER =====
+        class SovereignVisualizer {
+            constructor(canvas, audio) {
+                this.canvas = canvas;
+                this.ctx = canvas.getContext('2d');
+                this.audio = audio;
+                this.mode = 'waveform';
+                this.palette = 'cosmic';
+                this.particles = [];
+                this.spiralAngle = 0;
+                this.strobePhase = 0;
+                this.mouseDown = false;
+                this.mousePos = { x: 0, y: 0 };
+                this.lastMouseNote = null;
+
+                this.palettes = {
+                    cosmic: ['#a78bfa', '#818cf8', '#6366f1', '#8b5cf6', '#7c3aed'],
+                    sunset: ['#f97316', '#fb923c', '#fbbf24', '#f59e0b', '#ef4444'],
+                    ocean: ['#06b6d4', '#0891b2', '#0e7490', '#22d3ee', '#67e8f9'],
+                    forest: ['#22c55e', '#16a34a', '#15803d', '#4ade80', '#86efac'],
+                    neon: ['#f0abfc', '#e879f9', '#d946ef', '#c026d3', '#a21caf']
+                };
+
+                this.resize();
+                window.addEventListener('resize', () => this.resize());
+            }
+
+            resize() {
+                this.canvas.width = this.canvas.offsetWidth * window.devicePixelRatio;
+                this.canvas.height = this.canvas.offsetHeight * window.devicePixelRatio;
+                this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+            }
+
+            getColor(index, alpha = 1) {
+                const colors = this.palettes[this.palette];
+                const color = colors[index % colors.length];
+                if (alpha === 1) return color;
+                const r = parseInt(color.slice(1, 3), 16);
+                const g = parseInt(color.slice(3, 5), 16);
+                const b = parseInt(color.slice(5, 7), 16);
+                return `rgba(${r},${g},${b},${alpha})`;
+            }
+
+            draw() {
+                const w = this.canvas.offsetWidth;
+                const h = this.canvas.offsetHeight;
+
+                this.ctx.fillStyle = 'rgba(10, 10, 15, 0.15)';
+                this.ctx.fillRect(0, 0, w, h);
+
+                const freqData = this.audio.getFrequencyData();
+                const timeData = this.audio.getTimeDomainData();
+
+                switch (this.mode) {
+                    case 'waveform': this.drawWaveform(w, h, timeData); break;
+                    case 'particles': this.drawParticles(w, h, freqData); break;
+                    case 'bars': this.drawBars(w, h, freqData); break;
+                    case 'spiral': this.drawSpiral(w, h, freqData); break;
+                    case 'gravity': this.drawGravity(w, h, freqData); break;
+                    case 'strobe': this.drawStrobe(w, h, freqData); break;
+                }
+
+                requestAnimationFrame(() => this.draw());
+            }
+
+            drawWaveform(w, h, data) {
+                if (data.length === 0) return;
+
+                this.ctx.beginPath();
+                this.ctx.strokeStyle = this.getColor(0);
+                this.ctx.lineWidth = 2;
+
+                const sliceWidth = w / data.length;
+                let x = 0;
+
+                for (let i = 0; i < data.length; i++) {
+                    const v = data[i] / 128.0;
+                    const y = (v * h) / 2;
+
+                    if (i === 0) {
+                        this.ctx.moveTo(x, y);
+                    } else {
+                        this.ctx.lineTo(x, y);
+                    }
+                    x += sliceWidth;
+                }
+
+                this.ctx.stroke();
+
+                // Glow effect
+                this.ctx.strokeStyle = this.getColor(0, 0.3);
+                this.ctx.lineWidth = 6;
+                this.ctx.stroke();
+            }
+
+            drawParticles(w, h, data) {
+                // Spawn new particles based on audio
+                const bassEnergy = data.length > 10 ? data[5] / 255 : 0;
+
+                if (bassEnergy > 0.3 && this.particles.length < 500) {
+                    for (let i = 0; i < Math.floor(bassEnergy * 5); i++) {
+                        this.particles.push({
+                            x: w / 2 + (Math.random() - 0.5) * 100,
+                            y: h / 2 + (Math.random() - 0.5) * 100,
+                            vx: (Math.random() - 0.5) * 4 * bassEnergy,
+                            vy: (Math.random() - 0.5) * 4 * bassEnergy,
+                            life: 1,
+                            size: Math.random() * 4 + 2,
+                            colorIndex: Math.floor(Math.random() * 5)
+                        });
+                    }
+                }
+
+                // Update and draw particles
+                this.particles = this.particles.filter(p => {
+                    p.x += p.vx;
+                    p.y += p.vy;
+                    p.life -= 0.008;
+                    p.vy += 0.02; // gravity
+
+                    if (p.life <= 0) return false;
+
+                    this.ctx.beginPath();
+                    this.ctx.arc(p.x, p.y, p.size * p.life, 0, Math.PI * 2);
+                    this.ctx.fillStyle = this.getColor(p.colorIndex, p.life * 0.8);
+                    this.ctx.fill();
+
+                    return true;
+                });
+            }
+
+            drawBars(w, h, data) {
+                const barCount = 64;
+                const barWidth = w / barCount;
+                const step = Math.floor(data.length / barCount);
+
+                for (let i = 0; i < barCount; i++) {
+                    const value = data[i * step] || 0;
+                    const barHeight = (value / 255) * h * 0.8;
+                    const colorIndex = Math.floor((i / barCount) * 5);
+
+                    this.ctx.fillStyle = this.getColor(colorIndex, 0.8);
+                    this.ctx.fillRect(
+                        i * barWidth + 1,
+                        h - barHeight,
+                        barWidth - 2,
+                        barHeight
+                    );
+
+                    // Mirror on top
+                    this.ctx.fillStyle = this.getColor(colorIndex, 0.2);
+                    this.ctx.fillRect(
+                        i * barWidth + 1,
+                        0,
+                        barWidth - 2,
+                        barHeight * 0.3
+                    );
+                }
+            }
+
+            drawSpiral(w, h, data) {
+                this.spiralAngle += 0.02;
+                const cx = w / 2;
+                const cy = h / 2;
+                const maxRadius = Math.min(w, h) * 0.4;
+
+                for (let i = 0; i < data.length; i += 4) {
+                    const value = data[i] / 255;
+                    const angle = this.spiralAngle + (i / data.length) * Math.PI * 8;
+                    const radius = (i / data.length) * maxRadius * (1 + value * 0.5);
+
+                    const x = cx + Math.cos(angle) * radius;
+                    const y = cy + Math.sin(angle) * radius;
+
+                    this.ctx.beginPath();
+                    this.ctx.arc(x, y, 2 + value * 4, 0, Math.PI * 2);
+                    this.ctx.fillStyle = this.getColor(Math.floor(i / 60) % 5, 0.5 + value * 0.5);
+                    this.ctx.fill();
+                }
+            }
+
+            drawGravity(w, h, data) {
+                const cx = w / 2;
+                const cy = h / 2;
+                const bassEnergy = data.length > 20 ? data[10] / 255 : 0;
+                const midEnergy = data.length > 100 ? data[50] / 255 : 0;
+
+                // Gravity rings
+                for (let i = 0; i < 5; i++) {
+                    const radius = 50 + i * 40 + bassEnergy * 30;
+                    this.ctx.beginPath();
+                    this.ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+                    this.ctx.strokeStyle = this.getColor(i, 0.3 + midEnergy * 0.5);
+                    this.ctx.lineWidth = 2 + midEnergy * 3;
+                    this.ctx.stroke();
+                }
+
+                // Orbiting dots
+                const time = Date.now() / 1000;
+                for (let i = 0; i < 20; i++) {
+                    const angle = time * (0.5 + i * 0.1) + i;
+                    const dist = 80 + Math.sin(time + i) * 30 + bassEnergy * 50;
+                    const x = cx + Math.cos(angle) * dist;
+                    const y = cy + Math.sin(angle) * dist;
+
+                    this.ctx.beginPath();
+                    this.ctx.arc(x, y, 3 + midEnergy * 5, 0, Math.PI * 2);
+                    this.ctx.fillStyle = this.getColor(i % 5, 0.8);
+                    this.ctx.fill();
+                }
+            }
+
+            drawStrobe(w, h, data) {
+                this.strobePhase += 0.1;
+                const bassEnergy = data.length > 10 ? data[5] / 255 : 0;
+
+                // Flash on beat
+                if (bassEnergy > 0.6) {
+                    this.ctx.fillStyle = `rgba(255,255,255,${bassEnergy * 0.15})`;
+                    this.ctx.fillRect(0, 0, w, h);
+                }
+
+                // Geometric patterns
+                const cx = w / 2;
+                const cy = h / 2;
+                const segments = 12;
+
+                for (let i = 0; i < segments; i++) {
+                    const angle = (i / segments) * Math.PI * 2 + this.strobePhase;
+                    const value = data[i * 10 % data.length] / 255;
+
+                    this.ctx.save();
+                    this.ctx.translate(cx, cy);
+                    this.ctx.rotate(angle);
+
+                    this.ctx.beginPath();
+                    this.ctx.moveTo(0, 0);
+                    this.ctx.lineTo(100 + value * 200, -20);
+                    this.ctx.lineTo(100 + value * 200, 20);
+                    this.ctx.closePath();
+
+                    this.ctx.fillStyle = this.getColor(i % 5, 0.4 + value * 0.4);
+                    this.ctx.fill();
+
+                    this.ctx.restore();
+                }
+            }
+
+            handleMouse(x, y, isDown) {
+                this.mouseDown = isDown;
+                this.mousePos = { x, y };
+
+                if (isDown && this.audio.isInitialized) {
+                    // Map mouse position to frequency
+                    const freq = 100 + (x / this.canvas.offsetWidth) * 800;
+                    const noteId = Math.round(freq);
+
+                    if (noteId !== this.lastMouseNote) {
+                        this.audio.playNote(freq, 0.3, 'sine');
+                        this.lastMouseNote = noteId;
+                    }
+                }
+            }
+        }
+
+        // ===== PIANO KEYBOARD =====
+        class SovereignPiano {
+            constructor(canvas, audio) {
+                this.canvas = canvas;
+                this.ctx = canvas.getContext('2d');
+                this.audio = audio;
+
+                this.notes = [
+                    { note: 'C', freq: 261.63, type: 'white' },
+                    { note: 'C#', freq: 277.18, type: 'black' },
+                    { note: 'D', freq: 293.66, type: 'white' },
+                    { note: 'D#', freq: 311.13, type: 'black' },
+                    { note: 'E', freq: 329.63, type: 'white' },
+                    { note: 'F', freq: 349.23, type: 'white' },
+                    { note: 'F#', freq: 369.99, type: 'black' },
+                    { note: 'G', freq: 392.00, type: 'white' },
+                    { note: 'G#', freq: 415.30, type: 'black' },
+                    { note: 'A', freq: 440.00, type: 'white' },
+                    { note: 'A#', freq: 466.16, type: 'black' },
+                    { note: 'B', freq: 493.88, type: 'white' },
+                    { note: 'C2', freq: 523.25, type: 'white' },
+                    { note: 'C#2', freq: 554.37, type: 'black' },
+                    { note: 'D2', freq: 587.33, type: 'white' },
+                    { note: 'D#2', freq: 622.25, type: 'black' },
+                    { note: 'E2', freq: 659.25, type: 'white' },
+                    { note: 'F2', freq: 698.46, type: 'white' },
+                    { note: 'F#2', freq: 739.99, type: 'black' },
+                    { note: 'G2', freq: 783.99, type: 'white' },
+                    { note: 'G#2', freq: 830.61, type: 'black' },
+                    { note: 'A2', freq: 880.00, type: 'white' },
+                    { note: 'A#2', freq: 932.33, type: 'black' },
+                    { note: 'B2', freq: 987.77, type: 'white' },
+                    { note: 'C3', freq: 1046.50, type: 'white' }
+                ];
+
+                this.activeKeys = new Set();
+                this.resize();
+                window.addEventListener('resize', () => this.resize());
+            }
+
+            resize() {
+                this.canvas.width = this.canvas.offsetWidth * window.devicePixelRatio;
+                this.canvas.height = this.canvas.offsetHeight * window.devicePixelRatio;
+                this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+                this.draw();
+            }
+
+            draw() {
+                const w = this.canvas.offsetWidth;
+                const h = this.canvas.offsetHeight;
+
+                this.ctx.clearRect(0, 0, w, h);
+
+                const whiteKeys = this.notes.filter(n => n.type === 'white');
+                const blackKeys = this.notes.filter(n => n.type === 'black');
+                const whiteKeyWidth = w / whiteKeys.length;
+
+                // Draw white keys
+                let whiteIndex = 0;
+                this.notes.forEach((note, i) => {
+                    if (note.type === 'white') {
+                        const x = whiteIndex * whiteKeyWidth;
+                        const isActive = this.activeKeys.has(i);
+
+                        this.ctx.fillStyle = isActive ? '#a78bfa' : '#e0e0e0';
+                        this.ctx.fillRect(x + 1, 0, whiteKeyWidth - 2, h - 5);
+
+                        this.ctx.strokeStyle = '#333';
+                        this.ctx.strokeRect(x + 1, 0, whiteKeyWidth - 2, h - 5);
+
+                        // Note label
+                        this.ctx.fillStyle = isActive ? '#fff' : '#333';
+                        this.ctx.font = '12px sans-serif';
+                        this.ctx.textAlign = 'center';
+                        this.ctx.fillText(note.note, x + whiteKeyWidth / 2, h - 15);
+
+                        whiteIndex++;
+                    }
+                });
+
+                // Draw black keys
+                whiteIndex = 0;
+                this.notes.forEach((note, i) => {
+                    if (note.type === 'white') {
+                        whiteIndex++;
+                    } else {
+                        const x = whiteIndex * whiteKeyWidth - whiteKeyWidth * 0.3;
+                        const isActive = this.activeKeys.has(i);
+
+                        this.ctx.fillStyle = isActive ? '#7c3aed' : '#1a1a2e';
+                        this.ctx.fillRect(x, 0, whiteKeyWidth * 0.6, h * 0.6);
+
+                        this.ctx.strokeStyle = '#000';
+                        this.ctx.strokeRect(x, 0, whiteKeyWidth * 0.6, h * 0.6);
+                    }
+                });
+            }
+
+            getKeyAtPosition(x, y) {
+                const w = this.canvas.offsetWidth;
+                const h = this.canvas.offsetHeight;
+                const whiteKeys = this.notes.filter(n => n.type === 'white');
+                const whiteKeyWidth = w / whiteKeys.length;
+
+                // Check black keys first (they're on top)
+                let whiteIndex = 0;
+                for (let i = 0; i < this.notes.length; i++) {
+                    const note = this.notes[i];
+                    if (note.type === 'white') {
+                        whiteIndex++;
+                    } else {
+                        const x1 = whiteIndex * whiteKeyWidth - whiteKeyWidth * 0.3;
+                        const x2 = x1 + whiteKeyWidth * 0.6;
+                        if (x >= x1 && x <= x2 && y <= h * 0.6) {
+                            return i;
+                        }
+                    }
+                }
+
+                // Check white keys
+                whiteIndex = 0;
+                for (let i = 0; i < this.notes.length; i++) {
+                    if (this.notes[i].type === 'white') {
+                        const x1 = whiteIndex * whiteKeyWidth;
+                        if (x >= x1 && x < x1 + whiteKeyWidth) {
+                            return i;
+                        }
+                        whiteIndex++;
+                    }
+                }
+
+                return -1;
+            }
+
+            pressKey(index) {
+                if (index >= 0 && index < this.notes.length) {
+                    this.activeKeys.add(index);
+                    this.audio.playNote(this.notes[index].freq, 1.5, 'triangle');
+                    this.draw();
+
+                    // Trigger chord detection
+                    this.detectChord();
+                }
+            }
+
+            releaseKey(index) {
+                this.activeKeys.delete(index);
+                this.draw();
+            }
+
+            detectChord() {
+                if (this.activeKeys.size < 2) {
+                    document.getElementById('chord-display').textContent = '';
+                    return;
+                }
+
+                const activeNotes = [...this.activeKeys].map(i => this.notes[i].note.replace(/[0-9]/g, ''));
+                const uniqueNotes = [...new Set(activeNotes)].sort();
+
+                // Simple chord detection
+                const chordMap = {
+                    'C,E,G': 'C Major',
+                    'C,E♭,G': 'C Minor',
+                    'D,F♯,A': 'D Major',
+                    'D,F,A': 'D Minor',
+                    'E,G♯,B': 'E Major',
+                    'E,G,B': 'E Minor',
+                    'F,A,C': 'F Major',
+                    'F,A♭,C': 'F Minor',
+                    'G,B,D': 'G Major',
+                    'G,B♭,D': 'G Minor',
+                    'A,C♯,E': 'A Major',
+                    'A,C,E': 'A Minor',
+                    'B,D♯,F♯': 'B Major',
+                    'B,D,F♯': 'B Minor'
+                };
+
+                const key = uniqueNotes.join(',');
+                const chord = chordMap[key] || uniqueNotes.join(' ');
+
+                document.getElementById('chord-display').textContent = chord;
+            }
+        }
+
+        // ===== AMBIENT ENGINE =====
+        class AmbientEngine {
+            constructor(audio) {
+                this.audio = audio;
+                this.isPlaying = false;
+                this.intervalId = null;
+                this.currentChord = 0;
+
+                this.progressions = [
+                    // I - V - vi - IV
+                    [[261.63, 329.63, 392.00], [392.00, 493.88, 587.33], [440.00, 523.25, 659.25], [349.23, 440.00, 523.25]],
+                    // vi - IV - I - V
+                    [[440.00, 523.25, 659.25], [349.23, 440.00, 523.25], [261.63, 329.63, 392.00], [392.00, 493.88, 587.33]],
+                    // I - vi - IV - V
+                    [[261.63, 329.63, 392.00], [440.00, 523.25, 659.25], [349.23, 440.00, 523.25], [392.00, 493.88, 587.33]]
+                ];
+            }
+
+            start() {
+                if (this.isPlaying) return;
+                this.isPlaying = true;
+
+                const playNext = () => {
+                    if (!this.isPlaying) return;
+
+                    const progression = this.progressions[Math.floor(Math.random() * this.progressions.length)];
+                    const chord = progression[this.currentChord % progression.length];
+
+                    this.audio.playChord(chord, 'sine');
+
+                    // Add some ambient texture
+                    setTimeout(() => {
+                        if (this.isPlaying) {
+                            const highNote = chord[0] * 2;
+                            this.audio.playNote(highNote, 2, 'sine');
+                        }
+                    }, 500);
+
+                    this.currentChord++;
+                };
+
+                playNext();
+                this.intervalId = setInterval(playNext, 3000);
+            }
+
+            stop() {
+                this.isPlaying = false;
+                if (this.intervalId) {
+                    clearInterval(this.intervalId);
+                    this.intervalId = null;
+                }
+                this.audio.stopAll();
+            }
+
+            toggle() {
+                if (this.isPlaying) {
+                    this.stop();
+                } else {
+                    this.start();
+                }
+                return this.isPlaying;
+            }
+        }
+
+        // ===== APP CONTROLLER =====
+        class SovereignPlayground {
+            constructor() {
+                this.audio = new SovereignAudio();
+                this.visualizer = null;
+                this.piano = null;
+                this.ambient = null;
+                this.currentApp = 'playground';
+
+                this.init();
+            }
+
+            async init() {
+                // Initialize audio on first interaction
+                document.addEventListener('click', async () => {
+                    await this.audio.init();
+                }, { once: true });
+
+                document.addEventListener('touchstart', async () => {
+                    await this.audio.init();
+                }, { once: true });
+
+                // Setup visualizer
+                const visCanvas = document.getElementById('visualizer-canvas');
+                this.visualizer = new SovereignVisualizer(visCanvas, this.audio);
+
+                // Setup piano
+                const pianoCanvas = document.getElementById('piano-canvas');
+                this.piano = new SovereignPiano(pianoCanvas, this.audio);
+
+                // Setup ambient engine
+                this.ambient = new AmbientEngine(this.audio);
+
+                // Start animation loop
+                this.visualizer.draw();
+
+                // Bind controls
+                this.bindControls();
+
+                // Bind mouse/touch events
+                this.bindEvents();
+            }
+
+            bindControls() {
+                // Mode selector
+                document.getElementById('mode-select').addEventListener('change', (e) => {
+                    this.visualizer.mode = e.target.value;
+                    document.getElementById('mode-indicator').textContent = e.target.options[e.target.selectedIndex].text;
+                });
+
+                // Palette selector
+                document.getElementById('palette-select').addEventListener('change', (e) => {
+                    this.visualizer.palette = e.target.value;
+                });
+
+                // Ambient toggle
+                document.getElementById('ambient-toggle').addEventListener('click', () => {
+                    const isPlaying = this.ambient.toggle();
+                    document.getElementById('ambient-toggle').textContent = isPlaying ? 'Stop Ambient' : 'Start Ambient';
+                    document.getElementById('ambient-toggle').classList.toggle('active', isPlaying);
+                });
+
+                // Record button
+                document.getElementById('record-btn').addEventListener('click', async () => {
+                    await this.audio.init();
+
+                    if (this.audio.isRecording) {
+                        this.audio.stopRecording();
+                        document.getElementById('record-btn').classList.remove('recording');
+                        document.getElementById('record-btn').textContent = 'Record';
+                        this.showToast('Recording saved');
+                    } else {
+                        await this.audio.startRecording();
+                        document.getElementById('record-btn').classList.add('recording');
+                        document.getElementById('record-btn').textContent = 'Stop';
+                        this.showToast('Recording started');
+                    }
+                });
+
+                // Export PNG
+                document.getElementById('export-btn').addEventListener('click', () => {
+                    const canvas = document.getElementById('visualizer-canvas');
+                    const link = document.createElement('a');
+                    link.download = `sovereign-sound-${Date.now()}.png`;
+                    link.href = canvas.toDataURL('image/png');
+                    link.click();
+                    this.showToast('Image exported');
+                });
+
+                // App selector
+                document.querySelectorAll('.app-btn').forEach(btn => {
+                    btn.addEventListener('click', (e) => {
+                        document.querySelectorAll('.app-btn').forEach(b => b.classList.remove('active'));
+                        e.target.classList.add('active');
+                        this.switchApp(e.target.dataset.app);
+                    });
+                });
+            }
+
+            bindEvents() {
+                const visCanvas = document.getElementById('visualizer-canvas');
+                const pianoCanvas = document.getElementById('piano-canvas');
+
+                // Visualizer mouse events
+                visCanvas.addEventListener('mousedown', (e) => {
+                    const rect = visCanvas.getBoundingClientRect();
+                    this.visualizer.handleMouse(e.clientX - rect.left, e.clientY - rect.top, true);
+                });
+
+                visCanvas.addEventListener('mousemove', (e) => {
+                    if (this.visualizer.mouseDown) {
+                        const rect = visCanvas.getBoundingClientRect();
+                        this.visualizer.handleMouse(e.clientX - rect.left, e.clientY - rect.top, true);
+                    }
+                });
+
+                visCanvas.addEventListener('mouseup', () => {
+                    this.visualizer.mouseDown = false;
+                    this.visualizer.lastMouseNote = null;
+                });
+
+                visCanvas.addEventListener('mouseleave', () => {
+                    this.visualizer.mouseDown = false;
+                    this.visualizer.lastMouseNote = null;
+                });
+
+                // Piano mouse events
+                pianoCanvas.addEventListener('mousedown', async (e) => {
+                    await this.audio.init();
+                    const rect = pianoCanvas.getBoundingClientRect();
+                    const x = e.clientX - rect.left;
+                    const y = e.clientY - rect.top;
+                    const keyIndex = this.piano.getKeyAtPosition(x, y);
+                    if (keyIndex >= 0) {
+                        this.piano.pressKey(keyIndex);
+                    }
+                });
+
+                pianoCanvas.addEventListener('mouseup', () => {
+                    this.piano.activeKeys.clear();
+                    this.piano.draw();
+                });
+
+                pianoCanvas.addEventListener('mouseleave', () => {
+                    this.piano.activeKeys.clear();
+                    this.piano.draw();
+                });
+
+                // Touch events for piano
+                pianoCanvas.addEventListener('touchstart', async (e) => {
+                    e.preventDefault();
+                    await this.audio.init();
+                    const rect = pianoCanvas.getBoundingClientRect();
+                    for (const touch of e.changedTouches) {
+                        const x = touch.clientX - rect.left;
+                        const y = touch.clientY - rect.top;
+                        const keyIndex = this.piano.getKeyAtPosition(x, y);
+                        if (keyIndex >= 0) {
+                            this.piano.pressKey(keyIndex);
+                        }
+                    }
+                });
+
+                pianoCanvas.addEventListener('touchend', (e) => {
+                    e.preventDefault();
+                    this.piano.activeKeys.clear();
+                    this.piano.draw();
+                });
+
+                // Touch events for visualizer
+                visCanvas.addEventListener('touchstart', async (e) => {
+                    e.preventDefault();
+                    await this.audio.init();
+                    const rect = visCanvas.getBoundingClientRect();
+                    const touch = e.changedTouches[0];
+                    this.visualizer.handleMouse(touch.clientX - rect.left, touch.clientY - rect.top, true);
+                });
+
+                visCanvas.addEventListener('touchmove', (e) => {
+                    e.preventDefault();
+                    if (this.visualizer.mouseDown) {
+                        const rect = visCanvas.getBoundingClientRect();
+                        const touch = e.changedTouches[0];
+                        this.visualizer.handleMouse(touch.clientX - rect.left, touch.clientY - rect.top, true);
+                    }
+                });
+
+                visCanvas.addEventListener('touchend', () => {
+                    this.visualizer.mouseDown = false;
+                    this.visualizer.lastMouseNote = null;
+                });
+
+                // Keyboard support
+                const keyMap = {
+                    'a': 0, 'w': 1, 's': 2, 'e': 3, 'd': 4, 'f': 5,
+                    't': 6, 'g': 7, 'y': 8, 'h': 9, 'u': 10, 'j': 11,
+                    'k': 12, 'o': 13, 'l': 14, 'p': 15, ';': 16
+                };
+
+                document.addEventListener('keydown', async (e) => {
+                    if (e.repeat) return;
+                    const key = e.key.toLowerCase();
+                    if (key in keyMap) {
+                        await this.audio.init();
+                        this.piano.pressKey(keyMap[key]);
+                    }
+                });
+
+                document.addEventListener('keyup', (e) => {
+                    const key = e.key.toLowerCase();
+                    if (key in keyMap) {
+                        this.piano.releaseKey(keyMap[key]);
+                    }
+                });
+            }
+
+            switchApp(app) {
+                this.currentApp = app;
+                document.body.className = app === 'playground' ? '' : app;
+
+                // Update mode based on app
+                const modeSelect = document.getElementById('mode-select');
+                const infoPanel = document.getElementById('info-panel');
+
+                switch (app) {
+                    case 'playground':
+                        modeSelect.value = 'waveform';
+                        this.visualizer.mode = 'waveform';
+                        infoPanel.querySelector('h3').textContent = 'Sovereign Sound Playground';
+                        infoPanel.querySelector('p').textContent = 'Play notes on the piano below, or click/drag on the visualizer to create sound.';
+                        break;
+
+                    case 'synesthesia':
+                        modeSelect.value = 'particles';
+                        this.visualizer.mode = 'particles';
+                        infoPanel.querySelector('h3').textContent = 'Synesthesia';
+                        infoPanel.querySelector('p').textContent = 'Paint with sound. Click and drag to create colors and shapes that respond to your movement.';
+                        break;
+
+                    case 'ambient':
+                        modeSelect.value = 'gravity';
+                        this.visualizer.mode = 'gravity';
+                        if (!this.ambient.isPlaying) {
+                            this.ambient.start();
+                            document.getElementById('ambient-toggle').textContent = 'Stop Ambient';
+                            document.getElementById('ambient-toggle').classList.add('active');
+                        }
+                        infoPanel.querySelector('h3').textContent = 'Ambient Soundscape';
+                        infoPanel.querySelector('p').textContent = 'An evolving soundscape that responds to the visualization. Let it wash over you.';
+                        break;
+
+                    case 'interactive':
+                        modeSelect.value = 'bars';
+                        this.visualizer.mode = 'bars';
+                        infoPanel.querySelector('h3').textContent = 'Interactive';
+                        infoPanel.querySelector('p').textContent = '26 key mappings. Use your keyboard (A-;) to play notes and see the visual response.';
+                        break;
+
+                    case 'visualizer':
+                        modeSelect.value = 'spiral';
+                        this.visualizer.mode = 'spiral';
+                        infoPanel.querySelector('h3').textContent = 'WAV Visualizer';
+                        infoPanel.querySelector('p').textContent = 'Upload or play audio to see frequency visualization in real-time.';
+                        break;
+                }
+
+                document.getElementById('mode-indicator').textContent = modeSelect.options[modeSelect.selectedIndex].text;
+            }
+
+            showToast(message) {
+                const toast = document.getElementById('toast');
+                toast.textContent = message;
+                toast.classList.add('show');
+                setTimeout(() => toast.classList.remove('show'), 2000);
+            }
+        }
+
+        // Initialize
+        const playground = new SovereignPlayground();
+    </script>
+</body>
+</html>
diff --git a/playground/synesthesia.html b/playground/synesthesia.html
new file mode 100644
index 00000000..a8abb87f
--- /dev/null
+++ b/playground/synesthesia.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Synesthesia — Paint with Sound</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { background: #0a0a0f; overflow: hidden; height: 100vh; cursor: crosshair; }
+        canvas { display: block; width: 100%; height: 100%; }
+        .title {
+            position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
+            color: rgba(255,255,255,0.15); font-size: 24px; font-family: sans-serif;
+            letter-spacing: 4px; text-transform: uppercase; pointer-events: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="title">Synesthesia</div>
+    <canvas id="canvas"></canvas>
+    <script>
+        class Synesthesia {
+            constructor() {
+                this.canvas = document.getElementById('canvas');
+                this.ctx = this.canvas.getContext('2d');
+                this.audioCtx = null;
+                this.analyser = null;
+                this.particles = [];
+                this.trails = [];
+                this.mouse = { x: 0, y: 0, down: false };
+                this.lastNote = null;
+
+                this.colors = [
+                    [255, 100, 150], [100, 200, 255], [150, 255, 150],
+                    [255, 200, 100], [200, 150, 255]
+                ];
+
+                this.resize();
+                window.addEventListener('resize', () => this.resize());
+                this.bindEvents();
+                this.animate();
+            }
+
+            resize() {
+                this.canvas.width = window.innerWidth;
+                this.canvas.height = window.innerHeight;
+            }
+
+            async initAudio() {
+                if (this.audioCtx) return;
+                this.audioCtx = new AudioContext();
+                this.analyser = this.audioCtx.createAnalyser();
+                this.analyser.fftSize = 256;
+                this.analyser.connect(this.audioCtx.destination);
+            }
+
+            playTone(x, y) {
+                if (!this.audioCtx) return;
+
+                const freq = 200 + (x / this.canvas.width) * 600;
+                const noteId = Math.round(freq / 20);
+
+                if (noteId === this.lastNote) return;
+                this.lastNote = noteId;
+
+                const osc = this.audioCtx.createOscillator();
+                const gain = this.audioCtx.createGain();
+
+                osc.type = 'sine';
+                osc.frequency.value = freq;
+                gain.gain.setValueAtTime(0.2, this.audioCtx.currentTime);
+                gain.gain.exponentialRampToValueAtTime(0.01, this.audioCtx.currentTime + 0.5);
+
+                osc.connect(gain);
+                gain.connect(this.analyser);
+                osc.start();
+                osc.stop(this.audioCtx.currentTime + 0.5);
+
+                // Spawn particles
+                const color = this.colors[Math.floor(Math.random() * this.colors.length)];
+                for (let i = 0; i < 8; i++) {
+                    this.particles.push({
+                        x, y,
+                        vx: (Math.random() - 0.5) * 8,
+                        vy: (Math.random() - 0.5) * 8,
+                        life: 1,
+                        color,
+                        size: Math.random() * 10 + 5
+                    });
+                }
+
+                // Add trail
+                this.trails.push({ x, y, color, size: 30, alpha: 0.5 });
+            }
+
+            animate() {
+                this.ctx.fillStyle = 'rgba(10, 10, 15, 0.05)';
+                this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+
+                // Draw trails
+                this.trails = this.trails.filter(t => {
+                    t.alpha -= 0.005;
+                    if (t.alpha <= 0) return false;
+
+                    this.ctx.beginPath();
+                    this.ctx.arc(t.x, t.y, t.size, 0, Math.PI * 2);
+                    this.ctx.fillStyle = `rgba(${t.color.join(',')}, ${t.alpha})`;
+                    this.ctx.fill();
+                    return true;
+                });
+
+                // Draw particles
+                this.particles = this.particles.filter(p => {
+                    p.x += p.vx;
+                    p.y += p.vy;
+                    p.life -= 0.02;
+                    p.vy += 0.1;
+
+                    if (p.life <= 0) return false;
+
+                    this.ctx.beginPath();
+                    this.ctx.arc(p.x, p.y, p.size * p.life, 0, Math.PI * 2);
+                    this.ctx.fillStyle = `rgba(${p.color.join(',')}, ${p.life * 0.8})`;
+                    this.ctx.fill();
+
+                    return true;
+                });
+
+                // Draw mouse trail
+                if (this.mouse.down) {
+                    this.ctx.beginPath();
+                    this.ctx.arc(this.mouse.x, this.mouse.y, 20, 0, Math.PI * 2);
+                    const color = this.colors[Date.now() % 5];
+                    this.ctx.fillStyle = `rgba(${color.join(',')}, 0.3)`;
+                    this.ctx.fill();
+                }
+
+                requestAnimationFrame(() => this.animate());
+            }
+
+            bindEvents() {
+                this.canvas.addEventListener('mousedown', async (e) => {
+                    await this.initAudio();
+                    this.mouse.down = true;
+                    this.mouse.x = e.clientX;
+                    this.mouse.y = e.clientY;
+                    this.playTone(e.clientX, e.clientY);
+                });
+
+                this.canvas.addEventListener('mousemove', (e) => {
+                    this.mouse.x = e.clientX;
+                    this.mouse.y = e.clientY;
+                    if (this.mouse.down) {
+                        this.playTone(e.clientX, e.clientY);
+                    }
+                });
+
+                this.canvas.addEventListener('mouseup', () => {
+                    this.mouse.down = false;
+                    this.lastNote = null;
+                });
+
+                this.canvas.addEventListener('mouseleave', () => {
+                    this.mouse.down = false;
+                    this.lastNote = null;
+                });
+
+                this.canvas.addEventListener('touchstart', async (e) => {
+                    e.preventDefault();
+                    await this.initAudio();
+                    this.mouse.down = true;
+                    const touch = e.touches[0];
+                    this.mouse.x = touch.clientX;
+                    this.mouse.y = touch.clientY;
+                    this.playTone(touch.clientX, touch.clientY);
+                });
+
+                this.canvas.addEventListener('touchmove', (e) => {
+                    e.preventDefault();
+                    const touch = e.touches[0];
+                    this.mouse.x = touch.clientX;
+                    this.mouse.y = touch.clientY;
+                    if (this.mouse.down) {
+                        this.playTone(touch.clientX, touch.clientY);
+                    }
+                });
+
+                this.canvas.addEventListener('touchend', () => {
+                    this.mouse.down = false;
+                    this.lastNote = null;
+                });
+            }
+        }
+
+        new Synesthesia();
+    </script>
+</body>
+</html>
diff --git a/playground/visualizer.html b/playground/visualizer.html
new file mode 100644
index 00000000..b62abc53
--- /dev/null
+++ b/playground/visualizer.html
@@ -0,0 +1,371 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Visualizer — WAV Frequency</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { background: #0a0a0f; overflow: hidden; height: 100vh; }
+        canvas { display: block; width: 100%; height: 100%; }
+        .title {
+            position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
+            color: rgba(255,255,255,0.1); font-size: 24px; font-family: sans-serif;
+            letter-spacing: 4px; text-transform: uppercase; pointer-events: none;
+        }
+        .controls {
+            position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
+            display: flex; gap: 10px; z-index: 10;
+        }
+        button, select {
+            background: rgba(30,30,40,0.9); border: 1px solid rgba(100,100,120,0.3);
+            color: #e0e0e0; padding: 10px 20px; border-radius: 8px; font-size: 14px;
+            cursor: pointer;
+        }
+        button:hover, select:hover { background: rgba(50,50,70,0.9); }
+        .drop-zone {
+            position: fixed; inset: 0; display: flex; align-items: center;
+            justify-content: center; pointer-events: none; z-index: 5;
+        }
+        .drop-zone.active {
+            background: rgba(100,50,150,0.2);
+            border: 3px dashed rgba(150,100,200,0.5);
+        }
+        .drop-text {
+            color: rgba(255,255,255,0.3); font-size: 24px; font-family: sans-serif;
+        }
+    </style>
+</head>
+<body>
+    <div class="title">Visualizer</div>
+    <div class="drop-zone" id="drop-zone">
+        <span class="drop-text">Drop WAV file here or use controls</span>
+    </div>
+    <canvas id="canvas"></canvas>
+    <div class="controls">
+        <input type="file" id="file-input" accept="audio/*" style="display: none;">
+        <button id="load-btn">Load Audio</button>
+        <button id="play-btn" disabled>Play</button>
+        <button id="stop-btn" disabled>Stop</button>
+        <select id="viz-mode">
+            <option value="spectrum">Spectrum</option>
+            <option value="waveform">Waveform</option>
+            <option value="spectrogram">Spectrogram</option>
+            <option value="circular">Circular</option>
+        </select>
+    </div>
+    <script>
+        class AudioVisualizer {
+            constructor() {
+                this.canvas = document.getElementById('canvas');
+                this.ctx = this.canvas.getContext('2d');
+                this.audioCtx = null;
+                this.analyser = null;
+                this.source = null;
+                this.audioBuffer = null;
+                this.isPlaying = false;
+                this.mode = 'spectrum';
+                this.spectrogramData = [];
+                this.startOffset = 0;
+
+                this.resize();
+                window.addEventListener('resize', () => this.resize());
+                this.bindEvents();
+                this.animate();
+            }
+
+            resize() {
+                this.canvas.width = window.innerWidth;
+                this.canvas.height = window.innerHeight;
+            }
+
+            async initAudio() {
+                if (this.audioCtx) return;
+
+                this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                this.analyser = this.audioCtx.createAnalyser();
+                this.analyser.fftSize = 2048;
+                this.analyser.smoothingTimeConstant = 0.8;
+                this.analyser.connect(this.audioCtx.destination);
+            }
+
+            async loadAudio(file) {
+                await this.initAudio();
+
+                const arrayBuffer = await file.arrayBuffer();
+                this.audioBuffer = await this.audioCtx.decodeAudioData(arrayBuffer);
+
+                document.getElementById('play-btn').disabled = false;
+                document.getElementById('stop-btn').disabled = false;
+                document.querySelector('.drop-text').textContent = file.name;
+            }
+
+            play() {
+                if (!this.audioBuffer || this.isPlaying) return;
+
+                this.source = this.audioCtx.createBufferSource();
+                this.source.buffer = this.audioBuffer;
+                this.source.connect(this.analyser);
+                this.source.start(0, this.startOffset);
+                this.isPlaying = true;
+
+                this.source.onended = () => {
+                    this.isPlaying = false;
+                    this.startOffset = 0;
+                    document.getElementById('play-btn').textContent = 'Play';
+                };
+
+                document.getElementById('play-btn').textContent = 'Pause';
+            }
+
+            stop() {
+                if (this.source && this.isPlaying) {
+                    this.source.stop();
+                    this.isPlaying = false;
+                    this.startOffset = 0;
+                    document.getElementById('play-btn').textContent = 'Play';
+                }
+            }
+
+            animate() {
+                this.ctx.fillStyle = 'rgba(10, 10, 15, 0.15)';
+                this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+
+                if (!this.analyser) {
+                    requestAnimationFrame(() => this.animate());
+                    return;
+                }
+
+                const freqData = new Uint8Array(this.analyser.frequencyBinCount);
+                const timeData = new Uint8Array(this.analyser.frequencyBinCount);
+                this.analyser.getByteFrequencyData(freqData);
+                this.analyser.getByteTimeDomainData(timeData);
+
+                switch (this.mode) {
+                    case 'spectrum': this.drawSpectrum(freqData); break;
+                    case 'waveform': this.drawWaveform(timeData); break;
+                    case 'spectrogram': this.drawSpectrogram(freqData); break;
+                    case 'circular': this.drawCircular(freqData, timeData); break;
+                }
+
+                requestAnimationFrame(() => this.animate());
+            }
+
+            drawSpectrum(data) {
+                const w = this.canvas.width;
+                const h = this.canvas.height;
+                const barCount = 128;
+                const barWidth = w / barCount;
+                const step = Math.floor(data.length / barCount);
+
+                for (let i = 0; i < barCount; i++) {
+                    const value = data[i * step] / 255;
+                    const barHeight = value * h * 0.8;
+
+                    const hue = (i / barCount) * 300;
+                    this.ctx.fillStyle = `hsla(${hue}, 80%, 60%, 0.8)`;
+
+                    this.ctx.fillRect(
+                        i * barWidth,
+                        h - barHeight,
+                        barWidth - 1,
+                        barHeight
+                    );
+
+                    // Mirror
+                    this.ctx.fillStyle = `hsla(${hue}, 80%, 60%, 0.2)`;
+                    this.ctx.fillRect(
+                        i * barWidth,
+                        0,
+                        barWidth - 1,
+                        barHeight * 0.3
+                    );
+                }
+            }
+
+            drawWaveform(data) {
+                const w = this.canvas.width;
+                const h = this.canvas.height;
+
+                this.ctx.beginPath();
+                this.ctx.strokeStyle = '#a78bfa';
+                this.ctx.lineWidth = 2;
+
+                const sliceWidth = w / data.length;
+                let x = 0;
+
+                for (let i = 0; i < data.length; i++) {
+                    const v = data[i] / 128.0;
+                    const y = (v * h) / 2;
+
+                    if (i === 0) {
+                        this.ctx.moveTo(x, y);
+                    } else {
+                        this.ctx.lineTo(x, y);
+                    }
+                    x += sliceWidth;
+                }
+
+                this.ctx.stroke();
+
+                // Glow
+                this.ctx.strokeStyle = 'rgba(167,139,250,0.3)';
+                this.ctx.lineWidth = 6;
+                this.ctx.stroke();
+            }
+
+            drawSpectrogram(data) {
+                const w = this.canvas.width;
+                const h = this.canvas.height;
+
+                // Add new line
+                this.spectrogramData.push([...data]);
+
+                // Keep last N lines
+                const maxLines = Math.floor(w / 2);
+                if (this.spectrogramData.length > maxLines) {
+                    this.spectrogramData.shift();
+                }
+
+                // Draw
+                const line_width = w / maxLines;
+
+                this.spectrogramData.forEach((line, x) => {
+                    const step = Math.floor(line.length / h);
+                    for (let y = 0; y < h; y++) {
+                        const value = line[y * step] || 0;
+                        const hue = 270 - (value / 255) * 200;
+                        const lightness = 20 + (value / 255) * 50;
+
+                        this.ctx.fillStyle = `hsl(${hue}, 80%, ${lightness}%)`;
+                        this.ctx.fillRect(x * line_width, h - y, line_width, 1);
+                    }
+                });
+            }
+
+            drawCircular(freqData, timeData) {
+                const w = this.canvas.width;
+                const h = this.canvas.height;
+                const cx = w / 2;
+                const cy = h / 2;
+                const maxRadius = Math.min(w, h) * 0.35;
+
+                // Frequency ring
+                const freqStep = Math.floor(freqData.length / 180);
+                for (let i = 0; i < 180; i++) {
+                    const value = freqData[i * freqStep] / 255;
+                    const angle = (i / 180) * Math.PI * 2;
+                    const radius = maxRadius * 0.5 + value * maxRadius * 0.5;
+
+                    const x = cx + Math.cos(angle) * radius;
+                    const y = cy + Math.sin(angle) * radius;
+
+                    this.ctx.beginPath();
+                    this.ctx.arc(x, y, 3, 0, Math.PI * 2);
+
+                    const hue = (i / 180) * 360;
+                    this.ctx.fillStyle = `hsla(${hue}, 80%, 60%, 0.8)`;
+                    this.ctx.fill();
+                }
+
+                // Waveform circle
+                this.ctx.beginPath();
+                this.ctx.strokeStyle = 'rgba(255,255,255,0.3)';
+                this.ctx.lineWidth = 1;
+
+                for (let i = 0; i < timeData.length; i++) {
+                    const v = timeData[i] / 128.0;
+                    const angle = (i / timeData.length) * Math.PI * 2;
+                    const radius = maxRadius * 0.3 * v;
+
+                    const x = cx + Math.cos(angle) * radius;
+                    const y = cy + Math.sin(angle) * radius;
+
+                    if (i === 0) {
+                        this.ctx.moveTo(x, y);
+                    } else {
+                        this.ctx.lineTo(x, y);
+                    }
+                }
+
+                this.ctx.closePath();
+                this.ctx.stroke();
+
+                // Center glow
+                const gradient = this.ctx.createRadialGradient(cx, cy, 0, cx, cy, maxRadius * 0.3);
+                gradient.addColorStop(0, 'rgba(167,139,250,0.3)');
+                gradient.addColorStop(1, 'rgba(167,139,250,0)');
+
+                this.ctx.beginPath();
+                this.ctx.arc(cx, cy, maxRadius * 0.3, 0, Math.PI * 2);
+                this.ctx.fillStyle = gradient;
+                this.ctx.fill();
+            }
+
+            bindEvents() {
+                document.getElementById('load-btn').addEventListener('click', () => {
+                    document.getElementById('file-input').click();
+                });
+
+                document.getElementById('file-input').addEventListener('change', async (e) => {
+                    if (e.target.files[0]) {
+                        await this.loadAudio(e.target.files[0]);
+                    }
+                });
+
+                document.getElementById('play-btn').addEventListener('click', () => {
+                    if (this.isPlaying) {
+                        this.stop();
+                    } else {
+                        this.play();
+                    }
+                });
+
+                document.getElementById('stop-btn').addEventListener('click', () => {
+                    this.stop();
+                });
+
+                document.getElementById('viz-mode').addEventListener('change', (e) => {
+                    this.mode = e.target.value;
+                    this.spectrogramData = [];
+                });
+
+                // Drag and drop
+                const dropZone = document.getElementById('drop-zone');
+
+                document.addEventListener('dragover', (e) => {
+                    e.preventDefault();
+                    dropZone.classList.add('active');
+                });
+
+                document.addEventListener('dragleave', () => {
+                    dropZone.classList.remove('active');
+                });
+
+                document.addEventListener('drop', async (e) => {
+                    e.preventDefault();
+                    dropZone.classList.remove('active');
+
+                    const file = e.dataTransfer.files[0];
+                    if (file && file.type.startsWith('audio/')) {
+                        await this.loadAudio(file);
+                    }
+                });
+
+                // Touch support
+                this.canvas.addEventListener('click', async () => {
+                    if (!this.audioCtx) {
+                        await this.initAudio();
+                    }
+
+                    if (this.audioCtx.state === 'suspended') {
+                        this.audioCtx.resume();
+                    }
+                });
+            }
+        }
+
+        new AudioVisualizer();
+    </script>
+</body>
+</html>
