diff --git a/README.md b/README.md
index 95e21b2..8e9da30 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,14 @@
-# singularity
\ No newline at end of file
+# singularity
+
+3D audio visualizer for SINGULARITY.
+
+## GitHub Pages
+
+After merge, enable Pages (one-time):
+
+1. Open **Settings → Pages**
+2. Source: **Deploy from a branch**
+3. Branch: `main`, folder: `/ (root)`
+4. Save
+
+Site URL: **https://ideaclaw.github.io/singularity/**
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c0ed383
--- /dev/null
+++ b/index.html
@@ -0,0 +1,1546 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+<title>SINGULARITY — 3D Audio Visualizer</title>
+<meta name="description" content="Immersive 3D audio visualizer for SINGULARITY — an EDM/dubstep experience." />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;600;700&display=swap" rel="stylesheet" />
+<style>
+  :root {
+    --void: #02040a;
+    --ink: #071018;
+    --plasma: #29f3ff;
+    --flare: #ff7a18;
+    --core: #fff4d6;
+    --danger: #ff2d55;
+    --fog: rgba(8, 18, 28, 0.55);
+    --glass: rgba(10, 20, 32, 0.42);
+    --line: rgba(41, 243, 255, 0.28);
+    --text: #e8f7ff;
+    --muted: rgba(232, 247, 255, 0.55);
+  }
+
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body {
+    width: 100%; height: 100%; overflow: hidden;
+    background: radial-gradient(120% 80% at 50% 35%, #0b1a24 0%, var(--void) 55%, #000 100%);
+    color: var(--text);
+    font-family: "Rajdhani", sans-serif;
+    cursor: crosshair;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  #stage {
+    position: fixed; inset: 0;
+    width: 100%; height: 100%;
+    display: block;
+    z-index: 1;
+  }
+
+  #yt-host {
+    position: absolute;
+    width: 1px; height: 1px;
+    left: -9999px; top: -9999px;
+    opacity: 0; pointer-events: none;
+    overflow: hidden;
+  }
+
+  .vignette {
+    position: fixed; inset: 0; z-index: 2; pointer-events: none;
+    background:
+      radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,0.55) 100%),
+      linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 18%, transparent 78%, rgba(0,0,0,0.55) 100%);
+    mix-blend-mode: multiply;
+  }
+
+  .flash {
+    position: fixed; inset: 0; z-index: 3; pointer-events: none;
+    background: radial-gradient(circle at var(--fx, 50% 50%), rgba(255,244,214,0.55), transparent 42%);
+    opacity: 0;
+    transition: opacity 80ms linear;
+  }
+
+  #hud {
+    position: fixed; inset: 0; z-index: 10;
+    pointer-events: none;
+  }
+
+  .brand {
+    position: absolute; top: 28px; left: 32px;
+    pointer-events: none;
+  }
+  .brand h1 {
+    font-family: "Orbitron", sans-serif;
+    font-weight: 900;
+    font-size: clamp(28px, 5vw, 54px);
+    letter-spacing: 0.18em;
+    line-height: 1;
+    background: linear-gradient(180deg, #fff 0%, var(--plasma) 45%, var(--flare) 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    text-shadow: 0 0 40px rgba(41,243,255,0.25);
+    filter: drop-shadow(0 0 18px rgba(255,122,24,0.25));
+  }
+  .brand p {
+    margin-top: 8px;
+    font-size: 13px;
+    letter-spacing: 0.42em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+
+  .meter {
+    position: absolute; top: 32px; right: 32px;
+    width: min(280px, 40vw);
+    display: grid;
+    gap: 8px;
+  }
+  .meter .row {
+    display: grid;
+    grid-template-columns: 48px 1fr 36px;
+    align-items: center;
+    gap: 8px;
+    font-size: 11px;
+    letter-spacing: 0.18em;
+    color: var(--muted);
+  }
+  .bar {
+    height: 6px;
+    border: 1px solid var(--line);
+    background: rgba(0,0,0,0.35);
+    overflow: hidden;
+    position: relative;
+  }
+  .bar > i {
+    display: block; height: 100%; width: 0%;
+    background: linear-gradient(90deg, var(--flare), var(--plasma), var(--core));
+    box-shadow: 0 0 12px rgba(41,243,255,0.55);
+  }
+  .bar.bass > i { background: linear-gradient(90deg, var(--flare), #ffd28a); }
+  .bar.mid > i { background: linear-gradient(90deg, #1fd1ff, var(--plasma)); }
+  .bar.treble > i { background: linear-gradient(90deg, #9ef7ff, var(--core)); }
+
+  .dock {
+    position: absolute; left: 50%; bottom: 28px;
+    transform: translateX(-50%);
+    width: min(920px, calc(100vw - 28px));
+    pointer-events: auto;
+    padding: 16px 18px 14px;
+    border: 1px solid var(--line);
+    background: linear-gradient(180deg, rgba(12,24,36,0.72), rgba(4,8,14,0.78));
+    backdrop-filter: blur(18px) saturate(1.2);
+    -webkit-backdrop-filter: blur(18px) saturate(1.2);
+    box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
+  }
+
+  .transport {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: 14px;
+    align-items: center;
+  }
+
+  .btn {
+    appearance: none; border: 1px solid var(--line);
+    background: rgba(41,243,255,0.08);
+    color: var(--text);
+    font-family: "Orbitron", sans-serif;
+    font-size: 11px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    padding: 12px 16px;
+    cursor: pointer;
+    transition: 160ms ease;
+  }
+  .btn:hover { background: rgba(41,243,255,0.18); border-color: rgba(41,243,255,0.55); }
+  .btn:active { transform: scale(0.98); }
+  .btn.primary {
+    background: linear-gradient(135deg, rgba(255,122,24,0.85), rgba(41,243,255,0.55));
+    border-color: transparent;
+    color: #041018;
+    font-weight: 700;
+    min-width: 128px;
+  }
+  .btn.active {
+    background: rgba(255,122,24,0.22);
+    border-color: rgba(255,122,24,0.7);
+    color: #ffe1c2;
+  }
+
+  .seek-wrap { display: grid; gap: 6px; }
+  .seek {
+    -webkit-appearance: none; appearance: none;
+    width: 100%; height: 6px; border-radius: 0;
+    background: rgba(255,255,255,0.08);
+    outline: none; cursor: pointer;
+  }
+  .seek::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 14px; height: 14px;
+    background: var(--core);
+    border: 2px solid var(--plasma);
+    box-shadow: 0 0 12px rgba(41,243,255,0.7);
+    cursor: pointer;
+  }
+  .times {
+    display: flex; justify-content: space-between;
+    font-size: 12px; letter-spacing: 0.14em; color: var(--muted);
+  }
+
+  .tools {
+    margin-top: 12px;
+    display: flex; flex-wrap: wrap; gap: 8px;
+    align-items: center;
+  }
+  .tools .btn { padding: 9px 12px; }
+  .hint {
+    margin-left: auto;
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    color: var(--muted);
+  }
+
+  .side {
+    position: absolute; left: 32px; bottom: 140px;
+    width: min(260px, calc(100vw - 40px));
+    pointer-events: auto;
+    display: grid; gap: 10px;
+  }
+  .panel {
+    border: 1px solid var(--line);
+    background: var(--glass);
+    backdrop-filter: blur(14px);
+    padding: 12px 14px;
+  }
+  .panel h3 {
+    font-family: "Orbitron", sans-serif;
+    font-size: 11px;
+    letter-spacing: 0.22em;
+    color: var(--plasma);
+    margin-bottom: 8px;
+  }
+  .panel label {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 8px;
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    color: var(--muted);
+    margin: 8px 0;
+  }
+  .panel input[type="range"] {
+    width: 100%;
+    accent-color: var(--plasma);
+  }
+  .modes {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 6px;
+  }
+  .modes .btn { width: 100%; text-align: center; }
+
+  #boot {
+    position: fixed; inset: 0; z-index: 50;
+    display: grid; place-items: center;
+    background:
+      radial-gradient(circle at 50% 40%, rgba(41,243,255,0.12), transparent 35%),
+      radial-gradient(circle at 50% 55%, rgba(255,122,24,0.12), transparent 40%),
+      #010307;
+    transition: opacity 700ms ease, visibility 700ms ease;
+  }
+  #boot.hide { opacity: 0; visibility: hidden; pointer-events: none; }
+  .boot-card {
+    text-align: center;
+    max-width: 640px;
+    padding: 40px 28px;
+  }
+  .boot-card .kicker {
+    font-family: "Orbitron", sans-serif;
+    letter-spacing: 0.5em;
+    font-size: 12px;
+    color: var(--flare);
+    margin-bottom: 18px;
+  }
+  .boot-card h2 {
+    font-family: "Orbitron", sans-serif;
+    font-weight: 900;
+    font-size: clamp(42px, 10vw, 84px);
+    letter-spacing: 0.16em;
+    background: linear-gradient(180deg, #fff, var(--plasma) 50%, var(--flare));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+  .boot-card p {
+    margin: 18px auto 28px;
+    max-width: 42ch;
+    color: var(--muted);
+    font-size: 18px;
+    line-height: 1.45;
+  }
+  .pulse-ring {
+    width: 180px; height: 180px; margin: 0 auto 28px;
+    border: 1px solid rgba(41,243,255,0.35);
+    border-radius: 50%;
+    position: relative;
+    animation: spin 12s linear infinite;
+  }
+  .pulse-ring::before, .pulse-ring::after {
+    content: "";
+    position: absolute; inset: 18px;
+    border: 1px dashed rgba(255,122,24,0.45);
+    border-radius: 50%;
+  }
+  .pulse-ring::after { inset: 42px; border-style: solid; border-color: rgba(255,244,214,0.35); }
+  .core-dot {
+    position: absolute; inset: 50%; width: 18px; height: 18px;
+    margin: -9px 0 0 -9px;
+    background: radial-gradient(circle, #fff, var(--flare));
+    border-radius: 50%;
+    box-shadow: 0 0 40px rgba(255,122,24,0.8), 0 0 80px rgba(41,243,255,0.4);
+    animation: throb 1.4s ease-in-out infinite;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  @keyframes throb {
+    0%, 100% { transform: scale(0.85); }
+    50% { transform: scale(1.25); }
+  }
+
+  .toast {
+    position: fixed; top: 28px; left: 50%; transform: translateX(-50%);
+    z-index: 40; pointer-events: none;
+    padding: 10px 16px;
+    border: 1px solid var(--line);
+    background: rgba(4,10,16,0.8);
+    font-family: "Orbitron", sans-serif;
+    font-size: 11px;
+    letter-spacing: 0.18em;
+    opacity: 0;
+    transition: opacity 250ms ease;
+  }
+  .toast.show { opacity: 1; }
+
+  .dropzone {
+    position: fixed; inset: 0; z-index: 45;
+    display: none; place-items: center;
+    background: rgba(2,6,12,0.72);
+    border: 3px dashed rgba(41,243,255,0.5);
+    font-family: "Orbitron", sans-serif;
+    letter-spacing: 0.24em;
+    font-size: 18px;
+  }
+  .dropzone.show { display: grid; }
+
+  #fps {
+    position: absolute; right: 32px; bottom: 140px;
+    font-size: 11px; letter-spacing: 0.16em; color: var(--muted);
+    pointer-events: none;
+  }
+
+  @media (max-width: 820px) {
+    .brand { top: 16px; left: 16px; }
+    .meter { display: none; }
+    .side { left: 16px; bottom: auto; top: 90px; width: calc(100vw - 32px); }
+    .side .panel:nth-child(2) { display: none; }
+    .dock { bottom: 12px; padding: 12px; }
+    .hint { display: none; }
+    #fps { display: none; }
+  }
+</style>
+</head>
+<body>
+  <canvas id="stage"></canvas>
+  <div class="vignette"></div>
+  <div class="flash" id="flash"></div>
+  <div id="yt-host"></div>
+  <div class="dropzone" id="dropzone">DROP AUDIO FOR TRUE FFT MODE</div>
+  <div class="toast" id="toast"></div>
+
+  <div id="boot">
+    <div class="boot-card">
+      <div class="kicker">EVENT HORIZON PROTOCOL</div>
+      <div class="pulse-ring"><div class="core-dot"></div></div>
+      <h2>SINGULARITY</h2>
+      <p>Enter a high-energy 3D audiovisual wormhole driven by the full track. Drag to orbit. Click to pulse gravity. Keys reshape reality.</p>
+      <button class="btn primary" id="enterBtn">ENTER THE VOID</button>
+      <p style="margin-top:18px;font-size:13px;letter-spacing:0.12em">TRACK SOURCE · YOUTUBE · yyF1UxGRXVs</p>
+    </div>
+  </div>
+
+  <div id="hud">
+    <div class="brand">
+      <h1>SINGULARITY</h1>
+      <p>3D Audio Visualizer</p>
+    </div>
+
+    <div class="meter">
+      <div class="row"><span>BASS</span><div class="bar bass"><i id="mBass"></i></div><span id="vBass">0</span></div>
+      <div class="row"><span>MID</span><div class="bar mid"><i id="mMid"></i></div><span id="vMid">0</span></div>
+      <div class="row"><span>HIGH</span><div class="bar treble"><i id="mHigh"></i></div><span id="vHigh">0</span></div>
+      <div class="row"><span>ENERGY</span><div class="bar"><i id="mEnergy"></i></div><span id="vEnergy">0</span></div>
+    </div>
+
+    <div class="side">
+      <div class="panel">
+        <h3>CONTROL DECK</h3>
+        <div class="modes">
+          <button class="btn active" data-mode="orbit">Orbit</button>
+          <button class="btn" data-mode="dive">Dive</button>
+          <button class="btn" data-mode="tunnel">Tunnel</button>
+          <button class="btn" data-mode="chaos">Chaos</button>
+        </div>
+        <label>Bloom <span id="bloomVal">1.2</span>
+          <input id="bloomSlider" type="range" min="0.2" max="2.8" step="0.05" value="1.2" />
+        </label>
+        <label>Gravity <span id="gravVal">1.0</span>
+          <input id="gravSlider" type="range" min="0.2" max="2.5" step="0.05" value="1.0" />
+        </label>
+        <label>Particle Storm <span id="partVal">1.0</span>
+          <input id="partSlider" type="range" min="0.3" max="2.0" step="0.05" value="1.0" />
+        </label>
+      </div>
+      <div class="panel">
+        <h3>INTERACT</h3>
+        <p style="font-size:13px;line-height:1.4;color:var(--muted)">
+          Drag orbit · Wheel zoom · Click shockwave<br/>
+          <b style="color:var(--text)">1–4</b> modes · <b style="color:var(--text)">Space</b> play · <b style="color:var(--text)">F</b> fullscreen<br/>
+          <b style="color:var(--text)">G</b> gravity bomb · <b style="color:var(--text)">C</b> color shift · <b style="color:var(--text)">M</b> mic
+        </p>
+      </div>
+    </div>
+
+    <div id="fps">60 FPS</div>
+
+    <div class="dock">
+      <div class="transport">
+        <button class="btn primary" id="playBtn">PLAY</button>
+        <div class="seek-wrap">
+          <input class="seek" id="seek" type="range" min="0" max="1000" value="0" />
+          <div class="times"><span id="tCur">0:00</span><span id="tDur">0:00</span></div>
+        </div>
+        <button class="btn" id="volBtn">VOL</button>
+      </div>
+      <div class="tools">
+        <button class="btn" id="micBtn">MIC REACT</button>
+        <button class="btn" id="fftBtn">FILE FFT</button>
+        <button class="btn" id="ytBtn">YOUTUBE</button>
+        <button class="btn" id="fsBtn">FULLSCREEN</button>
+        <button class="btn" id="shockBtn">SHOCKWAVE</button>
+        <span class="hint" id="statusHint">SOURCE · YOUTUBE · HYBRID REACTIVITY</span>
+      </div>
+    </div>
+  </div>
+
+  <input type="file" id="fileInput" accept="audio/*" hidden />
+
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://unpkg.com/three@0.160.1/build/three.module.js",
+    "three/addons/": "https://unpkg.com/three@0.160.1/examples/jsm/"
+  }
+}
+</script>
+
+<script type="module">
+import * as THREE from "three";
+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 { OutputPass } from "three/addons/postprocessing/OutputPass.js";
+
+const YT_ID = "yyF1UxGRXVs";
+const BPM = 140;
+const BEAT = 60 / BPM;
+
+const canvas = document.getElementById("stage");
+const flashEl = document.getElementById("flash");
+const toastEl = document.getElementById("toast");
+const dropzone = document.getElementById("dropzone");
+const boot = document.getElementById("boot");
+
+const ui = {
+  playBtn: document.getElementById("playBtn"),
+  seek: document.getElementById("seek"),
+  tCur: document.getElementById("tCur"),
+  tDur: document.getElementById("tDur"),
+  volBtn: document.getElementById("volBtn"),
+  micBtn: document.getElementById("micBtn"),
+  fftBtn: document.getElementById("fftBtn"),
+  ytBtn: document.getElementById("ytBtn"),
+  fsBtn: document.getElementById("fsBtn"),
+  shockBtn: document.getElementById("shockBtn"),
+  statusHint: document.getElementById("statusHint"),
+  enterBtn: document.getElementById("enterBtn"),
+  fileInput: document.getElementById("fileInput"),
+  fps: document.getElementById("fps"),
+  bloomSlider: document.getElementById("bloomSlider"),
+  gravSlider: document.getElementById("gravSlider"),
+  partSlider: document.getElementById("partSlider"),
+  bloomVal: document.getElementById("bloomVal"),
+  gravVal: document.getElementById("gravVal"),
+  partVal: document.getElementById("partVal"),
+  mBass: document.getElementById("mBass"),
+  mMid: document.getElementById("mMid"),
+  mHigh: document.getElementById("mHigh"),
+  mEnergy: document.getElementById("mEnergy"),
+  vBass: document.getElementById("vBass"),
+  vMid: document.getElementById("vMid"),
+  vHigh: document.getElementById("vHigh"),
+  vEnergy: document.getElementById("vEnergy"),
+};
+
+const state = {
+  mode: "orbit",
+  playing: false,
+  ready: false,
+  source: "youtube", // youtube | file | mic
+  volume: 80,
+  muted: false,
+  bloom: 1.2,
+  gravity: 1.0,
+  particleMul: 1.0,
+  colorShift: 0,
+  seeking: false,
+  pointerDown: false,
+  pointer: new THREE.Vector2(0, 0),
+  pointerN: new THREE.Vector2(0, 0),
+  targetRot: new THREE.Vector2(0.35, 0),
+  camRot: new THREE.Vector2(0.35, 0),
+  zoom: 48,
+  targetZoom: 48,
+  shock: 0,
+  lastBeat: -1,
+  dropArmed: false,
+  fps: 60,
+  time: 0,
+  trackTime: 0,
+  trackDur: 0,
+  audio: {
+    ctx: null,
+    analyser: null,
+    data: null,
+    freq: null,
+    sourceNode: null,
+    mediaEl: null,
+    micStream: null,
+    gain: null,
+  },
+  bands: { bass: 0, mid: 0, high: 0, energy: 0, beat: 0 },
+  yt: null,
+  ytReady: false,
+};
+
+function toast(msg) {
+  toastEl.textContent = msg;
+  toastEl.classList.add("show");
+  clearTimeout(toast._t);
+  toast._t = setTimeout(() => toastEl.classList.remove("show"), 1800);
+}
+
+function fmt(t) {
+  t = Math.max(0, t || 0);
+  const m = Math.floor(t / 60);
+  const s = Math.floor(t % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+function loadYouTubeAPI() {
+  return new Promise((resolve) => {
+    if (window.YT && window.YT.Player) return resolve();
+    const tag = document.createElement("script");
+    tag.src = "https://www.youtube.com/iframe_api";
+    document.head.appendChild(tag);
+    window.onYouTubeIframeAPIReady = () => resolve();
+  });
+}
+
+async function initYouTube() {
+  await loadYouTubeAPI();
+  return new Promise((resolve) => {
+    state.yt = new YT.Player("yt-host", {
+      width: 1,
+      height: 1,
+      videoId: YT_ID,
+      playerVars: {
+        autoplay: 0,
+        controls: 0,
+        disablekb: 1,
+        fs: 0,
+        modestbranding: 1,
+        rel: 0,
+        playsinline: 1,
+        origin: location.origin,
+      },
+      events: {
+        onReady: (e) => {
+          state.ytReady = true;
+          try { e.target.setVolume(state.volume); } catch (_) {}
+          try {
+            const d = e.target.getDuration();
+            if (d && isFinite(d)) {
+              state.trackDur = d;
+              ui.tDur.textContent = fmt(d);
+            }
+          } catch (_) {}
+          resolve();
+        },
+        onStateChange: (e) => {
+          state.playing = e.data === YT.PlayerState.PLAYING;
+          ui.playBtn.textContent = state.playing ? "PAUSE" : "PLAY";
+          if (e.data === YT.PlayerState.ENDED) {
+            state.playing = false;
+            ui.playBtn.textContent = "PLAY";
+          }
+        },
+        onError: () => toast("YOUTUBE EMBED ERROR — TRY FILE FFT"),
+      },
+    });
+  });
+}
+
+function ensureAudioCtx() {
+  if (!state.audio.ctx) {
+    const Ctx = window.AudioContext || window.webkitAudioContext;
+    state.audio.ctx = new Ctx();
+    state.audio.analyser = state.audio.ctx.createAnalyser();
+    state.audio.analyser.fftSize = 2048;
+    state.audio.analyser.smoothingTimeConstant = 0.78;
+    state.audio.data = new Uint8Array(state.audio.analyser.frequencyBinCount);
+    state.audio.freq = new Uint8Array(state.audio.analyser.frequencyBinCount);
+    state.audio.gain = state.audio.ctx.createGain();
+    state.audio.gain.gain.value = 1;
+    state.audio.gain.connect(state.audio.ctx.destination);
+  }
+  if (state.audio.ctx.state === "suspended") state.audio.ctx.resume();
+  return state.audio.ctx;
+}
+
+function disconnectAudioSource() {
+  if (state.audio.sourceNode) {
+    try { state.audio.sourceNode.disconnect(); } catch (_) {}
+    state.audio.sourceNode = null;
+  }
+  if (state.audio.micStream) {
+    state.audio.micStream.getTracks().forEach((t) => t.stop());
+    state.audio.micStream = null;
+  }
+  if (state.audio.mediaEl) {
+    try { state.audio.mediaEl.pause(); } catch (_) {}
+    state.audio.mediaEl = null;
+  }
+}
+
+async function enableMic() {
+  ensureAudioCtx();
+  disconnectAudioSource();
+  if (state.yt && state.ytReady) {
+    try { state.yt.pauseVideo(); } catch (_) {}
+  }
+  const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
+  state.audio.micStream = stream;
+  const src = state.audio.ctx.createMediaStreamSource(stream);
+  src.connect(state.audio.analyser);
+  state.audio.sourceNode = src;
+  state.source = "mic";
+  state.playing = true;
+  ui.playBtn.textContent = "LISTENING";
+  ui.micBtn.classList.add("active");
+  ui.fftBtn.classList.remove("active");
+  ui.ytBtn.classList.remove("active");
+  ui.statusHint.textContent = "SOURCE · MICROPHONE · LIVE FFT";
+  toast("MIC REACTIVITY ONLINE");
+}
+
+async function loadAudioFile(file) {
+  ensureAudioCtx();
+  disconnectAudioSource();
+  if (state.yt && state.ytReady) {
+    try { state.yt.pauseVideo(); } catch (_) {}
+  }
+  const url = URL.createObjectURL(file);
+  const el = new Audio();
+  el.src = url;
+  el.crossOrigin = "anonymous";
+  el.loop = false;
+  await el.play().catch(() => {});
+  el.pause();
+  const src = state.audio.ctx.createMediaElementSource(el);
+  src.connect(state.audio.analyser);
+  state.audio.analyser.connect(state.audio.gain);
+  state.audio.sourceNode = src;
+  state.audio.mediaEl = el;
+  state.source = "file";
+  state.trackDur = 0;
+  el.addEventListener("loadedmetadata", () => {
+    state.trackDur = el.duration || 0;
+    ui.tDur.textContent = fmt(state.trackDur);
+  });
+  ui.micBtn.classList.remove("active");
+  ui.fftBtn.classList.add("active");
+  ui.ytBtn.classList.remove("active");
+  ui.statusHint.textContent = `SOURCE · FILE · ${file.name.toUpperCase()}`;
+  toast("TRUE FFT MODE ARMED");
+  await el.play();
+  state.playing = true;
+  ui.playBtn.textContent = "PAUSE";
+}
+
+function useYouTubeSource() {
+  disconnectAudioSource();
+  state.source = "youtube";
+  ui.micBtn.classList.remove("active");
+  ui.fftBtn.classList.remove("active");
+  ui.ytBtn.classList.add("active");
+  ui.statusHint.textContent = "SOURCE · YOUTUBE · HYBRID REACTIVITY";
+  toast("YOUTUBE SOURCE ACTIVE");
+}
+
+function hybridBands(t, playing) {
+  if (!playing) {
+    return {
+      bass: 0.08 + Math.sin(t * 0.7) * 0.03,
+      mid: 0.06 + Math.sin(t * 1.3) * 0.02,
+      high: 0.05 + Math.sin(t * 2.1) * 0.02,
+      energy: 0.08,
+      beat: 0,
+    };
+  }
+
+  // Musical section automation — EDM/dubstep arc
+  const bar = (t / (BEAT * 4)) % 32;
+  let section = 0.55; // groove
+  if (bar < 4) section = 0.25 + bar * 0.05; // intro swell
+  else if (bar < 8) section = 0.55;
+  else if (bar < 12) section = 0.35 + (bar - 8) * 0.15; // build
+  else if (bar < 16) section = 1.15; // drop
+  else if (bar < 20) section = 0.45; // break
+  else if (bar < 24) section = 0.7 + (bar - 20) * 0.1; // re-build
+  else if (bar < 28) section = 1.25; // second drop
+  else section = 0.5 + Math.sin(bar) * 0.1;
+
+  const phase = (t % BEAT) / BEAT;
+  const kick = Math.pow(1 - phase, 10);
+  const snare = Math.pow(Math.max(0, 1 - Math.abs(phase - 0.5) * 2), 16);
+  const hat = Math.pow(1 - ((t % (BEAT * 0.5)) / (BEAT * 0.5)), 4) * 0.55;
+  const wobble = 0.5 + 0.5 * Math.sin(t * Math.PI * 2 * (BPM / 60) * (section > 1 ? 0.5 : 0.25));
+  const sub = kick * (0.75 + 0.25 * wobble);
+
+  const bass = THREE.MathUtils.clamp(sub * section * 1.25 + snare * 0.2, 0, 1.5);
+  const mid = THREE.MathUtils.clamp((0.25 + snare * 0.8 + wobble * 0.35) * section, 0, 1.4);
+  const high = THREE.MathUtils.clamp((hat * 0.9 + snare * 0.35 + 0.12) * (0.7 + section * 0.5), 0, 1.3);
+  const energy = THREE.MathUtils.clamp((bass * 0.5 + mid * 0.3 + high * 0.2) * section, 0, 1.5);
+  const beat = kick > 0.55 ? kick : 0;
+
+  return { bass, mid, high, energy, beat };
+}
+
+function analyseAudio() {
+  const a = state.audio.analyser;
+  if (!a || !state.audio.freq || (state.source !== "file" && state.source !== "mic")) {
+    const h = hybridBands(state.trackTime || state.time, state.playing || state.source === "mic");
+    // soften toward hybrid for continuity
+    state.bands.bass = THREE.MathUtils.lerp(state.bands.bass, h.bass, 0.35);
+    state.bands.mid = THREE.MathUtils.lerp(state.bands.mid, h.mid, 0.35);
+    state.bands.high = THREE.MathUtils.lerp(state.bands.high, h.high, 0.35);
+    state.bands.energy = THREE.MathUtils.lerp(state.bands.energy, h.energy, 0.3);
+    state.bands.beat = h.beat;
+    return state.bands;
+  }
+
+  a.getByteFrequencyData(state.audio.freq);
+  const n = state.audio.freq.length;
+  const sampleRate = state.audio.ctx.sampleRate;
+  const binHz = sampleRate / a.fftSize;
+
+  let bass = 0, mid = 0, high = 0, countB = 0, countM = 0, countH = 0;
+  for (let i = 1; i < n; i++) {
+    const hz = i * binHz;
+    const v = state.audio.freq[i] / 255;
+    if (hz < 180) { bass += v; countB++; }
+    else if (hz < 2000) { mid += v; countM++; }
+    else if (hz < 14000) { high += v; countH++; }
+  }
+  bass = countB ? bass / countB : 0;
+  mid = countM ? mid / countM : 0;
+  high = countH ? high / countH : 0;
+  // emphasize dubstep punch
+  bass = Math.pow(bass, 0.85) * 1.6;
+  mid = Math.pow(mid, 0.9) * 1.35;
+  high = Math.pow(high, 0.95) * 1.25;
+  const energy = (bass * 0.5 + mid * 0.3 + high * 0.2);
+  const beat = bass > 0.62 && bass > state.bands.bass * 1.08 ? bass : 0;
+
+  state.bands.bass = THREE.MathUtils.lerp(state.bands.bass, THREE.MathUtils.clamp(bass, 0, 1.5), 0.4);
+  state.bands.mid = THREE.MathUtils.lerp(state.bands.mid, THREE.MathUtils.clamp(mid, 0, 1.4), 0.35);
+  state.bands.high = THREE.MathUtils.lerp(state.bands.high, THREE.MathUtils.clamp(high, 0, 1.3), 0.3);
+  state.bands.energy = THREE.MathUtils.lerp(state.bands.energy, THREE.MathUtils.clamp(energy, 0, 1.5), 0.3);
+  state.bands.beat = beat;
+  return state.bands;
+}
+
+// -------------------- 3D WORLD --------------------
+const renderer = new THREE.WebGLRenderer({
+  canvas,
+  antialias: true,
+  powerPreference: "high-performance",
+  alpha: false,
+});
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.outputColorSpace = THREE.SRGBColorSpace;
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+renderer.toneMappingExposure = 1.05;
+
+const scene = new THREE.Scene();
+scene.fog = new THREE.FogExp2(0x02060c, 0.012);
+scene.background = new THREE.Color(0x02040a);
+
+const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 500);
+camera.position.set(0, 8, 48);
+
+const composer = new EffectComposer(renderer);
+const renderPass = new RenderPass(scene, camera);
+composer.addPass(renderPass);
+const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.2, 0.7, 0.2);
+composer.addPass(bloomPass);
+const afterimagePass = new AfterimagePass(0.82);
+composer.addPass(afterimagePass);
+composer.addPass(new OutputPass());
+
+// Starfield
+const STAR_COUNT = 6000;
+const starGeo = new THREE.BufferGeometry();
+const starPos = new Float32Array(STAR_COUNT * 3);
+const starVel = new Float32Array(STAR_COUNT);
+const starBase = new Float32Array(STAR_COUNT * 3);
+for (let i = 0; i < STAR_COUNT; i++) {
+  const r = 30 + Math.random() * 160;
+  const theta = Math.random() * Math.PI * 2;
+  const phi = Math.acos(2 * Math.random() - 1);
+  const x = r * Math.sin(phi) * Math.cos(theta);
+  const y = r * Math.sin(phi) * Math.sin(theta) * 0.55;
+  const z = r * Math.cos(phi);
+  starPos[i * 3] = x; starPos[i * 3 + 1] = y; starPos[i * 3 + 2] = z;
+  starBase[i * 3] = x; starBase[i * 3 + 1] = y; starBase[i * 3 + 2] = z;
+  starVel[i] = 0.2 + Math.random() * 1.5;
+}
+starGeo.setAttribute("position", new THREE.BufferAttribute(starPos, 3));
+const stars = new THREE.Points(
+  starGeo,
+  new THREE.PointsMaterial({
+    color: 0xa8f7ff,
+    size: 0.35,
+    sizeAttenuation: true,
+    transparent: true,
+    opacity: 0.85,
+    blending: THREE.AdditiveBlending,
+    depthWrite: false,
+  })
+);
+scene.add(stars);
+
+// Singularity core
+const coreGroup = new THREE.Group();
+scene.add(coreGroup);
+
+const eventHorizon = new THREE.Mesh(
+  new THREE.SphereGeometry(3.2, 64, 64),
+  new THREE.MeshBasicMaterial({ color: 0x000000 })
+);
+coreGroup.add(eventHorizon);
+
+const coreGlow = new THREE.Mesh(
+  new THREE.SphereGeometry(3.6, 32, 32),
+  new THREE.MeshBasicMaterial({
+    color: 0xff7a18,
+    transparent: true,
+    opacity: 0.22,
+    blending: THREE.AdditiveBlending,
+    depthWrite: false,
+  })
+);
+coreGroup.add(coreGlow);
+
+// Accretion disk — custom shader
+const diskUniforms = {
+  uTime: { value: 0 },
+  uBass: { value: 0 },
+  uMid: { value: 0 },
+  uHigh: { value: 0 },
+  uEnergy: { value: 0 },
+  uShock: { value: 0 },
+  uShift: { value: 0 },
+};
+const diskMat = new THREE.ShaderMaterial({
+  uniforms: diskUniforms,
+  transparent: true,
+  blending: THREE.AdditiveBlending,
+  depthWrite: false,
+  side: THREE.DoubleSide,
+  vertexShader: `
+    varying vec2 vUv;
+    varying vec3 vPos;
+    void main() {
+      vUv = uv;
+      vPos = position;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `,
+  fragmentShader: `
+    uniform float uTime, uBass, uMid, uHigh, uEnergy, uShock, uShift;
+    varying vec2 vUv;
+    varying vec3 vPos;
+    float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453); }
+    void main() {
+      vec2 p = vUv - 0.5;
+      float r = length(p) * 2.0;
+      float a = atan(p.y, p.x);
+      float spiral = sin(a * 6.0 - r * 14.0 + uTime * (2.0 + uBass * 4.0) + uShift * 6.283);
+      float ring = smoothstep(0.15, 0.35, r) * smoothstep(1.15, 0.55, r);
+      float noise = hash(vec2(a * 3.0, floor(r * 40.0 - uTime * 8.0)));
+      float heat = ring * (0.35 + 0.65 * spiral * spiral) * (0.6 + noise * 0.5);
+      heat *= 0.7 + uEnergy * 0.9 + uShock * 0.8;
+      vec3 c1 = vec3(1.0, 0.48, 0.1);
+      vec3 c2 = vec3(0.16, 0.95, 1.0);
+      vec3 c3 = vec3(1.0, 0.95, 0.8);
+      vec3 col = mix(c1, c2, clamp(uMid + spiral * 0.2 + uShift, 0.0, 1.0));
+      col = mix(col, c3, clamp(uHigh * 0.7 + heat * 0.2, 0.0, 1.0));
+      float alpha = heat * (0.55 + uBass * 0.6);
+      gl_FragColor = vec4(col * (1.2 + uBass), alpha);
+    }
+  `,
+});
+const disk = new THREE.Mesh(new THREE.RingGeometry(3.8, 16, 128, 8), diskMat);
+disk.rotation.x = Math.PI / 2.15;
+coreGroup.add(disk);
+
+const disk2 = disk.clone();
+disk2.rotation.x = Math.PI / 1.9;
+disk2.scale.set(0.86, 0.86, 0.86);
+coreGroup.add(disk2);
+
+// Orbital frequency bars
+const BAR_COUNT = 72;
+const bars = new THREE.Group();
+scene.add(bars);
+const barMeshes = [];
+for (let i = 0; i < BAR_COUNT; i++) {
+  const geo = new THREE.BoxGeometry(0.35, 1, 0.35);
+  geo.translate(0, 0.5, 0);
+  const mat = new THREE.MeshBasicMaterial({
+    color: new THREE.Color().setHSL(i / BAR_COUNT * 0.12 + 0.48, 0.9, 0.55),
+    transparent: true,
+    opacity: 0.85,
+    blending: THREE.AdditiveBlending,
+  });
+  const m = new THREE.Mesh(geo, mat);
+  const ang = (i / BAR_COUNT) * Math.PI * 2;
+  const radius = 20;
+  m.position.set(Math.cos(ang) * radius, 0, Math.sin(ang) * radius);
+  m.userData = { ang, radius, baseHue: i / BAR_COUNT };
+  bars.add(m);
+  barMeshes.push(m);
+}
+
+// Neon tunnels / ribbons
+const ribbonGroup = new THREE.Group();
+scene.add(ribbonGroup);
+const ribbons = [];
+for (let r = 0; r < 5; r++) {
+  const pts = [];
+  for (let i = 0; i <= 180; i++) {
+    const t = i / 180 * Math.PI * 2;
+    const rad = 10 + r * 2.4;
+    pts.push(new THREE.Vector3(
+      Math.cos(t * (1 + r * 0.2)) * rad,
+      Math.sin(t * 3 + r) * (2 + r * 0.4),
+      Math.sin(t * (1 + r * 0.2)) * rad
+    ));
+  }
+  const curve = new THREE.CatmullRomCurve3(pts, true);
+  const tube = new THREE.Mesh(
+    new THREE.TubeGeometry(curve, 240, 0.05 + r * 0.01, 6, true),
+    new THREE.MeshBasicMaterial({
+      color: r % 2 ? 0x29f3ff : 0xff7a18,
+      transparent: true,
+      opacity: 0.55,
+      blending: THREE.AdditiveBlending,
+    })
+  );
+  ribbonGroup.add(tube);
+  ribbons.push(tube);
+}
+
+// Shockwave rings
+const shockwaves = [];
+function spawnShockwave(strength = 1) {
+  const mesh = new THREE.Mesh(
+    new THREE.RingGeometry(0.5, 0.7, 64),
+    new THREE.MeshBasicMaterial({
+      color: strength > 1 ? 0xffe6b0 : 0x29f3ff,
+      transparent: true,
+      opacity: 0.9,
+      blending: THREE.AdditiveBlending,
+      side: THREE.DoubleSide,
+      depthWrite: false,
+    })
+  );
+  mesh.rotation.x = Math.PI / 2;
+  mesh.userData = { life: 1, speed: 28 * strength, strength };
+  scene.add(mesh);
+  shockwaves.push(mesh);
+}
+
+// Particle storm (inward fall)
+const STORM = 4500;
+const stormGeo = new THREE.BufferGeometry();
+const stormPos = new Float32Array(STORM * 3);
+const stormSpeed = new Float32Array(STORM);
+const stormSeed = new Float32Array(STORM);
+function resetStormParticle(i, explode = false) {
+  const r = explode ? Math.random() * 8 : 18 + Math.random() * 55;
+  const theta = Math.random() * Math.PI * 2;
+  const phi = Math.acos(2 * Math.random() - 1);
+  stormPos[i * 3] = r * Math.sin(phi) * Math.cos(theta);
+  stormPos[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta) * 0.6;
+  stormPos[i * 3 + 2] = r * Math.cos(phi);
+  stormSpeed[i] = 4 + Math.random() * 14;
+  stormSeed[i] = Math.random() * Math.PI * 2;
+}
+for (let i = 0; i < STORM; i++) resetStormParticle(i);
+stormGeo.setAttribute("position", new THREE.BufferAttribute(stormPos, 3));
+const storm = new THREE.Points(
+  stormGeo,
+  new THREE.PointsMaterial({
+    color: 0xff9a3c,
+    size: 0.28,
+    transparent: true,
+    opacity: 0.9,
+    blending: THREE.AdditiveBlending,
+    depthWrite: false,
+  })
+);
+scene.add(storm);
+
+// Spectrum tunnel rings
+const tunnelGroup = new THREE.Group();
+scene.add(tunnelGroup);
+const tunnelRings = [];
+for (let i = 0; i < 24; i++) {
+  const ring = new THREE.Mesh(
+    new THREE.TorusGeometry(8 + (i % 5) * 0.15, 0.05, 8, 100),
+    new THREE.MeshBasicMaterial({
+      color: 0x29f3ff,
+      transparent: true,
+      opacity: 0.35,
+      blending: THREE.AdditiveBlending,
+    })
+  );
+  ring.position.z = -i * 6;
+  ring.userData.z = ring.position.z;
+  tunnelGroup.add(ring);
+  tunnelRings.push(ring);
+}
+
+// Lights
+scene.add(new THREE.AmbientLight(0x1a2a33, 0.6));
+const pointA = new THREE.PointLight(0x29f3ff, 2.5, 80);
+pointA.position.set(12, 10, 12);
+scene.add(pointA);
+const pointB = new THREE.PointLight(0xff7a18, 2.2, 80);
+pointB.position.set(-12, -6, 10);
+scene.add(pointB);
+
+// Floor grid reflection vibe
+const grid = new THREE.GridHelper(120, 40, 0x14505a, 0x0a2430);
+grid.position.y = -12;
+grid.material.transparent = true;
+grid.material.opacity = 0.25;
+scene.add(grid);
+
+function setMode(mode) {
+  state.mode = mode;
+  document.querySelectorAll("[data-mode]").forEach((b) => {
+    b.classList.toggle("active", b.dataset.mode === mode);
+  });
+  if (mode === "dive") state.targetZoom = 18;
+  else if (mode === "tunnel") state.targetZoom = 30;
+  else if (mode === "chaos") state.targetZoom = 60;
+  else state.targetZoom = 48;
+  toast(`MODE · ${mode.toUpperCase()}`);
+}
+
+function triggerShock(strength = 1) {
+  state.shock = Math.min(2.5, state.shock + strength);
+  spawnShockwave(strength);
+  flashEl.style.setProperty("--fx", `${50 + state.pointerN.x * 30}% ${50 - state.pointerN.y * 30}%`);
+  flashEl.style.opacity = String(Math.min(0.85, 0.25 + strength * 0.35));
+  setTimeout(() => { flashEl.style.opacity = "0"; }, 90);
+}
+
+function updateCamera(dt, bands) {
+  state.camRot.x = THREE.MathUtils.lerp(state.camRot.x, state.targetRot.x, 1 - Math.pow(0.001, dt));
+  state.camRot.y = THREE.MathUtils.lerp(state.camRot.y, state.targetRot.y, 1 - Math.pow(0.001, dt));
+  state.zoom = THREE.MathUtils.lerp(state.zoom, state.targetZoom, 1 - Math.pow(0.0008, dt));
+
+  const energyKick = bands.bass * 2.5;
+  let radius = state.zoom - energyKick;
+
+  if (state.mode === "orbit") {
+    state.targetRot.y += dt * (0.15 + bands.energy * 0.25);
+  } else if (state.mode === "dive") {
+    radius = 10 + Math.sin(state.time * 0.4) * 2 - bands.bass * 4;
+    state.targetRot.y += dt * 0.5;
+    camera.fov = THREE.MathUtils.lerp(camera.fov, 75 + bands.energy * 18, 0.08);
+  } else if (state.mode === "tunnel") {
+    radius = 8 + bands.mid * 3;
+    camera.position.set(
+      Math.sin(state.time * 0.7) * (2 + bands.high * 3),
+      Math.cos(state.time * 0.5) * (1.5 + bands.bass),
+      20 - (state.trackTime % 40)
+    );
+    camera.lookAt(0, 0, camera.position.z - 30);
+    camera.fov = THREE.MathUtils.lerp(camera.fov, 68 + bands.bass * 20, 0.1);
+    camera.updateProjectionMatrix();
+    return;
+  } else if (state.mode === "chaos") {
+    state.targetRot.x += Math.sin(state.time * 2.2) * dt * bands.energy * 0.4;
+    state.targetRot.y += dt * (0.8 + bands.bass);
+    radius = 35 + Math.sin(state.time * 1.5) * 10;
+  }
+
+  const x = Math.sin(state.camRot.y) * Math.cos(state.camRot.x) * radius;
+  const y = Math.sin(state.camRot.x) * radius * 0.8 + 2;
+  const z = Math.cos(state.camRot.y) * Math.cos(state.camRot.x) * radius;
+  camera.position.set(x, y, z);
+  camera.lookAt(0, bands.mid * 0.8, 0);
+  camera.fov = THREE.MathUtils.lerp(camera.fov, 55 + bands.energy * 12 + state.shock * 4, 0.1);
+  camera.updateProjectionMatrix();
+}
+
+function updateWorld(dt, bands) {
+  diskUniforms.uTime.value = state.time;
+  diskUniforms.uBass.value = bands.bass;
+  diskUniforms.uMid.value = bands.mid;
+  diskUniforms.uHigh.value = bands.high;
+  diskUniforms.uEnergy.value = bands.energy;
+  diskUniforms.uShock.value = state.shock;
+  diskUniforms.uShift.value = state.colorShift;
+
+  const spin = state.time * (0.3 + bands.bass * 1.5) + state.shock;
+  coreGroup.rotation.y = spin * 0.7;
+  coreGroup.rotation.z = Math.sin(state.time * 0.2) * 0.15;
+  coreGlow.scale.setScalar(1 + bands.bass * 0.35 + state.shock * 0.2);
+  coreGlow.material.opacity = 0.15 + bands.energy * 0.25;
+  eventHorizon.scale.setScalar(1 + bands.bass * 0.08);
+
+  disk.rotation.z = -spin;
+  disk2.rotation.z = spin * 1.3;
+  disk.scale.setScalar(1 + bands.bass * 0.12 + state.shock * 0.05);
+
+  // bars
+  for (let i = 0; i < barMeshes.length; i++) {
+    const m = barMeshes[i];
+    const wave = Math.sin(state.time * 3 + i * 0.35) * 0.3;
+    const h = 0.4 + (bands.bass * 8 + bands.mid * 5 + bands.high * 3) *
+      (0.35 + 0.65 * Math.abs(Math.sin(i * 0.4 + state.time * 2))) + wave;
+    const target = h * state.particleMul;
+    m.scale.y = THREE.MathUtils.lerp(m.scale.y, target, 0.25);
+    const radius = m.userData.radius - bands.energy * 1.5 + Math.sin(state.time + i) * 0.2;
+    const ang = m.userData.ang + state.time * 0.15 * state.gravity;
+    m.position.set(Math.cos(ang) * radius, (m.scale.y - 1) * 0.1, Math.sin(ang) * radius);
+    const hue = (m.userData.baseHue * 0.15 + 0.45 + state.colorShift + bands.high * 0.05) % 1;
+    m.material.color.setHSL(hue, 0.85, 0.55 + bands.bass * 0.15);
+  }
+
+  // ribbons
+  ribbonGroup.rotation.y = state.time * 0.2;
+  ribbonGroup.rotation.x = Math.sin(state.time * 0.15) * 0.2;
+  ribbons.forEach((r, i) => {
+    r.material.opacity = 0.25 + bands.mid * 0.45 + (i % 2 ? bands.high : bands.bass) * 0.3;
+    r.scale.setScalar(1 + bands.energy * 0.08 * (i + 1) * 0.15);
+  });
+
+  // stars pull
+  const sp = stars.geometry.attributes.position.array;
+  for (let i = 0; i < STAR_COUNT; i++) {
+    const ix = i * 3;
+    let x = sp[ix], y = sp[ix + 1], z = sp[ix + 2];
+    const pull = 0.15 * state.gravity * (0.4 + bands.energy);
+    x += (0 - x) * pull * dt * starVel[i] * 0.15;
+    y += (0 - y) * pull * dt * starVel[i] * 0.15;
+    z += (0 - z) * pull * dt * starVel[i] * 0.15;
+    // breathe
+    x += Math.sin(state.time + starVel[i]) * bands.high * 0.02;
+    const dist = Math.hypot(x, y, z);
+    if (dist < 4) {
+      x = starBase[ix]; y = starBase[ix + 1]; z = starBase[ix + 2];
+    }
+    sp[ix] = x; sp[ix + 1] = y; sp[ix + 2] = z;
+  }
+  stars.geometry.attributes.position.needsUpdate = true;
+  stars.rotation.y += dt * 0.02;
+  stars.material.size = 0.25 + bands.high * 0.45;
+
+  // storm particles
+  const stp = storm.geometry.attributes.position.array;
+  const stormForce = (2.2 + bands.bass * 6) * state.gravity * state.particleMul;
+  for (let i = 0; i < STORM; i++) {
+    const ix = i * 3;
+    let x = stp[ix], y = stp[ix + 1], z = stp[ix + 2];
+    const dist = Math.hypot(x, y, z) + 0.0001;
+    if (state.shock > 0.8 && Math.random() < 0.02 * state.shock) {
+      // explode outward
+      x *= 1.08; y *= 1.08; z *= 1.08;
+    } else {
+      const f = stormForce * dt * (stormSpeed[i] / dist);
+      x -= x * f; y -= y * f; z -= z * f;
+      // swirl
+      const swirl = bands.mid * 1.5 * dt;
+      const nx = x * Math.cos(swirl) - z * Math.sin(swirl);
+      const nz = x * Math.sin(swirl) + z * Math.cos(swirl);
+      x = nx; z = nz;
+      y += Math.sin(state.time * 2 + stormSeed[i]) * bands.high * 0.05;
+    }
+    if (dist < 2.8 || dist > 90) resetStormParticle(i, state.shock > 1);
+    stp[ix] = x; stp[ix + 1] = y; stp[ix + 2] = z;
+  }
+  storm.geometry.attributes.position.needsUpdate = true;
+  storm.material.color.setHSL(0.08 + state.colorShift * 0.2, 0.9, 0.55 + bands.bass * 0.2);
+  storm.material.size = 0.2 + bands.energy * 0.35 * state.particleMul;
+
+  // tunnel
+  tunnelGroup.visible = state.mode === "tunnel" || state.mode === "chaos";
+  if (tunnelGroup.visible) {
+    tunnelRings.forEach((ring, i) => {
+      ring.position.z += (40 + bands.bass * 80) * dt;
+      if (ring.position.z > 20) ring.position.z -= 24 * 6;
+      const s = 1 + Math.sin(state.time * 3 + i) * 0.05 + bands.mid * 0.35;
+      ring.scale.setScalar(s);
+      ring.material.opacity = 0.2 + bands.high * 0.5;
+      ring.rotation.z += dt * (0.5 + bands.bass);
+      ring.material.color.setHSL((0.5 + i * 0.02 + state.colorShift + bands.energy * 0.05) % 1, 0.9, 0.55);
+    });
+  }
+
+  // shockwaves
+  for (let i = shockwaves.length - 1; i >= 0; i--) {
+    const s = shockwaves[i];
+    s.userData.life -= dt * 0.65;
+    const sc = (1 - s.userData.life) * s.userData.speed;
+    s.scale.setScalar(Math.max(0.01, sc));
+    s.material.opacity = Math.max(0, s.userData.life);
+    s.rotation.z += dt * 2;
+    if (s.userData.life <= 0) {
+      scene.remove(s);
+      s.geometry.dispose();
+      s.material.dispose();
+      shockwaves.splice(i, 1);
+    }
+  }
+
+  grid.material.opacity = 0.12 + bands.bass * 0.25;
+  pointA.intensity = 1.5 + bands.high * 4 + state.shock;
+  pointB.intensity = 1.2 + bands.bass * 5;
+  pointA.position.x = Math.cos(state.time) * 14;
+  pointB.position.z = Math.sin(state.time * 0.8) * 14;
+
+  state.shock = Math.max(0, state.shock - dt * 1.6);
+  bloomPass.strength = state.bloom * (0.85 + bands.energy * 0.55 + state.shock * 0.35);
+  afterimagePass.damp = state.mode === "tunnel" ? 0.9 : 0.78 + bands.mid * 0.08;
+  renderer.toneMappingExposure = 0.95 + bands.energy * 0.35 + state.shock * 0.15;
+  scene.fog.density = 0.01 + (1 - Math.min(bands.energy, 1)) * 0.008;
+}
+
+function updateMeters(bands) {
+  const b = Math.min(100, bands.bass * 70);
+  const m = Math.min(100, bands.mid * 75);
+  const h = Math.min(100, bands.high * 80);
+  const e = Math.min(100, bands.energy * 70);
+  ui.mBass.style.width = `${b}%`;
+  ui.mMid.style.width = `${m}%`;
+  ui.mHigh.style.width = `${h}%`;
+  ui.mEnergy.style.width = `${e}%`;
+  ui.vBass.textContent = `${b | 0}`;
+  ui.vMid.textContent = `${m | 0}`;
+  ui.vHigh.textContent = `${h | 0}`;
+  ui.vEnergy.textContent = `${e | 0}`;
+}
+
+function syncTransport() {
+  if (state.source === "youtube" && state.yt && state.ytReady) {
+    try {
+      const t = state.yt.getCurrentTime() || 0;
+      const d = state.yt.getDuration() || state.trackDur || 0;
+      state.trackTime = t;
+      if (d && !state.seeking) {
+        state.trackDur = d;
+        ui.seek.value = String((t / d) * 1000);
+        ui.tCur.textContent = fmt(t);
+        ui.tDur.textContent = fmt(d);
+      }
+    } catch (_) {}
+  } else if (state.source === "file" && state.audio.mediaEl) {
+    const el = state.audio.mediaEl;
+    state.trackTime = el.currentTime || 0;
+    state.trackDur = el.duration || state.trackDur;
+    if (!state.seeking && state.trackDur) {
+      ui.seek.value = String((state.trackTime / state.trackDur) * 1000);
+      ui.tCur.textContent = fmt(state.trackTime);
+      ui.tDur.textContent = fmt(state.trackDur);
+    }
+  }
+}
+
+async function togglePlay() {
+  if (state.source === "mic") {
+    toast("MIC MODE — LIVE INPUT");
+    return;
+  }
+  if (state.source === "file" && state.audio.mediaEl) {
+    ensureAudioCtx();
+    if (state.audio.mediaEl.paused) {
+      await state.audio.mediaEl.play();
+      state.playing = true;
+      ui.playBtn.textContent = "PAUSE";
+    } else {
+      state.audio.mediaEl.pause();
+      state.playing = false;
+      ui.playBtn.textContent = "PLAY";
+    }
+    return;
+  }
+  // youtube
+  if (!state.yt || !state.ytReady) {
+    toast("LOADING YOUTUBE…");
+    return;
+  }
+  const st = state.yt.getPlayerState();
+  if (st === YT.PlayerState.PLAYING) {
+    state.yt.pauseVideo();
+  } else {
+    state.yt.playVideo();
+  }
+}
+
+// Pointer / keyboard
+window.addEventListener("pointerdown", (e) => {
+  if (e.target.closest(".dock, .side, .btn, input, #boot")) return;
+  state.pointerDown = true;
+  state.pointer.set(e.clientX, e.clientY);
+});
+window.addEventListener("pointermove", (e) => {
+  state.pointerN.set(
+    (e.clientX / window.innerWidth) * 2 - 1,
+    -(e.clientY / window.innerHeight) * 2 + 1
+  );
+  if (!state.pointerDown) return;
+  const dx = e.clientX - state.pointer.x;
+  const dy = e.clientY - state.pointer.y;
+  state.pointer.set(e.clientX, e.clientY);
+  state.targetRot.y -= dx * 0.005;
+  state.targetRot.x += dy * 0.004;
+  state.targetRot.x = THREE.MathUtils.clamp(state.targetRot.x, -1.2, 1.2);
+});
+window.addEventListener("pointerup", (e) => {
+  if (state.pointerDown && e.target.closest("#stage, body, .vignette, .flash, #hud")) {
+    // click shock if not much drag — handled separately
+  }
+  state.pointerDown = false;
+});
+window.addEventListener("click", (e) => {
+  if (e.target.closest(".dock, .side, .btn, input, #boot")) return;
+  triggerShock(0.85 + state.bands.bass * 0.5);
+});
+window.addEventListener("wheel", (e) => {
+  state.targetZoom = THREE.MathUtils.clamp(state.targetZoom + e.deltaY * 0.03, 8, 110);
+}, { passive: true });
+
+window.addEventListener("keydown", (e) => {
+  const k = e.key.toLowerCase();
+  if (k === " ") { e.preventDefault(); togglePlay(); }
+  else if (k === "1") setMode("orbit");
+  else if (k === "2") setMode("dive");
+  else if (k === "3") setMode("tunnel");
+  else if (k === "4") setMode("chaos");
+  else if (k === "f") toggleFullscreen();
+  else if (k === "g") triggerShock(1.8);
+  else if (k === "c") {
+    state.colorShift = (state.colorShift + 0.08) % 1;
+    toast("CHROMATIC SHIFT");
+  } else if (k === "m") ui.micBtn.click();
+  else if (k === "arrowright" && state.yt && state.source === "youtube") {
+    state.yt.seekTo((state.yt.getCurrentTime() || 0) + 5, true);
+  } else if (k === "arrowleft" && state.yt && state.source === "youtube") {
+    state.yt.seekTo(Math.max(0, (state.yt.getCurrentTime() || 0) - 5), true);
+  }
+});
+
+function toggleFullscreen() {
+  if (!document.fullscreenElement) document.documentElement.requestFullscreen?.();
+  else document.exitFullscreen?.();
+}
+
+// UI bindings
+ui.enterBtn.addEventListener("click", async () => {
+  boot.classList.add("hide");
+  ensureAudioCtx();
+  ui.ytBtn.classList.add("active");
+  toast("ENGAGING SINGULARITY");
+  try {
+    if (state.yt && state.ytReady) {
+      state.yt.unMute();
+      state.yt.setVolume(state.volume);
+      state.yt.playVideo();
+    }
+  } catch (_) {}
+});
+
+ui.playBtn.addEventListener("click", togglePlay);
+ui.volBtn.addEventListener("click", () => {
+  state.muted = !state.muted;
+  if (state.source === "youtube" && state.yt) {
+    if (state.muted) state.yt.mute(); else state.yt.unMute();
+  }
+  if (state.audio.mediaEl) state.audio.mediaEl.muted = state.muted;
+  if (state.audio.gain) state.audio.gain.gain.value = state.muted ? 0 : 1;
+  ui.volBtn.classList.toggle("active", state.muted);
+  ui.volBtn.textContent = state.muted ? "MUTED" : "VOL";
+});
+
+ui.seek.addEventListener("pointerdown", () => { state.seeking = true; });
+ui.seek.addEventListener("pointerup", () => {
+  const d = state.trackDur || 1;
+  const t = (Number(ui.seek.value) / 1000) * d;
+  if (state.source === "youtube" && state.yt) state.yt.seekTo(t, true);
+  if (state.source === "file" && state.audio.mediaEl) state.audio.mediaEl.currentTime = t;
+  state.seeking = false;
+});
+ui.seek.addEventListener("input", () => {
+  const d = state.trackDur || 1;
+  ui.tCur.textContent = fmt((Number(ui.seek.value) / 1000) * d);
+});
+
+ui.micBtn.addEventListener("click", async () => {
+  try { await enableMic(); }
+  catch { toast("MIC PERMISSION DENIED"); }
+});
+ui.fftBtn.addEventListener("click", () => ui.fileInput.click());
+ui.fileInput.addEventListener("change", async () => {
+  const f = ui.fileInput.files?.[0];
+  if (f) await loadAudioFile(f);
+});
+ui.ytBtn.addEventListener("click", () => {
+  useYouTubeSource();
+  if (state.yt) state.yt.playVideo();
+});
+ui.fsBtn.addEventListener("click", toggleFullscreen);
+ui.shockBtn.addEventListener("click", () => triggerShock(1.6));
+
+document.querySelectorAll("[data-mode]").forEach((b) => {
+  b.addEventListener("click", () => setMode(b.dataset.mode));
+});
+
+ui.bloomSlider.addEventListener("input", () => {
+  state.bloom = Number(ui.bloomSlider.value);
+  ui.bloomVal.textContent = state.bloom.toFixed(2);
+});
+ui.gravSlider.addEventListener("input", () => {
+  state.gravity = Number(ui.gravSlider.value);
+  ui.gravVal.textContent = state.gravity.toFixed(2);
+});
+ui.partSlider.addEventListener("input", () => {
+  state.particleMul = Number(ui.partSlider.value);
+  ui.partVal.textContent = state.particleMul.toFixed(2);
+});
+
+// Drag & drop audio
+window.addEventListener("dragenter", (e) => { e.preventDefault(); dropzone.classList.add("show"); });
+window.addEventListener("dragover", (e) => { e.preventDefault(); dropzone.classList.add("show"); });
+window.addEventListener("dragleave", (e) => {
+  if (e.target === dropzone) dropzone.classList.remove("show");
+});
+window.addEventListener("drop", async (e) => {
+  e.preventDefault();
+  dropzone.classList.remove("show");
+  const f = e.dataTransfer?.files?.[0];
+  if (f && f.type.startsWith("audio/")) await loadAudioFile(f);
+  else toast("DROP AN AUDIO FILE");
+});
+
+window.addEventListener("resize", () => {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  composer.setSize(window.innerWidth, window.innerHeight);
+  bloomPass.setSize(window.innerWidth, window.innerHeight);
+});
+
+// Beat flash from hybrid/FFT
+function maybeBeatFlash(bands) {
+  const beatIndex = Math.floor((state.trackTime || state.time) / BEAT);
+  if (bands.beat > 0.55 && beatIndex !== state.lastBeat) {
+    state.lastBeat = beatIndex;
+    if (bands.bass > 0.85) spawnShockwave(0.7 + bands.bass * 0.4);
+    if (bands.energy > 1.05) {
+      flashEl.style.opacity = "0.35";
+      setTimeout(() => { flashEl.style.opacity = "0"; }, 70);
+    }
+  }
+}
+
+let last = performance.now();
+let frames = 0;
+let fpsT = 0;
+
+function frame(now) {
+  const dt = Math.min(0.05, (now - last) / 1000);
+  last = now;
+  state.time += dt;
+  frames++;
+  fpsT += dt;
+  if (fpsT >= 0.5) {
+    state.fps = Math.round(frames / fpsT);
+    ui.fps.textContent = `${state.fps} FPS`;
+    frames = 0; fpsT = 0;
+  }
+
+  syncTransport();
+  if (state.source === "youtube" && !state.playing) {
+    // idle drift clock still for ambient motion
+  } else if (state.source === "youtube") {
+    // trackTime from player
+  } else if (state.source === "file" && state.audio.mediaEl && !state.audio.mediaEl.paused) {
+    state.playing = true;
+  }
+
+  const bands = analyseAudio();
+  maybeBeatFlash(bands);
+  updateCamera(dt, bands);
+  updateWorld(dt, bands);
+  updateMeters(bands);
+  composer.render();
+  requestAnimationFrame(frame);
+}
+
+// boot
+ui.ytBtn.classList.add("active");
+initYouTube().then(() => {
+  state.ready = true;
+  toast("YOUTUBE READY");
+}).catch(() => toast("YOUTUBE UNAVAILABLE — USE FILE FFT"));
+
+requestAnimationFrame(frame);
+
+// Expose for debug
+window.SINGULARITY = state;
+</script>
+</body>
+</html>
