Add help panel with keyboard shortcuts, URL deep linking, and speaker click docs

app.js

@@ -10,6 +10,8 @@ const spectrogramOverlay = document.getElementById("spectrogramOverlay");
 const transcriptPanel = document.getElementById("transcriptPanel");
 const configToggle = document.getElementById("configToggle");
 const configPanel = document.getElementById("configPanel");
+const helpToggle = document.getElementById("helpToggle");
+const helpPanel = document.getElementById("helpPanel");
 const opacityRange = document.getElementById("opacityRange");
 const rowsRange = document.getElementById("rowsRange");
 const sizeSelect = document.getElementById("sizeSelect");
@@ -908,13 +910,27 @@ async function init() {
   if (configToggle && configPanel) {
     configToggle.addEventListener("click", () => {
       configPanel.classList.toggle("open");
-    });
-    window.addEventListener("click", (event) => {
-      if (configPanel.contains(event.target) || configToggle.contains(event.target)) return;
-      configPanel.classList.remove("open");
+      helpPanel?.classList.remove("open");
     });
   }
 
+  if (helpToggle && helpPanel) {
+    helpToggle.addEventListener("click", () => {
+      helpPanel.classList.toggle("open");
+      configPanel?.classList.remove("open");
+    });
+  }
+
+  // Close panels when clicking outside
+  window.addEventListener("click", (event) => {
+    if (configPanel && !configPanel.contains(event.target) && !configToggle.contains(event.target)) {
+      configPanel.classList.remove("open");
+    }
+    if (helpPanel && !helpPanel.contains(event.target) && !helpToggle.contains(event.target)) {
+      helpPanel.classList.remove("open");
+    }
+  });
+
   if (opacityRange) {
     opacityRange.addEventListener("input", () => {
       state.transcriptOpacity = Number(opacityRange.value);

index.html

@@ -12,6 +12,19 @@
         <div class="brand-overlay">Amuta Space Talkers</div>
         <div class="speaker-overlay" id="activeSpeaker">-</div>
         <div class="menu-overlay">
+          <button class="menu-button" id="helpToggle" type="button" aria-label="Help">?</button>
+          <div class="menu-panel" id="helpPanel">
+            <div class="menu-title">Keys</div>
+            <div class="help-item"><kbd>Space</kbd> Play / Pause</div>
+            <div class="help-item"><kbd>←</kbd> <kbd>A</kbd> Back 10s</div>
+            <div class="help-item"><kbd>→</kbd> <kbd>D</kbd> Fwd 10s</div>
+            <div class="help-item"><kbd>Shift</kbd> + ←/→ 60s</div>
+            <div class="menu-title">URL</div>
+            <div class="help-item">?t=120 or #t=2:30</div>
+            <div class="help-item">Auto-updates on seek</div>
+            <div class="menu-title">Speakers</div>
+            <div class="help-item">Click bubble → next phrase</div>
+          </div>
           <button class="menu-button" id="configToggle" type="button" aria-label="Settings">...</button>
           <div class="menu-panel" id="configPanel">
             <div class="menu-title">Transcript</div>

styles.css

@@ -276,6 +276,21 @@ body {
   font-size: 0.75rem;
 }
 
+.help-item {
+  font-size: 0.75rem;
+  color: #c8ccd4;
+}
+
+.help-item kbd {
+  display: inline-block;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 1px 5px;
+  font-family: monospace;
+  font-size: 0.7rem;
+  margin-right: 2px;
+}
+
 .menu-footer a {
   color: var(--steel);
   text-decoration: none;