diff --git a/.github/assets/dependency-spine.html b/.github/assets/dependency-spine.html
new file mode 100644
index 0000000..f658b2b
--- /dev/null
+++ b/.github/assets/dependency-spine.html
@@ -0,0 +1,305 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>LeetCode Dependency Spine</title>
+  <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --color-paper:   #fafafa;
+      --color-ink:     #0a0a0a;
+      --color-muted:   #6f6f6f;
+      --color-accent:  #2389e2;
+      --font-sans:     'Inter', system-ui, sans-serif;
+      --font-serif:    'Instrument Serif', serif;
+      --font-mono:     'IBM Plex Mono', ui-monospace, monospace;
+    }
+
+    body {
+      font-family: var(--font-sans);
+      background: var(--color-paper);
+      color: var(--color-ink);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 3rem 2rem;
+    }
+
+    .frame { max-width: 1360px; width: 100%; }
+
+    .eyebrow {
+      font-family: var(--font-mono);
+      font-size: 0.66rem;
+      font-weight: 500;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: var(--color-muted);
+      margin-bottom: 0.5rem;
+    }
+
+    h1 {
+      font-family: var(--font-serif);
+      font-size: clamp(1.5rem, 2.4vw + 0.75rem, 2rem);
+      font-weight: 400;
+      letter-spacing: -0.02em;
+      line-height: 1.15;
+      color: var(--color-ink);
+      margin-bottom: 1.5rem;
+    }
+
+    svg { width: 100%; min-width: 900px; display: block; }
+  </style>
+</head>
+<body>
+  <div class="frame">
+    <p class="eyebrow">prdlk / leetcode · dependency spine</p>
+    <h1>How the 24 topics build on each other</h1>
+
+    <svg viewBox="0 0 1472 648" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="dependency-spine-title dependency-spine-desc">
+      <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>
+      </defs>
+
+      <rect width="100%" height="100%" fill="#fafafa"/>
+
+      <!-- ============ 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="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="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="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>
+
+      <!-- ============ 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 -->
+      <!-- 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 -->
+      <!-- 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 -->
+
+      <!-- ============ 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- ============ 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>
+
+      <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="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="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>
+
+      <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>
+
+      <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>
+    </svg>
+  </div>
+</body>
+</html>
diff --git a/.github/assets/dependency-spine.svg b/.github/assets/dependency-spine.svg
new file mode 100644
index 0000000..0214400
--- /dev/null
+++ b/.github/assets/dependency-spine.svg
@@ -0,0 +1,244 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 1472 648" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="dependency-spine-title dependency-spine-desc">
+      <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>
+        <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>
+      </defs>
+
+      <rect width="100%" height="100%" fill="#fafafa"/>
+
+      <!-- ============ 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="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="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="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>
+
+      <!-- ============ 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 -->
+      <!-- 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 -->
+      <!-- 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 -->
+
+      <!-- ============ 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- ============ 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>
+
+      <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="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="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>
+
+      <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>
+
+      <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>
+    </svg>
