diff --git a/README.md b/README.md
index 8401866..eba15cc 100644
--- a/README.md
+++ b/README.md
@@ -338,20 +338,32 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@Mudita-Singh</b></sub>
       </a>
     </td>
+    <td align="center" width="120">
+      <a href="https://github.com/Naina123kashyap">
+        <img src="https://github.com/Naina123kashyap.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="Naina123kashyap" /><br />
+        <sub><b>@Naina123kashyap</b></sub>
+      </a>
+    </td>
     <td align="center" width="120">
       <a href="https://github.com/Naveen-Boddepalli">
         <img src="https://github.com/Naveen-Boddepalli.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="Naveen-Boddepalli" /><br />
         <sub><b>@Naveen-Boddepalli</b></sub>
       </a>
     </td>
+  </tr>
+  <tr>
+    <td align="center" width="120">
+      <a href="https://github.com/Nencypatel21">
+        <img src="https://github.com/Nencypatel21.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="Nencypatel21" /><br />
+        <sub><b>@Nencypatel21</b></sub>
+      </a>
+    </td>
     <td align="center" width="120">
       <a href="https://github.com/NidhiS-7">
         <img src="https://github.com/NidhiS-7.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="NidhiS-7" /><br />
         <sub><b>@NidhiS-7</b></sub>
       </a>
     </td>
-  </tr>
-  <tr>
     <td align="center" width="120">
       <a href="https://github.com/PIYUSH-NEXTGEN">
         <img src="https://github.com/PIYUSH-NEXTGEN.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="PIYUSH-NEXTGEN" /><br />
@@ -376,6 +388,8 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@PragatiNigam29</b></sub>
       </a>
     </td>
+  </tr>
+  <tr>
     <td align="center" width="120">
       <a href="https://github.com/Quantum3600">
         <img src="https://github.com/Quantum3600.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="Quantum3600" /><br />
@@ -388,8 +402,6 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@Ranjanmaiti6</b></sub>
       </a>
     </td>
-  </tr>
-  <tr>
     <td align="center" width="120">
       <a href="https://github.com/Sanjhivvarshan-b-s">
         <img src="https://github.com/Sanjhivvarshan-b-s.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="Sanjhivvarshan-b-s" /><br />
@@ -414,6 +426,8 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@Shital861</b></sub>
       </a>
     </td>
+  </tr>
+  <tr>
     <td align="center" width="120">
       <a href="https://github.com/Shivi-Srivastava-4444">
         <img src="https://github.com/Shivi-Srivastava-4444.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="Shivi-Srivastava-4444" /><br />
@@ -426,8 +440,6 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@Siddh2024</b></sub>
       </a>
     </td>
-  </tr>
-  <tr>
     <td align="center" width="120">
       <a href="https://github.com/Sparshjoshi-iit">
         <img src="https://github.com/Sparshjoshi-iit.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="Sparshjoshi-iit" /><br />
@@ -452,6 +464,8 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@Tech4Aditya</b></sub>
       </a>
     </td>
+  </tr>
+  <tr>
     <td align="center" width="120">
       <a href="https://github.com/TheBinaryAVA">
         <img src="https://github.com/TheBinaryAVA.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="TheBinaryAVA" /><br />
@@ -464,8 +478,6 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@Tiago-Vier-Preto</b></sub>
       </a>
     </td>
-  </tr>
-  <tr>
     <td align="center" width="120">
       <a href="https://github.com/Vanshikakhasat">
         <img src="https://github.com/Vanshikakhasat.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="Vanshikakhasat" /><br />
@@ -490,6 +502,8 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@abhi-nav-25</b></sub>
       </a>
     </td>
+  </tr>
+  <tr>
     <td align="center" width="120">
       <a href="https://github.com/advikdivekar">
         <img src="https://github.com/advikdivekar.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="advikdivekar" /><br />
@@ -502,8 +516,6 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@anujsharma8d</b></sub>
       </a>
     </td>
-  </tr>
-  <tr>
     <td align="center" width="120">
       <a href="https://github.com/artic2702">
         <img src="https://github.com/artic2702.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="artic2702" /><br />
@@ -528,6 +540,8 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@avzuha</b></sub>
       </a>
     </td>
+  </tr>
+  <tr>
     <td align="center" width="120">
       <a href="https://github.com/ayushyadav0707">
         <img src="https://github.com/ayushyadav0707.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="ayushyadav0707" /><br />
@@ -540,8 +554,6 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@bhavyapandiya29</b></sub>
       </a>
     </td>
-  </tr>
-  <tr>
     <td align="center" width="120">
       <a href="https://github.com/codewithakshyaaa">
         <img src="https://github.com/codewithakshyaaa.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="codewithakshyaaa" /><br />
@@ -566,6 +578,8 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@gatiksolanki13-netizen</b></sub>
       </a>
     </td>
+  </tr>
+  <tr>
     <td align="center" width="120">
       <a href="https://github.com/iamprasoon2006-cell">
         <img src="https://github.com/iamprasoon2006-cell.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="iamprasoon2006-cell" /><br />
@@ -578,8 +592,6 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@itsdakshjain</b></sub>
       </a>
     </td>
-  </tr>
-  <tr>
     <td align="center" width="120">
       <a href="https://github.com/jeetrouth">
         <img src="https://github.com/jeetrouth.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="jeetrouth" /><br />
@@ -604,6 +616,8 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@madhavcodes25</b></sub>
       </a>
     </td>
+  </tr>
+  <tr>
     <td align="center" width="120">
       <a href="https://github.com/mahi-8758">
         <img src="https://github.com/mahi-8758.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="mahi-8758" /><br />
@@ -616,8 +630,6 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@mrinmoyChakraborty-mrinox</b></sub>
       </a>
     </td>
-  </tr>
-  <tr>
     <td align="center" width="120">
       <a href="https://github.com/n1o5">
         <img src="https://github.com/n1o5.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="n1o5" /><br />
@@ -642,6 +654,8 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@nishtha-agarwal-211</b></sub>
       </a>
     </td>
+  </tr>
+  <tr>
     <td align="center" width="120">
       <a href="https://github.com/parasmani-dev">
         <img src="https://github.com/parasmani-dev.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="parasmani-dev" /><br />
@@ -654,8 +668,6 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@parulpaliwal01</b></sub>
       </a>
     </td>
-  </tr>
-  <tr>
     <td align="center" width="120">
       <a href="https://github.com/pragya-manna">
         <img src="https://github.com/pragya-manna.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="pragya-manna" /><br />
@@ -680,6 +692,8 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@r-sushanth08</b></sub>
       </a>
     </td>
+  </tr>
+  <tr>
     <td align="center" width="120">
       <a href="https://github.com/rashiaggarwal06">
         <img src="https://github.com/rashiaggarwal06.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="rashiaggarwal06" /><br />
@@ -692,8 +706,6 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@rishit537</b></sub>
       </a>
     </td>
-  </tr>
-  <tr>
     <td align="center" width="120">
       <a href="https://github.com/sakshicoded1111">
         <img src="https://github.com/sakshicoded1111.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="sakshicoded1111" /><br />
@@ -718,6 +730,8 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@shimonenator</b></sub>
       </a>
     </td>
+  </tr>
+  <tr>
     <td align="center" width="120">
       <a href="https://github.com/shreyasarote7717-cyber">
         <img src="https://github.com/shreyasarote7717-cyber.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="shreyasarote7717-cyber" /><br />
@@ -730,8 +744,6 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@shreyasgawande19</b></sub>
       </a>
     </td>
-  </tr>
-  <tr>
     <td align="center" width="120">
       <a href="https://github.com/siri-004">
         <img src="https://github.com/siri-004.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="siri-004" /><br />
@@ -756,6 +768,8 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@steam-bell-92</b></sub>
       </a>
     </td>
+  </tr>
+  <tr>
     <td align="center" width="120">
       <a href="https://github.com/sujitsingh8">
         <img src="https://github.com/sujitsingh8.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="sujitsingh8" /><br />
@@ -768,8 +782,6 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@tanishkakora</b></sub>
       </a>
     </td>
-  </tr>
-  <tr>
     <td align="center" width="120">
       <a href="https://github.com/twinkle0tech">
         <img src="https://github.com/twinkle0tech.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="twinkle0tech" /><br />
@@ -794,6 +806,8 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@vedikabajaj05</b></sub>
       </a>
     </td>
+  </tr>
+  <tr>
     <td align="center" width="120">
       <a href="https://github.com/vivekCS007">
         <img src="https://github.com/vivekCS007.png?size=100" width="100" height="100" style="border-radius:50%; border:2px solid #555;" alt="vivekCS007" /><br />
@@ -806,6 +820,10 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
         <sub><b>@yuvraj-k-singh</b></sub>
       </a>
     </td>
+    <td width="120"></td>
+    <td width="120"></td>
+    <td width="120"></td>
+    <td width="120"></td>
   </tr>
 </table>
 <!-- CONTRIBUTORS_END -->
diff --git a/WEB_APP_GUIDE.md b/WEB_APP_GUIDE.md
new file mode 100644
index 0000000..3e09762
--- /dev/null
+++ b/WEB_APP_GUIDE.md
@@ -0,0 +1,3381 @@
+# 🚀 Web App Architecture Guide
+
+<div align="center">
+
+![Web App Guide Header](https://readme-typing-svg.herokuapp.com?font=Fira+Code&size=32&duration=3000&pause=1000&color=22C55E&center=true&vCenter=true&width=900&lines=🚀+Web+App+Architecture+Guide;⚡+Interactive+Frontend+Documentation;🐍+Vanilla+JavaScript+%26+Pyodide+%26+Web+Workers)
+
+</div>
+
+> **Python Mini Projects** — Interactive Frontend Documentation  
+> A modern, accessible web experience powered by vanilla JavaScript, Pyodide, and Web Workers.
+
+```
+════════════════════════════════════════════════════════════════
+                   🎨 Welcome to the Guide                         
+        Architecture | Components | Design | Accessibility    
+════════════════════════════════════════════════════════════════
+```
+
+
+## 📑 Quick Navigation
+
+| Section | Purpose | Time |
+|---------|---------|------|
+| 🎯 [Architecture](#-system-architecture) | Core system design | 5 min |
+| 🎨 [Components](#-component-library) | UI component reference | 8 min |
+| 🎭 [Design System](#-design-system) | Colors, typography, animations | 6 min |
+| ♿ [Accessibility](#-accessibility-standards) | WCAG 2.1 AA compliance | 7 min |
+| 📱 [Responsive Design](#-responsive-design) | Mobile-first approach | 5 min |
+| 👨‍💻 [Contributing](#-contributor-guide) | Setup & workflow | 10 min |
+| ✨ [Adding Features](#-adding-new-projects) | Step-by-step guides | 10 min |
+
+---
+
+## 🎯 System Architecture
+
+### High-Level Overview
+
+```mermaid
+graph TB
+    subgraph Browser["🌐 Browser Execution"]
+        DOM["DOM\n(HTML)"]
+        CSS["Styles\n(CSS Variables)"]
+        MainThread["Main Thread\n(UI & Events)"]
+        Worker["Web Worker\n(Python Execution)"]
+    end
+    
+    subgraph Modules["📦 JavaScript Modules"]
+        main["main.js\n(orchestration)"]
+        playground["playground.js\n(Pyodide)"]
+        projects["projects.js\n(registry)"]
+        storage["storage.js\n(persistence)"]
+        audio["audio.js\n(sounds)"]
+    end
+    
+    External["🔌 Pyodide\n(Python Runtime)"]
+    
+    MainThread -->|control| DOM
+    MainThread -->|wire events| main
+    main -->|message passing| playground
+    playground -->|Web Worker| Worker
+    Worker -->|execute async| External
+    main -->|read/write| storage
+    main -->|play| audio
+```
+
+### Project Philosophy
+
+**Core Principles:**
+
+1. **Zero Installation** — Run in browsers without Python install
+2. **Progressive Enhancement** — Works with minimal JS, scales up
+3. **Accessibility First** — WCAG 2.1 Level AA built-in
+4. **Mobile-First** — Designed for mobile, scales to desktop
+5. **Modular Architecture** — Independent, testable modules
+6. **Performance** — Non-blocking execution, optimized rendering
+
+### Thread Model: Why Web Workers? 🧵
+
+Python code execution happens on a **separate thread** to prevent UI freezing:
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant MainThread as Main Thread
+    participant Worker as Web Worker
+    participant Pyodide as Python Runtime
+    
+    User->>MainThread: Click "Run Code"
+    Note over MainThread: ✅ Still responsive!
+    MainThread->>MainThread: UI remains interactive
+    MainThread->>Worker: postMessage(python_code)
+    Note over Worker: Long computation
+    Worker->>Pyodide: Execute python asynchronously
+    Pyodide->>Pyodide: Heavy processing...
+    Pyodide->>Worker: Returns stdout/stderr
+    Worker->>MainThread: postMessage(result)
+    MainThread->>User: Display result instantly
+```
+
+**Benefits:**
+- ✅ UI never freezes during computation
+- ✅ Users can interact while code runs
+- ✅ Click events process instantly
+- ✅ Multiple computations can queue
+
+### Infinite Loop Protection ⚡
+
+The critical challenge: **How to stop an infinite loop?**
+
+**Solution: Worker Termination**
+
+```javascript
+// When user clicks "Stop"
+function stopExecution() {
+    if (worker) {
+        worker.terminate();  // ← Instantly kills the thread
+        worker = null;
+        spawnWorker();       // ← Create fresh worker
+    }
+}
+```
+
+**Why this works:**
+- `terminate()` immediately halts the worker thread
+- Even mid-infinite-loop, execution stops instantly
+- No timeout hacks needed
+- Fresh worker loads in ~100ms from cache
+
+---
+
+## 🎨 Component Library
+
+### 🔘 Button Component
+
+**Purpose:** Trigger actions — submit forms, launch projects, toggle features
+
+```html
+<!-- Primary button (call-to-action) -->
+<button class="btn btn-primary">Play Game</button>
+
+<!-- Secondary button -->
+<button class="btn btn-secondary">Learn More</button>
+
+<!-- Icon-only button -->
+<button class="btn btn-icon" aria-label="Toggle theme">
+    <i class="fas fa-sun"></i>
+</button>
+
+<!-- Disabled state -->
+<button class="btn btn-primary" disabled>Loading...</button>
+```
+
+**CSS Structure:**
+
+```css
+.btn {
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 0.5rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: var(--transition);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    color: var(--on-accent);
+}
+
+.btn-primary:hover {
+    filter: brightness(1.1);
+    box-shadow: var(--shadow);
+}
+
+.btn:focus {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+.btn:active {
+    transform: scale(0.98);
+}
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+```
+
+**Variants:**
+| Variant | Usage |
+|---------|-------|
+| `btn-primary` | Main CTA, important actions |
+| `btn-secondary` | Alternative actions |
+| `btn-danger` | Destructive actions |
+| `btn-icon` | Icon-only (must have aria-label) |
+
+**Accessibility:**
+- ✅ Keyboard focusable (Tab key)
+- ✅ Enter/Space activates
+- ✅ Focus indicator visible
+- ✅ Minimum 44×44px hit target
+- ✅ Screen reader friendly
+
+---
+
+### 🃏 Card Component
+
+**Purpose:** Display project information in scannable units
+
+```html
+<article class="project-card" aria-label="Rock Paper Scissors game">
+    <div class="card-header">
+        <h3 class="card-title">🎮 Rock Paper Scissors</h3>
+        <span class="badge badge-game">Game</span>
+    </div>
+    
+    <p class="card-description">
+        Classic strategy game with AI opponent. Master the mind games!
+    </p>
+    
+    <div class="card-metadata">
+        <span class="badge badge-difficulty">Beginner</span>
+        <span class="stat">⏱️ 5 min</span>
+    </div>
+    
+    <button class="btn btn-primary" data-project="rock-paper-scissor">
+        Play Now
+    </button>
+</article>
+```
+
+**CSS:**
+
+```css
+.project-card {
+    background: var(--surface-color);
+    border: 1px solid var(--border-color);
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    transition: var(--transition);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.project-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow);
+    border-color: var(--primary-color);
+}
+
+.project-card:focus-within {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+.card-title {
+    font-size: 1.25rem;
+    margin: 0;
+    color: var(--text-color);
+}
+
+.card-description {
+    color: var(--text-secondary);
+    margin: 0;
+    line-height: 1.5;
+}
+
+.badge {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    background: var(--accent-soft);
+    color: var(--primary-color);
+    border: 1px solid var(--accent-border);
+}
+```
+
+**Grid Responsive:**
+
+```css
+.projects-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+}
+
+@media (min-width: 640px) {
+    .projects-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1.5rem;
+    }
+}
+
+@media (min-width: 1024px) {
+    .projects-grid {
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 2rem;
+    }
+}
+```
+
+---
+
+### 🪟 Modal Component
+
+**Purpose:** Display project UIs in focused overlay without navigation
+
+```html
+<div class="modal" id="projectModal" role="dialog" aria-modal="true" hidden>
+    <div class="modal-overlay" id="modalOverlay"></div>
+    <div class="modal-dialog">
+        <div class="modal-header">
+            <h2 class="modal-title" id="modalTitle">🎮 Project Name</h2>
+            <button class="modal-close" id="modalClose" aria-label="Close dialog">×</button>
+        </div>
+        <div class="modal-body" id="modalBody"></div>
+    </div>
+</div>
+
+<main id="main-content" inert><!-- Page content --></main>
+```
+
+**CSS:**
+
+```css
+.modal {
+    position: fixed;
+    inset: 0;
+    z-index: 2000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    animation: fadeIn 0.3s ease;
+}
+
+.modal[hidden] { display: none; }
+
+.modal-overlay {
+    position: absolute;
+    inset: 0;
+    background: var(--overlay-color);
+    cursor: pointer;
+}
+
+.modal-dialog {
+    position: relative;
+    z-index: 1;
+    background: var(--surface-color);
+    border-radius: 0.75rem;
+    max-width: 90vw;
+    max-height: 90vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--shadow-modal);
+    animation: slideUp 0.3s ease;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.modal-close:focus {
+    outline: 2px solid var(--primary-color);
+    border-radius: 0.25rem;
+}
+
+.modal-body {
+    padding: 1.5rem;
+    overflow-y: auto;
+    flex: 1;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideUp {
+    from {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+```
+
+**Focus Management (JavaScript):**
+
+```javascript
+function openProjectModal(projectName) {
+    const html = getProjectHTML(projectName);
+    modalBody.innerHTML = html;
+    modal.removeAttribute('hidden');
+    mainContent.setAttribute('inert', '');
+    modalClose.focus();
+}
+
+function closeProjectModal() {
+    modal.setAttribute('hidden', '');
+    mainContent.removeAttribute('inert');
+    triggerButton.focus();
+}
+
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && !modal.hasAttribute('hidden')) {
+        closeProjectModal();
+    }
+});
+
+document.getElementById('modalOverlay').addEventListener('click', closeProjectModal);
+modalClose.addEventListener('click', closeProjectModal);
+```
+
+---
+
+### 🔍 Search Component
+
+**Purpose:** Enable users to quickly find projects by name or keyword
+
+```html
+<div class="search-wrapper">
+    <input type="search" id="projectSearch" 
+           placeholder="Search projects... (/ to focus)"
+           aria-label="Search projects" />
+    <button id="searchClear" aria-label="Clear search">×</button>
+    <div id="searchLoader" hidden>
+        <i class="fas fa-spinner fa-spin"></i>
+    </div>
+    <div id="searchDropdown" hidden>
+        <div id="recentSearchesSection">
+            <div class="search-section-title">Recent</div>
+            <ul id="recentSearchesList"></ul>
+        </div>
+        <div id="resultsSection">
+            <ul id="resultsList"></ul>
+        </div>
+    </div>
+</div>
+```
+
+**Features:**
+- Keyboard shortcut `/` to focus
+- Debounced 300ms for performance
+- Recent searches saved to localStorage
+- Dropdown with suggestions
+- Escape key closes dropdown
+
+---
+
+### 🐍 Python Playground
+
+**Purpose:** Interactive code editor and executor powered by Pyodide
+
+```html
+<div class="playground-section" id="playgroundSection" hidden>
+    <div class="playground-header">
+        <h1 class="playground-title">🐍 Python Playground</h1>
+        <span class="playground-status" id="playgroundStatus">Initializing...</span>
+        <p class="playground-hint">Press <kbd>Ctrl+Enter</kbd> to run</p>
+    </div>
+    
+    <div class="playground-container">
+        <div class="playground-editor-section">
+            <label for="codeEditor">Code Editor</label>
+            <textarea id="codeEditor" class="code-editor" 
+                      placeholder="Enter Python code here..."></textarea>
+        </div>
+        
+        <div class="playground-output-section">
+            <label for="outputPane">Output</label>
+            <pre id="outputPane" class="output-pane"></pre>
+        </div>
+    </div>
+    
+    <div class="playground-controls">
+        <button id="runCode" class="btn btn-primary">▶ Run</button>
+        <button id="stopCode" class="btn btn-danger" disabled>⏹ Stop</button>
+        <button id="resetCode" class="btn btn-secondary">↺ Reset</button>
+    </div>
+</div>
+```
+
+**Keyboard Shortcuts:**
+| Shortcut | Action |
+|----------|--------|
+| `Ctrl+Enter` | Run code |
+| `Tab` | Insert tab |
+
+---
+
+### 🎨 Theme Toggle
+
+**Purpose:** Allow users to switch between dark and light themes
+
+```javascript
+function toggleTheme() {
+    const html = document.documentElement;
+    const currentTheme = html.getAttribute('data-theme') || 'dark';
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    
+    html.setAttribute('data-theme', newTheme);
+    const icon = document.getElementById('themeIcon');
+    icon.className = newTheme === 'dark' ? 'fas fa-moon' : 'fas fa-sun';
+    localStorage.setItem('theme', newTheme);
+}
+
+function initTheme() {
+    const saved = localStorage.getItem('theme');
+    if (saved) {
+        applyTheme(saved);
+    } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+        applyTheme('light');
+    } else {
+        applyTheme('dark');
+    }
+}
+
+initTheme();
+document.getElementById('themeToggle').addEventListener('click', toggleTheme);
+```
+
+---
+
+## 🎭 Design System
+
+### 🌈 Color Palette
+
+#### Dark Theme (Default)
+```css
+--primary-color: #22c55e        /* Brand green */
+--secondary-color: #06b6d4      /* Cyan accent */
+--success-color: #10b981        /* Green success */
+--danger-color: #ef4444         /* Red errors */
+--warning-color: #f59e0b        /* Orange warnings */
+
+--bg-color: #081120             /* Deep blue background */
+--surface-color: #111827        /* Dark surface */
+--panel-color: #0f172a          /* Input/nested bg */
+--text-color: #e5e7eb           /* Light text */
+--text-secondary: #94a3b8       /* Muted text */
+--border-color: #1f2937         /* Subtle borders */
+```
+
+#### Light Theme
+```css
+--primary-color: #16a34a        /* Darker green */
+--bg-color: #f8fafc             /* Light background */
+--surface-color: #ffffff        /* White surfaces */
+--text-color: #1f2937           /* Dark text */
+--text-secondary: #6b7280       /* Muted text */
+--border-color: #d8dee8         /* Light borders */
+```
+
+### 📝 Typography
+
+**Font Stack:**
+```css
+/* Headings */
+font-family: 'Fredoka', 'Segoe UI', sans-serif;
+
+/* Body */
+font-family: 'DM Sans', 'Segoe UI', sans-serif;
+
+/* Code */
+font-family: 'IBM Plex Mono', monospace;
+```
+
+**Responsive Font Sizes:**
+```css
+h1 { font-size: clamp(1.75rem, 5vw, 3rem); }
+h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
+h3 { font-size: clamp(1.25rem, 3vw, 1.875rem); }
+
+body {
+    font-size: clamp(0.95rem, 2vw, 1.1rem);
+    line-height: 1.6;
+}
+```
+
+---
+
+### ✨ Animation & Motion
+
+**Standard Animations:**
+
+```css
+/* Fade in entrance */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+/* Slide up entrance */
+@keyframes slideUp {
+    from {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* Pulse (loading indicator) */
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+
+/* Spin (loading spinner) */
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+/* Bounce (attention) */
+@keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
+/* Glow effect */
+@keyframes glow {
+    0%, 100% { box-shadow: 0 0 5px var(--primary-color); }
+    50% { box-shadow: 0 0 20px var(--primary-color); }
+}
+
+/* Shimmer loading effect */
+@keyframes shimmer {
+    0% { background-position: -1000px 0; }
+    100% { background-position: 1000px 0; }
+}
+```
+
+**Transition Timing:**
+```css
+--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+--motion-duration: 0.3s;
+```
+
+**Reduced Motion Support:**
+```css
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+```
+
+---
+
+## ♿ Accessibility Standards
+
+### WCAG 2.1 Level AA Compliance
+
+| Criterion | Implementation |
+|-----------|-----------------|
+| **Semantic HTML** | `<button>`, `<nav>`, `<main>`, `<article>` |
+| **Keyboard Navigation** | Tab, Enter, Escape, Arrow keys functional |
+| **Focus Indicators** | 2px outline ring at 2px offset |
+| **Color Contrast** | 4.5:1 text, 3:1 large text |
+| **Screen Readers** | ARIA labels, landmarks, live regions |
+| **Reduced Motion** | Animations disabled when requested |
+| **Alt Text** | Provided for meaningful images |
+| **Form Labels** | Associated with inputs via `<label>` |
+
+### ⌨️ Keyboard Navigation
+
+**Focusable Elements:**
+- `<button>` and `<a href>`
+- `<input>`, `<textarea>`, `<select>`
+- Elements with `tabindex="0"`
+
+**Keyboard Shortcuts:**
+| Key | Action |
+|-----|--------|
+| `Tab` | Move to next element |
+| `Shift+Tab` | Move to previous element |
+| `Enter` | Activate button, submit form |
+| `Space` | Toggle checkbox |
+| `/` | Focus search input |
+| `Escape` | Close modal, menu |
+| `Arrow Keys` | Navigate menu/list |
+
+### 🏷️ ARIA Essentials
+
+```html
+<!-- Icon-only buttons need labels -->
+<button aria-label="Close dialog">×</button>
+
+<!-- Dialog needs these -->
+<div role="dialog" aria-modal="true" aria-labelledby="title">
+    <h2 id="title">Modal Title</h2>
+</div>
+
+<!-- Dynamic content announcement -->
+<div aria-live="polite" aria-atomic="true">
+    Form validation message
+</div>
+
+<!-- Decorative icons hidden -->
+<i class="fas fa-star" aria-hidden="true"></i>
+
+<!-- Input descriptions -->
+<input id="email" aria-describedby="emailHelp" />
+<span id="emailHelp">Enter your email</span>
+
+<!-- Tabs component -->
+<div role="tablist">
+    <button role="tab" aria-selected="true">Tab 1</button>
+</div>
+```
+
+### ♿ Accessibility Checklist
+
+```markdown
+☐ Semantic HTML used correctly
+☐ All interactive elements keyboard accessible
+☐ Focus indicators visible
+☐ Color contrast meets 4.5:1 (WCAG AA)
+☐ Form inputs have labels
+☐ Images have alt text
+☐ Modals trap focus
+☐ Screen reader tested
+☐ Keyboard-only navigation works
+☐ No keyboard traps
+☐ Error messages associated with inputs
+☐ Reduced motion respected
+☐ Touch targets 44×44px+
+```
+
+---
+
+## 📱 Responsive Design System
+
+### 📊 Breakpoints & Strategy
+
+**Mobile-First Approach:**
+```css
+/* Base: Mobile (320px+) */
+.element { padding: 1rem; font-size: 1rem; }
+
+/* Small devices (640px+) */
+@media (min-width: 640px) {
+    .element { padding: 1.5rem; }
+}
+
+/* Tablets (768px+) */
+@media (min-width: 768px) {
+    .element { padding: 2rem; }
+}
+
+/* Desktop (1024px+) */
+@media (min-width: 1024px) {
+    .element { padding: 2.5rem; max-width: 1200px; }
+}
+
+/* Large screens (1440px+) */
+@media (min-width: 1440px) {
+    .element { padding: 3rem; }
+}
+```
+
+### Grid Behavior
+
+```css
+/* Mobile: single column */
+.grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+}
+
+/* Tablet: 2 columns */
+@media (min-width: 640px) {
+    .grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1.5rem;
+    }
+}
+
+/* Desktop: auto-fill */
+@media (min-width: 1024px) {
+    .grid {
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 2rem;
+    }
+}
+```
+
+### 💧 Fluid Typography
+
+```css
+/* Scales between breakpoints */
+h1 { font-size: clamp(1.75rem, 5vw, 3rem); }
+h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
+body { font-size: clamp(0.95rem, 2vw, 1.1rem); }
+```
+
+### 🖱️ Touch-Friendly Design
+
+```css
+/* Minimum 44×44px touch targets */
+.btn {
+    min-width: 44px;
+    min-height: 44px;
+    padding: 0.75rem 1rem;
+}
+
+/* Remove 300ms click delay */
+a, button, input {
+    touch-action: manipulation;
+}
+```
+
+---
+
+## 📂 Folder Structure
+
+```
+web-app/
+├── 📄 index.html              # Homepage
+├── 📄 games.html              # Games category
+├── 📄 math.html               # Math category
+├── 📄 utilities.html          # Utilities category
+│
+├── 📁 css/
+│   └── 📄 styles.css          # All styles
+│
+├── 📁 js/
+│   ├── 📄 main.js             # Orchestration
+│   ├── 📄 playground.js       # Pyodide interface
+│   ├── 📄 playground-worker.js # Web Worker
+│   ├── 📄 projects.js         # Project registry
+│   ├── 📄 audio.js            # Sound effects
+│   ├── 📄 storage.js          # localStorage
+│   └── 📁 projects/           # 40+ project files
+│
+└── 📁 assets/
+    ├── favicon.svg
+    ├── logo.png
+    └── images/
+```
+
+---
+
+## 📊 JavaScript Modules
+
+### Module Relationships
+
+```mermaid
+graph LR
+    main["📜 main.js\n(orchestration)"]
+    playground["🐍 playground.js\n(Pyodide)"]
+    projects["📦 projects.js\n(registry)"]
+    storage["💾 storage.js"]
+    audio["🔊 audio.js"]
+    worker["⚙️ worker.js"]
+    
+    main -->|control| playground
+    main -->|render| projects
+    main -->|read/write| storage
+    main -->|play| audio
+    playground -->|spawn| worker
+```
+
+### Module Responsibilities
+
+| Module | Responsibility | Key Functions |
+|--------|-----------------|-----------------|
+| **main.js** | App orchestration, DOM events | toggleTheme(), openModal(), filterProjects() |
+| **playground.js** | Pyodide interface, Worker lifecycle | initPlayground(), runCode(), stopExecution() |
+| **playground-worker.js** | Python execution | loadPyodide(), execute code, capture output |
+| **projects.js** | Project registry | getProjectHTML(), initialize projects |
+| **storage.js** | localStorage wrapper | saveToStorage(), loadFromStorage() |
+| **audio.js** | Sound effects | play(), toggleMute() |
+
+---
+
+## 👨‍💻 Contributor Guide
+
+### 🚀 Quick Start
+
+```bash
+# Clone repo
+git clone https://github.com/steam-bell-92/python-mini-project.git
+cd python-mini-project/web-app
+
+# Serve locally
+python -m http.server 8000
+
+# Open browser: http://localhost:8000
+# Open DevTools: F12 or Ctrl+Shift+I
+```
+
+### 🔧 Development Workflow
+
+```bash
+# Create feature branch
+git checkout -b feature/your-feature-name
+
+# Make changes, test thoroughly
+
+# Test checklist:
+# - Keyboard navigation (Tab, Enter, Escape)
+# - Focus indicators visible
+# - Mobile responsive (320px, 768px, 1024px)
+# - Dark and light themes
+# - No console errors
+# - No a11y violations
+
+# Commit
+git add web-app/
+git commit -m "feat: your message"
+git push origin feature/your-feature-name
+```
+
+### ✅ PR Review Checklist
+
+```markdown
+## Code Quality
+☐ Semantic HTML used
+☐ CSS uses variables
+☐ No hardcoded colors
+☐ No console errors
+
+## Functionality
+☐ All features work
+☐ Modals open/close
+☐ Theme toggle works
+☐ Search functions
+
+## Accessibility
+☐ Keyboard nav works
+☐ Focus visible
+☐ Color contrast OK
+☐ Screen reader OK
+
+## Responsive
+☐ Mobile (320px)
+☐ Tablet (768px)
+☐ Desktop (1024px)
+☐ Touch targets 44×44px
+
+## Themes
+☐ Dark mode works
+☐ Light mode works
+☐ Transitions smooth
+```
+
+---
+
+## ✨ Adding New Projects
+
+### Step 1: Create Project File
+
+Create `web-app/js/projects/your-project.js`:
+
+```javascript
+function getYourProjectNameHTML() {
+    return `
+        <div class="project-content">
+            <h2>🎮 Your Project</h2>
+            <div id="gameBoard"></div>
+            <div class="controls">
+                <button class="btn btn-primary" id="startBtn">Start</button>
+                <button class="btn btn-secondary" id="resetBtn">Reset</button>
+            </div>
+            <p>Score: <span id="score">0</span></p>
+        </div>
+    `;
+}
+
+function initializeYourProjectName() {
+    const startBtn = document.getElementById('startBtn');
+    const resetBtn = document.getElementById('resetBtn');
+    let score = 0;
+    
+    startBtn.addEventListener('click', () => {
+        // Start game
+        score++;
+        document.getElementById('score').textContent = score;
+    });
+    
+    resetBtn.addEventListener('click', () => {
+        score = 0;
+        document.getElementById('score').textContent = score;
+    });
+}
+```
+
+### Step 2: Register in projects.js
+
+```javascript
+function getProjectHTML(projectName) {
+    const projects = {
+        'your-project': () => getYourProjectNameHTML(),
+        // ... others ...
+    };
+    return projects[projectName]?.() || '<h2>Coming Soon</h2>';
+}
+```
+
+### Step 3: Add to HTML
+
+```html
+<!-- games.html or math.html -->
+
+<article class="project-card" data-project="your-project">
+    <h3 class="card-title">🎮 Your Project</h3>
+    <p class="card-description">Brief description</p>
+    <div class="card-metadata">
+        <span class="badge badge-game">Game</span>
+        <span class="stat">⏱️ 5 min</span>
+    </div>
+    <button class="btn btn-primary">Play Now</button>
+</article>
+```
+
+### Step 4: Test
+
+```markdown
+✓ Modal opens
+✓ UI renders
+✓ Keyboard nav works
+✓ Mobile responsive
+✓ Themes work
+✓ No console errors
+```
+
+---
+
+## 🎨 Adding New Components
+
+### Component Template
+
+```html
+<div class="component" role="region" aria-label="Description">
+    <h3 class="component-title">Title</h3>
+    <p class="component-content">Content</p>
+</div>
+```
+
+```css
+.component {
+    background: var(--surface-color);
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    transition: var(--transition);
+}
+
+.component:hover {
+    border-color: var(--primary-color);
+    box-shadow: var(--shadow);
+}
+
+.component:focus-within {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+@media (max-width: 640px) {
+    .component { padding: 1rem; }
+}
+```
+
+### Component Requirements
+
+- ✅ Semantic HTML
+- ✅ CSS variables only
+- ✅ Keyboard accessible
+- ✅ Focus visible
+- ✅ Mobile responsive
+- ✅ Theme compatible
+- ✅ Screen reader friendly
+
+---
+
+## ⚙️ Storage & Persistence API
+
+```javascript
+// storage.js utilities
+
+function saveToStorage(key, value) {
+    try {
+        localStorage.setItem(key, JSON.stringify(value));
+        return true;
+    } catch (error) {
+        console.error('Storage error:', error);
+        return false;
+    }
+}
+
+function loadFromStorage(key, defaultValue = null) {
+    try {
+        const data = localStorage.getItem(key);
+        return data ? JSON.parse(data) : defaultValue;
+    } catch (error) {
+        return defaultValue;
+    }
+}
+
+function removeFromStorage(key) {
+    localStorage.removeItem(key);
+}
+```
+
+---
+
+## 🧪 Testing & Debugging
+
+### Manual Testing Checklist
+
+```markdown
+## Functionality
+✓ Buttons work
+✓ Forms submit
+✓ Modals open/close
+✓ Search filters
+✓ Theme toggles
+
+## Keyboard Navigation
+✓ Tab navigation works
+✓ Shift+Tab works
+✓ Enter activates
+✓ Escape closes
+✓ / focuses search
+
+## Responsive
+✓ Mobile (320px)
+✓ Tablet (768px)
+✓ Desktop (1024px)
+✓ No horizontal scroll
+✓ Touch targets adequate
+
+## Accessibility
+✓ Focus visible
+✓ Color contrast OK
+✓ Form labels present
+✓ ARIA attributes OK
+✓ Screen reader OK
+
+## Cross-Browser
+✓ Chrome
+✓ Firefox
+✓ Safari
+✓ Edge
+✓ Mobile browsers
+```
+
+### DevTools Tips
+
+```
+F12 / Ctrl+Shift+I → Open DevTools
+  • Elements → HTML structure
+  • Console → JavaScript errors
+  • Sources → Set breakpoints
+  • Network → Resource loading
+  • Performance → Animation profile
+```
+
+---
+
+## 📈 Performance Optimization
+
+| Technique | Benefit |
+|-----------|---------|
+| **Debounce** | Reduce function calls (search 300ms) |
+| **Cache DOM** | Fewer queries |
+| **Event delegation** | Fewer listeners |
+| **Lazy load** | Faster initial load |
+| **CSS animations** | 60fps performance |
+| **Web Workers** | Non-blocking UI |
+
+---
+
+## 🔗 CSS Variables Reference
+
+```css
+:root {
+    /* Brand Colors */
+    --primary-color: #22c55e;
+    --secondary-color: #06b6d4;
+    
+    /* Semantic */
+    --success-color: #10b981;
+    --danger-color: #ef4444;
+    --warning-color: #f59e0b;
+    
+    /* Backgrounds */
+    --bg-color: #081120;
+    --surface-color: #111827;
+    --panel-color: #0f172a;
+    
+    /* Text */
+    --text-color: #e5e7eb;
+    --text-secondary: #94a3b8;
+    
+    /* Borders */
+    --border-color: #1f2937;
+    
+    /* Effects */
+    --shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
+    
+    /* Timing */
+    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+```
+
+---
+
+## 🚀 Performance Stats
+
+| Operation | Time |
+|-----------|------|
+| First Pyodide load | 3–5s |
+| Cached Pyodide | 100–300ms |
+| Modal animation | 300ms |
+| Theme transition | 300ms |
+| Search debounce | 300ms |
+
+---
+
+## � Form Components & Validation
+
+### Input Field
+
+```html
+<div class="form-group">
+    <label for="username" class="form-label">Username</label>
+    <input type="text" id="username" 
+           class="form-input"
+           placeholder="Enter username"
+           aria-describedby="usernameHelp"
+           required />
+    <span id="usernameHelp" class="form-help">
+        2-20 characters, letters and numbers only
+    </span>
+    <span id="usernameError" class="form-error" role="alert" hidden></span>
+</div>
+```
+
+```css
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.form-label {
+    font-weight: 600;
+    color: var(--text-color);
+    font-size: 0.95rem;
+}
+
+.form-input {
+    padding: 0.75rem;
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    background: var(--panel-color);
+    color: var(--text-color);
+    font: inherit;
+    transition: var(--transition);
+}
+
+.form-input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px var(--primary-color);
+    opacity: 0.2;
+}
+
+.form-input:invalid:not(:placeholder-shown) {
+    border-color: var(--danger-color);
+}
+
+.form-help {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+}
+
+.form-error {
+    font-size: 0.85rem;
+    color: var(--danger-color);
+    animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+```
+
+### Form Validation (JavaScript)
+
+```javascript
+function validateForm() {
+    const username = document.getElementById('username');
+    const usernameError = document.getElementById('usernameError');
+    const isValid = /^[a-zA-Z0-9]{2,20}$/.test(username.value);
+    
+    if (!isValid) {
+        usernameError.textContent = 'Username invalid';
+        usernameError.removeAttribute('hidden');
+        username.setAttribute('aria-invalid', 'true');
+        username.setAttribute('aria-describedby', 'usernameError');
+    } else {
+        usernameError.setAttribute('hidden', '');
+        username.removeAttribute('aria-invalid');
+    }
+    
+    return isValid;
+}
+
+document.getElementById('username').addEventListener('blur', validateForm);
+```
+
+---
+
+## 📊 Data Visualization & Tables
+
+### Responsive Table
+
+```html
+<div class="table-wrapper">
+    <table class="data-table" role="table">
+        <thead>
+            <tr>
+                <th scope="col">Project</th>
+                <th scope="col">Category</th>
+                <th scope="col">Difficulty</th>
+                <th scope="col">Time</th>
+                <th scope="col">Players</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td data-label="Project">🎮 Snake Game</td>
+                <td data-label="Category">Game</td>
+                <td data-label="Difficulty">Easy</td>
+                <td data-label="Time">10 min</td>
+                <td data-label="Players">1</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+```
+
+```css
+.table-wrapper {
+    overflow-x: auto;
+    border-radius: 0.5rem;
+    border: 1px solid var(--border-color);
+}
+
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.95rem;
+}
+
+.data-table thead {
+    background: var(--surface-color);
+}
+
+.data-table th {
+    padding: 1rem;
+    text-align: left;
+    font-weight: 600;
+    color: var(--text-color);
+    border-bottom: 2px solid var(--border-color);
+}
+
+.data-table td {
+    padding: 1rem;
+    border-bottom: 1px solid var(--border-color);
+    color: var(--text-color);
+}
+
+.data-table tr:hover {
+    background: var(--panel-color);
+}
+
+/* Mobile: Show as cards */
+@media (max-width: 768px) {
+    .data-table thead { display: none; }
+    
+    .data-table tr {
+        display: block;
+        margin-bottom: 1.5rem;
+        border: 1px solid var(--border-color);
+        border-radius: 0.5rem;
+        padding: 1rem;
+    }
+    
+    .data-table td {
+        display: block;
+        padding: 0.5rem 0;
+        border: none;
+    }
+    
+    .data-table td::before {
+        content: attr(data-label);
+        font-weight: 600;
+        display: block;
+        margin-bottom: 0.25rem;
+        color: var(--text-secondary);
+    }
+}
+```
+
+---
+
+## 🔔 Notification & Toast System
+
+```html
+<div id="notificationContainer" class="notification-container" role="region" aria-live="polite">
+    <!-- Toasts injected here -->
+</div>
+```
+
+```javascript
+const NotificationSystem = {
+    show(message, type = 'info', duration = 3000) {
+        const container = document.getElementById('notificationContainer');
+        const toast = document.createElement('div');
+        toast.className = `notification notification-${type} notification-enter`;
+        toast.setAttribute('role', 'alert');
+        toast.setAttribute('aria-atomic', 'true');
+        
+        const icon = {
+            success: '✓',
+            error: '✕',
+            warning: '!',
+            info: 'ℹ'
+        }[type] || 'ℹ';
+        
+        toast.innerHTML = `
+            <span class="notification-icon">${icon}</span>
+            <span class="notification-message">${message}</span>
+            <button class="notification-close" aria-label="Close">×</button>
+        `;
+        
+        container.appendChild(toast);
+        
+        toast.querySelector('.notification-close').addEventListener('click', () => {
+            toast.classList.replace('notification-enter', 'notification-exit');
+            setTimeout(() => toast.remove(), 300);
+        });
+        
+        if (duration > 0) {
+            setTimeout(() => {
+                toast.classList.replace('notification-enter', 'notification-exit');
+                setTimeout(() => toast.remove(), 300);
+            }, duration);
+        }
+        
+        return toast;
+    },
+    
+    success: (msg, duration) => NotificationSystem.show(msg, 'success', duration),
+    error: (msg, duration) => NotificationSystem.show(msg, 'error', duration),
+    warning: (msg, duration) => NotificationSystem.show(msg, 'warning', duration),
+    info: (msg, duration) => NotificationSystem.show(msg, 'info', duration),
+};
+
+// Usage
+NotificationSystem.success('Changes saved!');
+NotificationSystem.error('An error occurred');
+```
+
+```css
+.notification-container {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 5000;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.notification {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    background: var(--surface-color);
+    border-left: 4px solid;
+    box-shadow: var(--shadow);
+    font-weight: 500;
+    animation: slideInRight 0.3s ease;
+}
+
+.notification-success { border-left-color: var(--success-color); }
+.notification-error { border-left-color: var(--danger-color); }
+.notification-warning { border-left-color: var(--warning-color); }
+.notification-info { border-left-color: var(--secondary-color); }
+
+.notification-enter {
+    animation: slideInRight 0.3s ease;
+}
+
+.notification-exit {
+    animation: slideOutRight 0.3s ease;
+}
+
+@keyframes slideInRight {
+    from {
+        transform: translateX(400px);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOutRight {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateX(400px);
+        opacity: 0;
+    }
+}
+```
+
+---
+
+## 🎯 Event Handling Patterns
+
+### Debounce Utility
+
+```javascript
+function debounce(fn, delay = 300) {
+    let timeoutId;
+    return function(...args) {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+            fn.apply(this, args);
+        }, delay);
+    };
+}
+
+// Usage: Debounced search
+const handleSearchChange = debounce((query) => {
+    filterProjects(query);
+}, 300);
+
+document.getElementById('search').addEventListener('input', (e) => {
+    handleSearchChange(e.target.value);
+});
+```
+
+### Throttle Utility
+
+```javascript
+function throttle(fn, delay = 300) {
+    let lastTime = 0;
+    return function(...args) {
+        const now = Date.now();
+        if (now - lastTime >= delay) {
+            fn.apply(this, args);
+            lastTime = now;
+        }
+    };
+}
+
+// Usage: Throttled scroll handler
+const handleScroll = throttle(() => {
+    updateScrollPosition();
+}, 300);
+
+window.addEventListener('scroll', handleScroll);
+```
+
+### Event Delegation
+
+```javascript
+// Single listener for all project cards
+document.addEventListener('click', (e) => {
+    const card = e.target.closest('.project-card');
+    if (card) {
+        const projectName = card.dataset.project;
+        openProjectModal(projectName);
+    }
+});
+
+// Advantages:
+// - Single listener instead of multiple
+// - Works for dynamically added elements
+// - Better performance
+// - Easier to manage
+```
+
+---
+
+## 💾 Advanced Storage Patterns
+
+### Structured Data Storage
+
+```javascript
+class ProjectStorage {
+    static saveProgress(projectName, progress) {
+        const data = {
+            project: projectName,
+            progress: progress,
+            timestamp: Date.now(),
+            version: 1
+        };
+        saveToStorage(`progress_${projectName}`, data);
+    }
+    
+    static getProgress(projectName) {
+        return loadFromStorage(`progress_${projectName}`, {
+            progress: 0,
+            timestamp: null
+        });
+    }
+    
+    static getAllProgress() {
+        const keys = Object.keys(localStorage);
+        return keys
+            .filter(k => k.startsWith('progress_'))
+            .map(k => loadFromStorage(k));
+    }
+    
+    static clearProgress(projectName) {
+        removeFromStorage(`progress_${projectName}`);
+    }
+}
+
+// Usage
+ProjectStorage.saveProgress('snake-game', 150);
+const progress = ProjectStorage.getProgress('snake-game');
+const allProgress = ProjectStorage.getAllProgress();
+```
+
+### Cache Pattern
+
+```javascript
+class CacheManager {
+    constructor(maxAge = 3600000) { // 1 hour
+        this.cache = new Map();
+        this.maxAge = maxAge;
+    }
+    
+    set(key, value) {
+        this.cache.set(key, {
+            value,
+            timestamp: Date.now()
+        });
+    }
+    
+    get(key) {
+        const entry = this.cache.get(key);
+        if (!entry) return null;
+        
+        const age = Date.now() - entry.timestamp;
+        if (age > this.maxAge) {
+            this.cache.delete(key);
+            return null;
+        }
+        
+        return entry.value;
+    }
+    
+    clear() {
+        this.cache.clear();
+    }
+}
+
+const cache = new CacheManager();
+cache.set('projects', projectList);
+const cached = cache.get('projects');
+```
+
+---
+
+## 🎮 Game Loop Pattern
+
+```javascript
+class GameManager {
+    constructor() {
+        this.isRunning = false;
+        this.score = 0;
+        this.level = 1;
+        this.fps = 60;
+        this.frameTime = 1000 / this.fps;
+        this.lastTime = 0;
+    }
+    
+    start() {
+        this.isRunning = true;
+        this.score = 0;
+        this.level = 1;
+        this.gameLoop(0);
+    }
+    
+    gameLoop(currentTime) {
+        if (!this.isRunning) return;
+        
+        const deltaTime = currentTime - this.lastTime;
+        
+        if (deltaTime >= this.frameTime) {
+            this.update(deltaTime / 1000);
+            this.render();
+            this.lastTime = currentTime;
+        }
+        
+        requestAnimationFrame((t) => this.gameLoop(t));
+    }
+    
+    update(deltaTime) {
+        // Game logic
+    }
+    
+    render() {
+        // Render UI
+    }
+    
+    stop() {
+        this.isRunning = false;
+    }
+    
+    addScore(points) {
+        this.score += points;
+        document.getElementById('score').textContent = this.score;
+        if (this.score % 100 === 0) {
+            this.levelUp();
+        }
+    }
+    
+    levelUp() {
+        this.level++;
+        NotificationSystem.success(`Level ${this.level}!`);
+    }
+}
+
+const game = new GameManager();
+```
+
+---
+
+## 📡 Message Protocol (Web Worker)
+
+```javascript
+// main.js
+function runPythonCode(code) {
+    const worker = new Worker('js/playground-worker.js');
+    
+    worker.postMessage({
+        type: 'run',
+        code: code,
+        id: Date.now()
+    });
+    
+    worker.onmessage = (e) => {
+        const { type, data } = e.data;
+        
+        switch (type) {
+            case 'ready':
+                console.log('Pyodide ready');
+                break;
+            case 'done':
+                displayOutput(data);
+                break;
+            case 'error':
+                displayError(data);
+                break;
+            case 'stderr':
+                addToOutput(data, 'error');
+                break;
+            case 'stdout':
+                addToOutput(data, 'output');
+                break;
+        }
+    };
+}
+
+// playground-worker.js
+let pyodide;
+
+self.onmessage = async (e) => {
+    const { type, code, id } = e.data;
+    
+    if (type === 'run') {
+        try {
+            if (!pyodide) {
+                pyodide = await loadPyodide();
+                self.postMessage({ type: 'ready' });
+            }
+            
+            const output = await pyodide.runPythonAsync(code);
+            self.postMessage({
+                type: 'done',
+                data: output,
+                id: id
+            });
+        } catch (error) {
+            self.postMessage({
+                type: 'error',
+                data: error.message,
+                id: id
+            });
+        }
+    }
+};
+```
+
+---
+
+## 🎬 Animation Orchestration
+
+```javascript
+class AnimationOrchestrator {
+    static async fadeInSequence(elements, delay = 100) {
+        for (let i = 0; i < elements.length; i++) {
+            await new Promise(resolve => {
+                setTimeout(() => {
+                    elements[i].classList.add('fade-in');
+                    resolve();
+                }, i * delay);
+            });
+        }
+    }
+    
+    static staggerAnimation(elements, animationClass = 'slide-up', delay = 50) {
+        elements.forEach((el, i) => {
+            setTimeout(() => {
+                el.classList.add(animationClass);
+            }, i * delay);
+        });
+    }
+    
+    static parallaxScroll() {
+        window.addEventListener('scroll', () => {
+            const scrolled = window.scrollY;
+            document.querySelectorAll('[data-parallax]').forEach(el => {
+                const rate = el.dataset.parallax || 0.5;
+                el.style.transform = `translateY(${scrolled * rate}px)`;
+            });
+        });
+    }
+}
+
+// Usage
+const cards = document.querySelectorAll('.project-card');
+AnimationOrchestrator.staggerAnimation(cards, 'fade-in', 100);
+```
+
+---
+
+## 🐛 Debugging Tips
+
+### Console Helper Functions
+
+```javascript
+// Log with styling
+function logInfo(title, data) {
+    console.log(`%c${title}`, 'color: #22c55e; font-weight: bold;', data);
+}
+
+function logError(title, error) {
+    console.error(`%c${title}`, 'color: #ef4444; font-weight: bold;', error);
+}
+
+// Performance timing
+function timeOperation(name, fn) {
+    const start = performance.now();
+    const result = fn();
+    const duration = performance.now() - start;
+    logInfo(`${name} completed in ${duration.toFixed(2)}ms`, result);
+    return result;
+}
+
+// Usage
+timeOperation('Project List Load', () => {
+    return loadProjectList();
+});
+```
+
+### Common Debugging Patterns
+
+```javascript
+// Check if element exists
+if (!document.getElementById('modalBody')) {
+    logError('Fatal', 'Modal body not found');
+}
+
+// Verify localStorage
+console.log('Theme:', localStorage.getItem('theme'));
+console.log('Storage size:', JSON.stringify(localStorage).length / 1024 + ' KB');
+
+// Monitor events
+document.addEventListener('click', (e) => {
+    if (e.target.matches('button')) {
+        logInfo('Button clicked', e.target.textContent);
+    }
+}, true);
+```
+
+---
+
+## 🌐 Deployment Checklist
+
+```markdown
+## Pre-Deployment
+☐ All tests pass
+☐ No console errors
+☐ No console warnings
+☐ No broken links
+☐ No dead code
+☐ CSS minified
+☐ JS minified (optional)
+☐ Images optimized
+
+## Accessibility
+☐ Keyboard nav works
+☐ Focus visible
+☐ Color contrast OK
+☐ Alt text present
+☐ Form labels OK
+☐ ARIA attributes OK
+
+## Performance
+☐ Lighthouse score > 90
+☐ Load time < 2s
+☐ Pyodide cache working
+☐ No layout shifts
+☐ Animations 60fps
+
+## Cross-Browser
+☐ Chrome OK
+☐ Firefox OK
+☐ Safari OK
+☐ Edge OK
+☐ Mobile browsers OK
+
+## Security
+☐ No hardcoded secrets
+☐ XSS protection
+☐ CSRF tokens (if needed)
+☐ Content Security Policy OK
+```
+
+---
+
+## 📚 Common Tasks Reference
+
+### Add New Project Category
+
+```html
+<!-- Create new HTML file, e.g., puzzles.html -->
+<div class="page-header">
+    <h1>🧩 Puzzle Games</h1>
+    <p class="page-subtitle">Challenge your mind</p>
+</div>
+
+<div class="projects-grid" id="puzzlesGrid">
+    <!-- Cards will be injected here -->
+</div>
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const puzzles = projects.filter(p => p.category === 'puzzle');
+        const grid = document.getElementById('puzzlesGrid');
+        puzzles.forEach(project => {
+            grid.innerHTML += renderProjectCard(project);
+        });
+    });
+</script>
+```
+
+### Implement Custom Theme
+
+```css
+/* custom-theme.css */
+html[data-theme="custom"] {
+    --primary-color: #a855f7;
+    --secondary-color: #ec4899;
+    --bg-color: #1a0033;
+    --surface-color: #2d1b4e;
+    --text-color: #f3e8ff;
+}
+```
+
+```javascript
+function applyCustomTheme() {
+    document.documentElement.setAttribute('data-theme', 'custom');
+    localStorage.setItem('theme', 'custom');
+}
+```
+
+---
+
+---
+
+## 🏗️ Advanced Architecture Patterns
+
+### State Management Pattern
+
+```javascript
+class StateManager {
+    constructor(initialState = {}) {
+        this.state = initialState;
+        this.listeners = [];
+        this.history = [JSON.parse(JSON.stringify(initialState))];
+        this.historyIndex = 0;
+    }
+    
+    subscribe(listener) {
+        this.listeners.push(listener);
+        return () => {
+            this.listeners = this.listeners.filter(l => l !== listener);
+        };
+    }
+    
+    setState(updates) {
+        this.state = { ...this.state, ...updates };
+        this.history = this.history.slice(0, this.historyIndex + 1);
+        this.history.push(JSON.parse(JSON.stringify(this.state)));
+        this.historyIndex++;
+        
+        this.listeners.forEach(listener => {
+            listener(this.state, updates);
+        });
+    }
+    
+    getState() {
+        return { ...this.state };
+    }
+    
+    undo() {
+        if (this.historyIndex > 0) {
+            this.historyIndex--;
+            this.state = JSON.parse(JSON.stringify(this.history[this.historyIndex]));
+            this.notifyListeners();
+        }
+    }
+    
+    redo() {
+        if (this.historyIndex < this.history.length - 1) {
+            this.historyIndex++;
+            this.state = JSON.parse(JSON.stringify(this.history[this.historyIndex]));
+            this.notifyListeners();
+        }
+    }
+    
+    notifyListeners() {
+        this.listeners.forEach(listener => {
+            listener(this.state, {});
+        });
+    }
+}
+
+// Usage
+const appState = new StateManager({
+    theme: 'dark',
+    score: 0,
+    currentProject: null
+});
+
+const unsubscribe = appState.subscribe((state, updates) => {
+    console.log('State updated:', updates);
+    updateUI(state);
+});
+
+appState.setState({ score: 100 });
+appState.undo();
+appState.redo();
+```
+
+### Component Registry Pattern
+
+```javascript
+class ComponentRegistry {
+    static components = new Map();
+    
+    static register(name, component) {
+        if (this.components.has(name)) {
+            console.warn(`Component "${name}" already registered`);
+        }
+        this.components.set(name, component);
+    }
+    
+    static get(name) {
+        const component = this.components.get(name);
+        if (!component) {
+            console.error(`Component "${name}" not found`);
+        }
+        return component;
+    }
+    
+    static render(name, props = {}) {
+        const component = this.get(name);
+        if (component) {
+            return component.render(props);
+        }
+        return '<div class="error">Component not found</div>';
+    }
+    
+    static exists(name) {
+        return this.components.has(name);
+    }
+    
+    static list() {
+        return Array.from(this.components.keys());
+    }
+}
+
+// Register components
+ComponentRegistry.register('button', {
+    render: (props) => `
+        <button class="btn btn-${props.variant || 'primary'}">
+            ${props.text}
+        </button>
+    `
+});
+
+ComponentRegistry.register('card', {
+    render: (props) => `
+        <div class="card">
+            <h3>${props.title}</h3>
+            <p>${props.description}</p>
+        </div>
+    `
+});
+
+// Usage
+const cardHTML = ComponentRegistry.render('card', {
+    title: 'Welcome',
+    description: 'This is a card'
+});
+```
+
+---
+
+## 🔌 API Integration Pattern
+
+```javascript
+class APIClient {
+    constructor(baseURL = '/api') {
+        this.baseURL = baseURL;
+        this.defaultHeaders = {
+            'Content-Type': 'application/json'
+        };
+        this.timeout = 5000;
+    }
+    
+    async request(endpoint, options = {}) {
+        const url = `${this.baseURL}${endpoint}`;
+        const config = {
+            method: options.method || 'GET',
+            headers: { ...this.defaultHeaders, ...options.headers },
+            timeout: options.timeout || this.timeout
+        };
+        
+        if (options.body) {
+            config.body = JSON.stringify(options.body);
+        }
+        
+        try {
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), config.timeout);
+            
+            const response = await fetch(url, {
+                ...config,
+                signal: controller.signal
+            });
+            
+            clearTimeout(timeoutId);
+            
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            
+            return await response.json();
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+    
+    get(endpoint, options) {
+        return this.request(endpoint, { ...options, method: 'GET' });
+    }
+    
+    post(endpoint, body, options) {
+        return this.request(endpoint, { ...options, method: 'POST', body });
+    }
+    
+    put(endpoint, body, options) {
+        return this.request(endpoint, { ...options, method: 'PUT', body });
+    }
+    
+    delete(endpoint, options) {
+        return this.request(endpoint, { ...options, method: 'DELETE' });
+    }
+}
+
+const api = new APIClient();
+
+// Usage
+try {
+    const projects = await api.get('/projects');
+    console.log('Projects:', projects);
+} catch (error) {
+    NotificationSystem.error('Failed to load projects');
+}
+```
+
+---
+
+## 🧪 Testing Patterns
+
+### Unit Test Example
+
+```javascript
+// test-utils.js
+class TestRunner {
+    static tests = [];
+    
+    static test(name, fn) {
+        this.tests.push({ name, fn });
+    }
+    
+    static async run() {
+        let passed = 0;
+        let failed = 0;
+        
+        for (const test of this.tests) {
+            try {
+                await test.fn();
+                console.log(`✓ ${test.name}`);
+                passed++;
+            } catch (error) {
+                console.error(`✗ ${test.name}: ${error.message}`);
+                failed++;
+            }
+        }
+        
+        console.log(`\n${passed} passed, ${failed} failed`);
+        return { passed, failed };
+    }
+}
+
+function assertEqual(actual, expected, message = '') {
+    if (actual !== expected) {
+        throw new Error(`${message}\nExpected: ${expected}\nActual: ${actual}`);
+    }
+}
+
+// Tests
+TestRunner.test('debounce function', () => {
+    let callCount = 0;
+    const fn = debounce(() => callCount++, 100);
+    
+    fn();
+    fn();
+    fn();
+    
+    return new Promise(resolve => {
+        setTimeout(() => {
+            assertEqual(callCount, 1, 'debounce should call only once');
+            resolve();
+        }, 150);
+    });
+});
+
+TestRunner.test('StateManager', () => {
+    const state = new StateManager({ count: 0 });
+    state.setState({ count: 5 });
+    assertEqual(state.getState().count, 5, 'setState should update');
+});
+
+// Run all tests
+TestRunner.run();
+```
+
+---
+
+## 📋 Error Handling Strategy
+
+```javascript
+class ErrorHandler {
+    static handlers = new Map();
+    
+    static register(errorType, handler) {
+        this.handlers.set(errorType, handler);
+    }
+    
+    static handle(error) {
+        const errorType = error.name || 'Error';
+        const handler = this.handlers.get(errorType) || this.defaultHandler;
+        return handler(error);
+    }
+    
+    static defaultHandler(error) {
+        console.error('Unhandled error:', error);
+        NotificationSystem.error('An unexpected error occurred');
+    }
+}
+
+// Register specific error handlers
+ErrorHandler.register('NetworkError', (error) => {
+    console.error('Network error:', error);
+    NotificationSystem.error('Network connection failed');
+});
+
+ErrorHandler.register('ValidationError', (error) => {
+    console.error('Validation error:', error);
+    NotificationSystem.warning('Please check your input');
+});
+
+ErrorHandler.register('TimeoutError', (error) => {
+    console.error('Request timeout:', error);
+    NotificationSystem.error('Request took too long. Please try again');
+});
+
+// Global error handler
+window.addEventListener('error', (e) => {
+    ErrorHandler.handle(e.error);
+});
+
+window.addEventListener('unhandledrejection', (e) => {
+    ErrorHandler.handle(e.reason);
+});
+```
+
+---
+
+## 📊 Analytics & Logging
+
+```javascript
+class Analytics {
+    static events = [];
+    
+    static track(event, data = {}) {
+        const entry = {
+            event,
+            data,
+            timestamp: Date.now(),
+            url: window.location.href,
+            userAgent: navigator.userAgent
+        };
+        
+        this.events.push(entry);
+        this.sendEvent(entry);
+    }
+    
+    static sendEvent(entry) {
+        // Send to analytics service
+        // fetch('/api/analytics', { method: 'POST', body: JSON.stringify(entry) })
+        console.log('Analytics event:', entry);
+    }
+    
+    static getEvents() {
+        return [...this.events];
+    }
+    
+    static clearEvents() {
+        this.events = [];
+    }
+}
+
+// Track user interactions
+document.addEventListener('click', (e) => {
+    if (e.target.matches('button')) {
+        Analytics.track('button_click', {
+            text: e.target.textContent,
+            id: e.target.id
+        });
+    }
+});
+
+// Track project opens
+function openProjectModal(projectName) {
+    Analytics.track('project_opened', { project: projectName });
+    // ... rest of function
+}
+
+// Track code execution
+function runCode(code) {
+    Analytics.track('code_executed', { codeLength: code.length });
+    // ... rest of function
+}
+```
+
+---
+
+## 🎨 Advanced Styling Techniques
+
+### CSS Grid Masonry
+
+```css
+.masonry-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 2rem;
+    grid-auto-rows: 300px;
+}
+
+.masonry-item {
+    grid-row: span 1;
+    background: var(--surface-color);
+    border-radius: 0.5rem;
+}
+
+.masonry-item:nth-child(4n + 1) {
+    grid-row: span 2;
+}
+```
+
+### CSS Gradient Animations
+
+```css
+@keyframes gradientShift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+.gradient-bg {
+    background: linear-gradient(
+        -45deg,
+        var(--primary-color),
+        var(--secondary-color),
+        var(--warning-color),
+        var(--success-color)
+    );
+    background-size: 400% 400%;
+    animation: gradientShift 8s ease infinite;
+}
+```
+
+### CSS Backdrop Filter
+
+```css
+.blur-backdrop {
+    backdrop-filter: blur(10px);
+    background: rgba(0, 0, 0, 0.3);
+}
+
+.frosted-glass {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0.75rem;
+}
+```
+
+---
+
+## 🔄 Routing Pattern
+
+```javascript
+class Router {
+    constructor() {
+        this.routes = new Map();
+        this.currentRoute = null;
+        this.history = [];
+    }
+    
+    register(path, handler) {
+        this.routes.set(path, handler);
+    }
+    
+    async navigate(path) {
+        const handler = this.routes.get(path);
+        if (!handler) {
+            console.error(`No route for: ${path}`);
+            return false;
+        }
+        
+        this.history.push(this.currentRoute);
+        this.currentRoute = path;
+        
+        try {
+            const content = await handler();
+            this.render(content);
+            return true;
+        } catch (error) {
+            console.error('Navigation error:', error);
+            return false;
+        }
+    }
+    
+    render(content) {
+        const app = document.getElementById('app');
+        if (app) {
+            app.innerHTML = content;
+        }
+    }
+    
+    back() {
+        if (this.history.length > 0) {
+            const path = this.history.pop();
+            this.navigate(path);
+        }
+    }
+}
+
+// Usage
+const router = new Router();
+
+router.register('/', async () => {
+    return '<h1>Home</h1>';
+});
+
+router.register('/projects', async () => {
+    const projects = await api.get('/projects');
+    return `<h1>Projects</h1><div>${projects.map(p => p.name).join(', ')}</div>`;
+});
+
+router.navigate('/');
+```
+
+---
+
+## 🎯 Focus Management
+
+```javascript
+class FocusManager {
+    static trap(element) {
+        const focusableElements = element.querySelectorAll(
+            'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])'
+        );
+        
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        
+        element.addEventListener('keydown', (e) => {
+            if (e.key !== 'Tab') return;
+            
+            if (e.shiftKey) {
+                if (document.activeElement === firstElement) {
+                    e.preventDefault();
+                    lastElement.focus();
+                }
+            } else {
+                if (document.activeElement === lastElement) {
+                    e.preventDefault();
+                    firstElement.focus();
+                }
+            }
+        });
+    }
+    
+    static restore(element) {
+        element.focus();
+    }
+    
+    static findFocusableElement(element) {
+        const focusable = element.querySelector('a, button, input, textarea, select');
+        return focusable;
+    }
+}
+
+// Usage in modal
+FocusManager.trap(modal);
+```
+
+---
+
+## 🌍 Internationalization (i18n)
+
+```javascript
+class I18n {
+    static translations = {};
+    static currentLocale = 'en';
+    
+    static register(locale, messages) {
+        this.translations[locale] = messages;
+    }
+    
+    static setLocale(locale) {
+        if (this.translations[locale]) {
+            this.currentLocale = locale;
+            localStorage.setItem('locale', locale);
+            this.updateDOM();
+        }
+    }
+    
+    static t(key) {
+        const messages = this.translations[this.currentLocale] || {};
+        return messages[key] || key;
+    }
+    
+    static updateDOM() {
+        document.querySelectorAll('[data-i18n]').forEach(el => {
+            const key = el.dataset.i18n;
+            el.textContent = this.t(key);
+        });
+    }
+}
+
+// Register translations
+I18n.register('en', {
+    'project_title': 'Python Mini Projects',
+    'play_button': 'Play Now',
+    'projects_label': 'Projects'
+});
+
+I18n.register('es', {
+    'project_title': 'Mini Proyectos Python',
+    'play_button': 'Jugar Ahora',
+    'projects_label': 'Proyectos'
+});
+
+// Usage in HTML
+document.querySelector('h1').setAttribute('data-i18n', 'project_title');
+I18n.setLocale('en');
+```
+
+---
+
+## 📱 Touch & Gesture Handling
+
+```javascript
+class GestureHandler {
+    static handleSwipe(element, callbacks) {
+        let startX = 0;
+        let startY = 0;
+        
+        element.addEventListener('touchstart', (e) => {
+            startX = e.touches[0].clientX;
+            startY = e.touches[0].clientY;
+        });
+        
+        element.addEventListener('touchend', (e) => {
+            const endX = e.changedTouches[0].clientX;
+            const endY = e.changedTouches[0].clientY;
+            
+            const deltaX = endX - startX;
+            const deltaY = endY - startY;
+            
+            if (Math.abs(deltaX) > Math.abs(deltaY)) {
+                if (deltaX > 50 && callbacks.onSwipeRight) {
+                    callbacks.onSwipeRight();
+                } else if (deltaX < -50 && callbacks.onSwipeLeft) {
+                    callbacks.onSwipeLeft();
+                }
+            }
+        });
+    }
+    
+    static handlePinch(element, callback) {
+        let lastDistance = 0;
+        
+        element.addEventListener('touchmove', (e) => {
+            if (e.touches.length !== 2) return;
+            
+            const dx = e.touches[0].clientX - e.touches[1].clientX;
+            const dy = e.touches[0].clientY - e.touches[1].clientY;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            
+            if (lastDistance > 0) {
+                const scale = distance / lastDistance;
+                callback(scale);
+            }
+            
+            lastDistance = distance;
+        });
+    }
+}
+```
+
+---
+
+## 📐 Utility Functions Library
+
+```javascript
+// String utilities
+const StringUtils = {
+    capitalize: (str) => str.charAt(0).toUpperCase() + str.slice(1),
+    slug: (str) => str.toLowerCase().replace(/\s+/g, '-'),
+    truncate: (str, len = 50) => str.length > len ? str.slice(0, len) + '...' : str,
+    escape: (str) => str.replace(/[&<>"']/g, (m) => ({
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#39;'
+    }[m]))
+};
+
+// Array utilities
+const ArrayUtils = {
+    shuffle: (arr) => [...arr].sort(() => Math.random() - 0.5),
+    unique: (arr) => [...new Set(arr)],
+    chunk: (arr, size) => Array.from({length: Math.ceil(arr.length / size)}, (_, i) => arr.slice(i * size, i * size + size)),
+    flatten: (arr) => arr.flat(Infinity),
+    groupBy: (arr, key) => arr.reduce((acc, item) => {
+        const group = item[key];
+        if (!acc[group]) acc[group] = [];
+        acc[group].push(item);
+        return acc;
+    }, {})
+};
+
+// Math utilities
+const MathUtils = {
+    random: (min, max) => Math.floor(Math.random() * (max - min + 1)) + min,
+    clamp: (val, min, max) => Math.min(Math.max(val, min), max),
+    lerp: (a, b, t) => a + (b - a) * t,
+    distance: (x1, y1, x2, y2) => Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
+};
+```
+
+---
+
+## 🔐 Security Best Practices
+
+```javascript
+// Sanitize user input
+function sanitizeHTML(html) {
+    const temp = document.createElement('div');
+    temp.textContent = html;
+    return temp.innerHTML;
+}
+
+// Validate email
+function isValidEmail(email) {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+// Validate URL
+function isValidURL(url) {
+    try {
+        new URL(url);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+// Prevent XSS
+function createElement(tag, attrs = {}, content = '') {
+    const el = document.createElement(tag);
+    Object.entries(attrs).forEach(([key, value]) => {
+        if (key.startsWith('on')) {
+            console.warn('Event attributes not allowed');
+            return;
+        }
+        el.setAttribute(key, value);
+    });
+    el.textContent = content;
+    return el;
+}
+```
+
+---
+
+## 🚀 Performance Stats
+
+| Operation | Time |
+|-----------|------|
+| First Pyodide load | 3–5s |
+| Cached Pyodide | 100–300ms |
+| Modal animation | 300ms |
+| Theme transition | 300ms |
+| Search debounce | 300ms |
+| Page rendering | < 100ms |
+| Keyboard response | < 16ms |
+
+---
+
+## � Complete Folder Structure Walkthrough
+
+```
+web-app/
+│
+├── 📄 index.html (Homepage)
+│   ├── Hero section with CTA buttons
+│   ├── Featured projects carousel
+│   ├── Category navigation
+│   ├── Search bar
+│   └── Theme toggle button
+│
+├── 📄 games.html (Games Category)
+│   ├── Page header (🎮 Games)
+│   ├── Filter by difficulty
+│   ├── Sort options (newest, popular)
+│   ├── Projects grid (dynamic)
+│   └── Pagination controls
+│
+├── 📄 math.html (Math Category)
+│   ├── Page header (🔢 Math)
+│   ├── Topic filter
+│   ├── Projects grid
+│   └── Learning resources
+│
+├── 📄 utilities.html (Utilities Category)
+│   ├── Page header (⚙️ Utilities)
+│   ├── Use-case categories
+│   ├── Projects grid
+│   └── Integration guides
+│
+├── 📁 css/
+│   └── 📄 styles.css (45+ KB)
+│       ├── Root CSS variables
+│       ├── Dark theme definitions
+│       ├── Light theme definitions
+│       ├── Global reset and base styles
+│       ├── Layout system (grid, flex)
+│       ├── Component styles
+│       │   ├── .btn (button variants)
+│       │   ├── .card (project cards)
+│       │   ├── .modal (dialog)
+│       │   ├── .navbar (navigation)
+│       │   └── ...more components
+│       ├── Animation keyframes
+│       │   ├── @keyframes fadeIn
+│       │   ├── @keyframes slideUp
+│       │   ├── @keyframes pulse
+│       │   ├── @keyframes spin
+│       │   └── ...more animations
+│       ├── Responsive breakpoints
+│       │   ├── @media (min-width: 640px)
+│       │   ├── @media (min-width: 768px)
+│       │   ├── @media (min-width: 1024px)
+│       │   └── @media (min-width: 1440px)
+│       └── Accessibility (@media (prefers-reduced-motion))
+│
+├── 📁 js/
+│   ├── 📄 main.js (15 KB - Orchestration)
+│   │   ├── DOMContentLoaded initialization
+│   │   ├── Event listener setup
+│   │   ├── Theme toggle implementation
+│   │   ├── Modal control (open, close, focus trap)
+│   │   ├── Search filter logic (debounced)
+│   │   ├── Project sorting (by date, popularity)
+│   │   ├── Keyboard navigation
+│   │   └── Accessibility utilities
+│   │
+│   ├── 📄 playground.js (8 KB - Pyodide Interface)
+│   │   ├── Pyodide initialization
+│   │   ├── Web Worker spawning
+│   │   ├── Message protocol handling
+│   │   ├── Code execution UI
+│   │   ├── Output display
+│   │   ├── Error handling
+│   │   ├── Infinite loop protection (worker terminate)
+│   │   └── Performance monitoring
+│   │
+│   ├── 📄 playground-worker.js (3 KB - Web Worker)
+│   │   ├── Pyodide library loading
+│   │   ├── Python code execution
+│   │   ├── Stdout/stderr capture
+│   │   ├── Message event listener
+│   │   ├── Result transmission to main
+│   │   └── Error propagation
+│   │
+│   ├── 📄 projects.js (120 KB - Project Registry)
+│   │   ├── Project data structure definition
+│   │   ├── All 47+ projects listed
+│   │   │   ├── Snake Game
+│   │   │   ├── Rock Paper Scissors
+│   │   │   ├── Hangman
+│   │   │   ├── Blackjack
+│   │   │   ├── Tic Tac Toe
+│   │   │   ├── Guess Number
+│   │   │   ├── Quiz Game
+│   │   │   ├── Math Functions
+│   │   │   ├── Unit Converter
+│   │   │   ├── Fibonacci Generator
+│   │   │   ├── Prime Number Checker
+│   │   │   └── ...and many more
+│   │   ├── Project HTML templates
+│   │   ├── getProjectHTML() function
+│   │   └── Project initialization handlers
+│   │
+│   ├── 📄 storage.js (2 KB - localStorage Wrapper)
+│   │   ├── saveToStorage(key, value)
+│   │   ├── loadFromStorage(key, defaultValue)
+│   │   ├── removeFromStorage(key)
+│   │   ├── Error handling
+│   │   └── JSON serialization/deserialization
+│   │
+│   ├── 📄 audio.js (3 KB - Sound Effects)
+│   │   ├── AudioController class
+│   │   ├── Sound effect registry
+│   │   ├── play() method
+│   │   ├── toggleMute() method
+│   │   ├── Volume control
+│   │   └── Browser audio API integration
+│   │
+│   └── 📁 projects/ (Deprecated - migrated to projects.js)
+│       └── Individual project files (older structure)
+│
+└── 📁 assets/
+    ├── favicon.svg (Branding)
+    ├── logo.png (Application logo)
+    ├── sun.svg (Light theme icon)
+    ├── moon.svg (Dark theme icon)
+    ├── background.png (Hero background)
+    ├── pattern.png (Decorative patterns)
+    └── 📁 images/
+        ├── category-games.png
+        ├── category-math.png
+        ├── category-utilities.png
+        └── ...project-specific images
+```
+
+### File Size Breakdown
+
+| File | Size | Purpose |
+|------|------|---------|
+| styles.css | 45 KB | All styling |
+| projects.js | 120 KB | 47+ projects |
+| main.js | 15 KB | Core logic |
+| playground.js | 8 KB | Pyodide |
+| Total JS | ~160 KB | Functionality |
+| Total CSS | 45 KB | Styling |
+| **Total** | **~210 KB** | Full app |
+
+---
+
+## 🔍 Performance Profiling
+
+### Chrome DevTools Walkthrough
+
+1. **Open DevTools**: `F12` or `Ctrl+Shift+I`
+2. **Performance Tab**:
+   ```
+   • Click Record
+   • Interact with app
+   • Click Stop
+   • Analyze timeline
+   • Look for jank (yellow/red frames)
+   ```
+
+3. **Network Tab**:
+   ```
+   • Monitor resource loading
+   • Check Pyodide CDN (3-5s first load)
+   • Verify caching (100-300ms cached)
+   ```
+
+4. **Console Tab**:
+   ```
+   • Check for errors (should be none)
+   • Check for warnings (minimize)
+   • Monitor analytics events
+   ```
+
+5. **Sources Tab**:
+   ```
+   • Set breakpoints in code
+   • Step through execution
+   • Inspect variable values
+   • Monitor scope
+   ```
+
+### Performance Metrics
+
+```javascript
+// Measure operations
+performance.mark('operation-start');
+// ... code to measure
+performance.mark('operation-end');
+performance.measure('operation', 'operation-start', 'operation-end');
+
+const measure = performance.getEntriesByName('operation')[0];
+console.log(`Duration: ${measure.duration.toFixed(2)}ms`);
+```
+
+---
+
+## 🛠️ Troubleshooting Guide
+
+### Common Issues & Solutions
+
+| Issue | Cause | Solution |
+|-------|-------|----------|
+| Modal doesn't open | Event listener not attached | Check main.js modal setup |
+| Pyodide timeout | First load slow | Use cached version |
+| Layout broken | Responsive CSS issue | Check breakpoints |
+| Theme doesn't apply | localStorage issue | Clear storage & refresh |
+| Keyboard nav broken | Focus trap issue | Check FocusManager |
+| Search doesn't filter | Event not debounced | Verify debounce timing |
+| Styles not loading | CSS file path wrong | Check CSS link href |
+| Animations laggy | GPU not used | Use transform/opacity |
+| Memory leak | Event listeners not removed | Cleanup on destroy |
+| Console errors | Syntax or reference errors | Check line numbers |
+
+### Debugging Workflow
+
+```markdown
+1. Open DevTools (F12)
+2. Check Console tab
+   - Look for red errors
+   - Check error message
+   - Note line number
+3. Go to Sources tab
+   - Click file name from error
+   - Set breakpoint at error line
+4. Trigger the error
+   - Interact with app
+   - Debugger will pause
+5. Inspect variables
+   - Hover over variables
+   - Check scope panel
+6. Step through code
+   - Use step over (F10)
+   - Use step into (F11)
+7. Fix issue
+   - Update code
+   - Refresh page (F5)
+   - Test again
+```
+
+---
+
+## 🚀 Browser DevTools Features
+
+### Lighthouse Audit
+
+```
+1. Open DevTools → Lighthouse tab
+2. Select categories:
+   - Performance
+   - Accessibility
+   - Best Practices
+   - SEO
+3. Click "Analyze page load"
+4. Review suggestions
+5. Implement improvements
+6. Re-audit to verify
+```
+
+**Target Scores:**
+- Performance: > 90
+- Accessibility: 100
+- Best Practices: > 90
+- SEO: 100
+
+### CSS Debugging
+
+```javascript
+// Highlight all elements using CSS variables
+Array.from(document.querySelectorAll('*')).forEach(el => {
+    const styles = window.getComputedStyle(el);
+    if (styles.color.includes('var(')) {
+        el.style.outline = '1px solid red';
+    }
+});
+
+// Check computed styles
+const element = document.getElementById('myElement');
+const computed = window.getComputedStyle(element);
+console.log('Background:', computed.backgroundColor);
+console.log('Font Size:', computed.fontSize);
+```
+
+---
+
+## 📋 Version Control & Git Workflow
+
+### Commit Message Format
+
+```
+feat: add new component
+fix: resolve modal animation bug
+docs: update accessibility section
+style: format code with prettier
+perf: optimize search debounce
+test: add unit tests for storage
+chore: update dependencies
+
+Format: [type]: [description]
+```
+
+### Branch Naming
+
+```
+feature/component-name
+bugfix/issue-description
+docs/documentation-update
+hotfix/critical-issue
+```
+
+### Pre-commit Checklist
+
+```markdown
+☐ Code is formatted
+☐ No console errors
+☐ No console warnings
+☐ Accessibility tested
+☐ Mobile responsive
+☐ Dark/light themes work
+☐ Keyboard navigation works
+☐ Tests pass (if applicable)
+```
+
+---
+
+## 🔗 Integration Patterns
+
+### Firebase Integration Example
+
+```javascript
+class FirebaseService {
+    constructor(config) {
+        // Initialize Firebase
+        this.db = firebase.database();
+        this.auth = firebase.auth();
+    }
+    
+    async saveProjectProgress(userId, projectName, progress) {
+        try {
+            await this.db.ref(`users/${userId}/progress/${projectName}`).set({
+                progress,
+                timestamp: Date.now()
+            });
+            return true;
+        } catch (error) {
+            console.error('Save failed:', error);
+            return false;
+        }
+    }
+    
+    async loadProjectProgress(userId, projectName) {
+        try {
+            const snapshot = await this.db.ref(
+                `users/${userId}/progress/${projectName}`
+            ).once('value');
+            return snapshot.val();
+        } catch (error) {
+            console.error('Load failed:', error);
+            return null;
+        }
+    }
+}
+```
+
+---
+
+## 📊 Analytics Implementation
+
+```javascript
+class AdvancedAnalytics {
+    static sessionStart = Date.now();
+    static pageViews = 0;
+    static interactions = [];
+    
+    static init() {
+        window.addEventListener('beforeunload', () => {
+            this.trackSession();
+        });
+        
+        document.addEventListener('click', (e) => {
+            this.trackInteraction(e);
+        });
+    }
+    
+    static trackPageView(page) {
+        this.pageViews++;
+        Analytics.track('page_view', {
+            page,
+            timestamp: Date.now(),
+            referrer: document.referrer
+        });
+    }
+    
+    static trackInteraction(event) {
+        const element = event.target;
+        this.interactions.push({
+            element: element.tagName,
+            class: element.className,
+            text: element.textContent?.substring(0, 50)
+        });
+    }
+    
+    static trackSession() {
+        const sessionDuration = Date.now() - this.sessionStart;
+        Analytics.track('session_end', {
+            duration: sessionDuration,
+            pageViews: this.pageViews,
+            interactions: this.interactions.length
+        });
+    }
+}
+
+AdvancedAnalytics.init();
+```
+
+---
+
+## 🎓 Learning Resources by Topic
+
+### JavaScript Fundamentals
+- MDN: [JavaScript Basics](https://developer.mozilla.org/en-US/docs/Learn/JavaScript)
+- Practice: [freeCodeCamp JS Course](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
+
+### Web APIs
+- DOM API: [MDN Document](https://developer.mozilla.org/en-US/docs/Web/API/Document)
+- Fetch API: [MDN Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+- Web Workers: [MDN Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)
+
+### CSS Advanced
+- Grid: [CSS Tricks Grid Guide](https://css-tricks.com/snippets/css/complete-guide-grid/)
+- Flexbox: [CSS Tricks Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- Animations: [MDN Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations)
+
+### Accessibility
+- WCAG 2.1: [W3C WCAG](https://www.w3.org/WAI/WCAG21/quickref/)
+- ARIA: [WAI-ARIA Practices](https://www.w3.org/WAI/ARIA/apg/)
+- Keyboard Nav: [WebAIM Keyboard](https://webaim.org/articles/keyboard/)
+
+### Performance
+- Core Web Vitals: [web.dev metrics](https://web.dev/metrics/)
+- Lighthouse: [web.dev Lighthouse](https://web.dev/lighthouse/)
+- Chrome DevTools: [Chrome DevTools Guide](https://developer.chrome.com/docs/devtools/)
+
+### Python & Pyodide
+- Python Docs: [python.org](https://www.python.org/doc/)
+- Pyodide: [pyodide.org](https://pyodide.org/)
+- Jupyter: [jupyter.org](https://jupyter.org/)
+
+---
+
+## 🎯 Optimization Checklist
+
+```markdown
+## Code
+☐ Unused variables removed
+☐ Dead code removed
+☐ Functions < 50 lines
+☐ No console.log() in production
+☐ Error handling present
+☐ Comments for complex logic
+
+## Performance
+☐ Images optimized
+☐ CSS critical path
+☐ Lazy load images
+☐ Defer non-critical JS
+☐ Cache static assets
+☐ Minify production code
+
+## Accessibility
+☐ Semantic HTML
+☐ Keyboard navigation
+☐ Focus visible
+☐ Color contrast OK
+☐ ARIA labels present
+☐ Alt text on images
+
+## Testing
+☐ Happy path tested
+☐ Error cases handled
+☐ Edge cases considered
+☐ Mobile tested
+☐ Cross-browser tested
+☐ Accessibility tested
+
+## Documentation
+☐ README updated
+☐ Code comments clear
+☐ API documented
+☐ Troubleshooting guide
+☐ Contributing guide
+☐ Examples provided
+```
+
+---
+
+## 📖 Advanced Topics
+
+### Web Components
+
+```javascript
+class ProjectCard extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+    
+    connectedCallback() {
+        this.render();
+    }
+    
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host { display: block; }
+                .card { background: var(--surface-color); }
+            </style>
+            <article class="card">
+                <h3>${this.getAttribute('title')}</h3>
+                <p>${this.getAttribute('description')}</p>
+            </article>
+        `;
+    }
+}
+
+customElements.define('project-card', ProjectCard);
+
+// Usage
+const card = document.createElement('project-card');
+card.setAttribute('title', 'Snake Game');
+card.setAttribute('description', 'Classic snake game');
+document.body.appendChild(card);
+```
+
+### Service Workers
+
+```javascript
+// service-worker.js
+self.addEventListener('install', () => {
+    caches.open('v1').then(cache => {
+        cache.addAll([
+            '/',
+            '/css/styles.css',
+            '/js/main.js',
+            '/assets/logo.png'
+        ]);
+    });
+});
+
+self.addEventListener('fetch', (event) => {
+    event.respondWith(
+        caches.match(event.request).then((response) => {
+            return response || fetch(event.request);
+        })
+    );
+});
+```
+
+---
+
+<div align="center">
+
+### 💡 Questions?
+
+[GitHub Issues](https://github.com/steam-bell-92/python-mini-project/issues) | [Discussions](https://github.com/steam-bell-92/python-mini-project/discussions)
+
+**MIT Licensed** | Made with ❤️ by Python Mini Projects team
+
+v1.3.0 | Updated 2024
+
+</div>
diff --git a/games/2048-Game/2048-Game.py b/games/2048-Game/2048-Game.py
index bfb7307..a4d5578 100644
--- a/games/2048-Game/2048-Game.py
+++ b/games/2048-Game/2048-Game.py
@@ -67,6 +67,14 @@ def __init__(self, root):
         )
         self.restart_button.grid(pady=5)
 
+        self.instruction_label = tk.Label(
+            root,
+            text="🎮 Controls: ← ↑ → ↓ | Merge same numbers | Goal: 2048 🎯",
+            font=("Arial", 10),
+            fg="#6a635b",
+        )
+        self.instruction_label.grid(pady=5)
+
         self.cells = []
         self.board = [[0] * GRID_SIZE for _ in range(GRID_SIZE)]
 
diff --git a/games/Tic-Tac-Toe/Tic-Tac-Toe.py b/games/Tic-Tac-Toe/Tic-Tac-Toe.py
index 9834f58..4dd4603 100644
--- a/games/Tic-Tac-Toe/Tic-Tac-Toe.py
+++ b/games/Tic-Tac-Toe/Tic-Tac-Toe.py
@@ -1,187 +1,189 @@
 import random
 import math
 import time
+import os
 
-# ─────────────────────────────────────────
-#  🎮 Tic Tac Toe — Smart AI Edition
-# ─────────────────────────────────────────
+# ═══════════════════════════════════════════════
+#   🎮  TIC TAC TOE  —  Full Featured Edition
+# ═══════════════════════════════════════════════
 
-EMPTY = "⬜"
-X = "❌"
-O = "⭕"
+EMPTY = " "
+X = "X"
+O = "O"
 
+WINS = [
+    (0, 1, 2), (3, 4, 5), (6, 7, 8),   # rows
+    (0, 3, 6), (1, 4, 7), (2, 5, 8),   # cols
+    (0, 4, 8), (2, 4, 6)               # diagonals
+]
 
-# ─────────────────────────────────────────
-# BOARD FUNCTIONS
-# ─────────────────────────────────────────
 
-def create_board():
-    return [EMPTY] * 9
+# ───────────────────────────────────────────────
+# DISPLAY
+# ───────────────────────────────────────────────
+
+def clear():
+    os.system("cls" if os.name == "nt" else "clear")
+
+
+def color(text, code):
+    """ANSI color wrapper."""
+    return f"\033[{code}m{text}\033[0m"
+
+
+def RED(t):    return color(t, "91")
+def BLUE(t):   return color(t, "94")
+def GREEN(t):  return color(t, "92")
+def YELLOW(t): return color(t, "93")
+def BOLD(t):   return color(t, "1")
+def DIM(t):    return color(t, "2")
+def CYAN(t):   return color(t, "96")
+
+
+def banner():
+    print(BOLD(CYAN("""
+╔══════════════════════════════════════╗
+║       🎮  TIC  TAC  TOE  🎮          ║
+╚══════════════════════════════════════╝""")))
+
+
+def fmt_cell(val, pos):
+    """Color X red, O blue, empty show position number."""
+    if val == X:
+        return BOLD(RED(f" {X} "))
+    elif val == O:
+        return BOLD(BLUE(f" {O} "))
+    else:
+        return DIM(f" {pos} ")
 
 
 def display_board(board):
+    b = board
+    sep = "───┼───┼───"
     print()
-    for i in range(0, 9, 3):
-        print(f"  {board[i]}  {board[i+1]}  {board[i+2]}")
+    print(f"  {fmt_cell(b[0],1)}│{fmt_cell(b[1],2)}│{fmt_cell(b[2],3)}")
+    print(f"  {sep}")
+    print(f"  {fmt_cell(b[3],4)}│{fmt_cell(b[4],5)}│{fmt_cell(b[5],6)}")
+    print(f"  {sep}")
+    print(f"  {fmt_cell(b[6],7)}│{fmt_cell(b[7],8)}│{fmt_cell(b[8],9)}")
     print()
 
 
-def display_position_guide():
-    print("\n  📌 Position guide:")
-    for i in range(1, 10, 3):
-        print(f"  {i}  {i+1}  {i+2}")
+def display_scoreboard(scores, names):
+    p1, p2 = names
+    s1, s2, draws = scores["p1"], scores["p2"], scores["draws"]
+    print(BOLD("  ┌─── SCOREBOARD ───────────────┐"))
+    print(f"  │  {RED(p1):<20} {BOLD(str(s1)):>3}  │")
+    print(f"  │  {BLUE(p2):<20} {BOLD(str(s2)):>3}  │")
+    print(f"  │  {'Draws':<20} {BOLD(str(draws)):>3}  │")
+    print(BOLD("  └───────────────────────────────┘"))
     print()
 
 
-def available_moves(board):
-    return [i for i, cell in enumerate(board) if cell == EMPTY]
-
-
-# ─────────────────────────────────────────
+# ───────────────────────────────────────────────
 # GAME LOGIC
-# ─────────────────────────────────────────
+# ───────────────────────────────────────────────
+
+def create_board():
+    return [EMPTY] * 9
 
-def check_winner(board, symbol):
-    wins = [
-        [0, 1, 2],
-        [3, 4, 5],
-        [6, 7, 8],
 
-        [0, 3, 6],
-        [1, 4, 7],
-        [2, 5, 8],
+def available_moves(board):
+    return [i for i, c in enumerate(board) if c == EMPTY]
 
-        [0, 4, 8],
-        [2, 4, 6]
-    ]
 
+def check_winner(board, symbol):
     return any(
         board[a] == board[b] == board[c] == symbol
-        for a, b, c in wins
+        for a, b, c in WINS
     )
 
 
-def check_draw(board):
-    return all(cell != EMPTY for cell in board)
-
-
-# ─────────────────────────────────────────
-# PLAYER INPUT
-# ─────────────────────────────────────────
-
-def get_player_move(board, symbol, name):
-    while True:
-        try:
-            pos = int(input(
-                f"  {symbol} {name}'s turn!\n"
-                f"  ➡️ Enter position (1-9): "
-            ))
-
-            if pos < 1 or pos > 9:
-                print("  ⚠️ Enter a number between 1 and 9.\n")
+def get_winning_cells(board, symbol):
+    for a, b, c in WINS:
+        if board[a] == board[b] == board[c] == symbol:
+            return (a, b, c)
+    return None
 
-            elif board[pos - 1] != EMPTY:
-                print("  ⚠️ Position already taken.\n")
-
-            else:
-                return pos - 1
 
-        except ValueError:
-            print("  ⚠️ Invalid input.\n")
+def check_draw(board):
+    return EMPTY not in board
 
 
-# ─────────────────────────────────────────
-# EASY AI
-# ─────────────────────────────────────────
+# ───────────────────────────────────────────────
+# AI ENGINES
+# ───────────────────────────────────────────────
 
-def easy_ai(board):
+def easy_ai(board, _symbol):
     return random.choice(available_moves(board))
 
 
-# ─────────────────────────────────────────
-# MEDIUM AI
-# ─────────────────────────────────────────
+def medium_ai(board, symbol):
+    opponent = X if symbol == O else O
 
-def medium_ai(board):
-    # Try to win
+    # 1. Win if possible
     for move in available_moves(board):
-        board[move] = O
-
-        if check_winner(board, O):
+        board[move] = symbol
+        if check_winner(board, symbol):
             board[move] = EMPTY
             return move
-
         board[move] = EMPTY
 
-    # Block player win
+    # 2. Block opponent win
     for move in available_moves(board):
-        board[move] = X
-
-        if check_winner(board, X):
+        board[move] = opponent
+        if check_winner(board, opponent):
             board[move] = EMPTY
             return move
-
         board[move] = EMPTY
 
-    # Otherwise random
-    return random.choice(available_moves(board))
-
-
-# ─────────────────────────────────────────
-# HARD AI (MINIMAX)
-# ─────────────────────────────────────────
+    # 3. Prefer center, then corners, then sides
+    for preferred in [4, 0, 2, 6, 8, 1, 3, 5, 7]:
+        if board[preferred] == EMPTY:
+            return preferred
 
-def minimax(board, depth, is_maximizing):
-
-    if check_winner(board, O):
-        return 1
+    return random.choice(available_moves(board))
 
-    if check_winner(board, X):
-        return -1
 
+def minimax(board, depth, is_max, symbol, opponent, alpha, beta):
+    if check_winner(board, symbol):
+        return 10 - depth
+    if check_winner(board, opponent):
+        return depth - 10
     if check_draw(board):
         return 0
 
-    if is_maximizing:
-        best_score = -math.inf
-
+    if is_max:
+        best = -math.inf
         for move in available_moves(board):
-            board[move] = O
-
-            score = minimax(board, depth + 1, False)
-
+            board[move] = symbol
+            best = max(best, minimax(board, depth+1, False, symbol, opponent, alpha, beta))
             board[move] = EMPTY
-
-            best_score = max(score, best_score)
-
-        return best_score
-
+            alpha = max(alpha, best)
+            if beta <= alpha:
+                break
+        return best
     else:
-        best_score = math.inf
-
+        best = math.inf
         for move in available_moves(board):
-            board[move] = X
-
-            score = minimax(board, depth + 1, True)
-
+            board[move] = opponent
+            best = min(best, minimax(board, depth+1, True, symbol, opponent, alpha, beta))
             board[move] = EMPTY
+            beta = min(beta, best)
+            if beta <= alpha:
+                break
+        return best
 
-            best_score = min(score, best_score)
-
-        return best_score
 
-
-def hard_ai(board):
+def hard_ai(board, symbol):
+    opponent = X if symbol == O else O
     best_score = -math.inf
     best_move = None
 
     for move in available_moves(board):
-        board[move] = O
-
-        score = minimax(board, 0, False)
-
+        board[move] = symbol
+        score = minimax(board, 0, False, symbol, opponent, -math.inf, math.inf)
         board[move] = EMPTY
-
         if score > best_score:
             best_score = score
             best_move = move
@@ -189,218 +191,237 @@ def hard_ai(board):
     return best_move
 
 
-# ─────────────────────────────────────────
-# AI CONTROLLER
-# ─────────────────────────────────────────
+AI_ENGINES = {
+    "easy":   easy_ai,
+    "medium": medium_ai,
+    "hard":   hard_ai,
+}
 
-def get_computer_move(board, difficulty):
 
-    if difficulty == "easy":
-        return easy_ai(board)
+# ───────────────────────────────────────────────
+# INPUT HELPERS
+# ───────────────────────────────────────────────
 
-    elif difficulty == "medium":
-        return medium_ai(board)
-
-    else:
-        return hard_ai(board)
-
-
-# ─────────────────────────────────────────
-# GAME MODE
-# ─────────────────────────────────────────
-
-def choose_difficulty():
+def get_player_move(board, symbol, name):
+    sym_colored = RED(symbol) if symbol == X else BLUE(symbol)
     while True:
+        try:
+            raw = input(f"  {sym_colored} {BOLD(name)} → enter position (1-9): ").strip()
+            pos = int(raw)
+            if not 1 <= pos <= 9:
+                print(YELLOW("  ⚠  Enter a number from 1 to 9.\n"))
+            elif board[pos - 1] != EMPTY:
+                print(YELLOW("  ⚠  That cell is already taken.\n"))
+            else:
+                return pos - 1
+        except ValueError:
+            print(YELLOW("  ⚠  Please enter a valid number.\n"))
 
-        print("\n  🎯 Choose Difficulty:")
-        print("  1️⃣ Easy")
-        print("  2️⃣ Medium")
-        print("  3️⃣ Hard")
-
-        choice = input("  ➡️ Enter choice (1/2/3): ").strip()
-
-        if choice == "1":
-            return "easy"
-
-        elif choice == "2":
-            return "medium"
-
-        elif choice == "3":
-            return "hard"
-
-        else:
-            print("  ⚠️ Invalid choice.\n")
-
-
-def play_vs_computer():
-
-    board = create_board()
-
-    difficulty = choose_difficulty()
-
-    print(f"\n  👤 You = {X}  |  🤖 Computer = {O}")
-    print(f"  🎯 Difficulty: {difficulty.upper()}")
-
-    display_position_guide()
 
+def prompt(msg, valid):
     while True:
-
-        # PLAYER TURN
-        display_board(board)
-
-        move = get_player_move(board, X, "You")
-
-        board[move] = X
-
-        if check_winner(board, X):
-            display_board(board)
-            print("  🎉 You win! 🏆\n")
-            return
-
-        if check_draw(board):
-            display_board(board)
-            print("  🤝 It's a draw!\n")
-            return
-
-        # COMPUTER TURN
-        print("\n  🤖 Computer is thinking...")
-        time.sleep(1)
-
-        comp_move = get_computer_move(board, difficulty)
-
-        board[comp_move] = O
-
-        print(f"  🤖 Computer chose position {comp_move + 1}")
-
-        if check_winner(board, O):
-            display_board(board)
-            print("  😔 Computer wins!\n")
-            return
-
-        if check_draw(board):
-            display_board(board)
-            print("  🤝 It's a draw!\n")
-            return
-
-
-# ─────────────────────────────────────────
-# TWO PLAYER MODE
-# ─────────────────────────────────────────
-
-def play_two_players():
-
+        ans = input(msg).strip().lower()
+        if ans in valid:
+            return ans
+        print(YELLOW(f"  ⚠  Enter one of: {', '.join(valid)}\n"))
+
+
+# ───────────────────────────────────────────────
+# MENUS
+# ───────────────────────────────────────────────
+
+def menu_mode():
+    print(BOLD("\n  Choose Game Mode:"))
+    print("  1  →  Two Players (local)")
+    print("  2  →  vs Computer (AI)")
+    return prompt("\n  ➜ Your choice (1/2): ", {"1", "2"})
+
+
+def menu_difficulty():
+    print(BOLD("\n  Choose Difficulty:"))
+    print("  1  →  Easy    (random moves)")
+    print("  2  →  Medium  (smart blocking)")
+    print("  3  →  Hard    (unbeatable AI)")
+    choice = prompt("\n  ➜ Your choice (1/2/3): ", {"1", "2", "3"})
+    return {"1": "easy", "2": "medium", "3": "hard"}[choice]
+
+
+def menu_first_turn(p1_name, p2_name):
+    print(BOLD("\n  Who goes first?"))
+    print(f"  1  →  {p1_name}")
+    print(f"  2  →  {p2_name}")
+    print(f"  3  →  Random")
+    choice = prompt("\n  ➜ Your choice (1/2/3): ", {"1", "2", "3"})
+    if choice == "3":
+        return random.choice(["1", "2"])
+    return choice
+
+
+# ───────────────────────────────────────────────
+# CORE GAME ROUND
+# ───────────────────────────────────────────────
+
+def play_round(players, scores, mode, difficulty=None):
+    """
+    players: list of dicts with keys: name, symbol, is_human
+    Returns: "p1", "p2", or "draw"
+    """
     board = create_board()
-
-    players = [
-        {"name": "Player 1", "symbol": X},
-        {"name": "Player 2", "symbol": O}
-    ]
-
-    print(f"\n  👤 Player 1 = {X} | Player 2 = {O}")
-
-    display_position_guide()
-
     turn = 0
 
     while True:
-
+        clear()
+        banner()
+        display_scoreboard(scores, [p["name"] for p in players])
         display_board(board)
 
-        player = players[turn % 2]
-
-        move = get_player_move(
-            board,
-            player["symbol"],
-            player["name"]
-        )
+        current = players[turn % 2]
+        other   = players[(turn + 1) % 2]
 
-        board[move] = player["symbol"]
+        sym_label = RED(current["symbol"]) if current["symbol"] == X else BLUE(current["symbol"])
 
-        if check_winner(board, player["symbol"]):
+        # ── Get move ──
+        if current["is_human"]:
+            move = get_player_move(board, current["symbol"], current["name"])
+        else:
+            print(f"  🤖 {BOLD(current['name'])} is thinking", end="", flush=True)
+            for _ in range(3):
+                time.sleep(0.35)
+                print(".", end="", flush=True)
+            print()
+            time.sleep(0.2)
+            move = AI_ENGINES[difficulty](board, current["symbol"])
+            print(f"  🤖 {current['name']} chose position {BOLD(str(move + 1))}\n")
+            time.sleep(0.5)
+
+        board[move] = current["symbol"]
+
+        # ── Check result ──
+        if check_winner(board, current["symbol"]):
+            clear()
+            banner()
+            display_scoreboard(scores, [p["name"] for p in players])
             display_board(board)
-
-            print(
-                f"  🎉 {player['name']} wins! 🏆\n"
-            )
-
-            return
+            win_sym = "🏆"
+            print(GREEN(BOLD(f"  {win_sym}  {current['name']} wins this round!  {win_sym}\n")))
+            time.sleep(1.5)
+            return "p1" if turn % 2 == 0 else "p2"
 
         if check_draw(board):
+            clear()
+            banner()
+            display_scoreboard(scores, [p["name"] for p in players])
             display_board(board)
-            print("  🤝 It's a draw!\n")
-            return
+            print(YELLOW(BOLD("  🤝  It's a draw!\n")))
+            time.sleep(1.5)
+            return "draw"
 
         turn += 1
 
 
-# ─────────────────────────────────────────
-# MENU
-# ─────────────────────────────────────────
-
-def choose_mode():
-
-    while True:
+# ───────────────────────────────────────────────
+# FULL MATCH (BEST OF N)
+# ───────────────────────────────────────────────
 
-        print("\n  Choose mode:")
-        print("  1️⃣ 2 Players")
-        print("  2️⃣ vs Computer")
-
-        choice = input(
-            "  ➡️ Enter choice (1/2): "
-        ).strip()
-
-        if choice == "1":
-            return "two"
-
-        elif choice == "2":
-            return "computer"
+def play_match(mode, difficulty=None):
+    clear()
+    banner()
 
+    # Names
+    if mode == "1":
+        p1_name = input(BOLD("  Player 1 name: ")).strip() or "Player 1"
+        p2_name = input(BOLD("  Player 2 name: ")).strip() or "Player 2"
+        players = [
+            {"name": p1_name, "symbol": X, "is_human": True},
+            {"name": p2_name, "symbol": O, "is_human": True},
+        ]
+    else:
+        p1_name = input(BOLD("  Your name: ")).strip() or "You"
+        p2_name = "Computer"
+        players = [
+            {"name": p1_name, "symbol": X, "is_human": True},
+            {"name": p2_name, "symbol": O, "is_human": False},
+        ]
+
+    # First turn
+    first = menu_first_turn(players[0]["name"], players[1]["name"])
+    if first == "2":
+        players.reverse()
+        # Keep X always first to move; reassign symbols
+        players[0]["symbol"] = X
+        players[1]["symbol"] = O
+
+    scores = {"p1": 0, "p2": 0, "draws": 0}
+
+    # Rounds
+    print(BOLD("\n  Best of how many rounds?"))
+    print("  1  →  1 round")
+    print("  2  →  3 rounds (best of 3)")
+    print("  3  →  5 rounds (best of 5)")
+    rc = prompt("\n  ➜ Your choice (1/2/3): ", {"1", "2", "3"})
+    max_rounds = {"1": 1, "2": 3, "3": 5}[rc]
+    rounds_played = 0
+
+    while rounds_played < max_rounds:
+        remaining = max_rounds - rounds_played
+        winner = play_round(players, scores, mode, difficulty)
+
+        if winner == "p1":
+            scores["p1"] += 1
+        elif winner == "p2":
+            scores["p2"] += 1
         else:
-            print("  ⚠️ Invalid choice.\n")
-
-
-def play_again():
-
-    while True:
+            scores["draws"] += 1
 
-        answer = input(
-            "  🔄 Play again? (y/n): "
-        ).strip().lower()
+        rounds_played += 1
 
-        if answer in ("y", "yes"):
-            return True
-
-        elif answer in ("n", "no"):
-            return False
+        # Early exit if someone has won majority
+        majority = (max_rounds // 2) + 1
+        if scores["p1"] >= majority or scores["p2"] >= majority:
+            break
 
-        else:
-            print("  ⚠️ Enter y or n.\n")
+        if rounds_played < max_rounds:
+            cont = prompt(f"  ➜ Next round? (y/n): ", {"y", "n"})
+            if cont == "n":
+                break
+
+    # Final result
+    clear()
+    banner()
+    p1_name_display = players[0]["name"] if first == "1" else players[1]["name"]
+    p2_name_display = players[1]["name"] if first == "1" else players[0]["name"]
+    display_scoreboard(scores, [players[0]["name"], players[1]["name"]])
+
+    if scores["p1"] > scores["p2"]:
+        print(GREEN(BOLD(f"  🏆  {players[0]['name']} wins the match!\n")))
+    elif scores["p2"] > scores["p1"]:
+        print(GREEN(BOLD(f"  🏆  {players[1]['name']} wins the match!\n")))
+    else:
+        print(YELLOW(BOLD("  🤝  The match is a tie!\n")))
 
 
-# ─────────────────────────────────────────
+# ───────────────────────────────────────────────
 # MAIN
-# ─────────────────────────────────────────
+# ───────────────────────────────────────────────
 
 def main():
-
-    print("\n" + "=" * 42)
-    print("      🎮 TIC TAC TOE — SMART AI")
-    print("=" * 42)
-
     while True:
+        clear()
+        banner()
 
-        mode = choose_mode()
+        mode = menu_mode()
+        difficulty = None
+        if mode == "2":
+            difficulty = menu_difficulty()
 
-        if mode == "two":
-            play_two_players()
-
-        else:
-            play_vs_computer()
+        play_match(mode, difficulty)
 
-        if not play_again():
-            print("\n  👋 Thanks for playing!\n")
+        again = prompt("  ➜ Play again? (y/n): ", {"y", "n"})
+        if again == "n":
+            clear()
+            print(CYAN(BOLD("\n  👋  Thanks for playing! See you next time.\n")))
             break
 
 
 if __name__ == "__main__":
-    main()
+    main()
\ No newline at end of file
diff --git a/gssoc2/.vscode/settings.json b/gssoc2/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/gssoc2/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/gssoc2/index.html b/gssoc2/index.html
new file mode 100644
index 0000000..ea5fd85
--- /dev/null
+++ b/gssoc2/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>AI Resume Analyzer</title>
+    <link rel="stylesheet" href="style.css">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+</head>
+
+<body>
+
+<div class="container">
+
+    <h1 class="title">AI RESUME ANALYZER</h1>
+
+    <!-- UPLOAD -->
+    <div class="upload-box">
+        <i class="fa-solid fa-file-lines icon"></i>
+
+        <label class="file-btn">
+            Choose File
+            <input type="file" id="resumeInput" hidden>
+        </label>
+
+        <p>Drag & Drop or Click</p>
+    </div>
+
+    <button id="analyzeBtn">Analyze Resume 🚀</button>
+
+    <!-- ATS SCORE -->
+    <div id="ats" class="card hidden">
+        <h3>ATS Score</h3>
+
+        <div class="progress-circle">
+            <span>82%</span>
+        </div>
+
+        <div class="extra-info">
+            <p>✔ Formatting Score: 80%</p>
+            <p>✔ Keyword Match: 75%</p>
+        </div>
+    </div>
+
+    <!-- LOWER SECTION -->
+    <div class="bottom-section hidden" id="bottomSection">
+
+        <!-- KEYWORDS -->
+        <div class="card">
+            <h3>Keywords Match</h3>
+
+            <div class="keyword-item">
+                <span>Python</span>
+                <div class="bar"><div style="width: 90%"></div></div>
+            </div>
+
+            <div class="keyword-item">
+                <span>Machine Learning</span>
+                <div class="bar"><div style="width: 75%"></div></div>
+            </div>
+
+            <div class="keyword-item">
+                <span>Data Analysis</span>
+                <div class="bar"><div style="width: 65%"></div></div>
+            </div>
+        </div>
+
+        <!-- SUGGESTIONS -->
+        <div class="card">
+            <h3><i class="fa-solid fa-lightbulb"></i> Suggestions</h3>
+
+            <div class="suggestion">
+                <i class="fa-solid fa-check"></i>
+                <p>Add more projects</p>
+            </div>
+
+            <div class="suggestion">
+                <i class="fa-solid fa-check"></i>
+                <p>Improve formatting</p>
+            </div>
+
+            <div class="suggestion">
+                <i class="fa-solid fa-check"></i>
+                <p>Use action verbs</p>
+            </div>
+        </div>
+
+    </div>
+
+</div>
+
+<script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/gssoc2/script.js b/gssoc2/script.js
new file mode 100644
index 0000000..1118267
--- /dev/null
+++ b/gssoc2/script.js
@@ -0,0 +1,11 @@
+document.getElementById("analyzeBtn").addEventListener("click", () => {
+    const file = document.getElementById("resumeInput");
+
+    if (!file.files.length) {
+        alert("Upload resume first!");
+        return;
+    }
+
+    document.getElementById("ats").classList.remove("hidden");
+    document.getElementById("bottomSection").classList.remove("hidden");
+});
\ No newline at end of file
diff --git a/gssoc2/style.css b/gssoc2/style.css
new file mode 100644
index 0000000..a479006
--- /dev/null
+++ b/gssoc2/style.css
@@ -0,0 +1,122 @@
+body {
+    margin: 0;
+    font-family: Arial;
+    background: linear-gradient(to right, #0f172a, #020617);
+    color: white;
+}
+
+/* CONTAINER */
+.container {
+    max-width: 900px;
+    margin: auto;
+    padding: 30px;
+}
+
+/* TITLE */
+.title {
+    text-align: center;
+    font-size: 32px;
+    margin-bottom: 20px;
+
+    background: linear-gradient(90deg, #38bdf8, #22c55e);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+/* UPLOAD */
+.upload-box {
+    border: 2px dashed #38bdf8;
+    padding: 30px;
+    border-radius: 12px;
+    text-align: center;
+}
+
+.icon {
+    font-size: 40px;
+}
+
+/* BUTTON */
+.file-btn {
+    background: #38bdf8;
+    padding: 10px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    display: inline-block;
+    margin-top: 10px;
+}
+
+#analyzeBtn {
+    margin-top: 20px;
+    width: 100%;
+    padding: 12px;
+    background: #22c55e;
+    border: none;
+    border-radius: 8px;
+}
+
+/* CARD */
+.card {
+    background: #0f172a;
+    padding: 20px;
+    border-radius: 14px;
+    border: 1px solid #334155;
+    margin-top: 25px;
+}
+
+/* ATS */
+.progress-circle {
+    width: 130px;
+    height: 130px;
+    border-radius: 50%;
+    border: 10px solid #22c55e;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 15px auto;
+}
+
+.extra-info {
+    text-align: center;
+    font-size: 13px;
+    color: #94a3b8;
+}
+
+/* BOTTOM GRID */
+.bottom-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+}
+
+/* KEYWORDS */
+.keyword-item {
+    margin-bottom: 15px;
+}
+
+.bar {
+    background: #1e293b;
+    height: 8px;
+    border-radius: 5px;
+}
+
+.bar div {
+    height: 100%;
+    background: #38bdf8;
+}
+
+/* SUGGESTIONS */
+.suggestion {
+    display: flex;
+    gap: 10px;
+    margin: 10px 0;
+}
+
+.suggestion i {
+    color: #22c55e;
+}
+
+/* HIDDEN */
+.hidden {
+    display: none;
+}
\ No newline at end of file
diff --git a/pyproject.toml b/pyproject.toml
index 14190d8..8cc4c25 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -6,3 +6,5 @@ requires-python = ">=3.10"
 
 [tool.unittest]
 # No special configuration needed, unittest is standard library
+[tool.vercel]
+entrypoint = "math.Happy-Number.Happy-Number:app"
diff --git a/utilities/Caesar-cipher/caesar_ciphar.py b/utilities/Caesar-cipher/caesar_ciphar.py
new file mode 100644
index 0000000..d09ab6c
--- /dev/null
+++ b/utilities/Caesar-cipher/caesar_ciphar.py
@@ -0,0 +1,63 @@
+print("🔐 Caesar Cipher Encoder & Decoder 🔐")
+print("Encrypt and decrypt messages using Caesar Cipher\n")
+
+
+def encrypt(text, shift):
+
+    result = ""
+
+    for char in text:
+
+        if char.isupper():
+            result += chr((ord(char) - 65 + shift) % 26 + 65)
+
+        elif char.islower():
+            result += chr((ord(char) - 97 + shift) % 26 + 97)
+
+        else:
+            result += char
+
+    return result
+
+
+def decrypt(text, shift):
+
+    return encrypt(text, -shift)
+
+
+while True:
+
+    print("=" * 50)
+    print("🎯 Choose an option:")
+    print("1️⃣ Encrypt Text")
+    print("2️⃣ Decrypt Text")
+    print("3️⃣ Exit")
+    print("=" * 50)
+
+    choice = input("\n➡️ Enter your choice (1-3): ")
+
+    if choice == '1':
+
+        text = input("\n📝 Enter text to encrypt: ")
+        shift = int(input("🔑 Enter shift value: "))
+
+        encrypted = encrypt(text, shift)
+
+        print(f"\n🔐 Encrypted Text: {encrypted}\n")
+
+    elif choice == '2':
+
+        text = input("\n📨 Enter text to decrypt: ")
+        shift = int(input("🔑 Enter shift value: "))
+
+        decrypted = decrypt(text, shift)
+
+        print(f"\n📝 Decrypted Text: {decrypted}\n")
+
+    elif choice == '3':
+
+        print("\n👋 Thanks for using Caesar Cipher! Goodbye!\n")
+        break
+
+    else:
+        print("\n❌ Invalid choice! Please select 1-3.\n")
\ No newline at end of file
diff --git a/web-app/assets/banners/2048-game.jpg b/web-app/assets/banners/2048-game.jpg
index 6adeb2e..f4e7851 100644
Binary files a/web-app/assets/banners/2048-game.jpg and b/web-app/assets/banners/2048-game.jpg differ
diff --git a/web-app/assets/banners/armstrong.jpg b/web-app/assets/banners/armstrong.jpg
index 4467d66..bbef83d 100644
Binary files a/web-app/assets/banners/armstrong.jpg and b/web-app/assets/banners/armstrong.jpg differ
diff --git a/web-app/assets/banners/blackjack21.jpg b/web-app/assets/banners/blackjack21.jpg
index ab7cc6e..62bd6cd 100644
Binary files a/web-app/assets/banners/blackjack21.jpg and b/web-app/assets/banners/blackjack21.jpg differ
diff --git a/web-app/assets/banners/caesar-cipher.jpg b/web-app/assets/banners/caesar-cipher.jpg
new file mode 100644
index 0000000..e1d9124
Binary files /dev/null and b/web-app/assets/banners/caesar-cipher.jpg differ
diff --git a/web-app/assets/banners/calculator.jpg b/web-app/assets/banners/calculator.jpg
index ebe9a41..d89984c 100644
Binary files a/web-app/assets/banners/calculator.jpg and b/web-app/assets/banners/calculator.jpg differ
diff --git a/web-app/assets/banners/coin-flip.jpg b/web-app/assets/banners/coin-flip.jpg
index 492c1e2..d5e558d 100644
Binary files a/web-app/assets/banners/coin-flip.jpg and b/web-app/assets/banners/coin-flip.jpg differ
diff --git a/web-app/assets/banners/collatz.jpg b/web-app/assets/banners/collatz.jpg
index ff1e020..35c2b77 100644
Binary files a/web-app/assets/banners/collatz.jpg and b/web-app/assets/banners/collatz.jpg differ
diff --git a/web-app/assets/banners/color-palette.jpg b/web-app/assets/banners/color-palette.jpg
index b8d0433..2c7ffd3 100644
Binary files a/web-app/assets/banners/color-palette.jpg and b/web-app/assets/banners/color-palette.jpg differ
diff --git a/web-app/assets/banners/coordinate-polar-transform.jpg b/web-app/assets/banners/coordinate-polar-transform.jpg
index f35db26..11088c1 100644
Binary files a/web-app/assets/banners/coordinate-polar-transform.jpg and b/web-app/assets/banners/coordinate-polar-transform.jpg differ
diff --git a/web-app/assets/banners/derivative-calculator.jpg b/web-app/assets/banners/derivative-calculator.jpg
index 5d7bf68..5093053 100644
Binary files a/web-app/assets/banners/derivative-calculator.jpg and b/web-app/assets/banners/derivative-calculator.jpg differ
diff --git a/web-app/assets/banners/dice-rolling.jpg b/web-app/assets/banners/dice-rolling.jpg
index 428acf4..0bf8922 100644
Binary files a/web-app/assets/banners/dice-rolling.jpg and b/web-app/assets/banners/dice-rolling.jpg differ
diff --git a/web-app/assets/banners/dots-boxes.jpg b/web-app/assets/banners/dots-boxes.jpg
index 370f5ba..4263cbf 100644
Binary files a/web-app/assets/banners/dots-boxes.jpg and b/web-app/assets/banners/dots-boxes.jpg differ
diff --git a/web-app/assets/banners/emoji-memory.jpg b/web-app/assets/banners/emoji-memory.jpg
index 0fe7c4b..3ffa9fc 100644
Binary files a/web-app/assets/banners/emoji-memory.jpg and b/web-app/assets/banners/emoji-memory.jpg differ
diff --git a/web-app/assets/banners/fibonacci.jpg b/web-app/assets/banners/fibonacci.jpg
index 4b87552..939f108 100644
Binary files a/web-app/assets/banners/fibonacci.jpg and b/web-app/assets/banners/fibonacci.jpg differ
diff --git a/web-app/assets/banners/flames.jpg b/web-app/assets/banners/flames.jpg
index b1c6275..e01dcfe 100644
Binary files a/web-app/assets/banners/flames.jpg and b/web-app/assets/banners/flames.jpg differ
diff --git a/web-app/assets/banners/flappy-game.jpg b/web-app/assets/banners/flappy-game.jpg
index bc7731c..823725e 100644
Binary files a/web-app/assets/banners/flappy-game.jpg and b/web-app/assets/banners/flappy-game.jpg differ
diff --git a/web-app/assets/banners/hangman.jpg b/web-app/assets/banners/hangman.jpg
index 5c9469b..ef82af8 100644
Binary files a/web-app/assets/banners/hangman.jpg and b/web-app/assets/banners/hangman.jpg differ
diff --git a/web-app/assets/banners/math-quiz.jpg b/web-app/assets/banners/math-quiz.jpg
index e0e7bf8..1a2fa27 100644
Binary files a/web-app/assets/banners/math-quiz.jpg and b/web-app/assets/banners/math-quiz.jpg differ
diff --git a/web-app/assets/banners/morse-code.jpg b/web-app/assets/banners/morse-code.jpg
index d316211..11e58c0 100644
Binary files a/web-app/assets/banners/morse-code.jpg and b/web-app/assets/banners/morse-code.jpg differ
diff --git a/web-app/assets/banners/number-converter.jpg b/web-app/assets/banners/number-converter.jpg
index d69cf76..305181d 100644
Binary files a/web-app/assets/banners/number-converter.jpg and b/web-app/assets/banners/number-converter.jpg differ
diff --git a/web-app/assets/banners/number-guessing.jpg b/web-app/assets/banners/number-guessing.jpg
index a3e29e9..e69d8bb 100644
Binary files a/web-app/assets/banners/number-guessing.jpg and b/web-app/assets/banners/number-guessing.jpg differ
diff --git a/web-app/assets/banners/pascal-triangle.jpg b/web-app/assets/banners/pascal-triangle.jpg
index a8cacf5..fe25b2c 100644
Binary files a/web-app/assets/banners/pascal-triangle.jpg and b/web-app/assets/banners/pascal-triangle.jpg differ
diff --git a/web-app/assets/banners/password-forge.jpg b/web-app/assets/banners/password-forge.jpg
index 1929a70..f74f2bd 100644
Binary files a/web-app/assets/banners/password-forge.jpg and b/web-app/assets/banners/password-forge.jpg differ
diff --git a/web-app/assets/banners/prime-analyzer.jpg b/web-app/assets/banners/prime-analyzer.jpg
index daecbee..a8ec209 100644
Binary files a/web-app/assets/banners/prime-analyzer.jpg and b/web-app/assets/banners/prime-analyzer.jpg differ
diff --git a/web-app/assets/banners/productive-pet.jpg b/web-app/assets/banners/productive-pet.jpg
new file mode 100644
index 0000000..a8e726b
Binary files /dev/null and b/web-app/assets/banners/productive-pet.jpg differ
diff --git a/web-app/assets/banners/progression-recognizer.jpg b/web-app/assets/banners/progression-recognizer.jpg
index e0027da..858e217 100644
Binary files a/web-app/assets/banners/progression-recognizer.jpg and b/web-app/assets/banners/progression-recognizer.jpg differ
diff --git a/web-app/assets/banners/projectile-motion.jpg b/web-app/assets/banners/projectile-motion.jpg
index 2ca8787..83f1c06 100644
Binary files a/web-app/assets/banners/projectile-motion.jpg and b/web-app/assets/banners/projectile-motion.jpg differ
diff --git a/web-app/assets/banners/rock-paper-scissor.jpg b/web-app/assets/banners/rock-paper-scissor.jpg
index 0f13b07..e719f91 100644
Binary files a/web-app/assets/banners/rock-paper-scissor.jpg and b/web-app/assets/banners/rock-paper-scissor.jpg differ
diff --git a/web-app/assets/banners/snake-game.jpg b/web-app/assets/banners/snake-game.jpg
index b437e4c..7b18632 100644
Binary files a/web-app/assets/banners/snake-game.jpg and b/web-app/assets/banners/snake-game.jpg differ
diff --git a/web-app/assets/banners/tic-tac-toe.jpg b/web-app/assets/banners/tic-tac-toe.jpg
new file mode 100644
index 0000000..0a1dd61
Binary files /dev/null and b/web-app/assets/banners/tic-tac-toe.jpg differ
diff --git a/web-app/assets/banners/tower-of-hanoi.jpg b/web-app/assets/banners/tower-of-hanoi.jpg
index e6533e9..ffb6c64 100644
Binary files a/web-app/assets/banners/tower-of-hanoi.jpg and b/web-app/assets/banners/tower-of-hanoi.jpg differ
diff --git a/web-app/assets/banners/typing-speed-tester.jpg b/web-app/assets/banners/typing-speed-tester.jpg
index 91f6346..8bd7336 100644
Binary files a/web-app/assets/banners/typing-speed-tester.jpg and b/web-app/assets/banners/typing-speed-tester.jpg differ
diff --git a/web-app/assets/banners/whack-a-mole.jpg b/web-app/assets/banners/whack-a-mole.jpg
index 81e36e7..28456e0 100644
Binary files a/web-app/assets/banners/whack-a-mole.jpg and b/web-app/assets/banners/whack-a-mole.jpg differ
diff --git a/web-app/assets/banners/word-scramble.jpg b/web-app/assets/banners/word-scramble.jpg
index 53b6458..211bddd 100644
Binary files a/web-app/assets/banners/word-scramble.jpg and b/web-app/assets/banners/word-scramble.jpg differ
diff --git a/web-app/css/styles.css b/web-app/css/styles.css
index bb8aedf..292e3cd 100644
--- a/web-app/css/styles.css
+++ b/web-app/css/styles.css
@@ -1,4621 +1,3098 @@
-/* ── Google Fonts ── */
-@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');
+/* ═══════════════════════════════════════════════════════════════
+   PYTHON PROJECTS GALLERY — PREMIUM DESIGN SYSTEM
+   Typography: Inter (UI) + JetBrains Mono (Tech)
+   Palette: Deep slates, soft glows, glassmorphism
+   Motion: transform/opacity only, cubic-bezier(0.16,1,0.3,1)
+   ═══════════════════════════════════════════════════════════════ */
 
-/* ═══════════════════════════════════════
-   CSS VARIABLES
-═══════════════════════════════════════ */
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
+
+/* ── Design Tokens ──────────────────────────────────────────── */
 :root {
-    --accent-color: #22c55e;
-    --primary-color: var(--accent-color);
-    --secondary-color: #06b6d4;
-    --success-color: #10b981;
-    --danger-color: #ef4444;
-    --warning-color: #f59e0b;
-    --bg-color: #081120;
-    --surface-color: #111827;
-    --panel-color: #0f172a;
-    --control-color: #172033;
-    --text-color: #e5e7eb;
-    --text-secondary: #94a3b8;
-    --border-color: #1f2937;
-    --accent-soft: rgba(34, 197, 94, 0.14);
-    --accent-border: rgba(34, 197, 94, 0.35);
-    --overlay-color: rgba(8, 17, 32, 0.78);
-    --on-accent: #ffffff;
-    --footer-card-color: #e9830f;
-    --footer-card-light: rgba(252, 176, 91, 0.08);
-    --footer-card-border: rgba(252, 176, 91, 0.25);
-    --shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
-    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-    --motion-duration: 0.3s;
-
-    --hero-green-200: #bbf7d0;
-    --hero-green-300: #86efac;
-    --hero-green-400: #4ade80;
-    --hero-green-500: #22c55e;
-    --hero-green-600: #05431c;
-    --hero-green-nav-bg: #0d2118;
-    --hero-green-border: rgba(74, 222, 128, 0.35);
-    --hero-green-glow: rgba(34, 197, 94, 0.28);
-    --hero-font-display: 'Fredoka', 'Segoe UI', sans-serif;
-    --hero-font-body: 'DM Sans', 'Segoe UI', sans-serif;
-}
-
-[data-theme="light"] {
-    --primary-color: #16a34a;
-    --secondary-color: #22c55e;
-    --bg-color: #f0fdf4;
-    --surface-color: #ffffff;
-    --border-color: #bbf7d0;
-    --shadow: 0 20px 60px rgba(34, 197, 94, 0.22);
-    --shadow-modal: 0 35px 80px -12px rgba(22, 163, 74, 0.35);
-    --text-color: #0f172a;
-    --text-secondary: #64748b;
-    --footer-card-light: rgba(252, 176, 91, 0.06);
-    --footer-card-border: rgba(252, 176, 91, 0.18);
-
-    --hero-green-nav-bg: #e8faf0;
-    --hero-green-border: rgba(22, 163, 74, 0.30);
-    --hero-green-glow: rgba(22, 163, 74, 0.15);
-}
-
-/* ═══════════════════════════════════════
-   RESET & BASE
-═══════════════════════════════════════ */
+  --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+
+  --accent: #22c55e;
+  --accent-soft: rgba(34, 197, 94, 0.12);
+  --accent-glow: rgba(34, 197, 94, 0.25);
+  --danger: #ef4444;
+  --warning: #f59e0b;
+  --success: #10b981;
+
+  --bg: #0c0f1a;
+  --bg-elevated: rgba(18, 22, 36, 0.85);
+  --bg-glass: rgba(255, 255, 255, 0.04);
+  --surface: rgba(18, 22, 36, 0.92);
+  --surface-hover: rgba(30, 35, 52, 0.95);
+  --border: rgba(255, 255, 255, 0.06);
+  --border-accent: rgba(34, 197, 94, 0.2);
+  --text: #f0f2f5;
+  --text-secondary: #8892a4;
+  --text-tertiary: #4a5368;
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
+  --shadow-glow: 0 0 30px var(--accent-glow);
+
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --duration-fast: 200ms;
+  --duration-base: 300ms;
+  --duration-slow: 500ms;
+
+  --nav-height: 72px;
+}
+
+[data-theme='light'] {
+  --bg: #f4f6f9;
+  --bg-elevated: rgba(255, 255, 255, 0.85);
+  --bg-glass: rgba(0, 0, 0, 0.02);
+  --surface: rgba(255, 255, 255, 0.92);
+  --surface-hover: #ffffff;
+  --border: rgba(0, 0, 0, 0.06);
+  --border-accent: rgba(34, 197, 94, 0.25);
+  --text: #0f172a;
+  --text-secondary: #64748b;
+  --text-tertiary: #94a3b8;
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
+  --shadow-glow: 0 0 30px rgba(34, 197, 94, 0.15);
+}
+
+/* ── Reset & Base ──────────────────────────────────────────── */
 *,
 *::before,
 *::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 html {
-    scroll-behavior: smooth;
-}
-
-[data-theme="light"] {
-    --bg-color: #f8fafc;
-    --surface-color: #ffffff;
-    --panel-color: #f1f5f9;
-    --control-color: #ffffff;
-    --text-color: #1f2937;
-    --text-secondary: #6b7280;
-    --border-color: #d8dee8;
-    --accent-soft: rgba(34, 197, 94, 0.1);
-    --accent-border: rgba(34, 197, 94, 0.26);
-    --overlay-color: rgba(15, 23, 42, 0.46);
-    --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    --shadow-modal: 0 25px 50px -12px rgba(15, 23, 42, 0.18);
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-a,
-button,
-input,
-select,
-textarea,
-.project-card,
-.whack-hole {
-    touch-action: manipulation;
-    /* Removes 300ms mobile click delay globally */
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body {
-    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
-    background: var(--bg-color);
-    color: var(--text-color);
-    line-height: 1.6;
-    transition: background-color var(--motion-duration) ease, color var(--motion-duration) ease;
+  font-family: var(--font-sans);
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  transition: background var(--duration-base) ease, color var(--duration-base) ease;
+  overflow-x: hidden;
 }
 
-#main-content {
-    scroll-margin-top: 5.5rem;
+::selection {
+  background: var(--accent);
+  color: #fff;
 }
 
 .container {
-    margin: 0 auto;
-    padding: 0 20px;
-}
-
-/* ═══════════════════════════════════════
-   NAVBAR
-═══════════════════════════════════════ */
-.navbar {
-    background: color-mix(in srgb, var(--surface-color) 86%, transparent);
-    backdrop-filter: blur(8px);
-    padding: 1.25rem 0;
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-    border-bottom: 1px solid var(--border-color);
-}
-
-.navbar .container {
-    display: flex;
-    justify-content:space-around;
-    align-items: center;
-}
-.navbar-brand {
-    display: flex;
-    align-items: baseline;
-    gap: 1.5rem;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 24px;
 }
 
-.logo {
-    display: flex;
-    align-items: center;
+a {
+  color: var(--accent);
+  text-decoration: none;
 }
 
-.navbar-tagline {
-    font-size: 0.875rem;
-    color: var(--text-secondary);
-    font-family: 'Space Grotesk', sans-serif;
-    font-weight: 500;
-    letter-spacing: 0.025em;
-    opacity: 0.85;
-    white-space: nowrap;
+button {
+  font-family: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+  color: inherit;
 }
 
-.logo h1 {
-    font-size: 1.5rem;
-    color: var(--text-color);
-    font-family: 'IBM Plex Mono', monospace;
-    font-weight: 600;
-    letter-spacing: 0.5px;
-    display: flex;
-    align-items: baseline;
-    gap: 0;
-    margin: 0;
+img {
+  max-width: 100%;
+  display: block;
 }
 
-.logo-py {
-    font-family: 'IBM Plex Mono', monospace;
-    font-weight: 400;
-    font-size: 1.1rem;
-    color: var(--text-secondary);
-    letter-spacing: 0.02em;
+/* ── Scrollbar ─────────────────────────────────────────────── */
+::-webkit-scrollbar {
+  width: 6px;
 }
-
-.logo-mini {
-    font-family: 'Space Grotesk', sans-serif;
-    font-weight: 700;
-    font-size: 1.3rem;
-    color: var(--text-color);
-    margin: 0 0.15rem;
+::-webkit-scrollbar-track {
+  background: transparent;
 }
-
-.logo-parens {
-    font-family: 'IBM Plex Mono', monospace;
-    font-weight: 600;
-    color: var(--accent-color);
-    font-size: 1.1rem;
-    margin-left: 0.1rem;
+::-webkit-scrollbar-thumb {
+  background: var(--text-tertiary);
+  border-radius: 3px;
 }
-
-.logo-icon {
-    width: 42px;
-    height: 42px;
-    color: var(--hero-green-400) !important;
-    stroke-width: 2;
-    filter: drop-shadow(0 0 6px var(--hero-green-glow));
-    flex-shrink: 0;
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-secondary);
 }
 
-.nav-controls {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
+/* ── Visually Hidden ───────────────────────────────────────── */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
 }
 
-.theme-toggle,
-.sound-toggle {
-    background: var(--accent-color);
-    border: none;
-    color: var(--on-accent);
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    cursor: pointer;
-    font-size: 1.2rem;
-    transition: var(--transition);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.skip-link {
+  position: absolute;
+  top: -100px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--accent);
+  color: #fff;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  z-index: 5000;
+  transition: top var(--duration-fast) ease;
 }
-
-.theme-toggle:hover,
-.sound-toggle:hover {
-    background: rgba(74, 222, 128, 0.28);
-    box-shadow: 0 0 14px var(--hero-green-glow);
-    color: var(--hero-green-200);
-    transform: scale(1.1);
-    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
+.skip-link:focus {
+  top: 16px;
 }
 
-.theme-toggle:active,
-.sound-toggle:active {
-    transform: scale(0.95);
+/* ── Cursor Glow ───────────────────────────────────────────── */
+.cursor-glow {
+  position: fixed;
+  width: 320px;
+  height: 320px;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 0;
+  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
+  transform: translate3d(-50%, -50%, 0);
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  will-change: transform;
+}
+
+[data-theme='light'] .cursor-glow {
+  opacity: 0 !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   NAVIGATION — Floating Glass Dock
+   ═══════════════════════════════════════════════════════════════ */
+/* ── Primary Left Sidebar Dock ────────────────────────────── */
+.sidebar-dock {
+  position: fixed;
+  top: 16px;
+  left: 16px;
+  bottom: 16px;
+  width: 280px;
+  background: var(--bg-glass);
+  backdrop-filter: blur(24px) saturate(1.4);
+  -webkit-backdrop-filter: blur(24px) saturate(1.4);
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  box-shadow: var(--shadow-lg);
+  z-index: 1000;
+  transition: transform var(--duration-slow) var(--ease-out-expo),
+              opacity var(--duration-slow) var(--ease-out-expo),
+              left var(--duration-slow) var(--ease-out-expo);
+  transform: translateX(-120%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+body.sidebar-active .sidebar-dock {
+  transform: translateX(0);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+[data-theme='light'] .sidebar-dock {
+  background: rgba(255, 255, 255, 0.7);
+  border-color: rgba(0, 0, 0, 0.06);
+}
+
+.sidebar-brand {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sidebar-search {
+  width: 100%;
+}
+
+.sidebar-search .search-box {
+  width: 100%;
+  max-width: none;
+}
+
+.sidebar-search .search-dropdown {
+  width: 280px;
+  left: calc(100% + 12px);
+  top: 0;
+}
+
+.sidebar-menu-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: none; /* Hide scrollbar for clean vertical list */
+}
+
+.sidebar-menu-wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+.sidebar-menu-title {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+  padding-left: 6px;
+}
+
+.sidebar-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 2px 6px; /* Horizontal safe gutter prevents box-shadow clipping and boundary overlap */
+}
+
+/* Sidebar menu tab colors */
+.sidebar-tab[data-category='all'] {
+  --tab-color: var(--accent);
+  --tab-color-glow: rgba(16, 185, 129, 0.25);
+  --tab-color-soft: rgba(16, 185, 129, 0.08);
+  --tab-color-soft-hover: rgba(16, 185, 129, 0.03);
+}
+.sidebar-tab[data-category='games'] {
+  --tab-color: #ec4899; /* Neon Pink */
+  --tab-color-glow: rgba(236, 72, 153, 0.25);
+  --tab-color-soft: rgba(236, 72, 153, 0.08);
+  --tab-color-soft-hover: rgba(236, 72, 153, 0.03);
+}
+.sidebar-tab[data-category='math'] {
+  --tab-color: #6366f1; /* Cosmic Indigo/Blue */
+  --tab-color-glow: rgba(99, 102, 241, 0.25);
+  --tab-color-soft: rgba(99, 102, 241, 0.08);
+  --tab-color-soft-hover: rgba(99, 102, 241, 0.03);
+}
+.sidebar-tab[data-category='utilities'] {
+  --tab-color: #10b981; /* Mint Green */
+  --tab-color-glow: rgba(16, 185, 129, 0.25);
+  --tab-color-soft: rgba(16, 185, 129, 0.08);
+  --tab-color-soft-hover: rgba(16, 185, 129, 0.03);
+}
+.sidebar-tab[data-category='favorites'] {
+  --tab-color: #f59e0b; /* Amber Gold */
+  --tab-color-glow: rgba(245, 158, 11, 0.25);
+  --tab-color-soft: rgba(245, 158, 11, 0.08);
+  --tab-color-soft-hover: rgba(245, 158, 11, 0.03);
 }
-
-/* ═══════════════════════════════════════
-   HERO SECTION
-═══════════════════════════════════════ */
-.hero-section {
-    position: relative;
-    padding: 7.5rem 0 3.5rem;
-    min-height: 520px;
-    text-align: center;
-    overflow: hidden;
-    background-color: var(--bg-color);
-    transition: background-color 0.5s ease;
+.sidebar-tab[data-category='playground'] {
+  --tab-color: #a78bfa; /* Electric Purple */
+  --tab-color-glow: rgba(167, 139, 250, 0.25);
+  --tab-color-soft: rgba(167, 139, 250, 0.08);
+  --tab-color-soft-hover: rgba(167, 139, 250, 0.03);
 }
 
-
-/* Canvas fills the full hero */
-#boardCanvas {
-    position: absolute;
-    inset: 0;
+.sidebar-menu .sidebar-tab {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  gap: 12px;
+  padding: 10px 14px;
+  border-radius: 12px;
+  font-family: var(--font-sans);
+  font-size: 0.88rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 1px solid transparent;
+  transition: all var(--duration-fast) ease;
+  cursor: pointer;
+  position: relative; /* Added relative context for active line */
+}
+
+/* Active sidebar category glow line */
+.sidebar-menu .sidebar-tab::before {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 20%;
+  height: 60%;
+  width: 3px;
+  background: var(--tab-color);
+  border-radius: 99px;
+  opacity: 0;
+  transform: scaleY(0);
+  transition: transform var(--duration-base) var(--ease-out-expo), opacity var(--duration-base) ease;
+}
+
+.sidebar-menu .sidebar-tab.active::before {
+  opacity: 1;
+  transform: scaleY(1);
+}
+
+.sidebar-menu .sidebar-tab:hover {
+  color: var(--text);
+  background: var(--tab-color-soft-hover);
+  border-color: rgba(255, 255, 255, 0.03);
+  padding-left: 16px; /* Stable horizontal content shift */
+}
+
+[data-theme='light'] .sidebar-menu .sidebar-tab:hover {
+  background: rgba(0, 0, 0, 0.015);
+  border-color: rgba(0, 0, 0, 0.02);
+}
+
+.sidebar-menu .sidebar-tab.active {
+  color: var(--text);
+  background: var(--tab-color-soft);
+  border-color: var(--tab-color-glow);
+  box-shadow: 0 0 16px var(--tab-color-glow);
+  padding-left: 18px; /* Stable horizontal active content shift */
+}
+
+/* Sidebar Search Box Focus Glow */
+.sidebar-search .search-box input:focus {
+  border-color: var(--accent) !important;
+  box-shadow: 0 0 16px rgba(16, 185, 129, 0.15) !important;
+  background: rgba(255, 255, 255, 0.04) !important;
+}
+
+/* Sidebar Controls bounce */
+.sidebar-controls button {
+  position: relative;
+  transition: all var(--duration-fast) ease;
+}
+.sidebar-controls button i {
+  transition: transform var(--duration-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.sidebar-controls button:hover i {
+  transform: scale(1.18) rotate(8deg);
+}
+
+.sidebar-menu .sidebar-tab .sidebar-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--text-tertiary);
+  transition: all var(--duration-fast) ease;
+}
+
+.sidebar-menu .sidebar-tab:hover .sidebar-icon,
+.sidebar-menu .sidebar-tab.active .sidebar-icon {
+  color: var(--tab-color);
+}
+
+.sidebar-menu .sidebar-tab.active .sidebar-icon {
+  transform: scale(1.15);
+}
+
+.sidebar-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 16px;
+  border-top: 1px solid var(--border);
+}
+
+.sidebar-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.sidebar-controls .sound-toggle,
+.sidebar-controls .theme-toggle {
+  flex: 1;
+  height: 40px;
+  border-radius: 10px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all var(--duration-fast) ease;
+}
+
+.sidebar-controls .sound-toggle:hover,
+.sidebar-controls .theme-toggle:hover {
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-color: var(--border-accent);
+}
+
+/* Mobile Toggles and Layout Adjustments */
+.mobile-sidebar-toggle {
+  display: none;
+  position: fixed;
+  top: 16px;
+  left: 16px;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--bg-glass);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  color: var(--text);
+  align-items: center;
+  justify-content: center;
+  z-index: 1001;
+  cursor: pointer;
+  transition: all var(--duration-fast) ease;
+  box-shadow: var(--shadow-md);
+}
+
+.mobile-sidebar-toggle:hover {
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-color: var(--border-accent);
+}
+
+/* ── Floating Hero Zone Controls ───────────────────────────── */
+
+.hero-controls {
+  position: fixed;
+  top: 20px;
+  right: 24px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  z-index: 1001;
+  opacity: 1;
+  transition: opacity var(--duration-base) ease;
+}
+
+.hero-control-btn {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--bg-glass);
+  backdrop-filter: blur(12px) saturate(1.4);
+  -webkit-backdrop-filter: blur(12px) saturate(1.4);
+  color: var(--text-secondary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+  transition: all var(--duration-fast) ease;
+}
+
+[data-theme='light'] .hero-control-btn {
+  background: rgba(255, 255, 255, 0.7);
+  border-color: rgba(0, 0, 0, 0.06);
+}
+
+.hero-control-btn:hover {
+  transform: translateY(-1px);
+  color: var(--text);
+  background: var(--accent-soft);
+  border-color: var(--border-accent);
+}
+
+.hero-control-btn i {
+  transition: transform var(--duration-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.hero-control-btn:hover i {
+  transform: scale(1.18) rotate(8deg);
+}
+
+/* Hide controls when sidebar is visible */
+body.sidebar-active .hero-controls {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Desktop padding adjustment */
+@media (min-width: 1100px) {
+  body {
+    padding-left: 0 !important;
+  }
+  
+  .hero-section,
+  .hero-timeline-section {
+    padding-left: 0 !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
     width: 100% !important;
-    height: 100% !important;
-    z-index: 0;
-    pointer-events: none;
-    opacity: 0.82;
-    display: block;
-}
+  }
 
-/* Stunning Premium Geometric Grid Background */
-.hero-background {
-    position: absolute;
-    inset: 0;
-    overflow: hidden;
-    z-index: 0;
-    pointer-events: none;
-    background-color: transparent;
-    background-image: 
-        linear-gradient(to right, var(--border-color) 1px, transparent 1px),
-        linear-gradient(to bottom, var(--border-color) 1px, transparent 1px);
-    background-size: 36px 36px;
-    opacity: 0.25;
-    mask-image: radial-gradient(ellipse at top, black 40%, transparent 80%);
-    -webkit-mask-image: radial-gradient(ellipse at top, black 40%, transparent 80%);
+  .projects-section,
+  #playgroundSection,
+  .footer {
+    padding-left: 312px !important;
+    transition: padding-left var(--duration-slow) var(--ease-out-expo);
+  }
 }
 
-.hero-background::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 100vw;
-    height: 100%;
-    max-width: 1200px;
-    background: radial-gradient(circle at top, var(--accent-soft) 0%, transparent 70%);
-    z-index: -1;
-}
+/* Responsive/Mobile Sidebar behaviors */
+@media (max-width: 1100px) {
+  .sidebar-dock {
+    transform: translateX(-120%);
+    left: -280px;
+    opacity: 0;
+  }
+  
+  .sidebar-dock.open {
+    transform: translateX(0);
+    left: 16px;
+    opacity: 1;
+    pointer-events: auto;
+  }
+  
+  .mobile-sidebar-toggle {
+    display: none;
+  }
 
-[data-theme="light"] .hero-background {
-    opacity: 0.6;
+  body.sidebar-active .mobile-sidebar-toggle {
+    display: flex;
+  }
 }
 
-/* Vignette fade at bottom of hero */
-.hero-section::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-    z-index: 0;
+/* ── Logo ──────────────────────────────────────────────────── */
+.logo-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-decoration: none;
+  flex-shrink: 0;
 }
 
-.hero-code-snippets {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    overflow: hidden;
-    pointer-events: none;
+.logo-top-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
-.code-snippet {
-    position: absolute;
-    color: color-mix(in srgb, var(--text-secondary) 74%, var(--accent-color));
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: clamp(0.72rem, 1.2vw, 0.92rem);
-    letter-spacing: 0.02em;
-    opacity: 0.16;
-    text-shadow: 0 0 20px rgba(34, 197, 94, 0.24);
-    white-space: nowrap;
-    transform-origin: center;
+.sidebar-dock .logo-wrap {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
 }
 
-.snippet-one {
-    top: 15%;
-    left: 10%;
-    animation: codeFloatOne 18s ease-in-out infinite;
+.sidebar-dock .logo-tagline {
+  display: inline-flex !important;
+  margin-left: 0;
 }
 
-.snippet-two {
-    top: 25%;
-    right: 10%;
-    opacity: 0.18;
-    animation: codeFloatTwo 22s ease-in-out infinite;
+.navbar-logo {
+  width: 38px;
+  height: 38px;
+  object-fit: contain;
+  filter: drop-shadow(0 0 10px var(--accent-glow));
 }
 
-.snippet-three {
-    top: 50%;
-    left: 12%;
-    opacity: 0.22;
-    animation: codeFloatThree 20s ease-in-out infinite;
+.logo-text {
+  display: flex;
+  align-items: center;
+  font-family: var(--font-sans);
+  font-size: 1.35rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
 }
 
-.snippet-four {
-    top: 60%;
-    right: 8%;
-    animation: codeFloatTwo 24s ease-in-out infinite reverse;
+.logo-py {
+  color: var(--text-secondary);
+  font-weight: 500;
 }
 
-.snippet-five {
-    top: 75%;
-    left: 15%;
-    animation: codeFloatOne 21s ease-in-out infinite reverse;
+.logo-mini {
+  color: var(--text);
 }
 
-.snippet-six {
-    top: 20%;
-    right: 25%;
-    opacity: 0.15;
-    animation: codeFloatThree 26s ease-in-out infinite;
+.logo-parens {
+  color: var(--accent);
+  font-weight: 600;
 }
 
-.snippet-seven {
-    top: 80%;
-    right: 18%;
-    opacity: 0.15;
-    animation: codeFloatTwo 28s ease-in-out infinite;
+.logo-tagline {
+  display: none;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: 999px;
+  font-size: 0.72rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+
+.logo-tagline::before {
+  content: '';
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 8px var(--accent-glow);
+}
+
+@media (min-width: 900px) {
+  .logo-tagline {
+    display: inline-flex;
+  }
 }
 
-[data-theme="light"] .code-snippet {
-    color: color-mix(in srgb, var(--text-secondary) 70%, var(--accent-color));
-    opacity: 0.15;
-    text-shadow: none;
+/* ── Search ────────────────────────────────────────────────── */
+/* Glowing Sound and Theme Toggle Icons */
+.sound-toggle i {
+  color: #14b8a6; /* Neon Teal */
+  filter: drop-shadow(0 0 6px rgba(20, 184, 166, 0.45));
+  transition: all var(--duration-fast) ease;
 }
 
-@keyframes codeFloatOne {
-
-    0%,
-    100% {
-        transform: translate3d(0, 0, 0) rotate(4deg);
-    }
-
-    50% {
-        transform: translate3d(-12px, 9px, 0) rotate(-2deg);
-    }
+.sound-toggle.muted i,
+.sound-toggle i.fa-volume-mute {
+  color: #ef4444 !important; /* Muted Red */
+  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5)) !important;
 }
 
-@keyframes codeFloatTwo {
-
-    0%,
-    100% {
-        transform: translate3d(0, 0, 0) rotate(-5deg);
-    }
-
-    50% {
-        transform: translate3d(10px, -8px, 0) rotate(3deg);
-    }
+.theme-toggle i.fa-moon {
+  color: #8b5cf6; /* Cosmic Purple */
+  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.55));
 }
 
-@keyframes codeFloatThree {
-
-    0%,
-    100% {
-        transform: translate3d(0, 0, 0) rotate(-3deg);
-    }
-
-    50% {
-        transform: translate3d(14px, 7px, 0) rotate(2deg);
-    }
+.theme-toggle i.fa-sun {
+  color: #f59e0b; /* Golden Sun */
+  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.55));
 }
 
-.hero-background.color-bends-container {
-    position: absolute;
+.search-box {
+  flex: 1;
+  max-width: 400px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 14px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--bg-glass);
+  transition: border-color var(--duration-fast) ease,
+              background var(--duration-fast) ease,
+              box-shadow var(--duration-fast) ease;
+}
+
+.search-box i {
+  color: var(--text-tertiary);
+  font-size: 0.85rem;
+  flex-shrink: 0;
+}
+
+.search-box input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--text);
+  font-size: 0.9rem;
+  font-family: var(--font-sans);
+  min-width: 0;
 }
 
-.color-bends-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    isolation: isolate;
-    background:
-        radial-gradient(circle at top left, rgba(34, 197, 94, 0.12), transparent 40%),
-        #081120;
+.search-box input::placeholder {
+  color: var(--text-tertiary);
 }
 
-[data-theme="light"] .color-bends-container {
-    background:
-        radial-gradient(circle at top left, rgba(34, 197, 94, 0.08), transparent 42%),
-        #f8fafc;
+.search-box:focus-within {
+  border-color: var(--accent);
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-glow);
 }
 
-.color-bends-container::before,
-.color-bends-container::after {
-    content: '';
-    position: absolute;
-    pointer-events: none;
+.search-box:focus-within i {
+  color: var(--accent);
 }
 
-.color-bends-container::before {
-    inset: 0;
-    background:
-        linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(148, 163, 184, 0.025) 1px, transparent 1px);
-    background-size: 36px 36px;
-    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), transparent 78%);
-    opacity: 0.65;
+/* ── Nav Controls ──────────────────────────────────────────── */
+.nav-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.sound-toggle,
+.theme-toggle {
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--bg-glass);
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--duration-fast) ease;
+}
+
+.sound-toggle:hover,
+.theme-toggle:hover {
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-color: var(--border-accent);
+  transform: translateY(-1px);
+}
+
+.mobile-menu-toggle {
+  display: none;
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--bg-glass);
+  color: var(--text);
+  font-size: 0.9rem;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   HERO SECTION — Cinematic
+   ═══════════════════════════════════════════════════════════════ */
+.hero-section {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--nav-height) + 40px) 24px 60px;
+  overflow: hidden;
+}
+
+#boardCanvas,
+#timelineCanvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.5;
 }
 
-.color-bends-container::after {
-    inset: 0;
-    background: linear-gradient(to bottom, transparent 0%, rgba(8, 17, 32, 0.72) 100%);
-    opacity: 0.78;
+.hero-background {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
 }
 
-[data-theme="light"] .color-bends-container::before {
-    opacity: 0.35;
+.hero-background::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(to right, var(--border) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
+  background-size: 48px 48px;
+  opacity: 0.3;
+  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
+  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
+}
+
+.hero-background::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 800px;
+  height: 600px;
+  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 60%);
+  opacity: 0.6;
+  pointer-events: none;
 }
 
-[data-theme="light"] .color-bends-container::after {
-    background: linear-gradient(to bottom, transparent 0%, rgba(248, 250, 252, 0.72) 100%);
-    opacity: 0.72;
+.hero-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.3;
+  pointer-events: none;
+  z-index: 0;
 }
 
-.hero-content {
-    position: relative;
-    z-index: 2;
-    max-width: 680px;
-    margin-left: calc(50% - 350px);
-    margin-right: auto;
-    padding-top: 15px;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.hero-orb-one {
+  width: 400px;
+  height: 400px;
+  left: -100px;
+  top: 10%;
+  background: radial-gradient(circle, rgba(34, 197, 94, 0.3), transparent 70%);
+  animation: orbFloat 20s ease-in-out infinite;
 }
 
-.hero-kicker {
-    color: var(--accent-color);
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 0.78rem;
-    font-weight: 600;
-    letter-spacing: 0.12em;
-    margin-bottom: 1rem;
-    text-transform: uppercase;
-    animation: fadeInUp 0.7s ease;
+.hero-orb-two {
+  width: 500px;
+  height: 500px;
+  right: -150px;
+  top: 20%;
+  background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 70%);
+  animation: orbFloat 25s ease-in-out infinite reverse;
 }
 
-.hero-title {
-    font-size: clamp(2.45rem, 7vw, 4.75rem);
-    font-weight: 700;
-    margin-bottom: 1rem;
-    color: var(--text-color);
-    animation: fadeInUp 0.7s ease;
-    line-height: 1.1;
-    max-width: none;
+.hero-orb-three {
+  width: 300px;
+  height: 300px;
+  left: 40%;
+  bottom: -50px;
+  background: radial-gradient(circle, rgba(34, 197, 94, 0.15), transparent 70%);
+  animation: orbFloat 18s ease-in-out infinite 5s;
 }
 
-.hero-title-wrapper {
-    position: relative;
-    display: inline-block;
+@keyframes orbFloat {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(30px, -40px) scale(1.05); }
+  66% { transform: translate(-20px, 20px) scale(0.95); }
 }
 
-.python-orbit {
-    position: absolute;
-    width: 400px;
-    height: 400px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    border: 2px solid rgba(34, 197, 94, 0.15);
-    border-radius: 50%;
-    animation: revolve 20s linear infinite;
-    pointer-events: none;
-    z-index: 1;
-}
-
-.python-orbiter {
-    position: absolute;
-    width: 50px;
-    height: 50px;
-    top: -25px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    animation: rotate 4s linear infinite;
+/* ── Hero Content ──────────────────────────────────────────── */
+.hero-shell {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  max-width: 800px;
+  width: 100%;
 }
 
-.python-logo {
-    font-size: 2.5rem;
-    filter: drop-shadow(0 4px 12px rgba(34, 197, 94, 0.4));
-    animation: spinPython 3s linear infinite;
+.hero-badge-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 32px;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
-@keyframes revolve {
-    from {
-        transform: translate(-50%, -50%) rotate(0deg);
-    }
-    to {
-        transform: translate(-50%, -50%) rotate(360deg);
-    }
+/* ── Hero Big Logo & Brand Title ────────────────────────────── */
+.hero-logo-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(12px, 3vw, 20px);
+  margin-bottom: 24px;
+  animation: fadeInUp var(--duration-slow) var(--ease-out-expo) both;
 }
 
-@keyframes rotate {
-    from {
-        transform: translateX(-50%) rotate(0deg);
-    }
-    to {
-        transform: translateX(-50%) rotate(360deg);
-    }
+.hero-logo-image {
+  width: clamp(48px, 8vw, 72px);
+  height: clamp(48px, 8vw, 72px);
+  object-fit: contain;
+  filter: drop-shadow(0 0 20px var(--accent-glow));
+  transition: transform var(--duration-base) var(--ease-out-expo);
 }
 
-@keyframes spinPython {
-    from {
-        transform: rotateY(0deg) scale(1);
-    }
-    50% {
-        transform: rotateY(180deg) scale(1.1);
-    }
-    to {
-        transform: rotateY(360deg) scale(1);
-    }
+.hero-logo-header:hover .hero-logo-image {
+  transform: scale(1.12) rotate(12deg);
 }
 
-[data-theme="light"] .python-orbit {
-    border-color: rgba(22, 163, 74, 0.2);
+.hero-logo-text {
+  font-family: var(--font-sans);
+  font-size: clamp(2.4rem, 6vw, 4.2rem);
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  display: flex;
+  align-items: center;
+  line-height: 1;
 }
 
-[data-theme="light"] .python-logo {
-    filter: drop-shadow(0 4px 12px rgba(22, 163, 74, 0.3));
+.hero-logo-py {
+  color: var(--text-secondary);
+  font-weight: 500;
 }
 
-
-.hero-subtitle {
-    font-size: 1.05rem;
-    color: var(--text-secondary);
-    margin-bottom: 1rem;
-    animation: fadeInUp 0.7s ease 0.2s both;
-    font-weight: 500;
-    max-width: 560px;
+.hero-logo-mini {
+  color: var(--text);
+  background: linear-gradient(135deg, var(--text), var(--text-secondary));
+  -webkit-background-clip: text;
+  background-clip: text;
 }
 
-.hero-meta {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 0.5rem 1rem;
-    color: var(--text-secondary);
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 0.78rem;
-    margin-bottom: 5rem;
-    opacity: 0.82;
-    animation: fadeInUp 0.7s ease 0.3s both;
+.hero-logo-parens {
+  background: linear-gradient(135deg, var(--accent), #06b6d4);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-weight: 800;
 }
 
-.hero-meta span {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.45rem;
+[data-theme='light'] .hero-logo-py {
+  color: rgba(0, 0, 0, 0.45);
 }
 
-.hero-meta span::before {
-    content: '';
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-    background: var(--accent-color);
-    opacity: 0.72;
+[data-theme='light'] .hero-logo-mini {
+  color: #000;
 }
 
-[data-theme="light"] .hero-subtitle {
-    color: #14532d;
+/* ── Hero Badge Row (Glassified Kicker & Status Button) ──────── */
+.hero-kicker,
+.hero-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-radius: 999px;
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-secondary);
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(12px) saturate(1.4);
+  -webkit-backdrop-filter: blur(12px) saturate(1.4);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+  transition: transform var(--duration-fast) var(--ease-out-expo),
+              background var(--duration-fast) ease,
+              border-color var(--duration-fast) ease,
+              box-shadow var(--duration-fast) ease;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+[data-theme='light'] .hero-kicker,
+[data-theme='light'] .hero-status {
+  background: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.08);
+  color: var(--text);
+}
+
+.hero-kicker::before,
+.hero-status::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
+  transition: none;
+}
+
+.hero-kicker:hover,
+.hero-status:hover {
+  transform: translateY(-2px);
+  background: rgba(255, 255, 255, 0.15);
+  border-color: var(--accent);
+  box-shadow: 0 6px 20px var(--accent-glow);
+}
+
+[data-theme='light'] .hero-kicker:hover,
+[data-theme='light'] .hero-status:hover {
+  background: rgba(0, 0, 0, 0.07);
+  border-color: var(--accent);
+}
+
+.hero-kicker:hover::before,
+.hero-status:hover::before {
+  left: 100%;
+  transition: left 0.75s ease-in-out;
+}
+
+/* Dots Inside Hero Badges */
+.hero-kicker-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 8px var(--accent-glow);
+  animation: pulseKicker 2s ease-in-out infinite;
+}
+
+@keyframes pulseKicker {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(0.85);
+  }
 }
 
-.hero-features {
-    display: flex;
-    gap: 1.6rem;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    /* margin-bottom: 1.1rem; */
-    animation: fadeInUp 0.7s ease 0.4s both;
+.hero-status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #ef4444; /* Blinking Red Dot */
+  box-shadow: 0 0 10px rgba(239, 68, 68, 0.8), 0 0 20px rgba(239, 68, 68, 0.4);
+  animation: blinkRed 1.2s ease-in-out infinite;
 }
 
-.hero-content .btn-random-project {
-    animation: fadeInUp 0.7s ease 0.6s both;
+@keyframes blinkRed {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1.1);
+    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8), 0 0 20px rgba(239, 68, 68, 0.4);
+  }
+  50% {
+    opacity: 0.35;
+    transform: scale(0.85);
+    box-shadow: 0 0 4px rgba(239, 68, 68, 0.2);
+  }
 }
 
-/* ═══════════════════════════════════════
-   FEATURE BADGES (hero category tabs)
-═══════════════════════════════════════ */
-.feature-badge {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.38rem;
-    background: transparent;
-    padding: 0.25rem 0 0.35rem;
-    border: 0;
-    border-radius: 0;
-    transition: color 0.2s ease;
-    cursor: pointer;
-    font-size: 0.82rem;
-    font-family: 'IBM Plex Mono', monospace;
-    color: var(--text-secondary);
-    text-transform: lowercase;
+.hero-title-wrapper {
+  margin-bottom: 20px;
 }
 
-.feature-badge.active {
-    background: transparent;
-    border-color: transparent;
-    box-shadow: none;
-    color: var(--text-color);
+.hero-title {
+  font-family: var(--font-sans);
+  font-size: clamp(3rem, 8vw, 5.5rem);
+  font-weight: 800;
+  line-height: 1.05;
+  letter-spacing: -0.04em;
+  color: var(--text);
 }
 
-.feature-badge.active .feature-label {
-    color: var(--text-color);
+.hero-title-line {
+  display: block;
 }
 
-.feature-badge:hover {
-    transform: none;
-    box-shadow: none;
-    border-color: transparent;
-    color: var(--text-color);
+.hero-title-accent {
+  background: linear-gradient(135deg, var(--accent), #06b6d4);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
-.feature-badge::before {
-    content: '';
-    width: 5px;
-    height: 5px;
-    border-radius: 50%;
-    background: var(--border-color);
-    transition: background-color 0.2s ease, box-shadow 0.2s ease;
+.hero-subtitle {
+  font-size: clamp(1rem, 2vw, 1.15rem);
+  color: var(--text-secondary);
+  max-width: 560px;
+  margin: 0 auto 28px;
+  line-height: 1.7;
+}
+
+.hero-cta-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 32px;
+}
+
+.btn-primary-hero,
+.btn-contribution-hero {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 28px;
+  border-radius: 12px;
+  font-family: var(--font-sans);
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(12px) saturate(1.4);
+  -webkit-backdrop-filter: blur(12px) saturate(1.4);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  transition: transform var(--duration-fast) var(--ease-out-expo),
+              background var(--duration-fast) ease,
+              border-color var(--duration-fast) ease,
+              box-shadow var(--duration-fast) ease;
+  position: relative;
+  overflow: hidden;
+  text-decoration: none;
+}
+
+[data-theme='light'] .btn-primary-hero,
+[data-theme='light'] .btn-contribution-hero {
+  background: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.08);
+  color: var(--text);
+}
+
+.btn-primary-hero::before,
+.btn-contribution-hero::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
+  transition: none;
+}
+
+.btn-primary-hero:hover,
+.btn-contribution-hero:hover {
+  transform: translateY(-2px);
+  background: rgba(255, 255, 255, 0.15);
+  border-color: var(--accent);
+  box-shadow: 0 8px 30px var(--accent-glow);
+}
+
+[data-theme='light'] .btn-primary-hero:hover,
+[data-theme='light'] .btn-contribution-hero:hover {
+  background: rgba(0, 0, 0, 0.07);
+  border-color: var(--accent);
+}
+
+.btn-primary-hero:hover::before,
+.btn-contribution-hero:hover::before {
+  left: 100%;
+  transition: left 0.75s ease-in-out;
+}
+
+.btn-primary-hero:active,
+.btn-contribution-hero:active {
+  transform: translateY(0);
 }
 
-.feature-badge::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 1px;
-    background: var(--accent-color);
-    opacity: 0;
-    transform: scaleX(0.4);
-    transform-origin: left;
-    transition: opacity 0.2s ease, transform 0.2s ease;
+.btn-secondary-hero {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 24px;
+  border-radius: 12px;
+  font-family: var(--font-sans);
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text);
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  transition: all var(--duration-fast) ease;
 }
 
-.feature-badge:hover::after,
-.feature-badge.active::after {
-    opacity: 1;
-    transform: scaleX(1);
+.btn-secondary-hero:hover {
+  background: var(--bg-elevated);
+  border-color: var(--text-tertiary);
+  transform: translateY(-2px);
 }
 
-.feature-badge.active::before {
-    background: var(--accent-color);
-    box-shadow: 0 0 10px rgba(34, 197, 94, 0.55);
+/* ── Hero Meta ─────────────────────────────────────────────── */
+.hero-meta {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--text-secondary);
 }
 
-.feature-icon {
-    display: none;
+.hero-meta span {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.feature-label {
-    font-weight: 600;
-    color: currentColor;
+.hero-meta strong {
+  color: var(--text);
+  font-weight: 600;
 }
 
-.btn-explore {
-    background: linear-gradient(135deg, #6abf8d, #7fcfbd);
-    color: var(--on-accent);
-    border: none;
-    padding: 1rem 2.5rem;
-    font-size: 1.1rem;
-    font-weight: 700;
-    border-radius: 50px;
-    cursor: pointer;
-    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
-    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.1), 0 12px 30px rgba(34, 197, 94, 0.3);
-    animation: fadeInUp 0.7s ease 0.6s both;
-    display: inline-block;
-    position: relative;
-    top: 0;
+.hero-meta span::before {
+  content: '';
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--accent);
+  opacity: 0.6;
 }
 
-.btn-explore:hover {
-    transform: translateY(-6px);
-    box-shadow: 0 12px 0 rgba(0, 0, 0, 0.08), 0 20px 45px rgba(34, 197, 94, 0.4);
+/* ── Hero Timeline ─────────────────────────────────────────── */
+.hero-timeline-section {
+  position: relative;
+  padding: 80px 0;
+  overflow: hidden;
 }
 
-.btn-explore:active {
-    transform: translateY(4px);
-    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08), 0 6px 12px rgba(34, 197, 94, 0.2);
-    top: 2px;
-    filter: brightness(0.95);
+.timeline-container {
+  position: relative;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 24px;
 }
 
-.badge {
-    background: var(--surface-color);
-    padding: 0.5rem 1.5rem;
-    border-radius: 50px;
-    font-size: 1rem;
-    border: 1px solid var(--border-color);
-    transition: var(--transition);
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    white-space: nowrap;
-    box-shadow: 0 4px 18px var(--hero-green-glow);
-}
 
-.btn-random-project:hover {
-    background: linear-gradient(135deg, var(--hero-green-500), var(--hero-green-400));
-    border-color: var(--hero-green-400);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 28px rgba(74, 222, 128, 0.45);
+.timeline-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 80px;
+  position: relative;
+  z-index: 1;
 }
 
-.btn-random-project:active {
-    transform: translateY(0);
+.timeline-item {
+  display: grid;
+  grid-template-columns: 1fr 40px 1fr;
+  gap: 32px;
+  align-items: center;
+  opacity: 0;
+  transform: translateY(40px);
+  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
 }
 
-.btn-random-project i {
-    font-size: 1.1rem;
+.timeline-item.visible {
+  opacity: 1;
+  transform: translateY(0);
 }
 
-.btn-random-project.shuffle {
-    animation: shuffle 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+.timeline-item:nth-child(odd) .timeline-content {
+  grid-column: 1;
+  text-align: right;
 }
 
-/* ═══════════════════════════════════════
-   TABS SECTION (search + filter bar)
-═══════════════════════════════════════ */
-.tabs-section {
-    padding: 3rem 0 2rem;
-    background: var(--surface-color);
-    position: relative;
-    overflow: hidden;
+.timeline-item:nth-child(even) .timeline-content {
+  grid-column: 3;
+  text-align: left;
 }
 
-.tabs-section::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    right: -20%;
-    width: 400px;
-    height: 400px;
-    background: radial-gradient(circle, rgba(34, 197, 94, 0.05), transparent);
-    border-radius: 50%;
-    pointer-events: none;
-    animation: float 6s ease-in-out infinite;
+.timeline-node {
+  grid-column: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 2;
 }
 
-.tabs-section .container {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    position: relative;
-    z-index: 1;
+.timeline-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--bg);
+  border: 2px solid var(--text-tertiary);
+  transition: all var(--duration-base) var(--ease-out-expo);
+  position: relative;
 }
 
-/* ===== THEMED COMPONENTS ===== */
-.project-content,
-.ui-panel {
-    background: var(--surface-color);
-    border: 1px solid var(--border-color);
-    border-radius: 16px;
-    color: var(--text-color);
-    box-shadow: var(--shadow);
+.timeline-item.visible .timeline-dot {
+  border-color: var(--accent);
+  background: var(--accent);
+  box-shadow: 0 0 20px var(--accent-glow);
+  transform: scale(1.2);
 }
 
-.project-content {
-    padding: 1.5rem;
+.timeline-item.active .timeline-dot {
+  transform: scale(1.6);
+  box-shadow: 0 0 30px var(--accent-glow), 0 0 60px rgba(34, 197, 94, 0.15);
 }
 
-.ui-subpanel {
-    background: var(--panel-color);
-    border: 1px solid var(--border-color);
-    border-radius: 12px;
-    color: var(--text-color);
+.timeline-dot::after {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  border-radius: 50%;
+  border: 2px solid var(--accent);
+  opacity: 0;
+  transform: scale(0.8);
+  transition: all 0.6s var(--ease-out-expo);
 }
 
-.ui-stat,
-.score-box,
-.score-card {
-    background: var(--accent-soft);
-    border: 1px solid var(--accent-border);
-    border-radius: 10px;
-    color: var(--text-color);
+.timeline-item.active .timeline-dot::after {
+  opacity: 1;
+  transform: scale(1);
+  animation: timelinePulse 2s ease-in-out infinite;
 }
 
-.ui-button,
-.game-btn,
-.control-btn,
-.btn-primary {
-    background: var(--accent-color);
-    border: 1px solid var(--accent-color);
-    border-radius: 10px;
-    color: var(--on-accent);
-    cursor: pointer;
-    font-family: inherit;
-    font-weight: 700;
-    transition: var(--transition);
+@keyframes timelinePulse {
+  0%, 100% { transform: scale(1); opacity: 0.6; }
+  50% { transform: scale(1.5); opacity: 0; }
 }
 
-.ui-button:hover,
-.game-btn:hover,
-.control-btn:hover,
-.btn-primary:hover {
-    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.28);
-    transform: translateY(-2px);
+.timeline-item.active .timeline-content {
+  border-color: var(--accent);
+  box-shadow: 0 0 30px var(--accent-glow), var(--shadow-lg);
+  transform: translateY(-4px) scale(1.02);
+  background: var(--surface-hover);
 }
 
-.ui-input {
-    background: var(--control-color);
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    color: var(--text-color);
-    font-family: inherit;
+.timeline-item.active .timeline-title {
+  background: linear-gradient(135deg, var(--accent), #22c55e);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
-.ui-canvas-frame {
-    background: var(--panel-color);
-    border: 2px solid var(--accent-border);
-    border-radius: 12px;
-    box-shadow: var(--shadow);
+.timeline-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 24px;
+  border-radius: 16px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  backdrop-filter: blur(12px);
+  transition: all var(--duration-base) ease;
 }
 
-/* ===== MODERN SEARCH BAR ===== */
-.search-section {
-    position: relative;
-    margin-bottom: 2rem;
+.timeline-item:nth-child(odd) .timeline-content {
+  flex-direction: row-reverse;
 }
 
-.search-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    max-width: 600px;
-    margin: 0 auto;
-    width: 100%;
-    height: 56px;
-
-    /* Glassmorphism: Blur effect with fallback */
-    background: color-mix(in srgb, var(--control-color) 88%, transparent);
-    backdrop-filter: blur(20px) saturate(180%);
-    -webkit-backdrop-filter: blur(20px) saturate(180%);
-
-    /* Styling - More prominent border and glow */
-    border: 2px solid var(--accent-border);
-    border-radius: 50px;
-    padding: 0 1.5rem;
-
-    /* Shadows and glow - More visible */
-    box-shadow:
-        inset 0 1px 2px 0 color-mix(in srgb, var(--surface-color) 70%, transparent),
-        0 10px 30px -14px rgba(99, 102, 241, 0.45);
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.search-wrapper:hover {
-    border-color: var(--accent-color);
-    background: var(--control-color);
-    box-shadow:
-        0 12px 34px -16px rgba(99, 102, 241, 0.5);
-}
-
-.search-wrapper:focus-within {
-    border-color: var(--accent-color);
-    background: var(--control-color);
-    box-shadow:
-        0 0 0 3px var(--accent-soft),
-        0 20px 46px -24px rgba(99, 102, 241, 0.6);
-    animation: searchGlow 3s ease-in-out infinite;
-}
-
-@keyframes searchGlow {
-
-    0%,
-    100% {
-        box-shadow:
-            inset 0 1px 3px 0 rgba(99, 102, 241, 0.15),
-            inset 0 -1px 2px 0 rgba(0, 0, 0, 0.5),
-            0 0 0 2px rgba(99, 102, 241, 0.4),
-            0 20px 60px -10px rgba(99, 102, 241, 0.5),
-            0 0 50px -5px rgba(99, 102, 241, 0.35);
-    }
-
-    50% {
-        box-shadow:
-            inset 0 1px 3px 0 rgba(139, 92, 246, 0.2),
-            inset 0 -1px 2px 0 rgba(0, 0, 0, 0.5),
-            0 0 0 2px rgba(139, 92, 246, 0.5),
-            0 25px 70px -10px rgba(99, 102, 241, 0.6),
-            0 0 60px -5px rgba(139, 92, 246, 0.4);
-    }
-}
-
-.search-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 0.75rem;
-    color: var(--accent-color);
-    flex-shrink: 0;
+.timeline-item:nth-child(even) .timeline-content {
+  flex-direction: row;
 }
 
-.search-icon {
-    font-size: 1.2rem;
-    transition: all 0.3s ease;
+.timeline-icon {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  color: var(--accent);
+  transition: transform var(--duration-base) var(--ease-out-expo);
 }
 
-.search-wrapper:focus-within .search-icon {
-    color: var(--accent-color);
-    transform: scale(1.1);
+.timeline-item:nth-child(odd) .timeline-text {
+  padding-right: 12px;
+  border-right: 2px solid var(--accent);
+  border-right-color: rgba(34, 197, 94, 0.5);
 }
 
-.search-input {
-    flex: 1;
-    background: transparent;
-    border: none;
-    color: var(--text-color);
-    font-size: 1.05rem;
-    font-weight: 500;
-    outline: none;
-    padding: 0.8rem 0.5rem;
-    font-family: inherit;
-    min-width: 0;
-    height: 100%;
+.timeline-item:nth-child(even) .timeline-text {
+  padding-left: 12px;
+  border-left: 2px solid var(--accent);
+  border-left-color: rgba(34, 197, 94, 0.5);
 }
 
-.search-input::placeholder {
-    color: var(--text-secondary);
-    font-weight: 400;
+.timeline-item.active .timeline-icon {
+  transform: scale(1.2);
 }
 
-.search-input:-webkit-autofill,
-.search-input:-webkit-autofill:hover,
-.search-input:-webkit-autofill:focus,
-.search-input:-webkit-autofill:active {
-    -webkit-box-shadow: 0 0 0 1000px transparent inset;
-    -webkit-text-fill-color: var(--text-color);
+.timeline-text {
+  flex: 1;
 }
 
-.search-shortcut {
-    display: flex;
-    align-items: center;
-    margin-left: 0.5rem;
-    opacity: 0.7;
-    transition: all 0.3s ease;
-    font-size: 0.8rem;
-    white-space: nowrap;
+.timeline-item:nth-child(odd) .timeline-text {
+  text-align: right;
 }
 
-.search-wrapper:focus-within .search-shortcut {
-    opacity: 0;
-    display: none;
+.timeline-item:nth-child(even) .timeline-text {
+  text-align: left;
 }
 
-.search-shortcut kbd {
-    background: var(--accent-soft);
-    border: 1px solid var(--accent-border);
-    border-radius: 6px;
-    padding: 0.35rem 0.6rem;
-    font-family: 'Courier New', monospace;
-    font-size: 0.8rem;
-    font-weight: 600;
-    color: var(--accent-color);
-    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
+.timeline-item.visible .timeline-content {
+  border-color: var(--border-accent);
+  box-shadow: var(--shadow-md);
 }
 
-.search-loader {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 0.5rem;
-    flex-shrink: 0;
+.timeline-step {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--accent);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: 6px;
+  display: block;
 }
 
-.spinner {
-    width: 18px;
-    height: 18px;
-    border: 2.5px solid rgba(99, 102, 241, 0.2);
-    border-top-color: rgba(99, 102, 241, 0.9);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
+.timeline-title {
+  font-family: var(--font-sans);
+  font-size: 1.15rem;
+  font-weight: 700;
+  margin-bottom: 6px;
+  letter-spacing: -0.02em;
 }
 
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.search-clear-btn {
-    background: none;
-    border: none;
-    color: rgba(99, 102, 241, 0.7);
-    cursor: pointer;
-    font-size: 1.2rem;
-    padding: 0.4rem 0.6rem;
-    margin-left: 0.25rem;
-    transition: all 0.2s ease;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    flex-shrink: 0;
+.timeline-desc {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+/* ── Timeline Route Badge ────────────────────────────────── */
+.timeline-route-badge {
+  position: absolute;
+  top: -55px; /* Offset upward to sit beautifully above the first timeline grid row */
+  right: 24px;
+  font-family: var(--font-sans);
+  font-size: clamp(1.5rem, 4vw, 2.75rem); /* Mathematically half of the hero title clamp(3rem, 8vw, 5.5rem) */
+  font-weight: 800;
+  line-height: 1.05;
+  letter-spacing: -0.04em;
+  background: linear-gradient(135deg, var(--accent), #06b6d4);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  z-index: 10;
+  pointer-events: none;
+  text-transform: uppercase;
+}
+
+.timeline-route-badge::after {
+  content: '';
+  position: absolute;
+  bottom: -6px; /* Position beneath the text */
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background: var(--accent);
+  box-shadow: 0 0 10px var(--accent-glow);
+  border-radius: 2px;
+}
+
+/* ── Timeline Section Background Grid & Orbs (Matching Hero) ── */
+.timeline-background {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.timeline-background::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(to right, var(--border) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
+  background-size: 48px 48px;
+  opacity: 0.3;
+  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
+  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
+}
+
+.timeline-background::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 800px;
+  height: 800px;
+  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 60%);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.timeline-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.25;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.timeline-orb-one {
+  width: 400px;
+  height: 400px;
+  right: -100px;
+  top: 20%;
+  background: radial-gradient(circle, rgba(34, 197, 94, 0.25), transparent 70%);
+  animation: orbFloat 20s ease-in-out infinite;
+}
+
+.timeline-orb-two {
+  width: 450px;
+  height: 450px;
+  left: -150px;
+  bottom: 15%;
+  background: radial-gradient(circle, rgba(6, 182, 212, 0.15), transparent 70%);
+  animation: orbFloat 25s ease-in-out infinite reverse;
+}
+
+
+
+
+/* ── Dynamic Timeline SVG Track ──────────────────────────── */
+.timeline-svg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 2; /* Sits over the background overlays but behind content */
+}
+
+.timeline-svg-track {
+  stroke: var(--border);
+  stroke-width: 6px;
+  stroke-linecap: round;
+  stroke-dasharray: 0 16;
+  opacity: 0.8;
+  transition: stroke var(--duration-base) ease;
+}
+
+.timeline-svg-fill {
+  stroke: var(--accent);
+  stroke-width: 6px;
+  stroke-linecap: round;
+  stroke-dasharray: 0 16;
+  transition: stroke var(--duration-base) ease;
+  filter: drop-shadow(0 0 8px var(--accent));
+}
+
+/* Ensure timeline grid elements overlap properly */
+.timeline-grid {
+  position: relative;
+  z-index: 3; /* Above timeline SVG */
 }
 
-.search-clear-btn:hover {
-    background: rgba(99, 102, 241, 0.15);
-    color: rgba(99, 102, 241, 1);
-    transform: rotate(90deg) scale(1.1);
+.timeline-item {
+  position: relative;
+  z-index: 4; /* Card layering above grid root */
 }
 
-.search-clear-btn:focus {
-    outline: 2px solid rgba(99, 102, 241, 0.6);
-    outline-offset: 2px;
+.timeline-node {
+  position: relative;
+  z-index: 5; /* Step nodes sit on top of everything */
 }
 
-.search-clear-btn:active {
-    transform: rotate(90deg) scale(0.95);
-}
 
-/* ===== AUTOCOMPLETE DROPDOWN ===== */
-.search-dropdown {
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    width: calc(100% + 4rem);
-    max-width: 600px;
-    margin-top: 0.75rem;
-    background: color-mix(in srgb, var(--surface-color) 94%, transparent);
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
-    border: 2px solid var(--accent-border);
-    border-radius: 20px;
-    box-shadow:
-        var(--shadow-modal),
-        0 0 36px rgba(99, 102, 241, 0.08);
-    z-index: 1000;
-    animation: dropdownSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-@keyframes dropdownSlideIn {
-    from {
-        opacity: 0;
-        transform: translateX(-50%) translateY(-10px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateX(-50%) translateY(0);
-    }
+/* ═══════════════════════════════════════════════════════════════
+   FILTER SIDEBAR
+   ═══════════════════════════════════════════════════════════════ */
+.filter-sidebar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  margin: 0 auto 48px;
+  max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
-.dropdown-content {
-    max-height: 400px;
-    overflow-y: auto;
-    padding: 0;
+.filter-sidebar::-webkit-scrollbar {
+  display: none;
 }
 
-.dropdown-section {
-    padding: 0.75rem 0;
-    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
+.sidebar-header,
+.sidebar-divider,
+.sidebar-random-btn,
+.sidebar-badge {
+  display: none;
 }
 
-.dropdown-section:last-child {
-    border-bottom: none;
+.sidebar-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: 10px;
+  font-family: var(--font-sans);
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  transition: all var(--duration-fast) ease;
+  cursor: pointer;
 }
 
-.dropdown-section-title {
-    padding: 0.5rem 1.5rem;
-    font-size: 0.8rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--text-secondary);
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    opacity: 0.7;
+.sidebar-tab:hover {
+  color: var(--text);
+  background: var(--tab-color-soft-hover);
+  border-color: rgba(255, 255, 255, 0.03);
 }
 
-.dropdown-section-title i {
-    font-size: 0.75rem;
+[data-theme='light'] .sidebar-tab:hover {
+  background: rgba(0, 0, 0, 0.015);
+  border-color: rgba(0, 0, 0, 0.02);
 }
 
-.dropdown-list {
-    display: flex;
-    flex-direction: column;
+.sidebar-tab.active {
+  color: var(--text);
+  background: var(--tab-color-soft);
+  border-color: var(--tab-color-glow);
+  box-shadow: 0 0 12px var(--tab-color-glow);
 }
 
-.dropdown-item {
-    padding: 0.75rem 1.5rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    color: var(--text-secondary);
-    border-left: 3px solid transparent;
+.sidebar-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  color: var(--text-tertiary);
+  transition: all var(--duration-fast) ease;
 }
 
-.dropdown-item:hover,
-.dropdown-item.selected {
-    background: rgba(34, 197, 94, 0.08);
-    color: var(--accent-color);
-    border-left-color: var(--accent-color);
+.sidebar-tab:hover .sidebar-icon,
+.sidebar-tab.active .sidebar-icon {
+  color: var(--tab-color);
 }
 
-.dropdown-item:active {
-    background: rgba(34, 197, 94, 0.15);
+.sidebar-icon svg {
+  width: 16px;
+  height: 16px;
+  stroke-width: 2;
 }
 
-.dropdown-item-icon {
-    font-size: 0.9rem;
-    opacity: 0.7;
+.sidebar-label {
+  flex-shrink: 0;
 }
 
-.dropdown-item-text {
-    flex: 1;
-    font-weight: 500;
+/* ═══════════════════════════════════════════════════════════════
+   PROJECTS SECTION — Bento Grid
+   ═══════════════════════════════════════════════════════════════ */
+.projects-section {
+  padding: 40px 0 80px;
+  position: relative;
+  z-index: 1;
 }
 
-.dropdown-item-tag {
-    display: inline-block;
-    background: rgba(34, 197, 94, 0.1);
-    color: var(--accent-color);
-    padding: 0.15rem 0.5rem;
-    border-radius: 4px;
-    font-size: 0.75rem;
-    font-weight: 600;
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 40px;
+  gap: 16px;
+  flex-wrap: wrap;
 }
 
-.dropdown-recent-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 1.5rem;
+.section-heading {
+  font-family: var(--font-sans);
+  font-size: clamp(1.5rem, 3vw, 2rem);
+  font-weight: 700;
+  letter-spacing: -0.03em;
 }
 
-.dropdown-recent-text {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    flex: 1;
+.section-heading span {
+  color: var(--text-secondary);
+  font-weight: 400;
 }
 
-.dropdown-recent-remove {
-    background: none;
-    border: none;
-    color: var(--text-secondary);
-    cursor: pointer;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-    padding: 0.25rem;
-    font-size: 0.9rem;
+.btn-random-project {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  border-radius: 10px;
+  font-family: var(--font-sans);
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text);
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  transition: all var(--duration-fast) ease;
+  white-space: nowrap;
 }
 
-.dropdown-recent-item:hover .dropdown-recent-remove {
-    opacity: 1;
-    color: var(--danger-color);
+.btn-random-project:hover {
+  background: var(--accent-soft);
+  border-color: var(--border-accent);
+  color: var(--accent);
+  transform: translateY(-1px);
 }
 
-.dropdown-tips {
-    padding: 1rem 1.5rem;
-    font-size: 0.85rem;
-    color: var(--text-secondary);
+.btn-random-project.shuffle i {
+  animation: spin 0.4s ease;
 }
 
-.dropdown-tips p {
-    margin: 0 0 0.5rem 0;
-    font-weight: 600;
-    color: var(--text-color);
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 
-.dropdown-tips ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+/* ── Bento Grid ────────────────────────────────────────────── */
+.projects-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
 }
 
-.dropdown-tips li {
-    padding: 0.25rem 0;
-    opacity: 0.8;
+/* Project Card */
+.project-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  border-radius: 20px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: transform var(--duration-base) var(--ease-out-expo),
+              border-color var(--duration-fast) ease,
+              box-shadow var(--duration-base) ease,
+              background var(--duration-fast) ease;
+  overflow: hidden;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
-.dropdown-tips code {
-    background: rgba(34, 197, 94, 0.1);
-    color: var(--accent-color);
-    padding: 0.1rem 0.3rem;
-    border-radius: 3px;
-    font-family: 'Monaco', 'Courier New', monospace;
-    font-size: 0.8rem;
-    font-weight: 600;
+.project-card:hover {
+  transform: translateY(-4px);
+  border-color: var(--border-accent);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
+  background: var(--surface-hover);
 }
 
-.dropdown-content::-webkit-scrollbar {
-    width: 6px;
+[data-theme='light'] .project-card:hover {
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
 }
 
-.dropdown-content::-webkit-scrollbar-track {
-    background: transparent;
+.project-card:active {
+  transform: translateY(-1px);
 }
 
-.dropdown-content::-webkit-scrollbar-thumb {
-    background: rgba(99, 102, 241, 0.3);
-    border-radius: 3px;
+/* ── Card Banner ──────────────────────────────────────────── */
+.card-banner {
+  width: calc(100% + 48px);
+  max-width: none;
+  margin: -24px -24px 16px;
+  height: 160px;
+  object-fit: cover;
+  display: block;
+  border-radius: 20px 20px 0 0;
+  flex-shrink: 0;
+  transition: transform 0.4s var(--ease-out-expo), filter 0.4s ease;
+  will-change: transform;
+  background: var(--bg-glass);
+}
+
+.project-card:hover .card-banner {
+  transform: scale(1.03);
+  filter: brightness(1.08) saturate(1.05);
+}
+
+.project-card .card-banner + .card-category {
+  margin-top: 0;
+}
+
+/* Gradient overlay on banner for depth */
+.card-banner-wrap {
+  position: relative;
+  width: calc(100% + 48px);
+  margin: -24px -24px 0;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.card-banner-wrap .card-banner {
+  width: 100%;
+  margin: 0;
+  height: 160px;
+  border-radius: 0;
+}
+
+.card-banner-wrap::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, transparent 50%, var(--surface) 100%);
+  pointer-events: none;
+}
+
+/* Banner-less cards get a subtle gradient header */
+.card-gradient-head {
+  width: calc(100% + 48px);
+  margin: -24px -24px 16px;
+  height: 80px;
+  border-radius: 20px 20px 0 0;
+  flex-shrink: 0;
+  background: linear-gradient(135deg, var(--accent-soft), transparent 60%);
+  opacity: 0.5;
+}
+
+/* Card glow border that tracks cursor */
+.project-card::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: 20px;
+  background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--accent-glow), transparent 40%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.project-card:hover::before {
+  opacity: 1;
+}
+
+.project-card > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* Card Layout */
+.card-category {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  width: fit-content;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--accent);
+  background: var(--accent-soft);
+  border: 1px solid var(--border-accent);
+  margin-bottom: 12px;
+}
+
+.card-banner + .card-category,
+.card-banner-wrap + .card-category {
+  margin-top: 0;
 }
 
-.dropdown-content::-webkit-scrollbar-thumb:hover {
-    background: rgba(99, 102, 241, 0.5);
+.card-category .cat-icon {
+  width: 12px;
+  height: 12px;
 }
 
-/* ===== EMPTY STATE ===== */
-.empty-state {
-    padding: 3rem 2rem;
-    text-align: center;
-    background: rgba(99, 102, 241, 0.05);
-    border: 2px dashed rgba(99, 102, 241, 0.2);
-    border-radius: 20px;
-    margin-top: 2rem;
-    animation: fadeIn 0.4s ease;
+.card-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
 }
 
-.empty-state p {
-    margin: 0.5rem 0;
-    color: var(--text-secondary);
+.btn-play {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 8px;
+  font-family: var(--font-sans);
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--text);
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  transition: all var(--duration-fast) ease;
 }
 
-.empty-state p:first-child {
-    font-size: 1.5rem;
-    color: var(--text-color);
-    font-weight: 600;
-    margin-bottom: 0.5rem;
+.btn-play:hover {
+  background: var(--accent-soft);
+  border-color: var(--border-accent);
+  color: var(--accent);
+  transform: scale(1.02);
 }
 
-.empty-state-hint {
-    font-size: 0.9rem !important;
-    color: var(--text-secondary) !important;
-    opacity: 0.8;
+.btn-favorite,
+.btn-share {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  font-size: 0.8rem;
+  color: var(--text-tertiary);
+  background: transparent;
+  border: 1px solid transparent;
+  transition: all var(--duration-fast) ease;
+  flex-shrink: 0;
+}
+
+.btn-favorite:hover,
+.btn-share:hover {
+  background: var(--bg-glass);
+  border-color: var(--border);
+  color: var(--text-secondary);
+  transform: scale(1.1);
 }
 
-.tabs {
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
-    flex-wrap: wrap;
-    margin-top: 1.5rem;
+.btn-favorite.active {
+  color: var(--warning);
 }
 
-.search-container {
-    max-width: 600px;
-    margin: 0 auto;
+.btn-share svg {
+  width: 13px;
+  height: 13px;
 }
-.no-results {
-    text-align: center;
-    padding: 4rem 2rem;
-    animation: fadeIn 0.6s ease;
+
+.project-card h3 {
+  font-family: var(--font-sans);
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin-bottom: 6px;
+  line-height: 1.3;
 }
 
-.no-results-icon {
-    font-size: 4rem;
-    margin-bottom: 1rem;
-    opacity: 0.5;
+.project-card p {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin-bottom: 0;
+  flex: 1;
 }
 
-.no-results h3 {
-    font-size: 1.5rem;
-    margin-bottom: 0.5rem;
+.card-metrics {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: var(--text-tertiary);
 }
 
-.no-results p {
-    color: var(--text-secondary);
+.card-metrics span {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }
 
-.tab {
-    background: transparent;
-    border: 1px solid var(--border-color);
-    color: var(--text-color);
-    padding: 0.75rem 1.5rem;
-    border-radius: 50px;
-    cursor: pointer;
-    font-size: 1rem;
-    transition: var(--transition);
+.project-card-badge {
+  display: none;
 }
 
-.tab:hover {
-    border-color: var(--accent-color);
-    transform: translateY(-2px);
+.project-card-meta {
+  display: none;
 }
 
-.tab.active {
-    background: var(--accent-color);
-    border-color: var(--accent-color);
-    color: var(--on-accent);
-    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
+/* ── Bento Grid Sizing ─────────────────────────────────────── */
+.project-card[data-category='games'] {
+  grid-column: span 1;
 }
 
-.tab:active {
-    transform: scale(0.98);
+.project-card[data-category='math'] {
+  grid-column: span 1;
 }
 
-.hero-features .feature-badge,
-.hero-features .feature-badge.tab {
-    background: transparent;
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
-    color: var(--text-secondary);
-    padding: 0.15rem 0 0.35rem;
-    transform: none;
+.project-card[data-category='utilities'] {
+  grid-column: span 1;
 }
 
-.hero-features .feature-badge.active,
-.hero-features .feature-badge.tab.active {
-    background: transparent;
-    border-color: transparent;
-    box-shadow: none;
-    color: var(--text-color);
+/* ── Search Dropdown ───────────────────────────────────────── */
+.search-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  right: 0;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: var(--shadow-lg);
+  z-index: 100;
+  display: none;
+  overflow: hidden;
+  backdrop-filter: blur(20px);
+}
+
+.search-dropdown.active {
+  display: block;
+  animation: dropdownIn 0.2s var(--ease-out-expo);
+}
+
+@keyframes dropdownIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.hero-features .feature-badge:hover {
-    color: var(--text-color);
-    transform: none;
+.dropdown-content {
+  max-height: 360px;
+  overflow-y: auto;
 }
 
-/* Tabs Wrapper */
-.tabs-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 2rem;
-    flex-wrap: wrap;
+.dropdown-section {
+  padding: 8px 0;
 }
 
-.tabs-wrapper .tabs {
-    flex: 1;
-    min-width: 300px;
+.dropdown-section-title {
+  padding: 8px 16px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-tertiary);
 }
 
-/* Random Project Button */
-.btn-random-project {
-    background: transparent;
-    border: none;
-    color: var(--accent-color);
-    padding: 0.25rem 0;
-    border-radius: 0;
-    cursor: pointer;
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 0.84rem;
-    font-weight: 700;
-    letter-spacing: 0.01em;
-    transition: color 0.2s ease, transform 0.2s ease;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    white-space: nowrap;
-    box-shadow: none;
+.dropdown-list {
+  display: flex;
+  flex-direction: column;
 }
 
-.btn-random-project:hover {
-    background: transparent;
-    border-color: transparent;
-    color: var(--text-color);
-    transform: translateX(3px);
-    box-shadow: none;
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  cursor: pointer;
+  transition: background var(--duration-fast) ease;
+  color: var(--text-secondary);
 }
 
 .dropdown-item:hover,
 .dropdown-item.selected {
-    background: rgba(34, 197, 94, 0.12);
-    color: var(--primary-color);
-    border-left-color: var(--primary-color);
+  background: var(--accent-soft);
+  color: var(--text);
 }
 
-.dropdown-item:active {
-    background: rgba(34, 197, 94, 0.22);
+.dropdown-item-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  overflow: hidden;
+  flex-shrink: 0;
 }
 
-.dropdown-item-icon {
-    font-size: 0.9rem;
-    opacity: 0.7;
+.dropdown-item-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .dropdown-item-text {
-    flex: 1;
-    font-weight: 500;
+  flex: 1;
+  font-size: 0.85rem;
+  font-weight: 500;
 }
 
 .dropdown-item-tag {
-    display: inline-block;
-    background: rgba(34, 197, 94, 0.18);
-    color: var(--primary-color);
-    padding: 0.15rem 0.5rem;
-    border-radius: 4px;
-    font-size: 0.75rem;
-    font-weight: 600;
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--accent);
+  background: var(--accent-soft);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.recent-searches-section,
+.tips-section,
+.no-results-message {
+  padding: 16px;
 }
 
 .dropdown-recent-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
 }
 
 .dropdown-recent-text {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  cursor: pointer;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+}
+
+.dropdown-recent-text:hover {
+  color: var(--text);
 }
 
 .dropdown-recent-remove {
-    background: none;
-    border: none;
-    color: var(--text-secondary);
-    cursor: pointer;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-    padding: 0.25rem;
-    font-size: 0.9rem;
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  padding: 4px;
+  font-size: 0.8rem;
+  opacity: 0;
+  transition: opacity var(--duration-fast) ease;
 }
 
 .dropdown-recent-item:hover .dropdown-recent-remove {
-    opacity: 1;
-    color: var(--danger-color);
+  opacity: 1;
 }
 
-.dropdown-tips {
-    padding: 1rem 1.5rem;
-    font-size: 0.85rem;
-    color: var(--text-secondary);
+.tips-section p {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
 }
 
-.dropdown-tips p {
-    margin: 0 0 0.5rem;
-    font-weight: 600;
-    color: var(--text-color);
+.tips-section ul {
+  list-style: none;
+  padding: 0;
 }
 
-.dropdown-tips ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+.tips-section li {
+  padding: 4px 0;
+  font-size: 0.8rem;
+  color: var(--text-tertiary);
 }
 
-.dropdown-tips li {
-    padding: 0.25rem 0;
-    opacity: 0.8;
+.tips-section code {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--accent);
+  background: var(--accent-soft);
+  padding: 1px 6px;
+  border-radius: 4px;
 }
 
-.dropdown-tips code {
-    background: rgba(34, 197, 94, 0.12);
-    color: var(--primary-color);
-    padding: 0.1rem 0.3rem;
-    border-radius: 3px;
-    font-family: 'Monaco', 'Courier New', monospace;
-    font-size: 0.8rem;
-    font-weight: 600;
+.no-results-message {
+  text-align: center;
+  padding: 24px 16px;
+  color: var(--text-tertiary);
+  font-size: 0.9rem;
 }
 
-.dropdown-content::-webkit-scrollbar {
-    width: 6px;
+/* Search loader */
+.search-loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
 }
 
-.dropdown-content::-webkit-scrollbar-track {
-    background: transparent;
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
 }
 
-.dropdown-content::-webkit-scrollbar-thumb {
-    background: rgba(34, 197, 94, 0.3);
-    border-radius: 3px;
+/* ── Empty State ───────────────────────────────────────────── */
+.empty-state {
+  text-align: center;
+  padding: 60px 24px;
+  grid-column: 1 / -1;
 }
 
-.dropdown-content::-webkit-scrollbar-thumb:hover {
-    background: rgba(34, 197, 94, 0.5);
+.empty-state-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--text);
 }
 
-/* ═══════════════════════════════════════
-   EMPTY / NO-RESULTS STATES
-═══════════════════════════════════════ */
-.empty-state {
-    padding: 3rem 2rem;
-    text-align: center;
-    background: rgba(34, 197, 94, 0.04);
-    border: 2px dashed rgba(34, 197, 94, 0.18);
-    border-radius: 20px;
-    margin-top: 2rem;
-    animation: fadeIn 0.4s ease;
+.empty-state-hint {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
 }
 
-.empty-state p {
-    margin: 0.5rem 0;
-    color: var(--text-secondary);
+/* ═══════════════════════════════════════════════════════════════
+   STICKY FILTER BAR
+   ═══════════════════════════════════════════════════════════════ */
+.sticky-filter-bar {
+  position: fixed;
+  top: calc(var(--nav-height) + 24px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 999;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-base) ease, transform var(--duration-base) ease;
+  width: calc(100% - 32px);
+  max-width: 600px;
 }
 
-.empty-state p:first-child {
-    font-size: 1.5rem;
-    color: var(--text-color);
-    font-weight: 600;
-    margin-bottom: 0.5rem;
+.sticky-filter-bar.visible {
+  opacity: 1;
+  pointer-events: auto;
 }
 
-.empty-state-hint {
-    font-size: 0.9rem !important;
-    opacity: 0.8;
+.sticky-filter-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 6px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  backdrop-filter: blur(20px);
+  overflow-x: auto;
+  scrollbar-width: none;
 }
 
-.no-results {
-    text-align: center;
-    padding: 4rem 2rem;
-    animation: fadeIn 0.6s ease;
+.sticky-filter-inner::-webkit-scrollbar {
+  display: none;
 }
 
-.no-results-icon {
-    font-size: 4rem;
-    margin-bottom: 1rem;
-    opacity: 0.5;
+.sticky-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: 10px;
+  font-family: var(--font-sans);
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: transparent;
+  border: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all var(--duration-fast) ease;
 }
 
-.no-results h3 {
-    font-size: 1.5rem;
-    margin-bottom: 0.5rem;
+.sticky-tab:hover {
+  color: var(--text);
+  background: var(--bg-glass);
 }
 
-.no-results p {
-    color: var(--text-secondary);
+.sticky-tab.active {
+  color: var(--text);
+  background: var(--accent-soft);
+  border: 1px solid var(--border-accent);
 }
 
-/* ═══════════════════════════════════════
-   PROJECT CARDS - IMPROVED VISIBILITY
-═══════════════════════════════════════ */
-.projects-section {
-    padding: 4rem 0;
+.sticky-tab svg {
+  width: 14px;
+  height: 14px;
 }
 
-.faq-section {
-    padding: 4rem 0;
+/* ═══════════════════════════════════════════════════════════════
+   PLAYGROUND SECTION
+   ═══════════════════════════════════════════════════════════════ */
+.playground-section {
+  padding: 40px 0 80px;
+  position: relative;
+  z-index: 1;
 }
 
-/* Main card style – solid background, clear borders */
-.project-card {
-    position: relative;
-    overflow: hidden;
-    padding: 1.75rem 1.5rem 1.5rem;
-    display: flex;
-    flex-direction: column;
-    border-radius: 28px;
-    background: var(--surface-color);
-    border: 3px solid var(--accent-border);
-    box-shadow: 0 8px 0 rgba(106, 191, 141, 0.18), var(--shadow);
-    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
+.playground-header {
+  text-align: center;
+  margin-bottom: 32px;
 }
 
-.project-card:hover {
-    transform: translateY(-8px) scale(1.02);
-    border-color: var(--accent-color);
-    box-shadow: 0 12px 0 rgba(106, 191, 141, 0.15), 0 24px 40px rgba(0, 0, 0, 0.12);
+.playground-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
 }
 
-.project-card:active {
-    transform: translateY(-2px) scale(0.98);
-    box-shadow: 0 4px 0 rgba(106, 191, 141, 0.1), 0 8px 20px rgba(0, 0, 0, 0.08);
+.playground-title {
+  font-family: var(--font-sans);
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  background: linear-gradient(135deg, var(--accent), #06b6d4);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
-/* Light mode specific card background */
-[data-theme="light"] .project-card {
-    background: #ffffff;
-    border-color: rgba(106, 191, 141, 0.4);
+.playground-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
 }
 
-[data-theme="dark"] .project-card {
-    background: #1e1a18;
-    border-color: rgba(159, 221, 181, 0.3);
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-tertiary);
+  flex-shrink: 0;
+  transition: background var(--duration-fast) ease;
 }
 
-/* Prominent button styling */
-.btn-play {
-    background: var(--accent-color);
-    color: var(--on-accent);
-    border: none;
-    padding: 0.7rem 1.4rem;
-    border-radius: 40px;
-    font-weight: 700;
-    font-size: 0.9rem;
-    cursor: pointer;
-    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, background 0.15s ease;
-    margin-top: 0.75rem;
-    width: fit-content;
-    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.1);
-    position: relative;
-    top: 0;
+.status-dot.loading {
+  background: var(--warning);
+  animation: pulse 1s ease-in-out infinite;
 }
 
-.btn-play:hover {
-    transform: translateY(-4px);
-    background: var(--accent-color);
-    filter: brightness(1.1);
-    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1), 0 12px 28px rgba(106, 191, 141, 0.35);
+.status-dot.ready {
+  background: var(--success);
 }
 
-.btn-play:active {
-    transform: translateY(4px);
-    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);
-    top: 2px;
-    filter: brightness(0.95);
+.status-dot.error {
+  background: var(--danger);
 }
 
-.faq-trigger:hover,
-.faq-trigger:focus-visible {
-    background: rgba(99, 102, 241, 0.08);
-    outline: none;
+.playground-subtitle {
+  font-size: 0.95rem;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
 }
 
-.faq-trigger:focus-visible {
-    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
+.playground-subtitle a {
+  color: var(--accent);
+  font-weight: 500;
 }
 
-.faq-label {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.85rem;
+.playground-hint {
+  font-size: 0.8rem;
+  color: var(--text-tertiary);
 }
 
-.faq-label i {
-    color: var(--primary-color);
-    min-width: 1.25rem;
-    font-size: 1.05rem;
+.playground-hint kbd {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
 }
 
-.faq-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    transition: transform 0.25s ease;
-}
-
-.faq-card.open .faq-icon {
-    transform: rotate(180deg);
-}
-
-.faq-panel {
-    max-height: 0;
-    overflow: hidden;
-    padding: 0 1.5rem;
-    transition: max-height 0.32s ease, padding 0.32s ease;
+.playground-body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 16px;
 }
 
-.faq-card.open .faq-panel {
-    max-height: 1000px;
-    padding-bottom: 1.25rem;
-}
+@media (max-width: 768px) {
+  .playground-body {
+    grid-template-columns: 1fr;
+  }
+}
+
+.editor-panel,
+.console-panel {
+  display: flex;
+  flex-direction: column;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.editor-panel:focus-within {
+  border-color: var(--accent);
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: var(--bg-glass);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.panel-header span {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.editor-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.btn-panel-action {
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  padding: 6px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: 600;
+  transition: all var(--duration-fast) ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.btn-panel-action:hover {
+  background: var(--accent-soft);
+  border-color: var(--border-accent);
+  color: var(--accent);
+}
+
+#pythonEditor {
+  flex: 1;
+  min-height: 280px;
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: vertical;
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+  line-height: 1.7;
+  padding: 16px;
+  tab-size: 4;
+}
+
+#pythonEditor::placeholder {
+  color: var(--text-tertiary);
+  opacity: 0.6;
+}
+
+.console-output {
+  flex: 1;
+  min-height: 280px;
+  padding: 16px;
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  line-height: 1.7;
+  overflow-y: auto;
+  background: transparent;
+  color: var(--text);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.pg-placeholder {
+  color: var(--text-tertiary);
+  font-style: italic;
+}
+
+.playground-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.btn-run {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 28px;
+  border-radius: 10px;
+  font-family: var(--font-sans);
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #fff;
+  background: var(--accent);
+  border: none;
+  box-shadow: 0 4px 16px var(--accent-glow);
+  transition: all var(--duration-fast) var(--ease-out-expo);
+}
+
+.btn-run:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px var(--accent-glow);
+}
+
+.btn-run:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.btn-stop {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 10px;
+  font-family: var(--font-sans);
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #fff;
+  background: var(--danger);
+  border: none;
+  transition: all var(--duration-fast) var(--ease-out-expo);
+}
+
+.btn-stop:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
+}
 
-.faq-panel p {
-    margin: 0;
-    color: var(--text-secondary);
-    line-height: 1.8;
-    font-size: 0.98rem;
+.btn-stop:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   MODAL
+   ═══════════════════════════════════════════════════════════════ */
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  z-index: 2000;
+  animation: fadeIn 0.25s ease;
 }
 
-.faq-panel ul {
-    margin: 0.75rem 0 0 1.1rem;
-    color: var(--text-secondary);
-    line-height: 1.8;
+.modal.active {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.faq-panel ul li {
-    margin-bottom: 0.55rem;
+.modal-content {
+  background: var(--surface);
+  padding: 32px;
+  border-radius: 24px;
+  max-width: 900px;
+  width: 90%;
+  max-height: 85vh;
+  overflow-y: auto;
+  position: relative;
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-lg);
+  animation: modalSlideUp 0.3s var(--ease-out-expo);
+}
+
+@keyframes modalSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
-.faq-panel pre {
-    margin: 0.75rem 0 0;
-    padding: 1rem;
-    background: rgba(99, 102, 241, 0.08);
-    border: 1px solid var(--border-color);
-    border-radius: 0.85rem;
-    overflow-x: auto;
-    color: var(--text-color);
-    font-family: 'Courier New', monospace;
-    font-size: 0.92rem;
-    line-height: 1.6;
+.modal-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  font-size: 1.2rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--duration-fast) ease;
+  z-index: 10;
 }
 
-.faq-panel code {
-    white-space: pre-wrap;
+.modal-close:hover {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--danger);
+  border-color: rgba(239, 68, 68, 0.3);
+  transform: rotate(90deg);
 }
 
-@media (max-width: 860px) {
-    .faq-grid {
-        grid-template-columns: 1fr;
-    }
+.modal-dialog-title {
+  margin-bottom: 20px;
+  font-family: var(--font-sans);
+  font-size: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
 }
 
-@media (max-width: 640px) {
-    .faq-section {
-        padding: 3rem 0;
-    }
-
-    .faq-trigger {
-        padding: 1rem 1.25rem;
-    }
-
-    .faq-panel {
-        padding: 0 1.25rem;
-    }
+#modalBody {
+  min-height: 200px;
 }
 
-.projects-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-    gap: 1.2rem;
-    margin-top: 2rem;
-    align-items: stretch;
+/* ═══════════════════════════════════════════════════════════════
+   FOOTER
+   ═══════════════════════════════════════════════════════════════ */
+.footer {
+  padding: 60px 0 32px;
+  border-top: 1px solid var(--border);
+  background: var(--surface);
+  position: relative;
+  z-index: 1;
 }
 
-/* Remove any older conflicting .project-card rules that might still exist */
-.project-card:not([data-category]) {
-    /* fallback, but our main rule above already covers all */
+.footer-content {
+  display: grid;
+  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
+  gap: 40px;
+  margin-bottom: 40px;
 }
 
-
-.project-card h3 {
-    font-size: 1.15rem;
-    line-height: 1.3;
-    margin-bottom: 0.35rem;
-    color: var(--text-color);
-    font-weight: 700;
-    width: 100%;
+.footer-brand h2 {
+  font-family: var(--font-sans);
+  font-size: 1.3rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  margin-bottom: 12px;
 }
 
-.project-card p {
-    color: var(--text-secondary);
-    margin-bottom: 0;
-    font-size: 0.85rem;
-    line-height: 1.45;
-    width: 100%;
+.footer-brand p {
+  font-size: 0.88rem;
+  color: var(--text-secondary);
+  margin-bottom: 20px;
+  line-height: 1.7;
 }
 
-.btn-generate {
-    background: var(--accent-color);
-    color: var(--on-accent);
-    border: none;
-    padding: 0.75rem 2rem;
-    border-radius: 50px;
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: 600;
-    transition: var(--transition);
+.footer-social-icons {
+  display: flex;
+  gap: 10px;
 }
 
-.btn-generate:hover {
-    transform: scale(1.05);
-    box-shadow: 0 5px 20px rgba(34, 197, 94, 0.4);
+.footer-social-icons a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  font-size: 1rem;
+  transition: all var(--duration-fast) ease;
+  text-decoration: none;
 }
 
-/* Icon colour classes */
-.game-icon-rps {
-    color: #999fee;
+.footer-social-icons a:hover {
+  background: var(--accent-soft);
+  border-color: var(--border-accent);
+  color: var(--accent);
+  transform: translateY(-2px);
 }
 
-.game-icon-blackjack {
-    color: #8b5cf6;
+.footer-links h3 {
+  font-family: var(--font-sans);
+  font-size: 0.85rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text);
+  margin-bottom: 16px;
 }
 
-.game-icon-dice {
-    color: #e04f4f;
+.footer-links ul {
+  list-style: none;
 }
 
-.game-icon-coin {
-    color: #eab308;
+.footer-links li {
+  margin-bottom: 10px;
 }
 
-.game-icon-target {
-    color: #5bc085;
+.footer-links a {
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+  transition: color var(--duration-fast) ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
-.game-icon-hangman {
-    color: #b99b48;
+.footer-links a:hover {
+  color: var(--accent);
 }
 
-.game-icon-word {
-    color: #8a99ee;
+.footer-bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding-top: 24px;
+  border-top: 1px solid var(--border);
+  color: var(--text-tertiary);
+  font-size: 0.82rem;
 }
 
-.game-icon-love {
-    color: #ec4899;
+.footer-bottom-links {
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
 
-.game-icon-grid {
-    color: #5cf6a1;
+.footer-bottom-links a {
+  color: var(--text-tertiary);
+  transition: color var(--duration-fast) ease;
 }
 
-.game-icon-lock {
-    color: #06b6d4;
+.footer-bottom-links a:hover {
+  color: var(--accent);
 }
 
-.game-icon-brain {
-    color: #f59e0b;
+.separator {
+  color: var(--text-tertiary);
+  opacity: 0.5;
 }
 
-.game-icon-snake {
-    color: #22c55e;
+/* ═══════════════════════════════════════════════════════════════
+   BACK TO TOP
+   ═══════════════════════════════════════════════════════════════ */
+.back-to-top {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  box-shadow: var(--shadow-md);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  font-size: 1rem;
+  opacity: 0;
+  transform: translateY(16px) scale(0.9);
+  pointer-events: none;
+  transition: all var(--duration-base) var(--ease-out-expo);
+  z-index: 1500;
 }
 
-.game-icon-memory {
-    color: rgb(199, 199, 0);
+.back-to-top.visible {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
 }
 
-.game-icon-hammer {
-    color: #8a5834;
+.back-to-top:hover {
+  background: var(--accent-soft);
+  border-color: var(--border-accent);
+  color: var(--accent);
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-glow);
 }
 
-.game-icon-puzzle {
-    color: #3b82f6;
+/* ═══════════════════════════════════════════════════════════════
+   ANIMATIONS
+   ═══════════════════════════════════════════════════════════════ */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
-.game-icon-bird {
-    color: #38bdf8;
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.math-icon-fibonacci {
-    color: #10b981;
+@keyframes slideUp {
+  from {
+    transform: translateY(30px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
-.math-icon-progress {
-    color: #06b6d4;
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 
-.math-icon-triangle {
-    color: #f59e0b;
+.reveal-on-scroll {
+  opacity: 0;
+  transform: translateY(24px);
+  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
 }
 
-.math-icon-gem {
-    color: #f65c71;
+.reveal-on-scroll.is-visible {
+  opacity: 1;
+  transform: translateY(0);
 }
 
-.math-icon-calc {
-    color: #06b6d4;
+/* ── Share Toast ───────────────────────────────────────────── */
+.share-toast {
+  position: fixed;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%) translateY(16px);
+  background: var(--surface);
+  color: var(--accent);
+  border: 1px solid var(--border-accent);
+  padding: 12px 24px;
+  border-radius: 12px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  box-shadow: var(--shadow-lg);
+  z-index: 9999;
+  opacity: 0;
+  transition: all var(--duration-base) var(--ease-out-expo);
+  pointer-events: none;
+  white-space: nowrap;
+  backdrop-filter: blur(20px);
+}
+
+.share-toast.share-toast--visible {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* ── Project inline styles override helper ─────────────────── */
+.ui-panel,
+.project-content {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  color: var(--text);
+  box-shadow: none;
 }
 
-.math-icon-number {
-    color: #84cc16;
+.project-content h2 {
+  font-family: var(--font-sans);
+  font-size: 1.6rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  margin-bottom: 16px;
 }
 
-.math-icon-prime {
-    color: rgb(247, 79, 107);
+.ui-subpanel {
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  border-radius: 12px;
 }
 
-.math-icon-rocket {
-    color: #f97316;
-}
+/* ═══════════════════════════════════════════════════════════════
+   RESPONSIVE
+   ═══════════════════════════════════════════════════════════════ */
+@media (max-width: 1100px) {
+  .projects-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 
-.math-icon-compass {
-    color: #14b8a6;
+  .timeline-item {
+    grid-template-columns: 1fr 32px 1fr;
+    gap: 20px;
+  }
 }
 
-.math-icon-derivative {
-    color: #ec4899;
-}
+@media (max-width: 900px) {
+  .footer-content {
+    grid-template-columns: 1fr 1fr;
+  }
 
-.utility-icon-radio {
-    color: #3b82f6;
-}
+  .footer-brand {
+    grid-column: 1 / -1;
+  }
 
-.utility-icon-tower {
-    color: #f97316;
+  .hero-timeline-section {
+    display: none;
+  }
 }
 
-.utility-icon-convert {
-    color: #22c55e;
-}
+@media (max-width: 768px) {
+  .navbar {
+    top: 8px;
+    width: calc(100% - 16px);
+  }
+
+  .nav-island {
+    height: 60px;
+    padding: 0 12px;
+    border-radius: 16px;
+  }
 
-.utility-icon-typing {
-    color: #5cdff6;
-}
+  .navbar.scrolled .nav-island {
+    height: 56px;
+  }
 
-/* ═══════════════════════════════════════
-   MODAL
-═══════════════════════════════════════ */
-.modal {
+  .logo-tagline {
     display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
+  }
+
+  .search-box {
+    max-width: none;
     width: 100%;
-    height: 100%;
-    background: var(--overlay-color);
-    backdrop-filter: blur(6px);
-    -webkit-backdrop-filter: blur(6px);
-    z-index: 2000;
-    animation: fadeIn 0.3s ease;
-}
+  }
 
-.modal.active {
+  .mobile-menu-toggle {
     display: flex;
-    align-items: center;
-    justify-content: center;
-}
+  }
 
-.modal-content {
-    background: var(--surface-color);
-    padding: 2rem;
-    border-radius: 20px;
-    max-width: 900px;
-    width: 90%;
-    max-height: 85vh;
-    display: flex;
+  .nav-controls {
+    display: none;
     flex-direction: column;
-    position: relative;
-    animation: slideUp 0.3s ease;
-    box-shadow: var(--shadow-modal);
-    border: 1px solid var(--border-color);
-    margin: auto;
-    /* overflow removed to stop clipping */
-}
-
-.modal-close {
-    position: absolute;
-    top: 1.5rem;
-    right: 1.5rem;
-    background: var(--danger-color);
-    color: var(--on-accent);
-    border: none;
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    font-size: 1.5rem;
-    cursor: pointer;
-    transition: var(--transition);
-    z-index: 100; /* Forces button above inner content */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-}
-
-.modal-close:hover {
-    transform: scale(1.1) rotate(90deg);
-}
-/* ── reused section placeholder ── */
-
-/* Animations */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(30px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes slideUp {
-    from {
-        transform: translateY(50px);
-        opacity: 0;
-    }
-
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-@keyframes bounce {
-
-    0%,
-    100% {
-        transform: translateY(0);
-    }
-
-    50% {
-        transform: translateY(-10px);
-    }
-}
-
-/* ===== RESPONSIVE BREAKPOINTS ===== */
-
-/* Tablet: 768px */
-
-/* Standard mobile: 375px */
-
-/* Scrollbar */
-::-webkit-scrollbar {
-    width: 10px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--bg-color);
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--accent-color);
-    border-radius: 5px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--accent-color);
-    opacity: 0.8;
-}
-
-/* Accessibility */
-.visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-}
-
-.skip-link {
-    position: absolute;
-    top: -90px;
-    left: 50%;
-    transform: translateX(-50%);
-
-    background: var(--accent-color);
-    border-color: var(--accent-color);
-    color: var(--on-accent);
-    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
-    padding: 0.9rem 1.4rem;
-    border-radius: 5px;
-
-    font-size: 0.95rem;
-    font-weight: 700;
-    letter-spacing: 0.3px;
-
-    text-decoration: none;
-    font: 16px Arial, sans-serif;
-    z-index: 5000;
-
-    transition:
-        top 0.3s ease,
-        transform 0.3s ease,
-        box-shadow 0.3s ease;
-}
-
-.skip-link:focus {
-    top: 1rem;
-    transform: translateX(-50%) scale(1.03);
-
-    outline: 2px solid rgba(255, 255, 255, 0.9);
-    outline-offset: 1px;
-
-}
-
-.skip-link:hover {
-    transform: translateX(-50%) scale(1.05);
-}
-
-.tab:focus-visible,
-.theme-toggle:focus-visible,
-.modal-close:focus-visible,
-.btn-play:focus-visible {
-    outline: 2px solid var(--accent-color);
-    outline-offset: 2px;
-}
-
-/* ===== FOOTER ===== */
-.footer {
-    background: var(--surface-color);
-    border-top: 2px solid var(--border-color);
-    padding: 4rem 0 2rem;
-    margin-top: 4rem;
-    position: relative;
-    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
-}
-
-.footer::before {
-    content: '';
+    align-items: stretch;
+    gap: 6px;
     position: absolute;
-    top: -2px;
+    top: calc(100% + 8px);
     left: 0;
     right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
-}
-
-.footer-content {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 2.5rem;
-    margin-bottom: 3rem;
-}
-
-.footer-brand {
-    flex: 1 1 300px;
-    max-width: 400px;
-    padding: 1.5rem;
-    background: var(--footer-card-light);
-    border: 1px solid var(--footer-card-border);
-    border-radius: 16px;
-    transition: var(--transition);
-}
-
-.footer-brand:hover {
-    background: rgba(252, 176, 91, 0.12);
-    border-color: var(--footer-card-color);
-    box-shadow: 0 8px 24px rgba(252, 176, 91, 0.15);
-}
-
-.footer-links {
-    flex: 1 1 150px;
-    padding: 1.5rem;
-    background: var(--footer-card-light);
-    border: 1px solid var(--footer-card-border);
-    border-radius: 16px;
-    transition: var(--transition);
-}
-
-.footer-links:hover {
-    background: rgba(252, 176, 91, 0.12);
-    border-color: var(--footer-card-color);
-    box-shadow: 0 8px 24px rgba(252, 176, 91, 0.15);
-}
-
-.footer-newsletter {
-    flex: 1 1 250px;
-    max-width: 350px;
-    padding: 1.5rem;
-    background: var(--footer-card-light);
-    border: 1px solid var(--footer-card-border);
-    border-radius: 16px;
-    transition: var(--transition);
-}
-
-.footer-newsletter:hover {
-    background: rgba(252, 176, 91, 0.12);
-    border-color: var(--footer-card-color);
-    box-shadow: 0 8px 24px rgba(252, 176, 91, 0.15);
-}
-
-[data-theme="dark"] .footer-brand,
-[data-theme="dark"] .footer-links,
-[data-theme="dark"] .footer-newsletter {
-    background: rgba(0, 0, 0, 0.4);
-    border-color: rgba(252, 176, 91, 0.08);
-}
-
-[data-theme="dark"] .footer-brand:hover,
-[data-theme="dark"] .footer-links:hover,
-[data-theme="dark"] .footer-newsletter:hover {
-    background: rgba(0, 0, 0, 0.5);
-    border-color: rgba(252, 176, 91, 0.15);
-    box-shadow: 0 8px 24px rgba(252, 176, 91, 0.08);
-}
-
-.footer-brand h2 {
-    font-size: 1.5rem;
-    color: var(--text-color);
-    margin-bottom: 1rem;
-    background: linear-gradient(135deg, var(--text-color), var(--footer-card-color));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.footer-brand p {
-    color: var(--text-secondary);
-    margin-bottom: 1.5rem;
-}
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    padding: 8px;
+    box-shadow: var(--shadow-lg);
+  }
 
-.footer-social-icons {
+  .nav-controls.mobile-active {
     display: flex;
-    gap: 1rem;
-}
+  }
 
-.footer-social-icons a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
+  .nav-controls .sound-toggle,
+  .nav-controls .theme-toggle {
+    width: 100%;
+    border-radius: 10px;
     height: 40px;
-    border-radius: 50%;
-    background: rgba(252, 176, 91, 0.1);
-    color: var(--footer-card-color);
-    font-size: 1.2rem;
-    transition: var(--transition);
-    border: 1px solid rgba(252, 176, 91, 0.2);
-    text-decoration: none;
-}
-
-.footer-social-icons a:hover {
-    background: linear-gradient(135deg, rgba(252, 176, 91, 0.15), rgba(252, 176, 91, 0.1));
-    color: var(--footer-card-color);
-    border-color: var(--footer-card-color);
-    transform: translateY(-5px);
-    box-shadow: 0 10px 25px rgba(252, 176, 91, 0.25);
-}
-
-[data-theme="dark"] .footer-social-icons a {
-    background: rgba(0, 0, 0, 0.3);
-    color: rgba(252, 176, 91, 0.7);
-    border-color: rgba(252, 176, 91, 0.1);
-}
-
-[data-theme="dark"] .footer-social-icons a:hover {
-    background: rgba(252, 176, 91, 0.08);
-    color: var(--footer-card-color);
-    border-color: rgba(252, 176, 91, 0.12);
-    box-shadow: 0 10px 25px rgba(252, 176, 91, 0.1);
-}
+  }
 
-.footer-links h3,
-.footer-newsletter h3 {
-    font-size: 1.2rem;
-    color: var(--text-color);
-    margin-bottom: 1.5rem;
-    position: relative;
-    padding-bottom: 0.5rem;
-}
+  .hero-section {
+    min-height: auto;
+    padding-top: 100px;
+  }
 
-.footer-links h3::after,
-.footer-newsletter h3::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 40px;
-    height: 2px;
-    background: var(--footer-card-color);
-    border-radius: 2px;
-    transition: var(--transition);
-}
+  .hero-title {
+    font-size: 2.4rem;
+  }
 
-.footer-links:hover h3::after,
-.footer-newsletter:hover h3::after {
-    width: 60px;
-    background: var(--footer-card-color);
-}
+  .hero-cta-row {
+    flex-direction: column;
+  }
+
+  .projects-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .card-banner,
+  .card-banner-wrap .card-banner {
+    height: 120px;
+  }
+
+  .card-banner-wrap {
+    width: calc(100% + 32px);
+    margin: -16px -16px 0;
+  }
+
+  .card-banner {
+    width: calc(100% + 32px);
+    margin: -16px -16px 12px;
+  }
+
+  .card-gradient-head {
+    width: calc(100% + 32px);
+    margin: -16px -16px 12px;
+    height: 60px;
+  }
+
+  .filter-sidebar {
+    margin-bottom: 24px;
+  }
+
+  .sticky-filter-bar {
+    top: 72px;
+    width: calc(100% - 16px);
+  }
+
+  .cursor-glow {
+    display: none;
+  }
 
-[data-theme="dark"] .footer-links h3::after,
-[data-theme="dark"] .footer-newsletter h3::after {
-    background: rgba(252, 176, 91, 0.5);
-}
+  .hero-orb {
+    display: none;
+  }
 
-[data-theme="dark"] .footer-links:hover h3::after,
-[data-theme="dark"] .footer-newsletter:hover h3::after {
-    background: rgba(252, 176, 91, 0.7);
-}
+  .hero-meta span {
+    font-size: 0.72rem;
+  }
 
-.footer-links ul {
-    list-style: none;
+  .footer-content {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
 }
 
-.footer-links li {
-    margin-bottom: 0.8rem;
-}
+@media (max-width: 480px) {
+  .container {
+    padding: 0 16px;
+  }
 
-.footer-links a {
-    color: var(--text-secondary);
-    text-decoration: none;
-    transition: var(--transition);
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
+  .hero-title {
+    font-size: 2rem;
+  }
 
-.footer-links a i {
+  .hero-subtitle {
     font-size: 0.9rem;
-    color: var(--footer-card-color);
-    opacity: 0.8;
-    transition: var(--transition);
-}
-
-.footer-links a:hover {
-    color: var(--footer-card-color);
-    transform: translateX(5px);
-}
-
-.footer-links a:hover i {
-    opacity: 1;
-}
-
-.newsletter-form {
-    display: flex;
-    position: relative;
-}
-
-.newsletter-form input {
-    width: 100%;
-    padding: 0.8rem 3.5rem 0.8rem 1.2rem;
-    border-radius: 50px;
-    border: 1px solid rgba(252, 176, 91, 0.2);
-    background: rgba(252, 176, 91, 0.04);
-    color: var(--text-color);
-    font-family: inherit;
-    font-size: 0.95rem;
-    outline: none;
-    transition: var(--transition);
-}
-
-.newsletter-form input::placeholder {
-    color: rgba(148, 163, 184, 0.6);
-}
-
-.newsletter-form input:focus {
-    border-color: var(--footer-card-color);
-    box-shadow: 0 0 0 3px rgba(252, 176, 91, 0.15);
-    background: rgba(252, 176, 91, 0.08);
-}
-
-.newsletter-form button {
-    position: absolute;
-    right: 4px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    border: none;
-    background: linear-gradient(135deg, var(--footer-card-color), rgba(252, 176, 91, 0.8));
-    color: #5d4a3a;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: var(--transition);
-    font-weight: 600;
-}
-
-.newsletter-form button:hover {
-    box-shadow: 0 8px 20px rgba(252, 176, 91, 0.35);
-    transform: translateY(-50%) scale(1.08);
-}
-
-[data-theme="dark"] .newsletter-form button {
-    background: rgba(252, 176, 91, 0.7);
-    color: #000000;
-}
-
-[data-theme="dark"] .newsletter-form button:hover {
-    background: rgba(252, 176, 91, 0.85);
-    box-shadow: 0 8px 20px rgba(252, 176, 91, 0.15);
-}
+  }
 
-.footer-bottom {
-    display: flex;
+  .section-header {
     flex-direction: column;
-    align-items: center;
-    gap: 1rem;
-    padding-top: 2rem;
-    border-top: 1px solid rgba(252, 176, 91, 0.15);
-    color: var(--text-secondary);
-    font-size: 0.95rem;
-}
-
-.footer-bottom-links {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-}
+    align-items: flex-start;
+  }
 
-.footer-bottom-links a {
-    color: var(--text-secondary);
-    text-decoration: none;
-    transition: var(--transition);
-}
+  .project-card {
+    padding: 16px;
+  }
 
-.footer-bottom-links a:hover {
-    color: var(--footer-card-color);
+  .modal-content {
+    padding: 20px;
+    width: 95%;
+    border-radius: 16px;
+  }
 }
 
-.separator {
-    color: rgba(252, 176, 91, 0.3);
-}
+/* ═══════════════════════════════════════════════════════════════
+   REDUCED MOTION
+   ═══════════════════════════════════════════════════════════════ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  html {
+    scroll-behavior: auto;
+  }
+
+  .cursor-glow,
+  .hero-orb,
+  .hero-orb-one,
+  .hero-orb-two,
+  .hero-orb-three {
+    display: none;
+  }
 
-[data-theme="dark"] .footer-bottom {
-    border-top: 1px solid rgba(252, 176, 91, 0.08);
-}
+  .project-card:hover {
+    transform: none;
+  }
 
-[data-theme="dark"] .footer-bottom-links a:hover {
-    color: rgba(252, 176, 91, 0.8);
-}
-
-[data-theme="dark"] .separator {
-    color: rgba(252, 176, 91, 0.12);
-}
-
-/* ═══════════════════════════════════════
-   BACK TO TOP
-═══════════════════════════════════════ */
-.back-to-top {
-    position: fixed;
-    right: 1.5rem;
-    bottom: 6.5rem;
-    width: 3.25rem;
-    height: 3.25rem;
-    border: none;
-    border-radius: 50%;
-    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-    color: white;
-    box-shadow: var(--shadow);
-    cursor: pointer;
-    display: grid;
-    place-items: center;
-    font-size: 1.1rem;
-    opacity: 0;
-    transform: translateY(1rem) scale(0.9);
-    pointer-events: none;
-    transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
-    z-index: 1500;
-}
-
-.back-to-top.visible {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-    pointer-events: auto;
-}
-
-.back-to-top:hover {
-    box-shadow: 0 12px 30px rgba(34, 197, 94, 0.45);
-    transform: translateY(-3px) scale(1.05);
-}
-
-.back-to-top:focus-visible {
-    outline: 3px solid rgba(255, 255, 255, 0.85);
-    outline-offset: 3px;
-}
-
-/* ═══════════════════════════════════════
-   REDUCED MOTION
-═══════════════════════════════════════ */
-
-
-
-/* ── Share Button ───────────────────────────────────────────────── */
-.btn-share {
-    position: absolute;
-    bottom: 0.75rem;
-    right: 0.75rem;
-    background: rgba(34, 197, 94, 0.1);
-    border: 1px solid rgba(34, 197, 94, 0.25);
-    border-radius: 50%;
-    width: 36px;
-    height: 36px;
-    font-size: 0.95rem;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0.6;
-    transform: scale(0.95);
-    transition: all 0.25s ease;
-    z-index: 2;
-}
-
-.project-card:hover .btn-share {
-    opacity: 1;
-    transform: scale(1);
-    background: rgba(34, 197, 94, 0.2);
-    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
-}
-
-.btn-share:hover {
-    background: rgba(34, 197, 94, 0.3) !important;
-    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4) !important;
-    transform: scale(1.15) !important;
-}
-
-/* ── Toast Notification ─────────────────────────────────────────── */
-.share-toast {
-    position: fixed;
-    bottom: 2rem;
-    left: 50%;
-    transform: translateX(-50%) translateY(1rem);
-    background: var(--surface-color);
-    color: var(--primary-color);
-    border: 1.5px solid rgba(34, 197, 94, 0.4);
-    padding: 0.75rem 1.5rem;
-    border-radius: 50px;
-    font-size: 0.95rem;
-    font-weight: 600;
-    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
-    z-index: 9999;
-    opacity: 0;
-    transition: opacity 0.3s ease, transform 0.3s ease;
-    pointer-events: none;
-    white-space: nowrap;
-}
-
-.share-toast--visible {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-}
-
-/* ═══════════════════════════════════════
-   STICKY CATEGORY FILTER BAR
-═══════════════════════════════════════ */
-.sticky-filter-bar {
-    position: fixed;
-    top: 0;
-    /* will be offset by JS after measuring navbar */
-    left: 0;
-    right: 0;
-    z-index: 999;
-    background: color-mix(in srgb, var(--surface-color) 90%, transparent);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border-bottom: 1px solid var(--border-color);
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-
-    opacity: 0;
-    pointer-events: none;
-    transform: translateY(-100%);
-    transition: opacity 0.25s ease, transform 0.25s ease;
-}
-
-.sticky-filter-bar.visible {
-    opacity: 1;
-    pointer-events: auto;
-    transform: translateY(0);
-}
-
-.sticky-filter-inner {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.25rem;
-    padding: 0.55rem 1.25rem;
-    max-width: 1200px;
-    margin: 0 auto;
-    overflow-x: auto;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-}
-
-.sticky-filter-inner::-webkit-scrollbar {
-    display: none;
-}
-
-.sticky-tab {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.38rem;
-    background: transparent;
-    border: 0;
-    border-radius: 50px;
-    padding: 0.35rem 0.9rem;
-    cursor: pointer;
-    font-size: 0.82rem;
-    font-family: 'IBM Plex Mono', monospace;
-    font-weight: 600;
-    color: var(--text-secondary);
-    text-transform: lowercase;
-    transition: background-color 0.18s ease, color 0.18s ease;
-    white-space: nowrap;
-}
-
-.sticky-tab i {
-    width: 14px;
-    height: 14px;
-    stroke-width: 2;
-    flex-shrink: 0;
-}
-
-.sticky-tab:hover {
-    background: var(--accent-soft);
-    color: var(--text-color);
-}
-
-.sticky-tab.active {
-    background: var(--accent-soft);
-    color: var(--accent-color);
-    border: 1px solid var(--accent-border);
-}
-
-.sticky-tab:focus-visible {
-    outline: 2px solid var(--accent-color);
-    outline-offset: 2px;
-}
-
-/* ═══════════════════════════════════════
-   CONSOLIDATED RESPONSIVE BREAKPOINTS
-═══════════════════════════════════════ */
-
-@media (max-width: 992px) {
-    .footer-brand {
-        flex: 1 1 100%;
-        max-width: 600px;
-    }
-}
-
-@media (max-width: 768px) {
-
-    .hero-code-snippets,
-    .navbar-tagline,
-    .search-shortcut {
-        display: none;
-    }
-
-    .hero-section {
-        padding: 7rem 0;
-        min-height: 400px;
-    }
-
-    .hero-title {
-        font-size: 2.3rem;
-        margin-bottom: 1rem;
-    }
-
-    .python-orbit {
-        width: 280px;
-        height: 280px;
-    }
-
-    .python-orbiter {
-        width: 40px;
-        height: 40px;
-        top: -20px;
-    }
-
-    .python-logo {
-        font-size: 2rem;
-    }
-
-    .hero-subtitle {
-        font-size: 1rem;
-        margin-bottom: 2rem;
-    }
-
-    .hero-features {
-        gap: 0.75rem;
-        margin-bottom: 2rem;
-        flex-wrap: nowrap;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-        scrollbar-width: none;
-        padding-bottom: 0.5rem;
-        justify-content: flex-start;
-    }
-
-    .hero-features::-webkit-scrollbar {
-        display: none;
-    }
-
-    .feature-badge {
-        padding: 0.6rem 1rem;
-        font-size: 0.9rem;
-        flex-shrink: 0;
-    }
-
-    .feature-icon {
-        font-size: 1.2rem;
-    }
-
-    .btn-explore {
-        padding: 0.85rem 2rem;
-        font-size: 1rem;
-    }
-
-    .hero-badges {
-        gap: 0.6rem;
-    }
-
-    .badge {
-        padding: 0.4rem 1.1rem;
-        font-size: 0.9rem;
-    }
-
-    .tabs-section {
-        padding: 2rem 0 1.5rem 0;
-    }
-
-    .tabs-section .container {
-        gap: 1.5rem;
-    }
-
-    .tabs-wrapper {
-        flex-direction: column;
-        gap: 1rem;
-        align-items: stretch;
-    }
-
-    .tabs-wrapper .tabs {
-        min-width: unset;
-        width: 100%;
-    }
-
-    .tabs {
-        gap: 0.6rem;
-        margin-top: 0;
-        justify-content: flex-start;
-    }
-
-    .tab {
-        padding: 0.6rem 1.1rem;
-        font-size: 0.9rem;
-    }
-
-    .btn-random-project {
-        width: 100%;
-        justify-content: center;
-        padding: 0.75rem 1.25rem;
-        font-size: 0.95rem;
-    }
-
-    .projects-section {
-        padding: 2.5rem 0;
-    }
-
-    .projects-grid {
-        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-        gap: 1rem;
-        margin-top: 1.5rem;
-    }
-
-    .project-card {
-        padding: 1.25rem 1rem;
-    }
-
-    .project-card h3 {
-        font-size: 1.15rem;
-    }
-
-    .search-wrapper {
-        height: 50px;
-        padding: 0 1.1rem;
-    }
-
-    .search-input {
-        font-size: 0.95rem;
-    }
-
-    .modal-content {
-        padding: 1.5rem;
-        border-radius: 16px;
-        position: relative;
-    }
-}
-
-@media (max-width: 576px) {
-    .footer-content {
-        grid-template-columns: 1fr;
-        text-align: center;
-        gap: 2rem;
-    }
-
-    .footer-social-icons {
-        justify-content: center;
-    }
-
-    .footer-links h3::after,
-    .footer-newsletter h3::after {
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-    .footer-links a {
-        justify-content: center;
-    }
-}
-
-@media (max-width: 480px) {
-    .hero-section {
-        padding: 4rem 0;
-    }
-
-    .hero-title {
-        font-size: 1.8rem;
-        margin-bottom: 0.8rem;
-    }
-
-    .hero-subtitle {
-        font-size: 0.95rem;
-        margin-bottom: 1.5rem;
-    }
-
-    .hero-features {
-        flex-direction: row;
-        flex-wrap: nowrap;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-        scrollbar-width: none;
-        width: 100%;
-        justify-content: flex-start;
-        gap: 0.6rem;
-        margin-bottom: 1.5rem;
-    }
-
-    .hero-features::-webkit-scrollbar {
-        display: none;
-    }
-
-    .feature-badge {
-        flex-shrink: 0;
-        padding: 0.5rem 0.9rem;
-        font-size: 0.85rem;
-    }
-
-    .btn-explore {
-        padding: 0.75rem 1.8rem;
-        font-size: 0.95rem;
-    }
-
-    .sticky-filter-inner {
-        justify-content: flex-start;
-        padding: 0.45rem 1rem;
-        gap: 0.18rem;
-    }
-
-    .sticky-tab {
-        padding: 0.3rem 0.7rem;
-        font-size: 0.78rem;
-    }
-}
-
-@media (max-width: 375px) {
-    .container {
-        padding: 0 16px;
-    }
-
-    .hero {
-        padding: 2rem 0;
-    }
-
-    .hero-title {
-        font-size: 1.7rem;
-    }
-
-    .hero-subtitle {
-        font-size: 0.95rem;
-        margin-bottom: 1.25rem;
-    }
-
-    .hero-badges {
-        gap: 0.5rem;
-    }
-
-    .tab {
-        padding: 0.55rem 1rem;
-        font-size: 0.85rem;
-        border-radius: 50px;
-    }
-
-    .btn-random-project {
-        width: auto;
-        justify-content: flex-start;
-        padding: 0.25rem 0;
-        font-size: 0.82rem;
-        gap: 0.4rem;
-    }
-
-    .projects-grid {
-        grid-template-columns: 1fr;
-        gap: 1rem;
-    }
-
-    .project-card {
-        padding: 1.25rem 1rem;
-    }
-
-    .project-card h3 {
-        font-size: 1rem;
-    }
-
-    .project-card p {
-        font-size: 0.85rem;
-    }
-
-    .btn-generate,
-    .btn-play {
-        padding: 0.6rem 1.25rem;
-        font-size: 0.85rem;
-    }
-
-    .search-wrapper {
-        height: 44px;
-        padding: 0 0.85rem;
-    }
-
-    .search-input {
-        font-size: 0.85rem;
-    }
-
-    .logo h1 {
-        font-size: 1.1rem;
-    }
-
-    .theme-toggle,
-    .sound-toggle {
-        width: 32px;
-        height: 32px;
-        font-size: 0.9rem;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    html {
-        scroll-behavior: auto;
-    }
-
-    :root {
-        --motion-duration: 0.01ms;
-        --transition: none;
-        --transition-fast: none;
-    }
-
-    .project-card {
-        animation: none !important;
-    }
-
-    .modal {
-        animation: none;
-        backdrop-filter: none;
-        -webkit-backdrop-filter: none;
-    }
-
-    .modal-content {
-        animation: none;
-    }
-
-    .color-bends-container::before,
-    .color-bends-container::after,
-    .code-snippet {
-        animation: none !important;
-    }
-
-    .theme-toggle:hover,
-    .theme-toggle:active,
-    .tab:hover,
-    .tab:active,
-    .project-card:hover,
-    .project-card:active,
-    .btn-play:hover,
-    .btn-play:active,
-    .modal-close:hover {
-        transform: none;
-    }
-
-    .sticky-filter-bar {
-        transition: none;
-    }
-}
-
-/* ==========================================================================
-   CARD AND MODAL LAYOUT STANDARDIZATION
-   ========================================================================== */
-
-.projects-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-    gap: 1.2rem;
-    margin-top: 2rem;
-    align-items: stretch;
-}
-
-.project-card {
-    min-height: 240px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: stretch;
-    padding: 1.75rem 1.5rem 1.5rem;
-    border-radius: 28px;
-    background: var(--surface-color);
-    border: 1px solid var(--accent-border);
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
-    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
-}
-
-.project-card h3 {
-    margin-bottom: 0.8rem;
-    font-size: 1.15rem;
-    line-height: 1.35;
-    color: var(--text-color);
-}
-
-.project-card p {
-    margin-bottom: 1rem;
-    color: var(--text-secondary);
-    font-size: 0.95rem;
-    line-height: 1.65;
-    flex: 1 1 auto;
-}
-
-.project-card .btn-play {
-    margin-top: auto;
-    align-self: flex-start;
-}
-
-.card-icon {
-    width: 72px;
-    height: 72px;
-    display: grid;
-    place-items: center;
-    border-radius: 22px;
-    background: var(--accent-soft);
-    color: var(--accent-color);
-    margin-bottom: 1.2rem;
-    font-size: 2rem;
-    flex-shrink: 0;
-}
-
-.modal-content {
-    width: min(100%, 900px);
-    max-width: 900px;
-    min-width: 320px;
-    max-height: 92vh;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 2rem;
-    border-radius: 20px;
-    box-shadow: var(--shadow-modal);
-    background: var(--surface-color);
-    border: 1px solid var(--border-color);
-}
-
-#modalBody {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    align-items: stretch;
-}
-
-#modalBody > * {
-    width: 100%;
-    max-width: 100%;
-}
-
-.modal-close {
-    z-index: 2100;
-}
-
-@media (max-width: 768px) {
-    .modal-content {
-        width: min(100%, 92vw);
-        padding: 1.5rem;
-        max-height: 90vh;
-    }
-
-    .project-card {
-        min-height: auto;
-        padding: 1.5rem 1.25rem;
-    }
-}
-
-@media (max-width: 576px) {
-    .projects-grid {
-        grid-template-columns: 1fr;
-        gap: 1rem;
-    }
-
-    .project-card {
-        padding: 1.25rem;
-    }
-}
-
-/* ==========================================================================
-   ARCADE REDESIGN OVERRIDES
-   ========================================================================== */
-
-:root {
-    --accent-color: #6abf8d;
-    --primary-color: #6abf8d;
-    --secondary-color: #f2a65a;
-    --success-color: #5fbf93;
-    --danger-color: #de6d5b;
-    --warning-color: #f2b85f;
-    --bg-color: #f8f5ee;
-    --surface-color: rgba(255, 253, 248, 0.82);
-    --panel-color: #fffaf1;
-    --control-color: #fffdf8;
-    --text-color: #2c241f;
-    --text-secondary: #75675d;
-    --border-color: rgba(118, 99, 84, 0.14);
-    --accent-soft: rgba(106, 191, 141, 0.16);
-    --accent-border: rgba(106, 191, 141, 0.28);
-    --overlay-color: rgba(255, 248, 240, 0.7);
-    --on-accent: #fffdf8;
-    --shadow: 0 22px 60px rgba(155, 123, 90, 0.14);
-    --shadow-modal: 0 35px 90px rgba(101, 72, 39, 0.18);
-}
-
-[data-theme="dark"] {
-    --accent-color: #9fddb5;
-    --primary-color: #9fddb5;
-    --secondary-color: #f6c58d;
-    --success-color: #9fddb5;
-    --danger-color: #ff9e8c;
-    --warning-color: #ffd48f;
-    --bg-color: #13100f;
-    --surface-color: rgba(34, 28, 26, 0.92);
-    --panel-color: #1d1817;
-    --control-color: #2a2321;
-    --text-color: #f8eee4;
-    --text-secondary: #d8c6b6;
-    --border-color: rgba(255, 239, 223, 0.14);
-    --accent-soft: rgba(159, 221, 181, 0.14);
-    --accent-border: rgba(159, 221, 181, 0.28);
-    --overlay-color: rgba(15, 12, 11, 0.8);
-    --shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
-    --shadow-modal: 0 35px 90px rgba(0, 0, 0, 0.5);
-}
-
-body {
-    font-family: 'DM Sans', 'Segoe UI','sans-serif';
-    background: var(--bg-color);
-    color: var(--text-color);
-}
-
-[data-theme="light"] body {
-    background:
-        radial-gradient(circle at top left, rgba(255, 219, 174, 0.44), transparent 30%),
-        radial-gradient(circle at top right, rgba(192, 245, 224, 0.46), transparent 24%),
-        linear-gradient(180deg, #fffdf8 0%, #f8f5ee 45%, #f5efe5 100%);
-}
-
-html[data-theme="dark"] body {
-    background:
-        radial-gradient(circle at top left, rgba(242, 166, 90, 0.12), transparent 28%),
-        radial-gradient(circle at top right, rgba(159, 221, 181, 0.1), transparent 24%),
-        linear-gradient(180deg, #161211 0%, #0f0c0b 100%) !important;
-}
-
-.cursor-glow {
-    position: fixed;
-    width: 240px;
-    height: 240px;
-    border-radius: 50%;
-    pointer-events: none;
-    z-index: 0;
-    opacity: 0.5;
-    background: radial-gradient(circle, rgba(255, 197, 115, 0.28) 0%, rgba(121, 221, 183, 0.12) 42%, transparent 72%);
-    transform: translate3d(-50%, -50%, 0);
-    transition: opacity 0.25s ease;
-}
-
-.navbar {
-    padding: 1rem 12px;
-    background: transparent;
-    border-bottom: 0;
-}
-
-.nav-island,
-.nav-wrapper {
-    max-width: 1240px;
-    margin: 0 auto;
-    background: rgba(255, 252, 245, 0.72);
-    border: 1px solid rgba(128, 104, 85, 0.12);
-    border-radius: 999px;
-    padding: 0.9rem 1.15rem;
-    box-shadow: 0 18px 44px rgba(146, 111, 74, 0.14);
-    backdrop-filter: blur(18px);
-    -webkit-backdrop-filter: blur(18px);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-}
-
-[data-theme="dark"] .nav-island,
-[data-theme="dark"] .nav-wrapper {
-    background: rgba(29, 24, 23, 0.88);
-    border-color: rgba(255, 243, 224, 0.14);
-}
-
-.navbar.scrolled .nav-wrapper {
-    transform: translateY(-2px);
-    box-shadow: 0 20px 56px rgba(146, 111, 74, 0.18);
-}
-
-.logo-tagline {
-    background: rgba(255, 255, 255, 0.7);
-    color: #6b5c50;
-    border: 1px solid rgba(128, 104, 85, 0.08);
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    white-space: nowrap;
-}
-
-[data-theme="dark"] .logo-tagline {
-    background: rgba(255, 255, 255, 0.06);
-    color: #f0dfd1;
-}
-
-.search-box {
-    background: rgba(255, 255, 255, 0.74);
-    border: 1px solid rgba(128, 104, 85, 0.12);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
-    height: 54px;
-    max-width: 460px;
-}
-
-.search-box i,
-.search-box input,
-[data-theme="light"] .search-box i,
-[data-theme="light"] .search-box input {
-    color: var(--text-color);
-}
-
-.search-box input::placeholder {
-    color: var(--text-secondary);
-}
-
-[data-theme="dark"] .search-box {
-    background: rgba(255, 255, 255, 0.06);
-    border-color: rgba(255, 239, 223, 0.12);
-}
-
-[data-theme="dark"] .search-box i,
-[data-theme="dark"] .search-box input {
-    color: var(--text-color);
-}
-
-[data-theme="dark"] .search-box input::placeholder {
-    color: var(--text-secondary);
-}
-
-.theme-toggle,
-.sound-toggle {
-    background: linear-gradient(135deg, #fff7ec, #f6dcc5);
-    color: #58463c;
-    border: 1px solid rgba(128, 104, 85, 0.1);
-    box-shadow: 0 10px 20px rgba(180, 145, 100, 0.12);
-}
-
-[data-theme="dark"] .theme-toggle,
-[data-theme="dark"] .sound-toggle {
-    background: linear-gradient(135deg, #443530, #2f2622);
-    color: #fff5eb;
-}
-
-.hero-section {
-    min-height: 0;
-    padding: 5rem 0 20px;
-    background: transparent;
-    position: relative;
-}
-
-#boardCanvas {
-    opacity: 0.17;
-    mix-blend-mode: multiply;
-}
-
-[data-theme="dark"] #boardCanvas {
-    opacity: 0.11;
-    mix-blend-mode: screen;
-}
-
-[data-theme="dark"] .hero-background {
-    background:
-        radial-gradient(circle at 20% 30%, rgba(242, 166, 90, 0.08), transparent 40%),
-        radial-gradient(circle at 85% 15%, rgba(106, 191, 141, 0.10), transparent 35%),
-        radial-gradient(circle at 50% 80%, rgba(125, 220, 185, 0.06), transparent 40%),
-        linear-gradient(
-            180deg,
-            #13100f 0%,
-            #181312 45%,
-            #0f0c0b 100%
-        ) !important;
-}
-
-
-.hero-orb {
-    position: absolute;
-    border-radius: 50%;
-    filter: blur(10px);
-    opacity: 0.55;
-    pointer-events: none;
-}
-
-.hero-orb-one {
-    width: 240px;
-    height: 240px;
-    left: -40px;
-    top: 60px;
-    background: radial-gradient(circle, rgba(252, 193, 118, 0.52), transparent 70%);
-    animation: float 9s ease-in-out infinite;
-}
-
-.hero-orb-two {
-    width: 280px;
-    height: 280px;
-    right: -30px;
-    top: 100px;
-    background: radial-gradient(circle, rgba(158, 233, 205, 0.52), transparent 72%);
-    animation: float 11s ease-in-out infinite reverse;
-}
-
-.hero-shell {
-    position: relative;
-    z-index: 2;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    margin: 0 auto;
-    padding: 0 1rem;
-}
-
-.hero-shell .filter-sidebar {
-    position: absolute;
-    right: calc(50% + 390px);
-    top: 0;
-    width: 200px;
-    background: rgba(255, 253, 248, 0.78);
-    backdrop-filter: blur(18px);
-    -webkit-backdrop-filter: blur(18px);
-    border: 2px solid rgba(128, 104, 85, 0.1);
-    border-radius: 20px;
-    padding: 1.1rem 0.65rem;
-    box-shadow:
-        0 2px 0 rgba(128, 104, 85, 0.06),
-        0 8px 24px rgba(146, 111, 74, 0.08),
-        0 20px 40px rgba(146, 111, 74, 0.04);
-    display: flex;
-    flex-direction: column;
-    gap: 0.15rem;
-}
-
-[data-theme="dark"] .hero-shell .filter-sidebar {
-    background: rgba(29, 24, 23, 0.92);
-    border-color: rgba(255, 243, 224, 0.08);
-}
-
-/* ── Hero Timeline (right side) ───────────────────────────── */
-.hero-timeline {
-    position: absolute;
-    right: calc(50% - 562px);
-    top: 0.5rem;
-    width: 160px;
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-    padding: 0 0 0 16px;
-    --spine-progress: 0;
-}
-
-.timeline-spine {
-    position: absolute;
-    left: 19px;
-    top: 12px;
-    bottom: 4px;
-    width: 4px;
-    background: rgba(138, 110, 76, 0.12);
-    border-radius: 2px;
-    pointer-events: none;
-}
-
-.timeline-spine::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: calc(var(--spine-progress) * 1%);
-    background: #8a6e4c;
-    border-radius: 2px;
-    transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-[data-theme="dark"] .timeline-spine {
-    background: rgba(138, 110, 76, 0.12);
-}
-
-[data-theme="dark"] .timeline-spine::after {
-    background: #8a6e4c;
-}
-
-.timeline-node {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 0;
-    opacity: 0;
-    transform: translateX(-8px);
-    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-.timeline-node:nth-child(2) { transition-delay: 0.04s; }
-.timeline-node:nth-child(3) { transition-delay: 0.08s; }
-.timeline-node:nth-child(4) { transition-delay: 0.12s; }
-.timeline-node:nth-child(5) { transition-delay: 0.16s; }
-.timeline-node:nth-child(6) { transition-delay: 0.2s; }
-.timeline-node:nth-child(7) { transition-delay: 0.24s; }
-.timeline-node:nth-child(8) { transition-delay: 0.28s; }
-.timeline-node:nth-child(9) { transition-delay: 0.32s; }
-
-.timeline-node.revealed {
-    opacity: 1;
-    transform: translateX(0);
-}
-
-.timeline-dot {
-    flex-shrink: 0;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background: #6abf8d;
-    border: 2px solid #fff;
-    box-shadow: 0 0 0 2px rgba(106, 191, 141, 0.25);
-    z-index: 1;
-    transition: box-shadow 0.3s ease, transform 0.3s ease;
-    position: relative;
-}
-
-.timeline-node.revealed .timeline-dot {
-    box-shadow: 0 0 0 4px rgba(106, 191, 141, 0.15), 0 0 10px rgba(106, 191, 141, 0.25);
-    transform: scale(1.1);
-}
-
-[data-theme="dark"] .timeline-dot {
-    border-color: #1e1a18;
-    box-shadow: 0 0 0 2px rgba(159, 221, 181, 0.3);
-}
-
-[data-theme="dark"] .timeline-node.revealed .timeline-dot {
-    box-shadow: 0 0 0 4px rgba(159, 221, 181, 0.2), 0 0 10px rgba(159, 221, 181, 0.2);
-}
-
-.timeline-node::before {
-    content: '';
-    flex-shrink: 0;
-    width: 14px;
-    height: 3px;
-    background: #8a6e4c;
-    border-radius: 2px;
-    order: 2;
-}
-
-.timeline-dot { order: 1; }
-
-.timeline-card { order: 3; }
-
-[data-theme="dark"] .timeline-node::before {
-    background: #8a6e4c;
-}
-
-.timeline-card {
-    flex: 1;
-    min-width: 0;
-    background: rgba(255, 255, 255, 0.6);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(128, 104, 85, 0.08);
-    border-radius: 12px;
-    padding: 0.3rem 0.55rem;
-    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
-}
-
-.timeline-node.revealed .timeline-card {
-    background: rgba(255, 255, 255, 0.78);
-    border-color: rgba(106, 191, 141, 0.18);
-    box-shadow: 0 4px 14px rgba(146, 111, 74, 0.06);
-}
-
-[data-theme="dark"] .timeline-card {
-    background: rgba(35, 29, 27, 0.75);
-    border-color: rgba(255, 243, 224, 0.08);
-    backdrop-filter: blur(12px);
-}
-
-[data-theme="dark"] .timeline-node.revealed .timeline-card {
-    background: rgba(40, 34, 32, 0.85);
-    border-color: rgba(159, 221, 181, 0.2);
-    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
-}
-
-.timeline-step {
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 0.5rem;
-    font-weight: 600;
-    letter-spacing: 0.08em;
-    color: #6abf8d;
-    text-transform: uppercase;
-    display: block;
-    margin-bottom: 0.05rem;
-}
-
-[data-theme="dark"] .timeline-step {
-    color: #7fcfbd;
-}
-
-.timeline-title {
-    font-family: 'Fredoka', sans-serif;
-    font-size: 0.78rem;
-    font-weight: 600;
-    color: var(--text-color);
-    margin: 0 0 0.05rem;
-    text-transform: lowercase;
-    letter-spacing: -0.01em;
-}
-
-.timeline-desc {
-    font-size: 0.64rem;
-    line-height: 1.35;
-    color: var(--text-secondary);
-    margin: 0;
-}
-
-.hero-content,
-.hero-sidekick-card,
-.achievement-card,
-.featured-lab-card,
-.project-card,
-.sticky-filter-bar,
-.playground-section,
-.footer,
-.modal-content {
-    backdrop-filter: blur(18px);
-    -webkit-backdrop-filter: blur(18px);
-}
-
-.hero-content {
-    flex: none;
-    width: 100%;
-    max-width: 760px;
-    align-items: center;
-    text-align: center;
-    padding: 2.25rem 2.5rem 2.5rem;
-    border-radius: 34px;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 249, 239, 0.7));
-    border: 1px solid rgba(128, 104, 85, 0.12);
-    box-shadow:
-        0 2px 0 rgba(128, 104, 85, 0.06),
-        0 8px 24px rgba(146, 111, 74, 0.08),
-        0 24px 48px rgba(146, 111, 74, 0.06);
-    position: relative;
-}
-
-.hero-content::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 120px;
-    height: 4px;
-    border-radius: 0 0 4px 4px;
-    background: linear-gradient(90deg, #6abf8d, #f2c26c, #f09b6b);
-    opacity: 0.7;
-}
-
-[data-theme="dark"] .hero-content {
-    background: linear-gradient(180deg, rgba(35, 29, 27, 0.95), rgba(23, 19, 18, 0.98));
-    border-color: rgba(255, 243, 224, 0.1);
-}
-
-[data-theme="dark"] .hero-content::before {
-    opacity: 0.4;
-}
-
-.hero-kicker,
-.section-kicker,
-.mini-label,
-.achievement-label,
-.lab-tag {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 0.78rem;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: #8c7055;
-}
-
-[data-theme="dark"] .hero-kicker,
-[data-theme="dark"] .section-kicker,
-[data-theme="dark"] .mini-label,
-[data-theme="dark"] .achievement-label,
-[data-theme="dark"] .lab-tag {
-    color: #e0b88f;
-}
-
-.hero-kicker {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.45rem 1rem 0.45rem 0.85rem;
-    border-radius: 999px;
-    background: linear-gradient(135deg, rgba(106, 191, 141, 0.12), rgba(242, 194, 108, 0.08));
-    border: 1px solid rgba(128, 104, 85, 0.08);
-    font-weight: 600;
-    letter-spacing: 0.08em;
-    color: #7a6045;
-    box-shadow: 0 2px 8px rgba(146, 111, 74, 0.04);
-}
-
-.hero-kicker::before {
-    content: '';
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: #6abf8d;
-    box-shadow: 0 0 8px rgba(106, 191, 141, 0.5);
-    flex-shrink: 0;
-}
-
-[data-theme="dark"] .hero-kicker {
-    background: linear-gradient(135deg, rgba(106, 191, 141, 0.18), rgba(242, 194, 108, 0.1));
-    border-color: rgba(255, 243, 224, 0.1);
-    color: #d4b48a;
-}
-
-[data-theme="dark"] .hero-kicker::before {
-    background: #7fcfbd;
-}
-
-.hero-badge-row,
-.projects-header-badges {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1.5rem;
-}
-
-.hero-features {
-    justify-content: center;
-}
-
-.hero-pill,
-.mini-badge,
-.projects-count-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.7rem 1rem;
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.78);
-    border: 1px solid rgba(128, 104, 85, 0.1);
-    box-shadow: 0 10px 18px rgba(176, 137, 94, 0.09);
-}
-
-[data-theme="dark"] .hero-pill,
-[data-theme="dark"] .mini-badge,
-[data-theme="dark"] .projects-count-badge {
-    background: rgba(255, 255, 255, 0.08);
-}
-
-.hero-title {
-    font-family: 'Fredoka', 'Segoe UI', sans-serif;
-    font-size: clamp(3rem, 7vw, 5.6rem);
-    line-height: 1;
-    letter-spacing: -0.05em;
-    margin-top: 0.75rem;
-}
-
-.hero-title span {
-    display: block;
-}
-
-.hero-title-line + .hero-title-line {
-    margin-top: 0.18em;
-}
-
-.hero-title-accent {
-    font-style: italic;
-    color: #b87745;
-    max-width: none;
-    background: linear-gradient(135deg, #b87745, #d49a6a, #b87745);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    position: relative;
-    display: inline-block;
-}
-
-[data-theme="dark"] .hero-title-accent {
-    background: linear-gradient(135deg, #f0bb83, #f5d4a8, #f0bb83);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.hero-subtitle {
-    font-size: 1.08rem;
-    line-height: 1.7;
-    color: var(--text-secondary);
-    max-width: 56ch;
-    margin: 0.75rem auto 0;
-    letter-spacing: 0.01em;
-}
-
-.hero-typing {
-    display: inline-flex;
-    flex-wrap: wrap;
-    gap: 0.55rem;
-    align-items: center;
-    margin-top: 1.25rem;
-    padding: 0.75rem 1.25rem;
-    border-radius: 14px;
-    background: rgba(44, 36, 31, 0.05);
-    border: 1px solid rgba(128, 104, 85, 0.06);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
-}
-
-[data-theme="dark"] .hero-typing {
-    background: rgba(255, 255, 255, 0.06);
-    border-color: rgba(255, 243, 224, 0.08);
-    box-shadow: none;
-}
-
-.typing-label,
-.typing-text {
-    font-family: 'IBM Plex Mono', monospace;
-}
-
-.typing-text {
-    position: relative;
-    color: #9a643b;
-    font-weight: 600;
-}
-
-[data-theme="dark"] .typing-text {
-    color: #f0bb83;
-}
-
-.typing-text::after {
-    content: '';
-    display: inline-block;
-    width: 1ch;
-    height: 1em;
-    margin-left: 2px;
-    border-right: 2px solid currentColor;
-    animation: blink 0.9s steps(1) infinite;
-    vertical-align: -0.12em;
-}
-
-@keyframes blink {
-    50% { opacity: 0; }
-}
-
-.hero-meta {
-    justify-content: center;
-    gap: 0.8rem;
-    margin: 1.25rem 0 0;
-}
-
-.hero-meta span {
-    padding: 0.6rem 0.95rem;
-    border-radius: 12px;
-    background: rgba(255, 255, 255, 0.78);
-    border: 1px solid rgba(128, 104, 85, 0.08);
-    font-size: 0.82rem;
-    box-shadow: 0 2px 6px rgba(146, 111, 74, 0.04);
-    display: inline-flex;
-    align-items: center;
-    gap: 0.45rem;
-}
-
-[data-theme="dark"] .hero-meta span {
-    background: rgba(255, 255, 255, 0.08);
-    border-color: rgba(255, 239, 223, 0.1);
-    box-shadow: none;
-}
-
-.btn-explore,
-.btn-secondary-hero,
-.btn-random-project,
-.lab-action,
-.inline-link-button,
-.btn-play {
-    border-radius: 999px;
-    font-family: 'Fredoka', 'Segoe UI', sans-serif;
-    font-weight: 600;
-    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
-}
-
-.btn-explore,
-.btn-random-project,
-.lab-action {
-    background: linear-gradient(135deg, #6abf8d, #7fcfbd);
-    color: #fffdf8;
-    box-shadow: 0 18px 28px rgba(106, 191, 141, 0.28);
-}
-
-.btn-explore {
-    padding: 1rem 2.5rem;
-    font-size: 1.1rem;
-    position: relative;
-    top: 0;
-    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.08), 0 16px 32px rgba(106, 191, 141, 0.3);
-}
-
-.btn-explore:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 13px 0 rgba(0, 0, 0, 0.06), 0 22px 40px rgba(106, 191, 141, 0.35);
-}
-
-.btn-explore:active {
-    transform: translateY(3px);
-    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08), 0 8px 16px rgba(106, 191, 141, 0.2);
-}
-
-.btn-random-project {
-    padding: 0.9rem 2rem;
-    font-size: 1rem;
-    min-width: 220px;
-    letter-spacing: 0.01em;
-    box-shadow: 0 12px 0 rgba(0, 0, 0, 0.06), 0 16px 32px rgba(34, 197, 94, 0.3);
-    background: linear-gradient(135deg, #22c55e, #14b8a6);
-    color: #ffffff;
-    position: relative;
-    top: 0;
-    margin-top: 0.75rem;
-}
-
-.btn-random-project:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 16px 0 rgba(0, 0, 0, 0.05), 0 24px 40px rgba(34, 197, 94, 0.35);
-}
-
-.btn-random-project:active {
-    transform: translateY(4px);
-    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.06), 0 8px 16px rgba(34, 197, 94, 0.2);
-}
-
-.btn-secondary-hero,
-.inline-link-button,
-.btn-play {
-    background: rgba(255, 255, 255, 0.85);
-    color: var(--text-color);
-    border: 1px solid rgba(128, 104, 85, 0.1);
-}
-
-[data-theme="dark"] .btn-secondary-hero,
-[data-theme="dark"] .inline-link-button,
-[data-theme="dark"] .btn-play {
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--text-color);
-    border-color: rgba(255, 239, 223, 0.12);
-}
-
-.btn-secondary-hero {
-    padding: 1rem 1.75rem;
-    position: relative;
-    top: 0;
-    box-shadow: 0 6px 0 rgba(128, 104, 85, 0.12), 0 8px 20px rgba(0, 0, 0, 0.06);
-    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, background 0.18s ease;
-}
-
-.btn-secondary-hero:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 10px 0 rgba(128, 104, 85, 0.08), 0 14px 28px rgba(0, 0, 0, 0.08);
-    background: rgba(255, 255, 255, 0.95);
-}
-
-.btn-secondary-hero:active {
-    transform: translateY(4px);
-    box-shadow: 0 2px 0 rgba(128, 104, 85, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
-    top: 2px;
-}
-
-.hero-features,
-.sticky-filter-inner {
-    background: rgba(255, 255, 255, 0.58);
-    border: 1px solid rgba(128, 104, 85, 0.08);
-    border-radius: 24px;
-    padding: 0.65rem;
-    gap: 0.55rem;
-}
-
-[data-theme="dark"] .hero-features,
-[data-theme="dark"] .sticky-filter-inner {
-    background: rgba(255, 255, 255, 0.06);
-    border-color: rgba(255, 239, 223, 0.1);
-}
-
-.feature-badge,
-.sticky-tab {
-    border-radius: 999px;
-    padding: 0.8rem 1rem;
-    text-transform: none;
-    font-family: 'Fredoka', 'Segoe UI', sans-serif;
-    background: transparent;
-}
-
-.feature-icon {
-    display: inline-flex;
-}
-
-.feature-badge::before,
-.feature-badge::after {
-    display: none;
-}
-
-.feature-badge.active,
-.sticky-tab.active {
-    background: linear-gradient(135deg, rgba(255, 198, 132, 0.32), rgba(125, 220, 185, 0.3));
-    color: var(--text-color);
-    border: 1px solid rgba(128, 104, 85, 0.1);
-}
-
-[data-theme="dark"] .feature-badge,
-[data-theme="dark"] .sticky-tab {
-    color: var(--text-secondary);
-}
-
-[data-theme="dark"] .feature-badge.active,
-[data-theme="dark"] .sticky-tab.active {
-    border-color: rgba(255, 239, 223, 0.12);
-}
-
-.sticky-filter-bar {
-    top: 16px;
-    left: 12px;
-    right: 12px;
-    width: auto;
-    background: transparent;
-    border-bottom: 0;
-    box-shadow: none;
-}
-
-.hero-card-topline,
-.progress-card-header,
-.progress-caption,
-.featured-lab-header,
-.section-heading,
-.projects-header {
-    display: flex;
-    justify-content: space-between;
-    gap: 1rem;
-}
-
-.progress-card {
-    padding: 1rem;
-    border-radius: 22px;
-    background: rgba(255, 255, 255, 0.62);
-    border: 1px solid rgba(128, 104, 85, 0.08);
-}
-
-[data-theme="dark"] .progress-card {
-    background: rgba(255, 255, 255, 0.07);
-    border-color: rgba(255, 239, 223, 0.1);
-}
-
-.progress-track {
-    overflow: hidden;
-    height: 12px;
-    border-radius: 999px;
-    background: rgba(106, 191, 141, 0.14);
-    margin: 0.85rem 0 0.75rem;
-}
-
-.progress-fill {
-    display: block;
-    height: 100%;
-    border-radius: inherit;
-    background: linear-gradient(90deg, #6abf8d, #f2c26c);
-}
-
-.achievement-grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 1rem;
-}
-
-.reward-mint,
-.lab-card-mint {
-    background: linear-gradient(160deg, rgba(203, 247, 224, 0.9), rgba(255, 251, 241, 0.9));
-}
-
-.reward-lavender {
-    background: linear-gradient(160deg, rgba(236, 226, 255, 0.9), rgba(255, 251, 241, 0.9));
-}
-
-.lab-card-orange {
-    background: linear-gradient(160deg, rgba(255, 225, 191, 0.92), rgba(255, 252, 244, 0.94));
-}
-
-.lab-card-cyan {
-    background: linear-gradient(160deg, rgba(208, 245, 246, 0.92), rgba(255, 252, 244, 0.94));
-}
-
-.achievement-strip,
-.projects-section {
-    padding: 1.2rem 0 2.5rem;
-}
-
-.achievement-grid {
-    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
-}
-
-.achievement-card {
-    padding: 1.35rem;
-    border-radius: 28px;
-    background: rgba(255, 255, 255, 0.72);
-    border: 1px solid rgba(128, 104, 85, 0.1);
-    box-shadow: var(--shadow);
-}
-
-[data-theme="dark"] .achievement-card {
-    background: rgba(255, 255, 255, 0.07);
-    border-color: rgba(255, 239, 223, 0.1);
-}
-
-.achievement-card-gold {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 1rem;
-    align-items: start;
-    background: linear-gradient(145deg, rgba(255, 240, 210, 0.92), rgba(255, 252, 245, 0.94));
-}
-
-.achievement-icon,
-.achievement-stat {
-    width: 64px;
-    height: 64px;
-    border-radius: 20px;
-    display: grid;
-    place-items: center;
-    background: linear-gradient(135deg, #ffd497, #ffefc9);
-    color: #8f5f26;
-    font-size: 1.35rem;
-    font-family: 'Fredoka', sans-serif;
-}
-
-.achievement-stat {
-    width: auto;
-    height: auto;
-    border-radius: 18px;
-    padding: 0.45rem 0.8rem;
-    font-size: 2rem;
-}
-
-.section-heading,
-.projects-header {
-    align-items: end;
-    margin-bottom: 1.3rem;
-}
-
-.section-heading h2,
-.projects-header h2 {
-    font-family: 'Fredoka', sans-serif;
-    font-size: clamp(1.8rem, 4vw, 3rem);
-    line-height: 1;
-    margin-top: 0.4rem;
-}
-
-.projects-grid {
-    gap: 1.5rem;
-}
-
-.project-card {
-    position: relative;
-    overflow: hidden;
-    padding: 1.5rem 1.5rem 1.25rem;
-    display: flex;
-    flex-direction: column;
-    border-radius: 24px;
-    background: var(--surface-color);
-    border: 2px solid var(--accent-border);
-    box-shadow: var(--shadow);
-    transition: transform 0.25s ease, box-shadow 0.25s ease;
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
-}
-
-.project-card:hover {
-    transform: translateY(-6px);
-    border-color: var(--accent-color);
-    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.15);
-}
-
-[data-theme="light"] .project-card {
-    background: #ffffff;
-    border-color: rgba(106, 191, 141, 0.4);
-}
-
-[data-theme="dark"] .project-card {
-    background: #1e1a18;
-    border-color: rgba(159, 221, 181, 0.3);
-}
-
-.card-banner {
-    width: calc(100% + 3rem);
-    max-width: none;
-    margin: -1.5rem -1.5rem 0.85rem;
-    height: 140px;
-    object-fit: cover;
-    display: block;
-    border-radius: 24px 24px 0 0;
-    flex-shrink: 0;
-}
-
-.card-actions {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin-bottom: 0.75rem;
-    width: 100%;
-}
-
-.card-actions .btn-play {
-    margin-top: 0;
-    padding: 0.5rem 1rem;
-    font-size: 0.82rem;
-}
-
-.card-actions .btn-favorite,
-.card-actions .btn-share {
-    position: static;
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    flex-shrink: 0;
-    font-size: 0.85rem;
-    line-height: 1;
-    transition: background 0.18s ease, transform 0.18s ease;
-}
-
-[data-theme="dark"] .card-icon {
-    background: linear-gradient(145deg, rgba(40, 40, 40, 0.8), rgba(20, 20, 20, 0.9));
-    color: var(--footer-card-color);
-    box-shadow: inset 0 1px 0 rgba(252, 176, 91, 0.08);
-    border-color: rgba(252, 176, 91, 0.1);
-
-.card-actions .btn-share {
-    background: rgba(128, 104, 85, 0.06);
-    color: var(--text-secondary);
-}
-
-.card-actions .btn-share:hover {
-    background: rgba(106, 191, 141, 0.12);
-    color: #4a8a5e;
-    transform: scale(1.1);
-}
-
-.card-actions .btn-favorite {
-    background: transparent;
-    color: #a09080;
-    font-size: 0.9rem;
-}
-
-.card-actions .btn-favorite:hover {
-    color: #f5a623;
-    transform: scale(1.15);
-}
-
-.card-actions .btn-favorite.active {
-    color: #f5a623;
-}
-
-[data-theme="dark"] .card-actions .btn-share {
-    background: rgba(255, 255, 255, 0.06);
-    color: var(--text-secondary);
-}
-
-[data-theme="dark"] .card-actions .btn-share:hover {
-    background: rgba(106, 191, 141, 0.15);
-    color: #7fcfbd;
-}
-
-[data-theme="dark"] .card-actions .btn-favorite {
-    color: #7a6a5a;
-}
-
-[data-theme="dark"] .card-actions .btn-favorite:hover,
-[data-theme="dark"] .card-actions .btn-favorite.active {
-    color: #f5a623;
-}
-
-.project-card h3 {
-    font-family: 'Fredoka', sans-serif;
-    font-size: 1.3rem;
-    margin-top: 0.85rem;
-    margin-bottom: 0;
-}
-
-.project-card p {
-    color: var(--text-secondary);
-    margin: 0.5rem 0 0.75rem;
-    font-size: 0.92rem;
-    line-height: 1.5;
-}
-
-.btn-play {
-    padding: 0.75rem 1.2rem;
-    font-size: 0.92rem;
-}
-
-.project-card-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.3rem;
-    padding: 0.35rem 0.65rem;
-    border-radius: 6px;
-    font-size: 0.7rem;
-    font-weight: 600;
-    font-family: 'IBM Plex Mono', monospace;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    background: rgba(106, 191, 141, 0.08);
-    color: #5a8a5a;
-    border: none;
-}
-
-[data-theme="dark"] .project-card-badge {
-    background: rgba(106, 191, 141, 0.12);
-    color: #7fcfbd;
-}
-
-.project-card-meta {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.5rem;
-    margin-top: 0.5rem;
-    padding-top: 0.5rem;
-    border-top: 1px solid rgba(128, 104, 85, 0.06);
-}
-
-.footer {
-    margin-top: 3rem;
-    background: rgba(255, 252, 245, 0.76);
-    border-top: 1px solid rgba(128, 104, 85, 0.08);
-}
-
-[data-theme="dark"] .footer {
-    background: rgba(0, 0, 0, 0.7);
-}
-
-[data-theme="dark"] .footer,
-[data-theme="dark"] .footer a,
-[data-theme="dark"] .footer p,
-[data-theme="dark"] .footer h2,
-[data-theme="dark"] .footer h3 {
-    color: var(--text-color);
-}
-
-.reveal-on-scroll {
-    opacity: 0;
-    transform: translateY(20px);
-}
-
-.reveal-on-scroll.is-visible {
-    opacity: 1;
-    transform: translateY(0);
-    transition: opacity 0.55s ease, transform 0.55s ease;
-}
-
-@media (max-width: 1100px) {
-    .achievement-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .hero-timeline {
-        display: none;
-    }
-
-    .hero-shell {
-        padding: 0 1rem;
-    }
-
-    .hero-content {
-        max-width: 700px;
-        margin-left: auto;
-        margin-right: auto;
-    }
-}
-
-@media (max-width: 900px) {
-    .hero-shell {
-        flex-direction: column;
-        gap: 1rem;
-        padding: 0;
-    }
-
-    .hero-shell .filter-sidebar {
-        position: static;
-        flex: none;
-        width: 100%;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 0.3rem;
-        padding: 0.75rem;
-        border-radius: 16px;
-        overflow-x: auto;
-    }
-
-    .hero-shell .filter-sidebar .sidebar-header,
-    .hero-shell .filter-sidebar .sidebar-divider,
-    .hero-shell .filter-sidebar .sidebar-random-btn {
-        display: none;
-    }
-
-    .hero-shell .filter-sidebar .sidebar-tab {
-        flex: 0 0 auto;
-        padding: 0.4rem 0.7rem;
-        font-size: 0.82rem;
-        border-radius: 999px;
-        width: auto;
-    }
-
-    .hero-shell .filter-sidebar .sidebar-tab.active {
-        border-left: none;
-        border-radius: 999px;
-    }
-
-    .hero-shell .filter-sidebar .sidebar-tab:hover {
-        transform: none;
-    }
-
-    .hero-shell .filter-sidebar .sidebar-icon {
-        width: 22px;
-        height: 22px;
-    }
-
-    .hero-shell .filter-sidebar .sidebar-icon i,
-    .hero-shell .filter-sidebar .sidebar-icon svg {
-        width: 14px;
-        height: 14px;
-    }
-}
-
-@media (max-width: 768px) {
-    .cursor-glow {
-        display: none;
-    }
-
-    .nav-wrapper {
-        border-radius: 28px;
-        flex-wrap: wrap;
-    }
-
-    .search-box {
-        max-width: none;
-        width: 100%;
-        order: 3;
-    }
-
-    .hero-content {
-        padding: 1.5rem 1.35rem;
-    }
-
-    .hero-content::before {
-        width: 80px;
-    }
-
-    .hero-title {
-        font-size: 2.8rem;
-    }
-
-    .hero-meta span {
-        padding: 0.5rem 0.75rem;
-        font-size: 0.75rem;
-    }
-
-    .section-heading,
-    .projects-header,
-    .hero-card-topline,
-    .progress-card-header,
-    .progress-caption {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .cursor-glow,
-    .hero-orb-one,
-    .hero-orb-two,
-    .typing-text::after {
-        animation: none !important;
-    }
-
-    .project-card,
-    .project-card:hover,
-    .btn-explore,
-    .btn-secondary-hero,
-    .btn-random-project,
-    .lab-action,
-    .inline-link-button,
-    .btn-play {
-        transform: none !important;
-    }
-}
-
-    /* Fix card content alignment */
-.project-card {
-    text-align: left;
-    align-items: flex-start;
-}
-
-.project-card h3,
-.project-card p {
-    width: 100%;
-    text-align: left;
-}
-
-/* Ensure card-actions is aligned properly */
-.project-card .card-actions {
-    width: 100%;
-}
-
-/* Fix grid gaps on small screens */
-@media (max-width: 480px) {
-    .projects-grid {
-        gap: 1rem;
-    }
-    .project-card {
-        padding: 1rem;
-    }
-}
-
-/* ========================================================================== 
-   FINAL CARD + MODAL CONSISTENCY OVERRIDES
-   This section is intentionally appended at the end to override earlier
-   duplicate card/modal definitions and enforce consistent spacing, sizing,
-   and responsive behavior across all project pages.
-   ========================================================================== */
-
-.projects-grid {
-    display: grid !important;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 360px)) !important;
-    justify-content: center !important;
-    gap: 1.2rem !important;
-    margin: 0 auto 2rem !important;
-    align-items: stretch !important;
-}
-
-.projects-grid > .project-card {
-    justify-self: center !important;
-    width: 100% !important;
-    max-width: 360px !important;
-}
-
-.project-card {
-    min-height: 240px !important;
-    display: flex;
-    flex-direction: column !important;
-    justify-content: flex-start !important;
-    align-items: flex-start !important;
-    padding: 1.75rem 1.5rem 1.5rem !important;
-    border-radius: 28px !important;
-    background: var(--surface-color) !important;
-    border: 1px solid var(--accent-border) !important;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08) !important;
-    transition: transform 0.2s ease !important;
-    margin: 0 auto !important;
-    font-size: 0.95rem !important;
-    line-height: 1.6 !important;
-}
-
-.project-card .btn-play {
-    margin-top: 1rem !important;
-    align-self: flex-start !important;
-}
-
-.card-icon {
-    width: 72px !important;
-    height: 72px !important;
-    display: grid !important;
-    place-items: center !important;
-    border-radius: 22px !important;
-    background: var(--accent-soft) !important;
-    color: var(--accent-color) !important;
-    margin: 0 auto 1.2rem !important;
-    font-size: 2rem !important;
-}
-
-.modal {
-    display: none !important;
-    position: fixed !important;
-    top: 0 !important;
-    left: 0 !important;
-    width: 100% !important;
-    height: 100% !important;
-    background: var(--overlay-color) !important;
-    backdrop-filter: blur(6px) !important;
-    -webkit-backdrop-filter: blur(6px) !important;
-    z-index: 2000 !important;
-    animation: fadeIn 0.3s ease !important;
-}
-
-.modal.active {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-}
-
-.modal-content {
-    width: min(100%, 900px) !important;
-    max-width: 900px !important;
-    min-width: 320px !important;
-    max-height: 92vh !important;
-    overflow-y: auto !important;
-    overflow-x: hidden !important;
-    padding: 2rem !important;
-    border-radius: 20px !important;
-    box-shadow: var(--shadow-modal) !important;
-    background: var(--surface-color) !important;
-    border: 1px solid var(--border-color) !important;
-    margin: auto !important;
-}
-
-#modalBody {
-    width: 100% !important;
-    display: flex !important;
-    flex-direction: column !important;
-    gap: 1rem !important;
-    align-items: stretch !important;
-}
-
-#modalBody > * {
-    width: 100% !important;
-    max-width: 100% !important;
-}
-
-.modal-close {
-    z-index: 2100 !important;
-}
-
-@media (max-width: 768px) {
-    .modal-content {
-        width: min(100%, 92vw) !important;
-        padding: 1.5rem !important;
-        max-height: 90vh !important;
-    }
-
-    .project-card {
-        min-height: auto !important;
-        padding: 1.5rem 1.25rem !important;
-    }
-}
-
-@media (max-width: 576px) {
-    .projects-grid {
-        grid-template-columns: 1fr !important;
-        gap: 1rem !important;
-    }
-
-    .project-card {
-        padding: 1.25rem !important;
-        min-height: auto !important;
-    }
+  .btn-primary-hero:hover,
+  .btn-secondary-hero:hover {
+    transform: none;
+  }
 }
diff --git a/web-app/games.html b/web-app/games.html
index 895f670..697ed17 100644
--- a/web-app/games.html
+++ b/web-app/games.html
@@ -90,44 +90,103 @@
     </style>
 </head>
 
-<body data-page="games">
+<body data-page="games" class="sidebar-active">
     <a href="#main-content" class="skip-link">🚀 Skip to main content</a>
 
-    <!-- Navigation -->
-    <nav class="navbar" aria-label="Primary">
-        <div class="container">
-            <div class="logo">
-                <a href="index.html" style="text-decoration: none; color: inherit; display: flex; align-items: center; gap: 8px;">
-                    <span style="font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 10px;">🎮 Python Mini Projects</span>
-                </a>
+    <!-- Mobile Sidebar Toggle -->
+    <button type="button" class="mobile-sidebar-toggle" id="mobileSidebarToggle" aria-label="Toggle sidebar menu" aria-expanded="false">
+      <i class="fas fa-bars"></i>
+    </button>
+
+    <!-- ── PRIMARY SIDEBAR DOCK ──────────────────────────────────── -->
+    <aside class="sidebar-dock" id="mainSidebar" aria-label="Primary Navigation">
+      <div class="sidebar-brand">
+        <a class="logo-wrap" href="index.html">
+          <div class="logo-top-row">
+            <img alt="PyMini Logo" class="navbar-logo" src="assets/logo.png"/>
+            <div class="logo-text">
+              <span class="logo-py">py</span>
+              <span class="logo-mini">.mini</span>
+              <span class="logo-parens">()</span>
             </div>
-            <div class="nav-controls">
-                <button type="button" class="sound-toggle" id="soundToggle" aria-label="Mute sounds">
-                    <i class="fas fa-volume-up" aria-hidden="true"></i>
-                </button>
-                <button type="button" class="theme-toggle" id="themeToggle" aria-label="Switch to light mode">
-                    <i class="fas fa-moon" aria-hidden="true"></i>
-                </button>
+          </div>
+          <span class="logo-tagline">games, math &amp; terminal toys</span>
+        </a>
+      </div>
+
+      <div class="sidebar-search">
+        <div class="search-box" style="position:relative">
+          <i class="fas fa-search"></i>
+          <input aria-label="Search projects" id="searchInput" placeholder="Search projects or tags..." type="text"/>
+          <div class="search-dropdown" id="searchDropdown">
+            <div class="dropdown-content" id="searchDropdownContent">
+              <div class="search-loader" id="searchLoader" style="display:none"><div class="spinner"></div></div>
+              <div class="recent-searches-section" id="recentSearchesSection">
+                <div class="dropdown-section-title">Recent</div>
+                <div class="dropdown-list" id="recentSearchesList"></div>
+              </div>
+              <div class="results-section" id="resultsSection" style="display:none">
+                <div class="dropdown-section-title">Projects</div>
+                <div class="dropdown-list" id="resultsList"></div>
+              </div>
+              <div class="tips-section" id="tipsSection">
+                <p><strong>Search tips</strong></p>
+                <ul>
+                  <li>Type a project name — <code>snake</code>, <code>quiz</code></li>
+                  <li>Filter by tag — <code>game</code>, <code>math</code>, <code>utility</code></li>
+                  <li>Press <code>Ctrl+K</code> to focus search</li>
+                </ul>
+              </div>
+              <div class="no-results-message" id="noResultsMessage" style="display:none">No projects found. Try a different keyword.</div>
             </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="sidebar-menu-wrapper">
+        <div class="sidebar-menu-title">Categories</div>
+        <nav class="sidebar-menu" role="tablist" aria-label="Filter by category">
+          <button aria-selected="false" class="sidebar-tab" data-category="all" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="layers"></svg></span>
+            <span class="sidebar-label">All Projects</span>
+          </button>
+          <button aria-selected="true" class="sidebar-tab active" data-category="games" role="tab" tabindex="0">
+            <span class="sidebar-icon"><svg data-lucide="gamepad-2"></svg></span>
+            <span class="sidebar-label">Games Arcade</span>
+          </button>
+          <button aria-selected="false" class="sidebar-tab" data-category="math" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="sigma"></svg></span>
+            <span class="sidebar-label">Math Visuals</span>
+          </button>
+          <button aria-selected="false" class="sidebar-tab" data-category="utilities" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="wrench"></svg></span>
+            <span class="sidebar-label">Utilities Lab</span>
+          </button>
+          <button aria-selected="false" class="sidebar-tab" data-category="favorites" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="star"></svg></span>
+            <span class="sidebar-label">My Favorites</span>
+          </button>
+          <button aria-selected="false" class="sidebar-tab" data-category="playground" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="terminal"></svg></span>
+            <span class="sidebar-label">Playground</span>
+          </button>
+        </nav>
+      </div>
+
+      <div class="sidebar-footer">
+        <div class="sidebar-controls">
+          <button aria-label="Mute sounds" class="sound-toggle" id="soundToggle" type="button">
+            <i class="fas fa-volume-up"></i>
+          </button>
+          <button aria-label="Switch theme" class="theme-toggle" id="themeToggle" type="button">
+            <i class="fas fa-moon"></i>
+          </button>
         </div>
-    </nav>
+      </div>
+    </aside>
 
     <main id="main-content" tabindex="-1">
 
-        <!-- Category Tabs -->
-        <section class="tabs-section" aria-label="Project categories">
-            <div class="container">
-                <div class="tabs-wrapper">
-                    <div class="tabs" role="tablist" aria-label="Project categories">
-                        <a href="index.html" class="tab" role="tab">🌟 All Projects</a>
-                        <a href="games.html" class="tab active" role="tab" aria-selected="true">🎮 Games</a>
-                        <a href="math.html" class="tab" role="tab">🔢 Math</a>
-                        <a href="utilities.html" class="tab" role="tab">🔐 Utilities</a>
-                    </div>
-                </div>
-            </div>
-        </section>
-
         <!-- Page Title Section -->
         <section class="page-title-section" style="text-align: center; padding: 2rem 0 1rem 0;">
             <div class="container">
@@ -319,7 +378,9 @@ <h2 id="modalDialogTitle" class="modal-dialog-title visually-hidden" tabindex="-
     <script src="js/projects/snake.js"></script>
     <script src="js/projects/spot-the-difference.js"></script>
     <script src="js/projects.js"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
     <script src="js/main.js"></script>
+    <script>lucide.createIcons();</script>
 
 </body>
 </html>
diff --git a/web-app/generate_banners.py b/web-app/generate_banners.py
new file mode 100644
index 0000000..dd27ff5
--- /dev/null
+++ b/web-app/generate_banners.py
@@ -0,0 +1,457 @@
+import os
+import math
+from PIL import Image, ImageDraw, ImageFont, ImageFilter
+
+def create_radial_gradient(color_center, color_edge):
+    """Create a high-fidelity smooth radial gradient by resizing a eased 24x24 radial dot."""
+    w, h = 24, 24
+    img = Image.new("RGB", (w, h))
+    draw = ImageDraw.Draw(img)
+    cx, cy = w / 2 - 0.5, h / 2 - 0.5
+    max_dim = (cx**2 + cy**2)**0.5
+    for y in range(h):
+        for x in range(w):
+            dx = x - cx
+            dy = y - cy
+            dist = (dx**2 + dy**2)**0.5
+            ratio = min(dist / max_dim, 1.0)
+            # Smooth cubic easing
+            ratio = ratio * ratio * (3 - 2 * ratio)
+            r = int(color_center[0] * (1 - ratio) + color_edge[0] * ratio)
+            g = int(color_center[1] * (1 - ratio) + color_edge[1] * ratio)
+            b = int(color_center[2] * (1 - ratio) + color_edge[2] * ratio)
+            draw.point((x, y), fill=(r, g, b))
+    return img.resize((800, 450), Image.Resampling.BILINEAR)
+
+def draw_cyber_grid(draw, color, density=40):
+    """Draw a thin retro developer grid lines."""
+    for x in range(0, 800, density):
+        draw.line([(x, 0), (x, 450)], fill=color, width=1)
+    for y in range(0, 450, density):
+        draw.line([(0, y), (800, y)], fill=color, width=1)
+
+def draw_perspective_grid(draw, color):
+    """Draw an immersive synthwave perspective grid."""
+    horizon_y = 160
+    draw.line([(0, horizon_y), (800, horizon_y)], fill=color, width=1)
+    cx = 400
+    for x in range(-400, 1200, 40):
+        draw.line([(cx, horizon_y), (x, 450)], fill=color, width=1)
+    y = 450.0
+    while y > horizon_y + 5:
+        draw.line([(0, int(y)), (800, int(y))], fill=color, width=1)
+        y = horizon_y + (y - horizon_y) * 0.82
+
+def generate_banner(name, category, filename):
+    """Generate a highly customized, vector-styled banner for the card."""
+    # Tailor color scheme by category
+    if category == "games":
+        color_center = (25, 10, 55)
+        color_edge = (6, 3, 16)
+        color_accent = (236, 72, 153) # Neon Pink
+        color_accent_dim = (236, 72, 153, 40)
+        color_grid = (236, 72, 153, 20)
+        grid_type = "perspective"
+    elif category == "math":
+        color_center = (8, 24, 60)
+        color_edge = (3, 6, 20)
+        color_accent = (99, 102, 241) # Cosmic Indigo
+        color_accent_dim = (99, 102, 241, 50)
+        color_grid = (99, 102, 241, 24)
+        grid_type = "polar"
+    else: # utilities
+        color_center = (6, 32, 24)
+        color_edge = (2, 8, 6)
+        color_accent = (16, 185, 129) # Mint Green
+        color_accent_dim = (16, 185, 129, 50)
+        color_grid = (16, 185, 129, 24)
+        grid_type = "regular"
+
+    # Base Background Gradient
+    img = create_radial_gradient(color_center, color_edge)
+    
+    # Vector Overlay Layer
+    vector_layer = Image.new("RGBA", (800, 450))
+    v_draw = ImageDraw.Draw(vector_layer)
+
+    # 1. Grid type overlays
+    if grid_type == "perspective":
+        draw_perspective_grid(v_draw, color_grid)
+    elif grid_type == "polar":
+        # Draw concentric rings
+        cx, cy = 400, 225
+        for r in range(50, 500, 60):
+            v_draw.ellipse([cx - r, cy - r, cx + r, cy + r], outline=color_grid, width=1)
+        # Draw radial rays
+        for i in range(12):
+            angle = i * (math.pi / 6)
+            dx = int(500 * math.cos(angle))
+            dy = int(500 * math.sin(angle))
+            v_draw.line([(cx, cy), (cx + dx, cy + dy)], fill=color_grid, width=1)
+    else:
+        draw_cyber_grid(v_draw, color_grid, density=50)
+
+    # 2. Draw topic-specific customized vector art
+    n_lower = name.lower()
+    if "2048" in n_lower:
+        # Draw 2048 tile grid
+        for i, val in enumerate(["2", "4", "8", "16"]):
+            x = 240 + (i % 2) * 180
+            y = 120 + (i // 2) * 120
+            v_draw.rounded_rectangle([x, y, x + 140, y + 90], radius=12, fill=(255,255,255,8), outline=color_accent, width=2)
+            v_draw.text((x + 70, y + 45), val, fill=color_accent, anchor="mm")
+    elif "fibonacci" in n_lower:
+        # Draw golden spiral
+        cx, cy = 400, 225
+        points = []
+        angle = 0
+        r_scale = 0.5
+        for i in range(250):
+            r = r_scale * math.exp(0.015 * i)
+            x = cx + r * math.cos(angle)
+            y = cy + r * math.sin(angle)
+            points.append((x, y))
+            angle += 0.05
+        if len(points) > 1:
+            v_draw.line(points, fill=color_accent, width=3)
+    elif "pascal" in n_lower:
+        # Draw pascal hexagon nodes
+        rows = 4
+        for r in range(rows):
+            for c in range(r + 1):
+                x = 400 + (c - r / 2.0) * 100
+                y = 100 + r * 75
+                # draw glowing hex node
+                v_draw.ellipse([x - 22, y - 22, x + 22, y + 22], fill=(255,255,255,10), outline=color_accent, width=2)
+    elif "projectile" in n_lower:
+        # Parabolic motion curve
+        points = []
+        for x_val in range(100, 700, 4):
+            # Parabola formula
+            t = (x_val - 100) / 500.0
+            y_val = 350 - 400 * t * (1 - t)
+            points.append((x_val, y_val))
+        v_draw.line(points, fill=color_accent, width=3)
+        # Draw target explosion
+        v_draw.ellipse([690, 340, 710, 360], fill=color_accent, outline=(255,255,255), width=2)
+    elif "calculator" in n_lower:
+        # Operator grids
+        ops = ["+", "-", "×", "÷"]
+        for i, op in enumerate(ops):
+            x = 220 + i * 100
+            y = 160
+            v_draw.rounded_rectangle([x, y, x + 70, y + 70], radius=15, fill=(255,255,255,12), outline=color_accent, width=2)
+            v_draw.text((x + 35, y + 35), op, fill=color_accent, anchor="mm")
+    elif "dice" in n_lower:
+        # Two tilted glowing dice
+        def draw_die(ox, oy):
+            v_draw.rounded_rectangle([ox, oy, ox + 90, oy + 90], radius=18, fill=(255,255,255,10), outline=color_accent, width=3)
+            # pips
+            pips = [(ox + 45, oy + 45), (ox + 25, oy + 25), (ox + 65, oy + 65)]
+            for p in pips:
+                v_draw.ellipse([p[0]-6, p[1]-6, p[0]+6, p[1]+6], fill=color_accent)
+        draw_die(250, 140)
+        draw_die(460, 200)
+    elif "coin" in n_lower:
+        # Glowing spinning gold coin arcs
+        cx, cy = 400, 225
+        v_draw.ellipse([cx - 70, cy - 70, cx + 70, cy + 70], outline=color_accent, width=3)
+        v_draw.ellipse([cx - 40, cy - 40, cx + 40, cy + 40], outline=color_accent, width=1)
+        v_draw.text((cx, cy), "$", fill=color_accent, anchor="mm")
+        # Spin rings
+        v_draw.ellipse([cx - 110, cy - 35, cx + 110, cy + 35], outline=color_accent_dim, width=2)
+    elif "snake" in n_lower:
+        # Serpentine trail
+        pts = [(160, 320), (320, 320), (320, 160), (520, 160), (520, 280), (600, 280)]
+        v_draw.line(pts, fill=color_accent, width=6, joint="round")
+        # Draw apple
+        v_draw.ellipse([625, 270, 645, 290], fill=(239, 68, 68), outline=(255,255,255), width=2)
+    elif "dots" in n_lower:
+        # Connect dots
+        for r in range(4):
+            for c in range(6):
+                x = 220 + c * 70
+                y = 120 + r * 70
+                v_draw.ellipse([x - 4, y - 4, x + 4, y + 4], fill=(255,255,255,180))
+        # Draw active connections
+        v_draw.line([(220, 120), (290, 120)], fill=color_accent, width=3)
+        v_draw.line([(290, 120), (290, 190)], fill=color_accent, width=3)
+        v_draw.line([(290, 190), (360, 190)], fill=color_accent, width=3)
+    elif "tower" in n_lower:
+        # Tower of hanoi poles and rings
+        v_draw.line([(250, 350), (250, 150)], fill=(255,255,255,120), width=6)
+        v_draw.line([(400, 350), (400, 150)], fill=(255,255,255,120), width=6)
+        v_draw.line([(550, 350), (550, 150)], fill=(255,255,255,120), width=6)
+        v_draw.line([(180, 350), (620, 350)], fill=(255,255,255,120), width=8)
+        # rings
+        v_draw.rounded_rectangle([320, 330, 480, 348], radius=6, fill=color_accent, outline=(255,255,255,100))
+        v_draw.rounded_rectangle([340, 310, 460, 328], radius=6, fill=color_accent, outline=(255,255,255,100))
+        v_draw.rounded_rectangle([210, 330, 290, 348], radius=6, fill=color_accent)
+    elif "hangman" in n_lower:
+        # Gallows
+        v_draw.line([(250, 350), (400, 350)], fill=(255,255,255,100), width=6)
+        v_draw.line([(320, 350), (320, 120)], fill=(255,255,255,100), width=6)
+        v_draw.line([(320, 120), (450, 120)], fill=(255,255,255,100), width=6)
+        v_draw.line([(450, 120), (450, 160)], fill=(255,255,255,100), width=3)
+        # Glowing stick figure
+        v_draw.ellipse([435, 160, 465, 190], outline=color_accent, width=3) # head
+        v_draw.line([(450, 190), (450, 260)], fill=color_accent, width=3) # body
+        v_draw.line([(450, 205), (420, 230)], fill=color_accent, width=3) # arms
+        v_draw.line([(450, 205), (480, 230)], fill=color_accent, width=3)
+    elif "password" in n_lower:
+        # Key lock shield
+        cx, cy = 400, 225
+        v_draw.ellipse([cx-40, cy-40, cx+40, cy+40], outline=color_accent, width=4)
+        v_draw.rectangle([cx-8, cy, cx+8, cy+50], fill=color_accent)
+        v_draw.ellipse([cx-8, cy, cx+8, cy+16], fill=(255,255,255))
+    elif "speed" in n_lower or "typing" in n_lower:
+        # Keyboard buttons
+        for c in range(5):
+            x = 200 + c * 90
+            y = 180
+            v_draw.rounded_rectangle([x, y, x + 70, y + 70], radius=10, fill=(255,255,255,10), outline=color_accent, width=2)
+            key = ["Q", "W", "E", "R", "T"][c]
+            v_draw.text((x + 35, y + 35), key, fill=color_accent, anchor="mm")
+    elif "armstrong" in n_lower or "prime" in n_lower:
+        # Math number grids
+        for r in range(3):
+            for c in range(5):
+                num = str(r * 5 + c + 1)
+                x = 220 + c * 80
+                y = 130 + r * 70
+                is_prime = num in ["2", "3", "5", "7", "11", "13"]
+                bg = color_accent if is_prime else (255,255,255,12)
+                fg = (255,255,255) if is_prime else color_accent
+                v_draw.rounded_rectangle([x, y, x + 60, y + 50], radius=8, fill=bg, outline=color_accent, width=2)
+                v_draw.text((x + 30, y + 25), num, fill=fg, anchor="mm")
+    elif "coordinate" in n_lower or "polar" in n_lower:
+        # Cartesian grid intersecting polar coordinate circle mesh
+        cx, cy = 400, 225
+        v_draw.line([(150, cy), (650, cy)], fill=(255,255,255,80), width=2)
+        v_draw.line([(cx, 50), (cx, 400)], fill=(255,255,255,80), width=2)
+        for r in [50, 100, 150]:
+            v_draw.ellipse([cx-r, cy-r, cx+r, cy+r], outline=color_accent, width=2)
+    elif "collatz" in n_lower:
+        # Beautiful branching curves representing paths
+        cx, cy = 400, 380
+        for i in range(12):
+            angle = -math.pi / 2 + (i - 5.5) * 0.08
+            pts = [(cx, cy), (cx + 120 * math.cos(angle), cy - 120 * math.sin(angle)), 
+                   (cx + 250 * math.cos(angle + 0.1), cy - 250 * math.sin(angle + 0.1))]
+            v_draw.line(pts, fill=color_accent, width=2)
+    elif "derivative" in n_lower:
+        # Curve and tangent line
+        pts = []
+        for x_val in range(150, 650, 5):
+            t = (x_val - 150) / 500.0
+            y_val = 320 - 150 * math.sin(t * math.pi * 1.5)
+            pts.append((x_val, y_val))
+        v_draw.line(pts, fill=(255,255,255,100), width=2)
+        # Tangent line at t=0.5 (x=400, y=210)
+        v_draw.line([(250, 140), (550, 280)], fill=color_accent, width=3)
+        v_draw.ellipse([395, 205, 405, 215], fill=color_accent)
+    elif "simon" in n_lower:
+        # Simon Says 4 neon color quadrants
+        cx, cy = 400, 225
+        colors = [(239, 68, 68), (59, 130, 246), (16, 185, 129), (245, 158, 11)] # R, B, G, Y
+        for i in range(4):
+            dx = -1 if i%2 == 0 else 1
+            dy = -1 if i//2 == 0 else 1
+            x = cx + dx * 10 - (50 if dx < 0 else 0)
+            y = cy + dy * 10 - (50 if dy < 0 else 0)
+            v_draw.rounded_rectangle([x, y, x+50, y+50], radius=8, fill=colors[i])
+    elif "flappy" in n_lower:
+        # Glowing pillars
+        v_draw.rounded_rectangle([250, 0, 310, 160], radius=8, fill=(255,255,255,12), outline=color_accent, width=3)
+        v_draw.rounded_rectangle([250, 290, 310, 450], radius=8, fill=(255,255,255,12), outline=color_accent, width=3)
+        v_draw.rounded_rectangle([520, 0, 580, 220], radius=8, fill=(255,255,255,12), outline=color_accent, width=3)
+        v_draw.rounded_rectangle([520, 350, 580, 450], radius=8, fill=(255,255,255,12), outline=color_accent, width=3)
+        # Bird
+        v_draw.ellipse([390, 215, 420, 245], fill=color_accent, outline=(255,255,255), width=2)
+    elif "morse" in n_lower:
+        # Dots and dashes
+        symbols = [".", "-", "-", "."]
+        for i, s in enumerate(symbols):
+            x = 220 + i * 100
+            y = 180
+            if s == ".":
+                v_draw.ellipse([x + 25, y + 25, x + 45, y + 45], fill=color_accent)
+            else:
+                v_draw.rounded_rectangle([x + 10, y + 30, x + 60, y + 40], radius=5, fill=color_accent)
+    elif "converter" in n_lower:
+        # binary text strings floating
+        v_draw.text((250, 130), "01001011", fill=color_accent_dim)
+        v_draw.text((450, 130), "HEX: 4B", fill=color_accent)
+        v_draw.text((320, 250), "DEC: 75", fill=color_accent)
+    elif "mole" in n_lower:
+        # Hammer and mole hole
+        cx, cy = 400, 225
+        v_draw.ellipse([cx-60, cy+10, cx+60, cy+40], fill=(0,0,0,100), outline=color_accent, width=2) # hole
+        # Mole head poking out
+        v_draw.rounded_rectangle([cx-30, cy-50, cx+30, cy+20], radius=20, fill=color_accent)
+        v_draw.ellipse([cx-15, cy-35, cx-5, cy-25], fill=(255,255,255))
+        v_draw.ellipse([cx+5, cy-35, cx+15, cy-25], fill=(255,255,255))
+    elif "rock" in n_lower or "scissor" in n_lower:
+        # Simple shapes for rock, paper, scissors
+        v_draw.ellipse([220, 160, 300, 240], fill=(255,255,255,10), outline=color_accent, width=3) # Rock
+        v_draw.rectangle([360, 160, 440, 240], fill=(255,255,255,10), outline=color_accent, width=3) # Paper
+        # Scissors (two lines crossing)
+        v_draw.line([(500, 160), (580, 240)], fill=color_accent, width=5)
+        v_draw.line([(580, 160), (500, 240)], fill=color_accent, width=5)
+    elif "word" in n_lower or "scramble" in n_lower:
+        # Scattered letters
+        letters = ["P", "Y", "T", "H", "O", "N"]
+        coords = [(210, 130), (330, 270), (450, 120), (570, 260), (280, 210), (500, 190)]
+        for i, l in enumerate(letters):
+            x, y = coords[i]
+            v_draw.text((x, y), l, fill=color_accent)
+    elif "flames" in n_lower:
+        # Hearts and flames
+        cx, cy = 400, 225
+        v_draw.ellipse([cx - 40, cy - 20, cx, cy + 20], fill=color_accent)
+        v_draw.ellipse([cx, cy - 20, cx + 40, cy + 20], fill=color_accent)
+        v_draw.polygon([(cx - 38, cy + 5), (cx + 38, cy + 5), (cx, cy + 50)], fill=color_accent)
+    elif "blackjack" in n_lower:
+        # Playing cards
+        def draw_card(x, y, val):
+            v_draw.rounded_rectangle([x, y, x+80, y+120], radius=8, fill=(255,255,255,10), outline=color_accent, width=3)
+            v_draw.text((x+40, y+60), val, fill=color_accent, anchor="mm")
+        draw_card(260, 150, "A")
+        draw_card(460, 150, "10")
+    elif "tic-tac-toe" in n_lower:
+        # Tic-tac-toe board and winning diagonal match state
+        cx, cy = 400, 225
+        # Grid lines
+        v_draw.line([(cx-60, cy-100), (cx-60, cy+100)], fill=color_accent, width=4)
+        v_draw.line([(cx+60, cy-100), (cx+60, cy+100)], fill=color_accent, width=4)
+        v_draw.line([(cx-100, cy-60), (cx+100, cy-60)], fill=color_accent, width=4)
+        v_draw.line([(cx-100, cy+60), (cx+100, cy+60)], fill=color_accent, width=4)
+        
+        # Helper X/O drawers
+        def draw_x(ox, oy):
+            v_draw.line([(ox-20, oy-20), (ox+20, oy+20)], fill=(255, 255, 255), width=4)
+            v_draw.line([(ox+20, oy-20), (ox-20, oy+20)], fill=(255, 255, 255), width=4)
+            
+        def draw_o(ox, oy):
+            v_draw.ellipse([ox-20, oy-20, ox+20, oy+20], outline=color_accent, width=4)
+            
+        # Draw game state (Winning diagonal for X)
+        draw_x(cx-100, cy-100) # Top-Left
+        draw_x(cx, cy)         # Middle-Center
+        draw_x(cx+100, cy+100) # Bottom-Right
+        
+        draw_o(cx-100, cy)     # Middle-Left
+        draw_o(cx+100, cy-100) # Top-Right
+        
+        # Glowing winning strike line
+        v_draw.line([(cx-130, cy-130), (cx+130, cy+130)], fill=(255, 75, 75), width=6)
+    elif "color" in n_lower or "palette" in n_lower:
+        # Color palette suggestor
+        colors = [(239, 68, 68), (245, 158, 11), (253, 224, 71), (16, 185, 129), (59, 130, 246)]
+        for i, col in enumerate(colors):
+            x = 220 + i * 80
+            y = 175
+            v_draw.ellipse([x, y, x + 65, y + 65], fill=col, outline=(255,255,255,100), width=2)
+    elif "pet" in n_lower or "productivity" in n_lower:
+        # Cute paw print
+        cx, cy = 400, 225
+        v_draw.ellipse([cx-20, cy-15, cx+20, cy+25], fill=color_accent) # pad
+        v_draw.ellipse([cx-35, cy-40, cx-15, cy-20], fill=color_accent) # toe 1
+        v_draw.ellipse([cx-10, cy-50, cx+10, cy-30], fill=color_accent) # toe 2
+        v_draw.ellipse([cx+15, cy-40, cx+35, cy-20], fill=color_accent) # toe 3
+    else:
+        # Default nice abstract waves
+        points = []
+        for x in range(0, 800, 10):
+            y = 225 + 100 * math.sin(x * 0.01) + 20 * math.cos(x * 0.03)
+            points.append((x, y))
+        v_draw.line(points, fill=color_accent, width=3)
+
+    # Blur vectors slightly for neon glow look
+    glow = vector_layer.filter(ImageFilter.GaussianBlur(8))
+    # Composite: Background + Glow + Sharp Vector Outline
+    composite = Image.alpha_composite(Image.alpha_composite(img.convert("RGBA"), glow), vector_layer)
+
+    # 3. Floating Glassmorphism Center Card Panel
+    glass_layer = Image.new("RGBA", (800, 450))
+    gl_draw = ImageDraw.Draw(glass_layer)
+    gl_draw.rounded_rectangle([150, 110, 650, 340], radius=24, fill=(255, 255, 255, 14), outline=(255, 255, 255, 45), width=2)
+    
+    # Load fonts cleanly
+    try:
+        font_title = ImageFont.truetype("segoeui.ttf", 36)
+        font_subtitle = ImageFont.truetype("segoeui.ttf", 16)
+    except IOError:
+        try:
+            font_title = ImageFont.truetype("arial.ttf", 36)
+            font_subtitle = ImageFont.truetype("arial.ttf", 16)
+        except IOError:
+            font_title = ImageFont.load_default()
+            font_subtitle = ImageFont.load_default()
+
+    # Draw Text Labels
+    # Shadow text
+    gl_draw.text((402, 212), name, fill=(0, 0, 0, 160), anchor="mm", font=font_title)
+    # Highlight text
+    gl_draw.text((400, 210), name, fill=(255, 255, 255, 255), anchor="mm", font=font_title)
+    
+    cat_text = category.upper() + " LAB" if category != "games" else "GAMES ARCADE"
+    # Category tag kicker
+    gl_draw.text((400, 275), cat_text, fill=color_accent, anchor="mm", font=font_subtitle)
+
+    final_img = Image.alpha_composite(composite, glass_layer).convert("RGB")
+    
+    # Save Image
+    os.makedirs(os.path.dirname(filename), exist_ok=True)
+    final_img.save(filename, "JPEG", quality=90)
+    print(f"Generated HD banner: {filename}")
+
+# Project category directory mappings
+projects = [
+    # GAMES
+    ("2048 Game", "games", "2048-game.jpg"),
+    ("Coin Flip", "games", "coin-flip.jpg"),
+    ("Dice Rolling", "games", "dice-rolling.jpg"),
+    ("Dots & Boxes AI", "games", "dots-boxes.jpg"),
+    ("Emoji Memory Game", "games", "emoji-memory.jpg"),
+    ("FLAMES Game", "games", "flames.jpg"),
+    ("Flappy Game", "games", "flappy-game.jpg"),
+    ("Hangman", "games", "hangman.jpg"),
+    ("Math Quiz", "games", "math-quiz.jpg"),
+    ("Number Guessing", "games", "number-guessing.jpg"),
+    ("Password Forge", "games", "password-forge.jpg"),
+    ("Rock Paper Scissors", "games", "rock-paper-scissor.jpg"),
+    ("Snake Game", "games", "snake-game.jpg"),
+    ("Whack-a-Mole", "games", "whack-a-mole.jpg"),
+    ("Word Scramble", "games", "word-scramble.jpg"),
+    ("Blackjack 21", "games", "blackjack21.jpg"),
+
+    # MATH
+    ("AP/GP/AGP/HP Recognizer", "math", "progression-recognizer.jpg"),
+    ("Armstrong Numbers", "math", "armstrong.jpg"),
+    ("Calculator", "math", "calculator.jpg"),
+    ("Collatz Conjecture", "math", "collatz.jpg"),
+    ("Coordinate to Polar", "math", "coordinate-polar-transform.jpg"),
+    ("Derivative Calculator", "math", "derivative-calculator.jpg"),
+    ("Fibonacci Series", "math", "fibonacci.jpg"),
+    ("Pascal's Triangle", "math", "pascal-triangle.jpg"),
+    ("Prime Analyzer", "math", "prime-analyzer.jpg"),
+    ("Projectile Motion", "math", "projectile-motion.jpg"),
+
+    # UTILITIES
+    ("Morse Code", "utilities", "morse-code.jpg"),
+    ("Number Converter", "utilities", "number-converter.jpg"),
+    ("Tower of Hanoi", "utilities", "tower-of-hanoi.jpg"),
+    ("Typing Speed Tester", "utilities", "typing-speed-tester.jpg"),
+    ("Color Palette Suggestor", "utilities", "color-palette.jpg"),
+    ("Productivity Pet", "utilities", "productive-pet.jpg"),
+    ("Tic Tac Toe", "games", "tic-tac-toe.jpg"),
+]
+
+# Run generation
+banners_dir = "assets/banners"
+for name, cat, filename in projects:
+    dest_path = os.path.join(banners_dir, filename)
+    generate_banner(name, cat, dest_path)
+
+print("All HD banner images generated successfully!")
diff --git a/web-app/index.html b/web-app/index.html
index 5c12c92..07813e5 100644
--- a/web-app/index.html
+++ b/web-app/index.html
@@ -1,12 +1,11 @@
 <!DOCTYPE html>
-
-<html lang="en">
+<html lang="en" data-theme="dark">
 <head>
 <meta charset="utf-8"/>
 <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
 <meta content="Play 18+ beginner-friendly Python mini projects in your browser—games, math tools, and utilities with a modern dark/light UI." name="description"/>
 <meta content="dark light" name="color-scheme"/>
-<meta content="#0f172a" id="themeColorMeta" name="theme-color"/>
+<meta content="#0c0f1a" id="themeColorMeta" name="theme-color"/>
 <meta content="Python Mini Projects — Web Edition" property="og:title"/>
 <meta content="Interactive games, math visualizations, and utilities—no install required." property="og:description"/>
 <meta content="website" property="og:type"/>
@@ -14,1157 +13,64 @@
 <meta content="summary" name="twitter:card"/>
 <meta content="Python Mini Projects — Web Edition" name="twitter:title"/>
 <meta content="Interactive games, math visualizations, and utilities in the browser." name="twitter:description"/>
-<title>Python Mini Projects - Interactive Web Edition</title>
+<title>Python Mini Projects — Interactive Web Edition</title>
 <link href="assets/favicon.svg" rel="icon" type="image/svg+xml"/>
-<link href="https://fonts.googleapis.com" rel="preconnect"/>
-<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&amp;family=Space+Grotesk:wght@600;700&amp;display=swap" rel="stylesheet"/>
 <link href="css/styles.css" rel="stylesheet"/>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
-<!--
-        ╔══════════════════════════════════════════════════════════════╗
-        ║  PLAYGROUND STYLES                                           ║
-        ║  Scoped entirely to .playground-* selectors.                 ║
-        ║  Add these to css/styles.css if you prefer a single file.    ║
-        ╚══════════════════════════════════════════════════════════════╝
-    -->
-<style>
-        /* ── Section wrapper ───────────────────────────────────────── */
-        .playground-section {
-            padding: 3rem 0 5rem;
-            animation: fadeIn 0.35s ease;
-            position: relative;
-            z-index: 2;
-            background-color: var(--bg-color);
-        }
-
-        /* ── Header ─────────────────────────────────────────────────── */
-        .playground-header {
-            text-align: center;
-            margin-bottom: 2.5rem;
-        }
-
-        .playground-title-row {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 1.25rem;
-            flex-wrap: wrap;
-            margin-bottom: 0.75rem;
-        }
-
-        .playground-title {
-            font-size: 2.25rem;
-            background: linear-gradient(135deg, #10b981, #6366f1);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin: 0;
-        }
-
-        .playground-subtitle {
-            color: var(--text-secondary);
-            font-size: 1.05rem;
-            margin-bottom: 0.6rem;
-        }
-
-        .playground-subtitle a {
-            color: var(--primary-color);
-            text-decoration: none;
-            font-weight: 600;
-        }
-
-        .playground-subtitle a:hover {
-            color: var(--secondary-color);
-        }
-
-        .playground-hint {
-            font-size: 0.875rem;
-            color: var(--text-secondary);
-            opacity: 0.75;
-        }
-
-        .playground-hint kbd {
-            background: var(--surface-color);
-            border: 1px solid var(--border-color);
-            border-radius: 5px;
-            padding: 0.2rem 0.45rem;
-            font-family: 'Courier New', monospace;
-            font-size: 0.8rem;
-            font-weight: 700;
-            color: var(--text-color);
-            box-shadow: 0 2px 0 var(--border-color);
-        }
-
-        /* ── Status badge ───────────────────────────────────────────── */
-        .playground-status {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            background: var(--surface-color);
-            border: 1px solid var(--border-color);
-            border-radius: 50px;
-            padding: 0.35rem 1rem;
-            font-size: 0.875rem;
-            font-weight: 500;
-            color: var(--text-secondary);
-            white-space: nowrap;
-        }
-
-        .status-dot {
-            width: 9px;
-            height: 9px;
-            border-radius: 50%;
-            background: var(--border-color);
-            flex-shrink: 0;
-            transition: background 0.3s ease;
-        }
-
-        .status-dot.idle {
-            background: var(--text-secondary);
-        }
-
-        .status-dot.loading {
-            background: var(--warning-color);
-            animation: pgPulse 1s ease-in-out infinite;
-        }
-
-        .status-dot.ready {
-            background: var(--success-color);
-        }
-
-        .status-dot.error {
-            background: var(--danger-color);
-        }
-
-        @keyframes pgPulse {
-
-            0%,
-            100% {
-                opacity: 1;
-                transform: scale(1);
-            }
-
-            50% {
-                opacity: 0.4;
-                transform: scale(0.82);
-            }
-        }
-
-        /* ── Two-column editor / console layout ─────────────────────── */
-        .playground-body {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 1.5rem;
-            margin-bottom: 1.5rem;
-        }
-
-        @media (max-width: 768px) {
-            .playground-body {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        /* ── Panel shared styles ────────────────────────────────────── */
-        .editor-panel,
-        .console-panel {
-            display: flex;
-            flex-direction: column;
-            background: var(--surface-color);
-            border: 2px solid var(--border-color);
-            border-radius: 16px;
-            overflow: hidden;
-            transition: border-color 0.25s ease;
-        }
-
-        .editor-panel:focus-within {
-            border-color: var(--primary-color);
-        }
-
-        /* ── Panel header ───────────────────────────────────────────── */
-        .panel-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0.75rem 1.25rem;
-            background: rgba(99, 102, 241, 0.08);
-            border-bottom: 1px solid var(--border-color);
-            font-size: 0.9rem;
-            font-weight: 600;
-            color: var(--text-secondary);
-            gap: 0.75rem;
-            flex-wrap: wrap;
-        }
-
-        .panel-header span {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        /* ── Panel action buttons ───────────────────────────────────── */
-        .editor-actions {
-            display: flex;
-            gap: 0.5rem;
-        }
-
-        .btn-panel-action {
-            background: transparent;
-            border: 1px solid var(--border-color);
-            color: var(--text-secondary);
-            padding: 0.3rem 0.75rem;
-            border-radius: 8px;
-            cursor: pointer;
-            font-size: 0.8rem;
-            font-weight: 600;
-            transition: all 0.2s ease;
-            display: inline-flex;
-            align-items: center;
-            gap: 0.35rem;
-        }
-
-        .btn-panel-action:hover {
-            background: rgba(99, 102, 241, 0.12);
-            border-color: var(--primary-color);
-            color: var(--primary-color);
-        }
-
-        /* ── Code textarea ──────────────────────────────────────────── */
-        #pythonEditor {
-            flex: 1;
-            min-height: 320px;
-            background: transparent;
-            border: none;
-            outline: none;
-            resize: vertical;
-            color: var(--text-color);
-            font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Courier New', monospace;
-            font-size: 0.95rem;
-            line-height: 1.65;
-            padding: 1.25rem;
-            tab-size: 4;
-        }
-
-        #pythonEditor::placeholder {
-            color: var(--text-secondary);
-            opacity: 0.55;
-        }
-
-        /* ── Console output ─────────────────────────────────────────── */
-        .console-output {
-            flex: 1;
-            min-height: 320px;
-            padding: 1.25rem;
-            margin: 0;
-            font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Courier New', monospace;
-            font-size: 0.9rem;
-            line-height: 1.65;
-            overflow-y: auto;
-            background: transparent;
-            color: var(--text-color);
-            white-space: pre-wrap;
-            word-break: break-word;
-        }
-
-        .pg-placeholder {
-            color: var(--text-secondary);
-            opacity: 0.5;
-            font-style: italic;
-        }
-
-        /* ── Run button + controls ──────────────────────────────────── */
-        .playground-controls {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            flex-wrap: wrap;
-        }
-
-        .btn-run {
-            background: linear-gradient(135deg, #10b981, #059669);
-            color: #fff;
-            border: none;
-            padding: 0.85rem 2.5rem;
-            border-radius: 50px;
-            cursor: pointer;
-            font-size: 1.05rem;
-            font-weight: 700;
-            transition: all 0.25s ease;
-            display: inline-flex;
-            align-items: center;
-            gap: 0.6rem;
-            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
-        }
-
-        .btn-run:hover:not(:disabled) {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
-        }
-
-        .btn-run:active:not(:disabled) {
-            transform: translateY(0);
-        }
-
-        .btn-run:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            transform: none;
-            box-shadow: none;
-        }
-
-        .run-hint {
-            font-size: 0.875rem;
-            color: var(--text-secondary);
-            opacity: 0.7;
-        }
-
-        .run-hint kbd {
-            background: var(--surface-color);
-            border: 1px solid var(--border-color);
-            border-radius: 5px;
-            padding: 0.15rem 0.4rem;
-            font-family: 'Courier New', monospace;
-            font-size: 0.8rem;
-            font-weight: 700;
-            color: var(--text-color);
-        }
-
-        .btn-stop {
-            background: linear-gradient(135deg, #d22b44, #dc1331);
-            color: #fff;
-            border: none;
-            padding: 0.85rem 2.5rem;
-            border-radius: 50px;
-            cursor: pointer;
-            font-size: 1.05rem;
-            font-weight: 700;
-            transition: all 0.25s ease;
-            display: inline-flex;
-            align-items: center;
-            gap: 0.6rem;
-
-        }
-
-        .btn-stop:hover:not(:disabled) {
-            transform: translateY(-1px);
-            box-shadow: 0 8px 25px #e74c3c;
-        }
-
-        .btn-stop:active {
-            transform: translateY(0);
-        }
-
-        .btn-stop:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            transform: none;
-            box-shadow: none;
-        }
-
-        /* ==========================================================================
-           REACTIVE FLOATING ISLAND NAVBAR DESIGN
-           ========================================================================== */
-
-        .navbar {
-            width: 100%;
-            background: #071227;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-            position: sticky;
-            top: 0;
-            z-index: 1000;
-            padding: 14px 0;
-            background: transparent;
-        }
-
-        .nav-island {
-            max-width: 1240px;
-            margin: 0 auto;
-            background: rgba(10, 19, 34, 0.8);
-            backdrop-filter: blur(16px);
-            -webkit-backdrop-filter: blur(16px);
-            border: 1px solid rgba(255, 255, 255, 0.07);
-            border-radius: 24px;
-            padding: 0 24px;
-            height: 76px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 20px;
-            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        /* Light Mode Token Architecture for the Floating Component */
-        [data-theme="light"] .nav-island {
-            background: rgba(255, 255, 255, 0.8);
-            border-color: rgba(15, 23, 42, 0.08);
-            box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
-        }
-
-        /* Subtle squeeze effect when scrolling down */
-        .navbar.scrolled .nav-island {
-            max-width: 1140px;
-            border-radius: 16px;
-            height: 68px;
-            background: rgba(6, 11, 19, 0.95);
-        }
-        [data-theme="light"] .navbar.scrolled .nav-island {
-            background: rgba(248, 250, 252, 0.95);
-        }
-
-        /* =========================
-        LOGO & BRANDING BLOCK
-        ========================= */
-
-        .logo-wrap {
-            display: flex;
-            align-items: center;
-            text-decoration: none;
-            gap: 10px;
-            transition: transform 0.2s ease;
-        }
-
-        .logo-wrap:hover {
-            transform: scale(1.02);
-        }
-
-        .navbar-logo {
-            width: 50px;
-            height: 50px;
-            object-fit: contain;
-            filter: drop-shadow(0 0 14px rgba(34, 197, 94, 0.3));
-            transition: transform 0.3s ease, filter 0.3s ease;
-        }
-
-        .navbar-logo:hover {
-            transform: scale(1.08) rotate(-4deg);
-            filter: drop-shadow(0 0 20px rgba(34, 197, 94, 0.5));
-        }
-
-        .logo-text {
-            display: flex;
-            align-items: center;
-            font-family: 'Space Grotesk', sans-serif;
-            font-size: 1.6rem;
-            font-weight: 700;
-            letter-spacing: -0.5px;
-        }
-
-        .logo-py {
-            color: #94a3b8;
-            font-weight: 600;
-            transition: color 0.3s ease;
-            text-shadow: 0 0 20px rgba(148, 163, 184, 0.2);
-        }
-        .logo-mini {
-            color: #ffffff;
-            font-weight: 700;
-            transition: color 0.3s ease;
-        }
-        .logo-parens {
-            color: #22c55e;
-            font-weight: 600;
-            text-shadow: 0 0 16px rgba(34, 197, 94, 0.3);
-        }
-
-        [data-theme="light"] .logo-py { color: #64748b; text-shadow: none; }
-        [data-theme="light"] .logo-mini { color: #0f172a; }
-        [data-theme="light"] .logo-parens { text-shadow: 0 0 12px rgba(34, 197, 94, 0.2); }
-
-        .logo-tagline {
-            color: #94a3b8;
-            font-size: 0.78rem;
-            font-weight: 500;
-            background: rgba(255,255,255,0.06);
-            padding: 0.35rem 0.75rem 0.35rem 0.6rem;
-            border-radius: 999px;
-            border: 1px solid rgba(255,255,255,0.06);
-            white-space: nowrap;
-            display: inline-flex;
-            align-items: center;
-            gap: 0.35rem;
-            letter-spacing: 0.01em;
-        }
-        .logo-tagline::before {
-            content: '';
-            width: 5px;
-            height: 5px;
-            border-radius: 50%;
-            background: #22c55e;
-            box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
-            flex-shrink: 0;
-        }
-        [data-theme="light"] .logo-tagline {
-            color: #64748b;
-            background: rgba(0,0,0,0.03);
-            border-color: rgba(0,0,0,0.04);
-        }
-        [data-theme="light"] .logo-tagline::before {
-            background: #16a34a;
-        }
-
-        /* ==========================================================================
-           MODERN INSET SEARCH BAR WITH CAPSULE GLOW INTERACTION
-           ========================================================================== */
-
-        .search-box {
-            flex: 1;
-            max-width: 440px;
-            height: 46px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            padding: 0 18px;
-            border-radius: 14px; /* Matches modern geometric patterns over pill shape */
-            border: 1px solid rgba(255, 255, 255, 0.08);
-            background: rgba(15, 23, 42, 0.4);
-            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        .search-box i {
-            color: #64748b;
-            font-size: 0.95rem;
-            transition: color 0.2s ease;
-        }
-
-        .search-box input {
-            flex: 1;
-            background: transparent;
-            border: none;
-            outline: none;
-            color: #ffffff;
-            font-size: 0.95rem;
-        }
-        [data-theme="light"] .search-box input { color: #0f172a; }
-
-        .search-box input::placeholder { color: #475569; }
-
-        /* Dynamic Neon Accent Glow on Input Focus */
-        .search-box:focus-within {
-            border-color: #22c55e;
-            background: rgba(15, 23, 42, 0.8);
-            box-shadow: 0 0 20px rgba(34, 197, 94, 0.15);
-        }
-        .search-box:focus-within i {
-            color: #22c55e;
-        }
-
-        [data-theme="light"] .search-box {
-            background: rgba(241, 245, 249, 0.9);
-            border-color: rgba(15, 23, 42, 0.06);
-        }
-        [data-theme="light"] .search-box:focus-within {
-            background: #ffffff;
-            border-color: #16a34a;
-            box-shadow: 0 0 20px rgba(22, 163, 74, 0.12);
-        }
-
-        /* =========================
-        UTILITY ICON SYSTEM CONTROLS
-        ========================= */
-
-        .nav-controls {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .sound-toggle,
-        .theme-toggle {
-            width: 42px;
-            height: 42px;
-            border: 1px solid rgba(255, 255, 255, 0.05);
-            border-radius: 12px;
-            background: rgba(255, 255, 255, 0.03);
-            color: #94a3b8;
-            font-size: 1rem;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s ease;
-        }
-
-        [data-theme="light"] .sound-toggle,
-        [data-theme="light"] .theme-toggle {
-            background: rgba(15, 23, 42, 0.03);
-            color: #475569;
-            border-color: rgba(15, 23, 42, 0.05);
-        }
-
-        .sound-toggle:hover,
-        .theme-toggle:hover {
-            background: rgba(34, 197, 94, 0.1);
-            color: #22c55e;
-            border-color: rgba(34, 197, 94, 0.25);
-            transform: translateY(-2px);
-        }
-
-        [data-theme="light"] .sound-toggle:hover,
-        [data-theme="light"] .theme-toggle:hover {
-            background: rgba(22, 163, 74, 0.08);
-            color: #16a34a;
-            border-color: rgba(22, 163, 74, 0.2);
-            transform: translateY(-2px);
-        }
-
-        /* Hamburger Drawer System Trigger */
-        .mobile-menu-toggle {
-            display: none;
-            width: 42px;
-            height: 42px;
-            border: 1px solid rgba(255, 255, 255, 0.06);
-            background: rgba(255, 255, 255, 0.02);
-            color: #ffffff;
-            font-size: 1rem;
-            border-radius: 12px;
-            cursor: pointer;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s ease;
-            flex-shrink: 0;
-        }
-        [data-theme="light"] .mobile-menu-toggle {
-            color: #0f172a;
-            border-color: rgba(0,0,0,0.06);
-            background: transparent;
-        }
-        [data-theme="dark"] .mobile-menu-toggle {
-            color: #f8eee4;
-            border-color: rgba(255, 239, 223, 0.12);
-            background: rgba(255, 255, 255, 0.04);
-        }
-
-        .mobile-menu-toggle:hover {
-            border-color: #22c55e;
-            color: #22c55e;
-        }
-
-        /* ==========================================================================
-           RESPONSIVE STRUCTURAL OVERRIDES (MOBILE DRAWER CONFIG)
-           ========================================================================== */
-
-        @media (max-width: 950px) {
-            .logo-tagline { display: none; }
-        }
-
-        @media (max-width: 768px) {
-            .navbar { padding: 10px 8px; }
-            .nav-island {
-                height: auto;
-                padding: 0.8rem 1.15rem;
-                border-radius: 20px;
-                flex-wrap: wrap;
-                gap: 0.6rem;
-            }
-
-            .navbar-brand {
-                flex: 1 1 auto;
-                min-width: 0;
-            }
-
-            .mobile-menu-toggle {
-                display: flex;
-            }
-
-            .nav-controls {
-                display: none;
-                flex-direction: column;
-                align-items: stretch;
-                gap: 6px;
-                flex: 1 1 100%;
-                order: 20;
-                padding-top: 0.5rem;
-                border-top: 1px solid rgba(128, 104, 85, 0.1);
-            }
-
-            .nav-controls.mobile-active {
-                display: flex;
-            }
-
-            .nav-controls .sound-toggle,
-            .nav-controls .theme-toggle {
-                width: 100%;
-                border-radius: 12px;
-                height: 42px;
-            }
-
-            .sound-toggle,
-            .theme-toggle,
-            .mobile-menu-toggle {
-                width: 38px;
-                height: 38px;
-                border-radius: 12px;
-            }
-
-            .nav-controls .feature-badge.tab,
-            .nav-controls .btn-random-project {
-                display: none;
-            }
-
-            .search-box {
-                order: 10;
-                flex: 1 1 100%;
-                max-width: 100%;
-                height: 44px;
-                border-radius: 14px;
-            }
-
-            .hero-features {
-                display: flex;
-                flex-direction: row;
-                flex-wrap: nowrap;
-                overflow-x: auto;
-                -webkit-overflow-scrolling: touch;
-                scrollbar-width: none;
-                width: 100%;
-                justify-content: flex-start;
-                gap: 0.6rem;
-                padding-bottom: 4px;
-                margin-bottom: 0;
-            }
-            .hero-features::-webkit-scrollbar {
-                display: none;
-            }
-            .hero-features .feature-badge {
-                flex-shrink: 0;
-                padding: 0.5rem 0.9rem;
-                font-size: 0.85rem;
-            }
-        }
-
-        /* ── Reduced-motion overrides for playground ────────────────── */
-        @media (prefers-reduced-motion: reduce) {
-            .playground-section, .status-dot.loading, .navbar, .nav-island, .search-box {
-                animation: none !important;
-                transition: none !important;
-                transform: none !important;
-            }
-            .btn-run:hover:not(:disabled) { transform: none; }
-        }
-
-        .logo-icon {
-            width: 42px;
-            height: 42px;
-            color: #a855f7;
-            stroke-width: 2;
-            transition: all 0.3s ease;
-        }
-
-        .logo {
-            display: flex;
-            align-items: center;
-        }
-
-        .logo h1 {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            margin: 0;
-            line-height: 1;
-        }
-
-        .navbar-logo {
-            width: 58px;
-            height: 58px;
-            object-fit: contain;
-            top: 4px;
-
-            position: relative;
-            top: 0;
-
-            vertical-align: middle;
-
-            filter: drop-shadow(0 0 10px rgba(0, 255, 180, 0.4));
-        }
-        .navbar-logo:hover {
-            transform: scale(1.06);
-            filter: drop-shadow(0 0 12px rgba(0, 255, 180, 0.55));
-        }
-
-        .sidebar-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0.25rem 0.5rem 0.6rem;
-            border-bottom: 2px solid rgba(128, 104, 85, 0.08);
-            margin-bottom: 0.35rem;
-        }
-
-        .sidebar-title {
-            font-family: 'Fredoka', sans-serif;
-            font-weight: 700;
-            font-size: 0.85rem;
-            text-transform: uppercase;
-            letter-spacing: 0.08em;
-            color: var(--text-secondary);
-        }
-
-        .sidebar-badge {
-            font-family: 'Fredoka', sans-serif;
-            font-size: 0.75rem;
-            background: linear-gradient(135deg, rgba(106, 191, 141, 0.18), rgba(242, 194, 108, 0.12));
-            color: #6a8f6a;
-            padding: 0.15rem 0.55rem;
-            border-radius: 999px;
-            font-weight: 700;
-        }
-
-        [data-theme="dark"] .sidebar-badge {
-            color: #7fcfbd;
-            background: rgba(106, 191, 141, 0.2);
-        }
-
-        .sidebar-tab {
-            display: flex;
-            align-items: center;
-            gap: 0.65rem;
-            padding: 0.6rem 0.75rem;
-            border: none;
-            border-radius: 12px;
-            background: transparent;
-            color: var(--text-secondary);
-            font-family: 'Fredoka', sans-serif;
-            font-size: 0.88rem;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.18s ease;
-            text-align: left;
-            width: 100%;
-            position: relative;
-            top: 0;
-            box-shadow: none;
-        }
-
-        .sidebar-tab:hover {
-            background: rgba(128, 104, 85, 0.06);
-            color: var(--text-color);
-            transform: translateX(4px);
-        }
-
-        .sidebar-tab:active {
-            transform: translateX(0) scale(0.97);
-        }
-
-        .sidebar-tab.active {
-            background: linear-gradient(135deg, rgba(255, 198, 132, 0.28), rgba(125, 220, 185, 0.25));
-            color: var(--text-color);
-            font-weight: 600;
-            border-radius: 12px;
-        }
-
-        [data-theme="dark"] .sidebar-tab.active {
-            background: rgba(255, 255, 255, 0.08);
-            border-left-color: #7fcfbd;
-            box-shadow: none;
-        }
-
-        [data-theme="dark"] .sidebar-tab:hover {
-            background: rgba(255, 255, 255, 0.05);
-        }
-
-        .sidebar-icon {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 30px;
-            height: 30px;
-            flex-shrink: 0;
-            border-radius: 8px;
-            background: rgba(128, 104, 85, 0.04);
-            transition: background 0.18s ease;
-        }
-
-        .sidebar-tab.active .sidebar-icon {
-            background: rgba(106, 191, 141, 0.12);
-        }
-
-        .sidebar-tab:hover .sidebar-icon {
-            background: rgba(128, 104, 85, 0.06);
-        }
-
-        [data-theme="dark"] .sidebar-icon {
-            background: rgba(255, 255, 255, 0.03);
-        }
-
-        [data-theme="dark"] .sidebar-tab.active .sidebar-icon {
-            background: rgba(106, 191, 141, 0.15);
-        }
-
-        .sidebar-icon i,
-        .sidebar-icon svg {
-            width: 17px;
-            height: 17px;
-            stroke-width: 2.4;
-        }
-
-        .sidebar-label {
-            flex: 1;
-        }
-
-        .sidebar-divider {
-            height: 2px;
-            background: linear-gradient(90deg, rgba(128, 104, 85, 0.06), rgba(106, 191, 141, 0.12), rgba(128, 104, 85, 0.06));
-            margin: 0.5rem 0.5rem;
-            border-radius: 1px;
-        }
-
-        [data-theme="dark"] .sidebar-divider {
-            background: linear-gradient(90deg, rgba(255, 243, 224, 0.04), rgba(106, 191, 141, 0.15), rgba(255, 243, 224, 0.04));
-        }
-
-        .sidebar-random-btn {
-            display: flex;
-            align-items: center;
-            gap: 0.55rem;
-            padding: 0.6rem 0.75rem;
-            margin-top: 0.35rem;
-            border: 2px dashed rgba(128, 104, 85, 0.15);
-            border-radius: 12px;
-            background: rgba(106, 191, 141, 0.04);
-            color: var(--text-secondary);
-            font-family: 'Fredoka', sans-serif;
-            font-size: 0.82rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            position: relative;
-            top: 0;
-        }
-
-        .sidebar-random-btn:hover {
-            border-style: solid;
-            border-color: #6abf8d;
-            color: #4a8a5e;
-            background: linear-gradient(135deg, rgba(106, 191, 141, 0.1), rgba(242, 194, 108, 0.06));
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(106, 191, 141, 0.15);
-        }
-
-        .sidebar-random-btn:active {
-            transform: translateY(1px) scale(0.97);
-            box-shadow: none;
-        }
-
-        [data-theme="dark"] .sidebar-random-btn:hover {
-            border-color: #7fcfbd;
-            color: #7fcfbd;
-            background: rgba(106, 191, 141, 0.12);
-        }
-
-        .sidebar-random-btn i,
-        .sidebar-random-btn svg {
-            width: 16px;
-            height: 16px;
-        }
-
-        .btn-favorite {
-            background: transparent; border: none;
-            color: #94a3b8; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
-            display: flex; align-items: center; justify-content: center; transition: all 0.2s ease;
-            z-index: 10; font-size: 1.5rem; outline: none;
-        }
-        .btn-favorite:hover { transform: scale(1.15); color: #ffffff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4)); }
-        .btn-favorite.active { color: #22c55e; filter: drop-shadow(0 0 8px #22c55e) drop-shadow(0 0 16px #22c55e); }
-
-        [data-theme="light"] .btn-favorite:hover { color: #0f172a; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3)); }
-        [data-theme="light"] .btn-favorite.active { color: #16a34a; filter: drop-shadow(0 0 8px #16a34a) drop-shadow(0 0 15px #16a34a); }
-    </style>
 </head>
 <body>
-<!-- <script src="js/hero-canvas.js"></script> -->
-<a class="skip-link" href="#main-content">
-        🚀 Skip to main content
-    </a>
-<div aria-hidden="true" class="cursor-glow" id="cursorGlow"></div>
-<!-- Navigation -->
-<nav aria-label="Primary" class="navbar" id="mainNavbar">
-<div class="nav-island">
-<!-- LEFT -->
-<div class="navbar-brand">
-<a class="logo-wrap" href="#">
-<!-- LOGO IMAGE -->
-<img alt="PyMini Logo" class="navbar-logo" src="assets/logo.png"/>
-<!-- TEXT -->
-<div class="logo-text">
-    <span class="logo-py">py</span>
-    <span class="logo-mini">.mini</span>
-    <span class="logo-parens">()</span>
-</div>
-<!-- SMALL TAGLINE -->
-<span class="logo-tagline">
-    games, math &amp; terminal toys
-</span>
-</a>
-</div>
-<!-- CENTER SEARCH -->
-<div class="search-box">
-<i class="fas fa-search"></i>
-<input aria-label="Search projects" id="searchInput" placeholder="Search projects or games..." type="text"/>
-</div>
-<!-- HAMBURGER TOGGLE (mobile) -->
-<button type="button" class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle navigation menu" aria-expanded="false">
-<i class="fas fa-bars"></i>
-</button>
-<!-- RIGHT -->
-<div class="nav-controls" id="navControls">
-    <button aria-label="Mute sounds" class="sound-toggle" id="soundToggle" type="button">
-        <i class="fas fa-volume-up"></i>
-    </button>
-    <button aria-label="Switch theme" class="theme-toggle" id="themeToggle" type="button">
-        <i class="fas fa-moon"></i>
-    </button>
-</div>
-</div>
-</nav>
-<!-- ── Sticky Category Filter Bar ─────────────────────────────── -->
-<!-- Appears below navbar when user scrolls past the hero section  -->
-<main id="main-content" tabindex="-1">
-    <section class="hero-section" aria-label="Welcome">
-        <canvas aria-hidden="true" id="boardCanvas"></canvas>
-        <div class="hero-background"></div>
-        <div aria-hidden="true" class="hero-orb hero-orb-one"></div>
-        <div aria-hidden="true" class="hero-orb hero-orb-two"></div>
-        <div aria-hidden="true" class="hero-code-snippets">
-            <div class="code-snippet snippet-one">for project in library: launch(project)</div>
-            <div class="code-snippet snippet-two">score = accuracy * focus</div>
-            <div class="code-snippet snippet-three">challenge = "typing-speed-tester"</div>
-            <div class="code-snippet snippet-four">print("tiny arcade, huge learning energy")</div>
-            <div class="code-snippet snippet-five">if curiosity &gt; 0: launch_random()</div>
-            <div class="code-snippet snippet-six">favorite_projects.append("math-quiz")</div>
-        </div>
-        <div class="container">
-            <div class="hero-shell">
-                <aside class="filter-sidebar" role="tablist" aria-label="Filter by category">
-                    <div class="sidebar-header">
-                        <span class="sidebar-title">explore</span>
-                        <span class="sidebar-badge" id="sidebarProjectCount">0</span>
-                    </div>
-                    <button aria-selected="true" class="sidebar-tab active" data-category="all" role="tab" tabindex="0">
-                        <span class="sidebar-icon"><i data-lucide="layers"></i></span>
-                        <span class="sidebar-label">all projects</span>
-                    </button>
-                    <button aria-selected="false" class="sidebar-tab" data-category="games" role="tab" tabindex="-1">
-                        <span class="sidebar-icon"><i data-lucide="gamepad-2"></i></span>
-                        <span class="sidebar-label">games</span>
-                    </button>
-                    <button aria-selected="false" class="sidebar-tab" data-category="math" role="tab" tabindex="-1">
-                        <span class="sidebar-icon"><i data-lucide="sigma"></i></span>
-                        <span class="sidebar-label">math</span>
-                    </button>
-                    <button aria-selected="false" class="sidebar-tab" data-category="utilities" role="tab" tabindex="-1">
-                        <span class="sidebar-icon"><i data-lucide="wrench"></i></span>
-                        <span class="sidebar-label">utilities</span>
-                    </button>
-                    <button aria-selected="false" class="sidebar-tab" data-category="favorites" role="tab" tabindex="-1">
-                        <span class="sidebar-icon"><i data-lucide="star"></i></span>
-                        <span class="sidebar-label">⭐ favorites</span>
-                    </button>
-                    <div class="sidebar-divider"></div>
-                    <button aria-selected="false" class="sidebar-tab playground-tab" data-category="playground" id="playgroundTab" role="tab" tabindex="-1">
-                        <span class="sidebar-icon"><i data-lucide="terminal"></i></span>
-                        <span class="sidebar-label">🐍 playground</span>
-                    </button>
-                    <button class="sidebar-random-btn" id="randomProjectBtnSidebar" title="Discover a random project!" type="button">
-                        <i data-lucide="shuffle"></i> surprise me
-                    </button>
-                </aside>
-                <div class="hero-content">
-                <div class="hero-kicker">Python arcade for curious beginners</div>
-                <div class="hero-title-wrapper">
-                    <h1 class="hero-title">
-                        <span class="hero-title-line">build tiny python projects</span>
-                        <span class="hero-title-line hero-title-accent">and play in a playful coding aracade</span>
-                    </h1>
-                    <div aria-hidden="true" class="python-orbit">
-                        <div class="python-orbiter">
-                            <span class="python-logo">🐍</span>
-                        </div>
-                    </div>
-                </div>
-                <p class="hero-subtitle">Jump into browser-ready games, math experiments, and utility labs that feel rewarding from the first click.</p>
+<a class="skip-link" href="#main-content">Skip to main content</a>
 
-                <div aria-live="polite" class="hero-typing">
-                    <span class="typing-label">Now loading:</span>
-                    <span class="typing-text" id="heroTypewriter">typing speed drills</span>
-                </div>
-                <div class="hero-meta">
-                    <span><strong id="heroProjectCount">0</strong> total projects</span>
-                    <span><strong id="heroGameCount">0</strong> games</span>
-                    <span><strong id="heroUtilityCount">0</strong> utilities</span>
-                </div>
+<!-- Cursor Glow -->
+<div aria-hidden="true" class="cursor-glow" id="cursorGlow"></div>
 
-            </div>
+<!-- Mobile Sidebar Toggle -->
+<button type="button" class="mobile-sidebar-toggle" id="mobileSidebarToggle" aria-label="Toggle sidebar menu" aria-expanded="false">
+  <i class="fas fa-bars"></i>
+</button>
 
-            <!-- ── Hero Timeline (right side) ──────────────────── -->
-            <div class="hero-timeline" id="heroTimeline">
-                <div class="timeline-spine"></div>
-                <div class="timeline-node" data-reveal>
-                    <div class="timeline-dot"></div>
-                    <div class="timeline-card">
-                        <span class="timeline-step">01</span>
-                        <h3 class="timeline-title">welcome</h3>
-                        <p class="timeline-desc">jump into a tiny python arcade built for curious beginners</p>
-                    </div>
-                </div>
-                <div class="timeline-node" data-reveal>
-                    <div class="timeline-dot"></div>
-                    <div class="timeline-card">
-                        <span class="timeline-step">02</span>
-                        <h3 class="timeline-title">explore</h3>
-                        <p class="timeline-desc">browse games, math puzzles &amp; utilities — each one ready in your browser</p>
-                    </div>
-                </div>
-                <div class="timeline-node" data-reveal>
-                    <div class="timeline-dot"></div>
-                    <div class="timeline-card">
-                        <span class="timeline-step">03</span>
-                        <h3 class="timeline-title">play</h3>
-                        <p class="timeline-desc">launch any project instantly, experiment with code, and share your wins</p>
-                    </div>
-                </div>
-                <div class="timeline-node" data-reveal>
-                    <div class="timeline-dot"></div>
-                    <div class="timeline-card">
-                        <span class="timeline-step">04</span>
-                        <h3 class="timeline-title">learn</h3>
-                        <p class="timeline-desc">pick up python concepts as you play — loops, logic, data &amp; more</p>
-                    </div>
-                </div>
-                <div class="timeline-node" data-reveal>
-                    <div class="timeline-dot"></div>
-                    <div class="timeline-card">
-                        <span class="timeline-step">05</span>
-                        <h3 class="timeline-title">build</h3>
-                        <p class="timeline-desc">create your own mini projects and share them with the community</p>
-                    </div>
-                </div>
-                <div class="timeline-node" data-reveal>
-                    <div class="timeline-dot"></div>
-                    <div class="timeline-card">
-                        <span class="timeline-step">06</span>
-                        <h3 class="timeline-title">share</h3>
-                        <p class="timeline-desc">show off your work, get feedback, and keep growing as a dev</p>
-                    </div>
-                </div>
-                <div class="timeline-node" data-reveal>
-                    <div class="timeline-dot"></div>
-                    <div class="timeline-card">
-                        <span class="timeline-step">07</span>
-                        <h3 class="timeline-title">grow</h3>
-                        <p class="timeline-desc">keep building, keep learning — the arcade never stops evolving</p>
-                    </div>
-                </div>
-                <div class="timeline-node" data-reveal>
-                    <div class="timeline-dot"></div>
-                    <div class="timeline-card">
-                        <span class="timeline-step">08</span>
-                        <h3 class="timeline-title">thrive</h3>
-                        <p class="timeline-desc">become part of the community, contribute, and inspire others</p>
-                    </div>
-                </div>
-            </div>
+<!-- ── PRIMARY SIDEBAR DOCK ──────────────────────────────────── -->
+<aside class="sidebar-dock" id="mainSidebar" aria-label="Primary Navigation">
+  <div class="sidebar-brand">
+    <a class="logo-wrap" href="index.html">
+      <div class="logo-top-row">
+        <img alt="PyMini Logo" class="navbar-logo" src="assets/logo.png"/>
+        <div class="logo-text">
+          <span class="logo-py">py</span>
+          <span class="logo-mini">.mini</span>
+          <span class="logo-parens">()</span>
+        </div>
+      </div>
+      <span class="logo-tagline">games, math &amp; terminal toys</span>
+    </a>
+  </div>
+
+  <div class="sidebar-search">
+    <div class="search-box" style="position:relative">
+      <i class="fas fa-search"></i>
+      <input aria-label="Search projects" id="searchInput" placeholder="Search projects or tags..." type="text"/>
+      <div class="search-dropdown" id="searchDropdown">
+        <div class="dropdown-content" id="searchDropdownContent">
+          <div class="search-loader" id="searchLoader" style="display:none"><div class="spinner"></div></div>
+          <div class="recent-searches-section" id="recentSearchesSection">
+            <div class="dropdown-section-title">Recent</div>
+            <div class="dropdown-list" id="recentSearchesList"></div>
+          </div>
+          <div class="results-section" id="resultsSection" style="display:none">
+            <div class="dropdown-section-title">Projects</div>
+            <div class="dropdown-list" id="resultsList"></div>
+          </div>
+          <div class="tips-section" id="tipsSection">
+            <p><strong>Search tips</strong></p>
+            <ul>
+              <li>Type a project name — <code>snake</code>, <code>quiz</code></li>
+              <li>Filter by tag — <code>game</code>, <code>math</code>, <code>utility</code></li>
+              <li>Press <code>Ctrl+K</code> to focus search</li>
+            </ul>
+          </div>
+          <div class="no-results-message" id="noResultsMessage" style="display:none">No projects found. Try a different keyword.</div>
         </div>
+      </div>
     </div>
 </section>
 
@@ -1203,6 +109,12 @@ <h3>BlackJack21</h3>
                         <h3>Calculator</h3>
                         <p>Your mathematical companion!</p>
                     </div>
+                    <div class="project-card" data-category="utilities" data-project="caesar-cipher" data-tags="utility,caesar,cipher,encryption,decryption">
+                        <img class="card-banner" src="assets/banners/caesar-cipher.jpg" alt="Caesar Cipher" loading="lazy">
+                        <div class="card-actions"><button class="btn-play">Try It</button></div>
+                        <h3>Caesar Cipher</h3>
+                        <p>Encrypt &amp; decrypt with a shift!</p>
+                    </div>
                     <div class="project-card" data-category="games" data-project="coin-flip" data-tags="game,random,animation,probability,heads,tails">
                         <img class="card-banner" src="assets/banners/coin-flip.jpg" alt="Coin Flip" loading="lazy">
                         <div class="card-actions"><button class="btn-play">Try It</button></div>
@@ -1373,218 +285,358 @@ <h3>Word Scramble</h3>
                 </div>
             </div>
         </section>
+  </div>
+
+  <div class="sidebar-menu-wrapper">
+    <div class="sidebar-menu-title">Categories</div>
+    <nav class="sidebar-menu" role="tablist" aria-label="Filter by category">
+      <button aria-selected="true" class="sidebar-tab active" data-category="all" role="tab" tabindex="0">
+        <span class="sidebar-icon"><svg data-lucide="layers"></svg></span>
+        <span class="sidebar-label">All Projects</span>
+      </button>
+      <button aria-selected="false" class="sidebar-tab" data-category="games" role="tab" tabindex="-1">
+        <span class="sidebar-icon"><svg data-lucide="gamepad-2"></svg></span>
+        <span class="sidebar-label">Games Arcade</span>
+      </button>
+      <button aria-selected="false" class="sidebar-tab" data-category="math" role="tab" tabindex="-1">
+        <span class="sidebar-icon"><svg data-lucide="sigma"></svg></span>
+        <span class="sidebar-label">Math Visuals</span>
+      </button>
+      <button aria-selected="false" class="sidebar-tab" data-category="utilities" role="tab" tabindex="-1">
+        <span class="sidebar-icon"><svg data-lucide="wrench"></svg></span>
+        <span class="sidebar-label">Utilities Lab</span>
+      </button>
+      <button aria-selected="false" class="sidebar-tab" data-category="favorites" role="tab" tabindex="-1">
+        <span class="sidebar-icon"><svg data-lucide="star"></svg></span>
+        <span class="sidebar-label">My Favorites</span>
+      </button>
+      <button aria-selected="false" class="sidebar-tab" data-category="playground" role="tab" tabindex="-1">
+        <span class="sidebar-icon"><svg data-lucide="terminal"></svg></span>
+        <span class="sidebar-label">Playground</span>
+      </button>
+    </nav>
+  </div>
+
+  <div class="sidebar-footer">
+    <div class="sidebar-controls">
+      <button aria-label="Mute sounds" class="sound-toggle" id="soundToggle" type="button">
+        <i class="fas fa-volume-up"></i>
+      </button>
+      <button aria-label="Switch theme" class="theme-toggle" id="themeToggle" type="button">
+        <i class="fas fa-moon"></i>
+      </button>
+    </div>
+  </div>
+</aside>
 
-        <section aria-label="Python Playground" class="playground-section" id="playgroundSection">
 
-<div class="container">
-<!-- Header -->
-<div class="playground-header">
-<div class="playground-title-row">
-<h2 class="playground-title">🐍 Python Playground</h2>
-<div aria-label="Pyodide status" aria-live="polite" class="playground-status" id="playgroundStatus">
-<span class="status-dot" id="statusDot"></span>
-<span id="statusText">Open tab to load Python</span>
-</div>
-</div>
-<p class="playground-subtitle">
-                    Write and run real Python code in your browser — powered by
-                    <a href="https://pyodide.org" rel="noopener noreferrer" target="_blank">Pyodide</a>.
-                    No install, no backend.
-                </p>
-<p class="playground-hint">
-<kbd>Ctrl</kbd>+<kbd>Enter</kbd> runs code  · 
-                    <kbd>Tab</kbd> inserts 4 spaces
-                </p>
-</div>
-<!-- Editor + Console side-by-side -->
-<div class="playground-body">
-<!-- Code Editor panel -->
-<div class="editor-panel">
-<div class="panel-header">
-<span>
-<i aria-hidden="true" class="fas fa-code"></i>
-                            Code Editor
-                        </span>
-<div class="editor-actions">
-<button class="btn-panel-action" id="loadExample" title="Load a sample snippet" type="button">
-<i aria-hidden="true" class="fas fa-lightbulb"></i> Example
-                            </button>
-<button class="btn-panel-action" id="clearEditor" title="Clear the editor" type="button">
-<i aria-hidden="true" class="fas fa-trash-alt"></i> Clear
-                            </button>
-</div>
-</div>
-<textarea aria-label="Python code editor" autocapitalize="off" autocorrect="off" id="pythonEditor" placeholder="# Write your Python code here…
-print('Hello, World!')" spellcheck="false"></textarea>
-</div>
-<!-- Console output panel -->
-<div class="console-panel">
-<div class="panel-header">
-<span>
-<i aria-hidden="true" class="fas fa-terminal"></i>
-                            Output Console
-                        </span>
-<button class="btn-panel-action" id="clearConsole" title="Clear the console" type="button">
-<i aria-hidden="true" class="fas fa-times-circle"></i> Clear
-                        </button>
-</div>
-<pre aria-label="Console output" aria-live="polite" class="console-output" id="consoleOutput"></pre>
+<div class="hero-controls">
+  <button aria-label="Mute sounds" class="hero-control-btn sound-toggle" id="heroSoundToggle" type="button">
+    <i class="fas fa-volume-up"></i>
+  </button>
+  <button aria-label="Switch theme" class="hero-control-btn theme-toggle" id="heroThemeToggle" type="button">
+    <i class="fas fa-moon"></i>
+  </button>
 </div>
-</div><!-- /playground-body -->
-<!-- Run and Stop button row -->
-<div class="playground-controls">
-<button aria-label="Run Python code" class="btn-run" disabled="" id="runCode" type="button">
-<i aria-hidden="true" class="fas fa-play"></i>
-                    Run Code
-                </button>
-<button aria-label="Stop execution" class="btn-stop" disabled="" id="stopCode" type="button">
-<i aria-hidden="true" class="fas fa-stop"></i>
-                    Stop Execution
-                </button>
-</div>
-</div>
-</section></main>
-
-
-
-
-
-
-
-
-
-<!-- Math Tools -->
-
-<!-- GAMES -->
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-<!-- MATH -->
-
 
+<!-- ═══════════════════════════════════════════════════════════════
+     MAIN CONTENT
+     ═══════════════════════════════════════════════════════════════ -->
+<main id="main-content" tabindex="-1">
 
+<!-- ── Hero Section ─────────────────────────────────────────── -->
+<section class="hero-section" aria-label="Welcome">
+  <canvas aria-hidden="true" id="boardCanvas"></canvas>
+  <div class="hero-background" aria-hidden="true"></div>
+  <div aria-hidden="true" class="hero-orb hero-orb-one"></div>
+  <div aria-hidden="true" class="hero-orb hero-orb-two"></div>
+  <div aria-hidden="true" class="hero-orb hero-orb-three"></div>
+
+  <div class="hero-shell">
+    <!-- ── Big Brand Header (Logo & Futuristic Title) ────────────────── -->
+    <div class="hero-logo-header">
+      <img alt="PyMini Logo" class="hero-logo-image" src="assets/logo.png"/>
+      <div class="hero-logo-text">
+        <span class="hero-logo-py">py</span><span class="hero-logo-mini">.mini</span><span class="hero-logo-parens">()</span>
+      </div>
+    </div>
 
+    <!-- ── Welcome Badges (Glassified with Hover Glints) ──────────────── -->
+    <div class="hero-badge-row">
+      <span class="hero-kicker">
+        <span class="hero-kicker-dot"></span>
+        Python Arcade
+      </span>
+      <span class="hero-status">
+        <span class="hero-status-dot"></span>
+        System Status: Nominal
+      </span>
+    </div>
 
+    <div class="hero-title-wrapper">
+      <h1 class="hero-title">
+        <span class="hero-title-line">Build tiny Python</span>
+        <span class="hero-title-line hero-title-accent">projects &amp; play</span>
+      </h1>
+    </div>
 
+    <p class="hero-subtitle">Jump into browser-ready games, math experiments, and utility labs — each one ready in your browser, no install required.</p>
+
+    <!-- ── Hero CTA Action Row ──────────────────────────────────────── -->
+    <div class="hero-cta-row">
+      <button class="btn-primary-hero" id="exploreBtn">
+        <i class="fas fa-rocket"></i>
+        Explore Projects
+      </button>
+      <button class="btn-secondary-hero" id="randomProjectBtn">
+        <i class="fas fa-shuffle"></i>
+        Surprise Me
+      </button>
+      <a class="btn-contribution-hero" id="contributionBtn" href="https://github.com/steam-bell-92/python-mini-project/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer">
+        <i class="fas fa-code-branch"></i>
+        Open Contribution
+      </a>
+    </div>
 
+    <div class="hero-meta">
+      <span><strong id="heroProjectCount">0</strong> total projects</span>
+      <span><strong id="heroGameCount">0</strong> games</span>
+      <span><strong id="heroUtilityCount">0</strong> utilities</span>
+    </div>
+  </div>
+</section>
 
+<!-- ── Timeline Section ─────────────────────────────────────── -->
+<section class="hero-timeline-section" id="timelineSection">
+  <canvas aria-hidden="true" id="timelineCanvas"></canvas>
+  <div class="timeline-background" aria-hidden="true"></div>
+  <div aria-hidden="true" class="timeline-orb timeline-orb-one"></div>
+  <div aria-hidden="true" class="timeline-orb timeline-orb-two"></div>
+  <div class="timeline-container">
+    <div class="timeline-route-badge">TRACK-ROUTE</div>
+    <div class="timeline-grid">
+      <div class="timeline-item" data-reveal>
+        <div class="timeline-content">
+          <span class="timeline-icon" data-lucide="house"></span>
+          <div class="timeline-text">
+            <span class="timeline-step">01</span>
+            <h3 class="timeline-title">Welcome</h3>
+            <p class="timeline-desc">Jump into a tiny Python arcade built for curious beginners</p>
+          </div>
+        </div>
+        <div class="timeline-node"><div class="timeline-dot"></div></div>
+        <div></div>
+      </div>
+      <div class="timeline-item" data-reveal>
+        <div></div>
+        <div class="timeline-node"><div class="timeline-dot"></div></div>
+        <div class="timeline-content">
+          <span class="timeline-icon" data-lucide="compass"></span>
+          <div class="timeline-text">
+            <span class="timeline-step">02</span>
+            <h3 class="timeline-title">Explore</h3>
+            <p class="timeline-desc">Browse games, math puzzles &amp; utilities — each one ready in your browser</p>
+          </div>
+        </div>
+      </div>
+      <div class="timeline-item" data-reveal>
+        <div class="timeline-content">
+          <span class="timeline-icon" data-lucide="play"></span>
+          <div class="timeline-text">
+            <span class="timeline-step">03</span>
+            <h3 class="timeline-title">Play</h3>
+            <p class="timeline-desc">Launch any project instantly, experiment with code, and share your wins</p>
+          </div>
+        </div>
+        <div class="timeline-node"><div class="timeline-dot"></div></div>
+        <div></div>
+      </div>
+      <div class="timeline-item" data-reveal>
+        <div></div>
+        <div class="timeline-node"><div class="timeline-dot"></div></div>
+        <div class="timeline-content">
+          <span class="timeline-icon" data-lucide="book-open"></span>
+          <div class="timeline-text">
+            <span class="timeline-step">04</span>
+            <h3 class="timeline-title">Learn</h3>
+            <p class="timeline-desc">Pick up Python concepts as you play — loops, logic, data &amp; more</p>
+          </div>
+        </div>
+      </div>
+      <div class="timeline-item" data-reveal>
+        <div class="timeline-content">
+          <span class="timeline-icon" data-lucide="hammer"></span>
+          <div class="timeline-text">
+            <span class="timeline-step">05</span>
+            <h3 class="timeline-title">Build</h3>
+            <p class="timeline-desc">Create your own mini projects and share them with the community</p>
+          </div>
+        </div>
+        <div class="timeline-node"><div class="timeline-dot"></div></div>
+        <div></div>
+      </div>
+      <div class="timeline-item" data-reveal>
+        <div></div>
+        <div class="timeline-node"><div class="timeline-dot"></div></div>
+        <div class="timeline-content">
+          <span class="timeline-icon" data-lucide="share-2"></span>
+          <div class="timeline-text">
+            <span class="timeline-step">06</span>
+            <h3 class="timeline-title">Share</h3>
+            <p class="timeline-desc">Show off your work, get feedback, and keep growing as a dev</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
 
 
 
+<!-- ── Projects Section (Bento Grid) ────────────────────────── -->
+<section class="projects-section" id="projectsSection">
+  <div class="container">
+    <div class="section-header">
+      <h2 class="section-heading">Projects <span id="projectCountBadge"></span></h2>
+      <button class="btn-random-project" id="randomProjectBtnSidebar" type="button">
+        <i class="fas fa-shuffle"></i>
+        Surprise Me
+      </button>
+    </div>
+  </div>
+</section>
 
+<!-- ── Python Playground Section ────────────────────────────── -->
+<section aria-label="Python Playground" class="playground-section" id="playgroundSection" style="display:none">
+  <div class="container">
+    <div class="playground-header">
+      <div class="playground-title-row">
+        <h2 class="playground-title">🐍 Python Playground</h2>
+        <div aria-label="Pyodide status" aria-live="polite" class="playground-status" id="playgroundStatus">
+          <span class="status-dot" id="statusDot"></span>
+          <span id="statusText">Open tab to load Python</span>
+        </div>
+      </div>
+      <p class="playground-subtitle">
+        Write and run real Python code in your browser — powered by
+        <a href="https://pyodide.org" rel="noopener noreferrer" target="_blank">Pyodide</a>.
+        No install, no backend.
+      </p>
+      <p class="playground-hint">
+        <kbd>Ctrl</kbd>+<kbd>Enter</kbd> runs code &nbsp;·&nbsp;
+        <kbd>Tab</kbd> inserts 4 spaces
+      </p>
+    </div>
 
+    <div class="playground-body">
+      <div class="editor-panel">
+        <div class="panel-header">
+          <span><i aria-hidden="true" class="fas fa-code"></i> Code Editor</span>
+          <div class="editor-actions">
+            <button class="btn-panel-action" id="loadExample" title="Load a sample snippet" type="button">
+              <i aria-hidden="true" class="fas fa-lightbulb"></i> Example
+            </button>
+            <button class="btn-panel-action" id="clearEditor" title="Clear the editor" type="button">
+              <i aria-hidden="true" class="fas fa-trash-alt"></i> Clear
+            </button>
+          </div>
+        </div>
+        <textarea aria-label="Python code editor" autocapitalize="off" autocorrect="off" id="pythonEditor" placeholder="# Write your Python code here…
+print('Hello, World!')" spellcheck="false"></textarea>
+      </div>
+
+      <div class="console-panel">
+        <div class="panel-header">
+          <span><i aria-hidden="true" class="fas fa-terminal"></i> Output Console</span>
+          <button class="btn-panel-action" id="clearConsole" title="Clear the console" type="button">
+            <i aria-hidden="true" class="fas fa-times-circle"></i> Clear
+          </button>
+        </div>
+        <pre aria-label="Console output" aria-live="polite" class="console-output" id="consoleOutput"></pre>
+      </div>
+    </div>
 
+    <div class="playground-controls">
+      <button aria-label="Run Python code" class="btn-run" disabled id="runCode" type="button">
+        <i aria-hidden="true" class="fas fa-play"></i> Run Code
+      </button>
+      <button aria-label="Stop execution" class="btn-stop" disabled id="stopCode" type="button">
+        <i aria-hidden="true" class="fas fa-stop"></i> Stop
+      </button>
+    </div>
+  </div>
+</section>
 
-<!-- /projects-grid -->
-<div class="empty-state" id="emptyState" style="display: none;">
-<p class="empty-state-title">No projects found</p>
-<p class="empty-state-hint" id="emptyStateHint">Try adjusting your search or category filter.</p>
-</div>
+</main>
 
 
-<!-- ── Python Playground Section ──────────────────────────── -->
-<!--
-            Hidden by default (display:none set in playground.js).
-            Shown only when the 🐍 Playground tab is clicked.
-            Completely separate from the modal system – no conflicts.
-        -->
 
-<!-- /main -->
-<!-- Project Modal (unchanged) -->
+<!-- ── Project Modal ─────────────────────────────────────────── -->
 <div aria-hidden="true" aria-labelledby="modalDialogTitle" aria-modal="true" class="modal" id="projectModal" role="dialog">
-<div class="modal-content">
-<h2 class="modal-dialog-title visually-hidden" id="modalDialogTitle" tabindex="-1">Interactive project</h2>
-<button aria-label="Close project dialog" class="modal-close" id="modalClose" type="button">×</button>
-<div id="modalBody"></div>
-</div>
+  <div class="modal-content">
+    <h2 class="modal-dialog-title visually-hidden" id="modalDialogTitle" tabindex="-1">Interactive project</h2>
+    <button aria-label="Close project dialog" class="modal-close" id="modalClose" type="button">&times;</button>
+    <div id="modalBody"></div>
+  </div>
 </div>
-<!-- Back to Top Button (unchanged) -->
+
+<!-- ── Back to Top ───────────────────────────────────────────── -->
 <button aria-label="Back to top" class="back-to-top" id="backToTop" title="Back to top" type="button">
-<i aria-hidden="true" class="fas fa-arrow-up"></i>
+  <i class="fas fa-arrow-up"></i>
 </button>
-<!-- Footer -->
+
+<!-- ── Footer ────────────────────────────────────────────────── -->
 <footer class="footer">
-<div class="container">
-<div class="footer-content">
-<div class="footer-brand">
-<h2>🎮 Python Mini Projects</h2>
-<p>Learn Python the Fun Way! Interactive games, math visualizations, and utilities built directly in
-                        your browser.</p>
-<div class="footer-social-icons">
-<a aria-label="GitHub" href="https://github.com/steam-bell-92/python-mini-project" rel="noopener noreferrer" target="_blank"><i class="fab fa-github"></i></a>
-<a aria-label="Twitter" href="https://x.com/AnujKulkarni040"><i class="fab fa-twitter"></i></a>
-<a aria-label="LinkedIn" href="https://www.linkedin.com/in/anuj-chandrakant-kulkarni"><i class="fab fa-linkedin"></i></a>
-<a aria-label="YouTube" href="https://www.instagram.com/obscura.nuj"><i class="fab fa-instagram"></i></a>
-</div>
-</div>
-<div class="footer-links">
-<h3>Quick Links</h3>
-<ul>
-<li><a href="#main-content" onclick="document.querySelector('[data-category=\'games\']').click()">Games</a></li>
-<li><a href="#main-content" onclick="document.querySelector('[data-category=\'math\']').click()">Math</a></li>
-<li><a href="#main-content" onclick="document.querySelector('[data-category=\'utilities\']').click()">Utilities</a>
-</li>
-<li><a href="#main-content" onclick="document.querySelector('[data-category=\'favorites\']').click()">⭐
-                                Favorites</a></li>
-<li><a href="#main-content" onclick="document.querySelector('[data-category=\'playground\']').click()">🐍
-                                Playground</a></li>
-</ul>
-</div>
-<div class="footer-links">
-<h3>Resources</h3>
-<ul>
-<li><a href="https://github.com/steam-bell-92/python-mini-project/blob/main/README.md"><i aria-hidden="true" class="fas fa-book"></i> Documentation</a></li>
-<li><a href="https://github.com/steam-bell-92/python-mini-project/blob/a54ac8251fd79a6b7f4e43b54720c7f45225ac7e/CONTRIBUTING.md"><i aria-hidden="true" class="fas fa-code-branch"></i>
-                                Contribute</a></li>
-<li><a href="https://github.com/steam-bell-92/python-mini-project/issues/new"><i aria-hidden="true" class="fas fa-bug"></i> Report a Bug</a></li>
-<li><a href="https://github.com/steam-bell-92/python-mini-project/blob/main/README.md"><i aria-hidden="true" class="fas fa-question-circle"></i> FAQ</a></li>
-</ul>
-</div>
-<div class="footer-newsletter">
-<h3>Stay Updated</h3>
-<p>Get notified about new projects and features!</p>
-<form class="newsletter-form" onsubmit="event.preventDefault(); alert('Thanks for subscribing!');">
-<input aria-label="Email for newsletter" placeholder="Enter your email" required="" type="email"/>
-<button aria-label="Subscribe" type="submit">
-<i class="fas fa-paper-plane"></i>
-</button>
-</form>
-</div>
-</div>
-<div class="footer-bottom">
-<div class="footer-bottom-links">
-<a href="./privacy-policy.html">Privacy Policy</a>
-<span class="separator">•</span>
-<a href="./terms-condition.html">Terms of Service</a>
-</div>
-<p>Made with ❤️ for Python learners everywhere © 2026</p>
-</div>
-</div>
+  <div class="container">
+    <div class="footer-content">
+      <div class="footer-brand">
+        <h2>Python Mini Projects</h2>
+        <p>Learn Python the Fun Way! Interactive games, math visualizations, and utilities built directly in your browser.</p>
+        <div class="footer-social-icons">
+          <a aria-label="GitHub" href="https://github.com/steam-bell-92/python-mini-project" rel="noopener noreferrer" target="_blank"><i class="fab fa-github"></i></a>
+          <a aria-label="Twitter" href="https://x.com/AnujKulkarni040"><i class="fab fa-twitter"></i></a>
+          <a aria-label="LinkedIn" href="https://www.linkedin.com/in/anuj-chandrakant-kulkarni"><i class="fab fa-linkedin"></i></a>
+          <a aria-label="YouTube" href="https://www.instagram.com/obscura.nuj"><i class="fab fa-instagram"></i></a>
+        </div>
+      </div>
+      <div class="footer-links">
+        <h3>Projects</h3>
+        <ul>
+          <li><a href="#" class="footer-cat-link" data-cat="games">Games</a></li>
+          <li><a href="#" class="footer-cat-link" data-cat="math">Math</a></li>
+          <li><a href="#" class="footer-cat-link" data-cat="utilities">Utilities</a></li>
+          <li><a href="#" class="footer-cat-link" data-cat="favorites">Favorites</a></li>
+          <li><a href="#" class="footer-cat-link" data-cat="playground">Playground</a></li>
+        </ul>
+      </div>
+      <div class="footer-links">
+        <h3>Resources</h3>
+        <ul>
+          <li><a href="https://github.com/steam-bell-92/python-mini-project/blob/main/README.md"><i class="fas fa-book"></i> Documentation</a></li>
+          <li><a href="https://github.com/steam-bell-92/python-mini-project/blob/main/CONTRIBUTING.md"><i class="fas fa-code-branch"></i> Contribute</a></li>
+          <li><a href="https://github.com/steam-bell-92/python-mini-project/issues/new"><i class="fas fa-bug"></i> Report a Bug</a></li>
+        </ul>
+      </div>
+      <div class="footer-links">
+        <h3>Legal</h3>
+        <ul>
+          <li><a href="./privacy-policy.html">Privacy Policy</a></li>
+          <li><a href="./terms-condition.html">Terms of Service</a></li>
+        </ul>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <div class="footer-bottom-links">
+        <a href="./privacy-policy.html">Privacy</a>
+        <span class="separator">&middot;</span>
+        <a href="./terms-condition.html">Terms</a>
+      </div>
+      <p>Made with &hearts; for Python learners everywhere &copy; 2026</p>
+    </div>
+  </div>
 </footer>
-<!-- ─────────────────────────────────────────────────────────────
-         SCRIPTS  –  load order matters:
-           1. audio.js          (no deps)
-           2. project modules   (no deps)
-           3. projects.js       (registry, depends on project modules)
-           4. playground.js     (NEW – sets window.PYODIDE + window.playgroundAPI)
-           5. main.js           (depends on projects.js + window.playgroundAPI)
 
-         Pyodide itself is loaded lazily inside playground.js when the
-         user clicks the 🐍 Playground tab. It is NEVER loaded eagerly
-         and therefore NEVER blocks the modal system or any other UI.
-    ──────────────────────────────────────────────────────────────── -->
+<!-- ── SCRIPTS ──────────────────────────────────────────────── -->
 <script src="https://unpkg.com/lucide@latest"></script>
 <script src="js/audio.js"></script>
 <script src="js/projects/rock-paper-scissor.js"></script>
@@ -1621,67 +673,12 @@ <h3>Stay Updated</h3>
 <script src="js/projects/snake.js"></script>
 <script src="js/projects/spot-the-difference.js"></script>
 <script src="js/projects/color-palette.js"></script>
+<script src="js/projects/ceasar-cipher.js"></script>
 <!-- Registry: maps project names to their module functions -->
 <script src="js/projects.js"></script>
-<!--
-        playground.js MUST come before main.js so that
-        window.playgroundAPI is defined when main.js runs.
-        No Pyodide CDN tag here — Pyodide is injected lazily.
-    -->
 <script src="js/playground.js"></script>
-<!-- Main app logic -->
 <script src="js/main.js"></script>
-<script>
-        lucide.createIcons();
-    </script>
 <script src="js/hero-canvas.js"></script>
-<!-- Search Functionality -->
-<script>
-        const navSearchInput = document.getElementById("searchInput");
-        const heroSearchInput = document.getElementById("heroSearchInput");
-
-        // Sync both search inputs and let main.js handle the filtering cleanly
-        if (navSearchInput) {
-            navSearchInput.addEventListener("input", () => {
-                if (heroSearchInput) heroSearchInput.value = navSearchInput.value;
-            });
-        }
-        if (heroSearchInput) {
-            heroSearchInput.addEventListener("input", () => {
-                if (navSearchInput) {
-                    navSearchInput.value = heroSearchInput.value;
-                    navSearchInput.dispatchEvent(new Event("input"));
-                }
-            });
-        }
-
-    // Handle Scroll Transitions to resize the floating layout dynamically
-    const mainNavbar = document.getElementById("mainNavbar");
-    window.addEventListener("scroll", () => {
-        if (window.scrollY > 40) {
-            mainNavbar.classList.add("scrolled");
-        } else {
-            mainNavbar.classList.remove("scrolled");
-        }
-    });
-
-    // Mobile Navigation Controls Open/Close interface handlers
-    const mobileMenuToggle = document.getElementById("mobileMenuToggle");
-    const navControls = document.getElementById("navControls");
-
-    mobileMenuToggle.addEventListener("click", () => {
-        const isActive = navControls.classList.toggle("mobile-active");
-        mobileMenuToggle.setAttribute("aria-expanded", isActive);
-        mobileMenuToggle.querySelector("i").className = isActive ? "fas fa-times" : "fas fa-bars";
-    });
-
-    document.addEventListener("click", (e) => {
-        if (!navControls.contains(e.target) && !mobileMenuToggle.contains(e.target) && navControls.classList.contains("mobile-active")) {
-            navControls.classList.remove("mobile-active");
-            mobileMenuToggle.setAttribute("aria-expanded", "false");
-            mobileMenuToggle.querySelector("i").className = "fas fa-bars";
-        }
-    });
-    </script>
+<script>lucide.createIcons();</script>
 </body>
 </html>
diff --git a/web-app/js/hero-canvas.js b/web-app/js/hero-canvas.js
index ff44838..edc05de 100644
--- a/web-app/js/hero-canvas.js
+++ b/web-app/js/hero-canvas.js
@@ -1,297 +1,181 @@
-/* ═══════════════════════════════════════════
-   ANIMATED SNAKES & LADDERS BOARD ON CANVAS
-   Fixed: canvas now fills 100% of hero section
-═══════════════════════════════════════════ */
-const canvas = document.getElementById('boardCanvas');
-
-if (canvas) {
-    const ctx = canvas.getContext('2d');
-
-    /* Force canvas to fill the hero section absolutely */
-(function positionCanvas() {
-    const hero = canvas.closest('.hero-section') || canvas.parentElement;
-    if (hero && getComputedStyle(hero).position === 'static') {
-        hero.style.position = 'relative';
-    }
-    canvas.style.cssText = [
-        'position:absolute',
-        'top:0', 'left:0', 'right:0', 'bottom:0',
-        'width:100%', 'height:100%',
-        'z-index:0',
-        'pointer-events:none',
-        'display:block',
-    ].join(';');
-})();
-
-function resize() {
-    canvas.width  = canvas.offsetWidth  * devicePixelRatio;
-    canvas.height = canvas.offsetHeight * devicePixelRatio;
-    ctx.setTransform(1, 0, 0, 1, 0, 0);
-    ctx.scale(devicePixelRatio, devicePixelRatio);
-}
-resize();
-window.addEventListener('resize', resize);
-
-const W = () => canvas.offsetWidth;
-const H = () => canvas.offsetHeight;
-
-/* ── Colour palette (pastel greens) ── */
-const C = {
-    boardLight: '#fff5e6',
-    boardDark:  '#f6ead7',
-    gridLine:   'rgba(132,97,67,0.12)',
-    snakeBody:  '#f08a6a',
-    snakeHead:  '#d46c4f',
-    ladderRail: '#d19a55',
-    ladderRung: '#f0c47c',
-    dice:       'rgba(255,255,255,0.88)',
-    diceDot:    '#6abf8d',
-    token1:     '#6abf8d',
-    token2:     '#c7a36b',
-    num:        'rgba(132,97,67,0.45)',
-};
-
-/* ── Board geometry ── */
-const ROWS = 10, COLS = 10;
-
-function cellRect(col, row) {
-    const w = W(), h = H();
-    const cw = w / COLS, ch = h / ROWS;
-    return { x: col * cw, y: (ROWS - 1 - row) * ch, w: cw, h: ch };
-}
-
-function cellCenter(n) {
-    const idx = n - 1;
-    const row = Math.floor(idx / COLS);
-    let col = idx % COLS;
-    if (row % 2 === 1) col = COLS - 1 - col;
-    const r = cellRect(col, row);
-    return { x: r.x + r.w / 2, y: r.y + r.h / 2 };
-}
-
-/* ── Snakes & Ladders definitions ── */
-const snakes  = [[97,78],[95,56],[88,24],[76,37],[74,53],[62,19],[54,34],[19,7]];
-const ladders = [[4,25],[9,31],[20,41],[28,84],[40,59],[51,67],[63,81],[71,91]];
-
-/* ── Animated tokens ── */
-class Token {
-    constructor(color, speed) {
-        this.cell  = 1 + Math.floor(Math.random() * 100);
-        this.color = color;
-        this.speed = speed;
-        this.wait  = Math.random() * 200;
-        this.r     = 0;
-        const c = cellCenter(this.cell);
-        this.x = c.x; this.y = c.y;
-        this.tx = c.x; this.ty = c.y;
-    }
-    update() {
-        if (this.wait > 0) { this.wait--; return; }
-        const dx = this.tx - this.x, dy = this.ty - this.y;
-        const dist = Math.sqrt(dx * dx + dy * dy);
-        if (dist < 1.5) {
-            this.x = this.tx; this.y = this.ty;
-            if (Math.random() < 0.015) {
-                this.cell = 1 + Math.floor(Math.random() * 100);
-                const c = cellCenter(this.cell);
-                this.tx = c.x; this.ty = c.y;
-                this.wait = 30 + Math.random() * 80;
-            }
-        } else {
-            this.x += dx * this.speed;
-            this.y += dy * this.speed;
-        }
-        this.r += 0.04;
-    }
-    draw() {
-        const s = Math.min(W(), H()) * 0.025;
-        ctx.save();
-        ctx.translate(this.x, this.y);
-        ctx.rotate(Math.sin(this.r) * 0.3);
-        ctx.beginPath();
-        ctx.arc(0, 0, s, 0, Math.PI * 2);
-        ctx.fillStyle = this.color;
-        ctx.shadowColor = this.color;
-        ctx.shadowBlur = 10;
-        ctx.fill();
-        ctx.shadowBlur = 0;
-        ctx.restore();
-    }
-}
-
-const tokens = [
-    new Token(C.token1, 0.06),
-    new Token(C.token2, 0.05),
-];
-
-/* ── Dice animation ── */
-const diceAnim = { val: 1, t: 0 };
-
-/* ── Draw board ── */
-function drawBoard() {
-    const w = W(), h = H();
-    ctx.fillStyle = '#fff9f0';
-    ctx.fillRect(0, 0, w, h);
-
-    for (let row = 0; row < ROWS; row++) {
-        for (let col = 0; col < COLS; col++) {
-            const r = cellRect(col, row);
-            ctx.fillStyle = (row + col) % 2 === 0 ? C.boardLight : C.boardDark;
-            ctx.fillRect(r.x, r.y, r.w, r.h);
-            ctx.strokeStyle = C.gridLine;
-            ctx.lineWidth = 0.5;
-            ctx.strokeRect(r.x, r.y, r.w, r.h);
-
-            /* cell numbers */
-            const cellNum = (row % 2 === 0)
-                ? (row * COLS + col + 1)
-                : (row * COLS + (COLS - col));
-            ctx.fillStyle = C.num;
-            ctx.font = `bold ${Math.max(9, r.w * 0.22)}px Nunito, sans-serif`;
-            ctx.textAlign = 'left';
-            ctx.textBaseline = 'top';
-            ctx.fillText(cellNum, r.x + r.w * 0.08, r.y + r.h * 0.06);
-        }
+/* ═══════════════════════════════════════════════════════════════
+   hero-canvas.js — Interactive Particle Mesh Background
+   Smooth, performance-first particle grid that responds to
+   mouse movement with subtle connections and gentle drift.
+   ═══════════════════════════════════════════════════════════════ */
+
+(function () {
+  'use strict';
+
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+  function ParticleMesh(canvasId) {
+    var self = this;
+    this.canvas = document.getElementById(canvasId);
+    if (!this.canvas) return;
+
+    this.ctx = this.canvas.getContext('2d');
+    this.particles = [];
+    this.mouse = { x: null, y: null, radius: 120 };
+    this.W = 0;
+    this.H = 0;
+    this.animFrame = null;
+    this.isDark = document.documentElement.getAttribute('data-theme') !== 'light';
+
+    this.CONFIG = {
+      count: 60,
+      maxDist: 140,
+      speed: 0.15,
+      connectionOpacity: this.isDark ? 0.12 : 0.08,
+      particleRadius: this.isDark ? 3.0 : 2.5,
+      color: this.isDark ? '255,255,255' : '0,0,0',
+      mousePull: 0.03,
+    };
+
+    // Particle Object constructor inside instance scope
+    function Particle() {
+      this.x = Math.random() * self.W;
+      this.y = Math.random() * self.H;
+      this.vx = (Math.random() - 0.5) * self.CONFIG.speed;
+      this.vy = (Math.random() - 0.5) * self.CONFIG.speed;
+      this.phase = Math.random() * Math.PI * 2;
     }
-}
-
-/* ── Draw snakes ── */
-function drawSnakes() {
-    snakes.forEach(([from, to]) => {
-        const a = cellCenter(from), b = cellCenter(to);
-        const t = performance.now() / 1200;
-        const segments = 20;
-        const amp = Math.min(W(), H()) * 0.025;
 
-        ctx.beginPath();
-        for (let i = 0; i <= segments; i++) {
-            const p = i / segments;
-            const x = a.x + (b.x - a.x) * p + Math.sin(p * Math.PI * 3 + t) * amp;
-            const y = a.y + (b.y - a.y) * p;
-            i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+    Particle.prototype.update = function () {
+      this.phase += 0.005;
+      this.x += this.vx + Math.sin(this.phase) * 0.1;
+      this.y += this.vy + Math.cos(this.phase * 0.7) * 0.1;
+
+      /* Mouse interaction */
+      if (self.mouse.x !== null) {
+        var dx = self.mouse.x - this.x;
+        var dy = self.mouse.y - this.y;
+        var dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist < self.mouse.radius) {
+          var force = (self.mouse.radius - dist) / self.mouse.radius;
+          this.x -= dx * force * self.CONFIG.mousePull;
+          this.y -= dy * force * self.CONFIG.mousePull;
         }
-        ctx.strokeStyle = C.snakeBody;
-        ctx.lineWidth = Math.min(W(), H()) * 0.018;
-        ctx.lineCap = 'round';
-        ctx.lineJoin = 'round';
-        ctx.globalAlpha = 0.7;
-        ctx.stroke();
-        ctx.globalAlpha = 1;
-
-        /* head */
-        ctx.beginPath();
-        ctx.arc(a.x, a.y, Math.min(W(), H()) * 0.016, 0, Math.PI * 2);
-        ctx.fillStyle = C.snakeHead;
-        ctx.fill();
-
-        /* eyes */
-        const eyeR = Math.min(W(), H()) * 0.004;
-        ctx.beginPath();
-        ctx.arc(a.x - eyeR * 1.8, a.y - eyeR * 1.5, eyeR, 0, Math.PI * 2);
-        ctx.arc(a.x + eyeR * 1.8, a.y - eyeR * 1.5, eyeR, 0, Math.PI * 2);
-        ctx.fillStyle = '#fff';
-        ctx.fill();
-    });
-}
-
-/* ── Draw ladders ── */
-function drawLadders() {
-    ladders.forEach(([from, to]) => {
-        const a = cellCenter(from), b = cellCenter(to);
-        const dx = b.x - a.x, dy = b.y - a.y;
-        const len = Math.sqrt(dx * dx + dy * dy);
-        const ux = -dy / len, uy = dx / len;
-        const rail = Math.min(W(), H()) * 0.012;
-
-        [rail, -rail].forEach(off => {
-            ctx.beginPath();
-            ctx.moveTo(a.x + ux * off, a.y + uy * off);
-            ctx.lineTo(b.x + ux * off, b.y + uy * off);
-            ctx.strokeStyle = C.ladderRail;
-            ctx.lineWidth = Math.min(W(), H()) * 0.006;
-            ctx.globalAlpha = 0.75;
-            ctx.stroke();
-            ctx.globalAlpha = 1;
-        });
-
-        const rungs = Math.round(len / (Math.min(W(), H()) * 0.065));
-        for (let i = 1; i < rungs; i++) {
-            const p = i / rungs;
-            const rx = a.x + dx * p, ry = a.y + dy * p;
-            ctx.beginPath();
-            ctx.moveTo(rx + ux * rail, ry + uy * rail);
-            ctx.lineTo(rx - ux * rail, ry - uy * rail);
-            ctx.strokeStyle = C.ladderRung;
-            ctx.lineWidth = Math.min(W(), H()) * 0.005;
-            ctx.globalAlpha = 0.7;
-            ctx.stroke();
-            ctx.globalAlpha = 1;
+      }
+
+      /* Wrap around edges */
+      if (this.x < 0) this.x = self.W;
+      if (this.x > self.W) this.x = 0;
+      if (this.y < 0) this.y = self.H;
+      if (this.y > self.H) this.y = 0;
+    };
+
+    Particle.prototype.draw = function () {
+      self.ctx.beginPath();
+      self.ctx.arc(this.x, this.y, self.CONFIG.particleRadius, 0, Math.PI * 2);
+      self.ctx.fillStyle = 'rgba(' + self.CONFIG.color + ', 0.6)';
+      self.ctx.fill();
+    };
+
+    this.resize = function () {
+      var rect = self.canvas.parentElement.getBoundingClientRect();
+      self.W = self.canvas.width = rect.width * window.devicePixelRatio;
+      self.H = self.canvas.height = rect.height * window.devicePixelRatio;
+      self.canvas.style.width = rect.width + 'px';
+      self.canvas.style.height = rect.height + 'px';
+      self.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+      self.W = rect.width;
+      self.H = rect.height;
+    };
+
+    this.drawConnections = function () {
+      var len = self.particles.length;
+      for (var i = 0; i < len; i++) {
+        for (var j = i + 1; j < len; j++) {
+          var dx = self.particles[i].x - self.particles[j].x;
+          var dy = self.particles[i].y - self.particles[j].y;
+          var dist = dx * dx + dy * dy;
+
+          if (dist < self.CONFIG.maxDist * self.CONFIG.maxDist) {
+            var opacity = (1 - dist / (self.CONFIG.maxDist * self.CONFIG.maxDist)) * self.CONFIG.connectionOpacity;
+            self.ctx.beginPath();
+            self.ctx.moveTo(self.particles[i].x, self.particles[i].y);
+            self.ctx.lineTo(self.particles[j].x, self.particles[j].y);
+            self.ctx.strokeStyle = 'rgba(' + self.CONFIG.color + ', ' + opacity + ')';
+            self.ctx.lineWidth = 0.5;
+            self.ctx.stroke();
+          }
         }
+      }
+    };
+
+    this.animate = function () {
+      self.ctx.clearRect(0, 0, self.W, self.H);
+
+      for (var i = 0; i < self.particles.length; i++) {
+        self.particles[i].update();
+        self.particles[i].draw();
+      }
+
+      self.drawConnections();
+
+      self.animFrame = requestAnimationFrame(self.animate.bind(self));
+    };
+
+    this.onMouseMove = function (e) {
+      var rect = self.canvas.getBoundingClientRect();
+      self.mouse.x = e.clientX - rect.left;
+      self.mouse.y = e.clientY - rect.top;
+    };
+
+    this.onMouseLeave = function () {
+      self.mouse.x = null;
+      self.mouse.y = null;
+    };
+
+    this.onThemeChange = function () {
+      self.isDark = document.documentElement.getAttribute('data-theme') !== 'light';
+      self.CONFIG.color = self.isDark ? '255,255,255' : '0,0,0';
+      self.CONFIG.connectionOpacity = self.isDark ? 0.12 : 0.08;
+      self.CONFIG.particleRadius = self.isDark ? 3.0 : 2.5;
+    };
+
+    this.init = function () {
+      self.resize();
+      self.particles = [];
+      for (var i = 0; i < self.CONFIG.count; i++) {
+        self.particles.push(new Particle());
+      }
+      self.animate();
+    };
+
+    this.destroy = function () {
+      if (self.animFrame) cancelAnimationFrame(self.animFrame);
+    };
+
+    // Listen to resize and hover events
+    window.addEventListener('resize', this.resize.bind(this));
+    this.canvas.addEventListener('mousemove', this.onMouseMove.bind(this));
+    this.canvas.addEventListener('mouseleave', this.onMouseLeave.bind(this));
+
+    this.init();
+  }
+
+  // Initialize animations on both canvases
+  var mesh1 = new ParticleMesh('boardCanvas');
+  var mesh2 = new ParticleMesh('timelineCanvas');
+
+  /* ── Observe theme changes ───────────────────────────────── */
+  var themeObserver = new MutationObserver(function (mutations) {
+    mutations.forEach(function (m) {
+      if (m.attributeName === 'data-theme') {
+        if (mesh1 && typeof mesh1.onThemeChange === 'function') mesh1.onThemeChange();
+        if (mesh2 && typeof mesh2.onThemeChange === 'function') mesh2.onThemeChange();
+      }
     });
-}
-
-/* ── Draw animated dice ── */
-function roundRect(cx, x, y, w, h, r) {
-    cx.beginPath();
-    cx.moveTo(x + r, y);
-    cx.lineTo(x + w - r, y); cx.arcTo(x + w, y, x + w, y + r, r);
-    cx.lineTo(x + w, y + h - r); cx.arcTo(x + w, y + h, x + w - r, y + h, r);
-    cx.lineTo(x + r, y + h); cx.arcTo(x, y + h, x, y + h - r, r);
-    cx.lineTo(x, y + r); cx.arcTo(x, y, x + r, y, r);
-    cx.closePath();
-}
-
-function diceDots(v) {
-    return {
-        1: [[0, 0]],
-        2: [[-1,-1],[1,1]],
-        3: [[-1,-1],[0,0],[1,1]],
-        4: [[-1,-1],[1,-1],[-1,1],[1,1]],
-        5: [[-1,-1],[1,-1],[0,0],[-1,1],[1,1]],
-        6: [[-1,-1],[1,-1],[-1,0],[1,0],[-1,1],[1,1]],
-    }[v] || [];
-}
-
-function drawDice() {
-    const w = W(), h = H();
-    const size = Math.min(w, h) * 0.055;
-    const px = w * 0.06, py = h * 0.12;
-
-    diceAnim.t += 0.03;
-    if (Math.random() < 0.01) diceAnim.val = 1 + Math.floor(Math.random() * 6);
-
-    ctx.save();
-    ctx.translate(px, py);
-    ctx.rotate(Math.sin(diceAnim.t * 0.7) * 0.2);
-
-    ctx.fillStyle = C.dice;
-    ctx.shadowColor = 'rgba(30,138,88,0.3)';
-    ctx.shadowBlur = 12;
-    roundRect(ctx, -size / 2, -size / 2, size, size, size * 0.18);
-    ctx.fill();
-    ctx.shadowBlur = 0;
-
-    ctx.fillStyle = C.diceDot;
-    const dr = size * 0.09;
-    diceDots(diceAnim.val).forEach(([ddx, ddy]) => {
-        ctx.beginPath();
-        ctx.arc(ddx * size * 0.3, ddy * size * 0.3, dr, 0, Math.PI * 2);
-        ctx.fill();
-    });
+  });
+  themeObserver.observe(document.documentElement, { attributes: true });
 
-    ctx.restore();
-}
+  /* ── Cleanup on page unload ──────────────────────────────── */
+  window.addEventListener('beforeunload', function () {
+    if (mesh1) mesh1.destroy();
+    if (mesh2) mesh2.destroy();
+    themeObserver.disconnect();
+  });
 
-/* ── Main loop ── */
-function loop() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    drawBoard();
-    drawLadders();
-    drawSnakes();
-    tokens.forEach(t => { t.update(); t.draw(); });
-    drawDice();
-    requestAnimationFrame(loop);
-    }
-
-    loop();
-}
+})();
diff --git a/web-app/js/main.js b/web-app/js/main.js
index 40c2072..f22a683 100644
--- a/web-app/js/main.js
+++ b/web-app/js/main.js
@@ -1,1251 +1,1153 @@
-/*
-  main.js – lightweight app wiring
-  ─────────────────────────────────────────────────────────────────────
-  CHANGES vs original (search "── PLAYGROUND" for every touched area):
-    1. projectsSection reference added (to hide/show vs playground)
-    2. applyCategoryFilter() guards against 'playground' category
-    3. Tab click handler detects playground tab and delegates to
-       window.playgroundAPI (defined in playground.js)
-    4. moveTabFocus() skips playground-only activation; other tabs
-       call deactivatePlayground automatically
-    5. randomProjectBtn is hidden while playground is active
-  ─────────────────────────────────────────────────────────────────────
-  Everything else is 100 % identical to the original.
-*/
+/* ═══════════════════════════════════════════════════════════════
+   main.js — App wiring for Premium Python Projects Gallery
+   ═══════════════════════════════════════════════════════════════ */
 
 function prefersReducedMotion() {
-    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 }
 
-// Accessibility helper referenced by modal code
-function setMainInert(isInert) {
-    var main = document.getElementById('main-content');
-    if (!main) return;
-    if (isInert) main.setAttribute('inert', ''); else main.removeAttribute('inert');
-}
+function safeRun(fn) { try { fn(); } catch (e) { console.error(e); } }
 
-function safeRun(fn) {
-    try { fn(); } catch (err) { console.error(err); }
+function debounce(fn, ms) {
+  var timer;
+  return function () {
+    var args = arguments; var ctx = this;
+    clearTimeout(timer);
+    timer = setTimeout(function () { fn.apply(ctx, args); }, ms);
+  };
 }
 
-// Debounce function for smooth search performance
-function debounce(func, delay) {
-    var timeoutId;
-    return function () {
-        var args = arguments;
-        clearTimeout(timeoutId);
-        timeoutId = setTimeout(function () { func.apply(null, args); }, delay);
-    };
+function syncThemeColor(theme) {
+  var meta = document.getElementById('themeColorMeta');
+  if (meta) meta.setAttribute('content', theme === 'light' ? '#f4f6f9' : '#0c0f1a');
 }
 
-// Sync the theme-color <meta> tag with the current theme
-function syncThemeColor(theme) {
-    var meta = document.getElementById('themeColorMeta');
-    if (meta) meta.setAttribute('content', theme === 'light' ? '#fffdf8' : '#201a18');
+function escapeHtml(str) {
+  var d = document.createElement('div');
+  d.textContent = str;
+  return d.innerHTML;
 }
 
+/* ── DOMContentLoaded ──────────────────────────────────────── */
 document.addEventListener('DOMContentLoaded', function () {
-
-    // Sort project cards lexicographically (alphabetically) by title
-    var projectsGrid = document.querySelector('.projects-grid');
-    var rawCards = projectsGrid ? Array.from(projectsGrid.querySelectorAll('.project-card')) : [];
-    if (rawCards.length > 0) {
-        rawCards.sort(function (a, b) {
-            var h3A = a.querySelector('h3');
-            var h3B = b.querySelector('h3');
-            var titleA = h3A ? h3A.textContent.trim() : '';
-            var titleB = h3B ? h3B.textContent.trim() : '';
-            return titleA.localeCompare(titleB);
-        });
-        var reorderedCards = document.createDocumentFragment();
-        rawCards.forEach(function (card) {
-            reorderedCards.appendChild(card);
-        });
-        projectsGrid.appendChild(reorderedCards);
-    }
-
-    // ── DOM references ──────────────────────────────────────────────
-    var html = document.documentElement;
-    var themeToggle = document.getElementById('themeToggle');
-    var soundToggle = document.getElementById('soundToggle');
-    var backToTopButton = document.getElementById('backToTop');
-    var tabs = document.querySelectorAll('.tab');
-    var projectCards = Array.from(document.querySelectorAll('.project-card'));
-    var searchInput = document.getElementById('projectSearch') || document.getElementById('searchInput');
-    var searchClear = document.getElementById('searchClear');
-    var searchDropdown = document.getElementById('searchDropdown');
-    var searchShortcut = document.getElementById('searchShortcut');
-    var searchLoader = document.getElementById('searchLoader');
-    var projectsSection = document.getElementById('projectsSection');
-    var playgroundSection = document.getElementById('playgroundSection');
-    var stickyFilterBar = document.getElementById('stickyFilterBar');
-    var stickyTabs = document.querySelectorAll('.sticky-tab');
-    var heroSection = document.querySelector('.hero-section');
-    var cursorGlow = document.getElementById('cursorGlow');
-    var heroTypewriter = document.getElementById('heroTypewriter');
-    var heroProjectCount = document.getElementById('heroProjectCount');
-    var heroGameCount = document.getElementById('heroGameCount');
-    var heroUtilityCount = document.getElementById('heroUtilityCount');
-    var revealItems = document.querySelectorAll('.reveal-on-scroll');
-    var featureLaunchers = document.querySelectorAll('[data-project-target]');
-    var emptyState = document.getElementById('emptyState');
-    var resultsList = document.getElementById('resultsList');
-    var resultsSection = document.getElementById('resultsSection');
-    var recentSearchesList = document.getElementById('recentSearchesList');
-    var recentSearchesSection = document.getElementById('recentSearchesSection');
-    var tipsSection = document.getElementById('tipsSection');
-    var noResultsMessage = document.getElementById('noResultsMessage');
-    var modal = document.getElementById('projectModal');
-    var modalBody = document.getElementById('modalBody');
-    var modalClose = document.getElementById('modalClose');
-    var modalTitle = document.getElementById('modalDialogTitle');
-    /* randomProjectBtn and playgroundHeroBtn removed — sidebar handles those actions */
-
-
-    var currentCategory = 'all';
-    var currentSearchQuery = '';
-    var playgroundActive = false;
-    var selectedSuggestionIndex = -1;
-    var removeTrap = null;
-    var lastFocusedElement = null;
-    var recentSearches = JSON.parse(localStorage.getItem('recentSearches') || '[]');
-    //-----------------------project count badge------------------------------------
-    const projectCountBadge = document.getElementById("projectCountBadge");
-    const projectCount = document.querySelectorAll(".project-card").length;
-    const gameCount = projectCards.filter(function (card) { return card.getAttribute('data-category') === 'games'; }).length;
-    const utilityCount = projectCards.filter(function (card) { return card.getAttribute('data-category') === 'utilities'; }).length;
-
-    if (projectCountBadge) {
-        projectCountBadge.textContent = `${projectCount} projects`;
-    }
-    if (heroProjectCount) heroProjectCount.textContent = String(projectCount);
-    if (heroGameCount) heroGameCount.textContent = String(gameCount);
-    if (heroUtilityCount) heroUtilityCount.textContent = String(utilityCount);
-
-    var rotatePhrases = [
-        'typing speed drills',
-        'math quiz rounds',
-        'logic puzzle practice',
-        'browser-ready Python wins'
-    ];
-
-    if (heroTypewriter && !prefersReducedMotion()) {
-        var phraseIndex = 0;
-        setInterval(function () {
-            phraseIndex = (phraseIndex + 1) % rotatePhrases.length;
-            heroTypewriter.textContent = rotatePhrases[phraseIndex];
-        }, 2200);
-    }
-
-    if (cursorGlow && !prefersReducedMotion()) {
-        document.addEventListener('pointermove', function (event) {
-            cursorGlow.style.left = event.clientX + 'px';
-            cursorGlow.style.top = event.clientY + 'px';
-        });
-        document.addEventListener('pointerleave', function () {
-            cursorGlow.style.opacity = '0';
-        });
-        document.addEventListener('pointerenter', function () {
-            cursorGlow.style.opacity = '0.5';
-        });
-    }
-    // ── Theme Toggle ────────────────────────────────────────────────
-    function updateThemeToggleAria(isLightTheme) {
-        if (!themeToggle) return;
-        themeToggle.setAttribute(
-            'aria-label',
-            isLightTheme ? 'Switch to dark mode' : 'Switch to light mode'
-        );
-    }
-
-    if (themeToggle) {
-        var savedTheme = localStorage.getItem('theme') || 'light';
-        html.setAttribute('data-theme', savedTheme);
-        syncThemeColor(savedTheme);
-        themeToggle.innerHTML =
-            savedTheme === 'light'
-                ? '<img src="assets/sun.svg" alt="" aria-hidden="true" class="theme-icon">'
-                : '<img src="assets/moon.svg" alt="" aria-hidden="true" class="theme-icon">';
-        updateThemeToggleAria(savedTheme === 'light');
-
-        themeToggle.addEventListener('click', function () {
-            var currentTheme = html.getAttribute('data-theme');
-            var newTheme = currentTheme === 'light' ? 'dark' : 'light';
-
-            html.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            syncThemeColor(newTheme);
-
-            themeToggle.innerHTML =
-                newTheme === 'light'
-                    ? '<img src="assets/sun.svg" alt="" aria-hidden="true" class="theme-icon">'
-                    : '<img src="assets/moon.svg" alt="" aria-hidden="true" class="theme-icon">';
-            updateThemeToggleAria(newTheme === 'light');
-        });
+  var html = document.documentElement;
+  var themeToggle = document.getElementById('themeToggle');
+  var soundToggle = document.getElementById('soundToggle');
+  var backToTopButton = document.getElementById('backToTop');
+  var searchInput = document.getElementById('searchInput');
+  var searchDropdown = document.getElementById('searchDropdown');
+  var searchLoader = document.getElementById('searchLoader');
+  var recentSearchesList = document.getElementById('recentSearchesList');
+  var recentSearchesSection = document.getElementById('recentSearchesSection');
+  var resultsList = document.getElementById('resultsList');
+  var resultsSection = document.getElementById('resultsSection');
+  var tipsSection = document.getElementById('tipsSection');
+  var noResultsMessage = document.getElementById('noResultsMessage');
+  var projectsSection = document.getElementById('projectsSection');
+  var playgroundSection = document.getElementById('playgroundSection');
+  var stickyFilterBar = document.getElementById('stickyFilterBar');
+  var stickyTabs = document.querySelectorAll('.sticky-tab');
+  var heroSection = document.querySelector('.hero-section');
+  var cursorGlow = document.getElementById('cursorGlow');
+  var heroProjectCount = document.getElementById('heroProjectCount');
+  var heroGameCount = document.getElementById('heroGameCount');
+  var heroUtilityCount = document.getElementById('heroUtilityCount');
+  var modal = document.getElementById('projectModal');
+  var modalBody = document.getElementById('modalBody');
+  var modalClose = document.getElementById('modalClose');
+  var modalTitle = document.getElementById('modalDialogTitle');
+  var exploreBtn = document.getElementById('exploreBtn');
+  var randomProjectBtn = document.getElementById('randomProjectBtn');
+  var randomProjectBtnSidebar = document.getElementById('randomProjectBtnSidebar');
+  var emptyState = document.getElementById('emptyState');
+  var emptyStateHint = document.getElementById('emptyStateHint');
+  var projectCountBadge = document.getElementById('projectCountBadge');
+  var mobileMenuToggle = document.getElementById('mobileMenuToggle');
+  var navControls = document.getElementById('navControls');
+  var navbar = document.getElementById('mainNavbar');
+
+  var currentCategory = 'all';
+  var currentSearchQuery = '';
+  var playgroundActive = false;
+  var selectedSuggestionIndex = -1;
+  var removeTrap = null;
+  var lastFocusedElement = null;
+  var projectCards = [];
+  var recentSearches = JSON.parse(localStorage.getItem('recentSearches') || '[]');
+
+  /* ── Helper: setMainInert ─────────────────────────────────── */
+  function setMainInert(isInert) {
+    var main = document.getElementById('main-content');
+    if (!main) return;
+    if (isInert) main.setAttribute('inert', ''); else main.removeAttribute('inert');
+  }
+
+  /* ── Theme Toggle ─────────────────────────────────────────── */
+  function updateThemeToggleAria(isLight) {
+    if (!themeToggle) return;
+    themeToggle.setAttribute('aria-label', isLight ? 'Switch to dark mode' : 'Switch to light mode');
+  }
+
+  if (themeToggle) {
+    var savedTheme = localStorage.getItem('theme') || 'dark';
+    html.setAttribute('data-theme', savedTheme);
+    syncThemeColor(savedTheme);
+    themeToggle.innerHTML = savedTheme === 'light'
+      ? '<i class="fas fa-sun"></i>'
+      : '<i class="fas fa-moon"></i>';
+    updateThemeToggleAria(savedTheme === 'light');
+
+    themeToggle.addEventListener('click', function () {
+      var current = html.getAttribute('data-theme');
+      var next = current === 'light' ? 'dark' : 'light';
+      html.setAttribute('data-theme', next);
+      localStorage.setItem('theme', next);
+      syncThemeColor(next);
+      themeToggle.innerHTML = next === 'light'
+        ? '<i class="fas fa-sun"></i>'
+        : '<i class="fas fa-moon"></i>';
+      updateThemeToggleAria(next === 'light');
+    });
+  }
+
+  /* ── Sound Toggle ─────────────────────────────────────────── */
+  if (soundToggle && window.audioController) {
+    function updateSoundIcon() {
+      soundToggle.innerHTML = window.audioController.isMuted
+        ? '<i class="fas fa-volume-mute"></i>'
+        : '<i class="fas fa-volume-up"></i>';
     }
-
-    // ── Sound Toggle ─────────────────────────────────────────────────
-    if (soundToggle) {
-        var updateSoundIcon = function () {
-            if (window.audioController) {
-                soundToggle.innerHTML = window.audioController.isMuted
-                    ? '<i class="fas fa-volume-mute"></i>'
-                    : '<i class="fas fa-volume-up"></i>';
-            }
-        };
+    updateSoundIcon();
+    soundToggle.addEventListener('click', function () {
+      if (typeof window.audioController.toggleMute === 'function') {
+        window.audioController.toggleMute();
         updateSoundIcon();
-        soundToggle.addEventListener('click', function () {
-            if (window.audioController && typeof window.audioController.toggleMute === 'function') {
-                window.audioController.toggleMute();
-                updateSoundIcon();
-                if (!window.audioController.isMuted && typeof window.audioController.play === 'function') {
-                    window.audioController.play('click');
-                }
-            }
-        });
-    }
-
-    // ── Back to Top ──────────────────────────────────────────────────
-    if (backToTopButton) {
-        var toggleBackToTopButton = function () {
-            backToTopButton.classList.toggle('visible', window.scrollY > 300);
-            var navbar = document.querySelector('.navbar');
-            if (navbar) navbar.classList.toggle('scrolled', window.scrollY > 12);
-        };
-        window.addEventListener('scroll', toggleBackToTopButton, { passive: true });
-        toggleBackToTopButton();
-
-        backToTopButton.addEventListener('click', function () {
-            window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
-        });
-    }
-
-    // ── PLAYGROUND: helpers to show / hide sections ─────────────────
-    /* ← PLAYGROUND ADD (entire block) */
-    function showProjectsSection() {
-        playgroundActive = false;
-        if (playgroundSection) playgroundSection.style.display = 'none';
-        if (projectsSection) projectsSection.style.display = '';
-        if (window.playgroundAPI && typeof window.playgroundAPI.deactivate === 'function') {
-            window.playgroundAPI.deactivate();
+        if (!window.audioController.isMuted && typeof window.audioController.play === 'function') {
+          window.audioController.play('click');
         }
-    }
-
-    function showPlaygroundSection() {
-        playgroundActive = true;
-        syncStickyTabs('playground');
-        if (projectsSection) projectsSection.style.display = 'none';
-        if (window.playgroundAPI && typeof window.playgroundAPI.activate === 'function') {
-            window.playgroundAPI.activate();
-        }
-    }
-    /* ← PLAYGROUND ADD end */
-    // ── Sticky Filter Bar: position + show/hide on scroll ────────────
-function syncStickyTabs(category) {
-    stickyTabs.forEach(function (st) {
-        var selected = st.getAttribute('data-sticky-category') === category;
-        st.classList.toggle('active', selected);
-        st.setAttribute('aria-selected', selected ? 'true' : 'false');
-        st.setAttribute('tabindex', selected ? '0' : '-1');
+      }
     });
-}
-
-if (stickyFilterBar && heroSection) {
-    // Position the bar directly below the navbar
-    var navbar = document.querySelector('.navbar');
-    function positionStickyBar() {
-        var navHeight = navbar ? navbar.getBoundingClientRect().height : 0;
-        stickyFilterBar.style.top = navHeight + 'px';
-    }
-    positionStickyBar();
-    window.addEventListener('resize', positionStickyBar);
-
-    var heroObserver = new IntersectionObserver(function (entries) {
-        entries.forEach(function (entry) {
-            stickyFilterBar.classList.toggle('visible', !entry.isIntersecting);
-        });
-    }, { threshold: 0 });
-    heroObserver.observe(heroSection);
-}
-
-    // Wire sticky tab clicks — mirrors main tab behaviour
-    stickyTabs.forEach(function (st) {
-        st.addEventListener('click', function () {
-            var category = st.getAttribute('data-sticky-category');
-
-            // Sync sticky tabs UI
-            syncStickyTabs(category);
-
-            // Sync hero tabs UI
-            tabs.forEach(function (t) {
-                var selected = t.getAttribute('data-category') === category;
-                t.classList.toggle('active', selected);
-                t.setAttribute('aria-selected', selected ? 'true' : 'false');
-                t.setAttribute('tabindex', selected ? '0' : '-1');
-            });
-
-            // Delegate section logic (same as hero tab click)
-            if (category === 'playground') {
-                showPlaygroundSection();
-            } else {
-                showProjectsSection();
-                applyCategoryFilter(category);
-            }
-        });
+  } else if (soundToggle) {
+    soundToggle.addEventListener('click', function () {
+      var icon = soundToggle.querySelector('i');
+      if (icon) icon.className = icon.className === 'fas fa-volume-up' ? 'fas fa-volume-mute' : 'fas fa-volume-up';
     });
-
-    // ── Category Filtering ───────────────────────────────────────────
-    function applyCategoryFilter(category) {
-        /* ── PLAYGROUND ADD: skip filtering when playground tab is selected ── */
-        if (category === 'playground') return;
-        /* ── PLAYGROUND ADD end ── */
-
-        currentCategory = category;
-        syncStickyTabs(category);
-        var visibleCount = 0;
-        var favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
-        projectCards.forEach(function (card) {
-            var cardCategory = card.getAttribute('data-category');
-            var projectName = card.getAttribute('data-project');
-            var isFavorite = favorites.includes(projectName);
-
-            if (category === 'all' || 
-                (category === 'favorites' && isFavorite) || 
-                (category !== 'favorites' && cardCategory === category)) {
-                card.style.display = '';
-                card.style.animation = prefersReducedMotion() ? 'none' : 'fadeIn 0.6s ease';
-                visibleCount++;
-            } else {
-                card.style.display = 'none';
-            }
-        });
-        
-        if (emptyState) {
-            emptyState.style.display = visibleCount === 0 ? 'block' : 'none';
-        }
-        if (sidebarBadge) {
-            sidebarBadge.textContent = String(visibleCount);
-        }
+  }
+
+  /* ── Hero Controls Mirror Toggles ─────────────────────────── */
+  var heroSoundToggle = document.getElementById('heroSoundToggle');
+  var heroThemeToggle = document.getElementById('heroThemeToggle');
+
+  function syncHeroControlsIcons() {
+    if (heroSoundToggle && soundToggle) {
+      var realSoundIcon = soundToggle.querySelector('i');
+      var heroSoundIcon = heroSoundToggle.querySelector('i');
+      if (realSoundIcon && heroSoundIcon) {
+        heroSoundIcon.className = realSoundIcon.className;
+      }
     }
-
-    function moveTabFocus(fromIndex, delta) {
-        var len = tabs.length;
-        var next = (fromIndex + delta + len) % len;
-        tabs.forEach(function (t, i) {
-            var selected = i === next;
-            t.classList.toggle('active', selected);
-            t.setAttribute('aria-selected', selected ? 'true' : 'false');
-            t.setAttribute('tabindex', selected ? '0' : '-1');
-        });
-        tabs[next].focus();
-
-        /* ── PLAYGROUND ADD: delegate to section helpers ── */
-        var nextCategory = tabs[next].getAttribute('data-category');
-        if (nextCategory === 'playground') {
-            showPlaygroundSection();
-        } else {
-            showProjectsSection();
-            applyCategoryFilter(nextCategory);
-        }
-        /* ── PLAYGROUND ADD end ── */
+    if (heroThemeToggle && themeToggle) {
+      var realThemeIcon = themeToggle.querySelector('i');
+      var heroThemeIcon = heroThemeToggle.querySelector('i');
+      if (realThemeIcon && heroThemeIcon) {
+        heroThemeIcon.className = realThemeIcon.className;
+      }
     }
+  }
 
-    tabs.forEach(function (tab, index) {
-        tab.addEventListener('click', function () {
-            /* Update active state on all tabs */
-            tabs.forEach(function (t) {
-                var selected = t === tab;
-                t.classList.toggle('active', selected);
-                t.setAttribute('aria-selected', selected ? 'true' : 'false');
-                t.setAttribute('tabindex', selected ? '0' : '-1');
-            });
-
-            var category = tab.getAttribute('data-category');
-
-            /* ── PLAYGROUND ADD: playground tab gets its own section ── */
-            if (category === 'playground') {
-                showPlaygroundSection();
-            } else {
-                showProjectsSection();
-                applyCategoryFilter(category);
-            }
-            /* ── PLAYGROUND ADD end ── */
-        });
-
-        tab.addEventListener('keydown', function (e) {
-            var handled = false;
-            if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
-                moveTabFocus(index, 1);
-                handled = true;
-            } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
-                moveTabFocus(index, -1);
-                handled = true;
-            } else if (e.key === 'Home') {
-                moveTabFocus(index, -index);
-                handled = true;
-            } else if (e.key === 'End') {
-                moveTabFocus(index, tabs.length - 1 - index);
-                handled = true;
-            }
-            if (handled) e.preventDefault();
-        });
+  if (heroSoundToggle && soundToggle) {
+    heroSoundToggle.addEventListener('click', function () {
+      soundToggle.click();
+      setTimeout(syncHeroControlsIcons, 50);
     });
+  }
 
-    // ── Sidebar Filter Tabs ───────────────────────────────────────────
-    var sidebarTabs = document.querySelectorAll('.sidebar-tab');
-    var sidebarBadge = document.getElementById('sidebarProjectCount');
-    var sidebarRandomBtn = document.getElementById('randomProjectBtnSidebar');
-
-    function syncSidebarTabs(category) {
-        sidebarTabs.forEach(function (st) {
-            var selected = st.getAttribute('data-category') === category;
-            st.classList.toggle('active', selected);
-            st.setAttribute('aria-selected', selected ? 'true' : 'false');
-            st.setAttribute('tabindex', selected ? '0' : '-1');
-        });
-        if (sidebarBadge) {
-            var visible = projectCards.filter(function (c) { return c.style.display !== 'none'; }).length;
-            sidebarBadge.textContent = String(visible);
-        }
-    }
-
-    sidebarTabs.forEach(function (st) {
-        st.addEventListener('click', function () {
-            var category = st.getAttribute('data-category');
-            syncSidebarTabs(category);
-            syncStickyTabs(category);
-
-            if (category === 'playground') {
-                showPlaygroundSection();
-                var pg = document.getElementById('playgroundSection');
-                if (pg) pg.scrollIntoView({ behavior: 'smooth', block: 'start' });
-            } else {
-                showProjectsSection();
-                applyCategoryFilter(category);
-                if (projectsSection) {
-                    projectsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                }
-            }
-        });
+  if (heroThemeToggle && themeToggle) {
+    heroThemeToggle.addEventListener('click', function () {
+      themeToggle.click();
+      setTimeout(syncHeroControlsIcons, 50);
+    });
+  }
+
+  // Initial sync on load
+  setTimeout(syncHeroControlsIcons, 100);
+
+  /* ── Mobile Sidebar Toggle ──────────────────────────────── */
+  var mobileSidebarToggle = document.getElementById('mobileSidebarToggle');
+  var mainSidebar = document.getElementById('mainSidebar');
+  if (mobileSidebarToggle && mainSidebar) {
+    mobileSidebarToggle.addEventListener('click', function () {
+      var active = mainSidebar.classList.toggle('open');
+      mobileSidebarToggle.setAttribute('aria-expanded', active);
+      var icon = mobileSidebarToggle.querySelector('i');
+      if (icon) icon.className = active ? 'fas fa-times' : 'fas fa-bars';
     });
 
-    if (sidebarRandomBtn) {
-        sidebarRandomBtn.addEventListener('click', function () {
-            var visible = projectCards.filter(function (c) { return c.style.display !== 'none'; });
-            var pool = visible.length ? visible : projectCards;
-            var pick = pool[Math.floor(Math.random() * pool.length)];
-            var name = pick.getAttribute('data-project');
-            if (name && typeof openProjectSafe === 'function') {
-                openProjectSafe(name, sidebarRandomBtn);
-                setTimeout(function () {
-                    pick.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                }, 300);
-            }
-        });
-    }
-
-    // ── Search / Autocomplete ─────────────────────────────────────────
-    function getMatchingProjects(query) {
-        if (!query) return [];
-        var matches = [];
-        projectCards.forEach(function (card) {
-            var category = card.getAttribute('data-category');
-            var title = card.querySelector('h3').textContent.toLowerCase();
-            var description = card.querySelector('p').textContent.toLowerCase();
-            var tags = (card.getAttribute('data-tags') || '').toLowerCase();
-
-            var categoryMatch = currentCategory === 'all' || category === currentCategory;
-            var searchMatch = title.includes(query) ||
-                description.includes(query) ||
-                tags.includes(query);
-
-            if (categoryMatch && searchMatch) {
-                matches.push({
-                    card: card,
-                    title: card.querySelector('h3').textContent,
-                    tags: card.getAttribute('data-tags') || '',
-                    category: category
-                });
-            }
-        });
-        return matches;
-    }
+    document.addEventListener('click', function (e) {
+      if (mainSidebar && mobileSidebarToggle &&
+          !mainSidebar.contains(e.target) && e.target !== mobileSidebarToggle &&
+          mainSidebar.classList.contains('open')) {
+        mainSidebar.classList.remove('open');
+        mobileSidebarToggle.setAttribute('aria-expanded', 'false');
+        var icon = mobileSidebarToggle.querySelector('i');
+        if (icon) icon.className = 'fas fa-bars';
+      }
+    });
+  }
 
-    function highlightText(container, text, query) {
-        var safeQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-        var chunks = text.split(new RegExp('(' + safeQuery + ')', 'gi'));
-
-        chunks.forEach(function (part) {
-            if (part.toLowerCase() === query.toLowerCase()) {
-                var highlight = document.createElement('mark');
-                highlight.style.background = 'rgba(99, 102, 241, 0.3)';
-                highlight.style.color = 'var(--primary-color)';
-                highlight.style.fontWeight = '600';
-                highlight.textContent = part;
-                container.appendChild(highlight);
-            } else if (part) {
-                container.appendChild(document.createTextNode(part));
-            }
-        });
-    }
+  if (backToTopButton) {
+    var toggleBackToTop = function () {
+      backToTopButton.classList.toggle('visible', window.scrollY > 300);
+    };
+    window.addEventListener('scroll', toggleBackToTop, { passive: true });
+    toggleBackToTop();
 
-    function updateSuggestionHighlight() {
-        if (!resultsList) return;
-        var items = resultsList.querySelectorAll('.dropdown-item');
-        items.forEach(function (item, i) {
-            item.classList.toggle('selected', i === selectedSuggestionIndex);
-        });
+    backToTopButton.addEventListener('click', function () {
+      window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    });
+  }
+
+  /* ── Cursor Glow ──────────────────────────────────────────── */
+  if (cursorGlow && !prefersReducedMotion() && html.getAttribute('data-theme') !== 'light') {
+    var glowTimeout;
+    document.addEventListener('pointermove', function (e) {
+      cursorGlow.style.left = e.clientX + 'px';
+      cursorGlow.style.top = e.clientY + 'px';
+      cursorGlow.style.opacity = '0.5';
+      clearTimeout(glowTimeout);
+      glowTimeout = setTimeout(function () { cursorGlow.style.opacity = '0'; }, 3000);
+    });
+    document.addEventListener('pointerleave', function () {
+      cursorGlow.style.opacity = '0';
+    });
+  }
+
+  /* ── Gather Project Cards ─────────────────────────────────── */
+  var projectsGrid = document.querySelector('.projects-grid');
+  projectCards = Array.from(document.querySelectorAll('.project-card'));
+
+  /* ── Hero Stats ───────────────────────────────────────────── */
+  var totalCount = projectCards.length;
+  var gameCount = projectCards.filter(function (c) { return c.getAttribute('data-category') === 'games'; }).length;
+  var utilityCount = projectCards.filter(function (c) { return c.getAttribute('data-category') === 'utilities'; }).length;
+
+  if (heroProjectCount) heroProjectCount.textContent = String(totalCount);
+  if (heroGameCount) heroGameCount.textContent = String(gameCount);
+  if (heroUtilityCount) heroUtilityCount.textContent = String(utilityCount);
+  if (projectCountBadge) projectCountBadge.textContent = String(totalCount) + ' projects';
+
+  /* ── Explore Button ───────────────────────────────────────── */
+  if (exploreBtn) {
+    exploreBtn.addEventListener('click', function () {
+      if (projectsSection) projectsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+  }
+
+  /* ── Category Filtering ───────────────────────────────────── */
+  var sidebarTabs = document.querySelectorAll('.sidebar-tab');
+  var sidebarBadge = null;
+
+  function applyCategoryFilter(category) {
+    if (category === 'playground') return;
+    currentCategory = category;
+    syncSidebarTabs(category);
+    syncStickyTabs(category);
+    var visibleCount = 0;
+    var favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
+    projectCards.forEach(function (card) {
+      var cardCat = card.getAttribute('data-category');
+      var projectName = card.getAttribute('data-project');
+      var isFav = favorites.includes(projectName);
+      if (category === 'all' ||
+          (category === 'favorites' && isFav) ||
+          (category !== 'favorites' && cardCat === category)) {
+        card.style.display = '';
+        visibleCount++;
+      } else {
+        card.style.display = 'none';
+      }
+    });
+    if (emptyState) {
+      emptyState.style.display = visibleCount === 0 ? 'block' : 'none';
     }
-
-    function selectSuggestion(title) {
-        if (!searchInput) return;
-        searchInput.value = title;
-        currentSearchQuery = title.toLowerCase();
-        performSearch();
-        closeDropdown();
-        if (projectsSection) {
-            projectsSection.scrollIntoView({
-                behavior: prefersReducedMotion() ? 'auto' : 'smooth',
-                block: 'start'
-            });
-        }
+    if (projectCountBadge) {
+      projectCountBadge.textContent = String(visibleCount) + ' projects';
     }
+  }
 
-    function cleanSearchHighlights() {
-        projectCards.forEach(function (card) {
-            var titleEl = card.querySelector('h3');
-            var descEl = card.querySelector('p');
-            [titleEl, descEl].forEach(function (el) {
-                if (!el) return;
-                el.querySelectorAll('mark.search-highlight').forEach(function (m) {
-                    m.replaceWith(m.textContent);
-                });
-            });
-        });
-    }
+  function syncSidebarTabs(category) {
+    sidebarTabs.forEach(function (st) {
+      var selected = st.getAttribute('data-category') === category;
+      st.classList.toggle('active', selected);
+      st.setAttribute('aria-selected', selected ? 'true' : 'false');
+      st.setAttribute('tabindex', selected ? '0' : '-1');
+    });
+  }
 
-    function escapeHtml(str) {
-        var div = document.createElement('div');
-        div.textContent = str;
-        return div.innerHTML;
+  function syncStickyTabs(category) {
+    stickyTabs.forEach(function (st) {
+      var selected = st.getAttribute('data-sticky-category') === category;
+      st.classList.toggle('active', selected);
+      st.setAttribute('aria-selected', selected ? 'true' : 'false');
+      st.setAttribute('tabindex', selected ? '0' : '-1');
+    });
+  }
+
+  /* ── Playground Section Toggle ────────────────────────────── */
+  function showProjectsSection() {
+    playgroundActive = false;
+    if (playgroundSection) playgroundSection.style.display = 'none';
+    if (projectsSection) projectsSection.style.display = '';
+    if (window.playgroundAPI && typeof window.playgroundAPI.deactivate === 'function') {
+      window.playgroundAPI.deactivate();
     }
-
-    function highlightCardText(el, query) {
-        var safe = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-        var regex = new RegExp('(' + safe + ')', 'gi');
-        var escaped = escapeHtml(el.textContent);
-        var html = escaped.replace(regex, '<mark class="search-highlight" style="background:rgba(255,198,132,0.35);color:inherit;border-radius:3px;padding:0 2px;font-weight:600">$1</mark>');
-        el.innerHTML = html;
+  }
+
+  function showPlaygroundSection() {
+    playgroundActive = true;
+    syncStickyTabs('playground');
+    if (projectsSection) projectsSection.style.display = 'none';
+    if (playgroundSection) {
+      playgroundSection.style.display = '';
+      if (window.playgroundAPI && typeof window.playgroundAPI.activate === 'function') {
+        window.playgroundAPI.activate();
+      }
     }
-
-    function performSearch() {
-        var query = currentSearchQuery;
-        cleanSearchHighlights();
-
-        if (!query) {
-            applyCategoryFilter(currentCategory);
-            updateSearchResultCount(0);
-            var hint = document.getElementById('emptyStateHint');
-            if (hint) hint.textContent = 'Try adjusting your search or category filter.';
-            return;
-        }
-
-        if (currentCategory !== 'all') {
-            currentCategory = 'all';
-            syncSidebarTabs('all');
-            syncStickyTabs('all');
-        }
-
-        recentSearches = recentSearches.filter(function (s) { return s !== query; });
-        recentSearches.unshift(query);
-        recentSearches = recentSearches.slice(0, 10);
-        localStorage.setItem('recentSearches', JSON.stringify(recentSearches));
-
-        var visibleCount = 0;
-        var favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
-        projectCards.forEach(function (card) {
-            var category    = card.getAttribute('data-category');
-            var titleText   = (card.querySelector('h3') || {}).textContent || '';
-            var descText    = (card.querySelector('p') || {}).textContent || '';
-            var title       = titleText.toLowerCase();
-            var description = descText.toLowerCase();
-            var tags        = (card.getAttribute('data-tags') || '').toLowerCase();
-            var projectName = card.getAttribute('data-project');
-            var isFavorite  = favorites.includes(projectName);
-
-            var categoryMatch = currentCategory === 'all' || 
-                                (currentCategory === 'favorites' && isFavorite) ||
-                                (currentCategory !== 'favorites' && category === currentCategory);
-            var searchMatch   = title.includes(query) ||
-                                description.includes(query) ||
-                                tags.includes(query);
-
-            if (categoryMatch && searchMatch) {
-                card.style.display = '';
-                card.style.animation = prefersReducedMotion() ? 'none' : 'fadeIn 0.5s ease';
-                visibleCount++;
-                var titleEl = card.querySelector('h3');
-                var descEl = card.querySelector('p');
-                if (titleEl) highlightCardText(titleEl, query);
-                if (descEl) highlightCardText(descEl, query);
-            } else {
-                card.style.display = 'none';
-            }
-        });
-        
-        if (emptyState) {
-            var showEmpty = visibleCount === 0;
-            emptyState.style.display = showEmpty ? 'block' : 'none';
-            if (showEmpty) {
-                var hint = document.getElementById('emptyStateHint');
-                if (hint) hint.textContent = 'No projects match "' + query + '". Try a different keyword.';
-            }
+  }
+
+  /* ── Sidebar Tabs ─────────────────────────────────────────── */
+  sidebarTabs.forEach(function (st) {
+    st.addEventListener('click', function () {
+      var category = st.getAttribute('data-category');
+      
+      var pageCategory = document.body.getAttribute('data-page');
+      if (pageCategory) {
+        // We are on a subpage (games, math, or utilities)
+        if (category === pageCategory) {
+          var grid = document.getElementById('projectsGrid');
+          if (grid) grid.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          return;
         }
+        var pageMap = {
+          'all': 'index.html',
+          'games': 'games.html',
+          'math': 'math.html',
+          'utilities': 'utilities.html',
+          'favorites': 'index.html?category=favorites',
+          'playground': 'index.html?category=playground'
+        };
+        window.location.href = pageMap[category] || 'index.html';
+        return;
+      }
+
+      syncSidebarTabs(category);
+      syncStickyTabs(category);
+
+      if (category === 'playground') {
+        showPlaygroundSection();
+        if (playgroundSection) playgroundSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      } else {
+        showProjectsSection();
+        applyCategoryFilter(category);
+        if (projectsSection) projectsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    });
+  });
+
+  /* ── Sticky Tabs ──────────────────────────────────────────── */
+  stickyTabs.forEach(function (st) {
+    st.addEventListener('click', function () {
+      var category = st.getAttribute('data-sticky-category');
+      syncStickyTabs(category);
+      syncSidebarTabs(category);
+
+      if (category === 'playground') {
+        showPlaygroundSection();
+        if (playgroundSection) playgroundSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      } else {
+        showProjectsSection();
+        applyCategoryFilter(category);
+        if (projectsSection) projectsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    });
+  });
 
-        updateSearchResultCount(visibleCount);
-    }
+  /* ── Sticky Filter Bar Visibility ─────────────────────────── */
+  if (stickyFilterBar && heroSection) {
+    var heroObserver = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        stickyFilterBar.classList.toggle('visible', !entry.isIntersecting);
+      });
+    }, { threshold: 0, rootMargin: '-80px 0px 0px 0px' });
+    heroObserver.observe(heroSection);
 
-    function updateSearchResultCount(count) {
-        var badge = document.getElementById('searchResultCount');
-        if (!badge) {
-            if (!searchInput) return;
-            badge = document.createElement('span');
-            badge.id = 'searchResultCount';
-            badge.style.cssText = 'font-family:IBM Plex Mono,monospace;font-size:0.72rem;color:var(--text-secondary);margin-left:0.5rem;white-space:nowrap;opacity:0;transition:opacity 0.2s ease';
-            searchInput.parentNode.appendChild(badge);
-        }
-        if (count > 0) {
-            badge.textContent = count + ' result' + (count !== 1 ? 's' : '');
-            badge.style.opacity = '1';
-        } else {
-            badge.style.opacity = '0';
-        }
+    window.addEventListener('scroll', function () {
+      var navH = navbar ? navbar.getBoundingClientRect().height : 72;
+      stickyFilterBar.style.top = (navH + 16) + 'px';
+    }, { passive: true });
+  }
+
+  /* ── Random Project ───────────────────────────────────────── */
+  function openRandomProject(trigger) {
+    var visible = projectCards.filter(function (c) { return c.style.display !== 'none'; });
+    var pool = visible.length ? visible : projectCards;
+    var pick = pool[Math.floor(Math.random() * pool.length)];
+    var name = pick.getAttribute('data-project');
+    if (name && typeof openProjectSafe === 'function') {
+      openProjectSafe(name, trigger);
     }
-
-    function closeDropdown() {
-        if (searchDropdown) searchDropdown.classList.remove('active');
+  }
+
+  if (randomProjectBtn) {
+    randomProjectBtn.addEventListener('click', function () { openRandomProject(randomProjectBtn); });
+  }
+  if (randomProjectBtnSidebar) {
+    randomProjectBtnSidebar.addEventListener('click', function () { openRandomProject(randomProjectBtnSidebar); });
+  }
+
+  /* ── Init sidebar ─────────────────────────────────────────── */
+  var pageCategory = document.body.getAttribute('data-page');
+  if (sidebarTabs.length) {
+    if (pageCategory) {
+      syncSidebarTabs(pageCategory);
+    } else {
+      syncSidebarTabs('all');
     }
+  }
+  if (stickyTabs.length) syncStickyTabs('all');
+
+  /* ── Sidebar Active Scroll Observer ───────────────────────── */
+  if (!pageCategory && projectsSection) {
+    // On homepage, observe projectsSection to toggle sidebar-active class
+    var sidebarActiveObserver = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        var isVisible = entry.isIntersecting || entry.boundingClientRect.top < 200;
+        document.body.classList.toggle('sidebar-active', isVisible);
+      });
+    }, { threshold: 0.05 });
+    sidebarActiveObserver.observe(projectsSection);
+  } else if (pageCategory) {
+    // On subpages, always ensure sidebar is active
+    document.body.classList.add('sidebar-active');
+  }
+
+  /* ═══════════════════════════════════════════════════════════════
+     SEARCH
+     ═══════════════════════════════════════════════════════════════ */
+  function getMatchingProjects(query) {
+    if (!query) return [];
+    var matches = [];
+    projectCards.forEach(function (card) {
+      var category = card.getAttribute('data-category');
+      var title = (card.querySelector('h3') || {}).textContent || '';
+      var desc = (card.querySelector('p') || {}).textContent || '';
+      var tags = (card.getAttribute('data-tags') || '').toLowerCase();
+      var q = query.toLowerCase();
+
+      var catMatch = currentCategory === 'all' || category === currentCategory;
+      var searchMatch = title.toLowerCase().includes(q) ||
+                        desc.toLowerCase().includes(q) ||
+                        tags.includes(q);
+
+      if (catMatch && searchMatch) {
+        matches.push({ card: card, title: title, tags: tags, category: category });
+      }
+    });
+    return matches;
+  }
+
+  function highlightText(container, text, query) {
+    var safe = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    var parts = text.split(new RegExp('(' + safe + ')', 'gi'));
+    parts.forEach(function (part) {
+      if (part.toLowerCase() === query.toLowerCase()) {
+        var mark = document.createElement('mark');
+        mark.style.background = 'var(--accent-soft)';
+        mark.style.color = 'var(--accent)';
+        mark.style.fontWeight = '600';
+        mark.style.borderRadius = '2px';
+        mark.style.padding = '0 2px';
+        mark.textContent = part;
+        container.appendChild(mark);
+      } else if (part) {
+        container.appendChild(document.createTextNode(part));
+      }
+    });
+  }
 
-    function renderRecentSearches() {
-        if (noResultsMessage) noResultsMessage.style.display = 'none';
-        if (!recentSearchesSection) return;
-
-        if (recentSearches.length === 0) {
-            recentSearchesSection.style.display = 'none';
-            if (tipsSection) tipsSection.style.display = 'block';
-            if (resultsSection) resultsSection.style.display = 'none';
-            return;
-        }
+  function closeDropdown() {
+    if (searchDropdown) searchDropdown.classList.remove('active');
+  }
 
-        if (recentSearchesList) {
-            recentSearchesList.innerHTML = '';
-            recentSearches.slice(0, 5).forEach(function (search) {
-                var item = document.createElement('div');
-                item.className = 'dropdown-recent-item';
-                var recentText = document.createElement('div');
-                recentText.className = 'dropdown-recent-text';
-
-                var clockIcon = document.createElement('i');
-                clockIcon.className = 'fas fa-history';
-                clockIcon.style.opacity = '0.5';
-                clockIcon.style.fontSize = '0.9rem';
-
-                var searchLabel = document.createElement('span');
-                searchLabel.style.flex = '1';
-                searchLabel.style.cursor = 'pointer';
-                searchLabel.style.color = 'var(--text-secondary)';
-                searchLabel.textContent = search;
-
-                recentText.append(clockIcon, searchLabel);
-
-                var removeButton = document.createElement('button');
-                removeButton.className = 'dropdown-recent-remove';
-                removeButton.setAttribute('aria-label', 'Remove search');
-
-                var removeIcon = document.createElement('i');
-                removeIcon.className = 'fas fa-x';
-                removeButton.appendChild(removeIcon);
-
-                item.append(recentText, removeButton);
-
-                searchLabel.addEventListener('click', function () {
-                    if (searchInput) {
-                        searchInput.value = search;
-                        currentSearchQuery = search;
-                        performSearch();
-                        closeDropdown();
-                    }
-                });
-
-                removeButton.addEventListener('click', function (e) {
-                    e.stopPropagation();
-                    recentSearches = recentSearches.filter(function (s) { return s !== search; });
-                    localStorage.setItem('recentSearches', JSON.stringify(recentSearches));
-                    renderRecentSearches();
-                });
-
-                recentSearchesList.appendChild(item);
-            });
-        }
+  function renderRecentSearches() {
+    if (noResultsMessage) noResultsMessage.style.display = 'none';
+    if (!recentSearchesSection) return;
 
-        recentSearchesSection.style.display = 'block';
-        if (resultsSection) resultsSection.style.display = 'none';
-        if (tipsSection) tipsSection.style.display = 'block';
+    if (recentSearches.length === 0) {
+      recentSearchesSection.style.display = 'none';
+      if (tipsSection) tipsSection.style.display = 'block';
+      if (resultsSection) resultsSection.style.display = 'none';
+      return;
     }
 
-    function renderSuggestions(query) {
-        if (searchLoader) searchLoader.style.display = 'none';
-        if (!query) { renderRecentSearches(); return; }
+    if (recentSearchesList) {
+      recentSearchesList.innerHTML = '';
+      recentSearches.slice(0, 5).forEach(function (search) {
+        var item = document.createElement('div');
+        item.className = 'dropdown-recent-item';
+        var text = document.createElement('div');
+        text.className = 'dropdown-recent-text';
 
-        var matches = getMatchingProjects(query);
+        var clock = document.createElement('i');
+        clock.className = 'fas fa-history';
+        clock.style.opacity = '0.5';
+        clock.style.fontSize = '0.8rem';
 
-        if (matches.length === 0) {
-            if (resultsSection) resultsSection.style.display = 'none';
-            if (recentSearchesSection) recentSearchesSection.style.display = 'none';
-            if (tipsSection) tipsSection.style.display = 'block';
-            if (noResultsMessage) noResultsMessage.style.display = 'block';
-            return;
-        }
-        
-        if (noResultsMessage) noResultsMessage.style.display = 'none';
-
-        if (resultsList) {
-            resultsList.innerHTML = '';
-            matches.slice(0, 8).forEach(function (project, index) {
-                var item = document.createElement('div');
-                item.className = 'dropdown-item' + (index === selectedSuggestionIndex ? ' selected' : '');
-                var bannerEl = project.card.querySelector('.card-banner');
-                var iconBox = document.createElement('div');
-                iconBox.className = 'dropdown-item-icon';
-                if (bannerEl) {
-                    var img = document.createElement('img');
-                    img.src = bannerEl.src;
-                    img.alt = '';
-                    img.style.cssText = 'width:24px;height:24px;border-radius:4px;object-fit:cover';
-                    iconBox.appendChild(img);
-                }
-
-                var titleBox = document.createElement('div');
-                titleBox.className = 'dropdown-item-text';
-                highlightText(titleBox, project.title, query);
-
-                var categoryTag = document.createElement('span');
-                categoryTag.className = 'dropdown-item-tag';
-                categoryTag.textContent = project.category;
-
-                item.append(iconBox, titleBox, categoryTag);
-                item.addEventListener('click', function () { selectSuggestion(project.title); });
-                item.addEventListener('mouseenter', function () {
-                    selectedSuggestionIndex = index;
-                    updateSuggestionHighlight();
-                });
-                resultsList.appendChild(item);
-            });
-        }
+        var label = document.createElement('span');
+        label.textContent = search;
 
-        if (resultsSection) resultsSection.style.display = 'block';
-        if (recentSearchesSection) recentSearchesSection.style.display = 'none';
-        if (tipsSection) tipsSection.style.display = 'none';
-        selectedSuggestionIndex = -1;
-    }
+        text.append(clock, label);
 
-    if (searchInput) {
-        var debouncedSearch = debounce(function (query) {
-            renderSuggestions(query);
-        }, 200);
-
-        searchInput.addEventListener('input', function (e) {
-            var query = e.target.value.trim().toLowerCase();
-            currentSearchQuery = query;
-            if (searchClear) searchClear.style.display = query ? 'flex' : 'none';
-            if (searchLoader) searchLoader.style.display = query ? 'block' : 'none';
-            debouncedSearch(query);
-            performSearch();
-            if (query && projectsSection && document.activeElement === searchInput) {
-                projectsSection.scrollIntoView({
-                    behavior: prefersReducedMotion() ? 'auto' : 'smooth',
-                    block: 'start'
-                });
-            }
-        });
+        var removeBtn = document.createElement('button');
+        removeBtn.className = 'dropdown-recent-remove';
+        removeBtn.setAttribute('aria-label', 'Remove search');
+        removeBtn.innerHTML = '<i class="fas fa-times"></i>';
 
-        searchInput.addEventListener('focus', function () {
-            if (searchDropdown) searchDropdown.classList.add('active');
-            if (searchShortcut) searchShortcut.style.display = 'none';
-            if (!currentSearchQuery) renderRecentSearches();
-        });
+        item.append(text, removeBtn);
 
-        searchInput.addEventListener('keydown', function (e) {
-            if (e.key === 'Escape') { closeDropdown(); searchInput.blur(); }
+        label.addEventListener('click', function () {
+          if (searchInput) searchInput.value = search;
+          currentSearchQuery = search;
+          performSearch();
+          closeDropdown();
         });
-    }
 
-    if (searchClear) {
-        searchClear.addEventListener('click', function () {
-            if (searchInput) searchInput.value = '';
-            currentSearchQuery = '';
-            searchClear.style.display = 'none';
-            if (searchLoader) searchLoader.style.display = 'none';
-            cleanSearchHighlights();
-            updateSearchResultCount(0);
-            var hint = document.getElementById('emptyStateHint');
-            if (hint) hint.textContent = 'Try adjusting your search or category filter.';
-            applyCategoryFilter(currentCategory);
-            closeDropdown();
+        removeBtn.addEventListener('click', function (e) {
+          e.stopPropagation();
+          recentSearches = recentSearches.filter(function (s) { return s !== search; });
+          localStorage.setItem('recentSearches', JSON.stringify(recentSearches));
+          renderRecentSearches();
         });
-    }
-
-    document.addEventListener('click', function (e) {
-        if (searchDropdown && searchInput &&
-            !searchDropdown.contains(e.target) && e.target !== searchInput) {
-            closeDropdown();
-        }
-    });
-
-    document.addEventListener('keydown', function (e) {
-        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
-            e.preventDefault();
-            if (searchInput) searchInput.focus();
-        }
-    });
-
-    renderRecentSearches();
 
-    // ── Init sidebar ─────────────────────────────────────────────────
-    if (sidebarTabs.length) syncSidebarTabs('all');
-
-    // ── Central Dynamic Auto-Scaling (ResizeObserver) ─────────────────
-    var modalResizeObserver = null;
-
-    function applyModalScaling() {
-        var modalContent = document.querySelector('.modal-content');
-        var modalBody = document.getElementById('modalBody');
-        if (!modalContent || !modalBody) return;
-
-        modalContent.scrollTop = 0;
-        modalBody.scrollTop = 0;
+        recentSearchesList.appendChild(item);
+      });
+    }
 
-        modalContent.style.overflow = 'auto';
+    recentSearchesSection.style.display = 'block';
+    if (resultsSection) resultsSection.style.display = 'none';
+    if (tipsSection) tipsSection.style.display = 'block';
+  }
 
-        modalBody.style.transform = '';
-        modalBody.style.transformOrigin = '';
-        modalBody.style.width = '100%';
-        modalBody.style.height = '';
-        modalBody.style.display = 'flex';
-        modalBody.style.flexDirection = 'column';
-        modalBody.style.alignItems = 'stretch';
-        modalBody.style.gap = '1rem';
+  function renderSuggestions(query) {
+    if (searchLoader) searchLoader.style.display = 'none';
+    if (!query) { renderRecentSearches(); return; }
 
-        var targetEl = Array.from(modalBody.children).find(function (el) {
-            return el.tagName.toLowerCase() !== 'style';
-        }) || modalBody.firstElementChild;
-        if (!targetEl) return;
+    var matches = getMatchingProjects(query);
 
-        targetEl.style.transform = '';
-        targetEl.style.transformOrigin = '';
-        targetEl.style.width = '100%';
-        targetEl.style.maxWidth = '100%';
+    if (matches.length === 0) {
+      if (resultsSection) resultsSection.style.display = 'none';
+      if (recentSearchesSection) recentSearchesSection.style.display = 'none';
+      if (tipsSection) tipsSection.style.display = 'block';
+      if (noResultsMessage) noResultsMessage.style.display = 'block';
+      return;
     }
 
-    function initModalScaling() {
-        applyModalScaling();
-
-        if (modalResizeObserver) {
-            modalResizeObserver.disconnect();
-        }
-
-        var modalBody = document.getElementById('modalBody');
-        var targetEl = modalBody ? Array.from(modalBody.children).find(function (el) {
-            return el.tagName.toLowerCase() !== 'style';
-        }) || modalBody.firstElementChild : null;
-        if (targetEl) {
-            modalResizeObserver = new ResizeObserver(function () {
-                requestAnimationFrame(applyModalScaling);
-            });
-            modalResizeObserver.observe(targetEl);
+    if (noResultsMessage) noResultsMessage.style.display = 'none';
+
+    if (resultsList) {
+      resultsList.innerHTML = '';
+      matches.slice(0, 8).forEach(function (project, index) {
+        var item = document.createElement('div');
+        item.className = 'dropdown-item' + (index === selectedSuggestionIndex ? ' selected' : '');
+
+        var iconBox = document.createElement('div');
+        iconBox.className = 'dropdown-item-icon';
+        var banner = project.card.querySelector('.card-banner');
+        if (banner) {
+          var img = document.createElement('img');
+          img.src = banner.src;
+          img.alt = '';
+          iconBox.appendChild(img);
         }
 
-        window.addEventListener('resize', applyModalScaling);
-    }
+        var titleBox = document.createElement('div');
+        titleBox.className = 'dropdown-item-text';
+        highlightText(titleBox, project.title, query);
 
-    function destroyModalScaling() {
-        if (modalResizeObserver) {
-            modalResizeObserver.disconnect();
-            modalResizeObserver = null;
-        }
-        window.removeEventListener('resize', applyModalScaling);
-    }
+        var tag = document.createElement('span');
+        tag.className = 'dropdown-item-tag';
+        tag.textContent = project.category;
 
-    // ── Focus Trap for Modal ──────────────────────────────────────────
-    function getFocusableElements(root) {
-        var selector =
-            'button:not([disabled]), [href], input:not([disabled]), ' +
-            'select:not([disabled]), textarea:not([disabled]), ' +
-            '[tabindex]:not([tabindex="-1"])';
-        return Array.from(root.querySelectorAll(selector)).filter(function (el) {
-            return !el.closest('[aria-hidden="true"]') &&
-                !el.classList.contains('visually-hidden');
+        item.append(iconBox, titleBox, tag);
+        item.addEventListener('click', function () { selectSuggestion(project.title); });
+        item.addEventListener('mouseenter', function () {
+          selectedSuggestionIndex = index;
+          updateSuggestionHighlight();
         });
+        resultsList.appendChild(item);
+      });
     }
 
-    function trapFocus(modalEl) {
-        var handler = function (e) {
-            if (e.key !== 'Tab' || !modalEl.classList.contains('active')) return;
-            var focusables = getFocusableElements(modalEl);
-            if (!focusables.length) return;
-            var first = focusables[0];
-            var last = focusables[focusables.length - 1];
-            if (e.shiftKey && document.activeElement === first) {
-                e.preventDefault(); last.focus({ preventScroll: true });
-            } else if (!e.shiftKey && document.activeElement === last) {
-                e.preventDefault(); first.focus({ preventScroll: true });
-            }
-        };
-        document.addEventListener('keydown', handler, true);
-        return function () { document.removeEventListener('keydown', handler, true); };
+    if (resultsSection) resultsSection.style.display = 'block';
+    if (recentSearchesSection) recentSearchesSection.style.display = 'none';
+    if (tipsSection) tipsSection.style.display = 'none';
+    selectedSuggestionIndex = -1;
+  }
+
+  function updateSuggestionHighlight() {
+    if (!resultsList) return;
+    var items = resultsList.querySelectorAll('.dropdown-item');
+    items.forEach(function (item, i) {
+      item.classList.toggle('selected', i === selectedSuggestionIndex);
+    });
+  }
+
+  function selectSuggestion(title) {
+    if (!searchInput) return;
+    searchInput.value = title;
+    currentSearchQuery = title.toLowerCase();
+    performSearch();
+    closeDropdown();
+    if (projectsSection) {
+      projectsSection.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
     }
-
-    // ── Open / Close Project Modal ────────────────────────────────────
-    /*
-     * PLAYGROUND NOTE: openProjectSafe() is called synchronously from
-     * card clicks. It NEVER touches Pyodide and NEVER waits for it.
-     * The modal opens instantly regardless of Pyodide load state.
-     */
-    function openProjectSafe(name, trigger) {
-        if (!modal || !modalBody) return;
-
-        lastFocusedElement = trigger || document.activeElement;
-
-        if (modalTitle) modalTitle.textContent = name || 'Interactive project';
-
-        modal.classList.add('active');
-        modal.setAttribute('aria-hidden', 'false');
-        
-        // Prevent scroll shift by adding padding equal to scrollbar width
-        var scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-        document.body.style.paddingRight = scrollbarWidth + 'px';
-        document.body.style.overflow = 'hidden';
-        setMainInert(true);
-
-        safeRun(function () {
-            if (typeof getProjectHTML === 'function') {
-                modalBody.innerHTML =
-                    getProjectHTML(name) ||
-                    '<div style="padding:1rem">Project content unavailable.</div>';
-            } else {
-                modalBody.innerHTML = '<div style="padding:1rem">Project content unavailable.</div>';
-            }
-            if (typeof initializeProject === 'function') initializeProject(name);
-        });
-
-        // Initialize reactive scale calculations
-        initModalScaling();
-
-        removeTrap = trapFocus(modal);
-        var focusables = getFocusableElements(modalBody);
-        var firstFocusable = focusables[0] || modalClose;
-        if (firstFocusable && typeof firstFocusable.focus === 'function') {
-            firstFocusable.focus({ preventScroll: true });
-        }
+  }
+
+  function performSearch() {
+    var query = currentSearchQuery;
+    if (!query) {
+      applyCategoryFilter(currentCategory);
+      if (emptyStateHint) emptyStateHint.textContent = 'Try adjusting your search or category filter.';
+      return;
     }
 
-    function closeProjectSafe() {
-        if (!modal || !modal.classList.contains('active')) return;
-
-        destroyModalScaling();
-
-        modal.classList.remove('active');
-        modal.setAttribute('aria-hidden', 'true');
-        document.body.style.paddingRight = '';
-        document.body.style.overflow = '';
-        setMainInert(false);
-        if (removeTrap) { removeTrap(); removeTrap = null; }
-        if (modalBody) {
-            modalBody.innerHTML = '';
-            modalBody.style.transform = '';
-            modalBody.style.transformOrigin = '';
-            modalBody.style.width = '';
-            modalBody.style.height = '';
-            modalBody.style.display = '';
-            modalBody.style.alignItems = '';
-            modalBody.style.gap = '';
-        }
-        if (lastFocusedElement && typeof lastFocusedElement.focus === 'function') {
-            lastFocusedElement.focus({ preventScroll: true });
-        }
-        lastFocusedElement = null;
+    if (currentCategory !== 'all') {
+      currentCategory = 'all';
+      syncSidebarTabs('all');
+      syncStickyTabs('all');
     }
 
-    if (modalClose) modalClose.addEventListener('click', closeProjectSafe);
-    if (modal) {
-        modal.addEventListener('click', function (e) {
-            if (e.target === modal) closeProjectSafe();
-        });
-    }
-    document.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape') closeProjectSafe();
-    });
+    recentSearches = recentSearches.filter(function (s) { return s !== query; });
+    recentSearches.unshift(query);
+    recentSearches = recentSearches.slice(0, 10);
+    localStorage.setItem('recentSearches', JSON.stringify(recentSearches));
 
-    // ── Wire Cards and Play Buttons ───────────────────────────────────
+    var visibleCount = 0;
+    var favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
     projectCards.forEach(function (card) {
-        var name = card.getAttribute('data-project');
-        var categoryName = card.getAttribute('data-category') || 'project';
-        var metaRow = document.createElement('div');
-        metaRow.className = 'project-card-meta';
-
-        var categoryBadge = document.createElement('span');
-        categoryBadge.className = 'project-card-badge';
-        categoryBadge.textContent = categoryName;
-        metaRow.appendChild(categoryBadge);
-
-        var favBtn = document.createElement('button');
-        favBtn.className = 'btn-favorite';
-        favBtn.setAttribute('aria-label', 'Toggle favorite');
-        favBtn.textContent = '\u2606';
-
-        var favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
-        if (favorites.includes(name)) {
-            favBtn.classList.add('active');
-            favBtn.textContent = '\u2605';
-        }
-
-        favBtn.addEventListener('click', function (e) {
-            e.stopPropagation();
-            var favs = JSON.parse(localStorage.getItem('favorites') || '[]');
-            var idx = favs.indexOf(name);
-            if (idx === -1) {
-                favs.push(name);
-                favBtn.classList.add('active');
-                favBtn.textContent = '\u2605';
-            } else {
-                favs.splice(idx, 1);
-                favBtn.classList.remove('active');
-                favBtn.textContent = '\u2606';
-                if (currentCategory === 'favorites') {
-                    card.style.display = 'none';
-                }
-            }
-            localStorage.setItem('favorites', JSON.stringify(favs));
-        });
-        var cardActions = card.querySelector('.card-actions');
-        if (cardActions) {
-            cardActions.appendChild(favBtn);
-        } else {
-            card.appendChild(favBtn);
-        }
-
-        var play = card.querySelector('.btn-play');
-        if (play) {
-            play.setAttribute('aria-label', 'Open ' + name);
-            play.addEventListener('click', function (e) {
-                e.stopPropagation();
-                openProjectSafe(name, play);
-            });
-        }
-        card.appendChild(metaRow);
-        card.addEventListener('click', function () { openProjectSafe(name, card); });
+      var category = card.getAttribute('data-category');
+      var title = (card.querySelector('h3') || {}).textContent || '';
+      var desc = (card.querySelector('p') || {}).textContent || '';
+      var tags = (card.getAttribute('data-tags') || '').toLowerCase();
+      var projectName = card.getAttribute('data-project');
+      var isFav = favorites.includes(projectName);
+
+      var catMatch = (currentCategory === 'all') ||
+                     (currentCategory === 'favorites' && isFav) ||
+                     (currentCategory !== 'favorites' && category === currentCategory);
+      var searchMatch = title.toLowerCase().includes(query) ||
+                        desc.toLowerCase().includes(query) ||
+                        tags.includes(query);
+
+      if (catMatch && searchMatch) {
+        card.style.display = '';
+        visibleCount++;
+      } else {
+        card.style.display = 'none';
+      }
     });
 
-    // ── Random button is in the sidebar (#randomProjectBtnSidebar) ─────
+    if (emptyState) {
+      emptyState.style.display = visibleCount === 0 ? 'block' : 'none';
+      if (visibleCount === 0 && emptyStateHint) {
+        emptyStateHint.textContent = 'No projects match "' + query + '". Try a different keyword.';
+      }
+    }
+    if (projectCountBadge) projectCountBadge.textContent = String(visibleCount) + ' projects';
+  }
+
+  if (searchInput) {
+    var debouncedSearch = debounce(function (query) {
+      renderSuggestions(query);
+    }, 200);
+
+    searchInput.addEventListener('input', function (e) {
+      var query = e.target.value.trim().toLowerCase();
+      currentSearchQuery = query;
+      if (searchLoader) searchLoader.style.display = query ? 'block' : 'none';
+      debouncedSearch(query);
+      performSearch();
+    });
 
-    featureLaunchers.forEach(function (node) {
-        node.addEventListener('click', function (e) {
-            if (e.target.closest('[data-project-target]') === node) {
-                var targetProject = node.getAttribute('data-project-target');
-                if (targetProject) openProjectSafe(targetProject, node);
-            }
-        });
+    searchInput.addEventListener('focus', function () {
+      if (searchDropdown) searchDropdown.classList.add('active');
+      if (!currentSearchQuery) renderRecentSearches();
     });
 
-    if (!prefersReducedMotion()) {
-        projectCards.forEach(function (card) {
-            card.addEventListener('mousemove', function (event) {
-                var rect = card.getBoundingClientRect();
-                var px = (event.clientX - rect.left) / rect.width;
-                var py = (event.clientY - rect.top) / rect.height;
-                var rotateY = (px - 0.5) * 10;
-                var rotateX = (0.5 - py) * 8;
-                card.style.transform = 'perspective(900px) rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg) translateY(-8px)';
-            });
-            card.addEventListener('mouseleave', function () {
-                card.style.transform = '';
-            });
-        });
+    searchInput.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') { closeDropdown(); searchInput.blur(); }
+    });
+  }
 
-        var parallaxItems = document.querySelectorAll('[data-parallax]');
-        window.addEventListener('scroll', function () {
-            var scrollY = window.scrollY;
-            parallaxItems.forEach(function (item) {
-                var ratio = parseFloat(item.getAttribute('data-parallax') || '0');
-                item.style.transform = 'translateY(' + Math.round(scrollY * ratio) + 'px)';
-            });
-        }, { passive: true });
+  document.addEventListener('click', function (e) {
+    if (searchDropdown && searchInput &&
+        !searchDropdown.contains(e.target) && e.target !== searchInput) {
+      closeDropdown();
     }
+  });
 
-    // ── Intersection Observer Animations ─────────────────────────────
-    if (!prefersReducedMotion()) {
-        try {
-            var observer = new IntersectionObserver(function (entries) {
-                entries.forEach(function (entry) {
-                    if (entry.isIntersecting) {
-                        entry.target.style.animation = 'fadeInUp 0.6s ease';
-                    }
-                });
-            }, { threshold: 0.1, rootMargin: '0px 0px -100px 0px' });
-            projectCards.forEach(function (c) { observer.observe(c); });
-        } catch (e) { /* ignore */ }
+  document.addEventListener('keydown', function (e) {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+      e.preventDefault();
+      if (searchInput) searchInput.focus();
     }
+  });
 
-    if (!prefersReducedMotion()) {
-        try {
-            var revealObserver = new IntersectionObserver(function (entries, obs) {
-                entries.forEach(function (entry) {
-                    if (!entry.isIntersecting) return;
-                    entry.target.classList.add('is-visible');
-                    obs.unobserve(entry.target);
-                });
-            }, { threshold: 0.2 });
-
-            revealItems.forEach(function (item) { revealObserver.observe(item); });
-        } catch (e) { /* ignore */ }
-    } else {
-        revealItems.forEach(function (item) { item.classList.add('is-visible'); });
-    }
+  renderRecentSearches();
 
-    // ── Hero Timeline scroll reveal ────────────────────────────
-    var timelineNodes = document.querySelectorAll('.timeline-node[data-reveal]');
-    var heroTimeline = document.getElementById('heroTimeline');
+  /* ═══════════════════════════════════════════════════════════════
+     MODAL
+     ═══════════════════════════════════════════════════════════════ */
+  function getFocusableElements(root) {
+    var sel = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    return Array.from(root.querySelectorAll(sel)).filter(function (el) {
+      return !el.closest('[aria-hidden="true"]') && !el.classList.contains('visually-hidden');
+    });
+  }
+
+  function trapFocus(modalEl) {
+    var handler = function (e) {
+      if (e.key !== 'Tab' || !modalEl.classList.contains('active')) return;
+      var focusables = getFocusableElements(modalEl);
+      if (!focusables.length) return;
+      var first = focusables[0];
+      var last = focusables[focusables.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault(); last.focus({ preventScroll: true });
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault(); first.focus({ preventScroll: true });
+      }
+    };
+    document.addEventListener('keydown', handler, true);
+    return function () { document.removeEventListener('keydown', handler, true); };
+  }
+
+  function openProjectSafe(name, trigger) {
+    if (!modal || !modalBody) return;
+    lastFocusedElement = trigger || document.activeElement;
+    if (modalTitle) modalTitle.textContent = name || 'Interactive project';
+    modal.classList.add('active');
+    modal.setAttribute('aria-hidden', 'false');
+    var scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.paddingRight = scrollbarWidth + 'px';
+    document.body.style.overflow = 'hidden';
+    setMainInert(true);
+
+    safeRun(function () {
+      if (typeof getProjectHTML === 'function') {
+        modalBody.innerHTML = getProjectHTML(name) || '<div style="padding:1rem;color:var(--text-secondary)">Project content unavailable.</div>';
+      } else {
+        modalBody.innerHTML = '<div style="padding:1rem;color:var(--text-secondary)">Project content unavailable.</div>';
+      }
+      if (typeof initializeProject === 'function') initializeProject(name);
+    });
 
-    function updateSpineProgress() {
-        if (!heroTimeline) return;
-        var revealed = document.querySelectorAll('.timeline-node.revealed').length;
-        var total = timelineNodes.length;
-        var pct = total > 0 ? (revealed / total) * 100 : 0;
-        heroTimeline.style.setProperty('--spine-progress', pct);
+    removeTrap = trapFocus(modal);
+    var focusables = getFocusableElements(modalBody);
+    var firstFocusable = focusables[0] || modalClose;
+    if (firstFocusable && typeof firstFocusable.focus === 'function') {
+      firstFocusable.focus({ preventScroll: true });
+    }
+  }
+
+  function closeProjectSafe() {
+    if (!modal || !modal.classList.contains('active')) return;
+    modal.classList.remove('active');
+    modal.setAttribute('aria-hidden', 'true');
+    document.body.style.paddingRight = '';
+    document.body.style.overflow = '';
+    setMainInert(false);
+    if (removeTrap) { removeTrap(); removeTrap = null; }
+    if (modalBody) {
+      modalBody.innerHTML = '';
     }
+    if (lastFocusedElement && typeof lastFocusedElement.focus === 'function') {
+      lastFocusedElement.focus({ preventScroll: true });
+    }
+    lastFocusedElement = null;
+  }
 
-    if (timelineNodes.length) {
-        timelineNodes[0].classList.add('revealed');
-        updateSpineProgress();
+  if (modalClose) modalClose.addEventListener('click', closeProjectSafe);
+  if (modal) {
+    modal.addEventListener('click', function (e) {
+      if (e.target === modal) closeProjectSafe();
+    });
+  }
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape') closeProjectSafe();
+  });
+
+  /* ── Expose for inline use ────────────────────────────────── */
+  window.openProjectSafe = openProjectSafe;
+  window.closeProjectSafe = closeProjectSafe;
+
+  /* ═══════════════════════════════════════════════════════════════
+     WIRE PROJECT CARDS
+     ═══════════════════════════════════════════════════════════════ */
+  projectCards.forEach(function (card) {
+    var name = card.getAttribute('data-project');
+
+    /* ── Favorite Button ──────────────────────────────────── */
+    var favBtn = document.createElement('button');
+    favBtn.className = 'btn-favorite';
+    favBtn.setAttribute('aria-label', 'Toggle favorite');
+    favBtn.innerHTML = '<i class="far fa-star"></i>';
+
+    var favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
+    if (favorites.includes(name)) {
+      favBtn.classList.add('active');
+      favBtn.innerHTML = '<i class="fas fa-star"></i>';
     }
 
-    if (timelineNodes.length > 1 && !prefersReducedMotion()) {
-        var revealedCount = 1;
-        var scrollAccum = 0;
-        var prevScrollY = window.scrollY;
-
-        window.addEventListener('scroll', function () {
-            var currentScrollY = window.scrollY;
-            var delta = currentScrollY - prevScrollY;
-            scrollAccum += delta;
-            prevScrollY = currentScrollY;
-
-            if (scrollAccum >= 60) {
-                while (scrollAccum >= 60 && revealedCount < timelineNodes.length) {
-                    timelineNodes[revealedCount].classList.add('revealed');
-                    revealedCount++;
-                    scrollAccum -= 60;
-                }
-            } else if (scrollAccum <= -60) {
-                while (scrollAccum <= -60 && revealedCount > 1) {
-                    revealedCount--;
-                    timelineNodes[revealedCount].classList.remove('revealed');
-                    scrollAccum += 60;
-                }
-            }
-            updateSpineProgress();
-        }, { passive: true });
-    } else if (timelineNodes.length > 1) {
-        for (var i = 1; i < timelineNodes.length; i++) {
-            timelineNodes[i].classList.add('revealed');
+    favBtn.addEventListener('click', function (e) {
+      e.stopPropagation();
+      var favs = JSON.parse(localStorage.getItem('favorites') || '[]');
+      var idx = favs.indexOf(name);
+      if (idx === -1) {
+        favs.push(name);
+        favBtn.classList.add('active');
+        favBtn.innerHTML = '<i class="fas fa-star"></i>';
+      } else {
+        favs.splice(idx, 1);
+        favBtn.classList.remove('active');
+        favBtn.innerHTML = '<i class="far fa-star"></i>';
+        if (currentCategory === 'favorites') {
+          card.style.display = 'none';
         }
-        updateSpineProgress();
-    }
+      }
+      localStorage.setItem('favorites', JSON.stringify(favs));
+    });
 
-    // ── Share Button Feature ──────────────────────────────────────────
+    var cardActions = card.querySelector('.card-actions');
+    if (cardActions) cardActions.appendChild(favBtn);
 
-// 1. Inject share button into every card dynamically
-projectCards.forEach(function (card) {
-    var projectName = card.getAttribute('data-project');
+    /* ── Share Button ─────────────────────────────────────── */
     var shareBtn = document.createElement('button');
     shareBtn.className = 'btn-share';
-    shareBtn.setAttribute('aria-label', 'Share ' + projectName);
+    shareBtn.setAttribute('aria-label', 'Share ' + name);
     shareBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>';
     shareBtn.title = 'Copy shareable link';
 
     shareBtn.addEventListener('click', function (e) {
-        e.stopPropagation(); // prevent card click opening modal
-        var url = window.location.origin + window.location.pathname + '?project=' + encodeURIComponent(projectName);
-        navigator.clipboard.writeText(url).then(function () {
-            showToast('Link copied!');
-        }).catch(function () {
-            // Fallback for browsers that block clipboard
-            showToast('Copy this: ' + url);
-        });
+      e.stopPropagation();
+      var url = window.location.origin + window.location.pathname + '?project=' + encodeURIComponent(name);
+      navigator.clipboard.writeText(url).then(function () {
+        showToast('Link copied!');
+      }).catch(function () {
+        showToast('Copy this: ' + url);
+      });
     });
 
-    var cardActions = card.querySelector('.card-actions');
-    if (cardActions) {
-        cardActions.appendChild(shareBtn);
-    } else {
-        card.appendChild(shareBtn);
+    if (cardActions) cardActions.appendChild(shareBtn);
+
+    /* ── Play Button ──────────────────────────────────────── */
+    var playBtns = card.querySelectorAll('.btn-play');
+    playBtns.forEach(function (play) {
+      play.setAttribute('aria-label', 'Open ' + name);
+      play.addEventListener('click', function (e) {
+        e.stopPropagation();
+        openProjectSafe(name, play);
+      });
+    });
+
+    /* ── Card Click ───────────────────────────────────────── */
+    card.addEventListener('click', function (e) {
+      if (e.target.closest('.btn-play') || e.target.closest('.btn-favorite') || e.target.closest('.btn-share')) return;
+      openProjectSafe(name, card);
+    });
+
+    /* ── Card Mouse Tracking for Border Glow ──────────────── */
+    if (!prefersReducedMotion()) {
+      card.addEventListener('mousemove', function (e) {
+        var rect = card.getBoundingClientRect();
+        var x = ((e.clientX - rect.left) / rect.width) * 100;
+        var y = ((e.clientY - rect.top) / rect.height) * 100;
+        card.style.setProperty('--mouse-x', x + '%');
+        card.style.setProperty('--mouse-y', y + '%');
+      });
     }
-});
+  });
 
-// 2. Toast notification helper
-function showToast(message) {
+  /* ── Toast ─────────────────────────────────────────────────── */
+  function showToast(message) {
     var existing = document.getElementById('shareToast');
     if (existing) existing.remove();
-
     var toast = document.createElement('div');
     toast.id = 'shareToast';
     toast.className = 'share-toast';
     toast.textContent = message;
     document.body.appendChild(toast);
-
-    // Trigger animation
     requestAnimationFrame(function () {
-        toast.classList.add('share-toast--visible');
+      toast.classList.add('share-toast--visible');
     });
-
     setTimeout(function () {
-        toast.classList.remove('share-toast--visible');
-        setTimeout(function () { toast.remove(); }, 300);
+      toast.classList.remove('share-toast--visible');
+      setTimeout(function () { toast.remove(); }, 300);
     }, 2500);
-}
+  }
 
-// 3. On page load, check for ?project= param and auto-open it
-(function () {
+  /* ── URL params auto-open ──────────────────────────────────── */
+  (function () {
     var params = new URLSearchParams(window.location.search);
     var projectParam = params.get('project');
-    if (!projectParam) return;
+    if (projectParam) {
+      var match = projectCards.find(function (c) { return c.getAttribute('data-project') === projectParam; });
+      if (match) {
+        setTimeout(function () {
+          openProjectSafe(projectParam, match);
+          match.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }, 300);
+      }
+    }
+    var catParam = params.get('category');
+    var valid = ['all', 'games', 'math', 'utilities', 'playground', 'favorites'];
+    if (catParam && valid.includes(catParam)) {
+      var tab = document.querySelector('[data-category="' + catParam + '"]');
+      if (tab) setTimeout(function () { tab.click(); }, 100);
+    }
+  })();
+
+  /* ═══════════════════════════════════════════════════════════════
+     TIMELINE SCROLL REVEAL
+     ═══════════════════════════════════════════════════════════════ */
+  var timelineItems = document.querySelectorAll('.timeline-item[data-reveal]');
+  var timelineFill = document.getElementById('timelineFill');
+  var timelineSection = document.getElementById('timelineSection');
+
+  if (timelineItems.length && !prefersReducedMotion()) {
+    var timelineObserver = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+        }
+      });
+    }, { threshold: 0.25, rootMargin: '0px 0px -50px 0px' });
 
-    var matchingCard = projectCards.find(function (card) {
-        return card.getAttribute('data-project') === projectParam;
+    timelineItems.forEach(function (item) {
+      timelineObserver.observe(item);
     });
 
-    if (matchingCard) {
-        setTimeout(function () {
-            var projectName = matchingCard.getAttribute('data-project');
-            openProjectSafe(projectName, matchingCard);
-            matchingCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }, 300); // small delay so the page fully loads first
+    /* ── Serpentine SVG Winding Timeline Path ─────────────────── */
+    var svgNamespace = 'http://www.w3.org/2000/svg';
+    
+    function getElementOffset(el, parent) {
+      var top = 0;
+      var left = 0;
+      var curr = el;
+      while (curr && curr !== parent) {
+        top += curr.offsetTop || 0;
+        left += curr.offsetLeft || 0;
+        curr = curr.offsetParent;
+      }
+      return { top: top, left: left };
     }
-})();
 
-// 4. On page load, check for ?category= param and apply filter
-(function () {
-    var params = new URLSearchParams(window.location.search);
-    var categoryParam = params.get('category');
-    var validCategories = ['all', 'games', 'math', 'utilities', 'playground', 'favorites'];
-    if (!categoryParam || !validCategories.includes(categoryParam)) return;
+    function rebuildTimelineSvg() {
+      var container = document.querySelector('.timeline-container');
+      if (!container) return;
+      var dots = document.querySelectorAll('.timeline-dot');
+      if (dots.length < 2) return;
 
-    var matchingTab = document.querySelector('[data-category="' + categoryParam + '"]');
-    if (matchingTab) {
-        setTimeout(function () {
-            matchingTab.click();
-        }, 100);
+      var containerWidth = container.offsetWidth;
+      var containerHeight = container.offsetHeight;
+
+      var svg = document.getElementById('timelineSvg');
+      if (!svg) {
+        svg = document.createElementNS(svgNamespace, 'svg');
+        svg.id = 'timelineSvg';
+        svg.setAttribute('class', 'timeline-svg');
+        
+        var defs = document.createElementNS(svgNamespace, 'defs');
+        var grad = document.createElementNS(svgNamespace, 'linearGradient');
+        grad.id = 'timelineGrad';
+        grad.setAttribute('x1', '0%');
+        grad.setAttribute('y1', '0%');
+        grad.setAttribute('x2', '0%');
+        grad.setAttribute('y2', '100%');
+
+        var stop1 = document.createElementNS(svgNamespace, 'stop');
+        stop1.setAttribute('offset', '0%');
+        stop1.setAttribute('stop-color', 'var(--accent)');
+
+        var stop2 = document.createElementNS(svgNamespace, 'stop');
+        stop2.setAttribute('offset', '100%');
+        stop2.setAttribute('stop-color', '#06b6d4');
+
+        grad.appendChild(stop1);
+        grad.appendChild(stop2);
+        defs.appendChild(grad);
+
+        // Define a dynamic layout mask path for progress crawling
+        var mask = document.createElementNS(svgNamespace, 'mask');
+        mask.id = 'timelineMask';
+
+        var maskPath = document.createElementNS(svgNamespace, 'path');
+        maskPath.id = 'timelineMaskPath';
+        maskPath.setAttribute('fill', 'none');
+        maskPath.setAttribute('stroke', '#ffffff');
+        maskPath.setAttribute('stroke-width', '24'); // Wide enough to fully cover glowing dots
+        maskPath.setAttribute('stroke-linecap', 'round');
+
+        mask.appendChild(maskPath);
+        defs.appendChild(mask);
+        svg.appendChild(defs);
+
+        var track = document.createElementNS(svgNamespace, 'path');
+        track.id = 'timelineSvgTrack';
+        track.setAttribute('class', 'timeline-svg-track');
+        track.setAttribute('fill', 'none');
+
+        var fill = document.createElementNS(svgNamespace, 'path');
+        fill.id = 'timelineSvgFill';
+        fill.setAttribute('class', 'timeline-svg-fill');
+        fill.setAttribute('fill', 'none');
+        fill.setAttribute('stroke', 'var(--accent)');
+        fill.setAttribute('mask', 'url(#timelineMask)');
+
+        svg.appendChild(track);
+        svg.appendChild(fill);
+
+        var grid = document.querySelector('.timeline-grid');
+        container.insertBefore(svg, grid);
+      }
+
+      // Determine layout stable coordinate points for all timeline dots
+      var coords = [];
+      dots.forEach(function (dot) {
+        var offset = getElementOffset(dot, container);
+        var x = offset.left + dot.offsetWidth / 2;
+        var y = offset.top + dot.offsetHeight / 2;
+        coords.push({ x: x, y: y });
+      });
+
+      // Create the winding path
+      var d = "";
+      var startX = containerWidth / 2;
+      d += "M " + startX + " 0";
+      d += " L " + coords[0].x + " " + coords[0].y;
+
+      // Calculate a sweep width that is perfectly responsive
+      // e.g. 16% of container width, capped at 180px for desktop beauty
+      var W = Math.min(180, containerWidth * 0.16);
+
+      for (var i = 0; i < coords.length - 1; i++) {
+        var pStart = coords[i];
+        var pEnd = coords[i + 1];
+        var H = pEnd.y - pStart.y;
+        var dy = H * 0.35; // Symmetrical control point height
+        
+        // Even segments (0, 2, 4...) snake to the right, odd segments to the left
+        var dx = (i % 2 === 0) ? W : -W;
+
+        var cp1x = pStart.x + dx;
+        var cp1y = pStart.y + dy;
+        var cp2x = pEnd.x + dx;
+        var cp2y = pEnd.y - dy;
+
+        d += " C " + cp1x + " " + cp1y + ", " + cp2x + " " + cp2y + ", " + pEnd.x + " " + pEnd.y;
+      }
+
+      // Straight exit to the bottom
+      d += " L " + coords[coords.length - 1].x + " " + containerHeight;
+
+      var trackPath = document.getElementById('timelineSvgTrack');
+      var fillPath = document.getElementById('timelineSvgFill');
+      var maskPath = document.getElementById('timelineMaskPath');
+      if (trackPath && fillPath && maskPath) {
+        trackPath.setAttribute('d', d);
+        fillPath.setAttribute('d', d);
+        maskPath.setAttribute('d', d);
+
+        var totalLength = maskPath.getTotalLength();
+        maskPath.style.strokeDasharray = totalLength;
+        maskPath.dataset.totalLength = totalLength;
+        
+        // Trigger scroll progress sync immediately
+        updateTimelineFill();
+      }
     }
-})();
+
+    /* ── Timeline Fill Progress ───────────────────────────── */
+    function updateTimelineFill() {
+      if (!timelineSection) return;
+      var container = document.querySelector('.timeline-container');
+      if (!container) return;
+
+      var containerRect = container.getBoundingClientRect();
+      var viewportCenterY = window.innerHeight / 2;
+
+      // Calculate relative vertical scroll position of the viewport center relative to the container
+      var relativeY = viewportCenterY - containerRect.top;
+      var offset = Math.max(0, Math.min(1, relativeY / containerRect.height));
+
+      /* ── Dynamic SVG path mask scroll synchronization ──────── */
+      var maskPath = document.getElementById('timelineMaskPath');
+      if (maskPath && maskPath.dataset.totalLength) {
+        var totalLength = parseFloat(maskPath.dataset.totalLength);
+        var dashoffset = totalLength - (offset * totalLength);
+        maskPath.style.strokeDashoffset = Math.max(0, Math.min(totalLength, dashoffset));
+      }
+
+      /* ── Activate item based on viewport center crossing timeline dots ── */
+      var activeIdx = -1;
+      var dots = document.querySelectorAll('.timeline-dot');
+      
+      dots.forEach(function (dot, i) {
+        var dotRect = dot.getBoundingClientRect();
+        var dotCenterY = dotRect.top + dotRect.height / 2;
+        
+        // A dot is crossed/passed if its vertical center in the viewport is <= the viewport center
+        if (dotCenterY <= viewportCenterY) {
+          activeIdx = i;
+        }
+      });
+
+      timelineItems.forEach(function (item, i) {
+        item.classList.toggle('active', i === activeIdx);
+      });
+    }
+
+    // Initialize SVG path layout recalculations on page render & resize
+    rebuildTimelineSvg();
+    window.addEventListener('resize', debounce(rebuildTimelineSvg, 150));
+    window.addEventListener('scroll', updateTimelineFill, { passive: true });
+  } else if (timelineItems.length) {
+    timelineItems.forEach(function (item) { item.classList.add('visible'); });
+  }
+
+  /* ── Reveal on Scroll (general) ────────────────────────────── */
+  var revealItems = document.querySelectorAll('.reveal-on-scroll');
+  if (revealItems.length && !prefersReducedMotion()) {
+    var revealObserver = new IntersectionObserver(function (entries, obs) {
+      entries.forEach(function (entry) {
+        if (!entry.isIntersecting) return;
+        entry.target.classList.add('is-visible');
+        obs.unobserve(entry.target);
+      });
+    }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
+    revealItems.forEach(function (item) { revealObserver.observe(item); });
+  } else {
+    revealItems.forEach(function (item) { item.classList.add('is-visible'); });
+  }
+
+  /* ── Footer category links ────────────────────────────────── */
+  document.querySelectorAll('.footer-cat-link').forEach(function (a) {
+    a.addEventListener('click', function (e) {
+      e.preventDefault();
+      var cat = a.getAttribute('data-cat');
+      var tab = document.querySelector('.sidebar-tab[data-category="' + cat + '"]');
+      if (tab) tab.click();
+    });
+  });
 
 });
diff --git a/web-app/js/projects.js b/web-app/js/projects.js
index 04ba8fd..3084f6b 100644
--- a/web-app/js/projects.js
+++ b/web-app/js/projects.js
@@ -1,4 +1,4 @@
-// Project Registry
+// Project Registry
 // Each project's HTML and logic lives in its own file under js/projects/
 
 
@@ -39,6 +39,7 @@ function getProjectHTML(projectName) {
         '2048-game': () => get2048GameHTML(),
         'productive-pet': () => getProductivePetHTML(),
         'color-palette': () => getColorPaletteHTML(),
+        'caesar-cipher': () => getCaesarCipherHTML(),
     };
 
     try {
@@ -3022,187 +3023,541 @@ function initTowerOfHanoi() {
     initializeGame();
 }
 
-function getTicTacToeHTML() {
-    return `
-        <style>
-            .tic-tac-toe-container {
-                text-align: center;
-                padding: 20px;
-            }
-
-            .board {
-                display: grid;
-                grid-template-columns: repeat(3, 100px);
-                gap: 10px;
-                justify-content: center;
-                margin: 20px auto;
-            }
-
-            .cell {
-                width: 100px;
-                height: 100px;
-                font-size: 2rem;
-                font-weight: bold;
-                border: 2px solid #333;
-                background: white;
-                cursor: pointer;
-                border-radius: 10px;
-            }
-
-            .cell:hover {
-                background-color: #f0f0f0;
-            }
-
-            #status {
-                font-size: 1.2rem;
-                margin: 15px 0;
-                font-weight: bold;
-            }
-
-            .restart-btn {
-                padding: 10px 20px;
-                border: none;
-                background: #4CAF50;
-                color: white;
-                border-radius: 8px;
-                cursor: pointer;
-                font-size: 1rem;
-            }
-
-            .restart-btn:hover {
-                background: #45a049;
-            }
-        </style>
-
-        <div class="tic-tac-toe-container">
-            <h2>Tic Tac Toe</h2>
-
-            <div class="board">
-                <button class="cell" onclick="makeMove(0)"></button>
-                <button class="cell" onclick="makeMove(1)"></button>
-                <button class="cell" onclick="makeMove(2)"></button>
-
-                <button class="cell" onclick="makeMove(3)"></button>
-                <button class="cell" onclick="makeMove(4)"></button>
-                <button class="cell" onclick="makeMove(5)"></button>
-
-                <button class="cell" onclick="makeMove(6)"></button>
-                <button class="cell" onclick="makeMove(7)"></button>
-                <button class="cell" onclick="makeMove(8)"></button>
-            </div>
-
-            <p id="status">Player X's Turn</p>
+// ============================================
+// Tic-Tac-Toe
+// ============================================
 
-            <button class="restart-btn" onclick="resetGame()">
-                Restart Game
-            </button>
-        </div>
-    `;
+function getTicTacToeHTML() {
+  return `
+<div class="ttt-wrap">
+
+  <!-- ░░ SETUP SCREEN ░░ -->
+  <div id="ttt-setup" class="ttt-screen ttt-screen--active">
+    <div class="ttt-logo">
+      <span class="ttt-logo-x">X</span>
+      <span class="ttt-logo-dot">·</span>
+      <span class="ttt-logo-o">O</span>
+    </div>
+    <h2 class="ttt-title">Tic Tac Toe</h2>
+    <p class="ttt-sub">Two players or vs AI — classic strategy game!</p>
+
+    <div class="ttt-field-group">
+      <span class="ttt-label">Game Mode</span>
+      <div class="ttt-pill-group" id="ttt-mode-group">
+        <button class="ttt-pill ttt-pill--on" data-val="2p">👥 Two Players</button>
+        <button class="ttt-pill" data-val="ai">🤖 vs Computer</button>
+      </div>
+    </div>
+
+    <div class="ttt-field-group" id="ttt-diff-group" style="display:none">
+      <span class="ttt-label">Difficulty</span>
+      <div class="ttt-pill-group" id="ttt-diff-pills">
+        <button class="ttt-pill ttt-pill--on" data-val="easy">🟢 Easy</button>
+        <button class="ttt-pill" data-val="medium">🟡 Medium</button>
+        <button class="ttt-pill" data-val="hard">🔴 Hard</button>
+      </div>
+    </div>
+
+    <div class="ttt-field-group">
+      <span class="ttt-label">Rounds</span>
+      <div class="ttt-pill-group" id="ttt-rounds-group">
+        <button class="ttt-pill" data-val="1">1</button>
+        <button class="ttt-pill ttt-pill--on" data-val="3">Best of 3</button>
+        <button class="ttt-pill" data-val="5">Best of 5</button>
+      </div>
+    </div>
+
+    <div class="ttt-names-row">
+      <div class="ttt-name-box">
+        <span class="ttt-label">Player 1 <em class="ttt-x-tag">❌</em></span>
+        <input class="ttt-input" type="text" id="ttt-p1" placeholder="Player 1" maxlength="12"/>
+      </div>
+      <div class="ttt-name-box" id="ttt-p2-box">
+        <span class="ttt-label">Player 2 <em class="ttt-o-tag">⭕</em></span>
+        <input class="ttt-input" type="text" id="ttt-p2" placeholder="Player 2" maxlength="12"/>
+      </div>
+    </div>
+
+    <button class="ttt-cta" id="ttt-start">🚀 Start Game</button>
+  </div><!-- /setup -->
+
+  <!-- ░░ GAME SCREEN ░░ -->
+  <div id="ttt-game" class="ttt-screen">
+
+    <!-- Scoreboard -->
+    <div class="ttt-scores">
+      <div class="ttt-score ttt-score--x">
+        <div class="ttt-score-name" id="ttt-sn1">P1</div>
+        <div class="ttt-score-val"  id="ttt-sv1">0</div>
+      </div>
+      <div class="ttt-score ttt-score--d">
+        <div class="ttt-score-name">Draws</div>
+        <div class="ttt-score-val" id="ttt-svd">0</div>
+      </div>
+      <div class="ttt-score ttt-score--o">
+        <div class="ttt-score-name" id="ttt-sn2">P2</div>
+        <div class="ttt-score-val"  id="ttt-sv2">0</div>
+      </div>
+    </div>
+
+    <div class="ttt-round-tag" id="ttt-round-tag">Round 1 of 3</div>
+
+    <!-- Turn banner -->
+    <div class="ttt-turn-banner" id="ttt-turn-banner">
+      <span class="ttt-turn-sym" id="ttt-turn-sym">❌</span>
+      <span id="ttt-turn-name">Player 1</span>'s turn
+    </div>
+
+    <!-- Board -->
+    <div style="position:relative;">
+    <div id="ttt-board">
+
+      ${[0,1,2,3,4,5,6,7,8].map(i =>
+        `<button class="ttt-cell" data-i="${i}" aria-label="Cell ${i+1}"></button>`
+      ).join('')}
+    </div>
+
+    <!-- Win-line SVG overlay -->
+    <svg class="ttt-win-svg" id="ttt-win-svg" viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg">
+      <line id="ttt-win-line" x1="0" y1="0" x2="0" y2="0"
+            stroke="var(--ttt-accent)" stroke-width="0.18"
+            stroke-linecap="round" opacity="0"/>
+    </svg>
+</div>
+    <!-- Result overlay -->
+    <div class="ttt-result-overlay" id="ttt-result-overlay" style="display:none">
+      <div class="ttt-result-card">
+        <div class="ttt-result-emoji" id="ttt-res-emoji">🏆</div>
+        <div class="ttt-result-text"  id="ttt-res-text">Player 1 wins!</div>
+        <button class="ttt-cta ttt-cta--sm" id="ttt-next">Next Round →</button>
+      </div>
+    </div>
+
+    <button class="ttt-ghost-btn" id="ttt-back">← Menu</button>
+  </div><!-- /game -->
+
+  <!-- ░░ FINAL SCREEN ░░ -->
+  <div id="ttt-final" class="ttt-screen">
+    <div class="ttt-final-trophy">🏆</div>
+    <div class="ttt-final-title" id="ttt-final-title">Player 1 Wins!</div>
+    <div class="ttt-final-scoreline">
+      <span class="ttt-fs-name ttt-fs-x" id="ttt-fp1">P1</span>
+      <span class="ttt-fs-score" id="ttt-fp1s">0</span>
+      <span class="ttt-fs-sep">—</span>
+      <span class="ttt-fs-score" id="ttt-fp2s">0</span>
+      <span class="ttt-fs-name ttt-fs-o" id="ttt-fp2">P2</span>
+    </div>
+    <div class="ttt-final-draws" id="ttt-final-draws">0 draws</div>
+    <div class="ttt-final-actions">
+      <button class="ttt-cta" id="ttt-rematch">🔄 Rematch</button>
+      <button class="ttt-ghost-btn" id="ttt-menu">← Main Menu</button>
+    </div>
+  </div><!-- /final -->
+
+</div><!-- /ttt-wrap -->
+`;
 }
-
-let currentPlayer = 'X';
-
-let board = [
-    '', '', '',
-    '', '', '',
-    '', '', ''
-];
-
-let gameActive = true;
-
-const winningPatterns = [
-    [0,1,2],
-    [3,4,5],
-    [6,7,8],
-
-    [0,3,6],
-    [1,4,7],
-    [2,5,8],
-
-    [0,4,8],
-    [2,4,6]
-];
-
-function makeMove(index) {
-
-    if (!gameActive || board[index] !== '') {
-        return;
+function initTicTacToe() {
+
+  // Win combos
+  const WINS = [
+    [0,1,2],[3,4,5],[6,7,8],   // rows
+    [0,3,6],[1,4,7],[2,5,8],   // cols
+    [0,4,8],[2,4,6]            // diagonals
+  ];
+
+  // Win-line centre coordinates (column, row) in 0-2 grid space
+  const WIN_COORDS = [
+    [[0,0],[2,0]], [[0,1],[2,1]], [[0,2],[2,2]],  // rows
+    [[0,0],[0,2]], [[1,0],[1,2]], [[2,0],[2,2]],  // cols
+    [[0,0],[2,2]], [[2,0],[0,2]]                   // diagonals
+  ];
+
+  // ── State ──
+  let mode       = "2p";
+  let difficulty = "easy";
+  let maxRounds  = 3;
+  let p1         = "Player 1";
+  let p2         = "Player 2";
+  let scores     = { p1:0, p2:0, draws:0 };
+  let board      = [];
+  let current    = "X";   // "X" | "O"
+  let round      = 1;
+  let gameOver   = false;
+
+  // ── Helpers ──
+  function qs(sel, ctx) { return (ctx||document).querySelector(sel); }
+
+  // Show one of the three screens
+  function showScreen(id) {
+    ["ttt-setup","ttt-game","ttt-final"].forEach(s => {
+      const el = document.getElementById(s);
+      if (el) {
+        el.classList.toggle("ttt-screen--active", s === id);
+      }
+    });
+  }
+
+  // Pill-toggle group helper
+  function initPillGroup(groupId, onChange) {
+    const grp = document.getElementById(groupId);
+    if (!grp) return;
+    grp.querySelectorAll(".ttt-pill").forEach(btn => {
+      btn.addEventListener("click", () => {
+        grp.querySelectorAll(".ttt-pill").forEach(b => b.classList.remove("ttt-pill--on"));
+        btn.classList.add("ttt-pill--on");
+        onChange(btn.dataset.val);
+      });
+    });
+  }
+
+  // ── Wire up Setup ──
+  initPillGroup("ttt-mode-group", val => {
+    mode = val;
+    const diffGroup = document.getElementById("ttt-diff-group");
+    const p2box     = document.getElementById("ttt-p2-box");
+    const p2inp     = document.getElementById("ttt-p2");
+    if (val === "ai") {
+      diffGroup.style.display = "block";
+      p2box.classList.add("ttt-dimmed");
+      p2inp.disabled = true;
+      p2inp.placeholder = "Computer 🤖";
+    } else {
+      diffGroup.style.display = "none";
+      p2box.classList.remove("ttt-dimmed");
+      p2inp.disabled = false;
+      p2inp.placeholder = "Player 2";
     }
+  });
+
+  initPillGroup("ttt-diff-pills",   val => { difficulty = val; });
+  initPillGroup("ttt-rounds-group", val => { maxRounds = parseInt(val); });
+
+  // Start button
+  const startBtn = document.getElementById("ttt-start");
+  if (startBtn) {
+    startBtn.addEventListener("click", () => {
+      p1 = (document.getElementById("ttt-p1").value.trim()) || "Player 1";
+      p2 = mode === "ai"
+        ? "Computer 🤖"
+        : ((document.getElementById("ttt-p2").value.trim()) || "Player 2");
+      scores = { p1:0, p2:0, draws:0 };
+      round  = 1;
+      newRound();
+      showScreen("ttt-game");
+    });
+  }
+
+  // Back / Menu buttons
+  const backBtn = document.getElementById("ttt-back");
+  if (backBtn) backBtn.addEventListener("click", () => showScreen("ttt-setup"));
+
+  const menuBtn = document.getElementById("ttt-menu");
+  if (menuBtn) menuBtn.addEventListener("click", () => showScreen("ttt-setup"));
+
+  // Rematch button
+  const rematchBtn = document.getElementById("ttt-rematch");
+  if (rematchBtn) {
+    rematchBtn.addEventListener("click", () => {
+      scores = { p1:0, p2:0, draws:0 };
+      round  = 1;
+      newRound();
+      showScreen("ttt-game");
+    });
+  }
+
+  // Next-round button
+  const nextBtn = document.getElementById("ttt-next");
+  if (nextBtn) {
+    nextBtn.addEventListener("click", () => {
+      const majority = Math.ceil(maxRounds / 2);
+      const matchDone = round >= maxRounds
+        || scores.p1 >= majority
+        || scores.p2 >= majority;
+      if (matchDone) {
+        renderFinal();
+        showScreen("ttt-final");
+      } else {
+        round++;
+        newRound();
+      }
+    });
+  }
+
+  // ── Round management ──
+  function newRound() {
+    board    = Array(9).fill(null);
+    current  = "X";
+    gameOver = false;
+
+    // Reset cells
+    document.querySelectorAll(".ttt-cell").forEach(c => {
+      c.textContent = "";
+      c.className   = "ttt-cell";
+      c.disabled    = false;
+    });
 
-    const cells = document.querySelectorAll('.cell');
+    // Hide result overlay
+    const overlay = document.getElementById("ttt-result-overlay");
+    if (overlay) overlay.style.display = "none";
 
-    board[index] = currentPlayer;
+    // Clear win line
+    clearWinLine();
 
-    cells[index].innerText = currentPlayer;
+    // Update scoreboard
+    syncScoreboard();
 
-    if (currentPlayer === 'X') {
-        cells[index].style.color = '#ff4d4d';
-    } else {
-        cells[index].style.color = '#4d79ff';
+    // Round label
+    const tag = document.getElementById("ttt-round-tag");
+    if (tag) {
+      tag.textContent = maxRounds === 1
+        ? "Single Round"
+        : `Round ${round} of ${maxRounds}`;
     }
 
-    // CHECK WINNER FIRST
-    if (checkWinner()) {
-
-        document.getElementById('status').innerText =
-            `Player ${currentPlayer} Wins!`;
+    refreshTurnBanner();
 
-        gameActive = false;
-        return;
+    // If AI goes first (not default, but safe to handle)
+    if (mode === "ai" && current === "O") {
+      lockBoard(true);
+      setTimeout(aiTurn, 600);
     }
-
-    // DRAW CONDITION
-    const isDraw = board.every(cell => cell !== '');
-
-    if (isDraw) {
-
-        document.getElementById('status').innerText =
-            "It's a Draw!";
-
-        gameActive = false;
-        return;
+  }
+
+  function syncScoreboard() {
+    const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    set("ttt-sn1", p1);
+    set("ttt-sn2", p2);
+    set("ttt-sv1", scores.p1);
+    set("ttt-sv2", scores.p2);
+    set("ttt-svd", scores.draws);
+  }
+
+  function refreshTurnBanner() {
+    const name = current === "X" ? p1 : p2;
+    const sym  = current === "X" ? "X" : "O";
+    const symEl  = document.getElementById("ttt-turn-sym");
+    const nameEl = document.getElementById("ttt-turn-name");
+    const banner = document.getElementById("ttt-turn-banner");
+    if (symEl)  symEl.textContent  = sym;
+    if (nameEl) nameEl.textContent = name;
+    if (banner) {
+      banner.classList.toggle("ttt-turn-banner--x", current === "X");
+      banner.classList.toggle("ttt-turn-banner--o", current === "O");
     }
+  }
 
-    // SWITCH PLAYER
-    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
-
-    document.getElementById('status').innerText =
-        `Player ${currentPlayer}'s Turn`;
-}
-
-
-function checkWinner() {
-
-    return winningPatterns.some(pattern => {
-
-        return pattern.every(index => {
-            return board[index] === currentPlayer;
-        });
+  // ── Cell clicks ──
+  document.querySelectorAll(".ttt-cell").forEach(cell => {
+    cell.addEventListener("click", () => {
+      const i = parseInt(cell.dataset.i);
+      if (gameOver || board[i]) return;
+      if (mode === "ai" && current === "O") return; // AI's turn
 
+      placeMove(i, current);
+      afterMove();
     });
-}
+  });
+
+  function placeMove(i, sym) {
+    board[i] = sym;
+    const cell = document.querySelector(`.ttt-cell[data-i="${i}"]`);
+    if (!cell) return;
+   cell.textContent = sym;
+    cell.classList.add(sym === "X" ? "ttt-cell--x" : "ttt-cell--o");
+    cell.disabled = true;
+  }
+
+  function afterMove() {
+    const win = getWinner(board);
+    if (win)              { endRound(win);  return; }
+    if (board.every(c=>c)){ endRound(null); return; }
+
+    current = current === "X" ? "O" : "X";
+    refreshTurnBanner();
+
+    if (mode === "ai" && current === "O") {
+      lockBoard(true);
+      setTimeout(aiTurn, 480 + Math.random()*200);
+    }
+  }
 
-function resetGame() {
+  function lockBoard(on) {
+    document.querySelectorAll(".ttt-cell").forEach(c => {
+      if (!board[parseInt(c.dataset.i)]) c.disabled = on;
+    });
+  }
+
+  // ── Win detection ──
+  function getWinner(b) {
+    for (let idx=0; idx<WINS.length; idx++) {
+      const [a,x,c] = WINS[idx];
+      if (b[a] && b[a]===b[x] && b[x]===b[c]) {
+        return { sym: b[a], combo: WINS[idx], coordIdx: idx };
+      }
+    }
+    return null;
+  }
+
+  // ── End of round ──
+  function endRound(win) {
+    gameOver = true;
+    lockBoard(true);
+
+    if (win) {
+      // Highlight winning cells
+      win.combo.forEach(i => {
+        const cell = document.querySelector(`.ttt-cell[data-i="${i}"]`);
+        if (cell) cell.classList.add("ttt-cell--win");
+      });
+      // Draw SVG win line
+      drawWinLine(win.coordIdx);
+
+      const winnerName = win.sym === "X" ? p1 : p2;
+      if (win.sym === "X") scores.p1++; else scores.p2++;
+      syncScoreboard();
+
+      setResult("🏆", `${winnerName} wins this round!`);
+    } else {
+      scores.draws++;
+      syncScoreboard();
+      setResult("🤝", "It's a draw!");
+    }
 
-    board = [
-        '', '', '',
-        '', '', '',
-        '', '', ''
-    ];
+    // Update Next button label
+    setTimeout(() => {
+      const majority  = Math.ceil(maxRounds / 2);
+      const matchDone = round >= maxRounds
+        || scores.p1 >= majority
+        || scores.p2 >= majority;
+      const nextBtn = document.getElementById("ttt-next");
+      if (nextBtn) nextBtn.textContent = matchDone ? "See Results →" : "Next Round →";
+
+      const overlay = document.getElementById("ttt-result-overlay");
+      if (overlay) overlay.style.display = "flex";
+    }, 600);
+  }
+
+  function setResult(emoji, text) {
+    const e = document.getElementById("ttt-res-emoji");
+    const t = document.getElementById("ttt-res-text");
+    if (e) e.textContent = emoji;
+    if (t) t.textContent = text;
+  }
+
+  // ── Win-line SVG ──
+  // Grid cells are (col, row) 0-indexed; centre of cell = col+0.5, row+0.5
+  function drawWinLine(comboIdx) {
+  const line = document.getElementById("ttt-win-line");
+  const svg  = document.getElementById("ttt-win-svg");
+  if (!line || !svg) return;
+
+  const [[c1,r1],[c2,r2]] = WIN_COORDS[comboIdx];
+  line.setAttribute("x1", c1 + 0.5);
+  line.setAttribute("y1", r1 + 0.5);
+  line.setAttribute("x2", c2 + 0.5);
+  line.setAttribute("y2", r2 + 0.5);
+  line.setAttribute("opacity", "1");
+  svg.classList.add("ttt-win-svg--visible");
+}
 
-    currentPlayer = 'X';
+  function clearWinLine() {
+    const line = document.getElementById("ttt-win-line");
+    const svg  = document.getElementById("ttt-win-svg");
+    if (line) line.setAttribute("opacity","0");
+    if (svg)  svg.classList.remove("ttt-win-svg--visible");
+  }
+
+  // ── Final screen ──
+  function renderFinal() {
+    const set = (id,v) => { const el=document.getElementById(id); if(el) el.textContent=v; };
+    set("ttt-fp1",  p1);
+    set("ttt-fp2",  p2);
+    set("ttt-fp1s", scores.p1);
+    set("ttt-fp2s", scores.p2);
+    set("ttt-final-draws", `${scores.draws} draw${scores.draws!==1?"s":""}`);
+
+    let title;
+    if      (scores.p1 > scores.p2) title = `🏆 ${p1} wins the match!`;
+    else if (scores.p2 > scores.p1) title = `🏆 ${p2} wins the match!`;
+    else                             title = "🤝 The match is tied!";
+    set("ttt-final-title", title);
+  }
+
+  // ── AI engines ──
+  function freeCells(b) {
+    return b.reduce((acc,v,i) => { if(!v) acc.push(i); return acc; }, []);
+  }
+
+  function checkWinFor(b, sym) {
+    return WINS.some(([a,x,c]) => b[a]===sym && b[x]===sym && b[c]===sym);
+  }
+
+  function minimax(b, isMax, alpha, beta, depth) {
+    if (checkWinFor(b,"O")) return 10 - depth;
+    if (checkWinFor(b,"X")) return depth - 10;
+    if (b.every(c=>c))      return 0;
+
+    const moves = freeCells(b);
+    if (isMax) {
+      let best = -Infinity;
+      for (const m of moves) {
+        b[m] = "O";
+        best = Math.max(best, minimax(b, false, alpha, beta, depth+1));
+        b[m] = null;
+        alpha = Math.max(alpha, best);
+        if (beta <= alpha) break;
+      }
+      return best;
+    } else {
+      let best = Infinity;
+      for (const m of moves) {
+        b[m] = "X";
+        best = Math.min(best, minimax(b, true, alpha, beta, depth+1));
+        b[m] = null;
+        beta = Math.min(beta, best);
+        if (beta <= alpha) break;
+      }
+      return best;
+    }
+  }
 
-    gameActive = true;
+  function chooseMove(b, diff) {
+    const moves = freeCells(b);
+    if (!moves.length) return null;
 
-    const cells = document.querySelectorAll('.cell');
+    // Easy — random
+    if (diff === "easy") return moves[Math.floor(Math.random()*moves.length)];
 
-    cells.forEach(cell => {
-        cell.textContent = '';
-    });
+    // Medium — win → block → center/corners
+    if (diff === "medium") {
+      for (const m of moves) { b[m]="O"; if(checkWinFor(b,"O")){b[m]=null;return m;} b[m]=null; }
+      for (const m of moves) { b[m]="X"; if(checkWinFor(b,"X")){b[m]=null;return m;} b[m]=null; }
+      for (const p of [4,0,2,6,8,1,3,5,7]) { if(!b[p]) return p; }
+      return moves[0];
+    }
 
-    document.getElementById('status').textContent =
-        "Player X's Turn";
-}
+    // Hard — minimax
+    let bestScore=-Infinity, bestMove=moves[0];
+    for (const m of moves) {
+      b[m]="O";
+      const s = minimax(b, false, -Infinity, Infinity, 0);
+      b[m]=null;
+      if (s > bestScore) { bestScore=s; bestMove=m; }
+    }
+    return bestMove;
+  }
+
+  function aiTurn() {
+    if (gameOver) return;
+    const move = chooseMove([...board], difficulty); // pass copy so minimax doesn't corrupt state
+    lockBoard(false);
+    if (move !== null) placeMove(move, "O");
+    afterMove();
+  }
+
+} // end initTicTacToe
+// ================================
 function getProductivePetHTML() {
     return `
         <div class="productive-pet-container">
@@ -3276,7 +3631,8 @@ function initializeProject(projectName) {
         'simon-says': 'initSimonSays',
         '2048-game': 'init2048Game',
         'color-palette': 'initColorPalette',
-        'math-quiz': 'initMathQuiz'
+        'math-quiz': 'initMathQuiz',
+        'caesar-cipher': 'initCaesarCipher'
     };
     
     const initializerName = initializers[projectName];
diff --git a/web-app/js/projects/ceasar-ciphar.js b/web-app/js/projects/ceasar-ciphar.js
new file mode 100644
index 0000000..21e449a
--- /dev/null
+++ b/web-app/js/projects/ceasar-ciphar.js
@@ -0,0 +1,412 @@
+function getCaesarCipherHTML() {
+    return `
+        <div class="project-content">
+            <h2>🔐 Caesar Cipher Encoder & Decoder</h2>
+            <p style="text-align:center; color: var(--text-secondary); margin-top: -10px; margin-bottom: 20px;">Encrypt and decrypt messages using Caesar Cipher</p>
+
+            <div class="caesar-container">
+                <div class="mode-toggle">
+                    <input type="radio" id="modeEncrypt" name="cipherMode" value="encrypt" checked>
+                    <label for="modeEncrypt">🔐 Encrypt</label>
+                    <input type="radio" id="modeDecrypt" name="cipherMode" value="decrypt">
+                    <label for="modeDecrypt">📝 Decrypt</label>
+                </div>
+
+                <div class="input-section">
+                    <label id="inputLabel" for="cipherInput">📝 Enter Text to Encrypt:</label>
+                    <textarea id="cipherInput" rows="4" placeholder="Type your message here..."></textarea>
+                </div>
+
+                <div class="shift-section">
+                    <label for="shiftInput">🔑 Shift Value:</label>
+                    <div class="shift-row">
+                        <input type="range" id="shiftSlider" min="1" max="25" value="3">
+                        <input type="number" id="shiftInput" min="1" max="25" value="3">
+                    </div>
+                </div>
+
+                <div class="btn-row">
+                    <button id="cipherBtn">🔐 Encrypt Message</button>
+                    <button id="clearBtn">🗑️ Clear</button>
+                </div>
+
+                <div class="output-section">
+                    <h3>Output:</h3>
+                    <div id="cipherOutput">
+                        <p class="placeholder-text">Your result will appear here...</p>
+                    </div>
+                    <button id="copyBtn" style="display: none;">📋 Copy to Clipboard</button>
+                </div>
+
+                <div class="chart-section">
+                    <h4>🔡 How the shift works:</h4>
+                    <div id="shiftPreview"></div>
+                </div>
+            </div>
+        </div>
+
+        <style>
+            .caesar-container {
+                padding: 20px;
+                max-width: 750px;
+                margin: 0 auto;
+            }
+
+            .mode-toggle {
+                display: flex;
+                gap: 10px;
+                margin-bottom: 20px;
+            }
+
+            .mode-toggle input[type="radio"] {
+                display: none;
+            }
+
+            .mode-toggle label {
+                padding: 8px 16px;
+                border: 2px solid var(--primary-color);
+                border-radius: 8px;
+                cursor: pointer;
+                font-weight: bold;
+                color: var(--text-color);
+                transition: var(--transition);
+                display: inline-block !important;
+                margin-bottom: 0 !important;
+            }
+
+            .mode-toggle input[type="radio"]:checked + label {
+                background: var(--primary-color);
+                color: white;
+            }
+
+            .input-section {
+                margin-bottom: 15px;
+            }
+
+            .input-section label {
+                display: block;
+                margin-bottom: 6px;
+                font-size: 1rem;
+                font-weight: 600;
+            }
+
+            .input-section textarea {
+                width: 100%;
+                padding: 10px;
+                font-size: 1rem;
+                border: 2px solid var(--border-color);
+                border-radius: 8px;
+                background: var(--bg-color);
+                color: var(--text-color);
+                resize: vertical;
+                font-family: inherit;
+                box-sizing: border-box;
+            }
+
+            .shift-section {
+                margin-bottom: 15px;
+            }
+
+            .shift-section label {
+                display: block;
+                margin-bottom: 6px;
+                font-size: 1rem;
+                font-weight: 600;
+            }
+
+            .shift-row {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+            }
+
+            #shiftSlider {
+                flex: 1;
+                accent-color: var(--primary-color);
+                cursor: pointer;
+            }
+
+            #shiftInput {
+                width: 65px;
+                padding: 6px;
+                font-size: 1rem;
+                border: 2px solid var(--border-color);
+                border-radius: 8px;
+                background: var(--bg-color);
+                color: var(--text-color);
+                text-align: center;
+            }
+
+            .btn-row {
+                display: flex;
+                gap: 10px;
+                margin-bottom: 20px;
+                flex-wrap: wrap;
+            }
+
+            #cipherBtn {
+                background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+                color: white;
+                border: none;
+                padding: 10px 22px;
+                border-radius: 50px;
+                font-size: 1rem;
+                cursor: pointer;
+                transition: var(--transition);
+            }
+
+            #cipherBtn:hover {
+                transform: scale(1.05);
+                box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
+            }
+
+            #clearBtn {
+                background: transparent;
+                color: var(--text-secondary);
+                border: 2px solid var(--border-color);
+                padding: 10px 18px;
+                border-radius: 50px;
+                font-size: 1rem;
+                cursor: pointer;
+                transition: var(--transition);
+            }
+
+            #clearBtn:hover {
+                background: var(--surface-color);
+                color: var(--text-color);
+            }
+
+            .output-section h3 {
+                margin-bottom: 8px;
+            }
+
+            #cipherOutput {
+                background: var(--surface-color);
+                border: 2px solid var(--border-color);
+                border-radius: 10px;
+                padding: 16px;
+                min-height: 90px;
+                margin-bottom: 10px;
+                word-break: break-word;
+            }
+
+            .placeholder-text {
+                color: var(--text-secondary);
+                font-style: italic;
+                text-align: center;
+                margin: 0;
+            }
+
+            .result-text {
+                font-family: 'Courier New', monospace;
+                font-size: 1.2rem;
+                font-weight: bold;
+                color: var(--primary-color);
+                letter-spacing: 2px;
+                line-height: 1.8;
+                margin: 0;
+            }
+
+            #copyBtn {
+                background: var(--surface-color);
+                color: var(--text-color);
+                border: 2px solid var(--border-color);
+                padding: 7px 16px;
+                border-radius: 50px;
+                font-size: 0.9rem;
+                cursor: pointer;
+                margin-bottom: 20px;
+                transition: var(--transition);
+            }
+
+            #copyBtn:hover {
+                background: var(--primary-color);
+                color: white;
+                border-color: var(--primary-color);
+            }
+
+            .chart-section {
+                margin-top: 25px;
+            }
+
+            .chart-section h4 {
+                text-align: center;
+                margin-bottom: 10px;
+            }
+
+            #shiftPreview {
+                background: var(--surface-color);
+                border: 1px solid var(--border-color);
+                border-radius: 10px;
+                padding: 12px 16px;
+                overflow-x: auto;
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+            }
+
+            .alphabet-row {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+            }
+
+            .row-label {
+                font-size: 0.8rem;
+                font-weight: bold;
+                width: 65px;
+                color: var(--text-secondary);
+                flex-shrink: 0;
+            }
+
+            .letter-box {
+                width: 24px;
+                height: 24px;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 4px;
+                font-family: 'Courier New', monospace;
+                font-size: 0.8rem;
+                font-weight: bold;
+            }
+
+            .letter-box.plain {
+                background: var(--bg-color);
+                color: var(--text-color);
+                border: 1px solid var(--border-color);
+            }
+
+            .letter-box.cipher {
+                background: var(--primary-color);
+                color: white;
+            }
+        </style>
+    `;
+}
+
+
+function initCaesarCipher() {
+    const textBox = document.getElementById('cipherInput');
+    const goBtn = document.getElementById('cipherBtn');
+    const clearBtn = document.getElementById('clearBtn');
+    const copyBtn = document.getElementById('copyBtn');
+    const outputBox = document.getElementById('cipherOutput');
+    const shiftNumber = document.getElementById('shiftInput');
+    const shiftSlide = document.getElementById('shiftSlider');
+    const encryptRadio = document.getElementById('modeEncrypt');
+    const decryptRadio = document.getElementById('modeDecrypt');
+    const theLabel = document.getElementById('inputLabel');
+    const previewDiv = document.getElementById('shiftPreview');
+
+    const ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+    function encryptText(text, shift) {
+        let result = '';
+
+        for (const ch of text) {
+            if (ch >= 'A' && ch <= 'Z') {
+                result += String.fromCharCode(((ch.charCodeAt(0) - 65 + shift) % 26 + 26) % 26 + 65);
+            } else if (ch >= 'a' && ch <= 'z') {
+                result += String.fromCharCode(((ch.charCodeAt(0) - 97 + shift) % 26 + 26) % 26 + 97);
+            } else {
+                result += ch;
+            }
+        }
+
+        return result;
+    }
+
+    function decryptText(text, shift) {
+        return encryptText(text, -shift);
+    }
+
+    function buildAlphabetRow(label, getChar, className) {
+        const row = document.createElement('div');
+        row.className = 'alphabet-row';
+
+        const labelEl = document.createElement('span');
+        labelEl.className = 'row-label';
+        labelEl.textContent = label;
+        row.appendChild(labelEl);
+
+        for (let i = 0; i < 26; i++) {
+            const box = document.createElement('span');
+            box.className = `letter-box ${className}`;
+            box.textContent = getChar(i);
+            row.appendChild(box);
+        }
+
+        return row;
+    }
+
+    function showPreview(shift) {
+        previewDiv.innerHTML = '';
+        previewDiv.appendChild(buildAlphabetRow('Original:', i => ALPHABET[i], 'plain'));
+        previewDiv.appendChild(buildAlphabetRow(`Shift +${shift}:`, i => ALPHABET[(i + shift) % 26], 'cipher'));
+    }
+
+    function setMode(isEncrypt) {
+        theLabel.textContent = isEncrypt ? '📝 Enter Text to Encrypt:' : '📨 Enter Text to Decrypt:';
+        textBox.placeholder = isEncrypt ? 'Type your message here...' : 'Paste the encrypted text here...';
+        textBox.value = '';
+        outputBox.innerHTML = '<p class="placeholder-text">Your result will appear here...</p>';
+        copyBtn.style.display = 'none';
+        goBtn.textContent = isEncrypt ? '🔐 Encrypt Message' : '📝 Decrypt Message';
+    }
+
+    function syncSlider(val) {
+        const clamped = Math.min(25, Math.max(1, val));
+        shiftNumber.value = clamped;
+        shiftSlide.value = clamped;
+        showPreview(clamped);
+    }
+
+    function showError(msg) {
+        outputBox.innerHTML = `<p class="placeholder-text">❌ ${msg}</p>`;
+        copyBtn.style.display = 'none';
+    }
+
+    function showResult(text) {
+        outputBox.innerHTML = '';
+        const p = document.createElement('p');
+        p.className = 'result-text';
+        p.textContent = text;
+        outputBox.appendChild(p);
+        copyBtn.style.display = 'inline-block';
+        copyBtn.dataset.result = text;
+    }
+
+    encryptRadio.addEventListener('change', () => setMode(true));
+    decryptRadio.addEventListener('change', () => setMode(false));
+
+    shiftSlide.addEventListener('input', () => syncSlider(parseInt(shiftSlide.value)));
+    shiftNumber.addEventListener('input', () => syncSlider(parseInt(shiftNumber.value)));
+
+    goBtn.addEventListener('click', () => {
+        const text = textBox.value;
+        const shift = parseInt(shiftNumber.value);
+
+        if (!text.trim()) return showError('Please enter some text first!');
+        if (isNaN(shift) || shift < 1 || shift > 25) return showError('Please enter a shift value between 1 and 25!');
+
+        const result = encryptRadio.checked ? encryptText(text, shift) : decryptText(text, shift);
+        showResult(result);
+    });
+
+    clearBtn.addEventListener('click', () => {
+        textBox.value = '';
+        outputBox.innerHTML = '<p class="placeholder-text">Your result will appear here...</p>';
+        copyBtn.style.display = 'none';
+    });
+
+    copyBtn.addEventListener('click', () => {
+        navigator.clipboard.writeText(copyBtn.dataset.result).then(() => {
+            const original = copyBtn.textContent;
+            copyBtn.textContent = '✅ Copied!';
+            setTimeout(() => copyBtn.textContent = original, 1500);
+        });
+    });
+
+    showPreview(3);
+}
\ No newline at end of file
diff --git a/web-app/js/projects/tic-tac-toe.js b/web-app/js/projects/tic-tac-toe.js
index c86f237..1f26994 100644
--- a/web-app/js/projects/tic-tac-toe.js
+++ b/web-app/js/projects/tic-tac-toe.js
@@ -1,173 +1,538 @@
+// ═══════════════════════════════════════════════════════════
+//  🎮  Tic Tac Toe  —  web-app/js/projects/tic-tac-toe.js
+//  Category : games
+//  Features : 2-Player | vs AI (Easy/Medium/Hard) |
+//             Score tracking | Best-of-1/3/5 rounds
+// ═══════════════════════════════════════════════════════════
+
+// ── 1.  HTML Template ──────────────────────────────────────
 function getTicTacToeHTML() {
-    return `
-        <div class="project-content">
-            <h2>🧩 Tic-Tac-Toe</h2>
-        <div class="ttt-mode-buttons">
-            <button id="pvpMode" class="mode-btn active-mode">
-                👥 2 Players
-            </button>
-
-            <button id="aiMode" class="mode-btn">
-                you vs Computer
-            </button>
-        </div>
-            <div class="game-container">
-                <div class="tic-tac-toe-board" id="ticTacToeBoard">
-                    <button class="cell" data-cell="0"></button>
-                    <button class="cell" data-cell="1"></button>
-                    <button class="cell" data-cell="2"></button>
-                    <button class="cell" data-cell="3"></button>
-                    <button class="cell" data-cell="4"></button>
-                    <button class="cell" data-cell="5"></button>
-                    <button class="cell" data-cell="6"></button>
-                    <button class="cell" data-cell="7"></button>
-                    <button class="cell" data-cell="8"></button>
-                </div>
-
-                <p id="ticTacToeStatus">Player X's turn</p>
-
-                <button id="restartTicTacToe" class="game-btn">
-                    🔄 Restart Game
-                </button>
-            </div>
-        </div>
-    `;
+  return `
+<div class="ttt-wrap">
+
+  <!-- ░░ SETUP SCREEN ░░ -->
+  <div id="ttt-setup" class="ttt-screen ttt-screen--active">
+    <div class="ttt-logo">
+      <span class="ttt-logo-x">X</span>
+      <span class="ttt-logo-dot">·</span>
+      <span class="ttt-logo-o">O</span>
+    </div>
+    <h2 class="ttt-title">Tic Tac Toe</h2>
+    <p class="ttt-sub">Two players or vs AI — classic strategy game!</p>
+
+    <div class="ttt-field-group">
+      <span class="ttt-label">Game Mode</span>
+      <div class="ttt-pill-group" id="ttt-mode-group">
+        <button class="ttt-pill ttt-pill--on" data-val="2p">👥 Two Players</button>
+        <button class="ttt-pill" data-val="ai">🤖 vs Computer</button>
+      </div>
+    </div>
+
+    <div class="ttt-field-group" id="ttt-diff-group" style="display:none">
+      <span class="ttt-label">Difficulty</span>
+      <div class="ttt-pill-group" id="ttt-diff-pills">
+        <button class="ttt-pill ttt-pill--on" data-val="easy">🟢 Easy</button>
+        <button class="ttt-pill" data-val="medium">🟡 Medium</button>
+        <button class="ttt-pill" data-val="hard">🔴 Hard</button>
+      </div>
+    </div>
+
+    <div class="ttt-field-group">
+      <span class="ttt-label">Rounds</span>
+      <div class="ttt-pill-group" id="ttt-rounds-group">
+        <button class="ttt-pill" data-val="1">1</button>
+        <button class="ttt-pill ttt-pill--on" data-val="3">Best of 3</button>
+        <button class="ttt-pill" data-val="5">Best of 5</button>
+      </div>
+    </div>
+
+    <div class="ttt-names-row">
+      <div class="ttt-name-box">
+        <span class="ttt-label">Player 1 <em class="ttt-x-tag">❌</em></span>
+        <input class="ttt-input" type="text" id="ttt-p1" placeholder="Player 1" maxlength="12"/>
+      </div>
+      <div class="ttt-name-box" id="ttt-p2-box">
+        <span class="ttt-label">Player 2 <em class="ttt-o-tag">⭕</em></span>
+        <input class="ttt-input" type="text" id="ttt-p2" placeholder="Player 2" maxlength="12"/>
+      </div>
+    </div>
+
+    <button class="ttt-cta" id="ttt-start">🚀 Start Game</button>
+  </div><!-- /setup -->
+
+  <!-- ░░ GAME SCREEN ░░ -->
+  <div id="ttt-game" class="ttt-screen">
+
+    <!-- Scoreboard -->
+    <div class="ttt-scores">
+      <div class="ttt-score ttt-score--x">
+        <div class="ttt-score-name" id="ttt-sn1">P1</div>
+        <div class="ttt-score-val"  id="ttt-sv1">0</div>
+      </div>
+      <div class="ttt-score ttt-score--d">
+        <div class="ttt-score-name">Draws</div>
+        <div class="ttt-score-val" id="ttt-svd">0</div>
+      </div>
+      <div class="ttt-score ttt-score--o">
+        <div class="ttt-score-name" id="ttt-sn2">P2</div>
+        <div class="ttt-score-val"  id="ttt-sv2">0</div>
+      </div>
+    </div>
+
+    <div class="ttt-round-tag" id="ttt-round-tag">Round 1 of 3</div>
+
+    <!-- Turn banner -->
+    <div class="ttt-turn-banner" id="ttt-turn-banner">
+      <span class="ttt-turn-sym" id="ttt-turn-sym">❌</span>
+      <span id="ttt-turn-name">Player 1</span>'s turn
+    </div>
+
+    <!-- Board -->
+    <div style="position:relative;">
+    <div id="ttt-board">
+      ${[0,1,2,3,4,5,6,7,8].map(i =>
+        `<button class="ttt-cell" data-i="${i}" aria-label="Cell ${i+1}"></button>`
+      ).join('')}
+    </div>
+
+    <!-- Win-line SVG overlay -->
+    <svg class="ttt-win-svg" id="ttt-win-svg" viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg">
+      <line id="ttt-win-line" x1="0" y1="0" x2="0" y2="0"
+            stroke="var(--ttt-accent)" stroke-width="0.18"
+            stroke-linecap="round" opacity="0"/>
+    </svg>
+</div>
+    <!-- Result overlay -->
+    <div class="ttt-result-overlay" id="ttt-result-overlay" style="display:none">
+      <div class="ttt-result-card">
+        <div class="ttt-result-emoji" id="ttt-res-emoji">🏆</div>
+        <div class="ttt-result-text"  id="ttt-res-text">Player 1 wins!</div>
+        <button class="ttt-cta ttt-cta--sm" id="ttt-next">Next Round →</button>
+      </div>
+    </div>
+
+    <button class="ttt-ghost-btn" id="ttt-back">← Menu</button>
+  </div><!-- /game -->
+
+  <!-- ░░ FINAL SCREEN ░░ -->
+  <div id="ttt-final" class="ttt-screen">
+    <div class="ttt-final-trophy">🏆</div>
+    <div class="ttt-final-title" id="ttt-final-title">Player 1 Wins!</div>
+    <div class="ttt-final-scoreline">
+      <span class="ttt-fs-name ttt-fs-x" id="ttt-fp1">P1</span>
+      <span class="ttt-fs-score" id="ttt-fp1s">0</span>
+      <span class="ttt-fs-sep">—</span>
+      <span class="ttt-fs-score" id="ttt-fp2s">0</span>
+      <span class="ttt-fs-name ttt-fs-o" id="ttt-fp2">P2</span>
+    </div>
+    <div class="ttt-final-draws" id="ttt-final-draws">0 draws</div>
+    <div class="ttt-final-actions">
+      <button class="ttt-cta" id="ttt-rematch">🔄 Rematch</button>
+      <button class="ttt-ghost-btn" id="ttt-menu">← Main Menu</button>
+    </div>
+  </div><!-- /final -->
+
+</div><!-- /ttt-wrap -->
+`;
 }
 
+// ── 2.  Init Function ──────────────────────────────────────
 function initTicTacToe() {
-    const cells = document.querySelectorAll('.cell');
-    const statusText = document.getElementById('ticTacToeStatus');
-    const restartBtn = document.getElementById('restartTicTacToe');
-    const twoPlayerBtn = document.getElementById('twoPlayerMode');
-    const computerBtn = document.getElementById('computerMode');
 
-    let vsComputer = false;
-    let currentPlayer = 'X';
-    let board = ['', '', '', '', '', '', '', '', ''];
-    let gameActive = true;
-
-    
-
-    const pvpBtn = document.getElementById('pvpMode');
-    const aiBtn = document.getElementById('aiMode');
-
-    pvpBtn.addEventListener('click', () => {
-        vsComputer = false;
-
-        pvpBtn.classList.add('active-mode');
-        aiBtn.classList.remove('active-mode');
-
-        resetGame();
-        statusText.textContent = "2 Player Mode";
+  // Win combos
+  const WINS = [
+    [0,1,2],[3,4,5],[6,7,8],   // rows
+    [0,3,6],[1,4,7],[2,5,8],   // cols
+    [0,4,8],[2,4,6]            // diagonals
+  ];
+
+  // Win-line centre coordinates (column, row) in 0-2 grid space
+  const WIN_COORDS = [
+    [[0,0],[2,0]], [[0,1],[2,1]], [[0,2],[2,2]],  // rows
+    [[0,0],[0,2]], [[1,0],[1,2]], [[2,0],[2,2]],  // cols
+    [[0,0],[2,2]], [[2,0],[0,2]]                   // diagonals
+  ];
+
+  // ── State ──
+  let mode       = "2p";
+  let difficulty = "easy";
+  let maxRounds  = 3;
+  let p1         = "Player 1";
+  let p2         = "Player 2";
+  let scores     = { p1:0, p2:0, draws:0 };
+  let board      = [];
+  let current    = "X";   // "X" | "O"
+  let round      = 1;
+  let gameOver   = false;
+
+  // ── Helpers ──
+  function qs(sel, ctx) { return (ctx||document).querySelector(sel); }
+
+  // Show one of the three screens
+  function showScreen(id) {
+    ["ttt-setup","ttt-game","ttt-final"].forEach(s => {
+      const el = document.getElementById(s);
+      if (el) {
+        el.classList.toggle("ttt-screen--active", s === id);
+      }
     });
-
-    aiBtn.addEventListener('click', () => {
-        vsComputer = true;
-
-        aiBtn.classList.add('active-mode');
-        pvpBtn.classList.remove('active-mode');
-
-        resetGame();
-        statusText.textContent = "Playing vs Computer";
+  }
+
+  // Pill-toggle group helper
+  function initPillGroup(groupId, onChange) {
+    const grp = document.getElementById(groupId);
+    if (!grp) return;
+    grp.querySelectorAll(".ttt-pill").forEach(btn => {
+      btn.addEventListener("click", () => {
+        grp.querySelectorAll(".ttt-pill").forEach(b => b.classList.remove("ttt-pill--on"));
+        btn.classList.add("ttt-pill--on");
+        onChange(btn.dataset.val);
+      });
     });
-
-    const winningCombinations = [
-        [0,1,2],
-        [3,4,5],
-        [6,7,8],
-        [0,3,6],
-        [1,4,7],
-        [2,5,8],
-        [0,4,8],
-        [2,4,6]
-    ];
-
-    function checkWinner() {
-        for (let combo of winningCombinations) {
-            const [a, b, c] = combo;
-
-            if (
-                board[a] &&
-                board[a] === board[b] &&
-                board[a] === board[c]
-            ) {
-                statusText.textContent = `🎉 Player ${board[a]} wins!`;
-                gameActive = false;
-                return;
-            }
-        }
-
-        if (!board.includes('')) {
-            statusText.textContent = "🤝 It's a draw!";
-            gameActive = false;
-        }
+  }
+
+  // ── Wire up Setup ──
+  initPillGroup("ttt-mode-group", val => {
+    mode = val;
+    const diffGroup = document.getElementById("ttt-diff-group");
+    const p2box     = document.getElementById("ttt-p2-box");
+    const p2inp     = document.getElementById("ttt-p2");
+    if (val === "ai") {
+      diffGroup.style.display = "block";
+      p2box.classList.add("ttt-dimmed");
+      p2inp.disabled = true;
+      p2inp.placeholder = "Computer 🤖";
+    } else {
+      diffGroup.style.display = "none";
+      p2box.classList.remove("ttt-dimmed");
+      p2inp.disabled = false;
+      p2inp.placeholder = "Player 2";
     }
+  });
+
+  initPillGroup("ttt-diff-pills",   val => { difficulty = val; });
+  initPillGroup("ttt-rounds-group", val => { maxRounds = parseInt(val); });
+
+  // Start button
+  const startBtn = document.getElementById("ttt-start");
+  if (startBtn) {
+    startBtn.addEventListener("click", () => {
+      p1 = (document.getElementById("ttt-p1").value.trim()) || "Player 1";
+      p2 = mode === "ai"
+        ? "Computer 🤖"
+        : ((document.getElementById("ttt-p2").value.trim()) || "Player 2");
+      scores = { p1:0, p2:0, draws:0 };
+      round  = 1;
+      newRound();
+      showScreen("ttt-game");
+    });
+  }
+
+  // Back / Menu buttons
+  const backBtn = document.getElementById("ttt-back");
+  if (backBtn) backBtn.addEventListener("click", () => showScreen("ttt-setup"));
+
+  const menuBtn = document.getElementById("ttt-menu");
+  if (menuBtn) menuBtn.addEventListener("click", () => showScreen("ttt-setup"));
+
+  // Rematch button
+  const rematchBtn = document.getElementById("ttt-rematch");
+  if (rematchBtn) {
+    rematchBtn.addEventListener("click", () => {
+      scores = { p1:0, p2:0, draws:0 };
+      round  = 1;
+      newRound();
+      showScreen("ttt-game");
+    });
+  }
+
+  // Next-round button
+  const nextBtn = document.getElementById("ttt-next");
+  if (nextBtn) {
+    nextBtn.addEventListener("click", () => {
+      const majority = Math.ceil(maxRounds / 2);
+      const matchDone = round >= maxRounds
+        || scores.p1 >= majority
+        || scores.p2 >= majority;
+      if (matchDone) {
+        renderFinal();
+        showScreen("ttt-final");
+      } else {
+        round++;
+        newRound();
+      }
+    });
+  }
+
+  // ── Round management ──
+  function newRound() {
+    board    = Array(9).fill(null);
+    current  = "X";
+    gameOver = false;
+
+    // Reset cells
+    document.querySelectorAll(".ttt-cell").forEach(c => {
+      c.textContent = "";
+      c.className   = "ttt-cell";
+      c.disabled    = false;
+    });
 
-    cells.forEach(cell => {
-        cell.addEventListener('click', () => {
-            const index = cell.dataset.cell;
+    // Hide result overlay
+    const overlay = document.getElementById("ttt-result-overlay");
+    if (overlay) overlay.style.display = "none";
 
-            if (board[index] || !gameActive) return;
+    // Clear win line
+    clearWinLine();
 
-            board[index] = currentPlayer;
-            cell.textContent = currentPlayer;
+    // Update scoreboard
+    syncScoreboard();
 
-            checkWinner();
+    // Round label
+    const tag = document.getElementById("ttt-round-tag");
+    if (tag) {
+      tag.textContent = maxRounds === 1
+        ? "Single Round"
+        : `Round ${round} of ${maxRounds}`;
+    }
 
-            if (vsComputer && gameActive && currentPlayer === 'X') {
-                currentPlayer = 'O';
-                statusText.textContent = "Computer's turn";
+    refreshTurnBanner();
 
-                setTimeout(() => {
-                    computerMove();
-                }, 500);
+    // If AI goes first (not default, but safe to handle)
+    if (mode === "ai" && current === "O") {
+      lockBoard(true);
+      setTimeout(aiTurn, 600);
+    }
+  }
+
+  function syncScoreboard() {
+    const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    set("ttt-sn1", p1);
+    set("ttt-sn2", p2);
+    set("ttt-sv1", scores.p1);
+    set("ttt-sv2", scores.p2);
+    set("ttt-svd", scores.draws);
+  }
+
+  function refreshTurnBanner() {
+    const name = current === "X" ? p1 : p2;
+    const sym  = current === "X" ? "X" : "O";
+    const symEl  = document.getElementById("ttt-turn-sym");
+    const nameEl = document.getElementById("ttt-turn-name");
+    const banner = document.getElementById("ttt-turn-banner");
+    if (symEl)  symEl.textContent  = sym;
+    if (nameEl) nameEl.textContent = name;
+    if (banner) {
+      banner.classList.toggle("ttt-turn-banner--x", current === "X");
+      banner.classList.toggle("ttt-turn-banner--o", current === "O");
+    }
+  }
 
-                return;
-            }
+  // ── Cell clicks ──
+  document.querySelectorAll(".ttt-cell").forEach(cell => {
+    cell.addEventListener("click", () => {
+      const i = parseInt(cell.dataset.i);
+      if (gameOver || board[i]) return;
+      if (mode === "ai" && current === "O") return; // AI's turn
 
-            if (gameActive) {
-                currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
-                statusText.textContent = `Player ${currentPlayer}'s turn`;
-            }
-        });
+      placeMove(i, current);
+      afterMove();
     });
-
-    function resetGame() {
-        board = ['', '', '', '', '', '', '', '', ''];
-        gameActive = true;
-        currentPlayer = 'X';
-
-        cells.forEach(cell => {
-            cell.textContent = '';
-        });
-
-        statusText.textContent = "Player X's turn";
+  });
+
+  function placeMove(i, sym) {
+    board[i] = sym;
+    const cell = document.querySelector(`.ttt-cell[data-i="${i}"]`);
+    if (!cell) return;
+    cell.textContent = sym;
+    cell.classList.add(sym === "X" ? "ttt-cell--x" : "ttt-cell--o");
+    cell.disabled = true;
+  }
+
+  function afterMove() {
+    const win = getWinner(board);
+    if (win)              { endRound(win);  return; }
+    if (board.every(c=>c)){ endRound(null); return; }
+
+    current = current === "X" ? "O" : "X";
+    refreshTurnBanner();
+
+    if (mode === "ai" && current === "O") {
+      lockBoard(true);
+      setTimeout(aiTurn, 480 + Math.random()*200);
     }
+  }
 
-    function computerMove() {
-        let emptyCells = [];
-
-        board.forEach((cell, index) => {
-            if (cell === '') {
-                emptyCells.push(index);
-            }
-        });
-
-        if (emptyCells.length === 0) return;
+  function lockBoard(on) {
+    document.querySelectorAll(".ttt-cell").forEach(c => {
+      if (!board[parseInt(c.dataset.i)]) c.disabled = on;
+    });
+  }
+
+  // ── Win detection ──
+  function getWinner(b) {
+    for (let idx=0; idx<WINS.length; idx++) {
+      const [a,x,c] = WINS[idx];
+      if (b[a] && b[a]===b[x] && b[x]===b[c]) {
+        return { sym: b[a], combo: WINS[idx], coordIdx: idx };
+      }
+    }
+    return null;
+  }
+
+  // ── End of round ──
+  function endRound(win) {
+    gameOver = true;
+    lockBoard(true);
+
+    if (win) {
+      // Highlight winning cells
+      win.combo.forEach(i => {
+        const cell = document.querySelector(`.ttt-cell[data-i="${i}"]`);
+        if (cell) cell.classList.add("ttt-cell--win");
+      });
+      // Draw SVG win line
+      drawWinLine(win.coordIdx);
+
+      const winnerName = win.sym === "X" ? p1 : p2;
+      if (win.sym === "X") scores.p1++; else scores.p2++;
+      syncScoreboard();
+
+      setResult("🏆", `${winnerName} wins this round!`);
+    } else {
+      scores.draws++;
+      syncScoreboard();
+      setResult("🤝", "It's a draw!");
+    }
 
-        const randomIndex =
-            emptyCells[Math.floor(Math.random() * emptyCells.length)];
+    // Update Next button label
+    setTimeout(() => {
+      const majority  = Math.ceil(maxRounds / 2);
+      const matchDone = round >= maxRounds
+        || scores.p1 >= majority
+        || scores.p2 >= majority;
+      const nextBtn = document.getElementById("ttt-next");
+      if (nextBtn) nextBtn.textContent = matchDone ? "See Results →" : "Next Round →";
+
+      const overlay = document.getElementById("ttt-result-overlay");
+      if (overlay) overlay.style.display = "flex";
+    }, 600);
+  }
+
+  function setResult(emoji, text) {
+    const e = document.getElementById("ttt-res-emoji");
+    const t = document.getElementById("ttt-res-text");
+    if (e) e.textContent = emoji;
+    if (t) t.textContent = text;
+  }
+
+  // ── Win-line SVG ──
+  // Grid cells are (col, row) 0-indexed; centre of cell = col+0.5, row+0.5
+  function drawWinLine(comboIdx) {
+  const line = document.getElementById("ttt-win-line");
+  const svg  = document.getElementById("ttt-win-svg");
+  if (!line || !svg) return;
+
+  const [[c1,r1],[c2,r2]] = WIN_COORDS[comboIdx];
+  line.setAttribute("x1", c1 + 0.5);
+  line.setAttribute("y1", r1 + 0.5);
+  line.setAttribute("x2", c2 + 0.5);
+  line.setAttribute("y2", r2 + 0.5);
+  line.setAttribute("opacity", "1");
+  svg.classList.add("ttt-win-svg--visible");
+}
+ function clearWinLine() {
+    const line = document.getElementById("ttt-win-line");
+    const svg  = document.getElementById("ttt-win-svg");
+    if (line) line.setAttribute("opacity","0");
+    if (svg)  svg.classList.remove("ttt-win-svg--visible");
+  }
+
+  // ── Final screen ──
+  function renderFinal() {
+    const set = (id,v) => { const el=document.getElementById(id); if(el) el.textContent=v; };
+    set("ttt-fp1",  p1);
+    set("ttt-fp2",  p2);
+    set("ttt-fp1s", scores.p1);
+    set("ttt-fp2s", scores.p2);
+    set("ttt-final-draws", `${scores.draws} draw${scores.draws!==1?"s":""}`);
+
+    let title;
+    if      (scores.p1 > scores.p2) title = `🏆 ${p1} wins the match!`;
+    else if (scores.p2 > scores.p1) title = `🏆 ${p2} wins the match!`;
+    else                             title = "🤝 The match is tied!";
+    set("ttt-final-title", title);
+  }
+
+  // ── AI engines ──
+  function freeCells(b) {
+    return b.reduce((acc,v,i) => { if(!v) acc.push(i); return acc; }, []);
+  }
+
+  function checkWinFor(b, sym) {
+    return WINS.some(([a,x,c]) => b[a]===sym && b[x]===sym && b[c]===sym);
+  }
+
+  function minimax(b, isMax, alpha, beta, depth) {
+    if (checkWinFor(b,"O")) return 10 - depth;
+    if (checkWinFor(b,"X")) return depth - 10;
+    if (b.every(c=>c))      return 0;
+
+    const moves = freeCells(b);
+    if (isMax) {
+      let best = -Infinity;
+      for (const m of moves) {
+        b[m] = "O";
+        best = Math.max(best, minimax(b, false, alpha, beta, depth+1));
+        b[m] = null;
+        alpha = Math.max(alpha, best);
+        if (beta <= alpha) break;
+      }
+      return best;
+    } else {
+      let best = Infinity;
+      for (const m of moves) {
+        b[m] = "X";
+        best = Math.min(best, minimax(b, true, alpha, beta, depth+1));
+        b[m] = null;
+        beta = Math.min(beta, best);
+        if (beta <= alpha) break;
+      }
+      return best;
+    }
+  }
 
-        board[randomIndex] = 'O';
-        cells[randomIndex].textContent = 'O';
+  function chooseMove(b, diff) {
+    const moves = freeCells(b);
+    if (!moves.length) return null;
 
-        checkWinner();
+    // Easy — random
+    if (diff === "easy") return moves[Math.floor(Math.random()*moves.length)];
 
-        if (gameActive) {
-            currentPlayer = 'X';
-            statusText.textContent = "Player X's turn";
-        }
+    // Medium — win → block → center/corners
+    if (diff === "medium") {
+      for (const m of moves) { b[m]="O"; if(checkWinFor(b,"O")){b[m]=null;return m;} b[m]=null; }
+      for (const m of moves) { b[m]="X"; if(checkWinFor(b,"X")){b[m]=null;return m;} b[m]=null; }
+      for (const p of [4,0,2,6,8,1,3,5,7]) { if(!b[p]) return p; }
+      return moves[0];
     }
 
-    restartBtn.addEventListener('click', resetGame);
-}
\ No newline at end of file
+    // Hard — minimax
+    let bestScore=-Infinity, bestMove=moves[0];
+    for (const m of moves) {
+      b[m]="O";
+      const s = minimax(b, false, -Infinity, Infinity, 0);
+      b[m]=null;
+      if (s > bestScore) { bestScore=s; bestMove=m; }
+    }
+    return bestMove;
+  }
+
+  function aiTurn() {
+    if (gameOver) return;
+    const move = chooseMove([...board], difficulty); // pass copy so minimax doesn't corrupt state
+    lockBoard(false);
+    if (move !== null) placeMove(move, "O");
+    afterMove();
+  }
+
+} // end initTicTacToe
\ No newline at end of file
diff --git a/web-app/math.html b/web-app/math.html
index 46a91a0..71c5785 100644
--- a/web-app/math.html
+++ b/web-app/math.html
@@ -91,44 +91,103 @@
     </style>
 </head>
 
-<body data-page="math">
+<body data-page="math" class="sidebar-active">
     <a href="#main-content" class="skip-link">🚀 Skip to main content</a>
 
-    <!-- Navigation -->
-    <nav class="navbar" aria-label="Primary">
-        <div class="container">
-            <div class="logo">
-                <a href="index.html" style="text-decoration: none; color: inherit; display: flex; align-items: center; gap: 8px;">
-                    <span style="font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 10px;">🎮 Python Mini Projects</span>
-                </a>
+    <!-- Mobile Sidebar Toggle -->
+    <button type="button" class="mobile-sidebar-toggle" id="mobileSidebarToggle" aria-label="Toggle sidebar menu" aria-expanded="false">
+      <i class="fas fa-bars"></i>
+    </button>
+
+    <!-- ── PRIMARY SIDEBAR DOCK ──────────────────────────────────── -->
+    <aside class="sidebar-dock" id="mainSidebar" aria-label="Primary Navigation">
+      <div class="sidebar-brand">
+        <a class="logo-wrap" href="index.html">
+          <div class="logo-top-row">
+            <img alt="PyMini Logo" class="navbar-logo" src="assets/logo.png"/>
+            <div class="logo-text">
+              <span class="logo-py">py</span>
+              <span class="logo-mini">.mini</span>
+              <span class="logo-parens">()</span>
             </div>
-            <div class="nav-controls">
-                <button type="button" class="sound-toggle" id="soundToggle" aria-label="Mute sounds">
-                    <i class="fas fa-volume-up" aria-hidden="true"></i>
-                </button>
-                <button type="button" class="theme-toggle" id="themeToggle" aria-label="Switch to light mode">
-                    <i class="fas fa-moon" aria-hidden="true"></i>
-                </button>
+          </div>
+          <span class="logo-tagline">games, math &amp; terminal toys</span>
+        </a>
+      </div>
+
+      <div class="sidebar-search">
+        <div class="search-box" style="position:relative">
+          <i class="fas fa-search"></i>
+          <input aria-label="Search projects" id="searchInput" placeholder="Search projects or tags..." type="text"/>
+          <div class="search-dropdown" id="searchDropdown">
+            <div class="dropdown-content" id="searchDropdownContent">
+              <div class="search-loader" id="searchLoader" style="display:none"><div class="spinner"></div></div>
+              <div class="recent-searches-section" id="recentSearchesSection">
+                <div class="dropdown-section-title">Recent</div>
+                <div class="dropdown-list" id="recentSearchesList"></div>
+              </div>
+              <div class="results-section" id="resultsSection" style="display:none">
+                <div class="dropdown-section-title">Projects</div>
+                <div class="dropdown-list" id="resultsList"></div>
+              </div>
+              <div class="tips-section" id="tipsSection">
+                <p><strong>Search tips</strong></p>
+                <ul>
+                  <li>Type a project name — <code>snake</code>, <code>quiz</code></li>
+                  <li>Filter by tag — <code>game</code>, <code>math</code>, <code>utility</code></li>
+                  <li>Press <code>Ctrl+K</code> to focus search</li>
+                </ul>
+              </div>
+              <div class="no-results-message" id="noResultsMessage" style="display:none">No projects found. Try a different keyword.</div>
             </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="sidebar-menu-wrapper">
+        <div class="sidebar-menu-title">Categories</div>
+        <nav class="sidebar-menu" role="tablist" aria-label="Filter by category">
+          <button aria-selected="false" class="sidebar-tab" data-category="all" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="layers"></svg></span>
+            <span class="sidebar-label">All Projects</span>
+          </button>
+          <button aria-selected="false" class="sidebar-tab" data-category="games" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="gamepad-2"></svg></span>
+            <span class="sidebar-label">Games Arcade</span>
+          </button>
+          <button aria-selected="true" class="sidebar-tab active" data-category="math" role="tab" tabindex="0">
+            <span class="sidebar-icon"><svg data-lucide="sigma"></svg></span>
+            <span class="sidebar-label">Math Visuals</span>
+          </button>
+          <button aria-selected="false" class="sidebar-tab" data-category="utilities" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="wrench"></svg></span>
+            <span class="sidebar-label">Utilities Lab</span>
+          </button>
+          <button aria-selected="false" class="sidebar-tab" data-category="favorites" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="star"></svg></span>
+            <span class="sidebar-label">My Favorites</span>
+          </button>
+          <button aria-selected="false" class="sidebar-tab" data-category="playground" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="terminal"></svg></span>
+            <span class="sidebar-label">Playground</span>
+          </button>
+        </nav>
+      </div>
+
+      <div class="sidebar-footer">
+        <div class="sidebar-controls">
+          <button aria-label="Mute sounds" class="sound-toggle" id="soundToggle" type="button">
+            <i class="fas fa-volume-up"></i>
+          </button>
+          <button aria-label="Switch theme" class="theme-toggle" id="themeToggle" type="button">
+            <i class="fas fa-moon"></i>
+          </button>
         </div>
-    </nav>
+      </div>
+    </aside>
 
     <main id="main-content" tabindex="-1">
 
-        <!-- Category Tabs -->
-        <section class="tabs-section" aria-label="Project categories">
-            <div class="container">
-                <div class="tabs-wrapper">
-                    <div class="tabs" role="tablist" aria-label="Project categories">
-                        <a href="index.html" class="tab" role="tab">🌟 All Projects</a>
-                        <a href="games.html" class="tab" role="tab">🎮 Games</a>
-                        <a href="math.html" class="tab active" role="tab" aria-selected="true">🔢 Math</a>
-                        <a href="utilities.html" class="tab" role="tab">🔐 Utilities</a>
-                    </div>
-                </div>
-            </div>
-        </section>
-
         <!-- Page Title Section -->
         <section class="page-title-section" style="text-align: center; padding: 2rem 0 1rem 0;">
             <div class="container">
@@ -267,7 +326,9 @@ <h2 id="modalDialogTitle" class="modal-dialog-title visually-hidden" tabindex="-
     <script src="js/projects/math-quiz.js"></script>
     <script src="js/projects/simon-says.js"></script>
     <script src="js/projects.js"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
     <script src="js/main.js"></script>
+    <script>lucide.createIcons();</script>
 
 </body>
 </html>
diff --git a/web-app/utilities.html b/web-app/utilities.html
index 4e14233..7ab314d 100644
--- a/web-app/utilities.html
+++ b/web-app/utilities.html
@@ -90,43 +90,102 @@
     </style>
 </head>
 
-<body data-page="utilities">
+<body data-page="utilities" class="sidebar-active">
     <a href="#main-content" class="skip-link">🚀 Skip to main content</a>
 
-    <!-- Navigation -->
-    <nav class="navbar" aria-label="Primary">
-        <div class="container">
-            <div class="logo">
-                <a href="index.html" style="text-decoration: none; color: inherit; display: flex; align-items: center; gap: 8px;">
-                    <span style="font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 10px;">🎮 Python Mini Projects</span>
-                </a>
+    <!-- Mobile Sidebar Toggle -->
+    <button type="button" class="mobile-sidebar-toggle" id="mobileSidebarToggle" aria-label="Toggle sidebar menu" aria-expanded="false">
+      <i class="fas fa-bars"></i>
+    </button>
+
+    <!-- ── PRIMARY SIDEBAR DOCK ──────────────────────────────────── -->
+    <aside class="sidebar-dock" id="mainSidebar" aria-label="Primary Navigation">
+      <div class="sidebar-brand">
+        <a class="logo-wrap" href="index.html">
+          <div class="logo-top-row">
+            <img alt="PyMini Logo" class="navbar-logo" src="assets/logo.png"/>
+            <div class="logo-text">
+              <span class="logo-py">py</span>
+              <span class="logo-mini">.mini</span>
+              <span class="logo-parens">()</span>
             </div>
-            <div class="nav-controls">
-                <button type="button" class="sound-toggle" id="soundToggle" aria-label="Mute sounds">
-                    <i class="fas fa-volume-up" aria-hidden="true"></i>
-                </button>
-                <button type="button" class="theme-toggle" id="themeToggle" aria-label="Switch to light mode">
-                    <i class="fas fa-moon" aria-hidden="true"></i>
-                </button>
+          </div>
+          <span class="logo-tagline">games, math &amp; terminal toys</span>
+        </a>
+      </div>
+
+      <div class="sidebar-search">
+        <div class="search-box" style="position:relative">
+          <i class="fas fa-search"></i>
+          <input aria-label="Search projects" id="searchInput" placeholder="Search projects or tags..." type="text"/>
+          <div class="search-dropdown" id="searchDropdown">
+            <div class="dropdown-content" id="searchDropdownContent">
+              <div class="search-loader" id="searchLoader" style="display:none"><div class="spinner"></div></div>
+              <div class="recent-searches-section" id="recentSearchesSection">
+                <div class="dropdown-section-title">Recent</div>
+                <div class="dropdown-list" id="recentSearchesList"></div>
+              </div>
+              <div class="results-section" id="resultsSection" style="display:none">
+                <div class="dropdown-section-title">Projects</div>
+                <div class="dropdown-list" id="resultsList"></div>
+              </div>
+              <div class="tips-section" id="tipsSection">
+                <p><strong>Search tips</strong></p>
+                <ul>
+                  <li>Type a project name — <code>snake</code>, <code>quiz</code></li>
+                  <li>Filter by tag — <code>game</code>, <code>math</code>, <code>utility</code></li>
+                  <li>Press <code>Ctrl+K</code> to focus search</li>
+                </ul>
+              </div>
+              <div class="no-results-message" id="noResultsMessage" style="display:none">No projects found. Try a different keyword.</div>
             </div>
+          </div>
         </div>
-    </nav>
+      </div>
 
-    <main id="main-content" tabindex="-1">
+      <div class="sidebar-menu-wrapper">
+        <div class="sidebar-menu-title">Categories</div>
+        <nav class="sidebar-menu" role="tablist" aria-label="Filter by category">
+          <button aria-selected="false" class="sidebar-tab" data-category="all" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="layers"></svg></span>
+            <span class="sidebar-label">All Projects</span>
+          </button>
+          <button aria-selected="false" class="sidebar-tab" data-category="games" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="gamepad-2"></svg></span>
+            <span class="sidebar-label">Games Arcade</span>
+          </button>
+          <button aria-selected="false" class="sidebar-tab" data-category="math" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="sigma"></svg></span>
+            <span class="sidebar-label">Math Visuals</span>
+          </button>
+          <button aria-selected="true" class="sidebar-tab active" data-category="utilities" role="tab" tabindex="0">
+            <span class="sidebar-icon"><svg data-lucide="wrench"></svg></span>
+            <span class="sidebar-label">Utilities Lab</span>
+          </button>
+          <button aria-selected="false" class="sidebar-tab" data-category="favorites" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="star"></svg></span>
+            <span class="sidebar-label">My Favorites</span>
+          </button>
+          <button aria-selected="false" class="sidebar-tab" data-category="playground" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="terminal"></svg></span>
+            <span class="sidebar-label">Playground</span>
+          </button>
+        </nav>
+      </div>
 
-        <!-- Category Tabs -->
-        <section class="tabs-section" aria-label="Project categories">
-            <div class="container">
-                <div class="tabs-wrapper">
-                    <div class="tabs" role="tablist" aria-label="Project categories">
-                        <a href="index.html" class="tab" role="tab">🌟 All Projects</a>
-                        <a href="games.html" class="tab" role="tab">🎮 Games</a>
-                        <a href="math.html" class="tab" role="tab">🔢 Math</a>
-                        <a href="utilities.html" class="tab active" role="tab" aria-selected="true">🔐 Utilities</a>
-                    </div>
-                </div>
-            </div>
-        </section>
+      <div class="sidebar-footer">
+        <div class="sidebar-controls">
+          <button aria-label="Mute sounds" class="sound-toggle" id="soundToggle" type="button">
+            <i class="fas fa-volume-up"></i>
+          </button>
+          <button aria-label="Switch theme" class="theme-toggle" id="themeToggle" type="button">
+            <i class="fas fa-moon"></i>
+          </button>
+        </div>
+      </div>
+    </aside>
+
+    <main id="main-content" tabindex="-1">
 
         <!-- Page Title Section -->
         <section class="page-title-section" style="text-align: center; padding: 2rem 0 1rem 0;">
@@ -141,6 +200,13 @@ <h1 style="font-size: 2.5rem; font-family: 'Space Grotesk', sans-serif; backgrou
             <div class="container">
                 <div class="projects-grid" id="projectsGrid">
 
+                    <div class="project-card" data-category="utilities" data-project="caesar-cipher"><img class="card-banner" src="assets/banners/caesar-cipher.jpg" alt="Caesar Cipher" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
+                        
+                        <h3>Caesar Cipher</h3>
+                        <p>Encrypt &amp; decrypt with a shift!</p>
+                    
+                    </div>
+
                     <div class="project-card" data-category="utilities" data-project="morse-code"><img class="card-banner" src="assets/banners/morse-code.jpg" alt="Morse Code" loading="lazy"><div class="card-actions"><button class="btn-play">Try It</button></div>
                         
                         <h3>Morse Code</h3>
@@ -225,8 +291,11 @@ <h2 id="modalDialogTitle" class="modal-dialog-title visually-hidden" tabindex="-
     <script src="js/projects/simon-says.js"></script>
     <script src="js/projects/number-converter.js"></script>
     <script src="js/projects/typing-speed-tester.js"></script>
+    <script src="js/projects/ceasar-cipher.js"></script>
     <script src="js/projects.js"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
     <script src="js/main.js"></script>
+    <script>lucide.createIcons();</script>
 
 </body>
 </html>