@popcraft/kit 0.26.0 → 0.26.1

package/dist/chunks/chunk-EOEVCQSB.js

@@ -0,0 +1,1136 @@
+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,
+  arc,
+  arcPoints,
+  back,
+  bar,
+  blurFx,
+  box,
+  close,
+  drift,
+  focusColumn,
+  focusRow,
+  gameKit,
+  gameVar,
+  glow,
+  go,
+  keybind,
+  keys,
+  label,
+  menu,
+  onAll,
+  oneShot,
+  overlay,
+  poly,
+  readout,
+  rebindListener,
+  screen,
+  sector,
+  set,
+  slider,
+  spin,
+  toggle,
+  toggleComponent,
+  when
+} from "./chunk-2KS3HQ6F.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/game/neon-apex-racing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var CARS = [
+  {
+    name: "LUMEN 77",
+    kind: "Wedge coup\xE9",
+    blurb: "A folded-paper wedge with a V12 behind your ears. Loves the long straights.",
+    top: 318,
+    grip: 64,
+    acc: 70,
+    body: [[40, 190], [58, 152], [250, 132], [420, 82], [560, 80], [700, 120], [860, 140], [884, 176], [862, 202], [40, 206]],
+    glass: [[432, 94], [556, 92], [650, 124], [402, 128]],
+    wheels: [200, 716],
+    wing: 40
+  },
+  {
+    name: "CORSAIR VX-2",
+    kind: "Grand tourer",
+    blurb: "Long, low and planted. Takes a corner like it signed a contract.",
+    top: 302,
+    grip: 82,
+    acc: 62,
+    body: [[30, 186], [52, 160], [300, 140], [452, 94], [604, 92], [762, 140], [870, 150], [888, 182], [870, 206], [30, 206]],
+    glass: [[462, 104], [598, 102], [722, 138], [442, 140]],
+    wheels: [212, 732],
+    wing: 30
+  },
+  {
+    name: "NOVA TIDE",
+    kind: "Rally hatch",
+    blurb: "Short wheelbase, turbo whistle, launches off the line like a flare.",
+    top: 284,
+    grip: 72,
+    acc: 88,
+    body: [[60, 196], [70, 142], [240, 126], [360, 62], [600, 60], [690, 120], [840, 136], [862, 172], [842, 206], [60, 206]],
+    glass: [[376, 74], [590, 72], [662, 122], [352, 124]],
+    wheels: [224, 704],
+    wing: 60
+  }
+];
+var PAINTS = ["Hot magenta", "Sunset orange", "Laser cyan", "Acid lime", "Pearl chrome"];
+var TRACKS = [
+  {
+    name: "SUNSET MILE",
+    place: "Palmera Coast",
+    km: 4.2,
+    best: 41250,
+    blurb: "Palms, a boardwalk hairpin and a mile-long run into the sun.",
+    pts: [[0.1, 0.8], [0.1, 0.3], [0.25, 0.1], [0.6, 0.1], [0.7, 0.3], [0.9, 0.35], [0.95, 0.7], [0.75, 0.9], [0.3, 0.9]]
+  },
+  {
+    name: "NEON VEIL",
+    place: "Vesper Harbour",
+    km: 3.6,
+    best: 38900,
+    blurb: "Ninety-degree city blocks under the holo-billboards.",
+    pts: [[0.1, 0.1], [0.9, 0.1], [0.9, 0.45], [0.55, 0.45], [0.55, 0.9], [0.1, 0.9]]
+  },
+  {
+    name: "GLASS CANYON",
+    place: "Duneglass Basin",
+    km: 5.1,
+    best: 46700,
+    blurb: "Fast sweepers through a canyon of fused desert glass.",
+    pts: [[0.15, 0.85], [0.05, 0.5], [0.3, 0.15], [0.5, 0.4], [0.7, 0.1], [0.95, 0.3], [0.8, 0.65], [0.9, 0.9], [0.5, 0.75]]
+  }
+];
+var RIVALS = ["VEGA ARDENT", "KAI MOROSINI", "IONA FELL", "RUSK OYELARAN", "DELPHINE CARO", "MAREK SOLTANI", "TOVE HALLORAN"];
+var CREDITS = [
+  ["Game direction", "Sunniva Okonkwo-Reyes"],
+  ["Handling model", "Mattias Brandvold"],
+  ["Art direction", "Luc\xEDa Ferreira-Nakamura"],
+  ["Cars and circuits", "Theo Anand \xB7 Rosalind Park"],
+  ["HUD and interface", "Ilya Marchetti"],
+  ["Music and engine audio", "The Cassette Choir"],
+  ["Engineering", "Petra Lindahl \xB7 Obi Mensah \xB7 Hana Kova\u010D"],
+  ["Quality assurance", "Everyone who lapped Sunset Mile at 2 a.m."],
+  ["Special thanks", "The last arcade on Vesper Pier"]
+];
+var HORIZON = 640;
+var COOL = 2600;
+var DIAL_MAX = 360;
+var neon_apex_racing_default = defineTemplate({
+  id: "game-neon-apex-racing",
+  meta: {
+    name: "NEON APEX \u2014 synthwave arcade racing UI",
+    description: "A playable synthwave arcade racer front end and race HUD: boot log, dusk title with a scrolling grid road, keyboard menus, a garage with live paint and tuning sliders that move the stat bars, track select with minimaps and best times, working settings (km/h or mph, camera shake, key bindings), a 3-2-1-GO countdown, a HUD whose needle glides, tach lights, nitro drains and cools down, position board reorders and damage wrecks you, pause, podium results with a new-record pop, and a DNF screen",
+    category: "game-ui",
+    tags: ["game", "game ui", "hud", "racing", "arcade", "synthwave", "retro", "driving", "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("NEON APEX");
+    k.brand({
+      void: "#0B0418",
+      night: "#12052A",
+      dusk: "#3B0F5E",
+      skyLow: "#8E1C66",
+      ground: "#0E0420",
+      asphalt: "#140828",
+      panel: "#150828",
+      line: "#3F2066",
+      grid: "#FF2FB9",
+      ridge: "#24093F",
+      silhouette: "#060110",
+      sunTop: "#FFD84A",
+      sunLow: "#FF3D8B",
+      neon: "#FF2E97",
+      amber: "#FF9A1F",
+      cyan: "#2DE2FF",
+      chrome: "#F4EEFF",
+      onVoid: "#FFF3FB",
+      dim: "#CDB1EA",
+      onPanel: "#FFF3FB",
+      onAmber: "#1C0B00",
+      onCyan: "#021418",
+      good: "#3DFFA2",
+      bad: "#FF5A74",
+      warn: "#FFC43D",
+      smoke: "#3E2C55",
+      tyre: "#07030E",
+      glass: "#1B0F3A",
+      scrim: "#070211",
+      paint0: "#FF2E97",
+      paint1: "#FF8A1F",
+      paint2: "#2DE2FF",
+      paint3: "#B8FF3C",
+      paint4: "#E9E4F5",
+      primary: "#FF2E97",
+      onPrimary: "#1A0010",
+      accent: "#2DE2FF",
+      onAccent: "#021418"
+    }, { title: "NEON APEX", studio: "Redline Assembly", tagline: "Race the sunset. It never quite sets." });
+    const driver = gameVar(k, "Player", "driver", "STRING", "ZEPHYR");
+    const speed = gameVar(k, "Race", "speed", "FLOAT", 0);
+    const dist = gameVar(k, "Race", "distance", "FLOAT", 0);
+    const laps = gameVar(k, "Race", "laps", "FLOAT", 3);
+    const pos = gameVar(k, "Race", "position", "FLOAT", 6);
+    const racers = gameVar(k, "Race", "racers", "FLOAT", 8);
+    const nitro = gameVar(k, "Race", "nitro", "FLOAT", 100);
+    const nitroAt = gameVar(k, "Race", "nitroAt", "FLOAT", 0);
+    const damage = gameVar(k, "Race", "damage", "FLOAT", 0);
+    const damageLag = gameVar(k, "Race", "damageTrail", "FLOAT", 0);
+    const maxDamage = gameVar(k, "Race", "maxDamage", "FLOAT", 100);
+    const steer = gameVar(k, "Race", "steer", "FLOAT", 0);
+    const brake = gameVar(k, "Race", "brake", "FLOAT", 0);
+    const hitFx = gameVar(k, "Race", "hitFlash", "FLOAT", 0);
+    const boostFx = gameVar(k, "Race", "boostFlash", "FLOAT", 0);
+    const delta = gameVar(k, "Race", "ghostDelta", "FLOAT", 0);
+    const raceStart = gameVar(k, "Race", "raceStart", "FLOAT", 0);
+    const lapStart = gameVar(k, "Race", "lapStart", "FLOAT", 0);
+    const lastLap = gameVar(k, "Race", "lastLap", "FLOAT", 0);
+    const finishTime = gameVar(k, "Race", "finishTime", "FLOAT", 0);
+    const record = gameVar(k, "Race", "newRecord", "FLOAT", 0);
+    const mode = gameVar(k, "Race", "timeTrial", "FLOAT", 0);
+    const track = gameVar(k, "Race", "track", "FLOAT", 0);
+    const best = TRACKS.map((t, i) => gameVar(k, "Records", `best${i}`, "FLOAT", t.best));
+    const car = gameVar(k, "Garage", "car", "FLOAT", 0);
+    const paint = gameVar(k, "Garage", "paint", "FLOAT", 0);
+    const gear = gameVar(k, "Garage", "gearRatio", "FLOAT", 5);
+    const down = gameVar(k, "Garage", "downforce", "FLOAT", 50);
+    const psi = gameVar(k, "Garage", "tyrePressure", "FLOAT", 32);
+    const menuFocus = gameVar(k, "UI", "menuFocus", "FLOAT", 0);
+    const pauseFocus = gameVar(k, "UI", "pauseFocus", "FLOAT", 0);
+    const endFocus = gameVar(k, "UI", "endFocus", "FLOAT", 0);
+    const wreckFocus = gameVar(k, "UI", "wreckFocus", "FLOAT", 0);
+    const setFocus = gameVar(k, "UI", "settingsFocus", "FLOAT", 0);
+    const tuneFocus = gameVar(k, "UI", "tuneFocus", "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 shake = gameVar(k, "Settings", "cameraShake", "FLOAT", 1);
+    const units = gameVar(k, "Settings", "mph", "FLOAT", 0);
+    const keyGas = gameVar(k, "Keys", "accelerate", "STRING", "W");
+    const keyBrake = gameVar(k, "Keys", "brake", "STRING", "S");
+    const keyNitro = gameVar(k, "Keys", "nitro", "STRING", "N");
+    const pick3 = (v, a) => `(${v} == 0 ? ${a[0]} : ${v} == 1 ? ${a[1]} : ${a[2]})`;
+    const TOP = `(${pick3(car.n, CARS.map((c) => c.top))} + (${gear.n} - 5) * 7 - (${down.n} - 50) * 0.35)`;
+    const GRIP = `clamp(${pick3(car.n, CARS.map((c) => c.grip))} + (${down.n} - 50) * 0.45 + (32 - ${psi.n}) * 2.5, 0, 100)`;
+    const ACCEL = `clamp(${pick3(car.n, CARS.map((c) => c.acc))} - (${gear.n} - 5) * 6 + (${psi.n} - 32) * 0.8, 0, 100)`;
+    const ACC = `(22 + ${ACCEL} * 0.35)`;
+    const STEP = `(0.035 + ${speed.n} / 2600)`;
+    const NSTEP = `(0.2 + ${speed.n} / 2600)`;
+    const kmh = (e2) => `(${units.n} == 1 ? round((${e2}) * 0.6214) : round(${e2}))`;
+    const UNIT = `(${units.n} == 1 ? "MPH" : "KM/H")`;
+    const bands = [0, 60, 110, 160, 210, 255];
+    const GEAR = bands.slice(1).reduceRight((acc, b, i) => `${speed.n} < ${b} ? ${i + 1} : (${acc})`, "6");
+    const RPM = `max(0.08, ${bands.slice(1).reduceRight((acc, b, i) => `${speed.n} < ${b} ? (${speed.n} - ${bands[i]}) / ${b - bands[i]} : (${acc})`, `min(1, (${speed.n} - 255) / 110)`)})`;
+    const LAP = `min(${laps.n}, floor(${dist.n}) + 1)`;
+    const U = `(${dist.n} % 1)`;
+    const GAS = `(upper($key) == ${keyGas.n} || $key == "ArrowUp")`;
+    const BRAKE = `(upper($key) == ${keyBrake.n} || $key == "ArrowDown")`;
+    const LEFT = '(upper($key) == "A" || $key == "ArrowLeft")';
+    const RIGHT = '(upper($key) == "D" || $key == "ArrowRight")';
+    const NITRO = `upper($key) == ${keyNitro.n}`;
+    const CAN = `${nitro.n} >= 25 && now() - ${nitroAt.n} >= ${COOL}`;
+    const crosses = (step) => `floor(${dist.n} + ${step}) > floor(${dist.n}) && ${dist.n} + ${step} < ${laps.n}`;
+    const mono = { fontFamily: "JetBrains Mono" };
+    k.textStyle("Boot 22", { size: 22, fontWeight: 500, lineHeight: 34, ...mono });
+    k.textStyle("Studio 28", { size: 28, fontWeight: 800, letterSpacing: 12, lineHeight: 36, textCase: "UPPER" });
+    k.textStyle("Wordmark 170", { size: 170, fontWeight: 900, letterSpacing: -6, lineHeight: 160, fontStyle: "italic", textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Tagline 30", { size: 30, fontWeight: 600, letterSpacing: 1, lineHeight: 40, fontStyle: "italic", textAlign: "CENTER" });
+    k.textStyle("Prompt 24", { size: 24, fontWeight: 700, letterSpacing: 10, lineHeight: 32, textCase: "UPPER", textAlign: "CENTER", ...mono });
+    k.textStyle("Menu 44", { size: 44, fontWeight: 900, letterSpacing: 1, lineHeight: 52, fontStyle: "italic", textCase: "UPPER" });
+    k.textStyle("Hint 20", { size: 20, fontWeight: 500, letterSpacing: 2, lineHeight: 28, ...mono });
+    k.textStyle("Heading 72", { size: 72, fontWeight: 900, letterSpacing: -1, lineHeight: 80, fontStyle: "italic", textCase: "UPPER" });
+    k.textStyle("Label 26", { size: 26, fontWeight: 600, lineHeight: 34 });
+    k.textStyle("Value 26", { size: 26, fontWeight: 700, lineHeight: 34, ...mono });
+    k.textStyle("Cap 22", { size: 22, fontWeight: 700, letterSpacing: 2, lineHeight: 28, textAlign: "CENTER", ...mono });
+    k.textStyle("Small 18", { size: 18, fontWeight: 500, letterSpacing: 2, lineHeight: 24, textCase: "UPPER", ...mono });
+    k.textStyle("Tick 16", { size: 16, fontWeight: 700, lineHeight: 20, textAlign: "CENTER", ...mono });
+    k.textStyle("Body 24", { size: 24, fontWeight: 400, lineHeight: 34 });
+    k.textStyle("Car 40", { size: 40, fontWeight: 900, letterSpacing: 0, lineHeight: 46, fontStyle: "italic", textCase: "UPPER" });
+    k.textStyle("Speed 96", { size: 96, fontWeight: 800, letterSpacing: -4, lineHeight: 96, textAlign: "CENTER", ...mono });
+    k.textStyle("Gear 56", { size: 56, fontWeight: 900, lineHeight: 60, fontStyle: "italic", textAlign: "CENTER" });
+    k.textStyle("HUD 22", { size: 22, fontWeight: 700, letterSpacing: 2, lineHeight: 28, textCase: "UPPER", ...mono });
+    k.textStyle("Board 20", { size: 20, fontWeight: 600, letterSpacing: 1, lineHeight: 26, textCase: "UPPER", ...mono });
+    k.textStyle("Pos 72", { size: 72, fontWeight: 900, letterSpacing: -2, lineHeight: 72, fontStyle: "italic" });
+    k.textStyle("Lap 48", { size: 48, fontWeight: 900, lineHeight: 52, fontStyle: "italic", textAlign: "CENTER" });
+    k.textStyle("Clock 30", { size: 30, fontWeight: 700, lineHeight: 36, textAlign: "CENTER", ...mono });
+    k.textStyle("Delta 34", { size: 34, fontWeight: 800, lineHeight: 40, textAlign: "CENTER", ...mono });
+    k.textStyle("Count 320", { size: 320, fontWeight: 900, letterSpacing: -10, lineHeight: 300, fontStyle: "italic", textAlign: "CENTER" });
+    k.textStyle("Alert 30", { size: 30, fontWeight: 800, letterSpacing: 6, lineHeight: 38, textCase: "UPPER", textAlign: "CENTER", ...mono });
+    k.textStyle("Stat 64", { size: 64, fontWeight: 800, lineHeight: 72, ...mono });
+    k.textStyle("Record 52", { size: 52, fontWeight: 900, letterSpacing: 2, lineHeight: 60, fontStyle: "italic", textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Place 200", { size: 200, fontWeight: 900, letterSpacing: -8, lineHeight: 190, fontStyle: "italic", textAlign: "CENTER" });
+    k.textStyle("Credit role 20", { size: 20, fontWeight: 600, letterSpacing: 4, lineHeight: 28, textCase: "UPPER", textAlign: "CENTER", ...mono });
+    k.textStyle("Credit name 36", { size: 36, fontWeight: 800, lineHeight: 44, fontStyle: "italic", textAlign: "CENTER" });
+    const e = (name) => ({ kind: "ease", name });
+    k.variantSet(
+      "Neon 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 slanted neon button: hover lights it magenta, pressing flashes it cyan." },
+      (state, id) => {
+        k.propText(id, "Label", { style: "Hint 20", color: state === "Idle" ? "onPanel" : state === "Hover" ? "onPrimary" : "onCyan", autoWidth: true });
+      },
+      (state) => ({ fill: state === "Idle" ? k.tint("panel", 0.92) : state === "Hover" ? "primary" : "cyan", stroke: { color: state === "Idle" ? "neon" : "chrome", width: 2, align: "INSIDE" }, effects: state === "Idle" ? [] : [glow(k, "neon", 22, 0.8)] })
+    );
+    k.changeTo("Neon button/Idle", "ON_HOVER", "Neon button/Hover", 120);
+    k.changeTo("Neon button/Hover", "ON_PRESS", "Neon button/Pressed", 60);
+    toggleComponent(k, { track: "line", on: "primary", knob: "chrome", stateStyle: "Small 18", ink: "onVoid" });
+    k.variantSet("Impact", "State", ["Idle", "Shake", "Flash"], { width: W, height: H, description: "The wall hit: Shake jolts the edges and flashes red, Flash only flashes (camera shake off). Change to it on every hit." }, (state, id) => {
+      const f = k.rect(id, W, H, [k.gradient({ from: "bad", to: "bad", 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: "Red flash", absolute: { x: 0, y: 0 }, opacity: 0 });
+      const top = k.rect(id, W, 26, "silhouette", { name: "Jolt bar top", absolute: { x: 0, y: -26 } });
+      const bot = k.rect(id, W, 26, "silhouette", { name: "Jolt bar bottom", absolute: { x: 0, y: H } });
+      const shard = poly(k, id, [[1180, 380], [1320, 300], [1260, 420], [1420, 470], [1250, 470]], "chrome", { name: "Glass shard", opacity: 0 });
+      if (state === "Idle") return;
+      keys(k, f, "opacity", [{ t: 0, v: 1, ease: { kind: "hold" } }, { t: 400, v: 1, ease: e("cubic-in") }, { t: 1100, v: 0 }]);
+      keys(k, shard, "opacity", [{ t: 0, v: 0.8, ease: e("cubic-out") }, { t: 400, v: 0 }]);
+      if (state === "Shake") {
+        keys(k, top, "translateY", [{ t: 0, v: 26, ease: e("cubic-out") }, { t: 80, v: 10 }, { t: 160, v: 22 }, { t: 360, v: 0 }]);
+        keys(k, bot, "translateY", [{ t: 0, v: -26, ease: e("cubic-out") }, { t: 80, v: -8 }, { t: 160, v: -20 }, { t: 360, v: 0 }]);
+        keys(k, shard, "translateX", [{ t: 0, v: -30 }, { t: 60, v: 24 }, { t: 120, v: -16 }, { t: 180, v: 10 }, { t: 400, v: 0 }]);
+      }
+    }, (s) => s === "Idle" ? {} : { timeline: { duration: 1150 } });
+    oneShot(k, "Boost", { width: W, height: H, state: "Fire", duration: 900, description: "Nitro fires: edge streaks burst toward the vanishing point, a cyan wash and exhaust flames." }, (state, id) => {
+      const wash = k.rect(id, W, H, [k.gradient({ from: "cyan", to: "cyan", kind: "RADIAL", fromOpacity: 0, toOpacity: 0.5, handles: [{ x: 0.5, y: 0.55 }, { x: 1, y: 0.55 }, { x: 0.5, y: 1.1 }] })], { name: "Boost wash", absolute: { x: 0, y: 0 }, opacity: 0 });
+      const flames = box(k, id, 820, 850, 280, 90, { name: "Exhaust flames" });
+      const fl = poly(k, flames, [[20, 0], [60, 0], [48, 70], [40, 90], [32, 70]], "cyan", { name: "Flame left", opacity: 0, effects: [glow(k, "cyan", 20)] });
+      const fr = poly(k, flames, [[220, 0], [260, 0], [248, 70], [240, 90], [232, 70]], "cyan", { name: "Flame right", opacity: 0, effects: [glow(k, "cyan", 20)] });
+      const streaks = [];
+      for (let i = 0; i < 10; i++) {
+        const a = i / 10 * Math.PI * 2 + 0.2;
+        const r0 = 700, r1 = 1100, cx = 960, cy = HORIZON;
+        const p0 = [cx + Math.cos(a) * r0, cy + Math.sin(a) * r0 * 0.6], p1 = [cx + Math.cos(a) * r1, cy + Math.sin(a) * r1 * 0.6];
+        const n = [-Math.sin(a) * 3, Math.cos(a) * 3];
+        streaks.push(poly(k, id, [[p0[0] + n[0], p0[1] + n[1]], [p1[0] + n[0] * 3, p1[1] + n[1] * 3], [p1[0] - n[0] * 3, p1[1] - n[1] * 3], [p0[0] - n[0], p0[1] - n[1]]], "chrome", { name: "Burst streak", opacity: 0 }));
+      }
+      if (state !== "Fire") return;
+      keys(k, wash, "opacity", [{ t: 0, v: 1, ease: { kind: "hold" } }, { t: 200, v: 1, ease: e("cubic-out") }, { t: 880, v: 0 }]);
+      for (const f of [fl, fr]) {
+        keys(k, f, "opacity", [{ t: 0, v: 1 }, { t: 100, v: 0.6 }, { t: 200, v: 1 }, { t: 320, v: 0.7 }, { t: 700, v: 1, ease: e("cubic-in") }, { t: 880, v: 0 }]);
+        keys(k, f, "scaleY", [{ t: 0, v: 0.6, ease: e("back-out") }, { t: 200, v: 1.3 }, { t: 880, v: 0.8 }]);
+      }
+      streaks.forEach((s, i) => {
+        const a = i / 10 * Math.PI * 2 + 0.2;
+        keys(k, s, "opacity", [{ t: 0, v: 0.9, ease: e("cubic-in") }, { t: 700, v: 0 }]);
+        keys(k, s, "translateX", [{ t: 0, v: 0, ease: e("cubic-in") }, { t: 700, v: Math.cos(a) * 260 }]);
+        keys(k, s, "translateY", [{ t: 0, v: 0, ease: e("cubic-in") }, { t: 700, v: Math.sin(a) * 160 }]);
+      });
+    });
+    oneShot(k, "Nitro ring", { width: 72, height: 72, state: "Charge", duration: COOL, description: "Nitro cooldown: the ring sweeps round over the recharge time, then goes dark." }, (state, id) => {
+      const ring = arc(k, id, 36, 36, 32, -Math.PI / 2, Math.PI * 1.5 - 0.01, "cyan", 5, { name: "Sweep", opacity: 0, effects: [glow(k, "cyan", 12)] });
+      const rb = k.node(ring);
+      k.patch(ring, { anchorX: (36 - rb.x) / rb.width, anchorY: (36 - rb.y) / rb.height });
+      if (state === "Charge") {
+        keys(k, ring, "opacity", [{ t: 0, v: 1, ease: { kind: "hold" } }, { t: COOL - 60, v: 1, ease: { kind: "linear" } }, { t: COOL, v: 0 }]);
+        keys(k, ring, "scaleX", [{ t: 0, v: 0.2, ease: e("cubic-in-out") }, { t: COOL - 60, v: 1 }]);
+        keys(k, ring, "scaleY", [{ t: 0, v: 0.2, ease: e("cubic-in-out") }, { t: COOL - 60, v: 1 }]);
+        keys(k, ring, "rotation", [{ t: 0, v: 0, ease: { kind: "linear" } }, { t: COOL - 60, v: -720 }]);
+      }
+    });
+    oneShot(k, "Lap banner", { width: 720, height: 96, state: "New", duration: 1500, description: "A lap completes: the banner slashes in, holds and leaves." }, (state, id) => {
+      if (state !== "New") return;
+      const plate = box(k, id, 0, 0, 720, 96, { name: "Banner plate", fill: "amber", radius: 4, align: "CENTER", justify: "CENTER", effects: [glow(k, "amber", 30, 0.7)] });
+      k.text(plate, "LAP COMPLETE  \xB7  KEEP IT LIT", { style: "Alert 30", color: "onAmber", autoWidth: true, name: "Banner words" });
+      keys(k, plate, "translateX", [{ t: 0, v: -900, ease: e("expo-out") }, { t: 320, v: 0, ease: { kind: "hold" } }, { t: 1100, v: 0, ease: e("cubic-in") }, { t: 1480, v: 900 }]);
+      keys(k, plate, "opacity", [{ t: 0, v: 1, ease: { kind: "hold" } }, { t: 1300, v: 1, ease: { kind: "linear" } }, { t: 1480, v: 0 }]);
+    });
+    oneShot(k, "Overtake pop", { width: 360, height: 60, state: "Show", duration: 1100, description: "You pass a rival: the chip pops, holds and floats up." }, (state, id) => {
+      if (state !== "Show") return;
+      const plate = box(k, id, 0, 0, 360, 60, { name: "Pass plate", fill: "good", radius: 30, align: "CENTER", justify: "CENTER" });
+      k.text(plate, "+1 POSITION", { style: "Alert 30", color: "onCyan", autoWidth: true, name: "Pass words" });
+      keys(k, plate, "opacity", [{ t: 0, v: 0, ease: e("back-out") }, { t: 160, v: 1, ease: { kind: "hold" } }, { t: 800, v: 1, ease: e("cubic-in") }, { t: 1080, v: 0 }]);
+      keys(k, plate, "scaleX", [{ t: 0, v: 0.5, ease: e("back-out") }, { t: 260, v: 1 }]);
+      keys(k, plate, "scaleY", [{ t: 0, v: 0.5, ease: e("back-out") }, { t: 260, v: 1 }]);
+      keys(k, plate, "translateY", [{ t: 700, v: 0, ease: e("cubic-in") }, { t: 1080, v: -36 }]);
+    });
+    const boot = screen(k, "Boot", { ground: "void", first: true, duration: 3800 });
+    const title = screen(k, "Title", { ground: "void" });
+    const main = screen(k, "Main menu", { ground: "void" });
+    const garage = screen(k, "Garage", { ground: "void" });
+    const tuning = screen(k, "Tuning", { ground: "void" });
+    const tracks = screen(k, "Track select", { ground: "void" });
+    const settings = screen(k, "Settings", { ground: "void" });
+    const credits = screen(k, "Credits", { ground: "void", duration: 13e3 });
+    const countdown = screen(k, "Countdown", { ground: "void", duration: 4200 });
+    const hud = screen(k, "Race HUD", { ground: "void", duration: 18e4 });
+    const pause = screen(k, "Pause", { ground: "void", fills: k.tint("scrim", 0.8) });
+    const results = screen(k, "Race results", { ground: "void" });
+    const wrecked = screen(k, "Wrecked", { ground: "void" });
+    k.flowStart(boot, "Play NEON APEX");
+    const resetRace = [
+      set(speed.id, { value: 0 }),
+      set(dist.id, { value: 0 }),
+      set(pos.id, { value: 6 }),
+      set(nitro.id, { value: 100 }),
+      set(nitroAt.id, { value: 0 }),
+      set(damage.id, { value: 0 }),
+      set(damageLag.id, { value: 0 }),
+      set(steer.id, { value: 0 }),
+      set(brake.id, { value: 0 }),
+      set(delta.id, { value: 0 }),
+      set(lastLap.id, { value: 0 }),
+      set(record.id, { value: 0 })
+    ];
+    const toCountdown = go(countdown, "ZOOM_THROUGH", { duration: 500 });
+    const startClock = [set(raceStart.id, { expression: "now()" }), set(lapStart.id, { expression: "now()" })];
+    const stars = [[80, 60], [210, 150], [330, 40], [420, 220], [140, 300], [520, 110], [1450, 70], [1560, 190], [1700, 50], [1820, 160], [1640, 300], [1380, 240], [1880, 330], [60, 420], [610, 30], [1300, 30]];
+    const dusk = (parent, o = {}) => {
+      const g = box(k, parent, 0, 0, W, H, { name: "Dusk" });
+      k.rect(g, W, 380, [k.gradient({ from: "night", to: "dusk", angle: 90 })], { name: "Upper sky", absolute: { x: 0, y: 0 } });
+      k.rect(g, W, HORIZON - 380, [k.gradient({ from: "dusk", to: "skyLow", angle: 90 })], { name: "Lower sky", absolute: { x: 0, y: 380 } });
+      stars.forEach(([x2, y], i) => {
+        const s = k.ellipse(g, i % 3 === 0 ? 5 : 3, "chrome", { name: "Star", absolute: { x: x2, y }, opacity: 0.8 });
+        drift(k, s, "opacity", 0.35, 0.3 + i % 5 * 0.17, i * 0.13);
+      });
+      const r = o.sunR ?? 250, sx = (o.sunX ?? 960) - r;
+      const sun = box(k, g, sx, HORIZON - r * 1.25, r * 2, r * 2, { name: "Sun", radius: r, clip: true, fill: [k.gradient({ from: "sunTop", to: "sunLow", angle: 90 })], effects: [glow(k, "sunLow", 80, 0.6)] });
+      for (let i = 0; i < 7; i++) k.rect(sun, r * 2, 4 + i * 3, "skyLow", { name: "Sun stripe", absolute: { x: 0, y: r * 0.95 + i * (r * 0.16) } });
+      if (o.sink) k.bindExpression(sun, "translateY", o.sink);
+      const ridge = [[0, HORIZON], [0, 560], [120, 520], [230, 575], [360, 470], [470, 560], [600, 510], [700, HORIZON], [1220, HORIZON], [1320, 540], [1440, 470], [1560, 555], [1680, 500], [1800, 560], [W, 520], [W, HORIZON]];
+      poly(k, g, ridge, "ridge", { name: "Mountains" });
+      poly(k, g, ridge.slice(1, -1), "grid", { name: "Mountain line", stroke: 2, opacity: 0.7, effects: [glow(k, "grid", 10, 0.8)] });
+      const sky = [[700, HORIZON]];
+      let x = 700;
+      const hs = [40, 72, 58, 110, 64, 88, 150, 70, 96, 60, 124, 80, 52, 90, 66];
+      hs.forEach((h, i) => {
+        const w = 26 + i * 17 % 22;
+        sky.push([x, HORIZON - h], [x + w, HORIZON - h]);
+        x += w;
+      });
+      sky.push([Math.min(x, 1220), HORIZON]);
+      poly(k, g, sky, "silhouette", { name: "Skyline" });
+      for (let i = 0; i < 14; i++) {
+        const w = k.rect(g, 4, 6, i % 3 ? "amber" : "cyan", { name: "Window", absolute: { x: 716 + i * 34, y: HORIZON - 30 - i * 23 % 60 }, opacity: 0.85 });
+        drift(k, w, "opacity", 0.3, 0.2 + i % 4 * 0.21, i * 0.19);
+      }
+      k.rect(g, W, H - HORIZON, "ground", { name: "Ground", absolute: { x: 0, y: HORIZON } });
+      k.rect(g, W, 90, [k.gradient({ from: "grid", to: "ground", angle: 90, fromOpacity: 0.55, toOpacity: 0 })], { name: "Horizon glow", absolute: { x: 0, y: HORIZON } });
+      const floor = box(k, g, 0, HORIZON, W, H - HORIZON, { name: "Grid floor", clip: true });
+      for (let bx = -2400; bx <= W + 2400; bx += 300) poly(k, floor, [[960, 0], [bx, H - HORIZON]], "grid", { name: "Grid ray", stroke: 2, opacity: 0.75, effects: [glow(k, "grid", 8, 0.7)] });
+      const n = o.lines ?? 7, period = 2e3;
+      for (let i = 0; i < n; i++) {
+        const l = k.rect(floor, W, 3, "grid", { name: "Grid line", absolute: { x: 0, y: 0 }, effects: [glow(k, "grid", 8, 0.7)] });
+        keys(k, l, "translateY", [{ t: 0, v: 0, ease: e("cubic-in") }, { t: period, v: H - HORIZON }]);
+        keys(k, l, "opacity", [{ t: 0, v: 0.2, ease: e("quad-in") }, { t: period, v: 1 }]);
+        k.behave(l, "translateY", [{ kind: "loop", mode: "cycle" }]);
+        k.behave(l, "opacity", [{ kind: "loop", mode: "cycle" }]);
+        if (i) k.delay(l, i * period / n);
+      }
+      if (o.road) {
+        const road = box(k, g, 0, HORIZON, W, H - HORIZON, { name: "Road", clip: true });
+        poly(k, road, [[944, 0], [976, 0], [1700, H - HORIZON], [220, H - HORIZON]], "asphalt", { name: "Asphalt" });
+        poly(k, road, [[944, 0], [220, H - HORIZON]], "cyan", { name: "Road edge", stroke: 5, effects: [glow(k, "cyan", 16)] });
+        poly(k, road, [[976, 0], [1700, H - HORIZON]], "cyan", { name: "Road edge", stroke: 5, effects: [glow(k, "cyan", 16)] });
+        for (let i = 0; i < 6; i++) {
+          const d = k.rect(road, 8, 30, "chrome", { name: "Lane dash", absolute: { x: 956, y: 0 } });
+          k.patch(d, { anchorX: 0.5, anchorY: 0 });
+          keys(k, d, "translateY", [{ t: 0, v: 0, ease: e("cubic-in") }, { t: 1500, v: H - HORIZON }]);
+          keys(k, d, "scaleX", [{ t: 0, v: 0.2, ease: e("cubic-in") }, { t: 1500, v: 3 }]);
+          keys(k, d, "scaleY", [{ t: 0, v: 0.2, ease: e("cubic-in") }, { t: 1500, v: 4 }]);
+          for (const p of ["translateY", "scaleX", "scaleY"]) k.behave(d, p, [{ kind: "loop", mode: "cycle" }]);
+          if (i) k.delay(d, i * 250);
+        }
+      }
+      if (o.palms !== false) {
+        palm(g, 150, H + 10, 620, 0.5, 0);
+        palm(g, 420, H + 30, 420, 0.8, 0.3);
+        palm(g, 1770, H + 10, 640, -0.55, 0.6);
+        palm(g, 1500, H + 40, 400, -0.8, 0.1);
+      }
+      return { g, sun };
+    };
+    function palm(parent, bx, by, h, lean, phase) {
+      const w = h * 1.4;
+      const g = box(k, parent, bx - w / 2, by - h, w, h, { name: "Palm" });
+      const base = w / 2;
+      const left = [], right = [];
+      for (let i = 0; i <= 8; i++) {
+        const t = i / 8, x = base + lean * h * 0.3 * t * t, y = h - t * h * 0.86, hw = h * (0.03 - 0.016 * t);
+        left.push([x - hw, y]);
+        right.push([x + hw, y]);
+      }
+      poly(k, g, [...left, ...right.reverse()], "silhouette", { name: "Trunk" });
+      const top = [base + lean * h * 0.3, h * 0.14];
+      for (const deg of [-175, -145, -118, -92, -64, -36, -8, 160, 20]) {
+        const a = deg * Math.PI / 180, L = h * (0.34 + (deg + 200) % 7 * 0.012);
+        const dir = [Math.cos(a), Math.sin(a)], nrm = [-dir[1], dir[0]];
+        const tip = [top[0] + dir[0] * L, top[1] + dir[1] * L + L * 0.45];
+        const mid = [top[0] + dir[0] * L * 0.55, top[1] + dir[1] * L * 0.55 - L * 0.04];
+        const wd = L * 0.09;
+        poly(k, g, [top, [mid[0] + nrm[0] * wd, mid[1] + nrm[1] * wd], tip, [mid[0] - nrm[0] * wd, mid[1] - nrm[1] * wd]], "silhouette", { name: "Frond" });
+      }
+      k.patch(g, { anchorX: 0.5, anchorY: 1 });
+      drift(k, g, "rotation", 1.2, 0.18, phase);
+    }
+    const carProfile = (parent, x, y, s, o = {}) => {
+      const S = (p) => p.map(([a, b]) => [a * s, b * s]);
+      const g = box(k, parent, x, y, 920 * s, 270 * s, { name: "Car" });
+      k.rect(g, 840 * s, 14 * s, "cyan", { name: "Underglow", radius: 7 * s, absolute: { x: 40 * s, y: 236 * s }, opacity: 0.8, effects: [glow(k, "cyan", 40 * s, 0.9)] });
+      CARS.forEach((c, i) => {
+        const cg = box(k, g, 0, 0, 920 * s, 270 * s, { name: c.name });
+        k.bindExpression(cg, "visible", `${car.n} == ${i}`);
+        const bodyBox = box(k, cg, 0, 0, 920 * s, 250 * s, { name: "Body" });
+        if (o.tuned) k.bindExpression(bodyBox, "translateY", `(32 - ${psi.n}) * ${1.4 * s}`);
+        const wing = box(k, bodyBox, c.wing * s, 70 * s, 170 * s, 90 * s, { name: "Rear wing" });
+        k.rect(wing, 150 * s, 12 * s, "silhouette", { name: "Wing plate", radius: 4 * s, absolute: { x: 0, y: 0 }, stroke: { color: "neon", width: 2 } });
+        k.rect(wing, 8 * s, 90 * s, "silhouette", { name: "Wing post", absolute: { x: 30 * s, y: 8 * s } });
+        k.rect(wing, 8 * s, 90 * s, "silhouette", { name: "Wing post", absolute: { x: 110 * s, y: 8 * s } });
+        if (o.tuned) k.bindExpression(wing, "translateY", `(50 - ${down.n}) * ${1.1 * s}`);
+        PAINTS.forEach((_, j) => {
+          const b = poly(k, bodyBox, S(c.body), `paint${j}`, { name: "Paint", effects: [glow(k, `paint${j}`, 24 * s, 0.35)] });
+          k.bindExpression(b, "visible", `${paint.n} == ${j}`);
+        });
+        poly(k, bodyBox, S(c.body), "chrome", { name: "Body line", stroke: 2, closed: true, opacity: 0.7 });
+        poly(k, bodyBox, S(c.glass), "glass", { name: "Glass", effects: [glow(k, "cyan", 10 * s, 0.4)] });
+        poly(k, bodyBox, S([[c.glass[0][0] + 20, c.glass[0][1] + 8], [c.glass[0][0] + 60, c.glass[0][1] + 8], [c.glass[3][0] + 70, c.glass[3][1] - 6], [c.glass[3][0] + 30, c.glass[3][1] - 6]]), "chrome", { name: "Glass glint", opacity: 0.5 });
+        poly(k, bodyBox, S([[c.body[1][0] + 10, 172], [c.body[c.body.length - 3][0] - 30, 168], [c.body[c.body.length - 3][0] - 30, 174], [c.body[1][0] + 10, 178]]), "chrome", { name: "Side stripe", opacity: 0.85 });
+        k.rect(bodyBox, 26 * s, 10 * s, "neon", { name: "Tail light", absolute: { x: (c.body[1][0] - 4) * s, y: (c.body[1][1] + 6) * s }, effects: [glow(k, "neon", 16 * s)] });
+        k.rect(bodyBox, 30 * s, 8 * s, "warn", { name: "Headlight", absolute: { x: (c.body[6][0] - 34) * s, y: (c.body[6][1] + 4) * s }, effects: [glow(k, "warn", 18 * s)] });
+        for (const wx of c.wheels) {
+          const wr = 50 * s;
+          k.ellipse(cg, wr * 2, "tyre", { name: "Tyre", absolute: { x: wx * s - wr, y: 206 * s - wr }, stroke: { color: "line", width: 3 } });
+          k.ellipse(cg, wr * 1.2, "silhouette", { name: "Rim", absolute: { x: wx * s - wr * 0.6, y: 206 * s - wr * 0.6 }, stroke: { color: "chrome", width: 3 } });
+          const sp = poly(k, cg, [[wx * s - wr * 0.55, 206 * s - 3 * s], [wx * s + wr * 0.55, 206 * s - 3 * s], [wx * s + wr * 0.55, 206 * s + 3 * s], [wx * s - wr * 0.55, 206 * s + 3 * s]], "chrome", { name: "Spoke" });
+          const sp2 = poly(k, cg, [[wx * s - 3 * s, 206 * s - wr * 0.55], [wx * s + 3 * s, 206 * s - wr * 0.55], [wx * s + 3 * s, 206 * s + wr * 0.55], [wx * s - 3 * s, 206 * s + wr * 0.55]], "chrome", { name: "Spoke" });
+          if (o.spin) for (const p of [sp, sp2]) spin(k, p, 540);
+        }
+      });
+      return g;
+    };
+    const trackPts = (i, w, h) => TRACKS[i].pts.map(([a, b]) => [a * w, b * h]);
+    const along = (pts, u, axis) => {
+      const n = pts.length;
+      let s = `${pts[0][axis].toFixed(1)}`;
+      for (let i = 0; i < n; i++) {
+        const d = pts[(i + 1) % n][axis] - pts[i][axis];
+        if (Math.abs(d) > 0.01) s += ` + ${d.toFixed(1)} * clamp(${u} * ${n} - ${i}, 0, 1)`;
+      }
+      return s;
+    };
+    const trackLine = (parent, i, x, y, w, h, width = 4) => {
+      const g = box(k, parent, x, y, w, h, { name: `${TRACKS[i].name} map` });
+      poly(k, g, trackPts(i, w, h), "cyan", { name: "Circuit", stroke: width, closed: true, effects: [glow(k, "cyan", 12, 0.8)] });
+      const [sx, sy] = trackPts(i, w, h)[0];
+      k.rect(g, 18, 6, "chrome", { name: "Start line", absolute: { x: sx - 9, y: sy - 3 } });
+      return g;
+    };
+    const hintBar = (id, text) => {
+      const b = box(k, id, 0, H - 60, W, 60, { name: "Hint bar", fill: k.tint("scrim", 0.9), 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 shade = (id, a = 0.72) => k.rect(id, W, H, k.tint("scrim", a), { name: "Shade", absolute: { x: 0, y: 0 } });
+    {
+      k.rect(boot, W, H, [k.gradient({ from: "night", to: "void", kind: "RADIAL", handles: [{ x: 0.5, y: 0.4 }, { x: 1.1, y: 0.4 }, { x: 0.5, y: 1.2 }] })], { name: "Glow", absolute: { x: 0, y: 0 } });
+      k.logo(boot, 128, 128, { absolute: { x: 896, y: 250 } });
+      label(k, boot, "{{brand.studio}}", "Studio 28", "onVoid", 0, 410, { w: W, align: "CENTER", name: "Studio" });
+      label(k, boot, "presents", "Small 18", "dim", 0, 456, { w: W, align: "CENTER", name: "Presents" });
+      const log = box(k, boot, 560, 540, 800, 200, { name: "Boot log", gap: 2 });
+      const lines = ["> warming synth oscillators ....... OK", "> raising the grid horizon ........ OK", "> fuelling 3 cars, 3 circuits ..... OK", "> driver profile ....................... ZEPHYR", "> sunset locked at 18:42 ............ OK"];
+      lines.forEach((t) => k.text(log, t, { style: "Boot 22", color: "cyan", name: "Log line" }));
+      const tape = box(k, boot, 560, 790, 800, 10, { name: "Tape bar", fill: "line", radius: 5, clip: true });
+      const fill = k.rect(tape, 800, 10, [k.gradient({ from: "neon", to: "amber", angle: 0 })], { name: "Tape fill", radius: 5, absolute: { x: 0, y: 0 } });
+      keys(k, fill, "width", [{ t: 200, v: 10, ease: e("cubic-in-out") }, { t: 3200, v: 800 }]);
+      k.cues(boot, [
+        { layer: "{{brand.logo}}", preset: "scale-in", at: 0 },
+        { layer: "Studio", preset: "wipe-in", at: 300 },
+        { layer: "Presents", preset: "fade-in", at: 600 },
+        { layer: "Log line", preset: "typewriter", at: 800, params: { duration: 420 }, stagger: { delay: 480 } }
+      ]);
+      k.link(boot, title, "DISSOLVE", { trigger: "AFTER_TIMEOUT", delay: 3600, duration: 700 });
+      k.link(boot, title, "DISSOLVE", { key: "*", duration: 400 });
+      k.link(boot, title, "DISSOLVE", { duration: 400 });
+    }
+    {
+      dusk(title, { road: true });
+      const lock = k.stack(title, { name: "Title lockup", width: 1600, gap: 18, align: "CENTER", absolute: { x: 160, y: 60 } });
+      const glowCopy = k.text(lock, "{{brand.title}}", { style: "Wordmark 170", color: "neon", width: 1600, align: "CENTER", name: "Wordmark glow", absolute: { x: 0, y: 0 }, effects: [blurFx(22)] });
+      const extrude = k.text(lock, "{{brand.title}}", { style: "Wordmark 170", color: "amber", width: 1600, align: "CENTER", name: "Wordmark extrude", absolute: { x: 6, y: 10 } });
+      k.text(lock, "{{brand.title}}", { style: "Wordmark 170", color: "chrome", width: 1600, align: "CENTER", name: "Wordmark", effects: [glow(k, "neon", 26, 0.9)] });
+      k.text(lock, "{{brand.tagline}}", { style: "Tagline 30", color: "onVoid", width: 1200, align: "CENTER", name: "Tagline" });
+      drift(k, glowCopy, "opacity", 0.25, 0.5);
+      k.behave(extrude, "translateX", [{ kind: "noise", amp: 3, freq: 2, seed: 11 }]);
+      const plate = box(k, title, 660, 930, 600, 56, { name: "Prompt plate", fill: k.tint("scrim", 0.8), radius: 28, align: "CENTER", justify: "CENTER", stroke: { color: "neon", width: 2 } });
+      const prompt = k.text(plate, "Press any key", { style: "Prompt 24", color: "onVoid", autoWidth: true, name: "Prompt" });
+      drift(k, prompt, "opacity", 0.3, 0.8);
+      label(k, title, "\xA9 2026 {{brand.studio}}  \xB7  v1.0.8 arcade", "Small 18", "dim", 1360, 1020, { w: 520, align: "RIGHT", name: "Legal" });
+      k.cues(title, [{ layer: "Title lockup", preset: "drop-in", at: 0 }, { layer: "Prompt plate", preset: "pop-in", at: 900 }]);
+      k.link(title, main, "DISSOLVE", { key: "*", duration: 350 });
+      k.link(title, main, "DISSOLVE", { duration: 350 });
+    }
+    {
+      dusk(main, { palms: true, sunX: 1400, sunR: 200 });
+      k.rect(main, 800, H, k.tint("scrim", 0.9), { name: "Menu slab", absolute: { x: 0, y: 0 } });
+      k.rect(main, 420, H, [k.gradient({ from: "scrim", to: "scrim", angle: 0, fromOpacity: 0.9, toOpacity: 0 })], { name: "Menu slab fade", absolute: { x: 800, y: 0 } });
+      label(k, main, "{{brand.title}}", "Heading 72", "chrome", 110, 90, { w: 820, name: "Wordmark", effects: [glow(k, "neon", 20, 0.8)] });
+      k.rect(main, 160, 6, [k.gradient({ from: "neon", to: "amber", angle: 0 })], { name: "Wordmark rule", absolute: { x: 114, y: 186 } });
+      menu(k, main, [
+        { label: "Race", hint: "Grand prix \xB7 8 cars", actions: [set(mode.id, { value: 0 }), go(tracks, "PUSH_FROM_RIGHT", { duration: 350 })] },
+        { label: "Garage", hint: "Paint and tune", actions: [go(garage, "PUSH_FROM_RIGHT", { duration: 350 })] },
+        { label: "Time trial", hint: "You and your ghost", actions: [set(mode.id, { value: 1 }), go(tracks, "PUSH_FROM_RIGHT", { duration: 350 })] },
+        { label: "Settings", actions: [go(settings, "PUSH_FROM_RIGHT", { duration: 350 })] },
+        { label: "Credits", actions: [go(credits, "DISSOLVE", { duration: 400 })] },
+        { label: "Quit", actions: [go(title, "DISSOLVE", { duration: 400 })] }
+      ], { focus: menuFocus, x: 90, y: 260, width: 860, pitch: 92, style: "Menu 44", color: "onVoid", plate: [k.gradient({ from: "neon", to: "neon", angle: 0, fromOpacity: 0.6, toOpacity: 0 })], marker: { color: "amber" }, hintStyle: "Hint 20" });
+      const show = box(k, main, 1060, 560, 800, 360, { name: "Showroom" });
+      k.ellipse(show, 760, [k.gradient({ from: "neon", to: "neon", kind: "RADIAL", fromOpacity: 0.5, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Plinth glow", absolute: { x: 20, y: 60 } });
+      const c = carProfile(show, 60, 70, 0.74, { spin: true });
+      drift(k, c, "translateY", 4, 0.6);
+      const card = box(k, main, 1100, 300, 720, 190, { name: "Driver card", fill: k.tint("scrim", 0.88), radius: 6, stroke: { color: "line", width: 2 }, padding: 28, gap: 6 });
+      k.text(card, "Driver", { style: "Small 18", color: "cyan", name: "Driver label" });
+      readout(k, card, driver.n, "ZEPHYR", "Car 40", "onPanel", 28, 54, { w: 660, name: "Driver name" });
+      readout(k, card, `"PB  " + clock(${best[0].n}) + "  SUNSET MILE"`, "PB  0:41.25  SUNSET MILE", "Small 18", "amber", 28, 146, { w: 660, name: "Personal best" });
+      readout(k, card, `${pick3(car.n, CARS.map((c2) => `"${c2.name}"`))} + "  \xB7  " + (${PAINTS.reduceRight((acc, p, i) => `${paint.n} == ${i} ? "${p.toUpperCase()}" : ${acc}`, '""')})`, `${CARS[0].name}  \xB7  ${PAINTS[0].toUpperCase()}`, "Hint 20", "dim", 28, 110, { w: 660, name: "Car line" });
+      const tick = box(k, main, 0, 1e3, 1e3, 40, { name: "Ticker", clip: true });
+      const words = label(k, tick, "APEX FM 88.4  \xB7  Tonight on Sunset Mile: clear skies, warm tarmac  \xB7  Vega Ardent sets a 0:39.8 on Neon Veil  \xB7  Glass Canyon reopens after the sandstorm  \xB7  ", "Small 18", "dim", 0, 8, { name: "Ticker words" });
+      k.behave(words, "translateX", [{ kind: "spin", rate: -70 }, { kind: "mod", period: 1500, offset: -1500 }]);
+      label(k, main, "\u2191 \u2193  SELECT     ENTER  CONFIRM", "Hint 20", "dim", 110, 940, { name: "Menu hints" });
+      k.cues(main, [{ layer: "Menu item", preset: "slide-in", at: 0, params: { direction: "left" }, stagger: { delay: 70 } }, { layer: "Driver card", preset: "rise-in", at: 200 }, { layer: "Showroom", preset: "fade-in", at: 300 }]);
+    }
+    const showroom = (id) => {
+      k.rect(id, W, H, [k.gradient({ from: "night", to: "void", angle: 90 })], { name: "Room", absolute: { x: 0, y: 0 } });
+      const floor = box(k, id, 0, 700, W, 380, { name: "Showroom floor", clip: true });
+      k.rect(floor, W, 380, "ground", { name: "Floor", absolute: { x: 0, y: 0 } });
+      for (let bx = -1800; bx <= W + 1800; bx += 240) poly(k, floor, [[960, -200], [bx, 380]], "grid", { name: "Floor ray", stroke: 2, opacity: 0.45 });
+      for (const [y, o] of [[20, 0.3], [60, 0.4], [120, 0.5], [210, 0.6], [340, 0.7]]) k.rect(floor, W, 2, "grid", { name: "Floor line", absolute: { x: 0, y }, opacity: o });
+      for (const sx of [360, 1400]) {
+        const beam = poly(k, id, [[sx + 60, 0], [sx + 100, 0], [sx + 340, 800], [sx - 180, 800]], [k.gradient({ from: "chrome", to: "chrome", angle: 90, fromOpacity: 0.18, toOpacity: 0 })], { name: "Spotlight" });
+        drift(k, beam, "opacity", 0.2, 0.15);
+      }
+    };
+    {
+      showroom(garage);
+      label(k, garage, "Garage", "Heading 72", "chrome", 120, 70, { name: "Screen title", effects: [glow(k, "neon", 18, 0.7)] });
+      label(k, garage, "Three cars, one sunset. Paint it, tune it, take it out.", "Body 24", "dim", 124, 160, { name: "Screen lead" });
+      const pickCar = (i) => [set(car.id, { value: i })];
+      const row = menu(k, garage, CARS.map((c, i) => ({ label: c.name, actions: pickCar(i) })), {
+        focus: car,
+        x: 120,
+        y: 230,
+        width: 540,
+        pitch: 20,
+        itemHeight: 84,
+        horizontal: true,
+        style: "Car 40",
+        color: "onVoid",
+        nudge: 0,
+        onFocus: pickCar,
+        plate: [k.gradient({ from: "neon", to: "amber", angle: 0, fromOpacity: 0.75, toOpacity: 0.45 })],
+        radius: 4,
+        escape: [back()]
+      });
+      k.patch(row, { name: "Car row" });
+      carProfile(garage, 120, 400, 1, { tuned: true });
+      k.rect(garage, 940, 110, k.tint("scrim", 0.86), { name: "Blurb plate", radius: 6, absolute: { x: 100, y: 686 } });
+      readout(k, garage, CARS.map((c, i) => `${car.n} == ${i} ? "${c.kind.toUpperCase()} \u2014 ${c.blurb}"`).join(" : ") + ' : ""', `${CARS[0].kind.toUpperCase()} \u2014 ${CARS[0].blurb}`, "Body 24", "onVoid", 120, 700, { w: 900, name: "Car blurb" });
+      const stats = box(k, garage, 1160, 330, 660, 330, { name: "Stats", fill: k.tint("scrim", 0.86), radius: 6, stroke: { color: "line", width: 2 } });
+      const statRows = [
+        ["Top speed", `${kmh(TOP)} + " " + ${UNIT}`, "318 KM/H", `(${TOP} - 200)`, "160"],
+        ["Grip", `round(${GRIP})`, "64", GRIP, "100"],
+        ["Acceleration", `round(${ACCEL})`, "70", ACCEL, "100"]
+      ];
+      statRows.forEach(([name, text, rest, v, max], i) => {
+        label(k, stats, name, "Label 26", "onPanel", 36, 34 + i * 96, { name: "Stat name" });
+        readout(k, stats, text, rest, "Value 26", "cyan", 380, 34 + i * 96, { w: 244, align: "RIGHT", name: "Stat value" });
+        bar(k, stats, { x: 36, y: 80 + i * 96, w: 588, h: 14, value: v, max, back: "line", fill: [k.gradient({ from: "neon", to: "amber", angle: 0 })], radius: 7, name: `${name} bar` });
+      });
+      const sw = box(k, garage, 1160, 700, 660, 150, { name: "Paint picker", fill: k.tint("scrim", 0.86), radius: 6, stroke: { color: "line", width: 2 } });
+      label(k, sw, "Paint", "Small 18", "cyan", 36, 22, { name: "Paint label" });
+      readout(k, sw, PAINTS.reduceRight((acc, p, i) => `${paint.n} == ${i} ? "${p.toUpperCase()}" : ${acc}`, '""'), PAINTS[0].toUpperCase(), "Small 18", "onPanel", 300, 22, { w: 324, align: "RIGHT", name: "Paint name" });
+      const ring = k.rect(sw, 76, 76, [], { name: "Swatch ring", radius: 38, absolute: { x: 32, y: 56 }, stroke: { color: "chrome", width: 3 } });
+      k.bindExpression(ring, "x", `32 + ${paint.n} * 124`);
+      PAINTS.forEach((p, i) => {
+        const s = box(k, sw, 40 + i * 124, 64, 60, 60, { name: "Swatch", radius: 30, fill: `paint${i}`, effects: [glow(k, `paint${i}`, 14, 0.6)] });
+        k.on(s, set(paint.id, { value: i, glide: 180 }));
+      });
+      k.on(garage, set(paint.id, { expression: `(round(${paint.n}) + 1) % 5`, glide: 180 }), { key: "ArrowDown" });
+      k.on(garage, set(paint.id, { expression: `(round(${paint.n}) + 4) % 5`, glide: 180 }), { key: "ArrowUp" });
+      const tune = k.instance(garage, "Neon button", { Label: "Tune  ENTER" }, { name: "Tune", absolute: { x: 1160, y: 880 } });
+      k.on(tune, go(tuning, "PUSH_FROM_RIGHT", { duration: 350 }));
+      const bk = k.instance(garage, "Neon button", { Label: "Back  ESC" }, { name: "Back", absolute: { x: 1400, y: 880 } });
+      k.on(bk, back());
+      k.on(garage, go(tuning, "PUSH_FROM_RIGHT", { duration: 350 }), { key: "Enter" });
+      hintBar(garage, "LEFT RIGHT  CAR      \u2191 \u2193  PAINT      ENTER  TUNE      ESC  BACK");
+      k.cues(garage, [{ layer: "Car", preset: "slide-in", at: 0, params: { direction: "left" } }, { layer: "Stats", preset: "rise-in", at: 150 }, { layer: "Paint picker", preset: "rise-in", at: 250 }]);
+    }
+    {
+      showroom(tuning);
+      label(k, tuning, "Tuning", "Heading 72", "chrome", 120, 70, { name: "Screen title", effects: [glow(k, "neon", 18, 0.7)] });
+      readout(k, tuning, `${pick3(car.n, CARS.map((c) => `"${c.name}"`))} + "  \xB7  set-up sheet"`, `${CARS[0].name}  \xB7  set-up sheet`, "Body 24", "dim", 124, 160, { w: 900, name: "Screen lead" });
+      const col = box(k, tuning, 120, 250, 1e3, 300, { name: "Tuning list" });
+      focusColumn(k, tuning, { focus: tuneFocus, count: 3, x: 100, y: 246, w: 1040, pitch: 90, plate: k.tint("neon", 0.22), escape: [back()] });
+      const sl = { labelStyle: "Label 26", valueStyle: "Value 26", ink: "onVoid", track: "line", fill: "amber", knob: "chrome" };
+      const at = (i) => ({ x: 0, y: i * 90, width: 1e3, focus: { n: tuneFocus.n, index: i } });
+      const r0 = slider(k, col, { ...sl, ...at(0), label: "Gear ratio", variable: gear, min: 1, max: 9, step: 1 });
+      const r1 = slider(k, col, { ...sl, ...at(1), label: "Downforce", variable: down, suffix: "%" });
+      const r2 = slider(k, col, { ...sl, ...at(2), label: "Tyre pressure", variable: psi, min: 26, max: 38, step: 2, suffix: " psi" });
+      [r0, r1, r2].forEach((r, i) => focusRow(k, r, tuneFocus, i));
+      const notes = box(k, tuning, 120, 560, 1e3, 110, { name: "Tuning notes", fill: k.tint("scrim", 0.86), radius: 6, padding: 24 });
+      readout(k, notes, `${tuneFocus.n} == 0 ? "Long gears: more top speed, a lazier launch." : ${tuneFocus.n} == 1 ? "Downforce: glued through the sweepers, draggy on the straights." : "Soft tyres grip and squirm; hard ones slide but roll free."`, "Long gears: more top speed, a lazier launch.", "Body 24", "onPanel", 24, 24, { w: 952, name: "Tuning note" });
+      carProfile(tuning, 1180, 420, 0.7, { tuned: true });
+      const stats = box(k, tuning, 1200, 250, 620, 150, { name: "Live stats", fill: k.tint("scrim", 0.88), radius: 6, stroke: { color: "line", width: 2 } });
+      [["TOP", `${kmh(TOP)}`, "318"], ["GRIP", `round(${GRIP})`, "64"], ["ACCEL", `round(${ACCEL})`, "70"]].forEach(([n, x, rest], i) => {
+        label(k, stats, n, "Small 18", "cyan", 30 + i * 200, 24, { name: "Live stat name" });
+        readout(k, stats, x, rest, "Stat 64", "onPanel", 30 + i * 200, 54, { w: 180, name: "Live stat" });
+      });
+      const bars = box(k, tuning, 1200, 740, 620, 150, { name: "Stat bars", fill: k.tint("scrim", 0.88), radius: 6, stroke: { color: "line", width: 2 } });
+      [["Top speed", `(${TOP} - 200)`, "160"], ["Grip", GRIP, "100"], ["Acceleration", ACCEL, "100"]].forEach(([n, v, max], i) => {
+        label(k, bars, n, "Small 18", "onPanel", 30, 20 + i * 42, { name: "Bar name" });
+        bar(k, bars, { x: 250, y: 26 + i * 42, w: 340, h: 12, value: v, max, back: "line", fill: [k.gradient({ from: "cyan", to: "neon", angle: 0 })], radius: 6, name: `${n} tuned` });
+      });
+      const done = k.instance(tuning, "Neon button", { Label: "Done  ENTER" }, { name: "Done", absolute: { x: 120, y: 900 } });
+      k.on(done, back());
+      k.on(tuning, back(), { key: "Enter" });
+      hintBar(tuning, "\u2191 \u2193  SETTING      LEFT RIGHT  ADJUST      ENTER / ESC  DONE");
+    }
+    {
+      dusk(tracks, { palms: false, lines: 5 });
+      shade(tracks, 0.78);
+      readout(k, tracks, `${mode.n} == 1 ? "Time trial" : "Choose a circuit"`, "Choose a circuit", "Heading 72", "chrome", 120, 70, { w: 1200, name: "Screen title" });
+      readout(k, tracks, `${mode.n} == 1 ? "Just you, the clock and the ghost of your best lap." : "Eight cars, three laps. You start sixth."`, "Eight cars, three laps. You start sixth.", "Body 24", "dim", 124, 160, { w: 1200, name: "Screen lead" });
+      const x0 = 120, pitch = 580;
+      const focusRing = k.rect(tracks, 536, 596, [], { name: "Track focus", radius: 10, absolute: { x: x0 - 8, y: 252 }, stroke: { color: "neon", width: 4 }, effects: [glow(k, "neon", 26)] });
+      k.bindExpression(focusRing, "x", `${x0 - 8} + ${track.n} * ${pitch}`);
+      TRACKS.forEach((t, i) => {
+        const c = box(k, tracks, x0 + i * pitch, 260, 520, 580, { name: "Track card", fill: k.tint("panel", 0.94), radius: 6, stroke: { color: "line", width: 2 } });
+        k.rect(c, 520, 280, k.tint("scrim", 0.8), { name: "Map well", radius: 6, absolute: { x: 0, y: 0 } });
+        trackLine(c, i, 90, 40, 340, 200);
+        label(k, c, t.name, "Car 40", "onPanel", 32, 300, { w: 456, name: "Track name" });
+        label(k, c, t.place, "Hint 20", "cyan", 32, 352, { w: 456, name: "Track place" });
+        label(k, c, t.blurb, "Body 24", "dim", 32, 392, { w: 456, name: "Track blurb" });
+        readout(k, c, `(${units.n} == 1 ? "${(t.km * 0.6214).toFixed(1)} MI" : "${t.km} KM") + "  \xB7  3 LAPS"`, `${t.km} KM  \xB7  3 LAPS`, "Small 18", "onPanel", 32, 480, { w: 456, name: "Track length" });
+        readout(k, c, `"BEST  " + clock(${best[i].n})`, `BEST  ${Math.floor(t.best / 6e4)}:${String(Math.floor(t.best / 1e3) % 60).padStart(2, "0")}.${String(Math.floor(t.best / 10) % 100).padStart(2, "0")}`, "Value 26", "amber", 32, 516, { w: 456, name: "Track best" });
+        k.on(c, set(track.id, { value: i, glide: 160 }), { trigger: "MOUSE_ENTER" });
+        onAll(k, c, [set(track.id, { value: i }), ...resetRace, toCountdown]);
+      });
+      for (const key of ["ArrowRight", "d"]) k.on(tracks, set(track.id, { expression: `(round(${track.n}) + 1) % 3`, glide: 160 }), { key });
+      for (const key of ["ArrowLeft", "a"]) k.on(tracks, set(track.id, { expression: `(round(${track.n}) + 2) % 3`, glide: 160 }), { key });
+      onAll(k, tracks, [set(track.id, { expression: `round(${track.n})` }), ...resetRace, toCountdown], { key: "Enter" });
+      k.on(tracks, back(), { key: "Escape" });
+      hintBar(tracks, "LEFT RIGHT  CIRCUIT      ENTER  RACE      ESC  BACK");
+      k.cues(tracks, [{ layer: "Track card", preset: "rise-in", at: 0, stagger: { delay: 90 } }]);
+    }
+    {
+      dusk(settings, { palms: false, lines: 5 });
+      shade(settings, 0.84);
+      label(k, settings, "Settings", "Heading 72", "chrome", 120, 70, { name: "Screen title" });
+      const col = box(k, settings, 120, 200, 1100, 700, { name: "Settings list" });
+      const rows = 7;
+      focusColumn(k, settings, { focus: setFocus, count: rows, x: 100, y: 196, w: 1140, pitch: 84, plate: k.tint("neon", 0.22), guard: `${rebind.n} == ""`, escape: [back()] });
+      const common = { labelStyle: "Label 26", ink: "onVoid" };
+      const sl = { ...common, valueStyle: "Value 26", track: "line", fill: "neon", knob: "chrome" };
+      const at = (i) => ({ x: 0, y: i * 84, width: 1100, focus: { n: setFocus.n, index: i } });
+      const r0 = slider(k, col, { ...sl, ...at(0), label: "Master volume", variable: master, suffix: "%" });
+      const r1 = slider(k, col, { ...sl, ...at(1), label: "Music (synthwave)", variable: music, suffix: "%" });
+      const r2 = toggle(k, col, { ...common, ...at(2), label: "Camera shake", variable: shake });
+      const r3 = toggle(k, col, { ...common, ...at(3), label: "Speed in mph", variable: units });
+      const kb = { ...common, capStyle: "Cap 22", cap: "panel", onCap: "cyan", listening: "neon", rebind };
+      const r4 = keybind(k, col, { ...kb, ...at(4), action: "Accelerate", slot: "gas", variable: keyGas });
+      const r5 = keybind(k, col, { ...kb, ...at(5), action: "Brake", slot: "brake", variable: keyBrake });
+      const r6 = keybind(k, col, { ...kb, ...at(6), action: "Nitro", slot: "nitro", variable: keyNitro });
+      [r0, r1, r2, r3, r4, r5, r6].forEach((r, i) => focusRow(k, r, setFocus, i));
+      rebindListener(k, settings, rebind, [{ slot: "gas", variable: keyGas }, { slot: "brake", variable: keyBrake }, { slot: "nitro", variable: keyNitro }]);
+      const prev = box(k, settings, 1320, 200, 500, 460, { name: "Speedo preview", fill: k.tint("panel", 0.94), radius: 6, stroke: { color: "line", width: 2 } });
+      label(k, prev, "Preview", "Small 18", "cyan", 32, 28, { name: "Preview title" });
+      const dash = box(k, prev, 60, 80, 380, 260, { name: "Preview dash" });
+      k.ellipse(dash, 240, k.tint("scrim", 0.9), { name: "Preview dial", absolute: { x: 70, y: 0 }, stroke: { color: "neon", width: 3 } });
+      arc(k, dash, 190, 120, 132, Math.PI * 0.75, Math.PI * 1.9, "amber", 6, { name: "Preview arc", effects: [glow(k, "amber", 12)] });
+      readout(k, dash, kmh("300"), "300", "Stat 64", "onVoid", 90, 70, { w: 200, align: "CENTER", name: "Preview figure" });
+      readout(k, dash, UNIT, "KM/H", "Small 18", "cyan", 90, 146, { w: 200, align: "CENTER", name: "Preview unit" });
+      const wob = box(k, dash, 0, 0, 380, 260, { name: "Shake demo" });
+      k.rect(wob, 12, 12, "bad", { name: "Shake mark", radius: 6, absolute: { x: 184, y: 250 } });
+      k.bindExpression(wob, "visible", `${shake.n} == 1`);
+      k.behave(wob, "translateX", [{ kind: "noise", amp: 6, freq: 9, seed: 4 }]);
+      readout(k, prev, `"Camera shake " + (${shake.n} == 1 ? "ON" : "OFF") + "  \xB7  " + ${UNIT}`, "Camera shake ON  \xB7  KM/H", "Small 18", "onPanel", 32, 400, { w: 436, name: "Preview line" });
+      const b = k.instance(settings, "Neon button", { Label: "Back  ESC" }, { name: "Back", absolute: { x: 1640, y: 900 } });
+      k.on(b, back());
+      hintBar(settings, "\u2191 \u2193  ROW      LEFT RIGHT  ADJUST      ENTER  TOGGLE / REBIND      ESC  BACK");
+    }
+    {
+      dusk(credits, { palms: true, lines: 6 });
+      shade(credits, 0.7);
+      const roll = box(k, credits, 460, 50, 1e3, 980, { name: "Credits roll", gap: 18, align: "CENTER" });
+      k.text(roll, "Credits", { style: "Heading 72", color: "chrome", align: "CENTER", name: "Roll title" });
+      for (const [role, name] of CREDITS) {
+        const g = k.stack(roll, { gap: 2, align: "CENTER", name: "Credit" });
+        k.text(g, role, { style: "Credit role 20", color: "cyan", align: "CENTER", name: "Role" });
+        k.text(g, name, { style: "Credit name 36", color: "onVoid", align: "CENTER", name: "Name" });
+      }
+      k.text(roll, "A {{brand.studio}} production", { style: "Credit role 20", color: "dim", align: "CENTER", name: "Sign-off" });
+      keys(k, roll, "translateY", [{ t: 0, v: 1080, ease: { kind: "linear" } }, { t: 12800, v: -1100 }]);
+      k.link(credits, main, "DISSOLVE", { key: "*", duration: 350 });
+      k.link(credits, main, "DISSOLVE", { duration: 350 });
+    }
+    {
+      dusk(countdown, { road: true });
+      const gantry = box(k, countdown, 560, 120, 800, 120, { name: "Start gantry", fill: k.tint("scrim", 0.92), radius: 60, stroke: { color: "line", width: 3 } });
+      for (let i = 0; i < 5; i++) {
+        k.ellipse(gantry, 72, "silhouette", { name: "Lamp", absolute: { x: 70 + i * 140, y: 24 }, stroke: { color: "line", width: 2 } });
+        const lit = k.ellipse(gantry, 72, i < 4 ? "neon" : "good", { name: "Lamp lit", absolute: { x: 70 + i * 140, y: 24 }, effects: [glow(k, i < 4 ? "neon" : "good", 30)] });
+        const on = i < 4 ? 40 + i * 700 : 3e3;
+        keys(k, lit, "opacity", i < 4 ? [{ t: 0, v: 0, ease: { kind: "hold" } }, { t: on, v: 1, ease: { kind: "hold" } }, { t: 3e3, v: 0 }] : [{ t: 0, v: 0, ease: { kind: "hold" } }, { t: on, v: 1 }]);
+      }
+      const disc = k.ellipse(countdown, 460, k.tint("scrim", 0.9), { name: "Count disc", absolute: { x: 730, y: 250 }, stroke: { color: "neon", width: 4 }, effects: [glow(k, "neon", 40, 0.7)] });
+      drift(k, disc, "scaleX", 0.02, 1);
+      drift(k, disc, "scaleY", 0.02, 1);
+      const words = ["3", "2", "1", "GO"];
+      words.forEach((w, i) => {
+        const t = label(k, countdown, w, "Count 320", i === 3 ? "good" : "chrome", 0, 330, { w: W, align: "CENTER", name: `Count ${w}` });
+        const t0 = i * 1e3;
+        keys(k, t, "opacity", [...i ? [{ t: 0, v: 0, ease: { kind: "hold" } }] : [], { t: t0, v: 1, ease: { kind: "hold" } }, { t: t0 + 700, v: 1, ease: e("cubic-in") }, { t: t0 + (i === 3 ? 1100 : 950), v: 0 }]);
+        keys(k, t, "scaleX", [{ t: t0, v: 1.8, ease: e("back-out") }, { t: t0 + 350, v: 1 }]);
+        keys(k, t, "scaleY", [{ t: t0, v: 1.8, ease: e("back-out") }, { t: t0 + 350, v: 1 }]);
+      });
+      const info = box(k, countdown, 610, 880, 700, 64, { name: "Grid info", fill: k.tint("scrim", 0.88), radius: 32, align: "CENTER", justify: "CENTER" });
+      readout(k, info, `${pick3(track.n, TRACKS.map((t) => `"${t.name}"`))} + (${mode.n} == 1 ? "  \xB7  TIME TRIAL" : "  \xB7  GRID P6 OF 8")`, `${TRACKS[0].name}  \xB7  GRID P6 OF 8`, "HUD 22", "onVoid", 0, 18, { w: 700, align: "CENTER", name: "Grid line" });
+      onAll(k, countdown, [...startClock, go(hud, "DISSOLVE", { duration: 200 })], { trigger: "AFTER_TIMEOUT", delay: 3900 });
+      onAll(k, countdown, [...startClock, go(hud, "DISSOLVE", { duration: 200 })], { key: "Enter" });
+      k.on(countdown, overlay(pause), { key: "Escape" });
+    }
+    {
+      const world = box(k, hud, 0, 0, W, H, { name: "World" });
+      const { g: scene } = dusk(world, { road: true, sink: `min(${dist.n}, 3) * 48` });
+      k.bindExpression(scene, "translateX", `${steer.n} * -40`);
+      k.patch(scene, { anchorX: 0.5, anchorY: 0.5, scaleX: 1.06, scaleY: 1.06 });
+      const streakSets = [[100, 6], [180, 6], [250, 6]];
+      streakSets.forEach(([at, n], si) => {
+        const s = box(k, world, 0, 0, W, H, { name: "Speed streaks" });
+        k.bindExpression(s, "visible", `${speed.n} > ${at}`);
+        k.bindExpression(s, "opacity", `clamp((${speed.n} - ${at}) / 120, 0, 1)`);
+        for (let i = 0; i < n; i++) {
+          const side = i % 2 ? 1 : -1;
+          const a = side > 0 ? -0.35 + (i * 0.23 + si * 0.11) % 0.8 : Math.PI + 0.35 - (i * 0.23 + si * 0.11) % 0.8;
+          const r0 = 260 + si * 60, len = 220;
+          const p0 = [960 + Math.cos(a) * r0, HORIZON + Math.sin(a) * r0 * 0.55], p1 = [960 + Math.cos(a) * (r0 + len), HORIZON + Math.sin(a) * (r0 + len) * 0.55];
+          const nx = -Math.sin(a) * 1.5, ny = Math.cos(a) * 1.5;
+          const st = poly(k, s, [[p0[0] + nx, p0[1] + ny], [p1[0] + nx * 2, p1[1] + ny * 2], [p1[0] - nx * 2, p1[1] - ny * 2], [p0[0] - nx, p0[1] - ny]], si === 2 ? "cyan" : "chrome", { name: "Streak", opacity: 0.8 });
+          const dx2 = Math.cos(a) * 900, dy2 = Math.sin(a) * 900 * 0.55;
+          keys(k, st, "translateX", [{ t: 0, v: 0, ease: e("cubic-in") }, { t: 600, v: dx2 }]);
+          keys(k, st, "translateY", [{ t: 0, v: 0, ease: e("cubic-in") }, { t: 600, v: dy2 }]);
+          k.behave(st, "translateX", [{ kind: "loop", mode: "cycle" }]);
+          k.behave(st, "translateY", [{ kind: "loop", mode: "cycle" }]);
+          if (i) k.delay(st, i * 97);
+        }
+      });
+      const you = box(k, world, 740, 740, 440, 220, { name: "Your car" });
+      k.bindExpression(you, "translateX", `${steer.n} * 110`);
+      k.bindExpression(you, "rotation", `${steer.n} * -3`);
+      k.patch(you, { anchorX: 0.5, anchorY: 1 });
+      k.ellipse(you, 440, k.tint("scrim", 0.6), { name: "Shadow", absolute: { x: 0, y: 150 } });
+      k.patch(k.named(you, "Shadow")[0], { height: 70 });
+      k.rect(you, 70, 70, "tyre", { name: "Tyre", radius: 10, absolute: { x: 34, y: 136 } });
+      k.rect(you, 70, 70, "tyre", { name: "Tyre", radius: 10, absolute: { x: 336, y: 136 } });
+      const rearBody = [[20, 170], [30, 110], [90, 80], [130, 30], [310, 30], [350, 80], [410, 110], [420, 170], [400, 190], [40, 190]];
+      PAINTS.forEach((_, j) => {
+        const b = poly(k, you, rearBody, `paint${j}`, { name: "Rear paint", effects: [glow(k, `paint${j}`, 26, 0.4)] });
+        k.bindExpression(b, "visible", `${paint.n} == ${j}`);
+      });
+      poly(k, you, rearBody, "chrome", { name: "Rear line", stroke: 2, closed: true, opacity: 0.6 });
+      poly(k, you, [[140, 40], [300, 40], [332, 84], [108, 84]], "glass", { name: "Rear glass" });
+      k.rect(you, 380, 16, "silhouette", { name: "Spoiler", radius: 4, absolute: { x: 30, y: 72 }, stroke: { color: "neon", width: 2 } });
+      const tail = k.rect(you, 330, 16, "neon", { name: "Tail lights", radius: 8, absolute: { x: 55, y: 118 }, effects: [glow(k, "neon", 30)] });
+      k.bindExpression(tail, "opacity", `0.5 + ${brake.n} * 0.5`);
+      const brakeGlow = k.ellipse(you, 440, [k.gradient({ from: "bad", to: "bad", kind: "RADIAL", fromOpacity: 0.6, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Brake glow", absolute: { x: 0, y: 20 } });
+      k.patch(brakeGlow, { height: 200 });
+      k.bindExpression(brakeGlow, "visible", `${brake.n} == 1`);
+      k.rect(you, 120, 18, "silhouette", { name: "Plate", radius: 3, absolute: { x: 160, y: 150 }, stroke: { color: "chrome", width: 1 } });
+      k.ellipse(you, 22, "silhouette", { name: "Exhaust", absolute: { x: 100, y: 178 }, stroke: { color: "amber", width: 3 } });
+      k.ellipse(you, 22, "silhouette", { name: "Exhaust", absolute: { x: 318, y: 178 }, stroke: { color: "amber", width: 3 } });
+      drift(k, you, "translateY", 2, 3.1);
+      const smoke = box(k, world, 780, 620, 360, 200, { name: "Engine smoke" });
+      k.bindExpression(smoke, "visible", `${damage.n} >= 50`);
+      for (let i = 0; i < 5; i++) {
+        const p = k.ellipse(smoke, 70 + i * 16, "smoke", { name: "Puff", absolute: { x: 100 + i % 3 * 50, y: 120 }, opacity: 0.55, effects: [blurFx(14)] });
+        keys(k, p, "translateY", [{ t: 0, v: 40, ease: e("cubic-out") }, { t: 1400, v: -120 }]);
+        keys(k, p, "opacity", [{ t: 0, v: 0.6, ease: { kind: "linear" } }, { t: 1400, v: 0 }]);
+        k.behave(p, "translateY", [{ kind: "loop", mode: "cycle" }]);
+        k.behave(p, "opacity", [{ kind: "loop", mode: "cycle" }]);
+        if (i) k.delay(p, i * 280);
+      }
+      const rig = box(k, hud, 0, 0, W, H, { name: "Tilt rig" });
+      k.patch(rig, { anchorX: 0.5, anchorY: 0.5 });
+      k.bindExpression(rig, "rotation", `${steer.n} * 1.2 + ${shake.n} * ${hitFx.n} * 1.5`);
+      k.bindExpression(rig, "translateY", `${shake.n} * ${hitFx.n} * 36`);
+      k.bindExpression(world, "translateX", `${shake.n} * ${hitFx.n} * -60`);
+      const board = box(k, rig, 40, 40, 380, 470, { name: "Position board", fill: k.tint("scrim", 0.86), radius: 6, stroke: { color: "line", width: 2 } });
+      k.bindExpression(board, "visible", `${mode.n} == 0`);
+      label(k, board, "Position", "Small 18", "cyan", 24, 22, { name: "Board title" });
+      readout(k, board, `"P" + round(${pos.n})`, "P6", "Pos 72", "onPanel", 24, 44, { w: 160, name: "Position" });
+      readout(k, board, `"/ " + ${racers.n}`, "/ 8", "HUD 22", "dim", 150, 80, { w: 80, name: "Of racers" });
+      const pitch = 36, top = 134;
+      for (let r = 0; r < 8; r++) label(k, board, String(r + 1), "Board 20", "dim", 24, top + r * pitch + 4, { w: 30, name: "Rank" });
+      RIVALS.forEach((name, i) => {
+        const row = box(k, board, 62, top + i * pitch, 296, pitch - 4, { name: "Rival row" });
+        k.text(row, name, { style: "Board 20", color: "onPanel", width: 290, name: "Rival", absolute: { x: 10, y: 3 } });
+        k.bindExpression(row, "y", `${top} + ${pitch} * (${i} + clamp(${i + 2} - ${pos.n}, 0, 1))`);
+      });
+      const me = box(k, board, 62, top + 5 * pitch, 296, pitch - 4, { name: "Your row", fill: "primary", radius: 4 });
+      readout(k, me, driver.n, "ZEPHYR", "Board 20", "onPrimary", 10, 3, { w: 280, name: "You" });
+      k.bindExpression(me, "y", `${top} + ${pitch} * (${pos.n} - 1)`);
+      const ttPanel = box(k, rig, 40, 40, 380, 150, { name: "Ghost panel", fill: k.tint("scrim", 0.86), radius: 6, stroke: { color: "line", width: 2 }, padding: 24, gap: 8 });
+      k.bindExpression(ttPanel, "visible", `${mode.n} == 1`);
+      k.text(ttPanel, "Time trial", { style: "Small 18", color: "cyan", name: "Ghost title" });
+      readout(k, ttPanel, `"GHOST  " + clock(${pick3(track.n, best.map((b) => b.n))})`, "GHOST  0:41.25", "HUD 22", "onPanel", 24, 60, { w: 330, name: "Ghost best" });
+      const lapBox = box(k, rig, 700, 30, 520, 150, { name: "Lap panel", fill: k.tint("scrim", 0.86), radius: 6, stroke: { color: "line", width: 2 } });
+      label(k, lapBox, "Lap", "Small 18", "cyan", 30, 20, { name: "Lap label" });
+      readout(k, lapBox, `${LAP} + " / " + ${laps.n}`, "1 / 3", "Lap 48", "onPanel", 20, 46, { w: 180, name: "Lap count" });
+      label(k, lapBox, "Race time", "Small 18", "cyan", 230, 20, { name: "Clock label" });
+      label(k, lapBox, "0.00", "Clock 30", "onPanel", 220, 54, { w: 280, name: "Race clock" });
+      readout(k, lapBox, `"LAST " + (${lastLap.n} > 0 ? clock(${lastLap.n}) : "-:--.--")`, "LAST -:--.--", "Small 18", "dim", 220, 104, { w: 280, name: "Last lap" });
+      const ghost = box(k, rig, 800, 196, 320, 60, { name: "Ghost delta", fill: k.tint("scrim", 0.9), radius: 30, stroke: { color: "line", width: 2 } });
+      const dText = `(${delta.n} >= 0 ? "+" : "\u2212") + fixed(abs(${delta.n}), 2) + "  GHOST"`;
+      const ahead = readout(k, ghost, dText, "+0.00  GHOST", "Delta 34", "good", 0, 10, { w: 320, align: "CENTER", name: "Delta ahead" });
+      k.bindExpression(ahead, "visible", `${delta.n} < 0`);
+      const behind = readout(k, ghost, dText, "+0.00  GHOST", "Delta 34", "bad", 0, 10, { w: 320, align: "CENTER", name: "Delta behind" });
+      k.bindExpression(behind, "visible", `${delta.n} >= 0`);
+      const mm = box(k, rig, 1590, 110, 290, 250, { name: "Minimap", fill: k.tint("scrim", 0.86), radius: 6, stroke: { color: "line", width: 2 } });
+      readout(k, mm, pick3(track.n, TRACKS.map((t) => `"${t.name}"`)), TRACKS[0].name, "Small 18", "cyan", 20, 16, { w: 250, name: "Map title" });
+      const mw = 250, mh = 180, mx = 20, my = 52;
+      TRACKS.forEach((_, i) => {
+        const m = trackLine(mm, i, mx, my, mw, mh, 3);
+        k.bindExpression(m, "visible", `${track.n} == ${i}`);
+      });
+      const dotAt = (u, size, color, name) => {
+        const d = k.ellipse(mm, size, color, { name, absolute: { x: 0, y: 0 }, effects: [glow(k, color, 12)] });
+        k.bindExpression(d, "x", `${mx - size / 2} + ` + pick3(track.n, TRACKS.map((_, i) => `(${along(trackPts(i, mw, mh), u, 0)})`)));
+        k.bindExpression(d, "y", `${my - size / 2} + ` + pick3(track.n, TRACKS.map((_, i) => `(${along(trackPts(i, mw, mh), u, 1)})`)));
+        return d;
+      };
+      [0.05, 0.11, 0.19].forEach((o, j) => dotAt(`((${dist.n} + ${o}) % 1)`, 12, "dim", `Rival dot ${j + 1}`));
+      dotAt(U, 18, "neon", "You dot");
+      const status = box(k, rig, 40, 790, 620, 210, { name: "Car status", fill: k.tint("scrim", 0.86), radius: 6, stroke: { color: "line", width: 2 } });
+      readout(k, status, driver.n, "ZEPHYR", "HUD 22", "cyan", 24, 18, { w: 260, name: "Driver" });
+      readout(k, status, pick3(car.n, CARS.map((c) => `"${c.name}"`)), CARS[0].name, "HUD 22", "dim", 300, 18, { w: 296, align: "RIGHT", name: "Car name" });
+      readout(k, status, `"NITRO  [" + ${keyNitro.n} + "]"`, "NITRO  [N]", "Small 18", "onPanel", 24, 62, { w: 300, name: "Nitro label" });
+      bar(k, status, { x: 24, y: 92, w: 470, h: 26, value: nitro.n, max: "100", back: "line", fill: [k.gradient({ from: "cyan", to: "chrome", angle: 0 })], radius: 4, name: "Nitro bar" });
+      for (let i = 1; i < 4; i++) k.rect(status, 3, 26, "scrim", { name: "Bottle gap", absolute: { x: 24 + i * 117.5, y: 92 } });
+      const ring = k.instance(status, "Nitro ring", {}, { name: "Nitro cooldown", absolute: { x: 516, y: 70 } });
+      k.ellipse(status, 56, [], { name: "Nitro socket", absolute: { x: 524, y: 78 }, stroke: { color: "line", width: 2 } });
+      label(k, status, "Damage", "Small 18", "onPanel", 24, 132, { name: "Damage label" });
+      bar(k, status, { x: 24, y: 160, w: 470, h: 26, value: damage.n, max: maxDamage.n, back: "line", fill: [k.gradient({ from: "amber", to: "bad", angle: 0 })], chip: { expression: damageLag.n, color: "chrome" }, radius: 4, name: "Damage bar" });
+      readout(k, status, `round(${damage.n}) + "%"`, "0%", "HUD 22", "onPanel", 500, 158, { w: 100, align: "RIGHT", name: "Damage value" });
+      const crit = box(k, rig, 40, 730, 620, 48, { name: "Engine critical", fill: "bad", radius: 4, align: "CENTER", justify: "CENTER" });
+      k.text(crit, "Engine critical \u2014 one more hit", { style: "Alert 30", color: "onAmber", autoWidth: true, name: "Critical words" });
+      k.bindExpression(crit, "visible", `${damage.n} >= 70`);
+      drift(k, crit, "opacity", 0.35, 2);
+      const cx = 1650, cy = 820, R = 180;
+      const dial = box(k, rig, cx - 280, cy - 280, 560, 560, { name: "Speedometer" });
+      const lc = (x, y) => [x - (cx - 280), y - (cy - 280)];
+      const [dx, dy] = lc(cx, cy);
+      const heat = k.ellipse(dial, 560, [k.gradient({ from: "amber", to: "amber", kind: "RADIAL", fromOpacity: 0.7, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Heat glow", absolute: { x: 0, y: 0 } });
+      k.bindExpression(heat, "opacity", `0.15 + clamp(${speed.n} / ${DIAL_MAX}, 0, 1) * 0.85`);
+      const hot = k.ellipse(dial, 520, [k.gradient({ from: "chrome", to: "neon", kind: "RADIAL", fromOpacity: 0.5, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Redline glow", absolute: { x: 20, y: 20 } });
+      k.bindExpression(hot, "visible", `${speed.n} >= 255`);
+      drift(k, hot, "opacity", 0.3, 3);
+      k.ellipse(dial, R * 2, k.tint("scrim", 0.94), { name: "Dial face", absolute: { x: dx - R, y: dy - R }, stroke: { color: "line", width: 3 } });
+      const a0 = Math.PI * 0.75, a1 = Math.PI * 2.25, sweep = a1 - a0;
+      const segs = 18;
+      for (let i = 0; i < segs; i++) {
+        const s0 = a0 + sweep * i / segs + 0.012, s1 = a0 + sweep * (i + 1) / segs - 0.012;
+        const color = i < 12 ? "cyan" : i < 15 ? "amber" : "bad";
+        const seg = sector(k, dial, dx, dy, R + 44, R + 16, s0, s1, color, { name: "Tach segment", effects: [glow(k, color, 10, 0.8)] });
+        k.bindExpression(seg, "opacity", `${RPM} * ${segs} > ${i} ? 1 : 0.14`);
+      }
+      arc(k, dial, dx, dy, R - 8, a0, a1, "line", 2, { name: "Dial rim" });
+      for (let v = 0; v <= DIAL_MAX; v += 40) {
+        const a = a0 + v / DIAL_MAX * sweep;
+        const [ox, oy] = [dx + Math.cos(a) * (R - 10), dy + Math.sin(a) * (R - 10)], [ix, iy] = [dx + Math.cos(a) * (R - 28), dy + Math.sin(a) * (R - 28)];
+        poly(k, dial, [[ox, oy], [ix, iy]], "chrome", { name: "Dial tick", stroke: 3 });
+        const t = label(k, dial, String(v), "Tick 16", "dim", dx + Math.cos(a) * (R - 52) - 26, dy + Math.sin(a) * (R - 52) - 10, { w: 52, align: "CENTER", name: "Dial number" });
+        k.bindExpression(t, "characters", `${units.n} == 1 ? "${Math.round(v * 0.6214)}" : "${v}"`);
+      }
+      const na = a0, nd = [Math.cos(na), Math.sin(na)], nn = [-nd[1], nd[0]];
+      const needle = poly(k, dial, [[dx - nd[0] * 26 + nn[0] * 7, dy - nd[1] * 26 + nn[1] * 7], [dx + nd[0] * (R - 20), dy + nd[1] * (R - 20)], [dx - nd[0] * 26 - nn[0] * 7, dy - nd[1] * 26 - nn[1] * 7]], "neon", { name: "Needle", effects: [glow(k, "neon", 16)] });
+      const nb = k.node(needle);
+      k.patch(needle, { anchorX: (dx - nb.x) / nb.width, anchorY: (dy - nb.y) / nb.height });
+      k.bindExpression(needle, "rotation", `clamp(${speed.n} / ${DIAL_MAX}, 0, 1) * 270`);
+      const fig = box(k, dial, dx - 96, dy - 92, 192, 128, { name: "Speed plate", fill: k.tint("scrim", 0.97), radius: 16, stroke: { color: "line", width: 1 } });
+      readout(k, fig, kmh(speed.n), "0", "Speed 96", "onVoid", 0, 2, { w: 192, align: "CENTER", name: "Speed" });
+      readout(k, fig, UNIT, "KM/H", "Small 18", "cyan", 0, 98, { w: 192, align: "CENTER", name: "Speed unit" });
+      const gearBox = box(k, dial, dx - 50, dy + 72, 100, 84, { name: "Gear box", fill: "panel", radius: 10, stroke: { color: "neon", width: 2 } });
+      readout(k, gearBox, `${speed.n} < 2 ? "N" : "" + (${GEAR})`, "N", "Gear 56", "onPanel", 0, 12, { w: 100, align: "CENTER", name: "Gear" });
+      const legend = box(k, rig, 40, 1016, 700, 40, { name: "Controls", fill: k.tint("scrim", 0.9), radius: 4 });
+      readout(k, legend, `${keyGas.n} + " GAS  " + ${keyBrake.n} + " BRAKE  A D STEER  " + ${keyNitro.n} + " NITRO  O PASS  C HIT"`, "W GAS  S BRAKE  A D STEER  N NITRO  O PASS  C HIT", "Small 18", "onVoid", 0, 8, { w: 700, align: "CENTER", name: "Legend" });
+      const edge = k.gradient({ from: "bad", to: "bad", kind: "RADIAL", fromOpacity: 0, toOpacity: 0.85, handles: [{ x: 0.5, y: 0.5 }, { x: 1.05, y: 0.5 }, { x: 0.5, y: 1.1 }] });
+      const hitRect = k.rect(hud, W, H, [edge], { name: "Hit flash", absolute: { x: 0, y: 0 } });
+      k.bindExpression(hitRect, "opacity", `${hitFx.n} * 0.6`);
+      const wash = k.rect(hud, W, H, [k.gradient({ from: "cyan", to: "cyan", kind: "RADIAL", fromOpacity: 0, toOpacity: 0.55, handles: [{ x: 0.5, y: 0.55 }, { x: 1, y: 0.55 }, { x: 0.5, y: 1.1 }] })], { name: "Boost flash", absolute: { x: 0, y: 0 } });
+      k.bindExpression(wash, "opacity", boostFx.n);
+      const lapPop = k.instance(hud, "Lap banner", {}, { name: "Lap banner", absolute: { x: 600, y: 300 } });
+      const passPop = k.instance(hud, "Overtake pop", {}, { name: "Overtake pop", absolute: { x: 440, y: 440 } });
+      const boost = k.instance(hud, "Boost", {}, { name: "Boost", absolute: { x: 0, y: 0 } });
+      const impact = k.instance(hud, "Impact", {}, { name: "Impact", absolute: { x: 0, y: 0 } });
+      k.counts(hud, [{ layer: "Race clock", at: 0, duration: 18e4, counter: { from: 0, to: 180, decimals: 2, separator: "", value: 0 }, ease: { kind: "linear" } }]);
+      const finish = [
+        set(finishTime.id, { expression: `now() - ${raceStart.n}` }),
+        when([...best.map((b, i) => ({ if: `${track.n} == ${i} && ${finishTime.n} < ${b.n}`, then: [set(record.id, { value: 1 }), set(b.id, { expression: finishTime.n })] })), { then: [set(record.id, { value: 0 })] }]),
+        go(results, "DISSOLVE", { duration: 700 })
+      ];
+      const newLap = (step) => when([{ if: crosses(step), then: [set(lastLap.id, { expression: `now() - ${lapStart.n}` }), set(lapStart.id, { expression: "now()" })] }]);
+      const logic = box(k, hud, 0, 0, 1, 1, { name: "Game logic" });
+      k.on(logic, when([
+        { if: GAS, then: [
+          newLap(STEP),
+          set(dist.id, { expression: `${dist.n} + ${STEP}`, glide: 600 }),
+          set(speed.id, { expression: `min(${TOP}, ${speed.n} + ${ACC})`, glide: 500 }),
+          set(delta.id, { expression: `${delta.n} + (215 - ${speed.n}) / 700`, glide: 300 }),
+          set(nitro.id, { expression: `min(100, ${nitro.n} + 4)`, glide: 400 }),
+          set(steer.id, { value: 0, glide: 450 }),
+          set(brake.id, { value: 0 }),
+          when([{ if: `${speed.n} >= 250 && ${pos.n} > 2`, then: [set(pos.id, { expression: `${pos.n} - 1`, glide: 600, easing: "EASE_IN_OUT" })] }]),
+          when([{ if: `${dist.n} >= ${laps.n}`, then: finish }])
+        ] },
+        { if: BRAKE, then: [
+          set(speed.id, { expression: `max(0, ${speed.n} - 90)`, glide: 400 }),
+          set(brake.id, { value: 1 }),
+          set(delta.id, { expression: `${delta.n} + 0.18`, glide: 300 }),
+          when([{ if: `${speed.n} < 40 && ${pos.n} < 8`, then: [set(pos.id, { expression: `${pos.n} + 1`, glide: 600, easing: "EASE_IN_OUT" })] }])
+        ] },
+        { if: LEFT, then: [set(steer.id, { expression: `max(-1, ${steer.n} - 1)`, glide: 350 })] },
+        { if: RIGHT, then: [set(steer.id, { expression: `min(1, ${steer.n} + 1)`, glide: 350 })] },
+        { if: `${NITRO} && ${CAN}`, then: [
+          set(nitroAt.id, { expression: "now()" }),
+          set(boostFx.id, { value: 1 }),
+          set(boostFx.id, { value: 0, glide: 1e3, easing: "EASE_IN" }),
+          set(nitro.id, { expression: `${nitro.n} - 25`, glide: 900 }),
+          newLap(NSTEP),
+          set(dist.id, { expression: `${dist.n} + ${NSTEP}`, glide: 900 }),
+          set(speed.id, { expression: `min(${TOP} + 40, ${speed.n} + 70)`, glide: 400 }),
+          set(delta.id, { expression: `${delta.n} - 0.25`, glide: 300 }),
+          when([{ if: `${pos.n} > 1`, then: [set(pos.id, { expression: `${pos.n} - 1`, glide: 600, easing: "EASE_IN_OUT" })] }]),
+          when([{ if: `${dist.n} >= ${laps.n}`, then: finish }])
+        ] },
+        { if: 'upper($key) == "O"', then: [when([{ if: `${pos.n} > 1`, then: [set(pos.id, { expression: `${pos.n} - 1`, glide: 600, easing: "EASE_IN_OUT" }), set(delta.id, { expression: `${delta.n} - 0.1`, glide: 300 })] }])] },
+        { if: 'upper($key) == "C"', then: [
+          set(hitFx.id, { value: 1 }),
+          set(hitFx.id, { value: 0, glide: 1200, easing: "EASE_IN" }),
+          set(damage.id, { expression: `min(${maxDamage.n}, ${damage.n} + 26)`, glide: 300 }),
+          set(damageLag.id, { expression: damage.n, glide: 1200, easing: "EASE_IN_OUT" }),
+          set(speed.id, { expression: `${speed.n} * 0.35`, glide: 350 }),
+          set(delta.id, { expression: `${delta.n} + 0.6`, glide: 300 }),
+          when([{ if: `${pos.n} < 8`, then: [set(pos.id, { expression: `${pos.n} + 1`, glide: 600, easing: "EASE_IN_OUT" })] }]),
+          when([{ if: `${damage.n} >= ${maxDamage.n}`, then: [go(wrecked, "DISSOLVE", { duration: 700 })] }])
+        ] }
+      ]), { key: "*" });
+      k.on(logic, overlay(pause), { key: "Escape" });
+      k.on(impact, when([{ if: `upper($key) == "C" && ${shake.n} == 1`, then: [k.changeAction("Impact/Shake", 0)] }, { if: 'upper($key) == "C"', then: [k.changeAction("Impact/Flash", 0)] }]), { key: "*" });
+      k.on(boost, when([{ if: `${NITRO} && ${CAN}`, then: [k.changeAction("Boost/Fire", 0)] }]), { key: "*" });
+      k.on(ring, when([{ if: `${NITRO} && ${CAN}`, then: [k.changeAction("Nitro ring/Charge", 0)] }]), { key: "*" });
+      k.on(lapPop, when([{ if: `(${GAS} && ${crosses(STEP)}) || (${NITRO} && ${CAN} && ${crosses(NSTEP)})`, then: [k.changeAction("Lap banner/New", 0)] }]), { key: "*" });
+      k.on(passPop, when([{ if: `${mode.n} == 0 && ((upper($key) == "O" && ${pos.n} > 1) || (${NITRO} && ${CAN} && ${pos.n} > 1) || (${GAS} && min(${TOP}, ${speed.n} + ${ACC}) >= 250 && ${pos.n} > 2))`, then: [k.changeAction("Overtake pop/Show", 0)] }]), { key: "*" });
+      k.cues(hud, [{ layer: ["Position board", "Car status"], preset: "slide-in", at: 0, params: { direction: "left" }, stagger: { delay: 80 } }, { layer: "Speedometer", preset: "scale-in", at: 100 }, { layer: "Lap panel", preset: "drop-in", at: 150 }]);
+    }
+    {
+      label(k, pause, "Paused", "Heading 72", "chrome", 0, 230, { w: W, align: "CENTER", name: "Screen title", effects: [glow(k, "neon", 20, 0.8)] });
+      menu(k, pause, [
+        { label: "Resume", actions: [close()] },
+        { label: "Restart race", actions: [...resetRace, toCountdown] },
+        { label: "Settings", actions: [go(settings, "DISSOLVE", { duration: 300 })] },
+        { label: "Retire to menu", actions: [go(main, "DISSOLVE", { duration: 400 })] }
+      ], { focus: pauseFocus, x: 610, y: 380, width: 700, pitch: 88, style: "Menu 44", color: "onVoid", plate: k.tint("neon", 0.5), marker: { color: "amber" }, escape: [close()], radius: 4 });
+      readout(k, pause, `"LAP " + ${LAP} + " / " + ${laps.n} + "   \xB7   P" + round(${pos.n}) + "   \xB7   DAMAGE " + round(${damage.n}) + "%"`, "LAP 1 / 3   \xB7   P6   \xB7   DAMAGE 0%", "Hint 20", "dim", 0, 780, { w: W, align: "CENTER", name: "Run stats" });
+    }
+    {
+      dusk(results, { palms: true, lines: 6, sunR: 280 });
+      shade(results, 0.66);
+      readout(k, results, `${mode.n} == 1 ? "Time trial complete" : round(${pos.n}) == 1 ? "Victory lane" : "Checkered flag"`, "Checkered flag", "Heading 72", "chrome", 100, 60, { w: 1100, name: "Screen title", effects: [glow(k, "neon", 20, 0.8)] });
+      const place = `round(${pos.n})`;
+      readout(k, results, `${mode.n} == 1 ? "SOLO" : ${place} == 1 ? "1ST" : ${place} == 2 ? "2ND" : ${place} == 3 ? "3RD" : ${place} + "TH"`, "6TH", "Place 200", "amber", 100, 170, { w: 700, align: "LEFT", name: "Finish place" });
+      const pod = box(k, results, 100, 440, 900, 420, { name: "Podium" });
+      k.bindExpression(pod, "visible", `${mode.n} == 0`);
+      const steps = [[2, 0, 220], [1, 300, 300], [3, 600, 160]];
+      for (const [rank, x, h] of steps) {
+        const st = box(k, pod, x, 420 - h, 290, h, { name: "Podium step", fill: "panel", radius: 6, stroke: { color: rank === 1 ? "amber" : "line", width: 3 } });
+        label(k, st, String(rank), "Lap 48", rank === 1 ? "amber" : "onPanel", 0, 20, { w: 290, align: "CENTER", name: "Step rank" });
+        const who = `${place} == ${rank} ? ${driver.n} : (${rank} < ${place} ? "${RIVALS[rank - 1]}" : "${RIVALS[Math.max(0, rank - 2)]}")`;
+        readout(k, pod, who, RIVALS[rank - 1], "Board 20", "onVoid", x, 420 - h - 56, { w: 290, align: "CENTER", name: "Step name" });
+        const you = k.rect(pod, 290, 6, "neon", { name: "Your step", radius: 3, absolute: { x, y: 420 - h - 16 }, effects: [glow(k, "neon", 16)] });
+        k.bindExpression(you, "visible", `${place} == ${rank}`);
+      }
+      const tbl = box(k, results, 1100, 170, 720, 560, { name: "Results table", fill: k.tint("scrim", 0.9), radius: 6, stroke: { color: "line", width: 2 } });
+      label(k, tbl, "Classification", "Small 18", "cyan", 30, 22, { name: "Table title" });
+      const tp = 58, t0 = 64;
+      for (let r = 0; r < 8; r++) label(k, tbl, String(r + 1), "Board 20", "dim", 30, t0 + r * tp + 14, { w: 30, name: "Rank" });
+      RIVALS.forEach((name, i) => {
+        const rank = `(${i + 1} + clamp(${i + 2} - ${pos.n}, 0, 1))`;
+        const row = box(k, tbl, 76, t0 + i * tp, 614, tp - 6, { name: "Result row" });
+        k.bindExpression(row, "y", `${t0} + ${tp} * (${rank} - 1)`);
+        k.text(row, name, { style: "Board 20", color: "onPanel", width: 360, name: "Result name", absolute: { x: 12, y: 14 } });
+        readout(k, row, `clock(${finishTime.n} + (${rank} - round(${pos.n})) * 1370 + ${i * 97})`, "0:00.00", "Board 20", "dim", 380, 14, { w: 220, align: "RIGHT", name: "Result time" });
+      });
+      const meRow = box(k, tbl, 76, t0 + 5 * tp, 614, tp - 6, { name: "Your result", fill: "primary", radius: 4 });
+      k.bindExpression(meRow, "y", `${t0} + ${tp} * (${pos.n} - 1)`);
+      readout(k, meRow, driver.n, "ZEPHYR", "Board 20", "onPrimary", 12, 14, { w: 360, name: "Your name" });
+      readout(k, meRow, `clock(${finishTime.n})`, "0:00.00", "Board 20", "onPrimary", 380, 14, { w: 220, align: "RIGHT", name: "Your time" });
+      k.bindExpression(tbl, "visible", `${mode.n} == 0`);
+      const tb = box(k, results, 1100, 750, 720, 110, { name: "Your times", fill: k.tint("scrim", 0.9), radius: 6, stroke: { color: "line", width: 2 } });
+      label(k, tb, "Your time", "Small 18", "cyan", 30, 18, { name: "Time label" });
+      readout(k, tb, `clock(${finishTime.n})`, "0:00.00", "Stat 64", "onPanel", 30, 36, { w: 320, name: "Finish time" });
+      label(k, tb, "Circuit best", "Small 18", "cyan", 380, 18, { name: "Best label" });
+      readout(k, tb, `clock(${pick3(track.n, best.map((b) => b.n))})`, "0:41.25", "Value 26", "onPanel", 380, 56, { w: 310, name: "Circuit best" });
+      const rec = box(k, results, 560, 250, 480, 86, { name: "New record", fill: "amber", radius: 6, align: "CENTER", justify: "CENTER", effects: [glow(k, "amber", 40, 0.8)] });
+      k.text(rec, "New record", { style: "Record 52", color: "onAmber", autoWidth: true, name: "Record words" });
+      k.bindExpression(rec, "visible", `${record.n} == 1`);
+      k.patch(rec, { rotation: -4 });
+      drift(k, rec, "scaleX", 0.04, 1.2);
+      drift(k, rec, "scaleY", 0.04, 1.2);
+      menu(k, results, [
+        { label: "Race again", actions: [...resetRace, toCountdown] },
+        { label: "Garage", actions: [go(garage, "DISSOLVE", { duration: 400 })] },
+        { label: "Main menu", actions: [go(main, "DISSOLVE", { duration: 400 })] }
+      ], { focus: endFocus, x: 100, y: 890, width: 540, pitch: 40, itemHeight: 76, horizontal: true, style: "Menu 44", color: "onVoid", plate: k.tint("neon", 0.5), radius: 4, nudge: 0 });
+      k.cues(results, [{ layer: "Finish place", preset: "pop-in", at: 0 }, { layer: "Podium step", preset: "rise-in", at: 200, stagger: { delay: 120 } }, { layer: "Results table", preset: "slide-in", at: 300, params: { direction: "right" } }, { layer: "New record", preset: "pop-in", at: 900 }]);
+    }
+    {
+      dusk(wrecked, { palms: true, lines: 4, sunR: 200 });
+      k.rect(wrecked, W, H, [k.gradient({ from: "scrim", to: "bad", kind: "RADIAL", fromOpacity: 0.86, toOpacity: 0.5, handles: [{ x: 0.5, y: 0.45 }, { x: 1.1, y: 0.45 }, { x: 0.5, y: 1.2 }] })], { name: "Red wash", absolute: { x: 0, y: 0 } });
+      k.rect(wrecked, W, H, k.tint("scrim", 0.55), { name: "Shade", absolute: { x: 0, y: 0 } });
+      const cracks = box(k, wrecked, 0, 0, W, H, { name: "Windscreen cracks" });
+      const cp = [[[1500, 0], [1420, 160], [1470, 210], [1340, 360], [1380, 400], [1260, 520]], [[1420, 160], [1600, 260], [1700, 420]], [[0, 700], [200, 640], [260, 700], [460, 620]], [[1340, 360], [1180, 330]]];
+      cp.forEach((p) => poly(k, cracks, p, "chrome", { name: "Crack", stroke: 2, opacity: 0.6 }));
+      for (let i = 0; i < 6; i++) {
+        const p = k.ellipse(wrecked, 180 + i * 30, "smoke", { name: "Smoke", absolute: { x: 620 + i % 3 * 220, y: 780 }, opacity: 0.35, effects: [blurFx(30)] });
+        keys(k, p, "translateY", [{ t: 0, v: 60, ease: e("cubic-out") }, { t: 2200, v: -500 }]);
+        keys(k, p, "opacity", [{ t: 0, v: 0.3, ease: { kind: "linear" } }, { t: 2200, v: 0 }]);
+        k.behave(p, "translateY", [{ kind: "loop", mode: "cycle" }]);
+        k.behave(p, "opacity", [{ kind: "loop", mode: "cycle" }]);
+        if (i) k.delay(p, i * 300);
+      }
+      const lock = box(k, wrecked, 0, 250, W, 200, { name: "Wrecked lockup" });
+      const g = label(k, lock, "Wrecked", "Place 200", "bad", 0, 0, { w: W, align: "CENTER", name: "Wrecked glitch" });
+      k.behave(g, "translateX", [{ kind: "noise", amp: 12, freq: 6, seed: 5 }]);
+      label(k, lock, "Wrecked", "Place 200", "chrome", 0, 0, { w: W, align: "CENTER", name: "Wrecked title" });
+      const dnf = box(k, wrecked, 560, 500, 800, 60, { name: "DNF plate", fill: "bad", radius: 4, align: "CENTER", justify: "CENTER" });
+      k.text(dnf, "DNF \u2014 did not finish", { style: "Alert 30", color: "onAmber", autoWidth: true, name: "DNF words" });
+      readout(k, wrecked, `${driver.n} + " put the " + ${pick3(car.n, CARS.map((c) => `"${c.name}"`))} + " into the wall on lap " + ${LAP} + " of " + ${laps.n} + "."`, `ZEPHYR put the ${CARS[0].name} into the wall on lap 1 of 3.`, "Body 24", "onVoid", 0, 590, { w: W, align: "CENTER", name: "Wreck line" });
+      menu(k, wrecked, [
+        { label: "Retry race", actions: [...resetRace, toCountdown] },
+        { label: "Garage (repairs free)", actions: [go(garage, "DISSOLVE", { duration: 400 })] },
+        { label: "Main menu", actions: [go(main, "DISSOLVE", { duration: 400 })] }
+      ], { focus: wreckFocus, x: 560, y: 680, width: 800, pitch: 88, style: "Menu 44", color: "onVoid", plate: k.tint("bad", 0.45), marker: { color: "bad" }, radius: 4 });
+      k.cues(wrecked, [{ layer: "Wrecked lockup", preset: "shake", at: 0 }, { layer: "DNF plate", preset: "wipe-in", at: 400 }]);
+    }
+    void arcPoints;
+    return k.finish();
+  }
+});
+
+export {
+  neon_apex_racing_default
+};