chore(release): 4.26.0 [skip ci]

## [4.26.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.25.1...v4.26.0) (2025-10-20) ### Features * **levels:** add kyu level data and cards ([6463a3b](6463a3b2f6))
feat(levels): add kyu level data and cards
2025-10-20 12:15:15 +00:00 · 2025-10-20 07:14:16 -05:00 · 2025-10-20 12:08:33 +00:00 · 2025-10-20 07:07:34 -05:00 · 2025-10-20 11:51:46 +00:00 · 2025-10-20 06:50:35 -05:00
8 changed files with 1037 additions and 79 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,183 @@
+## [4.26.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.25.1...v4.26.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** add kyu level data and cards ([6463a3b](https://github.com/antialias/soroban-abacus-flashcards/commit/6463a3b2f6371ebebac1048197fb44178997d2ef))
+
+## [4.25.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.25.0...v4.25.1) (2025-10-20)
+
+
+### Code Refactoring
+
+* **homepage:** make entire "Your Journey" card clickable ([3f30810](https://github.com/antialias/soroban-abacus-flashcards/commit/3f30810271418f3acf3df17e41d9a897a3312c34))
+
+## [4.25.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.3...v4.25.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** add Kyu & Dan levels page with homepage link ([39b1e7d](https://github.com/antialias/soroban-abacus-flashcards/commit/39b1e7de16f15412c91cf648c714e31e2de7a6bc))
+
+
+### Styles
+
+* **homepage:** adjust journey emoji sizing and spacing ([2a0e469](https://github.com/antialias/soroban-abacus-flashcards/commit/2a0e469e83b99c88f091bfecd770e0b4c1cb6310))
+
+## [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)


--- 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/src/app/levels/page.tsx
+++ b/apps/web/src/app/levels/page.tsx
@@ -0,0 +1,423 @@
+'use client'
+
+import { PageWithNav } from '@/components/PageWithNav'
+import { css } from '../../../styled-system/css'
+import { container, grid, stack } from '../../../styled-system/patterns'
+
+// Kyu level data from the Japan Abacus Federation
+const kyuLevels = [
+  {
+    level: '10th Kyu',
+    emoji: '🧒',
+    color: 'green',
+    duration: '20 min',
+    passThreshold: '30%',
+    points: '60/200',
+    sections: [
+      { name: 'Addition', digits: '2-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '2-digit', problems: 10, points: 10 },
+    ],
+    notes: 'No division at this level',
+  },
+  {
+    level: '9th Kyu',
+    emoji: '🧒',
+    color: 'green',
+    duration: '20 min',
+    passThreshold: '60%',
+    points: '120/200',
+    sections: [
+      { name: 'Addition', digits: '2-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '2-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '1×1', problems: 10, points: 10 },
+    ],
+    notes: 'Introduces multiplication',
+  },
+  {
+    level: '8th Kyu',
+    emoji: '🧒',
+    color: 'green',
+    duration: '20 min',
+    passThreshold: '60%',
+    points: '120/200',
+    sections: [
+      { name: 'Addition', digits: '3-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '3-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '2×1', problems: 10, points: 10 },
+      { name: 'Division', digits: '2÷1', problems: 10, points: 10 },
+    ],
+    notes: 'Introduces division',
+  },
+  {
+    level: '7th Kyu',
+    emoji: '🧒',
+    color: 'green',
+    duration: '20 min',
+    passThreshold: '60%',
+    points: '120/200',
+    sections: [
+      { name: 'Addition', digits: '4-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '4-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '3×1', problems: 10, points: 10 },
+      { name: 'Division', digits: '3÷1', problems: 10, points: 10 },
+    ],
+    notes: 'All four operations',
+  },
+  {
+    level: '6th Kyu',
+    emoji: '🧑',
+    color: 'blue',
+    duration: '30 min',
+    passThreshold: '70%',
+    points: '210/300',
+    sections: [
+      { name: 'Addition', digits: '5-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '5-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '4×2', problems: 10, points: 10 },
+      { name: 'Division', digits: '5÷2', problems: 10, points: 10 },
+    ],
+    notes: 'Longer exam time',
+  },
+  {
+    level: '5th Kyu',
+    emoji: '🧑',
+    color: 'blue',
+    duration: '30 min',
+    passThreshold: '70%',
+    points: '210/300',
+    sections: [
+      { name: 'Addition', digits: '6-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '6-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '5×2', problems: 10, points: 10 },
+      { name: 'Division', digits: '6÷2', problems: 10, points: 10 },
+    ],
+    notes: 'Mid-level proficiency',
+  },
+  {
+    level: '4th Kyu',
+    emoji: '🧑',
+    color: 'blue',
+    duration: '30 min',
+    passThreshold: '70%',
+    points: '210/300',
+    sections: [
+      { name: 'Addition', digits: '7-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '7-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '6×2', problems: 10, points: 10 },
+      { name: 'Division', digits: '7÷2', problems: 10, points: 10 },
+    ],
+    notes: 'Advanced intermediate',
+  },
+  {
+    level: '3rd Kyu',
+    emoji: '🧔',
+    color: 'violet',
+    duration: '30 min',
+    passThreshold: '80%',
+    points: '240/300',
+    sections: [
+      { name: 'Addition', digits: '8-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '8-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '7×2', problems: 10, points: 10 },
+      { name: 'Division', digits: '8÷2', problems: 10, points: 10 },
+    ],
+    notes: 'Higher pass threshold (80%)',
+  },
+  {
+    level: '2nd Kyu',
+    emoji: '🧔',
+    color: 'violet',
+    duration: '30 min',
+    passThreshold: '80%',
+    points: '240/300',
+    sections: [
+      { name: 'Addition', digits: '9-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '9-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '8×2', problems: 10, points: 10 },
+      { name: 'Division', digits: '9÷2', problems: 10, points: 10 },
+    ],
+    notes: 'Near-mastery level',
+  },
+  {
+    level: '1st Kyu',
+    emoji: '🧔',
+    color: 'violet',
+    duration: '30 min',
+    passThreshold: '80%',
+    points: '240/300',
+    sections: [
+      { name: 'Addition', digits: '10-digit', problems: 10, points: 10 },
+      { name: 'Subtraction', digits: '10-digit', problems: 10, points: 10 },
+      { name: 'Multiplication', digits: '9×2', problems: 10, points: 10 },
+      { name: 'Division', digits: '10÷2', problems: 10, points: 10 },
+    ],
+    notes: 'Highest Kyu level before Dan',
+  },
+] as const
+
+export default function LevelsPage() {
+  return (
+    <PageWithNav navTitle="Kyu & Dan Levels" navEmoji="📊">
+      <div className={css({ bg: 'gray.900', minHeight: '100vh' })}>
+        {/* Hero Section */}
+        <div
+          className={css({
+            background:
+              'linear-gradient(135deg, rgba(17, 24, 39, 1) 0%, rgba(124, 58, 237, 0.3) 50%, rgba(17, 24, 39, 1) 100%)',
+            color: 'white',
+            py: { base: '12', md: '16' },
+            position: 'relative',
+            overflow: 'hidden',
+          })}
+        >
+          {/* Background pattern */}
+          <div
+            className={css({
+              position: 'absolute',
+              inset: 0,
+              opacity: 0.1,
+              backgroundImage:
+                'radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0)',
+              backgroundSize: '40px 40px',
+            })}
+          />
+
+          <div className={container({ maxW: '6xl', px: '4', position: 'relative' })}>
+            <div className={css({ textAlign: 'center', maxW: '5xl', mx: 'auto' })}>
+              {/* Main headline */}
+              <h1
+                className={css({
+                  fontSize: { base: '3xl', md: '5xl', lg: '6xl' },
+                  fontWeight: 'bold',
+                  mb: '4',
+                  lineHeight: 'tight',
+                  background: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)',
+                  backgroundClip: 'text',
+                  color: 'transparent',
+                })}
+              >
+                Understanding Kyu & Dan Levels
+              </h1>
+
+              {/* Subtitle */}
+              <p
+                className={css({
+                  fontSize: { base: 'lg', md: 'xl' },
+                  color: 'gray.300',
+                  mb: '6',
+                  maxW: '3xl',
+                  mx: 'auto',
+                  lineHeight: '1.6',
+                })}
+              >
+                Learn about the official Japanese soroban ranking system used by the Japan Abacus
+                Federation
+              </p>
+
+              {/* Journey progression emojis */}
+              <div
+                className={css({
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  gap: '4',
+                  mb: '8',
+                  flexWrap: 'wrap',
+                })}
+              >
+                {[
+                  { emoji: '🧒', label: '10 Kyu' },
+                  { emoji: '→', label: '', isArrow: true },
+                  { emoji: '🧑', label: '5 Kyu' },
+                  { emoji: '→', label: '', isArrow: true },
+                  { emoji: '🧔', label: '1 Kyu' },
+                  { emoji: '→', label: '', isArrow: true },
+                  { emoji: '🧙', label: 'Dan' },
+                ].map((step, i) => (
+                  <div
+                    key={i}
+                    className={css({
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'center',
+                      gap: '1',
+                      opacity: step.isArrow ? 0.5 : 1,
+                    })}
+                  >
+                    <div
+                      className={css({
+                        fontSize: step.isArrow ? 'xl' : '4xl',
+                        color: step.isArrow ? 'gray.500' : 'yellow.400',
+                      })}
+                    >
+                      {step.emoji}
+                    </div>
+                    {step.label && (
+                      <div className={css({ fontSize: 'xs', color: 'gray.400' })}>{step.label}</div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Main content container */}
+        <div className={container({ maxW: '7xl', px: '4', py: '12' })}>
+          {/* Kyu Levels Section */}
+          <section className={stack({ gap: '8' })}>
+            <div className={css({ textAlign: 'center' })}>
+              <h2
+                className={css({
+                  fontSize: { base: '2xl', md: '3xl' },
+                  fontWeight: 'bold',
+                  color: 'white',
+                  mb: '4',
+                })}
+              >
+                Kyu Levels (10th to 1st)
+              </h2>
+              <p className={css({ color: 'gray.400', fontSize: 'md', mb: '8' })}>
+                Progress from beginner to advanced mastery
+              </p>
+            </div>
+
+            {/* Kyu Level Cards */}
+            <div className={grid({ columns: { base: 1, md: 2, lg: 3 }, gap: '6' })}>
+              {kyuLevels.map((kyu, index) => (
+                <div
+                  key={index}
+                  className={css({
+                    bg: 'rgba(0, 0, 0, 0.4)',
+                    border: '1px solid',
+                    borderColor:
+                      kyu.color === 'green'
+                        ? 'green.700'
+                        : kyu.color === 'blue'
+                          ? 'blue.700'
+                          : 'violet.700',
+                    rounded: 'xl',
+                    p: '6',
+                    transition: 'all 0.2s',
+                    _hover: {
+                      bg: 'rgba(0, 0, 0, 0.5)',
+                      borderColor:
+                        kyu.color === 'green'
+                          ? 'green.500'
+                          : kyu.color === 'blue'
+                            ? 'blue.500'
+                            : 'violet.500',
+                      transform: 'translateY(-2px)',
+                    },
+                  })}
+                >
+                  {/* Card Header */}
+                  <div
+                    className={css({ display: 'flex', alignItems: 'center', gap: '3', mb: '4' })}
+                  >
+                    <div className={css({ fontSize: '3xl' })}>{kyu.emoji}</div>
+                    <div>
+                      <h3
+                        className={css({
+                          fontSize: 'xl',
+                          fontWeight: 'bold',
+                          color:
+                            kyu.color === 'green'
+                              ? 'green.400'
+                              : kyu.color === 'blue'
+                                ? 'blue.400'
+                                : 'violet.400',
+                        })}
+                      >
+                        {kyu.level}
+                      </h3>
+                      <p className={css({ fontSize: 'sm', color: 'gray.400' })}>{kyu.notes}</p>
+                    </div>
+                  </div>
+
+                  {/* Exam Details */}
+                  <div className={stack({ gap: '3' })}>
+                    <div
+                      className={css({
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        fontSize: 'sm',
+                      })}
+                    >
+                      <span className={css({ color: 'gray.400' })}>Duration:</span>
+                      <span className={css({ color: 'white', fontWeight: '500' })}>
+                        {kyu.duration}
+                      </span>
+                    </div>
+                    <div
+                      className={css({
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        fontSize: 'sm',
+                      })}
+                    >
+                      <span className={css({ color: 'gray.400' })}>Pass Threshold:</span>
+                      <span className={css({ color: 'amber.400', fontWeight: '600' })}>
+                        {kyu.passThreshold}
+                      </span>
+                    </div>
+                    <div
+                      className={css({
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        fontSize: 'sm',
+                      })}
+                    >
+                      <span className={css({ color: 'gray.400' })}>Points Needed:</span>
+                      <span className={css({ color: 'white', fontWeight: '500' })}>
+                        {kyu.points}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Sections */}
+                  <div
+                    className={css({
+                      mt: '4',
+                      pt: '4',
+                      borderTop: '1px solid',
+                      borderColor: 'gray.700',
+                    })}
+                  >
+                    <div
+                      className={css({
+                        fontSize: 'xs',
+                        color: 'gray.500',
+                        mb: '2',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.05em',
+                      })}
+                    >
+                      Problem Types
+                    </div>
+                    {kyu.sections.map((section, i) => (
+                      <div
+                        key={i}
+                        className={css({
+                          display: 'flex',
+                          justifyContent: 'space-between',
+                          fontSize: 'sm',
+                          py: '1',
+                        })}
+                      >
+                        <span className={css({ color: 'gray.300' })}>{section.name}</span>
+                        <span className={css({ color: 'gray.400', fontSize: 'xs' })}>
+                          {section.digits}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+        </div>
+      </div>
+    </PageWithNav>
+  )
+}
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,11 +1,65 @@
 '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 { 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}
+          customStyles={darkStyles}
+        />
+      </div>
+    </div>
+  )
+}

 export default function HomePage() {
  // Extract just the "Friends of 5" step (2+3=5) for homepage demo
@@ -215,51 +269,170 @@ export default function HomePage() {
                border: '1px solid',
                borderColor: 'gray.700',
                shadow: 'lg',
-                maxW: '900px',
+                maxW: '1200px',
                mx: 'auto',
              })}
            >
-              <TutorialPlayer
-                tutorial={friendsOf5Tutorial}
-                isDebugMode={false}
-                showDebugPanel={false}
-                hideNavigation={true}
-                abacusColumns={2}
-                theme="dark"
-              />
-
-              {/* What you'll learn - below tutorial */}
              <div
                className={css({
-                  mt: '8',
-                  pt: '6',
-                  borderTop: '1px solid',
-                  borderColor: 'gray.700',
+                  display: 'flex',
+                  flexDirection: { base: 'column', md: 'row' },
+                  gap: '8',
+                  alignItems: { base: 'center', md: 'flex-start' },
                })}
              >
-                <h3
+                {/* 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({
-                    fontSize: 'xl',
-                    fontWeight: 'bold',
-                    color: 'white',
-                    mb: '4',
-                    textAlign: 'center',
+                    flex: '0 0 auto',
+                    minW: '340px',
+                    maxW: { base: '100%', md: '420px' },
                  })}
                >
-                  What You'll Learn
-                </h3>
-                <div className={grid({ columns: { base: 1, sm: 2 }, 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: 'sm' })}>{skill}</span>
-                    </div>
-                  ))}
+                  <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',
+                              width: '75px',
+                              height: '115px',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              textAlign: 'center',
+                              bg: 'rgba(255, 255, 255, 0.1)',
+                              borderRadius: 'lg',
+                            })}
+                          >
+                            {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>
@@ -378,20 +551,47 @@ 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
+            <Link
+              href="/levels"
              className={css({
                bg: 'rgba(0, 0, 0, 0.4)',
                border: '1px solid',
                borderColor: 'gray.700',
                rounded: 'xl',
                p: '8',
+                display: 'block',
+                transition: 'all 0.2s',
+                cursor: 'pointer',
+                position: 'relative',
+                _hover: {
+                  bg: 'rgba(0, 0, 0, 0.5)',
+                  borderColor: 'violet.500',
+                  transform: 'translateY(-2px)',
+                  boxShadow: '0 8px 16px rgba(124, 58, 237, 0.2)',
+                },
              })}
            >
+              {/* Subtle arrow indicator */}
+              <div
+                className={css({
+                  position: 'absolute',
+                  top: '4',
+                  right: '4',
+                  fontSize: 'xl',
+                  color: 'gray.500',
+                  transition: 'all 0.2s',
+                  _groupHover: {
+                    color: 'violet.400',
+                    transform: 'translateX(4px)',
+                  },
+                })}
+              >
+                →
+              </div>
+
              <div
                className={css({
                  display: 'flex',
@@ -401,31 +601,67 @@ 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', emoji: '🧒' },
+                    {
+                      level: '5 Kyu',
+                      label: 'Intermediate',
+                      color: 'colors.blue.400',
+                      emoji: '🧑',
+                    },
+                    { level: '1 Kyu', label: 'Advanced', color: 'colors.violet.400', emoji: '🧔' },
+                    { level: 'Dan', label: 'Master', color: 'colors.amber.400', emoji: '🧙' },
+                  ] as const
+                ).map((stage, i) => (
+                  <div
+                    key={i}
+                    className={stack({
+                      gap: '0',
+                      textAlign: 'center',
+                      flex: '1',
+                      position: 'relative',
+                    })}
+                  >
+                    <div
+                      className={css({
+                        fontSize: '5xl',
+                        mb: '0',
+                      })}
+                    >
+                      {stage.emoji}
+                    </div>
                    <div
                      className={css({
                        fontSize: 'xl',
                        fontWeight: 'bold',
-                        color: stage.color,
+                        mt: '-2',
                      })}
+                      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',
                        })}
                      >
                        →
@@ -435,17 +671,19 @@ 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 ↑
+                Click to learn about the official Japanese ranking system →
              </div>
-            </div>
+            </Link>
          </section>

          {/* Additional Tools Section */}
--- a/apps/web/src/components/tutorial/TutorialPlayer.tsx
+++ b/apps/web/src/components/tutorial/TutorialPlayer.tsx
@@ -216,6 +216,8 @@ interface TutorialPlayerProps {
  isDebugMode?: boolean
  showDebugPanel?: boolean
  hideNavigation?: boolean
+  hideTooltip?: boolean
+  silentErrors?: boolean
  abacusColumns?: number
  theme?: 'light' | 'dark'
  onStepChange?: (stepIndex: number, step: TutorialStep) => void
@@ -231,6 +233,8 @@ function TutorialPlayerContent({
  isDebugMode = false,
  showDebugPanel = false,
  hideNavigation = false,
+  hideTooltip = false,
+  silentErrors = false,
  abacusColumns = 5,
  theme = 'light',
  onStepChange,
@@ -437,8 +441,7 @@ function TutorialPlayerContent({
  const filteredHighlightBeads = useMemo(() => {
    if (!currentStep.highlightBeads) return undefined
    return currentStep.highlightBeads.filter((highlight) => {
-      const placeValue = highlight.placeValue ?? 4 - (highlight.columnIndex ?? 0)
-      return placeValue < abacusColumns
+      return highlight.placeValue < abacusColumns
    })
  }, [currentStep.highlightBeads, abacusColumns])

@@ -637,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)',
@@ -896,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

@@ -908,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({
@@ -919,7 +923,7 @@ function TutorialPlayerContent({
            event: {
              type: 'ERROR_OCCURRED',
              stepId: currentStep.id,
-              error: currentStep.errorMessages.wrongBead,
+              error: errorMessage,
              timestamp: new Date(),
            },
          })
@@ -1044,8 +1048,7 @@ function TutorialPlayerContent({
    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) {
@@ -1094,8 +1097,32 @@ 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') {
+      // 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>
@@ -1115,9 +1142,9 @@ function TutorialPlayerContent({
        <div
          className={css({
            borderBottom: '1px solid',
-            borderColor: 'gray.200',
+            borderColor: theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'gray.200',
            p: 4,
-            bg: 'white',
+            bg: theme === 'dark' ? 'rgba(30, 30, 40, 0.6)' : 'white',
          })}
        >
          <div
@@ -1386,7 +1413,8 @@ function TutorialPlayerContent({
              </div>

              {/* Multi-step instructions panel */}
-              {currentStep.multiStepInstructions &&
+              {!hideTooltip &&
+                currentStep.multiStepInstructions &&
                currentStep.multiStepInstructions.length > 0 && (
                  <div
                    className={css({
@@ -1522,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}
@@ -1640,7 +1671,7 @@ function TutorialPlayerContent({
              </div>

              {/* Tooltip */}
-              {currentStep.tooltip && (
+              {!hideTooltip && currentStep.tooltip && (
                <div
                  className={css({
                    maxW: '500px',
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.17.2",
+  "version": "4.26.0",
  "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 */}