fix(homepage): fix MiniAbacus runtime error and improve sizing

Fix "Cannot read properties of undefined (reading 'earthActive')" error by:
- Adding 500ms initialization delay before starting value cycling
- Starting with value 123 instead of 0 to show valid state immediately
- Splitting ready state management into separate useEffect

Also improve container sizing:
- Set explicit width (75px) and height (75px)
- Add transform scale(0.7) to fit better in card icon space
- Add overflow hidden to contain the component
- Increase cycle interval to 2.5s for smoother transitions

The error occurred because the AbacusReact component was trying to access
column states before they were fully initialized. The delay ensures proper
initialization before animation starts.

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

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

apps/web/src/app/page.tsx

@@ -12,32 +12,46 @@ import { token } from '../../styled-system/tokens'
 
 // Mini abacus that cycles through random 3-digit numbers
 function MiniAbacus() {
-  const [currentValue, setCurrentValue] = useState(0)
+  const [currentValue, setCurrentValue] = useState(123)
+  const [isReady, setIsReady] = useState(false)
   const abacusConfig = useAbacusConfig({
     abacusColumns: 3,
     theme: 'dark',
   })
 
   useEffect(() => {
-    // Cycle through random 3-digit numbers every 2 seconds
+    // Give the abacus a moment to initialize before starting animation
+    const readyTimer = setTimeout(() => setIsReady(true), 500)
+
+    return () => clearTimeout(readyTimer)
+  }, [])
+
+  useEffect(() => {
+    if (!isReady) return
+
+    // Cycle through random 3-digit numbers every 2.5 seconds
     const interval = setInterval(() => {
       const randomNum = Math.floor(Math.random() * 1000) // 0-999
       setCurrentValue(randomNum)
-    }, 2000)
+    }, 2500)
 
     return () => clearInterval(interval)
-  }, [])
+  }, [isReady])
 
   return (
     <div
       className={css({
         height: '75px',
+        width: '75px',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        overflow: 'hidden',
       })}
     >
-      <AbacusReact value={currentValue} config={abacusConfig} />
+      <div className={css({ transform: 'scale(0.7)' })}>
+        <AbacusReact value={currentValue} config={abacusConfig} />
+      </div>
     </div>
   )
 }