+<style>
+  /* Soft, warm look — matches the Liveloop design system. */
+  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.6; pointer-events: none; }
+  .o1 { width: 260px; height: 260px; background: #FFD0AE; top: -80px; left: -60px; }
+  .o2 { width: 220px; height: 220px; background: #E8E2FF; bottom: -60px; right: -40px; }
+  .wrap { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 26px 22px; z-index: 1; box-sizing: border-box; }
+  .badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: #fff; border: 1px solid rgba(22,17,13,0.08); border-radius: 9999px; padding: 6px 12px; font-size: 12px; font-weight: 500; color: #2563eb; margin-bottom: 10px; }
+  .badge i { width: 6px; height: 6px; background: #2563eb; border-radius: 50%; }
+  h1 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.08; margin: 0 0 4px; letter-spacing: -0.01em; }
+  .sub { font-size: 13px; color: #5C544C; margin: 0 0 16px; }
+  .bar { height: 6px; border-radius: 99px; background: rgba(22,17,13,0.06); overflow: hidden; margin-bottom: 18px; }
+  .bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #2563eb, #FF5A1F); transition: width 0.35s ease; border-radius: 99px; }
+  .opts { display: flex; flex-direction: column; gap: 10px; }
+  .opt { background: #fff; border: 1.5px solid rgba(22,17,13,0.08); border-radius: 18px; padding: 14px 16px; cursor: pointer; display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; text-align: left; transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease; color: inherit; }
+  .opt:hover { border-color: #16110D; }
+  .opt:active { transform: scale(0.98); }
+  .opt .k { width: 28px; height: 28px; border-radius: 8px; background: #F4EEE3; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #5C544C; font-family: "JetBrains Mono", ui-monospace, monospace; flex-shrink: 0; }
+  .opt.correct { border-color: #2563eb; background: #2563eb1a; }
+  .opt.correct .k { background: #2563eb; color: #fff; }
+  .opt.wrong { border-color: #E14C8F; background: #FAD5E4; }
+  .opt[disabled] { cursor: default; }
+  .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #8F857B; padding-top: 16px; }
+  .result { display: none; flex-direction: column; justify-content: center; align-items: center; text-align: center; flex: 1; }
+  .result.on { display: flex; }
+  .result .emoji { font-size: 64px; line-height: 1; margin-bottom: 8px; }
+  .result h2 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 42px; margin: 0 0 6px; }
+  .result p { color: #5C544C; margin: 0 0 22px; max-width: 240px; }
+  .result button { background: #16110D; color: #F4EEE3; border: 0; border-radius: 9999px; padding: 12px 22px; font-weight: 500; font-size: 14px; cursor: pointer; font-family: inherit; }
+</style>
+<div class="orb o1"></div>
+<div class="orb o2"></div>
+<div class="wrap" id="qWrap">
+  <span class="badge"><i></i><span id="badge"></span></span>
+  <h1>Quick maths</h1>
+  
+  <div class="bar"><i id="bar"></i></div>
+  <div class="opts" id="opts"></div>
+  <div class="foot"><span id="count"></span><span>tap to answer →</span></div>
+</div>
+<div class="wrap result" id="rWrap">
+  <div class="emoji" id="rEmoji">🎉</div>
+  <h2 id="rTitle"></h2>
+  <p id="rText"></p>
+  <button id="rBtn">Try again</button>
+</div>
+<script>
+(function(){
+  var QS = [{"q":"What is 7 × 8?","a":["54","56","64"],"correct":1},{"q":"Which planet is the Red Planet?","a":["Venus","Mars","Jupiter"],"correct":1},{"q":"How many continents are there?","a":["5","6","7"],"correct":2}];
+  var KEYS = ['A','B','C','D'];
+  var qWrap = document.getElementById('qWrap');
+  var rWrap = document.getElementById('rWrap');
+  var optsEl = document.getElementById('opts');
+  var badgeEl = document.getElementById('badge');
+  var barEl = document.getElementById('bar');
+  var countEl = document.getElementById('count');
+  var i = 0, score = 0, locked = false;
+  badgeEl.textContent = QS.length + (QS.length === 1 ? ' question' : '-question quiz');
+ 
+  function render(){
+    var item = QS[i];
+    countEl.textContent = (i + 1) + ' of ' + QS.length;
+    barEl.style.width = ((i + 1) / QS.length * 100) + '%';
+    optsEl.innerHTML = '';
+    item.a.forEach(function(optText, idx){
+      var el = document.createElement('button');
+      el.className = 'opt';
+      el.type = 'button';
+      var k = document.createElement('div'); k.className = 'k'; k.textContent = KEYS[idx] || '?';
+      var label = document.createElement('div'); label.textContent = optText;
+      el.appendChild(k); el.appendChild(label);
+      el.addEventListener('click', function(){
+        if (locked) return;
+        locked = true;
+        var children = optsEl.children;
+        for (var j = 0; j < children.length; j++) {
+          children[j].disabled = true;
+          if (j === item.correct) children[j].classList.add('correct');
+        }
+        if (idx === item.correct) score++;
+        else el.classList.add('wrong');
+        setTimeout(advance, 850);
+      });
+      optsEl.appendChild(el);
+    });
+  }
+ 
+  function advance(){
+    i++;
+    if (i >= QS.length) { finish(); return; }
+    locked = false;
+    render();
+  }
+ 
+  function finish(){
+    var ratio = score / QS.length;
+    var emoji = ratio >= 0.8 ? '🏆' : ratio >= 0.5 ? '👍' : '🌱';
+    document.getElementById('rEmoji').textContent = emoji;
+    document.getElementById('rTitle').textContent = score + ' / ' + QS.length;
+    document.getElementById('rText').textContent =
+      ratio >= 0.8 ? 'Nailed it.' : ratio >= 0.5 ? 'Nice — give it another go?' : 'Warm up and try again.';
+    qWrap.style.display = 'none';
+    rWrap.classList.add('on');
+  }
+ 
+  document.getElementById('rBtn').addEventListener('click', function(){
+    i = 0; score = 0; locked = false;
+    rWrap.classList.remove('on');
+    qWrap.style.display = 'flex';
+    render();
+  });
+ 
+  render();
+})();
+</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>