.gitignore

@@ -0,0 +1,7 @@
+# Build output — assembled from index.html + assets/ by build.sh
+dist/
+tools/
+
+# Python build artifacts
+__pycache__/
+*.pyc

CLAUDE.md

@@ -0,0 +1,48 @@
+# CLAUDE.md
+
+This file guides Claude Code (claude.ai/code) when working in this repository.
+
+This is the **slim `main` branch** of VARASYS PolyMeter — a polymetric groove-trainer /
+metronome. Only three things ship here:
+
+- `index.html` — the landing chooser: two buttons, **Mobile** → `mobile.html` and
+  **Desktop** → `pm_e-2.html`.
+- `mobile.html` — the touch-first phone/tablet **PWA** (+ `mobile-sessions.html`, its practice
+  journal). Installable, works offline via `mobile-sw.js` + `manifest.webmanifest`.
+- `pm_e-2.html` — the engraved-notation editor.
+
+The **full project** (the PM_E-1 editor, the embeddable widget, every hardware form-factor page,
+the Pico **firmware** editions, the **Rust** port, and the **KiCad/SPICE hardware** design) lives
+on the **`concepts`** branch. Pull anything back from there if it needs to return to the front page.
+
+## Commands
+
+```sh
+./build.sh    # assemble the self-contained pages into dist/ (git-ignored)
+./deploy.sh   # build, stamp version, mirror dist/ to the Caddy web root, smoke-test
+```
+
+There's no test suite on this branch (the track-format conformance suite lives on `concepts`).
+
+## Build system
+
+Every deployed page is **one self-contained `.html` file, zero runtime dependencies** — no
+framework, no CDN, no audio samples (all voices are synthesized in Web Audio). Pages share code
+through build markers that `build.sh` resolves:
+
+- `/*@BUILD:include:src/<file>@*/` inlines a shared partial (`engine.js`, `setlists.js`,
+  `base.css`, `chrome.js`, `header.html`/`footer.html`, `notation.js`, `midiout.js`).
+- `@BUILD:favicon@` / `@BUILD:logo-*@` / `@BUILD:bravura@` inline base64 blobs from `assets/`.
+
+`build.sh` asserts no `@BUILD:` markers survive. **`dist/` is generated and git-ignored — never
+edit it by hand.** Edit the source `*.html` in the repo root and the partials in `src/`;
+`deploy.sh` always builds first, then mirrors `dist/` to the web root with `rsync --delete`
+(so anything no longer built is removed from the live site).
+
+State (set lists, practice log, theme) lives in `localStorage`; nothing is uploaded — share
+links encode everything in the URL hash (`#p=` patch, `#sl=` base64url set list). Source files
+keep an `APP_VERSION` placeholder; only the deployed copy is stamped (from `VERSION`).
+
+## License
+
+GNU AGPL v3 (`LICENSE`).

README.md

@@ -1,196 +1,43 @@
-# Stackable Metronome
+# VARASYS PolyMeter
 
-A browser **polymetric groove trainer / metronome** — and the design mockup for a
+A **polymetric groove trainer & metronome**. Stack as many "meter lanes" as you like —
-Raspberry Pi Pico hardware build. Stack as many "meter lanes" as you like; each is
+each its own little metronome with a grouping, subdivision, drum voice and a per‑step
-its own little metronome with a grouping, subdivision, drum voice and a per-step
 pattern with accents. Layering lanes produces polymeter and true ratio polyrhythm.
 
 **Live:** https://metronome.varasys.io · **Source:** https://codeberg.org/VARASYS/metronome
 
-It's a single, self‑contained `index.html` — **zero dependencies**: no framework,
+## What ships here
-no build step, no bundled or CDN libraries, and nothing fetched at runtime. State
-(set lists, the practice log, theme and UI preferences) lives in `localStorage`.
 
-Because nothing loads from the network, you can save the page (`Ctrl`/`⌘`+`S`) and
+The landing page (`/`) is a simple chooser with two doors:
-open it straight from disk to run fully offline. One catch from a local `file://`:
-the browser may not persist `localStorage` between sessions, so use **Export all**
-(set‑list **⋯** menu) to back up your work.
 
-## Features
+- **Mobile** → `mobile.html` — the touch‑first phone/tablet app (tap a beat, set the tempo,
+  practice). It's an installable **PWA** that works fully offline, with a practice journal
+  (`mobile-sessions.html`).
+- **Desktop** → `pm_e-2.html` — the engraved‑notation editor: build rhythms on a staff with
+  full keyboard control. Best on a large screen.
 
-- **Meter lanes** — grouping (odd meters), subdivision (incl. swing), a drum/percussion
+Every **deployed page is a single, self‑contained `.html` file** with **zero runtime
-  voice, per‑**step dynamics** (accent / normal / ghost / mute), mute, live measure counter.
+dependencies** — no framework, no CDN, nothing fetched at runtime. `build.sh` inlines a shared
-- **Sounds** — a sampled acoustic kit plus synthesized **808 / 909** and electronic voices;
+engine, the seed set lists, base styling and the brand assets (`assets/`) into each page. Every
-  click each pad to set its dynamics; pick a *swing* subdivision for a triplet feel.
+voice is **synthesized** in Web Audio (no audio samples). State (set lists, the practice log,
-- **Polyrhythm** — a per‑lane *poly* toggle fits a lane's beats evenly into lane 1's
+theme) lives in `localStorage`; share links encode everything in the URL hash — nothing is
-  bar (e.g. 5‑over‑4, 3‑over‑2).
+uploaded.
-- **Practice** — gap/mute trainer (play N / mute M bars) and a tempo ramp with a
-  start BPM and signed step.
-- **Set lists** — named, ordered lists of saved setups; **cue** across lists and commit
-  on a bar/beat boundary with no audible gap (see **Live performance**); each play is
-  logged for cross‑day comparison.
-- **Sharing** — copy a link to your current settings or a whole set list.
-- **Theming** — System / Light / Dark.
 
-## The share language
+## Build & deploy
 
-A compact, human‑readable text encodes a full configuration (a *patch*). It's what
+```sh
-goes in a share link, and you can hand‑write or edit it.
+./build.sh    # assemble the self-contained pages into dist/ (git-ignored)
-
+./deploy.sh   # build, stamp version, mirror dist/ to the Caddy web root, smoke-test
-### Patch grammar
-
-```
-v1 ; t<bpm> [; vol<pct>] [; cd<sec>] [; b<bars>] ; <lane> … [; tr<play>/<mute>] [; rmp<start>/<step>/<every>]
 ```
 
-| Token | Meaning | Example |
+## The `concepts` branch
-|-------|---------|---------|
-| `v1` | format version (always first) | `v1` |
-| `t<bpm>` | tempo | `t120` |
-| `vol<pct>` | master volume 0–100 | `vol70` |
-| `cd<sec>` | time countdown, seconds (auto-advance with Continue) | `cd60` |
-| `b<bars>` | segment length in bars (auto-advance with Continue) | `b16` |
-| `tr<play>/<mute>` | gap trainer: play N bars, mute M | `tr2/2` |
-| `rmp<start>/<step>/<every>` | tempo ramp: start BPM, ±step, every N bars | `rmp80/5/4` |
-| `<lane>` | a meter lane (see below) | `kick:4` |
 
-Tokens are joined with `;`. `tr` and `rmp` are omitted when off.
+This `main` branch is intentionally lean. The **full project** — the PM_E‑1 editor, the
-
+embeddable widget, the whole gallery of hardware **form‑factor concepts**, the Raspberry Pi
-### Lane grammar
+Pico **firmware** editions, the **Rust** port, and the **KiCad/SPICE hardware** design — lives
-
+on the [`concepts`](https://codeberg.org/VARASYS/metronome/src/branch/concepts) branch. It can
-```
+be promoted back to the front page at any time.
-<sound> : <grouping> [ / <sub> ] [ = <pattern> ] [ ~ ] [ ! ]
-```
-
-- **sound** — the acoustic kit: `beep`, `kick`, `snare`, `rim`, `clap`, `hatClosed`,
-  `hatOpen`, `ride`, `crash`, `tomLow`, `tomMid`, `tomHigh`, `tambourine`, `cowbell`,
-  `woodblock`, `claves`, `jamblock` (kick, snare, closed‑hat, crash, toms, tambourine,
-  cowbell, woodblock and claves play embedded CC0 samples; `beep`, `clap`, `rim`,
-  `hatOpen` and `ride` stay synthesized — VCSL has no clean source for those); plus
-  synthesized drum machines —
-  `kick808 snare808 clap808 hat808 openHat808 cowbell808 tom808` and
-  `kick909 snare909 clap909 hat909 ride909 crash909`. Unknown → `beep`.
-- **grouping** — beats per bar, optionally grouped for odd meters: `4`, `3`,
-  `2+2+3`. Groups get a visual divider; accents are per‑step (see `=pattern`).
-- **`/sub`** — subdivision: `1` quarter (default), `2` eighth, `3` triplet,
-  `4` sixteenth, `6` sextuplet. This also sets how many **pads** each beat splits
-  into. Append **`s`** for **swing** on even subdivisions — `2s` (swung eighths) or
-  `4s` (swung sixteenths) delay the off‑beats to a triplet (2:1) feel. Omit for quarter.
-- **`=pattern`** — per‑**step dynamics**, one char per pad: **`X`** accent, **`x`**
-  normal, **`g`** ghost (soft), **`.`** mute (rest). Length = beats per bar × `sub`. Omit to get the
-  default — the first step of **each beat** accented, the rest normal (click a pad in
-  the UI to cycle accent → normal → ghost → mute). e.g. `4=.X.X` accents the backbeat (2 & 4);
-  `4/2s` is swung eighths with the default accents. (Legacy `x`/`.` on/off patterns and
-  short beat‑count patterns still parse.)
-- **`~`** — polyrhythm: fit this lane's beats evenly into **lane 1's** bar.
-- **`!`** — mute the lane.
-
-### Examples
-
-| Patch / lane | What it is |
-|---|---|
-| `kick:4` | kick on 4 quarter beats |
-| `snare:4=.X.X` | accented snare backbeat (2 & 4) |
-| `hatClosed:4/2` | eighth‑note hi‑hats (downbeat of each beat accented) |
-| `ride:4/2s` | **swung** eighth‑note ride |
-| `claves:5~` | 5 evenly across lane 1's bar (5‑over‑4 if lane 1 is `4`) |
-| `kick:2+2+3=x..x..x` | 7/8, kick on each group start |
-| `cowbell:3+2/2` | 5/4 grouped 3+2, eighth subdivision |
-| **Full:** `v1;t120;kick:4;snare:4=.x.x;hatClosed:4/2;tr2/2` | backbeat groove with gap trainer |
-
-### In URLs
-
-- **Settings:** `…/#p=<patch>` — readable, e.g.
-  `…/#p=v1;t120;kick:4;claves:5~`
-- **Set list:** `…/#sl=<base64url>` — a JSON `{title, description, items[]}` where
-  each item's config is a patch string. Used because titles/notes are free text.
-
-Opening such a link applies the settings (or imports the set list) on load, then
-clears the hash so a refresh won't re‑import.
-
-## Sharing
-
-In the set‑list panel's **⋯** menu:
-- **Share settings link** / **Share set‑list link** open a dialog with the link to
-  **Copy** or **Open**. The link encodes everything in the URL — nothing is uploaded.
-- **Export all / Import file** back up your set lists and practice log as a JSON
-  file (a legacy `presets` field is included for backward compatibility).
-
-## Keyboard shortcuts
-
-| Key | Action |
-|-----|--------|
-| `Space` | play / stop (works everywhere except while typing in a text field) |
-| `T` | tap tempo |
-| `←` / `→` | tempo ±1 (`Shift` = ±10) |
-| `A` | add meter lane |
-| `↑` / `↓` / `Home` / `End` | move the **cue** cursor (crosses set lists) |
-| `PgUp` / `PgDn` | cue the previous / next set list |
-| `Enter` | commit the cued item — switches on the next **bar** (smooth) |
-| `Shift`+`Enter` | commit now — switches on the next **beat** (rude) |
-| `N` / `P` | load next / previous immediately (rude quick‑step) |
-| `Alt`+`↑` / `Alt`+`↓` | reorder the cued item |
-| `1`–`9` | enable / silence lane 1–9 |
-| `?` | shortcuts help |
-| `Esc` | close the help / share dialog · cancel an armed switch |
-
-(Arrow / navigation keys are left alone while a slider or dropdown is focused, so they still adjust it.)
-
-## Live performance
-
-The set list is performance-ready: you can line up where you're going next without
-disturbing what's playing, then commit on a musical boundary — no audible gap.
-
-- **Cue, then commit.** The arrows / `Home` / `End` / `PgUp` / `PgDn` move a *cue
-  cursor* (amber outline) through items — across set lists, without loading anything.
-  **`Enter`** commits the cued item with a **smooth** cutover at the next **bar**;
-  **`Shift`+`Enter`** is a **rude** cutover at the next **beat** ("wrong thing playing,
-  fix it now"). `N` / `P` are immediate rude quick‑steps. `Esc` cancels an armed switch.
-- **Bar‑length segments.** Give an item a **bar** count (Timers box, or the `b<n>`
-  patch token) and a bar countdown (▦) shows bars remaining. With **Continue** on, it
-  auto‑advances to the next item at the bar boundary — so a *song* is just a set list
-  of segments (each with its own tempo, ramp and bar length) that hand off seamlessly.
-- All transitions — manual or auto, beat or bar — keep the clock continuous; the loaded
-  item can even live in a set list you're not currently viewing (the player names it).
-
-## Versioning
-
-`VERSION` holds the formal version. `deploy.sh` stamps the served page:
-
-- **Formal** — a clean commit tagged `v<VERSION>` → `X.Y.Z`.
-- **Dev** — anything else → `X.Y.Z-dev.<utc-timestamp>.<short-sha>[.dirty]`.
-
-Cut a release with `./release.sh [X.Y.Z]` — the optional arg bumps & commits
-`VERSION`; it then tags the current commit `v<VERSION>` (requires a clean tree).
-Push the tag, then deploy.
-
-## Files
-
-| File | Purpose |
-|------|---------|
-| `index.html` | the whole app |
-| `deploy.sh` | publish to the Caddy web root |
-| `release.sh` | tag a formal version |
-| `VERSION` | formal version string |
-| `LICENSE` | GNU AGPL v3 license text |
 
 ## License
 
-Copyright (C) 2026 Varasys.
+[GNU AGPL v3](./LICENSE) © VARASYS.
-
-This program is free software: you can redistribute it and/or modify it under
-the terms of the **GNU Affero General Public License** as published by the Free
-Software Foundation, either version 3 of the License, or (at your option) any
-later version. See [`LICENSE`](LICENSE) for the full text.
-
-Because the app is served over a network, the AGPL's §13 applies: anyone
-interacting with a hosted instance must be able to get its source — the public
-repository is **<https://codeberg.org/VARASYS/metronome>** (also linked from the
-in‑app **?** help).
-
-### Credits
-
-Acoustic drum one‑shots are from the **[Versilian Community Sample Library
-(VCSL)](https://github.com/sgossner/VCSL)**, released under **CC0** (public
-domain) — trimmed and downsampled, embedded inline. The 808/909 voices and the
-electronic/percussion sounds are synthesized in Web Audio (no samples).

VERSION

@@ -1 +1 @@
-0.0.9
+0.0.68

assets/favicon.b64

@@ -0,0 +1 @@
+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiByeD0iNyIgZmlsbD0iIzFDMjgzRiIvPjxwYXRoIGQ9Ik0xMiA2aDhsNCAyMUg4eiIgZmlsbD0iIzBBQjNGNyIvPjxwYXRoIGQ9Ik0xNiAyNEwxOS42IDkiIHN0cm9rZT0iIzFDMjgzRiIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSIvPjxyZWN0IHg9IjE2LjQiIHk9IjEzLjIiIHdpZHRoPSI0LjQiIGhlaWdodD0iMi44IiByeD0iMC42IiB0cmFuc2Zvcm09InJvdGF0ZSgtMTMgMTguNiAxNC42KSIgZmlsbD0iIzFDMjgzRiIvPjwvc3ZnPgo=

build.sh

@@ -0,0 +1,49 @@
+#!/usr/bin/env bash
+# Assemble the deployed single-file pages from source + shared partials + assets/.
+#
+# Each page is a source that shares code via markers:
+#   /*@BUILD:include:src/<file>@*/   inlines a shared partial (engine, seed lists, base CSS, header/footer/chrome)
+#   @BUILD:favicon@ / @BUILD:logo-*@ / @BUILD:bravura@   inline base64 assets
+# This resolves them so each built page in dist/ is one self-contained file
+# (zero deps, works fully offline). deploy.sh runs this first. dist/ is generated —
+# don't edit or commit it.
+#
+# NOTE: this is the slim `main` branch — only the landing chooser, the mobile app
+# (+ its practice journal) and the pm_e-2 notation editor ship. The full
+# multi-form-factor project (all device pages, firmware, Rust, hardware) lives on
+# the `concepts` branch.
+set -euo pipefail
+cd "$(dirname "${BASH_SOURCE[0]}")"
+rm -rf dist && mkdir -p dist   # start clean so no stale artifact survives into deploy's rsync --delete
+
+python3 - <<'PY'
+import pathlib, re
+A = pathlib.Path("assets")
+
+def build(name):
+    src = pathlib.Path(name).read_text()
+    # 1) inline shared partials (function-replacement: no backslash/group interpretation)
+    src = re.sub(r"/\*@BUILD:include:([^@]+)@\*/",
+                 lambda m: pathlib.Path(m.group(1)).read_text().rstrip("\n"), src)
+    # 2) inline base64 assets (all voices are synthesized — no audio samples)
+    src = src.replace("@BUILD:favicon@",    (A / "favicon.b64").read_text().strip())
+    src = src.replace("@BUILD:logo-dark@",  (A / "logo-dark.b64").read_text().strip())
+    src = src.replace("@BUILD:logo-light@", (A / "logo-light.b64").read_text().strip())
+    src = src.replace("@BUILD:logo-side-dark@",  (A / "logo-side-dark.b64").read_text().strip())
+    src = src.replace("@BUILD:logo-side-light@", (A / "logo-side-light.b64").read_text().strip())
+    src = src.replace("@BUILD:bravura@",    (A / "bravura.woff2.b64").read_text().strip())   # SMuFL music font subset (PM_E-2 notation)
+    assert "@BUILD:" not in src, f"unresolved build marker(s) remain in {name}"
+    out = pathlib.Path("dist") / name
+    out.write_text(src)
+    return out.stat().st_size
+
+for name in ("index.html", "mobile.html", "mobile-sessions.html", "pm_e-2.html"):
+    print("built %s (%dKB)" % (name, build(name) // 1024))
+
+# PWA support files for mobile.html (the phone/tablet app): manifest, service worker, icons.
+for f in ("manifest.webmanifest", "mobile-sw.js"):
+    pathlib.Path("dist/" + f).write_text(pathlib.Path(f).read_text())
+for f in ("icon-192.png", "icon-512.png", "icon-180.png"):
+    pathlib.Path("dist/" + f).write_bytes((A / f).read_bytes())
+print("copied PWA files (manifest.webmanifest, mobile-sw.js, icon-{192,512,180}.png)")
+PY

deploy.sh

@@ -1,21 +1,27 @@
 #!/usr/bin/env bash
-# Deploy the metronome mockup to the Caddy web root that serves
+# Deploy the metronome to the Caddy web root that serves
 # https://metronome.varasys.io
 #
 # Caddy config: /var/lib/caddy/Caddyfile  (metronome.varasys.io:8443 block)
 # Bind-mount:   /etc/containers/systemd/caddy.container
 #
-# The web root is bind-mounted read-only into the Caddy container and
+# The web root is bind-mounted read-only into the Caddy container and served by
-# served by file_server, which picks up changes immediately — so a plain
+# file_server, which picks up changes immediately — so a plain file copy is all
-# file copy is all that's needed (no container restart).
+# that's needed (no container restart). The web root is mirrored from dist/ with
+# `rsync --delete`, so anything no longer built is removed from the live site.
 set -euo pipefail
 
 SRC_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 DEST_DIR="/var/lib/caddy/www/metronome"
+DIST_DIR="$SRC_DIR/dist"
 
 [[ -f "$SRC_DIR/index.html" ]] || { echo "error: $SRC_DIR/index.html not found" >&2; exit 1; }
 [[ -d "$DEST_DIR" ]] || { echo "error: web root $DEST_DIR is missing — is Caddy set up?" >&2; exit 1; }
 
+# Assemble the self-contained pages (inlines assets/ into dist/). dist/ is git-ignored.
+"$SRC_DIR/build.sh"
+[[ -f "$DIST_DIR/index.html" ]] || { echo "error: build did not produce $DIST_DIR/index.html" >&2; exit 1; }
+
 # --- compute build version ---------------------------------------------------
 # Formal build: clean tree on a commit tagged v<VERSION>  -> "X.Y.Z"
 # Dev build:    anything else                             -> "X.Y.Z-dev.<utc-ts>.<sha>[.dirty]"
@@ -33,18 +39,20 @@ else
   BUILD="$VER-dev.$(date -u +%Y%m%dT%H%M%SZ)"               # not a git checkout
 fi
 
-# stamp the version into the deployed copy only (source stays clean)
+# stamp the version into the built copies only (source keeps the APP_VERSION placeholder)
-sed "s|const APP_VERSION = \"[^\"]*\";|const APP_VERSION = \"$BUILD\";|" "$SRC_DIR/index.html" > "$DEST_DIR/index.html"
+for f in index.html mobile.html mobile-sessions.html pm_e-2.html; do
-echo "deployed v$BUILD ($(stat -c '%s' "$DEST_DIR/index.html") bytes) -> $DEST_DIR"
+  [[ -f "$DIST_DIR/$f" ]] || continue
-sed "s|const APP_VERSION = \"[^\"]*\";|const APP_VERSION = \"$BUILD\";|" "$SRC_DIR/player.html" > "$DEST_DIR/player.html"
+  tmp="$(mktemp)"
-echo "deployed player.html ($(stat -c '%s' "$DEST_DIR/player.html") bytes)"
+  sed "s|const APP_VERSION = \"[^\"]*\";|const APP_VERSION = \"$BUILD\";|" "$DIST_DIR/$f" > "$tmp"
+  mv "$tmp" "$DIST_DIR/$f"
+done
 
-# If real audio samples are added later (see the plan's GM-sample note),
+# Mirror dist/ -> web root, deleting anything that's no longer built (old pages, firmware, …)
-# sync that directory too.
+rsync -a --delete "$DIST_DIR/" "$DEST_DIR/"
-if [[ -d "$SRC_DIR/samples" ]]; then
+echo "deployed v$BUILD -> $DEST_DIR"
-  rsync -a --delete "$SRC_DIR/samples/" "$DEST_DIR/samples/"
+for f in index.html mobile.html mobile-sessions.html pm_e-2.html; do
-  echo "synced samples/ -> $DEST_DIR/samples"
+  echo "  $f ($(stat -c '%s' "$DEST_DIR/$f") bytes)"
-fi
+done
 
 # Smoke test: Caddy serves on :8443 with tls internal; resolve the host
 # to localhost so SNI matches the site block.

manifest.webmanifest

@@ -0,0 +1,18 @@
+{
+  "name": "VARASYS PolyMeter",
+  "short_name": "PolyMeter",
+  "description": "Polymetric groove-trainer & metronome — touch-first, full-screen.",
+  "id": "/mobile.html",
+  "start_url": "/mobile.html?standalone=1",
+  "scope": "/mobile",
+  "display": "standalone",
+  "display_override": ["standalone", "fullscreen"],
+  "orientation": "any",
+  "background_color": "#05070a",
+  "theme_color": "#0b0d11",
+  "categories": ["music", "productivity", "utilities"],
+  "icons": [
+    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
+  ]
+}

mobile-sessions.html

@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+<title>VARASYS PolyMeter — Practice sessions</title>
+<link rel="manifest" href="/manifest.webmanifest" />
+<meta name="theme-color" content="#eef3f9" media="(prefers-color-scheme: light)" />
+<meta name="theme-color" content="#05070a" media="(prefers-color-scheme: dark)" />
+<meta name="apple-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="PolyMeter" />
+<link rel="apple-touch-icon" href="/icon-180.png" />
+<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,@BUILD:favicon@" />
+<script>
+  (function(){ try{
+    var p = localStorage.getItem("metronome.theme");
+    if (p!=="light" && p!=="dark" && p!=="system") p = "system";
+    document.documentElement.dataset.theme = p==="system" ? (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark") : p;
+  } catch(e){ document.documentElement.dataset.theme = "dark"; } })();
+</script>
+<style>
+  /*@BUILD:include:src/base.css@*/
+  :root{
+    --bg1:#12151c; --bg2:#05070a; --txt:#e7edf5; --muted:#8b96a5; --link:#6cb6ff;
+    --panel-bg:#161b22; --panel-bd:#2a313c; --field-bg:#0e1116; --field-bd:#222a36;
+    --cyan:#0AB3F7; --amber:#ffd166; --row:#0e1218;
+  }
+  :root[data-theme="light"]{
+    --bg1:#eef3f9; --bg2:#cfd9e6; --txt:#10202f; --muted:#5c6776; --link:#1769c4;
+    --panel-bg:#ffffff; --panel-bd:#d2dae4; --field-bg:#f1f4f8; --field-bd:#cdd6e0; --row:#f4f7fb;
+  }
+  html,body{ height:100%; }
+  body{ margin:0; min-height:100%; color:var(--txt); background:radial-gradient(circle at 50% -10%, var(--bg1), var(--bg2));
+    font-family:"Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-text-size-adjust:100%; overscroll-behavior-y:none; }
+  .wrap{ max-width:760px; margin:0 auto;
+    padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); }
+  header{ display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:5; padding:8px 0 10px;
+    background:linear-gradient(180deg, var(--bg1) 70%, transparent); }
+  .back{ flex:0 0 auto; display:flex; align-items:center; gap:6px; text-decoration:none; color:var(--txt);
+    background:rgba(127,139,154,.14); border:1px solid var(--panel-bd); border-radius:10px; padding:9px 13px; font-size:15px; }
+  header h1{ flex:1 1 auto; font-size:18px; margin:0; }
+  .icon{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
+    font-size:17px; cursor:pointer; color:var(--txt); background:rgba(127,139,154,.14); border:1px solid var(--panel-bd); }
+
+  .card{ background:var(--panel-bg); border:1px solid var(--panel-bd); border-radius:14px; padding:14px; margin-bottom:14px; }
+  .seclabel{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:6px 2px 8px; }
+
+  /* current-track aggregate (compare across sessions) */
+  #trackAgg .ta-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
+  #taSel{ flex:1 1 auto; min-width:0; background:var(--field-bg); color:var(--txt); border:1px solid var(--field-bd);
+    border-radius:10px; padding:9px 8px; font-size:16px; font-weight:600; }
+  .stat{ font-size:13px; color:var(--muted); margin:4px 0 12px; }
+  .stat b{ color:var(--txt); }
+
+  table{ width:100%; border-collapse:collapse; font-size:14px; }
+  th,td{ text-align:left; padding:8px 8px; border-bottom:1px solid var(--panel-bd); }
+  th{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
+  td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; }
+  tr:nth-child(even) td{ background:var(--row); }
+  tfoot td{ font-weight:700; border-top:2px solid var(--panel-bd); border-bottom:none; }
+
+  /* session list — collapsible */
+  details.sess{ background:var(--panel-bg); border:1px solid var(--panel-bd); border-radius:14px; margin-bottom:12px; overflow:hidden; }
+  details.sess > summary{ list-style:none; cursor:pointer; padding:13px 14px; display:flex; flex-direction:column; gap:3px; }
+  details.sess > summary::-webkit-details-marker{ display:none; }
+  summary .when{ font-size:15px; font-weight:600; display:flex; align-items:center; gap:9px; }
+  summary .when::before{ content:"▸"; color:var(--muted); font-size:13px; transition:transform .15s; }
+  details[open] > summary .when::before{ transform:rotate(90deg); }
+  summary .sstat{ font-size:12px; color:var(--muted); padding-left:22px; }
+  summary .sstat b{ color:var(--txt); }
+  .sbody{ padding:2px 14px 14px; }
+  .sbody .brow{ display:flex; justify-content:flex-end; margin-bottom:10px; }
+  .del{ background:transparent; border:1px solid var(--panel-bd); color:var(--muted); border-radius:9px; padding:6px 11px; font-size:12px; cursor:pointer; }
+  .del:hover{ color:#ff7a7a; border-color:#ff7a7a; }
+  textarea.note{ width:100%; background:var(--field-bg); color:var(--txt); border:1px solid var(--field-bd); border-radius:10px;
+    padding:10px; font-family:inherit; font-size:14px; resize:vertical; min-height:46px; margin-bottom:12px; }
+
+  .empty{ text-align:center; color:var(--muted); padding:60px 16px; }
+  .empty .big{ font-size:46px; opacity:.5; }
+  .foot{ text-align:center; color:var(--muted); font-size:12px; margin-top:24px; }
+  .foot img{ height:16px; vertical-align:middle; opacity:.85; }
+  [data-theme="light"] .logo-dark{ display:none; } [data-theme="dark"] .logo-light{ display:none; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <header>
+    <a class="back" href="/mobile.html">‹ Metronome</a>
+    <h1>Practice sessions</h1>
+    <div class="icon" id="themeBtn" title="Theme" aria-label="Theme">◐</div>
+  </header>
+
+  <div id="trackAgg" class="card" style="display:none">
+    <div class="seclabel">This track — across all sessions</div>
+    <div class="ta-head"><select id="taSel"></select></div>
+    <div class="stat" id="taStat"></div>
+    <table id="taTable"></table>
+  </div>
+
+  <div class="seclabel" id="listLabel" style="display:none">Sessions</div>
+  <div id="list"></div>
+
+  <div class="foot">
+    <img class="logo-dark" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS" /><img class="logo-light" src="data:image/png;base64,@BUILD:logo-light@" alt="VARASYS" />
+    &nbsp;PolyMeter <span id="appVersion"></span>
+  </div>
+</div>
+
+<script>
+const APP_VERSION = "v0.0.1-dev";
+const $ = (id) => document.getElementById(id);
+const LS_SESSIONS = "metronome.sessions", LS_CURTRACK = "metronome.curtrack";
+function lsGet(k,fb){ try{ const v=localStorage.getItem(k); return v?JSON.parse(v):fb; }catch(e){ return fb; } }
+function lsSet(k,v){ try{ localStorage.setItem(k,JSON.stringify(v)); }catch(e){} }
+function lsGetRaw(k){ try{ return localStorage.getItem(k)||""; }catch(e){ return ""; } }
+function fmt(sec){ sec=Math.max(0,Math.round(sec)); const h=Math.floor(sec/3600), m=Math.floor((sec%3600)/60), s=sec%60;
+  return (h?h+":"+String(m).padStart(2,"0"):m)+":"+String(s).padStart(2,"0"); }
+function esc(s){ return String(s).replace(/[&<>"]/g,(c)=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c])); }
+function whenLong(ms){ const d=new Date(ms);
+  const wd=d.toLocaleDateString(undefined,{weekday:"short"}), mo=d.toLocaleDateString(undefined,{month:"short"});
+  const t=d.toLocaleTimeString(undefined,{hour:"numeric",minute:"2-digit"});
+  return wd+" "+mo+" "+d.getDate()+" at "+t; }                                 // "Fri Jun 16 at 2:46 PM"
+function whenShort(ms){ const d=new Date(ms);
+  return d.toLocaleDateString(undefined,{month:"short",day:"numeric"})+" · "+d.toLocaleTimeString(undefined,{hour:"numeric",minute:"2-digit"}); }
+function bpmRange(b){ if(!b.length) return "—"; const lo=Math.min(...b), hi=Math.max(...b); return lo===hi?String(lo):lo+"–"+hi; }
+
+/* per-track aggregate of one session's segments → one row per track */
+function aggregate(seg){
+  const by={};
+  (seg||[]).forEach((s)=>{ const k=s.name||"(unnamed)"; const a=by[k]||(by[k]={name:k,sec:0,plays:0,bpms:[]}); a.sec+=s.sec; a.plays++; if(s.bpm) a.bpms.push(s.bpm); });
+  return Object.values(by).sort((x,y)=>y.sec-x.sec);
+}
+/* one track across all sessions → one row per session that included it (newest first) */
+function trackRows(name){
+  const out=[];
+  lsGet(LS_SESSIONS,[]).forEach((s)=>{
+    let sec=0, plays=0, bpms=[];
+    (s.segments||[]).forEach((g)=>{ if((g.name||"(unnamed)")===name){ sec+=g.sec; plays++; if(g.bpm) bpms.push(g.bpm); } });
+    if(sec>0) out.push({ at:s.at, sec, plays, bpms });
+  });
+  return out;
+}
+function allTrackNames(){ const set=new Set(); lsGet(LS_SESSIONS,[]).forEach((s)=>(s.segments||[]).forEach((g)=>set.add(g.name||"(unnamed)"))); return [...set].sort((a,b)=>a.localeCompare(b)); }
+
+/* ----- top: current-track comparison across sessions ----- */
+let selTrack=null;
+function renderTrackAgg(){
+  const names=allTrackNames();
+  if(!names.length){ $("trackAgg").style.display="none"; return; }
+  $("trackAgg").style.display="";
+  const cur=lsGetRaw(LS_CURTRACK).replace(/^"|"$/g,"");          // stored JSON-encoded string
+  if(selTrack===null) selTrack = names.includes(cur) ? cur : names[0];
+  if(!names.includes(selTrack)) selTrack=names[0];
+  // selector
+  const sel=$("taSel"); sel.innerHTML="";
+  names.forEach((n)=>{ const o=document.createElement("option"); o.value=n; o.textContent=n+(n===cur?"  (current)":""); sel.appendChild(o); });
+  sel.value=selTrack;
+  // stats + per-session table
+  const rows=trackRows(selTrack);
+  const totSec=rows.reduce((a,r)=>a+r.sec,0), totPlays=rows.reduce((a,r)=>a+r.plays,0), allb=rows.flatMap((r)=>r.bpms);
+  $("taStat").innerHTML = rows.length+" session"+(rows.length===1?"":"s")+" · total <b>"+fmt(totSec)+"</b> · "+totPlays+" play"+(totPlays===1?"":"s")+" · "+bpmRange(allb)+" bpm";
+  $("taTable").innerHTML =
+    '<thead><tr><th>Session</th><th class="num">Time</th><th class="num">Plays</th><th class="num">BPM</th></tr></thead><tbody>'+
+    (rows.length ? rows.map((r)=>'<tr><td>'+esc(whenShort(r.at))+'</td><td class="num">'+fmt(r.sec)+'</td><td class="num">'+r.plays+'</td><td class="num">'+bpmRange(r.bpms)+'</td></tr>').join("")
+                 : '<tr><td colspan="4" style="color:var(--muted)">No sessions for this track yet.</td></tr>')+
+    '</tbody>';
+}
+$("taSel").addEventListener("change",(e)=>{ selTrack=e.target.value; renderTrackAgg(); });
+
+/* ----- session list (collapsible) ----- */
+function renderList(){
+  const sessions=lsGet(LS_SESSIONS,[]);
+  const list=$("list"); list.innerHTML="";
+  if(!sessions.length){
+    $("listLabel").style.display="none";
+    list.innerHTML='<div class="empty"><div class="big">&#119070;</div><p>No practice sessions yet.<br>On the metronome, press <b>Practice</b> to start a session, then <b>Stop</b> when you\'re done — it\'ll be saved here.</p></div>';
+    return;
+  }
+  $("listLabel").style.display="";
+  sessions.forEach((s)=>{
+    const rows=aggregate(s.segments), practiced=rows.reduce((a,r)=>a+r.sec,0);
+    const d=document.createElement("details"); d.className="sess";
+    d.innerHTML =
+      '<summary><span class="when">'+esc(whenLong(s.at))+'</span>'+
+      '<span class="sstat">Total <b>'+fmt(s.clockSec)+'</b> · practiced <b>'+fmt(practiced)+'</b> · '+rows.length+' track'+(rows.length===1?"":"s")+'</span></summary>'+
+      '<div class="sbody">'+
+        '<div class="brow"><button class="del">Delete session</button></div>'+
+        '<textarea class="note" placeholder="Add a note about this session — what you worked on, how it felt…">'+esc(s.note||"")+'</textarea>'+
+        '<table><thead><tr><th>Track</th><th class="num">Time</th><th class="num">Plays</th><th class="num">BPM</th></tr></thead><tbody>'+
+          rows.map((r)=>'<tr><td>'+esc(r.name)+'</td><td class="num">'+fmt(r.sec)+'</td><td class="num">'+r.plays+'</td><td class="num">'+bpmRange(r.bpms)+'</td></tr>').join("")+
+        '</tbody><tfoot><tr><td>Total</td><td class="num">'+fmt(practiced)+'</td><td class="num">'+rows.reduce((a,r)=>a+r.plays,0)+'</td><td class="num"></td></tr></tfoot></table>'+
+      '</div>';
+    d.querySelector(".note").addEventListener("input",(e)=>saveNote(s.at, e.target.value));
+    d.querySelector(".del").addEventListener("click",()=>{
+      if(!confirm("Delete this practice session? This can't be undone.")) return;
+      lsSet(LS_SESSIONS, lsGet(LS_SESSIONS,[]).filter((x)=>x.at!==s.at)); render();
+    });
+    list.appendChild(d);
+  });
+}
+let saveTimer=null;
+function saveNote(at, text){
+  clearTimeout(saveTimer);
+  saveTimer=setTimeout(()=>{ const arr=lsGet(LS_SESSIONS,[]); const it=arr.find((x)=>x.at===at); if(it){ it.note=text; lsSet(LS_SESSIONS,arr); } }, 300);
+}
+
+function render(){ renderTrackAgg(); renderList(); }
+
+/*@BUILD:include:src/chrome.js@*/
+render();
+</script>
+</body>
+</html>

mobile-sw.js

@@ -0,0 +1,52 @@
+/* Service worker for the PolyMeter mobile app (mobile.html).
+ *
+ * Deliberately minimal and non-intrusive: it only manages its OWN app-shell URLs
+ * (the page, manifest, icons). For every other request it does NOT call
+ * respondWith(), so the rest of the site behaves exactly as if no SW existed.
+ *
+ * Strategy for the shell: network-first, fall back to cache. The page is a single
+ * self-contained file that is version-stamped on deploy, so when the device is
+ * online it always gets the freshest build; offline it still launches from cache.
+ */
+const CACHE = "polymeter-mobile-v2";
+const SHELL = [
+  "/mobile.html",
+  "/mobile-sessions.html",
+  "/manifest.webmanifest",
+  "/icon-192.png",
+  "/icon-512.png",
+  "/icon-180.png",
+];
+const SHELL_PATHS = new Set(SHELL);
+
+self.addEventListener("install", (e) => {
+  self.skipWaiting();
+  e.waitUntil(caches.open(CACHE).then((c) => c.addAll(SHELL)).catch(() => {}));
+});
+
+self.addEventListener("activate", (e) => {
+  e.waitUntil(
+    caches.keys()
+      .then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k))))
+      .then(() => self.clients.claim())
+  );
+});
+
+self.addEventListener("fetch", (e) => {
+  const req = e.request;
+  if (req.method !== "GET") return;
+  const url = new URL(req.url);
+  if (url.origin !== self.location.origin) return;
+  // Treat any navigation to /mobile.html (with or without ?standalone=1 etc.) as the shell.
+  const path = url.pathname;
+  if (!SHELL_PATHS.has(path)) return;          // not ours — let the browser handle it
+
+  e.respondWith(
+    fetch(req)
+      .then((res) => {
+        if (res && res.ok) { const copy = res.clone(); caches.open(CACHE).then((c) => c.put(path, copy)); }
+        return res;
+      })
+      .catch(() => caches.match(path).then((hit) => hit || caches.match("/mobile.html")))
+  );
+});

mobile.html

@@ -0,0 +1,951 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no" />
+<title>VARASYS PolyMeter — Mobile</title>
+
+<link rel="manifest" href="/manifest.webmanifest" />
+<meta name="theme-color" content="#eef3f9" media="(prefers-color-scheme: light)" />
+<meta name="theme-color" content="#05070a" media="(prefers-color-scheme: dark)" />
+<meta name="mobile-web-app-capable" content="yes" />
+<meta name="apple-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="PolyMeter" />
+<link rel="apple-touch-icon" href="/icon-180.png" />
+<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png" />
+<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,@BUILD:favicon@" />
+
+<script>
+  window.EMBED = /[?&]embed=1/.test(location.search);
+  if (window.EMBED) document.documentElement.dataset.embed = "1";
+</script>
+<script>
+  (function(){ try{
+    var p = localStorage.getItem("metronome.theme");
+    if (p!=="light" && p!=="dark" && p!=="system") p = "system";
+    document.documentElement.dataset.theme = p==="system" ? (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark") : p;
+  } catch(e){ document.documentElement.dataset.theme = "dark"; } })();
+</script>
+<style>
+  /*@BUILD:include:src/base.css@*/
+  :root{
+    --bg1:#12151c; --bg2:#05070a;
+    --txt:#e7edf5; --muted:#8b96a5; --link:#6cb6ff;
+    --panel-bg:#161b22; --panel-bd:#2a313c; --field-bg:#0e1116; --field-bd:#222a36;
+    --cyan:#0AB3F7; --amber:#ffd166;
+    --led-off:#1b2330; --ring:#2a3340; --glow:rgba(10,179,247,.55); --aglow:rgba(255,209,102,.55); --poly:#bb8cff; --staff:rgba(199,208,219,.17);
+    --btn1:#2b323d; --btn2:#1b212a; --btn-bd:#39424f; --chip-bg:#1b2230; --chip-bd:#2c3545;
+  }
+  :root[data-theme="light"]{
+    --bg1:#eef3f9; --bg2:#cfd9e6;
+    --txt:#10202f; --muted:#5c6776; --link:#1769c4;
+    --panel-bg:#ffffff; --panel-bd:#d2dae4; --field-bg:#f1f4f8; --field-bd:#cdd6e0;
+    --led-off:#c4cedb; --ring:#c9d4e1; --glow:rgba(10,179,247,.40); --aglow:rgba(230,160,30,.45); --poly:#7a3df0; --staff:rgba(28,40,63,.15);
+    --btn1:#ffffff; --btn2:#e7edf4; --btn-bd:#c8d2de; --chip-bg:#eef2f7; --chip-bd:#d3dbe5;
+  }
+  html,body{ height:100%; }
+  body{ margin:0; overflow:hidden; color:var(--txt);
+    background:radial-gradient(circle at 50% -12%, var(--bg1), var(--bg2));
+    font-family:"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
+    touch-action:manipulation; overscroll-behavior:none; }
+  /* Content is capped to --maxw and centered, so phone→tablet is the SAME layout,
+     just larger (no flex re-flow). Generous margins; even more in full-screen. */
+  #app{ position:fixed; inset:0; overflow:hidden; display:flex; flex-direction:column; align-items:center; --maxw:600px; --pad:14px;
+    padding:max(12px,env(safe-area-inset-top)) max(var(--pad),env(safe-area-inset-right))
+            max(12px,env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left)); }
+  #top, #mid{ width:100%; max-width:var(--maxw); }
+  :fullscreen #app, html:fullscreen #app{ --pad:30px; padding-top:max(24px,env(safe-area-inset-top)); padding-bottom:max(18px,env(safe-area-inset-bottom)); }
+  @media (display-mode:standalone){ #app{ --pad:26px; padding-top:max(20px,env(safe-area-inset-top)); padding-bottom:max(16px,env(safe-area-inset-bottom)); } }
+
+  /* ---- top ---- */
+  /* the logo + header-icon row is always a full-width bar at the very top, in
+     both orientations — it never joins the side-by-side landscape header flow */
+  #top{ flex:0 0 auto; display:flex; flex-direction:column; gap:11px; }
+  #brandrow{ flex:0 0 auto; display:flex; align-items:center; gap:10px; width:100%; }
+  #logoLink{ display:inline-flex; opacity:.9; }
+  .brandlogo{ height:clamp(21px,4.2vmin,30px); width:auto; display:block; }
+  .hicons{ display:flex; align-items:center; gap:8px; margin-left:auto; }
+  .hicons .icon{ width:36px; height:36px; font-size:16px; }
+  .sels{ width:100%; display:flex; gap:8px; align-items:flex-end; }
+  .sel{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:3px; }
+  .sel > span{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-left:3px; }
+  .sel select{ width:100%; background:var(--field-bg); color:var(--txt); border:1px solid var(--field-bd); border-radius:10px; padding:10px 8px; font-size:15px; }
+  .trow{ display:flex; align-items:center; gap:10px; }
+  .vol{ width:100%; display:flex; align-items:center; gap:12px; color:var(--muted); min-width:0; }
+  .vol input{ flex:1 1 auto; min-width:0; accent-color:var(--cyan); }
+  .dyn{ flex:0 0 auto; font-family:Georgia,"Times New Roman",serif; font-style:italic; font-weight:700; font-size:17px; color:var(--muted); line-height:1; }
+  .icon{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
+    font-size:18px; line-height:1; cursor:pointer; color:var(--txt); background:rgba(127,139,154,.14); border:1px solid var(--panel-bd); }
+  .icon:active{ background:rgba(127,139,154,.30); }
+
+  /* ---- middle: pulse + track panel + lanes + transport, centered as one block ---- */
+  #mid{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:clamp(18px,4.2vmin,34px); padding-top:clamp(8px,1.8vmin,16px); }
+  #stage{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; width:100%; }
+  /* tempo plate: [TAP] [big BPM] [thumbwheel] — flashes on the beat */
+  #pulse{ position:relative; width:100%; padding:clamp(8px,1.8vmin,14px); border-radius:16px;
+    display:flex; flex-direction:row; align-items:stretch; gap:clamp(8px,2vmin,16px);
+    border:1px solid var(--ring); background:linear-gradient(180deg, rgba(127,139,154,.06), transparent);
+    transition:box-shadow .12s ease-out, border-color .12s ease-out, background .12s ease-out; }
+  #pulse.hit{ border-color:var(--cyan); box-shadow:0 0 22px var(--glow); background:rgba(10,179,247,.07); }
+  #pulse.hit.acc{ border-color:var(--amber); box-shadow:0 0 26px var(--aglow); background:rgba(255,209,102,.08); }
+  .tapbtn{ flex:0 0 auto; align-self:stretch; min-width:clamp(58px,16vmin,100px); border-radius:12px;
+    background:linear-gradient(180deg,var(--btn1),var(--btn2)); border:1px solid var(--btn-bd); color:var(--txt);
+    font-size:clamp(13px,2.8vmin,18px); font-weight:600; letter-spacing:.14em; cursor:pointer;
+    transition:box-shadow .1s ease-out, border-color .1s ease-out, color .1s ease-out;
+    box-shadow:0 3px 0 rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06); }
+  /* TAP button glows in time with the beat (rides the #pulse flash) */
+  #pulse.hit .tapbtn{ border-color:var(--cyan); color:var(--cyan);
+    box-shadow:0 3px 0 rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06), 0 0 16px var(--glow), inset 0 0 12px var(--glow); }
+  #pulse.hit.acc .tapbtn{ border-color:var(--amber); color:var(--amber);
+    box-shadow:0 3px 0 rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06), 0 0 18px var(--aglow), inset 0 0 14px var(--aglow); }
+  .tapbtn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06); }
+  #bpm{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:.82; cursor:pointer; min-width:0; }
+  #bpmNum{ font-size:clamp(44px,15vmin,120px); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
+  #bpmlab{ font-size:clamp(9px,1.8vmin,13px); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:.5em; opacity:.85; }
+  #bpmIn{ display:none; flex:1 1 auto; min-width:0; text-align:center; font:inherit; font-size:clamp(40px,13vmin,108px); font-weight:800;
+    background:transparent; color:var(--txt); border:none; border-bottom:2px solid var(--cyan); outline:none; font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
+  #bpmIn::-webkit-outer-spin-button, #bpmIn::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
+  /* thumbwheel encoder — drag up/down to scrape the tempo */
+  #wheel{ flex:0 0 auto; align-self:stretch; width:clamp(30px,7.5vmin,46px); border-radius:11px; cursor:ns-resize; touch-action:none; overflow:hidden;
+    border:1px solid var(--btn-bd);
+    background:repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 5px),
+      linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0) 18%, rgba(255,255,255,.16) 50%, rgba(0,0,0,0) 82%, rgba(0,0,0,.55)),
+      linear-gradient(to right, rgba(0,0,0,.18), rgba(255,255,255,.10) 50%, rgba(0,0,0,.18)),
+      var(--field-bg);
+    box-shadow:inset 0 10px 9px -8px rgba(0,0,0,.75), inset 0 -10px 9px -8px rgba(0,0,0,.75), inset 0 0 4px rgba(0,0,0,.3); }
+  #wheel:active{ border-color:var(--cyan); }
+  #meterline{ font-size:clamp(12px,2.1vmin,16px); color:var(--muted); text-align:center; min-height:1.2em; letter-spacing:.02em; }
+
+  /* ---- editable lanes (scroll if many) + track panel below ---- */
+  #detail{ flex:0 1 auto; width:100%; display:flex; flex-direction:column; gap:8px; padding:2px 0; min-height:0; }
+  #lanes{ display:flex; flex-direction:column; gap:6px; max-height:34vh; overflow-y:auto; }
+  #trackpanel{ width:100%; background:var(--chip-bg); border:1px solid var(--chip-bd); border-radius:10px; padding:8px 11px; display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--muted); }
+  #trackpanel .tp-row{ display:flex; align-items:center; gap:8px 18px; flex-wrap:nowrap; }
+  #trackpanel label{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
+  #trackpanel .tp-chk{ color:var(--txt); }
+  #trackpanel .tp-chk input{ width:18px; height:18px; accent-color:var(--cyan); flex:0 0 auto; }
+  #trackpanel .tp-loop{ color:var(--muted); }
+  #trackpanel input[type=number]{ width:46px; background:var(--field-bg); color:var(--txt); border:1px solid var(--field-bd); border-radius:7px; padding:5px 6px; font-size:13px; -moz-appearance:textfield; }
+  #trackpanel input[type=number]::-webkit-outer-spin-button, #trackpanel input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
+  #trackpanel select{ background:var(--field-bg); color:var(--txt); border:1px solid var(--field-bd); border-radius:7px; padding:5px 6px; font-size:13px; }
+  #trackpanel .tp-sub{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; white-space:nowrap; color:var(--muted); }
+  #trackpanel .tp-sub.off{ display:none; }
+  #trackpanel .tp-str{ display:flex; gap:6px; }
+  #trackpanel .tp-str input{ flex:1 1 auto; min-width:0; background:var(--field-bg); color:var(--txt); border:1px solid var(--field-bd); border-radius:7px; padding:6px 8px; font-family:"Courier New",monospace; font-size:11px; }
+  #trackpanel .tp-btn{ flex:0 0 auto; background:linear-gradient(180deg,var(--btn1),var(--btn2)); color:var(--txt); border:1px solid var(--btn-bd); border-radius:7px; padding:0 12px; font-size:12px; cursor:pointer; }
+  #trackpanel .tp-msg{ color:#5fd08a; margin-left:auto; }
+  .lane{ display:flex; align-items:center; gap:8px; }
+  /* dim only the label + pads of a muted lane, so the mute toggle stays crisp */
+  .lane.off .lmeta, .lane.off .pads{ opacity:.45; }
+  .lmute{ flex:0 0 auto; width:clamp(28px,5.4vmin,36px); height:clamp(28px,5.4vmin,36px); border-radius:8px; padding:0;
+    display:flex; align-items:center; justify-content:center; cursor:pointer;
+    background:var(--chip-bg); border:1px solid var(--chip-bd); color:var(--cyan); }
+  .lmute:active{ background:rgba(127,139,154,.22); }
+  .lmute.muted{ color:var(--muted); background:transparent; }
+  .lmute svg{ width:62%; height:62%; }
+  .lane.poly .lmute{ color:var(--poly); }
+  .lane.poly .lmute.muted{ color:var(--muted); }
+  .lmeta{ flex:0 0 auto; width:36%; max-width:168px; min-width:94px; display:flex; align-items:center; gap:5px; text-align:left;
+    background:var(--chip-bg); border:1px solid var(--chip-bd); color:var(--txt); border-radius:8px; padding:5px 8px;
+    font-size:clamp(10px,1.8vmin,13px); font-family:"Courier New",monospace; cursor:pointer; }
+  .lmeta .ln-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .lmeta .lg{ flex:0 0 auto; color:var(--muted); }
+  .lmeta .rhythm{ flex:0 0 auto; color:var(--txt); display:block; }
+  .lmeta .polybadge{ flex:0 0 auto; color:var(--poly); font-weight:700; letter-spacing:.01em; }
+  .lane.poly .lmeta{ border-left:3px solid var(--poly); padding-left:6px; }
+  .lmeta .rh-host{ flex:0 0 auto; display:flex; align-items:center; padding:2px 3px; margin:-2px -1px; border-radius:5px; cursor:pointer; }
+  .lmeta .rh-host:active{ background:rgba(127,139,154,.22); }
+  /* graphic note-value picker */
+  .noterow{ display:flex; gap:8px; flex-wrap:wrap; }
+  .noterow .notebtn{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:56px; padding:9px 6px;
+    background:var(--field-bg); border:1px solid var(--field-bd); border-radius:10px; color:var(--txt); cursor:pointer; }
+  .noterow .notebtn.active{ border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan); }
+  .noterow .notebtn .rhythm{ height:22px; width:auto; }
+  .noterow .notebtn small{ font-size:10px; color:var(--muted); letter-spacing:.02em; }
+  /* beats line up in columns across lanes; sub-beats sit inside the beat cell, smaller */
+  .pads{ flex:1 1 auto; display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; min-width:0; align-items:center; }
+  .beatcell{ flex:1 1 0; min-width:0; display:flex; gap:2px; align-items:center; }
+  .pad{ flex:1 1 0; min-width:5px; border:1px solid var(--chip-bd); background:var(--led-off); cursor:pointer; padding:0; }
+  .pad.beat{ height:clamp(20px,3.8vmin,28px); border-radius:5px; }
+  .pad.sub{ height:clamp(11px,2.3vmin,16px); border-radius:3px; }
+  .pad.gs{ border-color:var(--amber); }
+  .pad.on{ background:var(--cyan); }
+  .pad.acc{ background:var(--amber); }
+  .pad.ghost{ background:var(--cyan); opacity:.42; }
+  .lane.poly .pad.on{ background:var(--poly); }
+  .lane.poly .pad.ghost{ background:var(--poly); opacity:.42; }
+  .pad.cur{ outline:2px solid var(--txt); outline-offset:-1px; box-shadow:0 0 8px var(--glow); }
+  .addlane{ align-self:flex-start; background:transparent; border:1px dashed var(--chip-bd); color:var(--muted); border-radius:8px; padding:5px 11px; font-size:12px; cursor:pointer; }
+  .chips{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
+  .chip.feat{ font-size:clamp(10px,1.8vmin,13px); color:var(--muted); background:var(--chip-bg); border:1px solid var(--chip-bd); border-radius:7px; padding:3px 8px; white-space:nowrap; }
+  .chip.feat.r{ border-color:var(--cyan); color:var(--cyan); } .chip.feat.g{ border-color:var(--amber); color:var(--amber); }
+
+  /* ---- transport: tempo row (−10/−/+/+10) then nav+play row (prev/play/practice/next) ---- */
+  /* grows to fill freed space; SHRINKS (rather than the page scrolling) when the panel expands */
+  #transport{ flex:0 1 auto; min-height:0; max-height:clamp(200px,46vh,310px); margin-top:auto; display:flex; flex-direction:column; align-items:stretch; width:100%; padding-top:6px; gap:clamp(5px,1.2vmin,9px); }
+  .tgrid{ display:grid; width:100%; flex:1 1 auto; min-height:0; gap:clamp(7px,1.7vmin,14px);
+    grid-template-columns:1fr 1.5fr 1.5fr 1fr; grid-template-rows:1fr 1fr; grid-template-areas:"dn10 dn up up10" "prev play prac next"; }
+  .tbtn{ background:linear-gradient(180deg,var(--btn1),var(--btn2)); color:var(--txt); border:1px solid var(--btn-bd);
+    border-radius:13px; height:auto; min-height:66px; font-size:clamp(16px,4vmin,27px); cursor:pointer;
+    box-shadow:0 3px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
+  .journal{ flex:0 0 auto; width:100%; height:clamp(30px,6vmin,42px); border-radius:11px; cursor:pointer;
+    background:rgba(127,139,154,.10); border:1px solid var(--panel-bd); color:var(--muted); font-size:13px;
+    display:flex; align-items:center; justify-content:center; gap:8px; }
+  .journal.rec{ background:rgba(192,57,43,.12); border-color:#c0392b; color:var(--txt); cursor:default; }
+  .journal .dotrec{ width:9px; height:9px; border-radius:50%; background:#e0493a; box-shadow:0 0 8px #e0493a; display:none; }
+  .journal.rec .dotrec{ display:inline-block; }
+  .tbtn small{ font-size:clamp(8px,1.5vmin,11px); letter-spacing:.1em; color:inherit; opacity:.85; }
+  .tbtn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06); }
+  #bDn10{grid-area:dn10} #bPrev{grid-area:prev} #bNext{grid-area:next} #bUp10{grid-area:up10}
+  #bDown{grid-area:dn} #bPlay{grid-area:play} #bPrac{grid-area:prac} #bUp{grid-area:up}
+  .tbtn.play{ background:linear-gradient(180deg,#1f7a4d,#155f3b); border-color:#2e7d32; color:#eafff3; }
+  .tbtn.play.on{ background:linear-gradient(180deg,#b23b3b,#8f2d2d); border-color:#c0392b; color:#fff; }
+  .tbtn.prac{ background:linear-gradient(180deg,#1c87b8,#136488); border-color:#1f9bd0; color:#eaf8ff; }
+  .tbtn.prac.on{ background:linear-gradient(180deg,#c8922a,#9c6f12); border-color:#e0a93a; color:#fff; }
+
+  /* landscape (phone AND tablet): header stays a full-width column (logo+icons
+     row, then volume row); the body becomes a 2-column grid — tempo + transport
+     on the left, selector + settings + lanes on the right */
+  @media (orientation:landscape){
+    #app{ --maxw:1060px; }
+    /* fr columns (not 40%/60%) so the column gap is subtracted before sizing —
+       percentages + gap summed past 100% and overhung the right edge */
+    #mid{ display:grid; align-items:stretch; gap:clamp(12px,2.6vh,22px) clamp(16px,3vw,38px); padding-top:0;
+      grid-template-columns:minmax(0,2fr) minmax(0,3fr); grid-template-rows:auto auto 1fr auto;
+      grid-template-areas:"stage sels" "stage panel" "stage detail" "transport detail"; }
+    #stage, .sels, #trackpanel, #detail, #transport{ min-width:0; }
+    #stage{ grid-area:stage; align-self:center; justify-content:center; }
+    .sels{ grid-area:sels; align-self:start; }
+    #trackpanel{ grid-area:panel; align-self:start; }
+    #detail{ grid-area:detail; align-self:stretch; width:auto; max-width:none; max-height:none; min-height:0; overflow-y:auto; }
+    #transport{ grid-area:transport; align-self:end; max-height:none; margin-top:0; }
+    .tbtn{ min-height:0; height:clamp(34px,10vmin,54px); }
+  }
+
+  [data-theme="light"] .logo-dark{ display:none; } [data-theme="dark"] .logo-light{ display:none; }
+
+  /* ---- bottom sheet (lane editor) ---- */
+  #scrim{ position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .2s; z-index:40; }
+  #scrim.open{ opacity:1; pointer-events:auto; }
+  #laneSheet, #trackSheet, #saveSheet, #noteSheet, #shareSheet{ position:fixed; left:0; right:0; bottom:0; z-index:50; max-height:88vh; overflow-y:auto;
+    background:var(--panel-bg); border-top:1px solid var(--panel-bd); border-radius:18px 18px 0 0; transform:translateY(110%);
+    transition:transform .26s cubic-bezier(.2,.8,.2,1);
+    padding:12px max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
+  #laneSheet.open, #trackSheet.open, #saveSheet.open, #noteSheet.open, #shareSheet.open{ transform:none; }
+  #laneSheet .grab, #trackSheet .grab, #saveSheet .grab, #noteSheet .grab, #shareSheet .grab{ width:42px; height:5px; border-radius:3px; background:var(--panel-bd); margin:0 auto 12px; }
+  #laneSheet h2, #trackSheet h2, #saveSheet h2, #noteSheet h2, #shareSheet h2{ margin:0 0 10px; font-size:16px; }
+  #laneSheet label, #trackSheet label, #saveSheet label, #shareSheet label{ display:block; font-size:12px; color:var(--muted); margin:10px 0 5px; }
+  #laneSheet select, #trackSheet select, #saveSheet select,
+  #laneSheet input[type=text], #trackSheet input[type=text], #trackSheet input[type=number], #saveSheet input[type=text], #shareSheet input[type=text]{
+    width:100%; background:var(--field-bg); color:var(--txt); border:1px solid var(--field-bd); border-radius:10px; padding:11px; font-size:15px; }
+  #laneSheet .lrow, #trackSheet .lrow, #saveSheet .lrow, #shareSheet .lrow{ display:flex; gap:12px; margin-top:10px; flex-wrap:wrap; align-items:center; }
+  #laneSheet .half, #trackSheet .half{ display:block; flex:1 1 120px; margin:0; }
+  #laneSheet .chk, #trackSheet .chk{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--txt); margin-top:16px; }
+  #laneSheet .chk input, #trackSheet .chk input{ width:20px; height:20px; accent-color:var(--cyan); flex:0 0 auto; }
+  #trackSheet .lrow.off{ display:none; }
+  .lfoot{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; }
+  .lbtn{ cursor:pointer; color:var(--txt); background:linear-gradient(180deg,var(--btn1),var(--btn2)); border:1px solid var(--btn-bd); border-radius:10px; padding:10px 16px; font-size:14px; }
+  .lbtn.danger{ background:transparent; color:#ff7a7a; border-color:#ff7a7a; }
+  .seg{ display:flex; gap:8px; margin-bottom:6px; }
+  .seg button{ flex:1 1 0; padding:9px; border:1px solid var(--field-bd); background:var(--field-bg); color:var(--muted); border-radius:9px; font-size:14px; cursor:pointer; }
+  .seg button.active{ border-color:var(--cyan); color:var(--txt); }
+  .seclbl{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:4px 0 8px; }
+  .savemsg{ font-size:12px; color:#5fd08a; align-self:center; }
+  .liblbl{ font-size:12px; color:var(--muted); margin:14px 0 4px; }
+  .libhint{ font-size:12px; color:var(--muted); padding:6px 2px; line-height:1.4; }
+  .librow{ display:flex; align-items:center; gap:4px; padding:4px 0; border-bottom:1px solid var(--panel-bd); }
+  .librow.active .libname{ color:var(--cyan); font-weight:600; }
+  .libname{ flex:1 1 auto; min-width:0; text-align:left; background:transparent; border:none; color:var(--txt); font-size:14px; padding:7px 2px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .ibtn{ flex:0 0 auto; width:32px; height:32px; border-radius:7px; background:var(--chip-bg); border:1px solid var(--chip-bd); color:var(--txt); font-size:13px; cursor:pointer; }
+  .ibtn:disabled{ opacity:.3; }
+
+  /* ---- help tour (coachmarks) ---- */
+  #tour{ position:fixed; inset:0; z-index:200; display:none; }
+  #tour.open{ display:block; }
+  #tourHole{ position:absolute; border-radius:12px; box-shadow:0 0 0 9999px rgba(0,0,0,.66); border:2px solid var(--cyan); transition:all .2s ease; pointer-events:none; }
+  #tourBox{ position:absolute; background:var(--panel-bg); border:1px solid var(--panel-bd); border-radius:12px; padding:14px; box-shadow:0 14px 44px rgba(0,0,0,.5); }
+  #tourBox h3{ margin:0 0 6px; font-size:15px; }
+  #tourBox p{ margin:0 0 12px; font-size:13px; color:var(--muted); line-height:1.45; }
+  #tourBox .trow{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
+  .tdots{ font-size:12px; color:var(--muted); }
+</style>
+</head>
+<body>
+
+<div id="app">
+  <div id="top">
+    <div id="brandrow">
+      <a id="logoLink" href="https://codeberg.org/VARASYS/metronome" target="_blank" rel="noopener" title="VARASYS PolyMeter — source on Codeberg"><img class="brandlogo logo-dark" src="data:image/png;base64,@BUILD:logo-side-dark@" alt="VARASYS PolyMeter" /><img class="brandlogo logo-light" src="data:image/png;base64,@BUILD:logo-side-light@" alt="VARASYS PolyMeter" /></a>
+      <div class="hicons" id="utilrow">
+        <div class="icon" id="shareBtn" title="Share / paste" aria-label="Share or paste"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="M8 7l4-4 4 4"/><path d="M5 12v8h14v-8"/></svg></div>
+        <div class="icon" id="helpBtn" title="Help" aria-label="Help">?</div>
+        <div class="icon" id="themeBtn" title="Theme" aria-label="Theme">◐</div>
+        <div class="icon" id="fsBtn" title="Full screen" aria-label="Full screen">⛶</div>
+      </div>
+    </div>
+    <div class="vol" id="volrow"><span class="dyn" aria-hidden="true">p</span><input id="vol" type="range" min="0" max="100" value="85" aria-label="Volume" /><span class="dyn" aria-hidden="true">f</span></div>
+  </div>
+
+  <div id="mid">
+    <div id="stage">
+      <div id="pulse">
+        <button id="bTapBtn" class="tapbtn" title="Tap tempo">TAP</button>
+        <div id="bpm"><span id="bpmNum">120</span><span id="bpmlab">BPM</span></div>
+        <input id="bpmIn" type="number" inputmode="numeric" min="30" max="300" />
+        <div id="wheel" title="Drag to set tempo" aria-label="Tempo wheel"></div>
+      </div>
+      <div id="meterline"></div>
+    </div>
+    <div class="sels">
+      <label class="sel"><span>Set list</span><select id="slSel"></select></label>
+      <label class="sel"><span>Track</span><select id="trkSel"></select></label>
+      <div class="icon" id="saveBtn" title="Save &amp; library" aria-label="Save and library"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 4 H15 L19 8 V20 H5 Z"/><path d="M8.5 4 V8 H13.5 V4"/><rect x="8" y="13" width="8" height="7"/></svg></div>
+    </div>
+    <div id="trackpanel">
+      <div class="tp-row">
+        <label class="tp-chk"><input type="checkbox" id="ipRepeat" /> Repeat</label>
+        <label class="tp-chk"><input type="checkbox" id="ipRamp" /> Tempo ramp</label>
+        <label class="tp-chk"><input type="checkbox" id="ipGap" /> Practice gaps</label>
+      </div>
+      <div class="tp-sub off" id="ipRepeatRow">Play <input id="ipBars" type="number" inputmode="numeric" min="1" max="999" /> bars, then <select id="ipEnd"><option value="stop">stop</option><option value="next">next track</option><option value="prev">prev track</option></select></div>
+      <div class="tp-sub off" id="ipRampRow"><input id="ipRampStart" type="number" min="30" max="300" /> → +<input id="ipRampAmt" type="number" min="1" max="50" /> bpm / <input id="ipRampEvery" type="number" min="1" max="64" /> bars</div>
+      <div class="tp-sub off" id="ipGapRow"><input id="ipGapPlay" type="number" min="1" max="32" /> play / <input id="ipGapMute" type="number" min="1" max="32" /> mute bars</div>
+    </div>
+    <div id="detail">
+      <div id="lanes"></div>
+    </div>
+    <div id="transport">
+      <div class="tgrid">
+        <button class="tbtn" id="bDn10" title="Tempo −10">−10</button>
+        <button class="tbtn" id="bDown" title="Tempo −1">−</button>
+        <button class="tbtn" id="bUp" title="Tempo +1">+</button>
+        <button class="tbtn" id="bUp10" title="Tempo +10">+10</button>
+        <button class="tbtn" id="bPrev" title="Previous track">⏮</button>
+        <button class="tbtn play" id="bPlay" title="Play / Stop">▶<small>PLAY</small></button>
+        <button class="tbtn prac" id="bPrac" title="Practice — logs your time to the practice log">⦿<small>PRACTICE</small></button>
+        <button class="tbtn" id="bNext" title="Next track">⏭</button>
+      </div>
+      <button id="bJournal" class="journal"><span class="dotrec"></span><span id="jText">Journal →</span></button>
+    </div>
+  </div>
+</div>
+
+<!-- lane editor sheet -->
+<div id="scrim"></div>
+<div id="laneSheet">
+  <div class="grab"></div>
+  <h2>Edit lane</h2>
+  <label for="lsSound">Sound</label><select id="lsSound"></select>
+  <label for="lsGroup">Grouping — beats per bar (e.g. 4, or 2+2+3)</label><input id="lsGroup" type="text" inputmode="text" autocomplete="off" />
+  <label>Note value</label><div id="lsNotes" class="noterow"></div>
+  <div class="lrow">
+    <label class="chk"><input type="checkbox" id="lsPoly" /> Polymeter</label>
+    <label class="chk"><input type="checkbox" id="lsMute" /> Mute lane</label>
+  </div>
+  <label for="lsGain">Lane volume <span id="lsGainVal" style="color:var(--txt)">0 dB</span></label>
+  <input id="lsGain" type="range" min="-18" max="6" step="1" style="width:100%;accent-color:var(--cyan)" />
+  <div class="lfoot"><button id="lsDel" class="lbtn danger">Delete lane</button><button id="lsDone" class="lbtn">Done</button></div>
+</div>
+
+<!-- share sheet: share a track or set list as a link, or paste a string to load -->
+<div id="shareSheet">
+  <div class="grab"></div>
+  <h2>Share</h2>
+  <div class="seg" id="shareSeg"><button data-k="p" class="active">This track</button><button data-k="sl">This set list</button></div>
+  <label>Shareable link</label>
+  <input id="shareLink" type="text" readonly onfocus="this.select()" />
+  <div class="lrow"><button id="shareCopy" class="lbtn">Copy link</button><button id="shareCopyT" class="lbtn">Copy text</button><span id="shareMsg" class="savemsg"></span></div>
+  <label for="sharePaste">Or paste a track string / link to load</label>
+  <input id="sharePaste" type="text" autocomplete="off" placeholder="v1;t120;kick:4;…  or a #p=/#sl= link" />
+  <div class="lfoot"><button id="shareLoad" class="lbtn">Load</button><button id="shareDone" class="lbtn">Done</button></div>
+</div>
+
+<!-- save & library sheet -->
+<div id="saveSheet">
+  <div class="grab"></div>
+  <h2>Save &amp; library</h2>
+  <div class="seclbl">Save current track</div>
+  <label for="saveName">Track name</label>
+  <input id="saveName" type="text" autocomplete="off" />
+  <label for="saveTo">Save to set list</label>
+  <select id="saveTo"></select>
+  <input id="saveNewName" type="text" autocomplete="off" placeholder="New set list name" style="display:none;margin-top:8px" />
+  <div class="lrow">
+    <button id="saveUpd" class="lbtn">Update</button>
+    <button id="saveNew" class="lbtn">Save as new track</button>
+    <span id="saveMsg" class="savemsg"></span>
+  </div>
+  <div class="seclbl" style="margin-top:20px">Manage library</div>
+  <div id="libBody"></div>
+  <div class="lfoot"><span></span><button id="saveDone" class="lbtn">Done</button></div>
+</div>
+
+<!-- guided help tour -->
+<div id="tour">
+  <div id="tourHole"></div>
+  <div id="tourBox">
+    <h3 id="tourTitle"></h3><p id="tourText"></p>
+    <div class="trow"><span class="tdots" id="tourDots"></span>
+      <span><button id="tourSkip" class="lbtn" style="padding:8px 12px">Skip</button>
+            <button id="tourPrev" class="lbtn" style="padding:8px 12px">Back</button>
+            <button id="tourNext" class="lbtn" style="padding:8px 14px">Next</button></span></div>
+  </div>
+</div>
+
+<script>
+const APP_VERSION = "v0.0.1-dev";
+const $ = (id) => document.getElementById(id);
+const LS_SESSIONS="metronome.sessions", LS_SETLISTS="metronome.setlists", LS_STATE="metronome.mobile.state", LS_TOURED="metronome.mobile.toured", LS_CURTRACK="metronome.curtrack";
+function lsGet(k,fb){ try{ const v=localStorage.getItem(k); return v?JSON.parse(v):fb; }catch(e){ return fb; } }
+function lsSet(k,v){ try{ localStorage.setItem(k,JSON.stringify(v)); }catch(e){} }
+function esc(s){ return String(s).replace(/[&<>"]/g,(c)=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c])); }
+function fmt(sec){ sec=Math.max(0,Math.round(sec)); const h=Math.floor(sec/3600), m=Math.floor((sec%3600)/60), s=sec%60;
+  return (h?h+":"+String(m).padStart(2,"0"):m)+":"+String(s).padStart(2,"0"); }
+
+/* ========================= ENGINE ============================================ */
+const SAMPLES = {};
+/*@BUILD:include:src/engine.js@*/
+/*@BUILD:include:src/setlists.js@*/
+const state={ bpm:120, volume:0.85, running:false };
+let meters=[];
+let ramp={on:false,startBpm:80,amount:5,everyBars:4}, trainer={on:false,playBars:2,muteBars:2};
+let segBars=0, segBarCount=0, pendingAdvance=false, curEnd=null, curRep=null;
+let masterBeat=0, masterBeatTime=0, muteWindows=[];
+
+function setBpm(v){ state.bpm=Math.max(30,Math.min(300,Math.round(v))); }
+function advanceMaster(ahead){
+  const mbpb=masterBeatsPerBar();
+  while(masterBeatTime<ahead){
+    if(masterBeat%mbpb===0){
+      const barIndex=Math.floor(masterBeat/mbpb);
+      if(barIndex>0&&ramp.on&&(barIndex%ramp.everyBars===0)) setBpm(state.bpm+ramp.amount);
+      if(trainer.on){ const cyc=trainer.playBars+trainer.muteBars; if(cyc>0&&(barIndex%cyc)>=trainer.playBars) muteWindows.push({start:masterBeatTime,end:masterBeatTime+mbpb*(60/state.bpm)}); }
+      segBarCount=barIndex;
+      if(segBars>0&&barIndex>=segBars&&!pendingAdvance&&curEnd!=null){ pendingAdvance=true; }   // loop (null) keeps playing
+    }
+    masterBeat++; masterBeatTime+=60/state.bpm;
+  }
+  if(audioCtx) muteWindows=muteWindows.filter(w=>w.end>audioCtx.currentTime-1);
+}
+function scheduler(){
+  const ahead=audioCtx.currentTime+SCHEDULE_AHEAD;
+  advanceMaster(ahead);
+  for(const m of meters){ while(m.nextTime<ahead){ scheduleMeterTick(m,m.nextTime); m.nextTime+=laneStepDur(m,m.tick); m.tick++; } }
+  if(pendingAdvance){ pendingAdvance=false; setTimeout(handleEnd,0); }
+}
+function handleEnd(){   // fires after segBars bars when an end action is set (loop = no action)
+  if(curEnd==="stop"){ if(sessionActive&&state.running) pauseTrack(); else stopAudio(); }
+  else if(typeof curEnd==="number") gotoItem(idx+curEnd,true);   // +1 next track, -1 prev track
+}
+
+/* ========================= PLAYER ============================================= */
+let setlist=null, idx=0, slKey="", transientTitle=null, savedLists=[];
+const BUILTIN = SEED_SETLISTS.map((sl) => ({ title: sl.title, items: sl.items.map(([n, p]) => ({ name: n, ...patchToSetup(p) })) }));
+function currentName(){ return setlist ? (setlist.items[idx].name||"") : ""; }
+
+function buildMeters(lanes){
+  return (lanes||[]).map(c=>{
+    const p=parseGroups(c.groupsStr);
+    return {groupsStr:c.groupsStr,groups:p.groups,beatsPerBar:p.beatsPerBar,groupStarts:p.groupStarts,
+      stepsPerBeat:c.stepsPerBeat||1,sound:c.sound,beatsOn:(c.beatsOn||[]).slice(),orns:(c.orns||[]).slice(),poly:!!c.poly,swing:!!c.swing,enabled:c.enabled!==false,gainDb:c.gainDb||0,
+      tick:0,nextTime:0,vq:[],vqPtr:0,currentStep:-1,currentBar:0,_padEls:null,_lastPad:-1};
+  });
+}
+function snapshotLanes(){ return meters.map(m=>({groupsStr:m.groupsStr,stepsPerBeat:m.stepsPerBeat,sound:m.sound,beatsOn:m.beatsOn.slice(),orns:(m.orns||[]).slice(),poly:m.poly,swing:m.swing,enabled:m.enabled,gainDb:m.gainDb})); }
+function currentPatch(){ return setupToPatch({bpm:state.bpm,volume:state.volume,lanes:snapshotLanes(),trainer,ramp,bars:segBars,end:curEnd,rep:curRep}); }
+function loadSetup(s){
+  ramp=s.ramp?{...s.ramp}:{on:false,startBpm:80,amount:5,everyBars:4};
+  trainer=s.trainer?{...s.trainer}:{on:false,playBars:2,muteBars:2};
+  segBars=s.bars||0; segBarCount=0; curEnd=s.end; curRep=s.rep;
+  setBpm(s.bpm||120);
+  meters=buildMeters(s.lanes); laneSig=null;
+}
+
+function unlockAudio(){
+  try{ if(navigator.audioSession) navigator.audioSession.type="playback"; }catch(e){}
+  try{ const b=audioCtx.createBuffer(1,1,audioCtx.sampleRate), s=audioCtx.createBufferSource(); s.buffer=b; s.connect(audioCtx.destination); s.start(0); }catch(e){}
+}
+let runStartAt=0;
+function startAudio(){
+  ensureAudio(); unlockAudio(); audioCtx.resume(); state.running=true; runStartAt=Date.now();
+  if(ramp.on) setBpm(ramp.startBpm);
+  const t0=audioCtx.currentTime+0.08;
+  for(const m of meters){ m.tick=0; m.nextTime=t0; m.vq=[]; m.vqPtr=0; m.currentStep=-1; m.currentBar=0; }
+  masterBeat=0; masterBeatTime=t0; muteWindows=[]; pendingAdvance=false; lastBeatKey=-1;
+  schedulerTimer=setInterval(scheduler,LOOKAHEAD_MS); scheduler();
+  requestWake();
+}
+function stopMetronome(){ state.running=false; clearInterval(schedulerTimer); schedulerTimer=null; pendingAdvance=false; for(const m of meters){ m.currentStep=-1; } }
+function stopAudio(){ stopMetronome(); releaseWake(); renderAll(); }
+function startRun(){ startAudio(); renderAll(); }
+
+/* sessions */
+let sessionActive=false, session=null, trackSegStart=null, lastSaved=false;
+function startTrack(){
+  if(!sessionActive){ sessionActive=true; session={at:Date.now(),segments:[]}; lastSaved=false; }
+  startAudio(); trackSegStart={name:currentName(),at:Date.now(),bpm:state.bpm}; renderAll(); renderSessionBar();
+}
+function recordSegment(){ if(!trackSegStart||!session) return; const sec=(Date.now()-trackSegStart.at)/1000;
+  if(sec>=3) session.segments.push({name:trackSegStart.name,at:trackSegStart.at,sec,bpm:state.bpm}); trackSegStart=null; }
+function pauseTrack(){ recordSegment(); stopMetronome(); releaseWake(); renderAll(); renderSessionBar(); }
+function endSession(){
+  if(state.running){ recordSegment(); stopMetronome(); releaseWake(); }
+  if(session){ const endedAt=Date.now(), clockSec=(endedAt-session.at)/1000;
+    if(session.segments.length && clockSec>=5){ const arr=lsGet(LS_SESSIONS,[]); arr.unshift({at:session.at,endedAt,clockSec,note:"",segments:session.segments}); lsSet(LS_SESSIONS,arr); lastSaved=true; } }
+  session=null; sessionActive=false; trackSegStart=null; renderAll(); renderSessionBar();
+}
+function play(){ if(sessionActive) endSession(); else if(state.running) stopAudio(); else startRun(); }
+function practice(){ if(sessionActive&&state.running){ pauseTrack(); } else { if(state.running&&!sessionActive) stopMetronome(); startTrack(); } }
+
+function gotoItem(i,keepPlaying){
+  if(!setlist||!setlist.items.length) return;
+  const n=setlist.items.length; idx=((i%n)+n)%n;
+  const wasRunning=state.running||keepPlaying;
+  if(state.running){ if(sessionActive) recordSegment(); stopMetronome(); }
+  loadSetup(setlist.items[idx]);
+  if(wasRunning){ startAudio(); if(sessionActive) trackSegStart={name:currentName(),at:Date.now(),bpm:state.bpm}; }
+  buildSetlistOptions(); buildTrackOptions(); renderAll(); renderSessionBar();
+}
+function loadSetlistObj(sl){
+  if(state.running&&sessionActive) recordSegment();
+  const wasRunning=state.running; if(wasRunning) stopMetronome();
+  setlist=sl; idx=0; loadSetup(sl.items[0]);
+  if(wasRunning){ startAudio(); if(sessionActive) trackSegStart={name:currentName(),at:Date.now(),bpm:state.bpm}; }
+  buildSetlistOptions(); buildTrackOptions(); renderAll(); renderSessionBar();
+}
+
+let taps=[];
+function tapTempo(){ const now=performance.now(); taps=taps.filter(t=>now-t<2000); taps.push(now);
+  if(taps.length>=2){ let s=0; for(let i=1;i<taps.length;i++) s+=taps[i]-taps[i-1]; setBpm(60000/(s/(taps.length-1))); ramp.on=false; renderAll(); } }
+function nudge(d){ ramp.on=false; setBpm(state.bpm+d); renderAll(); }
+
+/* ========================= EDITABLE LANES ==================================== */
+let laneSig=null, editLaneIdx=0;
+function laneSignature(){ return meters.map(m=>m.sound+":"+m.groupsStr+"/"+m.stepsPerBeat+(m.swing?"s":"")+(m.enabled?"":"!")+(m.poly?"~":"")).join("|"); }
+function lvlClass(l){ return l===2?"acc":l===3?"ghost":l===1?"on":""; }
+function padClass(m,k){ const spb=m.stepsPerBeat, isBeat=(k%spb===0), gs=isBeat&&m.groupStarts.has(k/spb), lvl=m.beatsOn[k]|0;
+  return "pad "+(isBeat?"beat":"sub")+(gs?" gs":"")+(lvl?(" "+lvlClass(lvl)):""); }
+// Effective note value a lane actually plays: reduce the subdivision grid to the
+// largest note that lands on every active hit (so a triplet grid that only plays
+// the beat shows a quarter, not a triplet). gcd(stepsPerBeat, all active offsets).
+function gcd(a,b){ a=Math.abs(a); b=Math.abs(b); while(b){ const t=a%b; a=b; b=t; } return a; }
+function laneNoteValue(m){
+  const spb=m.stepsPerBeat; let g=spb, any=false;
+  for(let k=0;k<m.beatsOn.length;k++){ if((m.beatsOn[k]|0)>0){ any=true; g=gcd(g,k); } }
+  if(!any) return 1;
+  return Math.max(1, spb/g);
+}
+// Small engraved rhythm figure (1=quarter, 2=8ths, 3=triplet, 4=16ths, 5/6/7=tuplets). SVG.
+function rhythmSVG(n){
+  n=Math.max(1,n|0);
+  const baseY=15, topY=6, stemH=(baseY-topY-0.5).toFixed(1);
+  const head=(cx)=>'<ellipse cx="'+cx.toFixed(1)+'" cy="'+baseY+'" rx="2.4" ry="1.8" transform="rotate(-20 '+cx.toFixed(1)+' '+baseY+')"/>';
+  const stem=(sx)=>'<rect x="'+(sx-0.45).toFixed(2)+'" y="'+topY+'" width="0.9" height="'+stemH+'"/>';
+  const beam=(x0,x1,y)=>'<rect x="'+x0.toFixed(2)+'" y="'+y+'" width="'+(x1-x0).toFixed(2)+'" height="1.7"/>';
+  const beams = n===1?0 : (n<=3?1:2), tup = (n===3||n>=5)?n:null;
+  const LEFT=3, GAP = n<=2?8 : n<=4?6.5 : 5.5, W=Math.round(LEFT*2 + (n-1)*GAP + 4);
+  let g="", first=0, last=0;
+  for(let i=0;i<n;i++){ const cx=LEFT+i*GAP, sx=cx+2.0; if(i===0) first=sx; last=sx; g+=head(cx)+stem(sx); }
+  if(beams>=1) g+=beam(first-0.45,last+0.45,topY);
+  if(beams>=2) g+=beam(first-0.45,last+0.45,topY+2.6);
+  if(tup) g+='<text x="'+(W/2).toFixed(1)+'" y="3.6" font-size="6" text-anchor="middle" font-style="italic" stroke="none">'+tup+'</text>';
+  return '<svg class="rhythm" viewBox="0 0 '+W+' 18" width="'+W+'" height="16" fill="currentColor" aria-hidden="true">'+g+'</svg>';
+}
+function laneMetaHTML(m){ const eff=laneNoteValue(m);
+  const ref=(meters[0]?meters[0].beatsPerBar:m.beatsPerBar);
+  const poly=m.poly?"<span class='polybadge' title='polyrhythm — "+m.beatsPerBar+" over "+ref+"'>↻"+m.beatsPerBar+":"+ref+"</span>":"";
+  return "<span class='ln-name'>"+esc(m.sound)+"</span><span class='rh-host' title='Note value'>"+rhythmSVG(eff)+"</span><span class='lg'>"+esc(m.groupsStr)+"</span>"+poly; }
+function setLaneMeta(m){ if(!m._meta) return; m._meta.innerHTML=laneMetaHTML(m); }
+// speaker glyphs for the inline per-lane mute toggle
+const SPK_ON='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9v6h4l5 4V5L8 9H4z"/><path d="M16.5 8.5a5 5 0 0 1 0 7"/></svg>';
+const SPK_OFF='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9v6h4l5 4V5L8 9H4z"/><path d="M17 9.5l4 5M21 9.5l-4 5"/></svg>';
+function toggleLaneMute(i){ const m=meters[i]; if(!m) return; m.enabled=!m.enabled; laneSig=null; renderAll(); saveState(); }
+function buildLanes(){
+  const box=$("lanes"); box.innerHTML="";
+  meters.forEach((m,i)=>{
+    const lane=document.createElement("div"); lane.className="lane"+(m.enabled?"":" off")+(m.poly?" poly":"");
+    const mute=document.createElement("button"); mute.className="lmute"+(m.enabled?"":" muted");
+    mute.title=m.enabled?"Mute lane":"Unmute lane"; mute.setAttribute("aria-label",mute.title);
+    mute.innerHTML=m.enabled?SPK_ON:SPK_OFF; mute.onclick=(e)=>{ e.stopPropagation(); toggleLaneMute(i); };
+    const meta=document.createElement("button"); meta.className="lmeta"; m._meta=meta; m._idx=i; setLaneMeta(m);
+    meta.onclick=()=>openLaneSheet(i);
+    const pads=document.createElement("div"); pads.className="pads";
+    const spb=m.stepsPerBeat; m._padEls=new Array(m.beatsPerBar*spb); m._lastPad=-1;
+    for(let b=0;b<m.beatsPerBar;b++){ const cell=document.createElement("div"); cell.className="beatcell";
+      for(let s=0;s<spb;s++){ const k=b*spb+s; const p=document.createElement("button"); p.className="pad"; p.onclick=()=>cyclePad(m,k,p); cell.appendChild(p); m._padEls[k]=p; }
+      pads.appendChild(cell); }
+    lane.appendChild(mute); lane.appendChild(meta); lane.appendChild(pads); box.appendChild(lane);
+  });
+  const add=document.createElement("button"); add.className="addlane"; add.textContent="+ Add lane"; add.onclick=addLane; box.appendChild(add);
+  renderPadLevels();
+}
+function renderPadLevels(){ meters.forEach(m=>{ if(!m._padEls) return;
+  m._padEls.forEach((p,k)=>{ if(p) p.className=padClass(m,k); }); }); }
+function cyclePad(m,k,p){ m.beatsOn[k]=((m.beatsOn[k]|0)+1)%4; if(m.orns) m.orns[k]=0; p.className=padClass(m,k);
+  setLaneMeta(m);   // note value can change as hits are added/removed
+  saveState(); }
+
+/* ---- graphic note-value picker (tap a lane's rhythm icon, or use it in the lane sheet) ---- */
+const NOTE_OPTS=[1,2,3,4,6];
+function noteName(n){ return {1:"quarter",2:"eighth",3:"triplet",4:"sixteenth",6:"sextuplet"}[n]||(n+"-tuplet"); }
+function renderNoteOpts(box, cur, pick){ if(!box) return; box.innerHTML="";
+  NOTE_OPTS.forEach(n=>{ const b=el("button","notebtn"+(n===cur?" active":"")); b.innerHTML=rhythmSVG(n)+"<small>"+noteName(n)+"</small>"; b.onclick=()=>pick(n); box.appendChild(b); }); }
+function setLaneSub(i,n){ const m=meters[i]; if(!m) return;
+  rebuildLane(i,{groupsStr:m.groupsStr,stepsPerBeat:n,swing:m.swing,poly:m.poly,enabled:m.enabled,sound:m.sound,gainDb:m.gainDb,beatsOn:m.beatsOn.slice(),orns:(m.orns||[]).slice()});
+  laneSig=null; renderAll(); saveState(); }
+function refreshLaneSheetNotes(){ const m=meters[editLaneIdx]; if(!m) return;
+  renderNoteOpts($("lsNotes"), m.stepsPerBeat, (n)=>{ setLaneSub(editLaneIdx,n); refreshLaneSheetNotes(); }); }
+function renderPadPlayheads(){ meters.forEach(m=>{ if(!m._padEls) return; const cur=state.running?m.currentStep:-1;
+  if(m._lastPad!==cur){ if(m._lastPad>=0&&m._padEls[m._lastPad]) m._padEls[m._lastPad].classList.remove("cur"); if(cur>=0&&m._padEls[cur]) m._padEls[cur].classList.add("cur"); m._lastPad=cur; } }); }
+function rebuildLane(i,cfg){
+  const p=parseGroups(cfg.groupsStr), spb=Math.max(1,cfg.stepsPerBeat||1), steps=p.beatsPerBar*spb;
+  let on=cfg.beatsOn, orns=cfg.orns||[];
+  if(!on||on.length!==steps){ on=Array.from({length:steps},(_,k)=>((k%spb)===0&&p.groupStarts.has(k/spb))?2:1); orns=on.map(()=>0); }
+  const old=meters[i]||{};
+  meters[i]=Object.assign(old,{groupsStr:cfg.groupsStr,groups:p.groups,beatsPerBar:p.beatsPerBar,groupStarts:p.groupStarts,
+    stepsPerBeat:spb,sound:cfg.sound,beatsOn:on,orns:orns,poly:!!cfg.poly,swing:!!cfg.swing,enabled:cfg.enabled!==false,gainDb:cfg.gainDb||0,
+    currentStep:-1,_padEls:null,_lastPad:-1});
+}
+function addLane(){ meters.push(buildMeters([{groupsStr:"4",stepsPerBeat:1,sound:"beep",beatsOn:[2,1,1,1],orns:[0,0,0,0],poly:false,swing:false,enabled:true,gainDb:0}])[0]); laneSig=null; renderAll(); saveState(); }
+
+/* lane settings sheet */
+(function(){ const sel=$("lsSound"); VOICES.forEach(([k,lab])=>{ const o=document.createElement("option"); o.value=k; o.textContent=lab; sel.appendChild(o); }); })();
+function gainLabel(db){ return (db>0?"+":"")+db+" dB"; }
+function openLaneSheet(i){ editLaneIdx=i; const m=meters[i]; if(!m) return;
+  $("lsSound").value=m.sound; $("lsGroup").value=m.groupsStr; $("lsPoly").checked=!!m.poly; $("lsMute").checked=!m.enabled;
+  $("lsGain").value=m.gainDb||0; $("lsGainVal").textContent=gainLabel(m.gainDb||0); refreshLaneSheetNotes();
+  $("saveSheet").classList.remove("open"); $("shareSheet").classList.remove("open"); $("scrim").classList.add("open"); $("laneSheet").classList.add("open"); }
+function closeSheets(){ ["laneSheet","saveSheet","shareSheet","scrim"].forEach(id=>$(id).classList.remove("open")); }
+const closeLaneSheet=closeSheets;
+function applyLane(){ const m=meters[editLaneIdx]; if(!m) return;
+  let grp=($("lsGroup").value||"").trim()||"4";
+  rebuildLane(editLaneIdx,{groupsStr:grp,stepsPerBeat:m.stepsPerBeat,swing:m.swing,
+    poly:$("lsPoly").checked,enabled:!$("lsMute").checked,sound:$("lsSound").value,gainDb:parseInt($("lsGain").value,10)||0,beatsOn:m.beatsOn.slice(),orns:(m.orns||[]).slice()});
+  laneSig=null; renderAll(); saveState(); refreshLaneSheetNotes(); }
+["lsSound","lsPoly","lsMute"].forEach(id=>$(id).addEventListener("change",applyLane));
+$("lsGain").addEventListener("input",()=>{ const m=meters[editLaneIdx]; if(!m) return; m.gainDb=parseInt($("lsGain").value,10)||0; $("lsGainVal").textContent=gainLabel(m.gainDb); saveState(); });   // live, no rebuild
+$("lsGroup").addEventListener("change",applyLane);
+$("lsDone").onclick=closeLaneSheet;
+$("lsDel").onclick=()=>{ if(meters.length<=1){ closeLaneSheet(); return; } meters.splice(editLaneIdx,1); laneSig=null; renderAll(); saveState(); closeLaneSheet(); };
+$("scrim").onclick=closeSheets;
+
+/* ---- inline track panel: repeat/end, ramp, gap, copy/paste string (above lanes) ---- */
+function clampInt(v,lo,hi,def){ v=parseInt(v,10); if(isNaN(v)) return def; return Math.max(lo,Math.min(hi,v)); }
+function flashIp(msg){ $("ipMsg").textContent=msg; setTimeout(()=>{ if($("ipMsg").textContent===msg) $("ipMsg").textContent=""; },1600); }
+function buildTrackPanel(){
+  if(document.activeElement&&document.activeElement.closest&&document.activeElement.closest("#trackpanel")) return;   // don't fight the user mid-edit
+  const rep=segBars>0;
+  $("ipRepeat").checked=rep; $("ipRepeatRow").classList.toggle("off",!rep);
+  $("ipBars").value=segBars||4;
+  $("ipEnd").value = curEnd==="stop"?"stop":(curEnd===-1?"prev":"next");
+  $("ipRamp").checked=ramp.on; $("ipGap").checked=trainer.on;
+  $("ipRampStart").value=ramp.startBpm||80; $("ipRampAmt").value=ramp.amount||5; $("ipRampEvery").value=ramp.everyBars||4;
+  $("ipGapPlay").value=trainer.playBars||2; $("ipGapMute").value=trainer.muteBars||2;
+  $("ipRampRow").classList.toggle("off",!ramp.on); $("ipGapRow").classList.toggle("off",!trainer.on);
+}
+function applyTrackPanel(){
+  if($("ipRepeat").checked){ segBars=Math.max(1,parseInt($("ipBars").value,10)||4); const e=$("ipEnd").value; curEnd = e==="stop"?"stop":(e==="prev"?-1:1); }
+  else { segBars=0; curEnd=null; }   // no Repeat = loop forever
+  $("ipRepeatRow").classList.toggle("off",!$("ipRepeat").checked);
+  ramp.on=$("ipRamp").checked; ramp.startBpm=clampInt($("ipRampStart").value,30,300,80); ramp.amount=clampInt($("ipRampAmt").value,1,50,5); ramp.everyBars=clampInt($("ipRampEvery").value,1,64,4);
+  trainer.on=$("ipGap").checked; trainer.playBars=clampInt($("ipGapPlay").value,1,32,2); trainer.muteBars=clampInt($("ipGapMute").value,1,32,2);
+  $("ipRampRow").classList.toggle("off",!ramp.on); $("ipGapRow").classList.toggle("off",!trainer.on);
+  saveState();
+}
+["ipRepeat","ipBars","ipEnd","ipRamp","ipGap","ipRampStart","ipRampAmt","ipRampEvery","ipGapPlay","ipGapMute"].forEach(id=>$(id).addEventListener("change",applyTrackPanel));
+
+/* ---- save & library: user set lists/tracks (same store + format as the editor) ---- */
+function userSetlists(){ return lsGet(LS_SETLISTS,[]); }
+function saveUserSetlists(a){ lsSet(LS_SETLISTS,a); savedLists=a; }
+function curSetupObj(){ return { bpm:state.bpm, lanes:snapshotLanes(), trainer:{...trainer}, ramp:{...ramp}, countMs:0, bars:segBars, rep:curRep, end:curEnd }; }
+function flashSave(msg){ $("saveMsg").textContent=msg; setTimeout(()=>{ if($("saveMsg").textContent===msg) $("saveMsg").textContent=""; },1800); }
+function el(tag,cls,txt){ const e=document.createElement(tag); if(cls) e.className=cls; if(txt!=null) e.textContent=txt; return e; }
+function ibtn(label,fn,dis){ const b=el("button","ibtn",label); b.disabled=!!dis; b.onclick=(e)=>{ e.stopPropagation(); fn(); }; return b; }
+
+function selectUserList(i){ const arr=userSetlists(); if(!arr[i]) return; slKey="s"+i; transientTitle=null;
+  loadSetlistObj({title:arr[i].title,items:(arr[i].items||[]).map(it=>({...it}))}); renderLibrary(); }
+function selectUserTrack(i,j){ slKey="s"+i; transientTitle=null; savedLists=userSetlists();
+  setlist={title:savedLists[i].title,items:savedLists[i].items.map(it=>({...it}))}; idx=Math.max(0,Math.min(j,setlist.items.length-1));
+  loadSetup(setlist.items[idx]); buildSetlistOptions(); buildTrackOptions(); renderAll(); saveState(); }
+
+function doSaveAsNew(){
+  const name=($("saveName").value||"My track").trim(); const arr=userSetlists(); let i;
+  if($("saveTo").value==="__new"){ const t=($("saveNewName").value||"My set list").trim(); arr.push({title:t,description:"",items:[]}); i=arr.length-1; }
+  else { i=+$("saveTo").value.slice(1); if(!arr[i]) return; }
+  arr[i].items.push({name, ...curSetupObj()}); saveUserSetlists(arr);
+  selectUserTrack(i, arr[i].items.length-1); $("saveNewName").value=""; buildSaveTo(); renderLibrary(); flashSave("Saved ✓");
+}
+function doUpdate(){
+  if(slKey[0]!=="s") return; const arr=userSetlists(), i=+slKey.slice(1); if(!arr[i]||!arr[i].items[idx]) return;
+  const oldName=arr[i].items[idx].name||"this track"; const nm=($("saveName").value||oldName).trim();
+  if(!confirm('Overwrite "'+oldName+'" with the current settings?')) return;
+  arr[i].items[idx]={name:nm, ...curSetupObj()}; saveUserSetlists(arr);
+  setlist.items[idx]={name:nm, ...curSetupObj()}; lastCur=null; buildTrackOptions(); renderInfo(); renderLibrary(); flashSave("Updated ✓");
+}
+function moveList(i,dir){ const arr=userSetlists(), j=i+dir; if(j<0||j>=arr.length) return; const t=arr[i]; arr[i]=arr[j]; arr[j]=t; saveUserSetlists(arr);
+  if(slKey==="s"+i) slKey="s"+j; else if(slKey==="s"+j) slKey="s"+i; buildSetlistOptions(); renderLibrary(); saveState(); }
+function moveTrack(i,j,dir){ const arr=userSetlists(), sl=arr[i], k=j+dir; if(!sl||k<0||k>=sl.items.length) return; const t=sl.items[j]; sl.items[j]=sl.items[k]; sl.items[k]=t; saveUserSetlists(arr);
+  if(slKey==="s"+i){ if(idx===j) idx=k; else if(idx===k) idx=j; setlist.items=sl.items.map(it=>({...it})); buildTrackOptions(); renderInfo(); } renderLibrary(); saveState(); }
+function renameList(i){ const arr=userSetlists(); if(!arr[i]) return; const n=prompt("Rename set list:",arr[i].title||""); if(n==null) return; arr[i].title=n.trim()||arr[i].title; saveUserSetlists(arr);
+  if(slKey==="s"+i&&setlist) setlist.title=arr[i].title; buildSetlistOptions(); renderLibrary(); saveState(); }
+function renameTrack(i,j){ const arr=userSetlists(); if(!arr[i]||!arr[i].items[j]) return; const n=prompt("Rename track:",arr[i].items[j].name||""); if(n==null) return; arr[i].items[j].name=n.trim()||arr[i].items[j].name; saveUserSetlists(arr);
+  if(slKey==="s"+i){ setlist.items[j].name=arr[i].items[j].name; if(idx===j){ lastCur=null; } buildTrackOptions(); renderInfo(); } renderLibrary(); saveState(); }
+function deleteTrack(i,j){ const arr=userSetlists(), sl=arr[i]; if(!sl||!sl.items[j]) return; if(!confirm('Delete track "'+(sl.items[j].name||"")+'"?')) return; sl.items.splice(j,1); saveUserSetlists(arr);
+  if(slKey==="s"+i){ if(!sl.items.length){ deleteListResolved(i); return; } if(idx>=sl.items.length) idx=sl.items.length-1; else if(idx>j) idx--; selectUserTrack(i,idx); } renderLibrary(); }
+function deleteList(i){ const arr=userSetlists(); if(!arr[i]) return; if(!confirm('Delete set list "'+(arr[i].title||"")+'" and all its tracks?')) return; deleteListResolved(i); }
+function deleteListResolved(i){ const arr=userSetlists(); arr.splice(i,1); saveUserSetlists(arr);
+  if(slKey==="s"+i){ slKey="b0"; setlist=BUILTIN[0]; idx=0; loadSetup(setlist.items[0]); buildSetlistOptions(); buildTrackOptions(); renderAll(); saveState(); }
+  else if(slKey[0]==="s"){ const k=+slKey.slice(1); if(k>i) slKey="s"+(k-1); buildSetlistOptions(); }
+  buildSaveTo(); renderLibrary(); }
+function newList(){ const n=prompt("New set list name:","My set list"); if(n==null) return; const arr=userSetlists(); arr.push({title:n.trim()||"My set list",description:"",items:[]}); saveUserSetlists(arr); buildSaveTo(); renderLibrary(); }
+
+function buildSaveTo(){ savedLists=userSetlists(); const sel=$("saveTo"); sel.innerHTML="";
+  savedLists.forEach((sl,i)=>sel.appendChild(opt("s"+i,(sl.title||("Set list "+(i+1)))+" ("+(sl.items?sl.items.length:0)+")")));
+  sel.appendChild(opt("__new","+ New set list…"));
+  sel.value = slKey[0]==="s" ? slKey : (savedLists.length?"s0":"__new");
+  $("saveNewName").style.display = sel.value==="__new" ? "block":"none"; }
+$("saveTo").onchange=()=>{ $("saveNewName").style.display = $("saveTo").value==="__new" ? "block":"none"; };
+
+function renderLibrary(){ savedLists=userSetlists(); const box=$("libBody"); box.innerHTML="";
+  box.appendChild(el("div","liblbl","Your set lists"));
+  if(!savedLists.length) box.appendChild(el("div","libhint","None yet — “Save as new track” creates one."));
+  savedLists.forEach((sl,i)=>{ const row=el("div","librow"+(slKey==="s"+i?" active":""));
+    const nm=el("button","libname",(sl.title||"set list")+" ("+(sl.items?sl.items.length:0)+")"); nm.onclick=()=>selectUserList(i); row.appendChild(nm);
+    row.appendChild(ibtn("↑",()=>moveList(i,-1),i===0)); row.appendChild(ibtn("↓",()=>moveList(i,1),i===savedLists.length-1));
+    row.appendChild(ibtn("✎",()=>renameList(i))); row.appendChild(ibtn("✕",()=>deleteList(i))); box.appendChild(row); });
+  const addL=el("button","addlane","+ New set list"); addL.onclick=newList; box.appendChild(addL);
+  if(slKey[0]==="s"){ const i=+slKey.slice(1), sl=savedLists[i]; if(sl){
+    box.appendChild(el("div","liblbl","Tracks in “"+(sl.title||"set list")+"”"));
+    sl.items.forEach((it,j)=>{ const row=el("div","librow"+(idx===j?" active":""));
+      const nm=el("button","libname",(j+1)+". "+(it.name||"track")); nm.onclick=()=>{ gotoItem(j,state.running); renderLibrary(); }; row.appendChild(nm);
+      row.appendChild(ibtn("↑",()=>moveTrack(i,j,-1),j===0)); row.appendChild(ibtn("↓",()=>moveTrack(i,j,1),j===sl.items.length-1));
+      row.appendChild(ibtn("✎",()=>renameTrack(i,j))); row.appendChild(ibtn("✕",()=>deleteTrack(i,j))); box.appendChild(row); });
+    const addT=el("button","addlane","+ Add current track here"); addT.onclick=()=>{ $("saveTo").value="s"+i; doSaveAsNew(); }; box.appendChild(addT);
+  }} else { box.appendChild(el("div","libhint","This set list is built-in (read-only). “Save as new track” copies your edits into one of your own set lists.")); }
+}
+function openSaveSheet(){
+  $("saveName").value=currentName()||"My track"; buildSaveTo();
+  const upd=$("saveUpd"); if(slKey[0]==="s"){ upd.style.display=""; upd.textContent='Update “'+(currentName()||"track")+'”'; } else upd.style.display="none";
+  $("saveMsg").textContent=""; renderLibrary();
+  $("laneSheet").classList.remove("open"); $("shareSheet").classList.remove("open"); $("scrim").classList.add("open"); $("saveSheet").classList.add("open"); }
+$("saveNew").onclick=doSaveAsNew; $("saveUpd").onclick=doUpdate; $("saveDone").onclick=closeSheets; $("saveBtn").onclick=openSaveSheet;
+
+/* ---- share: a track or set list as a link, or paste a string to load ---- */
+function setlistToCode(sl){ return b64u(JSON.stringify({t:sl.title||"",d:sl.description||"",i:(sl.items||[]).map(it=>({n:it.name,p:setupToPatch(it)}))})); }
+function shareSetlistObj(){ return {title:setlist?setlist.title:"Set list", description:"", items:(setlist?setlist.items:[]).map((it,i)=> i===idx?{name:it.name, ...curSetupObj()}:it)}; }
+let shareKind="p";
+function shareText(){ return shareKind==="p" ? currentPatch() : setlistToCode(shareSetlistObj()); }
+function shareUrl(){ return location.origin+location.pathname+"#"+shareKind+"="+(shareKind==="p"?encodeURIComponent(currentPatch()):setlistToCode(shareSetlistObj())); }
+function refreshShare(){ $("shareLink").value=shareUrl(); $("shareSeg").querySelectorAll("button").forEach(b=>b.classList.toggle("active",b.dataset.k===shareKind)); }
+function flashShare(m){ $("shareMsg").textContent=m; setTimeout(()=>{ if($("shareMsg").textContent===m) $("shareMsg").textContent=""; },1600); }
+function copyText(s, ok){ if(navigator.clipboard&&navigator.clipboard.writeText){ navigator.clipboard.writeText(s).then(ok,()=>{}); } else { const t=$("shareLink"); t.value=s; t.select(); try{ document.execCommand("copy"); ok(); }catch(e){} refreshShare(); } }
+function openShareSheet(){ shareKind="p"; refreshShare(); $("sharePaste").value=""; $("shareMsg").textContent="";
+  ["laneSheet","saveSheet"].forEach(id=>$(id).classList.remove("open")); $("scrim").classList.add("open"); $("shareSheet").classList.add("open"); }
+$("shareSeg").querySelectorAll("button").forEach(b=>b.onclick=()=>{ shareKind=b.dataset.k; refreshShare(); });
+$("shareCopy").onclick=()=>copyText(shareUrl(),()=>flashShare("Link copied ✓"));
+$("shareCopyT").onclick=()=>copyText(shareText(),()=>flashShare("Copied ✓"));
+$("shareLoad").onclick=()=>{ const v=($("sharePaste").value||"").trim(); if(!v){ flashShare("Paste a string or link"); return; }
+  if(loadFromHash(/[#?&](p|sl)=/.test(v)?v:("#p="+v))){ closeSheets(); } else flashShare("✗ not valid"); };
+$("shareDone").onclick=closeSheets;
+$("shareBtn").onclick=openShareSheet;
+
+/* ========================= SET-LIST / TRACK DROPDOWNS ======================== */
+function opt(v,t){ const o=document.createElement("option"); o.value=v; o.textContent=t; return o; }
+function og(label){ const g=document.createElement("optgroup"); g.label=label; return g; }
+function buildSetlistOptions(){
+  savedLists=lsGet(LS_SETLISTS,[]);
+  const sel=$("slSel"); sel.innerHTML="";
+  if(slKey===""){ sel.appendChild(opt("", transientTitle||"Loaded")); }
+  const g1=og("Built-in"); BUILTIN.forEach((sl,i)=>g1.appendChild(opt("b"+i, sl.title+" ("+sl.items.length+")"))); sel.appendChild(g1);
+  if(savedLists.length){ const g2=og("Your set lists"); savedLists.forEach((sl,i)=>g2.appendChild(opt("s"+i,(sl.title||("Set list "+(i+1)))+" ("+(sl.items?sl.items.length:0)+")"))); sel.appendChild(g2); }
+  sel.value=slKey;
+}
+function buildTrackOptions(){ const sel=$("trkSel"); sel.innerHTML="";
+  if(setlist) setlist.items.forEach((it,i)=>sel.appendChild(opt(String(i),(i+1)+". "+(it.name||("Track "+(i+1)))))); sel.value=String(idx); }
+$("slSel").onchange=(e)=>{ const v=e.target.value; let sl=null;
+  if(v[0]==="b") sl=BUILTIN[+v.slice(1)]; else if(v[0]==="s"){ const s=savedLists[+v.slice(1)]; if(s) sl={title:s.title,items:(s.items||[]).map(it=>({...it}))}; }
+  if(sl){ slKey=v; transientTitle=null; loadSetlistObj(sl); } };
+$("trkSel").onchange=(e)=>{ gotoItem(+e.target.value, state.running); };
+
+/* ========================= RENDER ============================================ */
+let lastCur=null;
+function renderInfo(){
+  if(!editingBpm) $("bpmNum").textContent=state.bpm;
+  const ts=$("trkSel"); if(ts && ts.value!==String(idx)) ts.value=String(idx);
+  const nm=currentName(); if(nm!==lastCur){ lastCur=nm; lsSet(LS_CURTRACK,nm); }
+  const sig=laneSignature(); if(sig!==laneSig){ laneSig=sig; buildLanes(); } else renderPadLevels();
+  buildTrackPanel(); updateStatus();
+}
+function endLabel(){ if(curEnd==null) return "loop"; if(curEnd==="stop") return "stop"; if(curEnd===1) return "next";
+  if(typeof curEnd==="number"&&curEnd>0) return "+"+curEnd; return String(curEnd); }
+function updateStatus(){ const m=meters[0]; let s="";
+  if(m){ s=m.beatsPerBar+" beats"+(m.groups.length>1?" · "+m.groups.join("+"):"")+(m.swing?" · swing":""); }
+  if(state.running&&m){ const bar=segBars>0?((m.currentBar|0)%segBars+1):((m.currentBar|0)+1);
+    s+=" · bar "+bar+(segBars>0?(" / "+segBars):"")+" · "+fmt((Date.now()-runStartAt)/1000); }
+  else if(segBars>0){ s+=" · "+segBars+" bars"; }
+  $("meterline").textContent=s; }
+function renderTransport(){
+  const onAny=sessionActive||state.running;
+  $("bPlay").innerHTML=(onAny?"■<small>STOP</small>":"▶<small>PLAY</small>"); $("bPlay").classList.toggle("on",onAny);
+  const pr=state.running&&sessionActive;
+  $("bPrac").innerHTML=(pr?"❚❚<small>PAUSE</small>":"⦿<small>PRACTICE</small>"); $("bPrac").classList.toggle("on",pr); }
+function renderSessionBar(){ const bar=$("bJournal"), n=lsGet(LS_SESSIONS,[]).length;   // the Journal button doubles as live session status
+  if(sessionActive){ bar.classList.add("rec"); const segs=session.segments.length+(trackSegStart?1:0);
+    $("jText").textContent="Recording "+fmt((Date.now()-session.at)/1000)+" · "+segs+" track"+(segs===1?"":"s"); }
+  else { bar.classList.remove("rec"); $("jText").textContent=(lastSaved?"✓ saved · ":"")+"Journal"+(n?(" ("+n+")"):"")+" →"; } }
+function renderAll(){ renderInfo(); renderTransport(); saveState(); }
+
+let lastBeatKey=-1, pulseTimer=null;
+function pulseHit(acc){ const p=$("pulse"); p.classList.remove("hit","acc"); void p.offsetWidth; p.classList.add("hit"); if(acc) p.classList.add("acc");
+  clearTimeout(pulseTimer); pulseTimer=setTimeout(()=>p.classList.remove("hit","acc"),130); }
+let lastTimeUpd=0;
+function draw(){
+  if(audioCtx&&state.running){ const now=audioCtx.currentTime-(audioCtx.outputLatency||audioCtx.baseLatency||0);
+    for(const m of meters){ while(m.vqPtr<m.vq.length&&m.vq[m.vqPtr].time<=now){ m.currentStep=m.vq[m.vqPtr].step; m.currentBar=m.vq[m.vqPtr].bar; m.vqPtr++; } } }
+  renderPadPlayheads();
+  const m=meters[0];
+  if(state.running&&m&&m.currentStep>=0){ const beat=Math.floor(m.currentStep/m.stepsPerBeat);
+    if(m.currentStep%m.stepsPerBeat===0){ const key=m.currentBar*1000+beat; if(key!==lastBeatKey){ lastBeatKey=key; pulseHit(m.groupStarts.has(beat)); } } }
+  const t=performance.now();
+  if(t-lastTimeUpd>200){ lastTimeUpd=t; if(state.running) updateStatus(); if(sessionActive) renderSessionBar(); }
+  requestAnimationFrame(draw);
+}
+
+/* ========================= BPM: tap=tap-tempo · hold=type · drag=scrub ======== */
+let editingBpm=false;
+function openBpmEdit(){ editingBpm=true; const i=$("bpmIn"); $("bpm").style.display="none"; i.style.display="block"; i.value=state.bpm; i.focus(); i.select(); }
+function closeBpmEdit(commit){ const i=$("bpmIn"); if(commit){ const v=parseInt(i.value,10); if(v){ ramp.on=false; setBpm(v); } } editingBpm=false; i.style.display="none"; $("bpm").style.display=""; renderAll(); }
+$("bpmIn").addEventListener("keydown",(e)=>{ if(e.key==="Enter"){ closeBpmEdit(true); } else if(e.key==="Escape"){ closeBpmEdit(false); } });
+$("bpmIn").addEventListener("blur",()=>{ if(editingBpm) closeBpmEdit(true); });
+$("bTapBtn").onclick=tapTempo;                 // TAP button (left of the BPM) — tap to set
+$("bpm").onclick=()=>{ if(!editingBpm) openBpmEdit(); };   // tap the number to type
+(function(){ const w=$("wheel"); let dragging=false, startY=0, startBpm=120;   // thumbwheel (right) — drag to scrub
+  w.addEventListener("pointerdown",(e)=>{ dragging=true; startY=e.clientY; startBpm=state.bpm; w.setPointerCapture(e.pointerId); e.preventDefault(); });
+  w.addEventListener("pointermove",(e)=>{ if(!dragging) return; ramp.on=false; setBpm(startBpm+(startY-e.clientY)*0.5); renderAll(); });
+  w.addEventListener("pointerup",(e)=>{ dragging=false; try{w.releasePointerCapture(e.pointerId);}catch(_){} });
+  w.addEventListener("pointercancel",()=>{ dragging=false; });
+})();
+
+/* ========================= PERSIST / RESTORE STATE =========================== */
+let saveTimer=null;
+function saveState(){ clearTimeout(saveTimer); saveTimer=setTimeout(()=>{ try{
+  lsSet(LS_STATE,{slKey,transientTitle,idx,name:currentName(),patch:currentPatch(),volume:state.volume}); }catch(e){} },350); }
+function restoreState(){
+  const st=lsGet(LS_STATE,null); if(!st||!st.patch) return false;
+  try{
+    if(st.volume!=null) state.volume=st.volume;
+    savedLists=lsGet(LS_SETLISTS,[]); let sl=null, key=st.slKey;
+    if(key&&key[0]==="b") sl=BUILTIN[+key.slice(1)];
+    else if(key&&key[0]==="s"){ const s=savedLists[+key.slice(1)]; if(s) sl={title:s.title,items:(s.items||[]).map(it=>({...it}))}; }
+    if(sl){ slKey=key; transientTitle=null; setlist=sl; idx=Math.max(0,Math.min(st.idx||0, sl.items.length-1)); }
+    else { slKey=""; transientTitle=st.transientTitle||st.name||"Restored"; setlist={title:transientTitle,items:[{name:st.name||"Track",...patchToSetup(st.patch)}]}; idx=0; }
+    loadSetup(patchToSetup(st.patch));     // active setup carries the user's edits + tempo
+    return true;
+  }catch(e){ return false; }
+}
+
+/* ========================= HASH SHARE-LINK LOADING =========================== */
+function loadFromHash(text){
+  let payload=text, kind=null; const m=text.match(/[#?&](p|sl)=([^&\s]+)/);
+  if(m){ kind=m[1]; payload=m[2]; } try{ payload=decodeURIComponent(payload); }catch(e){}
+  try{
+    if(kind==="sl" || (kind!=="p" && !/[;:]/.test(payload))){ const sl=codeToSetlist(payload); if(!sl.items.length) throw 0;
+      slKey=""; transientTitle=sl.title||"Shared set list"; loadSetlistObj(sl); return true; }
+    const setup=patchToSetup(payload); if(!setup.lanes.length) throw 0;
+    slKey=""; transientTitle="Shared patch"; loadSetlistObj({title:"Shared patch",items:[{name:"Patch",...setup}]}); return true;
+  }catch(e){ return false; }
+}
+
+/* ========================= HELP TOUR ========================================= */
+const TOUR=[
+  {sel:"#brandrow,#volrow", title:"Controls", text:"The ↑ share menu, ? to replay this tour, ◐ light/dark theme, ⛶ full screen, and the full-width volume slider (soft p → loud f)."},
+  {sel:"#pulse", title:"Tempo", text:"Tap the BPM to tap-tempo, press-and-hold to type an exact value, the TAP button to tap it out, or drag the wheel up/down to scrub."},
+  {sel:".sels", title:"Pick what to play", text:"Choose a set list and the track within it. Tracks are your practice items — name them for whatever you're working on, even if two share the same beat."},
+  {sel:"#saveBtn", title:"Save & library", text:"Save the current track — “Save as new”, or “Update” one of yours. The same sheet is your library: make set lists and rename / reorder / delete tracks. It all lives with the full editor too."},
+  {sel:"#trackpanel", title:"Track settings", text:"Optional per-track extras: Repeat for N bars then stop / next / prev track, a tempo ramp, and practice gaps."},
+  {sel:"#lanes", title:"Edit the beat", text:"Each lane is a row of pads that blink on the beat — tap a pad to cycle rest → beat → accent → ghost. The speaker button at the left of each lane mutes/unmutes it. Tap a lane's label to set its note value (eighths, triplets, sixteenths…), sound, grouping or polymeter. “+ Add lane” for more."},
+  {sel:"#bDn10,#bDown,#bUp,#bUp10", title:"Nudge the tempo", text:"Step the BPM up or down while it keeps playing: −10 / −1 / +1 / +10. Great for settling on a comfortable speed or pushing it faster as you improve."},
+  {sel:"#bPrev,#bNext", title:"Previous / next track", text:"⏮ and ⏭ move to the previous or next track in the current set list. If the metronome is running it carries straight on into the new track."},
+  {sel:"#bPrac", title:"Practice = a timed session", text:"Play just runs the metronome. Practice times your playing and logs it (not audio): it starts a session clock and Play becomes Stop — start/pause each track, then Stop to save the session."},
+  {sel:"#bJournal", title:"Practice journal", text:"Opens your saved practice sessions — notes and a per-track breakdown across days. While Practice is recording, this shows the live session timer."},
+];
+let tstep=0;
+function startTour(){ tstep=0; $("tour").classList.add("open"); showTour(); }
+function endTour(){ $("tour").classList.remove("open"); lsSet(LS_TOURED,1); }
+function showTour(){
+  while(tstep<TOUR.length && !document.querySelector(TOUR[tstep].sel)) tstep++;
+  if(tstep>=TOUR.length){ endTour(); return; }
+  const s=TOUR[tstep], pad=6, hole=$("tourHole");
+  // sel may match several elements (e.g. a row of buttons) — highlight their union
+  let r=null; document.querySelectorAll(s.sel).forEach(el=>{ const b=el.getBoundingClientRect();
+    r = r ? {left:Math.min(r.left,b.left),top:Math.min(r.top,b.top),right:Math.max(r.right,b.right),bottom:Math.max(r.bottom,b.bottom)} : {left:b.left,top:b.top,right:b.right,bottom:b.bottom}; });
+  r.width=r.right-r.left; r.height=r.bottom-r.top;
+  hole.style.left=(r.left-pad)+"px"; hole.style.top=(r.top-pad)+"px"; hole.style.width=(r.width+2*pad)+"px"; hole.style.height=(r.height+2*pad)+"px";
+  $("tourTitle").textContent=s.title; $("tourText").textContent=s.text; $("tourDots").textContent=(tstep+1)+" / "+TOUR.length;
+  $("tourPrev").style.visibility=tstep?"visible":"hidden"; $("tourNext").textContent=(tstep===TOUR.length-1)?"Done":"Next";
+  const box=$("tourBox"), bw=Math.min(290, innerWidth-24); box.style.width=bw+"px"; box.style.left="0px"; box.style.top="-9999px";
+  const bh=box.offsetHeight;
+  const left=Math.max(12, Math.min(r.left, innerWidth-bw-12));
+  const top=(r.bottom+12+bh < innerHeight) ? r.bottom+12 : Math.max(12, r.top-12-bh);
+  box.style.left=left+"px"; box.style.top=top+"px";
+}
+$("tourNext").onclick=()=>{ if(tstep>=TOUR.length-1) endTour(); else { tstep++; showTour(); } };
+$("tourPrev").onclick=()=>{ if(tstep>0){ tstep--; showTour(); } };
+$("tourSkip").onclick=endTour;
+$("helpBtn").onclick=startTour;
+addEventListener("resize",()=>{ if($("tour").classList.contains("open")) showTour(); });
+
+/* ========================= WIRING ============================================ */
+$("bPlay").onclick=play; $("bPrac").onclick=practice;
+$("bPrev").onclick=()=>gotoItem(idx-1,state.running); $("bNext").onclick=()=>gotoItem(idx+1,state.running);
+$("bUp").onclick=()=>nudge(+1);  $("bDown").onclick=()=>nudge(-1);
+$("bUp10").onclick=()=>nudge(+10); $("bDn10").onclick=()=>nudge(-10);
+$("vol").oninput=(e)=>{ state.volume=(+e.target.value)/100; if(masterGain) masterGain.gain.value=state.volume; saveState(); };
+$("bJournal").addEventListener("click",()=>{ if(!sessionActive) location.href="/mobile-sessions.html"; });   // mid-session: just shows the live timer
+
+/*@BUILD:include:src/chrome.js@*/
+
+/* ========================= FULLSCREEN + WAKE LOCK ============================ */
+const docEl=document.documentElement;
+const reqFS=docEl.requestFullscreen||docEl.webkitRequestFullscreen, exitFS=document.exitFullscreen||document.webkitExitFullscreen;
+const fsEl=()=>document.fullscreenElement||document.webkitFullscreenElement;
+let wakeLock=null;
+async function requestWake(){ try{ if(navigator.wakeLock) wakeLock=await navigator.wakeLock.request("screen"); }catch(e){} }
+function releaseWake(){ try{ wakeLock&&wakeLock.release(); }catch(e){} wakeLock=null; }
+function toggleFS(){ if(fsEl()){ if(exitFS) try{ exitFS.call(document); }catch(e){} } else if(reqFS){ try{ reqFS.call(docEl); }catch(e){} } }
+$("fsBtn").onclick=toggleFS;
+if(window.EMBED) $("fsBtn").style.display="none";
+document.addEventListener("visibilitychange",()=>{ if(document.visibilityState==="visible"&&state.running) requestWake(); });
+
+/* PWA */
+let deferredPrompt=null;
+addEventListener("beforeinstallprompt",(e)=>{ e.preventDefault(); deferredPrompt=e; });
+if(!window.EMBED && "serviceWorker" in navigator){ addEventListener("load",()=>{ navigator.serviceWorker.register("/mobile-sw.js").catch(()=>{}); }); }
+addEventListener("beforeunload",(e)=>{ if(sessionActive){ e.preventDefault(); e.returnValue=""; } });
+
+/* keyboard (desktop testing) */
+addEventListener("keydown",(e)=>{ const tag=(e.target&&e.target.tagName)||""; if(tag==="INPUT"||tag==="TEXTAREA"||tag==="SELECT") return;
+  const k=e.key;
+  if(k===" "||e.code==="Space"){ e.preventDefault(); play(); }
+  else if(k==="p"||k==="P"){ e.preventDefault(); practice(); }
+  else if(k==="ArrowRight"){ e.preventDefault(); gotoItem(idx+1,state.running); }
+  else if(k==="ArrowLeft"){ e.preventDefault(); gotoItem(idx-1,state.running); }
+  else if(k==="ArrowUp"){ e.preventDefault(); nudge(e.shiftKey?10:1); }
+  else if(k==="ArrowDown"){ e.preventDefault(); nudge(e.shiftKey?-10:-1); }
+  else if(k==="f"||k==="F") toggleFS();
+});
+
+/* ========================= INIT ============================================== */
+if(location.hash && /(p|sl)=/.test(location.hash)) loadFromHash(location.hash);
+else restoreState();
+if(!setlist){ slKey="b0"; setlist=BUILTIN[0]; idx=0; loadSetup(setlist.items[0]); }
+buildSetlistOptions(); buildTrackOptions();
+$("vol").value=Math.round(state.volume*100); if(masterGain) masterGain.gain.value=state.volume;
+renderAll(); renderSessionBar();
+requestAnimationFrame(draw);
+if(!window.EMBED && !lsGet(LS_TOURED,0)) setTimeout(()=>{ if(!$("tour").classList.contains("open")) startTour(); }, 700);
+</script>
+</body>
+</html>

player.html

@@ -1,470 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>VARASYS PM‑1 — hardware player (mockup)</title>
-<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiByeD0iNyIgZmlsbD0iIzFDMjgzRiIvPjxwYXRoIGQ9Ik0xMiA2aDhsNCAyMUg4eiIgZmlsbD0iIzBBQjNGNyIvPjxwYXRoIGQ9Ik0xNiAyNEwxOS42IDkiIHN0cm9rZT0iIzFDMjgzRiIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSIvPjxyZWN0IHg9IjE2LjQiIHk9IjEzLjIiIHdpZHRoPSI0LjQiIGhlaWdodD0iMi44IiByeD0iMC42IiB0cmFuc2Zvcm09InJvdGF0ZSgtMTMgMTguNiAxNC42KSIgZmlsbD0iIzFDMjgzRiIvPjwvc3ZnPgo=">
-<!--
-  Hardware-device MOCKUP / simulator for the Pi Pico (RP2040) build of the
-  Stackable Metronome. The physical unit can't show the multi-lane editor or
-  manage set lists — it just *plays* a configuration expressed in the share
-  language. So this page is the device front panel: load a patch or set-list
-  (paste one, open a #p=/#sl= link, or pick a saved one) and it plays it,
-  driving the OLED + beat LEDs exactly as the firmware would.
-
-  Audio here is the synthesized voice set (the firmware uses the same scheduler;
-  on hardware the voices map to CC0 samples on the I2S DAC). One file, no deps.
--->
-<style>
-  :root{
-    --case:#1b1f27; --case2:#11141a; --edge:#0b0d11; --bezel:#0a0c10;
-    --txt:#c7d0db; --muted:#7f8b9a; --cyan:#0AB3F7; --amber:#ffd166;
-    --screen:#04140f; --phos:#34e0a0; --phos-dim:#1f6e54; --led-off:#1b2a23;
-  }
-  *{box-sizing:border-box}
-  body{
-    margin:0; min-height:100vh; padding:28px 16px 48px;
-    background:radial-gradient(circle at 50% -8%, #20242c, #0c0e12);
-    color:var(--txt); font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
-    -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; align-items:center; gap:20px;
-  }
-  a{color:#6cb6ff}
-  .topbar{width:100%; max-width:560px; display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted)}
-  .topbar b{color:var(--txt)}
-
-  /* ---- the device ---- */
-  .device{
-    width:100%; max-width:560px; position:relative;
-    background:linear-gradient(180deg,var(--case),var(--case2));
-    border:1px solid #2a313c; border-radius:22px; padding:22px 22px 26px;
-    box-shadow:0 26px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05), inset 0 -2px 8px rgba(0,0,0,.6);
-  }
-  .device::before, .device::after,
-  .device .screw{ content:""; position:absolute; width:9px; height:9px; border-radius:50%;
-    background:radial-gradient(circle at 35% 30%, #5a626e, #20252d 70%); box-shadow:inset 0 0 2px #000; }
-  .device::before{ top:11px; left:11px } .device::after{ top:11px; right:11px }
-  .screw.bl{ bottom:11px; left:11px } .screw.br{ bottom:11px; right:11px }
-
-  .brandrow{ display:flex; align-items:center; justify-content:space-between; margin:2px 6px 16px; }
-  .logo{ display:flex; align-items:baseline; gap:9px }
-  .logo .vk{ font-weight:800; letter-spacing:.22em; color:#fff; font-size:17px;
-    background:var(--cyan); padding:2px 8px; border-radius:4px; box-shadow:0 0 10px rgba(10,179,247,.5) }
-  .logo .model{ color:var(--muted); font-size:12px; letter-spacing:.04em }
-  .pwr{ display:flex; align-items:center; gap:7px; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em }
-  .pwr .dot{ width:8px; height:8px; border-radius:50%; background:#2fe07a; box-shadow:0 0 8px #2fe07a }
-
-  /* ---- OLED ---- */
-  .screen{
-    background:linear-gradient(180deg,#06181244,var(--screen)); border:2px solid var(--bezel);
-    border-radius:10px; padding:14px 16px; margin:0 4px;
-    box-shadow:inset 0 0 24px rgba(0,0,0,.8), inset 0 0 6px rgba(52,224,160,.12), 0 1px 0 rgba(255,255,255,.04);
-    font-family:"Courier New",ui-monospace,monospace; color:var(--phos);
-    text-shadow:0 0 6px rgba(52,224,160,.55); position:relative; overflow:hidden;
-  }
-  .screen::after{ content:""; position:absolute; inset:0; pointer-events:none;
-    background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); opacity:.5 }
-  .scr-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:var(--phos-dim) }
-  .scr-top .pos{ letter-spacing:.06em }
-  .scr-top .tempo{ color:var(--phos); font-size:16px }
-  .scr-top .tempo b{ font-size:22px; font-weight:700 }
-  .scr-name{ font-size:20px; margin:7px 0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
-  .scr-bot{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:var(--phos-dim) }
-  .scr-bot .st{ color:var(--phos) }
-  .scr-bot .st.stopped{ color:var(--phos-dim) }
-  .scr-bot .bars{ color:var(--amber); text-shadow:0 0 6px rgba(255,209,102,.5) }
-
-  /* ---- beat LEDs ---- */
-  .leds{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:16px 4px 6px; min-height:18px }
-  .led{ width:16px; height:16px; border-radius:50%; background:var(--led-off);
-    border:1px solid #000; box-shadow:inset 0 1px 2px rgba(0,0,0,.7); transition:background .04s, box-shadow .04s }
-  .led.group{ outline:1px solid #3a4754; outline-offset:2px }
-  .led.on{ background:var(--cyan); box-shadow:0 0 10px var(--cyan), 0 0 4px #fff inset }
-  .led.on.group{ background:var(--amber); box-shadow:0 0 12px var(--amber), 0 0 4px #fff inset }
-
-  /* ---- controls ---- */
-  .controls{ display:flex; align-items:center; justify-content:center; gap:12px; margin:14px 4px 4px; flex-wrap:wrap }
-  .btn{ background:linear-gradient(180deg,#2b323d,#1b212a); color:var(--txt); border:1px solid #39424f;
-    border-radius:11px; padding:12px 14px; font-size:15px; cursor:pointer; min-width:48px;
-    box-shadow:0 3px 0 #0c0f14, inset 0 1px 0 rgba(255,255,255,.06); user-select:none; transition:transform .04s, box-shadow .04s }
-  .btn:active{ transform:translateY(2px); box-shadow:0 1px 0 #0c0f14, inset 0 1px 0 rgba(255,255,255,.06) }
-  .btn small{ display:block; font-size:9px; color:var(--muted); letter-spacing:.08em; margin-top:2px }
-  .btn.play{ min-width:74px; font-size:20px; background:linear-gradient(180deg,#1f7a4d,#155f3b); border-color:#2e7d32; color:#eafff3 }
-  .btn.play.on{ background:linear-gradient(180deg,#b23b3b,#8f2d2d); border-color:#c0392b }
-  .knob{ width:52px; height:52px; border-radius:50%; background:radial-gradient(circle at 38% 32%,#3a424e,#171b22 72%);
-    border:1px solid #444c58; box-shadow:0 3px 8px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.08); position:relative; margin-left:4px }
-  .knob::after{ content:""; position:absolute; left:50%; top:6px; width:2px; height:13px; background:var(--cyan);
-    border-radius:2px; transform-origin:50% 20px; transform:rotate(var(--a,0deg)); box-shadow:0 0 5px var(--cyan) }
-  .knob-wrap{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:9px; color:var(--muted); letter-spacing:.1em }
-
-  /* ---- speaker grille ---- */
-  .grille{ height:14px; margin:18px 6px 2px; border-radius:6px;
-    background:radial-gradient(circle, #000 1.1px, transparent 1.4px) 0 0/9px 9px; opacity:.5 }
-
-  /* ---- load panel ---- */
-  .panel{ width:100%; max-width:560px; background:#171b22; border:1px solid #2a313c; border-radius:14px; padding:16px }
-  .panel h2{ margin:0 0 4px; font-size:15px }
-  .panel p.sub{ margin:0 0 12px; font-size:12px; color:var(--muted); line-height:1.45 }
-  .panel label{ font-size:12px; color:var(--muted); display:block; margin:10px 0 5px }
-  textarea{ width:100%; background:#0e1116; color:var(--txt); border:1px solid var(--edge); border-radius:9px;
-    padding:10px; font-family:"Courier New",monospace; font-size:12px; resize:vertical; min-height:58px }
-  select, .ld{ background:#0e1116; color:var(--txt); border:1px solid #39424f; border-radius:9px; padding:8px 10px; font-size:13px }
-  .ld{ cursor:pointer; background:linear-gradient(180deg,#2b323d,#1b212a) }
-  .row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px }
-  .status{ margin-top:10px; font-size:12px; min-height:1.2em; font-family:"Courier New",monospace }
-  .status.ok{ color:#5fd08a } .status.err{ color:#ff7a7a }
-  .hint{ font-size:11px; color:var(--muted) }
-  code{ background:#0e1116; border:1px solid var(--edge); border-radius:4px; padding:1px 5px; font-size:11px }
-</style>
-</head>
-<body>
-
-<div class="topbar">
-  <span><b>VARASYS PM‑1</b> · hardware player (mockup)</span>
-  <a href="/index.html">Open editor ↗</a>
-</div>
-
-<!-- ===================== THE DEVICE ===================== -->
-<div class="device">
-  <span class="screw bl"></span><span class="screw br"></span>
-
-  <div class="brandrow">
-    <div class="logo"><span class="vk">VARASYS</span><span class="model">PM‑1 · Polymeter Player</span></div>
-    <div class="pwr"><span class="dot"></span>PWR</div>
-  </div>
-
-  <div class="screen">
-    <div class="scr-top"><span class="pos" id="sPos">–/–</span><span class="tempo">♩=<b id="sBpm">120</b></span></div>
-    <div class="scr-name" id="sName">—</div>
-    <div class="scr-bot"><span class="st stopped" id="sState">⏸ STOP</span><span id="sBar">bar — · beat —</span><span class="bars" id="sBars"></span></div>
-  </div>
-
-  <div class="leds" id="leds"></div>
-
-  <div class="controls">
-    <button class="btn" id="bPrev" title="previous item">⏮<small>PREV</small></button>
-    <button class="btn" id="bDown" title="tempo −">−<small>TEMPO</small></button>
-    <button class="btn play" id="bPlay" title="play / stop (Space)">▶<small>&nbsp;</small></button>
-    <button class="btn" id="bUp" title="tempo +">+<small>TEMPO</small></button>
-    <button class="btn" id="bNext" title="next item">⏭<small>NEXT</small></button>
-    <button class="btn" id="bTap" title="tap tempo (T)">TAP<small>&nbsp;</small></button>
-    <div class="knob-wrap"><div class="knob" id="knob"></div>TEMPO</div>
-  </div>
-
-  <div class="grille"></div>
-</div>
-
-<!-- ===================== LOAD CONFIG ===================== -->
-<div class="panel">
-  <h2>Load a configuration onto the device</h2>
-  <p class="sub">On the real unit you'd transfer this over USB / WiFi. Here, paste a <b>patch</b>
-    (e.g. <code>v1;t120;kick:4;snare:4=.X.X;hatClosed:4/2</code>), a <b>set‑list code</b>, or a full
-    <code>#p=…</code>/<code>#sl=…</code> share link — it's validated before loading.</p>
-
-  <label for="cfg">Patch / set‑list code / share link</label>
-  <textarea id="cfg" spellcheck="false" placeholder="v1;t120;kick:4;snare:4=.X.X;hatClosed:4/2/&#10;…or a #sl=… link / base64 set-list code"></textarea>
-  <div class="row">
-    <button class="ld" id="bLoad">Load onto device</button>
-    <span class="hint">or pick a set list you saved in the editor:</span>
-    <select id="storedSel"><option value="">— your saved set lists —</option></select>
-  </div>
-  <div class="status" id="status"></div>
-</div>
-
-<script>
-const APP_VERSION = "v0.0.1-dev";
-const $ = (id) => document.getElementById(id);
-
-/* ========================= ENGINE (mirrors index.html; synth voices only) ===== */
-let audioCtx=null, masterGain=null, noiseBuf=null, schedulerTimer=null;
-const LOOKAHEAD_MS=25, SCHEDULE_AHEAD=0.12;
-const state={ bpm:120, volume:0.85, running:false };
-let meters=[];
-let ramp={on:false,startBpm:80,amount:5,everyBars:4}, trainer={on:false,playBars:2,muteBars:2};
-let segBars=0, segBarCount=0, pendingAdvance=false;
-let masterBeat=0, masterBeatTime=0, muteWindows=[];
-
-function parseGroups(str){
-  const parts=String(str).split(/[^0-9]+/).map(s=>parseInt(s,10)).filter(n=>n>=1&&n<=12);
-  let total=0; const groups=[];
-  for(const p of parts){ if(total+p>12) break; groups.push(p); total+=p; }
-  if(!groups.length) groups.push(4);
-  const beatsPerBar=groups.reduce((a,b)=>a+b,0);
-  const groupStarts=new Set(); let acc=0;
-  for(const g of groups){ groupStarts.add(acc); acc+=g; }
-  return {groups,beatsPerBar,groupStarts};
-}
-function ensureAudio(){
-  if(audioCtx) return;
-  audioCtx=new (window.AudioContext||window.webkitAudioContext)();
-  masterGain=audioCtx.createGain(); masterGain.gain.value=state.volume; masterGain.connect(audioCtx.destination);
-}
-function getNoise(){
-  if(!noiseBuf){ const n=Math.floor(audioCtx.sampleRate*1.0); noiseBuf=audioCtx.createBuffer(1,n,audioCtx.sampleRate);
-    const d=noiseBuf.getChannelData(0); for(let i=0;i<n;i++) d[i]=Math.random()*2-1; }
-  return noiseBuf;
-}
-function ampEnv(time,peak,dur,attack){ const g=audioCtx.createGain(); peak=Math.max(0.0003,peak);
-  g.gain.setValueAtTime(0.0001,time); g.gain.exponentialRampToValueAtTime(peak,time+(attack||0.001));
-  g.gain.exponentialRampToValueAtTime(0.0001,time+dur); return g; }
-function tone(time,type,f0,f1,dur){ const o=audioCtx.createOscillator(); o.type=type; o.frequency.setValueAtTime(f0,time);
-  if(f1&&f1!==f0) o.frequency.exponentialRampToValueAtTime(Math.max(1,f1),time+Math.min(dur,0.09)); o.start(time); o.stop(time+dur+0.02); return o; }
-function noiseSrc(time,dur){ const s=audioCtx.createBufferSource(); s.buffer=getNoise(); s.start(time); s.stop(time+dur+0.02); return s; }
-function filt(type,freq,q){ const f=audioCtx.createBiquadFilter(); f.type=type; f.frequency.value=freq; if(q) f.Q.value=q; return f; }
-function v_tone(time,level,type,f0,f1,dur,peak){ const o=tone(time,type,f0,f1,dur),g=ampEnv(time,peak*level,dur,0.002); o.connect(g); g.connect(masterGain); }
-function v_noise(time,level,fType,freq,q,dur,peak,attack){ const n=noiseSrc(time,dur),f=filt(fType,freq,q),g=ampEnv(time,peak*level,dur,attack); n.connect(f); f.connect(g); g.connect(masterGain); }
-function metalHat(time,level,dur,hpFreq,peak){ const fund=40,ratios=[2,3,4.16,5.43,6.79,8.21];
-  const bp=filt("bandpass",10000,0.8),hp=filt("highpass",hpFreq,0),g=ampEnv(time,peak*level,dur,0.001);
-  ratios.forEach(r=>{const o=audioCtx.createOscillator();o.type="square";o.frequency.value=fund*r;o.start(time);o.stop(time+dur+0.02);o.connect(bp);});
-  bp.connect(hp); hp.connect(g); g.connect(masterGain); }
-const DRUMS={
-  beep:(t,l)=>v_tone(t,l,"square",l>=1?1600:1100,0,0.04,0.5),
-  kick:(t,l)=>v_tone(t,l,"sine",150,50,0.18,1.0),
-  snare:(t,l)=>{v_tone(t,l,"triangle",190,140,0.12,0.45);v_noise(t,l,"highpass",1500,0,0.2,0.8);},
-  rim:(t,l)=>{const o=tone(t,"square",1700,0,0.04),bp=filt("bandpass",1700,4),g=ampEnv(t,0.6*l,0.04);o.connect(bp);bp.connect(g);g.connect(masterGain);},
-  clap:(t,l)=>{const bp=filt("bandpass",1200,1.4);bp.connect(masterGain);[0,0.012,0.024].forEach((d,i)=>{const n=noiseSrc(t+d,0.05),e=ampEnv(t+d,(i<2?0.5:0.85)*l,0.06);n.connect(e);e.connect(bp);});},
-  hatClosed:(t,l)=>v_noise(t,l,"highpass",7000,0,0.045,0.5),
-  hatOpen:(t,l)=>v_noise(t,l,"highpass",7000,0,0.32,0.45,0.002),
-  ride:(t,l)=>{v_noise(t,l,"bandpass",6000,0.8,0.4,0.32,0.002);v_tone(t,l,"square",5200,0,0.1,0.13);},
-  crash:(t,l)=>v_noise(t,l,"highpass",4000,0,0.8,0.5,0.002),
-  tomLow:(t,l)=>v_tone(t,l,"sine",150,100,0.25,0.9),
-  tomMid:(t,l)=>v_tone(t,l,"sine",220,150,0.23,0.9),
-  tomHigh:(t,l)=>v_tone(t,l,"sine",300,210,0.20,0.9),
-  tambourine:(t,l)=>v_noise(t,l,"highpass",8000,0,0.12,0.5),
-  cowbell:(t,l)=>{const sum=audioCtx.createGain(),bp=filt("bandpass",2640,1.2),g=ampEnv(t,0.8*l,0.3);[540,800].forEach(f=>tone(t,"square",f,0,0.3).connect(sum));sum.connect(bp);bp.connect(g);g.connect(masterGain);},
-  woodblock:(t,l)=>v_tone(t,l,"triangle",1800,1500,0.06,0.8),
-  claves:(t,l)=>v_tone(t,l,"sine",2500,0,0.045,0.85),
-  jamblock:(t,l)=>{const o=tone(t,"square",2600,2000,0.045),bp=filt("bandpass",2000,6),g=ampEnv(t,0.8*l,0.045);o.connect(bp);bp.connect(g);g.connect(masterGain);},
-  kick808:(t,l)=>{v_tone(t,l,"sine",120,45,0.7,1.0);v_noise(t,l*0.5,"highpass",2000,0,0.008,0.4,0.001);},
-  snare808:(t,l)=>{v_tone(t,l,"triangle",178,168,0.16,0.4);v_tone(t,l,"triangle",331,320,0.12,0.18);v_noise(t,l,"highpass",1000,0,0.16,0.7);},
-  clap808:(t,l)=>{const bp=filt("bandpass",1100,1.3);bp.connect(masterGain);[0,0.01,0.02,0.032].forEach((d,i)=>{const n=noiseSrc(t+d,0.05),e=ampEnv(t+d,(i<3?0.5:0.85)*l,0.05);n.connect(e);e.connect(bp);});},
-  hat808:(t,l)=>metalHat(t,l,0.045,7000,0.4),
-  openHat808:(t,l)=>metalHat(t,l,0.34,7000,0.38),
-  cowbell808:(t,l)=>{const sum=audioCtx.createGain(),bp=filt("bandpass",2640,1.2),g=ampEnv(t,0.8*l,0.3);[540,800].forEach(f=>tone(t,"square",f,0,0.3).connect(sum));sum.connect(bp);bp.connect(g);g.connect(masterGain);},
-  tom808:(t,l)=>v_tone(t,l,"sine",120,78,0.34,0.9),
-  kick909:(t,l)=>{v_tone(t,l,"sine",110,46,0.26,1.0);v_tone(t,l,"triangle",280,60,0.035,0.5);v_noise(t,l*0.6,"highpass",3000,0,0.01,0.5,0.001);},
-  snare909:(t,l)=>{v_tone(t,l,"triangle",190,162,0.09,0.28);v_noise(t,l,"highpass",1200,0,0.2,0.85);},
-  clap909:(t,l)=>{const bp=filt("bandpass",1000,1.0);bp.connect(masterGain);[0,0.009,0.018].forEach(d=>{const n=noiseSrc(t+d,0.05),e=ampEnv(t+d,0.6*l,0.05);n.connect(e);e.connect(bp);});const tail=noiseSrc(t+0.018,0.2),te=ampEnv(t+0.018,0.35*l,0.2,0.001);tail.connect(te);te.connect(bp);},
-  hat909:(t,l)=>metalHat(t,l,0.05,9000,0.4),
-  ride909:(t,l)=>{metalHat(t,l,0.5,6000,0.3);v_noise(t,l,"bandpass",7000,0.7,0.18,0.18,0.002);},
-  crash909:(t,l)=>{metalHat(t,l,0.9,5000,0.34);v_noise(t,l,"highpass",4000,0,0.9,0.4,0.002);},
-};
-function playInstrument(type,time,level){ (DRUMS[type]||DRUMS.beep)(time,level); }
-
-function masterBeatsPerBar(){ return meters.length ? meters[0].beatsPerBar : 4; }
-function setBpm(v){ state.bpm=Math.max(30,Math.min(300,Math.round(v))); }
-function isMutedAt(t){ return muteWindows.some(w=>t>=w.start&&t<w.end); }
-function advanceMaster(ahead){
-  const mbpb=masterBeatsPerBar();
-  while(masterBeatTime<ahead){
-    if(masterBeat%mbpb===0){
-      const barIndex=Math.floor(masterBeat/mbpb);
-      if(barIndex>0&&ramp.on&&(barIndex%ramp.everyBars===0)) setBpm(state.bpm+ramp.amount);
-      if(trainer.on){ const cyc=trainer.playBars+trainer.muteBars; if(cyc>0&&(barIndex%cyc)>=trainer.playBars) muteWindows.push({start:masterBeatTime,end:masterBeatTime+mbpb*(60/state.bpm)}); }
-      segBarCount=barIndex;
-      if(segBars>0&&barIndex>=segBars&&!pendingAdvance){ pendingAdvance=true; }   // bar-count → auto-advance (player always continues)
-    }
-    masterBeat++; masterBeatTime+=60/state.bpm;
-  }
-  if(audioCtx) muteWindows=muteWindows.filter(w=>w.end>audioCtx.currentTime-1);
-}
-function scheduleMeterTick(m,time){
-  const spb=m.stepsPerBeat, barLen=m.beatsPerBar*spb, tickInBar=((m.tick%barLen)+barLen)%barLen;
-  m.vq.push({time,step:tickInBar,bar:Math.floor(m.tick/barLen)});
-  if(!m.enabled||isMutedAt(time)) return;
-  const lvl=m.beatsOn[tickInBar]|0; if(!lvl) return;
-  playInstrument(m.sound,time,lvl===2?1.0:lvl===3?0.25:0.6);
-}
-function refBarDur(){ return (meters.length?meters[0].beatsPerBar:4)*(60/state.bpm); }
-const SWING_RATIO=2/3;
-function laneStepDur(m,tick){
-  if(m.poly) return refBarDur()/(m.beatsPerBar*m.stepsPerBeat);
-  const beat=60/state.bpm;
-  if(m.swing&&m.stepsPerBeat%2===0){ const pairDur=beat/(m.stepsPerBeat/2); return ((tick%m.stepsPerBeat)%2)===0?SWING_RATIO*pairDur:(1-SWING_RATIO)*pairDur; }
-  return beat/m.stepsPerBeat;
-}
-function scheduler(){
-  const ahead=audioCtx.currentTime+SCHEDULE_AHEAD;
-  advanceMaster(ahead);
-  for(const m of meters){ while(m.nextTime<ahead){ scheduleMeterTick(m,m.nextTime); m.nextTime+=laneStepDur(m,m.tick); m.tick++; } }
-  if(pendingAdvance){ pendingAdvance=false; setTimeout(()=>gotoItem(idx+1,true),0); }   // loops at end (gotoItem wraps)
-}
-
-/* ----- patch / set-list parsing (mirrors index.html) ----- */
-function laneStrToCfg(tok){
-  let poly=false,disabled=false;
-  while(/[~!]$/.test(tok)){ if(tok.endsWith("!")) disabled=true; else poly=true; tok=tok.slice(0,-1); }
-  const ci=tok.indexOf(":"); if(ci<0) return null;
-  let sound=tok.slice(0,ci),rest=tok.slice(ci+1),pattern=null;
-  const eq=rest.indexOf("="); if(eq>=0){ pattern=rest.slice(eq+1); rest=rest.slice(0,eq); }
-  let groupsStr=rest,sub=1,swing=false; const sl=rest.indexOf("/");
-  if(sl>=0){ groupsStr=rest.slice(0,sl); const sp=rest.slice(sl+1); swing=/s$/i.test(sp); sub=parseInt(sp,10)||1; }
-  const bpb=parseGroups(groupsStr).beatsPerBar;
-  const beatsOn=pattern ? pattern.split("").map(ch=>ch==="X"?2:ch==="g"?3:(ch==="x"||ch==="1")?1:0)
-                        : Array.from({length:bpb*sub},(_,i)=>((i%sub)===0?2:1));
-  if(!DRUMS[sound]) sound="beep";
-  return {groupsStr,stepsPerBeat:sub,sound,beatsOn,poly,swing,enabled:!disabled};
-}
-function patchToSetup(str){
-  const s={bpm:120,volume:null,countMs:0,bars:0,lanes:[],trainer:{on:false,playBars:2,muteBars:2},ramp:{on:false,startBpm:80,amount:5,everyBars:4}};
-  for(let tok of String(str).split(";")){
-    tok=tok.trim(); if(!tok||tok==="v1") continue;
-    if(tok.includes(":")){ const c=laneStrToCfg(tok); if(c) s.lanes.push(c); }
-    else if(tok.startsWith("vol")) s.volume=(parseInt(tok.slice(3),10)||0)/100;
-    else if(tok.startsWith("cd")) s.countMs=(parseInt(tok.slice(2),10)||0)*1000;
-    else if(tok.startsWith("b")) s.bars=parseInt(tok.slice(1),10)||0;
-    else if(tok.startsWith("tr")){ const [p,m]=tok.slice(2).split("/"); s.trainer={on:true,playBars:+p||1,muteBars:+m||0}; }
-    else if(tok.startsWith("rmp")){ const [a,b,c]=tok.slice(3).split("/"); s.ramp={on:true,startBpm:+a||80,amount:+b||0,everyBars:+c||1}; }
-    else if(tok.startsWith("t")) s.bpm=parseInt(tok.slice(1),10)||120;
-  }
-  return s;
-}
-function unb64u(s){ s=s.replace(/-/g,"+").replace(/_/g,"/"); return decodeURIComponent(escape(atob(s))); }
-function codeToSetlist(code){
-  const o=JSON.parse(unb64u(code));
-  return { title:o.t||"Shared set list", description:o.d||"", items:(o.i||[]).map(x=>({name:x.n||"Item",...patchToSetup(x.p)})) };
-}
-
-/* ========================= PLAYER ============================================= */
-let setlist=null, idx=0;
-function mkSetlist(title,arr){ return {title, items:arr.map(([n,p])=>({name:n,...patchToSetup(p)}))}; }
-const DEMO = mkSetlist("Demo song", [
-  ["Intro",       "t96;b8;kick:4=X.x.;hatClosed:4/2=gggggggg"],
-  ["Backbeat",    "t96;b12;kick:4=X.x.;snare:4=.X.X;hatClosed:4/2"],
-  ["Build ↑",     "t96;b12;rmp96/4/2;kick:4;snare:4=.X.X;hatClosed:4/2"],
-  ["909 floor",   "t124;b16;kick909:4;clap909:4=.X.X;hat909:4/2=.X.X.X.X"],
-]);
-
-function buildMeters(lanes){
-  return (lanes||[]).map(c=>{
-    const p=parseGroups(c.groupsStr);
-    return {groupsStr:c.groupsStr,groups:p.groups,beatsPerBar:p.beatsPerBar,groupStarts:p.groupStarts,
-      stepsPerBeat:c.stepsPerBeat||1,sound:c.sound,beatsOn:(c.beatsOn||[]).slice(),poly:!!c.poly,swing:!!c.swing,enabled:c.enabled!==false,
-      tick:0,nextTime:0,vq:[],vqPtr:0,currentStep:-1,currentBar:0};
-  });
-}
-function loadSetup(s){
-  ramp=s.ramp?{...s.ramp}:{on:false,startBpm:80,amount:5,everyBars:4};
-  trainer=s.trainer?{...s.trainer}:{on:false,playBars:2,muteBars:2};
-  segBars=s.bars||0; segBarCount=0;
-  setBpm(s.bpm||120);
-  meters=buildMeters(s.lanes);
-  rebuildLeds();
-}
-function startAudio(){
-  ensureAudio(); audioCtx.resume(); state.running=true;
-  if(ramp.on) setBpm(ramp.startBpm);
-  const t0=audioCtx.currentTime+0.08;
-  for(const m of meters){ m.tick=0; m.nextTime=t0; m.vq=[]; m.vqPtr=0; m.currentStep=-1; m.currentBar=0; }
-  masterBeat=0; masterBeatTime=t0; muteWindows=[]; pendingAdvance=false;
-  schedulerTimer=setInterval(scheduler,LOOKAHEAD_MS); scheduler(); renderAll();
-}
-function stopAudio(){ state.running=false; clearInterval(schedulerTimer); schedulerTimer=null; pendingAdvance=false; for(const m of meters) m.currentStep=-1; renderAll(); }
-function toggle(){ state.running?stopAudio():startAudio(); }
-function gotoItem(i,keepPlaying){
-  if(!setlist||!setlist.items.length) return;
-  const n=setlist.items.length; idx=((i%n)+n)%n;
-  const wasRunning=state.running||keepPlaying;
-  if(state.running){ clearInterval(schedulerTimer); schedulerTimer=null; state.running=false; }
-  loadSetup(setlist.items[idx]);
-  if(wasRunning) startAudio(); else renderAll();
-}
-function loadSetlistObj(sl){ setlist=sl; idx=0; const wasRunning=state.running; if(wasRunning){clearInterval(schedulerTimer);schedulerTimer=null;state.running=false;} loadSetup(sl.items[0]); if(wasRunning) startAudio(); else renderAll(); }
-
-let taps=[];
-function tapTempo(){ const now=performance.now(); taps=taps.filter(t=>now-t<2000); taps.push(now);
-  if(taps.length>=2){ let s=0; for(let i=1;i<taps.length;i++) s+=taps[i]-taps[i-1]; setBpm(60000/(s/(taps.length-1))); ramp.on=false; renderAll(); } }
-function nudge(d){ ramp.on=false; setBpm(state.bpm+d); renderAll(); }
-
-/* ========================= RENDER ============================================ */
-function rebuildLeds(){
-  const box=$("leds"); box.innerHTML="";
-  const m=meters[0]; const beats=m?m.beatsPerBar:0;
-  for(let i=0;i<beats;i++){ const d=document.createElement("div"); d.className="led"+(m.groupStarts.has(i)?" group":""); box.appendChild(d); }
-}
-function renderLeds(){
-  const m=meters[0]; if(!m) return;
-  const cur=state.running? Math.floor(m.currentStep/m.stepsPerBeat) : -1;
-  const els=$("leds").children;
-  for(let i=0;i<els.length;i++) els[i].classList.toggle("on", i===cur);
-}
-function fmtPos(){ return setlist? (idx+1)+"/"+setlist.items.length : "–/–"; }
-function renderScreen(){
-  $("sPos").textContent="♪ "+fmtPos();
-  $("sBpm").textContent=state.bpm;
-  $("sName").textContent=setlist? (setlist.items[idx].name||"—") : "—";
-  const st=$("sState");
-  st.textContent=state.running?"▶ PLAY":"⏸ STOP"; st.classList.toggle("stopped",!state.running);
-  const m=meters[0];
-  if(state.running&&m){ const beat=Math.floor(m.currentStep/m.stepsPerBeat); $("sBar").textContent="bar "+(m.currentBar+1)+" · beat "+(beat>=0?beat+1:"—"); }
-  else $("sBar").textContent="bar — · beat —";
-  if(segBars>0){ const rem=Math.max(0,segBars-(m?m.currentBar:0)); $("sBars").textContent=(state.running?rem:segBars)+" bars"; }
-  else $("sBars").textContent="";
-  // knob angle ~ tempo (30..300 → -135..135deg)
-  const ang=-135+(Math.max(30,Math.min(300,state.bpm))-30)/270*270; $("knob").style.setProperty("--a",ang+"deg");
-}
-function renderAll(){ renderScreen(); renderLeds(); $("bPlay").textContent=state.running?"■":"▶"; $("bPlay").classList.toggle("on",state.running); }
-function draw(){
-  if(audioCtx&&state.running){ const now=audioCtx.currentTime;
-    for(const m of meters){ while(m.vqPtr<m.vq.length&&m.vq[m.vqPtr].time<=now){ m.currentStep=m.vq[m.vqPtr].step; m.currentBar=m.vq[m.vqPtr].bar; m.vqPtr++; } } }
-  renderScreen(); renderLeds();
-  requestAnimationFrame(draw);
-}
-
-/* ========================= LOAD / VALIDATE =================================== */
-function setStatus(msg,ok){ const s=$("status"); s.textContent=msg; s.className="status "+(ok?"ok":"err"); }
-function loadConfig(text,quiet){
-  text=(text||"").trim(); if(!text){ if(!quiet) setStatus("Paste a patch or set-list code first.",false); return false; }
-  let payload=text, kind=null;
-  const m=text.match(/[#?&](p|sl)=([^&\s]+)/);
-  if(m){ kind=m[1]; payload=m[2]; }
-  try{ payload=decodeURIComponent(payload); }catch(e){}
-  try{
-    if(kind==="sl" || (kind!=="p" && !/[;:]/.test(payload))){
-      const sl=codeToSetlist(payload);
-      if(!sl.items.length) throw new Error("set list has no items");
-      loadSetlistObj(sl);
-      setStatus("✓ Loaded set list “"+sl.title+"” — "+sl.items.length+" item(s).",true); return true;
-    }
-    const setup=patchToSetup(payload);
-    if(!setup.lanes.length) throw new Error("no valid lanes (need e.g. kick:4)");
-    loadSetlistObj({title:"Pasted patch",items:[{name:"Patch",...setup}]});
-    setStatus("✓ Loaded patch — "+setup.lanes.length+" lane(s), "+setup.bpm+" BPM"+(setup.bars?", "+setup.bars+" bars":"")+(setup.ramp.on?", ramp":"")+".",true); return true;
-  }catch(e){ if(!quiet) setStatus("✗ Invalid configuration: "+e.message,false); return false; }
-}
-function loadStored(){
-  let lists=[]; try{ lists=JSON.parse(localStorage.getItem("metronome.setlists")||"[]"); }catch(e){}
-  const sel=$("storedSel"); sel.innerHTML='<option value="">— your saved set lists —</option>';
-  lists.forEach((sl,i)=>{ const o=document.createElement("option"); o.value=i; o.textContent=(sl.title||("Set list "+(i+1)))+" ("+(sl.items?sl.items.length:0)+")"; sel.appendChild(o); });
-  sel._lists=lists;
-}
-
-/* ========================= WIRING ============================================ */
-$("bPlay").onclick=toggle;
-$("bPrev").onclick=()=>gotoItem(idx-1,state.running);
-$("bNext").onclick=()=>gotoItem(idx+1,state.running);
-$("bUp").onclick=()=>nudge(+1); $("bDown").onclick=()=>nudge(-1);
-$("bTap").onclick=tapTempo;
-$("bLoad").onclick=()=>loadConfig($("cfg").value);
-$("storedSel").onchange=(e)=>{ const v=e.target.value; if(v===""){return;} const sl=e.target._lists[+v]; if(!sl) return;
-  loadSetlistObj({title:sl.title,items:(sl.items||[]).map(it=>({...it}))}); setStatus("✓ Loaded saved set list “"+(sl.title||"set list")+"”.",true); };
-addEventListener("keydown",(e)=>{
-  const t=e.target, tag=t?t.tagName:""; if(tag==="TEXTAREA"||tag==="INPUT"||tag==="SELECT") return;
-  const k=e.key;
-  if(k===" "||e.code==="Space"){ e.preventDefault(); toggle(); }
-  else if(k==="ArrowRight"){ e.preventDefault(); gotoItem(idx+1,state.running); }
-  else if(k==="ArrowLeft"){ e.preventDefault(); gotoItem(idx-1,state.running); }
-  else if(k==="ArrowUp"){ e.preventDefault(); nudge(e.shiftKey?10:1); }
-  else if(k==="ArrowDown"){ e.preventDefault(); nudge(e.shiftKey?-10:-1); }
-  else if(k==="t"||k==="T") tapTempo();
-});
-
-/* ========================= INIT ============================================== */
-loadStored();
-if(location.hash && /(p|sl)=/.test(location.hash)) loadConfig(location.hash, true);
-if(!setlist){ setlist=DEMO; idx=0; loadSetup(setlist.items[0]); }
-renderAll();
-requestAnimationFrame(draw);
-</script>
-</body>
-</html>

release.sh

@@ -1,30 +0,0 @@
-#!/usr/bin/env bash
-# Cut a formal release: set VERSION (optional arg) and tag the current commit
-# as v<VERSION>. A clean checkout on that tag makes deploy.sh stamp the formal
-# "X.Y.Z" instead of a dev build.
-#
-#   ./release.sh          # tag v<current VERSION>
-#   ./release.sh 0.1.0    # bump VERSION to 0.1.0, then tag v0.1.0
-#
-# Pushing the tag is left to you:  git push origin "v<VERSION>"
-set -euo pipefail
-cd "$(dirname "${BASH_SOURCE[0]}")"
-
-if [[ $# -ge 1 ]]; then
-  [[ "$1" =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]] || { echo "error: version must be X.Y.Z (got '$1')" >&2; exit 1; }
-  echo "$1" > VERSION
-  git add VERSION
-  git commit -m "Bump version to $1" >/dev/null
-  echo "VERSION -> $1 (committed)"
-fi
-
-VER="$(cat VERSION)"
-[[ -z "$(git status --porcelain)" ]] || { echo "error: working tree dirty — commit before releasing" >&2; exit 1; }
-
-if git rev-parse -q --verify "refs/tags/v$VER" >/dev/null; then
-  echo "error: tag v$VER already exists" >&2; exit 1
-fi
-
-git tag -a "v$VER" -m "Release v$VER"
-echo "tagged v$VER"
-echo "next:  git push origin v$VER   &&   ./deploy.sh   (will now stamp the formal v$VER)"

src/base.css

@@ -0,0 +1,128 @@
+/* Shared base — inlined into BOTH index.html and player.html by build.sh.
+   Box-sizing reset, the VARASYS brand palette, and the common type stack.
+   (Page-specific colours/layout live in each page's own <style>.) */
+* { box-sizing: border-box; }
+:root {
+  --cyan: #0AB3F7;   /* VARASYS brand cyan */
+  --navy: #1C283F;   /* VARASYS brand navy */
+}
+body {
+  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ---- VARASYS brand lockup (the official logo PNGs already bake in the
+   "Simplifying Complexity" tagline — dark variant for dark themes, light for light) ---- */
+.brand { display:inline-flex; align-items:center; flex:0 0 auto; text-decoration:none; }
+.brand-logo { height:34px; width:auto; display:block; }
+.brand-light { display:none; }
+:root[data-theme="light"] .brand-dark  { display:none; }
+:root[data-theme="light"] .brand-light { display:block; }
+/* on-device silkscreen brand (official logo image, tagline included) — used in device brandrows */
+.dev-lock { display:inline-flex; align-items:center; }
+.dev-logo { display:block; width:auto; height:20px; }
+.site-head { width:100%; max-width:980px; margin:0 auto; display:flex; align-items:center;
+  justify-content:space-between; gap:10px 16px; flex-wrap:wrap; }
+.head-left { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
+.page-name { font-size:13px; color:var(--muted,#7f8b9a); letter-spacing:.02em; }
+.page-name b { color:var(--txt,#c7d0db); }
+.site-nav { display:flex; align-items:center; gap:14px; font-size:13px; }
+.site-nav a { color:var(--muted,#7f8b9a); text-decoration:none; }
+.site-nav a:hover { color:var(--txt,#c7d0db); }
+.site-nav a.here { color:var(--cyan); }
+.tbtn { background:transparent; color:var(--muted,#7f8b9a); border:1px solid var(--panel-bd,#2a313c);
+  border-radius:8px; padding:3px 9px; font-size:14px; line-height:1; cursor:pointer; }
+.tbtn:hover { color:var(--txt,#c7d0db); }
+/* embed mode: pages opened with ?embed=1 strip all site chrome (the widget only).
+   The flag is set on <html> in a head pre-paint script (no flash). */
+[data-embed] .site-head, [data-embed] .site-foot { display:none !important; }
+[data-embed] body { padding:10px !important; }
+
+/* ---- bill-of-materials table (info pages) ---- */
+.sub { color:var(--muted,#7f8b9a); font-size:13px; line-height:1.5; }
+.bom { width:100%; border-collapse:collapse; font-size:12px; margin-top:8px; }
+.bom th, .bom td { text-align:left; padding:5px 6px; border-bottom:1px solid var(--panel-bd,#2a313c); vertical-align:top; }
+.bom th { color:var(--muted,#7f8b9a); font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
+.bom th.q, .bom th.c, .bom td.q, .bom td.c { text-align:right; white-space:nowrap; }
+.bom td.q, .bom td.c { color:var(--muted,#7f8b9a); }
+.bom .grp td { color:var(--cyan); font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.07em; padding-top:11px; }
+.bom .part { color:var(--txt,#c7d0db); }
+.bom .part .spec { color:var(--muted,#7f8b9a); font-weight:400; }
+.bom tr.total td { font-weight:700; color:var(--txt,#c7d0db); border-top:2px solid var(--panel-bd,#2a313c); border-bottom:none; padding-top:8px; }
+
+/* ---- shared site footer ---- */
+.site-foot { width:100%; max-width:980px; margin:40px auto 0; font-size:12px; color:var(--muted,#7f8b9a);
+  text-align:center; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
+.site-foot a { color:var(--muted,#7f8b9a); }
+.site-foot a:hover { color:var(--txt,#c7d0db); }
+.site-foot .dot { opacity:.5; }
+
+/* ---- expandable "Spec & BOM" disclosure (merged onto each form-factor page) ---- */
+details.spec { width:100%; max-width:760px; margin:18px auto 0; border:1px solid var(--panel-bd,#2a313c);
+  border-radius:12px; background:var(--panel-bg,#161b22); }
+details.spec > summary { cursor:pointer; padding:13px 16px; font-weight:600; font-size:14px; color:var(--txt,#c7d0db);
+  list-style:none; display:flex; align-items:center; gap:9px; }
+details.spec > summary::-webkit-details-marker { display:none; }
+details.spec > summary::before { content:"▸"; color:var(--muted,#7f8b9a); transition:transform .15s; }
+details.spec[open] > summary::before { transform:rotate(90deg); }
+details.spec .spec-body { padding:2px 16px 16px; }
+[data-embed] details.spec { display:none !important; }
+
+/* ---- per-form-factor page: the description above the expandable spec ---- */
+.about { width:100%; max-width:760px; margin:20px auto 0; color:var(--muted,#7f8b9a); font-size:14px; line-height:1.62; }
+.about h2 { color:var(--txt,#c7d0db); font-size:18px; margin:0 0 4px; }
+.about .ff-tags { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px; }
+.about .ff-tags span { font-size:11px; color:var(--muted,#7f8b9a); border:1px solid var(--panel-bd,#2a313c); border-radius:999px; padding:2px 9px; }
+.about .ff-tags .hw { color:var(--cyan); border-color:rgba(10,179,247,.45); }
+.about p { margin:0 0 10px; max-width:64ch; }
+/* page-only chrome (description, dimensioned views, loading panel) — hidden when embedded */
+[data-embed] .pageonly { display:none !important; }
+
+/* ---- per-form-factor page: visible title + summary (plain view) ---- */
+.ff-title { font-size:20px; margin:6px 0 2px; text-align:center; color:var(--txt,#c7d0db); }
+.ff-sum { max-width:60ch; margin:0 auto; text-align:center; color:var(--muted,#7f8b9a); font-size:13.5px; line-height:1.55; }
+[data-embed] .ff-title, [data-embed] .ff-sum { display:none !important; }
+/* link from the lean device page out to its info page (specs / dimensions / BOM) */
+.ff-link { text-align:center; margin:16px auto 0; font-size:13px; }
+.ff-link a { font-weight:600; }
+
+/* ---- info-<device>.html: the embedded live widget at the top of the spec page ---- */
+.infoview { width:100%; max-width:760px; margin:18px auto 0; border:1px solid var(--panel-bd,#2a313c);
+  border-radius:14px; overflow:hidden; background:var(--field-bg,#0e1116); }
+.iv-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px;
+  border-bottom:1px solid var(--panel-bd,#2a313c); font-size:12px; color:var(--muted,#7f8b9a); }
+.iv-bar b { color:var(--txt,#c7d0db); }
+.infoview iframe { display:block; width:100%; height:440px; border:0; background:var(--field-bg,#0e1116); transition:height .15s; }
+
+/* ---- per-device program I/O box (plain view) ---- */
+.progbox { width:100%; max-width:620px; margin:14px auto 0; display:flex; align-items:center; gap:9px; flex-wrap:wrap;
+  padding:9px 12px; border:1px solid var(--panel-bd,#2a313c); border-radius:11px; background:var(--panel-bg,#161b22); }
+.progbox > label { flex:0 0 auto; font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted,#7f8b9a); }
+.progbox input { flex:1; min-width:160px; background:var(--field-bg,#0e1116); color:var(--txt,#c7d0db);
+  border:1px solid var(--field-bd,#2a313c); border-radius:8px; padding:8px 10px; font-family:"Courier New",monospace; font-size:12.5px; }
+.progbox input.err { border-color:#c0392b; }
+.progbox button { flex:0 0 auto; background:var(--field-bg,#0e1116); color:var(--txt,#c7d0db); border:1px solid var(--field-bd,#2a313c);
+  border-radius:8px; padding:8px 12px; font-size:13px; cursor:pointer; }
+.progbox button.primary { background:linear-gradient(180deg,#34c6ff,var(--cyan)); color:#04121b; border-color:transparent; font-weight:600; }
+.progbox button:hover { border-color:var(--cyan); }
+.progbox-msg { flex:1 1 100%; font-size:11.5px; color:var(--muted,#7f8b9a); min-height:1em; }
+.progbox-msg.ok { color:#5fd08a; } .progbox-msg.bad { color:#ff8a7a; }
+[data-embed] .progbox { display:none !important; }
+
+/* ---- shared dimensioned schematic views (front + top/side with inch dims) ---- */
+.dview { width:100%; max-width:540px; margin:16px auto 0; }
+.dview .cap { text-align:center; font-size:11px; color:var(--muted,#7f8b9a); margin:0 0 8px; }
+.drow { display:flex; align-items:stretch; gap:6px; }
+.dvy { flex:0 0 15px; writing-mode:vertical-rl; transform:rotate(180deg); display:flex; align-items:center; justify-content:center;
+  font-size:9px; color:var(--muted,#7f8b9a); letter-spacing:.03em; white-space:nowrap; border-right:1px solid var(--panel-bd,#2a313c); }
+.dvx { text-align:center; font-size:9px; color:var(--muted,#7f8b9a); letter-spacing:.03em;
+  border-top:1px solid var(--panel-bd,#2a313c); padding-top:3px; margin:3px 0 0 17px; }
+.dschem { flex:1; min-width:0; position:relative; border:1px solid #33363c; border-radius:8px;
+  background:radial-gradient(rgba(255,255,255,.02) .5px, transparent .6px) 0 0/3px 3px, linear-gradient(160deg,#26282d,#15161a);
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px rgba(0,0,0,.4); overflow:hidden; }
+.dschem .scap { position:absolute; left:7px; top:5px; font-size:8px; color:var(--silk,#aab2bc); letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
+.dschem .ctl { position:absolute; border-radius:50%; background:radial-gradient(circle at 38% 32%,#cfd6dd,#6c7480 60%,#3b424c); box-shadow:0 1px 3px rgba(0,0,0,.5); }
+.dschem .scr { position:absolute; border-radius:4px; background:#06080c; box-shadow:inset 0 0 8px rgba(0,0,0,.7); }
+.dschem .jk { position:absolute; width:12px; height:12px; border-radius:50%; border:2px solid #5b6470; background:radial-gradient(circle at 40% 34%,#333a44,#07090c 72%); }
+.dschem .jk.u { width:14px; height:6px; border-radius:3px; }
+.dschem .jl { position:absolute; font-size:7px; color:var(--silk,#aab2bc); letter-spacing:.03em; text-transform:uppercase; opacity:.85; text-align:center; line-height:1.1; }

src/chrome.js

@@ -0,0 +1,22 @@
+/* Shared site chrome — assembled into every page by build.sh.
+   Wires the header theme toggle (system - light - dark, shared "metronome.theme")
+   and stamps the footer version. Expects a global APP_VERSION declared earlier in
+   the page (deploy.sh rewrites that line) and the header/footer markup present. */
+(function () {
+  var byId = function (id) { return document.getElementById(id); };
+  var THEMES = ["system", "light", "dark"];
+  function eff(p) { return p === "system" ? (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark") : p; }
+  function pref() { try { var p = localStorage.getItem("metronome.theme"); return (p === "light" || p === "dark" || p === "system") ? p : "system"; } catch (e) { return "system"; } }
+  function apply(p) {
+    try { localStorage.setItem("metronome.theme", p); } catch (e) {}
+    document.documentElement.dataset.theme = eff(p);
+    var b = byId("themeBtn"); if (b) { b.textContent = p === "system" ? "◐" : p === "light" ? "☀" : "☾"; b.title = "Theme: " + p + " (system → light → dark)"; }
+  }
+  function init() {
+    try { var v = byId("appVersion"); if (v && typeof APP_VERSION !== "undefined") v.textContent = "v" + APP_VERSION.replace(/^v/, ""); } catch (e) {}
+    var btn = byId("themeBtn"); if (btn) btn.onclick = function () { apply(THEMES[(THEMES.indexOf(pref()) + 1) % THEMES.length]); };
+    apply(pref());
+  }
+  try { matchMedia("(prefers-color-scheme: light)").addEventListener("change", function () { if (pref() === "system") apply("system"); }); } catch (e) {}
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init); else init();
+})();

src/engine.js

@@ -0,0 +1,294 @@
+/* =========================================================================
+   SHARED ENGINE  —  inlined into every page by build.sh.
+   Audio voices (all SYNTHESIZED — no samples), the Web Audio look-ahead
+   scheduler primitives (PORTS TO FIRMWARE), and the share-language codec.
+   Each host supplies its own state globals (state, meters, ramp, trainer,
+   segBars, masterBeat…), its own setBpm, advanceMaster and scheduler().
+   Conventions (kept close to what people already know): GM drum names +
+   note-number aliases, drum-tab step patterns (X accent / x normal / g ghost /
+   . - _ rest), subdivisions /2 /3 /4, Euclidean (k,n) shorthand, per-lane gain
+   in dB (@<db>), and ~ = polymeter.
+   ========================================================================= */
+const LOOKAHEAD_MS = 25, SCHEDULE_AHEAD = 0.12;
+const SWING_RATIO = 2 / 3;                                  // triplet swing: the off-beat lands on the last triplet
+let audioCtx = null, masterGain = null, noiseBuf = null, schedulerTimer = null;
+
+
+// --- grouping: "2+2+3" → groups / beatsPerBar / group-start indices ---
+function parseGroups(str) {
+  const parts = String(str).split(/[^0-9]+/).map((s) => parseInt(s, 10)).filter((n) => n >= 1 && n <= 12);
+  let total = 0; const groups = [];
+  for (const p of parts) { if (total + p > 12) break; groups.push(p); total += p; }
+  if (!groups.length) groups.push(4);
+  const beatsPerBar = groups.reduce((a, b) => a + b, 0);
+  const groupStarts = new Set(); let acc = 0;
+  for (const g of groups) { groupStarts.add(acc); acc += g; }
+  return { groups, beatsPerBar, groupStarts };
+}
+
+// --- audio context ---
+function ensureAudio() {
+  if (audioCtx) return;
+  audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  masterGain = audioCtx.createGain();
+  masterGain.gain.value = state.volume;
+  masterGain.connect(audioCtx.destination);
+}
+
+// --- shared noise buffer ---
+function getNoise() {
+  if (!noiseBuf) {
+    const n = Math.floor(audioCtx.sampleRate * 1.0);
+    noiseBuf = audioCtx.createBuffer(1, n, audioCtx.sampleRate);
+    const d = noiseBuf.getChannelData(0);
+    for (let i = 0; i < n; i++) d[i] = Math.random() * 2 - 1;
+  }
+  return noiseBuf;
+}
+
+// --- synthesized GM-style voices (level = velocity) ---
+function ampEnv(time, peak, dur, attack) {
+  const g = audioCtx.createGain();
+  peak = Math.max(0.0003, peak);
+  g.gain.setValueAtTime(0.0001, time);
+  g.gain.exponentialRampToValueAtTime(peak, time + (attack || 0.001));
+  g.gain.exponentialRampToValueAtTime(0.0001, time + dur);
+  return g;
+}
+function tone(time, type, f0, f1, dur) {
+  const o = audioCtx.createOscillator(); o.type = type;
+  o.frequency.setValueAtTime(f0, time);
+  if (f1 && f1 !== f0) o.frequency.exponentialRampToValueAtTime(Math.max(1, f1), time + Math.min(dur, 0.09));
+  o.start(time); o.stop(time + dur + 0.02); return o;
+}
+function noiseSrc(time, dur) { const s = audioCtx.createBufferSource(); s.buffer = getNoise(); s.start(time); s.stop(time + dur + 0.02); return s; }
+function filt(type, freq, q) { const f = audioCtx.createBiquadFilter(); f.type = type; f.frequency.value = freq; if (q) f.Q.value = q; return f; }
+function v_tone(time, level, type, f0, f1, dur, peak) { const o = tone(time, type, f0, f1, dur), g = ampEnv(time, peak * level, dur, 0.002); o.connect(g); g.connect(masterGain); }
+function v_noise(time, level, fType, freq, q, dur, peak, attack) { const n = noiseSrc(time, dur), f = filt(fType, freq, q), g = ampEnv(time, peak * level, dur, attack); n.connect(f); f.connect(g); g.connect(masterGain); }
+// 6 detuned square oscillators → bandpass + highpass = the classic 808/909 metallic hi-hat/cymbal timbre.
+function metalHat(time, level, dur, hpFreq, peak) {
+  const fund = 40, ratios = [2, 3, 4.16, 5.43, 6.79, 8.21];
+  const bp = filt("bandpass", 10000, 0.8), hp = filt("highpass", hpFreq, 0), g = ampEnv(time, peak * level, dur, 0.001);
+  ratios.forEach((r) => { const o = audioCtx.createOscillator(); o.type = "square"; o.frequency.value = fund * r; o.start(time); o.stop(time + dur + 0.02); o.connect(bp); });
+  bp.connect(hp); hp.connect(g); g.connect(masterGain);
+}
+
+// --- voice table + sample aliases ---
+const DRUMS = {
+  beep:      (t, l) => v_tone(t, l, "square", l >= 1 ? 1600 : 1100, 0, 0.04, 0.5),
+  kick:      (t, l) => v_tone(t, l, "sine", 150, 50, 0.18, 1.0),
+  snare:     (t, l) => { v_tone(t, l, "triangle", 190, 140, 0.12, 0.45); v_noise(t, l, "highpass", 1500, 0, 0.2, 0.8); },
+  rim:       (t, l) => { const o = tone(t, "square", 1700, 0, 0.04), bp = filt("bandpass", 1700, 4), g = ampEnv(t, 0.6 * l, 0.04); o.connect(bp); bp.connect(g); g.connect(masterGain); },
+  clap:      (t, l) => { const bp = filt("bandpass", 1200, 1.4); bp.connect(masterGain); [0, 0.012, 0.024].forEach((d, i) => { const n = noiseSrc(t + d, 0.05), e = ampEnv(t + d, (i < 2 ? 0.5 : 0.85) * l, 0.06); n.connect(e); e.connect(bp); }); },
+  hatClosed: (t, l) => v_noise(t, l, "highpass", 7000, 0, 0.045, 0.5),
+  hatOpen:   (t, l) => v_noise(t, l, "highpass", 7000, 0, 0.32, 0.45, 0.002),
+  ride:      (t, l) => { v_noise(t, l, "bandpass", 6000, 0.8, 0.4, 0.32, 0.002); v_tone(t, l, "square", 5200, 0, 0.1, 0.13); },
+  crash:     (t, l) => v_noise(t, l, "highpass", 4000, 0, 0.8, 0.5, 0.002),
+  tomLow:    (t, l) => v_tone(t, l, "sine", 150, 100, 0.25, 0.9),
+  tomMid:    (t, l) => v_tone(t, l, "sine", 220, 150, 0.23, 0.9),
+  tomHigh:   (t, l) => v_tone(t, l, "sine", 300, 210, 0.20, 0.9),
+  tambourine:(t, l) => v_noise(t, l, "highpass", 8000, 0, 0.12, 0.5),
+  cowbell:   (t, l) => { const sum = audioCtx.createGain(), bp = filt("bandpass", 2640, 1.2), g = ampEnv(t, 0.8 * l, 0.3); [540, 800].forEach((f) => tone(t, "square", f, 0, 0.3).connect(sum)); sum.connect(bp); bp.connect(g); g.connect(masterGain); },
+  woodblock: (t, l) => v_tone(t, l, "triangle", 1800, 1500, 0.06, 0.8),
+  claves:    (t, l) => v_tone(t, l, "sine", 2500, 0, 0.045, 0.85),
+  jamblock:  (t, l) => { const o = tone(t, "square", 2600, 2000, 0.045), bp = filt("bandpass", 2000, 6), g = ampEnv(t, 0.8 * l, 0.045); o.connect(bp); bp.connect(g); g.connect(masterGain); },
+  // --- electronic drum-machine voices (synthesized — these machines ARE synths in reality) ---
+  kick808:    (t, l) => { v_tone(t, l, "sine", 120, 45, 0.7, 1.0); v_noise(t, l * 0.5, "highpass", 2000, 0, 0.008, 0.4, 0.001); },   // long boom + click
+  snare808:   (t, l) => { v_tone(t, l, "triangle", 178, 168, 0.16, 0.4); v_tone(t, l, "triangle", 331, 320, 0.12, 0.18); v_noise(t, l, "highpass", 1000, 0, 0.16, 0.7); },
+  clap808:    (t, l) => { const bp = filt("bandpass", 1100, 1.3); bp.connect(masterGain); [0, 0.01, 0.02, 0.032].forEach((d, i) => { const n = noiseSrc(t + d, 0.05), e = ampEnv(t + d, (i < 3 ? 0.5 : 0.85) * l, 0.05); n.connect(e); e.connect(bp); }); },
+  hat808:     (t, l) => metalHat(t, l, 0.045, 7000, 0.4),
+  openHat808: (t, l) => metalHat(t, l, 0.34, 7000, 0.38),
+  cowbell808: (t, l) => { const sum = audioCtx.createGain(), bp = filt("bandpass", 2640, 1.2), g = ampEnv(t, 0.8 * l, 0.3); [540, 800].forEach((f) => tone(t, "square", f, 0, 0.3).connect(sum)); sum.connect(bp); bp.connect(g); g.connect(masterGain); },
+  tom808:     (t, l) => v_tone(t, l, "sine", 120, 78, 0.34, 0.9),
+  kick909:    (t, l) => { v_tone(t, l, "sine", 110, 46, 0.26, 1.0); v_tone(t, l, "triangle", 280, 60, 0.035, 0.5); v_noise(t, l * 0.6, "highpass", 3000, 0, 0.01, 0.5, 0.001); },   // punchy + click
+  snare909:   (t, l) => { v_tone(t, l, "triangle", 190, 162, 0.09, 0.28); v_noise(t, l, "highpass", 1200, 0, 0.2, 0.85); },
+  clap909:    (t, l) => { const bp = filt("bandpass", 1000, 1.0); bp.connect(masterGain); [0, 0.009, 0.018].forEach((d) => { const n = noiseSrc(t + d, 0.05), e = ampEnv(t + d, 0.6 * l, 0.05); n.connect(e); e.connect(bp); }); const tail = noiseSrc(t + 0.018, 0.2), te = ampEnv(t + 0.018, 0.35 * l, 0.2, 0.001); tail.connect(te); te.connect(bp); },
+  hat909:     (t, l) => metalHat(t, l, 0.05, 9000, 0.4),
+  ride909:    (t, l) => { metalHat(t, l, 0.5, 6000, 0.3); v_noise(t, l, "bandpass", 7000, 0.7, 0.18, 0.18, 0.002); },
+  crash909:   (t, l) => { metalHat(t, l, 0.9, 5000, 0.34); v_noise(t, l, "highpass", 4000, 0, 0.9, 0.4, 0.002); },
+};
+const VOICES = [
+  ["beep", "beep"], ["kick", "kick"], ["snare", "snare"], ["rim", "rim/stick"], ["clap", "clap"],
+  ["hatClosed", "hat closed"], ["hatOpen", "hat open"], ["ride", "ride"], ["crash", "crash"],
+  ["tomLow", "tom low"], ["tomMid", "tom mid"], ["tomHigh", "tom high"], ["tambourine", "tambourine"],
+  ["cowbell", "cowbell"], ["woodblock", "wood block"], ["claves", "claves"], ["jamblock", "jam block"],
+  ["kick808", "808 kick"], ["snare808", "808 snare"], ["clap808", "808 clap"], ["hat808", "808 hat"], ["openHat808", "808 open hat"], ["cowbell808", "808 cowbell"], ["tom808", "808 tom"],
+  ["kick909", "909 kick"], ["snare909", "909 snare"], ["clap909", "909 clap"], ["hat909", "909 hat"], ["ride909", "909 ride"], ["crash909", "909 crash"],
+];
+// Default kit points the friendly GM names at the punchier 808/909 renders
+// (samples removed — those synth voices sound better). Pick "kick808"/"kick909"
+// etc. explicitly for a specific machine flavour.
+const KIT_ALIAS = {
+  kick: "kick909", snare: "snare909", clap: "clap909",
+  hatClosed: "hat909", hatOpen: "openHat808", ride: "ride909", crash: "crash909",
+  cowbell: "cowbell808",
+};
+// General-MIDI percussion note numbers → our voice names (so MIDI/DAW users can type numbers)
+const GM_NUM = {
+  35: "kick", 36: "kick", 37: "rim", 38: "snare", 39: "clap", 40: "snare",
+  41: "tomLow", 42: "hatClosed", 43: "tomLow", 44: "hatClosed", 45: "tomMid",
+  46: "hatOpen", 47: "tomMid", 48: "tomHigh", 49: "crash", 50: "tomHigh",
+  51: "ride", 53: "ride", 54: "tambourine", 56: "cowbell", 75: "claves",
+  76: "woodblock", 77: "woodblock",
+};
+// Euclidean / Bjorklund-class even distribution: k hits over n steps, rotated by rot
+function euclid(k, n, rot) {
+  n = Math.max(1, n | 0); k = Math.max(0, Math.min(n, k | 0)); rot = (((rot | 0) % n) + n) % n;
+  const r = []; for (let i = 0; i < n; i++) { const j = (i + rot) % n; r.push(((j * k) % n) < k ? 1 : 0); }
+  return r;
+}
+function playInstrument(type, time, level) {
+  (DRUMS[KIT_ALIAS[type] || type] || DRUMS[type] || DRUMS.beep)(time, level);
+}
+
+// --- scheduler primitives (PORTS TO FIRMWARE) ---
+function masterBeatsPerBar() { return meters.length ? meters[0].beatsPerBar : 4; }
+
+function isMutedAt(t) { return muteWindows.some((w) => t >= w.start && t < w.end); }
+
+// --- per-step scheduling + dynamics ---
+function scheduleMeterTick(m, time) {
+  const spb = m.stepsPerBeat;
+  const barLen = m.beatsPerBar * spb;
+  const tickInBar = ((m.tick % barLen) + barLen) % barLen;
+  m.vq.push({ time, step: tickInBar, bar: Math.floor(m.tick / barLen) });   // playhead (per step) + measure (advance even when muted)
+  if (!m.enabled || isMutedAt(time)) return;
+  const lvl = m.beatsOn[tickInBar] | 0;                     // dynamics: 0 mute · 1 normal · 2 accent · 3 ghost
+  if (!lvl) return;
+  const lin = m.gainDb ? Math.pow(10, m.gainDb / 20) : 1;   // per-lane dB gain → linear, applied at schedule time (no stutter)
+  playInstrument(m.sound, time, (lvl === 2 ? 1.0 : lvl === 3 ? 0.25 : 0.6) * lin);
+  // opt-in per-hit hook (a page may define onMeterHit to e.g. emit MIDI out to external gear);
+  // (sound name, audio-context time of the hit, dynamic level 1/2/3). No-op on pages that don't set it.
+  if (typeof onMeterHit === "function") onMeterHit(m.sound, time, lvl);
+}
+
+function refBarDur() { return (meters.length ? meters[0].beatsPerBar : 4) * (60 / state.bpm); }
+
+// --- step duration (poly / swing / straight) ---
+function laneStepDur(m, tick) {
+  if (m.poly) return refBarDur() / (m.beatsPerBar * m.stepsPerBeat);  // true ratio polyrhythm (no swing)
+  const beat = 60 / state.bpm;
+  if (m.swing && m.stepsPerBeat % 2 === 0) {                // swing even subdivisions (8ths, 16ths): long–short pairs
+    const pairDur = beat / (m.stepsPerBeat / 2);
+    return ((tick % m.stepsPerBeat) % 2) === 0 ? SWING_RATIO * pairDur : (1 - SWING_RATIO) * pairDur;
+  }
+  return beat / m.stepsPerBeat;                             // straight: shared even grid
+}
+
+// --- pattern cell codec: char ⇄ (level, ornament) ---
+// level: 0 rest / 1 normal / 2 accent / 3 ghost.  ornament: 0 none / 1 flam / 2 drag / 3 roll.
+// Ornaments use new letters, UPPER-case = accented hit, lower-case = normal hit (case carries the
+// dynamic so it stays orthogonal): f/F flam · d/D drag · z/Z roll. Ghosted ornaments aren't expressible.
+function patCell(ch) {
+  switch (ch) {
+    case "X": return [2, 0];
+    case "x": case "1": return [1, 0];
+    case "g": return [3, 0];
+    case "f": return [1, 1]; case "F": return [2, 1];
+    case "d": return [1, 2]; case "D": return [2, 2];
+    case "z": return [1, 3]; case "Z": return [2, 3];
+    default:  return [0, 0];                                            // . - _ / anything else = rest
+  }
+}
+function cellCh(lvl, orn) {
+  if (orn === 1) return lvl >= 2 ? "F" : "f";
+  if (orn === 2) return lvl >= 2 ? "D" : "d";
+  if (orn === 3) return lvl >= 2 ? "Z" : "z";
+  return lvl === 3 ? "g" : lvl >= 2 ? "X" : lvl >= 1 ? "x" : ".";
+}
+
+// --- share-language codec: config ⇄ lane token ---
+function laneCfgToStr(c) {
+  let s = c.sound + ":" + c.groupsStr;
+  const spb = c.stepsPerBeat || 1;
+  if (spb !== 1 || c.swing) s += "/" + spb + (c.swing ? "s" : "");      // "/2s" = swung eighths
+  const on = c.beatsOn || [];                                          // per-step dynamics: one char per pad (X accent / x normal / g ghost / . mute)
+  const orn = c.orns || [];                                            // per-step ornament (flam/drag/roll), parallel to beatsOn
+  const gs = parseGroups(c.groupsStr).groupStarts;   // default = accent group starts only; everything else sounds at normal
+  const anyOrn = orn.some((v) => (v | 0) !== 0);                       // any ornament → not the implicit default; must write the pattern
+  const isDefault = !anyOrn && on.length && on.every((v, i) => (v | 0) === (((i % spb) === 0 && gs.has(i / spb)) ? 2 : 1));
+  if (on.length && !isDefault) s += "=" + on.map((v, i) => cellCh(v | 0, orn[i] | 0)).join("");
+  if (c.gainDb) s += "@" + c.gainDb;   // per-lane gain in dB (e.g. @-3, @2)
+  if (c.poly) s += "~";
+  if (c.enabled === false) s += "!";   // "!" = silenced / disabled
+  return s;
+}
+function laneStrToCfg(tok) {
+  let poly = false, disabled = false, gainDb = 0;
+  while (/[~!]$/.test(tok)) { if (tok.endsWith("!")) disabled = true; else poly = true; tok = tok.slice(0, -1); }
+  const at = tok.indexOf("@"); if (at >= 0) { gainDb = parseFloat(tok.slice(at + 1)) || 0; tok = tok.slice(0, at); }   // @<db> gain
+  const ci = tok.indexOf(":"); if (ci < 0) return null;
+  let sound = tok.slice(0, ci), rest = tok.slice(ci + 1), pattern = null;
+  if (/^\d+$/.test(sound) && GM_NUM[sound]) sound = GM_NUM[sound];      // GM note number → name
+  // Euclidean shorthand (k,n[,rot]) — replaces an explicit =pattern
+  let eucK = null, eucN = null, eucRot = 0;
+  const em = rest.match(/\((\d+)(?:,(\d+))?(?:,(\d+))?\)/);
+  if (em) { eucK = +em[1]; eucN = em[2] != null ? +em[2] : null; eucRot = em[3] != null ? +em[3] : 0; rest = rest.slice(0, em.index) + rest.slice(em.index + em[0].length); }
+  const eq = rest.indexOf("="); if (eq >= 0) { pattern = rest.slice(eq + 1); rest = rest.slice(0, eq); }
+  let groupsStr = rest, sub = 1, swing = false; const sl = rest.indexOf("/");
+  if (sl >= 0) { groupsStr = rest.slice(0, sl); const sp = rest.slice(sl + 1); swing = /s$/i.test(sp); sub = parseInt(sp, 10) || 1; }
+  let { beatsPerBar: bpb, groupStarts } = parseGroups(groupsStr);
+  let beatsOn, orns;
+  if (eucK != null) {                                                   // k hits spread evenly; first hit accented
+    let n = eucN || (bpb * sub);
+    if (eucN) { if (n % bpb === 0) sub = n / bpb; else { bpb = n; sub = 1; groupsStr = String(n); } }
+    let first = true;
+    beatsOn = euclid(eucK, n, eucRot).map((h) => h ? (first ? (first = false, 2) : 1) : 0);
+    orns = beatsOn.map(() => 0);                                        // euclid hits carry no ornament
+  } else if (pattern != null) {
+    // pattern cells: per-step (level, ornament) — X accent, x/1 normal, g ghost, f/F flam, d/D drag,
+    // z/Z roll, . - _ / anything else = rest. See patCell().
+    const cells = pattern.split("").map(patCell);
+    beatsOn = cells.map((c) => c[0]);
+    orns = cells.map((c) => c[1]);
+  } else {
+    // no pattern → every subdivision sounds at normal, accent on group starts (the grouping IS the accent map)
+    beatsOn = Array.from({ length: bpb * sub }, (_, i) => ((i % sub) === 0 && groupStarts.has(i / sub)) ? 2 : 1);
+    orns = beatsOn.map(() => 0);
+  }
+  if (!DRUMS[sound]) sound = "beep";
+  return { groupsStr, stepsPerBeat: sub, sound, beatsOn, orns, poly, swing, enabled: !disabled, gainDb };
+}
+
+// --- share-language codec: patch ⇄ setup ---
+function setupToPatch(s) {
+  const parts = ["v1", "t" + s.bpm];
+  if (s.volume != null) parts.push("vol" + Math.round(s.volume * 100));
+  if (s.countMs > 0) parts.push("cd" + Math.round(s.countMs / 1000));
+  if (s.bars > 0) parts.push("b" + s.bars);
+  (s.lanes || []).forEach((c) => parts.push(laneCfgToStr(c)));
+  if (s.trainer && s.trainer.on) parts.push("tr" + s.trainer.playBars + "/" + s.trainer.muteBars);
+  if (s.ramp && s.ramp.on) parts.push("rmp" + s.ramp.startBpm + "/" + s.ramp.amount + "/" + s.ramp.everyBars);
+  if (s.end != null) {                                                  // per-track playback flow (default = loop forever)
+    if (s.rep != null && s.rep > 1) parts.push("rep=" + s.rep);        // cycles before end fires (1 = default, omitted)
+    parts.push("end=" + (s.end === "stop" ? "stop" : s.end === 1 ? "next" : s.end > 0 ? "+" + s.end : String(s.end)));
+  }
+  return parts.join(";");
+}
+function patchToSetup(str) {
+  const s = { bpm: 120, volume: null, countMs: 0, bars: 0, lanes: [], rep: null, end: null, trainer: { on: false, playBars: 2, muteBars: 2 }, ramp: { on: false, startBpm: 80, amount: 5, everyBars: 4 } };
+  for (let tok of String(str).split(";")) {
+    tok = tok.trim(); if (!tok || tok === "v1") continue;
+    if (tok.includes(":")) { const c = laneStrToCfg(tok); if (c) s.lanes.push(c); }   // lanes contain ":" → matched first
+    else if (tok.startsWith("vol")) s.volume = (parseInt(tok.slice(3), 10) || 0) / 100;
+    else if (tok.startsWith("cd")) s.countMs = (parseInt(tok.slice(2), 10) || 0) * 1000;
+    else if (tok.startsWith("rep=")) s.rep = parseInt(tok.slice(4), 10) || 1;        // playback flow: cycles before end fires
+    else if (tok.startsWith("end=")) { const v = tok.slice(4); s.end = v === "stop" ? "stop" : v === "next" ? 1 : (parseInt(v, 10) || 0); }   // stop | next(+1) | relative goto ±N
+    else if (tok.startsWith("tr")) { const [p, m] = tok.slice(2).split("/"); s.trainer = { on: true, playBars: +p || 1, muteBars: +m || 0 }; }
+    else if (tok.startsWith("rmp")) { const [a, b, c] = tok.slice(3).split("/"); s.ramp = { on: true, startBpm: +a || 80, amount: +b || 0, everyBars: +c || 1 }; }
+    else if (tok.startsWith("b")) s.bars = parseInt(tok.slice(1), 10) || 0;          // segment bar-length
+    else if (tok.startsWith("t")) s.bpm = Math.max(5, Math.min(300, parseInt(tok.slice(1), 10) || 120));   // clamp like the firmware
+  }
+  if (!s.lanes.length) s.lanes.push(laneStrToCfg("beep:4"));   // a patch always has >=1 lane (match the firmware default)
+  return s;
+}
+
+// --- base64url(JSON) set-list codec ---
+function b64u(str) { return btoa(unescape(encodeURIComponent(str))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, ""); }
+function unb64u(s) { s = s.replace(/-/g, "+").replace(/_/g, "/"); return decodeURIComponent(escape(atob(s))); }
+
+
+function codeToSetlist(code) {
+  const o = JSON.parse(unb64u(code));
+  return { title: o.t || "Shared set list", description: o.d || "", items: (o.i || []).map((x) => ({ name: x.n || "Item", ...patchToSetup(x.p) })) };
+}

src/footer.html

@@ -0,0 +1,8 @@
+<!-- Shared site footer — assembled into every page by build.sh. -->
+<footer class="site-foot">
+  <span>VARASYS · Simplifying Complexity</span>
+  <span class="dot">·</span>
+  <a href="https://codeberg.org/VARASYS/metronome" target="_blank" rel="noopener">source</a>
+  <span class="dot">·</span>
+  <span id="appVersion">v0.0.1-dev</span>
+</footer>

src/header.html

@@ -0,0 +1,14 @@
+<!-- Shared site header — assembled into every page by build.sh.
+     Brand goes to Concepts (the landing); nav: Concepts / Editor / Embed / Theme. -->
+<header class="site-head">
+  <a class="brand" href="/" title="VARASYS — Simplifying Complexity">
+    <img class="brand-logo brand-dark"  src="data:image/png;base64,@BUILD:logo-dark@"  alt="VARASYS — Simplifying Complexity" />
+    <img class="brand-logo brand-light" src="data:image/png;base64,@BUILD:logo-light@" alt="VARASYS — Simplifying Complexity" />
+  </a>
+  <nav class="site-nav">
+    <a href="/">Concepts</a>
+    <a href="/editor.html">Editor</a>
+    <a href="/embed.html">Embed</a>
+    <button id="themeBtn" class="tbtn" title="toggle light / dark theme">☀</button>
+  </nav>
+</header>

src/midiout.js

@@ -0,0 +1,73 @@
+/* MIDI OUT — send the groove as MIDI to external gear (a drum module / e-kit), in sync with
+   playback, plus an optional 24-PPQN MIDI clock + Start/Stop so the gear's tempo locks to the editor.
+   Shared by editor.html + pm_e-2.html (one copy → no drift).
+
+   Relies on page globals: $, audioCtx, state, _midiOutputs(), _ensureMidi(), _isDevicePort().
+   The page wires three transport hooks: midiOutStart(t0) in start(), midiOutStop() in stop(),
+   midiOutClock(aheadTime) at the end of scheduler(); engine.js calls onMeterHit() per scheduled hit. */
+const SOUND_GM = {
+  kick: 36, kick808: 36, kick909: 36, snare: 38, snare808: 38, snare909: 38,
+  clap: 39, clap808: 39, clap909: 39, rim: 37,
+  hatClosed: 42, hat808: 42, hat909: 42, hatOpen: 46, openHat808: 46,
+  ride: 51, ride909: 51, crash: 49, crash909: 49,
+  tomLow: 41, tom808: 45, tomMid: 45, tomHigh: 48, tambourine: 54,
+  cowbell: 56, cowbell808: 56, woodblock: 76, jamblock: 76, claves: 75, beep: 37,
+};
+let _midiOutOn = false, _midiClkNext = 0;
+
+function _midiOutTarget() {
+  const sel = $("midiOutSel"); if (!sel) return null;
+  return _midiOutputs().find((o) => o.id === sel.value) || null;
+}
+function populateMidiOutPorts() {
+  const sel = $("midiOutSel"); if (!sel) return;
+  const outs = _midiOutputs(), prev = sel.value;
+  sel.innerHTML = outs.length
+    ? outs.map((o) => `<option value="${o.id}">${(o.name || "output").slice(0, 22)}</option>`).join("")
+    : `<option value="">(no MIDI outputs)</option>`;
+  if (outs.some((o) => o.id === prev)) sel.value = prev;                              // keep prior choice
+  else { const ext = outs.find((o) => !_isDevicePort(o)); sel.value = ((ext || outs[0] || {}).id) || ""; }  // prefer external gear
+}
+// schedule `bytes` at audio-context time `audioTime`, converted to the Web-MIDI (performance.now) clock
+function _midiOutSendAt(bytes, audioTime) {
+  const out = _midiOutTarget(); if (!out) return;
+  const ts = (typeof audioCtx !== "undefined" && audioCtx)
+    ? performance.now() + (audioTime - audioCtx.currentTime) * 1000 : performance.now();
+  try { out.send(bytes, ts); } catch (_) {}
+}
+// engine.js per-hit hook: GM drum Note-On (ch10) at the hit's audio time, then a Note-Off 60 ms later
+function onMeterHit(sound, time, lvl) {
+  if (!_midiOutOn) return;
+  const note = SOUND_GM[sound]; if (note == null) return;
+  const vel = lvl === 2 ? 112 : lvl === 3 ? 45 : 90;                                  // accent / ghost / normal
+  _midiOutSendAt([0x99, note, vel], time);
+  _midiOutSendAt([0x89, note, 0], time + 0.06);
+}
+function _clockOn() { const c = $("midiClkChk"); return _midiOutOn && !!c && c.checked; }
+function midiOutStart(t0) { if (_clockOn()) { _midiOutSendAt([0xFA], t0); _midiClkNext = t0; } }   // MIDI Start
+function midiOutStop() {
+  if (_clockOn() && typeof audioCtx !== "undefined" && audioCtx) _midiOutSendAt([0xFC], audioCtx.currentTime);  // MIDI Stop
+}
+// schedule 24-PPQN clock ticks up to `aheadTime` (called from the page's look-ahead scheduler)
+function midiOutClock(aheadTime) {
+  if (!_clockOn() || !state.running || typeof audioCtx === "undefined" || !audioCtx) return;
+  const tickDur = (60 / state.bpm) / 24;
+  let guard = 0;
+  while (_midiClkNext < aheadTime && guard++ < 512) { _midiOutSendAt([0xF8], _midiClkNext); _midiClkNext += tickDur; }
+  if (_midiClkNext < aheadTime) _midiClkNext = aheadTime;             // never starve-loop if tickDur is tiny
+}
+function updateMidiOutBtn() {
+  const b = $("midiOutBtn"), sel = $("midiOutSel"), clk = $("midiClkWrap"); if (!b) return;
+  b.style.color = _midiOutOn ? "#7ab8ff" : "var(--muted)";
+  b.style.borderColor = _midiOutOn ? "#7ab8ff" : "var(--edge)";
+  if (sel) sel.hidden = !_midiOutOn;
+  if (clk) clk.hidden = !_midiOutOn;
+}
+async function toggleMidiOut() {
+  if (_midiOutOn) { midiOutStop(); _midiOutOn = false; updateMidiOutBtn(); return; }
+  if (!(await _ensureMidi())) return alert("Driving external MIDI gear needs the Web MIDI API — use Chrome, Edge, or Firefox.");
+  populateMidiOutPorts();
+  if (!_midiOutputs().length) return alert("No MIDI output ports found. Connect your drum module / e-kit (USB-MIDI) and try again.");
+  _midiOutOn = true; updateMidiOutBtn();
+  if (state.running && typeof audioCtx !== "undefined" && audioCtx) midiOutStart(audioCtx.currentTime + 0.05);  // armed mid-play → Start now
+}

src/notation.js

@@ -0,0 +1,403 @@
+/* =========================================================================
+   PM_E-2 NOTATION ENGINE  —  inlined into pm_e-2.html by build.sh.
+   Engraves a groove as a 5-line drum staff onto a 2D <canvas>, using the
+   Bravura SMuFL music font (subset inlined via @BUILD:bravura@). The draw API
+   is deliberately IMMEDIATE-MODE and mirrors embedded-graphics (drawGlyph /
+   line / rect) so the layout math ports near-mechanically to the device
+   (rust/pm-ui). Pure view over a normalized model — no engine.js internals.
+
+   model = {
+     name, bpm, playing, phase,           // phase 0..1 across the master bar (playhead)
+     lanes: [ { sound, groups:[Int], sub, swing, poly, muted,
+                levels:[0..3], orns:[0..3] } ]   // levels: rest/normal/accent/ghost
+   }
+   ========================================================================= */
+const NOTATION = (() => {
+  // SMuFL codepoints (resolved from glyphnames.json by tools/bravura/subset.py — keep in sync).
+  const GLYPH = {
+    clef: 0xe069,
+    black: 0xe0a4, x: 0xe0a9, circleX: 0xe0b3, half: 0xe0a3, whole: 0xe0a2,
+    parenL: 0xe0f5, parenR: 0xe0f6,
+    flag8U: 0xe240, flag8D: 0xe241, flag16U: 0xe242, flag16D: 0xe243,
+    restW: 0xe4e3, restH: 0xe4e4, restQ: 0xe4e5, rest8: 0xe4e6, rest16: 0xe4e7,
+    accentA: 0xe4a0, accentB: 0xe4a1, dot: 0xe1e7,
+    sig: [0xe080, 0xe081, 0xe082, 0xe083, 0xe084, 0xe085, 0xe086, 0xe087, 0xe088, 0xe089],
+    sigPlus: 0xe08c, sigCommon: 0xe08a, sigCut: 0xe08b,
+    graceAcc: 0xe560, graceSlash: 0xe564,
+    trem1: 0xe220, trem2: 0xe221, trem3: 0xe222, buzz: 0xe22a,
+  };
+  const chr = (cp) => String.fromCodePoint(cp);
+
+  // Voice -> staff position. `p` = half-staff-spaces below the TOP line (top line p=0, each line/space
+  // step = 1; bottom line p=8). `head` = notehead glyph; `up` = stem direction (hands up / feet down).
+  // PAS-style drum key; refined visually in the browser.
+  function voice(name) {
+    const s = name || "";
+    const F = (p, head, up) => ({ p, head, up });
+    if (s.startsWith("kick")) return F(7, "black", false);          // bass drum (feet, stem down)
+    if (s.startsWith("snare") || s.startsWith("clap") || s.startsWith("rim")) return F(3, "black", true);
+    if (s.startsWith("openHat") || s.startsWith("hatOpen") || s.startsWith("hat")) return F(-1, "x", true);
+    if (s.startsWith("ride")) return F(0, "x", true);
+    if (s.startsWith("crash")) return F(-3, "x", true);
+    if (s.startsWith("tomHigh")) return F(1, "black", true);
+    if (s.startsWith("tomMid") || s === "tom808") return F(2, "black", true);
+    if (s.startsWith("tomLow") || s.startsWith("tom")) return F(5, "black", true);
+    if (s.startsWith("cowbell")) return F(-1, "circleX", true);
+    if (s.startsWith("claves") || s.startsWith("woodblock") || s.startsWith("jamblock")) return F(1, "x", true);
+    if (s.startsWith("tambourine")) return F(-2, "x", true);
+    return F(3, "black", true);
+  }
+
+  function gcd(a, b) { while (b) { [a, b] = [b, a % b]; } return a || 1; }
+  function lcm(a, b) { return a / gcd(a, b) * b; }
+
+  // --- palette ---
+  // The notation panel is engraved like paper: dark ink on a WHITE background, theme-independent
+  // (matches print sheet music and reads in both page themes).
+  function palette() {
+    return {
+      ink: "#161a1f",      // staff lines, noteheads, stems, beams
+      faint: "#aeb6c0",    // box outlines / gridlines / poly-row baseline
+      accent: "#c0392b",   // accents (notehead tint + > mark) — reads on white
+      ghost: "#7c8794",    // ghost notes
+      play: "#2b7fff",     // playhead
+      bg: "#ffffff",
+    };
+  }
+
+  function draw(canvas, model, opts) {
+    const view = (model && model.view) || "staff";
+    if (view === "tubs") return drawTUBS(canvas, model);
+    if (view === "konnakol") return drawKonnakol(canvas, model);
+    opts = opts || {};
+    const ctx = canvas.getContext("2d");
+    const dpr = window.devicePixelRatio || 1;
+    const W = canvas.clientWidth, H = canvas.clientHeight;
+    if (canvas.width !== W * dpr || canvas.height !== H * dpr) {
+      canvas.width = W * dpr; canvas.height = H * dpr;
+    }
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    const pal = palette();
+    ctx.clearRect(0, 0, W, H);
+
+    const S = opts.staffSpace || 11;     // staff space in px
+    const em = 4 * S;                    // SMuFL: 1 em = 4 staff spaces
+    const y0 = (p) => staffTop + p * (S / 2);   // staff-position -> y
+    ctx.textAlign = "center";
+    ctx.textBaseline = "alphabetic";
+
+    const glyph = (name, x, p, color, scale) => {
+      const cp = typeof name === "number" ? name : GLYPH[name];
+      ctx.fillStyle = color;
+      ctx.font = (em * (scale || 1)) + "px Bravura";
+      // SMuFL glyphs sit on the baseline = the reference staff line; fillText baseline aligns there.
+      ctx.fillText(chr(cp), x, y0(p));
+    };
+    const line = (x1, yy1, x2, yy2, color, w) => {
+      ctx.strokeStyle = color; ctx.lineWidth = w || 1;
+      ctx.beginPath(); ctx.moveTo(x1, yy1); ctx.lineTo(x2, yy2); ctx.stroke();
+    };
+
+    // geometry + model
+    const m = 14;
+    const clefW = em * 0.6;
+    const x1 = W - m;
+    const staffTop = 56;
+    const lanes = (model.lanes || []).filter((l) => !l.muted && l.levels && l.levels.length);
+    const onStaff = lanes.filter((l) => !l.poly);   // first non-poly lane = master (defines the meter)
+
+    const groups = (onStaff[0] && onStaff[0].groups && onStaff[0].groups.length) ? onStaff[0].groups : [4];
+    const beats = groups.reduce((a, b) => a + b, 0) || 4;
+    // time signature: additive numerator (2+2+3) for grouped meters; PM's beat is the quarter -> denom 4.
+    const tsDigit = em * 0.4;
+    const numParts = groups.length > 1 ? groups : [beats];
+    const numGlyphs = numParts.reduce((a, n) => a + String(n).length, 0) + (numParts.length - 1);
+    const tsX = m + clefW;
+    const tsW = Math.max(numGlyphs, 1) * tsDigit;
+    // notes start clear of the time signature, or at a shared gutter (so all views' beats line up)
+    const x0 = model.gutter != null ? model.gutter : tsX + tsW + 14;
+    const barW = Math.max(1, x1 - x0);
+
+    // ---- header: name + BPM ----
+    ctx.textAlign = "left";
+    ctx.font = "600 15px system-ui, sans-serif";
+    ctx.fillStyle = pal.ink;
+    ctx.fillText(model.name || "", m, 26);
+    ctx.textAlign = "right";
+    ctx.font = "700 18px 'Courier New', monospace";
+    ctx.fillStyle = pal.accent;
+    ctx.fillText((model.bpm | 0) + " BPM", x1, 26);
+    ctx.textAlign = "center";
+
+    // ---- staff + barlines + clef + time signature ----
+    for (let i = 0; i < 5; i++) line(m, staffTop + i * S, x1, staffTop + i * S, pal.ink, 1);
+    line(m, staffTop, m, staffTop + 4 * S, pal.ink, 1.5);
+    line(x1, staffTop, x1, staffTop + 4 * S, pal.ink, 1.5);
+    glyph("clef", m + clefW * 0.5, 4, pal.ink);          // percussion clef centered on middle line (p=4)
+
+    drawTimeSig(tsX, tsW, numParts, tsDigit);
+
+    // ---- time grid: lcm of ALL lanes' step counts (incl. polyrhythm `~` lanes) → the right common
+    // time scale so every voice, including cross-rhythms, sits on ONE staff at aligned columns ----
+    let res = 1;
+    for (const l of lanes) res = lcm(res, l.levels.length);
+    res = Math.max(res, 1);
+    const beamable = res / Math.max(beats, 1) >= 2;                 // bar has subdivisions → beam within beats
+    ctx.font = em + "px Bravura";
+    const headHalf = ctx.measureText(chr(GLYPH.black)).width / 2;   // real notehead half-width → stems touch it
+
+    // beaming state per stem direction (carry previous column's stem x within a beat)
+    let upPrev = null, dnPrev = null;
+    const upTip = staffTop - S * 2.6, dnTip = staffTop + 4 * S + S * 2.6;
+
+    for (let c = 0; c < res; c++) {
+      const cx = x0 + (c + 0.5) * barW / res;
+      const beat = Math.floor(c * beats / res);
+      let up = null, dn = null;   // {loP, hiP, sub2} accumulators per direction
+
+      for (const l of lanes) {
+        const steps = l.levels.length;
+        if ((c * steps) % res !== 0) continue;            // no note for this lane at this column
+        const si = (c * steps / res) | 0;
+        const lvl = l.levels[si] | 0;
+        if (!lvl) continue;
+        const orn = (l.orns && l.orns[si]) | 0;
+        const vc = voice(l.sound);
+        const color = lvl === 2 ? pal.accent : lvl === 3 ? pal.ghost : pal.ink;
+
+        // ghost = parenthesized notehead
+        if (lvl === 3) glyph("parenL", cx - S * 0.85, vc.p, color);
+        const head = vc.head === "x" ? "x" : vc.head === "circleX" ? "circleX" : "black";
+        glyph(head, cx, vc.p, color);
+        if (lvl === 3) glyph("parenR", cx + S * 0.85, vc.p, color);
+
+        // accent mark above/below the staff edge
+        if (lvl === 2) glyph(vc.up ? "accentA" : "accentB", cx, vc.up ? -2 : 10, color, 0.8);
+
+        // ornaments: flam = slashed grace note up-left; roll = tremolo strokes on the stem
+        if (orn === 1) glyph("graceSlash", cx - S * 1.4, vc.p - 0.5, color, 0.7);
+        else if (orn === 2) { glyph("graceSlash", cx - S * 1.9, vc.p - 0.5, color, 0.7); glyph("graceSlash", cx - S * 1.1, vc.p - 0.5, color, 0.7); }
+        else if (orn === 3) glyph("trem3", cx + (vc.up ? S * 0.55 : -S * 0.55), vc.p + (vc.up ? -2 : 2), color, 0.8);
+
+        // ledger lines
+        for (let lp = -2; lp >= vc.p; lp -= 2) line(cx - S * 0.9, y0(lp), cx + S * 0.9, y0(lp), pal.ink, 1);
+        for (let lp = 10; lp <= vc.p; lp += 2) line(cx - S * 0.9, y0(lp), cx + S * 0.9, y0(lp), pal.ink, 1);
+
+        const sub2 = beamable;
+        const acc = vc.up ? (up = up || { loP: -99, hiP: 99, sub2: false }) : (dn = dn || { loP: -99, hiP: 99, sub2: false });
+        acc.loP = Math.max(acc.loP, vc.p);   // lowest (largest p)
+        acc.hiP = Math.min(acc.hiP, vc.p);   // highest (smallest p)
+        acc.sub2 = acc.sub2 || sub2;
+      }
+
+      // shared up-stem (hands): right side of head, from lowest head up past the highest
+      if (up) {
+        const sx = cx + headHalf;
+        const top = Math.min(upTip, y0(up.hiP) - S * 1.2);
+        line(sx, y0(up.loP), sx, top, pal.ink, 1.4);
+        if (up.sub2 && upPrev && upPrev.beat === beat) line(upPrev.x, top, sx, top, pal.ink, 3);
+        else if (up.sub2) {} // first of a beam group; flag drawn only if it stays solo (handled below)
+        upPrev = up.sub2 ? { x: sx, beat, y: top } : null;
+      } else upPrev = null;
+      // shared down-stem (feet): left side
+      if (dn) {
+        const sx = cx - headHalf;
+        const bot = Math.max(dnTip, y0(dn.loP) + S * 1.2);
+        line(sx, y0(dn.hiP), sx, bot, pal.ink, 1.4);
+        if (dn.sub2 && dnPrev && dnPrev.beat === beat) line(dnPrev.x, bot, sx, bot, pal.ink, 3);
+        dnPrev = dn.sub2 ? { x: sx, beat, y: bot } : null;
+      } else dnPrev = null;
+    }
+
+    // ---- tuplet number: the common subdivision per beat (3=triplet, 6=sextuplet, 5, 7…). For beamed
+    // groups the modern convention is just the numeral over the beam (no bracket). ----
+    const isPow2 = (n) => n > 0 && (n & (n - 1)) === 0;
+    const tupN = Math.round(res / Math.max(1, beats));
+    if (tupN >= 3 && !isPow2(tupN)) {
+      ctx.fillStyle = pal.ink; ctx.textAlign = "center";
+      ctx.font = "italic 600 13px Georgia, 'Times New Roman', serif";
+      const ty = upTip - S * 0.7;
+      for (let b = 0; b < beats; b++) ctx.fillText(String(tupN), x0 + (b + 0.5) * barW / beats, ty);
+    }
+
+    // ---- playhead ----
+    // `phase` is the master-bar fraction (0..1). Noteheads sit at column CENTERS ((c+0.5)/res), so
+    // shift the line by half a cell to land exactly on the note at its onset instead of leading it.
+    if (model.playing && model.phase != null) {
+      const pf = Math.max(0, Math.min(1, model.phase + 0.5 / res));
+      const px = x0 + pf * barW;
+      ctx.save(); ctx.globalAlpha = 0.55;
+      line(px, staffTop - S, px, staffTop + 4 * S + S, pal.play, 2);
+      ctx.restore();
+    }
+
+    // ---- hit map for on-staff editing (all in CSS px) ----
+    // Each on-staff lane exposes its staff row (p) + column geometry; the page maps a click to the
+    // nearest voice row (y) and the column (x) → (laneIndex, step). `idx` indexes model.lanes/meters.
+    canvas._hit = {
+      kind: "staff", staffTop, S, x0, barW,
+      lanes: lanes.map((l) => ({ idx: l.idx, p: voice(l.sound).p, steps: l.levels.length })),
+    };
+
+    // time signature: numerator (additive parts joined by timeSigPlus) over a quarter-note denominator,
+    // each row centered within the reserved width `tw`. Defined here so it closes over glyph()/em/pal.
+    function drawTimeSig(tx, tw, parts, dw) {
+      drawSigRow(tx, tw, 2, parts, dw);   // numerator in the upper half of the staff
+      drawSigRow(tx, tw, 6, [4], dw);     // denominator (PM beat = quarter) in the lower half
+    }
+    function drawSigRow(tx, tw, p, parts, dw) {
+      const seq = [];
+      parts.forEach((n, i) => {
+        if (i) seq.push(GLYPH.sigPlus);
+        String(n).split("").forEach((d) => seq.push(GLYPH.sig[+d]));
+      });
+      let xx = tx + (tw - seq.length * dw) / 2 + dw / 2;
+      for (const cp of seq) { glyph(cp, xx, p, pal.ink, 0.92); xx += dw; }
+    }
+  }
+
+  function drawPolyRow(ctx, glyph, line, pal, l, x0, x1, py, S) {
+    ctx.textAlign = "left"; ctx.font = "11px system-ui, sans-serif"; ctx.fillStyle = pal.ghost;
+    ctx.fillText(l.sound + " ~", x0, py - S * 1.6); ctx.textAlign = "center";
+    line(x0, py, x1, py, pal.faint, 1);
+    const steps = l.levels.length, barW = x1 - x0;
+    const vc = voice(l.sound);
+    for (let i = 0; i < steps; i++) {
+      const lvl = l.levels[i] | 0; if (!lvl) continue;
+      const cx = x0 + (i + 0.5) * barW / steps;
+      const color = lvl === 2 ? pal.accent : lvl === 3 ? pal.ghost : pal.ink;
+      const head = vc.head === "x" ? "x" : "black";
+      ctx.fillStyle = color; ctx.font = (4 * S) + "px Bravura";
+      ctx.fillText(chr(vc.head === "x" ? GLYPH.x : GLYPH.black), cx, py);
+    }
+  }
+
+  // ---- shared setup for the alternate views ----
+  function begin(canvas) {
+    const ctx = canvas.getContext("2d");
+    const dpr = window.devicePixelRatio || 1;
+    const W = canvas.clientWidth, H = canvas.clientHeight;
+    if (canvas.width !== W * dpr || canvas.height !== H * dpr) { canvas.width = W * dpr; canvas.height = H * dpr; }
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, W, H);
+    return { ctx, W, H, pal: palette() };
+  }
+  function header(ctx, W, model, pal) {
+    ctx.textAlign = "left"; ctx.font = "600 15px system-ui, sans-serif"; ctx.fillStyle = pal.ink;
+    ctx.fillText(model.name || "", 14, 26);
+    ctx.textAlign = "right"; ctx.font = "700 18px 'Courier New', monospace"; ctx.fillStyle = pal.accent;
+    ctx.fillText((model.bpm | 0) + " BPM", W - 14, 26);
+    ctx.textAlign = "center";
+  }
+  // Son/rumba clave fingerprint: split the bar in half, count hits each side → 2-3 or 3-2.
+  function claveLabel(l) {
+    if (!/^clave/.test(l.sound || "")) return "";
+    const n = l.levels.length, h = n >> 1;
+    if (!h) return "(clave)";
+    const a = l.levels.slice(0, h).filter((v) => v > 0).length;
+    const b = l.levels.slice(h).filter((v) => v > 0).length;
+    return a === 2 && b === 3 ? "(2-3)" : a === 3 && b === 2 ? "(3-2)" : "(clave)";
+  }
+
+  // ---- TUBS (Time Unit Box System): rows = voices, columns = time units, filled boxes = hits ----
+  // All bar-sharing lanes are drawn on ONE common time grid (lcm of their step counts) so every
+  // column lines up vertically across rows; a coarser lane just fills every Nth cell. Polymeter
+  // lanes keep their own spacing across the full width (that IS the cross-rhythm).
+  function drawTUBS(canvas, model) {
+    const { ctx, W, H, pal } = begin(canvas);
+    header(ctx, W, model, pal);
+    const lanes = (model.lanes || []).filter((l) => !l.muted && l.levels && l.levels.length);
+    if (!lanes.length) { canvas._hit = null; return; }
+    const m = 14, x0 = model.gutter != null ? model.gutter : m + 96, x1 = W - m, gw = Math.max(1, x1 - x0);
+    const top = 42, bot = H - 12;
+    const rowH = Math.min(40, Math.max(20, (bot - top) / lanes.length));
+
+    // common grid = lcm of ALL lanes' step counts so columns line up; each lane draws ONE box per
+    // REAL step at its grid column → aligned AND each box is a clickable step.
+    let res = 1; for (const l of lanes) res = lcm(res, l.levels.length);
+    res = Math.max(res, 1);
+    const cw = gw / res, bs = Math.max(11, Math.min(rowH - 8, cw - 3, 30));
+    const master = lanes.find((l) => !l.poly) || lanes[0];
+    const mg = master.groups && master.groups.length ? master.groups : [4];
+    const mbeats = mg.reduce((a, b) => a + b, 0) || 1;
+    const starts = new Set(); let acc = 0; for (const g of mg) { starts.add(acc); acc += g; }
+    const yA = top - 4, yB = top + lanes.length * rowH;
+
+    // beat / group dividers (group starts brighter)
+    for (let b = 0; b <= mbeats; b++) {
+      const lx = x0 + (b * res / mbeats) * cw;
+      ctx.strokeStyle = (b < mbeats && starts.has(b)) || b === 0 || b === mbeats ? pal.ghost : pal.faint;
+      ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(lx, yA); ctx.lineTo(lx, yB); ctx.stroke();
+    }
+    // playhead column (aligned to box centers like the staff)
+    if (model.playing && model.phase != null) {
+      const px = x0 + Math.max(0, Math.min(1, model.phase + 0.5 / res)) * gw;
+      ctx.save(); ctx.globalAlpha = 0.5; ctx.strokeStyle = pal.play; ctx.lineWidth = 2;
+      ctx.beginPath(); ctx.moveTo(px, yA); ctx.lineTo(px, yB); ctx.stroke(); ctx.restore();
+    }
+
+    const rows = [];
+    lanes.forEach((l, r) => {
+      const cy = top + r * rowH + rowH / 2;
+      ctx.textAlign = "left"; ctx.font = "12px system-ui, sans-serif"; ctx.fillStyle = pal.ink;
+      ctx.fillText(l.sound + (l.poly ? " ~" : "") + (claveLabel(l) ? "  " + claveLabel(l) : ""), m, cy + 4);
+      const steps = l.levels.length, span = res / steps;
+      rows.push({ idx: l.idx, steps, span });
+      for (let i = 0; i < steps; i++) {
+        const cx = x0 + (i * span + 0.5) * cw, lvl = l.levels[i] | 0;
+        ctx.strokeStyle = pal.faint; ctx.lineWidth = 1; ctx.strokeRect(cx - bs / 2, cy - bs / 2, bs, bs);
+        if (lvl > 0) {
+          ctx.fillStyle = lvl === 2 ? pal.accent : lvl === 3 ? pal.ghost : pal.ink;
+          const p = bs * 0.2; ctx.fillRect(cx - bs / 2 + p, cy - bs / 2 + p, bs - 2 * p, bs - 2 * p);
+          const orn = (l.orns && l.orns[i]) | 0;          // flam/drag/roll marker inside the box
+          if (orn) { ctx.fillStyle = pal.bg; ctx.font = "700 9px system-ui, sans-serif"; ctx.textAlign = "center"; ctx.fillText(orn === 1 ? "f" : orn === 2 ? "d" : "z", cx, cy + 3.5); ctx.textAlign = "left"; }
+        }
+      }
+    });
+    // hit map for editing: click a box to cycle dynamic; Shift-click cycles ornament
+    canvas._hit = { kind: "tubs", x0, cw, top, rowH, rows };
+  }
+
+  // ---- Konnakol: spoken-rhythm syllables (solkattu) for the master lane's subdivision ----
+  const SOLKATTU = {
+    1: ["ta"], 2: ["ta", "ka"], 3: ["ta", "ki", "ta"], 4: ["ta", "ka", "di", "mi"],
+    5: ["ta", "ka", "ta", "ki", "ta"], 6: ["ta", "ki", "ta", "ta", "ki", "ta"],
+    7: ["ta", "ka", "ta", "ki", "ta", "ki", "ta"], 8: ["ta", "ka", "di", "mi", "ta", "ka", "ju", "nu"],
+  };
+  function drawKonnakol(canvas, model) {
+    const { ctx, W, H, pal } = begin(canvas);
+    canvas._hit = null;
+    header(ctx, W, model, pal);
+    const lanes = (model.lanes || []).filter((l) => !l.muted && l.levels && l.levels.length);
+    const m0 = lanes.find((l) => !l.poly) || lanes[0];
+    if (!m0) return;
+    const groups = m0.groups && m0.groups.length ? m0.groups : [4];
+    const beats = groups.reduce((a, b) => a + b, 0) || 1;
+    let res = 1; for (const l of lanes) res = lcm(res, l.levels.length);   // common (finest) grid
+    const sub = Math.max(1, Math.round(res / beats));                       // nadai = subdivisions per beat
+    const bols = SOLKATTU[sub] || SOLKATTU[4];
+    const m = 14, x0 = model.gutter != null ? model.gutter : m, x1 = W - m, gw = x1 - x0, colW = gw / (beats * sub), cy = H / 2;
+    const starts = new Set(); let acc = 0; for (const g of groups) { starts.add(acc); acc += g; }
+    ctx.textAlign = "center";
+    for (let b = 0; b < beats; b++) {
+      const gs = starts.has(b), sam = b === 0;
+      ctx.font = "10px system-ui, sans-serif"; ctx.fillStyle = pal.faint;
+      ctx.fillText(sam ? "X" : gs ? "O" : "·", x0 + (b * sub + 0.5) * colW, cy - 22);   // sam / anga / beat
+      for (let s = 0; s < sub; s++) {
+        const idx = b * sub + s, cx = x0 + (idx + 0.5) * colW;
+        ctx.font = (s === 0 ? "600 " : "") + "16px system-ui, sans-serif";
+        ctx.fillStyle = sam && s === 0 ? pal.accent : s === 0 ? pal.ink : pal.ghost;
+        ctx.fillText(bols[s % bols.length], cx, cy + 6);
+      }
+    }
+    for (let b = 0; b <= beats; b++) {                    // beat/group dividers
+      const lx = x0 + b * sub * colW;
+      ctx.strokeStyle = starts.has(b) || b === 0 || b === beats ? pal.ghost : pal.faint;
+      ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(lx, cy - 30); ctx.lineTo(lx, cy + 22); ctx.stroke();
+    }
+    ctx.textAlign = "left"; ctx.font = "11px system-ui, sans-serif"; ctx.fillStyle = pal.ghost;
+    ctx.fillText("tala " + groups.join("+") + "  ·  nadai " + sub + "  ·  X=sam  O=anga", m, H - 12);
+  }
+
+  return { draw, GLYPH, voice };
+})();

src/setlists.js

@@ -0,0 +1,42 @@
+// Seed set lists — baked into every page; each item is authored in the share language
+// (so this also exercises the parser). Two curated lists:
+//   Styles   — full, genre-true grooves; good as backing tracks to jam/solo over.
+//   Practice — drills for learning to PLAY those styles (isolations, independence,
+//              dynamics, polyrhythms, tempo/gap tools).
+const SEED_SETLISTS = [
+  { title: "Styles", description: "Full genre grooves — load one, press play, and jam over it. Tap pads to reshape the feel.", items: [
+    ["Rock",                 "t116;kick:4/2=X...Xx..;snare:4/2=..X...X.;hatClosed:4/2=Xxxxxxxx"],
+    ["Pop (16ths)",          "t104;kick:4/4=X.....x...X.....;snare:4/4=....X.......X...;hatClosed:4/4=xxxxxxxxxxxxxxxx"],
+    ["Funk",                 "t100;kick:4/4=X..x..X...x.X...;snare:4/4=....X..g.g..X.g.;hatClosed:4/4=xxxxxxxxxxxxxxxx"],
+    ["Disco",                "t120;kick:4;clap:4=.X.X;hatClosed:4/2=X.X.X.X.;hatOpen:4/2=.x.x.x.x"],
+    ["Motown backbeat",      "t132;kick:4/2=X..x.X..;snare:4/2=..X...X.;tambourine:4/2=xxxxxxxx"],
+    ["Blues shuffle (12/8)", "t84;ride:4/3=X.xX.xX.xX.x;snare:4/3=...X.....X..;kick:4/3=X.....X....."],
+    ["Jazz swing",           "t150;ride:4/3=X.xX.xX.xX.x;hatClosed:4=.x.x;kick:4=x.x.@-9"],
+    ["Bossa nova",           "t128;rim:4/4=..x.x...x..x..x.;kick:4/2=X..X.X..;hatClosed:4/2=xxxxxxxx"],
+    ["Samba (2/4)",          "t102;tomLow:2/4=x...X...;hatClosed:2/4=xxxxxxxx;woodblock:2/4=X.xx.xX."],
+    ["Reggae one-drop",      "t74;kick:4=..X.;rim:4=..X.;hatClosed:4/2=.x.x.x.x"],
+    ["Afrobeat",             "t108;cowbell:4/4=x.xx.xx.x.xx.xx.;kick:4/4=X..x..X..x..X...;snare:4/4=....g..X..g..X.g;hatClosed:4/4=xxxxxxxxxxxxxxxx"],
+    ["Hip-hop (boom bap)",   "t88;kick808:4/4=X.....x....X....;snare808:4/4=....X.......X...;hat808:4/4=x.x.x.x.x.x.x.x."],
+    ["Metal driving",        "t168;kick:4/2=XxXxXxXx;snare:4/2=..X...X.;hatClosed:4/2=Xxxxxxxx;crash:4=X..."],
+    ["6/8 ballad",           "t66;kick:3+3=X..X..;snare:3+3=...X..;hatClosed:3+3/2=xxxxxxxxxxxx"],
+    ["7/8 (2+2+3)",          "t130;kick:2+2+3=X..X..X;snare:2+2+3=..X..X.;hatClosed:2+2+3/2"],
+    ["5/4 (3+2)",            "t112;kick:3+2=X..X.;snare:3+2=..X..;hatClosed:3+2/2"],
+  ] },
+  { title: "Practice", description: "Drills to learn the styles - isolations, independence, dynamics, polyrhythms, and tempo / gap tools.", items: [
+    ["Rock beat - quarter hats", "t80;kick:4=X.X.;snare:4=.X.X;hatClosed:4=xxxx"],
+    ["Rock beat - 8th hats",     "t96;kick:4/2=X...Xx..;snare:4/2=..X...X.;hatClosed:4/2=xxxxxxxx"],
+    ["Backbeat + ghost notes",   "t90;kick:4/4=X.....x...X.....;snare:4/4=..g.X.g.g.g.X.g.;hatClosed:4/2=xxxxxxxx"],
+    ["16th-note hand control",   "t84;kick:4=X..X;snare:4/4=x.xxX.xxx.xxX.xx"],
+    ["Shuffle feel (triplets)",  "t92;hatClosed:4/3=X.xX.xX.xX.x;snare:4/3=...X.....X..;kick:4/3=X.....X....."],
+    ["Jazz ride - spang-a-lang", "t140;ride:4/3=X.xX.xX.xX.x;hatClosed:4=.x.x;kick:4=x.x.@-9"],
+    ["Bossa independence",       "t120;rim:4/4=..x.x...x..x..x.;kick:4/2=X..X.X..;hatClosed:4=.x.x"],
+    ["Linear funk",              "t96;kick:4/4=X..x..X.....x...;snare:4/4=....X......X..g.;hatClosed:4/4=x.x.x.xxx.x.x.x."],
+    ["Accent / ghost dynamics",  "t88;snare:4/4=X.g.x.g.X.g.x.g.;hatClosed:4/2=xxxxxxxx;kick:4=X..X"],
+    ["Double-bass workout",      "t120;kick:4/4=xxxxxxxxxxxxxxxx;snare:4=.X.X;crash:4=X..."],
+    ["Independence: 3 over 4",   "t96;kick:4;hatClosed:4/2=xxxxxxxx;cowbell:3~"],
+    ["3 over 2 hemiola",         "t96;woodblock:2;cowbell:3~"],
+    ["5 over 4 polyrhythm",      "t100;kick:4;claves:5~"],
+    ["Tempo builder 80 up",      "t80;kick:4=X.X.;snare:4=.X.X;hatClosed:4/2=xxxxxxxx;rmp80/4/4"],
+    ["Gap trainer (play 2 / rest 2)", "t100;kick:4/2=X...Xx..;snare:4/2=..X...X.;hatClosed:4/2=xxxxxxxx;tr2/2"],
+  ] },
+];