+<style>
+  html,body{height:100%;margin:0}
+  body{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#1e293b,#0f172a);color:#fff;font-family:system-ui,-apple-system,Segoe UI,sans-serif}
+  #wrap{width:100%;max-width:330px;padding:1.1rem;text-align:center}
+  h2{margin:.1rem 0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#fbbf24}
+  .sub{color:#94a3b8;font-size:.74rem;margin-bottom:.9rem}
+  .row{text-align:left;margin:.5rem 0}
+  .row label{display:block;font-size:.8rem;color:#cbd5e1;margin-bottom:.2rem}
+  .row input,.row select{width:100%;box-sizing:border-box;border:1px solid #334155;border-radius:.6rem;padding:.55rem;font-size:16px;background:#1e293b;color:#fff}
+  .act{margin-top:.9rem;padding:.7rem 1.6rem;border:0;border-radius:9999px;background:#fbbf24;color:#0f172a;font-weight:800;font-size:1rem;cursor:pointer}
+  #result{display:none}
+  #age{font-size:3.4rem;font-weight:800;line-height:1;margin:.3rem 0}
+  #line{font-size:1rem;color:#e2e8f0;margin:.3rem 0}
+  #days{color:#fbbf24;font-weight:700}
+  .disc{color:#64748b;font-size:.7rem;margin-top:1rem;line-height:1.4}
+</style>
+<div id="wrap">
+  <h2>⏳ Life Clock</h2>
+  <div class="sub">A playful estimate — just for fun!</div>
+  <div id="form">
+    <div class="row"><label>Your age</label><input id="cage" type="number" min="1" max="110" placeholder="e.g. 30"></div>
+    <div class="row"><label>Sex</label><select id="sex"><option value="f">Female</option><option value="m">Male</option><option value="x">Prefer not to say</option></select></div>
+    <div class="row"><label>Do you smoke?</label><select id="smoke"><option value="no">No</option><option value="yes">Yes</option></select></div>
+    <div class="row"><label>Drinking</label><select id="drink"><option value="none">Rarely / never</option><option value="mod">In moderation</option><option value="heavy">Heavily</option></select></div>
+    <div class="row"><label>Exercise</label><select id="ex"><option value="often">Often</option><option value="some">Sometimes</option><option value="rare">Rarely</option></select></div>
+    <button class="act" id="go">Estimate</button>
+  </div>
+  <div id="result">
+    <div class="sub">Your fun estimate lands around age</div>
+    <div id="age"></div>
+    <div id="line"></div>
+    <button class="act" id="again">Try again</button>
+    <div class="disc">Just for fun — this is NOT a real prediction, and not medical or actuarial advice. Be kind to yourself and enjoy the time you've got. ❤️</div>
+  </div>
+</div>
+<script>
+  function val(id){ return document.getElementById(id).value; }
+  document.getElementById('go').onclick=function(){
+    var age=parseInt(val('cage'),10);
+    if(!age||age<1||age>110){ alert('Enter your age first.'); return; }
+    var sex=val('sex');
+    var base = sex==='f'?81 : sex==='m'?76 : 79;
+    var adj=0;
+    if(val('smoke')==='yes') adj-=9;
+    var d=val('drink'); if(d==='heavy')adj-=5; else if(d==='mod')adj-=1; else adj+=1;
+    var e=val('ex'); if(e==='often')adj+=4; else if(e==='some')adj+=1; else adj-=2;
+    var est=base+adj;
+    if(est<age+1) est=age+1;
+    var years=est-age;
+    var nowYear=new Date().getFullYear();
+    document.getElementById('form').style.display='none';
+    document.getElementById('result').style.display='block';
+    document.getElementById('age').textContent=est;
+    var msg = years>40 ? "Loads of time — about " : years>15 ? "Plenty ahead — roughly " : "Make it count — around ";
+    document.getElementById('line').innerHTML = msg + "<span id='days'>" + years + " more years</span>, somewhere near " + (nowYear+years) + ". 🎉";
+  };
+  document.getElementById('again').onclick=function(){ document.getElementById('result').style.display='none'; document.getElementById('form').style.display='block'; };
+</script>