Working on mobile version, please use desktop for a functional soundscape.

User Manual
Trinity v9.4

To engage with the system, use the control interface located at the bottom of the screen.

Ignite: Click the "Ignite" button to activate the WebGL engine and initialize the audio system.
The HUD: Click "▼ Controls" to open the management racks:
- Physics: Adjust Trail Life and Sensor Angle to manipulate the organic growth patterns of the "phycelium".
- Emergence: Control Coupling and Entropy to shift how the swarm votes on musical chords.
- Music & Mix: Use Switch Profile to instantly swap between presets like BIOLUME, EMBER, or ABYSS.
- Voice Tones: Use the dropdown menus to select specific instrument models (e.g., SH-101 Saw, DX7 Bell, TR-808 Kick) for each frequency layer.
Performance: Use the System rack to monitor your device's Quality Tier and current FPS.
Audio: Headphones are recommended to experience the 3D spatial positioning and frequency modulation.

Inspirations

Trinity v9.4 is an algorithmic ecosystem built upon several foundational computational theories:

Physarum Polycephalum (Slime Mold): The visual engine is based on a transport network model where particles "sniff" and follow trails, creating organic, vein-like structures.
Source: Jeff Jones (2010): "Characteristics of pattern formation and evolution in approximations of Physarum transport networks.

<!DOCTYPE html>
<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" lang="en-US"  lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
    <title>Trinity v9.4 - The Network Illustrated</title>
    <style>
        :root {
            --bg: #000000;
            --panel: rgba(10, 12, 16, 0.96);
            --accent: #4f8;
            --warm: #fa6;
            --err: #f66;
            --text: #889;
            --dim: #445;
            --border: rgba(255, 255, 255, 0.1);
        }
        
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        
        body {
            background: var(--bg);
            font-family: 'Courier New', monospace;
            overflow: hidden;
            color: var(--text);
            font-size: 11px;
        }
        
        canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }

#vignette {
            position: fixed; inset: 0; z-index: 1; pointer-events: none;
            background: radial-gradient(circle, transparent 0%, rgba(0,0,0,0.65) 100%);
            transition: opacity 0.15s;
        }
        #grain {
            position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.04;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }
        
        #overlay {
            position: fixed; inset: 0; background: #000; z-index: 1000;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            transition: opacity 1.5s ease-out;
        }
        #overlay h1 { 
            font-weight: 200; font-size: 16px; letter-spacing: 14px; 
            color: #fff; margin-bottom: 20px; text-transform: uppercase; 
        }
        #status-log { 
            color: #666; font-size: 10px; margin-bottom: 30px; text-align: center; 
        }
        #status-log.ready { color: var(--accent); }
        #status-log.error { color: var(--err); }
        
        #overlay button {
            background: transparent; border: 1px solid #444; color: #888; padding: 18px 48px;
            font: inherit; font-size: 11px; letter-spacing: 4px; cursor: pointer; transition: all 0.3s; 
            text-transform: uppercase; opacity: 0.5; pointer-events: none;
        }
        #overlay button.active { 
            opacity: 1; pointer-events: auto; border-color: var(--accent); color: var(--accent); 
        }
        
        #hud { 
            position: fixed; 
            bottom: 0; 
            left: 50%; 
            transform: translateX(-50%); 
            width: min(96vw, 1100px); 
            z-index: 100; 
            pointer-events: none; 
        }
        #hud.active { pointer-events: auto; }
        
        #hud-toggle {
            display: block; 
            margin: 0 auto; 
            background: var(--panel); 
            border: 1px solid var(--border); 
            border-bottom: none;
            color: var(--text); 
            padding: 8px 30px; 
            font: inherit; 
            letter-spacing: 2px; 
            cursor: pointer; 
            border-radius: 4px 4px 0 0; 
            backdrop-filter: blur(10px);
        }
        
        #panel {
            background: var(--panel); 
            border-top: 1px solid var(--border); 
            padding: 25px 20px;
            backdrop-filter: blur(20px); 
            transition: max-height 0.4s ease, padding 0.4s; 
            overflow: hidden; 
            box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
            max-height: 80vh;
            overflow-y: auto;
        }
        #panel.collapsed { 
            max-height: 0; 
            padding: 0 20px; 
        }
        
        @media (min-width: 768px) {
            #panel {
                padding: 25px 40px;
            }
            #panel.collapsed { 
                padding: 0 40px; 
            }
        }
        
        @media (min-width: 1200px) {
            #panel {
                padding: 25px 60px;
            }
            #panel.collapsed { 
                padding: 0 60px; 
            }
        }
        
        #tabs { 
            display: flex; gap: 4px; margin-bottom: 20px; 
            border-bottom: 1px solid var(--border); padding-bottom: 15px; flex-wrap: wrap; 
        }
        .tab {
            background: transparent; border: 1px solid transparent; color: var(--dim); 
            font: inherit; letter-spacing: 1px; padding: 8px 12px; cursor: pointer; 
            transition: all 0.2s; text-transform: uppercase; border-radius: 2px; font-size: 9px;
        }
        .tab.active { 
            color: var(--accent); border-color: rgba(102, 255, 204, 0.2); 
            background: rgba(102, 255, 204, 0.05); 
        }
        .tab:hover { color: var(--accent); }

#racks { 
            display: grid; 
            grid-template-columns: repeat(5, 1fr); 
            gap: 20px; 
        }
        @media (max-width: 1400px) {
            #racks { grid-template-columns: repeat(4, 1fr); }
        }
        @media (max-width: 1100px) {
            #racks { grid-template-columns: repeat(3, 1fr); gap: 18px; }
        }
        @media (max-width: 800px) {
            #racks { grid-template-columns: repeat(2, 1fr); gap: 16px; }
        }
        @media (max-width: 500px) {
            #racks { grid-template-columns: 1fr; gap: 14px; }
        }
        .rack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
        .rack.hidden { display: none; }
        
        .rack-title {
            font-size: 9px; letter-spacing: 2px; color: var(--dim); text-transform: uppercase;
            padding-bottom: 8px; border-bottom: 1px solid var(--border); 
            display: flex; justify-content: space-between; align-items: center;
        }
        .lfo-indicator { 
            width: 6px; height: 6px; border-radius: 50%; background: #222; transition: background 0.1s; 
        }
        
        .control { display: grid; grid-template-columns: 65px 1fr 40px; align-items: center; gap: 10px; }
        .control label { color: var(--text); font-size: 9px; white-space: nowrap; }
        .val-display { 
            color: var(--accent); text-align: right; font-size: 9px; 
            font-family: monospace; opacity: 0.9; font-weight: 500;
        }
        
        input[type="range"] { 
            -webkit-appearance: none; width: 100%; height: 4px; 
            background: linear-gradient(90deg, #1a1d22 0%, #252a30 100%);
            border-radius: 3px; cursor: pointer; outline: none; 
        }
        input[type="range"]::-webkit-slider-thumb { 
            -webkit-appearance: none; width: 16px; height: 16px; 
            background: linear-gradient(135deg, #aab 0%, #778 100%);
            border-radius: 50%; border: 2px solid var(--bg); 
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 6px rgba(0,0,0,0.4);
            cursor: grab;
        }
        input[type="range"]:active::-webkit-slider-thumb {
            cursor: grabbing;
        }
        input[type="range"]:hover::-webkit-slider-thumb { 
            background: linear-gradient(135deg, var(--accent) 0%, #3a8 100%);
            transform: scale(1.2);
            box-shadow: 0 3px 10px rgba(68, 255, 136, 0.4);
        }
        input[type="range"]::-moz-range-thumb { 
            width: 16px; height: 16px; 
            background: linear-gradient(135deg, #aab 0%, #778 100%);
            border-radius: 50%; border: 2px solid var(--bg); 
            cursor: grab;
            transition: all 0.2s;
        }
        input[type="range"]:hover::-moz-range-thumb { 
            background: linear-gradient(135deg, var(--accent) 0%, #3a8 100%);
            transform: scale(1.2);
        }
        .control.warm input[type="range"]:hover::-webkit-slider-thumb { 
            background: linear-gradient(135deg, var(--warm) 0%, #c84 100%);
            box-shadow: 0 3px 10px rgba(255, 170, 102, 0.4);
        }
        .control.warm .val-display { color: var(--warm); }
        
        select.tone-select {
            background: linear-gradient(180deg, rgba(30,35,40,0.95) 0%, rgba(15,18,22,0.98) 100%);
            border: 1px solid rgba(102, 255, 136, 0.3);
            color: var(--accent);
            font: inherit;
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 1px;
            padding: 10px 12px;
            width: 100%;
            text-transform: uppercase;
            outline: none;
            cursor: pointer;
            margin-bottom: 10px;
            border-radius: 3px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
            transition: all 0.2s ease;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234f8' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            padding-right: 30px;
        }
        select.tone-select:hover {
            border-color: var(--accent);
            box-shadow: 0 2px 12px rgba(68, 255, 136, 0.15), inset 0 1px 0 rgba(255,255,255,0.08);
        }
        select.tone-select:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(68, 255, 136, 0.2);
        }
        select.tone-select option {
            background: #111;
            color: var(--accent);
            padding: 8px;
        }
        
        .mute-toggle {
            background: transparent; border: 1px solid #444; color: #6fc;
            font: inherit; font-size: 8px; letter-spacing: 1px; padding: 5px 8px;
            cursor: pointer; transition: all 0.2s; text-transform: uppercase;
            border-radius: 3px; margin-right: 8px; opacity: 0.4;
        }
        .mute-toggle:hover { opacity: 0.7; border-color: #666; }
        .mute-toggle.active { opacity: 1; border-color: #f66; color: #f66; background: rgba(255,102,102,0.1); }
        
        .voice-section {
            display: flex; align-items: center; gap: 8px;
            font-size: 9px; letter-spacing: 2px; color: #aab;
            text-transform: uppercase; margin-bottom: 6px;
            padding: 8px 0 4px 0;
            border-top: 1px solid rgba(255,255,255,0.05);
            font-weight: 500;
        }
        .voice-section:first-of-type { border-top: none; padding-top: 0; }
        
        .scale-display { 
            text-align: center; font-size: 11px; letter-spacing: 2px; color: #fff; 
            padding: 8px 0; border: 1px solid #333; margin-bottom: 8px; 
        }
        
        .btn {
            background: rgba(255,255,255,0.03); border: 1px solid #333; color: var(--accent);
            font: inherit; font-size: 9px; letter-spacing: 1px; padding: 10px; cursor: pointer;
            text-transform: uppercase; transition: all 0.2s; text-align: center; margin-bottom: 8px;
        }
        .btn:hover { background: rgba(255,255,255,0.08); border-color: #555; }
        .btn.small { padding: 6px 8px; font-size: 8px; margin-bottom: 4px; }
        
        #profile-preview {
            border: 1px solid #333;
            padding: 8px;
            margin-top: 4px;
            margin-bottom: 8px;
            background: rgba(0,0,0,0.3);
        }
        
        .preview-colors {
            display: flex;
            gap: 4px;
            margin-bottom: 6px;
        }
        
        .color-swatch {
            flex: 1;
            height: 16px;
            border-radius: 2px;
            border: 1px solid #333;
        }
        
        .preview-info {
            font-size: 8px;
            color: var(--dim);
            text-align: center;
            letter-spacing: 1px;
        }
        
        .voice-meters { 
            display: flex; gap: 10px; margin-top: 12px; padding-top: 10px;
            border-top: 1px solid rgba(255,255,255,0.05);
        }
        .voice-meter { flex: 1; }
        .voice-meter-bar { 
            height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; 
            overflow: hidden; margin-top: 4px;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
        }
        .voice-meter-fill { height: 100%; transition: width 0.08s ease-out; border-radius: 2px; }
        .voice-meter-fill.bass { background: linear-gradient(90deg, #4a8 0%, #6fc 100%); }
        .voice-meter-fill.mid { background: linear-gradient(90deg, #c84 0%, #fa6 100%); }
        .voice-meter-fill.high { background: linear-gradient(90deg, #a5c 0%, #c6f 100%); }
        .voice-meter-label { font-size: 7px; color: var(--dim); letter-spacing: 1px; }
        
        .rack-footer { 
            font-size: 8px; color: var(--dim); text-align: right; margin-top: auto; 
            padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.05); 
        }
        .rack-footer span { color: var(--accent); font-family: monospace; }
        
        #system-rack-content {
            transition: max-height 0.3s ease, opacity 0.3s ease;
            overflow: hidden;
        }
        #system-rack-content.collapsed {
            max-height: 0;
            opacity: 0;
        }
        
        .system-info-row {
            display: flex;
            justify-content: space-between;
            font-size: 8px;
            color: var(--dim);
            padding: 4px 0;
            border-bottom: 1px solid rgba(255,255,255,0.03);
        }
        .system-info-row:last-child { border-bottom: none; }
        .system-info-value { color: var(--accent); font-family: monospace; }
        
        @media (max-width: 1000px) {
            #hud { width: 100%; bottom: 0; }
            #panel { max-height: 55vh; overflow-y: auto; padding: 15px; }
            #racks { grid-template-columns: 1fr 1fr; gap: 25px; }
            .rack { gap: 10px; }
            input[type="range"] { height: 5px; }
            input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; }
            select.tone-select { font-size: 11px; padding: 12px; }
        }
        
        @media (max-width: 600px) {
            #racks { grid-template-columns: 1fr; gap: 30px; }
            #tabs { justify-content: center; }
        }
    </style>
</head>
<body>

<div id="overlay">
    <h1>Trinity</h1>
    <div id="status-log">Initializing...</div>
    <button id="start">Ignite</button>
</div>

<div id="hud">
    <button id="hud-toggle">▼ Controls</button>
    <div id="panel" class="collapsed" role="region" aria-label="Audio-Visual Controls">
        <div id="tabs">
            <button class="tab active" data-tab="all">All</button>
            <button class="tab" data-tab="0">Physics</button>
            <button class="tab" data-tab="1">Emergence</button>
            <button class="tab" data-tab="2">Voice Tones</button>
            <button class="tab" data-tab="3">Effects</button>
            <button class="tab" data-tab="4">Visuals</button>
            <button class="tab" data-tab="5">Music</button>
            <button class="tab" data-tab="6">System</button>
        </div>
        <div id="racks">
            
            <div class="rack" data-rack="0">
                <div class="rack-title">Physics</div>
                <button class="btn small" id="btn-math">Mode: Trinity</button>
                <button class="btn small" id="btn-reset">Reset Simulation</button>
                <div class="control"><label>Trail Life</label><input type="range" id="decay" min="90" max="99.9" step="0.1" value="98"><span class="val-display" id="val-decay">0.98</span></div>
                <div class="control"><label>Sensor ∠</label><input type="range" id="sensorAngle" min="10" max="90" value="30"><span class="val-display" id="val-sensorAngle">30°</span></div>
                <div class="control"><label>Sensor Dist</label><input type="range" id="sensorDist" min="2" max="60" value="15"><span class="val-display" id="val-sensorDist">15px</span></div>
                <div class="control"><label>Diffusion</label><input type="range" id="diffusion" min="0" max="100" value="8"><span class="val-display" id="val-diffusion">8%</span></div>
                <div class="control warm"><label>Speed</label><input type="range" id="speed" min="10" max="200" value="100"><span class="val-display" id="val-speed">100%</span></div>
                <div class="control warm"><label>Flow Sync <span style="opacity:0.5;font-size:9px;">(requires Kinetic)</span></label><input type="range" id="flowSync" min="0" max="100" value="40"><span class="val-display" id="val-flowSync">40%</span></div>
                <div class="rack-footer">Agents: <span id="mon-agents">...</span></div>
            </div>

<div class="rack" data-rack="1">
                <div class="rack-title">Emergence (Bridge) <div id="lfo-a-dot" class="lfo-indicator" title="Bio LFO pulsing"></div></div>
                <div class="control"><label>Bio LFO</label><input type="range" id="lfoSpeed" min="1" max="100" value="20" title="Speed of biological oscillation affecting coupling and sensor angle"><span class="val-display" id="val-lfoSpeed">20%</span></div>
                <div class="control warm"><label>Coupling</label><input type="range" id="coupling" min="0" max="100" value="60" title="How strongly agents follow each other's trails"><span class="val-display" id="val-coupling">60%</span></div>
                <div class="control warm"><label>Wander</label><input type="range" id="wander" min="0" max="100" value="25" title="Random angular deviation - increases chaos"><span class="val-display" id="val-wander">25%</span></div>
                <div class="control"><label>Entropy</label><input type="range" id="entropy" min="0" max="100" value="40" title="Probability of off-chord notes in music"><span class="val-display" id="val-entropy">40%</span></div>
                <div class="control"><label>Threshold</label><input type="range" id="threshold" min="10" max="140" value="45" title="Lower = more audio collisions/triggers"><span class="val-display" id="val-threshold">45</span></div>
                <div class="rack-footer">Chord: <span id="mon-chord">I (Home)</span></div>
            </div>

<div class="rack" data-rack="2">
                <div class="rack-title">Voice Tones</div>
                
                <div class="voice-section"><button class="mute-toggle" id="mute-bass" data-type="0">[M]</button><span>BASS (LOW)</span></div>
                <select id="tone-bass" class="tone-select"></select>
                <div class="control warm"><label>Level</label><input type="range" id="bassLevel" min="0" max="100" value="60"><span class="val-display" id="val-bassLevel">60%</span></div>
                <div class="control"><label>Attack</label><input type="range" id="bassAttack" min="8" max="50" value="10"><span class="val-display" id="val-bassAttack">10ms</span></div>
                <div class="control"><label>Release</label><input type="range" id="bassRelease" min="50" max="300" value="150"><span class="val-display" id="val-bassRelease">1.5s</span></div>
                
                <div class="voice-section"><button class="mute-toggle" id="mute-mid" data-type="1">[M]</button><span>MID (TENOR)</span></div>
                <select id="tone-mid" class="tone-select"></select>
                <div class="control warm"><label>Level</label><input type="range" id="midLevel" min="0" max="100" value="50"><span class="val-display" id="val-midLevel">50%</span></div>
                <div class="control"><label>Attack</label><input type="range" id="midAttack" min="5" max="40" value="20"><span class="val-display" id="val-midAttack">20ms</span></div>
                <div class="control"><label>Release</label><input type="range" id="midRelease" min="20" max="150" value="80"><span class="val-display" id="val-midRelease">0.8s</span></div>
                
                <div class="voice-section"><button class="mute-toggle" id="mute-high" data-type="2">[M]</button><span>HIGH (SOPRANO)</span></div>
                <select id="tone-high" class="tone-select"></select>
                <div class="control warm"><label>Level</label><input type="range" id="highLevel" min="0" max="100" value="40"><span class="val-display" id="val-highLevel">40%</span></div>
                <div class="control"><label>Attack</label><input type="range" id="highAttack" min="2" max="20" value="5"><span class="val-display" id="val-highAttack">5ms</span></div>
                <div class="control"><label>Release</label><input type="range" id="highRelease" min="5" max="60" value="40"><span class="val-display" id="val-highRelease">0.4s</span></div>
                
                <div class="voice-meters">
                    <div class="voice-meter">
                        <div class="voice-meter-bar"><div class="voice-meter-fill bass" id="meter-bass"></div></div>
                    </div>
                    <div class="voice-meter">
                        <div class="voice-meter-bar"><div class="voice-meter-fill mid" id="meter-mid"></div></div>
                    </div>
                    <div class="voice-meter">
                        <div class="voice-meter-bar"><div class="voice-meter-fill high" id="meter-high"></div></div>
                    </div>
                </div>
            </div>

<div class="rack" data-rack="3">
                <div class="rack-title">Effects</div>
                <button class="btn small" id="btn-kinetic">Kinetic Mode: OFF</button>
                <div class="control"><label>Filter</label><input type="range" id="filter" min="0" max="100" value="50"><span class="val-display" id="val-filter">980Hz</span></div>
                <div class="control"><label>Resonance</label><input type="range" id="resonance" min="1" max="150" value="30"><span class="val-display" id="val-resonance">3.0</span></div>
                <div class="control warm"><label>Warmth</label><input type="range" id="warmth" min="0" max="100" value="20"><span class="val-display" id="val-warmth">20%</span></div>
                <div class="control"><label>Aud LFO ƒ</label><input type="range" id="audioLfoRate" min="0" max="100" value="10"><span class="val-display" id="val-audioLfoRate">0.5Hz</span></div>
                <div class="control"><label>Aud LFO ∿</label><input type="range" id="audioLfoDepth" min="0" max="100" value="40"><span class="val-display" id="val-audioLfoDepth">40%</span></div>
                <div class="control"><label>Reverb</label><input type="range" id="reverb" min="0" max="100" value="60"><span class="val-display" id="val-reverb">60%</span></div>
                <div class="control"><label>Delay</label><input type="range" id="delay" min="0" max="100" value="40"><span class="val-display" id="val-delay">40%</span></div>
                <div class="control warm"><label>Depth Mix</label><input type="range" id="depthAmount" min="0" max="100" value="50"><span class="val-display" id="val-depthAmount">50%</span></div>
            </div>

<div class="rack" data-rack="4">
                <div class="rack-title">Visuals <div id="lfo-v-dot" class="lfo-indicator"></div></div>
                <div class="control"><label>Vis LFO</label><input type="range" id="visualLfoSpeed" min="1" max="100" value="15"><span class="val-display" id="val-visualLfoSpeed">15%</span></div>
                <div class="control"><label>Glow</label><input type="range" id="glowIntensity" min="0" max="100" value="30"><span class="val-display" id="val-glowIntensity">30%</span></div>
                <div class="control"><label>Saturation</label><input type="range" id="saturation" min="0" max="150" value="100"><span class="val-display" id="val-saturation">100%</span></div>
                <div class="control"><label>Backdrop</label>
                    <select id="bgColorSelect" class="tone-select" style="margin-bottom:0;">
                        <option value="0,0,0">Void</option>
                        <option value="5,10,20">Midnight</option>
                        <option value="15,5,20">Nebula</option>
                        <option value="2,12,8">Forest</option>
                        <option value="15,15,18">Slate</option>
                    </select>
                </div>
                <div class="rack-footer">
                    <div>FPS: <span id="mon-fps">...</span></div>
                    <div style="margin-top: 4px; font-size: 9px; opacity: 0.6;">
                        Tier: <span id="mon-tier">...</span> | 
                        Audio: <span id="mon-audio-nodes">...</span> nodes
                    </div>
                </div>
            </div>

<div class="rack" data-rack="5">
                <div class="rack-title">Music & Mix</div>
                <button class="btn" id="btn-profile">Switch Profile: BIOLUME</button>
                <div id="profile-preview">
                    <div class="preview-colors">
                        <span class="color-swatch" style="background: #6fc"></span>
                        <span class="color-swatch" style="background: #6fc"></span>
                        <span class="color-swatch" style="background: #c6f"></span>
                    </div>
                    <div class="preview-info">Wave: sine | BPM: 120 | Aeolian</div>
                </div>
                <button class="btn small" id="btn-scale">Cycle Scale</button>
                <div class="scale-display" id="scale-display">Aeolian (I)</div>
                <div class="control"><label>Root Note</label><input type="range" id="rootNote" min="0" max="100" value="50"><span class="val-display" id="val-rootNote">A1</span></div>
                <div class="control"><label>BPM</label><input type="range" id="bpm" min="60" max="180" value="120"><span class="val-display" id="val-bpm">120</span></div>
                <div class="control"><label>Quantize</label><input type="range" id="quantize" min="0" max="4" value="0"><span class="val-display" id="val-quantize">Free</span></div>
                <button class="btn small" id="btn-seqMode">Seq: Random</button>
                <div class="control warm"><label>Master</label><input type="range" id="volume" min="0" max="100" value="70"><span class="val-display" id="val-volume">70%</span></div>
            </div>

<div class="rack" data-rack="6">
                <div class="rack-title" style="cursor: pointer;" id="system-toggle">
                    System <span id="system-collapse-icon">▼</span>
                </div>
                <div id="system-rack-content">
                    <div class="system-info-row">
                        <span>Quality Tier</span>
                        <span class="system-info-value" id="sys-tier">Desktop</span>
                    </div>
                    <div class="system-info-row">
                        <span>GPU Particles</span>
                        <span class="system-info-value" id="sys-particles">262k</span>
                    </div>
                    <div class="system-info-row">
                        <span>Ghost Agents</span>
                        <span class="system-info-value" id="sys-ghosts">64</span>
                    </div>
                    <div class="system-info-row">
                        <span>Voice Pool</span>
                        <span class="system-info-value" id="sys-voices">20</span>
                    </div>
                    <div class="system-info-row">
                        <span>Resolution</span>
                        <span class="system-info-value" id="sys-dpr">2.0x</span>
                    </div>
                    <div class="system-info-row">
                        <span>Features</span>
                        <span class="system-info-value">FlowSync + 3D Audio</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

const QUALITY_TIERS = [
    {
        name: 'Mobile',
        textureSize: 128,
        ghostScale: 0.375,
        dpr: 1.5,
        voicePoolSizes: { bass: 1, mid: 2, high: 1 }, // REDUCED: 10→4 voices (60% less AudioNodes)
        cooldowns: { bass: 500, mid: 300, high: 150 },
        lookahead: 0.5,         // ADDED: 500ms audio buffer for jittery main thread
        allowFM6: false,        // Disable 6-op FM (too CPU heavy)
        allowWavetables: true,  // Wavetables are cheap
        allowSamples: true,     // Samples are cheap
        maxOperators: 2         // Max 2-op FM only
    },
    {
        name: 'Laptop',
        textureSize: 256,
        ghostScale: 0.75,
        dpr: 2.0,
        voicePoolSizes: { bass: 3, mid: 6, high: 6 },
        cooldowns: { bass: 250, mid: 100, high: 50 },
        lookahead: 0.2,         // ADDED: 200ms buffer (moderate safety)
        allowFM6: true,         // Allow 6-op FM
        allowWavetables: true,
        allowSamples: true,
        maxOperators: 6
    },
    {
        name: 'Desktop',
        textureSize: 512,
        ghostScale: 1.0,
        dpr: 2.5,
        voicePoolSizes: { bass: 4, mid: 8, high: 8 },
        cooldowns: { bass: 200, mid: 80, high: 40 },
        lookahead: 0.1,         // ADDED: 100ms buffer (minimal latency)
        allowFM6: true,         // Full power
        allowWavetables: true,
        allowSamples: true,
        maxOperators: 6
    }
];

const TONE_LIBRARY = {
    BASS: {
        
        "SH-101 Saw":    { harmonics: [0,1,.5,.33,.25,.2,.16,.14,.12,.11,.1], attack: 0.01, release: 0.4 },
        "SH-101 Square": { harmonics: [0,1,0,.33,0,.2,0,.14,0,.11,0], attack: 0.01, release: 0.6 },
        "TB-303 Acid":   { harmonics: [0,1,.8,.6,.5,.4,.35,.3,.25,.2,.15,.1], attack: 0.05, release: 0.2 },
        "TB-303 Reso":   { harmonics: [0,1,.1,.6,.05,.4,.02,.3,0,.2], attack: 0.01, release: 0.3 },
        "Juno Sub":      { harmonics: [0,1,.3,.1,.05], attack: 0.05, release: 1.5 },
        "Juno Fat":      { harmonics: [0,1,.5,.4,.3,.25,.2,.15,.1,.08,.06,.04], attack: 0.02, release: 1.0 },
        "Moog Pluck":    { harmonics: [0,1,.7,.5,.4,.3,.2,.15,.1], attack: 0.01, release: 0.5 },
        "Pro-1 Bass":    { harmonics: [0,1,.9,.8,.7,.5,.4,.3,.2,.1], attack: 0.01, release: 0.3 },
        "Oberheim":      { harmonics: [0,1,.4,.2,.1,.05], attack: 0.2,  release: 2.0 },
        
        "TR-808 Kick":   { harmonics: [0,1,.2,.05], attack: 0.01, release: 0.8 },
        "TR-909 Kick":   { harmonics: [0,1,.3,.15,.08,.04], attack: 0.01, release: 0.3 },
        "Sine Sub":      { harmonics: [0,1], attack: 0.05, release: 1.2 },
        "Square Sub":    { harmonics: [0,1,0,.33,0,.2,0,.14], attack: 0.05, release: 0.8 },
        "Click Bass":    { harmonics: [0,1,.8,.6,.5,.4,.3,.2,.15,.1,.08], attack: 0.01, release: 0.1 },
        
        "Lately Bass":   { harmonics: [0,1,.2,.5,.1,.3,.05,.2], attack: 0.01, release: 0.4 },
        "Solid Bass":    { harmonics: [0,1,.6,.4,.3,.2,.15,.1,.08,.06], attack: 0.01, release: 0.2 },
        "Digi-Log":      { harmonics: [0,1,.1,.4,.05,.25,.02,.15], attack: 0.01, release: 0.5 },
        "Wobble Lite":   { harmonics: [0,1,.3,.2,.15,.1,.08,.06,.05,.04], attack: 0.1,  release: 0.6 },
        "Growler":       { harmonics: [0,1,.9,.85,.8,.7,.6,.5,.4,.3,.2,.1], attack: 0.2,  release: 1.5 },
        "Drone Low":     { harmonics: [0,1,.15,.1,.08,.05,.03], attack: 2.0,  release: 4.0 }
    },
    MID: {
        
        "Juno Keys":     { waveform: 'sawtooth', fmRatio: 1.01, fmDepth: 0.1, attack: 0.02, release: 1.5 },
        "DX7 E.Piano":   { waveform: 'sine',     fmRatio: 4.0,  fmDepth: 0.4, attack: 0.01, release: 1.2 },
        "DX7 Bell":      { waveform: 'sine',     fmRatio: 14.0, fmDepth: 0.2, attack: 0.01, release: 2.0 },
        "M1 Piano":      { waveform: 'square',   fmRatio: 2.0,  fmDepth: 0.1, attack: 0.01, release: 0.8 },
        "Wurli":         { waveform: 'triangle', fmRatio: 2.0,  fmDepth: 0.2, attack: 0.02, release: 0.6 },
        "Clavinet":      { waveform: 'square',   fmRatio: 1.0,  fmDepth: 0.1, attack: 0.01, release: 0.3 },
        "Organ Perc":    { waveform: 'sine',     fmRatio: 3.0,  fmDepth: 0.3, attack: 0.01, release: 0.2 },
        "Accordion":     { waveform: 'square',   fmRatio: 1.0,  fmDepth: 0.2, attack: 0.1,  release: 0.5 },
        
        "Jupiter Pad":   { waveform: 'sawtooth', fmRatio: 1.005,fmDepth: 0.2, attack: 0.5,  release: 3.0 },
        "PWM Strings":   { waveform: 'square',   fmRatio: 1.01, fmDepth: 0.1, attack: 0.8,  release: 2.5 },
        "Analog Brass":  { waveform: 'sawtooth', fmRatio: 1.0,  fmDepth: 0.3, attack: 0.1,  release: 0.8 },
        "Warm Pad":      { waveform: 'triangle', fmRatio: 1.0,  fmDepth: 0.1, attack: 1.0,  release: 4.0 },
        "Glass Pad":     { waveform: 'sine',     fmRatio: 2.0,  fmDepth: 0.2, attack: 1.5,  release: 3.0 },
        "Hollow Pad":    { waveform: 'square',   fmRatio: 2.0,  fmDepth: 0.5, attack: 1.0,  release: 3.0 },
        
        "Saw Lead":      { waveform: 'sawtooth', fmRatio: 1.0,  fmDepth: 0.0, attack: 0.01, release: 0.4 },
        "Square Lead":   { waveform: 'square',   fmRatio: 1.0,  fmDepth: 0.0, attack: 0.01, release: 0.4 },
        "Fifth Lead":    { waveform: 'sawtooth', fmRatio: 1.5,  fmDepth: 0.3, attack: 0.05, release: 0.8 },
        "Sync Lead":     { waveform: 'square',   fmRatio: 3.0,  fmDepth: 0.4, attack: 0.02, release: 0.5 },
        "Soft Flute":    { waveform: 'triangle', fmRatio: 1.0,  fmDepth: 0.1, attack: 0.2,  release: 0.6 },
        "Steel Drum":    { waveform: 'triangle', fmRatio: 2.5,  fmDepth: 0.6, attack: 0.01, release: 0.4 }
    },
    HIGH: {
        
        "Fantasia":      { harmonics: [0,1,.4,.2,.15,.1,.08,.05], attack: 0.1,  release: 2.5 },
        "Digital Bell":  { harmonics: [0,1,0,.5,0,.3,0,.2,0,.15], attack: 0.01, release: 1.5 },
        "Music Box":     { harmonics: [0,1,.1,.05], attack: 0.01, release: 0.8 },
        "Glockenspiel":  { harmonics: [0,1,.5,.3,.2,.15,.1], attack: 0.01, release: 0.6 },
        "Pizzicato":     { harmonics: [0,1,.6,.4,.3,.2,.1], attack: 0.01, release: 0.2 },
        "Harp Pluck":    { harmonics: [0,1,.2,.15,.1,.05], attack: 0.02, release: 1.2 },
        "Koto":          { harmonics: [0,1,.5,.35,.25,.15,.1,.05], attack: 0.01, release: 0.4 },
        "Kalimba":       { harmonics: [0,1,.3,.1,.2,.05,.1], attack: 0.01, release: 0.5 },
        "Ping":          { harmonics: [0,1], attack: 0.01, release: 0.2 },
        "Crystal":       { harmonics: [0,1,.7,.5,.4,.3,.25,.2,.15,.1], attack: 0.05, release: 3.0 },
        
        "Sweep":         { harmonics: [0,1,.9,.8,.7,.6,.5,.4,.3,.2,.1], attack: 1.0,  release: 2.0 },
        "Whistle":       { harmonics: [0,1,.05], attack: 0.2,  release: 0.8 },
        "Ethereal":      { harmonics: [0,1,.1,.05,.02], attack: 1.5,  release: 4.0 },
        "Shimmer":       { harmonics: [0,1,.4,.3,.25,.2,.15,.1,.08,.06,.04], attack: 0.1,  release: 3.0 },
        "Space Drone":   { harmonics: [0,1,0,.5,0,.3,0,.2,0,.15,0,.1], attack: 2.0,  release: 5.0 },
        "Ice Rain":      { harmonics: [0,1,.8,.6,.5,.4,.35,.3,.25,.2], attack: 0.01, release: 0.3 },
        "High String":   { harmonics: [0,1,.5,.33,.25,.2,.16,.14,.12], attack: 0.5,  release: 1.5 },
        "Soft Sine":     { harmonics: [0,1], attack: 0.1,  release: 1.0 },
        "Square Blip":   { harmonics: [0,1,0,.33,0,.2,0,.14], attack: 0.01, release: 0.1 },
        "Noise Hat":     { harmonics: [0,1,.95,.9,.85,.8,.75,.7,.65,.6,.55,.5,.45,.4,.35,.3], attack: 0.01, release: 0.05}
    }
};

const WAVE_CACHE = { bass: {}, high: {} };

const SAMPLE_LIBRARY = {
    BASS: {
        "808 Kick": { 
            type: 'sample',
            data: null,
            basePitch: 55,
            attack: 0.01,
            release: 0.8,
            description: "Classic 808 kick drum"
        },
        "909 Kick": {
            type: 'sample',
            data: null,
            basePitch: 60,
            attack: 0.01,
            release: 0.3,
            description: "Punchy 909 kick"
        },
        "Acoustic Kick": {
            type: 'sample',
            data: null,
            basePitch: 50,
            attack: 0.01,
            release: 0.6,
            description: "Natural kick drum"
        }
    },
    MID: {
        "Vocal Ah": {
            type: 'sample',
            data: null,
            basePitch: 220,
            attack: 0.05,
            release: 1.0,
            loop: true,
            description: "Vocal formant ah"
        },
        "Rhodes Tine": {
            type: 'sample',
            data: null,
            basePitch: 440,
            attack: 0.01,
            release: 1.5,
            description: "Electric piano tine"
        },
        "Choir Pad": {
            type: 'sample',
            data: null,
            basePitch: 261.63,
            attack: 0.5,
            release: 2.0,
            loop: true,
            description: "Choir ensemble"
        }
    },
    HIGH: {
        "Snare": {
            type: 'sample',
            data: null,
            basePitch: 220,
            attack: 0.01,
            release: 0.2,
            description: "Acoustic snare"
        },
        "Hi-Hat": {
            type: 'sample',
            data: null,
            basePitch: 880,
            attack: 0.01,
            release: 0.1,
            description: "Closed hi-hat"
        },
        "Shaker": {
            type: 'sample',
            data: null,
            basePitch: 440,
            attack: 0.01,
            release: 0.3,
            description: "Shaker percussion"
        }
    }
};

const SAMPLE_CACHE = { bass: {}, mid: {}, high: {} };

const WAVETABLE_LIBRARY = {
    BASS: {
        "WT Analog": {
            type: 'wavetable',
            waves: [
                [0,1],
                [0,1,.5,.33,.25,.2],
                [0,1,0,.33,0,.2],
                [0,1,.9,.8,.7,.5,.4,.3],
                [0,1,.95,.9,.85,.8,.75,.7]
            ],
            description: "Sine to saw morph"
        },
        "WT Digital": {
            type: 'wavetable',
            waves: [
                [0,1],
                [0,1,0,.5,0,.33],
                [0,1,0,.33,0,.2,0,.14],
                [0,1,.8,0,.6,0,.4],
                [0,1,.95,.85,.75,.65,.55]
            ],
            description: "Digital morph"
        },
        "WT Formant": {
            type: 'wavetable',
            waves: [
                [0,1,.2,.1],
                [0,1,.5,.3,.2],
                [0,1,.8,.5,.3,.2],
                [0,1,.6,.4,.3,.15],
                [0,1,.3,.2,.15,.1]
            ],
            description: "Vocal-like formants"
        }
    },
    HIGH: {
        "WT Bell": {
            type: 'wavetable',
            waves: [
                [0,1],
                [0,1,0,.5,0,.3],
                [0,1,0,.7,0,.5,0,.3],
                [0,1,0,.8,0,.6,0,.4,0,.2],
                [0,1,0,.9,0,.7,0,.5,0,.3]
            ],
            description: "Hollow to bell"
        },
        "WT Crystal": {
            type: 'wavetable',
            waves: [
                [0,1],
                [0,1,.3,.2],
                [0,1,.5,.4,.3,.2],
                [0,1,.7,.5,.4,.3,.2],
                [0,1,.9,.7,.5,.4,.3,.2,.1]
            ],
            description: "Crystal shimmer"
        },
        "WT Metallic": {
            type: 'wavetable',
            waves: [
                [0,1,0,.5],
                [0,1,0,.6,0,.4],
                [0,1,0,.7,0,.5,0,.3],
                [0,1,0,.8,0,.6,0,.4,0,.2],
                [0,1,.95,.85,.75,.65,.55,.45]
            ],
            description: "Inharmonic metal"
        }
    }
};

const WAVETABLE_CACHE = { bass: {}, high: {} };

const FM_ALGORITHMS = {
    1: { name: "Classic Stack", routing: [[6,5],[5,4],[4,3],[3,2],[2,1]], desc: "Serial cascade" },
    2: { name: "Dual Stack", routing: [[6,5],[5,4],[3,2],[2,1],[4,1]], desc: "Two parallel stacks" },
    3: { name: "Triple Mod", routing: [[6,1],[5,1],[4,1],[3,2],[2,1]], desc: "Three modulators" },
    4: { name: "Bell Tree", routing: [[6,5],[5,1],[4,3],[3,1],[2,1]], desc: "Complex bell" },
    5: { name: "Brass", routing: [[6,3],[5,3],[4,3],[3,2],[2,1]], desc: "Brass ensemble" },
    6: { name: "E.Piano", routing: [[6,5],[5,1],[4,3],[3,2],[2,1]], desc: "Electric piano" },
    7: { name: "Organ", routing: [[6,1],[5,1],[4,1],[3,1],[2,1]], desc: "Parallel mix" },
    8: { name: "Strings", routing: [[6,5],[5,4],[4,1],[3,2],[2,1]], desc: "String section" }
};

const FM6_LIBRARY = {
    "FM E.Piano": { 
        algorithm: 6,
        operators: [
            { ratio: 1.0, level: 0.8, attack: 0.01, decay: 0.3, sustain: 0.4, release: 1.2 },
            { ratio: 14.0, level: 0.4, attack: 0.01, decay: 0.1, sustain: 0.0, release: 0.3 },
            { ratio: 1.0, level: 0.6, attack: 0.01, decay: 0.2, sustain: 0.3, release: 0.8 },
            { ratio: 2.0, level: 0.3, attack: 0.01, decay: 0.15, sustain: 0.1, release: 0.5 },
            { ratio: 1.0, level: 0.5, attack: 0.02, decay: 0.4, sustain: 0.5, release: 1.5 },
            { ratio: 3.5, level: 0.2, attack: 0.01, decay: 0.1, sustain: 0.0, release: 0.2 }
        ],
        description: "Tine-based electric piano"
    },
    "FM Bell": {
        algorithm: 4,
        operators: [
            { ratio: 1.0, level: 0.9, attack: 0.01, decay: 1.0, sustain: 0.3, release: 2.0 },
            { ratio: 2.76, level: 0.6, attack: 0.01, decay: 0.8, sustain: 0.2, release: 1.5 },
            { ratio: 4.18, level: 0.5, attack: 0.01, decay: 0.6, sustain: 0.1, release: 1.2 },
            { ratio: 5.43, level: 0.4, attack: 0.01, decay: 0.5, sustain: 0.0, release: 1.0 },
            { ratio: 1.0, level: 0.3, attack: 0.02, decay: 1.2, sustain: 0.4, release: 2.5 },
            { ratio: 8.0, level: 0.2, attack: 0.01, decay: 0.3, sustain: 0.0, release: 0.5 }
        ],
        description: "Metallic bell with shimmer"
    },
    "FM Brass": {
        algorithm: 5,
        operators: [
            { ratio: 1.0, level: 0.85, attack: 0.1, decay: 0.2, sustain: 0.7, release: 0.8 },
            { ratio: 1.0, level: 0.7, attack: 0.05, decay: 0.15, sustain: 0.6, release: 0.6 },
            { ratio: 2.0, level: 0.4, attack: 0.02, decay: 0.1, sustain: 0.3, release: 0.4 },
            { ratio: 3.0, level: 0.3, attack: 0.02, decay: 0.08, sustain: 0.2, release: 0.3 },
            { ratio: 1.01, level: 0.5, attack: 0.08, decay: 0.18, sustain: 0.6, release: 0.7 },
            { ratio: 4.0, level: 0.2, attack: 0.01, decay: 0.05, sustain: 0.1, release: 0.2 }
        ],
        description: "Fat brass section"
    },
    "FM Strings": {
        algorithm: 8,
        operators: [
            { ratio: 1.0, level: 0.8, attack: 0.8, decay: 0.3, sustain: 0.7, release: 2.5 },
            { ratio: 2.0, level: 0.6, attack: 0.6, decay: 0.25, sustain: 0.6, release: 2.0 },
            { ratio: 1.005, level: 0.7, attack: 0.9, decay: 0.35, sustain: 0.75, release: 3.0 },
            { ratio: 1.0, level: 0.5, attack: 0.7, decay: 0.3, sustain: 0.65, release: 2.8 },
            { ratio: 3.0, level: 0.3, attack: 0.5, decay: 0.2, sustain: 0.4, release: 1.5 },
            { ratio: 1.01, level: 0.4, attack: 1.0, decay: 0.4, sustain: 0.7, release: 3.5 }
        ],
        description: "Lush string ensemble"
    },
    "FM Organ": {
        algorithm: 7,
        operators: [
            { ratio: 1.0, level: 0.8, attack: 0.01, decay: 0.0, sustain: 1.0, release: 0.2 },
            { ratio: 2.0, level: 0.6, attack: 0.01, decay: 0.0, sustain: 1.0, release: 0.2 },
            { ratio: 3.0, level: 0.5, attack: 0.01, decay: 0.0, sustain: 1.0, release: 0.2 },
            { ratio: 4.0, level: 0.4, attack: 0.01, decay: 0.0, sustain: 1.0, release: 0.2 },
            { ratio: 5.0, level: 0.3, attack: 0.01, decay: 0.0, sustain: 1.0, release: 0.2 },
            { ratio: 6.0, level: 0.2, attack: 0.01, decay: 0.0, sustain: 1.0, release: 0.2 }
        ],
        description: "Drawbar organ"
    }
};

const PROFILES = [
    {
        name: "BIOLUME",
        waveform: "sine",
        fmRatio: 2.0,
        fmDepth: 0.35,
        harmonics: 0.4,
        bass:  { a: [0,0,0], b: [0.1, 0.6, 0.5], c: [1,1,1], d: [0,0,0] },
        mid:   { a: [0,0,0], b: [0.15, 0.7, 0.55], c: [1,1,1], d: [0,0,0] },
        high:  { a: [0,0,0], b: [0.2, 0.8, 0.6], c: [1,1,1], d: [0,0,0] },
        sensorAngle: 0.52, coupling: 0.6, wander: 0.25, diffusion: 0.08, decay: 0.98, speed: 1.0,
        rootNote: 55, scaleIndex: 0, bpm: 120,
        reverb: 0.6, delay: 0.4, filter: 980, resonance: 3, warmth: 0.2,
        accent: "#4f8"
    },
    {
        name: "EMBER",
        waveform: "sawtooth",
        fmRatio: 3.0,
        fmDepth: 0.5,
        harmonics: 0.6,
        bass:  { a: [0,0,0], b: [0.7, 0.25, 0.05], c: [1,1,1], d: [0,0,0] },
        mid:   { a: [0,0,0], b: [0.8, 0.35, 0.08], c: [1,1,1], d: [0,0,0] },
        high:  { a: [0,0,0], b: [0.9, 0.5, 0.15], c: [1,1,1], d: [0,0,0] },
        sensorAngle: 0.7, coupling: 0.8, wander: 0.35, diffusion: 0.2, decay: 0.97, speed: 1.4,
        rootNote: 65.4, scaleIndex: 3, bpm: 140,
        reverb: 0.4, delay: 0.3, filter: 1200, resonance: 4, warmth: 0.5,
        accent: "#e84"
    },
    {
        name: "ORCHID",
        waveform: "square",
        fmRatio: 1.5,
        fmDepth: 0.3,
        harmonics: 0.3,
        bass:  { a: [0,0,0], b: [0.5, 0.15, 0.6], c: [1,1,1], d: [0,0,0] },
        mid:   { a: [0,0,0], b: [0.55, 0.2, 0.7], c: [1,1,1], d: [0,0,0] },
        high:  { a: [0,0,0], b: [0.65, 0.3, 0.8], c: [1,1,1], d: [0,0,0] },
        sensorAngle: 0.45, coupling: 0.5, wander: 0.15, diffusion: 0.1, decay: 0.985, speed: 0.8,
        rootNote: 82.4, scaleIndex: 2, bpm: 90,
        reverb: 0.8, delay: 0.6, filter: 800, resonance: 2.5, warmth: 0.1,
        accent: "#c6a"
    },
    {
        name: "ABYSS",
        waveform: "sine",
        fmRatio: 2.5,
        fmDepth: 0.25,
        harmonics: 0.2,
        bass:  { a: [0,0,0], b: [0.1, 0.25, 0.6], c: [1,1,1], d: [0,0,0] },
        mid:   { a: [0,0,0], b: [0.15, 0.35, 0.7], c: [1,1,1], d: [0,0,0] },
        high:  { a: [0,0,0], b: [0.25, 0.5, 0.85], c: [1,1,1], d: [0,0,0] },
        sensorAngle: 0.35, coupling: 0.4, wander: 0.1, diffusion: 0.08, decay: 0.99, speed: 0.6,
        rootNote: 27.5, scaleIndex: 1, bpm: 80,
        reverb: 0.85, delay: 0.7, filter: 600, resonance: 2, warmth: 0.05,
        accent: "#48c"
    },
    {
        name: "MOSS",
        waveform: "sawtooth",
        fmRatio: 4.0,
        fmDepth: 0.6,
        harmonics: 0.7,
        bass:  { a: [0,0,0], b: [0.15, 0.5, 0.2], c: [1,1,1], d: [0,0,0] },
        mid:   { a: [0,0,0], b: [0.2, 0.6, 0.25], c: [1,1,1], d: [0,0,0] },
        high:  { a: [0,0,0], b: [0.3, 0.7, 0.35], c: [1,1,1], d: [0,0,0] },
        sensorAngle: 0.9, coupling: 0.85, wander: 0.45, diffusion: 0.25, decay: 0.96, speed: 1.6,
        rootNote: 98, scaleIndex: 4, bpm: 160,
        reverb: 0.3, delay: 0.2, filter: 1500, resonance: 5, warmth: 0.6,
        accent: "#8c5"
    },
    {
        name: "TOXIC",
        waveform: "sawtooth",
        fmRatio: 4.0,
        fmDepth: 0.6,
        harmonics: 0.7,
        bass:  { a: [0,0,0], b: [0.2, 0.7, 0.3], c: [1,1,1], d: [0,0,0] },
        mid:   { a: [0,0,0], b: [0.25, 0.8, 0.35], c: [1,1,1], d: [0,0,0] },
        high:  { a: [0,0,0], b: [0.35, 0.9, 0.45], c: [1,1,1], d: [0,0,0] },
        sensorAngle: 0.9, coupling: 0.85, wander: 0.45, diffusion: 0.25, decay: 0.96, speed: 1.6,
        rootNote: 98, scaleIndex: 4, bpm: 160,
        reverb: 0.3, delay: 0.2, filter: 1500, resonance: 5, warmth: 0.6,
        accent: "#0f8"
    }
];

const SCALES = [
    { name: 'Aeolian',    intervals: [0, 2, 3, 5, 7, 8, 10] },
    { name: 'Dorian',     intervals: [0, 2, 3, 5, 7, 9, 10] },
    { name: 'Lydian',     intervals: [0, 2, 4, 6, 7, 9, 11] },
    { name: 'Phrygian',   intervals: [0, 1, 3, 5, 7, 8, 10] },
    { name: 'Pentatonic', intervals: [0, 3, 5, 7, 10] }
];

const NOTE_NAMES = ['A','A#','B','C','C#','D','D#','E','F','F#','G','G#'];
function freqToNoteName(freq) {
    const semitones = Math.round(12 * Math.log2(freq / 27.5));
    return NOTE_NAMES[semitones % 12] + Math.floor(semitones / 12);
}

const VS_QUAD = `#version 300 es
in vec2 position; 
out vec2 vUv;
void main() { 
  vUv = position * 0.5 + 0.5; 
  gl_Position = vec4(position, 0.0, 1.0); 
}`;

const FS_UPDATE = `#version 300 es
precision highp float;
uniform sampler2D uAgents; 
uniform sampler2D uTrail;
uniform vec2 uRes; 
uniform float uTime; 
uniform float uSpeed; 
uniform float uSA; 
uniform float uSD; 
uniform float uWander; 
uniform float uCoupling;
uniform float uFlowSync;
uniform float uKineticMode; // 0.0 = off, 1.0 = on
uniform int uEquation;
in vec2 vUv; 
out vec4 fragColor;

float hash(vec2 p) { 
  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); 
}

void main() {
  vec4 agent = texture(uAgents, vUv);
  vec2 pos = agent.xy; 
  float angle = agent.z; 
  float type = agent.w;
  
  if(pos.x != pos.x) { 
    pos = vUv * uRes; 
    angle = hash(vUv * uTime) * 6.28; 
  }
  
  vec2 offset = vec2(cos(angle), sin(angle));
  vec2 left = vec2(cos(angle - uSA), sin(angle - uSA));
  vec2 right = vec2(cos(angle + uSA), sin(angle + uSA));
  
  float sF = texture(uTrail, (pos + offset * uSD) / uRes).r;
  float sL = texture(uTrail, (pos + left * uSD) / uRes).r;
  float sR = texture(uTrail, (pos + right * uSD) / uRes).r;
  
  float steer = 0.0;
  float rand = hash(pos + uTime) - 0.5;

if (uEquation == 0) {
    if (type < 0.5) { 
      if (sF > sL && sF > sR) { }
      else if (sF < sL && sF < sR) { steer = rand * 1.5 * uSA; }
      else if (sL > sR) { steer = -uSA * uCoupling * 1.2; } 
      else { steer = uSA * uCoupling * 1.2; }
    } else if (type < 1.5) { 
      if (sF > sL && sF > sR) { }
      else if (sF < sL && sF < sR) { steer = rand * 2.0 * uSA; }
      else if (sL > sR) { steer = -uSA * uCoupling; } 
      else { steer = uSA * uCoupling; }
    } else { 
      if (sF > sL && sF > sR) { } 
      else if (sL > sR) steer = -uSA * 0.5; 
      else steer = uSA * 0.5;
      steer += rand * 0.8; 
    }
  } 
  else if (uEquation == 1) {
    if (sF > 0.1) steer = uSA * 3.0; 
    else if (sL > sR) steer = uSA * 0.5;
    else steer = -uSA * 0.5;
    angle += (hash(pos * 1.3 + uTime * 2.0) - 0.5) * 0.5; 
  }
  else if (uEquation == 2) {
    float flow = cos(pos.y * 0.01 + uTime) + sin(pos.x * 0.01);
    angle = mix(angle, flow, 0.05);
    steer = (sL - sR) * 2.0; 
  }
  else if (uEquation == 3) {
    float q = 1.57079;
    float target = floor(angle / q + 0.5) * q;
    angle = mix(angle, target, 0.1);
    if (sL > sR) steer = -q; 
    else if (sR > sL) steer = q;
    if (sF < 0.01 && rand > 0.9) angle += q; 
  }

float dynWander = uWander;
  
  // Kinetic Mode gates the flow field - if OFF (0.0), no flow at all
  float effectiveFlowSync = uFlowSync * uKineticMode;
  if (effectiveFlowSync > 0.0) {
    float flowAngle = sin(pos.x * 0.003 + uTime * 0.2) * cos(pos.y * 0.003 - uTime * 0.14) * 6.28;
    float flowAngle2 = cos(pos.x * 0.004 + uTime * 0.22) * sin(pos.y * 0.0024 + uTime * 0.18) * 3.14;
    float blendedFlow = flowAngle * 0.7 + flowAngle2 * 0.3;
    float kineticFlowBoost = 1.0 + uKineticMode * 0.5; // 50% stronger flow in kinetic mode
    angle = mix(angle, blendedFlow, effectiveFlowSync * 0.15 * kineticFlowBoost);
  }
  
  angle += steer + (hash(pos * 0.7 + uTime * 1.1) - 0.5) * dynWander;
  
  float speedMod = type < 0.5 ? 0.7 : (type < 1.5 ? 1.0 : 1.4);
  float kineticSpeedBoost = 1.0 + uKineticMode * 0.3; // 30% faster in kinetic mode
  float dynSpeed = uSpeed * kineticSpeedBoost; 
  vec2 vel = vec2(cos(angle), sin(angle)) * dynSpeed * speedMod;
  pos += vel;
  
  if(pos.x < 0.0) pos.x += uRes.x; 
  if(pos.x > uRes.x) pos.x -= uRes.x;
  if(pos.y < 0.0) pos.y += uRes.y; 
  if(pos.y > uRes.y) pos.y -= uRes.y;
  
  fragColor = vec4(pos, angle, type);
}`;

const VS_POINTS = `#version 300 es
in vec2 index; 
uniform sampler2D uAgents; 
uniform vec2 uRes;
out float vType;
out float vActivity;

void main() {
  vec4 agent = texture(uAgents, index);
  vType = agent.w;
  vec2 pos = (agent.xy / uRes) * 2.0 - 1.0;
  gl_Position = vec4(pos, 0.0, 1.0);
  
  float baseSize = vType < 0.5 ? 3.5 : (vType < 1.5 ? 2.5 : 1.8);
  gl_PointSize = baseSize;
  
  vActivity = 0.0;
}`;

const FS_POINTS = `#version 300 es
precision mediump float; 
in float vType;
in float vActivity;
out vec4 fragColor;

void main() {
  vec2 center = gl_PointCoord - 0.5;
  float dist = length(center) * 2.0;
  
  float softness = 1.0 - smoothstep(0.0, 0.7, dist);
  float core = 1.0 - smoothstep(0.0, 0.25, dist);
  
  if (dist > 1.0) discard;
  
  float baseIntensity = vType < 0.5 ? 0.3 : (vType < 1.5 ? 0.2 : 0.15);
  float intensity = baseIntensity * (softness * 0.5 + core * 0.5);
  
  float typeEncoded = vType / 2.0;
  float activity = core * 0.3 + vActivity;
  
  fragColor = vec4(intensity, typeEncoded, activity, 1.0);
}`;

const FS_DIFFUSE = `#version 300 es
precision mediump float;
uniform sampler2D uTrail; 
uniform float uDecay; 
uniform float uDiffusion; 
uniform vec2 uRes; 
in vec2 vUv; 
out vec4 fragColor;

void main() {
  vec2 one = 1.0 / uRes;
  
  vec4 c  = texture(uTrail, vUv);
  vec4 n  = texture(uTrail, vUv + vec2(0.0, -one.y));
  vec4 s  = texture(uTrail, vUv + vec2(0.0, one.y));
  vec4 e  = texture(uTrail, vUv + vec2(one.x, 0.0));
  vec4 w  = texture(uTrail, vUv + vec2(-one.x, 0.0));
  vec4 ne = texture(uTrail, vUv + vec2(one.x, -one.y));
  vec4 nw = texture(uTrail, vUv + vec2(-one.x, -one.y));
  vec4 se = texture(uTrail, vUv + vec2(one.x, one.y));
  vec4 sw = texture(uTrail, vUv + vec2(-one.x, one.y));
  
  float intensitySum = c.r * 4.0 + (n.r + s.r + e.r + w.r) * 2.0 + (ne.r + nw.r + se.r + sw.r);
  float intensity = intensitySum / 16.0;
  intensity = mix(c.r, intensity, uDiffusion);
  intensity *= uDecay;
  intensity = clamp(intensity, 0.0, 1.0);
  
  float typeVal = c.g;
  
  float activitySum = c.b * 4.0 + (n.b + s.b + e.b + w.b) * 2.0 + (ne.b + nw.b + se.b + sw.b);
  float activity = activitySum / 16.0;
  activity = mix(c.b, activity, uDiffusion * 1.5);
  activity *= uDecay * 0.95;
  activity = clamp(activity, 0.0, 1.0);
  
  fragColor = vec4(intensity, typeVal, activity, 1.0);
}`;

const FS_DISPLAY = `#version 300 es
precision mediump float;
uniform sampler2D uTrail;
uniform float uTime;
uniform float uGlowIntensity;
uniform float uSaturation;

uniform vec3 uBass[4]; 
uniform vec3 uMid[4];
uniform vec3 uHigh[4];

in vec2 vUv; 
out vec4 fragColor;

vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
    return a + b * (0.5 + 0.5 * cos(6.28318 * (c * t + d)));
}

vec3 aces(vec3 x) {
  const float a = 2.51, b = 0.03, c = 2.43, d = 0.59, e = 0.14;
  return clamp((x * (a * x + b)) / (x * (c * x + d) + e), 0.0, 1.0);
}

void main() {
  
  vec4 trailSample = texture(uTrail, vUv);
  float intensity = trailSample.r;
  float typeInfo = trailSample.g;
  
  if (intensity < 0.01) {
    fragColor = vec4(0.0, 0.0, 0.0, 1.0);
    return;
  }
  
  float bassWeight = smoothstep(0.3, 0.0, typeInfo);
  float midWeight = 1.0 - abs(typeInfo - 0.5) * 4.0;
  midWeight = max(0.0, midWeight);
  float highWeight = smoothstep(0.7, 1.0, typeInfo);
  
  float totalWeight = bassWeight + midWeight + highWeight + 0.001;
  bassWeight /= totalWeight;
  midWeight /= totalWeight;
  highWeight /= totalWeight;

float t = intensity * 0.2; 
  
  vec3 bassCol = palette(t, uBass[0], uBass[1], uBass[2], uBass[3]);
  vec3 midCol  = palette(t, uMid[0],  uMid[1],  uMid[2],  uMid[3]);
  vec3 highCol = palette(t, uHigh[0], uHigh[1], uHigh[2], uHigh[3]);
  
  vec3 layerBass = bassCol * bassWeight * intensity;
  vec3 layerMid  = midCol  * midWeight  * intensity;
  vec3 layerHigh = highCol * highWeight * intensity;
  
  vec3 col = max(layerBass, max(layerMid, layerHigh));
  
  col *= 1.8;
  
  col *= 1.0 + (uGlowIntensity * intensity * 0.5);
  col = col / (1.0 + col * 0.25);
  
  float luma = dot(col, vec3(0.299, 0.587, 0.114));
  col = mix(vec3(luma), col, uSaturation);
  
  col = aces(col);
  col = pow(col, vec3(1.0/2.2));
  
  vec2 vigUv = vUv - 0.5;
  float vignette = 1.0 - dot(vigUv, vigUv) * 0.2;
  col *= vignette;
  
  fragColor = vec4(col, 1.0);
}`;

class EventEmitter {
    constructor() { this.events = {}; }
    on(e, f) { if(!this.events[e]) this.events[e]=[]; this.events[e].push(f); }
    emit(e, d) { if(this.events[e]) this.events[e].forEach(f=>f(d)); }
}

class ConfigManager {
    constructor(bus) {
        this.bus = bus;
        const caps = getSystemCapabilities();
        const quality = QUALITY_TIERS[caps.tier];
        
        // AGGRESSIVE OPTIMIZATION FOR BUDGET HARDWARE
        // Cap DPR to 1.0 for: Budget GPUs, Embedded Mobile, or Low Memory
        // This reduces GPU pixel load by 60-80% on retina displays
        let targetDpr = quality.dpr;
        
        if (caps.isBudgetGPU) {
            console.log(`[Trinity] Budget GPU detected (${caps.gpu}): Forcing DPR to 1.0`);
            targetDpr = 1.0;
        } else if (caps.isMobile && caps.isEmbedded) {
            console.log("[Trinity] Embedded Mobile detected: Forcing DPR to 1.0");
            targetDpr = 1.0;
        }
        
        this.state = {
            width: 0, height: 0, 
            dpr: Math.min(window.devicePixelRatio || 1, targetDpr),
            running: false,
            tier: caps.tier,
            gpu: caps.gpu, // Store for debugging
            textureSize: quality.textureSize,
            decay: 0.98, diffusion: 0.08, sensorAngleBase: 0.52, sensorDist: 15, speed: 0.6, equationMode: 0,
            flowSync: 0.2,
            couplingBase: 0.6, wander: 0.15, entropy: 0.4, threshold: 45, lfoSpeed: 0.2,
            mute0: false, mute1: false, mute2: false,
            bassLevel: caps.tier === 0 ? 0.5 : 0.6, midLevel: caps.tier === 0 ? 0.35 : 0.4, highLevel: caps.tier === 0 ? 0.25 : 0.3,
            bassAttack: caps.tier === 0 ? 0.02 : 0.01, bassRelease: caps.tier === 0 ? 1.8 : 1.5,
            midAttack: caps.tier === 0 ? 0.04 : 0.02, midRelease: caps.tier === 0 ? 1.0 : 0.8,
            highAttack: caps.tier === 0 ? 0.015 : 0.005, highRelease: caps.tier === 0 ? 0.5 : 0.4,

currentBassTone: 'TR-808 Kick',
            currentMidTone: 'DX7 E.Piano',
            currentHighTone: 'Digital Bell',

midWaveform: 'sine',
            fmRatio: 2.0, fmDepthBase: 0.35,
            filter: 980, resonance: 3, warmth: 0.2,
            audioLfoRate: 0.1, audioLfoDepth: 0.4,
            reverb: 0.6, delay: 0.4,
            depthAmount: 0.5,
            profileIndex: 0,
            visualLfoSpeed: 0.15,
            glowIntensity: 0.3, saturation: 1.0,
            rootNote: 55, scaleIndex: 0,
            bpm: 120, quantize: 0, seqMode: 0,
            volume: caps.tier === 0 ? 0.5 : 0.7,
            kineticMode: false,
            ghostCounts: {
                bass: Math.floor(24 * quality.ghostScale),
                mid: Math.floor(24 * quality.ghostScale),
                high: Math.floor(16 * quality.ghostScale)
            },
            cooldowns: quality.cooldowns,
            voicePoolSizes: quality.voicePoolSizes
        };
        this.lfo = { time: 0, a: 0, audio: 0, visual: 0 };
    }
    updateLFO() {
        this.lfo.time++;
        
        const speed = this.state.lfoSpeed * 2.0;
        this.lfo.a = Math.sin(this.lfo.time * 0.01 * speed);
        const audioRate = this.state.audioLfoRate * 0.005;
        this.lfo.audio = Math.sin(this.lfo.time * audioRate);
        const visualRate = this.state.visualLfoSpeed * 0.005;
        this.lfo.visual = Math.sin(this.lfo.time * visualRate);
        this.bus.emit('lfo.update', this.lfo);
    }
    get sensorAngle() { return this.state.sensorAngleBase + (this.lfo.a * 0.2); }
    get coupling() { return Math.max(0, Math.min(1, this.state.couplingBase + (this.lfo.a * 0.2))); }
    get fmDepth() { return Math.max(0, this.state.fmDepthBase + (this.lfo.audio * 0.1)); }
    get glow() { return Math.max(0, Math.min(1, this.state.glowIntensity + (this.lfo.visual * 0.2))); }
    get currentProfile() { return PROFILES[this.state.profileIndex]; }
    get currentScale() { return SCALES[this.state.scaleIndex]; }
    set(k, v) { 
        this.state[k] = v; 
        this.bus.emit('config.change', {key: k, val: v}); 
    }
}

class HarmonicContext {
    constructor(bus, config) {
        this.bus = bus;
        this.config = config;
        this.chordNames = ["I (Home)", "IV (Move)", "V (Tension)"];
        this.currentChord = 0;
        this.bus.on('swarm.vote', (centroidX) => this.vote(centroidX));
    }
    vote(x) {
        let target = 0;
        if (x > 0.65) target = 2;
        else if (x > 0.35) target = 1;
        if (target !== this.currentChord) {
            this.currentChord = target;
            this.bus.emit('chord.change', this.chordNames[this.currentChord]);
        }
    }
    getNoteForType(y, type) {
        y = Math.max(0, Math.min(1, Number.isFinite(y) ? y : 0.5));
        const scale = this.config.currentScale;
        const angleDeviation = Math.abs(this.config.state.sensorAngleBase - 0.52);
        const chaos = angleDeviation * 1.5;
        const entropy = Math.min(1, this.config.state.entropy + chaos);
        const root = this.config.state.rootNote;
        const chords = [[0, 2, 4], [3, 5, 0], [4, 6, 1]];
        const targets = chords[this.currentChord];
        let baseFreq, octaveRange;
        if (type === 0) {
            baseFreq = root / 2;
            octaveRange = 2;
        } else if (type === 1) {
            baseFreq = root * 2;
            octaveRange = 3;
        } else {
            baseFreq = root * 3.5;
            octaveRange = 2;
        }
        const range = octaveRange * scale.intervals.length;
        let idx = Math.floor((1 - y) * range);
        const oct = Math.floor(idx / scale.intervals.length);
        let deg = idx % scale.intervals.length;
        if (!targets.includes(deg) && Math.random() > entropy) {
            deg = targets.reduce((prev, curr) =>
                Math.abs(curr - deg) < Math.abs(prev - deg) ? curr : prev
            );
        }
        const semitone = scale.intervals[deg] !== undefined ? scale.intervals[deg] : 0;
        return baseFreq * Math.pow(2, oct + semitone / 12);
    }
}

class AudioSystem {
    constructor(bus, config) {
        this.bus = bus;
        this.config = config;
        this.harmony = new HarmonicContext(bus, config);
        this.ctx = null;
        this.bassVoices = [];
        this.midVoices = [];
        this.highVoices = [];
        this.cooldowns = { bass: 0, mid: 0, high: 0 };
        this.activity = { bass: 0, mid: 0, high: 0 };
        this.nextNoteTime = 0;
        this.noteQueue = [];
        
        // INCREASED LOOKAHEAD: Use quality tier setting for audio buffer safety
        // Tier 0 (Mobile): 0.5s buffer (prevents crackling on jittery main thread)
        // Tier 1 (Laptop): 0.2s buffer (moderate safety)
        // Tier 2 (Desktop): 0.1s buffer (low latency)
        const tierConfig = QUALITY_TIERS[config.state.tier];
        this.scheduleAheadTime = tierConfig.lookahead || 0.1;
        
        this.beatCount = 0;
        this.bus.on('agent.sing', d => this.trigger(d));
        this.bus.on('lfo.update', (lfo) => this.applyLFO(lfo));
    }
    init() {
        const AC = window.AudioContext || window.webkitAudioContext;
        this.ctx = new AC();
        const limiter = this.ctx.createDynamicsCompressor();
        limiter.threshold.value = -4.5;
        limiter.ratio.value = 20;
        limiter.knee.value = 6;
        limiter.attack.value = 0.003;
        limiter.release.value = 0.1;
        limiter.connect(this.ctx.destination);
        this.master = this.ctx.createGain();
        this.master.gain.value = 0;
        this.warmthShaper = this.ctx.createWaveShaper();
        this.warmthShaper.curve = this.createWarmthCurve(this.config.state.warmth);
        this.warmthShaper.oversample = '2x';
        this.master.connect(this.warmthShaper);
        this.warmthShaper.connect(limiter);
        
        // TIER-BASED REVERB: Real convolution for high-end, fake delay for budget
        if (this.config.state.tier > 0) {
            // HIGH-END: Real convolution reverb (rich, FFT-based)
            console.log("[Trinity] Audio: Using Convolution Reverb (high-end)");
            this.reverb = this.ctx.createConvolver();
            this.reverb.buffer = this.createReverb(3.5);
            this.reverbGain = this.ctx.createGain();
            this.reverbGain.gain.value = this.config.state.reverb;
            this.reverb.connect(this.reverbGain);
            this.reverbGain.connect(this.master);
        } else {
            // BUDGET: Fake reverb using feedback delay (no FFT overhead)
            console.log("[Trinity] Audio: Using Feedback Delay Reverb (budget mode - no crackling)");
            this.reverb = this.ctx.createDelay(1.0);
            this.reverb.delayTime.value = 0.4;
            this.reverbGain = this.ctx.createGain();
            this.reverbGain.gain.value = this.config.state.reverb;
            const feedback = this.ctx.createGain();
            feedback.gain.value = 0.4; // Controlled echo
            this.reverb.connect(feedback);
            feedback.connect(this.reverb);
            this.reverb.connect(this.reverbGain);
            this.reverbGain.connect(this.master);
        }
        
        this.delay = this.createDelay();
        this.delay.output.connect(this.master);
        this.bassBus = this.ctx.createGain();
        this.bassBus.gain.value = this.config.state.bassLevel;
        this.bassFilter = this.ctx.createBiquadFilter();
        this.bassFilter.type = 'lowpass';
        this.bassFilter.frequency.value = 200;
        this.bassFilter.Q.value = 1;
        this.bassBus.connect(this.bassFilter);
        this.bassFilter.connect(this.master);
        this.bassFilter.connect(this.reverb);
        this.midBus = this.ctx.createGain();
        this.midBus.gain.value = this.config.state.midLevel;
        this.midFilter = this.ctx.createBiquadFilter();
        this.midFilter.type = 'bandpass';
        this.midFilter.frequency.value = 500;
        this.midFilter.Q.value = 0.7;
        this.midHighPass = this.ctx.createBiquadFilter();
        this.midHighPass.type = 'highpass';
        this.midHighPass.frequency.value = 150;
        this.midBus.connect(this.midHighPass);
        this.midHighPass.connect(this.midFilter);
        this.midFilter.connect(this.master);
        this.midFilter.connect(this.reverb);
        this.midFilter.connect(this.delay.input);
        this.highBus = this.ctx.createGain();
        this.highBus.gain.value = this.config.state.highLevel;
        this.highFilter = this.ctx.createBiquadFilter();
        this.highFilter.type = 'highpass';
        this.highFilter.frequency.value = 300;
        this.highBus.connect(this.highFilter);
        this.highFilter.connect(this.master);
        this.highFilter.connect(this.reverb);
        this.highFilter.connect(this.delay.input);
        const sizes = this.config.state.voicePoolSizes;
        for (let i = 0; i < sizes.bass; i++) this.bassVoices.push(this.createBassVoice());
        for (let i = 0; i < sizes.mid; i++) this.midVoices.push(this.createMidVoice());
        for (let i = 0; i < sizes.high; i++) this.highVoices.push(this.createHighVoice());
        this.master.gain.setTargetAtTime(this.config.state.volume, this.ctx.currentTime, 2);
        this.nextNoteTime = this.ctx.currentTime;
        this._lastWarmth = this.config.state.warmth;
        this.schedulerLoop();
    }

recreateBassVoices() {
        if (!this.ctx) return;
        
        // RACE CONDITION FIX: Build new array first, then swap atomically
        const oldVoices = this.bassVoices;
        const newVoices = [];
        
        const sizes = this.config.state.voicePoolSizes;
        for (let i = 0; i < sizes.bass; i++) {
            newVoices.push(this.createBassVoice());
        }
        
        // ATOMIC SWAP
        this.bassVoices = newVoices;
        
        // Clean up old voices after swap
        oldVoices.forEach(v => {
            if (v.main) {
                v.main.stop();
                v.sub.stop();
                v.main.disconnect();
                v.sub.disconnect();
            }
        });
    }

recreateHighVoices() {
        if (!this.ctx) return;
        
        // RACE CONDITION FIX: Build new array first, then swap atomically
        const oldVoices = this.highVoices;
        const newVoices = [];
        
        const sizes = this.config.state.voicePoolSizes;
        for (let i = 0; i < sizes.high; i++) {
            newVoices.push(this.createHighVoice());
        }
        
        // ATOMIC SWAP
        this.highVoices = newVoices;
        
        // Clean up old voices after swap
        oldVoices.forEach(v => {
            if (v.osc) {
                v.osc.stop();
                v.osc.disconnect();
            }
        });
    }

recreateMidVoices() {
        if (!this.ctx) return;
        
        // RACE CONDITION FIX: Build new array first, then swap atomically
        // This prevents empty array if scheduler runs during recreation
        const oldVoices = this.midVoices;
        const newVoices = [];
        
        // Create new voices
        const sizes = this.config.state.voicePoolSizes;
        for (let i = 0; i < sizes.mid; i++) {
            newVoices.push(this.createMidVoice());
        }
        
        // ATOMIC SWAP: schedulerLoop never sees empty array
        this.midVoices = newVoices;
        
        // Clean up old voices after swap
        oldVoices.forEach(v => {
            if (v.toneType === 'fm6') {
                v.operators.forEach(osc => {
                    osc.stop();
                    osc.disconnect();
                });
            } else if (v.carrier) {
                v.carrier.stop();
                v.modulator.stop();
                v.carrier.disconnect();
                v.modulator.disconnect();
            }
        });
    }

createPeriodicWave(harmonicsArray) {
        const len = harmonicsArray.length;
        const real = new Float32Array(len);
        const imag = new Float32Array(len);
        for (let i = 0; i < len; i++) {
            real[i] = harmonicsArray[i];
            imag[i] = 0;
        }
        return this.ctx.createPeriodicWave(real, imag, { disableNormalization: false });
    }

getToneType(toneName, range) {
        if (toneName.startsWith('WT ')) return 'wavetable';
        if (toneName.startsWith('FM ') || toneName.startsWith('FM6')) return 'fm6';
        
        const lib = range === 'bass' ? TONE_LIBRARY.BASS :
                     range === 'mid' ? TONE_LIBRARY.MID : TONE_LIBRARY.HIGH;
        const tone = lib[toneName];
        if (tone && tone.harmonics) return 'harmonics';
        
        const sampleLib = range === 'bass' ? SAMPLE_LIBRARY.BASS :
                          range === 'mid' ? SAMPLE_LIBRARY.MID : SAMPLE_LIBRARY.HIGH;
        if (sampleLib[toneName]) return 'sample';
        
        return 'harmonics';
    }

createWavetableBank(wavetableDef) {
        const bank = [];
        for (let i = 0; i < wavetableDef.waves.length; i++) {
            bank.push(this.createPeriodicWave(wavetableDef.waves[i]));
        }
        return bank;
    }

getWavetableBank(toneName, range) {
        const cacheKey = range === 'bass' ? 'bass' : 'high';
        if (!WAVETABLE_CACHE[cacheKey][toneName]) {
            const lib = range === 'bass' ? WAVETABLE_LIBRARY.BASS : WAVETABLE_LIBRARY.HIGH;
            const wavetable = lib[toneName];
            if (wavetable && wavetable.type === 'wavetable') {
                WAVETABLE_CACHE[cacheKey][toneName] = this.createWavetableBank(wavetable);
            }
        }
        return WAVETABLE_CACHE[cacheKey][toneName];
    }

async generateProceduralSample(toneName, range) {
        const sampleRate = this.ctx.sampleRate;
        const duration = 1.0;
        const length = sampleRate * duration;
        const buffer = this.ctx.createBuffer(1, length, sampleRate);
        const data = buffer.getChannelData(0);
        
        const lib = range === 'bass' ? SAMPLE_LIBRARY.BASS : 
                     range === 'mid' ? SAMPLE_LIBRARY.MID : SAMPLE_LIBRARY.HIGH;
        const sampleDef = lib[toneName];
        
        if (toneName.includes('808') || toneName.includes('909')) {
            const freq = sampleDef.basePitch;
            let phase = 0;
            const phaseInc = (2 * Math.PI * freq) / sampleRate;
            for (let i = 0; i < length; i++) {
                const t = i / sampleRate;
                const env = Math.exp(-t * (toneName.includes('808') ? 5 : 10));
                const pitchSweep = freq * (1 + 50 * Math.exp(-t * 15));
                const newPhaseInc = (2 * Math.PI * pitchSweep) / sampleRate;
                phase += newPhaseInc;
                data[i] = Math.sin(phase) * env;
            }
        } else if (toneName.includes('Snare') || toneName.includes('Hi-Hat')) {
            for (let i = 0; i < length; i++) {
                const t = i / sampleRate;
                const env = Math.exp(-t * (toneName.includes('Hat') ? 50 : 20));
                const noise = (Math.random() * 2 - 1) * env;
                const tone = Math.sin(2 * Math.PI * sampleDef.basePitch * t) * env * 0.3;
                data[i] = noise * 0.7 + tone * 0.3;
            }
        } else {
            for (let i = 0; i < length; i++) {
                const t = i / sampleRate;
                const env = Math.exp(-t * 3);
                data[i] = Math.sin(2 * Math.PI * sampleDef.basePitch * t) * env;
            }
        }
        
        return buffer;
    }

getSample(toneName, range) {
        const cacheKey = range === 'bass' ? 'bass' : range === 'mid' ? 'mid' : 'high';
        
        if (!SAMPLE_CACHE[cacheKey][toneName]) {
            SAMPLE_CACHE[cacheKey][toneName] = this.generateProceduralSample(toneName, range);
        }
        
        return SAMPLE_CACHE[cacheKey][toneName];
    }

getBassWave(toneName) {
        if (!WAVE_CACHE.bass[toneName]) {
            const tone = TONE_LIBRARY.BASS[toneName];
            if (tone && tone.harmonics) {
                WAVE_CACHE.bass[toneName] = this.createPeriodicWave(tone.harmonics);
            }
        }
        return WAVE_CACHE.bass[toneName];
    }

getHighWave(toneName) {
        if (!WAVE_CACHE.high[toneName]) {
            const tone = TONE_LIBRARY.HIGH[toneName];
            if (tone && tone.harmonics) {
                WAVE_CACHE.high[toneName] = this.createPeriodicWave(tone.harmonics);
            }
        }
        return WAVE_CACHE.high[toneName];
    }
    createBassVoice() {
        const t = this.ctx.currentTime;
        const toneName = this.config.state.currentBassTone;
        const toneType = this.getToneType(toneName, 'bass');
        
        const v = {
            main: toneType === 'sample' ? null : this.ctx.createOscillator(),
            mainGain: this.ctx.createGain(),
            sub: this.ctx.createOscillator(),
            subGain: this.ctx.createGain(),
            filter: this.ctx.createBiquadFilter(),
            env: this.ctx.createGain(),
            reverbSend: this.ctx.createGain(),
            active: false,
            freeTime: 0,
            toneType: toneType,
            toneName: toneName,
            wavetableBank: null,
            wavetablePosition: 0
        };

if (toneType === 'wavetable') {
            v.wavetableBank = this.getWavetableBank(toneName, 'bass');
            if (v.wavetableBank && v.wavetableBank.length > 0) {
                v.main.setPeriodicWave(v.wavetableBank[0]);
            }
        } else if (toneType === 'harmonics') {
            const wave = this.getBassWave(toneName);
            if (wave) {
                v.main.setPeriodicWave(wave);
            } else {
                v.main.type = 'sawtooth';
            }
        }
        
        if (v.main) {
            v.sub.type = 'sine';
            v.filter.type = 'lowpass';
            v.filter.frequency.value = 200;
            v.filter.Q.value = 4;
            v.main.connect(v.mainGain);
            v.sub.connect(v.subGain);
            v.mainGain.connect(v.filter);
            v.subGain.connect(v.filter);
            v.filter.connect(v.env);
            v.env.connect(this.bassBus);
            v.env.connect(v.reverbSend);
            v.reverbSend.connect(this.reverb);
            v.reverbSend.gain.setValueAtTime(0, t);
            v.mainGain.gain.setValueAtTime(0.5, t);
            v.subGain.gain.setValueAtTime(0.5, t);
            v.env.gain.setValueAtTime(0, t);
            v.main.start(t);
            v.sub.start(t);
        } else {
            v.filter.type = 'lowpass';
            v.filter.frequency.value = 200;
            v.filter.Q.value = 4;
            v.mainGain.connect(v.filter);
            v.filter.connect(v.env);
            v.env.connect(this.bassBus);
            v.env.connect(v.reverbSend);
            v.reverbSend.connect(this.reverb);
            v.reverbSend.gain.setValueAtTime(0, t);
            v.env.gain.setValueAtTime(0, t);
        }
        
        return v;
    }
    createMidVoice() {
        const t = this.ctx.currentTime;
        const toneName = this.config.state.currentMidTone;
        let toneType = this.getToneType(toneName, 'mid');
        
        // CRITICAL: Tier-based synthesis limiting
        const tier = this.config.state.tier;
        const tierConfig = QUALITY_TIERS[tier];
        
        // Downgrade 6-op FM on mobile to prevent audio crackling
        if (toneType === 'fm6' && !tierConfig.allowFM6) {
            console.warn(`[Trinity] Downgrading FM6 → 2-Op FM on ${tierConfig.name} (tier ${tier}) for performance`);
            toneType = 'harmonics'; // Fallback to standard 2-op FM
        }
        
        if (toneType === 'fm6') {
            return this.create6OpFMVoice();
        }
        
        const v = {
            carrier: this.ctx.createOscillator(),
            modulator: this.ctx.createOscillator(),
            modGain: this.ctx.createGain(),
            env: this.ctx.createGain(),
            pan: this.ctx.createStereoPanner(),
            depthFilter: this.ctx.createBiquadFilter(),
            reverbSend: this.ctx.createGain(),
            active: false, freeTime: 0,
            toneType: toneType
        };
        v.carrier.type = this.config.state.midWaveform;
        v.modulator.type = 'sine';
        v.modulator.connect(v.modGain);
        v.modGain.connect(v.carrier.frequency);
        v.carrier.connect(v.env);
        v.env.connect(v.depthFilter);
        v.depthFilter.connect(v.pan);
        v.pan.connect(this.midBus);
        v.pan.connect(v.reverbSend);
        v.reverbSend.connect(this.reverb);
        v.reverbSend.gain.setValueAtTime(0, t);
        v.depthFilter.type = 'lowpass';
        v.depthFilter.frequency.value = 8000;
        v.depthFilter.Q.value = 1;
        v.env.gain.setValueAtTime(0, t);
        v.carrier.start(t);
        v.modulator.start(t);
        return v;
    }

create6OpFMVoice() {
        const t = this.ctx.currentTime;
        const toneName = this.config.state.currentMidTone;
        const patch = FM6_LIBRARY[toneName];
        
        if (!patch) {
            return this.createMidVoice();
        }
        
        const v = {
            operators: [],
            gains: [],
            envs: [],
            pan: this.ctx.createStereoPanner(),
            depthFilter: this.ctx.createBiquadFilter(),
            reverbSend: this.ctx.createGain(),
            output: this.ctx.createGain(),
            active: false,
            freeTime: 0,
            toneType: 'fm6',
            patch: patch
        };
        
        for (let i = 0; i < 6; i++) {
            const osc = this.ctx.createOscillator();
            const gain = this.ctx.createGain();
            const env = this.ctx.createGain();
            
            osc.type = 'sine';
            gain.gain.value = patch.operators[i].level;
            env.gain.value = 0;
            
            osc.connect(gain);
            gain.connect(env);
            
            v.operators.push(osc);
            v.gains.push(gain);
            v.envs.push(env);
            
            osc.start(t);
        }
        
        const algorithm = FM_ALGORITHMS[patch.algorithm];
        algorithm.routing.forEach(([from, to]) => {
            const fromIdx = from - 1;
            const toIdx = to - 1;
            v.envs[fromIdx].connect(v.operators[toIdx].frequency);
        });
        
        v.envs[0].connect(v.output);
        
        v.output.connect(v.depthFilter);
        v.depthFilter.connect(v.pan);
        v.pan.connect(this.midBus);
        v.pan.connect(v.reverbSend);
        v.reverbSend.connect(this.reverb);
        v.reverbSend.gain.setValueAtTime(0, t);
        v.depthFilter.type = 'lowpass';
        v.depthFilter.frequency.value = 8000;
        v.depthFilter.Q.value = 1;
        v.output.gain.value = 0.3;
        
        return v;
    }
    createHighVoice() {
        const t = this.ctx.currentTime;
        const v = {
            osc: this.ctx.createOscillator(),
            env: this.ctx.createGain(),
            pan: this.ctx.createStereoPanner(),
            depthFilter: this.ctx.createBiquadFilter(),
            reverbSend: this.ctx.createGain(),
            active: false, freeTime: 0
        };

if (v.toneType === 'sample') {
            const sampleBuffer = await this.getSample(v.toneName, 'bass');
            if (sampleBuffer) {
                const source = this.ctx.createBufferSource();
                source.buffer = sampleBuffer;
                const lib = SAMPLE_LIBRARY.BASS[v.toneName];
                const playbackRate = note.freq / lib.basePitch;
                source.playbackRate.value = playbackRate;
                source.connect(v.mainGain);
                source.start(t);
                source.stop(t + sampleBuffer.duration / playbackRate);
            }
        } else if (v.toneType === 'wavetable' && v.wavetableBank) {
            const position = Math.min(note.vel, 0.99);
            const index = Math.floor(position * (v.wavetableBank.length - 1));
            v.main.setPeriodicWave(v.wavetableBank[index]);
            v.main.frequency.setTargetAtTime(note.freq, t, 0.01);
            v.sub.frequency.setTargetAtTime(note.freq / 2, t, 0.01);
            v.subGain.gain.setTargetAtTime(0.4, t, 0.01);
        } else if (v.main) {
            v.main.frequency.setTargetAtTime(note.freq, t, 0.01);
            v.sub.frequency.setTargetAtTime(note.freq / 2, t, 0.01);
            v.subGain.gain.setTargetAtTime(0.4, t, 0.01);
        }
        
        const depthAmount = this.config.state.depthAmount;
        const baseFilter = this.config.state.filter; 
        const filterPeak = baseFilter * (1.0 + note.vel * 2.0); 
        
        v.filter.frequency.cancelScheduledValues(t);
        v.filter.frequency.setValueAtTime(filterPeak, t);
        v.filter.frequency.exponentialRampToValueAtTime(Math.max(80, baseFilter * 0.5), t + 0.3);
        
        const reverbAmount = (1 - note.depth) * depthAmount * 0.3;
        v.reverbSend.gain.setValueAtTime(reverbAmount, t);
        const distanceAttenuation = 0.7 + (note.depth * 0.3);
        const peak = Math.min(0.30, note.vel * 0.28 * this.config.state.bassLevel * distanceAttenuation);
        
        const attack = this.config.state.bassAttack;
        const release = this.config.state.bassRelease;
        
        v.env.gain.cancelScheduledValues(t);
        v.env.gain.setValueAtTime(0.001, t);
        v.env.gain.exponentialRampToValueAtTime(Math.max(0.001, peak), t + attack);
        v.env.gain.setTargetAtTime(peak * 0.6, t + attack + 0.1, 0.3);
        v.env.gain.setTargetAtTime(0.001, t + 0.4, release);
        
        const dur = release * 5;
        v.releaseTime = t + dur; // Track exact audio time when voice finishes
        // REMOVED: setTimeout(() => { v.active = false; }, delay * 1000);
        // Voice will be freed in update() loop based on audio clock
        this.activity.bass = 1;
    }
    playMidNote(note, t) {
        let v = this.midVoices.find(v => !v.active);
        
        if (!v) {
            if (note.vel < 0.25) return;
            if (this.midVoices.length === 0) return;
            v = this.midVoices.reduce((a, b) => (a.releaseTime || 0) < (b.releaseTime || 0) ? a : b);
            
            const now = this.ctx.currentTime;
            if (v.toneType === 'fm6') {
                v.envs.forEach(e => {
                    e.gain.cancelScheduledValues(now);
                    e.gain.setValueAtTime(e.gain.value, now);
                    e.gain.linearRampToValueAtTime(0.0001, now + 0.01);
                });
            } else if (v.env) {
                v.env.gain.cancelScheduledValues(now);
                v.env.gain.setValueAtTime(v.env.gain.value, now);
                v.env.gain.linearRampToValueAtTime(0.0001, now + 0.01);
            }
            t = Math.max(t, now + 0.015);
        }
        v.active = true;

if (v.toneType === 'sample') {
            this.getSample(v.toneName, 'mid').then(sampleBuffer => {
                if (sampleBuffer) {
                    const source = this.ctx.createBufferSource();
                    source.buffer = sampleBuffer;
                    
                    const lib = SAMPLE_LIBRARY.MID[v.toneName];
                    const jitter = (Math.random() - 0.5) * 0.01 * (1 - note.vel);
                    source.playbackRate.value = (note.freq / lib.basePitch) + jitter;
                    
                    if (lib.loop) {
                        source.loop = true;
                        source.loopStart = 0;
                        source.loopEnd = sampleBuffer.duration;
                    }

source.connect(v.env);
                    source.start(t);
                    
                    const baseAttack = this.config.state.midAttack;
                    const dynAttack = baseAttack + ((1.0 - note.vel) * 0.4);
                    const release = this.config.state.midRelease;
                    const peak = Math.min(0.25, note.vel * 0.3 * this.config.state.midLevel);
                    
                    v.env.gain.cancelScheduledValues(t);
                    v.env.gain.setValueAtTime(0.001, t);
                    v.env.gain.exponentialRampToValueAtTime(Math.max(0.001, peak), t + dynAttack);
                    v.env.gain.setTargetAtTime(0.001, t + dynAttack + 0.1, release);
                    
                    const dur = release * 5;
                    source.stop(t + dur);
                    v.releaseTime = t + dur;
                }
            });
            return;
        }

if (v.toneType === 'fm6') {
            const patch = v.patch;
            for (let i = 0; i < 6; i++) {
                const op = patch.operators[i];
                v.operators[i].frequency.setTargetAtTime(note.freq * op.ratio, t, 0.005);
                const env = v.envs[i];
                const level = op.level * (note.vel * 0.6 + 0.4);
                env.gain.cancelScheduledValues(t);
                env.gain.setValueAtTime(0.001, t);
                env.gain.exponentialRampToValueAtTime(Math.max(0.001, level), t + op.attack);
                env.gain.exponentialRampToValueAtTime(Math.max(0.001, level * op.sustain), t + op.attack + op.decay);
                env.gain.setTargetAtTime(0.001, t + op.attack + op.decay, op.release);
            }
            const attack = Math.max(...patch.operators.map(op => op.attack));
            const release = Math.max(...patch.operators.map(op => op.release));
            const dur = attack + release * 3;
            v.pan.pan.setTargetAtTime(Math.max(-0.7, Math.min(0.7, note.pan)), t, 0.01);
            const depthAmount = this.config.state.depthAmount;
            const filterFreq = 500 + (note.depth * 7500 * depthAmount);
            v.depthFilter.frequency.setValueAtTime(filterFreq, t);
            const reverbAmount = (1 - note.depth) * depthAmount * 0.4;
            v.reverbSend.gain.setValueAtTime(reverbAmount, t);
            v.releaseTime = t + dur;
        } else {
            v.carrier.type = this.config.state.midWaveform;
            const detune = 1 + (Math.random() - 0.5) * 0.006;
            v.carrier.frequency.setTargetAtTime(note.freq * detune, t, 0.005);
            const fmRatio = this.config.state.fmRatio;
            v.modulator.frequency.setTargetAtTime(note.freq * fmRatio, t, 0.005);
            const fmDepth = this.config.fmDepth;
            const modAmount = note.freq * fmDepth * note.vel;
            v.modGain.gain.cancelScheduledValues(t);
            v.modGain.gain.setTargetAtTime(modAmount, t, 0.02);
            v.modGain.gain.setTargetAtTime(modAmount * 0.3, t + 0.15, 0.2);
            v.pan.pan.setTargetAtTime(Math.max(-0.7, Math.min(0.7, note.pan)), t, 0.01);
            const depthAmount = this.config.state.depthAmount;
            const filterFreq = 500 + (note.depth * 7500 * depthAmount);
            v.depthFilter.frequency.setValueAtTime(filterFreq, t);
            const reverbAmount = (1 - note.depth) * depthAmount * 0.4;
            v.reverbSend.gain.setValueAtTime(reverbAmount, t);
            const peak = Math.min(0.22, note.vel * 0.25 * this.config.state.midLevel);
            const attack = this.config.state.midAttack;
            const release = this.config.state.midRelease;
            v.env.gain.cancelScheduledValues(t);
            v.env.gain.setValueAtTime(0.001, t);
            v.env.gain.exponentialRampToValueAtTime(Math.max(0.001, peak), t + attack);
            v.env.gain.setTargetAtTime(0.001, t + 0.2, release);
            const dur = release * 5;
            v.releaseTime = t + dur;
        }
        
        this.activity.mid = 1;
    }
    playHighNote(note, t) {
        let v = this.highVoices.find(v => !v.active);
        if (!v) {
            if (note.vel < 0.3) return;
            if (this.highVoices.length === 0) return;
            v = this.highVoices.reduce((a, b) => (a.releaseTime || 0) < (b.releaseTime || 0) ? a : b);
            const now = this.ctx.currentTime;
            if (v.env) {
                v.env.gain.cancelScheduledValues(now);
                v.env.gain.setValueAtTime(v.env.gain.value, now);
                v.env.gain.linearRampToValueAtTime(0.0001, now + 0.01);
            }
            t = Math.max(t, now + 0.015);
        }
        v.active = true;

if (v.toneType === 'sample') {
             this.getSample(v.toneName, 'high').then(sampleBuffer => {
                if (sampleBuffer) {
                    const source = this.ctx.createBufferSource();
                    source.buffer = sampleBuffer;
                    const lib = SAMPLE_LIBRARY.HIGH[v.toneName];
                    source.playbackRate.value = note.freq / lib.basePitch;
                    
                    source.connect(v.env);
                    source.start(t);
                    
                    const attack = this.config.state.highAttack;
                    const release = this.config.state.highRelease;
                    const distanceAttenuation = 0.5 + (note.depth * 0.5);
                    const peak = Math.min(0.18, note.vel * 0.2 * this.config.state.highLevel * distanceAttenuation);
                    
                    v.env.gain.cancelScheduledValues(t);
                    v.env.gain.setValueAtTime(0.001, t);
                    v.env.gain.exponentialRampToValueAtTime(Math.max(0.001, peak), t + attack);
                    v.env.gain.setTargetAtTime(0.001, t + 0.08, release);
                    
                    const dur = release * 5;
                    source.stop(t + dur);
                    v.releaseTime = t + dur;
                }
            });
            return;
        }

v.osc.frequency.setTargetAtTime(note.freq, t, 0.003);
        v.pan.pan.setTargetAtTime(Math.max(-0.95, Math.min(0.95, note.pan * 1.5)), t, 0.01);
        
        const depthAmount = this.config.state.depthAmount;
        const filterFreq = 1000 + (note.depth * 11000 * depthAmount);
        v.depthFilter.frequency.setTargetAtTime(filterFreq, t, 0.01);
        
        const reverbAmount = (1 - note.depth) * depthAmount * 0.5;
        v.reverbSend.gain.setTargetAtTime(reverbAmount, t, 0.01);
        
        const distanceAttenuation = 0.5 + (note.depth * 0.5);
        const peak = Math.min(0.18, note.vel * 0.15 * this.config.state.highLevel * distanceAttenuation);
        
        const attack = this.config.state.highAttack;
        const release = this.config.state.highRelease;
        
        v.env.gain.cancelScheduledValues(t);
        v.env.gain.setValueAtTime(0.001, t);
        v.env.gain.exponentialRampToValueAtTime(Math.max(0.001, peak), t + attack);
        v.env.gain.setTargetAtTime(0.001, t + 0.08, release);
        
        const dur = release * 5;
        v.releaseTime = t + dur;
        this.activity.high = 1;
    }
    update() {
        if (!this.ctx) return;
        const t = this.ctx.currentTime;
        
        // FREE VOICES BASED ON AUDIO CLOCK (not setTimeout)
        // This prevents voice starvation when main thread is busy
        [this.bassVoices, this.midVoices, this.highVoices].forEach(pool => {
            pool.forEach(v => {
                if (v.active && v.releaseTime && t > v.releaseTime) {
                    v.active = false;
                }
            });
        });
        
        this.master.gain.setTargetAtTime(this.config.state.volume, t, 0.2);
        this.bassBus.gain.setTargetAtTime(this.config.state.bassLevel, t, 0.2);
        this.midBus.gain.setTargetAtTime(this.config.state.midLevel, t, 0.2);
        this.highBus.gain.setTargetAtTime(this.config.state.highLevel, t, 0.2);
        const decayNorm = Math.max(0, (this.config.state.decay - 0.90) / 0.09);
        const reverbMod = 0.5 + (decayNorm * 1.0);
        const effectiveReverb = Math.min(1, this.config.state.reverb * reverbMod);
        this.reverbGain.gain.setTargetAtTime(effectiveReverb, t, 0.2);
        this.delay.output.gain.setTargetAtTime(this.config.state.delay, t, 0.2);
        this.midFilter.Q.setTargetAtTime(this.config.state.resonance, t, 0.1);
        if (this.warmthShaper && Math.abs(this._lastWarmth - this.config.state.warmth) > 0.05) {
            this.warmthShaper.curve = this.createWarmthCurve(this.config.state.warmth);
            this._lastWarmth = this.config.state.warmth;
        }
        
        this.activity.bass *= 0.92;
        this.activity.mid *= 0.92;
        this.activity.high *= 0.92;
        this.bus.emit('voice.activity', this.activity);
    }
}

class WebGLVisuals {
    constructor(bus, config) {
        this.bus = bus;
        this.config = config;
        this.canvas = document.getElementById('canvas');
        this.gl = this.canvas.getContext('webgl2', {
            alpha: false,
            antialias: false,
            powerPreference: this.config.state.tier === 0 ? 'low-power' : 'high-performance'
        });
        
        this.voiceActivity = { bass: 0, mid: 0, high: 0 };
        
        if (!this.gl) return;
        
        this.ext = this.gl.getExtension('EXT_color_buffer_float');
        this.gl.getExtension('OES_texture_float_linear');

if (!this.ext) {
            console.warn('[WebGL] EXT_color_buffer_float not supported, falling back to HALF_FLOAT');
            this.ext = this.gl.getExtension('EXT_color_buffer_half_float');
            this.useHalfFloat = true;
        } else {
            this.useHalfFloat = false;
        }

const flatBass = new Float32Array([...prof.bass.a, ...prof.bass.b, ...prof.bass.c, ...prof.bass.d]);
        const flatMid  = new Float32Array([...prof.mid.a, ...prof.mid.b, ...prof.mid.c, ...prof.mid.d]);
        const flatHigh = new Float32Array([...prof.high.a, ...prof.high.b, ...prof.high.c, ...prof.high.d]);
        
        gl.uniform3fv(gl.getUniformLocation(this.programs.display, 'uBass'), flatBass);
        gl.uniform3fv(gl.getUniformLocation(this.programs.display, 'uMid'), flatMid);
        gl.uniform3fv(gl.getUniformLocation(this.programs.display, 'uHigh'), flatHigh);
        
        gl.bindVertexArray(this.quadVao);
        gl.drawArrays(5, 0, 4);
    }
}

class CPUSim {
    constructor(bus, config) {
        this.bus = bus;
        this.config = config;
        this.agents = [];
        this.mouseX = -1;
        this.mouseY = -1;
        // OPTIMIZATION: Use Uint16Array instead of Map for spatial grid
        // Eliminates GC pressure from Map.clear() 60 times/sec
        this.spatialGrid = null;  // Will be initialized after we know screen size
        this.gridWidth = 0;
        this.gridHeight = 0;
        // FRAME SKIPPING: On Tier 0 (mobile), run physics at 30fps instead of 60fps
        this.frameSkip = 0;
        this.init();
        
        window.addEventListener('mousemove', e => {
            this.mouseX = e.clientX * config.state.dpr;
            this.mouseY = e.clientY * config.state.dpr;
        });
        window.addEventListener('touchmove', e => {
            if (e.touches && e.touches.length > 0) {
                this.mouseX = e.touches[0].clientX * config.state.dpr;
                this.mouseY = e.touches[0].clientY * config.state.dpr;
            }
        });
        window.addEventListener('touchend', () => { this.mouseX = -1; });
    }
    
    init() {
        const counts = this.config.state.ghostCounts;
        const w = this.config.state.width || (window.innerWidth * this.config.state.dpr);
        const h = this.config.state.height || (window.innerHeight * this.config.state.dpr);
        
        console.log(`[CPUSim] Spawning ${counts.bass} bass, ${counts.mid} mid, ${counts.high} high ghosts`);
        
        for (let i = 0; i < counts.bass; i++) {
            this.agents.push({
                x: Math.random() * w, y: Math.random() * h,
                vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2,
                type: 0, maxSpeed: 1.2, maxForce: 0.08
            });
        }
        for (let i = 0; i < counts.mid; i++) {
            this.agents.push({
                x: Math.random() * w, y: Math.random() * h,
                vx: (Math.random() - 0.5) * 3, vy: (Math.random() - 0.5) * 3,
                type: 1, maxSpeed: 2.0, maxForce: 0.15
            });
        }
        for (let i = 0; i < counts.high; i++) {
            this.agents.push({
                x: Math.random() * w, y: Math.random() * h,
                vx: (Math.random() - 0.5) * 4, vy: (Math.random() - 0.5) * 4,
                type: 2, maxSpeed: 3.0, maxForce: 0.25
            });
        }
    }
    
    generateFlowField(x, y, time) {
        const scale = 0.003;
        // MATCH GPU SHADER EXACTLY:
        // GPU: sin(pos.x * 0.003 + uTime * 0.2) * cos(pos.y * 0.003 - uTime * 0.14)
        const angle = Math.sin(x * scale + time * 0.2) * Math.cos(y * scale - time * 0.14) * Math.PI * 2;
        const angle2 = Math.cos(x * scale * 1.3 + time * 0.22) * Math.sin(y * scale * 0.8 + time * 0.18) * Math.PI;
        const finalAngle = (angle * 0.7 + angle2 * 0.3);
        return { x: Math.cos(finalAngle), y: Math.sin(finalAngle) };
    }
    
    limit(vx, vy, max) {
        const mag = Math.sqrt(vx * vx + vy * vy);
        if (mag > max && mag > 0) {
            return { x: (vx / mag) * max, y: (vy / mag) * max };
        }
        return { x: vx, y: vy };
    }
    
    update() {
        // FRAME SKIPPING: On Tier 0 (mobile), only run physics every 2nd frame
        // This reduces CPU load by 50%, giving main thread breathing room for audio
        if (this.config.state.tier === 0) {
            this.frameSkip++;
            if (this.frameSkip % 2 !== 0) return; // Skip odd frames (30fps physics)
        }
        
        const C = this.config.state;
        let sumX = 0;
        
        // OPTIMIZATION: Initialize/resize spatial grid if needed
        const couplingMod = 1 - (this.config.coupling * 0.5);
        const cellSize = Math.max(15, (150 - C.threshold) * couplingMod);
        const gridW = Math.ceil(C.width / cellSize) + 1;
        const gridH = Math.ceil(C.height / cellSize) + 1;
        
        if (!this.spatialGrid || this.gridWidth !== gridW || this.gridHeight !== gridH) {
            this.gridWidth = gridW;
            this.gridHeight = gridH;
            this.spatialGrid = new Uint16Array(gridW * gridH);
            console.log(`[CPUSim] Spatial grid: ${gridW}×${gridH} = ${gridW * gridH} cells`);
        }
        
        // Fast zero-fill (no GC pressure like Map.clear())
        this.spatialGrid.fill(0);
        
        // Use same time basis as GPU shader (performance.now() / 1000)
        const time = performance.now() / 1000;
        
        for (let agent of this.agents) {
            if ((agent.x <= 0 || agent.y <= 0) && C.width > 0) {
                agent.x = Math.random() * C.width;
                agent.y = Math.random() * C.height;
            }
            
            let steerX = 0, steerY = 0;
            const eq = C.equationMode;
            const kineticBoost = C.kineticMode ? 1.5 : 1.0;
            
            let flowX = 0, flowY = 0;
            
            if (eq === 2 || (eq === 0 && C.flowSync > 0)) {
                const flow = this.generateFlowField(agent.x, agent.y, time);
                flowX = flow.x;
                flowY = flow.y;
            } else if (eq === 3) {
                const q = 1.57079;
                const targetAngle = Math.floor(Math.atan2(agent.vy, agent.vx) / q + 0.5) * q;
                flowX = Math.cos(targetAngle);
                flowY = Math.sin(targetAngle);
            }
            
            const effectiveFlow = (eq === 1) ? 0.1 : (eq === 2 ? 0.8 : C.flowSync);
            steerX += flowX * effectiveFlow * 0.5 * kineticBoost;
            steerY += flowY * effectiveFlow * 0.5 * kineticBoost;
            
            if (this.mouseX > 0) {
                const dx = this.mouseX - agent.x;
                const dy = this.mouseY - agent.y;
                const dist = Math.sqrt(dx * dx + dy * dy);
                if (dist < 400 && dist > 0) {
                    const force = (400 - dist) / 400;
                    steerX += (dx / dist) * force * 0.5;
                    steerY += (dy / dist) * force * 0.5;
                }
            }
            
            const sensorAngle = this.config.sensorAngle;
            const angleDeviation = Math.abs(sensorAngle - 0.52);
            const chaosMod = 1 + (angleDeviation * 3);

class UIManager {
    constructor(bus, config, audio = null) {
        this.bus = bus;
        this.config = config;
        this.audio = audio; 
    }
    
    cosineToRGB(t, a, b, c, d) {
        const r = Math.floor(Math.max(0, Math.min(255,
            
            (a[0] + b[0] * (0.5 + 0.5 * Math.cos(6.28318 * (c[0] * t + d[0])))) * 255
        )));
        const g = Math.floor(Math.max(0, Math.min(255,
            (a[1] + b[1] * (0.5 + 0.5 * Math.cos(6.28318 * (c[1] * t + d[1])))) * 255
        )));
        const bl = Math.floor(Math.max(0, Math.min(255,
            (a[2] + b[2] * (0.5 + 0.5 * Math.cos(6.28318 * (c[2] * t + d[2])))) * 255
        )));
        return `rgb(${r}, ${g}, ${bl})`;
    }
    
    updateProfilePreview() {
        const profile = this.config.currentProfile;
        const previewBox = document.getElementById('profile-preview');
        if (!previewBox) return;
        const bassColor = this.cosineToRGB(0.5, profile.bass.a, profile.bass.b, profile.bass.c, profile.bass.d);
        const midColor = this.cosineToRGB(0.5, profile.mid.a, profile.mid.b, profile.mid.c, profile.mid.d);
        const highColor = this.cosineToRGB(0.5, profile.high.a, profile.high.b, profile.high.c, profile.high.d);
        previewBox.innerHTML = `
            <div class="preview-colors">
                <span class="color-swatch" style="background: ${bassColor}"></span>
                <span class="color-swatch" style="background: ${midColor}"></span>
                <span class="color-swatch" style="background: ${highColor}"></span>
            </div>
            <div class="preview-info">
                Wave: ${profile.waveform} | BPM: ${profile.bpm} | ${SCALES[profile.scaleIndex].name}
            </div>
        `;
        document.documentElement.style.setProperty('--accent', profile.accent);
    }

initToneSelectors() {
        const populate = (id, cat, configKey) => {
            const sel = document.getElementById(id);
            if (!sel) return;
            
            const tier = this.config.state.tier;
            const tierConfig = QUALITY_TIERS[tier];
            
            let allTones = [];
            
            const baseTones = Object.keys(TONE_LIBRARY[cat]);
            allTones.push({group: 'Synthesis', tones: baseTones});
            
            if (cat === 'BASS') {
                const wavetables = Object.keys(WAVETABLE_LIBRARY.BASS || {});
                if (wavetables.length > 0 && tierConfig.allowWavetables) {
                    allTones.push({group: 'Wavetables', tones: wavetables});
                }
                const samples = Object.keys(SAMPLE_LIBRARY.BASS || {});
                if (samples.length > 0 && tierConfig.allowSamples) {
                    allTones.push({group: 'Samples', tones: samples});
                }
            } else if (cat === 'MID') {
                const fm6 = Object.keys(FM6_LIBRARY || {});
                if (fm6.length > 0) {
                    if (tierConfig.allowFM6) {
                        allTones.push({group: '6-Op FM', tones: fm6});
                    } else {
                        // Show grayed out on mobile with warning
                        allTones.push({group: '6-Op FM (Desktop Only)', tones: fm6, disabled: true});
                    }
                }
                const samples = Object.keys(SAMPLE_LIBRARY.MID || {});
                if (samples.length > 0 && tierConfig.allowSamples) {
                    allTones.push({group: 'Samples', tones: samples});
                }
            } else if (cat === 'HIGH') {
                const wavetables = Object.keys(WAVETABLE_LIBRARY.HIGH || {});
                if (wavetables.length > 0 && tierConfig.allowWavetables) {
                    allTones.push({group: 'Wavetables', tones: wavetables});
                }
                const samples = Object.keys(SAMPLE_LIBRARY.HIGH || {});
                if (samples.length > 0 && tierConfig.allowSamples) {
                    allTones.push({group: 'Samples', tones: samples});
                }
            }
            
            let html = '';
            allTones.forEach(group => {
                if (group.tones.length > 0) {
                    html += `<optgroup label="${group.group}">`;
                    group.tones.forEach(key => {
                        if (group.disabled) {
                            html += `<option value="${key}" disabled title="Desktop only - auto-downgrades on mobile">${key} (Desktop)</option>`;
                        } else {
                            html += `<option value="${key}">${key}</option>`;
                        }
                    });
                    html += '</optgroup>';
                }
            });
            sel.innerHTML = html;

if (this.config.state[configKey]) {
                sel.value = this.config.state[configKey];
            }
            
            sel.onchange = (e) => {
                const key = e.target.value;
                if (!key) return;
                const tone = TONE_LIBRARY[cat][key] || 
                             (cat === 'BASS' ? WAVETABLE_LIBRARY.BASS[key] || SAMPLE_LIBRARY.BASS[key] : null) ||
                             (cat === 'MID' ? FM6_LIBRARY[key] || SAMPLE_LIBRARY.MID[key] : null) ||
                             (cat === 'HIGH' ? WAVETABLE_LIBRARY.HIGH[key] || SAMPLE_LIBRARY.HIGH[key] : null);

this.config.set(configKey, key);

if (cat === 'BASS') {
                    if (tone && tone.attack !== undefined) this.config.set('bassAttack', tone.attack);
                    if (tone && tone.release !== undefined) this.config.set('bassRelease', tone.release);
                    
                    if (this.audio) {
                        this.audio.recreateBassVoices();
                    }
                } else if (cat === 'MID') {
                    if (tone && tone.waveform) this.config.set('midWaveform', tone.waveform);
                    if (tone && tone.fmRatio !== undefined) this.config.set('fmRatio', tone.fmRatio);
                    if (tone && tone.fmDepth !== undefined) this.config.set('fmDepthBase', tone.fmDepth);
                    if (tone && tone.attack !== undefined) this.config.set('midAttack', tone.attack);
                    if (tone && tone.release !== undefined) this.config.set('midRelease', tone.release);
                    
                    if (this.audio && key.startsWith('FM ')) {
                        this.audio.recreateMidVoices();
                    }
                } else if (cat === 'HIGH') {
                    if (tone && tone.attack !== undefined) this.config.set('highAttack', tone.attack);
                    if (tone && tone.release !== undefined) this.config.set('highRelease', tone.release);
                    
                    if (this.audio) {
                        this.audio.recreateHighVoices();
                    }
                }

this.syncSlidersToState();
            };
        };
        
        populate('tone-bass', 'BASS', 'currentBassTone');
        populate('tone-mid', 'MID', 'currentMidTone');
        populate('tone-high', 'HIGH', 'currentHighTone');

const bassSelect = document.getElementById('tone-bass');
        const midSelect = document.getElementById('tone-mid');
        const highSelect = document.getElementById('tone-high');
        
        if (bassSelect) bassSelect.dispatchEvent(new Event('change'));
        if (midSelect && midSelect.value) midSelect.dispatchEvent(new Event('change'));
        if (highSelect) highSelect.dispatchEvent(new Event('change'));
    }

init() {
        
        const setups = [
            ['decay', v => v / 100, v => (v / 100).toFixed(2)],
            ['sensorAngle', v => v * 0.0175, v => v + '°', 'sensorAngleBase'],
            ['sensorDist', v => v, v => v + 'px'],
            ['diffusion', v => v / 100, v => v + '%'],
            ['speed', v => v / 100, v => v + '%'],
            ['flowSync', v => v / 100, v => v + '%'],
            ['coupling', v => v / 100, v => v + '%', 'couplingBase'],
            ['wander', v => v / 100, v => v + '%'],
            ['threshold', v => v, v => v],
            ['entropy', v => v / 100, v => v + '%'],
            ['lfoSpeed', v => v / 100, v => v + '%'],
            ['bassLevel', v => v / 100, v => v + '%'],
            ['midLevel', v => v / 100, v => v + '%'],
            ['highLevel', v => v / 100, v => v + '%'],
            ['bassAttack', v => v / 1000, v => v + 'ms'],
            ['bassRelease', v => v / 100, v => (v / 100).toFixed(1) + 's'],
            ['midAttack', v => v / 1000, v => v + 'ms'],
            ['midRelease', v => v / 100, v => (v / 100).toFixed(1) + 's'],
            ['highAttack', v => v / 1000, v => v + 'ms'],
            ['highRelease', v => v / 100, v => (v / 100).toFixed(1) + 's'],
            ['filter', v => {
                const min = 80, max = 12000;
                return min * Math.pow(max / min, v / 100);
            }, v => {
                const val = 80 * Math.pow(12000 / 80, v / 100);
                return val >= 1000 ? (val / 1000).toFixed(1) + 'kHz' : Math.round(val) + 'Hz';
            }],
            ['resonance', v => v / 10, v => (v / 10).toFixed(1)],
            ['warmth', v => v / 100, v => v + '%'],
            ['audioLfoRate', v => v, v => (v * 0.05).toFixed(1) + 'Hz'],
            ['audioLfoDepth', v => v / 100, v => v + '%'],
            ['reverb', v => v / 100, v => v + '%'],
            ['delay', v => v / 100, v => v + '%'],
            ['depthAmount', v => v / 100, v => v + '%'],
            ['visualLfoSpeed', v => v / 100, v => v + '%'],
            ['glowIntensity', v => v / 100, v => v + '%'],
            ['saturation', v => v / 100, v => v + '%'],
            ['rootNote', v => {
                const minFreq = 27.5, maxFreq = 220;
                return minFreq * Math.pow(maxFreq / minFreq, v / 100);
            }, v => {
                const minFreq = 27.5, maxFreq = 220;
                const freq = minFreq * Math.pow(maxFreq / minFreq, v / 100);
                return freqToNoteName(freq);
            }],
            ['bpm', v => v, v => v],
            ['quantize', v => Math.floor(v), v => v == 0 ? 'Free' : (v == 1 ? '1/4' : (v == 2 ? '1/8' : (v == 3 ? '1/12' : '1/16')))],
            ['volume', v => v / 100, v => v + '%']
        ];
        
        setups.forEach(([id, tx, fmt, k]) => {
            const el = document.getElementById(id);
            const d = document.getElementById('val-' + id);
            if (el) {
                el.oninput = e => {
                    const v = tx(parseFloat(e.target.value));
                    this.config.set(k || id, v);
                    if (d) d.textContent = fmt(parseFloat(e.target.value));
                };
            }
        });
        
        document.getElementById('hud-toggle').onclick = () => {
            document.getElementById('panel').classList.toggle('collapsed');
        };
        
        document.querySelectorAll('.tab').forEach(tab => {
            tab.onclick = () => {
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                
                const target = tab.dataset.tab;
                document.querySelectorAll('.rack').forEach(rack => {
                    if (target === 'all') {
                        rack.classList.remove('hidden');
                    } else {
                        rack.classList.toggle('hidden', rack.dataset.rack !== target);
                    }
                });
            };
        });
        
        ['bass', 'mid', 'high'].forEach((name, idx) => {
            const btn = document.getElementById(`mute-${name}`);
            if (btn) {
                btn.onclick = () => {
                    const key = `mute${idx}`;
                    this.config.set(key, !this.config.state[key]);
                    btn.classList.toggle('active', this.config.state[key]);
                };
            }
        });
        
        document.getElementById('btn-profile').onclick = () => {
            const next = (this.config.state.profileIndex + 1) % PROFILES.length;
            this.config.set('profileIndex', next);
            this.applyProfile(PROFILES[next]);
        };
        
        document.getElementById('btn-scale').onclick = () => {
            const next = (this.config.state.scaleIndex + 1) % SCALES.length;
            this.config.set('scaleIndex', next);
            const chordNum = ["I", "IV", "V"][0];
            document.getElementById('scale-display').textContent = SCALES[next].name + " (" + chordNum + ")";
        };
        
        const seqModes = ["Random", "Up", "Down", "Converge"];
        document.getElementById('btn-seqMode').onclick = () => {
            const next = (this.config.state.seqMode + 1) % 4;
            this.config.set('seqMode', next);
            document.getElementById('btn-seqMode').textContent = "Seq: " + seqModes[next];
        };
        
        const eqModes = ["Trinity", "Neural", "Vortex", "Digital"];
        document.getElementById('btn-math').onclick = () => {
            const next = (this.config.state.equationMode + 1) % 4;
            this.config.set('equationMode', next);
            document.getElementById('btn-math').textContent = "Mode: " + eqModes[next];
        };
        
        document.getElementById('btn-reset').onclick = () => {
            location.reload();
        };
        
        document.getElementById('btn-kinetic').onclick = () => {
            const newMode = !this.config.state.kineticMode;
            this.config.set('kineticMode', newMode);
            document.getElementById('btn-kinetic').textContent = newMode ? "Kinetic Mode: ON" : "Kinetic Mode: OFF";
            document.getElementById('btn-kinetic').style.borderColor = newMode ? 'var(--accent)' : '';
            document.getElementById('btn-kinetic').style.color = newMode ? 'var(--accent)' : '';
            
            const currentGlow = this.config.state.glowIntensity;
            if (newMode) {
                this.kineticOriginalGlow = currentGlow;
                this.config.set('glowIntensity', Math.min(1.0, currentGlow * 1.3));
            } else if (this.kineticOriginalGlow !== undefined) {
                this.config.set('glowIntensity', this.kineticOriginalGlow);
            }
            
            // Update glow slider to reflect change
            const glowSlider = document.getElementById('glowIntensity');
            if (glowSlider) {
                glowSlider.value = this.config.state.glowIntensity * 100;
                const display = document.getElementById('val-glowIntensity');
                if (display) display.textContent = Math.round(this.config.state.glowIntensity * 100) + '%';
            }
            
            // Visual feedback: dim Flow Sync slider when kinetic is OFF
            const flowSlider = document.getElementById('flowSync');
            if (flowSlider) {
                flowSlider.style.opacity = newMode ? '1.0' : '0.5';
                flowSlider.disabled = !newMode;
            }
        };
        
        const bgSel = document.getElementById('bgColorSelect');
        if (bgSel) {
            bgSel.onchange = (e) => {
                const rgb = e.target.value.split(',');
                document.documentElement.style.setProperty('--bg', `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`);
            };
        }
        
        const sysToggle = document.getElementById('system-toggle');
        const sysContent = document.getElementById('system-rack-content');
        const sysIcon = document.getElementById('system-collapse-icon');
        if (sysToggle && sysContent) {
            sysToggle.onclick = () => {
                sysContent.classList.toggle('collapsed');
                sysIcon.textContent = sysContent.classList.contains('collapsed') ? '▶' : '▼';
            };
        }
        
        this.bus.on('lfo.update', (lfo) => {
            const dotA = document.getElementById('lfo-a-dot');
            if (dotA) {
                const pulse = (lfo.a + 1) / 2; 
                const brightness = Math.floor(pulse * 200) + 55;
                dotA.style.background = `rgb(${Math.floor(brightness * 0.4)}, ${brightness}, ${Math.floor(brightness * 0.7)})`;
                dotA.style.boxShadow = `0 0 ${pulse * 8}px rgba(68, 255, 136, ${pulse * 0.8})`;
            }
            const dotV = document.getElementById('lfo-v-dot');
            if (dotV) {
                const pulse = (lfo.visual + 1) / 2; 
                const brightness = Math.floor(pulse * 200) + 55;
                dotV.style.background = `rgb(${Math.floor(brightness * 0.4)}, ${brightness}, ${Math.floor(brightness * 0.7)})`;
                dotV.style.boxShadow = `0 0 ${pulse * 8}px rgba(68, 255, 136, ${pulse * 0.8})`;
            }
        });
        
        this.bus.on('chord.change', name => {
            const el = document.getElementById('mon-chord');
            if (el) el.textContent = name;
            const scaleEl = document.getElementById('scale-display');
            if (scaleEl) {
                const chordNum = name.includes("IV") ? "IV" : (name.includes("V") ? "V" : "I");
                scaleEl.textContent = SCALES[this.config.state.scaleIndex].name + " (" + chordNum + ")";
            }
        });
        
        this.bus.on('voice.activity', activity => {
            const bassMeter = document.getElementById('meter-bass');
            const midMeter = document.getElementById('meter-mid');
            const highMeter = document.getElementById('meter-high');
            if (bassMeter) bassMeter.style.width = (activity.bass * 100) + '%';
            if (midMeter) midMeter.style.width = (activity.mid * 100) + '%';
            if (highMeter) highMeter.style.width = (activity.high * 100) + '%';
        });
        
        this.updateProfilePreview();
        this.initToneSelectors(); 
        
        const tier = this.config.state.tier;
        const tierNames = ['Mobile', 'Laptop', 'Desktop'];
        const particles = this.config.state.textureSize * this.config.state.textureSize;
        const ghosts = this.config.state.ghostCounts.bass + this.config.state.ghostCounts.mid + this.config.state.ghostCounts.high;
        const voices = this.config.state.voicePoolSizes.bass + this.config.state.voicePoolSizes.mid + this.config.state.voicePoolSizes.high;
        
        document.getElementById('sys-tier').textContent = tierNames[tier];
        document.getElementById('sys-particles').textContent = (particles / 1000).toFixed(0) + 'k';
        document.getElementById('sys-ghosts').textContent = ghosts;
        document.getElementById('sys-voices').textContent = voices;
        document.getElementById('sys-dpr').textContent = this.config.state.dpr.toFixed(1) + 'x';
    }
    
    applyProfile(profile) {
        this.config.set('sensorAngleBase', profile.sensorAngle);
        this.config.set('couplingBase', profile.coupling);
        this.config.set('wander', profile.wander);
        this.config.set('diffusion', profile.diffusion);
        this.config.set('decay', profile.decay);
        this.config.set('speed', profile.speed);
        this.config.set('rootNote', profile.rootNote);

this.config.set('bpm', profile.bpm);
        this.config.set('reverb', profile.reverb);
        this.config.set('delay', profile.delay);
        this.config.set('filter', profile.filter);
        this.config.set('resonance', profile.resonance);
        this.config.set('warmth', profile.warmth);
        this.config.set('fmRatio', profile.fmRatio);
        this.config.set('fmDepthBase', profile.fmDepth);
        this.config.set('harmonics', profile.harmonics);
        
        document.getElementById('btn-profile').textContent = `Switch Profile: ${profile.name}`;
        
        this.updateProfilePreview();
        this.syncSlidersToState();
    }
    
    syncSlidersToState() {
        const sliderMap = {
            decay: v => v * 100,
            sensorAngle: v => v / 0.0175,
            diffusion: v => v * 100,
            speed: v => v * 100,
            coupling: v => v * 100,
            wander: v => v * 100,
            reverb: v => v * 100,
            delay: v => v * 100,
            filter: v => Math.log(v / 80) / Math.log(12000 / 80) * 100,
            resonance: v => v * 10,
            warmth: v => v * 100,
            bpm: v => v,
            rootNote: v => Math.log(v / 27.5) / Math.log(220 / 27.5) * 100,
            
            bassAttack: v => v * 1000,  
            midAttack: v => v * 1000,
            highAttack: v => v * 1000,
            bassRelease: v => v * 100,  
            midRelease: v => v * 100,
            highRelease: v => v * 100
        };
        
        Object.entries(sliderMap).forEach(([key, transform]) => {
            const stateKey = key === 'sensorAngle' ? 'sensorAngleBase' :
                             key === 'coupling' ? 'couplingBase' : key;
            const slider = document.getElementById(key);
            if (slider && this.config.state[stateKey] !== undefined) {
                const newVal = transform(this.config.state[stateKey]);
                if (Number.isFinite(newVal)) {
                    slider.value = newVal;
                }
            }
        });

class TrinityApp {
    constructor() {
        this.bus = new EventEmitter();
        this.config = new ConfigManager(this.bus);
        this.visual = new WebGLVisuals(this.bus, this.config);
        this.audio = new AudioSystem(this.bus, this.config);
        this.cpuSim = new CPUSim(this.bus, this.config);
        this.ui = new UIManager(this.bus, this.config, this.audio);
        this.lastUIUpdate = 0;
        this.lastTime = 0;
    }
    
    init() {
        this.ui.init();
        
        if (this.ui.checkCapabilities(this.visual)) {
            const startFn = (e) => {
                e.preventDefault();
                this.config.state.running = true;
                this.visual.init();
                this.audio.init();
                
                if (this.audio.ctx.state === 'suspended') {
                    this.audio.ctx.resume();
                }
                
                document.getElementById('overlay').style.opacity = 0;
                setTimeout(() => document.getElementById('overlay').remove(), 1500);
                document.getElementById('hud').classList.add('active');
                
                this.lastTime = performance.now();
                this.loop(this.lastTime);
            };
            
            const btn = document.getElementById('start');
            btn.addEventListener('click', startFn);
            btn.addEventListener('touchend', startFn);
        }
    }
    
    loop(now) {
        if (this.config.state.running) {
            const dt = Math.min((now - this.lastTime) / 1000, 0.1);
            this.lastTime = now;
            
            this.config.updateLFO();
            this.visual.update(dt);
            this.visual.draw();
            this.cpuSim.update();
            this.audio.update();
            
            if (now - this.lastUIUpdate > 200) {
                this.lastUIUpdate = now;
                
                const agentEl = document.getElementById('mon-agents');
                if (agentEl) agentEl.textContent = (this.visual.agentCount / 1000).toFixed(0) + 'k';
                
                const fpsEl = document.getElementById('mon-fps');
                if (fpsEl) fpsEl.textContent = this.visual.fps;
                
                // Update tier info
                const tierEl = document.getElementById('mon-tier');
                if (tierEl) {
                    const tierConfig = QUALITY_TIERS[this.config.state.tier];
                    tierEl.textContent = `${tierConfig.name} (${tierConfig.allowFM6 ? '6-Op' : '2-Op'})`;
                }
                
                // Estimate audio nodes (rough calculation)
                const audioEl = document.getElementById('mon-audio-nodes');
                if (audioEl && this.audio && this.audio.ctx) {
                    const sizes = this.config.state.voicePoolSizes;
                    const bassNodes = sizes.bass * 8;  // main, mainGain, sub, subGain, filter, env, reverb
                    const tierConfig = QUALITY_TIERS[this.config.state.tier];
                    const midNodes = sizes.mid * (tierConfig.allowFM6 ? 19 : 7);  // 6-op vs 2-op
                    const highNodes = sizes.high * 6;
                    const totalNodes = bassNodes + midNodes + highNodes + 20; // +20 for busses/effects
                    audioEl.textContent = totalNodes;
                    if (totalNodes > 200) audioEl.style.color = '#f66';
                    else if (totalNodes > 150) audioEl.style.color = '#fa6';
                    else audioEl.style.color = '#4f8';
                }
            }
        }
        requestAnimationFrame((t) => this.loop(t));
    }
}

const app = new TrinityApp();
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => app.init());
} else {
    app.init();
}

})();

/*
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * TRINITY v9.4 - Generative Audiovisual System
 * 
 * Copyright © 2026 Ruben Thorell / The Network Illustrated
 * All Rights Reserved.
 * 
 * This is proprietary software. Unauthorized use, copying, modification,
 * or distribution is strictly prohibited.
 * 
 * For licensing: https://thenetworkillustrated.com
 * 
 * ═══════════════════════════════════════════════════════════════════════════
 */
</script>
</body>
</html>