  
    
<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-studio,#lichen-studio .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-studio,
     so your site's background and fonts are left untouched.
     ==================================================================== -->
<div class=&quot;lichen-embed&quot; id=&quot;lichen-studio&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</p>
  <p>An all-birch convertible residency. Pick a time of day, or move the pieces yourself.</p>
  <div class=&quot;blade&quot;></div>
</div>
<div class=&quot;scenes&quot; id=&quot;sceneDial&quot;>
  <button class=&quot;scene&quot; data-scene=&quot;morning&quot;><span class=&quot;ic&quot;>☕</span><b>Morning</b><span>7am</span></button>
  <button class=&quot;scene&quot; data-scene=&quot;work&quot;><span class=&quot;ic&quot;>⌘</span><b>Work</b><span>11am</span></button>
  <button class=&quot;scene&quot; data-scene=&quot;dinner&quot;><span class=&quot;ic&quot;>🍷</span><b>Dinner</b><span>7pm</span></button>
  <button class=&quot;scene&quot; data-scene=&quot;night&quot;><span class=&quot;ic&quot;>☾</span><b>Night</b><span>11pm</span></button>
</div>
<div class=&quot;panel&quot;>
  <div class=&quot;lbl&quot;>Move what's out</div>
  <div class=&quot;row&quot;>
    <button class=&quot;vbtn&quot; id=&quot;bed&quot;>Bed</button>
    <button class=&quot;vbtn&quot; id=&quot;desk&quot;>Work desk</button>
    <button class=&quot;vbtn&quot; id=&quot;dine&quot;>Dining table</button>
    <button class=&quot;vbtn&quot; id=&quot;holo&quot;>Vision workstation</button>
  </div>
  <div class=&quot;lbl&quot;>Layout</div>
  <div class=&quot;row&quot;>
    <button class=&quot;vbtn&quot; id=&quot;edit&quot;>Edit layout</button>
    <button class=&quot;vbtn&quot; id=&quot;rotate&quot;>Rotate 45°</button>
    <button class=&quot;vbtn&quot; id=&quot;resetlayout&quot;>Reset</button>
  </div>
  <div class=&quot;lbl&quot;>Camera</div>
  <div class=&quot;row&quot;>
    <button class=&quot;vbtn&quot; id=&quot;dollhouse&quot;>Dollhouse</button>
    <button class=&quot;vbtn&quot; id=&quot;spin&quot;>Auto-orbit</button>
    <button class=&quot;vbtn&quot; id=&quot;reset&quot;>Reset</button>
  </div>
</div>
<div class=&quot;hint&quot;>Drag · orbit  ·  Scroll · zoom  ·  Shift-drag · pan</div>
<div class=&quot;ls-load&quot; id=&quot;load&quot;>Lichen<span class=&quot;b&quot;><i></i></span></div>
</div><!-- /ls-stage -->
</div><!-- /lichen-studio -->

<style>
  #lichen-studio{--paper:#f3f1ea;--ink:#15150f;--ink2:#4a4a40;--moss:#737a58;--charcoal:#15150f;--charcoal2:#4a4a40;--red:#15150f;--gold:#737a58;
    font-family:&quot;Roboto&quot;,&quot;Helvetica Neue&quot;,Arial,system-ui,sans-serif;color:var(--charcoal);max-width:100%;margin:0 auto}
  #lichen-studio *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  #lichen-studio .ls-stage{position:relative;width:100%;aspect-ratio:16/10;min-height:440px;max-height:82vh;overflow:hidden;border-radius:6px}
  #lichen-studio canvas{display:block;touch-action:none;position:absolute;inset:0;width:100%!important;height:100%!important}
  #lichen-studio .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,.35);max-width:min(78%,330px);font-family:&quot;Helvetica Neue&quot;,Arial,sans-serif}
  #lichen-studio .plate .eyebrow{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--moss);font-weight:700;margin:0 0 4px}
  #lichen-studio .plate h1{margin:0;font-size:26px;line-height:.95;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
  #lichen-studio .plate .sub{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:600;margin:4px 0 0}
  #lichen-studio .plate p{margin:7px 0 0;font-size:11px;line-height:1.5;color:var(--charcoal2)}
  #lichen-studio .blade{height:1px;width:100%;margin:10px 0 0;background:var(--ink);position:relative}
  #lichen-studio .blade::after{content:&quot;&quot;;position:absolute;left:0;top:-2px;width:5px;height:5px;background:var(--moss)}
  #lichen-studio .scenes{position:absolute;top:14px;right:14px;z-index:6;background:var(--ink);border-radius:4px;padding:7px;box-shadow:0 8px 26px rgba(0,0,0,.4);display:flex;gap:4px;font-family:&quot;Helvetica Neue&quot;,Arial,sans-serif}
  #lichen-studio .scene{appearance:none;border:0;cursor:pointer;background:transparent;color:#e7e3d6;border-radius:3px;padding:8px 10px 7px;min-width:62px;text-align:center;line-height:1.15;transition:background .18s ease}
  #lichen-studio .scene b{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
  #lichen-studio .scene span{display:block;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-top:2px}
  #lichen-studio .scene .ic{font-size:14px;display:block;margin-bottom:2px}
  #lichen-studio .scene:hover{background:rgba(255,255,255,.1)}
  #lichen-studio .scene[data-on=&quot;true&quot;]{background:var(--paper);color:var(--ink)}
  #lichen-studio .panel{position:absolute;left:14px;bottom:14px;z-index:5;display:flex;flex-direction:column;gap:7px}
  #lichen-studio .row{display:flex;gap:7px;flex-wrap:wrap;max-width:min(94%,430px)}
  #lichen-studio .lbl{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:#d8d3c2;margin:1px 0 -2px 2px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.6)}
  #lichen-studio .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,.3);transition:background .15s ease,color .15s ease;line-height:1;white-space:nowrap;font-family:&quot;Helvetica Neue&quot;,Arial,sans-serif}
  #lichen-studio .vbtn:hover,#lichen-studio .vbtn[data-on=&quot;true&quot;]{background:var(--ink);color:var(--paper)}
  #lichen-studio .hint{position:absolute;right:14px;bottom:14px;z-index:5;background:rgba(20,20,22,.6);color:#f3efe4;font-size:10.5px;padding:7px 11px;border-radius:999px;backdrop-filter:blur(4px)}
  #lichen-studio .ls-load{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;background:#15161a;color:#f3efe4;font-size:13px;letter-spacing:.04em}
  #lichen-studio .ls-load .b{height:4px;width:54px;margin-left:12px;border-radius:3px;overflow:hidden;background:#33343a;display:inline-block;vertical-align:middle}
  #lichen-studio .ls-load .b i{display:block;height:100%;width:40%;border-radius:3px;background:linear-gradient(90deg,var(--red),var(--gold));animation:lsslide 1s infinite ease-in-out}
  @keyframes lsslide{0%{margin-left:-40%}100%{margin-left:100%}}
  @media (max-width:640px){#lichen-studio .hint{display:none}#lichen-studio .scene{min-width:54px;padding:7px 7px 6px}}
</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=byId(&quot;lichen-studio&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 CX=0.35; // shared centre axis: sofa + TV + tables + pendant

  const app=byId('ls-stage');
  const scene=new THREE.Scene();
  scene.background=null;
  scene.fog=null;
  const camera=new THREE.PerspectiveCamera(46,16/10,0.1,200);
  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){}}

  const W=6.0,D=5.8,H=2.85;const hw=W/2,hd=D/2;

  // ---- lights (ambient-forward) ----
  const hemi=new THREE.HemisphereLight(0xfff6e8,0x9c8a6e,0.52);scene.add(hemi);
  const amb=new THREE.AmbientLight(0xfff4e6,0.3);scene.add(amb);
  const sun=new THREE.DirectionalLight(0xfff1dc,0.4);
  sun.position.set(6,5,3);sun.castShadow=true;sun.shadow.mapSize.set(2048,2048);
  sun.shadow.camera.near=1;sun.shadow.camera.far=28;sun.shadow.camera.left=-9;sun.shadow.camera.right=9;sun.shadow.camera.top=9;sun.shadow.camera.bottom=-9;sun.shadow.bias=-0.0004;sun.shadow.radius=3;scene.add(sun);
  const fill=new THREE.DirectionalLight(0xe2e8ee,0.28);fill.position.set(-5,4.5,5);scene.add(fill);
  const pend=new THREE.PointLight(0xffd9a0,0.0,9,2);pend.position.set(CX,H-0.7,1.1);scene.add(pend);
  const underCab=new THREE.PointLight(0xffcaa0,0.0,5,2);underCab.position.set(-hw+0.8,1.4,0.2);scene.add(underCab);
  const bedLamp=new THREE.PointLight(0xffd2a0,0.0,4,2);bedLamp.position.set(-0.75,0.8,-hd+0.6);scene.add(bedLamp);

  // ---- 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;}
  const room=new THREE.Group();scene.add(room);
  const movables=[];let sofaG,spkA,spkB,diningSet;
  function regMove(g,name){if(!g)return g;g.userData.movable=true;g.userData.mname=name;g.userData.home=g.position.clone();g.userData.homeRot=g.rotation.y;movables.push(g);return g;}
  function recenter(g){const b=new THREE.Box3().setFromObject(g);const c=b.getCenter(new THREE.Vector3());g.children.forEach(ch=>{ch.position.x-=c.x;ch.position.z-=c.z;});g.position.x+=c.x;g.position.z+=c.z;}

  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<60;i++){const yy=Math.random()*256;x.strokeStyle='rgba(150,120,70,'+(0.04+Math.random()*0.08)+')';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;}
  // birch tones throughout
  const floorMap=woodTex([4,4],'#dcc59c'),birchMap=woodTex([1,1],'#e7d4ac');
  function birch(){return new THREE.MeshStandardMaterial({map:birchMap,roughness:0.6,metalness:0.02});}
  function skyTex(){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();
    x.fillStyle='rgba(150,175,140,0.5)';x.beginPath();x.moveTo(0,228);x.lineTo(100,205);x.lineTo(190,226);x.lineTo(256,210);x.lineTo(256,256);x.lineTo(0,256);x.closePath();x.fill();
    const t=new THREE.CanvasTexture(c);t.encoding=THREE.sRGBEncoding;return t;}

  // ---- shell ----
  const plaster=mat(0xf2ece0,0.96,0);
  const floor=new THREE.Mesh(new THREE.PlaneGeometry(W,D),new THREE.MeshStandardMaterial({map:floorMap,roughness:0.55}));
  floor.rotation.x=-Math.PI/2;floor.receiveShadow=true;room.add(floor);
  const ceil=new THREE.Mesh(new THREE.PlaneGeometry(W,D),mat(0xf6f1e6,1,0));ceil.rotation.x=Math.PI/2;ceil.position.y=H;room.add(ceil);
  function wall(w,h){const x=new THREE.Mesh(new THREE.PlaneGeometry(w,h),birch());x.receiveShadow=true;return x;}
  const fw=wall(W,H);put(fw,0,H/2,hd);fw.rotation.y=Math.PI;room.add(fw);
  const lw=wall(D,H);put(lw,-hw,H/2,0);lw.rotation.y=Math.PI/2;room.add(lw);
  // right wall: SOLID birch with a real window opening
  let shojiGlow;
  (function(){const ch=birch();const oz0=-1.3,oz1=0.1,oy0=0.8,oy1=2.3;   // opening bounds in z / y
    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,hw-0.005,yc,zc);room.add(m);}
    seg(D,oy0,0,oy0/2);                       // below window
    seg(D,H-oy1,0,(oy1+H)/2);                 // above window
    seg(oz0+hd,oy1-oy0,(-hd+oz0)/2,(oy0+oy1)/2); // wall toward back
    seg(hd-oz1,oy1-oy0,(oz1+hd)/2,(oy0+oy1)/2);  // wall toward front
    // daylight / view outside, seen through the opening
    const sky=skyTex();
    const out=new THREE.Mesh(new THREE.PlaneGeometry(1.9,1.9),new THREE.MeshStandardMaterial({map:sky,emissive:0xffffff,emissiveMap:sky,emissiveIntensity:0.5,roughness:1}));
    out.rotation.y=-Math.PI/2;put(out,hw+0.32,1.55,-0.6);room.add(out);shojiGlow=out;
    // glass
    const glass=new THREE.Mesh(new THREE.PlaneGeometry(1.4,1.5),new THREE.MeshStandardMaterial({color:0xdfeaee,roughness:0.05,metalness:0.1,transparent:true,opacity:0.16}));
    glass.rotation.y=-Math.PI/2;put(glass,hw-0.07,1.55,-0.6);room.add(glass);
    // birch frame + sill + simple mullions
    room.add(put(box(0.1,1.66,0.1,ch),hw-0.06,1.55,oz0));
    room.add(put(box(0.1,1.66,0.1,ch),hw-0.06,1.55,oz1));
    room.add(put(box(0.16,0.1,1.55,ch),hw-0.09,oy1,-0.6));
    room.add(put(box(0.2,0.08,1.62,ch),hw-0.13,oy0,-0.6));   // sill
    room.add(put(box(0.05,1.5,0.05,ch),hw-0.07,1.55,-0.6));  // vertical mullion
    room.add(put(box(0.05,0.05,1.4,ch),hw-0.07,1.55,-0.6));  // horizontal mullion
  })();

  // Murphy bed now sits directly behind the couch (centred on CX)
  const NX=CX, nW=1.6;
  // ---- solid birch back wall ----
  (function(){const bw=new THREE.Mesh(new THREE.PlaneGeometry(W,H),birch());bw.receiveShadow=true;put(bw,0,H/2,-hd+0.01);room.add(bw);
    const planks=6;for(let i=1;i<planks;i++)room.add(put(box(W,0.012,0.006,mat(0x8a6e44,0.7,0)),0,i*H/planks,-hd+0.025));})();

  // ---- FRAME TV (centred on back wall, faces the sofa) ----
  let tvArt;
  (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(0.6,'#e7e1d2');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,70,26,0,7);x.fill(); // soft sun
    x.fillStyle='#8a9b7e';x.beginPath();x.moveTo(0,150);x.lineTo(90,118);x.lineTo(165,150);x.lineTo(250,124);x.lineTo(320,150);x.lineTo(320,200);x.lineTo(0,200);x.closePath();x.fill();
    x.fillStyle='#73856a';x.beginPath();x.moveTo(0,168);x.lineTo(120,150);x.lineTo(220,170);x.lineTo(320,152);x.lineTo(320,200);x.lineTo(0,200);x.closePath();x.fill();
    const t=new THREE.CanvasTexture(c);t.encoding=THREE.sRGBEncoding;
    const g2=new THREE.Group();const Wt=1.0,Ht=0.6,fr=birch();
    const art=new THREE.Mesh(new THREE.PlaneGeometry(Wt-0.08,Ht-0.08),new THREE.MeshStandardMaterial({map:t,roughness:0.95,emissive:0xffffff,emissiveMap:t,emissiveIntensity:0.12}));
    put(art,0,0,0.035);g2.add(art);tvArt=art;
    g2.add(put(box(Wt-0.06,Ht-0.06,0.03,mat(0x1c1c1e,0.6,0)),0,0,0.01));
    const tk=0.05;
    g2.add(put(box(Wt,tk,0.06,fr),0,Ht/2,0.02));g2.add(put(box(Wt,tk,0.06,fr),0,-Ht/2,0.02));
    g2.add(put(box(tk,Ht,0.06,fr),-Wt/2,0,0.02));g2.add(put(box(tk,Ht,0.06,fr),Wt/2,0,0.02));
    g2.rotation.y=Math.PI;put(g2,CX,1.45,hd-0.07);room.add(g2);
  })();

  // ---- speakers flanking the TV ----
  const spkLed=[];
  function speaker(cx){const g=new THREE.Group();
    g.add(put(box(0.42,1.4,0.16,birch()),0,0,0));
    g.add(put(box(0.34,1.3,0.05,mat(0x2c2117,0.95,0)),0,0,0.085));
    const led=new THREE.Mesh(new THREE.SphereGeometry(0.012,8,8),new THREE.MeshStandardMaterial({color:0x333,emissive:0x000000}));
    put(led,0.16,0.6,0.12);g.add(led);spkLed.push(led);
    put(g,cx,0.82,-hd+0.20);room.add(g);return g;}
  spkA=speaker(-0.85);spkB=speaker(1.55);

  // ---- Murphy bed (left of centre) ----
  let bedPivot;
  (function(){const ch=birch();const nH=2.3,dep=0.34,z0=-hd+dep/2;
    room.add(put(box(nW+0.12,0.1,dep,ch),NX,nH+0.05,z0));
    room.add(put(box(0.1,nH,dep,ch),NX-(nW/2+0.06),nH/2,z0));
    room.add(put(box(0.1,nH,dep,ch),NX+(nW/2+0.06),nH/2,z0));
    room.add(put(box(nW+0.12,nH,0.04,mat(0x584730,0.9,0)),NX,nH/2,-hd+0.04));
    room.add(put(box(nW-0.1,0.04,dep-0.08,ch),NX,nH-0.25,z0));
    bedPivot=new THREE.Group();bedPivot.position.set(NX,0.12,-hd+dep-0.02);
    const bW=1.4,bL=2.0;
    bedPivot.add(put(box(bW+0.14,0.06,bL+0.14,ch),0,-0.02,bL/2));
    bedPivot.add(put(box(bW,0.16,bL,ch),0,0.10,bL/2));
    bedPivot.add(put(box(bW-0.08,0.16,bL-0.08,mat(0xeae1cf,0.95,0)),0,0.26,bL/2));
    bedPivot.add(put(box(0.56,0.12,0.32,mat(0xf3ece0,0.95,0)),-0.3,0.36,0.42));
    bedPivot.add(put(box(0.56,0.12,0.32,mat(0xf3ece0,0.95,0)),0.3,0.36,0.42));
    bedPivot.add(put(box(bW-0.05,0.08,0.5,mat(0xA1D7D9,0.95,0)),0,0.36,1.5));
    room.add(bedPivot);})();

  // ---- apple box module (birch + peg + finger hole) ----
  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(s,x,y,z,ry,parent){const b=appleBox(s);put(b,x,y,z);if(ry)b.rotation.y=ry;(parent||room).add(b);return b;}

  // ---- greenery ----
  function bonsai(){const g=new THREE.Group();
    g.add(put(box(0.28,0.08,0.18,mat(0x6b513a,0.8,0)),0,0.04,0));         // shallow pot
    g.add(put(box(0.23,0.03,0.14,mat(0x33271b,0.95,0)),0,0.085,0));        // soil
    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;g.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;g.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]);g.add(f);});
    return g;}
  function plantTall(){const g=new THREE.Group();
    g.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.14,0.11,0.36,14),mat(0xcdb892,0.7,0)),0,0.18,0)); // pot
    for(let i=0;i<6;i++){const bl=put(new THREE.Mesh(new THREE.CylinderGeometry(0.006,0.035,0.7+Math.random()*0.35,6),mat(0x5a7a44,0.9,0)),(Math.random()-0.5)*0.12,0.62,(Math.random()-0.5)*0.12);bl.rotation.z=(Math.random()-0.5)*0.55;bl.rotation.x=(Math.random()-0.5)*0.45;g.add(bl);}
    return g;}
  function placePlant(maker,x,y,z,s){const m=maker();m.position.set(x,y,z);if(s)m.scale.setScalar(s);room.add(m);if(y<0.05)regMove(m,'Plant');return m;}

  // stacks
  (function(){const s=0.42,bx=hw-0.55,bz=-hd+0.65;for(let i=0;i<3;i++)addBox(s,bx,s/2+i*s,bz,0);
    const py=3*s;room.add(put(box(0.16,0.12,0.16,mat(0x8a6a44,0.7,0)),bx,py+0.06,bz));
    room.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.02,0.03,0.16,8),mat(0x9b7a52,0.8,0)),bx,py+0.18,bz));
    [[0,0.30,0],[0.08,0.26,0.04],[-0.07,0.27,-0.03]].forEach(o=>{const f=new THREE.Mesh(new THREE.SphereGeometry(0.1,10,10),mat(0x6f8a52,0.9,0));f.scale.set(1,0.6,1);put(f,bx+o[0],py+o[1],bz+o[2]);room.add(f);});})();
  addBox(0.42,-0.75,0.21,-hd+0.55,0);addBox(0.36,-0.75,0.6,-hd+0.55,0);
  room.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.08,0.1,0.16,16),mat(0xf2ead6,0.7,0)),-0.75,0.86,-hd+0.55));

  // ================= KITCHEN (left wall) =================
  let potSteamPos;
  (function(){const ch=birch(),stone=mat(0xe9e6df,0.5,0.05),drk=mat(0x2b2722,0.6,0.1),steel=mat(0xc9ccd0,0.35,0.7);
    const cz0=-1.9,cz1=1.9,clen=cz1-cz0,cx=-hw+0.32;
    room.add(put(box(0.6,0.82,clen,ch),cx,0.41,(cz0+cz1)/2));
    room.add(put(box(0.64,0.06,clen+0.04,stone),cx,0.87,(cz0+cz1)/2));
    for(let z=cz0+0.3;z<cz1;z+=0.55)room.add(put(box(0.02,0.7,0.02,drk),cx+0.31,0.45,z));
    room.add(put(box(0.4,0.6,clen-0.9,ch),cx-0.06,2.0,(cz0+cz1)/2));
    room.add(put(box(0.3,0.04,clen-0.9,birch()),cx+0.02,1.55,(cz0+cz1)/2));
    for(let i=0;i<4;i++)room.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.06,0.05,0.1,14),mat([0xf2efe6,0xBFE1BF,0xA1D7D9,0xeee][i],0.6,0)),cx+0.04,1.66,-0.9+i*0.5));
    room.add(put(box(0.34,0.04,0.4,steel),cx+0.04,0.86,-1.0));
    room.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.012,0.012,0.28,10),steel),cx+0.04,1.02,-1.2));
    room.add(put(new THREE.Mesh(new THREE.TorusGeometry(0.06,0.012,8,16,Math.PI),steel),cx+0.04,1.15,-1.14));
    room.add(put(box(0.42,0.02,0.42,drk),cx+0.02,0.905,0.7));
    for(let a=0;a<4;a++){const bz=0.55+(a%2)*0.3,bx2=cx-0.06+(a<2?-0.08:0.08);room.add(put(new THREE.Mesh(new THREE.RingGeometry(0.04,0.07,18),mat(0x444,0.5,0.2)),bx2,0.916,bz).rotateX(-Math.PI/2));}
    room.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.13,0.11,0.14,20),mat(0x2a2a2d,0.4,0.5)),cx+0.02,0.99,0.7));
    room.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.12,0.12,0.02,20),mat(0x3a3a3d,0.4,0.5)),cx+0.02,1.07,0.7));
    potSteamPos=[cx+0.1,1.12,0.7];
    room.add(put(box(0.62,2.3,0.7,ch),cx,1.15,cz0-0.05));
    room.add(put(box(0.02,1.6,0.02,drk),cx+0.32,1.4,cz0-0.05));
    room.add(put(box(0.16,0.12,0.16,mat(0x222,0.5,0.3)),cx+0.06,0.95,1.4));
    room.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.06,0.07,0.13,18),mat(0x2b2b2e,0.4,0.4)),cx+0.06,0.955,1.0));
    room.add(put(new THREE.Mesh(new THREE.TorusGeometry(0.06,0.01,8,16,Math.PI*1.1),mat(0x2b2b2e,0.4,0.4)),cx+0.06,1.03,1.06).rotateZ(0.3));
    room.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.07,0.05,0.1,18),mat(0xe9e3d6,0.5,0)),cx+0.06,0.95,0.74));
    room.add(put(box(0.5,0.05,0.7,birch()),cx+0.42,0.86,1.5));
    addBox(0.42,cx+0.62,0.21,1.5,0);
    underCab.position.set(cx+0.4,1.5,0.2);})();

  // ================= entry + bathroom door =================
  (function(){const ch=birch();
    room.add(put(box(0.9,2.1,0.05,ch),1.7,1.05,hd-0.03));
    room.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.015,0.015,0.2,8),mat(0x2b2b2e,0.5,0.3)),1.4,1.05,hd-0.06).rotateZ(Math.PI/2));
    room.add(put(box(0.95,2.15,0.06,mat(0xe7dfce,0.9,0)),-1.7,1.07,hd-0.04));
    room.add(put(box(0.6,0.4,0.28,ch),-1.7,0.2,hd-0.2));
    for(let i=0;i<3;i++)room.add(put(box(0.03,0.1,0.03,mat(0x2b2b2e,0.5,0.2)),-2.1+i*0.28,1.5,hd-0.05));})();

  // ================= ZE SOFA (camel leather block — reverted) =================
  (function(){const lea=mat(0xb98a56,0.5,0.05),ch=birch();sofaG=new THREE.Group();const g=sofaG;
    g.add(put(box(2.0,0.10,0.85,ch),0,0.14,0));
    g.add(put(box(1.92,0.22,0.8,lea),0,0.33,0.02));
    g.add(put(box(1.92,0.42,0.18,lea),0,0.55,-0.34));
    g.add(put(box(0.16,0.34,0.8,lea),-0.96,0.41,0.02));
    g.add(put(box(0.16,0.34,0.8,lea),0.96,0.41,0.02));
    [-0.5,0.5].forEach(x=>g.add(put(box(0.9,0.2,0.78,mat(0xc1925e,0.55,0)),x,0.34,0.02)));
    put(g,CX,0,0.15);room.add(g);   // faces +z toward the TV on the front wall
    const r=new THREE.Mesh(new THREE.CircleGeometry(1.4,40),mat(0xdbd1bc,1,0));r.rotation.x=-Math.PI/2;r.position.set(CX,0.012,0.95);r.receiveShadow=true;room.add(r);
    room.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.005,0.005,0.7,6),mat(0x222,0.8,0)),CX,H-0.35,1.1));
    const shade=new THREE.Mesh(new THREE.SphereGeometry(0.26,20,20),new THREE.MeshStandardMaterial({color:0xf3ecdc,roughness:0.9,emissive:0xffe6bf,emissiveIntensity:0.16}));
    shade.scale.set(1,0.92,1);put(shade,CX,H-0.72,1.1);room.add(shade);})();

  // ---- lounge glass CMPT table (hidden in dinner) ----
  const loungeTable=new THREE.Group();
  (function(){const ch=birch(),cx=CX,cz=1.3,tw=1.05,td=0.55,th=0.40;
    [[-tw/2+0.05,-td/2+0.05],[tw/2-0.05,-td/2+0.05],[-tw/2+0.05,td/2-0.05],[tw/2-0.05,td/2-0.05]].forEach(p=>loungeTable.add(put(box(0.06,th,0.06,ch),cx+p[0],th/2,cz+p[1])));
    const glass=new THREE.Mesh(new THREE.BoxGeometry(tw+0.06,0.02,td+0.06),new THREE.MeshStandardMaterial({color:0xcfe0e2,roughness:0.08,metalness:0.1,transparent:true,opacity:0.42}));
    put(glass,cx,th+0.02,cz);loungeTable.add(glass);
    const s=0.24;for(let i=0;i<4;i++)addBox(s,cx-tw/2+0.16+i*0.24,s/2,cz,0,loungeTable);
    room.add(loungeTable);})();

  // ---- dining drop-leaf table ----
  let leafL,leafR,diningBase,diningChairs,dinnerProps;
  (function(){const ch=birch(),cx=CX,cz=1.35,th=0.74;
    diningBase=new THREE.Group();
    diningBase.add(put(box(0.7,0.05,0.5,ch),0,th,0));
    [[-0.3,-0.2],[0.3,-0.2],[-0.3,0.2],[0.3,0.2]].forEach(p=>diningBase.add(put(box(0.07,th,0.07,ch),p[0],th/2,p[1])));
    leafL=new THREE.Group();leafL.position.set(-0.35,th+0.025,0);leafL.add(put(box(0.5,0.05,0.5,ch),-0.25,0,0));diningBase.add(leafL);
    leafR=new THREE.Group();leafR.position.set(0.35,th+0.025,0);leafR.add(put(box(0.5,0.05,0.5,ch),0.25,0,0));diningBase.add(leafR);
    put(diningBase,cx,0,cz);room.add(diningBase);diningBase.visible=false;
    diningChairs=new THREE.Group();
    [[-0.75,0],[0.75,0]].forEach(p=>addBox(0.42,cx+p[0],0.21,cz+p[1],0,diningChairs));
    [[0,-0.7],[0,0.7]].forEach(p=>addBox(0.42,cx+p[0],0.21,cz+p[1],Math.PI/2,diningChairs));
    room.add(diningChairs);
    dinnerProps=new THREE.Group();
    [[-0.45,0],[0.45,0]].forEach(p=>dinnerProps.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.13,0.12,0.02,20),mat(0xf3efe6,0.5,0)),cx+p[0],th+0.06,cz+p[1])));
    dinnerProps.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.04,0.05,0.16,12),new THREE.MeshStandardMaterial({color:0x6e1f2a,roughness:0.2,transparent:true,opacity:0.7})),cx-0.1,th+0.13,cz));
    dinnerProps.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.045,0.05,0.18,12),new THREE.MeshStandardMaterial({color:0x6e1f2a,roughness:0.2,transparent:true,opacity:0.7})),cx+0.15,th+0.14,cz+0.05));
    dinnerProps.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.02,0.02,0.1,10),mat(0xf2ead2,0.6,0)),cx,th+0.11,cz));
    dinnerProps.add(put(new THREE.Mesh(new THREE.SphereGeometry(0.02,8,8),new THREE.MeshStandardMaterial({color:0xffcf7a,emissive:0xffb347,emissiveIntensity:0.9})),cx,th+0.18,cz));
    room.add(dinnerProps);})();

  // ================= RIGHT WALL FITTINGS: desk, vision pro =================
  let deskPivot,deskItems,holoGroup,breakfastProps;
  (function(){const ch=birch();
    for(let i=0;i<3;i++)addBox(0.42,hw-0.30,0.21,-1.5+i*0.46,-Math.PI/2);
    deskPivot=new THREE.Group();deskPivot.position.set(hw-0.06,0.78,1.0);
    deskPivot.add(put(box(0.56,0.04,1.0,ch),-0.28,0,0));room.add(deskPivot);
    room.add(put(box(0.05,1.5,1.1,ch),hw-0.03,1.3,1.0));
    room.add(put(box(0.42,0.04,0.9,birch()),hw-0.26,1.7,1.0));
    deskItems=new THREE.Group();
    deskItems.add(put(box(0.36,0.02,0.24,mat(0x2b2b2e,0.5,0.2)),hw-0.34,0.82,1.0));
    const screen=put(box(0.34,0.22,0.012,mat(0x111,0.4,0.2)),hw-0.34,0.95,0.9);screen.rotation.y=Math.PI/2;deskItems.add(screen);
    const stand=new THREE.Group();
    stand.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.06,0.08,0.02,16),mat(0x2b2b2e,0.4,0.3)),0,0,0));
    stand.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.012,0.012,0.14,10),mat(0x2b2b2e,0.4,0.3)),0,0.08,0));
    stand.add(put(box(0.2,0.11,0.1,mat(0x20232a,0.2,0.5)),0,0.2,0));
    stand.add(put(box(0.18,0.09,0.02,new THREE.MeshStandardMaterial({color:0x2a3340,roughness:0.1,metalness:0.6})),0,0.2,0.055));
    stand.add(put(new THREE.Mesh(new THREE.TorusGeometry(0.06,0.012,8,16,Math.PI),mat(0xd8d2c4,0.6,0.1)),0,0.21,-0.04).rotateX(Math.PI/2));
    put(stand,hw-0.55,0.84,1.25);deskItems.add(stand);
    deskItems.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.04,0.035,0.07,14),mat(0xf2efe6,0.6,0)),hw-0.5,0.85,0.78));
    room.add(deskItems);deskItems.visible=false;
    holoGroup=new THREE.Group();
    function holo(w,h,col){return new THREE.Mesh(new THREE.PlaneGeometry(w,h),new THREE.MeshStandardMaterial({color:col,roughness:0.4,transparent:true,opacity:0.34,emissive:col,emissiveIntensity:0.5,side:THREE.DoubleSide}));}
    const p1=holo(0.7,0.42,0xA1D7D9);put(p1,hw-0.95,1.45,1.0);p1.rotation.y=-Math.PI/2.4;holoGroup.add(p1);
    const p2=holo(0.5,0.34,0xBFE1BF);put(p2,hw-1.1,1.2,0.55);p2.rotation.y=-Math.PI/2.1;holoGroup.add(p2);
    const p3=holo(0.5,0.3,0xFBD059);put(p3,hw-1.1,1.55,1.45);p3.rotation.y=-Math.PI/1.8;holoGroup.add(p3);
    holoGroup.children.forEach(p=>{for(let i=0;i<3;i++){const bar=new THREE.Mesh(new THREE.PlaneGeometry(p.geometry.parameters.width*0.7,0.015),new THREE.MeshBasicMaterial({color:0xffffff,transparent:true,opacity:0.5}));bar.position.set(0,0.06-i*0.06,0.001);p.add(bar);}});
    room.add(holoGroup);holoGroup.visible=false;
    breakfastProps=new THREE.Group();const cx=-hw+0.42;
    breakfastProps.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.1,0.09,0.02,18),mat(0xf3efe6,0.5,0)),cx,0.89,1.5));
    breakfastProps.add(put(box(0.08,0.04,0.08,mat(0xd9a45a,0.7,0)),cx,0.93,1.5));
    breakfastProps.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.035,0.03,0.1,14),new THREE.MeshStandardMaterial({color:0xf0a64d,roughness:0.3,transparent:true,opacity:0.85})),cx+0.18,0.94,1.42));
    breakfastProps.add(put(new THREE.Mesh(new THREE.CylinderGeometry(0.04,0.035,0.07,14),mat(0xf2efe6,0.6,0)),cx+0.18,0.92,1.6));
    room.add(breakfastProps);breakfastProps.visible=false;})();

  // ================= steam =================
  function steamSrc(pos){const planes=[];const g=new THREE.Group();
    for(let i=0;i<5;i++){const m=new THREE.Mesh(new THREE.CircleGeometry(0.03+Math.random()*0.02,12),new THREE.MeshBasicMaterial({color:0xffffff,transparent:true,opacity:0,depthWrite:false}));
      m.position.set(pos[0]+(Math.random()-0.5)*0.04,pos[1]+Math.random()*0.4,pos[2]+(Math.random()-0.5)*0.04);g.add(m);planes.push({m,p:Math.random()});}
    room.add(g);return{planes,base:pos,cur:0,tgt:0};}
  const coffeeSteam=steamSrc([-hw+0.48,1.0,1.0]);
  const potSteam=steamSrc(potSteamPos);

  // ================= FX fades =================
  const fades=[];
  function fade(g,pop){const f={g,tgt:g.visible?1:0,cur:g.visible?1:0,pop:!!pop};fades.push(f);g._fx=f;return f;}
  fade(loungeTable,false);loungeTable._fx.tgt=1;loungeTable._fx.cur=1;loungeTable.visible=true;
  fade(diningChairs,true);fade(dinnerProps,true);fade(holoGroup,false);fade(breakfastProps,true);fade(deskItems,false);
  function setFade(g,on){if(g&amp;&amp;g._fx)g._fx.tgt=on?1:0;}

  // ---- place greenery around the studio ----
  placePlant(bonsai, hw-0.55, 1.30, -hd+0.65, 1.05);   // on the storage tower
  placePlant(bonsai, hw-0.20, 0.84, -0.6, 0.8);         // on the windowsill
  placePlant(bonsai, hw-0.26, 1.72, 1.0, 0.75);         // desk shelf
  placePlant(bonsai, -1.9, 0.90, 1.5, 0.85);            // kitchen breakfast end
  placePlant(plantTall, -hw+0.55, 0, hd-0.6, 1.05);     // entry corner
  placePlant(plantTall, -1.0, 0, -hd+0.5, 0.85);        // by the bed wall
  placePlant(plantTall, hw-0.6, 0, 2.0, 0.8);           // lounge corner by window

  // ---- register movable furniture for Edit Layout ----
  regMove(sofaG,'Sofa');
  recenter(loungeTable);regMove(loungeTable,'Coffee table');
  regMove(spkA,'Speaker');regMove(spkB,'Speaker');
  diningSet=new THREE.Group();room.add(diningSet);[diningBase,diningChairs,dinnerProps].forEach(o=>{if(o)diningSet.add(o);});recenter(diningSet);regMove(diningSet,'Dining set');

  // ================= orbit controls =================
  const target=new THREE.Vector3(CX,1.0,0.4);
  const sph={r:8.6,theta:Math.PI*0.30,phi:1.12};
  const lim={rMin:2.6,rMax:14,phiMin:0.18,phiMax:1.52};
  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;
  const ray=new THREE.Raycaster(),ndc=new THREE.Vector2(),gPlane=new THREE.Plane(new THREE.Vector3(0,1,0),0);
  let editMode=false,selObj=null,dragging=null,boxH=null;const dragOff=new THREE.Vector3();
  function setNDC(e){const r=el.getBoundingClientRect();ndc.x=((e.clientX-r.left)/r.width)*2-1;ndc.y=-((e.clientY-r.top)/r.height)*2+1;}
  function pickMovable(e){setNDC(e);ray.setFromCamera(ndc,camera);const hits=ray.intersectObjects(movables,true);if(!hits.length)return null;let o=hits[0].object;while(o&amp;&amp;!o.userData.movable)o=o.parent;return o||null;}
  function groundAt(e){setNDC(e);ray.setFromCamera(ndc,camera);const p=new THREE.Vector3();ray.ray.intersectPlane(gPlane,p);return p||new THREE.Vector3();}
  function selectObj(g){selObj=g;if(boxH){scene.remove(boxH);boxH=null;}if(g){boxH=new THREE.BoxHelper(g,0xdf5842);if(boxH.material){boxH.material.depthTest=false;}boxH.renderOrder=999;scene.add(boxH);}updateEditHint();}
  function updateEditHint(){const h=ROOT.querySelector('.hint');if(!h)return;h.textContent=editMode?(selObj?('Moving '+selObj.userData.mname+' — drag it, or Rotate / Reset'):'Edit mode — tap a piece to grab it'):'Drag · orbit   ·   Scroll · zoom   ·   Shift-drag · pan';}
  function killSpin(){autoSpin=false;setOn('spin',false);}
  function down(e){el.setPointerCapture(e.pointerId);ptrs.set(e.pointerId,{x:e.clientX,y:e.clientY});killSpin();
    if(editMode&amp;&amp;ptrs.size===1){const g=pickMovable(e);if(g){selectObj(g);dragging=g;const gp=groundAt(e);dragOff.set(gp.x-g.position.x,0,gp.z-g.position.z);mode='editdrag';last=null;return;}else{selectObj(null);}}
    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};}}
  function move(e){if(!ptrs.has(e.pointerId))return;ptrs.set(e.pointerId,{x:e.clientX,y:e.clientY});
    if(mode==='editdrag'&amp;&amp;dragging){const gp=groundAt(e);let nx=gp.x-dragOff.x,nz=gp.z-dragOff.z;nx=Math.max(-hw+0.5,Math.min(hw-0.5,nx));nz=Math.max(-hd+0.5,Math.min(hd-0.5,nz));dragging.position.x=nx;dragging.position.z=nz;if(boxH)boxH.update();return;}
    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.0014;
      target.addScaledVector(right,-dx*k);target.addScaledVector(upp,dy*k);
      target.x=Math.max(-hw+0.4,Math.min(hw-0.4,target.x));target.z=Math.max(-hd+0.4,Math.min(hd-0.4,target.z));target.y=Math.max(0.4,Math.min(2.4,target.y));applyCam();}}
  function upH(e){if(mode==='editdrag')dragging=null;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('pointerdown',down);el.addEventListener('pointermove',move);el.addEventListener('pointerup',upH);el.addEventListener('pointercancel',upH);
  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});
  function goTo(p,instant){let th=p.theta;while(th-sph.theta>Math.PI)th-=2*Math.PI;while(th-sph.theta<-Math.PI)th+=2*Math.PI;
    const from={r:sph.r,theta:sph.theta,phi:sph.phi,tx:target.x,ty:target.y,tz:target.z};const to={r:p.r,theta:th,phi:p.phi,tx:p.t[0],ty:p.t[1],tz:p.t[2]};
    if(instant||REDUCED){Object.assign(sph,{r:to.r,theta:to.theta,phi:to.phi});target.set(to.tx,to.ty,to.tz);applyCam();camTween=null;return;}
    camTween={from,to,t0:performance.now(),dur:1000};}
  let camTween=null;function easeIO(t){return t<0.5?2*t*t:1-Math.pow(-2*t+2,2)/2;}

  // ================= state + scenes =================
  let bedDown=false,deskDown=false,dineOut=false,holoOn=false;
  let bedT=1,deskT=0,dineT=0;
  const lightGoal={sun:0.4,sunC:0xfff1dc,hemi:0.52,amb:0.3,pend:0.0,under:0.0,bedLamp:0.0,shoji:0.5,tv:0.12,bg:0xe9e3d4};
  function setOn(id,on){const b=byId(id);if(b)b.setAttribute('data-on',on?'true':'false');}
  function syncBtns(){setOn('bed',bedDown);setOn('desk',deskDown);setOn('dine',dineOut);setOn('holo',holoOn);}
  function applyLights(){
    hemi.intensity+=(lightGoal.hemi-hemi.intensity)*0.12;amb.intensity+=(lightGoal.amb-amb.intensity)*0.12;
    sun.intensity+=(lightGoal.sun-sun.intensity)*0.12;pend.intensity+=(lightGoal.pend-pend.intensity)*0.12;
    underCab.intensity+=(lightGoal.under-underCab.intensity)*0.12;bedLamp.intensity+=(lightGoal.bedLamp-bedLamp.intensity)*0.12;
    shojiGlow.material.emissiveIntensity+=(lightGoal.shoji-shojiGlow.material.emissiveIntensity)*0.12;
    tvArt.material.emissiveIntensity+=(lightGoal.tv-tvArt.material.emissiveIntensity)*0.12;
    sun.color.lerp(new THREE.Color(lightGoal.sunC),0.12);}

  const SCENES={
    morning:{bed:false,desk:false,dine:false,holo:false,
      light:{sun:0.4,sunC:0xfff1de,hemi:0.55,amb:0.32,pend:0.0,under:0.0,bedLamp:0.0,shoji:0.4,tv:0.1,bg:0xe8e2d2},
      sunPos:[7,5.5,-1],cam:{r:5.4,theta:Math.PI*0.60,phi:1.15,t:[-1.3,1.1,0.6]}, props:{coffee:1,pot:0,breakfast:true,dinner:false,lounge:true}},
    work:{bed:false,desk:true,dine:false,holo:true,
      light:{sun:0.36,sunC:0xfff4ea,hemi:0.52,amb:0.32,pend:0.12,under:0.0,bedLamp:0.0,shoji:0.34,tv:0.12,bg:0xe6e3db},
      sunPos:[6,5,2],cam:{r:4.4,theta:Math.PI*1.64,phi:1.16,t:[1.5,1.15,0.9]}, props:{coffee:0.5,pot:0,breakfast:false,dinner:false,lounge:true}},
    dinner:{bed:false,desk:false,dine:true,holo:false,
      light:{sun:0.12,sunC:0x6a6f95,hemi:0.26,amb:0.2,pend:1.6,under:0.8,bedLamp:0.0,shoji:0.16,tv:0.3,bg:0x241b18},
      sunPos:[3,4,4],cam:{r:5.2,theta:Math.PI*0.86,phi:1.16,t:[CX,1.05,1.2]}, props:{coffee:0,pot:1,breakfast:false,dinner:true,lounge:false}},
    night:{bed:true,desk:false,dine:false,holo:false,
      light:{sun:0.05,sunC:0x5560a0,hemi:0.16,amb:0.16,pend:0.45,under:0.0,bedLamp:0.95,shoji:0.08,tv:0.34,bg:0x14100f},
      sunPos:[2,4,4],cam:{r:5.6,theta:Math.PI*0.16,phi:1.15,t:[CX,1.05,-0.9]}, props:{coffee:0,pot:0,breakfast:false,dinner:false,lounge:true}}
  };
  function applyScene(name){const s=SCENES[name];if(!s)return;
    bedDown=s.bed;deskDown=s.desk;dineOut=s.dine;holoOn=s.holo;syncBtns();
    Object.assign(lightGoal,s.light);sun.position.set(s.sunPos[0],s.sunPos[1],s.sunPos[2]);
    coffeeSteam.tgt=s.props.coffee;potSteam.tgt=s.props.pot;
    setFade(breakfastProps,s.props.breakfast);setFade(dinnerProps,s.props.dinner);setFade(loungeTable,s.props.lounge);
    setFade(diningChairs,s.dine);setFade(holoGroup,s.holo);setFade(deskItems,s.desk);
    spkLed.forEach(l=>l.material.emissive.setHex(s.holo?0x55ddaa:0x000000));
    goTo(s.cam);
    QA('.scene').forEach(b=>b.setAttribute('data-on',b.dataset.scene===name?'true':'false'));}

  QA('.scene').forEach(b=>b.addEventListener('click',()=>{killSpin();applyScene(b.dataset.scene);}));
  byId('bed').onclick=()=>{bedDown=!bedDown;setOn('bed',bedDown);};
  byId('desk').onclick=()=>{deskDown=!deskDown;setOn('desk',deskDown);setFade(deskItems,deskDown);};
  byId('dine').onclick=()=>{dineOut=!dineOut;setOn('dine',dineOut);setFade(diningChairs,dineOut);setFade(dinnerProps,dineOut);setFade(loungeTable,!dineOut);};
  byId('holo').onclick=()=>{holoOn=!holoOn;setOn('holo',holoOn);setFade(holoGroup,holoOn);spkLed.forEach(l=>l.material.emissive.setHex(holoOn?0x55ddaa:0x000000));};
  byId('spin').onclick=function(){autoSpin=!autoSpin;setOn('spin',autoSpin);};
  byId('edit').onclick=()=>{editMode=!editMode;setOn('edit',editMode);if(!editMode)selectObj(null);updateEditHint();};
  byId('rotate').onclick=()=>{if(selObj){selObj.rotation.y+=Math.PI/4;if(boxH)boxH.update();}};
  byId('resetlayout').onclick=()=>{movables.forEach(g=>{g.position.copy(g.userData.home);g.rotation.y=g.userData.homeRot;});if(boxH)boxH.update();};
  byId('dollhouse').onclick=()=>{killSpin();goTo({r:11,theta:Math.PI*0.30,phi:0.34,t:[CX,0.6,0.3]});};
  byId('reset').onclick=()=>{killSpin();applyScene('morning');};

  // ================= loop =================
  let autoSpin=false;
  function frame(now){requestAnimationFrame(frame);
    if(camTween){const k=Math.min(1,(now-camTween.t0)/camTween.dur),e=easeIO(k);
      sph.r=camTween.from.r+(camTween.to.r-camTween.from.r)*e;sph.theta=camTween.from.theta+(camTween.to.theta-camTween.from.theta)*e;sph.phi=camTween.from.phi+(camTween.to.phi-camTween.from.phi)*e;
      target.set(camTween.from.tx+(camTween.to.tx-camTween.from.tx)*e,camTween.from.ty+(camTween.to.ty-camTween.from.ty)*e,camTween.from.tz+(camTween.to.tz-camTween.from.tz)*e);applyCam();if(k>=1)camTween=null;}
    else if(autoSpin&amp;&amp;!REDUCED){sph.theta+=0.0022;applyCam();}
    const sp=REDUCED?1:0.09;
    bedT+=((bedDown?0:1)-bedT)*sp;bedPivot.rotation.x=-Math.PI/2*bedT;
    deskT+=((deskDown?1:0)-deskT)*sp;deskPivot.rotation.z=-Math.PI/2*(1-deskT);
    dineT+=((dineOut?1:0)-dineT)*sp;const dE=easeIO(Math.max(0,Math.min(1,dineT)));
    diningBase.visible=dineT>0.02;leafL.rotation.z=(1-dE)*(Math.PI/2);leafR.rotation.z=-(1-dE)*(Math.PI/2);
    fades.forEach(f=>{f.cur+=(f.tgt-f.cur)*0.12;const v=f.cur;f.g.visible=v>0.012;if(f.pop)f.g.scale.setScalar(Math.max(0.001,easeIO(Math.max(0,Math.min(1,v)))));});
    [coffeeSteam,potSteam].forEach(s=>{s.cur+=(s.tgt-s.cur)*0.08;
      s.planes.forEach(pl=>{pl.m.position.y+=0.004+0.002*Math.random();const h=pl.m.position.y-s.base[1];
        if(h>0.5){pl.m.position.y=s.base[1];pl.m.position.x=s.base[0]+(Math.random()-0.5)*0.04;}
        pl.m.material.opacity=Math.max(0,(1-h/0.5))*s.cur*0.4;pl.m.lookAt(camera.position);});});
    if(boxH)boxH.update();
    applyLights();
    renderer.render(scene,camera);}
  requestAnimationFrame(frame);
  addEventListener('resize',sizeStage);
  applyScene('morning');
  setTimeout(()=>{const l=byId('load');l.style.transition='opacity .5s';l.style.opacity=0;setTimeout(()=>l.remove(),520);},300);
})();
</script>

</body></html>">

  
CMPT × Karimoku · a study
Lichen

Compartment Studio — Three Layouts
One kit of birch parts, three ways to live in the same footprint. Drag to orbit all three.
Open Plan — sofa, Frame TV, coffee table. Bed stowed. Airy lounge.
Live / Work — desk, Apple-Box shelving, bed folded down for sleep.
Host — galley kitchen, dining table + stools for guests.
Lichen