<!-- PLAYA · part 17 -->
lass="grid g2">
      <div><div class="note" style="margin:0 0 4px">Background</div><input type="color" id="bgpick" value="#07070c"></div>
      <div><div class="note" style="margin:0 0 4px">Lines</div><input type="color" id="lnpick" value="#8a6a1c"></div>
    </div>
  </div>
  <div class="sec" id="sec-light">
    <h3>Lighting &amp; Environment</h3>
    <div class="grid g4">
      <button class="btn" data-act="env" data-arg="golden">Golden</button>
      <button class="btn" data-act="env" data-arg="day">Day</button>
      <button class="btn" data-act="env" data-arg="night">Night</button>
      <button class="btn" data-act="env" data-arg="studio">Studio</button>
    </div>
    <div class="row"><label>Sun power</label><input type="range" min="0" max="3" step="0.05" id="sunI"></div>
    <div class="row"><label>Sun direction</label><input type="range" min="0" max="360" step="1" id="sunAz"></div>
    <div class="row"><label>Ambient</label><input type="range" min="0" max="2" step="0.05" id="ambI"></div>
    <div class="grid g2">
      <button class="btn" data-act="shadows"><span class="ic">◐</span>Shadows</button>
      <button class="btn" data-act="fog"><span class="ic">☁</span>Fog</button>
    </div>
  </div>
  <div class="sec" id="sec-anim">
    <h3>Animation</h3>
    <div class="grid g3">
      <button class="btn" data-act="spin"><span class="ic">↻</span>Spin</button>
      <button class="btn" data-act="bob"><span class="ic">↕</span>Float</button>
      <button class="btn" data-act="stopanim"><span class="ic">■</span>Stop all</button>
    </div>
    <p class="note">Turntable spin / float on the selected block. Stop all freezes every block where it is.</p>
  </div>
  <div class="sec" id="sec-props">
    <h3>Object Properties · Precision</h3>
    <div class="kv" id="meta"></div>
    <h4>Position</h4>
    <div class="xyz"><div><div class="ax">X</div><input class="num" type="number" step="0.5" inputmode="decimal" data-xf="p.x"></div><div><div class="ax">Y</div><input class="num" type="number" step="0.5" inputmode="decimal" data-xf="p.y"></div><div><div class="ax">Z</div><input class="num" type="number" step="0.5" inputmode="decimal" data-xf="p.z"></div></div>
    <div class="grid g3" style="margin-top:6px">
      <button class="btn" data-act="nudge" data-arg="x,-1">X −</button><button class="btn" data-act="nudge" data-arg="y,-1">Y −</button><button class="btn" data-act="nudge" data-arg="z,-1">Z −</button>
      <button class="btn" data-act="nudge" data-arg="x,1">X +</button><button class="btn" data-act="nudge" data-arg="y,1">Y +</button><button class="btn" data-act="nudge" data-arg="z,1">Z +</button>
    </div>
    <h4>Rotation (degrees)</h4>
    <div class="xyz"><div><div class="ax">X</div><input class="num" type="number" step="15" inputmode="decimal" data-xf="r.x"></div><div><div class="ax">Y</div><input class="num" type="number" step="15" inputmode="decimal" data-xf="r.y"></div><div><div class="ax">Z</div><input class="num" type="number" step="15" inputmode="decimal" data-xf="r.z"></div></div>
    <div class="grid g2" style="margin-top:6px"><button class="btn" data-act="turn" data-arg="-15">⟲ 15°</button><button class="btn" data-act="turn" data-arg="15">⟳ 15°</button></div>
    <h4>Scale</h4>
    <div class="xyz"><div><div class="ax">X</div><input class="num" type="number" step="0.1" inputmode="decimal" data-xf="s.x"></div><div><div class="ax">Y</div><input class="num" type="number" step="0.1" inputmode="decimal" data-xf="s.y"></div><div><div class="ax">Z</div><input class="num" type="number" step="0.1" inputmode="decimal" data-xf="s.z"></div></div>
    <div class="grid g2" style="margin-top:6px"><button class="btn" data-act="grow" data-arg="0.9">Smaller</button><button class="btn" data-act="grow" data-arg="1.1">Bigger</button></div>
    <div class="grid g3" style="margin-top:6px">
      <button class="btn" data-act="snap"><span class="ic">⌗</span>Snap</button>
      <button class="btn" data-act="calibrate"><span class="ic">⊕</span>Calibrate</button>
      <button class="btn" data-act="alignrow"><span class="ic">☰</span>Align Row</button>
    </div>
    <h4>Sculpt history &amp; undo timeline</h4>
    <div class="grid g2"><button class="btn" data-act="undo"><span class="ic">↶</span>Undo</button><button class="btn" data-act="redo"><span class="ic">↷</span>Redo</button></div>
    <ul class="hist" id="hist"></ul>
  </div>
  <div class="sec" id="sec-layers">
    <h3>Manage Layers · Scene Outliner</h3>
    <div class="grid g3">
      <button class="btn" data-act="isolate"><span class="ic">◎</span>Isolate</button>
      <button class="btn" data-act="hide"><span class="ic">◌</span>Hide</button>
      <button class="btn" data-act="showall"><span class="ic">◉</span>Show all</button>
    </div>
    <div id="layerlist" style="margin-top:6px"></div>
  </div>
  <div class="sec" id="sec-library">
    <h3>Assets Library</h3>
    <button class="btn wide gold" data-act="libsave"><span class="ic" styl