docs(docs): add two‑pointer guide with decision tree and illustrations

apps/docs/content/(01-linear-structures)/two-pointers/index.mdx

@@ -3,3 +3,160 @@ title: Two Pointers
 description: 'Two indices move through the data from different positions and meet at the answer.'
 hidden: true
 ---
+
+Most interview problems in this section fall into one of four families:
+
+- **Same direction pointers**: one pointer reads, one pointer writes, or one pointer stays behind another while scanning left to right.
+- **Opposite direction pointers**: one pointer starts on the left, one on the right, and each move eliminates impossible answers.
+- **Sliding window**: the two pointers define a contiguous interval, and you maintain some property of that interval as the window expands and shrinks.
+- **Fast and slow pointers**: both pointers move through a linked structure, but at different speeds or with a fixed gap.
+
+![](../../../public/two-pointers-decision-tree.svg)
+
+## Same Direction
+
+Same-direction pointer problems usually scan from left to right, but the two pointers do different jobs.
+
+Usually:
+
+- one pointer reads the next value from the original input
+- one pointer marks where the next kept value should go
+
+Sometimes both pointers move forward together, but one pointer stays behind the other to preserve a gap or a relationship.
+
+### When this family applies
+
+
+Reach for same-direction pointers when the problem asks you to:
+
+- rewrite an array in-place
+- remove or compress elements without extra memory
+- keep only the values that satisfy some condition
+- maintain a fixed gap between two forward-moving pointers
+
+### Core Invariant
+
+The invariant in this family is usually about the prefix you have already processed.
+
+Typical invariant:
+
+> "Everything before the write pointer is already in the correct final form."
+
+That is what makes these problems feel different from opposite-direction scans. You are not searching from both sides. You are building the answer progressively as you sweep through the input.
+
+### Subtypes in this section
+
+#### 1. Compaction / Overwrite
+
+The slow pointer marks the next output position. The fast pointer scans the input. When the current value should be kept, copy it forward and advance the slow pointer.
+
+![](../../../public/same-direction-compaction.svg)
+
+#### 2. Relative Speed
+
+Both pointers move forward, but one moves twice as fast. The invariant is about their distance and how much of the structure each pointer has consumed.
+
+![](../../../public/same-direction-relative-speed.svg)
+
+#### 3. Fixed Gap
+
+Both pointers move forward while preserving a gap. The invariant is not about a rewritten prefix. It is about the distance between the pointers.
+
+![](../../../public/same-direction-fixed-gap.svg)
+
+### What changes across problems
+
+The family stays the same, but the invariant changes slightly:
+
+- in array compaction, the invariant is about the prefix being correct
+- in fast/slow midpoint problems, the invariant is about relative speed
+- in fixed-gap problems, the invariant is about distance
+
+So the unifying idea is not "both pointers move right." The unifying idea is:
+
+**"the structure to the left of the pointers already has a known meaning"**
+
+### What to watch out for
+
+Common mistakes:
+
+- Updating the write pointer before copying the current value.
+- Forgetting exactly what region is already valid.
+- Losing track of whether the invariant is about a prefix, a gap, or relative speed.
+
+As you go through the following problems, pay attention to one question:
+
+**What does the region before the slow pointer mean right now?**
+
+## Opposite Direction
+
+Opposite-direction pointer problems place one pointer on the left and one on the right, then move inward.
+
+The hard part is never the loop itself. **The hard part is justifying which pointer is safe to move.**
+
+### When this family applies
+
+Reach for opposite-direction pointers when the problem asks you to:
+
+- the input is sorted, or can be made monotonic by sorting
+- you are comparing a left choice and a right choice
+- the problem has symmetry
+- moving one side lets you eliminate a set of impossible answers
+
+### Core Invariant
+
+The invariant in this family is usually:
+
+> "All candidate answers outside the current `[left, right]` range have already been ruled out."
+
+That means each move must come with a proof. If you move a pointer without knowing why the discarded cases cannot contain the optimum, the algorithm is just guessing.
+
+### Subtypes in this section
+
+#### 1. Monotonic sum elimination
+
+
+Because the array is sorted:
+
+- if the sum is too small, moving the left pointer right is the only useful move
+- if the sum is too large, moving the right pointer left is the only useful move
+
+Sorted order gives you a monotonic rule.
+
+![](../../../public/opposite-direction-monotonic-sum.svg)
+
+#### 2. Symmetry checking
+
+Here the pointers compare mirrored positions. The movement rule is mostly "move both," except when you must skip punctuation or spaces.
+
+![](../../../public/opposite-direction-symmetry.svg)
+
+#### 3. Bottleneck elimination
+
+This one is important because it looks different from the other two. The key idea is that the shorter wall limits the area. If you keep that shorter wall and decrease the width, you cannot improve the answer. So it is safe to discard that wall.
+
+![](../../../public/opposite-direction-bottleneck.svg)
+
+### Why this is not a sliding window
+
+Opposite-direction scans do not maintain an interval property like "this window is valid."
+
+Instead, each step does one of these:
+
+- rules out sums that are too small or too large
+- checks mirrored characters
+- discards a bottleneck boundary
+
+The interval itself is just the remaining search space.
+
+### What to watch out for
+
+Common mistakes:
+
+- Using two pointers on an unsorted pair problem without first creating monotonicity.
+- Moving the taller wall in Container With Most Water without an elimination proof.
+- Calling the method sliding window just because two boundaries exist.
+
+As you read the problems in this family, keep asking:
+
+**What exact set of candidate answers did this pointer move eliminate?**

apps/docs/public/opposite-direction-bottleneck.svg

@@ -0,0 +1,41 @@
+<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background (REQUIRED) -->
+  <rect width="800" height="450" fill="#f8f9fa" rx="10"/>
+
+  <!-- Title and Subtitle -->
+  <text x="400" y="45" font-family="Arial, sans-serif" font-size="26" font-weight="bold" fill="#2c3e50" text-anchor="middle">Opposite Direction: Bottleneck Elimination</text>
+  <text x="400" y="75" font-family="Arial, sans-serif" font-size="16" fill="#7f8c8d" text-anchor="middle">Container With Most Water: discard the shorter wall.</text>
+
+  <!-- Container -->
+  <g transform="translate(150, 130)">
+    <!-- Walls -->
+    <rect x="0" y="20" width="20" height="150" fill="#3498db" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="10" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#2c3e50" text-anchor="middle">8</text>
+    <polygon points="10,180 5,190 15,190" fill="#3498db"/>
+    <text x="10" y="205" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#3498db" text-anchor="middle">L</text>
+
+    <rect x="50" y="100" width="20" height="70" fill="#94a3b8" stroke="#2c3e50" stroke-width="1"/>
+    <rect x="100" y="130" width="20" height="40" fill="#94a3b8" stroke="#2c3e50" stroke-width="1"/>
+    <rect x="150" y="40" width="20" height="130" fill="#94a3b8" stroke="#2c3e50" stroke-width="1"/>
+    <rect x="200" y="90" width="20" height="80" fill="#94a3b8" stroke="#2c3e50" stroke-width="1"/>
+    <rect x="250" y="20" width="20" height="150" fill="#94a3b8" stroke="#2c3e50" stroke-width="1"/>
+    <rect x="300" y="60" width="20" height="110" fill="#94a3b8" stroke="#2c3e50" stroke-width="1"/>
+
+    <rect x="350" y="110" width="20" height="60" fill="#ef4444" stroke="#2c3e50" stroke-width="2"/>
+    <text x="360" y="100" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#2c3e50" text-anchor="middle">3</text>
+    <polygon points="360,180 355,190 365,190" fill="#ef4444"/>
+    <text x="360" y="205" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#ef4444" text-anchor="middle">R</text>
+
+    <!-- Water -->
+    <rect x="20" y="110" width="330" height="60" fill="#3498db" fill-opacity="0.2"/>
+    
+    <!-- Rule -->
+    <g transform="translate(0, 240)">
+        <text x="185" y="0" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#2c3e50" text-anchor="middle">The bottleneck rule:</text>
+        <text x="185" y="25" font-family="Arial, sans-serif" font-size="14" fill="#7f8c8d" text-anchor="middle">Since height[R] &lt; height[L], the only way to find</text>
+        <text x="185" y="45" font-family="Arial, sans-serif" font-size="14" fill="#7f8c8d" text-anchor="middle">a larger area is to discard R and move left.</text>
+        <path d="M 370,110 Q 400,110 400,240" fill="none" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
+        <polygon points="400,240 395,230 405,230" fill="#ef4444"/>
+    </g>
+  </g>
+</svg>

apps/docs/public/opposite-direction-monotonic-sum.svg

@@ -0,0 +1,76 @@
+<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background (REQUIRED) -->
+  <rect width="800" height="450" fill="#f8f9fa" rx="10"/>
+
+  <!-- Title and Subtitle -->
+  <text x="400" y="45" font-family="Arial, sans-serif" font-size="26" font-weight="bold" fill="#2c3e50" text-anchor="middle">Opposite Direction: Monotonic Sum</text>
+  <text x="400" y="75" font-family="Arial, sans-serif" font-size="16" fill="#7f8c8d" text-anchor="middle">Two Sum Sorted: target = 16. Adjust pointers based on sum.</text>
+
+  <!-- State 1: Sum too large -->
+  <g transform="translate(100, 130)">
+    <text x="0" y="-20" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#2c3e50">1. Sum is too large (2 + 15 = 17)</text>
+    
+    <!-- Array -->
+    <g transform="translate(50, 20)">
+      <!-- Left Pointer (Blue) -->
+      <rect x="0" y="0" width="60" height="50" fill="#e3f2fd" stroke="#3498db" stroke-width="3" rx="3"/>
+      <text x="30" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#1565c0">2</text>
+      <polygon points="30,60 25,70 35,70" fill="#3498db"/>
+      <text x="30" y="85" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#3498db" text-anchor="middle">L</text>
+
+      <rect x="70" y="0" width="60" height="50" fill="#ffffff" stroke="#dee2e6" stroke-width="2" rx="3"/>
+      <text x="100" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#2c3e50">5</text>
+      
+      <rect x="140" y="0" width="60" height="50" fill="#ffffff" stroke="#dee2e6" stroke-width="2" rx="3"/>
+      <text x="170" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#2c3e50">8</text>
+
+      <rect x="210" y="0" width="60" height="50" fill="#ffffff" stroke="#dee2e6" stroke-width="2" rx="3"/>
+      <text x="240" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#2c3e50">11</text>
+
+      <!-- Right Pointer (Orange) -->
+      <rect x="280" y="0" width="60" height="50" fill="#fff7ed" stroke="#f39c12" stroke-width="3" rx="3"/>
+      <text x="310" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#8a5a00">15</text>
+      <polygon points="310,60 305,70 315,70" fill="#f39c12"/>
+      <text x="310" y="85" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#8a5a00" text-anchor="middle">R</text>
+
+      <!-- Elimination Note -->
+      <text x="400" y="32" font-family="Arial, sans-serif" font-size="14" fill="#ef4444">17 &gt; 16: R must move left.</text>
+    </g>
+  </g>
+
+  <!-- Transition -->
+  <g transform="translate(400, 260)">
+    <path d="M 0,0 L 0,30" stroke="#dee2e6" stroke-width="2" fill="none"/>
+    <text x="10" y="20" font-family="Arial, sans-serif" font-size="14" font-style="italic" fill="#7f8c8d">Move Right pointer left</text>
+  </g>
+
+  <!-- State 2: Sum too small -->
+  <g transform="translate(100, 340)">
+    <text x="0" y="-20" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#2c3e50">2. Sum is too small (2 + 11 = 13)</text>
+    
+    <!-- Array -->
+    <g transform="translate(50, 20)">
+      <rect x="0" y="0" width="60" height="50" fill="#e3f2fd" stroke="#3498db" stroke-width="3" rx="3"/>
+      <text x="30" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#1565c0">2</text>
+      <polygon points="30,60 25,70 35,70" fill="#3498db"/>
+      <text x="30" y="85" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#3498db" text-anchor="middle">L</text>
+
+      <rect x="70" y="0" width="60" height="50" fill="#ffffff" stroke="#dee2e6" stroke-width="2" rx="3"/>
+      <text x="100" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#2c3e50">5</text>
+      
+      <rect x="140" y="0" width="60" height="50" fill="#ffffff" stroke="#dee2e6" stroke-width="2" rx="3"/>
+      <text x="170" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#2c3e50">8</text>
+
+      <rect x="210" y="0" width="60" height="50" fill="#fff7ed" stroke="#f39c12" stroke-width="3" rx="3"/>
+      <text x="240" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#8a5a00">11</text>
+      <polygon points="240,60 235,70 245,70" fill="#f39c12"/>
+      <text x="240" y="85" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#8a5a00" text-anchor="middle">R</text>
+
+      <rect x="280" y="0" width="60" height="50" fill="#e5e7eb" stroke="#94a3b8" stroke-width="2" rx="3"/>
+      <text x="310" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#94a3b8">15</text>
+
+      <!-- Elimination Note -->
+      <text x="400" y="32" font-family="Arial, sans-serif" font-size="14" fill="#3498db">13 &lt; 16: L must move right.</text>
+    </g>
+  </g>
+</svg>

apps/docs/public/opposite-direction-symmetry.svg

@@ -0,0 +1,48 @@
+<svg viewBox="0 0 800 350" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background (REQUIRED) -->
+  <rect width="800" height="350" fill="#f8f9fa" rx="10"/>
+
+  <!-- Title and Subtitle -->
+  <text x="400" y="45" font-family="Arial, sans-serif" font-size="26" font-weight="bold" fill="#2c3e50" text-anchor="middle">Opposite Direction: Symmetry Checking</text>
+  <text x="400" y="75" font-family="Arial, sans-serif" font-size="16" fill="#7f8c8d" text-anchor="middle">Valid Palindrome: Comparing mirrored positions from outside in.</text>
+
+  <!-- Array -->
+  <g transform="translate(150, 150)">
+    <!-- Elements -->
+    <rect x="0" y="0" width="60" height="50" fill="#d1fae5" stroke="#10b981" stroke-width="2" rx="3"/>
+    <text x="30" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#1b5e20">r</text>
+    
+    <rect x="70" y="0" width="60" height="50" fill="#d1fae5" stroke="#10b981" stroke-width="2" rx="3"/>
+    <text x="100" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#1b5e20">a</text>
+    
+    <rect x="140" y="0" width="60" height="50" fill="#fef3c7" stroke="#f59e0b" stroke-width="3" rx="3"/>
+    <text x="170" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#2c3e50">c</text>
+    <polygon points="170,-10 165,-20 175,-20" fill="#f59e0b"/>
+    <text x="170" y="-30" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#f59e0b" text-anchor="middle">CHECK</text>
+
+    <rect x="210" y="0" width="60" height="50" fill="#fef3c7" stroke="#f59e0b" stroke-width="3" rx="3"/>
+    <text x="240" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#2c3e50">e</text>
+    <polygon points="240,-10 235,-20 245,-20" fill="#f59e0b"/>
+    <text x="240" y="-30" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#f59e0b" text-anchor="middle">CHECK</text>
+
+    <rect x="280" y="0" width="60" height="50" fill="#d1fae5" stroke="#10b981" stroke-width="2" rx="3"/>
+    <text x="310" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#1b5e20">a</text>
+    
+    <rect x="350" y="0" width="60" height="50" fill="#d1fae5" stroke="#10b981" stroke-width="2" rx="3"/>
+    <text x="380" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#1b5e20">r</text>
+
+    <!-- Pointers -->
+    <polygon points="170,60 165,70 175,70" fill="#3498db"/>
+    <text x="170" y="85" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#3498db" text-anchor="middle">L</text>
+
+    <polygon points="240,60 235,70 245,70" fill="#ef4444"/>
+    <text x="240" y="85" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#ef4444" text-anchor="middle">R</text>
+
+    <!-- Correct markings -->
+    <path d="M 30,100 L 30,110 L 380,110 L 380,100" fill="none" stroke="#10b981" stroke-width="2"/>
+    <text x="205" y="130" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#10b981" text-anchor="middle">OUTER SYMMETRY VALIDATED</text>
+  </g>
+
+  <!-- Observation -->
+  <text x="400" y="320" font-family="Arial, sans-serif" font-size="14" font-style="italic" fill="#7f8c8d" text-anchor="middle">Oops! 'c' != 'e', not a palindrome.</text>
+</svg>

apps/docs/public/same-direction-compaction.svg

@@ -0,0 +1,80 @@
+<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background (REQUIRED) -->
+  <rect width="800" height="450" fill="#f8f9fa" rx="10"/>
+
+  <!-- Title and Subtitle -->
+  <text x="400" y="45" font-family="Arial, sans-serif" font-size="26" font-weight="bold" fill="#2c3e50" text-anchor="middle">Same-Direction Pointers: Compaction</text>
+  <text x="400" y="75" font-family="Arial, sans-serif" font-size="16" fill="#7f8c8d" text-anchor="middle">Building a correct prefix while scanning the input.</text>
+
+  <!-- Before Section -->
+  <g transform="translate(150, 130)">
+    <text x="0" y="-20" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#2c3e50">1. Before copying</text>
+    
+    <!-- Array -->
+    <g transform="translate(0, 20)">
+      <!-- Correct Prefix (Green) -->
+      <rect x="0" y="0" width="60" height="50" fill="#d1fae5" stroke="#10b981" stroke-width="2" rx="3"/>
+      <text x="30" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#1b5e20">1</text>
+      
+      <rect x="70" y="0" width="60" height="50" fill="#d1fae5" stroke="#10b981" stroke-width="2" rx="3"/>
+      <text x="100" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#1b5e20">2</text>
+      
+      <!-- Write Position (Yellow) -->
+      <rect x="140" y="0" width="60" height="50" fill="#fef3c7" stroke="#f59e0b" stroke-width="3" rx="3"/>
+      <text x="170" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#8a5a00">0</text>
+      <polygon points="170,60 165,70 175,70" fill="#f59e0b"/>
+      <text x="170" y="85" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#8a5a00" text-anchor="middle">write</text>
+
+      <!-- Scanning (Blue) -->
+      <rect x="210" y="0" width="60" height="50" fill="#e3f2fd" stroke="#3498db" stroke-width="3" rx="3"/>
+      <text x="240" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#1565c0">4</text>
+      <polygon points="240,60 235,70 245,70" fill="#3498db"/>
+      <text x="240" y="85" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#1565c0" text-anchor="middle">read</text>
+
+      <rect x="280" y="0" width="60" height="50" fill="#ffffff" stroke="#dee2e6" stroke-width="2" rx="3"/>
+      <text x="310" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#2c3e50">3</text>
+
+      <!-- Prefix label -->
+      <path d="M 0,-10 L 0,-20 L 130,-20 L 130,-10" fill="none" stroke="#10b981" stroke-width="2"/>
+      <text x="65" y="-30" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#10b981" text-anchor="middle">CORRECT PREFIX</text>
+    </g>
+  </g>
+
+  <!-- Transition Label -->
+  <g transform="translate(400, 270)">
+    <path d="M 0,0 L 0,30" stroke="#dee2e6" stroke-width="2" fill="none"/>
+    <text x="10" y="20" font-family="Arial, sans-serif" font-size="14" font-style="italic" fill="#7f8c8d">Copy read value to write position</text>
+  </g>
+
+  <!-- After Section -->
+  <g transform="translate(150, 340)">
+    <text x="0" y="-20" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#2c3e50">2. After copying and advancing</text>
+    
+    <!-- Array -->
+    <g transform="translate(0, 20)">
+      <rect x="0" y="0" width="60" height="50" fill="#d1fae5" stroke="#10b981" stroke-width="2" rx="3"/>
+      <text x="30" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#1b5e20">1</text>
+      
+      <rect x="70" y="0" width="60" height="50" fill="#d1fae5" stroke="#10b981" stroke-width="2" rx="3"/>
+      <text x="100" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#1b5e20">2</text>
+      
+      <rect x="140" y="0" width="60" height="50" fill="#d1fae5" stroke="#10b981" stroke-width="2" rx="3"/>
+      <text x="170" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#1b5e20">4</text>
+      
+      <!-- New Write Position -->
+      <rect x="210" y="0" width="60" height="50" fill="#fef3c7" stroke="#f59e0b" stroke-width="3" rx="3"/>
+      <text x="240" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#8a5a00">4</text>
+      <polygon points="240,60 235,70 245,70" fill="#f59e0b"/>
+      <text x="240" y="85" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#8a5a00" text-anchor="middle">write</text>
+
+      <!-- New Scanning Position -->
+      <rect x="280" y="0" width="60" height="50" fill="#e3f2fd" stroke="#3498db" stroke-width="3" rx="3"/>
+      <text x="310" y="32" font-family="monospace" font-size="22" text-anchor="middle" fill="#1565c0">3</text>
+      <polygon points="310,60 305,70 315,70" fill="#3498db"/>
+      <text x="310" y="85" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#1565c0" text-anchor="middle">read</text>
+
+      <path d="M 0,-10 L 0,-20 L 200,-20 L 200,-10" fill="none" stroke="#10b981" stroke-width="2"/>
+      <text x="100" y="-30" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#10b981" text-anchor="middle">PREFIX GREW</text>
+    </g>
+  </g>
+</svg>

apps/docs/public/same-direction-fixed-gap.svg

@@ -0,0 +1,97 @@
+<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background (REQUIRED) -->
+  <rect width="800" height="450" fill="#f8f9fa" rx="10"/>
+
+  <!-- Title and Subtitle -->
+  <text x="400" y="45" font-family="Arial, sans-serif" font-size="26" font-weight="bold" fill="#2c3e50" text-anchor="middle">Same-Direction: Fixed Gap</text>
+  <text x="400" y="75" font-family="Arial, sans-serif" font-size="16" fill="#7f8c8d" text-anchor="middle">Maintaining a distance of N while traversing.</text>
+
+  <!-- State 1 -->
+  <g transform="translate(100, 150)">
+    <text x="0" y="-30" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#2c3e50">1. Gap established (N=2)</text>
+    
+    <!-- List -->
+    <g transform="translate(50, 20)">
+      <!-- Pointers -->
+      <polygon points="0,5 -5,-5 5,-5" fill="#3498db"/>
+      <text x="0" y="-10" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#3498db" text-anchor="middle">left</text>
+
+      <polygon points="160,5 155,-5 165,-5" fill="#f39c12"/>
+      <text x="160" y="-10" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#f39c12" text-anchor="middle">right</text>
+
+      <!-- Nodes -->
+      <circle cx="0" cy="25" r="22" fill="#e3f2fd" stroke="#3498db" stroke-width="3"/>
+      <text x="0" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">1</text>
+
+      <circle cx="80" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
+      <text x="80" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">2</text>
+
+      <circle cx="160" cy="25" r="22" fill="#fff7ed" stroke="#f39c12" stroke-width="3"/>
+      <text x="160" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">3</text>
+
+      <circle cx="240" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
+      <text x="240" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">4</text>
+
+      <circle cx="320" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
+      <text x="320" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">5</text>
+
+      <!-- Connectors -->
+      <line x1="22" y1="25" x2="58" y2="25" stroke="#94a3b8" stroke-width="2"/>
+      <line x1="102" y1="25" x2="138" y2="25" stroke="#94a3b8" stroke-width="2"/>
+      <line x1="182" y1="25" x2="218" y2="25" stroke="#94a3b8" stroke-width="2"/>
+      <line x1="262" y1="25" x2="298" y2="25" stroke="#94a3b8" stroke-width="2"/>
+
+      <!-- Gap marker -->
+      <path d="M 0,60 L 0,70 L 160,70 L 160,60" fill="none" stroke="#7f8c8d" stroke-width="2"/>
+      <text x="80" y="85" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#7f8c8d" text-anchor="middle">GAP OF 2</text>
+    </g>
+  </g>
+
+  <!-- Transition -->
+  <g transform="translate(400, 260)">
+    <path d="M 0,0 L 0,30" stroke="#dee2e6" stroke-width="2" fill="none"/>
+    <text x="10" y="20" font-family="Arial, sans-serif" font-size="14" font-style="italic" fill="#7f8c8d">Move both together</text>
+  </g>
+
+  <!-- State 2 -->
+  <g transform="translate(100, 340)">
+    <text x="0" y="-30" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#2c3e50">2. Right hits the end</text>
+    
+    <!-- List -->
+    <g transform="translate(50, 20)">
+      <!-- Pointers -->
+      <polygon points="160,5 155,-5 165,-5" fill="#3498db"/>
+      <text x="160" y="-10" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#3498db" text-anchor="middle">left</text>
+
+      <polygon points="320,5 315,-5 325,-5" fill="#f39c12"/>
+      <text x="320" y="-10" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#f39c12" text-anchor="middle">right</text>
+
+      <!-- Nodes -->
+      <circle cx="0" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
+      <text x="0" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">1</text>
+
+      <circle cx="80" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
+      <text x="80" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">2</text>
+
+      <circle cx="160" cy="25" r="22" fill="#e3f2fd" stroke="#3498db" stroke-width="3"/>
+      <text x="160" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">3</text>
+
+      <circle cx="240" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
+      <text x="240" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">4</text>
+
+      <circle cx="320" cy="25" r="22" fill="#fff7ed" stroke="#f39c12" stroke-width="3"/>
+      <text x="320" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">5</text>
+
+      <!-- Connectors -->
+      <line x1="22" y1="25" x2="58" y2="25" stroke="#94a3b8" stroke-width="2"/>
+      <line x1="102" y1="25" x2="138" y2="25" stroke="#94a3b8" stroke-width="2"/>
+      <line x1="182" y1="25" x2="218" y2="25" stroke="#94a3b8" stroke-width="2"/>
+      <line x1="262" y1="25" x2="298" y2="25" stroke="#94a3b8" stroke-width="2"/>
+
+      <!-- Gap marker -->
+      <path d="M 160,60 L 160,70 L 320,70 L 320,60" fill="none" stroke="#7f8c8d" stroke-width="2"/>
+      <text x="240" y="85" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#7f8c8d" text-anchor="middle">STILL GAP OF 2</text>
+    </g>
+    <text x="400" y="45" font-family="Arial, sans-serif" font-size="14" fill="#2c3e50">Left is now N steps from the end.</text>
+  </g>
+</svg>

apps/docs/public/same-direction-relative-speed.svg

@@ -0,0 +1,89 @@
+<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background (REQUIRED) -->
+  <rect width="800" height="450" fill="#f8f9fa" rx="10"/>
+
+  <!-- Title and Subtitle -->
+  <text x="400" y="45" font-family="Arial, sans-serif" font-size="26" font-weight="bold" fill="#2c3e50" text-anchor="middle">Same-Direction: Relative Speed</text>
+  <text x="400" y="75" font-family="Arial, sans-serif" font-size="16" fill="#7f8c8d" text-anchor="middle">Fast pointer moves at 2x speed to find the midpoint.</text>
+
+  <!-- State 1 -->
+  <g transform="translate(100, 150)">
+    <text x="0" y="-30" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#2c3e50">1. After one move</text>
+    
+    <!-- List -->
+    <g transform="translate(50, 20)">
+      <!-- Pointers -->
+      <polygon points="80,5 75,-5 85,-5" fill="#3498db"/>
+      <text x="80" y="-10" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#3498db" text-anchor="middle">slow</text>
+
+      <polygon points="160,5 155,-5 165,-5" fill="#ef4444"/>
+      <text x="160" y="-10" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#ef4444" text-anchor="middle">fast</text>
+
+      <!-- Nodes -->
+      <circle cx="0" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
+      <text x="0" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">1</text>
+
+      <circle cx="80" cy="25" r="22" fill="#e3f2fd" stroke="#3498db" stroke-width="3"/>
+      <text x="80" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">2</text>
+
+      <circle cx="160" cy="25" r="22" fill="#fee2e2" stroke="#ef4444" stroke-width="3"/>
+      <text x="160" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">3</text>
+
+      <circle cx="240" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
+      <text x="240" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">4</text>
+
+      <circle cx="320" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
+      <text x="320" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">5</text>
+
+      <!-- Connectors -->
+      <line x1="22" y1="25" x2="58" y2="25" stroke="#94a3b8" stroke-width="2"/>
+      <line x1="102" y1="25" x2="138" y2="25" stroke="#94a3b8" stroke-width="2"/>
+      <line x1="182" y1="25" x2="218" y2="25" stroke="#94a3b8" stroke-width="2"/>
+      <line x1="262" y1="25" x2="298" y2="25" stroke="#94a3b8" stroke-width="2"/>
+    </g>
+  </g>
+
+  <!-- Transition -->
+  <g transform="translate(400, 260)">
+    <path d="M 0,0 L 0,30" stroke="#dee2e6" stroke-width="2" fill="none"/>
+    <text x="10" y="20" font-family="Arial, sans-serif" font-size="14" font-style="italic" fill="#7f8c8d">Move: slow +1, fast +2</text>
+  </g>
+
+  <!-- State 2 -->
+  <g transform="translate(100, 340)">
+    <text x="0" y="-30" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#2c3e50">2. Reached the middle</text>
+    
+    <!-- List -->
+    <g transform="translate(50, 20)">
+      <!-- Pointers -->
+      <polygon points="160,5 155,-5 165,-5" fill="#3498db"/>
+      <text x="160" y="-10" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#3498db" text-anchor="middle">slow</text>
+
+      <polygon points="320,5 315,-5 325,-5" fill="#ef4444"/>
+      <text x="320" y="-10" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#ef4444" text-anchor="middle">fast</text>
+
+      <!-- Nodes -->
+      <circle cx="0" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
+      <text x="0" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">1</text>
+
+      <circle cx="80" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
+      <text x="80" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">2</text>
+
+      <circle cx="160" cy="25" r="22" fill="#e3f2fd" stroke="#3498db" stroke-width="3"/>
+      <text x="160" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">3</text>
+
+      <circle cx="240" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
+      <text x="240" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">4</text>
+
+      <circle cx="320" cy="25" r="22" fill="#fee2e2" stroke="#ef4444" stroke-width="3"/>
+      <text x="320" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">5</text>
+
+      <!-- Connectors -->
+      <line x1="22" y1="25" x2="58" y2="25" stroke="#94a3b8" stroke-width="2"/>
+      <line x1="102" y1="25" x2="138" y2="25" stroke="#94a3b8" stroke-width="2"/>
+      <line x1="182" y1="25" x2="218" y2="25" stroke="#94a3b8" stroke-width="2"/>
+      <line x1="262" y1="25" x2="298" y2="25" stroke="#94a3b8" stroke-width="2"/>
+    </g>
+    <text x="400" y="45" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#3498db">Midpoint found!</text>
+  </g>
+</svg>

apps/docs/public/two-pointers-decision-tree.svg

@@ -0,0 +1,68 @@
+<svg viewBox="0 0 800 650" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background (REQUIRED) - MUST BE FIRST ELEMENT -->
+  <rect width="800" height="650" fill="#f8f9fa" rx="10"/>
+
+  <!-- Title -->
+  <text x="80" y="40" font-family="Arial, sans-serif" font-size="28" font-weight="bold" fill="#2c3e50">Two Pointers Decision Rule</text>
+
+  <!-- Start -->
+  <rect x="300" y="80" width="200" height="60" fill="#ffffff" stroke="#3498db" stroke-width="2" rx="8"/>
+  <text x="340" y="115" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#2c3e50">New Problem</text>
+  <path d="M 400,140 L 400,160" stroke="#dee2e6" stroke-width="2" fill="none"/>
+
+  <!-- Q1 -->
+  <rect x="175" y="160" width="450" height="70" fill="#ffffff" stroke="#3498db" stroke-width="2" rx="8"/>
+  <text x="210" y="185" font-family="Arial, sans-serif" font-size="16" fill="#2c3e50">Am I maintaining a contiguous interval?</text>
+  <text x="225" y="205" font-family="Arial, sans-serif" font-size="14" fill="#7f8c8d">(Subarray, substring, window property)</text>
+  
+  <path d="M 625,195 L 675,195 L 675,225" stroke="#dee2e6" stroke-width="2" fill="none"/>
+  <text x="640" y="190" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#27ae60">Yes</text>
+  <rect x="600" y="225" width="160" height="50" fill="#d1fae5" stroke="#10b981" stroke-width="2" rx="8"/>
+  <text x="615" y="255" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#2c3e50">Sliding Window</text>
+
+  <path d="M 400,230 L 400,265" stroke="#dee2e6" stroke-width="2" fill="none"/>
+  <text x="410" y="245" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#e74c3c">No</text>
+
+  <!-- Q2 -->
+  <rect x="175" y="265" width="450" height="70" fill="#ffffff" stroke="#3498db" stroke-width="2" rx="8"/>
+  <text x="225" y="290" font-family="Arial, sans-serif" font-size="16" fill="#2c3e50">Can I safely eliminate one side?</text>
+  <text x="250" y="310" font-family="Arial, sans-serif" font-size="14" fill="#7f8c8d">(Sorted, symmetric, bottleneck)</text>
+
+  <path d="M 625,300 L 675,300 L 675,330" stroke="#dee2e6" stroke-width="2" fill="none"/>
+  <text x="640" y="295" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#27ae60">Yes</text>
+  <rect x="600" y="330" width="160" height="50" fill="#d1fae5" stroke="#10b981" stroke-width="2" rx="8"/>
+  <text x="615" y="360" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#2c3e50">Opposite Dir</text>
+
+  <path d="M 400,335 L 400,370" stroke="#dee2e6" stroke-width="2" fill="none"/>
+  <text x="410" y="350" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#e74c3c">No</text>
+
+  <!-- Q3 -->
+  <rect x="175" y="370" width="450" height="70" fill="#ffffff" stroke="#3498db" stroke-width="2" rx="8"/>
+  <text x="225" y="395" font-family="Arial, sans-serif" font-size="16" fill="#2c3e50">Am I rewriting or filtering in place?</text>
+  <text x="235" y="415" font-family="Arial, sans-serif" font-size="14" fill="#7f8c8d">(Remove dups, move zeros, partition)</text>
+
+  <path d="M 625,405 L 675,405 L 675,435" stroke="#dee2e6" stroke-width="2" fill="none"/>
+  <text x="640" y="400" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#27ae60">Yes</text>
+  <rect x="600" y="435" width="160" height="50" fill="#d1fae5" stroke="#10b981" stroke-width="2" rx="8"/>
+  <text x="635" y="465" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#2c3e50">Same Dir</text>
+
+  <path d="M 400,440 L 400,475" stroke="#dee2e6" stroke-width="2" fill="none"/>
+  <text x="410" y="455" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#e74c3c">No</text>
+
+  <!-- Q4 -->
+  <rect x="175" y="475" width="450" height="70" fill="#ffffff" stroke="#3498db" stroke-width="2" rx="8"/>
+  <text x="210" y="500" font-family="Arial, sans-serif" font-size="16" fill="#2c3e50">Am I reasoning about relative position?</text>
+  <text x="250" y="520" font-family="Arial, sans-serif" font-size="14" fill="#7f8c8d">(Midpoint, cycle, fixed gap)</text>
+
+  <path d="M 625,510 L 675,510 L 675,540" stroke="#dee2e6" stroke-width="2" fill="none"/>
+  <text x="640" y="505" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#27ae60">Yes</text>
+  <rect x="600" y="540" width="160" height="50" fill="#d1fae5" stroke="#10b981" stroke-width="2" rx="8"/>
+  <text x="625" y="570" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#2c3e50">Fast &amp; Slow</text>
+
+  <path d="M 400,545 L 400,580" stroke="#dee2e6" stroke-width="2" fill="none"/>
+  <text x="410" y="560" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#e74c3c">No</text>
+
+  <!-- Default -->
+  <rect x="300" y="580" width="200" height="60" fill="#e5e7eb" stroke="#6b7280" stroke-width="2" rx="8"/>
+  <text x="325" y="615" font-family="Arial, sans-serif" font-size="16" fill="#2c3e50">Other Techniques</text>
+</svg>