feat(tutorial): add dark mode styling for coaching bar and abacus frame

Enhanced the dark mode theme support for the tutorial player:

Coaching Bar:
- Updated instruction text color to use yellow.300 for dark mode instead of
  hardcoded yellow.900
- Ensures coaching instructions are readable against dark backgrounds

Abacus Frame:
- Added custom frame styling for dark mode using customStyles prop
- Column dividers: rgba(255, 255, 255, 0.15) with 2px stroke
- Reckoning bar: rgba(255, 255, 255, 0.2) with 3px stroke
- Outer border: rgba(255, 255, 255, 0.15) with 2px stroke
- Provides subtle, elegant appearance that blends with dark theme

The frame styling is automatically applied when theme="dark" and does not
affect light mode or other tutorial instances.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

apps/web/src/components/tutorial/TutorialPlayer.tsx

@@ -1094,8 +1094,37 @@ function TutorialPlayerContent({
       Object.assign(mergedHighlights[columnIndex], dynamicColumnHighlights[columnIndex])
     })
 
-    return Object.keys(mergedHighlights).length > 0 ? { columns: mergedHighlights } : undefined
-  }, [currentStep.highlightBeads, dynamicColumnHighlights, abacusColumns])
+    // Build the custom styles object
+    const styles: any = {}
+
+    // Add column highlights if any
+    if (Object.keys(mergedHighlights).length > 0) {
+      styles.columns = mergedHighlights
+    }
+
+    // Add frame styling for dark mode
+    if (theme === 'dark') {
+      styles.frame = {
+        // Column dividers
+        column: {
+          stroke: 'rgba(255, 255, 255, 0.15)',
+          strokeWidth: 2,
+        },
+        // Reckoning bar (horizontal middle bar)
+        reckoningBar: {
+          stroke: 'rgba(255, 255, 255, 0.2)',
+          strokeWidth: 3,
+        },
+        // Outer frame
+        border: {
+          stroke: 'rgba(255, 255, 255, 0.15)',
+          strokeWidth: 2,
+        },
+      }
+    }
+
+    return Object.keys(styles).length > 0 ? styles : undefined
+  }, [currentStep.highlightBeads, dynamicColumnHighlights, abacusColumns, theme])
 
   if (!currentStep) {
     return <div>No steps available</div>
@@ -1522,7 +1551,7 @@ function TutorialPlayerContent({
                               className={css({
                                 mb: 1,
                                 fontWeight: 'bold',
-                                color: 'yellow.900',
+                                color: theme === 'dark' ? 'yellow.300' : 'yellow.900',
                               })}
                             >
                               {currentInstruction}