@hustle-together/api-dev-tools 2.0.6 → 3.0.0

package/demo/workflow-demo.html

@@ -12,8 +12,8 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/TextPlugin.min.js"></script>
   <style>
     /* ============================================
-       90s RETRO TERMINAL AESTHETIC
-       Black & White, Monospace, Dashed Borders
+       DARK THEME WITH RED ACCENTS & ANIMATED GRID
+       90s terminal aesthetic with glow effects
        ============================================ */
 
     * {
@@ -23,25 +23,28 @@
     }
 
     :root {
-      --white: #e0e0e0;
-      --grey: #888;
-      --dark-grey: #444;
+      /* Dark theme colors */
       --black: #0a0a0a;
-      --glow: rgba(255, 255, 255, 0.3);
-      --accent-red: #BA0C2F;
+      --darker-grey: #111;
+      --dark-grey: #1a1a1a;
+      --card-bg: #0d0d0d;
+      --border-color: #333;
+      --grey: #888;
+      --white: #f0f0f0;
+      --accent-red: #ba0c2f;
       --accent-red-glow: rgba(186, 12, 47, 0.4);
     }
 
     body {
       background: var(--black);
       color: var(--white);
-      font-family: 'Courier New', Courier, monospace;
-      line-height: 1.7;
+      font-family: 'Courier New', monospace;
+      line-height: 1.6;
       overflow-x: hidden;
     }
 
     /* ============================================
-       ANIMATED BACKGROUND
+       ANIMATED BACKGROUND GRID
        ============================================ */
     .background-pattern {
       position: fixed;
@@ -49,21 +52,20 @@
       left: 0;
       width: 100%;
       height: 100%;
-      pointer-events: none;
       z-index: -1;
-      overflow: hidden;
+      opacity: 0.4;
     }
 
     .grid-svg {
       width: 100%;
       height: 100%;
-      opacity: 0.15;
     }
 
     .grid-line {
-      stroke: var(--grey);
+      stroke: var(--accent-red);
       stroke-width: 0.5;
       fill: none;
+      opacity: 0.4;
     }
 
     /* Floating particles */
@@ -73,130 +75,101 @@
       left: 0;
       width: 100%;
       height: 100%;
-      pointer-events: none;
       z-index: -1;
+      pointer-events: none;
     }
 
     .particle {
       position: absolute;
       width: 4px;
       height: 4px;
-      background: var(--grey);
-      opacity: 0.3;
+      background: var(--accent-red);
       border-radius: 50%;
+      opacity: 0;
+      box-shadow: 0 0 6px var(--accent-red-glow);
     }
 
+    /* Particle shape variations */
     .particle.square {
       border-radius: 0;
-      border: 1px solid var(--grey);
-      background: transparent;
-      width: 8px;
-      height: 8px;
+      width: 6px;
+      height: 6px;
     }
 
     .particle.plus {
+      width: 8px;
+      height: 2px;
+      background: var(--accent-red);
       border-radius: 0;
-      background: transparent;
-      width: 12px;
-      height: 12px;
     }
 
-    .particle.plus::before,
-    .particle.plus::after {
+    .particle.plus::before {
       content: '';
       position: absolute;
-      background: var(--grey);
-    }
-
-    .particle.plus::before {
-      width: 12px;
-      height: 1px;
-      top: 5.5px;
-      left: 0;
-    }
-
-    .particle.plus::after {
-      width: 1px;
-      height: 12px;
-      left: 5.5px;
-      top: 0;
+      width: 2px;
+      height: 8px;
+      background: var(--accent-red);
+      left: 3px;
+      top: -3px;
     }
 
-    /* X shape particle */
     .particle.x-shape {
+      width: 8px;
+      height: 2px;
+      background: var(--accent-red);
       border-radius: 0;
-      background: transparent;
-      width: 14px;
-      height: 14px;
+      transform: rotate(45deg);
     }
 
-    .particle.x-shape::before,
-    .particle.x-shape::after {
+    .particle.x-shape::before {
       content: '';
       position: absolute;
-      background: var(--grey);
-    }
-
-    .particle.x-shape::before {
-      width: 14px;
-      height: 1px;
-      top: 6.5px;
-      left: 0;
-      transform: rotate(45deg);
-    }
-
-    .particle.x-shape::after {
-      width: 14px;
-      height: 1px;
-      top: 6.5px;
-      left: 0;
-      transform: rotate(-45deg);
+      width: 8px;
+      height: 2px;
+      background: var(--accent-red);
+      transform: rotate(90deg);
     }
 
-    /* Line/dash particle */
     .particle.line {
-      border-radius: 0;
-      width: 20px;
+      width: 12px;
       height: 1px;
-      background: var(--grey);
+      border-radius: 0;
     }
 
     .particle.line-v {
-      border-radius: 0;
       width: 1px;
-      height: 20px;
-      background: var(--grey);
+      height: 12px;
+      border-radius: 0;
     }
 
-    /* Circle outline particle */
     .particle.circle-outline {
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
       background: transparent;
-      border: 1px solid var(--grey);
+      border: 1px solid var(--accent-red);
+      width: 8px;
+      height: 8px;
     }
 
-    /* Triangle particle */
     .particle.triangle {
       width: 0;
       height: 0;
       background: transparent;
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-      border-bottom: 10px solid var(--grey);
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-bottom: 7px solid var(--accent-red);
+      border-radius: 0;
     }
 
     /* Cursor glow effect */
     .cursor-glow {
       position: fixed;
-      width: 300px;
-      height: 300px;
-      background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
+      width: 500px;
+      height: 500px;
+      border-radius: 50%;
+      background: radial-gradient(circle, var(--accent-red-glow) 0%, rgba(186, 12, 47, 0.15) 30%, transparent 70%);
       pointer-events: none;
-      z-index: 0;
+      z-index: -1;
       transform: translate(-50%, -50%);
-      transition: opacity 0.3s;
+      opacity: 0.7;
     }
 
     /* Scanlines overlay */
@@ -206,26 +179,27 @@
       left: 0;
       width: 100%;
       height: 100%;
-      pointer-events: none;
-      z-index: 9999;
       background: repeating-linear-gradient(
         0deg,
         transparent,
         transparent 2px,
-        rgba(0, 0, 0, 0.1) 2px,
-        rgba(0, 0, 0, 0.1) 4px
+        rgba(0, 0, 0, 0.05) 2px,
+        rgba(0, 0, 0, 0.05) 4px
       );
-      opacity: 0.3;
+      pointer-events: none;
+      z-index: 9999;
+      opacity: 0.2;
     }
 
-    /* Animated corner decorations */
+    /* Corner decorations */
     .corner-decoration {
       position: fixed;
-      width: 60px;
-      height: 60px;
-      border: 1px dashed var(--dark-grey);
-      opacity: 0.4;
+      width: 100px;
+      height: 100px;
+      border: 1px dashed var(--accent-red);
       z-index: 1;
+      pointer-events: none;
+      opacity: 0.4;
     }
 
     .corner-decoration.top-left {
@@ -237,7 +211,7 @@
 
     .corner-decoration.top-right {
       top: 20px;
-      right: 80px;
+      right: 20px;
       border-left: none;
       border-bottom: none;
     }
@@ -256,448 +230,441 @@
       border-top: none;
     }
 
-    /* Visual flow lines between sections */
-    .flow-connector-line {
-      position: absolute;
-      width: 2px;
-      background: linear-gradient(to bottom, transparent, var(--dark-grey), transparent);
-      left: 50%;
-      bottom: -60px;
-      height: 60px;
-      opacity: 0.3;
+    /* ============================================
+       NAVIGATION
+       ============================================ */
+    .nav {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 1000;
+      display: flex;
+      justify-content: flex-end;
+      gap: 10px;
+      padding: 20px 40px;
+      background: rgba(10, 10, 10, 0.9);
+      border-bottom: 1px dashed var(--border-color);
     }
 
-    /* Status badge animations */
-    .status-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      padding: 6px 14px;
-      border: 1px dashed var(--grey);
+    .nav-btn {
+      background: transparent;
+      border: 1px solid var(--border-color);
+      color: var(--grey);
+      padding: 8px 16px;
+      font-family: inherit;
       font-size: 0.75rem;
+      cursor: pointer;
+      transition: all 0.2s;
       text-transform: uppercase;
-      letter-spacing: 2px;
+      letter-spacing: 1px;
     }
 
-    .status-badge .pulse {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--grey);
-      animation: pulse 2s infinite;
+    .nav-btn:hover {
+      border-color: var(--accent-red);
+      color: var(--accent-red);
+      box-shadow: 0 0 10px var(--accent-red-glow);
     }
 
-    .status-badge.active .pulse {
+    .nav-btn.active {
       background: var(--accent-red);
-      box-shadow: 0 0 10px var(--accent-red);
-    }
-
-    @keyframes pulse {
-      0%, 100% { transform: scale(1); opacity: 1; }
-      50% { transform: scale(1.2); opacity: 0.5; }
-    }
-
-    /* Visual data flow diagram */
-    .data-flow {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 20px;
-      margin: 30px 0;
-      flex-wrap: wrap;
-    }
-
-    .data-node {
-      border: 1px dashed var(--grey);
-      padding: 15px 25px;
-      text-align: center;
-      position: relative;
-      min-width: 120px;
-    }
-
-    .data-node-icon {
-      font-size: 1.5rem;
-      margin-bottom: 8px;
-      display: block;
+      border-color: var(--accent-red);
+      color: var(--white);
     }
 
-    .data-node-label {
-      font-size: 0.75rem;
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      color: var(--grey);
+    .nav-btn.disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
     }
 
-    .data-arrow {
+    .nav-btn.disabled:hover {
+      border-color: var(--border-color);
       color: var(--grey);
-      font-size: 1.5rem;
-      animation: arrowPulse 1.5s infinite;
+      box-shadow: none;
     }
 
-    @keyframes arrowPulse {
-      0%, 100% { opacity: 0.3; transform: translateX(0); }
-      50% { opacity: 1; transform: translateX(5px); }
+    /* ============================================
+       AUDIO PLAYER
+       ============================================ */
+    .audio-progress-container {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: rgba(10, 10, 10, 0.95);
+      border-top: 1px dashed var(--border-color);
+      padding: 15px 40px;
+      z-index: 1001;
     }
 
-    /* Visual checkmarks for completed items */
-    .visual-check {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 24px;
-      height: 24px;
-      border: 2px solid var(--grey);
-      margin-right: 12px;
+    .audio-time-display {
+      display: flex;
+      justify-content: space-between;
       font-size: 0.8rem;
-      transition: all 0.3s;
-    }
-
-    .visual-check.checked {
-      border-color: var(--accent-red);
-      background: rgba(186, 12, 47, 0.2);
-    }
-
-    .visual-check.checked::after {
-      content: '✓';
-      color: var(--accent-red);
+      color: var(--grey);
+      margin-bottom: 8px;
     }
 
-    /* Animated underline effect */
-    .highlight-underline {
+    .audio-progress-bar {
       position: relative;
-      display: inline-block;
+      height: 12px;
+      background: var(--darker-grey);
+      border: 1px solid var(--border-color);
+      cursor: pointer;
     }
 
-    .highlight-underline::after {
-      content: '';
-      position: absolute;
-      bottom: -4px;
-      left: 0;
-      width: 0;
-      height: 2px;
+    .audio-progress-fill {
+      height: 100%;
       background: var(--accent-red);
-      transition: width 0.3s ease;
-    }
-
-    .highlight-underline:hover::after {
-      width: 100%;
+      width: 0%;
+      transition: width 0.1s linear;
+      pointer-events: none;
+      box-shadow: 0 0 10px var(--accent-red-glow);
     }
 
-    /* Visual timeline indicator */
-    .timeline-indicator {
+    .audio-section-markers {
       position: absolute;
-      left: -40px;
       top: 0;
-      bottom: 0;
-      width: 2px;
-      background: var(--dark-grey);
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
     }
 
-    .timeline-indicator::before {
-      content: '';
+    .audio-section-marker {
       position: absolute;
-      top: 50%;
-      left: -4px;
-      width: 10px;
-      height: 10px;
-      border: 2px solid var(--grey);
-      border-radius: 50%;
-      background: var(--black);
-      transform: translateY(-50%);
+      top: -2px;
+      width: 3px;
+      height: 16px;
+      background: var(--white);
+      opacity: 0.5;
+      pointer-events: auto;
+      cursor: pointer;
+      margin-left: -1px;
     }
 
-    .timeline-indicator.active::before {
-      border-color: var(--accent-red);
-      box-shadow: 0 0 10px var(--accent-red-glow);
+    .audio-section-marker:hover {
+      opacity: 1;
+      background: var(--accent-red);
+      box-shadow: 0 0 8px var(--accent-red-glow);
     }
 
-    /* Animated typing indicator */
-    .typing-indicator {
-      display: inline-flex;
-      gap: 4px;
-      padding: 10px 15px;
-      background: rgba(255,255,255,0.03);
+    /* Chapter buttons */
+    .chapter-buttons {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 12px;
+      flex-wrap: wrap;
+      justify-content: center;
     }
 
-    .typing-indicator span {
-      width: 6px;
-      height: 6px;
-      background: var(--grey);
-      border-radius: 50%;
-      animation: typing 1.4s infinite both;
+    .chapter-btn {
+      padding: 6px 12px;
+      font-size: 0.65rem;
+      background: transparent;
+      border: 1px solid var(--border-color);
+      color: var(--grey);
+      cursor: pointer;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      transition: all 0.2s;
     }
 
-    .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
-    .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
-
-    @keyframes typing {
-      0%, 100% { transform: translateY(0); opacity: 0.3; }
-      50% { transform: translateY(-8px); opacity: 1; }
+    .chapter-btn:hover {
+      border-color: var(--accent-red);
+      color: var(--accent-red);
     }
 
-    /* Phase connection arrows */
-    .phase-arrow {
-      display: none;
-      position: absolute;
-      right: -22px;
-      top: 50%;
-      transform: translateY(-50%);
-      color: var(--dark-grey);
-      font-size: 1rem;
-      z-index: 2;
+    .chapter-btn.active {
+      background: var(--accent-red);
+      border-color: var(--accent-red);
+      color: var(--white);
+      box-shadow: 0 0 10px var(--accent-red-glow);
     }
 
-    .phase-box:not(:nth-child(5n)) .phase-arrow {
-      display: block;
+    /* Voice Modal */
+    .voice-modal-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.8);
+      z-index: 10000;
+      display: none;
+      align-items: center;
+      justify-content: center;
     }
 
-    /* Glowing border effect for active elements */
-    .glow-border {
-      position: relative;
+    .voice-modal-overlay.active {
+      display: flex;
     }
 
-    .glow-border::before {
-      content: '';
-      position: absolute;
-      top: -2px;
-      left: -2px;
-      right: -2px;
-      bottom: -2px;
-      background: linear-gradient(45deg, transparent, var(--white), transparent);
-      opacity: 0;
-      transition: opacity 0.3s;
-      z-index: -1;
+    .voice-modal {
+      background: var(--darker-grey);
+      border: 2px solid var(--border-color);
+      padding: 30px;
+      max-width: 500px;
+      width: 90%;
     }
 
-    .glow-border:hover::before {
-      opacity: 0.1;
+    .voice-modal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 25px;
+      padding-bottom: 15px;
+      border-bottom: 1px dashed var(--border-color);
     }
 
-    /* Navigation */
-    .nav {
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      z-index: 1000;
-      display: flex;
-      gap: 10px;
+    .voice-modal-title {
+      font-size: 1.2rem;
+      font-weight: 600;
+      color: var(--white);
     }
 
-    .nav-btn {
+    .voice-modal-close {
       background: transparent;
-      border: 1px dashed var(--grey);
-      color: var(--white);
-      padding: 8px 16px;
-      font-family: inherit;
+      border: 1px solid var(--border-color);
+      color: var(--grey);
+      width: 32px;
+      height: 32px;
       cursor: pointer;
-      transition: all 0.3s;
+      font-size: 1.2rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
-    .nav-btn:hover {
+    .voice-modal-close:hover {
       background: var(--accent-red);
-      color: #fff;
       border-color: var(--accent-red);
-      box-shadow: 0 0 15px var(--accent-red-glow);
+      color: var(--white);
     }
 
-    .nav-btn.active {
-      background: var(--accent-red);
-      color: #fff;
+    .voice-option {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      padding: 15px;
+      margin-bottom: 10px;
+      border: 1px solid var(--border-color);
+      background: var(--card-bg);
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .voice-option:hover {
       border-color: var(--accent-red);
     }
 
-    .nav-btn.disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      text-decoration: line-through;
+    .voice-option.selected {
+      border-color: var(--accent-red);
+      background: rgba(186, 12, 47, 0.1);
+      box-shadow: 0 0 15px var(--accent-red-glow);
     }
 
-    .nav-btn.disabled:hover {
+    .voice-play-btn {
+      width: 40px;
+      height: 40px;
+      border: 1px solid var(--border-color);
       background: transparent;
       color: var(--grey);
-      border-color: var(--grey);
-      box-shadow: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1rem;
+      flex-shrink: 0;
     }
 
-    /* ============================================
-       AUDIO NARRATION PLAYER
-       ============================================ */
-    .audio-progress-container {
-      position: fixed;
-      bottom: 60px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 80%;
-      max-width: 600px;
-      background: rgba(0, 0, 0, 0.9);
-      border: 1px dashed var(--grey);
-      padding: 15px 20px;
-      z-index: 1001;
-      border-radius: 0;
+    .voice-play-btn:hover {
+      background: var(--accent-red);
+      border-color: var(--accent-red);
+      color: var(--white);
     }
 
-    .audio-time-display {
-      display: flex;
-      justify-content: space-between;
-      font-size: 0.75rem;
+    .voice-info { flex: 1; }
+
+    .voice-name {
+      font-size: 0.95rem;
+      font-weight: 600;
+      margin-bottom: 4px;
+      color: var(--white);
+    }
+
+    .voice-desc {
+      font-size: 0.8rem;
       color: var(--grey);
-      margin-bottom: 10px;
-      font-family: 'Courier New', monospace;
     }
 
-    .audio-progress-bar {
-      position: relative;
-      height: 6px;
-      background: var(--dark-grey);
+    .voice-select-btn {
+      background: transparent;
+      border: 1px solid var(--border-color);
+      color: var(--grey);
+      padding: 6px 12px;
+      font-size: 0.75rem;
       cursor: pointer;
     }
 
-    .audio-progress-fill {
-      height: 100%;
+    .voice-option.selected .voice-select-btn {
       background: var(--accent-red);
-      width: 0%;
-      transition: width 0.1s linear;
+      border-color: var(--accent-red);
+      color: var(--white);
     }
 
-    .audio-section-markers {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
+    .voice-modal-footer {
+      margin-top: 20px;
+      padding-top: 15px;
+      border-top: 1px dashed var(--border-color);
+      text-align: center;
     }
 
-    .audio-section-marker {
-      position: absolute;
-      top: -3px;
-      width: 2px;
-      height: 12px;
-      background: var(--white);
-      opacity: 0.5;
+    .voice-modal-note {
+      font-size: 0.8rem;
+      color: var(--grey);
+      margin-bottom: 15px;
     }
 
-    .audio-section-marker:hover {
-      opacity: 1;
+    .voice-confirm-btn {
+      background: var(--accent-red);
+      border: 1px solid var(--accent-red);
+      color: var(--white);
+      padding: 12px 30px;
+      font-size: 0.85rem;
+      cursor: pointer;
+      transition: all 0.2s;
     }
 
-    /* Audio highlight effect for elements being narrated */
+    .voice-confirm-btn:hover {
+      background: transparent;
+      box-shadow: 0 0 15px var(--accent-red-glow);
+    }
+
+    /* Audio highlight effect */
     .audio-highlighted {
-      box-shadow: 0 0 30px var(--accent-red-glow), 0 0 60px var(--accent-red-glow) !important;
-      border-color: var(--accent-red) !important;
-      transform: scale(1.02);
+      outline: 2px solid var(--accent-red) !important;
+      outline-offset: 4px;
       transition: all 0.3s ease !important;
+      box-shadow: 0 0 20px var(--accent-red-glow) !important;
+    }
+
+    .audio-highlighted.solution-card,
+    .audio-highlighted.phase-box,
+    .audio-highlighted.gap-item,
+    .audio-highlighted.phase-node {
+      outline: none !important;
+      border-color: var(--accent-red) !important;
+      background: rgba(186, 12, 47, 0.15) !important;
+      box-shadow: 0 0 25px var(--accent-red-glow) !important;
     }
 
     /* Progress indicator */
     .progress-bar {
       position: fixed;
-      top: 0;
+      top: 61px;
       left: 0;
-      height: 3px;
+      height: 2px;
       background: var(--accent-red);
       width: 0%;
       z-index: 1001;
+      box-shadow: 0 0 10px var(--accent-red-glow);
     }
 
-    /* Section base */
+    /* ============================================
+       SECTIONS & CONTENT
+       ============================================ */
     section {
       min-height: 100vh;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      padding: 80px 40px;
+      padding: 120px 40px 80px;
       position: relative;
     }
 
-    /* ASCII border decoration */
     .ascii-border {
-      border: 1px dashed var(--grey);
+      border: 1px dashed var(--border-color);
       padding: 50px;
       position: relative;
-      max-width: 1000px;
+      max-width: 900px;
       width: 100%;
-      /* Blurred glass backdrop so boxes don't interfere with background animation */
-      background: rgba(10, 10, 10, 0.85);
-      backdrop-filter: blur(12px);
-      -webkit-backdrop-filter: blur(12px);
+      background: rgba(10, 10, 10, 0.8);
     }
 
-    .ascii-border::before {
+    .ascii-border::before,
+    .ascii-border::after {
       content: '+';
       position: absolute;
+      color: var(--border-color);
+      font-size: 1rem;
+    }
+
+    .ascii-border::before {
       top: -8px;
       left: -8px;
-      color: var(--grey);
     }
 
     .ascii-border::after {
-      content: '+';
-      position: absolute;
       bottom: -8px;
       right: -8px;
-      color: var(--grey);
     }
 
     /* Typography */
     h1 {
-      font-size: 2.5rem;
-      font-weight: normal;
-      letter-spacing: 4px;
+      font-family: 'Fredoka', sans-serif;
+      font-size: 2.8rem;
+      font-weight: 700;
       margin-bottom: 20px;
+      color: var(--white);
     }
 
     h2 {
-      font-size: 1.8rem;
-      font-weight: normal;
-      letter-spacing: 2px;
-      margin-bottom: 10px;
+      font-family: 'Fredoka', sans-serif;
+      font-size: 2rem;
+      font-weight: 600;
+      margin-bottom: 15px;
+      color: var(--white);
     }
 
     h3 {
-      font-size: 1.2rem;
+      font-size: 1rem;
       margin-bottom: 15px;
       text-transform: uppercase;
       letter-spacing: 1px;
       color: var(--grey);
     }
 
-    /* Explanation blocks - THE KEY EDUCATIONAL ELEMENT */
+    /* Explanation blocks */
     .explanation {
-      background: rgba(255, 255, 255, 0.03);
-      border-left: 3px solid var(--grey);
+      background: var(--darker-grey);
+      border: 1px dashed var(--border-color);
+      border-left: 3px solid var(--accent-red);
       padding: 25px 30px;
       margin: 30px 0;
       font-size: 1rem;
-      line-height: 1.9;
+      line-height: 1.8;
       opacity: 0;
     }
 
     .explanation-title {
-      font-size: 0.85rem;
+      font-size: 0.75rem;
       text-transform: uppercase;
-      letter-spacing: 3px;
-      color: var(--grey);
+      letter-spacing: 2px;
+      color: var(--accent-red);
       margin-bottom: 15px;
-      display: flex;
-      align-items: center;
-      gap: 10px;
+      font-weight: 600;
     }
 
     .explanation-title::before {
-      content: '?';
-      width: 24px;
-      height: 24px;
-      border: 1px dashed var(--grey);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 0.9rem;
+      content: '// ';
+      color: var(--grey);
     }
 
     .explanation p {
       margin-bottom: 15px;
+      color: var(--grey);
     }
 
     .explanation p:last-child {
@@ -706,14 +673,13 @@
 
     .explanation strong {
       color: var(--white);
-      font-weight: normal;
-      border-bottom: 1px dashed var(--grey);
+      font-weight: 600;
     }
 
     /* Real example callout */
     .real-example {
-      background: rgba(255, 255, 255, 0.05);
-      border: 1px dashed var(--white);
+      background: var(--darker-grey);
+      border: 2px solid var(--border-color);
       padding: 20px 25px;
       margin: 20px 0;
       position: relative;
@@ -724,11 +690,12 @@
       position: absolute;
       top: -10px;
       left: 20px;
-      background: var(--black);
+      background: var(--card-bg);
       padding: 0 10px;
-      font-size: 0.75rem;
+      font-size: 0.7rem;
       letter-spacing: 2px;
-      color: var(--grey);
+      color: var(--accent-red);
+      border: 1px solid var(--border-color);
     }
 
     .real-example-content {
@@ -740,7 +707,7 @@
       display: inline-block;
       width: 10px;
       height: 20px;
-      background: var(--white);
+      background: var(--accent-red);
       animation: blink 1s infinite;
       vertical-align: middle;
       margin-left: 5px;
@@ -758,10 +725,11 @@
       justify-content: center;
       width: 50px;
       height: 50px;
-      border: 2px solid var(--white);
+      border: 2px solid var(--accent-red);
       font-size: 1.5rem;
       margin-right: 20px;
       flex-shrink: 0;
+      color: var(--accent-red);
     }
 
     .step-header {
@@ -828,11 +796,12 @@
 
     .hustle-highlight {
       color: var(--accent-red);
-      text-shadow: 0 0 30px var(--accent-red-glow), 0 0 60px var(--accent-red-glow);
+      text-shadow: 0 0 20px var(--accent-red-glow);
     }
 
     .text-red {
       color: var(--accent-red);
+      font-weight: 600;
     }
 
     /* Intro section centering */
@@ -863,13 +832,13 @@
     }
 
     /* ============================================
-       PHASE FLOW - LIGHTING UP SEQUENCE
+       PHASE FLOW - LIGHTING UP SEQUENCE (boxy)
        ============================================ */
     .phase-flow {
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: 15px;
+      gap: 12px;
       margin-top: 50px;
       flex-wrap: wrap;
       opacity: 0;
@@ -877,30 +846,31 @@
 
     .phase-node {
       position: relative;
-      border: 2px solid var(--dark-grey);
+      border: 2px solid var(--border-color);
+      background: var(--darker-grey);
       padding: 20px 25px;
       text-align: center;
       min-width: 100px;
-      transition: all 0.4s ease;
+      transition: all 0.3s ease;
       opacity: 0;
       transform: translateY(20px);
     }
 
     .phase-node .phase-glow {
       position: absolute;
-      top: -2px;
-      left: -2px;
-      right: -2px;
-      bottom: -2px;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
       border: 2px solid var(--accent-red);
       opacity: 0;
-      box-shadow: 0 0 20px var(--accent-red-glow), inset 0 0 20px var(--accent-red-glow);
-      transition: opacity 0.4s ease;
+      transition: opacity 0.3s ease;
     }
 
     .phase-node.active {
       border-color: var(--accent-red);
-      background: rgba(186, 12, 47, 0.1);
+      background: rgba(186, 12, 47, 0.2);
+      box-shadow: 0 0 20px var(--accent-red-glow);
     }
 
     .phase-node.active .phase-glow {
@@ -909,7 +879,6 @@
 
     .phase-node.active .phase-icon {
       color: var(--accent-red);
-      text-shadow: 0 0 10px var(--accent-red);
     }
 
     .phase-node.active .phase-label {
@@ -918,31 +887,31 @@
 
     .phase-icon {
       display: block;
-      font-size: 1.8rem;
+      font-size: 1.6rem;
       font-weight: bold;
       margin-bottom: 8px;
       color: var(--grey);
-      transition: all 0.4s ease;
+      transition: all 0.3s ease;
     }
 
     .phase-label {
-      font-size: 0.7rem;
+      font-size: 0.65rem;
       text-transform: uppercase;
       letter-spacing: 2px;
-      color: var(--dark-grey);
-      transition: all 0.4s ease;
+      color: var(--grey);
+      transition: all 0.3s ease;
+      font-weight: bold;
     }
 
     .phase-connector-arrow {
-      color: var(--dark-grey);
-      font-size: 1.5rem;
+      color: var(--border-color);
+      font-size: 1.2rem;
       opacity: 0;
       transition: all 0.3s ease;
     }
 
     .phase-connector-arrow.active {
       color: var(--accent-red);
-      text-shadow: 0 0 10px var(--accent-red-glow);
     }
 
     @media (max-width: 768px) {
@@ -992,62 +961,67 @@
     }
 
     /* ============================================
-       SECTION 2: THE PROBLEM - GAPS
+       SECTION 2: THE PROBLEM - GAPS - boxy cards
        ============================================ */
     .gap-list {
       list-style: none;
       width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
     }
 
     .gap-item {
-      border: 1px dashed var(--dark-grey);
-      padding: 25px 30px;
-      margin-bottom: 20px;
+      border: 2px solid var(--border-color);
+      background: var(--darker-grey);
+      padding: 25px 30px 25px 50px;
       opacity: 0;
       transform: translateX(-30px);
-      transition: all 0.3s;
+      transition: all 0.2s;
       position: relative;
     }
 
     .gap-item:hover {
       border-color: var(--accent-red);
-      box-shadow: 0 0 25px var(--accent-red-glow);
+      transform: translateX(5px);
     }
 
     .gap-item::before {
-      content: 'X';
+      content: '✕';
       position: absolute;
-      left: -35px;
-      top: 50%;
-      transform: translateY(-50%);
+      left: 18px;
+      top: 26px;
       color: var(--accent-red);
-      font-size: 1.2rem;
+      font-size: 1rem;
+      font-weight: bold;
     }
 
     .gap-number {
-      color: var(--grey);
-      font-size: 0.8rem;
+      color: var(--accent-red);
+      font-size: 0.75rem;
       text-transform: uppercase;
       letter-spacing: 2px;
+      font-weight: bold;
     }
 
     .gap-title {
-      font-size: 1.15rem;
+      font-size: 1.1rem;
       margin: 8px 0;
     }
 
     .gap-desc {
       color: var(--grey);
-      font-size: 0.95rem;
+      font-size: 0.9rem;
       margin-bottom: 10px;
     }
 
     .gap-example {
       font-size: 0.85rem;
       padding: 12px 15px;
-      background: rgba(255,255,255,0.03);
-      border-left: 2px solid var(--dark-grey);
-      margin-top: 10px;
+      background: var(--card-bg);
+      border: 1px solid var(--border-color);
+      border-left: 3px solid var(--accent-red);
+      margin-top: 12px;
     }
 
     .gap-example .bad {
@@ -1056,44 +1030,50 @@
     }
 
     .gap-example .good {
-      color: var(--white);
+      color: var(--accent-red);
+      font-weight: bold;
     }
 
     /* ============================================
-       SECTION 3: SOLUTION OVERVIEW
+       SECTION 3: SOLUTION OVERVIEW - boxy grid
        ============================================ */
     .solution-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
-      gap: 25px;
+      gap: 20px;
       margin-top: 30px;
     }
 
     .solution-card {
-      border: 1px dashed var(--dark-grey);
-      padding: 30px 25px;
+      border: 2px solid var(--border-color);
+      background: var(--darker-grey);
+      padding: 35px 25px;
       text-align: center;
       opacity: 0;
       transform: translateY(20px);
-      transition: all 0.3s;
+      transition: all 0.2s;
     }
 
     .solution-card:hover {
       border-color: var(--accent-red);
-      box-shadow: 0 0 25px var(--accent-red-glow);
+      transform: translateY(-3px);
     }
 
     .solution-icon {
-      font-size: 2rem;
+      font-size: 1.8rem;
       margin-bottom: 15px;
       display: block;
+      color: var(--accent-red);
+      font-weight: bold;
     }
 
     .solution-title {
-      font-size: 1rem;
-      margin-bottom: 10px;
+      font-size: 0.95rem;
+      margin-bottom: 12px;
       text-transform: uppercase;
       letter-spacing: 1px;
+      color: var(--white);
+      font-weight: 600;
     }
 
     .solution-desc {
@@ -1103,7 +1083,7 @@
     }
 
     /* ============================================
-       SECTION 4: HOOK SYSTEM
+       SECTION 4: HOOK SYSTEM - clean boxy flow
        ============================================ */
     .hook-diagram {
       width: 100%;
@@ -1111,49 +1091,53 @@
     }
 
     .flow-box {
-      border: 1px dashed var(--grey);
+      border: 2px solid var(--border-color);
+      background: var(--darker-grey);
       padding: 18px 30px;
       margin: 12px 0;
       text-align: center;
       opacity: 0;
-      transition: all 0.3s;
+      transition: all 0.2s;
     }
 
     .flow-box:hover {
-      background: rgba(186, 12, 47, 0.1);
-      box-shadow: 0 0 20px var(--accent-red-glow);
       border-color: var(--accent-red);
+      transform: translateX(5px);
     }
 
     .flow-arrow {
       text-align: center;
-      color: var(--grey);
+      color: var(--accent-red);
       font-size: 1.5rem;
       opacity: 0;
     }
 
     .hook-group {
-      border: 2px dashed var(--white);
+      border: 2px dashed var(--border-color);
+      background: var(--darker-grey);
       padding: 25px;
       margin: 25px 0;
       opacity: 0;
     }
 
     .hook-group h4 {
-      color: var(--grey);
-      font-size: 0.85rem;
+      color: var(--accent-red);
+      font-size: 0.8rem;
       text-transform: uppercase;
       letter-spacing: 2px;
       margin-bottom: 15px;
+      font-weight: bold;
     }
 
     .hook-file {
       padding: 12px 20px;
       margin: 8px 0;
-      border-left: 2px solid var(--grey);
+      border: 1px solid var(--border-color);
+      border-left: 3px solid var(--grey);
+      background: var(--card-bg);
       font-size: 0.9rem;
       opacity: 0;
-      transition: all 0.3s;
+      transition: all 0.2s;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -1161,22 +1145,23 @@
 
     .hook-file:hover {
       border-left-color: var(--accent-red);
-      background: rgba(186, 12, 47, 0.1);
-      padding-left: 25px;
+      border-color: var(--accent-red);
     }
 
     .hook-file code {
       color: var(--white);
+      font-weight: 500;
     }
 
     .hook-purpose {
       color: var(--grey);
-      font-size: 0.8rem;
+      font-size: 0.75rem;
+      text-transform: uppercase;
     }
 
     .result-box {
       display: flex;
-      gap: 40px;
+      gap: 30px;
       justify-content: center;
       margin-top: 25px;
     }
@@ -1184,12 +1169,15 @@
     .result-allowed, .result-blocked {
       padding: 18px 35px;
       border: 2px solid;
+      background: var(--card-bg);
       opacity: 0;
-      transition: all 0.3s;
+      transition: all 0.2s;
+      font-weight: bold;
     }
 
     .result-allowed {
       border-color: var(--grey);
+      color: var(--grey);
     }
 
     .result-blocked {
@@ -1198,62 +1186,65 @@
     }
 
     .result-allowed:hover, .result-blocked:hover {
-      transform: scale(1.05);
+      transform: scale(1.03);
     }
 
     /* ============================================
-       SECTION 5: 10-PHASE WORKFLOW
+       SECTION 5: 10-PHASE WORKFLOW - boxy grid
        ============================================ */
     .phase-grid {
       display: grid;
       grid-template-columns: repeat(5, 1fr);
-      gap: 18px;
+      gap: 15px;
       width: 100%;
       margin-top: 30px;
     }
 
     .phase-box {
-      border: 1px dashed var(--dark-grey);
+      border: 2px solid var(--border-color);
+      background: var(--darker-grey);
       padding: 25px 15px;
       text-align: center;
       opacity: 0;
       transform: scale(0.9);
-      transition: all 0.3s;
+      transition: all 0.2s;
       position: relative;
     }
 
     .phase-box:hover {
       border-color: var(--accent-red);
-      box-shadow: 0 0 25px var(--accent-red-glow);
       transform: scale(1.02);
     }
 
     .phase-box.active {
       border-color: var(--accent-red);
-      background: rgba(186, 12, 47, 0.1);
+      background: rgba(186, 12, 47, 0.2);
+      box-shadow: 0 0 20px var(--accent-red-glow);
     }
 
     .phase-number {
-      font-size: 2.2rem;
-      color: var(--dark-grey);
+      font-size: 2rem;
+      color: var(--grey);
       margin-bottom: 10px;
+      font-weight: bold;
     }
 
     .phase-box.active .phase-number {
-      color: var(--white);
+      color: var(--accent-red);
     }
 
     .phase-name {
-      font-size: 0.75rem;
+      font-size: 0.7rem;
       text-transform: uppercase;
       letter-spacing: 1px;
+      font-weight: bold;
     }
 
     .phase-status {
       position: absolute;
       top: 8px;
       right: 8px;
-      font-size: 0.7rem;
+      font-size: 0.65rem;
       color: var(--grey);
     }
 
@@ -1267,26 +1258,26 @@
     }
 
     .phase-desc {
-      font-size: 0.7rem;
+      font-size: 0.65rem;
       color: var(--grey);
       margin-top: 8px;
       line-height: 1.4;
     }
 
     /* ============================================
-       SECTION 6: REAL WALKTHROUGH
+       SECTION 6: REAL WALKTHROUGH - boxy steps
        ============================================ */
     .walkthrough-step {
-      border: 1px dashed var(--dark-grey);
+      border: 2px solid var(--border-color);
+      background: var(--darker-grey);
       padding: 30px;
-      margin-bottom: 25px;
+      margin-bottom: 20px;
       opacity: 0;
       transform: translateY(20px);
     }
 
     .walkthrough-step.active {
       border-color: var(--accent-red);
-      box-shadow: 0 0 20px var(--accent-red-glow);
     }
 
     .walkthrough-header {
@@ -1299,16 +1290,19 @@
     .walkthrough-num {
       width: 45px;
       height: 45px;
-      border: 2px solid var(--white);
+      border: 2px solid var(--accent-red);
+      background: transparent;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 1.3rem;
+      font-size: 1.2rem;
       flex-shrink: 0;
+      color: var(--accent-red);
+      font-weight: bold;
     }
 
     .walkthrough-title {
-      font-size: 1.1rem;
+      font-size: 1rem;
       text-transform: uppercase;
       letter-spacing: 1px;
     }
@@ -1324,26 +1318,28 @@
     }
 
     .walkthrough-example {
-      background: #111;
+      background: var(--card-bg);
+      border: 1px solid var(--border-color);
       padding: 15px 20px;
       font-size: 0.85rem;
-      border-left: 3px solid var(--grey);
+      border-left: 3px solid var(--accent-red);
     }
 
     .walkthrough-example .label {
-      color: var(--grey);
-      font-size: 0.75rem;
+      color: var(--accent-red);
+      font-size: 0.7rem;
       text-transform: uppercase;
       letter-spacing: 1px;
       margin-bottom: 8px;
+      font-weight: bold;
     }
 
     /* ============================================
-       SECTION 7: LIVE DEMO TERMINAL
+       SECTION 7: LIVE DEMO TERMINAL - boxy style
        ============================================ */
     .terminal {
-      background: #0d0d0d;
-      border: 1px solid var(--grey);
+      background: var(--card-bg);
+      border: 2px solid var(--border-color);
       padding: 25px;
       width: 100%;
       font-size: 0.85rem;
@@ -1355,20 +1351,27 @@
       gap: 8px;
       margin-bottom: 20px;
       padding-bottom: 15px;
-      border-bottom: 1px dashed var(--dark-grey);
+      border-bottom: 1px dashed var(--border-color);
     }
 
     .terminal-dot {
       width: 12px;
       height: 12px;
-      border-radius: 50%;
-      border: 1px solid var(--grey);
+      border-radius: 0;
+      border: 2px solid var(--border-color);
+    }
+
+    .terminal-dot:first-child {
+      border-color: var(--accent-red);
+      background: var(--accent-red);
     }
 
     .terminal-title {
       margin-left: auto;
       color: var(--grey);
-      font-size: 0.8rem;
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      letter-spacing: 1px;
     }
 
     .terminal-line {
@@ -1380,8 +1383,9 @@
     }
 
     .terminal-prompt {
-      color: var(--grey);
+      color: var(--accent-red);
       flex-shrink: 0;
+      font-weight: bold;
     }
 
     .terminal-command {
@@ -1400,8 +1404,8 @@
     }
 
     .terminal-allowed {
-      color: var(--grey);
-      border-left: 3px solid var(--grey);
+      color: #22c55e;
+      border-left: 3px solid #22c55e;
       padding-left: 15px;
     }
 
@@ -1411,18 +1415,18 @@
     }
 
     .terminal-comment {
-      color: var(--dark-grey);
-      font-size: 0.8rem;
+      color: var(--grey);
+      font-size: 0.75rem;
       padding-left: 25px;
       margin-bottom: 5px;
     }
 
     /* ============================================
-       SECTION 8: STATE FILE
+       SECTION 8: STATE FILE - boxy JSON viewer
        ============================================ */
     .json-viewer {
-      background: #0d0d0d;
-      border: 1px solid var(--grey);
+      background: var(--card-bg);
+      border: 2px solid var(--border-color);
       padding: 25px;
       font-size: 0.85rem;
       width: 100%;
@@ -1430,7 +1434,8 @@
     }
 
     .json-key {
-      color: var(--grey);
+      color: var(--accent-red);
+      font-weight: 600;
     }
 
     .json-value {
@@ -1447,33 +1452,36 @@
     }
 
     .json-line.highlight {
-      background: rgba(186, 12, 47, 0.15);
+      background: rgba(186, 12, 47, 0.1);
       margin: 0 -25px;
       padding-left: 25px;
       padding-right: 25px;
-      border-left: 2px solid var(--accent-red);
+      border-left: 3px solid var(--accent-red);
     }
 
     .json-comment {
-      color: var(--dark-grey);
-      font-size: 0.75rem;
+      color: var(--grey);
+      font-size: 0.7rem;
       margin-left: 20px;
+      text-transform: uppercase;
     }
 
     /* ============================================
-       SECTION 9: INSTALLATION
+       SECTION 9: INSTALLATION - boxy style
        ============================================ */
     .install-command {
-      background: #0d0d0d;
-      border: 1px solid var(--grey);
-      padding: 20px 30px;
+      background: var(--darker-grey);
+      border: 2px solid var(--accent-red);
+      padding: 25px 35px;
       font-size: 1.1rem;
       margin: 30px 0;
       text-align: center;
+      box-shadow: 0 0 20px var(--accent-red-glow);
     }
 
     .install-command code {
-      color: var(--white);
+      color: var(--accent-red);
+      font-weight: bold;
     }
 
     .install-flow {
@@ -1484,25 +1492,29 @@
       display: flex;
       align-items: center;
       gap: 25px;
-      padding: 20px 0;
-      border-bottom: 1px dashed var(--dark-grey);
+      padding: 20px;
+      margin-bottom: 15px;
+      border: 2px solid var(--border-color);
+      background: var(--darker-grey);
       opacity: 0;
       transform: translateY(20px);
     }
 
     .install-step:last-child {
-      border-bottom: none;
+      margin-bottom: 0;
     }
 
     .install-icon {
       width: 50px;
       height: 50px;
-      border: 1px dashed var(--grey);
+      border: 2px solid var(--accent-red);
+      background: transparent;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       font-size: 1.2rem;
+      color: var(--accent-red);
     }
 
     .install-content {
@@ -1511,28 +1523,30 @@
 
     .install-from {
       color: var(--grey);
-      font-size: 0.9rem;
+      font-size: 0.85rem;
     }
 
     .install-arrow {
-      color: var(--grey);
+      color: var(--accent-red);
       flex-shrink: 0;
       font-size: 1.2rem;
+      font-weight: bold;
     }
 
     .install-to {
       color: var(--white);
-      font-size: 0.95rem;
+      font-size: 0.9rem;
+      font-weight: 500;
     }
 
     .install-note {
       color: var(--grey);
-      font-size: 0.8rem;
+      font-size: 0.75rem;
       margin-top: 5px;
     }
 
     /* ============================================
-       SECTION 10: CREDITS
+       SECTION 10: CREDITS - boxy style
        ============================================ */
     #credits {
       text-align: center;
@@ -1540,64 +1554,69 @@
 
     .credit-links {
       display: flex;
-      gap: 30px;
+      gap: 20px;
       margin-top: 40px;
       flex-wrap: wrap;
       justify-content: center;
     }
 
     .credit-link {
-      border: 1px dashed var(--grey);
+      border: 2px solid var(--border-color);
+      background: var(--darker-grey);
       padding: 18px 35px;
       text-decoration: none;
       color: var(--white);
-      transition: all 0.3s;
+      transition: all 0.2s;
       opacity: 0;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      font-size: 0.85rem;
     }
 
     .credit-link:hover {
       background: var(--accent-red);
-      color: #fff;
+      color: var(--white);
       border-color: var(--accent-red);
-      box-shadow: 0 0 25px var(--accent-red-glow);
+      box-shadow: 0 0 15px var(--accent-red-glow);
     }
 
     .made-with {
       margin-top: 50px;
       color: var(--grey);
-      font-size: 0.95rem;
+      font-size: 0.9rem;
       opacity: 0;
       line-height: 1.8;
     }
 
     /* ============================================
-       SECTION INDICATORS
+       SECTION INDICATORS - square boxy dots
        ============================================ */
     .section-indicator {
       position: fixed;
-      right: 25px;
+      right: 20px;
       top: 50%;
       transform: translateY(-50%);
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      gap: 10px;
       z-index: 1000;
     }
 
     .section-dot {
       width: 10px;
       height: 10px;
-      border: 1px solid var(--grey);
-      border-radius: 50%;
+      border: 2px solid var(--border-color);
+      border-radius: 0;
       cursor: pointer;
-      transition: all 0.3s;
+      transition: all 0.2s;
+      background: var(--card-bg);
     }
 
     .section-dot:hover,
     .section-dot.active {
       background: var(--accent-red);
       border-color: var(--accent-red);
-      box-shadow: 0 0 12px var(--accent-red-glow);
+      box-shadow: 0 0 8px var(--accent-red-glow);
     }
 
     /* ============================================
@@ -1680,16 +1699,82 @@
   <nav class="nav">
     <button class="nav-btn" id="playBtn">▶ AUTO PLAY</button>
     <button class="nav-btn" id="audioToggleBtn" title="Toggle narration audio">🔊 WITH AUDIO</button>
+    <button class="nav-btn" id="voiceSelectBtn" title="Choose narrator voice">🎙 VOICE</button>
     <button class="nav-btn" id="resetBtn">↺ RESTART</button>
   </nav>
 
+  <!-- Voice Preview Modal -->
+  <div class="voice-modal-overlay" id="voiceModalOverlay">
+    <div class="voice-modal">
+      <div class="voice-modal-header">
+        <div class="voice-modal-title">Choose Narrator Voice</div>
+        <button class="voice-modal-close" id="voiceModalClose">×</button>
+      </div>
+
+      <div class="voice-options">
+        <div class="voice-option selected" data-voice="adam" data-file="audio/narration-adam.mp3" data-timing="audio/narration-adam-timing.json" data-duration="370.8">
+          <button class="voice-play-btn" data-preview="audio/narration-adam.mp3">▶</button>
+          <div class="voice-info">
+            <div class="voice-name">Adam</div>
+            <div class="voice-desc">Deep, professional (~6 min)</div>
+          </div>
+          <button class="voice-select-btn">Selected</button>
+        </div>
+
+        <div class="voice-option" data-voice="mark" data-file="audio/narration-mark.mp3" data-timing="audio/narration-mark-timing.json" data-duration="338.7">
+          <button class="voice-play-btn" data-preview="audio/previews/preview-mark.mp3">▶</button>
+          <div class="voice-info">
+            <div class="voice-name">Mark</div>
+            <div class="voice-desc">Warm, conversational (~5.5 min)</div>
+          </div>
+          <button class="voice-select-btn">Select</button>
+        </div>
+
+        <div class="voice-option" data-voice="hope" data-file="audio/narration-hope.mp3" data-timing="audio/narration-hope-timing.json" data-duration="305.2">
+          <button class="voice-play-btn" data-preview="audio/previews/preview-hope.mp3">▶</button>
+          <div class="voice-info">
+            <div class="voice-name">Hope</div>
+            <div class="voice-desc">Bright, energetic (~5 min)</div>
+          </div>
+          <button class="voice-select-btn">Select</button>
+        </div>
+
+        <div class="voice-option" data-voice="creature" data-file="audio/narration-creature.mp3" data-timing="audio/narration-creature-timing.json" data-duration="466.6">
+          <button class="voice-play-btn" data-preview="audio/previews/preview-creature.mp3">▶</button>
+          <div class="voice-info">
+            <div class="voice-name">Creature</div>
+            <div class="voice-desc">Unique, character voice (~7.5 min)</div>
+          </div>
+          <button class="voice-select-btn">Select</button>
+        </div>
+
+        <div class="voice-option" data-voice="gaming" data-file="audio/narration-gaming.mp3" data-timing="audio/narration-gaming-timing.json" data-duration="644.1">
+          <button class="voice-play-btn" data-preview="audio/previews/preview-gaming.mp3">▶</button>
+          <div class="voice-info">
+            <div class="voice-name">Gaming</div>
+            <div class="voice-desc">Dynamic, enthusiastic (~10.5 min)</div>
+          </div>
+          <button class="voice-select-btn">Select</button>
+        </div>
+      </div>
+
+      <div class="voice-modal-footer">
+        <div class="voice-modal-note">All voices have full narration with synchronized highlights.</div>
+        <button class="voice-confirm-btn" id="voiceConfirmBtn">Confirm Selection</button>
+      </div>
+    </div>
+  </div>
+
   <!-- Audio Narration Player (hidden) -->
   <audio id="narrationAudio" preload="auto">
-    <source src="audio/narration.mp3" type="audio/mpeg">
+    <source src="audio/narration-adam.mp3" type="audio/mpeg">
   </audio>
 
   <!-- Audio Progress Bar -->
   <div class="audio-progress-container" id="audioProgressContainer" style="display: none;">
+    <div class="chapter-buttons" id="chapterButtons">
+      <!-- Chapter buttons populated dynamically from timing data -->
+    </div>
     <div class="audio-time-display">
       <span id="audioCurrentTime">0:00</span>
       <span id="audioTotalTime">0:00</span>
@@ -1713,7 +1798,7 @@
         <span class="hustle-word hustle-highlight">API-DEV-TOOLS</span>
       </div>
       <div class="package-name" id="packageName">@hustle-together/api-dev-tools</div>
-      <div class="version" id="versionText">v2.0.6</div>
+      <div class="version" id="versionText">v2.0.8</div>
       <p class="tagline">"Hustle together. Share resources. Build stronger."<span class="cursor"></span></p>
 
       <div class="intro-text">
@@ -2546,11 +2631,13 @@
     const phaseArrows = document.querySelectorAll('#introFlow .phase-connector-arrow');
 
     // Create a separate timeline for the lighting sequence that loops
-    const lightingTL = gsap.timeline({
+    // Store globally so we can pause during narration
+    window.introLightingTL = gsap.timeline({
       repeat: -1,
       repeatDelay: 1,
       delay: 3 // Wait for intro animation to complete
     });
+    const lightingTL = window.introLightingTL;
 
     phaseNodes.forEach((node, i) => {
       lightingTL
@@ -2782,6 +2869,7 @@
     const audioCurrentTime = document.getElementById('audioCurrentTime');
     const audioTotalTime = document.getElementById('audioTotalTime');
     const audioSectionMarkers = document.getElementById('audioSectionMarkers');
+    const chapterButtons = document.getElementById('chapterButtons');
 
     let audioEnabled = true; // Audio on by default
     let timingData = null;
@@ -2797,11 +2885,15 @@
       return `${mins}:${secs.toString().padStart(2, '0')}`;
     }
 
-    // Load timing data
-    async function loadTimingData() {
-      if (timingData) return timingData;
+    // Current timing URL (can be changed when voice changes)
+    let currentTimingUrl = 'audio/narration-adam-timing.json';
+
+    // Load timing data (pass URL to force reload with different voice)
+    async function loadTimingData(url = null, forceReload = false) {
+      if (url) currentTimingUrl = url;
+      if (timingData && !forceReload) return timingData;
       try {
-        const response = await fetch('audio/narration-timing.json');
+        const response = await fetch(currentTimingUrl);
         if (!response.ok) throw new Error('Failed to load timing data');
         timingData = await response.json();
 
@@ -2823,6 +2915,116 @@
           });
         }
 
+        // Create chapter buttons for navigation
+        if (chapterButtons && timingData.sections) {
+          chapterButtons.innerHTML = '';
+          timingData.sections.forEach((section, i) => {
+            const btn = document.createElement('button');
+            btn.className = 'chapter-btn';
+            btn.textContent = section.id.toUpperCase();
+            btn.dataset.timestamp = section.timestamp;
+            btn.dataset.sectionId = section.id;
+            btn.dataset.index = i;
+
+            // Click handler: seek audio to timestamp + scroll to section
+            btn.addEventListener('click', (e) => {
+              e.stopPropagation(); // Prevent bubbling to progress bar
+
+              const seekTime = section.timestamp;
+              console.log(`Chapter click: seeking to ${section.id} at ${seekTime.toFixed(1)}s`);
+
+              // Function to perform the seek after audio is ready
+              const doSeek = () => {
+                console.log(`Performing seek to ${seekTime.toFixed(1)}s, audio readyState: ${narrationAudio.readyState}`);
+                narrationAudio.currentTime = seekTime;
+                console.log(`After setting currentTime: ${narrationAudio.currentTime.toFixed(1)}s`);
+              };
+
+              // If not playing, start first then seek
+              if (!isPlaying) {
+                isPlaying = true;
+                playBtn.classList.add('active');
+                playBtn.textContent = '⏸ STOP';
+
+                if (window.introLightingTL) {
+                  window.introLightingTL.kill();
+                  window.introLightingTL = null;
+                  document.querySelectorAll('#introFlow .phase-node').forEach(n => n.classList.remove('active'));
+                  document.querySelectorAll('#introFlow .phase-connector-arrow').forEach(a => a.classList.remove('active'));
+                }
+
+                audioProgressContainer.style.display = 'block';
+
+                // Wait for audio to be ready enough to seek
+                if (narrationAudio.readyState >= 1) {
+                  doSeek();
+                  narrationAudio.play().catch(err => console.error('Playback failed:', err));
+                } else {
+                  // Audio not ready yet, wait for loadedmetadata
+                  narrationAudio.addEventListener('loadedmetadata', function onLoaded() {
+                    narrationAudio.removeEventListener('loadedmetadata', onLoaded);
+                    doSeek();
+                    narrationAudio.play().catch(err => console.error('Playback failed:', err));
+                  });
+                  narrationAudio.load(); // Trigger loading
+                }
+              } else {
+                // Already playing - pause, seek, then play
+                narrationAudio.pause();
+
+                const performSeekAndPlay = () => {
+                  doSeek();
+                  narrationAudio.play().catch(err => console.error('Playback failed:', err));
+                };
+
+                // Use timingData.duration as indicator that we have valid timing for this voice
+                // Also check readyState >= 2 (HAVE_CURRENT_DATA) for reliable seeking
+                if (timingData && timingData.duration > 0 && narrationAudio.readyState >= 2) {
+                  performSeekAndPlay();
+                } else {
+                  // Audio not ready (e.g. after voice switch), wait for canplay
+                  console.log('Audio not ready for seek, waiting for canplay...');
+                  narrationAudio.addEventListener('canplay', function onReady() {
+                    narrationAudio.removeEventListener('canplay', onReady);
+                    performSeekAndPlay();
+                  }, { once: true });
+                  // Also try loadedmetadata as backup
+                  narrationAudio.addEventListener('loadedmetadata', function onMeta() {
+                    narrationAudio.removeEventListener('loadedmetadata', onMeta);
+                    if (narrationAudio.readyState >= 2) {
+                      performSeekAndPlay();
+                    }
+                  }, { once: true });
+                  narrationAudio.load();
+                }
+              }
+
+              // Update highlight tracking for new position
+              highlightIndex = 0;
+              if (timingData && timingData.highlights) {
+                for (let j = 0; j < timingData.highlights.length; j++) {
+                  if (timingData.highlights[j].timestamp <= seekTime) {
+                    highlightIndex = j;
+                  } else {
+                    break;
+                  }
+                }
+              }
+
+              // Scroll to section
+              const sectionEl = document.getElementById(section.id);
+              if (sectionEl) {
+                sectionEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
+              }
+
+              // Update active state
+              updateActiveChapter(i);
+            });
+
+            chapterButtons.appendChild(btn);
+          });
+        }
+
         console.log('Timing data loaded:', timingData.sections.length, 'sections,', timingData.highlights.length, 'highlights');
         return timingData;
       } catch (error) {
@@ -2840,10 +3042,20 @@
           currentHighlight = el;
           el.classList.add('audio-highlighted');
           el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-          gsap.fromTo(el,
-            { boxShadow: '0 0 0px var(--accent-red-glow)' },
-            { boxShadow: '0 0 40px var(--accent-red-glow), 0 0 80px var(--accent-red-glow)', duration: 0.4, ease: 'power2.out' }
-          );
+
+          // Only apply box-shadow GSAP animation to container elements, not text
+          const isContainer = el.classList.contains('solution-card') ||
+                              el.classList.contains('phase-box') ||
+                              el.classList.contains('gap-item') ||
+                              el.classList.contains('phase-node') ||
+                              el.classList.contains('install-command');
+
+          if (isContainer) {
+            gsap.fromTo(el,
+              { boxShadow: '0 4px 6px rgba(0,0,0,0.05)' },
+              { boxShadow: '0 8px 25px rgba(0,0,0,0.15)', duration: 0.4, ease: 'power2.out' }
+            );
+          }
         }
       } catch (e) {
         console.warn('Could not highlight:', selector, e);
@@ -2859,6 +3071,29 @@
       }
     }
 
+    // Update active chapter button based on index
+    function updateActiveChapter(index) {
+      if (!chapterButtons) return;
+      const buttons = chapterButtons.querySelectorAll('.chapter-btn');
+      buttons.forEach((btn, i) => {
+        btn.classList.toggle('active', i === index);
+      });
+    }
+
+    // Find current section index based on audio time
+    function getCurrentSectionIndex(currentTime) {
+      if (!timingData || !timingData.sections) return 0;
+      let idx = 0;
+      for (let i = 0; i < timingData.sections.length; i++) {
+        if (currentTime >= timingData.sections[i].timestamp) {
+          idx = i;
+        } else {
+          break;
+        }
+      }
+      return idx;
+    }
+
     // Handle audio time update (syncs highlights with narration)
     function onAudioTimeUpdate() {
       if (!timingData || !audioEnabled) return;
@@ -2874,6 +3109,13 @@
         audioCurrentTime.textContent = formatTime(currentTime);
       }
 
+      // Update active chapter button
+      const sectionIdx = getCurrentSectionIndex(currentTime);
+      if (sectionIdx !== currentSectionIdx) {
+        currentSectionIdx = sectionIdx;
+        updateActiveChapter(sectionIdx);
+      }
+
       // Check for highlight triggers
       for (let i = highlightIndex; i < timingData.highlights.length; i++) {
         const highlight = timingData.highlights[i];
@@ -2889,23 +3131,73 @@
     }
 
     // Handle seek on progress bar click
-    function onProgressBarClick(e) {
-      if (!timingData || !narrationAudio.duration) return;
+    async function onProgressBarClick(e) {
+      e.stopPropagation(); // Prevent event bubbling
 
+      // Use the progress bar's rect for calculation
       const rect = audioProgressBar.getBoundingClientRect();
       const clickX = e.clientX - rect.left;
-      const percentage = clickX / rect.width;
-      const seekTime = percentage * timingData.duration;
+      const percentage = Math.max(0, Math.min(1, clickX / rect.width));
+
+      // ALWAYS prefer timingData.duration (most reliable after voice switch)
+      // Only fall back to narrationAudio.duration if timing data unavailable
+      let duration = (timingData && timingData.duration > 0) ? timingData.duration : narrationAudio.duration;
+
+      if (!duration || duration === 0 || isNaN(duration)) {
+        console.warn('No duration available, waiting for audio to load...');
+        // Wait for audio to load
+        await new Promise((resolve) => {
+          let resolved = false;
+          const tryResolve = () => {
+            if (!resolved && narrationAudio.duration > 0) {
+              resolved = true;
+              resolve();
+            }
+          };
+          narrationAudio.addEventListener('loadedmetadata', tryResolve, { once: true });
+          narrationAudio.addEventListener('canplay', tryResolve, { once: true });
+          narrationAudio.load();
+          setTimeout(() => { if (!resolved) { resolved = true; resolve(); } }, 2000);
+        });
+        duration = narrationAudio.duration;
+        if (!duration || duration === 0 || isNaN(duration)) {
+          console.error('Still no duration available after waiting');
+          return;
+        }
+      }
+
+      const seekTime = percentage * duration;
+      console.log(`Progress bar click: seeking to ${seekTime.toFixed(1)}s (${(percentage * 100).toFixed(1)}%) using duration ${duration.toFixed(1)}s`);
+
+      // Pause, seek, then play (most reliable method)
+      const wasPlaying = !narrationAudio.paused;
+      narrationAudio.pause();
+
+      // Ensure audio is ready to seek (especially important after voice switch)
+      if (narrationAudio.readyState < 2) {
+        console.log('Waiting for audio to be ready for seeking...');
+        await new Promise((resolve) => {
+          narrationAudio.addEventListener('canplay', resolve, { once: true });
+          setTimeout(resolve, 1000);
+        });
+      }
 
       narrationAudio.currentTime = seekTime;
+      console.log(`After setting currentTime: ${narrationAudio.currentTime.toFixed(1)}s`);
+
+      if (wasPlaying) {
+        narrationAudio.play().catch(err => console.error('Playback failed:', err));
+      }
 
       // Reset highlight tracking
       highlightIndex = 0;
-      for (let i = 0; i < timingData.highlights.length; i++) {
-        if (timingData.highlights[i].timestamp <= seekTime) {
-          highlightIndex = i;
-        } else {
-          break;
+      if (timingData && timingData.highlights) {
+        for (let i = 0; i < timingData.highlights.length; i++) {
+          if (timingData.highlights[i].timestamp <= seekTime) {
+            highlightIndex = i;
+          } else {
+            break;
+          }
         }
       }
     }
@@ -2931,6 +3223,16 @@
       playBtn.classList.add('active');
       playBtn.textContent = '⏸ STOP';
 
+      // KILL the intro lighting animation completely to avoid visual conflict
+      // (Don't just pause - kill it so it won't restart)
+      if (window.introLightingTL) {
+        window.introLightingTL.kill();
+        window.introLightingTL = null;
+        // Reset the phase nodes to clean state
+        document.querySelectorAll('#introFlow .phase-node').forEach(n => n.classList.remove('active'));
+        document.querySelectorAll('#introFlow .phase-connector-arrow').forEach(a => a.classList.remove('active'));
+      }
+
       // Scroll to top first
       window.scrollTo({ top: 0, behavior: 'smooth' });
 
@@ -2975,6 +3277,9 @@
       removeHighlight();
       highlightIndex = 0;
       currentSectionIdx = 0;
+
+      // Note: We killed the intro lighting animation, so don't try to restart it
+      // The animation was distracting during/after narration playback
     }
 
     // Audio ended
@@ -3024,6 +3329,31 @@
     audioToggleBtn.addEventListener('click', toggleAudio);
     narrationAudio.addEventListener('timeupdate', onAudioTimeUpdate);
     narrationAudio.addEventListener('ended', onAudioEnded);
+
+    // DEBUG: Global click handler to see what's being clicked anywhere on page
+    document.addEventListener('click', (e) => {
+      // Only log clicks in the bottom 200px of the screen (where the audio player is)
+      if (e.clientY > window.innerHeight - 200) {
+        console.log('%c CLICK DETECTED ', 'background: red; color: white; font-size: 14px;', {
+          element: e.target.tagName,
+          id: e.target.id || '(no id)',
+          class: e.target.className || '(no class)',
+          x: e.clientX,
+          y: e.clientY,
+          audioCurrentTime: narrationAudio.currentTime.toFixed(1),
+          audioDuration: narrationAudio.duration ? narrationAudio.duration.toFixed(1) : 'not loaded'
+        });
+      }
+    }, true); // Use capture phase to see ALL clicks before they're handled
+
+    // Debug: track seeking events
+    narrationAudio.addEventListener('seeking', () => {
+      console.log('%c AUDIO SEEKING ', 'background: blue; color: white;', 'to:', narrationAudio.currentTime.toFixed(1));
+    });
+    narrationAudio.addEventListener('seeked', () => {
+      console.log('%c AUDIO SEEKED ', 'background: green; color: white;', 'to:', narrationAudio.currentTime.toFixed(1));
+    });
+
     audioProgressBar.addEventListener('click', onProgressBarClick);
 
     // Check if audio file is accessible
@@ -3042,6 +3372,10 @@
     // RESET BUTTON
     // ============================================
     document.getElementById('resetBtn').addEventListener('click', () => {
+      // Stop audio and auto-play first
+      stopAutoPlay();
+
+      // Scroll to top
       window.scrollTo({ top: 0, behavior: 'smooth' });
 
       // Reset animations
@@ -3059,11 +3393,20 @@
         gsap.set('.credit-link, .made-with', { opacity: 0 });
         gsap.set('.intro-text, .scroll-hint', { opacity: 0 });
 
+        // Reset phase boxes
         document.querySelectorAll('.phase-box').forEach(box => {
           box.classList.remove('active');
           box.querySelector('.phase-status').textContent = '';
         });
 
+        // Reset intro phase nodes
+        document.querySelectorAll('.phase-node').forEach(node => {
+          node.classList.remove('active');
+        });
+        document.querySelectorAll('.phase-connector-arrow').forEach(arrow => {
+          arrow.classList.remove('active');
+        });
+
         ScrollTrigger.refresh();
       }, 500);
     });
@@ -3237,6 +3580,173 @@
       });
     });
 
+    // ============================================
+    // VOICE PREVIEW MODAL
+    // ============================================
+    const voiceSelectBtn = document.getElementById('voiceSelectBtn');
+    const voiceModalOverlay = document.getElementById('voiceModalOverlay');
+    const voiceModalClose = document.getElementById('voiceModalClose');
+    const voiceConfirmBtn = document.getElementById('voiceConfirmBtn');
+    const voiceOptions = document.querySelectorAll('.voice-option');
+    const voicePlayBtns = document.querySelectorAll('.voice-play-btn');
+
+    let previewAudio = null;
+    let currentlyPlayingBtn = null;
+    let selectedVoice = 'adam';
+
+    // Open modal
+    voiceSelectBtn.addEventListener('click', () => {
+      voiceModalOverlay.classList.add('active');
+    });
+
+    // Close modal
+    function closeVoiceModal() {
+      voiceModalOverlay.classList.remove('active');
+      // Stop any playing preview
+      if (previewAudio) {
+        previewAudio.pause();
+        previewAudio = null;
+      }
+      if (currentlyPlayingBtn) {
+        currentlyPlayingBtn.textContent = '▶';
+        currentlyPlayingBtn.classList.remove('playing');
+        currentlyPlayingBtn = null;
+      }
+    }
+
+    voiceModalClose.addEventListener('click', closeVoiceModal);
+    voiceModalOverlay.addEventListener('click', (e) => {
+      if (e.target === voiceModalOverlay) {
+        closeVoiceModal();
+      }
+    });
+
+    // Play preview
+    voicePlayBtns.forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const previewSrc = btn.dataset.preview;
+
+        // If clicking the same button that's playing, stop it
+        if (currentlyPlayingBtn === btn && previewAudio && !previewAudio.paused) {
+          previewAudio.pause();
+          btn.textContent = '▶';
+          btn.classList.remove('playing');
+          currentlyPlayingBtn = null;
+          return;
+        }
+
+        // Stop any currently playing preview
+        if (previewAudio) {
+          previewAudio.pause();
+        }
+        if (currentlyPlayingBtn) {
+          currentlyPlayingBtn.textContent = '▶';
+          currentlyPlayingBtn.classList.remove('playing');
+        }
+
+        // Play new preview
+        previewAudio = new Audio(previewSrc);
+        previewAudio.play().catch(err => {
+          console.error('Audio play failed:', err);
+          btn.textContent = '⚠';
+          setTimeout(() => { btn.textContent = '▶'; }, 2000);
+        });
+
+        btn.textContent = '⏸';
+        btn.classList.add('playing');
+        currentlyPlayingBtn = btn;
+
+        previewAudio.addEventListener('ended', () => {
+          btn.textContent = '▶';
+          btn.classList.remove('playing');
+          currentlyPlayingBtn = null;
+        });
+      });
+    });
+
+    // Select voice
+    voiceOptions.forEach(option => {
+      option.addEventListener('click', () => {
+        // Remove selected from all
+        voiceOptions.forEach(opt => {
+          opt.classList.remove('selected');
+          opt.querySelector('.voice-select-btn').textContent = 'Select';
+        });
+
+        // Add selected to clicked
+        option.classList.add('selected');
+        option.querySelector('.voice-select-btn').textContent = 'Selected';
+        selectedVoice = option.dataset.voice;
+      });
+    });
+
+    // Confirm selection
+    voiceConfirmBtn.addEventListener('click', async () => {
+      const selectedOption = document.querySelector('.voice-option.selected');
+      if (selectedOption) {
+        const voiceFile = selectedOption.dataset.file;
+        const timingFile = selectedOption.dataset.timing;
+        const voiceName = selectedOption.querySelector('.voice-name').textContent;
+
+        // Stop current playback if any
+        if (isPlaying) {
+          stopAutoPlay();
+        }
+
+        // Update audio source
+        narrationAudio.src = voiceFile;
+
+        // Force load the new audio and wait for it to be ready
+        narrationAudio.load();
+
+        // Wait for the audio to load metadata AND have valid duration (don't trust stale readyState)
+        await new Promise((resolve) => {
+          let resolved = false;
+          const tryResolve = () => {
+            if (!resolved && narrationAudio.duration > 0 && !isNaN(narrationAudio.duration)) {
+              resolved = true;
+              resolve();
+            }
+          };
+          // Listen for multiple events to ensure we catch when audio is truly ready
+          narrationAudio.addEventListener('loadedmetadata', tryResolve, { once: true });
+          narrationAudio.addEventListener('canplay', tryResolve, { once: true });
+          narrationAudio.addEventListener('durationchange', tryResolve, { once: true });
+          // Timeout fallback in case load fails
+          setTimeout(() => {
+            if (!resolved) {
+              console.warn('Audio load timeout, proceeding anyway');
+              resolved = true;
+              resolve();
+            }
+          }, 3000);
+        });
+
+        // Reset audio position and clear old state
+        narrationAudio.currentTime = 0;
+        timingData = null;
+        highlightIndex = 0;
+        currentSectionIdx = 0;
+        await loadTimingData(timingFile, true);
+
+        // Update voice button to show selected voice
+        voiceSelectBtn.textContent = `🎙 ${voiceName.toUpperCase()}`;
+
+        console.log(`Voice changed to: ${voiceName} (${voiceFile})`);
+        console.log(`Audio duration: ${narrationAudio.duration}s, readyState: ${narrationAudio.readyState}`);
+        console.log(`Timing data loaded: ${timingFile}`);
+      }
+      closeVoiceModal();
+    });
+
+    // Keyboard close (Escape)
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && voiceModalOverlay.classList.contains('active')) {
+        closeVoiceModal();
+      }
+    });
+
   </script>
 
 </body>