Fix carousel navigation arrow overlap with heading text

Changes to CSS:
- Position carousel-nav absolutely at top:40% of carousel-track
- Move arrows to sides (space-between) instead of center bottom
- Increase arrow size to 40px for better visibility
- Add box-shadow to arrows for depth
- Use pointer-events:none on nav container, auto on arrows

Changes to HTML:
- Move carousel-nav inside carousel-track for proper absolute positioning

This fixes the overlap where left/right navigation arrows were appearing
on top of the carousel heading text ("Build in Jupyter" etc).
Arrows now appear on the left/right sides of the GIF at the vertical center.

site/intro.md

@@ -61,17 +61,17 @@ Build a complete machine learning (ML) framework from tensors to systems—under
         <p>tito milestone run 03 → 1986 MLP uses YOUR code</p>
       </div>
     </div>
-  </div>
 
-  <div class="carousel-nav">
-    <button class="nav-arrow prev" onclick="moveCarousel(-1)">←</button>
-    <div class="carousel-indicators">
-      <span class="indicator active" onclick="currentSlide(0)"></span>
-      <span class="indicator" onclick="currentSlide(1)"></span>
-      <span class="indicator" onclick="currentSlide(2)"></span>
-      <span class="indicator" onclick="currentSlide(3)"></span>
+    <div class="carousel-nav">
+      <button class="nav-arrow prev" onclick="moveCarousel(-1)">←</button>
+      <div class="carousel-indicators">
+        <span class="indicator active" onclick="currentSlide(0)"></span>
+        <span class="indicator" onclick="currentSlide(1)"></span>
+        <span class="indicator" onclick="currentSlide(2)"></span>
+        <span class="indicator" onclick="currentSlide(3)"></span>
+      </div>
+      <button class="nav-arrow next" onclick="moveCarousel(1)">→</button>
     </div>
-    <button class="nav-arrow next" onclick="moveCarousel(1)">→</button>
   </div>
 </div>
 ```