fix(levels): only animate abacus, not container with background/border

Fix React Spring animation to only affect the abacus itself, not the
container with background and border. Also keep container height fixed.

Changes:
- Move animation from container div to inner wrapper around AbacusReact
- Add minHeight to container to prevent height changes
- Add alignItems: 'center' to vertically center the abacus
- Container background/border now stays fixed while abacus animates

This provides a cleaner, more polished animation where only the abacus
scales smoothly while the container remains stable.

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

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

apps/web/src/app/levels/page.tsx

@@ -288,10 +288,11 @@ export default function LevelsPage() {
               </div>
 
               {/* Abacus Display */}
-              <animated.div
+              <div
                 className={css({
                   display: 'flex',
                   justifyContent: 'center',
+                  alignItems: 'center',
                   mb: '6',
                   p: '6',
                   bg: 'rgba(0, 0, 0, 0.3)',
@@ -299,19 +300,23 @@ export default function LevelsPage() {
                   border: '1px solid',
                   borderColor: 'gray.700',
                   overflowX: 'auto',
+                  minHeight: '400px',
                 })}
-                style={{
-                  transform: animatedProps.scaleFactor.to((s) => `scale(${s / scaleFactor})`),
-                }}
               >
-                <AbacusReact
+                <animated.div
-                  value={displayValue}
+                  style={{
-                  columns={currentLevel.digits}
+                    transform: animatedProps.scaleFactor.to((s) => `scale(${s / scaleFactor})`),
-                  scaleFactor={scaleFactor}
+                  }}
-                  showNumbers={true}
+                >
-                  customStyles={darkStyles}
+                  <AbacusReact
-                />
+                    value={displayValue}
-              </animated.div>
+                    columns={currentLevel.digits}
+                    scaleFactor={scaleFactor}
+                    showNumbers={true}
+                    customStyles={darkStyles}
+                  />
+                </animated.div>
+              </div>
 
               {/* Digit Count */}
               <div className={css({ textAlign: 'center', color: 'gray.400', fontSize: 'sm' })}>