📖 grimoire front door — quick-start card + clickable contents

The grimoire got big, so give it a proper entrance:
- ⚡ Quick-start card up top: a 7-step "make it sing in a minute" on-ramp for the
  generative sequencer (scale → euclid → Play One → ratchet → p-lock → play).
- ☰ contents: a floating, jump-anywhere table of contents built from the 22 h2
  sections (delta-based scroll so it lands reliably in any layout). Sits beside
  the × close, drops a clean index panel, closes on pick or outside-click.
Verified: quick-start renders (7 steps), TOC lists all 22 sections and jumps
distinctly (Getting in→top, Playing it→far). Manual regenerated to match.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

GODSTRUMENT_MANUAL_SOURCE.md

@@ -18,6 +18,24 @@ _how to play the world_
 
 Godstrument is an instrument whose player is the living planet. Roughly forty real feeds — the solar wind streaming off the Sun, the price of bitcoin ticking sub-second on Binance, an earthquake off the coast of Japan, every edit to Wikipedia on Earth, the phase of the Moon, the churn of the U.S. national debt, a wildfire catching somewhere in the dark — arrive as raw numbers, are cleaned into control signals, and are fired at one central hub. There the hub smooths them, learns their ranges, and pours them through a **modulation matrix** — a patchbay where every feed can be wired to a sound. The world already moves; here it moves *something*. You don't play the notes. You decide what drives what. Imagine, but also know: the sound you hear is the sky doing exactly what the sky is doing, routed through choices you made.
 
+⚡ Quick-start — make it sing in a minute
+
+- Press `T` — the **tracks & grooves** panel opens.
+
+- Pick a **♪ scale** up top — or just switch **skins** (each cosmology is its own key).
+
+- On a note voice (*lead*/*bass*): hit **⬢ euclid** — pulses **11**, steps **16** — for a busy, even rhythm.
+
+- Click 2–3 notes in one column so they turn blue: **⬛ Play One** picks one at random each pass.
+
+- Open the **ratchet** lane and drag a couple of steps to **3–4** for instant rolls.
+
+- Switch to a texture voice (*filter*, *glitch*), gate a few steps, and **⬗ p-lock** them to blocky values.
+
+- Press **▶**. In-key, never-repeating, self-glitching — the planet playing your machine.
+
+Everything below is the full lore. Tap **☰ contents** (top-right) to jump anywhere.
+
 ---
 
 ## Getting in
@@ -981,3 +999,5 @@ Every feed the world sends is one of eight temperaments; the shape dictates how
 - **🌊 Juno-106 chorus** — an always-on subtle BBD-style stereo chorus on the synth's master bus (two short delays warbled by slow LFOs, panned wide) that warms and widens the dry oscillators.
 - **⬗ Parameter locks (p-locks)** — Pocket-Operator / Elektron style: a texture voice (filter, glitch, reverb, drive) gets a per-step `lock` lane that pins its value to a fixed level on that step (blocky, disjointed), overriding the world; drag a step below the lane to unlock it and hand that step back to the data. Applied in `computeDests` via `applyGroove`; travels with the patch.
 - **🌊 Juno-106 chorus** — an always-on subtle BBD-style stereo chorus on the synth's master bus (two short delays warbled by slow LFOs, panned wide) that warms and widens the dry oscillators.
+- **⬗ Parameter locks (p-locks)** — Pocket-Operator / Elektron style: a texture voice (filter, glitch, reverb, drive) gets a per-step `lock` lane that pins its value to a fixed level on that step (blocky, disjointed), overriding the world; drag a step below the lane to unlock it and hand that step back to the data. Applied in `computeDests` via `applyGroove`; travels with the patch.
+- **🌊 Juno-106 chorus** — an always-on subtle BBD-style stereo chorus on the synth's master bus (two short delays warbled by slow LFOs, panned wide) that warms and widens the dry oscillators.

viz/index.html

@@ -412,6 +412,24 @@
   #grimoire h2 { color: #9fd0ff; font-size: 17px; letter-spacing: 1px; margin: 34px 0 10px; font-weight: 700; }
   #grimoire p { line-height: 1.75; color: rgba(205,218,240,0.9); margin: 8px 0; font-size: 14px; }
   #grimoire .lead { color: rgba(220,230,248,0.95); font-size: 15px; }
+  /* quick-start card — the fast on-ramp */
+  #grimoire .quickstart { max-width: 720px; margin: 6px auto 34px; padding: 18px 22px; border-radius: 14px;
+    background: linear-gradient(135deg, rgba(90,120,220,0.13), rgba(150,110,230,0.1)); border: 1px solid rgba(140,170,255,0.32); }
+  #grimoire .quickstart .qshead { font-weight: 800; color: #d3e2ff; font-size: 16px; letter-spacing: 1px; margin-bottom: 10px; }
+  #grimoire .quickstart ol { margin: 0; padding-left: 22px; color: rgba(210,222,244,0.92); line-height: 1.7; font-size: 13.5px; }
+  #grimoire .quickstart li { margin: 5px 0; }
+  #grimoire .quickstart .qsfoot { margin-top: 12px; font-size: 12px; color: rgba(165,185,218,0.72); font-style: italic; }
+  /* table of contents — the grimoire got big */
+  #grimtocbtn { position: fixed; top: 18px; right: 62px; z-index: 61; cursor: pointer; font-size: 13px; color: #9fb4d8;
+    background: rgba(20,26,44,0.85); border: 1px solid rgba(120,150,220,0.35); border-radius: 9px; padding: 5px 11px; }
+  #grimtocbtn:hover { color: #fff; border-color: rgba(150,180,255,0.6); }
+  #grimtoc { position: fixed; top: 52px; right: 24px; z-index: 62; width: 290px; max-height: 74vh; overflow-y: auto;
+    background: rgba(16,20,36,0.97); border: 1px solid rgba(120,150,220,0.4); border-radius: 12px; padding: 8px;
+    display: none; box-shadow: 0 12px 40px rgba(0,0,0,0.5); }
+  #grimtoc.open { display: block; }
+  #grimtoc .grimtoc-head { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(150,175,220,0.7); padding: 4px 8px 8px; }
+  #grimtoc .grimtoc-item { padding: 6px 9px; border-radius: 7px; cursor: pointer; color: #c6d5ee; font-size: 13px; }
+  #grimtoc .grimtoc-item:hover { background: rgba(110,145,235,0.22); color: #fff; }
   #grimoire ul { list-style: none; padding: 0; margin: 8px 0; }
   #grimoire li { line-height: 1.7; margin: 7px 0; padding-left: 20px; position: relative; font-size: 14px;
     color: rgba(205,218,240,0.9); }
@@ -485,6 +503,20 @@
 
     <p class="lead">Godstrument is an instrument whose player is the living planet. Roughly forty real feeds — the solar wind streaming off the Sun, the price of bitcoin ticking sub-second on Binance, an earthquake off the coast of Japan, every edit to Wikipedia on Earth, the phase of the Moon, the churn of the U.S. national debt, a wildfire catching somewhere in the dark — arrive as raw numbers, are cleaned into control signals, and are fired at one central hub. There the hub smooths them, learns their ranges, and pours them through a <b>modulation matrix</b> — a patchbay where every feed can be wired to a sound. The world already moves; here it moves <i>something</i>. You don't play the notes. You decide what drives what. Imagine, but also know: the sound you hear is the sky doing exactly what the sky is doing, routed through choices you made.</p>
 
+    <div class="quickstart">
+      <div class="qshead">⚡ Quick-start — make it sing in a minute</div>
+      <ol>
+        <li>Press <kbd>T</kbd> — the <b>tracks &amp; grooves</b> panel opens.</li>
+        <li>Pick a <b>♪ scale</b> up top — or just switch <b>skins</b> (each cosmology is its own key).</li>
+        <li>On a note voice (<i>lead</i>/<i>bass</i>): hit <b>⬢ euclid</b> — pulses <b>11</b>, steps <b>16</b> — for a busy, even rhythm.</li>
+        <li>Click 2–3 notes in one column so they turn blue: <b>⬛ Play One</b> picks one at random each pass.</li>
+        <li>Open the <b>ratchet</b> lane and drag a couple of steps to <b>3–4</b> for instant rolls.</li>
+        <li>Switch to a texture voice (<i>filter</i>, <i>glitch</i>), gate a few steps, and <b>⬗ p-lock</b> them to blocky values.</li>
+        <li>Press <b>▶</b>. In-key, never-repeating, self-glitching — the planet playing your machine.</li>
+      </ol>
+      <div class="qsfoot">Everything below is the full lore. Tap <b>☰ contents</b> (top-right) to jump anywhere.</div>
+    </div>
+
 <div class="hr"></div>
 
 <h2>Getting in</h2>
@@ -7098,6 +7130,29 @@
       if (el) el.addEventListener("click", open);
     });
     window.addEventListener("keydown", (e) => { if (e.key === "Escape") close(); });
+
+    // ---- table of contents (the grimoire got big) — a jump-anywhere index ----
+    const heads = [...g.querySelectorAll("h2")];
+    heads.forEach((h, i) => { if (!h.id) h.id = "grim-" + i; h.style.scrollMarginTop = "24px"; });
+    const toc = document.createElement("nav"); toc.id = "grimtoc";
+    const th = document.createElement("div"); th.className = "grimtoc-head"; th.textContent = "contents";
+    toc.appendChild(th);
+    heads.forEach(h => {
+      const it = document.createElement("div"); it.className = "grimtoc-item";
+      it.textContent = h.textContent.replace(/\s+—.*$/, "");   // trim " — subtitle" for a tidy list
+      it.title = h.textContent;
+      it.addEventListener("click", () => {                     // delta-based jump (robust in any layout)
+        const target = g.scrollTop + h.getBoundingClientRect().top - g.getBoundingClientRect().top - 20;
+        g.scrollTop = Math.max(0, target);                     // instant teleport — always lands
+        toc.classList.remove("open");
+      });
+      toc.appendChild(it);
+    });
+    g.appendChild(toc);
+    const tb = document.createElement("div"); tb.id = "grimtocbtn"; tb.textContent = "☰ contents"; tb.title = "jump to a section";
+    tb.addEventListener("click", (e) => { e.stopPropagation(); toc.classList.toggle("open"); });
+    g.appendChild(tb);
+    g.addEventListener("click", (e) => { if (e.target !== tb && !toc.contains(e.target)) toc.classList.remove("open"); });
   })();
 
   // ---------------------------------------------------------------------------