+<style>
+  html,body{height:100%;margin:0}
+  #pad{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#fff;cursor:pointer;user-select:none;transition:background .1s;background:#1e293b;padding:1.5rem}
+  #pad.wait{background:#b91c1c}#pad.go{background:#16a34a}#pad.early{background:#b45309}
+  #big{font-size:2rem;font-weight:800;margin-bottom:.5rem}
+  #sub{font-size:1rem;opacity:.92;max-width:22ch}
+  #best{margin-top:1rem;font-size:.85rem;opacity:.8}
+</style>
+<div id="pad">
+  <div id="big">Reaction Time ⚡</div>
+  <div id="sub">Tap to start. When it turns green, tap as fast as you can.</div>
+  <div id="best"></div>
+</div>
+<script>
+  var pad=document.getElementById('pad'),big=document.getElementById('big'),sub=document.getElementById('sub'),bestEl=document.getElementById('best');
+  var state='idle',timer=null,startAt=0,best=0;
+  function rate(ms){if(ms<200)return '🏎️ Lightning';if(ms<280)return '🔥 Quick';if(ms<360)return '👍 Solid';if(ms<460)return '🙂 Okay';return '🐢 Warming up';}
+  function toWait(){
+    state='wait';pad.className='wait';big.textContent='Wait for green...';sub.textContent='Don\'t tap yet';
+    timer=setTimeout(function(){state='go';pad.className='go';big.textContent='TAP!';sub.textContent='';startAt=Date.now();},1500+Math.random()*2500);
+  }
+  function result(ms){
+    state='result';pad.className='';big.textContent=ms+' ms';sub.textContent=rate(ms)+' · tap to try again';
+    if(best===0||ms<best){best=ms;}
+    bestEl.textContent='Best: '+best+' ms';
+  }
+  pad.onclick=function(){
+    if(state==='idle'||state==='result'||state==='early'){toWait();return;}
+    if(state==='wait'){clearTimeout(timer);state='early';pad.className='early';big.textContent='Too soon!';sub.textContent='Tap to try again';return;}
+    if(state==='go'){result(Date.now()-startAt);return;}
+  };
+</script>