npm - @neo-ui-kit/react - Versions diffs - 1.0.0 → 1.0.2 - Mend

@neo-ui-kit/react 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/README.md +32 -4
package/dist/components/artwork/DatabaseArt/styles.css +58 -58
package/dist/components/artwork/Landscape/styles.css +79 -79
package/dist/components/artwork/Planet/styles.css +52 -52
package/dist/components/artwork/QuantumField/QuantumFieldExperience.d.ts +6 -2
package/dist/components/artwork/QuantumField/UPSTREAM-LICENSE.txt +21 -21
package/dist/components/artwork/ServerArt/styles.css +43 -43
package/dist/components/artwork/Spectrum/styles.css +35 -35
package/dist/components/controls/Autocomplete/styles.css +1 -1
package/dist/components/controls/Checkbox/styles.css +58 -58
package/dist/components/controls/InputBase/styles.css +374 -374
package/dist/components/controls/Link/styles.css +50 -50
package/dist/components/controls/SegmentedControl/styles.css +9 -9
package/dist/components/controls/Switch/styles.css +54 -54
package/dist/components/controls/Tabs/styles.css +239 -239
package/dist/components/controls/ToggleButton/styles.css +49 -49
package/dist/components/controls/shared.css +694 -694
package/dist/components/editor/shared.css +1 -1
package/dist/components/effects/Beacon/styles.css +38 -38
package/dist/components/effects/Equalizer/styles.css +34 -34
package/dist/components/effects/GlowText/styles.css +56 -56
package/dist/components/effects/Marquee/styles.css +46 -46
package/dist/components/effects/Reveal/styles.css +25 -25
package/dist/components/effects/Shimmer/styles.css +48 -48
package/dist/components/effects/Sparkles/styles.css +28 -28
package/dist/components/effects/Spotlight/styles.css +45 -45
package/dist/components/effects/Tilt/styles.css +67 -67
package/dist/components/feedback/CollapsibleSection/styles.css +76 -76
package/dist/components/feedback/DataTable/styles.css +522 -522
package/dist/components/feedback/EmptyState/styles.css +80 -80
package/dist/components/feedback/KeyValueList/styles.css +51 -51
package/dist/components/feedback/MenuItem/styles.css +71 -71
package/dist/components/feedback/Popover/styles.css +44 -44
package/dist/components/feedback/Steps/styles.css +152 -152
package/dist/components/feedback/Toast/styles.css +89 -89
package/dist/components/forms/FormFields/styles.css +21 -21
package/dist/components/foundation/ThemeProvider/styles.css +31 -31
package/dist/components/layout/Avatar/styles.css +151 -151
package/dist/components/layout/Card/styles.css +37 -37
package/dist/components/layout/DialogActions/styles.css +31 -31
package/dist/components/layout/DialogBody/styles.css +17 -17
package/dist/components/layout/Illustration/styles.css +104 -104
package/dist/components/layout/ScrollArea/styles.css +61 -61
package/dist/components/layout/TabPanel/styles.css +16 -16
package/dist/components/layout/shared.css +65 -65
package/dist/components/media/AudioPlayer/styles.css +86 -86
package/dist/components/media/LevelMeter/styles.css +30 -30
package/dist/components/media/MelodyRoll/styles.css +196 -196
package/dist/components/media/RotaryKnob/styles.css +319 -319
package/dist/components/media/Sparkline/styles.css +69 -69
package/dist/components/media/WaveDecoration/styles.css +1 -1
package/dist/components/media/shared.css +7 -7
package/dist/fonts/melodix.css +123 -123
package/dist/index.d.ts +2 -2
package/dist/index.js +2106 -2104
package/dist/theme/base.css +210 -210
package/package.json +1 -1

package/dist/index.js CHANGED Viewed

@@ -5514,366 +5514,366 @@ function PlaybackTrack({ audio, playing, position: controlledPosition, disabled,
 // src/components/artwork/QuantumField/reference.html?raw
 var reference_default = `<!DOCTYPE html>
 <!-- Quantum Fields Contributors, MIT License. Full notice: UPSTREAM-LICENSE.txt in this package. -->
-<html lang="en">\r
-\r
-<head>\r
-    <meta charset="UTF-8">\r
-    <title>Quantum Field: Interactive</title>\r
-    <style>\r
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap');\r
-\r
-        * {\r
-            box-sizing: border-box;\r
-        }\r
-\r
-        :root {\r
-            --ar: 167; --ag: 139; --ab: 250;\r
-        }\r
-\r
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Quantum Field: Interactive</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap');
+        * {
+            box-sizing: border-box;
+        }
+        :root {
+            --ar: 167; --ag: 139; --ab: 250;
+        }
         html, body {
             margin: 0;
             overflow: hidden;
             background: transparent !important;
             color-scheme: dark;
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-        }\r
-\r
-        canvas {\r
-            display: block;\r
-        }\r
-\r
-        #scanlines {\r
-            position: absolute;\r
-            top: 0;\r
-            left: 0;\r
-            width: 100%;\r
-            height: 100%;\r
-            background: radial-gradient(ellipse at center, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.5) 100%);\r
-            pointer-events: none;\r
-            z-index: 10;\r
-        }\r
-\r
-        #overlay {\r
-            position: absolute;\r
-            top: 0;\r
-            left: 0;\r
-            width: 100%;\r
-            height: 100%;\r
-            display: flex;\r
-            flex-direction: column;\r
-            justify-content: center;\r
-            align-items: center;\r
-            background: linear-gradient(180deg, rgba(15, 10, 25, 0.97) 0%, rgba(10, 10, 20, 0.98) 100%);\r
-            z-index: 100;\r
-            backdrop-filter: blur(20px);\r
-            transition: opacity 1s ease;\r
-            pointer-events: none;\r
-            /* Allow clicks to pass through to canvas */\r
-        }\r
-\r
-        .hud-panel {\r
-            background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);\r
-            border: 1px solid rgba(255, 255, 255, 0.07);\r
-            padding: 55px 75px;\r
-            text-align: center;\r
-            border-radius: 28px;\r
-            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);\r
-            pointer-events: auto;\r
-            /* Re-enable clicks for buttons */\r
-        }\r
-\r
-        h1 {\r
-            font-family: 'Space Grotesk', sans-serif;\r
-            font-weight: 500;\r
-            letter-spacing: 1px;\r
-            font-size: 34px;\r
-            margin: 0 0 8px 0;\r
-            background: linear-gradient(135deg, #ffffff 0%, rgba(var(--ar),var(--ag),var(--ab),0.75) 40%, rgb(var(--ar),var(--ag),var(--ab)) 100%);\r
-            -webkit-background-clip: text;\r
-            -webkit-text-fill-color: transparent;\r
-            background-clip: text;\r
-        }\r
-\r
-        .hud-panel p {\r
-            color: rgba(255, 255, 255, 0.35);\r
-            font-size: 13px;\r
-            margin-bottom: 40px;\r
-            letter-spacing: 0.5px;\r
-            font-weight: 300;\r
-        }\r
-\r
-        .btn-group {\r
-            display: flex;\r
-            gap: 14px;\r
-            justify-content: center;\r
-        }\r
-\r
-        button,\r
-        .file-upload {\r
-            background: linear-gradient(135deg, rgba(var(--ar),var(--ag),var(--ab),0.12) 0%, rgba(var(--ar),var(--ag),var(--ab),0.06) 100%);\r
-            border: 1px solid rgba(var(--ar),var(--ag),var(--ab),0.25);\r
-            color: rgba(255, 255, 255, 0.85);\r
-            padding: 15px 30px;\r
-            font-size: 13px;\r
-            font-weight: 500;\r
-            cursor: pointer;\r
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r
-            letter-spacing: 0.3px;\r
-            border-radius: 14px;\r
-            font-family: 'Inter', sans-serif;\r
-        }\r
-\r
-        button:hover,\r
-        .file-upload:hover {\r
-            background: linear-gradient(135deg, rgba(var(--ar),var(--ag),var(--ab),0.25) 0%, rgba(var(--ar),var(--ag),var(--ab),0.18) 100%);\r
-            border-color: rgba(var(--ar),var(--ag),var(--ab),0.45);\r
-            transform: translateY(-2px);\r
-            box-shadow: 0 12px 35px rgba(139, 92, 246, 0.2);\r
-        }\r
-\r
-        input[type="file"] {\r
-            display: none;\r
-        }\r
-\r
-        #status-bar {\r
-            position: absolute;\r
-            bottom: 80px;\r
-            left: 28px;\r
-            color: rgba(255, 255, 255, 0.3);\r
-            font-size: 10px;\r
-            letter-spacing: 0.5px;\r
-            z-index: 200;\r
-            pointer-events: none;\r
-        }\r
-\r
-        #status-bar span {\r
-            color: rgba(196, 181, 253, 0.7);\r
-            font-weight: 500;\r
-        }\r
-\r
-        #interaction-hint {\r
-            position: absolute;\r
-            top: 28px;\r
-            width: 100%;\r
-            text-align: center;\r
-            color: rgba(255, 255, 255, 0.5);\r
-            font-size: 11px;\r
-            letter-spacing: 2px;\r
-            pointer-events: none;\r
-            z-index: 9;\r
-            text-transform: lowercase;\r
-        }\r
-\r
-        #zoom-indicator {\r
-            position: absolute;\r
-            bottom: 80px;\r
-            right: 28px;\r
-            color: rgba(255, 255, 255, 0.3);\r
-            font-size: 10px;\r
-            z-index: 20;\r
-            pointer-events: none;\r
-        }\r
-\r
-        #zoom-indicator span {\r
-            color: rgba(196, 181, 253, 0.7);\r
-        }\r
-\r
-        #audio-controls {\r
-            position: fixed;\r
-            bottom: 24px;\r
-            left: 50%;\r
-            transform: translateX(-50%);\r
-            display: flex;\r
-            gap: 10px;\r
-            align-items: center;\r
-            padding: 12px 20px;\r
-            background: linear-gradient(180deg, rgba(35, 28, 50, 0.88) 0%, rgba(22, 20, 38, 0.92) 100%);\r
-            border: 1px solid rgba(255, 255, 255, 0.05);\r
-            border-radius: 18px;\r
-            z-index: 200;\r
-            opacity: 0;\r
-            pointer-events: none;\r
-            transition: all 0.4s ease;\r
-            backdrop-filter: blur(25px);\r
-        }\r
-\r
-        #audio-controls.visible {\r
-            opacity: 1;\r
-            pointer-events: auto;\r
-        }\r
-\r
-        #audio-controls button,\r
-        #audio-controls .file-upload {\r
-            padding: 9px 14px;\r
-            font-size: 11px;\r
-            background: rgba(255, 255, 255, 0.03);\r
-            border: 1px solid rgba(255, 255, 255, 0.07);\r
-            color: rgba(255, 255, 255, 0.65);\r
-            border-radius: 10px;\r
-        }\r
-\r
-        #play-pause-btn {\r
-            min-width: 78px;\r
-            background: linear-gradient(135deg, rgba(var(--ar),var(--ag),var(--ab),0.18) 0%, rgba(var(--ar),var(--ag),var(--ab),0.10) 100%) !important;\r
-            border-color: rgba(var(--ar),var(--ag),var(--ab),0.28) !important;\r
-            color: #e9d5ff !important;\r
-        }\r
-\r
-        #play-pause-btn.playing {\r
-            background: linear-gradient(135deg, rgba(251, 113, 133, 0.18) 0%, rgba(244, 114, 182, 0.12) 100%) !important;\r
-            border-color: rgba(251, 113, 133, 0.35) !important;\r
-        }\r
-\r
-        #progress-container {\r
-            width: 85px;\r
-            height: 4px;\r
-            background: rgba(255, 255, 255, 0.06);\r
-            border-radius: 4px;\r
-            cursor: pointer;\r
-        }\r
-\r
-        #progress-bar {\r
-            height: 100%;\r
-            background: linear-gradient(90deg, rgb(var(--ar),var(--ag),var(--ab)), rgba(var(--ar),var(--ag),var(--ab),0.6), rgba(var(--ar),var(--ag),var(--ab),0.3));\r
-            border-radius: 4px;\r
-            width: 0%;\r
-        }\r
-\r
-        #time-display {\r
-            color: rgba(255, 255, 255, 0.35);\r
-            font-size: 10px;\r
-            min-width: 62px;\r
-            text-align: center;\r
-        }\r
-\r
-        #track-name {\r
-            color: rgba(255, 255, 255, 0.3);\r
-            font-size: 10px;\r
-            max-width: 85px;\r
-            overflow: hidden;\r
-            text-overflow: ellipsis;\r
-            white-space: nowrap;\r
-        }\r
-\r
+        }
+        canvas {
+            display: block;
+        }
+        #scanlines {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(ellipse at center, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
+            pointer-events: none;
+            z-index: 10;
+        }
+        #overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            background: linear-gradient(180deg, rgba(15, 10, 25, 0.97) 0%, rgba(10, 10, 20, 0.98) 100%);
+            z-index: 100;
+            backdrop-filter: blur(20px);
+            transition: opacity 1s ease;
+            pointer-events: none;
+            /* Allow clicks to pass through to canvas */
+        }
+        .hud-panel {
+            background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
+            border: 1px solid rgba(255, 255, 255, 0.07);
+            padding: 55px 75px;
+            text-align: center;
+            border-radius: 28px;
+            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
+            pointer-events: auto;
+            /* Re-enable clicks for buttons */
+        }
+        h1 {
+            font-family: 'Space Grotesk', sans-serif;
+            font-weight: 500;
+            letter-spacing: 1px;
+            font-size: 34px;
+            margin: 0 0 8px 0;
+            background: linear-gradient(135deg, #ffffff 0%, rgba(var(--ar),var(--ag),var(--ab),0.75) 40%, rgb(var(--ar),var(--ag),var(--ab)) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .hud-panel p {
+            color: rgba(255, 255, 255, 0.35);
+            font-size: 13px;
+            margin-bottom: 40px;
+            letter-spacing: 0.5px;
+            font-weight: 300;
+        }
+        .btn-group {
+            display: flex;
+            gap: 14px;
+            justify-content: center;
+        }
+        button,
+        .file-upload {
+            background: linear-gradient(135deg, rgba(var(--ar),var(--ag),var(--ab),0.12) 0%, rgba(var(--ar),var(--ag),var(--ab),0.06) 100%);
+            border: 1px solid rgba(var(--ar),var(--ag),var(--ab),0.25);
+            color: rgba(255, 255, 255, 0.85);
+            padding: 15px 30px;
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            letter-spacing: 0.3px;
+            border-radius: 14px;
+            font-family: 'Inter', sans-serif;
+        }
+        button:hover,
+        .file-upload:hover {
+            background: linear-gradient(135deg, rgba(var(--ar),var(--ag),var(--ab),0.25) 0%, rgba(var(--ar),var(--ag),var(--ab),0.18) 100%);
+            border-color: rgba(var(--ar),var(--ag),var(--ab),0.45);
+            transform: translateY(-2px);
+            box-shadow: 0 12px 35px rgba(139, 92, 246, 0.2);
+        }
+        input[type="file"] {
+            display: none;
+        }
+        #status-bar {
+            position: absolute;
+            bottom: 80px;
+            left: 28px;
+            color: rgba(255, 255, 255, 0.3);
+            font-size: 10px;
+            letter-spacing: 0.5px;
+            z-index: 200;
+            pointer-events: none;
+        }
+        #status-bar span {
+            color: rgba(196, 181, 253, 0.7);
+            font-weight: 500;
+        }
+        #interaction-hint {
+            position: absolute;
+            top: 28px;
+            width: 100%;
+            text-align: center;
+            color: rgba(255, 255, 255, 0.5);
+            font-size: 11px;
+            letter-spacing: 2px;
+            pointer-events: none;
+            z-index: 9;
+            text-transform: lowercase;
+        }
+        #zoom-indicator {
+            position: absolute;
+            bottom: 80px;
+            right: 28px;
+            color: rgba(255, 255, 255, 0.3);
+            font-size: 10px;
+            z-index: 20;
+            pointer-events: none;
+        }
+        #zoom-indicator span {
+            color: rgba(196, 181, 253, 0.7);
+        }
+        #audio-controls {
+            position: fixed;
+            bottom: 24px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            padding: 12px 20px;
+            background: linear-gradient(180deg, rgba(35, 28, 50, 0.88) 0%, rgba(22, 20, 38, 0.92) 100%);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            border-radius: 18px;
+            z-index: 200;
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.4s ease;
+            backdrop-filter: blur(25px);
+        }
+        #audio-controls.visible {
+            opacity: 1;
+            pointer-events: auto;
+        }
+        #audio-controls button,
+        #audio-controls .file-upload {
+            padding: 9px 14px;
+            font-size: 11px;
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.07);
+            color: rgba(255, 255, 255, 0.65);
+            border-radius: 10px;
+        }
+        #play-pause-btn {
+            min-width: 78px;
+            background: linear-gradient(135deg, rgba(var(--ar),var(--ag),var(--ab),0.18) 0%, rgba(var(--ar),var(--ag),var(--ab),0.10) 100%) !important;
+            border-color: rgba(var(--ar),var(--ag),var(--ab),0.28) !important;
+            color: #e9d5ff !important;
+        }
+        #play-pause-btn.playing {
+            background: linear-gradient(135deg, rgba(251, 113, 133, 0.18) 0%, rgba(244, 114, 182, 0.12) 100%) !important;
+            border-color: rgba(251, 113, 133, 0.35) !important;
+        }
+        #progress-container {
+            width: 85px;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.06);
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        #progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, rgb(var(--ar),var(--ag),var(--ab)), rgba(var(--ar),var(--ag),var(--ab),0.6), rgba(var(--ar),var(--ag),var(--ab),0.3));
+            border-radius: 4px;
+            width: 0%;
+        }
+        #time-display {
+            color: rgba(255, 255, 255, 0.35);
+            font-size: 10px;
+            min-width: 62px;
+            text-align: center;
+        }
+        #track-name {
+            color: rgba(255, 255, 255, 0.3);
+            font-size: 10px;
+            max-width: 85px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
         /* --- Center Panel Refinement --- */
-        .hud-panel {\r
-            background: rgba(15, 10, 25, 0.85);\r
-            border: 1px solid rgba(255, 255, 255, 0.08);\r
-            /* Darkened container */\r
-            padding: 24px;\r
-            /* Reduced padding */\r
-            border-radius: 24px;\r
-            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);\r
-            backdrop-filter: blur(40px);\r
-            min-width: 420px;\r
-            /* Wider for buttons */\r
-        }\r
-\r
-        .hud-panel h1,\r
-        .hud-panel p {\r
-            display: none;\r
-            /* Hide title as per screenshot showing only buttons */\r
-        }\r
-\r
-        .btn-group {\r
-            display: flex;\r
-            gap: 16px;\r
-            justify-content: center;\r
-            width: 100%;\r
-        }\r
-\r
-        .btn-group button {\r
-            flex: 1;\r
-            background: transparent;\r
-            border: 1px solid rgba(var(--ar),var(--ag),var(--ab),0.3);\r
-            color: rgb(var(--ar),var(--ag),var(--ab));\r
-            padding: 14px 0;\r
-            border-radius: 12px;\r
-            font-size: 12px;\r
-            letter-spacing: 1px;\r
-            text-transform: uppercase;\r
-            font-weight: 600;\r
-            transition: all 0.3s ease;\r
-        }\r
-\r
-        .btn-group button:hover {\r
-            background: rgba(var(--ar),var(--ag),var(--ab),0.1);\r
-            border-color: rgb(var(--ar),var(--ag),var(--ab));\r
-            box-shadow: 0 0 20px rgba(var(--ar),var(--ag),var(--ab),0.2);\r
-        }\r
+        .hud-panel {
+            background: rgba(15, 10, 25, 0.85);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            /* Darkened container */
+            padding: 24px;
+            /* Reduced padding */
+            border-radius: 24px;
+            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(40px);
+            min-width: 420px;
+            /* Wider for buttons */
+        }
+        .hud-panel h1,
+        .hud-panel p {
+            display: none;
+            /* Hide title as per screenshot showing only buttons */
+        }
+        .btn-group {
+            display: flex;
+            gap: 16px;
+            justify-content: center;
+            width: 100%;
+        }
+        .btn-group button {
+            flex: 1;
+            background: transparent;
+            border: 1px solid rgba(var(--ar),var(--ag),var(--ab),0.3);
+            color: rgb(var(--ar),var(--ag),var(--ab));
+            padding: 14px 0;
+            border-radius: 12px;
+            font-size: 12px;
+            letter-spacing: 1px;
+            text-transform: uppercase;
+            font-weight: 600;
+            transition: all 0.3s ease;
+        }
+        .btn-group button:hover {
+            background: rgba(var(--ar),var(--ag),var(--ab),0.1);
+            border-color: rgb(var(--ar),var(--ag),var(--ab));
+            box-shadow: 0 0 20px rgba(var(--ar),var(--ag),var(--ab),0.2);
+        }
         #interaction-hint, #audio-controls, #status-bar, #zoom-indicator { display: none !important; }
     </style>
-</head>\r
-\r
-<body>\r
+</head>
+<body>
     <div id="scanlines" style="display:none"></div>
-    <div id="interaction-hint">space \xB7 play/pause &nbsp;\xB7&nbsp; scroll \xB7 zoom &nbsp;\xB7&nbsp; drag \xB7 rotate &nbsp;\xB7&nbsp; F \xB7 focus mode</div>\r
+    <div id="interaction-hint">space \xB7 play/pause &nbsp;\xB7&nbsp; scroll \xB7 zoom &nbsp;\xB7&nbsp; drag \xB7 rotate &nbsp;\xB7&nbsp; F \xB7 focus mode</div>
     <div id="overlay" style="display:none">
-        <div class="hud-panel">\r
-            <h1>Quantum Fields</h1>\r
-            <p>Audio-reactive particle simulation</p>\r
-            <div class="btn-group">\r
-                <button id="enter-btn">Enter</button>\r
-            </div>\r
-        </div>\r
-    </div>\r
-    <div id="audio-controls">\r
-        <button id="play-pause-btn" class="playing">\u23F8 pause</button>\r
-        <div id="progress-container">\r
-            <div id="progress-bar"></div>\r
-        </div>\r
-        <span id="time-display">0:00 / 0:00</span>\r
-        <span id="track-name">no track</span>\r
-        <label class="file-upload" title="Load audio">\u{1F4C1}<input type="file" id="file-input-2" accept="audio/*"></label>\r
-        <button id="mic-btn-2" title="Microphone">\u{1F399}</button>\r
-        <button id="screenshot-btn" title="Screenshot">\u{1F4F7}</button>\r
-        <button id="fullscreen-btn" title="Fullscreen">\u26F6</button>\r
-    </div>\r
-    <div id="status-bar"><span>ready</span> \xB7 awaiting input</div>\r
-    <div id="zoom-indicator">zoom <span id="zoom-level">100%</span></div>\r
-\r
-    <!-- Global Error Handler (Must be before module imports) -->\r
-    <script>\r
-        window.onerror = function (msg, url, lineNo, columnNo, error) {\r
-            const status = document.getElementById('status-bar');\r
-            if (status) {\r
-                status.innerHTML = \`ERROR: <span style="color:#ff6b6b">\${msg}</span>\`;\r
-                status.style.opacity = 1;\r
-            }\r
-            console.error('Global Error:', msg, url, lineNo, error);\r
-            return false;\r
-        };\r
-        // Catch unhandled promise rejections\r
-        window.onunhandledrejection = function (event) {\r
-            const status = document.getElementById('status-bar');\r
-            if (status) {\r
-                status.innerHTML = \`ERROR: <span style="color:#ff6b6b">\${event.reason}</span>\`;\r
-                status.style.opacity = 1;\r
-            }\r
-            console.error('Unhandled Rejection:', event.reason);\r
-        };\r
-    <\/script>\r
-\r
-    <script type="importmap">\r
-{\r
-    "imports": {\r
-        "three": "https://unpkg.com/three@0.182.0/build/three.module.js",\r
+        <div class="hud-panel">
+            <h1>Quantum Fields</h1>
+            <p>Audio-reactive particle simulation</p>
+            <div class="btn-group">
+                <button id="enter-btn">Enter</button>
+            </div>
+        </div>
+    </div>
+    <div id="audio-controls">
+        <button id="play-pause-btn" class="playing">\u23F8 pause</button>
+        <div id="progress-container">
+            <div id="progress-bar"></div>
+        </div>
+        <span id="time-display">0:00 / 0:00</span>
+        <span id="track-name">no track</span>
+        <label class="file-upload" title="Load audio">\u{1F4C1}<input type="file" id="file-input-2" accept="audio/*"></label>
+        <button id="mic-btn-2" title="Microphone">\u{1F399}</button>
+        <button id="screenshot-btn" title="Screenshot">\u{1F4F7}</button>
+        <button id="fullscreen-btn" title="Fullscreen">\u26F6</button>
+    </div>
+    <div id="status-bar"><span>ready</span> \xB7 awaiting input</div>
+    <div id="zoom-indicator">zoom <span id="zoom-level">100%</span></div>
+    <!-- Global Error Handler (Must be before module imports) -->
+    <script>
+        window.onerror = function (msg, url, lineNo, columnNo, error) {
+            const status = document.getElementById('status-bar');
+            if (status) {
+                status.innerHTML = \`ERROR: <span style="color:#ff6b6b">\${msg}</span>\`;
+                status.style.opacity = 1;
+            }
+            console.error('Global Error:', msg, url, lineNo, error);
+            return false;
+        };
+        // Catch unhandled promise rejections
+        window.onunhandledrejection = function (event) {
+            const status = document.getElementById('status-bar');
+            if (status) {
+                status.innerHTML = \`ERROR: <span style="color:#ff6b6b">\${event.reason}</span>\`;
+                status.style.opacity = 1;
+            }
+            console.error('Unhandled Rejection:', event.reason);
+        };
+    <\/script>
+    <script type="importmap">
+{
+    "imports": {
+        "three": "https://unpkg.com/three@0.182.0/build/three.module.js",
         "three/addons/": "https://unpkg.com/three@0.182.0/examples/jsm/"
-    }\r
-}\r
-<\/script>\r
-\r
-    <script type="module">\r
-        import * as THREE from 'three';\r
-        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';\r
-        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';\r
-        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';\r
-        import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';\r
-        import { AfterimagePass } from 'three/addons/postprocessing/AfterimagePass.js';\r
-        import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';\r
-        // BokehPass removed - using custom DOF shader\r
-        import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';\r
-\r
+    }
+}
+<\/script>
+    <script type="module">
+        import * as THREE from 'three';
+        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+        import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+        import { AfterimagePass } from 'three/addons/postprocessing/AfterimagePass.js';
+        import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+        // BokehPass removed - using custom DOF shader
+        import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
         function fitPixelRatio() {
             return Math.min(window.devicePixelRatio || 1, 1.5,
                 Math.sqrt(2_100_000 / Math.max(1, window.innerWidth * window.innerHeight)));
@@ -5883,260 +5883,260 @@ var reference_default = `<!DOCTYPE html>
             maxParticles: 250000,
             maxDensity: 0.14,
             secondaryParticles: 50000,
-            initialDensity: 0.043,\r
-            fieldRadius: 90,\r
-            minZoom: 1,\r
-            maxZoom: 250,\r
+            initialDensity: 0.043,
+            fieldRadius: 90,
+            minZoom: 1,
+            maxZoom: 250,
             defaultZoom: 200
         };
         let particleBudget = Number(window.frameElement?.getAttribute('data-particle-budget') ?? Infinity);
         particleBudget = Number.isFinite(particleBudget) ? Math.max(0, Math.floor(particleBudget)) : Infinity;
-\r
-        const STATE = {\r
+        const STATE = {
             field: 'Gluon (Strong)',
-            density: CONFIG.initialDensity,\r
-            sensitivity: 1.1,\r
-            trails: 0.66144,\r
-            bloom: 0.3,\r
-            timeScale: 1,\r
+            density: CONFIG.initialDensity,
+            sensitivity: 1.1,
+            trails: 0.66144,
+            bloom: 0.3,
+            timeScale: 1,
             pixelRatio: fitPixelRatio(),
-            chromaticAberration: 0.004,\r
-            filmGrain: 0.001,\r
-            cameraShake: 0.65,\r
-            vortexStrength: 0.73,\r
-            pulseIntensity: 0.15,\r
-            anamorphicStretch: 0.1,\r
-            bassGateThreshold: 0.12,\r
-            bassGateAttack: 0.3,\r
-            bassGateRelease: 0.136,\r
-            bassGateRatio: 2.142,\r
-            bassGateEnabled: false,\r
-            // NEW EFFECTS\r
-            godRaysEnabled: false,\r
-            godRaysIntensity: 0.078,\r
-            godRaysDecay: 0.92,\r
-            dofEnabled: false,\r
-            dofFocus: 0.04,\r
-            dofFocalLength: 0.40,\r
-            dofBokehStrength: 0.36,\r
-            lensFlareEnabled: true,\r
-            lensFlareIntensity: 0.1,\r
-            particleTrailsEnabled: true,\r
-            particleTrailOpacity: 1,\r
-            nebulaEnabled: false,\r
-            nebulaIntensity: 0.3,\r
-            connectionsEnabled: true,\r
-            connectionThreshold: 20.0,\r
-            connectionOpacity: 0.75,\r
-            // === ENHANCEMENT PACK v2.0 ===\r
-            // 1. Motion Blur\r
-            motionBlurEnabled: true,\r
-            motionBlurStrength: 0.1,\r
-            // 2. Adaptive Quality\r
+            chromaticAberration: 0.004,
+            filmGrain: 0.001,
+            cameraShake: 0.65,
+            vortexStrength: 0.73,
+            pulseIntensity: 0.15,
+            anamorphicStretch: 0.1,
+            bassGateThreshold: 0.12,
+            bassGateAttack: 0.3,
+            bassGateRelease: 0.136,
+            bassGateRatio: 2.142,
+            bassGateEnabled: false,
+            // NEW EFFECTS
+            godRaysEnabled: false,
+            godRaysIntensity: 0.078,
+            godRaysDecay: 0.92,
+            dofEnabled: false,
+            dofFocus: 0.04,
+            dofFocalLength: 0.40,
+            dofBokehStrength: 0.36,
+            lensFlareEnabled: true,
+            lensFlareIntensity: 0.1,
+            particleTrailsEnabled: true,
+            particleTrailOpacity: 1,
+            nebulaEnabled: false,
+            nebulaIntensity: 0.3,
+            connectionsEnabled: true,
+            connectionThreshold: 20.0,
+            connectionOpacity: 0.75,
+            // === ENHANCEMENT PACK v2.0 ===
+            // 1. Motion Blur
+            motionBlurEnabled: true,
+            motionBlurStrength: 0.1,
+            // 2. Adaptive Quality
             adaptiveQualityEnabled: true,
             targetFPS: 45,
             qualityLevel: 1,
-            // 3. Onset Detection\r
-            onsetSensitivity: 1,\r
-            onsetDecay: 0.92,\r
-            // 4. Audio-Reactive Camera\r
-            audioCameraEnabled: true,\r
-            audioCameraSmoothing: 0.2,\r
-            audioCameraIntensity: 0.3,\r
-            // 5. Waveform Terrain\r
-            waveformTerrainScale: 1.0,\r
-            waveformTerrainHeight: 20.0\r
-        };\r
-\r
-        // --- AUDIO SYSTEM ---\r
-        const AUDIO = {\r
-            ctx: null, analyser: null, source: null, gainNode: null, data: null,\r
-            audioBuffer: null, isPlaying: false, isPaused: false,\r
-            startTime: 0, pauseTime: 0, currentTrackName: 'No Track',\r
-            mode: null, micStream: null,\r
-            bands: { subBass: 0, bass: 0, lowMid: 0, mid: 0, highMid: 0, high: 0, ultraHigh: 0 },\r
-            gatedBands: { subBass: 0, bass: 0, lowMid: 0, mid: 0, highMid: 0, high: 0, ultraHigh: 0 },\r
-            beatThreshold: 0.15, beatDecay: 0.93, beatEnergy: 0,\r
-            lastBeatTime: 0, beatDetected: false, peakHistory: [],\r
+            // 3. Onset Detection
+            onsetSensitivity: 1,
+            onsetDecay: 0.92,
+            // 4. Audio-Reactive Camera
+            audioCameraEnabled: true,
+            audioCameraSmoothing: 0.2,
+            audioCameraIntensity: 0.3,
+            // 5. Waveform Terrain
+            waveformTerrainScale: 1.0,
+            waveformTerrainHeight: 20.0
+        };
+        // --- AUDIO SYSTEM ---
+        const AUDIO = {
+            ctx: null, analyser: null, source: null, gainNode: null, data: null,
+            audioBuffer: null, isPlaying: false, isPaused: false,
+            startTime: 0, pauseTime: 0, currentTrackName: 'No Track',
+            mode: null, micStream: null,
+            bands: { subBass: 0, bass: 0, lowMid: 0, mid: 0, highMid: 0, high: 0, ultraHigh: 0 },
+            gatedBands: { subBass: 0, bass: 0, lowMid: 0, mid: 0, highMid: 0, high: 0, ultraHigh: 0 },
+            beatThreshold: 0.15, beatDecay: 0.93, beatEnergy: 0,
+            lastBeatTime: 0, beatDetected: false, peakHistory: [],
             spectralCentroid: 0, spectralFlux: 0, prevSpectrum: null, active: false, idleCleared: false,
-            // === ENHANCEMENT: Onset Detection ===\r
-            onsetEnergy: 0, onsetDetected: false, onsetHistory: [], onsetThreshold: 0,\r
-            // === ENHANCEMENT: Waveform Data ===\r
-            waveformData: new Float32Array(128), waveformSmoothed: new Float32Array(128),\r
-            gateState: {\r
-                isOpen: false, envelope: 0, holdTime: 0, noiseFloor: 0.05,\r
-                calibrationSamples: [], isCalibrating: true, calibrationFrames: 30\r
-            },\r
-\r
-            init() {\r
-                if (this.ctx) return;\r
-                this.ctx = new (window.AudioContext || window.webkitAudioContext)();\r
-                this.analyser = this.ctx.createAnalyser();\r
-                this.analyser.fftSize = 4096;\r
-                this.analyser.smoothingTimeConstant = 0.65;\r
-                this.data = new Uint8Array(this.analyser.frequencyBinCount);\r
-                this.prevSpectrum = new Float32Array(this.analyser.frequencyBinCount);\r
-                this.active = true;\r
-            },\r
-\r
-            loadTrack(arrayBuffer, fileName) {\r
-                return new Promise((resolve, reject) => {\r
-                    this.ctx.decodeAudioData(arrayBuffer, (buffer) => {\r
-                        this.stopCurrentSource();\r
-                        this.audioBuffer = buffer;\r
-                        this.currentTrackName = fileName || 'Unknown';\r
-                        this.mode = 'file';\r
-                        this.pauseTime = 0;\r
-                        this.resetCalibration();\r
-                        resolve(buffer);\r
-                    }, reject);\r
-                });\r
-            },\r
-\r
-            play() {\r
-                if (!this.audioBuffer || this.mode !== 'file' || this.isPlaying) return;\r
-                this.source = this.ctx.createBufferSource();\r
-                this.source.buffer = this.audioBuffer;\r
-                this.source.loop = true;\r
-                this.source.connect(this.analyser);\r
-                this.analyser.connect(this.ctx.destination);\r
-                this.source.start(0, this.pauseTime);\r
-                this.startTime = this.ctx.currentTime - this.pauseTime;\r
-                this.isPlaying = true;\r
-                this.isPaused = false;\r
-            },\r
-\r
-            pause() {\r
-                if (!this.isPlaying || this.mode !== 'file') return;\r
-                this.pauseTime = this.getCurrentTime();\r
-                this.isPaused = true;\r
-                this.isPlaying = false;\r
-                if (this.source) { try { this.source.stop(); } catch (e) { } this.source.disconnect(); this.source = null; }\r
-            },\r
-\r
-            togglePlayPause() {\r
-                if (this.mode === 'mic') return false;\r
-                if (this.isPlaying) { this.pause(); return false; }\r
-                else { this.play(); return true; }\r
-            },\r
-\r
-            getCurrentTime() {\r
-                if (!this.isPlaying) return this.pauseTime;\r
-                if (!this.audioBuffer) return 0;\r
-                return (this.ctx.currentTime - this.startTime) % this.audioBuffer.duration;\r
-            },\r
-\r
-            getDuration() { return this.audioBuffer ? this.audioBuffer.duration : 0; },\r
-\r
-            seek(time) {\r
-                if (this.mode !== 'file' || !this.audioBuffer) return;\r
-                const wasPlaying = this.isPlaying;\r
-                if (wasPlaying) this.pause();\r
-                this.pauseTime = Math.max(0, Math.min(time, this.audioBuffer.duration));\r
-                if (wasPlaying) this.play();\r
-            },\r
-\r
-            stopCurrentSource() {\r
-                if (this.source) { try { this.source.stop(); this.source.disconnect(); } catch (e) { } this.source = null; }\r
-                if (this.gainNode) { try { this.gainNode.disconnect(); } catch (e) { } this.gainNode = null; }\r
-                if (this.micStream) { this.micStream.getTracks().forEach(t => t.stop()); this.micStream = null; }\r
-                this.isPlaying = false; this.isPaused = false; this.pauseTime = 0;\r
-            },\r
-\r
-            async startMic(preferredLabel = null) {\r
-                console.log('startMic called with preferredLabel:', preferredLabel);\r
-                const status = document.getElementById('status-bar');\r
-                if (status) status.innerHTML = 'SYSTEM: <span>REQUESTING ACCESS...</span>';\r
-\r
-                try {\r
-                    // Ensure context is running\r
-                    if (this.ctx.state === 'suspended') {\r
-                        console.log('Resuming AudioContext...');\r
-                        await this.ctx.resume();\r
-                    }\r
-\r
-                    // 1. Get initial stream (activates permissions so labels are visible)\r
-                    console.log('Requesting initial getUserMedia...');\r
-                    let stream = await navigator.mediaDevices.getUserMedia({ audio: true });\r
-                    console.log('Initial stream obtained:', stream.id);\r
-\r
-                    // 2. Search for preferred device (loopback)\r
-                    let target = null;\r
-                    if (preferredLabel) {\r
-                        const devices = await navigator.mediaDevices.enumerateDevices();\r
-                        console.log("Audio Devices Found:", devices.length, devices.map(d => \`\${d.label} (\${d.kind})\`));\r
-\r
-                        target = devices.find(d => d.kind === 'audioinput' &&\r
-                            d.label.toLowerCase().includes(preferredLabel.toLowerCase()));\r
-                    }\r
-\r
-                    if (target) {\r
-                        console.log(\`Switching audio input to: \${target.label} [\${target.deviceId}]\`);\r
-                        stream.getTracks().forEach(t => t.stop()); // Stop generic stream\r
-\r
-                        // Request specific device - being explicit with constraints\r
-                        stream = await navigator.mediaDevices.getUserMedia({\r
-                            audio: {\r
-                                deviceId: { exact: target.deviceId },\r
-                                echoCancellation: false,\r
-                                noiseSuppression: false,\r
-                                autoGainControl: false,\r
-                                channelCount: 2\r
-                            }\r
-                        });\r
-                        this.currentTrackName = target.label;\r
-                    } else {\r
-                        if (preferredLabel) console.warn(\`Preferred device '\${preferredLabel}' not found. Using default.\`);\r
-                        // Keep the initial stream\r
-                        this.currentTrackName = stream.getAudioTracks()[0]?.label || 'Live Microphone';\r
-                    }\r
-\r
-                    this.stopCurrentSource();\r
-                    this.micStream = stream;\r
-                    this.source = this.ctx.createMediaStreamSource(stream);\r
-                    this.gainNode = this.ctx.createGain();\r
-                    this.gainNode.gain.value = 3.0; // Boost loopback/mic signal before FFT \u2014 tune via sensitivity slider\r
-                    this.source.connect(this.gainNode);\r
-                    this.gainNode.connect(this.analyser);\r
-                    this.mode = 'mic';\r
-                    this.isPlaying = true;\r
-                    this.resetCalibration();\r
-\r
-                    if (status) status.innerHTML = 'SYSTEM: <span>LISTENING (' + (preferredLabel ? 'Loopback' : 'Mic') + ')</span>';\r
-                    updateUI();\r
-\r
-                    return stream;\r
-                } catch (e) {\r
-                    console.error("AUDIO.startMic failed:", e);\r
-                    throw e;\r
-                }\r
-            },\r
-\r
-            resetCalibration() { this.gateState.isCalibrating = true; this.gateState.calibrationSamples = []; },\r
-\r
-            applyBassGate(rawValue) {\r
-                if (!STATE.bassGateEnabled) return rawValue;\r
-                const { bassGateThreshold: threshold, bassGateAttack: attack, bassGateRelease: release, bassGateRatio: ratio } = STATE;\r
-                if (this.gateState.isCalibrating) {\r
-                    this.gateState.calibrationSamples.push(rawValue);\r
-                    if (this.gateState.calibrationSamples.length >= this.gateState.calibrationFrames) {\r
-                        const sorted = [...this.gateState.calibrationSamples].sort((a, b) => a - b);\r
-                        this.gateState.noiseFloor = sorted.slice(0, Math.floor(sorted.length * 0.2)).reduce((a, b) => a + b, 0) / Math.floor(sorted.length * 0.2);\r
-                        this.gateState.isCalibrating = false;\r
-                    }\r
-                }\r
-                const effectiveThreshold = Math.max(threshold, this.gateState.noiseFloor * 1.5);\r
-                if (rawValue > effectiveThreshold) { this.gateState.isOpen = true; this.gateState.holdTime = 10; }\r
-                else if (rawValue < effectiveThreshold * 0.7 && this.gateState.holdTime <= 0) { this.gateState.isOpen = false; }\r
-                if (this.gateState.holdTime > 0) this.gateState.holdTime--;\r
-                this.gateState.envelope += ((this.gateState.isOpen ? 1.0 : 0.0) - this.gateState.envelope) * (this.gateState.isOpen ? attack : release);\r
-                let output = rawValue;\r
-                if (this.gateState.isOpen && rawValue > effectiveThreshold) {\r
-                    output = effectiveThreshold + (rawValue - effectiveThreshold) / ratio;\r
-                }\r
-                return output * this.gateState.envelope;\r
-            },\r
-\r
+            // === ENHANCEMENT: Onset Detection ===
+            onsetEnergy: 0, onsetDetected: false, onsetHistory: [], onsetThreshold: 0,
+            // === ENHANCEMENT: Waveform Data ===
+            waveformData: new Float32Array(128), waveformSmoothed: new Float32Array(128),
+            gateState: {
+                isOpen: false, envelope: 0, holdTime: 0, noiseFloor: 0.05,
+                calibrationSamples: [], isCalibrating: true, calibrationFrames: 30
+            },
+            init() {
+                if (this.ctx) return;
+                this.ctx = new (window.AudioContext || window.webkitAudioContext)();
+                this.analyser = this.ctx.createAnalyser();
+                this.analyser.fftSize = 4096;
+                this.analyser.smoothingTimeConstant = 0.65;
+                this.data = new Uint8Array(this.analyser.frequencyBinCount);
+                this.prevSpectrum = new Float32Array(this.analyser.frequencyBinCount);
+                this.active = true;
+            },
+            loadTrack(arrayBuffer, fileName) {
+                return new Promise((resolve, reject) => {
+                    this.ctx.decodeAudioData(arrayBuffer, (buffer) => {
+                        this.stopCurrentSource();
+                        this.audioBuffer = buffer;
+                        this.currentTrackName = fileName || 'Unknown';
+                        this.mode = 'file';
+                        this.pauseTime = 0;
+                        this.resetCalibration();
+                        resolve(buffer);
+                    }, reject);
+                });
+            },
+            play() {
+                if (!this.audioBuffer || this.mode !== 'file' || this.isPlaying) return;
+                this.source = this.ctx.createBufferSource();
+                this.source.buffer = this.audioBuffer;
+                this.source.loop = true;
+                this.source.connect(this.analyser);
+                this.analyser.connect(this.ctx.destination);
+                this.source.start(0, this.pauseTime);
+                this.startTime = this.ctx.currentTime - this.pauseTime;
+                this.isPlaying = true;
+                this.isPaused = false;
+            },
+            pause() {
+                if (!this.isPlaying || this.mode !== 'file') return;
+                this.pauseTime = this.getCurrentTime();
+                this.isPaused = true;
+                this.isPlaying = false;
+                if (this.source) { try { this.source.stop(); } catch (e) { } this.source.disconnect(); this.source = null; }
+            },
+            togglePlayPause() {
+                if (this.mode === 'mic') return false;
+                if (this.isPlaying) { this.pause(); return false; }
+                else { this.play(); return true; }
+            },
+            getCurrentTime() {
+                if (!this.isPlaying) return this.pauseTime;
+                if (!this.audioBuffer) return 0;
+                return (this.ctx.currentTime - this.startTime) % this.audioBuffer.duration;
+            },
+            getDuration() { return this.audioBuffer ? this.audioBuffer.duration : 0; },
+            seek(time) {
+                if (this.mode !== 'file' || !this.audioBuffer) return;
+                const wasPlaying = this.isPlaying;
+                if (wasPlaying) this.pause();
+                this.pauseTime = Math.max(0, Math.min(time, this.audioBuffer.duration));
+                if (wasPlaying) this.play();
+            },
+            stopCurrentSource() {
+                if (this.source) { try { this.source.stop(); this.source.disconnect(); } catch (e) { } this.source = null; }
+                if (this.gainNode) { try { this.gainNode.disconnect(); } catch (e) { } this.gainNode = null; }
+                if (this.micStream) { this.micStream.getTracks().forEach(t => t.stop()); this.micStream = null; }
+                this.isPlaying = false; this.isPaused = false; this.pauseTime = 0;
+            },
+            async startMic(preferredLabel = null) {
+                console.log('startMic called with preferredLabel:', preferredLabel);
+                const status = document.getElementById('status-bar');
+                if (status) status.innerHTML = 'SYSTEM: <span>REQUESTING ACCESS...</span>';
+                try {
+                    // Ensure context is running
+                    if (this.ctx.state === 'suspended') {
+                        console.log('Resuming AudioContext...');
+                        await this.ctx.resume();
+                    }
+                    // 1. Get initial stream (activates permissions so labels are visible)
+                    console.log('Requesting initial getUserMedia...');
+                    let stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                    console.log('Initial stream obtained:', stream.id);
+                    // 2. Search for preferred device (loopback)
+                    let target = null;
+                    if (preferredLabel) {
+                        const devices = await navigator.mediaDevices.enumerateDevices();
+                        console.log("Audio Devices Found:", devices.length, devices.map(d => \`\${d.label} (\${d.kind})\`));
+                        target = devices.find(d => d.kind === 'audioinput' &&
+                            d.label.toLowerCase().includes(preferredLabel.toLowerCase()));
+                    }
+                    if (target) {
+                        console.log(\`Switching audio input to: \${target.label} [\${target.deviceId}]\`);
+                        stream.getTracks().forEach(t => t.stop()); // Stop generic stream
+                        // Request specific device - being explicit with constraints
+                        stream = await navigator.mediaDevices.getUserMedia({
+                            audio: {
+                                deviceId: { exact: target.deviceId },
+                                echoCancellation: false,
+                                noiseSuppression: false,
+                                autoGainControl: false,
+                                channelCount: 2
+                            }
+                        });
+                        this.currentTrackName = target.label;
+                    } else {
+                        if (preferredLabel) console.warn(\`Preferred device '\${preferredLabel}' not found. Using default.\`);
+                        // Keep the initial stream
+                        this.currentTrackName = stream.getAudioTracks()[0]?.label || 'Live Microphone';
+                    }
+                    this.stopCurrentSource();
+                    this.micStream = stream;
+                    this.source = this.ctx.createMediaStreamSource(stream);
+                    this.gainNode = this.ctx.createGain();
+                    this.gainNode.gain.value = 3.0; // Boost loopback/mic signal before FFT \u2014 tune via sensitivity slider
+                    this.source.connect(this.gainNode);
+                    this.gainNode.connect(this.analyser);
+                    this.mode = 'mic';
+                    this.isPlaying = true;
+                    this.resetCalibration();
+                    if (status) status.innerHTML = 'SYSTEM: <span>LISTENING (' + (preferredLabel ? 'Loopback' : 'Mic') + ')</span>';
+                    updateUI();
+                    return stream;
+                } catch (e) {
+                    console.error("AUDIO.startMic failed:", e);
+                    throw e;
+                }
+            },
+            resetCalibration() { this.gateState.isCalibrating = true; this.gateState.calibrationSamples = []; },
+            applyBassGate(rawValue) {
+                if (!STATE.bassGateEnabled) return rawValue;
+                const { bassGateThreshold: threshold, bassGateAttack: attack, bassGateRelease: release, bassGateRatio: ratio } = STATE;
+                if (this.gateState.isCalibrating) {
+                    this.gateState.calibrationSamples.push(rawValue);
+                    if (this.gateState.calibrationSamples.length >= this.gateState.calibrationFrames) {
+                        const sorted = [...this.gateState.calibrationSamples].sort((a, b) => a - b);
+                        this.gateState.noiseFloor = sorted.slice(0, Math.floor(sorted.length * 0.2)).reduce((a, b) => a + b, 0) / Math.floor(sorted.length * 0.2);
+                        this.gateState.isCalibrating = false;
+                    }
+                }
+                const effectiveThreshold = Math.max(threshold, this.gateState.noiseFloor * 1.5);
+                if (rawValue > effectiveThreshold) { this.gateState.isOpen = true; this.gateState.holdTime = 10; }
+                else if (rawValue < effectiveThreshold * 0.7 && this.gateState.holdTime <= 0) { this.gateState.isOpen = false; }
+                if (this.gateState.holdTime > 0) this.gateState.holdTime--;
+                this.gateState.envelope += ((this.gateState.isOpen ? 1.0 : 0.0) - this.gateState.envelope) * (this.gateState.isOpen ? attack : release);
+                let output = rawValue;
+                if (this.gateState.isOpen && rawValue > effectiveThreshold) {
+                    output = effectiveThreshold + (rawValue - effectiveThreshold) / ratio;
+                }
+                return output * this.gateState.envelope;
+            },
             update() {
                 if (!this.active) return;
                 if (!this.isPlaying || !this.source) {
@@ -6152,127 +6152,127 @@ var reference_default = `<!DOCTYPE html>
                 }
                 this.idleCleared = false;
                 this.analyser.getByteFrequencyData(this.data);
-                const len = this.data.length, nyquist = this.ctx.sampleRate / 2;\r
-                const getFreqIndex = (freq) => Math.round(freq / nyquist * len);\r
-                const ranges = { subBass: [50, 120], bass: [120, 200], lowMid: [200, 450], mid: [450, 2000], highMid: [2000, 3500], high: [3500, 12000], ultraHigh: [12000, 20000] };\r
-                let totalEnergy = 0, weightedFreqSum = 0;\r
-                for (const [band, [low, high]] of Object.entries(ranges)) {\r
-                    const lowIdx = getFreqIndex(low), highIdx = getFreqIndex(high);\r
-                    let sum = 0;\r
-                    for (let i = lowIdx; i < highIdx && i < len; i++) {\r
-                        const v = this.data[i] / 255.0;\r
-                        sum += v; totalEnergy += v; weightedFreqSum += v * i;\r
-                    }\r
-                    const rawBand = sum / (highIdx - lowIdx);\r
-                    this.bands[band] = rawBand;\r
-                    this.gatedBands[band] = (band === 'subBass' || band === 'bass' || band === 'lowMid') ? this.applyBassGate(rawBand) : rawBand;\r
-                }\r
-                this.spectralCentroid = totalEnergy > 0 ? weightedFreqSum / totalEnergy / len : 0;\r
-                let flux = 0;\r
-                for (let i = 0; i < len; i++) {\r
-                    const current = this.data[i] / 255.0, diff = current - this.prevSpectrum[i];\r
-                    flux += diff > 0 ? diff * diff : 0;\r
-                    this.prevSpectrum[i] = current;\r
-                }\r
-                this.spectralFlux = Math.sqrt(flux / len);\r
-                const currentEnergy = this.gatedBands.bass * 0.6 + this.gatedBands.subBass * 0.4;\r
-                this.peakHistory.push(currentEnergy);\r
-                if (this.peakHistory.length > 50) this.peakHistory.shift();\r
-                const avgEnergy = this.peakHistory.reduce((a, b) => a + b, 0) / this.peakHistory.length;\r
-                const variance = this.peakHistory.reduce((a, b) => a + Math.pow(b - avgEnergy, 2), 0) / this.peakHistory.length;\r
-                const dynamicThreshold = avgEnergy + Math.sqrt(variance) * 1.8;\r
-                const now = performance.now();\r
-                if (currentEnergy > dynamicThreshold && currentEnergy > this.beatThreshold && now - this.lastBeatTime > 120) {\r
-                    this.beatDetected = true; this.beatEnergy = 1.0; this.lastBeatTime = now;\r
-                } else { this.beatDetected = false; }\r
-                this.beatEnergy *= this.beatDecay;\r
-\r
-                // === ENHANCEMENT: Improved Onset Detection ===\r
-                // Uses spectral flux derivative for sharper transient response\r
-                const onsetSens = STATE.onsetSensitivity;\r
-                this.onsetHistory.push(this.spectralFlux);\r
-                if (this.onsetHistory.length > 8) this.onsetHistory.shift();\r
-                const recentAvg = this.onsetHistory.slice(-4).reduce((a, b) => a + b, 0) / 4;\r
-                const olderAvg = this.onsetHistory.slice(0, 4).reduce((a, b) => a + b, 0) / Math.max(1, this.onsetHistory.slice(0, 4).length);\r
-                const onsetDelta = (recentAvg - olderAvg) * onsetSens;\r
-                this.onsetDetected = onsetDelta > 0.015 && now - this.lastBeatTime > 50;\r
-                this.onsetEnergy = this.onsetDetected ? 1.0 : this.onsetEnergy * STATE.onsetDecay;\r
-\r
-                // === ENHANCEMENT: Waveform Data for Terrain Field ===\r
-                const waveformBins = 128;\r
-                const binSize = Math.floor(len / waveformBins);\r
-                for (let i = 0; i < waveformBins; i++) {\r
-                    let sum = 0;\r
-                    for (let j = 0; j < binSize; j++) {\r
-                        sum += this.data[i * binSize + j] / 255.0;\r
-                    }\r
-                    const target = sum / binSize;\r
-                    this.waveformSmoothed[i] += (target - this.waveformSmoothed[i]) * 0.3;\r
-                    this.waveformData[i] = this.waveformSmoothed[i];\r
-                }\r
-            }\r
-        };\r
-\r
-        // --- SCENE SETUP ---\r
-        const scene = new THREE.Scene();\r
-        scene.fog = new THREE.FogExp2(0x000508, 0.005);\r
-        const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 800);\r
-        camera.position.set(0, 12, CONFIG.defaultZoom);\r
-        const cameraShakeOffset = new THREE.Vector3();\r
-        const baseCameraPos = camera.position.clone();\r
-        const zoomIndicator = document.getElementById('zoom-level');\r
-\r
+                const len = this.data.length, nyquist = this.ctx.sampleRate / 2;
+                const getFreqIndex = (freq) => Math.round(freq / nyquist * len);
+                const ranges = { subBass: [50, 120], bass: [120, 200], lowMid: [200, 450], mid: [450, 2000], highMid: [2000, 3500], high: [3500, 12000], ultraHigh: [12000, 20000] };
+                let totalEnergy = 0, weightedFreqSum = 0;
+                for (const [band, [low, high]] of Object.entries(ranges)) {
+                    const lowIdx = getFreqIndex(low), highIdx = getFreqIndex(high);
+                    let sum = 0;
+                    for (let i = lowIdx; i < highIdx && i < len; i++) {
+                        const v = this.data[i] / 255.0;
+                        sum += v; totalEnergy += v; weightedFreqSum += v * i;
+                    }
+                    const rawBand = sum / (highIdx - lowIdx);
+                    this.bands[band] = rawBand;
+                    this.gatedBands[band] = (band === 'subBass' || band === 'bass' || band === 'lowMid') ? this.applyBassGate(rawBand) : rawBand;
+                }
+                this.spectralCentroid = totalEnergy > 0 ? weightedFreqSum / totalEnergy / len : 0;
+                let flux = 0;
+                for (let i = 0; i < len; i++) {
+                    const current = this.data[i] / 255.0, diff = current - this.prevSpectrum[i];
+                    flux += diff > 0 ? diff * diff : 0;
+                    this.prevSpectrum[i] = current;
+                }
+                this.spectralFlux = Math.sqrt(flux / len);
+                const currentEnergy = this.gatedBands.bass * 0.6 + this.gatedBands.subBass * 0.4;
+                this.peakHistory.push(currentEnergy);
+                if (this.peakHistory.length > 50) this.peakHistory.shift();
+                const avgEnergy = this.peakHistory.reduce((a, b) => a + b, 0) / this.peakHistory.length;
+                const variance = this.peakHistory.reduce((a, b) => a + Math.pow(b - avgEnergy, 2), 0) / this.peakHistory.length;
+                const dynamicThreshold = avgEnergy + Math.sqrt(variance) * 1.8;
+                const now = performance.now();
+                if (currentEnergy > dynamicThreshold && currentEnergy > this.beatThreshold && now - this.lastBeatTime > 120) {
+                    this.beatDetected = true; this.beatEnergy = 1.0; this.lastBeatTime = now;
+                } else { this.beatDetected = false; }
+                this.beatEnergy *= this.beatDecay;
+                // === ENHANCEMENT: Improved Onset Detection ===
+                // Uses spectral flux derivative for sharper transient response
+                const onsetSens = STATE.onsetSensitivity;
+                this.onsetHistory.push(this.spectralFlux);
+                if (this.onsetHistory.length > 8) this.onsetHistory.shift();
+                const recentAvg = this.onsetHistory.slice(-4).reduce((a, b) => a + b, 0) / 4;
+                const olderAvg = this.onsetHistory.slice(0, 4).reduce((a, b) => a + b, 0) / Math.max(1, this.onsetHistory.slice(0, 4).length);
+                const onsetDelta = (recentAvg - olderAvg) * onsetSens;
+                this.onsetDetected = onsetDelta > 0.015 && now - this.lastBeatTime > 50;
+                this.onsetEnergy = this.onsetDetected ? 1.0 : this.onsetEnergy * STATE.onsetDecay;
+                // === ENHANCEMENT: Waveform Data for Terrain Field ===
+                const waveformBins = 128;
+                const binSize = Math.floor(len / waveformBins);
+                for (let i = 0; i < waveformBins; i++) {
+                    let sum = 0;
+                    for (let j = 0; j < binSize; j++) {
+                        sum += this.data[i * binSize + j] / 255.0;
+                    }
+                    const target = sum / binSize;
+                    this.waveformSmoothed[i] += (target - this.waveformSmoothed[i]) * 0.3;
+                    this.waveformData[i] = this.waveformSmoothed[i];
+                }
+            }
+        };
+        // --- SCENE SETUP ---
+        const scene = new THREE.Scene();
+        scene.fog = new THREE.FogExp2(0x000508, 0.005);
+        const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 800);
+        camera.position.set(0, 12, CONFIG.defaultZoom);
+        const cameraShakeOffset = new THREE.Vector3();
+        const baseCameraPos = camera.position.clone();
+        const zoomIndicator = document.getElementById('zoom-level');
         const renderer = new THREE.WebGLRenderer({ powerPreference: "high-performance", antialias: true, alpha: true });
         renderer.setClearColor(0x000000, 0);
-        renderer.setSize(window.innerWidth, window.innerHeight);\r
-        renderer.setPixelRatio(STATE.pixelRatio);\r
-        renderer.toneMapping = THREE.ACESFilmicToneMapping;\r
-        renderer.toneMappingExposure = 2.1;\r
-        document.body.appendChild(renderer.domElement);\r
-\r
-        const controls = new OrbitControls(camera, renderer.domElement);\r
-        controls.enableDamping = true;\r
-        controls.dampingFactor = 0.06;\r
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(STATE.pixelRatio);
+        renderer.toneMapping = THREE.ACESFilmicToneMapping;
+        renderer.toneMappingExposure = 2.1;
+        document.body.appendChild(renderer.domElement);
+        const controls = new OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.06;
         controls.autoRotate = false;
-        controls.autoRotateSpeed = 0.3;\r
-        controls.minDistance = CONFIG.minZoom;\r
-        controls.maxDistance = CONFIG.maxZoom;\r
-        controls.maxPolarAngle = Math.PI * 0.85;\r
-        controls.minPolarAngle = Math.PI * 0.15;\r
-\r
-        controls.addEventListener('change', () => {\r
-            const dist = camera.position.length();\r
-            const zoomPercent = Math.round((1 - (dist - CONFIG.minZoom) / (CONFIG.maxZoom - CONFIG.minZoom)) * 100);\r
-            zoomIndicator.textContent = Math.max(0, Math.min(100, zoomPercent)) + '%';\r
-            baseCameraPos.copy(camera.position);\r
-        });\r
-\r
-        const raycaster = new THREE.Raycaster();\r
-        const mouse = new THREE.Vector2(9999, 9999);\r
-        const plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);\r
-        const mouseWorldPos = new THREE.Vector3();\r
-        let mouseVelocity = new THREE.Vector2();\r
-        let prevMouse = new THREE.Vector2();\r
-\r
-        window.addEventListener('mousemove', (e) => {\r
-            const newMouse = new THREE.Vector2((e.clientX / window.innerWidth) * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1);\r
-            mouseVelocity.subVectors(newMouse, prevMouse);\r
-            prevMouse.copy(newMouse);\r
-            mouse.copy(newMouse);\r
-            raycaster.setFromCamera(mouse, camera);\r
-            const target = new THREE.Vector3();\r
-            raycaster.ray.intersectPlane(plane, target);\r
-            if (target) mouseWorldPos.copy(target);\r
-        });\r
-\r
-        window.addEventListener('keydown', (e) => {\r
-            if (e.key === '+' || e.key === '=') { camera.position.multiplyScalar(0.9); controls.update(); }\r
-            else if (e.key === '-' || e.key === '_') { camera.position.multiplyScalar(1.1); controls.update(); }\r
-            else if (e.key === '0') { camera.position.normalize().multiplyScalar(CONFIG.defaultZoom); controls.update(); }\r
-            else if (e.key === ' ') { e.preventDefault(); togglePlayPause(); }\r
+        controls.autoRotateSpeed = 0.3;
+        controls.minDistance = CONFIG.minZoom;
+        controls.maxDistance = CONFIG.maxZoom;
+        controls.maxPolarAngle = Math.PI * 0.85;
+        controls.minPolarAngle = Math.PI * 0.15;
+        controls.addEventListener('change', () => {
+            const dist = camera.position.length();
+            const zoomPercent = Math.round((1 - (dist - CONFIG.minZoom) / (CONFIG.maxZoom - CONFIG.minZoom)) * 100);
+            zoomIndicator.textContent = Math.max(0, Math.min(100, zoomPercent)) + '%';
+            baseCameraPos.copy(camera.position);
+        });
+        const raycaster = new THREE.Raycaster();
+        const mouse = new THREE.Vector2(9999, 9999);
+        const plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
+        const mouseWorldPos = new THREE.Vector3();
+        let mouseVelocity = new THREE.Vector2();
+        let prevMouse = new THREE.Vector2();
+        window.addEventListener('mousemove', (e) => {
+            const newMouse = new THREE.Vector2((e.clientX / window.innerWidth) * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1);
+            mouseVelocity.subVectors(newMouse, prevMouse);
+            prevMouse.copy(newMouse);
+            mouse.copy(newMouse);
+            raycaster.setFromCamera(mouse, camera);
+            const target = new THREE.Vector3();
+            raycaster.ray.intersectPlane(plane, target);
+            if (target) mouseWorldPos.copy(target);
+        });
+        window.addEventListener('keydown', (e) => {
+            if (e.key === '+' || e.key === '=') { camera.position.multiplyScalar(0.9); controls.update(); }
+            else if (e.key === '-' || e.key === '_') { camera.position.multiplyScalar(1.1); controls.update(); }
+            else if (e.key === '0') { camera.position.normalize().multiplyScalar(CONFIG.defaultZoom); controls.update(); }
+            else if (e.key === ' ') { e.preventDefault(); togglePlayPause(); }
             else if (e.key === 'f' || e.key === 'F') { STATE.dofEnabled = !STATE.dofEnabled; customDOFPass.enabled = STATE.dofEnabled; }
-        });\r
-\r
+        });
         // Every field type shares one screen-fitted footprint; switching presets never reallocates particles.
         const shapeFunction = \`
 vec3 shapedPosition(vec3 seed) {
@@ -6286,100 +6286,100 @@ vec3 shapedPosition(vec3 seed) {
         const vertexShader = \`
 uniform float uTime, uPixelRatio, uSizeBase, uNoiseScale, uCurlStrength;
 uniform float uViewportAspect, uViewportHalfHeight;
-uniform vec3 uColor1, uColor2, uColor3;\r
-uniform float uSubBass, uBass, uLowMid, uMid, uHighMid, uHigh, uUltraHigh;\r
-uniform float uBeatEnergy, uSpectralCentroid, uSpectralFlux;\r
-uniform float uOnsetEnergy, uTerrainMode, uTerrainHeight;\r
-uniform float uVortexStrength, uPulseIntensity, uZoomFactor;\r
-uniform vec3 uMousePos;\r
-uniform vec2 uMouseVelocity;\r
-attribute vec3 aRandom;\r
-attribute float aPhase, aLayer;\r
-varying vec3 vColor;\r
+uniform vec3 uColor1, uColor2, uColor3;
+uniform float uSubBass, uBass, uLowMid, uMid, uHighMid, uHigh, uUltraHigh;
+uniform float uBeatEnergy, uSpectralCentroid, uSpectralFlux;
+uniform float uOnsetEnergy, uTerrainMode, uTerrainHeight;
+uniform float uVortexStrength, uPulseIntensity, uZoomFactor;
+uniform vec3 uMousePos;
+uniform vec2 uMouseVelocity;
+attribute vec3 aRandom;
+attribute float aPhase, aLayer;
+varying vec3 vColor;
 varying float vAlpha, vEnergy, vDepth, vRimLight, vGlint;
-\r
-vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\r
-vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\r
-vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }\r
-vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\r
-\r
-float snoise(vec3 v) {\r
-    const vec2 C = vec2(1.0/6.0, 1.0/3.0);\r
-    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\r
-    vec3 i = floor(v + dot(v, C.yyy));\r
-    vec3 x0 = v - i + dot(i, C.xxx);\r
-    vec3 g = step(x0.yzx, x0.xyz);\r
-    vec3 l = 1.0 - g;\r
-    vec3 i1 = min(g.xyz, l.zxy);\r
-    vec3 i2 = max(g.xyz, l.zxy);\r
-    vec3 x1 = x0 - i1 + C.xxx;\r
-    vec3 x2 = x0 - i2 + C.yyy;\r
-    vec3 x3 = x0 - D.yyy;\r
-    i = mod289(i);\r
-    vec4 p = permute(permute(permute(i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0));\r
-    float n_ = 0.142857142857;\r
-    vec3 ns = n_ * D.wyz - D.xzx;\r
-    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);\r
-    vec4 x_ = floor(j * ns.z);\r
-    vec4 y_ = floor(j - 7.0 * x_);\r
-    vec4 x = x_ * ns.x + ns.yyyy;\r
-    vec4 y = y_ * ns.x + ns.yyyy;\r
-    vec4 h = 1.0 - abs(x) - abs(y);\r
-    vec4 b0 = vec4(x.xy, y.xy);\r
-    vec4 b1 = vec4(x.zw, y.zw);\r
-    vec4 s0 = floor(b0) * 2.0 + 1.0;\r
-    vec4 s1 = floor(b1) * 2.0 + 1.0;\r
-    vec4 sh = -step(h, vec4(0.0));\r
-    vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;\r
-    vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;\r
-    vec3 p0 = vec3(a0.xy, h.x);\r
-    vec3 p1 = vec3(a0.zw, h.y);\r
-    vec3 p2 = vec3(a1.xy, h.z);\r
-    vec3 p3 = vec3(a1.zw, h.w);\r
-    vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));\r
-    p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;\r
-    vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);\r
-    m = m * m;\r
-    return 42.0 * dot(m * m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));\r
-}\r
-\r
+vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
+vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+float snoise(vec3 v) {
+    const vec2 C = vec2(1.0/6.0, 1.0/3.0);
+    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
+    vec3 i = floor(v + dot(v, C.yyy));
+    vec3 x0 = v - i + dot(i, C.xxx);
+    vec3 g = step(x0.yzx, x0.xyz);
+    vec3 l = 1.0 - g;
+    vec3 i1 = min(g.xyz, l.zxy);
+    vec3 i2 = max(g.xyz, l.zxy);
+    vec3 x1 = x0 - i1 + C.xxx;
+    vec3 x2 = x0 - i2 + C.yyy;
+    vec3 x3 = x0 - D.yyy;
+    i = mod289(i);
+    vec4 p = permute(permute(permute(i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0));
+    float n_ = 0.142857142857;
+    vec3 ns = n_ * D.wyz - D.xzx;
+    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+    vec4 x_ = floor(j * ns.z);
+    vec4 y_ = floor(j - 7.0 * x_);
+    vec4 x = x_ * ns.x + ns.yyyy;
+    vec4 y = y_ * ns.x + ns.yyyy;
+    vec4 h = 1.0 - abs(x) - abs(y);
+    vec4 b0 = vec4(x.xy, y.xy);
+    vec4 b1 = vec4(x.zw, y.zw);
+    vec4 s0 = floor(b0) * 2.0 + 1.0;
+    vec4 s1 = floor(b1) * 2.0 + 1.0;
+    vec4 sh = -step(h, vec4(0.0));
+    vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+    vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
+    vec3 p0 = vec3(a0.xy, h.x);
+    vec3 p1 = vec3(a0.zw, h.y);
+    vec3 p2 = vec3(a1.xy, h.z);
+    vec3 p3 = vec3(a1.zw, h.w);
+    vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
+    p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;
+    vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
+    m = m * m;
+    return 42.0 * dot(m * m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
+}
 vec3 curl(float x, float y, float z) {
-    float eps = 0.08;\r
-    return vec3(\r
-        snoise(vec3(x, y+eps, z)) - snoise(vec3(x, y-eps, z)),\r
-        snoise(vec3(x, y, z+eps)) - snoise(vec3(x, y, z-eps)),\r
-        snoise(vec3(x+eps, y, z)) - snoise(vec3(x-eps, y, z))\r
-    );\r
+    float eps = 0.08;
+    return vec3(
+        snoise(vec3(x, y+eps, z)) - snoise(vec3(x, y-eps, z)),
+        snoise(vec3(x, y, z+eps)) - snoise(vec3(x, y, z-eps)),
+        snoise(vec3(x+eps, y, z)) - snoise(vec3(x-eps, y, z))
+    );
 }
 \${shapeFunction}
 void main() {
-    float t = uTime * (1.0 + uMid * 0.5);\r
-    vec3 noisePos = position * 0.035 + aRandom;\r
-    float layerMod = 1.0 + aLayer * 0.5;\r
-\r
-    vec3 flow1 = curl(noisePos.x * uNoiseScale + t*0.1, noisePos.y * uNoiseScale, noisePos.z * uNoiseScale);\r
-    vec3 flow2 = curl(noisePos.x * uNoiseScale * 2.2 + t*0.07, noisePos.y * uNoiseScale * 2.2 + t*0.08, noisePos.z * uNoiseScale * 2.2) * 0.4;\r
-    vec3 flow3 = curl(noisePos.x * uNoiseScale * 0.5 - t*0.05, noisePos.y * uNoiseScale * 0.5, noisePos.z * uNoiseScale * 0.5) * 0.6 * uLowMid;\r
-    vec3 flow = flow1 + flow2 * uHigh + flow3;\r
-\r
+    float t = uTime * (1.0 + uMid * 0.5);
+    vec3 noisePos = position * 0.035 + aRandom;
+    float layerMod = 1.0 + aLayer * 0.5;
+    vec3 flow1 = curl(noisePos.x * uNoiseScale + t*0.1, noisePos.y * uNoiseScale, noisePos.z * uNoiseScale);
+    vec3 flow2 = curl(noisePos.x * uNoiseScale * 2.2 + t*0.07, noisePos.y * uNoiseScale * 2.2 + t*0.08, noisePos.z * uNoiseScale * 2.2) * 0.4;
+    vec3 flow3 = curl(noisePos.x * uNoiseScale * 0.5 - t*0.05, noisePos.y * uNoiseScale * 0.5, noisePos.z * uNoiseScale * 0.5) * 0.6 * uLowMid;
+    vec3 flow = flow1 + flow2 * uHigh + flow3;
     vec3 newPos = shapedPosition(aRandom) + (flow * uCurlStrength * layerMod * (1.0 + uSpectralFlux * 2.5));
-\r
     float vortexAngle = uVortexStrength * uBass * 0.45 * (0.75 + aRandom.z * 0.5);
-    float cosA = cos(vortexAngle), sinA = sin(vortexAngle);\r
-    vec2 rotated = vec2(newPos.x * cosA - newPos.z * sinA, newPos.x * sinA + newPos.z * cosA);\r
-    newPos.xz = mix(newPos.xz, rotated, uBass * uVortexStrength);\r
-\r
-    float yVortex = sin(newPos.y * 0.1 + uTime) * uMid * uVortexStrength * 2.0;\r
-    newPos.x += cos(newPos.y * 0.15) * yVortex;\r
-    newPos.z += sin(newPos.y * 0.15) * yVortex;\r
-\r
-    float distToMouse = distance(newPos, uMousePos);\r
-    float repulsion = smoothstep(25.0, 0.0, distToMouse);\r
-    vec3 repelDir = normalize(newPos - uMousePos + vec3(0.001));\r
-    newPos += repelDir * repulsion * (12.0 + length(uMouseVelocity) * 360.0);\r
-\r
+    float cosA = cos(vortexAngle), sinA = sin(vortexAngle);
+    vec2 rotated = vec2(newPos.x * cosA - newPos.z * sinA, newPos.x * sinA + newPos.z * cosA);
+    newPos.xz = mix(newPos.xz, rotated, uBass * uVortexStrength);
+    float yVortex = sin(newPos.y * 0.1 + uTime) * uMid * uVortexStrength * 2.0;
+    newPos.x += cos(newPos.y * 0.15) * yVortex;
+    newPos.z += sin(newPos.y * 0.15) * yVortex;
+    float distToMouse = distance(newPos, uMousePos);
+    float repulsion = smoothstep(25.0, 0.0, distToMouse);
+    vec3 repelDir = normalize(newPos - uMousePos + vec3(0.001));
+    newPos += repelDir * repulsion * (12.0 + length(uMouseVelocity) * 360.0);
     // Audio changes depth throughout the plane, without evacuating its centre.
     float beatWave = sin(aRandom.x * 12.0 + aRandom.y * 7.0 - uTime * 6.0);
     float bassDepth = (beatWave * uBeatEnergy * uPulseIntensity * 3.5
@@ -6389,7 +6389,7 @@ void main() {
     newPos.z += bassDepth;
     float fieldWave = sin(aRandom.x * 11.0 - uTime * 0.8 + sin(aRandom.y * 7.0 + uTime * 0.35));
     newPos.z += fieldWave * (1.8 + uBass * 2.4 + uBeatEnergy * 1.6);
-\r
     // Waveform relief moves toward the camera while retaining the shared rectangular footprint.
     if (uTerrainMode > 0.5) {
         float freqBin = aRandom.x;
@@ -6399,329 +6399,329 @@ void main() {
         waveHeight *= (1.0 + uSpectralFlux * 3.0);
         newPos.z += waveHeight * uTerrainHeight;
         newPos.z += sin(aRandom.y * 6.28 * 4.0 + uTime) * uSubBass * 5.0;
-    }\r
-\r
-    vec4 mvPosition = modelViewMatrix * vec4(newPos, 1.0);\r
-    gl_Position = projectionMatrix * mvPosition;\r
-\r
+    }
+    vec4 mvPosition = modelViewMatrix * vec4(newPos, 1.0);
+    gl_Position = projectionMatrix * mvPosition;
     float size = uSizeBase * (0.85 + uBass * 0.5 + uBeatEnergy * 0.5) * (1.0 + (uZoomFactor - 1.0) * 0.3);
     size *= 1.0 + sin(uTime * 10.0 + aPhase * 6.28) * uHigh * 0.35;
     vGlint = smoothstep(0.985, 0.998, aRandom.z) * (0.7 + 0.3 * sin(uTime * 3.0 + aPhase * 6.28)) * (0.75 + uHigh * 0.15 + uOnsetEnergy * 0.1);
     size *= 0.85 + vGlint * 2.1;
     gl_PointSize = clamp(max(size * uPixelRatio * (90.0 / -mvPosition.z) * layerMod, vGlint * 4.5 * uPixelRatio), 0.5, 120.0);
-\r
-    float colorMix = smoothstep(0.0, 2.8, length(flow) + uHighMid * 3.0);\r
-    vec3 baseColor = mix(uColor1, uColor2, colorMix);\r
-    baseColor = mix(baseColor, uColor3, uSpectralCentroid * uHigh * 2.5);\r
-\r
-    float energyLevel = uBeatEnergy * 0.35 + repulsion * uMid * 2.0 + uSpectralFlux * 0.8;\r
-    vColor = mix(baseColor, vec3(1.0), energyLevel * 0.4);\r
-    vColor += vec3(0.08, 0.04, 0.12) * uUltraHigh * 2.5;\r
-\r
-    vRimLight = pow(1.0 - max(0.0, dot(normalize(-mvPosition.xyz), normalize(newPos))), 3.0);\r
-    vEnergy = energyLevel;\r
-    vDepth = clamp(-mvPosition.z / 120.0, 0.0, 1.0);\r
-\r
+    float colorMix = smoothstep(0.0, 2.8, length(flow) + uHighMid * 3.0);
+    vec3 baseColor = mix(uColor1, uColor2, colorMix);
+    baseColor = mix(baseColor, uColor3, uSpectralCentroid * uHigh * 2.5);
+    float energyLevel = uBeatEnergy * 0.35 + repulsion * uMid * 2.0 + uSpectralFlux * 0.8;
+    vColor = mix(baseColor, vec3(1.0), energyLevel * 0.4);
+    vColor += vec3(0.08, 0.04, 0.12) * uUltraHigh * 2.5;
+    vRimLight = pow(1.0 - max(0.0, dot(normalize(-mvPosition.xyz), normalize(newPos))), 3.0);
+    vEnergy = energyLevel;
+    vDepth = clamp(-mvPosition.z / 120.0, 0.0, 1.0);
     float alpha = 1.0 - smoothstep(0.92, 1.05, max(abs(newPos.x) / (uViewportAspect * uViewportHalfHeight * 0.82), abs(newPos.y) / (uViewportHalfHeight * 0.82)));
-    float sparkle = 1.0 + (aRandom.x > 0.8 ? sin(uTime * 20.0 + aRandom.y * 150.0) * uHigh * 2.5 : 0.0);\r
-    vAlpha = alpha * sparkle * (0.7 + uMid * 0.35) * layerMod;\r
-}\`;\r
-\r
-        const fragmentShader = \`\r
-varying vec3 vColor;\r
+    float sparkle = 1.0 + (aRandom.x > 0.8 ? sin(uTime * 20.0 + aRandom.y * 150.0) * uHigh * 2.5 : 0.0);
+    vAlpha = alpha * sparkle * (0.7 + uMid * 0.35) * layerMod;
+}\`;
+        const fragmentShader = \`
+varying vec3 vColor;
 varying float vAlpha, vEnergy, vDepth, vRimLight, vGlint;
-\r
-void main() {\r
-    vec2 xy = gl_PointCoord.xy - vec2(0.5);\r
-    float r = length(xy);\r
-    if(r > 0.5) discard;\r
-\r
-    float core = smoothstep(0.16 - vEnergy * 0.04, 0.12 - vEnergy * 0.04, r);\r
+void main() {
+    vec2 xy = gl_PointCoord.xy - vec2(0.5);
+    float r = length(xy);
+    if(r > 0.5) discard;
+    float core = smoothstep(0.16 - vEnergy * 0.04, 0.12 - vEnergy * 0.04, r);
     float glow = exp(-r * r * (20.0 - vEnergy * 10.0));
     float halo = exp(-r * r * 5.0) * 0.35 + exp(-r * r * 2.5) * 0.15;
     float glint = vGlint * (1.0 - smoothstep(0.012, 0.045, min(abs(xy.x), abs(xy.y)))) * (1.0 - smoothstep(0.16, 0.48, r));
     vec3 finalColor = mix(vColor, vec3(1.0), core * 0.58 + glint * 0.38);
     finalColor += vColor * vRimLight * 0.1;
-    finalColor = mix(finalColor, vec3(0.02, 0.03, 0.05), vDepth * 0.4);\r
-\r
+    finalColor = mix(finalColor, vec3(0.02, 0.03, 0.05), vDepth * 0.4);
     float finalAlpha = clamp(vAlpha * (glow * 0.85 + halo * 0.55 + pow(1.0 - r * 2.0, 2.5) * 0.55 + glint * 0.9), 0.0, 1.0);
-    gl_FragColor = vec4(finalColor, finalAlpha);\r
-}\`;\r
-\r
-        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 POST-PROCESSING SHADERS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\r
-\r
-        // GOD RAYS SHADER (Radial Light Scattering)\r
-        const GodRaysShader = {\r
-            uniforms: {\r
-                tDiffuse: { value: null },\r
-                uCenter: { value: new THREE.Vector2(0.5, 0.5) },\r
-                uIntensity: { value: 0.35 },\r
-                uDecay: { value: 0.94 },\r
-                uBeatEnergy: { value: 0.0 }\r
-            },\r
-            vertexShader: \`varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }\`,\r
-            fragmentShader: \`\r
-        uniform sampler2D tDiffuse;\r
-        uniform vec2 uCenter;\r
-        uniform float uIntensity, uDecay, uBeatEnergy;\r
-        varying vec2 vUv;\r
-\r
-        void main() {\r
-            vec4 color = texture2D(tDiffuse, vUv);\r
-            vec2 dir = vUv - uCenter;\r
-            float dist = length(dir);\r
-            dir = normalize(dir);\r
-\r
-            vec3 rays = vec3(0.0);\r
-            float decay = 1.0;\r
-\r
-            for(int i = 0; i < 32; i++) {\r
-                float t = float(i) / 32.0;\r
-                vec2 samplePos = vUv - dir * t * 0.15 * (1.0 + uBeatEnergy);\r
-                vec4 s = texture2D(tDiffuse, samplePos);\r
-                float lum = dot(s.rgb, vec3(0.3, 0.59, 0.11));\r
-                rays += s.rgb * decay * step(0.35, lum);\r
-                decay *= uDecay;\r
-            }\r
-            rays /= 16.0;\r
-            rays *= (1.0 - smoothstep(0.3, 0.9, dist));\r
-\r
+    gl_FragColor = vec4(finalColor, finalAlpha);
+}\`;
+        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 POST-PROCESSING SHADERS \u2550\u2550\u2550\u2550\u2550\u2550\u2550
+        // GOD RAYS SHADER (Radial Light Scattering)
+        const GodRaysShader = {
+            uniforms: {
+                tDiffuse: { value: null },
+                uCenter: { value: new THREE.Vector2(0.5, 0.5) },
+                uIntensity: { value: 0.35 },
+                uDecay: { value: 0.94 },
+                uBeatEnergy: { value: 0.0 }
+            },
+            vertexShader: \`varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }\`,
+            fragmentShader: \`
+        uniform sampler2D tDiffuse;
+        uniform vec2 uCenter;
+        uniform float uIntensity, uDecay, uBeatEnergy;
+        varying vec2 vUv;
+        void main() {
+            vec4 color = texture2D(tDiffuse, vUv);
+            vec2 dir = vUv - uCenter;
+            float dist = length(dir);
+            dir = normalize(dir);
+            vec3 rays = vec3(0.0);
+            float decay = 1.0;
+            for(int i = 0; i < 32; i++) {
+                float t = float(i) / 32.0;
+                vec2 samplePos = vUv - dir * t * 0.15 * (1.0 + uBeatEnergy);
+                vec4 s = texture2D(tDiffuse, samplePos);
+                float lum = dot(s.rgb, vec3(0.3, 0.59, 0.11));
+                rays += s.rgb * decay * step(0.35, lum);
+                decay *= uDecay;
+            }
+            rays /= 16.0;
+            rays *= (1.0 - smoothstep(0.3, 0.9, dist));
             gl_FragColor = vec4(color.rgb + rays * uIntensity * (1.0 + uBeatEnergy * 0.8), color.a);
-        }\`\r
-        };\r
-\r
-        // LENS FLARE POST-PROCESS SHADER (Cinematic)\r
-        const LensFlareShader = {\r
-            uniforms: {\r
-                tDiffuse: { value: null },\r
-                uIntensity: { value: 1.0 },\r
-                uBeatEnergy: { value: 0.0 },\r
-                uTime: { value: 0.0 }\r
-            },\r
-            vertexShader: \`varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }\`,\r
-            fragmentShader: \`\r
-        uniform sampler2D tDiffuse;\r
-        uniform float uIntensity, uBeatEnergy, uTime;\r
-        varying vec2 vUv;\r
-\r
-        float sdHex(vec2 p) {\r
-            p = abs(p);\r
-            return max(p.x * 0.866 + p.y * 0.5, p.y) - 1.0;\r
-        }\r
-\r
-        void main() {\r
-            vec4 color = texture2D(tDiffuse, vUv);\r
-            vec2 center = vec2(0.5);\r
-            vec2 toCenter = center - vUv;\r
-            float dist = length(toCenter);\r
-            vec2 dir = normalize(toCenter + 0.0001);\r
-\r
-            vec3 flare = vec3(0.0);\r
-\r
-            // Sample bright areas for flare source\r
-            float brightness = dot(color.rgb, vec3(0.299, 0.587, 0.114));\r
-            float threshold = smoothstep(0.6, 0.9, brightness);\r
-\r
-            // Anamorphic horizontal streak\r
-            float streak = 0.0;\r
-            for(float i = -8.0; i <= 8.0; i += 1.0) {\r
-                vec2 streakUV = vUv + vec2(i * 0.012, 0.0);\r
-                vec4 streakSample = texture2D(tDiffuse, streakUV);\r
-                float streakBright = dot(streakSample.rgb, vec3(0.299, 0.587, 0.114));\r
-                float falloff = 1.0 - abs(i) / 10.0;\r
-                streak += smoothstep(0.7, 1.0, streakBright) * falloff * falloff;\r
-            }\r
-            flare += vec3(0.6, 0.7, 1.0) * streak * 0.08;\r
-\r
-            // Subtle ghosts (reflections through lens elements)\r
-            for(int i = 1; i <= 3; i++) {\r
-                float scale = 1.0 - float(i) * 0.25;\r
-                vec2 ghostUV = center + (center - vUv) * scale * 0.8;\r
-                if(ghostUV.x > 0.0 && ghostUV.x < 1.0 && ghostUV.y > 0.0 && ghostUV.y < 1.0) {\r
-                    vec4 ghostSample = texture2D(tDiffuse, ghostUV);\r
-                    float ghostBright = dot(ghostSample.rgb, vec3(0.299, 0.587, 0.114));\r
-                    float ghostAlpha = smoothstep(0.5, 0.8, ghostBright) * (0.25 / float(i));\r
-                    vec3 ghostTint = vec3(0.7, 0.8, 1.0) * (1.0 - float(i) * 0.2);\r
-                    flare += ghostSample.rgb * ghostTint * ghostAlpha;\r
-                }\r
-            }\r
-\r
-            // Soft circular halo around bright center\r
-            float halo = smoothstep(0.25, 0.15, abs(dist - 0.2)) * threshold * 0.25;\r
-            flare += vec3(0.5, 0.6, 0.9) * halo;\r
-\r
-            // Subtle vignette-edge glow\r
-            float edgeGlow = smoothstep(0.5, 0.7, dist) * (1.0 - smoothstep(0.7, 0.85, dist));\r
-            flare += vec3(0.3, 0.4, 0.6) * edgeGlow * brightness * 0.15;\r
-\r
+        }\`
+        };
+        // LENS FLARE POST-PROCESS SHADER (Cinematic)
+        const LensFlareShader = {
+            uniforms: {
+                tDiffuse: { value: null },
+                uIntensity: { value: 1.0 },
+                uBeatEnergy: { value: 0.0 },
+                uTime: { value: 0.0 }
+            },
+            vertexShader: \`varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }\`,
+            fragmentShader: \`
+        uniform sampler2D tDiffuse;
+        uniform float uIntensity, uBeatEnergy, uTime;
+        varying vec2 vUv;
+        float sdHex(vec2 p) {
+            p = abs(p);
+            return max(p.x * 0.866 + p.y * 0.5, p.y) - 1.0;
+        }
+        void main() {
+            vec4 color = texture2D(tDiffuse, vUv);
+            vec2 center = vec2(0.5);
+            vec2 toCenter = center - vUv;
+            float dist = length(toCenter);
+            vec2 dir = normalize(toCenter + 0.0001);
+            vec3 flare = vec3(0.0);
+            // Sample bright areas for flare source
+            float brightness = dot(color.rgb, vec3(0.299, 0.587, 0.114));
+            float threshold = smoothstep(0.6, 0.9, brightness);
+            // Anamorphic horizontal streak
+            float streak = 0.0;
+            for(float i = -8.0; i <= 8.0; i += 1.0) {
+                vec2 streakUV = vUv + vec2(i * 0.012, 0.0);
+                vec4 streakSample = texture2D(tDiffuse, streakUV);
+                float streakBright = dot(streakSample.rgb, vec3(0.299, 0.587, 0.114));
+                float falloff = 1.0 - abs(i) / 10.0;
+                streak += smoothstep(0.7, 1.0, streakBright) * falloff * falloff;
+            }
+            flare += vec3(0.6, 0.7, 1.0) * streak * 0.08;
+            // Subtle ghosts (reflections through lens elements)
+            for(int i = 1; i <= 3; i++) {
+                float scale = 1.0 - float(i) * 0.25;
+                vec2 ghostUV = center + (center - vUv) * scale * 0.8;
+                if(ghostUV.x > 0.0 && ghostUV.x < 1.0 && ghostUV.y > 0.0 && ghostUV.y < 1.0) {
+                    vec4 ghostSample = texture2D(tDiffuse, ghostUV);
+                    float ghostBright = dot(ghostSample.rgb, vec3(0.299, 0.587, 0.114));
+                    float ghostAlpha = smoothstep(0.5, 0.8, ghostBright) * (0.25 / float(i));
+                    vec3 ghostTint = vec3(0.7, 0.8, 1.0) * (1.0 - float(i) * 0.2);
+                    flare += ghostSample.rgb * ghostTint * ghostAlpha;
+                }
+            }
+            // Soft circular halo around bright center
+            float halo = smoothstep(0.25, 0.15, abs(dist - 0.2)) * threshold * 0.25;
+            flare += vec3(0.5, 0.6, 0.9) * halo;
+            // Subtle vignette-edge glow
+            float edgeGlow = smoothstep(0.5, 0.7, dist) * (1.0 - smoothstep(0.7, 0.85, dist));
+            flare += vec3(0.3, 0.4, 0.6) * edgeGlow * brightness * 0.15;
             gl_FragColor = vec4(color.rgb + flare * uIntensity * (1.0 + uBeatEnergy * 0.3), color.a);
-        }\`\r
-        };\r
-\r
-        // ANAMORPHIC FLARE SHADER\r
-        const AnamorphicShader = {\r
-            uniforms: {\r
-                tDiffuse: { value: null },\r
-                uStretch: { value: 0.1 },\r
-                uThreshold: { value: 0.7 },\r
-                uIntensity: { value: 0.4 }\r
-            },\r
-            vertexShader: \`varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }\`,\r
-            fragmentShader: \`\r
-        uniform sampler2D tDiffuse;\r
-        uniform float uStretch, uThreshold, uIntensity;\r
-        varying vec2 vUv;\r
-        void main() {\r
-            vec4 color = texture2D(tDiffuse, vUv);\r
-            vec3 streak = vec3(0.0);\r
-            for(float i = -15.0; i <= 15.0; i++) {\r
-                vec4 s = texture2D(tDiffuse, vUv + vec2(i * uStretch * 0.01, 0.0));\r
-                float bright = dot(s.rgb, vec3(0.299, 0.587, 0.114));\r
-                if(bright > uThreshold) {\r
-                    float w = 1.0 - abs(i) / 15.0;\r
-                    streak += s.rgb * w * w;\r
-                }\r
-            }\r
-            gl_FragColor = vec4(color.rgb + streak / 7.5 * vec3(0.6, 0.8, 1.0) * uIntensity, color.a);\r
-        }\`\r
-        };\r
-\r
-        // CHROMATIC ABERRATION SHADER\r
-        const ChromaticShader = {\r
-            uniforms: {\r
-                tDiffuse: { value: null },\r
-                uIntensity: { value: 0.004 },\r
-                uBeatEnergy: { value: 0.0 }\r
-            },\r
-            vertexShader: \`varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }\`,\r
-            fragmentShader: \`\r
-        uniform sampler2D tDiffuse;\r
-        uniform float uIntensity, uBeatEnergy;\r
-        varying vec2 vUv;\r
-        void main() {\r
-            vec2 dir = vUv - vec2(0.5);\r
-            float dist = length(dir);\r
-            vec2 offset = dir * dist * uIntensity * (1.0 + uBeatEnergy * 1.5);\r
-            gl_FragColor = vec4(\r
-                texture2D(tDiffuse, vUv + offset * 1.2).r,\r
-                texture2D(tDiffuse, vUv).g,\r
-                texture2D(tDiffuse, vUv - offset * 1.2).b,\r
+        }\`
+        };
+        // ANAMORPHIC FLARE SHADER
+        const AnamorphicShader = {
+            uniforms: {
+                tDiffuse: { value: null },
+                uStretch: { value: 0.1 },
+                uThreshold: { value: 0.7 },
+                uIntensity: { value: 0.4 }
+            },
+            vertexShader: \`varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }\`,
+            fragmentShader: \`
+        uniform sampler2D tDiffuse;
+        uniform float uStretch, uThreshold, uIntensity;
+        varying vec2 vUv;
+        void main() {
+            vec4 color = texture2D(tDiffuse, vUv);
+            vec3 streak = vec3(0.0);
+            for(float i = -15.0; i <= 15.0; i++) {
+                vec4 s = texture2D(tDiffuse, vUv + vec2(i * uStretch * 0.01, 0.0));
+                float bright = dot(s.rgb, vec3(0.299, 0.587, 0.114));
+                if(bright > uThreshold) {
+                    float w = 1.0 - abs(i) / 15.0;
+                    streak += s.rgb * w * w;
+                }
+            }
+            gl_FragColor = vec4(color.rgb + streak / 7.5 * vec3(0.6, 0.8, 1.0) * uIntensity, color.a);
+        }\`
+        };
+        // CHROMATIC ABERRATION SHADER
+        const ChromaticShader = {
+            uniforms: {
+                tDiffuse: { value: null },
+                uIntensity: { value: 0.004 },
+                uBeatEnergy: { value: 0.0 }
+            },
+            vertexShader: \`varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }\`,
+            fragmentShader: \`
+        uniform sampler2D tDiffuse;
+        uniform float uIntensity, uBeatEnergy;
+        varying vec2 vUv;
+        void main() {
+            vec2 dir = vUv - vec2(0.5);
+            float dist = length(dir);
+            vec2 offset = dir * dist * uIntensity * (1.0 + uBeatEnergy * 1.5);
+            gl_FragColor = vec4(
+                texture2D(tDiffuse, vUv + offset * 1.2).r,
+                texture2D(tDiffuse, vUv).g,
+                texture2D(tDiffuse, vUv - offset * 1.2).b,
                 texture2D(tDiffuse, vUv).a
-            );\r
-        }\`\r
-        };\r
-\r
-        // FILM GRAIN SHADER\r
-        const GrainShader = {\r
-            uniforms: {\r
-                tDiffuse: { value: null },\r
-                uTime: { value: 0.0 },\r
-                uIntensity: { value: 0.0 }\r
-            },\r
-            vertexShader: \`varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }\`,\r
-            fragmentShader: \`\r
-        uniform sampler2D tDiffuse;\r
-        uniform float uTime, uIntensity;\r
-        varying vec2 vUv;\r
-        float rand(vec2 co) { return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453); }\r
-        void main() {\r
-            vec4 color = texture2D(tDiffuse, vUv);\r
-            float grain = (rand(vUv + fract(uTime)) * 2.0 - 1.0) * uIntensity;\r
-            gl_FragColor = vec4(color.rgb + grain * (1.0 - dot(color.rgb, vec3(0.299, 0.587, 0.114)) * 0.5), color.a);\r
-        }\`\r
-        };\r
-\r
-        // CUSTOM DEPTH OF FIELD SHADER (Radial + Edge blur)\r
-        const CustomDOFShader = {\r
-            uniforms: {\r
-                tDiffuse: { value: null },\r
-                uFocus: { value: 0.05 },\r
-                uFocalLength: { value: 0.25 },\r
-                uBokehStrength: { value: 0.5 },\r
-                uResolution: { value: new THREE.Vector2() },\r
-                uBeatEnergy: { value: 0.0 }\r
-            },\r
-            vertexShader: \`\r
-        varying vec2 vUv;\r
-        void main() {\r
-            vUv = uv;\r
-            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\r
-        }\r
-    \`,\r
-            fragmentShader: \`\r
-        uniform sampler2D tDiffuse;\r
-        uniform float uFocus;\r
-        uniform float uFocalLength;\r
-        uniform float uBokehStrength;\r
-        uniform vec2 uResolution;\r
-        uniform float uBeatEnergy;\r
-        varying vec2 vUv;\r
-\r
-        void main() {\r
-            vec2 center = vec2(0.5);\r
-            float dist = length(vUv - center);\r
-\r
-            // Focus ring - sharp in a ring around center, blurry inside and outside\r
-            float focusRing = abs(dist - uFocus);\r
-            float blur = smoothstep(0.0, uFocalLength, focusRing) * uBokehStrength;\r
-\r
-            vec3 color = vec3(0.0);\r
-            float total = 0.0;\r
-            vec2 texel = 1.0 / uResolution;\r
-\r
-            if(blur < 0.01) {\r
-                color = texture2D(tDiffuse, vUv).rgb;\r
-                total = 1.0;\r
-            } else {\r
-                // Golden angle spiral sampling\r
-                const float GOLDEN_ANGLE = 2.39996323;\r
-                const int SAMPLES = 24;\r
-                float radius = blur * 20.0 * (1.0 + uBeatEnergy * 0.1);\r
-\r
-                for(int i = 0; i < SAMPLES; i++) {\r
-                    float angle = float(i) * GOLDEN_ANGLE;\r
-                    float r = sqrt(float(i) / float(SAMPLES)) * radius;\r
-                    vec2 offset = vec2(cos(angle), sin(angle)) * r * texel;\r
-                    vec3 s = texture2D(tDiffuse, vUv + offset).rgb;\r
-\r
-                    // Subtle highlight boost\r
-                    float lum = dot(s, vec3(0.299, 0.587, 0.114));\r
-                    s *= 1.0 + smoothstep(0.7, 1.0, lum) * blur * 0.3;\r
-\r
-                    color += s;\r
-                    total += 1.0;\r
-                }\r
-            }\r
-\r
+            );
+        }\`
+        };
+        // FILM GRAIN SHADER
+        const GrainShader = {
+            uniforms: {
+                tDiffuse: { value: null },
+                uTime: { value: 0.0 },
+                uIntensity: { value: 0.0 }
+            },
+            vertexShader: \`varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }\`,
+            fragmentShader: \`
+        uniform sampler2D tDiffuse;
+        uniform float uTime, uIntensity;
+        varying vec2 vUv;
+        float rand(vec2 co) { return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453); }
+        void main() {
+            vec4 color = texture2D(tDiffuse, vUv);
+            float grain = (rand(vUv + fract(uTime)) * 2.0 - 1.0) * uIntensity;
+            gl_FragColor = vec4(color.rgb + grain * (1.0 - dot(color.rgb, vec3(0.299, 0.587, 0.114)) * 0.5), color.a);
+        }\`
+        };
+        // CUSTOM DEPTH OF FIELD SHADER (Radial + Edge blur)
+        const CustomDOFShader = {
+            uniforms: {
+                tDiffuse: { value: null },
+                uFocus: { value: 0.05 },
+                uFocalLength: { value: 0.25 },
+                uBokehStrength: { value: 0.5 },
+                uResolution: { value: new THREE.Vector2() },
+                uBeatEnergy: { value: 0.0 }
+            },
+            vertexShader: \`
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+    \`,
+            fragmentShader: \`
+        uniform sampler2D tDiffuse;
+        uniform float uFocus;
+        uniform float uFocalLength;
+        uniform float uBokehStrength;
+        uniform vec2 uResolution;
+        uniform float uBeatEnergy;
+        varying vec2 vUv;
+        void main() {
+            vec2 center = vec2(0.5);
+            float dist = length(vUv - center);
+            // Focus ring - sharp in a ring around center, blurry inside and outside
+            float focusRing = abs(dist - uFocus);
+            float blur = smoothstep(0.0, uFocalLength, focusRing) * uBokehStrength;
+            vec3 color = vec3(0.0);
+            float total = 0.0;
+            vec2 texel = 1.0 / uResolution;
+            if(blur < 0.01) {
+                color = texture2D(tDiffuse, vUv).rgb;
+                total = 1.0;
+            } else {
+                // Golden angle spiral sampling
+                const float GOLDEN_ANGLE = 2.39996323;
+                const int SAMPLES = 24;
+                float radius = blur * 20.0 * (1.0 + uBeatEnergy * 0.1);
+                for(int i = 0; i < SAMPLES; i++) {
+                    float angle = float(i) * GOLDEN_ANGLE;
+                    float r = sqrt(float(i) / float(SAMPLES)) * radius;
+                    vec2 offset = vec2(cos(angle), sin(angle)) * r * texel;
+                    vec3 s = texture2D(tDiffuse, vUv + offset).rgb;
+                    // Subtle highlight boost
+                    float lum = dot(s, vec3(0.299, 0.587, 0.114));
+                    s *= 1.0 + smoothstep(0.7, 1.0, lum) * blur * 0.3;
+                    color += s;
+                    total += 1.0;
+                }
+            }
             gl_FragColor = vec4(color / total, texture2D(tDiffuse, vUv).a);
-        }\r
-    \`\r
-        };\r
-\r
-        // VIGNETTE + GLOW SHADER\r
-        const VignetteShader = {\r
-            uniforms: {\r
-                tDiffuse: { value: null },\r
-                uBeatEnergy: { value: 0.0 }\r
-            },\r
-            vertexShader: \`varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }\`,\r
-            fragmentShader: \`\r
-        uniform sampler2D tDiffuse;\r
-        uniform float uBeatEnergy;\r
-        varying vec2 vUv;\r
-        void main() {\r
-            vec4 color = texture2D(tDiffuse, vUv);\r
-            vec2 uv = vUv * (1.0 - vUv.yx);\r
-            float vig = pow(uv.x * uv.y * 15.0, 0.38 * (1.0 - uBeatEnergy * 0.15));\r
-            float lum = dot(color.rgb, vec3(0.299, 0.587, 0.114));\r
-            float glow = smoothstep(0.5, 0.9, lum) * 0.1 * (1.0 + uBeatEnergy * 0.5);\r
-            gl_FragColor = vec4(color.rgb * vig * (1.0 + glow), color.a);\r
-        }\`\r
-        };\r
-\r
-        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 GEOMETRY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\r
-        const geometry = new THREE.BufferGeometry();\r
+        }
+    \`
+        };
+        // VIGNETTE + GLOW SHADER
+        const VignetteShader = {
+            uniforms: {
+                tDiffuse: { value: null },
+                uBeatEnergy: { value: 0.0 }
+            },
+            vertexShader: \`varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }\`,
+            fragmentShader: \`
+        uniform sampler2D tDiffuse;
+        uniform float uBeatEnergy;
+        varying vec2 vUv;
+        void main() {
+            vec4 color = texture2D(tDiffuse, vUv);
+            vec2 uv = vUv * (1.0 - vUv.yx);
+            float vig = pow(uv.x * uv.y * 15.0, 0.38 * (1.0 - uBeatEnergy * 0.15));
+            float lum = dot(color.rgb, vec3(0.299, 0.587, 0.114));
+            float glow = smoothstep(0.5, 0.9, lum) * 0.1 * (1.0 + uBeatEnergy * 0.5);
+            gl_FragColor = vec4(color.rgb * vig * (1.0 + glow), color.a);
+        }\`
+        };
+        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 GEOMETRY \u2550\u2550\u2550\u2550\u2550\u2550\u2550
+        const geometry = new THREE.BufferGeometry();
         const mainCapacity = Math.ceil(CONFIG.maxParticles * CONFIG.maxDensity);
         const pos = new Float32Array(mainCapacity * 3);
         const rnd = new Float32Array(mainCapacity * 3);
@@ -6730,11 +6730,11 @@ void main() {\r
         const vec = new THREE.Vector3();
         for (let i = 0; i < mainCapacity; i++) {
-            vec.setFromSphericalCoords(\r
-                CONFIG.fieldRadius * Math.pow(Math.random(), 0.33),\r
-                Math.acos(2 * Math.random() - 1),\r
-                Math.random() * Math.PI * 2\r
-            );\r
+            vec.setFromSphericalCoords(
+                CONFIG.fieldRadius * Math.pow(Math.random(), 0.33),
+                Math.acos(2 * Math.random() - 1),
+                Math.random() * Math.PI * 2
+            );
             pos[i * 3] = vec.x;
             pos[i * 3 + 1] = vec.y;
             pos[i * 3 + 2] = vec.z;
@@ -6742,57 +6742,57 @@ void main() {\r
             rnd[i * 3 + 1] = Math.random();
             rnd[i * 3 + 2] = Math.random();
             phase[i] = Math.random() * Math.PI * 2;
-        }\r
-\r
-        // Secondary particles now use separate instanced system below\r
-\r
+        }
+        // Secondary particles now use separate instanced system below
         geometry.setAttribute('position', new THREE.BufferAttribute(pos, 3));
         geometry.setAttribute('aRandom', new THREE.BufferAttribute(rnd, 3));
         geometry.setAttribute('aPhase', new THREE.BufferAttribute(phase, 1));
         geometry.setAttribute('aLayer', new THREE.BufferAttribute(layer, 1));
-        geometry.setDrawRange(0, Math.floor(CONFIG.maxParticles * STATE.density));\r
-\r
-        const FIELD_TYPES = {\r
+        geometry.setDrawRange(0, Math.floor(CONFIG.maxParticles * STATE.density));
+        const FIELD_TYPES = {
             'Photon (EM)': { c1: '#00f2ff', c2: '#0051ff', c3: '#ffffff', s: 1.0, curl: 1.0, sz: 3.0, sc1: '#66d9ff', sc2: '#99eeff' },
             'Gluon (Strong)': { c1: '#ff0055', c2: '#7000ff', c3: '#ff8800', s: 2.5, curl: 2.4, sz: 3.4, sc1: '#cc66ff', sc2: '#ff6699' },
             'Higgs (Mass)': { c1: '#ffae00', c2: '#ff4800', c3: '#ffff00', s: 0.6, curl: 0.3, sz: 4.0, sc1: '#ffcc66', sc2: '#ffdd99' },
             'Gravity': { c1: '#ffffff', c2: '#4466ff', c3: '#8844ff', s: 0.75, curl: 0.18, sz: 2.8, sc1: '#aabbff', sc2: '#ccaaff' },
             'Dark Energy': { c1: '#1a0033', c2: '#6600ff', c3: '#ff00ff', s: 1.9, curl: 1.6, sz: 3.1, sc1: '#9933ff', sc2: '#cc66ff' },
             'Neutrino': { c1: '#00ff88', c2: '#00ffcc', c3: '#88ffff', s: 3.0, curl: 3.0, sz: 2.6, sc1: '#66ffbb', sc2: '#99ffdd' },
-            // === ENHANCEMENT: Waveform Terrain Field ===\r
+            // === ENHANCEMENT: Waveform Terrain Field ===
             'Waveform Terrain': { c1: '#ff3366', c2: '#33ff99', c3: '#6633ff', s: 0.4, curl: 0.15, sz: 2.4, sc1: '#ff6699', sc2: '#66ffcc', terrain: true }
-        };\r
-\r
-        // === ENHANCEMENT: Adaptive Quality System ===\r
-        const QUALITY_SYSTEM = {\r
-            frameCount: 0,\r
-            frameTimes: [],\r
-            lastAdjustTime: 0,\r
-            currentFPS: 60,\r
-\r
-            update(deltaTime) {\r
-                this.frameCount++;\r
-                this.frameTimes.push(deltaTime);\r
-                if (this.frameTimes.length > 30) this.frameTimes.shift();\r
-\r
-                if (this.frameCount % 30 === 0) {\r
-                    const avgDelta = this.frameTimes.reduce((a, b) => a + b, 0) / this.frameTimes.length;\r
-                    this.currentFPS = 1000 / avgDelta;\r
-\r
+        };
+        // === ENHANCEMENT: Adaptive Quality System ===
+        const QUALITY_SYSTEM = {
+            frameCount: 0,
+            frameTimes: [],
+            lastAdjustTime: 0,
+            currentFPS: 60,
+            update(deltaTime) {
+                this.frameCount++;
+                this.frameTimes.push(deltaTime);
+                if (this.frameTimes.length > 30) this.frameTimes.shift();
+                if (this.frameCount % 30 === 0) {
+                    const avgDelta = this.frameTimes.reduce((a, b) => a + b, 0) / this.frameTimes.length;
+                    this.currentFPS = 1000 / avgDelta;
                     if (STATE.adaptiveQualityEnabled && performance.now() - this.lastAdjustTime > 1000) {
                         if (this.currentFPS < STATE.targetFPS - 10 && STATE.qualityLevel > 0.3) {
                             STATE.qualityLevel = Math.max(0.3, STATE.qualityLevel - (this.currentFPS < STATE.targetFPS * 0.6 ? 0.2 : 0.1));
-                            this.applyQuality();\r
-                            this.lastAdjustTime = performance.now();\r
-                        } else if (this.currentFPS > STATE.targetFPS + 5 && STATE.qualityLevel < 1.0) {\r
-                            STATE.qualityLevel = Math.min(1.0, STATE.qualityLevel + 0.05);\r
-                            this.applyQuality();\r
-                            this.lastAdjustTime = performance.now();\r
-                        }\r
-                    }\r
-                }\r
-            },\r
-\r
+                            this.applyQuality();
+                            this.lastAdjustTime = performance.now();
+                        } else if (this.currentFPS > STATE.targetFPS + 5 && STATE.qualityLevel < 1.0) {
+                            STATE.qualityLevel = Math.min(1.0, STATE.qualityLevel + 0.05);
+                            this.applyQuality();
+                            this.lastAdjustTime = performance.now();
+                        }
+                    }
+                }
+            },
             applyQuality() {
                 const q = STATE.qualityLevel;
                 const pixelRatio = Math.min(STATE.pixelRatio, Math.max(0.35, STATE.pixelRatio * q));
@@ -6809,301 +6809,301 @@ void main() {\r
                 material.uniforms.uPixelRatio.value = pixelRatio;
                 secondaryMaterial.uniforms.uPixelRatio.value = pixelRatio;
             }
-        };\r
-\r
-        // === ENHANCEMENT: Audio-Reactive Camera System ===\r
-        const AUDIO_CAMERA = {\r
-            targetOffset: new THREE.Vector3(),\r
-            currentOffset: new THREE.Vector3(),\r
-            targetFOV: 55,\r
-            baseFOV: 55,\r
-            breathPhase: 0,\r
-\r
-            update(deltaTime) {\r
-                if (!STATE.audioCameraEnabled || !AUDIO.active) return;\r
-\r
-                const bass = AUDIO.gatedBands.bass;\r
-                const mid = AUDIO.gatedBands.mid;\r
-                const high = AUDIO.gatedBands.high;\r
-                const intensity = STATE.audioCameraIntensity;\r
-                const smooth = STATE.audioCameraSmoothing;\r
-\r
-                // Bass-driven zoom pulse\r
-                this.targetFOV = this.baseFOV - bass * 8 * intensity + AUDIO.beatEnergy * 5 * intensity;\r
-                camera.fov += (this.targetFOV - camera.fov) * smooth;\r
-                camera.updateProjectionMatrix();\r
-\r
-                // Subtle sway based on mid frequencies\r
-                this.breathPhase += deltaTime * 0.001 * (1 + mid * 2);\r
-                this.targetOffset.x = Math.sin(this.breathPhase * 0.7) * mid * 3 * intensity;\r
-                this.targetOffset.y = Math.cos(this.breathPhase * 0.5) * high * 2 * intensity;\r
-                this.targetOffset.z = Math.sin(this.breathPhase * 0.3) * bass * 4 * intensity;\r
-\r
-                // Smooth interpolation\r
-                this.currentOffset.lerp(this.targetOffset, smooth);\r
-\r
-                // Apply onset punch\r
-                if (AUDIO.onsetDetected) {\r
-                    this.currentOffset.z -= AUDIO.onsetEnergy * 2 * intensity;\r
-                }\r
-            }\r
-        };\r
-\r
-        const def = FIELD_TYPES[STATE.field];\r
-        const material = new THREE.ShaderMaterial({\r
-            vertexShader, fragmentShader,\r
-            uniforms: {\r
-                uTime: { value: 0 },\r
-                uPixelRatio: { value: STATE.pixelRatio },\r
-                uSizeBase: { value: def.sz },\r
-                uNoiseScale: { value: def.s },\r
-                uCurlStrength: { value: def.curl },\r
+        };
+        // === ENHANCEMENT: Audio-Reactive Camera System ===
+        const AUDIO_CAMERA = {
+            targetOffset: new THREE.Vector3(),
+            currentOffset: new THREE.Vector3(),
+            targetFOV: 55,
+            baseFOV: 55,
+            breathPhase: 0,
+            update(deltaTime) {
+                if (!STATE.audioCameraEnabled || !AUDIO.active) return;
+                const bass = AUDIO.gatedBands.bass;
+                const mid = AUDIO.gatedBands.mid;
+                const high = AUDIO.gatedBands.high;
+                const intensity = STATE.audioCameraIntensity;
+                const smooth = STATE.audioCameraSmoothing;
+                // Bass-driven zoom pulse
+                this.targetFOV = this.baseFOV - bass * 8 * intensity + AUDIO.beatEnergy * 5 * intensity;
+                camera.fov += (this.targetFOV - camera.fov) * smooth;
+                camera.updateProjectionMatrix();
+                // Subtle sway based on mid frequencies
+                this.breathPhase += deltaTime * 0.001 * (1 + mid * 2);
+                this.targetOffset.x = Math.sin(this.breathPhase * 0.7) * mid * 3 * intensity;
+                this.targetOffset.y = Math.cos(this.breathPhase * 0.5) * high * 2 * intensity;
+                this.targetOffset.z = Math.sin(this.breathPhase * 0.3) * bass * 4 * intensity;
+                // Smooth interpolation
+                this.currentOffset.lerp(this.targetOffset, smooth);
+                // Apply onset punch
+                if (AUDIO.onsetDetected) {
+                    this.currentOffset.z -= AUDIO.onsetEnergy * 2 * intensity;
+                }
+            }
+        };
+        const def = FIELD_TYPES[STATE.field];
+        const material = new THREE.ShaderMaterial({
+            vertexShader, fragmentShader,
+            uniforms: {
+                uTime: { value: 0 },
+                uPixelRatio: { value: STATE.pixelRatio },
+                uSizeBase: { value: def.sz },
+                uNoiseScale: { value: def.s },
+                uCurlStrength: { value: def.curl },
                 uViewportAspect: { value: window.innerWidth / window.innerHeight },
                 uViewportHalfHeight: { value: Math.tan(camera.fov * Math.PI / 360) * CONFIG.defaultZoom },
-                uColor1: { value: new THREE.Color(def.c1) },\r
-                uColor2: { value: new THREE.Color(def.c2) },\r
-                uColor3: { value: new THREE.Color(def.c3) },\r
-                uSubBass: { value: 0 }, uBass: { value: 0 }, uLowMid: { value: 0 },\r
-                uMid: { value: 0 }, uHighMid: { value: 0 }, uHigh: { value: 0 }, uUltraHigh: { value: 0 },\r
-                uBeatEnergy: { value: 0 }, uSpectralCentroid: { value: 0 }, uSpectralFlux: { value: 0 },\r
-                uOnsetEnergy: { value: 0 }, uTerrainMode: { value: 0 }, uTerrainHeight: { value: 15.0 },\r
-                uVortexStrength: { value: STATE.vortexStrength },\r
-                uPulseIntensity: { value: STATE.pulseIntensity },\r
-                uZoomFactor: { value: 1.0 },\r
-                uMousePos: { value: new THREE.Vector3(999, 999, 999) },\r
-                uMouseVelocity: { value: new THREE.Vector2(0, 0) }\r
-            },\r
-            transparent: true, depthWrite: false, blending: THREE.AdditiveBlending\r
-        });\r
-\r
-        const points = new THREE.Points(geometry, material);\r
-        scene.add(points);\r
-\r
-        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 INSTANCED SECONDARY PARTICLES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\r
+                uColor1: { value: new THREE.Color(def.c1) },
+                uColor2: { value: new THREE.Color(def.c2) },
+                uColor3: { value: new THREE.Color(def.c3) },
+                uSubBass: { value: 0 }, uBass: { value: 0 }, uLowMid: { value: 0 },
+                uMid: { value: 0 }, uHighMid: { value: 0 }, uHigh: { value: 0 }, uUltraHigh: { value: 0 },
+                uBeatEnergy: { value: 0 }, uSpectralCentroid: { value: 0 }, uSpectralFlux: { value: 0 },
+                uOnsetEnergy: { value: 0 }, uTerrainMode: { value: 0 }, uTerrainHeight: { value: 15.0 },
+                uVortexStrength: { value: STATE.vortexStrength },
+                uPulseIntensity: { value: STATE.pulseIntensity },
+                uZoomFactor: { value: 1.0 },
+                uMousePos: { value: new THREE.Vector3(999, 999, 999) },
+                uMouseVelocity: { value: new THREE.Vector2(0, 0) }
+            },
+            transparent: true, depthWrite: false, blending: THREE.AdditiveBlending
+        });
+        const points = new THREE.Points(geometry, material);
+        scene.add(points);
+        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 INSTANCED SECONDARY PARTICLES \u2550\u2550\u2550\u2550\u2550\u2550\u2550
         const secondaryVertexShader = \`
 uniform float uTime, uPixelRatio;
 uniform float uViewportAspect, uViewportHalfHeight;
-uniform float uSubBass, uBass, uLowMid, uMid, uHighMid, uHigh, uUltraHigh;\r
-uniform float uBeatEnergy, uSpectralCentroid, uSpectralFlux, uOnsetEnergy;\r
-uniform vec3 uColor1, uColor2;\r
+uniform float uSubBass, uBass, uLowMid, uMid, uHighMid, uHigh, uUltraHigh;
+uniform float uBeatEnergy, uSpectralCentroid, uSpectralFlux, uOnsetEnergy;
+uniform vec3 uColor1, uColor2;
 uniform float uVortexStrength;
-\r
-attribute vec3 instancePosition;\r
-attribute vec3 instanceRandom;\r
-attribute float instancePhase;\r
-\r
-varying vec3 vColor;\r
-varying float vAlpha;\r
-varying float vEnergy;\r
-varying float vDepth;\r
-\r
-vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\r
-vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\r
-vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }\r
-vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\r
-\r
-float snoise(vec3 v) {\r
-    const vec2 C = vec2(1.0/6.0, 1.0/3.0);\r
-    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\r
-    vec3 i = floor(v + dot(v, C.yyy));\r
-    vec3 x0 = v - i + dot(i, C.xxx);\r
-    vec3 g = step(x0.yzx, x0.xyz);\r
-    vec3 l = 1.0 - g;\r
-    vec3 i1 = min(g.xyz, l.zxy);\r
-    vec3 i2 = max(g.xyz, l.zxy);\r
-    vec3 x1 = x0 - i1 + C.xxx;\r
-    vec3 x2 = x0 - i2 + C.yyy;\r
-    vec3 x3 = x0 - D.yyy;\r
-    i = mod289(i);\r
-    vec4 p = permute(permute(permute(i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0));\r
-    float n_ = 0.142857142857;\r
-    vec3 ns = n_ * D.wyz - D.xzx;\r
-    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);\r
-    vec4 x_ = floor(j * ns.z);\r
-    vec4 y_ = floor(j - 7.0 * x_);\r
-    vec4 x = x_ * ns.x + ns.yyyy;\r
-    vec4 y = y_ * ns.x + ns.yyyy;\r
-    vec4 h = 1.0 - abs(x) - abs(y);\r
-    vec4 b0 = vec4(x.xy, y.xy);\r
-    vec4 b1 = vec4(x.zw, y.zw);\r
-    vec4 s0 = floor(b0) * 2.0 + 1.0;\r
-    vec4 s1 = floor(b1) * 2.0 + 1.0;\r
-    vec4 sh = -step(h, vec4(0.0));\r
-    vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;\r
-    vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;\r
-    vec3 p0 = vec3(a0.xy, h.x);\r
-    vec3 p1 = vec3(a0.zw, h.y);\r
-    vec3 p2 = vec3(a1.xy, h.z);\r
-    vec3 p3 = vec3(a1.zw, h.w);\r
-    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));\r
-    p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;\r
-    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\r
-    m = m * m;\r
-    return 42.0 * dot(m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));\r
-}\r
-\r
+attribute vec3 instancePosition;
+attribute vec3 instanceRandom;
+attribute float instancePhase;
+varying vec3 vColor;
+varying float vAlpha;
+varying float vEnergy;
+varying float vDepth;
+vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
+vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+float snoise(vec3 v) {
+    const vec2 C = vec2(1.0/6.0, 1.0/3.0);
+    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
+    vec3 i = floor(v + dot(v, C.yyy));
+    vec3 x0 = v - i + dot(i, C.xxx);
+    vec3 g = step(x0.yzx, x0.xyz);
+    vec3 l = 1.0 - g;
+    vec3 i1 = min(g.xyz, l.zxy);
+    vec3 i2 = max(g.xyz, l.zxy);
+    vec3 x1 = x0 - i1 + C.xxx;
+    vec3 x2 = x0 - i2 + C.yyy;
+    vec3 x3 = x0 - D.yyy;
+    i = mod289(i);
+    vec4 p = permute(permute(permute(i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0));
+    float n_ = 0.142857142857;
+    vec3 ns = n_ * D.wyz - D.xzx;
+    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+    vec4 x_ = floor(j * ns.z);
+    vec4 y_ = floor(j - 7.0 * x_);
+    vec4 x = x_ * ns.x + ns.yyyy;
+    vec4 y = y_ * ns.x + ns.yyyy;
+    vec4 h = 1.0 - abs(x) - abs(y);
+    vec4 b0 = vec4(x.xy, y.xy);
+    vec4 b1 = vec4(x.zw, y.zw);
+    vec4 s0 = floor(b0) * 2.0 + 1.0;
+    vec4 s1 = floor(b1) * 2.0 + 1.0;
+    vec4 sh = -step(h, vec4(0.0));
+    vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+    vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
+    vec3 p0 = vec3(a0.xy, h.x);
+    vec3 p1 = vec3(a0.zw, h.y);
+    vec3 p2 = vec3(a1.xy, h.z);
+    vec3 p3 = vec3(a1.zw, h.w);
+    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));
+    p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;
+    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+    m = m * m;
+    return 42.0 * dot(m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));
+}
 \${shapeFunction}
 void main() {
     // Secondary particles run at a slower timescale \u2014 they are the atmosphere, not the core
-    float t = uTime * 0.45;\r
-\r
-    // Multi-scale noise flow \u2014 low freqs drive large drift, high freqs add fine turbulence\r
-    vec3 noisePos = instancePosition * 0.035 + instanceRandom;\r
-    vec3 drift    = vec3(\r
-        snoise(noisePos + t * 0.06),\r
-        snoise(noisePos * 0.9 - t * 0.05),\r
-        snoise(noisePos * 1.1 + t * 0.04)\r
-    ) * (5.0 + uSubBass * 10.0 + uLowMid * 6.0);\r
-\r
-    vec3 turbulence = vec3(\r
-        snoise(noisePos * 2.5 + t * 0.18),\r
-        snoise(noisePos * 2.5 - t * 0.14),\r
-        snoise(noisePos * 2.5 + t * 0.12)\r
-    ) * (uHigh * 5.0 + uSpectralFlux * 8.0);\r
-\r
-    vec3 offset = drift + turbulence;\r
-\r
-    // Orbital drift \u2014 vortex-aware, modulated by bass\r
-    float orbitSpeed = 0.12 + instanceRandom.x * 0.15 + uBass * 0.08;\r
-    float angle = uTime * orbitSpeed + instancePhase;\r
-    float orbitRadius = length(instancePosition.xz) * (1.0 + uSubBass * 0.25);\r
-    // Vortex coupling \u2014 secondary shell rotates with the main field vortex\r
-    float vortexInfluence = uVortexStrength * uBass * 0.4;\r
-    float vAngle = angle + vortexInfluence;\r
-    vec3 orbit = vec3(\r
-        cos(vAngle) * orbitRadius - instancePosition.x,\r
-        sin(uTime * 0.5 + instancePhase) * (uMid * 4.0 + uLowMid * 2.0),\r
-        sin(vAngle) * orbitRadius - instancePosition.z\r
-    ) * 0.07;\r
-\r
+    float t = uTime * 0.45;
+    // Multi-scale noise flow \u2014 low freqs drive large drift, high freqs add fine turbulence
+    vec3 noisePos = instancePosition * 0.035 + instanceRandom;
+    vec3 drift    = vec3(
+        snoise(noisePos + t * 0.06),
+        snoise(noisePos * 0.9 - t * 0.05),
+        snoise(noisePos * 1.1 + t * 0.04)
+    ) * (5.0 + uSubBass * 10.0 + uLowMid * 6.0);
+    vec3 turbulence = vec3(
+        snoise(noisePos * 2.5 + t * 0.18),
+        snoise(noisePos * 2.5 - t * 0.14),
+        snoise(noisePos * 2.5 + t * 0.12)
+    ) * (uHigh * 5.0 + uSpectralFlux * 8.0);
+    vec3 offset = drift + turbulence;
+    // Orbital drift \u2014 vortex-aware, modulated by bass
+    float orbitSpeed = 0.12 + instanceRandom.x * 0.15 + uBass * 0.08;
+    float angle = uTime * orbitSpeed + instancePhase;
+    float orbitRadius = length(instancePosition.xz) * (1.0 + uSubBass * 0.25);
+    // Vortex coupling \u2014 secondary shell rotates with the main field vortex
+    float vortexInfluence = uVortexStrength * uBass * 0.4;
+    float vAngle = angle + vortexInfluence;
+    vec3 orbit = vec3(
+        cos(vAngle) * orbitRadius - instancePosition.x,
+        sin(uTime * 0.5 + instancePhase) * (uMid * 4.0 + uLowMid * 2.0),
+        sin(vAngle) * orbitRadius - instancePosition.z
+    ) * 0.07;
     vec3 newPos = shapedPosition(instanceRandom) + offset + orbit;
-\r
     // Transients and sub-bass move the atmosphere in depth, not away from the centre.
     newPos.z += uOnsetEnergy * 14.0 * (0.6 + instanceRandom.z * 0.4);
     newPos.z += sin(uTime * 1.2 + instancePhase) * uSubBass * 5.0;
-\r
-    vec4 mvPosition = modelViewMatrix * vec4(newPos, 1.0);\r
-    gl_Position = projectionMatrix * mvPosition;\r
-\r
-    // Size: driven by different bands than the main system\r
-    // Sparkle on ultraHigh, swell on subBass, punch on beatEnergy\r
-    float sparkle = 1.0 + (instanceRandom.x > 0.85 ? sin(uTime * 15.0 + instanceRandom.y * 200.0) * uUltraHigh * 3.0 : 0.0);\r
-    float swell = 1.0 + uSubBass * 0.6 + uLowMid * 0.3;\r
-    float size = (1.1 + uBeatEnergy * 0.7) * swell * sparkle;\r
-    gl_PointSize = clamp(size * uPixelRatio * (55.0 / -mvPosition.z), 0.5, 55.0);\r
-\r
-    // Colour: spectral centroid shifts hue, highMid brightens toward white\r
-    float centroidMix = clamp(uSpectralCentroid * 2.2 + uHighMid * 0.4, 0.0, 1.0);\r
-    vColor = mix(uColor1, uColor2, centroidMix);\r
-    // SubBass warmth \u2014 hint of deep colour saturation on heavy lows\r
-    vColor = mix(vColor, vColor * 1.3, uSubBass * 0.4);\r
-    // Beat flash \u2014 brief white-hot core\r
-    vColor = mix(vColor, vec3(1.0), uBeatEnergy * 0.25);\r
-\r
-    // Alpha: outer shell fades at edge, mid-frequency presence sustains visibility\r
+    vec4 mvPosition = modelViewMatrix * vec4(newPos, 1.0);
+    gl_Position = projectionMatrix * mvPosition;
+    // Size: driven by different bands than the main system
+    // Sparkle on ultraHigh, swell on subBass, punch on beatEnergy
+    float sparkle = 1.0 + (instanceRandom.x > 0.85 ? sin(uTime * 15.0 + instanceRandom.y * 200.0) * uUltraHigh * 3.0 : 0.0);
+    float swell = 1.0 + uSubBass * 0.6 + uLowMid * 0.3;
+    float size = (1.1 + uBeatEnergy * 0.7) * swell * sparkle;
+    gl_PointSize = clamp(size * uPixelRatio * (55.0 / -mvPosition.z), 0.5, 55.0);
+    // Colour: spectral centroid shifts hue, highMid brightens toward white
+    float centroidMix = clamp(uSpectralCentroid * 2.2 + uHighMid * 0.4, 0.0, 1.0);
+    vColor = mix(uColor1, uColor2, centroidMix);
+    // SubBass warmth \u2014 hint of deep colour saturation on heavy lows
+    vColor = mix(vColor, vColor * 1.3, uSubBass * 0.4);
+    // Beat flash \u2014 brief white-hot core
+    vColor = mix(vColor, vec3(1.0), uBeatEnergy * 0.25);
+    // Alpha: outer shell fades at edge, mid-frequency presence sustains visibility
     float edgeFade = 1.0 - smoothstep(0.92, 1.05, max(abs(newPos.x) / (uViewportAspect * uViewportHalfHeight * 0.82), abs(newPos.y) / (uViewportHalfHeight * 0.82)));
-    vAlpha = edgeFade * (0.45 + uMid * 0.35 + uLowMid * 0.2) * sparkle;\r
-\r
-    vEnergy = uBeatEnergy * 0.4 + uHighMid * 0.3 + uOnsetEnergy * 0.3;\r
-    vDepth = clamp(-mvPosition.z / 160.0, 0.0, 1.0);\r
-}\r
-\`;\r
-\r
-        const secondaryFragmentShader = \`\r
-varying vec3 vColor;\r
-varying float vAlpha;\r
-varying float vEnergy;\r
-varying float vDepth;\r
-\r
-void main() {\r
-    vec2 xy = gl_PointCoord.xy - vec2(0.5);\r
-    float r = length(xy);\r
-    if (r > 0.5) discard;\r
-\r
-    // Wider, softer glow than main particles \u2014 atmospheric haze\r
-    float glow     = exp(-r * r * 8.0);\r
-    float softGlow = exp(-r * r * 3.0) * 0.4;\r
-    float core     = smoothstep(0.18 - vEnergy * 0.06, 0.10, r);\r
-\r
-    vec3 finalColor = mix(vColor, vec3(1.0, 0.97, 0.92), core * 0.55);\r
-    // Depth haze \u2014 far particles shift slightly cooler/dimmer\r
-    finalColor = mix(finalColor, vec3(0.02, 0.03, 0.06), vDepth * 0.35);\r
-\r
-    float finalAlpha = clamp(vAlpha * (glow * 0.65 + softGlow + core * 0.35), 0.0, 1.0);\r
-    gl_FragColor = vec4(finalColor, finalAlpha);\r
-}\r
-\`;\r
-\r
-        // Create instanced geometry for secondary particles\r
-        const secondaryGeometry = new THREE.InstancedBufferGeometry();\r
-\r
-        // Base geometry (single point)\r
-        const basePositions = new Float32Array([0, 0, 0]);\r
-        secondaryGeometry.setAttribute('position', new THREE.BufferAttribute(basePositions, 3));\r
-\r
-        // Instance attributes\r
-        const instancePositions = new Float32Array(CONFIG.secondaryParticles * 3);\r
-        const instanceRandoms = new Float32Array(CONFIG.secondaryParticles * 3);\r
-        const instancePhases = new Float32Array(CONFIG.secondaryParticles);\r
-\r
-        for (let i = 0; i < CONFIG.secondaryParticles; i++) {\r
-            // Distribute in outer shell\r
-            const r = CONFIG.fieldRadius * (0.65 + Math.random() * 0.45);\r
-            const theta = Math.acos(2 * Math.random() - 1);\r
-            const phi = Math.random() * Math.PI * 2;\r
-\r
-            instancePositions[i * 3] = r * Math.sin(theta) * Math.cos(phi);\r
-            instancePositions[i * 3 + 1] = r * Math.sin(theta) * Math.sin(phi);\r
-            instancePositions[i * 3 + 2] = r * Math.cos(theta);\r
-\r
-            instanceRandoms[i * 3] = Math.random();\r
-            instanceRandoms[i * 3 + 1] = Math.random();\r
-            instanceRandoms[i * 3 + 2] = Math.random();\r
-\r
-            instancePhases[i] = Math.random() * Math.PI * 2;\r
-        }\r
-\r
-        secondaryGeometry.setAttribute('instancePosition', new THREE.InstancedBufferAttribute(instancePositions, 3));\r
-        secondaryGeometry.setAttribute('instanceRandom', new THREE.InstancedBufferAttribute(instanceRandoms, 3));\r
-        secondaryGeometry.setAttribute('instancePhase', new THREE.InstancedBufferAttribute(instancePhases, 1));\r
-\r
-        const secondaryMaterial = new THREE.ShaderMaterial({\r
-            vertexShader: secondaryVertexShader,\r
-            fragmentShader: secondaryFragmentShader,\r
-            uniforms: {\r
-                uTime:             { value: 0 },\r
-                uPixelRatio:       { value: STATE.pixelRatio },\r
-                uSubBass:          { value: 0 },\r
-                uBass:             { value: 0 },\r
-                uLowMid:           { value: 0 },\r
-                uMid:              { value: 0 },\r
-                uHighMid:          { value: 0 },\r
-                uHigh:             { value: 0 },\r
-                uUltraHigh:        { value: 0 },\r
-                uBeatEnergy:       { value: 0 },\r
-                uSpectralCentroid: { value: 0 },\r
-                uSpectralFlux:     { value: 0 },\r
-                uOnsetEnergy:      { value: 0 },\r
-                uVortexStrength:   { value: STATE.vortexStrength },\r
-                uColor1:           { value: new THREE.Color(def.sc1) },\r
-                uColor2:           { value: new THREE.Color(def.sc2) },\r
+    vAlpha = edgeFade * (0.45 + uMid * 0.35 + uLowMid * 0.2) * sparkle;
+    vEnergy = uBeatEnergy * 0.4 + uHighMid * 0.3 + uOnsetEnergy * 0.3;
+    vDepth = clamp(-mvPosition.z / 160.0, 0.0, 1.0);
+}
+\`;
+        const secondaryFragmentShader = \`
+varying vec3 vColor;
+varying float vAlpha;
+varying float vEnergy;
+varying float vDepth;
+void main() {
+    vec2 xy = gl_PointCoord.xy - vec2(0.5);
+    float r = length(xy);
+    if (r > 0.5) discard;
+    // Wider, softer glow than main particles \u2014 atmospheric haze
+    float glow     = exp(-r * r * 8.0);
+    float softGlow = exp(-r * r * 3.0) * 0.4;
+    float core     = smoothstep(0.18 - vEnergy * 0.06, 0.10, r);
+    vec3 finalColor = mix(vColor, vec3(1.0, 0.97, 0.92), core * 0.55);
+    // Depth haze \u2014 far particles shift slightly cooler/dimmer
+    finalColor = mix(finalColor, vec3(0.02, 0.03, 0.06), vDepth * 0.35);
+    float finalAlpha = clamp(vAlpha * (glow * 0.65 + softGlow + core * 0.35), 0.0, 1.0);
+    gl_FragColor = vec4(finalColor, finalAlpha);
+}
+\`;
+        // Create instanced geometry for secondary particles
+        const secondaryGeometry = new THREE.InstancedBufferGeometry();
+        // Base geometry (single point)
+        const basePositions = new Float32Array([0, 0, 0]);
+        secondaryGeometry.setAttribute('position', new THREE.BufferAttribute(basePositions, 3));
+        // Instance attributes
+        const instancePositions = new Float32Array(CONFIG.secondaryParticles * 3);
+        const instanceRandoms = new Float32Array(CONFIG.secondaryParticles * 3);
+        const instancePhases = new Float32Array(CONFIG.secondaryParticles);
+        for (let i = 0; i < CONFIG.secondaryParticles; i++) {
+            // Distribute in outer shell
+            const r = CONFIG.fieldRadius * (0.65 + Math.random() * 0.45);
+            const theta = Math.acos(2 * Math.random() - 1);
+            const phi = Math.random() * Math.PI * 2;
+            instancePositions[i * 3] = r * Math.sin(theta) * Math.cos(phi);
+            instancePositions[i * 3 + 1] = r * Math.sin(theta) * Math.sin(phi);
+            instancePositions[i * 3 + 2] = r * Math.cos(theta);
+            instanceRandoms[i * 3] = Math.random();
+            instanceRandoms[i * 3 + 1] = Math.random();
+            instanceRandoms[i * 3 + 2] = Math.random();
+            instancePhases[i] = Math.random() * Math.PI * 2;
+        }
+        secondaryGeometry.setAttribute('instancePosition', new THREE.InstancedBufferAttribute(instancePositions, 3));
+        secondaryGeometry.setAttribute('instanceRandom', new THREE.InstancedBufferAttribute(instanceRandoms, 3));
+        secondaryGeometry.setAttribute('instancePhase', new THREE.InstancedBufferAttribute(instancePhases, 1));
+        const secondaryMaterial = new THREE.ShaderMaterial({
+            vertexShader: secondaryVertexShader,
+            fragmentShader: secondaryFragmentShader,
+            uniforms: {
+                uTime:             { value: 0 },
+                uPixelRatio:       { value: STATE.pixelRatio },
+                uSubBass:          { value: 0 },
+                uBass:             { value: 0 },
+                uLowMid:           { value: 0 },
+                uMid:              { value: 0 },
+                uHighMid:          { value: 0 },
+                uHigh:             { value: 0 },
+                uUltraHigh:        { value: 0 },
+                uBeatEnergy:       { value: 0 },
+                uSpectralCentroid: { value: 0 },
+                uSpectralFlux:     { value: 0 },
+                uOnsetEnergy:      { value: 0 },
+                uVortexStrength:   { value: STATE.vortexStrength },
+                uColor1:           { value: new THREE.Color(def.sc1) },
+                uColor2:           { value: new THREE.Color(def.sc2) },
                 uViewportAspect:   { value: window.innerWidth / window.innerHeight },
                 uViewportHalfHeight: { value: Math.tan(camera.fov * Math.PI / 360) * CONFIG.defaultZoom }
-            },\r
-            transparent: true,\r
-            depthWrite: false,\r
-            blending: THREE.AdditiveBlending\r
-        });\r
-\r
-        const secondaryPoints = new THREE.Points(secondaryGeometry, secondaryMaterial);\r
-        scene.add(secondaryPoints);\r
-\r
+            },
+            transparent: true,
+            depthWrite: false,
+            blending: THREE.AdditiveBlending
+        });
+        const secondaryPoints = new THREE.Points(secondaryGeometry, secondaryMaterial);
+        scene.add(secondaryPoints);
         // Expose secondary-layer controls to the host component.
-        STATE.secondaryEnabled = true;\r
-        STATE.secondaryOpacity = 1.0;\r
-\r
-        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 PARTICLE TRAIL SYSTEM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\r
+        STATE.secondaryEnabled = true;
+        STATE.secondaryOpacity = 1.0;
+        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 PARTICLE TRAIL SYSTEM \u2550\u2550\u2550\u2550\u2550\u2550\u2550
         const particleSeeds = geometry.getAttribute('aRandom');
         function fieldParticlePosition(index, target) {
             const halfHeight = material.uniforms.uViewportHalfHeight.value * 0.78;
@@ -7116,7 +7116,7 @@ void main() {\r
         }
         class TrailSystem {
-            constructor(count, length) {\r
+            constructor(count, length) {
                 this.trails = [];
                 this.meshes = [];
                 this.nextPosition = new THREE.Vector3();
@@ -7131,41 +7131,41 @@ void main() {\r
                     const trail = {
                         positions: Array.from({ length }, () => start.clone()),
                         anchor,
-                        phase: Math.random() * Math.PI * 2,\r
-                        speed: 0.3 + Math.random() * 0.7,\r
-                        color: new THREE.Color().setHSL(Math.random(), 0.7, 0.6)\r
-                    };\r
-                    this.trails.push(trail);\r
-\r
-                    const geom = new THREE.BufferGeometry();\r
-                    const positions = new Float32Array(length * 3);\r
-                    const alphas = new Float32Array(length);\r
-                    for (let j = 0; j < length; j++) alphas[j] = 1.0 - j / length;\r
-\r
-                    geom.setAttribute('position', new THREE.BufferAttribute(positions, 3));\r
-                    geom.setAttribute('alpha', new THREE.BufferAttribute(alphas, 1));\r
-\r
-                    const mat = new THREE.ShaderMaterial({\r
-                        vertexShader: \`attribute float alpha; varying float vAlpha; void main() { vAlpha = alpha; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }\`,\r
-                        fragmentShader: \`uniform vec3 uColor; uniform float uOpacity, uBeat; varying float vAlpha; void main() { gl_FragColor = vec4(uColor * (1.0 + uBeat * 0.3), vAlpha * uOpacity * 0.6 * (1.0 + uBeat * 0.5)); }\`,\r
-                        uniforms: { uColor: { value: trail.color }, uOpacity: { value: 0.4 }, uBeat: { value: 0 } },\r
-                        transparent: true, depthWrite: false, blending: THREE.AdditiveBlending\r
-                    });\r
-\r
-                    const line = new THREE.Line(geom, mat);\r
-                    this.meshes.push(line);\r
-                    scene.add(line);\r
-                }\r
-            }\r
-\r
+                        phase: Math.random() * Math.PI * 2,
+                        speed: 0.3 + Math.random() * 0.7,
+                        color: new THREE.Color().setHSL(Math.random(), 0.7, 0.6)
+                    };
+                    this.trails.push(trail);
+                    const geom = new THREE.BufferGeometry();
+                    const positions = new Float32Array(length * 3);
+                    const alphas = new Float32Array(length);
+                    for (let j = 0; j < length; j++) alphas[j] = 1.0 - j / length;
+                    geom.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+                    geom.setAttribute('alpha', new THREE.BufferAttribute(alphas, 1));
+                    const mat = new THREE.ShaderMaterial({
+                        vertexShader: \`attribute float alpha; varying float vAlpha; void main() { vAlpha = alpha; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }\`,
+                        fragmentShader: \`uniform vec3 uColor; uniform float uOpacity, uBeat; varying float vAlpha; void main() { gl_FragColor = vec4(uColor * (1.0 + uBeat * 0.3), vAlpha * uOpacity * 0.6 * (1.0 + uBeat * 0.5)); }\`,
+                        uniforms: { uColor: { value: trail.color }, uOpacity: { value: 0.4 }, uBeat: { value: 0 } },
+                        transparent: true, depthWrite: false, blending: THREE.AdditiveBlending
+                    });
+                    const line = new THREE.Line(geom, mat);
+                    this.meshes.push(line);
+                    scene.add(line);
+                }
+            }
             update(time, audio, fieldColor) {
                 const halfHeight = material.uniforms.uViewportHalfHeight.value * 0.78;
                 const halfWidth = halfHeight * material.uniforms.uViewportAspect.value;
                 for (let i = 0; i < this.trails.length; i++) {
-                    const trail = this.trails[i], mesh = this.meshes[i];\r
+                    const trail = this.trails[i], mesh = this.meshes[i];
                     mesh.visible = STATE.particleTrailsEnabled && i < this.trails.length * STATE.qualityLevel;
-                    if (!mesh.visible) continue;\r
-\r
+                    if (!mesh.visible) continue;
                     const angle = time * 0.5 * trail.speed + trail.phase;
                     const newPos = this.nextPosition.set(
                         trail.anchor.x * halfWidth + Math.cos(angle) * (4 + audio.bass * 8),
@@ -7174,86 +7174,86 @@ void main() {\r
                     );
                     newPos.x = THREE.MathUtils.clamp(newPos.x, -halfWidth * 0.94, halfWidth * 0.94);
                     newPos.y = THREE.MathUtils.clamp(newPos.y, -halfHeight * 0.94, halfHeight * 0.94);
-\r
-                    for (let j = trail.positions.length - 1; j > 0; j--) trail.positions[j].copy(trail.positions[j - 1]);\r
-                    trail.positions[0].copy(newPos);\r
-\r
-                    const posAttr = mesh.geometry.getAttribute('position');\r
-                    for (let j = 0; j < trail.positions.length; j++) {\r
-                        posAttr.setXYZ(j, trail.positions[j].x, trail.positions[j].y, trail.positions[j].z);\r
-                    }\r
-                    posAttr.needsUpdate = true;\r
-\r
-                    mesh.material.uniforms.uBeat.value = audio.beat;\r
-                    mesh.material.uniforms.uOpacity.value = STATE.particleTrailOpacity;\r
-                    if (fieldColor) trail.color.lerp(fieldColor, 0.01);\r
-                }\r
-            }\r
-        }\r
-\r
-        const trailSystem = new TrailSystem(50, 12);\r
-\r
-        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 PARTICLE CONNECTIONS (Force Network) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\r
-        const connectionCount = 500;  // Number of particles to check for connections\r
-        const maxConnections = 800;   // Maximum line segments\r
-        const connectionGeometry = new THREE.BufferGeometry();\r
-        const connectionPositions = new Float32Array(maxConnections * 6);  // 2 points per line, 3 coords each\r
-        const connectionAlphas = new Float32Array(maxConnections * 2);     // Alpha per vertex\r
-        connectionGeometry.setAttribute('position', new THREE.BufferAttribute(connectionPositions, 3));\r
-        connectionGeometry.setAttribute('alpha', new THREE.BufferAttribute(connectionAlphas, 1));\r
-        connectionGeometry.setDrawRange(0, 0);\r
-\r
-        const connectionMaterial = new THREE.ShaderMaterial({\r
-            vertexShader: \`\r
-        attribute float alpha;\r
-        varying float vAlpha;\r
+                    for (let j = trail.positions.length - 1; j > 0; j--) trail.positions[j].copy(trail.positions[j - 1]);
+                    trail.positions[0].copy(newPos);
+                    const posAttr = mesh.geometry.getAttribute('position');
+                    for (let j = 0; j < trail.positions.length; j++) {
+                        posAttr.setXYZ(j, trail.positions[j].x, trail.positions[j].y, trail.positions[j].z);
+                    }
+                    posAttr.needsUpdate = true;
+                    mesh.material.uniforms.uBeat.value = audio.beat;
+                    mesh.material.uniforms.uOpacity.value = STATE.particleTrailOpacity;
+                    if (fieldColor) trail.color.lerp(fieldColor, 0.01);
+                }
+            }
+        }
+        const trailSystem = new TrailSystem(50, 12);
+        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 PARTICLE CONNECTIONS (Force Network) \u2550\u2550\u2550\u2550\u2550\u2550\u2550
+        const connectionCount = 500;  // Number of particles to check for connections
+        const maxConnections = 800;   // Maximum line segments
+        const connectionGeometry = new THREE.BufferGeometry();
+        const connectionPositions = new Float32Array(maxConnections * 6);  // 2 points per line, 3 coords each
+        const connectionAlphas = new Float32Array(maxConnections * 2);     // Alpha per vertex
+        connectionGeometry.setAttribute('position', new THREE.BufferAttribute(connectionPositions, 3));
+        connectionGeometry.setAttribute('alpha', new THREE.BufferAttribute(connectionAlphas, 1));
+        connectionGeometry.setDrawRange(0, 0);
+        const connectionMaterial = new THREE.ShaderMaterial({
+            vertexShader: \`
+        attribute float alpha;
+        varying float vAlpha;
         void main() {
             vAlpha = alpha;
             vec4 mvPos = modelViewMatrix * vec4(position, 1.0);
             gl_Position = projectionMatrix * mvPos;
-        }\r
-    \`,\r
-            fragmentShader: \`\r
-        uniform vec3 uColor;\r
-        uniform vec3 uColor2;\r
-        uniform float uOpacity;\r
-        uniform float uBeatEnergy;\r
-        uniform float uHighMid;\r
-        uniform float uSpectralCentroid;\r
-        varying float vAlpha;\r
+        }
+    \`,
+            fragmentShader: \`
+        uniform vec3 uColor;
+        uniform vec3 uColor2;
+        uniform float uOpacity;
+        uniform float uBeatEnergy;
+        uniform float uHighMid;
+        uniform float uSpectralCentroid;
+        varying float vAlpha;
         void main() {
             // Blend hue with spectral centroid (brighter/higher = more c2)
             vec3 color = mix(uColor, uColor2, clamp(uSpectralCentroid * 2.0, 0.0, 1.0));
-            // Beat pulse flash\r
-            float beatFlash = 1.0 + uBeatEnergy * 1.2;\r
-            color *= beatFlash;\r
-            // Per-line alpha reacts to highMid (attack/presence energy)\r
-            float lineAlpha = vAlpha * uOpacity * (0.4 + uHighMid * 0.5 + uBeatEnergy * 0.4);\r
-            gl_FragColor = vec4(color, clamp(lineAlpha, 0.0, 1.0));\r
-        }\r
-    \`,\r
-            uniforms: {\r
-                uColor:  { value: new THREE.Color(def.c2) },\r
-                uColor2: { value: new THREE.Color(def.c1) },\r
-                uOpacity: { value: 1.0 },\r
-                uBeatEnergy: { value: 0 },\r
-                uHighMid: { value: 0 },\r
-                uSpectralCentroid: { value: 0 }\r
-            },\r
-            transparent: true,\r
-            depthWrite: false,\r
-            blending: THREE.AdditiveBlending\r
-        });\r
-\r
-        const connectionMesh = new THREE.LineSegments(connectionGeometry, connectionMaterial);\r
-        scene.add(connectionMesh);\r
-\r
+            // Beat pulse flash
+            float beatFlash = 1.0 + uBeatEnergy * 1.2;
+            color *= beatFlash;
+            // Per-line alpha reacts to highMid (attack/presence energy)
+            float lineAlpha = vAlpha * uOpacity * (0.4 + uHighMid * 0.5 + uBeatEnergy * 0.4);
+            gl_FragColor = vec4(color, clamp(lineAlpha, 0.0, 1.0));
+        }
+    \`,
+            uniforms: {
+                uColor:  { value: new THREE.Color(def.c2) },
+                uColor2: { value: new THREE.Color(def.c1) },
+                uOpacity: { value: 1.0 },
+                uBeatEnergy: { value: 0 },
+                uHighMid: { value: 0 },
+                uSpectralCentroid: { value: 0 }
+            },
+            transparent: true,
+            depthWrite: false,
+            blending: THREE.AdditiveBlending
+        });
+        const connectionMesh = new THREE.LineSegments(connectionGeometry, connectionMaterial);
+        scene.add(connectionMesh);
         // Particle indices to track for connections \u2014 refreshed periodically
         const trackedParticles = [];
         const positions = Array.from({ length: connectionCount }, () => new THREE.Vector3());
-        let connectionRefreshCounter = 0;\r
+        let connectionRefreshCounter = 0;
         const CONNECTION_REFRESH_INTERVAL = 40; // 20 Hz updates preserve the original ~2 s selection cycle
-\r
         function refreshTrackedParticles() {
             trackedParticles.length = 0;
             const visibleParticles = Math.max(1, geometry.drawRange.count);
@@ -7261,7 +7261,7 @@ void main() {\r
             const trackedCount = Math.max(2, Math.floor(connectionCount * Math.min(1, STATE.qualityLevel, visibleFraction)));
             for (let i = 0; i < trackedCount; i++) {
                 trackedParticles.push(Math.floor(Math.random() * visibleParticles));
-            }\r
+            }
         }
         refreshTrackedParticles();
         let lastConnectionState = null;
@@ -7274,395 +7274,395 @@ void main() {\r
             // Refresh particle selection every N frames \u2014 network evolves over time
             connectionRefreshCounter++;
             if (forceRefresh || connectionRefreshCounter >= CONNECTION_REFRESH_INTERVAL) {
-                refreshTrackedParticles();\r
-                connectionRefreshCounter = 0;\r
-            }\r
-\r
+                refreshTrackedParticles();
+                connectionRefreshCounter = 0;
+            }
             // Mirror the shader's screen-fitted seed mapping for the line systems.
             for (let i = 0; i < trackedParticles.length; i++) {
                 fieldParticlePosition(trackedParticles[i], positions[i]);
-            }\r
-\r
-            // Threshold breathes with bass, tightens on high energy\r
-            const effectiveThreshold = threshold * (1.0 + bassBoost * 0.6) * (1.0 - highMid * 0.15);\r
-            const thresholdSq = effectiveThreshold * effectiveThreshold;\r
-\r
-            // Dynamic connection cap \u2014 expands with mid+highMid energy\r
-            const dynamicMax = Math.floor(maxConnections * (0.3 + (mid + highMid) * 0.7));\r
-\r
-            let connIdx = 0;\r
+            }
+            // Threshold breathes with bass, tightens on high energy
+            const effectiveThreshold = threshold * (1.0 + bassBoost * 0.6) * (1.0 - highMid * 0.15);
+            const thresholdSq = effectiveThreshold * effectiveThreshold;
+            // Dynamic connection cap \u2014 expands with mid+highMid energy
+            const dynamicMax = Math.floor(maxConnections * (0.3 + (mid + highMid) * 0.7));
+            let connIdx = 0;
             for (let i = 0; i < trackedParticles.length && connIdx < dynamicMax; i++) {
                 for (let j = i + 1; j < trackedParticles.length && connIdx < dynamicMax; j++) {
-                    const distSq = positions[i].distanceToSquared(positions[j]);\r
-                    if (distSq < thresholdSq && distSq > 0.1) {\r
-                        const dist = Math.sqrt(distSq);\r
+                    const distSq = positions[i].distanceToSquared(positions[j]);
+                    if (distSq < thresholdSq && distSq > 0.1) {
+                        const dist = Math.sqrt(distSq);
                         const alpha = (1.0 - dist / effectiveThreshold) * 0.8;
-\r
-                        connectionPositions[connIdx * 6 + 0] = positions[i].x;\r
-                        connectionPositions[connIdx * 6 + 1] = positions[i].y;\r
-                        connectionPositions[connIdx * 6 + 2] = positions[i].z;\r
-                        connectionPositions[connIdx * 6 + 3] = positions[j].x;\r
-                        connectionPositions[connIdx * 6 + 4] = positions[j].y;\r
-                        connectionPositions[connIdx * 6 + 5] = positions[j].z;\r
-\r
-                        connectionAlphas[connIdx * 2 + 0] = alpha;\r
-                        connectionAlphas[connIdx * 2 + 1] = alpha;\r
-\r
-                        connIdx++;\r
-                    }\r
-                }\r
-            }\r
-\r
-            connectionGeometry.attributes.position.needsUpdate = true;\r
-            connectionGeometry.attributes.alpha.needsUpdate = true;\r
-            connectionGeometry.setDrawRange(0, connIdx * 2);\r
-        }\r
-\r
-        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 NETWORK CRAWLERS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\r
-        const CRAWLER_COUNT    = 24;   // concurrent crawlers\r
-        const CRAWLER_TAIL     = 10;   // trail positions per crawler\r
-        const crawlerMaxSegs   = CRAWLER_COUNT * (CRAWLER_TAIL - 1);\r
-\r
-        const crawlerGeo = new THREE.BufferGeometry();\r
-        const crawlerPos = new Float32Array(crawlerMaxSegs * 6);\r
-        const crawlerAlp = new Float32Array(crawlerMaxSegs * 2);\r
-        crawlerGeo.setAttribute('position', new THREE.BufferAttribute(crawlerPos, 3));\r
-        crawlerGeo.setAttribute('alpha',    new THREE.BufferAttribute(crawlerAlp, 1));\r
-        crawlerGeo.setDrawRange(0, 0);\r
-\r
-        const crawlerMaterial = new THREE.ShaderMaterial({\r
-            vertexShader: \`\r
-                attribute float alpha;\r
-                varying float vAlpha;\r
-                void main() {\r
-                    vAlpha = alpha;\r
-                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\r
-                }\r
-            \`,\r
-            fragmentShader: \`\r
-                uniform vec3 uColor;\r
-                uniform float uBeatEnergy;\r
-                varying float vAlpha;\r
-                void main() {\r
-                    vec3 c = uColor * (1.2 + uBeatEnergy * 1.5);\r
-                    gl_FragColor = vec4(c, vAlpha);\r
-                }\r
-            \`,\r
-            uniforms: {\r
-                uColor:      { value: new THREE.Color(def.c1) },\r
-                uBeatEnergy: { value: 0 }\r
-            },\r
-            transparent: true,\r
-            depthWrite:  false,\r
-            blending:    THREE.AdditiveBlending\r
-        });\r
-\r
-        const crawlerMesh = new THREE.LineSegments(crawlerGeo, crawlerMaterial);\r
-        scene.add(crawlerMesh);\r
-\r
-        // Initialise crawler agents\r
-        const crawlers = [];\r
-        const CRAWLER_MIN_STEP = 1.8; // min world-space distance before adding a tail point\r
-        for (let i = 0; i < CRAWLER_COUNT; i++) {\r
-            crawlers.push({\r
-                fromIdx:   Math.floor(Math.random() * connectionCount),\r
-                toIdx:     Math.floor(Math.random() * connectionCount),\r
-                t:         Math.random(),\r
-                speed:     0.0015 + Math.random() * 0.002,\r
-                tail:      [],\r
-                lastTailPos: null, // last world position a tail point was recorded\r
-                hue:       Math.random()\r
-            });\r
-        }\r
-\r
+                        connectionPositions[connIdx * 6 + 0] = positions[i].x;
+                        connectionPositions[connIdx * 6 + 1] = positions[i].y;
+                        connectionPositions[connIdx * 6 + 2] = positions[i].z;
+                        connectionPositions[connIdx * 6 + 3] = positions[j].x;
+                        connectionPositions[connIdx * 6 + 4] = positions[j].y;
+                        connectionPositions[connIdx * 6 + 5] = positions[j].z;
+                        connectionAlphas[connIdx * 2 + 0] = alpha;
+                        connectionAlphas[connIdx * 2 + 1] = alpha;
+                        connIdx++;
+                    }
+                }
+            }
+            connectionGeometry.attributes.position.needsUpdate = true;
+            connectionGeometry.attributes.alpha.needsUpdate = true;
+            connectionGeometry.setDrawRange(0, connIdx * 2);
+        }
+        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 NETWORK CRAWLERS \u2550\u2550\u2550\u2550\u2550\u2550\u2550
+        const CRAWLER_COUNT    = 24;   // concurrent crawlers
+        const CRAWLER_TAIL     = 10;   // trail positions per crawler
+        const crawlerMaxSegs   = CRAWLER_COUNT * (CRAWLER_TAIL - 1);
+        const crawlerGeo = new THREE.BufferGeometry();
+        const crawlerPos = new Float32Array(crawlerMaxSegs * 6);
+        const crawlerAlp = new Float32Array(crawlerMaxSegs * 2);
+        crawlerGeo.setAttribute('position', new THREE.BufferAttribute(crawlerPos, 3));
+        crawlerGeo.setAttribute('alpha',    new THREE.BufferAttribute(crawlerAlp, 1));
+        crawlerGeo.setDrawRange(0, 0);
+        const crawlerMaterial = new THREE.ShaderMaterial({
+            vertexShader: \`
+                attribute float alpha;
+                varying float vAlpha;
+                void main() {
+                    vAlpha = alpha;
+                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+                }
+            \`,
+            fragmentShader: \`
+                uniform vec3 uColor;
+                uniform float uBeatEnergy;
+                varying float vAlpha;
+                void main() {
+                    vec3 c = uColor * (1.2 + uBeatEnergy * 1.5);
+                    gl_FragColor = vec4(c, vAlpha);
+                }
+            \`,
+            uniforms: {
+                uColor:      { value: new THREE.Color(def.c1) },
+                uBeatEnergy: { value: 0 }
+            },
+            transparent: true,
+            depthWrite:  false,
+            blending:    THREE.AdditiveBlending
+        });
+        const crawlerMesh = new THREE.LineSegments(crawlerGeo, crawlerMaterial);
+        scene.add(crawlerMesh);
+        // Initialise crawler agents
+        const crawlers = [];
+        const CRAWLER_MIN_STEP = 1.8; // min world-space distance before adding a tail point
+        for (let i = 0; i < CRAWLER_COUNT; i++) {
+            crawlers.push({
+                fromIdx:   Math.floor(Math.random() * connectionCount),
+                toIdx:     Math.floor(Math.random() * connectionCount),
+                t:         Math.random(),
+                speed:     0.0015 + Math.random() * 0.002,
+                tail:      [],
+                lastTailPos: null, // last world position a tail point was recorded
+                hue:       Math.random()
+            });
+        }
         function updateCrawlers(dt, highMid, beatEnergy, spectralCentroid) {
             // Helper: world position of a tracked particle
             function particlePos(idx) {
                 return positions[idx % trackedParticles.length];
-            }\r
-\r
-            // Helper: find nearest neighbour within threshold\r
-            function nearestNeighbour(fromIdx, excludeIdx) {\r
-                const origin = particlePos(fromIdx);\r
-                const threshold = STATE.connectionThreshold * (1.2 + highMid * 0.4);\r
-                const threshSq  = threshold * threshold;\r
-                let bestDist = Infinity, bestIdx = -1;\r
-                const check = Math.min(trackedParticles.length, 80); // sample subset for perf\r
-                const start  = Math.floor(Math.random() * (trackedParticles.length - check));\r
-                for (let k = start; k < start + check; k++) {\r
-                    const ki = k % trackedParticles.length;\r
-                    if (ki === fromIdx || ki === excludeIdx) continue;\r
-                    const d = origin.distanceToSquared(particlePos(ki));\r
-                    if (d < threshSq && d < bestDist) { bestDist = d; bestIdx = ki; }\r
-                }\r
-                // fallback: pick random if no neighbour in range\r
-                return bestIdx === -1 ? Math.floor(Math.random() * trackedParticles.length) : bestIdx;\r
-            }\r
-\r
-            let segIdx = 0;\r
-\r
-            for (let i = 0; i < crawlers.length; i++) {\r
-                const c = crawlers[i];\r
-\r
-                // Speed reacts to highMid (attack energy) and beat\r
-                const spd = c.speed * (1.0 + highMid * 0.8 + beatEnergy * 0.5);\r
-                c.t += spd;\r
-\r
-                // Reached target \u2014 advance to next node\r
-                if (c.t >= 1.0) {\r
-                    c.t -= 1.0;\r
-                    c.fromIdx = c.toIdx;\r
-                    c.toIdx   = nearestNeighbour(c.fromIdx, c.fromIdx);\r
-                    // Occasionally teleport to keep crawlers spread across the field\r
-                    if (Math.random() < 0.04) {\r
-                        c.fromIdx    = Math.floor(Math.random() * trackedParticles.length);\r
-                        c.toIdx      = nearestNeighbour(c.fromIdx, c.fromIdx);\r
-                        c.tail       = [];\r
-                        c.lastTailPos = null;\r
-                    }\r
-                }\r
-\r
-                // Current head position\r
-                const from = particlePos(c.fromIdx);\r
-                const to   = particlePos(c.toIdx);\r
-                const head = new THREE.Vector3().lerpVectors(from, to, c.t);\r
-\r
-                // Only record a tail point when head has moved far enough in world space\r
-                const distMoved = c.lastTailPos ? head.distanceTo(c.lastTailPos) : Infinity;\r
-                if (distMoved >= CRAWLER_MIN_STEP) {\r
-                    c.tail.push(head.clone());\r
-                    if (c.tail.length > CRAWLER_TAIL) c.tail.shift();\r
-                    c.lastTailPos = head.clone();\r
-                }\r
-\r
-                // Write tail segments\r
-                const tailLen = c.tail.length;\r
-                for (let s = 0; s < tailLen - 1 && segIdx < crawlerMaxSegs; s++) {\r
-                    const p0 = c.tail[s];\r
-                    const p1 = c.tail[s + 1];\r
-                    // Alpha: head is brightest, tail fades\r
-                    const baseAlpha = ((s + 1) / (tailLen - 1));\r
-                    const alpha = baseAlpha * (0.25 + spectralCentroid * 0.3 + beatEnergy * 0.4);\r
-\r
-                    crawlerPos[segIdx * 6 + 0] = p0.x; crawlerPos[segIdx * 6 + 1] = p0.y; crawlerPos[segIdx * 6 + 2] = p0.z;\r
-                    crawlerPos[segIdx * 6 + 3] = p1.x; crawlerPos[segIdx * 6 + 4] = p1.y; crawlerPos[segIdx * 6 + 5] = p1.z;\r
-                    crawlerAlp[segIdx * 2 + 0] = alpha;\r
-                    crawlerAlp[segIdx * 2 + 1] = alpha;\r
-                    segIdx++;\r
-                }\r
-            }\r
-\r
-            crawlerGeo.attributes.position.needsUpdate = true;\r
-            crawlerGeo.attributes.alpha.needsUpdate    = true;\r
-            crawlerGeo.setDrawRange(0, segIdx * 2);\r
-        }\r
-\r
-        STATE.crawlersEnabled = true;\r
-\r
-        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEBULA BACKGROUND \u2550\u2550\u2550\u2550\u2550\u2550\u2550\r
-        const nebulaVertexShader = \`\r
-varying vec3 vWorldPosition;\r
-varying vec2 vUv;\r
-void main() {\r
-    vUv = uv;\r
-    vec4 worldPos = modelMatrix * vec4(position, 1.0);\r
-    vWorldPosition = worldPos.xyz;\r
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\r
-}\r
-\`;\r
-\r
-        const nebulaFragmentShader = \`\r
-uniform float uTime;\r
-uniform vec3 uColor1;\r
-uniform vec3 uColor2;\r
-uniform vec3 uColor3;\r
-uniform float uBass;\r
-uniform float uMid;\r
-uniform float uHigh;\r
-uniform float uBeatEnergy;\r
-uniform float uIntensity;\r
-varying vec3 vWorldPosition;\r
-varying vec2 vUv;\r
-\r
-// Simplex 3D noise\r
-vec4 permute(vec4 x) { return mod(((x*34.0)+1.0)*x, 289.0); }\r
-vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\r
-\r
-float snoise(vec3 v) {\r
-    const vec2 C = vec2(1.0/6.0, 1.0/3.0);\r
-    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\r
-    vec3 i = floor(v + dot(v, C.yyy));\r
-    vec3 x0 = v - i + dot(i, C.xxx);\r
-    vec3 g = step(x0.yzx, x0.xyz);\r
-    vec3 l = 1.0 - g;\r
-    vec3 i1 = min(g.xyz, l.zxy);\r
-    vec3 i2 = max(g.xyz, l.zxy);\r
-    vec3 x1 = x0 - i1 + C.xxx;\r
-    vec3 x2 = x0 - i2 + C.yyy;\r
-    vec3 x3 = x0 - D.yyy;\r
-    i = mod(i, 289.0);\r
-    vec4 p = permute(permute(permute(i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0));\r
-    float n_ = 1.0/7.0;\r
-    vec3 ns = n_ * D.wyz - D.xzx;\r
-    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);\r
-    vec4 x_ = floor(j * ns.z);\r
-    vec4 y_ = floor(j - 7.0 * x_);\r
-    vec4 x = x_ *ns.x + ns.yyyy;\r
-    vec4 y = y_ *ns.x + ns.yyyy;\r
-    vec4 h = 1.0 - abs(x) - abs(y);\r
-    vec4 b0 = vec4(x.xy, y.xy);\r
-    vec4 b1 = vec4(x.zw, y.zw);\r
-    vec4 s0 = floor(b0)*2.0 + 1.0;\r
-    vec4 s1 = floor(b1)*2.0 + 1.0;\r
-    vec4 sh = -step(h, vec4(0.0));\r
-    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;\r
-    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;\r
-    vec3 p0 = vec3(a0.xy, h.x);\r
-    vec3 p1 = vec3(a0.zw, h.y);\r
-    vec3 p2 = vec3(a1.xy, h.z);\r
-    vec3 p3 = vec3(a1.zw, h.w);\r
-    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));\r
-    p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;\r
-    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\r
-    return 42.0 * dot(m*m*m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));\r
-}\r
-\r
-float fbm(vec3 p) {\r
-    float value = 0.0;\r
-    float amplitude = 0.5;\r
-    float frequency = 1.0;\r
-    for(int i = 0; i < 3; i++) {\r
-        value += amplitude * snoise(p * frequency);\r
-        amplitude *= 0.5;\r
-        frequency *= 2.0;\r
-    }\r
-    return value;\r
-}\r
-\r
-void main() {\r
-    vec3 dir = normalize(vWorldPosition);\r
-    float t = uTime * 0.02;\r
-\r
-    // Layered nebula clouds\r
-    vec3 p1 = dir * 2.0 + t * 0.5;\r
-    vec3 p2 = dir * 4.0 - t * 0.3;\r
-    vec3 p3 = dir * 1.5 + vec3(t * 0.2, -t * 0.1, t * 0.15);\r
-\r
-    float n1 = fbm(p1) * 0.5 + 0.5;\r
-    float n2 = fbm(p2) * 0.5 + 0.5;\r
-    float n3 = fbm(p3) * 0.5 + 0.5;\r
-\r
-    // Create cloud density\r
-    float density = n1 * n2;\r
-    density = pow(density, 1.5) * 1.5;\r
-\r
-    // Wispy tendrils\r
-    float tendrils = pow(n3, 3.0) * 0.8;\r
-\r
-    // Color mixing based on field colors\r
-    vec3 nebulaColor = mix(uColor1 * 0.3, uColor2 * 0.5, n1);\r
-    nebulaColor = mix(nebulaColor, uColor3 * 0.4, n2 * 0.5);\r
-\r
-    // Add some complementary deep space colors\r
-    vec3 deepSpace = vec3(0.02, 0.01, 0.05);\r
-    vec3 starGlow = vec3(0.1, 0.08, 0.15);\r
-\r
-    // Audio reactivity\r
-    float bassGlow = uBass * 0.3;\r
-    float midShimmer = uMid * 0.2 * sin(uTime * 2.0 + n1 * 10.0);\r
-    float beatPulse = uBeatEnergy * 0.4;\r
-\r
-    // Combine layers\r
-    vec3 color = deepSpace;\r
-    color += nebulaColor * density * (0.4 + bassGlow + beatPulse);\r
-    color += uColor2 * 0.15 * tendrils * (1.0 + uHigh * 0.5);\r
-    color += starGlow * pow(n1 * n2, 4.0) * (1.0 + midShimmer);\r
-\r
-    // Scattered stars\r
-    float stars = pow(snoise(dir * 50.0) * 0.5 + 0.5, 20.0);\r
-    stars += pow(snoise(dir * 80.0 + 100.0) * 0.5 + 0.5, 25.0) * 0.5;\r
-    color += vec3(1.0, 0.95, 0.9) * stars * (0.5 + uHigh * 0.5);\r
-\r
-    // Vignette toward horizon\r
-    float horizonFade = 1.0 - pow(abs(dir.y), 0.5) * 0.3;\r
-    color *= horizonFade;\r
-\r
-    // Apply intensity\r
-    color *= uIntensity;\r
-\r
-    gl_FragColor = vec4(color, 1.0);\r
-}\r
-\`;\r
-\r
-        const nebulaMaterial = new THREE.ShaderMaterial({\r
-            vertexShader: nebulaVertexShader,\r
-            fragmentShader: nebulaFragmentShader,\r
-            uniforms: {\r
-                uTime: { value: 0 },\r
-                uColor1: { value: new THREE.Color(def.c1) },\r
-                uColor2: { value: new THREE.Color(def.c2) },\r
-                uColor3: { value: new THREE.Color(def.c3) },\r
-                uBass: { value: 0 },\r
-                uMid: { value: 0 },\r
-                uHigh: { value: 0 },\r
-                uBeatEnergy: { value: 0 },\r
-                uIntensity: { value: STATE.nebulaIntensity }\r
-            },\r
-            side: THREE.BackSide,\r
-            depthWrite: false\r
-        });\r
-\r
-        const nebulaSphere = new THREE.Mesh(\r
-            new THREE.SphereGeometry(500, 64, 64),\r
-            nebulaMaterial\r
-        );\r
-        scene.add(nebulaSphere);\r
-\r
-        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 POST-PROCESSING COMPOSER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\r
-        const composer = new EffectComposer(renderer);\r
-        composer.addPass(new RenderPass(scene, camera));\r
-\r
-        const afterimagePass = new AfterimagePass();\r
-        afterimagePass.uniforms['damp'].value = STATE.trails;\r
-        composer.addPass(afterimagePass);\r
-\r
-        const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);\r
-        bloomPass.threshold = 0.25;\r
-        bloomPass.strength = STATE.bloom;\r
-        bloomPass.radius = 0.45;\r
-        composer.addPass(bloomPass);\r
-\r
-        const godRaysPass = new ShaderPass(GodRaysShader);\r
-        godRaysPass.enabled = false;\r
-        composer.addPass(godRaysPass);\r
-\r
+            }
+            // Helper: find nearest neighbour within threshold
+            function nearestNeighbour(fromIdx, excludeIdx) {
+                const origin = particlePos(fromIdx);
+                const threshold = STATE.connectionThreshold * (1.2 + highMid * 0.4);
+                const threshSq  = threshold * threshold;
+                let bestDist = Infinity, bestIdx = -1;
+                const check = Math.min(trackedParticles.length, 80); // sample subset for perf
+                const start  = Math.floor(Math.random() * (trackedParticles.length - check));
+                for (let k = start; k < start + check; k++) {
+                    const ki = k % trackedParticles.length;
+                    if (ki === fromIdx || ki === excludeIdx) continue;
+                    const d = origin.distanceToSquared(particlePos(ki));
+                    if (d < threshSq && d < bestDist) { bestDist = d; bestIdx = ki; }
+                }
+                // fallback: pick random if no neighbour in range
+                return bestIdx === -1 ? Math.floor(Math.random() * trackedParticles.length) : bestIdx;
+            }
+            let segIdx = 0;
+            for (let i = 0; i < crawlers.length; i++) {
+                const c = crawlers[i];
+                // Speed reacts to highMid (attack energy) and beat
+                const spd = c.speed * (1.0 + highMid * 0.8 + beatEnergy * 0.5);
+                c.t += spd;
+                // Reached target \u2014 advance to next node
+                if (c.t >= 1.0) {
+                    c.t -= 1.0;
+                    c.fromIdx = c.toIdx;
+                    c.toIdx   = nearestNeighbour(c.fromIdx, c.fromIdx);
+                    // Occasionally teleport to keep crawlers spread across the field
+                    if (Math.random() < 0.04) {
+                        c.fromIdx    = Math.floor(Math.random() * trackedParticles.length);
+                        c.toIdx      = nearestNeighbour(c.fromIdx, c.fromIdx);
+                        c.tail       = [];
+                        c.lastTailPos = null;
+                    }
+                }
+                // Current head position
+                const from = particlePos(c.fromIdx);
+                const to   = particlePos(c.toIdx);
+                const head = new THREE.Vector3().lerpVectors(from, to, c.t);
+                // Only record a tail point when head has moved far enough in world space
+                const distMoved = c.lastTailPos ? head.distanceTo(c.lastTailPos) : Infinity;
+                if (distMoved >= CRAWLER_MIN_STEP) {
+                    c.tail.push(head.clone());
+                    if (c.tail.length > CRAWLER_TAIL) c.tail.shift();
+                    c.lastTailPos = head.clone();
+                }
+                // Write tail segments
+                const tailLen = c.tail.length;
+                for (let s = 0; s < tailLen - 1 && segIdx < crawlerMaxSegs; s++) {
+                    const p0 = c.tail[s];
+                    const p1 = c.tail[s + 1];
+                    // Alpha: head is brightest, tail fades
+                    const baseAlpha = ((s + 1) / (tailLen - 1));
+                    const alpha = baseAlpha * (0.25 + spectralCentroid * 0.3 + beatEnergy * 0.4);
+                    crawlerPos[segIdx * 6 + 0] = p0.x; crawlerPos[segIdx * 6 + 1] = p0.y; crawlerPos[segIdx * 6 + 2] = p0.z;
+                    crawlerPos[segIdx * 6 + 3] = p1.x; crawlerPos[segIdx * 6 + 4] = p1.y; crawlerPos[segIdx * 6 + 5] = p1.z;
+                    crawlerAlp[segIdx * 2 + 0] = alpha;
+                    crawlerAlp[segIdx * 2 + 1] = alpha;
+                    segIdx++;
+                }
+            }
+            crawlerGeo.attributes.position.needsUpdate = true;
+            crawlerGeo.attributes.alpha.needsUpdate    = true;
+            crawlerGeo.setDrawRange(0, segIdx * 2);
+        }
+        STATE.crawlersEnabled = true;
+        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEBULA BACKGROUND \u2550\u2550\u2550\u2550\u2550\u2550\u2550
+        const nebulaVertexShader = \`
+varying vec3 vWorldPosition;
+varying vec2 vUv;
+void main() {
+    vUv = uv;
+    vec4 worldPos = modelMatrix * vec4(position, 1.0);
+    vWorldPosition = worldPos.xyz;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+\`;
+        const nebulaFragmentShader = \`
+uniform float uTime;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
+uniform float uBass;
+uniform float uMid;
+uniform float uHigh;
+uniform float uBeatEnergy;
+uniform float uIntensity;
+varying vec3 vWorldPosition;
+varying vec2 vUv;
+// Simplex 3D noise
+vec4 permute(vec4 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
+vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+float snoise(vec3 v) {
+    const vec2 C = vec2(1.0/6.0, 1.0/3.0);
+    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
+    vec3 i = floor(v + dot(v, C.yyy));
+    vec3 x0 = v - i + dot(i, C.xxx);
+    vec3 g = step(x0.yzx, x0.xyz);
+    vec3 l = 1.0 - g;
+    vec3 i1 = min(g.xyz, l.zxy);
+    vec3 i2 = max(g.xyz, l.zxy);
+    vec3 x1 = x0 - i1 + C.xxx;
+    vec3 x2 = x0 - i2 + C.yyy;
+    vec3 x3 = x0 - D.yyy;
+    i = mod(i, 289.0);
+    vec4 p = permute(permute(permute(i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0));
+    float n_ = 1.0/7.0;
+    vec3 ns = n_ * D.wyz - D.xzx;
+    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+    vec4 x_ = floor(j * ns.z);
+    vec4 y_ = floor(j - 7.0 * x_);
+    vec4 x = x_ *ns.x + ns.yyyy;
+    vec4 y = y_ *ns.x + ns.yyyy;
+    vec4 h = 1.0 - abs(x) - abs(y);
+    vec4 b0 = vec4(x.xy, y.xy);
+    vec4 b1 = vec4(x.zw, y.zw);
+    vec4 s0 = floor(b0)*2.0 + 1.0;
+    vec4 s1 = floor(b1)*2.0 + 1.0;
+    vec4 sh = -step(h, vec4(0.0));
+    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;
+    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;
+    vec3 p0 = vec3(a0.xy, h.x);
+    vec3 p1 = vec3(a0.zw, h.y);
+    vec3 p2 = vec3(a1.xy, h.z);
+    vec3 p3 = vec3(a1.zw, h.w);
+    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));
+    p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;
+    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+    return 42.0 * dot(m*m*m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));
+}
+float fbm(vec3 p) {
+    float value = 0.0;
+    float amplitude = 0.5;
+    float frequency = 1.0;
+    for(int i = 0; i < 3; i++) {
+        value += amplitude * snoise(p * frequency);
+        amplitude *= 0.5;
+        frequency *= 2.0;
+    }
+    return value;
+}
+void main() {
+    vec3 dir = normalize(vWorldPosition);
+    float t = uTime * 0.02;
+    // Layered nebula clouds
+    vec3 p1 = dir * 2.0 + t * 0.5;
+    vec3 p2 = dir * 4.0 - t * 0.3;
+    vec3 p3 = dir * 1.5 + vec3(t * 0.2, -t * 0.1, t * 0.15);
+    float n1 = fbm(p1) * 0.5 + 0.5;
+    float n2 = fbm(p2) * 0.5 + 0.5;
+    float n3 = fbm(p3) * 0.5 + 0.5;
+    // Create cloud density
+    float density = n1 * n2;
+    density = pow(density, 1.5) * 1.5;
+    // Wispy tendrils
+    float tendrils = pow(n3, 3.0) * 0.8;
+    // Color mixing based on field colors
+    vec3 nebulaColor = mix(uColor1 * 0.3, uColor2 * 0.5, n1);
+    nebulaColor = mix(nebulaColor, uColor3 * 0.4, n2 * 0.5);
+    // Add some complementary deep space colors
+    vec3 deepSpace = vec3(0.02, 0.01, 0.05);
+    vec3 starGlow = vec3(0.1, 0.08, 0.15);
+    // Audio reactivity
+    float bassGlow = uBass * 0.3;
+    float midShimmer = uMid * 0.2 * sin(uTime * 2.0 + n1 * 10.0);
+    float beatPulse = uBeatEnergy * 0.4;
+    // Combine layers
+    vec3 color = deepSpace;
+    color += nebulaColor * density * (0.4 + bassGlow + beatPulse);
+    color += uColor2 * 0.15 * tendrils * (1.0 + uHigh * 0.5);
+    color += starGlow * pow(n1 * n2, 4.0) * (1.0 + midShimmer);
+    // Scattered stars
+    float stars = pow(snoise(dir * 50.0) * 0.5 + 0.5, 20.0);
+    stars += pow(snoise(dir * 80.0 + 100.0) * 0.5 + 0.5, 25.0) * 0.5;
+    color += vec3(1.0, 0.95, 0.9) * stars * (0.5 + uHigh * 0.5);
+    // Vignette toward horizon
+    float horizonFade = 1.0 - pow(abs(dir.y), 0.5) * 0.3;
+    color *= horizonFade;
+    // Apply intensity
+    color *= uIntensity;
+    gl_FragColor = vec4(color, 1.0);
+}
+\`;
+        const nebulaMaterial = new THREE.ShaderMaterial({
+            vertexShader: nebulaVertexShader,
+            fragmentShader: nebulaFragmentShader,
+            uniforms: {
+                uTime: { value: 0 },
+                uColor1: { value: new THREE.Color(def.c1) },
+                uColor2: { value: new THREE.Color(def.c2) },
+                uColor3: { value: new THREE.Color(def.c3) },
+                uBass: { value: 0 },
+                uMid: { value: 0 },
+                uHigh: { value: 0 },
+                uBeatEnergy: { value: 0 },
+                uIntensity: { value: STATE.nebulaIntensity }
+            },
+            side: THREE.BackSide,
+            depthWrite: false
+        });
+        const nebulaSphere = new THREE.Mesh(
+            new THREE.SphereGeometry(500, 64, 64),
+            nebulaMaterial
+        );
+        scene.add(nebulaSphere);
+        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 POST-PROCESSING COMPOSER \u2550\u2550\u2550\u2550\u2550\u2550\u2550
+        const composer = new EffectComposer(renderer);
+        composer.addPass(new RenderPass(scene, camera));
+        const afterimagePass = new AfterimagePass();
+        afterimagePass.uniforms['damp'].value = STATE.trails;
+        composer.addPass(afterimagePass);
+        const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
+        bloomPass.threshold = 0.25;
+        bloomPass.strength = STATE.bloom;
+        bloomPass.radius = 0.45;
+        composer.addPass(bloomPass);
+        const godRaysPass = new ShaderPass(GodRaysShader);
+        godRaysPass.enabled = false;
+        composer.addPass(godRaysPass);
         const lensFlarePass = new ShaderPass(LensFlareShader);
         lensFlarePass.enabled = STATE.lensFlareEnabled && STATE.lensFlareIntensity > 0;
-        composer.addPass(lensFlarePass);\r
-\r
-        const anamorphicPass = new ShaderPass(AnamorphicShader);\r
-        composer.addPass(anamorphicPass);\r
-\r
+        composer.addPass(lensFlarePass);
+        const anamorphicPass = new ShaderPass(AnamorphicShader);
+        composer.addPass(anamorphicPass);
         const chromaticPass = new ShaderPass(ChromaticShader);
         chromaticPass.enabled = STATE.chromaticAberration > 0;
         composer.addPass(chromaticPass);
-\r
-        // Custom DOF pass (radial focus)\r
-        const customDOFPass = new ShaderPass(CustomDOFShader);\r
-        customDOFPass.uniforms.uFocus.value = STATE.dofFocus;\r
-        customDOFPass.uniforms.uFocalLength.value = STATE.dofFocalLength;\r
-        customDOFPass.uniforms.uBokehStrength.value = STATE.dofBokehStrength;\r
-        customDOFPass.uniforms.uResolution.value.set(window.innerWidth, window.innerHeight);\r
-        customDOFPass.enabled = STATE.dofEnabled;\r
-        composer.addPass(customDOFPass);\r
-\r
-        const vignettePass = new ShaderPass(VignetteShader);\r
-        composer.addPass(vignettePass);\r
-\r
+        // Custom DOF pass (radial focus)
+        const customDOFPass = new ShaderPass(CustomDOFShader);
+        customDOFPass.uniforms.uFocus.value = STATE.dofFocus;
+        customDOFPass.uniforms.uFocalLength.value = STATE.dofFocalLength;
+        customDOFPass.uniforms.uBokehStrength.value = STATE.dofBokehStrength;
+        customDOFPass.uniforms.uResolution.value.set(window.innerWidth, window.innerHeight);
+        customDOFPass.enabled = STATE.dofEnabled;
+        composer.addPass(customDOFPass);
+        const vignettePass = new ShaderPass(VignetteShader);
+        composer.addPass(vignettePass);
         const grainPass = new ShaderPass(GrainShader);
         grainPass.enabled = STATE.filmGrain > 0;
         composer.addPass(grainPass);
-\r
         const AlphaFromLumaShader = {
             uniforms: { tDiffuse: { value: null } },
             vertexShader: \`varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }\`,
@@ -7676,7 +7676,7 @@ void main() {\r
         };
         composer.addPass(new OutputPass());
         composer.addPass(new ShaderPass(AlphaFromLumaShader));
-\r
         // Keep the embedded CSS accents aligned with the kit palette.
         function applyCssTheme(accent) {
             const luminance = accent.r * 0.299 + accent.g * 0.587 + accent.b * 0.114;
@@ -7688,51 +7688,51 @@ void main() {\r
         applyCssTheme(new THREE.Color(def.c1));
         // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 UI & EVENTS \u2550\u2550\u2550\u2550\u2550\u2550\u2550
-        const overlay = document.getElementById('overlay');\r
-        const audioControls = document.getElementById('audio-controls');\r
-        const playPauseBtn = document.getElementById('play-pause-btn');\r
-        const progressBar = document.getElementById('progress-bar');\r
-        const progressContainer = document.getElementById('progress-container');\r
-        const timeDisplay = document.getElementById('time-display');\r
-        const trackName = document.getElementById('track-name');\r
-        const status = document.getElementById('status-bar');\r
-\r
-        const formatTime = s => \`\${Math.floor(s / 60)}:\${Math.floor(s % 60).toString().padStart(2, '0')}\`;\r
-\r
-        function updateUI() {\r
-            if (AUDIO.mode === 'mic') {\r
-                playPauseBtn.textContent = '\u{1F399} live';\r
-                playPauseBtn.disabled = true;\r
-            } else {\r
-                playPauseBtn.textContent = AUDIO.isPlaying ? '\u23F8 pause' : '\u25B6 play';\r
-                playPauseBtn.classList.toggle('playing', AUDIO.isPlaying);\r
-                playPauseBtn.disabled = false;\r
-            }\r
-            if (AUDIO.mode === 'file' && AUDIO.audioBuffer) {\r
-                const cur = AUDIO.getCurrentTime(), dur = AUDIO.getDuration();\r
-                progressBar.style.width = (cur / dur * 100) + '%';\r
-                timeDisplay.textContent = \`\${formatTime(cur)} / \${formatTime(dur)}\`;\r
-            } else {\r
-                progressBar.style.width = '0%';\r
-                timeDisplay.textContent = AUDIO.mode === 'mic' ? 'LIVE' : '0:00 / 0:00';\r
-            }\r
-        }\r
-\r
-        function togglePlayPause() {\r
-            if (AUDIO.mode !== 'file') return;\r
-            AUDIO.togglePlayPause();\r
-            updateUI();\r
-            status.innerHTML = AUDIO.isPlaying ? 'SYSTEM: <span>PLAYING</span>' : 'SYSTEM: <span>PAUSED</span>';\r
-        }\r
-\r
-        function activate() {\r
-            AUDIO.init();\r
-            if (AUDIO.ctx.state === 'suspended') AUDIO.ctx.resume();\r
-            overlay.style.opacity = 0;\r
-            setTimeout(() => overlay.style.display = 'none', 800);\r
-            audioControls.classList.add('visible');\r
-        }\r
-\r
+        const overlay = document.getElementById('overlay');
+        const audioControls = document.getElementById('audio-controls');
+        const playPauseBtn = document.getElementById('play-pause-btn');
+        const progressBar = document.getElementById('progress-bar');
+        const progressContainer = document.getElementById('progress-container');
+        const timeDisplay = document.getElementById('time-display');
+        const trackName = document.getElementById('track-name');
+        const status = document.getElementById('status-bar');
+        const formatTime = s => \`\${Math.floor(s / 60)}:\${Math.floor(s % 60).toString().padStart(2, '0')}\`;
+        function updateUI() {
+            if (AUDIO.mode === 'mic') {
+                playPauseBtn.textContent = '\u{1F399} live';
+                playPauseBtn.disabled = true;
+            } else {
+                playPauseBtn.textContent = AUDIO.isPlaying ? '\u23F8 pause' : '\u25B6 play';
+                playPauseBtn.classList.toggle('playing', AUDIO.isPlaying);
+                playPauseBtn.disabled = false;
+            }
+            if (AUDIO.mode === 'file' && AUDIO.audioBuffer) {
+                const cur = AUDIO.getCurrentTime(), dur = AUDIO.getDuration();
+                progressBar.style.width = (cur / dur * 100) + '%';
+                timeDisplay.textContent = \`\${formatTime(cur)} / \${formatTime(dur)}\`;
+            } else {
+                progressBar.style.width = '0%';
+                timeDisplay.textContent = AUDIO.mode === 'mic' ? 'LIVE' : '0:00 / 0:00';
+            }
+        }
+        function togglePlayPause() {
+            if (AUDIO.mode !== 'file') return;
+            AUDIO.togglePlayPause();
+            updateUI();
+            status.innerHTML = AUDIO.isPlaying ? 'SYSTEM: <span>PLAYING</span>' : 'SYSTEM: <span>PAUSED</span>';
+        }
+        function activate() {
+            AUDIO.init();
+            if (AUDIO.ctx.state === 'suspended') AUDIO.ctx.resume();
+            overlay.style.opacity = 0;
+            setTimeout(() => overlay.style.display = 'none', 800);
+            audioControls.classList.add('visible');
+        }
         async function loadTrack(file) {
             activate();
             const buffer = await AUDIO.loadTrack(await file.arrayBuffer(), file.name);
@@ -7748,52 +7748,52 @@ void main() {\r
             });
             parent.postMessage({ type: 'ad-qf-waveform', value: peaks }, '*');
             AUDIO.play();
-            trackName.textContent = file.name.length > 25 ? file.name.slice(0, 22) + '...' : file.name;\r
-            updateUI();\r
-            status.innerHTML = 'SYSTEM: <span>PLAYING</span>';\r
-        }\r
-\r
-        async function startMic(preferredLabel = null) {\r
-            console.log('Global startMic requested:', preferredLabel);\r
-            try {\r
-                activate();\r
-                await AUDIO.startMic(preferredLabel);\r
-                trackName.textContent = AUDIO.currentTrackName;\r
-                updateUI();\r
-                // status update handled in AUDIO.startMic\r
-            } catch (e) {\r
-                console.error("Global startMic failed:", e);\r
-                const status = document.getElementById('status-bar');\r
-                status.innerHTML = \`ERROR: <span style="color:#ff6b6b">\${e.message}</span>\`;\r
-            }\r
-        }\r
-\r
-        // Using optional chaining/checks because one input was replaced by a button\r
-        const enterBtn = document.getElementById('enter-btn');\r
-        if (enterBtn) enterBtn.onclick = () => startMic(null);\r
-\r
-        const fileInput = document.getElementById('file-input');\r
-        if (fileInput) fileInput.onchange = e => e.target.files[0] && loadTrack(e.target.files[0]);\r
-\r
-        document.getElementById('file-input-2').onchange = e => { if (e.target.files[0]) loadTrack(e.target.files[0]); e.target.value = ''; };\r
-        document.getElementById('mic-btn-2').onclick = () => startMic(null);\r
-        playPauseBtn.onclick = togglePlayPause;\r
-        progressContainer.onclick = e => {\r
-            if (AUDIO.mode !== 'file' || !AUDIO.audioBuffer) return;\r
-            const rect = progressContainer.getBoundingClientRect();\r
-            AUDIO.seek((e.clientX - rect.left) / rect.width * AUDIO.getDuration());\r
-        };\r
-        document.getElementById('screenshot-btn')?.addEventListener('click', () => {\r
-            composer.render();\r
-            const a = document.createElement('a');\r
-            a.download = 'quantum-' + Date.now() + '.png';\r
-            a.href = renderer.domElement.toDataURL('image/png');\r
-            a.click();\r
-        });\r
-        document.getElementById('fullscreen-btn')?.addEventListener('click', () => {\r
-            document.fullscreenElement ? document.exitFullscreen() : document.documentElement.requestFullscreen();\r
-        });\r
-\r
+            trackName.textContent = file.name.length > 25 ? file.name.slice(0, 22) + '...' : file.name;
+            updateUI();
+            status.innerHTML = 'SYSTEM: <span>PLAYING</span>';
+        }
+        async function startMic(preferredLabel = null) {
+            console.log('Global startMic requested:', preferredLabel);
+            try {
+                activate();
+                await AUDIO.startMic(preferredLabel);
+                trackName.textContent = AUDIO.currentTrackName;
+                updateUI();
+                // status update handled in AUDIO.startMic
+            } catch (e) {
+                console.error("Global startMic failed:", e);
+                const status = document.getElementById('status-bar');
+                status.innerHTML = \`ERROR: <span style="color:#ff6b6b">\${e.message}</span>\`;
+            }
+        }
+        // Using optional chaining/checks because one input was replaced by a button
+        const enterBtn = document.getElementById('enter-btn');
+        if (enterBtn) enterBtn.onclick = () => startMic(null);
+        const fileInput = document.getElementById('file-input');
+        if (fileInput) fileInput.onchange = e => e.target.files[0] && loadTrack(e.target.files[0]);
+        document.getElementById('file-input-2').onchange = e => { if (e.target.files[0]) loadTrack(e.target.files[0]); e.target.value = ''; };
+        document.getElementById('mic-btn-2').onclick = () => startMic(null);
+        playPauseBtn.onclick = togglePlayPause;
+        progressContainer.onclick = e => {
+            if (AUDIO.mode !== 'file' || !AUDIO.audioBuffer) return;
+            const rect = progressContainer.getBoundingClientRect();
+            AUDIO.seek((e.clientX - rect.left) / rect.width * AUDIO.getDuration());
+        };
+        document.getElementById('screenshot-btn')?.addEventListener('click', () => {
+            composer.render();
+            const a = document.createElement('a');
+            a.download = 'quantum-' + Date.now() + '.png';
+            a.href = renderer.domElement.toDataURL('image/png');
+            a.click();
+        });
+        document.getElementById('fullscreen-btn')?.addEventListener('click', () => {
+            document.fullscreenElement ? document.exitFullscreen() : document.documentElement.requestFullscreen();
+        });
         // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 ANIMATION LOOP \u2550\u2550\u2550\u2550\u2550\u2550\u2550
         let renderVisible = true;
         let connectionElapsed = 1 / 20;
@@ -7829,60 +7829,60 @@ void main() {\r
             const dt = lastRenderedAt < 0 ? 0 : Math.min((now - lastRenderedAt) / 1000, 0.05);
             lastRenderedAt = now;
             elapsed += dt;
-\r
-            material.uniforms.uTime.value += dt * STATE.timeScale;\r
-            grainPass.uniforms.uTime.value = elapsed;\r
-            lensFlarePass.uniforms.uTime.value = elapsed;\r
-\r
-            material.uniforms.uZoomFactor.value = camera.position.length() / CONFIG.defaultZoom;\r
-            material.uniforms.uMousePos.value.lerp(mouseWorldPos, 0.1);\r
-            material.uniforms.uMouseVelocity.value.lerp(mouseVelocity, 0.08);\r
-\r
+            material.uniforms.uTime.value += dt * STATE.timeScale;
+            grainPass.uniforms.uTime.value = elapsed;
+            lensFlarePass.uniforms.uTime.value = elapsed;
+            material.uniforms.uZoomFactor.value = camera.position.length() / CONFIG.defaultZoom;
+            material.uniforms.uMousePos.value.lerp(mouseWorldPos, 0.1);
+            material.uniforms.uMouseVelocity.value.lerp(mouseVelocity, 0.08);
             AUDIO.update();
-\r
-            const s = STATE.sensitivity, lf = 0.16;\r
-            material.uniforms.uSubBass.value = THREE.MathUtils.lerp(material.uniforms.uSubBass.value, AUDIO.gatedBands.subBass * s, lf);\r
-            material.uniforms.uBass.value = THREE.MathUtils.lerp(material.uniforms.uBass.value, AUDIO.gatedBands.bass * s, lf);\r
-            material.uniforms.uLowMid.value = THREE.MathUtils.lerp(material.uniforms.uLowMid.value, AUDIO.gatedBands.lowMid * s, lf);\r
-            material.uniforms.uMid.value = THREE.MathUtils.lerp(material.uniforms.uMid.value, AUDIO.gatedBands.mid * s, lf);\r
-            material.uniforms.uHighMid.value = THREE.MathUtils.lerp(material.uniforms.uHighMid.value, AUDIO.gatedBands.highMid * s, lf);\r
-            material.uniforms.uHigh.value = THREE.MathUtils.lerp(material.uniforms.uHigh.value, AUDIO.gatedBands.high * s, lf);\r
-            material.uniforms.uUltraHigh.value = THREE.MathUtils.lerp(material.uniforms.uUltraHigh.value, AUDIO.gatedBands.ultraHigh * s, lf);\r
-            material.uniforms.uBeatEnergy.value = THREE.MathUtils.lerp(material.uniforms.uBeatEnergy.value, AUDIO.beatEnergy, 0.22);\r
-            material.uniforms.uSpectralCentroid.value = THREE.MathUtils.lerp(material.uniforms.uSpectralCentroid.value, AUDIO.spectralCentroid, lf);\r
-            material.uniforms.uSpectralFlux.value = THREE.MathUtils.lerp(material.uniforms.uSpectralFlux.value, AUDIO.spectralFlux * s, lf);\r
-\r
-            // === ENHANCEMENT: Update new uniforms ===\r
-            material.uniforms.uOnsetEnergy.value = THREE.MathUtils.lerp(material.uniforms.uOnsetEnergy.value, AUDIO.onsetEnergy, 0.25);\r
-            material.uniforms.uTerrainMode.value = FIELD_TYPES[STATE.field]?.terrain ? 1.0 : 0.0;\r
-            material.uniforms.uTerrainHeight.value = STATE.waveformTerrainHeight;\r
-\r
-            // Update secondary particles\r
-            secondaryPoints.visible = STATE.secondaryEnabled;\r
-            secondaryMaterial.uniforms.uTime.value             = material.uniforms.uTime.value;\r
-            secondaryMaterial.uniforms.uSubBass.value          = material.uniforms.uSubBass.value;\r
-            secondaryMaterial.uniforms.uBass.value             = material.uniforms.uBass.value;\r
-            secondaryMaterial.uniforms.uLowMid.value           = material.uniforms.uLowMid.value;\r
-            secondaryMaterial.uniforms.uMid.value              = material.uniforms.uMid.value;\r
-            secondaryMaterial.uniforms.uHighMid.value          = material.uniforms.uHighMid.value;\r
-            secondaryMaterial.uniforms.uHigh.value             = material.uniforms.uHigh.value;\r
-            secondaryMaterial.uniforms.uUltraHigh.value        = material.uniforms.uUltraHigh.value;\r
-            secondaryMaterial.uniforms.uBeatEnergy.value       = material.uniforms.uBeatEnergy.value;\r
-            secondaryMaterial.uniforms.uSpectralCentroid.value = material.uniforms.uSpectralCentroid.value;\r
-            secondaryMaterial.uniforms.uSpectralFlux.value     = material.uniforms.uSpectralFlux.value;\r
-            secondaryMaterial.uniforms.uOnsetEnergy.value      = material.uniforms.uOnsetEnergy.value;\r
-            secondaryMaterial.uniforms.uVortexStrength.value   = STATE.vortexStrength;\r
-\r
-            // Update nebula background\r
-            nebulaSphere.visible = STATE.nebulaEnabled;\r
-            if (STATE.nebulaEnabled) {\r
-                nebulaMaterial.uniforms.uTime.value = material.uniforms.uTime.value;\r
-                nebulaMaterial.uniforms.uBass.value = material.uniforms.uBass.value;\r
-                nebulaMaterial.uniforms.uMid.value = material.uniforms.uMid.value;\r
-                nebulaMaterial.uniforms.uHigh.value = material.uniforms.uHigh.value;\r
-                nebulaMaterial.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\r
-            }\r
-\r
+            const s = STATE.sensitivity, lf = 0.16;
+            material.uniforms.uSubBass.value = THREE.MathUtils.lerp(material.uniforms.uSubBass.value, AUDIO.gatedBands.subBass * s, lf);
+            material.uniforms.uBass.value = THREE.MathUtils.lerp(material.uniforms.uBass.value, AUDIO.gatedBands.bass * s, lf);
+            material.uniforms.uLowMid.value = THREE.MathUtils.lerp(material.uniforms.uLowMid.value, AUDIO.gatedBands.lowMid * s, lf);
+            material.uniforms.uMid.value = THREE.MathUtils.lerp(material.uniforms.uMid.value, AUDIO.gatedBands.mid * s, lf);
+            material.uniforms.uHighMid.value = THREE.MathUtils.lerp(material.uniforms.uHighMid.value, AUDIO.gatedBands.highMid * s, lf);
+            material.uniforms.uHigh.value = THREE.MathUtils.lerp(material.uniforms.uHigh.value, AUDIO.gatedBands.high * s, lf);
+            material.uniforms.uUltraHigh.value = THREE.MathUtils.lerp(material.uniforms.uUltraHigh.value, AUDIO.gatedBands.ultraHigh * s, lf);
+            material.uniforms.uBeatEnergy.value = THREE.MathUtils.lerp(material.uniforms.uBeatEnergy.value, AUDIO.beatEnergy, 0.22);
+            material.uniforms.uSpectralCentroid.value = THREE.MathUtils.lerp(material.uniforms.uSpectralCentroid.value, AUDIO.spectralCentroid, lf);
+            material.uniforms.uSpectralFlux.value = THREE.MathUtils.lerp(material.uniforms.uSpectralFlux.value, AUDIO.spectralFlux * s, lf);
+            // === ENHANCEMENT: Update new uniforms ===
+            material.uniforms.uOnsetEnergy.value = THREE.MathUtils.lerp(material.uniforms.uOnsetEnergy.value, AUDIO.onsetEnergy, 0.25);
+            material.uniforms.uTerrainMode.value = FIELD_TYPES[STATE.field]?.terrain ? 1.0 : 0.0;
+            material.uniforms.uTerrainHeight.value = STATE.waveformTerrainHeight;
+            // Update secondary particles
+            secondaryPoints.visible = STATE.secondaryEnabled;
+            secondaryMaterial.uniforms.uTime.value             = material.uniforms.uTime.value;
+            secondaryMaterial.uniforms.uSubBass.value          = material.uniforms.uSubBass.value;
+            secondaryMaterial.uniforms.uBass.value             = material.uniforms.uBass.value;
+            secondaryMaterial.uniforms.uLowMid.value           = material.uniforms.uLowMid.value;
+            secondaryMaterial.uniforms.uMid.value              = material.uniforms.uMid.value;
+            secondaryMaterial.uniforms.uHighMid.value          = material.uniforms.uHighMid.value;
+            secondaryMaterial.uniforms.uHigh.value             = material.uniforms.uHigh.value;
+            secondaryMaterial.uniforms.uUltraHigh.value        = material.uniforms.uUltraHigh.value;
+            secondaryMaterial.uniforms.uBeatEnergy.value       = material.uniforms.uBeatEnergy.value;
+            secondaryMaterial.uniforms.uSpectralCentroid.value = material.uniforms.uSpectralCentroid.value;
+            secondaryMaterial.uniforms.uSpectralFlux.value     = material.uniforms.uSpectralFlux.value;
+            secondaryMaterial.uniforms.uOnsetEnergy.value      = material.uniforms.uOnsetEnergy.value;
+            secondaryMaterial.uniforms.uVortexStrength.value   = STATE.vortexStrength;
+            // Update nebula background
+            nebulaSphere.visible = STATE.nebulaEnabled;
+            if (STATE.nebulaEnabled) {
+                nebulaMaterial.uniforms.uTime.value = material.uniforms.uTime.value;
+                nebulaMaterial.uniforms.uBass.value = material.uniforms.uBass.value;
+                nebulaMaterial.uniforms.uMid.value = material.uniforms.uMid.value;
+                nebulaMaterial.uniforms.uHigh.value = material.uniforms.uHigh.value;
+                nebulaMaterial.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;
+            }
             // Update particle connections
             connectionMesh.visible = STATE.connectionsEnabled;
             if (STATE.connectionsEnabled) {
@@ -7917,66 +7917,66 @@ void main() {\r
                 idleConnectionElapsed = 2;
                 lastConnectionState = null;
             }
-\r
-            // Update crawlers\r
-            crawlerMesh.visible = STATE.crawlersEnabled && STATE.connectionsEnabled && AUDIO.active && (AUDIO.isPlaying || AUDIO.mode === 'mic');\r
-            if (crawlerMesh.visible) {\r
-                updateCrawlers(\r
-                    dt,\r
-                    material.uniforms.uHighMid.value,\r
-                    material.uniforms.uBeatEnergy.value,\r
-                    material.uniforms.uSpectralCentroid.value\r
-                );\r
-                crawlerMaterial.uniforms.uColor.value.lerp(\r
-                    new THREE.Color().lerpColors(\r
-                        new THREE.Color(FIELD_TYPES[STATE.field]?.c1 || '#ffffff'),\r
-                        new THREE.Color(FIELD_TYPES[STATE.field]?.c3 || '#ffffff'),\r
-                        material.uniforms.uSpectralCentroid.value\r
-                    ), 0.05\r
-                );\r
-                crawlerMaterial.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\r
-            }\r
-\r
-            // Update post-processing\r
-            chromaticPass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\r
-            godRaysPass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\r
-            lensFlarePass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\r
-            vignettePass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\r
-            customDOFPass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\r
-\r
-\r
-\r
-            // Update trails\r
-            trailSystem.update(elapsed, {\r
-                bass: material.uniforms.uBass.value,\r
-                mid: material.uniforms.uMid.value,\r
-                high: material.uniforms.uHigh.value,\r
-                beat: material.uniforms.uBeatEnergy.value\r
-            }, material.uniforms.uColor1.value);\r
-\r
-            // === ENHANCEMENT: Adaptive Quality System ===\r
-            QUALITY_SYSTEM.update(dt * 1000);\r
-\r
-            // === ENHANCEMENT: Audio-Reactive Camera ===\r
-            AUDIO_CAMERA.update(dt * 1000);\r
-\r
-            // Camera shake\r
-            if (STATE.cameraShake > 0 && AUDIO.beatEnergy > 0.1) {\r
-                const shake = AUDIO.beatEnergy * STATE.cameraShake;\r
-                cameraShakeOffset.set((Math.random() - 0.5) * shake * 0.6, (Math.random() - 0.5) * shake * 0.4, (Math.random() - 0.5) * shake * 0.25);\r
-                camera.position.copy(baseCameraPos).add(cameraShakeOffset);\r
-            }\r
-\r
-            controls.autoRotateSpeed = 0.35 + material.uniforms.uMid.value * 2.0 + material.uniforms.uBeatEnergy.value * 2.0;\r
+            // Update crawlers
+            crawlerMesh.visible = STATE.crawlersEnabled && STATE.connectionsEnabled && AUDIO.active && (AUDIO.isPlaying || AUDIO.mode === 'mic');
+            if (crawlerMesh.visible) {
+                updateCrawlers(
+                    dt,
+                    material.uniforms.uHighMid.value,
+                    material.uniforms.uBeatEnergy.value,
+                    material.uniforms.uSpectralCentroid.value
+                );
+                crawlerMaterial.uniforms.uColor.value.lerp(
+                    new THREE.Color().lerpColors(
+                        new THREE.Color(FIELD_TYPES[STATE.field]?.c1 || '#ffffff'),
+                        new THREE.Color(FIELD_TYPES[STATE.field]?.c3 || '#ffffff'),
+                        material.uniforms.uSpectralCentroid.value
+                    ), 0.05
+                );
+                crawlerMaterial.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;
+            }
+            // Update post-processing
+            chromaticPass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;
+            godRaysPass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;
+            lensFlarePass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;
+            vignettePass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;
+            customDOFPass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;
+            // Update trails
+            trailSystem.update(elapsed, {
+                bass: material.uniforms.uBass.value,
+                mid: material.uniforms.uMid.value,
+                high: material.uniforms.uHigh.value,
+                beat: material.uniforms.uBeatEnergy.value
+            }, material.uniforms.uColor1.value);
+            // === ENHANCEMENT: Adaptive Quality System ===
+            QUALITY_SYSTEM.update(dt * 1000);
+            // === ENHANCEMENT: Audio-Reactive Camera ===
+            AUDIO_CAMERA.update(dt * 1000);
+            // Camera shake
+            if (STATE.cameraShake > 0 && AUDIO.beatEnergy > 0.1) {
+                const shake = AUDIO.beatEnergy * STATE.cameraShake;
+                cameraShakeOffset.set((Math.random() - 0.5) * shake * 0.6, (Math.random() - 0.5) * shake * 0.4, (Math.random() - 0.5) * shake * 0.25);
+                camera.position.copy(baseCameraPos).add(cameraShakeOffset);
+            }
+            controls.autoRotateSpeed = 0.35 + material.uniforms.uMid.value * 2.0 + material.uniforms.uBeatEnergy.value * 2.0;
             bloomPass.strength = STATE.bloom + (AUDIO.gatedBands.bass + AUDIO.gatedBands.mid + AUDIO.beatEnergy) / 6;
             bloomPass.enabled = bloomPass.strength > 0;
             anamorphicPass.uniforms.uIntensity.value = STATE.anamorphicStretch + AUDIO.gatedBands.bass * 0.4;
             anamorphicPass.enabled = anamorphicPass.uniforms.uIntensity.value > 0;
-\r
-            controls.update();\r
-            composer.render();\r
-        }\r
-\r
+            controls.update();
+            composer.render();
+        }
         window.addEventListener('resize', () => {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
@@ -7984,14 +7984,14 @@ void main() {\r
             secondaryMaterial.uniforms.uViewportAspect.value = material.uniforms.uViewportAspect.value;
             material.uniforms.uViewportHalfHeight.value = Math.tan(camera.fov * Math.PI / 360) * CONFIG.defaultZoom;
             secondaryMaterial.uniforms.uViewportHalfHeight.value = material.uniforms.uViewportHalfHeight.value;
-            renderer.setSize(window.innerWidth, window.innerHeight);\r
+            renderer.setSize(window.innerWidth, window.innerHeight);
             composer.setSize(window.innerWidth, window.innerHeight);
             STATE.pixelRatio = fitPixelRatio();
             QUALITY_SYSTEM.applyQuality();
             customDOFPass.uniforms.uResolution.value.set(window.innerWidth, window.innerHeight);
-            baseCameraPos.copy(camera.position);\r
-        });\r
-\r
+            baseCameraPos.copy(camera.position);
+        });
         let pausedFromKit = false;
         let requestedTimeScale = STATE.timeScale;
         const sideEffects = {
@@ -8074,13 +8074,13 @@ void main() {\r
             }
         }, 250);
         parent.postMessage({ type: 'ad-qf-ready' }, '*');
-\r
         QUALITY_SYSTEM.applyQuality();
         startFrames();
-    <\/script>\r
-</body>\r
-\r
-</html>\r
+    <\/script>
+</body>
+</html>
 `;
 // src/components/artwork/QuantumField/QuantumFieldExperience.tsx
@@ -8228,7 +8228,7 @@ var TransportControls = /* @__PURE__ */ memo(function TransportControls2({ send,
     ] })
   ] });
 });
-function QuantumFieldExperience({ className = "", particleBudget, ...props }) {
+function QuantumBackground({ className = "", particleBudget, ...props }) {
   const frame = useRef28(null);
   const viewport = useRef28(null);
   const theme = useThemePalette();
@@ -8292,19 +8292,20 @@ function QuantumFieldExperience({ className = "", particleBudget, ...props }) {
     send("palette", [theme.primary, theme.secondary]);
   }, [ready, theme.primary, theme.secondary]);
   return /* @__PURE__ */ jsxs39("div", { "data-ad-component": "QuantumFieldExperience", className: `ad-quantum-field-experience ${className}`.trim(), ...props, children: [
-    /* @__PURE__ */ jsx48("div", { className: "ad-qf-viewport", ref: viewport, children: mounted && /* @__PURE__ */ jsx48("iframe", { ref: frame, title: "Quantum Field visualizer", srcDoc: reference_default, allow: "microphone", "data-particle-budget": normalizedBudget }) }),
+    /* @__PURE__ */ jsx48("div", { className: "ad-qf-viewport", ref: viewport, children: mounted && /* @__PURE__ */ jsx48("iframe", { ref: frame, title: "Quantum Background visualizer", srcDoc: reference_default, allow: "microphone", "data-particle-budget": normalizedBudget }) }),
     /* @__PURE__ */ jsxs39("div", { className: "ad-qf-controls", children: [
       /* @__PURE__ */ jsxs39("div", { className: "ad-qf-toolbar", children: [
         /* @__PURE__ */ jsx48(TransportControls, { send, viewport, receive: transportReceiver }),
         /* @__PURE__ */ jsx48("div", { className: "ad-qf-setting-grid ad-qf-essentials", children: essentialControls.map(renderControl) })
       ] }),
       /* @__PURE__ */ jsxs39(CollapsibleSection, { title: "\u0422\u043E\u043D\u043A\u0430\u044F \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430", description: "\u0421\u0440\u0435\u0434\u0430, \u043A\u0430\u043C\u0435\u0440\u0430, \u044D\u0444\u0444\u0435\u043A\u0442\u044B \u0438 \u0440\u0435\u0430\u043A\u0446\u0438\u044F \u043D\u0430 \u0437\u0432\u0443\u043A", icon: "settings", defaultOpen: false, children: [
-        /* @__PURE__ */ jsx48(Tabs, { label: "\u0422\u043E\u043D\u043A\u0430\u044F \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430 Quantum Field", items: detailedGroups.map(({ id, label }) => ({ value: id, label })), value: tab, onValueChange: setTab }),
+        /* @__PURE__ */ jsx48(Tabs, { label: "\u0422\u043E\u043D\u043A\u0430\u044F \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430 Quantum Background", items: detailedGroups.map(({ id, label }) => ({ value: id, label })), value: tab, onValueChange: setTab }),
         /* @__PURE__ */ jsx48("div", { className: "ad-qf-control-panel", role: "tabpanel", "aria-label": group.label, children: /* @__PURE__ */ jsx48("div", { className: "ad-qf-setting-grid", children: group.controls.filter(({ key }) => !enabledBy[key] || settings[enabledBy[key]] === true).map(renderControl) }) })
       ] })
     ] })
   ] });
 }
+var QuantumFieldExperience = QuantumBackground;
 // src/components/artwork/QuantumField/audio.ts
 function createQuantumFieldAudio() {
@@ -9570,6 +9571,7 @@ export {
   Planet,
   Popover,
   ProgressBar,
+  QuantumBackground,
   QuantumField,
   QuantumFieldExperience,
   Reveal,