feat: add real-time bead movement feedback to tutorial UI

Surface the bead diff summary as "Next Action" hints in the Step-by-Step Instructions panel.
Provides real-time pedagogical feedback like "remove heaven bead in tens column, then add 4 earth beads in ones column"
to help users understand exactly what bead movements are needed for each step.

Features:
- Dynamic bead diff summary calculation for current step
- Styled feedback panel with blue color scheme
- Only shows when there are actual bead movements needed
- Updates in real-time as user progresses through multi-step sequences

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

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

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

@@ -245,9 +245,27 @@ export function TutorialPlayer({
     }
   }, [currentValue, currentStep.targetValue, expectedSteps, currentMultiStep])
 
+  // Get the current step's bead diff summary for real-time user feedback
+  const getCurrentStepSummary = useCallback(() => {
+    if (expectedSteps.length === 0) return null
+
+    const currentExpectedStep = expectedSteps[currentMultiStep]
+    if (!currentExpectedStep) return null
+
+    try {
+      const beadDiff = calculateBeadDiffFromValues(currentValue, currentExpectedStep.targetValue)
+      return beadDiff.hasChanges ? beadDiff.summary : null
+    } catch (error) {
+      return null
+    }
+  }, [currentValue, expectedSteps, currentMultiStep])
+
   // Get current step beads (dynamic arrows for static expected steps)
   const currentStepBeads = getCurrentStepBeads()
 
+  // Get current step summary for real-time user feedback
+  const currentStepSummary = getCurrentStepSummary()
+
   // Event logging - now just notifies parent, state is managed by reducer
   const notifyEvent = useCallback((event: TutorialEvent) => {
     onEvent?.(event)
@@ -815,6 +833,35 @@ export function TutorialPlayer({
                       </li>
                     ))}
                   </ol>
+
+                  {/* Real-time bead movement feedback */}
+                  {currentStepSummary && (
+                    <div className={css({
+                      mt: 3,
+                      p: 2,
+                      bg: 'blue.50',
+                      border: '1px solid',
+                      borderColor: 'blue.200',
+                      borderRadius: 'md',
+                      fontSize: 'xs'
+                    })}>
+                      <p className={css({
+                        fontSize: 'xs',
+                        fontWeight: 'medium',
+                        color: 'blue.800',
+                        mb: 1
+                      })}>
+                        Next Action:
+                      </p>
+                      <p className={css({
+                        fontSize: 'xs',
+                        color: 'blue.700',
+                        fontStyle: 'italic'
+                      })}>
+                        {currentStepSummary}
+                      </p>
+                    </div>
+                  )}
                 </div>
               )}