fix: Differentiate zoom and info button colors, fix button visibility in responsive mode

Issues fixed:
1. Zoom button now uses purple color (rgba(155, 89, 182, 0.7)) instead of blue
2. Info button keeps blue color (rgba(52, 152, 219, 0.7))
3. Both buttons now show distinct colors in default state, not just on hover
4. Device detection now considers viewport width, not just user agent
5. Buttons no longer hide in responsive mode at desktop viewport sizes

Changes:
- Updated zoom-toggle-btn to use purple background color
- Updated info-button to use blue background color (explicit, not var)
- Modified device-detection.js to check viewport width (≤900px) in addition to UA
- Added resize listener to update device class dynamically
- Created test (67-button-colors-and-visibility-test.mjs) to verify fixes

Testing:
- Desktop (1278px): All buttons visible with distinct colors
- Mobile (375px): Zoom/shortcuts hidden, core buttons visible
- Device detection now viewport-aware (prevents hiding at desktop sizes)

static/css/04-interactive/_buttons.css

@@ -11,8 +11,8 @@
     left: 2rem;
     width: 50px;
     height: 50px;
-    background: var(--black-bar);
-    color: white; /* Match other buttons when inactive */
+    background: rgba(155, 89, 182, 0.7); /* Purple with transparency - distinct from info button blue */
+    color: white;
     border: none;
     border-radius: 50%;
     cursor: pointer;
@@ -29,12 +29,12 @@
     opacity: 1;
     transform: translateY(-3px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
-    background: #3498db; /* Blue hover */
+    background: #9b59b6; /* Purple hover - distinct from info button blue */
 }
 
 .zoom-toggle-btn.at-bottom {
     opacity: 1;
-    background: #3498db; /* Blue - matches hover */
+    background: #9b59b6; /* Purple - matches hover, distinct from info button */
 }
 
 /* No special styling for active state - button looks same whether zoom is on or off */