R.cancel=()=>{ R.done=true; try{ venc.close(); }catch(e){} try{ aenc.close(); }catch(e){} };
    return R; }

  const smallDev=()=>/Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent||'')||(navigator.maxTouchPoints>1&&/Mac/i.test(navigator.platform||''));
  const tablet=()=>/iPad|Tablet/i.test(navigator.userAgent||'')||(navigator.maxTouchPoints>1&&/Mac/i.test(navigator.platform||''))||(/Android/i.test(navigator.userAgent||'')&&!/Mobi/i.test(navigator.userAgent||''));
  function fits(seconds,mbps){ const perSec=mbps/8*3.5+0.4, needMB=Math.round(seconds*perSec);
    const dm=navigator.deviceMemory||0, roomMB=!smallDev()?4500:Math.max(tablet()?1000:600,dm>=8?1200:0);
    return {ok:needMB<=roomMB, needMB, roomMB, small:smallDev(), maxSeconds:Math.floor(roomMB/perSec)}; }

  async function awake(){ try{ if(navigator.wakeLock&&navigator.wakeLock.request){ const l=await navigator.wakeLock.request('screen'); return ()=>{ try{ l.release(); }catch(e){} }; } }catch(e){} return ()=>{}; }

  function plan(o){
    const small=smallDev(), L=settings.light||{size:720,video_mbps:{60:6,30:4},parts:[30,60]};
    const dur=o.dur, at=Math.max(0,Math.min(dur,o.pos||0)), mm=s=>{ s=Math.max(0,Math.round(s)); return Math.floor(s/60)+':'+String(s%60).padStart(2,'0'); };
    const partFrom=len=>(at<0.25?0:Math.max(0,Math.min(at,dur-len)));
    let big=!small;
    const mk=(fps,len)=>{ const whole=!len; return {fps, light:!big, size:big?settings.size:L.size,
      mbps:big?(settings.video_mbps[(small?'phone':'computer')+'_'+fps]||(fps>30?16:10)):((L.video_mbps||{})[fps]||(fps>30?6:4)),
      from:whole?0:partFrom(len), len:whole?dur:len, whole}; };
    return new Promise(done=>{
      const box=document.createElement('div'); box.setAttribute('role','dialog');
      box.style.cssText='position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;background:#05080a;color:#cfe3dc;border:1px solid #2b4441;'
        +'box-shadow:0 20px 60px rgba(0,0,0,.7);padding:16px 18px;font:13px/1.5 "Courier New",ui-monospace,monospace;letter-spacing:.06em;width:min(94vw,470px)';
      const close=v=>{ try{ box.remove(); }catch(e){} removeEventListener('keydown',key); done(v); };
      const key=e=>{ if(e.key==='Escape') close(null); }; addEventListener('keydown',key);
      const h=document.createElement('div'); h.innerHTML='<span style="color:#ff4a3d">⏺</span> RENDER · a clean video of the whole board, made frame by frame';
      h.style.cssText='letter-spacing:.14em;margin:0 0 12px;opacity:.9'; box.appendChild(h);
      { const mw=document.querySelector('meta[name="render-weight"]'), wv=mw?parseFloat(mw.content):0;
        if(wv>=1.5){ const n=document.createElement('div'); n.textContent='This board draws a lot in every frame: its render takes about '+(Math.round(wv*2)/2)+'× as long as most. For a quicker video, choose 30 FPS, a section, or 720.';
          n.style.cssText='margin:-6px 0 12px;font-size:12px;line-height:1.45;color:#e8c08a;opacity:.88;letter-spacing:.03em'; box.appendChild(n); } }
      const btn=(html,on,pick)=>{ const b=document.createElement('button'); b.type='button'; b.innerHTML=html;
        b.style.cssText='flex:1;text-align:left;padding:8px 10px;background:'+(pick?'#10201d':'transparent')+';color:inherit;border:1px solid '+(pick?'#4ae8d4':'#2b4441')+';font:inherit;letter-spacing:.06em;cursor:pointer;text-transform:none;min-width:0';
        b.onclick=on; return b; };
      let first=null;
      for(const fps of [60,30]){
        const row=document.createElement('div'); row.style.cssText='display:flex;gap:8px;align-items:stretch;margin:0 0 8px;flex-wrap:wrap';
        const lab=document.createElement('div'); lab.textContent=fps+' FPS'; lab.style.cssText='flex:0 0 64px;align-self:center;letter-spacing:.16em;opacity:.85'; row.appendChild(lab);
        const pickFull=(fps===(small?30:60))&&!small;
        const fb=btn('<b>FULL SONG</b><br><span style="opacity:.6;font-size:11px">'+mm(dur)+'</span>',()=>close(mk(fps,0)),pickFull); row.appendChild(fb); if(pickFull) first=fb;
        const sec=document.createElement('div'); sec.style.cssText='flex:1;display:flex;flex-direction:column;gap:4px;min-width:0';
        const st=document.createElement('div'); st.innerHTML='<b>A SECTION</b> <span style="opacity:.6;font-size:11px">from '+mm(partFrom(30))+'</span>'; st.style.cssText='font-size:12px;padding:0 2px'; sec.appendChild(st);
        const lens=document.createElement('div'); lens.style.cssText='display:flex;gap:6px';
        for(const p of (L.parts||[30,60])){ if(dur<=p+1) continue; const pick=small&&fps===30&&p===30;
          const b=btn(p+' s',()=>close(mk(fps,p)),pick); b.style.textAlign='center'; b.style.padding='5px 6px'; lens.appendChild(b); if(pick) first=b; }
        if(!lens.children.length){ const n=document.createElement('span'); n.textContent='(the song is short: FULL SONG)'; n.style.cssText='font-size:11px;opacity:.55'; lens.appendChild(n); }
        sec.appendChild(lens); row.appendChild(sec); box.appendChild(row); }
      const sz=document.createElement('div'); sz.style.cssText='display:flex;gap:8px;align-items:center;margin:6px 0 10px;font-size:12px';
      const szl=document.createElement('span'); szl.textContent='SIZE'; szl.style.cssText='flex:0 0 64px;letter-spacing:.16em;opacity:.85'; sz.appendChild(szl);
      const sb=[]; const paint=()=>sb.forEach(([b,v])=>{ b.style.borderColor=(v===big)?'#4ae8d4':'#2b4441'; b.style.background=(v===big)?'#10201d':'transparent'; });
      for(const [v,t] of [[true,settings.size+' · the best pixels'],[false,L.size+' · lighter, quicker on a phone']]){ const b=btn(t,()=>{ big=v; paint(); },false); b.style.padding='5px 8px'; b.style.fontSize='11px'; sb.push([b,v]); sz.appendChild(b); }
      paint(); box.appendChild(sz);
      const n=document.createElement('div'); n.style.cssText='font-size:11px;opacity:.6;margin:2px 0 10px;line-height:1.5';
      n.textContent='A section starts where the song is now: play, pause, then ⏺ RENDER. 60 FPS is as smooth as a computer screen; 30 is lighter. Nothing is uploaded.'; box.appendChild(n);
      const c=document.createElement('button'); c.type='button'; c.textContent='cancel'; c.style.cssText='background:transparent;color:inherit;border:1px solid #2b4441;padding:6px 12px;font:inherit;cursor:pointer;opacity:.75';
      c.onclick=()=>close(null); box.appendChild(c); document.body.appendChild(box);
      if(first) setTimeout(()=>{ try{ first.focus(); }catch(e){} },0);
    }).then(p=>{ if(!p){ if(o.say) o.say('render not started'); return null; }

      if(p.fps!==o.fps){ const sw=document.getElementById('fps'); if(sw&&sw.onclick){ sw.onclick(); } }
      const secs=p.whole?(o.head||0)+dur+(o.tail||0):p.len, f=fits(secs,p.mbps);
      const size=mb=>mb>=1000?(mb/1000).toFixed(1)+' GB':Math.round(mb)+' MB';
      if(!f.ok){ const why='this render needs about '+size(f.needMB)+' of memory here, and this '+(f.small?'phone or tablet':'computer')+' has room for about '+size(f.roomMB)+', so it may stop near the end and be lost. 720, 30 FPS, or a section needs much less (a section of '+Math.max(10,Math.floor(Math.min(f.maxSeconds,60)))+' s or less fits)';
        if(!confirm('This render is long for this device.\n\n'+why+'\n\nRender anyway?')){ if(o.say) o.say('render not started · '+why); return null; } }
      p.slow=f.small?' · slower on a phone or tablet, quickest on a computer':''; return p; }); }

  (function renderOnly(){ const go=()=>{ if(!document.getElementById('render')||!document.getElementById('take')) return;
      if(document.getElementById('render-only-chime')) return; const st=document.createElement('style'); st.id='render-only-chime';
      st.textContent='#take,#rec,#fps{display:none!important}'; (document.head||document.documentElement).appendChild(st); };
    if(typeof document==='undefined') return; if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',go); else go(); setTimeout(go,0); })();

  function mp4Opus(u){
    const dv=new DataView(u.buffer,u.byteOffset,u.byteLength), str=(o)=>String.fromCharCode(u[o],u[o+1],u[o+2],u[o+3]);
    const kids=(o,end)=>{ const out=[]; while(o+8<=end){ let sz=dv.getUint32(o), h=8; const t=str(o+4);
        if(sz===1){ sz=Number(dv.getBigUint64(o+8)); h=16; } else if(sz===0) sz=end-o; if(sz<h) break; out.push({t,o,h,end:o+sz}); o+=sz; } return out; };
    const find=(list,t)=>list.find(b=>b.t===t), inside=(b)=>kids(b.o+b.h,b.end);
    const moov=find(kids(0,u.length),'moov'); if(!moov) return null;
    for(const trak of inside(moov).filter(b=>b.t==='trak')){
      const tk=inside(trak), mdia=find(tk,'mdia'); if(!mdia) continue; const md=inside(mdia);
      const hdlr=find(md,'hdlr'); if(!hdlr||str(hdlr.o+hdlr.h+8)!=='soun') continue;
      const mdhd=find(md,'mdhd'), v=u[mdhd.o+mdhd.h], timescale=dv.getUint32(mdhd.o+mdhd.h+(v===1?20:12));
      const stbl=find(inside(find(md,'minf')),'stbl'); if(!stbl) continue; const st=inside(stbl);
      const stsd=find(st,'stsd'); const ent=kids(stsd.o+stsd.h+8,stsd.end)[0]; if(!ent||ent.t!=='Opus') continue;
      const dops=find(kids(ent.o+ent.h+28,ent.end),'dOps'); if(!dops) continue; const d=dops.o+dops.h;
      const ch=u[d+1], preskip=dv.getUint16(d+2), family=u[d+10]; if(family!==0||ch<1||ch>2) return {unsupported:'channel mapping '+family};
      const durs=[]; { const b=find(st,'stts'), n=dv.getUint32(b.o+b.h+4); for(let i=0;i<n;i++){ const c=dv.getUint32(b.o+b.h+8+i*8), dl=dv.getUint32(b.o+b.h+12+i*8); for(let k=0;k<c;k++) durs.push(dl); } }
      const sizes=[]; { const b=find(st,'stsz'), fixed=dv.getUint32(b.o+b.h+4), n=dv.getUint32(b.o+b.h+8); for(let i=0;i<n;i++) sizes.push(fixed||dv.getUint32(b.o+b.h+12+i*4)); }
      const chunks=[]; { const b=find(st,'stco')||find(st,'co64'), n=dv.getUint32(b.o+b.h+4), big=b.t==='co64'; for(let i=0;i<n;i++) chunks.push(big?Number(dv.getBigUint64(b.o+b.h+8+i*8)):dv.getUint32(b.o+b.h+8+i*4)); }
      const samples=[]; { const b=find(st,'stsc'), n=dv.getUint32(b.o+b.h+4), runs=[]; for(let i=0;i<n;i++) runs.push([dv.getUint32(b.o+b.h+8+i*12),dv.getUint32(b.o+b.h+12+i*12)]);
        let s=0; for(let c=0;c<chunks.length;c++){ let per=0; for(const [first,cnt] of runs) if(c+1>=first) per=cnt; let off=chunks[c];
          for(let k=0;k<per&&s<sizes.length;k++,s++){ samples.push({off,size:sizes[s],dur:durs[s]||durs[durs.length-1]}); off+=sizes[s]; } } }
      let skipTs=-1; { const e=find(tk,'edts'), el=e&&find(inside(e),'elst'); if(el){ const ev=u[el.o+el.h], n=dv.getUint32(el.o+el.h+4);
          for(let i=0;i<n;i++){ const mt=ev===1?Number(dv.getBigInt64(el.o+el.h+16+i*20)):dv.getInt32(el.o+el.h+12+i*12); if(mt>=0){ skipTs=mt; break; } } } }
      const to48=x=>Math.round(x*48000/timescale), total=to48(samples.reduce((a,s)=>a+s.dur,0));
      return {ch,timescale,samples,skip:skipTs>=0?to48(skipTs):preskip,total,bytes:u}; }
    return null; }
  async function decode(ctx,bytes){ let first=null;
    try{ return await ctx.decodeAudioData(bytes.slice(0)); }catch(e){ first=e; }
    const fail=m=>{ const e=new Error(m); e.rescue=m; e.first=first; return e; };
    let T=null; try{ T=mp4Opus(new Uint8Array(bytes)); }catch(e){ T=null; }
    if(!T) throw first; if(T.unsupported) throw fail('no-opus');
    if(typeof AudioDecoder==='undefined'||typeof EncodedAudioChunk==='undefined') throw fail('no-decoder');
    const cfg={codec:'opus',sampleRate:48000,numberOfChannels:T.ch}; let can=false;
    try{ can=!!(await AudioDecoder.isConfigSupported(cfg)).supported; }catch(e){} if(!can) throw fail('no-opus');
    const outs=[]; let err=null, frames=0;
    const dec=new AudioDecoder({output:a=>{ const n=a.numberOfFrames, planes=[]; for(let c=0;c<T.ch;c++){ const p=new Float32Array(n);
        a.copyTo(p,{planeIndex:Math.min(c,a.numberOfChannels-1),format:'f32-planar'}); planes.push(p); } outs.push(planes); frames+=n; a.close(); }, error:e=>{ err=e; }});
    dec.configure(cfg); let ts=0;
    for(const s of T.samples){ dec.decode(new EncodedAudioChunk({type:'key',timestamp:Math.round(ts*1e6/T.timescale),duration:Math.round(s.dur*1e6/T.timescale),data:T.bytes.subarray(s.off,s.off+s.size)}));
      ts+=s.dur; if(dec.decodeQueueSize>64) await new Promise(r=>setTimeout(r,0)); if(err) break; }
    try{ await dec.flush(); }catch(e){ err=err||e; } try{ dec.close(); }catch(e){} if(err||!outs.length) throw fail('decode-failed');
    const firstDur=Math.round(T.samples[0].dur*48000/T.timescale), cut=outs[0][0].length>=firstDur?T.skip:0;
    const len=Math.max(1,Math.min(frames-cut,T.total-T.skip)), buf=ctx.createBuffer(T.ch,len,48000);
    for(let c=0;c<T.ch;c++){ const dst=buf.getChannelData(c); let at=-cut;
      for(const pl of outs){ const p=pl[c]; const from=Math.max(0,-at), to=Math.min(p.length,len-at); if(to>from) dst.set(p.subarray(from,to),at+from); at+=p.length; if(at>=len) break; } }
    try{ buf.rescued='opus'; }catch(e){} return buf; }
  return {settings,ok,okLive,start,render,fits,awake,plan,decode,mp4Opus};
})();

const RenderChild=(()=>{
  if(!/#render$/.test(location.hash||'')) return null;
  let seed=20261003;
  Math.random=()=>{ seed|=0; seed=seed+0x6D2B79F5|0; let t=Math.imul(seed^seed>>>15,1|seed); t=t+Math.imul(t^t>>>7,61|t)^t; return ((t^t>>>14)>>>0)/4294967296; };
  const C={t:0, raf:[], ivs:new Map(), nid:1};
  try{ performance.now=()=>C.t*1000; }catch(e){}
  window.requestAnimationFrame=cb=>{ C.raf.push(cb); return C.raf.length; }; window.cancelAnimationFrame=()=>{};
  window.setInterval=fn=>{ const id=C.nid++; C.ivs.set(id,fn); return id; }; window.clearInterval=id=>{ C.ivs.delete(id); };
  try{ Object.defineProperty(window,'devicePixelRatio',{get:()=>1.25,configurable:true}); }catch(e){}
  return C; })();

(()=>{ const apple=/iPhone|iPad|iPod/i.test(navigator.userAgent||'')||(navigator.maxTouchPoints>1&&/Mac/i.test(navigator.platform||''));
  const WIDE='audio/*,video/*,.mp3,.m4a,.aac,.wav,.flac,.ogg,.oga,.opus,.webm,.weba,.mp4,.m4v,.mov,.aif,.aiff,.caf,.3gp,.mkv';
  const free=()=>document.querySelectorAll('input[type=file][accept*="audio"]').forEach(i=>{ if(apple) i.removeAttribute('accept'); else i.setAttribute('accept',WIDE); });
  if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',free); else free();
  let last=null;
  document.addEventListener('change',e=>{ const t=e.target; if(t&&t.files&&t.files[0]) last=t.files[0]; },true);
  addEventListener('drop',e=>{ const f=e.dataTransfer&&e.dataTransfer.files&&e.dataTransfer.files[0]; if(f) last=f; },true);
  if(typeof CleanRec!=='undefined') CleanRec.whyNot=err=>{
    const name=(last&&last.name)||'that file', ext=(name.match(/\.([a-z0-9]+)$/i)||[,''])[1].toLowerCase(), raw=String(err&&err.message||err||'');
    const keep=' MP3, M4A and WAV open in every browser (on Suno: Download → MP3 or WAV).';
    if(err&&err.rescue) return 'could not hear '+name+': its sound is Opus inside an .'+(ext||'m4a')+' (Suno’s app saves songs this way). This browser can play it but won’t hand the whole song over, and '+
      (err.rescue==='decode-failed'?'its own Opus decoder stopped part way':'it has no Opus decoder the chime could use instead')+'. It works in Chrome or Edge, or download the song from Suno as MP3 or WAV.';
    if(apple&&/^(ogg|oga|opus|webm|weba|mkv)$/.test(ext)) return 'could not hear '+name+': Apple’s browsers can’t open .'+ext+' sound. Save the song as MP3, M4A or WAV and load it again.'+keep;
    if(!apple&&/^(aif|aiff|caf)$/.test(ext)) return 'could not hear '+name+': this browser can’t open .'+ext+' (an Apple format). Save it as WAV or MP3 and load it again.'+keep;

    if(/^(m4a|mp4|m4v|mov|3gp)$/.test(ext)&&last&&last.arrayBuffer){ const f0=last; f0.arrayBuffer().then(b=>{ const u=new Uint8Array(b);
        for(let i=0;i+4<u.length;i++) if(u[i]===0x64&&u[i+1]===0x4f&&u[i+2]===0x70&&u[i+3]===0x73){
          const st=document.getElementById('stat'); if(st&&last===f0&&/could not hear/.test(st.textContent))
            st.textContent='could not hear '+name+': its sound is Opus inside an .'+ext+' (Suno’s app saves songs this way)'+(apple?', and Apple’s browsers can’t open Opus':', and this browser can’t open it')+'. It opens in Chrome or Edge on a computer; or download the song from Suno as MP3 or WAV.';
          return; } }).catch(()=>{}); }
    if(/^(mp4|m4v|mov|3gp|mkv|webm)$/.test(ext)) return 'could not hear '+name+': this video’s sound track could not be read here (it may have no sound, or sound in a format this browser doesn’t open).'+keep;
    return 'could not hear '+name+': this browser could not open its sound'+(raw?' ('+raw.slice(0,80)+')':'')+'.'+keep; };
})();
</script>
<script>
(() => {
  const cv=document.getElementById('c'), g=cv.getContext('2d');
  const N=9; let S=0, TILE=0, DPR=Math.min(2,window.devicePixelRatio||1);
  function resize(){ const wrap=document.getElementById('wrap'); const m=Math.min(wrap.clientWidth,wrap.clientHeight)-16; S=Math.max(240,m); TILE=S/N;
    cv.style.width=S+'px'; cv.style.height=S+'px'; cv.width=S*DPR; cv.height=S*DPR; g.setTransform(DPR,0,0,DPR,0,0); paperDirty=true; }
  window.addEventListener('resize',resize); resize(); requestAnimationFrame(resize);
  const rng=s=>{let a=s>>>0;return()=>{a=a+0x6D2B79F5|0;let t=Math.imul(a^a>>>15,1|a);t=t+Math.imul(t^t>>>7,61|t)^t;return((t^t>>>14)>>>0)/4294967296;};};

  let AC=null,MASTER=null,REVERBIN=null,ANA=null,anaBuf=null,energy=0,recDest=null,playing=false;
  const fl=[]; let beatPulse=0, downPulse=0;
  function makeIR(sec,decay){ const r=AC.sampleRate,n=(sec*r)|0,b=AC.createBuffer(2,n,r);
    for(let c=0;c<2;c++){const d=b.getChannelData(c);for(let i=0;i<n;i++)d[i]=(Math.random()*2-1)*Math.pow(1-i/n,decay);} return b; }
  function ensureAudio(){ if(AC) return; AC=new(window.AudioContext||window.webkitAudioContext)();
    MASTER=AC.createGain(); MASTER.gain.value=0.55;
    const comp=AC.createDynamicsCompressor(); comp.threshold.value=-18; comp.ratio.value=3;
    const conv=AC.createConvolver(); conv.buffer=makeIR(1.4,3.0);
    const damp=AC.createBiquadFilter(); damp.type='lowpass'; damp.frequency.value=3400;
    const wet=AC.createGain(); wet.gain.value=0.7; REVERBIN=AC.createGain(); REVERBIN.gain.value=0.14;
    REVERBIN.connect(conv); conv.connect(damp); damp.connect(wet); wet.connect(comp);
    MASTER.connect(comp); comp.connect(AC.destination);
    ANA=AC.createAnalyser(); ANA.fftSize=256; anaBuf=new Uint8Array(ANA.fftSize); MASTER.connect(ANA);
    try{ recDest=AC.createMediaStreamDestination(); comp.connect(recDest); }catch(e){} }
  const out=g=>{ g.connect(MASTER); if(REVERBIN) g.connect(REVERBIN); };
const env=(node,t,a,d,pk)=>{ const g=AC.createGain(); node.connect(g); out(g);
  g.gain.setValueAtTime(0,t); g.gain.linearRampToValueAtTime(pk,t+a); g.gain.exponentialRampToValueAtTime(1e-4,t+a+d); };
const osc=(type,f,t,stop)=>{ const o=AC.createOscillator(); o.type=type; o.frequency.value=f; o.start(t); o.stop(t+stop); return o; };
function noiseSrc(t,dur){ const n=(AC.sampleRate*dur)|0,b=AC.createBuffer(1,n,AC.sampleRate),d=b.getChannelData(0);
  for(let i=0;i<n;i++)d[i]=Math.random()*2-1; const s=AC.createBufferSource(); s.buffer=b; s.start(t); return s; }
function ksBuf(f,dur,dampC,bright){ const sr=AC.sampleRate,N=Math.max(2,Math.round(sr/f)),len=(sr*dur)|0;
  const b=AC.createBuffer(1,len,sr),d=b.getChannelData(0),ring=new Float32Array(N);
  for(let i=0;i<N;i++) ring[i]=(Math.random()*2-1)*(bright||1);
  let idx=0; for(let i=0;i<len;i++){ const cur=ring[idx],nxt=ring[(idx+1)%N];
    d[i]=cur; ring[idx]=dampC*0.5*(cur+nxt); idx=(idx+1)%N; } return b; }
function playBuf(b,t,pk,dur){ const s=AC.createBufferSource(); s.buffer=b; const g=AC.createGain(); s.connect(g); out(g);
  g.gain.setValueAtTime(pk,t); g.gain.exponentialRampToValueAtTime(1e-4,t+dur); s.start(t); }
function shaper(amount){ const ws=AC.createWaveShaper(),n=256,c=new Float32Array(n);
  for(let i=0;i<n;i++){ const x=i*2/n-1; c[i]=Math.tanh(amount*x); } ws.curve=c; return ws; }
const L={};
L['the string ♪']=[1,(t,f)=>playBuf(ksBuf(f,2.0,0.996),t,0.24,2.0)];
L['harp ♪']=[1,(t,f)=>playBuf(ksBuf(f,2.6,0.998),t,0.2,2.6)];
L['muted string ♪']=[1,(t,f)=>playBuf(ksBuf(f,0.6,0.985),t,0.26,0.6)];
L['bass string ♪']=[1,(t,f)=>playBuf(ksBuf(f*0.5,2.4,0.997),t,0.3,2.4)];
L['ELECTRIC STRING ♪']=[1,(t,f)=>{ const s=AC.createBufferSource(); s.buffer=ksBuf(f*0.5,2.2,0.997,1.6); const ws=shaper(14);
  const g=AC.createGain(); s.connect(ws); ws.connect(g); out(g);
  g.gain.setValueAtTime(0.26,t); g.gain.exponentialRampToValueAtTime(1e-4,t+2.2); s.start(t); }];
L['music box ♪']=[1,(t,f)=>{ env(osc('sine',f*2,t,1.5),t,0.002,1.4,0.14); env(osc('sine',f*2*1.003,t,1.3),t,0.002,1.2,0.08); }];
L['kalimba ♪']=[1,(t,f)=>{ env(osc('sine',f,t,1.0),t,0.001,0.9,0.2); const c=noiseSrc(t,0.02); env(c,t,0.0005,0.015,0.1); }];
L['marimba ♪']=[1,(t,f)=>{ env(osc('triangle',f,t,0.72),t,0.002,0.68,0.17); env(osc('sine',f*4,t,0.16),t,0.002,0.12,0.04); }];
L['furin bell ♪']=[1,(t,f)=>{ env(osc('sine',f,t,1.8),t,0.003,1.7,0.15); env(osc('sine',f*2.76,t,1.1),t,0.003,1.0,0.05); }];
L['glockenspiel ♪']=[1,(t,f)=>{ env(osc('sine',f*4,t,1.2),t,0.001,1.1,0.14); env(osc('sine',f*4*2.71,t,0.4),t,0.001,0.35,0.04); }];
L['water plink ♪']=[1,(t,f)=>{ const o=AC.createOscillator(); o.type='sine'; o.frequency.setValueAtTime(f*1.5,t); o.frequency.exponentialRampToValueAtTime(f,t+0.05); env(o,t,0.002,0.62,0.17); o.start(t); o.stop(t+0.66); }];
L['organ ♪']=[1,(t,f)=>{ [1,2,3,4].forEach((h,i)=>env(osc('sine',f*h,t,0.9),t,0.03,0.7,0.08/(1+i))); }];
L['pad ♪']=[1,(t,f)=>{ const lp=AC.createBiquadFilter(); lp.type='lowpass'; lp.frequency.value=f*2.5;
  [0.996,1,1.005].forEach(dt=>{ const o=osc('sawtooth',f*dt,t,1.6); o.connect(lp); }); env(lp,t,0.3,1.2,0.09); }];
L['kick']=[0,(t)=>{ const o=AC.createOscillator(); o.frequency.setValueAtTime(150,t); o.frequency.exponentialRampToValueAtTime(42,t+0.12); env(o,t,0.002,0.4,0.4); o.start(t); o.stop(t+0.45); }];
L['taiko']=[0,(t)=>{ const o=AC.createOscillator(); o.frequency.setValueAtTime(90,t); o.frequency.exponentialRampToValueAtTime(48,t+0.2); env(o,t,0.003,0.7,0.5); o.start(t); o.stop(t+0.75);
  const n=noiseSrc(t,0.12), lp=AC.createBiquadFilter(); lp.type='lowpass'; lp.frequency.value=900; n.connect(lp); env(lp,t,0.001,0.1,0.16); }];
L['snare']=[0,(t)=>{ const s=noiseSrc(t,0.3), bp=AC.createBiquadFilter(); bp.type='bandpass'; bp.frequency.value=1800; bp.Q.value=0.8; s.connect(bp); env(bp,t,0.001,0.16,0.2); }];
L['clap']=[0,(t)=>{ [0,0.012,0.026].forEach(d=>{ const s=noiseSrc(t+d,0.1), bp=AC.createBiquadFilter(); bp.type='bandpass'; bp.frequency.value=1200; bp.Q.value=2; s.connect(bp); env(bp,t+d,0.001,0.07,0.14); }); }];
L['hi-hat closed']=[0,(t)=>{ const s=noiseSrc(t,0.08), hp=AC.createBiquadFilter(); hp.type='highpass'; hp.frequency.value=7000; s.connect(hp); env(hp,t,0.001,0.05,0.12); }];
L['hi-hat open']=[0,(t)=>{ const s=noiseSrc(t,0.5), hp=AC.createBiquadFilter(); hp.type='highpass'; hp.frequency.value=7000; s.connect(hp); env(hp,t,0.001,0.4,0.10); }];
L['shaker']=[0,(t)=>{ const s=noiseSrc(t,0.12), bp=AC.createBiquadFilter(); bp.type='bandpass'; bp.frequency.value=5200; bp.Q.value=2.5; s.connect(bp); env(bp,t,0.01,0.09,0.09); }];
L['woodblock']=[0,(t)=>{ const o=osc('square',880,t,0.1), bp=AC.createBiquadFilter(); bp.type='bandpass'; bp.frequency.value=1100; bp.Q.value=9; o.connect(bp); env(bp,t,0.001,0.09,0.2); }];
L['cowbell']=[0,(t)=>{ const a=osc('square',540,t,0.4), b=osc('square',800,t,0.4), bp=AC.createBiquadFilter(); bp.type='bandpass'; bp.frequency.value=700; bp.Q.value=2; a.connect(bp); b.connect(bp); env(bp,t,0.001,0.3,0.14); }];
L['gong']=[0,(t)=>{ [1,1.483,1.932,2.546].forEach((p,i)=>env(osc('sine',110*p,t,3),t,0.004,2.6-i*0.3,0.09/(1+i*0.5))); }];
L['coin']=[0,(t)=>{ env(osc('square',988,t,0.08),t,0.001,0.07,0.09); env(osc('square',1319,t+0.08,0.25),t+0.08,0.001,0.22,0.09); }];
L['laser']=[0,(t)=>{ const o=AC.createOscillator(); o.type='sawtooth'; o.frequency.setValueAtTime(1800,t); o.frequency.exponentialRampToValueAtTime(120,t+0.18); env(o,t,0.002,0.16,0.12); o.start(t); o.stop(t+0.2); }];
L['bird']=[0,(t)=>{ const o=AC.createOscillator(); o.type='sine'; o.frequency.setValueAtTime(2400,t); o.frequency.exponentialRampToValueAtTime(3800,t+0.05); o.frequency.exponentialRampToValueAtTime(2800,t+0.09); env(o,t,0.004,0.08,0.07); o.start(t); o.stop(t+0.1); }];

L['tom']=[0,(t)=>{ const o=AC.createOscillator(); o.frequency.setValueAtTime(220,t); o.frequency.exponentialRampToValueAtTime(90,t+0.18); env(o,t,0.002,0.3,0.3); o.start(t); o.stop(t+0.35); }];
L['claves']=[0,(t)=>{ env(osc('sine',2500,t,0.06),t,0.0005,0.05,0.18); }];
L['cymbal']=[0,(t)=>{ const hp=AC.createBiquadFilter(); hp.type='highpass'; hp.frequency.value=5000;
  [317,523,811,1279,1523,2017].forEach(ff=>{ const o=osc('square',ff*3.17,t,1.4); o.connect(hp); }); env(hp,t,0.001,1.2,0.09); }];
L['tubular bell ♪']=[1,(t,f)=>{ [0.56,0.92,1.19,1.71,2,2.74].forEach((p2,i)=>env(osc('sine',f*p2*2,t,3),t,0.004,2.6-i*0.3,0.08/(1+i*0.4))); }];
L['singing bowl ♪']=[1,(t,f)=>{ env(osc('sine',f*2,t,4),t,0.3,3.4,0.10); env(osc('sine',f*2*1.007,t,4),t,0.3,3.4,0.10); }];
L['anvil']=[0,(t)=>{ [1123,1723,2333].forEach(ff=>env(osc('square',ff,t,0.5),t,0.001,0.4,0.05));
  const s=noiseSrc(t,0.05), hp=AC.createBiquadFilter(); hp.type='highpass'; hp.frequency.value=4000; s.connect(hp); env(hp,t,0.0005,0.04,0.1); }];
L['violin-ish ♪']=[1,(t,f)=>{ const o=osc('sawtooth',f,t,1.8);
  const l=osc('sine',5.5,t,1.8), lg=AC.createGain(); lg.gain.value=f*0.008; l.connect(lg); lg.connect(o.frequency);
  const lp=AC.createBiquadFilter(); lp.type='lowpass'; lp.frequency.value=f*4; o.connect(lp); env(lp,t,0.25,1.4,0.13); }];
L['cello-ish ♪']=[1,(t,f)=>{ const o=osc('sawtooth',f*0.5,t,2.0);
  const lp=AC.createBiquadFilter(); lp.type='lowpass'; lp.frequency.value=f*1.6; o.connect(lp); env(lp,t,0.3,1.6,0.16); }];
L['flute ♪']=[1,(t,f)=>{ const o=osc('sine',f*2,t,1.5);
  const l=osc('sine',5,t,1.5), lg=AC.createGain(); lg.gain.value=f*0.01; l.connect(lg); lg.connect(o.frequency);
  env(o,t,0.12,1.2,0.14); const nn=noiseSrc(t,1.4), bp=AC.createBiquadFilter(); bp.type='bandpass'; bp.frequency.value=f*4; bp.Q.value=9; nn.connect(bp); env(bp,t,0.12,1.1,0.02); }];
L['pan pipe ♪']=[1,(t,f)=>{ const o=osc('triangle',f*2,t,1.2); env(o,t,0.06,1.0,0.13);
  const nn=noiseSrc(t,1.1), bp=AC.createBiquadFilter(); bp.type='bandpass'; bp.frequency.value=f*3; bp.Q.value=4; nn.connect(bp); env(bp,t,0.05,0.9,0.045); }];
L['harmonica ♪']=[1,(t,f)=>{ env(osc('square',f,t,1.4),t,0.08,1.2,0.05); env(osc('square',f*1.006,t,1.4),t,0.08,1.2,0.05); }];
L['theremin ♪']=[1,(t,f)=>{ const o=AC.createOscillator(); o.type='sine';
  o.frequency.setValueAtTime(f*0.8,t); o.frequency.exponentialRampToValueAtTime(f,t+0.4);
  const l=osc('sine',6,t,2.0), lg=AC.createGain(); lg.gain.value=f*0.012; l.connect(lg); lg.connect(o.frequency);
  env(o,t,0.2,1.6,0.13); o.start(t); o.stop(t+2.0); }];
L['choir ah ♪']=[1,(t,f)=>{ const o=osc('sawtooth',f,t,1.8), o2=osc('sawtooth',f*1.004,t,1.8);
  [[700,10],[1220,12],[2600,14]].forEach(([ff,q])=>{ const bp=AC.createBiquadFilter(); bp.type='bandpass'; bp.frequency.value=ff; bp.Q.value=q;
    o.connect(bp); o2.connect(bp); env(bp,t,0.22,1.4,0.10); }); }];
L['drone fifth ♪']=[1,(t,f)=>{ env(osc('sine',f*0.5,t,2.6),t,0.4,2.0,0.12); env(osc('sine',f*0.75,t,2.6),t,0.5,1.9,0.08); }];
L['white burst']=[0,(t)=>{ const s=noiseSrc(t,0.4); env(s,t,0.002,0.3,0.12); }];
L['rain']=[0,(t)=>{ for(let i=0;i<40;i++){ const d=Math.random()*1.8; const s=noiseSrc(t+d,0.02), bp=AC.createBiquadFilter(); bp.type='bandpass'; bp.frequency.value=3000+Math.random()*5000; bp.Q.value=3; s.connect(bp); env(bp,t+d,0.001,0.015,0.03+Math.random()*0.03); } }];
L['ocean']=[0,(t)=>{ const s=noiseSrc(t,4), lp=AC.createBiquadFilter(); lp.type='lowpass'; lp.Q.value=1.5;
  lp.frequency.setValueAtTime(200,t); lp.frequency.linearRampToValueAtTime(1100,t+1.8); lp.frequency.linearRampToValueAtTime(220,t+3.8); s.connect(lp); env(lp,t,0.8,3.0,0.16); }];
L['wind']=[0,(t)=>{ const s=noiseSrc(t,2.6), lp=AC.createBiquadFilter(); lp.type='lowpass'; lp.Q.value=6;
  lp.frequency.setValueAtTime(300,t); lp.frequency.linearRampToValueAtTime(900,t+1.2); lp.frequency.linearRampToValueAtTime(350,t+2.4); s.connect(lp); env(lp,t,0.5,1.8,0.12); }];
L['thunder']=[0,(t)=>{ const s=noiseSrc(t,2.8), lp=AC.createBiquadFilter(); lp.type='lowpass'; lp.frequency.setValueAtTime(120,t); lp.frequency.linearRampToValueAtTime(60,t+2.5); s.connect(lp); env(lp,t,0.02,2.4,0.35); }];
L['brook']=[0,(t)=>{ for(let i=0;i<14;i++){ const d=Math.random()*1.6, ff=500+Math.random()*900;
    const o=AC.createOscillator(); o.type='sine'; o.frequency.setValueAtTime(ff*1.4,t+d); o.frequency.exponentialRampToValueAtTime(ff,t+d+0.04); env(o,t+d,0.002,0.1,0.04); o.start(t+d); o.stop(t+d+0.12); } }];
L['cricket']=[0,(t)=>{ for(let i=0;i<6;i++){ const d=i*0.09; const o=osc('sine',4300,t+d,0.04); env(o,t+d,0.002,0.03,0.05); } }];
L['frog']=[0,(t)=>{ const o=AC.createOscillator(); o.type='sawtooth'; o.frequency.setValueAtTime(180,t); o.frequency.exponentialRampToValueAtTime(90,t+0.12);
  const lp=AC.createBiquadFilter(); lp.type='lowpass'; lp.frequency.value=500; o.connect(lp); env(lp,t,0.01,0.12,0.14); o.start(t); o.stop(t+0.15); }];
L['jump']=[0,(t)=>{ const o=AC.createOscillator(); o.type='square'; o.frequency.setValueAtTime(300,t); o.frequency.exponentialRampToValueAtTime(900,t+0.15); env(o,t,0.002,0.14,0.09); o.start(t); o.stop(t+0.18); }];
L['power-up']=[0,(t)=>{ [262,330,392,523,659,784].forEach((ff,i)=>env(osc('square',ff,t+i*0.05,0.06),t+i*0.05,0.001,0.05,0.08)); }];
L['explosion']=[0,(t)=>{ const s=noiseSrc(t,1.2), lp=AC.createBiquadFilter(); lp.type='lowpass'; lp.frequency.setValueAtTime(3000,t); lp.frequency.exponentialRampToValueAtTime(80,t+1.0); s.connect(lp); env(lp,t,0.002,1.0,0.3); }];
L['UFO']=[0,(t)=>{ const o=osc('sine',600,t,1.6); const l=osc('sine',9,t,1.6), lg=AC.createGain(); lg.gain.value=180; l.connect(lg); lg.connect(o.frequency); env(o,t,0.05,1.4,0.09); }];
L['siren']=[0,(t)=>{ const o=osc('sawtooth',600,t,2.2); const l=osc('sine',0.8,t,2.2), lg=AC.createGain(); lg.gain.value=250; l.connect(lg); lg.connect(o.frequency);
  const lp=AC.createBiquadFilter(); lp.type='lowpass'; lp.frequency.value=1800; o.connect(lp); env(lp,t,0.05,2.0,0.08); }];
L['telephone']=[0,(t)=>{ [0,0.6].forEach(d=>{ env(osc('sine',440,t+d,0.4),t+d,0.01,0.38,0.07); env(osc('sine',480,t+d,0.4),t+d,0.01,0.38,0.07); }); }];
L['engine']=[0,(t)=>{ const o=osc('sawtooth',55,t,2.0); const l=osc('sine',13,t,2.0), lg=AC.createGain(); lg.gain.value=6; l.connect(lg); lg.connect(o.frequency);
  const lp=AC.createBiquadFilter(); lp.type='lowpass'; lp.frequency.value=300; o.connect(lp); env(lp,t,0.1,1.7,0.16); }];
L['static']=[0,(t)=>{ const s=noiseSrc(t,1.4), bp=AC.createBiquadFilter(); bp.type='bandpass'; bp.frequency.value=2400; bp.Q.value=0.4; s.connect(bp); env(bp,t,0.05,1.2,0.06); }];
L['typewriter']=[0,(t)=>{ const s=noiseSrc(t,0.03), hp=AC.createBiquadFilter(); hp.type='highpass'; hp.frequency.value=2500; s.connect(hp); env(hp,t,0.0005,0.025,0.14);
  const o=osc('sine',3100,t+0.005,0.03); env(o,t+0.005,0.001,0.02,0.05); }];
window.SOUNDLIB={}; for(const k in L) window.SOUNDLIB[k]=L[k][1];
const SOUNDLIB={}; for(const k in L) SOUNDLIB[k]=L[k][1]; window.SOUNDLIB=SOUNDLIB;
const SCALE=[146.83,165.18,176.20,220.25,234.93,293.66,330.36,352.39,440.49];
const NOTES=['D','E','F','A','B♭','D′','E′','F′','A′'];
window.SCALE=SCALE;

  const FAMS=['rom','vial','star','barcode','chev','rotor'];
  const STARCOLS=['#7fd0ff','#ffd23d'];
  const COLS=['#c9a25a','#7fa7b8','#9bb87a','#d9b45a','#8fb6c9','#a99bc4'];
  let tiles=[];
  function build(seed){ const R=rng(seed); tiles=[]; let id=0;
    for(let y=0;y<N;y++)for(let x=0;x<N;x++){ tiles.push({ id:id++, gx:x,gy:y, ax:x,ay:y, px:x,py:y,
      fam:FAMS[(R()*FAMS.length)|0], col:COLS[(R()*COLS.length)|0], seed:(R()*1e9)|0|1, rot:R()*6.28,
      delta:0, dv:0, wave:0, phase:R()*6.28,
      flowDir:R()<.5?0:Math.PI, flowOff:R()*200, flowSpd:0.5,
      scan:R(), scanDir:R()<.5?1:-1, scanSpd:0.012,
      spin:R()*6.28, spinSpd:0.008, starCol:STARCOLS[(R()*STARCOLS.length)|0],
      dood:R(), doodSpd:0.006, jit:0, dp:null,
      neg:R()<0.22, gspd:0.012, gdir:1,
      hud:((R()*256)|0).toString(16).toUpperCase().padStart(2,'0'), p1:R(), p2:R() }); } }
  build(2718);
  const at=(x,y)=> tiles.find(t=>t.gx===x&&t.gy===y);

  function rotRow(r,dir){ for(const t of tiles.filter(t=>t.gy===r)){ if(dir>0&&t.gx===N-1)t.ax=-1; if(dir<0&&t.gx===0)t.ax=N; t.gx=(t.gx+dir+N)%N; } }
  function rotCol(c,dir){ for(const t of tiles.filter(t=>t.gx===c)){ if(dir>0&&t.gy===N-1)t.ay=-1; if(dir<0&&t.gy===0)t.ay=N; t.gy=(t.gy+dir+N)%N; } }

  let curBeat=-1, flash=0;
  function doMove(sl){ if(sl.type==='row') rotRow(sl.idx, sl.dir); else rotCol(sl.idx, sl.dir); for(const t of tiles)if(t.fam==='rotor')t.gspd+=0.05; }
  function poll(now){ for(let i=fl.length-1;i>=0;i--){ if(fl[i].t<=now){ const e=fl[i]; beatPulse=1;
    if(e.down){ downPulse=1; flash=1; for(const t of tiles) if(t.fam==='vial'){ t.wave=Math.min(1,t.wave+0.6); t.dv+=0.5; } }
    if(e.pulse){ flash=Math.max(flash,0.55); }
    if(e.sl) doMove(e.sl); fl.splice(i,1);} } }

  let boil=0, _s=1, LW=1;
  const hand=id=>{ _s=((boil*9973+id*7919)%2147483646)+1; };
  const rn=()=>{ _s=(_s*16807)%2147483647; return (_s-1)/2147483646; };
  const jt=a=>(rn()-.5)*2*a;
  function ink(pts,w,a,close){ g.lineCap='round'; g.lineJoin='round'; g.strokeStyle='rgba(40,34,30,'+(a==null?.9:a)+')';
    g.lineWidth=(w||1.5)*LW; g.beginPath();
    pts.forEach((q,i)=>{ const x=q[0]+jt(.45*LW), y=q[1]+jt(.45*LW); i?g.lineTo(x,y):g.moveTo(x,y); }); if(close) g.closePath(); g.stroke(); }
  function wash(pts,col,dx,dy){ g.fillStyle=col; g.beginPath(); const ox=(dx==null?1.1:dx)*LW, oy=(dy==null?.7:dy)*LW;
    pts.forEach((q,i)=>{ i?g.lineTo(q[0]+ox,q[1]+oy):g.moveTo(q[0]+ox,q[1]+oy); }); g.closePath(); g.fill(); }
  const ell=(cx,cy,rx,ry,a0,a1,n)=>{ a0=a0||0; a1=(a1==null)?6.2832:a1; n=n||18; const p=[];
    for(let i=0;i<=n;i++){ const a=a0+(a1-a0)*i/n; p.push([cx+Math.cos(a)*rx, cy+Math.sin(a)*ry]); } return p; };
  const dot=(x,y,r,col)=>{ g.fillStyle=col; g.beginPath(); g.arc(x+jt(.2*LW),y+jt(.2*LW),r,0,7); g.fill(); };
  function unit(cx,cy,k,flip){ g.save(); g.translate(cx,cy); g.scale((flip||1)*k,k); LW=1/k; }
  function done(){ g.restore(); LW=1; }

  function rom(r,t){ const s=Math.min(r.w,r.h), ph=t.dood*6.283, dir=Math.cos(ph)>=0?1:-1, gy=r.y+r.h*0.78;
    ink([[r.x+r.w*0.08,gy+1],[r.x+r.w*0.5,gy+1.4],[r.x+r.w*0.92,gy+1]],1,.35);
    unit(r.x+r.w/2+Math.sin(ph)*r.w*0.2+jt(t.jit*0.12), gy, s/44, dir);
    const st=t.dood*70;
    for(const side of [1,0]) for(let i=-1;i<=1;i++){ const sw=Math.sin(st+i*2.1+side*3.14)*2.2;
      ink([[i*5,-4],[i*5+sw*.5+1.5,-1.6],[i*5+sw+2.5,0]], side?1.3:.9, side?.9:.45); }
    const dome=ell(0,-4,11,9.5,Math.PI,6.2832,16);
    wash(dome,'rgba(196,50,44,.92)'); ink(dome.concat([[-11,-4]]),1.6,.95); ink([[-10,-4],[11,-4]],1,.8);
    [[-5,-9,1.8],[1,-11,1.7],[6,-7,1.5],[-8,-6.5,1.3],[-1,-6.2,1.4]].forEach(([x,y,rr])=>dot(x,y,rr,'rgba(34,28,26,.92)'));
    const head=ell(11,-3,4.3,4,Math.PI*1.05,Math.PI*2.25,10);
    g.fillStyle='rgba(34,28,26,.95)'; g.beginPath(); head.forEach((q,i)=>i?g.lineTo(q[0],q[1]):g.moveTo(q[0],q[1])); g.closePath(); g.fill();
    dot(13,-4.2,.9,'#f6f0e2');
    ink([[12,-6],[14,-10],[17,-11]],.8,.85); ink([[13.5,-6],[17,-8.5],[19.5,-8]],.8,.85);
    done(); }

  function vial(r,t){ const s=Math.min(r.w,r.h), bx=r.x+r.w*0.38, by=r.y+r.h*0.96, L=r.h*0.78;
    const bend=Math.max(0.05,Math.min(1.3,0.35+t.delta*3.2+Math.sin(t.phase)*0.18*t.wave)), n=10;
    ink([[r.x+r.w*0.62,by],[r.x+r.w*0.66,by-L*0.3],[r.x+r.w*0.72,by-L*0.45]],1,.4);
    let x=bx,y=by; const P=[[x,y]], A=[-Math.PI/2];
    for(let i=1;i<=n;i++){ const u=i/n, a=-Math.PI/2+bend*Math.pow(u,1.4); x+=Math.cos(a)*L/n; y+=Math.sin(a)*L/n; P.push([x,y]); A.push(a); }
    const Lf=[],Rt=[]; P.forEach((p,i)=>{ const w=s*0.05*(1-i/n)+0.7, nx=Math.cos(A[i]+1.5708), ny=Math.sin(A[i]+1.5708);
      Lf.push([p[0]-nx*w,p[1]-ny*w]); Rt.push([p[0]+nx*w,p[1]+ny*w]); });
    const shape=Lf.concat(Rt.reverse()); wash(shape,'rgba(126,172,88,.85)'); ink(shape,1.2,.85,true);
    const tip=P[n], rr=s*0.075*(0.85+0.3*t.wave), dx=tip[0]+Math.cos(A[n])*rr*.5, dy=tip[1]+rr*.8;
    const drop=ell(dx,dy,rr,rr*1.12,0,6.2832,16); wash(drop,'rgba(160,206,232,.8)',.4,.4); ink(drop,1.1,.85,true);
    dot(dx-rr*.35,dy-rr*.35,rr*.22,'rgba(255,255,255,.95)'); }

  function star(r,t){ const s=Math.min(r.w,r.h), hop=Math.abs(Math.sin(t.spin*2))*s*0.07, flap=Math.sin(t.spin*5);
    const gy=r.y+r.h*0.8; ink([[r.x+r.w*0.15,gy],[r.x+r.w*0.85,gy]],1,.35);
    const blue=t.starCol==='#7fd0ff', body=blue?'rgba(112,152,200,.85)':'rgba(206,164,88,.88)';
    unit(r.x+r.w/2, gy-hop, s/46, Math.sin(t.spin*0.3)>=0?1:-1);
    ink([[-1,-6],[-1.5,0]],1,.8); ink([[2,-6],[2.5,0]],1,.8);
    const b=ell(0,-12,10,6.5,0,6.2832,16); wash(b,body); ink(b,1.4,.9,true);
    ink([[-9,-13],[-17,-17]],1.3,.85); ink([[-9,-11],[-17,-13]],1.3,.85);
    const h=ell(8,-18,5,4.6,0,6.2832,14); wash(h,body); ink(h,1.4,.9,true);
    ink([[12.5,-19],[17,-17.6],[12.6,-16.4]],1.1,.9,true); dot(9.6,-19.2,1,'rgba(34,28,26,.95)');
    const wg=[[-4,-12],[1,-17-flap*7],[7,-13]]; wash(wg.concat([[1,-11]]),blue?'rgba(80,118,168,.7)':'rgba(170,128,64,.7)'); ink(wg,1.3,.9);
    done(); }

  function barcode(r,t){ const s=Math.min(r.w,r.h), cx=r.x+r.w/2, cy=r.y+r.h*0.55;
    const pond=ell(cx,cy,r.w*0.44,r.h*0.3,0,6.2832,22); wash(pond,'rgba(138,184,208,.45)',0,0); ink(pond,1,.5,true);
    const fx=r.x+r.w*(0.18+0.64*t.scan), fy=cy+Math.sin(t.scan*12)*s*0.03;
    ink([[fx-t.scanDir*s*0.22,fy+s*0.02],[fx-t.scanDir*s*0.3,fy+s*0.05]],.8,.3);
    unit(fx,fy,s/50,t.scanDir);
    const wag=Math.sin(t.scan*60)*2.4;
    const bd=ell(0,0,9,4.6,0,6.2832,16); wash(bd,'rgba(214,184,92,.9)'); ink(bd,1.3,.9,true);
    const tail=[[-8,0],[-14,-4+wag],[-13.5,0],[-14,4+wag]]; wash(tail,'rgba(196,160,76,.9)'); ink(tail,1.2,.9,true);
    ink([[-1,-4],[2,-7],[4,-4]],1,.8); dot(5.5,-1,.9,'rgba(34,28,26,.95)');
    done(); }

  function chev(r,t){ const s=Math.min(r.w,r.h), dir=Math.cos(t.flowDir)>=0?1:-1, u=(((t.flowOff*0.0025)%1)+1)%1;
    const gy=r.y+r.h*0.76, x=dir>0 ? r.x-r.w*0.2+u*r.w*1.4 : r.x+r.w*1.2-u*r.w*1.4;
    ink([[x-dir*s*0.9,gy+.5],[x-dir*s*0.2,gy+.5]],1.4,.12);
    ink([[r.x,gy+1.5],[r.x+r.w,gy+1.5]],.8,.3);
    unit(x,gy,s/46,dir);
    const foot=[[-12,0],[-8,-4],[10,-4],[14,-7],[16,-6],[15,0]]; wash(foot,'rgba(150,160,128,.85)'); ink(foot,1.2,.9,true);
    ink([[12,-6],[13,-12]],1,.9); ink([[14.5,-6],[17,-11]],1,.9); dot(13,-12.5,1.1,'rgba(34,28,26,.9)'); dot(17.3,-11.4,1.1,'rgba(34,28,26,.9)');
    const sh=ell(0,-10,8,8,0,6.2832,18); wash(sh,'rgba(196,150,82,.9)'); ink(sh,1.3,.9,true);
    const sp=[]; for(let i=0;i<=26;i++){ const a=i/26*9.4, rr=7-i*0.24; sp.push([Math.cos(a)*rr, -10+Math.sin(a)*rr]); } ink(sp,1,.75);
    done(); }

  function rotor(r,t){ const s=Math.min(r.w,r.h), cx=r.x+r.w/2, cy=r.y+r.h*0.42, by=r.y+r.h;
    ink([[cx,by],[cx+s*0.03,cy+s*0.25],[cx,cy+s*0.06]],1.3,.85);
    const lf=[[cx+s*0.02,by-s*0.18],[cx+s*0.2,by-s*0.3],[cx+s*0.03,by-s*0.24]]; wash(lf,'rgba(126,172,88,.85)'); ink(lf,1,.8,true);
    unit(cx,cy,s/44,1); g.rotate(t.rot);
    for(let i=0;i<9;i++){ const a=i/9*6.2832, pc=[Math.cos(a)*9,Math.sin(a)*9];
      const pet=ell(0,0,6.2,2.6,0,6.2832,10).map(q=>[pc[0]+q[0]*Math.cos(a)-q[1]*Math.sin(a), pc[1]+q[0]*Math.sin(a)+q[1]*Math.cos(a)]);
      wash(pet,'rgba(255,253,244,.97)',0,0); ink(pet,1,.75,true); }
    const c=ell(0,0,4.2,4.2,0,6.2832,12); wash(c,'rgba(232,196,84,.95)',0,0); ink(c,1.1,.8,true);
    done(); }
  const DRAW={rom,vial,star,barcode,chev,rotor};

  var paperDirty=true;
  const paperCv=document.createElement('canvas'), pgx=paperCv.getContext('2d');
  function makePaper(){ paperCv.width=Math.max(2,S*DPR|0); paperCv.height=paperCv.width; const W2=paperCv.width;
    pgx.fillStyle='#efe7d4'; pgx.fillRect(0,0,W2,W2);
    const vg=pgx.createRadialGradient(W2/2,W2/2,W2*0.2,W2/2,W2/2,W2*0.75); vg.addColorStop(0,'rgba(255,250,236,.45)'); vg.addColorStop(1,'rgba(150,130,100,.25)');
    pgx.fillStyle=vg; pgx.fillRect(0,0,W2,W2);
    for(let i=0,n=W2*W2/80;i<n;i++){ pgx.fillStyle='rgba('+(Math.random()<.5?'120,100,70':'255,255,245')+','+(Math.random()*.07)+')'; pgx.fillRect(Math.random()*W2,Math.random()*W2,1+Math.random()*1.5,1); } }

  function drawTile(t){ const px=t.ax*TILE, py=t.ay*TILE, r={x:px+3,y:py+3,w:TILE-6,h:TILE-6};
    g.save(); g.beginPath(); g.rect(px,py,TILE,TILE); g.clip();
    g.globalAlpha=0.17; g.fillStyle=t.col; g.fillRect(px+1,py+1,TILE-2,TILE-2); g.globalAlpha=1;
    hand(t.id*13+1); DRAW[t.fam](r,t);
    g.font='italic '+Math.max(8,TILE*0.11)+'px Georgia, serif'; g.fillStyle='rgba(40,34,30,.42)'; g.textAlign='left'; g.textBaseline='alphabetic';
    g.fillText(t.hud.toLowerCase(), px+4, py+TILE-4);
    g.restore();
    hand(t.id*13+5); ink([[px+1,py+1],[px+TILE-1,py+1],[px+TILE-1,py+TILE-1],[px+1,py+TILE-1]],1,.32,true);
  }

  function cellAt(e){ const b=cv.getBoundingClientRect(); return { x:Math.floor((e.clientX-b.left)/(b.width/N)), y:Math.floor((e.clientY-b.top)/(b.height/N)) }; }
  let ptr=null;
  cv.addEventListener('pointerdown',e=>{ ptr={...cellAt(e), sx:e.clientX, sy:e.clientY}; });
  window.addEventListener('pointerup',e=>{ if(!ptr)return; const dx=e.clientX-ptr.sx, dy=e.clientY-ptr.sy;
    if(Math.abs(dx)>Math.abs(dy)){ if(Math.abs(dx)>8 && ptr.y>=0&&ptr.y<N) rotRow(ptr.y, dx>0?1:-1); }
    else { if(Math.abs(dy)>8 && ptr.x>=0&&ptr.x<N) rotCol(ptr.x, dy>0?1:-1); } ptr=null; });

  let last=performance.now();
  function frame(t){ const dt=(t-last)/1000; last=t; const now=AC?AC.currentTime:0; poll(now);
    if(ANA){ ANA.getByteTimeDomainData(anaBuf); let s=0; for(let i=0;i<anaBuf.length;i++){const v=(anaBuf[i]-128)/128; s+=v*v;} energy += (Math.sqrt(s/anaBuf.length)-energy)*0.25; }
    flash=Math.max(0,flash-dt*2.4); beatPulse=Math.max(0,beatPulse-dt*3); downPulse=Math.max(0,downPulse-dt*2.2);
    boil=Math.floor(t/1000*8); if(paperDirty){ makePaper(); paperDirty=false; }
    g.clearRect(0,0,S,S); g.drawImage(paperCv,0,0,S,S);
    for(const t of tiles){ t.ax+=(t.gx-t.ax)*Math.min(1,dt*14); t.ay+=(t.gy-t.ay)*Math.min(1,dt*14);
      if(t.fam==='vial'){ const vx=t.ax-t.px, vy=t.ay-t.py;
        t.dv += -vx*2.6 + (Math.random()-0.5)*energy*0.12 + Math.sin(t.phase*0.7)*0.0009;
        t.wave = Math.min(1, t.wave + (Math.abs(vx)+Math.abs(vy))*3.5 + energy*0.10);
        t.dv += (-9*t.delta)*0.016; t.dv*=0.93; t.delta += t.dv*0.016;
        t.wave = Math.max(0.12, t.wave*0.94); t.phase += 0.05 + Math.abs(t.dv)*0.5; }
      if(t.fam==='chev'){ const vx=t.ax-t.px, vy=t.ay-t.py, sp=Math.hypot(vx,vy);
        if(sp>0.003){ t.flowDir=Math.atan2(vy,vx); t.flowSpd=Math.min(7,t.flowSpd+sp*45); }
        t.flowSpd += (0-t.flowSpd)*0.06 + energy*0.5;
        t.flowOff += t.flowSpd; }
      if(t.fam==='barcode'){ const v=Math.hypot(t.ax-t.px,t.ay-t.py);
        t.scanSpd += (0-t.scanSpd)*0.06 + v*0.25 + energy*0.02;
        t.scan += t.scanSpd*t.scanDir; if(t.scan>1){t.scan=1;t.scanDir=-1;} if(t.scan<0){t.scan=0;t.scanDir=1;} }
      if(t.fam==='star'){ const v=Math.hypot(t.ax-t.px,t.ay-t.py);
        t.spinSpd += (0-t.spinSpd)*0.05 + v*0.18 + energy*0.05; t.spin += t.spinSpd; }
      if(t.fam==='rom'){ const v=Math.hypot(t.ax-t.px,t.ay-t.py);
        t.jit = Math.min(6, t.jit*0.9 + v*45 + energy*1.4);
        t.doodSpd += (0-t.doodSpd)*0.06 + v*0.06 + energy*0.02;
        t.dood += t.doodSpd; }
      if(t.fam==='rotor'){ const vx=t.ax-t.px, vy=t.ay-t.py, drive=(Math.abs(vx)>=Math.abs(vy)?vx:vy), sp=Math.abs(drive);
        if(sp>0.003) t.gdir = drive>0?1:-1;
        t.gspd += (0-t.gspd)*0.05 + sp*0.9 + energy*0.14; t.rot += t.gspd*t.gdir; }
      t.px=t.ax; t.py=t.ay; drawTile(t); }
    for(let k=3;k<N;k+=3){ hand(900+k); ink([[k*TILE,0],[k*TILE,S/2],[k*TILE,S]],2,.7); hand(950+k); ink([[0,k*TILE],[S/2,k*TILE],[S,k*TILE]],2,.7); }
    hand(990); ink([[2,2],[S-2,2],[S-2,S-2],[2,S-2]],3,.9,true);
    if(flash>0.02){ hand(991); ink([[6,6],[S-6,6],[S-6,S-6],[6,S-6]],2.4,flash*0.6,true); }
    if(recording){ rcx.drawImage(cv,0,0,recCv.width,recCv.height); recTick(); }
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);

  let CHART = {"tempo":107,"meter":4,"bars":4,"lines":[{"sound":"gong","deg":3,"cells":[0,8,16,24,32,40,48,56]},{"sound":"hi-hat closed","deg":3,"cells":[2,6,10,14,18,22,26,30,34,38,42,46,50,54,58,62]},{"sound":"music box ♪","deg":1,"cells":[0,6,16,22,32,38,48,54]},{"sound":"water plink ♪","deg":5,"cells":[12,28,44,60]},{"sound":"marimba ♪","deg":3,"cells":[2,10,18,26,34,42,50,58]},{"sound":"marimba ♪","deg":7,"cells":[10,26,42,58]},{"sound":"marimba ♪","deg":5,"cells":[2,18,34,50]},{"sound":"water plink ♪","deg":6,"cells":[4,12,20,28,36,44,52,60]},{"sound":"water plink ♪","deg":8,"cells":[4,14,20,30,36,46,52,62]},{"sound":"taiko","deg":3,"cells":[0,4,8,12,16,20,24,28,32,36,40,44,48,52,56,60]},{"sound":"shaker","deg":3,"cells":[0,1,2,4,5,6,7,8,9,16,17,18,20,21,22,23,24,25,32,33,34,36,37,38,39,40,41,48,49,50,52,53,54,55,56,57]},{"sound":"typewriter","deg":3,"cells":[3,11,19,28,29,35,43,51,60,61]},{"sound":"music box ♪","deg":7,"cells":[10,42]},{"sound":"music box ♪","deg":3,"cells":[0,6,16,22,32,38,48,54]},{"sound":"music box ♪","deg":2,"cells":[26,58]},{"sound":"drone fifth ♪","deg":3,"cells":[14,30,46,62]},{"sound":"clap","deg":3,"cells":[4,12,20,28,36,44,52,60]},{"sound":"marimba ♪","deg":3,"cells":[4,12,20,28,36,44,52,60]},{"sound":"typewriter","deg":3,"cells":[7,8,23,24,39,40,55,56]},{"sound":"marimba ♪","deg":3,"cells":[7,8,23,24,39,40,55,56]},{"sound":"pad ♪","deg":3,"cells":[]},{"sound":"marimba ♪","deg":3,"cells":[1,17,33,49]},{"sound":"snare","deg":3,"cells":[30,31,62,63]},{"sound":"music box ♪","deg":4,"cells":[15,47]},{"sound":"marimba ♪","deg":8,"cells":[56]}]};

  function lineFor(l){ if(/♪/.test(l.sound)) return {type:'row', idx:((8-(l.deg??3))%9+9)%9};
    let h=0; for(let i=0;i<l.sound.length;i++) h=(h*31+l.sound.charCodeAt(i))>>>0;
    return {type:(h&1)?'row':'col', idx:(h+(l.deg??0))%9}; }

  function scheduleLoop(startT){ const stepDur=60/CHART.tempo/4, steps=CHART.bars*CHART.meter*4;
    CHART.lines.forEach(l=>{ const fn=SOUNDLIB[l.sound]; if(!fn) return; const bl=lineFor(l);
      l.cells.forEach(c=>{ const tt=startT+c*stepDur;
        fn(tt, SCALE[l.deg??3]);
        fl.push({t:tt, sl:{type:bl.type, idx:bl.idx, dir:((c>>2)&1)?1:-1}});
        if(l.sound==='kick') fl.push({t:tt, down:true});
        else if(l.sound==='snare'||l.sound==='clap') fl.push({t:tt, pulse:true}); });
    }); return steps*stepDur; }
  let loopT=0, sTimer=null, loopOn=true, targetLoops=0, scheduledLoops=0, endAt=0, takeActive=false, recLoops=1;
  function stopClock(){ if(sTimer){ clearInterval(sTimer); sTimer=null; } }
  function startClock(target){ loopT=AC.currentTime+0.06; scheduledLoops=0; endAt=0; targetLoops=target; if(!sTimer) sTimer=setInterval(schedTick,25); schedTick(); }
  function schedTick(){ if(!AC) return;
    while((targetLoops===0 || scheduledLoops<targetLoops) && loopT < AC.currentTime+0.3){ loopT += scheduleLoop(loopT); scheduledLoops++; if(targetLoops && scheduledLoops>=targetLoops) endAt=loopT; }
    if(targetLoops && endAt && AC.currentTime >= endAt + 0.5){ if(takeActive) finishTake(); else endStop(); } }

  const playBtn=document.getElementById('play'), pauseBtn=document.getElementById('pause'),
        recBtn=document.getElementById('rec'), stat=document.getElementById('stat');
  function play(){ ensureAudio(); if(AC.state==='suspended')AC.resume(); playing=true; takeActive=false;
    startClock(loopOn?0:1); playBtn.classList.add('on'); pauseBtn.classList.remove('on');
    stat.textContent = loopOn?'playing · looping':'playing once — stops at the end'; }