+<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1rem;font-family:system-ui,sans-serif;background:linear-gradient(180deg,#fafafa,#e4e4e7);padding:1.5rem;text-align:center;">
+  <div style="font-size:3rem">👋</div>
+  <h1 style="margin:0;font-size:1.5rem;font-weight:600;letter-spacing:-0.02em">Hello, Liveloop</h1>
+  <p id="status" style="margin:0;color:#52525b;font-size:0.9rem;max-width:24ch">Tap to add yourself to the count.</p>
+  <button id="cta" style="padding:0.55rem 1.25rem;border-radius:9999px;border:0;background:#18181b;color:white;font-size:0.9rem;font-weight:500;cursor:pointer">Tap me</button>
+  <p style="margin:0;color:#a1a1aa;font-size:0.72rem">Counts every unique person who taps — once each.</p>
+</div>
+<script>
+(function(){
+  var btn = document.getElementById('cta');
+  var status = document.getElementById('status');
+  btn.addEventListener('click', function(){
+    if (!(window.liveloop && window.liveloop.tally)) {
+      status.textContent = 'Tapped! (live counter unavailable here)';
+      return;
+    }
+    btn.disabled = true;
+    window.liveloop.tally().then(function(r){
+      btn.disabled = false;
+      if (r && r.ok) {
+        btn.textContent = 'Tapped \u2713';
+        status.textContent = r.count === 1
+          ? "You're the first person to tap this. 🎉"
+          : r.count.toLocaleString() + ' people have tapped this.';
+      } else {
+        status.textContent = 'Tapped! (counter offline)';
+      }
+    }, function(){
+      btn.disabled = false;
+      status.textContent = 'Tapped! (counter offline)';
+    });
+  });
+})();
+</script>