feat: make 404 page abacus hero-sized and responsive

Scale the interactive 404 abacus to match the hero section sizing with
responsive breakpoints:
- Mobile (base): 1.5x scale
- Small (sm): 2x scale
- Medium (md): 2.5x scale
- Large (lg): 3x scale

Prevent layout dominance on small screens with maxWidth constraints
and centered positioning.

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

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

apps/web/src/app/not-found.tsx

@@ -177,17 +177,32 @@ export default function NotFound() {
           {/* Interactive Abacus */}
           <div
             className={css({
-              transform: 'scale(1.2)',
-              transformOrigin: 'center',
               position: 'relative',
+              width: '100%',
+              maxWidth: { base: '90vw', sm: '500px', md: '600px', lg: '700px' },
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
             })}
           >
-            <AbacusReact
+            <div
-              value={abacusValue}
+              className={css({
-              columns={3}
+                transform: {
-              showNumbers={false}
+                  base: 'scale(1.5)',
-              onValueChange={setAbacusValue}
+                  sm: 'scale(2)',
-            />
+                  md: 'scale(2.5)',
+                  lg: 'scale(3)',
+                },
+                transformOrigin: 'center',
+              })}
+            >
+              <AbacusReact
+                value={abacusValue}
+                columns={3}
+                showNumbers={false}
+                onValueChange={setAbacusValue}
+              />
+            </div>
           </div>
 
           {/* Main message */}