fix: correct AbacusReact API usage and add structural styling

Fixed critical issues based on storybook examples:
- Changed callback syntax: onValueChange prop directly (not in callbacks object)
- Added reckoningBar styling: golden stroke (#fbbf24, 4px width)
- Added columnPosts styling: purple stroke (#a78bfa, 3px width)
- Now structural elements are visible on dark background and interactive works

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

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

apps/web/src/app/page.tsx

@@ -93,10 +93,16 @@ export default function HomePage() {
                       fontWeight: 'bold',
                       fontSize: '18px',
                     },
+                    reckoningBar: {
+                      stroke: '#fbbf24',
+                      strokeWidth: 4,
+                    },
+                    columnPosts: {
+                      stroke: '#a78bfa',
+                      strokeWidth: 3,
+                    },
                   }}
-                  callbacks={{
-                    onValueChange: (newValue: number) => setAbacusValue(newValue),
-                  }}
+                  onValueChange={(newValue: number) => setAbacusValue(newValue)}
                 />
                 <div
                   className={css({