@amg555/frameforge-mcp 2.7.6 → 2.7.7

package/.agent/skills/motion-styles/sources/bio-glow.html

@@ -1,639 +0,0 @@
-<meta charset="utf-8">
-<title>Bio Glow</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=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@500;700&family=Anton&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;600;700;800&display=block">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-<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">Bio <em>Glow</em></h1>
-    <p class="meta">Reference animation · 14.0 s · 720×1280 · drawn in code, sound synthesized</p>
-  </div>
-  <div class="stage"><canvas id="stage" width="720" height="1280" aria-label="Bio Glow reference animation"></canvas></div>
-  <div class="bar">
-    <button id="play" type="button">Play</button>
-    <input id="scrub" type="range" min="0" max="14" step="0.01" value="0" aria-label="Scrub timeline">
-    <span id="time">0.00 / 14.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>
-// =====================================================================================================
-// BIO GLOW  ·  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: 'Bio Glow', em: 'Glow', W: 720, H: 1280, three: true, footage: false, poster: 9.3,
-  fonts: 'family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@500;700',
-  loads: ['700 60px "Space Grotesk"', '500 30px "Space Grotesk"', '500 22px "JetBrains Mono"', '700 22px "JetBrains Mono"'],
-  cat: { family: '3D', fontsText: 'Space Grotesk (500 and 700), JetBrains Mono (500 and 700), Three.js r128',
-    look: 'Inside the body, built in Three.js: glossy red cells drift down a glowing red vessel toward the camera, with fog for depth, a warm bloom, and clean white labels on thin leader lines.',
-    how: 'The camera travels down the vessel the whole time. One hero cell swims up close and gets a label, small blue oxygen bubbles fly in and stick to it, a big glowing counter climbs, and a bumpy white defender cell rolls through before the takeaway.',
-    demo: 'Your blood in 60 seconds',
-    replace: 'TL, CELLS, the hero and guest objects in init3() (the red cell, oxygen, the white cell), pose(t), the labels and counters in overlay() and scoreSound()',
-    keep: 'makeGL(), lights3(), the inside-out vessel tube, the travelling camera and flowing cells in pose(), proj3() for labels, leader(), chip(), wordLine(), vignette() and the red bloom',
-    sizes: 'keep headlines at 56 px or more, labels at 22 px or more, and the big counter at 80 px or more',
-    voLine: 'The hero object swims into its close-up as it is named, each label draws its leader line on the word it names, small things arrive on the word that introduces them, and the counter locks on the last syllable of its number.',
-    full: '- Full mix (no voiceover): keep the heartbeat and the dark pad, at most about 3 sounds at once, and drop the heartbeat for one beat before the counter locks.',
-    voMix: '- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the heartbeat very low, mark pings and ticks soft: true, and keep the shimmer for the takeaway only.',
-    sheet: [
-      'Everything is Three.js geometry posed from t: a big inside-out cylinder for the vessel, tori for red cells, a displaced icosahedron for white cells, small emissive spheres for molecules. No images or models.',
-      'The camera always moves forward down the vessel and sways gently; cells flow past at different speeds and fade into the fog behind. Keep the fog and the dark red background so depth reads on a phone.',
-      'Palette: deep blood red background (#3a070b), glossy cell red (#c91d2c), warm salmon accent (#ff8f7d) for the second headline line, cool blue (#7fd3ff) only for oxygen or anything "fresh", off-white for defenders.',
-      'Type: Space Grotesk 700 for headlines at the top, white then salmon. JetBrains Mono for labels in frosted chips with a 1.5 px white outline, joined to their object by a thin leader line that draws itself.',
-      'One hero object per beat comes close to the camera; everything else stays as moving background. Labels always name a real structure with a real size or job.',
-      'Numbers: one big glowing counter at the bottom with a small mono caption under it. Use real, checked figures for the body.',
-      'Pace: the hook lands in under 1 second, the hero arrives by second 3, one new label every 1 to 2 seconds, and the takeaway holds about 2 seconds.',
-    ],
-    sound: [
-      'Bed: a slow heartbeat (two low thumps per beat) under a dark, filtered pad, plus a soft flowing hiss.',
-      'Map events to the kit: labels get a soft tick; molecules sticking get small glassy pings that climb; the hero arrival gets a slow "whoosh"; counters "tick" only when the shown number changes; a new kind of cell gets a low swell; the takeaway gets "shimmer".',
-    ] } };
-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: Bio Glow
-// Inside the body: glossy red cells flow past a travelling camera in a glowing vessel, with labels on leader lines.
-// Demo topic: "Your blood in 60 seconds".
-// =====================================================================================================
-const C = { bg: '#3a070b', cell: '#c91d2c', ink: '#ffffff', accent: '#ff8f7d', o2: '#7fd3ff' };
-const HEAD = (px) => `700 ${px}px "Space Grotesk", system-ui, sans-serif`, MONO = (px, w = 500) => `${w} ${px}px "JetBrains Mono", ui-monospace, monospace`;
-
-// ---------- the timeline: picture and sound both read these ----------
-const TL = {
-  D: 14,
-  title: [0.25, 0.5, 0.75], titleOut: 2.7,
-  hero: [2.6, 4.0], label: 3.9, o2: [4.5, 6.3], o2lab: 5.0, heroOut: [9.4, 10.6], labOut: 6.9,
-  count: [7.1, 9.0], countOut: 9.8,
-  wbc: [9.9, 12.4], wbcLab: 10.7,
-  take: [11.7, 11.9, 12.1],
-};
-const CELLS = (() => { const r = rng('cells'); return Array.from({ length: 36 }, () => ({ x: (() => { const v = (r() - 0.5) * 9; return v + Math.sign(v || 1) * 1.6; })(), y: (r() - 0.5) * 13, d0: r() * 30, rx: r() * 3, ry: r() * 3, sp: 0.8 + r() * 0.7, spin: (r() - 0.5) * 1.4 })); })();
-const O2 = (() => { const r = rng('o2'); return Array.from({ length: 6 }, (_, i) => ({ a: i / 6 * TAU + r() * 0.3, fx: (r() - 0.5) * 8, fy: (r() - 0.5) * 8, t0: TL.o2[0] + i * 0.28 })); })();
-const cellCount = (t) => Math.round(2000000 * ez.out3(span(t, TL.count[0], TL.count[1])) / 1000) * 1000;
-const camZ = (t) => 7 - t * 1.2;
-
-let G = null;
-function init3() {
-  const r = makeGL(); if (!r) return null; r.shadowMap.enabled = false;
-  const s = new THREE.Scene(); s.background = new THREE.Color(C.bg); s.fog = new THREE.Fog(C.bg, 5, 26);
-  const camera = new THREE.PerspectiveCamera(42, W / H, 0.1, 100);
-  lights3(s, { hemi: ['#ff9d8c', '#2a0000', 0.65], dir: ['#ffd9c4', 0.9, 3, 5, 6], points: [['#ff6a50', 1.2, -3, -2, 3, 20]] });
-  const tube = new THREE.Mesh(new THREE.CylinderGeometry(7, 7, 120, 48, 1, true), new THREE.MeshStandardMaterial({ color: '#6b1218', side: THREE.BackSide, roughness: 0.6 })); tube.rotation.x = Math.PI / 2; s.add(tube);
-  const geo = new THREE.TorusGeometry(0.55, 0.38, 24, 48), mat = new THREE.MeshStandardMaterial({ color: C.cell, roughness: 0.32, emissive: '#3d0006' });
-  const cells = CELLS.map(() => { const m = new THREE.Mesh(geo, mat); m.scale.set(1, 1, 0.62); s.add(m); return m; });
-  const hero = new THREE.Mesh(new THREE.TorusGeometry(0.62, 0.42, 32, 64), new THREE.MeshStandardMaterial({ color: '#d42233', roughness: 0.26, emissive: '#3d0006' })); s.add(hero);
-  const o2 = O2.map(() => { const m = new THREE.Mesh(new THREE.SphereGeometry(0.1, 16, 10), new THREE.MeshStandardMaterial({ color: C.o2, emissive: '#2a9fff', emissiveIntensity: 0.9, roughness: 0.2 })); s.add(m); return m; });
-  const wg = new THREE.IcosahedronGeometry(1.1, 4), p = wg.attributes.position, v = new THREE.Vector3();
-  for (let i = 0; i < p.count; i++) { v.fromBufferAttribute(p, i); v.multiplyScalar(1 + 0.08 * Math.sin(v.x * 7) * Math.cos(v.y * 6) + 0.05 * Math.sin(v.z * 9)); p.setXYZ(i, v.x, v.y, v.z); } wg.computeVertexNormals();
-  const wbc = new THREE.Mesh(wg, new THREE.MeshStandardMaterial({ color: '#efe4f5', roughness: 0.55, emissive: '#3a2240', emissiveIntensity: 0.35 })); s.add(wbc);
-  return { r, s, camera, cells, hero, o2, wbc };
-}
-// hero position relative to the camera: swims in, holds, then drifts off to the left
-function heroRel(t) { const a = ez.out3(span(t, TL.hero[0], TL.hero[1])), b = ez.in3(span(t, TL.heroOut[0], TL.heroOut[1])); return [lerp(1.5, 0.6, a) - b * 4, lerp(1.2, 0.2, a) + Math.sin(t * 1.3) * 0.08, -lerp(16, 4.3, a) - b * 2]; }
-function pose(t) {
-  const cz = camZ(t); G.camera.position.set(Math.sin(t * 0.4) * 0.3, Math.cos(t * 0.33) * 0.3, cz); G.camera.lookAt(Math.sin(t * 0.4) * 0.2, 0, cz - 6);
-  G.cells.forEach((m, i) => { const c = CELLS[i], dist = 2.5 + (30 - ((c.d0 + t * c.sp * 1.8) % 30)); m.position.set(c.x, c.y, cz - dist); m.rotation.set(c.rx + t * c.spin, c.ry + t * c.spin * 0.7, 0); });
-  const [hx, hy, hz] = heroRel(t); G.hero.position.set(hx, hy, cz + hz); G.hero.rotation.set(0.9 + Math.sin(t * 0.5) * 0.15, 0.3 + t * 0.12, 0); G.hero.scale.set(1, 1, 0.62);
-  G.o2.forEach((m, i) => { const o = O2[i], u = ez.inout3(span(t, o.t0, o.t0 + 0.7)); const sx = hx + Math.cos(o.a) * 0.72, sy = hy + Math.sin(o.a) * 0.72; m.position.set(lerp(hx + o.fx, sx, u), lerp(hy + o.fy, sy, u), cz + hz + lerp(4, 0.3, u)); m.visible = t > o.t0 - 0.4; });
-  const w = ez.out3(span(t, TL.wbc[0], TL.wbc[1])); G.wbc.position.set(lerp(6, 1.0, w), lerp(-3, -1.4, w), cz - lerp(9, 6.5, w)); G.wbc.rotation.set(t * 0.4, t * 0.6, 0); G.wbc.visible = t > TL.wbc[0] - 0.1;
-}
-function overlay(c, t) {
-  const [hx, hy, hz] = heroRel(t), cz = camZ(t);
-  { const o = 1 - span(t, TL.titleOut, TL.titleOut + 0.4); if (o > 0) { c.save(); c.globalAlpha = o; wordLine(c, [['YOUR', TL.title[0]], ['BLOOD', TL.title[1]]], 50, 150, HEAD(78), C.ink, t); wordLine(c, [['IN', TL.title[2]], ['60', TL.title[2] + 0.12], ['SECONDS', TL.title[2] + 0.24]], 50, 236, HEAD(78), C.accent, t); c.restore(); } }
-  const lab = (text, sub, x, y, ax, ay, t0, tOut, side = 1) => { const p = inn(t, t0, 0.55), o = tOut ? 1 - span(t, tOut, tOut + 0.3) : 1; if (p <= 0 || o <= 0) return; c.save(); c.globalAlpha = o;
-    leader(c, ax, ay, x + (side > 0 ? 0 : 0), y + 22, 'rgba(255,220,212,0.9)', 2.5, p);
-    chip(c, text, x, y, { f: MONO(22, 700), bg: 'rgba(255,255,255,0.14)', fg: '#fff', stroke: 'rgba(255,255,255,0.55)', a: side > 0 ? 'left' : 'right', alpha: p, ls: 1 });
-    if (sub) txt(c, sub, side > 0 ? x + 4 : x - 4, y + 76, { f: MONO(20), c: '#ffc8bd', a: side > 0 ? 'left' : 'right', alpha: p }); c.restore(); };
-  if (G) { const [ax, ay] = proj3(G.camera, new THREE.Vector3(hx - 0.3, hy + 0.5, cz + hz)); lab('RED BLOOD CELL', '7 µm across', 60, 330, ax, ay, TL.label, TL.labOut);
-    const [bx, by] = proj3(G.camera, new THREE.Vector3(hx + 0.75, hy - 0.1, cz + hz)); lab('CARRIES OXYGEN', '≈ 270 million hemoglobins', 660, 900, bx, by, TL.o2lab, TL.labOut, -1);
-    const wpos = G.wbc.position.clone(); const [wx, wy] = proj3(G.camera, wpos.add(new THREE.Vector3(-0.6, 0.8, 0))); lab('WHITE BLOOD CELL', 'the defender', 60, 420, wx, wy, TL.wbcLab); }
-  { const o = 1 - span(t, TL.countOut, TL.countOut + 0.4), p = inn(t, TL.count[0] - 0.2, 0.4); if (p > 0 && o > 0) { c.save(); c.globalAlpha = o * p;
-    txt(c, cellCount(t).toLocaleString('en-US'), 50, 1110, { f: HEAD(96), c: '#fff', glow: 'rgba(255,90,70,0.85)', gb: 30, s: 1 + 0.06 * pulse(t, TL.count[1], 0.35) });
-    txt(c, 'NEW RED CELLS EVERY SECOND', 54, 1160, { f: MONO(24), c: '#ffc2b8', ls: 2 }); c.restore(); } }
-  wordLine(c, [['Your', TL.take[0]], ['blood', TL.take[0] + 0.1], ['is', TL.take[0] + 0.2]], 50, 1080, HEAD(64), '#fff', t);
-  wordLine(c, [['always', TL.take[1] + 0.1], ['rebuilding.', TL.take[2] + 0.1, C.accent]], 50, 1156, HEAD(64), '#fff', t);
-}
-function explainer(ctx, t) {
-  ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalAlpha = 1; ctx.filter = 'none';
-  if (!G) G = init3();
-  if (G) { pose(t); G.r.render(G.s, G.camera); ctx.drawImage(G.r.domElement, 0, 0); } else fillAll(ctx, C.bg);
-  ctx.globalCompositeOperation = 'screen'; ctx.fillStyle = rg(ctx, W * 0.6, H * 0.45, 20, H * 0.55, [[0, 'rgba(255,110,80,0.22)'], [1, 'rgba(0,0,0,0)']]); ctx.fillRect(0, 0, W, H); ctx.globalCompositeOperation = 'source-over';
-  vignette(ctx, 0.6, 0.25, 0.75);
-  overlay(ctx, t); grain(ctx, t, 0.04);
-}
-
-// =================================== SOUND SCORE ===================================
-// Organic and close: a slow heartbeat under a dark pad and a flowing hiss, glassy pings as oxygen sticks,
-// soft ticks for labels and the counter, a low swell for the defender, shimmer for the takeaway.
-function scoreSound(k) {
-  k = gainKit(k, 2.0);
-  padBed(k, 0, TL.D, { bpm: 72, chords: [['A2', 'E3', 'C4'], ['F2', 'C3', 'A3'], ['D3', 'A3', 'F4'], ['E3', 'B3', 'G#4']], cut: 900, gain: 0.9 });
-  const beat = 60 / 72; for (let t = 0.05; t < TL.D - 0.3; t += beat) { if (Math.abs(t - (TL.count[1] - 0.4)) < beat * 0.5) continue; k.voice(t, { f: [[0, 72], [0.08, 42]], dur: 0.2, gain: 0.45 }); k.voice(t + 0.26, { f: [[0, 64], [0.08, 40]], dur: 0.18, gain: 0.28 }); }
-  k.hiss(0, { color: 'pink', dur: TL.D, filter: 'lowpass', ff: [[0, 500], [TL.D / 2, 900], [TL.D, 500]], gain: 0.05, a: 1, hold: TL.D - 2, bus: 'amb' });
-  TL.title.forEach((t, i) => SND.tick1(k, t, 0, 0.8)); [0.12, 0.24].forEach((d) => SND.tick1(k, TL.title[2] + d, 0, 0.8));
-  k.play('whoosh', TL.hero[0], { dur: 1.3, gain: 0.3, top: 1400, dir: -1 });
-  SND.tick1(k, TL.label, -0.4); SND.tick1(k, TL.o2lab, 0.4); SND.tick1(k, TL.wbcLab, -0.4);
-  O2.forEach((o, i) => k.voice(o.t0 + 0.7, { f: ['E6', 'G6', 'A6', 'C7', 'D7', 'E7'][i], dur: 0.35, gain: 0.07, a: 0.002, verb: 0.35, pan: Math.cos(o.a) * 0.5, soft: true }));
-  { let last = -1; for (let t = TL.count[0]; t <= TL.count[1]; t += 1 / 60) { const v = Math.floor(cellCount(t) / 100000); if (v !== last && v > 0) { k.play('tick', t, { f: 2400 + v * 80, gain: 0.3, soft: true }); last = v; } } }
-  k.play('pop', TL.count[1], { f: 880, gain: 0.5 });
-  k.voice(TL.wbc[0], { f: [[0, 90], [2, 130]], dur: 2.2, gain: 0.12, a: 0.8, filter: 'lowpass', ff: 600 });
-  k.play('shimmer', TL.take[2] + 0.1, { gain: 0.9 });
-}
-
-// =================================== 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(["700 60px \"Space Grotesk\"","500 30px \"Space Grotesk\"","500 22px \"JetBrains Mono\"","700 22px \"JetBrains Mono\""].map((f) => document.fonts.load(f, 'AaZz09'))); await document.fonts.ready; } catch (e) {}
-  if (typeof setup === 'function') setup();
-  window.__posterT = 9.3; T = 9.3; draw(); window.__ready = true;
-  requestAnimationFrame((n) => { last = n; tick(n); });
-})();
-</script>