+<style>
+  html,body{height:100%;margin:0}
+  body{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#eef2ff,#fdf2f8);font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#1e293b}
+  #wrap{width:100%;max-width:330px;padding:1.25rem;text-align:center}
+  h2{margin:.2rem 0 1rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#8E8AC8}
+  #q{font-size:1.2rem;font-weight:700;margin-bottom:1.1rem;min-height:2.4em}
+  .opt{display:block;width:100%;margin:.45rem 0;padding:.8rem 1rem;border:2px solid #e2e8f0;border-radius:.9rem;background:#fff;font-size:.98rem;font-weight:600;color:#1e293b;cursor:pointer;transition:transform .1s}
+  .opt:active{transform:scale(.98)}
+  #prog{margin-top:.8rem;color:#94a3b8;font-size:.8rem}
+  #emoji{font-size:4.5rem;line-height:1}
+  #rname{font-size:1.8rem;font-weight:800;margin:.3rem 0}
+  #rdesc{color:#475569;font-size:1rem;margin-bottom:1rem}
+  #again{padding:.7rem 1.5rem;border:0;border-radius:9999px;background:#8E8AC8;color:#fff;font-weight:700;font-size:.95rem;cursor:pointer}
+</style>
+<div id="wrap">
+  <h2>Which US State Are You?</h2>
+  <div id="quiz">
+    <div id="q"></div>
+    <div id="opts"></div>
+    <div id="prog"></div>
+  </div>
+  <div id="result" style="display:none">
+    <div id="emoji"></div>
+    <div id="rname"></div>
+    <div id="rdesc"></div>
+    <button id="again">Take it again</button>
+  </div>
+</div>
+<script>
+  var S={
+    CA:{n:"California",e:"🌴",d:"Laid-back and creative, always chasing the next big idea."},
+    NY:{n:"New York",e:"🗽",d:"Fast, ambitious, and never sits still."},
+    TX:{n:"Texas",e:"🤠",d:"Bold and independent — everything bigger and better."},
+    CO:{n:"Colorado",e:"⛰️",d:"Adventurous and happiest out in the fresh air."},
+    HI:{n:"Hawaii",e:"🌺",d:"Calm, warm, and always goes with the flow."},
+    TN:{n:"Tennessee",e:"🎸",d:"Friendly and soulful, with a song always playing."}
+  };
+  var Q=[
+    {q:"Pick a perfect weekend.",a:[["Beach + sunset","CA"],["Rooftop in the city","NY"],["Backyard BBQ","TX"],["Trail + mountain air","CO"]]},
+    {q:"Your energy is...",a:[["Island time, no rush","HI"],["Live music all night","TN"],["Go-go-go hustle","NY"],["Big and bold","TX"]]},
+    {q:"Dream place to live?",a:[["Cabin in the hills","CO"],["Bungalow by the waves","HI"],["Loft downtown","NY"],["Ranch with space","TX"]]},
+    {q:"Order a drink.",a:[["Cold brew","CA"],["Sweet tea","TN"],["Local craft beer","CO"],["Fresh coconut","HI"]]},
+    {q:"What sounds best?",a:[["A creative project","CA"],["A festival with friends","TN"],["A road trip adventure","CO"],["Networking + the grind","NY"]]}
+  ];
+  var i=0,score={};
+  function showQ(){
+    var item=Q[i];
+    document.getElementById('q').textContent=item.q;
+    var box=document.getElementById('opts');box.innerHTML='';
+    item.a.forEach(function(pair){
+      var b=document.createElement('button');b.className='opt';b.textContent=pair[0];
+      b.onclick=function(){score[pair[1]]=(score[pair[1]]||0)+1;i++;if(i<Q.length)showQ();else showResult();};
+      box.appendChild(b);
+    });
+    document.getElementById('prog').textContent='Question '+(i+1)+' of '+Q.length;
+  }
+  function showResult(){
+    var best=null,bestN=-1;
+    for(var k in S){if((score[k]||0)>bestN){bestN=score[k]||0;best=k;}}
+    var st=S[best];
+    document.getElementById('quiz').style.display='none';
+    document.getElementById('result').style.display='block';
+    document.getElementById('emoji').textContent=st.e;
+    document.getElementById('rname').textContent="You're "+st.n+"!";
+    document.getElementById('rdesc').textContent=st.d;
+  }
+  document.getElementById('again').onclick=function(){i=0;score={};document.getElementById('result').style.display='none';document.getElementById('quiz').style.display='block';showQ();};
+  showQ();
+</script>