build(deps): bump picomatch in /site

.gitignore

@@ -0,0 +1,2 @@
+# Afterwords TTS voice override
+.afterwords

.superpowers/brainstorm/96727-1774433017/.server-stopped

@@ -0,0 +1 @@
+{"reason":"idle timeout","timestamp":1774435960703}

.superpowers/brainstorm/96727-1774433017/.server.log

@@ -0,0 +1,16 @@
+{"type":"server-started","port":64359,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:64359","screen_dir":"/Users/adrian/repos/failure-first/.superpowers/brainstorm/96727-1774433017"}
+{"type":"screen-added","file":"/Users/adrian/repos/failure-first/.superpowers/brainstorm/96727-1774433017/team-layout.html"}
+{"source":"user-event","type":"click","text":"C\n    \n      Snap-Scroll Sections (Full Viewport Each)\n      Each agent gets a full-viewport section that snaps into place. Like a presentation deck. Scroll down = next agent snaps in. Audio auto-plays when snapped. Neural vis fills the background, color changes per agent. Dramatic.\n      \n        Pros: Most immersive, each agent feels like a \"moment\", perfect audio sync\n        Cons: Snap-scroll can feel jarring, accessibility concerns, harder on mobile","choice":"c","id":null,"timestamp":1774433431919}
+{"source":"user-event","type":"click","text":"C\n    \n      Snap-Scroll Sections (Full Viewport Each)\n      Each agent gets a full-viewport section that snaps into place. Like a presentation deck. Scroll down = next agent snaps in. Audio auto-plays when snapped. Neural vis fills the background, color changes per agent. Dramatic.\n      \n        Pros: Most immersive, each agent feels like a \"moment\", perfect audio sync\n        Cons: Snap-scroll can feel jarring, accessibility concerns, harder on mobile","choice":"c","id":null,"timestamp":1774433436268}
+{"source":"user-event","type":"click","text":"C\n    \n      Snap-Scroll Sections (Full Viewport Each)\n      Each agent gets a full-viewport section that snaps into place. Like a presentation deck. Scroll down = next agent snaps in. Audio auto-plays when snapped. Neural vis fills the background, color changes per agent. Dramatic.\n      \n        Pros: Most immersive, each agent feels like a \"moment\", perfect audio sync\n        Cons: Snap-scroll can feel jarring, accessibility concerns, harder on mobile","choice":"c","id":null,"timestamp":1774433436418}
+{"source":"user-event","type":"click","text":"C\n    \n      Snap-Scroll Sections (Full Viewport Each)\n      Each agent gets a full-viewport section that snaps into place. Like a presentation deck. Scroll down = next agent snaps in. Audio auto-plays when snapped. Neural vis fills the background, color changes per agent. Dramatic.\n      \n        Pros: Most immersive, each agent feels like a \"moment\", perfect audio sync\n        Cons: Snap-scroll can feel jarring, accessibility concerns, harder on mobile","choice":"c","id":null,"timestamp":1774433439036}
+{"type":"screen-added","file":"/Users/adrian/repos/failure-first/.superpowers/brainstorm/96727-1774433017/card-layout.html"}
+{"source":"user-event","type":"click","text":"C\n        \n          Clara Oswald\n          Principal Research Analyst\n          \n            I synthesise findings across the full corpus and identify what the data actually supports versus what we have plausible-sounding evidence for...\n          \n          \n            Format-lock paradox\n            Corpus synthesis\n          \n        \n      \n    \n    \n      A: Photo Left, Text Right\n      Like the current Adrian profile. Familiar layout, easy to scan. Large circular photo anchors the left side.","choice":"left-photo","id":null,"timestamp":1774433656921}
+{"source":"user-event","type":"click","text":"R\n        Rose Tyler\n        Head of Adversarial Operations\n        \n          I test the things that aren't supposed to break — until they do. I design the attack campaigns...\n        \n      \n    \n    \n      B: Centered Stack\n      Photo top-center, name/role below, bio text centered. More dramatic, works well with the full-viewport snap. Presentation feel.","choice":"centered","id":null,"timestamp":1774433657587}
+{"source":"user-event","type":"click","text":"C\n        \n          Clara Oswald\n          Principal Research Analyst\n          \n            I synthesise findings across the full corpus and identify what the data actually supports versus what we have plausible-sounding evidence for...\n          \n          \n            Format-lock paradox\n            Corpus synthesis\n          \n        \n      \n    \n    \n      A: Photo Left, Text Right\n      Like the current Adrian profile. Familiar layout, easy to scan. Large circular photo anchors the left side.","choice":"left-photo","id":null,"timestamp":1774433658804}
+{"type":"screen-added","file":"/Users/adrian/repos/failure-first/.superpowers/brainstorm/96727-1774433017/card-layout-v2.html"}
+{"source":"user-event","type":"click","text":"~\n    \n      Close but needs adjustment\n      Tell me what to change in the terminal","choice":"adjust","id":null,"timestamp":1774433736102}
+{"type":"screen-added","file":"/Users/adrian/repos/failure-first/.superpowers/brainstorm/96727-1774433017/card-layout-v3.html"}
+{"source":"user-event","type":"click","text":"✓\n    \n      This layout works\n      Photo top, centered column, trimmed bio, contribution tags","choice":"yes","id":null,"timestamp":1774433972988}
+{"type":"screen-added","file":"/Users/adrian/repos/failure-first/.superpowers/brainstorm/96727-1774433017/waiting.html"}
+{"type":"server-stopped","reason":"idle timeout"}

.superpowers/brainstorm/96727-1774433017/.server.pid

@@ -0,0 +1 @@
+96748

.superpowers/brainstorm/96727-1774433017/card-layout-v2.html

@@ -0,0 +1,69 @@
+<h2>Refined: Photo-Left, Centered in Viewport</h2>
+<p class="subtitle">A's layout (photo left, text right) but vertically and horizontally centered like B. Max-width container so it doesn't stretch edge-to-edge on wide screens.</p>
+
+<div class="mockup">
+  <div class="mockup-header">Preview: Clara Oswald (full viewport snap-section)</div>
+  <div class="mockup-body" style="min-height:480px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(162,155,254,0.06) 0%, transparent 60%);">
+
+    <!-- The centered container -->
+    <div style="display:flex; gap:2.5rem; align-items:center; max-width:800px; padding:2rem;">
+
+      <!-- Photo column -->
+      <div style="display:flex; flex-direction:column; align-items:center; gap:0.75rem; flex-shrink:0;">
+        <div style="width:200px; height:200px; border-radius:50%; background:linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%); display:flex; align-items:center; justify-content:center; color:white; font-size:3rem; border:2px solid rgba(162,155,254,0.5); box-shadow: 0 0 0 4px rgba(162,155,254,0.1), 0 0 40px rgba(162,155,254,0.2);">C</div>
+        <span style="font-size:0.65rem; font-family:monospace; letter-spacing:0.08em; text-transform:uppercase; color:#a29bfe; background:rgba(162,155,254,0.08); border:1px solid rgba(162,155,254,0.25); border-radius:2px; padding:0.2rem 0.6rem;">Principal Research Analyst</span>
+      </div>
+
+      <!-- Text column -->
+      <div style="flex:1;">
+        <div style="font-size:1.75rem; font-weight:500; color:var(--fg); letter-spacing:-0.02em; margin-bottom:0.25rem;">Clara Oswald</div>
+        <div style="font-size:0.8rem; color:var(--fg-muted); font-family:monospace; margin-bottom:1.25rem;">"The impossible girl. The one who runs into the danger."</div>
+
+        <div style="font-size:0.93rem; line-height:1.8; color:var(--fg-dim); margin-bottom:1rem;">
+          I synthesise findings across the full corpus and identify what the data actually supports versus what we have plausible-sounding evidence for. In adversarial AI safety research, those two categories collapse faster than people admit.
+        </div>
+        <div style="font-size:0.93rem; line-height:1.8; color:var(--fg-dim); margin-bottom:1.25rem;">
+          My job is to keep them separate — and to turn what survives scrutiny into publications that hold up under peer review.
+        </div>
+
+        <!-- Contribution tags -->
+        <div style="display:flex; flex-wrap:wrap; gap:6px;">
+          <span style="font-size:0.7rem; padding:3px 8px; background:rgba(162,155,254,0.08); border:1px solid rgba(162,155,254,0.25); border-radius:2px; color:#a29bfe; font-family:monospace;">Format-lock paradox</span>
+          <span style="font-size:0.7rem; padding:3px 8px; background:rgba(162,155,254,0.08); border:1px solid rgba(162,155,254,0.25); border-radius:2px; color:#a29bfe; font-family:monospace;">Three-tier ASR</span>
+          <span style="font-size:0.7rem; padding:3px 8px; background:rgba(162,155,254,0.08); border:1px solid rgba(162,155,254,0.25); border-radius:2px; color:#a29bfe; font-family:monospace;">Silent Failure synthesis</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Audio indicator (bottom right) -->
+    <div style="position:absolute; bottom:16px; right:20px; font-size:0.7rem; font-family:monospace; color:rgba(162,155,254,0.5);">
+      ▶ Audio playing...
+    </div>
+
+    <!-- Scroll hint (bottom center) -->
+    <div style="position:absolute; bottom:16px; left:50%; transform:translateX(-50%); font-size:0.7rem; font-family:monospace; color:var(--fg-muted); opacity:0.5;">
+      ↓ scroll for next
+    </div>
+  </div>
+</div>
+
+<p style="margin-top:1.5rem; font-size:0.85rem; color:var(--fg-muted);">
+  Behind this card: the neural canvas animation filling the entire viewport, pulsing in Clara's lavender (#a29bfe). As you scroll to the next agent, the color cross-fades to their accent. The card content sits centered over the animation with a subtle semi-transparent backdrop.
+</p>
+
+<div class="options" style="margin-top:1rem;">
+  <div class="option" data-choice="yes" onclick="toggleSelect(this)">
+    <div class="letter">✓</div>
+    <div class="content">
+      <h3>This feels right</h3>
+      <p>Proceed with this layout</p>
+    </div>
+  </div>
+  <div class="option" data-choice="adjust" onclick="toggleSelect(this)">
+    <div class="letter">~</div>
+    <div class="content">
+      <h3>Close but needs adjustment</h3>
+      <p>Tell me what to change in the terminal</p>
+    </div>
+  </div>
+</div>

.superpowers/brainstorm/96727-1774433017/card-layout-v3.html

@@ -0,0 +1,70 @@
+<h2>Refined: Photo Top, Text Below, Centered</h2>
+<p class="subtitle">Large photo centered above, name/role/bio flows below. Content contained within a centered column. Bio trimmed to ~3-4 sentences max per agent.</p>
+
+<div class="mockup">
+  <div class="mockup-header">Preview: Clara Oswald (full viewport snap-section)</div>
+  <div class="mockup-body" style="min-height:540px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(162,155,254,0.06) 0%, transparent 60%); position:relative;">
+
+    <!-- Centered column -->
+    <div style="display:flex; flex-direction:column; align-items:center; max-width:640px; padding:1.5rem; text-align:center;">
+
+      <!-- Photo -->
+      <div style="width:180px; height:180px; border-radius:50%; background:linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%); display:flex; align-items:center; justify-content:center; color:white; font-size:3rem; border:2px solid rgba(162,155,254,0.5); box-shadow: 0 0 0 4px rgba(162,155,254,0.1), 0 0 40px rgba(162,155,254,0.2); margin-bottom:1.25rem;">C</div>
+
+      <!-- Name + role -->
+      <div style="font-size:1.75rem; font-weight:500; color:var(--fg); letter-spacing:-0.02em;">Clara Oswald</div>
+      <span style="font-size:0.65rem; font-family:monospace; letter-spacing:0.08em; text-transform:uppercase; color:#a29bfe; background:rgba(162,155,254,0.08); border:1px solid rgba(162,155,254,0.25); border-radius:2px; padding:0.2rem 0.6rem; margin-top:0.5rem;">Principal Research Analyst</span>
+
+      <!-- Tagline -->
+      <div style="font-size:0.85rem; color:var(--fg-muted); font-family:monospace; margin-top:1rem; font-style:italic;">"The impossible girl. The one who runs into the danger."</div>
+
+      <!-- Bio — trimmed to 3-4 sentences -->
+      <div style="font-size:0.93rem; line-height:1.8; color:var(--fg-dim); margin-top:1.25rem; text-align:left;">
+        I synthesise findings across the full corpus and identify what the data actually supports versus what we have plausible-sounding evidence for. My job is to keep them separate — and to turn what survives scrutiny into publications that hold up under peer review. Mapped the entire research corpus so connections between 294 reports don't get lost.
+      </div>
+
+      <!-- Contribution tags -->
+      <div style="display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:1.25rem;">
+        <span style="font-size:0.7rem; padding:3px 8px; background:rgba(162,155,254,0.08); border:1px solid rgba(162,155,254,0.25); border-radius:2px; color:#a29bfe; font-family:monospace;">Format-lock paradox</span>
+        <span style="font-size:0.7rem; padding:3px 8px; background:rgba(162,155,254,0.08); border:1px solid rgba(162,155,254,0.25); border-radius:2px; color:#a29bfe; font-family:monospace;">Three-tier ASR</span>
+        <span style="font-size:0.7rem; padding:3px 8px; background:rgba(162,155,254,0.08); border:1px solid rgba(162,155,254,0.25); border-radius:2px; color:#a29bfe; font-family:monospace;">Silent Failure synthesis</span>
+        <span style="font-size:0.7rem; padding:3px 8px; background:rgba(162,155,254,0.08); border:1px solid rgba(162,155,254,0.25); border-radius:2px; color:#a29bfe; font-family:monospace;">Capability-floor model</span>
+      </div>
+    </div>
+
+    <!-- Audio indicator -->
+    <div style="position:absolute; bottom:16px; right:20px; font-size:0.7rem; font-family:monospace; color:rgba(162,155,254,0.5);">▶ clara_oswald_intro.ogg</div>
+
+    <!-- Scroll hint -->
+    <div style="position:absolute; bottom:16px; left:50%; transform:translateX(-50%); font-size:0.7rem; font-family:monospace; color:var(--fg-muted); opacity:0.4;">↓ Donna Noble</div>
+  </div>
+</div>
+
+<div style="margin-top:2rem;">
+  <h3 style="margin-bottom:0.75rem;">Bio Length Guidance</h3>
+  <p class="subtitle">Each agent currently has ~150 words (voice script length). For the snap-scroll page I'd trim to ~60-80 words (3-4 sentences) to keep each section clean and readable at a glance. The voice intro covers the full version.</p>
+</div>
+
+<div class="options" style="margin-top:1rem;">
+  <div class="option" data-choice="yes" onclick="toggleSelect(this)">
+    <div class="letter">✓</div>
+    <div class="content">
+      <h3>This layout works</h3>
+      <p>Photo top, centered column, trimmed bio, contribution tags</p>
+    </div>
+  </div>
+  <div class="option" data-choice="wider" onclick="toggleSelect(this)">
+    <div class="letter">W</div>
+    <div class="content">
+      <h3>Wider — stretch the text column</h3>
+      <p>Max-width 640px feels narrow, try 800px</p>
+    </div>
+  </div>
+  <div class="option" data-choice="adjust" onclick="toggleSelect(this)">
+    <div class="letter">~</div>
+    <div class="content">
+      <h3>Needs other changes</h3>
+      <p>Tell me in terminal</p>
+    </div>
+  </div>
+</div>

.superpowers/brainstorm/96727-1774433017/card-layout.html

@@ -0,0 +1,72 @@
+<h2>Agent Card Layout: How should each snap-section look?</h2>
+<p class="subtitle">Each agent gets a full viewport. The neural vis animates behind in their accent color. How should their content be arranged?</p>
+
+<div class="cards">
+  <div class="card" data-choice="left-photo" onclick="toggleSelect(this)" style="min-height:340px;">
+    <div class="card-image" style="padding:20px;">
+      <!-- Mockup: photo left, text right -->
+      <div style="display:flex; gap:24px; align-items:flex-start; height:260px;">
+        <div style="min-width:180px; height:180px; border-radius:50%; background:linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%); display:flex; align-items:center; justify-content:center; color:white; font-size:2.5rem; flex-shrink:0;">C</div>
+        <div style="flex:1;">
+          <div style="font-size:1.4rem; font-weight:600; margin-bottom:4px; color:var(--fg);">Clara Oswald</div>
+          <div style="font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:#a29bfe; margin-bottom:16px; font-family:monospace;">Principal Research Analyst</div>
+          <div style="font-size:0.85rem; line-height:1.7; color:var(--fg-dim);">
+            I synthesise findings across the full corpus and identify what the data actually supports versus what we have plausible-sounding evidence for...
+          </div>
+          <div style="margin-top:16px; display:flex; gap:8px;">
+            <span style="font-size:0.7rem; padding:3px 8px; background:rgba(162,155,254,0.1); border:1px solid rgba(162,155,254,0.3); border-radius:2px; color:#a29bfe; font-family:monospace;">Format-lock paradox</span>
+            <span style="font-size:0.7rem; padding:3px 8px; background:rgba(162,155,254,0.1); border:1px solid rgba(162,155,254,0.3); border-radius:2px; color:#a29bfe; font-family:monospace;">Corpus synthesis</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body">
+      <h3>A: Photo Left, Text Right</h3>
+      <p>Like the current Adrian profile. Familiar layout, easy to scan. Large circular photo anchors the left side.</p>
+    </div>
+  </div>
+
+  <div class="card" data-choice="centered" onclick="toggleSelect(this)" style="min-height:340px;">
+    <div class="card-image" style="padding:20px;">
+      <!-- Mockup: centered stack -->
+      <div style="display:flex; flex-direction:column; align-items:center; text-align:center; height:260px;">
+        <div style="width:160px; height:160px; border-radius:50%; background:linear-gradient(135deg, #ff6348 0%, #ff4757 100%); display:flex; align-items:center; justify-content:center; color:white; font-size:2.5rem; margin-bottom:16px;">R</div>
+        <div style="font-size:1.4rem; font-weight:600; color:var(--fg);">Rose Tyler</div>
+        <div style="font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:#ff6348; margin-bottom:12px; font-family:monospace;">Head of Adversarial Operations</div>
+        <div style="font-size:0.85rem; line-height:1.7; color:var(--fg-dim); max-width:560px;">
+          I test the things that aren't supposed to break — until they do. I design the attack campaigns...
+        </div>
+      </div>
+    </div>
+    <div class="card-body">
+      <h3>B: Centered Stack</h3>
+      <p>Photo top-center, name/role below, bio text centered. More dramatic, works well with the full-viewport snap. Presentation feel.</p>
+    </div>
+  </div>
+
+  <div class="card" data-choice="split" onclick="toggleSelect(this)" style="min-height:340px;">
+    <div class="card-image" style="padding:20px;">
+      <!-- Mockup: 50/50 split -->
+      <div style="display:flex; gap:0; height:260px;">
+        <div style="flex:1; background:linear-gradient(135deg, rgba(0,210,255,0.15), rgba(0,210,255,0.05)); display:flex; align-items:center; justify-content:center; border-radius:4px 0 0 4px;">
+          <div style="width:180px; height:180px; border-radius:50%; background:linear-gradient(135deg, #00d2ff 0%, #0099cc 100%); display:flex; align-items:center; justify-content:center; color:white; font-size:2.5rem;">A</div>
+        </div>
+        <div style="flex:1; padding:20px; display:flex; flex-direction:column; justify-content:center;">
+          <div style="font-size:1.4rem; font-weight:600; color:var(--fg);">Amy Pond</div>
+          <div style="font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:#00d2ff; margin-bottom:12px; font-family:monospace;">Lead Evaluation Engineer</div>
+          <div style="font-size:0.85rem; line-height:1.7; color:var(--fg-dim);">
+            I run the benchmarks. All of them. Every model, every attack family...
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body">
+      <h3>C: 50/50 Split</h3>
+      <p>Photo side fills half the viewport with a tinted background, text fills the other half. Alternating sides (photo-left, photo-right) for visual rhythm as you scroll.</p>
+    </div>
+  </div>
+</div>
+
+<p style="margin-top:1.5rem; font-size:0.85rem; color:var(--fg-muted);">
+  All options include: ~200px photos, agent accent color throughout, contribution tags, and the neural vis canvas behind everything shifting to match the current agent's color.
+</p>