+<style>
+  html,body{height:100%;margin:0;overflow:hidden;background:#F4EEE3;}
+  *{box-sizing:border-box;}
+  #wrap{position:relative;height:100%;width:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none;}
+  canvas{display:block;width:100%;height:100%;position:absolute;inset:0;}
+  #head{position:absolute;top:0;left:0;right:0;padding:1.15rem 1.25rem .5rem;pointer-events:none;z-index:2;}
+  #head h1{margin:0;font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400;font-size:2.35rem;line-height:1;letter-spacing:.01em;color:#16110D;}
+  #head p{margin:.25rem 0 0;font-size:.82rem;color:#8F857B;font-weight:500;}
+  #count{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:2;pointer-events:none;font-size:.8rem;font-weight:700;color:#5C544C;background:rgba(255,255,255,.6);backdrop-filter:blur(6px);border:1px solid rgba(0,0,0,.05);border-radius:999px;padding:.4rem .9rem;letter-spacing:.02em;}
+  #hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none;font-family:"Instrument Serif",Georgia,serif;font-size:1.15rem;color:#8F857B;opacity:.9;transition:opacity .6s ease;text-align:center;}
+</style>
+<div id="wrap">
+  <canvas id="orbs"></canvas>
+  <canvas id="cv"></canvas>
+  <div id="head"><h1>Bloom Garden</h1><p>Tap anywhere to plant a flower</p></div>
+  <div id="hint">touch to grow something</div>
+  <div id="count">0 blooms</div>
+</div>
+<script>
+(function(){
+  var LL = window.liveloop || null;
+  // --- sound: short tap SFX, gated on the feed-wide mute. We declareMedia so
+  // the platform draws ONE sound control in its chrome (sound carries across
+  // loops). The SDK auto-unlocks the AudioContext on the first gesture. ---
+  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; }
+  function tone(freq,dur,type,vol,delay){
+    if(muted) return; var c=actx(); if(!c) return;
+    var t=c.currentTime+(delay||0), o=c.createOscillator(), g=c.createGain();
+    o.type=type||'sine'; o.frequency.setValueAtTime(freq,t);
+    g.gain.setValueAtTime(0.0001,t); g.gain.exponentialRampToValueAtTime(vol||0.16,t+0.014);
+    g.gain.exponentialRampToValueAtTime(0.0001,t+dur);
+    o.connect(g); g.connect(c.destination); o.start(t); o.stop(t+dur+0.03);
+  }
+  var PENTA=[523.25,587.33,659.25,783.99,880.0];
+  function chime(){ var f=PENTA[Math.floor(Math.random()*PENTA.length)]; tone(f,0.62,'sine',0.12); tone(f*2,0.4,'sine',0.045); }
+  var wrap = document.getElementById('wrap');
+  var orbC = document.getElementById('orbs'), oc = orbC.getContext('2d');
+  var cv = document.getElementById('cv'), ctx = cv.getContext('2d');
+  var hint = document.getElementById('hint'), countEl = document.getElementById('count');
+  var W=0, H=0, dpr=1, T=0, raf=0, paused=false;
+  var flowers=[], pollen=[], planted=0;
+  var PETAL=['#6B4EFE','#7C5CFF','#E14C8F','#FF5A1F','#FF7A3C','#F6A93B'];
+  var CORE=['#FFE3D2','#FFF3EA','#E8E2FF'];
+ 
+  function size(){
+    var r=wrap.getBoundingClientRect();
+    W=Math.max(160,r.width); H=Math.max(220,r.height);
+    dpr=Math.min(window.devicePixelRatio||1,2.5);
+    [orbC,cv].forEach(function(c){ c.width=Math.round(W*dpr); c.height=Math.round(H*dpr); });
+    oc.setTransform(dpr,0,0,dpr,0,0); ctx.setTransform(dpr,0,0,dpr,0,0);
+    drawOrbs();
+  }
+ 
+  // Soft blurred gradient orbs in the corners — drawn once per resize.
+  function blob(x,y,r,col){
+    var g=oc.createRadialGradient(x,y,0,x,y,r);
+    g.addColorStop(0,col); g.addColorStop(1,'rgba(244,238,227,0)');
+    oc.fillStyle=g; oc.beginPath(); oc.arc(x,y,r,0,Math.PI*2); oc.fill();
+  }
+  function drawOrbs(){
+    oc.clearRect(0,0,W,H);
+    var bg=oc.createLinearGradient(0,0,0,H);
+    bg.addColorStop(0,'#F8F3EA'); bg.addColorStop(1,'#F2EADC');
+    oc.fillStyle=bg; oc.fillRect(0,0,W,H);
+    blob(W*0.86,H*0.10,W*0.55,'rgba(232,226,255,0.9)');
+    blob(W*0.08,H*0.20,W*0.5,'rgba(255,227,210,0.85)');
+    blob(W*0.18,H*0.95,W*0.6,'rgba(214,238,224,0.7)');
+    // ground veil
+    var gr=oc.createLinearGradient(0,H*0.72,0,H);
+    gr.addColorStop(0,'rgba(124,92,200,0)'); gr.addColorStop(1,'rgba(108,78,210,0.10)');
+    oc.fillStyle=gr; oc.fillRect(0,H*0.72,W,H*0.28);
+  }
+ 
+  function rand(a,b){ return a+Math.random()*(b-a); }
+ 
+  function plant(x,y,quiet){
+    if(flowers.length>40) flowers.splice(0,5);
+    var U=Math.min(W,H);
+    var hue=Math.floor(rand(0,PETAL.length));
+    flowers.push({
+      x:x, y:y, t:0, dur:rand(850,1400),
+      petals:Math.floor(rand(5,9)), pr:rand(U*0.05,U*0.085),
+      col:PETAL[hue], col2:PETAL[(hue+1)%PETAL.length],
+      core:CORE[Math.floor(rand(0,CORE.length))],
+      sway:rand(0,Math.PI*2), swaySp:rand(0.6,1.2),
+      stem:rand(U*0.12,U*0.26)
+    });
+    for(var i=0;i<6;i++) pollen.push({x:x+rand(-12,12),y:y,vy:rand(-0.4,-1.2),vx:rand(-0.35,0.35),life:rand(70,170),r:rand(1.4,3.2),col:CORE[Math.floor(rand(0,3))]});
+    planted++; countEl.textContent=planted+(planted===1?' bloom':' blooms');
+    if(!quiet) chime();
+    if(hint.style.opacity!=='0'){ hint.style.opacity='0'; }
+    if(LL && LL.storage){ try{ LL.storage.set({planted:planted}); }catch(e){} }
+  }
+ 
+  function easeOut(t){ return 1-Math.pow(1-t,3); }
+ 
+  function drawFlower(f,dt){
+    f.t=Math.min(f.dur,f.t+dt); f.sway+=dt*0.001*f.swaySp;
+    var p=easeOut(f.t/f.dur);
+    var sway=Math.sin(f.sway)*4*p;
+    var topx=f.x+sway, topy=f.y - f.stem*p;
+    // stem
+    ctx.strokeStyle='rgba(110,130,95,'+(0.55*p)+')'; ctx.lineWidth=2.4; ctx.lineCap='round';
+    ctx.beginPath(); ctx.moveTo(f.x,f.y);
+    ctx.quadraticCurveTo(f.x+sway*0.4,(f.y+topy)/2, topx,topy); ctx.stroke();
+    // glow halo
+    var gr=ctx.createRadialGradient(topx,topy,0,topx,topy,f.pr*2.6*p);
+    gr.addColorStop(0,'rgba(255,240,225,'+(0.5*p)+')'); gr.addColorStop(1,'rgba(255,240,225,0)');
+    ctx.fillStyle=gr; ctx.beginPath(); ctx.arc(topx,topy,f.pr*2.6*p,0,Math.PI*2); ctx.fill();
+    // petals
+    var pr=f.pr*p;
+    for(var i=0;i<f.petals;i++){
+      var a=(i/f.petals)*Math.PI*2 + f.sway*0.3;
+      var px=topx+Math.cos(a)*pr*0.62, py=topy+Math.sin(a)*pr*0.62;
+      var g=ctx.createLinearGradient(topx,topy,px,py);
+      g.addColorStop(0,f.col2); g.addColorStop(1,f.col);
+      ctx.fillStyle=g; ctx.globalAlpha=0.92;
+      ctx.beginPath(); ctx.ellipse(px,py,pr*0.5,pr*0.28,a,0,Math.PI*2); ctx.fill();
+    }
+    ctx.globalAlpha=1;
+    // core
+    ctx.fillStyle=f.core; ctx.beginPath(); ctx.arc(topx,topy,pr*0.34,0,Math.PI*2); ctx.fill();
+    ctx.fillStyle='rgba(255,90,31,0.85)'; ctx.beginPath(); ctx.arc(topx,topy,pr*0.16,0,Math.PI*2); ctx.fill();
+  }
+ 
+  function frame(now){
+    raf=requestAnimationFrame(frame);
+    if(paused) return;
+    var dt=Math.min(40, now-T); T=now;
+    ctx.clearRect(0,0,W,H);
+    for(var i=0;i<flowers.length;i++) drawFlower(flowers[i],dt);
+    for(var j=pollen.length-1;j>=0;j--){
+      var q=pollen[j]; q.x+=q.vx; q.y+=q.vy; q.vy*=0.992; q.life-=dt*0.06;
+      if(q.life<=0){ pollen.splice(j,1); continue; }
+      ctx.globalAlpha=Math.max(0,Math.min(1,q.life/60))*0.8;
+      ctx.fillStyle=q.col; ctx.beginPath(); ctx.arc(q.x,q.y,q.r,0,Math.PI*2); ctx.fill();
+    }
+    ctx.globalAlpha=1;
+  }
+ 
+  function at(e){
+    var r=cv.getBoundingClientRect();
+    var t=e.touches?e.touches[0]:e;
+    return {x:t.clientX-r.left, y:t.clientY-r.top};
+  }
+  wrap.addEventListener('pointerdown',function(e){
+    var p=at(e); if(p.y>H*0.11) plant(p.x,p.y);
+  });
+ 
+  // Be a good citizen: pause the RAF when scrolled off-screen.
+  if(LL && LL.onPause){ try{ LL.onPause(function(p){ paused=p; if(!p) T=performance.now(); }); }catch(e){} }
+  document.addEventListener('visibilitychange',function(){ paused=document.hidden; if(!paused) T=performance.now(); });
+ 
+  window.addEventListener('resize',size);
+  size();
+  T=performance.now();
+  // a few starter blooms so the empty state isn't bare (don't count them)
+  setTimeout(function(){
+    plant(W*0.22,H*0.80,1); plant(W*0.44,H*0.72,1); plant(W*0.63,H*0.83,1);
+    plant(W*0.80,H*0.70,1); plant(W*0.34,H*0.58,1);
+    planted=0; countEl.textContent='0 blooms';
+  },150);
+  raf=requestAnimationFrame(frame);
+})();
+</script>