13 Layers.

fable/Proof1/README.md

@@ -0,0 +1,55 @@
+# Proof1 — the lit chamber
+
+*First physical translation: screen → acrylic → light. Based on
+`REFINED_Backlit7/merge-45 → merge-55`.*
+
+## What this is
+
+A bubble chamber photographed the invisible: a particle passed, boiled a
+line of bubbles into being, and was gone — leaving a trail as its only
+confession. This project makes new such confessions by hand-parameter, then
+stages one as a world. *One Sun Setting*: a single event erupting at the
+waterline of a quiet sea, beneath a sun already fading into memory. Silence
+and violence in one frame.
+
+## Inspiration
+
+CERN plate film on a light table. Hokusai's small figures under enormous
+weather. Twombly's one honest gesture on a still ground. The idea that
+*evidence of the invisible rhymes across scales* — the spiral of a δ-ray and
+the spiral of a milkweed seed are the same handwriting.
+
+## Boundaries
+
+The archive costume came off, layer by layer, until only the gesture
+remained. No scanner's hand. No labels — a legible glyph commands *read me*;
+this piece asks only *look*. The palette holds: β-law magenta, hot at birth,
+violet only as a last word. The sea stays calm so the event can be loud —
+loudness lives in a small mark against vastness, never in clutter. The sun
+recedes; it is what the light *was*, not a character. Composition obeys φ:
+the golden rectangle, the horizon on the golden division, sun and event vertex
+on opposing golden nodes.
+
+## Craft
+
+The seed is the whole fingerprint — an image and its four-metre master are one
+truth at two sizes. Bubbles are hollow: pale core, refracting rim, delicate as
+mist at nose distance. Where they crowd, they *merge* — one flat union at an
+even density, so a dense knot never becomes mud, and, lit, never punches a dark
+hole in the glow. Even ink = even light. That is the whole discipline of the
+backlit grammar: **depth is transparency.** The deepest plane carries the least
+ink and the most light.
+
+## Goals
+
+Take the locked frame apart into planes and give it air. Sun to the back, pure
+transmitted colour, a light source rather than a picture. Sea in the middle,
+a woven field. The event to the front, erupting toward the viewer. Air gaps
+turn faked blur into real parallax; the LED panel behind frosted acrylic turns
+faded ink into a sun that actually shines. Prove one hero, then let the typology
+grow around it — a wall of catalogued dawns over one vacuum sea.
+
+## Feels
+
+Arrival and dispersal at once. A single instant, embalmed, outliving the
+conditions that made it. Awe, not spectacle. The held breath before the wave.

fable/Proof1/manifest.json

@@ -0,0 +1,101 @@
+{
+  "piece": "Proof1 — the lit chamber",
+  "source": "REFINED_Backlit7 merge (mirror event, uniform-lace)",
+  "seed": "MESON-5113#03",
+  "bubbleOpacity": 0.5,
+  "art": {
+    "w": 1001,
+    "h": 1620,
+    "ratio": "phi (golden portrait)"
+  },
+  "sheet": {
+    "w_mm": 330,
+    "h_mm": 420,
+    "note": "A3 — golden art square floated, clear margins = lit void"
+  },
+  "gaps_mm": "plane z is nominal; two scales: ~3mm within a sheet, ~9mm between",
+  "planes": [
+    {
+      "id": "sun",
+      "file": "plane-1-sun.svg",
+      "z": 0,
+      "blur": 1.4,
+      "dim": 1,
+      "white": "none",
+      "glow": 1
+    },
+    {
+      "id": "event-glow",
+      "file": "plane-2-event-glow.svg",
+      "z": 8,
+      "blur": 2.6,
+      "dim": 0.85,
+      "white": "none",
+      "glow": 0.9
+    },
+    {
+      "id": "sea-far",
+      "file": "plane-3-sea-far.svg",
+      "z": 14,
+      "blur": 0.9,
+      "dim": 0.7,
+      "white": "none",
+      "glow": 0.8
+    },
+    {
+      "id": "sea-mid",
+      "file": "plane-4-sea-mid.svg",
+      "z": 18,
+      "blur": 0.5,
+      "dim": 0.7,
+      "white": "trace",
+      "glow": 0.7
+    },
+    {
+      "id": "sea-near",
+      "file": "plane-5-sea-near.svg",
+      "z": 22,
+      "blur": 0.2,
+      "dim": 0.7,
+      "white": "trace",
+      "glow": 0.7
+    },
+    {
+      "id": "event-birth",
+      "file": "plane-6-event-birth.svg",
+      "z": 28,
+      "blur": 0.7,
+      "dim": 1,
+      "white": "none",
+      "glow": 0.8
+    },
+    {
+      "id": "event-life",
+      "file": "plane-7-event-life.svg",
+      "z": 32,
+      "blur": 0.3,
+      "dim": 1,
+      "white": "trace",
+      "glow": 0.5
+    },
+    {
+      "id": "event-death",
+      "file": "plane-8-event-death.svg",
+      "z": 36,
+      "blur": 0,
+      "dim": 1,
+      "white": "under",
+      "glow": 0.3
+    },
+    {
+      "id": "front-glass",
+      "file": "plane-9-front-glass.svg",
+      "z": 36,
+      "blur": 0,
+      "dim": 1,
+      "white": "none",
+      "glow": 0,
+      "blend": "multiply"
+    }
+  ]
+}

fable/Proof1/plane-9-front-glass.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1001" height="1620" viewBox="0 0 1001 1620"><image x="0" y="0" width="1001" height="1620" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAxIiBoZWlnaHQ9IjE2MjAiIHZpZXdCb3g9IjAgMCAxMDAxIDE2MjAiPgo8ZGVmcz4KIDxmaWx0ZXIgaWQ9ImR1c3QiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxmZVR1cmJ1bGVuY2UgdHlwZT0idHVyYnVsZW5jZSIgYmFzZUZyZXF1ZW5jeT0iMC41IiBudW1PY3RhdmVzPSIyIiBzZWVkPSIxMyIgc3RpdGNoVGlsZXM9InN0aXRjaCIgcmVzdWx0PSJuIi8+PGZlQ29sb3JNYXRyaXggaW49Im4iIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAuMjM1IDAgMCAwIDAgMC4xODggMCAwIDAgMCAwLjEzMyAwIDAgMCAwLjMwMCAtMC4xOCIvPjwvZmlsdGVyPgogPGZpbHRlciBpZD0iZm94IiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC4wMDQiIG51bU9jdGF2ZXM9IjMiIHNlZWQ9IjE3IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiByZXN1bHQ9Im4iLz48ZmVDb2xvck1hdHJpeCBpbj0ibiIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC40MiAwIDAgMCAwIDAuMzAgMCAwIDAgMCAwLjE2IDAgMCAwIDAuMTk4IC0wLjEyIi8+PC9maWx0ZXI+CjwvZGVmcz4KPHJlY3Qgd2lkdGg9IjEwMDEiIGhlaWdodD0iMTYyMCIgZmlsdGVyPSJ1cmwoI2ZveCkiLz4KPHJlY3Qgd2lkdGg9IjEwMDEiIGhlaWdodD0iMTYyMCIgZmlsdGVyPSJ1cmwoI2R1c3QpIi8+CjxsaW5lIHgxPSI0MTEiIHkxPSIzNDQiIHgyPSI0MzAiIHkyPSIxMjQ3IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjA5MCIgc3Ryb2tlLXdpZHRoPSIwLjc5Ii8+PGxpbmUgeDE9IjcwMiIgeTE9IjY4IiB4Mj0iNjg3IiB5Mj0iMTQzNyIgc3Ryb2tlPSJyZ2IoNjAsNDgsMzQpIiBzdHJva2Utb3BhY2l0eT0iMC4wNTEiIHN0cm9rZS13aWR0aD0iMC43NyIvPjxsaW5lIHgxPSI0MjIiIHkxPSI1MTQiIHgyPSI0MzciIHkyPSIxNzU3IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjE2NSIgc3Ryb2tlLXdpZHRoPSIxLjAzIi8+PGxpbmUgeDE9IjEwIiB5MT0iNTIzIiB4Mj0iMTkiIHkyPSIxODY5IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjE1MCIgc3Ryb2tlLXdpZHRoPSIwLjUzIi8+PGxpbmUgeDE9IjQzNCIgeTE9IjI4NSIgeDI9IjQyMSIgeTI9IjE0NDIiIHN0cm9rZT0icmdiKDYwLDQ4LDM0KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMTU3IiBzdHJva2Utd2lkdGg9IjAuNzAiLz48bGluZSB4MT0iMTExIiB5MT0iMTgwIiB4Mj0iOTUiIHkyPSIxNTk0IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjA4NiIgc3Ryb2tlLXdpZHRoPSIwLjkxIi8+PGxpbmUgeDE9IjE0MCIgeTE9IjE2NCIgeDI9IjE1OCIgeTI9Ijc1OCIgc3Ryb2tlPSJyZ2IoNjAsNDgsMzQpIiBzdHJva2Utb3BhY2l0eT0iMC4xMDUiIHN0cm9rZS13aWR0aD0iMS4wNCIvPjxsaW5lIHgxPSIxOTIiIHkxPSIzNjMiIHgyPSIyMDciIHkyPSIxNDg5IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjA3NSIgc3Ryb2tlLXdpZHRoPSIxLjAzIi8+PC9zdmc+"/><g opacity="0.85"><image x="0" y="0" width="1001" height="1620" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAxIiBoZWlnaHQ9IjE2MjAiIHZpZXdCb3g9IjAgMCAxMDAxIDE2MjAiPgo8ZGVmcz48ZmlsdGVyIGlkPSJnIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuOSIgbnVtT2N0YXZlcz0iMiIgc2VlZD0iMTkiIHN0aXRjaFRpbGVzPSJzdGl0Y2giIHJlc3VsdD0ibiIvPgo8ZmVDb2xvck1hdHJpeCBpbj0ibiIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC4xNDkgMCAwIDAgMCAwLjEyNSAwIDAgMCAwIDAuMTAyIDAgMCAwIDAuNTIgMCIvPgo8L2ZpbHRlcj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMDEiIGhlaWdodD0iMTYyMCIgZmlsdGVyPSJ1cmwoI2cpIi8+PC9zdmc+"/></g></svg>

fable/Proof1/simulator.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html><html><head><meta charset="utf-8">
+<title>Proof1 · lit chamber — backlit parallax</title>
+<style>
+  html,body{margin:0;height:100%;background:#0a0a0b;overflow:hidden;
+    font:12px/1.5 ui-monospace,monospace;color:#9aa;}
+  #wrap{position:fixed;inset:0;display:grid;place-items:center;}
+  .scene{perspective:1400px;perspective-origin:50% 45%;}
+  .stack{position:relative;transform-style:preserve-3d;transition:transform .06s linear;
+    width:500.5px;height:810px;}
+  .panel{position:absolute;inset:-70%;
+    background:radial-gradient(120% 90% at 50% 42%,#fff6ec, #ffe7c8 42%, #f0c48c 78%, #caa06a 100%);
+    filter:blur(2px);}
+  .plane{position:absolute;inset:0;width:100%;height:100%;background-size:cover;
+    background-repeat:no-repeat;will-change:transform,filter;}
+  #hud{position:fixed;left:14px;top:12px;z-index:9;background:#141416cc;padding:12px 14px;
+    border-left:3px solid #d9b48a;max-width:300px;}
+  #hud h1{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#d9b48a;font-weight:400;margin:0 0 8px;}
+  #hud label{display:block;margin:7px 0 2px;color:#aab;}
+  #hud input[type=range]{width:100%;}
+  #legend{position:fixed;right:14px;top:12px;z-index:9;background:#141416cc;padding:10px 12px;color:#889;}
+  #legend b{color:#d9b48a;font-weight:400;}
+  .pill{display:inline-block;margin:2px 4px 2px 0;padding:1px 6px;border:1px solid #333;border-radius:9px;cursor:pointer;color:#aab;}
+  .pill.off{opacity:.35;text-decoration:line-through;}
+</style></head><body>
+<div id="hud">
+  <h1>Proof1 · lit chamber</h1>
+  <div>move mouse = parallax · drag sliders</div>
+  <label>air gap ×<span id="gv"></span></label>
+  <input id="gap" type="range" min="1" max="28" step="0.5" value="12">
+  <label>parallax ×<span id="pv"></span></label>
+  <input id="par" type="range" min="0" max="220" step="5" value="110">
+  <label>backlight<span id="bv"></span></label>
+  <input id="bright" type="range" min="0.3" max="1.8" step="0.05" value="1">
+  <div id="pills"></div>
+</div>
+<div id="legend"></div>
+<div id="wrap"><div class="scene"><div class="stack" id="stack">
+  <div class="panel" id="panel"></div>
+</div></div></div>
+<script>
+const PLANES=[{"id":"sun","file":"plane-1-sun.svg","z":0,"blur":1.4,"dim":1,"white":"none","glow":1},{"id":"event-glow","file":"plane-2-event-glow.svg","z":8,"blur":2.6,"dim":0.85,"white":"none","glow":0.9},{"id":"sea-far","file":"plane-3-sea-far.svg","z":14,"blur":0.9,"dim":0.7,"white":"none","glow":0.8},{"id":"sea-mid","file":"plane-4-sea-mid.svg","z":18,"blur":0.5,"dim":0.7,"white":"trace","glow":0.7},{"id":"sea-near","file":"plane-5-sea-near.svg","z":22,"blur":0.2,"dim":0.7,"white":"trace","glow":0.7},{"id":"event-birth","file":"plane-6-event-birth.svg","z":28,"blur":0.7,"dim":1,"white":"none","glow":0.8},{"id":"event-life","file":"plane-7-event-life.svg","z":32,"blur":0.3,"dim":1,"white":"trace","glow":0.5},{"id":"event-death","file":"plane-8-event-death.svg","z":36,"blur":0,"dim":1,"white":"under","glow":0.3},{"id":"front-glass","file":"plane-9-front-glass.svg","z":36,"blur":0,"dim":1,"white":"none","glow":0,"blend":"multiply"}];
+const stack=document.getElementById('stack');
+const legend=document.getElementById('legend');
+const pills=document.getElementById('pills');
+const maxZ=Math.max(...PLANES.map(p=>p.z));
+const els={};
+legend.innerHTML='<b>planes</b> (front → back)<br>'+[...PLANES].reverse().map(p=>p.id+' · '+p.z+'mm').join('<br>');
+PLANES.forEach(p=>{
+  const d=document.createElement('div');
+  d.className='plane'; d.style.backgroundImage='url('+p.file+')';
+  d.dataset.id=p.id; stack.appendChild(d); els[p.id]=d;
+  const pill=document.createElement('span'); pill.className='pill'; pill.textContent=p.id;
+  pill.onclick=()=>{d.dataset.off=d.dataset.off?'':'1'; pill.classList.toggle('off'); layout();};
+  pills.appendChild(pill);
+});
+let gap=12, par=110, bright=1, mx=0, my=0;
+const panel=document.getElementById('panel');
+// One transform per plane = translateZ (real depth) + a depth-scaled screen
+// shift (EXAGGERATED parallax) + the stack's 3D tilt. Deeper planes shift more,
+// so the event's birth→death timeline slides apart as you move.
+function update(){
+  stack.style.transform='rotateX('+(my*11).toFixed(2)+'deg) rotateY('+(mx*15).toFixed(2)+'deg)';
+  for(const p of PLANES){
+    const e=els[p.id];
+    const z=(p.z-maxZ)*gap;                       // front plane at 0, others recede
+    const depth=(maxZ-p.z)/(maxZ||1);             // 0 = front, 1 = deepest
+    const ox=(-mx*depth*par).toFixed(1), oy=(my*depth*par).toFixed(1);
+    e.style.transform='translate3d('+ox+'px,'+oy+'px,'+z.toFixed(1)+'px)';
+    e.style.filter='blur('+((p.blur||0)*(gap/8)).toFixed(2)+'px)';
+    e.style.opacity=e.dataset.off?0:(p.dim??1);
+    e.style.mixBlendMode=p.blend||'normal';
+  }
+  // keep the light panel ALWAYS behind the deepest plane, scaled up so it still
+  // fills the backdrop as it recedes (else deep planes pop behind it at high gap).
+  const pz=(0-maxZ)*gap-90;
+  panel.style.transform='translateZ('+pz.toFixed(0)+'px) scale('+(1+(-pz)/1400).toFixed(2)+')';
+  panel.style.filter='blur(2px) brightness('+bright+')';
+}
+addEventListener('mousemove',e=>{
+  mx=(e.clientX/innerWidth-0.5)*2; my=-(e.clientY/innerHeight-0.5)*2; update();
+});
+const gapI=document.getElementById('gap'), parI=document.getElementById('par'), brI=document.getElementById('bright');
+gapI.oninput=()=>{gap=+gapI.value; document.getElementById('gv').textContent=' '+gap; update();};
+parI.oninput=()=>{par=+parI.value; document.getElementById('pv').textContent=' '+par; update();};
+brI.oninput=()=>{bright=+brI.value; document.getElementById('bv').textContent=' '+bright.toFixed(2); update();};
+document.getElementById('gv').textContent=' '+gap;
+document.getElementById('pv').textContent=' '+par;
+document.getElementById('bv').textContent=' '+bright.toFixed(2);
+update();
+</script></body></html>

fable/Proof2/manifest.json

@@ -0,0 +1,137 @@
+{
+  "piece": "Proof2 — the lit chamber (7 time-shells)",
+  "source": "REFINED_Backlit7 merge (mirror event, uniform-lace)",
+  "seed": "MESON-5113#03",
+  "bubbleOpacity": 0.5,
+  "art": {
+    "w": 1001,
+    "h": 1620,
+    "ratio": "phi (golden portrait)"
+  },
+  "sheet": {
+    "w_mm": 330,
+    "h_mm": 420,
+    "note": "A3 — golden art square floated, clear margins = lit void"
+  },
+  "gaps_mm": "plane z is nominal; two scales: ~3mm within a sheet, ~9mm between",
+  "planes": [
+    {
+      "id": "sun",
+      "file": "plane-01-sun.svg",
+      "z": 0,
+      "blur": 1.4,
+      "dim": 1,
+      "white": "none",
+      "glow": 1
+    },
+    {
+      "id": "glow",
+      "file": "plane-02-glow.svg",
+      "z": 5,
+      "blur": 2.6,
+      "dim": 0.85,
+      "white": "none",
+      "glow": 0.9
+    },
+    {
+      "id": "wave1",
+      "file": "plane-03-wave1.svg",
+      "z": 10,
+      "blur": 0.9,
+      "dim": 0.7,
+      "white": "none",
+      "glow": 0.8
+    },
+    {
+      "id": "p1",
+      "file": "plane-04-p1.svg",
+      "z": 14,
+      "blur": 0.8,
+      "dim": 1,
+      "white": "none",
+      "glow": 0.8
+    },
+    {
+      "id": "wave2",
+      "file": "plane-05-wave2.svg",
+      "z": 18,
+      "blur": 0.5,
+      "dim": 0.7,
+      "white": "trace",
+      "glow": 0.7
+    },
+    {
+      "id": "p2",
+      "file": "plane-06-p2.svg",
+      "z": 22,
+      "blur": 0.7,
+      "dim": 1,
+      "white": "none",
+      "glow": 0.7
+    },
+    {
+      "id": "wave3",
+      "file": "plane-07-wave3.svg",
+      "z": 26,
+      "blur": 0.2,
+      "dim": 0.7,
+      "white": "trace",
+      "glow": 0.7
+    },
+    {
+      "id": "p3",
+      "file": "plane-08-p3.svg",
+      "z": 30,
+      "blur": 0.55,
+      "dim": 1,
+      "white": "trace",
+      "glow": 0.6
+    },
+    {
+      "id": "p4",
+      "file": "plane-09-p4.svg",
+      "z": 34,
+      "blur": 0.45,
+      "dim": 1,
+      "white": "trace",
+      "glow": 0.5
+    },
+    {
+      "id": "p5",
+      "file": "plane-10-p5.svg",
+      "z": 38,
+      "blur": 0.35,
+      "dim": 1,
+      "white": "trace",
+      "glow": 0.4
+    },
+    {
+      "id": "p6",
+      "file": "plane-11-p6.svg",
+      "z": 42,
+      "blur": 0.2,
+      "dim": 1,
+      "white": "under",
+      "glow": 0.35
+    },
+    {
+      "id": "p7",
+      "file": "plane-12-p7.svg",
+      "z": 46,
+      "blur": 0,
+      "dim": 1,
+      "white": "under",
+      "glow": 0.3
+    },
+    {
+      "id": "film-grain",
+      "file": "plane-13-film-grain.svg",
+      "z": 46,
+      "blur": 0,
+      "dim": 1,
+      "white": "none",
+      "glow": 0,
+      "blend": "multiply"
+    }
+  ]
+}

fable/Proof2/plane-13-film-grain.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1001" height="1620" viewBox="0 0 1001 1620"><image x="0" y="0" width="1001" height="1620" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAxIiBoZWlnaHQ9IjE2MjAiIHZpZXdCb3g9IjAgMCAxMDAxIDE2MjAiPgo8ZGVmcz4KIDxmaWx0ZXIgaWQ9ImR1c3QiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxmZVR1cmJ1bGVuY2UgdHlwZT0idHVyYnVsZW5jZSIgYmFzZUZyZXF1ZW5jeT0iMC41IiBudW1PY3RhdmVzPSIyIiBzZWVkPSIxMyIgc3RpdGNoVGlsZXM9InN0aXRjaCIgcmVzdWx0PSJuIi8+PGZlQ29sb3JNYXRyaXggaW49Im4iIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAuMjM1IDAgMCAwIDAgMC4xODggMCAwIDAgMCAwLjEzMyAwIDAgMCAwLjMwMCAtMC4xOCIvPjwvZmlsdGVyPgogPGZpbHRlciBpZD0iZm94IiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC4wMDQiIG51bU9jdGF2ZXM9IjMiIHNlZWQ9IjE3IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiByZXN1bHQ9Im4iLz48ZmVDb2xvck1hdHJpeCBpbj0ibiIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC40MiAwIDAgMCAwIDAuMzAgMCAwIDAgMCAwLjE2IDAgMCAwIDAuMTk4IC0wLjEyIi8+PC9maWx0ZXI+CjwvZGVmcz4KPHJlY3Qgd2lkdGg9IjEwMDEiIGhlaWdodD0iMTYyMCIgZmlsdGVyPSJ1cmwoI2ZveCkiLz4KPHJlY3Qgd2lkdGg9IjEwMDEiIGhlaWdodD0iMTYyMCIgZmlsdGVyPSJ1cmwoI2R1c3QpIi8+CjxsaW5lIHgxPSI0MTEiIHkxPSIzNDQiIHgyPSI0MzAiIHkyPSIxMjQ3IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjA5MCIgc3Ryb2tlLXdpZHRoPSIwLjc5Ii8+PGxpbmUgeDE9IjcwMiIgeTE9IjY4IiB4Mj0iNjg3IiB5Mj0iMTQzNyIgc3Ryb2tlPSJyZ2IoNjAsNDgsMzQpIiBzdHJva2Utb3BhY2l0eT0iMC4wNTEiIHN0cm9rZS13aWR0aD0iMC43NyIvPjxsaW5lIHgxPSI0MjIiIHkxPSI1MTQiIHgyPSI0MzciIHkyPSIxNzU3IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjE2NSIgc3Ryb2tlLXdpZHRoPSIxLjAzIi8+PGxpbmUgeDE9IjEwIiB5MT0iNTIzIiB4Mj0iMTkiIHkyPSIxODY5IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjE1MCIgc3Ryb2tlLXdpZHRoPSIwLjUzIi8+PGxpbmUgeDE9IjQzNCIgeTE9IjI4NSIgeDI9IjQyMSIgeTI9IjE0NDIiIHN0cm9rZT0icmdiKDYwLDQ4LDM0KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMTU3IiBzdHJva2Utd2lkdGg9IjAuNzAiLz48bGluZSB4MT0iMTExIiB5MT0iMTgwIiB4Mj0iOTUiIHkyPSIxNTk0IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjA4NiIgc3Ryb2tlLXdpZHRoPSIwLjkxIi8+PGxpbmUgeDE9IjE0MCIgeTE9IjE2NCIgeDI9IjE1OCIgeTI9Ijc1OCIgc3Ryb2tlPSJyZ2IoNjAsNDgsMzQpIiBzdHJva2Utb3BhY2l0eT0iMC4xMDUiIHN0cm9rZS13aWR0aD0iMS4wNCIvPjxsaW5lIHgxPSIxOTIiIHkxPSIzNjMiIHgyPSIyMDciIHkyPSIxNDg5IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjA3NSIgc3Ryb2tlLXdpZHRoPSIxLjAzIi8+PC9zdmc+"/><g opacity="0.85"><image x="0" y="0" width="1001" height="1620" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAxIiBoZWlnaHQ9IjE2MjAiIHZpZXdCb3g9IjAgMCAxMDAxIDE2MjAiPgo8ZGVmcz48ZmlsdGVyIGlkPSJnIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuOSIgbnVtT2N0YXZlcz0iMiIgc2VlZD0iMTkiIHN0aXRjaFRpbGVzPSJzdGl0Y2giIHJlc3VsdD0ibiIvPgo8ZmVDb2xvck1hdHJpeCBpbj0ibiIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC4xNDkgMCAwIDAgMCAwLjEyNSAwIDAgMCAwIDAuMTAyIDAgMCAwIDAuNTIgMCIvPgo8L2ZpbHRlcj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMDEiIGhlaWdodD0iMTYyMCIgZmlsdGVyPSJ1cmwoI2cpIi8+PC9zdmc+"/></g></svg>

fable/Proof2/simulator.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html><html><head><meta charset="utf-8">
+<title>Proof2 · lit chamber — backlit parallax</title>
+<style>
+  html,body{margin:0;height:100%;background:#0a0a0b;overflow:hidden;
+    font:12px/1.5 ui-monospace,monospace;color:#9aa;}
+  #wrap{position:fixed;inset:0;display:grid;place-items:center;}
+  .scene{perspective:1400px;perspective-origin:50% 45%;}
+  .stack{position:relative;transform-style:preserve-3d;transition:transform .06s linear;
+    width:500.5px;height:810px;}
+  .panel{position:absolute;inset:-70%;
+    background:radial-gradient(120% 90% at 50% 42%,#fff6ec, #ffe7c8 42%, #f0c48c 78%, #caa06a 100%);
+    filter:blur(2px);}
+  .plane{position:absolute;inset:0;width:100%;height:100%;background-size:cover;
+    background-repeat:no-repeat;will-change:transform,filter;}
+  #hud{position:fixed;left:14px;top:12px;z-index:9;background:#141416cc;padding:12px 14px;
+    border-left:3px solid #d9b48a;max-width:300px;}
+  #hud h1{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#d9b48a;font-weight:400;margin:0 0 8px;}
+  #hud label{display:block;margin:7px 0 2px;color:#aab;}
+  #hud input[type=range]{width:100%;}
+  #legend{position:fixed;right:14px;top:12px;z-index:9;background:#141416cc;padding:10px 12px;color:#889;}
+  #legend b{color:#d9b48a;font-weight:400;}
+  .pill{display:inline-block;margin:2px 4px 2px 0;padding:1px 6px;border:1px solid #333;border-radius:9px;cursor:pointer;color:#aab;}
+  .pill.off{opacity:.35;text-decoration:line-through;}
+</style></head><body>
+<div id="hud">
+  <h1>Proof2 · lit chamber</h1>
+  <div>move mouse = parallax · drag sliders</div>
+  <label>air gap ×<span id="gv"></span></label>
+  <input id="gap" type="range" min="1" max="28" step="0.5" value="12">
+  <label>parallax ×<span id="pv"></span></label>
+  <input id="par" type="range" min="0" max="220" step="5" value="110">
+  <label>backlight<span id="bv"></span></label>
+  <input id="bright" type="range" min="0.3" max="1.8" step="0.05" value="1">
+  <div id="pills"></div>
+</div>
+<div id="legend"></div>
+<div id="wrap"><div class="scene"><div class="stack" id="stack">
+  <div class="panel" id="panel"></div>
+</div></div></div>
+<script>
+const PLANES=[{"id":"sun","file":"plane-01-sun.svg","z":0,"blur":1.4,"dim":1,"white":"none","glow":1},{"id":"glow","file":"plane-02-glow.svg","z":5,"blur":2.6,"dim":0.85,"white":"none","glow":0.9},{"id":"wave1","file":"plane-03-wave1.svg","z":10,"blur":0.9,"dim":0.7,"white":"none","glow":0.8},{"id":"p1","file":"plane-04-p1.svg","z":14,"blur":0.8,"dim":1,"white":"none","glow":0.8},{"id":"wave2","file":"plane-05-wave2.svg","z":18,"blur":0.5,"dim":0.7,"white":"trace","glow":0.7},{"id":"p2","file":"plane-06-p2.svg","z":22,"blur":0.7,"dim":1,"white":"none","glow":0.7},{"id":"wave3","file":"plane-07-wave3.svg","z":26,"blur":0.2,"dim":0.7,"white":"trace","glow":0.7},{"id":"p3","file":"plane-08-p3.svg","z":30,"blur":0.55,"dim":1,"white":"trace","glow":0.6},{"id":"p4","file":"plane-09-p4.svg","z":34,"blur":0.45,"dim":1,"white":"trace","glow":0.5},{"id":"p5","file":"plane-10-p5.svg","z":38,"blur":0.35,"dim":1,"white":"trace","glow":0.4},{"id":"p6","file":"plane-11-p6.svg","z":42,"blur":0.2,"dim":1,"white":"under","glow":0.35},{"id":"p7","file":"plane-12-p7.svg","z":46,"blur":0,"dim":1,"white":"under","glow":0.3},{"id":"film-grain","file":"plane-13-film-grain.svg","z":46,"blur":0,"dim":1,"white":"none","glow":0,"blend":"multiply"}];
+const stack=document.getElementById('stack');
+const legend=document.getElementById('legend');
+const pills=document.getElementById('pills');
+const maxZ=Math.max(...PLANES.map(p=>p.z));
+const els={};
+legend.innerHTML='<b>planes</b> (front → back)<br>'+[...PLANES].reverse().map(p=>p.id+' · '+p.z+'mm').join('<br>');
+PLANES.forEach(p=>{
+  const d=document.createElement('div');
+  d.className='plane'; d.style.backgroundImage='url('+p.file+')';
+  d.dataset.id=p.id; stack.appendChild(d); els[p.id]=d;
+  const pill=document.createElement('span'); pill.className='pill'; pill.textContent=p.id;
+  pill.onclick=()=>{d.dataset.off=d.dataset.off?'':'1'; pill.classList.toggle('off'); layout();};
+  pills.appendChild(pill);
+});
+let gap=12, par=110, bright=1, mx=0, my=0;
+const panel=document.getElementById('panel');
+// One transform per plane = translateZ (real depth) + a depth-scaled screen
+// shift (EXAGGERATED parallax) + the stack's 3D tilt. Deeper planes shift more,
+// so the event's birth→death timeline slides apart as you move.
+function update(){
+  stack.style.transform='rotateX('+(my*11).toFixed(2)+'deg) rotateY('+(mx*15).toFixed(2)+'deg)';
+  for(const p of PLANES){
+    const e=els[p.id];
+    const z=(p.z-maxZ)*gap;                       // front plane at 0, others recede
+    const depth=(maxZ-p.z)/(maxZ||1);             // 0 = front, 1 = deepest
+    const ox=(-mx*depth*par).toFixed(1), oy=(my*depth*par).toFixed(1);
+    e.style.transform='translate3d('+ox+'px,'+oy+'px,'+z.toFixed(1)+'px)';
+    e.style.filter='blur('+((p.blur||0)*(gap/8)).toFixed(2)+'px)';
+    e.style.opacity=e.dataset.off?0:(p.dim??1);
+    e.style.mixBlendMode=p.blend||'normal';
+  }
+  // keep the light panel ALWAYS behind the deepest plane, scaled up so it still
+  // fills the backdrop as it recedes (else deep planes pop behind it at high gap).
+  const pz=(0-maxZ)*gap-90;
+  panel.style.transform='translateZ('+pz.toFixed(0)+'px) scale('+(1+(-pz)/1400).toFixed(2)+')';
+  panel.style.filter='blur(2px) brightness('+bright+')';
+}
+addEventListener('mousemove',e=>{
+  mx=(e.clientX/innerWidth-0.5)*2; my=-(e.clientY/innerHeight-0.5)*2; update();
+});
+const gapI=document.getElementById('gap'), parI=document.getElementById('par'), brI=document.getElementById('bright');
+gapI.oninput=()=>{gap=+gapI.value; document.getElementById('gv').textContent=' '+gap; update();};
+parI.oninput=()=>{par=+parI.value; document.getElementById('pv').textContent=' '+par; update();};
+brI.oninput=()=>{bright=+brI.value; document.getElementById('bv').textContent=' '+bright.toFixed(2); update();};
+document.getElementById('gv').textContent=' '+gap;
+document.getElementById('pv').textContent=' '+par;
+document.getElementById('bv').textContent=' '+bright.toFixed(2);
+update();
+</script></body></html>

fable/Proof3/manifest.json

@@ -0,0 +1,137 @@
+{
+  "piece": "Proof3 — the lit chamber (equal-count shells, ring-pop)",
+  "source": "REFINED_Backlit7 merge (mirror event, uniform-lace)",
+  "seed": "MESON-5113#03",
+  "bubbleOpacity": 0.5,
+  "art": {
+    "w": 1001,
+    "h": 1620,
+    "ratio": "phi (golden portrait)"
+  },
+  "sheet": {
+    "w_mm": 330,
+    "h_mm": 420,
+    "note": "A3 — golden art square floated, clear margins = lit void"
+  },
+  "gaps_mm": "plane z is nominal; two scales: ~3mm within a sheet, ~9mm between",
+  "planes": [
+    {
+      "id": "sun",
+      "file": "plane-01-sun.svg",
+      "z": 0,
+      "blur": 1.4,
+      "dim": 1,
+      "white": "none",
+      "glow": 1
+    },
+    {
+      "id": "glow",
+      "file": "plane-02-glow.svg",
+      "z": 5,
+      "blur": 2.6,
+      "dim": 0.85,
+      "white": "none",
+      "glow": 0.9
+    },
+    {
+      "id": "wave1",
+      "file": "plane-03-wave1.svg",
+      "z": 10,
+      "blur": 0.9,
+      "dim": 0.7,
+      "white": "none",
+      "glow": 0.8
+    },
+    {
+      "id": "p1",
+      "file": "plane-04-p1.svg",
+      "z": 14,
+      "blur": 0.8,
+      "dim": 1,
+      "white": "none",
+      "glow": 0.8
+    },
+    {
+      "id": "wave2",
+      "file": "plane-05-wave2.svg",
+      "z": 18,
+      "blur": 0.5,
+      "dim": 0.7,
+      "white": "trace",
+      "glow": 0.7
+    },
+    {
+      "id": "p2",
+      "file": "plane-06-p2.svg",
+      "z": 22,
+      "blur": 0.7,
+      "dim": 1,
+      "white": "none",
+      "glow": 0.7
+    },
+    {
+      "id": "wave3",
+      "file": "plane-07-wave3.svg",
+      "z": 26,
+      "blur": 0.2,
+      "dim": 0.7,
+      "white": "trace",
+      "glow": 0.7
+    },
+    {
+      "id": "p3",
+      "file": "plane-08-p3.svg",
+      "z": 30,
+      "blur": 0.55,
+      "dim": 1,
+      "white": "trace",
+      "glow": 0.6
+    },
+    {
+      "id": "p4",
+      "file": "plane-09-p4.svg",
+      "z": 34,
+      "blur": 0.45,
+      "dim": 1,
+      "white": "trace",
+      "glow": 0.5
+    },
+    {
+      "id": "p5",
+      "file": "plane-10-p5.svg",
+      "z": 38,
+      "blur": 0.35,
+      "dim": 1,
+      "white": "trace",
+      "glow": 0.4
+    },
+    {
+      "id": "p6",
+      "file": "plane-11-p6.svg",
+      "z": 42,
+      "blur": 0.2,
+      "dim": 1,
+      "white": "under",
+      "glow": 0.35
+    },
+    {
+      "id": "p7",
+      "file": "plane-12-p7.svg",
+      "z": 46,
+      "blur": 0,
+      "dim": 1,
+      "white": "under",
+      "glow": 0.3
+    },
+    {
+      "id": "film-grain",
+      "file": "plane-13-film-grain.svg",
+      "z": 46,
+      "blur": 0,
+      "dim": 1,
+      "white": "none",
+      "glow": 0,
+      "blend": "multiply"
+    }
+  ]
+}

fable/Proof3/plane-13-film-grain.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1001" height="1620" viewBox="0 0 1001 1620"><image x="0" y="0" width="1001" height="1620" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAxIiBoZWlnaHQ9IjE2MjAiIHZpZXdCb3g9IjAgMCAxMDAxIDE2MjAiPgo8ZGVmcz4KIDxmaWx0ZXIgaWQ9ImR1c3QiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxmZVR1cmJ1bGVuY2UgdHlwZT0idHVyYnVsZW5jZSIgYmFzZUZyZXF1ZW5jeT0iMC41IiBudW1PY3RhdmVzPSIyIiBzZWVkPSIxMyIgc3RpdGNoVGlsZXM9InN0aXRjaCIgcmVzdWx0PSJuIi8+PGZlQ29sb3JNYXRyaXggaW49Im4iIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAuMjM1IDAgMCAwIDAgMC4xODggMCAwIDAgMCAwLjEzMyAwIDAgMCAwLjMwMCAtMC4xOCIvPjwvZmlsdGVyPgogPGZpbHRlciBpZD0iZm94IiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC4wMDQiIG51bU9jdGF2ZXM9IjMiIHNlZWQ9IjE3IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiByZXN1bHQ9Im4iLz48ZmVDb2xvck1hdHJpeCBpbj0ibiIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC40MiAwIDAgMCAwIDAuMzAgMCAwIDAgMCAwLjE2IDAgMCAwIDAuMTk4IC0wLjEyIi8+PC9maWx0ZXI+CjwvZGVmcz4KPHJlY3Qgd2lkdGg9IjEwMDEiIGhlaWdodD0iMTYyMCIgZmlsdGVyPSJ1cmwoI2ZveCkiLz4KPHJlY3Qgd2lkdGg9IjEwMDEiIGhlaWdodD0iMTYyMCIgZmlsdGVyPSJ1cmwoI2R1c3QpIi8+CjxsaW5lIHgxPSI0MTEiIHkxPSIzNDQiIHgyPSI0MzAiIHkyPSIxMjQ3IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjA5MCIgc3Ryb2tlLXdpZHRoPSIwLjc5Ii8+PGxpbmUgeDE9IjcwMiIgeTE9IjY4IiB4Mj0iNjg3IiB5Mj0iMTQzNyIgc3Ryb2tlPSJyZ2IoNjAsNDgsMzQpIiBzdHJva2Utb3BhY2l0eT0iMC4wNTEiIHN0cm9rZS13aWR0aD0iMC43NyIvPjxsaW5lIHgxPSI0MjIiIHkxPSI1MTQiIHgyPSI0MzciIHkyPSIxNzU3IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjE2NSIgc3Ryb2tlLXdpZHRoPSIxLjAzIi8+PGxpbmUgeDE9IjEwIiB5MT0iNTIzIiB4Mj0iMTkiIHkyPSIxODY5IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjE1MCIgc3Ryb2tlLXdpZHRoPSIwLjUzIi8+PGxpbmUgeDE9IjQzNCIgeTE9IjI4NSIgeDI9IjQyMSIgeTI9IjE0NDIiIHN0cm9rZT0icmdiKDYwLDQ4LDM0KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMTU3IiBzdHJva2Utd2lkdGg9IjAuNzAiLz48bGluZSB4MT0iMTExIiB5MT0iMTgwIiB4Mj0iOTUiIHkyPSIxNTk0IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjA4NiIgc3Ryb2tlLXdpZHRoPSIwLjkxIi8+PGxpbmUgeDE9IjE0MCIgeTE9IjE2NCIgeDI9IjE1OCIgeTI9Ijc1OCIgc3Ryb2tlPSJyZ2IoNjAsNDgsMzQpIiBzdHJva2Utb3BhY2l0eT0iMC4xMDUiIHN0cm9rZS13aWR0aD0iMS4wNCIvPjxsaW5lIHgxPSIxOTIiIHkxPSIzNjMiIHgyPSIyMDciIHkyPSIxNDg5IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjA3NSIgc3Ryb2tlLXdpZHRoPSIxLjAzIi8+PC9zdmc+"/><g opacity="0.85"><image x="0" y="0" width="1001" height="1620" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAxIiBoZWlnaHQ9IjE2MjAiIHZpZXdCb3g9IjAgMCAxMDAxIDE2MjAiPgo8ZGVmcz48ZmlsdGVyIGlkPSJnIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuOSIgbnVtT2N0YXZlcz0iMiIgc2VlZD0iMTkiIHN0aXRjaFRpbGVzPSJzdGl0Y2giIHJlc3VsdD0ibiIvPgo8ZmVDb2xvck1hdHJpeCBpbj0ibiIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC4xNDkgMCAwIDAgMCAwLjEyNSAwIDAgMCAwIDAuMTAyIDAgMCAwIDAuNTIgMCIvPgo8L2ZpbHRlcj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMDEiIGhlaWdodD0iMTYyMCIgZmlsdGVyPSJ1cmwoI2cpIi8+PC9zdmc+"/></g></svg>

fable/Proof3/simulator.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html><html><head><meta charset="utf-8">
+<title>Proof3 · lit chamber — backlit parallax</title>
+<style>
+  html,body{margin:0;height:100%;background:#0a0a0b;overflow:hidden;
+    font:12px/1.5 ui-monospace,monospace;color:#9aa;}
+  #wrap{position:fixed;inset:0;display:grid;place-items:center;}
+  .scene{perspective:1400px;perspective-origin:50% 45%;}
+  .stack{position:relative;transform-style:preserve-3d;transition:transform .06s linear;
+    width:500.5px;height:810px;}
+  .panel{position:absolute;inset:-70%;
+    background:radial-gradient(120% 90% at 50% 42%,#fff6ec, #ffe7c8 42%, #f0c48c 78%, #caa06a 100%);
+    filter:blur(2px);}
+  .plane{position:absolute;inset:0;width:100%;height:100%;background-size:cover;
+    background-repeat:no-repeat;will-change:transform,filter;}
+  #hud{position:fixed;left:14px;top:12px;z-index:9;background:#141416cc;padding:12px 14px;
+    border-left:3px solid #d9b48a;max-width:300px;}
+  #hud h1{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#d9b48a;font-weight:400;margin:0 0 8px;}
+  #hud label{display:block;margin:7px 0 2px;color:#aab;}
+  #hud input[type=range]{width:100%;}
+  #legend{position:fixed;right:14px;top:12px;z-index:9;background:#141416cc;padding:10px 12px;color:#889;}
+  #legend b{color:#d9b48a;font-weight:400;}
+  #layers{margin-top:10px;max-height:44vh;overflow:auto;padding-right:4px;}
+  .lay{display:flex;align-items:center;gap:7px;margin:1px 0;}
+  .lay span{width:82px;color:#aab;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+  .lay input[type=range]{flex:1;}
+  .lay b{width:26px;text-align:right;color:#778;font-size:10px;}
+</style></head><body>
+<div id="hud">
+  <h1>Proof3 · lit chamber</h1>
+  <div>move mouse = parallax · drag sliders</div>
+  <label>air gap ×<span id="gv"></span></label>
+  <input id="gap" type="range" min="1" max="28" step="0.5" value="12">
+  <label>parallax ×<span id="pv"></span></label>
+  <input id="par" type="range" min="0" max="220" step="5" value="110">
+  <label>backlight<span id="bv"></span></label>
+  <input id="bright" type="range" min="0.3" max="1.8" step="0.05" value="1">
+  <label>layer opacity (front → back)</label>
+  <div id="layers"></div>
+</div>
+<div id="legend"></div>
+<div id="wrap"><div class="scene"><div class="stack" id="stack">
+  <div class="panel" id="panel"></div>
+</div></div></div>
+<script>
+const PLANES=[{"id":"sun","file":"plane-01-sun.svg","z":0,"blur":1.4,"dim":1,"white":"none","glow":1},{"id":"glow","file":"plane-02-glow.svg","z":5,"blur":2.6,"dim":0.85,"white":"none","glow":0.9},{"id":"wave1","file":"plane-03-wave1.svg","z":10,"blur":0.9,"dim":0.7,"white":"none","glow":0.8},{"id":"p1","file":"plane-04-p1.svg","z":14,"blur":0.8,"dim":1,"white":"none","glow":0.8},{"id":"wave2","file":"plane-05-wave2.svg","z":18,"blur":0.5,"dim":0.7,"white":"trace","glow":0.7},{"id":"p2","file":"plane-06-p2.svg","z":22,"blur":0.7,"dim":1,"white":"none","glow":0.7},{"id":"wave3","file":"plane-07-wave3.svg","z":26,"blur":0.2,"dim":0.7,"white":"trace","glow":0.7},{"id":"p3","file":"plane-08-p3.svg","z":30,"blur":0.55,"dim":1,"white":"trace","glow":0.6},{"id":"p4","file":"plane-09-p4.svg","z":34,"blur":0.45,"dim":1,"white":"trace","glow":0.5},{"id":"p5","file":"plane-10-p5.svg","z":38,"blur":0.35,"dim":1,"white":"trace","glow":0.4},{"id":"p6","file":"plane-11-p6.svg","z":42,"blur":0.2,"dim":1,"white":"under","glow":0.35},{"id":"p7","file":"plane-12-p7.svg","z":46,"blur":0,"dim":1,"white":"under","glow":0.3},{"id":"film-grain","file":"plane-13-film-grain.svg","z":46,"blur":0,"dim":1,"white":"none","glow":0,"blend":"multiply"}];
+const stack=document.getElementById('stack');
+const legend=document.getElementById('legend');
+const layers=document.getElementById('layers');
+const maxZ=Math.max(...PLANES.map(p=>p.z));
+const els={}, op={};   // op[id] = per-layer opacity override (a slider each)
+legend.innerHTML='<b>planes</b> (front → back)<br>'+[...PLANES].reverse().map(p=>p.id+' · '+p.z+'mm').join('<br>');
+// build planes back→front for correct DOM paint order, sliders front→back for reading
+PLANES.forEach(p=>{
+  const d=document.createElement('div');
+  d.className='plane'; d.style.backgroundImage='url('+p.file+')';
+  d.dataset.id=p.id; stack.appendChild(d); els[p.id]=d;
+  op[p.id]=(p.dim??1);
+});
+[...PLANES].reverse().forEach(p=>{
+  const row=document.createElement('div'); row.className='lay';
+  const lab=document.createElement('span'); lab.textContent=p.id;
+  const sl=document.createElement('input'); sl.type='range'; sl.min=0; sl.max=1; sl.step=0.05; sl.value=op[p.id];
+  const val=document.createElement('b'); val.textContent=op[p.id].toFixed(2);
+  sl.oninput=()=>{op[p.id]=+sl.value; val.textContent=op[p.id].toFixed(2); update();};
+  row.appendChild(lab); row.appendChild(sl); row.appendChild(val); layers.appendChild(row);
+});
+let gap=12, par=110, bright=1, mx=0, my=0;
+const panel=document.getElementById('panel');
+// One transform per plane = translateZ (real depth) + a depth-scaled screen
+// shift (EXAGGERATED parallax) + the stack's 3D tilt. Deeper planes shift more,
+// so the event's birth→death timeline slides apart as you move.
+function update(){
+  stack.style.transform='rotateX('+(my*11).toFixed(2)+'deg) rotateY('+(mx*15).toFixed(2)+'deg)';
+  for(const p of PLANES){
+    const e=els[p.id];
+    const z=(p.z-maxZ)*gap;                       // front plane at 0, others recede
+    const depth=(maxZ-p.z)/(maxZ||1);             // 0 = front, 1 = deepest
+    const ox=(-mx*depth*par).toFixed(1), oy=(my*depth*par).toFixed(1);
+    e.style.transform='translate3d('+ox+'px,'+oy+'px,'+z.toFixed(1)+'px)';
+    e.style.filter='blur('+((p.blur||0)*(gap/8)).toFixed(2)+'px)';
+    e.style.opacity=op[p.id];
+    e.style.mixBlendMode=p.blend||'normal';
+  }
+  // keep the light panel ALWAYS behind the deepest plane, scaled up so it still
+  // fills the backdrop as it recedes (else deep planes pop behind it at high gap).
+  const pz=(0-maxZ)*gap-90;
+  panel.style.transform='translateZ('+pz.toFixed(0)+'px) scale('+(1+(-pz)/1400).toFixed(2)+')';
+  panel.style.filter='blur(2px) brightness('+bright+')';
+}
+addEventListener('mousemove',e=>{
+  mx=(e.clientX/innerWidth-0.5)*2; my=-(e.clientY/innerHeight-0.5)*2; update();
+});
+const gapI=document.getElementById('gap'), parI=document.getElementById('par'), brI=document.getElementById('bright');
+gapI.oninput=()=>{gap=+gapI.value; document.getElementById('gv').textContent=' '+gap; update();};
+parI.oninput=()=>{par=+parI.value; document.getElementById('pv').textContent=' '+par; update();};
+brI.oninput=()=>{bright=+brI.value; document.getElementById('bv').textContent=' '+bright.toFixed(2); update();};
+document.getElementById('gv').textContent=' '+gap;
+document.getElementById('pv').textContent=' '+par;
+document.getElementById('bv').textContent=' '+bright.toFixed(2);
+update();
+</script></body></html>

fable/REFINED_Backlit/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>REFINED_Backlit · one sun setting</title>
+<style>body{margin:0;background:#0b0b0b;color:#bbb;font:12px/1.5 ui-monospace,monospace;padding:26px}
+h1{font-weight:400;letter-spacing:.22em;text-transform:uppercase;font-size:13px;color:#d9b48a}
+.row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:16px}
+figure{margin:0;background:#fff;overflow:hidden}img{width:100%;display:block}
+figcaption{padding:6px 8px;color:#e8e4d8;background:#111;font-size:11px}
+.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px}
+.notes{color:#999;background:#161210;padding:12px 16px;border-left:3px solid #d9b48a;margin:14px 0;max-width:960px}</style></head><body>
+<h1>One sun setting — plate Nº 217, five exposures</h1>
+<div class="notes">The trigger event is identical in every frame — a single millisecond, embalmed — while everything around it ages: the sun walks its setting diagonal and sinks, the chamber keeps running (history accumulates), the grain grows as the light dies, and the water remembers: the wave rows slowly bend around the submerged evidence. The sea never reacts in the instant; influence arrives only through time. The hand tracks the descent — ghost-rings where the sun was, altitude readings, and when the sun is gone, a guess.</div>
+<div class="row"><figure><img src="01_sun-above.svg"><figcaption>sun above · 19:04</figcaption></figure><figure><img src="02_sun-touching.svg"><figcaption>sun touching · 19:26</figcaption></figure><figure><img src="03_sun-half.svg"><figcaption>sun half · 19:47</figcaption></figure><figure><img src="04_sun-drowned.svg"><figcaption>sun drowned · 20:08</figcaption></figure><figure><img src="05_sun-gone.svg"><figcaption>sun gone · 20:31</figcaption></figure></div>
+<div class="grid"><figure><img src="01_sun-above.svg"><figcaption>sun above · 19:04</figcaption></figure><figure><img src="02_sun-touching.svg"><figcaption>sun touching · 19:26</figcaption></figure><figure><img src="03_sun-half.svg"><figcaption>sun half · 19:47</figcaption></figure><figure><img src="04_sun-drowned.svg"><figcaption>sun drowned · 20:08</figcaption></figure><figure><img src="05_sun-gone.svg"><figcaption>sun gone · 20:31</figcaption></figure></div>
+</body></html>

fable/REFINED_Backlit2/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>REFINED_Backlit2 · sun-above scale studies</title>
+<style>body{margin:0;background:#0b0b0b;color:#bbb;font:12px/1.5 ui-monospace,monospace;padding:26px}
+h1{font-weight:400;letter-spacing:.22em;text-transform:uppercase;font-size:13px;color:#d9b48a}
+.row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
+figure{margin:0;background:#fff;overflow:hidden}img{width:100%;display:block}
+figcaption{padding:6px 8px;color:#e8e4d8;background:#111;font-size:11px}</style></head><body>
+<h1>Sun-above — scale studies (colours &amp; composition held)</h1>
+<div class="row"><figure><img src="00_reference.svg"><figcaption>reference — baseline (traces 1.0 · rows 46 · overlap 1.9 · line ×1)</figcaption></figure><figure><img src="01_traces-bold.svg"><figcaption>traces-bold — evidence enlarged (bubble size 1.6, density 0.9)</figcaption></figure><figure><img src="02_traces-fine.svg"><figcaption>traces-fine — evidence miniaturised (size 0.62, density 1.3)</figcaption></figure><figure><img src="03_sea-broad.svg"><figcaption>sea-broad — few broad swells (rows 26)</figcaption></figure><figure><img src="04_sea-fine.svg"><figcaption>sea-fine — fine ripple (rows 78, line ×0.75)</figcaption></figure><figure><img src="05_sea-deep.svg"><figcaption>sea-deep — deep undulation (overlap 3.1)</figcaption></figure><figure><img src="06_sea-etched.svg"><figcaption>sea-etched — heavy wave line (line ×2.3)</figcaption></figure><figure><img src="07_giant-evidence.svg"><figcaption>giant-evidence — large ink over fine calm water (size 1.7 · rows 78 · line ×0.7 · overlap 1.6)</figcaption></figure><figure><img src="08_woodcut.svg"><figcaption>woodcut — small ink in a heavy carved sea (size 0.7 · rows 24 · line ×2.4 · overlap 2.6)</figcaption></figure></div>
+</body></html>

fable/REFINED_Backlit3/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>REFINED_Backlit3 · bold large-trace studies</title>
+<style>body{margin:0;background:#0b0b0b;color:#bbb;font:12px/1.5 ui-monospace,monospace;padding:26px}
+h1{font-weight:400;letter-spacing:.22em;text-transform:uppercase;font-size:13px;color:#d9b48a}
+.row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
+figure{margin:0;background:#fff;overflow:hidden}img{width:100%;display:block}
+figcaption{padding:6px 8px;color:#e8e4d8;background:#111;font-size:11px}</style></head><body>
+<h1>Sun-above — bold, large traces on top · waves varied · sun faded back</h1>
+<div class="row"><figure><img src="00_bold-base.svg"><figcaption>bold-base — large ink · sea baseline (rows 40 · overlap 2.2 · line ×1.35)</figcaption></figure><figure><img src="01_broad-swell.svg"><figcaption>broad-swell — few broad swells (rows 24 · overlap 2.6)</figcaption></figure><figure><img src="02_fine-ripple.svg"><figcaption>fine-ripple — dense fine ripple (rows 82 · line ×0.9)</figcaption></figure><figure><img src="03_deep-heave.svg"><figcaption>deep-heave — deep undulation (overlap 3.4)</figcaption></figure><figure><img src="04_etched-sea.svg"><figcaption>etched-sea — heavy carved wave line (line ×2.6)</figcaption></figure><figure><img src="05_glassy-calm.svg"><figcaption>glassy-calm — shallow glassy water (overlap 1.3 · rows 52)</figcaption></figure><figure><img src="06_turbulent.svg"><figcaption>turbulent — turbulent, blip-rich sea (chaos 1.0 · blips 2.2 · overlap 2.8)</figcaption></figure><figure><img src="07_woodcut.svg"><figcaption>woodcut — heavy carved swell (rows 26 · line ×2.8 · overlap 3.0)</figcaption></figure><figure><img src="08_giant-ink-calm.svg"><figcaption>giant-ink-calm — giant evidence over quiet fine water (size 1.9 · rows 78 · line ×0.8 · overlap 1.5)</figcaption></figure><figure><img src="09_max-bold.svg"><figcaption>max-bold — everything loud (size 1.8 · rows 32 · line ×2.4 · overlap 3.0 · chaos 0.95)</figcaption></figure></div>
+</body></html>

fable/REFINED_Backlit4/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>REFINED_Backlit4 · golden</title>
+<style>body{margin:0;background:#0b0b0b;color:#bbb;font:12px/1.5 ui-monospace,monospace;padding:26px}
+h1{font-weight:400;letter-spacing:.22em;text-transform:uppercase;font-size:13px;color:#d9b48a}
+.row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
+figure{margin:0;background:#fff;overflow:hidden}img{width:100%;display:block}
+figcaption{padding:6px 8px;color:#e8e4d8;background:#111;font-size:11px}</style></head><body>
+<h1>One sun setting — golden (1001×1620, φ)</h1>
+<div class="row"><figure><img src="00_golden.svg"><figcaption>00_golden</figcaption></figure><figure><img src="01_golden.svg"><figcaption>01_golden</figcaption></figure><figure><img src="02_golden.svg"><figcaption>02_golden</figcaption></figure><figure><img src="03_golden-mirror.svg"><figcaption>03_golden-mirror</figcaption></figure><figure><img src="04_golden-mirror.svg"><figcaption>04_golden-mirror</figcaption></figure><figure><img src="05_golden-mirror.svg"><figcaption>05_golden-mirror</figcaption></figure></div>
+</body></html>

fable/REFINED_Backlit5/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>REFINED_Backlit5 · golden · delicate bubbles</title>
+<style>body{margin:0;background:#0b0b0b;color:#bbb;font:12px/1.5 ui-monospace,monospace;padding:26px}
+h1{font-weight:400;letter-spacing:.22em;text-transform:uppercase;font-size:13px;color:#d9b48a}
+.row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
+figure{margin:0;background:#fff;overflow:hidden}img{width:100%;display:block}
+figcaption{padding:6px 8px;color:#e8e4d8;background:#111;font-size:11px}</style></head><body>
+<h1>One sun setting — golden (1001×1620, φ)</h1>
+<div class="row"><figure><img src="00_golden.svg"><figcaption>00_golden</figcaption></figure><figure><img src="01_golden.svg"><figcaption>01_golden</figcaption></figure><figure><img src="02_golden.svg"><figcaption>02_golden</figcaption></figure><figure><img src="03_golden-mirror.svg"><figcaption>03_golden-mirror</figcaption></figure><figure><img src="04_golden-mirror.svg"><figcaption>04_golden-mirror</figcaption></figure><figure><img src="05_golden-mirror.svg"><figcaption>05_golden-mirror</figcaption></figure></div>
+</body></html>

fable/REFINED_Backlit6/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>REFINED_Backlit6 · bubble-opacity sweep</title>
+<style>body{margin:0;background:#0b0b0b;color:#bbb;font:12px/1.5 ui-monospace,monospace;padding:26px}
+h1{font-weight:400;letter-spacing:.22em;text-transform:uppercase;font-size:13px;color:#d9b48a}
+.row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
+figure{margin:0;background:#fff;overflow:hidden}img{width:100%;display:block}
+figcaption{padding:6px 8px;color:#e8e4d8;background:#111;font-size:11px}</style></head><body>
+<h1>One sun setting — bubble-opacity sweep 20→80% (1001×1620, φ)</h1>
+<div class="row"><figure><img src="op-20.svg"><figcaption>op-20</figcaption></figure><figure><img src="op-32.svg"><figcaption>op-32</figcaption></figure><figure><img src="op-44.svg"><figcaption>op-44</figcaption></figure><figure><img src="op-56.svg"><figcaption>op-56</figcaption></figure><figure><img src="op-68.svg"><figcaption>op-68</figcaption></figure><figure><img src="op-80.svg"><figcaption>op-80</figcaption></figure></div>
+</body></html>

fable/REFINED_Backlit7/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>REFINED_Backlit6 · bubble-opacity sweep</title>
+<style>body{margin:0;background:#0b0b0b;color:#bbb;font:12px/1.5 ui-monospace,monospace;padding:26px}
+h1{font-weight:400;letter-spacing:.22em;text-transform:uppercase;font-size:13px;color:#d9b48a}
+.row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
+figure{margin:0;background:#fff;overflow:hidden}img{width:100%;display:block}
+figcaption{padding:6px 8px;color:#e8e4d8;background:#111;font-size:11px}</style></head><body>
+<h1>One sun setting — merge · uniform-lace target sweep (1854×3000, φ)</h1>
+<div class="row"><figure><img src="merge-35.svg"><figcaption>merge-35</figcaption></figure><figure><img src="merge-45.svg"><figcaption>merge-45</figcaption></figure><figure><img src="merge-55.svg"><figcaption>merge-55</figcaption></figure><figure><img src="merge-65.svg"><figcaption>merge-65</figcaption></figure><figure><img src="merge-75.svg"><figcaption>merge-75</figcaption></figure><figure><img src="merge-85.svg"><figcaption>merge-85</figcaption></figure></div>
+</body></html>