@popcraft/kit 0.29.0 → 0.31.0

package/dist/chunks/chunk-SOQBVZP6.js

@@ -0,0 +1,898 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  H,
+  W,
+  back,
+  bar,
+  box,
+  close,
+  drift,
+  focusColumn,
+  focusRow,
+  gameKit,
+  gameVar,
+  go,
+  keybind,
+  keys,
+  label,
+  menu,
+  onAll,
+  oneShot,
+  overlay,
+  poly,
+  readout,
+  rebindListener,
+  screen,
+  set,
+  slider,
+  spin,
+  toggle,
+  toggleComponent,
+  when
+} from "./chunk-NUMUHHSN.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/game/pulse-riot-rhythm.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SONGS = [
+  { title: "Safety Pin Heart", artist: "The Xerox Kids", bpm: 120, stars: [1, 3, 4], label: "lime", blurb: "Side A \xB7 two-chord anthem" },
+  { title: "Glitter Bomb Lullaby", artist: "Venus Overdrive", bpm: 128, stars: [2, 3, 5], label: "pink", blurb: "Side B \xB7 sugar and feedback" },
+  { title: "Basement Tape Riot", artist: "DJ Paper Cuts", bpm: 140, stars: [2, 4, 5], label: "violet", blurb: "Bonus \xB7 recorded under the stairs" }
+];
+var DIFFS = ["Easy", "Hard", "Riot"];
+var PERFECT_AT = [3, 4, 6];
+var GREAT_AT = [0, 1, 2];
+var SONG_LENGTH = 32;
+var CREDITS = [
+  ["Game direction", "Roxanne Achebe-Kowalski"],
+  ["Rhythm design", "Mika Torvald"],
+  ["Art direction and zines", "Lupe Castellanos"],
+  ["Note charts", "Bea Nakamura \xB7 Otto Brandvold"],
+  ["Soundtrack", "The Xerox Kids \xB7 Venus Overdrive \xB7 DJ Paper Cuts"],
+  ["Interface", "Sunny Adeyemi"],
+  ["Engineering", "Ingrid Falk \xB7 Joon Park \xB7 Carmen Ruiz"],
+  ["Sticker supply", "The corner copy shop, open till 2"],
+  ["Special thanks", "Every basement that let us plug in"]
+];
+var hash = (n) => (Math.imul(n + 1, 2654435761) >>> 0) % 1009;
+var pulse_riot_rhythm_default = defineTemplate({
+  id: "game-pulse-riot-rhythm",
+  meta: {
+    name: "PULSE RIOT \u2014 rhythm game UI",
+    description: "A playable riot-grrrl zine rave rhythm game: ransom-note headings that re-shuffle on the beat, a bouncing main menu, song select with a spinning record and difficulty, customize with a live preview, settings with a calibration metronome and lane key bindings, a four-lane perspective note highway with judgments, combo, multipliers, a draining life gauge and crowd hype, pause, crowd lost and a stamped results grade",
+    category: "game-ui",
+    tags: ["game", "game ui", "rhythm", "rhythm game", "music", "note highway", "zine", "rave", "hud", "interactive", "variables", "keyboard", "menus", "present mode"],
+    platforms: ["desktop"],
+    formats: ["screen"],
+    useCases: ["launch", "pitch"],
+    created: "2026-09-30",
+    updated: "2026-09-30"
+  },
+  build() {
+    const k = gameKit("PULSE RIOT");
+    k.brand({
+      void: "#0A0A0C",
+      deep: "#15101C",
+      panel: "#1E1628",
+      line: "#3C2F4E",
+      scrim: "#050407",
+      lime: "#C6FF1A",
+      onLime: "#0A0A0C",
+      violet: "#8B2CFF",
+      onViolet: "#FFFFFF",
+      pink: "#FF2E93",
+      onPink: "#0A0A0C",
+      xerox: "#F4F0E6",
+      onXerox: "#0A0A0C",
+      onVoid: "#F4F0E6",
+      dim: "#BDB2CC",
+      onPanel: "#F4F0E6",
+      accent: "#C6FF1A",
+      onAccent: "#0A0A0C",
+      primary: "#8B2CFF",
+      onPrimary: "#FFFFFF"
+    }, { title: "PULSE RIOT", studio: "Subwoofer Saints", tagline: "Four lanes. One beat. Zero chill." });
+    const tag = gameVar(k, "Player", "tag", "STRING", "RAZOR GRRL");
+    const best = gameVar(k, "Player", "bestScore", "FLOAT", 18e3);
+    const song = gameVar(k, "Song", "pick", "FLOAT", 0);
+    const diff = gameVar(k, "Song", "difficulty", "FLOAT", 1);
+    const length = gameVar(k, "Song", "length", "FLOAT", SONG_LENGTH);
+    const practice = gameVar(k, "Song", "practice", "FLOAT", 0);
+    const score = gameVar(k, "Play", "score", "FLOAT", 0);
+    const combo = gameVar(k, "Play", "combo", "FLOAT", 0);
+    const maxCombo = gameVar(k, "Play", "maxCombo", "FLOAT", 0);
+    const mult = gameVar(k, "Play", "multiplier", "FLOAT", 1);
+    const life = gameVar(k, "Play", "life", "FLOAT", 100);
+    const lifeTrail = gameVar(k, "Play", "lifeTrail", "FLOAT", 100);
+    const maxLife = gameVar(k, "Play", "maxLife", "FLOAT", 100);
+    const hype = gameVar(k, "Play", "hype", "FLOAT", 30);
+    const notes = gameVar(k, "Play", "notes", "FLOAT", 0);
+    const perfect = gameVar(k, "Play", "perfect", "FLOAT", 0);
+    const great = gameVar(k, "Play", "great", "FLOAT", 0);
+    const miss = gameVar(k, "Play", "miss", "FLOAT", 0);
+    const lane = gameVar(k, "Play", "lane", "FLOAT", 0);
+    const roll = gameVar(k, "Play", "roll", "FLOAT", 0);
+    const judge = gameVar(k, "Play", "judgment", "FLOAT", 2);
+    const judged = gameVar(k, "Play", "judged", "FLOAT", 0);
+    const newBest = gameVar(k, "Play", "newBest", "FLOAT", 0);
+    const menuFocus = gameVar(k, "UI", "menuFocus", "FLOAT", 0);
+    const custFocus = gameVar(k, "UI", "customizeFocus", "FLOAT", 0);
+    const setFocus = gameVar(k, "UI", "settingsFocus", "FLOAT", 0);
+    const pauseFocus = gameVar(k, "UI", "pauseFocus", "FLOAT", 0);
+    const endFocus = gameVar(k, "UI", "endFocus", "FLOAT", 0);
+    const rebind = gameVar(k, "UI", "rebinding", "STRING", "");
+    const master = gameVar(k, "Settings", "masterVolume", "FLOAT", 80);
+    const music = gameVar(k, "Settings", "musicVolume", "FLOAT", 70);
+    const speed = gameVar(k, "Settings", "noteSpeed", "FLOAT", 6);
+    const offset = gameVar(k, "Settings", "audioOffset", "FLOAT", 0);
+    const flashing = gameVar(k, "Settings", "flashingLights", "FLOAT", 1);
+    const keyLabels = gameVar(k, "Settings", "laneKeyLabels", "FLOAT", 1);
+    const halftoneOn = gameVar(k, "Settings", "halftone", "FLOAT", 1);
+    const skin = gameVar(k, "Style", "noteSkin", "FLOAT", 0);
+    const road = gameVar(k, "Style", "highway", "FLOAT", 0);
+    const laneKeys = [gameVar(k, "Keys", "lane1", "STRING", "D"), gameVar(k, "Keys", "lane2", "STRING", "F"), gameVar(k, "Keys", "lane3", "STRING", "J"), gameVar(k, "Keys", "lane4", "STRING", "K")];
+    const mono = { fontFamily: "JetBrains Mono" };
+    const serif = { fontFamily: "Source Serif 4" };
+    k.textStyle("Boot 22", { size: 22, fontWeight: 600, lineHeight: 34, ...mono });
+    k.textStyle("Studio 30", { size: 30, fontWeight: 900, letterSpacing: 10, lineHeight: 40, textCase: "UPPER" });
+    k.textStyle("Title 140", { size: 140, fontWeight: 900, letterSpacing: -6, lineHeight: 132, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Tagline 30", { size: 30, fontWeight: 700, letterSpacing: 1, lineHeight: 40, fontStyle: "italic", ...serif });
+    k.textStyle("Prompt 30", { size: 30, fontWeight: 800, letterSpacing: 8, lineHeight: 40, textCase: "UPPER", ...mono });
+    k.textStyle("Ransom sans 60", { size: 60, fontWeight: 900, lineHeight: 64, textCase: "UPPER" });
+    k.textStyle("Ransom mono 54", { size: 54, fontWeight: 800, lineHeight: 64, textCase: "UPPER", ...mono });
+    k.textStyle("Ransom serif 62", { size: 62, fontWeight: 800, lineHeight: 64, fontStyle: "italic", ...serif });
+    k.textStyle("Wordmark 56", { size: 56, fontWeight: 900, letterSpacing: -2, lineHeight: 58, textCase: "UPPER" });
+    k.textStyle("Menu 44", { size: 44, fontWeight: 900, letterSpacing: 1, lineHeight: 52, textCase: "UPPER" });
+    k.textStyle("Hint 20", { size: 20, fontWeight: 600, letterSpacing: 2, lineHeight: 28, ...mono });
+    k.textStyle("Label 26", { size: 26, fontWeight: 700, lineHeight: 34 });
+    k.textStyle("Value 26", { size: 26, fontWeight: 700, lineHeight: 34, ...mono });
+    k.textStyle("Cap 22", { size: 22, fontWeight: 800, letterSpacing: 2, lineHeight: 28, textAlign: "CENTER", ...mono });
+    k.textStyle("Small 18", { size: 18, fontWeight: 700, letterSpacing: 3, lineHeight: 24, textCase: "UPPER", ...mono });
+    k.textStyle("Body 24", { size: 24, fontWeight: 500, lineHeight: 34 });
+    k.textStyle("Sticker 28", { size: 28, fontWeight: 900, letterSpacing: 1, lineHeight: 32, textCase: "UPPER" });
+    k.textStyle("Song 38", { size: 38, fontWeight: 900, letterSpacing: -1, lineHeight: 44, textCase: "UPPER" });
+    k.textStyle("Artist 26", { size: 26, fontWeight: 600, lineHeight: 34, fontStyle: "italic", ...serif });
+    k.textStyle("Score 52", { size: 52, fontWeight: 800, letterSpacing: 2, lineHeight: 60, ...mono });
+    k.textStyle("Combo 96", { size: 96, fontWeight: 900, letterSpacing: -3, lineHeight: 96, fontStyle: "italic", textAlign: "CENTER" });
+    k.textStyle("Judge 64", { size: 64, fontWeight: 900, letterSpacing: -1, lineHeight: 68, fontStyle: "italic", textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("HUD 20", { size: 20, fontWeight: 800, letterSpacing: 3, lineHeight: 26, textCase: "UPPER", ...mono });
+    k.textStyle("Count 300", { size: 300, fontWeight: 900, letterSpacing: -10, lineHeight: 300, fontStyle: "italic", textAlign: "CENTER" });
+    k.textStyle("Grade 220", { size: 220, fontWeight: 900, lineHeight: 220, textAlign: "CENTER" });
+    k.textStyle("Stat 52", { size: 52, fontWeight: 800, lineHeight: 60, ...mono });
+    k.textStyle("Credit role 20", { size: 20, fontWeight: 700, letterSpacing: 4, lineHeight: 28, textCase: "UPPER", textAlign: "CENTER", ...mono });
+    k.textStyle("Credit name 36", { size: 36, fontWeight: 900, lineHeight: 44, textAlign: "CENTER" });
+    const paperShadow = (d = 6) => ({ id: `ps${d}`, type: "DROP_SHADOW", color: k.color("scrim", 1), offset: { x: d, y: d }, blur: 0, spread: 0, visible: true, showBehindTransparent: false });
+    const halftoneFx = (dot, role = "violet", angle = 45) => ({ id: `ht${dot}`, type: "HALFTONE", angle, dotSize: dot, contrast: 1, color1: k.color(role), colorMode: "INK", shape: "CIRCLE", layout: "UNIFORM", toneSource: "RADIAL_GRADIENT", center: { x: 0.5, y: 0.5 }, visible: true });
+    const grainFx = { id: "grain", type: "NOISE", amount: 0.16, size: 2, monochrome: true, seed: 7, visible: true, mode: "MONO", density: 0.55 };
+    const onBeat = (id, path, amp, phase = 0) => drift(k, id, path, amp, 2, phase);
+    const throb = (id, amp = 0.04, phase = 0) => {
+      onBeat(id, "scaleX", amp, phase);
+      onBeat(id, "scaleY", amp, phase);
+    };
+    const SURFACES = [["lime", "onLime"], ["xerox", "onXerox"], ["pink", "onPink"], ["violet", "onViolet"], ["void", "onVoid"]];
+    const RANSOM_TYPE = ["Ransom sans 60", "Ransom mono 54", "Ransom serif 62"];
+    const ransom = (parent, word, x, y, o = {}) => {
+      const seed = o.seed ?? word.length * 13;
+      const pitch = 84;
+      const row = box(k, parent, x, y, word.length * pitch + 24, 124, { name: o.name ?? "Ransom heading" });
+      [...word].forEach((ch, i) => {
+        if (ch === " ") return;
+        const r = hash(seed * 31 + i);
+        const [fill, ink] = SURFACES[r % SURFACES.length];
+        const bw = 74 + r % 3 * 6, bh = 92 + r % 4 * 5;
+        const b = box(k, row, i * pitch + r % 7 - 3, 12 + r % 11 - 5, bw, bh, {
+          name: "Ransom letter",
+          fill,
+          align: "CENTER",
+          justify: "CENTER",
+          radius: r % 5 === 0 ? 40 : 2,
+          ...fill === "void" ? { stroke: { color: "xerox", width: 3, align: "INSIDE" } } : {},
+          effects: [paperShadow(5)]
+        });
+        k.text(b, ch, { style: RANSOM_TYPE[(r >> 2) % 3], color: ink, autoWidth: true, name: "Letter" });
+        const tilt = (n) => hash(seed * 7 + i * 5 + n) % 25 - 12;
+        k.patch(b, { rotation: tilt(0) });
+        if (o.shuffle) {
+          const hold = { kind: "hold" };
+          keys(k, b, "rotation", [0, 1, 2, 3].map((n) => ({ t: n * 500, v: tilt(n), ease: hold })).concat([{ t: 2e3, v: tilt(0), ease: hold }]));
+          keys(k, b, "translateY", [0, 1, 2, 3].map((n) => ({ t: n * 500, v: hash(seed + i * 3 + n * 11) % 13 - 6, ease: hold })).concat([{ t: 2e3, v: hash(seed + i * 3) % 13 - 6, ease: hold }]));
+          k.behave(b, "rotation", [{ kind: "loop", mode: "cycle" }]);
+          k.behave(b, "translateY", [{ kind: "loop", mode: "cycle" }]);
+        }
+      });
+      return row;
+    };
+    const sticker = (parent, text, x, y, o = {}) => {
+      const s = box(k, parent, x, y, o.w ?? 300, o.h ?? 64, { name: o.name ?? "Sticker", fill: o.fill ?? "lime", radius: o.round ? 999 : 4, align: "CENTER", justify: "CENTER", stroke: { color: "void", width: 4, align: "INSIDE" }, effects: [paperShadow(6)] });
+      k.text(s, text, { style: o.style ?? "Sticker 28", color: o.ink ?? "onLime", width: (o.w ?? 300) - 28, align: "CENTER", name: "Sticker words" });
+      k.patch(s, { rotation: o.rot ?? -4 });
+      return s;
+    };
+    const zineGround = (id, o = {}) => {
+      k.rect(id, W, H, "void", { name: "Xerox grain", absolute: { x: 0, y: 0 }, effects: [grainFx] });
+      if (o.blots !== false) {
+        const a = k.rect(id, 640, 640, "violet", { name: "Halftone blot", absolute: { x: -220, y: -240 }, effects: [halftoneFx(22)] });
+        const b = k.rect(id, 560, 560, "pink", { name: "Halftone blot", absolute: { x: 1560, y: 700 }, effects: [halftoneFx(18, "pink", 15)] });
+        throb(a, 0.03);
+        throb(b, 0.03, 0.25);
+      }
+    };
+    const hintBar = (id, text) => {
+      const b = box(k, id, 0, H - 60, W, 60, { name: "Hint bar", fill: k.tint("scrim", 0.92), direction: "HORIZONTAL", align: "CENTER", padding: { top: 0, right: 64, bottom: 0, left: 64 } });
+      k.text(b, text, { style: "Hint 20", color: "dim", autoWidth: true, name: "Hints" });
+    };
+    const tape = (parent, x, y, w, rot) => {
+      const t = k.rect(parent, w, 34, k.tint("xerox", 0.72), { name: "Tape", absolute: { x, y } });
+      k.patch(t, { rotation: rot });
+      return t;
+    };
+    k.variantSet(
+      "Zine button",
+      "State",
+      ["Idle", "Hover", "Pressed"],
+      { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", padding: { top: 14, right: 30, bottom: 14, left: 30 }, radius: 4, props: { Label: "Back" }, description: "A cut-paper button: hover turns it lime and tilts it, pressing slaps it pink." },
+      (state, id) => {
+        k.propText(id, "Label", { style: "Hint 20", color: state === "Idle" ? "onXerox" : state === "Hover" ? "onLime" : "onPink", autoWidth: true });
+      },
+      (state) => ({ fill: state === "Idle" ? "xerox" : state === "Hover" ? "lime" : "pink", stroke: { color: "void", width: 4, align: "INSIDE" }, effects: [paperShadow(state === "Pressed" ? 2 : 6)] })
+    );
+    k.changeTo("Zine button/Idle", "ON_HOVER", "Zine button/Hover", 120);
+    k.changeTo("Zine button/Hover", "ON_PRESS", "Zine button/Pressed", 60);
+    toggleComponent(k, { track: "line", on: "lime", knob: "xerox", stateStyle: "Small 18", ink: "onVoid" });
+    oneShot(k, "Receptor", { width: 220, height: 560, duration: 380, description: "A lane receptor: change to Hit on every press of its lane key." }, (state, id) => {
+      const beam = k.rect(id, 110, 480, [k.gradient({ from: "lime", to: "lime", angle: 90, fromOpacity: 0, toOpacity: 0.75 })], { name: "Beam", absolute: { x: 55, y: 0 }, opacity: 0 });
+      const burst = k.ellipse(id, 200, k.tint("lime", 0.85), { name: "Burst", absolute: { x: 10, y: 380 }, opacity: 0 });
+      const ring = k.ellipse(id, 132, k.tint("void", 0.7), { name: "Ring", absolute: { x: 44, y: 414 }, stroke: { color: "xerox", width: 7 } });
+      k.ellipse(id, 40, "xerox", { name: "Hub", absolute: { x: 90, y: 460 } });
+      if (state === "Hit") {
+        keys(k, beam, "opacity", [{ t: 0, v: 1, ease: { kind: "ease", name: "cubic-out" } }, { t: 340, v: 0 }]);
+        keys(k, burst, "opacity", [{ t: 0, v: 1, ease: { kind: "ease", name: "cubic-out" } }, { t: 320, v: 0 }]);
+        keys(k, burst, "scaleX", [{ t: 0, v: 0.5, ease: { kind: "ease", name: "expo-out" } }, { t: 320, v: 1.3 }]);
+        keys(k, burst, "scaleY", [{ t: 0, v: 0.5, ease: { kind: "ease", name: "expo-out" } }, { t: 320, v: 1.3 }]);
+        keys(k, ring, "scaleX", [{ t: 0, v: 1.25, ease: { kind: "ease", name: "back-out", param: 2 } }, { t: 260, v: 1 }]);
+        keys(k, ring, "scaleY", [{ t: 0, v: 1.25, ease: { kind: "ease", name: "back-out", param: 2 } }, { t: 260, v: 1 }]);
+      }
+    });
+    const JUDGES = [["Perfect", "PERFECT", "lime", "onLime", -6], ["Great", "GREAT", "xerox", "onXerox", 4], ["Miss", "MISS", "pink", "onPink", -9], ["Ghost", "GHOST TAP", "violet", "onViolet", 7]];
+    k.variantSet("Judgment", "State", ["Idle", ...JUDGES.map((j) => j[0])], { width: 560, height: 170, description: "The judgment sticker: change to Perfect, Great, Miss or Ghost on every judged press (changing to the same one replays it)." }, (state, id) => {
+      const j = JUDGES.find((x) => x[0] === state);
+      if (!j) return;
+      const plate = box(k, id, 60, 20, 440, 130, { name: "Judgment plate", fill: j[2], radius: 6, align: "CENTER", justify: "CENTER", stroke: { color: "void", width: 5, align: "INSIDE" }, effects: [paperShadow(8)] });
+      k.text(plate, j[1], { style: "Judge 64", color: j[3], width: 420, align: "CENTER", name: "Judgment word" });
+      k.patch(plate, { rotation: j[4] });
+      keys(k, plate, "scaleX", [{ t: 0, v: 1.7, ease: { kind: "ease", name: "back-out", param: 2.2 } }, { t: 180, v: 1 }]);
+      keys(k, plate, "scaleY", [{ t: 0, v: 1.7, ease: { kind: "ease", name: "back-out", param: 2.2 } }, { t: 180, v: 1 }]);
+      keys(k, plate, "rotation", [{ t: 0, v: j[4] * 3, ease: { kind: "ease", name: "cubic-out" } }, { t: 200, v: j[4] }]);
+      keys(k, plate, "opacity", [{ t: 0, v: 1, ease: { kind: "hold" } }, { t: 460, v: 1, ease: { kind: "ease", name: "cubic-in" } }, { t: 640, v: 0 }]);
+      keys(k, plate, "translateY", [{ t: 400, v: 0, ease: { kind: "ease", name: "cubic-in" } }, { t: 640, v: -40 }]);
+    }, (s) => s === "Idle" ? {} : { timeline: { duration: 680 } });
+    const MULTS = [["X2", "\xD72", "lime", "onLime"], ["X4", "\xD74", "pink", "onPink"], ["X8", "\xD78", "violet", "onViolet"]];
+    k.variantSet("Multiplier stamp", "State", ["Idle", ...MULTS.map((m) => m[0])], { width: 300, height: 300, description: "Spins a multiplier sticker on when the combo reaches 10, 20 or 30." }, (state, id) => {
+      const m = MULTS.find((x) => x[0] === state);
+      if (!m) return;
+      const disc = box(k, id, 30, 30, 240, 240, { name: "Stamp disc", fill: m[2], radius: 120, align: "CENTER", justify: "CENTER", stroke: { color: "void", width: 6, align: "INSIDE" }, effects: [paperShadow(8)] });
+      k.text(disc, `${m[1]} MULTI`, { style: "Song 38", color: m[3], width: 200, align: "CENTER", name: "Stamp words" });
+      keys(k, disc, "rotation", [{ t: 0, v: -200, ease: { kind: "ease", name: "back-out", param: 1.6 } }, { t: 360, v: -8 }]);
+      keys(k, disc, "scaleX", [{ t: 0, v: 0.2, ease: { kind: "ease", name: "back-out", param: 2 } }, { t: 360, v: 1 }]);
+      keys(k, disc, "scaleY", [{ t: 0, v: 0.2, ease: { kind: "ease", name: "back-out", param: 2 } }, { t: 360, v: 1 }]);
+      keys(k, disc, "opacity", [{ t: 0, v: 1, ease: { kind: "hold" } }, { t: 1e3, v: 1, ease: { kind: "ease", name: "cubic-in" } }, { t: 1200, v: 0 }]);
+    }, (s) => s === "Idle" ? {} : { timeline: { duration: 1220 } });
+    oneShot(k, "Miss flash", { width: W, height: H, duration: 420, description: "Full-screen pink edge flash on a miss." }, (state, id) => {
+      const f = k.rect(id, W, H, [k.gradient({ from: "pink", to: "pink", kind: "RADIAL", fromOpacity: 0, toOpacity: 0.8, handles: [{ x: 0.5, y: 0.5 }, { x: 1.05, y: 0.5 }, { x: 0.5, y: 1.1 }] })], { name: "Flash", absolute: { x: 0, y: 0 }, opacity: 0 });
+      if (state === "Hit") keys(k, f, "opacity", [{ t: 0, v: 1, ease: { kind: "ease", name: "expo-out" } }, { t: 400, v: 0 }]);
+    });
+    const boot = screen(k, "Boot", { ground: "void", first: true, duration: 3600 });
+    const title = screen(k, "Title", { ground: "void" });
+    const main = screen(k, "Main menu", { ground: "void" });
+    const songs = screen(k, "Song select", { ground: "void" });
+    const custom = screen(k, "Customize", { ground: "void" });
+    const settings = screen(k, "Settings", { ground: "void" });
+    const credits = screen(k, "Credits", { ground: "void", duration: 12e3 });
+    const countdown = screen(k, "Countdown", { ground: "void", duration: 3600 });
+    const game = screen(k, "Gameplay", { ground: "void" });
+    const pause = screen(k, "Pause", { ground: "void", fills: k.tint("scrim", 0.8) });
+    const fail = screen(k, "Crowd lost", { ground: "void" });
+    const results = screen(k, "Results", { ground: "void", duration: 3e3 });
+    k.flowStart(boot, "Play PULSE RIOT");
+    const resetRun = [
+      set(score.id, { value: 0 }),
+      set(combo.id, { value: 0 }),
+      set(maxCombo.id, { value: 0 }),
+      set(mult.id, { value: 1 }),
+      set(life.id, { expression: maxLife.n }),
+      set(lifeTrail.id, { expression: maxLife.n }),
+      set(hype.id, { value: 30 }),
+      set(notes.id, { value: 0 }),
+      set(perfect.id, { value: 0 }),
+      set(great.id, { value: 0 }),
+      set(miss.id, { value: 0 }),
+      set(judged.id, { value: 0 }),
+      set(newBest.id, { value: 0 }),
+      set(lane.id, { value: 0 })
+    ];
+    const toCountdown = go(countdown, "ZOOM_THROUGH", { duration: 450 });
+    const songName = "(" + SONGS.map((s, i) => `${song.n} == ${i} ? "${s.title}"`).join(" : ") + ' : "")';
+    const artistName = "(" + SONGS.map((s, i) => `${song.n} == ${i} ? "${s.artist}"`).join(" : ") + ' : "")';
+    const diffName = `(${diff.n} == 0 ? "EASY" : ${diff.n} == 1 ? "HARD" : "RIOT")`;
+    const centreIn = (t, h) => {
+      k.patch(t, { y: Math.round((h - k.node(t).height) / 2) });
+      return t;
+    };
+    const vinyl = (parent, x, y, size) => {
+      const rec = box(k, parent, x, y, size, size, { name: "Vinyl" });
+      k.ellipse(rec, size, "scrim", { name: "Record", absolute: { x: 0, y: 0 }, stroke: { color: "line", width: 3 }, effects: [paperShadow(10)] });
+      for (const f of [0.9, 0.78, 0.66, 0.54]) k.ellipse(rec, size * f, [], { name: "Groove", absolute: { x: size * (1 - f) / 2, y: size * (1 - f) / 2 }, stroke: { color: "line", width: 2 } });
+      const shine = poly(k, rec, [[size / 2, size / 2], [size * 0.86, size * 0.1], [size * 0.98, size * 0.3]], k.tint("xerox", 0.12), { name: "Shine" });
+      void shine;
+      SONGS.forEach((s, i) => {
+        const lab = box(k, rec, size * 0.32, size * 0.32, size * 0.36, size * 0.36, { name: "Record label", fill: s.label, radius: size, align: "CENTER", justify: "CENTER" });
+        k.text(lab, s.artist, { style: "Small 18", color: s.label === "violet" ? "onViolet" : s.label === "pink" ? "onPink" : "onLime", width: size * 0.3, align: "CENTER", name: "Label words" });
+        k.bindExpression(lab, "visible", `${song.n} == ${i}`);
+      });
+      k.ellipse(rec, 18, "void", { name: "Spindle", absolute: { x: size / 2 - 9, y: size / 2 - 9 } });
+      spin(k, rec, 200);
+      return rec;
+    };
+    {
+      zineGround(boot, { blots: false });
+      k.logo(boot, 128, 128, { absolute: { x: 896, y: 250 } });
+      label(k, boot, "{{brand.studio}}", "Studio 30", "onVoid", 160, 408, { w: 1600, align: "CENTER", name: "Studio" });
+      label(k, boot, "presents a loud little game", "Tagline 30", "dim", 160, 456, { w: 1600, align: "CENTER", name: "Presents" });
+      const sheet = box(k, boot, 560, 540, 800, 260, { name: "Copy sheet", fill: "xerox", padding: 28, gap: 4, effects: [paperShadow(10)] });
+      k.patch(sheet, { rotation: -1.5 });
+      const lines = ["> warming up the photocopier ..... OK", "> taping the setlist to the floor .. OK", "> four lanes chalked ............... D F J K", "> crowd let in ..................... 312", "> tempo locked ..................... 120 BPM"];
+      lines.forEach((t) => k.text(sheet, t, { style: "Boot 22", color: "onXerox", name: "Log line" }));
+      const scan = k.rect(boot, 840, 10, "lime", { name: "Scan bar", absolute: { x: 540, y: 530 }, effects: [{ id: "sg", type: "DROP_SHADOW", color: k.color("lime", 0.9), offset: { x: 0, y: 0 }, blur: 30, spread: 0, visible: true, showBehindTransparent: true }] });
+      keys(k, scan, "translateY", [{ t: 300, v: 0, ease: { kind: "ease", name: "cubic-in-out" } }, { t: 1500, v: 270, ease: { kind: "ease", name: "cubic-in-out" } }, { t: 2700, v: 0 }]);
+      tape(boot, 520, 520, 150, -12);
+      tape(boot, 1260, 770, 150, 9);
+      k.cues(boot, [
+        { layer: "{{brand.logo}}", preset: "pop-in", at: 0 },
+        { layer: "Studio", preset: "fade-in", at: 300 },
+        { layer: "Presents", preset: "fade-in", at: 500 },
+        { layer: "Log line", preset: "typewriter", at: 700, params: { duration: 400 }, stagger: { delay: 440 } }
+      ]);
+      k.link(boot, title, "DISSOLVE", { trigger: "AFTER_TIMEOUT", delay: 3400, duration: 600 });
+      k.link(boot, title, "DISSOLVE", { key: "*", duration: 400 });
+      k.link(boot, title, "DISSOLVE", { duration: 400 });
+    }
+    {
+      zineGround(title);
+      const big = k.rect(title, 900, 900, "violet", { name: "Halftone sun", radius: 450, absolute: { x: 510, y: 90 }, effects: [halftoneFx(30)] });
+      throb(big, 0.05);
+      k.rect(title, W, H, [k.gradient({ from: "void", to: "void", kind: "RADIAL", fromOpacity: 0.35, toOpacity: 0.95, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Vignette", absolute: { x: 0, y: 0 } });
+      ransom(title, "TURN IT UP", 540, 110, { name: "Kicker", shuffle: true, seed: 5 });
+      const lock = k.stack(title, { width: 1600, absolute: { x: 160, y: 300 }, name: "Title lockup", fill: k.tint("scrim", 0.82), padding: { top: 30, right: 40, bottom: 34, left: 40 }, gap: 18, align: "CENTER" });
+      k.patch(lock, { rotation: -2 });
+      const t = k.text(lock, "{{brand.title}}", { style: "Title 140", color: "lime", width: 1520, align: "CENTER", name: "Title" });
+      throb(t, 0.025);
+      k.text(lock, "{{brand.tagline}}", { style: "Tagline 30", color: "onVoid", width: 1520, align: "CENTER", name: "Tagline" });
+      const s1 = sticker(title, "All ages", 180, 170, { fill: "pink", ink: "onPink", rot: -12, w: 220, round: true, h: 90 });
+      const s2 = sticker(title, "Live from the basement", 1340, 760, { fill: "xerox", ink: "onXerox", rot: 6, w: 480 });
+      const s3 = sticker(title, "120 BPM", 1540, 180, { fill: "lime", ink: "onLime", rot: 10, w: 200, h: 90, round: true });
+      onBeat(s1, "rotation", 4);
+      onBeat(s2, "translateY", 5, 0.25);
+      onBeat(s3, "rotation", 5, 0.5);
+      const pb = box(k, title, 610, 820, 700, 80, { name: "Prompt plate", fill: "void", stroke: { color: "lime", width: 4, align: "INSIDE" }, align: "CENTER", justify: "CENTER" });
+      k.text(pb, "Press any key", { style: "Prompt 30", color: "lime", width: 680, align: "CENTER", name: "Prompt" });
+      throb(pb, 0.06);
+      label(k, title, "\xA9 2026 {{brand.studio}}  \xB7  photocopied in the basement  \xB7  v0.12", "Small 18", "dim", 160, 960, { w: 1600, align: "CENTER", name: "Legal" });
+      k.cues(title, [{ layer: "Title lockup", preset: "drop-in", at: 0 }, { layer: "Sticker", preset: "pop-in", at: 500, stagger: { delay: 120 } }, { layer: "Prompt plate", preset: "fade-in", at: 1e3 }]);
+      k.link(title, main, "DISSOLVE", { key: "*", duration: 350 });
+      k.link(title, main, "DISSOLVE", { duration: 350 });
+    }
+    {
+      zineGround(main);
+      k.rect(main, W, H, [k.gradient({ from: "void", to: "void", angle: 0, fromOpacity: 0.96, toOpacity: 0.4 })], { name: "Wash", absolute: { x: 0, y: 0 } });
+      label(k, main, "{{brand.title}}", "Wordmark 56", "lime", 120, 70, { w: 900, name: "Wordmark" });
+      const rule = k.rect(main, 180, 10, "pink", { name: "Wordmark rule", absolute: { x: 124, y: 214 } });
+      k.patch(rule, { rotation: -2 });
+      const list = menu(k, main, [
+        { label: "Play", hint: "Three tracks, no mercy", actions: [set(practice.id, { value: 0 }), go(songs, "PUSH_FROM_RIGHT", { duration: 350 })] },
+        { label: "Practice", hint: "No fail, all fun", actions: [set(practice.id, { value: 1 }), go(songs, "PUSH_FROM_RIGHT", { duration: 350 })] },
+        { label: "Customize", hint: "Notes and highway", actions: [go(custom, "PUSH_FROM_RIGHT", { duration: 350 })] },
+        { label: "Settings", hint: "Keys, offset, speed", actions: [go(settings, "PUSH_FROM_RIGHT", { duration: 350 })] },
+        { label: "Credits", actions: [go(credits, "DISSOLVE", { duration: 400 })] },
+        { label: "Quit", hint: "Back to the title", actions: [go(title, "DISSOLVE", { duration: 400 })] }
+      ], { focus: menuFocus, x: 100, y: 290, width: 880, pitch: 96, style: "Menu 44", color: "onVoid", plate: [k.gradient({ from: "violet", to: "violet", angle: 0, fromOpacity: 0.9, toOpacity: 0.1 })], marker: { color: "lime", size: 26 }, hintStyle: "Hint 20", radius: 2 });
+      k.named(list, "Menu item").forEach((id, i) => onBeat(id, "translateY", 4, i * 0.09));
+      vinyl(main, 1180, 250, 520);
+      tape(main, 1340, 236, 190, -8);
+      const card = box(k, main, 1150, 760, 620, 150, { name: "Now playing", fill: "xerox", padding: 24, gap: 6, effects: [paperShadow(8)] });
+      k.patch(card, { rotation: 2 });
+      k.text(card, "Now spinning", { style: "Small 18", color: "onXerox", name: "Now label" });
+      readout(k, card, `${songName} + " \u2014 " + ${artistName}`, "Safety Pin Heart \u2014 The Xerox Kids", "Label 26", "onXerox", 24, 58, { w: 572, name: "Now track" });
+      const tagPlate = box(k, main, 1480, 150, 300, 70, { name: "Player plate", fill: "pink", radius: 4, align: "CENTER", justify: "CENTER", stroke: { color: "void", width: 4, align: "INSIDE" }, effects: [paperShadow(6)] });
+      centreIn(readout(k, tagPlate, tag.n, "RAZOR GRRL", "Sticker 28", "onPink", 10, 0, { w: 280, align: "CENTER", name: "Player tag" }), 70);
+      k.patch(tagPlate, { rotation: 6 });
+      onBeat(tagPlate, "rotation", 3);
+      hintBar(main, "\u2191 \u2193  SELECT      ENTER  CONFIRM      MOUSE  POINT AND CLICK");
+      k.cues(main, [{ layer: "Menu item", preset: "slide-in", at: 0, params: { direction: "left" }, stagger: { delay: 60 } }, { layer: "Now playing", preset: "rise-in", at: 300 }]);
+    }
+    {
+      zineGround(songs);
+      k.rect(songs, W, H, k.tint("void", 0.55), { name: "Wash", absolute: { x: 0, y: 0 } });
+      ransom(songs, "PICK A TRACK", 100, 50, { shuffle: true, seed: 11 });
+      readout(k, songs, `${practice.n} == 1 ? "PRACTICE \xB7 NO FAIL" : "SET LIST \xB7 " + ${tag.n}`, "SET LIST \xB7 RAZOR GRRL", "Small 18", "pink", 1180, 90, { w: 400, align: "RIGHT", name: "Mode line" });
+      menu(k, songs, SONGS.map((s) => ({ label: s.title, hint: `${s.bpm} BPM`, actions: [...resetRun, toCountdown] })), {
+        focus: song,
+        x: 100,
+        y: 230,
+        width: 900,
+        pitch: 140,
+        itemHeight: 120,
+        style: "Song 38",
+        color: "onVoid",
+        hintStyle: "Hint 20",
+        radius: 4,
+        plate: [k.gradient({ from: "violet", to: "pink", angle: 0, fromOpacity: 0.9, toOpacity: 0.45 })],
+        marker: { color: "lime", size: 26 },
+        escape: [back()]
+      });
+      label(k, songs, "Difficulty", "Small 18", "dim", 124, 690, { name: "Difficulty label" });
+      DIFFS.forEach((d, i) => {
+        const pill = box(k, songs, 120 + i * 300, 730, 270, 84, { name: "Difficulty pill", fill: "xerox", radius: 4, align: "CENTER", justify: "CENTER", stroke: { color: "void", width: 4, align: "INSIDE" }, effects: [paperShadow(6)] });
+        const lit = k.rect(pill, 270, 84, i === 2 ? "pink" : "lime", { name: "Chosen", radius: 4, absolute: { x: 0, y: 0 } });
+        k.bindExpression(lit, "opacity", `${diff.n} == ${i} ? 1 : 0`);
+        k.text(pill, d, { style: "Menu 44", color: "onXerox", width: 250, align: "CENTER", name: "Difficulty word" });
+        k.bindExpression(pill, "rotation", `${diff.n} == ${i} ? ${i === 1 ? 3 : -3} : 0`);
+        k.on(pill, set(diff.id, { value: i }));
+      });
+      k.on(songs, set(diff.id, { expression: `max(0, ${diff.n} - 1)` }), { key: "ArrowLeft" });
+      k.on(songs, set(diff.id, { expression: `min(2, ${diff.n} + 1)` }), { key: "ArrowRight" });
+      readout(k, songs, `${diff.n} == 0 ? "Wide timing, no misses from notes. Warm up." : ${diff.n} == 1 ? "Tight timing. Misses break the combo and cost life." : "Riot: the tightest window, and misses bite hard."`, "Tight timing. Misses break the combo and cost life.", "Body 24", "dim", 124, 840, { w: 880, name: "Difficulty blurb" });
+      const card = box(k, songs, 1080, 170, 760, 780, { name: "Record card", fill: k.tint("panel", 0.94), radius: 6, stroke: { color: "line", width: 3 } });
+      vinyl(card, 150, 30, 460);
+      readout(k, card, songName, SONGS[0].title, "Song 38", "lime", 40, 520, { w: 680, align: "CENTER", name: "Track title" });
+      readout(k, card, artistName, SONGS[0].artist, "Artist 26", "onPanel", 40, 570, { w: 680, align: "CENTER", name: "Track artist" });
+      readout(k, card, SONGS.map((s, i) => `${song.n} == ${i} ? "${s.bpm} BPM \xB7 ${s.blurb}"`).join(" : ") + ' : ""', `${SONGS[0].bpm} BPM \xB7 ${SONGS[0].blurb}`, "Small 18", "dim", 40, 620, { w: 680, align: "CENTER", name: "Track meta" });
+      const starsRow = box(k, card, 210, 670, 340, 60, { name: "Stars" });
+      const rating = `(${SONGS.map((s, i) => `${song.n} == ${i} ? (${diff.n} == 0 ? ${s.stars[0]} : ${diff.n} == 1 ? ${s.stars[1]} : ${s.stars[2]})`).join(" : ")} : 0)`;
+      for (let j = 0; j < 5; j++) {
+        const st = k.star(starsRow, 56, "lime", { name: "Star", absolute: { x: j * 68, y: 2 } });
+        k.bindExpression(st, "opacity", `${rating} > ${j} ? 1 : 0.18`);
+        onBeat(st, "rotation", 6, j * 0.1);
+      }
+      const go1 = k.instance(songs, "Zine button", { Label: "Rock it  ENTER" }, { name: "Start", absolute: { x: 1560, y: 960 } });
+      onAll(k, go1, [...resetRun, toCountdown]);
+      hintBar(songs, "\u2191 \u2193  TRACK      LEFT RIGHT  DIFFICULTY      ENTER  PLAY      ESC  BACK");
+      k.cues(songs, [{ layer: "Menu item", preset: "slide-in", at: 0, params: { direction: "left" }, stagger: { delay: 80 } }, { layer: "Record card", preset: "rise-in", at: 200 }]);
+    }
+    const NOTE_INK = ["lime", "pink", "xerox", "violet"];
+    const noteShape = (parent, x, y, laneIndex, name = "Note") => {
+      const wrap = box(k, parent, x, y, 180, 180, { name });
+      const wE = `(${skin.n} == 2 ? 172 : ${skin.n} == 1 ? 100 : 118)`, hE = `(${skin.n} == 2 ? 60 : ${skin.n} == 1 ? 100 : 118)`;
+      const n = k.rect(wrap, 118, 118, NOTE_INK[laneIndex], { name: "Note body", radius: 59, absolute: { x: 31, y: 31 }, stroke: { color: "void", width: 5 }, effects: [paperShadow(5)] });
+      k.bindExpression(n, "width", wE);
+      k.bindExpression(n, "height", hE);
+      k.bindExpression(n, "x", `90 - ${wE} / 2`);
+      k.bindExpression(n, "y", `90 - ${hE} / 2`);
+      k.bindExpression(n, "cornerRadius", `${skin.n} == 0 ? 59 : ${skin.n} == 1 ? 10 : 14`);
+      k.bindExpression(n, "rotation", `${skin.n} == 1 ? 45 : 0`);
+      k.ellipse(wrap, 26, "void", { name: "Note eye", absolute: { x: 77, y: 77 } });
+      return wrap;
+    };
+    const fall = (id, x0, y0, x1, y1, trip, phase, s0 = 0.34, w = 180, h = 180) => {
+      const secs = trip / 1e3, dx = x1 - x0, dy = y1 - y0;
+      phase = (phase + 371e-5) % 1;
+      k.patch(id, { x: x0 - w / 2, y: y0 - h / 2, translateY: phase * dy, translateX: dx >= 0 ? phase * dx : phase * dx - 0.01, scaleX: s0 + phase * (1 - s0), scaleY: s0 + phase * (1 - s0), opacity: 0.25 + phase * 0.75 });
+      k.behave(id, "translateY", [{ kind: "spin", rate: dy / secs }, { kind: "mod", period: dy, offset: 0 }]);
+      if (Math.abs(dx) > 1) k.behave(id, "translateX", [{ kind: "spin", rate: dx / secs }, { kind: "mod", period: Math.abs(dx), offset: Math.min(0, dx) }]);
+      for (const p of ["scaleX", "scaleY"]) k.behave(id, p, [{ kind: "spin", rate: (1 - s0) / secs }, { kind: "mod", period: 1 - s0, offset: s0 }]);
+      k.behave(id, "opacity", [{ kind: "spin", rate: 0.75 / secs }, { kind: "mod", period: 0.75, offset: 0.25 }]);
+    };
+    const HIGHWAY_TINTS = [["lime", 0.18], ["violet", 0.42], ["pink", 0.26]];
+    {
+      zineGround(custom);
+      k.rect(custom, W, H, k.tint("void", 0.55), { name: "Wash", absolute: { x: 0, y: 0 } });
+      ransom(custom, "CUSTOMIZE", 100, 50, { shuffle: true, seed: 23 });
+      label(k, custom, "Cut your own look. The highway wears it on stage.", "Body 24", "dim", 124, 196, { name: "Screen lead" });
+      focusColumn(k, custom, { focus: custFocus, count: 2, x: 100, y: 280, w: 960, pitch: 240, plate: k.tint("violet", 0.3), escape: [back()], radius: 6 });
+      const rows = [
+        { name: "Note skin", v: skin, opts: ["Disc", "Diamond", "Brick"] },
+        { name: "Highway colour", v: road, opts: ["Lime", "Violet", "Pink"] }
+      ];
+      rows.forEach((r, ri) => {
+        const row = box(k, custom, 130, 300 + ri * 240, 900, 190, { name: `${r.name} row` });
+        label(k, row, r.name, "Label 26", "onVoid", 0, 10, { name: "Setting name" });
+        r.opts.forEach((o, i) => {
+          const pill = box(k, row, i * 300, 70, 270, 90, { name: "Option pill", fill: "xerox", radius: 4, align: "CENTER", justify: "CENTER", stroke: { color: "void", width: 4, align: "INSIDE" }, effects: [paperShadow(6)] });
+          const lit = k.rect(pill, 270, 90, "lime", { name: "Chosen", radius: 4, absolute: { x: 0, y: 0 } });
+          k.bindExpression(lit, "opacity", `${r.v.n} == ${i} ? 1 : 0`);
+          k.text(pill, o, { style: "Sticker 28", color: "onXerox", width: 250, align: "CENTER", name: "Option word" });
+          k.bindExpression(pill, "rotation", `${r.v.n} == ${i} ? -3 : 0`);
+          k.on(pill, set(r.v.id, { value: i }));
+        });
+        focusRow(k, row, custFocus, ri);
+        const here = `${custFocus.n} == ${ri}`;
+        for (const key of ["ArrowLeft", "a"]) k.on(row, when([{ if: here, then: [set(r.v.id, { expression: `(${r.v.n} + 2) % 3` })] }]), { key });
+        for (const key of ["ArrowRight", "d"]) k.on(row, when([{ if: here, then: [set(r.v.id, { expression: `(${r.v.n} + 1) % 3` })] }]), { key });
+      });
+      const pv = box(k, custom, 1180, 150, 640, 800, { name: "Live preview", fill: "scrim", radius: 6, stroke: { color: "line", width: 3 }, clip: true });
+      HIGHWAY_TINTS.forEach(([role, a], i) => {
+        const hw = poly(k, pv, [[230, 60], [410, 60], [600, 800], [40, 800]], k.tint(role, a), { name: "Preview highway" });
+        k.bindExpression(hw, "visible", `${road.n} == ${i}`);
+        const edge = poly(k, pv, [[230, 60], [40, 800]], role, { name: "Preview edge", stroke: 5 });
+        const edge2 = poly(k, pv, [[410, 60], [600, 800]], role, { name: "Preview edge", stroke: 5 });
+        for (const e of [edge, edge2]) {
+          k.bindExpression(e, "visible", `${road.n} == ${i}`);
+          onBeat(e, "opacity", 0.3);
+        }
+      });
+      for (let l = 0; l < 3; l++) for (let p = 0; p < 2; p++) {
+        const n = noteShape(pv, 0, 0, l, "Preview note");
+        fall(n, 260 + l * 60, 90, 130 + l * 190, 700, 1600, (p * 0.5 + l * 0.21) % 1, 0.4);
+      }
+      const cap = box(k, pv, 0, 720, 640, 80, { name: "Preview caption", fill: k.tint("scrim", 0.9), align: "CENTER", justify: "CENTER" });
+      centreIn(readout(k, cap, `(${skin.n} == 0 ? "DISC" : ${skin.n} == 1 ? "DIAMOND" : "BRICK") + " NOTES \xB7 " + (${road.n} == 0 ? "LIME" : ${road.n} == 1 ? "VIOLET" : "PINK") + " HIGHWAY"`, "DISC NOTES \xB7 LIME HIGHWAY", "HUD 20", "onVoid", 20, 0, { w: 600, align: "CENTER", name: "Preview name" }), 80);
+      tape(custom, 1440, 130, 160, 4);
+      const b = k.instance(custom, "Zine button", { Label: "Done  ESC" }, { name: "Back", absolute: { x: 124, y: 900 } });
+      k.on(b, back());
+      hintBar(custom, "\u2191 \u2193  ROW      LEFT RIGHT  CHOOSE      MOUSE  CLICK A STICKER      ESC  BACK");
+    }
+    {
+      zineGround(settings);
+      k.rect(settings, W, H, k.tint("void", 0.6), { name: "Wash", absolute: { x: 0, y: 0 } });
+      ransom(settings, "SETTINGS", 100, 36, { shuffle: true, seed: 17 });
+      const col = box(k, settings, 120, 196, 1040, 780, { name: "Settings list" });
+      const pitch = 70;
+      focusColumn(k, settings, { focus: setFocus, count: 11, x: 100, y: 192, w: 1080, pitch, plate: k.tint("violet", 0.34), guard: `${rebind.n} == ""`, escape: [back()], radius: 4 });
+      const common = { labelStyle: "Label 26", ink: "onVoid" };
+      const sl = { ...common, valueStyle: "Value 26", track: "line", fill: "lime", knob: "xerox" };
+      const at = (i) => ({ x: 0, y: i * pitch, width: 1040, focus: { n: setFocus.n, index: i } });
+      const r = [
+        slider(k, col, { ...sl, ...at(0), label: "Master volume", variable: master, suffix: "%" }),
+        slider(k, col, { ...sl, ...at(1), label: "Music", variable: music, suffix: "%" }),
+        slider(k, col, { ...sl, ...at(2), label: "Note speed", variable: speed, min: 1, max: 10, step: 1 }),
+        slider(k, col, { ...sl, ...at(3), label: "Audio offset", variable: offset, min: -100, max: 100, step: 10, suffix: " ms" }),
+        toggle(k, col, { ...common, ...at(4), label: "Flashing lights", variable: flashing }),
+        toggle(k, col, { ...common, ...at(5), label: "Lane key labels", variable: keyLabels }),
+        toggle(k, col, { ...common, ...at(6), label: "Halftone backdrop", variable: halftoneOn })
+      ];
+      const kb = { ...common, capStyle: "Cap 22", cap: "xerox", onCap: "onXerox", listening: "pink", rebind };
+      laneKeys.forEach((v, i) => r.push(keybind(k, col, { ...kb, ...at(7 + i), action: `Lane ${i + 1}`, slot: `lane${i + 1}`, variable: v })));
+      r.forEach((row, i) => focusRow(k, row, setFocus, i));
+      rebindListener(k, settings, rebind, laneKeys.map((v, i) => ({ slot: `lane${i + 1}`, variable: v })));
+      const met = box(k, settings, 1260, 180, 580, 560, { name: "Calibration", fill: "xerox", radius: 4, effects: [paperShadow(10)] });
+      k.patch(met, { rotation: 1.5 });
+      label(k, met, "Calibration", "Small 18", "onXerox", 32, 26, { name: "Calibration title" });
+      poly(k, met, [[290, 90], [410, 400], [170, 400]], k.tint("void", 0.9), { name: "Metronome body" });
+      const arm = box(k, met, 280, 100, 20, 300, { name: "Pendulum" });
+      k.rect(arm, 8, 300, "pink", { name: "Pendulum rod", absolute: { x: 6, y: 0 } });
+      k.rect(arm, 20, 30, "lime", { name: "Pendulum weight", absolute: { x: 0, y: 70 } });
+      k.patch(arm, { anchorX: 0.5, anchorY: 1 });
+      drift(k, arm, "rotation", 26, 1);
+      const beatLine = box(k, met, 40, 430, 500, 40, { name: "Beat line" });
+      k.rect(beatLine, 500, 6, "void", { name: "Beat rule", absolute: { x: 0, y: 17 } });
+      k.rect(beatLine, 8, 40, "void", { name: "Beat tick", absolute: { x: 246, y: 0 } });
+      const tap = k.ellipse(beatLine, 30, "pink", { name: "Your tap", absolute: { x: 235, y: 5 }, stroke: { color: "void", width: 3 } });
+      k.bindExpression(tap, "translateX", `${offset.n} * 2.2`);
+      throb(tap, 0.25);
+      readout(k, met, `${offset.n} == 0 ? "DEAD ON THE BEAT" : ${offset.n} > 0 ? "+" + ${offset.n} + " MS \xB7 YOU HIT LATE" : ${offset.n} + " MS \xB7 YOU HIT EARLY"`, "DEAD ON THE BEAT", "HUD 20", "onXerox", 32, 490, { w: 516, align: "CENTER", name: "Offset words" });
+      const note = box(k, settings, 1260, 780, 580, 110, { name: "Speed note", fill: "pink", radius: 4, align: "CENTER", justify: "CENTER", stroke: { color: "void", width: 4, align: "INSIDE" } });
+      k.patch(note, { rotation: -2 });
+      centreIn(readout(k, note, `"NOTE SPEED " + ${speed.n} + (${speed.n} <= 3 ? " \xB7 CHILL SCROLL" : ${speed.n} >= 8 ? " \xB7 BLUR MODE" : " \xB7 STAGE SPEED")`, "NOTE SPEED 6 \xB7 STAGE SPEED", "Sticker 28", "onPink", 20, 0, { w: 540, align: "CENTER", name: "Speed words" }), 110);
+      const b = k.instance(settings, "Zine button", { Label: "Back  ESC" }, { name: "Back", absolute: { x: 1660, y: 920 } });
+      k.on(b, back());
+      hintBar(settings, "\u2191 \u2193  ROW      LEFT RIGHT  ADJUST      ENTER  TOGGLE / REBIND      ESC  BACK");
+    }
+    {
+      zineGround(credits);
+      const strip = box(k, credits, 460, 0, 1e3, H, { name: "Paper strip", fill: "xerox", effects: [paperShadow(12)] });
+      const roll2 = box(k, strip, 0, 60, 1e3, 1e3, { name: "Credits roll", gap: 20, align: "CENTER" });
+      k.text(roll2, "{{brand.title}}", { style: "Wordmark 56", color: "onXerox", width: 900, align: "CENTER", name: "Roll title" });
+      for (const [role, name] of CREDITS) {
+        const g = k.stack(roll2, { gap: 2, align: "CENTER", name: "Credit" });
+        k.text(g, role, { style: "Credit role 20", color: "onXerox", width: 900, align: "CENTER", name: "Role" });
+        k.text(g, name, { style: "Credit name 36", color: "onXerox", width: 900, align: "CENTER", name: "Name" });
+      }
+      k.text(roll2, "Made loud by {{brand.studio}}", { style: "Credit role 20", color: "onXerox", width: 900, align: "CENTER", name: "Sign-off" });
+      keys(k, roll2, "translateY", [{ t: 0, v: 1080, ease: { kind: "linear" } }, { t: 11800, v: -1150 }]);
+      const s = sticker(credits, "Thanks for coming", 1480, 160, { fill: "pink", ink: "onPink", rot: 8, w: 400 });
+      onBeat(s, "rotation", 4);
+      k.link(credits, main, "DISSOLVE", { key: "*", duration: 350 });
+      k.link(credits, main, "DISSOLVE", { duration: 350 });
+    }
+    {
+      zineGround(countdown);
+      readout(k, countdown, songName, SONGS[0].title, "Song 38", "lime", 160, 150, { w: 1600, align: "CENTER", name: "Up next" });
+      readout(k, countdown, `${artistName} + " \xB7 " + ${diffName} + (${practice.n} == 1 ? " \xB7 PRACTICE" : "")`, "The Xerox Kids \xB7 HARD", "Artist 26", "onVoid", 160, 206, { w: 1600, align: "CENTER", name: "Up next artist" });
+      const disc = box(k, countdown, 710, 290, 500, 500, { name: "Count disc", fill: "pink", radius: 250, align: "CENTER", justify: "CENTER", stroke: { color: "void", width: 8, align: "INSIDE" }, effects: [paperShadow(12)] });
+      k.text(disc, "3", { style: "Count 300", color: "onPink", width: 460, align: "CENTER", name: "Count" });
+      throb(disc, 0.07);
+      k.counts(countdown, [{ layer: "Count", at: 0, duration: 2e3, counter: { from: 3, to: 1, separator: "" }, tick: 1e3 }]);
+      const goSticker = sticker(countdown, "GO GO GO", 660, 470, { fill: "lime", ink: "onLime", rot: -8, w: 600, h: 140, style: "Judge 64", name: "Go sticker" });
+      keys(k, disc, "opacity", [{ t: 2900, v: 1, ease: { kind: "ease", name: "cubic-in" } }, { t: 3050, v: 0 }]);
+      label(k, countdown, "Hands on the home row", "Small 18", "dim", 160, 860, { w: 1600, align: "CENTER", name: "Countdown hint" });
+      readout(k, countdown, `${laneKeys.map((v) => v.n).join(' + "   " + ')}`, "D   F   J   K", "Prompt 30", "lime", 160, 900, { w: 1600, align: "CENTER", name: "Countdown keys" });
+      k.cues(countdown, [{ layer: "Count disc", preset: "pop-in", at: 0 }, { layer: "Go sticker", preset: "pop-in", at: 3e3, params: { duration: 300 } }]);
+      void goSticker;
+      k.link(countdown, game, "ZOOM_THROUGH", { trigger: "AFTER_TIMEOUT", delay: 3400, duration: 400 });
+      k.link(countdown, songs, "DISSOLVE", { key: "Escape", duration: 300 });
+    }
+    const TOP_Y = 140, BOT_Y = 1040, TOP_L = 700, TOP_R = 1220, BOT_L = 380, BOT_R = 1540, REC_Y = 880, START_Y = 190;
+    const edgeAt = (y) => {
+      const t = (y - TOP_Y) / (BOT_Y - TOP_Y);
+      return [TOP_L + (BOT_L - TOP_L) * t, TOP_R + (BOT_R - TOP_R) * t];
+    };
+    const laneX = (i, y) => {
+      const [l, r] = edgeAt(y);
+      return l + (r - l) * (i + 0.5) / 4;
+    };
+    {
+      k.rect(game, W, H, "void", { name: "Xerox grain", absolute: { x: 0, y: 0 }, effects: [grainFx] });
+      const ht = k.rect(game, W, H, "violet", { name: "Combo halftone", absolute: { x: 0, y: 0 }, effects: [halftoneFx(26)] });
+      k.bindExpression(ht, "opacity", `0.12 + min(${combo.n}, 30) / 30 * 0.6`);
+      k.bindExpression(ht, "visible", `${halftoneOn.n} == 1`);
+      const lights = box(k, game, 0, 0, W, H, { name: "Stage lights" });
+      k.bindExpression(lights, "visible", `${flashing.n} == 1`);
+      const coneL = poly(k, lights, [[120, 0], [260, 0], [900, 1080], [300, 1080]], [k.gradient({ from: "lime", to: "lime", angle: 90, fromOpacity: 0.35, toOpacity: 0 })], { name: "Light cone" });
+      const coneR = poly(k, lights, [[1660, 0], [1800, 0], [1620, 1080], [1020, 1080]], [k.gradient({ from: "pink", to: "pink", angle: 90, fromOpacity: 0.35, toOpacity: 0 })], { name: "Light cone" });
+      onBeat(coneL, "opacity", 0.4);
+      onBeat(coneR, "opacity", 0.4, 0.5);
+      onBeat(coneL, "rotation", 3);
+      onBeat(coneR, "rotation", 3, 0.5);
+      for (const [x, ph] of [[40, 0], [1640, 0.5]]) {
+        const stack = box(k, game, x, 420, 240, 520, { name: "Speaker stack", fill: "deep", radius: 6, stroke: { color: "line", width: 3 } });
+        for (const [cy, d2] of [[40, 160], [250, 190]]) {
+          const cone = k.ellipse(stack, d2, "scrim", { name: "Woofer", absolute: { x: 120 - d2 / 2, y: cy }, stroke: { color: "line", width: 5 } });
+          throb(cone, 0.06, ph);
+          k.ellipse(stack, d2 * 0.34, "panel", { name: "Dust cap", absolute: { x: 120 - d2 * 0.34 / 2, y: cy + d2 * 0.33 } });
+        }
+      }
+      const road3 = box(k, game, 0, 0, W, H, { name: "Highway" });
+      HIGHWAY_TINTS.forEach(([role, a], i) => {
+        const g = box(k, road3, 0, 0, W, H, { name: `Highway ${role}` });
+        poly(k, g, [[TOP_L, TOP_Y], [TOP_R, TOP_Y], [BOT_R, BOT_Y], [BOT_L, BOT_Y]], k.tint(role, a), { name: "Highway deck" });
+        const e1 = poly(k, g, [[TOP_L, TOP_Y], [BOT_L, BOT_Y]], role, { name: "Highway edge", stroke: 8 });
+        const e2 = poly(k, g, [[TOP_R, TOP_Y], [BOT_R, BOT_Y]], role, { name: "Highway edge", stroke: 8 });
+        for (const e of [e1, e2]) onBeat(e, "opacity", 0.35);
+        k.bindExpression(g, "visible", `${road.n} == ${i}`);
+      });
+      for (let i = 1; i < 4; i++) {
+        const [tl, tr] = edgeAt(TOP_Y), [bl, br] = edgeAt(BOT_Y);
+        poly(k, road3, [[tl + (tr - tl) * i / 4, TOP_Y], [bl + (br - bl) * i / 4, BOT_Y]], "line", { name: "Lane chalk", stroke: 3 });
+      }
+      const [rl, rr] = edgeAt(REC_Y);
+      k.rect(road3, rr - rl, 6, k.tint("xerox", 0.6), { name: "Strike line", absolute: { x: rl, y: REC_Y - 3 } });
+      const horizon = k.rect(road3, 620, 20, [k.gradient({ from: "pink", to: "lime", angle: 0 })], { name: "Horizon", absolute: { x: 650, y: TOP_Y - 10 }, radius: 10, effects: [{ id: "hg", type: "DROP_SHADOW", color: k.color("pink", 0.9), offset: { x: 0, y: 0 }, blur: 40, spread: 0, visible: true, showBehindTransparent: true }] });
+      throb(horizon, 0.05);
+      const TIERS = [[`${speed.n} <= 3`, 3e3], [`${speed.n} > 3 && ${speed.n} < 8`, 2e3], [`${speed.n} >= 8`, 1250]];
+      TIERS.forEach(([shown, trip], ti) => {
+        const tier = box(k, game, 0, 0, W, H, { name: `Notes ${["slow", "stage", "blur"][ti]}` });
+        k.bindExpression(tier, "visible", shown);
+        for (let b = 0; b < 4; b++) {
+          const [l0, r0] = edgeAt(START_Y);
+          const wrap = box(k, tier, 0, 0, rr - rl, 20, { name: "Beat line" });
+          k.rect(wrap, rr - rl, 5, k.tint("xerox", 0.3), { name: "Beat rule", absolute: { x: 0, y: 8 } });
+          fall(wrap, 960, START_Y, 960, REC_Y, trip, b / 4, (r0 - l0) / (rr - rl), rr - rl, 20);
+        }
+        for (let l = 0; l < 4; l++) for (let p = 0; p < 3; p++) {
+          const n = noteShape(tier, 0, 0, l);
+          fall(n, laneX(l, START_Y), START_Y, laneX(l, REC_Y), REC_Y, trip, (p / 3 + [0, 0.17, 0.58, 0.39][l]) % 1);
+        }
+      });
+      const crowd = box(k, game, 0, 900, W, 180, { name: "Crowd" });
+      for (let c = 0; c < 16; c++) {
+        const x = c < 8 ? 10 + c * 48 : 1500 + (c - 8) * 52;
+        const r = hash(c * 17);
+        const p = box(k, crowd, x - r % 20, 30 + r % 40, 110, 200, { name: "Fan" });
+        k.ellipse(p, 56, "deep", { name: "Head", absolute: { x: 27, y: 0 }, stroke: { color: "line", width: 2 } });
+        poly(k, p, [[0, 200], [18, 70], [92, 70], [110, 200]], "deep", { name: "Shoulders" });
+        if (r % 3 === 0) poly(k, p, [[80, 76], [120, -20], [132, -14], [96, 84]], "deep", { name: "Fist up" });
+        onBeat(p, "translateY", 8 + r % 10, r % 5 / 10);
+        const need = [0, 0, 20, 40, 60, 75, 85, 95][c % 8];
+        if (need > 0) k.bindExpression(p, "visible", `${hype.n} >= ${need}`);
+      }
+      const receptors = laneKeys.map((v, i) => {
+        const cx = laneX(i, REC_Y);
+        const inst = k.instance(game, "Receptor", {}, { name: `Receptor ${i + 1}`, absolute: { x: Math.round(cx - 110), y: REC_Y - 480 } });
+        const cap = box(k, game, Math.round(laneX(i, 962)) - 32, 938, 64, 44, { name: "Lane key", fill: "xerox", radius: 4, align: "CENTER", justify: "CENTER", stroke: { color: "void", width: 3, align: "INSIDE" } });
+        centreIn(readout(k, cap, v.n, String(k.doc.variables[v.id].valuesByMode["Mode 1"]), "Cap 22", "onXerox", 4, 0, { w: 56, align: "CENTER", name: "Lane key letter" }), 44);
+        k.bindExpression(cap, "visible", `${keyLabels.n} == 1`);
+        return inst;
+      });
+      const top = box(k, game, 560, 40, 800, 70, { name: "Song strip", fill: k.tint("scrim", 0.9), radius: 4, stroke: { color: "line", width: 2 } });
+      readout(k, top, `${songName} + " \xB7 " + ${diffName}`, "Safety Pin Heart \xB7 HARD", "HUD 20", "onVoid", 20, 10, { w: 760, name: "Song name" });
+      bar(k, top, { x: 20, y: 44, w: 760, h: 12, value: notes.n, max: length.n, back: "line", fill: [k.gradient({ from: "pink", to: "lime", angle: 0 })], name: "Song progress" });
+      const left = box(k, game, 40, 40, 440, 360, { name: "Scoreboard", fill: k.tint("scrim", 0.92), radius: 4, stroke: { color: "line", width: 2 } });
+      readout(k, left, tag.n, "RAZOR GRRL", "HUD 20", "pink", 24, 20, { w: 392, name: "Player" });
+      readout(k, left, `pad(${score.n}, 7)`, "0000000", "Score 52", "onVoid", 24, 50, { w: 392, name: "Score" });
+      readout(k, left, `"BEST " + pad(max(${best.n}, ${score.n}), 7)`, "BEST 0018000", "Small 18", "dim", 24, 116, { w: 392, name: "Best" });
+      label(k, left, "Life", "Small 18", "onVoid", 24, 168, { name: "Life label" });
+      bar(k, left, { x: 24, y: 198, w: 392, h: 34, value: life.n, max: maxLife.n, back: "line", fill: [k.gradient({ from: "lime", to: "lime", angle: 0 })], chip: { expression: lifeTrail.n, color: "pink" }, name: "Life gauge" });
+      for (let i = 1; i < 8; i++) k.rect(left, 3, 34, "scrim", { name: "Gauge notch", absolute: { x: 24 + i * 49, y: 198 } });
+      const lifeTape = tape(left, 330, 188, 100, 12);
+      void lifeTape;
+      readout(k, left, `${practice.n} == 1 ? "PRACTICE \xB7 LIFE LOCKED" : round(${life.n}) + " / " + ${maxLife.n}`, "100 / 100", "HUD 20", "onVoid", 24, 250, { w: 392, name: "Life value" });
+      const lowLife = box(k, left, 24, 292, 392, 46, { name: "Low life", fill: "pink", radius: 4, align: "CENTER", justify: "CENTER" });
+      k.text(lowLife, "The crowd is turning", { style: "HUD 20", color: "onPink", autoWidth: true, name: "Low life words" });
+      k.bindExpression(lowLife, "visible", `${life.n} < 35 && ${life.n} > 0`);
+      onBeat(lowLife, "opacity", 0.3);
+      const multi = box(k, game, 70, 440, 200, 200, { name: "Multiplier", fill: "lime", radius: 100, align: "CENTER", justify: "CENTER", stroke: { color: "void", width: 6, align: "INSIDE" }, effects: [paperShadow(8)] });
+      centreIn(readout(k, multi, `"\xD7" + ${mult.n}`, "\xD71", "Judge 64", "onLime", 10, 0, { w: 180, align: "CENTER", name: "Multiplier value" }), 200);
+      k.patch(multi, { rotation: -8 });
+      throb(multi, 0.05);
+      const prac = sticker(game, "Practice \xB7 no fail", 50, 690, { fill: "xerox", ink: "onXerox", rot: -6, w: 400, name: "Practice sticker" });
+      k.bindExpression(prac, "visible", `${practice.n} == 1`);
+      const right = box(k, game, 1540, 130, 340, 250, { name: "Tally", fill: k.tint("scrim", 0.92), radius: 4, stroke: { color: "line", width: 2 } });
+      readout(k, right, `round((${perfect.n} + ${great.n} * 0.5) / max(1, ${perfect.n} + ${great.n} + ${miss.n}) * 100) + "%"`, "0%", "Score 52", "onVoid", 24, 16, { w: 292, align: "RIGHT", name: "Accuracy" });
+      label(k, right, "Accuracy", "Small 18", "dim", 24, 80, { w: 292, align: "RIGHT", name: "Accuracy label" });
+      readout(k, right, `"PERFECT " + ${perfect.n}`, "PERFECT 0", "HUD 20", "lime", 24, 120, { w: 292, align: "RIGHT", name: "Perfect count" });
+      readout(k, right, `"GREAT " + ${great.n}`, "GREAT 0", "HUD 20", "onVoid", 24, 152, { w: 292, align: "RIGHT", name: "Great count" });
+      readout(k, right, `"MISS " + ${miss.n}`, "MISS 0", "HUD 20", "pink", 24, 184, { w: 292, align: "RIGHT", name: "Miss count" });
+      const hy = box(k, game, 1790, 400, 90, 520, { name: "Hype meter", fill: k.tint("scrim", 0.92), radius: 4, stroke: { color: "line", width: 2 } });
+      const well = box(k, hy, 25, 20, 40, 440, { name: "Hype well", fill: "line", clip: true });
+      const hf = k.rect(well, 40, 440, [k.gradient({ from: "lime", to: "pink", angle: 90 })], { name: "Hype fill", absolute: { x: 0, y: 0 } });
+      k.bindExpression(hf, "height", `clamp(${hype.n} / 100, 0, 1) * 440`);
+      k.bindExpression(hf, "y", `440 - clamp(${hype.n} / 100, 0, 1) * 440`);
+      label(k, hy, "Hype", "Small 18", "onVoid", 0, 476, { w: 90, align: "CENTER", name: "Hype label" });
+      const hypeSticker = sticker(game, "Crowd hype", 1540, 860, { fill: "pink", ink: "onPink", rot: -10, w: 260, h: 56 });
+      onBeat(hypeSticker, "rotation", 3);
+      const comboSlip = box(k, game, 810, 290, 300, 160, { name: "Combo slip", fill: k.tint("scrim", 0.88), radius: 6 });
+      readout(k, comboSlip, `${combo.n}`, "0", "Combo 96", "lime", 10, 14, { w: 280, align: "CENTER", name: "Combo" });
+      label(k, comboSlip, "Combo", "Small 18", "onVoid", 10, 118, { w: 280, align: "CENTER", name: "Combo label" });
+      k.bindExpression(comboSlip, "visible", `${combo.n} >= 2`);
+      throb(comboSlip, 0.04);
+      const legend = box(k, game, 40, 1e3, 520, 44, { name: "Controls", fill: k.tint("scrim", 0.92), radius: 4, align: "CENTER", justify: "CENTER" });
+      centreIn(readout(k, legend, `${laneKeys.map((v) => v.n).join(' + " " + ')} + "  HIT  \xB7  ESC  PAUSE"`, "D F J K  HIT  \xB7  ESC  PAUSE", "Small 18", "onVoid", 10, 0, { w: 500, align: "CENTER", name: "Legend" }), 44);
+      const logic = box(k, game, 0, 0, 1, 1, { name: "Game logic" });
+      const K = "upper($key)";
+      const isLane = laneKeys.map((v) => `${K} == ${v.n}`).join(" || ");
+      const d = diff.n;
+      const perfectAt = `(${d} == 0 ? ${PERFECT_AT[0]} : ${d} == 1 ? ${PERFECT_AT[1]} : ${PERFECT_AT[2]})`;
+      const greatAt = `(${d} == 0 ? ${GREAT_AT[0]} : ${d} == 1 ? ${GREAT_AT[1]} : ${GREAT_AT[2]})`;
+      const multOf = `(${combo.n} >= 30 ? 8 : ${combo.n} >= 20 ? 4 : ${combo.n} >= 10 ? 2 : 1)`;
+      const hurt = (amount) => [
+        set(combo.id, { value: 0 }),
+        set(mult.id, { value: 1 }),
+        set(miss.id, { expression: `${miss.n} + 1` }),
+        set(life.id, { expression: `max(0, ${life.n} - (${practice.n} == 1 ? 0 : ${amount}))`, glide: 240 }),
+        set(lifeTrail.id, { expression: life.n, glide: 1100, easing: "EASE_IN_OUT" }),
+        set(hype.id, { expression: `max(0, ${hype.n} - 12)`, glide: 400 })
+      ];
+      const songEnd = [
+        set(newBest.id, { expression: `${score.n} > ${best.n} ? 1 : 0` }),
+        set(best.id, { expression: `max(${best.n}, ${score.n})` }),
+        go(results, "SLIDE_FROM_BOTTOM", { duration: 600 })
+      ];
+      k.on(logic, when([
+        { if: isLane, then: [
+          set(lane.id, { expression: laneKeys.map((v, i) => `${K} == ${v.n} ? ${i + 1}`).join(" : ") + " : 0" }),
+          // The timing roll, 0…9: where this press landed against the beat, worse the further the offset is off.
+          set(roll.id, { expression: `max(0, (${notes.n} * ${notes.n} * 3 + ${notes.n} * 7 + ${lane.n} * 9 + ${song.n} * 5 + floor(${notes.n} / 5) * 3) % 10 - floor(abs(${offset.n}) / 50))` }),
+          set(judge.id, { expression: `${roll.n} >= ${perfectAt} ? 2 : ${roll.n} >= ${greatAt} ? 1 : 0` }),
+          set(notes.id, { expression: `${notes.n} + 1` }),
+          when([
+            { if: `${judge.n} == 2`, then: [
+              set(perfect.id, { expression: `${perfect.n} + 1` }),
+              set(combo.id, { expression: `${combo.n} + 1` }),
+              set(mult.id, { expression: multOf }),
+              set(score.id, { expression: `${score.n} + 300 * ${mult.n}`, glide: 380 }),
+              set(hype.id, { expression: `min(100, ${hype.n} + 5)`, glide: 400 }),
+              set(life.id, { expression: `min(${maxLife.n}, ${life.n} + 2)`, glide: 240 }),
+              set(lifeTrail.id, { expression: life.n })
+            ] },
+            { if: `${judge.n} == 1`, then: [
+              set(great.id, { expression: `${great.n} + 1` }),
+              set(combo.id, { expression: `${combo.n} + 1` }),
+              set(mult.id, { expression: multOf }),
+              set(score.id, { expression: `${score.n} + 100 * ${mult.n}`, glide: 380 }),
+              set(hype.id, { expression: `min(100, ${hype.n} + 2)`, glide: 400 })
+            ] },
+            { then: hurt(`(${d} == 2 ? 16 : 12)`) }
+          ]),
+          set(maxCombo.id, { expression: `max(${maxCombo.n}, ${combo.n})` }),
+          set(judged.id, { value: 1 }),
+          when([
+            { if: `${life.n} <= 0`, then: [go(fail, "DISSOLVE", { duration: 700 })] },
+            { if: `${notes.n} >= ${length.n}`, then: songEnd }
+          ])
+        ] },
+        { if: `len($key) == 1 && $key != " "`, then: [
+          set(judge.id, { value: -1 }),
+          ...hurt("8"),
+          set(judged.id, { value: 1 }),
+          when([{ if: `${life.n} <= 0`, then: [go(fail, "DISSOLVE", { duration: 700 })] }])
+        ] },
+        { then: [set(judged.id, { value: 0 })] }
+      ]), { key: "*" });
+      k.on(logic, overlay(pause), { key: "Escape" });
+      const pop = k.instance(game, "Judgment", {}, { name: "Judgment", absolute: { x: 680, y: 500 } });
+      const stamp = k.instance(game, "Multiplier stamp", {}, { name: "Multiplier stamp", absolute: { x: 1260, y: 420 } });
+      const flash = k.instance(game, "Miss flash", {}, { name: "Miss flash", absolute: { x: 0, y: 0 } });
+      receptors.forEach((inst, i) => k.on(inst, when([{ if: `${K} == ${laneKeys[i].n}`, then: [k.changeAction("Receptor/Hit", 0)] }]), { key: "*" }));
+      const J = judge.n;
+      k.on(pop, when([
+        { if: `${judged.n} == 1 && ${J} == 2`, then: [k.changeAction("Judgment/Perfect", 0)] },
+        { if: `${judged.n} == 1 && ${J} == 1`, then: [k.changeAction("Judgment/Great", 0)] },
+        { if: `${judged.n} == 1 && ${J} == 0`, then: [k.changeAction("Judgment/Miss", 0)] },
+        { if: `${judged.n} == 1 && ${J} == -1`, then: [k.changeAction("Judgment/Ghost", 0)] }
+      ]), { key: "*" });
+      k.on(stamp, when([
+        { if: `${judged.n} == 1 && ${J} > 0 && ${combo.n} == 10`, then: [k.changeAction("Multiplier stamp/X2", 0)] },
+        { if: `${judged.n} == 1 && ${J} > 0 && ${combo.n} == 20`, then: [k.changeAction("Multiplier stamp/X4", 0)] },
+        { if: `${judged.n} == 1 && ${J} > 0 && ${combo.n} == 30`, then: [k.changeAction("Multiplier stamp/X8", 0)] }
+      ]), { key: "*" });
+      k.on(flash, when([{ if: `${judged.n} == 1 && ${J} <= 0 && ${flashing.n} == 1`, then: [k.changeAction("Miss flash/Hit", 0)] }]), { key: "*" });
+    }
+    {
+      ransom(pause, "PAUSED", 700, 200, { shuffle: true, seed: 3 });
+      menu(k, pause, [
+        { label: "Resume", actions: [close()] },
+        { label: "Restart song", actions: [...resetRun, go(countdown, "DISSOLVE", { duration: 300 })] },
+        { label: "Song select", actions: [go(songs, "DISSOLVE", { duration: 300 })] },
+        { label: "Main menu", actions: [go(main, "DISSOLVE", { duration: 400 })] }
+      ], { focus: pauseFocus, x: 610, y: 400, width: 700, pitch: 92, style: "Menu 44", color: "onVoid", plate: k.tint("violet", 0.75), marker: { color: "lime", size: 26 }, escape: [close()], radius: 4 });
+      readout(k, pause, `"COMBO " + ${combo.n} + "   \xB7   SCORE " + pad(${score.n}, 7) + "   \xB7   NOTE " + ${notes.n} + " / " + ${length.n}`, "COMBO 0   \xB7   SCORE 0000000   \xB7   NOTE 0 / 32", "Hint 20", "dim", 160, 800, { w: 1600, align: "CENTER", name: "Run stats" });
+    }
+    {
+      zineGround(fail);
+      k.rect(fail, W, H, k.tint("void", 0.6), { name: "Wash", absolute: { x: 0, y: 0 } });
+      ransom(fail, "CROWD LOST", 530, 220, { seed: 41 });
+      readout(k, fail, `"The pit went quiet at note " + ${notes.n} + " of " + ${length.n} + ". Best combo " + ${maxCombo.n} + "."`, "The pit went quiet at note 0 of 32. Best combo 0.", "Tagline 30", "onVoid", 160, 400, { w: 1600, align: "CENTER", name: "Fail line" });
+      const s = sticker(fail, "Try again, louder", 1330, 150, { fill: "pink", ink: "onPink", rot: 12, w: 400 });
+      onBeat(s, "rotation", 2);
+      menu(k, fail, [
+        { label: "Retry", actions: [...resetRun, toCountdown] },
+        { label: "Song select", actions: [go(songs, "DISSOLVE", { duration: 400 })] },
+        { label: "Main menu", actions: [go(main, "DISSOLVE", { duration: 400 })] }
+      ], { focus: endFocus, x: 610, y: 540, width: 700, pitch: 92, style: "Menu 44", color: "onVoid", plate: k.tint("pink", 0.45), marker: { color: "pink", size: 26 }, radius: 4 });
+      k.cues(fail, [{ layer: "Ransom letter", preset: "drop-in", at: 0, stagger: { delay: 70 } }]);
+    }
+    {
+      zineGround(results);
+      k.rect(results, W, H, k.tint("void", 0.55), { name: "Wash", absolute: { x: 0, y: 0 } });
+      ransom(results, "RESULTS", 100, 40, { shuffle: true, seed: 29 });
+      readout(k, results, `${songName} + " \xB7 " + ${artistName} + " \xB7 " + ${diffName}`, "Safety Pin Heart \xB7 The Xerox Kids \xB7 HARD", "Artist 26", "onVoid", 124, 190, { w: 1200, name: "Result track" });
+      const acc = `round((${perfect.n} + ${great.n} * 0.5) / max(1, ${perfect.n} + ${great.n} + ${miss.n}) * 100)`;
+      const sheet = box(k, results, 120, 260, 900, 560, { name: "Score sheet", fill: "xerox", radius: 4, effects: [paperShadow(12)] });
+      k.patch(sheet, { rotation: -1 });
+      const rows = [["Score", `pad(${score.n}, 7)`, "0000000"], ["Accuracy", `${acc} + "%"`, "0%"], ["Max combo", `${maxCombo.n}`, "0"], ["Perfect", `${perfect.n}`, "0"], ["Great", `${great.n}`, "0"], ["Miss", `${miss.n}`, "0"]];
+      rows.forEach(([name, e, rest], i) => {
+        label(k, sheet, name, "Label 26", "onXerox", 48, 40 + i * 84, { name: "Result name" });
+        readout(k, sheet, e, rest, "Stat 52", "onXerox", 400, 28 + i * 84, { w: 450, align: "RIGHT", name: "Result value" });
+        if (i < rows.length - 1) k.rect(sheet, 804, 2, k.tint("void", 0.25), { name: "Rule", absolute: { x: 48, y: 104 + i * 84 } });
+      });
+      tape(results, 90, 250, 160, -14);
+      tape(results, 900, 790, 160, 10);
+      const stamp = box(k, results, 1160, 240, 400, 400, { name: "Grade stamp", fill: "lime", radius: 8, align: "CENTER", justify: "CENTER", stroke: { color: "void", width: 10, align: "INSIDE" }, effects: [paperShadow(14)] });
+      centreIn(readout(k, stamp, `${acc} >= 95 ? "S" : ${acc} >= 80 ? "A" : ${acc} >= 60 ? "B" : "C"`, "S", "Grade 220", "onLime", 20, 0, { w: 360, align: "CENTER", name: "Grade" }), 400);
+      k.patch(stamp, { rotation: -8 });
+      keys(k, stamp, "scaleX", [{ t: 400, v: 3, ease: { kind: "ease", name: "expo-in" } }, { t: 700, v: 1 }]);
+      keys(k, stamp, "scaleY", [{ t: 400, v: 3, ease: { kind: "ease", name: "expo-in" } }, { t: 700, v: 1 }]);
+      keys(k, stamp, "rotation", [{ t: 400, v: -40, ease: { kind: "ease", name: "expo-in" } }, { t: 700, v: -8 }]);
+      keys(k, stamp, "opacity", [{ t: 0, v: 0, ease: { kind: "hold" } }, { t: 400, v: 1 }]);
+      keys(k, sheet, "translateX", [{ t: 700, v: 14, ease: { kind: "ease", name: "elastic-out" } }, { t: 1e3, v: 0 }]);
+      label(k, results, "Grade", "Small 18", "dim", 1160, 660, { w: 400, align: "CENTER", name: "Grade label" });
+      const fc = sticker(results, "Full combo", 1560, 250, { fill: "pink", ink: "onPink", rot: 14, w: 280, h: 90, name: "Full combo" });
+      k.bindExpression(fc, "visible", `${miss.n} == 0`);
+      onBeat(fc, "rotation", 4);
+      const nb = sticker(results, "New high score", 1180, 720, { fill: "violet", ink: "onViolet", rot: -5, w: 380, h: 80, name: "New best" });
+      k.bindExpression(nb, "visible", `${newBest.n} == 1`);
+      throb(nb, 0.08);
+      menu(k, results, [
+        { label: "Play again", actions: [...resetRun, toCountdown] },
+        { label: "Song select", actions: [go(songs, "DISSOLVE", { duration: 400 })] },
+        { label: "Main menu", actions: [go(main, "DISSOLVE", { duration: 400 })] }
+      ], { focus: endFocus, x: 1100, y: 830, width: 720, pitch: 60, itemHeight: 54, style: "Label 26", color: "onVoid", plate: k.tint("violet", 0.8), marker: { color: "lime", size: 18 }, radius: 4, nudge: 8 });
+      k.cues(results, [{ layer: "Score sheet", preset: "rise-in", at: 0 }, { layer: "Full combo", preset: "pop-in", at: 1e3 }, { layer: "New best", preset: "pop-in", at: 1200 }]);
+    }
+    void [];
+    return k.finish();
+  }
+});
+
+export {
+  pulse_riot_rhythm_default
+};