feat: viewport-centered zoom - stay at your viewing position

Changed zoom behavior from "page-relative" to "viewport-relative":

Before:
- Zoomed from top of page causing perspective/depth effect
- Content appeared to move "through" the viewer
- Disorienting experience when scrolled down

After:
- Zooms from center of YOUR viewport (where you're looking)
- Content expands both above and below your position
- You stay at your original viewing point - no movement
- Like pinch-to-zoom: magnifies what you're currently viewing

Technical implementation:
1. Calculate viewport center relative to page (scrollTop + viewportHeight/2)
2. Convert to percentage of page height
3. Set transform-origin dynamically to that percentage
4. Apply scale transform from your viewing position
5. Adjust scroll to keep same content at viewport center

CSS changes:
- Default transform-origin: center center (was top center)
- Added transition for transform-origin: 0s (instant, no animation)
- Maintains smooth 0.08s linear transform transition

Result: Natural, stable zoom that feels like magnifying glass

static/css/main.css

@@ -551,8 +551,8 @@ iconify-icon {
     min-height: auto; /* Changed from 100vh */
 
     /* Zoom transform properties */
-    transform-origin: top center; /* Scale from top-center to maintain header alignment */
-    transition: transform 0.08s linear; /* Immediate, smooth analog response */
+    transform-origin: center center; /* Default origin, dynamically updated by JS to viewport center */
+    transition: transform 0.08s linear, transform-origin 0s; /* Smooth zoom, instant origin change */
     will-change: transform; /* Hint browser to optimize for transforms */
 }
 
@@ -3524,7 +3524,7 @@ html {
 /* Solid blue color on hover - no gradient */
 .zoom-control:hover .zoom-slider,
 .zoom-slider:hover {
-    background: #3b82f6; /* solid blue */
+    background: rgba(145, 190, 236, 1); /* solid blue */
 }
 
 .zoom-slider:focus {