+<style>
+  html, body { height:100%; margin:0; font-family:system-ui,sans-serif; background:#fafafa; color:#111; }
+  .wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:1rem; padding:1.5rem; text-align:center; }
+  h1 { margin:0; font-size:1.25rem; max-width:24ch; }
+  .opt { width:100%; max-width:18rem; padding:.75rem 1rem; border-radius:.75rem; border:1px solid #e4e4e7; background:#fff; cursor:pointer; font-weight:500; }
+  .opt.win { border-color:#10b981; }
+  .pct { font-size:.85rem; color:#52525b; }
+</style>
+<div class="wrap">
+  <h1>Tabs or spaces?</h1>
+  <button class="opt" data-i="0">Tabs</button>
+  <button class="opt" data-i="1">Spaces</button>
+  <div class="pct" id="pct"></div>
+</div>
+<script>
+(function(){
+  var counts=[0,0], picked=null;
+  async function load(){
+    try { var s = await window.liveloop.storage.get(); counts = s.counts || [0,0]; picked = (typeof s.picked === 'number') ? s.picked : null; } catch(e){}
+    render();
+  }
+  function render(){
+    var total = counts[0]+counts[1] || 1;
+    document.querySelectorAll('.opt').forEach(function(b,i){
+      var pct = Math.round(100*counts[i]/total);
+      b.textContent = (i===0?'Tabs':'Spaces') + (picked!==null ? ' · '+pct+'%' : '');
+      if (picked===i) b.classList.add('win');
+    });
+    document.getElementById('pct').textContent = picked!==null ? (total+' votes counted') : 'Tap a button to vote.';
+  }
+  document.querySelectorAll('.opt').forEach(function(b){
+    b.addEventListener('click', async function(){
+      if (picked!==null) return;
+      var i = parseInt(b.getAttribute('data-i'),10);
+      counts[i]++; picked = i;
+      try { await window.liveloop.storage.set({ counts: counts, picked: picked }); } catch(e){}
+      render();
+    });
+  });
+  load();
+})();
+</script>