Lichen — Carbon Stories

  
    
<head><meta charset=&quot;utf-8&quot;><meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no&quot;><style>html,body{margin:0;height:100%;background:transparent;overflow:hidden}#lichen-variations,#lichen-variations .ls-stage{height:100%!important;max-height:none!important;min-height:0!important;aspect-ratio:auto!important;border-radius:0!important}</style></head><body>
<!-- ====================================================================
     Lichen — Compartment Studio  ·  Squarespace embed
     Paste this entire block into a Squarespace CODE BLOCK.
     The canvas is transparent and all styles are scoped to #lichen-variations,
     so your site's background and fonts are left untouched.
     ==================================================================== -->
<div class=&quot;lichen-embed&quot; id=&quot;lichen-variations&quot;>
<div class=&quot;ls-stage&quot; id=&quot;ls-stage&quot;>
<div class=&quot;plate&quot;>
  <p class=&quot;eyebrow&quot;>CMPT × Karimoku · a study</p>
  <h1>Lichen</h1>
  <p class=&quot;sub&quot;>Compartment Studio — Three Layouts</p>
  <p>One kit of birch parts, three ways to live in the same footprint. Drag to orbit all three.</p>
  <div class=&quot;blade&quot;></div>
</div>
<div class=&quot;legend&quot;>
  <div class=&quot;li&quot;><span class=&quot;num&quot;>01</span><div><b>Open Plan</b>  <span>— sofa, Frame TV, coffee table. Bed stowed. Airy lounge.</span></div></div>
  <div class=&quot;li&quot;><span class=&quot;num&quot;>02</span><div><b>Live / Work</b>  <span>— desk, Apple-Box shelving, bed folded down for sleep.</span></div></div>
  <div class=&quot;li&quot;><span class=&quot;num&quot;>03</span><div><b>Host</b>  <span>— galley kitchen, dining table + stools for guests.</span></div></div>
</div>
<div class=&quot;ctrl&quot;>
  <button class=&quot;vbtn&quot; id=&quot;spin&quot;>Auto-orbit</button>
  <button class=&quot;vbtn&quot; id=&quot;reset&quot;>Reset view</button>
</div>
<div class=&quot;ls-load&quot; id=&quot;load&quot;>Lichen</div>
</div><!-- /ls-stage -->
</div><!-- /lichen-variations -->

<style>
  #lichen-variations{--paper:#f3f1ea;--ink:#15150f;--ink2:#4a4a40;--moss:#737a58;
    font-family:&quot;Helvetica Neue&quot;,Arial,sans-serif;color:var(--ink);max-width:100%;margin:0 auto}
  #lichen-variations *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  #lichen-variations .ls-stage{position:relative;width:100%;aspect-ratio:16/9;min-height:420px;max-height:80vh;overflow:hidden;border-radius:6px}
  #lichen-variations canvas{display:block;touch-action:none;position:absolute;inset:0;width:100%!important;height:100%!important}
  #lichen-variations .plate{position:absolute;top:14px;left:14px;z-index:5;background:var(--paper);border:1px solid var(--ink);border-radius:4px;padding:12px 15px 13px;box-shadow:0 8px 26px rgba(0,0,0,.28);max-width:min(82%,360px)}
  #lichen-variations .plate .eyebrow{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--moss);font-weight:700;margin:0 0 4px}
  #lichen-variations .plate h1{margin:0;font-size:26px;line-height:.95;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
  #lichen-variations .plate .sub{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin:4px 0 0}
  #lichen-variations .plate p{margin:7px 0 0;font-size:11px;line-height:1.5;color:var(--ink2)}
  #lichen-variations .blade{height:1px;width:100%;margin:10px 0 0;background:var(--ink);position:relative}
  #lichen-variations .blade::after{content:&quot;&quot;;position:absolute;left:0;top:-2px;width:5px;height:5px;background:var(--moss)}
  #lichen-variations .legend{position:absolute;left:14px;bottom:14px;z-index:5;background:var(--paper);border:1px solid var(--ink);border-radius:4px;padding:10px 13px;box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:min(92%,420px)}
  #lichen-variations .legend .li{display:flex;gap:9px;align-items:baseline;margin:5px 0;font-size:11px}
  #lichen-variations .legend .num{font-weight:800;letter-spacing:.04em;color:var(--moss)}
  #lichen-variations .legend b{text-transform:uppercase;letter-spacing:.06em;font-size:10.5px}
  #lichen-variations .legend span{color:var(--ink2)}
  #lichen-variations .ctrl{position:absolute;right:14px;bottom:14px;z-index:5;display:flex;gap:7px}
  #lichen-variations .vbtn{appearance:none;cursor:pointer;background:var(--paper);color:var(--ink);border:1px solid var(--ink);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:8px 11px;border-radius:3px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
  #lichen-variations .vbtn:hover,#lichen-variations .vbtn[data-on=&quot;true&quot;]{background:var(--ink);color:var(--paper)}
  #lichen-variations .ls-load{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;background:#16160f;color:#efe9da;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
  @media (max-width:640px){#lichen-variations .plate p{display:none}}
</style>

<script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js&quot;></script>
<script>
(function(){
  &quot;use strict&quot;;
  const ROOT=document.getElementById(&quot;lichen-variations&quot;);
  const byId=(id)=>ROOT.querySelector(&quot;#&quot;+id);
  const QA=(sel)=>ROOT.querySelectorAll(sel);
  if(!window.THREE){byId('load').textContent='Could not load 3D engine.';return;}
  const REDUCED=window.matchMedia&amp;&amp;window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  const app=byId('ls-stage');
  const scene=new THREE.Scene();
  scene.background=null;
  scene.fog=null;
  const camera=new THREE.PerspectiveCamera(42,16/9,0.1,300);
  const renderer=new THREE.WebGLRenderer({antialias:true,alpha:true});
  renderer.setPixelRatio(Math.min(devicePixelRatio,2));
  renderer.shadowMap.enabled=true;renderer.shadowMap.type=THREE.PCFSoftShadowMap;renderer.outputEncoding=THREE.sRGBEncoding;renderer.toneMapping=THREE.ACESFilmicToneMapping;renderer.toneMappingExposure=1.0;
  app.appendChild(renderer.domElement);renderer.setClearColor(0x000000,0);
  function sizeStage(){const w=app.clientWidth||1,h=app.clientHeight||1;camera.aspect=w/h;camera.updateProjectionMatrix();renderer.setSize(w,h,false);}
  sizeStage();if(window.ResizeObserver){try{new ResizeObserver(sizeStage).observe(app);}catch(e){}}

  // ambient-forward light
  scene.add(new THREE.HemisphereLight(0xfff6e8,0x9c8a6e,0.5));
  scene.add(new THREE.AmbientLight(0xfff4e6,0.3));
  const sun=new THREE.DirectionalLight(0xfff1dc,0.45);sun.position.set(8,9,7);sun.castShadow=true;
  sun.shadow.mapSize.set(2048,2048);sun.shadow.camera.near=1;sun.shadow.camera.far=44;
  sun.shadow.camera.left=-14;sun.shadow.camera.right=14;sun.shadow.camera.top=10;sun.shadow.camera.bottom=-10;sun.shadow.bias=-0.0004;sun.shadow.radius=3;scene.add(sun);
  const fill=new THREE.DirectionalLight(0xe2e8ee,0.28);fill.position.set(-7,6,8);scene.add(fill);

  // helpers
  function mat(c,r,m){return new THREE.MeshStandardMaterial({color:c,roughness:r==null?0.8:r,metalness:m==null?0.02:m});}
  function box(w,h,d,material){const x=new THREE.Mesh(new THREE.BoxGeometry(w,h,d),material);x.castShadow=true;x.receiveShadow=true;return x;}
  function put(o,x,y,z){o.position.set(x,y,z);return o;}
  function woodTex(rep,base){const c=document.createElement('canvas');c.width=256;c.height=256;const x=c.getContext('2d');
    x.fillStyle=base;x.fillRect(0,0,256,256);
    for(let i=0;i<55;i++){const yy=Math.random()*256;x.strokeStyle='rgba(150,120,70,'+(0.04+Math.random()*0.07)+')';x.lineWidth=0.5+Math.random()*1.2;x.beginPath();x.moveTo(0,yy);for(let xx=0;xx<=256;xx+=18)x.lineTo(xx,yy+(Math.random()-0.5)*4);x.stroke();}
    const t=new THREE.CanvasTexture(c);t.wrapS=t.wrapT=THREE.RepeatWrapping;t.repeat.set(rep[0],rep[1]);t.anisotropy=8;t.encoding=THREE.sRGBEncoding;return t;}
  const floorMap=woodTex([3,3],'#dcc59c'),birchMap=woodTex([1,1],'#e7d4ac');
  function birch(){return new THREE.MeshStandardMaterial({map:birchMap,roughness:0.6});}
  const lea=mat(0xb98a56,0.5,0.05);
  const plaster=mat(0xf2ece0,0.96,0);

  // frame TV art (shared)
  const artTex=(function(){const c=document.createElement('canvas');c.width=320;c.height=200;const x=c.getContext('2d');
    const g=x.createLinearGradient(0,0,0,200);g.addColorStop(0,'#d6dcd6');g.addColorStop(1,'#efe7d6');x.fillStyle=g;x.fillRect(0,0,320,200);
    x.fillStyle='rgba(245,220,150,0.5)';x.beginPath();x.arc(232,68,24,0,7);x.fill();
    x.fillStyle='#8a9b7e';x.beginPath();x.moveTo(0,150);x.lineTo(95,118);x.lineTo(170,150);x.lineTo(255,124);x.lineTo(320,150);x.lineTo(320,200);x.lineTo(0,200);x.closePath();x.fill();
    const t=new THREE.CanvasTexture(c);t.encoding=THREE.sRGBEncoding;return t;})();

  const skyMap=(function(){const c=document.createElement('canvas');c.width=256;c.height=256;const x=c.getContext('2d');
    const g=x.createLinearGradient(0,0,0,256);g.addColorStop(0,'#cfe0ea');g.addColorStop(0.55,'#e9eef0');g.addColorStop(1,'#eef0e6');x.fillStyle=g;x.fillRect(0,0,256,256);
    x.fillStyle='rgba(120,150,110,0.55)';x.beginPath();x.moveTo(0,205);x.lineTo(70,170);x.lineTo(140,200);x.lineTo(210,168);x.lineTo(256,196);x.lineTo(256,256);x.lineTo(0,256);x.closePath();x.fill();
    const t=new THREE.CanvasTexture(c);t.encoding=THREE.sRGBEncoding;return t;})();

  // ---- kit ----
  const RW=4.3,RD=4.3,RH=2.7,rhw=RW/2,rhd=RD/2;
  function shell(g){
    const fl=new THREE.Mesh(new THREE.PlaneGeometry(RW,RD),new THREE.MeshStandardMaterial({map:floorMap,roughness:0.55}));
    fl.rotation.x=-Math.PI/2;fl.receiveShadow=true;g.add(fl);
    // solid birch back wall + plank seams
    const bw=new THREE.Mesh(new THREE.PlaneGeometry(RW,RH),birch());put(bw,0,RH/2,-rhd+0.01);bw.receiveShadow=true;g.add(bw);
    for(let i=1;i<5;i++)g.add(put(box(RW,0.01,0.006,mat(0x8a6e44,0.7,0)),0,i*RH/5,-rhd+0.02));
    // solid birch left wall
    const lwl=new THREE.Mesh(new THREE.PlaneGeometry(RD,RH),birch());lwl.rotation.y=Math.PI/2;put(lwl,-rhw,RH/2,0);lwl.receiveShadow=true;g.add(lwl);
    // solid birch front wall (completes all 4 corners)
    const fwl=new THREE.Mesh(new THREE.PlaneGeometry(RW,RH),birch());fwl.rotation.y=Math.PI;put(fwl,0,RH/2,rhd-0.01);fwl.receiveShadow=true;g.add(fwl);
    // right wall: solid birch with a real window opening
    (function(){const ch=birch();const oz0=-0.7,oz1=0.5,oy0=0.7,oy1=2.0,cz=(oz0+oz1)/2,cy=(oy0+oy1)/2;
      function seg(wz,hy,zc,yc){const m=new THREE.Mesh(new THREE.PlaneGeometry(wz,hy),ch);m.rotation.y=-Math.PI/2;m.receiveShadow=true;put(m,rhw-0.005,yc,zc);g.add(m);}
      seg(RD,oy0,0,oy0/2);
      seg(RD,RH-oy1,0,(oy1+RH)/2);
      seg(oz0+rhd,oy1-oy0,(-rhd+oz0)/2,cy);
      seg(rhd-oz1,oy1-oy0,(oz1+rhd)/2,cy);
      const out=new THREE.Mesh(new THREE.PlaneGeometry(1.5,1.6),new THREE.MeshStandardMaterial({map:skyMap,emissive:0xffffff,emissiveMap:skyMap,emissiveIntensity:0.5,roughness:1}));
      out.rotation.y=-Math.PI/2;put(out,rhw+0.28,cy,cz);g.add(out);
      const glass=new THREE.Mesh(new THREE.PlaneGeometry(oz1-oz0,oy1-oy0),new THREE.MeshStandardMaterial({color:0xdfeaee,roughness:0.05,metalness:0.1,transparent:true,opacity:0.16}));
      glass.rotation.y=-Math.PI/2;put(glass,rhw-0.06,cy,cz);g.add(glass);
      g.add(put(box(0.1,oy1-oy0+0.16,0.1,ch),rhw-0.06,cy,oz0));
      g.add(put(box(0.1,oy1-oy0+0.16,0.1,ch),rhw-0.06,cy,oz1));
      g.add(put(box(0.16,0.1,oz1-oz0,ch),rhw-0.09,oy1,cz));
      g.add(put(box(0.2,0.08,oz1-oz0+0.1,ch),rhw-0.13,oy0,cz));
      g.add(put(box(0.05,oy1-oy0,0.05,ch),rhw-0.07,cy,cz));
      g.add(put(box(0.05,0.05,oz1-oz0,ch),rhw-0.07,cy,cz));
    })();
  }
  function appleBox(s){const g=new THREE.Group(),ch=birch();g.add(put(box(s,s,s,ch),0,0,0));
    const peg=mat(0xc2a063,0.6,0.05),e=s/2-0.03;[[-e,-e],[e,-e],[-e,e],[e,e]].forEach(p=>{const d=new THREE.Mesh(new THREE.CylinderGeometry(0.018,0.018,0.05,10),peg);d.rotation.x=Math.PI/2;put(d,p[0],p[1],s/2+0.005);g.add(d);});
    g.add(put(new THREE.Mesh(new THREE.CircleGeometry(s*0.13,18),mat(0x6a4f2e,0.9,0)),0,s*0.18,s/2+0.002));return g;}
  function addBox(parent,s,x,y,z,ry){const b=appleBox(s);put(b,x,y,z);if(ry)b.rotation.y=ry;parent.add(b);return b;}
  function camelSofa(){const g=new THREE.Group(),ch=birch();
    g.add(put(box(1.9,0.10,0.82,ch),0,0.14,0));
    g.add(put(box(1.82,0.22,0.78,lea),0,0.33,0.02));
    g.add(put(box(1.82,0.42,0.18,lea),0,0.55,-0.32));
    g.add(put(box(0.16,0.34,0.78,lea),-0.91,0.41,0.02));
    g.add(put(box(0.16,0.34,0.78,lea),0.91,0.41,0.02));
    [-0.47,0.47].forEach(x=>g.add(put(box(0.86,0.2,0.76,mat(0xc1925e,0.55,0)),x,0.34,0.02)));return g;}
  function bench(w){const g=new THREE.Group(),ch=birch();g.add(put(box(w,0.1,0.5,ch),0,0.24,0));g.add(put(box(w,0.18,0.5,lea),0,0.37,0));g.add(put(box(w,0.34,0.14,lea),0,0.52,-0.18));return g;}
  function frameTV(){const g=new THREE.Group(),fr=birch(),Wt=0.95,Ht=0.56;
    const art=new THREE.Mesh(new THREE.PlaneGeometry(Wt-0.08,Ht-0.08),new THREE.MeshStandardMaterial({map:artTex,roughness:0.95,emissive:0xffffff,emissiveMap:artTex,emissiveIntensity:0.14}));
    put(art,0,0,0.035);g.add(art);g.add(put(box(Wt-0.06,Ht-0.06,0.03,mat(0x1c1c1e,0.6,0)),0,0,0.01));
    const tk=0.05;g.add(put(box(Wt,tk,0.06,fr),0,Ht/2,0.02));g.add(put(box(Wt,tk,0.06,fr),0,-Ht/2,0.02));
    g.add(put(box(tk,Ht,0.06,fr),-Wt/2,0,0.02));g.add(put(box(tk,Ht,0.06,fr),Wt/2,0,0.02));return g;}
  function pendant(g,x,z,low){const ch=low?1.45:1.95;g.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.005,0.005,RH-ch,6),mat(0x222,0.8,0)),x,RH-(RH-ch)/2,z));
    const sh=new THREE.Mesh(new THREE.SphereGeometry(0.22,18,18),new THREE.MeshStandardMaterial({color:0xf3ecdc,roughness:0.9,emissive:0xffe6bf,emissiveIntensity:0.18}));sh.scale.set(1,0.9,1);put(sh,x,ch-0.1,z);g.add(sh);}
  function plant(g,x,z){const ch=birch();g.add(put(box(0.22,0.34,0.22,ch),x,0.17,z));const tr=put(new THREE.Mesh(new THREE.CylinderGeometry(0.025,0.035,0.4,8),mat(0x7a5a36,0.8,0)),x,0.5,z);g.add(tr);
    [[0,0.78,0,0.22],[0.14,0.7,0.06,0.16],[-0.12,0.72,-0.05,0.17]].forEach(o=>{const f=new THREE.Mesh(new THREE.SphereGeometry(o[3],10,10),mat(0x6f8a52,0.9,0));f.scale.set(1,1.2,1);put(f,x+o[0],o[1],z+o[2]);g.add(f);});}
  function bonsai(g,x,y,z,s){const grp=new THREE.Group();
    grp.add(put(box(0.28,0.08,0.18,mat(0x6b513a,0.8,0)),0,0.04,0));
    grp.add(put(box(0.23,0.03,0.14,mat(0x33271b,0.95,0)),0,0.085,0));
    const tr=put(new THREE.Mesh(new THREE.CylinderGeometry(0.013,0.024,0.2,8),mat(0x6f4a2a,0.85,0)),0.01,0.19,0);tr.rotation.z=0.16;grp.add(tr);
    const br=put(new THREE.Mesh(new THREE.CylinderGeometry(0.008,0.013,0.13,6),mat(0x6f4a2a,0.85,0)),0.07,0.27,0.02);br.rotation.z=-0.7;grp.add(br);
    [[0,0.32,0,0.12],[0.11,0.29,0.03,0.085],[-0.08,0.30,-0.03,0.09],[0.13,0.33,-0.02,0.075]].forEach(o=>{const f=new THREE.Mesh(new THREE.SphereGeometry(o[3],10,10),mat(0x5f7d46,0.9,0));f.scale.set(1.35,0.6,1.35);put(f,o[0],o[1],o[2]);grp.add(f);});
    grp.position.set(x,y,z);if(s)grp.scale.setScalar(s);g.add(grp);}
  function rug(g,x,z){const r=new THREE.Mesh(new THREE.CircleGeometry(1.2,36),mat(0xdbd1bc,1,0));r.rotation.x=-Math.PI/2;r.position.set(x,0.012,z);r.receiveShadow=true;g.add(r);}
  function murphyClosed(g,x){const ch=birch(),nW=1.5,nH=2.2,dep=0.3,z0=-rhd+dep/2;
    g.add(put(box(nW+0.1,nH,0.05,ch),x,nH/2,-rhd+0.05));
    g.add(put(box(0.08,nH,dep,ch),x-(nW/2+0.05),nH/2,z0));g.add(put(box(0.08,nH,dep,ch),x+(nW/2+0.05),nH/2,z0));
    g.add(put(box(nW+0.1,0.08,dep,ch),x,nH+0.04,z0));}
  function murphyOpen(g,x){const ch=birch(),bW=1.4,bL=1.9;
    g.add(put(box(bW+0.1,0.16,bL,ch),x,0.18,-rhd+0.2+bL/2));
    g.add(put(box(bW,0.16,bL-0.06,mat(0xeae1cf,0.95,0)),x,0.32,-rhd+0.2+bL/2));
    g.add(put(box(0.5,0.12,0.3,mat(0xf3ece0,0.95,0)),x-0.32,0.42,-rhd+0.45));
    g.add(put(box(0.5,0.12,0.3,mat(0xf3ece0,0.95,0)),x+0.32,0.42,-rhd+0.45));
    g.add(put(box(bW-0.05,0.07,0.4,mat(0xA1D7D9,0.95,0)),x,0.42,-rhd+1.4));
    // headboard panel on wall
    g.add(put(box(bW+0.1,1.0,0.05,ch),x,0.5,-rhd+0.06));}
  function deskUnit(g){const ch=birch();
    g.add(put(box(0.05,1.4,1.1,ch),-rhw+0.04,1.0,0.2));               // wall panel
    g.add(put(box(0.55,0.05,1.1,ch),-rhw+0.34,0.76,0.2));             // worktop
    g.add(put(box(0.4,0.04,0.9,birch()),-rhw+0.3,1.5,0.2));       // shelf
    g.add(put(box(0.34,0.02,0.24,mat(0x2b2b2e,0.5,0.2)),-rhw+0.4,0.79,0.2));
    const sc=put(box(0.32,0.2,0.012,mat(0x111,0.4,0.2)),-rhw+0.4,0.92,0.1);sc.rotation.y=Math.PI/2;g.add(sc);
    addBox(g,0.42,-rhw+0.7,0.21,0.2,0);}                              // stool
  function kitchenStrip(g){const ch=birch(),stone=mat(0xe9e6df,0.5,0.05),drk=mat(0x2b2722,0.6,0.1);
    const cx=-rhw+0.3;g.add(put(box(0.56,0.82,3.0,ch),cx,0.41,0));
    g.add(put(box(0.6,0.06,3.04,stone),cx,0.87,0));
    g.add(put(box(0.4,0.55,2.2,ch),cx-0.06,1.9,0));                   // uppers
    g.add(put(box(0.42,0.02,0.42,drk),cx+0.02,0.905,0.5));           // cooktop
    g.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.12,0.1,0.13,18),mat(0x2a2a2d,0.4,0.5)),cx+0.02,0.98,0.5)); // pot
    g.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.06,0.07,0.13,18),mat(0x2b2b2e,0.4,0.4)),cx+0.04,0.95,-0.8)); // kettle
    g.add(put(box(0.6,2.2,0.62,ch),cx,1.1,-1.15));}                   // fridge column
  function diningSet(g){const ch=birch(),cx=0.2,cz=0.1,th=0.74;
    g.add(put(box(1.5,0.05,0.7,ch),cx,th,cz));
    [[-0.6,-0.25],[0.6,-0.25],[-0.6,0.25],[0.6,0.25]].forEach(p=>g.add(put(box(0.07,th,0.07,ch),cx+p[0],th/2,cz+p[1])));
    [[-0.95,0],[0.95,0]].forEach(p=>addBox(g,0.42,cx+p[0],0.21,cz+p[1],0));
    [[0,-0.62],[0,0.62]].forEach(p=>addBox(g,0.42,cx+p[0],0.21,cz+p[1],Math.PI/2));
    [[-0.4,0],[0.4,0]].forEach(p=>g.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.12,0.11,0.02,18),mat(0xf3efe6,0.5,0)),cx+p[0],th+0.05,cz+p[1])));
    const v=put(new THREE.Mesh(new THREE.CylinderGeometry(0.05,0.04,0.16,14),new THREE.MeshStandardMaterial({color:0xcfe2e6,roughness:0.1,transparent:true,opacity:0.5})),cx,th+0.12,cz);g.add(v);
    [0xDF5842,0xFBD059,0xBFE1BF].forEach((c,i)=>{const f=new THREE.Mesh(new THREE.SphereGeometry(0.03,8,8),mat(c,0.7,0));put(f,cx+(i-1)*0.04,th+0.24,cz);g.add(f);});}

  // ---- build the three dioramas ----
  const OFF=5.2;
  const labels=[];
  function billboard(text,x){const c=document.createElement('canvas');c.width=512;c.height=160;const x2=c.getContext('2d');
    x2.fillStyle='#f3f1ea';x2.fillRect(0,0,512,160);x2.strokeStyle='#15150f';x2.lineWidth=4;x2.strokeRect(2,2,508,156);
    x2.fillStyle='#737a58';x2.font='800 88px Helvetica,Arial';x2.fillText(text.num,26,118);
    x2.fillStyle='#15150f';x2.font='700 40px Helvetica,Arial';x2.fillText(text.name.toUpperCase(),150,102);
    const t=new THREE.CanvasTexture(c);t.encoding=THREE.sRGBEncoding;
    const m=new THREE.Mesh(new THREE.PlaneGeometry(2.0,0.625),new THREE.MeshBasicMaterial({map:t,transparent:true}));
    put(m,x,3.25,0.6);scene.add(m);labels.push(m);}

  // 01 OPEN PLAN
  (function(){const g=new THREE.Group();g.position.x=-OFF;scene.add(g);shell(g);
    murphyClosed(g,-1.35);
    const tv=frameTV();put(tv,0.45,1.4,-rhd+0.07);g.add(tv);
    const sofa=camelSofa();sofa.rotation.y=Math.PI;put(sofa,0.45,0,0.75);g.add(sofa); // faces -z (TV)
    rug(g,0.45,0.1);
    // coffee table
    const ct=new THREE.Group(),ch=birch();ct.add(put(box(1.0,0.05,0.5,new THREE.MeshStandardMaterial({color:0xcfe0e2,roughness:0.1,metalness:0.1,transparent:true,opacity:0.45})),0,0.4,0));
    [[-0.42,-0.18],[0.42,-0.18],[-0.42,0.18],[0.42,0.18]].forEach(p=>ct.add(put(box(0.06,0.4,0.06,ch),p[0],0.2,p[1])));put(ct,0.45,0,0.05);g.add(ct);
    addBox(g,0.34,0.45-0.6,0.17,0.05,0);
    plant(g,-rhw+0.5,rhd-0.6);pendant(g,0.45,0.4,false);
    bonsai(g,0.45,0.43,0.05,0.85);          // on the coffee table
    bonsai(g,rhw-0.2,0.74,-0.1,0.8);        // on the windowsill
    billboard({num:'01',name:'Open Plan'},-OFF);})();

  // 02 LIVE / WORK
  (function(){const g=new THREE.Group();g.position.x=0;scene.add(g);shell(g);
    murphyOpen(g,-0.7);
    deskUnit(g);
    // apple-box shelving stack on back-right
    for(let i=0;i<4;i++)addBox(g,0.44,rhw-0.5,0.22+i*0.44,-rhd+0.55,0);
    addBox(g,0.36,rhw-0.95,0.18,-rhd+0.5,0);
    // small bench facing +z near front-right
    const b=bench(1.3);put(b,0.9,0,1.2);g.add(b);
    rug(g,0.6,1.0);
    plant(g,-rhw+0.55,rhd-0.6);pendant(g,-rhw+0.6,1.4,false);
    bonsai(g,-rhw+0.3,1.53,0.2,0.8);        // on the desk shelf
    bonsai(g,rhw-0.2,0.74,-0.1,0.78);       // windowsill
    billboard({num:'02',name:'Live / Work'},0);})();

  // 03 HOST
  (function(){const g=new THREE.Group();g.position.x=OFF;scene.add(g);shell(g);
    kitchenStrip(g);
    murphyClosed(g,1.4);
    diningSet(g);
    // bench along back wall
    const b=bench(1.4);b.rotation.y=Math.PI;put(b,0.4,0,-rhd+0.45);g.add(b);
    // storage stack
    for(let i=0;i<2;i++)addBox(g,0.44,rhw-0.5,0.22+i*0.44,1.4,0);
    pendant(g,0.2,0.1,true);plant(g,-rhw+0.55,rhd-0.6);
    bonsai(g,0.55,0.79,0.1,0.78);           // on the dining table
    bonsai(g,rhw-0.2,0.74,-0.1,0.78);       // windowsill
    billboard({num:'03',name:'Host'},OFF);})();

  // ---- orbit ----
  const target=new THREE.Vector3(0,0.5,-0.1);
  const HOME={r:18,theta:Math.PI*0.12,phi:0.6};
  const sph={r:HOME.r,theta:HOME.theta,phi:HOME.phi};
  const lim={rMin:6,rMax:32,phiMin:0.22,phiMax:1.2};
  function applyCam(){const sp=Math.sin(sph.phi);camera.position.set(target.x+sph.r*sp*Math.sin(sph.theta),target.y+sph.r*Math.cos(sph.phi),target.z+sph.r*sp*Math.cos(sph.theta));camera.lookAt(target);}
  applyCam();
  const ptrs=new Map();let mode=null,last=null,pinch0=0;const el=renderer.domElement;
  function killSpin(){autoSpin=false;byId('spin').setAttribute('data-on','false');}
  el.addEventListener('pointerdown',e=>{el.setPointerCapture(e.pointerId);ptrs.set(e.pointerId,{x:e.clientX,y:e.clientY});killSpin();if(ptrs.size===2){mode='pinch';const p=[...ptrs.values()];pinch0=Math.hypot(p[0].x-p[1].x,p[0].y-p[1].y);}else{mode=(e.shiftKey||e.button===2||e.button===1)?'pan':'orbit';last={x:e.clientX,y:e.clientY};}});
  el.addEventListener('pointermove',e=>{if(!ptrs.has(e.pointerId))return;ptrs.set(e.pointerId,{x:e.clientX,y:e.clientY});
    if(mode==='pinch'&amp;&amp;ptrs.size>=2){const p=[...ptrs.values()];const d=Math.hypot(p[0].x-p[1].x,p[0].y-p[1].y);sph.r*=pinch0/(d||1);sph.r=Math.max(lim.rMin,Math.min(lim.rMax,sph.r));pinch0=d;applyCam();return;}
    if(!last)return;const dx=e.clientX-last.x,dy=e.clientY-last.y;last={x:e.clientX,y:e.clientY};
    if(mode==='orbit'){sph.theta-=dx*0.005;sph.phi-=dy*0.005;sph.phi=Math.max(lim.phiMin,Math.min(lim.phiMax,sph.phi));applyCam();}
    else{const right=new THREE.Vector3(),up=new THREE.Vector3(0,1,0),fwd=new THREE.Vector3();camera.getWorldDirection(fwd);right.crossVectors(fwd,up).normalize();const upp=new THREE.Vector3().crossVectors(right,fwd).normalize();const k=sph.r*0.0012;target.addScaledVector(right,-dx*k);target.addScaledVector(upp,dy*k);applyCam();}});
  function pend2(e){ptrs.delete(e.pointerId);if(ptrs.size===0){mode=null;last=null;}else if(ptrs.size===1){mode='orbit';last=[...ptrs.values()][0];}}
  el.addEventListener('pointerup',pend2);el.addEventListener('pointercancel',pend2);
  el.addEventListener('contextmenu',e=>e.preventDefault());
  el.addEventListener('wheel',e=>{e.preventDefault();killSpin();sph.r*=1+(e.deltaY*0.0011);sph.r=Math.max(lim.rMin,Math.min(lim.rMax,sph.r));applyCam();},{passive:false});

  let autoSpin=false;
  byId('spin').onclick=function(){autoSpin=!autoSpin;this.setAttribute('data-on',autoSpin?'true':'false');};
  byId('reset').onclick=function(){killSpin();target.set(0,1.0,-0.2);sph.r=HOME.r;sph.theta=HOME.theta;sph.phi=HOME.phi;applyCam();};

  function frame(){requestAnimationFrame(frame);
    if(autoSpin&amp;&amp;!REDUCED){sph.theta+=0.0016;applyCam();}
    labels.forEach(m=>m.quaternion.copy(camera.quaternion));
    renderer.render(scene,camera);}
  requestAnimationFrame(frame);
  addEventListener('resize',sizeStage);
  setTimeout(()=>{const l=byId('load');l.style.transition='opacity .5s';l.style.opacity=0;setTimeout(()=>l.remove(),520);},300);
})();
</script>

</body></html>">
  