chore(release): 4.24.3 [skip ci]

## [4.24.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.2...v4.24.3) (2025-10-20) ### Code Refactoring * **homepage:** align all skill icon panes horizontally ([4b04e86](4b04e8673d))
refactor(homepage): align all skill icon panes horizontally
2025-10-20 11:22:23 +00:00 · 2025-10-20 06:21:25 -05:00 · 2025-10-20 11:17:40 +00:00 · 2025-10-20 06:16:37 -05:00 · 2025-10-20 11:11:51 +00:00 · 2025-10-20 06:10:44 -05:00
13 changed files with 1176 additions and 459 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,207 @@
+## [4.24.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.2...v4.24.3) (2025-10-20)
+
+
+### Code Refactoring
+
+* **homepage:** align all skill icon panes horizontally ([4b04e86](https://github.com/antialias/soroban-abacus-flashcards/commit/4b04e8673da228863d4ec1869897ee431fa3d753))
+
+## [4.24.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.1...v4.24.2) (2025-10-20)
+
+
+### Code Refactoring
+
+* **homepage:** tighten mini abacus vertical padding ([514d07e](https://github.com/antialias/soroban-abacus-flashcards/commit/514d07ecb5f65a3c0982b8e90994e1c17ebaa59c))
+
+## [4.24.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.0...v4.24.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **homepage:** adjust mini abacus container height ([c4066d6](https://github.com/antialias/soroban-abacus-flashcards/commit/c4066d687925bbe7737ebfeefdada7365ff97c6c))
+* **homepage:** fix MiniAbacus runtime error and improve sizing ([1fa0df8](https://github.com/antialias/soroban-abacus-flashcards/commit/1fa0df85f7d3988cbc61701d89476419ccf0a13c))
+* **homepage:** use correct AbacusReact API and fix clipping/styling issues ([1432afd](https://github.com/antialias/soroban-abacus-flashcards/commit/1432afd6e6bd547bd0da76dbeea1c2b71244826f))
+* **homepage:** use direct conditionals for mini abacus padding ([38ef16a](https://github.com/antialias/soroban-abacus-flashcards/commit/38ef16a8f91f8ab4ad0d717b0321e2002636fafb))
+
+
+### Styles
+
+* **homepage:** add more padding around mini abacus ([c5103d0](https://github.com/antialias/soroban-abacus-flashcards/commit/c5103d049f73a8f7ef26915edfbef9ea56d59094))
+* **homepage:** balance mini abacus padding horizontally and vertically ([2f0304e](https://github.com/antialias/soroban-abacus-flashcards/commit/2f0304eb81cdf84c21b0554c9cd4bd5478896dd8))
+* **homepage:** increase mini abacus padding to '5' ([1da9ed1](https://github.com/antialias/soroban-abacus-flashcards/commit/1da9ed1ce6995c605622fc2863f248e5e91ab9c3))
+
+## [4.24.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.23.0...v4.24.0) (2025-10-20)
+
+
+### Features
+
+* **homepage:** add animated mini abacus to "Read and set numbers" card ([e028e34](https://github.com/antialias/soroban-abacus-flashcards/commit/e028e342ad4bc01491e05a4ba074628155926fd8))
+
+## [4.23.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.22.0...v4.23.0) (2025-10-20)
+
+
+### Features
+
+* **homepage:** add more visual embellishments to learning cards ([4ec1b95](https://github.com/antialias/soroban-abacus-flashcards/commit/4ec1b952f202d50f6db287c41732ec65ca17c142))
+
+## [4.22.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.21.1...v4.22.0) (2025-10-20)
+
+
+### Features
+
+* **homepage:** enhance "What You'll Learn" with visual cards ([d142342](https://github.com/antialias/soroban-abacus-flashcards/commit/d1423420e653b26b2f89d9d17ae5d597807d6979))
+
+
+### Bug Fixes
+
+* **tutorial:** reduce tooltip z-index to scroll under nav bar ([47640f3](https://github.com/antialias/soroban-abacus-flashcards/commit/47640f3486c6d4a7107d59bdcce043f76fabbb1d))
+
+## [4.21.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.21.0...v4.21.1) (2025-10-20)
+
+
+### Code Refactoring
+
+* **homepage:** rearrange tutorial demo layout side by side ([8b4ecee](https://github.com/antialias/soroban-abacus-flashcards/commit/8b4eceebfaaaf07e38ea64c7fe015aec86ac754f))
+
+## [4.21.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.7...v4.21.0) (2025-10-20)
+
+
+### Features
+
+* **tutorial:** add silentErrors prop to suppress error messages ([8835e1c](https://github.com/antialias/soroban-abacus-flashcards/commit/8835e1c57ab8adcecefe0db082360dd98fbfaac7))
+
+## [4.20.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.6...v4.20.7) (2025-10-20)
+
+
+### Bug Fixes
+
+* **home:** use Panda CSS token() for dynamic colors and center arrows properly ([d52ba63](https://github.com/antialias/soroban-abacus-flashcards/commit/d52ba6373a4577655dc1e5f5ff4926af7f7d96c3))
+
+## [4.20.6](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.5...v4.20.6) (2025-10-20)
+
+
+### Bug Fixes
+
+* **homepage:** use inline styles for journey level colors ([5d85e89](https://github.com/antialias/soroban-abacus-flashcards/commit/5d85e898d65d44d8d09bee952fad44b5a9c0cd20)), closes [#4ade80](https://github.com/antialias/soroban-abacus-flashcards/issues/4ade80) [#60a5](https://github.com/antialias/soroban-abacus-flashcards/issues/60a5) [#a78](https://github.com/antialias/soroban-abacus-flashcards/issues/a78) [#fbbf24](https://github.com/antialias/soroban-abacus-flashcards/issues/fbbf24)
+
+## [4.20.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.4...v4.20.5) (2025-10-20)
+
+
+### Bug Fixes
+
+* **docker:** include Panda CSS styled-system in production image ([57fabff](https://github.com/antialias/soroban-abacus-flashcards/commit/57fabffe605d953b4a4d7e05032401cbf1ab2d14))
+
+## [4.20.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.3...v4.20.4) (2025-10-19)
+
+
+### Bug Fixes
+
+* **homepage:** use inline styles for Your Journey text contrast ([8e51390](https://github.com/antialias/soroban-abacus-flashcards/commit/8e5139001818d7013e1b2654ac707f7429316d58)), closes [#e5e7](https://github.com/antialias/soroban-abacus-flashcards/issues/e5e7) [#e5e7](https://github.com/antialias/soroban-abacus-flashcards/issues/e5e7) [#9ca3](https://github.com/antialias/soroban-abacus-flashcards/issues/9ca3) [#d1d5](https://github.com/antialias/soroban-abacus-flashcards/issues/d1d5)
+
+## [4.20.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.2...v4.20.3) (2025-10-19)
+
+
+### Bug Fixes
+
+* **homepage:** use explicit RGBA colors for Your Journey text ([9c51cc9](https://github.com/antialias/soroban-abacus-flashcards/commit/9c51cc94eec4efcab9c0b9d1190f5b79c0c7d365))
+
+## [4.20.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.1...v4.20.2) (2025-10-19)
+
+
+### Bug Fixes
+
+* **homepage:** improve text contrast in Your Journey section ([24d1200](https://github.com/antialias/soroban-abacus-flashcards/commit/24d120004dccecc1ce2f08c1b73eec902868fb23))
+* **tutorial:** resolve TypeScript errors in TutorialPlayer ([88f57ce](https://github.com/antialias/soroban-abacus-flashcards/commit/88f57ce6df125142d6ea7feec60c475926bd4929))
+
+## [4.20.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.0...v4.20.1) (2025-10-19)
+
+
+### Bug Fixes
+
+* **homepage:** correct positioning of progression arrows in Your Journey section ([3fff9ef](https://github.com/antialias/soroban-abacus-flashcards/commit/3fff9ef140bf1f462042f8319ed6c5e2a376e4ba))
+
+
+### Code Refactoring
+
+* **homepage:** move What You'll Learn above tutorial ([ca1c6d8](https://github.com/antialias/soroban-abacus-flashcards/commit/ca1c6d86029c891e019a96ba161e49b08b5be1bf))
+
+## [4.20.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.19.0...v4.20.0) (2025-10-19)
+
+
+### Features
+
+* **tutorial:** add hideTooltip prop and improve dark mode coaching bar ([1ee25b3](https://github.com/antialias/soroban-abacus-flashcards/commit/1ee25b3dd2f0ee9dd7ed571ba818b7ca5a247f85))
+
+## [4.19.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.18.1...v4.19.0) (2025-10-19)
+
+
+### Features
+
+* **tutorial:** add fill color support for dark mode column posts and reckoning bar ([2eb3ff3](https://github.com/antialias/soroban-abacus-flashcards/commit/2eb3ff340613301df20bf14f5b461371a27d7f05))
+
+## [4.18.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.18.0...v4.18.1) (2025-10-19)
+
+
+### Bug Fixes
+
+* **tutorial:** use correct customStyles API for dark mode frame styling ([fdc882c](https://github.com/antialias/soroban-abacus-flashcards/commit/fdc882cb046e3d8835fbca59841e9af5329bcc52))
+
+## [4.18.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.17.2...v4.18.0) (2025-10-19)
+
+
+### Features
+
+* **tutorial:** add dark mode styling for coaching bar and abacus frame ([7e2f580](https://github.com/antialias/soroban-abacus-flashcards/commit/7e2f580877af9d21409f427778fa3569c950fcf5))
+
+## [4.17.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.17.1...v4.17.2) (2025-10-19)
+
+
+### Bug Fixes
+
+* **tutorial:** correct column index calculation for variable column counts ([bf1ced4](https://github.com/antialias/soroban-abacus-flashcards/commit/bf1ced43f801938b05f01548eea5fe771de1b58f))
+
+## [4.17.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.17.0...v4.17.1) (2025-10-19)
+
+
+### Bug Fixes
+
+* **tutorial:** filter bead highlights when using fewer columns ([4d906ec](https://github.com/antialias/soroban-abacus-flashcards/commit/4d906ec20e90a9b0b3838f9b8428e0c68992f381))
+
+## [4.17.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.16.0...v4.17.0) (2025-10-19)
+
+
+### Features
+
+* **tutorial:** add dark theme and column control props ([d42f9b2](https://github.com/antialias/soroban-abacus-flashcards/commit/d42f9b2d9ad630826c55b753dc581c469e8f9083))
+
+
+### Styles
+
+* **homepage:** soften tutorial styling for dark theme cohesion ([faaefba](https://github.com/antialias/soroban-abacus-flashcards/commit/faaefbacff419b337aa0fac4a101d5106a18c77c)), closes [#f9](https://github.com/antialias/soroban-abacus-flashcards/issues/f9)
+
+## [4.16.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.15.1...v4.16.0) (2025-10-19)
+
+
+### Features
+
+* **tutorial:** add hideNavigation prop to TutorialPlayer ([79ea52a](https://github.com/antialias/soroban-abacus-flashcards/commit/79ea52af80c8cbb482bbdd87f77caf32ada737ee))
+
+
+### Styles
+
+* **homepage:** update tutorial container to match dark theme ([6b017b0](https://github.com/antialias/soroban-abacus-flashcards/commit/6b017b0fe92d4277843d9fe2645c22366f219d76))
+
+## [4.15.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.15.0...v4.15.1) (2025-10-19)
+
+
+### Bug Fixes
+
+* **tutorial:** resolve React hydration error in TutorialPlayer ([c883d9e](https://github.com/antialias/soroban-abacus-flashcards/commit/c883d9e4c1b3a2f52c9d41e3ddce7418399f2649))
+
+
+### Code Refactoring
+
+* replace demo component with real TutorialPlayer system ([19b03bc](https://github.com/antialias/soroban-abacus-flashcards/commit/19b03bc77c649cf51d7b9a3617417c6ec8229ac7))
+
 ## [4.15.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.14.6...v4.15.0) (2025-10-19)


--- a/3
+++ b/3
@@ -59,6 +59,9 @@ RUN adduser --system --uid 1001 nextjs
 COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next ./apps/web/.next
 COPY --from=builder --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public

+# Copy Panda CSS generated styles
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/styled-system ./apps/web/styled-system
+
 # Copy server files (compiled from TypeScript)
 COPY --from=builder --chown=nextjs:nodejs /app/apps/web/server.js ./apps/web/
 COPY --from=builder --chown=nextjs:nodejs /app/apps/web/dist ./apps/web/dist
--- a/apps/web/.claude/PANDA_CSS_DYNAMIC_TOKENS.md
+++ b/apps/web/.claude/PANDA_CSS_DYNAMIC_TOKENS.md
@@ -0,0 +1,76 @@
+# Panda CSS Dynamic Token Usage
+
+## Problem: Dynamic Color Tokens Not Working
+
+When using Panda CSS, color tokens like `blue.400`, `purple.400`, etc. don't work when used dynamically through variables in the `css()` function.
+
+## Root Cause
+
+Panda CSS's `css()` function requires **static values at build time**. It cannot process dynamic token references like:
+
+```typescript
+// ❌ This doesn't work
+const color = 'blue.400'
+css({ color: color })  // Panda can't resolve this at build time
+```
+
+The `css()` function performs static analysis during the build process to generate CSS classes. It cannot handle runtime-dynamic token paths.
+
+## Solution: Use the `token()` Function
+
+Panda CSS provides a `token()` function specifically for resolving token paths to their actual values at runtime:
+
+```typescript
+import { token } from '../../styled-system/tokens'
+
+// ✅ This works
+const stages = [
+  { level: '10 Kyu', label: 'Beginner', color: 'colors.green.400' },
+  { level: '5 Kyu', label: 'Intermediate', color: 'colors.blue.400' },
+  { level: '1 Kyu', label: 'Advanced', color: 'colors.violet.400' },
+  { level: 'Dan', label: 'Master', color: 'colors.amber.400' },
+] as const
+
+// Use with inline styles, not css()
+<div style={{ color: token(stage.color) }}>
+```
+
+## Important Notes
+
+1. **Use `as const`**: TypeScript needs the array marked as `const` so the token strings are treated as literal types, not generic strings. The `token()` function expects the `Token` literal type.
+
+2. **Use inline styles**: When using `token()`, apply colors via the `style` prop, not through the `css()` function:
+   ```typescript
+   // ✅ Correct
+   <div style={{ color: token(stage.color) }}>
+
+   // ❌ Won't work
+   <div className={css({ color: token(stage.color) })}>
+   ```
+
+3. **Static tokens in css()**: For static usage, you CAN use tokens directly in `css()`:
+   ```typescript
+   // ✅ This works because it's static
+   css({ color: 'blue.400' })
+   ```
+
+## How token() Works
+
+The `token()` function:
+- Takes a token path like `"colors.blue.400"`
+- Looks it up in the generated token registry (`styled-system/tokens/index.mjs`)
+- Returns the actual CSS value (e.g., `"#60a5fa"`)
+- Happens at runtime, not build time
+
+## Token Type Definition
+
+The `Token` type is a union of all valid token paths:
+```typescript
+type Token = "colors.blue.400" | "colors.green.400" | "colors.violet.400" | ...
+```
+
+This is defined in `styled-system/tokens/tokens.d.ts`.
+
+## Reference Implementation
+
+See `src/app/page.tsx` lines 404-434 for a working example of dynamic token usage in the "Your Journey" section.
--- a/apps/web/.claude/TUTORIAL_SYSTEM.md
+++ b/apps/web/.claude/TUTORIAL_SYSTEM.md
@@ -0,0 +1,222 @@
+# Tutorial System Documentation
+
+## Overview
+
+The tutorial system is a sophisticated interactive learning platform for teaching soroban abacus concepts. It features step-by-step guidance, bead highlighting, pedagogical decomposition, and progress tracking.
+
+## Key Components
+
+### 1. TutorialPlayer (`/src/components/tutorial/TutorialPlayer.tsx`)
+The main tutorial playback component that:
+- Displays tutorial steps progressively
+- Highlights specific beads users should interact with
+- Provides real-time feedback and tooltips
+- Shows step-by-step instructions for multi-step operations
+- Tracks user progress through the tutorial
+- Auto-advances to next step on correct completion
+
+**Key Features:**
+- **Bead Highlighting**: Visual indicators showing which beads to manipulate
+- **Step Progress**: Shows current step out of total steps
+- **Error Feedback**: Provides hints when user makes mistakes
+- **Multi-Step Support**: Breaks complex operations into sequential sub-steps
+- **Pedagogical Decomposition**: Explains the "why" behind each operation
+
+### 2. TutorialEditor (`/src/components/tutorial/TutorialEditor.tsx`)
+A full-featured editor for creating and editing tutorials:
+- Visual step editor
+- Bead highlight configuration
+- Multi-step instruction editor
+- Live preview
+- Import/export functionality
+- Access control
+
+**Editor URL:** `/tutorial-editor`
+
+### 3. Tutorial Data Structure (`/src/types/tutorial.ts`)
+
+```typescript
+interface Tutorial {
+  id: string
+  title: string
+  description: string
+  category: string
+  difficulty: 'beginner' | 'intermediate' | 'advanced'
+  estimatedDuration: number // minutes
+  steps: TutorialStep[]
+  tags: string[]
+  author: string
+  version: string
+  createdAt: Date
+  updatedAt: Date
+  isPublished: boolean
+}
+
+interface TutorialStep {
+  id: string
+  title: string
+  problem: string                    // e.g. "2 + 3"
+  description: string                // User-facing explanation
+  startValue: number                 // Initial abacus value
+  targetValue: number                // Goal value
+  expectedAction: 'add' | 'remove' | 'multi-step'
+  actionDescription: string
+
+  // Bead highlighting
+  highlightBeads?: Array<{
+    placeValue: number               // 0=ones, 1=tens, etc.
+    beadType: 'heaven' | 'earth'
+    position?: number                // For earth beads: 0-3
+  }>
+
+  // Progressive step highlighting
+  stepBeadHighlights?: Array<{
+    placeValue: number
+    beadType: 'heaven' | 'earth'
+    position?: number
+    stepIndex: number                // Which instruction step
+    direction: 'up' | 'down' | 'activate' | 'deactivate'
+    order?: number                   // Order within step
+  }>
+
+  totalSteps?: number                // For multi-step operations
+  multiStepInstructions?: string[]   // Sequential instructions
+
+  // Tooltips and guidance
+  tooltip: {
+    content: string                  // Short title
+    explanation: string              // Detailed explanation
+  }
+}
+```
+
+### 4. Tutorial Converter (`/src/utils/tutorialConverter.ts`)
+
+Utility that converts the original `GuidedAdditionTutorial` data into the new tutorial format:
+- `guidedAdditionSteps`: Array of tutorial steps from basic addition to complements
+- `convertGuidedAdditionTutorial()`: Converts to Tutorial object
+- `getTutorialForEditor()`: Main export used in the app
+
+**Current Tutorial Steps:**
+1. Basic Addition (0+1, 1+1, 2+1, 3+1)
+2. Heaven Bead Introduction (0+5, 5+1)
+3. Five Complements (3+4, 2+3 using 5-complement method)
+4. Complex Operations (6+2, 7+4 with carrying)
+
+### 5. Supporting Utilities
+
+**`/src/utils/abacusInstructionGenerator.ts`**
+- Automatically generates step-by-step instructions from start/target values
+- Creates bead highlight data
+- Determines movement directions
+
+**`/src/utils/beadDiff.ts`**
+- Calculates differences between abacus states
+- Generates visual feedback tooltips
+- Explains what changed and why
+
+## Usage Examples
+
+### Basic Usage in a Page
+
+```typescript
+import { TutorialPlayer } from '@/components/tutorial/TutorialPlayer'
+import { getTutorialForEditor } from '@/utils/tutorialConverter'
+
+export function MyPage() {
+  return (
+    <TutorialPlayer
+      tutorial={getTutorialForEditor()}
+      isDebugMode={false}
+      showDebugPanel={false}
+    />
+  )
+}
+```
+
+### Using a Subset of Steps
+
+```typescript
+import { getTutorialForEditor } from '@/utils/tutorialConverter'
+
+const fullTutorial = getTutorialForEditor()
+
+// Extract specific steps (e.g., just "Friends of 5")
+const friendsOf5Tutorial = {
+  ...fullTutorial,
+  id: 'friends-of-5-demo',
+  title: 'Friends of 5',
+  steps: fullTutorial.steps.filter(step =>
+    step.id === 'complement-2' // The 2+3=5 step
+  )
+}
+
+return <TutorialPlayer tutorial={friendsOf5Tutorial} />
+```
+
+### Creating a Custom Tutorial
+
+```typescript
+const customTutorial: Tutorial = {
+  id: 'my-tutorial',
+  title: 'My Custom Tutorial',
+  description: 'Learning something new',
+  category: 'Custom',
+  difficulty: 'beginner',
+  estimatedDuration: 5,
+  steps: [
+    {
+      id: 'step-1',
+      title: 'Add 2',
+      problem: '0 + 2',
+      description: 'Move two earth beads up',
+      startValue: 0,
+      targetValue: 2,
+      expectedAction: 'add',
+      actionDescription: 'Add two earth beads',
+      highlightBeads: [
+        { placeValue: 0, beadType: 'earth', position: 0 },
+        { placeValue: 0, beadType: 'earth', position: 1 }
+      ],
+      tooltip: {
+        content: 'Adding 2',
+        explanation: 'Push two earth beads up to represent 2'
+      }
+    }
+  ],
+  tags: ['custom'],
+  author: 'Me',
+  version: '1.0.0',
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  isPublished: true
+}
+```
+
+## Current Implementation Locations
+
+**Live Tutorials:**
+- `/guide` - Second tab "Arithmetic Operations" contains the full guided addition tutorial
+
+**Editor:**
+- `/tutorial-editor` - Full tutorial editing interface
+
+**Storybook:**
+- Multiple tutorial stories in `/src/components/tutorial/*.stories.tsx`
+
+## Key Design Principles
+
+1. **Progressive Disclosure**: Users see one step at a time
+2. **Immediate Feedback**: Real-time validation and hints
+3. **Visual Guidance**: Bead highlighting shows exactly what to do
+4. **Pedagogical Decomposition**: Multi-step operations broken into atomic actions
+5. **Auto-Advancement**: Successful completion automatically moves to next step
+6. **Error Recovery**: Helpful hints when user makes mistakes
+
+## Notes
+
+- The tutorial system uses the existing `AbacusReact` component
+- Tutorials can be created/edited through the TutorialEditor
+- Tutorial data can be exported/imported as JSON
+- The system supports both single-step and multi-step operations
+- Bead highlighting uses place value indexing (0=ones, 1=tens, etc.)
--- a/apps/web/.claude/settings.local.json
+++ b/apps/web/.claude/settings.local.json
@@ -102,7 +102,8 @@
      "Bash(do gh run list --limit 1 --workflow=\"Build and Deploy\" --json conclusion,status,databaseId --jq '.[0] | \"\"\\(.status) - \\(.conclusion // \"\"running\"\") - Run ID: \\(.databaseId)\"\"')",
      "Bash(node -e:*)",
      "Bash(do gh run list --limit 1 --workflow=\"Build and Deploy\" --json conclusion,status,databaseId --jq '.[0] | \"\"\\(.status) - \\(.conclusion // \"\"running\"\") - Run \\(.databaseId)\"\"')",
-      "Bash(do ssh nas.home.network '/usr/local/bin/docker inspect soroban-abacus-flashcards --format=\"\"{{index .Config.Labels \\\"\"org.opencontainers.image.revision\\\"\"}}\"\"')"
+      "Bash(do ssh nas.home.network '/usr/local/bin/docker inspect soroban-abacus-flashcards --format=\"\"{{index .Config.Labels \\\"\"org.opencontainers.image.revision\\\"\"}}\"\"')",
+      "Bash(git rev-parse HEAD)"
    ],
    "deny": [],
    "ask": []
--- a/apps/web/src/app/arcade/page.tsx
+++ b/apps/web/src/app/arcade/page.tsx
@@ -290,10 +290,12 @@ export default function RoomPage() {
                  key={gameDef.manifest.name}
                  onClick={() => handleGameSelect(gameDef.manifest.name)}
                  disabled={isDisabled}
-                  className={css({
+                  style={{
                    background: gameDef.manifest.gradient,
-                    border: '2px solid',
                    borderColor: gameDef.manifest.borderColor,
+                  }}
+                  className={css({
+                    border: '2px solid',
                    borderRadius: '2xl',
                    padding: '6',
                    cursor: isDisabled ? 'not-allowed' : 'pointer',
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,12 +1,76 @@
 'use client'

 import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
 import { PageWithNav } from '@/components/PageWithNav'
-import { FriendsOfFiveDemo } from '@/components/FriendsOfFiveDemo'
+import { TutorialPlayer } from '@/components/tutorial/TutorialPlayer'
+import { getTutorialForEditor } from '@/utils/tutorialConverter'
 import { css } from '../../styled-system/css'
 import { container, grid, hstack, stack } from '../../styled-system/patterns'
+import { token } from '../../styled-system/tokens'
+
+// Mini abacus that cycles through random 3-digit numbers
+function MiniAbacus() {
+  const [currentValue, setCurrentValue] = useState(123)
+  const appConfig = useAbacusConfig()
+
+  useEffect(() => {
+    // Cycle through random 3-digit numbers every 2.5 seconds
+    const interval = setInterval(() => {
+      const randomNum = Math.floor(Math.random() * 1000) // 0-999
+      setCurrentValue(randomNum)
+    }, 2500)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  // Dark theme styles for the abacus
+  const darkStyles = {
+    columnPosts: {
+      fill: 'rgba(255, 255, 255, 0.3)',
+      stroke: 'rgba(255, 255, 255, 0.2)',
+      strokeWidth: 2,
+    },
+    reckoningBar: {
+      fill: 'rgba(255, 255, 255, 0.4)',
+      stroke: 'rgba(255, 255, 255, 0.25)',
+      strokeWidth: 3,
+    },
+  }
+
+  return (
+    <div
+      className={css({
+        width: '75px',
+        height: '80px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      })}
+    >
+      <div className={css({ transform: 'scale(0.6)', transformOrigin: 'center center' })}>
+        <AbacusReact
+          value={currentValue}
+          columns={3}
+          beadShape={appConfig.beadShape}
+          styles={darkStyles}
+        />
+      </div>
+    </div>
+  )
+}

 export default function HomePage() {
+  // Extract just the "Friends of 5" step (2+3=5) for homepage demo
+  const fullTutorial = getTutorialForEditor()
+  const friendsOf5Tutorial = {
+    ...fullTutorial,
+    id: 'friends-of-5-demo',
+    title: 'Friends of 5',
+    description: 'Learn the "Friends of 5" technique: adding 3 to make 5',
+    steps: fullTutorial.steps.filter((step) => step.id === 'complement-2'),
+  }

  return (
    <PageWithNav navTitle="Soroban Learning Platform" navEmoji="🧮">
@@ -196,37 +260,177 @@ export default function HomePage() {
              </p>
            </div>

-            <div className={grid({ columns: { base: 1, lg: 2 }, gap: '8' })}>
-              {/* Live demo */}
-              <FriendsOfFiveDemo />
-
-              {/* What you'll learn */}
+            {/* Live demo and learning objectives */}
+            <div
+              className={css({
+                bg: 'rgba(0, 0, 0, 0.4)',
+                rounded: 'xl',
+                p: '8',
+                border: '1px solid',
+                borderColor: 'gray.700',
+                shadow: 'lg',
+                maxW: '1200px',
+                mx: 'auto',
+              })}
+            >
              <div
-                className={stack({
-                  gap: '4',
-                  bg: 'rgba(0, 0, 0, 0.4)',
-                  p: '6',
-                  borderRadius: 'xl',
-                  border: '1px solid',
-                  borderColor: 'gray.700',
-                  justifyContent: 'center',
+                className={css({
+                  display: 'flex',
+                  flexDirection: { base: 'column', md: 'row' },
+                  gap: '8',
+                  alignItems: { base: 'center', md: 'flex-start' },
                })}
              >
-                <h3 className={css({ fontSize: 'xl', fontWeight: 'bold', color: 'white' })}>
-                  What You'll Learn
-                </h3>
-                <div className={stack({ gap: '3' })}>
-                  {[
-                    'Read and set numbers on an abacus',
-                    'Add and subtract with "friends" techniques',
-                    'Multiply and divide fluently',
-                    'Calculate mentally without the abacus',
-                  ].map((skill, i) => (
-                    <div key={i} className={hstack({ gap: '3' })}>
-                      <span className={css({ color: 'yellow.400', fontSize: 'lg' })}>✓</span>
-                      <span className={css({ color: 'gray.300', fontSize: 'md' })}>{skill}</span>
-                    </div>
-                  ))}
+                {/* Tutorial on the left */}
+                <div className={css({ flex: '1' })}>
+                  <TutorialPlayer
+                    tutorial={friendsOf5Tutorial}
+                    isDebugMode={false}
+                    showDebugPanel={false}
+                    hideNavigation={true}
+                    hideTooltip={true}
+                    silentErrors={true}
+                    abacusColumns={1}
+                    theme="dark"
+                  />
+                </div>
+
+                {/* What you'll learn on the right */}
+                <div
+                  className={css({
+                    flex: '0 0 auto',
+                    minW: '340px',
+                    maxW: { base: '100%', md: '420px' },
+                  })}
+                >
+                  <h3
+                    className={css({
+                      fontSize: '2xl',
+                      fontWeight: 'bold',
+                      color: 'white',
+                      mb: '6',
+                    })}
+                  >
+                    What You'll Learn
+                  </h3>
+                  <div className={stack({ gap: '5' })}>
+                    {[
+                      {
+                        icon: '🔢',
+                        title: 'Read and set numbers',
+                        desc: 'Master abacus number representation from zero to thousands',
+                        example: '0-9999',
+                        badge: 'Foundation',
+                      },
+                      {
+                        icon: '🤝',
+                        title: 'Friends techniques',
+                        desc: 'Add and subtract using complement pairs and mental shortcuts',
+                        example: '5 = 2+3',
+                        badge: 'Core',
+                      },
+                      {
+                        icon: '✖️➗',
+                        title: 'Multiply & divide',
+                        desc: 'Fluent multi-digit calculations with advanced techniques',
+                        example: '12×34',
+                        badge: 'Advanced',
+                      },
+                      {
+                        icon: '🧠',
+                        title: 'Mental calculation',
+                        desc: 'Visualize and compute without the physical tool (Anzan)',
+                        example: 'Speed math',
+                        badge: 'Expert',
+                      },
+                    ].map((skill, i) => (
+                      <div
+                        key={i}
+                        className={css({
+                          bg: 'linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03))',
+                          borderRadius: 'xl',
+                          p: '4',
+                          border: '1px solid',
+                          borderColor: 'rgba(255, 255, 255, 0.15)',
+                          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+                          transition: 'all 0.2s',
+                          _hover: {
+                            bg: 'linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))',
+                            borderColor: 'rgba(255, 255, 255, 0.25)',
+                            transform: 'translateY(-2px)',
+                            boxShadow: '0 6px 16px rgba(0, 0, 0, 0.4)',
+                          },
+                        })}
+                      >
+                        <div className={hstack({ gap: '3', alignItems: 'flex-start' })}>
+                          <div
+                            className={css({
+                              fontSize: '3xl',
+                              minW: '50px',
+                              textAlign: 'center',
+                              bg: 'rgba(255, 255, 255, 0.1)',
+                              borderRadius: 'lg',
+                              py: i === 0 ? '4' : '2',
+                              px: '0',
+                            })}
+                          >
+                            {i === 0 ? <MiniAbacus /> : skill.icon}
+                          </div>
+                          <div className={stack({ gap: '2', flex: '1' })}>
+                            <div className={hstack({ gap: '2', alignItems: 'center' })}>
+                              <div
+                                className={css({
+                                  color: 'white',
+                                  fontSize: 'md',
+                                  fontWeight: 'bold',
+                                })}
+                              >
+                                {skill.title}
+                              </div>
+                              <div
+                                className={css({
+                                  bg: 'rgba(250, 204, 21, 0.2)',
+                                  color: 'yellow.400',
+                                  fontSize: '2xs',
+                                  fontWeight: 'semibold',
+                                  px: '2',
+                                  py: '0.5',
+                                  borderRadius: 'md',
+                                })}
+                              >
+                                {skill.badge}
+                              </div>
+                            </div>
+                            <div
+                              className={css({
+                                color: 'gray.300',
+                                fontSize: 'xs',
+                                lineHeight: '1.5',
+                              })}
+                            >
+                              {skill.desc}
+                            </div>
+                            <div
+                              className={css({
+                                color: 'yellow.400',
+                                fontSize: 'xs',
+                                fontFamily: 'mono',
+                                fontWeight: 'semibold',
+                                mt: '1',
+                                bg: 'rgba(250, 204, 21, 0.1)',
+                                px: '2',
+                                py: '1',
+                                borderRadius: 'md',
+                                w: 'fit-content',
+                              })}
+                            >
+                              {skill.example}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
                </div>
              </div>
            </div>
@@ -345,9 +549,7 @@ export default function HomePage() {
              >
                Your Journey
              </h2>
-              <p className={css({ color: 'gray.400', fontSize: 'md' })}>
-                Progress from beginner to master
-              </p>
+              <p style={{ color: '#e5e7eb', fontSize: '16px' }}>Progress from beginner to master</p>
            </div>

            <div
@@ -368,31 +570,53 @@ export default function HomePage() {
                  flexWrap: 'wrap',
                })}
              >
-                {[
-                  { level: '10 Kyu', label: 'Beginner', color: 'green.400' },
-                  { level: '5 Kyu', label: 'Intermediate', color: 'blue.400' },
-                  { level: '1 Kyu', label: 'Advanced', color: 'purple.400' },
-                  { level: 'Dan', label: 'Master', color: 'yellow.400' },
-                ].map((stage, i) => (
-                  <div key={i} className={stack({ gap: '2', textAlign: 'center', flex: '1' })}>
+                {(
+                  [
+                    { level: '10 Kyu', label: 'Beginner', color: 'colors.green.400' },
+                    { level: '5 Kyu', label: 'Intermediate', color: 'colors.blue.400' },
+                    { level: '1 Kyu', label: 'Advanced', color: 'colors.violet.400' },
+                    { level: 'Dan', label: 'Master', color: 'colors.amber.400' },
+                  ] as const
+                ).map((stage, i) => (
+                  <div
+                    key={i}
+                    className={stack({
+                      gap: '2',
+                      textAlign: 'center',
+                      flex: '1',
+                      position: 'relative',
+                    })}
+                  >
                    <div
                      className={css({
                        fontSize: 'xl',
                        fontWeight: 'bold',
-                        color: stage.color,
                      })}
+                      style={{ color: token(stage.color) }}
                    >
                      {stage.level}
                    </div>
-                    <div className={css({ fontSize: 'sm', color: 'gray.400' })}>{stage.label}</div>
+                    <div
+                      className={css({
+                        fontSize: 'sm',
+                        color: 'gray.300',
+                      })}
+                    >
+                      {stage.label}
+                    </div>
                    {i < 3 && (
                      <div
+                        style={{
+                          position: 'absolute',
+                          left: '100%',
+                          marginLeft: '0.5rem',
+                          top: '50%',
+                          transform: 'translate(-50%, -50%)',
+                          fontSize: '20px',
+                          color: '#9ca3af',
+                        }}
                        className={css({
                          display: { base: 'none', md: 'block' },
-                          position: 'absolute',
-                          right: '-50%',
-                          fontSize: 'xl',
-                          color: 'gray.600',
                        })}
                      >
                        →
@@ -402,12 +626,14 @@ export default function HomePage() {
                ))}
              </div>
              <div
+                style={{
+                  textAlign: 'center',
+                  fontSize: '14px',
+                  color: '#d1d5db',
+                  fontStyle: 'italic',
+                }}
                className={css({
                  mt: '6',
-                  textAlign: 'center',
-                  fontSize: 'sm',
-                  color: 'gray.500',
-                  fontStyle: 'italic',
                })}
              >
                You'll progress through all these levels eventually ↑
--- a/apps/web/src/arcade-games/card-sorting/index.ts
+++ b/apps/web/src/arcade-games/card-sorting/index.ts
@@ -12,8 +12,6 @@ import { CardSortingProvider } from './Provider'
 import type { CardSortingConfig, CardSortingMove, CardSortingState } from './types'
 import { cardSortingValidator } from './Validator'

-const theme = getGameTheme('teal')
-
 const manifest: GameManifest = {
  name: 'card-sorting',
  displayName: 'Card Sorting Challenge',
@@ -26,9 +24,7 @@ const manifest: GameManifest = {
  maxPlayers: 1, // Single player only
  difficulty: 'Intermediate',
  chips: ['🧠 Pattern Recognition', '🎯 Solo Challenge', '📊 Smart Scoring'],
-  color: theme.color,
-  gradient: theme.gradient,
-  borderColor: theme.borderColor,
+  ...getGameTheme('teal'),
  available: true,
 }

--- a/apps/web/src/components/FriendsOfFiveDemo.tsx
+++ b/apps/web/src/components/FriendsOfFiveDemo.tsx
@@ -1,127 +0,0 @@
-'use client'
-
-import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
-import { useCallback, useEffect, useState } from 'react'
-import { css } from '../../styled-system/css'
-import { stack } from '../../styled-system/patterns'
-
-/**
- * Compact "Friends of 5" demo for the homepage
- * Shows an interactive example of learning soroban concepts
- */
-export function FriendsOfFiveDemo() {
-  const [currentValue, setCurrentValue] = useState(2)
-  const [targetValue] = useState(5)
-  const [feedback, setFeedback] = useState<string>('Try adding 3 more beads to make 5!')
-  const [isCorrect, setIsCorrect] = useState(false)
-  const appConfig = useAbacusConfig()
-
-  const handleValueChange = useCallback(
-    (newValue: number) => {
-      setCurrentValue(newValue)
-
-      if (newValue === targetValue) {
-        setIsCorrect(true)
-        setFeedback('Perfect! You made 5! This is the "Friends of 5" concept.')
-      } else if (newValue > targetValue) {
-        setFeedback('Oops! Too many beads. Try to make exactly 5.')
-      } else {
-        setFeedback(`Add ${targetValue - newValue} more to make 5!`)
-      }
-    },
-    [targetValue]
-  )
-
-  // Reset after 3 seconds when correct
-  useEffect(() => {
-    if (isCorrect) {
-      const timeout = setTimeout(() => {
-        setCurrentValue(2)
-        setIsCorrect(false)
-        setFeedback('Try adding 3 more beads to make 5!')
-      }, 3000)
-      return () => clearTimeout(timeout)
-    }
-  }, [isCorrect])
-
-  return (
-    <div
-      className={stack({
-        gap: '4',
-        bg: 'rgba(255, 255, 255, 0.05)',
-        p: '6',
-        borderRadius: 'xl',
-        border: '1px solid rgba(139, 92, 246, 0.2)',
-      })}
-    >
-      {/* Title */}
-      <div className={css({ textAlign: 'center' })}>
-        <h4
-          className={css({
-            fontSize: 'lg',
-            fontWeight: 'bold',
-            color: 'white',
-            mb: '2',
-          })}
-        >
-          Try It Now: Friends of 5
-        </h4>
-        <p className={css({ fontSize: 'sm', color: 'gray.300' })}>Problem: 2 + 3 = ?</p>
-      </div>
-
-      {/* Interactive Abacus */}
-      <div
-        className={css({
-          display: 'flex',
-          justifyContent: 'center',
-          bg: 'white',
-          p: '4',
-          borderRadius: 'lg',
-          minHeight: '200px',
-          alignItems: 'center',
-        })}
-      >
-        <AbacusReact
-          value={currentValue}
-          columns={1}
-          beadShape={appConfig.beadShape}
-          colorScheme={appConfig.colorScheme}
-          hideInactiveBeads={appConfig.hideInactiveBeads}
-          interactive={true}
-          animated={true}
-          soundEnabled={true}
-          soundVolume={0.3}
-          scaleFactor={1.8}
-          showNumbers={true}
-          onValueChange={handleValueChange}
-        />
-      </div>
-
-      {/* Feedback */}
-      <div
-        className={css({
-          p: '3',
-          bg: isCorrect ? 'rgba(34, 197, 94, 0.1)' : 'rgba(59, 130, 246, 0.1)',
-          border: '1px solid',
-          borderColor: isCorrect ? 'rgba(34, 197, 94, 0.3)' : 'rgba(59, 130, 246, 0.3)',
-          borderRadius: 'md',
-          textAlign: 'center',
-        })}
-      >
-        <p
-          className={css({
-            fontSize: 'sm',
-            color: isCorrect ? 'green.300' : 'blue.300',
-            fontWeight: 'medium',
-          })}
-        >
-          {feedback}
-        </p>
-      </div>
-
-      <div className={css({ textAlign: 'center', fontSize: 'xs', color: 'gray.400' })}>
-        Click the beads to move them up or down
-      </div>
-    </div>
-  )
-}
--- a/apps/web/src/components/tutorial/TutorialPlayer.tsx
+++ b/apps/web/src/components/tutorial/TutorialPlayer.tsx
@@ -215,6 +215,11 @@ interface TutorialPlayerProps {
  initialStepIndex?: number
  isDebugMode?: boolean
  showDebugPanel?: boolean
+  hideNavigation?: boolean
+  hideTooltip?: boolean
+  silentErrors?: boolean
+  abacusColumns?: number
+  theme?: 'light' | 'dark'
  onStepChange?: (stepIndex: number, step: TutorialStep) => void
  onStepComplete?: (stepIndex: number, step: TutorialStep, success: boolean) => void
  onTutorialComplete?: (score: number, timeSpent: number) => void
@@ -227,6 +232,11 @@ function TutorialPlayerContent({
  initialStepIndex = 0,
  isDebugMode = false,
  showDebugPanel = false,
+  hideNavigation = false,
+  hideTooltip = false,
+  silentErrors = false,
+  abacusColumns = 5,
+  theme = 'light',
  onStepChange,
  onStepComplete,
  onTutorialComplete,
@@ -379,16 +389,20 @@ function TutorialPlayerContent({
      }

      // Convert bead diff results to StepBeadHighlight format expected by AbacusReact
-      const stepBeadHighlights: StepBeadHighlight[] = beadDiff.changes.map((change, _index) => ({
-        placeValue: change.placeValue,
-        beadType: change.beadType,
-        position: change.position,
-        direction: change.direction,
-        stepIndex: currentMultiStep, // Use current multi-step index to match AbacusReact filtering
-        order: change.order,
-      }))
+      // Filter to only include beads from columns that exist
+      const minValidPlaceValue = Math.max(0, 5 - abacusColumns)
+      const stepBeadHighlights: StepBeadHighlight[] = beadDiff.changes
+        .filter((change) => change.placeValue < abacusColumns)
+        .map((change, _index) => ({
+          placeValue: change.placeValue,
+          beadType: change.beadType,
+          position: change.position,
+          direction: change.direction,
+          stepIndex: currentMultiStep, // Use current multi-step index to match AbacusReact filtering
+          order: change.order,
+        }))

-      return stepBeadHighlights
+      return stepBeadHighlights.length > 0 ? stepBeadHighlights : undefined
    } catch (error) {
      console.error('Error generating step beads with bead diff:', error)
      return undefined
@@ -399,6 +413,7 @@ function TutorialPlayerContent({
    expectedSteps,
    currentMultiStep,
    currentStep.stepBeadHighlights,
+    abacusColumns,
  ])

  // Get the current step's bead diff summary for real-time user feedback
@@ -422,6 +437,14 @@ function TutorialPlayerContent({
  // Get current step summary for real-time user feedback
  const currentStepSummary = getCurrentStepSummary()

+  // Filter highlightBeads to only include valid columns
+  const filteredHighlightBeads = useMemo(() => {
+    if (!currentStep.highlightBeads) return undefined
+    return currentStep.highlightBeads.filter((highlight) => {
+      return highlight.placeValue < abacusColumns
+    })
+  }, [currentStep.highlightBeads, abacusColumns])
+
  // Helper function to highlight the current mathematical term in the full decomposition
  const renderHighlightedDecomposition = useCallback(() => {
    if (!fullDecomposition || expectedSteps.length === 0) return null
@@ -519,16 +542,27 @@ function TutorialPlayerContent({
      return null
    }

+    // Validate that the bead is from a column that exists
+    if (topmostBead.placeValue >= abacusColumns) {
+      // Bead is from an invalid column, skip tooltip
+      return null
+    }
+
    // Smart positioning logic: avoid covering active beads
-    const targetColumnIndex = 4 - topmostBead.placeValue // Convert placeValue to columnIndex (5 columns: 0-4)
+    // Convert placeValue to columnIndex based on actual number of columns
+    const targetColumnIndex = abacusColumns - 1 - topmostBead.placeValue

    // Check if there are any active beads (against reckoning bar OR with arrows) in columns to the left
    const hasActiveBeadsToLeft = (() => {
      // Get current abacus state - we need to check which beads are against the reckoning bar
-      const abacusDigits = currentValue.toString().padStart(5, '0').split('').map(Number)
+      const abacusDigits = currentValue
+        .toString()
+        .padStart(abacusColumns, '0')
+        .split('')
+        .map(Number)

      for (let col = 0; col < targetColumnIndex; col++) {
-        const _placeValue = 4 - col // Convert columnIndex back to placeValue
+        const placeValue = abacusColumns - 1 - col // Convert columnIndex back to placeValue
        const digitValue = abacusDigits[col]

        // Check if any beads are active (against reckoning bar) in this column
@@ -544,7 +578,7 @@ function TutorialPlayerContent({
        // Also check if this column has beads with direction arrows (from current step)
        const hasArrowsInColumn =
          currentStepBeads?.some((bead) => {
-            const beadColumnIndex = 4 - bead.placeValue
+            const beadColumnIndex = abacusColumns - 1 - bead.placeValue
            return beadColumnIndex === col && bead.direction && bead.direction !== 'none'
          }) ?? false
        if (hasArrowsInColumn) {
@@ -606,7 +640,7 @@ function TutorialPlayerContent({
                  maxWidth: '200px',
                  minWidth: '150px',
                  wordBreak: 'break-word',
-                  zIndex: 1000,
+                  zIndex: 50,
                  opacity: 0.95,
                  transition: 'all 0.3s ease',
                  transform: showCelebration ? 'scale(1.05)' : 'scale(1)',
@@ -670,6 +704,7 @@ function TutorialPlayerContent({
    currentValue,
    currentStep,
    isMeaningfulDecomposition,
+    abacusColumns,
  ])

  // Timer for smart help detection
@@ -864,8 +899,8 @@ function TutorialPlayerContent({
      // Check if this is the correct action
      if (currentStep.highlightBeads && Array.isArray(currentStep.highlightBeads)) {
        const isCorrectBead = currentStep.highlightBeads.some((highlight) => {
-          // Get place value from highlight (convert columnIndex to placeValue if needed)
-          const highlightPlaceValue = highlight.placeValue ?? 4 - highlight.columnIndex
+          // Get place value from highlight
+          const highlightPlaceValue = highlight.placeValue
          // Get place value from bead click event
          const beadPlaceValue = beadInfo.bead ? beadInfo.bead.placeValue : 4 - beadInfo.columnIndex

@@ -876,10 +911,11 @@ function TutorialPlayerContent({
          )
        })

-        if (!isCorrectBead) {
+        if (!isCorrectBead && !silentErrors) {
+          const errorMessage = "That's not the highlighted bead. Try clicking the highlighted bead."
          dispatch({
            type: 'SET_ERROR',
-            error: currentStep.errorMessages.wrongBead,
+            error: errorMessage,
          })

          dispatch({
@@ -887,7 +923,7 @@ function TutorialPlayerContent({
            event: {
              type: 'ERROR_OCCURRED',
              stepId: currentStep.id,
-              error: currentStep.errorMessages.wrongBead,
+              error: errorMessage,
              timestamp: new Date(),
            },
          })
@@ -1003,14 +1039,21 @@ function TutorialPlayerContent({

  // Memoize custom styles calculation to avoid expensive recalculation on every render
  const customStyles = useMemo(() => {
+    // Calculate valid column range based on abacusColumns
+    const minValidColumn = 5 - abacusColumns
+
    // Start with static highlights from step configuration
    const staticHighlights: Record<number, any> = {}

    if (currentStep.highlightBeads && Array.isArray(currentStep.highlightBeads)) {
      currentStep.highlightBeads.forEach((highlight) => {
        // Convert placeValue to columnIndex for AbacusReact compatibility
-        const columnIndex =
-          highlight.placeValue !== undefined ? 4 - highlight.placeValue : highlight.columnIndex
+        const columnIndex = abacusColumns - 1 - highlight.placeValue
+
+        // Skip highlights for columns that don't exist
+        if (columnIndex < minValidColumn) {
+          return
+        }

        // Initialize column if it doesn't exist
        if (!staticHighlights[columnIndex]) {
@@ -1041,6 +1084,12 @@ function TutorialPlayerContent({
    const mergedHighlights = { ...staticHighlights }
    Object.keys(dynamicColumnHighlights).forEach((columnIndexStr) => {
      const columnIndex = parseInt(columnIndexStr, 10)
+
+      // Skip highlights for columns that don't exist
+      if (columnIndex < minValidColumn) {
+        return
+      }
+
      if (!mergedHighlights[columnIndex]) {
        mergedHighlights[columnIndex] = {}
      }
@@ -1048,8 +1097,32 @@ function TutorialPlayerContent({
      Object.assign(mergedHighlights[columnIndex], dynamicColumnHighlights[columnIndex])
    })

-    return Object.keys(mergedHighlights).length > 0 ? { columns: mergedHighlights } : undefined
-  }, [currentStep.highlightBeads, dynamicColumnHighlights])
+    // 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') {
+      // Column dividers (global for all columns)
+      styles.columnPosts = {
+        fill: 'rgba(255, 255, 255, 0.3)', // High contrast fill for visibility
+        stroke: 'rgba(255, 255, 255, 0.2)',
+        strokeWidth: 2,
+      }
+      // Reckoning bar (horizontal middle bar)
+      styles.reckoningBar = {
+        fill: 'rgba(255, 255, 255, 0.4)', // High contrast fill for visibility
+        stroke: 'rgba(255, 255, 255, 0.25)',
+        strokeWidth: 3,
+      }
+    }
+
+    return Object.keys(styles).length > 0 ? styles : undefined
+  }, [currentStep.highlightBeads, dynamicColumnHighlights, abacusColumns, theme])

  if (!currentStep) {
    return <div>No steps available</div>
@@ -1061,183 +1134,187 @@ function TutorialPlayerContent({
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
-        minHeight: '600px',
+        minHeight: hideNavigation ? 'auto' : '600px',
      })} ${className || ''}`}
    >
      {/* Header */}
-      <div
-        className={css({
-          borderBottom: '1px solid',
-          borderColor: 'gray.200',
-          p: 4,
-          bg: 'white',
-        })}
-      >
+      {!hideNavigation && (
        <div
-          className={hstack({
-            justifyContent: 'space-between',
-            alignItems: 'center',
+          className={css({
+            borderBottom: '1px solid',
+            borderColor: theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'gray.200',
+            p: 4,
+            bg: theme === 'dark' ? 'rgba(30, 30, 40, 0.6)' : 'white',
          })}
        >
-          <div>
-            <h1 className={css({ fontSize: 'xl', fontWeight: 'bold' })}>{tutorial.title}</h1>
-            <p className={css({ fontSize: 'sm', color: 'gray.600' })}>
-              Step {currentStepIndex + 1} of {tutorial.steps.length}: {currentStep.title}
-            </p>
-          </div>
-
-          <div className={hstack({ gap: 2 })}>
-            {isDebugMode && (
-              <>
-                <button
-                  onClick={toggleDebugPanel}
-                  className={css({
-                    px: 3,
-                    py: 1,
-                    fontSize: 'sm',
-                    border: '1px solid',
-                    borderColor: 'blue.300',
-                    borderRadius: 'md',
-                    bg: uiState.showDebugPanel ? 'blue.100' : 'white',
-                    color: 'blue.700',
-                    cursor: 'pointer',
-                    _hover: { bg: 'blue.50' },
-                  })}
-                >
-                  Debug
-                </button>
-                <button
-                  onClick={toggleStepList}
-                  className={css({
-                    px: 3,
-                    py: 1,
-                    fontSize: 'sm',
-                    border: '1px solid',
-                    borderColor: 'gray.300',
-                    borderRadius: 'md',
-                    bg: uiState.showStepList ? 'gray.100' : 'white',
-                    cursor: 'pointer',
-                    _hover: { bg: 'gray.50' },
-                  })}
-                >
-                  Steps
-                </button>
-
-                {/* Multi-step navigation controls */}
-                {currentStep.multiStepInstructions &&
-                  currentStep.multiStepInstructions.length > 1 && (
-                    <>
-                      <div
-                        className={css({
-                          fontSize: 'xs',
-                          color: 'gray.600',
-                          px: 2,
-                          borderLeft: '1px solid',
-                          borderColor: 'gray.300',
-                          ml: 2,
-                          pl: 3,
-                        })}
-                      >
-                        Multi-Step: {currentMultiStep + 1} /{' '}
-                        {currentStep.multiStepInstructions.length}
-                      </div>
-                      <button
-                        onClick={() => dispatch({ type: 'RESET_MULTI_STEP' })}
-                        disabled={currentMultiStep === 0}
-                        className={css({
-                          px: 2,
-                          py: 1,
-                          fontSize: 'xs',
-                          border: '1px solid',
-                          borderColor: currentMultiStep === 0 ? 'gray.200' : 'orange.300',
-                          borderRadius: 'md',
-                          bg: currentMultiStep === 0 ? 'gray.100' : 'white',
-                          color: currentMultiStep === 0 ? 'gray.400' : 'orange.700',
-                          cursor: currentMultiStep === 0 ? 'not-allowed' : 'pointer',
-                          _hover: currentMultiStep === 0 ? {} : { bg: 'orange.50' },
-                        })}
-                      >
-                        ⏮ First
-                      </button>
-                      <button
-                        onClick={() => previousMultiStep()}
-                        disabled={currentMultiStep === 0}
-                        className={css({
-                          px: 2,
-                          py: 1,
-                          fontSize: 'xs',
-                          border: '1px solid',
-                          borderColor: currentMultiStep === 0 ? 'gray.200' : 'orange.300',
-                          borderRadius: 'md',
-                          bg: currentMultiStep === 0 ? 'gray.100' : 'white',
-                          color: currentMultiStep === 0 ? 'gray.400' : 'orange.700',
-                          cursor: currentMultiStep === 0 ? 'not-allowed' : 'pointer',
-                          _hover: currentMultiStep === 0 ? {} : { bg: 'orange.50' },
-                        })}
-                      >
-                        ⏪ Prev
-                      </button>
-                      <button
-                        onClick={() => advanceMultiStep()}
-                        disabled={currentMultiStep >= currentStep.multiStepInstructions.length - 1}
-                        className={css({
-                          px: 2,
-                          py: 1,
-                          fontSize: 'xs',
-                          border: '1px solid',
-                          borderColor:
-                            currentMultiStep >= currentStep.multiStepInstructions.length - 1
-                              ? 'gray.200'
-                              : 'green.300',
-                          borderRadius: 'md',
-                          bg:
-                            currentMultiStep >= currentStep.multiStepInstructions.length - 1
-                              ? 'gray.100'
-                              : 'white',
-                          color:
-                            currentMultiStep >= currentStep.multiStepInstructions.length - 1
-                              ? 'gray.400'
-                              : 'green.700',
-                          cursor:
-                            currentMultiStep >= currentStep.multiStepInstructions.length - 1
-                              ? 'not-allowed'
-                              : 'pointer',
-                          _hover:
-                            currentMultiStep >= currentStep.multiStepInstructions.length - 1
-                              ? {}
-                              : { bg: 'green.50' },
-                        })}
-                      >
-                        Next ⏩
-                      </button>
-                    </>
-                  )}
-                <label className={hstack({ gap: 2, fontSize: 'sm' })}>
-                  <input
-                    type="checkbox"
-                    checked={uiState.autoAdvance}
-                    onChange={toggleAutoAdvance}
-                  />
-                  Auto-advance
-                </label>
-              </>
-            )}
-          </div>
-        </div>
-
-        {/* Progress bar */}
-        <div className={css({ mt: 2, bg: 'gray.200', borderRadius: 'full', h: 2 })}>
          <div
-            className={css({
-              bg: 'blue.500',
-              h: 'full',
-              borderRadius: 'full',
-              transition: 'width 0.3s ease',
+            className={hstack({
+              justifyContent: 'space-between',
+              alignItems: 'center',
            })}
-            style={{ width: `${navigationState.completionPercentage}%` }}
-          />
+          >
+            <div>
+              <h1 className={css({ fontSize: 'xl', fontWeight: 'bold' })}>{tutorial.title}</h1>
+              <p className={css({ fontSize: 'sm', color: 'gray.600' })}>
+                Step {currentStepIndex + 1} of {tutorial.steps.length}: {currentStep.title}
+              </p>
+            </div>
+
+            <div className={hstack({ gap: 2 })}>
+              {isDebugMode && (
+                <>
+                  <button
+                    onClick={toggleDebugPanel}
+                    className={css({
+                      px: 3,
+                      py: 1,
+                      fontSize: 'sm',
+                      border: '1px solid',
+                      borderColor: 'blue.300',
+                      borderRadius: 'md',
+                      bg: uiState.showDebugPanel ? 'blue.100' : 'white',
+                      color: 'blue.700',
+                      cursor: 'pointer',
+                      _hover: { bg: 'blue.50' },
+                    })}
+                  >
+                    Debug
+                  </button>
+                  <button
+                    onClick={toggleStepList}
+                    className={css({
+                      px: 3,
+                      py: 1,
+                      fontSize: 'sm',
+                      border: '1px solid',
+                      borderColor: 'gray.300',
+                      borderRadius: 'md',
+                      bg: uiState.showStepList ? 'gray.100' : 'white',
+                      cursor: 'pointer',
+                      _hover: { bg: 'gray.50' },
+                    })}
+                  >
+                    Steps
+                  </button>
+
+                  {/* Multi-step navigation controls */}
+                  {currentStep.multiStepInstructions &&
+                    currentStep.multiStepInstructions.length > 1 && (
+                      <>
+                        <div
+                          className={css({
+                            fontSize: 'xs',
+                            color: 'gray.600',
+                            px: 2,
+                            borderLeft: '1px solid',
+                            borderColor: 'gray.300',
+                            ml: 2,
+                            pl: 3,
+                          })}
+                        >
+                          Multi-Step: {currentMultiStep + 1} /{' '}
+                          {currentStep.multiStepInstructions.length}
+                        </div>
+                        <button
+                          onClick={() => dispatch({ type: 'RESET_MULTI_STEP' })}
+                          disabled={currentMultiStep === 0}
+                          className={css({
+                            px: 2,
+                            py: 1,
+                            fontSize: 'xs',
+                            border: '1px solid',
+                            borderColor: currentMultiStep === 0 ? 'gray.200' : 'orange.300',
+                            borderRadius: 'md',
+                            bg: currentMultiStep === 0 ? 'gray.100' : 'white',
+                            color: currentMultiStep === 0 ? 'gray.400' : 'orange.700',
+                            cursor: currentMultiStep === 0 ? 'not-allowed' : 'pointer',
+                            _hover: currentMultiStep === 0 ? {} : { bg: 'orange.50' },
+                          })}
+                        >
+                          ⏮ First
+                        </button>
+                        <button
+                          onClick={() => previousMultiStep()}
+                          disabled={currentMultiStep === 0}
+                          className={css({
+                            px: 2,
+                            py: 1,
+                            fontSize: 'xs',
+                            border: '1px solid',
+                            borderColor: currentMultiStep === 0 ? 'gray.200' : 'orange.300',
+                            borderRadius: 'md',
+                            bg: currentMultiStep === 0 ? 'gray.100' : 'white',
+                            color: currentMultiStep === 0 ? 'gray.400' : 'orange.700',
+                            cursor: currentMultiStep === 0 ? 'not-allowed' : 'pointer',
+                            _hover: currentMultiStep === 0 ? {} : { bg: 'orange.50' },
+                          })}
+                        >
+                          ⏪ Prev
+                        </button>
+                        <button
+                          onClick={() => advanceMultiStep()}
+                          disabled={
+                            currentMultiStep >= currentStep.multiStepInstructions.length - 1
+                          }
+                          className={css({
+                            px: 2,
+                            py: 1,
+                            fontSize: 'xs',
+                            border: '1px solid',
+                            borderColor:
+                              currentMultiStep >= currentStep.multiStepInstructions.length - 1
+                                ? 'gray.200'
+                                : 'green.300',
+                            borderRadius: 'md',
+                            bg:
+                              currentMultiStep >= currentStep.multiStepInstructions.length - 1
+                                ? 'gray.100'
+                                : 'white',
+                            color:
+                              currentMultiStep >= currentStep.multiStepInstructions.length - 1
+                                ? 'gray.400'
+                                : 'green.700',
+                            cursor:
+                              currentMultiStep >= currentStep.multiStepInstructions.length - 1
+                                ? 'not-allowed'
+                                : 'pointer',
+                            _hover:
+                              currentMultiStep >= currentStep.multiStepInstructions.length - 1
+                                ? {}
+                                : { bg: 'green.50' },
+                          })}
+                        >
+                          Next ⏩
+                        </button>
+                      </>
+                    )}
+                  <label className={hstack({ gap: 2, fontSize: 'sm' })}>
+                    <input
+                      type="checkbox"
+                      checked={uiState.autoAdvance}
+                      onChange={toggleAutoAdvance}
+                    />
+                    Auto-advance
+                  </label>
+                </>
+              )}
+            </div>
+          </div>
+
+          {/* Progress bar */}
+          <div className={css({ mt: 2, bg: 'gray.200', borderRadius: 'full', h: 2 })}>
+            <div
+              className={css({
+                bg: 'blue.500',
+                h: 'full',
+                borderRadius: 'full',
+                transition: 'width 0.3s ease',
+              })}
+              style={{ width: `${navigationState.completionPercentage}%` }}
+            />
+          </div>
        </div>
-      </div>
+      )}

      <div className={hstack({ flex: 1, gap: 0 })}>
        {/* Step list sidebar */}
@@ -1313,11 +1390,18 @@ function TutorialPlayerContent({
                    fontSize: '2xl',
                    fontWeight: 'bold',
                    mb: 2,
+                    color: theme === 'dark' ? 'gray.200' : 'gray.900',
                  })}
                >
                  {currentStep.problem}
                </h2>
-                <p className={css({ fontSize: 'lg', color: 'gray.700', mb: 4 })}>
+                <p
+                  className={css({
+                    fontSize: 'lg',
+                    color: theme === 'dark' ? 'gray.400' : 'gray.700',
+                    mb: 4,
+                  })}
+                >
                  {currentStep.description}
                </p>
                {/* Hide action description for multi-step problems since it duplicates pedagogical decomposition */}
@@ -1329,18 +1413,26 @@ function TutorialPlayerContent({
              </div>

              {/* Multi-step instructions panel */}
-              {currentStep.multiStepInstructions &&
+              {!hideTooltip &&
+                currentStep.multiStepInstructions &&
                currentStep.multiStepInstructions.length > 0 && (
                  <div
                    className={css({
                      p: 5,
                      background:
-                        'linear-gradient(135deg, rgba(255,248,225,0.95) 0%, rgba(254,252,232,0.95) 50%, rgba(255,245,157,0.15) 100%)',
+                        theme === 'dark'
+                          ? 'linear-gradient(135deg, rgba(40,40,50,0.6) 0%, rgba(50,50,60,0.6) 50%, rgba(60,50,70,0.3) 100%)'
+                          : 'linear-gradient(135deg, rgba(255,248,225,0.95) 0%, rgba(254,252,232,0.95) 50%, rgba(255,245,157,0.15) 100%)',
                      backdropFilter: 'blur(10px)',
-                      border: '1px solid rgba(251,191,36,0.3)',
+                      border:
+                        theme === 'dark'
+                          ? '1px solid rgba(255,255,255,0.1)'
+                          : '1px solid rgba(251,191,36,0.3)',
                      borderRadius: 'xl',
                      boxShadow:
-                        '0 8px 32px rgba(251,191,36,0.1), 0 2px 8px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6)',
+                        theme === 'dark'
+                          ? '0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05)'
+                          : '0 8px 32px rgba(251,191,36,0.1), 0 2px 8px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6)',
                      position: 'relative',
                      maxW: '600px',
                      w: 'full',
@@ -1350,7 +1442,9 @@ function TutorialPlayerContent({
                        inset: '0',
                        borderRadius: 'xl',
                        background:
-                          'linear-gradient(135deg, rgba(251,191,36,0.1) 0%, rgba(168,85,247,0.05) 100%)',
+                          theme === 'dark'
+                            ? 'linear-gradient(135deg, rgba(100,100,120,0.1) 0%, rgba(80,60,100,0.05) 100%)'
+                            : 'linear-gradient(135deg, rgba(251,191,36,0.1) 0%, rgba(168,85,247,0.05) 100%)',
                        zIndex: -1,
                      },
                    })}
@@ -1359,10 +1453,10 @@ function TutorialPlayerContent({
                      className={css({
                        fontSize: 'base',
                        fontWeight: '600',
-                        color: 'amber.900',
+                        color: theme === 'dark' ? 'gray.300' : 'amber.900',
                        mb: 4,
                        letterSpacing: 'wide',
-                        textShadow: '0 1px 2px rgba(0,0,0,0.1)',
+                        textShadow: theme === 'dark' ? 'none' : '0 1px 2px rgba(0,0,0,0.1)',
                      })}
                    >
                      Guidance
@@ -1375,18 +1469,25 @@ function TutorialPlayerContent({
                          mb: 4,
                          p: 3,
                          background:
-                            'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.9) 100%)',
-                          border: '1px solid rgba(203,213,225,0.4)',
+                            theme === 'dark'
+                              ? 'linear-gradient(135deg, rgba(50,50,60,0.4) 0%, rgba(40,40,50,0.5) 100%)'
+                              : 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.9) 100%)',
+                          border:
+                            theme === 'dark'
+                              ? '1px solid rgba(255,255,255,0.1)'
+                              : '1px solid rgba(203,213,225,0.4)',
                          borderRadius: 'lg',
                          boxShadow:
-                            '0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7)',
+                            theme === 'dark'
+                              ? '0 1px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05)'
+                              : '0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7)',
                          backdropFilter: 'blur(4px)',
                        })}
                      >
-                        <p
+                        <div
                          className={css({
                            fontSize: 'base',
-                            color: 'slate.800',
+                            color: theme === 'dark' ? 'gray.300' : 'slate.800',
                            fontFamily: 'mono',
                            fontWeight: '500',
                            letterSpacing: 'tight',
@@ -1398,14 +1499,14 @@ function TutorialPlayerContent({
                            termPositions={termPositions}
                            segments={pedagogicalSegments}
                          />
-                        </p>
+                        </div>
                      </div>
                    )}

                    <div
                      className={css({
                        fontSize: 'sm',
-                        color: 'amber.800',
+                        color: theme === 'dark' ? 'gray.400' : 'amber.800',
                        fontWeight: '500',
                        lineHeight: '1.6',
                      })}
@@ -1449,7 +1550,10 @@ function TutorialPlayerContent({
                              className={css({
                                mb: 1,
                                fontWeight: 'bold',
-                                color: 'yellow.900',
+                                color: theme === 'dark' ? 'yellow.200' : 'yellow.900',
+                                textShadow:
+                                  theme === 'dark' ? '0 0 12px rgba(251, 191, 36, 0.4)' : 'none',
+                                fontSize: theme === 'dark' ? 'lg' : 'base',
                              })}
                            >
                              {currentInstruction}
@@ -1483,17 +1587,17 @@ function TutorialPlayerContent({
              {/* Abacus */}
              <div
                className={css({
-                  bg: 'white',
+                  bg: theme === 'dark' ? 'rgba(30, 30, 40, 0.4)' : 'white',
                  border: '2px solid',
-                  borderColor: 'gray.200',
+                  borderColor: theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'gray.200',
                  borderRadius: 'lg',
                  p: 6,
-                  shadow: 'lg',
+                  shadow: theme === 'dark' ? '0 4px 6px rgba(0, 0, 0, 0.3)' : 'lg',
                })}
              >
                <AbacusReact
                  value={currentValue}
-                  columns={5}
+                  columns={abacusColumns}
                  interactive={true}
                  animated={true}
                  scaleFactor={2.5}
@@ -1502,7 +1606,7 @@ function TutorialPlayerContent({
                  hideInactiveBeads={abacusConfig.hideInactiveBeads}
                  soundEnabled={abacusConfig.soundEnabled}
                  soundVolume={abacusConfig.soundVolume}
-                  highlightBeads={currentStep.highlightBeads}
+                  highlightBeads={filteredHighlightBeads}
                  stepBeadHighlights={currentStepBeads}
                  currentStep={currentMultiStep}
                  showDirectionIndicators={true}
@@ -1567,7 +1671,7 @@ function TutorialPlayerContent({
              </div>

              {/* Tooltip */}
-              {currentStep.tooltip && (
+              {!hideTooltip && currentStep.tooltip && (
                <div
                  className={css({
                    maxW: '500px',
@@ -1596,57 +1700,60 @@ function TutorialPlayerContent({
          </div>

          {/* Navigation controls */}
-          <div
-            className={css({
-              borderTop: '1px solid',
-              borderColor: 'gray.200',
-              p: 4,
-              bg: 'gray.50',
-            })}
-          >
-            <div className={hstack({ justifyContent: 'space-between' })}>
-              <button
-                onClick={goToPreviousStep}
-                disabled={!navigationState.canGoPrevious}
-                className={css({
-                  px: 4,
-                  py: 2,
-                  border: '1px solid',
-                  borderColor: 'gray.300',
-                  borderRadius: 'md',
-                  bg: 'white',
-                  cursor: navigationState.canGoPrevious ? 'pointer' : 'not-allowed',
-                  opacity: navigationState.canGoPrevious ? 1 : 0.5,
-                  _hover: navigationState.canGoPrevious ? { bg: 'gray.50' } : {},
-                })}
-              >
-                ← Previous
-              </button>
+          {!hideNavigation && (
+            <div
+              className={css({
+                borderTop: '1px solid',
+                borderColor: 'gray.200',
+                p: 4,
+                bg: 'gray.50',
+              })}
+            >
+              <div className={hstack({ justifyContent: 'space-between' })}>
+                <button
+                  onClick={goToPreviousStep}
+                  disabled={!navigationState.canGoPrevious}
+                  className={css({
+                    px: 4,
+                    py: 2,
+                    border: '1px solid',
+                    borderColor: 'gray.300',
+                    borderRadius: 'md',
+                    bg: 'white',
+                    cursor: navigationState.canGoPrevious ? 'pointer' : 'not-allowed',
+                    opacity: navigationState.canGoPrevious ? 1 : 0.5,
+                    _hover: navigationState.canGoPrevious ? { bg: 'gray.50' } : {},
+                  })}
+                >
+                  ← Previous
+                </button>

-              <div className={css({ fontSize: 'sm', color: 'gray.600' })}>
-                Step {currentStepIndex + 1} of {navigationState.totalSteps}
+                <div className={css({ fontSize: 'sm', color: 'gray.600' })}>
+                  Step {currentStepIndex + 1} of {navigationState.totalSteps}
+                </div>
+
+                <button
+                  onClick={goToNextStep}
+                  disabled={!navigationState.canGoNext && !isStepCompleted}
+                  className={css({
+                    px: 4,
+                    py: 2,
+                    border: '1px solid',
+                    borderColor:
+                      navigationState.canGoNext || isStepCompleted ? 'blue.300' : 'gray.300',
+                    borderRadius: 'md',
+                    bg: navigationState.canGoNext || isStepCompleted ? 'blue.500' : 'gray.200',
+                    color: navigationState.canGoNext || isStepCompleted ? 'white' : 'gray.500',
+                    cursor:
+                      navigationState.canGoNext || isStepCompleted ? 'pointer' : 'not-allowed',
+                    _hover: navigationState.canGoNext || isStepCompleted ? { bg: 'blue.600' } : {},
+                  })}
+                >
+                  {navigationState.canGoNext ? 'Next →' : 'Complete Tutorial'}
+                </button>
              </div>
-
-              <button
-                onClick={goToNextStep}
-                disabled={!navigationState.canGoNext && !isStepCompleted}
-                className={css({
-                  px: 4,
-                  py: 2,
-                  border: '1px solid',
-                  borderColor:
-                    navigationState.canGoNext || isStepCompleted ? 'blue.300' : 'gray.300',
-                  borderRadius: 'md',
-                  bg: navigationState.canGoNext || isStepCompleted ? 'blue.500' : 'gray.200',
-                  color: navigationState.canGoNext || isStepCompleted ? 'white' : 'gray.500',
-                  cursor: navigationState.canGoNext || isStepCompleted ? 'pointer' : 'not-allowed',
-                  _hover: navigationState.canGoNext || isStepCompleted ? { bg: 'blue.600' } : {},
-                })}
-              >
-                {navigationState.canGoNext ? 'Next →' : 'Complete Tutorial'}
-              </button>
            </div>
-          </div>
+          )}
        </div>

        {/* Debug panel */}
--- a/apps/web/src/lib/arcade/game-themes.ts
+++ b/apps/web/src/lib/arcade/game-themes.ts
@@ -21,52 +21,52 @@ export const GAME_THEMES = {
  blue: {
    color: 'blue',
    gradient: 'linear-gradient(135deg, #dbeafe, #bfdbfe)', // blue.100 to blue.200
-    borderColor: 'blue.200',
+    borderColor: '#bfdbfe', // blue.200
  },
  purple: {
    color: 'purple',
    gradient: 'linear-gradient(135deg, #e9d5ff, #ddd6fe)', // purple.100 to purple.200
-    borderColor: 'purple.200',
+    borderColor: '#ddd6fe', // purple.200
  },
  green: {
    color: 'green',
    gradient: 'linear-gradient(135deg, #d1fae5, #a7f3d0)', // green.100 to green.200
-    borderColor: 'green.200',
+    borderColor: '#a7f3d0', // green.200
  },
  teal: {
    color: 'teal',
    gradient: 'linear-gradient(135deg, #ccfbf1, #99f6e4)', // teal.100 to teal.200
-    borderColor: 'teal.200',
+    borderColor: '#99f6e4', // teal.200
  },
  indigo: {
    color: 'indigo',
    gradient: 'linear-gradient(135deg, #e0e7ff, #c7d2fe)', // indigo.100 to indigo.200
-    borderColor: 'indigo.200',
+    borderColor: '#c7d2fe', // indigo.200
  },
  pink: {
    color: 'pink',
    gradient: 'linear-gradient(135deg, #fce7f3, #fbcfe8)', // pink.100 to pink.200
-    borderColor: 'pink.200',
+    borderColor: '#fbcfe8', // pink.200
  },
  orange: {
    color: 'orange',
    gradient: 'linear-gradient(135deg, #ffedd5, #fed7aa)', // orange.100 to orange.200
-    borderColor: 'orange.200',
+    borderColor: '#fed7aa', // orange.200
  },
  yellow: {
    color: 'yellow',
    gradient: 'linear-gradient(135deg, #fef3c7, #fde68a)', // yellow.100 to yellow.200
-    borderColor: 'yellow.200',
+    borderColor: '#fde68a', // yellow.200
  },
  red: {
    color: 'red',
    gradient: 'linear-gradient(135deg, #fee2e2, #fecaca)', // red.100 to red.200
-    borderColor: 'red.200',
+    borderColor: '#fecaca', // red.200
  },
  gray: {
    color: 'gray',
    gradient: 'linear-gradient(135deg, #f3f4f6, #e5e7eb)', // gray.100 to gray.200
-    borderColor: 'gray.200',
+    borderColor: '#e5e7eb', // gray.200
  },
 } as const satisfies Record<string, GameTheme>

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.15.0",
+  "version": "4.24.3",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
--- a/packages/abacus-react/src/AbacusReact.tsx
+++ b/packages/abacus-react/src/AbacusReact.tsx
@@ -27,6 +27,7 @@ export interface BeadStyle {
 }

 export interface ColumnPostStyle {
+  fill?: string;
  stroke?: string;
  strokeWidth?: number;
  opacity?: number;
@@ -34,6 +35,7 @@ export interface ColumnPostStyle {
 }

 export interface ReckoningBarStyle {
+  fill?: string;
  stroke?: string;
  strokeWidth?: number;
  opacity?: number;
@@ -1979,7 +1981,10 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
          const columnStyles = customStyles?.columns?.[colIndex];
          const globalColumnPosts = customStyles?.columnPosts;
          const rodStyle = {
-            fill: "rgb(0, 0, 0, 0.1)", // Default Typst color
+            fill:
+              columnStyles?.columnPost?.fill ||
+              globalColumnPosts?.fill ||
+              "rgb(0, 0, 0, 0.1)", // Default Typst color
            stroke:
              columnStyles?.columnPost?.stroke ||
              globalColumnPosts?.stroke ||
@@ -2017,8 +2022,10 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
            (effectiveColumns - 1) * dimensions.rodSpacing + dimensions.beadSize
          }
          height={dimensions.barThickness}
-          fill="black" // Typst uses black
-          stroke="none"
+          fill={customStyles?.reckoningBar?.fill || "black"} // Typst default is black
+          stroke={customStyles?.reckoningBar?.stroke || "none"}
+          strokeWidth={customStyles?.reckoningBar?.strokeWidth ?? 0}
+          opacity={customStyles?.reckoningBar?.opacity ?? 1}
        />

        {/* Beads */}