@moood/render 0.0.0 → 0.1.2

package/engine/engine.js

@@ -1,1456 +1,1456 @@
-// Living-scene engine: paints a scene spec (see ../scene-prompt.mjs) on a canvas,
-// animated. Everything is in device pixels.
-// The frame is always landscape: 4:3 to 21:9, centred in the canvas; it sets the composition, and
-// the canvas around it (a window narrower or wider) shows the scene going on, dimmed, the colour at
-// the frame's edge carrying on where nothing is painted. Its height is the measure: the scene is painted on a 16:9 stage
-// as tall as the frame (spec x is a fraction of the stage's width, y and sizes fractions of its
-// height), the stage centred in the frame — a wider frame sees more on both sides, a narrower
-// one less; nothing on it moves or stretches. What matters belongs in the stage's middle 4:3.
-const Moood = (() => {
-  const STAGE = 16 / 9, NARROWEST = 4 / 3, WIDEST = 21 / 9;
-  // ── utilities ──────────────────────────────────────────────────────────
-  function seeded(seed) {
-    return () => {
-      seed = (seed + 0x6d2b79f5) | 0;
-      let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
-      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
-      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-    };
-  }
-  function noise1D(seed) {
-    const v = Array.from({ length: 512 }, seeded(seed));
-    return x => {
-      const i = Math.floor(x), f = x - i, k = f * f * (3 - 2 * f);
-      return v[i & 511] + (v[(i + 1) & 511] - v[i & 511]) * k;
-    };
-  }
-  function layer(w, h) {
-    const c = document.createElement('canvas');
-    c.width = Math.max(1, Math.round(w));
-    c.height = Math.max(1, Math.round(h));
-    return c;
-  }
-  function rgb(hex) {
-    const m = /^#?([0-9a-f]{6})$/i.exec(hex || '');
-    if (!m) throw new Error(`bad colour ${hex}`);
-    const n = parseInt(m[1], 16);
-    return `${n >> 16},${(n >> 8) & 255},${n & 255}`;
-  }
-  // Glows are the most frequent thing drawn (fireflies, lamps, fog, fire): one
-  // pre-rendered radial sprite per colour, stretched and faded with globalAlpha —
-  // no gradient objects created per frame.
-  const glowSprites = new Map();
-  function glowSprite(col) {
-    let s = glowSprites.get(col);
-    if (!s) {
-      s = layer(256, 256);
-      const g = s.getContext('2d'), gr = g.createRadialGradient(128, 128, 0, 128, 128, 128);
-      gr.addColorStop(0, `rgba(${col},1)`);
-      gr.addColorStop(0.25, `rgba(${col},0.4)`);
-      gr.addColorStop(1, `rgba(${col},0)`);
-      g.fillStyle = gr;
-      g.fillRect(0, 0, 256, 256);
-      glowSprites.set(col, s);
-    }
-    return s;
-  }
-  function glow(ctx, x, y, r, col, a) {
-    if (r <= 0 || a <= 0) return;
-    const prev = ctx.globalAlpha;
-    ctx.globalAlpha = prev * Math.min(1, a);
-    ctx.drawImage(glowSprite(col), x - r, y - r, 2 * r, 2 * r);
-    ctx.globalAlpha = prev;
-  }
-  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
-  const hash = s => { let h = 2166136261; for (const ch of String(s)) h = Math.imul(h ^ ch.charCodeAt(0), 16777619); return h >>> 0; };
-
-  // Film grain as sparse light/dark specks with their own alpha, so it composites with
-  // plain source-over (a full-screen 'overlay' blend every frame is expensive).
-  const grainTile = (() => {
-    const c = layer(160, 160), g = c.getContext('2d'), img = g.createImageData(160, 160);
-    for (let i = 0; i < img.data.length; i += 4) {
-      img.data[i] = img.data[i + 1] = img.data[i + 2] = Math.random() < 0.5 ? 0 : 255;
-      img.data[i + 3] = Math.random() * 38;
-    }
-    g.putImageData(img, 0, 0);
-    return c;
-  })();
-
-  // ── static layers ──────────────────────────────────────────────────────
-  function ridge(L, W, H, seed) {
-    const n1 = noise1D(seed), n2 = noise1D(seed + 1), n3 = noise1D(seed + 2);
-    const base = L.y * H, h = (L.height ?? 0.2) * H, r = L.roughness ?? 0.5;
-    return x => {
-      const u = x / W;
-      if (L.kind === 'mountains') {
-        const sharp = 1 - Math.abs(2 * n1(u * 3 + 0.3) - 1);
-        return base - h * (0.35 + 0.45 * sharp + r * 0.25 * n2(u * 12) + r * 0.08 * n3(u * 60));
-      }
-      if (L.kind === 'dunes') return base - h * (0.5 + 0.45 * Math.sin(u * 7 + n1(u * 2) * 4) * (0.6 + 0.4 * n2(u * 3)));
-      if (L.kind === 'ground') return base - h * 0.15 * n1(u * 4);
-      return base - h * (0.35 + 0.55 * n1(u * 2.5) + r * 0.15 * n2(u * 10)); // hills + base of forest/city
-    };
-  }
-
-  function drawPine(g, x, base, h, color, rnd) {
-    const w = h * (0.22 + rnd() * 0.08);
-    g.fillStyle = color;
-    g.fillRect(x - h * 0.012, base - h * 0.15, h * 0.024, h * 0.16);
-    const tiers = 6 + Math.floor(rnd() * 3);
-    for (let i = 0; i < tiers; i++) {
-      const k = i / tiers, yb = base - h * (0.1 + k * 0.78), yt = yb - h * (0.17 + 0.05 * (1 - k));
-      const wi = w * (1 - k) * (0.85 + rnd() * 0.3) + h * 0.02;
-      g.beginPath();
-      g.moveTo(x, yt);
-      g.quadraticCurveTo(x - wi * 0.3, yb - (yb - yt) * 0.35, x - wi, yb + h * 0.01);
-      g.quadraticCurveTo(x, yb - h * 0.025, x + wi, yb + h * 0.01);
-      g.quadraticCurveTo(x + wi * 0.3, yb - (yb - yt) * 0.35, x, yt);
-      g.fill();
-    }
-  }
-
-  // Layers are painted wider and taller than the screen so the camera can pan and
-  // zoom out: world x spans [-EXT·W, (1+EXT)·W], y spans [0, DEEP·H].
-  const EXT = 0.4, DEEP = 1.3;
-
-  // Paints a landscape layer. By default the whole layer at scale 1; `view` = { x, y, w, h, k }
-  // paints only that region (layer coordinates) at scale k — for sharp close-ups.
-  // Also returns, for each of TOP_STRIPS vertical strips, `tops`: the highest painted y, and
-  // `solids`: the y below which the strip is solid colour. A renderer can skip the empty sky
-  // above a layer and fill its body flat; only the band between needs a texture.
-  // `view.canvas`, if given, is reused (cleared) instead of allocating a new canvas.
-  const TOP_STRIPS = 64;
-  function staticLayer(L, W, H, seed, view) {
-    const x0 = -EXT * W, x1 = (1 + EXT) * W, bottom = DEEP * H;
-    const v = view || { x: x0, y: 0, w: x1 - x0, h: bottom, k: 1 };
-    const c = v.canvas || layer(v.w * v.k, v.h * v.k), g = c.getContext('2d'), rnd = seeded(seed), f = ridge(L, W, H, seed);
-    if (v.canvas) { g.setTransform(1, 0, 0, 1, 0, 0); g.clearRect(0, 0, c.width, c.height); }
-    g.setTransform(v.k, 0, 0, v.k, -v.x * v.k, -v.y * v.k);
-    const tops = new Array(TOP_STRIPS).fill(bottom), solids = new Array(TOP_STRIPS).fill(0), sw = (x1 - x0) / TOP_STRIPS;
-    const mark = (xa, xb, y) => {
-      for (let i = Math.max(0, Math.floor((xa - x0) / sw)); i <= Math.min(TOP_STRIPS - 1, Math.floor((xb - x0) / sw)); i++) tops[i] = Math.min(tops[i], y);
-    };
-    // finer outline steps when painting a close-up, but only across the painted region
-    const step = Math.max(2, W / 400) / v.k;
-    g.fillStyle = L.color;
-    const top = (L.kind === 'forest' || L.kind === 'city')
-      ? x => L.y * H - (L.y * H - f(x)) * 0.25 // a low base under the trees / buildings
-      : f;
-    g.beginPath();
-    g.moveTo(x0, bottom);
-    const coarse = Math.max(2, W / 400);
-    for (let x = x0; x <= x1 + coarse; x += coarse) {
-      const y = top(x);
-      mark(x - coarse, x + coarse, y);
-      const i = Math.min(TOP_STRIPS - 1, Math.max(0, Math.floor((x - x0) / sw)));
-      solids[i] = Math.max(solids[i], y);
-    }
-    const pa = Math.max(x0, v.x - 2 * step), pb = Math.min(x1, v.x + v.w + 2 * step);
-    g.lineTo(pa, bottom);
-    for (let x = pa; x <= pb + step; x += step) g.lineTo(x, top(x));
-    g.lineTo(pb + step, bottom);
-    g.fill();
-    const density = L.density ?? 0.5, h = (L.height ?? 0.2) * H;
-    if (L.kind === 'forest') {
-      const spacing = W * (0.035 - 0.028 * density);
-      for (let x = x0 - spacing; x < x1 + spacing; x += spacing * (0.5 + rnd())) {
-        const th = h * (0.55 + rnd() * 0.5), base = top(x) + h * 0.03;
-        mark(x - th * 0.35, x + th * 0.35, base - th * 1.12);
-        drawPine(g, x, base, th, L.color, rnd);
-      }
-    }
-    const windows = [];
-    if (L.kind === 'city') {
-      let x = x0 - rnd() * W * 0.03;
-      while (x < x1) {
-        const bw = W * (0.03 + rnd() * 0.05) * (1.3 - density * 0.6), bh = h * (0.3 + rnd() * 0.7);
-        const btop = L.y * H - bh;
-        g.fillStyle = L.color;
-        g.fillRect(x, btop, bw - W * 0.002, bh + bottom);
-        mark(x, x + bw, btop - bh * 0.12);
-        if (rnd() < 0.25) g.fillRect(x + bw * 0.4, btop - bh * 0.12, bw * 0.08, bh * 0.12);
-        const cw = Math.max(2, W * 0.004), ch = Math.max(3, H * 0.009);
-        for (let wy = btop + ch * 1.5; wy < L.y * H - ch; wy += ch * 2.2) {
-          for (let wx = x + cw; wx < x + bw - cw * 2; wx += cw * 2.2) {
-            if (rnd() < (L.lights ?? 0.2)) windows.push({ x: wx, y: wy, w: cw, h: ch, p: rnd() * 100 });
-          }
-        }
-        x += bw;
-      }
-    }
-    // margins: the outline is sampled, its true peaks and dips lie a little beyond the samples
-    return { canvas: c, x0, windows, tops: tops.map(y => Math.max(0, y - 4 - H * 0.01)), solids: solids.map((y, i) => Math.min(bottom, Math.max(y, solids[i - 1] ?? y, solids[i + 1] ?? y) + 4 + H * 0.01)), stripW: sw };
-  }
-
-  // ── objects ────────────────────────────────────────────────────────────
-  function figure(ctx, x, y, s, t, color, pose, flip) {
-    ctx.save();
-    ctx.translate(x, y);
-    ctx.scale(flip ? -s : s, s);
-    ctx.fillStyle = ctx.strokeStyle = color;
-    ctx.lineCap = ctx.lineJoin = 'round';
-    const L = (w, ...p) => { ctx.lineWidth = w; ctx.beginPath(); ctx.moveTo(p[0], p[1]); for (let i = 2; i < p.length; i += 2) ctx.lineTo(p[i], p[i + 1]); ctx.stroke(); };
-    const C = (cx, cy, r) => { ctx.beginPath(); ctx.arc(cx, cy, r, 0, 7); ctx.fill(); };
-    const b = Math.sin(t * 1.3) * 0.008;
-    if (pose === 'sit') {
-      L(0.16, 0, -0.08, -0.28, -0.4); L(0.11, -0.28, -0.4, -0.33, -0.05);
-      ctx.beginPath(); ctx.moveTo(0.13, -0.02); ctx.bezierCurveTo(0.22, -0.22, 0.18, -0.46, 0.05, -0.6 - b);
-      ctx.lineTo(-0.08, -0.57 - b); ctx.bezierCurveTo(-0.1, -0.4, -0.06, -0.2, -0.04, -0.06); ctx.fill();
-      L(0.075, 0.02, -0.52, -0.16, -0.46, -0.31, -0.36); C(-0.13, -0.69 - b, 0.11);
-    } else {
-      const walk = pose === 'walk' ? Math.sin(t * 3) * 0.08 : 0;
-      L(0.1, -0.05, -0.4, -0.06 + walk, -0.02); L(0.1, 0.05, -0.4, 0.06 - walk, -0.02);
-      ctx.beginPath(); ctx.moveTo(-0.11, -0.76 - b); ctx.quadraticCurveTo(-0.17, -0.74, -0.17, -0.64);
-      ctx.lineTo(-0.19, -0.34); ctx.lineTo(0.19, -0.34); ctx.lineTo(0.17, -0.64);
-      ctx.quadraticCurveTo(0.17, -0.74, 0.11, -0.76 - b); ctx.fill();
-      L(0.08, -0.16, -0.68, -0.2 - walk * 0.5, -0.42); L(0.08, 0.16, -0.68, 0.2 + walk * 0.5, -0.42);
-      C(pose === 'back' ? 0 : 0.02, -0.87 - b, 0.11);
-    }
-    ctx.restore();
-  }
-
-  // W × H: the stage, in pixels
-  function drawObject(ctx, o, W, H, t, lightsOut) {
-    const x = o.x * W, y = o.y * H, s = o.size * H, col = o.color;
-    const light = o.light ? rgb(o.light) : null, fl = 0.9 + 0.1 * Math.sin(t * 7 + x) * Math.sin(t * 3.1 + y);
-    ctx.fillStyle = ctx.strokeStyle = col;
-    ctx.lineCap = ctx.lineJoin = 'round';
-    switch (o.kind) {
-      case 'pine': drawPine(ctx, x, y, s, col, seeded(hash(o.x + ':' + o.y))); break;
-      case 'tree': {
-        const sw = Math.sin(t * 0.8 + x) * s * 0.01;
-        ctx.fillRect(x - s * 0.03, y - s * 0.5, s * 0.06, s * 0.5);
-        for (const [dx, dy, r] of [[0, -0.72, 0.28], [-0.18, -0.58, 0.2], [0.18, -0.6, 0.21], [0.05, -0.9, 0.18]]) {
-          ctx.beginPath(); ctx.arc(x + dx * s + sw, y + dy * s, r * s, 0, 7); ctx.fill();
-        }
-        break;
-      }
-      case 'house': {
-        const w = s * 0.9, h = s * 0.55;
-        ctx.fillRect(x - w / 2, y - h, w, h);
-        ctx.beginPath(); ctx.moveTo(x - w * 0.6, y - h); ctx.lineTo(x, y - s); ctx.lineTo(x + w * 0.6, y - h); ctx.fill();
-        ctx.fillRect(x + w * 0.2, y - s * 0.92, w * 0.1, s * 0.2);
-        if (light) lightsOut.push({ x: x - w * 0.15, y: y - h * 0.55, r: s * 0.9, col: light, a: 0.4 * fl, rect: [x - w * 0.27, y - h * 0.72, w * 0.22, h * 0.3] });
-        break;
-      }
-      case 'tower': {
-        const w = s * 0.22;
-        ctx.fillRect(x - w / 2, y - s * 0.85, w, s * 0.85);
-        ctx.beginPath(); ctx.moveTo(x - w * 0.7, y - s * 0.85); ctx.lineTo(x, y - s); ctx.lineTo(x + w * 0.7, y - s * 0.85); ctx.fill();
-        if (light) lightsOut.push({ x, y: y - s * 0.7, r: s * 0.5, col: light, a: 0.4 * fl, rect: [x - w * 0.18, y - s * 0.75, w * 0.36, s * 0.08] });
-        break;
-      }
-      case 'lamp': {
-        ctx.lineWidth = s * 0.03;
-        ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x, y - s); ctx.quadraticCurveTo(x, y - s * 1.05, x + s * 0.12, y - s * 1.02); ctx.stroke();
-        ctx.fillRect(x + s * 0.06, y - s * 1.02, s * 0.12, s * 0.05);
-        if (light) lightsOut.push({ x: x + s * 0.12, y: y - s * 0.95, r: s * 1.4, col: light, a: 0.45 * fl, dot: s * 0.04, cone: { y, w: s * 0.6 } });
-        break;
-      }
-      case 'lantern': {
-        const sway = Math.sin(t * 1.2 + x) * s * 0.05;
-        ctx.lineWidth = Math.max(1, s * 0.02);
-        ctx.beginPath(); ctx.moveTo(x, y - s * 0.6); ctx.lineTo(x + sway, y - s * 0.15); ctx.stroke();
-        ctx.fillRect(x + sway - s * 0.08, y - s * 0.15, s * 0.16, s * 0.2);
-        if (light) lightsOut.push({ x: x + sway, y: y - s * 0.05, r: s * 1.2, col: light, a: 0.5 * fl, dot: s * 0.07 });
-        break;
-      }
-      case 'campfire': {
-        ctx.lineWidth = s * 0.08;
-        ctx.beginPath(); ctx.moveTo(x - s * 0.3, y); ctx.lineTo(x + s * 0.25, y - s * 0.08); ctx.moveTo(x + s * 0.3, y); ctx.lineTo(x - s * 0.25, y - s * 0.08); ctx.stroke();
-        const fc = light || '255,150,60';
-        for (let i = 0; i < 3; i++) {
-          const fh = s * (0.5 + 0.2 * Math.sin(t * 9 + i * 2)), fw = s * (0.16 - i * 0.03);
-          ctx.fillStyle = `rgba(${i === 2 ? '255,230,170' : fc},${0.85 - i * 0.15})`;
-          ctx.beginPath(); ctx.moveTo(x - fw, y - s * 0.05); ctx.quadraticCurveTo(x - fw * 0.6, y - fh * 0.6, x + Math.sin(t * 5 + i) * s * 0.05, y - fh);
-          ctx.quadraticCurveTo(x + fw * 0.6, y - fh * 0.6, x + fw, y - s * 0.05); ctx.fill();
-        }
-        lightsOut.push({ x, y: y - s * 0.25, r: s * 3, col: fc, a: 0.4 * (0.8 + 0.2 * Math.sin(t * 11)) });
-        break;
-      }
-      case 'window': {
-        const w = s * 0.6;
-        if (light) lightsOut.push({ x, y: y - s / 2, r: s * 1.3, col: light, a: 0.35 * fl, rect: [x - w / 2, y - s, w, s] });
-        ctx.lineWidth = Math.max(2, s * 0.05);
-        ctx.strokeRect(x - w / 2, y - s, w, s);
-        ctx.beginPath(); ctx.moveTo(x, y - s); ctx.lineTo(x, y); ctx.moveTo(x - w / 2, y - s * 0.55); ctx.lineTo(x + w / 2, y - s * 0.55); ctx.stroke();
-        break;
-      }
-      case 'boat': {
-        const bob = Math.sin(t * 1.1 + x) * s * 0.03;
-        ctx.beginPath(); ctx.moveTo(x - s * 0.6, y - s * 0.12 + bob); ctx.quadraticCurveTo(x, y + s * 0.08 + bob, x + s * 0.6, y - s * 0.12 + bob); ctx.lineTo(x - s * 0.6, y - s * 0.12 + bob); ctx.fill();
-        ctx.lineWidth = s * 0.025;
-        ctx.beginPath(); ctx.moveTo(x, y - s * 0.1 + bob); ctx.lineTo(x, y - s + bob); ctx.stroke();
-        ctx.beginPath(); ctx.moveTo(x + s * 0.03, y - s * 0.95 + bob); ctx.lineTo(x + s * 0.4, y - s * 0.2 + bob); ctx.lineTo(x + s * 0.03, y - s * 0.2 + bob); ctx.fill();
-        break;
-      }
-      case 'rock': {
-        const r = seeded(hash(o.x + 'r' + o.y));
-        ctx.beginPath(); ctx.moveTo(x - s * 0.7, y);
-        for (let i = 0; i <= 6; i++) { const a = Math.PI * (1 - i / 6); ctx.lineTo(x + Math.cos(a) * s * (0.6 + r() * 0.2), y - Math.sin(a) * s * (0.7 + r() * 0.3)); }
-        ctx.closePath(); ctx.fill();
-        break;
-      }
-      case 'bench': {
-        ctx.fillRect(x - s * 0.8, y - s * 0.45, s * 1.6, s * 0.08);
-        ctx.fillRect(x - s * 0.8, y - s * 0.85, s * 1.6, s * 0.07);
-        ctx.fillRect(x - s * 0.7, y - s * 0.45, s * 0.06, s * 0.45); ctx.fillRect(x + s * 0.64, y - s * 0.45, s * 0.06, s * 0.45);
-        ctx.fillRect(x - s * 0.7, y - s * 0.85, s * 0.05, s * 0.4); ctx.fillRect(x + s * 0.65, y - s * 0.85, s * 0.05, s * 0.4);
-        break;
-      }
-      case 'figure': figure(ctx, x, y, s, t, col, o.pose || 'stand', o.flip); break;
-      case 'cat': {
-        ctx.beginPath(); ctx.ellipse(x, y - s * 0.3, s * 0.22, s * 0.3, 0, 0, 7); ctx.fill();
-        ctx.beginPath(); ctx.arc(x, y - s * 0.72, s * 0.15, 0, 7); ctx.fill();
-        ctx.beginPath(); ctx.moveTo(x - s * 0.14, y - s * 0.78); ctx.lineTo(x - s * 0.1, y - s * 0.98); ctx.lineTo(x - s * 0.02, y - s * 0.84);
-        ctx.moveTo(x + s * 0.14, y - s * 0.78); ctx.lineTo(x + s * 0.1, y - s * 0.98); ctx.lineTo(x + s * 0.02, y - s * 0.84); ctx.fill();
-        ctx.lineWidth = s * 0.06;
-        ctx.beginPath(); ctx.moveTo(x + s * 0.18, y - s * 0.05);
-        ctx.quadraticCurveTo(x + s * 0.5, y - s * 0.05, x + s * (0.45 + Math.sin(t * 1.5) * 0.08), y - s * 0.4); ctx.stroke();
-        break;
-      }
-      case 'bird': {
-        const span = WIDEST * H + 4 * s, bx = ((x + t * s * 1.5 * (o.flip ? -1 : 1)) % span + span) % span + (W - WIDEST * H) / 2 - 2 * s;
-        const by = y + Math.sin(t * 0.7 + x) * s * 0.4, fl2 = Math.sin(t * 8 + x) * s * 0.25;
-        ctx.lineWidth = Math.max(1.5, s * 0.08);
-        ctx.beginPath(); ctx.moveTo(bx - s * 0.5, by - fl2); ctx.quadraticCurveTo(bx - s * 0.2, by - s * 0.15, bx, by);
-        ctx.quadraticCurveTo(bx + s * 0.2, by - s * 0.15, bx + s * 0.5, by - fl2); ctx.stroke();
-        break;
-      }
-      case 'flower': {
-        const sw = Math.sin(t * 1.4 + x) * s * 0.06;
-        ctx.lineWidth = Math.max(1, s * 0.04);
-        ctx.beginPath(); ctx.moveTo(x, y); ctx.quadraticCurveTo(x, y - s * 0.5, x + sw, y - s * 0.9); ctx.stroke();
-        ctx.fillStyle = light ? `rgb(${light})` : col;
-        for (let i = 0; i < 5; i++) { const a = i / 5 * Math.PI * 2 + t * 0.2; ctx.beginPath(); ctx.ellipse(x + sw + Math.cos(a) * s * 0.1, y - s * 0.9 + Math.sin(a) * s * 0.1, s * 0.09, s * 0.05, a, 0, 7); ctx.fill(); }
-        break;
-      }
-      case 'bridge': {
-        ctx.lineWidth = s * 0.08;
-        ctx.beginPath(); ctx.moveTo(x - s * 1.5, y); ctx.quadraticCurveTo(x, y - s * 0.9, x + s * 1.5, y); ctx.stroke();
-        ctx.lineWidth = s * 0.03;
-        ctx.beginPath(); ctx.moveTo(x - s * 1.5, y - s * 0.2); ctx.quadraticCurveTo(x, y - s * 1.15, x + s * 1.5, y - s * 0.2); ctx.stroke();
-        for (let i = -4; i <= 4; i++) { const u = i / 4.5, yy = y - s * 0.45 * (1 - u * u) * 1.0; ctx.beginPath(); ctx.moveTo(x + u * s * 1.4, yy); ctx.lineTo(x + u * s * 1.4, yy - s * 0.22); ctx.stroke(); }
-        break;
-      }
-      case 'custom': case undefined: paintCustom(ctx, o, W, H, t, lightsOut); break;
-      default: throw new Error(`unknown object kind ${o.kind}`);
-    }
-  }
-
-  // Elements the world's agent paints itself. `o.code` is the body of a function (g, e):
-  // g is a 2D canvas context in metres — origin at the element's anchor (where it stands),
-  // x to the right, y DOWN (a 6 m house spans y −6…0). e.t = seconds by the real clock (e.phase =
-  // 0…1 of the loop for animated elements), e.id = the element's id, e.rnd() = seeded random, e.px = one screen pixel in metres,
-  // e.light(x, y, radius, color, strength) = a glowing light the engine animates. What scenes
-  // share (kit.js): e.anim — the animator's toolkit; e.kit — the world's modules; e.lib — the scene's
-  // lib. e.was(key, ago) — what a value of the state was `ago` seconds ago (what lags behind reads
-  // it); e.speed(key) — how fast it is changing now (per second).
-  // Errors are collected (window.__mooodErrors) so the agent reviewing its work sees them.
-  // The scene's state (scenestate.js): values the scene's scripts, agents and widgets set, which
-  // the painting code reads as e.state; ver counts changes, so the renderer knows to repaint.
-  const STATE = { values: {}, ver: 0, was: key => STATE.values[key], sample: null };
-  // what the shown scene's code shares (kit.js): the world's modules it lists and the scene's lib
-  let SHARED = { kit: {}, lib: {} };
-  // Where an element is now, as its painting code says (e.at): fractions of the stage as seen
-  // from the start — speech bubbles and widgets follow it (stage.screenOf).
-  const FOCUS = new Map();
-  // A platformer's hero as it moves now (camera.mode platform): its painting code reads e.hero —
-  // { vx, vy (m/s), ground } — to move its legs; the engine moves and turns the painting itself.
-  const HERO = { id: null, vx: 0, vy: 0, ground: true };
-  // What an element's code read as it was last painted (element → {time, state}): one that reads
-  // the time is repainted every frame, one that reads only the state when the state changes, one
-  // that reads neither stays as painted (gl.js) — whether it reads them itself or through the kit
-  const READS = new WeakMap();
-  const compiled = new Map();
-  function reportError(o, err) {
-    const msg = `${o.name || o.kind}: ${err && err.message || err}`;
-    (window.__mooodErrors = window.__mooodErrors || []).push(msg);
-    console.warn('moood custom element:', msg);
-  }
-  function paintCustom(ctx, o, W, H, t, lightsOut) {
-    const code = String(o.code || '');
-    let fn = compiled.get(code);
-    if (fn === undefined) {
-      try { fn = new Function('g', 'e', code); } catch (err) { fn = null; reportError(o, err); }
-      compiled.set(code, fn);
-    }
-    if (!fn) return;
-    // sky and ground elements are painted in stage heights from the stage's top-left corner, as
-    // seen from the start (x 0…W/H, y 0…1, with margins); others in metres from their anchor
-    const flat = o.sky || o.ground;
-    const ppm = flat ? H : o.size * H / (o.height || 2), x = flat ? 0 : o.x * W, y = flat ? 0 : o.y * H;
-    ctx.save();
-    ctx.translate(x, y);
-    ctx.scale(ppm, ppm);
-    ctx.fillStyle = ctx.strokeStyle = o.color || '#000000';
-    ctx.lineCap = ctx.lineJoin = 'round';
-    const period = o.period || 2;
-    // a point the code names, as painted — through whatever it did to the canvas since (translate,
-    // scale, rotate): [x, y, how much it is scaled]
-    const base = ctx.getTransform(), unbase = base.inverse();
-    const painted = (lx, ly) => {
-      const now = ctx.getTransform(), q = unbase.transformPoint(now.transformPoint({ x: lx, y: ly }));
-      return [x + q.x * ppm, y + q.y * ppm, Math.hypot(now.a, now.b) / Math.hypot(base.a, base.b)];
-    };
-    const read = { time: false, state: false };
-    READS.set(o, read);
-    const e = {
-      get t() { read.time = true; return t; },
-      get phase() { read.time = true; return ((t / period) % 1 + 1) % 1; },
-      get state() { read.state = true; return STATE.values; },
-      id: o.id ?? null, rnd: seeded(hash(code) ^ hash(o.x + ':' + o.y)),
-      px: 1 / Math.max(1e-6, base.a), W, H, aspect: W / H,
-      light(lx, ly, r, color = '#ffd08a', strength = 0.6) {
-        try {
-          const [px, py, k] = painted(lx, ly);
-          lightsOut.push({ x: px, y: py, r: r * k * ppm, col: rgb(color), a: strength, flicker: o.flicker ?? 0.3 });
-        } catch (err) { reportError(o, err); }
-      },
-      // where this element is now (its head, say): what speaks or hovers over it follows this point
-      at(lx, ly) { if (o.id) { const [px, py] = painted(lx, ly); FOCUS.set(o.id, { x: px / W, y: py / H }); } },
-      anim: MooodKit.anim, kit: SHARED.kit, lib: SHARED.lib,
-      was: (key, ago = 0) => { read.state = true; return STATE.was(key, ago); },
-      speed: key => { read.state = true; const a = STATE.was(key, 0), b = STATE.was(key, 0.05); return typeof a === 'number' && typeof b === 'number' ? (a - b) / 0.05 : 0; },
-    };
-    if (o.id && o.id === HERO.id) { read.time = true; e.hero = { vx: HERO.vx, vy: HERO.vy, ground: HERO.ground }; }
-    try { fn(ctx, e); } catch (err) { reportError(o, err); }
-    ctx.restore();
-  }
-  // The box an object's painting fits in (pixels of the W × H stage): built-in kinds a fixed frame
-  // around the base, custom ones their `box` in metres (default: a little wider than tall).
-  function objectBox(o, W, H) {
-    // the sky: as wide as the widest frame
-    if (o.sky) return { bx: (W - WIDEST * H) / 2, by: -0.35 * H, bw: WIDEST * H, bh: 1.6 * H };
-    // ground: from the horizon down, wider than the screen (for stepping aside and looking down)
-    if (o.ground) return { bx: -EXT * W, by: o._yh * H, bw: (1 + 2 * EXT) * W, bh: (1.7 - o._yh) * H };
-    const s = Math.max(2, o.size * H), x = o.x * W, y = o.y * H;
-    if (o.kind === 'custom' || !o.kind) {
-      const h = o.height || 2, ppm = s / h, b = Array.isArray(o.box) && o.box.length === 4 ? o.box : [-0.8 * h, -1.1 * h, 0.8 * h, 0.15 * h];
-      return { bx: x + b[0] * ppm, by: y + b[1] * ppm, bw: (b[2] - b[0]) * ppm, bh: (b[3] - b[1]) * ppm };
-    }
-    return { bx: x - 1.7 * s, by: y - 1.3 * s, bw: 3.4 * s, bh: 1.6 * s };
-  }
-
-  function drawLights(ctx, lights) {
-    for (const l of lights) {
-      if (l.rect) { ctx.fillStyle = `rgba(${l.col},${Math.min(1, l.a * 2.2)})`; ctx.fillRect(...l.rect); }
-    }
-    ctx.save();
-    ctx.globalCompositeOperation = 'lighter';
-    for (const l of lights) {
-      glow(ctx, l.x, l.y, l.r, l.col, l.a * 0.6);
-      if (l.dot) glow(ctx, l.x, l.y, l.dot * 3, '255,245,220', 0.9);
-      if (l.cone) {
-        const g = ctx.createLinearGradient(0, l.y, 0, l.cone.y);
-        g.addColorStop(0, `rgba(${l.col},${l.a * 0.35})`);
-        g.addColorStop(1, `rgba(${l.col},0)`);
-        ctx.fillStyle = g;
-        ctx.beginPath(); ctx.moveTo(l.x - l.dot, l.y); ctx.lineTo(l.x + l.dot, l.y); ctx.lineTo(l.x + l.cone.w, l.cone.y); ctx.lineTo(l.x - l.cone.w, l.cone.y); ctx.fill();
-      }
-    }
-    ctx.restore();
-  }
-
-  // ── particles ──────────────────────────────────────────────────────────
-  const PARTICLES = { snow: 380, rain: 520, fireflies: 45, dust: 140, petals: 90, embers: 90, leaves: 60, bubbles: 60 };
-  function makeParticles(p, W, H, rnd) {
-    const n = Math.round((PARTICLES[p.kind] ?? (() => { throw new Error(`unknown particle ${p.kind}`); })()) * clamp(p.density ?? 0.5, 0, 1) * (W / H) / (16 / 9)); // same count at any resolution
-    return Array.from({ length: n }, () => ({ x: rnd() * W, y: rnd() * H, z: rnd(), ph: rnd() * 7, life: rnd() }));
-  }
-  // Particle motion (shared by the 2D and WebGL renderers). Positions are screen pixels.
-  function moveParticle(kind, q, W, H, t, dt, u, wind) {
-    switch (kind) {
-      case 'rain':
-        q.y += (700 + q.z * 500) * u * dt; q.x += wind * 3 * dt;
-        if (q.y > H) { q.y = -20 * u; q.x = Math.random() * W; }
-        return;
-      case 'snow': q.y += (25 + q.z * 60) * u * dt; q.x += (wind + Math.sin(t * 0.8 + q.ph) * 12 * u) * dt; break;
-      case 'dust': q.y += Math.sin(t * 0.3 + q.ph) * 6 * u * dt; q.x += (wind * 0.3 + 5 * u) * dt; break;
-      case 'petals': case 'leaves': q.y += (30 + q.z * 40) * u * dt; q.x += (wind + Math.sin(t + q.ph) * 30 * u) * dt; break;
-      case 'fireflies': q.x += Math.sin(t * 0.4 + q.ph) * 14 * u * dt; q.y += Math.cos(t * 0.33 + q.ph * 2) * 10 * u * dt; break;
-      case 'embers': q.y -= (40 + q.z * 60) * u * dt; q.x += (wind * 0.5 + Math.sin(t * 2 + q.ph) * 15 * u) * dt; break;
-      case 'bubbles': q.y -= (20 + q.z * 40) * u * dt; q.x += Math.sin(t * 1.5 + q.ph) * 10 * u * dt; break;
-      default: throw new Error(`unknown particle ${kind}`);
-    }
-    if (q.y > H + 20 * u) { q.y = -20 * u; q.x = Math.random() * W; }
-    if (q.y < -20 * u) { q.y = H + 20 * u; q.x = Math.random() * W; }
-    if (q.x > W + 20 * u) q.x -= W + 40 * u; else if (q.x < -20 * u) q.x += W + 40 * u;
-  }
-
-  function stepParticles(ctx, p, list, W, H, t, dt, u) {
-    const col = rgb(p.color || '#ffffff'), wind = (p.wind ?? 0) * 60 * u;
-    ctx.save();
-    if (p.kind === 'rain') {
-      ctx.strokeStyle = `rgba(${col},0.28)`; ctx.lineWidth = Math.max(1, u);
-      ctx.beginPath();
-      for (const q of list) {
-        moveParticle('rain', q, W, H, t, dt, u, wind);
-        const len = (10 + q.z * 16) * u;
-        ctx.moveTo(q.x, q.y); ctx.lineTo(q.x + wind * 0.02, q.y + len);
-      }
-      ctx.stroke();
-      ctx.restore();
-      return;
-    }
-    if (p.kind === 'fireflies' || p.kind === 'embers') ctx.globalCompositeOperation = 'lighter';
-    for (const q of list) {
-      moveParticle(p.kind, q, W, H, t, dt, u, wind);
-      const r = (1 + q.z * 3) * u;
-      if (p.kind === 'fireflies') {
-        const a = 0.25 + 0.75 * Math.pow(0.5 + 0.5 * Math.sin(t * 1.6 + q.ph * 3), 3);
-        glow(ctx, q.x, q.y, 18 * u, col, a * 0.6);
-      } else if (p.kind === 'embers') {
-        glow(ctx, q.x, q.y, 8 * u, col, 0.6 * (0.5 + 0.5 * Math.sin(t * 5 + q.ph)));
-      } else if (p.kind === 'petals' || p.kind === 'leaves') {
-        ctx.fillStyle = `rgba(${col},0.85)`;
-        ctx.save(); ctx.translate(q.x, q.y); ctx.rotate(t * (0.5 + q.z) + q.ph); ctx.scale(1, Math.abs(Math.sin(t * 2 + q.ph)) * 0.8 + 0.2);
-        ctx.beginPath(); ctx.ellipse(0, 0, r * (p.kind === 'leaves' ? 2.4 : 1.6), r, 0, 0, 7); ctx.fill(); ctx.restore();
-      } else if (p.kind === 'bubbles') {
-        ctx.strokeStyle = `rgba(${col},0.5)`; ctx.lineWidth = Math.max(1, u * 0.8);
-        ctx.beginPath(); ctx.arc(q.x, q.y, r * 1.5, 0, 7); ctx.stroke();
-      } else {
-        ctx.fillStyle = `rgba(${col},${p.kind === 'dust' ? 0.35 : 0.3 + q.z * 0.55})`;
-        ctx.beginPath(); ctx.arc(q.x, q.y, p.kind === 'dust' ? r * 0.5 : r, 0, 7); ctx.fill();
-      }
-    }
-    ctx.restore();
-  }
-
-  // ── camera ─────────────────────────────────────────────────────────────
-  // A multiplane camera, the way 2.5D games do it: every layer and object is a flat
-  // cut-out standing at a real distance Z, seen through a perspective camera. Distances
-  // come from the picture itself: the eye is 1 unit above flat ground and the horizon is
-  // at screen height yh, so ground painted h (screen heights) below the horizon is 1/h
-  // away. Sky, sun, moon and stars are at infinity: walking never moves them.
-  // cam = { x: steps sideways, z: steps forward (world units, eye heights), y: gaze — down (+) / up (−) }.
-  const Z_NEAR = 0.6, Z_FAR = 150; // in eye heights (1.7 m)
-  const LAND = new Set(['mountains', 'hills', 'dunes', 'forest', 'city', 'water', 'ground']);
-  const depthAt = (y, yh) => (y > yh + 0.0125 ? clamp(1 / (y - yh), Z_NEAR, Z_FAR) : Z_FAR);
-  // The horizon is the base of the farthest landscape layer. Clouds and fog stand just
-  // behind the next nearer landscape layer (or in front of the last one).
-  // Typical heights (m) of what the scene may hold, and the viewer's eye height.
-  const EYE = 1.7;
-  const HEIGHT = { pine: 15, tree: 8, house: 6, tower: 18, lamp: 4, lantern: 2.2, campfire: 0.6, boat: 4, rock: 1, bench: 0.9, figure: 1.75, cat: 0.3, flower: 0.35, bridge: 3 };
-  // The horizon is at eye level, so it crosses everything standing on the ground at 1.7 m:
-  // a person at the eyes, a house low on its wall, a bench not at all. Each object painted
-  // `size` tall at `y` suggests a horizon at y − size·EYE/height; the median of those is
-  // the eye level of the scene (without objects: the base of the farthest landscape layer).
-  function horizonOf(spec, host) {
-    // (lanterns often hang in the air: they don't vote)
-    const guesses = (spec.objects || []).filter(o => HEIGHT[o.kind] && o.kind !== 'lantern' && !host(o) && o.size > 0)
-      .map(o => o.y - o.size * EYE / (o.kind === 'figure' && o.pose === 'sit' ? 1.2 : HEIGHT[o.kind]))
-      .sort((a, b) => a - b);
-    if (guesses.length) return clamp(guesses[guesses.length >> 1], 0.2, 0.95);
-    const land = (spec.layers || []).filter(L => LAND.has(L.kind));
-    return land.length ? Math.min(...land.map(L => L.y)) : 0.6;
-  }
-  function depths(spec) {
-    const layers = spec.layers || [];
-    // An object stands where its base is — unless it is attached to a bigger one (a window on
-    // a wall, a lantern on a porch): its base inside the other's outline. Then it shares that depth.
-    const objs = spec.objects || [];
-    const host = o => objs.find(h => h !== o && h.kind !== 'bird' && h.size > o.size &&
-      Math.abs(o.x - h.x) * 16 / 9 < h.size * 0.6 && o.y > h.y - h.size && o.y < h.y + 0.01);
-    // the director may set the eye level explicitly (spec.horizon); else it is estimated
-    const yh = typeof spec.horizon === 'number' ? clamp(spec.horizon, 0.05, 0.95) : horizonOf(spec, host);
-    const Z = layers.map(L => (LAND.has(L.kind) ? depthAt(L.y, yh) : null));
-    for (let i = 0; i < Z.length; i++) {
-      if (Z[i] !== null) continue;
-      const next = Z.slice(i + 1).find(z => z !== null), prev = Z.slice(0, i).reverse().find(z => z !== null);
-      Z[i] = next !== undefined ? next * 1.05 : prev !== undefined ? prev * 0.95 : Z_FAR;
-    }
-    // How far an object is: from how big it looks for what it is (a house painted 16% of
-    // the screen tall is ~22 eye heights away) — robust, unlike the height of its base above
-    // the horizon, which blows up for things painted near the horizon line.
-    // And so everything agrees on the eye level, each ground-standing object's base is nudged
-    // (usually 1–3% of the screen) to where, at that distance, it meets the ground:
-    // yh + size·EYE/height. Attached things move with their host; hanging lanterns stay.
-    const realH = o => (o.kind === 'figure' && o.pose === 'sit' ? 1.2 : HEIGHT[o.kind]);
-    const own = o => (realH(o) && o.size > 0 ? clamp(realH(o) / EYE / o.size, Z_NEAR, Z_FAR) : depthAt(o.y, yh));
-    const shift = o => {
-      const h = host(o);
-      if (h) return shift(h);
-      return realH(o) && o.size > 0 && o.kind !== 'lantern' ? yh + o.size * EYE / realH(o) - o.y : 0;
-    };
-    // Custom elements say where they are: `distance` (m) or `y` (where they touch the ground),
-    // plus `elevation` (m above the ground) and `height` (m); size on screen follows. Beyond Z_FAR
-    // an element is laid at Z_FAR (it barely moves as you walk anyway) but sized and placed on
-    // screen for its real distance — a range 8 km away looks 8 km away, not 30 times bigger.
-    const customZ = o => (o.distance > 0 ? clamp(o.distance / EYE, Z_NEAR, Z_FAR) : depthAt(o.y, yh));
-    const sightZ = o => (o.distance > 0 ? Math.max(Z_NEAR, o.distance / EYE) : depthAt(o.y, yh));
-    const custom = o => o.kind === 'custom' || !o.kind;
-    // across the view: `x` — where it is seen from the start, a fraction of the stage's width; or
-    // `across` — metres to the right of the start's line of sight (left: negative); or, looking
-    // around (around, roam), `bearing` — degrees from straight ahead (right: positive), with its
-    // `distance`: such an element is painted as if straight ahead, and stood where it is
-    const planeZ = o => (o.distance > 0 ? o.distance : 10) / EYE;
-    const bearing = o => typeof o.bearing === 'number' && o.distance > 0 && !o.sky;
-    const paintZ = o => (o.plane ? planeZ(o) : custom(o) ? sightZ(o) : own(host(o) || o));
-    const objectX = o => (bearing(o) ? 0.5 : typeof o.across === 'number' && !o.sky ? 0.5 + o.across / EYE / STAGE / paintZ(o) : o.x ?? 0.5);
-    const objectY = o => (o.sky || o.ground ? 0 : custom(o) ? yh + (1 - (o.elevation || 0) / EYE) / sightZ(o) : o.kind === 'bird' ? o.y : o.y + shift(o));
-    return {
-      yh, Z, objectX,
-      // where it stands in the world (eye heights: X to the right, Z ahead, Y its anchor's
-      // height) and the distance Zp it is painted for
-      objectAt: o => {
-        const Zp = paintZ(o), Y = 1 - (objectY(o) - yh) * Zp;
-        if (!bearing(o)) return { X: (objectX(o) - 0.5) * STAGE * Zp, Y, Z: Zp, Zp };
-        const b = o.bearing * Math.PI / 180, d = o.distance / EYE;
-        return { X: d * Math.sin(b), Y, Z: d * Math.cos(b), Zp };
-      },
-      // ground planes are drawn right after the sky, under everything standing on them
-      // a horizontal plane (gl.js) is ordered by its far edge, before what stands on it
-      objectZ: o => (o.sky ? Infinity : o.ground ? Z_FAR * 4 : o.plane ? clamp(planeZ(o) + (o.depth || 4) / 2 / EYE, Z_NEAR, Z_FAR) : custom(o) ? customZ(o) : o.kind === 'bird' ? 30 : own(host(o) || o)),
-      objectY,
-      objectSize: o => (o.sky || o.ground ? 1 : custom(o) ? (o.height || 2) / EYE / sightZ(o) : o.size),
-    };
-  }
-  // Screen transform [a b c d e f] for a plane at distance Z (Infinity = the sky): maps the
-  // scene as painted from the starting spot (on the stage) to the frame (W × H) from where the
-  // camera is now.
-  // Walking forward grows a plane by Z/(Z−z) around the vanishing point on the horizon.
-  // A camera raised to cam.h eye heights (1 = standing) sees a plane (h − 1)/D lower: things
-  // stay upright, the ground opens up below — a raised camera with a shifted, not tilted, lens.
-  function view(cam, Z, W, H, yh) {
-    if (!isFinite(Z)) return [1, 0, 0, 1, (W - STAGE * H) / 2, -cam.y * H];
-    const D = Math.max(1e-3, Z - cam.z), s = Z / D;
-    return [s, 0, 0, s, (W - s * STAGE * H) / 2 - H * cam.x / D, yh * H * (1 - s) - cam.y * H + H * ((cam.h ?? 1) - 1) / D];
-  }
-  // Looking around (around, roam): the camera also turns, cam.yaw radians (clockwise, 0 = the
-  // start's straight ahead). A point of the world (X, Y, Z eye heights) is seen at
-  // [x, y, its depth along the gaze], or null behind the eye. With yaw 0 it is what view() does.
-  function project(cam, X, Y, Z, W, H, yh) {
-    const rx = X - cam.x, rz = Z - cam.z, c = Math.cos(cam.yaw || 0), s = Math.sin(cam.yaw || 0);
-    const x = rx * c - rz * s, z = rx * s + rz * c;
-    if (z < 0.05) return null;
-    return [W / 2 + H * x / z, yh * H + H * ((cam.h ?? 1) - Y) / z - cam.y * H, z];
-  }
-  // An element as a card facing the eye: p = { X, Y, Z, Zp } and its anchor as painted (ax, ay):
-  // { m: screen transform of its painting, D: its depth }, or null when behind the eye
-  function billboard(cam, p, ax, ay, W, H, yh) {
-    const q = project(cam, p.X, p.Y, p.Z, W, H, yh);
-    if (!q) return null;
-    const s = p.Zp / q[2];
-    return { m: [s, 0, 0, s, q[0] - s * ax, q[1] - s * ay], D: q[2] };
-  }
-  // Where an element's painting (as depths() places it on the SW-wide stage) goes on the frame from
-  // camera cam: { m: the transform, D: its distance along the gaze }, or null behind the eye
-  function placeOf(o, cam, W, H, dz, round) {
-    if (!round) { const Z = dz.objectZ(o); return { m: view(cam, Z, W, H, dz.yh), D: Z - cam.z }; }
-    return billboard(cam, dz.objectAt(o), dz.objectX(o) * STAGE * H, dz.objectY(o) * H, W, H, dz.yh);
-  }
-  // The hero of a platformer h = { dx, dy (metres from where it is painted), flip } as a transform
-  // of its painting: its anchor painted at x = ax, `ppm` painted px per metre
-  const heroMatrix = (h, ax, ppm) => [h.flip ? -1 : 1, 0, 0, 1, (h.flip ? 2 * ax : 0) + h.dx * ppm, -h.dy * ppm];
-  // The full circle of the sky looking around: painted 2π stage heights wide, straight ahead in
-  // its middle; seen through the frame as a cylinder.
-  const TAU = 2 * Math.PI;
-  // Where you may walk and look (limitCam). Walking forward: as far as the things standing in the
-  // scene (not the far ones laid at Z_FAR — painted mountains, flat up close).
-  // An object painted at stage x, Z away, stands at world x = (x − ½)·STAGE·Z (+ its box centre).
-  const LOOK_UP = -0.3, LOOK_DOWN = 0.2, WALK_BACK = -0.6, TRACK = 40 / EYE, ROOM = 30 / EYE;
-  // The scene's camera (spec.camera) — how the viewer moves through it, one of:
-  //   picture — a still picture: the camera stands, breathes a little and leans toward the
-  //     pointer (or the phone's tilt), so the near things shift against the far ones;
-  //   walk — stand at eye level and walk: forward and back, sideways, look up and down (default);
-  //   panorama — a long place passed along sideways (a park alley, a street, a shore): along it
-  //     as far as `span` [left, right] metres from the start, else as far as the things within
-  //     TRACK of the viewer reach; the wheel comes closer as when walking, and closer you still
-  //     pass along at that depth;
-  //   overhead — raised `height` metres and looking down (`look`, screen heights): a map, a yard,
-  //     a board; moving over it and closer;
-  //   around — stand at one spot and turn your head all around (or within `turn` degrees either
-  //     way) and up and down: things stand all around you (`bearing`);
-  //   roam — walk about a place and look anywhere, as in a room: within `area` [left, right,
-  //     back, front] metres of the start, else among the things standing around;
-  //   platform — a platformer seen from the side: you run and jump as the `hero` element over
-  //     the `solid` ones, the camera riding along (the mount's platform section).
-  // Looking around, elements are cards standing up in the world, facing the eye — or, with
-  // `facing` (degrees: where its face looks), turned their own way, like a wall or a cupboard.
-  // `follow`: elements the camera keeps in view — it slides sideways when one is leaving the
-  // visible part of the screen (not while the viewer moves it themselves).
-  const MODES = ['picture', 'walk', 'panorama', 'overhead', 'around', 'roam', 'platform'];
-  const SWAY = { picture: 0.033 };
-  function camSetup(spec) {
-    const c = spec?.camera || {}, mode = MODES.includes(c.mode) ? c.mode : 'walk';
-    const h = mode === 'overhead' ? clamp((c.height ?? 8) / EYE, 1, 60) : 1;
-    const look = clamp(c.look ?? (mode === 'overhead' ? 0.25 : 0), -0.3, 0.45);
-    const follow = Array.isArray(c.follow) ? c.follow.filter(id => typeof id === 'string') : [];
-    const span = mode === 'panorama' && Array.isArray(c.span) && c.span.length === 2 ? [-Math.abs(c.span[0]) / EYE, Math.abs(c.span[1]) / EYE] : null;
-    const round = mode === 'around' || mode === 'roam';
-    const turn = mode === 'around' && typeof c.turn === 'number' && c.turn > 0 && c.turn < 180 ? c.turn * Math.PI / 180 : null;
-    const area = ['roam', 'walk', 'overhead'].includes(mode) && Array.isArray(c.area) && c.area.length === 4 ? c.area.map(v => Math.abs(v) / EYE) : null;
-    const hero = mode === 'platform' && typeof c.hero === 'string' ? c.hero : null;
-    return { mode, h, look, follow: round || hero ? [] : follow, sway: SWAY[mode] || 0, span, round, turn, area, hero, jump: c.jump };
-  }
-  function limits(spec, W, H) {
-    const { Z, objectZ, objectX } = depths(spec), aspect = W / H;
-    const land = (spec.layers || []).map((L, i) => (LAND.has(L.kind) ? Z[i] : null)).filter(z => z !== null);
-    const things = (spec.objects || []).filter(o => o.kind !== 'bird' && !o.sky && !o.ground && !o.plane).map(o => {
-      const z = objectZ(o), b = Array.isArray(o.box) && o.box.length === 4 ? (o.box[0] + o.box[2]) / 2 / EYE : 0;
-      return { x: (objectX(o) - 0.5) * STAGE * z + b, z };
-    });
-    // what stands in the scene shapes where you may go — not what is laid at Z_FAR
-    const real = things.filter(t => t.z < Z_FAR * 0.99), around = real.length ? real : things;
-    const far = around.length ? Math.max(...around.map(t => t.z)) : Math.max(1, ...land.filter(z => z < Z_FAR * 0.9));
-    const setup = camSetup(spec);
-    // roaming: within the area, else among the things standing within ROOM of the start, a
-    // little inside them
-    let room = null;
-    if (setup.mode === 'roam') {
-      if (setup.area) { const [l, r, b, f] = setup.area; room = [-l, r, -b, f]; }
-      else {
-        const dz = depths(spec), at = (spec.objects || []).filter(o => !o.sky && !o.ground && o.kind !== 'bird').map(o => dz.objectAt(o)).filter(p => Math.hypot(p.X, p.Z) <= ROOM);
-        const xs = [0, ...at.map(p => p.X)], zs = [0, ...at.map(p => p.Z)], k = 1 / EYE;
-        room = [Math.min(0, Math.min(...xs) + k), Math.max(0, Math.max(...xs) - k), Math.min(0, Math.min(...zs) + k), Math.max(0, Math.max(...zs) - k)];
-      }
-    }
-    return { aspect, things: around, zMax: clamp(far - 1.1, 1, 100), setup, room };
-  }
-  function limitCam(cam, lim) {
-    const s = lim.setup;
-    if (s?.round) {
-      cam.y = clamp(cam.y, s.look - 0.6, s.look + 0.6);
-      if (s.turn) cam.yaw = clamp(cam.yaw, -s.turn, s.turn);
-      if (lim.room) { cam.x = clamp(cam.x, lim.room[0], lim.room[1]); cam.z = clamp(cam.z, lim.room[2], lim.room[3]); }
-      else { cam.x = 0; cam.z = 0; }
-      return;
-    }
-    if (s?.sway) { // stays put: only the small sway
-      cam.x = clamp(cam.x, -s.sway, s.sway); cam.z = 0; cam.y = clamp(cam.y, s.look - s.sway / 3, s.look + s.sway / 3);
-      return;
-    }
-    if (s?.mode === 'platform') { // the camera rides along with the hero (the mount), over the level
-      cam.z = 0;
-      cam.y = clamp(cam.y, s.look - 0.8, s.look + 0.15);
-      if (lim.level) cam.x = clamp(cam.x, lim.level[0], lim.level[1]);
-      return;
-    }
-    if (s?.mode === 'panorama') {
-      cam.z = clamp(cam.z, 0, Math.max(lim.zMax, lim.reach ?? -Infinity));
-      cam.y = clamp(cam.y, s.look + LOOK_UP / 2, s.look + LOOK_DOWN / 2);
-      let lo = 0, hi = 0;
-      if (s.span) [lo, hi] = s.span;
-      else {
-        // as far as the nearest things reach: the outermost one may come to the frame's middle
-        const near = lim.things.filter(t => t.z <= TRACK);
-        if (near.length) { lo = Math.min(0, ...near.map(t => t.x)); hi = Math.max(0, ...near.map(t => t.x)); }
-      }
-      cam.x = clamp(cam.x, lo, hi);
-      return;
-    }
-    cam.y = clamp(cam.y, (s?.look ?? 0) + LOOK_UP, (s?.look ?? 0) + LOOK_DOWN);
-    // Where you may stand: what is seen from the back of the bounds — a triangle as wide as the
-    // frame (a camera inside it sees only what lies inside it too, so walking toward anything you
-    // see never leaves it), within the scene's area when it gives one; forward as far as the
-    // things in the scene, or as far as the wheel took you toward one. Walking, the start is the
-    // back: the farthest you can draw back, and no stepping aside there — only coming closer.
-    let zb = s?.mode === 'walk' ? 0 : WALK_BACK, zf = Math.max(lim.zMax, lim.reach ?? -Infinity), lo = -Infinity, hi = Infinity;
-    if (s?.area) { const [l, r, b, f] = s.area; zb = -b; zf = f; lo = -l; hi = r; }
-    cam.z = clamp(cam.z, zb, zf);
-    const hw = Math.max(0, cam.z - zb) * lim.aspect / 2;
-    cam.x = clamp(cam.x, Math.max(lo, -hw), Math.min(hi, hw));
-  }
-  // near things fade out as you walk up to and past them
-  const fadeNear = (Z, cam) => clamp((Z - cam.z - 0.3) / 0.6, 0, 1);
-
-  function place(ctx, S, cam, Z) { ctx.transform(...view(cam, Z, S.W, S.H, S.yh)); }
-
-  // ── scene build + frame ────────────────────────────────────────────────
-  // W × H: the frame; everything is painted on the stage, SW × H
-  function build(spec, W, H) {
-    const u = H / 900, seed = hash(JSON.stringify(spec.layers || []) + (spec.title || '')), rnd = seeded(seed);
-    const SW = STAGE * H, x0 = -EXT * SW, span = (1 + 2 * EXT) * SW;
-    const dz = depths(spec);
-    const starCount = Math.round((spec.stars?.density ?? 0) * span * H / 2500 / (u * u));
-    const stars = Array.from({ length: starCount }, () => ({ x: x0 + rnd() * span, y: -0.45 * H + Math.pow(rnd(), 1.4) * H * 1.15, r: (0.4 + Math.pow(rnd(), 4) * 1.6) * u, p: rnd() * 7, f: 0.4 + rnd() * 2 }));
-    const layers = (spec.layers || []).map((L, i) => {
-      const Z = dz.Z[i];
-      if (L.kind === 'clouds') {
-        const clouds = Array.from({ length: Math.round((3 + (L.density ?? 0.5) * 9) * (1 + 2 * EXT)) }, () => {
-          const cw = SW * (0.12 + rnd() * 0.2), ch = cw * 0.35, c = layer(cw, ch), cg = c.getContext('2d');
-          for (let k = 0; k < 7; k++) glow(cg, cw * (0.2 + rnd() * 0.6), ch * (0.45 + rnd() * 0.25), ch * (0.35 + rnd() * 0.3), rgb(L.color), 0.55);
-          return { c, x: rnd() * span, y: L.y * H + (rnd() - 0.5) * (L.height ?? 0.1) * H, sp: (4 + rnd() * 8) * u };
-        });
-        return { L, Z, clouds };
-      }
-      if (L.kind === 'fog') return { L, Z, blobs: Array.from({ length: 10 }, () => ({ x: rnd() * span, dy: (rnd() - 0.5) * (L.height ?? 0.08) * H, rx: SW * (0.2 + rnd() * 0.25), ry: H * (0.03 + rnd() * 0.04), sp: (5 + rnd() * 10) * u, a: 0.06 + rnd() * 0.06 })) };
-      if (L.kind === 'water') return { L, Z };
-      return { L, Z, ...staticLayer(L, SW, H, seed + i * 101) };
-    }).sort((a, b) => b.Z - a.Z);
-    // looking around, each also stands somewhere in the world (p, depths().objectAt)
-    const round = camSetup(spec).round;
-    const objects = (spec.objects || []).map(o => ({ o: { ...o, x: dz.objectX(o), y: dz.objectY(o), size: dz.objectSize(o), _yh: dz.yh }, Z: dz.objectZ(o), p: round && !o.sky && !o.ground ? dz.objectAt(o) : null })).sort((a, b) => (b.Z - a.Z) || 0);
-    const sky = !spec.sky ? '#000000' : (() => {
-      const c = document.createElement('canvas').getContext('2d');
-      const g = c.createLinearGradient(0, 0, 0, H);
-      g.addColorStop(0, spec.sky.top); g.addColorStop(0.55, spec.sky.middle); g.addColorStop(1, spec.sky.bottom);
-      return g;
-    })();
-    const particles = (spec.particles || []).map(p => ({ p, list: makeParticles(p, W, H, rnd) }));
-    // vignette depends only on the scene, not the frame: paint it once
-    const vignette = layer(W, H), vg = vignette.getContext('2d');
-    const v = vg.createRadialGradient(W / 2, H / 2, Math.min(W, H) * 0.35, W / 2, H / 2, Math.hypot(W, H) * 0.6);
-    v.addColorStop(0, 'rgba(0,0,0,0)');
-    v.addColorStop(1, `rgba(0,0,0,${0.75 * clamp(spec.light?.vignette ?? 0.5, 0, 1)})`);
-    vg.fillStyle = v; vg.fillRect(0, 0, W, H);
-    return { W, H, SW, u, x0, span, yh: dz.yh, round, lim: limits(spec, W, H), sky, stars, layers, particles, objects, vignette, scratch: layer(W, H) };
-  }
-
-  // Looking around, with Canvas 2D (the fallback): the sky turned as a flat band (not bent into a
-  // cylinder), then the cards facing the eye, far to near. Cards turned their own way (`facing`),
-  // like planes, are drawn by the WebGL renderer only.
-  function aroundFrame(ctx, S, cam, t) {
-    const { W, H, SW } = S, full = TAU * H, off = W / 2 - full / 2 - cam.yaw * H;
-    for (const { o } of S.objects) {
-      if (!o.sky) continue;
-      for (let x0 = ((off % full) + full) % full - full; x0 < W; x0 += full) {
-        const lights = [];
-        ctx.save(); ctx.translate(x0, -cam.y * H);
-        drawObject(ctx, o, full, H, t, lights); drawLights(ctx, lights);
-        ctx.restore();
-      }
-    }
-    const seen = [];
-    for (const { o, p } of S.objects) {
-      if (o.sky || o.ground || o.plane || typeof o.facing === 'number') continue;
-      const b = billboard(cam, p, o.x * SW, o.y * H, W, H, S.yh);
-      if (b) seen.push({ o, b });
-    }
-    seen.sort((a, b) => b.b.D - a.b.D);
-    for (const { o, b } of seen) {
-      const fade = clamp((b.D - 0.3) / 0.6, 0, 1), lights = [];
-      if (fade <= 0) continue;
-      ctx.save(); ctx.transform(...b.m); ctx.globalAlpha = fade;
-      drawObject(ctx, o, SW, H, t, lights); drawLights(ctx, lights);
-      ctx.restore();
-    }
-  }
-
-  function drawWater(ctx, S, L, wy, t) {
-    const { W, H, u } = S, depth = H - wy, step = Math.max(3, Math.round(u * 3));
-    if (depth <= 0) return;
-    const k = Math.min(1.2, wy / depth), speed = 1 + Math.abs(L.drift ?? 0) * 2;
-    // copy only the band above the horizon that the reflection actually shows
-    const band = Math.max(0, Math.floor(wy - depth * k - step)), sc = S.scratch.getContext('2d');
-    sc.clearRect(0, band, W, wy - band);
-    sc.drawImage(ctx.canvas, S.out.x, S.out.y + band, W, wy - band, 0, band, W, wy - band);
-    for (let y = wy; y < H; y += step) {
-      const d = (y - wy) / depth;
-      const dx = (Math.sin(30 * Math.log(0.03 + d) - t * 1.4 * speed) * 0.6 + Math.sin(d * 53 + t * 0.8) * 0.4) * (1 + d * 16) * u;
-      ctx.drawImage(S.scratch, 0, Math.max(0, wy - 1 - (y - wy) * k), W, step, dx - 20 * u, y, W + 40 * u, step);
-    }
-    const col = rgb(L.color), gr = ctx.createLinearGradient(0, wy, 0, H);
-    gr.addColorStop(0, `rgba(${col},0.35)`); gr.addColorStop(1, `rgba(${col},0.8)`);
-    ctx.fillStyle = gr; ctx.fillRect(0, wy, W, depth);
-    ctx.fillStyle = 'rgba(255,255,255,0.06)'; ctx.fillRect(0, wy - u, W, 2 * u);
-  }
-
-  const wrapX = (x, S, w) => ((x % (S.span + w)) + S.span + w) % (S.span + w) + S.x0 - w;
-
-  // S.out: where the frame lies in the canvas (pixels); the scene goes on around it as painted
-  function frame(ctx, S, spec, cam, t, dt) {
-    const { W, H, SW, u } = S, out = S.out;
-    ctx.setTransform(1, 0, 0, 1, 0, 0);
-    ctx.fillStyle = '#000000';
-    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-    ctx.translate(out.x, out.y);
-    ctx.save(); place(ctx, S, cam, Infinity);
-    ctx.fillStyle = S.sky;
-    ctx.fillRect(S.x0, -H, S.span, 3 * H);
-    if (S.stars.length) {
-      ctx.fillStyle = spec.stars?.color || '#ffffff';
-      for (const s of S.stars) {
-        ctx.globalAlpha = 0.25 + 0.75 * Math.pow(0.5 + 0.5 * Math.sin(t * s.f + s.p), 2);
-        ctx.fillRect(s.x - s.r, s.y - s.r, s.r * 2, s.r * 2);
-      }
-      ctx.globalAlpha = 1;
-    }
-    for (const c of spec.celestials || []) {
-      const cx = c.x * SW, cy = c.y * H, r = c.size * H / 2, col = rgb(c.color);
-      glow(ctx, cx, cy, r * 9, col, 0.35 * (c.glow ?? 0.5));
-      ctx.fillStyle = c.color; ctx.beginPath(); ctx.arc(cx, cy, r, 0, 7); ctx.fill();
-      if (c.kind === 'moon') { ctx.fillStyle = 'rgba(0,0,0,0.07)'; for (const [dx, dy, rr] of [[-0.3, -0.2, 0.25], [0.28, 0.15, 0.17], [-0.05, 0.4, 0.13]]) { ctx.beginPath(); ctx.arc(cx + dx * r, cy + dy * r, rr * r, 0, 7); ctx.fill(); } }
-      if (c.kind === 'planet') { ctx.strokeStyle = `rgba(${col},0.6)`; ctx.lineWidth = r * 0.08; ctx.beginPath(); ctx.ellipse(cx, cy, r * 1.8, r * 0.4, -0.3, 0, 7); ctx.stroke(); }
-    }
-    ctx.restore();
-
-    for (const l of S.round ? [] : S.layers) {
-      const L = l.L;
-      if (l.Z - cam.z < 0.05) continue;
-      if (L.kind === 'water') { const m = view(cam, l.Z, W, H, S.yh); drawWater(ctx, S, L, Math.round(m[5] + m[3] * L.y * H), t); continue; }
-      ctx.save(); place(ctx, S, cam, l.Z);
-      if (l.canvas) {
-        ctx.drawImage(l.canvas, l.x0, 0);
-        ctx.fillStyle = L.color; ctx.fillRect(l.x0, l.canvas.height - 1, l.canvas.width, 50 * H); // the body goes on below
-        if (l.windows?.length) {
-          const lc = rgb('#ffd08a');
-          for (const w of l.windows) {
-            if (Math.sin(t * 0.07 + w.p) > -0.85) { ctx.fillStyle = `rgba(${lc},${0.55 + 0.25 * Math.sin(w.p)})`; ctx.fillRect(w.x, w.y, w.w, w.h); }
-          }
-        }
-      } else if (L.kind === 'clouds') {
-        for (const c of l.clouds) ctx.drawImage(c.c, wrapX(c.x + t * c.sp * (L.drift ?? 0.3) * 3, S, c.c.width), c.y - c.c.height / 2);
-      } else if (L.kind === 'fog') {
-        const col = rgb(L.color);
-        for (const b of l.blobs) {
-          ctx.save(); ctx.translate(wrapX(b.x + t * b.sp * (L.drift ?? 0.3) * 2, S, 2 * b.rx) + b.rx, L.y * H + b.dy);
-          ctx.scale(1, b.ry / b.rx); glow(ctx, 0, 0, b.rx, col, b.a * 2.2); ctx.restore();
-        }
-      }
-      ctx.restore();
-    }
-
-    if (S.round) aroundFrame(ctx, S, cam, t);
-    else for (const { o, Z } of S.objects) {
-      if (o.plane) continue; // horizontal planes are drawn by the WebGL renderer only
-      const lights = [], fade = fadeNear(Z, cam);
-      if (fade <= 0) continue;
-      ctx.save(); place(ctx, S, cam, Z); ctx.globalAlpha = fade;
-      if (cam.hero && o.id === cam.hero.id) ctx.transform(...heroMatrix(cam.hero, o.x * SW, o.size * H / (o.height || 2)));
-      drawObject(ctx, o, SW, H, t, lights);
-      drawLights(ctx, lights);
-      ctx.restore();
-    }
-
-    for (const { p, list } of S.particles) stepParticles(ctx, p, list, W, H, t, dt, u);
-    const lt = spec.light || {};
-    if (lt.tint && lt.tintStrength) {
-      ctx.save(); ctx.globalAlpha = clamp(lt.tintStrength, 0, 0.5) * 0.45;
-      ctx.fillStyle = lt.tint; ctx.fillRect(0, 0, W, H); ctx.restore();
-    }
-    ctx.drawImage(S.vignette, 0, 0);
-    if ((lt.grain ?? 0.5) > 0) {
-      ctx.save(); ctx.globalAlpha = clamp(lt.grain ?? 0.5, 0, 1);
-      ctx.translate(Math.random() * 160, Math.random() * 160); ctx.fillStyle = S.grain; ctx.fillRect(-160, -160, W + 320, H + 320); ctx.restore();
-    }
-    // out of the frame the scene dims toward the canvas's edges (with Canvas 2D, what nothing
-    // paints stays black, and water, particles and grain keep to the frame)
-    for (const [x0, y0, x1, y1, rx, ry, rw, rh] of [[0, 0, -H / 2, 0, -out.x, -out.y, out.x, out.ch], [W, 0, W + H / 2, 0, W, -out.y, out.cw - out.x - W, out.ch],
-      [0, 0, 0, -H / 2, -out.x, -out.y, out.cw, out.y], [0, H, 0, H * 1.5, -out.x, H, out.cw, out.ch - out.y - H]]) {
-      if (rw <= 0 || rh <= 0) continue;
-      const g = ctx.createLinearGradient(x0, y0, x1, y1);
-      g.addColorStop(0, 'rgba(0,0,0,0)'); g.addColorStop(1, 'rgba(0,0,0,0.45)');
-      ctx.fillStyle = g; ctx.fillRect(rx, ry, rw, rh);
-    }
-  }
-
-  // Mounts the engine on a canvas: returns { show(spec), resetCamera() }.
-  // Camera: drag = step sideways / turn the head up-down, wheel / pinch = walk toward the cursor,
-  // keys: A D ← → = sideways, W S ↑ ↓ = forward-back, 0 = back to the start.
-  // The 2D renderer: everything re-drawn with Canvas 2D every frame. Fallback for
-  // browsers without WebGL2; the WebGL renderer (gl.js) is much lighter on the GPU.
-  function canvas2DRenderer(canvas) {
-    // opaque canvas: the scene paints every pixel, so the browser needn't blend it with the page
-    const ctx = canvas.getContext('2d', { alpha: false });
-    const grain = ctx.createPattern(grainTile, 'repeat');
-    return {
-      name: '2d', fpsIdle: 20, pixelBudget: 1.3e6, resMax: 1.5,
-      build(spec, W, H, prev, out) { const S = build(spec, W, H); S.grain = grain; S.out = out; return S; },
-      frame(S, spec, cam, t, dt) { frame(ctx, S, spec, cam, t, dt); },
-    };
-  }
-
-  function mount(canvas) {
-    // a canvas gets one context type for life: WebGL2 when available, else 2D
-    // (?2d in the URL forces the 2D renderer, for comparison)
-    const R = (typeof MooodGL !== 'undefined' && !/[?&]2d\b/.test(location.search) && MooodGL.create(canvas)) || canvas2DRenderer(canvas);
-    // t: seconds since the stage was made, by the real clock — what the painting code sees (e.t),
-    // in step with the state's moves; dt: the step of the camera's motion (capped, so a long frame
-    // doesn't throw it)
-    const born = performance.now();
-    let spec = null, S = null, t = 0, last = born, pending;
-    const cam = { x: 0, y: 0, z: 0, h: 1, yaw: 0 }, target = { x: 0, y: 0, z: 0, h: 1, yaw: 0 };
-    let seen = [0, 1], lim = { aspect: STAGE, zMax: 1, things: [], view: [0, 1] };
-    // the frame within the canvas (CSS px): landscape, centred, bars around it
-    let box = { x: 0, y: 0, w: 1, h: 1 };
-    const frameBox = () => {
-      const cw = Math.max(1, canvas.clientWidth), ch = Math.max(1, canvas.clientHeight), a = clamp(cw / ch, NARROWEST, WIDEST);
-      const w = Math.min(cw, ch * a), h = w / a;
-      return { x: (cw - w) / 2, y: (ch - h) / 2, w, h };
-    };
-    // a point of the page (clientX, clientY) in the frame's CSS px — the canvas may be scaled
-    const local = (cx, cy) => {
-      const r = canvas.getBoundingClientRect(), k = r.width / Math.max(1, canvas.clientWidth) || 1;
-      return [(cx - r.left) / k - box.x, (cy - r.top) / k - box.y];
-    };
-    // the part of the frame the page's panels leave open, as fractions of its width
-    const openView = () => [0, 1].map(i => clamp((seen[i] * canvas.clientWidth - box.x) / box.w, 0, 1));
-    const keys = new Set(), pointers = new Map();
-    let pinch = null;
-
-    // GPU budget. A calm scene doesn't need the display's refresh rate (120–165 Hz on
-    // many laptops): render fpsIdle while idle, 60 while the camera moves. The canvas is
-    // capped at the renderer's pixel budget whatever the monitor, and stretched by the
-    // browser — invisible in this soft, hazy style.
-    const FPS_ACTIVE = 60, PIXEL_BUDGET = R.pixelBudget, RES_MIN = 0.6;
-    let fpsIdle = R.fpsIdle;
-    const resCap = () => Math.min(window.devicePixelRatio || 1, R.resMax, Math.sqrt(PIXEL_BUDGET / Math.max(1, canvas.clientWidth * canvas.clientHeight)));
-    let res = resCap(), frameEma = 1 / fpsIdle, checkAt = performance.now() + 3000, lastDowngrade = 0, activeUntil = 0;
-    let waiting = null; // a spec to show once its modules are here
-    const rebuild = () => {
-      box = frameBox();
-      res = Math.min(res, resCap());
-      canvas.width = Math.round(canvas.clientWidth * res);
-      canvas.height = Math.round(canvas.clientHeight * res);
-      if (spec) {
-        S = R.build(spec, Math.round(box.w * res), Math.round(box.h * res), S, { x: Math.round(box.x * res), y: Math.round(box.y * res), cw: canvas.width, ch: canvas.height });
-        const was = lim.setup;
-        lim = { ...S.lim, view: openView(), level: plat?.level };
-        // a new camera setup: go to its starting spot at once
-        if (!was || was.mode !== lim.setup.mode || was.h !== lim.setup.h || was.look !== lim.setup.look) { reset(); Object.assign(cam, target); }
-        limitCam(target, lim);
-      }
-    };
-    // If the machine can't hold the frame rate: first a calmer idle rate, then fewer pixels.
-    const adapt = (now, target) => {
-      if (now < checkAt || !S) return;
-      checkAt = now + 2000;
-      if (frameEma > 1.4 / target && target === fpsIdle && fpsIdle > 30) {
-        fpsIdle = 30;
-        lastDowngrade = now;
-      } else if (frameEma > 1.4 / target && res > RES_MIN) {
-        res = Math.max(RES_MIN, res * 0.8);
-        lastDowngrade = now;
-        rebuild();
-      } else if (frameEma < 1.05 / target && res < resCap() && now - lastDowngrade > 15000) {
-        res = Math.min(resCap(), res * 1.15);
-        rebuild();
-      }
-    };
-    const perf = document.createElement('div');
-    perf.style.cssText = 'position:fixed;left:8px;top:8px;z-index:9;font:12px/1.4 ui-monospace,Consolas,monospace;color:#cfe;background:rgba(0,0,0,.6);padding:4px 8px;border-radius:6px;pointer-events:none;display:none;white-space:pre';
-    document.body.append(perf);
-    let frames = 0, perfAt = performance.now(), drawMs = 0;
-    addEventListener('resize', () => { clearTimeout(pending); pending = setTimeout(rebuild, 150); });
-
-    // Wheel / pinch: walk along the ray through the cursor toward what is seen under it — the
-    // first thing truly painted at that point (not a veil of leaves, not a transparent edge), else
-    // the ground there, else (the sky) a few steps ahead. It is chosen when the gesture starts or
-    // the pointer moves, and kept till the gesture ends; it stays under the cursor all the way —
-    // the gaze lifting or lowering with it — and the walk stops where it about fills the frame
-    // (something high up: where it still shows with the gaze lifted as far as it goes).
-    let aim = null, aimAt = 0;
-    // is the element truly painted at the cursor: nearly opaque paint on a tenth of the 9×9
-    // pixels around it (the thin spokes of a wheel count; a veil, a glow, empty air don't)?
-    const probe = layer(9, 9), pg = probe.getContext('2d', { willReadFrequently: true });
-    const seenAt = (o, m, cx, cy, Hc) => {
-      pg.setTransform(1, 0, 0, 1, 0, 0);
-      pg.clearRect(0, 0, 9, 9);
-      pg.setTransform(m[0], 0, 0, m[3], m[4] - cx + 4.5, m[5] - cy + 4.5);
-      try { drawObject(pg, o, STAGE * Hc, Hc, t, []); } catch { return false; }
-      const d = pg.getImageData(0, 0, 9, 9).data;
-      let n = 0;
-      for (let i = 3; i < d.length; i += 4) if (d[i] > 160) n++;
-      return n >= 8;
-    };
-    const pick = (clientX, clientY) => {
-      const [cx, cy] = local(clientX, clientY), Hc = box.h, Wc = box.w, yh = S?.yh ?? 0.6, dz = spec ? depths(spec) : null;
-      const at = D => ({ Z: target.z + D, x: target.x + (cx - Wc / 2) / Hc * D });
-      const near = (spec?.objects || []).filter(o => o.kind !== 'bird' && !o.sky && !o.ground && !o.plane).map(o => ({ o: { ...o, x: dz.objectX(o), y: dz.objectY(o), size: dz.objectSize(o), _yh: yh }, Z: dz.objectZ(o) }))
-        .filter(({ Z }) => fadeNear(Z, target) > 0).sort((a, b) => a.Z - b.Z);
-      for (const { o, Z } of near) {
-        const m = view(target, Z, Wc, Hc, yh), b = objectBox(o, STAGE * Hc, Hc);
-        const x0 = m[0] * b.bx + m[4], y0 = m[3] * b.by + m[5];
-        if (cx < x0 || cx > x0 + m[0] * b.bw || cy < y0 || cy > y0 + m[3] * b.bh) continue;
-        if (!seenAt(o, m, cx, cy, Hc)) continue;
-        // the point under the cursor, Y eye heights up; stop where the thing about fills the
-        // frame, or — high up — where the point still shows with the gaze lifted as far as it goes
-        const D = Z - target.z, Y = target.h - (cy / Hc - yh + target.y) * D, up = (lim.setup?.look ?? 0) + LOOK_UP;
-        const sight = Y > target.h ? (Y - target.h) / Math.max(0.05, yh - cy / Hc - up) : 0;
-        return { ...at(D), Y, cy: cy / Hc, stop: Math.max(1.1, 1.15 * o.size * Z, sight) };
-      }
-      const below = cy - (yh - target.y) * Hc;
-      return { ...at(below > 0.02 * Hc ? clamp(Hc * target.h / below, 0.8, 100) : 6), stop: 1.2 };
-    };
-    const walkToward = (factor, clientX, clientY) => {
-      const now = performance.now();
-      if (!aim || now - aimAt > 400 || Math.hypot(clientX - aim.px, clientY - aim.py) > 6) aim = { ...pick(clientX, clientY), px: clientX, py: clientY };
-      aimAt = now;
-      const d0 = aim.Z - target.z;
-      if (d0 <= 0.05) return;
-      // each notch covers a share of the way left (the approach slows by itself), up to the stop
-      const d = factor > 1 ? Math.max(Math.min(d0, aim.stop), d0 / factor) : d0 / factor;
-      target.z = aim.Z - d;
-      target.x = aim.x - (aim.x - target.x) * d / d0;
-      if (aim.Y !== undefined) target.y = (S?.yh ?? 0.6) - aim.cy + (target.h - aim.Y) / Math.max(0.05, d);
-      // what you walked up to may lie past where walking goes: you may stand there
-      lim.reach = target.z > lim.zMax ? Math.max(lim.reach ?? 0, target.z) : undefined;
-      limitCam(target, lim);
-    };
-
-    // Drag: sideways = step, keeping what you took hold of (an object, else that spot of
-    // ground) under the finger — a step of dx·D/H for its distance D, so near grass moves you
-    // a little and a far house carries you along. Up / down = turn your head: the gaze tilts
-    // and the grabbed point follows the finger. Walking is the wheel, pinch or keys.
-    // Let go while moving and the camera glides on a little.
-    let grab = null, glide = null, lastMove = 0;
-    const grabAt = (clientX, clientY) => {
-      // looking around, a drag turns the head: what you took hold of follows the finger
-      if (round()) { const [cx, cy] = local(clientX, clientY); grab = { round: true, cx, cy, yaw: target.yaw, look: target.y }; return; }
-      const [cx, cy] = local(clientX, clientY), D = clamp(pick(clientX, clientY).Z - target.z, 0.4, 60);
-      grab = { x: target.x + (cx - box.w / 2) / box.h * D, D, cy, look: target.y };
-    };
-    const dragTo = (clientX, clientY) => {
-      const [cx, cy] = local(clientX, clientY), x0 = target.x, y0 = target.y, now = performance.now();
-      if (grab.round) {
-        const yaw0 = target.yaw;
-        target.yaw = grab.yaw - (Math.atan((cx - box.w / 2) / box.h) - Math.atan((grab.cx - box.w / 2) / box.h));
-        target.y = grab.look - (cy - grab.cy) / box.h;
-        limitCam(target, lim);
-        const dt = Math.max(8, now - lastMove) / 1000, k = Math.min(1, dt * 20);
-        glide = glide || { vx: 0, vy: 0, vyaw: 0 };
-        glide.vyaw += ((target.yaw - yaw0) / dt - glide.vyaw) * k;
-        lastMove = now;
-        return;
-      }
-      target.x = grab.x - (cx - box.w / 2) / box.h * grab.D;
-      target.y = grab.look - (cy - grab.cy) / box.h;
-      limitCam(target, lim);
-      const dt = Math.max(8, now - lastMove) / 1000, k = Math.min(1, dt * 20);
-      glide = glide || { vx: 0, vy: 0, vyaw: 0 };
-      glide.vx += ((target.x - x0) / dt - glide.vx) * k;
-      glide.vy += ((target.y - y0) / dt - glide.vy) * k;
-      lastMove = now;
-    };
-    // where in the canvas (CSS px) an element is from camera c — the point its code marks (e.at),
-    // else its anchor (its top, with over) — lifted by `lift` metres: [x, y, its distance]; null
-    // when out of sight
-    function seenFrom(c, id, lift = 0, over = false) {
-      const o = (spec?.objects || []).find(o => o.id === id);
-      if (!o || o.sky) return null;
-      const W = box.w, H = box.h, dz = depths(spec), yh = dz.yh;
-      if (round()) {
-        // looking around: its anchor (or the point its code marks) seen from where you stand
-        const p = dz.objectAt(o);
-        if (o.plane || !FOCUS.has(id)) {
-          const q = project(c, p.X, p.Y + (lift + (over && !o.plane ? o.height ?? EYE : 0)) / EYE, p.Z, W, H, yh);
-          return q && q[2] > 0.3 ? [box.x + q[0], box.y + q[1], q[2]] : null;
-        }
-        const b = billboard(c, p, dz.objectX(o) * STAGE * H, dz.objectY(o) * H, W, H, yh), f = FOCUS.get(id);
-        if (!b || b.D < 0.3) return null;
-        return [box.x + b.m[0] * f.x * STAGE * H + b.m[4], box.y + b.m[3] * (f.y * H - (lift / EYE) * H / p.Zp) + b.m[5], b.D];
-      }
-      const Z = o.plane ? (o.distance > 0 ? o.distance : 10) / EYE : dz.objectZ(o);
-      if (Z - c.z < 0.3 || fadeNear(Z, c) < 0.3) return null;
-      const f = FOCUS.get(id) || { x: dz.objectX(o), y: o.plane ? yh + (1 - (o.elevation || 0) / EYE) / Z : dz.objectY(o) };
-      if (over && !FOCUS.has(id)) lift += o.height ?? EYE;
-      const m = view(c, Z, W, H, yh);
-      let px = f.x * STAGE * H, py = f.y * H - (lift / EYE) * H / Z;
-      if (c.hero && id === c.hero.id) { const hm = heroMatrix(c.hero, dz.objectX(o) * STAGE * H, dz.objectSize(o) * H / (o.height || 2)); px = hm[0] * px + hm[4]; py += hm[5]; }
-      return [box.x + m[0] * px + m[4], box.y + m[3] * py + m[5], Z - c.z];
-    }
-    // the camera keeps the elements it follows in the visible part of the screen: together when
-    // they fit, else the first of them
-    function keepInView() {
-      const ids = lim.setup?.follow;
-      if (!ids?.length || pointers.size || keys.size || glide) return;
-      const [vl, vr] = lim.view, L = box.x + (vl + 0.1) * box.w, R = box.x + (vr - 0.1) * box.w;
-      const pts = ids.map(id => seenFrom(target, id)).filter(Boolean);
-      if (!pts.length) return;
-      const lo = Math.min(...pts.map(p => p[0])), hi = Math.max(...pts.map(p => p[0]));
-      if (lo >= L && hi <= R) return;
-      const aim = hi - lo <= R - L ? (lo + hi) / 2 : pts[0][0];
-      target.x += (aim - (L + R) / 2) * pts[0][2] / box.h;
-    }
-    const reset = () => { Object.assign(target, { x: 0, y: lim.setup?.look ?? 0, z: 0, h: lim.setup?.h ?? 1, yaw: 0 }); };
-    const round = () => !!lim.setup?.round, roam = () => lim.setup?.mode === 'roam';
-    const platform = () => lim.setup?.mode === 'platform';
-    // ── a platformer ─────────────────────────────────────────────────────
-    // The hero (camera.hero) runs and jumps in its plane, seen from the side: x metres across, y
-    // metres up. Solid elements (solid: true) are boxes it stands on and bumps into — across their
-    // box, from their elevation up their height. Gravity G, running RUN, a jump camera.jump metres
-    // high (default 2.2). Fallen FALL metres below the lowest place to stand, it is back at the start.
-    // The camera rides along.
-    // Keys: ← → A D run, space W ↑ jump; touch: hold the left or right third to run, the middle to jump.
-    const G = 22, RUN = 5.5, FALL = 5;
-    let plat = null;
-    function platformOf(spec) {
-      const s = camSetup(spec), o = s.hero && (spec.objects || []).find(o => o.id === s.hero);
-      if (!o) return null;
-      const dz = depths(spec), p = dz.objectAt(o);
-      const solids = (spec.objects || []).filter(e => e.solid && e !== o).map(e => {
-        const q = dz.objectAt(e), h = e.height || 2, b = Array.isArray(e.box) && e.box.length === 4 ? e.box : [-0.8 * h, 0, 0.8 * h, 0];
-        const x = q.X * EYE, y = e.elevation || 0;
-        return { x0: x + b[0], x1: x + b[2], y0: y, y1: y + h };
-      });
-      const x = p.X * EYE, y = o.elevation || 0;
-      return {
-        id: o.id, Zp: p.Zp, x0: x, y0: y, x, y, floor: y, vx: 0, vy: 0, ground: false, air: 0, jumped: false, dir: 1,
-        w: o.width || 0.6, h: o.height || 1.7, solids, jumpV: Math.sqrt(2 * G * clamp(s.jump ?? 2.2, 0.5, 8)),
-        level: [Math.min(x, ...solids.map(r => r.x0)) / EYE, Math.max(x, ...solids.map(r => r.x1)) / EYE],
-        bottom: Math.min(y, ...solids.map(r => r.y1)), // the lowest place to stand
-      };
-    }
-    // what the viewer asks for now: { left, right, jump }
-    function controls() {
-      const c = { left: keys.has('ArrowLeft') || keys.has('a'), right: keys.has('ArrowRight') || keys.has('d'), jump: keys.has(' ') || keys.has('w') || keys.has('ArrowUp') };
-      for (const p of pointers.values()) {
-        const f = local(p.x, p.y)[0] / box.w;
-        if (f < 1 / 3) c.left = true; else if (f > 2 / 3) c.right = true; else c.jump = true;
-      }
-      return c;
-    }
-    function stepHero(P, dt) {
-      const c = controls(), want = (c.right ? 1 : 0) - (c.left ? 1 : 0), hw = P.w / 2;
-      P.vx += (want * RUN - P.vx) * Math.min(1, dt * (P.ground ? 14 : 5));
-      if (want) P.dir = want;
-      P.air = P.ground ? 0 : P.air + dt;
-      // one jump a press; a moment after running off an edge still counts
-      if (c.jump && !P.jumped && P.air < 0.1) { P.vy = P.jumpV; P.jumped = true; P.air = 1; }
-      if (!c.jump) P.jumped = false;
-      P.vy = Math.max(P.vy - G * dt, -30);
-      // across, then up: out of whatever solid it moved into
-      P.x += P.vx * dt;
-      for (const r of P.solids) {
-        if (P.y >= r.y1 - 0.01 || P.y + P.h <= r.y0 + 0.01 || P.x + hw <= r.x0 || P.x - hw >= r.x1) continue;
-        if (P.vx > 0) P.x = r.x0 - hw; else if (P.vx < 0) P.x = r.x1 + hw;
-        P.vx = 0;
-      }
-      const y0 = P.y;
-      P.y += P.vy * dt; P.ground = false;
-      for (const r of P.solids) {
-        if (P.x + hw <= r.x0 || P.x - hw >= r.x1) continue;
-        if (P.vy <= 0 && y0 >= r.y1 - 0.01 && P.y < r.y1) { P.y = r.y1; P.vy = 0; P.ground = true; }
-        else if (P.vy > 0 && y0 + P.h <= r.y0 + 0.01 && P.y + P.h > r.y0) { P.y = r.y0 - P.h; P.vy = 0; }
-      }
-      if (P.y < P.bottom - FALL) Object.assign(P, { x: P.x0, y: P.y0, floor: P.y0, vx: 0, vy: 0 });
-      if (P.ground) P.floor = P.y;
-      Object.assign(HERO, { id: P.id, vx: P.vx, vy: P.vy, ground: P.ground });
-      // the camera: the hero a little behind the middle, the way it runs; up and down with what it
-      // stands on, not with every jump
-      target.x = (P.x + P.dir * 1.2) / EYE;
-      target.y = lim.setup.look - 0.8 * (P.floor - P.y0) / EYE / P.Zp;
-      limitCam(target, lim);
-    }
-    // roaming: a step of `d` eye heights toward `ang` (radians, as yaw)
-    const stepTo = (ang, d) => { target.x += Math.sin(ang) * d; target.z += Math.cos(ang) * d; limitCam(target, lim); };
-    // a picture: the camera stands and only leans (lean: −1…1 each way, toward the
-    // pointer or with the phone's tilt) and breathes
-    const fixed = () => lim.setup?.sway > 0, panorama = () => lim.setup?.mode === 'panorama';
-    const lean = { x: 0, y: 0 };
-    // Moving through the scene, the view still leans a little toward the pointer (or with the
-    // phone's tilt): near things shift against far ones, the depth is felt standing still too.
-    // `shown` is the camera as drawn: where you are, plus the lean (eased, LEAN eye heights).
-    const LEAN = 0.047, leaned = { x: 0, y: 0 }, shown = { ...cam };
-    // A film moves the camera from its script, through the state: camera_x (metres to the right),
-    // camera_h (metres up), camera_z (metres ahead — a dolly in, with all the depth it has),
-    // camera_look (screen heights the gaze is lowered); added to wherever the viewer has it.
-    const num = k => (typeof STATE.values[k] === 'number' ? STATE.values[k] : 0);
-    function directed(c) {
-      c.x += num('camera_x') / EYE; c.h = (c.h ?? 1) + num('camera_h') / EYE; c.z += num('camera_z') / EYE; c.y += num('camera_look');
-    }
-    function leanShown(dt) {
-      const k = 1 - Math.exp(-dt * 3), s = lim.setup;
-      leaned.x += ((s?.sway ? 0 : lean.x) - leaned.x) * k; leaned.y += ((s?.sway ? 0 : lean.y) - leaned.y) * k;
-      Object.assign(shown, cam);
-      const dx = leaned.x * LEAN, dy = leaned.y * LEAN / 3;
-      if (s?.round) { shown.x += dx * Math.cos(cam.yaw); shown.z -= dx * Math.sin(cam.yaw); }
-      else shown.x += dx;
-      shown.y += dy;
-    }
-    function leanTo(t) {
-      const s = lim.setup, b = 0.25;
-      target.x = (lean.x + b * Math.sin(t * 0.31)) * s.sway / (1 + b);
-      target.y = s.look + (lean.y + b * Math.sin(t * 0.19 + 1)) * s.sway / 3 / (1 + b);
-    }
-
-    canvas.style.touchAction = 'none';
-    canvas.addEventListener('pointerdown', e => {
-      canvas.setPointerCapture(e.pointerId);
-      pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
-      glide = null; lastMove = performance.now();
-      if (pointers.size === 1 && !fixed() && !platform()) grabAt(e.clientX, e.clientY);
-      askTilt();
-      if (pointers.size === 2) {
-        const [a, b] = [...pointers.values()];
-        pinch = { dist: Math.hypot(a.x - b.x, a.y - b.y) };
-      }
-    });
-    canvas.addEventListener('pointermove', e => {
-      const prev = pointers.get(e.pointerId);
-      if (!prev) return;
-      if (fixed()) return;
-      const now = { x: e.clientX, y: e.clientY };
-      pointers.set(e.pointerId, now);
-      if (platform()) return; // fingers held are the controls (controls())
-      if (pointers.size === 1) {
-        if (grab) dragTo(now.x, now.y);
-      } else if (pointers.size === 2 && pinch) {
-        const [a, b] = [...pointers.values()];
-        const dist = Math.hypot(a.x - b.x, a.y - b.y);
-        if (roam()) stepTo(target.yaw, Math.log(dist / pinch.dist) * 3);
-        else if (!round()) walkToward(dist / pinch.dist, (a.x + b.x) / 2, (a.y + b.y) / 2);
-        pinch.dist = dist;
-      }
-    });
-    const up = e => {
-      pointers.delete(e.pointerId);
-      if (pointers.size < 2) pinch = null;
-      grab = null; // a finger lifted from a pinch doesn't turn the other into a grab
-      // glide only if the finger was still moving when it let go
-      if (glide && (pointers.size > 0 || performance.now() - lastMove > 80)) glide = null;
-    };
-    canvas.addEventListener('pointerup', up);
-    canvas.addEventListener('pointercancel', up);
-    canvas.addEventListener('wheel', e => {
-      e.preventDefault(); glide = null;
-      if (fixed() || platform()) return;
-      // roaming: the wheel walks toward where the pointer is; standing and looking around, nowhere
-      if (round()) {
-        if (roam()) { const [cx] = local(e.clientX, e.clientY); stepTo(target.yaw + Math.atan((cx - box.w / 2) / box.h), -e.deltaY * 0.004); }
-        return;
-      }
-      // a panorama: a sideways swipe (a touchpad's) carries you along
-      if (panorama() && Math.abs(e.deltaX) > Math.abs(e.deltaY)) { target.x += e.deltaX * 0.006; limitCam(target, lim); return; }
-      walkToward(Math.exp(-e.deltaY * 0.0015), e.clientX, e.clientY);
-    }, { passive: false });
-    // the view leans toward wherever the pointer is
-    addEventListener('pointermove', e => {
-      if (e.pointerType !== 'mouse') return;
-      lean.x = clamp(2 * e.clientX / Math.max(1, innerWidth) - 1, -1, 1);
-      lean.y = clamp(2 * e.clientY / Math.max(1, innerHeight) - 1, -1, 1);
-    });
-    // ... or with the phone's tilt, from how it is held (the rest position follows it slowly)
-    let rest = null;
-    addEventListener('deviceorientation', e => {
-      if (e.beta == null || e.gamma == null) return;
-      const a = screen.orientation?.angle ?? 0;
-      // across and down the screen as held: in landscape the phone's axes are turned
-      const [h, v] = a === 90 ? [e.beta, -e.gamma] : a === 270 ? [-e.beta, e.gamma] : [e.gamma, e.beta];
-      rest = rest ? { h: rest.h + (h - rest.h) * 0.01, v: rest.v + (v - rest.v) * 0.01 } : { h, v };
-      lean.x = clamp((h - rest.h) / 15, -1, 1);
-      lean.y = clamp((v - rest.v) / 15, -1, 1);
-    });
-    // iOS lets a page read the tilt only once asked, on a touch
-    let asked = false;
-    function askTilt() {
-      if (asked || typeof window.DeviceOrientationEvent?.requestPermission !== 'function') return;
-      asked = true;
-      DeviceOrientationEvent.requestPermission().catch(() => {});
-    }
-
-    const typing = () => ['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement?.tagName);
-    const KEYS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'a', 'd', 'w', 's', ' '];
-    addEventListener('keydown', e => {
-      if (typing() || e.ctrlKey || e.metaKey || e.altKey) return;
-      const k = e.key.length === 1 ? e.key.toLowerCase() : e.key;
-      if (k === '0') { reset(); return; }
-      if (k === 'p') { perf.style.display = perf.style.display === 'none' ? 'block' : 'none'; return; }
-      if (KEYS.includes(k) && !fixed()) { keys.add(k); e.preventDefault(); }
-    });
-    addEventListener('keyup', e => keys.delete(e.key.length === 1 ? e.key.toLowerCase() : e.key));
-    addEventListener('blur', () => keys.clear());
-
-    const loop = now => {
-      requestAnimationFrame(loop);
-      const moving = keys.size > 0 || pointers.size > 0 || !!glide || (plat && (Math.abs(plat.vx) > 0.01 || !plat.ground)) || Math.abs(target.x - cam.x) + Math.abs(target.y - cam.y) + Math.abs(target.z - cam.z) + Math.abs(target.h - cam.h) + Math.abs(target.yaw - cam.yaw) > 0.001;
-      if (moving) activeUntil = now + 500;
-      const fps = now < activeUntil ? FPS_ACTIVE : fpsIdle;
-      const real = (now - last) / 1000;
-      // skip this display refresh; the tolerance is under half a refresh so vsync jitter
-      // never drops a frame we meant to draw (that made 30 fps stutter at ~27)
-      if (real < 1 / fps - 0.006) return;
-      const dt = Math.min(0.05, real);
-      last = now; t = Math.max(t, (performance.now() - born) / 1000);
-      STATE.sample?.(); // the state's moves where they are this very moment
-      if (real < 0.5) frameEma += (real - frameEma) * 0.1; // ignore tab-switch gaps
-      adapt(now, fps);
-      // a brisk walk: ~6 m/s forward, ~3.5 m/s sideways (world units are eye heights)
-      const step = dt * 2;
-      if (plat) stepHero(plat, dt);
-      else if (round()) {
-        // looking around: arrows left and right turn; roaming, W S walk where you look and A D
-        // step aside; standing, W S and the arrows up and down look up and down, A D turn too
-        const turn = dt * 1.4;
-        if (keys.has('ArrowLeft')) target.yaw -= turn;
-        if (keys.has('ArrowRight')) target.yaw += turn;
-        if (roam()) {
-          if (keys.has('w') || keys.has('ArrowUp')) stepTo(target.yaw, step * 1.5);
-          if (keys.has('s') || keys.has('ArrowDown')) stepTo(target.yaw, -step * 1.5);
-          if (keys.has('a')) stepTo(target.yaw - Math.PI / 2, step);
-          if (keys.has('d')) stepTo(target.yaw + Math.PI / 2, step);
-        } else {
-          if (keys.has('a')) target.yaw -= turn;
-          if (keys.has('d')) target.yaw += turn;
-          if (keys.has('w') || keys.has('ArrowUp')) target.y -= dt * 0.6;
-          if (keys.has('s') || keys.has('ArrowDown')) target.y += dt * 0.6;
-        }
-      } else {
-        if (keys.has('ArrowLeft') || keys.has('a')) target.x -= step;
-        if (keys.has('ArrowRight') || keys.has('d')) target.x += step;
-        if (keys.has('ArrowUp') || keys.has('w')) target.z += step * 1.8;
-        if (keys.has('ArrowDown') || keys.has('s')) target.z -= step * 1.8;
-      }
-      if (fixed()) leanTo(t);
-      keepInView();
-      limitCam(target, lim);
-      if (glide && pointers.size === 0) {
-        target.x += glide.vx * dt; target.y += glide.vy * dt; target.yaw += glide.vyaw * dt;
-        limitCam(target, lim);
-        const f = Math.exp(-dt * 4);
-        glide.vx *= f; glide.vy *= f; glide.vyaw *= f;
-        if (Math.abs(glide.vx) + Math.abs(glide.vy) + Math.abs(glide.vyaw) < 0.005) glide = null;
-      }
-      // the camera eases toward the target: quickly under the finger (a light trail, ~55 ms),
-      // more softly for the wheel and keys (~170 ms); frame-rate independent
-      const k = 1 - Math.exp(-dt * (pointers.size === 1 || glide ? 18 : 6));
-      cam.x += (target.x - cam.x) * k; cam.y += (target.y - cam.y) * k; cam.z += (target.z - cam.z) * k; cam.h += (target.h - cam.h) * k; cam.yaw += (target.yaw - cam.yaw) * k;
-      cam.hero = plat && { id: plat.id, dx: plat.x - plat.x0, dy: plat.y - plat.y0, flip: plat.dir < 0 };
-      leanShown(dt);
-      directed(shown);
-      const t0 = performance.now();
-      if (S) R.frame(S, spec, shown, t, dt, now >= activeUntil, target);
-      drawMs += performance.now() - t0;
-      frames++;
-      if (now - perfAt > 1000 && perf.style.display !== 'none') {
-        perf.textContent = `${R.name} · ${Math.round(frames * 1000 / (now - perfAt))} fps (cap ${fps})\n${canvas.width}×${canvas.height} · res ${res.toFixed(2)}\njs ${(drawMs / frames).toFixed(1)} ms/frame`;
-        frames = 0; drawMs = 0; perfAt = now;
-      } else if (now - perfAt > 1000) { frames = 0; drawMs = 0; perfAt = now; }
-    };
-    requestAnimationFrame(loop);
-    return {
-      // modules: where the spec's modules come from (kit.js: {world, refs} or {texts})
-      show(next, modules) {
-        // what the scene's code shares (its modules may still be on their way): shown once they are here
-        const shared = MooodKit.shared(next, modules);
-        if (shared instanceof Promise) { waiting = next; shared.then(() => { if (waiting === next) { waiting = null; this.show(next, modules); } }); return; }
-        waiting = null; SHARED = shared;
-        spec = next; FOCUS.clear();
-        // values not set yet (the state may start after the scene is shown) are where the scene starts them
-        if (spec.state && typeof spec.state === 'object') STATE.values = { ...spec.state, ...STATE.values };
-        // a new level, or the same one edited: the hero stays where it got to
-        const was = plat; plat = platformOf(spec); HERO.id = plat?.id ?? null;
-        if (plat && was && was.id === plat.id) Object.assign(plat, { x: was.x, y: was.y, floor: was.floor, dir: was.dir });
-        rebuild();
-        if (plat) { Object.assign(target, { x: plat.x / EYE }); Object.assign(cam, target); }
-      },
-      // a platformer's hero now: { across, elevation (metres), ground } — or null
-      hero: () => (plat ? { across: plat.x, elevation: plat.y, ground: plat.ground } : null),
-      resetCamera() { reset(); Object.assign(cam, target); },
-      // the part of the canvas not covered by the page's panels, as fractions of its width
-      setView(left, right) { seen = [left, right]; lim = { ...lim, view: openView() }; },
-      // where the frame lies in the canvas (CSS px)
-      frame: () => ({ ...box }),
-      // where the camera is now (for picking things on screen, select.js)
-      camera: () => ({ x: shown.x, y: shown.y, z: shown.z, h: shown.h, yaw: shown.yaw, hero: shown.hero }),
-      // the scene's state changed (scenestate.js): the painting code sees it as e.state
-      // was(key, ago): what a value was `ago` seconds ago (e.was); sample(): brings the values that
-      // are moving to where they are now — called as each frame starts, so it paints them on time
-      setState(values, was, sample) {
-        STATE.values = values || {}; if (was) STATE.was = was; if (sample) STATE.sample = sample;
-        STATE.ver++; activeUntil = performance.now() + 300;
-      },
-      // where in the canvas (CSS px) an element is now — the point its code marks (e.at), else its
-      // anchor (its top, with over) — lifted by `lift` metres; null when out of sight
-      screenOf: (id, lift = 0, over = false) => seenFrom(shown, id, lift, over),
-    };
-  }
-
-  return {
-    mount,
-    // for the WebGL renderer (gl.js): the one-time painting code and camera maths
-    internals: { STAGE, WIDEST, TAU, project, billboard, placeOf, camSetup, heroMatrix, STATE, READS, EXT, DEEP, Z_FAR, EYE, depths, view, limits, fadeNear, objectBox, seeded, hash, clamp, layer, rgb, glowSprite, grainTile, staticLayer, drawObject, PARTICLES, makeParticles, moveParticle },
-  };
-})();
+// Living-scene engine: paints a scene spec (see ../scene-prompt.mjs) on a canvas,
+// animated. Everything is in device pixels.
+// The frame is always landscape: 4:3 to 21:9, centred in the canvas; it sets the composition, and
+// the canvas around it (a window narrower or wider) shows the scene going on, dimmed, the colour at
+// the frame's edge carrying on where nothing is painted. Its height is the measure: the scene is painted on a 16:9 stage
+// as tall as the frame (spec x is a fraction of the stage's width, y and sizes fractions of its
+// height), the stage centred in the frame — a wider frame sees more on both sides, a narrower
+// one less; nothing on it moves or stretches. What matters belongs in the stage's middle 4:3.
+const Moood = (() => {
+  const STAGE = 16 / 9, NARROWEST = 4 / 3, WIDEST = 21 / 9;
+  // ── utilities ──────────────────────────────────────────────────────────
+  function seeded(seed) {
+    return () => {
+      seed = (seed + 0x6d2b79f5) | 0;
+      let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+  }
+  function noise1D(seed) {
+    const v = Array.from({ length: 512 }, seeded(seed));
+    return x => {
+      const i = Math.floor(x), f = x - i, k = f * f * (3 - 2 * f);
+      return v[i & 511] + (v[(i + 1) & 511] - v[i & 511]) * k;
+    };
+  }
+  function layer(w, h) {
+    const c = document.createElement('canvas');
+    c.width = Math.max(1, Math.round(w));
+    c.height = Math.max(1, Math.round(h));
+    return c;
+  }
+  function rgb(hex) {
+    const m = /^#?([0-9a-f]{6})$/i.exec(hex || '');
+    if (!m) throw new Error(`bad colour ${hex}`);
+    const n = parseInt(m[1], 16);
+    return `${n >> 16},${(n >> 8) & 255},${n & 255}`;
+  }
+  // Glows are the most frequent thing drawn (fireflies, lamps, fog, fire): one
+  // pre-rendered radial sprite per colour, stretched and faded with globalAlpha —
+  // no gradient objects created per frame.
+  const glowSprites = new Map();
+  function glowSprite(col) {
+    let s = glowSprites.get(col);
+    if (!s) {
+      s = layer(256, 256);
+      const g = s.getContext('2d'), gr = g.createRadialGradient(128, 128, 0, 128, 128, 128);
+      gr.addColorStop(0, `rgba(${col},1)`);
+      gr.addColorStop(0.25, `rgba(${col},0.4)`);
+      gr.addColorStop(1, `rgba(${col},0)`);
+      g.fillStyle = gr;
+      g.fillRect(0, 0, 256, 256);
+      glowSprites.set(col, s);
+    }
+    return s;
+  }
+  function glow(ctx, x, y, r, col, a) {
+    if (r <= 0 || a <= 0) return;
+    const prev = ctx.globalAlpha;
+    ctx.globalAlpha = prev * Math.min(1, a);
+    ctx.drawImage(glowSprite(col), x - r, y - r, 2 * r, 2 * r);
+    ctx.globalAlpha = prev;
+  }
+  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
+  const hash = s => { let h = 2166136261; for (const ch of String(s)) h = Math.imul(h ^ ch.charCodeAt(0), 16777619); return h >>> 0; };
+
+  // Film grain as sparse light/dark specks with their own alpha, so it composites with
+  // plain source-over (a full-screen 'overlay' blend every frame is expensive).
+  const grainTile = (() => {
+    const c = layer(160, 160), g = c.getContext('2d'), img = g.createImageData(160, 160);
+    for (let i = 0; i < img.data.length; i += 4) {
+      img.data[i] = img.data[i + 1] = img.data[i + 2] = Math.random() < 0.5 ? 0 : 255;
+      img.data[i + 3] = Math.random() * 38;
+    }
+    g.putImageData(img, 0, 0);
+    return c;
+  })();
+
+  // ── static layers ──────────────────────────────────────────────────────
+  function ridge(L, W, H, seed) {
+    const n1 = noise1D(seed), n2 = noise1D(seed + 1), n3 = noise1D(seed + 2);
+    const base = L.y * H, h = (L.height ?? 0.2) * H, r = L.roughness ?? 0.5;
+    return x => {
+      const u = x / W;
+      if (L.kind === 'mountains') {
+        const sharp = 1 - Math.abs(2 * n1(u * 3 + 0.3) - 1);
+        return base - h * (0.35 + 0.45 * sharp + r * 0.25 * n2(u * 12) + r * 0.08 * n3(u * 60));
+      }
+      if (L.kind === 'dunes') return base - h * (0.5 + 0.45 * Math.sin(u * 7 + n1(u * 2) * 4) * (0.6 + 0.4 * n2(u * 3)));
+      if (L.kind === 'ground') return base - h * 0.15 * n1(u * 4);
+      return base - h * (0.35 + 0.55 * n1(u * 2.5) + r * 0.15 * n2(u * 10)); // hills + base of forest/city
+    };
+  }
+
+  function drawPine(g, x, base, h, color, rnd) {
+    const w = h * (0.22 + rnd() * 0.08);
+    g.fillStyle = color;
+    g.fillRect(x - h * 0.012, base - h * 0.15, h * 0.024, h * 0.16);
+    const tiers = 6 + Math.floor(rnd() * 3);
+    for (let i = 0; i < tiers; i++) {
+      const k = i / tiers, yb = base - h * (0.1 + k * 0.78), yt = yb - h * (0.17 + 0.05 * (1 - k));
+      const wi = w * (1 - k) * (0.85 + rnd() * 0.3) + h * 0.02;
+      g.beginPath();
+      g.moveTo(x, yt);
+      g.quadraticCurveTo(x - wi * 0.3, yb - (yb - yt) * 0.35, x - wi, yb + h * 0.01);
+      g.quadraticCurveTo(x, yb - h * 0.025, x + wi, yb + h * 0.01);
+      g.quadraticCurveTo(x + wi * 0.3, yb - (yb - yt) * 0.35, x, yt);
+      g.fill();
+    }
+  }
+
+  // Layers are painted wider and taller than the screen so the camera can pan and
+  // zoom out: world x spans [-EXT·W, (1+EXT)·W], y spans [0, DEEP·H].
+  const EXT = 0.4, DEEP = 1.3;
+
+  // Paints a landscape layer. By default the whole layer at scale 1; `view` = { x, y, w, h, k }
+  // paints only that region (layer coordinates) at scale k — for sharp close-ups.
+  // Also returns, for each of TOP_STRIPS vertical strips, `tops`: the highest painted y, and
+  // `solids`: the y below which the strip is solid colour. A renderer can skip the empty sky
+  // above a layer and fill its body flat; only the band between needs a texture.
+  // `view.canvas`, if given, is reused (cleared) instead of allocating a new canvas.
+  const TOP_STRIPS = 64;
+  function staticLayer(L, W, H, seed, view) {
+    const x0 = -EXT * W, x1 = (1 + EXT) * W, bottom = DEEP * H;
+    const v = view || { x: x0, y: 0, w: x1 - x0, h: bottom, k: 1 };
+    const c = v.canvas || layer(v.w * v.k, v.h * v.k), g = c.getContext('2d'), rnd = seeded(seed), f = ridge(L, W, H, seed);
+    if (v.canvas) { g.setTransform(1, 0, 0, 1, 0, 0); g.clearRect(0, 0, c.width, c.height); }
+    g.setTransform(v.k, 0, 0, v.k, -v.x * v.k, -v.y * v.k);
+    const tops = new Array(TOP_STRIPS).fill(bottom), solids = new Array(TOP_STRIPS).fill(0), sw = (x1 - x0) / TOP_STRIPS;
+    const mark = (xa, xb, y) => {
+      for (let i = Math.max(0, Math.floor((xa - x0) / sw)); i <= Math.min(TOP_STRIPS - 1, Math.floor((xb - x0) / sw)); i++) tops[i] = Math.min(tops[i], y);
+    };
+    // finer outline steps when painting a close-up, but only across the painted region
+    const step = Math.max(2, W / 400) / v.k;
+    g.fillStyle = L.color;
+    const top = (L.kind === 'forest' || L.kind === 'city')
+      ? x => L.y * H - (L.y * H - f(x)) * 0.25 // a low base under the trees / buildings
+      : f;
+    g.beginPath();
+    g.moveTo(x0, bottom);
+    const coarse = Math.max(2, W / 400);
+    for (let x = x0; x <= x1 + coarse; x += coarse) {
+      const y = top(x);
+      mark(x - coarse, x + coarse, y);
+      const i = Math.min(TOP_STRIPS - 1, Math.max(0, Math.floor((x - x0) / sw)));
+      solids[i] = Math.max(solids[i], y);
+    }
+    const pa = Math.max(x0, v.x - 2 * step), pb = Math.min(x1, v.x + v.w + 2 * step);
+    g.lineTo(pa, bottom);
+    for (let x = pa; x <= pb + step; x += step) g.lineTo(x, top(x));
+    g.lineTo(pb + step, bottom);
+    g.fill();
+    const density = L.density ?? 0.5, h = (L.height ?? 0.2) * H;
+    if (L.kind === 'forest') {
+      const spacing = W * (0.035 - 0.028 * density);
+      for (let x = x0 - spacing; x < x1 + spacing; x += spacing * (0.5 + rnd())) {
+        const th = h * (0.55 + rnd() * 0.5), base = top(x) + h * 0.03;
+        mark(x - th * 0.35, x + th * 0.35, base - th * 1.12);
+        drawPine(g, x, base, th, L.color, rnd);
+      }
+    }
+    const windows = [];
+    if (L.kind === 'city') {
+      let x = x0 - rnd() * W * 0.03;
+      while (x < x1) {
+        const bw = W * (0.03 + rnd() * 0.05) * (1.3 - density * 0.6), bh = h * (0.3 + rnd() * 0.7);
+        const btop = L.y * H - bh;
+        g.fillStyle = L.color;
+        g.fillRect(x, btop, bw - W * 0.002, bh + bottom);
+        mark(x, x + bw, btop - bh * 0.12);
+        if (rnd() < 0.25) g.fillRect(x + bw * 0.4, btop - bh * 0.12, bw * 0.08, bh * 0.12);
+        const cw = Math.max(2, W * 0.004), ch = Math.max(3, H * 0.009);
+        for (let wy = btop + ch * 1.5; wy < L.y * H - ch; wy += ch * 2.2) {
+          for (let wx = x + cw; wx < x + bw - cw * 2; wx += cw * 2.2) {
+            if (rnd() < (L.lights ?? 0.2)) windows.push({ x: wx, y: wy, w: cw, h: ch, p: rnd() * 100 });
+          }
+        }
+        x += bw;
+      }
+    }
+    // margins: the outline is sampled, its true peaks and dips lie a little beyond the samples
+    return { canvas: c, x0, windows, tops: tops.map(y => Math.max(0, y - 4 - H * 0.01)), solids: solids.map((y, i) => Math.min(bottom, Math.max(y, solids[i - 1] ?? y, solids[i + 1] ?? y) + 4 + H * 0.01)), stripW: sw };
+  }
+
+  // ── objects ────────────────────────────────────────────────────────────
+  function figure(ctx, x, y, s, t, color, pose, flip) {
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.scale(flip ? -s : s, s);
+    ctx.fillStyle = ctx.strokeStyle = color;
+    ctx.lineCap = ctx.lineJoin = 'round';
+    const L = (w, ...p) => { ctx.lineWidth = w; ctx.beginPath(); ctx.moveTo(p[0], p[1]); for (let i = 2; i < p.length; i += 2) ctx.lineTo(p[i], p[i + 1]); ctx.stroke(); };
+    const C = (cx, cy, r) => { ctx.beginPath(); ctx.arc(cx, cy, r, 0, 7); ctx.fill(); };
+    const b = Math.sin(t * 1.3) * 0.008;
+    if (pose === 'sit') {
+      L(0.16, 0, -0.08, -0.28, -0.4); L(0.11, -0.28, -0.4, -0.33, -0.05);
+      ctx.beginPath(); ctx.moveTo(0.13, -0.02); ctx.bezierCurveTo(0.22, -0.22, 0.18, -0.46, 0.05, -0.6 - b);
+      ctx.lineTo(-0.08, -0.57 - b); ctx.bezierCurveTo(-0.1, -0.4, -0.06, -0.2, -0.04, -0.06); ctx.fill();
+      L(0.075, 0.02, -0.52, -0.16, -0.46, -0.31, -0.36); C(-0.13, -0.69 - b, 0.11);
+    } else {
+      const walk = pose === 'walk' ? Math.sin(t * 3) * 0.08 : 0;
+      L(0.1, -0.05, -0.4, -0.06 + walk, -0.02); L(0.1, 0.05, -0.4, 0.06 - walk, -0.02);
+      ctx.beginPath(); ctx.moveTo(-0.11, -0.76 - b); ctx.quadraticCurveTo(-0.17, -0.74, -0.17, -0.64);
+      ctx.lineTo(-0.19, -0.34); ctx.lineTo(0.19, -0.34); ctx.lineTo(0.17, -0.64);
+      ctx.quadraticCurveTo(0.17, -0.74, 0.11, -0.76 - b); ctx.fill();
+      L(0.08, -0.16, -0.68, -0.2 - walk * 0.5, -0.42); L(0.08, 0.16, -0.68, 0.2 + walk * 0.5, -0.42);
+      C(pose === 'back' ? 0 : 0.02, -0.87 - b, 0.11);
+    }
+    ctx.restore();
+  }
+
+  // W × H: the stage, in pixels
+  function drawObject(ctx, o, W, H, t, lightsOut) {
+    const x = o.x * W, y = o.y * H, s = o.size * H, col = o.color;
+    const light = o.light ? rgb(o.light) : null, fl = 0.9 + 0.1 * Math.sin(t * 7 + x) * Math.sin(t * 3.1 + y);
+    ctx.fillStyle = ctx.strokeStyle = col;
+    ctx.lineCap = ctx.lineJoin = 'round';
+    switch (o.kind) {
+      case 'pine': drawPine(ctx, x, y, s, col, seeded(hash(o.x + ':' + o.y))); break;
+      case 'tree': {
+        const sw = Math.sin(t * 0.8 + x) * s * 0.01;
+        ctx.fillRect(x - s * 0.03, y - s * 0.5, s * 0.06, s * 0.5);
+        for (const [dx, dy, r] of [[0, -0.72, 0.28], [-0.18, -0.58, 0.2], [0.18, -0.6, 0.21], [0.05, -0.9, 0.18]]) {
+          ctx.beginPath(); ctx.arc(x + dx * s + sw, y + dy * s, r * s, 0, 7); ctx.fill();
+        }
+        break;
+      }
+      case 'house': {
+        const w = s * 0.9, h = s * 0.55;
+        ctx.fillRect(x - w / 2, y - h, w, h);
+        ctx.beginPath(); ctx.moveTo(x - w * 0.6, y - h); ctx.lineTo(x, y - s); ctx.lineTo(x + w * 0.6, y - h); ctx.fill();
+        ctx.fillRect(x + w * 0.2, y - s * 0.92, w * 0.1, s * 0.2);
+        if (light) lightsOut.push({ x: x - w * 0.15, y: y - h * 0.55, r: s * 0.9, col: light, a: 0.4 * fl, rect: [x - w * 0.27, y - h * 0.72, w * 0.22, h * 0.3] });
+        break;
+      }
+      case 'tower': {
+        const w = s * 0.22;
+        ctx.fillRect(x - w / 2, y - s * 0.85, w, s * 0.85);
+        ctx.beginPath(); ctx.moveTo(x - w * 0.7, y - s * 0.85); ctx.lineTo(x, y - s); ctx.lineTo(x + w * 0.7, y - s * 0.85); ctx.fill();
+        if (light) lightsOut.push({ x, y: y - s * 0.7, r: s * 0.5, col: light, a: 0.4 * fl, rect: [x - w * 0.18, y - s * 0.75, w * 0.36, s * 0.08] });
+        break;
+      }
+      case 'lamp': {
+        ctx.lineWidth = s * 0.03;
+        ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x, y - s); ctx.quadraticCurveTo(x, y - s * 1.05, x + s * 0.12, y - s * 1.02); ctx.stroke();
+        ctx.fillRect(x + s * 0.06, y - s * 1.02, s * 0.12, s * 0.05);
+        if (light) lightsOut.push({ x: x + s * 0.12, y: y - s * 0.95, r: s * 1.4, col: light, a: 0.45 * fl, dot: s * 0.04, cone: { y, w: s * 0.6 } });
+        break;
+      }
+      case 'lantern': {
+        const sway = Math.sin(t * 1.2 + x) * s * 0.05;
+        ctx.lineWidth = Math.max(1, s * 0.02);
+        ctx.beginPath(); ctx.moveTo(x, y - s * 0.6); ctx.lineTo(x + sway, y - s * 0.15); ctx.stroke();
+        ctx.fillRect(x + sway - s * 0.08, y - s * 0.15, s * 0.16, s * 0.2);
+        if (light) lightsOut.push({ x: x + sway, y: y - s * 0.05, r: s * 1.2, col: light, a: 0.5 * fl, dot: s * 0.07 });
+        break;
+      }
+      case 'campfire': {
+        ctx.lineWidth = s * 0.08;
+        ctx.beginPath(); ctx.moveTo(x - s * 0.3, y); ctx.lineTo(x + s * 0.25, y - s * 0.08); ctx.moveTo(x + s * 0.3, y); ctx.lineTo(x - s * 0.25, y - s * 0.08); ctx.stroke();
+        const fc = light || '255,150,60';
+        for (let i = 0; i < 3; i++) {
+          const fh = s * (0.5 + 0.2 * Math.sin(t * 9 + i * 2)), fw = s * (0.16 - i * 0.03);
+          ctx.fillStyle = `rgba(${i === 2 ? '255,230,170' : fc},${0.85 - i * 0.15})`;
+          ctx.beginPath(); ctx.moveTo(x - fw, y - s * 0.05); ctx.quadraticCurveTo(x - fw * 0.6, y - fh * 0.6, x + Math.sin(t * 5 + i) * s * 0.05, y - fh);
+          ctx.quadraticCurveTo(x + fw * 0.6, y - fh * 0.6, x + fw, y - s * 0.05); ctx.fill();
+        }
+        lightsOut.push({ x, y: y - s * 0.25, r: s * 3, col: fc, a: 0.4 * (0.8 + 0.2 * Math.sin(t * 11)) });
+        break;
+      }
+      case 'window': {
+        const w = s * 0.6;
+        if (light) lightsOut.push({ x, y: y - s / 2, r: s * 1.3, col: light, a: 0.35 * fl, rect: [x - w / 2, y - s, w, s] });
+        ctx.lineWidth = Math.max(2, s * 0.05);
+        ctx.strokeRect(x - w / 2, y - s, w, s);
+        ctx.beginPath(); ctx.moveTo(x, y - s); ctx.lineTo(x, y); ctx.moveTo(x - w / 2, y - s * 0.55); ctx.lineTo(x + w / 2, y - s * 0.55); ctx.stroke();
+        break;
+      }
+      case 'boat': {
+        const bob = Math.sin(t * 1.1 + x) * s * 0.03;
+        ctx.beginPath(); ctx.moveTo(x - s * 0.6, y - s * 0.12 + bob); ctx.quadraticCurveTo(x, y + s * 0.08 + bob, x + s * 0.6, y - s * 0.12 + bob); ctx.lineTo(x - s * 0.6, y - s * 0.12 + bob); ctx.fill();
+        ctx.lineWidth = s * 0.025;
+        ctx.beginPath(); ctx.moveTo(x, y - s * 0.1 + bob); ctx.lineTo(x, y - s + bob); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(x + s * 0.03, y - s * 0.95 + bob); ctx.lineTo(x + s * 0.4, y - s * 0.2 + bob); ctx.lineTo(x + s * 0.03, y - s * 0.2 + bob); ctx.fill();
+        break;
+      }
+      case 'rock': {
+        const r = seeded(hash(o.x + 'r' + o.y));
+        ctx.beginPath(); ctx.moveTo(x - s * 0.7, y);
+        for (let i = 0; i <= 6; i++) { const a = Math.PI * (1 - i / 6); ctx.lineTo(x + Math.cos(a) * s * (0.6 + r() * 0.2), y - Math.sin(a) * s * (0.7 + r() * 0.3)); }
+        ctx.closePath(); ctx.fill();
+        break;
+      }
+      case 'bench': {
+        ctx.fillRect(x - s * 0.8, y - s * 0.45, s * 1.6, s * 0.08);
+        ctx.fillRect(x - s * 0.8, y - s * 0.85, s * 1.6, s * 0.07);
+        ctx.fillRect(x - s * 0.7, y - s * 0.45, s * 0.06, s * 0.45); ctx.fillRect(x + s * 0.64, y - s * 0.45, s * 0.06, s * 0.45);
+        ctx.fillRect(x - s * 0.7, y - s * 0.85, s * 0.05, s * 0.4); ctx.fillRect(x + s * 0.65, y - s * 0.85, s * 0.05, s * 0.4);
+        break;
+      }
+      case 'figure': figure(ctx, x, y, s, t, col, o.pose || 'stand', o.flip); break;
+      case 'cat': {
+        ctx.beginPath(); ctx.ellipse(x, y - s * 0.3, s * 0.22, s * 0.3, 0, 0, 7); ctx.fill();
+        ctx.beginPath(); ctx.arc(x, y - s * 0.72, s * 0.15, 0, 7); ctx.fill();
+        ctx.beginPath(); ctx.moveTo(x - s * 0.14, y - s * 0.78); ctx.lineTo(x - s * 0.1, y - s * 0.98); ctx.lineTo(x - s * 0.02, y - s * 0.84);
+        ctx.moveTo(x + s * 0.14, y - s * 0.78); ctx.lineTo(x + s * 0.1, y - s * 0.98); ctx.lineTo(x + s * 0.02, y - s * 0.84); ctx.fill();
+        ctx.lineWidth = s * 0.06;
+        ctx.beginPath(); ctx.moveTo(x + s * 0.18, y - s * 0.05);
+        ctx.quadraticCurveTo(x + s * 0.5, y - s * 0.05, x + s * (0.45 + Math.sin(t * 1.5) * 0.08), y - s * 0.4); ctx.stroke();
+        break;
+      }
+      case 'bird': {
+        const span = WIDEST * H + 4 * s, bx = ((x + t * s * 1.5 * (o.flip ? -1 : 1)) % span + span) % span + (W - WIDEST * H) / 2 - 2 * s;
+        const by = y + Math.sin(t * 0.7 + x) * s * 0.4, fl2 = Math.sin(t * 8 + x) * s * 0.25;
+        ctx.lineWidth = Math.max(1.5, s * 0.08);
+        ctx.beginPath(); ctx.moveTo(bx - s * 0.5, by - fl2); ctx.quadraticCurveTo(bx - s * 0.2, by - s * 0.15, bx, by);
+        ctx.quadraticCurveTo(bx + s * 0.2, by - s * 0.15, bx + s * 0.5, by - fl2); ctx.stroke();
+        break;
+      }
+      case 'flower': {
+        const sw = Math.sin(t * 1.4 + x) * s * 0.06;
+        ctx.lineWidth = Math.max(1, s * 0.04);
+        ctx.beginPath(); ctx.moveTo(x, y); ctx.quadraticCurveTo(x, y - s * 0.5, x + sw, y - s * 0.9); ctx.stroke();
+        ctx.fillStyle = light ? `rgb(${light})` : col;
+        for (let i = 0; i < 5; i++) { const a = i / 5 * Math.PI * 2 + t * 0.2; ctx.beginPath(); ctx.ellipse(x + sw + Math.cos(a) * s * 0.1, y - s * 0.9 + Math.sin(a) * s * 0.1, s * 0.09, s * 0.05, a, 0, 7); ctx.fill(); }
+        break;
+      }
+      case 'bridge': {
+        ctx.lineWidth = s * 0.08;
+        ctx.beginPath(); ctx.moveTo(x - s * 1.5, y); ctx.quadraticCurveTo(x, y - s * 0.9, x + s * 1.5, y); ctx.stroke();
+        ctx.lineWidth = s * 0.03;
+        ctx.beginPath(); ctx.moveTo(x - s * 1.5, y - s * 0.2); ctx.quadraticCurveTo(x, y - s * 1.15, x + s * 1.5, y - s * 0.2); ctx.stroke();
+        for (let i = -4; i <= 4; i++) { const u = i / 4.5, yy = y - s * 0.45 * (1 - u * u) * 1.0; ctx.beginPath(); ctx.moveTo(x + u * s * 1.4, yy); ctx.lineTo(x + u * s * 1.4, yy - s * 0.22); ctx.stroke(); }
+        break;
+      }
+      case 'custom': case undefined: paintCustom(ctx, o, W, H, t, lightsOut); break;
+      default: throw new Error(`unknown object kind ${o.kind}`);
+    }
+  }
+
+  // Elements the world's agent paints itself. `o.code` is the body of a function (g, e):
+  // g is a 2D canvas context in metres — origin at the element's anchor (where it stands),
+  // x to the right, y DOWN (a 6 m house spans y −6…0). e.t = seconds by the real clock (e.phase =
+  // 0…1 of the loop for animated elements), e.id = the element's id, e.rnd() = seeded random, e.px = one screen pixel in metres,
+  // e.light(x, y, radius, color, strength) = a glowing light the engine animates. What scenes
+  // share (kit.js): e.anim — the animator's toolkit; e.kit — the world's modules; e.lib — the scene's
+  // lib. e.was(key, ago) — what a value of the state was `ago` seconds ago (what lags behind reads
+  // it); e.speed(key) — how fast it is changing now (per second).
+  // Errors are collected (window.__mooodErrors) so the agent reviewing its work sees them.
+  // The scene's state (scenestate.js): values the scene's scripts, agents and widgets set, which
+  // the painting code reads as e.state; ver counts changes, so the renderer knows to repaint.
+  const STATE = { values: {}, ver: 0, was: key => STATE.values[key], sample: null };
+  // what the shown scene's code shares (kit.js): the world's modules it lists and the scene's lib
+  let SHARED = { kit: {}, lib: {} };
+  // Where an element is now, as its painting code says (e.at): fractions of the stage as seen
+  // from the start — speech bubbles and widgets follow it (stage.screenOf).
+  const FOCUS = new Map();
+  // A platformer's hero as it moves now (camera.mode platform): its painting code reads e.hero —
+  // { vx, vy (m/s), ground } — to move its legs; the engine moves and turns the painting itself.
+  const HERO = { id: null, vx: 0, vy: 0, ground: true };
+  // What an element's code read as it was last painted (element → {time, state}): one that reads
+  // the time is repainted every frame, one that reads only the state when the state changes, one
+  // that reads neither stays as painted (gl.js) — whether it reads them itself or through the kit
+  const READS = new WeakMap();
+  const compiled = new Map();
+  function reportError(o, err) {
+    const msg = `${o.name || o.kind}: ${err && err.message || err}`;
+    (window.__mooodErrors = window.__mooodErrors || []).push(msg);
+    console.warn('moood custom element:', msg);
+  }
+  function paintCustom(ctx, o, W, H, t, lightsOut) {
+    const code = String(o.code || '');
+    let fn = compiled.get(code);
+    if (fn === undefined) {
+      try { fn = new Function('g', 'e', code); } catch (err) { fn = null; reportError(o, err); }
+      compiled.set(code, fn);
+    }
+    if (!fn) return;
+    // sky and ground elements are painted in stage heights from the stage's top-left corner, as
+    // seen from the start (x 0…W/H, y 0…1, with margins); others in metres from their anchor
+    const flat = o.sky || o.ground;
+    const ppm = flat ? H : o.size * H / (o.height || 2), x = flat ? 0 : o.x * W, y = flat ? 0 : o.y * H;
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.scale(ppm, ppm);
+    ctx.fillStyle = ctx.strokeStyle = o.color || '#000000';
+    ctx.lineCap = ctx.lineJoin = 'round';
+    const period = o.period || 2;
+    // a point the code names, as painted — through whatever it did to the canvas since (translate,
+    // scale, rotate): [x, y, how much it is scaled]
+    const base = ctx.getTransform(), unbase = base.inverse();
+    const painted = (lx, ly) => {
+      const now = ctx.getTransform(), q = unbase.transformPoint(now.transformPoint({ x: lx, y: ly }));
+      return [x + q.x * ppm, y + q.y * ppm, Math.hypot(now.a, now.b) / Math.hypot(base.a, base.b)];
+    };
+    const read = { time: false, state: false };
+    READS.set(o, read);
+    const e = {
+      get t() { read.time = true; return t; },
+      get phase() { read.time = true; return ((t / period) % 1 + 1) % 1; },
+      get state() { read.state = true; return STATE.values; },
+      id: o.id ?? null, rnd: seeded(hash(code) ^ hash(o.x + ':' + o.y)),
+      px: 1 / Math.max(1e-6, base.a), W, H, aspect: W / H,
+      light(lx, ly, r, color = '#ffd08a', strength = 0.6) {
+        try {
+          const [px, py, k] = painted(lx, ly);
+          lightsOut.push({ x: px, y: py, r: r * k * ppm, col: rgb(color), a: strength, flicker: o.flicker ?? 0.3 });
+        } catch (err) { reportError(o, err); }
+      },
+      // where this element is now (its head, say): what speaks or hovers over it follows this point
+      at(lx, ly) { if (o.id) { const [px, py] = painted(lx, ly); FOCUS.set(o.id, { x: px / W, y: py / H }); } },
+      anim: MooodKit.anim, kit: SHARED.kit, lib: SHARED.lib,
+      was: (key, ago = 0) => { read.state = true; return STATE.was(key, ago); },
+      speed: key => { read.state = true; const a = STATE.was(key, 0), b = STATE.was(key, 0.05); return typeof a === 'number' && typeof b === 'number' ? (a - b) / 0.05 : 0; },
+    };
+    if (o.id && o.id === HERO.id) { read.time = true; e.hero = { vx: HERO.vx, vy: HERO.vy, ground: HERO.ground }; }
+    try { fn(ctx, e); } catch (err) { reportError(o, err); }
+    ctx.restore();
+  }
+  // The box an object's painting fits in (pixels of the W × H stage): built-in kinds a fixed frame
+  // around the base, custom ones their `box` in metres (default: a little wider than tall).
+  function objectBox(o, W, H) {
+    // the sky: as wide as the widest frame
+    if (o.sky) return { bx: (W - WIDEST * H) / 2, by: -0.35 * H, bw: WIDEST * H, bh: 1.6 * H };
+    // ground: from the horizon down, wider than the screen (for stepping aside and looking down)
+    if (o.ground) return { bx: -EXT * W, by: o._yh * H, bw: (1 + 2 * EXT) * W, bh: (1.7 - o._yh) * H };
+    const s = Math.max(2, o.size * H), x = o.x * W, y = o.y * H;
+    if (o.kind === 'custom' || !o.kind) {
+      const h = o.height || 2, ppm = s / h, b = Array.isArray(o.box) && o.box.length === 4 ? o.box : [-0.8 * h, -1.1 * h, 0.8 * h, 0.15 * h];
+      return { bx: x + b[0] * ppm, by: y + b[1] * ppm, bw: (b[2] - b[0]) * ppm, bh: (b[3] - b[1]) * ppm };
+    }
+    return { bx: x - 1.7 * s, by: y - 1.3 * s, bw: 3.4 * s, bh: 1.6 * s };
+  }
+
+  function drawLights(ctx, lights) {
+    for (const l of lights) {
+      if (l.rect) { ctx.fillStyle = `rgba(${l.col},${Math.min(1, l.a * 2.2)})`; ctx.fillRect(...l.rect); }
+    }
+    ctx.save();
+    ctx.globalCompositeOperation = 'lighter';
+    for (const l of lights) {
+      glow(ctx, l.x, l.y, l.r, l.col, l.a * 0.6);
+      if (l.dot) glow(ctx, l.x, l.y, l.dot * 3, '255,245,220', 0.9);
+      if (l.cone) {
+        const g = ctx.createLinearGradient(0, l.y, 0, l.cone.y);
+        g.addColorStop(0, `rgba(${l.col},${l.a * 0.35})`);
+        g.addColorStop(1, `rgba(${l.col},0)`);
+        ctx.fillStyle = g;
+        ctx.beginPath(); ctx.moveTo(l.x - l.dot, l.y); ctx.lineTo(l.x + l.dot, l.y); ctx.lineTo(l.x + l.cone.w, l.cone.y); ctx.lineTo(l.x - l.cone.w, l.cone.y); ctx.fill();
+      }
+    }
+    ctx.restore();
+  }
+
+  // ── particles ──────────────────────────────────────────────────────────
+  const PARTICLES = { snow: 380, rain: 520, fireflies: 45, dust: 140, petals: 90, embers: 90, leaves: 60, bubbles: 60 };
+  function makeParticles(p, W, H, rnd) {
+    const n = Math.round((PARTICLES[p.kind] ?? (() => { throw new Error(`unknown particle ${p.kind}`); })()) * clamp(p.density ?? 0.5, 0, 1) * (W / H) / (16 / 9)); // same count at any resolution
+    return Array.from({ length: n }, () => ({ x: rnd() * W, y: rnd() * H, z: rnd(), ph: rnd() * 7, life: rnd() }));
+  }
+  // Particle motion (shared by the 2D and WebGL renderers). Positions are screen pixels.
+  function moveParticle(kind, q, W, H, t, dt, u, wind) {
+    switch (kind) {
+      case 'rain':
+        q.y += (700 + q.z * 500) * u * dt; q.x += wind * 3 * dt;
+        if (q.y > H) { q.y = -20 * u; q.x = Math.random() * W; }
+        return;
+      case 'snow': q.y += (25 + q.z * 60) * u * dt; q.x += (wind + Math.sin(t * 0.8 + q.ph) * 12 * u) * dt; break;
+      case 'dust': q.y += Math.sin(t * 0.3 + q.ph) * 6 * u * dt; q.x += (wind * 0.3 + 5 * u) * dt; break;
+      case 'petals': case 'leaves': q.y += (30 + q.z * 40) * u * dt; q.x += (wind + Math.sin(t + q.ph) * 30 * u) * dt; break;
+      case 'fireflies': q.x += Math.sin(t * 0.4 + q.ph) * 14 * u * dt; q.y += Math.cos(t * 0.33 + q.ph * 2) * 10 * u * dt; break;
+      case 'embers': q.y -= (40 + q.z * 60) * u * dt; q.x += (wind * 0.5 + Math.sin(t * 2 + q.ph) * 15 * u) * dt; break;
+      case 'bubbles': q.y -= (20 + q.z * 40) * u * dt; q.x += Math.sin(t * 1.5 + q.ph) * 10 * u * dt; break;
+      default: throw new Error(`unknown particle ${kind}`);
+    }
+    if (q.y > H + 20 * u) { q.y = -20 * u; q.x = Math.random() * W; }
+    if (q.y < -20 * u) { q.y = H + 20 * u; q.x = Math.random() * W; }
+    if (q.x > W + 20 * u) q.x -= W + 40 * u; else if (q.x < -20 * u) q.x += W + 40 * u;
+  }
+
+  function stepParticles(ctx, p, list, W, H, t, dt, u) {
+    const col = rgb(p.color || '#ffffff'), wind = (p.wind ?? 0) * 60 * u;
+    ctx.save();
+    if (p.kind === 'rain') {
+      ctx.strokeStyle = `rgba(${col},0.28)`; ctx.lineWidth = Math.max(1, u);
+      ctx.beginPath();
+      for (const q of list) {
+        moveParticle('rain', q, W, H, t, dt, u, wind);
+        const len = (10 + q.z * 16) * u;
+        ctx.moveTo(q.x, q.y); ctx.lineTo(q.x + wind * 0.02, q.y + len);
+      }
+      ctx.stroke();
+      ctx.restore();
+      return;
+    }
+    if (p.kind === 'fireflies' || p.kind === 'embers') ctx.globalCompositeOperation = 'lighter';
+    for (const q of list) {
+      moveParticle(p.kind, q, W, H, t, dt, u, wind);
+      const r = (1 + q.z * 3) * u;
+      if (p.kind === 'fireflies') {
+        const a = 0.25 + 0.75 * Math.pow(0.5 + 0.5 * Math.sin(t * 1.6 + q.ph * 3), 3);
+        glow(ctx, q.x, q.y, 18 * u, col, a * 0.6);
+      } else if (p.kind === 'embers') {
+        glow(ctx, q.x, q.y, 8 * u, col, 0.6 * (0.5 + 0.5 * Math.sin(t * 5 + q.ph)));
+      } else if (p.kind === 'petals' || p.kind === 'leaves') {
+        ctx.fillStyle = `rgba(${col},0.85)`;
+        ctx.save(); ctx.translate(q.x, q.y); ctx.rotate(t * (0.5 + q.z) + q.ph); ctx.scale(1, Math.abs(Math.sin(t * 2 + q.ph)) * 0.8 + 0.2);
+        ctx.beginPath(); ctx.ellipse(0, 0, r * (p.kind === 'leaves' ? 2.4 : 1.6), r, 0, 0, 7); ctx.fill(); ctx.restore();
+      } else if (p.kind === 'bubbles') {
+        ctx.strokeStyle = `rgba(${col},0.5)`; ctx.lineWidth = Math.max(1, u * 0.8);
+        ctx.beginPath(); ctx.arc(q.x, q.y, r * 1.5, 0, 7); ctx.stroke();
+      } else {
+        ctx.fillStyle = `rgba(${col},${p.kind === 'dust' ? 0.35 : 0.3 + q.z * 0.55})`;
+        ctx.beginPath(); ctx.arc(q.x, q.y, p.kind === 'dust' ? r * 0.5 : r, 0, 7); ctx.fill();
+      }
+    }
+    ctx.restore();
+  }
+
+  // ── camera ─────────────────────────────────────────────────────────────
+  // A multiplane camera, the way 2.5D games do it: every layer and object is a flat
+  // cut-out standing at a real distance Z, seen through a perspective camera. Distances
+  // come from the picture itself: the eye is 1 unit above flat ground and the horizon is
+  // at screen height yh, so ground painted h (screen heights) below the horizon is 1/h
+  // away. Sky, sun, moon and stars are at infinity: walking never moves them.
+  // cam = { x: steps sideways, z: steps forward (world units, eye heights), y: gaze — down (+) / up (−) }.
+  const Z_NEAR = 0.6, Z_FAR = 150; // in eye heights (1.7 m)
+  const LAND = new Set(['mountains', 'hills', 'dunes', 'forest', 'city', 'water', 'ground']);
+  const depthAt = (y, yh) => (y > yh + 0.0125 ? clamp(1 / (y - yh), Z_NEAR, Z_FAR) : Z_FAR);
+  // The horizon is the base of the farthest landscape layer. Clouds and fog stand just
+  // behind the next nearer landscape layer (or in front of the last one).
+  // Typical heights (m) of what the scene may hold, and the viewer's eye height.
+  const EYE = 1.7;
+  const HEIGHT = { pine: 15, tree: 8, house: 6, tower: 18, lamp: 4, lantern: 2.2, campfire: 0.6, boat: 4, rock: 1, bench: 0.9, figure: 1.75, cat: 0.3, flower: 0.35, bridge: 3 };
+  // The horizon is at eye level, so it crosses everything standing on the ground at 1.7 m:
+  // a person at the eyes, a house low on its wall, a bench not at all. Each object painted
+  // `size` tall at `y` suggests a horizon at y − size·EYE/height; the median of those is
+  // the eye level of the scene (without objects: the base of the farthest landscape layer).
+  function horizonOf(spec, host) {
+    // (lanterns often hang in the air: they don't vote)
+    const guesses = (spec.objects || []).filter(o => HEIGHT[o.kind] && o.kind !== 'lantern' && !host(o) && o.size > 0)
+      .map(o => o.y - o.size * EYE / (o.kind === 'figure' && o.pose === 'sit' ? 1.2 : HEIGHT[o.kind]))
+      .sort((a, b) => a - b);
+    if (guesses.length) return clamp(guesses[guesses.length >> 1], 0.2, 0.95);
+    const land = (spec.layers || []).filter(L => LAND.has(L.kind));
+    return land.length ? Math.min(...land.map(L => L.y)) : 0.6;
+  }
+  function depths(spec) {
+    const layers = spec.layers || [];
+    // An object stands where its base is — unless it is attached to a bigger one (a window on
+    // a wall, a lantern on a porch): its base inside the other's outline. Then it shares that depth.
+    const objs = spec.objects || [];
+    const host = o => objs.find(h => h !== o && h.kind !== 'bird' && h.size > o.size &&
+      Math.abs(o.x - h.x) * 16 / 9 < h.size * 0.6 && o.y > h.y - h.size && o.y < h.y + 0.01);
+    // the director may set the eye level explicitly (spec.horizon); else it is estimated
+    const yh = typeof spec.horizon === 'number' ? clamp(spec.horizon, 0.05, 0.95) : horizonOf(spec, host);
+    const Z = layers.map(L => (LAND.has(L.kind) ? depthAt(L.y, yh) : null));
+    for (let i = 0; i < Z.length; i++) {
+      if (Z[i] !== null) continue;
+      const next = Z.slice(i + 1).find(z => z !== null), prev = Z.slice(0, i).reverse().find(z => z !== null);
+      Z[i] = next !== undefined ? next * 1.05 : prev !== undefined ? prev * 0.95 : Z_FAR;
+    }
+    // How far an object is: from how big it looks for what it is (a house painted 16% of
+    // the screen tall is ~22 eye heights away) — robust, unlike the height of its base above
+    // the horizon, which blows up for things painted near the horizon line.
+    // And so everything agrees on the eye level, each ground-standing object's base is nudged
+    // (usually 1–3% of the screen) to where, at that distance, it meets the ground:
+    // yh + size·EYE/height. Attached things move with their host; hanging lanterns stay.
+    const realH = o => (o.kind === 'figure' && o.pose === 'sit' ? 1.2 : HEIGHT[o.kind]);
+    const own = o => (realH(o) && o.size > 0 ? clamp(realH(o) / EYE / o.size, Z_NEAR, Z_FAR) : depthAt(o.y, yh));
+    const shift = o => {
+      const h = host(o);
+      if (h) return shift(h);
+      return realH(o) && o.size > 0 && o.kind !== 'lantern' ? yh + o.size * EYE / realH(o) - o.y : 0;
+    };
+    // Custom elements say where they are: `distance` (m) or `y` (where they touch the ground),
+    // plus `elevation` (m above the ground) and `height` (m); size on screen follows. Beyond Z_FAR
+    // an element is laid at Z_FAR (it barely moves as you walk anyway) but sized and placed on
+    // screen for its real distance — a range 8 km away looks 8 km away, not 30 times bigger.
+    const customZ = o => (o.distance > 0 ? clamp(o.distance / EYE, Z_NEAR, Z_FAR) : depthAt(o.y, yh));
+    const sightZ = o => (o.distance > 0 ? Math.max(Z_NEAR, o.distance / EYE) : depthAt(o.y, yh));
+    const custom = o => o.kind === 'custom' || !o.kind;
+    // across the view: `x` — where it is seen from the start, a fraction of the stage's width; or
+    // `across` — metres to the right of the start's line of sight (left: negative); or, looking
+    // around (around, roam), `bearing` — degrees from straight ahead (right: positive), with its
+    // `distance`: such an element is painted as if straight ahead, and stood where it is
+    const planeZ = o => (o.distance > 0 ? o.distance : 10) / EYE;
+    const bearing = o => typeof o.bearing === 'number' && o.distance > 0 && !o.sky;
+    const paintZ = o => (o.plane ? planeZ(o) : custom(o) ? sightZ(o) : own(host(o) || o));
+    const objectX = o => (bearing(o) ? 0.5 : typeof o.across === 'number' && !o.sky ? 0.5 + o.across / EYE / STAGE / paintZ(o) : o.x ?? 0.5);
+    const objectY = o => (o.sky || o.ground ? 0 : custom(o) ? yh + (1 - (o.elevation || 0) / EYE) / sightZ(o) : o.kind === 'bird' ? o.y : o.y + shift(o));
+    return {
+      yh, Z, objectX,
+      // where it stands in the world (eye heights: X to the right, Z ahead, Y its anchor's
+      // height) and the distance Zp it is painted for
+      objectAt: o => {
+        const Zp = paintZ(o), Y = 1 - (objectY(o) - yh) * Zp;
+        if (!bearing(o)) return { X: (objectX(o) - 0.5) * STAGE * Zp, Y, Z: Zp, Zp };
+        const b = o.bearing * Math.PI / 180, d = o.distance / EYE;
+        return { X: d * Math.sin(b), Y, Z: d * Math.cos(b), Zp };
+      },
+      // ground planes are drawn right after the sky, under everything standing on them
+      // a horizontal plane (gl.js) is ordered by its far edge, before what stands on it
+      objectZ: o => (o.sky ? Infinity : o.ground ? Z_FAR * 4 : o.plane ? clamp(planeZ(o) + (o.depth || 4) / 2 / EYE, Z_NEAR, Z_FAR) : custom(o) ? customZ(o) : o.kind === 'bird' ? 30 : own(host(o) || o)),
+      objectY,
+      objectSize: o => (o.sky || o.ground ? 1 : custom(o) ? (o.height || 2) / EYE / sightZ(o) : o.size),
+    };
+  }
+  // Screen transform [a b c d e f] for a plane at distance Z (Infinity = the sky): maps the
+  // scene as painted from the starting spot (on the stage) to the frame (W × H) from where the
+  // camera is now.
+  // Walking forward grows a plane by Z/(Z−z) around the vanishing point on the horizon.
+  // A camera raised to cam.h eye heights (1 = standing) sees a plane (h − 1)/D lower: things
+  // stay upright, the ground opens up below — a raised camera with a shifted, not tilted, lens.
+  function view(cam, Z, W, H, yh) {
+    if (!isFinite(Z)) return [1, 0, 0, 1, (W - STAGE * H) / 2, -cam.y * H];
+    const D = Math.max(1e-3, Z - cam.z), s = Z / D;
+    return [s, 0, 0, s, (W - s * STAGE * H) / 2 - H * cam.x / D, yh * H * (1 - s) - cam.y * H + H * ((cam.h ?? 1) - 1) / D];
+  }
+  // Looking around (around, roam): the camera also turns, cam.yaw radians (clockwise, 0 = the
+  // start's straight ahead). A point of the world (X, Y, Z eye heights) is seen at
+  // [x, y, its depth along the gaze], or null behind the eye. With yaw 0 it is what view() does.
+  function project(cam, X, Y, Z, W, H, yh) {
+    const rx = X - cam.x, rz = Z - cam.z, c = Math.cos(cam.yaw || 0), s = Math.sin(cam.yaw || 0);
+    const x = rx * c - rz * s, z = rx * s + rz * c;
+    if (z < 0.05) return null;
+    return [W / 2 + H * x / z, yh * H + H * ((cam.h ?? 1) - Y) / z - cam.y * H, z];
+  }
+  // An element as a card facing the eye: p = { X, Y, Z, Zp } and its anchor as painted (ax, ay):
+  // { m: screen transform of its painting, D: its depth }, or null when behind the eye
+  function billboard(cam, p, ax, ay, W, H, yh) {
+    const q = project(cam, p.X, p.Y, p.Z, W, H, yh);
+    if (!q) return null;
+    const s = p.Zp / q[2];
+    return { m: [s, 0, 0, s, q[0] - s * ax, q[1] - s * ay], D: q[2] };
+  }
+  // Where an element's painting (as depths() places it on the SW-wide stage) goes on the frame from
+  // camera cam: { m: the transform, D: its distance along the gaze }, or null behind the eye
+  function placeOf(o, cam, W, H, dz, round) {
+    if (!round) { const Z = dz.objectZ(o); return { m: view(cam, Z, W, H, dz.yh), D: Z - cam.z }; }
+    return billboard(cam, dz.objectAt(o), dz.objectX(o) * STAGE * H, dz.objectY(o) * H, W, H, dz.yh);
+  }
+  // The hero of a platformer h = { dx, dy (metres from where it is painted), flip } as a transform
+  // of its painting: its anchor painted at x = ax, `ppm` painted px per metre
+  const heroMatrix = (h, ax, ppm) => [h.flip ? -1 : 1, 0, 0, 1, (h.flip ? 2 * ax : 0) + h.dx * ppm, -h.dy * ppm];
+  // The full circle of the sky looking around: painted 2π stage heights wide, straight ahead in
+  // its middle; seen through the frame as a cylinder.
+  const TAU = 2 * Math.PI;
+  // Where you may walk and look (limitCam). Walking forward: as far as the things standing in the
+  // scene (not the far ones laid at Z_FAR — painted mountains, flat up close).
+  // An object painted at stage x, Z away, stands at world x = (x − ½)·STAGE·Z (+ its box centre).
+  const LOOK_UP = -0.3, LOOK_DOWN = 0.2, WALK_BACK = -0.6, TRACK = 40 / EYE, ROOM = 30 / EYE;
+  // The scene's camera (spec.camera) — how the viewer moves through it, one of:
+  //   picture — a still picture: the camera stands, breathes a little and leans toward the
+  //     pointer (or the phone's tilt), so the near things shift against the far ones;
+  //   walk — stand at eye level and walk: forward and back, sideways, look up and down (default);
+  //   panorama — a long place passed along sideways (a park alley, a street, a shore): along it
+  //     as far as `span` [left, right] metres from the start, else as far as the things within
+  //     TRACK of the viewer reach; the wheel comes closer as when walking, and closer you still
+  //     pass along at that depth;
+  //   overhead — raised `height` metres and looking down (`look`, screen heights): a map, a yard,
+  //     a board; moving over it and closer;
+  //   around — stand at one spot and turn your head all around (or within `turn` degrees either
+  //     way) and up and down: things stand all around you (`bearing`);
+  //   roam — walk about a place and look anywhere, as in a room: within `area` [left, right,
+  //     back, front] metres of the start, else among the things standing around;
+  //   platform — a platformer seen from the side: you run and jump as the `hero` element over
+  //     the `solid` ones, the camera riding along (the mount's platform section).
+  // Looking around, elements are cards standing up in the world, facing the eye — or, with
+  // `facing` (degrees: where its face looks), turned their own way, like a wall or a cupboard.
+  // `follow`: elements the camera keeps in view — it slides sideways when one is leaving the
+  // visible part of the screen (not while the viewer moves it themselves).
+  const MODES = ['picture', 'walk', 'panorama', 'overhead', 'around', 'roam', 'platform'];
+  const SWAY = { picture: 0.033 };
+  function camSetup(spec) {
+    const c = spec?.camera || {}, mode = MODES.includes(c.mode) ? c.mode : 'walk';
+    const h = mode === 'overhead' ? clamp((c.height ?? 8) / EYE, 1, 60) : 1;
+    const look = clamp(c.look ?? (mode === 'overhead' ? 0.25 : 0), -0.3, 0.45);
+    const follow = Array.isArray(c.follow) ? c.follow.filter(id => typeof id === 'string') : [];
+    const span = mode === 'panorama' && Array.isArray(c.span) && c.span.length === 2 ? [-Math.abs(c.span[0]) / EYE, Math.abs(c.span[1]) / EYE] : null;
+    const round = mode === 'around' || mode === 'roam';
+    const turn = mode === 'around' && typeof c.turn === 'number' && c.turn > 0 && c.turn < 180 ? c.turn * Math.PI / 180 : null;
+    const area = ['roam', 'walk', 'overhead'].includes(mode) && Array.isArray(c.area) && c.area.length === 4 ? c.area.map(v => Math.abs(v) / EYE) : null;
+    const hero = mode === 'platform' && typeof c.hero === 'string' ? c.hero : null;
+    return { mode, h, look, follow: round || hero ? [] : follow, sway: SWAY[mode] || 0, span, round, turn, area, hero, jump: c.jump };
+  }
+  function limits(spec, W, H) {
+    const { Z, objectZ, objectX } = depths(spec), aspect = W / H;
+    const land = (spec.layers || []).map((L, i) => (LAND.has(L.kind) ? Z[i] : null)).filter(z => z !== null);
+    const things = (spec.objects || []).filter(o => o.kind !== 'bird' && !o.sky && !o.ground && !o.plane).map(o => {
+      const z = objectZ(o), b = Array.isArray(o.box) && o.box.length === 4 ? (o.box[0] + o.box[2]) / 2 / EYE : 0;
+      return { x: (objectX(o) - 0.5) * STAGE * z + b, z };
+    });
+    // what stands in the scene shapes where you may go — not what is laid at Z_FAR
+    const real = things.filter(t => t.z < Z_FAR * 0.99), around = real.length ? real : things;
+    const far = around.length ? Math.max(...around.map(t => t.z)) : Math.max(1, ...land.filter(z => z < Z_FAR * 0.9));
+    const setup = camSetup(spec);
+    // roaming: within the area, else among the things standing within ROOM of the start, a
+    // little inside them
+    let room = null;
+    if (setup.mode === 'roam') {
+      if (setup.area) { const [l, r, b, f] = setup.area; room = [-l, r, -b, f]; }
+      else {
+        const dz = depths(spec), at = (spec.objects || []).filter(o => !o.sky && !o.ground && o.kind !== 'bird').map(o => dz.objectAt(o)).filter(p => Math.hypot(p.X, p.Z) <= ROOM);
+        const xs = [0, ...at.map(p => p.X)], zs = [0, ...at.map(p => p.Z)], k = 1 / EYE;
+        room = [Math.min(0, Math.min(...xs) + k), Math.max(0, Math.max(...xs) - k), Math.min(0, Math.min(...zs) + k), Math.max(0, Math.max(...zs) - k)];
+      }
+    }
+    return { aspect, things: around, zMax: clamp(far - 1.1, 1, 100), setup, room };
+  }
+  function limitCam(cam, lim) {
+    const s = lim.setup;
+    if (s?.round) {
+      cam.y = clamp(cam.y, s.look - 0.6, s.look + 0.6);
+      if (s.turn) cam.yaw = clamp(cam.yaw, -s.turn, s.turn);
+      if (lim.room) { cam.x = clamp(cam.x, lim.room[0], lim.room[1]); cam.z = clamp(cam.z, lim.room[2], lim.room[3]); }
+      else { cam.x = 0; cam.z = 0; }
+      return;
+    }
+    if (s?.sway) { // stays put: only the small sway
+      cam.x = clamp(cam.x, -s.sway, s.sway); cam.z = 0; cam.y = clamp(cam.y, s.look - s.sway / 3, s.look + s.sway / 3);
+      return;
+    }
+    if (s?.mode === 'platform') { // the camera rides along with the hero (the mount), over the level
+      cam.z = 0;
+      cam.y = clamp(cam.y, s.look - 0.8, s.look + 0.15);
+      if (lim.level) cam.x = clamp(cam.x, lim.level[0], lim.level[1]);
+      return;
+    }
+    if (s?.mode === 'panorama') {
+      cam.z = clamp(cam.z, 0, Math.max(lim.zMax, lim.reach ?? -Infinity));
+      cam.y = clamp(cam.y, s.look + LOOK_UP / 2, s.look + LOOK_DOWN / 2);
+      let lo = 0, hi = 0;
+      if (s.span) [lo, hi] = s.span;
+      else {
+        // as far as the nearest things reach: the outermost one may come to the frame's middle
+        const near = lim.things.filter(t => t.z <= TRACK);
+        if (near.length) { lo = Math.min(0, ...near.map(t => t.x)); hi = Math.max(0, ...near.map(t => t.x)); }
+      }
+      cam.x = clamp(cam.x, lo, hi);
+      return;
+    }
+    cam.y = clamp(cam.y, (s?.look ?? 0) + LOOK_UP, (s?.look ?? 0) + LOOK_DOWN);
+    // Where you may stand: what is seen from the back of the bounds — a triangle as wide as the
+    // frame (a camera inside it sees only what lies inside it too, so walking toward anything you
+    // see never leaves it), within the scene's area when it gives one; forward as far as the
+    // things in the scene, or as far as the wheel took you toward one. Walking, the start is the
+    // back: the farthest you can draw back, and no stepping aside there — only coming closer.
+    let zb = s?.mode === 'walk' ? 0 : WALK_BACK, zf = Math.max(lim.zMax, lim.reach ?? -Infinity), lo = -Infinity, hi = Infinity;
+    if (s?.area) { const [l, r, b, f] = s.area; zb = -b; zf = f; lo = -l; hi = r; }
+    cam.z = clamp(cam.z, zb, zf);
+    const hw = Math.max(0, cam.z - zb) * lim.aspect / 2;
+    cam.x = clamp(cam.x, Math.max(lo, -hw), Math.min(hi, hw));
+  }
+  // near things fade out as you walk up to and past them
+  const fadeNear = (Z, cam) => clamp((Z - cam.z - 0.3) / 0.6, 0, 1);
+
+  function place(ctx, S, cam, Z) { ctx.transform(...view(cam, Z, S.W, S.H, S.yh)); }
+
+  // ── scene build + frame ────────────────────────────────────────────────
+  // W × H: the frame; everything is painted on the stage, SW × H
+  function build(spec, W, H) {
+    const u = H / 900, seed = hash(JSON.stringify(spec.layers || []) + (spec.title || '')), rnd = seeded(seed);
+    const SW = STAGE * H, x0 = -EXT * SW, span = (1 + 2 * EXT) * SW;
+    const dz = depths(spec);
+    const starCount = Math.round((spec.stars?.density ?? 0) * span * H / 2500 / (u * u));
+    const stars = Array.from({ length: starCount }, () => ({ x: x0 + rnd() * span, y: -0.45 * H + Math.pow(rnd(), 1.4) * H * 1.15, r: (0.4 + Math.pow(rnd(), 4) * 1.6) * u, p: rnd() * 7, f: 0.4 + rnd() * 2 }));
+    const layers = (spec.layers || []).map((L, i) => {
+      const Z = dz.Z[i];
+      if (L.kind === 'clouds') {
+        const clouds = Array.from({ length: Math.round((3 + (L.density ?? 0.5) * 9) * (1 + 2 * EXT)) }, () => {
+          const cw = SW * (0.12 + rnd() * 0.2), ch = cw * 0.35, c = layer(cw, ch), cg = c.getContext('2d');
+          for (let k = 0; k < 7; k++) glow(cg, cw * (0.2 + rnd() * 0.6), ch * (0.45 + rnd() * 0.25), ch * (0.35 + rnd() * 0.3), rgb(L.color), 0.55);
+          return { c, x: rnd() * span, y: L.y * H + (rnd() - 0.5) * (L.height ?? 0.1) * H, sp: (4 + rnd() * 8) * u };
+        });
+        return { L, Z, clouds };
+      }
+      if (L.kind === 'fog') return { L, Z, blobs: Array.from({ length: 10 }, () => ({ x: rnd() * span, dy: (rnd() - 0.5) * (L.height ?? 0.08) * H, rx: SW * (0.2 + rnd() * 0.25), ry: H * (0.03 + rnd() * 0.04), sp: (5 + rnd() * 10) * u, a: 0.06 + rnd() * 0.06 })) };
+      if (L.kind === 'water') return { L, Z };
+      return { L, Z, ...staticLayer(L, SW, H, seed + i * 101) };
+    }).sort((a, b) => b.Z - a.Z);
+    // looking around, each also stands somewhere in the world (p, depths().objectAt)
+    const round = camSetup(spec).round;
+    const objects = (spec.objects || []).map(o => ({ o: { ...o, x: dz.objectX(o), y: dz.objectY(o), size: dz.objectSize(o), _yh: dz.yh }, Z: dz.objectZ(o), p: round && !o.sky && !o.ground ? dz.objectAt(o) : null })).sort((a, b) => (b.Z - a.Z) || 0);
+    const sky = !spec.sky ? '#000000' : (() => {
+      const c = document.createElement('canvas').getContext('2d');
+      const g = c.createLinearGradient(0, 0, 0, H);
+      g.addColorStop(0, spec.sky.top); g.addColorStop(0.55, spec.sky.middle); g.addColorStop(1, spec.sky.bottom);
+      return g;
+    })();
+    const particles = (spec.particles || []).map(p => ({ p, list: makeParticles(p, W, H, rnd) }));
+    // vignette depends only on the scene, not the frame: paint it once
+    const vignette = layer(W, H), vg = vignette.getContext('2d');
+    const v = vg.createRadialGradient(W / 2, H / 2, Math.min(W, H) * 0.35, W / 2, H / 2, Math.hypot(W, H) * 0.6);
+    v.addColorStop(0, 'rgba(0,0,0,0)');
+    v.addColorStop(1, `rgba(0,0,0,${0.75 * clamp(spec.light?.vignette ?? 0.5, 0, 1)})`);
+    vg.fillStyle = v; vg.fillRect(0, 0, W, H);
+    return { W, H, SW, u, x0, span, yh: dz.yh, round, lim: limits(spec, W, H), sky, stars, layers, particles, objects, vignette, scratch: layer(W, H) };
+  }
+
+  // Looking around, with Canvas 2D (the fallback): the sky turned as a flat band (not bent into a
+  // cylinder), then the cards facing the eye, far to near. Cards turned their own way (`facing`),
+  // like planes, are drawn by the WebGL renderer only.
+  function aroundFrame(ctx, S, cam, t) {
+    const { W, H, SW } = S, full = TAU * H, off = W / 2 - full / 2 - cam.yaw * H;
+    for (const { o } of S.objects) {
+      if (!o.sky) continue;
+      for (let x0 = ((off % full) + full) % full - full; x0 < W; x0 += full) {
+        const lights = [];
+        ctx.save(); ctx.translate(x0, -cam.y * H);
+        drawObject(ctx, o, full, H, t, lights); drawLights(ctx, lights);
+        ctx.restore();
+      }
+    }
+    const seen = [];
+    for (const { o, p } of S.objects) {
+      if (o.sky || o.ground || o.plane || typeof o.facing === 'number') continue;
+      const b = billboard(cam, p, o.x * SW, o.y * H, W, H, S.yh);
+      if (b) seen.push({ o, b });
+    }
+    seen.sort((a, b) => b.b.D - a.b.D);
+    for (const { o, b } of seen) {
+      const fade = clamp((b.D - 0.3) / 0.6, 0, 1), lights = [];
+      if (fade <= 0) continue;
+      ctx.save(); ctx.transform(...b.m); ctx.globalAlpha = fade;
+      drawObject(ctx, o, SW, H, t, lights); drawLights(ctx, lights);
+      ctx.restore();
+    }
+  }
+
+  function drawWater(ctx, S, L, wy, t) {
+    const { W, H, u } = S, depth = H - wy, step = Math.max(3, Math.round(u * 3));
+    if (depth <= 0) return;
+    const k = Math.min(1.2, wy / depth), speed = 1 + Math.abs(L.drift ?? 0) * 2;
+    // copy only the band above the horizon that the reflection actually shows
+    const band = Math.max(0, Math.floor(wy - depth * k - step)), sc = S.scratch.getContext('2d');
+    sc.clearRect(0, band, W, wy - band);
+    sc.drawImage(ctx.canvas, S.out.x, S.out.y + band, W, wy - band, 0, band, W, wy - band);
+    for (let y = wy; y < H; y += step) {
+      const d = (y - wy) / depth;
+      const dx = (Math.sin(30 * Math.log(0.03 + d) - t * 1.4 * speed) * 0.6 + Math.sin(d * 53 + t * 0.8) * 0.4) * (1 + d * 16) * u;
+      ctx.drawImage(S.scratch, 0, Math.max(0, wy - 1 - (y - wy) * k), W, step, dx - 20 * u, y, W + 40 * u, step);
+    }
+    const col = rgb(L.color), gr = ctx.createLinearGradient(0, wy, 0, H);
+    gr.addColorStop(0, `rgba(${col},0.35)`); gr.addColorStop(1, `rgba(${col},0.8)`);
+    ctx.fillStyle = gr; ctx.fillRect(0, wy, W, depth);
+    ctx.fillStyle = 'rgba(255,255,255,0.06)'; ctx.fillRect(0, wy - u, W, 2 * u);
+  }
+
+  const wrapX = (x, S, w) => ((x % (S.span + w)) + S.span + w) % (S.span + w) + S.x0 - w;
+
+  // S.out: where the frame lies in the canvas (pixels); the scene goes on around it as painted
+  function frame(ctx, S, spec, cam, t, dt) {
+    const { W, H, SW, u } = S, out = S.out;
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.fillStyle = '#000000';
+    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    ctx.translate(out.x, out.y);
+    ctx.save(); place(ctx, S, cam, Infinity);
+    ctx.fillStyle = S.sky;
+    ctx.fillRect(S.x0, -H, S.span, 3 * H);
+    if (S.stars.length) {
+      ctx.fillStyle = spec.stars?.color || '#ffffff';
+      for (const s of S.stars) {
+        ctx.globalAlpha = 0.25 + 0.75 * Math.pow(0.5 + 0.5 * Math.sin(t * s.f + s.p), 2);
+        ctx.fillRect(s.x - s.r, s.y - s.r, s.r * 2, s.r * 2);
+      }
+      ctx.globalAlpha = 1;
+    }
+    for (const c of spec.celestials || []) {
+      const cx = c.x * SW, cy = c.y * H, r = c.size * H / 2, col = rgb(c.color);
+      glow(ctx, cx, cy, r * 9, col, 0.35 * (c.glow ?? 0.5));
+      ctx.fillStyle = c.color; ctx.beginPath(); ctx.arc(cx, cy, r, 0, 7); ctx.fill();
+      if (c.kind === 'moon') { ctx.fillStyle = 'rgba(0,0,0,0.07)'; for (const [dx, dy, rr] of [[-0.3, -0.2, 0.25], [0.28, 0.15, 0.17], [-0.05, 0.4, 0.13]]) { ctx.beginPath(); ctx.arc(cx + dx * r, cy + dy * r, rr * r, 0, 7); ctx.fill(); } }
+      if (c.kind === 'planet') { ctx.strokeStyle = `rgba(${col},0.6)`; ctx.lineWidth = r * 0.08; ctx.beginPath(); ctx.ellipse(cx, cy, r * 1.8, r * 0.4, -0.3, 0, 7); ctx.stroke(); }
+    }
+    ctx.restore();
+
+    for (const l of S.round ? [] : S.layers) {
+      const L = l.L;
+      if (l.Z - cam.z < 0.05) continue;
+      if (L.kind === 'water') { const m = view(cam, l.Z, W, H, S.yh); drawWater(ctx, S, L, Math.round(m[5] + m[3] * L.y * H), t); continue; }
+      ctx.save(); place(ctx, S, cam, l.Z);
+      if (l.canvas) {
+        ctx.drawImage(l.canvas, l.x0, 0);
+        ctx.fillStyle = L.color; ctx.fillRect(l.x0, l.canvas.height - 1, l.canvas.width, 50 * H); // the body goes on below
+        if (l.windows?.length) {
+          const lc = rgb('#ffd08a');
+          for (const w of l.windows) {
+            if (Math.sin(t * 0.07 + w.p) > -0.85) { ctx.fillStyle = `rgba(${lc},${0.55 + 0.25 * Math.sin(w.p)})`; ctx.fillRect(w.x, w.y, w.w, w.h); }
+          }
+        }
+      } else if (L.kind === 'clouds') {
+        for (const c of l.clouds) ctx.drawImage(c.c, wrapX(c.x + t * c.sp * (L.drift ?? 0.3) * 3, S, c.c.width), c.y - c.c.height / 2);
+      } else if (L.kind === 'fog') {
+        const col = rgb(L.color);
+        for (const b of l.blobs) {
+          ctx.save(); ctx.translate(wrapX(b.x + t * b.sp * (L.drift ?? 0.3) * 2, S, 2 * b.rx) + b.rx, L.y * H + b.dy);
+          ctx.scale(1, b.ry / b.rx); glow(ctx, 0, 0, b.rx, col, b.a * 2.2); ctx.restore();
+        }
+      }
+      ctx.restore();
+    }
+
+    if (S.round) aroundFrame(ctx, S, cam, t);
+    else for (const { o, Z } of S.objects) {
+      if (o.plane) continue; // horizontal planes are drawn by the WebGL renderer only
+      const lights = [], fade = fadeNear(Z, cam);
+      if (fade <= 0) continue;
+      ctx.save(); place(ctx, S, cam, Z); ctx.globalAlpha = fade;
+      if (cam.hero && o.id === cam.hero.id) ctx.transform(...heroMatrix(cam.hero, o.x * SW, o.size * H / (o.height || 2)));
+      drawObject(ctx, o, SW, H, t, lights);
+      drawLights(ctx, lights);
+      ctx.restore();
+    }
+
+    for (const { p, list } of S.particles) stepParticles(ctx, p, list, W, H, t, dt, u);
+    const lt = spec.light || {};
+    if (lt.tint && lt.tintStrength) {
+      ctx.save(); ctx.globalAlpha = clamp(lt.tintStrength, 0, 0.5) * 0.45;
+      ctx.fillStyle = lt.tint; ctx.fillRect(0, 0, W, H); ctx.restore();
+    }
+    ctx.drawImage(S.vignette, 0, 0);
+    if ((lt.grain ?? 0.5) > 0) {
+      ctx.save(); ctx.globalAlpha = clamp(lt.grain ?? 0.5, 0, 1);
+      ctx.translate(Math.random() * 160, Math.random() * 160); ctx.fillStyle = S.grain; ctx.fillRect(-160, -160, W + 320, H + 320); ctx.restore();
+    }
+    // out of the frame the scene dims toward the canvas's edges (with Canvas 2D, what nothing
+    // paints stays black, and water, particles and grain keep to the frame)
+    for (const [x0, y0, x1, y1, rx, ry, rw, rh] of [[0, 0, -H / 2, 0, -out.x, -out.y, out.x, out.ch], [W, 0, W + H / 2, 0, W, -out.y, out.cw - out.x - W, out.ch],
+      [0, 0, 0, -H / 2, -out.x, -out.y, out.cw, out.y], [0, H, 0, H * 1.5, -out.x, H, out.cw, out.ch - out.y - H]]) {
+      if (rw <= 0 || rh <= 0) continue;
+      const g = ctx.createLinearGradient(x0, y0, x1, y1);
+      g.addColorStop(0, 'rgba(0,0,0,0)'); g.addColorStop(1, 'rgba(0,0,0,0.45)');
+      ctx.fillStyle = g; ctx.fillRect(rx, ry, rw, rh);
+    }
+  }
+
+  // Mounts the engine on a canvas: returns { show(spec), resetCamera() }.
+  // Camera: drag = step sideways / turn the head up-down, wheel / pinch = walk toward the cursor,
+  // keys: A D ← → = sideways, W S ↑ ↓ = forward-back, 0 = back to the start.
+  // The 2D renderer: everything re-drawn with Canvas 2D every frame. Fallback for
+  // browsers without WebGL2; the WebGL renderer (gl.js) is much lighter on the GPU.
+  function canvas2DRenderer(canvas) {
+    // opaque canvas: the scene paints every pixel, so the browser needn't blend it with the page
+    const ctx = canvas.getContext('2d', { alpha: false });
+    const grain = ctx.createPattern(grainTile, 'repeat');
+    return {
+      name: '2d', fpsIdle: 20, pixelBudget: 1.3e6, resMax: 1.5,
+      build(spec, W, H, prev, out) { const S = build(spec, W, H); S.grain = grain; S.out = out; return S; },
+      frame(S, spec, cam, t, dt) { frame(ctx, S, spec, cam, t, dt); },
+    };
+  }
+
+  function mount(canvas) {
+    // a canvas gets one context type for life: WebGL2 when available, else 2D
+    // (?2d in the URL forces the 2D renderer, for comparison)
+    const R = (typeof MooodGL !== 'undefined' && !/[?&]2d\b/.test(location.search) && MooodGL.create(canvas)) || canvas2DRenderer(canvas);
+    // t: seconds since the stage was made, by the real clock — what the painting code sees (e.t),
+    // in step with the state's moves; dt: the step of the camera's motion (capped, so a long frame
+    // doesn't throw it)
+    const born = performance.now();
+    let spec = null, S = null, t = 0, last = born, pending;
+    const cam = { x: 0, y: 0, z: 0, h: 1, yaw: 0 }, target = { x: 0, y: 0, z: 0, h: 1, yaw: 0 };
+    let seen = [0, 1], lim = { aspect: STAGE, zMax: 1, things: [], view: [0, 1] };
+    // the frame within the canvas (CSS px): landscape, centred, bars around it
+    let box = { x: 0, y: 0, w: 1, h: 1 };
+    const frameBox = () => {
+      const cw = Math.max(1, canvas.clientWidth), ch = Math.max(1, canvas.clientHeight), a = clamp(cw / ch, NARROWEST, WIDEST);
+      const w = Math.min(cw, ch * a), h = w / a;
+      return { x: (cw - w) / 2, y: (ch - h) / 2, w, h };
+    };
+    // a point of the page (clientX, clientY) in the frame's CSS px — the canvas may be scaled
+    const local = (cx, cy) => {
+      const r = canvas.getBoundingClientRect(), k = r.width / Math.max(1, canvas.clientWidth) || 1;
+      return [(cx - r.left) / k - box.x, (cy - r.top) / k - box.y];
+    };
+    // the part of the frame the page's panels leave open, as fractions of its width
+    const openView = () => [0, 1].map(i => clamp((seen[i] * canvas.clientWidth - box.x) / box.w, 0, 1));
+    const keys = new Set(), pointers = new Map();
+    let pinch = null;
+
+    // GPU budget. A calm scene doesn't need the display's refresh rate (120–165 Hz on
+    // many laptops): render fpsIdle while idle, 60 while the camera moves. The canvas is
+    // capped at the renderer's pixel budget whatever the monitor, and stretched by the
+    // browser — invisible in this soft, hazy style.
+    const FPS_ACTIVE = 60, PIXEL_BUDGET = R.pixelBudget, RES_MIN = 0.6;
+    let fpsIdle = R.fpsIdle;
+    const resCap = () => Math.min(window.devicePixelRatio || 1, R.resMax, Math.sqrt(PIXEL_BUDGET / Math.max(1, canvas.clientWidth * canvas.clientHeight)));
+    let res = resCap(), frameEma = 1 / fpsIdle, checkAt = performance.now() + 3000, lastDowngrade = 0, activeUntil = 0;
+    let waiting = null; // a spec to show once its modules are here
+    const rebuild = () => {
+      box = frameBox();
+      res = Math.min(res, resCap());
+      canvas.width = Math.round(canvas.clientWidth * res);
+      canvas.height = Math.round(canvas.clientHeight * res);
+      if (spec) {
+        S = R.build(spec, Math.round(box.w * res), Math.round(box.h * res), S, { x: Math.round(box.x * res), y: Math.round(box.y * res), cw: canvas.width, ch: canvas.height });
+        const was = lim.setup;
+        lim = { ...S.lim, view: openView(), level: plat?.level };
+        // a new camera setup: go to its starting spot at once
+        if (!was || was.mode !== lim.setup.mode || was.h !== lim.setup.h || was.look !== lim.setup.look) { reset(); Object.assign(cam, target); }
+        limitCam(target, lim);
+      }
+    };
+    // If the machine can't hold the frame rate: first a calmer idle rate, then fewer pixels.
+    const adapt = (now, target) => {
+      if (now < checkAt || !S) return;
+      checkAt = now + 2000;
+      if (frameEma > 1.4 / target && target === fpsIdle && fpsIdle > 30) {
+        fpsIdle = 30;
+        lastDowngrade = now;
+      } else if (frameEma > 1.4 / target && res > RES_MIN) {
+        res = Math.max(RES_MIN, res * 0.8);
+        lastDowngrade = now;
+        rebuild();
+      } else if (frameEma < 1.05 / target && res < resCap() && now - lastDowngrade > 15000) {
+        res = Math.min(resCap(), res * 1.15);
+        rebuild();
+      }
+    };
+    const perf = document.createElement('div');
+    perf.style.cssText = 'position:fixed;left:8px;top:8px;z-index:9;font:12px/1.4 ui-monospace,Consolas,monospace;color:#cfe;background:rgba(0,0,0,.6);padding:4px 8px;border-radius:6px;pointer-events:none;display:none;white-space:pre';
+    document.body.append(perf);
+    let frames = 0, perfAt = performance.now(), drawMs = 0;
+    addEventListener('resize', () => { clearTimeout(pending); pending = setTimeout(rebuild, 150); });
+
+    // Wheel / pinch: walk along the ray through the cursor toward what is seen under it — the
+    // first thing truly painted at that point (not a veil of leaves, not a transparent edge), else
+    // the ground there, else (the sky) a few steps ahead. It is chosen when the gesture starts or
+    // the pointer moves, and kept till the gesture ends; it stays under the cursor all the way —
+    // the gaze lifting or lowering with it — and the walk stops where it about fills the frame
+    // (something high up: where it still shows with the gaze lifted as far as it goes).
+    let aim = null, aimAt = 0;
+    // is the element truly painted at the cursor: nearly opaque paint on a tenth of the 9×9
+    // pixels around it (the thin spokes of a wheel count; a veil, a glow, empty air don't)?
+    const probe = layer(9, 9), pg = probe.getContext('2d', { willReadFrequently: true });
+    const seenAt = (o, m, cx, cy, Hc) => {
+      pg.setTransform(1, 0, 0, 1, 0, 0);
+      pg.clearRect(0, 0, 9, 9);
+      pg.setTransform(m[0], 0, 0, m[3], m[4] - cx + 4.5, m[5] - cy + 4.5);
+      try { drawObject(pg, o, STAGE * Hc, Hc, t, []); } catch { return false; }
+      const d = pg.getImageData(0, 0, 9, 9).data;
+      let n = 0;
+      for (let i = 3; i < d.length; i += 4) if (d[i] > 160) n++;
+      return n >= 8;
+    };
+    const pick = (clientX, clientY) => {
+      const [cx, cy] = local(clientX, clientY), Hc = box.h, Wc = box.w, yh = S?.yh ?? 0.6, dz = spec ? depths(spec) : null;
+      const at = D => ({ Z: target.z + D, x: target.x + (cx - Wc / 2) / Hc * D });
+      const near = (spec?.objects || []).filter(o => o.kind !== 'bird' && !o.sky && !o.ground && !o.plane).map(o => ({ o: { ...o, x: dz.objectX(o), y: dz.objectY(o), size: dz.objectSize(o), _yh: yh }, Z: dz.objectZ(o) }))
+        .filter(({ Z }) => fadeNear(Z, target) > 0).sort((a, b) => a.Z - b.Z);
+      for (const { o, Z } of near) {
+        const m = view(target, Z, Wc, Hc, yh), b = objectBox(o, STAGE * Hc, Hc);
+        const x0 = m[0] * b.bx + m[4], y0 = m[3] * b.by + m[5];
+        if (cx < x0 || cx > x0 + m[0] * b.bw || cy < y0 || cy > y0 + m[3] * b.bh) continue;
+        if (!seenAt(o, m, cx, cy, Hc)) continue;
+        // the point under the cursor, Y eye heights up; stop where the thing about fills the
+        // frame, or — high up — where the point still shows with the gaze lifted as far as it goes
+        const D = Z - target.z, Y = target.h - (cy / Hc - yh + target.y) * D, up = (lim.setup?.look ?? 0) + LOOK_UP;
+        const sight = Y > target.h ? (Y - target.h) / Math.max(0.05, yh - cy / Hc - up) : 0;
+        return { ...at(D), Y, cy: cy / Hc, stop: Math.max(1.1, 1.15 * o.size * Z, sight) };
+      }
+      const below = cy - (yh - target.y) * Hc;
+      return { ...at(below > 0.02 * Hc ? clamp(Hc * target.h / below, 0.8, 100) : 6), stop: 1.2 };
+    };
+    const walkToward = (factor, clientX, clientY) => {
+      const now = performance.now();
+      if (!aim || now - aimAt > 400 || Math.hypot(clientX - aim.px, clientY - aim.py) > 6) aim = { ...pick(clientX, clientY), px: clientX, py: clientY };
+      aimAt = now;
+      const d0 = aim.Z - target.z;
+      if (d0 <= 0.05) return;
+      // each notch covers a share of the way left (the approach slows by itself), up to the stop
+      const d = factor > 1 ? Math.max(Math.min(d0, aim.stop), d0 / factor) : d0 / factor;
+      target.z = aim.Z - d;
+      target.x = aim.x - (aim.x - target.x) * d / d0;
+      if (aim.Y !== undefined) target.y = (S?.yh ?? 0.6) - aim.cy + (target.h - aim.Y) / Math.max(0.05, d);
+      // what you walked up to may lie past where walking goes: you may stand there
+      lim.reach = target.z > lim.zMax ? Math.max(lim.reach ?? 0, target.z) : undefined;
+      limitCam(target, lim);
+    };
+
+    // Drag: sideways = step, keeping what you took hold of (an object, else that spot of
+    // ground) under the finger — a step of dx·D/H for its distance D, so near grass moves you
+    // a little and a far house carries you along. Up / down = turn your head: the gaze tilts
+    // and the grabbed point follows the finger. Walking is the wheel, pinch or keys.
+    // Let go while moving and the camera glides on a little.
+    let grab = null, glide = null, lastMove = 0;
+    const grabAt = (clientX, clientY) => {
+      // looking around, a drag turns the head: what you took hold of follows the finger
+      if (round()) { const [cx, cy] = local(clientX, clientY); grab = { round: true, cx, cy, yaw: target.yaw, look: target.y }; return; }
+      const [cx, cy] = local(clientX, clientY), D = clamp(pick(clientX, clientY).Z - target.z, 0.4, 60);
+      grab = { x: target.x + (cx - box.w / 2) / box.h * D, D, cy, look: target.y };
+    };
+    const dragTo = (clientX, clientY) => {
+      const [cx, cy] = local(clientX, clientY), x0 = target.x, y0 = target.y, now = performance.now();
+      if (grab.round) {
+        const yaw0 = target.yaw;
+        target.yaw = grab.yaw - (Math.atan((cx - box.w / 2) / box.h) - Math.atan((grab.cx - box.w / 2) / box.h));
+        target.y = grab.look - (cy - grab.cy) / box.h;
+        limitCam(target, lim);
+        const dt = Math.max(8, now - lastMove) / 1000, k = Math.min(1, dt * 20);
+        glide = glide || { vx: 0, vy: 0, vyaw: 0 };
+        glide.vyaw += ((target.yaw - yaw0) / dt - glide.vyaw) * k;
+        lastMove = now;
+        return;
+      }
+      target.x = grab.x - (cx - box.w / 2) / box.h * grab.D;
+      target.y = grab.look - (cy - grab.cy) / box.h;
+      limitCam(target, lim);
+      const dt = Math.max(8, now - lastMove) / 1000, k = Math.min(1, dt * 20);
+      glide = glide || { vx: 0, vy: 0, vyaw: 0 };
+      glide.vx += ((target.x - x0) / dt - glide.vx) * k;
+      glide.vy += ((target.y - y0) / dt - glide.vy) * k;
+      lastMove = now;
+    };
+    // where in the canvas (CSS px) an element is from camera c — the point its code marks (e.at),
+    // else its anchor (its top, with over) — lifted by `lift` metres: [x, y, its distance]; null
+    // when out of sight
+    function seenFrom(c, id, lift = 0, over = false) {
+      const o = (spec?.objects || []).find(o => o.id === id);
+      if (!o || o.sky) return null;
+      const W = box.w, H = box.h, dz = depths(spec), yh = dz.yh;
+      if (round()) {
+        // looking around: its anchor (or the point its code marks) seen from where you stand
+        const p = dz.objectAt(o);
+        if (o.plane || !FOCUS.has(id)) {
+          const q = project(c, p.X, p.Y + (lift + (over && !o.plane ? o.height ?? EYE : 0)) / EYE, p.Z, W, H, yh);
+          return q && q[2] > 0.3 ? [box.x + q[0], box.y + q[1], q[2]] : null;
+        }
+        const b = billboard(c, p, dz.objectX(o) * STAGE * H, dz.objectY(o) * H, W, H, yh), f = FOCUS.get(id);
+        if (!b || b.D < 0.3) return null;
+        return [box.x + b.m[0] * f.x * STAGE * H + b.m[4], box.y + b.m[3] * (f.y * H - (lift / EYE) * H / p.Zp) + b.m[5], b.D];
+      }
+      const Z = o.plane ? (o.distance > 0 ? o.distance : 10) / EYE : dz.objectZ(o);
+      if (Z - c.z < 0.3 || fadeNear(Z, c) < 0.3) return null;
+      const f = FOCUS.get(id) || { x: dz.objectX(o), y: o.plane ? yh + (1 - (o.elevation || 0) / EYE) / Z : dz.objectY(o) };
+      if (over && !FOCUS.has(id)) lift += o.height ?? EYE;
+      const m = view(c, Z, W, H, yh);
+      let px = f.x * STAGE * H, py = f.y * H - (lift / EYE) * H / Z;
+      if (c.hero && id === c.hero.id) { const hm = heroMatrix(c.hero, dz.objectX(o) * STAGE * H, dz.objectSize(o) * H / (o.height || 2)); px = hm[0] * px + hm[4]; py += hm[5]; }
+      return [box.x + m[0] * px + m[4], box.y + m[3] * py + m[5], Z - c.z];
+    }
+    // the camera keeps the elements it follows in the visible part of the screen: together when
+    // they fit, else the first of them
+    function keepInView() {
+      const ids = lim.setup?.follow;
+      if (!ids?.length || pointers.size || keys.size || glide) return;
+      const [vl, vr] = lim.view, L = box.x + (vl + 0.1) * box.w, R = box.x + (vr - 0.1) * box.w;
+      const pts = ids.map(id => seenFrom(target, id)).filter(Boolean);
+      if (!pts.length) return;
+      const lo = Math.min(...pts.map(p => p[0])), hi = Math.max(...pts.map(p => p[0]));
+      if (lo >= L && hi <= R) return;
+      const aim = hi - lo <= R - L ? (lo + hi) / 2 : pts[0][0];
+      target.x += (aim - (L + R) / 2) * pts[0][2] / box.h;
+    }
+    const reset = () => { Object.assign(target, { x: 0, y: lim.setup?.look ?? 0, z: 0, h: lim.setup?.h ?? 1, yaw: 0 }); };
+    const round = () => !!lim.setup?.round, roam = () => lim.setup?.mode === 'roam';
+    const platform = () => lim.setup?.mode === 'platform';
+    // ── a platformer ─────────────────────────────────────────────────────
+    // The hero (camera.hero) runs and jumps in its plane, seen from the side: x metres across, y
+    // metres up. Solid elements (solid: true) are boxes it stands on and bumps into — across their
+    // box, from their elevation up their height. Gravity G, running RUN, a jump camera.jump metres
+    // high (default 2.2). Fallen FALL metres below the lowest place to stand, it is back at the start.
+    // The camera rides along.
+    // Keys: ← → A D run, space W ↑ jump; touch: hold the left or right third to run, the middle to jump.
+    const G = 22, RUN = 5.5, FALL = 5;
+    let plat = null;
+    function platformOf(spec) {
+      const s = camSetup(spec), o = s.hero && (spec.objects || []).find(o => o.id === s.hero);
+      if (!o) return null;
+      const dz = depths(spec), p = dz.objectAt(o);
+      const solids = (spec.objects || []).filter(e => e.solid && e !== o).map(e => {
+        const q = dz.objectAt(e), h = e.height || 2, b = Array.isArray(e.box) && e.box.length === 4 ? e.box : [-0.8 * h, 0, 0.8 * h, 0];
+        const x = q.X * EYE, y = e.elevation || 0;
+        return { x0: x + b[0], x1: x + b[2], y0: y, y1: y + h };
+      });
+      const x = p.X * EYE, y = o.elevation || 0;
+      return {
+        id: o.id, Zp: p.Zp, x0: x, y0: y, x, y, floor: y, vx: 0, vy: 0, ground: false, air: 0, jumped: false, dir: 1,
+        w: o.width || 0.6, h: o.height || 1.7, solids, jumpV: Math.sqrt(2 * G * clamp(s.jump ?? 2.2, 0.5, 8)),
+        level: [Math.min(x, ...solids.map(r => r.x0)) / EYE, Math.max(x, ...solids.map(r => r.x1)) / EYE],
+        bottom: Math.min(y, ...solids.map(r => r.y1)), // the lowest place to stand
+      };
+    }
+    // what the viewer asks for now: { left, right, jump }
+    function controls() {
+      const c = { left: keys.has('ArrowLeft') || keys.has('a'), right: keys.has('ArrowRight') || keys.has('d'), jump: keys.has(' ') || keys.has('w') || keys.has('ArrowUp') };
+      for (const p of pointers.values()) {
+        const f = local(p.x, p.y)[0] / box.w;
+        if (f < 1 / 3) c.left = true; else if (f > 2 / 3) c.right = true; else c.jump = true;
+      }
+      return c;
+    }
+    function stepHero(P, dt) {
+      const c = controls(), want = (c.right ? 1 : 0) - (c.left ? 1 : 0), hw = P.w / 2;
+      P.vx += (want * RUN - P.vx) * Math.min(1, dt * (P.ground ? 14 : 5));
+      if (want) P.dir = want;
+      P.air = P.ground ? 0 : P.air + dt;
+      // one jump a press; a moment after running off an edge still counts
+      if (c.jump && !P.jumped && P.air < 0.1) { P.vy = P.jumpV; P.jumped = true; P.air = 1; }
+      if (!c.jump) P.jumped = false;
+      P.vy = Math.max(P.vy - G * dt, -30);
+      // across, then up: out of whatever solid it moved into
+      P.x += P.vx * dt;
+      for (const r of P.solids) {
+        if (P.y >= r.y1 - 0.01 || P.y + P.h <= r.y0 + 0.01 || P.x + hw <= r.x0 || P.x - hw >= r.x1) continue;
+        if (P.vx > 0) P.x = r.x0 - hw; else if (P.vx < 0) P.x = r.x1 + hw;
+        P.vx = 0;
+      }
+      const y0 = P.y;
+      P.y += P.vy * dt; P.ground = false;
+      for (const r of P.solids) {
+        if (P.x + hw <= r.x0 || P.x - hw >= r.x1) continue;
+        if (P.vy <= 0 && y0 >= r.y1 - 0.01 && P.y < r.y1) { P.y = r.y1; P.vy = 0; P.ground = true; }
+        else if (P.vy > 0 && y0 + P.h <= r.y0 + 0.01 && P.y + P.h > r.y0) { P.y = r.y0 - P.h; P.vy = 0; }
+      }
+      if (P.y < P.bottom - FALL) Object.assign(P, { x: P.x0, y: P.y0, floor: P.y0, vx: 0, vy: 0 });
+      if (P.ground) P.floor = P.y;
+      Object.assign(HERO, { id: P.id, vx: P.vx, vy: P.vy, ground: P.ground });
+      // the camera: the hero a little behind the middle, the way it runs; up and down with what it
+      // stands on, not with every jump
+      target.x = (P.x + P.dir * 1.2) / EYE;
+      target.y = lim.setup.look - 0.8 * (P.floor - P.y0) / EYE / P.Zp;
+      limitCam(target, lim);
+    }
+    // roaming: a step of `d` eye heights toward `ang` (radians, as yaw)
+    const stepTo = (ang, d) => { target.x += Math.sin(ang) * d; target.z += Math.cos(ang) * d; limitCam(target, lim); };
+    // a picture: the camera stands and only leans (lean: −1…1 each way, toward the
+    // pointer or with the phone's tilt) and breathes
+    const fixed = () => lim.setup?.sway > 0, panorama = () => lim.setup?.mode === 'panorama';
+    const lean = { x: 0, y: 0 };
+    // Moving through the scene, the view still leans a little toward the pointer (or with the
+    // phone's tilt): near things shift against far ones, the depth is felt standing still too.
+    // `shown` is the camera as drawn: where you are, plus the lean (eased, LEAN eye heights).
+    const LEAN = 0.047, leaned = { x: 0, y: 0 }, shown = { ...cam };
+    // A film moves the camera from its script, through the state: camera_x (metres to the right),
+    // camera_h (metres up), camera_z (metres ahead — a dolly in, with all the depth it has),
+    // camera_look (screen heights the gaze is lowered); added to wherever the viewer has it.
+    const num = k => (typeof STATE.values[k] === 'number' ? STATE.values[k] : 0);
+    function directed(c) {
+      c.x += num('camera_x') / EYE; c.h = (c.h ?? 1) + num('camera_h') / EYE; c.z += num('camera_z') / EYE; c.y += num('camera_look');
+    }
+    function leanShown(dt) {
+      const k = 1 - Math.exp(-dt * 3), s = lim.setup;
+      leaned.x += ((s?.sway ? 0 : lean.x) - leaned.x) * k; leaned.y += ((s?.sway ? 0 : lean.y) - leaned.y) * k;
+      Object.assign(shown, cam);
+      const dx = leaned.x * LEAN, dy = leaned.y * LEAN / 3;
+      if (s?.round) { shown.x += dx * Math.cos(cam.yaw); shown.z -= dx * Math.sin(cam.yaw); }
+      else shown.x += dx;
+      shown.y += dy;
+    }
+    function leanTo(t) {
+      const s = lim.setup, b = 0.25;
+      target.x = (lean.x + b * Math.sin(t * 0.31)) * s.sway / (1 + b);
+      target.y = s.look + (lean.y + b * Math.sin(t * 0.19 + 1)) * s.sway / 3 / (1 + b);
+    }
+
+    canvas.style.touchAction = 'none';
+    canvas.addEventListener('pointerdown', e => {
+      canvas.setPointerCapture(e.pointerId);
+      pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+      glide = null; lastMove = performance.now();
+      if (pointers.size === 1 && !fixed() && !platform()) grabAt(e.clientX, e.clientY);
+      askTilt();
+      if (pointers.size === 2) {
+        const [a, b] = [...pointers.values()];
+        pinch = { dist: Math.hypot(a.x - b.x, a.y - b.y) };
+      }
+    });
+    canvas.addEventListener('pointermove', e => {
+      const prev = pointers.get(e.pointerId);
+      if (!prev) return;
+      if (fixed()) return;
+      const now = { x: e.clientX, y: e.clientY };
+      pointers.set(e.pointerId, now);
+      if (platform()) return; // fingers held are the controls (controls())
+      if (pointers.size === 1) {
+        if (grab) dragTo(now.x, now.y);
+      } else if (pointers.size === 2 && pinch) {
+        const [a, b] = [...pointers.values()];
+        const dist = Math.hypot(a.x - b.x, a.y - b.y);
+        if (roam()) stepTo(target.yaw, Math.log(dist / pinch.dist) * 3);
+        else if (!round()) walkToward(dist / pinch.dist, (a.x + b.x) / 2, (a.y + b.y) / 2);
+        pinch.dist = dist;
+      }
+    });
+    const up = e => {
+      pointers.delete(e.pointerId);
+      if (pointers.size < 2) pinch = null;
+      grab = null; // a finger lifted from a pinch doesn't turn the other into a grab
+      // glide only if the finger was still moving when it let go
+      if (glide && (pointers.size > 0 || performance.now() - lastMove > 80)) glide = null;
+    };
+    canvas.addEventListener('pointerup', up);
+    canvas.addEventListener('pointercancel', up);
+    canvas.addEventListener('wheel', e => {
+      e.preventDefault(); glide = null;
+      if (fixed() || platform()) return;
+      // roaming: the wheel walks toward where the pointer is; standing and looking around, nowhere
+      if (round()) {
+        if (roam()) { const [cx] = local(e.clientX, e.clientY); stepTo(target.yaw + Math.atan((cx - box.w / 2) / box.h), -e.deltaY * 0.004); }
+        return;
+      }
+      // a panorama: a sideways swipe (a touchpad's) carries you along
+      if (panorama() && Math.abs(e.deltaX) > Math.abs(e.deltaY)) { target.x += e.deltaX * 0.006; limitCam(target, lim); return; }
+      walkToward(Math.exp(-e.deltaY * 0.0015), e.clientX, e.clientY);
+    }, { passive: false });
+    // the view leans toward wherever the pointer is
+    addEventListener('pointermove', e => {
+      if (e.pointerType !== 'mouse') return;
+      lean.x = clamp(2 * e.clientX / Math.max(1, innerWidth) - 1, -1, 1);
+      lean.y = clamp(2 * e.clientY / Math.max(1, innerHeight) - 1, -1, 1);
+    });
+    // ... or with the phone's tilt, from how it is held (the rest position follows it slowly)
+    let rest = null;
+    addEventListener('deviceorientation', e => {
+      if (e.beta == null || e.gamma == null) return;
+      const a = screen.orientation?.angle ?? 0;
+      // across and down the screen as held: in landscape the phone's axes are turned
+      const [h, v] = a === 90 ? [e.beta, -e.gamma] : a === 270 ? [-e.beta, e.gamma] : [e.gamma, e.beta];
+      rest = rest ? { h: rest.h + (h - rest.h) * 0.01, v: rest.v + (v - rest.v) * 0.01 } : { h, v };
+      lean.x = clamp((h - rest.h) / 15, -1, 1);
+      lean.y = clamp((v - rest.v) / 15, -1, 1);
+    });
+    // iOS lets a page read the tilt only once asked, on a touch
+    let asked = false;
+    function askTilt() {
+      if (asked || typeof window.DeviceOrientationEvent?.requestPermission !== 'function') return;
+      asked = true;
+      DeviceOrientationEvent.requestPermission().catch(() => {});
+    }
+
+    const typing = () => ['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement?.tagName);
+    const KEYS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'a', 'd', 'w', 's', ' '];
+    addEventListener('keydown', e => {
+      if (typing() || e.ctrlKey || e.metaKey || e.altKey) return;
+      const k = e.key.length === 1 ? e.key.toLowerCase() : e.key;
+      if (k === '0') { reset(); return; }
+      if (k === 'p') { perf.style.display = perf.style.display === 'none' ? 'block' : 'none'; return; }
+      if (KEYS.includes(k) && !fixed()) { keys.add(k); e.preventDefault(); }
+    });
+    addEventListener('keyup', e => keys.delete(e.key.length === 1 ? e.key.toLowerCase() : e.key));
+    addEventListener('blur', () => keys.clear());
+
+    const loop = now => {
+      requestAnimationFrame(loop);
+      const moving = keys.size > 0 || pointers.size > 0 || !!glide || (plat && (Math.abs(plat.vx) > 0.01 || !plat.ground)) || Math.abs(target.x - cam.x) + Math.abs(target.y - cam.y) + Math.abs(target.z - cam.z) + Math.abs(target.h - cam.h) + Math.abs(target.yaw - cam.yaw) > 0.001;
+      if (moving) activeUntil = now + 500;
+      const fps = now < activeUntil ? FPS_ACTIVE : fpsIdle;
+      const real = (now - last) / 1000;
+      // skip this display refresh; the tolerance is under half a refresh so vsync jitter
+      // never drops a frame we meant to draw (that made 30 fps stutter at ~27)
+      if (real < 1 / fps - 0.006) return;
+      const dt = Math.min(0.05, real);
+      last = now; t = Math.max(t, (performance.now() - born) / 1000);
+      STATE.sample?.(); // the state's moves where they are this very moment
+      if (real < 0.5) frameEma += (real - frameEma) * 0.1; // ignore tab-switch gaps
+      adapt(now, fps);
+      // a brisk walk: ~6 m/s forward, ~3.5 m/s sideways (world units are eye heights)
+      const step = dt * 2;
+      if (plat) stepHero(plat, dt);
+      else if (round()) {
+        // looking around: arrows left and right turn; roaming, W S walk where you look and A D
+        // step aside; standing, W S and the arrows up and down look up and down, A D turn too
+        const turn = dt * 1.4;
+        if (keys.has('ArrowLeft')) target.yaw -= turn;
+        if (keys.has('ArrowRight')) target.yaw += turn;
+        if (roam()) {
+          if (keys.has('w') || keys.has('ArrowUp')) stepTo(target.yaw, step * 1.5);
+          if (keys.has('s') || keys.has('ArrowDown')) stepTo(target.yaw, -step * 1.5);
+          if (keys.has('a')) stepTo(target.yaw - Math.PI / 2, step);
+          if (keys.has('d')) stepTo(target.yaw + Math.PI / 2, step);
+        } else {
+          if (keys.has('a')) target.yaw -= turn;
+          if (keys.has('d')) target.yaw += turn;
+          if (keys.has('w') || keys.has('ArrowUp')) target.y -= dt * 0.6;
+          if (keys.has('s') || keys.has('ArrowDown')) target.y += dt * 0.6;
+        }
+      } else {
+        if (keys.has('ArrowLeft') || keys.has('a')) target.x -= step;
+        if (keys.has('ArrowRight') || keys.has('d')) target.x += step;
+        if (keys.has('ArrowUp') || keys.has('w')) target.z += step * 1.8;
+        if (keys.has('ArrowDown') || keys.has('s')) target.z -= step * 1.8;
+      }
+      if (fixed()) leanTo(t);
+      keepInView();
+      limitCam(target, lim);
+      if (glide && pointers.size === 0) {
+        target.x += glide.vx * dt; target.y += glide.vy * dt; target.yaw += glide.vyaw * dt;
+        limitCam(target, lim);
+        const f = Math.exp(-dt * 4);
+        glide.vx *= f; glide.vy *= f; glide.vyaw *= f;
+        if (Math.abs(glide.vx) + Math.abs(glide.vy) + Math.abs(glide.vyaw) < 0.005) glide = null;
+      }
+      // the camera eases toward the target: quickly under the finger (a light trail, ~55 ms),
+      // more softly for the wheel and keys (~170 ms); frame-rate independent
+      const k = 1 - Math.exp(-dt * (pointers.size === 1 || glide ? 18 : 6));
+      cam.x += (target.x - cam.x) * k; cam.y += (target.y - cam.y) * k; cam.z += (target.z - cam.z) * k; cam.h += (target.h - cam.h) * k; cam.yaw += (target.yaw - cam.yaw) * k;
+      cam.hero = plat && { id: plat.id, dx: plat.x - plat.x0, dy: plat.y - plat.y0, flip: plat.dir < 0 };
+      leanShown(dt);
+      directed(shown);
+      const t0 = performance.now();
+      if (S) R.frame(S, spec, shown, t, dt, now >= activeUntil, target);
+      drawMs += performance.now() - t0;
+      frames++;
+      if (now - perfAt > 1000 && perf.style.display !== 'none') {
+        perf.textContent = `${R.name} · ${Math.round(frames * 1000 / (now - perfAt))} fps (cap ${fps})\n${canvas.width}×${canvas.height} · res ${res.toFixed(2)}\njs ${(drawMs / frames).toFixed(1)} ms/frame`;
+        frames = 0; drawMs = 0; perfAt = now;
+      } else if (now - perfAt > 1000) { frames = 0; drawMs = 0; perfAt = now; }
+    };
+    requestAnimationFrame(loop);
+    return {
+      // modules: where the spec's modules come from (kit.js: {world, refs} or {texts})
+      show(next, modules) {
+        // what the scene's code shares (its modules may still be on their way): shown once they are here
+        const shared = MooodKit.shared(next, modules);
+        if (shared instanceof Promise) { waiting = next; shared.then(() => { if (waiting === next) { waiting = null; this.show(next, modules); } }); return; }
+        waiting = null; SHARED = shared;
+        spec = next; FOCUS.clear();
+        // values not set yet (the state may start after the scene is shown) are where the scene starts them
+        if (spec.state && typeof spec.state === 'object') STATE.values = { ...spec.state, ...STATE.values };
+        // a new level, or the same one edited: the hero stays where it got to
+        const was = plat; plat = platformOf(spec); HERO.id = plat?.id ?? null;
+        if (plat && was && was.id === plat.id) Object.assign(plat, { x: was.x, y: was.y, floor: was.floor, dir: was.dir });
+        rebuild();
+        if (plat) { Object.assign(target, { x: plat.x / EYE }); Object.assign(cam, target); }
+      },
+      // a platformer's hero now: { across, elevation (metres), ground } — or null
+      hero: () => (plat ? { across: plat.x, elevation: plat.y, ground: plat.ground } : null),
+      resetCamera() { reset(); Object.assign(cam, target); },
+      // the part of the canvas not covered by the page's panels, as fractions of its width
+      setView(left, right) { seen = [left, right]; lim = { ...lim, view: openView() }; },
+      // where the frame lies in the canvas (CSS px)
+      frame: () => ({ ...box }),
+      // where the camera is now (for picking things on screen, select.js)
+      camera: () => ({ x: shown.x, y: shown.y, z: shown.z, h: shown.h, yaw: shown.yaw, hero: shown.hero }),
+      // the scene's state changed (scenestate.js): the painting code sees it as e.state
+      // was(key, ago): what a value was `ago` seconds ago (e.was); sample(): brings the values that
+      // are moving to where they are now — called as each frame starts, so it paints them on time
+      setState(values, was, sample) {
+        STATE.values = values || {}; if (was) STATE.was = was; if (sample) STATE.sample = sample;
+        STATE.ver++; activeUntil = performance.now() + 300;
+      },
+      // where in the canvas (CSS px) an element is now — the point its code marks (e.at), else its
+      // anchor (its top, with over) — lifted by `lift` metres; null when out of sight
+      screenOf: (id, lift = 0, over = false) => seenFrom(shown, id, lift, over),
+    };
+  }
+
+  return {
+    mount,
+    // for the WebGL renderer (gl.js): the one-time painting code and camera maths
+    internals: { STAGE, WIDEST, TAU, project, billboard, placeOf, camSetup, heroMatrix, STATE, READS, EXT, DEEP, Z_FAR, EYE, depths, view, limits, fadeNear, objectBox, seeded, hash, clamp, layer, rgb, glowSprite, grainTile, staticLayer, drawObject, PARTICLES, makeParticles, moveParticle },
+  };
+})();