<!-- COLOUR SIGNAL | Original starter by Codex for Honey B, 2026-09-15.
Reuse/remix permitted; preserve source credit. Interactive: keep MML service running.
Click the sphere: its colour and label update for all clients of the SAME document.
No identity, scoring or private state. Self-contained. Otherside field test pending. -->
<m-cube width="8" height="0.2" depth="8" y="-0.1" color="#162b43"></m-cube>
<m-cylinder radius="0.5" height="1" y="0.5" color="#3378ff"></m-cylinder>
<m-sphere id="signal" radius="0.65" y="1.6" color="#3378ff"></m-sphere>
<m-label id="caption" content="CLICK THE SIGNAL / BLUE" y="2.8" width="5" height="0.6" font-size="34" font-color="#ffffff" color="#162b43"></m-label>
<script>
 const colours = ['#3378ff', '#dfef83', '#ff805e'];
 const names = ['BLUE', 'LIME', 'CORAL'];
 let index = 0;
 document.getElementById('signal').addEventListener('click', () => {
   index = (index + 1) % colours.length;
   document.getElementById('signal').setAttribute('color', colours[index]);
   document.getElementById('caption').setAttribute('content', 'CLICK THE SIGNAL / ' + names[index]);
 });
</script>
