npm - tokengolf - Versions diffs - 0.4.0 → 0.4.2 - Mend

tokengolf 0.4.0 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/cli.js +1360 -643
package/docs/index.html +886 -307
package/package.json +1 -1
package/scripts/demo-to-html.js +104 -0
package/src/cli.js +45 -5
package/src/lib/demo-active.js +56 -0
package/src/lib/demo-fixtures.js +496 -0
package/src/lib/demo-hud.js +3 -0
package/src/lib/demo-render.js +16 -0
package/src/lib/demo-scorecard.js +56 -0
package/src/lib/demo-stats.js +56 -0

package/docs/index.html CHANGED Viewed

@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>TokenGolf — Every token matters.</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⛳</text></svg>">
+    <title>TokenGolf: Every token matters.</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -18,13 +19,13 @@
     <!-- Open Graph -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://josheche.github.io/tokengolf/" />
-    <meta property="og:title" content="TokenGolf — Every token matters." />
+    <meta property="og:title" content="TokenGolf: Every token matters." />
     <meta property="og:description" content="TokenGolf turns Claude Code sessions into a game. Track token efficiency, earn achievements, and level up your prompting skills." />
     <meta property="og:image" content="https://josheche.github.io/tokengolf/assets/tokengolf-bg-min.jpg" />
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="TokenGolf — Every token matters." />
+    <meta name="twitter:title" content="TokenGolf: Every token matters." />
     <meta name="twitter:description" content="TokenGolf turns Claude Code sessions into a game. Track token efficiency, earn achievements, and level up your prompting skills." />
     <meta name="twitter:image" content="https://josheche.github.io/tokengolf/assets/tokengolf-bg-min.jpg" />
@@ -37,7 +38,7 @@
       "url": "https://josheche.github.io/tokengolf/",
       "applicationCategory": "DeveloperApplication",
       "operatingSystem": "macOS, Linux",
-      "description": "A CLI game that wraps Claude Code sessions with game mechanics — quests, budgets, efficiency ratings, and 60+ achievements. Flow mode tracks you passively. Roguelike mode trains deliberate prompting.",
+      "description": "A CLI game that wraps Claude Code sessions with game mechanics. Quests, budgets, efficiency ratings, and 60+ achievements. Flow mode tracks you passively. Roguelike mode trains deliberate prompting.",
       "offers": {
         "@type": "Offer",
         "price": "0",
@@ -97,6 +98,49 @@
           "SF Mono", "Cascadia Mono", "Fira Code", "Consolas", monospace;
       }
+      /* ── Shared design tokens ── */
+      .card {
+        background: var(--card);
+        border: 1px solid var(--border);
+        border-radius: 10px;
+      }
+      .section-prose {
+        color: var(--muted);
+        font-size: 1rem;
+        line-height: 1.75;
+        max-width: 680px;
+      }
+      .section-prose + .section-prose {
+        margin-top: 1rem;
+      }
+      .section-prose strong {
+        color: var(--text);
+      }
+      .section-sub {
+        color: var(--muted);
+        font-size: 0.95rem;
+        line-height: 1.65;
+        margin-bottom: 2rem;
+        max-width: 540px;
+      }
+      .section-sub code {
+        color: var(--cyan);
+        font-size: 0.88em;
+      }
+      .label-caps {
+        font-size: 0.7rem;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--muted);
+      }
       /* ── Hero ── */
       .hero {
         position: relative;
@@ -268,6 +312,11 @@
         letter-spacing: -0.02em;
       }
+      /* Tighten h2 when followed by a subtitle */
+      section h2:has(+ .section-sub) {
+        margin-bottom: 0.5rem;
+      }
       section h2 span {
         margin-right: 0.5rem;
       }
@@ -276,7 +325,7 @@
       .modes-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
-        gap: 1.5rem;
+        gap: 1.25rem;
       }
       @media (max-width: 600px) {
@@ -286,8 +335,6 @@
       }
       .mode-card {
-        background: var(--card);
-        border: 1px solid var(--border);
         border-radius: 12px;
         padding: 1.75rem;
       }
@@ -317,13 +364,11 @@
       .mode-badge {
         display: inline-block;
-        font-size: 0.75rem;
-        font-weight: 600;
-        letter-spacing: 0.06em;
-        text-transform: uppercase;
         padding: 0.2rem 0.6rem;
         border-radius: 4px;
         margin-bottom: 0.75rem;
+        font-size: 0.75rem;
+        font-weight: 600;
       }
       .badge-flow {
@@ -336,10 +381,16 @@
       }
       /* ── Classes table ── */
+      .classes-table-wrap {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+      }
       .classes-table {
         width: 100%;
         border-collapse: collapse;
         font-size: 0.95rem;
+        min-width: 480px;
       }
       .classes-table th {
@@ -351,12 +402,14 @@
         text-transform: uppercase;
         padding: 0.6rem 1rem;
         border-bottom: 1px solid var(--border);
+        white-space: nowrap;
       }
       .classes-table td {
         padding: 1rem;
         border-bottom: 1px solid var(--border);
         vertical-align: middle;
+        white-space: nowrap;
       }
       .classes-table tr:last-child td {
@@ -383,18 +436,19 @@
         color: var(--green);
         font-weight: 600;
       }
+      .difficulty-calculated {
+        color: var(--magenta);
+        font-weight: 600;
+      }
       /* ── Achievements grid ── */
       .achievements-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-        gap: 1rem;
+        gap: 1.25rem;
       }
       .achievement-card {
-        background: var(--card);
-        border: 1px solid var(--border);
-        border-radius: 10px;
         padding: 1.1rem 1.25rem;
         display: flex;
         align-items: flex-start;
@@ -421,9 +475,6 @@
       /* ── CLI Commands ── */
       .cli-block {
-        background: var(--card);
-        border: 1px solid var(--border);
-        border-radius: 10px;
         overflow: hidden;
       }
@@ -470,13 +521,10 @@
       .tiers-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-        gap: 1rem;
+        gap: 1.25rem;
       }
       .tier-card {
-        background: var(--card);
-        border: 1px solid var(--border);
-        border-radius: 10px;
         padding: 1.25rem 1rem;
         text-align: center;
       }
@@ -497,64 +545,247 @@
         font-family: monospace;
       }
-      /* ── Achievement category headers ── */
-      .achievement-category {
-        grid-column: 1 / -1;
-        font-size: 0.75rem;
-        font-weight: 700;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-        color: var(--muted);
-        padding-top: 1rem;
-        border-top: 1px solid var(--border);
+      .achievement-card.death {
+        border-color: #3d1f1f;
+      }
+      .tab-btn[aria-selected="true"].tab-death {
+        background: var(--red);
+        box-shadow: 0 2px 16px rgba(248, 81, 73, 0.3);
+      }
+      .tab-btn.tab-death:hover {
+        color: var(--red);
+      }
+      /* Achievement sub-category labels inside panels */
+      .ach-sub {
+        padding-top: 0.75rem;
         margin-top: 0.5rem;
+        grid-column: 1 / -1;
       }
-      .achievement-category:first-child {
-        border-top: none;
+      .ach-sub:first-child {
         padding-top: 0;
         margin-top: 0;
       }
-      .achievement-card.death {
-        border-color: #3d1f1f;
+      /* ── In Action — Arcade Cabinet Gallery ── */
+      .in-action {
+        position: relative;
+        overflow: visible;
+      }
+      /* ── Shared tab switcher ── */
+      .tab-bar {
+        display: flex;
+        gap: 0.25rem;
+        margin-bottom: 2rem;
+        background: #0a0e14;
+        border: 1px solid var(--border);
+        border-radius: 10px;
+        padding: 0.3rem;
+        width: fit-content;
+      }
+      .tab-btn {
+        position: relative;
+        padding: 0.5rem 1.2rem;
+        font-size: 0.8rem;
+        font-weight: 600;
+        color: var(--muted);
+        background: transparent;
+        border: none;
+        border-radius: 7px;
+        cursor: pointer;
+        transition: color 0.2s, background 0.2s, box-shadow 0.2s;
+        font-family: "SF Mono", "Cascadia Mono", monospace;
+        white-space: nowrap;
+        letter-spacing: -0.01em;
+      }
+      .tab-btn:hover {
+        color: var(--text);
+        background: rgba(48, 54, 61, 0.45);
+      }
+      .tab-btn[aria-selected="true"] {
+        color: #0d1117;
+        background: var(--cyan);
+        box-shadow: 0 2px 16px rgba(121, 192, 255, 0.3);
       }
-      /* ── Screenshots ── */
-      .screenshots-grid {
+      .tab-panel {
+        display: none;
+      }
+      .tab-panel.active {
+        display: block;
+        animation: panelIn 0.3s ease both;
+      }
+      @keyframes panelIn {
+        from { opacity: 0; transform: translateY(10px); }
+        to   { opacity: 1; transform: translateY(0); }
+      }
+      /* ── Layout grids inside panels ── */
+      .demos-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 2rem;
         align-items: start;
       }
-      @media (max-width: 768px) {
-        .screenshots-grid {
-          grid-template-columns: 1fr;
-        }
+      @media (max-width: 900px) {
+        .demos-grid { grid-template-columns: 1fr; }
       }
-      .screenshot-item {
+      .demo-item {
         display: flex;
         flex-direction: column;
-        gap: 0.75rem;
+        gap: 0.85rem;
+        min-width: 0;
       }
-      .screenshot-item img {
-        width: 100%;
-        border-radius: 10px;
-        border: 1px solid var(--border);
-        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+      .demo-item.full-width {
+        grid-column: 1 / -1;
       }
-      .screenshot-label {
+      .demo-label {
         font-size: 0.85rem;
         color: var(--muted);
-        line-height: 1.5;
+        line-height: 1.55;
+        padding-left: 0.15rem;
+      }
+      .demo-label strong {
+        color: var(--text);
+      }
+      /* ── Terminal chrome ── */
+      .term {
+        position: relative;
+        background: #0c1017;
+        border: 1px solid var(--border);
+        border-radius: 10px;
+        overflow: hidden;
+        min-width: 0;
+        transition: border-color 0.4s, box-shadow 0.4s;
+        box-shadow: 0 4px 32px rgba(0, 0, 0, 0.55);
+      }
+      /* Scanline overlay */
+      .term::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        background: repeating-linear-gradient(
+          0deg,
+          transparent 0px,
+          transparent 2px,
+          rgba(0, 0, 0, 0.035) 2px,
+          rgba(0, 0, 0, 0.035) 4px
+        );
+        border-radius: 10px;
+        z-index: 1;
+      }
+      /* Glow variants */
+      .term[data-glow="cyan"] {
+        box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(121,192,255,0.06);
+      }
+      .term[data-glow="cyan"]:hover {
+        border-color: rgba(121,192,255,0.35);
+        box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(121,192,255,0.12);
+      }
+      .term[data-glow="yellow"] {
+        box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(227,179,65,0.06);
+      }
+      .term[data-glow="yellow"]:hover {
+        border-color: rgba(227,179,65,0.35);
+        box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(227,179,65,0.12);
+      }
+      .term[data-glow="red"] {
+        box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(248,81,73,0.06);
+      }
+      .term[data-glow="red"]:hover {
+        border-color: rgba(248,81,73,0.35);
+        box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(248,81,73,0.12);
+      }
+      .term[data-glow="green"] {
+        box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(63,185,80,0.06);
+      }
+      .term[data-glow="green"]:hover {
+        border-color: rgba(63,185,80,0.35);
+        box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(63,185,80,0.12);
+      }
+      /* Header bar */
+      .term-header {
+        background: #13181f;
+        padding: 0.6rem 0.9rem;
+        font-size: 0.75rem;
+        color: var(--muted);
+        font-family: "SF Mono", "Cascadia Mono", monospace;
+        border-bottom: 1px solid rgba(48, 54, 61, 0.6);
+        display: flex;
+        align-items: center;
+        gap: 0.65rem;
+      }
+      /* macOS traffic lights */
+      .term-header::before {
+        content: "";
+        display: block;
+        width: 46px;
+        min-width: 46px;
+        height: 12px;
+        background:
+          radial-gradient(circle 4.5px at 6px 6px, #ff5f57 4px, transparent 4.5px),
+          radial-gradient(circle 4.5px at 22px 6px, #febc2e 4px, transparent 4.5px),
+          radial-gradient(circle 4.5px at 38px 6px, #28c840 4px, transparent 4.5px);
+        opacity: 0.72;
+        flex-shrink: 0;
       }
-      .screenshot-label strong {
+      .term pre {
+        position: relative;
+        z-index: 0;
+        padding: 1.1rem 1.35rem;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        font-family: "SF Mono", "Cascadia Mono", "Fira Code", "Consolas", monospace;
+        font-size: 0.78rem;
+        line-height: 1.55;
         color: var(--text);
       }
+      @media (max-width: 600px) {
+        .term pre { font-size: 0.68rem; padding: 0.75rem; }
+        .tab-bar { width: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
+        .tab-btn { padding: 0.45rem 0.85rem; font-size: 0.72rem; }
+      }
+      /* Terminal ANSI color classes */
+      .term .t-b { font-weight: 700; }
+      .term .t-dim { opacity: 0.55; }
+      .term .t-red { color: var(--red); }
+      .term .t-green { color: var(--green); }
+      .term .t-yellow { color: var(--yellow); }
+      .term .t-cyan { color: var(--cyan); }
+      .term .t-magenta { color: var(--magenta); }
+      .term .t-white { color: var(--text); }
+      .term .t-muted { color: var(--muted); }
+      /* Box-drawing border colors */
+      .term .border-yellow { color: var(--yellow); }
+      .term .border-red { color: var(--red); }
+      .term .border-gray { color: var(--border); }
       /* ── Footer ── */
       footer {
         border-top: 1px solid var(--border);
@@ -618,22 +849,22 @@
     </div>
     <!-- ── Why TokenGolf ── -->
-    <section>
+    <section id="why">
       <h2><span>⛳</span>Why "TokenGolf"?</h2>
-      <p style="color:var(--muted);font-size:1rem;line-height:1.75;max-width:680px;">
-        <a href="https://en.wikipedia.org/wiki/Code_golf" target="_blank">Code golf</a> is the engineering practice of solving a problem in as few characters as possible. The constraint isn't the point — <em>the discipline the constraint creates</em> is the point. Writing the shortest solution forces you to understand the problem deeply and use your tools precisely.
+      <p class="section-prose">
+        <a href="https://en.wikipedia.org/wiki/Code_golf" target="_blank">Code golf</a> is the engineering practice of solving a problem in as few characters as possible. The constraint isn't the point. <em>The discipline the constraint creates</em> is the point. Writing the shortest solution forces you to understand the problem deeply and use your tools precisely.
       </p>
-      <p style="color:var(--muted);font-size:1rem;line-height:1.75;max-width:680px;margin-top:1rem;">
-        Token golf is the same idea applied to AI sessions. Your budget is par. Every unnecessary prompt, every redundant context dump, every "can you also…" tacked onto a request is a stroke over par. The game doesn't literally resemble golf — it borrows the concept: <strong style="color:var(--text);">optimize under constraint, measure your score, improve your game.</strong>
+      <p class="section-prose">
+        Token golf is the same idea applied to AI sessions. Your budget is par. Every unnecessary prompt, every redundant context dump, every "can you also…" tacked onto a request is a stroke over par. The game doesn't literally resemble golf. It borrows the concept: <strong>optimize under constraint, measure your score, improve your game.</strong>
       </p>
     </section>
     <!-- ── Two Modes ── -->
-    <section>
+    <section id="modes">
       <h2><span>🎮</span>Two Modes</h2>
       <div class="modes-grid">
-        <div class="mode-card">
-          <div class="mode-badge badge-flow">Flow Mode</div>
+        <div class="card mode-card">
+          <div class="mode-badge label-caps badge-flow">Flow Mode</div>
           <h3>Passive tracking, zero friction</h3>
           <p>
             Just work normally. TokenGolf runs in the background via Claude Code
@@ -646,8 +877,8 @@
             <li>Perfect when you're in a flow state</li>
           </ul>
         </div>
-        <div class="mode-card">
-          <div class="mode-badge badge-rogue">Roguelike Mode</div>
+        <div class="card mode-card">
+          <div class="mode-badge label-caps badge-rogue">Roguelike Mode</div>
           <h3>Pre-commit. Stakes. Permadeath.</h3>
           <p>
             Declare your quest, pick a budget, choose your class. Bust the
@@ -663,28 +894,10 @@
       </div>
     </section>
-    <!-- ── Screenshots ── -->
-    <section>
-      <h2><span>📸</span>In Action</h2>
-      <div class="screenshots-grid">
-        <div class="screenshot-item">
-          <img src="assets/demo-hud.png" alt="TokenGolf HUD — all game states" />
-          <div class="screenshot-label">
-            <strong>Live HUD</strong> — appears in every Claude Code session. Shows quest, cost, efficiency rating, context pressure, and model class. Run <code>tokengolf demo</code> to preview all states.
-          </div>
-        </div>
-        <div class="screenshot-item">
-          <img src="assets/scorecard.png" alt="TokenGolf scorecard — session complete" />
-          <div class="screenshot-label">
-            <strong>Auto Scorecard</strong> — appears on <code>/exit</code>. Real scorecard from building TokenGolf itself: $40 flow session, 27 ultrathink invocations, Class Defection for declaring Sonnet but spending 89% on Opus.
-          </div>
-        </div>
-      </div>
-    </section>
     <!-- ── Character Classes ── -->
-    <section>
+    <section id="classes">
       <h2><span>⚔️</span>Character Classes</h2>
+      <div class="classes-table-wrap">
       <table class="classes-table">
         <thead>
           <tr>
@@ -717,35 +930,283 @@
             <td class="difficulty-easy">Easy</td>
             <td>Powerful but expensive.</td>
           </tr>
+          <tr>
+            <td>
+              <span class="class-emoji">⚜️</span> <strong>Paladin</strong>
+            </td>
+            <td class="mono">claude-opus-4-6 (plan mode)</td>
+            <td class="difficulty-calculated">Calculated</td>
+            <td>Strategic planner. Thinks before acting.</td>
+          </tr>
         </tbody>
       </table>
+      </div>
+    </section>
+    <!-- ── In Action ── -->
+    <section id="in-action" class="in-action">
+      <h2><span>📸</span>In Action</h2>
+      <p class="section-sub">
+        Every screen TokenGolf renders in your terminal. Pick a tab to explore, or run <code>tokengolf demo</code> to see them all live.
+      </p>
+      <div class="tab-bar" role="tablist">
+        <button class="tab-btn" role="tab" id="tab-hud" aria-selected="true" aria-controls="panel-hud" data-panel="panel-hud">HUD</button>
+        <button class="tab-btn" role="tab" id="tab-scorecard" aria-selected="false" aria-controls="panel-scorecard" data-panel="panel-scorecard">ScoreCard</button>
+        <button class="tab-btn" role="tab" id="tab-status" aria-selected="false" aria-controls="panel-status" data-panel="panel-status">Status</button>
+        <button class="tab-btn" role="tab" id="tab-stats" aria-selected="false" aria-controls="panel-stats" data-panel="panel-stats">Stats</button>
+      </div>
+      <!-- ── HUD panel ── -->
+      <div class="tab-panel active" id="panel-hud" role="tabpanel" aria-labelledby="tab-hud">
+        <div class="demo-item">
+          <div class="term" data-glow="cyan">
+            <div class="term-header">tokengolf demo hud</div>
+            <pre>
+<span class="t-dim"> ───────────────</span>
+<span class="t-b t-cyan">⛳</span> Flow <span class="t-dim">|</span> 💎 $0.0034 <span class="t-dim">|</span> <span class="t-cyan">⚔️ Sonnet</span>
+<span class="t-dim"> ───────────────</span>
+<span class="t-dim"> ───────────────</span>
+<span class="t-b t-cyan">⛳</span> add pagination to /users <span class="t-dim">|</span> 🥈 $0.5400/$1.50 36% <span class="t-dim">|</span> <span class="t-cyan">EFFICIENT</span> <span class="t-dim">|</span> <span class="t-cyan">⚔️ Sonnet</span> <span class="t-dim">|</span> Floor 2/5
+<span class="t-dim"> ───────────────</span>
+<span class="t-dim"> ───────────────</span>
+<span class="t-b t-cyan">⛳</span> implement SSO with SAML <span class="t-dim">|</span> 🥈 $0.4100/$2.00 21% <span class="t-dim">|</span> <span class="t-magenta">LEGENDARY</span> <span class="t-dim">|</span> <span class="t-cyan">⚔️ Sonnet·High</span> <span class="t-dim">|</span> Floor 1/5
+<span class="t-dim"> ───────────────</span>
+<span class="t-dim"> ───────────────</span>
+<span class="t-b t-cyan">⛳</span> refactor auth middleware <span class="t-dim">|</span> 🥈 $0.8200/$4.00 21% <span class="t-dim">|</span> <span class="t-magenta">LEGENDARY</span> <span class="t-dim">|</span> <span class="t-green">🪶 52%</span> <span class="t-dim">|</span> <span class="t-cyan">🧙 Opus</span> <span class="t-dim">|</span> Floor 3/5
+<span class="t-dim"> ───────────────</span>
+<span class="t-dim"> ───────────────</span>
+<span class="t-b t-cyan">⛳</span> fix N+1 query in dashboard <span class="t-dim">|</span> 🥈 $0.4600/$0.50 92% <span class="t-dim">|</span> <span class="t-yellow">CLOSE CALL</span> <span class="t-dim">|</span> <span class="t-yellow">🎒 78%</span> <span class="t-dim">|</span> <span class="t-cyan">🏹 Haiku</span> <span class="t-dim">|</span> Floor 4/5
+<span class="t-dim"> ───────────────</span>
+<span class="t-dim"> ───────────────</span>
+<span class="t-b t-cyan">⛳</span> migrate postgres schema <span class="t-dim">|</span> 🥉 $2.4100/$2.00 121% <span class="t-dim">|</span> <span class="t-red">BUSTED</span> <span class="t-dim">|</span> <span class="t-cyan">⚔️ Sonnet</span> <span class="t-dim">|</span> Floor 2/5
+<span class="t-dim"> ───────────────</span>
+<span class="t-dim"> ───────────────</span>
+<span class="t-b t-cyan">💤</span> write test suite for payments <span class="t-dim">|</span> 🥉 $1.2200/$3.00 41% <span class="t-dim">|</span> <span class="t-cyan">EFFICIENT</span> <span class="t-dim">|</span> <span class="t-green">🪶 67%</span> <span class="t-dim">|</span> <span class="t-cyan">⚔️ Sonnet</span> <span class="t-dim">|</span> Floor 2/5
+<span class="t-dim"> ───────────────</span></pre>
+          </div>
+          <div class="demo-label">
+            <strong>Live HUD</strong> appears in every Claude Code session. Shows quest, cost, efficiency rating, context load, and model class at a glance.
+          </div>
+        </div>
+      </div>
+      <!-- ── ScoreCard panel ── -->
+      <div class="tab-panel" id="panel-scorecard" role="tabpanel" aria-labelledby="tab-scorecard">
+        <div class="demos-grid">
+          <div class="demo-item">
+            <div class="term" data-glow="yellow">
+              <div class="term-header">tokengolf scorecard — won</div>
+            <pre>
+<span class="border-yellow">╔══════════════════════════════════════════════════════╗</span>
+<span class="border-yellow">║</span>                                                      <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>  <span class="t-b t-yellow">🏆  SESSION COMPLETE</span>                               <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>                                                      <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>  <span class="t-b t-white">add pagination to /users endpoint</span>                  <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>                                                      <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>  <span class="t-dim">SPENT</span>      <span class="t-dim">BUDGET</span>    <span class="t-dim">USED</span>    <span class="t-dim">MODEL</span>     <span class="t-dim">TIER</span>     <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>  <span class="t-b t-green">$0.2300</span>    $1.50     <span class="t-green">15%</span>     <span class="t-cyan">⚔️ Sonnet</span>  <span class="t-yellow">🥇 Gold</span>  <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>                                                      <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>  <span class="t-b t-magenta">🌟 LEGENDARY</span>                                       <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>                                                      <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>  <span class="t-dim">Achievements unlocked:</span>                              <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>   <span class="t-yellow">🎯 Sniper — Under 25% budget</span>                       <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>   <span class="t-yellow">🥈 Silver — Completed with Sonnet</span>                  <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>   <span class="t-yellow">🔥 No Rest for the Wicked — One session</span>            <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>   <span class="t-yellow">✅ Clean Run — Zero failed tool calls</span>               <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>   <span class="t-yellow">🧰 Toolbox — 5+ distinct tool types</span>                <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>   <span class="t-yellow">🤫 Silent Run — No extended thinking</span>               <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>                                                      <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>  <span class="t-dim">Model usage:</span>  <span class="t-cyan">🏹 17% Haiku</span>                        <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>  <span class="t-muted">Sonnet</span> <span class="t-white">83%</span> <span class="t-dim">$0.19</span>   <span class="t-muted">Haiku</span> <span class="t-white">17%</span> <span class="t-dim">$0.04</span>          <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>                                                      <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>  <span class="t-dim">Tool calls:</span>                                        <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>  <span class="t-white">Read</span> ×8  <span class="t-white">Edit</span> ×4  <span class="t-white">Bash</span> ×3  <span class="t-white">Grep</span> ×2  <span class="t-white">Glob</span> ×1  <span class="border-yellow">║</span>
+<span class="border-yellow">║</span>                                                      <span class="border-yellow">║</span>
+<span class="border-yellow">╚══════════════════════════════════════════════════════╝</span></pre>
+          </div>
+            <div class="demo-label">
+              <strong>ScoreCard (Won)</strong> appears on <code>/exit</code>. Budget, tier, efficiency, achievements, model breakdown, and tool usage.
+            </div>
+          </div>
+          <div class="demo-item">
+            <div class="term" data-glow="red">
+              <div class="term-header">tokengolf scorecard — died</div>
+            <pre>
+<span class="border-red">╔══════════════════════════════════════════════════════╗</span>
+<span class="border-red">║</span>                                                      <span class="border-red">║</span>
+<span class="border-red">║</span>  <span class="t-b t-red">💀  BUDGET BUSTED</span>                                   <span class="border-red">║</span>
+<span class="border-red">║</span>                                                      <span class="border-red">║</span>
+<span class="border-red">║</span>  <span class="t-b t-white">migrate postgres schema to v3</span>                      <span class="border-red">║</span>
+<span class="border-red">║</span>                                                      <span class="border-red">║</span>
+<span class="border-red">║</span>  <span class="t-dim">SPENT</span>     <span class="t-dim">BUDGET</span>    <span class="t-dim">USED</span>    <span class="t-dim">MODEL</span>     <span class="t-dim">TIER</span>      <span class="border-red">║</span>
+<span class="border-red">║</span>  <span class="t-b t-red">$3.8700</span>   $1.50     <span class="t-red">258%</span>    <span class="t-cyan">⚔️ Sonnet</span>  💸 Reckless <span class="border-red">║</span>
+<span class="border-red">║</span>                                                      <span class="border-red">║</span>
+<span class="border-red">║</span>  <span class="t-b t-red">💀 BUSTED</span>                                           <span class="border-red">║</span>
+<span class="border-red">║</span>                                                      <span class="border-red">║</span>
+<span class="border-red">║</span>  <span class="t-dim">Achievements unlocked:</span>                              <span class="border-red">║</span>
+<span class="border-red">║</span>   <span class="t-yellow">🤦 Hubris — Ultrathink, busted anyway</span>              <span class="border-red">║</span>
+<span class="border-red">║</span>   <span class="t-yellow">💥 Blowout — Spent 2× budget</span>                       <span class="border-red">║</span>
+<span class="border-red">║</span>   <span class="t-yellow">🤡 Fumble — 5+ failed tool calls</span>                   <span class="border-red">║</span>
+<span class="border-red">║</span>   <span class="t-yellow">🔨 Tool Happy — 30+ tool calls, died</span>               <span class="border-red">║</span>
+<span class="border-red">║</span>   <span class="t-yellow">🍷 Expensive Taste — $0.50+/prompt</span>                 <span class="border-red">║</span>
+<span class="border-red">║</span>                                                      <span class="border-red">║</span>
+<span class="border-red">║</span>  <span class="t-dim">Extended thinking:</span>   <span class="t-magenta">🔮 2× invoked</span>                  <span class="border-red">║</span>
+<span class="border-red">║</span>                                                      <span class="border-red">║</span>
+<span class="border-red">║</span>  <span class="t-red">┌──────────────────────────────────────────────┐</span>    <span class="border-red">║</span>
+<span class="border-red">║</span>  <span class="t-red">│</span> <span class="t-b t-red">Cause of death:</span> Budget exceeded by $2.37    <span class="t-red">│</span>    <span class="border-red">║</span>
+<span class="border-red">║</span>  <span class="t-red">│</span> <span class="t-dim">Tip: Use Read with line ranges, not full.</span>   <span class="t-red">│</span>    <span class="border-red">║</span>
+<span class="border-red">║</span>  <span class="t-red">└──────────────────────────────────────────────┘</span>    <span class="border-red">║</span>
+<span class="border-red">║</span>                                                      <span class="border-red">║</span>
+<span class="border-red">╚══════════════════════════════════════════════════════╝</span></pre>
+          </div>
+            <div class="demo-label">
+              <strong>ScoreCard (Died)</strong> is permadeath. Budget exceeded = death marks. Hubris, Blowout, Fumble. Wear them with shame.
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- ── Status panel ── -->
+      <div class="tab-panel" id="panel-status" role="tabpanel" aria-labelledby="tab-status">
+        <div class="demo-item" style="max-width: 640px">
+          <div class="term" data-glow="yellow">
+            <div class="term-header">tokengolf status</div>
+            <pre>
+<span class="t-b t-yellow">⛳ TokenGolf</span>   <span class="t-muted">Active Run</span>  <span class="t-dim">42m 18s</span>
+<span class="border-yellow">╭──────────────────────────────────────────────────────╮</span>
+<span class="border-yellow">│</span>                                                      <span class="border-yellow">│</span>
+<span class="border-yellow">│</span> <span class="t-b t-white">refactor database connection pooling</span>                <span class="border-yellow">│</span>
+<span class="border-yellow">│</span>                                                      <span class="border-yellow">│</span>
+<span class="border-yellow">│</span> 🧙 <span class="t-cyan">Opus</span>   Budget <span class="t-green">$7.50</span>   Spent <span class="t-red">$6.3400</span>   <span class="t-yellow">😅 CLOSE CALL</span> <span class="border-yellow">│</span>
+<span class="border-yellow">│</span>                                                      <span class="border-yellow">│</span>
+<span class="border-yellow">│</span> 💰 <span class="t-red">████████████████████░░░░</span> <span class="t-red">85%</span>                    <span class="border-yellow">│</span>
+<span class="border-yellow">│</span>                                                      <span class="border-yellow">│</span>
+<span class="border-yellow">│</span> <span class="t-green">✓</span> <span class="t-green">Floor 1: Write the code</span>                         <span class="border-yellow">│</span>
+<span class="border-yellow">│</span> <span class="t-green">✓</span> <span class="t-green">Floor 2: Write the tests</span>                        <span class="border-yellow">│</span>
+<span class="border-yellow">│</span> <span class="t-yellow">▶</span> <span class="t-white">Floor 3: Fix failing tests</span>                      <span class="border-yellow">│</span>
+<span class="border-yellow">│</span> <span class="t-dim">○ Floor 4: Code review pass</span>                        <span class="border-yellow">│</span>
+<span class="border-yellow">│</span> <span class="t-dim">○ Floor 5: PR merged — BOSS 🏆</span>                     <span class="border-yellow">│</span>
+<span class="border-yellow">│</span>                                                      <span class="border-yellow">│</span>
+<span class="border-yellow">│</span> <span class="t-muted">Prompts</span> <span class="t-white">12</span>   <span class="t-muted">Tools</span> <span class="t-white">35</span>                              <span class="border-yellow">│</span>
+<span class="border-yellow">│</span>                                                      <span class="border-yellow">│</span>
+<span class="border-yellow">│</span> <span class="t-red">┌──────────────────────────────────────────────┐</span>    <span class="border-yellow">│</span>
+<span class="border-yellow">│</span> <span class="t-red">│</span> <span class="t-b t-red">⚠️ BUDGET WARNING — $1.16 left</span>                <span class="t-red">│</span>    <span class="border-yellow">│</span>
+<span class="border-yellow">│</span> <span class="t-red">└──────────────────────────────────────────────┘</span>    <span class="border-yellow">│</span>
+<span class="border-yellow">│</span>                                                      <span class="border-yellow">│</span>
+<span class="border-yellow">╰──────────────────────────────────────────────────────╯</span></pre>
+          </div>
+          <div class="demo-label">
+            <strong>Active Run</strong> shows live status with progress bar, floor tracker, and budget warning at 80%+. Auto-refreshes every 2 seconds.
+          </div>
+        </div>
+      </div>
+      <!-- ── Stats panel ── -->
+      <div class="tab-panel" id="panel-stats" role="tabpanel" aria-labelledby="tab-stats">
+        <div class="demo-item" style="max-width: 640px">
+          <div class="term" data-glow="green">
+            <div class="term-header">tokengolf stats</div>
+            <pre>
+<span class="t-b t-yellow">⛳ TokenGolf</span>   <span class="t-muted">Career Stats</span>
+<span class="border-gray">┌──────────────────────────────────────────────────────┐</span>
+<span class="border-gray">│</span>                                                      <span class="border-gray">│</span>
+<span class="border-gray">│</span> <span class="t-dim">RUNS</span>    <span class="t-dim">WINS</span>    <span class="t-dim">DEATHS</span>    <span class="t-dim">WIN RATE</span>    <span class="t-dim">AVG SPEND</span>  <span class="border-gray">│</span>
+<span class="border-gray">│</span> <span class="t-b t-white">24</span>      <span class="t-b t-green">18</span>      <span class="t-b t-red">6</span>         <span class="t-b t-green">75%</span>         <span class="t-b t-cyan">$1.4200</span>    <span class="border-gray">│</span>
+<span class="border-gray">│</span>                                                      <span class="border-gray">│</span>
+<span class="border-gray">└──────────────────────────────────────────────────────┘</span>
+<span class="t-yellow">🏆 Personal Best</span>
+<span class="border-yellow">╭──────────────────────────────────────────────────────╮</span>
+<span class="border-yellow">│</span> fix typo in README badge URL                        <span class="border-yellow">│</span>
+<span class="border-yellow">│</span> <span class="t-green">$0.0089</span>   <span class="t-muted">of $0.15</span>   🏹   <span class="t-cyan">💎 Diamond</span>              <span class="border-yellow">│</span>
+<span class="border-yellow">╰──────────────────────────────────────────────────────╯</span>
+<span class="t-dim">Recent runs:</span>
+<span class="t-green">✓</span>  add pagination to /users       <span class="t-green">$0.23</span>  <span class="t-muted">/$1.50</span>  ⚔️ <span class="t-yellow">🥇</span> <span class="t-dim">15%</span>
+<span class="t-green">✓</span>  refactor auth middleware       <span class="t-green">$3.41</span>  <span class="t-muted">/$7.50</span>  🧙 💸 <span class="t-dim">45%</span>
+<span class="t-red">✗</span>  migrate postgres schema        <span class="t-red">$3.87</span>  <span class="t-muted">/$1.50</span>  ⚔️ 💸 <span class="t-dim">258%</span>
+<span class="t-green">✓</span>  fix N+1 query                  <span class="t-green">$0.08</span>  <span class="t-muted">/$0.40</span>  🏹 <span class="t-cyan">💎</span> <span class="t-dim">20%</span>
+<span class="t-green">✓</span>  Flow                           <span class="t-green">$0.003</span>         ⚔️ <span class="t-cyan">💎</span>
+<span class="t-green">✓</span>  webhook retry system           <span class="t-green">$2.18</span>  <span class="t-muted">/$4.50</span>  ⚜️ <span class="t-yellow">🥉</span> <span class="t-dim">48%</span>
+<span class="t-red">✗</span>  rewrite billing module         <span class="t-red">$12.4</span>  <span class="t-muted">/$7.50</span>  🧙 💸 <span class="t-dim">165%</span>
+<span class="t-green">✓</span>  add dark mode toggle           <span class="t-green">$0.41</span>  <span class="t-muted">/$1.50</span>  ⚔️ <span class="t-white">🥈</span> <span class="t-dim">27%</span>
+<span class="t-dim">Recent achievements:</span>
+<span class="border-gray">┌───────────┐</span> <span class="border-gray">┌───────────┐</span> <span class="border-gray">┌────────────┐</span> <span class="border-gray">┌──────────────┐</span>
+<span class="border-gray">│</span> 🎯 Sniper <span class="border-gray">│</span> <span class="border-gray">│</span> 🥈 Silver <span class="border-gray">│</span> <span class="border-gray">│</span> 🔥 No Rest <span class="border-gray">│</span> <span class="border-gray">│</span> ✅ Clean Run  <span class="border-gray">│</span>
+<span class="border-gray">└───────────┘</span> <span class="border-gray">└───────────┘</span> <span class="border-gray">└────────────┘</span> <span class="border-gray">└──────────────┘</span>
+<span class="border-gray">┌────────────┐</span> <span class="border-gray">┌─────────────┐</span> <span class="border-gray">┌──────────────────┐</span>
+<span class="border-gray">│</span> 💎 Diamond <span class="border-gray">│</span> <span class="border-gray">│</span> 🥊 One Shot <span class="border-gray">│</span> <span class="border-gray">│</span> 🪙 Penny Pincher <span class="border-gray">│</span>
+<span class="border-gray">└────────────┘</span> <span class="border-gray">└─────────────┘</span> <span class="border-gray">└──────────────────┘</span></pre>
+          </div>
+          <div class="demo-label">
+            <strong>Career Stats</strong> is your lifetime dashboard. Wins, deaths, win rate, personal best, recent runs, and achievement collection.
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- ── Effort & Fast Mode ── -->
+    <section id="effort">
+      <h2><span>🔥</span>Effort Levels &amp; Fast Mode</h2>
+      <div class="modes-grid">
+        <div class="card mode-card">
+          <h3>Effort Levels</h3>
+          <p>Set effort in the roguelike wizard. Higher effort = more thinking = more spend. Tracked in achievements.</p>
+          <ul>
+            <li>🪶 <strong>Low</strong> · quick and cheap</li>
+            <li>⚖️ <strong>Medium</strong> · the default (omitted in UI)</li>
+            <li>🔥 <strong>High</strong> · deeper reasoning</li>
+            <li>💥 <strong>Max</strong> · Opus only, maximum thinking</li>
+          </ul>
+        </div>
+        <div class="card mode-card">
+          <h3>Fast Mode</h3>
+          <p>Opus fast mode is auto-detected from your Claude Code settings. Unlocks unique achievements:</p>
+          <ul>
+            <li>⛈️ <strong>Lightning Run</strong> · Opus fast mode, under budget</li>
+            <li>🎰 <strong>Daredevil</strong> · Opus fast mode, LEGENDARY efficiency</li>
+          </ul>
+        </div>
+      </div>
     </section>
     <!-- ── Budget Tiers ── -->
-    <section>
+    <section id="budget">
       <h2><span>💰</span>Budget Tiers</h2>
       <div class="tiers-grid">
-        <div class="tier-card">
+        <div class="card tier-card">
           <span class="tier-emoji">💎</span>
           <div class="tier-name">Diamond</div>
           <div class="tier-amount">under $0.10</div>
         </div>
-        <div class="tier-card">
+        <div class="card tier-card">
           <span class="tier-emoji">🥇</span>
           <div class="tier-name">Gold</div>
           <div class="tier-amount">under $0.30</div>
         </div>
-        <div class="tier-card">
+        <div class="card tier-card">
           <span class="tier-emoji">🥈</span>
           <div class="tier-name">Silver</div>
           <div class="tier-amount">under $1.00</div>
         </div>
-        <div class="tier-card">
+        <div class="card tier-card">
           <span class="tier-emoji">🥉</span>
           <div class="tier-name">Bronze</div>
           <div class="tier-amount">under $3.00</div>
         </div>
-        <div class="tier-card">
+        <div class="card tier-card">
           <span class="tier-emoji">💸</span>
           <div class="tier-name">Reckless</div>
           <div class="tier-amount">over $3.00</div>
@@ -754,274 +1215,370 @@
     </section>
     <!-- ── Meta Loop ── -->
-    <section>
+    <section id="meta">
       <h2><span>🔄</span>The Meta Loop</h2>
-      <p style="color:var(--muted);font-size:1rem;line-height:1.75;max-width:680px;margin-bottom:1.5rem;">
-        The dungeon crawl framing maps directly to real session behaviors. These aren't just flavor — they're patterns you already have, named so you can recognize and improve them.
+      <p class="section-sub">
+        The dungeon crawl framing maps directly to real session behaviors. Not just flavor. Patterns you already have, named so you can recognize and improve them.
       </p>
       <div class="modes-grid" style="grid-template-columns:repeat(auto-fill,minmax(280px,1fr));">
-        <div class="mode-card">
+        <div class="card mode-card">
           <h3>📦 Overencumbered</h3>
           <p>Context bloat slowing you down. The model is carrying too much history to reason cleanly.</p>
         </div>
-        <div class="mode-card">
+        <div class="card mode-card">
           <h3>🏕️ Made Camp</h3>
           <p>Hit usage limits mid-run. Came back next session and kept going.</p>
         </div>
-        <div class="mode-card">
+        <div class="card mode-card">
           <h3>🥷 Ghost Run</h3>
           <p>Surgical context management. You compacted at 30% and still had plenty of room for the boss.</p>
         </div>
-        <div class="mode-card">
+        <div class="card mode-card">
           <h3>🤦 Hubris</h3>
           <p>Reached for ultrathink on a tight budget and paid for it. The spell didn't save you.</p>
         </div>
-        <div class="mode-card">
+        <div class="card mode-card">
           <h3>🤫 Silent Run</h3>
           <p>Solved it with pure prompting discipline. No extended thinking needed.</p>
         </div>
-        <div class="mode-card">
+        <div class="card mode-card">
           <h3>🐺 Lone Wolf</h3>
           <p>No subagents. You held the whole problem in one context and saw it through.</p>
         </div>
       </div>
-      <p style="color:var(--muted);font-size:0.95rem;line-height:1.75;max-width:680px;margin-top:1.5rem;">
-        Roguelike mode surfaces these patterns with stakes. Flow mode lets them compound over time. <strong style="color:var(--text);">Roguelike practice makes Flow sessions better. Better Flow = lower daily spend = better scores without even trying.</strong>
+      <p class="section-prose" style="margin-top:1.5rem;">
+        Roguelike mode surfaces these patterns with stakes. Flow mode lets them compound over time. <strong>Roguelike practice makes Flow sessions better. Better Flow = lower daily spend = better scores without even trying.</strong>
       </p>
     </section>
     <!-- ── Achievements ── -->
-    <section>
+    <section id="achievements">
       <h2><span>🏆</span>Achievements</h2>
-      <div class="achievements-grid">
-        <div class="achievement-category">Class</div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">💎</div>
-          <div class="achievement-info"><h4>Diamond</h4><p>Haiku run under $0.10</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🥇</div>
-          <div class="achievement-info"><h4>Gold</h4><p>Completed with Haiku</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🥈</div>
-          <div class="achievement-info"><h4>Silver</h4><p>Completed with Sonnet</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🥉</div>
-          <div class="achievement-info"><h4>Bronze</h4><p>Completed with Opus</p></div>
-        </div>
+      <p class="section-sub">60+ achievements across 5 categories. Every session tells a story.</p>
+      <div class="tab-bar" role="tablist">
+        <button class="tab-btn" role="tab" id="tab-ach-class" aria-selected="true" aria-controls="ach-class" data-panel="ach-class">Class &amp; Efficiency</button>
+        <button class="tab-btn" role="tab" id="tab-ach-combat" aria-selected="false" aria-controls="ach-combat" data-panel="ach-combat">Combat Style</button>
+        <button class="tab-btn" role="tab" id="tab-ach-endurance" aria-selected="false" aria-controls="ach-endurance" data-panel="ach-endurance">Endurance</button>
+        <button class="tab-btn" role="tab" id="tab-ach-arcane" aria-selected="false" aria-controls="ach-arcane" data-panel="ach-arcane">Arcane</button>
+        <button class="tab-btn tab-death" role="tab" id="tab-ach-death" aria-selected="false" aria-controls="ach-death" data-panel="ach-death">Death Marks</button>
+      </div>
-        <div class="achievement-category">Efficiency</div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🎯</div>
-          <div class="achievement-info"><h4>Sniper</h4><p>Under 25% of budget used</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">⚡</div>
-          <div class="achievement-info"><h4>Efficient</h4><p>Under 50% of budget used</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🪙</div>
-          <div class="achievement-info"><h4>Penny Pincher</h4><p>Total spend under $0.10</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">💲</div>
-          <div class="achievement-info"><h4>Cheap Shots</h4><p>Under $0.01 per prompt (≥3 prompts)</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🍷</div>
-          <div class="achievement-info"><h4>Expensive Taste</h4><p>Over $0.50 per prompt — won or died</p></div>
-        </div>
+      <!-- Class & Efficiency -->
+      <div class="tab-panel active" id="ach-class" role="tabpanel" aria-labelledby="tab-ach-class">
+        <div class="achievements-grid">
+          <div class="ach-sub label-caps">Class Medals</div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">💎</div>
+            <div class="achievement-info"><h4>Diamond</h4><p>Haiku run under $0.10</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🥇</div>
+            <div class="achievement-info"><h4>Gold</h4><p>Completed with Haiku</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🥈</div>
+            <div class="achievement-info"><h4>Silver</h4><p>Completed with Sonnet</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🥉</div>
+            <div class="achievement-info"><h4>Bronze</h4><p>Completed with Opus</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">⚜️</div>
+            <div class="achievement-info"><h4>Paladin</h4><p>Completed as Paladin (Opus plan mode)</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">♟️</div>
+            <div class="achievement-info"><h4>Grand Strategist</h4><p>LEGENDARY efficiency as Paladin</p></div>
+          </div>
-        <div class="achievement-category">Prompting Skill</div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🥊</div>
-          <div class="achievement-info"><h4>One Shot</h4><p>Completed in a single prompt</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">💬</div>
-          <div class="achievement-info"><h4>Conversationalist</h4><p>20+ prompts in one run</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🤐</div>
-          <div class="achievement-info"><h4>Terse</h4><p>≤3 prompts, ≥10 tool calls</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🪑</div>
-          <div class="achievement-info"><h4>Backseat Driver</h4><p>15+ prompts, less than 1 tool call per prompt</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🏗️</div>
-          <div class="achievement-info"><h4>High Leverage</h4><p>5+ tool calls per prompt (≥2 prompts)</p></div>
-        </div>
+          <div class="ach-sub label-caps">Budget Efficiency</div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🎯</div>
+            <div class="achievement-info"><h4>Sniper</h4><p>Under 25% of budget used</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">⚡</div>
+            <div class="achievement-info"><h4>Efficient</h4><p>Under 50% of budget used</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🪙</div>
+            <div class="achievement-info"><h4>Penny Pincher</h4><p>Total spend under $0.10</p></div>
+          </div>
-        <div class="achievement-category">Tool Mastery</div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">👁️</div>
-          <div class="achievement-info"><h4>Read Only</h4><p>Won with no Edit or Write calls</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">✏️</div>
-          <div class="achievement-info"><h4>Editor</h4><p>10+ Edit calls in one run</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🐚</div>
-          <div class="achievement-info"><h4>Bash Warrior</h4><p>10+ Bash calls comprising ≥50% of tools</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🔍</div>
-          <div class="achievement-info"><h4>Scout</h4><p>≥60% of tool calls were Reads (≥5 total)</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🔪</div>
-          <div class="achievement-info"><h4>Surgeon</h4><p>1–3 Edit calls, completed under budget</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🧰</div>
-          <div class="achievement-info"><h4>Toolbox</h4><p>5+ distinct tools used in one run</p></div>
-        </div>
+          <div class="ach-sub label-caps">Cost per Prompt</div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">💲</div>
+            <div class="achievement-info"><h4>Cheap Shots</h4><p>Under $0.01 per prompt (≥3 prompts)</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🍷</div>
+            <div class="achievement-info"><h4>Expensive Taste</h4><p>Over $0.50 per prompt (won or died)</p></div>
+          </div>
-        <div class="achievement-category">Time</div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">⏱️</div>
-          <div class="achievement-info"><h4>Speedrun</h4><p>Completed in under 5 minutes</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🏃</div>
-          <div class="achievement-info"><h4>Marathon</h4><p>Session over 60 minutes</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🫠</div>
-          <div class="achievement-info"><h4>Endurance</h4><p>Session over 3 hours</p></div>
+          <div class="ach-sub label-caps">Effort-Based</div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🏎️</div>
+            <div class="achievement-info"><h4>Speedrunner</h4><p>Low effort, completed under budget</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🏋️</div>
+            <div class="achievement-info"><h4>Tryhard</h4><p>High/Max effort, LEGENDARY efficiency</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">👑</div>
+            <div class="achievement-info"><h4>Archmagus</h4><p>Opus at max effort, completed</p></div>
+          </div>
         </div>
+      </div>
-        <div class="achievement-category">Extended Thinking</div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🔮</div>
-          <div class="achievement-info"><h4>Spell Cast</h4><p>Used extended thinking in a won run</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🧮</div>
-          <div class="achievement-info"><h4>Calculated Risk</h4><p>Extended thinking + LEGENDARY efficiency</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🌀</div>
-          <div class="achievement-info"><h4>Deep Thinker</h4><p>3+ thinking invocations, completed under budget</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🤫</div>
-          <div class="achievement-info"><h4>Silent Run</h4><p>No extended thinking, SOLID or better</p></div>
-        </div>
+      <!-- Combat Style -->
+      <div class="tab-panel" id="ach-combat" role="tabpanel" aria-labelledby="tab-ach-combat">
+        <div class="achievements-grid">
+          <div class="ach-sub label-caps">Prompting Skill</div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🥊</div>
+            <div class="achievement-info"><h4>One Shot</h4><p>Completed in a single prompt</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">💬</div>
+            <div class="achievement-info"><h4>Conversationalist</h4><p>20+ prompts in one run</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🤐</div>
+            <div class="achievement-info"><h4>Terse</h4><p>≤3 prompts, ≥10 tool calls</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🪑</div>
+            <div class="achievement-info"><h4>Backseat Driver</h4><p>15+ prompts, less than 1 tool call per prompt</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🏗️</div>
+            <div class="achievement-info"><h4>High Leverage</h4><p>5+ tool calls per prompt (≥2 prompts)</p></div>
+          </div>
-        <div class="achievement-category">Multi-Model</div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🏹</div>
-          <div class="achievement-info"><h4>Frugal</h4><p>Haiku handled ≥50% of session cost</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🎲</div>
-          <div class="achievement-info"><h4>Rogue Run</h4><p>Haiku handled ≥75% of session cost</p></div>
-        </div>
+          <div class="ach-sub label-caps">Tool Mastery</div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">👁️</div>
+            <div class="achievement-info"><h4>Read Only</h4><p>Won with no Edit or Write calls</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">✏️</div>
+            <div class="achievement-info"><h4>Editor</h4><p>10+ Edit calls in one run</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🐚</div>
+            <div class="achievement-info"><h4>Bash Warrior</h4><p>10+ Bash calls comprising ≥50% of tools</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🔍</div>
+            <div class="achievement-info"><h4>Scout</h4><p>≥60% of tool calls were Reads (≥5 total)</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🔪</div>
+            <div class="achievement-info"><h4>Surgeon</h4><p>1–3 Edit calls, completed under budget</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🧰</div>
+            <div class="achievement-info"><h4>Toolbox</h4><p>5+ distinct tools used in one run</p></div>
+          </div>
-        <div class="achievement-category">Rest &amp; Recovery</div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🔥</div>
-          <div class="achievement-info"><h4>No Rest for the Wicked</h4><p>Completed in one session</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🏕️</div>
-          <div class="achievement-info"><h4>Made Camp</h4><p>Completed across multiple sessions</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🧟</div>
-          <div class="achievement-info"><h4>Came Back</h4><p>Fainted (hit usage limits) and finished anyway</p></div>
-        </div>
+          <div class="ach-sub label-caps">Tool Reliability</div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">✅</div>
+            <div class="achievement-info"><h4>Clean Run</h4><p>Zero failed tool calls (≥5 tool calls total)</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🐂</div>
+            <div class="achievement-info"><h4>Stubborn</h4><p>10+ failed tool calls and still won</p></div>
+          </div>
-        <div class="achievement-category">Context Management</div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">📦</div>
-          <div class="achievement-info"><h4>Overencumbered</h4><p>Context auto-compacted during a won run</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🎒</div>
-          <div class="achievement-info"><h4>Traveling Light</h4><p>Manual compact at ≤50% context</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🪶</div>
-          <div class="achievement-info"><h4>Ultralight</h4><p>Manual compact at ≤40% context</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🥷</div>
-          <div class="achievement-info"><h4>Ghost Run</h4><p>Manual compact at ≤30% context</p></div>
+          <div class="ach-sub label-caps">Turn Discipline</div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🤖</div>
+            <div class="achievement-info"><h4>Agentic</h4><p>3+ Claude turns per user prompt</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🐕</div>
+            <div class="achievement-info"><h4>Obedient</h4><p>Exactly one turn per prompt (≥3 prompts)</p></div>
+          </div>
         </div>
+      </div>
-        <div class="achievement-category">Tool Reliability</div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">✅</div>
-          <div class="achievement-info"><h4>Clean Run</h4><p>Zero failed tool calls (≥5 tool calls total)</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🐂</div>
-          <div class="achievement-info"><h4>Stubborn</h4><p>10+ failed tool calls and still won</p></div>
-        </div>
+      <!-- Endurance -->
+      <div class="tab-panel" id="ach-endurance" role="tabpanel" aria-labelledby="tab-ach-endurance">
+        <div class="achievements-grid">
+          <div class="ach-sub label-caps">Time</div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">⏱️</div>
+            <div class="achievement-info"><h4>Speedrun</h4><p>Completed in under 5 minutes</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🏃</div>
+            <div class="achievement-info"><h4>Marathon</h4><p>Session 60–180 minutes</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🫠</div>
+            <div class="achievement-info"><h4>Endurance</h4><p>Session over 3 hours</p></div>
+          </div>
-        <div class="achievement-category">Subagents</div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🐺</div>
-          <div class="achievement-info"><h4>Lone Wolf</h4><p>Completed with no subagents spawned</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">📡</div>
-          <div class="achievement-info"><h4>Summoner</h4><p>5+ subagents spawned in one run</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🪖</div>
-          <div class="achievement-info"><h4>Army of One</h4><p>10+ subagents spawned, under 50% budget used</p></div>
-        </div>
+          <div class="ach-sub label-caps">Rest &amp; Recovery</div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🔥</div>
+            <div class="achievement-info"><h4>No Rest for the Wicked</h4><p>Completed in one session</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🏕️</div>
+            <div class="achievement-info"><h4>Made Camp</h4><p>Completed across multiple sessions</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🧟</div>
+            <div class="achievement-info"><h4>Came Back</h4><p>Fainted (hit usage limits) and finished anyway</p></div>
+          </div>
-        <div class="achievement-category">Turn Discipline</div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🤖</div>
-          <div class="achievement-info"><h4>Agentic</h4><p>3+ Claude turns per user prompt</p></div>
-        </div>
-        <div class="achievement-card">
-          <div class="achievement-emoji">🐕</div>
-          <div class="achievement-info"><h4>Obedient</h4><p>Exactly one turn per prompt (≥3 prompts)</p></div>
+          <div class="ach-sub label-caps">Context Management</div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">📦</div>
+            <div class="achievement-info"><h4>Overencumbered</h4><p>Context auto-compacted during a won run</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🎒</div>
+            <div class="achievement-info"><h4>Traveling Light</h4><p>Manual compact at 41–50% context</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🪶</div>
+            <div class="achievement-info"><h4>Ultralight</h4><p>Manual compact at 31–40% context</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🥷</div>
+            <div class="achievement-info"><h4>Ghost Run</h4><p>Manual compact at ≤30% context</p></div>
+          </div>
         </div>
+      </div>
-        <div class="achievement-category" style="color:var(--red);">Death Marks</div>
-        <div class="achievement-card death">
-          <div class="achievement-emoji">🤦</div>
-          <div class="achievement-info"><h4>Hubris</h4><p>Used extended thinking, busted anyway</p></div>
-        </div>
-        <div class="achievement-card death">
-          <div class="achievement-emoji">💥</div>
-          <div class="achievement-info"><h4>Blowout</h4><p>Spent 2× your committed budget</p></div>
-        </div>
-        <div class="achievement-card death">
-          <div class="achievement-emoji">😭</div>
-          <div class="achievement-info"><h4>So Close</h4><p>Died within 10% of budget</p></div>
-        </div>
-        <div class="achievement-card death">
-          <div class="achievement-emoji">🔨</div>
-          <div class="achievement-info"><h4>Tool Happy</h4><p>Died with 30+ tool calls</p></div>
-        </div>
-        <div class="achievement-card death">
-          <div class="achievement-emoji">🪦</div>
-          <div class="achievement-info"><h4>Silent Death</h4><p>Died with ≤2 prompts</p></div>
+      <!-- Arcane -->
+      <div class="tab-panel" id="ach-arcane" role="tabpanel" aria-labelledby="tab-ach-arcane">
+        <div class="achievements-grid">
+          <div class="ach-sub label-caps">Extended Thinking</div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🔮</div>
+            <div class="achievement-info"><h4>Spell Cast</h4><p>Used extended thinking in a won run</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🧮</div>
+            <div class="achievement-info"><h4>Calculated Risk</h4><p>Extended thinking + LEGENDARY efficiency</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🌀</div>
+            <div class="achievement-info"><h4>Deep Thinker</h4><p>3+ thinking invocations, completed under budget</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🤫</div>
+            <div class="achievement-info"><h4>Silent Run</h4><p>No extended thinking, SOLID or better</p></div>
+          </div>
+          <div class="ach-sub label-caps">Multi-Model</div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🏹</div>
+            <div class="achievement-info"><h4>Frugal</h4><p>Haiku handled ≥50% of session cost</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🎲</div>
+            <div class="achievement-info"><h4>Rogue Run</h4><p>Haiku handled ≥75% of session cost</p></div>
+          </div>
+          <div class="ach-sub label-caps">Paladin Planning Ratio</div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🏛️</div>
+            <div class="achievement-info"><h4>Architect</h4><p>Opus handled &gt;60% of cost (heavy planner)</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">💨</div>
+            <div class="achievement-info"><h4>Blitz</h4><p>Opus handled &lt;25% of cost (light plan, fast execution)</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">⚖️</div>
+            <div class="achievement-info"><h4>Equilibrium</h4><p>Opus/Sonnet balanced at 40–60%</p></div>
+          </div>
+          <div class="ach-sub label-caps">Model Loyalty</div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🔷</div>
+            <div class="achievement-info"><h4>Purist</h4><p>Single model family throughout</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🦎</div>
+            <div class="achievement-info"><h4>Chameleon</h4><p>Multiple model families used, under budget</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🔀</div>
+            <div class="achievement-info"><h4>Tactical Switch</h4><p>Exactly 1 model switch, under budget</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🔒</div>
+            <div class="achievement-info"><h4>Committed</h4><p>No switches, one model family</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">⚠️</div>
+            <div class="achievement-info"><h4>Class Defection</h4><p>Declared one class but cost skewed to another</p></div>
+          </div>
+          <div class="ach-sub label-caps">Subagents</div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🐺</div>
+            <div class="achievement-info"><h4>Lone Wolf</h4><p>Completed with no subagents spawned</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">📡</div>
+            <div class="achievement-info"><h4>Summoner</h4><p>5+ subagents spawned in one run</p></div>
+          </div>
+          <div class="card achievement-card">
+            <div class="achievement-emoji">🪖</div>
+            <div class="achievement-info"><h4>Army of One</h4><p>10+ subagents spawned, under 50% budget used</p></div>
+          </div>
         </div>
-        <div class="achievement-card death">
-          <div class="achievement-emoji">🤡</div>
-          <div class="achievement-info"><h4>Fumble</h4><p>Died with 5+ failed tool calls</p></div>
+      </div>
+      <!-- Death Marks -->
+      <div class="tab-panel" id="ach-death" role="tabpanel" aria-labelledby="tab-ach-death">
+        <div class="achievements-grid">
+          <div class="card achievement-card death">
+            <div class="achievement-emoji">🤦</div>
+            <div class="achievement-info"><h4>Hubris</h4><p>Used extended thinking, busted anyway</p></div>
+          </div>
+          <div class="card achievement-card death">
+            <div class="achievement-emoji">💥</div>
+            <div class="achievement-info"><h4>Blowout</h4><p>Spent 2× your committed budget</p></div>
+          </div>
+          <div class="card achievement-card death">
+            <div class="achievement-emoji">😭</div>
+            <div class="achievement-info"><h4>So Close</h4><p>Died within 10% of budget</p></div>
+          </div>
+          <div class="card achievement-card death">
+            <div class="achievement-emoji">🔨</div>
+            <div class="achievement-info"><h4>Tool Happy</h4><p>Died with 30+ tool calls</p></div>
+          </div>
+          <div class="card achievement-card death">
+            <div class="achievement-emoji">🪦</div>
+            <div class="achievement-info"><h4>Silent Death</h4><p>Died with ≤2 prompts</p></div>
+          </div>
+          <div class="card achievement-card death">
+            <div class="achievement-emoji">🤡</div>
+            <div class="achievement-info"><h4>Fumble</h4><p>Died with 5+ failed tool calls</p></div>
+          </div>
+          <div class="card achievement-card death">
+            <div class="achievement-emoji">🎲</div>
+            <div class="achievement-info"><h4>Indecisive</h4><p>3+ model switches (won or died)</p></div>
+          </div>
         </div>
       </div>
     </section>
     <!-- ── CLI Commands ── -->
-    <section>
+    <section id="cli">
       <h2><span>⌨️</span>CLI Commands</h2>
-      <div class="cli-block">
+      <div class="card cli-block">
         <div class="cli-block-header">terminal</div>
         <pre>
 <span class="comment"># Install</span>
@@ -1057,6 +1614,28 @@
     </footer>
     <script>
+      /* ── Generic tab switcher (works for any .tab-bar) ── */
+      document.querySelectorAll(".tab-bar").forEach((bar) => {
+        const tabs = bar.querySelectorAll(".tab-btn");
+        tabs.forEach((tab) => {
+          tab.addEventListener("click", () => {
+            tabs.forEach((t) => t.setAttribute("aria-selected", "false"));
+            tab.setAttribute("aria-selected", "true");
+            const section = bar.closest("section");
+            section.querySelectorAll(".tab-panel").forEach((p) => {
+              p.classList.remove("active");
+            });
+            const panel = document.getElementById(tab.dataset.panel);
+            if (panel) {
+              panel.classList.add("active");
+              panel.style.animation = "none";
+              panel.offsetHeight;
+              panel.style.animation = "";
+            }
+          });
+        });
+      });
       function copyInstall() {
         const cmd = document.getElementById("install-cmd").value;
         const btn = document.getElementById("copy-btn");