Polish live mode and slop pages

site/pages/live-mode/index.astro

@@ -17,8 +17,7 @@ import '../../styles/live-mode-kinpaku.css';
 
 <div class="live-mode-page">
   <header class="live-mode-page-header">
-    <p class="live-mode-page-eyebrow">New in v3.0 <span class="live-mode-page-eyebrow-badge">Beta</span></p>
-    <h1 class="live-mode-page-title">Live Mode</h1>
+    <h1 class="live-mode-page-title">Live Mode <span class="live-mode-page-title-badge">Beta</span></h1>
     <p class="live-mode-page-lede">Pick any element in the browser. Drop a comment or a stroke. Three production-quality variants swap in via your framework's HMR. Accept the one you want and it writes back to source.</p>
     <div class="live-mode-start" aria-label="Start live mode command">
       <span class="live-mode-start-prompt">$</span>
@@ -181,11 +180,11 @@ import '../../styles/live-mode-kinpaku.css';
         <span class="live-mode-stage-num">02 &middot; Generate</span>
         <h3 class="live-mode-stage-name">Three genuinely different takes</h3>
         <p class="live-mode-stage-desc">Variants anchor to different archetypes, not three riffs on color. Each one explores a different primary axis: hierarchy, typography, density, layout, or palette strategy.</p>
-        <div class="live-mode-stage-viz">
-          <div class="docs-viz-variants" style="width:100%;gap:4px">
-            <div class="docs-viz-variant docs-viz-variant--v1" style="min-height:44px;padding:6px"><span class="docs-viz-variant-kicker" style="font-size:8px">No.04</span></div>
-            <div class="docs-viz-variant docs-viz-variant--v2 is-active" style="min-height:44px;padding:6px"><span class="docs-viz-variant-kicker" style="font-size:8px">Dispatch</span></div>
-            <div class="docs-viz-variant docs-viz-variant--v3" style="min-height:44px;padding:6px"><span class="docs-viz-variant-kicker" style="font-size:8px">Field</span></div>
+        <div class="live-mode-stage-viz live-mode-stage-viz--rail">
+          <div class="viz-rail">
+            <div class="viz-rail-cell"><span>No.04</span><span class="viz-rail-mark"></span></div>
+            <div class="viz-rail-cell is-active"><span>Dispatch</span><span class="viz-rail-mark"></span></div>
+            <div class="viz-rail-cell"><span>Field</span><span class="viz-rail-mark"></span></div>
           </div>
         </div>
       </article>
@@ -226,14 +225,14 @@ import '../../styles/live-mode-kinpaku.css';
 
   <section class="live-mode-frameworks" aria-label="Supported frameworks">
     <span class="live-mode-frameworks-label">Supported dev servers</span>
-    <ul class="live-mode-frameworks-list">
-      <li>Vite</li>
-      <li>Next.js (incl. monorepos)</li>
-      <li>SvelteKit</li>
-      <li>Astro</li>
-      <li>Nuxt</li>
-      <li>Bun</li>
-      <li>Plain static HTML</li>
+    <ul class="live-mode-frameworks-list framework-list--matrix">
+      <li><small>bundler</small><strong>Vite</strong></li>
+      <li><small>apps</small><strong>Next.js</strong></li>
+      <li><small>apps</small><strong>SvelteKit</strong></li>
+      <li><small>pages</small><strong>Astro</strong></li>
+      <li><small>apps</small><strong>Nuxt</strong></li>
+      <li><small>runtime</small><strong>Bun</strong></li>
+      <li><small>static</small><strong>Plain HTML</strong></li>
     </ul>
   </section>
 </div>

site/pages/slop/index.astro

@@ -47,7 +47,6 @@ import '../../styles/slop-kinpaku.css';
 
 <div class="anti-patterns-content slop-content">
   <header class="anti-patterns-header slop-header">
-    <p class="sub-page-eyebrow">The visible tells of AI design</p>
     <h1 class="sub-page-title">Slop</h1>
     <p class="sub-page-lede">46 patterns that mark an interface as AI-generated, and the detection overlay that catches them in place. Watch it flag them live, try it on 11 synthetic specimens, or browse the full catalog. 41 rules run deterministically (<code>npx impeccable detect</code> or the browser extension), 4 of them opt-in provider tells behind <code>--gpt</code> / <code>--gemini</code>; 5 need <a href="/docs/critique">/impeccable critique</a>'s LLM review pass.</p>
   </header>
@@ -56,7 +55,7 @@ import '../../styles/slop-kinpaku.css';
     <h2 class="slop-section-heading">See it</h2>
     <div class="slop-then-now-intro">
     <p class="slop-then-now-lede">Every wave of AI-generated UIs converges on a recognizable aesthetic. The detector catches both. The patterns just change.</p>
-    <div class="slop-era-toggle" role="tablist" aria-label="Select slop era">
+    <div class="slop-era-toggle slop-era-toggle--ink" role="tablist" aria-label="Select slop era">
       <button class="slop-era-tab is-active" role="tab" aria-selected="true" data-era="2022">2022</button>
       <button class="slop-era-tab" role="tab" aria-selected="false" data-era="2026">2026</button>
     </div>