Add gray overlay for non-highlighted tutorial steps, raise modal z-index

- Overlay background is gray (rgba 0.45) when no element is highlighted,
  transparent when a highlight exists (box-shadow provides the gray)
- Modal z-index raised to 10002 (above panels at 10000, pulls at 10001)
- Arrow z-index 10003, dismiss dialog 10005
- Ensures tutorial modals always appear above grayed-out regions and panels

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jeremymanning

src/ui/tutorial.css

@@ -24,7 +24,7 @@
   animation: tutorialPulse 1.5s ease-in-out infinite;
 }
 
-/* During tutorial, raise drawers and pulls above the tutorial modal and highlights */
+/* During tutorial, raise drawers and pulls above the overlay and highlights */
 body.tutorial-active #quiz-panel,
 body.tutorial-active #video-panel {
   z-index: 10000 !important;

src/ui/tutorial.js

@@ -602,7 +602,7 @@ function showWelcomePrompt() {
   const mobile = isMobile();
   Object.assign(modal.style, {
     position: 'fixed',
-    zIndex: '9999',
+    zIndex: '10002',
     background: 'var(--color-bg, #ffffff)',
     color: 'var(--color-text, #0f172a)',
     maxWidth: mobile ? 'none' : `${MODAL_MAX_WIDTH}px`,
@@ -1081,7 +1081,7 @@ function renderOverlay(highlightSelector, title, message, showNextBtn, isFinish,
     position: 'fixed',
     inset: '0',
     zIndex: '9998',
-    background: 'transparent',
+    background: highlightEl ? 'transparent' : 'rgba(0,0,0,0.45)',
     pointerEvents: 'none',
     transition: prefersReducedMotion() ? 'none' : 'opacity 300ms var(--ease-emphasized-decel, ease)',
   });
@@ -1103,7 +1103,7 @@ function renderOverlay(highlightSelector, title, message, showNextBtn, isFinish,
   const mobile = isMobile();
   Object.assign(modal.style, {
     position: 'fixed',
-    zIndex: '9999',
+    zIndex: '10002',
     background: 'var(--color-bg, #ffffff)',
     color: 'var(--color-text, #0f172a)',
     maxWidth: mobile ? 'none' : `${MODAL_MAX_WIDTH}px`,