<!--
  FLAMEBACK ▸ THE MRIDANGAM — an Aviary instrument. It speaks through MEMBRANE.

  The next big audio push after slice 3 ("finish the booth", CHIRP v58–v62):
  Carnatic percussion in the browser, shipped as a sibling tool in The Aviary,
  one self-contained file, exactly like trill.html — NOT a CHIRP mode. CHIRP
  stays the booth; this is the percussion studio. Named for the greater
  flameback — the Indian woodpecker, ornithology's literal drummer.

  The settled decisions, honored here:
  - MEMBRANE is an engine, not a UI — a factory (`MEMBRANE.create(ctx)`) that
    builds strokes on ANY BaseAudioContext, so the live instrument and the
    offline bounce run the identical signal path. Modal synthesis: each
    stroke is a small bank of sine modes with per-mode decays plus one
    band-passed noise transient. No samples, no dependencies.
  - NO AudioWorklet. The gumki (the bass head's pitch bend) is scheduled
    exponential frequency ramps on the modal oscillators — the roadmap's
    "maybe a small worklet" resolved as ramps-not-worklet, because the
    one-signal-path contract (and file:// operation) is worth more.
  - The treble head's modes sit on near-integer ratios ON PURPOSE — the
    black patch (karanai) is what makes a mridangam's overtones harmonic,
    and the self-test pins that physics to within 2%.
  - Closed strokes damp ringing ones on the same head (TA on a ringing DHIN
    is the instrument's grammar). The damping is stateful and depends on
    strikes being scheduled in chronological order — both the live path and
    the bounce loop honor that invariant.
  - Determinism is a contract: the noise transient comes from ONE seeded
    buffer (mulberry32, fixed seed, fixed offset — no Math.random anywhere
    near audio), so two renders of the same pattern agree to within float
    noise (~1e-6 — the compressor's kernel isn't bit-reproducible in Blink,
    but real randomness can't hide at −117 dB) and the self-test proves
    the live path IS the bounce path.
  - The grid thinks in TALAS, not just steps: Adi (4+2+2), Rupaka (2+4),
    Misra Chapu (3+2+2), Khanda Chapu (2+3), and a plain FREE count. Anga
    boundaries are drawn, sam is marked. No swing knob — the ×3 gati chip
    is the idiomatic move.
  - FLAMEBACK is deliberately DRY, like TRILL: the booth adds the space.
    Bounce an avartanam, drop the WAV in CHIRP's Beats, EQ it, loop it,
    scratch it. The flywheel is file hand-off; the seam-folded loop-perfect
    bounce is the hand.

  Built against The Field Guide:
    P1 (computers + forest): membrane physics under solkattu names.
    P3 (restore, don't extract): bounce renders offline; nothing is consumed.
    P5 (every theme is a world): the seven worlds, chrome tinted to accent.
    P6 (identity does work): the mark IS the hush control. (The mark itself
        is a PLACEHOLDER — two drumheads — until the real flameback is
        commissioned in docs/BRAND-SPEC.md; the MOLT precedent.)
    P7 (pressure-tested elegance): one file, no build step, ?selftest=1.
    P8 (joy is load-bearing): the field note knows what a gumki is for.

  v2 (2026-07-07): KA — the left hand's closed tap (damps the thoppi;
  tha-ka-dhi-mi runs on it); DHI MI — the ring-finger bounce as a timed
  composite (layers grew the [id, dt, velScale] grace-note form); the FILL
  helpers (arm a stroke, lay a lattice every 1/2/3/4 steps — ADD semantics,
  anchored on sam, full 32-wide so tala switches keep them); and the house
  favorite as a preset: THA KA DHI MI · KI TA THA KA.

  v3 (2026-07-07): the UX pass. Right-click any grid row → the row menu
  (every 1/2/4/8/16 · just sam · clear row — same layLattice/clearRow the
  FILL chips use, so semantics can't drift; chips stay as the touch path).
  A PITCH knob (±12 st riding the same cents math as the trim; strikes
  tune at strike time, so sweeps land from the next stroke; dbl/right-click
  sends it home). And the drum is DRAWN: barrel + lacing + hoops in
  theme-tinted SVG behind the two playable heads — bass wide-left, treble
  tight-right with its karanai patch — composites perched below. No image
  assets; everything derives from the theme tokens.

  Fonts are the one external dependency (Space Grotesk + Spectral), same as
  the siblings. Self-host for a true single-file build.
-->
<!DOCTYPE html>
<html lang="en" data-theme="ember">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FLAMEBACK ▸ THE MRIDANGAM</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Spectral:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
<style>
  /* ---- Palette: seven worlds. Chrome tints toward each accent. ---- */
  :root[data-theme="field"]{ --accent:#2b571e; --bg:#f6f5ef; --surface:#fbfbf6; --border:#d7dbc9; --text:#191c14; --muted:#5a6150; --ring:#e2e4d6; --on-accent:#f6f5ef; }
  :root[data-theme="tide"] { --accent:#1d4f8c; --bg:#f3f5f8; --surface:#fafbfd; --border:#ccd6e3; --text:#131a22; --muted:#556072; --ring:#dbe2ec; --on-accent:#f3f5f8; }
  :root[data-theme="volt"] { --accent:#ff5500; --bg:#0e0e0b; --surface:#17160f; --border:#2c2618; --text:#f2efe6; --muted:#8a8577; --ring:#221d12; --on-accent:#0e0e0b; }
  :root[data-theme="aura"] { --accent:#8855ff; --bg:#0b0b10; --surface:#141422; --border:#26213a; --text:#ecebf2; --muted:#7d7a92; --ring:#1c1830; --on-accent:#0b0b10; }
  :root[data-theme="bloom"]{ --accent:#e040ab; --bg:#0e0b10; --surface:#1b1221; --border:#35213c; --text:#f1e9f0; --muted:#8f7d90; --ring:#28182e; --on-accent:#0e0b10; }
  :root[data-theme="ember"]{ --accent:#ef3d3d; --bg:#100b0b; --surface:#1d1212; --border:#3b2020; --text:#f2e8e8; --muted:#907d7d; --ring:#2c1919; --on-accent:#100b0b; }
  :root[data-theme="spark"]{ --accent:#f4c430; --bg:#0e0d08; --surface:#1a1710; --border:#36301c; --text:#f1eee0; --muted:#8f8a76; --ring:#282314; --on-accent:#0e0d08; }

  *{ box-sizing:border-box; }
  html,body{ margin:0; height:100%; }
  body{
    background:var(--bg); color:var(--text);
    font-family:"Space Grotesk", system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
    display:flex; flex-direction:column; min-height:100%;
    transition:background .35s ease, color .35s ease;
  }
  .field-note{ font-family:"Spectral", Georgia, serif; font-style:italic; }

  /* ---- Top bar ---- */
  header{
    display:flex; align-items:center; gap:18px;
    padding:16px 22px; border-bottom:1px solid var(--border);
    flex-wrap:wrap;
  }
  .wordmark{ display:flex; align-items:baseline; gap:10px; }
  .wordmark b{ font-weight:700; letter-spacing:-.02em; font-size:19px; }
  .wordmark .sub{ font-size:11px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; }
  .wordmark .div{ color:var(--muted); font-weight:500; }

  /* The mark — PLACEHOLDER: the two heads of the drum, seen down the barrel.
     Doubles as HUSH (P6). The real flameback awaits its BRAND-SPEC entry. */
  .mark{
    width:34px; height:34px; border:1px solid var(--border); border-radius:50%;
    background:var(--surface); cursor:pointer; display:grid; place-items:center;
    padding:0; color:var(--text);
    transition:border-color .2s ease, transform .25s ease;
  }
  .mark:hover{ border-color:var(--accent); }
  .mark:active{ transform:scale(.94); }
  .mark svg{ width:20px; height:20px; display:block; }

  .spacer{ flex:1 1 auto; }
  .themes{ display:flex; gap:9px; align-items:center; }
  .dot{
    width:16px; height:16px; border-radius:50%; padding:0; cursor:pointer;
    border:2px solid transparent; background:var(--dotc); position:relative;
    transition:transform .15s ease;
  }
  .dot:hover{ transform:scale(1.18); }
  .dot[aria-current="true"]{ border-color:var(--text); }
  .dot[data-t="field"]{ --dotc:#2b571e; } .dot[data-t="tide"]{ --dotc:#1d4f8c; }
  .dot[data-t="volt"]{ --dotc:#ff5500; }  .dot[data-t="aura"]{ --dotc:#8855ff; }
  .dot[data-t="bloom"]{ --dotc:#e040ab; } .dot[data-t="ember"]{ --dotc:#ef3d3d; }
  .dot[data-t="spark"]{ --dotc:#f4c430; }

  /* ---- The console ---- */
  main.console{ width:min(1080px, 100%); margin:0 auto; padding:10px 22px 30px; flex:1; }
  .group{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:14px 0; border-bottom:1px solid var(--border);
  }
  .slabel{
    font-size:10px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--muted); min-width:52px;
  }
  .chips{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
  .chip{
    font-family:inherit; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
    padding:6px 11px; cursor:pointer; color:var(--muted); white-space:nowrap;
    background:transparent; border:1px solid var(--border); border-radius:20px;
    transition:color .18s ease, border-color .18s ease, background .18s ease;
  }
  .chip:hover{ color:var(--text); border-color:var(--accent); }
  .chip[aria-pressed="true"]{
    color:var(--on-accent); background:var(--accent); border-color:var(--accent);
  }
  .sdiv{ width:1px; height:22px; background:var(--border); }
  label.slider{ display:flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; }
  label.slider b{ font-size:11px; color:var(--text); min-width:38px; font-weight:500; letter-spacing:.04em; }
  input[type="range"]{ accent-color:var(--accent); width:110px; cursor:pointer; }

  .btn{
    font-family:inherit; font-size:11px; font-weight:500; letter-spacing:.16em;
    text-transform:uppercase; padding:9px 14px; cursor:pointer;
    background:var(--surface); color:var(--text);
    border:1px solid var(--border); border-radius:8px;
    transition:border-color .2s ease, color .2s ease;
  }
  .btn:hover{ border-color:var(--accent); }
  .btn:disabled{ opacity:.5; cursor:default; }
  .btn[aria-pressed="true"]{ color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
  .bhint{ font-size:12.5px; color:var(--muted); }
  .note{ margin:18px 2px 0; font-size:14.5px; color:var(--muted); min-height:22px; }
  .note b{ color:var(--text); font-weight:500; }

  /* ---- The tala grid — rows are strokes, columns are the count. Anga
     boundaries are drawn heavier; sam gets the accent. The tala is visible,
     not just counted. ---- */
  .gridwrap{ margin:20px 0 0; overflow-x:auto; }
  .tgrid{ display:grid; gap:3px; align-items:center; min-width:min-content; }
  .rowlabel{
    font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
    padding-right:10px; white-space:nowrap; text-align:right;
  }
  .rowlabel.bass{ color:color-mix(in srgb, var(--accent) 55%, var(--muted)); }
  .cell{
    width:24px; height:24px; border-radius:5px; padding:0; cursor:pointer;
    background:transparent; border:1px solid var(--border);
    transition:background .15s ease, border-color .15s ease;
  }
  .cell:hover{ border-color:var(--accent); }
  .cell.on{ background:var(--accent); border-color:var(--accent); }
  .cell.anga{ border-left:2px solid color-mix(in srgb, var(--muted) 65%, var(--border)); }
  .cell.sam{ border-left:2px solid var(--accent); }
  .cell.ph{ box-shadow:0 0 0 1px var(--text) inset; }
  .cell.on.ph{ box-shadow:0 0 10px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 0 1px var(--text) inset; }
  .beatnum{
    font-size:8.5px; color:var(--muted); text-align:center; padding-bottom:2px;
    letter-spacing:.05em;
  }
  .beatnum.sam{ color:var(--accent); font-weight:700; }

  /* ---- v3: the row menu — right-click a row, lay a lattice ---- */
  .ctxmenu{
    position:fixed; z-index:60; min-width:130px;
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    padding:6px; box-shadow:0 14px 40px rgba(0,0,0,.4);
    display:flex; flex-direction:column; gap:1px;
  }
  .ctxmenu[hidden]{ display:none; }
  .ctxmenu .ctxhead{
    font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
    padding:5px 10px 6px; border-bottom:1px solid var(--border); margin-bottom:3px;
  }
  .ctxmenu button{
    font-family:inherit; font-size:11.5px; text-align:left; letter-spacing:.05em;
    color:var(--text); background:none; border:none; border-radius:6px;
    padding:6px 10px; cursor:pointer;
  }
  .ctxmenu button:hover{ background:color-mix(in srgb, var(--accent) 14%, transparent); }
  .ctxmenu .ctxdiv{ height:1px; background:var(--border); margin:3px 6px; }

  /* ---- v3: the PITCH knob — a coarse sweep over the sruti ---- */
  .knob{ display:flex; align-items:center; gap:8px; cursor:grab; user-select:none; touch-action:none; }
  .knob:active{ cursor:grabbing; }
  .knob:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }
  .kface{
    width:34px; height:34px; border-radius:50%; position:relative; flex:none;
    background:var(--surface); border:1px solid var(--border); display:block;
    transition:border-color .2s ease;
  }
  .knob:hover .kface{ border-color:var(--accent); }
  .kdot{
    position:absolute; left:50%; top:50%; width:2px; height:12px; border-radius:1px;
    background:var(--accent);
    transform:translate(-50%,-100%) rotate(var(--ang, 0deg));
    transform-origin:50% 100%;
  }
  .klbl{ font-size:10px; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; }
  .kval{ font-size:11px; color:var(--text); min-width:48px; font-weight:500; letter-spacing:.04em; }

  /* ---- The heads — the instrument, seen from above the two skins.
     Bass on the left, treble on the right, as it sits for a right-handed
     player. Rim strokes live at the rim; the layout teaches the drum. ---- */
  /* v3 — the drum, DRAWN: one barrel, two heads, theme-tinted SVG (no image
     assets — the house rule). Bass sits wide on the left, treble tight on
     the right, as the instrument lies for a right-handed player. The heads
     stay the touch surfaces; the body, lacing, and hoops are scenery. */
  .drum{ position:relative; width:min(760px, 100%); aspect-ratio:760/300; margin:26px auto 6px; }
  .barrel{ position:absolute; inset:0; width:100%; height:100%; }
  .barrel .body{ fill:url(#barrelwood); stroke:var(--border); stroke-width:1.5; }
  .barrel .w1{ stop-color:color-mix(in srgb, var(--accent) 16%, var(--surface)); }
  .barrel .w2{ stop-color:color-mix(in srgb, var(--accent) 7%, var(--surface)); }
  .barrel .w3{ stop-color:color-mix(in srgb, var(--accent) 12%, var(--bg)); }
  .barrel .lace{ fill:none; stroke:color-mix(in srgb, var(--accent) 30%, var(--border)); stroke-width:1.2; opacity:.6; }
  .barrel .hoop{ fill:none; stroke:var(--border); stroke-width:2.5; opacity:.9; }
  .barrel .sheen{ fill:var(--text); opacity:.045; }
  .head{
    position:absolute; top:50%; transform:translateY(-50%); aspect-ratio:1/1;
    border:1px solid var(--border); border-radius:50%;
    background:radial-gradient(circle at 50% 42%,
      color-mix(in srgb, var(--text) 7%, var(--surface)) 0%,
      var(--surface) 55%,
      color-mix(in srgb, var(--accent) 9%, var(--bg)) 100%);
    transition:border-color .35s ease, background .35s ease;
  }
  #head-bass{ left:1.2%; width:37%; }
  #head-treble{ right:1.2%; width:31.5%; }
  /* the karanai — the black patch that makes the treble head sing harmonic */
  #head-treble::after{
    content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:46%; height:46%; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle,
      color-mix(in srgb, var(--border) 60%, var(--bg)) 0%,
      color-mix(in srgb, var(--border) 78%, var(--bg)) 72%,
      transparent 74%);
  }
  .head .hlabel{
    position:absolute; top:-18px; left:50%; transform:translateX(-50%);
    font-size:9px; letter-spacing:.22em; color:var(--muted); text-transform:uppercase;
    pointer-events:none; white-space:nowrap;
  }
  .dpad{
    position:absolute; transform:translate(-50%,-50%); z-index:1;
    width:26%; aspect-ratio:1/1; min-width:44px; border-radius:50%; cursor:pointer;
    background:color-mix(in srgb, var(--bg) 42%, transparent);
    border:1px solid var(--border); color:var(--text);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    font-family:inherit; touch-action:none; padding:0;
    transition:border-color .18s ease, background .18s ease;
  }
  .dpad:hover{ border-color:var(--accent); }
  .dpad .nm{ font-size:10.5px; font-weight:700; letter-spacing:.08em; }
  .dpad .kb{ font-size:8.5px; color:var(--muted); border:1px solid var(--border); border-radius:4px; padding:0 3px; }
  .dpad.hit{ /* the strike snaps — only the return eases */
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 26%, var(--surface));
    transition:none;
  }
  /* both hands — the composite strokes, perched under the drum */
  .composites{ display:flex; gap:10px; justify-content:center; margin:2px 0 6px; }
  .composites .dpad{ position:static; transform:none; z-index:auto; width:64px; min-width:0; aspect-ratio:auto; height:52px; border-radius:10px; background:color-mix(in srgb, var(--bg) 55%, var(--surface)); }

  footer{
    padding:14px 22px 20px; border-top:1px solid var(--border);
    font-size:11px; color:var(--muted); letter-spacing:.06em;
  }
  footer a{ color:var(--muted); }
  footer a:hover{ color:var(--accent); }

  /* ---- Self-test overlay (?selftest=1) ---- */
  .selftest{
    position:fixed; top:70px; right:18px; z-index:40; width:360px; max-height:70vh; overflow:auto;
    background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px;
    font-size:12px; box-shadow:0 12px 40px rgba(0,0,0,.35);
  }
  .selftest h3{ margin:0 0 8px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
  .selftest .r{ display:flex; gap:8px; padding:3px 0; align-items:baseline; }
  .selftest .r b{ flex:0 0 16px; font-weight:700; }
  .selftest .r.pass b{ color:#3fa34d; } .selftest .r.fail b{ color:#ef3d3d; }
  .selftest .r i{ color:var(--muted); font-style:normal; font-size:11px; }
</style>
</head>
<body>

<header>
  <button class="mark" id="hushbtn" title="Hush — the pattern stops, ringing heads settle.">
    <!-- Mark 5 — the drummer (docs/BRAND-SPEC.md): braced on the trunk, mid-drum -->
    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <line x1="8" y1="4" x2="8" y2="29" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
      <path d="M22 27 C26.5 22.5 27 14 21.5 10 C18 7.5 14 8.6 12.8 12.4"
        stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
      <line x1="12.8" y1="12.4" x2="8.6" y2="11.2" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
      <circle cx="17.6" cy="10.8" r="1.5" fill="currentColor"/>
      <path d="M5.5 8.5 L4 7" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
      <path d="M5 12.5 L3 12.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
    </svg>
  </button>
  <div class="wordmark">
    <b>FLAMEBACK</b><span class="div">▸</span>
    <span class="sub">The Mridangam · speaks through MEMBRANE</span>
  </div>
  <div class="spacer"></div>
  <div class="themes" role="group" aria-label="Theme">
    <button class="dot" data-t="field" title="FIELD — the prairie"></button>
    <button class="dot" data-t="tide"  title="TIDE — the water's edge"></button>
    <button class="dot" data-t="volt"  title="VOLT — the 2am session"></button>
    <button class="dot" data-t="aura"  title="AURA — the cosmic register"></button>
    <button class="dot" data-t="bloom" title="BLOOM — bioluminescent"></button>
    <button class="dot" data-t="ember" title="EMBER — heat without alarm" aria-current="true"></button>
    <button class="dot" data-t="spark" title="SPARK — the canary"></button>
  </div>
</header>

<main class="console">

  <section class="group" aria-label="Sruti">
    <span class="slabel">Sruti</span>
    <div class="chips" id="roots" title="The tonic the drum is tuned to — every stroke re-tunes with it."></div>
    <span class="sdiv"></span>
    <label class="slider" title="Fine trim, in cents — lean the whole drum sharp or flat to sit against a deck track. The root chips do the semitones.">
      Trim <input type="range" id="trim" min="-100" max="100" value="0"><b id="trimval">0¢</b>
    </label>
    <span class="sdiv"></span>
    <div class="knob" id="pitchknob" tabindex="0" role="slider" aria-label="Pitch, semitones"
         aria-valuemin="-12" aria-valuemax="12" aria-valuenow="0"
         title="PITCH — drag up or down: ±12 semitones over the sruti (the trim does cents). Lands from the next stroke. Double-click or right-click sends it home.">
      <span class="kface"><span class="kdot"></span></span>
      <span class="klbl">Pitch</span><b class="kval" id="pitchval">+0.0 st</b>
    </div>
    <label class="slider" title="Master level — a compressor downstream keeps it honest.">
      Level <input type="range" id="level" min="0" max="100" value="80">
    </label>
  </section>

  <section class="group" aria-label="Tala">
    <span class="slabel">Tala</span>
    <div class="chips" id="talas"></div>
    <span class="sdiv"></span>
    <div class="chips" id="gatis" title="Steps per beat — ×3 is the tisra move, three where four would go.">
      <button class="chip" data-v="2" aria-pressed="true">×2</button>
      <button class="chip" data-v="3" aria-pressed="false">×3</button>
      <button class="chip" data-v="4" aria-pressed="false">×4</button>
    </div>
    <span class="sdiv"></span>
    <label class="slider" title="Set it to match the deck you're bouncing for.">
      BPM <input type="range" id="bpm" min="40" max="220" value="90"><b id="bpmval">90</b>
    </label>
    <button class="btn" id="playbtn" aria-pressed="false" title="Run the pattern on the clock. (Space)">▶ Play</button>
  </section>

  <section class="group" aria-label="Pattern">
    <span class="slabel">Walks</span>
    <div class="chips" id="presets" title="Starter walks, not lessons — the grid is yours the moment you touch it."></div>
    <span class="sdiv"></span>
    <button class="chip" id="clearbtn" title="Empty every row.">Clear</button>
  </section>

  <!-- v2 — FILL: pattern helpers. Arm a stroke, lay it on a lattice; the
       lattice ADDS to the row (from sam) rather than replacing it. -->
  <section class="group" aria-label="Fill">
    <span class="slabel">Fill</span>
    <div class="chips" id="fillstrokes" title="Arm a stroke, then lay it on a lattice — it sounds once when armed, so you know who's landing."></div>
    <span class="sdiv"></span>
    <div class="chips" id="fillevery" title="ADDS the armed stroke to its row — lattices start on sam and stack over what's there.">
      <button class="chip" data-v="1">every step</button>
      <button class="chip" data-v="2">every 2</button>
      <button class="chip" data-v="3">every 3</button>
      <button class="chip" data-v="4">every 4</button>
    </div>
    <span class="sdiv"></span>
    <button class="chip" id="fillrowclear" title="Empty the armed stroke's row only.">clear row</button>
  </section>

  <div class="gridwrap"><div class="tgrid" id="tgrid" aria-label="The tala grid — rows are strokes, columns are the count"></div></div>

  <!-- v3 — the drum, drawn: barrel body + lacing + hoops in theme-tinted
       SVG behind the two playable heads; the treble wears its karanai.
       Composites (both-hands strokes) perch below the barrel. -->
  <div class="drum" id="drum" aria-label="The drum — tap a head to strike">
    <svg class="barrel" viewBox="0 0 760 300" preserveAspectRatio="none" aria-hidden="true">
      <defs>
        <linearGradient id="barrelwood" x1="0" y1="0" x2="0" y2="1">
          <stop class="w1" offset="0"/>
          <stop class="w2" offset=".5"/>
          <stop class="w3" offset="1"/>
        </linearGradient>
      </defs>
      <path class="body" d="M150 42 C300 6, 470 12, 612 58 L612 242 C470 288, 300 294, 150 258 Z"/>
      <!-- the lacing — the braids that carry the tension, one zigzag run -->
      <polyline class="lace" points="180,52 214,246 248,40 282,252 316,34 350,254 384,32 418,254 452,34 486,252 520,40 554,246 588,60"/>
      <!-- the hoops where the braids gather at each rim -->
      <path class="hoop" d="M172 48 C160 120 160 190 172 254"/>
      <path class="hoop" d="M594 62 C586 120 586 186 594 240"/>
      <!-- the sheen along the top of the barrel -->
      <ellipse class="sheen" cx="380" cy="72" rx="200" ry="22"/>
    </svg>
    <div class="head" id="head-bass">
      <span class="hlabel">Thoppi · bass</span>
    </div>
    <div class="head" id="head-treble">
      <span class="hlabel">Valanthalai · treble</span>
    </div>
  </div>
  <div class="composites" id="composites" aria-label="Both hands — the composite strokes"></div>

  <section class="group" aria-label="Bounce" style="border-bottom:none">
    <span class="slabel">Bounce</span>
    <div class="chips" id="cycles">
      <button class="chip" data-v="1" aria-pressed="false" title="One avartanam — one time around the tala.">1 avarta</button>
      <button class="chip" data-v="2" aria-pressed="true">2 avarta</button>
      <button class="chip" data-v="4" aria-pressed="false">4 avarta</button>
    </div>
    <button class="btn" id="bouncebtn" title="Renders offline on the same engine — tail folded into the head, so the loop has no seam.">⬇ Bounce WAV</button>
    <span class="bhint field-note">loop-perfect — feed it to CHIRP's Beats and PERCH finds the grid</span>
  </section>

  <p class="note field-note" id="note">Tap a head — the sruti holds the pitch, the tala holds the count.</p>

</main>

<footer>
  FLAMEBACK · an <a href="index.html">Aviary</a> instrument · one file, no accounts, no cloud — MEMBRANE inside
</footer>

<script>
'use strict';

/* ---------------------------------------------------------------------------
   Clock — the scheduler half of CHIRP's v36 Clock module, copied as the
   pattern (same as TRILL). A 25 ms tick books events 120 ms ahead with exact
   context timestamps — sample-accurate audio despite UI-thread jitter.
   setContext() exists so the self-test can drive it with a fake clock.
--------------------------------------------------------------------------- */
const Clock = (() => {
  const LOOKAHEAD = 0.12, TICK = 25;
  let tasks = [], timer = null, ctxFn = () => actx;
  function setContext(fn){ ctxFn = fn; }
  function tick(){
    const c = ctxFn(); if (!c) return;
    const now = c.currentTime;
    for (const t of tasks){
      if (t.nextTime == null) t.nextTime = now + 0.06;
      while (!t.cancelled && t.nextTime < now + LOOKAHEAD){
        try { t.cb(t.nextTime, t.beat); } catch (e) { t.cancelled = true; }
        t.beat++; t.nextTime += (60 / t.bpm) * t.division;
      }
    }
    tasks = tasks.filter(t => !t.cancelled);
    if (!tasks.length){ clearInterval(timer); timer = null; } // idle = zero cost
  }
  function addTask({ bpm = 120, division = 1, cb }){
    const t = { bpm, division, cb, nextTime: null, beat: 0, cancelled: false };
    tasks.push(t);
    if (!timer) timer = setInterval(tick, TICK);
    return () => { t.cancelled = true; };
  }
  return { addTask, setContext, LOOKAHEAD };
})();

/* ---------------------------------------------------------------------------
   MEMBRANE — the percussion engine. An engine, not a UI: a factory over any
   BaseAudioContext, so live playing and the offline bounce share one signal
   path. Modal synthesis: each stroke is a bank of sine modes (per-mode gain
   and decay) plus one band-passed noise transient from a SEEDED buffer.

   The stroke tables ARE the instrument:
   - Treble (valanthalai) modes sit on near-integer ratios — the black patch
     (karanai) makes a mridangam's overtones harmonic; that physics is pinned
     by the self-test.
   - Bass (thoppi) modes are lower and slightly inharmonic. GUMKI is the
     same membrane with an exponential frequency glide on every mode —
     ramps, not a worklet, so the engine stays context-pure.
   - Closed strokes (damps:true) silence what's still ringing on their head.
     STATEFUL: correctness depends on strikes being scheduled in
     chronological order. The live path is inherently ordered; the bounce
     loop iterates time-ordered. Keep it that way.
   - Determinism: mulberry32(seed) fills the one shared noise buffer; no
     Math.random touches audio. Two renders of one pattern agree to within
     float noise (the compressor kernel isn't bit-reproducible; anything
     louder than ~1e-4 would be a randomness leak) — the self-test proves it.
--------------------------------------------------------------------------- */
const MEMBRANE = (() => {
  const BASS_RATIO = 0.375; // thoppi sits at 3/8 of the treble head
  const NOISE_SEED = 0xF1A3BACC;

  function mulberry32(seed){
    return function(){
      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;
    };
  }
  // PITCH — equal temperament with a cents trim. The one frequency formula.
  const midiHz = (midi, cents = 0) => 440 * Math.pow(2, (midi - 69) / 12 + cents / 1200);

  // modes: [ratio × head base, initial gain, decay seconds]
  // noise: the strike transient — { f | fMul, q, dur, g }
  const STROKES = {
    nam:   { label:'NAM',   head:'treble',
             modes:[[1.0,.25,.5],[2.0,1.0,1.1],[3.01,.45,.7],[4.02,.20,.45],[5.05,.10,.30]],
             noise:{ fMul:4, q:1.0, dur:.008, g:.5 } },
    dhin:  { label:'DHIN',  head:'treble',
             modes:[[1.0,1.0,1.4],[2.0,.55,.9],[3.0,.22,.5],[4.0,.10,.3]],
             noise:{ fMul:2, q:1.0, dur:.006, g:.3 } },
    chapu: { label:'CHAPU', head:'treble', damps:true,
             modes:[[1.0,.30,.12],[2.0,.50,.10],[3.02,.60,.09],[4.07,.50,.08],[5.30,.35,.07]],
             noise:{ f:3000, q:.7, dur:.015, g:1.0 } },
    tha:   { label:'TA',    head:'treble', damps:true,
             modes:[[2.0,.40,.06],[3.0,.30,.05]],
             noise:{ f:1800, q:.9, dur:.010, g:.8 } },
    thom:  { label:'THOM',  head:'bass',
             modes:[[1.0,1.0,.6],[1.5,.35,.35],[2.2,.15,.2]],
             noise:{ fMul:2.5, q:.8, dur:.012, g:.4 } },
    gumup: { label:'GUM ↑', head:'bass',
             modes:[[1.0,1.0,.78],[1.5,.35,.35],[2.2,.15,.16]],
             noise:{ fMul:2.5, q:.8, dur:.012, g:.4 },
             glide:{ from:.85, to:1.30, t:.28 } },
    gumdn: { label:'GUM ↓', head:'bass',
             modes:[[1.0,1.0,.78],[1.5,.35,.35],[2.2,.15,.16]],
             noise:{ fMul:2.5, q:.8, dur:.012, g:.4 },
             glide:{ from:1.25, to:.80, t:.35 } },
    // v2 — KA: the left hand's closed tap on the thoppi, TA's answer across
    // the drum. Dry, short, and it damps its own head — tha-ka-dhi-mi needs it.
    ka:    { label:'KA',    head:'bass', damps:true,
             modes:[[1.0,.50,.09],[1.6,.30,.07]],
             noise:{ fMul:2, q:.9, dur:.008, g:.5 } },
    // composites are layers, not new DSP — strike() recurses. A layer is a
    // plain id (same instant) or [id, dt, velScale] for timed grace notes.
    dheem: { label:'DHEEM', layers:['dhin','thom'] },
    tham:  { label:'THAM',  layers:['nam','thom'] },
    // v2 — DHI MI: the ring-finger bounce, then the index lands — two hits,
    // one stroke, ~48 ms apart. (The user's remembered-by-feel stroke; if
    // the proper name surfaces, it's a one-line rename.)
    dhimi: { label:'DHI MI', layers:[['tha', 0, .7], ['nam', .048, 1]] },
  };

  function create(ctx, level = .8, sruti = { root: 2, cents: 0 }){
    let rootNow = sruti.root, centsNow = sruti.cents || 0;
    // Treble anchor: root at the 60+root octave (D → 293.66 Hz). ONE constant;
    // shift the 60 if the drum wants to sit lower against a deck.
    const fT = () => midiHz(60 + rootNow, centsNow);
    const fB = () => fT() * BASS_RATIO;

    const master = ctx.createGain();
    master.gain.value = level * level; // perceptual taper
    let levelNow = level * level;
    const comp = ctx.createDynamicsCompressor();
    comp.threshold.value = -14; comp.knee.value = 20; comp.ratio.value = 5;
    comp.attack.value = .004; comp.release.value = .18;
    // a gentle body — one peaking filter, not a convolver; delete if it muddies
    const body = ctx.createBiquadFilter();
    body.type = 'peaking'; body.frequency.value = fB() * 2;
    body.gain.value = 2.5; body.Q.value = 1.0;
    body.connect(master); master.connect(comp); comp.connect(ctx.destination);

    // the one seeded noise buffer — determinism is a contract (see header)
    const noiseBuf = (() => {
      const rnd = mulberry32(NOISE_SEED);
      const buf = ctx.createBuffer(1, ctx.sampleRate, ctx.sampleRate);
      const ch = buf.getChannelData(0);
      for (let i = 0; i < ch.length; i++) ch[i] = rnd() * 2 - 1;
      return buf;
    })();

    // ringing strokes register here; closed strokes kill their head's list
    const ringing = { treble: [], bass: [] };
    function damp(head, when){
      for (const r of ringing[head])
        if (r.until > when) r.gain.gain.setTargetAtTime(.0001, when, .015);
      ringing[head] = [];
    }

    function strike(id, when, vel = 1){
      const s = STROKES[id]; if (!s) return;
      if (s.layers){ // composite: plain ids land together (bass a shade
        // under); [id, dt, velScale] entries land dt seconds later — the
        // grace-note form (v2). dts ascend, so chronology holds.
        s.layers.forEach((l, i) => {
          if (Array.isArray(l)) strike(l[0], when + (l[1] || 0), vel * (l[2] == null ? 1 : l[2]));
          else strike(l, when, vel * (i > 0 ? .9 : 1));
        });
        return;
      }
      const base = s.head === 'treble' ? fT() : fB();
      if (s.damps) damp(s.head, when);
      const bus = ctx.createGain(); bus.gain.value = 1;
      bus.connect(body);
      let longest = 0, firstOsc = null;
      for (const [ratio, g, dec] of s.modes){
        const osc = ctx.createOscillator();
        osc.type = 'sine';
        const f = base * ratio;
        if (s.glide){ // gumki — every mode glides together, ratios preserved
          osc.frequency.setValueAtTime(Math.max(20, f * s.glide.from), when);
          osc.frequency.exponentialRampToValueAtTime(Math.max(20, f * s.glide.to), when + s.glide.t);
        } else {
          osc.frequency.value = f;
        }
        const mg = ctx.createGain();
        const peak = g * (0.4 + 0.6 * vel) * 0.5; // ×0.5 headroom over the mode sum
        mg.gain.setValueAtTime(peak, when);
        mg.gain.setTargetAtTime(.0001, when, dec / 6.9); // τ from T60; never ramp to 0
        osc.connect(mg); mg.connect(bus);
        osc.start(when); osc.stop(when + dec + .1);
        if (!firstOsc) firstOsc = osc;
        if (dec > longest) longest = dec;
      }
      const n = s.noise;
      if (n){
        const src = ctx.createBufferSource(); src.buffer = noiseBuf;
        const bp = ctx.createBiquadFilter(); bp.type = 'bandpass';
        bp.frequency.value = n.f || base * n.fMul; bp.Q.value = n.q;
        const ng = ctx.createGain();
        const npk = Math.max(.0002, n.g * vel * vel * 0.7);
        ng.gain.setValueAtTime(npk, when);
        ng.gain.exponentialRampToValueAtTime(.0001, when + n.dur);
        src.connect(bp); bp.connect(ng); ng.connect(bus);
        src.start(when, 0); src.stop(when + n.dur + .05); // fixed offset 0 — deterministic
      }
      if (!s.damps) ringing[s.head].push({ gain: bus, until: when + longest });
      if (firstOsc) firstOsc.onended = () => { try { bus.disconnect(); } catch (e) {} };
    }

    function setLevel(v){
      levelNow = v * v;
      master.gain.setTargetAtTime(levelNow, ctx.currentTime, .02);
    }
    function setSruti(root, cents){
      rootNow = root; centsNow = cents;
      body.frequency.setTargetAtTime(fB() * 2, ctx.currentTime, .05);
    }
    // Fast fade and recover — the hush. Ringing heads settle under it.
    function duck(){
      const now = ctx.currentTime, g = master.gain;
      g.cancelScheduledValues(now);
      g.setTargetAtTime(.0001, now, .03);
      g.setTargetAtTime(levelNow, now + .3, .05);
    }
    return { strike, setLevel, setSruti, duck };
  }

  return { STROKES, BASS_RATIO, midiHz, create };
})();

/* ---------------------------------------------------------------------------
   FLAMEBACK — the performance layer. The tala grid, the two heads, the walk.
--------------------------------------------------------------------------- */
const NAMES = ['C','C♯','D','D♯','E','F','F♯','G','G♯','A','A♯','B'];

// The talas — counts are the counts. Anga boundaries drive the grid's
// heavier borders; sam (beat 1) gets the accent column.
const TALAS = {
  adi:    { label:'ADI',          beats:8, angas:[4,2,2],
            tip:'Chatusra-jati triputa — a laghu of 4 and two drutams. The concert default.' },
  rupaka: { label:'RUPAKA',       beats:6, angas:[2,4],
            tip:'Drutam + chatusra laghu = 6. (The colloquial 3-count is rupaka chapu — a different bird.)' },
  misra:  { label:'MISRA CHAPU',  beats:7, angas:[3,2,2],
            tip:'3+2+2 — seven that never stumbles.' },
  khanda: { label:'KHANDA CHAPU', beats:5, angas:[2,3],
            tip:'2+3 — five with a lean.' },
  free:   { label:'FREE',         beats:4, angas:[4],
            tip:'Four plain beats — ×4 makes the 16-step machine.' },
};

// Grid rows: treble top, bass middle, composites last. kb = the strike key.
const ROWS = [
  { id:'tha',   kb:'j' },
  { id:'nam',   kb:'k' },
  { id:'dhin',  kb:'l' },
  { id:'chapu', kb:';' },
  { id:'thom',  kb:'a' },
  { id:'gumup', kb:'s' },
  { id:'gumdn', kb:'d' },
  { id:'ka',    kb:'f' },
  { id:'dheem', kb:'g' },
  { id:'tham',  kb:'h' },
  { id:'dhimi', kb:'n' },
];

// Starter walks — plausible sarva-laghu-shaped patterns, not transcriptions.
// The user plays this repertoire; these are perches to take off from.
const PRESETS = {
  sarva: { label:'SARVA', tala:'adi', spb:2, rows:{
    nam:  '1000000000000000',
    dhin: '0000100010001000',
    tha:  '0010001000100010',
    thom: '1000000010000000',
    gumup:'0000000000000010',
  }},
  chapuwalk: { label:'CHAPU WALK', tala:'misra', spb:2, rows:{
    thom: '10000000000000',
    dhin: '00001000100010',
    chapu:'00000010001000',
    tha:  '00100000000000',
  }},
  // v2 — the house favorite: THA KA DHI MI · KI TA THA KA, straight 8ths in
  // Adi, twice around. The mapping (tha→TA, ka/ki→KA, dhi→DHIN, mi→NAM) is
  // one school's hands — correct it by ear; it's your drill, not mine.
  thakadhimi: { label:'THA KA DHI MI', tala:'adi', spb:2,
    tip:'THA KA DHI MI · KI TA THA KA — the house favorite: mine, my brother\'s, our Guru\'s.',
    note:'<b>THA KA DHI MI · KI TA THA KA</b> — the house favorite. Mine, my brother\'s, our Guru\'s. Straight 8ths; DHIN sings, everything else answers dry.',
    rows:{
    tha:  '1000011010000110',
    ka:   '0100100101001001',
    dhin: '0010000000100000',
    nam:  '0001000000010000',
  }},
};

const state = {
  root: 2, cents: 0, pitch: 0, level: .8,  // sruti: D, on pitch; pitch = knob semitones
  tala: 'adi', spb: 2, bpm: 90, cycles: 2,
  grid: {}, playing: false,
};
// One number the engine hears: trim cents + the PITCH knob's semitones.
const srutiCents = () => state.cents + state.pitch * 100;
ROWS.forEach(r => { state.grid[r.id] = Array(32).fill(false); });
const stepsNow = () => TALAS[state.tala].beats * state.spb;

let actx = null, engine = null;
function ensureAudio(){
  if (!actx){
    actx = new (window.AudioContext || window.webkitAudioContext)();
    engine = MEMBRANE.create(actx, state.level, { root: state.root, cents: srutiCents() });
  }
  if (actx.state === 'suspended') actx.resume();
}

/* ---- the pattern task ---- */
let cancelTask = null, pendingViz = [];
function startPattern(){
  ensureAudio();
  if (cancelTask) cancelTask();
  cancelTask = Clock.addTask({ bpm: state.bpm, division: 1 / state.spb, cb: (t, i) => {
    const n = stepsNow(), s = i % n;
    for (const r of ROWS) if (state.grid[r.id][s]) engine.strike(r.id, t);
    pendingViz.push({ t, step: s });
    if (pendingViz.length > 64) pendingViz.splice(0, pendingViz.length - 64);
  }});
  state.playing = true; paintPlay(); vizRun();
}
function stopPattern(){
  if (cancelTask){ cancelTask(); cancelTask = null; }
  pendingViz.length = 0;
  state.playing = false; paintPlay(); clearPlayhead();
}
function togglePlay(){
  if (state.playing) stopPattern();
  else {
    if (!gridHasHits()){ setNote('An empty grid keeps perfect time, silently — <b>lay some strokes</b> first, or load a walk.'); return; }
    startPattern();
  }
}
function hush(){
  stopPattern();
  if (engine) engine.duck();
  setNote('Hushed. The heads settle.');
}
function gridHasHits(){
  const n = stepsNow();
  return ROWS.some(r => state.grid[r.id].slice(0, n).some(Boolean));
}
const playBtn = document.getElementById('playbtn');
function paintPlay(){
  playBtn.setAttribute('aria-pressed', String(state.playing));
  playBtn.textContent = state.playing ? '■ Stop' : '▶ Play';
}

/* ---- the grid ---- */
const gridEl = document.getElementById('tgrid');
function renderGrid(){
  const n = stepsNow(), tala = TALAS[state.tala];
  // anga starts, in step units (sam is step 0, drawn with the accent)
  const angaSteps = new Set();
  let acc = 0;
  for (const a of tala.angas){ angaSteps.add(acc * state.spb); acc += a; }
  gridEl.style.gridTemplateColumns = `auto repeat(${n}, 24px)`;
  gridEl.innerHTML = '';
  // beat-number header row
  gridEl.appendChild(document.createElement('span'));
  for (let s = 0; s < n; s++){
    const h = document.createElement('div');
    h.className = 'beatnum' + (s === 0 ? ' sam' : '');
    h.textContent = s % state.spb === 0 ? String(s / state.spb + 1) : '·';
    gridEl.appendChild(h);
  }
  for (const r of ROWS){
    const stroke = MEMBRANE.STROKES[r.id];
    const lab = document.createElement('button');
    lab.className = 'rowlabel' + (stroke.head === 'bass' || (stroke.layers && !stroke.head) ? ' bass' : '');
    lab.style.cssText = 'background:none;border:none;cursor:pointer;font-family:inherit;';
    lab.dataset.rowid = r.id; // v3 — the right-click row menu reads this
    lab.textContent = stroke.label;
    lab.title = 'Tap to hear ' + stroke.label + (r.kb ? ' · key ' + r.kb.toUpperCase() : '') + ' · right-click to lay a lattice';
    lab.addEventListener('pointerdown', () => { padStrike(r.id); });
    gridEl.appendChild(lab);
    for (let s = 0; s < n; s++){
      const c = document.createElement('button');
      c.type = 'button';
      c.className = 'cell' + (state.grid[r.id][s] ? ' on' : '')
        + (s === 0 ? ' sam' : angaSteps.has(s) ? ' anga' : '');
      c.dataset.row = r.id; c.dataset.step = s;
      c.title = stroke.label + ' · beat ' + (Math.floor(s / state.spb) + 1)
        + (s % state.spb ? ' +' + (s % state.spb) + '/' + state.spb : '') + (s === 0 ? ' — sam' : '');
      c.addEventListener('click', () => {
        state.grid[r.id][s] = !state.grid[r.id][s];
        c.classList.toggle('on', state.grid[r.id][s]);
        clearPresetChips(); // a hand-laid pattern belongs to no walk
      });
      gridEl.appendChild(c);
    }
  }
}
function clearPlayhead(){
  gridEl.querySelectorAll('.cell.ph').forEach(c => c.classList.remove('ph'));
}
let vizOn = false, lastPhStep = -1;
function vizRun(){ if (!vizOn){ vizOn = true; requestAnimationFrame(vizTick); } }
function vizTick(){
  if (!actx || (!cancelTask && !pendingViz.length)){ vizOn = false; return; }
  const now = actx.currentTime;
  let latest = null;
  while (pendingViz.length && pendingViz[0].t <= now + .03) latest = pendingViz.shift();
  if (latest && latest.step !== lastPhStep){
    clearPlayhead();
    gridEl.querySelectorAll(`.cell[data-step="${latest.step}"]`).forEach(c => c.classList.add('ph'));
    lastPhStep = latest.step;
  }
  requestAnimationFrame(vizTick);
}

/* ---- the heads (pads) ---- */
// positions are % of the head circle — rim strokes live at the rim
const PAD_POS = {
  thom:  { head:'head-bass',   x:50, y:52 },
  gumup: { head:'head-bass',   x:50, y:20 },
  gumdn: { head:'head-bass',   x:50, y:82 },
  ka:    { head:'head-bass',   x:19, y:52 },
  dhin:  { head:'head-treble', x:50, y:48 },
  nam:   { head:'head-treble', x:50, y:18 },
  chapu: { head:'head-treble', x:22, y:74 },
  tha:   { head:'head-treble', x:78, y:74 },
};
const PAD_TIPS = {
  thom:  'THOM — the open bass. The floor of the phrase.',
  gumup: 'GUMKI rising — heel pressure bends the bass up. The drum talks.',
  gumdn: 'GUMKI falling — the bend released. The other half of the sentence.',
  ka:    'KA — the left hand\'s closed tap; TA\'s answer across the drum. Tha-ka-dhi-mi runs on it.',
  dhin:  'DHIN — the open treble, fundamental-rich, longest ring.',
  nam:   'NAM — the rim stroke; the second harmonic carries it.',
  chapu: 'CHAPU — the slap. Damps whatever was ringing.',
  tha:   'TA — the closed tap. Dry, and it silences the head.',
  dheem: 'DHEEM — DHIN and THOM together; both heads speak.',
  tham:  'THAM — NAM over THOM; the rim against the floor.',
  dhimi: 'DHI MI — the ring-finger bounce, then the index lands. Two hits, one stroke.',
};
function padStrike(id){
  ensureAudio();
  engine.strike(id, actx.currentTime + .01);
  const el = document.querySelector(`.dpad[data-id="${id}"]`);
  if (el){
    el.classList.add('hit');
    clearTimeout(el._t); el._t = setTimeout(() => el.classList.remove('hit'), 130);
  }
}
function buildPad(id){
  const r = ROWS.find(x => x.id === id);
  const b = document.createElement('button');
  b.className = 'dpad'; b.type = 'button'; b.dataset.id = id;
  b.innerHTML = `<span class="nm">${MEMBRANE.STROKES[id].label}</span>` +
    (r && r.kb ? `<span class="kb">${r.kb.toUpperCase()}</span>` : '');
  b.title = PAD_TIPS[id] || id;
  b.addEventListener('pointerdown', e => { e.preventDefault(); padStrike(id); });
  return b;
}
(function renderHeads(){
  for (const [id, p] of Object.entries(PAD_POS)){
    const b = buildPad(id);
    b.style.left = p.x + '%'; b.style.top = p.y + '%';
    document.getElementById(p.head).appendChild(b);
  }
  const comp = document.getElementById('composites');
  ['dheem', 'tham', 'dhimi'].forEach(id => comp.appendChild(buildPad(id)));
})();

/* ---- controls ---- */
function chipGroup(id, apply){
  const el = document.getElementById(id);
  el.addEventListener('click', e => {
    const b = e.target.closest('.chip'); if (!b || !b.dataset.v) return;
    [...el.querySelectorAll('.chip')].forEach(c => c.setAttribute('aria-pressed', c === b ? 'true' : 'false'));
    apply(b.dataset.v);
  });
  return el;
}
const rootsEl = document.getElementById('roots');
NAMES.forEach((n, i) => {
  const b = document.createElement('button');
  b.className = 'chip'; b.dataset.v = i; b.textContent = n;
  b.setAttribute('aria-pressed', i === state.root ? 'true' : 'false');
  rootsEl.appendChild(b);
});
const talasEl = document.getElementById('talas');
Object.entries(TALAS).forEach(([id, t]) => {
  const b = document.createElement('button');
  b.className = 'chip'; b.dataset.v = id;
  b.textContent = t.label + ' · ' + t.beats;
  b.title = t.tip;
  b.setAttribute('aria-pressed', id === state.tala ? 'true' : 'false');
  talasEl.appendChild(b);
});
const presetsEl = document.getElementById('presets');
Object.entries(PRESETS).forEach(([id, p]) => {
  const b = document.createElement('button');
  b.className = 'chip'; b.dataset.v = id; b.textContent = p.label;
  b.title = p.tip || ('A starter walk in ' + TALAS[p.tala].label + ' — yours the moment you touch it.');
  b.setAttribute('aria-pressed', 'false');
  presetsEl.appendChild(b);
});
function clearPresetChips(){
  [...presetsEl.querySelectorAll('.chip')].forEach(c => c.setAttribute('aria-pressed', 'false'));
}

chipGroup('roots', v => {
  state.root = +v;
  applySruti();
  setNote(`Sruti — <b>${NAMES[state.root]}</b>. Every stroke re-tuned.`);
});
chipGroup('talas', v => {
  state.tala = v;
  renderGrid();
  if (cancelTask) startPattern(); // re-book on the new count
  setNote(TALAS[v].tip);
});
chipGroup('gatis', v => {
  state.spb = +v;
  renderGrid();
  if (cancelTask) startPattern();
  if (v === '3') setNote('Tisra — three where four would go. The grid leans forward.');
});
chipGroup('presets', v => {
  const p = PRESETS[v];
  state.tala = p.tala; state.spb = p.spb;
  [...talasEl.querySelectorAll('.chip')].forEach(c => c.setAttribute('aria-pressed', String(c.dataset.v === p.tala)));
  [...document.querySelectorAll('#gatis .chip')].forEach(c => c.setAttribute('aria-pressed', String(+c.dataset.v === p.spb)));
  ROWS.forEach(r => {
    const mask = p.rows[r.id] || '';
    state.grid[r.id] = Array(32).fill(false).map((_, i) => mask[i] === '1');
  });
  renderGrid();
  if (cancelTask) startPattern();
  setNote(p.note || `<b>${p.label}</b> — a walk in ${TALAS[p.tala].label}, not a lesson. Edit anything.`);
});
chipGroup('cycles', v => { state.cycles = +v; });

document.getElementById('clearbtn').addEventListener('click', () => {
  ROWS.forEach(r => state.grid[r.id].fill(false));
  clearPresetChips(); renderGrid();
  setNote('Cleared. The count continues; the drum waits.');
});

/* ---- FILL — pattern helpers (v2; shared with the v3 right-click menu) ----
   Lattices fill the whole 32-wide row (i % n === 0, anchored on sam), so a
   tala or gati switch keeps them. ADD semantics: they stack over what's
   there; CLEAR ROW is the way back. The every-N chips are momentary
   actions, not toggles — only the armed stroke holds a pressed state. */
function layLattice(rowId, n){
  for (let i = 0; i < 32; i++) if (i % n === 0) state.grid[rowId][i] = true;
  clearPresetChips(); renderGrid();
  setNote(`<b>${MEMBRANE.STROKES[rowId].label}</b> laid ${n === 1 ? 'on every step' : 'every ' + n + ' steps'}, from sam — stacked over what was there. CLEAR ROW takes it back.`);
}
function clearRow(rowId){
  state.grid[rowId].fill(false);
  clearPresetChips(); renderGrid();
  setNote(`<b>${MEMBRANE.STROKES[rowId].label}</b> — row cleared.`);
}
let fillStroke = null;
const fillStrokesEl = document.getElementById('fillstrokes');
function armFill(rowId, silent){
  fillStroke = rowId;
  [...fillStrokesEl.querySelectorAll('.chip')].forEach(c => c.setAttribute('aria-pressed', String(c.dataset.v === rowId)));
  if (!silent) padStrike(rowId); // hear who you armed
}
ROWS.forEach(r => {
  const b = document.createElement('button');
  b.className = 'chip'; b.dataset.v = r.id;
  b.textContent = MEMBRANE.STROKES[r.id].label;
  b.setAttribute('aria-pressed', 'false');
  fillStrokesEl.appendChild(b);
});
fillStrokesEl.addEventListener('click', e => {
  const b = e.target.closest('.chip'); if (!b) return;
  armFill(b.dataset.v);
});
document.getElementById('fillevery').addEventListener('click', e => {
  const b = e.target.closest('.chip'); if (!b || !b.dataset.v) return;
  if (!fillStroke){ setNote('Arm a stroke first — the lattice needs to know who lands.'); return; }
  layLattice(fillStroke, +b.dataset.v);
});
document.getElementById('fillrowclear').addEventListener('click', () => {
  if (!fillStroke){ setNote('Arm a stroke first — clear row empties one bird\'s line, not the sky.'); return; }
  clearRow(fillStroke);
});

/* ---- the row menu (v3) — right-click any row, lay a lattice there ----
   The fast path over the FILL chips (which stay: they're the touch path).
   Same layLattice/clearRow underneath, so the semantics can't drift. */
const ctxEl = document.createElement('div');
ctxEl.className = 'ctxmenu'; ctxEl.hidden = true;
document.body.appendChild(ctxEl);
function closeCtx(){ ctxEl.hidden = true; }
window.addEventListener('pointerdown', e => { if (!ctxEl.contains(e.target)) closeCtx(); });
window.addEventListener('scroll', closeCtx, { passive: true });
window.addEventListener('keydown', e => { if (e.key === 'Escape') closeCtx(); });
function openRowMenu(rowId, x, y){
  const label = MEMBRANE.STROKES[rowId].label;
  const items = [
    ['every step', () => layLattice(rowId, 1)],
    ['every 2',    () => layLattice(rowId, 2)],
    ['every 4',    () => layLattice(rowId, 4)],
    ['every 8',    () => layLattice(rowId, 8)],
    ['every 16',   () => layLattice(rowId, 16)],
    ['just sam',   () => layLattice(rowId, 32)],
    null,
    ['clear row',  () => clearRow(rowId)],
  ];
  ctxEl.innerHTML = `<div class="ctxhead">${label}</div>`;
  for (const it of items){
    if (!it){ const d = document.createElement('div'); d.className = 'ctxdiv'; ctxEl.appendChild(d); continue; }
    const b = document.createElement('button');
    b.type = 'button'; b.textContent = it[0];
    b.addEventListener('click', () => { closeCtx(); armFill(rowId, true); it[1](); });
    ctxEl.appendChild(b);
  }
  ctxEl.hidden = false;
  // keep it on-screen
  const pad = 8, r = ctxEl.getBoundingClientRect();
  ctxEl.style.left = Math.min(x, window.innerWidth - r.width - pad) + 'px';
  ctxEl.style.top = Math.min(y, window.innerHeight - r.height - pad) + 'px';
}
document.getElementById('tgrid').addEventListener('contextmenu', e => {
  const t = e.target.closest('.cell, .rowlabel');
  if (!t) return;
  const rowId = t.dataset ? (t.dataset.row || (t.classList.contains('rowlabel') ? t.dataset.rowid : null)) : null;
  if (!rowId) return;
  e.preventDefault();
  openRowMenu(rowId, e.clientX, e.clientY);
});
document.getElementById('trim').addEventListener('input', e => {
  state.cents = +e.target.value;
  document.getElementById('trimval').textContent = (state.cents > 0 ? '+' : '') + state.cents + '¢';
  applySruti();
});

/* ---- PITCH (v3) — the knob's coarse sweep over the sruti ----
   ±12 semitones riding the same cents math as the trim (the engine hears
   one number: srutiCents()). Modal oscillators tune at strike time, so a
   sweep lands from the NEXT stroke — honest, and the engine stays
   one-path. Double-click or right-click sends it home (the house rule). */
function applySruti(){
  if (engine) engine.setSruti(state.root, srutiCents());
}
const pitchKnob = document.getElementById('pitchknob');
const pitchValEl = document.getElementById('pitchval');
function renderPitch(){
  pitchKnob.style.setProperty('--ang', (state.pitch / 12 * 135) + 'deg');
  pitchKnob.setAttribute('aria-valuenow', String(state.pitch));
  pitchValEl.textContent = (state.pitch > 0 ? '+' : '') + state.pitch.toFixed(1) + ' st';
}
(function initPitchKnob(){
  let dragging = false, startY = 0, startV = 0;
  pitchKnob.addEventListener('pointerdown', e => {
    dragging = true; startY = e.clientY; startV = state.pitch;
    pitchKnob.setPointerCapture(e.pointerId);
    e.preventDefault();
  });
  pitchKnob.addEventListener('pointermove', e => {
    if (!dragging) return;
    const v = Math.max(-12, Math.min(12, startV + (startY - e.clientY) * 0.08));
    state.pitch = Math.round(v * 10) / 10;
    renderPitch(); applySruti();
  });
  pitchKnob.addEventListener('pointerup', () => { dragging = false; });
  pitchKnob.addEventListener('pointercancel', () => { dragging = false; });
  const home = () => { state.pitch = 0; renderPitch(); applySruti(); };
  pitchKnob.addEventListener('dblclick', home);
  pitchKnob.addEventListener('contextmenu', e => { e.preventDefault(); home(); });
  renderPitch();
})();
document.getElementById('level').addEventListener('input', e => {
  state.level = e.target.value / 100;
  if (engine) engine.setLevel(state.level);
});
document.getElementById('bpm').addEventListener('input', e => {
  state.bpm = +e.target.value;
  document.getElementById('bpmval').textContent = e.target.value;
  if (cancelTask) startPattern();
});
playBtn.addEventListener('click', togglePlay);
document.getElementById('hushbtn').addEventListener('click', hush);

/* ---- keyboard: left hand = bass, right hand = treble ---- */
window.addEventListener('keydown', e => {
  if (e.repeat || /input|select|textarea/i.test(e.target.tagName)) return;
  const k = e.key.toLowerCase();
  if (k === ' '){ togglePlay(); e.preventDefault(); return; }
  if (k === 'escape'){ hush(); return; }
  const row = ROWS.find(r => r.kb === k);
  if (row){ padStrike(row.id); e.preventDefault(); }
});

/* ---- field note ---- */
const noteEl = document.getElementById('note');
function setNote(html){ noteEl.innerHTML = html; }

/* ---------------------------------------------------------------------------
   BOUNCE — the flywheel move. Offline render on a fresh MEMBRANE (same
   tables, same seed), exactly beats×cycles long, with the ring tail folded
   back into the head so the loop has no seam. The WAV lands in downloads;
   CHIRP's Beats library is the next stop; PERCH finds the grid.
--------------------------------------------------------------------------- */
function foldTail(rendered, loopN, anyCtx){
  const out = anyCtx.createBuffer(2, loopN, rendered.sampleRate);
  for (let ch = 0; ch < rendered.numberOfChannels && ch < 2; ch++){
    const src = rendered.getChannelData(ch), dst = out.getChannelData(ch);
    dst.set(src.subarray(0, loopN));
    const tail = Math.min(src.length - loopN, loopN);
    for (let i = 0; i < tail; i++) dst[i] += src[loopN + i];
  }
  // fold can sum peaks — trim only if it actually clipped
  let peak = 0;
  for (let ch = 0; ch < 2; ch++){
    const d = out.getChannelData(ch);
    for (let i = 0; i < d.length; i++){ const a = Math.abs(d[i]); if (a > peak) peak = a; }
  }
  if (peak > .98){
    const k = .98 / peak;
    for (let ch = 0; ch < 2; ch++){
      const d = out.getChannelData(ch);
      for (let i = 0; i < d.length; i++) d[i] *= k;
    }
  }
  return out;
}

// Schedule one pattern render onto any engine — time-ordered, which the
// damping contract requires. Shared by the bounce and the self-test.
function scheduleGrid(eng, grid, tala, spb, bpm, cycles){
  const n = TALAS[tala].beats * spb, stepSec = 60 / bpm / spb;
  for (let i = 0; i < n * cycles; i++){
    const s = i % n;
    for (const r of ROWS) if (grid[r.id][s]) eng.strike(r.id, i * stepSec);
  }
}

const bounceBtn = document.getElementById('bouncebtn');
bounceBtn.addEventListener('click', async () => {
  if (!gridHasHits()){
    setNote('Nothing to bounce — <b>lay some strokes</b> first, or load a walk.');
    return;
  }
  const sr = 44100, TAIL = 3;
  const loopSec = TALAS[state.tala].beats * state.cycles * 60 / state.bpm;
  const loopN = Math.round(loopSec * sr);
  bounceBtn.disabled = true; bounceBtn.textContent = 'BOUNCING…';
  try {
    const octx = new OfflineAudioContext(2, loopN + Math.ceil(TAIL * sr), sr);
    const eng = MEMBRANE.create(octx, state.level, { root: state.root, cents: srutiCents() });
    scheduleGrid(eng, state.grid, state.tala, state.spb, state.bpm, state.cycles);
    const rendered = await octx.startRendering();
    const wav = encodeWAV(foldTail(rendered, loopN, octx));
    const totalC = Math.round(srutiCents());
    const trim = totalC ? (totalC > 0 ? '+' : '') + totalC + 'c' : '';
    const fname = `FLAMEBACK ${TALAS[state.tala].label} ${NAMES[state.root].replace(/♯/g, '#')}${trim} ${state.bpm}bpm x${state.cycles}.wav`;
    const url = URL.createObjectURL(wav);
    const a = document.createElement('a');
    a.href = url; a.download = fname;
    document.body.appendChild(a); a.click(); a.remove();
    setTimeout(() => URL.revokeObjectURL(url), 4000);
    setNote(`Bounced <b>${state.cycles} avartanam${state.cycles > 1 ? 's' : ''} of ${TALAS[state.tala].label} at ${state.bpm} BPM</b> — seam folded, loop-perfect. CHIRP's Beats is the next stop.`);
  } catch (err) {
    console.warn('Bounce failed:', err);
    setNote('The bounce failed — check the console. The live instrument is unaffected.');
  }
  bounceBtn.disabled = false; bounceBtn.textContent = '⬇ Bounce WAV';
});

// Hand-rolled 16-bit PCM WAV encoder — CHIRP's, verbatim. No library needed.
function encodeWAV(audioBuffer){
  const numCh = audioBuffer.numberOfChannels;
  const sampleRate = audioBuffer.sampleRate;
  const numFrames = audioBuffer.length;
  const interleaved = new Float32Array(numFrames * numCh);
  for (let ch = 0; ch < numCh; ch++){
    const data = audioBuffer.getChannelData(ch);
    for (let i = 0; i < numFrames; i++) interleaved[i * numCh + ch] = data[i];
  }
  const pcm16 = new Int16Array(interleaved.length);
  for (let i = 0; i < interleaved.length; i++){
    const s = Math.max(-1, Math.min(1, interleaved[i]));
    pcm16[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;
  }
  const byteRate = sampleRate * numCh * 2;
  const blockAlign = numCh * 2;
  const dataSize = pcm16.length * 2;
  const buffer = new ArrayBuffer(44 + dataSize);
  const view = new DataView(buffer);
  const writeStr = (offset, str) => { for (let i = 0; i < str.length; i++) view.setUint8(offset + i, str.charCodeAt(i)); };
  writeStr(0, 'RIFF');
  view.setUint32(4, 36 + dataSize, true);
  writeStr(8, 'WAVE');
  writeStr(12, 'fmt ');
  view.setUint32(16, 16, true);
  view.setUint16(20, 1, true);
  view.setUint16(22, numCh, true);
  view.setUint32(24, sampleRate, true);
  view.setUint32(28, byteRate, true);
  view.setUint16(32, blockAlign, true);
  view.setUint16(34, 16, true);
  writeStr(36, 'data');
  view.setUint32(40, dataSize, true);
  let offset = 44;
  for (let i = 0; i < pcm16.length; i++, offset += 2) view.setInt16(offset, pcm16[i], true);
  return new Blob([view], { type: 'audio/wav' });
}

/* ---- themes ---- */
document.querySelectorAll('.dot').forEach(d => d.addEventListener('click', () => {
  document.documentElement.dataset.theme = d.dataset.t;
  document.querySelectorAll('.dot').forEach(x => x.setAttribute('aria-current', x === d ? 'true' : 'false'));
}));

/* ---------------------------------------------------------------------------
   Self-test (?selftest=1) — headless engine contract checks, the house
   practice since CHIRP v24. The tables, the physics, the scheduler (against
   a fake clock), and the offline bounce are all gesture-free.
--------------------------------------------------------------------------- */
async function selftest(){
  const R = [];
  const ok = (name, pass, info = '') => R.push({ name, pass: !!pass, info });
  const S = MEMBRANE.STROKES;
  const zoneRMS = (data, sr, t0, t1) => {
    let s = 0, n = 0;
    for (let i = Math.floor(t0 * sr); i < Math.min(data.length, Math.floor(t1 * sr)); i++){ s += data[i] * data[i]; n++; }
    return n ? Math.sqrt(s / n) : 0;
  };
  const crossings = (data, sr, t0, t1) => {
    let c = 0;
    for (let i = Math.max(1, Math.floor(t0 * sr)); i < Math.min(data.length, Math.floor(t1 * sr)); i++)
      if ((data[i - 1] < 0) !== (data[i] < 0)) c++;
    return c;
  };
  const renderStrokes = async (list, secs) => { // [[id, when], ...] → mono data
    const sr = 44100;
    const octx = new OfflineAudioContext(1, Math.ceil(secs * sr), sr);
    const eng = MEMBRANE.create(octx, .8, { root: 2, cents: 0 });
    for (const [id, when] of list) eng.strike(id, when);
    return (await octx.startRendering()).getChannelData(0);
  };

  // 1 — stroke tables well-formed (layers may be ids or [id, dt, velScale])
  let bad = 0;
  for (const [id, s] of Object.entries(S)){
    if (s.layers){
      if (!s.layers.every(l => {
        const lid = Array.isArray(l) ? l[0] : l;
        const dt = Array.isArray(l) ? (l[1] || 0) : 0;
        return S[lid] && !S[lid].layers && dt >= 0;
      })) bad++;
      continue;
    }
    if (!s.modes || s.modes.length < 2) bad++;
    if (!s.modes.every(([r, g, d]) => r > 0 && g > 0 && d > 0)) bad++;
    if (!s.modes.every(([r], i) => i === 0 || r > s.modes[i - 1][0])) bad++;
  }
  ok('strokes · tables well-formed, composites resolve', bad === 0, Object.keys(S).length + ' strokes');

  // 2 — the black patch holds: NAM/DHIN ratios within 2% of integers
  const harmonic = ['nam', 'dhin'].every(id =>
    S[id].modes.every(([r]) => Math.abs(r - Math.round(r)) / Math.round(r) < .02));
  ok('treble · the black patch holds (NAM/DHIN ratios ≈ integers)', harmonic);

  // 3 — talas: the counts are the counts
  ok('talas · every anga sum equals its beat count',
    Object.values(TALAS).every(t => t.angas.reduce((a, b) => a + b, 0) === t.beats) &&
    TALAS.adi.beats === 8 && TALAS.rupaka.beats === 6 &&
    TALAS.misra.beats === 7 && TALAS.khanda.beats === 5);

  // 4 — presets: masks fit their tala, something lands on sam
  ok('walks · masks fit their tala; a stroke lands on sam',
    Object.values(PRESETS).every(p => {
      const n = TALAS[p.tala].beats * p.spb;
      return Object.values(p.rows).every(m => new RegExp(`^[01]{${n}}$`).test(m)) &&
             Object.values(p.rows).some(m => m[0] === '1');
    }));

  // 4b — FILL (v3): lattices anchor on sam, stack over hand-lays, clear clean
  {
    const saved = state.grid.tha.slice();
    state.grid.tha.fill(false);
    state.grid.tha[3] = true;          // a hand-laid hit the lattice must keep
    layLattice('tha', 4);
    const l = state.grid.tha;
    const latticeOk = l[0] && l[4] && l[28] && l[3] && !l[1] && !l[2];
    clearRow('tha');
    const cleared = state.grid.tha.every(v => !v);
    state.grid.tha = saved; renderGrid();
    ok('fill · lattices anchor on sam, stack over hand-lays, clear clean', latticeOk && cleared);
  }

  // 5 — the pitch math: A440 exact, ±100¢ = a semitone, octaves double;
  //     and the thoppi sits at exactly 3/8 of the treble head
  ok('sruti · A440 exact; ±100¢ = a semitone; bass at 3/8',
    MEMBRANE.midiHz(69) === 440 &&
    Math.abs(MEMBRANE.midiHz(69, 100) - MEMBRANE.midiHz(70)) < 1e-9 &&
    Math.abs(MEMBRANE.midiHz(57) - 220) < 1e-9 &&
    MEMBRANE.BASS_RATIO === 0.375);

  // 6 — the gumki bend is real: zero-crossing rate rises across the glide
  try {
    const d6 = await renderStrokes([['gumup', 0]], .6);
    const early = crossings(d6, 44100, .05, .15);
    const late = crossings(d6, 44100, .20, .30);
    const glidesOk = ['gumup', 'gumdn'].every(id => S[id].glide.from > 0 && S[id].glide.to > 0);
    ok('gumki · the bend is real (crossing rate rises), constants > 0',
      glidesOk && early > 0 && late / early > 1.15, `${early} → ${late} crossings`);
  } catch (err) { ok('gumki · offline render', false, String(err)); }

  // 7 — TA damps a ringing DHIN (the instrument's grammar)
  try {
    const free = await renderStrokes([['dhin', 0]], .6);
    const damped = await renderStrokes([['dhin', 0], ['tha', .3]], .6);
    const a = zoneRMS(free, 44100, .35, .5), b = zoneRMS(damped, 44100, .35, .5);
    ok('damp · TA silences the ringing head', a > 0 && b < a * .5,
      `ring ${a.toExponential(1)} vs damped ${b.toExponential(1)}`);
  } catch (err) { ok('damp · offline render', false, String(err)); }

  // 7b — KA (v2): the left hand's closed tap — dry itself, and it damps
  // the thoppi the way TA damps the treble
  try {
    const bfree = await renderStrokes([['thom', 0]], .6);
    const bdamp = await renderStrokes([['thom', 0], ['ka', .25]], .6);
    const ba = zoneRMS(bfree, 44100, .3, .45), bb = zoneRMS(bdamp, 44100, .3, .45);
    ok('ka · the left hand answers: closed, and it damps the thoppi',
      S.ka.damps === true && S.ka.head === 'bass' && ba > 0 && bb < ba * .5,
      `ring ${ba.toExponential(1)} vs damped ${bb.toExponential(1)}`);
  } catch (err) { ok('ka · offline render', false, String(err)); }

  // 7c — DHI MI (v2): the bounce lands twice — the index's ring is still
  // there long after a lone ring-finger tap has died
  try {
    const lone = await renderStrokes([['tha', 0]], .35);
    const flam = await renderStrokes([['dhimi', 0]], .35);
    const lt = zoneRMS(lone, 44100, .08, .2), ft = zoneRMS(flam, 44100, .08, .2);
    ok('dhimi · the bounce lands twice (ring after the tap)',
      S.dhimi.layers.length === 2 && ft > lt * 4,
      `tail ${ft.toExponential(1)} vs lone tap ${lt.toExponential(1)}`);
  } catch (err) { ok('dhimi · offline render', false, String(err)); }

  // 8 — the scheduler keeps time (fake clock, 600 BPM → 0.1 s beats).
  // Window is 1.3 s on purpose: a background-throttled tab ticks at 1 Hz,
  // and even then the burst it books must be exactly spaced.
  await new Promise(res => {
    const t0 = performance.now();
    Clock.setContext(() => ({ currentTime: (performance.now() - t0) / 1000 }));
    const fired = [];
    const cancel = Clock.addTask({ bpm: 600, division: 1, cb: (t, b) => fired.push([t, b]) });
    setTimeout(() => {
      cancel();
      Clock.setContext(() => actx);
      const spaced = fired.length >= 3 &&
        fired.every((e, i, a) => i === 0 || Math.abs(e[0] - a[i - 1][0] - .1) < 1e-6);
      const counted = fired.every((e, i) => e[1] === i);
      ok('clock · lookahead books beats exactly 0.1 s apart', spaced && counted, `${fired.length} events`);
      res();
    }, 1300);
  });

  // 9 — the bounce is loop-perfect AND deterministic: two renders of the
  // same walk agree within float noise (the seeded-noise / one-path
  // contract — the compressor kernel isn't bit-reproducible, but a real
  // randomness leak would differ at ~0.1, five orders louder than the gate)
  try {
    const sr = 44100, bpm = 120, cycles = 2, p = PRESETS.sarva;
    const grid = {};
    ROWS.forEach(r => { grid[r.id] = Array(32).fill(false).map((_, i) => (p.rows[r.id] || '')[i] === '1'); });
    const loopSec = TALAS[p.tala].beats * cycles * 60 / bpm;
    const loopN = Math.round(loopSec * sr);
    const renderOnce = async () => {
      const octx = new OfflineAudioContext(2, loopN + sr, sr);
      const eng = MEMBRANE.create(octx, .8, { root: 2, cents: 0 });
      scheduleGrid(eng, grid, p.tala, p.spb, bpm, cycles);
      return foldTail(await octx.startRendering(), loopN, octx);
    };
    const b1 = await renderOnce(), b2 = await renderOnce();
    const c1 = b1.getChannelData(0), c2 = b2.getChannelData(0);
    let peak = 0, finite = true, maxDiff = 0;
    for (let i = 0; i < c1.length; i += 89){
      if (!isFinite(c1[i])) finite = false;
      const a = Math.abs(c1[i]); if (a > peak) peak = a;
    }
    for (let i = 0; i < 10000; i++){
      const d = Math.abs(c1[i] - c2[i]); if (d > maxDiff) maxDiff = d;
    }
    ok('bounce · exact length, audible, finite, deterministic',
      b1.length === loopN && peak > .004 && finite && maxDiff < 1e-4,
      `len ${b1.length}, peak ${peak.toFixed(3)}, render Δ ${maxDiff.toExponential(1)}`);

    // 10 — WAV header math
    const octx = new OfflineAudioContext(1, 10, sr);
    const tb = octx.createBuffer(2, 100, sr);
    tb.getChannelData(0).fill(.5);
    const blob = encodeWAV(tb);
    const head = new Uint8Array(await blob.slice(0, 12).arrayBuffer());
    const str = (a, b) => String.fromCharCode(...head.slice(a, b));
    ok('wav · RIFF/WAVE header + 16-bit size math',
      blob.size === 44 + 100 * 2 * 2 && str(0, 4) === 'RIFF' && str(8, 12) === 'WAVE',
      `${blob.size} bytes`);
  } catch (err) {
    ok('bounce · offline render', false, String(err));
  }

  // report
  const passed = R.filter(r => r.pass).length;
  const el = document.createElement('div');
  el.className = 'selftest';
  el.innerHTML = `<h3>FLAMEBACK self-test — ${passed}/${R.length}</h3>` +
    R.map(r => `<div class="r ${r.pass ? 'pass' : 'fail'}"><b>${r.pass ? '✓' : '✗'}</b><span>${r.name}${r.info ? ` <i>· ${r.info}</i>` : ''}</span></div>`).join('');
  document.body.appendChild(el);
  console.log(`FLAMEBACK selftest: ${passed}/${R.length}`, R);
  window.__selftest = { passed, total: R.length, results: R };
}
if (new URLSearchParams(location.search).get('selftest') === '1'){
  window.addEventListener('load', selftest);
}

/* ---- first paint ---- */
renderGrid();
paintPlay();
</script>
</body>
</html>