fix(guide): make abacus sizes consistent and add nav spacing

Fixed inconsistent abacus sizing in guide:
- Replaced aspect ratio containers with fixed dimensions
- Single-digit abacuses: 120px × 240px (consistent vertical layout)
- Multi-digit abacuses: 180px × 200px (horizontal layout)
- Added inner wrapper div for proper AbacusReact sizing
- Centered containers with mx: 'auto'
- Adjusted scale factors for better fit (0.7 and 0.8)

Also added with-fixed-nav class to guide page to prevent white bar
under navigation.

Fixes: Inconsistent abacus sizes in guide page screenshot

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

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

apps/web/src/app/guide/components/ReadingNumbersGuide.tsx

@@ -263,12 +263,11 @@ export function ReadingNumbersGuide() {
                   {example.num}
                 </div>
 
-                {/* Aspect ratio container for soroban - roughly 1:3 ratio */}
+                {/* Fixed size container for consistent abacus rendering */}
                 <div
                   className={css({
-                    width: '100%',
+                    width: '120px',
-                    aspectRatio: '1/2.8',
+                    height: '240px',
-                    maxW: '120px',
                     bg: 'white',
                     border: '1px solid',
                     borderColor: 'gray.300',
@@ -278,19 +277,22 @@ export function ReadingNumbersGuide() {
                     alignItems: 'center',
                     justifyContent: 'center',
                     overflow: 'hidden',
+                    mx: 'auto',
                   })}
                 >
-                  <AbacusReact
+                  <div className={css({ width: '100%', height: '100%' })}>
-                    value={example.num}
+                    <AbacusReact
-                    columns={1}
+                      value={example.num}
-                    beadShape={appConfig.beadShape}
+                      columns={1}
-                    colorScheme={appConfig.colorScheme}
+                      beadShape={appConfig.beadShape}
-                    hideInactiveBeads={appConfig.hideInactiveBeads}
+                      colorScheme={appConfig.colorScheme}
-                    scaleFactor={0.8}
+                      hideInactiveBeads={appConfig.hideInactiveBeads}
-                    interactive={false}
+                      scaleFactor={0.7}
-                    showNumbers={false}
+                      interactive={false}
-                    animated={true}
+                      showNumbers={false}
-                  />
+                      animated={true}
+                    />
+                  </div>
                 </div>
 
                 <p
@@ -487,12 +489,11 @@ export function ReadingNumbersGuide() {
                     {example.num}
                   </div>
 
-                  {/* Larger container for multi-digit numbers */}
+                  {/* Fixed size container for multi-digit numbers */}
                   <div
                     className={css({
-                      width: '100%',
+                      width: '180px',
-                      aspectRatio: '3/4',
+                      height: '200px',
-                      maxW: '180px',
                       bg: 'gray.50',
                       border: '1px solid',
                       borderColor: 'blue.200',
@@ -502,19 +503,22 @@ export function ReadingNumbersGuide() {
                       alignItems: 'center',
                       justifyContent: 'center',
                       overflow: 'hidden',
+                      mx: 'auto',
                     })}
                   >
-                    <AbacusReact
+                    <div className={css({ width: '100%', height: '100%' })}>
-                      value={example.num}
+                      <AbacusReact
-                      columns={'auto'}
+                        value={example.num}
-                      beadShape={appConfig.beadShape}
+                        columns={'auto'}
-                      colorScheme={appConfig.colorScheme}
+                        beadShape={appConfig.beadShape}
-                      hideInactiveBeads={appConfig.hideInactiveBeads}
+                        colorScheme={appConfig.colorScheme}
-                      scaleFactor={0.9}
+                        hideInactiveBeads={appConfig.hideInactiveBeads}
-                      interactive={false}
+                        scaleFactor={0.8}
-                      showNumbers={false}
+                        interactive={false}
-                      animated={true}
+                        showNumbers={false}
-                    />
+                        animated={true}
+                      />
+                    </div>
                   </div>
 
                   <p

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

@@ -16,7 +16,7 @@ export default function GuidePage() {
 
   return (
     <PageWithNav navTitle={t('navTitle')} navEmoji="📖">
-      <div className={css({ minHeight: '100vh', bg: 'gray.50' })}>
+      <div className={`with-fixed-nav ${css({ minHeight: '100vh', bg: 'gray.50' })}`}>
         {/* Hero Section */}
         <div
           className={css({