<!--
=== SNAFU STUDIO v1.9 ALL-IN-ONE ===

# SNAFU STUDIO — context brief for a fresh chat (v1.9)

Paste this into a new Claude chat (or hand over the all-in-one HTML which has it
embedded at the top). Everything to bring a new session up to speed.

---

## What it is
A single-file HTML music studio built for me (Nate). Web Audio API, no frameworks,
no build step. Runs entirely in the browser. Aesthetic: **snafu.quest** — warm,
earthy, paper-and-forest palette (deep warm-black bg; tan / sage / terracotta /
amber / moss accents; pixel-hard shadows; Press Start 2P font). Gamified lite
version of Ableton / FL Studio / VirtualDJ, wrapped in a 16-bit skin.

## Files in this folder
- `snafu-studio.html` — the app, ~2400 lines. Currently at **v1.9**.
- `snafu-studio-all-in-one.html` — same app with the full docs (this brief + deploy + install guide) embedded as an HTML comment at the top. One-file portable.
- `manifest.json` — PWA metadata + icons.
- `service-worker.js` — offline caching. Registered by the HTML when served over http.
- `DEPLOY-ON-DROPLET.md` — droplet deploy instructions + Claude Code prompt for the FastAPI wrapper (serves the HTML + PWA files, proxies stem-split to Replicate, stores projects as JSON).
- `INSTALLABLE.md` — three paths to make it installable (PWA now, Tauri desktop, mobile stores).
- `SNAFU-CONTEXT-BRIEF.md` — this file.

## v1.9 features (all working, tested)

**Four tabs at the top:** STUDIO · PADS · DJ MIXER · SYNC. Sidebar (Library +
Stem Split) is always visible on desktop.

### ◈ STUDIO
- **Transport:** BPM, swing, master vol, loop toggle, play/stop, **EXPORT AS…** modal (WAV 16-bit, WAV 24-bit, individual stems, WebM/Opus)
- **Beat maker — scrollable + zoomable timeline:**
  - 1–32 bars (± buttons, existing hits preserved on resize)
  - **1–16 rows** (＋ ADD; each row: sound dropdown, per-row vol slider, mute M, delete ×)
  - Zoom slider 8–60px, FIT button, Ctrl+wheel zoom, Shift+wheel pan
  - Playhead auto-follows during playback
  - **Drag-to-paint**: click and drag to fill/erase cells fast
  - CLEAR / RANDOM buttons
- **Audio tracks (2-column grid, COMPACT toggle):** upload multi-select + **🎙 RECORD** (mic → new "REC N" track). MONITOR checkbox for optional foldback (feedback risk warning — off by default).
  - Every track shows a **waveform** below the name.
  - **Drag on waveform** to select a region (amber overlay).
  - **⟲ LOOP** — loops just the selection during playback (sample-accurate via native Web Audio loopStart/loopEnd; export includes it).
  - **CROP** — creates a new track from the selection. Original preserved.
  - **CLR SEL** — clears selection, resets to whole-buffer loop.
  - Per-track pitch (±12 st), speed (0.5–2x), volume, MUTE, SOLO.
  - Front-loaded row controls: [▶ · ⟲ · M · S] on the left, name middle, [CROP · CLR · ✕] right.
  - **▶ preview is independent** of master transport (toggle: click again = stop).

### ◈ PADS — MPC/launchpad style
- 4×4 grid, keyboard-mapped: `1234 / QWER / ASDF / ZXCV`
- Each pad assigns any of **23 built-in sounds** via dropdown
- **RECORD TO TIMELINE** mode: while playing, keys print into the beat maker on the matching row (auto-adds row if new; caps at 16 rows)
- Presets: CLASSIC · TRAP · QUIRKY FX

### ◈ DJ MIXER — 2 to 8 decks
- Deck count selector: 2 / 3 / 4 / 6 / 8. Grid auto-flows.
- Per deck:
  - Multi-file LOAD (rest go into a **per-deck queue** with ▲▼ reorder, ↑ NOW, × delete)
  - Waveform + **click-to-scrub** (smooth, doesn't pause)
  - **AUTO ▶** toggle — auto-plays next queued when current ends
  - CUE · ◀◀ Rewind 5s · ▶▶ Forward 5s · ↺ RESET · **💿 VINYL** view toggle
  - PLAY · STOP · SYNC (uses detected BPM to actually match tempo)
  - **⟲ LOOP** — grabs current position, loop length slider 0.25–16s, LIVE updates loopEnd without restarting
  - **8 effects per deck:** REVERB · DELAY · LOWPASS · HIPASS · FLANGER · BITCRUSH · 🎧 SQUEAK (one-shot scratch) · ⏻ BRAKE (vinyl slowdown to stop)
  - Knobs: TEMPO (0.005 step, Shift+arrow = 10× finer) · PITCH · VOL · HI/MID/LOW 3-band EQ
- **Multiple crossfaders** — auto-generated one per deck pair (A↔B, C↔D, E↔F, G↔H). Equal-power crossfade.
- **BPM auto-detected on load** — displayed next to filename. Naive autocorrelation; usually within a few BPM.

### ◈ SYNC — layered overview
- Master transport at top: ▶ PLAY ALL · ■ STOP · **🎙 RECORD MASTER** (arms mic + starts playback in one click; hit again = stop both).
- Row 1: **BEAT PATTERN** — mini heat-map of the whole grid.
- Rows 2+: one per audio track (upload OR recording), waveform + loop-region overlay.
- Each row has an **OPEN** button that jumps to its home tab for editing.

### Sidebar (always visible)
- **Local library** (localStorage) — save/load/delete projects.
- **.snafu import/export** — portable JSON.
- **Server sync** — POSTs to droplet's `/api/projects` (auto-wires when hosted).
- **Stem split (AI)** — uploads to droplet's `/separate` → Replicate Demucs → returns stems as new tracks. Fallback: local karaoke (center-cancel, free but rough).

### PWA installability
- `＋ INSTALL` button appears in header when browser supports it (Chrome, Edge, Android).
- iPhone/iPad: Share → Add to Home Screen (toast tells them).
- Requires `manifest.json` + `service-worker.js` served alongside the HTML (see deploy prompt).

## Sound bank (23 synthesized, no samples)
KICK, SNARE, HIHAT, OPEN HAT, CLAP, BASS, 808, RIM, TOM LO/MID/HI, COWBELL,
CRASH, SHAKER, LIGHTER (spark), CAR CLICK, SCRATCH, LASER, GLITCH, COIN, POP,
STAB, ZAP.

---

## Deploy status (droplet)

- **DigitalOcean droplet:** Ubuntu 24.04, 1 GB / $6 tier, IP **`134.209.62.87`**, user `nate`
- **Existing services on the box (DO NOT TOUCH):** a Next.js server (uid 1001), Docker + containerd, plus whatever is on port 80. Snafu must bind to **:8080** instead.
- **App folder:** `/opt/snafu` (owned by `nate`). `snafu-studio.html` uploaded.
- **Claude Code:** installed via native installer (`curl -fsSL https://claude.ai/install.sh | bash`). npm path won't work — Ubuntu ships Node 20, claude-code needs 22+.
- **Deploy session:** `tmux` session named `snafu`. Reattach with `tmux attach -t snafu`.

**Where it stands:** the FastAPI wrapper is not yet finished. Claude Code was mid-work looking up the current Replicate Demucs model slug, then Nate's terminal got polluted with mouse-tracking escape sequences (fixed with `reset`). The tmux session may or may not still have live claude. When resuming: SSH in, `tmux attach -t snafu`, check screen state, either continue or restart `claude` and paste the resume prompt in `DEPLOY-ON-DROPLET.md`.

**When the backend is done, upload the current files:**
```bash
scp snafu-studio-all-in-one.html manifest.json service-worker.js nate@134.209.62.87:/opt/snafu/
ssh nate@134.209.62.87 "cd /opt/snafu && mv -f snafu-studio-all-in-one.html snafu-studio.html && sudo systemctl restart snafu"
```
Live URL will be `http://134.209.62.87:8080/`.

## Pay-per-use AI approach (why the droplet stays cheap)
- Stem separation runs on **Replicate** (~1–3 cents/song). Droplet only holds `REPLICATE_API_TOKEN` and proxies.
- No torch / no local Demucs / no swap / no 4 GB upgrade needed.
- Nate needs a Replicate account + payment card + spend limit.
- Future: swap `/separate` to local Demucs when droplet is resized. Studio HTML unchanged.

## Backend spec (what the FastAPI app must do)
- `GET /manifest.json` → application/manifest+json (PWA)
- `GET /service-worker.js` → application/javascript + header `Service-Worker-Allowed: /`
- `GET /` → serves snafu-studio.html
- `POST /separate` → multipart `audio` (+ optional `mode`), calls Replicate Demucs, saves stems to `./data/stems/<id>/`, returns `{"stems":{"vocals":"/stems/<id>/vocals.wav","no_vocals":"/stems/<id>/no_vocals.wav"}}`
- `GET /stems/<id>/<file>` → static
- `GET/POST/DELETE /api/projects` → project JSON in `./data/projects`
- `GET /health` → `{"ok": true}`
- systemd auto-restart, `REPLICATE_API_TOKEN` in root-only env file loaded by systemd
- nginx on **:8080** (not :80), `client_max_body_size 40M`, `proxy_read_timeout 600s`
- Reject audio > 6 min or > 30 MB. Permissive CORS.

## Preferences (Nate)
- Concise, direct, no fluff. Warm but honest — call out things that won't work.
- Bias toward action; ask only when actually blocked.
- Aesthetic: snafu.quest (https://snafu.quest) — warm earthy, not neon cyberpunk.
- Wants a real installable program he can share. Path: PWA now → Tauri desktop next → mobile stores if it takes off.

## Open threads (what's next)
1. **Finish droplet FastAPI wrapper.** Reattach tmux, resume Claude Code.
2. **Upload v1.9 files** to droplet after wrapper is up.
3. **PWA test** — hit ＋ INSTALL from the live URL.
4. **Tauri wrap** for signed `.dmg / .exe` installers (guide in INSTALLABLE.md).
5. **Deferred features to discuss when he's ready:**
   - Cross-view copy (DJ region → Studio audio track) — needs proper region-select UI on DJ decks
   - Full auto-mix (beat-aligned gap detection + transitions) — real DSP work, weeks
   - Full drag-and-drop reorder for the DJ queue (currently ▲▼ arrow buttons)
   - Song "style analysis" — realistic version would be BPM + key + auto-stem-split (which already exists); true flow mimicry is a research project

## Continuing on a new device
1. Drop `snafu-studio-all-in-one.html` into the new chat's folder. That single file has everything.
2. SSH to `nate@134.209.62.87`, `tmux attach -t snafu` to resume Claude Code on the droplet.
3. If tmux is gone: `tmux new -s snafu && cd /opt/snafu && claude`, then paste the resume prompt from DEPLOY-ON-DROPLET.md.


# SNAFU STUDIO — deploy on your droplet (pay-per-use AI)

This version keeps your droplet **cheap and light**. The heavy AI (stem separation) runs in
the cloud, pay-per-use (~pennies per song), and your droplet only runs a tiny proxy that holds
your API key and forwards requests. No torch, no 4 GB, no swap needed — your current $6 / 1 GB
droplet is enough.

## What the droplet runs (all lightweight)
- `https://your-droplet/`     → the studio page
- `.../separate`              → tiny proxy → calls the cloud AI, returns stems
- `.../api/projects`          → your saved projects, stored on the droplet
- `.../stems/...`             → separated stems, served back to the browser

The studio is already wired to auto-use these when it's served from your droplet.

---

## FIX FIRST: your npm error (skip npm entirely)

You hit two blockers back-to-back:
```
EACCES: permission denied, mkdir '/usr/lib/node_modules/@anthropic-ai'
...
Not compatible with your version of node/npm ... Required node ^22
```
Your user isn't root (permission denied), AND your Ubuntu ships Node 20 while Claude Code
needs Node 22+. **Don't fight npm** — use the native installer. It ships its own runtime,
so no Node, no root, no npm at all:

```bash
curl -fsSL https://claude.ai/install.sh | bash
exec bash        # reload PATH so the `claude` command is found
claude --version # should print a version
```

If it says "command not found" after `exec bash`, run:
```bash
echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.bashrc && exec bash
```

Only if you insist on npm: install Node 22 with nvm first:
```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
exec bash
nvm install 22 && nvm use 22
npm install -g @anthropic-ai/claude-code   # no sudo — nvm's prefix is user-owned
```

---

## Step 1 — get a Replicate API token (this is the pay-per-use AI)
1. Sign up at https://replicate.com (GitHub login works).
2. Add a payment card under Billing. You're billed per second of processing — a Demucs run is
   usually **1–3 cents per song**. Set a spend limit if you want a hard cap.
3. Copy your API token from https://replicate.com/account/api-tokens. It looks like `r8_....`.
   Keep it secret — it stays on your droplet, never in the browser.

> Not Replicate specifically? Any pay-per-use inference host works. Replicate is the simplest.

## Step 2 — run Claude Code on the droplet
1. SSH in: `ssh nate@YOUR_DROPLET_IP`
2. Install Claude Code with the native installer (see FIX FIRST above).
3. Make a project folder and drop the studio in it:
   ```bash
   sudo mkdir -p /opt/snafu && sudo chown $USER /opt/snafu
   cd /opt/snafu
   # upload snafu-studio.html here (scp from your laptop, or nano-paste it)
   ```
4. Run `claude` in that folder, then paste the prompt below.

---

## ⬇️ PASTE THIS INTO CLAUDE CODE (on the droplet)

```
I'm on my Ubuntu DigitalOcean droplet (1 GB is fine — the heavy AI runs in the cloud).
Build and deploy ONE lightweight FastAPI app that serves my music studio and a thin
pay-per-use AI proxy. snafu-studio.html is in this folder. I'll provide a Replicate API
token as the env var REPLICATE_API_TOKEN.

The app must:
0. Serve these static files from the same folder with correct content-types:
   - GET /manifest.json         -> application/manifest+json  (PWA manifest)
   - GET /service-worker.js     -> application/javascript, ALSO add response
     header "Service-Worker-Allowed: /" so it can control the whole site
1. GET /  -> serve snafu-studio.html (text/html).
2. POST /separate -> accept multipart field "audio" (and optional "mode": "vocals" default,
   or "full" for 4 stems). Use the `replicate` Python client with REPLICATE_API_TOKEN to run
   a Demucs stem-separation model in the cloud (pick a current, working public Demucs model on
   Replicate — verify the exact model slug and its input/output field names against
   replicate.com before wiring it). Download the returned stem files into
   ./data/stems/<random_id>/ and respond with JSON:
   { "stems": { "vocals": "/stems/<id>/vocals.wav", "no_vocals": "/stems/<id>/no_vocals.wav" } }
   (URLs on my own domain, so the browser has no CORS issues). Reject audio > 6 min or > 30 MB.
3. GET /stems/<id>/<file> -> serve those stem files statically.
4. Project storage (no database — JSON files in ./data/projects):
   - GET /api/projects  -> array of saved project objects
   - POST /api/projects -> body is project JSON with "name"; save/overwrite
   - DELETE /api/projects/{name} -> delete it
5. Permissive CORS. 6. GET /health -> {"ok": true}.

Deploy for real:
- Python venv; install fastapi, uvicorn, python-multipart, replicate, requests.
  (NOTE: do NOT install torch/demucs locally — the AI is remote.)
- Put REPLICATE_API_TOKEN in an env file that only root can read; load it in the systemd unit.
- systemd service on 127.0.0.1:8000, auto-restart on reboot/crash.
- nginx reverse proxy :80 -> :8000, client_max_body_size 40M, proxy_read_timeout 600s
  (cloud jobs can take a couple minutes on cold start).
- Serve at http://MY_DROPLET_IP/ (domain only if I give you one).
- Test /health with curl. Then do ONE real /separate with a short clip and confirm stems come
  back and are reachable. Tell me the exact URL to open.

Explain each command before running it. Ask me for the Replicate token when you need it.
Keep it to as few files as possible.
```

---

## After it finishes
Open `http://YOUR_DROPLET_IP/`. The studio loads; "☁ Save to Server" and the AI "Stem Split"
just work (auto-pointed at your droplet). Each separation costs ~a few cents on Replicate.

### Free rough option, no cost
The studio's **KARAOKE (LOCAL)** button makes a quick instrumental in the browser for free
(center-channel trick). Lower quality, but zero cost and instant — good for scratch ideas.

### HTTPS + a clean link to share
Point a domain at the droplet, then tell Claude Code:
"Add Let's Encrypt HTTPS with certbot for my domain NAME."

---

## Upgrading to fully self-hosted Demucs later
When you resize to 4 GB+ and want to stop paying per song, tell me and I'll give you the
swap-file + local-Demucs prompt. The studio doesn't change — only the /separate backend does.

## Honesty
- Cold starts: the first cloud run after idle can take longer while the model spins up; later
  runs are quick. The 600s nginx timeout covers this.
- Cost control: set a spend limit on Replicate so you can never exceed your budget.
- Projects live in ./data on the droplet — snapshot the droplet occasionally so you don't lose mixes.


# Making SNAFU installable

Three paths, cheapest first. Start with #1 (free, 30 min). #2 is signed installers
for Mac/Win/Linux (~2 hours). #3 is the mobile app store route.

---

## 1) PWA (installable from any browser) — DO THIS FIRST

**What you get:** users visit your droplet URL, hit **＋ INSTALL** in the header
(or their browser's install icon), and SNAFU lands on their desktop / dock / home
screen like a real app. Works offline. Zero extra cost.

**Files you already have (in this folder):**
- `snafu-studio.html` — the app (already links to the manifest + registers the SW)
- `manifest.json` — PWA metadata + icons
- `service-worker.js` — caches the app for offline use

**Deploy step — on your droplet:**

Copy all three files into `/opt/snafu/` next to whatever's there:

```bash
scp snafu-studio.html manifest.json service-worker.js nate@134.209.62.87:/opt/snafu/
```

Then tell your FastAPI app (or add to it) to serve those two extra files as static.
If Claude Code already built the FastAPI wrapper, ask it:

```
Add static routes so GET /manifest.json and GET /service-worker.js serve those
files from /opt/snafu with the correct content types (application/manifest+json
and application/javascript). service-worker.js MUST be served with header
"Service-Worker-Allowed: /" so it can control the whole site.
```

**Install on each device:**
- **Chrome / Edge desktop:** click the install icon on the right of the URL bar, or hit the ＋ INSTALL button in the app.
- **Firefox desktop:** it lists SNAFU under "Recently installed" but a proper install needs a helper extension.
- **iPhone/iPad Safari:** Share → **Add to Home Screen**. It becomes a real app with its own icon.
- **Android Chrome:** three-dot menu → **Install app**.

Once installed, it opens in its own window (no browser chrome), runs offline, and
looks native.

---

## 2) Real signed desktop installer via Tauri — .app / .exe / .deb

**Why Tauri and not Electron:** Tauri wraps your existing HTML/CSS/JS in a native
webview instead of shipping a whole browser. Result: a ~10 MB `.app` or `.exe`
instead of Electron's ~100 MB. Same speed, one-tenth the size.

**One-time setup (on your Mac):**

```bash
# 1. Install Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source $HOME/.cargo/env

# 2. Install Node 18+ (via nvm or brew)
brew install node

# 3. Install the Tauri CLI
npm install -g @tauri-apps/cli
```

**Wrap SNAFU:**

```bash
mkdir snafu-desktop && cd snafu-desktop
npm create tauri-app@latest
# When prompted:
#   App name: SNAFU Studio
#   Frontend: Vanilla JS
#   package manager: npm
```

Then replace the generated `src/index.html` with your `snafu-studio.html`. If you
use the all-in-one, drop it in as `index.html` and adjust the config so
`manifest.json` and `service-worker.js` sit next to it in `src/`.

**Build the installers:**

```bash
cd snafu-desktop
npm run tauri build
```

This produces:
- macOS: `src-tauri/target/release/bundle/dmg/SNAFU Studio_<ver>_x64.dmg`
- Windows (if you build on Windows): `.msi`
- Linux (if you build on Linux): `.deb` and `.AppImage`

Each is a normal installer you can email or upload. Users double-click, drag to
Applications, done.

**Cross-compile:** Tauri's official cross-compile support is limited. Easiest path
for shipping all three OSes: use GitHub Actions with their prebuilt Tauri workflow
(free for public repos). Ask me to set that up when you want it.

---

## 3) Mobile app stores (later, if you're going commercial)

**iOS App Store:** wrap the PWA with **Capacitor** (`npm install -g @capacitor/cli`)
into an Xcode project. Then Xcode → Archive → App Store Connect. Requires a $99/yr
Apple Developer account and going through App Store review. Web Audio works but has
gotchas (audio needs user interaction to start, background audio requires extra
permissions).

**Google Play:** Capacitor produces an Android project too. Bubblewrap
(`npm install -g @bubblewrap/cli`) can also generate a TWA (Trusted Web Activity)
that just points at your PWA URL — the shortest path to a Play listing. $25 one-time
developer fee.

---

## Recommended sequence

1. **Now:** finish droplet deploy. Add PWA files. Users can install via browser.
2. **When it's stable:** Tauri wrap → signed `.dmg` for Mac, `.exe` for Windows. Send around.
3. **If it takes off:** Capacitor → App Store / Play Store.

Each step reuses the same HTML file. You don't rewrite anything.

-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SNAFU STUDIO — Beat Lab · Pads · DJ · Sync</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="SNAFU">
<meta name="theme-color" content="#1a1611">
<link rel="icon" href="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect fill='%23d4a373' width='100' height='100'/%3E%3Ctext y='72' x='50' text-anchor='middle' font-size='58' fill='%230e0b07' font-family='monospace'%3E%E2%96%9A%3C/text%3E%3C/svg%3E">
<link rel="manifest" href="manifest.json">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
  :root{
    --bg:#1a1611; --panel:#26201a; --panel2:#332b22; --edge:#0e0b07;
    --ink:#f0e6d2; --ink-dim:#b8a98a;
    --tan:#d4a373; --sage:#a8c686; --rust:#e07a5f; --amber:#e6b800;
    --moss:#7d9d5c; --clay:#8a6a4a; --grid:#3d3327;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
    font-family:'Press Start 2P',monospace;image-rendering:pixelated;}
  body{padding:14px 14px 60px;background-image:
    radial-gradient(circle at 20% 10%,#2a2016 0,transparent 45%),
    radial-gradient(circle at 80% 90%,#1e2a1a 0,transparent 45%);}
  h1,h2,h3{margin:0;letter-spacing:1px}
  header{display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:linear-gradient(90deg,var(--tan),var(--sage));padding:12px 14px;margin-bottom:10px;
    border:3px solid var(--edge);box-shadow:6px 6px 0 var(--edge);flex-wrap:wrap;}
  header h1{font-size:18px;color:var(--edge);text-shadow:2px 2px 0 var(--ink);}
  header .sub{font-size:8px;color:var(--edge);margin-top:6px;opacity:.8}
  .btn{font-family:inherit;font-size:9px;cursor:pointer;color:var(--ink);background:var(--panel2);
    border:3px solid var(--edge);box-shadow:3px 3px 0 var(--edge);padding:9px 11px;transition:transform .05s;}
  .btn:hover{filter:brightness(1.1)}
  .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--edge)}
  .btn.tan{background:var(--tan);color:var(--edge)}
  .btn.sage{background:var(--sage);color:var(--edge)}
  .btn.rust{background:var(--rust);color:var(--ink)}
  .btn.amber{background:var(--amber);color:var(--edge)}
  .btn.moss{background:var(--moss);color:var(--edge)}
  .btn.sm{font-size:8px;padding:6px 8px;box-shadow:2px 2px 0 var(--edge)}
  .btn.on{outline:3px solid var(--ink)}
  .tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
  .tab-btn{font-family:inherit;font-size:10px;padding:10px 14px;cursor:pointer;
    background:var(--panel);color:var(--ink-dim);border:3px solid var(--edge);
    box-shadow:3px 3px 0 var(--edge)}
  .tab-btn.on{background:var(--amber);color:var(--edge)}
  .layout{display:grid;grid-template-columns:1fr;gap:14px}
  .panel{background:var(--panel);border:3px solid var(--edge);box-shadow:5px 5px 0 var(--edge);padding:12px}
  .panel h2{font-size:12px;color:var(--tan);margin-bottom:10px;text-shadow:1px 1px 0 var(--edge)}
  .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .spacer{flex:1}
  #transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .bpm{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--ink-dim)}
  .bpm input{width:60px}
  input[type=range]{-webkit-appearance:none;appearance:none;height:14px;background:var(--bg);
    border:3px solid var(--edge);box-shadow:inset 2px 2px 0 var(--edge);cursor:pointer}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:20px;
    background:var(--amber);border:3px solid var(--edge);cursor:pointer}
  input[type=range]::-moz-range-thumb{width:14px;height:20px;background:var(--amber);
    border:3px solid var(--edge);cursor:pointer}
  input[type=number],input[type=text],select{font-family:inherit;font-size:9px;background:var(--bg);color:var(--ink);
    border:3px solid var(--edge);padding:6px}
  select{padding:6px 4px}
  .led{width:12px;height:12px;border:2px solid var(--edge);background:#2a1a10;display:inline-block}
  .led.on{background:var(--sage);box-shadow:0 0 8px var(--sage)}

  /* ===== SEQUENCER ===== */
  #seq-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;
    font-size:8px;color:var(--ink-dim)}
  #seq-toolbar .grp{display:flex;align-items:center;gap:6px;background:var(--panel2);
    border:3px solid var(--edge);padding:6px 8px}
  #seq-toolbar input[type=range]{width:120px;height:12px}
  #zoom-label{color:var(--amber);min-width:44px;text-align:right}
  #bars-label{color:var(--amber);min-width:26px;text-align:right}
  .seq-viewport{border:3px solid var(--edge);background:var(--bg);
    box-shadow:inset 3px 3px 0 var(--edge);overflow:hidden;position:relative}
  .seq-scroll{overflow-x:auto;overflow-y:hidden;position:relative}
  .seq-scroll::-webkit-scrollbar{height:14px}
  .seq-scroll::-webkit-scrollbar-track{background:var(--panel2);border-top:3px solid var(--edge)}
  .seq-scroll::-webkit-scrollbar-thumb{background:var(--tan);border:2px solid var(--edge)}
  .seq-grid{position:relative;display:grid;grid-template-columns:180px 1fr;gap:0;min-width:100%}
  .seq-labels{background:var(--panel);border-right:3px solid var(--edge);position:sticky;left:0;z-index:3}
  .seq-labels .hdr{height:22px;border-bottom:2px solid var(--edge);background:var(--panel2);
    display:flex;align-items:center;justify-content:space-between;padding:0 6px;font-size:7px;color:var(--ink-dim)}
  .seq-labels .lbl{height:38px;display:flex;align-items:center;gap:4px;padding:0 4px;font-size:8px;
    color:var(--amber);border-bottom:2px solid var(--edge)}
  .seq-labels select{font-size:7px;padding:3px;flex:1;min-width:0;max-width:100px}
  .seq-labels .rvol{width:36px;height:10px}
  .seq-labels .rvol::-webkit-slider-thumb{width:10px;height:14px}
  .seq-labels .rmute,.seq-labels .rdel{font-size:7px;padding:3px 5px;box-shadow:1px 1px 0 var(--edge);
    background:var(--panel2);color:var(--ink);border:2px solid var(--edge);cursor:pointer;font-family:inherit}
  .seq-labels .rmute.on{background:var(--rust)}
  .seq-labels .rdel{background:var(--panel2);color:var(--rust)}
  .seq-canvas-wrap{position:relative}
  .seq-ruler{height:22px;position:relative;background:var(--panel2);border-bottom:2px solid var(--edge)}
  .bar-mark{position:absolute;top:0;bottom:0;border-left:2px solid var(--clay);
    font-size:7px;color:var(--ink-dim);padding:5px 0 0 4px}
  .seq-rows{position:relative}
  .seq-track{height:38px;position:relative;border-bottom:2px solid var(--edge);
    background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--step-w) - 1px),
      var(--grid) calc(var(--step-w) - 1px),var(--grid) var(--step-w))}
  .step{position:absolute;top:4px;height:30px;background:transparent;
    border:1px solid transparent;cursor:pointer;box-sizing:border-box}
  .step.beat{background:rgba(212,163,115,.05)}
  .step:hover{background:rgba(240,230,210,.1)}
  .step.on{background:var(--rust);border:2px solid var(--ink);box-shadow:inset 0 0 0 1px var(--edge)}
  .step.play{outline:2px solid var(--amber);outline-offset:-1px}
  .playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--amber);
    box-shadow:0 0 6px var(--amber);pointer-events:none;z-index:2;display:none}

  /* tracks */
  #tracks{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:10px}
  .track{background:var(--panel2);border:3px solid var(--edge);box-shadow:3px 3px 0 var(--edge);padding:10px;margin:0}
  .track .tname{font-size:9px;color:var(--sage);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .track .wave{position:relative;height:44px;background:var(--bg);border:2px solid var(--edge);
    margin-top:8px;overflow:hidden;box-shadow:inset 2px 2px 0 var(--edge);cursor:crosshair}
  .track .wave canvas{width:100%;height:100%;display:block;pointer-events:none}
  .track .wave .sel{position:absolute;top:0;bottom:0;background:rgba(230,184,0,.25);
    border-left:1px solid var(--amber);border-right:1px solid var(--amber);
    pointer-events:none;display:none;z-index:1}
  .knobs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:8px}
  .knob{font-size:8px}
  .knob label{display:block;margin-bottom:5px;color:var(--tan)}
  .knob .val{color:var(--amber)}
  .knob input[type=range]{width:100%}

  /* ===== PADS ===== */
  .pad-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:520px}
  .pad{aspect-ratio:1;position:relative;cursor:pointer;background:var(--panel2);
    border:3px solid var(--edge);box-shadow:3px 3px 0 var(--edge);
    display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;text-align:center}
  .pad:hover{filter:brightness(1.15)}
  .pad.hit{background:var(--rust);color:var(--ink);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--edge)}
  .pad.sel{outline:3px solid var(--amber)}
  .pad .key{font-size:14px;color:var(--amber)}
  .pad .snd{font-size:7px;color:var(--ink-dim);margin-top:6px;line-height:1.4;
    max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .pad.hit .snd{color:var(--ink)}
  .pad-info{font-size:9px;color:var(--ink-dim);line-height:1.6;margin-top:10px}
  .pad-controls{display:flex;flex-direction:column;gap:10px}
  .pad-assign{background:var(--panel2);border:3px solid var(--edge);padding:10px;box-shadow:3px 3px 0 var(--edge)}
  .pad-assign h3{font-size:10px;color:var(--tan);margin-bottom:8px}
  .pad-assign .row{margin-bottom:6px}
  .rec-dot{width:12px;height:12px;background:#3a1010;border:2px solid var(--edge);border-radius:50%;display:inline-block}
  .rec-dot.on{background:var(--rust);box-shadow:0 0 8px var(--rust)}

  /* ===== DJ MIXER ===== */
  .dj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
  .deck{background:var(--panel);border:3px solid var(--edge);box-shadow:5px 5px 0 var(--edge);padding:12px}
  .deck h3{font-size:12px;margin-bottom:8px;color:var(--tan)}
  .deck .fname{font-size:8px;color:var(--sage);margin:6px 0;min-height:14px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .deck .wave{background:var(--bg);border:2px solid var(--edge);height:60px;position:relative;
    overflow:hidden;box-shadow:inset 2px 2px 0 var(--edge);cursor:crosshair}
  .deck canvas{width:100%;height:100%;display:block}
  .deck .pos{position:absolute;top:0;bottom:0;width:2px;background:var(--amber);
    box-shadow:0 0 6px var(--amber);pointer-events:none;z-index:2}
  .deck .loop-region{position:absolute;top:0;bottom:0;background:rgba(230,184,0,.18);
    border-left:1px solid var(--amber);border-right:1px solid var(--amber);
    pointer-events:none;display:none;z-index:1}
  .deck .transport{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;align-items:center}
  .deck .transport button{font-size:8px;padding:6px 8px;box-shadow:2px 2px 0 var(--edge)}
  .deck .transport button[data-fx].on{background:var(--sage);color:var(--edge)}
  .deck .transport button[data-act="loop"].on{background:var(--amber);color:var(--edge)}
  .deck .transport select{font-size:8px;padding:4px}
  .deck .knobs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px}
  .crossfader-panel{background:var(--panel);border:3px solid var(--edge);box-shadow:5px 5px 0 var(--edge);padding:14px;text-align:center}
  .crossfader-panel input[type=range]{width:100%;max-width:400px;height:22px}
  .crossfader-panel .lbl-row{display:flex;justify-content:space-between;max-width:400px;
    margin:0 auto 6px;font-size:9px;color:var(--tan)}

  .lib-item{display:flex;align-items:center;gap:8px;font-size:8px;background:var(--panel2);
    border:3px solid var(--edge);padding:8px;margin-bottom:8px}
  .lib-item .ln{flex:1;color:var(--sage);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hint{font-size:8px;color:var(--ink-dim);line-height:1.6;margin-top:8px}
  a{color:var(--amber)}
  .toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--sage);
    color:var(--edge);font-size:9px;padding:12px 16px;border:3px solid var(--edge);box-shadow:4px 4px 0 var(--edge);
    z-index:50;display:none}
  .cfgbar{font-size:8px;color:var(--ink-dim)}
  .cfgbar input{width:220px}
  @media(min-width:1000px){.layout{grid-template-columns:1fr 320px}.wide{grid-column:1/2}.side{grid-column:2/3;grid-row:1/6}}

  /* Vinyl disc */
  .vinyl-view{width:100%;height:100%;align-items:center;justify-content:center;background:var(--bg)}
  .vinyl-disc{width:160px;height:160px;border-radius:50%;
    background:radial-gradient(circle at 50% 50%,
      var(--rust) 0 12%, var(--edge) 12% 15%, #1a1611 15% 30%,
      #251d16 30% 30.5%, #1a1611 30.5% 45%,
      #251d16 45% 45.5%, #1a1611 45.5% 60%,
      #251d16 60% 60.5%, #1a1611 60.5% 75%,
      #251d16 75% 75.5%, #1a1611 75.5% 100%);
    border:3px solid var(--edge);box-shadow:4px 4px 0 var(--edge);position:relative}
  .vinyl-disc::after{content:"";position:absolute;top:48%;left:0;right:0;height:4%;
    background:linear-gradient(90deg,transparent 45%,var(--amber) 45% 55%,transparent 55%);opacity:.35}
  @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

  /* Queue panel */
  .queue-panel{margin-top:10px;background:var(--bg);border:2px solid var(--edge);
    max-height:120px;overflow-y:auto;padding:6px}
  .queue-panel .qhint{font-size:7px;color:var(--ink-dim);padding:2px 4px}
  .queue-panel .qrow{display:flex;align-items:center;gap:4px;padding:4px;
    background:var(--panel2);margin:3px 0;border:2px solid var(--edge)}
  .queue-panel .qname{flex:1;font-size:7px;color:var(--sage);overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .queue-panel button{font-family:inherit;font-size:7px;padding:3px 5px;
    background:var(--panel);color:var(--ink);border:2px solid var(--edge);cursor:pointer}
  .queue-panel button:hover{background:var(--tan);color:var(--edge)}

  /* Autoq toggle */
  .deck button[data-act="autoq"].on{background:var(--sage);color:var(--edge);outline:2px solid var(--ink)}

  /* Modal */
  .modal{position:fixed;inset:0;background:rgba(14,11,7,.85);z-index:100;
    display:flex;align-items:center;justify-content:center}
  .modal-card{background:var(--panel);border:3px solid var(--edge);
    box-shadow:6px 6px 0 var(--edge);padding:20px;max-width:420px;width:90%}

  /* Compact tracks */
  #tracks.compact .track{padding:6px 8px;margin-bottom:6px}
  #tracks.compact .track .wave{height:24px;margin-top:4px}
  #tracks.compact .track .knobs{display:none}

  /* SYNC lanes */
  .sync-lane{background:var(--panel2);border:3px solid var(--edge);box-shadow:3px 3px 0 var(--edge);
    margin-bottom:8px;padding:8px}
  .sync-lane .lane-head{display:flex;align-items:center;gap:8px;font-size:8px;margin-bottom:6px}
  .sync-lane .lane-name{color:var(--sage);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sync-lane .lane-info{color:var(--ink-dim)}
  .sync-lane .lane-body{position:relative;height:44px;background:var(--bg);border:2px solid var(--edge);
    overflow:hidden;box-shadow:inset 2px 2px 0 var(--edge)}
  .sync-lane canvas{width:100%;height:100%;display:block}
  .sync-lane .sync-region{position:absolute;top:0;bottom:0;background:rgba(230,184,0,.25);
    border-left:1px solid var(--amber);border-right:1px solid var(--amber);display:none}
  .sync-lane .sync-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--amber);
    box-shadow:0 0 6px var(--amber);pointer-events:none;display:none;left:0;z-index:2}
  .sync-lane.beat .lane-body{display:grid;grid-template-columns:repeat(var(--total-steps,16),1fr);
    grid-auto-rows:1fr;padding:2px;gap:1px}
  .sync-lane.beat .sync-cell{background:var(--panel);border:1px solid var(--edge)}
  .sync-lane.beat .sync-cell.on{background:var(--rust)}
  .sync-lane.beat .sync-cell.beat-1{background:#2a1e14}
  .sync-lane.beat .sync-cell.on.beat-1{background:var(--rust)}
</style>
</head>
<body>
<header>
  <div>
    <h1>▚ SNAFU STUDIO ▞</h1>
    <div class="sub">16-BIT BEAT LAB · PADS · DJ · v1.2</div>
  </div>
  <div class="row">
    <span class="led" id="clock-led"></span>
    <button class="btn sage" id="play">▶ PLAY</button>
    <button class="btn rust" id="stop">■ STOP</button>
    <button class="btn amber" id="export">⤓ EXPORT AS…</button>
    <button class="btn moss" id="install-btn" style="display:none" title="Install SNAFU as a desktop / home-screen app">＋ INSTALL</button>
  </div>
</header>

<nav class="tabs">
  <button class="tab-btn on" data-view="studio">◈ STUDIO</button>
  <button class="tab-btn" data-view="pads">◈ PADS</button>
  <button class="tab-btn" data-view="dj">◈ DJ MIXER</button>
  <button class="tab-btn" data-view="sync">◈ SYNC</button>
</nav>

<div class="layout">
  <!-- =================== STUDIO VIEW =================== -->
  <div id="view-studio" class="wide">
    <section class="panel">
      <h2>◈ TRANSPORT</h2>
      <div id="transport">
        <div class="bpm"><span>BPM</span><input type="number" id="bpm" min="40" max="220" value="90"></div>
        <div class="bpm"><span>SWING</span><input type="range" id="swing" min="0" max="60" value="0" style="width:100px"></div>
        <div class="bpm"><span>MASTER</span><input type="range" id="master" min="0" max="120" value="90" style="width:120px"></div>
        <div class="bpm"><span>LOOP</span>
          <label style="display:inline-flex;align-items:center;gap:4px">
            <input type="checkbox" id="loop" checked> ON
          </label>
        </div>
      </div>
      <div class="hint">Loop plays the whole timeline. Assign any sound to any row from the dropdowns below. Space = play/stop.</div>
    </section>

    <section class="panel" style="margin-top:14px">
      <h2>◈ BEAT MAKER — SCROLLABLE TIMELINE</h2>
      <div id="seq-toolbar">
        <div class="grp">
          <span>BARS</span>
          <button class="btn sm" id="bars-minus">−</button>
          <span id="bars-label">4</span>
          <button class="btn sm" id="bars-plus">＋</button>
        </div>
        <div class="grp">
          <span>ZOOM</span>
          <input type="range" id="zoom" min="8" max="60" step="1" value="24">
          <span id="zoom-label">24 px</span>
          <button class="btn sm" id="zoom-fit">FIT</button>
        </div>
        <div class="grp">
          <span>ROWS</span>
          <button class="btn sm sage" id="row-add">＋ ADD</button>
          <span id="rows-label" style="color:var(--amber);min-width:26px;text-align:right">4</span>
        </div>
        <div class="grp">
          <button class="btn sm rust" id="seq-clear">CLEAR</button>
          <button class="btn sm tan" id="seq-random">RANDOM</button>
        </div>
        <span class="spacer"></span>
        <span class="hint" style="margin:0">Up to 16 rows · pick any sound · layer 'em up</span>
      </div>
      <div class="seq-viewport">
        <div class="seq-scroll" id="seq-scroll">
          <div class="seq-grid" id="seq-grid">
            <div class="seq-labels" id="seq-labels"></div>
            <div class="seq-canvas-wrap" id="seq-canvas-wrap">
              <div class="seq-ruler" id="seq-ruler"></div>
              <div class="seq-rows" id="seq-rows"></div>
              <div class="playhead" id="playhead"></div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="panel" style="margin-top:14px">
      <h2>◈ AUDIO TRACKS</h2>
      <div class="row" style="margin-bottom:10px">
        <label class="btn tan" for="file">＋ UPLOAD AUDIO</label>
        <input id="file" type="file" accept="audio/*,.wav,.mp3,.ogg,.flac,.m4a" multiple style="display:none">
        <button class="btn rust" id="mic-rec"><span class="rec-dot" id="mic-dot"></span> 🎙 RECORD</button>
        <label style="display:inline-flex;align-items:center;gap:4px;font-size:8px;color:var(--ink-dim)">
          <input type="checkbox" id="mic-monitor"> MONITOR
        </label>
        <span class="spacer"></span>
        <label style="display:inline-flex;align-items:center;gap:4px;font-size:8px;color:var(--ink-dim)">
          <input type="checkbox" id="tracks-compact"> COMPACT
        </label>
      </div>
      <div class="hint" id="mic-status" style="margin-bottom:8px">Click RECORD to lay vocals / instruments over the beat.</div>
      <div id="tracks"></div>
      <div class="hint" id="notracks">No tracks yet. Upload a .wav to get cooking.</div>
    </section>
  </div>

  <!-- =================== PADS VIEW =================== -->
  <div id="view-pads" class="wide" style="display:none">
    <section class="panel">
      <h2>◈ 4×4 PADS — MPC / LAUNCHPAD STYLE</h2>
      <div class="row" style="margin-bottom:12px">
        <button class="btn sm sage" id="pad-preview">TAP TO TEST</button>
        <button class="btn sm rust" id="pad-record"><span class="rec-dot" id="rec-dot"></span> RECORD TO TIMELINE</button>
        <span class="hint" style="margin:0">While RECORD is on, hits print into the beat maker on the row matching each pad's sound.</span>
      </div>
      <div class="row" style="align-items:flex-start;gap:20px">
        <div id="pad-grid" class="pad-grid"></div>
        <div class="pad-controls" style="flex:1;min-width:240px">
          <div class="pad-assign">
            <h3>ASSIGN SOUND</h3>
            <div class="row">
              <span style="font-size:8px;color:var(--ink-dim)">PAD</span>
              <span id="sel-pad-name" style="font-size:9px;color:var(--amber)">—</span>
            </div>
            <div class="row" style="margin-top:6px">
              <select id="pad-sound" style="flex:1"></select>
            </div>
            <div class="hint">Pick from 20+ built-in sounds: drums, bass, 808, cowbell, lighter spark, car click, laser, coin, scratch, and more.</div>
          </div>
          <div class="pad-assign">
            <h3>KEY LAYOUT</h3>
            <pre style="font-size:9px;color:var(--sage);margin:0;line-height:1.6">
1  2  3  4
Q  W  E  R
A  S  D  F
Z  X  C  V</pre>
            <div class="hint">Any key on your laptop keyboard is live. Works even while a track plays.</div>
          </div>
          <div class="pad-assign">
            <h3>PRESETS</h3>
            <div class="row">
              <button class="btn sm tan" data-preset="classic">CLASSIC</button>
              <button class="btn sm tan" data-preset="trap">TRAP</button>
              <button class="btn sm tan" data-preset="quirky">QUIRKY FX</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- =================== DJ VIEW =================== -->
  <div id="view-dj" class="wide" style="display:none">
    <section class="panel">
      <h2>◈ DJ MIXER — MULTI-DECK · EFFECTS · LOOPS</h2>
      <div id="dj-toolbar" class="row" style="margin-bottom:12px;font-size:8px;color:var(--ink-dim)">
        <div class="grp" style="display:flex;align-items:center;gap:6px;background:var(--panel2);border:3px solid var(--edge);padding:6px 8px">
          <span>DECKS</span>
          <select id="deck-count">
            <option value="2" selected>2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="6">6</option>
            <option value="8">8</option>
          </select>
        </div>
        <span class="spacer"></span>
        <span class="hint" style="margin:0">Click waveform to scrub · LOOP grabs current position · Shift+arrow on knobs for fine tune</span>
      </div>
      <div class="dj-grid" id="dj-grid"></div>
      <div id="crossfaders" style="margin-top:14px"></div>
    </section>
  </div>

  <!-- =================== SYNC VIEW =================== -->
  <div id="view-sync" class="wide" style="display:none">
    <section class="panel">
      <h2>◈ SNAFU SYNC — LAYERED OVERVIEW</h2>
      <div class="row" style="margin-bottom:10px">
        <button class="btn sage" id="sync-play">▶ PLAY ALL</button>
        <button class="btn rust" id="sync-stop">■ STOP</button>
        <button class="btn amber" id="sync-record">🎙 RECORD MASTER</button>
        <span class="spacer"></span>
        <span class="hint" style="margin:0">Everything running through the master transport — beat, tracks, recordings all in sync. Click OPEN to edit any lane in its home tab.</span>
      </div>
      <div id="sync-lanes"></div>
    </section>
  </div>

  <!-- =================== SIDEBAR (always) =================== -->
  <aside class="panel side">
    <h2>◈ LIBRARY</h2>
    <div class="row" style="margin-bottom:8px">
      <input type="text" id="proj-name" placeholder="project name" style="flex:1">
      <button class="btn sm sage" id="save-proj">SAVE</button>
    </div>
    <div id="library"></div>
    <div class="hint">Projects save in this browser. Export a <b>.snafu</b> file to move between devices.</div>
    <div class="row" style="margin-top:8px">
      <button class="btn sm amber" id="export-proj">⤓ .SNAFU</button>
      <label class="btn sm tan" for="import-proj">⤒ IMPORT</label>
      <input id="import-proj" type="file" accept=".snafu,.json" style="display:none">
    </div>
    <div class="cfgbar row" style="margin-top:10px">
      <span>SERVER</span><input type="text" id="server-url" placeholder="auto (this site)">
    </div>
    <div class="row" style="margin-top:6px">
      <button class="btn sm sage" id="cloud-save">☁ SAVE TO SERVER</button>
      <button class="btn sm sage" id="cloud-save-as">☁ SAVE AS NEW</button>
      <button class="btn sm tan" id="cloud-load">☁ LOAD LIST</button>
    </div>
    <div id="server-lib"></div>
    <div class="hint" id="server-status">Leave SERVER blank when hosted on your droplet — it auto-uses this site.</div>

    <h2 style="margin-top:18px">◈ STEM SPLIT (AI)</h2>
    <div class="hint">Isolate vocals / drums / bass / other. Pay-per-use cloud AI (~pennies/song) via your droplet's /separate proxy.</div>
    <div class="cfgbar row" style="margin-top:8px">
      <input type="text" id="stem-url" placeholder="https://your-backend/separate">
    </div>
    <div class="row" style="margin-top:8px">
      <label class="btn sm rust" for="stem-file">CHOOSE FILE</label>
      <input id="stem-file" type="file" accept="audio/*" style="display:none">
      <button class="btn sm tan" id="stem-fallback">KARAOKE (LOCAL)</button>
    </div>
    <div class="hint" id="stem-status"></div>
  </aside>
</div>

<div class="toast" id="toast"></div>

<div class="modal" id="export-modal" style="display:none">
  <div class="modal-card">
    <h2 style="color:var(--amber);margin-bottom:12px">◈ EXPORT AS…</h2>
    <div class="row" style="flex-direction:column;align-items:stretch;gap:8px">
      <button class="btn tan" data-fmt="wav16">WAV · 16-bit stereo (default)</button>
      <button class="btn tan" data-fmt="wav24">WAV · 24-bit stereo (bigger, cleaner)</button>
      <button class="btn sage" data-fmt="stems">Individual stems (each audio track as its own WAV)</button>
      <button class="btn moss" data-fmt="webm">WebM (Opus, browser-native, small)</button>
    </div>
    <div class="row" style="margin-top:12px;justify-content:flex-end">
      <button class="btn rust sm" id="export-cancel">CANCEL</button>
    </div>
    <div class="hint">MP3 requires an extra encoder library — not included in this offline single-file build.</div>
  </div>
</div>

<script>
"use strict";
/* ============================================================
   SNAFU STUDIO v1.2 — Beat Lab + Pads + DJ Mixer
   Single-file HTML. Web Audio API. No frameworks.
   ============================================================ */

const AC = window.AudioContext || window.webkitAudioContext;
let ctx = null;
function audio(){ if(!ctx) ctx = new AC(); if(ctx.state==="suspended") ctx.resume(); return ctx; }

// ---------- helpers ----------
const $  = s=>document.querySelector(s);
const $$ = s=>[...document.querySelectorAll(s)];
function toast(msg){ const t=$("#toast"); t.textContent=msg; t.style.display="block";
  clearTimeout(t._t); t._t=setTimeout(()=>t.style.display="none",2200); }

// ============================================================
//  SOUND LIBRARY — 20+ synthesized one-shots
// ============================================================
function noiseBuf(c,dur){
  const n=Math.floor(c.sampleRate*dur), b=c.createBuffer(1,n,c.sampleRate), d=b.getChannelData(0);
  for(let i=0;i<n;i++) d[i]=Math.random()*2-1; return b;
}
function kick(c,dest,t){
  const o=c.createOscillator(),g=c.createGain();
  o.frequency.setValueAtTime(150,t); o.frequency.exponentialRampToValueAtTime(48,t+0.12);
  g.gain.setValueAtTime(1,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.32);
  o.connect(g).connect(dest); o.start(t); o.stop(t+0.34);
}
function snare(c,dest,t){
  const s=c.createBufferSource(); s.buffer=noiseBuf(c,0.2);
  const bp=c.createBiquadFilter(); bp.type="highpass"; bp.frequency.value=1200;
  const g=c.createGain(); g.gain.setValueAtTime(0.9,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.2);
  s.connect(bp).connect(g).connect(dest); s.start(t); s.stop(t+0.22);
  const o=c.createOscillator(),og=c.createGain(); o.type="triangle"; o.frequency.value=180;
  og.gain.setValueAtTime(0.5,t); og.gain.exponentialRampToValueAtTime(0.001,t+0.12);
  o.connect(og).connect(dest); o.start(t); o.stop(t+0.13);
}
function hat(c,dest,t){
  const s=c.createBufferSource(); s.buffer=noiseBuf(c,0.06);
  const hp=c.createBiquadFilter(); hp.type="highpass"; hp.frequency.value=7000;
  const g=c.createGain(); g.gain.setValueAtTime(0.5,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.05);
  s.connect(hp).connect(g).connect(dest); s.start(t); s.stop(t+0.07);
}
function openHat(c,dest,t){
  const s=c.createBufferSource(); s.buffer=noiseBuf(c,0.4);
  const hp=c.createBiquadFilter(); hp.type="highpass"; hp.frequency.value=6500;
  const g=c.createGain(); g.gain.setValueAtTime(0.4,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.4);
  s.connect(hp).connect(g).connect(dest); s.start(t); s.stop(t+0.42);
}
function clap(c,dest,t){
  for(let k=0;k<3;k++){
    const s=c.createBufferSource(); s.buffer=noiseBuf(c,0.05);
    const bp=c.createBiquadFilter(); bp.type="bandpass"; bp.frequency.value=1500;
    const g=c.createGain(); const tt=t+k*0.012;
    g.gain.setValueAtTime(0.7,tt); g.gain.exponentialRampToValueAtTime(0.001,tt+0.09);
    s.connect(bp).connect(g).connect(dest); s.start(tt); s.stop(tt+0.1);
  }
}
function bass(c,dest,t){
  const o=c.createOscillator(),g=c.createGain();
  o.type="sine"; o.frequency.setValueAtTime(55,t);
  g.gain.setValueAtTime(0.9,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.6);
  o.connect(g).connect(dest); o.start(t); o.stop(t+0.65);
}
function bass808(c,dest,t){
  const o=c.createOscillator(),g=c.createGain();
  o.type="sine"; o.frequency.setValueAtTime(60,t);
  o.frequency.exponentialRampToValueAtTime(38,t+0.4);
  g.gain.setValueAtTime(1,t); g.gain.exponentialRampToValueAtTime(0.001,t+1.2);
  o.connect(g).connect(dest); o.start(t); o.stop(t+1.25);
}
function rim(c,dest,t){
  const o=c.createOscillator(),g=c.createGain();
  o.type="square"; o.frequency.value=1500;
  g.gain.setValueAtTime(0.4,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.04);
  o.connect(g).connect(dest); o.start(t); o.stop(t+0.05);
}
function tomAt(base){ return (c,dest,t)=>{
  const o=c.createOscillator(),g=c.createGain();
  o.frequency.setValueAtTime(base,t); o.frequency.exponentialRampToValueAtTime(base*0.5,t+0.3);
  g.gain.setValueAtTime(0.8,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.35);
  o.connect(g).connect(dest); o.start(t); o.stop(t+0.4);
};}
const tomLo=tomAt(80), tomMid=tomAt(140), tomHi=tomAt(220);
function cowbell(c,dest,t){
  const o1=c.createOscillator(),o2=c.createOscillator(),g=c.createGain();
  o1.type="square"; o2.type="square";
  o1.frequency.value=560; o2.frequency.value=845;
  g.gain.setValueAtTime(0.3,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.35);
  o1.connect(g); o2.connect(g); g.connect(dest);
  o1.start(t); o2.start(t); o1.stop(t+0.4); o2.stop(t+0.4);
}
function crash(c,dest,t){
  const s=c.createBufferSource(); s.buffer=noiseBuf(c,0.8);
  const hp=c.createBiquadFilter(); hp.type="highpass"; hp.frequency.value=4000;
  const g=c.createGain(); g.gain.setValueAtTime(0.6,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.8);
  s.connect(hp).connect(g).connect(dest); s.start(t); s.stop(t+0.85);
}
function shaker(c,dest,t){
  const s=c.createBufferSource(); s.buffer=noiseBuf(c,0.1);
  const hp=c.createBiquadFilter(); hp.type="highpass"; hp.frequency.value=5000;
  const g=c.createGain();
  g.gain.setValueAtTime(0,t); g.gain.linearRampToValueAtTime(0.4,t+0.02);
  g.gain.exponentialRampToValueAtTime(0.001,t+0.1);
  s.connect(hp).connect(g).connect(dest); s.start(t); s.stop(t+0.12);
}
function lighter(c,dest,t){
  const s=c.createBufferSource(); s.buffer=noiseBuf(c,0.15);
  const hp=c.createBiquadFilter(); hp.type="highpass"; hp.frequency.value=6000;
  const g=c.createGain();
  g.gain.setValueAtTime(0.6,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.15);
  s.connect(hp).connect(g).connect(dest); s.start(t); s.stop(t+0.16);
  const o=c.createOscillator(),og=c.createGain();
  o.type="triangle"; o.frequency.setValueAtTime(3200,t); o.frequency.exponentialRampToValueAtTime(2400,t+0.1);
  og.gain.setValueAtTime(0.3,t+0.02); og.gain.exponentialRampToValueAtTime(0.001,t+0.12);
  o.connect(og).connect(dest); o.start(t); o.stop(t+0.13);
}
function carClick(c,dest,t){
  const o=c.createOscillator(),g=c.createGain();
  o.type="square"; o.frequency.setValueAtTime(80,t); o.frequency.exponentialRampToValueAtTime(30,t+0.03);
  g.gain.setValueAtTime(0.7,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.05);
  o.connect(g).connect(dest); o.start(t); o.stop(t+0.06);
}
function scratch(c,dest,t){
  const s=c.createBufferSource(); s.buffer=noiseBuf(c,0.25);
  const bp=c.createBiquadFilter(); bp.type="bandpass";
  bp.frequency.setValueAtTime(400,t); bp.frequency.exponentialRampToValueAtTime(2000,t+0.2);
  const g=c.createGain(); g.gain.setValueAtTime(0.5,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.25);
  s.connect(bp).connect(g).connect(dest); s.start(t); s.stop(t+0.26);
}
function laser(c,dest,t){
  const o=c.createOscillator(),g=c.createGain();
  o.type="sawtooth"; o.frequency.setValueAtTime(2000,t); o.frequency.exponentialRampToValueAtTime(200,t+0.3);
  g.gain.setValueAtTime(0.4,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.35);
  o.connect(g).connect(dest); o.start(t); o.stop(t+0.4);
}
function glitch(c,dest,t){
  const o=c.createOscillator(),g=c.createGain();
  o.type="square"; o.frequency.value=800;
  const times=[0, 0.02, 0.04, 0.06, 0.08];
  times.forEach((tt,i)=>{ g.gain.setValueAtTime(i%2? 0 : 0.4, t+tt); });
  g.gain.exponentialRampToValueAtTime(0.001,t+0.14);
  o.connect(g).connect(dest); o.start(t); o.stop(t+0.15);
}
function coin(c,dest,t){
  const o=c.createOscillator(),g=c.createGain();
  o.type="square"; o.frequency.setValueAtTime(988,t);
  o.frequency.setValueAtTime(1319,t+0.08);
  g.gain.setValueAtTime(0.3,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.4);
  o.connect(g).connect(dest); o.start(t); o.stop(t+0.42);
}
function pop(c,dest,t){
  const o=c.createOscillator(),g=c.createGain();
  o.type="sine"; o.frequency.setValueAtTime(200,t); o.frequency.exponentialRampToValueAtTime(1500,t+0.02);
  g.gain.setValueAtTime(0.4,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.08);
  o.connect(g).connect(dest); o.start(t); o.stop(t+0.1);
}
function stab(c,dest,t){
  [220,330,440].forEach(f=>{
    const o=c.createOscillator(),g=c.createGain();
    o.type="sawtooth"; o.frequency.value=f;
    g.gain.setValueAtTime(0.15,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.15);
    o.connect(g).connect(dest); o.start(t); o.stop(t+0.16);
  });
}
function zap(c,dest,t){
  const o=c.createOscillator(),g=c.createGain();
  o.type="sine"; o.frequency.setValueAtTime(100,t); o.frequency.exponentialRampToValueAtTime(3000,t+0.15);
  g.gain.setValueAtTime(0.4,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.18);
  o.connect(g).connect(dest); o.start(t); o.stop(t+0.2);
}

// name → function map + display order
const SOUNDS = {
  KICK:kick, SNARE:snare, HIHAT:hat, "OPEN HAT":openHat, CLAP:clap,
  BASS:bass, "808":bass808, RIM:rim,
  "TOM LO":tomLo, "TOM MID":tomMid, "TOM HI":tomHi,
  COWBELL:cowbell, CRASH:crash, SHAKER:shaker,
  LIGHTER:lighter, "CAR CLICK":carClick, SCRATCH:scratch,
  LASER:laser, GLITCH:glitch, COIN:coin, POP:pop, STAB:stab, ZAP:zap
};
const SOUND_NAMES = Object.keys(SOUNDS);

// ============================================================
//  GLOBAL STATE
// ============================================================
const STEPS_PER_BAR = 16;
// each row has an ASSIGNED SOUND (user changeable via dropdown)
let rowSounds = ["KICK","SNARE","HIHAT","CLAP"];
let rowVols   = [0.9, 0.9, 0.9, 0.9];   // per-row gain 0..1.2
let rowMutes  = [false,false,false,false];
const MAX_ROWS = 16;
let barCount = 4;
let stepPx  = 24;
let pattern = rowSounds.map(()=>new Array(STEPS_PER_BAR*barCount).fill(false));
let paintValue = null;   // drag-paint state (true=paint on, false=erase, null=idle)
document.addEventListener("mouseup", ()=>{ paintValue = null; });
document.addEventListener("mouseleave", ()=>{ paintValue = null; });
let tracks = [];
let playing = false;
let currentStep = 0;
let nextNoteTime = 0;
let schedTimer = null;
let liveSources = [];
let masterGain = null;
let trackIdSeq = 1;

const bpm       = ()=>Math.min(220,Math.max(40, +$("#bpm").value||90));
const swing     = ()=>(+$("#swing").value||0)/100;
const masterVol = ()=>(+$("#master").value||90)/100;
const loopOn    = ()=>$("#loop").checked;
const stepDur   = ()=> (60/bpm())/4;
const totalSteps= ()=> STEPS_PER_BAR*barCount;

function resizePattern(newBars){
  const newLen = STEPS_PER_BAR*newBars;
  pattern = pattern.map(row=>{
    const out = new Array(newLen).fill(false);
    for(let i=0;i<Math.min(row.length,newLen);i++) out[i]=row[i];
    return out;
  });
  barCount = newBars;
}

function scheduleDrums(c,dest,t,step){
  for(let r=0;r<rowSounds.length;r++){
    if(pattern[r][step] && !rowMutes[r]){
      const fn = SOUNDS[rowSounds[r]] || kick;
      // per-row gain node so layers don't clip
      const g = c.createGain(); g.gain.value = rowVols[r] ?? 0.9;
      g.connect(dest);
      fn(c, g, t);
    }
  }
}

// ============================================================
//  AUDIO-TRACK PLAYBACK
// ============================================================
function anySolo(){ return tracks.some(t=>t.solo); }
function trackAudible(t){ return anySolo()? t.solo : !t.mute; }

function startTrackSources(){
  liveSources.forEach(s=>{try{s.stop()}catch(e){}}); liveSources=[];
  const c=audio(), t0=c.currentTime+0.05;
  tracks.forEach(tr=>{
    if(!tr.buffer) return;
    const src=c.createBufferSource(); src.buffer=tr.buffer; src.loop=true;
    src.playbackRate.value=tr.speed;
    if(src.detune) src.detune.value=tr.pitch*100;
    if(tr.loopOn && tr.loopEnd > tr.loopStart){
      src.loopStart = tr.loopStart;
      src.loopEnd = tr.loopEnd;
    }
    const g=c.createGain(); g.gain.value=trackAudible(tr)?tr.gain:0;
    src.connect(g).connect(masterGain);
    src.start(t0, tr.loopOn ? tr.loopStart : 0);
    tr._src=src; tr._g=g; liveSources.push(src);
  });
}
function refreshLiveTrack(tr){
  if(!playing||!tr._src) return;
  tr._src.playbackRate.value=tr.speed;
  if(tr._src.detune) tr._src.detune.value=tr.pitch*100;
  tr._g.gain.value=trackAudible(tr)?tr.gain:0;
}
function refreshAllLive(){ tracks.forEach(refreshLiveTrack); }

// ============================================================
//  TRANSPORT / SCHEDULER
// ============================================================
function startPlayback(){
  if(playing) return;
  const c=audio();
  masterGain=c.createGain(); masterGain.gain.value=masterVol(); masterGain.connect(c.destination);
  playing=true; currentStep=0; nextNoteTime=c.currentTime+0.1;
  startTrackSources();
  $("#playhead").style.display="block";
  scheduler();
  $("#play").classList.add("on");
}
function stopPlayback(){
  playing=false; if(schedTimer) clearTimeout(schedTimer);
  liveSources.forEach(s=>{try{s.stop()}catch(e){}}); liveSources=[];
  if(masterGain){try{masterGain.disconnect()}catch(e){}}
  $("#play").classList.remove("on"); $("#clock-led").classList.remove("on");
  $("#playhead").style.display="none";
  $$(".step.play").forEach(e=>e.classList.remove("play"));
}
function scheduler(){
  const c=audio(), lookahead=0.1;
  while(nextNoteTime < c.currentTime+lookahead){
    let t=nextNoteTime;
    if(currentStep%2===1) t += swing()*stepDur();
    scheduleDrums(c,masterGain,t,currentStep);
    highlightStep(currentStep,t-c.currentTime);
    nextNoteTime += stepDur();
    const next = currentStep+1;
    if(next>=totalSteps()){
      if(loopOn()){ currentStep=0; }
      else { setTimeout(stopPlayback, 200); return; }
    } else currentStep=next;
  }
  schedTimer=setTimeout(scheduler,25);
}
function highlightStep(step,delay){
  setTimeout(()=>{
    if(!playing) return;
    $$(".step.play").forEach(e=>e.classList.remove("play"));
    $$(`.step[data-step="${step}"]`).forEach(e=>e.classList.add("play"));
    $("#clock-led").classList.toggle("on", step%4===0);
    const ph = $("#playhead");
    if(ph) ph.style.left = (step*stepPx) + "px";
    const scroll = $("#seq-scroll");
    const x = step*stepPx;
    const view = scroll.clientWidth - 180;
    if(x - scroll.scrollLeft > view - 40) scroll.scrollLeft = x - view + 180;
    if(x < scroll.scrollLeft) scroll.scrollLeft = x;
  }, Math.max(0,delay*1000));
}

// ============================================================
//  SEQUENCER UI
// ============================================================
function buildSequencer(){
  const labels = $("#seq-labels");
  const rows   = $("#seq-rows");
  const ruler  = $("#seq-ruler");
  const wrap   = $("#seq-canvas-wrap");
  labels.innerHTML = '<div class="hdr"><span>SOUND</span><span>VOL · M · X</span></div>';
  rows.innerHTML   = "";
  ruler.innerHTML  = "";

  const total = totalSteps();
  const widthPx = total*stepPx;
  wrap.style.width = widthPx + "px";
  rows.style.width = widthPx + "px";
  ruler.style.width = widthPx + "px";
  document.documentElement.style.setProperty("--step-w", stepPx + "px");

  for(let b=0;b<=barCount;b++){
    const m=document.createElement("div"); m.className="bar-mark";
    m.style.left = (b*STEPS_PER_BAR*stepPx) + "px";
    m.textContent = b<barCount ? (b+1) : "";
    ruler.appendChild(m);
  }

  rowSounds.forEach((soundName,r)=>{
    // label: dropdown + vol slider + mute + delete
    const lbl=document.createElement("div"); lbl.className="lbl";
    const sel = document.createElement("select");
    SOUND_NAMES.forEach(n=>{
      const o=document.createElement("option"); o.value=n; o.textContent=n;
      if(n===soundName) o.selected=true;
      sel.appendChild(o);
    });
    sel.onchange = ()=>{ rowSounds[r]=sel.value; };

    const vol = document.createElement("input");
    vol.type="range"; vol.className="rvol"; vol.min="0"; vol.max="1.2"; vol.step="0.05";
    vol.value = rowVols[r] ?? 0.9;
    vol.title = "Row volume";
    vol.oninput = ()=>{ rowVols[r] = +vol.value; };

    const mute = document.createElement("button");
    mute.className = "rmute" + (rowMutes[r]?" on":"");
    mute.textContent = "M"; mute.title = "Mute row";
    mute.onclick = ()=>{ rowMutes[r] = !rowMutes[r]; mute.classList.toggle("on", rowMutes[r]); };

    const del = document.createElement("button");
    del.className = "rdel"; del.textContent = "×"; del.title = "Delete row";
    del.onclick = ()=>{ removeRow(r); };

    lbl.appendChild(sel); lbl.appendChild(vol); lbl.appendChild(mute); lbl.appendChild(del);
    labels.appendChild(lbl);

    const row=document.createElement("div"); row.className="seq-track";
    row.style.width = widthPx + "px";
    for(let s=0;s<total;s++){
      const cell=document.createElement("div");
      cell.className="step" + (s%4===0 ? " beat":"");
      cell.style.left  = (s*stepPx) + "px";
      cell.style.width = stepPx + "px";
      cell.dataset.step=s; cell.dataset.row=r;
      if(pattern[r][s]) cell.classList.add("on");
      // click-and-drag paint: mousedown decides paint or erase; mouseenter continues
      cell.addEventListener("mousedown", e=>{
        e.preventDefault();
        paintValue = !pattern[r][s];
        pattern[r][s] = paintValue;
        cell.classList.toggle("on", paintValue);
        if(paintValue && !playing){
          const fn = SOUNDS[rowSounds[r]] || kick;
          fn(audio(),(masterGain=makeQuickMaster()),audio().currentTime);
        }
      });
      cell.addEventListener("mouseenter", ()=>{
        if(paintValue===null) return;
        pattern[r][s] = paintValue;
        cell.classList.toggle("on", paintValue);
      });
      row.appendChild(cell);
    }
    rows.appendChild(row);
  });
}
function makeQuickMaster(){ const c=audio(); const g=c.createGain(); g.gain.value=masterVol(); g.connect(c.destination); return g; }

function fitZoom(){
  const scroll = $("#seq-scroll");
  const avail = Math.max(200, scroll.clientWidth - 180 - 12);
  const px = Math.max(8, Math.min(60, Math.floor(avail/totalSteps())));
  stepPx = px;
  $("#zoom").value = px;
  $("#zoom-label").textContent = px + " px";
  buildSequencer();
}

function addRow(){
  if(rowSounds.length>=MAX_ROWS){ toast("Max "+MAX_ROWS+" rows"); return; }
  // pick a sound not already used, or default to KICK
  const used = new Set(rowSounds);
  const next = SOUND_NAMES.find(n=>!used.has(n)) || "KICK";
  rowSounds.push(next);
  rowVols.push(0.9);
  rowMutes.push(false);
  pattern.push(new Array(totalSteps()).fill(false));
  $("#rows-label").textContent = rowSounds.length;
  buildSequencer();
}
function removeRow(r){
  if(rowSounds.length<=1){ toast("Need at least 1 row"); return; }
  rowSounds.splice(r,1); rowVols.splice(r,1); rowMutes.splice(r,1); pattern.splice(r,1);
  $("#rows-label").textContent = rowSounds.length;
  buildSequencer();
}
$("#row-add").onclick = addRow;

$("#bars-plus").onclick = ()=>{
  if(barCount>=32){ toast("Max 32 bars"); return; }
  resizePattern(barCount+1);
  $("#bars-label").textContent = barCount;
  buildSequencer();
};
$("#bars-minus").onclick = ()=>{
  if(barCount<=1) return;
  resizePattern(barCount-1);
  $("#bars-label").textContent = barCount;
  buildSequencer();
};
$("#zoom").oninput = e=>{
  stepPx = +e.target.value;
  $("#zoom-label").textContent = stepPx + " px";
  buildSequencer();
};
$("#zoom-fit").onclick = fitZoom;

$("#seq-scroll").addEventListener("wheel", e=>{
  if(e.ctrlKey || e.metaKey){
    e.preventDefault();
    const delta = e.deltaY > 0 ? -1 : 1;
    stepPx = Math.max(8, Math.min(60, stepPx+delta));
    $("#zoom").value = stepPx;
    $("#zoom-label").textContent = stepPx + " px";
    buildSequencer();
  } else if(e.shiftKey){
    e.preventDefault();
    $("#seq-scroll").scrollLeft += e.deltaY;
  }
}, {passive:false});

$("#seq-clear").onclick = ()=>{
  pattern = rowSounds.map(()=>new Array(totalSteps()).fill(false));
  buildSequencer();
};
$("#seq-random").onclick = ()=>{
  pattern = rowSounds.map((_,r)=>{
    const dens = r===0 ? 0.5 : r===1 ? 0.35 : r===2 ? 0.6 : r===3 ? 0.15 : (0.15 + Math.random()*0.3);
    return new Array(totalSteps()).fill(0).map((_,s)=>
      Math.random()<dens && (r!==0||s%4===0||Math.random()<0.3));
  });
  buildSequencer();
};

// ============================================================
//  TRACKS UI
// ============================================================
function addTrack(name,buffer){
  const tr={id:trackIdSeq++,name,buffer,gain:0.9,mute:false,solo:false,pitch:0,speed:1,
    loopOn:false, loopStart:0, loopEnd:buffer?buffer.duration:0,
    selStart:null, selEnd:null};
  tracks.push(tr); renderTracks();
  if(playing){ stopPlayback(); startPlayback(); }
}
function renderTracks(){
  const wrap=$("#tracks"); wrap.innerHTML="";
  $("#notracks").style.display = tracks.length?"none":"block";
  tracks.forEach(tr=>{
    const el=document.createElement("div"); el.className="track";
    el.innerHTML=`
      <div class="row">
        <button class="btn sm sage" data-a="preview" title="Preview">▶</button>
        <button class="btn sm ${tr.loopOn?'amber on':''}" data-a="loop" title="Loop region">⟲</button>
        <button class="btn sm ${tr.mute?'rust on':''}" data-a="mute" title="Mute">M</button>
        <button class="btn sm ${tr.solo?'amber on':''}" data-a="solo" title="Solo">S</button>
        <span class="tname">♪ ${tr.name}</span>
        <span style="font-size:7px;color:var(--ink-dim)">${tr.buffer?tr.buffer.duration.toFixed(2)+"s":""}</span>
        <div class="spacer"></div>
        <button class="btn sm tan" data-a="crop" title="Crop to selection → new track">CROP</button>
        <button class="btn sm" data-a="clear" title="Clear selection">CLR</button>
        <button class="btn sm rust" data-a="del" title="Delete">✕</button>
      </div>
      <div class="wave">
        <canvas></canvas>
        <div class="sel"></div>
      </div>
      <div class="knobs">
        <div class="knob"><label>PITCH <span class="val">${tr.pitch>0?'+':''}${tr.pitch} st</span></label>
          <input type="range" data-k="pitch" min="-12" max="12" step="1" value="${tr.pitch}"></div>
        <div class="knob"><label>SPEED <span class="val">${tr.speed.toFixed(2)}x</span></label>
          <input type="range" data-k="speed" min="0.5" max="2" step="0.01" value="${tr.speed}"></div>
        <div class="knob"><label>VOLUME <span class="val">${Math.round(tr.gain*100)}</span></label>
          <input type="range" data-k="gain" min="0" max="1.2" step="0.01" value="${tr.gain}"></div>
      </div>`;
    el.querySelectorAll("input[type=range]").forEach(inp=>{
      inp.oninput=()=>{ const k=inp.dataset.k; tr[k]=+inp.value;
        const lbl=inp.previousElementSibling.querySelector(".val");
        if(k==="pitch") lbl.textContent=(tr.pitch>0?'+':'')+tr.pitch+" st";
        if(k==="speed") lbl.textContent=tr.speed.toFixed(2)+"x";
        if(k==="gain") lbl.textContent=Math.round(tr.gain*100);
        refreshLiveTrack(tr); };
    });
    el.querySelectorAll("button[data-a]").forEach(b=>{
      b.onclick=()=>handleTrackBtn(tr,b.dataset.a);
    });
    tr.el=el; wrap.appendChild(el);
    // draw waveform + wire region select
    drawTrackWave(tr);
    wireTrackSelect(tr);
  });
}
function drawTrackWave(tr){
  const cv = tr.el?.querySelector("canvas");
  if(!cv || !tr.buffer) return;
  const w = cv.clientWidth || 300, h = cv.clientHeight || 44;
  cv.width = w; cv.height = h;
  const g = cv.getContext("2d");
  g.fillStyle = "#1a1611"; g.fillRect(0,0,w,h);
  const data = tr.buffer.getChannelData(0);
  const step = Math.max(1, Math.floor(data.length/w));
  g.strokeStyle = "#a8c686"; g.lineWidth = 1; g.beginPath();
  for(let x=0;x<w;x++){
    let min=1,max=-1;
    for(let i=0;i<step;i++){ const v=data[x*step+i]||0; if(v<min)min=v; if(v>max)max=v; }
    g.moveTo(x,(1-min)*h/2); g.lineTo(x,(1-max)*h/2);
  }
  g.stroke();
  // draw loop region as amber overlay via .sel div update
  updateSelOverlay(tr);
}
function updateSelOverlay(tr){
  const sel = tr.el?.querySelector(".sel");
  if(!sel || !tr.buffer) return;
  const dur = tr.buffer.duration;
  const start = tr.selStart ?? tr.loopStart;
  const end = tr.selEnd ?? tr.loopEnd;
  if(start==null || end==null || end<=start){ sel.style.display="none"; return; }
  sel.style.display="block";
  sel.style.left = (start/dur*100)+"%";
  sel.style.width = ((end-start)/dur*100)+"%";
}
function wireTrackSelect(tr){
  const wave = tr.el?.querySelector(".wave");
  if(!wave || !tr.buffer) return;
  let dragging = false, downX = 0;
  wave.addEventListener("mousedown", e=>{
    e.preventDefault();
    dragging = true;
    const rect = wave.getBoundingClientRect();
    downX = (e.clientX - rect.left) / rect.width;
    tr.selStart = downX * tr.buffer.duration;
    tr.selEnd = tr.selStart + 0.001;
    updateSelOverlay(tr);
  });
  wave.addEventListener("mousemove", e=>{
    if(!dragging) return;
    const rect = wave.getBoundingClientRect();
    const x = Math.max(0, Math.min(1, (e.clientX - rect.left)/rect.width));
    const pos = x * tr.buffer.duration;
    tr.selStart = Math.min(downX*tr.buffer.duration, pos);
    tr.selEnd = Math.max(downX*tr.buffer.duration, pos);
    updateSelOverlay(tr);
  });
  document.addEventListener("mouseup", ()=>{
    if(dragging){ dragging=false;
      // adopt selection as loop region
      if(tr.selStart!=null && tr.selEnd!=null && tr.selEnd - tr.selStart > 0.05){
        tr.loopStart = tr.selStart;
        tr.loopEnd = tr.selEnd;
        if(tr.loopOn && playing){ stopPlayback(); startPlayback(); }
      }
    }
  });
}
function cropTrackToSelection(tr){
  if(!tr.buffer || tr.selStart==null || tr.selEnd==null){ toast("Drag on waveform to select first"); return; }
  const c = audio(); const sr = tr.buffer.sampleRate;
  const startS = Math.floor(tr.selStart*sr);
  const endS = Math.floor(tr.selEnd*sr);
  const newLen = Math.max(1, endS-startS);
  const newBuf = c.createBuffer(tr.buffer.numberOfChannels, newLen, sr);
  for(let ch=0; ch<tr.buffer.numberOfChannels; ch++){
    const dst = newBuf.getChannelData(ch);
    const srcCh = tr.buffer.getChannelData(ch);
    for(let i=0;i<newLen;i++) dst[i] = srcCh[startS+i] || 0;
  }
  addTrack(tr.name + " · CROP", newBuf);
  toast(`Cropped ${(newLen/sr).toFixed(2)}s → new track`);
}
function handleTrackBtn(tr,a){
  if(a==="mute"){ tr.mute=!tr.mute; renderTracks(); refreshAllLive(); }
  else if(a==="solo"){ tr.solo=!tr.solo; renderTracks(); refreshAllLive(); }
  else if(a==="del"){ tracks=tracks.filter(x=>x!==tr); if(playing){stopPlayback();startPlayback();} renderTracks(); }
  else if(a==="preview"){ previewTrack(tr); }
  else if(a==="loop"){ tr.loopOn=!tr.loopOn; renderTracks(); if(playing){stopPlayback();startPlayback();} }
  else if(a==="crop"){ cropTrackToSelection(tr); }
  else if(a==="clear"){ tr.selStart=null; tr.selEnd=null; tr.loopStart=0; tr.loopEnd=tr.buffer?tr.buffer.duration:0; updateSelOverlay(tr); if(tr.loopOn && playing){stopPlayback();startPlayback();} }
}
// One-shot preview channel — independent of the master transport.
// Click preview once = play that track solo. Click again = stop.
let previewSrc = null;
let previewTrId = null;
function stopPreview(){
  if(previewSrc){ try{previewSrc.stop()}catch(e){} previewSrc=null; }
  // clear "on" state on all preview buttons
  document.querySelectorAll('.track button[data-a="preview"].on').forEach(b=>b.classList.remove("on"));
  previewTrId = null;
}
function previewTrack(tr){
  // toggle: clicking preview on the same track stops it
  if(previewTrId === tr.id){ stopPreview(); return; }
  stopPreview();
  const c=audio(); const src=c.createBufferSource(); src.buffer=tr.buffer;
  src.playbackRate.value=tr.speed; if(src.detune) src.detune.value=tr.pitch*100;
  const g=c.createGain(); g.gain.value=tr.gain;
  src.connect(g).connect(c.destination);
  src.start();
  previewSrc = src; previewTrId = tr.id;
  // mark button "on"
  const btn = tr.el?.querySelector('button[data-a="preview"]');
  if(btn) btn.classList.add("on");
  src.onended = ()=>{ if(previewSrc===src){ previewSrc=null; previewTrId=null;
    if(btn) btn.classList.remove("on"); } };
}

// ---------- file loading ----------
async function loadFiles(fileList){
  for(const f of fileList){
    try{
      const arr=await f.arrayBuffer();
      const buf=await audio().decodeAudioData(arr.slice(0));
      addTrack(f.name.replace(/\.[^.]+$/,""),buf);
      toast("Loaded "+f.name);
    }catch(e){ toast("Couldn't decode "+f.name); console.error(e); }
  }
}
$("#file").onchange=e=>{ loadFiles(e.target.files); e.target.value=""; };

// ============================================================
//  MIC RECORDING — record over the beat as a new audio track
// ============================================================
let micRec = null;    // MediaRecorder
let micStream = null; // MediaStream
let micChunks = [];
let micMonitorNode = null;
let recCount = 0;

async function startMicRec(){
  const status = $("#mic-status");
  try{
    micStream = await navigator.mediaDevices.getUserMedia({audio:{
      echoCancellation: false, noiseSuppression: false, autoGainControl: false
    }});
  }catch(err){
    status.textContent = "Mic denied: "+err.message;
    return;
  }
  // optional monitoring — pipe mic to speakers (careful with feedback)
  if($("#mic-monitor").checked){
    const c = audio();
    const src = c.createMediaStreamSource(micStream);
    micMonitorNode = c.createGain(); micMonitorNode.gain.value = 0.5;
    src.connect(micMonitorNode).connect(c.destination);
  }
  micChunks = [];
  const mime = MediaRecorder.isTypeSupported("audio/webm;codecs=opus") ? "audio/webm;codecs=opus" : "audio/webm";
  micRec = new MediaRecorder(micStream, {mimeType: mime});
  micRec.ondataavailable = e=>{ if(e.data.size) micChunks.push(e.data); };
  micRec.onstop = async ()=>{
    status.textContent = "Decoding recording…";
    try{
      const blob = new Blob(micChunks, {type: mime});
      const arr = await blob.arrayBuffer();
      const buf = await audio().decodeAudioData(arr);
      recCount++;
      addTrack(`REC ${recCount}`, buf);
      status.textContent = `Recorded ${buf.duration.toFixed(1)}s → added as track "REC ${recCount}" ✓`;
    }catch(err){
      status.textContent = "Decode failed: "+err.message;
    }
    // cleanup
    if(micMonitorNode){ try{micMonitorNode.disconnect()}catch(e){} micMonitorNode=null; }
    if(micStream){ micStream.getTracks().forEach(t=>t.stop()); micStream=null; }
    micRec = null;
    $("#mic-dot").classList.remove("on");
    $("#mic-rec").innerHTML = '<span class="rec-dot" id="mic-dot"></span> 🎙 RECORD';
  };
  micRec.start();
  $("#mic-dot").classList.add("on");
  $("#mic-rec").innerHTML = '<span class="rec-dot on" id="mic-dot"></span> ■ STOP REC';
  status.textContent = "Recording… hit PLAY on transport to record over the beat.";
}
function stopMicRec(){
  if(micRec && micRec.state !== "inactive") micRec.stop();
}
$("#mic-rec").onclick = ()=>{
  if(micRec && micRec.state === "recording") stopMicRec();
  else startMicRec();
};

// ============================================================
//  EXPORT WAV
// ============================================================
async function renderStudioMix(){
  const sr=44100, total=totalSteps(), dur=stepDur()*total;
  const off=new OfflineAudioContext(2, Math.ceil(sr*dur)+sr, sr);
  const mg=off.createGain(); mg.gain.value=masterVol(); mg.connect(off.destination);
  tracks.forEach(tr=>{
    if(!tr.buffer||!trackAudible(tr)) return;
    const src=off.createBufferSource(); src.buffer=tr.buffer; src.loop=true;
    src.playbackRate.value=tr.speed; if(src.detune) src.detune.value=tr.pitch*100;
    if(tr.loopOn && tr.loopEnd > tr.loopStart){
      src.loopStart = tr.loopStart; src.loopEnd = tr.loopEnd;
    }
    const g=off.createGain(); g.gain.value=tr.gain; src.connect(g).connect(mg);
    src.start(0, tr.loopOn ? tr.loopStart : 0);
  });
  for(let s=0;s<total;s++){
    let t = s*stepDur();
    if(s%2===1) t += swing()*stepDur();
    scheduleDrums(off,mg,t,s);
  }
  return await off.startRendering();
}
async function exportWav(bits=16){
  toast("Rendering "+bits+"-bit WAV…");
  const rendered = await renderStudioMix();
  const wav = encodeWav(rendered, bits);
  downloadBlob(wav, ($("#proj-name").value||"snafu-mix")+"-"+bits+"bit.wav");
  toast("Exported WAV ✓");
}
async function exportStems(){
  if(!tracks.length){ toast("No audio tracks to stem"); return; }
  toast("Rendering stems…");
  const projName = $("#proj-name").value||"snafu";
  // render each track alone
  for(const tr of tracks){
    if(!tr.buffer) continue;
    const sr=44100, total=totalSteps(), dur=stepDur()*total;
    const off=new OfflineAudioContext(2, Math.ceil(sr*dur)+sr, sr);
    const src=off.createBufferSource(); src.buffer=tr.buffer; src.loop=true;
    src.playbackRate.value=tr.speed; if(src.detune) src.detune.value=tr.pitch*100;
    const g=off.createGain(); g.gain.value=tr.gain; src.connect(g).connect(off.destination); src.start(0);
    const rendered=await off.startRendering();
    downloadBlob(encodeWav(rendered,16), `${projName}-${tr.name}.wav`);
  }
  toast("Exported "+tracks.length+" stems ✓");
}
async function exportWebM(){
  toast("Rendering WebM…");
  const rendered = await renderStudioMix();
  // play back the rendered buffer through a MediaStream and record it
  const c = new (window.AudioContext||window.webkitAudioContext)();
  const src = c.createBufferSource(); src.buffer = rendered;
  const dst = c.createMediaStreamDestination(); src.connect(dst);
  const rec = new MediaRecorder(dst.stream, {mimeType:"audio/webm;codecs=opus"});
  const chunks=[];
  rec.ondataavailable = e=>chunks.push(e.data);
  const done = new Promise(res=>{ rec.onstop = ()=>res(new Blob(chunks,{type:"audio/webm"})); });
  rec.start(); src.start();
  setTimeout(()=>rec.stop(), (rendered.duration*1000)+200);
  const blob = await done;
  downloadBlob(blob, ($("#proj-name").value||"snafu-mix")+".webm");
  try{c.close()}catch(e){}
  toast("Exported WebM ✓");
}
function encodeWav(buffer, bits=16){
  const numCh=buffer.numberOfChannels, sr=buffer.sampleRate, len=buffer.length;
  const bytesPerSample = bits/8;
  const bytes=len*numCh*bytesPerSample;
  const out=new ArrayBuffer(44+bytes), view=new DataView(out);
  const w=(o,s)=>{for(let i=0;i<s.length;i++)view.setUint8(o+i,s.charCodeAt(i))};
  w(0,"RIFF"); view.setUint32(4,36+bytes,true); w(8,"WAVE"); w(12,"fmt ");
  view.setUint32(16,16,true); view.setUint16(20,1,true); view.setUint16(22,numCh,true);
  view.setUint32(24,sr,true); view.setUint32(28,sr*numCh*bytesPerSample,true);
  view.setUint16(32,numCh*bytesPerSample,true); view.setUint16(34,bits,true);
  w(36,"data"); view.setUint32(40,bytes,true);
  const chans=[]; for(let c=0;c<numCh;c++) chans.push(buffer.getChannelData(c));
  let off=44;
  if(bits===16){
    for(let i=0;i<len;i++) for(let c=0;c<numCh;c++){
      let v=Math.max(-1,Math.min(1,chans[c][i]));
      view.setInt16(off, v<0?v*0x8000:v*0x7FFF, true); off+=2;
    }
  } else if(bits===24){
    for(let i=0;i<len;i++) for(let c=0;c<numCh;c++){
      let v=Math.max(-1,Math.min(1,chans[c][i]));
      const s = v<0 ? Math.round(v*0x800000) : Math.round(v*0x7FFFFF);
      const u = s < 0 ? (0x1000000 + s) : s;
      view.setUint8(off,   u & 0xFF);
      view.setUint8(off+1, (u>>8) & 0xFF);
      view.setUint8(off+2, (u>>16) & 0xFF);
      off += 3;
    }
  }
  return new Blob([out],{type:"audio/wav"});
}
function downloadBlob(blob,name){
  const url=URL.createObjectURL(blob), a=document.createElement("a");
  a.href=url; a.download=name; a.click(); setTimeout(()=>URL.revokeObjectURL(url),1000);
}

// ============================================================
//  PADS — 4x4 with keyboard mapping
// ============================================================
const PAD_KEYS = ["1","2","3","4","q","w","e","r","a","s","d","f","z","x","c","v"];
let padSounds = ["KICK","SNARE","CLAP","HIHAT",
                 "OPEN HAT","BASS","808","RIM",
                 "TOM LO","TOM MID","TOM HI","COWBELL",
                 "LIGHTER","CAR CLICK","SCRATCH","COIN"];
let selPad = 0;
let padRecord = false;

function buildPads(){
  const grid = $("#pad-grid"); grid.innerHTML = "";
  PAD_KEYS.forEach((k,i)=>{
    const p = document.createElement("div"); p.className = "pad" + (i===selPad?" sel":"");
    p.dataset.idx = i;
    p.innerHTML = `<div class="key">${k.toUpperCase()}</div><div class="snd">${padSounds[i]}</div>`;
    p.onclick = ()=>{ selPad=i; updatePadSelect(); playPad(i); };
    grid.appendChild(p);
  });
  updatePadSelect();
}
function updatePadSelect(){
  $$(".pad").forEach((p,i)=>p.classList.toggle("sel", i===selPad));
  $("#sel-pad-name").textContent = PAD_KEYS[selPad].toUpperCase() + "  ·  " + padSounds[selPad];
  const sel = $("#pad-sound"); sel.innerHTML = "";
  SOUND_NAMES.forEach(n=>{
    const o=document.createElement("option"); o.value=n; o.textContent=n;
    if(n===padSounds[selPad]) o.selected=true;
    sel.appendChild(o);
  });
}
$("#pad-sound").onchange = e=>{
  padSounds[selPad] = e.target.value;
  buildPads();
};
function playPad(i){
  const c = audio();
  const g = c.createGain(); g.gain.value = masterVol(); g.connect(c.destination);
  const fn = SOUNDS[padSounds[i]] || kick;
  fn(c, g, c.currentTime);
  // visual pulse
  const el = $(`.pad[data-idx="${i}"]`);
  if(el){ el.classList.add("hit"); setTimeout(()=>el.classList.remove("hit"), 120); }
  // record into pattern if RECORD is on and playing
  if(padRecord && playing){
    const soundName = padSounds[i];
    let row = rowSounds.indexOf(soundName);
    if(row<0){
      // no matching row — add a new one if we have space, else replace last
      if(rowSounds.length < MAX_ROWS){
        rowSounds.push(soundName);
        rowVols.push(0.9); rowMutes.push(false);
        pattern.push(new Array(totalSteps()).fill(false));
        row = rowSounds.length-1;
      } else {
        row = rowSounds.length-1;
        rowSounds[row] = soundName;
      }
      $("#rows-label").textContent = rowSounds.length;
      buildSequencer();
    }
    // quantize to current step (round to nearest 16th)
    const s = currentStep;
    pattern[row][s] = true;
    // repaint that cell
    const cell = document.querySelector(`.step[data-row="${row}"][data-step="${s}"]`);
    if(cell) cell.classList.add("on");
  }
}
document.addEventListener("keydown", e=>{
  if(e.repeat) return;
  if(e.target.tagName==="INPUT" || e.target.tagName==="SELECT" || e.target.tagName==="TEXTAREA") return;
  const idx = PAD_KEYS.indexOf(e.key.toLowerCase());
  if(idx>=0){ e.preventDefault(); playPad(idx); }
});
$("#pad-preview").onclick = ()=>playPad(selPad);
$("#pad-record").onclick = ()=>{
  padRecord = !padRecord;
  $("#rec-dot").classList.toggle("on", padRecord);
  toast(padRecord ? "RECORDING to timeline (press PLAY, then hit pads)" : "Recording off");
};
// pad presets
const PAD_PRESETS = {
  classic: ["KICK","SNARE","CLAP","HIHAT","OPEN HAT","RIM","BASS","COWBELL",
            "TOM LO","TOM MID","TOM HI","CRASH","SHAKER","STAB","POP","ZAP"],
  trap:    ["KICK","808","SNARE","CLAP","HIHAT","OPEN HAT","RIM","SHAKER",
            "808","KICK","SNARE","CLAP","LASER","GLITCH","STAB","ZAP"],
  quirky:  ["LIGHTER","CAR CLICK","COIN","POP","SCRATCH","LASER","GLITCH","ZAP",
            "COWBELL","RIM","STAB","OPEN HAT","BASS","808","KICK","CLAP"]
};
$$("[data-preset]").forEach(b=>b.onclick=()=>{
  padSounds = PAD_PRESETS[b.dataset.preset].slice();
  buildPads(); toast("Preset: "+b.dataset.preset.toUpperCase());
});

// ============================================================
//  DJ MIXER — dynamic 2-8 decks · EQ · effects · loop · scrub
// ============================================================
const DECK_LETTERS = ["A","B","C","D","E","F","G","H"];
let deckIds = ["A","B"];
let decks = {};
let crossfader = 0.5;
const DEFAULT_DECK = { tempo:1, pitch:0, vol:0.8, hiV:0, midV:0, lowV:0,
  loopOn:false, loopLen:4, loopStart:0,
  fxRev:false, fxDel:false, fxFlt:false, fxHi:false, fxFlg:false, fxBit:false,
  vinyl:false, autoQueue:false };

function makeDeck(id){
  return Object.assign({}, DEFAULT_DECK, {
    id, buffer:null, name:"", bpm:null, queue:[], // queue: [{name,buffer,bpm}]
    src:null, low:null, mid:null, hi:null,
    lpFilter:null, hpFilter:null,
    dry:null, revConv:null, revWet:null,
    del:null, delFeed:null, delWet:null,
    flDelay:null, flLFO:null, flLFOGain:null, flFeed:null, flWet:null,
    bitCrush:null, bitWet:null,
    cross:null, startTime:0, offset:0, playing:false, drawTimer:null
  });
}
function makeImpulse(c, duration=2, decay=2.5){
  const len = c.sampleRate*duration;
  const imp = c.createBuffer(2, len, c.sampleRate);
  for(let ch=0;ch<2;ch++){
    const d = imp.getChannelData(ch);
    for(let i=0;i<len;i++) d[i] = (Math.random()*2-1) * Math.pow(1-i/len, decay);
  }
  return imp;
}
function makeBitcrushCurve(bits){
  const step = Math.pow(2, bits);
  const curve = new Float32Array(65536);
  for(let i=0;i<65536;i++){
    const x = (i/65535)*2-1;
    curve[i] = Math.round(x*step)/step;
  }
  return curve;
}
function ensureDeckChain(d){
  const c = audio();
  if(d.cross) return;
  d.low = c.createBiquadFilter(); d.low.type="lowshelf"; d.low.frequency.value=200;
  d.mid = c.createBiquadFilter(); d.mid.type="peaking"; d.mid.frequency.value=1000; d.mid.Q.value=1;
  d.hi  = c.createBiquadFilter(); d.hi.type="highshelf"; d.hi.frequency.value=4000;
  d.lpFilter = c.createBiquadFilter(); d.lpFilter.type="lowpass"; d.lpFilter.frequency.value=22000;
  d.hpFilter = c.createBiquadFilter(); d.hpFilter.type="highpass"; d.hpFilter.frequency.value=20;
  d.dry = c.createGain();
  d.revConv = c.createConvolver(); d.revConv.buffer = makeImpulse(c);
  d.revWet = c.createGain(); d.revWet.gain.value = 0;
  d.del = c.createDelay(2); d.del.delayTime.value = 0.375;
  d.delFeed = c.createGain(); d.delFeed.gain.value = 0.4;
  d.delWet = c.createGain(); d.delWet.gain.value = 0;
  d.del.connect(d.delFeed).connect(d.del);
  // flanger: LFO-modulated short delay with feedback
  d.flDelay = c.createDelay(0.05); d.flDelay.delayTime.value = 0.005;
  d.flLFO = c.createOscillator(); d.flLFO.frequency.value = 0.3;
  d.flLFOGain = c.createGain(); d.flLFOGain.gain.value = 0.003;
  d.flLFO.connect(d.flLFOGain).connect(d.flDelay.delayTime);
  d.flLFO.start();
  d.flFeed = c.createGain(); d.flFeed.gain.value = 0.6;
  d.flDelay.connect(d.flFeed).connect(d.flDelay);
  d.flWet = c.createGain(); d.flWet.gain.value = 0;
  // bitcrush
  d.bitCrush = c.createWaveShaper(); d.bitCrush.curve = makeBitcrushCurve(4);
  d.bitWet = c.createGain(); d.bitWet.gain.value = 0;
  d.cross = c.createGain();
  // routing: EQ → LP → HP → parallel wet/dry paths → cross → destination
  d.low.connect(d.mid).connect(d.hi).connect(d.lpFilter).connect(d.hpFilter);
  d.hpFilter.connect(d.dry).connect(d.cross);
  d.hpFilter.connect(d.revConv).connect(d.revWet).connect(d.cross);
  d.hpFilter.connect(d.del).connect(d.delWet).connect(d.cross);
  d.hpFilter.connect(d.flDelay).connect(d.flWet).connect(d.cross);
  d.hpFilter.connect(d.bitCrush).connect(d.bitWet).connect(d.cross);
  d.cross.connect(c.destination);
  applyDeckKnobs(d);
  applyDeckFx(d);
  applyCrossfaders();
}
function applyDeckKnobs(d){
  if(!d.dry) return;
  d.dry.gain.value = d.vol;
  d.low.gain.value = d.lowV;
  d.mid.gain.value = d.midV;
  d.hi.gain.value  = d.hiV;
}
function applyDeckFx(d){
  if(!d.revWet) return;
  d.revWet.gain.value = d.fxRev ? 0.5 : 0;
  d.delWet.gain.value = d.fxDel ? 0.4 : 0;
  d.flWet.gain.value  = d.fxFlg ? 0.6 : 0;
  d.bitWet.gain.value = d.fxBit ? 0.6 : 0;
  d.lpFilter.frequency.value = d.fxFlt ? 800 : 22000;
  d.hpFilter.frequency.value = d.fxHi  ? 900 : 20;
}
// crossfader values per pair: {"AB":0.5,"CD":0.5,...}
let crossfaders = {};
function pairKey(pair){ return pair[0]+pair[1]; }
function getDeckPairs(){
  const pairs=[]; for(let i=0;i+1<deckIds.length;i+=2) pairs.push([deckIds[i],deckIds[i+1]]);
  return pairs;
}
function applyCrossfaders(){
  // decks in a pair get crossfaded; leftover deck (odd count) plays at 1.0
  const pairs = getDeckPairs();
  const paired = new Set();
  pairs.forEach(p=>{
    const x = crossfaders[pairKey(p)] ?? 0.5;
    const a = Math.cos(x * Math.PI/2);
    const b = Math.sin(x * Math.PI/2);
    if(decks[p[0]]?.cross) decks[p[0]].cross.gain.value = a;
    if(decks[p[1]]?.cross) decks[p[1]].cross.gain.value = b;
    paired.add(p[0]); paired.add(p[1]);
  });
  deckIds.forEach(id=>{ if(!paired.has(id) && decks[id]?.cross) decks[id].cross.gain.value = 1; });
}
// naive BPM detect: autocorrelate energy envelope
function detectBPM(buffer){
  try{
    const src = buffer.getChannelData(0);
    const sr = buffer.sampleRate;
    const targetSr = 200, ratio = Math.floor(sr/targetSr);
    const n = Math.min(60000, Math.floor(src.length/ratio)); // cap ~5 min
    const env = new Float32Array(n);
    for(let i=0;i<n;i++){
      let sum=0;
      for(let j=0;j<ratio;j++) sum += Math.abs(src[i*ratio+j]||0);
      env[i] = sum/ratio;
    }
    const minLag = Math.round(60/180 * targetSr);
    const maxLag = Math.round(60/70  * targetSr);
    let bestLag=minLag, bestScore=-Infinity;
    for(let lag=minLag; lag<=maxLag; lag++){
      let s=0;
      for(let i=0;i<n-lag;i++) s += env[i]*env[i+lag];
      if(s>bestScore){ bestScore=s; bestLag=lag; }
    }
    return Math.round(60/(bestLag/targetSr));
  }catch(e){ return null; }
}
async function deckLoad(id, file){
  const d = decks[id];
  const arr = await file.arrayBuffer();
  const buf = await audio().decodeAudioData(arr);
  const bpm = detectBPM(buf);
  // if deck is empty, load; else push to queue
  if(!d.buffer){
    d.name = file.name; d.buffer = buf; d.bpm = bpm; d.offset = 0;
    updateDeckHeader(id);
    drawDeckWave(id);
    toast("Deck "+id+" loaded: "+file.name+(bpm?` (${bpm} BPM)`:""));
  } else {
    d.queue.push({name:file.name, buffer:buf, bpm});
    renderQueue(id);
    toast("Queued on deck "+id+": "+file.name);
  }
}
function updateDeckHeader(id){
  const d = decks[id];
  const nameEl = document.getElementById(`deck-${id.toLowerCase()}-name`);
  if(nameEl) nameEl.textContent = d.name + (d.bpm ? `  ·  ${d.bpm} BPM` : "");
}
function renderQueue(id){
  const wrap = document.getElementById(`deck-${id.toLowerCase()}-queue`);
  const d = decks[id]; if(!wrap) return;
  if(!d.queue.length){ wrap.innerHTML = '<div class="qhint">Queue empty · load more files to queue them</div>'; return; }
  wrap.innerHTML = '<div class="qhint">UP NEXT</div>';
  d.queue.forEach((q,i)=>{
    const row = document.createElement("div"); row.className = "qrow";
    row.innerHTML = `<span class="qname">${i+1}. ${q.name}${q.bpm?` (${q.bpm} BPM)`:""}</span>
      <button data-a="up">▲</button><button data-a="dn">▼</button>
      <button data-a="now">↑ NOW</button><button data-a="del">×</button>`;
    row.querySelector('[data-a="up"]').onclick = ()=>{ if(i>0){ [d.queue[i-1],d.queue[i]]=[d.queue[i],d.queue[i-1]]; renderQueue(id);} };
    row.querySelector('[data-a="dn"]').onclick = ()=>{ if(i<d.queue.length-1){ [d.queue[i+1],d.queue[i]]=[d.queue[i],d.queue[i+1]]; renderQueue(id);} };
    row.querySelector('[data-a="now"]').onclick = ()=>{
      const next = d.queue.splice(i,1)[0];
      if(d.buffer) d.queue.unshift({name:d.name,buffer:d.buffer,bpm:d.bpm});
      const wasPlaying = d.playing; deckStop(id);
      d.name=next.name; d.buffer=next.buffer; d.bpm=next.bpm; d.offset=0;
      updateDeckHeader(id); drawDeckWave(id); renderQueue(id);
      if(wasPlaying) deckPlay(id);
    };
    row.querySelector('[data-a="del"]').onclick = ()=>{ d.queue.splice(i,1); renderQueue(id); };
    wrap.appendChild(row);
  });
}
function deckAutoNext(id){
  const d = decks[id];
  if(!d.queue.length){ toast("Deck "+id+" queue empty"); return; }
  const next = d.queue.shift();
  d.name=next.name; d.buffer=next.buffer; d.bpm=next.bpm; d.offset=0;
  updateDeckHeader(id); drawDeckWave(id); renderQueue(id);
  deckPlay(id);
}
function drawDeckWave(id){
  const cv = document.getElementById(`deck-${id.toLowerCase()}-wave`);
  const d = decks[id]; if(!d?.buffer||!cv) return;
  const w = cv.clientWidth, h = cv.clientHeight;
  cv.width = w; cv.height = h;
  const g = cv.getContext("2d");
  g.fillStyle = "#1a1611"; g.fillRect(0,0,w,h);
  const data = d.buffer.getChannelData(0);
  const step = Math.max(1, Math.floor(data.length/w));
  g.strokeStyle = "#d4a373"; g.beginPath();
  for(let x=0;x<w;x++){
    let min=1,max=-1;
    for(let i=0;i<step;i++){ const v = data[x*step+i]||0; if(v<min)min=v; if(v>max)max=v; }
    const y1 = (1-min)*h/2, y2 = (1-max)*h/2;
    g.moveTo(x,y1); g.lineTo(x,y2);
  }
  g.stroke();
  drawLoopRegion(id);
}
function drawLoopRegion(id){
  const d = decks[id];
  const region = document.getElementById(`deck-${id.toLowerCase()}-loop-region`);
  if(!region||!d.buffer) return;
  if(!d.loopOn){ region.style.display="none"; return; }
  const dur = d.buffer.duration;
  const startPct = (d.loopStart/dur)*100;
  const widthPct = (Math.min(d.loopLen, dur-d.loopStart)/dur)*100;
  region.style.display="block";
  region.style.left = startPct+"%";
  region.style.width = widthPct+"%";
}
function deckPlay(id){
  const d = decks[id]; if(!d.buffer) { toast("Load a file first"); return; }
  ensureDeckChain(d);
  if(d.playing) return;
  const c = audio();
  d.src = c.createBufferSource(); d.src.buffer = d.buffer;
  d.src.playbackRate.value = d.tempo;
  if(d.src.detune) d.src.detune.value = d.pitch*100;
  if(d.loopOn){
    d.src.loop = true;
    d.src.loopStart = d.loopStart;
    d.src.loopEnd = Math.min(d.loopStart + d.loopLen, d.buffer.duration);
  }
  d.src.connect(d.low);
  d.src.start(0, d.offset);
  d.startTime = c.currentTime - d.offset;
  d.playing = true;
  d.drawTimer = setInterval(()=>updateDeckPos(id), 60);
  d.src.onended = ()=>{ if(d.playing){ deckStop(id); if(d.autoQueue) deckAutoNext(id); } };
  if(d.vinyl) updateVinylSpin(id);
}
function deckBrake(id){
  const d = decks[id]; if(!d.src) return;
  const c = audio();
  try{
    d.src.playbackRate.cancelScheduledValues(c.currentTime);
    d.src.playbackRate.setValueAtTime(d.src.playbackRate.value, c.currentTime);
    d.src.playbackRate.exponentialRampToValueAtTime(0.01, c.currentTime+1.5);
  }catch(e){}
  setTimeout(()=>{
    if(d.src){ try{d.src.onended=null; d.src.stop()}catch(e){} d.src=null; }
    d.playing=false; if(d.drawTimer){clearInterval(d.drawTimer); d.drawTimer=null;}
  }, 1700);
  toast("Deck "+id+" vinyl brake ⚙");
}
function deckSqueak(id){
  const d = decks[id]; ensureDeckChain(d);
  scratch(audio(), d.cross, audio().currentTime);
  toast("Deck "+id+" 🎧 squeak");
}
function deckStop(id){
  const d = decks[id];
  if(d.src){ try{d.src.onended=null; d.src.stop()}catch(e){} d.src=null; }
  if(d.playing){
    d.offset = (audio().currentTime - d.startTime) % (d.buffer?.duration||1);
  }
  d.playing = false;
  if(d.drawTimer){ clearInterval(d.drawTimer); d.drawTimer=null; }
  if(d.vinyl) updateVinylSpin(id);
}
function deckCue(id){
  const d = decks[id]; deckStop(id); d.offset = 0; updateDeckPos(id);
}
// smooth seek — recompute offset & restart without perceptible gap; keep playing state
function deckSeek(id, pct){
  const d = decks[id]; if(!d.buffer) return;
  const newOffset = Math.max(0, Math.min(d.buffer.duration-0.05, pct*d.buffer.duration));
  if(!d.playing){ d.offset = newOffset; updateDeckPos(id); return; }
  // stop old source silently, start new at same context time
  try{ d.src.onended=null; d.src.stop(); }catch(e){}
  d.src = null;
  d.offset = newOffset;
  const c = audio();
  d.src = c.createBufferSource(); d.src.buffer = d.buffer;
  d.src.playbackRate.value = d.tempo;
  if(d.src.detune) d.src.detune.value = d.pitch*100;
  if(d.loopOn){ d.src.loop=true; d.src.loopStart=d.loopStart;
    d.src.loopEnd=Math.min(d.loopStart+d.loopLen, d.buffer.duration); }
  d.src.connect(d.low);
  d.src.start(0, d.offset);
  d.startTime = c.currentTime - d.offset;
  d.src.onended = ()=>{ if(d.playing){ deckStop(id); if(d.autoQueue) deckAutoNext(id); } };
}
function deckRewind(id, sec=5){
  const d = decks[id]; if(!d.buffer) return;
  const cur = d.playing ? (audio().currentTime - d.startTime) : d.offset;
  deckSeek(id, Math.max(0, cur-sec) / d.buffer.duration);
}
function deckForward(id, sec=5){
  const d = decks[id]; if(!d.buffer) return;
  const cur = d.playing ? (audio().currentTime - d.startTime) : d.offset;
  deckSeek(id, Math.min(d.buffer.duration-0.1, cur+sec) / d.buffer.duration);
}
function deckReset(id){
  const d = decks[id];
  Object.assign(d, {tempo:1,pitch:0,vol:0.8,hiV:0,midV:0,lowV:0,
    loopOn:false,loopLen:4,loopStart:0,
    fxRev:false,fxDel:false,fxFlt:false,fxHi:false,fxFlg:false,fxBit:false});
  applyDeckKnobs(d); applyDeckFx(d); drawLoopRegion(id);
  // refresh UI values
  const lower = id.toLowerCase();
  const el = document.querySelector(`.deck[data-deck="${id}"]`); if(!el) return;
  el.querySelectorAll("input[type=range]").forEach(inp=>{
    const p=inp.dataset.p; if(p==="tempo") inp.value=1;
    else if(p==="pitch") inp.value=0; else if(p==="vol") inp.value=0.8;
    else inp.value=0;
    inp.dispatchEvent(new Event("input"));
  });
  el.querySelectorAll("[data-fx]").forEach(b=>b.classList.remove("on"));
  el.querySelector('[data-act="loop"]')?.classList.remove("on");
  toast("Deck "+id+" reset");
}
function deckToggleLoop(id){
  const d = decks[id]; if(!d.buffer){ toast("Load a file first"); return; }
  d.loopOn = !d.loopOn;
  if(d.loopOn){
    // set loop start to current position
    d.loopStart = d.playing ? (audio().currentTime - d.startTime) : d.offset;
  }
  drawLoopRegion(id);
  // if playing, restart to apply loop change
  if(d.playing){ deckStop(id); deckPlay(id); }
  const el = document.querySelector(`.deck[data-deck="${id}"] [data-act="loop"]`);
  if(el) el.classList.toggle("on", d.loopOn);
}
function deckToggleFx(id, fx){
  const d = decks[id];
  d[fx] = !d[fx];
  ensureDeckChain(d);
  applyDeckFx(d);
  const el = document.querySelector(`.deck[data-deck="${id}"] [data-fx="${fx}"]`);
  if(el) el.classList.toggle("on", d[fx]);
}
function updateDeckPos(id){
  const d = decks[id]; const el = document.getElementById(`deck-${id.toLowerCase()}-pos`);
  if(!el || !d.buffer) return;
  let cur = d.playing ? (audio().currentTime - d.startTime) : d.offset;
  if(d.loopOn && d.playing){
    // clamp visual pos to loop region
    const loopEnd = Math.min(d.loopStart+d.loopLen, d.buffer.duration);
    if(cur >= loopEnd) cur = d.loopStart + ((cur-d.loopStart) % d.loopLen);
  }
  const pct = Math.max(0,Math.min(1, cur / d.buffer.duration));
  el.style.display = "block";
  el.style.left = (pct*100) + "%";
}

function buildDeckDOM(id){
  const lower = id.toLowerCase();
  const el = document.createElement("div"); el.className="deck"; el.dataset.deck=id;
  el.innerHTML = `
    <div class="row" style="justify-content:space-between">
      <h3>DECK ${id}</h3>
      <button class="btn sm" data-act="vinyl" title="Toggle vinyl view">💿 VINYL</button>
    </div>
    <div class="row" style="gap:4px;margin-top:4px">
      <label class="btn sm tan" for="deck-${lower}-file">LOAD</label>
      <input type="file" id="deck-${lower}-file" accept="audio/*" multiple style="display:none">
      <button class="btn sm rust" data-act="cue">CUE</button>
      <button class="btn sm" data-act="rew" title="Rewind 5s">◀◀</button>
      <button class="btn sm" data-act="fwd" title="Forward 5s">▶▶</button>
      <button class="btn sm" data-act="reset" title="Reset all">↺</button>
      <button class="btn sm moss" data-act="autoq" title="Auto-play next when track ends">AUTO ▶</button>
    </div>
    <div class="fname" id="deck-${lower}-name">— no track loaded —</div>
    <div class="wave" id="deck-${lower}-wave-wrap">
      <canvas id="deck-${lower}-wave"></canvas>
      <div class="loop-region" id="deck-${lower}-loop-region"></div>
      <div class="pos" id="deck-${lower}-pos" style="display:none"></div>
      <div class="vinyl-view" id="deck-${lower}-vinyl" style="display:none">
        <div class="vinyl-disc" id="deck-${lower}-disc"></div>
      </div>
    </div>
    <div class="transport">
      <button class="btn sage" data-act="play">▶ PLAY</button>
      <button class="btn rust" data-act="stop">■</button>
      <button class="btn amber" data-act="sync">SYNC</button>
      <button class="btn moss" data-act="loop" title="Loop from current position">⟲ LOOP</button>
      <span style="font-size:8px;color:var(--ink-dim)">LEN</span>
      <input type="range" data-p="loopLen" min="0.25" max="16" step="0.25" value="4" style="width:80px" title="Loop length (seconds)">
      <span class="val" id="deck-${lower}-loopLen-lbl" style="font-size:8px;color:var(--amber);min-width:32px">4.00s</span>
    </div>
    <div class="transport" style="margin-top:6px;flex-wrap:wrap">
      <button class="btn sm" data-fx="fxRev">REVERB</button>
      <button class="btn sm" data-fx="fxDel">DELAY</button>
      <button class="btn sm" data-fx="fxFlt">LOWPASS</button>
      <button class="btn sm" data-fx="fxHi">HIPASS</button>
      <button class="btn sm" data-fx="fxFlg">FLANGER</button>
      <button class="btn sm" data-fx="fxBit">BITCRUSH</button>
      <button class="btn sm rust" data-act="squeak" title="One-shot DJ scratch">🎧 SQUEAK</button>
      <button class="btn sm amber" data-act="brake" title="Vinyl brake stop">⏻ BRAKE</button>
    </div>
    <div class="knobs">
      <div class="knob"><label>TEMPO <span class="val" id="deck-${lower}-tempo-lbl">1.000x</span></label>
        <input type="range" data-p="tempo" min="0.5" max="2" step="0.005" value="1"></div>
      <div class="knob"><label>PITCH <span class="val" id="deck-${lower}-pitch-lbl">0 st</span></label>
        <input type="range" data-p="pitch" min="-12" max="12" step="1" value="0"></div>
      <div class="knob"><label>VOL <span class="val" id="deck-${lower}-vol-lbl">80</span></label>
        <input type="range" data-p="vol" min="0" max="1.2" step="0.01" value="0.8"></div>
      <div class="knob"><label>HI <span class="val" id="deck-${lower}-hi-lbl">0</span></label>
        <input type="range" data-p="hi" min="-20" max="20" step="1" value="0"></div>
      <div class="knob"><label>MID <span class="val" id="deck-${lower}-mid-lbl">0</span></label>
        <input type="range" data-p="mid" min="-20" max="20" step="1" value="0"></div>
      <div class="knob"><label>LOW <span class="val" id="deck-${lower}-low-lbl">0</span></label>
        <input type="range" data-p="low" min="-20" max="20" step="1" value="0"></div>
    </div>
    <div class="queue-panel" id="deck-${lower}-queue"></div>`;
  return el;
}

function wireDeck(id){
  const lower = id.toLowerCase();
  const deck = decks[id];
  const el = document.querySelector(`.deck[data-deck="${id}"]`);
  document.getElementById(`deck-${lower}-file`).onchange = async e=>{
    const files = [...e.target.files];
    for(const f of files){ await deckLoad(id, f); }
    e.target.value="";
  };
  // click waveform to scrub — smooth, doesn't pause
  const wrap = document.getElementById(`deck-${lower}-wave-wrap`);
  wrap.addEventListener("click", e=>{
    if(!deck.buffer || deck.vinyl) return;
    const rect = wrap.getBoundingClientRect();
    const pct = (e.clientX - rect.left) / rect.width;
    deckSeek(id, pct);
  });
  el.querySelectorAll("button[data-act]").forEach(b=>{
    b.onclick = ()=>{
      const a = b.dataset.act;
      if(a==="play") deckPlay(id);
      else if(a==="stop") deckStop(id);
      else if(a==="cue") deckCue(id);
      else if(a==="rew") deckRewind(id, 5);
      else if(a==="fwd") deckForward(id, 5);
      else if(a==="reset") deckReset(id);
      else if(a==="loop") deckToggleLoop(id);
      else if(a==="vinyl") deckToggleVinyl(id);
      else if(a==="autoq"){ deck.autoQueue = !deck.autoQueue; b.classList.toggle("on", deck.autoQueue);
        toast("Deck "+id+" auto-next "+(deck.autoQueue?"ON":"OFF")); }
      else if(a==="squeak") deckSqueak(id);
      else if(a==="brake") deckBrake(id);
      else if(a==="sync"){
        // match tempo to next deck if BPMs known, else copy tempo
        const others = deckIds.filter(x=>x!==id);
        if(!others.length) return;
        const otherId = others[0];
        const other = decks[otherId]; if(!other) return;
        if(deck.bpm && other.bpm){
          const target = (other.bpm * other.tempo) / deck.bpm;
          deck.tempo = Math.max(0.5, Math.min(2, target));
        } else {
          deck.tempo = other.tempo;
        }
        el.querySelector('input[data-p="tempo"]').value = deck.tempo;
        document.getElementById(`deck-${lower}-tempo-lbl`).textContent = deck.tempo.toFixed(3)+"x";
        if(deck.src) deck.src.playbackRate.value = deck.tempo;
        toast("Deck "+id+" synced to "+otherId+(deck.bpm&&other.bpm?" (BPM matched)":""));
      }
    };
  });
  el.querySelectorAll("button[data-fx]").forEach(b=>{
    b.onclick = ()=>deckToggleFx(id, b.dataset.fx);
  });
  el.querySelectorAll("input[type=range]").forEach(inp=>{
    inp.oninput = ()=>{
      const p = inp.dataset.p; const v = +inp.value;
      const lbl = document.getElementById(`deck-${lower}-${p}-lbl`);
      if(p==="tempo"){ deck.tempo=v; if(deck.src) deck.src.playbackRate.value=v;
        if(lbl) lbl.textContent=v.toFixed(3)+"x"; updateVinylSpin(id); }
      else if(p==="pitch"){ deck.pitch=v; if(deck.src && deck.src.detune) deck.src.detune.value=v*100; if(lbl) lbl.textContent=v+" st"; }
      else if(p==="vol"){ deck.vol=v; if(lbl) lbl.textContent=Math.round(v*100); }
      else if(p==="hi"){ deck.hiV=v; if(lbl) lbl.textContent=v; }
      else if(p==="mid"){ deck.midV=v; if(lbl) lbl.textContent=v; }
      else if(p==="low"){ deck.lowV=v; if(lbl) lbl.textContent=v; }
      else if(p==="loopLen"){
        deck.loopLen = v;
        if(lbl) lbl.textContent = v.toFixed(2)+"s";
        drawLoopRegion(id);
        // LIVE update: no restart. Just adjust the running source's loopEnd.
        if(deck.src && deck.loopOn && deck.buffer){
          deck.src.loopEnd = Math.min(deck.loopStart + v, deck.buffer.duration);
        }
      }
      if(deck.dry) applyDeckKnobs(deck);
    };
    // Shift+arrow = 10× finer
    inp.addEventListener("keydown", e=>{
      if((e.key==="ArrowLeft"||e.key==="ArrowRight") && e.shiftKey){
        e.preventDefault();
        const step = (+inp.step || 1) / 10;
        const dir = e.key==="ArrowRight" ? 1 : -1;
        inp.value = Math.max(+inp.min, Math.min(+inp.max, (+inp.value) + dir*step));
        inp.dispatchEvent(new Event("input"));
      }
    });
  });
  renderQueue(id);
}
function deckToggleVinyl(id){
  const d = decks[id]; d.vinyl = !d.vinyl;
  const lower = id.toLowerCase();
  const wrap = document.getElementById(`deck-${lower}-wave-wrap`);
  const canvas = document.getElementById(`deck-${lower}-wave`);
  const region = document.getElementById(`deck-${lower}-loop-region`);
  const pos = document.getElementById(`deck-${lower}-pos`);
  const vinyl = document.getElementById(`deck-${lower}-vinyl`);
  if(d.vinyl){
    canvas.style.display="none"; region.style.display="none"; pos.style.display="none";
    vinyl.style.display="flex";
    wrap.style.height="180px";
    updateVinylSpin(id);
  } else {
    canvas.style.display="block"; vinyl.style.display="none";
    wrap.style.height="60px";
    drawDeckWave(id);
    updateDeckPos(id);
  }
}
function updateVinylSpin(id){
  const d = decks[id];
  const disc = document.getElementById(`deck-${id.toLowerCase()}-disc`);
  if(!disc) return;
  const rpm = 33.33 * d.tempo;
  const secPerRot = 60 / rpm;
  disc.style.animation = d.playing ? `spin ${secPerRot}s linear infinite` : "none";
}

function buildCrossfaders(){
  const wrap = $("#crossfaders"); wrap.innerHTML="";
  const pairs = getDeckPairs();
  if(!pairs.length){
    wrap.innerHTML = '<div class="hint">Add another deck to enable crossfading.</div>';
    return;
  }
  pairs.forEach(p=>{
    const key = pairKey(p);
    if(crossfaders[key]==null) crossfaders[key] = 0.5;
    const panel = document.createElement("div"); panel.className="crossfader-panel";
    panel.style.marginTop = "10px";
    panel.innerHTML = `
      <div class="lbl-row"><span>◄ DECK ${p[0]}</span><span>CROSSFADER ${p[0]}↔${p[1]}</span><span>DECK ${p[1]} ►</span></div>
      <input type="range" min="0" max="100" value="${Math.round(crossfaders[key]*100)}" data-pair="${key}">`;
    wrap.appendChild(panel);
    panel.querySelector("input").oninput = e=>{
      crossfaders[key] = e.target.value/100;
      applyCrossfaders();
    };
  });
  applyCrossfaders();
}
function buildDJView(){
  const grid = $("#dj-grid"); grid.innerHTML="";
  deckIds.forEach(id=>{ if(!decks[id]) decks[id]=makeDeck(id); });
  deckIds.forEach(id=>{ grid.appendChild(buildDeckDOM(id)); });
  deckIds.forEach(id=>{ wireDeck(id); drawDeckWave(id); });
  buildCrossfaders();
}
function setDeckCount(n){
  deckIds = DECK_LETTERS.slice(0,n);
  buildDJView();
}
$("#deck-count").onchange = e=>setDeckCount(+e.target.value);
buildDJView();

// ============================================================
//  STEMS
// ============================================================
$("#stem-file").onchange=async e=>{ const f=e.target.files[0]; if(!f)return;
  const url=$("#stem-url").value.trim();
  if(url) await sendToBackend(f,url); else { toast("No backend URL — using local karaoke"); await localKaraoke(f); }
  e.target.value="";
};
$("#stem-fallback").onclick=()=>{ localKaraokePrompt(); };
function localKaraokePrompt(){
  const el = document.createElement("input");
  el.type="file"; el.accept="audio/*";
  el.onchange=async e=>{ const f=e.target.files[0]; if(f) await localKaraoke(f); };
  el.click();
}
async function sendToBackend(file,url){
  const st=$("#stem-status"); st.textContent="Separating in the cloud… 30–90s, hang tight.";
  try{
    const fd=new FormData(); fd.append("audio",file);
    const res=await fetch(url,{method:"POST",body:fd});
    if(!res.ok) throw new Error("HTTP "+res.status+" "+(await res.text()).slice(0,120));
    const ctype=res.headers.get("content-type")||"";
    if(ctype.includes("application/json")){
      const data=await res.json();
      const entries=Object.entries(data.stems||{});
      if(!entries.length) throw new Error("no stems returned");
      for(const [name,val] of entries){
        let arr;
        if(typeof val==="string" && /^https?:\/\//.test(val)){
          const rr=await fetch(val); arr=await rr.arrayBuffer();
        } else if(typeof val==="string" && val.startsWith("/")){
          const rr=await fetch(new URL(val, url).href); arr=await rr.arrayBuffer();
        } else { arr=b64ToArr(val); }
        const buf=await audio().decodeAudioData(arr);
        addTrack(file.name.replace(/\.[^.]+$/,"")+" · "+name, buf);
      }
      st.textContent="Stems loaded as tracks ✓";
    } else {
      const blob=await res.blob(); const buf=await audio().decodeAudioData(await blob.arrayBuffer());
      addTrack(file.name+" · stem", buf); st.textContent="Stem loaded ✓";
    }
  }catch(err){ st.textContent="Cloud error: "+err.message+" — falling back to local karaoke";
    await localKaraoke(file); }
}
function b64ToArr(b64){ const bin=atob(b64.replace(/^data:.*;base64,/,"")); const a=new Uint8Array(bin.length);
  for(let i=0;i<bin.length;i++)a[i]=bin.charCodeAt(i); return a.buffer; }
async function localKaraoke(file){
  const st=$("#stem-status"); st.textContent="Local karaoke (center-cancel)…";
  try{
    const buf=await audio().decodeAudioData(await file.arrayBuffer());
    if(buf.numberOfChannels<2){ st.textContent="Mono file — can't center-cancel."; addTrack(file.name,buf); return; }
    const L=buf.getChannelData(0),R=buf.getChannelData(1),n=buf.length;
    const inst=audio().createBuffer(1,n,buf.sampleRate);
    const di=inst.getChannelData(0);
    for(let i=0;i<n;i++){ di[i]=(L[i]-R[i])/2; }
    addTrack(file.name.replace(/\.[^.]+$/,"")+" · INSTRUMENTAL",inst);
    st.textContent="Instrumental made (vocals reduced). For true stems use the AI backend.";
  }catch(e){ st.textContent="Failed: "+e.message; }
}

// ============================================================
//  LIBRARY (localStorage)
// ============================================================
const LS="snafu.projects.v1";
function loadLib(){ try{return JSON.parse(localStorage.getItem(LS))||[]}catch(e){return []} }
function saveLib(a){ localStorage.setItem(LS,JSON.stringify(a)); }
// Server id of the project currently open, or null if it has never been
// saved to the server. Sending this back on save turns POST /api/projects
// into an update instead of minting a fresh uuid every time.
let currentProjectId=null;
function projectState(){
  const st={
    name:$("#proj-name").value||"untitled",
    bpm:bpm(),bars:barCount,swing:+$("#swing").value,master:+$("#master").value,
    rowSounds, rowVols, rowMutes, pattern, padSounds,
    tracks:tracks.map(t=>({name:t.name,gain:t.gain,mute:t.mute,solo:t.solo,pitch:t.pitch,speed:t.speed})),
    ts:Date.now()
  };
  if(currentProjectId) st.id=currentProjectId;
  return st;
}
function applyState(st){
  // Adopt the id so the next save updates this project rather than copying it.
  currentProjectId=st.id||null;
  $("#proj-name").value=st.name||"";
  $("#bpm").value=st.bpm||90;
  barCount = st.bars || 4;
  $("#bars-label").textContent = barCount;
  $("#swing").value=st.swing||0; $("#master").value=st.master||90;
  if(st.rowSounds && st.rowSounds.length){
    rowSounds = st.rowSounds.slice();
    rowVols = (st.rowVols && st.rowVols.length===rowSounds.length) ? st.rowVols.slice() : rowSounds.map(()=>0.9);
    rowMutes = (st.rowMutes && st.rowMutes.length===rowSounds.length) ? st.rowMutes.slice() : rowSounds.map(()=>false);
    $("#rows-label").textContent = rowSounds.length;
  }
  if(st.padSounds && st.padSounds.length===16){ padSounds = st.padSounds.slice(); buildPads(); }
  if(st.pattern && st.pattern.length===rowSounds.length){
    pattern = st.pattern.map(row=>{
      const out = new Array(STEPS_PER_BAR*barCount).fill(false);
      for(let i=0;i<Math.min(row.length,out.length);i++) out[i]=row[i];
      return out;
    });
  } else {
    pattern = rowSounds.map(()=>new Array(STEPS_PER_BAR*barCount).fill(false));
  }
  buildSequencer();
  (st.tracks||[]).forEach(sv=>{ const m=tracks.find(t=>t.name===sv.name);
    if(m) Object.assign(m,{gain:sv.gain,mute:sv.mute,solo:sv.solo,pitch:sv.pitch,speed:sv.speed}); });
  renderTracks();
}
function renderLib(){
  const wrap=$("#library"); const lib=loadLib(); wrap.innerHTML="";
  if(!lib.length){ wrap.innerHTML='<div class="hint">Empty. Hit SAVE.</div>'; return; }
  lib.slice().reverse().forEach(p=>{
    const d=document.createElement("div"); d.className="lib-item";
    d.innerHTML=`<span class="ln">${p.name}</span>
      <button class="btn sm tan" data-a="load">LOAD</button>
      <button class="btn sm rust" data-a="del">✕</button>`;
    d.querySelector('[data-a="load"]').onclick=()=>{ applyState(p); toast("Loaded "+p.name); };
    d.querySelector('[data-a="del"]').onclick=()=>{ saveLib(loadLib().filter(x=>x.ts!==p.ts)); renderLib(); };
    wrap.appendChild(d);
  });
}
$("#save-proj").onclick=()=>{
  const lib=loadLib(); const st=projectState();
  const i=lib.findIndex(x=>x.name===st.name); if(i>=0) lib[i]=st; else lib.push(st);
  saveLib(lib); renderLib(); toast("Saved "+st.name);
};
$("#export-proj").onclick=()=>{ downloadBlob(new Blob([JSON.stringify(projectState(),null,2)],{type:"application/json"}),
  ($("#proj-name").value||"snafu")+".snafu"); };
$("#import-proj").onchange=async e=>{ const f=e.target.files[0]; if(!f)return;
  try{ applyState(JSON.parse(await f.text())); toast("Imported"); }catch(err){ toast("Bad file"); } e.target.value=""; };

// ============================================================
//  TRANSPORT WIRING + TABS
// ============================================================
$("#play").onclick=()=>{ audio(); startPlayback(); };
$("#stop").onclick=stopPlayback;

// EXPORT AS modal
$("#export").onclick=()=>{ $("#export-modal").style.display="flex"; };
$("#export-cancel").onclick=()=>{ $("#export-modal").style.display="none"; };
$$("#export-modal [data-fmt]").forEach(b=>{
  b.onclick=async ()=>{
    $("#export-modal").style.display="none";
    const fmt = b.dataset.fmt;
    if(fmt==="wav16") await exportWav(16);
    else if(fmt==="wav24") await exportWav(24);
    else if(fmt==="stems") await exportStems();
    else if(fmt==="webm") await exportWebM();
  };
});
$("#master").oninput=()=>{ if(masterGain) masterGain.gain.value=masterVol(); };

// ============================================================
//  SNAFU SYNC — layered overview across all sections
// ============================================================
function drawWaveOnCanvas(cv, buffer, color="#a8c686"){
  if(!cv||!buffer) return;
  const w=cv.clientWidth||300, h=cv.clientHeight||40;
  cv.width=w; cv.height=h;
  const g=cv.getContext("2d");
  g.fillStyle="#1a1611"; g.fillRect(0,0,w,h);
  const data=buffer.getChannelData(0);
  const step=Math.max(1,Math.floor(data.length/w));
  g.strokeStyle=color; g.beginPath();
  for(let x=0;x<w;x++){
    let min=1,max=-1;
    for(let i=0;i<step;i++){ const v=data[x*step+i]||0; if(v<min)min=v; if(v>max)max=v; }
    g.moveTo(x,(1-min)*h/2); g.lineTo(x,(1-max)*h/2);
  }
  g.stroke();
}
function buildSyncView(){
  const wrap = $("#sync-lanes"); wrap.innerHTML = "";
  // BEAT lane
  const beat = document.createElement("div"); beat.className = "sync-lane beat";
  const beatBody = document.createElement("div"); beatBody.className = "lane-body";
  const total = totalSteps();
  beatBody.style.setProperty("--total-steps", total);
  rowSounds.forEach((sound, r)=>{
    for(let s=0;s<total;s++){
      const cell = document.createElement("div");
      cell.className = "sync-cell" + (s%4===0?" beat-1":"") + (pattern[r][s]?" on":"");
      beatBody.appendChild(cell);
    }
  });
  beat.innerHTML = `<div class="lane-head">
    <span class="lane-name">◈ BEAT PATTERN</span>
    <span class="lane-info">${rowSounds.length} rows · ${barCount} bars · ${bpm()} BPM</span>
    <button class="btn sm tan" data-goto="studio">OPEN</button>
  </div>`;
  beat.appendChild(beatBody);
  wrap.appendChild(beat);

  // AUDIO TRACK lanes
  tracks.forEach(tr=>{
    const lane = document.createElement("div"); lane.className = "sync-lane";
    const flags = [
      tr.mute?"MUTED":null, tr.solo?"SOLO":null, tr.loopOn?"LOOP":null
    ].filter(Boolean).join(" · ");
    lane.innerHTML = `
      <div class="lane-head">
        <span class="lane-name">♪ ${tr.name}</span>
        <span class="lane-info">${tr.buffer?tr.buffer.duration.toFixed(2)+"s":""}${flags?" · "+flags:""}</span>
        <button class="btn sm tan" data-goto="studio">OPEN</button>
      </div>
      <div class="lane-body">
        <canvas></canvas>
        <div class="sync-region"></div>
      </div>`;
    wrap.appendChild(lane);
    requestAnimationFrame(()=>{
      drawWaveOnCanvas(lane.querySelector("canvas"), tr.buffer);
      if(tr.buffer){
        const reg = lane.querySelector(".sync-region");
        const s = tr.loopOn ? tr.loopStart : 0;
        const e = tr.loopOn ? tr.loopEnd : tr.buffer.duration;
        if(e>s){
          reg.style.left = (s/tr.buffer.duration*100)+"%";
          reg.style.width = ((e-s)/tr.buffer.duration*100)+"%";
          reg.style.display = tr.loopOn ? "block" : "none";
        }
      }
    });
  });
  if(!tracks.length){
    const hint = document.createElement("div"); hint.className = "hint";
    hint.textContent = "Upload or record audio in the STUDIO tab to see it here.";
    wrap.appendChild(hint);
  }
  // wire OPEN buttons
  wrap.querySelectorAll("[data-goto]").forEach(b=>{
    b.onclick = ()=>{ const btn = document.querySelector(`.tab-btn[data-view="${b.dataset.goto}"]`); btn?.click(); };
  });
}
$("#sync-play").onclick = ()=>{ audio(); startPlayback(); };
$("#sync-stop").onclick = stopPlayback;
$("#sync-record").onclick = async ()=>{
  // start mic recording, then start master transport
  if(!(micRec && micRec.state==="recording")){
    await startMicRec();
    if(!playing) startPlayback();
    toast("Master record armed — everything is running");
  } else {
    stopMicRec();
    if(playing) stopPlayback();
    toast("Master record stopped");
  }
};

$("#tracks-compact").onchange = e=>{ $("#tracks").classList.toggle("compact", e.target.checked); };

let activeView = "studio";
let lastDeckFocused = null;
document.addEventListener("keydown",e=>{
  if(e.target.tagName==="INPUT"||e.target.tagName==="SELECT"||e.target.tagName==="TEXTAREA") return;
  if(e.code==="Space"){
    e.preventDefault();
    if(activeView==="studio"){
      playing ? stopPlayback() : startPlayback();
    } else if(activeView==="dj"){
      // toggle last-focused deck, else all decks
      if(lastDeckFocused && decks[lastDeckFocused]){
        const d=decks[lastDeckFocused];
        d.playing ? deckStop(lastDeckFocused) : deckPlay(lastDeckFocused);
      } else {
        deckIds.forEach(id=>{ const d=decks[id]; if(d.buffer){ d.playing ? deckStop(id) : deckPlay(id); } });
      }
    } else if(activeView==="pads"){
      playPad(selPad);
    }
  }
});

$$(".tab-btn").forEach(b=>{
  b.onclick = ()=>{
    $$(".tab-btn").forEach(x=>x.classList.remove("on"));
    b.classList.add("on");
    $$("#view-studio, #view-pads, #view-dj, #view-sync").forEach(v=>v.style.display="none");
    document.getElementById("view-"+b.dataset.view).style.display="";
    activeView = b.dataset.view;
    if(activeView==="dj"){ deckIds.forEach(id=>drawDeckWave(id)); }
    if(activeView==="studio"){ tracks.forEach(drawTrackWave); }
    if(activeView==="sync"){ buildSyncView(); }
  };
});
// track last-focused deck for section-aware Space
document.addEventListener("click", e=>{
  const deckEl = e.target.closest(".deck[data-deck]");
  if(deckEl) lastDeckFocused = deckEl.dataset.deck;
});

// ============================================================
//  SERVER SYNC
// ============================================================
function serverBase(){
  const v=$("#server-url").value.trim();
  if(v) return v.replace(/\/$/,"");
  return location.protocol.startsWith("http") ? location.origin : "";
}
$("#cloud-save").onclick=async ()=>{
  const base=serverBase(); const st=$("#server-status");
  if(!base){ st.textContent="No server. Host this on your droplet, or type its URL."; return; }
  try{
    const first=!currentProjectId;
    const r=await fetch(base+"/api/projects",{method:"POST",headers:{"Content-Type":"application/json"},
      body:JSON.stringify(projectState())});
    if(!r.ok) throw new Error("HTTP "+r.status);
    // Remember the id the server assigned, so the next save updates this row.
    const saved=await r.json(); if(saved && saved.id) currentProjectId=saved.id;
    st.textContent=first?"Saved to server ✓":"Updated on server ✓"; loadServerLib();
  }catch(e){ st.textContent="Server save failed: "+e.message; }
};
// Detach from the open project so the next save creates a separate row.
$("#cloud-save-as").onclick=()=>{
  currentProjectId=null;
  $("#cloud-save").click();
};
$("#cloud-load").onclick=loadServerLib;
async function loadServerLib(){
  const base=serverBase(); const st=$("#server-status"); const wrap=$("#server-lib");
  if(!base){ st.textContent="No server set."; return; }
  try{
    const r=await fetch(base+"/api/projects"); if(!r.ok) throw new Error("HTTP "+r.status);
    const list=await r.json(); wrap.innerHTML="";
    if(!list.length){ st.textContent="Server library empty."; return; }
    st.textContent="Server projects:";
    list.forEach(p=>{ const d=document.createElement("div"); d.className="lib-item";
      d.innerHTML=`<span class="ln"></span>
        <button class="btn sm tan" data-a="load">LOAD</button>
        <button class="btn sm rust" data-a="del">✕</button>`;
      // textContent, not innerHTML — project names are free text and must not parse as markup.
      d.querySelector(".ln").textContent="☁ "+p.name;
      const loadBtn=d.querySelector('[data-a="load"]');
      loadBtn.onclick=async()=>{
        // The index only carries {id,name,updated}; fetch the full document
        // before applying, or tracks and pattern would be dropped.
        const prev=loadBtn.textContent; loadBtn.disabled=true; loadBtn.textContent="…";
        try{
          const rr=await fetch(base+"/api/projects/"+encodeURIComponent(p.id));
          if(!rr.ok) throw new Error("HTTP "+rr.status);
          applyState(await rr.json()); toast("Loaded "+p.name); st.textContent="Loaded "+p.name;
        }catch(e){ st.textContent="Load failed: "+e.message; }
        finally{ loadBtn.disabled=false; loadBtn.textContent=prev; }
      };
      d.querySelector('[data-a="del"]').onclick=async()=>{
        if(!confirm("Delete \""+p.name+"\" from the server?")) return;
        try{
          const rr=await fetch(base+"/api/projects/"+encodeURIComponent(p.id),{method:"DELETE"});
          if(!rr.ok) throw new Error("HTTP "+rr.status);
          // It no longer exists server-side; the next save should create a new row.
          if(currentProjectId===p.id) currentProjectId=null;
          loadServerLib();
        }catch(e){ st.textContent="Delete failed: "+e.message; }
      };
      wrap.appendChild(d); });
  }catch(e){ st.textContent="Server load failed: "+e.message; }
}

// ============================================================
//  PWA — service worker + install prompt
// ============================================================
if("serviceWorker" in navigator && location.protocol!=="file:"){
  window.addEventListener("load", ()=>{
    navigator.serviceWorker.register("service-worker.js").catch(err=>console.warn("SW register failed:",err));
  });
}
let deferredInstall = null;
window.addEventListener("beforeinstallprompt", e=>{
  e.preventDefault();
  deferredInstall = e;
  const btn = $("#install-btn"); if(btn) btn.style.display = "inline-block";
});
$("#install-btn").onclick = async ()=>{
  if(!deferredInstall){
    toast("On iPhone/iPad: Share → Add to Home Screen. On Chrome: install icon in URL bar.");
    return;
  }
  deferredInstall.prompt();
  const r = await deferredInstall.userChoice;
  if(r.outcome==="accepted") toast("SNAFU installed ✓");
  deferredInstall = null;
  $("#install-btn").style.display = "none";
};

// ============================================================
//  INIT
// ============================================================
$("#bars-label").textContent = barCount;
$("#rows-label").textContent = rowSounds.length;
$("#zoom-label").textContent = stepPx + " px";
buildSequencer();
renderTracks();
renderLib();
buildPads();

if(location.protocol.startsWith("http")){ $("#stem-url").value=location.origin+"/separate"; }

// demo groove
pattern[0][0]=pattern[0][8]=true;
pattern[2][2]=pattern[2][6]=pattern[2][10]=pattern[2][14]=true;
pattern[1][4]=pattern[1][12]=true;
buildSequencer();

window.addEventListener("load", ()=>setTimeout(fitZoom, 50));
</script>
</body>
</html>