+<style>
+  html,body{height:100%;margin:0;overflow:hidden;background:#FFF6E9;}
+  *{box-sizing:border-box;}
+  #wrap{position:relative;height:100%;width:100%;display:flex;flex-direction:column;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;background:radial-gradient(110% 80% at 50% 0%,#FFF9EF 0%,#FFEFD8 70%,#FBE6C8 100%);}
+  #head{padding:1.15rem 1.25rem .2rem;}
+  #head h1{margin:0;font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400;font-size:2.35rem;line-height:1;color:#4a3a55;}
+  #head p{margin:.2rem 0 0;font-size:.8rem;color:#a08d77;font-weight:500;}
+  #best{display:inline-block;font-size:.72rem;font-weight:700;color:#9b7bd4;background:rgba(124,92,255,.1);border:1px solid rgba(124,92,255,.22);border-radius:999px;padding:.32rem .7rem;margin-top:.5rem;}
+  #mid{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 1.2rem 2.2rem;}
+  #board{position:relative;width:100%;max-width:min(82vw,46vh);aspect-ratio:1;}
+  .petal{position:absolute;width:48.5%;height:48.5%;border:0;cursor:pointer;opacity:.92;transition:filter .1s,transform .1s,opacity .1s;box-shadow:0 6px 18px rgba(90,60,30,.16),inset 0 1px 0 rgba(255,255,255,.35);}
+  .petal:nth-child(1){left:0;top:0;background:#7C5CFF;border-radius:100% 22px 22px 22px;}
+  .petal:nth-child(2){right:0;top:0;background:#E14C8F;border-radius:22px 100% 22px 22px;}
+  .petal:nth-child(3){left:0;bottom:0;background:#F6A93B;border-radius:22px 22px 22px 100%;}
+  .petal:nth-child(4){right:0;bottom:0;background:#FF5A1F;border-radius:22px 22px 100% 22px;}
+  .petal.lit{filter:brightness(1.45) saturate(1.15);transform:scale(1.035);opacity:1;}
+  .petal.dim{opacity:.45;}
+  #core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38%;aspect-ratio:1;border-radius:50%;background:#FFF9EF;border:1px solid rgba(120,90,50,.18);box-shadow:0 8px 24px rgba(90,60,30,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;z-index:2;}
+  #core b{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:2rem;line-height:1;color:#4a3a55;}
+  #core span{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#a08d77;margin-top:.15rem;text-align:center;padding:0 .4rem;}
+  #board.shake{animation:shk .4s;}
+  @keyframes shk{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
+</style>
+<div id="wrap">
+  <div id="head">
+    <h1>Echo</h1><p>Repeat the melody. One more note each round.</p>
+    <div id="best">best 0</div>
+  </div>
+  <div id="mid">
+    <div id="board">
+      <button class="petal" data-i="0"></button>
+      <button class="petal" data-i="1"></button>
+      <button class="petal" data-i="2"></button>
+      <button class="petal" data-i="3"></button>
+      <div id="core"><b id="round">&#9654;</b><span id="state">tap to start</span></div>
+    </div>
+  </div>
+</div>
+<script>
+(function(){
+  var LL=window.liveloop||null;
+  var muted = LL ? LL.muted : true;
+  if(LL && LL.onMute){ try{ LL.onMute(function(m){ muted=m; }); }catch(e){} }
+  if(LL && LL.declareMedia){ try{ LL.declareMedia({sound:true}); }catch(e){} }
+  var _ac=null;
+  function actx(){ if(!_ac){ try{ _ac=new (window.AudioContext||window.webkitAudioContext)(); }catch(e){ _ac=null; } } return _ac; }
+  var NOTES=[392.0,523.25,659.25,783.99]; // G4 C5 E5 G5 — petals 0..3
+  function tone(i,dur){
+    if(muted) return; var c=actx(); if(!c) return;
+    var t=c.currentTime, o=c.createOscillator(), g=c.createGain();
+    o.type='sine'; o.frequency.setValueAtTime(NOTES[i],t);
+    g.gain.setValueAtTime(0.0001,t); g.gain.exponentialRampToValueAtTime(0.16,t+0.012);
+    g.gain.exponentialRampToValueAtTime(0.0001,t+(dur||0.38));
+    o.connect(g); g.connect(c.destination); o.start(t); o.stop(t+(dur||0.38)+0.05);
+  }
+  function buzz(){
+    if(muted) return; var c=actx(); if(!c) return;
+    var t=c.currentTime, o=c.createOscillator(), g=c.createGain();
+    o.type='sawtooth'; o.frequency.setValueAtTime(110,t);
+    g.gain.setValueAtTime(0.0001,t); g.gain.exponentialRampToValueAtTime(0.1,t+0.01);
+    g.gain.exponentialRampToValueAtTime(0.0001,t+0.45);
+    o.connect(g); g.connect(c.destination); o.start(t); o.stop(t+0.5);
+  }
+ 
+  var board=document.getElementById('board');
+  var petals=[].slice.call(document.querySelectorAll('.petal'));
+  var core=document.getElementById('core');
+  var roundEl=document.getElementById('round'), stateEl=document.getElementById('state'), bestEl=document.getElementById('best');
+ 
+  var seq=[], at=0, phase='idle'; // idle | show | input | over
+  var best=0, timers=[];
+ 
+  // persisted best — per-viewer storage via the platform when available
+  try{
+    if(LL && LL.storage && LL.storage.get){
+      LL.storage.get().then(function(s){
+        if(s && s.best){ best=s.best|0; bestEl.textContent='best '+best; }
+      }).catch(function(){});
+    }
+  }catch(e){}
+  function saveBest(){
+    try{ if(LL && LL.storage && LL.storage.set) LL.storage.set({best:best}); }catch(e){}
+  }
+ 
+  function later(fn,ms){ timers.push(setTimeout(fn,ms)); }
+  function clearTimers(){ while(timers.length) clearTimeout(timers.pop()); }
+  function lit(i,ms){
+    petals[i].classList.add('lit'); tone(i);
+    later(function(){ petals[i].classList.remove('lit'); },ms||300);
+  }
+  function setCore(big,small){ roundEl.innerHTML=big; stateEl.textContent=small; }
+  function dimAll(d){ petals.forEach(function(p){ p.classList.toggle('dim',d); }); }
+ 
+  function showSeq(){
+    phase='show'; dimAll(false); setCore(String(seq.length),'listen…');
+    var i=0;
+    function step(){
+      if(phase!=='show') return;
+      lit(seq[i],320);
+      i++;
+      if(i<seq.length) later(step,460);
+      else later(function(){ phase='input'; at=0; setCore(String(seq.length),'your turn'); },480);
+    }
+    later(step,520);
+  }
+  function nextRound(){
+    seq.push(Math.floor(Math.random()*4));
+    showSeq();
+  }
+  function start(){
+    clearTimers(); seq=[]; at=0; dimAll(false);
+    nextRound();
+  }
+  function gameOver(){
+    phase='over'; buzz();
+    board.classList.add('shake');
+    later(function(){ board.classList.remove('shake'); },450);
+    var score=seq.length-1;
+    if(score>best){ best=score; bestEl.textContent='best '+best; saveBest(); }
+    dimAll(true);
+    setCore(String(score),'round reached — tap to retry');
+  }
+ 
+  petals.forEach(function(p){
+    p.addEventListener('pointerdown',function(e){
+      e.preventDefault();
+      if(phase!=='input') return;
+      var i=+p.getAttribute('data-i');
+      lit(i,240);
+      if(i!==seq[at]){ gameOver(); return; }
+      at++;
+      if(at===seq.length){
+        phase='wait'; setCore(String(seq.length),'nice!');
+        later(nextRound,820);
+      }
+    });
+  });
+  core.addEventListener('pointerdown',function(e){
+    e.preventDefault();
+    if(phase==='idle'||phase==='over') start();
+  });
+ 
+  if(LL && LL.onPause){ try{ LL.onPause(function(p){
+    if(p && (phase==='show'||phase==='input'||phase==='wait')){
+      clearTimers(); phase='idle'; dimAll(false); setCore('&#9654;','tap to start');
+    }
+  }); }catch(e){} }
+})();
+</script>