+<style>
+  /* Soft, warm Liveloop look. */
+  html, body { margin: 0; height: 100%; overflow: hidden; background: #FFF3EA; color: #16110D; font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
+  .orb { position: absolute; border-radius: 50%; filter: blur(48px); opacity: 0.55; pointer-events: none; }
+  .o1 { width: 240px; height: 240px; background: #E8E2FF; top: -70px; left: -50px; }
+  .o2 { width: 220px; height: 220px; background: #FFD0AE; bottom: -60px; right: -40px; }
+  .wrap { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 24px 20px; gap: 12px; z-index: 1; box-sizing: border-box; }
+  h1 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 28px; line-height: 1.05; margin: 0; text-align: center; letter-spacing: -0.01em; }
+  .prompt { margin: 0; text-align: center; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8F857B; }
+  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; min-height: 0; }
+  .card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 18px; border: 1.5px solid rgba(22,17,13,0.08); background: #fff; cursor: pointer; padding: 12px; min-height: 0; transition: transform 0.18s ease, opacity 0.25s ease, border-color 0.18s, background 0.18s; appearance: none; font: inherit; color: inherit; }
+  .card:hover { border-color: #16110D; }
+  .card:active { transform: scale(0.97); }
+  .card .ic { font-size: 2.4rem; line-height: 1; }
+  .card .ic-img { width: 3.2rem; height: 3.2rem; object-fit: cover; border-radius: 12px; }
+  .card .lb { font-size: 0.92rem; font-weight: 500; text-align: center; }
+  .grid.picked .card { opacity: 0.35; pointer-events: none; }
+  .grid.picked .card.win { opacity: 1; border-color: #6B4EFE; background: #6B4EFE14; transform: translateY(-2px); }
+  .result { display: none; padding: 14px 16px; border-radius: 16px; background: #6B4EFE; color: #fff; line-height: 1.45; font-size: 0.96rem; }
+  .result.show { display: block; }
+  .again { display: none; padding: 11px 20px; border-radius: 9999px; border: 0; background: #16110D; color: #F4EEE3; font-weight: 500; cursor: pointer; font-size: 0.85rem; align-self: center; font-family: inherit; }
+  .again.show { display: inline-block; }
+</style>
+<div class="orb o1"></div>
+<div class="orb o2"></div>
+<div class="wrap">
+  <h1>Which one are you?</h1>
+  <p class="prompt">Pick one</p>
+  <div class="grid" id="grid">
+    
+    <button class="card" type="button" data-i="0">
+      <span class="ic">🌅</span>
+      <span class="lb">Sunrise</span>
+    </button>
+    <button class="card" type="button" data-i="1">
+      <span class="ic">🌊</span>
+      <span class="lb">Ocean</span>
+    </button>
+    <button class="card" type="button" data-i="2">
+      <span class="ic">🔥</span>
+      <span class="lb">Fire</span>
+    </button>
+    <button class="card" type="button" data-i="3">
+      <span class="ic">🌲</span>
+      <span class="lb">Forest</span>
+    </button>
+  </div>
+  <div class="result" id="result"></div>
+  <button class="again" id="again" type="button">Try again</button>
+</div>
+<script>
+(function(){
+  var msgs = ["Early\u2028riser.\u2028You\u2028start\u2028the\u2028day\u2028before\u2028the\u2028day\u2028knows\u2028it's\u2028started.","Calm\u2028on\u2028the\u2028surface,\u2028depth\u2028underneath.\u2028You\u2028read\u2028rooms.","Direct,\u2028intense,\u2028contagious.\u2028People\u2028follow\u2028your\u2028energy.","Quiet,\u2028rooted,\u2028alive.\u2028You\u2028give\u2028people\u2028somewhere\u2028to\u2028land."];
+  var grid = document.getElementById('grid');
+  var result = document.getElementById('result');
+  var again = document.getElementById('again');
+  grid.querySelectorAll('.card').forEach(function(btn){
+    btn.addEventListener('click', function(){
+      if (grid.classList.contains('picked')) return;
+      var i = parseInt(btn.getAttribute('data-i'), 10);
+      btn.classList.add('win');
+      grid.classList.add('picked');
+      result.textContent = msgs[i] || '';
+      result.classList.add('show');
+      again.classList.add('show');
+    });
+  });
+  again.addEventListener('click', function(){
+    grid.classList.remove('picked');
+    grid.querySelectorAll('.card').forEach(function(b){ b.classList.remove('win'); });
+    result.classList.remove('show');
+    result.textContent = '';
+    again.classList.remove('show');
+  });
+})();
+</script>
+<script>/*ll-media-controls*/
+(function(){
+  function wire(){
+    var ll = window.liveloop; if(!ll || !ll.declareMedia) return;
+    var nodes = [].slice.call(document.querySelectorAll('video,audio')).filter(function(el){
+      return !(el.id && el.id.indexOf('ll-')===0) && !el.hasAttribute('data-ll-unmanaged');
+    });
+    if(!nodes.length) return;
+    var hasVideo = nodes.some(function(el){ return el.tagName==='VIDEO'; });
+    ll.declareMedia({ sound:true, playback:hasVideo });
+    var paused=false;
+    function play(el){ try{ var p=el.play&&el.play(); if(p&&p.catch)p.catch(function(){}); }catch(e){} }
+    function applyMuted(m){ nodes.forEach(function(el){ try{ el.muted=m; }catch(e){} if(!m&&!paused) play(el); }); }
+    function applyPaused(p){ paused=p; nodes.forEach(function(el){ try{ if(p){ el.pause&&el.pause(); } else { play(el); } }catch(e){} }); }
+    applyMuted(!!ll.muted);
+    if(ll.onMute) ll.onMute(applyMuted);
+    if(ll.onPause) ll.onPause(applyPaused);
+  }
+  if(document.readyState==='loading'){ document.addEventListener('DOMContentLoaded', wire); } else { wire(); }
+})();
+</script>