Position carousel arrows at vertical center following standard conventions

Changes to CSS:
- Position carousel-nav absolutely at top:50% with translateY(-50%)
- Use space-between to place arrows on left/right edges
- Increase arrow size to 44px for better visibility
- Add semi-transparent background: rgba(226, 232, 240, 0.95)
- Enhance shadow for better visibility over content
- Use pointer-events:none on container, auto on arrows

Changes to HTML:
- Move carousel-nav inside carousel-track for proper positioning
- Remove carousel-indicators div (not using dot indicators)
- Simplify to just prev/next arrow buttons

This follows standard carousel UX conventions where navigation arrows
appear at the vertical center of the content, positioned on the left/right
edges. Arrows are now centered on the heading text ("Clone & Setup" etc.)
rather than below it, making them more visible and easier to use.

site/_static/custom.css

@@ -1125,27 +1125,34 @@ html[data-theme="dark"] .ml-timeline-popup-metric-value {
 }
 
 .carousel-nav {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    transform: translateY(-50%);
     display: flex;
     align-items: center;
-    justify-content: center;
-    gap: 2rem;
-    margin-top: 1.5rem;
+    justify-content: space-between;
+    pointer-events: none;
+    padding: 0 1rem;
+    z-index: 10;
 }
 
 .nav-arrow {
-    background: #e2e8f0;
+    background: rgba(226, 232, 240, 0.95);
     border: none;
-    width: 36px;
-    height: 36px;
+    width: 44px;
+    height: 44px;
     border-radius: 50%;
-    font-size: 1.2rem;
+    font-size: 1.4rem;
     color: #475569;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s ease;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    pointer-events: auto;
 }
 
 .nav-arrow:hover {

site/intro.md

@@ -57,17 +57,11 @@ Build a complete machine learning (ML) framework from tensors to systems—under
         <h4>Validate with History</h4>
       </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>
+      <button class="nav-arrow next" onclick="moveCarousel(1)">→</button>
     </div>
-    <button class="nav-arrow next" onclick="moveCarousel(1)">→</button>
   </div>
 </div>
 ```