diff --git a/docs/superpowers/specs/settings-design-playground.html b/docs/superpowers/specs/settings-design-playground.html
deleted file mode 100644
index 7cd8365..0000000
--- a/docs/superpowers/specs/settings-design-playground.html
+++ /dev/null
@@ -1,337 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Settings UI Design Playground</title>
-  <style>
-    :root {
-      --color-base: #f5f5f5;
-      --color-base-font: #444;
-      --color-base-background: #fff;
-      --color-header-background: #f7f7f7;
-      --color-header-border: #ddd;
-      --color-search-border: #bbb;
-      --color-search-focus: #3498db;
-      --color-link: #3498db;
-      --color-sidebar-background: #f7f7f7;
-      --color-sidebar-border: #ddd;
-      --color-pagination-border: #ddd;
-      --color-suggestion: #666;
-      --color-footer: #888;
-      --color-btn-background: #fff;
-      --color-btn-border: #ddd;
-      --color-btn-hover: #eee;
-      --color-result-border: #eee;
-      --radius: 4px;
-    }
-    @media (prefers-color-scheme: dark) {
-      :root {
-        --color-base: #222;
-        --color-base-font: #dcdcdc;
-        --color-base-background: #2b2b2b;
-        --color-header-background: #333;
-        --color-header-border: #444;
-        --color-search-border: #555;
-        --color-search-focus: #5dade2;
-        --color-link: #5dade2;
-        --color-sidebar-background: #333;
-        --color-sidebar-border: #444;
-        --color-pagination-border: #444;
-        --color-suggestion: #999;
-        --color-footer: #666;
-        --color-btn-background: #333;
-        --color-btn-border: #555;
-        --color-btn-hover: #444;
-        --color-result-border: #3a3a3a;
-      }
-    }
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    html { font-size: 16px; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-      color: var(--color-base-font);
-      background: var(--color-base);
-      line-height: 1.6;
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
-    .playground { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; padding: 1.5rem; max-width: 1100px; margin: 0 auto; width: 100%; }
-    .controls { background: var(--color-base-background); border: 1px solid var(--color-sidebar-border); border-radius: var(--radius); padding: 1rem; height: fit-content; position: sticky; top: 1rem; }
-    .preview-area { display: flex; flex-direction: column; gap: 1rem; }
-    .prompt-box { background: #1a1a2e; color: #a8dadc; padding: 1rem; border-radius: var(--radius); font-family: monospace; font-size: 0.8rem; white-space: pre-wrap; min-height: 80px; position: relative; }
-    .prompt-box button { position: absolute; top: 0.5rem; right: 0.5rem; background: #3498db; color: white; border: none; padding: 0.3rem 0.7rem; border-radius: 3px; cursor: pointer; font-size: 0.75rem; }
-    .prompt-box button:hover { background: #2980b9; }
-    .control-group { margin-bottom: 1rem; }
-    .control-group:last-child { margin-bottom: 0; }
-    .control-label { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--color-base-font); }
-    select, input[type="range"] { width: 100%; }
-    select { padding: 0.4rem; border: 1px solid var(--color-sidebar-border); border-radius: 3px; background: var(--color-base-background); color: var(--color-base-font); font-size: 0.85rem; }
-    input[type="range"] { -webkit-appearance: none; height: 6px; background: var(--color-pagination-border); border-radius: 3px; outline: none; }
-    input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: var(--color-link); border-radius: 50%; cursor: pointer; }
-    .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0; }
-    .toggle { position: relative; width: 40px; height: 22px; }
-    .toggle input { opacity: 0; width: 0; height: 0; }
-    .toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--color-pagination-border); border-radius: 22px; transition: 0.2s; }
-    .toggle-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.2s; }
-    .toggle input:checked + .toggle-slider { background: var(--color-link); }
-    .toggle input:checked + .toggle-slider::before { transform: translateX(18px); }
-    .preset-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
-    .preset-btn { padding: 0.3rem 0.7rem; font-size: 0.75rem; border: 1px solid var(--color-sidebar-border); border-radius: 3px; background: var(--color-btn-background); color: var(--color-base-font); cursor: pointer; }
-    .preset-btn:hover { background: var(--color-btn-hover); }
-    .preset-btn.active { background: var(--color-link); color: white; border-color: var(--color-link); }
-    .mock-page { background: var(--color-base-background); border: 1px solid var(--color-sidebar-border); border-radius: var(--radius); overflow: hidden; position: relative; }
-    .mock-header { background: var(--color-header-background); border-bottom: 1px solid var(--color-header-border); padding: 0.6rem 1rem; display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; }
-    .mock-search-bar { padding: 0.6rem 1rem; border-bottom: 1px solid var(--color-sidebar-border); }
-    .mock-search-bar input { width: 100%; padding: 0.5rem; border: 1px solid var(--color-search-border); border-radius: var(--radius); font-size: 0.85rem; background: var(--color-base-background); color: var(--color-base-font); }
-    .mock-content { display: flex; min-height: 280px; }
-    .mock-sidebar { width: 160px; background: var(--color-sidebar-background); border-right: 1px solid var(--color-sidebar-border); padding: 1rem; font-size: 0.8rem; }
-    .mock-main { flex: 1; padding: 1rem; }
-    .result-demo { border-bottom: 1px solid var(--color-result-border); padding: 0.5rem 0; }
-    .gear-btn { background: none; border: none; font-size: 1.1rem; cursor: pointer; padding: 0.3rem; border-radius: 50%; }
-    .gear-btn:hover { background: var(--color-sidebar-background); }
-    .settings-panel { background: var(--color-base-background); border: 1px solid var(--color-sidebar-border); border-radius: var(--radius); overflow: hidden; }
-    .settings-drawer { position: absolute; bottom: 0.8rem; right: 0.8rem; width: 300px; max-height: 420px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.15); border-radius: var(--radius); z-index: 50; }
-    .settings-modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.4); z-index: 50; }
-    .settings-modal-inner { width: 380px; max-height: 480px; overflow-y: auto; border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
-    .settings-sidebar-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 250px; background: var(--color-base-background); border-right: 1px solid var(--color-sidebar-border); overflow-y: auto; z-index: 50; }
-    .settings-inline { margin-top: 0.8rem; border: 1px solid var(--color-sidebar-border); border-radius: var(--radius); }
-    .settings-inline .panel-header { background: var(--color-header-background); border-bottom: 1px solid var(--color-sidebar-border); padding: 0.6rem 1rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
-    .panel-header { background: var(--color-header-background); border-bottom: 1px solid var(--color-sidebar-border); padding: 0.75rem 1rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
-    .close-btn { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--color-base-font); padding: 0 0.4rem; line-height: 1; }
-    .panel-body { padding: 0.8rem; }
-    .settings-section { margin-bottom: 1rem; }
-    .settings-section:last-child { margin-bottom: 0; }
-    .section-title { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-suggestion); margin-bottom: 0.6rem; }
-    .setting-row { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid var(--color-result-border); }
-    .setting-row:last-child { border-bottom: none; }
-    .setting-label { font-size: 0.85rem; }
-    .setting-desc { font-size: 0.7rem; color: var(--color-suggestion); }
-    .engine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
-    .engine-toggle { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; padding: 0.25rem; border-radius: 3px; background: var(--color-sidebar-background); }
-    .engine-toggle input { width: auto; }
-    .engine-toggle span { flex: 1; }
-    .theme-selector { display: flex; gap: 0.4rem; }
-    .theme-btn { padding: 0.3rem 0.6rem; border: 1px solid var(--color-sidebar-border); border-radius: 3px; background: var(--color-btn-background); cursor: pointer; font-size: 0.75rem; }
-    .theme-btn.active { background: var(--color-link); color: white; border-color: var(--color-link); }
-    select.mini { width: 90px; font-size: 0.75rem; padding: 0.2rem 0.3rem; }
-    .btn-save { width: 100%; padding: 0.5rem; background: var(--color-link); color: white; border: none; border-radius: var(--radius); cursor: pointer; font-size: 0.85rem; margin-top: 0.8rem; }
-    .btn-save:hover { opacity: 0.9; }
-    .range-value { font-size: 0.7rem; color: var(--color-suggestion); text-align: right; margin-top: 0.2rem; }
-    .theme-dark { --color-base: #1a1a2e; --color-base-font: #e0e0e0; --color-base-background: #16213e; --color-header-background: #0f3460; --color-header-border: #1a4a7a; --color-search-border: #2a5a8a; --color-search-focus: #5dade2; --color-link: #5dade2; --color-sidebar-background: #0f3460; --color-sidebar-border: #1a4a7a; --color-pagination-border: #2a4a6a; --color-suggestion: #8a8a9a; --color-footer: #6a6a7a; --color-btn-background: #0f3460; --color-btn-border: #2a5a8a; --color-btn-hover: #1a4a7a; --color-result-border: #2a2a3a; }
-  </style>
-</head>
-<body>
-  <div class="playground">
-    <div class="controls">
-      <div class="preset-row">
-        <button class="preset-btn active" data-preset="clean">Clean</button>
-        <button class="preset-btn" data-preset="compact">Compact</button>
-        <button class="preset-btn" data-preset="detailed">Detailed</button>
-      </div>
-      <div class="control-group">
-        <div class="control-label">Access Pattern</div>
-        <select id="accessPattern">
-          <option value="drawer">Slide-out Drawer (bottom-right)</option>
-          <option value="modal">Modal Overlay</option>
-          <option value="sidebar">Sidebar Panel</option>
-          <option value="inline">Inline Expansion</option>
-        </select>
-      </div>
-      <div class="control-group">
-        <div class="control-label">Theme Preview</div>
-        <select id="themePreview">
-          <option value="light">Light Mode</option>
-          <option value="dark">Dark Mode</option>
-        </select>
-      </div>
-      <div class="control-group">
-        <div class="control-label">Trigger Button</div>
-        <select id="triggerStyle">
-          <option value="gear">Gear Icon</option>
-          <option value="sliders">Sliders Icon</option>
-          <option value="text">"Preferences" Text</option>
-          <option value="cog-sliders">Combined</option>
-        </select>
-      </div>
-      <div class="control-group">
-        <div class="control-label">Settings Density</div>
-        <input type="range" id="density" min="0" max="2" value="1">
-        <div class="range-value" id="densityLabel">Normal</div>
-      </div>
-      <div class="control-group">
-        <div class="control-label">Animation</div>
-        <div class="toggle-row">
-          <span style="font-size: 0.85rem;">Enable transitions</span>
-          <label class="toggle">
-            <input type="checkbox" id="animations" checked>
-            <span class="toggle-slider"></span>
-          </label>
-        </div>
-      </div>
-      <div class="control-group">
-        <div class="control-label">Sections to Show</div>
-        <div class="toggle-row"><span style="font-size: 0.8rem;">Theme</span><label class="toggle"><input type="checkbox" class="section-toggle" data-section="theme" checked><span class="toggle-slider"></span></label></div>
-        <div class="toggle-row"><span style="font-size: 0.8rem;">Engines</span><label class="toggle"><input type="checkbox" class="section-toggle" data-section="engines" checked><span class="toggle-slider"></span></label></div>
-        <div class="toggle-row"><span style="font-size: 0.8rem;">Search Defaults</span><label class="toggle"><input type="checkbox" class="section-toggle" data-section="search" checked><span class="toggle-slider"></span></label></div>
-      </div>
-      <div style="margin-top: 1rem; padding: 0.7rem; background: var(--color-sidebar-background); border-radius: var(--radius); font-size: 0.75rem; color: var(--color-suggestion);">
-        Click the gear button in the preview to toggle the settings panel.
-      </div>
-    </div>
-    <div class="preview-area">
-      <div class="prompt-box" id="promptBox">Update the settings UI to use a clean, minimal design with a slide-out drawer...</div>
-      <div class="mock-page" id="mockPage">
-        <div class="mock-header">
-          <span>kafka</span>
-          <button class="gear-btn" id="gearBtn">&#9881;</button>
-        </div>
-        <div class="mock-search-bar">
-          <input type="text" value="golang metasearch engine" placeholder="Search…">
-        </div>
-        <div class="mock-content">
-          <div class="mock-sidebar">
-            <p><strong>Results</strong></p>
-            <p style="color: var(--color-suggestion); font-size: 0.75rem; margin-top: 0.3rem;">About 42 results</p>
-            <p style="margin-top: 0.8rem; font-size: 0.75rem;">Powered by kafka</p>
-          </div>
-          <div class="mock-main">
-            <div class="result-demo">
-              <div style="font-size: 1rem; color: var(--color-link);">github.com/golang/go</div>
-              <div style="font-size: 0.8rem; color: var(--color-suggestion);">The Go Programming Language</div>
-            </div>
-            <div class="result-demo">
-              <div style="font-size: 1rem; color: var(--color-link);">go.dev</div>
-              <div style="font-size: 0.8rem; color: var(--color-suggestion);">Go land</div>
-            </div>
-          </div>
-        </div>
-        <div id="settingsContainer" style="position: absolute; inset: 0; pointer-events: none;"></div>
-      </div>
-    </div>
-  </div>
-  <script>
-    const state = {
-      accessPattern: 'drawer',
-      themePreview: 'light',
-      triggerStyle: 'gear',
-      density: 1,
-      animations: true,
-      sections: { theme: true, engines: true, search: true },
-      panelOpen: false
-    };
-    const triggerIcons = { gear: '\u2699', sliders: '\uD83D\uDD27', text: 'Preferences', 'cog-sliders': '\u2699\uD83D\uDD27' };
-    const densityLabels = ['Compact', 'Normal', 'Detailed'];
-    const densityPadding = ['0.5rem', '0.8rem', '1rem'];
-    const engineCols = ['1fr 1fr 1fr', '1fr 1fr', '1fr'];
-
-    function updateAll() {
-      renderPreview();
-      updatePrompt();
-      updatePresetButtons();
-    }
-
-    function buildPanelBody() {
-      const d = state.density;
-      const densityFont = ['0.75rem', '0.85rem', '0.9rem'][d];
-      const showDesc = d > 0;
-      const showRPP = d === 2;
-      let html = '';
-      if (state.sections.theme) {
-        html += '<div class="settings-section"><div class="section-title">Appearance</div><div class="setting-row"><div><div style="font-size:'+densityFont+';">Theme</div>'+(showDesc?'<div class="setting-desc">Color scheme</div>':'')+'</div><div class="theme-selector"><button class="theme-btn active" style="padding:0.25rem 0.5rem;">&#9788;</button><button class="theme-btn" style="padding:0.25rem 0.5rem;">&#9790;</button><button class="theme-btn" style="padding:0.25rem 0.5rem;">&#9000;</button></div></div></div>';
-      }
-      if (state.sections.engines) {
-        const engines = ['Wikipedia','ArXiv','Crossref','Brave','Qwant','Duck','GitHub','Reddit','Bing'];
-        let engHtml = '';
-        for (let i = 0; i < engines.length; i++) {
-          engHtml += '<label class="engine-toggle"><input type="checkbox" checked style="width:auto;"><span>'+engines[i]+'</span></label>';
-        }
-        html += '<div class="settings-section"><div class="section-title">Engines</div><div class="engine-grid" style="grid-template-columns:'+engineCols[d]+';gap:0.3rem;">'+engHtml+'</div></div>';
-      }
-      if (state.sections.search) {
-        html += '<div class="settings-section"><div class="section-title">Search Defaults</div>';
-        if (showRPP) html += '<div class="setting-row"><div><div style="font-size:0.85rem;">Results per page</div></div><select class="mini"><option>10</option><option>20</option><option>50</option></select></div>';
-        html += '<div class="setting-row"><div><div style="font-size:'+densityFont+';">Safe search</div>'+(showDesc?'<div class="setting-desc">Filter adult content</div>':'')+'</div><select class="mini"><option>Moderate</option><option>Strict</option><option>Off</option></select></div>';
-        html += '<div class="setting-row"><div><div style="font-size:'+densityFont+';">Default format</div>'+(showDesc?'<div class="setting-desc">Response format</div>':'')+'</div><select class="mini"><option>HTML</option><option>JSON</option><option>CSV</option></select></div>';
-        html += '</div>';
-      }
-      html += '<button class="btn-save">Save Preferences</button>';
-      return html;
-    }
-
-    function renderPreview() {
-      const page = document.getElementById('mockPage');
-      const container = document.getElementById('settingsContainer');
-      page.classList.toggle('theme-dark', state.themePreview === 'dark');
-      document.getElementById('gearBtn').textContent = triggerIcons[state.triggerStyle];
-      document.getElementById('densityLabel').textContent = densityLabels[state.density];
-      if (!state.panelOpen) { container.innerHTML = ''; return; }
-      const pad = densityPadding[state.density];
-      let panelClass = 'settings-drawer';
-      let inner = '';
-      if (state.accessPattern === 'modal') { panelClass = 'settings-modal'; inner = '<div class="settings-modal-inner"><div class="panel-header">Preferences <button class="close-btn">\uD7</button></div><div class="panel-body" style="padding:'+pad+';">'+buildPanelBody()+'</div></div>'; }
-      else if (state.accessPattern === 'sidebar') { panelClass = 'settings-sidebar-panel'; inner = '<div class="panel-header">Preferences</div><div class="panel-body" style="padding:'+pad+';">'+buildPanelBody()+'</div>'; }
-      else if (state.accessPattern === 'inline') { container.style.pointerEvents = 'auto'; container.innerHTML = '<div style="padding:0 1rem;"><div class="settings-inline"><div class="panel-header">&#9881; Preferences <span style="font-size:0.8rem;">&#9660;</span></div><div class="panel-body" style="padding:'+pad+';display:none;">'+buildPanelBody()+'</div></div></div>'; return; }
-      else { inner = '<div class="panel-header">Preferences <button class="close-btn">\uD7</button></div><div class="panel-body" style="padding:'+pad+';">'+buildPanelBody()+'</div>'; }
-      container.style.pointerEvents = 'auto';
-      container.innerHTML = '<div class="'+panelClass+'">'+inner+'</div>';
-    }
-
-    function updatePrompt() {
-      const parts = [];
-      const patternNames = { drawer: 'slide-out drawer', modal: 'modal overlay', sidebar: 'sidebar panel', inline: 'inline expansion' };
-      parts.push(patternNames[state.accessPattern] + ' access pattern');
-      if (state.themePreview === 'dark') parts.push('dark mode preview');
-      if (state.density === 0) parts.push('compact density');
-      if (state.density === 2) parts.push('detailed density');
-      if (!state.animations) parts.push('no animations');
-      const secNames = { theme: 'Theme', engines: 'Engines', search: 'Search Defaults' };
-      const activeSections = Object.entries(state.sections).filter(function(e){return e[1]}).map(function(e){return secNames[e[0]]});
-      if (activeSections.length < 3) parts.push('only ' + activeSections.join(' and ') + ' sections');
-      var prompt = 'Implement a settings/preferences UI for kafka with a ' + parts.join(', ') + '. The panel should appear when the user clicks the ' + triggerIcons[state.triggerStyle] + ' button in the header. Store preferences in localStorage.';
-      document.getElementById('promptBox').textContent = prompt;
-    }
-
-    function updatePresetButtons() {
-      document.querySelectorAll('.preset-btn').forEach(function(btn) {
-        var isActive = (btn.dataset.preset === 'clean' && state.accessPattern === 'drawer' && state.density === 1 && state.sections.theme && state.sections.engines && state.sections.search) ||
-                         (btn.dataset.preset === 'compact' && state.accessPattern === 'sidebar' && state.density === 0) ||
-                         (btn.dataset.preset === 'detailed' && state.accessPattern === 'modal' && state.density === 2);
-        btn.classList.toggle('active', isActive);
-      });
-    }
-
-    document.getElementById('accessPattern').addEventListener('change', function(e) { state.accessPattern = e.target.value; updateAll(); });
-    document.getElementById('themePreview').addEventListener('change', function(e) { state.themePreview = e.target.value; updateAll(); });
-    document.getElementById('triggerStyle').addEventListener('change', function(e) { state.triggerStyle = e.target.value; updateAll(); });
-    document.getElementById('density').addEventListener('input', function(e) { state.density = parseInt(e.target.value); updateAll(); });
-    document.getElementById('animations').addEventListener('change', function(e) { state.animations = e.target.checked; updateAll(); });
-    document.querySelectorAll('.section-toggle').forEach(function(toggle) {
-      toggle.addEventListener('change', function(e) { state.sections[e.target.dataset.section] = e.target.checked; updateAll(); });
-    });
-    document.querySelectorAll('.preset-btn').forEach(function(btn) {
-      btn.addEventListener('click', function() {
-        var p = btn.dataset.preset;
-        if (p === 'clean') { state.accessPattern = 'drawer'; state.density = 1; state.sections = {theme:true, engines:true, search:true}; }
-        if (p === 'compact') { state.accessPattern = 'sidebar'; state.density = 0; state.sections = {theme:true, engines:true, search:true}; }
-        if (p === 'detailed') { state.accessPattern = 'modal'; state.density = 2; state.sections = {theme:true, engines:true, search:true}; }
-        document.getElementById('accessPattern').value = state.accessPattern;
-        document.getElementById('density').value = state.density;
-        updateAll();
-      });
-    });
-    document.getElementById('gearBtn').addEventListener('click', function() { state.panelOpen = !state.panelOpen; updateAll(); });
-    document.getElementById('promptBox').insertAdjacentHTML('beforeend', '<button id="copyBtn">Copy</button>');
-    document.getElementById('copyBtn').addEventListener('click', function() {
-      var text = document.getElementById('promptBox').textContent;
-      navigator.clipboard.writeText(text).then(function() {
-        var btn = document.getElementById('copyBtn');
-        btn.textContent = 'Copied!';
-        setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
-      });
-    });
-    updateAll();
-  </script>
-</body>
-</html>
