+<style>
+  /* Soft, warm Liveloop look. */
+  html, body { margin: 0; height: 100%; overflow: hidden; background: #FFF3EA; color: #16110D; font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
+  .orb { position: absolute; border-radius: 50%; filter: blur(48px); opacity: 0.55; pointer-events: none; }
+  .o1 { width: 240px; height: 240px; background: #E8E2FF; top: -70px; left: -50px; }
+  .o2 { width: 220px; height: 220px; background: #FFD0AE; bottom: -60px; right: -40px; }
+  .wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 18px; text-align: center; z-index: 1; box-sizing: border-box; }
+  h1 { margin: 0; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8F857B; }
+  .pick {
+    font-family: "Instrument Serif", Georgia, serif; font-weight: 400;
+    font-size: 2.9rem; line-height: 1.05; color: #FF5A1F;
+    min-height: 1.3em; padding: 0 0.5rem;
+    transition: transform 0.12s ease; overflow-wrap: anywhere;
+  }
+  .pick.locked { transform: scale(1.06); }
+  .spin {
+    padding: 0.7rem 1.6rem; border-radius: 9999px; border: 0;
+    background: #16110D; color: #F4EEE3; font-weight: 500; font-size: 0.95rem; cursor: pointer;
+    transition: transform 0.12s; font-family: inherit;
+  }
+  .spin:active { transform: scale(0.96); }
+  .spin[disabled] { opacity: 0.6; cursor: wait; }
+  .chips { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; max-height: 5rem; overflow: auto; }
+  .chip { padding: 0.2rem 0.6rem; border-radius: 9999px; background: #fff; border: 1px solid rgba(22,17,13,0.08); color: #5C544C; font-size: 0.72rem; }
+  .chip.gone { text-decoration: line-through; opacity: 0.45; }
+  .meta { font-size: 0.72rem; color: #8F857B; }
+</style>
+<div class="orb o1"></div>
+<div class="orb o2"></div>
+<div class="wrap">
+  <h1>Who&#39;s it?</h1>
+  <div class="pick" id="pick">Tap to draw</div>
+  <button class="spin" id="spin">Spin</button>
+  <p class="meta" id="meta"></p>
+  <div class="chips" id="chips"></div>
+</div>
+<script>
+(function(){
+  var pool = ["Alice","Bob","Carol","David","Elena","Frank"];
+  var drawn = [];
+  var spinning = false;
+  var pick = document.getElementById('pick');
+  var btn = document.getElementById('spin');
+  var meta = document.getElementById('meta');
+  var chipsEl = document.getElementById('chips');
+ 
+  function renderChips(){
+    chipsEl.innerHTML = '';
+    pool.forEach(function(n){
+      var c = document.createElement('span');
+      c.className = 'chip' + (drawn.indexOf(n) >= 0 ? ' gone' : '');
+      c.textContent = n;
+      chipsEl.appendChild(c);
+    });
+    meta.textContent = drawn.length + ' / ' + pool.length + ' drawn';
+  }
+ 
+  function available(){
+    return pool.filter(function(n){ return drawn.indexOf(n) < 0; });
+  }
+ 
+  function spin(){
+    if (spinning) return;
+    var rest = available();
+    if (rest.length === 0) {
+      drawn = [];
+      renderChips();
+      pick.textContent = 'Pool reset';
+      pick.classList.remove('locked');
+      return;
+    }
+    spinning = true;
+    btn.disabled = true;
+    pick.classList.remove('locked');
+    var frames = 16 + Math.floor(Math.random() * 8);
+    var delay = 50;
+    var i = 0;
+    function tick(){
+      var sample = rest[Math.floor(Math.random() * rest.length)];
+      pick.textContent = sample;
+      i++;
+      delay += 12;
+      if (i >= frames) {
+        var winner = rest[Math.floor(Math.random() * rest.length)];
+        pick.textContent = winner;
+        pick.classList.add('locked');
+        drawn.push(winner);
+        renderChips();
+        spinning = false;
+        btn.disabled = false;
+        return;
+      }
+      setTimeout(tick, delay);
+    }
+    tick();
+  }
+ 
+  btn.addEventListener('click', spin);
+  pick.addEventListener('click', spin);
+  renderChips();
+})();
+</script>
+<script>/*ll-media-controls*/
+(function(){
+  function wire(){
+    var ll = window.liveloop; if(!ll || !ll.declareMedia) return;
+    var nodes = [].slice.call(document.querySelectorAll('video,audio')).filter(function(el){
+      return !(el.id && el.id.indexOf('ll-')===0) && !el.hasAttribute('data-ll-unmanaged');
+    });
+    if(!nodes.length) return;
+    var hasVideo = nodes.some(function(el){ return el.tagName==='VIDEO'; });
+    ll.declareMedia({ sound:true, playback:hasVideo });
+    var paused=false;
+    function play(el){ try{ var p=el.play&&el.play(); if(p&&p.catch)p.catch(function(){}); }catch(e){} }
+    function applyMuted(m){ nodes.forEach(function(el){ try{ el.muted=m; }catch(e){} if(!m&&!paused) play(el); }); }
+    function applyPaused(p){ paused=p; nodes.forEach(function(el){ try{ if(p){ el.pause&&el.pause(); } else { play(el); } }catch(e){} }); }
+    applyMuted(!!ll.muted);
+    if(ll.onMute) ll.onMute(applyMuted);
+    if(ll.onPause) ll.onPause(applyPaused);
+  }
+  if(document.readyState==='loading'){ document.addEventListener('DOMContentLoaded', wire); } else { wire(); }
+})();
+</script>