+<style>
+  html,body{height:100%;margin:0}
+  body{display:flex;align-items:center;justify-content:center;background:#0f172a;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#fff}
+  #wrap{width:100%;max-width:330px;padding:1.25rem;text-align:center}
+  h2{margin:0 0 1.1rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#94a3b8}
+  .opt{position:relative;width:100%;margin:.5rem 0;padding:1.1rem 1rem;border:0;border-radius:1rem;font-size:1.05rem;font-weight:700;color:#fff;cursor:pointer;overflow:hidden;transition:transform .1s}
+  .opt:active{transform:scale(.98)}
+  #a{background:#6366f1}#b{background:#C8765A}
+  .fill{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.22);width:0;transition:width .5s}
+  .label{position:relative}
+  .pct{position:relative;display:block;font-size:.8rem;font-weight:600;opacity:.9;margin-top:.2rem;min-height:1em}
+  #or{margin:.4rem 0;color:#64748b;font-weight:700;font-size:.8rem;letter-spacing:.2em}
+  #next{margin-top:1.1rem;padding:.65rem 1.5rem;border:0;border-radius:9999px;background:#fff;color:#0f172a;font-weight:700;cursor:pointer;display:none}
+  #count{margin-top:.8rem;color:#64748b;font-size:.78rem}
+</style>
+<div id="wrap">
+  <h2>Would You Rather</h2>
+  <button class="opt" id="a"><span class="fill" id="fa"></span><span class="label" id="la"></span><span class="pct" id="pa"></span></button>
+  <div id="or">OR</div>
+  <button class="opt" id="b"><span class="fill" id="fb"></span><span class="label" id="lb"></span><span class="pct" id="pb"></span></button>
+  <button id="next">Next →</button>
+  <div id="count"></div>
+</div>
+<script>
+  var D=[
+    {a:"Free tacos for life",b:"Free pizza for life",ap:47},
+    {a:"Always hit every green light",b:"Never wait in a line again",ap:41},
+    {a:"Have a personal chef",b:"Have a personal driver",ap:58},
+    {a:"Be able to fly",b:"Be invisible",ap:62},
+    {a:"Endless beach summer",b:"Endless snowy winter",ap:69},
+    {a:"Never get stuck in traffic",b:"Never get a bad night's sleep",ap:35},
+    {a:"Win a road trip across the USA",b:"Win a week in New York City",ap:54},
+    {a:"Always know the weather",b:"Always find parking",ap:44},
+    {a:"Be the funniest in the room",b:"Be the smartest in the room",ap:51},
+    {a:"Unlimited movie tickets",b:"Unlimited concert tickets",ap:46},
+    {a:"Coffee that's always perfect",b:"Wi-Fi that's always fast",ap:33},
+    {a:"Meet your favorite athlete",b:"Meet your favorite musician",ap:48}
+  ];
+  var order=D.map(function(_,k){return k;});
+  for(var s=order.length-1;s>0;s--){var j=Math.floor(Math.random()*(s+1));var tmp=order[s];order[s]=order[j];order[j]=tmp;}
+  var idx=0,answered=0,locked=false;
+  function show(){
+    locked=false;
+    var d=D[order[idx%order.length]];
+    document.getElementById('la').textContent=d.a;
+    document.getElementById('lb').textContent=d.b;
+    document.getElementById('pa').textContent='';
+    document.getElementById('pb').textContent='';
+    document.getElementById('fa').style.width='0';
+    document.getElementById('fb').style.width='0';
+    document.getElementById('next').style.display='none';
+  }
+  function pick(side){
+    if(locked)return;locked=true;answered++;
+    var d=D[order[idx%order.length]];
+    var bp=100-d.ap;
+    document.getElementById('fa').style.width=d.ap+'%';
+    document.getElementById('fb').style.width=bp+'%';
+    document.getElementById('pa').textContent=d.ap+'% '+(side==='a'?'· you':'');
+    document.getElementById('pb').textContent=bp+'% '+(side==='b'?'· you':'');
+    document.getElementById('next').style.display='inline-block';
+    document.getElementById('count').textContent=answered+' answered';
+  }
+  document.getElementById('a').onclick=function(){pick('a');};
+  document.getElementById('b').onclick=function(){pick('b');};
+  document.getElementById('next').onclick=function(){idx++;show();};
+  show();
+</script>