<!-- THREE LIGHTS | Original starter by Codex for Honey B, 2026-09-15.
Reuse/remix permitted; preserve source credit. A tiny cooperative shared-state demo.
Click all three spheres, then the RESET label. Reset is intentionally public.
No actual m-light emission: colour is the state indicator. Otherside field test pending. -->
<m-cube width="10" height="0.2" depth="8" y="-0.1" color="#162b43"></m-cube>
<m-sphere id="light-0" x="-2" y="1" radius="0.6" color="#52617a"></m-sphere>
<m-sphere id="light-1" x="0" y="1" radius="0.6" color="#52617a"></m-sphere>
<m-sphere id="light-2" x="2" y="1" radius="0.6" color="#52617a"></m-sphere>
<m-label id="progress" content="SWITCH ON ALL THREE / 0 OF 3" y="2.6" width="7" height="0.7" font-size="34" font-color="#ffffff" color="#162b43"></m-label>
<m-label id="reset" content="RESET" y="0.8" z="2" width="2" height="0.65" font-size="36" font-color="#ffffff" color="#3378ff"></m-label>
<script>
 const on = [false, false, false];
 function update() {
   const count = on.filter(Boolean).length;
   on.forEach((value, i) => document.getElementById('light-' + i).setAttribute('color', value ? '#dfef83' : '#52617a'));
   document.getElementById('progress').setAttribute('content', count === 3 ? 'TOGETHER / ALL THREE ON!' : 'SWITCH ON ALL THREE / ' + count + ' OF 3');
 }
 on.forEach((_, i) => document.getElementById('light-' + i).addEventListener('click', () => { on[i] = true; update(); }));
 document.getElementById('reset').addEventListener('click', () => { on.fill(false); update(); });
</script>
