From b857104bd6468a1d0ac70384d7d7b92290e4d388 Mon Sep 17 00:00:00 2001
From: Prad Nukala <prad@sonr.io>
Date: Wed, 19 Aug 2026 11:26:29 -0400
Subject: [PATCH] style(docs): update dependency spine assets to dark theme
 colors

---
 .github/assets/dependency-spine.html | 346 +++++++++++++--------------
 .github/assets/dependency-spine.svg  | 338 +++++++++++++-------------
 2 files changed, 342 insertions(+), 342 deletions(-)

diff --git a/.github/assets/dependency-spine.html b/.github/assets/dependency-spine.html
index f658b2b..fab07ab 100644
--- a/.github/assets/dependency-spine.html
+++ b/.github/assets/dependency-spine.html
@@ -8,10 +8,10 @@
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
-      --color-paper:   #fafafa;
-      --color-ink:     #0a0a0a;
-      --color-muted:   #6f6f6f;
-      --color-accent:  #2389e2;
+      --color-paper:   #020202;
+      --color-ink:     #f2f2f2;
+      --color-muted:   #989898;
+      --color-accent:  #449df0;
       --font-sans:     'Inter', system-ui, sans-serif;
       --font-serif:    'Instrument Serif', serif;
       --font-mono:     'IBM Plex Mono', ui-monospace, monospace;
@@ -62,243 +62,243 @@
       <title id="dependency-spine-title">LeetCode topic dependency spine</title>
       <desc id="dependency-spine-desc">Dependency graph of 24 LeetCode study topics across five phases, showing which topics build on which, with Tree DFS and 1-D dynamic programming as the two central hubs.</desc>
       <defs>
-        <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#6f6f6f"/></marker>
-        <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#2389e2"/></marker>
-        <marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#1a6bb8"/></marker>
+        <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#989898"/></marker>
+        <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#449df0"/></marker>
+        <marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#6ab0f5"/></marker>
       </defs>
 
-      <rect width="100%" height="100%" fill="#fafafa"/>
+      <rect width="100%" height="100%" fill="#020202"/>
 
       <!-- ============ zones (painted first) ============ -->
-      <rect x="40" y="40" width="368" height="312" rx="8" fill="rgba(10,10,10,0.02)" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
-      <rect x="56" y="44" width="168" height="12" rx="2" fill="#fafafa"/>
-      <text x="60" y="53" fill="rgba(10,10,10,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASE I — LINEAR STRUCTURES</text>
+      <rect x="40" y="40" width="368" height="312" rx="8" fill="rgba(242,242,242,0.02)" stroke="rgba(242,242,242,0.10)" stroke-width="0.8"/>
+      <rect x="56" y="44" width="168" height="12" rx="2" fill="#020202"/>
+      <text x="60" y="53" fill="rgba(242,242,242,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASE I — LINEAR STRUCTURES</text>
 
-      <rect x="456" y="40" width="368" height="312" rx="8" fill="rgba(10,10,10,0.02)" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
-      <rect x="472" y="44" width="152" height="12" rx="2" fill="#fafafa"/>
-      <text x="476" y="53" fill="rgba(10,10,10,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASE III — HIERARCHICAL</text>
+      <rect x="456" y="40" width="368" height="312" rx="8" fill="rgba(242,242,242,0.02)" stroke="rgba(242,242,242,0.10)" stroke-width="0.8"/>
+      <rect x="472" y="44" width="152" height="12" rx="2" fill="#020202"/>
+      <text x="476" y="53" fill="rgba(242,242,242,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASE III — HIERARCHICAL</text>
 
-      <rect x="456" y="384" width="368" height="168" rx="8" fill="rgba(10,10,10,0.02)" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
-      <rect x="472" y="388" width="144" height="12" rx="2" fill="#fafafa"/>
-      <text x="476" y="397" fill="rgba(10,10,10,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASE II — NODAL &amp; GRID</text>
+      <rect x="456" y="384" width="368" height="168" rx="8" fill="rgba(242,242,242,0.02)" stroke="rgba(242,242,242,0.10)" stroke-width="0.8"/>
+      <rect x="472" y="388" width="144" height="12" rx="2" fill="#020202"/>
+      <text x="476" y="397" fill="rgba(242,242,242,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASE II — NODAL &amp; GRID</text>
 
-      <rect x="872" y="40" width="560" height="312" rx="8" fill="rgba(10,10,10,0.02)" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
-      <rect x="888" y="44" width="264" height="12" rx="2" fill="#fafafa"/>
-      <text x="892" y="53" fill="rgba(10,10,10,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASES IV–V — RELATIONAL &amp; DECISION-SPACE</text>
+      <rect x="872" y="40" width="560" height="312" rx="8" fill="rgba(242,242,242,0.02)" stroke="rgba(242,242,242,0.10)" stroke-width="0.8"/>
+      <rect x="888" y="44" width="264" height="12" rx="2" fill="#020202"/>
+      <text x="892" y="53" fill="rgba(242,242,242,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASES IV–V — RELATIONAL &amp; DECISION-SPACE</text>
 
       <!-- ============ arrows (before boxes) ============ -->
       <!-- same-row horizontals -->
-      <line x1="200" y1="168" x2="248" y2="168" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 3 → 4 -->
-      <line x1="200" y1="240" x2="248" y2="240" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 6 → 7 -->
-      <line x1="200" y1="312" x2="248" y2="312" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 1 → 2 -->
-      <line x1="616" y1="440" x2="664" y2="440" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 8 → 9 -->
-      <line x1="1032" y1="96" x2="1080" y2="96" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 16 → 18 -->
-      <line x1="1224" y1="240" x2="1272" y2="240" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 21 → 22 -->
-      <line x1="1224" y1="312" x2="1272" y2="312" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 23 → 24 -->
-      <line x1="616" y1="84" x2="888" y2="84" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>     <!-- 11 → 16 -->
-      <line x1="616" y1="312" x2="888" y2="312" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 12 → 17 -->
+      <line x1="200" y1="168" x2="248" y2="168" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 3 → 4 -->
+      <line x1="200" y1="240" x2="248" y2="240" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 6 → 7 -->
+      <line x1="200" y1="312" x2="248" y2="312" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 1 → 2 -->
+      <line x1="616" y1="440" x2="664" y2="440" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 8 → 9 -->
+      <line x1="1032" y1="96" x2="1080" y2="96" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 16 → 18 -->
+      <line x1="1224" y1="240" x2="1272" y2="240" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/> <!-- 21 → 22 -->
+      <line x1="1224" y1="312" x2="1272" y2="312" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/> <!-- 23 → 24 -->
+      <line x1="616" y1="84" x2="888" y2="84" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>     <!-- 11 → 16 -->
+      <line x1="616" y1="312" x2="888" y2="312" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 12 → 17 -->
       <!-- same-column verticals -->
-      <line x1="544" y1="120" x2="544" y2="144" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 11 → 13 -->
-      <line x1="960" y1="120" x2="960" y2="144" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 16 → 19 -->
-      <line x1="1152" y1="120" x2="1152" y2="144" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 18 → 20 -->
-      <line x1="1152" y1="192" x2="1152" y2="216" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 20 → 21 -->
-      <line x1="1152" y1="264" x2="1152" y2="288" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 21 → 23 -->
+      <line x1="544" y1="120" x2="544" y2="144" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 11 → 13 -->
+      <line x1="960" y1="120" x2="960" y2="144" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 16 → 19 -->
+      <line x1="1152" y1="120" x2="1152" y2="144" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/> <!-- 18 → 20 -->
+      <line x1="1152" y1="192" x2="1152" y2="216" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/> <!-- 20 → 21 -->
+      <line x1="1152" y1="264" x2="1152" y2="288" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/> <!-- 21 → 23 -->
       <!-- rounded right-angle elbows -->
-      <path d="M200,96 H416 Q424,96 424,104 V160 Q424,168 432,168 H472" fill="none" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>          <!-- 5 → 13 -->
-      <path d="M616,96 H640 Q648,96 648,104 V160 Q648,168 656,168 H664" fill="none" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>          <!-- 11 → 14 -->
-      <path d="M616,108 H624 Q632,108 632,116 V232 Q632,240 640,240 H664" fill="none" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>        <!-- 11 → 15 -->
-      <path d="M392,184 H432 Q440,184 440,192 V504 Q440,512 448,512 H472" fill="none" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>        <!-- 4 → 10 -->
-      <path d="M128,336 V560 Q128,568 136,568 H728 Q736,568 736,560 V464" fill="none" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>        <!-- 1 → 9 -->
+      <path d="M200,96 H416 Q424,96 424,104 V160 Q424,168 432,168 H472" fill="none" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>          <!-- 5 → 13 -->
+      <path d="M616,96 H640 Q648,96 648,104 V160 Q648,168 656,168 H664" fill="none" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>          <!-- 11 → 14 -->
+      <path d="M616,108 H624 Q632,108 632,116 V232 Q632,240 640,240 H664" fill="none" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>        <!-- 11 → 15 -->
+      <path d="M392,184 H432 Q440,184 440,192 V504 Q440,512 448,512 H472" fill="none" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>        <!-- 4 → 10 -->
+      <path d="M128,336 V560 Q128,568 136,568 H728 Q736,568 736,560 V464" fill="none" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>        <!-- 1 → 9 -->
 
       <!-- ============ nodes ============ -->
       <!-- 05 Binary Search — entry -->
-      <rect x="56" y="72" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="56" y="72" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
-      <rect x="64" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="76" y="87" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">05</text>
-      <text x="128" y="104" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Binary Search</text>
+      <rect x="56" y="72" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="56" y="72" width="144" height="48" rx="6" fill="rgba(152,152,152,0.10)" stroke="#6f6f6f" stroke-width="1"/>
+      <rect x="64" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="76" y="87" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">05</text>
+      <text x="128" y="104" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Binary Search</text>
 
       <!-- 03 Two Pointers — entry -->
-      <rect x="56" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="56" y="144" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
-      <rect x="64" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="76" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">03</text>
-      <text x="128" y="176" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Two Pointers</text>
+      <rect x="56" y="144" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="56" y="144" width="144" height="48" rx="6" fill="rgba(152,152,152,0.10)" stroke="#6f6f6f" stroke-width="1"/>
+      <rect x="64" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="76" y="159" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">03</text>
+      <text x="128" y="176" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Two Pointers</text>
 
       <!-- 04 Sliding Window -->
-      <rect x="248" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="248" y="144" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="256" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="268" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">04</text>
-      <text x="320" y="176" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Sliding Window</text>
+      <rect x="248" y="144" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="248" y="144" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="256" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="268" y="159" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">04</text>
+      <text x="320" y="176" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Sliding Window</text>
 
       <!-- 06 Stack — entry -->
-      <rect x="56" y="216" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="56" y="216" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
-      <rect x="64" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="76" y="231" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">06</text>
-      <text x="128" y="248" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Stack</text>
+      <rect x="56" y="216" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="56" y="216" width="144" height="48" rx="6" fill="rgba(152,152,152,0.10)" stroke="#6f6f6f" stroke-width="1"/>
+      <rect x="64" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="76" y="231" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">06</text>
+      <text x="128" y="248" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Stack</text>
 
       <!-- 07 Monotonic Stack -->
-      <rect x="248" y="216" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="248" y="216" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="256" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="268" y="231" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">07</text>
-      <text x="320" y="248" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Monotonic Stack</text>
+      <rect x="248" y="216" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="248" y="216" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="256" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="268" y="231" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">07</text>
+      <text x="320" y="248" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Monotonic Stack</text>
 
       <!-- 01 Hash-Based Lookup — entry -->
-      <rect x="56" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="56" y="288" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
-      <rect x="64" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="76" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">01</text>
-      <text x="128" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Hash Lookup</text>
+      <rect x="56" y="288" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="56" y="288" width="144" height="48" rx="6" fill="rgba(152,152,152,0.10)" stroke="#6f6f6f" stroke-width="1"/>
+      <rect x="64" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="76" y="303" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">01</text>
+      <text x="128" y="320" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Hash Lookup</text>
 
       <!-- 02 Prefix Sum -->
-      <rect x="248" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="248" y="288" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="256" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="268" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">02</text>
-      <text x="320" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Prefix Sum</text>
+      <rect x="248" y="288" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="248" y="288" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="256" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="268" y="303" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">02</text>
+      <text x="320" y="320" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Prefix Sum</text>
 
       <!-- 11 Tree DFS — FOCAL -->
-      <rect x="472" y="72" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="472" y="72" width="144" height="48" rx="6" fill="rgba(35,137,226,0.08)" stroke="#2389e2" stroke-width="1.2"/>
-      <rect x="480" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(35,137,226,0.50)" stroke-width="0.8"/>
-      <text x="492" y="87" fill="#2389e2" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">11</text>
-      <text x="544" y="104" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Tree DFS</text>
+      <rect x="472" y="72" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="472" y="72" width="144" height="48" rx="6" fill="rgba(68,157,240,0.12)" stroke="#449df0" stroke-width="1.2"/>
+      <rect x="480" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(68,157,240,0.50)" stroke-width="0.8"/>
+      <text x="492" y="87" fill="#449df0" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">11</text>
+      <text x="544" y="104" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Tree DFS</text>
 
       <!-- 13 Binary Search Tree -->
-      <rect x="472" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="472" y="144" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="480" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="492" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">13</text>
-      <text x="544" y="176" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Binary Search Tree</text>
+      <rect x="472" y="144" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="472" y="144" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="480" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="492" y="159" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">13</text>
+      <text x="544" y="176" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Binary Search Tree</text>
 
       <!-- 14 Heap -->
-      <rect x="664" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="664" y="144" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="672" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="684" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">14</text>
-      <text x="736" y="170" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Heap</text>
-      <text x="736" y="184" fill="#6f6f6f" font-size="9" font-family="'IBM Plex Mono', monospace" text-anchor="middle">priority queue</text>
+      <rect x="664" y="144" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="664" y="144" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="672" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="684" y="159" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">14</text>
+      <text x="736" y="170" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Heap</text>
+      <text x="736" y="184" fill="#989898" font-size="9" font-family="'IBM Plex Mono', monospace" text-anchor="middle">priority queue</text>
 
       <!-- 15 Trie -->
-      <rect x="664" y="216" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="664" y="216" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="672" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="684" y="231" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">15</text>
-      <text x="736" y="248" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Trie</text>
+      <rect x="664" y="216" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="664" y="216" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="672" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="684" y="231" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">15</text>
+      <text x="736" y="248" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Trie</text>
 
       <!-- 12 Tree BFS — entry -->
-      <rect x="472" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="472" y="288" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
-      <rect x="480" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="492" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">12</text>
-      <text x="544" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Tree BFS</text>
+      <rect x="472" y="288" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="472" y="288" width="144" height="48" rx="6" fill="rgba(152,152,152,0.10)" stroke="#6f6f6f" stroke-width="1"/>
+      <rect x="480" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="492" y="303" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">12</text>
+      <text x="544" y="320" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Tree BFS</text>
 
       <!-- 08 Linked List — entry -->
-      <rect x="472" y="416" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="472" y="416" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
-      <rect x="480" y="422" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="492" y="431" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">08</text>
-      <text x="544" y="448" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Linked List</text>
+      <rect x="472" y="416" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="472" y="416" width="144" height="48" rx="6" fill="rgba(152,152,152,0.10)" stroke="#6f6f6f" stroke-width="1"/>
+      <rect x="480" y="422" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="492" y="431" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">08</text>
+      <text x="544" y="448" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Linked List</text>
 
       <!-- 09 Hybrid Structures -->
-      <rect x="664" y="416" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="664" y="416" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="672" y="422" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="684" y="431" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">09</text>
-      <text x="736" y="448" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Hybrid Structures</text>
+      <rect x="664" y="416" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="664" y="416" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="672" y="422" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="684" y="431" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">09</text>
+      <text x="736" y="448" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Hybrid Structures</text>
 
       <!-- 10 Matrix Index Math -->
-      <rect x="472" y="488" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="472" y="488" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="480" y="494" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="492" y="503" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">10</text>
-      <text x="544" y="520" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Matrix Index Math</text>
+      <rect x="472" y="488" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="472" y="488" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="480" y="494" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="492" y="503" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">10</text>
+      <text x="544" y="520" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Matrix Index Math</text>
 
       <!-- 16 Graph DFS -->
-      <rect x="888" y="72" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="888" y="72" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="896" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="908" y="87" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">16</text>
-      <text x="960" y="104" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Graph DFS</text>
+      <rect x="888" y="72" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="888" y="72" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="896" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="908" y="87" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">16</text>
+      <text x="960" y="104" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Graph DFS</text>
 
       <!-- 18 Topological Sort -->
-      <rect x="1080" y="72" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="1080" y="72" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="1088" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="1100" y="87" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">18</text>
-      <text x="1152" y="104" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Topological Sort</text>
+      <rect x="1080" y="72" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="1080" y="72" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="1088" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="1100" y="87" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">18</text>
+      <text x="1152" y="104" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Topological Sort</text>
 
       <!-- 19 Union-Find -->
-      <rect x="888" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="888" y="144" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="896" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="908" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">19</text>
-      <text x="960" y="176" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Union-Find</text>
+      <rect x="888" y="144" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="888" y="144" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="896" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="908" y="159" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">19</text>
+      <text x="960" y="176" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Union-Find</text>
 
       <!-- 20 Backtracking -->
-      <rect x="1080" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="1080" y="144" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="1088" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="1100" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">20</text>
-      <text x="1152" y="176" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Backtracking</text>
+      <rect x="1080" y="144" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="1080" y="144" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="1088" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="1100" y="159" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">20</text>
+      <text x="1152" y="176" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Backtracking</text>
 
       <!-- 21 1-D DP — FOCAL -->
-      <rect x="1080" y="216" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="1080" y="216" width="144" height="48" rx="6" fill="rgba(35,137,226,0.08)" stroke="#2389e2" stroke-width="1.2"/>
-      <rect x="1088" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(35,137,226,0.50)" stroke-width="0.8"/>
-      <text x="1100" y="231" fill="#2389e2" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">21</text>
-      <text x="1152" y="242" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">1-D DP</text>
-      <text x="1152" y="256" fill="#6f6f6f" font-size="9" font-family="'IBM Plex Mono', monospace" text-anchor="middle">dynamic programming</text>
+      <rect x="1080" y="216" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="1080" y="216" width="144" height="48" rx="6" fill="rgba(68,157,240,0.12)" stroke="#449df0" stroke-width="1.2"/>
+      <rect x="1088" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(68,157,240,0.50)" stroke-width="0.8"/>
+      <text x="1100" y="231" fill="#449df0" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">21</text>
+      <text x="1152" y="242" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">1-D DP</text>
+      <text x="1152" y="256" fill="#989898" font-size="9" font-family="'IBM Plex Mono', monospace" text-anchor="middle">dynamic programming</text>
 
       <!-- 22 Multi-D / Grid DP -->
-      <rect x="1272" y="216" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="1272" y="216" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="1280" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="1292" y="231" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">22</text>
-      <text x="1344" y="242" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Multi-D / Grid DP</text>
+      <rect x="1272" y="216" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="1272" y="216" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="1280" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="1292" y="231" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">22</text>
+      <text x="1344" y="242" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Multi-D / Grid DP</text>
 
       <!-- 17 Graph BFS -->
-      <rect x="888" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="888" y="288" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="896" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="908" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">17</text>
-      <text x="960" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Graph BFS</text>
+      <rect x="888" y="288" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="888" y="288" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="896" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="908" y="303" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">17</text>
+      <text x="960" y="320" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Graph BFS</text>
 
       <!-- 23 Greedy -->
-      <rect x="1080" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="1080" y="288" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="1088" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="1100" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">23</text>
-      <text x="1152" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Greedy</text>
+      <rect x="1080" y="288" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="1080" y="288" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="1088" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="1100" y="303" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">23</text>
+      <text x="1152" y="320" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Greedy</text>
 
       <!-- 24 Intervals -->
-      <rect x="1272" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="1272" y="288" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="1280" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="1292" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">24</text>
-      <text x="1344" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Intervals</text>
+      <rect x="1272" y="288" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="1272" y="288" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="1280" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="1292" y="303" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">24</text>
+      <text x="1344" y="320" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Intervals</text>
 
       <!-- ============ legend ============ -->
-      <line x1="40" y1="600" x2="1432" y2="600" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
-      <text x="40" y="620" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">LEGEND</text>
+      <line x1="40" y1="600" x2="1432" y2="600" stroke="rgba(242,242,242,0.10)" stroke-width="0.8"/>
+      <text x="40" y="620" fill="#989898" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">LEGEND</text>
 
-      <rect x="160" y="608" width="20" height="12" rx="2" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
-      <text x="188" y="618" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">ENTRY — NO PREREQS</text>
+      <rect x="160" y="608" width="20" height="12" rx="2" fill="rgba(152,152,152,0.10)" stroke="#6f6f6f" stroke-width="1"/>
+      <text x="188" y="618" fill="#989898" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">ENTRY — NO PREREQS</text>
 
-      <rect x="360" y="608" width="20" height="12" rx="2" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <text x="388" y="618" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">TOPIC</text>
+      <rect x="360" y="608" width="20" height="12" rx="2" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <text x="388" y="618" fill="#989898" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">TOPIC</text>
 
-      <rect x="480" y="608" width="20" height="12" rx="2" fill="rgba(35,137,226,0.08)" stroke="#2389e2" stroke-width="1.2"/>
-      <text x="508" y="618" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">FOCAL HUB</text>
+      <rect x="480" y="608" width="20" height="12" rx="2" fill="rgba(68,157,240,0.12)" stroke="#449df0" stroke-width="1.2"/>
+      <text x="508" y="618" fill="#989898" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">FOCAL HUB</text>
 
-      <line x1="624" y1="614" x2="656" y2="614" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>
-      <text x="668" y="618" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">BUILDS ON</text>
+      <line x1="624" y1="614" x2="656" y2="614" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>
+      <text x="668" y="618" fill="#989898" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">BUILDS ON</text>
 
-      <rect x="792" y="608" width="20" height="12" rx="2" fill="rgba(10,10,10,0.02)" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
-      <text x="820" y="618" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">PHASE ZONE</text>
+      <rect x="792" y="608" width="20" height="12" rx="2" fill="rgba(242,242,242,0.02)" stroke="rgba(242,242,242,0.10)" stroke-width="0.8"/>
+      <text x="820" y="618" fill="#989898" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">PHASE ZONE</text>
     </svg>
   </div>
 </body>
diff --git a/.github/assets/dependency-spine.svg b/.github/assets/dependency-spine.svg
index 0214400..1eb30df 100644
--- a/.github/assets/dependency-spine.svg
+++ b/.github/assets/dependency-spine.svg
@@ -4,241 +4,241 @@
       <desc id="dependency-spine-desc">Dependency graph of 24 LeetCode study topics across five phases, showing which topics build on which, with Tree DFS and 1-D dynamic programming as the two central hubs.</desc>
       <defs>
         <style>@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Inter:wght@400;500;600&amp;family=IBM+Plex+Mono:wght@400;500;600&amp;display=swap');</style>
-        <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#6f6f6f"/></marker>
-        <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#2389e2"/></marker>
-        <marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#1a6bb8"/></marker>
+        <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#989898"/></marker>
+        <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#449df0"/></marker>
+        <marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#6ab0f5"/></marker>
       </defs>
 
-      <rect width="100%" height="100%" fill="#fafafa"/>
+      <rect width="100%" height="100%" fill="#020202"/>
 
       <!-- ============ zones (painted first) ============ -->
-      <rect x="40" y="40" width="368" height="312" rx="8" fill="rgba(10,10,10,0.02)" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
-      <rect x="56" y="44" width="168" height="12" rx="2" fill="#fafafa"/>
-      <text x="60" y="53" fill="rgba(10,10,10,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASE I — LINEAR STRUCTURES</text>
+      <rect x="40" y="40" width="368" height="312" rx="8" fill="rgba(242,242,242,0.02)" stroke="rgba(242,242,242,0.10)" stroke-width="0.8"/>
+      <rect x="56" y="44" width="168" height="12" rx="2" fill="#020202"/>
+      <text x="60" y="53" fill="rgba(242,242,242,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASE I — LINEAR STRUCTURES</text>
 
-      <rect x="456" y="40" width="368" height="312" rx="8" fill="rgba(10,10,10,0.02)" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
-      <rect x="472" y="44" width="152" height="12" rx="2" fill="#fafafa"/>
-      <text x="476" y="53" fill="rgba(10,10,10,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASE III — HIERARCHICAL</text>
+      <rect x="456" y="40" width="368" height="312" rx="8" fill="rgba(242,242,242,0.02)" stroke="rgba(242,242,242,0.10)" stroke-width="0.8"/>
+      <rect x="472" y="44" width="152" height="12" rx="2" fill="#020202"/>
+      <text x="476" y="53" fill="rgba(242,242,242,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASE III — HIERARCHICAL</text>
 
-      <rect x="456" y="384" width="368" height="168" rx="8" fill="rgba(10,10,10,0.02)" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
-      <rect x="472" y="388" width="144" height="12" rx="2" fill="#fafafa"/>
-      <text x="476" y="397" fill="rgba(10,10,10,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASE II — NODAL &amp; GRID</text>
+      <rect x="456" y="384" width="368" height="168" rx="8" fill="rgba(242,242,242,0.02)" stroke="rgba(242,242,242,0.10)" stroke-width="0.8"/>
+      <rect x="472" y="388" width="144" height="12" rx="2" fill="#020202"/>
+      <text x="476" y="397" fill="rgba(242,242,242,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASE II — NODAL &amp; GRID</text>
 
-      <rect x="872" y="40" width="560" height="312" rx="8" fill="rgba(10,10,10,0.02)" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
-      <rect x="888" y="44" width="264" height="12" rx="2" fill="#fafafa"/>
-      <text x="892" y="53" fill="rgba(10,10,10,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASES IV–V — RELATIONAL &amp; DECISION-SPACE</text>
+      <rect x="872" y="40" width="560" height="312" rx="8" fill="rgba(242,242,242,0.02)" stroke="rgba(242,242,242,0.10)" stroke-width="0.8"/>
+      <rect x="888" y="44" width="264" height="12" rx="2" fill="#020202"/>
+      <text x="892" y="53" fill="rgba(242,242,242,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASES IV–V — RELATIONAL &amp; DECISION-SPACE</text>
 
       <!-- ============ arrows (before boxes) ============ -->
       <!-- same-row horizontals -->
-      <line x1="200" y1="168" x2="248" y2="168" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 3 → 4 -->
-      <line x1="200" y1="240" x2="248" y2="240" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 6 → 7 -->
-      <line x1="200" y1="312" x2="248" y2="312" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 1 → 2 -->
-      <line x1="616" y1="440" x2="664" y2="440" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 8 → 9 -->
-      <line x1="1032" y1="96" x2="1080" y2="96" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 16 → 18 -->
-      <line x1="1224" y1="240" x2="1272" y2="240" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 21 → 22 -->
-      <line x1="1224" y1="312" x2="1272" y2="312" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 23 → 24 -->
-      <line x1="616" y1="84" x2="888" y2="84" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>     <!-- 11 → 16 -->
-      <line x1="616" y1="312" x2="888" y2="312" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 12 → 17 -->
+      <line x1="200" y1="168" x2="248" y2="168" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 3 → 4 -->
+      <line x1="200" y1="240" x2="248" y2="240" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 6 → 7 -->
+      <line x1="200" y1="312" x2="248" y2="312" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 1 → 2 -->
+      <line x1="616" y1="440" x2="664" y2="440" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 8 → 9 -->
+      <line x1="1032" y1="96" x2="1080" y2="96" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 16 → 18 -->
+      <line x1="1224" y1="240" x2="1272" y2="240" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/> <!-- 21 → 22 -->
+      <line x1="1224" y1="312" x2="1272" y2="312" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/> <!-- 23 → 24 -->
+      <line x1="616" y1="84" x2="888" y2="84" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>     <!-- 11 → 16 -->
+      <line x1="616" y1="312" x2="888" y2="312" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 12 → 17 -->
       <!-- same-column verticals -->
-      <line x1="544" y1="120" x2="544" y2="144" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 11 → 13 -->
-      <line x1="960" y1="120" x2="960" y2="144" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 16 → 19 -->
-      <line x1="1152" y1="120" x2="1152" y2="144" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 18 → 20 -->
-      <line x1="1152" y1="192" x2="1152" y2="216" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 20 → 21 -->
-      <line x1="1152" y1="264" x2="1152" y2="288" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 21 → 23 -->
+      <line x1="544" y1="120" x2="544" y2="144" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 11 → 13 -->
+      <line x1="960" y1="120" x2="960" y2="144" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>   <!-- 16 → 19 -->
+      <line x1="1152" y1="120" x2="1152" y2="144" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/> <!-- 18 → 20 -->
+      <line x1="1152" y1="192" x2="1152" y2="216" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/> <!-- 20 → 21 -->
+      <line x1="1152" y1="264" x2="1152" y2="288" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/> <!-- 21 → 23 -->
       <!-- rounded right-angle elbows -->
-      <path d="M200,96 H416 Q424,96 424,104 V160 Q424,168 432,168 H472" fill="none" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>          <!-- 5 → 13 -->
-      <path d="M616,96 H640 Q648,96 648,104 V160 Q648,168 656,168 H664" fill="none" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>          <!-- 11 → 14 -->
-      <path d="M616,108 H624 Q632,108 632,116 V232 Q632,240 640,240 H664" fill="none" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>        <!-- 11 → 15 -->
-      <path d="M392,184 H432 Q440,184 440,192 V504 Q440,512 448,512 H472" fill="none" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>        <!-- 4 → 10 -->
-      <path d="M128,336 V560 Q128,568 136,568 H728 Q736,568 736,560 V464" fill="none" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>        <!-- 1 → 9 -->
+      <path d="M200,96 H416 Q424,96 424,104 V160 Q424,168 432,168 H472" fill="none" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>          <!-- 5 → 13 -->
+      <path d="M616,96 H640 Q648,96 648,104 V160 Q648,168 656,168 H664" fill="none" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>          <!-- 11 → 14 -->
+      <path d="M616,108 H624 Q632,108 632,116 V232 Q632,240 640,240 H664" fill="none" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>        <!-- 11 → 15 -->
+      <path d="M392,184 H432 Q440,184 440,192 V504 Q440,512 448,512 H472" fill="none" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>        <!-- 4 → 10 -->
+      <path d="M128,336 V560 Q128,568 136,568 H728 Q736,568 736,560 V464" fill="none" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>        <!-- 1 → 9 -->
 
       <!-- ============ nodes ============ -->
       <!-- 05 Binary Search — entry -->
-      <rect x="56" y="72" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="56" y="72" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
-      <rect x="64" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="76" y="87" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">05</text>
-      <text x="128" y="104" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Binary Search</text>
+      <rect x="56" y="72" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="56" y="72" width="144" height="48" rx="6" fill="rgba(152,152,152,0.10)" stroke="#6f6f6f" stroke-width="1"/>
+      <rect x="64" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="76" y="87" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">05</text>
+      <text x="128" y="104" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Binary Search</text>
 
       <!-- 03 Two Pointers — entry -->
-      <rect x="56" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="56" y="144" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
-      <rect x="64" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="76" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">03</text>
-      <text x="128" y="176" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Two Pointers</text>
+      <rect x="56" y="144" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="56" y="144" width="144" height="48" rx="6" fill="rgba(152,152,152,0.10)" stroke="#6f6f6f" stroke-width="1"/>
+      <rect x="64" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="76" y="159" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">03</text>
+      <text x="128" y="176" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Two Pointers</text>
 
       <!-- 04 Sliding Window -->
-      <rect x="248" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="248" y="144" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="256" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="268" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">04</text>
-      <text x="320" y="176" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Sliding Window</text>
+      <rect x="248" y="144" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="248" y="144" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="256" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="268" y="159" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">04</text>
+      <text x="320" y="176" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Sliding Window</text>
 
       <!-- 06 Stack — entry -->
-      <rect x="56" y="216" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="56" y="216" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
-      <rect x="64" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="76" y="231" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">06</text>
-      <text x="128" y="248" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Stack</text>
+      <rect x="56" y="216" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="56" y="216" width="144" height="48" rx="6" fill="rgba(152,152,152,0.10)" stroke="#6f6f6f" stroke-width="1"/>
+      <rect x="64" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="76" y="231" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">06</text>
+      <text x="128" y="248" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Stack</text>
 
       <!-- 07 Monotonic Stack -->
-      <rect x="248" y="216" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="248" y="216" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="256" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="268" y="231" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">07</text>
-      <text x="320" y="248" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Monotonic Stack</text>
+      <rect x="248" y="216" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="248" y="216" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="256" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="268" y="231" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">07</text>
+      <text x="320" y="248" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Monotonic Stack</text>
 
       <!-- 01 Hash-Based Lookup — entry -->
-      <rect x="56" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="56" y="288" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
-      <rect x="64" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="76" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">01</text>
-      <text x="128" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Hash Lookup</text>
+      <rect x="56" y="288" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="56" y="288" width="144" height="48" rx="6" fill="rgba(152,152,152,0.10)" stroke="#6f6f6f" stroke-width="1"/>
+      <rect x="64" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="76" y="303" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">01</text>
+      <text x="128" y="320" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Hash Lookup</text>
 
       <!-- 02 Prefix Sum -->
-      <rect x="248" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="248" y="288" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="256" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="268" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">02</text>
-      <text x="320" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Prefix Sum</text>
+      <rect x="248" y="288" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="248" y="288" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="256" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="268" y="303" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">02</text>
+      <text x="320" y="320" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Prefix Sum</text>
 
       <!-- 11 Tree DFS — FOCAL -->
-      <rect x="472" y="72" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="472" y="72" width="144" height="48" rx="6" fill="rgba(35,137,226,0.08)" stroke="#2389e2" stroke-width="1.2"/>
-      <rect x="480" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(35,137,226,0.50)" stroke-width="0.8"/>
-      <text x="492" y="87" fill="#2389e2" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">11</text>
-      <text x="544" y="104" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Tree DFS</text>
+      <rect x="472" y="72" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="472" y="72" width="144" height="48" rx="6" fill="rgba(68,157,240,0.12)" stroke="#449df0" stroke-width="1.2"/>
+      <rect x="480" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(68,157,240,0.50)" stroke-width="0.8"/>
+      <text x="492" y="87" fill="#449df0" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">11</text>
+      <text x="544" y="104" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Tree DFS</text>
 
       <!-- 13 Binary Search Tree -->
-      <rect x="472" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="472" y="144" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="480" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="492" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">13</text>
-      <text x="544" y="176" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Binary Search Tree</text>
+      <rect x="472" y="144" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="472" y="144" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="480" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="492" y="159" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">13</text>
+      <text x="544" y="176" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Binary Search Tree</text>
 
       <!-- 14 Heap -->
-      <rect x="664" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="664" y="144" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="672" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="684" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">14</text>
-      <text x="736" y="170" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Heap</text>
-      <text x="736" y="184" fill="#6f6f6f" font-size="9" font-family="'IBM Plex Mono', monospace" text-anchor="middle">priority queue</text>
+      <rect x="664" y="144" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="664" y="144" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="672" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="684" y="159" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">14</text>
+      <text x="736" y="170" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Heap</text>
+      <text x="736" y="184" fill="#989898" font-size="9" font-family="'IBM Plex Mono', monospace" text-anchor="middle">priority queue</text>
 
       <!-- 15 Trie -->
-      <rect x="664" y="216" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="664" y="216" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="672" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="684" y="231" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">15</text>
-      <text x="736" y="248" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Trie</text>
+      <rect x="664" y="216" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="664" y="216" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="672" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="684" y="231" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">15</text>
+      <text x="736" y="248" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Trie</text>
 
       <!-- 12 Tree BFS — entry -->
-      <rect x="472" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="472" y="288" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
-      <rect x="480" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="492" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">12</text>
-      <text x="544" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Tree BFS</text>
+      <rect x="472" y="288" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="472" y="288" width="144" height="48" rx="6" fill="rgba(152,152,152,0.10)" stroke="#6f6f6f" stroke-width="1"/>
+      <rect x="480" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="492" y="303" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">12</text>
+      <text x="544" y="320" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Tree BFS</text>
 
       <!-- 08 Linked List — entry -->
-      <rect x="472" y="416" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="472" y="416" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
-      <rect x="480" y="422" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="492" y="431" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">08</text>
-      <text x="544" y="448" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Linked List</text>
+      <rect x="472" y="416" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="472" y="416" width="144" height="48" rx="6" fill="rgba(152,152,152,0.10)" stroke="#6f6f6f" stroke-width="1"/>
+      <rect x="480" y="422" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="492" y="431" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">08</text>
+      <text x="544" y="448" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Linked List</text>
 
       <!-- 09 Hybrid Structures -->
-      <rect x="664" y="416" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="664" y="416" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="672" y="422" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="684" y="431" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">09</text>
-      <text x="736" y="448" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Hybrid Structures</text>
+      <rect x="664" y="416" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="664" y="416" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="672" y="422" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="684" y="431" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">09</text>
+      <text x="736" y="448" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Hybrid Structures</text>
 
       <!-- 10 Matrix Index Math -->
-      <rect x="472" y="488" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="472" y="488" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="480" y="494" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="492" y="503" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">10</text>
-      <text x="544" y="520" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Matrix Index Math</text>
+      <rect x="472" y="488" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="472" y="488" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="480" y="494" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="492" y="503" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">10</text>
+      <text x="544" y="520" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Matrix Index Math</text>
 
       <!-- 16 Graph DFS -->
-      <rect x="888" y="72" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="888" y="72" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="896" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="908" y="87" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">16</text>
-      <text x="960" y="104" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Graph DFS</text>
+      <rect x="888" y="72" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="888" y="72" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="896" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="908" y="87" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">16</text>
+      <text x="960" y="104" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Graph DFS</text>
 
       <!-- 18 Topological Sort -->
-      <rect x="1080" y="72" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="1080" y="72" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="1088" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="1100" y="87" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">18</text>
-      <text x="1152" y="104" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Topological Sort</text>
+      <rect x="1080" y="72" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="1080" y="72" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="1088" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="1100" y="87" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">18</text>
+      <text x="1152" y="104" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Topological Sort</text>
 
       <!-- 19 Union-Find -->
-      <rect x="888" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="888" y="144" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="896" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="908" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">19</text>
-      <text x="960" y="176" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Union-Find</text>
+      <rect x="888" y="144" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="888" y="144" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="896" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="908" y="159" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">19</text>
+      <text x="960" y="176" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Union-Find</text>
 
       <!-- 20 Backtracking -->
-      <rect x="1080" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="1080" y="144" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="1088" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="1100" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">20</text>
-      <text x="1152" y="176" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Backtracking</text>
+      <rect x="1080" y="144" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="1080" y="144" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="1088" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="1100" y="159" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">20</text>
+      <text x="1152" y="176" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Backtracking</text>
 
       <!-- 21 1-D DP — FOCAL -->
-      <rect x="1080" y="216" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="1080" y="216" width="144" height="48" rx="6" fill="rgba(35,137,226,0.08)" stroke="#2389e2" stroke-width="1.2"/>
-      <rect x="1088" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(35,137,226,0.50)" stroke-width="0.8"/>
-      <text x="1100" y="231" fill="#2389e2" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">21</text>
-      <text x="1152" y="242" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">1-D DP</text>
-      <text x="1152" y="256" fill="#6f6f6f" font-size="9" font-family="'IBM Plex Mono', monospace" text-anchor="middle">dynamic programming</text>
+      <rect x="1080" y="216" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="1080" y="216" width="144" height="48" rx="6" fill="rgba(68,157,240,0.12)" stroke="#449df0" stroke-width="1.2"/>
+      <rect x="1088" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(68,157,240,0.50)" stroke-width="0.8"/>
+      <text x="1100" y="231" fill="#449df0" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">21</text>
+      <text x="1152" y="242" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">1-D DP</text>
+      <text x="1152" y="256" fill="#989898" font-size="9" font-family="'IBM Plex Mono', monospace" text-anchor="middle">dynamic programming</text>
 
       <!-- 22 Multi-D / Grid DP -->
-      <rect x="1272" y="216" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="1272" y="216" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="1280" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="1292" y="231" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">22</text>
-      <text x="1344" y="242" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Multi-D / Grid DP</text>
+      <rect x="1272" y="216" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="1272" y="216" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="1280" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="1292" y="231" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">22</text>
+      <text x="1344" y="242" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Multi-D / Grid DP</text>
 
       <!-- 17 Graph BFS -->
-      <rect x="888" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="888" y="288" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="896" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="908" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">17</text>
-      <text x="960" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Graph BFS</text>
+      <rect x="888" y="288" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="888" y="288" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="896" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="908" y="303" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">17</text>
+      <text x="960" y="320" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Graph BFS</text>
 
       <!-- 23 Greedy -->
-      <rect x="1080" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="1080" y="288" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="1088" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="1100" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">23</text>
-      <text x="1152" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Greedy</text>
+      <rect x="1080" y="288" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="1080" y="288" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="1088" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="1100" y="303" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">23</text>
+      <text x="1152" y="320" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Greedy</text>
 
       <!-- 24 Intervals -->
-      <rect x="1272" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
-      <rect x="1272" y="288" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <rect x="1280" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
-      <text x="1292" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">24</text>
-      <text x="1344" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Intervals</text>
+      <rect x="1272" y="288" width="144" height="48" rx="6" fill="#020202"/>
+      <rect x="1272" y="288" width="144" height="48" rx="6" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <rect x="1280" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(242,242,242,0.30)" stroke-width="0.8"/>
+      <text x="1292" y="303" fill="#989898" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">24</text>
+      <text x="1344" y="320" fill="#f2f2f2" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Intervals</text>
 
       <!-- ============ legend ============ -->
-      <line x1="40" y1="600" x2="1432" y2="600" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
-      <text x="40" y="620" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">LEGEND</text>
+      <line x1="40" y1="600" x2="1432" y2="600" stroke="rgba(242,242,242,0.10)" stroke-width="0.8"/>
+      <text x="40" y="620" fill="#989898" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">LEGEND</text>
 
-      <rect x="160" y="608" width="20" height="12" rx="2" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
-      <text x="188" y="618" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">ENTRY — NO PREREQS</text>
+      <rect x="160" y="608" width="20" height="12" rx="2" fill="rgba(152,152,152,0.10)" stroke="#6f6f6f" stroke-width="1"/>
+      <text x="188" y="618" fill="#989898" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">ENTRY — NO PREREQS</text>
 
-      <rect x="360" y="608" width="20" height="12" rx="2" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
-      <text x="388" y="618" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">TOPIC</text>
+      <rect x="360" y="608" width="20" height="12" rx="2" fill="#0d0d0d" stroke="#f2f2f2" stroke-width="1"/>
+      <text x="388" y="618" fill="#989898" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">TOPIC</text>
 
-      <rect x="480" y="608" width="20" height="12" rx="2" fill="rgba(35,137,226,0.08)" stroke="#2389e2" stroke-width="1.2"/>
-      <text x="508" y="618" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">FOCAL HUB</text>
+      <rect x="480" y="608" width="20" height="12" rx="2" fill="rgba(68,157,240,0.12)" stroke="#449df0" stroke-width="1.2"/>
+      <text x="508" y="618" fill="#989898" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">FOCAL HUB</text>
 
-      <line x1="624" y1="614" x2="656" y2="614" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>
-      <text x="668" y="618" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">BUILDS ON</text>
+      <line x1="624" y1="614" x2="656" y2="614" stroke="#989898" stroke-width="1" marker-end="url(#arrow)"/>
+      <text x="668" y="618" fill="#989898" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">BUILDS ON</text>
 
-      <rect x="792" y="608" width="20" height="12" rx="2" fill="rgba(10,10,10,0.02)" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
-      <text x="820" y="618" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">PHASE ZONE</text>
+      <rect x="792" y="608" width="20" height="12" rx="2" fill="rgba(242,242,242,0.02)" stroke="rgba(242,242,242,0.10)" stroke-width="0.8"/>
+      <text x="820" y="618" fill="#989898" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">PHASE ZONE</text>
     </svg>