From f331fb170e4e9e0b2ca34ce13250f4c30f09773d Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 7 Oct 2026 14:00:35 +1100
Subject: [PATCH] feat(registry): add game, chart and slides demos

The games, charts, and slides groups on /skills/demos were the thinnest,
with one or two demos each. This adds one demo to each group, from Skills
by authors who had no demo yet:

- cloudai-x/threejs-skills/threejs-interaction (game: Gullwick)
- larashero3-dotcom/lieflat-charts/lieflat-charts (chart: Sorrelwick)
- nextlevelbuilder/ui-ux-pro-max-skill/slides (slides: Cindergrove)
---
 layers/registry/server/data/skill-demos.json  |  93 +++
 .../threejs-interaction/game.html             | 519 ++++++++++++++++
 .../lieflat-charts/lieflat-charts/chart.html  | 152 +++++
 .../ui-ux-pro-max-skill/slides/deck.html      | 558 ++++++++++++++++++
 4 files changed, 1322 insertions(+)
 create mode 100644 layers/registry/server/demos/cloudai-x/threejs-skills/threejs-interaction/game.html
 create mode 100644 layers/registry/server/demos/larashero3-dotcom/lieflat-charts/lieflat-charts/chart.html
 create mode 100644 layers/registry/server/demos/nextlevelbuilder/ui-ux-pro-max-skill/slides/deck.html

diff --git a/layers/registry/server/data/skill-demos.json b/layers/registry/server/data/skill-demos.json
index 50858231..8117fdab 100644
--- a/layers/registry/server/data/skill-demos.json
+++ b/layers/registry/server/data/skill-demos.json
@@ -67,6 +67,37 @@
       "authorName": "Cathryn Lavery",
       "sourceUrl": "https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/SKILL.md"
     },
+    {
+      "owner": "cloudai-x",
+      "repo": "threejs-skills",
+      "name": "threejs-interaction",
+      "makes": "game",
+      "authorName": "CloudAI-X",
+      "sourceUrl": "https://github.com/CloudAI-X/threejs-skills/blob/main/skills/threejs-interaction/SKILL.md",
+      "prompt": "Make a tiny 3D arcade game called Gullwick: seagulls swoop down at a seaside chip stall, and you click or tap each gull to shoo it away before it steals a chip. The stall starts with 20 chips, and the round ends when they're gone. Don't stop to ask me questions; make the design calls yourself. Save it as one self-contained game.html with all CSS and JavaScript inline, loading Three.js from a CDN.",
+      "agent": "Claude Code",
+      "agentVersion": "2.1.292",
+      "model": "claude-opus-5-5",
+      "skillCommit": "945fb8dfd3bb1a0fc1193089ec740ab28bdcc9c5",
+      "recordedAt": "2026-10-07",
+      "outputFile": "game.html",
+      "shots": [
+        {
+          "file": "desktop-19f80a4d97.jpg",
+          "width": 1440,
+          "height": 900,
+          "viewport": "desktop",
+          "alt": "Desktop screenshot of the page the Agent built for: Make a tiny 3D arcade game called Gullwick: seagulls swoop down at a seaside chip stall, and you click or tap each gull "
+        },
+        {
+          "file": "mobile-e3d45a6a35.jpg",
+          "width": 390,
+          "height": 844,
+          "viewport": "mobile",
+          "alt": "Phone screenshot of the page the Agent built for: Make a tiny 3D arcade game called Gullwick: seagulls swoop down at a seaside chip stall, and you click or tap each gull "
+        }
+      ]
+    },
     {
       "owner": "elayadesign",
       "repo": "ai-design-skills",
@@ -328,6 +359,37 @@
       "authorName": "Jakub Krehel",
       "sourceUrl": "https://github.com/jakubkrehel/make-interfaces-feel-better/blob/main/skills/make-interfaces-feel-better/SKILL.md"
     },
+    {
+      "owner": "larashero3-dotcom",
+      "repo": "lieflat-charts",
+      "name": "lieflat-charts",
+      "makes": "chart",
+      "authorName": null,
+      "sourceUrl": "https://github.com/larashero3-dotcom/lieflat-charts/blob/main/SKILL.md",
+      "prompt": "Make chart.html, one self-contained page with all CSS and JavaScript inline. Sorrelwick, a fictional bakery chain, moved its baking to dawn in May. Average minutes a loaf waited on the rack before it sold, April vs June 2026: Harbour 74 to 31, Mill Lane 58 to 40, Station 92 to 35, Green 47 to 44, Quayside 81 to 29, Abbey 66 to 52. Which shops did the dawn bake help? Write all text in English, and don't stop to ask me questions; make the design calls yourself.",
+      "agent": "Claude Code",
+      "agentVersion": "2.1.292",
+      "model": "claude-opus-5-5",
+      "skillCommit": "dd3dc9615aebb10bfeb280d22877f08d23e36a88",
+      "recordedAt": "2026-10-07",
+      "outputFile": "chart.html",
+      "shots": [
+        {
+          "file": "desktop-82dd6b3fbb.jpg",
+          "width": 1440,
+          "height": 900,
+          "viewport": "desktop",
+          "alt": "Desktop screenshot of the page the Agent built for: Make chart.html, one self-contained page with all CSS and JavaScript inline. Sorrelwick, a fictional bakery chain, moved"
+        },
+        {
+          "file": "mobile-465aab745c.jpg",
+          "width": 390,
+          "height": 844,
+          "viewport": "mobile",
+          "alt": "Phone screenshot of the page the Agent built for: Make chart.html, one self-contained page with all CSS and JavaScript inline. Sorrelwick, a fictional bakery chain, moved"
+        }
+      ]
+    },
     {
       "owner": "latent-spaces",
       "repo": "brag",
@@ -430,6 +492,37 @@
         }
       ]
     },
+    {
+      "owner": "nextlevelbuilder",
+      "repo": "ui-ux-pro-max-skill",
+      "name": "slides",
+      "makes": "slides",
+      "authorName": "Next Level Builder",
+      "sourceUrl": "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/slides/SKILL.md",
+      "prompt": "Make an 8-slide seed pitch deck for Cindergrove, a fictional company that rents wood-fired pizza ovens by the weekend, where arrow keys or clicks advance the slides. Weekend bookings grew from 40 in January to 610 in September 2026. Don't stop to ask me questions; make the design calls yourself. Save it as one self-contained deck.html with all CSS and JavaScript inline; a chart library from a CDN is fine.",
+      "agent": "Claude Code",
+      "agentVersion": "2.1.292",
+      "model": "claude-opus-5-5",
+      "skillCommit": "91c193ac059b487d13ce535c7015b021eb71c841",
+      "recordedAt": "2026-10-07",
+      "outputFile": "deck.html",
+      "shots": [
+        {
+          "file": "desktop-d0a850bd78.jpg",
+          "width": 1440,
+          "height": 900,
+          "viewport": "desktop",
+          "alt": "Desktop screenshot of the page the Agent built for: Make an 8-slide seed pitch deck for Cindergrove, a fictional company that rents wood-fired pizza ovens by the weekend, w"
+        },
+        {
+          "file": "mobile-750a76b933.jpg",
+          "width": 390,
+          "height": 844,
+          "viewport": "mobile",
+          "alt": "Phone screenshot of the page the Agent built for: Make an 8-slide seed pitch deck for Cindergrove, a fictional company that rents wood-fired pizza ovens by the weekend, w"
+        }
+      ]
+    },
     {
       "owner": "ntcoding",
       "repo": "claude-skillz",
diff --git a/layers/registry/server/demos/cloudai-x/threejs-skills/threejs-interaction/game.html b/layers/registry/server/demos/cloudai-x/threejs-skills/threejs-interaction/game.html
new file mode 100644
index 00000000..e8ff9c2a
--- /dev/null
+++ b/layers/registry/server/demos/cloudai-x/threejs-skills/threejs-interaction/game.html
@@ -0,0 +1,519 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+<title>Gullwick</title>
+<style>
+  html, body { margin: 0; height: 100%; overflow: hidden; background: #8fd3ff; font-family: "Trebuchet MS", system-ui, sans-serif; user-select: none; -webkit-user-select: none; }
+  canvas { display: block; touch-action: none; cursor: crosshair; }
+  #hud { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 12px 16px; pointer-events: none; color: #fff; font-weight: bold; font-size: clamp(16px, 4vw, 24px); text-shadow: 0 2px 0 #1b4f72, 0 0 6px rgba(0,0,0,.3); }
+  #hud .chips { color: #ffe066; }
+  .panel { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10, 50, 80, .45); }
+  .panel.hidden { display: none; }
+  .card { background: #fffaf0; border: 4px solid #d6453d; border-radius: 16px; padding: 24px 28px; max-width: 340px; text-align: center; color: #333; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
+  .card h1 { margin: 0 0 6px; font-size: 42px; color: #d6453d; letter-spacing: 1px; }
+  .card p { margin: 8px 0; line-height: 1.4; }
+  .card .big { font-size: 22px; font-weight: bold; }
+  button { margin-top: 12px; font: inherit; font-size: 20px; font-weight: bold; color: #fff; background: #2e86c1; border: 0; border-radius: 10px; padding: 10px 28px; cursor: pointer; box-shadow: 0 4px 0 #1b4f72; }
+  button:active { transform: translateY(2px); box-shadow: 0 2px 0 #1b4f72; }
+</style>
+</head>
+<body>
+<div id="hud">
+  <span class="chips">🍟 <span id="chips">20</span></span>
+  <span>Shooed: <span id="score">0</span></span>
+  <span id="time">0.0s</span>
+</div>
+
+<div id="start" class="panel">
+  <div class="card">
+    <h1>Gullwick</h1>
+    <p>The gulls are after your chips!</p>
+    <p>Click or tap each seagull to shoo it before it reaches the stall. Big gulls take two taps.</p>
+    <p>You've got <b>20 chips</b>. When they're gone, so is your stall.</p>
+    <button id="startBtn">Open the stall</button>
+  </div>
+</div>
+
+<div id="over" class="panel hidden">
+  <div class="card">
+    <h1>Picked clean!</h1>
+    <p class="big">Shooed <span id="finalScore">0</span> gulls</p>
+    <p>Held out for <span id="finalTime">0</span>s</p>
+    <p id="best"></p>
+    <button id="againBtn">Fry another batch</button>
+  </div>
+</div>
+
+<script type="importmap">
+{ "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js" } }
+</script>
+<script type="module">
+import * as THREE from "three";
+
+const START_CHIPS = 20;
+
+// ---------- Renderer / scene / camera ----------
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.shadowMap.enabled = true;
+document.body.prepend(renderer.domElement);
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x8fd3ff);
+scene.fog = new THREE.Fog(0x8fd3ff, 25, 60);
+
+const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 200);
+const camTarget = new THREE.Vector3(0, 1.8, 0);
+function fitCamera() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  // Pull back on narrow (portrait) screens so the whole stall and sky fit.
+  const dist = camera.aspect < 1 ? 9 + (1 - camera.aspect) * 9 : 9;
+  camera.position.set(0, 3.4, dist);
+  camera.lookAt(camTarget);
+  camera.updateProjectionMatrix();
+}
+fitCamera();
+
+scene.add(new THREE.HemisphereLight(0xdff4ff, 0xe8c99a, 1.1));
+const sun = new THREE.DirectionalLight(0xffffff, 1.6);
+sun.position.set(6, 12, 8);
+sun.castShadow = true;
+sun.shadow.mapSize.set(1024, 1024);
+Object.assign(sun.shadow.camera, { left: -8, right: 8, top: 8, bottom: -8 });
+scene.add(sun);
+
+// ---------- Seaside ----------
+const sand = new THREE.Mesh(new THREE.PlaneGeometry(80, 40), new THREE.MeshLambertMaterial({ color: 0xf1d9a5 }));
+sand.rotation.x = -Math.PI / 2;
+sand.position.z = 6;
+sand.receiveShadow = true;
+scene.add(sand);
+
+const seaMat = new THREE.MeshLambertMaterial({ color: 0x2f8fc4 });
+const sea = new THREE.Mesh(new THREE.PlaneGeometry(200, 80, 60, 20), seaMat);
+sea.rotation.x = -Math.PI / 2;
+sea.position.set(0, 0.05, -54);
+scene.add(sea);
+const seaPos = sea.geometry.attributes.position;
+const seaBase = Float32Array.from(seaPos.array);
+
+// Promenade railing behind the stall
+const railMat = new THREE.MeshLambertMaterial({ color: 0x2c6e8f });
+for (let x = -20; x <= 20; x += 2) {
+  const post = new THREE.Mesh(new THREE.BoxGeometry(0.12, 1, 0.12), railMat);
+  post.position.set(x, 0.5, -6);
+  scene.add(post);
+}
+const rail = new THREE.Mesh(new THREE.BoxGeometry(42, 0.12, 0.12), railMat);
+rail.position.set(0, 1, -6);
+scene.add(rail);
+
+// Clouds
+const cloudMat = new THREE.MeshLambertMaterial({ color: 0xffffff });
+const clouds = [];
+for (let i = 0; i < 6; i++) {
+  const c = new THREE.Group();
+  for (let j = 0; j < 4; j++) {
+    const puff = new THREE.Mesh(new THREE.SphereGeometry(1 + Math.random() * 0.8, 10, 8), cloudMat);
+    puff.position.set(j * 1.3 - 2, Math.random() * 0.5, Math.random() * 0.5);
+    c.add(puff);
+  }
+  c.position.set(-30 + i * 12, 11 + Math.random() * 4, -25 - Math.random() * 10);
+  scene.add(c);
+  clouds.push(c);
+}
+
+// ---------- Chip stall ----------
+const stall = new THREE.Group();
+scene.add(stall);
+
+const woodMat = new THREE.MeshLambertMaterial({ color: 0x5dade2 });
+const trimMat = new THREE.MeshLambertMaterial({ color: 0xffffff });
+const counter = new THREE.Mesh(new THREE.BoxGeometry(4.2, 1.1, 1.6), woodMat);
+counter.position.y = 0.55;
+counter.castShadow = counter.receiveShadow = true;
+stall.add(counter);
+const top = new THREE.Mesh(new THREE.BoxGeometry(4.4, 0.1, 1.8), trimMat);
+top.position.y = 1.15;
+top.receiveShadow = true;
+stall.add(top);
+
+// Back wall with sign
+const back = new THREE.Mesh(new THREE.BoxGeometry(4.2, 2.6, 0.15), woodMat);
+back.position.set(0, 1.3, -0.9);
+stall.add(back);
+
+function makeSignTexture() {
+  const c = document.createElement("canvas");
+  c.width = 512; c.height = 128;
+  const g = c.getContext("2d");
+  g.fillStyle = "#fffaf0"; g.fillRect(0, 0, 512, 128);
+  g.fillStyle = "#d6453d"; g.font = "bold 72px Trebuchet MS, sans-serif";
+  g.textAlign = "center"; g.textBaseline = "middle";
+  g.fillText("GULLWICK CHIPS", 256, 68);
+  const t = new THREE.CanvasTexture(c);
+  t.colorSpace = THREE.SRGBColorSpace;
+  return t;
+}
+const sign = new THREE.Mesh(new THREE.PlaneGeometry(3.6, 0.9), new THREE.MeshBasicMaterial({ map: makeSignTexture() }));
+sign.position.set(0, 2.15, -0.81);
+stall.add(sign);
+
+// Striped awning
+function makeStripeTexture() {
+  const c = document.createElement("canvas");
+  c.width = 256; c.height = 8;
+  const g = c.getContext("2d");
+  for (let i = 0; i < 8; i++) { g.fillStyle = i % 2 ? "#ffffff" : "#d6453d"; g.fillRect(i * 32, 0, 32, 8); }
+  const t = new THREE.CanvasTexture(c);
+  t.colorSpace = THREE.SRGBColorSpace;
+  return t;
+}
+const awning = new THREE.Mesh(new THREE.BoxGeometry(4.6, 0.08, 1.2), new THREE.MeshLambertMaterial({ map: makeStripeTexture() }));
+awning.position.set(0, 2.95, -0.35);
+awning.rotation.x = 0.35;
+awning.castShadow = true;
+stall.add(awning);
+
+// Chip tray + chips
+const trayMat = new THREE.MeshLambertMaterial({ color: 0xffffff });
+const tray = new THREE.Mesh(new THREE.BoxGeometry(1.4, 0.12, 0.9), trayMat);
+tray.position.set(0, 1.26, 0.2);
+tray.castShadow = true;
+stall.add(tray);
+const trayTarget = new THREE.Vector3(0, 1.5, 0.2);
+
+const chipGeo = new THREE.BoxGeometry(0.07, 0.07, 0.42);
+const chipMat = new THREE.MeshLambertMaterial({ color: 0xf7c948 });
+const chips = [];
+function buildChips() {
+  chips.forEach(c => stall.remove(c));
+  chips.length = 0;
+  for (let i = 0; i < START_CHIPS; i++) {
+    const chip = new THREE.Mesh(chipGeo, chipMat);
+    // Rough mound: lower layers wide, upper layers narrow.
+    const layer = i < 10 ? 0 : i < 16 ? 1 : 2;
+    const spread = [0.5, 0.35, 0.18][layer];
+    chip.position.set((Math.random() - 0.5) * spread * 2, 1.36 + layer * 0.07, 0.2 + (Math.random() - 0.5) * spread);
+    chip.rotation.set((Math.random() - 0.5) * 0.4, Math.random() * Math.PI, (Math.random() - 0.5) * 0.4);
+    chip.castShadow = true;
+    stall.add(chip);
+    chips.push(chip);
+  }
+}
+
+// ---------- Gulls ----------
+const gullWhite = new THREE.MeshLambertMaterial({ color: 0xffffff });
+const gullGrey = new THREE.MeshLambertMaterial({ color: 0xaab7c4 });
+const gullTip = new THREE.MeshLambertMaterial({ color: 0x222222 });
+const beakMat = new THREE.MeshLambertMaterial({ color: 0xf5b700 });
+const eyeMat = new THREE.MeshBasicMaterial({ color: 0x000000 });
+const hitMat = new THREE.MeshBasicMaterial({ visible: false });
+
+function makeWing(side) {
+  const pivot = new THREE.Group();
+  const wing = new THREE.Mesh(new THREE.BoxGeometry(0.9, 0.04, 0.38), gullGrey);
+  wing.position.x = side * 0.45;
+  const tip = new THREE.Mesh(new THREE.BoxGeometry(0.25, 0.045, 0.3), gullTip);
+  tip.position.x = side * 0.95;
+  wing.castShadow = true;
+  pivot.add(wing, tip);
+  return pivot;
+}
+
+function makeGull(big) {
+  const g = new THREE.Group();
+  const body = new THREE.Mesh(new THREE.SphereGeometry(0.22, 12, 10), gullWhite);
+  body.scale.set(1, 0.85, 1.9);
+  body.castShadow = true;
+  const head = new THREE.Mesh(new THREE.SphereGeometry(0.16, 12, 10), gullWhite);
+  head.position.set(0, 0.1, 0.42);
+  const beak = new THREE.Mesh(new THREE.ConeGeometry(0.05, 0.22, 6), beakMat);
+  beak.rotation.x = Math.PI / 2;
+  beak.position.set(0, 0.07, 0.62);
+  const eyeL = new THREE.Mesh(new THREE.SphereGeometry(0.025, 6, 6), eyeMat);
+  eyeL.position.set(0.1, 0.15, 0.5);
+  const eyeR = eyeL.clone(); eyeR.position.x = -0.1;
+  const tail = new THREE.Mesh(new THREE.BoxGeometry(0.22, 0.04, 0.25), gullGrey);
+  tail.position.set(0, 0.02, -0.45);
+  const wingL = makeWing(1), wingR = makeWing(-1);
+  wingL.position.set(0.12, 0.08, 0.02);
+  wingR.position.set(-0.12, 0.08, 0.02);
+  // Generous invisible hitbox so fast gulls are fair to tap (bigger on touch screens).
+  const hitR = (matchMedia("(pointer: coarse)").matches ? 1.0 : 0.8);
+  const hitbox = new THREE.Mesh(new THREE.SphereGeometry(hitR, 8, 6), hitMat);
+  g.add(body, head, beak, eyeL, eyeR, tail, wingL, wingR, hitbox);
+  if (big) g.scale.setScalar(1.45);
+  g.userData = { wingL, wingR, hitbox, body };
+  return g;
+}
+
+// ---------- Game state ----------
+const gulls = [];        // active gull records
+const clickables = [];   // hitbox meshes
+const feathers = [];
+let state = "menu";      // menu | playing | over
+let chipsLeft = START_CHIPS, score = 0, elapsed = 0, spawnTimer = 0;
+let shake = 0;
+
+const $ = id => document.getElementById(id);
+const hudChips = $("chips"), hudScore = $("score"), hudTime = $("time");
+
+function bezier(a, b, c, t, out) {
+  const u = 1 - t;
+  return out.set(
+    u * u * a.x + 2 * u * t * b.x + t * t * c.x,
+    u * u * a.y + 2 * u * t * b.y + t * t * c.y,
+    u * u * a.z + 2 * u * t * b.z + t * t * c.z,
+  );
+}
+
+function spawnGull() {
+  const big = elapsed > 20 && Math.random() < 0.18;
+  const mesh = makeGull(big);
+  const side = Math.random() < 0.5 ? -1 : 1;
+  const start = new THREE.Vector3(side * (9 + Math.random() * 5), 6 + Math.random() * 4, -3 + Math.random() * 6);
+  // Control point: swoop low across the front of the stall before pulling up to the tray.
+  const ctrl = new THREE.Vector3(side * (1 + Math.random() * 3), 0.6 + Math.random() * 2.5, 2 + Math.random() * 3);
+  const end = trayTarget.clone().add(new THREE.Vector3((Math.random() - 0.5) * 0.6, 0, 0));
+  // Gulls get faster as the round goes on.
+  const duration = Math.max(1.9, 4.6 - elapsed * 0.035) * (big ? 1.25 : 1) * (0.85 + Math.random() * 0.3);
+  mesh.position.copy(start);
+  scene.add(mesh);
+  const gull = { mesh, start, ctrl, end, t: 0, duration, mode: "approach", hp: big ? 2 : 1, vel: new THREE.Vector3(), flap: Math.random() * 6, life: 0, carrying: null, flash: 0 };
+  mesh.userData.hitbox.userData.gull = gull;
+  clickables.push(mesh.userData.hitbox);
+  gulls.push(gull);
+}
+
+function removeClickable(gull) {
+  const i = clickables.indexOf(gull.mesh.userData.hitbox);
+  if (i >= 0) clickables.splice(i, 1);
+}
+
+function shoo(gull, hitPoint) {
+  gull.hp--;
+  puffFeathers(hitPoint, gull.hp > 0 ? 4 : 10);
+  sfx.shoo();
+  if (gull.hp > 0) {
+    // Big gull flinches and loses some progress, but keeps coming.
+    gull.flash = 0.25;
+    gull.t = Math.max(0, gull.t - 0.25);
+    return;
+  }
+  removeClickable(gull);
+  gull.mode = "flee";
+  const away = gull.mesh.position.clone().sub(trayTarget).setY(0).normalize();
+  if (!isFinite(away.x)) away.set(1, 0, 0);
+  gull.vel.copy(away.multiplyScalar(7)).add(new THREE.Vector3(0, 6, -2));
+  score++;
+  hudScore.textContent = score;
+}
+
+function stealChip(gull) {
+  removeClickable(gull);
+  gull.mode = "escape";
+  if (chipsLeft > 0) {
+    chipsLeft--;
+    hudChips.textContent = chipsLeft;
+    const chip = chips.pop();
+    stall.remove(chip);
+    chip.position.set(0, -0.05, 0.62);
+    chip.rotation.set(0, Math.PI / 2, 0);
+    gull.mesh.add(chip);
+    gull.carrying = chip;
+    sfx.squawk();
+    shake = 0.25;
+  }
+  const side = gull.mesh.position.x >= 0 ? 1 : -1;
+  gull.vel.set(side * (3 + Math.random() * 2), 5, -6);
+  if (chipsLeft === 0 && state === "playing") endGame();
+}
+
+// ---------- Feathers ----------
+const featherGeo = new THREE.PlaneGeometry(0.12, 0.05);
+const featherMat = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide, transparent: true });
+function puffFeathers(p, n) {
+  for (let i = 0; i < n; i++) {
+    const f = new THREE.Mesh(featherGeo, featherMat.clone());
+    f.position.copy(p);
+    f.userData = { vel: new THREE.Vector3((Math.random() - 0.5) * 4, Math.random() * 3, (Math.random() - 0.5) * 4), spin: new THREE.Vector3(Math.random() * 8, Math.random() * 8, Math.random() * 8), life: 1.2 };
+    scene.add(f);
+    feathers.push(f);
+  }
+}
+
+// ---------- Audio (tiny WebAudio blips, no assets) ----------
+let actx = null;
+function tone(f0, f1, dur, type, vol) {
+  if (!actx) return;
+  const o = actx.createOscillator(), g = actx.createGain(), t = actx.currentTime;
+  o.type = type;
+  o.frequency.setValueAtTime(f0, t);
+  o.frequency.exponentialRampToValueAtTime(f1, t + dur);
+  g.gain.setValueAtTime(vol, t);
+  g.gain.exponentialRampToValueAtTime(0.001, t + dur);
+  o.connect(g).connect(actx.destination);
+  o.start(t); o.stop(t + dur);
+}
+const sfx = {
+  shoo: () => tone(500, 1400, 0.12, "triangle", 0.15),
+  squawk: () => { tone(900, 500, 0.15, "sawtooth", 0.08); setTimeout(() => tone(1000, 600, 0.18, "sawtooth", 0.08), 120); },
+  miss: () => tone(200, 120, 0.06, "sine", 0.06),
+};
+
+// ---------- Input: raycast against gull hitboxes ----------
+const raycaster = new THREE.Raycaster();
+const pointer = new THREE.Vector2();
+
+function onPointerDown(event) {
+  if (state !== "playing") return;
+  event.preventDefault();
+  const rect = renderer.domElement.getBoundingClientRect();
+  pointer.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+  pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+  raycaster.setFromCamera(pointer, camera);
+  const hits = raycaster.intersectObjects(clickables, false);
+  if (hits.length > 0) shoo(hits[0].object.userData.gull, hits[0].point);
+  else sfx.miss();
+}
+// pointerdown covers mouse, pen and touch in one handler.
+renderer.domElement.addEventListener("pointerdown", onPointerDown);
+
+// ---------- Round flow ----------
+function clearGulls() {
+  gulls.forEach(g => scene.remove(g.mesh));
+  gulls.length = 0;
+  clickables.length = 0;
+  feathers.forEach(f => scene.remove(f));
+  feathers.length = 0;
+}
+
+function startGame() {
+  if (!actx) { try { actx = new (window.AudioContext || window.webkitAudioContext)(); } catch { actx = null; } }
+  actx?.resume?.();
+  clearGulls();
+  buildChips();
+  chipsLeft = START_CHIPS; score = 0; elapsed = 0; spawnTimer = 0.6;
+  hudChips.textContent = chipsLeft; hudScore.textContent = 0; hudTime.textContent = "0.0s";
+  $("start").classList.add("hidden");
+  $("over").classList.add("hidden");
+  state = "playing";
+}
+
+function endGame() {
+  state = "over";
+  const best = Math.max(score, +localStorage.getItem("gullwick-best") || 0);
+  localStorage.setItem("gullwick-best", best);
+  $("finalScore").textContent = score;
+  $("finalTime").textContent = elapsed.toFixed(1);
+  $("best").textContent = score >= best && score > 0 ? "New best!" : `Best: ${best} gulls`;
+  // Let the last thief fly off before showing the card.
+  setTimeout(() => { if (state === "over") $("over").classList.remove("hidden"); }, 1200);
+}
+
+$("startBtn").addEventListener("click", startGame);
+$("againBtn").addEventListener("click", startGame);
+
+// ---------- Loop ----------
+const clock = new THREE.Clock();
+const tmp = new THREE.Vector3(), ahead = new THREE.Vector3();
+
+function updateGulls(dt) {
+  for (let i = gulls.length - 1; i >= 0; i--) {
+    const g = gulls[i];
+    const m = g.mesh;
+    g.life += dt;
+    let flapSpeed = 14;
+
+    if (g.mode === "approach") {
+      g.t += dt / g.duration;
+      if (g.t >= 1) { m.position.copy(g.end); stealChip(g); continue; }
+      bezier(g.start, g.ctrl, g.end, g.t, m.position);
+      bezier(g.start, g.ctrl, g.end, Math.min(1, g.t + 0.02), ahead);
+      if (ahead.distanceToSquared(m.position) > 1e-6) m.lookAt(ahead);
+      flapSpeed = g.t > 0.75 ? 22 : 12; // frantic flapping on the final lunge
+    } else {
+      g.vel.y += (g.mode === "flee" ? 2 : 1) * dt;
+      m.position.addScaledVector(g.vel, dt);
+      m.lookAt(tmp.copy(m.position).add(g.vel));
+      if (g.mode === "flee") m.rotateZ(Math.sin(g.life * 20) * 0.4);
+      flapSpeed = 26;
+      if (m.position.y > 16 || Math.abs(m.position.x) > 25 || m.position.z < -30) {
+        scene.remove(m);
+        gulls.splice(i, 1);
+        continue;
+      }
+    }
+
+    g.flap += dt * flapSpeed;
+    const a = Math.sin(g.flap) * 0.7;
+    m.userData.wingL.rotation.z = a;
+    m.userData.wingR.rotation.z = -a;
+
+    if (g.flash > 0) {
+      g.flash -= dt;
+      m.userData.body.material = g.flash > 0 ? beakMat : gullWhite;
+    }
+  }
+}
+
+function animate() {
+  requestAnimationFrame(animate);
+  const dt = Math.min(clock.getDelta(), 0.05);
+  const t = clock.elapsedTime;
+
+  if (state === "playing") {
+    elapsed += dt;
+    hudTime.textContent = elapsed.toFixed(1) + "s";
+    spawnTimer -= dt;
+    if (spawnTimer <= 0) {
+      spawnGull();
+      // Spawn interval tightens from ~1.9s down to ~0.55s.
+      const base = Math.max(0.55, 1.9 - elapsed * 0.025);
+      spawnTimer = base * (0.7 + Math.random() * 0.6);
+    }
+  }
+  updateGulls(dt);
+
+  for (let i = feathers.length - 1; i >= 0; i--) {
+    const f = feathers[i], u = f.userData;
+    u.life -= dt;
+    u.vel.y -= 4 * dt;
+    u.vel.multiplyScalar(0.96);
+    f.position.addScaledVector(u.vel, dt);
+    f.rotation.x += u.spin.x * dt; f.rotation.y += u.spin.y * dt;
+    f.material.opacity = Math.max(0, u.life);
+    if (u.life <= 0) { scene.remove(f); feathers.splice(i, 1); }
+  }
+
+  // Gentle waves
+  for (let i = 0; i < seaPos.count; i++) {
+    const x = seaBase[i * 3], y = seaBase[i * 3 + 1];
+    seaPos.array[i * 3 + 2] = Math.sin(x * 0.3 + t * 1.2) * 0.15 + Math.cos(y * 0.4 + t) * 0.12;
+  }
+  seaPos.needsUpdate = true;
+  clouds.forEach((c, i) => { c.position.x += dt * (0.3 + i * 0.05); if (c.position.x > 40) c.position.x = -40; });
+
+  // Small camera shake when a chip is stolen
+  if (shake > 0) {
+    shake -= dt;
+    camera.position.x = (Math.random() - 0.5) * shake * 0.6;
+  } else camera.position.x = 0;
+
+  renderer.render(scene, camera);
+}
+
+buildChips();
+animate();
+
+window.addEventListener("resize", () => {
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  fitCamera();
+});
+</script>
+</body>
+</html>
diff --git a/layers/registry/server/demos/larashero3-dotcom/lieflat-charts/lieflat-charts/chart.html b/layers/registry/server/demos/larashero3-dotcom/lieflat-charts/lieflat-charts/chart.html
new file mode 100644
index 00000000..18e0f0de
--- /dev/null
+++ b/layers/registry/server/demos/larashero3-dotcom/lieflat-charts/lieflat-charts/chart.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Sorrelwick — Did the dawn bake help?</title>
+<style>
+  :root{--bg:#F0EFEB;--dark:#1C1C1A;--ink:#1C1C1A;--muted:#8F8E88;--faint:#C6C5BF;--grid:#DEDDD6}
+  *{margin:0;padding:0;box-sizing:border-box}
+  body{background:var(--bg);font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--ink);padding:40px;-webkit-font-smoothing:antialiased}
+  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1000px;margin:0 auto}
+  .card{background:var(--bg);border-radius:24px;padding:28px 28px 20px}
+  .card.wide{grid-column:1/-1}
+  h2{font-weight:700;font-size:19px;letter-spacing:-.02em;margin-bottom:3px}
+  .sub{font-size:11.5px;color:var(--muted);margin-bottom:14px;line-height:1.5}
+  .src{font-size:9.5px;color:var(--faint);margin-top:10px;letter-spacing:.08em;font-weight:500}
+  .note{font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.6;max-width:720px}
+  .note b{color:var(--ink);font-weight:700}
+  svg{width:100%;display:block;margin:0 auto}
+  svg text{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
+  .pop{transform-box:fill-box;transform-origin:center;animation:pop .5s cubic-bezier(.2,.7,.3,1.3) both}
+  @keyframes pop{from{transform:scale(0)}to{transform:none}}
+  .fade{animation:fade .9s ease both}
+  @keyframes fade{from{opacity:0}}
+  .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s cubic-bezier(.4,0,.2,1) both}
+  @keyframes draw{to{stroke-dashoffset:0}}
+  @media (prefers-reduced-motion:reduce){
+    .pop,.fade{animation:none}
+    .draw{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
+  }
+  @media (max-width:640px){body{padding:16px}.card{padding:20px 14px 16px}}
+</style>
+</head>
+<body>
+<div class="grid2">
+  <div class="card wide">
+    <h2>Dawn baking cleared the racks at Station, Quayside and Harbour; Green barely moved</h2>
+    <div class="sub">Average minutes a loaf waited on the rack before it sold, per shop · hollow dot = April 2026 (before) · ink dot = June 2026 (after the May switch to dawn baking) · one bead = one minute saved</div>
+    <svg id="dumbbell" viewBox="0 0 800 380" preserveAspectRatio="xMidYMid meet" role="img"
+      aria-label="Rack wait per shop, April to June 2026. Station 92 to 35 minutes, Quayside 81 to 29, Harbour 74 to 31, Mill Lane 58 to 40, Abbey 66 to 52, Green 47 to 44."></svg>
+    <p class="note"><b>Clear help:</b> Station (−57 min), Quayside (−52) and Harbour (−43). Each cut its wait by more than half.
+      <b>Some help:</b> Mill Lane (−18) and Abbey (−14). <b>No real change:</b> Green (−3).
+      These are shop averages from two months, so the chart shows what changed after the switch. It can't rule out other causes, such as seasonal footfall.</p>
+    <div class="src">DUMBBELL QUEUE · SORRELWICK BAKERIES (FICTIONAL) · RACK WAIT, APR VS JUN 2026</div>
+  </div>
+</div>
+<script>
+/* ═══ MONO TOKENS (inlined from lieflat-charts mono-tokens.js) ═══ */
+(function (global) {
+  'use strict';
+  const INK   = '#1C1C1A';
+  const PAPER = '#F0EFEB';
+  const MUTED = '#8F8E88';
+  const FAINT = '#C6C5BF';
+  const GRID  = '#DEDDD6';
+  const L   = ['#1C1C1A', '#4A4944', '#6A6963', '#8F8E88', '#B0AFA9', '#C6C5BF', '#D8D7D1'];
+  const rnd = (i, k) => Math.abs(((i * 73856093) ^ (k * 19349663)) % 1000) / 1000;
+  const NS = 'http://www.w3.org/2000/svg';
+  const el  = (p, t, a) => { const n = document.createElementNS(NS, t);
+    for (const k in a) n.setAttribute(k, a[k]); p.appendChild(n); return n; };
+  const txt = (p, a, s) => { const n = el(p, 'text', a); n.textContent = s; return n; };
+  const tip = (n, s) => { const t = document.createElementNS(NS, 'title');
+    t.textContent = s; n.appendChild(t); };
+  const timers = {};
+  const keep = (id, t) => { (timers[id] = timers[id] || []).push(t); };
+  const obsReveal = (id, fn) => {
+    const n = document.getElementById(id);
+    const go = () => {
+      (timers[id] || []).forEach(clearInterval); timers[id] = [];
+      if (n.tagName === 'svg' || n.tagName === 'SVG') n.innerHTML = '';
+      fn(n);
+    };
+    const io = new IntersectionObserver(es => {
+      if (es[0].isIntersecting) { go(); io.disconnect(); }
+    }, { threshold: .3 });
+    io.observe(n);
+    n.style.cursor = 'pointer';
+    n.addEventListener('click', go);
+  };
+  global.MONO = { INK, PAPER, MUTED, FAINT, GRID, L, rnd, el, txt, tip, obsReveal, keep };
+})(window);
+
+// ── Data (edit here) · [shop, April minutes, June minutes] ──
+const DATA = [
+  ['Harbour',   74, 31],
+  ['Mill Lane', 58, 40],
+  ['Station',   92, 35],
+  ['Green',     47, 44],
+  ['Quayside',  81, 29],
+  ['Abbey',     66, 52],
+];
+
+// ════ C8 · dumbbell queue ════
+// Hollow dot = April, ink dot = June. Beads on the track = minutes saved, one each.
+// Rows sorted by minutes saved; bead shade steps down with the size of the help.
+(()=>{
+const {INK,PAPER,MUTED,L,rnd,el,txt,tip,obsReveal}=MONO;
+const D=DATA.map(([name,was,now])=>[name,was,now,was-now]).sort((a,b)=>b[3]-a[3]);
+const verdict=d=>d>=40?['CLEAR HELP',L[1]]:d>=10?['SOME HELP',L[3]]:['NO REAL CHANGE',L[4]];
+obsReveal('dumbbell',s=>{
+  const y0=i=>58+i*46,X0=150,X1=630,V0=20,V1=100,mapX=v=>X0+(v-V0)/(V1-V0)*(X1-X0);
+  const base=y0(D.length-1)+28;
+  // minute guides every 10, labelled every 20
+  for(let v=V0;v<=V1;v+=10){
+    el(s,'line',{x1:mapX(v),y1:y0(0)-24,x2:mapX(v),y2:base,stroke:'#E3E2DB','stroke-width':.6,
+      'stroke-dasharray':v%20?'1 3':'none',class:'fade'});
+    if(v%20===0)txt(s,{x:mapX(v),y:base+16,'font-size':8,'font-weight':600,fill:'#B0AFA9',
+      'text-anchor':'middle',class:'fade'},v);
+  }
+  txt(s,{x:X0-6,y:base+32,'font-size':7.5,'font-weight':600,fill:'#C6C5BF','letter-spacing':'.08em',
+    class:'fade'},'← SELLS FASTER');
+  txt(s,{x:X1+6,y:base+32,'font-size':7.5,'font-weight':600,fill:'#C6C5BF','text-anchor':'end',
+    'letter-spacing':'.08em',class:'fade'},'MINUTES ON THE RACK');
+  txt(s,{x:768,y:y0(0)-28,'font-size':7.5,'font-weight':700,fill:'#B0AFA9','text-anchor':'end',
+    'letter-spacing':'.1em',class:'fade'},'SAVED');
+  D.forEach(([name,was,now,saved],i)=>{
+    const y=y0(i),xa=mapX(was),xb=mapX(now),[tag,shade]=verdict(saved);
+    txt(s,{x:132,y:y+3.5,'font-size':10,'font-weight':700,fill:'#4A4944','text-anchor':'end',
+      'letter-spacing':'.06em',class:'fade',style:`animation-delay:${i*.1}s`},name.toUpperCase());
+    el(s,'line',{x1:X0-6,y1:y,x2:X1+6,y2:y,stroke:'#E3E2DB','stroke-width':.7,
+      class:'fade',style:`animation-delay:${i*.1}s`});
+    // beads: one per minute saved, strung between the two dots
+    for(let k=0;k<saved;k++){
+      const t=(k+.5)/saved,x=xb+t*(xa-xb),yy=y+(rnd(k+1,i+3)-.5)*2.6;
+      el(s,'circle',{cx:x,cy:yy,r:1.5+rnd(k+2,i+4)*.9,fill:shade,opacity:.85,
+        class:'pop',style:`animation-delay:${.3+i*.1+k*.012}s`});
+    }
+    const before=el(s,'circle',{cx:xa,cy:y,r:5,fill:PAPER,stroke:INK,'stroke-width':1.3,
+      class:'pop',style:`animation-delay:${.2+i*.1}s`});
+    tip(before,`${name}: April 2026, ${was} min`);
+    const after=el(s,'circle',{cx:xb,cy:y,r:5.4,fill:INK,
+      class:'pop',style:`animation-delay:${.6+i*.1}s`});
+    tip(after,`${name}: ${was} min → ${now} min (−${saved} min)`);
+    txt(s,{x:xa+10,y:y-8,'font-size':9.5,'font-weight':700,fill:'#B0AFA9',
+      class:'fade',style:`animation-delay:${.3+i*.1}s`},was);
+    txt(s,{x:xb-10,y:y-8,'font-size':11,'font-weight':800,fill:INK,'text-anchor':'end',
+      class:'fade',style:`animation-delay:${.7+i*.1}s`},now);
+    // right margin: minutes saved + verdict
+    const num=txt(s,{x:768,y:y+1,'font-size':15,'font-weight':800,fill:saved>=40?INK:shade,'text-anchor':'end',
+      class:'fade',style:`animation-delay:${.9+i*.1}s`},`−${saved}`);
+    tip(num,`${name}: ${saved} minutes less on the rack`);
+    txt(s,{x:768,y:y+13,'font-size':7,'font-weight':700,fill:saved>=40?'#6A6963':'#B0AFA9','text-anchor':'end',
+      'letter-spacing':'.1em',class:'fade',style:`animation-delay:${.95+i*.1}s`},tag);
+  });
+  txt(s,{x:400,y:372,'font-size':7.5,'font-weight':600,fill:'#B0AFA9','text-anchor':'middle',
+    'letter-spacing':'.12em',class:'fade',style:'animation-delay:1.2s'},
+    'ONE BEAD = ONE MINUTE SAVED · HOLLOW = APRIL · INK = JUNE · CLICK TO REPLAY');
+});
+})();
+</script>
+</body>
+</html>
diff --git a/layers/registry/server/demos/nextlevelbuilder/ui-ux-pro-max-skill/slides/deck.html b/layers/registry/server/demos/nextlevelbuilder/ui-ux-pro-max-skill/slides/deck.html
new file mode 100644
index 00000000..ecb091f3
--- /dev/null
+++ b/layers/registry/server/demos/nextlevelbuilder/ui-ux-pro-max-skill/slides/deck.html
@@ -0,0 +1,558 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cindergrove · Seed Deck</title>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+<style>
+  :root {
+    --color-background: #17110E;
+    --color-surface: #221915;
+    --color-surface-2: #2C211B;
+    --color-primary: #FF6A2B;
+    --color-secondary: #FFB347;
+    --color-text: #F6EBDD;
+    --color-muted: #B9A898;
+    --color-line: rgba(246, 235, 221, 0.10);
+    --primitive-gradient-primary: linear-gradient(120deg, #FFB347 0%, #FF6A2B 55%, #E2381B 100%);
+    --typography-font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
+    --typography-font-body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body { height: 100%; }
+  body {
+    background: #0C0807;
+    color: var(--color-text);
+    font-family: var(--typography-font-body);
+    overflow: hidden;
+    user-select: none;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* Fixed 1280x720 stage, scaled to fit the viewport (letterboxed 16:9) */
+  .slide-deck {
+    position: absolute;
+    top: 50%; left: 50%;
+    width: 1280px; height: 720px;
+    transform-origin: center center;
+    overflow: hidden;
+    background: var(--color-background);
+    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
+  }
+
+  .slide {
+    position: absolute;
+    inset: 0;
+    padding: 72px 88px 96px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.45s ease, visibility 0.45s;
+    background:
+      radial-gradient(900px 500px at 100% 110%, rgba(255,106,43,0.10), transparent 60%),
+      var(--color-background);
+  }
+  .slide.active { opacity: 1; visibility: visible; }
+
+  .slide-content { width: 100%; display: flex; flex-direction: column; gap: 20px; }
+
+  /* Typography */
+  h1, h2, h3 { font-family: var(--typography-font-heading); font-weight: 600; letter-spacing: -0.01em; }
+  .eyebrow {
+    font-size: 14px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
+    color: var(--color-primary);
+  }
+  h2 { font-size: 50px; line-height: 1.08; max-width: 980px; }
+  .lede { font-size: 21px; line-height: 1.5; color: var(--color-muted); max-width: 820px; }
+  .accent { color: var(--color-secondary); }
+  .gradient-text {
+    background: var(--primitive-gradient-primary);
+    -webkit-background-clip: text; background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .footer-mark {
+    position: absolute; left: 88px; bottom: 34px;
+    font-size: 13px; color: rgba(246,235,221,0.35); letter-spacing: 0.08em;
+  }
+
+  /* Title slide */
+  .slide-hero { justify-content: center; }
+  .slide-hero .slide-content { max-width: 760px; position: relative; z-index: 1; }
+  .slide-hero .logo {
+    display: flex; align-items: center; gap: 14px;
+    font-size: 18px; font-weight: 600; letter-spacing: 0.04em; color: var(--color-muted);
+  }
+  .flame {
+    width: 40px; height: 40px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+    background: var(--primitive-gradient-primary);
+    box-shadow: 0 0 30px rgba(255,106,43,0.55);
+  }
+  .slide-hero h1 { font-size: 96px; line-height: 1; margin-top: 18px; }
+  .slide-hero .tagline { font-size: 26px; font-family: var(--typography-font-heading); color: var(--color-text); max-width: 900px; line-height: 1.3; }
+  .hero-glow {
+    position: absolute; right: -160px; top: 50%; transform: translateY(-50%);
+    width: 620px; height: 620px; border-radius: 50%;
+    background: radial-gradient(circle, rgba(255,106,43,0.35) 0%, rgba(226,56,27,0.12) 40%, transparent 70%);
+    pointer-events: none;
+  }
+  .oven-arch {
+    position: absolute; right: 90px; bottom: 0;
+    width: 380px; height: 300px;
+    border-radius: 190px 190px 0 0;
+    border: 3px solid rgba(255,179,71,0.35);
+    border-bottom: none;
+    pointer-events: none;
+  }
+  .oven-arch::after {
+    content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
+    width: 170px; height: 110px; border-radius: 85px 85px 0 0;
+    background: radial-gradient(ellipse at 50% 100%, #FFB347 0%, #FF6A2B 35%, rgba(226,56,27,0.4) 70%, transparent 100%);
+  }
+  .hero-meta { display: flex; gap: 28px; margin-top: 26px; font-size: 15px; color: var(--color-muted); }
+  .hero-meta strong { color: var(--color-text); font-weight: 600; }
+
+  /* Cards */
+  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 18px; }
+  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 18px; }
+  .card {
+    background: var(--color-surface);
+    border: 1px solid var(--color-line);
+    border-radius: 16px;
+    padding: 26px 26px 28px;
+  }
+  .card-accent-bar { border-top: 3px solid var(--color-primary); }
+  .card .num {
+    font-family: var(--typography-font-heading); font-size: 46px; line-height: 1; font-weight: 600;
+  }
+  .card h3 { font-size: 23px; margin-bottom: 10px; }
+  .card p { font-size: 16px; line-height: 1.5; color: var(--color-muted); }
+  .card .label { font-size: 15px; color: var(--color-muted); margin-top: 10px; line-height: 1.4; }
+  .icon {
+    width: 44px; height: 44px; border-radius: 12px; margin-bottom: 18px;
+    display: grid; place-items: center;
+    background: rgba(255,106,43,0.14); color: var(--color-primary);
+    font-size: 22px; font-weight: 700;
+  }
+
+  /* Two column split */
+  .slide-split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; }
+
+  /* Traction */
+  .chart-wrap {
+    background: var(--color-surface); border: 1px solid var(--color-line);
+    border-radius: 18px; padding: 22px 22px 14px; height: 430px; position: relative;
+  }
+  .chart-fallback { display: none; height: 100%; align-items: center; justify-content: center; text-align: center; color: var(--color-muted); font-size: 18px; line-height: 1.6; }
+  .chart-wrap.no-chart canvas { display: none; }
+  .chart-wrap.no-chart .chart-fallback { display: flex; }
+  .big-number { font-family: var(--typography-font-heading); font-size: 132px; line-height: 0.95; font-weight: 600; }
+  .stat-row { display: flex; gap: 34px; margin-top: 8px; }
+  .stat-row .v { font-family: var(--typography-font-heading); font-size: 34px; font-weight: 600; }
+  .stat-row .k { font-size: 14px; color: var(--color-muted); margin-top: 4px; }
+
+  /* Market rings */
+  .rings { position: relative; width: 430px; height: 430px; }
+  .ring {
+    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
+    border-radius: 50%; display: flex; justify-content: center; text-align: center;
+  }
+  .ring span { display: block; }
+  .ring .rv { font-family: var(--typography-font-heading); font-weight: 600; }
+  .ring .rk { font-size: 13px; color: var(--color-muted); letter-spacing: 0.06em; text-transform: uppercase; }
+  .ring.tam { width: 430px; height: 430px; background: rgba(255,179,71,0.08); border: 1px solid rgba(255,179,71,0.25); padding-top: 40px; }
+  .ring.sam { width: 290px; height: 290px; background: rgba(255,106,43,0.14); border: 1px solid rgba(255,106,43,0.35); padding-top: 36px; }
+  .ring.som { width: 150px; height: 150px; background: var(--primitive-gradient-primary); align-items: center; flex-direction: column; }
+  .ring.tam .rv { font-size: 38px; } .ring.sam .rv { font-size: 32px; }
+  .ring.som .rv { font-size: 26px; color: #1A0E08; } .ring.som .rk { color: rgba(26,14,8,0.75); }
+  .market-list { display: flex; flex-direction: column; gap: 22px; }
+  .market-list .row { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: baseline; border-bottom: 1px solid var(--color-line); padding-bottom: 18px; }
+  .market-list .row:last-child { border-bottom: none; }
+  .market-list .tag { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--color-primary); }
+  .market-list p { font-size: 17px; line-height: 1.5; color: var(--color-muted); }
+  .market-list p strong { color: var(--color-text); font-weight: 600; }
+
+  /* Unit economics table */
+  .econ { width: 100%; border-collapse: collapse; font-size: 18px; }
+  .econ td { padding: 14px 0; border-bottom: 1px solid var(--color-line); }
+  .econ td:last-child { text-align: right; font-family: var(--typography-font-heading); font-size: 22px; font-weight: 600; }
+  .econ tr.total td { border-bottom: none; color: var(--color-secondary); }
+  .econ td.muted { color: var(--color-muted); }
+
+  /* Team */
+  .avatar {
+    width: 64px; height: 64px; border-radius: 50%; margin-bottom: 18px;
+    display: grid; place-items: center;
+    font-family: var(--typography-font-heading); font-size: 24px; font-weight: 600; color: #1A0E08;
+    background: var(--primitive-gradient-primary);
+  }
+  .card .role { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 12px; }
+
+  /* Ask */
+  .ask-amount { font-family: var(--typography-font-heading); font-size: 120px; line-height: 1; font-weight: 600; }
+  .use-bars { display: flex; flex-direction: column; gap: 18px; }
+  .use-bar .top { display: flex; justify-content: space-between; font-size: 17px; margin-bottom: 8px; }
+  .use-bar .top span:last-child { color: var(--color-muted); }
+  .use-bar .track { height: 10px; border-radius: 6px; background: var(--color-surface-2); overflow: hidden; }
+  .use-bar .fill { height: 100%; border-radius: 6px; background: var(--primitive-gradient-primary); width: 0; transition: width 0.9s cubic-bezier(.2,.7,.2,1); }
+  .contact { margin-top: 14px; font-size: 17px; color: var(--color-muted); }
+  .contact strong { color: var(--color-text); }
+
+  /* Animations — replay each time a slide becomes active */
+  @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
+  @keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
+  .slide.active .animate-fade-up { animation: fadeUp 0.6s ease-out both; }
+  .slide.active .animate-scale { animation: scaleIn 0.6s ease-out both; }
+  .slide.active .animate-stagger > * { animation: fadeUp 0.5s ease-out both; }
+  .slide.active .animate-stagger > *:nth-child(1) { animation-delay: 0.08s; }
+  .slide.active .animate-stagger > *:nth-child(2) { animation-delay: 0.16s; }
+  .slide.active .animate-stagger > *:nth-child(3) { animation-delay: 0.24s; }
+  .slide.active .animate-stagger > *:nth-child(4) { animation-delay: 0.32s; }
+  .slide.active .animate-stagger > *:nth-child(5) { animation-delay: 0.40s; }
+  @media (prefers-reduced-motion: reduce) {
+    .slide, .use-bar .fill { transition: none; }
+    .slide.active * { animation: none !important; }
+  }
+
+  /* Navigation */
+  .progress-bar {
+    position: fixed; top: 0; left: 0; height: 3px; width: 0;
+    background: var(--primitive-gradient-primary);
+    transition: width 0.3s; z-index: 1000;
+  }
+  .nav-controls {
+    position: fixed; bottom: 22px; right: 26px;
+    display: flex; align-items: center; gap: 14px; z-index: 1000;
+    background: rgba(23,17,14,0.75); padding: 6px 8px; border-radius: 999px;
+    border: 1px solid var(--color-line);
+  }
+  .nav-btn {
+    background: rgba(246,235,221,0.08); border: none; color: var(--color-text);
+    width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 16px;
+  }
+  .nav-btn:hover { background: rgba(246,235,221,0.18); }
+  .nav-btn:disabled { opacity: 0.3; cursor: default; }
+  .slide-counter { color: var(--color-muted); font-size: 13px; font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
+</style>
+</head>
+<body>
+<div class="progress-bar" id="progressBar"></div>
+
+<div class="slide-deck" id="deck">
+
+  <!-- 1. Title / Hook -->
+  <section class="slide slide-hero active">
+    <div class="hero-glow"></div>
+    <div class="oven-arch"></div>
+    <div class="slide-content animate-stagger">
+      <div class="logo"><div class="flame"></div>CINDERGROVE</div>
+      <h1>The pizzeria <span class="gradient-text">comes to you.</span></h1>
+      <p class="tagline">Wood-fired ovens, delivered Friday, collected Monday.<br>Weekend rentals for backyards, birthdays and block parties.</p>
+      <div class="hero-meta"><span><strong>Seed round</strong> · October 2026</span><span><strong>15×</strong> bookings growth YTD</span></div>
+    </div>
+  </section>
+
+  <!-- 2. Problem -->
+  <section class="slide">
+    <div class="slide-content">
+      <div class="eyebrow animate-fade-up">The problem</div>
+      <h2 class="animate-fade-up">Everyone wants a wood-fired pizza night. <span class="accent">Almost no one should buy the oven.</span></h2>
+      <div class="grid-3 animate-stagger">
+        <div class="card card-accent-bar">
+          <div class="num gradient-text">$2,500+</div>
+          <div class="label">for a decent backyard wood-fired oven, before tools, peel and firewood</div>
+        </div>
+        <div class="card card-accent-bar">
+          <div class="num gradient-text">4–6×</div>
+          <div class="label">a year: how often a typical owner actually fires it up after the first summer</div>
+        </div>
+        <div class="card card-accent-bar">
+          <div class="num gradient-text">$40/head</div>
+          <div class="label">for a mobile pizza caterer — out of reach for most family gatherings</div>
+        </div>
+      </div>
+      <p class="lede animate-fade-up" style="margin-top:8px">The result: a heavy, expensive object that sits under a tarp 48 weekends a year — or a party that settles for delivery.</p>
+    </div>
+    <div class="footer-mark">CINDERGROVE · SEED 2026</div>
+  </section>
+
+  <!-- 3. Solution -->
+  <section class="slide">
+    <div class="slide-content">
+      <div class="eyebrow animate-fade-up">The solution</div>
+      <h2 class="animate-fade-up">Rent the oven for the weekend. <span class="accent">We handle the heavy part.</span></h2>
+      <div class="grid-4 animate-stagger">
+        <div class="card">
+          <div class="icon">1</div>
+          <h3>Book in 60 seconds</h3>
+          <p>Pick a weekend, an oven size and a dough kit. Flat price, no deposit games.</p>
+        </div>
+        <div class="card">
+          <div class="icon">2</div>
+          <h3>Friday drop-off</h3>
+          <p>We deliver, level and test-fire the oven, then leave kiln-dried oak for the weekend.</p>
+        </div>
+        <div class="card">
+          <div class="icon">3</div>
+          <h3>Fire it up</h3>
+          <p>QR-guided video lessons get a first-timer to a 90-second Neapolitan pie.</p>
+        </div>
+        <div class="card">
+          <div class="icon">4</div>
+          <h3>Monday pickup</h3>
+          <p>We collect, clean the ash and inspect. No storage, no maintenance, no tarp.</p>
+        </div>
+      </div>
+    </div>
+    <div class="footer-mark">CINDERGROVE · SEED 2026</div>
+  </section>
+
+  <!-- 4. Traction -->
+  <section class="slide" id="tractionSlide">
+    <div class="slide-content slide-split" style="grid-template-columns: 0.85fr 1.4fr;">
+      <div class="animate-stagger">
+        <div class="eyebrow">Traction</div>
+        <div class="big-number gradient-text" id="bigNumber">610</div>
+        <p class="lede" style="font-size:19px">weekend bookings in September 2026, up from <strong style="color:var(--color-text)">40</strong> in January.</p>
+        <div class="stat-row">
+          <div><div class="v">15×</div><div class="k">growth in 8 months</div></div>
+          <div><div class="v">~41%</div><div class="k">avg. monthly growth</div></div>
+        </div>
+      </div>
+      <div class="chart-wrap animate-scale" id="chartWrap">
+        <canvas id="bookingsChart" aria-label="Weekend bookings per month, January to September 2026, rising from 40 to 610"></canvas>
+        <div class="chart-fallback">Weekend bookings, 2026<br>January: 40 → September: 610</div>
+      </div>
+    </div>
+    <div class="footer-mark">CINDERGROVE · SEED 2026</div>
+  </section>
+
+  <!-- 5. Market -->
+  <section class="slide">
+    <div class="slide-content slide-split" style="grid-template-columns: 430px 1fr;">
+      <div class="rings animate-scale">
+        <div class="ring tam"><div><span class="rv">$6.1B</span><span class="rk">US backyard entertaining</span></div></div>
+        <div class="ring sam"><div><span class="rv">$1.4B</span><span class="rk">Outdoor cooking<br>&amp; party rentals</span></div></div>
+        <div class="ring som"><span class="rv">$85M</span><span class="rk">10 metros</span></div>
+      </div>
+      <div>
+        <div class="eyebrow animate-fade-up">Market</div>
+        <h2 class="animate-fade-up" style="font-size:44px; margin:14px 0 28px">The rental economy hasn't reached the backyard yet.</h2>
+        <div class="market-list animate-stagger">
+          <div class="row"><span class="tag">TAM</span><p><strong>$6.1B</strong> spent yearly by US households on hosting outdoor gatherings: catering, equipment, rentals.</p></div>
+          <div class="row"><span class="tag">SAM</span><p><strong>$1.4B</strong> in outdoor cooking and party-equipment rentals, a category with no national brand.</p></div>
+          <div class="row"><span class="tag">SOM</span><p><strong>$85M</strong> reachable within 3 years across 10 warm-weather and suburban metros.</p></div>
+        </div>
+      </div>
+    </div>
+    <div class="footer-mark">CINDERGROVE · SEED 2026 · Market figures are internal estimates</div>
+  </section>
+
+  <!-- 6. Business model -->
+  <section class="slide">
+    <div class="slide-content slide-split" style="grid-template-columns: 1fr 1fr; gap: 72px;">
+      <div class="animate-stagger">
+        <div class="eyebrow">Business model</div>
+        <h2 style="font-size:46px; margin:14px 0 18px">One oven pays for itself in <span class="accent">under 12 weekends.</span></h2>
+        <p class="lede" style="font-size:19px">Flat weekend pricing from $289, plus high-margin add-ons: dough kits, firewood bundles and a pizzaiolo-for-hire upgrade.</p>
+      </div>
+      <div class="card animate-fade-up" style="padding: 18px 32px;">
+        <table class="econ">
+          <tr><td class="muted">Avg. booking value (incl. add-ons)</td><td>$365</td></tr>
+          <tr><td class="muted">Delivery, fuel &amp; cleaning</td><td>−$95</td></tr>
+          <tr><td class="muted">Payment &amp; insurance</td><td>−$30</td></tr>
+          <tr><td>Contribution per weekend</td><td>$240</td></tr>
+          <tr><td class="muted">Oven + trailer cost</td><td>$2,700</td></tr>
+          <tr class="total"><td>Payback</td><td>~11 weekends</td></tr>
+        </table>
+      </div>
+    </div>
+    <div class="footer-mark">CINDERGROVE · SEED 2026</div>
+  </section>
+
+  <!-- 7. Team -->
+  <section class="slide">
+    <div class="slide-content">
+      <div class="eyebrow animate-fade-up">Team</div>
+      <h2 class="animate-fade-up">Operators who've moved heavy things and fed a lot of people.</h2>
+      <div class="grid-3 animate-stagger">
+        <div class="card">
+          <div class="avatar">MR</div>
+          <div class="role">CEO · Co-founder</div>
+          <h3>Marisol Reyes</h3>
+          <p>Ran regional ops for a party-rental chain; scaled it from 2 to 14 depots.</p>
+        </div>
+        <div class="card">
+          <div class="avatar">DO</div>
+          <div class="role">CTO · Co-founder</div>
+          <h3>Dev Okafor</h3>
+          <p>Built routing and fleet scheduling at a last-mile delivery startup.</p>
+        </div>
+        <div class="card">
+          <div class="avatar">TB</div>
+          <div class="role">Head of Product · Pizzaiolo</div>
+          <h3>Tomás Bellini</h3>
+          <p>Twelve years behind wood-fired ovens; designed our setup and safety protocol.</p>
+        </div>
+      </div>
+    </div>
+    <div class="footer-mark">CINDERGROVE · SEED 2026</div>
+  </section>
+
+  <!-- 8. The Ask -->
+  <section class="slide">
+    <div class="hero-glow" style="right:-220px; opacity:0.7"></div>
+    <div class="slide-content slide-split" style="grid-template-columns: 1fr 1fr; gap: 80px;">
+      <div class="animate-stagger">
+        <div class="eyebrow">The ask</div>
+        <div class="ask-amount gradient-text">$2.5M</div>
+        <p class="lede" style="font-size:20px">Seed round to go from 1 metro to 4, and from 610 to 3,000 weekend bookings a month by summer 2027.</p>
+        <p class="contact"><strong>Marisol Reyes</strong> · founders@cindergrove.example</p>
+      </div>
+      <div class="use-bars" id="useBars">
+        <div class="use-bar"><div class="top"><span>Oven fleet &amp; trailers</span><span>45%</span></div><div class="track"><div class="fill" data-w="45"></div></div></div>
+        <div class="use-bar"><div class="top"><span>Launch 3 new metros</span><span>25%</span></div><div class="track"><div class="fill" data-w="25"></div></div></div>
+        <div class="use-bar"><div class="top"><span>Booking &amp; routing software</span><span>18%</span></div><div class="track"><div class="fill" data-w="18"></div></div></div>
+        <div class="use-bar"><div class="top"><span>Brand &amp; partnerships</span><span>12%</span></div><div class="track"><div class="fill" data-w="12"></div></div></div>
+      </div>
+    </div>
+    <div class="footer-mark">CINDERGROVE · SEED 2026 · Fictional company</div>
+  </section>
+
+</div>
+
+<div class="nav-controls">
+  <button class="nav-btn" id="prevBtn" aria-label="Previous slide">←</button>
+  <span class="slide-counter"><span id="current">1</span> / <span id="total">8</span></span>
+  <button class="nav-btn" id="nextBtn" aria-label="Next slide">→</button>
+</div>
+
+<script>
+  const deck = document.getElementById('deck');
+  const slides = document.querySelectorAll('.slide');
+  const total = slides.length;
+  let current = 1;
+  let chart = null;
+  document.getElementById('total').textContent = total;
+
+  function fit() {
+    const s = Math.min(window.innerWidth / 1280, window.innerHeight / 720);
+    deck.style.transform = 'translate(-50%, -50%) scale(' + s + ')';
+  }
+  window.addEventListener('resize', fit);
+  fit();
+
+  // Monthly weekend bookings, Jan–Sep 2026. Endpoints (40, 610) are reported figures;
+  // interior months are a smooth monthly series between them.
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'];
+  const bookings = [40, 58, 85, 124, 178, 252, 345, 465, 610];
+
+  function buildChart() {
+    const wrap = document.getElementById('chartWrap');
+    if (typeof Chart === 'undefined') { wrap.classList.add('no-chart'); return; }
+    if (chart) chart.destroy();
+    const ctx = document.getElementById('bookingsChart').getContext('2d');
+    const grad = ctx.createLinearGradient(0, 0, 0, 400);
+    grad.addColorStop(0, 'rgba(255,106,43,0.45)');
+    grad.addColorStop(1, 'rgba(255,106,43,0)');
+    chart = new Chart(ctx, {
+      type: 'line',
+      data: {
+        labels: months,
+        datasets: [{
+          label: 'Weekend bookings',
+          data: bookings,
+          borderColor: '#FF6A2B',
+          backgroundColor: grad,
+          borderWidth: 3,
+          fill: true,
+          tension: 0.35,
+          pointRadius: bookings.map((_, i) => (i === 0 || i === bookings.length - 1) ? 6 : 0),
+          pointBackgroundColor: '#FFB347',
+          pointBorderColor: '#17110E',
+          pointBorderWidth: 2
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: { duration: 1200, easing: 'easeOutQuart' },
+        layout: { padding: { top: 28, right: 18 } },
+        plugins: {
+          legend: { display: false },
+          title: { display: true, text: 'Weekend bookings per month, 2026', color: '#B9A898', align: 'start', font: { size: 14, weight: '600' }, padding: { bottom: 14 } },
+          tooltip: { backgroundColor: '#2C211B', titleColor: '#F6EBDD', bodyColor: '#F6EBDD', displayColors: false }
+        },
+        scales: {
+          x: { grid: { display: false }, ticks: { color: '#B9A898', font: { size: 13 } } },
+          y: { beginAtZero: true, max: 700, grid: { color: 'rgba(246,235,221,0.07)' }, ticks: { color: '#B9A898', stepSize: 100, font: { size: 13 } }, border: { display: false } }
+        }
+      },
+      plugins: [{
+        id: 'endLabels',
+        afterDatasetsDraw(c) {
+          const meta = c.getDatasetMeta(0);
+          const g = c.ctx;
+          g.save();
+          g.font = '600 15px system-ui, sans-serif';
+          g.fillStyle = '#F6EBDD';
+          g.textAlign = 'center';
+          [0, bookings.length - 1].forEach(i => {
+            const p = meta.data[i];
+            g.fillText(bookings[i], p.x, p.y - 14);
+          });
+          g.restore();
+        }
+      }]
+    });
+  }
+
+  function onEnter(n) {
+    const slide = slides[n - 1];
+    if (slide.id === 'tractionSlide') buildChart();
+    document.querySelectorAll('#useBars .fill').forEach(f => {
+      f.style.width = slide.contains(f) ? f.dataset.w * 2 + '%' : '0';
+    });
+  }
+
+  function showSlide(n) {
+    n = Math.max(1, Math.min(total, n));
+    if (n === current && slides[n - 1].classList.contains('active')) return;
+    current = n;
+    slides.forEach((s, i) => {
+      s.classList.remove('active');
+      if (i === n - 1) { void s.offsetWidth; s.classList.add('active'); }
+    });
+    document.getElementById('current').textContent = n;
+    document.getElementById('progressBar').style.width = (n / total * 100) + '%';
+    document.getElementById('prevBtn').disabled = n === 1;
+    document.getElementById('nextBtn').disabled = n === total;
+    onEnter(n);
+  }
+
+  function nextSlide() { showSlide(current + 1); }
+  function prevSlide() { showSlide(current - 1); }
+
+  document.getElementById('prevBtn').addEventListener('click', e => { e.stopPropagation(); prevSlide(); });
+  document.getElementById('nextBtn').addEventListener('click', e => { e.stopPropagation(); nextSlide(); });
+
+  document.addEventListener('keydown', e => {
+    if (['ArrowRight', 'ArrowDown', 'PageDown', ' '].includes(e.key)) { e.preventDefault(); nextSlide(); }
+    else if (['ArrowLeft', 'ArrowUp', 'PageUp'].includes(e.key)) { e.preventDefault(); prevSlide(); }
+    else if (e.key === 'Home') { e.preventDefault(); showSlide(1); }
+    else if (e.key === 'End') { e.preventDefault(); showSlide(total); }
+  });
+
+  document.addEventListener('click', e => {
+    if (!e.target.closest('.nav-controls')) nextSlide();
+  });
+
+  current = 0;
+  showSlide(1);
+</script>
+</body>
+</html>