@amg555/frameforge-mcp 2.7.6 → 2.7.8

package/.agent/skills/motion-styles/sources/tier-list.html

@@ -1,600 +0,0 @@
-<meta charset="utf-8">
-<title>Tier List</title>
-<meta name="claude:viewport-fit-sides" content="cover">
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@700;800&family=Anton&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;600;700;800&display=block">
-<style>
-/* Layout: an editing-suite player. One dark look by choice: the stage, then the transport bar under it. */
-:root {
-  color-scheme: dark;
-  --bg: #0b0b0d;
-  --panel: #141417;
-  --ink: #f2f0ea;
-  --dim: #8d8c93;
-  --line: #26262c;
-  --accent: #ffd60a;
-  --display: "Anton", "Bebas Neue", Impact, "Arial Narrow", sans-serif;
-  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
-  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
-}
-html, body { height: 100%; }
-body {
-  background: var(--bg); color: var(--ink); font-family: var(--body);
-  padding-left: max(16px, env(safe-area-inset-left, 0px));
-  padding-right: max(16px, env(safe-area-inset-right, 0px));
-  padding-block: 20px 28px;
-}
-.wrap { max-width: 1180px; margin: 0 auto; display: grid; gap: 14px; }
-.top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; }
-.name { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 4vw, 40px); letter-spacing: 0.02em; text-transform: uppercase; margin: 0; line-height: 1; }
-.name em { font-family: var(--serif); font-style: italic; text-transform: none; color: var(--accent); letter-spacing: 0; font-size: 1.12em; }
-.meta { color: var(--dim); font-size: 14px; margin: 0; }
-.stage { position: relative; aspect-ratio: 720 / 1280; width: min(100%, calc(74vh * 720 / 1280)); max-width: 100%; margin-inline: auto; background: #000; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
-.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
-.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
-.bar button, .bar label.btn {
-  font: 600 14px var(--body); color: var(--ink); background: transparent; border: 1px solid var(--line);
-  border-radius: 7px; padding: 8px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
-}
-.bar button:hover, .bar label.btn:hover { border-color: var(--dim); }
-.bar button:focus-visible, .bar label.btn:focus-within, #scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.bar button[aria-pressed="true"] { background: var(--accent); color: #0b0b0d; border-color: var(--accent); }
-#play { min-width: 82px; justify-content: center; background: var(--ink); color: #0b0b0d; border-color: var(--ink); }
-#scrub { flex: 1 1 220px; min-width: 0; accent-color: var(--accent); }
-#time { font: 600 14px var(--body); font-variant-numeric: tabular-nums; color: var(--dim); min-width: 92px; text-align: right; }
-#vofile, #footfile { position: absolute; width: 1px; height: 1px; opacity: 0; }
-.note { color: var(--dim); font-size: 13px; margin: 0; max-width: 70ch; }
-</style>
-
-<div class="wrap">
-  <div class="top">
-    <h1 class="name">Tier <em>List</em></h1>
-    <p class="meta">Reference animation · 15.0 s · 720×1280 · drawn in code, sound synthesized</p>
-  </div>
-  <div class="stage"><canvas id="stage" width="720" height="1280" aria-label="Tier List reference animation"></canvas></div>
-  <div class="bar">
-    <button id="play" type="button">Play</button>
-    <input id="scrub" type="range" min="0" max="15" step="0.01" value="0" aria-label="Scrub timeline">
-    <span id="time">0.00 / 15.00</span>
-    <button id="sound" type="button" aria-pressed="true">Sound on</button>
-    <button id="loop" type="button" aria-pressed="true">Loop</button>
-    <label class="btn" for="vofile">Load voiceover<input id="vofile" type="file" accept="audio/*"></label>
-  </div>
-  <p class="note" id="vonote">Load a voiceover to play it in sync. The effects switch to a lighter mix under narration.</p>
-</div>
-
-<script>
-// =====================================================================================================
-// TIER LIST  ·  core helpers (CM), sound kit (SFX), library helpers, style, player
-// Every frame is a pure function of t. All randomness is seeded. Times are seconds.
-// =====================================================================================================
-// =====================================================================================================
-const CM = (() => {
-  const clamp = (v, a = 0, b = 1) => (v < a ? a : v > b ? b : v);
-  const lerp = (a, b, u) => a + (b - a) * u;
-  const span = (t, a, b) => clamp((t - a) / (b - a));
-  const rotl = (x, k) => (x << k) | (x >>> (32 - k));
-  const hash = (s) => { s = String(s); let h = 0x9e3779b1; for (let i = 0; i < s.length; i++) { h = Math.imul(h ^ s.charCodeAt(i), 0x85ebca6b); h ^= h >>> 13; } return h >>> 0; };
-  // xoshiro128** style generator, seeded from a number or string
-  const rng = (seed) => {
-    const s = typeof seed === 'number' ? seed >>> 0 : hash(seed);
-    let a = (s ^ 0xa5a5a5a5) >>> 0, b = (Math.imul(s, 0x27d4eb2d) >>> 0) || 1, c = (0x165667b1 ^ s) >>> 0, d = (rotl(s, 7) >>> 0) || 7;
-    const r = () => { const res = Math.imul(rotl(Math.imul(b, 5), 7), 9) >>> 0; const t = b << 9; c ^= a; d ^= b; b ^= c; a ^= d; c ^= t; d = rotl(d, 11); return res / 4294967296; };
-    for (let i = 0; i < 8; i++) r();
-    r.in = (lo, hi) => lo + r() * (hi - lo);
-    r.pick = (arr) => arr[(r() * arr.length) | 0];
-    return r;
-  };
-  // smooth 1D value noise, roughly -1..1
-  const noise1 = (seed) => { const r = rng(seed), v = Float32Array.from({ length: 256 }, () => r() * 2 - 1); return (x) => { const i = Math.floor(x), f = x - i, u = f * f * (3 - 2 * f); return lerp(v[i & 255], v[(i + 1) & 255], u); }; };
-  const ez = {
-    out3: (u) => 1 - Math.pow(1 - u, 3),
-    in3: (u) => u * u * u,
-    inout3: (u) => (u < 0.5 ? 4 * u * u * u : 1 - Math.pow(-2 * u + 2, 3) / 2),
-    outExpo: (u) => (u >= 1 ? 1 : 1 - Math.pow(2, -10 * u)),
-    back: (u, s = 1.7) => (u <= 0 ? 0 : u >= 1 ? 1 : 1 + (s + 1) * Math.pow(u - 1, 3) + s * Math.pow(u - 1, 2)),
-    spring: (u) => (u <= 0 ? 0 : u >= 1 ? 1 : 1 - Math.exp(-6 * u) * Math.cos(13 * u)),
-  };
-  const layer = (w, h) => { const c = document.createElement('canvas'); c.width = w; c.height = h; return c; };
-  return { clamp, lerp, span, hash, rng, noise1, ez, layer };
-})();
-
-// =====================================================================================================
-// SFX: synthesized creator-edit sound kit. Plain Web Audio, no files.
-// voiceover mode keeps the music low under narration and plays sounds marked `soft` at 55%.
-// =====================================================================================================
-const SFX = (() => {
-  const SEMI = { C: -9, D: -7, E: -5, F: -4, G: -2, A: 0, B: 2 };
-  const hz = (n) => { if (typeof n === 'number') return n; const m = /^([A-G])(#|b)?(-?\d)$/.exec(n); return 440 * Math.pow(2, (SEMI[m[1]] + (m[2] === '#' ? 1 : m[2] === 'b' ? -1 : 0) + (+m[3] - 4) * 12) / 12); };
-
-  function kit(ac, o = {}) {
-    const VO = !!o.voiceover, SR = ac.sampleRate, T0 = o.from || 0, base = ac.currentTime + (o.lead || 0);
-    // snap every start a little past the sample grid (avoids level spikes on some browsers)
-    const at = (t) => (Math.round((base + (t - T0)) * SR) + 0.3) / SR;
-    const skip = (t, dur) => at(t) + dur < ac.currentTime || (t < T0 - 0.005 && dur < 1.2);
-
-    const comp = ac.createDynamicsCompressor();
-    comp.threshold.value = -14; comp.knee.value = 6; comp.ratio.value = 4; comp.attack.value = 0.003; comp.release.value = 0.15;
-    const master = ac.createGain(); master.gain.value = o.master == null ? 0.85 : o.master;
-    comp.connect(master); master.connect(o.dest || ac.destination);
-    const mk = (g) => { const n = ac.createGain(); n.gain.value = g; n.connect(comp); return n; };
-    const bus = { fx: mk(VO ? 0.78 : 0.95), music: mk(VO ? 0.3 : 0.62), amb: mk(0.45) };
-    const duckIn = ac.createGain(); duckIn.connect(bus.music);
-    const DUCKS = [];
-
-    // generated plate-style reverb
-    const verb = ac.createConvolver();
-    { const n = Math.floor(1.5 * SR), ir = ac.createBuffer(2, n, SR);
-      for (let ch = 0; ch < 2; ch++) { const r = CM.rng('plate' + ch), d = ir.getChannelData(ch); let lp = 0; for (let i = 0; i < n; i++) { const u = i / n; lp += (0.7 - 0.5 * u) * ((r() * 2 - 1) - lp); d[i] = lp * Math.pow(1 - u, 2.6) * 0.9; } }
-      verb.buffer = ir; }
-    const verbIn = ac.createGain(); verbIn.gain.value = 0.8; verbIn.connect(verb); verb.connect(comp);
-
-    // seeded noise buffers
-    const NB = {};
-    { const n = Math.floor(2 * SR);
-      for (const kind of ['white', 'pink', 'brown']) {
-        const b = ac.createBuffer(1, n, SR), d = b.getChannelData(0), r = CM.rng('nz' + kind); let b0 = 0, b1 = 0, b2 = 0, br = 0;
-        for (let i = 0; i < n; i++) { const w = r() * 2 - 1;
-          if (kind === 'white') d[i] = w;
-          else if (kind === 'pink') { b0 = 0.99765 * b0 + w * 0.099; b1 = 0.963 * b1 + w * 0.2965; b2 = 0.57 * b2 + w * 1.0527; d[i] = (b0 + b1 + b2 + w * 0.1848) * 0.18; }
-          else { br = (br + 0.02 * w) / 1.02; d[i] = br * 3.4; } }
-        NB[kind] = b; } }
-
-    const ramp = (param, v, t) => { if (!Array.isArray(v)) { param.setValueAtTime(v, t); return; } param.setValueAtTime(v[0][1], t + v[0][0]); for (let i = 1; i < v.length; i++) param.exponentialRampToValueAtTime(Math.max(1e-3, v[i][1]), t + v[i][0]); };
-    const env = (g, t, peak, dur, a = 0.004, hold = 0) => {
-      a = Math.min(a, dur * 0.9); hold = Math.min(hold, dur - a);
-      g.gain.setValueAtTime(0, t); g.gain.linearRampToValueAtTime(peak, t + a);
-      if (hold > 0) g.gain.setValueAtTime(peak, t + a + hold);
-      g.gain.exponentialRampToValueAtTime(1e-4, t + dur); g.gain.setValueAtTime(0, t + dur + 0.002);
-    };
-    const level = (p, d) => (p.gain == null ? d : p.gain) * (VO && p.soft ? 0.55 : 1);
-    const route = (node, p, t) => {
-      const pan = ac.createStereoPanner();
-      if (Array.isArray(p.pan)) { pan.pan.setValueAtTime(p.pan[0], t); pan.pan.linearRampToValueAtTime(p.pan[1], t + (p.dur || 0.2)); } else pan.pan.value = CM.clamp(p.pan || 0, -1, 1);
-      node.connect(pan); pan.connect(p.bus === 'music' ? duckIn : bus[p.bus || 'fx']);
-      if (p.verb) { const s = ac.createGain(); s.gain.value = p.verb; pan.connect(s); s.connect(verbIn); }
-    };
-    const filt = (p, t) => { if (!p.filter) return null; const f = ac.createBiquadFilter(); f.type = p.filter; f.Q.value = p.q == null ? 0.9 : p.q; ramp(f.frequency, p.ff == null ? 1200 : p.ff, t); return f; };
-
-    // primitive: oscillator voice. f may be a value or [[dt, hz], ...]
-    function voice(time, p) {
-      const dur = p.dur || 0.2; if (skip(time, dur)) return; const t = at(time);
-      const osc = ac.createOscillator(); osc.type = p.type || 'sine';
-      ramp(osc.frequency, Array.isArray(p.f) ? p.f.map(([d, v]) => [d, hz(v)]) : hz(p.f || 440), t);
-      const g = ac.createGain(); env(g, t, level(p, 0.3), dur, p.a, p.hold);
-      const f = filt(p, t); if (f) { osc.connect(f); f.connect(g); } else osc.connect(g);
-      route(g, p, t); osc.start(t); osc.stop(t + dur + 0.03);
-    }
-    // primitive: noise voice
-    function hiss(time, p) {
-      const dur = p.dur || 0.2; if (skip(time, dur)) return; const t = at(time);
-      const src = ac.createBufferSource(); src.buffer = NB[p.color || 'white']; src.loop = true; if (p.rate) src.playbackRate.value = p.rate;
-      const g = ac.createGain(); env(g, t, level(p, 0.3), dur, p.a, p.hold);
-      const f = filt(p, t); if (f) { src.connect(f); f.connect(g); } else src.connect(g);
-      route(g, p, t); src.start(t, CM.rng('off' + time)() * 1.5); src.stop(t + dur + 0.03);
-    }
-    function duck(t, depth = 0.5, hold = 0.25) { DUCKS.push({ t, depth, hold }); }
-
-    // ---------------- named sounds (creator-edit palette) ----------------
-    const S = {
-      // text slam: a tight low thump with a short papery crack
-      slam: (t, o) => { voice(t, { f: [[0, 150], [0.12, 52]], dur: 0.2, gain: 0.42 * o.g, pan: o.pan, soft: o.soft }); hiss(t, { dur: 0.07, filter: 'lowpass', ff: 2600, gain: 0.22 * o.g, pan: o.pan, soft: o.soft }); hiss(t, { dur: 0.012, filter: 'highpass', ff: 5000, gain: 0.12 * o.g, pan: o.pan, soft: o.soft }); },
-      // big drop: sub boom with a dark tail
-      boom: (t, o) => { voice(t, { f: [[0, 90], [0.08, 52], [1.6, 34]], dur: 1.7, gain: 0.7 * o.g, a: 0.006, hold: 0.12 }); hiss(t, { color: 'brown', dur: 0.6, filter: 'lowpass', ff: [[0, 600], [0.5, 90]], gain: 0.35 * o.g, verb: 0.3 }); duck(t, 0.7, 0.35); },
-      pop: (t, o) => { const f = o.f || 760; voice(t, { f: [[0, f * 1.7], [0.05, f]], dur: 0.08, gain: 0.22 * o.g, pan: o.pan, soft: o.soft }); hiss(t, { dur: 0.01, filter: 'highpass', ff: 4500, gain: 0.08 * o.g, pan: o.pan, soft: o.soft }); },
-      tick: (t, o) => hiss(t, { dur: 0.016, filter: 'bandpass', ff: o.f || 3800, q: 3, gain: 0.32 * o.g, pan: o.pan, soft: o.soft }),
-      click: (t, o) => { hiss(t, { dur: 0.012, filter: 'bandpass', ff: 3200, q: 2, gain: 0.35 * o.g, pan: o.pan }); hiss(t + 0.045, { dur: 0.01, filter: 'bandpass', ff: 2400, q: 2, gain: 0.22 * o.g, pan: o.pan }); },
-      whoosh: (t, o) => { const d = o.dur || 0.35, dir = o.dir || 1; hiss(t, { color: 'pink', dur: d, filter: 'bandpass', ff: [[0, 260], [d * 0.55, o.top || 3200], [d, 520]], q: 0.75, gain: 0.5 * o.g, a: d * 0.55, pan: [-0.7 * dir, 0.7 * dir], verb: 0.12, soft: o.soft }); hiss(t + d * 0.2, { dur: d * 0.6, filter: 'highpass', ff: [[0, 3000], [d * 0.6, 7000]], gain: 0.08 * o.g, a: d * 0.3, pan: [-0.4 * dir, 0.5 * dir], soft: o.soft }); },
-      riser: (t, o) => { const d = o.dur || 0.8; hiss(t, { color: 'pink', dur: d, filter: 'bandpass', ff: [[0, 300], [d, 5200]], q: 1.1, gain: 0.32 * o.g, a: d * 0.96, verb: 0.2, soft: o.soft }); voice(t, { type: 'sawtooth', f: [[0, 110], [d, 440]], dur: d, gain: 0.06 * o.g, a: d * 0.95, filter: 'lowpass', ff: [[0, 400], [d, 2400]], soft: o.soft }); },
-      glitch: (t, o) => { const r = CM.rng('gl' + t); for (let i = 0; i < 9; i++) voice(t + i * 0.021, { type: 'square', f: 180 + r() * 2200, dur: 0.018, gain: 0.07 * o.g, a: 0.001, hold: 0.012, pan: r() * 1.4 - 0.7 }); hiss(t, { dur: 0.2, filter: 'bandpass', ff: [[0, 4000], [0.2, 900]], q: 0.7, gain: 0.18 * o.g }); hiss(t + 0.1, { dur: 0.05, color: 'brown', gain: 0.25 * o.g }); },
-      ping: (t, o) => { voice(t, { f: 'E6', dur: 0.5, gain: 0.16 * o.g, a: 0.003, verb: 0.3, pan: o.pan }); voice(t + 0.11, { f: 'B6', dur: 0.7, gain: 0.14 * o.g, a: 0.003, verb: 0.35, pan: o.pan }); },
-      send: (t, o) => { voice(t, { f: [[0, 520], [0.11, 1500]], dur: 0.13, gain: 0.14 * o.g, pan: o.pan }); hiss(t, { dur: 0.1, filter: 'highpass', ff: [[0, 2000], [0.1, 6000]], gain: 0.07 * o.g, pan: o.pan }); },
-      keys: (t, o) => { const r = CM.rng('k' + t), end = t + (o.dur || 0.4); for (let x = t; x < end; x += 0.055 + r() * 0.035) { hiss(x, { dur: 0.014, filter: 'bandpass', ff: 3200 + r() * 900, q: 3, gain: 0.2 * o.g, pan: o.pan, soft: true }); voice(x, { f: 1900 + r() * 300, dur: 0.012, gain: 0.025 * o.g, pan: o.pan, soft: true }); } },
-      // highlighter / marker swipe: grainy felt drag
-      marker: (t, o) => { const d = o.dur || 0.25, r = CM.rng('m' + t); for (let x = 0; x < d; x += 0.022 + r() * 0.012) hiss(t + x, { dur: 0.03, filter: 'bandpass', ff: 1700 + r() * 900, q: 1.4, gain: 0.16 * o.g * (0.6 + r() * 0.5), pan: o.pan, soft: o.soft }); },
-      strike: (t, o) => { hiss(t, { dur: 0.15, filter: 'bandpass', ff: [[0, 1200], [0.15, 3200]], q: 1.2, gain: 0.3 * o.g, a: 0.02, pan: o.pan }); },
-      tapeStop: (t, o) => { voice(t, { type: 'sawtooth', f: [[0, 196], [0.62, 18]], dur: 0.66, gain: 0.22 * o.g, a: 0.004, hold: 0.3, filter: 'lowpass', ff: [[0, 1800], [0.6, 160]] }); voice(t, { f: [[0, 98], [0.62, 12]], dur: 0.66, gain: 0.3 * o.g, a: 0.004, hold: 0.3 }); hiss(t, { color: 'brown', dur: 0.5, filter: 'lowpass', ff: [[0, 900], [0.5, 120]], gain: 0.18 * o.g }); },
-      stamp: (t, o) => { voice(t, { f: [[0, 160], [0.18, 48]], dur: 0.28, gain: 0.6 * o.g }); hiss(t, { dur: 0.06, filter: 'bandpass', ff: 1300, q: 1.1, gain: 0.4 * o.g }); hiss(t + 0.004, { dur: 0.014, filter: 'highpass', ff: 4200, gain: 0.25 * o.g }); },
-      shimmer: (t, o) => { ['C6', 'E6', 'G6', 'B6', 'D7', 'E7'].forEach((n, i) => voice(t + i * 0.035, { f: n, dur: 0.75, gain: 0.045 * o.g, a: 0.003, verb: 0.45, pan: (i % 2 ? 0.35 : -0.35) })); },
-      sparkle: (t, o) => { const r = CM.rng('sp' + t); for (let i = 0; i < 5; i++) voice(t + i * 0.05, { f: 2400 + r() * 2400, dur: 0.25, gain: 0.03 * o.g, a: 0.002, verb: 0.4, pan: r() * 1.2 - 0.6 }); },
-    };
-    function play(name, t, opts = {}) { const fn = S[name]; if (!fn) throw new Error('unknown sound ' + name); fn(t, Object.assign({}, opts, { g: opts.gain == null ? 1 : opts.gain })); }
-
-    // ---------------- music: half-time beat with bass and soft pad ----------------
-    function music(t0, t1, p = {}) {
-      const bpm = p.bpm || 98, step = 60 / bpm / 4, bar = step * 16, g = p.gain == null ? 1 : p.gain;
-      const roots = p.roots || ['A1', 'F1', 'C2', 'G1'];
-      const pads = p.pads || [['A3', 'C4', 'E4'], ['F3', 'A3', 'C4'], ['C4', 'E4', 'G4'], ['G3', 'B3', 'D4']];
-      let bi = 0;
-      for (let tb = t0; tb < t1 - 0.05; tb += bar, bi++) {
-        const root = roots[bi % roots.length], pad = pads[bi % pads.length], blen = Math.min(bar, t1 - tb);
-        pad.forEach((n, k) => voice(tb, { type: 'triangle', f: n, dur: blen + 0.2, gain: 0.03 * g, a: 0.3, hold: blen - 0.5, filter: 'lowpass', ff: 1100, pan: (k - 1) * 0.35, verb: 0.3, bus: 'music' }));
-        for (let s = 0; s < 16; s++) {
-          const ts = tb + s * step; if (ts >= t1 - 0.02) break;
-          if (s === 0 || s === 10) { voice(ts, { f: [[0, 150], [0.09, 46]], dur: 0.32, gain: 0.5 * g, bus: 'music' }); hiss(ts, { dur: 0.012, filter: 'highpass', ff: 3000, gain: 0.05 * g, bus: 'music' }); }
-          if (s === 4 || s === 12) { hiss(ts, { dur: 0.16, filter: 'bandpass', ff: 1700, q: 0.8, gain: 0.26 * g, verb: 0.25, bus: 'music' }); hiss(ts + 0.008, { dur: 0.05, filter: 'highpass', ff: 4500, gain: 0.1 * g, bus: 'music' }); }
-          if (s % 2 === 0) hiss(ts, { dur: s % 4 === 2 ? 0.05 : 0.028, filter: 'highpass', ff: 7500, gain: (s % 4 === 2 ? 0.06 : 0.035) * g, bus: 'music' });
-          if ([0, 3, 6, 10, 14].includes(s)) voice(ts, { type: 'triangle', f: root, dur: step * 2.6, gain: 0.2 * g, a: 0.006, hold: step, filter: 'lowpass', ff: 380, bus: 'music' });
-        }
-      }
-    }
-    function drone(t0, t1, p = {}) { const d = t1 - t0, g = p.gain == null ? 1 : p.gain; voice(t0, { f: p.note || 'A1', dur: d, gain: 0.12 * g, a: d * 0.4, hold: d * 0.4, bus: 'music' }); hiss(t0, { color: 'pink', dur: d, filter: 'bandpass', ff: 900, q: 0.5, gain: 0.03 * g, a: d * 0.5, hold: d * 0.3, bus: 'amb' }); }
-    function finish() {
-      DUCKS.sort((a, b) => a.t - b.t);
-      for (const e of DUCKS) { const s = at(e.t); if (s + e.hold < ac.currentTime) continue; duckIn.gain.setTargetAtTime(1 - e.depth, Math.max(s, ac.currentTime), 0.008); duckIn.gain.setTargetAtTime(1, s + e.hold, 0.14); }
-    }
-    return { play, voice, hiss, music, drone, duck, finish, hz, vo: VO };
-  }
-  function live(score, from, opts = {}) {
-    const ac = new (window.AudioContext || window.webkitAudioContext)();
-    const k = kit(ac, Object.assign({}, opts, { from: from || 0, lead: 0.04 })); score(k); k.finish();
-    return () => { try { ac.close(); } catch (e) {} };
-  }
-  async function render(score, dur, sr = 48000, opts = {}) {
-    const len = Math.ceil(dur * sr), ac = new OfflineAudioContext(2, len, sr);
-    const k = kit(ac, Object.assign({}, opts, { from: 0 })); score(k); k.finish();
-    const buf = await ac.startRendering(), L = buf.getChannelData(0), R = buf.getChannelData(1), inter = new Float32Array(len * 2);
-    let peak = 0; for (let i = 0; i < len; i++) { inter[2 * i] = L[i]; inter[2 * i + 1] = R[i]; peak = Math.max(peak, Math.abs(L[i]), Math.abs(R[i])); }
-    return { inter, peak, sr, frames: len };
-  }
-  return { kit, live, render, hz };
-})();
-
-const STYLE = { name: 'Tier List', em: 'List', W: 720, H: 1280, three: false, footage: false, poster: 11.0,
-  fonts: 'family=Archivo+Black&family=Inter:wght@700;800',
-  loads: ['400 60px "Archivo Black"', '800 30px Inter'],
-  cat: { family: 'Shorts Format', fontsText: 'Archivo Black, Inter (700 and 800)',
-    look: 'A classic tier-list board on dark charcoal: S to D rows with bright rainbow labels, rounded item tiles with simple icons drawn in code, and a stash of unranked tiles at the bottom that fly up one by one.',
-    how: 'Each item leaves the stash, hangs for a moment in the middle with its name so you can react, then arcs into its tier and snaps into place with a squash and a row flash. The last item gets a dramatic pause before it lands, and the outro asks for comments.',
-    demo: 'My fruit tier list',
-    replace: 'TL, TIERS (labels and colours), ITEMS (name, icon painter, chosen tier, time), the headline, the outro text and scoreSound()',
-    keep: 'the tier rows and rainbow labels, tile() with a code-drawn icon, the stash row, the fly-in arc with a mid-air hold and name chip, the snap with squash and row flash, and the dramatic last pick',
-    sizes: 'keep tier letters at 56 px or more, item names at 34 px or more and the headline at 56 px or more',
-    voLine: 'Each tile lifts on its name, hangs while the opinion is given, and snaps into its row on the verdict word.',
-    full: '- Full mix (no voiceover): a bouncy beat, a "whoosh" for each lift, a "pop" for each snap (pitch by tier), and a drum roll before the last pick.',
-    voMix: '- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark pops soft: true and keep the drum roll short.',
-    sheet: [
-      'Board: dark charcoal (#16161c) with five rows (#23232b), each with a coloured label square: S #ff6b6b, A #ffb36b, B #ffe066, C #8ce99a, D #74c0fc, letters in Archivo Black.',
-      'Items are rounded tiles (#2f2f3a) with a simple flat icon drawn in code; never use real logos or product photos.',
-      'Motion: a tile lifts from the stash, scales up in the centre with its name in a chip, holds, then arcs into the next free slot of its row with a squash and a short flash of the row.',
-      'Type: Archivo Black for the headline and tier letters; Inter 800 for names and the outro.',
-      'Pace: about 1.5 to 2 seconds per item; the last item gets a 1 second pause.',
-    ],
-    sound: [
-      'Bed: a bouncy, simple beat (padBed with kick and hats).',
-      'Map events to the kit: lifts get "whoosh"; the mid-air hold gets a soft rising tone; snaps get "pop" whose pitch is higher for better tiers; the last pick gets a drum roll (fast soft noise hits) and "slam"; the outro gets an open chord.',
-    ] } };
-const W = STYLE.W, H = STYLE.H;
-
-// =====================================================================================================
-// SHARED LIBRARY HELPERS (Style Library, Shorts set). Pure functions of t; all randomness seeded.
-// W and H are the canvas size (set from STYLE). Coordinates are canvas pixels.
-// =====================================================================================================
-const { clamp, lerp, span, rng, noise1, ez } = CM;
-const TAU = Math.PI * 2;
-const rr = (c, x, y, w, h, r) => { c.beginPath(); c.roundRect(x, y, w, h, r); };
-const lg = (c, x0, y0, x1, y1, stops) => { const g = c.createLinearGradient(x0, y0, x1, y1); stops.forEach(([o, col]) => g.addColorStop(o, col)); return g; };
-const rg = (c, x, y, r0, r1, stops) => { const g = c.createRadialGradient(x, y, r0, x, y, r1); stops.forEach(([o, col]) => g.addColorStop(o, col)); return g; };
-const fillAll = (c, f) => { c.fillStyle = f; c.fillRect(0, 0, W, H); };
-// keyframe track: K = [[t, v1, v2, ...], ...], eased in-out between keys
-function track(K, t, e = ez.inout3) {
-  if (t <= K[0][0]) return K[0].slice(1);
-  for (let i = 0; i < K.length - 1; i++) { const a = K[i], b = K[i + 1]; if (t <= b[0]) { const u = e((t - a[0]) / Math.max(1e-6, b[0] - a[0])); return a.slice(1).map((v, j) => lerp(v, b[j + 1], u)); } }
-  return K[K.length - 1].slice(1);
-}
-const textW = (c, s, font, ls = 0) => { c.save(); c.font = font; c.letterSpacing = ls + 'px'; const w = c.measureText(s).width; c.restore(); return w; };
-const pxOf = (font) => parseFloat(/(\d+(?:\.\d+)?)px/.exec(font)[1]);
-// text with options: a (align), b (baseline), ls (letter spacing), r (rotation), alpha, glow/gb, st/sw (stroke under fill), s (scale)
-function txt(c, s, x, y, o = {}) {
-  c.save(); c.font = o.f || '700 40px Inter'; c.textAlign = o.a || 'left'; c.textBaseline = o.b || 'alphabetic'; c.letterSpacing = (o.ls || 0) + 'px';
-  c.translate(x, y); if (o.r) c.rotate(o.r); if (o.s != null) c.scale(o.s, o.s); if (o.alpha != null) c.globalAlpha *= o.alpha;
-  if (o.glow) { c.shadowColor = o.glow; c.shadowBlur = o.gb || 24; }
-  if (o.st) { c.lineJoin = 'round'; c.lineWidth = o.sw || 10; c.strokeStyle = o.st; c.strokeText(s, 0, 0); if (!o.glow) c.shadowColor = 'transparent'; }
-  if (o.c !== null) { c.fillStyle = o.c || '#fff'; c.fillText(s, 0, 0); }
-  c.restore();
-}
-// rounded label; returns its width. a: 'left' | 'center' | 'right' anchor at x; y is the top
-function chip(c, s, x, y, o = {}) {
-  const f = o.f || '700 24px Inter', px = o.px == null ? pxOf(f) * 0.75 : o.px, h = o.h || pxOf(f) * 1.9, w = textW(c, s, f, o.ls || 0) + px * 2;
-  const x0 = o.a === 'center' ? x - w / 2 : o.a === 'right' ? x - w : x;
-  c.save(); if (o.alpha != null) c.globalAlpha *= o.alpha; if (o.shadow) { c.shadowColor = o.shadow; c.shadowBlur = o.sb || 24; c.shadowOffsetY = 8; }
-  rr(c, x0, y, w, h, o.r == null ? h / 2 : o.r); c.fillStyle = o.bg || '#fff'; c.fill(); c.shadowColor = 'transparent';
-  if (o.stroke) { c.strokeStyle = o.stroke; c.lineWidth = o.sw || 2; c.stroke(); }
-  txt(c, s, x0 + px, y + h / 2 + pxOf(f) * 0.05, { f, c: o.fg || '#111', b: 'middle', ls: o.ls }); c.restore(); return w;
-}
-// ---------- animation primitives ----------
-const pop = (t, t0, d = 0.45, s = 1.9) => ez.back(span(t, t0, t0 + d), s);
-const inn = (t, t0, d = 0.5) => ez.outExpo(span(t, t0, t0 + d));
-const out = (t, t0, d = 0.35) => 1 - ez.in3(span(t, t0, t0 + d));
-const typed = (full, t, a, b) => full.slice(0, Math.floor(full.length * span(t, a, b) + 1e-6));
-const count = (v0, v1, t, a, b, e = ez.out3) => lerp(v0, v1, e(span(t, a, b)));
-const pulse = (t, t0, d = 0.6) => { const u = (t - t0) / d; return u < 0 || u > 1 ? 0 : Math.sin(Math.PI * u); };
-// a word slams in: big, blurred and transparent, settling with an expo ease
-function slam(c, s, x, y, font, color, t0, t, o = {}) {
-  if (t < t0) return textW(c, s, font, o.ls || 0); const u = span(t, t0, t0 + (o.dur || 0.28)), e = ez.outExpo(u), sc = lerp(o.from || 1.9, 1, e);
-  c.save(); if (u < 1 && !o.noBlur) c.filter = `blur(${(1 - e) * 10}px)`;
-  txt(c, s, x, y, Object.assign({}, o, { f: font, c: color, s: sc * (o.s || 1), alpha: Math.min(1, e * 2.2) * (o.alpha == null ? 1 : o.alpha) })); c.restore();
-  return textW(c, s, font, o.ls || 0);
-}
-// a word rises from behind a mask line
-function rise(c, s, x, y, font, color, t0, t, o = {}) {
-  const w = textW(c, s, font, o.ls || 0); if (t < t0) return w;
-  const px = pxOf(font), X = o.a === 'center' ? x - w / 2 : o.a === 'right' ? x - w : x, e = ez.outExpo(span(t, t0, t0 + (o.dur || 0.5)));
-  c.save(); c.beginPath(); c.rect(X - 20, y - px * 1.05, w + 40, px * 1.38); c.clip();
-  txt(c, s, X, y + (1 - e) * px * 1.0, { f: font, c: color, ls: o.ls, alpha: Math.min(1, e * 1.6) * (o.alpha == null ? 1 : o.alpha), st: o.st, sw: o.sw, glow: o.glow });
-  c.restore(); return w;
-}
-// words: [[text, t0, color?]]; kind: 'rise' | 'slam' | 'pop' | 'fade'; returns word boxes
-function wordLine(c, words, x, y, font, color, t, o = {}) {
-  const sp = textW(c, ' ', font, o.ls || 0) * (o.space || 1), ws = words.map(([s]) => textW(c, s, font, o.ls || 0)), tot = ws.reduce((a, b) => a + b, 0) + sp * (words.length - 1);
-  let cx = o.a === 'center' ? x - tot / 2 : o.a === 'right' ? x - tot : x; const boxes = [];
-  words.forEach(([s, t0, col], i) => {
-    boxes.push({ x: cx, w: ws[i], y, t0 }); const k = o.kind || 'rise', cl = col || color;
-    if (k === 'slam') slam(c, s, cx + ws[i] / 2, y, font, cl, t0, t, Object.assign({}, o, { a: 'center' }));
-    else if (k === 'pop') { const p = pop(t, t0, 0.35); if (p > 0) txt(c, s, cx + ws[i] / 2, y, Object.assign({}, o, { f: font, c: cl, a: 'center', s: p, alpha: Math.min(1, p * 2) })); }
-    else if (k === 'fade') { const p = inn(t, t0, 0.4); if (p > 0) txt(c, s, cx, y + (1 - p) * 14, Object.assign({}, o, { f: font, c: cl, a: 'left', alpha: p * (o.alpha == null ? 1 : o.alpha) })); }
-    else rise(c, s, cx, y, font, cl, t0, t, Object.assign({}, o, { a: 'left' }));
-    cx += ws[i] + sp;
-  });
-  return boxes;
-}
-// highlighter swipe behind a word box, grows from the left
-function swipeBehind(c, box, font, p, color, o = {}) {
-  if (p <= 0) return; const px = pxOf(font), pad = o.pad == null ? px * 0.16 : o.pad, e = ez.outExpo(clamp(p));
-  c.save(); c.fillStyle = color; if (o.skew) { c.translate(box.x, box.y); c.transform(1, 0, -0.18, 1, 0, 0); c.translate(-box.x, -box.y); }
-  rr(c, box.x - pad, box.y - px * (o.top || 0.86), (box.w + pad * 2) * e, px * (o.hh || 1.08), o.r == null ? px * 0.14 : o.r); c.fill(); c.restore();
-}
-// ---------- drawing helpers ----------
-function leader(c, x1, y1, x2, y2, col = '#fff', w = 2, p = 1) {
-  if (p <= 0) return; c.save(); c.strokeStyle = col; c.fillStyle = col; c.lineWidth = w; c.beginPath(); c.moveTo(x1, y1); c.lineTo(lerp(x1, x2, clamp(p)), lerp(y1, y2, clamp(p))); c.stroke();
-  c.beginPath(); c.arc(x1, y1, w * 2.4, 0, TAU); c.fill(); c.restore();
-}
-function arrowHead(c, x, y, ang, s, col) { c.save(); c.translate(x, y); c.rotate(ang); c.fillStyle = col; c.beginPath(); c.moveTo(0, 0); c.lineTo(-s, -s * 0.55); c.lineTo(-s * 0.72, 0); c.lineTo(-s, s * 0.55); c.closePath(); c.fill(); c.restore(); }
-// hand-drawn polyline revealed to progress p (0..1); jitter is seeded and stable
-function hd(c, pts, o = {}) {
-  const p = o.p == null ? 1 : clamp(o.p); if (p <= 0) return; const r = rng(o.seed || 1), j = o.j == null ? 2 : o.j;
-  const J = pts.map(() => [(r() - 0.5) * j * 2, (r() - 0.5) * j * 2, (r() - 0.5) * j * 2, (r() - 0.5) * j * 2]);
-  let L = 0; const seg = []; for (let i = 1; i < pts.length; i++) { const d = Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1]); seg.push(d); L += d; }
-  c.save(); c.strokeStyle = o.col || '#111'; c.lineWidth = o.w || 4; c.lineCap = c.lineJoin = 'round'; if (o.alpha != null) c.globalAlpha *= o.alpha;
-  for (let pass = 0; pass < (o.passes || 2); pass++) {
-    let left = L * p; c.beginPath(); c.moveTo(pts[0][0] + J[0][pass * 2], pts[0][1] + J[0][pass * 2 + 1]);
-    for (let i = 1; i < pts.length && left > 0; i++) { const u = Math.min(1, left / seg[i - 1]); left -= seg[i - 1];
-      c.lineTo(lerp(pts[i - 1][0] + J[i - 1][pass * 2], pts[i][0] + J[i][pass * 2], u), lerp(pts[i - 1][1] + J[i - 1][pass * 2 + 1], pts[i][1] + J[i][pass * 2 + 1], u)); }
-    c.stroke(); c.lineWidth *= 0.6; }
-  c.restore();
-}
-const ellipsePts = (cx, cy, rx, ry, turns = 1.08, n = 48, a0 = -0.5) => Array.from({ length: n + 1 }, (_, i) => { const a = a0 + i / n * TAU * turns, k = 1 + 0.03 * Math.sin(i * 1.7) + i * 0.0015; return [cx + Math.cos(a) * rx * k, cy + Math.sin(a) * ry * k]; });
-const quadPts = (a, q, b, n = 40) => Array.from({ length: n + 1 }, (_, i) => { const u = i / n, v = 1 - u; return [v * v * a[0] + 2 * v * u * q[0] + u * u * b[0], v * v * a[1] + 2 * v * u * q[1] + u * u * b[1]]; });
-function polyPart(c, pts, p) { const n = Math.max(2, Math.ceil(pts.length * clamp(p))); c.beginPath(); pts.slice(0, n).forEach(([x, y], i) => (i ? c.lineTo(x, y) : c.moveTo(x, y))); }
-function blob(c, cx, cy, r, seed, k = 0.28, n = 18, sq = 0.85) { const R = rng(seed), rs = Array.from({ length: n }, () => 1 + (R() - 0.5) * 2 * k); c.beginPath(); for (let i = 0; i <= n; i++) { const a = i / n * TAU, q = rs[i % n]; const x = cx + Math.cos(a) * r * q, y = cy + Math.sin(a) * r * q * sq; i ? c.lineTo(x, y) : c.moveTo(x, y); } c.closePath(); }
-function star(c, x, y, r1, r2, n = 5, rot = -Math.PI / 2) { c.beginPath(); for (let i = 0; i < n * 2; i++) { const a = rot + i / (n * 2) * TAU, q = i % 2 ? r2 : r1; c.lineTo(x + Math.cos(a) * q, y + Math.sin(a) * q); } c.closePath(); }
-// pre-baked grain tiles, stepped at 24 fps
-const GRAIN = (() => { const tiles = []; for (let k = 0; k < 6; k++) { const L = CM.layer(256, 256), x = L.getContext('2d'), r = rng('grain' + k), d = x.createImageData(256, 256); for (let i = 0; i < d.data.length; i += 4) { const v = r() * 255; d.data[i] = d.data[i + 1] = d.data[i + 2] = v; d.data[i + 3] = 255; } x.putImageData(d, 0, 0); tiles.push(L); } return tiles; })();
-function grain(c, t, a = 0.06, mode = 'overlay') { c.save(); c.globalAlpha = a; c.globalCompositeOperation = mode; const tile = GRAIN[Math.floor(t * 24) % 6], pat = c.createPattern(tile, 'repeat'), r = rng(Math.floor(t * 24)); c.translate(-r() * 256, -r() * 256); c.fillStyle = pat; c.fillRect(0, 0, W + 512, H + 512); c.restore(); }
-function vignette(c, a = 0.5, inner = 0.3, outer = 0.8) { c.fillStyle = rg(c, W / 2, H / 2, Math.max(W, H) * inner, Math.max(W, H) * outer, [[0, 'rgba(0,0,0,0)'], [1, `rgba(0,0,0,${a})`]]); c.fillRect(0, 0, W, H); }
-// a simple faceless presenter used as a stand-in for footage
-function person(c, cx, by, s, o = {}) {
-  const sk = o.skin || '#d9a284', hr = o.hair || '#2a1d17', shirt = o.shirt || '#2f4b7c', tilt = o.tilt || 0;
-  c.save(); c.translate(cx, by); c.rotate(tilt * 0.02); c.translate(-cx, -by);
-  c.fillStyle = shirt; c.beginPath(); c.moveTo(cx - 128 * s, by); c.bezierCurveTo(cx - 124 * s, by - 96 * s, cx - 86 * s, by - 132 * s, cx - 34 * s, by - 142 * s); c.lineTo(cx + 34 * s, by - 142 * s); c.bezierCurveTo(cx + 86 * s, by - 132 * s, cx + 124 * s, by - 96 * s, cx + 128 * s, by); c.closePath(); c.fill();
-  c.fillStyle = 'rgba(0,0,0,.18)'; c.beginPath(); c.moveTo(cx - 24 * s, by - 142 * s); c.lineTo(cx, by - 112 * s); c.lineTo(cx + 24 * s, by - 142 * s); c.fill();
-  c.fillStyle = sk; rr(c, cx - 21 * s, by - 178 * s, 42 * s, 48 * s, 12 * s); c.fill();
-  const hy = by - 220 * s + (o.nod || 0) * s; c.beginPath(); c.ellipse(cx, hy, 45 * s, 56 * s, 0, 0, TAU); c.fill();
-  c.beginPath(); c.ellipse(cx - 45 * s, hy + 6 * s, 7 * s, 12 * s, 0, 0, TAU); c.ellipse(cx + 45 * s, hy + 6 * s, 7 * s, 12 * s, 0, 0, TAU); c.fill();
-  c.fillStyle = rg(c, cx + 26 * s, hy + 10 * s, 4 * s, 60 * s, [[0, 'rgba(0,0,0,0)'], [1, 'rgba(0,0,0,.22)']]); c.beginPath(); c.ellipse(cx, hy, 45 * s, 56 * s, 0, 0, TAU); c.fill();
-  c.fillStyle = hr; c.beginPath(); c.ellipse(cx, hy - 18 * s, 49 * s, 42 * s, 0, Math.PI * 0.98, Math.PI * 2.02); c.fill(); c.beginPath(); c.ellipse(cx + 8 * s, hy - 42 * s, 40 * s, 20 * s, -0.2, 0, TAU); c.fill();
-  c.restore();
-}
-// footage: your own clip when loaded (window.loadFootage), else a defocused room with a faceless presenter
-const FOOT = { video: null };
-function footage(c, x, y, w, h, t, o = {}) {
-  c.save(); rr(c, x, y, w, h, o.r || 0); c.clip();
-  const v = FOOT.video;
-  if (v && v.readyState >= 2) { const s = Math.max(w / v.videoWidth, h / v.videoHeight), z = o.zoom || 1; c.translate(x + w / 2, y + h / 2); c.scale(z, z); c.drawImage(v, -v.videoWidth * s / 2, -v.videoHeight * s / 2, v.videoWidth * s, v.videoHeight * s); c.restore(); return true; }
-  const z = o.zoom || 1; c.translate(x + w / 2, y + h / 2); c.scale(z, z); c.translate(-(x + w / 2), -(y + h / 2));
-  c.fillStyle = lg(c, x, y, x, y + h, [[0, o.bg ? o.bg[0] : '#5a6b7d'], [1, o.bg ? o.bg[1] : '#2a3340']]); c.fillRect(x, y, w, h);
-  const r = rng(o.seed || 5); c.filter = `blur(${Math.max(4, w / 90)}px)`;
-  c.fillStyle = o.win || 'rgba(255,240,210,.22)'; c.fillRect(x + w * 0.08, y + h * 0.1, w * 0.32, h * 0.42);
-  c.fillStyle = 'rgba(0,0,0,.16)'; c.fillRect(x + w * 0.62, y + h * 0.18, w * 0.3, h * 0.07); c.fillRect(x + w * 0.62, y + h * 0.33, w * 0.3, h * 0.07);
-  for (let i = 0; i < 14; i++) { const bx = x + r() * w, by2 = y + r() * h * 0.7, br = (0.02 + r() * 0.05) * w; c.fillStyle = rg(c, bx, by2, 0, br, [[0, o.bokeh || 'rgba(255,214,150,.5)'], [1, 'rgba(255,214,150,0)']]); c.beginPath(); c.arc(bx, by2, br, 0, TAU); c.fill(); }
-  c.filter = 'none';
-  const nod = Math.sin(t * 2.1) * 3 + Math.sin(t * 5.3) * 1.2, sway = Math.sin(t * 0.9) * 0.6;
-  person(c, x + w / 2 + (o.dx || 0) * w, y + h + (o.dy || 0) * h, (o.s || 1.25) * h / 1280 * 2, Object.assign({}, o, { nod, tilt: sway }));
-  c.fillStyle = rg(c, x + w / 2, y + h / 2, Math.min(w, h) * 0.3, Math.max(w, h) * 0.75, [[0, 'rgba(0,0,0,0)'], [1, 'rgba(0,0,0,.42)']]); c.fillRect(x, y, w, h);
-  c.restore(); return false;
-}
-// ---------- scene layers and cuts ----------
-const LA = CM.layer(W, H), LB = CM.layer(W, H);
-function sceneLayer(L, draw, t) { const x = L.getContext('2d'); x.setTransform(1, 0, 0, 1, 0, 0); x.globalAlpha = 1; x.globalCompositeOperation = 'source-over'; x.filter = 'none'; x.clearRect(0, 0, W, H); draw(x, t); return L; }
-// cut types: push (dir), up, fade, zoom (x, y), whip (dir), flash (color), iris (x, y, color), glitch, wipe (color), page
-function composite(ctx, t, SCENES, CUTS, background) {
-  ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over'; ctx.filter = 'none';
-  if (background) background(ctx, t);
-  let idx = 0; for (const c of CUTS) if (t >= c.t) idx++;
-  const cut = CUTS.find((c) => t >= c.t && t < c.t + c.d);
-  if (!cut) { ctx.drawImage(sceneLayer(LA, SCENES[idx], t), 0, 0); return; }
-  const u = (t - cut.t) / cut.d, e = ez.inout3(u), A = sceneLayer(LA, SCENES[idx - 1], t), B = sceneLayer(LB, SCENES[idx], t), dir = cut.dir || 1;
-  const ty = cut.type;
-  if (ty === 'push' || ty === 'up') {
-    const vx = ty === 'push', s = 1 - 0.04 * Math.sin(Math.PI * u), D = vx ? W : H;
-    for (const [L, off] of [[A, -e * D * dir], [B, (1 - e) * D * dir]]) { ctx.save(); ctx.translate(W / 2 + (vx ? off : 0), H / 2 + (vx ? 0 : off)); ctx.scale(s, s); ctx.drawImage(L, -W / 2, -H / 2); ctx.restore(); }
-  } else if (ty === 'whip') {
-    const L = u < 0.5 ? A : B, off = (u < 0.5 ? -ez.in3(u * 2) : 1 - ez.out3((u - 0.5) * 2)) * W * dir;
-    for (let i = 0; i < 7; i++) { ctx.save(); ctx.globalAlpha = 0.22; ctx.drawImage(L, off + (i - 3) * 26 * Math.sin(Math.PI * u) * dir, 0); ctx.restore(); }
-  } else if (ty === 'zoom') {
-    const z = lerp(1, 3.2, ez.in3(clamp(u / 0.65))); ctx.save(); ctx.globalAlpha = 1 - span(u, 0.38, 0.65); ctx.translate(cut.x, cut.y); ctx.scale(z, z); ctx.drawImage(A, -cut.x, -cut.y); ctx.restore();
-    const zb = lerp(1.15, 1, ez.out3(span(u, 0.35, 1))); ctx.save(); ctx.globalAlpha = span(u, 0.35, 0.72); ctx.translate(W / 2, H / 2); ctx.scale(zb, zb); ctx.drawImage(B, -W / 2, -H / 2); ctx.restore();
-  } else if (ty === 'flash') {
-    ctx.drawImage(u < 0.5 ? A : B, 0, 0); ctx.fillStyle = cut.color || '#fff'; ctx.globalAlpha = 1 - Math.abs(u - 0.5) * 2; ctx.fillRect(0, 0, W, H); ctx.globalAlpha = 1;
-  } else if (ty === 'iris') {
-    const cx = cut.x == null ? W / 2 : cut.x, cy = cut.y == null ? H / 2 : cut.y, R = Math.hypot(W, H);
-    if (u < 0.5) { const r = R * (1 - ez.in3(u * 2)); ctx.fillStyle = cut.color || '#111'; ctx.fillRect(0, 0, W, H); ctx.save(); ctx.beginPath(); ctx.arc(cx, cy, r, 0, TAU); ctx.clip(); ctx.drawImage(A, 0, 0); ctx.restore(); if (cut.ring) { ctx.strokeStyle = cut.ring; ctx.lineWidth = 14; ctx.beginPath(); ctx.arc(cx, cy, r, 0, TAU); ctx.stroke(); } }
-    else { const r = R * ez.out3((u - 0.5) * 2); ctx.fillStyle = cut.color || '#111'; ctx.fillRect(0, 0, W, H); ctx.save(); ctx.beginPath(); ctx.arc(cx, cy, r, 0, TAU); ctx.clip(); ctx.drawImage(B, 0, 0); ctx.restore(); if (cut.ring) { ctx.strokeStyle = cut.ring; ctx.lineWidth = 14; ctx.beginPath(); ctx.arc(cx, cy, r, 0, TAU); ctx.stroke(); } }
-  } else if (ty === 'glitch') {
-    const L = u < 0.5 ? A : B, r = rng('cut' + Math.floor(t * 30)); ctx.drawImage(L, 0, 0);
-    for (let i = 0; i < 9; i++) { const y = r() * H, h = 10 + r() * H * 0.06, dx = (r() - 0.5) * W * 0.18 * Math.sin(Math.PI * u); ctx.drawImage(L, 0, y, W, h, dx, y, W, h); }
-    ctx.globalCompositeOperation = 'screen'; ctx.globalAlpha = 0.5 * Math.sin(Math.PI * u); ctx.fillStyle = '#ff0040'; ctx.fillRect(0, 0, W, H); ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over';
-  } else if (ty === 'wipe') {
-    ctx.drawImage(A, 0, 0); const x = lerp(-W * 0.3, W * 1.3, e); ctx.save(); ctx.beginPath(); ctx.moveTo(x - H * 0.3, 0); ctx.lineTo(-10, 0); ctx.lineTo(-10, H); ctx.lineTo(x + H * 0.3 - H * 0.6, H); ctx.lineTo(x - H * 0.3 + 0, 0); ctx.closePath();
-    ctx.beginPath(); ctx.moveTo(-10, 0); ctx.lineTo(x, 0); ctx.lineTo(x - H * 0.35, H); ctx.lineTo(-10, H); ctx.closePath(); ctx.clip(); ctx.drawImage(B, 0, 0); ctx.restore();
-    if (cut.color) { ctx.save(); ctx.strokeStyle = cut.color; ctx.lineWidth = 26; ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x - H * 0.35, H); ctx.stroke(); ctx.restore(); }
-  } else if (ty === 'page') {
-    ctx.drawImage(B, 0, 0); const x = W * (1 - e); ctx.save(); ctx.beginPath(); ctx.rect(0, 0, x, H); ctx.clip(); ctx.drawImage(A, 0, 0); ctx.restore();
-    ctx.fillStyle = lg(ctx, x - 60, 0, x + 40, 0, [[0, 'rgba(0,0,0,0)'], [0.6, 'rgba(0,0,0,0.25)'], [1, 'rgba(0,0,0,0)']]); ctx.fillRect(x - 60, 0, 100, H);
-  } else { ctx.save(); ctx.globalAlpha = 1 - e; ctx.drawImage(A, 0, 0); ctx.globalAlpha = e; ctx.drawImage(B, 0, 0); ctx.restore(); }
-}
-// camera: zoom z about (x, y), with optional rotation and shake
-function cam(c, x, y, z = 1, rot = 0) { c.translate(x, y); c.scale(z, z); if (rot) c.rotate(rot); c.translate(-x, -y); }
-function shake(c, t, hits, amp = 14, d = 0.35) { let dx = 0, dy = 0; for (const h of hits) { const u = (t - h) / d; if (u > 0 && u < 1) { const k = (1 - u) * amp; dx += Math.sin(u * 61) * k; dy += Math.cos(u * 47) * k; } } c.translate(dx, dy); }
-function punch(t, hits, amt = 0.06, d = 0.45) { let z = 1; for (const h of hits) { const u = (t - h) / d; if (u > 0 && u < 1) z += amt * Math.exp(-u * 4) * Math.sin(Math.min(1, u * 6) * Math.PI / 2); } return z; }
-// ---------- Three.js (3D styles) ----------
-function makeGL() { if (typeof THREE === 'undefined') return null; const r = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true, alpha: true }); r.setPixelRatio(1); r.setSize(W, H, false); r.shadowMap.enabled = true; r.shadowMap.type = THREE.PCFSoftShadowMap; r.setClearColor(0x000000, 0); return r; }
-function lights3(s, o) {
-  const out = {};
-  if (o.hemi) s.add(out.hemi = new THREE.HemisphereLight(o.hemi[0], o.hemi[1], o.hemi[2]));
-  if (o.amb) s.add(out.amb = new THREE.AmbientLight(o.amb[0], o.amb[1]));
-  if (o.dir) { const d = out.dir = new THREE.DirectionalLight(o.dir[0], o.dir[1]); d.position.set(o.dir[2], o.dir[3], o.dir[4]);
-    if (o.shadow) { d.castShadow = true; d.shadow.mapSize.set(2048, 2048); const sc = d.shadow.camera; sc.left = -o.shadow; sc.right = o.shadow; sc.top = o.shadow; sc.bottom = -o.shadow; sc.near = 0.5; sc.far = 90; d.shadow.bias = -0.0006; }
-    s.add(d); }
-  out.points = (o.points || []).map(([col, int, x, y, z, dist]) => { const p = new THREE.PointLight(col, int, dist || 0); p.position.set(x, y, z); s.add(p); return p; });
-  return out;
-}
-const M3 = (g, color, o = {}) => { const m = new THREE.Mesh(g, new THREE.MeshStandardMaterial(Object.assign({ color, roughness: 0.85, metalness: 0 }, o))); m.castShadow = m.receiveShadow = true; return m; };
-const P3 = (g, color, o = {}) => { const m = new THREE.Mesh(g, new THREE.MeshPhysicalMaterial(Object.assign({ color, roughness: 0.2, metalness: 0, clearcoat: 1, clearcoatRoughness: 0.1 }, o))); m.castShadow = m.receiveShadow = true; return m; };
-const put = (parent, m, x = 0, y = 0, z = 0) => { m.position.set(x, y, z); parent.add(m); return m; };
-const proj3 = (camera, v) => { const p = v.clone().project(camera); return [(p.x + 1) / 2 * W, (1 - p.y) / 2 * H, p.z]; };
-// ---------- sound helpers ----------
-function padBed(k, t0, t1, o = {}) {
-  const bpm = o.bpm || 90, beat = 60 / bpm, bar = beat * 4, chords = o.chords || [['A3', 'C4', 'E4'], ['F3', 'A3', 'C4'], ['C4', 'E4', 'G4'], ['G3', 'B3', 'D4']], g = o.gain == null ? 1 : o.gain;
-  let i = 0;
-  for (let tb = t0; tb < t1 - 0.1; tb += bar, i++) {
-    const ch = chords[i % chords.length], len = Math.min(bar, t1 - tb);
-    ch.forEach((n, j) => { k.voice(tb, { type: o.wave || 'triangle', f: n, dur: len + 0.4, gain: 0.026 * g, a: 0.5, hold: Math.max(0, len - 0.9), filter: 'lowpass', ff: o.cut || 1300, pan: (j - (ch.length - 1) / 2) * 0.3, verb: 0.3, bus: 'music' }); });
-    k.voice(tb, { f: k.hz(ch[0]) / 2, dur: len + 0.2, gain: 0.05 * g, a: 0.3, hold: Math.max(0, len - 0.6), bus: 'music' });
-    for (let b = 0; b < 8; b++) {
-      const ts = tb + b * beat / 2; if (ts >= t1 - 0.05) break;
-      if (o.hats && ts >= o.hats[0] && ts < o.hats[1]) k.hiss(ts, { dur: b % 2 ? 0.03 : 0.045, filter: 'highpass', ff: 8000, gain: (b % 2 ? 0.014 : 0.022) * g, bus: 'music' });
-      if (o.kick && ts >= o.kick[0] && ts < o.kick[1] && (b === 0 || b === 4)) k.voice(ts, { f: [[0, 120], [0.09, 46]], dur: 0.26, gain: 0.16 * g, bus: 'music' });
-      if (o.snare && ts >= o.snare[0] && ts < o.snare[1] && (b === 2 || b === 6)) k.hiss(ts, { dur: 0.14, filter: 'bandpass', ff: 1800, q: 0.8, gain: 0.08 * g, verb: 0.2, bus: 'music' });
-    }
-  }
-}
-// overall level wrapper so a score can be written at comfortable gains
-function gainKit(k0, G) { return Object.assign({}, k0, { voice: (t, p) => k0.voice(t, Object.assign({}, p, { gain: (p.gain == null ? 0.3 : p.gain) * G })), hiss: (t, p) => k0.hiss(t, Object.assign({}, p, { gain: (p.gain == null ? 0.3 : p.gain) * G })), play: (n, t, o = {}) => k0.play(n, t, Object.assign({}, o, { gain: (o.gain == null ? 1 : o.gain) * G })) }); }
-const SND = {
-  tick1: (k, t, pan = 0, g = 1) => { k.voice(t, { f: [[0, 760], [0.05, 1150]], dur: 0.07, gain: 0.07 * g, pan, soft: true }); k.hiss(t, { dur: 0.012, filter: 'highpass', ff: 6000, gain: 0.05 * g, pan, soft: true }); },
-  chime: (k, t, pan = 0, g = 1, n = ['C6', 'G6']) => { k.voice(t, { f: n[0], dur: 0.5, gain: 0.08 * g, a: 0.003, verb: 0.3, pan }); k.voice(t + 0.07, { f: n[1], dur: 0.6, gain: 0.07 * g, a: 0.003, verb: 0.3, pan }); },
-  swipe: (k, t, pan = 0, g = 1) => { k.hiss(t, { dur: 0.24, filter: 'bandpass', ff: [[0, 2400], [0.22, 6200]], q: 1.2, gain: 0.14 * g, a: 0.08, pan }); k.voice(t + 0.12, { f: 'E6', dur: 0.5, gain: 0.05 * g, verb: 0.35, pan }); },
-  tap: (k, t, pan = 0, g = 1, f = 420) => { k.voice(t, { f: [[0, f * 1.6], [0.04, f]], dur: 0.09, gain: 0.16 * g, pan, soft: true }); k.hiss(t, { dur: 0.02, filter: 'bandpass', ff: 1200, q: 1.5, gain: 0.08 * g, pan, soft: true }); },
-  paper: (k, t, pan = 0, g = 1, d = 0.28) => k.hiss(t, { color: 'pink', dur: d, filter: 'bandpass', ff: [[0, 700], [d, 3200]], q: 0.8, gain: 0.12 * g, a: d * 0.4, pan: [pan - 0.3, pan + 0.3], soft: true }),
-  bloop: (k, t, pan = 0, g = 1, f = 520) => k.voice(t, { f: [[0, f], [0.12, f * 1.5]], dur: 0.16, gain: 0.12 * g, pan, verb: 0.15 }),
-  pluck: (k, t, n, pan = 0, g = 1) => { k.voice(t, { type: 'triangle', f: n, dur: 0.6, gain: 0.1 * g, a: 0.002, verb: 0.3, pan }); k.voice(t, { f: n, dur: 0.25, gain: 0.05 * g, a: 0.002, pan }); },
-  chord: (k, t, notes, g = 1, d = 1.6) => notes.forEach((n, i) => k.voice(t + i * 0.05, { f: n, dur: d, gain: 0.05 * g, a: 0.01, verb: 0.4, pan: (i - (notes.length - 1) / 2) * 0.25 })),
-  scratch: (k, t, d = 0.2, pan = 0, g = 1) => { const r = CM.rng('sc' + t); for (let x = 0; x < d; x += 0.018 + r() * 0.01) k.hiss(t + x, { dur: 0.025, filter: 'bandpass', ff: 2600 + r() * 1800, q: 2, gain: 0.08 * g * (0.5 + r() * 0.6), pan, soft: true }); },
-  thud: (k, t, g = 1) => { k.voice(t, { f: [[0, 110], [0.15, 45]], dur: 0.3, gain: 0.35 * g }); k.hiss(t, { color: 'brown', dur: 0.15, filter: 'lowpass', ff: 500, gain: 0.2 * g }); },
-  beep: (k, t, f = 880, d = 0.12, g = 1, pan = 0) => k.voice(t, { type: 'square', f, dur: d, gain: 0.05 * g, a: 0.002, hold: d * 0.7, filter: 'lowpass', ff: 3000, pan }),
-};
-
-// =====================================================================================================
-// STYLE: Tier List
-// Tiles fly from a stash, hang with their name, then arc into S to D rows with a snap and a row flash.
-// Demo topic: "My fruit tier list".
-// =====================================================================================================
-const C = { bg: '#16161c', row: '#23232b', tile: '#2f2f3a', ink: '#ffffff', mute: '#a5a5b5' };
-const HEAD = (px) => `400 ${px}px "Archivo Black", Impact, sans-serif`, BODY = (px, w = 800) => `${w} ${px}px Inter, system-ui, sans-serif`;
-const TIERS = [['S', '#ff6b6b'], ['A', '#ffb36b'], ['B', '#ffe066'], ['C', '#8ce99a'], ['D', '#74c0fc']];
-const ICON = {
-  straw: (c) => { c.fillStyle = '#e63946'; c.beginPath(); c.moveTo(-22, -12); c.quadraticCurveTo(0, -24, 22, -12); c.quadraticCurveTo(15, 24, 0, 27); c.quadraticCurveTo(-15, 24, -22, -12); c.fill(); c.fillStyle = '#ffe066'; for (let i = 0; i < 6; i++) c.fillRect(-12 + (i % 3) * 10, -6 + (i / 3 | 0) * 13, 3, 4); c.fillStyle = '#2f9e44'; c.fillRect(-15, -24, 30, 7); },
-  mango: (c) => { c.fillStyle = lg(c, -22, 0, 22, 0, [[0, '#ff922b'], [1, '#ffd43b']]); c.beginPath(); c.ellipse(0, 0, 26, 21, -0.5, 0, TAU); c.fill(); },
-  banana: (c) => { c.strokeStyle = '#ffd43b'; c.lineWidth = 13; c.lineCap = 'round'; c.beginPath(); c.arc(0, -20, 30, 0.4, 2.7); c.stroke(); },
-  apple: (c) => { c.fillStyle = '#e03131'; c.beginPath(); c.arc(-9, 3, 18, 0, TAU); c.arc(9, 3, 18, 0, TAU); c.fill(); c.fillStyle = '#2f9e44'; c.beginPath(); c.ellipse(8, -20, 9, 4, -0.5, 0, TAU); c.fill(); },
-  orange: (c) => { c.fillStyle = '#fd7e14'; c.beginPath(); c.arc(0, 0, 24, 0, TAU); c.fill(); c.fillStyle = 'rgba(255,255,255,0.25)'; c.beginPath(); c.arc(-8, -8, 6, 0, TAU); c.fill(); },
-  grape: (c) => { c.fillStyle = '#7048e8'; [[0, -15], [-10, -3], [10, -3], [-6, 10], [6, 10], [0, 21]].forEach(([a, b]) => { c.beginPath(); c.arc(a, b, 9, 0, TAU); c.fill(); }); },
-  melon: (c) => { c.fillStyle = '#2f9e44'; c.beginPath(); c.arc(0, -8, 30, 0, Math.PI); c.fill(); c.fillStyle = '#ff6b6b'; c.beginPath(); c.arc(0, -8, 24, 0, Math.PI); c.fill(); c.fillStyle = '#222'; [-10, 0, 10].forEach((a) => c.fillRect(a, 2, 3, 5)); },
-  durian: (c) => { c.fillStyle = '#9ab83a'; c.beginPath(); c.ellipse(0, 0, 25, 28, 0, 0, TAU); c.fill(); c.fillStyle = '#6f8a22'; for (let i = 0; i < 10; i++) { const a = i / 10 * TAU; c.beginPath(); c.moveTo(Math.cos(a) * 22, Math.sin(a) * 25); c.lineTo(Math.cos(a) * 32, Math.sin(a) * 35); c.lineTo(Math.cos(a + 0.3) * 22, Math.sin(a + 0.3) * 25); c.fill(); } },
-};
-// [name, icon, tier index, time it lifts]
-const ITEMS = [['Strawberry', 'straw', 0, 1.2], ['Banana', 'banana', 1, 2.8], ['Grapes', 'grape', 2, 4.4], ['Mango', 'mango', 0, 6.0], ['Apple', 'apple', 1, 7.6], ['Durian', 'durian', 4, 9.6]];
-const HOLD = 0.7, FLY = 0.45, TL = { D: 14, title: [0.2, 0.45], roll: [8.9, 9.6], out: 11.8 };
-const ROWY = (i) => 230 + i * 128, SLOT = (r, k) => [176 + k * 104, ROWY(r) + 60];
-const slotOf = (idx) => { const r = ITEMS[idx][2]; let k = 0; for (let j = 0; j < idx; j++) if (ITEMS[j][2] === r) k++; return [r, k]; };
-function tile(c, x, y, s, ic) { c.save(); c.translate(x, y); c.scale(s[0], s[1]); rr(c, -46, -46, 92, 92, 18); c.fillStyle = C.tile; c.fill(); ICON[ic](c); c.restore(); }
-function explainer(c, t) {
-  c.setTransform(1, 0, 0, 1, 0, 0); c.globalAlpha = 1; c.filter = 'none'; fillAll(c, C.bg);
-  wordLine(c, [['MY', TL.title[0]], ['FRUIT', TL.title[0] + 0.1]], 40, 104, HEAD(60), C.ink, t); wordLine(c, [['TIER', TL.title[1]], ['LIST', TL.title[1] + 0.1]], 40, 172, HEAD(60), '#ffb36b', t);
-  TIERS.forEach(([l, col], i) => { const y = ROWY(i); c.fillStyle = C.row; c.fillRect(20, y, 680, 120); const fl = Math.max(...ITEMS.map(([, , r, t0], j) => (r === i ? pulse(t, t0 + HOLD + FLY, 0.35) : 0))); if (fl > 0) { c.fillStyle = `rgba(255,255,255,${fl * 0.12})`; c.fillRect(20, y, 680, 120); } c.fillStyle = col; c.fillRect(20, y, 110, 120); txt(c, l, 75, y + 84, { f: HEAD(64), c: C.bg, a: 'center' }); });
-  // stash
-  c.fillStyle = 'rgba(255,255,255,0.05)'; rr(c, 20, 1100, 680, 130, 20); c.fill(); txt(c, 'UNRANKED', 40, 1090, { f: BODY(20), c: C.mute, ls: 3 });
-  ITEMS.forEach(([name, ic, r, t0], i) => {
-    const [sx, sy] = [80 + i * 112, 1165], [tx, ty] = SLOT(...slotOf(i)), mid = [360, 640];
-    if (t < t0) { tile(c, sx, sy, [0.8, 0.8], ic); return; }
-    const a = span(t, t0, t0 + 0.35), hold = t < t0 + HOLD, f = span(t, t0 + HOLD, t0 + HOLD + FLY);
-    if (hold || f < 1) { let x, y, s; if (hold) { x = lerp(sx, mid[0], ez.outExpo(a)); y = lerp(sy, mid[1], ez.outExpo(a)); s = lerp(0.8, 1.9, ez.back(a)); } else { const e = ez.inout3(f); x = lerp(mid[0], tx, e); y = lerp(mid[1], ty, e) - Math.sin(Math.PI * e) * 120; s = lerp(1.9, 1, e); }
-      c.save(); c.shadowColor = 'rgba(0,0,0,0.6)'; c.shadowBlur = 30; tile(c, x, y, [s, s], ic); c.restore(); if (hold) chip(c, name, 360, 760, { f: BODY(36), bg: '#fff', fg: C.bg, a: 'center', alpha: a }); }
-    else { const sq = pulse(t, t0 + HOLD + FLY, 0.25); tile(c, tx, ty, [1 + 0.15 * sq, 1 - 0.15 * sq], ic); }
-  });
-  if (t > TL.roll[0] && t < TL.roll[1] + 0.3) { const p = inn(t, TL.roll[0], 0.3); txt(c, '...', 360, 900, { f: HEAD(80), c: '#fff', a: 'center', alpha: p }); }
-  { const p = inn(t, TL.out, 0.4); if (p > 0) { c.save(); c.globalAlpha = p; c.fillStyle = 'rgba(22,22,28,0.92)'; c.fillRect(0, 1080, W, 200); c.restore(); wordLine(c, [['Agree?', TL.out], ['Drop', TL.out + 0.3], ['your', TL.out + 0.4], ['S', TL.out + 0.5, '#ff6b6b'], ['tier.', TL.out + 0.6]], 360, 1180, HEAD(48), '#fff', t, { a: 'center' }); } }
-}
-
-// =================================== SOUND SCORE ===================================
-// Bouncy and decisive: a simple beat, a whoosh for each lift, a rising tone while a tile hangs, a pop on
-// each snap (higher for better tiers), a drum roll before the last pick, and an open chord for the outro.
-function scoreSound(k) {
-  k = gainKit(k, 2.0);
-  padBed(k, 0, TL.D, { bpm: 112, chords: [['G3', 'B3', 'D4'], ['E3', 'G3', 'B3'], ['C3', 'E3', 'G3'], ['D3', 'F#3', 'A3']], kick: [0.2, TL.roll[0]], hats: [0.2, TL.D], gain: 0.75 });
-  [TL.title[0], TL.title[0] + 0.1, TL.title[1], TL.title[1] + 0.1].forEach((t) => k.play('slam', t, { gain: 0.3 }));
-  ITEMS.forEach(([, , r, t0]) => { k.play('whoosh', t0, { dur: 0.35, gain: 0.3, top: 2400, dir: -1 }); k.voice(t0 + 0.2, { f: [[0, 400], [HOLD, 560]], dur: HOLD, gain: 0.03, soft: true }); k.play('pop', t0 + HOLD + FLY, { f: [1100, 900, 750, 600, 420][r], gain: 0.6 }); SND.tap(k, t0 + HOLD + FLY, 0, 0.6, 300); });
-  for (let x = TL.roll[0]; x < TL.roll[1]; x += 0.045) k.hiss(x, { dur: 0.04, filter: 'bandpass', ff: 1500, q: 0.7, gain: 0.12 * (0.6 + (x - TL.roll[0])), soft: true }); k.play('slam', ITEMS[5][3] + HOLD + FLY, { gain: 0.7 });
-  SND.chord(k, TL.out + 0.6, ['G4', 'B4', 'D5', 'G5'], 1);
-}
-
-// =================================== PLAYER ===================================
-const cvs = document.getElementById('stage'), ctx = cvs.getContext('2d');
-const DURATION = TL.D;
-window.seek = (t) => explainer(ctx, clamp(t, 0, DURATION));
-window.DURATION = DURATION;
-window.scoreSound = scoreSound;
-window.SFX = SFX;
-window.loadFootage = (url) => { const v = document.createElement('video'); v.src = url; v.muted = true; v.playsInline = true; v.loop = true; v.crossOrigin = 'anonymous'; v.addEventListener('loadeddata', () => { FOOT.video = v; try { v.currentTime = T % (v.duration || 1); } catch (e) {} draw(); }); v.load(); };
-
-const ui = { play: document.getElementById('play'), scrub: document.getElementById('scrub'), time: document.getElementById('time'), sound: document.getElementById('sound'), loop: document.getElementById('loop'), vo: document.getElementById('vofile'), foot: document.getElementById('footfile'), note: document.getElementById('vonote') };
-let T = 0, playing = false, last = 0, soundOn = true, loopOn = true, stopSound = null, voAudio = null;
-const fmt = (t) => t.toFixed(2) + ' / ' + DURATION.toFixed(2);
-function draw() { window.seek(T); ui.scrub.value = T; ui.time.textContent = fmt(T); }
-function syncFoot() { const v = FOOT.video; if (!v) return; try { v.currentTime = T % (v.duration || 1); if (playing) v.play().catch(() => {}); else v.pause(); } catch (e) {} }
-function startAudio() {
-  stopAudio(); if (!playing) return;
-  if (soundOn) stopSound = SFX.live(scoreSound, T, { voiceover: !!voAudio });
-  if (voAudio) { try { voAudio.currentTime = T; voAudio.play().catch(() => {}); } catch (e) {} }
-  syncFoot();
-}
-function stopAudio() { if (stopSound) { stopSound(); stopSound = null; } if (voAudio) voAudio.pause(); if (FOOT.video) FOOT.video.pause(); }
-function setPlaying(p) { playing = p; ui.play.textContent = p ? 'Pause' : 'Play'; last = performance.now(); if (p) startAudio(); else stopAudio(); }
-function tick(now) {
-  if (playing) {
-    T += (now - last) / 1000; last = now;
-    if (T >= DURATION) { if (loopOn) { T = 0; startAudio(); } else { T = DURATION; setPlaying(false); } }
-    draw();
-  }
-  requestAnimationFrame(tick);
-}
-ui.play.addEventListener('click', () => { if (!playing && T >= DURATION) T = 0; setPlaying(!playing); });
-ui.scrub.addEventListener('input', () => { T = parseFloat(ui.scrub.value); draw(); if (playing) startAudio(); else syncFoot(); });
-ui.sound.addEventListener('click', () => { soundOn = !soundOn; ui.sound.setAttribute('aria-pressed', soundOn); ui.sound.textContent = soundOn ? 'Sound on' : 'Sound off'; if (playing) startAudio(); });
-ui.loop.addEventListener('click', () => { loopOn = !loopOn; ui.loop.setAttribute('aria-pressed', loopOn); });
-ui.vo.addEventListener('change', () => {
-  const f = ui.vo.files && ui.vo.files[0]; if (!f) return;
-  if (voAudio) { voAudio.pause(); URL.revokeObjectURL(voAudio.src); }
-  voAudio = new Audio(URL.createObjectURL(f)); ui.note.textContent = 'Voiceover loaded: ' + f.name + '. Effects use the lighter mix.';
-  if (playing) startAudio();
-});
-if (ui.foot) ui.foot.addEventListener('change', () => { const f = ui.foot.files && ui.foot.files[0]; if (!f) return; window.loadFootage(URL.createObjectURL(f)); ui.note.textContent = 'Footage loaded: ' + f.name + '.'; });
-(async () => {
-  try { await Promise.all(["400 60px \"Archivo Black\"","800 30px Inter"].map((f) => document.fonts.load(f, 'AaZz09'))); await document.fonts.ready; } catch (e) {}
-  if (typeof setup === 'function') setup();
-  window.__posterT = 11; T = 11; draw(); window.__ready = true;
-  requestAnimationFrame((n) => { last = n; tick(n); });
-})();
-</script>