From 2487292e606d47af074cf1f91ba4fa20ddd0b5cf Mon Sep 17 00:00:00 2001
From: ashley <iamashley@duck.com>
Date: Sat, 11 Oct 2025 12:08:43 +0200
Subject: [PATCH] Update html/strings.ejs

---
 html/strings.ejs | 563 -----------------------------------------------
 1 file changed, 563 deletions(-)
diff --git a/html/strings.ejs b/html/strings.ejs
index af91316c..e69de29b 100644
--- a/html/strings.ejs
+++ b/html/strings.ejs
@@ -1,563 +0,0 @@
-<!--
-
-    This Source Code Form is subject to the terms of the GNU General Public License:
-
-    Copyright (C) 2021-2025 Poke (https://codeberg.org/ashley/poke)
-    
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License
-    along with this program. If not, see https://www.gnu.org/licenses/.
---->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Poke Strings — Guitar • Ukulele • Violin</title>
-  <meta name="theme-color" content="#111111" />
-       <meta content="website" property="og:type">
-    <meta content="PokeStrings" property="og:title">
-    <meta content="Guitar, Ukulele, Violin!" property="twitter:description">  <meta content="summary_large_image" name="twitter:card">
-   <meta property="og:image" content="/static/poke.webp">
-
-  <style>
- 
-
-    :root{
-      --bg:#0d0f12;--bg-soft:#141820;--fg:#f3f5f7;--muted:#9aa4b2;
-      --brand:#7a5cff;--accent:#00d3a7;--danger:#ff5577;
-      --key-outline:#1a2030;--radius:16px;
-      --shadow:0 12px 34px rgba(0,0,0,.40),0 2px 10px rgba(0,0,0,.25);
-      --glass:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
-    }
-    .light{
-      --bg:#f7f8fb;--bg-soft:#ffffff;--fg:#0e1116;--muted:#4a5568;
-      --brand:#6a5cff;--accent:#00b394;--key-outline:#cfd8e3;
-      --shadow:0 12px 30px rgba(0,0,0,.12),0 2px 10px rgba(0,0,0,.08);
-      --glass:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.6));
-    }
-
-    *{box-sizing:border-box}
-    html,body{height:100%}
-    body{
-      margin:0;
-      background:
-        radial-gradient(1200px 600px at 15% -10%, rgba(122,92,255,.18), transparent 60%),
-        radial-gradient(1200px 700px at 100% 0%, rgba(0,211,167,.12), transparent 45%),
-        linear-gradient(180deg,var(--bg),var(--bg-soft));
-      color:var(--fg);
-      font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,"Apple Color Emoji","Segoe UI Emoji";
-      display:grid;grid-template-rows:auto auto 1fr auto;gap:14px;
-    }
-
-    /* compact header (matches Poke Piano/Drums vibe) */
-    header{
-      padding:10px 16px 0;
-      display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
-    }
-    .brand{display:flex;align-items:center;gap:10px}
-    .logo{width:28px;height:28px;border-radius:10px;background:conic-gradient(from 220deg,var(--brand),var(--accent),var(--brand));box-shadow:0 6px 18px rgba(122,92,255,.28);border:1px solid var(--key-outline)}
-    h1{margin:0;font-size:18px;letter-spacing:.2px}
-    .header-actions{display:flex;gap:6px}
-
-    .toolbar{display:grid;gap:8px;grid-template-columns:repeat(12,1fr);padding:0 16px}
-    .card{
-      background:var(--bg-soft);border:1px solid var(--key-outline);border-radius:var(--radius);
-      box-shadow:var(--shadow);padding:12px;min-width:0;position:relative;overflow:hidden;
-    }
-    .card::after{content:"";position:absolute;inset:0;pointer-events:none;background:
-      radial-gradient(600px 160px at 10% 0%, rgba(255,255,255,.06), transparent 60%),
-      radial-gradient(500px 140px at 90% 0%, rgba(122,92,255,.12), transparent 50%);mix-blend-mode:overlay}
-    .title{font-size:12px;color:var(--muted);margin-bottom:8px;letter-spacing:.3px;text-transform:uppercase}
-    .group{display:grid;gap:10px}
-
-    .row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;align-items:end}
-    .pair{display:grid;grid-template-columns:max-content 1fr;gap:8px;align-items:center;min-width:0}
-    .pair>label{color:var(--muted);font-size:12px}
-
-    select,input[type="range"],input[type="number"],button{
-      width:100%;border-radius:12px;border:1px solid var(--key-outline);background:#0f131b;color:var(--fg);
-      padding:8px 10px;outline:none;transition:transform .06s ease,box-shadow .06s ease,border-color .12s ease;min-height:32px
-    }
-    .light select,.light input[type="range"],.light input[type="number"],.light button{background:#fff}
-    input[type="range"]{height:28px}
-    input[type="number"]{text-align:center}
-    button{cursor:pointer;background:linear-gradient(180deg,var(--brand),#4a3aff);border:none;color:#fff;font-weight:700;letter-spacing:.2px}
-    button.secondary{background:var(--bg-soft);color:var(--fg);border:1px solid var(--key-outline)}
-    button.danger{background:var(--danger)}
-    button:active{transform:translateY(1px)}
-    button:focus-visible,select:focus-visible,input:focus-visible{box-shadow:0 0 0 3px rgba(122,92,255,.35);border-color:var(--brand)}
-
-    /* strings panel */
-    .strings{display:grid;gap:8px}
-    .string-row{
-      display:grid;grid-template-columns:110px 1fr 92px 60px 68px;gap:8px;align-items:center;
-      background:#0f131b;border:1px solid var(--key-outline);border-radius:12px;padding:8px 10px;
-    }
-    .badge{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--key-outline);background:linear-gradient(180deg,#111723,#0f131b);font-weight:700;letter-spacing:.2px;text-align:center}
-    .mutebtn{background:#171c26}
-    .mutebtn.on{background:#2a3242;border-color:transparent}
-    .playbtn{background:var(--accent);border:none;color:#00130f;font-weight:800}
-    .note-pill{font-family:ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; font-size:12px; padding:4px 8px; border:1px solid var(--key-outline); border-radius:999px; background:#111723}
-
-    .grid-col-3{grid-column:span 3}.grid-col-4{grid-column:span 4}.grid-col-5{grid-column:span 5}
-    .grid-col-6{grid-column:span 6}.grid-col-7{grid-column:span 7}.grid-col-8{grid-column:span 8}.grid-col-12{grid-column:span 12}
-
-    .footer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:0 16px 16px}
-    .chip{padding:8px 12px;border-radius:999px;border:1px solid var(--key-outline);background:var(--bg-soft);display:inline-flex;gap:8px;align-items:center}
-
-    canvas{width:100%;height:84px;border-radius:var(--radius);background:#0b0f16;border:1px solid var(--key-outline);box-shadow:var(--shadow)}
-
-    @media (max-width:1000px){
-      .toolbar{grid-template-columns:repeat(6,1fr)}
-      .grid-col-8,.grid-col-7,.grid-col-6,.grid-col-5{grid-column:span 6}
-      .grid-col-4{grid-column:span 3}.grid-col-3{grid-column:span 3}
-      .string-row{grid-template-columns:90px 1fr 78px 52px 64px}
-    }
-  </style>
-</head>
-<body>
-  <header>
-    <div class="brand">
-      <div class="logo"></div>
-      <h1>Poke Strings BETA</h1>
-    </div>
-    <div class="header-actions">
-      <button id="power">Start Audio</button>
-      <button id="theme"  style="display:none" class="secondary">Theme</button>
-    </div>
-  </header>
-
-  <section class="toolbar">
-    <div class="card grid-col-5 group">
-      <div class="title">Instrument</div>
-      <div class="row">
-        <div class="pair"><label for="inst">Type</label>
-          <select id="inst">
-            <option selected>Guitar</option>
-            <option>Ukulele</option>
-            <option>Violin</option>
-          </select>
-        </div>
-        <div class="pair"><label for="tuning">Tuning</label><select id="tuning"></select></div>
-      </div>
-      <div class="row">
-        <div class="pair"><label for="capo">Capo</label><input id="capo" type="range" min="0" max="12" step="1" value="0"></div>
-        <div class="pair"><label for="a4">A4 (Hz)</label><input id="a4" type="number" min="400" max="480" step="0.1" value="440"></div>
-      </div>
-      <div class="row">
-        <div class="pair"><label for="chord">Chord (Guitar/Uke)</label>
-          <select id="chord">
-            <option selected>—</option>
-            <option>C</option><option>G</option><option>Am</option><option>F</option>
-            <option>D</option><option>Em</option><option>E</option><option>A</option><option>Dm</option><option>Bm</option>
-          </select>
-        </div>
-        <div class="pair"><label for="strings">Strings</label>
-          <div id="stringCount" class="badge">—</div>
-        </div>
-      </div>
-    </div>
-
-    <div class="card grid-col-4 group">
-      <div class="title">Play</div>
-      <div class="row">
-        <div class="pair"><label for="strum">Strum Spacing (ms)</label><input id="strum" type="range" min="0" max="120" step="1" value="30"></div>
-        <div class="pair"><label for="dur">Note Time (s)</label><input id="dur" type="range" min="0.1" max="4" step="0.01" value="1.2"></div>
-      </div>
-      <div class="row">
-        <div class="pair"><label>&nbsp;</label><button id="strumDown" class="secondary">Strum Down</button></div>
-        <div class="pair"><label>&nbsp;</label><button id="strumUp" class="secondary">Strum Up</button></div>
-      </div>
-      <div class="row">
-        <div class="pair"><label>&nbsp;</label><button id="arp" class="secondary">Arp</button></div>
-        <div class="pair"><label for="arpRate">Arp Rate (ms)</label><input id="arpRate" type="range" min="50" max="400" step="10" value="160"></div>
-      </div>
-    </div>
-
-    <div class="card grid-col-3 group">
-      <div class="title">Tone</div>
-      <div class="row">
-        <div class="pair"><label for="atk">Attack</label><input id="atk" type="range" min="0.001" max="0.3" step="0.001" value="0.01"></div>
-        <div class="pair"><label for="rel">Release</label><input id="rel" type="range" min="0.05" max="4" step="0.01" value="1.2"></div>
-      </div>
-      <div class="row">
-        <div class="pair"><label for="color">LP Cutoff (Hz)</label><input id="color" type="range" min="800" max="12000" step="1" value="4500"></div>
-        <div class="pair"><label for="body">Body Mix</label><input id="body" type="range" min="0" max="1" step="0.01" value="0.35"></div>
-      </div>
-      <div class="row">
-        <div class="pair"><label for="vRate">Vibrato Hz (violin)</label><input id="vRate" type="range" min="0" max="9" step="0.1" value="5"></div>
-        <div class="pair"><label for="vDepth">Vibrato Depth (cents)</label><input id="vDepth" type="range" min="0" max="80" step="1" value="18"></div>
-      </div>
-    </div>
-
-    <div class="card grid-col-12 group">
-      <div class="title">Strings</div>
-      <div id="strings" class="strings"></div>
-    </div>
-
-    <div class="card grid-col-12 group">
-      <div class="title">Visualizer</div>
-      <canvas id="viz" width="1000" height="120"></canvas>
-    </div>
-  </section>
-
-  <section class="footer">
-    <div></div>
-    <div class="chip"><span id="status">Ready</span></div>
-  </section>
-
-  <script>
-    ;(() => {
-      const $ = s => document.querySelector(s)
-      const $$ = s => Array.from(document.querySelectorAll(s))
-
-      const els = {
-        power: $('#power'), theme: $('#theme'),
-        inst: $('#inst'), tuning: $('#tuning'), capo: $('#capo'), a4: $('#a4'), chord: $('#chord'),
-        stringCount: $('#stringCount'), strings: $('#strings'),
-        strum: $('#strum'), dur: $('#dur'),
-        strumDown: $('#strumDown'), strumUp: $('#strumUp'), arp: $('#arp'), arpRate: $('#arpRate'),
-        atk: $('#atk'), rel: $('#rel'), color: $('#color'), body: $('#body'),
-        vRate: $('#vRate'), vDepth: $('#vDepth'),
-        viz: $('#viz'), status: $('#status')
-      }
-
-      const storageKey = 'pokestrings-v1'
-      const defaults = {
-        theme:'dark',
-        inst:'Guitar',
-        tuningKey:'Guitar:Standard',
-        capo:0, a4:440,
-        atk:0.01, rel:1.2, color:4500, body:0.35,
-        vRate:5, vDepth:18,
-        strum:30, dur:1.2, arpRate:160,
-        chord:'—'
-      }
-      let conf = { ...defaults }
-      try { const saved = JSON.parse(localStorage.getItem(storageKey)||'{}'); conf = { ...conf, ...saved } } catch {}
-      function save(){ localStorage.setItem(storageKey, JSON.stringify(conf)) }
-      function setStatus(t){ els.status.textContent = t }
-
-      // ---------- Music utils ----------
-      function freqFromMidi(m, a4 = conf.a4){ return a4 * Math.pow(2, (m-69)/12) }
-      function midiName(m){
-        const n = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'][m%12]
-        const o = Math.floor(m/12)-1
-        return n+o
-      }
-
-      // Tunings (midi numbers), strings ordered low→high
-      const Tunings = {
-        Guitar: {
-          Standard:        [40,45,50,55,59,64],        // E2 A2 D3 G3 B3 E4
-          'Drop D':        [38,45,50,55,59,64],
-          DADGAD:          [38,45,50,55,57,62],
-          'Open G':        [38,43,47,50,55,62],
-          'Open D':        [38,45,50,54,57,62]
-        },
-        Ukulele: {
-          'Standard (re-entrant)': [67,60,64,69],      // G4 C4 E4 A4
-          'Low G':                 [55,60,64,69]
-        },
-        Violin: {
-          Standard: [55,62,69,76]                      // G3 D4 A4 E5
-        }
-      }
-
-      // Chord shapes (low→high). 'x' = mute. Guitar 6 chars, Uke 4 chars.
-      const GuitarChords = {
-        C:'x32010', G:'320003', Am:'x02210', F:'133211', D:'xx0232',
-        Em:'022000', E:'022100', A:'x02220', Dm:'xx0231', Bm:'x24432'
-      }
-      const UkeChords = {
-        C:'0003', G:'0232', Am:'2000', F:'2010', D:'2220', Em:'0432', E:'4442',
-        A:'2100', Dm:'2210', Bm:'4222'
-      }
-
-      // ---------- Audio ----------
-      let ctx, analyser, master, lowpass
-      function initAudio(){
-        if (ctx) return
-        ctx = new (window.AudioContext||window.webkitAudioContext)()
-        master = ctx.createGain(); master.gain.value = 0.9
-        lowpass = ctx.createBiquadFilter(); lowpass.type='lowpass'; lowpass.frequency.value = conf.color
-        analyser = ctx.createAnalyser(); analyser.fftSize = 2048
-
-        lowpass.connect(master)
-        master.connect(analyser)
-        master.connect(ctx.destination)
-
-        drawViz()
-        setStatus('Audio ready')
-      }
-
-      function drawViz(){
-        const c = els.viz, g = c.getContext('2d')
-        const data = new Uint8Array(analyser.frequencyBinCount)
-        function loop(){
-          requestAnimationFrame(loop)
-          analyser.getByteFrequencyData(data)
-          g.clearRect(0,0,c.width,c.height)
-          const w = c.width/data.length
-          for(let i=0;i<data.length;i++){
-            const v=data[i], h=(v/255)*(c.height-8)
-            g.fillStyle='#4a70ff'; g.fillRect(i*w, c.height-h, Math.max(1,w-1), h)
-          }
-        }
-        loop()
-      }
-
-      // Simple pluck (guitar/uke): two oscs + quick noise click + LP filter, with ADSR
-      function pluck(freq, when=ctx.currentTime){
-        const t = when
-        const mix = conf.body
-
-        const filt = ctx.createBiquadFilter(); filt.type='lowpass'; filt.frequency.setValueAtTime(conf.color, t)
-        const out = ctx.createGain(); out.gain.setValueAtTime(0.0001, t)
-
-        const o1 = ctx.createOscillator()
-        o1.type='triangle'; o1.frequency.setValueAtTime(freq*(1+(Math.random()-0.5)*0.002), t)
-        const o2 = ctx.createOscillator()
-        o2.type='sine'; o2.frequency.setValueAtTime(freq*2, t)
-
-        const g1 = ctx.createGain(); g1.gain.value = 1-mix
-        const g2 = ctx.createGain(); g2.gain.value = mix*0.8
-
-        o1.connect(g1); o2.connect(g2); g1.connect(filt); g2.connect(filt)
-
-        // pluck click
-        const nb = ctx.createBuffer(1, 256, ctx.sampleRate)
-        const arr = nb.getChannelData(0); for(let i=0;i<arr.length;i++) arr[i]=(Math.random()*2-1)
-        const n = ctx.createBufferSource(); n.buffer = nb
-        const hp = ctx.createBiquadFilter(); hp.type='highpass'; hp.frequency.value=3000
-        const ng = ctx.createGain(); ng.gain.setValueAtTime(0.4, t); ng.gain.exponentialRampToValueAtTime(0.0001, t+0.02)
-        n.connect(hp); hp.connect(ng); ng.connect(filt); n.start(t)
-
-        filt.connect(out); out.connect(lowpass)
-
-        const a=t, d=conf.rel
-        out.gain.setValueAtTime(0.0001,a)
-        out.gain.linearRampToValueAtTime(1, a+conf.atk)
-        out.gain.exponentialRampToValueAtTime(0.0001, a+d)
-
-        o1.start(t); o2.start(t)
-        o1.stop(t+d+0.05); o2.stop(t+d+0.05)
-        setTimeout(()=>{ try{ o1.disconnect(); o2.disconnect(); filt.disconnect(); out.disconnect() }catch{} }, (d+0.2)*1000)
-      }
-
-      // Bowed tone (violin): filtered saw + vibrato LFO
-      function bowed(freq, when=ctx.currentTime, hold=conf.dur){
-        const t = when
-        const o = ctx.createOscillator()
-        o.type='sawtooth'; o.frequency.setValueAtTime(freq, t)
-
-        const vLFO = ctx.createOscillator()
-        const vGain = ctx.createGain()
-        vLFO.type='sine'
-        vLFO.frequency.setValueAtTime(conf.vRate, t)
-        vGain.gain.setValueAtTime(freq * (Math.pow(2, conf.vDepth/1200)-1), t) // cents→Hz approx
-        vLFO.connect(vGain); vGain.connect(o.frequency)
-
-        const filt = ctx.createBiquadFilter(); filt.type='lowpass'; filt.frequency.setValueAtTime(conf.color, t)
-        const out = ctx.createGain(); out.gain.setValueAtTime(0.0001, t)
-
-        o.connect(filt); filt.connect(out); out.connect(lowpass)
-
-        const atk = Math.max(0.02, conf.atk)
-        out.gain.linearRampToValueAtTime(0.9, t+atk)
-        out.gain.setTargetAtTime(0.85, t+atk, 0.2)
-        const end = t + hold
-        out.gain.setValueAtTime(0.85, end)
-        out.gain.exponentialRampToValueAtTime(0.0001, end+Math.max(0.2, conf.rel*0.5))
-
-        o.start(t); vLFO.start(t)
-        o.stop(end+Math.max(0.3, conf.rel))
-        vLFO.stop(end+Math.max(0.3, conf.rel))
-        setTimeout(()=>{ try{ o.disconnect(); vLFO.disconnect(); vGain.disconnect(); filt.disconnect(); out.disconnect() }catch{} }, (hold+conf.rel+0.5)*1000)
-      }
-
-      // ---------- Strings UI ----------
-      const state = { strings: [] } // [{midi, name, fret, mute}]
-      function applyTuning(){
-        const t = Tunings[conf.inst]
-        const list = Object.keys(t)
-        els.tuning.innerHTML = list.map((k,i)=>`<option ${ (conf.tuningKey.split(':')[1]||'')===k?'selected':''}>${k}</option>`).join('')
-        if (!list.includes(conf.tuningKey.split(':')[1])) conf.tuningKey = conf.inst+':'+list[0]
-
-        const key = conf.tuningKey.split(':')[1]
-        const mids = t[key].slice()
-        state.strings = mids.map(m=>({ midi:m, name:midiName(m), fret:0, mute:false }))
-        els.stringCount.textContent = String(state.strings.length)
-        buildStringRows()
-        updateChordVisibility()
-        save()
-      }
-
-      function buildStringRows(){
-        els.strings.innerHTML = ''
-        // show low→high, but visually top→bottom
-        state.strings.forEach((s, idx)=>{
-          const row = document.createElement('div'); row.className='string-row'; row.dataset.index=String(idx)
-
-          const label = document.createElement('div'); label.innerHTML = `<span class="badge">${conf.inst} ${state.strings.length-idx}</span>`
-          const note = document.createElement('div'); note.innerHTML = `<span class="note-pill">${s.name}</span>`
-          const fretWrap = document.createElement('div'); fretWrap.innerHTML = `<input type="range" min="0" max="12" step="1" value="${s.fret}">`
-          const mute = document.createElement('button'); mute.className='mutebtn secondary'; mute.textContent = s.mute?'Muted':'Mute'; if(s.mute) mute.classList.add('on')
-          const play = document.createElement('button'); play.className='playbtn'; play.textContent='Play'
-
-          row.appendChild(label); row.appendChild(note); row.appendChild(fretWrap.firstChild); row.appendChild(mute); row.appendChild(play)
-          els.strings.appendChild(row)
-
-          // handlers
-          const slider = row.children[2]
-          slider.oninput = e => { s.fret = +e.target.value|0; updateNotePill(row, s) ; save() }
-          mute.onclick = () => { s.mute = !s.mute; mute.classList.toggle('on', s.mute); mute.textContent = s.mute?'Muted':'Mute'; save() }
-          play.onclick = () => { triggerString(idx) }
-        })
-      }
-      function updateNotePill(row, s){
-        const capo = conf.capo|0
-        const m = s.midi + s.fret + capo
-        row.querySelector('.note-pill').textContent = midiName(m)
-      }
-
-      function triggerString(i, when = (ctx?ctx.currentTime:0)+0.001){
-        if (!ctx) initAudio()
-        const s = state.strings[i]; if (!s || s.mute) return
-        const f = freqFromMidi(s.midi + s.fret + (conf.capo|0))
-        if (conf.inst === 'Violin') bowed(f, when, conf.dur)
-        else pluck(f, when)
-      }
-
-      function strumDown(){ // low → high
-        if (!ctx) initAudio()
-        let t = ctx.currentTime + 0.02
-        const step = (+els.strum.value|0)/1000
-        state.strings.forEach((_,i)=>{ if(!state.strings[i].mute) triggerString(i, t); t+=step })
-      }
-      function strumUp(){ // high → low
-        if (!ctx) initAudio()
-        let t = ctx.currentTime + 0.02
-        const step = (+els.strum.value|0)/1000
-        for(let i=state.strings.length-1;i>=0;i--){ if(!state.strings[i].mute) triggerString(i, t); t+=step }
-      }
-
-      let arpTimer=null, arpIdx=0, arpDir=1
-      function toggleArp(){
-        if (arpTimer){ clearInterval(arpTimer); arpTimer=null; els.arp.textContent='Arp'; setStatus('Arp off'); return }
-        if (!ctx) initAudio()
-        arpIdx=0; arpDir=1; els.arp.textContent='Stop Arp'
-        arpTimer = setInterval(()=>{
-          const playable = state.strings.map((s,i)=>({s,i})).filter(x=>!x.s.mute)
-          if (playable.length===0) return
-          const order = playable.map(x=>x.i)
-          triggerString(order[arpIdx])
-          arpIdx += arpDir
-          if (arpIdx>=order.length){ arpIdx=order.length-2; arpDir=-1 }
-          if (arpIdx<0){ arpIdx=1; arpDir=1 }
-        }, +els.arpRate.value|0)
-        setStatus('Arpeggiator running')
-      }
-
-      // ---------- Chords ----------
-      function updateChordVisibility(){
-        const isStrings = conf.inst==='Guitar' || conf.inst==='Ukulele'
-        els.chord.disabled = !isStrings
-        if (!isStrings){ els.chord.value='—'; conf.chord='—'; save() }
-      }
-
-      function applyChord(name){
-        if (conf.inst==='Guitar'){
-          const shape = GuitarChords[name]; if (!shape) return
-          // shape low→high 6 chars; state.strings length may be 6; if different, bail
-          const chars = shape.split('')
-          for(let i=0;i<state.strings.length;i++){
-            const ch = chars[i] || 'x'
-            if (ch==='x'){ state.strings[i].mute = true }
-            else { state.strings[i].mute=false; state.strings[i].fret = +ch|0 }
-          }
-        } else if (conf.inst==='Ukulele'){
-          const shape = UkeChords[name]; if (!shape) return
-          const chars = shape.split('') // 4 chars, low→high (G C E A)
-          for(let i=0;i<state.strings.length;i++){
-            const ch = chars[i] || '0'
-            state.strings[i].mute=false; state.strings[i].fret = +ch|0
-          }
-        }
-        buildStringRows()
-        save()
-      }
-
-      // ---------- Wiring UI ----------
-      function syncUI(){
-        if (conf.theme==='light') document.body.classList.add('light'); else document.body.classList.remove('light')
-        els.inst.value = conf.inst
-        const family = Tunings[conf.inst]; els.tuning.innerHTML = Object.keys(family).map(k=>`<option ${conf.tuningKey.endsWith(k)?'selected':''}>${k}</option>`).join('')
-        els.capo.value = conf.capo; els.a4.value = conf.a4
-        els.atk.value = conf.atk; els.rel.value = conf.rel; els.color.value = conf.color; els.body.value = conf.body
-        els.vRate.value = conf.vRate; els.vDepth.value = conf.vDepth
-        els.strum.value = conf.strum; els.dur.value = conf.dur; els.arpRate.value = conf.arpRate
-        els.chord.value = conf.chord
-      }
-      syncUI()
-      applyTuning()
-
-      // controls
-      els.power.onclick = () => { initAudio(); els.power.textContent='Audio On' }
-      els.theme.onclick = () => { conf.theme = conf.theme==='dark'?'light':'dark'; save(); syncUI() }
-
-      els.inst.oninput = () => { conf.inst = els.inst.value; conf.tuningKey = conf.inst+':'+Object.keys(Tunings[conf.inst])[0]; conf.chord='—'; save(); syncUI(); applyTuning() }
-      els.tuning.oninput = () => { conf.tuningKey = conf.inst+':'+els.tuning.value; save(); applyTuning() }
-      els.capo.oninput = e => { conf.capo = +e.target.value|0; save(); buildStringRows() }
-      els.a4.oninput = e => { conf.a4 = +e.target.value; save() }
-
-      els.atk.oninput = e => { conf.atk = +e.target.value; save() }
-      els.rel.oninput = e => { conf.rel = +e.target.value; save() }
-      els.color.oninput = e => { conf.color = +e.target.value; if (lowpass) lowpass.frequency.value = conf.color; save() }
-      els.body.oninput = e => { conf.body = +e.target.value; save() }
-      els.vRate.oninput = e => { conf.vRate = +e.target.value; save() }
-      els.vDepth.oninput = e => { conf.vDepth = +e.target.value; save() }
-
-      els.strum.oninput = e => { conf.strum = +e.target.value|0; save() }
-      els.dur.oninput = e => { conf.dur = +e.target.value; save() }
-      els.arpRate.oninput = e => { conf.arpRate = +e.target.value|0; if (arpTimer){ toggleArp(); toggleArp() } save() }
-
-      els.strumDown.onclick = () => strumDown()
-      els.strumUp.onclick   = () => strumUp()
-      els.arp.onclick       = () => toggleArp()
-
-      els.chord.oninput = () => {
-        conf.chord = els.chord.value; save()
-        if (conf.chord==='—') return
-        applyChord(conf.chord)
-      }
-
-      // keyboard helpers: 1..strings pluck / [ and ] strum up/down
-      window.addEventListener('keydown', e=>{
-        if (!ctx) return
-        if (e.key==='['){ e.preventDefault(); strumDown() }
-        else if (e.key===']'){ e.preventDefault(); strumUp() }
-        else {
-          const n = +e.key
-          if (Number.isInteger(n) && n>=1 && n<=state.strings.length) {
-            triggerString(n-1)
-          }
-        }
-      })
-
-      setStatus('Ready')
-    })()
-  </script>
-</body>
-</html>
