+<style>
+  html,body{height:100%;margin:0;overflow:hidden;background:#0f1322;}
+  *{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;z-index:2;padding:1.15rem 1.25rem;pointer-events:none;}
+  #head h1{margin:0;font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400;font-size:2.35rem;line-height:1;color:#F4F1E4;}
+  #head p{margin:.2rem 0 0;font-size:.8rem;color:#9aa0c0;font-weight:500;}
+  #hint{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:2;pointer-events:none;font-family:"Instrument Serif",Georgia,serif;font-size:1.25rem;color:#9aa0c0;opacity:.85;transition:opacity .6s;text-align:center;}
+</style>
+<div id="wrap">
+  <canvas id="cv"></canvas>
+  <div id="head">
+    <div><h1>Firefly Field</h1><p>Press and hold — they come to you.</p></div>
+  </div>
+  <div id="hint">press and hold</div>
+</div>
+<script>
+(function(){
+  var LL=window.liveloop||null;
+  var muted = LL ? LL.muted : true;
+  if(LL && LL.declareMedia){ try{ LL.declareMedia({sound:true}); }catch(e){} }
+  var _ac=null, droneG=null, droneOn=false;
+  function actx(){ if(!_ac){ try{ _ac=new (window.AudioContext||window.webkitAudioContext)(); }catch(e){ _ac=null; } } return _ac; }
+  // continuous summer-night drone: two detuned triangles through a slow-breathing lowpass
+  function ensureDrone(){
+    if(droneOn || muted) return; var c=actx(); if(!c) return;
+    if(!droneG){
+      droneG=c.createGain(); droneG.gain.value=0;
+      var f=c.createBiquadFilter(); f.type='lowpass'; f.frequency.value=320; f.Q.value=0.6;
+      var lfo=c.createOscillator(), lg=c.createGain();
+      lfo.type='sine'; lfo.frequency.value=0.07; lg.gain.value=110;
+      lfo.connect(lg); lg.connect(f.frequency); lfo.start();
+      var o1=c.createOscillator(); o1.type='triangle'; o1.frequency.value=96;
+      var o2=c.createOscillator(); o2.type='triangle'; o2.frequency.value=96.6;
+      o1.connect(f); o2.connect(f); f.connect(droneG); droneG.connect(c.destination);
+      o1.start(); o2.start();
+    }
+    droneG.gain.cancelScheduledValues(c.currentTime);
+    droneG.gain.setTargetAtTime(0.045,c.currentTime,1.2);
+    droneOn=true;
+  }
+  function droneOff(){
+    if(!droneG||!_ac) { droneOn=false; return; }
+    droneG.gain.cancelScheduledValues(_ac.currentTime);
+    droneG.gain.setTargetAtTime(0.0001,_ac.currentTime,0.4);
+    droneOn=false;
+  }
+  function sparkle(){
+    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(Math.random()<0.5?1318.5:1568,t);
+    g.gain.setValueAtTime(0.0001,t); g.gain.exponentialRampToValueAtTime(0.035,t+0.02);
+    g.gain.exponentialRampToValueAtTime(0.0001,t+0.9);
+    o.connect(g); g.connect(c.destination); o.start(t); o.stop(t+0.95);
+  }
+  if(LL && LL.onMute){ try{ LL.onMute(function(m){ muted=m; if(m) droneOff(); else ensureDrone(); }); }catch(e){} }
+ 
+  var wrap=document.getElementById('wrap');
+  var cv=document.getElementById('cv'), ctx=cv.getContext('2d');
+  var hint=document.getElementById('hint');
+  var W=0,H=0,dpr=1,T0=0,paused=false;
+  var flies=[], finger=null, nextSparkle=0;
+ 
+  function size(){
+    var r=wrap.getBoundingClientRect();
+    W=Math.max(180,r.width); H=Math.max(240,r.height);
+    dpr=Math.min(window.devicePixelRatio||1,2.5);
+    cv.width=Math.round(W*dpr); cv.height=Math.round(H*dpr);
+    ctx.setTransform(dpr,0,0,dpr,0,0);
+  }
+  function mkFlies(){
+    flies=[];
+    for(var i=0;i<34;i++){
+      flies.push({x:Math.random()*W, y:H*0.25+Math.random()*H*0.7,
+        vx:(Math.random()-0.5)*0.3, vy:(Math.random()-0.5)*0.2,
+        ph:Math.random()*7, f:0.0012+Math.random()*0.0018,
+        r:1.8+Math.random()*1.6, seed:Math.random()*100});
+    }
+  }
+ 
+  function bg(){
+    var g=ctx.createLinearGradient(0,0,0,H);
+    g.addColorStop(0,'#0d1120'); g.addColorStop(0.65,'#171c33'); g.addColorStop(1,'#221d36');
+    ctx.fillStyle=g; ctx.fillRect(0,0,W,H);
+    // far hills
+    ctx.fillStyle='#0b0e1b';
+    ctx.beginPath(); ctx.moveTo(0,H*0.78);
+    ctx.quadraticCurveTo(W*0.3,H*0.7,W*0.55,H*0.78);
+    ctx.quadraticCurveTo(W*0.8,H*0.86,W,H*0.8);
+    ctx.lineTo(W,H); ctx.lineTo(0,H); ctx.closePath(); ctx.fill();
+    // near meadow
+    ctx.fillStyle='#070a14';
+    ctx.beginPath(); ctx.moveTo(0,H*0.9);
+    ctx.quadraticCurveTo(W*0.45,H*0.84,W,H*0.92);
+    ctx.lineTo(W,H); ctx.lineTo(0,H); ctx.closePath(); ctx.fill();
+    // a few grass blades on the meadow line
+    ctx.strokeStyle='rgba(20,28,40,0.9)'; ctx.lineWidth=1.4;
+    for(var i=0;i<26;i++){
+      var x=(i/26)*W+6, base=H*(0.9-0.05*Math.sin(i*1.7)), h2=8+(i*37%14);
+      ctx.beginPath(); ctx.moveTo(x,base+6);
+      ctx.quadraticCurveTo(x+3,base-h2*0.5,x+(i%2?5:-4),base-h2);
+      ctx.stroke();
+    }
+  }
+ 
+  function tick(now){
+    requestAnimationFrame(tick);
+    if(paused) return;
+    var dt=Math.min(2.4,(now-T0)/16.67); T0=now;
+    bg();
+    for(var i=0;i<flies.length;i++){
+      var b=flies[i];
+      // gentle wander
+      b.vx+=(Math.sin(now*0.0003+b.seed)*0.012+(Math.random()-0.5)*0.02)*dt;
+      b.vy+=(Math.cos(now*0.00024+b.seed*2)*0.01+(Math.random()-0.5)*0.02)*dt;
+      // attraction to the held finger
+      if(finger){
+        var dx=finger.x-b.x, dy=finger.y-b.y, d=Math.hypot(dx,dy);
+        if(d<220&&d>14){ b.vx+=dx/d*0.06*dt; b.vy+=dy/d*0.06*dt; }
+      }
+      b.vx*=0.985; b.vy*=0.985;
+      var sp=Math.hypot(b.vx,b.vy); if(sp>1.1){ b.vx*=1.1/sp; b.vy*=1.1/sp; }
+      b.x+=b.vx*dt*2.6; b.y+=b.vy*dt*2.6;
+      if(b.x<-20) b.x=W+20; if(b.x>W+20) b.x=-20;
+      if(b.y<H*0.12) b.y=H*0.12; if(b.y>H*0.96) b.y=H*0.96;
+      // blink
+      var glow=Math.max(0,Math.sin(now*b.f+b.ph));
+      glow=glow*glow*glow;
+      if(finger){ var d2=Math.hypot(finger.x-b.x,finger.y-b.y); if(d2<140) glow=Math.min(1,glow+0.25); }
+      if(glow>0.02){
+        var rad=b.r+glow*11;
+        var gr=ctx.createRadialGradient(b.x,b.y,0,b.x,b.y,rad);
+        gr.addColorStop(0,'rgba(255,240,170,'+(0.55+glow*0.45).toFixed(3)+')');
+        gr.addColorStop(0.35,'rgba(225,235,130,'+(glow*0.4).toFixed(3)+')');
+        gr.addColorStop(1,'rgba(225,235,130,0)');
+        ctx.fillStyle=gr; ctx.beginPath(); ctx.arc(b.x,b.y,rad,0,Math.PI*2); ctx.fill();
+      } else {
+        ctx.fillStyle='rgba(200,210,160,0.18)';
+        ctx.beginPath(); ctx.arc(b.x,b.y,b.r*0.7,0,Math.PI*2); ctx.fill();
+      }
+    }
+    if(!muted && now>nextSparkle){ nextSparkle=now+4000+Math.random()*5000; sparkle(); }
+  }
+ 
+  function at(e){ var r=cv.getBoundingClientRect(), t=e.touches?e.touches[0]:e; return {x:t.clientX-r.left,y:t.clientY-r.top}; }
+  wrap.addEventListener('pointerdown',function(e){
+    finger=at(e); ensureDrone();
+    if(hint.style.opacity!=='0') hint.style.opacity='0';
+  });
+  wrap.addEventListener('pointermove',function(e){ if(finger){ e.preventDefault(); finger=at(e); } });
+  wrap.addEventListener('pointerup',function(){ finger=null; });
+  wrap.addEventListener('pointerleave',function(){ finger=null; });
+ 
+  if(LL && LL.onPause){ try{ LL.onPause(function(p){ paused=p;
+    if(p) droneOff(); else { T0=performance.now(); if(!muted) ensureDrone(); }
+  }); }catch(e){} }
+  document.addEventListener('visibilitychange',function(){
+    paused=document.hidden;
+    if(paused) droneOff(); else { T0=performance.now(); if(!muted) ensureDrone(); }
+  });
+  window.addEventListener('resize',function(){ size(); });
+  size(); mkFlies();
+  T0=performance.now(); requestAnimationFrame(tick);
+})();
+</script>