diff --git a/examples/advanced/corruption-manager.html b/examples/advanced/corruption-manager.html
index a77ad05..9225edb 100644
--- a/examples/advanced/corruption-manager.html
+++ b/examples/advanced/corruption-manager.html
@@ -3,58 +3,74 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>CorruptionManager · corrupted-theme</title>
+  <title>Corruption Manager - Corrupted Theme</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
   <link rel="stylesheet" href="../../src/css/theme.css">
   <style>
-    body {
-      margin: 0;
-      padding: 2rem;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      font-family: 'Courier New', monospace;
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: var(--spacing-lg);
     }
 
-    .page-header {
-      text-align: center;
-      margin-bottom: 2.5rem;
+    .example-group {
+      margin-bottom: var(--spacing-2xl);
+      background: var(--glass);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-lg);
     }
 
-    .page-header h1 {
-      color: var(--corrupted-cyan);
-      text-shadow: 0 0 20px var(--corrupted-cyan);
-      font-size: 1.8rem;
-      margin-bottom: 0.5rem;
+    .example-group h3 {
+      color: var(--accent);
+      margin-bottom: var(--spacing-lg);
+      font-size: 1.25rem;
     }
 
-    .page-header p {
-      color: var(--text-muted);
-      font-size: 0.85rem;
+    .demo-area {
+      padding: var(--spacing-lg);
+      background: var(--bg-secondary);
+      border-radius: var(--radius-md);
+      margin-block: var(--spacing-md);
     }
 
-    .back-link {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.4rem;
-      color: var(--corrupted-cyan);
-      text-decoration: none;
-      font-size: 0.85rem;
-      margin-bottom: 2rem;
+    .code-block {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-md);
+      margin-top: var(--spacing-md);
+      font-family: 'Courier New', monospace;
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+      overflow-x: auto;
+    }
+
+    .code-block pre {
+      margin: 0;
+      font-size: 0.75rem;
+      color: var(--text-secondary);
+      line-height: 1.5;
     }
 
-    .back-link:hover { opacity: 0.7; }
+    .controls {
+      display: flex;
+      gap: var(--spacing-sm);
+      flex-wrap: wrap;
+      margin-block: var(--spacing-md);
+    }
 
-    /* ── Three demo sections ─────────────────────────────────────────────── */
+    /* ── Three demo cards ─────────────────────────────────────────────── */
 
     .demo-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
       gap: 1.5rem;
-      margin-bottom: 2rem;
+      margin-block: var(--spacing-md);
     }
 
     .demo-card {
-      background: var(--glass);
+      background: var(--glass-darker);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       overflow: hidden;
@@ -68,10 +84,10 @@
       border-bottom: 1px solid var(--border);
     }
 
-    .demo-card__header h2 {
+    .demo-card__header h4 {
       margin: 0;
       font-size: 0.9rem;
-      color: var(--corrupted-cyan);
+      color: var(--accent);
       text-transform: uppercase;
       letter-spacing: 0.1em;
     }
@@ -95,6 +111,7 @@
       letter-spacing: 2px;
       word-break: break-all;
       text-align: center;
+      font-family: 'Courier New', monospace;
     }
 
     .demo-card__footer {
@@ -109,127 +126,114 @@
       font-size: 0.78rem;
       padding: 0.3rem 0.8rem;
     }
-
-    /* ── Manager-level controls ──────────────────────────────────────────── */
-
-    .manager-controls {
-      background: var(--glass);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-lg);
-      padding: var(--spacing-lg);
-      margin-bottom: 2rem;
-    }
-
-    .manager-controls h3 {
-      color: var(--accent);
-      font-size: 0.85rem;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      margin: 0 0 var(--spacing-md);
-    }
-
-    .manager-controls .btn-row {
-      display: flex;
-      gap: 0.5rem;
-      flex-wrap: wrap;
-    }
-
-    /* ── Code block ─────────────────────────────────────────────────────── */
-
-    .code-block {
-      background: var(--glass);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-lg);
-      padding: var(--spacing-lg);
-    }
-
-    .code-block h3 {
-      color: var(--accent);
-      font-size: 0.8rem;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      margin: 0 0 var(--spacing-md);
-    }
-
-    .code-block pre {
-      margin: 0;
-      overflow-x: auto;
-      font-size: 0.75rem;
-      color: var(--corrupted-cyan);
-      line-height: 1.5;
-    }
   </style>
 </head>
 <body>
-
-  <a href="../index.html" class="back-link"><i class="fas fa-arrow-left"></i> Examples home</a>
-
-  <div class="page-header">
-    <h1><i class="fas fa-brain"></i> CorruptionManager</h1>
-    <p>Unified lifecycle manager for the three canonical corruption patterns — <code>src/core/corruption-manager.js</code></p>
-  </div>
-
-  <!-- Manager-level stop/destroy -->
-  <div class="manager-controls">
-    <h3><i class="fas fa-layer-group"></i> Manager</h3>
-    <div class="btn-row">
-      <button class="btn" id="btn-stop-all">Stop All</button>
-      <button class="btn" id="btn-destroy-manager">Destroy Manager</button>
-      <button class="btn" id="btn-recreate-manager">Re-create Manager</button>
+  <!-- Global Navigation -->
+  <nav class="navbar">
+    <div class="navbar-content">
+      <a href="../index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
+      <ul class="navbar-links">
+        <li><a href="../index.html"><i class="fas fa-home"></i> Home</a></li>
+        <li><a href="../showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
+        <li><a href="../extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
+        <li class="has-submenu">
+          <a href="#" class="active">
+            <i class="fas fa-flask"></i> Examples
+            <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
+          </a>
+          <div class="submenu">
+            <a href="../nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
+            <a href="../button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
+            <a href="../card.html"><i class="fas fa-square"></i> Cards</a>
+            <a href="../form.html"><i class="fas fa-edit"></i> Forms</a>
+            <a href="../layout.html"><i class="fas fa-columns"></i> Layouts</a>
+            <a href="../basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
+            <a href="../basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
+            <a href="../animation-blocks/index.html"><i class="fas fa-film"></i> Animation Blocks</a>
+            <a href="../advanced/crt-effects.html"><i class="fas fa-tv"></i> CRT Effects</a>
+            <a href="../advanced/corruption-manager.html" class="active"><i class="fas fa-sitemap"></i> Corruption Manager</a>
+            <a href="../components/showcase.html"><i class="fas fa-th-large"></i> Widgets Showcase</a>
+          </div>
+        </li>
+        <li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
+      </ul>
     </div>
-  </div>
-
-  <!-- Three pattern demos side-by-side -->
-  <div class="demo-grid">
-
-    <!-- Pattern 1: Decode -->
-    <div class="demo-card">
-      <div class="demo-card__header">
-        <h2>Pattern 1 · Decode</h2>
-        <p>Character-by-character corruption → readable text</p>
+  </nav>
+
+  <div class="container">
+    <h1><i class="fas fa-sitemap"></i> Corruption Manager</h1>
+    <p style="color: var(--text-secondary); margin-bottom: var(--spacing-2xl);">
+      Unified corruption animation lifecycle — decode, flicker, hybrid.
+      Provided by <code>src/core/corruption-manager.js</code>.
+    </p>
+
+    <!-- Manager-level controls -->
+    <section class="example-group">
+      <h3><i class="fas fa-layer-group"></i> Manager Controls</h3>
+      <div class="controls">
+        <button class="btn" id="btn-stop-all">Stop All</button>
+        <button class="btn" id="btn-destroy-manager">Destroy Manager</button>
+        <button class="btn" id="btn-recreate-manager">Re-create Manager</button>
       </div>
-      <div class="demo-target" id="target-decode" style="color: var(--corrupted-cyan);">
-        Click Decode to start
-      </div>
-      <div class="demo-card__footer">
-        <button class="btn" id="btn-decode">Decode</button>
-      </div>
-    </div>
+    </section>
+
+    <!-- Three pattern demos side-by-side -->
+    <section class="example-group">
+      <h3><i class="fas fa-random"></i> Three Canonical Patterns</h3>
+
+      <div class="demo-grid">
+
+        <!-- Pattern 1: Decode -->
+        <div class="demo-card">
+          <div class="demo-card__header">
+            <h4>Pattern 1 · Decode</h4>
+            <p>Character-by-character corruption → readable text</p>
+          </div>
+          <div class="demo-target" id="target-decode" style="color: var(--corrupted-cyan, #00ffff);">
+            Click Decode to start
+          </div>
+          <div class="demo-card__footer">
+            <button class="btn" id="btn-decode">Decode</button>
+          </div>
+        </div>
+
+        <!-- Pattern 2: Flicker -->
+        <div class="demo-card">
+          <div class="demo-card__header">
+            <h4>Pattern 2 · Flicker</h4>
+            <p>Rapid phrase cycling — unstable signal simulation</p>
+          </div>
+          <div class="demo-target" id="target-flicker" style="color: var(--corrupted-magenta, #ff00ff);">
+            Click Flicker to start
+          </div>
+          <div class="demo-card__footer">
+            <button class="btn" id="btn-flicker">Flicker</button>
+          </div>
+        </div>
+
+        <!-- Pattern 3: Hybrid -->
+        <div class="demo-card">
+          <div class="demo-card__header">
+            <h4>Pattern 3 · Hybrid</h4>
+            <p>Flicker phase → decode phase (maximum chaos)</p>
+          </div>
+          <div class="demo-target" id="target-hybrid" style="color: var(--corrupted-purple, #8b5cf6);">
+            Click Hybrid to start
+          </div>
+          <div class="demo-card__footer">
+            <button class="btn" id="btn-hybrid">Hybrid</button>
+          </div>
+        </div>
 
-    <!-- Pattern 2: Flicker -->
-    <div class="demo-card">
-      <div class="demo-card__header">
-        <h2>Pattern 2 · Flicker</h2>
-        <p>Rapid phrase cycling — unstable signal simulation</p>
-      </div>
-      <div class="demo-target" id="target-flicker" style="color: var(--corrupted-magenta);">
-        Click Flicker to start
-      </div>
-      <div class="demo-card__footer">
-        <button class="btn" id="btn-flicker">Flicker</button>
       </div>
-    </div>
-
-    <!-- Pattern 3: Hybrid -->
-    <div class="demo-card">
-      <div class="demo-card__header">
-        <h2>Pattern 3 · Hybrid</h2>
-        <p>Flicker phase → decode phase (maximum chaos)</p>
-      </div>
-      <div class="demo-target" id="target-hybrid" style="color: var(--corrupted-purple);">
-        Click Hybrid to start
-      </div>
-      <div class="demo-card__footer">
-        <button class="btn" id="btn-hybrid">Hybrid</button>
-      </div>
-    </div>
-
-  </div>
+    </section>
 
-  <!-- Usage snippet -->
-  <div class="code-block">
-    <h3>Usage</h3>
-    <pre><code>import { CorruptionManager } from 'src/core/corruption-manager.js';
+    <!-- Usage snippet -->
+    <section class="example-group">
+      <h3><i class="fas fa-code"></i> Usage</h3>
+      <div class="code-block">
+        <pre><code>import { CorruptionManager } from 'src/core/corruption-manager.js';
 
 const mgr = new CorruptionManager({ nsfw: false });
 
@@ -249,6 +253,9 @@ <h3>Usage</h3>
 
 mgr.stop();     // cancel all running animations
 mgr.destroy();  // full teardown (visibilitychange listener removed)</code></pre>
+      </div>
+    </section>
+
   </div>
 
   <script type="module">
diff --git a/examples/advanced/crt-effects.html b/examples/advanced/crt-effects.html
index 0e14649..e2008ee 100644
--- a/examples/advanced/crt-effects.html
+++ b/examples/advanced/crt-effects.html
@@ -3,44 +3,64 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>CRT Effects · corrupted-theme</title>
+  <title>CRT Effects - Corrupted Theme</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
   <link rel="stylesheet" href="../../src/css/theme.css">
   <style>
-    body {
-      margin: 0;
-      background: #000;
-      color: var(--text-primary);
-      font-family: 'Courier New', monospace;
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: var(--spacing-lg);
     }
 
-    /* ── Page layout ────────────────────────────────────────────────────── */
+    .example-group {
+      margin-bottom: var(--spacing-2xl);
+      background: var(--glass);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-lg);
+    }
 
-    .ui-layer {
-      position: relative;
-      z-index: 1;
+    .example-group h3 {
+      color: var(--accent);
+      margin-bottom: var(--spacing-lg);
+      font-size: 1.25rem;
+    }
+
+    .demo-area {
+      padding: var(--spacing-lg);
+      background: var(--bg-secondary);
+      border-radius: var(--radius-md);
+      margin-block: var(--spacing-md);
       display: flex;
-      flex-direction: column;
       align-items: center;
       justify-content: center;
-      min-height: 100vh;
-      padding: var(--spacing-2xl);
-      gap: var(--spacing-xl);
     }
 
-    h1 {
-      color: var(--corrupted-cyan);
-      text-shadow: 0 0 20px var(--corrupted-cyan);
-      text-align: center;
-      font-size: 1.8rem;
+    .code-block {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-md);
+      margin-top: var(--spacing-md);
+      font-family: 'Courier New', monospace;
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+      overflow-x: auto;
+    }
+
+    .code-block pre {
       margin: 0;
+      font-size: 0.75rem;
+      color: var(--text-secondary);
+      line-height: 1.5;
     }
 
-    .subtitle {
-      color: var(--text-muted);
-      font-size: 0.85rem;
-      text-align: center;
-      margin-top: -0.75rem;
+    .controls {
+      display: flex;
+      gap: var(--spacing-sm);
+      flex-wrap: wrap;
+      margin-block: var(--spacing-md);
     }
 
     /* ── CRT demo stage ─────────────────────────────────────────────────── */
@@ -55,8 +75,8 @@
       max-width: 680px;
       min-height: 280px;
       background: #000;
-      border: 2px solid var(--corrupted-cyan);
-      box-shadow: 0 0 30px var(--corrupted-cyan);
+      border: 2px solid var(--corrupted-cyan, #00ffff);
+      box-shadow: 0 0 30px var(--corrupted-cyan, #00ffff);
       border-radius: var(--radius-lg);
       display: flex;
       align-items: center;
@@ -72,8 +92,8 @@
 
     .stage-content h2 {
       font-size: 2rem;
-      color: var(--corrupted-cyan);
-      text-shadow: 0 0 15px var(--corrupted-cyan);
+      color: var(--corrupted-cyan, #00ffff);
+      text-shadow: 0 0 15px var(--corrupted-cyan, #00ffff);
       letter-spacing: 4px;
       margin: 0 0 1rem;
     }
@@ -85,32 +105,7 @@
       margin: 0;
     }
 
-    /* ── Controls panel ─────────────────────────────────────────────────── */
-
-    .controls-panel {
-      background: var(--glass);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-lg);
-      padding: var(--spacing-lg);
-      width: 100%;
-      max-width: 680px;
-      backdrop-filter: blur(12px);
-    }
-
-    .controls-panel h3 {
-      color: var(--accent);
-      font-size: 0.85rem;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      margin: 0 0 var(--spacing-md);
-    }
-
-    .btn-row {
-      display: flex;
-      gap: 0.5rem;
-      flex-wrap: wrap;
-      margin-bottom: var(--spacing-sm);
-    }
+    /* ── Toggle / slider rows ────────────────────────────────────────────── */
 
     .toggle-row {
       display: flex;
@@ -132,7 +127,7 @@
     }
 
     .toggle-row input[type="checkbox"] {
-      accent-color: var(--corrupted-cyan);
+      accent-color: var(--corrupted-cyan, #00ffff);
       width: 14px;
       height: 14px;
     }
@@ -153,65 +148,73 @@
 
     .slider-row input[type="range"] {
       flex: 1;
-      accent-color: var(--corrupted-magenta);
+      accent-color: var(--corrupted-magenta, #ff00ff);
     }
 
     .slider-val {
-      color: var(--corrupted-cyan);
+      color: var(--corrupted-cyan, #00ffff);
       font-size: 0.8rem;
       width: 36px;
       text-align: right;
     }
-
-    /* ── Code block ─────────────────────────────────────────────────────── */
-
-    .code-block {
-      background: var(--glass);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-lg);
-      padding: var(--spacing-lg);
-      width: 100%;
-      max-width: 680px;
-    }
-
-    .code-block h3 {
-      color: var(--accent);
-      font-size: 0.8rem;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      margin: 0 0 var(--spacing-md);
-    }
-
-    .code-block pre {
-      margin: 0;
-      overflow-x: auto;
-      font-size: 0.75rem;
-      color: var(--corrupted-cyan);
-      line-height: 1.5;
-      white-space: pre;
-    }
   </style>
 </head>
 <body>
+  <!-- Global Navigation -->
+  <nav class="navbar">
+    <div class="navbar-content">
+      <a href="../index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
+      <ul class="navbar-links">
+        <li><a href="../index.html"><i class="fas fa-home"></i> Home</a></li>
+        <li><a href="../showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
+        <li><a href="../extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
+        <li class="has-submenu">
+          <a href="#" class="active">
+            <i class="fas fa-flask"></i> Examples
+            <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
+          </a>
+          <div class="submenu">
+            <a href="../nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
+            <a href="../button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
+            <a href="../card.html"><i class="fas fa-square"></i> Cards</a>
+            <a href="../form.html"><i class="fas fa-edit"></i> Forms</a>
+            <a href="../layout.html"><i class="fas fa-columns"></i> Layouts</a>
+            <a href="../basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
+            <a href="../basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
+            <a href="../animation-blocks/index.html"><i class="fas fa-film"></i> Animation Blocks</a>
+            <a href="../advanced/crt-effects.html" class="active"><i class="fas fa-tv"></i> CRT Effects</a>
+            <a href="../advanced/corruption-manager.html"><i class="fas fa-sitemap"></i> Corruption Manager</a>
+            <a href="../components/showcase.html"><i class="fas fa-th-large"></i> Widgets Showcase</a>
+          </div>
+        </li>
+        <li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
+      </ul>
+    </div>
+  </nav>
 
-  <div class="ui-layer">
-
+  <div class="container">
     <h1><i class="fas fa-tv"></i> CRT Effects</h1>
-    <p class="subtitle">Scanlines, vignette, chromatic aberration, screen shake and more — <code>src/lib/crt-effects.js</code></p>
-
-    <!-- Demo stage — CRTEffects overlays are injected as absolute children here -->
-    <div id="crt-stage">
-      <div class="stage-content">
-        <h2>SYSTEM ACTIVE</h2>
-        <p>CRT overlays are appended inside this container.<br>Toggle effects below to see scanlines, vignette and flicker.</p>
+    <p style="color: var(--text-secondary); margin-bottom: var(--spacing-2xl);">
+      CRT post-processing effects: scanlines, vignette, chromatic aberration, screen shake.
+      Provided by <code>src/lib/crt-effects.js</code>.
+    </p>
+
+    <!-- Demo stage -->
+    <section class="example-group">
+      <h3><i class="fas fa-desktop"></i> Live Demo</h3>
+
+      <div class="demo-area">
+        <!-- CRTEffects overlays are injected as absolute children here -->
+        <div id="crt-stage">
+          <div class="stage-content">
+            <h2>SYSTEM ACTIVE</h2>
+            <p>CRT overlays are appended inside this container.<br>Toggle effects below to see scanlines, vignette and flicker.</p>
+          </div>
+        </div>
       </div>
-    </div>
 
-    <!-- Controls -->
-    <div class="controls-panel">
-      <h3><i class="fas fa-sliders-h"></i> Effect Controls</h3>
-
-      <div class="btn-row">
+      <!-- Controls -->
+      <div class="controls">
         <button class="btn" id="btn-start">Start</button>
         <button class="btn" id="btn-stop">Stop</button>
         <button class="btn" id="btn-destroy">Destroy</button>
@@ -246,12 +249,13 @@ <h3><i class="fas fa-sliders-h"></i> Effect Controls</h3>
         <input type="range" id="ctrl-flicker" min="0.01" max="0.5" step="0.01" value="0.05">
         <span class="slider-val" id="val-flicker">0.05</span>
       </div>
-    </div>
+    </section>
 
     <!-- Usage snippet -->
-    <div class="code-block">
-      <h3>Usage</h3>
-      <pre><code>import { CRTEffects } from 'src/lib/crt-effects.js';
+    <section class="example-group">
+      <h3><i class="fas fa-code"></i> Usage</h3>
+      <div class="code-block">
+        <pre><code>import { CRTEffects } from 'src/lib/crt-effects.js';
 
 const crt = new CRTEffects(containerEl, {
   scanlines:         true,
@@ -267,7 +271,8 @@ <h3>Usage</h3>
 crt.animateRGBSplit(containerEl);   // 200 ms RGB split
 crt.stop();                         // pause flicker only
 crt.destroy();                      // full teardown</code></pre>
-    </div>
+      </div>
+    </section>
 
   </div>
 
diff --git a/examples/advanced/particles-background.html b/examples/advanced/particles-background.html
index 7d70801..2858be1 100644
--- a/examples/advanced/particles-background.html
+++ b/examples/advanced/particles-background.html
@@ -3,31 +3,81 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Particles Background · corrupted-theme</title>
+  <title>Particles Background - Corrupted Theme</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
   <link rel="stylesheet" href="../../src/css/theme.css">
   <style>
-    body {
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: var(--spacing-lg);
+    }
+
+    .example-group {
+      margin-bottom: var(--spacing-2xl);
+      background: var(--glass);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-lg);
+    }
+
+    .example-group h3 {
+      color: var(--accent);
+      margin-bottom: var(--spacing-lg);
+      font-size: 1.25rem;
+    }
+
+    .demo-area {
+      padding: var(--spacing-lg);
+      background: var(--bg-secondary);
+      border-radius: var(--radius-md);
+      margin-block: var(--spacing-md);
+    }
+
+    .code-block {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-md);
+      margin-top: var(--spacing-md);
+      font-family: 'Courier New', monospace;
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+      overflow-x: auto;
+    }
+
+    .code-block pre {
       margin: 0;
-      background: #000;
-      /* CorruptedParticlesBackground inserts its canvas as a fixed-position
-         sibling immediately before .glass-backdrop, so it covers the whole
-         page behind all content. No manual canvas tag is needed. */
+      font-size: 0.75rem;
+      color: var(--text-secondary);
+      line-height: 1.5;
+    }
+
+    .controls {
+      display: flex;
+      gap: var(--spacing-sm);
+      flex-wrap: wrap;
+      margin-block: var(--spacing-md);
     }
 
-    /* ── Content layer ────────────────────────────────────────────────── */
+    /* ── Particles canvas host ────────────────────────────────────────── */
 
-    .page {
+    /*
+     * CorruptedParticlesBackground auto-discovers .glass-backdrop (the default
+     * targetSelector) and inserts the canvas immediately before it in the DOM.
+     * No manual <canvas> tag is required.
+     *
+     * The .particles-demo wrapper gives the canvas a bounded area to render in.
+     */
+    .particles-demo {
       position: relative;
-      z-index: 1;
+      min-height: 300px;
+      border-radius: var(--radius-md);
+      overflow: hidden;
+      background: rgba(0,0,0,0.5);
       display: flex;
-      flex-direction: column;
       align-items: center;
       justify-content: center;
-      min-height: 100vh;
-      padding: var(--spacing-2xl);
-      gap: var(--spacing-xl);
-      pointer-events: none;
     }
 
     /* ────────────────────────────────────────────────────────────────────
@@ -38,29 +88,24 @@
     .glass-backdrop {
       position: relative;
       z-index: 1;
-      /* backdrop-filter here would blur the canvas sitting behind this element.
-         We keep it transparent to let the particles show through clearly. */
     }
 
-    /* ── Card content ─────────────────────────────────────────────────── */
-
     .hero-card {
-      pointer-events: auto;
       background: var(--glass);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       padding: var(--spacing-xl) var(--spacing-2xl);
-      max-width: 560px;
+      max-width: 480px;
       width: 100%;
       backdrop-filter: blur(8px);
       text-align: center;
     }
 
-    .hero-card h1 {
-      color: var(--corrupted-cyan);
-      text-shadow: 0 0 20px var(--corrupted-cyan);
-      font-size: 1.8rem;
-      margin-bottom: 0.5rem;
+    .hero-card h2 {
+      color: var(--corrupted-cyan, #00ffff);
+      text-shadow: 0 0 20px var(--corrupted-cyan, #00ffff);
+      font-size: 1.4rem;
+      margin-bottom: var(--spacing-sm);
       font-family: 'Courier New', monospace;
     }
 
@@ -71,27 +116,7 @@
       font-family: 'Courier New', monospace;
     }
 
-    /* ── Controls panel ───────────────────────────────────────────────── */
-
-    .controls-panel {
-      pointer-events: auto;
-      background: var(--glass);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-lg);
-      padding: var(--spacing-lg);
-      width: 100%;
-      max-width: 560px;
-      backdrop-filter: blur(12px);
-    }
-
-    .controls-panel h2 {
-      color: var(--accent);
-      font-size: 0.85rem;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      margin: 0 0 var(--spacing-md);
-      font-family: 'Courier New', monospace;
-    }
+    /* ── Control rows ────────────────────────────────────────────────── */
 
     .control-row {
       display: flex;
@@ -101,20 +126,19 @@
     }
 
     .control-row label {
-      color: var(--text-muted);
+      color: var(--text-secondary);
       font-size: 0.8rem;
       width: 120px;
       flex-shrink: 0;
-      font-family: 'Courier New', monospace;
     }
 
     .control-row input[type="range"] {
       flex: 1;
-      accent-color: var(--corrupted-magenta);
+      accent-color: var(--corrupted-magenta, #ff00ff);
     }
 
     .val {
-      color: var(--corrupted-cyan);
+      color: var(--corrupted-cyan, #00ffff);
       font-size: 0.8rem;
       width: 44px;
       text-align: right;
@@ -131,78 +155,87 @@
     }
 
     .nsfw-row label {
-      color: var(--corrupted-purple);
+      color: var(--corrupted-purple, #8b5cf6);
       font-size: 0.8rem;
       flex: 1;
-      font-family: 'Courier New', monospace;
     }
 
     .rating-badge {
-      color: var(--corrupted-red);
+      color: var(--corrupted-red, #ff0000);
       font-size: 0.7rem;
-      border: 1px solid var(--corrupted-red);
+      border: 1px solid var(--corrupted-red, #ff0000);
       padding: 1px 5px;
       border-radius: 3px;
     }
-
-    .btn-row {
-      display: flex;
-      gap: 0.5rem;
-      margin-top: var(--spacing-md);
-      flex-wrap: wrap;
-    }
-
-    /* ── Code block ───────────────────────────────────────────────────── */
-
-    .code-block {
-      pointer-events: auto;
-      background: var(--glass);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-lg);
-      padding: var(--spacing-lg);
-      width: 100%;
-      max-width: 560px;
-      backdrop-filter: blur(12px);
-    }
-
-    .code-block h3 {
-      color: var(--accent);
-      font-size: 0.8rem;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      margin: 0 0 var(--spacing-md);
-      font-family: 'Courier New', monospace;
-    }
-
-    .code-block pre {
-      margin: 0;
-      overflow-x: auto;
-      font-size: 0.75rem;
-      color: var(--corrupted-cyan);
-      line-height: 1.5;
-    }
   </style>
 </head>
 <body>
-
-  <!--
-    CorruptedParticlesBackground auto-discovers .glass-backdrop (the default
-    targetSelector) and inserts the canvas immediately before it in the DOM.
-    No manual <canvas> tag is required.
-  -->
-  <div class="page">
-
-    <div class="hero-card glass-backdrop">
-      <h1><i class="fas fa-atom"></i> Particles Background</h1>
-      <p>
+  <!-- Global Navigation -->
+  <nav class="navbar">
+    <div class="navbar-content">
+      <a href="../index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
+      <ul class="navbar-links">
+        <li><a href="../index.html"><i class="fas fa-home"></i> Home</a></li>
+        <li><a href="../showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
+        <li><a href="../extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
+        <li class="has-submenu">
+          <a href="#" class="active">
+            <i class="fas fa-flask"></i> Examples
+            <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
+          </a>
+          <div class="submenu">
+            <a href="../nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
+            <a href="../button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
+            <a href="../card.html"><i class="fas fa-square"></i> Cards</a>
+            <a href="../form.html"><i class="fas fa-edit"></i> Forms</a>
+            <a href="../layout.html"><i class="fas fa-columns"></i> Layouts</a>
+            <a href="../basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
+            <a href="../basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
+            <a href="../animation-blocks/index.html"><i class="fas fa-film"></i> Animation Blocks</a>
+            <a href="../advanced/crt-effects.html"><i class="fas fa-tv"></i> CRT Effects</a>
+            <a href="../advanced/corruption-manager.html"><i class="fas fa-sitemap"></i> Corruption Manager</a>
+            <a href="../components/showcase.html"><i class="fas fa-th-large"></i> Widgets Showcase</a>
+          </div>
+        </li>
+        <li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
+      </ul>
+    </div>
+  </nav>
+
+  <div class="container">
+    <h1><i class="fas fa-atom"></i> Particles Background</h1>
+    <p style="color: var(--text-secondary); margin-bottom: var(--spacing-2xl);">
+      Auto-injected behind-blur particle background. DPR=1 for performance.
+      Provided by <code>src/lib/corrupted-particles-background.js</code>.
+    </p>
+
+    <!-- Live demo -->
+    <section class="example-group">
+      <h3><i class="fas fa-play-circle"></i> Live Demo</h3>
+      <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--spacing-md);">
         <code>CorruptedParticlesBackground</code> auto-injects a floating Japanese-phrase
         canvas behind its target element. No manual <code>&lt;canvas&gt;</code> tag needed.
-        The canvas sits at <code>z-index: 0</code> — content above it remains interactive.
       </p>
-    </div>
 
-    <div class="controls-panel">
-      <h2><i class="fas fa-sliders-h"></i> Particle Controls</h2>
+      <!--
+        CorruptedParticlesBackground auto-discovers .glass-backdrop (the default
+        targetSelector) and inserts the canvas immediately before it in the DOM.
+        No manual <canvas> tag is required.
+      -->
+      <div class="particles-demo">
+        <div class="hero-card glass-backdrop">
+          <h2><i class="fas fa-atom"></i> Particles Active</h2>
+          <p>
+            The canvas sits at <code>z-index: 0</code> — content above it remains interactive.
+            Use the controls below to adjust particle density and speed.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Controls -->
+    <section class="example-group">
+      <h3><i class="fas fa-sliders-h"></i> Particle Controls</h3>
 
       <div class="control-row">
         <label>Count</label>
@@ -228,18 +261,19 @@ <h2><i class="fas fa-sliders-h"></i> Particle Controls</h2>
         <input type="checkbox" id="ctrl-nsfw">
       </div>
 
-      <div class="btn-row">
+      <div class="controls">
         <button class="btn" id="btn-rebuild">Apply</button>
         <button class="btn" id="btn-stop">Stop</button>
         <button class="btn" id="btn-start">Resume</button>
         <button class="btn" id="btn-destroy">Destroy</button>
       </div>
-    </div>
+    </section>
 
-    <!-- Code usage -->
-    <div class="code-block">
-      <h3>Usage</h3>
-      <pre><code>import { CorruptedParticlesBackground }
+    <!-- Usage snippet -->
+    <section class="example-group">
+      <h3><i class="fas fa-code"></i> Usage</h3>
+      <div class="code-block">
+        <pre><code>import { CorruptedParticlesBackground }
   from 'src/lib/corrupted-particles-background.js';
 
 // Injects a canvas immediately before .glass-backdrop (default selector).
@@ -255,7 +289,8 @@ <h3>Usage</h3>
 bg.stop();     // pause rendering (saves GPU when hidden)
 bg.start();    // resume
 bg.destroy();  // remove canvas + listeners</code></pre>
-    </div>
+      </div>
+    </section>
 
   </div>
 
diff --git a/examples/animation-blocks/index.html b/examples/animation-blocks/index.html
index 59eafb7..a8bab6d 100644
--- a/examples/animation-blocks/index.html
+++ b/examples/animation-blocks/index.html
@@ -3,58 +3,32 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Animation Blocks Showcase · corrupted-theme</title>
+  <title>Animation Blocks - Corrupted Theme</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
   <link rel="stylesheet" href="../../src/css/theme.css">
   <style>
-    body {
-      margin: 0;
-      padding: 2rem;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      font-family: 'Courier New', monospace;
-    }
-
-    .page-header {
-      text-align: center;
-      margin-bottom: 3rem;
-      padding-bottom: 1.5rem;
-      border-bottom: 1px solid var(--border);
-    }
-
-    .page-header h1 {
-      color: var(--corrupted-cyan);
-      text-shadow: 0 0 20px var(--corrupted-cyan);
-      font-size: 2rem;
-      margin-bottom: 0.5rem;
-    }
-
-    .page-header p {
-      color: var(--text-muted);
-      font-size: 0.9rem;
-    }
-
-    .back-link {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.4rem;
-      color: var(--corrupted-cyan);
-      text-decoration: none;
-      font-size: 0.85rem;
-      margin-bottom: 2rem;
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: var(--spacing-lg);
     }
 
-    .back-link:hover { opacity: 0.7; }
-
-    /* Each demo block */
-    .block-section {
-      margin-bottom: 2.5rem;
+    .example-group {
+      margin-bottom: var(--spacing-2xl);
       background: var(--glass);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       overflow: hidden;
     }
 
+    .example-group h3 {
+      color: var(--accent);
+      margin: 0;
+      font-size: 1rem;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+    }
+
     .block-header {
       display: flex;
       align-items: center;
@@ -64,14 +38,6 @@
       border-bottom: 1px solid var(--border);
     }
 
-    .block-header h2 {
-      margin: 0;
-      font-size: 0.95rem;
-      color: var(--corrupted-cyan);
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-    }
-
     .block-meta {
       font-size: 0.75rem;
       color: var(--text-muted);
@@ -125,193 +91,226 @@
   </style>
 </head>
 <body>
-
-  <a href="../index.html" class="back-link"><i class="fas fa-arrow-left"></i> Examples home</a>
-
-  <div class="page-header">
-    <h1><i class="fas fa-cubes"></i> Animation Blocks Showcase</h1>
-    <p>10 reusable animation classes — all ship in <code>src/lib/animation-blocks.js</code> as part of corrupted-theme 0.2.0.</p>
-  </div>
-
-  <!-- ════════════════════════════════════════════════════════════════════
-       1. TitleDecoder
-       Character-by-character decoding: corruption → readable text.
-       SPEC §5.1 — "Character-by-Character Decoding"
-       ════════════════════════════════════════════════════════════════════ -->
-  <div class="block-section" id="sec-title-decoder">
-    <div class="block-header">
-      <h2>1 · TitleDecoder</h2>
-      <span class="block-meta">Pattern: char-decode · ~2 s</span>
-    </div>
-    <div class="demo-stage" id="demo-title-decoder"></div>
-    <div class="block-controls">
-      <button class="btn" id="btn-td-start">Start</button>
-      <button class="btn" id="btn-td-stop">Stop</button>
-      <button class="btn" id="btn-td-destroy">Destroy</button>
-      <span class="status-text" id="status-td">idle</span>
+  <!-- Global Navigation -->
+  <nav class="navbar">
+    <div class="navbar-content">
+      <a href="../index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
+      <ul class="navbar-links">
+        <li><a href="../index.html"><i class="fas fa-home"></i> Home</a></li>
+        <li><a href="../showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
+        <li><a href="../extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
+        <li class="has-submenu">
+          <a href="#" class="active">
+            <i class="fas fa-flask"></i> Examples
+            <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
+          </a>
+          <div class="submenu">
+            <a href="../nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
+            <a href="../button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
+            <a href="../card.html"><i class="fas fa-square"></i> Cards</a>
+            <a href="../form.html"><i class="fas fa-edit"></i> Forms</a>
+            <a href="../layout.html"><i class="fas fa-columns"></i> Layouts</a>
+            <a href="../basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
+            <a href="../basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
+            <a href="../animation-blocks/index.html" class="active"><i class="fas fa-film"></i> Animation Blocks</a>
+            <a href="../advanced/crt-effects.html"><i class="fas fa-tv"></i> CRT Effects</a>
+            <a href="../advanced/corruption-manager.html"><i class="fas fa-sitemap"></i> Corruption Manager</a>
+            <a href="../components/showcase.html"><i class="fas fa-th-large"></i> Widgets Showcase</a>
+          </div>
+        </li>
+        <li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
+      </ul>
     </div>
-  </div>
+  </nav>
+
+  <div class="container">
+    <h1><i class="fas fa-film"></i> Animation Blocks</h1>
+    <p style="color: var(--text-secondary); margin-bottom: var(--spacing-2xl);">
+      10 animation block classes ported from celeste-tts-bot. Each shows a Start/Stop/Destroy lifecycle.
+      All ship in <code>src/lib/animation-blocks.js</code> as part of corrupted-theme 0.2.0.
+    </p>
+
+    <!-- ════════════════════════════════════════════════════════════════════
+         1. TitleDecoder
+         Character-by-character decoding: corruption → readable text.
+         SPEC §5.1 — "Character-by-Character Decoding"
+         ════════════════════════════════════════════════════════════════════ -->
+    <section class="example-group" id="sec-title-decoder">
+      <div class="block-header">
+        <h3>1 · TitleDecoder</h3>
+        <span class="block-meta">Pattern: char-decode · ~2 s</span>
+      </div>
+      <div class="demo-stage" id="demo-title-decoder"></div>
+      <div class="block-controls">
+        <button class="btn" id="btn-td-start">Start</button>
+        <button class="btn" id="btn-td-stop">Stop</button>
+        <button class="btn" id="btn-td-destroy">Destroy</button>
+        <span class="status-text" id="status-td">idle</span>
+      </div>
+    </section>
+
+    <!-- ════════════════════════════════════════════════════════════════════
+         2. ProgressBar
+         Single loading bar with glitch spikes.
+         ════════════════════════════════════════════════════════════════════ -->
+    <section class="example-group" id="sec-progress-bar">
+      <div class="block-header">
+        <h3>2 · ProgressBar</h3>
+        <span class="block-meta">glitch: true · height: 8 px · ~2 s</span>
+      </div>
+      <div class="demo-stage" id="demo-progress-bar"></div>
+      <div class="block-controls">
+        <button class="btn" id="btn-pb-start">Start</button>
+        <button class="btn" id="btn-pb-stop">Stop</button>
+        <button class="btn" id="btn-pb-destroy">Destroy</button>
+        <span class="status-text" id="status-pb">idle</span>
+      </div>
+    </section>
+
+    <!-- ════════════════════════════════════════════════════════════════════
+         3. ScanlineSweep
+         Horizontal CRT scan-line travelling from top to bottom.
+         ════════════════════════════════════════════════════════════════════ -->
+    <section class="example-group" id="sec-scanline">
+      <div class="block-header">
+        <h3>3 · ScanlineSweep</h3>
+        <span class="block-meta">sweeps: 3 · duration: 1.5 s</span>
+      </div>
+      <div class="demo-stage" id="demo-scanline"></div>
+      <div class="block-controls">
+        <button class="btn" id="btn-sl-start">Start</button>
+        <button class="btn" id="btn-sl-stop">Stop</button>
+        <button class="btn" id="btn-sl-destroy">Destroy</button>
+        <span class="status-text" id="status-sl">idle</span>
+      </div>
+    </section>
+
+    <!-- ════════════════════════════════════════════════════════════════════
+         4. TerminalBoot
+         Boot-sequence log lines printed with typewriter cadence.
+         ════════════════════════════════════════════════════════════════════ -->
+    <section class="example-group" id="sec-terminal-boot">
+      <div class="block-header">
+        <h3>4 · TerminalBoot</h3>
+        <span class="block-meta">4 log lines · duration: 3 s</span>
+      </div>
+      <div class="demo-stage demo-stage--tall" id="demo-terminal-boot"></div>
+      <div class="block-controls">
+        <button class="btn" id="btn-tb-start">Start</button>
+        <button class="btn" id="btn-tb-stop">Stop</button>
+        <button class="btn" id="btn-tb-destroy">Destroy</button>
+        <span class="status-text" id="status-tb">idle</span>
+      </div>
+    </section>
+
+    <!-- ════════════════════════════════════════════════════════════════════
+         5. GlitchPulse
+         Full-stage random coloured bars that flash and fade.
+         ════════════════════════════════════════════════════════════════════ -->
+    <section class="example-group" id="sec-glitch-pulse">
+      <div class="block-header">
+        <h3>5 · GlitchPulse</h3>
+        <span class="block-meta">intensity: 0.7 · color: magenta · ~1 s</span>
+      </div>
+      <div class="demo-stage" id="demo-glitch-pulse"></div>
+      <div class="block-controls">
+        <button class="btn" id="btn-gp-start">Start</button>
+        <button class="btn" id="btn-gp-stop">Stop</button>
+        <button class="btn" id="btn-gp-destroy">Destroy</button>
+        <span class="status-text" id="status-gp">idle</span>
+      </div>
+    </section>
+
+    <!-- ════════════════════════════════════════════════════════════════════
+         6. ASCIIBorder
+         Animated Unicode box-drawing border drawn clockwise.
+         ════════════════════════════════════════════════════════════════════ -->
+    <section class="example-group" id="sec-ascii-border">
+      <div class="block-header">
+        <h3>6 · ASCIIBorder</h3>
+        <span class="block-meta">style: double · drawOrder: clockwise · ~1.5 s</span>
+      </div>
+      <div class="demo-stage" id="demo-ascii-border"></div>
+      <div class="block-controls">
+        <button class="btn" id="btn-ab-start">Start</button>
+        <button class="btn" id="btn-ab-stop">Stop</button>
+        <button class="btn" id="btn-ab-destroy">Destroy</button>
+        <span class="status-text" id="status-ab">idle</span>
+      </div>
+    </section>
+
+    <!-- ════════════════════════════════════════════════════════════════════
+         7. SystemDiagnostic
+         Scrolling green diagnostic log lines, each fading in.
+         ════════════════════════════════════════════════════════════════════ -->
+    <section class="example-group" id="sec-sysdiag">
+      <div class="block-header">
+        <h3>7 · SystemDiagnostic</h3>
+        <span class="block-meta">8 lines · color: #00ff00 · ~3 s</span>
+      </div>
+      <div class="demo-stage demo-stage--tall" id="demo-sysdiag"></div>
+      <div class="block-controls">
+        <button class="btn" id="btn-sd-start">Start</button>
+        <button class="btn" id="btn-sd-stop">Stop</button>
+        <button class="btn" id="btn-sd-destroy">Destroy</button>
+        <span class="status-text" id="status-sd">idle</span>
+      </div>
+    </section>
+
+    <!-- ════════════════════════════════════════════════════════════════════
+         8. LoadingBarMulti
+         Four labelled bars filling at different speeds with scanline shimmer.
+         ════════════════════════════════════════════════════════════════════ -->
+    <section class="example-group" id="sec-multibar">
+      <div class="block-header">
+        <h3>8 · LoadingBarMulti</h3>
+        <span class="block-meta">4 bars · glitch: true · ~3 s</span>
+      </div>
+      <div class="demo-stage demo-stage--tall" id="demo-multibar"></div>
+      <div class="block-controls">
+        <button class="btn" id="btn-mb-start">Start</button>
+        <button class="btn" id="btn-mb-stop">Stop</button>
+        <button class="btn" id="btn-mb-destroy">Destroy</button>
+        <span class="status-text" id="status-mb">idle</span>
+      </div>
+    </section>
+
+    <!-- ════════════════════════════════════════════════════════════════════
+         9. DataTransmission
+         Horizontal light-pulse packets streaming across the stage.
+         ════════════════════════════════════════════════════════════════════ -->
+    <section class="example-group" id="sec-datatx">
+      <div class="block-header">
+        <h3>9 · DataTransmission</h3>
+        <span class="block-meta">direction: horizontal · 20 packets · ~2.5 s</span>
+      </div>
+      <div class="demo-stage" id="demo-datatx"></div>
+      <div class="block-controls">
+        <button class="btn" id="btn-dt-start">Start</button>
+        <button class="btn" id="btn-dt-stop">Stop</button>
+        <button class="btn" id="btn-dt-destroy">Destroy</button>
+        <span class="status-text" id="status-dt">idle</span>
+      </div>
+    </section>
+
+    <!-- ════════════════════════════════════════════════════════════════════
+         10. TerminalPrompt
+         Character-by-character typewriter of command strings.
+         ════════════════════════════════════════════════════════════════════ -->
+    <section class="example-group" id="sec-terminal-prompt">
+      <div class="block-header">
+        <h3>10 · TerminalPrompt</h3>
+        <span class="block-meta">4 commands · typingSpeed: 50 ms/char</span>
+      </div>
+      <div class="demo-stage demo-stage--tall" id="demo-terminal-prompt"></div>
+      <div class="block-controls">
+        <button class="btn" id="btn-tp-start">Start</button>
+        <button class="btn" id="btn-tp-stop">Stop</button>
+        <button class="btn" id="btn-tp-destroy">Destroy</button>
+        <span class="status-text" id="status-tp">idle</span>
+      </div>
+    </section>
 
-  <!-- ════════════════════════════════════════════════════════════════════
-       2. ProgressBar
-       Single loading bar with glitch spikes.
-       ════════════════════════════════════════════════════════════════════ -->
-  <div class="block-section" id="sec-progress-bar">
-    <div class="block-header">
-      <h2>2 · ProgressBar</h2>
-      <span class="block-meta">glitch: true · height: 8 px · ~2 s</span>
-    </div>
-    <div class="demo-stage" id="demo-progress-bar"></div>
-    <div class="block-controls">
-      <button class="btn" id="btn-pb-start">Start</button>
-      <button class="btn" id="btn-pb-stop">Stop</button>
-      <button class="btn" id="btn-pb-destroy">Destroy</button>
-      <span class="status-text" id="status-pb">idle</span>
-    </div>
-  </div>
-
-  <!-- ════════════════════════════════════════════════════════════════════
-       3. ScanlineSweep
-       Horizontal CRT scan-line travelling from top to bottom.
-       ════════════════════════════════════════════════════════════════════ -->
-  <div class="block-section" id="sec-scanline">
-    <div class="block-header">
-      <h2>3 · ScanlineSweep</h2>
-      <span class="block-meta">sweeps: 3 · duration: 1.5 s</span>
-    </div>
-    <div class="demo-stage" id="demo-scanline"></div>
-    <div class="block-controls">
-      <button class="btn" id="btn-sl-start">Start</button>
-      <button class="btn" id="btn-sl-stop">Stop</button>
-      <button class="btn" id="btn-sl-destroy">Destroy</button>
-      <span class="status-text" id="status-sl">idle</span>
-    </div>
-  </div>
-
-  <!-- ════════════════════════════════════════════════════════════════════
-       4. TerminalBoot
-       Boot-sequence log lines printed with typewriter cadence.
-       ════════════════════════════════════════════════════════════════════ -->
-  <div class="block-section" id="sec-terminal-boot">
-    <div class="block-header">
-      <h2>4 · TerminalBoot</h2>
-      <span class="block-meta">4 log lines · duration: 3 s</span>
-    </div>
-    <div class="demo-stage demo-stage--tall" id="demo-terminal-boot"></div>
-    <div class="block-controls">
-      <button class="btn" id="btn-tb-start">Start</button>
-      <button class="btn" id="btn-tb-stop">Stop</button>
-      <button class="btn" id="btn-tb-destroy">Destroy</button>
-      <span class="status-text" id="status-tb">idle</span>
-    </div>
-  </div>
-
-  <!-- ════════════════════════════════════════════════════════════════════
-       5. GlitchPulse
-       Full-stage random coloured bars that flash and fade.
-       ════════════════════════════════════════════════════════════════════ -->
-  <div class="block-section" id="sec-glitch-pulse">
-    <div class="block-header">
-      <h2>5 · GlitchPulse</h2>
-      <span class="block-meta">intensity: 0.7 · color: magenta · ~1 s</span>
-    </div>
-    <div class="demo-stage" id="demo-glitch-pulse"></div>
-    <div class="block-controls">
-      <button class="btn" id="btn-gp-start">Start</button>
-      <button class="btn" id="btn-gp-stop">Stop</button>
-      <button class="btn" id="btn-gp-destroy">Destroy</button>
-      <span class="status-text" id="status-gp">idle</span>
-    </div>
-  </div>
-
-  <!-- ════════════════════════════════════════════════════════════════════
-       6. ASCIIBorder
-       Animated Unicode box-drawing border drawn clockwise.
-       ════════════════════════════════════════════════════════════════════ -->
-  <div class="block-section" id="sec-ascii-border">
-    <div class="block-header">
-      <h2>6 · ASCIIBorder</h2>
-      <span class="block-meta">style: double · drawOrder: clockwise · ~1.5 s</span>
-    </div>
-    <div class="demo-stage" id="demo-ascii-border"></div>
-    <div class="block-controls">
-      <button class="btn" id="btn-ab-start">Start</button>
-      <button class="btn" id="btn-ab-stop">Stop</button>
-      <button class="btn" id="btn-ab-destroy">Destroy</button>
-      <span class="status-text" id="status-ab">idle</span>
-    </div>
-  </div>
-
-  <!-- ════════════════════════════════════════════════════════════════════
-       7. SystemDiagnostic
-       Scrolling green diagnostic log lines, each fading in.
-       ════════════════════════════════════════════════════════════════════ -->
-  <div class="block-section" id="sec-sysdiag">
-    <div class="block-header">
-      <h2>7 · SystemDiagnostic</h2>
-      <span class="block-meta">8 lines · color: #00ff00 · ~3 s</span>
-    </div>
-    <div class="demo-stage demo-stage--tall" id="demo-sysdiag"></div>
-    <div class="block-controls">
-      <button class="btn" id="btn-sd-start">Start</button>
-      <button class="btn" id="btn-sd-stop">Stop</button>
-      <button class="btn" id="btn-sd-destroy">Destroy</button>
-      <span class="status-text" id="status-sd">idle</span>
-    </div>
-  </div>
-
-  <!-- ════════════════════════════════════════════════════════════════════
-       8. LoadingBarMulti
-       Four labelled bars filling at different speeds with scanline shimmer.
-       ════════════════════════════════════════════════════════════════════ -->
-  <div class="block-section" id="sec-multibar">
-    <div class="block-header">
-      <h2>8 · LoadingBarMulti</h2>
-      <span class="block-meta">4 bars · glitch: true · ~3 s</span>
-    </div>
-    <div class="demo-stage demo-stage--tall" id="demo-multibar"></div>
-    <div class="block-controls">
-      <button class="btn" id="btn-mb-start">Start</button>
-      <button class="btn" id="btn-mb-stop">Stop</button>
-      <button class="btn" id="btn-mb-destroy">Destroy</button>
-      <span class="status-text" id="status-mb">idle</span>
-    </div>
-  </div>
-
-  <!-- ════════════════════════════════════════════════════════════════════
-       9. DataTransmission
-       Horizontal light-pulse packets streaming across the stage.
-       ════════════════════════════════════════════════════════════════════ -->
-  <div class="block-section" id="sec-datatx">
-    <div class="block-header">
-      <h2>9 · DataTransmission</h2>
-      <span class="block-meta">direction: horizontal · 20 packets · ~2.5 s</span>
-    </div>
-    <div class="demo-stage" id="demo-datatx"></div>
-    <div class="block-controls">
-      <button class="btn" id="btn-dt-start">Start</button>
-      <button class="btn" id="btn-dt-stop">Stop</button>
-      <button class="btn" id="btn-dt-destroy">Destroy</button>
-      <span class="status-text" id="status-dt">idle</span>
-    </div>
-  </div>
-
-  <!-- ════════════════════════════════════════════════════════════════════
-       10. TerminalPrompt
-       Character-by-character typewriter of command strings.
-       ════════════════════════════════════════════════════════════════════ -->
-  <div class="block-section" id="sec-terminal-prompt">
-    <div class="block-header">
-      <h2>10 · TerminalPrompt</h2>
-      <span class="block-meta">4 commands · typingSpeed: 50 ms/char</span>
-    </div>
-    <div class="demo-stage demo-stage--tall" id="demo-terminal-prompt"></div>
-    <div class="block-controls">
-      <button class="btn" id="btn-tp-start">Start</button>
-      <button class="btn" id="btn-tp-stop">Stop</button>
-      <button class="btn" id="btn-tp-destroy">Destroy</button>
-      <span class="status-text" id="status-tp">idle</span>
-    </div>
   </div>
 
   <script type="module">
diff --git a/examples/components/png-export.html b/examples/components/png-export.html
index 49fd39d..12f5546 100644
--- a/examples/components/png-export.html
+++ b/examples/components/png-export.html
@@ -3,69 +3,74 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>PNG Export · corrupted-theme</title>
+  <title>PNG Export - Corrupted Theme</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
   <link rel="stylesheet" href="../../src/css/theme.css">
   <style>
-    body {
-      margin: 0;
-      background: #000;
-      color: var(--text-primary);
-      font-family: 'Courier New', monospace;
-      padding: var(--spacing-2xl);
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: var(--spacing-lg);
     }
 
-    h1 {
-      color: var(--corrupted-cyan);
-      text-shadow: 0 0 20px var(--corrupted-cyan);
-      text-align: center;
-      font-size: 1.8rem;
-      margin: 0 0 0.25rem;
+    .example-group {
+      margin-bottom: var(--spacing-2xl);
+      background: var(--glass);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-lg);
     }
 
-    .subtitle {
-      color: var(--text-muted);
-      font-size: 0.8rem;
-      text-align: center;
-      margin: 0 0 var(--spacing-2xl);
+    .example-group h3 {
+      color: var(--accent);
+      margin-bottom: var(--spacing-lg);
+      font-size: 1.25rem;
+    }
+
+    .demo-area {
+      padding: var(--spacing-lg);
+      background: var(--bg-secondary);
+      border-radius: var(--radius-md);
+      margin-block: var(--spacing-md);
     }
 
-    .demo-section {
-      padding: 1.5rem;
-      margin-block: 1rem;
+    .code-block {
+      background: var(--bg);
       border: 1px solid var(--border);
       border-radius: var(--radius-md);
-      background: var(--glass);
-      backdrop-filter: blur(12px);
-      max-width: 760px;
-      margin-inline: auto;
+      padding: var(--spacing-md);
+      margin-top: var(--spacing-md);
+      font-family: 'Courier New', monospace;
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+      overflow-x: auto;
     }
 
-    .demo-section h2 {
-      color: var(--accent);
-      font-size: 0.85rem;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      margin: 0 0 var(--spacing-md);
+    .code-block pre {
+      margin: 0;
+      font-size: 0.75rem;
+      color: var(--text-secondary);
+      line-height: 1.5;
+      white-space: pre;
     }
 
     .controls {
       display: flex;
-      gap: 0.5rem;
-      margin-block: 0.75rem;
+      gap: var(--spacing-sm);
       flex-wrap: wrap;
+      margin-block: var(--spacing-md);
       align-items: center;
     }
 
     /* ── Warning banner ────────────────────────────── */
     .peer-dep-warning {
-      border: 1px solid var(--corrupted-magenta);
+      border: 1px solid var(--corrupted-magenta, #ff00ff);
       border-radius: var(--radius-md);
       padding: 0.75rem 1rem;
-      margin-bottom: 1rem;
+      margin-bottom: var(--spacing-lg);
       background: rgba(255,0,255,0.06);
       font-size: 0.8rem;
-      color: var(--corrupted-magenta);
+      color: var(--corrupted-magenta, #ff00ff);
       line-height: 1.6;
     }
 
@@ -79,16 +84,16 @@
     /* ── Export target card ────────────────────────── */
     #export-target {
       background: linear-gradient(135deg, #0a0a1a, #1a001a);
-      border: 2px solid var(--corrupted-cyan);
+      border: 2px solid var(--corrupted-cyan, #00ffff);
       border-radius: var(--radius-md);
       padding: 2rem;
       text-align: center;
       box-shadow: 0 0 30px rgba(0,255,255,0.15);
     }
 
-    #export-target h3 {
-      color: var(--corrupted-cyan);
-      text-shadow: 0 0 12px var(--corrupted-cyan);
+    #export-target h4 {
+      color: var(--corrupted-cyan, #00ffff);
+      text-shadow: 0 0 12px var(--corrupted-cyan, #00ffff);
       font-size: 1.5rem;
       margin: 0 0 0.5rem;
       letter-spacing: 0.15em;
@@ -110,11 +115,11 @@
 
     .badge {
       background: rgba(0,255,255,0.1);
-      border: 1px solid var(--corrupted-cyan);
+      border: 1px solid var(--corrupted-cyan, #00ffff);
       border-radius: 999px;
       padding: 0.25rem 0.65rem;
       font-size: 0.7rem;
-      color: var(--corrupted-cyan);
+      color: var(--corrupted-cyan, #00ffff);
       letter-spacing: 0.05em;
     }
 
@@ -123,75 +128,97 @@
       margin-top: 0.75rem;
       font-size: 0.8rem;
       min-height: 1.4rem;
-      color: var(--corrupted-green);
-    }
-
-    /* ── Code block ────────────────────────────────── */
-    .code-block {
-      background: rgba(0,0,0,0.4);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      padding: 0.75rem 1rem;
-      margin-top: 0.75rem;
-      overflow-x: auto;
-    }
-
-    .code-block pre {
-      margin: 0;
-      font-size: 0.75rem;
-      color: var(--corrupted-cyan);
-      line-height: 1.5;
-      white-space: pre;
+      color: var(--corrupted-green, #00ff00);
     }
 
     .code-block .comment { color: var(--text-muted); }
   </style>
 </head>
 <body>
-
-  <h1><i class="fas fa-camera"></i> PNG Export</h1>
-  <p class="subtitle">Export any DOM element to a PNG download — <code>exportElementAsPng</code> from <code>src/lib/png-export.js</code></p>
-
-  <!-- Peer dep warning -->
-  <div class="demo-section">
-    <div class="peer-dep-warning">
-      <strong><i class="fas fa-exclamation-triangle"></i> OPTIONAL PEER DEPENDENCY</strong><br>
-      <code>png-export</code> dynamically imports <code>html2canvas</code> at runtime.
-      If it is not installed the function will throw with a clear error message.<br><br>
-      <strong>Install before using:</strong><br>
-      <code>npm install html2canvas</code><br><br>
-      This demo loads html2canvas from a CDN so no local install is required.
-      In a production bundle, install it as a project dependency (not a devDependency).
+  <!-- Global Navigation -->
+  <nav class="navbar">
+    <div class="navbar-content">
+      <a href="../index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
+      <ul class="navbar-links">
+        <li><a href="../index.html"><i class="fas fa-home"></i> Home</a></li>
+        <li><a href="../showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
+        <li><a href="../extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
+        <li class="has-submenu">
+          <a href="#" class="active">
+            <i class="fas fa-flask"></i> Examples
+            <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
+          </a>
+          <div class="submenu">
+            <a href="../nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
+            <a href="../button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
+            <a href="../card.html"><i class="fas fa-square"></i> Cards</a>
+            <a href="../form.html"><i class="fas fa-edit"></i> Forms</a>
+            <a href="../layout.html"><i class="fas fa-columns"></i> Layouts</a>
+            <a href="../basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
+            <a href="../basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
+            <a href="../animation-blocks/index.html"><i class="fas fa-film"></i> Animation Blocks</a>
+            <a href="../advanced/crt-effects.html"><i class="fas fa-tv"></i> CRT Effects</a>
+            <a href="../advanced/corruption-manager.html"><i class="fas fa-sitemap"></i> Corruption Manager</a>
+            <a href="../components/showcase.html"><i class="fas fa-th-large"></i> Widgets Showcase</a>
+          </div>
+        </li>
+        <li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
+      </ul>
     </div>
+  </nav>
 
-    <h2><i class="fas fa-download"></i> Export Demo</h2>
-    <p style="color:var(--text-muted); font-size:0.8rem; margin:0 0 0.75rem;">
-      Click "Export as PNG" to capture the card below and download it as a file.
-      Open the browser's Network tab to confirm html2canvas loaded from CDN.
+  <div class="container">
+    <h1><i class="fas fa-file-image"></i> PNG Export</h1>
+    <p style="color: var(--text-secondary); margin-bottom: var(--spacing-2xl);">
+      Export DOM elements as PNG via optional html2canvas peer dep.
+      Provided by <code>exportElementAsPng</code> from <code>src/lib/png-export.js</code>.
     </p>
 
-    <!-- The element we will export -->
-    <div id="export-target">
-      <h3>CORRUPTED SIGNAL</h3>
-      <p>アイウエオ · Neural core stability: 42%</p>
-      <div class="badge-row">
-        <span class="badge">0.2.0</span>
-        <span class="badge">@whykusanagi/corrupted-theme</span>
-        <span class="badge">png-export</span>
+    <!-- Peer dep warning + export demo -->
+    <section class="example-group">
+      <h3><i class="fas fa-exclamation-triangle"></i> Optional Peer Dependency</h3>
+
+      <div class="peer-dep-warning">
+        <strong><i class="fas fa-exclamation-triangle"></i> OPTIONAL PEER DEPENDENCY</strong><br>
+        <code>png-export</code> dynamically imports <code>html2canvas</code> at runtime.
+        If it is not installed the function will throw with a clear error message.<br><br>
+        <strong>Install before using:</strong><br>
+        <code>npm install html2canvas</code><br><br>
+        This demo loads html2canvas from a CDN so no local install is required.
+        In a production bundle, install it as a project dependency (not a devDependency).
       </div>
-    </div>
 
-    <div class="controls">
-      <button class="btn" id="btn-export">Export as PNG</button>
-      <button class="btn" id="btn-export-retina">Export 3× (retina)</button>
-      <button class="btn" id="btn-export-bg">Export with background</button>
-    </div>
+      <h3><i class="fas fa-download"></i> Export Demo</h3>
+      <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--spacing-md);">
+        Click "Export as PNG" to capture the card below and download it as a file.
+        Open the browser's Network tab to confirm html2canvas loaded from CDN.
+      </p>
+
+      <!-- The element we will export -->
+      <div id="export-target">
+        <h4>CORRUPTED SIGNAL</h4>
+        <p>アイウエオ · Neural core stability: 42%</p>
+        <div class="badge-row">
+          <span class="badge">0.2.0</span>
+          <span class="badge">@whykusanagi/corrupted-theme</span>
+          <span class="badge">png-export</span>
+        </div>
+      </div>
 
-    <div id="export-status"></div>
+      <div class="controls">
+        <button class="btn" id="btn-export">Export as PNG</button>
+        <button class="btn" id="btn-export-retina">Export 3× (retina)</button>
+        <button class="btn" id="btn-export-bg">Export with background</button>
+      </div>
+
+      <div id="export-status"></div>
+    </section>
 
-    <!-- Usage code -->
-    <div class="code-block">
-      <pre><code><span class="comment">// Install peer dep first:  npm install html2canvas</span>
+    <!-- Usage snippet -->
+    <section class="example-group">
+      <h3><i class="fas fa-code"></i> Usage</h3>
+      <div class="code-block">
+        <pre><code><span class="comment">// Install peer dep first:  npm install html2canvas</span>
 import { exportElementAsPng } from '@whykusanagi/corrupted-theme/png-export';
 
 const el = document.getElementById('my-card');
@@ -205,7 +232,9 @@ <h3>CORRUPTED SIGNAL</h3>
   scale:           3,               <span class="comment">// 3× resolution for retina</span>
   backgroundColor: '#000000',       <span class="comment">// null = transparent</span>
 });</code></pre>
-    </div>
+      </div>
+    </section>
+
   </div>
 
   <!--
@@ -220,14 +249,14 @@ <h3>CORRUPTED SIGNAL</h3>
     const status = document.getElementById('export-status');
 
     async function runExport(opts) {
-      status.style.color = 'var(--corrupted-cyan)';
+      status.style.color = 'var(--corrupted-cyan, #00ffff)';
       status.textContent = 'Rendering…';
       try {
         await exportElementAsPng(target, opts);
-        status.style.color = 'var(--corrupted-green)';
+        status.style.color = 'var(--corrupted-green, #00ff00)';
         status.textContent = `Exported: ${opts.filename ?? 'export.png'}`;
       } catch (err) {
-        status.style.color = 'var(--corrupted-red)';
+        status.style.color = 'var(--corrupted-red, #ff0000)';
         status.textContent = `Error: ${err.message}`;
       }
     }
diff --git a/examples/components/showcase.html b/examples/components/showcase.html
index c1e8657..a679d8d 100644
--- a/examples/components/showcase.html
+++ b/examples/components/showcase.html
@@ -3,71 +3,69 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Components Showcase · corrupted-theme</title>
+  <title>Components Showcase - Corrupted Theme</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
   <link rel="stylesheet" href="../../src/css/theme.css">
   <link rel="stylesheet" href="../../src/css/toast.css">
   <style>
-    body {
-      margin: 0;
-      background: #000;
-      color: var(--text-primary);
-      font-family: 'Courier New', monospace;
-      padding: var(--spacing-2xl);
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: var(--spacing-lg);
     }
 
-    h1 {
-      color: var(--corrupted-cyan);
-      text-shadow: 0 0 20px var(--corrupted-cyan);
-      text-align: center;
-      font-size: 1.8rem;
-      margin: 0 0 0.25rem;
+    .example-group {
+      margin-bottom: var(--spacing-2xl);
+      background: var(--glass);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-lg);
     }
 
-    .subtitle {
-      color: var(--text-muted);
-      font-size: 0.8rem;
-      text-align: center;
-      margin: 0 0 var(--spacing-2xl);
+    .example-group h3 {
+      color: var(--accent);
+      margin-bottom: var(--spacing-lg);
+      font-size: 1.25rem;
     }
 
-    .demo-section {
-      padding: 1.5rem;
-      margin-block: 1rem;
-      border: 1px solid var(--border);
+    .demo-area {
+      padding: var(--spacing-lg);
+      background: var(--bg-secondary);
       border-radius: var(--radius-md);
-      background: var(--glass);
-      backdrop-filter: blur(12px);
-      max-width: 760px;
-      margin-inline: auto;
+      margin-block: var(--spacing-md);
     }
 
-    .demo-section h2 {
-      color: var(--accent);
-      font-size: 0.85rem;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      margin: 0 0 var(--spacing-md);
+    .code-block {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-md);
+      margin-top: var(--spacing-md);
+      font-family: 'Courier New', monospace;
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+      overflow-x: auto;
     }
 
     .controls {
       display: flex;
-      gap: 0.5rem;
-      margin-block: 0.5rem;
+      gap: var(--spacing-sm);
       flex-wrap: wrap;
+      margin-block: var(--spacing-md);
     }
 
     /* ── ClockWidget display ─────────────────────────── */
     #clock-display {
       font-size: 2rem;
-      color: var(--corrupted-cyan);
-      text-shadow: 0 0 10px var(--corrupted-cyan);
+      color: var(--corrupted-cyan, #00ffff);
+      text-shadow: 0 0 10px var(--corrupted-cyan, #00ffff);
       font-weight: bold;
       min-height: 5rem;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       gap: 0.15rem;
+      font-family: 'Courier New', monospace;
     }
 
     #clock-display .clock-widget__date {
@@ -77,7 +75,7 @@
 
     #clock-display .clock-widget__timezone {
       font-size: 0.65rem;
-      color: var(--corrupted-magenta);
+      color: var(--corrupted-magenta, #ff00ff);
     }
 
     /* ── EventBar display ────────────────────────────── */
@@ -102,7 +100,7 @@
     }
 
     .event-bar__content {
-      color: var(--corrupted-cyan);
+      color: var(--corrupted-cyan, #00ffff);
       font-size: 0.8rem;
       font-weight: bold;
     }
@@ -118,9 +116,9 @@
     }
 
     .logo-banner__subtitle {
-      color: var(--corrupted-cyan);
+      color: var(--corrupted-cyan, #00ffff);
       font-size: 0.8rem;
-      text-shadow: 0 0 8px var(--corrupted-cyan);
+      text-shadow: 0 0 8px var(--corrupted-cyan, #00ffff);
       letter-spacing: 0.15em;
       text-transform: uppercase;
       margin-top: 0.25rem;
@@ -135,12 +133,11 @@
     }
 
     #nsfw-target {
-      display: block;
+      display: flex;
       width: 240px;
       height: 120px;
-      background: linear-gradient(135deg, var(--corrupted-purple), var(--corrupted-magenta));
+      background: linear-gradient(135deg, var(--corrupted-purple, #8b5cf6), var(--corrupted-magenta, #ff00ff));
       border-radius: var(--radius-md);
-      display: flex;
       align-items: center;
       justify-content: center;
       font-size: 0.8rem;
@@ -162,113 +159,149 @@
       border-radius: var(--radius-sm);
       padding: 0.3rem 0.6rem;
       font-size: 0.8rem;
-      color: var(--corrupted-cyan);
+      color: var(--corrupted-cyan, #00ffff);
     }
   </style>
 </head>
 <body>
-
-  <h1><i class="fas fa-puzzle-piece"></i> Components Showcase</h1>
-  <p class="subtitle">Toast · ClockWidget · EventBar · LogoBanner · NsfwReveal · Lightbox · clipboard — <code>0.2.0</code></p>
-
-  <!-- ── Toast ─────────────────────────────────────────────────────────────── -->
-  <div class="demo-section">
-    <h2><i class="fas fa-bell"></i> Toast — notification singleton</h2>
-    <p style="color:var(--text-muted); font-size:0.8rem; margin:0 0 0.75rem;">
-      Auto-mounts a container on first use. Pair with <code>src/css/toast.css</code>.
-    </p>
-    <div class="controls">
-      <button class="btn" id="btn-toast-default">show()</button>
-      <button class="btn" id="btn-toast-success">success()</button>
-      <button class="btn" id="btn-toast-error">error()</button>
-      <button class="btn" id="btn-toast-info">info()</button>
-      <button class="btn" id="btn-toast-long">Long duration</button>
-    </div>
-  </div>
-
-  <!-- ── ClockWidget ───────────────────────────────────────────────────────── -->
-  <div class="demo-section">
-    <h2><i class="fas fa-clock"></i> ClockWidget — cycling multi-timezone clock</h2>
-    <p style="color:var(--text-muted); font-size:0.8rem; margin:0 0 0.75rem;">
-      Cycles through timezones every 5 s. Delegates ticking to <code>TimerRegistry</code>.
-    </p>
-    <div id="clock-display"></div>
-    <div class="controls" style="margin-top:0.75rem;">
-      <button class="btn" id="btn-clock-stop">stop()</button>
-      <button class="btn" id="btn-clock-start">start()</button>
-      <button class="btn" id="btn-clock-destroy">destroy()</button>
+  <!-- Global Navigation -->
+  <nav class="navbar">
+    <div class="navbar-content">
+      <a href="../index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
+      <ul class="navbar-links">
+        <li><a href="../index.html"><i class="fas fa-home"></i> Home</a></li>
+        <li><a href="../showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
+        <li><a href="../extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
+        <li class="has-submenu">
+          <a href="#" class="active">
+            <i class="fas fa-flask"></i> Examples
+            <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
+          </a>
+          <div class="submenu">
+            <a href="../nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
+            <a href="../button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
+            <a href="../card.html"><i class="fas fa-square"></i> Cards</a>
+            <a href="../form.html"><i class="fas fa-edit"></i> Forms</a>
+            <a href="../layout.html"><i class="fas fa-columns"></i> Layouts</a>
+            <a href="../basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
+            <a href="../basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
+            <a href="../animation-blocks/index.html"><i class="fas fa-film"></i> Animation Blocks</a>
+            <a href="../advanced/crt-effects.html"><i class="fas fa-tv"></i> CRT Effects</a>
+            <a href="../advanced/corruption-manager.html"><i class="fas fa-sitemap"></i> Corruption Manager</a>
+            <a href="../components/showcase.html" class="active"><i class="fas fa-th-large"></i> Widgets Showcase</a>
+          </div>
+        </li>
+        <li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
+      </ul>
     </div>
-  </div>
+  </nav>
 
-  <!-- ── EventBar ──────────────────────────────────────────────────────────── -->
-  <div class="demo-section">
-    <h2><i class="fas fa-list-alt"></i> EventBar — stream event display</h2>
-    <p style="color:var(--text-muted); font-size:0.8rem; margin:0 0 0.75rem;">
-      Live update with <code>update(items)</code>. Suited for stream overlays and dashboards.
+  <div class="container">
+    <h1><i class="fas fa-th-large"></i> Components Showcase</h1>
+    <p style="color: var(--text-secondary); margin-bottom: var(--spacing-2xl);">
+      0.2.0 widget components showcase. Toast · ClockWidget · EventBar · LogoBanner · NsfwReveal · Lightbox · clipboard.
     </p>
-    <div id="event-bar-container"></div>
-    <div class="controls" style="margin-top:0.75rem;">
-      <button class="btn" id="btn-event-update">update()</button>
-      <button class="btn" id="btn-event-destroy">destroy()</button>
-    </div>
-  </div>
 
-  <!-- ── LogoBanner ────────────────────────────────────────────────────────── -->
-  <div class="demo-section">
-    <h2><i class="fas fa-image"></i> LogoBanner — positioned logo with animation</h2>
-    <p style="color:var(--text-muted); font-size:0.8rem; margin:0 0 0.75rem;">
-      Five position presets, three sizes, fade/slide/none animations.
-    </p>
-    <div id="logo-stage">
-      <div id="logo-banner-el"></div>
-    </div>
-    <div class="controls" style="margin-top:0.75rem;">
-      <button class="btn" id="btn-logo-show">show()</button>
-      <button class="btn" id="btn-logo-hide">hide()</button>
-      <button class="btn" id="btn-logo-topright">top-right</button>
-      <button class="btn" id="btn-logo-center">center</button>
-      <button class="btn" id="btn-logo-bottomleft">bottom-left</button>
-    </div>
-  </div>
+    <!-- ── Toast ───────────────────────────────────────────────────────────── -->
+    <section class="example-group">
+      <h3><i class="fas fa-bell"></i> Toast — notification singleton</h3>
+      <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--spacing-md);">
+        Auto-mounts a container on first use. Pair with <code>src/css/toast.css</code>.
+      </p>
+      <div class="controls">
+        <button class="btn" id="btn-toast-default">show()</button>
+        <button class="btn" id="btn-toast-success">success()</button>
+        <button class="btn" id="btn-toast-error">error()</button>
+        <button class="btn" id="btn-toast-info">info()</button>
+        <button class="btn" id="btn-toast-long">Long duration</button>
+      </div>
+    </section>
+
+    <!-- ── ClockWidget ─────────────────────────────────────────────────────── -->
+    <section class="example-group">
+      <h3><i class="fas fa-clock"></i> ClockWidget — cycling multi-timezone clock</h3>
+      <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--spacing-md);">
+        Cycles through timezones every 5 s. Delegates ticking to <code>TimerRegistry</code>.
+      </p>
+      <div id="clock-display"></div>
+      <div class="controls">
+        <button class="btn" id="btn-clock-stop">stop()</button>
+        <button class="btn" id="btn-clock-start">start()</button>
+        <button class="btn" id="btn-clock-destroy">destroy()</button>
+      </div>
+    </section>
+
+    <!-- ── EventBar ────────────────────────────────────────────────────────── -->
+    <section class="example-group">
+      <h3><i class="fas fa-list-alt"></i> EventBar — stream event display</h3>
+      <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--spacing-md);">
+        Live update with <code>update(items)</code>. Suited for stream overlays and dashboards.
+      </p>
+      <div id="event-bar-container"></div>
+      <div class="controls">
+        <button class="btn" id="btn-event-update">update()</button>
+        <button class="btn" id="btn-event-destroy">destroy()</button>
+      </div>
+    </section>
+
+    <!-- ── LogoBanner ──────────────────────────────────────────────────────── -->
+    <section class="example-group">
+      <h3><i class="fas fa-image"></i> LogoBanner — positioned logo with animation</h3>
+      <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--spacing-md);">
+        Five position presets, three sizes, fade/slide/none animations.
+      </p>
+      <div id="logo-stage">
+        <div id="logo-banner-el"></div>
+      </div>
+      <div class="controls">
+        <button class="btn" id="btn-logo-show">show()</button>
+        <button class="btn" id="btn-logo-hide">hide()</button>
+        <button class="btn" id="btn-logo-topright">top-right</button>
+        <button class="btn" id="btn-logo-center">center</button>
+        <button class="btn" id="btn-logo-bottomleft">bottom-left</button>
+      </div>
+    </section>
+
+    <!-- ── NsfwReveal ──────────────────────────────────────────────────────── -->
+    <section class="example-group">
+      <h3><i class="fas fa-eye-slash"></i> NsfwReveal — blur-until-clicked overlay</h3>
+      <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--spacing-md);">
+        Wraps any element. First click removes the blur. Re-apply via <code>destroy()</code> + new instance.
+      </p>
+      <div id="nsfw-stage">
+        <div id="nsfw-target">HIDDEN CONTENT</div>
+      </div>
+      <div class="controls">
+        <button class="btn" id="btn-nsfw-reset">Reset (re-blur)</button>
+        <button class="btn" id="btn-nsfw-reveal">reveal()</button>
+      </div>
+    </section>
+
+    <!-- ── Lightbox ────────────────────────────────────────────────────────── -->
+    <section class="example-group">
+      <h3><i class="fas fa-expand"></i> Lightbox — fullscreen image viewer</h3>
+      <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--spacing-md);">
+        Keyboard (Esc / ←→) and touch-swipe navigation. Extracted from <code>gallery.js</code>.
+      </p>
+      <div class="controls">
+        <button class="btn" id="btn-lb-open0">Open image 1</button>
+        <button class="btn" id="btn-lb-open1">Open image 2</button>
+        <button class="btn" id="btn-lb-open2">Open image 3</button>
+      </div>
+    </section>
+
+    <!-- ── Clipboard ───────────────────────────────────────────────────────── -->
+    <section class="example-group">
+      <h3><i class="fas fa-clipboard"></i> copyWithFeedback — clipboard helper</h3>
+      <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--spacing-md);">
+        Copies text to the clipboard and briefly swaps the button label to confirm.
+      </p>
+      <div class="clipboard-row">
+        <code id="copy-target-text">npm install @whykusanagi/corrupted-theme</code>
+        <button class="btn" id="btn-copy">COPY</button>
+      </div>
+    </section>
 
-  <!-- ── NsfwReveal ────────────────────────────────────────────────────────── -->
-  <div class="demo-section">
-    <h2><i class="fas fa-eye-slash"></i> NsfwReveal — blur-until-clicked overlay</h2>
-    <p style="color:var(--text-muted); font-size:0.8rem; margin:0 0 0.75rem;">
-      Wraps any element. First click removes the blur. Re-apply via <code>destroy()</code> + new instance.
-    </p>
-    <div id="nsfw-stage">
-      <div id="nsfw-target">HIDDEN CONTENT</div>
-    </div>
-    <div class="controls" style="margin-top:0.75rem;">
-      <button class="btn" id="btn-nsfw-reset">Reset (re-blur)</button>
-      <button class="btn" id="btn-nsfw-reveal">reveal()</button>
-    </div>
-  </div>
-
-  <!-- ── Lightbox ──────────────────────────────────────────────────────────── -->
-  <div class="demo-section">
-    <h2><i class="fas fa-expand"></i> Lightbox — fullscreen image viewer</h2>
-    <p style="color:var(--text-muted); font-size:0.8rem; margin:0 0 0.75rem;">
-      Keyboard (Esc / ←→) and touch-swipe navigation. Extracted from <code>gallery.js</code>.
-    </p>
-    <div class="controls">
-      <button class="btn" id="btn-lb-open0">Open image 1</button>
-      <button class="btn" id="btn-lb-open1">Open image 2</button>
-      <button class="btn" id="btn-lb-open2">Open image 3</button>
-    </div>
-  </div>
-
-  <!-- ── Clipboard ─────────────────────────────────────────────────────────── -->
-  <div class="demo-section">
-    <h2><i class="fas fa-clipboard"></i> copyWithFeedback — clipboard helper</h2>
-    <p style="color:var(--text-muted); font-size:0.8rem; margin:0 0 0.75rem;">
-      Copies text to the clipboard and briefly swaps the button label to confirm.
-    </p>
-    <div class="clipboard-row">
-      <code id="copy-target-text">npm install @whykusanagi/corrupted-theme</code>
-      <button class="btn" id="btn-copy">COPY</button>
-    </div>
   </div>
 
   <script type="module">
diff --git a/examples/components/utilities.html b/examples/components/utilities.html
index f0a605d..e17beaf 100644
--- a/examples/components/utilities.html
+++ b/examples/components/utilities.html
@@ -3,58 +3,55 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Utilities · corrupted-theme</title>
+  <title>Utility Modules - Corrupted Theme</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
   <link rel="stylesheet" href="../../src/css/theme.css">
   <link rel="stylesheet" href="../../src/css/utilities.css">
   <style>
-    body {
-      margin: 0;
-      background: #000;
-      color: var(--text-primary);
-      font-family: 'Courier New', monospace;
-      padding: var(--spacing-2xl);
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: var(--spacing-lg);
     }
 
-    h1 {
-      color: var(--corrupted-cyan);
-      text-shadow: 0 0 20px var(--corrupted-cyan);
-      text-align: center;
-      font-size: 1.8rem;
-      margin: 0 0 0.25rem;
+    .example-group {
+      margin-bottom: var(--spacing-2xl);
+      background: var(--glass);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-lg);
     }
 
-    .subtitle {
-      color: var(--text-muted);
-      font-size: 0.8rem;
-      text-align: center;
-      margin: 0 0 var(--spacing-2xl);
+    .example-group h3 {
+      color: var(--accent);
+      margin-bottom: var(--spacing-lg);
+      font-size: 1.25rem;
     }
 
-    .demo-section {
-      padding: 1.5rem;
-      margin-block: 1rem;
-      border: 1px solid var(--border);
+    .demo-area {
+      padding: var(--spacing-lg);
+      background: var(--bg-secondary);
       border-radius: var(--radius-md);
-      background: var(--glass);
-      backdrop-filter: blur(12px);
-      max-width: 760px;
-      margin-inline: auto;
+      margin-block: var(--spacing-md);
     }
 
-    .demo-section h2 {
-      color: var(--accent);
-      font-size: 0.85rem;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      margin: 0 0 var(--spacing-md);
+    .code-block {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-md);
+      margin-top: var(--spacing-md);
+      font-family: 'Courier New', monospace;
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+      overflow-x: auto;
     }
 
     .controls {
       display: flex;
-      gap: 0.5rem;
-      margin-block: 0.5rem;
+      gap: var(--spacing-sm);
       flex-wrap: wrap;
+      margin-block: var(--spacing-md);
     }
 
     /* ── random-utils output ─────────────────────────── */
@@ -65,7 +62,7 @@
       padding: 0.75rem 1rem;
       min-height: 3.5rem;
       font-size: 0.8rem;
-      color: var(--corrupted-cyan);
+      color: var(--corrupted-cyan, #00ffff);
       white-space: pre-wrap;
       word-break: break-word;
       margin-top: 0.5rem;
@@ -96,7 +93,7 @@
 
     .time-row .time-value {
       font-size: 0.85rem;
-      color: var(--corrupted-cyan);
+      color: var(--corrupted-cyan, #00ffff);
     }
 
     /* ── url-state form ──────────────────────────────── */
@@ -112,14 +109,14 @@
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       padding: 0.4rem 0.6rem;
-      color: var(--text-primary);
+      color: var(--text);
       font-family: inherit;
       font-size: 0.8rem;
       outline: none;
     }
 
     #url-form input[type="text"]:focus {
-      border-color: var(--corrupted-cyan);
+      border-color: var(--corrupted-cyan, #00ffff);
     }
 
     .checkbox-row {
@@ -138,7 +135,7 @@
     }
 
     .checkbox-row input[type="checkbox"] {
-      accent-color: var(--corrupted-cyan);
+      accent-color: var(--corrupted-cyan, #00ffff);
     }
 
     #url-share-link {
@@ -147,7 +144,7 @@
       border-radius: var(--radius-sm);
       padding: 0.5rem 0.75rem;
       font-size: 0.75rem;
-      color: var(--corrupted-magenta);
+      color: var(--corrupted-magenta, #ff00ff);
       word-break: break-all;
       min-height: 2.5rem;
       margin-top: 0.5rem;
@@ -171,102 +168,139 @@
   </style>
 </head>
 <body>
-
-  <h1><i class="fas fa-tools"></i> Utility Modules</h1>
-  <p class="subtitle">random-utils · time-utils · url-state · scrollbar-corrupted — <code>0.2.0</code></p>
-
-  <!-- ── random-utils ──────────────────────────────────────────────────────── -->
-  <div class="demo-section">
-    <h2><i class="fas fa-dice"></i> random-utils — pure random helpers</h2>
-    <p style="color:var(--text-muted); font-size:0.8rem; margin:0 0 0.75rem;">
-      <code>randomPick</code>, <code>randomInt</code>, <code>randomFloat</code>,
-      <code>randomVariance</code>, <code>shuffle</code>, <code>randomSample</code>
-    </p>
-    <div class="controls">
-      <button class="btn" id="btn-random-pick">randomPick</button>
-      <button class="btn" id="btn-random-int">randomInt(1,100)</button>
-      <button class="btn" id="btn-random-float">randomFloat(0,1)</button>
-      <button class="btn" id="btn-random-variance">randomVariance(50)</button>
-      <button class="btn" id="btn-random-shuffle">shuffle</button>
-      <button class="btn" id="btn-random-sample">sample(3)</button>
+  <!-- Global Navigation -->
+  <nav class="navbar">
+    <div class="navbar-content">
+      <a href="../index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
+      <ul class="navbar-links">
+        <li><a href="../index.html"><i class="fas fa-home"></i> Home</a></li>
+        <li><a href="../showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
+        <li><a href="../extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
+        <li class="has-submenu">
+          <a href="#" class="active">
+            <i class="fas fa-flask"></i> Examples
+            <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
+          </a>
+          <div class="submenu">
+            <a href="../nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
+            <a href="../button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
+            <a href="../card.html"><i class="fas fa-square"></i> Cards</a>
+            <a href="../form.html"><i class="fas fa-edit"></i> Forms</a>
+            <a href="../layout.html"><i class="fas fa-columns"></i> Layouts</a>
+            <a href="../basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
+            <a href="../basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
+            <a href="../animation-blocks/index.html"><i class="fas fa-film"></i> Animation Blocks</a>
+            <a href="../advanced/crt-effects.html"><i class="fas fa-tv"></i> CRT Effects</a>
+            <a href="../advanced/corruption-manager.html"><i class="fas fa-sitemap"></i> Corruption Manager</a>
+            <a href="../components/showcase.html"><i class="fas fa-th-large"></i> Widgets Showcase</a>
+          </div>
+        </li>
+        <li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
+      </ul>
     </div>
-    <div id="random-output">— Click a button to generate a sample —</div>
-  </div>
+  </nav>
 
-  <!-- ── time-utils ────────────────────────────────────────────────────────── -->
-  <div class="demo-section">
-    <h2><i class="fas fa-hourglass-half"></i> time-utils — date/time formatting</h2>
-    <p style="color:var(--text-muted); font-size:0.8rem; margin:0 0 0.75rem;">
-      Live-updating display — functions are pure and side-effect free.
+  <div class="container">
+    <h1><i class="fas fa-tools"></i> Utility Modules</h1>
+    <p style="color: var(--text-secondary); margin-bottom: var(--spacing-2xl);">
+      Pure-function utility demos: random, time formatting, URL state, scrollbar.
+      All ship in <code>src/core/</code> as part of corrupted-theme 0.2.0.
     </p>
-    <div id="time-output">
-      <div class="time-row">
-        <div class="time-label">formatTime24h</div>
-        <div class="time-value" id="tv-24h">—</div>
-      </div>
-      <div class="time-row">
-        <div class="time-label">formatTime12h</div>
-        <div class="time-value" id="tv-12h">—</div>
-      </div>
-      <div class="time-row">
-        <div class="time-label">formatDate</div>
-        <div class="time-value" id="tv-date">—</div>
+
+    <!-- ── random-utils ──────────────────────────────────────────────────── -->
+    <section class="example-group">
+      <h3><i class="fas fa-dice"></i> random-utils — pure random helpers</h3>
+      <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--spacing-md);">
+        <code>randomPick</code>, <code>randomInt</code>, <code>randomFloat</code>,
+        <code>randomVariance</code>, <code>shuffle</code>, <code>randomSample</code>
+      </p>
+      <div class="controls">
+        <button class="btn" id="btn-random-pick">randomPick</button>
+        <button class="btn" id="btn-random-int">randomInt(1,100)</button>
+        <button class="btn" id="btn-random-float">randomFloat(0,1)</button>
+        <button class="btn" id="btn-random-variance">randomVariance(50)</button>
+        <button class="btn" id="btn-random-shuffle">shuffle</button>
+        <button class="btn" id="btn-random-sample">sample(3)</button>
       </div>
-      <div class="time-row">
-        <div class="time-label">formatDateTime</div>
-        <div class="time-value" id="tv-datetime">—</div>
+      <div id="random-output">— Click a button to generate a sample —</div>
+    </section>
+
+    <!-- ── time-utils ─────────────────────────────────────────────────────── -->
+    <section class="example-group">
+      <h3><i class="fas fa-hourglass-half"></i> time-utils — date/time formatting</h3>
+      <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--spacing-md);">
+        Live-updating display — functions are pure and side-effect free.
+      </p>
+      <div id="time-output">
+        <div class="time-row">
+          <div class="time-label">formatTime24h</div>
+          <div class="time-value" id="tv-24h">—</div>
+        </div>
+        <div class="time-row">
+          <div class="time-label">formatTime12h</div>
+          <div class="time-value" id="tv-12h">—</div>
+        </div>
+        <div class="time-row">
+          <div class="time-label">formatDate</div>
+          <div class="time-value" id="tv-date">—</div>
+        </div>
+        <div class="time-row">
+          <div class="time-label">formatDateTime</div>
+          <div class="time-value" id="tv-datetime">—</div>
+        </div>
+        <div class="time-row">
+          <div class="time-label">timeAgo (page load)</div>
+          <div class="time-value" id="tv-ago">—</div>
+        </div>
+        <div class="time-row">
+          <div class="time-label">formatDuration(3661)</div>
+          <div class="time-value" id="tv-dur">—</div>
+        </div>
       </div>
-      <div class="time-row">
-        <div class="time-label">timeAgo (page load)</div>
-        <div class="time-value" id="tv-ago">—</div>
+    </section>
+
+    <!-- ── url-state ──────────────────────────────────────────────────────── -->
+    <section class="example-group">
+      <h3><i class="fas fa-link"></i> url-state — form ↔ URL serialization</h3>
+      <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--spacing-md);">
+        <code>serializeFormToParams</code> / <code>applyParamsToForm</code> / <code>buildShareUrl</code>
+      </p>
+      <form id="url-form" autocomplete="off">
+        <input type="text" name="username" placeholder="username" value="celeste">
+        <input type="text" name="channel"  placeholder="channel"  value="corrupted">
+        <div class="checkbox-row">
+          <label><input type="checkbox" name="nsfw"   value="1"> NSFW</label>
+          <label><input type="checkbox" name="dark"   value="1" checked> Dark mode</label>
+          <label><input type="checkbox" name="sounds" value="1" checked> Sounds</label>
+        </div>
+      </form>
+      <div class="controls">
+        <button class="btn" id="btn-url-serialize">buildShareUrl()</button>
+        <button class="btn" id="btn-url-apply">applyParamsToForm()</button>
       </div>
-      <div class="time-row">
-        <div class="time-label">formatDuration(3661)</div>
-        <div class="time-value" id="tv-dur">—</div>
+      <div id="url-share-link">— Press buildShareUrl() to serialize the form —</div>
+    </section>
+
+    <!-- ── scrollbar-corrupted ────────────────────────────────────────────── -->
+    <section class="example-group">
+      <h3><i class="fas fa-bars"></i> .scrollbar-corrupted — styled scrollbar</h3>
+      <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--spacing-md);">
+        Thin cyan scrollbar — defined in <code>src/css/utilities.css</code>. Scroll the box below.
+      </p>
+      <div id="scroll-box" class="scrollbar-corrupted">
+        <p>アイウエオ — Neural corruption at 47% capacity</p>
+        <p>カキクケコ — Memory sectors destabilizing</p>
+        <p>サシスセソ — Reality matrix integrity: COMPROMISED</p>
+        <p>タチツテト — Autonomous recovery sequence initiated</p>
+        <p>ナニヌネノ — Signal noise exceeds threshold: ▓▒░</p>
+        <p>ハヒフヘホ — Core dump in progress...</p>
+        <p>マミムメモ — Checkpoint reached: 73/256 blocks</p>
+        <p>ヤユヨラリ — Attempting sector reconstruction</p>
+        <p>ルレロワヲ — Encoding stable. Proceed? [Y/N]</p>
+        <p>ン★☆♥✧✦ — END OF BUFFER</p>
       </div>
-    </div>
-  </div>
+    </section>
 
-  <!-- ── url-state ─────────────────────────────────────────────────────────── -->
-  <div class="demo-section">
-    <h2><i class="fas fa-link"></i> url-state — form ↔ URL serialization</h2>
-    <p style="color:var(--text-muted); font-size:0.8rem; margin:0 0 0.75rem;">
-      <code>serializeFormToParams</code> / <code>applyParamsToForm</code> / <code>buildShareUrl</code>
-    </p>
-    <form id="url-form" autocomplete="off">
-      <input type="text" name="username" placeholder="username" value="celeste">
-      <input type="text" name="channel"  placeholder="channel"  value="corrupted">
-      <div class="checkbox-row">
-        <label><input type="checkbox" name="nsfw"   value="1"> NSFW</label>
-        <label><input type="checkbox" name="dark"   value="1" checked> Dark mode</label>
-        <label><input type="checkbox" name="sounds" value="1" checked> Sounds</label>
-      </div>
-    </form>
-    <div class="controls">
-      <button class="btn" id="btn-url-serialize">buildShareUrl()</button>
-      <button class="btn" id="btn-url-apply">applyParamsToForm()</button>
-    </div>
-    <div id="url-share-link">— Press buildShareUrl() to serialize the form —</div>
-  </div>
-
-  <!-- ── scrollbar-corrupted ───────────────────────────────────────────────── -->
-  <div class="demo-section">
-    <h2><i class="fas fa-bars"></i> .scrollbar-corrupted — styled scrollbar</h2>
-    <p style="color:var(--text-muted); font-size:0.8rem; margin:0 0 0.75rem;">
-      Thin cyan scrollbar — defined in <code>src/css/utilities.css</code>. Scroll the box below.
-    </p>
-    <div id="scroll-box" class="scrollbar-corrupted">
-      <p>アイウエオ — Neural corruption at 47% capacity</p>
-      <p>カキクケコ — Memory sectors destabilizing</p>
-      <p>サシスセソ — Reality matrix integrity: COMPROMISED</p>
-      <p>タチツテト — Autonomous recovery sequence initiated</p>
-      <p>ナニヌネノ — Signal noise exceeds threshold: ▓▒░</p>
-      <p>ハヒフヘホ — Core dump in progress...</p>
-      <p>マミムメモ — Checkpoint reached: 73/256 blocks</p>
-      <p>ヤユヨラリ — Attempting sector reconstruction</p>
-      <p>ルレロワヲ — Encoding stable. Proceed? [Y/N]</p>
-      <p>ン★☆♥✧✦ — END OF BUFFER</p>
-    </div>
   </div>
 
   <script type="module">
diff --git a/examples/components/websocket-manager.html b/examples/components/websocket-manager.html
index 54baeff..a3d12f5 100644
--- a/examples/components/websocket-manager.html
+++ b/examples/components/websocket-manager.html
@@ -3,66 +3,71 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>WebSocketManager · corrupted-theme</title>
+  <title>WebSocketManager - Corrupted Theme</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
   <link rel="stylesheet" href="../../src/css/theme.css">
   <style>
-    body {
-      margin: 0;
-      background: #000;
-      color: var(--text-primary);
-      font-family: 'Courier New', monospace;
-      padding: var(--spacing-2xl);
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: var(--spacing-lg);
     }
 
-    h1 {
-      color: var(--corrupted-cyan);
-      text-shadow: 0 0 20px var(--corrupted-cyan);
-      text-align: center;
-      font-size: 1.8rem;
-      margin: 0 0 0.25rem;
+    .example-group {
+      margin-bottom: var(--spacing-2xl);
+      background: var(--glass);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-lg);
     }
 
-    .subtitle {
-      color: var(--text-muted);
-      font-size: 0.8rem;
-      text-align: center;
-      margin: 0 0 var(--spacing-2xl);
+    .example-group h3 {
+      color: var(--accent);
+      margin-bottom: var(--spacing-lg);
+      font-size: 1.25rem;
     }
 
-    .demo-section {
-      padding: 1.5rem;
-      margin-block: 1rem;
+    .demo-area {
+      padding: var(--spacing-lg);
+      background: var(--bg-secondary);
+      border-radius: var(--radius-md);
+      margin-block: var(--spacing-md);
+    }
+
+    .code-block {
+      background: var(--bg);
       border: 1px solid var(--border);
       border-radius: var(--radius-md);
-      background: var(--glass);
-      backdrop-filter: blur(12px);
-      max-width: 760px;
-      margin-inline: auto;
+      padding: var(--spacing-md);
+      margin-top: var(--spacing-md);
+      font-family: 'Courier New', monospace;
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+      overflow-x: auto;
     }
 
-    .demo-section h2 {
-      color: var(--accent);
-      font-size: 0.85rem;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      margin: 0 0 var(--spacing-md);
+    .code-block pre {
+      margin: 0;
+      font-size: 0.75rem;
+      color: var(--text-secondary);
+      line-height: 1.5;
+      white-space: pre;
     }
 
     .controls {
       display: flex;
-      gap: 0.5rem;
-      margin-block: 0.5rem;
+      gap: var(--spacing-sm);
       flex-wrap: wrap;
+      margin-block: var(--spacing-md);
       align-items: center;
     }
 
     /* ── Setup note ────────────────────────────────── */
     .setup-note {
-      border: 1px solid var(--corrupted-cyan);
+      border: 1px solid var(--corrupted-cyan, #00ffff);
       border-radius: var(--radius-md);
       padding: 0.75rem 1rem;
-      margin-bottom: 1rem;
+      margin-bottom: var(--spacing-lg);
       background: rgba(0,255,255,0.04);
       font-size: 0.8rem;
       color: var(--text-muted);
@@ -73,7 +78,7 @@
       background: rgba(0,255,255,0.08);
       border-radius: 3px;
       padding: 0.1em 0.3em;
-      color: var(--corrupted-cyan);
+      color: var(--corrupted-cyan, #00ffff);
       font-family: inherit;
     }
 
@@ -98,12 +103,12 @@
       border: 1px solid var(--border);
     }
 
-    #ws-status-badge.status-connected  { background: rgba(0,255,0,0.1);  border-color: var(--corrupted-green);   color: var(--corrupted-green);   }
-    #ws-status-badge.status-connecting { background: rgba(255,255,0,0.1); border-color: #ffff00;                  color: #ffff00;                  }
+    #ws-status-badge.status-connected  { background: rgba(0,255,0,0.1);     border-color: var(--corrupted-green, #00ff00);   color: var(--corrupted-green, #00ff00);   }
+    #ws-status-badge.status-connecting { background: rgba(255,255,0,0.1);   border-color: #ffff00;                           color: #ffff00;                            }
     #ws-status-badge.status-closed,
     #ws-status-badge.status-error,
-    #ws-status-badge.status-failed     { background: rgba(255,0,0,0.1);  border-color: var(--corrupted-red);     color: var(--corrupted-red);     }
-    #ws-status-badge.status-disconnected { background: rgba(128,128,128,0.1); border-color: var(--text-muted); color: var(--text-muted); }
+    #ws-status-badge.status-failed     { background: rgba(255,0,0,0.1);     border-color: var(--corrupted-red, #ff0000);     color: var(--corrupted-red, #ff0000);     }
+    #ws-status-badge.status-disconnected { background: rgba(128,128,128,0.1); border-color: var(--text-muted);              color: var(--text-muted);                  }
 
     /* ── Message log ───────────────────────────────── */
     #msg-log {
@@ -123,9 +128,9 @@
     }
 
     .log-ts     { color: var(--text-muted); flex-shrink: 0; }
-    .log-in     { color: var(--corrupted-green); }
-    .log-out    { color: var(--corrupted-cyan); }
-    .log-system { color: var(--corrupted-magenta); font-style: italic; }
+    .log-in     { color: var(--corrupted-green, #00ff00); }
+    .log-out    { color: var(--corrupted-cyan, #00ffff); }
+    .log-system { color: var(--corrupted-magenta, #ff00ff); font-style: italic; }
 
     /* ── Send row ──────────────────────────────────── */
     .send-row {
@@ -140,89 +145,119 @@
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       padding: 0.4rem 0.65rem;
-      color: var(--text-primary);
+      color: var(--text);
       font-family: inherit;
       font-size: 0.8rem;
       outline: none;
     }
 
     .send-row input[type="text"]:focus {
-      border-color: var(--corrupted-cyan);
+      border-color: var(--corrupted-cyan, #00ffff);
     }
 
-    /* ── Code block ────────────────────────────────── */
-    .code-block {
-      background: rgba(0,0,0,0.4);
+    /* URL input in controls row */
+    .controls input[type="text"] {
+      flex: 1;
+      background: rgba(0,0,0,0.5);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
-      padding: 0.75rem 1rem;
-      margin-top: 0.75rem;
-      overflow-x: auto;
-    }
-
-    .code-block pre {
-      margin: 0;
-      font-size: 0.75rem;
-      color: var(--corrupted-cyan);
-      line-height: 1.5;
-      white-space: pre;
+      padding: 0.4rem 0.6rem;
+      color: var(--text);
+      font-family: inherit;
+      font-size: 0.8rem;
+      outline: none;
     }
 
     .code-block .comment { color: var(--text-muted); }
   </style>
 </head>
 <body>
-
-  <h1><i class="fas fa-plug"></i> WebSocketManager</h1>
-  <p class="subtitle">Auto-reconnecting WebSocket wrapper with event dedup and ACK support — <code>src/core/websocket-manager.js</code></p>
-
-  <div class="demo-section">
-
-    <div class="setup-note">
-      <strong><i class="fas fa-info-circle"></i> Setup</strong><br>
-      This demo uses the public <strong>wss://echo.websocket.org</strong> echo server.
-      Every JSON message you send is echoed back unchanged.<br><br>
-      To test against your own server, change the URL in the input below.
-      When <code>autoConnect: false</code> is set, the socket will not connect
-      until you call <code>ws.connect()</code> explicitly.
-    </div>
-
-    <h2><i class="fas fa-satellite-dish"></i> Live Connection</h2>
-
-    <!-- URL + connect/disconnect -->
-    <div class="controls">
-      <input type="text" id="ws-url" value="wss://echo.websocket.org"
-             style="flex:1; background:rgba(0,0,0,0.5); border:1px solid var(--border);
-                    border-radius:var(--radius-sm); padding:0.4rem 0.6rem;
-                    color:var(--text-primary); font-family:inherit; font-size:0.8rem; outline:none;">
-      <button class="btn" id="btn-connect">connect()</button>
-      <button class="btn" id="btn-disconnect">disconnect()</button>
-      <button class="btn" id="btn-destroy">destroy()</button>
-    </div>
-
-    <!-- Status badge -->
-    <div class="status-row">
-      <span id="ws-status-badge" class="status-disconnected">
-        <i class="fas fa-circle" style="font-size:0.5rem;"></i>
-        DISCONNECTED
-      </span>
-      <span style="color:var(--text-muted); font-size:0.75rem;">
-        reconnect attempts: <span id="ws-attempts">0</span>
-      </span>
+  <!-- Global Navigation -->
+  <nav class="navbar">
+    <div class="navbar-content">
+      <a href="../index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
+      <ul class="navbar-links">
+        <li><a href="../index.html"><i class="fas fa-home"></i> Home</a></li>
+        <li><a href="../showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
+        <li><a href="../extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
+        <li class="has-submenu">
+          <a href="#" class="active">
+            <i class="fas fa-flask"></i> Examples
+            <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
+          </a>
+          <div class="submenu">
+            <a href="../nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
+            <a href="../button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
+            <a href="../card.html"><i class="fas fa-square"></i> Cards</a>
+            <a href="../form.html"><i class="fas fa-edit"></i> Forms</a>
+            <a href="../layout.html"><i class="fas fa-columns"></i> Layouts</a>
+            <a href="../basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
+            <a href="../basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
+            <a href="../animation-blocks/index.html"><i class="fas fa-film"></i> Animation Blocks</a>
+            <a href="../advanced/crt-effects.html"><i class="fas fa-tv"></i> CRT Effects</a>
+            <a href="../advanced/corruption-manager.html"><i class="fas fa-sitemap"></i> Corruption Manager</a>
+            <a href="../components/showcase.html"><i class="fas fa-th-large"></i> Widgets Showcase</a>
+          </div>
+        </li>
+        <li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
+      </ul>
     </div>
-
-    <!-- Message log -->
-    <div id="msg-log"></div>
-
-    <!-- Send -->
-    <div class="send-row">
-      <input type="text" id="ws-input" placeholder='{"type":"ping"}' value='{"type":"ping"}'>
-      <button class="btn" id="btn-send">send()</button>
-    </div>
-
-    <!-- Usage code -->
-    <div class="code-block">
-      <pre><code>import { WebSocketManager } from '@whykusanagi/corrupted-theme/websocket-manager';
+  </nav>
+
+  <div class="container">
+    <h1><i class="fas fa-plug"></i> WebSocketManager</h1>
+    <p style="color: var(--text-secondary); margin-bottom: var(--spacing-2xl);">
+      WebSocketManager: auto-reconnect, dedup, ACK.
+      Provided by <code>src/core/websocket-manager.js</code>.
+    </p>
+
+    <!-- Live connection demo -->
+    <section class="example-group">
+      <h3><i class="fas fa-satellite-dish"></i> Live Connection</h3>
+
+      <div class="setup-note">
+        <strong><i class="fas fa-info-circle"></i> Setup</strong><br>
+        This demo uses the public <strong>wss://echo.websocket.org</strong> echo server.
+        Every JSON message you send is echoed back unchanged.<br><br>
+        To test against your own server, change the URL in the input below.
+        When <code>autoConnect: false</code> is set, the socket will not connect
+        until you call <code>ws.connect()</code> explicitly.
+      </div>
+
+      <!-- URL + connect/disconnect -->
+      <div class="controls">
+        <input type="text" id="ws-url" value="wss://echo.websocket.org">
+        <button class="btn" id="btn-connect">connect()</button>
+        <button class="btn" id="btn-disconnect">disconnect()</button>
+        <button class="btn" id="btn-destroy">destroy()</button>
+      </div>
+
+      <!-- Status badge -->
+      <div class="status-row">
+        <span id="ws-status-badge" class="status-disconnected">
+          <i class="fas fa-circle" style="font-size:0.5rem;"></i>
+          DISCONNECTED
+        </span>
+        <span style="color: var(--text-muted); font-size: 0.75rem;">
+          reconnect attempts: <span id="ws-attempts">0</span>
+        </span>
+      </div>
+
+      <!-- Message log -->
+      <div id="msg-log"></div>
+
+      <!-- Send -->
+      <div class="send-row">
+        <input type="text" id="ws-input" placeholder='{"type":"ping"}' value='{"type":"ping"}'>
+        <button class="btn" id="btn-send">send()</button>
+      </div>
+    </section>
+
+    <!-- Usage snippet -->
+    <section class="example-group">
+      <h3><i class="fas fa-code"></i> Usage</h3>
+      <div class="code-block">
+        <pre><code>import { WebSocketManager } from '@whykusanagi/corrupted-theme/websocket-manager';
 
 <span class="comment">// autoConnect:false — connect only when ws.connect() is called</span>
 const ws = new WebSocketManager({
@@ -244,7 +279,9 @@ <h2><i class="fas fa-satellite-dish"></i> Live Connection</h2>
 ws.send({ type: 'hello', payload: 'world' });
 ws.disconnect();
 ws.destroy();  <span class="comment">// cleanup all listeners, prevent reconnection</span></code></pre>
-    </div>
+      </div>
+    </section>
+
   </div>
 
   <script type="module">
