fix(tutorial): use correct customStyles API for dark mode frame styling

Fixed the dark mode styling to use the correct AbacusReact customStyles API:

Previous (incorrect):
- Used nested `frame` object that doesn't exist in the API
- `frame.column`, `frame.reckoningBar`, `frame.border`

Corrected (per AbacusReact.tsx interface):
- `columnPosts` - Global styling for all column dividers
- `reckoningBar` - Horizontal middle bar styling

Changes:
- Column dividers: rgba(255, 255, 255, 0.2) with 2px stroke
- Reckoning bar: rgba(255, 255, 255, 0.25) with 3px stroke

These properties are at the root level of customStyles, not nested
under a `frame` object. The styling will now properly apply to the
abacus frame elements in dark mode.

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

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

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

@@ -1104,22 +1104,15 @@ function TutorialPlayerContent({
 
     // 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,
-        },
+      // Column dividers (global for all columns)
+      styles.columnPosts = {
+        stroke: 'rgba(255, 255, 255, 0.2)',
+        strokeWidth: 2,
+      }
+      // Reckoning bar (horizontal middle bar)
+      styles.reckoningBar = {
+        stroke: 'rgba(255, 255, 255, 0.25)',
+        strokeWidth: 3,
       }
     }