chore(release): 4.46.2 [skip ci]

## [4.46.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.46.1...v4.46.2) (2025-10-20)

### Bug Fixes

* **types:** properly type HomeHeroContext in AppNavBar ([f9a7cb7](f9a7cb7f05))

CHANGELOG.md

@@ -1,3 +1,105 @@
+## [4.46.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.46.1...v4.46.2) (2025-10-20)
+
+
+### Bug Fixes
+
+* **types:** properly type HomeHeroContext in AppNavBar ([f9a7cb7](https://github.com/antialias/soroban-abacus-flashcards/commit/f9a7cb7f05dfddf291d89212a77ba1c11c00c9c7))
+
+## [4.46.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.46.0...v4.46.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **hero-abacus:** restructure layout to prevent visual overlap ([02b6c70](https://github.com/antialias/soroban-abacus-flashcards/commit/02b6c70b7a52f7de2954e5e0efddbed64d419d6c))
+
+## [4.46.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.45.0...v4.46.0) (2025-10-20)
+
+
+### Features
+
+* **homepage:** add full-page hero abacus with scroll-based nav transition ([d8ec642](https://github.com/antialias/soroban-abacus-flashcards/commit/d8ec64280ec0c2f44f2fd9c72a93a882481f650b))
+
+
+### Bug Fixes
+
+* **homepage:** improve hero abacus sizing and layout ([230f1dc](https://github.com/antialias/soroban-abacus-flashcards/commit/230f1dcd866e5b3625e19f7400f5eae478fe7d0c))
+
+
+### Styles
+
+* **hero-abacus:** apply dark theme to match homepage styling ([e0b6a2e](https://github.com/antialias/soroban-abacus-flashcards/commit/e0b6a2e88b3ebbaae41ed54f23f9e514604d2262))
+
+## [4.45.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.44.3...v4.45.0) (2025-10-20)
+
+
+### Features
+
+* **branding:** rebrand navigation from 'Soroban Generator' to 'Abaci One' ([cce8980](https://github.com/antialias/soroban-abacus-flashcards/commit/cce8980e177da1b3c344e46561d928ed98b86f6c))
+
+## [4.44.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.44.2...v4.44.3) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** reduce operator box sizes and remove divider line ([29d20a6](https://github.com/antialias/soroban-abacus-flashcards/commit/29d20a6c0741e7427f2bb64bc9c3e950b1a3238a))
+* **levels:** use uniform padding on operator box grid ([2818fd1](https://github.com/antialias/soroban-abacus-flashcards/commit/2818fd15cacac78de6d86ba769b9b2a02800ed1e))
+
+## [4.44.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.44.1...v4.44.2) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** match top/bottom margins to left padding on kyu detail boxes ([aa0bdcf](https://github.com/antialias/soroban-abacus-flashcards/commit/aa0bdcf686adcbfd1a145cf67121181d1f1194d9))
+
+## [4.44.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.44.0...v4.44.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** add fixed dimensions and margins to kyu detail boxes ([05dd0b3](https://github.com/antialias/soroban-abacus-flashcards/commit/05dd0b30d3c397b82b7b7cc93a5ea575f3aada6d))
+
+## [4.44.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.43.2...v4.44.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** redesign kyu details with larger operators and prominent digits ([6739d59](https://github.com/antialias/soroban-abacus-flashcards/commit/6739d59f2b6189a98570e23e04c20d86d774ccce))
+
+## [4.43.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.43.1...v4.43.2) (2025-10-20)
+
+
+### Code Refactoring
+
+* **levels:** remove Time and Pass sections from kyu details ([d90b5d5](https://github.com/antialias/soroban-abacus-flashcards/commit/d90b5d55322e75dd28b95376614663a506c829d4))
+
+## [4.43.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.43.0...v4.43.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** use two-column grid for kyu details to prevent clipping ([fa3b73c](https://github.com/antialias/soroban-abacus-flashcards/commit/fa3b73c69169b4694201ffa19ae3f8b5a68dfe32))
+
+## [4.43.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.42.1...v4.43.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** add structured kyu exam details with card UI ([6501b07](https://github.com/antialias/soroban-abacus-flashcards/commit/6501b073b100a00982cff1ca3140921e74f31a9c))
+
+## [4.42.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.42.0...v4.42.1) (2025-10-20)
+
+
+### Code Refactoring
+
+* **levels:** store kyu data verbatim, add formatting layer ([53d23f1](https://github.com/antialias/soroban-abacus-flashcards/commit/53d23f19bc06459462afb76ed94d9b99d583a32d))
+
+## [4.42.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.41.0...v4.42.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** add kyu level details display with English translations ([c650ffa](https://github.com/antialias/soroban-abacus-flashcards/commit/c650ffa1935fe370d37190b2843c0deecdcce8e7))
+
 ## [4.41.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.40.1...v4.41.0) (2025-10-20)
 
 

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

@@ -7,6 +7,7 @@ import { AbacusReact, StandaloneBead } from '@soroban/abacus-react'
 import { PageWithNav } from '@/components/PageWithNav'
 import { css } from '../../../styled-system/css'
 import { container, stack } from '../../../styled-system/patterns'
+import { kyuLevelDetails } from '@/data/kyuLevelDetails'
 
 // Combine all levels into one array for the slider
 const allLevels = [
@@ -181,6 +182,85 @@ const allLevels = [
   },
 ] as const
 
+// Helper function to map level names to kyuLevelDetails keys
+function getLevelDetailsKey(levelName: string): string | null {
+  // Convert "10th Kyu" → "10-kyu", "3rd Kyu" → "3-kyu", etc.
+  const match = levelName.match(/^(\d+)(?:st|nd|rd|th)\s+Kyu$/)
+  if (match) {
+    return `${match[1]}-kyu`
+  }
+  return null
+}
+
+// Parse and format kyu level details into structured sections with icons
+function parseKyuDetails(rawText: string) {
+  const lines = rawText.split('\n').filter((line) => line.trim() && !line.includes('shuzan.jp'))
+
+  // Always return sections in consistent order: Add/Sub, Multiply, Divide
+  const sections: Array<{
+    type: 'addSub' | 'multiply' | 'divide'
+    icon: string
+    label: string
+    digits: string | null
+    rows: string | null
+    chars: string | null
+    problems: string | null
+  }> = [
+    {
+      type: 'addSub',
+      icon: '➕➖',
+      label: 'Add/Sub',
+      digits: null,
+      rows: null,
+      chars: null,
+      problems: null,
+    },
+    {
+      type: 'multiply',
+      icon: '✖️',
+      label: 'Multiply',
+      digits: null,
+      rows: null,
+      chars: null,
+      problems: null,
+    },
+    {
+      type: 'divide',
+      icon: '➗',
+      label: 'Divide',
+      digits: null,
+      rows: null,
+      chars: null,
+      problems: null,
+    },
+  ]
+
+  for (const line of lines) {
+    if (line.includes('Add/Sub:')) {
+      const match = line.match(/(\d+)-digit.*?(\d+)口.*?(\d+)字/)
+      if (match) {
+        sections[0].digits = match[1]
+        sections[0].rows = match[2]
+        sections[0].chars = match[3]
+      }
+    } else if (line.includes('×:')) {
+      const match = line.match(/(\d+) digits.*?\((\d+)/)
+      if (match) {
+        sections[1].digits = match[1]
+        sections[1].problems = match[2]
+      }
+    } else if (line.includes('÷:')) {
+      const match = line.match(/(\d+) digits.*?\((\d+)/)
+      if (match) {
+        sections[2].digits = match[1]
+        sections[2].problems = match[2]
+      }
+    }
+  }
+
+  return sections
+}
+
 export default function LevelsPage() {
   const [currentIndex, setCurrentIndex] = useState(0)
   const [isHovering, setIsHovering] = useState(false)
@@ -576,12 +656,11 @@ export default function LevelsPage() {
                 </div>
               </div>
 
-              {/* Abacus Display */}
+              {/* Abacus Display with Level Details */}
               <div
                 className={css({
                   display: 'flex',
-                  justifyContent: 'flex-end',
-                  alignItems: 'center',
+                  gap: '4',
                   p: '6',
                   bg: 'rgba(0, 0, 0, 0.3)',
                   rounded: 'lg',
@@ -591,19 +670,145 @@ export default function LevelsPage() {
                   flex: 1,
                 })}
               >
-                <animated.div
-                  style={{
-                    transform: animatedProps.scaleFactor.to((s) => `scale(${s / scaleFactor})`),
-                  }}
+                {/* Level Details (only for Kyu levels) */}
+                {currentLevel.type === 'kyu' &&
+                  (() => {
+                    const detailsKey = getLevelDetailsKey(currentLevel.level)
+                    const rawText = detailsKey
+                      ? kyuLevelDetails[detailsKey as keyof typeof kyuLevelDetails]
+                      : null
+                    const sections = rawText ? parseKyuDetails(rawText) : []
+
+                    // Use consistent sizing across all levels
+                    const sizing = { fontSize: 'md', gap: '3', iconSize: '4xl' }
+
+                    return sections.length > 0 ? (
+                      <div
+                        className={css({
+                          flex: '0 0 auto',
+                          display: 'grid',
+                          gridTemplateColumns: 'repeat(2, 1fr)',
+                          gap: '2',
+                          p: '2',
+                          maxW: '400px',
+                          alignContent: 'center',
+                        })}
+                      >
+                        {sections.map((section, idx) => {
+                          const hasData = section.digits !== null
+                          const levelColor =
+                            currentLevel.color === 'green'
+                              ? 'green.300'
+                              : currentLevel.color === 'blue'
+                                ? 'blue.300'
+                                : 'violet.300'
+
+                          return (
+                            <div
+                              key={idx}
+                              className={css({
+                                bg: hasData ? 'rgba(0, 0, 0, 0.4)' : 'rgba(0, 0, 0, 0.2)',
+                                border: '1px solid',
+                                borderColor: hasData ? 'gray.700' : 'gray.800',
+                                rounded: 'md',
+                                p: '3',
+                                transition: 'all 0.2s',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                gap: '1.5',
+                                opacity: hasData ? 1 : 0.3,
+                                width: '170px',
+                                height: '150px',
+                                _hover: hasData
+                                  ? {
+                                      borderColor: 'gray.500',
+                                      transform: 'scale(1.05)',
+                                    }
+                                  : {},
+                              })}
+                            >
+                              <span className={css({ fontSize: sizing.iconSize, lineHeight: '1' })}>
+                                {section.icon}
+                              </span>
+                              {hasData && section.digits && (
+                                <>
+                                  <div
+                                    className={css({
+                                      fontSize: '2xl',
+                                      fontWeight: 'bold',
+                                      color: levelColor,
+                                    })}
+                                  >
+                                    {section.digits} digits
+                                  </div>
+                                  {(section.rows || section.chars) && (
+                                    <div
+                                      className={css({
+                                        fontSize: 'sm',
+                                        color: 'gray.400',
+                                        textAlign: 'center',
+                                      })}
+                                    >
+                                      {section.rows && `${section.rows} rows`}
+                                      {section.rows && section.chars && ' • '}
+                                      {section.chars && `${section.chars} chars`}
+                                    </div>
+                                  )}
+                                  {section.problems && (
+                                    <div
+                                      className={css({
+                                        fontSize: 'sm',
+                                        color: 'gray.400',
+                                        textAlign: 'center',
+                                      })}
+                                    >
+                                      {section.problems} problems
+                                    </div>
+                                  )}
+                                </>
+                              )}
+                              <div
+                                className={css({
+                                  fontSize: 'xs',
+                                  color: hasData ? 'gray.500' : 'gray.700',
+                                  textAlign: 'center',
+                                  fontWeight: hasData ? 'normal' : 'bold',
+                                })}
+                              >
+                                {section.label}
+                              </div>
+                            </div>
+                          )
+                        })}
+                      </div>
+                    ) : null
+                  })()}
+
+                {/* Abacus (right-aligned for Kyu, centered for Dan) */}
+                <div
+                  className={css({
+                    display: 'flex',
+                    justifyContent: currentLevel.type === 'kyu' ? 'flex-end' : 'center',
+                    alignItems: 'center',
+                    flex: 1,
+                  })}
                 >
-                  <AbacusReact
-                    value={displayValue}
-                    columns={currentLevel.digits}
-                    scaleFactor={scaleFactor}
-                    showNumbers={true}
-                    customStyles={darkStyles}
-                  />
-                </animated.div>
+                  <animated.div
+                    style={{
+                      transform: animatedProps.scaleFactor.to((s) => `scale(${s / scaleFactor})`),
+                    }}
+                  >
+                    <AbacusReact
+                      value={displayValue}
+                      columns={currentLevel.digits}
+                      scaleFactor={scaleFactor}
+                      showNumbers={true}
+                      customStyles={darkStyles}
+                    />
+                  </animated.div>
+                </div>
               </div>
 
               {/* Digit Count */}

apps/web/src/components/AppNavBar.tsx

@@ -1,15 +1,41 @@
 'use client'
 
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import * as Tooltip from '@radix-ui/react-tooltip'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
-import React, { useState } from 'react'
+import React, { useContext, useMemo, useState } from 'react'
 import { css } from '../../styled-system/css'
 import { container, hstack } from '../../styled-system/patterns'
 import { Z_INDEX } from '../constants/zIndex'
 import { useFullscreen } from '../contexts/FullscreenContext'
+import { getRandomSubtitle } from '../data/abaciOneSubtitles'
 import { AbacusDisplayDropdown } from './AbacusDisplayDropdown'
 
+// Import HomeHeroContext for optional usage
+import type { Subtitle } from '../data/abaciOneSubtitles'
+
+type HomeHeroContextValue = {
+  subtitle: Subtitle
+  isHeroVisible: boolean
+} | null
+
+// HomeHeroContext - imported dynamically to avoid circular deps
+let HomeHeroContextModule: any = null
+try {
+  HomeHeroContextModule = require('../contexts/HomeHeroContext')
+} catch {
+  // Context not available
+}
+
+const HomeHeroContext: React.Context<HomeHeroContextValue> =
+  HomeHeroContextModule?.HomeHeroContext || React.createContext<HomeHeroContextValue>(null)
+
+// Use HomeHeroContext without requiring it
+function useOptionalHomeHero(): HomeHeroContextValue {
+  return useContext(HomeHeroContext)
+}
+
 interface AppNavBarProps {
   variant?: 'full' | 'minimal'
   navSlot?: React.ReactNode
@@ -514,6 +540,17 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
   const isArcadePage = pathname?.startsWith('/arcade')
   const { isFullscreen, toggleFullscreen, exitFullscreen } = useFullscreen()
 
+  // Try to get home hero context (if on homepage)
+  const homeHero = useOptionalHomeHero()
+
+  // Select a random subtitle once on mount (performance: won't change on re-renders)
+  // Use homeHero subtitle if available, otherwise generate one
+  const fallbackSubtitle = useMemo(() => getRandomSubtitle(), [])
+  const subtitle = homeHero?.subtitle || fallbackSubtitle
+
+  // Show branding unless we're on homepage with visible hero
+  const showBranding = !homeHero || !homeHero.isHeroVisible
+
   // Auto-detect variant based on context
   const actualVariant = variant === 'full' && (isGamePage || isArcadePage) ? 'minimal' : variant
 
@@ -533,53 +570,128 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
   }
 
   return (
-    <header
-      className={css({
-        bg: 'white',
-        shadow: 'sm',
-        borderBottom: '1px solid',
-        borderColor: 'gray.200',
-        position: 'sticky',
-        top: 0,
-        zIndex: 30,
-      })}
-    >
-      <div className={container({ maxW: '7xl', px: '4', py: '3' })}>
-        <div className={hstack({ justify: 'space-between', alignItems: 'center' })}>
-          {/* Logo */}
-          <Link
-            href="/"
-            className={css({
-              fontSize: 'xl',
-              fontWeight: 'bold',
-              color: 'brand.800',
-              textDecoration: 'none',
-              _hover: { color: 'brand.900' },
-            })}
-          >
-            🧮 Soroban Generator
-          </Link>
+    <Tooltip.Provider delayDuration={200}>
+      <header
+        className={css({
+          bg: 'white',
+          shadow: 'sm',
+          borderBottom: '1px solid',
+          borderColor: 'gray.200',
+          position: 'sticky',
+          top: 0,
+          zIndex: 30,
+        })}
+      >
+        <div className={container({ maxW: '7xl', px: '4', py: '3' })}>
+          <div className={hstack({ justify: 'space-between', alignItems: 'center' })}>
+            {/* Logo - conditionally shown based on hero visibility */}
+            {showBranding ? (
+              <Link
+                href="/"
+                className={css({
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '0',
+                  textDecoration: 'none',
+                  _hover: { '& > .brand-name': { color: 'brand.900' } },
+                  opacity: 0,
+                  animation: 'fadeIn 0.3s ease-out forwards',
+                })}
+              >
+                <span
+                  className={css({
+                    fontSize: 'xl',
+                    fontWeight: 'bold',
+                    color: 'brand.800',
+                  })}
+                >
+                  🧮 Abaci One
+                </span>
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <span
+                      className={css({
+                        fontSize: 'xs',
+                        fontWeight: 'medium',
+                        color: 'brand.600',
+                        fontStyle: 'italic',
+                        cursor: 'help',
+                        _hover: { color: 'brand.700' },
+                      })}
+                    >
+                      {subtitle.text}
+                    </span>
+                  </Tooltip.Trigger>
+                  <Tooltip.Portal>
+                    <Tooltip.Content
+                      side="bottom"
+                      align="start"
+                      sideOffset={4}
+                      className={css({
+                        bg: 'gray.900',
+                        color: 'white',
+                        px: '3',
+                        py: '2',
+                        rounded: 'md',
+                        fontSize: 'sm',
+                        maxW: '250px',
+                        shadow: 'lg',
+                        zIndex: 50,
+                      })}
+                    >
+                      {subtitle.description}
+                      <Tooltip.Arrow
+                        className={css({
+                          fill: 'gray.900',
+                        })}
+                      />
+                    </Tooltip.Content>
+                  </Tooltip.Portal>
+                </Tooltip.Root>
+              </Link>
+            ) : (
+              <div />
+            )}
 
-          <div className={hstack({ gap: '6', alignItems: 'center' })}>
-            {/* Navigation Links */}
-            <nav className={hstack({ gap: '4' })}>
-              <NavLink href="/create" currentPath={pathname}>
-                Create
-              </NavLink>
-              <NavLink href="/guide" currentPath={pathname}>
-                Guide
-              </NavLink>
-              <NavLink href="/games" currentPath={pathname}>
-                Games
-              </NavLink>
-            </nav>
+            <div className={hstack({ gap: '6', alignItems: 'center' })}>
+              {/* Navigation Links */}
+              <nav className={hstack({ gap: '4' })}>
+                <NavLink href="/create" currentPath={pathname}>
+                  Create
+                </NavLink>
+                <NavLink href="/guide" currentPath={pathname}>
+                  Guide
+                </NavLink>
+                <NavLink href="/games" currentPath={pathname}>
+                  Games
+                </NavLink>
+              </nav>
 
-            {/* Abacus Style Dropdown */}
-            <AbacusDisplayDropdown isFullscreen={false} />
+              {/* Abacus Style Dropdown */}
+              <AbacusDisplayDropdown isFullscreen={false} />
+            </div>
           </div>
         </div>
-      </div>
-    </header>
+      </header>
+
+      {/* Keyframes for fade-in animation */}
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+            @keyframes fadeIn {
+              from {
+                opacity: 0;
+                transform: translateY(-5px);
+              }
+              to {
+                opacity: 1;
+                transform: translateY(0);
+              }
+            }
+          `,
+        }}
+      />
+    </Tooltip.Provider>
   )
 }
 

apps/web/src/components/HeroAbacus.tsx

@@ -0,0 +1,193 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
+import { css } from '../../styled-system/css'
+import { useHomeHero } from '../contexts/HomeHeroContext'
+
+export function HeroAbacus() {
+  const { subtitle, abacusValue, setAbacusValue, setIsHeroVisible } = useHomeHero()
+  const appConfig = useAbacusConfig()
+  const heroRef = useRef<HTMLDivElement>(null)
+
+  // Dark theme styles for the abacus (matching the mini abacus on homepage)
+  const darkStyles = {
+    columnPosts: {
+      fill: 'rgba(255, 255, 255, 0.3)',
+      stroke: 'rgba(255, 255, 255, 0.2)',
+      strokeWidth: 2,
+    },
+    reckoningBar: {
+      fill: 'rgba(255, 255, 255, 0.4)',
+      stroke: 'rgba(255, 255, 255, 0.25)',
+      strokeWidth: 3,
+    },
+  }
+
+  // Detect when hero scrolls out of view
+  useEffect(() => {
+    if (!heroRef.current) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        // Hero is visible if more than 20% is in viewport
+        setIsHeroVisible(entry.intersectionRatio > 0.2)
+      },
+      {
+        threshold: [0, 0.2, 0.5, 1],
+      }
+    )
+
+    observer.observe(heroRef.current)
+
+    return () => observer.disconnect()
+  }, [setIsHeroVisible])
+
+  // Auto-cycle through random numbers (optional - user can also interact)
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const randomNum = Math.floor(Math.random() * 10000) // 0-9999
+      setAbacusValue(randomNum)
+    }, 4000)
+
+    return () => clearInterval(interval)
+  }, [setAbacusValue])
+
+  return (
+    <div
+      ref={heroRef}
+      className={css({
+        minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background:
+          'linear-gradient(135deg, rgba(17, 24, 39, 1) 0%, rgba(88, 28, 135, 0.3) 50%, rgba(17, 24, 39, 1) 100%)',
+        position: 'relative',
+        overflow: 'hidden',
+        px: '4',
+      })}
+    >
+      {/* Background pattern */}
+      <div
+        className={css({
+          position: 'absolute',
+          inset: 0,
+          opacity: 0.1,
+          backgroundImage:
+            'radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0)',
+          backgroundSize: '40px 40px',
+        })}
+      />
+
+      {/* Content */}
+      <div
+        className={css({
+          position: 'relative',
+          textAlign: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          height: '100%',
+          py: '12',
+        })}
+      >
+        {/* Title and Subtitle Section */}
+        <div
+          className={css({
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '4',
+          })}
+        >
+          <h1
+            className={css({
+              fontSize: { base: '4xl', md: '6xl', lg: '7xl' },
+              fontWeight: 'bold',
+              background: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)',
+              backgroundClip: 'text',
+              color: 'transparent',
+            })}
+          >
+            Abaci One
+          </h1>
+          <p
+            className={css({
+              fontSize: { base: 'xl', md: '2xl' },
+              fontWeight: 'medium',
+              color: 'purple.300',
+              fontStyle: 'italic',
+            })}
+          >
+            {subtitle.text}
+          </p>
+        </div>
+
+        {/* Large Interactive Abacus - centered in remaining space */}
+        <div
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: '1',
+            width: '100%',
+            py: { base: '12', md: '16', lg: '20' },
+          })}
+        >
+          <div
+            className={css({
+              transform: { base: 'scale(2)', md: 'scale(3)', lg: 'scale(4)' },
+              transformOrigin: 'center center',
+              transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+            })}
+          >
+            <AbacusReact
+              value={abacusValue}
+              columns={4}
+              beadShape={appConfig.beadShape}
+              showNumbers={true}
+              customStyles={darkStyles}
+            />
+          </div>
+        </div>
+
+        {/* Subtle hint to scroll */}
+        <div
+          className={css({
+            fontSize: 'sm',
+            color: 'gray.400',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '2',
+            animation: 'bounce 2s ease-in-out infinite',
+          })}
+        >
+          <span>Scroll to explore</span>
+          <span>↓</span>
+        </div>
+      </div>
+
+      {/* Keyframes for bounce animation */}
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+            @keyframes bounce {
+              0%, 100% {
+                transform: translateY(0);
+                opacity: 0.7;
+              }
+              50% {
+                transform: translateY(-10px);
+                opacity: 1;
+              }
+            }
+          `,
+        }}
+      />
+    </div>
+  )
+}

apps/web/src/contexts/HomeHeroContext.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import type React from 'react'
+import { createContext, useContext, useEffect, useMemo, useState } from 'react'
+import type { Subtitle } from '../data/abaciOneSubtitles'
+import { getRandomSubtitle, subtitles } from '../data/abaciOneSubtitles'
+
+interface HomeHeroContextValue {
+  subtitle: Subtitle
+  abacusValue: number
+  setAbacusValue: (value: number) => void
+  isHeroVisible: boolean
+  setIsHeroVisible: (visible: boolean) => void
+}
+
+const HomeHeroContext = createContext<HomeHeroContextValue | null>(null)
+
+export { HomeHeroContext }
+
+export function HomeHeroProvider({ children }: { children: React.ReactNode }) {
+  // Use first subtitle for SSR, then select random one on client mount
+  const [subtitle, setSubtitle] = useState<Subtitle>(subtitles[0])
+
+  // Select random subtitle only on client side to avoid SSR mismatch
+  useEffect(() => {
+    setSubtitle(getRandomSubtitle())
+  }, [])
+
+  // Shared abacus value (so it stays consistent during morph)
+  const [abacusValue, setAbacusValue] = useState(1234)
+
+  // Track hero visibility for nav branding
+  const [isHeroVisible, setIsHeroVisible] = useState(true)
+
+  const value = useMemo(
+    () => ({
+      subtitle,
+      abacusValue,
+      setAbacusValue,
+      isHeroVisible,
+      setIsHeroVisible,
+    }),
+    [subtitle, abacusValue, isHeroVisible]
+  )
+
+  return <HomeHeroContext.Provider value={value}>{children}</HomeHeroContext.Provider>
+}
+
+export function useHomeHero() {
+  const context = useContext(HomeHeroContext)
+  if (!context) {
+    throw new Error('useHomeHero must be used within HomeHeroProvider')
+  }
+  return context
+}

apps/web/src/data/abaciOneSubtitles.ts

@@ -0,0 +1,97 @@
+/**
+ * Abaci One subtitle options with descriptions
+ * Three-word rhyming subtitles for the main app navigation
+ */
+
+export interface Subtitle {
+  text: string
+  description: string
+}
+
+export const subtitles: Subtitle[] = [
+  { text: 'Speed Bead Lead', description: 'blaze through bead races' },
+  { text: 'Rod Mod Nod', description: 'tweak rod technique, approval earned' },
+  { text: 'Grid Kid Lid', description: 'lock in neat grid habits' },
+  { text: 'Count Mount Amount', description: 'stack up that number sense' },
+  { text: 'Stack Track Tack', description: 'line up beads, lock in sums' },
+  { text: 'Quick Flick Trick', description: 'rapid-fire bead tactics' },
+  { text: 'Flash Dash Math', description: 'fly through numeric challenges' },
+  { text: 'Slide Glide Pride', description: 'smooth soroban strokes' },
+  { text: 'Shift Sift Gift', description: 'sort beads, reveal talent' },
+  { text: 'Beat Seat Meet', description: 'compete head-to-head' },
+  { text: 'Brain Train Gain', description: 'mental math muscle building' },
+  { text: 'Flow Show Pro', description: 'demonstrate soroban mastery' },
+  { text: 'Fast Blast Past', description: 'surpass speed limits' },
+  { text: 'Snap Tap Map', description: 'chart your calculation path' },
+  { text: 'Row Grow Know', description: 'advance through structured drills' },
+  { text: 'Drill Skill Thrill', description: 'practice that excites' },
+  { text: 'Think Link Sync', description: 'connect mind and beads' },
+  { text: 'Boost Joust Roost', description: 'power up, compete, settle in' },
+  { text: 'Add Grad Rad', description: 'level up addition awesomely' },
+  { text: 'Sum Fun Run', description: 'enjoy the arithmetic sprint' },
+  { text: 'Track Stack Pack', description: 'organize solutions systematically' },
+  { text: 'Beat Neat Feat', description: 'clean victories, impressive wins' },
+  { text: 'Math Path Wrath', description: 'dominate numeric challenges' },
+  { text: 'Spark Mark Arc', description: 'ignite progress, track growth' },
+  { text: 'Race Pace Ace', description: 'speed up, master it' },
+  { text: 'Flex Hex Reflex', description: 'adapt calculations instantly' },
+  { text: 'Glide Pride Stride', description: 'smooth confident progress' },
+  { text: 'Flash Dash Smash', description: 'speed through, crush totals' },
+  { text: 'Stack Attack Jack', description: 'aggressive bead strategies' },
+  { text: 'Quick Pick Click', description: 'rapid bead selection' },
+  { text: 'Snap Map Tap', description: 'visualize and execute' },
+  { text: 'Mind Find Grind', description: 'discover mental endurance' },
+  { text: 'Flip Skip Rip', description: 'fast transitions, tear through' },
+  { text: 'Blend Trend Send', description: 'mix methods, share progress' },
+  { text: 'Power Tower Hour', description: 'build skills intensively' },
+  { text: 'Launch Staunch Haunch', description: 'start strong, stay firm' },
+  { text: 'Rush Crush Hush', description: 'speed quietly dominates' },
+  { text: 'Swipe Stripe Hype', description: 'sleek moves, excitement' },
+  { text: 'Train Gain Sustain', description: 'build lasting ability' },
+  { text: 'Frame Claim Flame', description: 'structure your fire' },
+  { text: 'Streak Peak Tweak', description: 'hot runs, optimize performance' },
+  { text: 'Edge Pledge Wedge', description: 'commit to precision' },
+  { text: 'Pace Grace Space', description: 'rhythm, elegance, room to grow' },
+  { text: 'Link Think Brink', description: 'connect at breakthrough edge' },
+  { text: 'Quest Test Best', description: 'challenge yourself to excel' },
+  { text: 'Drive Thrive Arrive', description: 'push hard, succeed, reach goals' },
+  { text: 'Smart Start Chart', description: 'begin wisely, track progress' },
+  { text: 'Boost Coast Toast', description: 'accelerate, cruise, celebrate' },
+  { text: 'Spark Dark Embark', description: 'ignite before dawn journeys' },
+  { text: 'Blaze Graze Amaze', description: 'burn through, touch lightly, wow' },
+  { text: 'Shift Drift Gift', description: 'adapt smoothly, reveal talent' },
+  { text: 'Zone Hone Own', description: 'focus, refine, claim mastery' },
+  { text: 'Vault Halt Exalt', description: 'leap high, pause, celebrate' },
+  { text: 'Peak Seek Streak', description: 'find heights, maintain momentum' },
+  { text: 'Glow Show Grow', description: 'shine, display, expand' },
+  { text: 'Scope Hope Rope', description: 'survey possibilities, climb up' },
+  { text: 'Core Score More', description: 'fundamentals yield better results' },
+  { text: 'Rank Bank Thank', description: 'earn status, save wins, appreciate' },
+  { text: 'Merge Surge Verge', description: 'combine forces, power up, edge closer' },
+  { text: 'Bold Gold Hold', description: 'brave attempts, prize rewards, maintain' },
+  { text: 'Rise Prize Wise', description: 'ascend, win, learn' },
+  { text: 'Move Groove Prove', description: 'act, find rhythm, demonstrate' },
+  { text: 'Trust Thrust Adjust', description: 'believe, push, refine' },
+  { text: 'Beam Dream Team', description: 'radiate, aspire, collaborate' },
+  { text: 'Spin Win Grin', description: 'rotate beads, succeed, smile' },
+  { text: 'String Ring Bring', description: 'connect, cycle, deliver' },
+  { text: 'Clear Gear Steer', description: 'focus, equip, direct' },
+  { text: 'Path Math Aftermath', description: 'route, calculate, results' },
+  { text: 'Play Slay Day', description: 'engage, dominate, own it' },
+  { text: 'Code Mode Road', description: 'pattern, style, journey' },
+  { text: 'Craft Draft Shaft', description: 'build, sketch, core structure' },
+  { text: 'Light Might Fight', description: 'illuminate, empower, compete' },
+  { text: 'Stream Dream Extreme', description: 'flow, envision, push limits' },
+  { text: 'Claim Frame Aim', description: 'assert, structure, target' },
+  { text: 'Chart Smart Start', description: 'map, intelligent, begin' },
+  { text: 'Bright Flight Height', description: 'brilliant, soar, elevation' },
+]
+
+/**
+ * Get a random subtitle from the list
+ * Uses current timestamp as seed for variety across sessions
+ */
+export function getRandomSubtitle(): Subtitle {
+  const index = Math.floor(Math.random() * subtitles.length)
+  return subtitles[index]
+}

apps/web/src/data/kyuLevelDetails.ts

@@ -0,0 +1,123 @@
+/**
+ * Detailed requirements for each Kyu level in the Soroban certification system
+ * Source: shuzan.jp
+ *
+ * Note: Stored verbatim from source. Display formatting/translation happens in the UI layer.
+ */
+
+export const kyuLevelDetails = {
+  '10-kyu': `Add/Sub: 2-digit, 5口, 10字
+
+×: 実+法 = 3 digits (20 problems)
+
+Time: 20 min; Pass ≥ 60/200.
+shuzan.jp`,
+
+  '9-kyu': `Add/Sub: 2-digit, 5口, 10字
+
+×: 実+法 = 3 digits (20)
+
+Time: 20 min; Pass ≥ 120/200. (If only one part clears, it's treated as 10-kyu per federation notes.)
+shuzan.jp`,
+
+  '8-kyu': `Add/Sub: 2-digit, 8口, 16字
+
+×: 実+法 = 4 digits (10)
+
+÷: 法+商 = 3 digits (10)
+
+Time: 20 min; Pass ≥ 120/200.
+shuzan.jp`,
+
+  '7-kyu': `Add/Sub: 2-digit, 10口, 20字
+
+×: 実+法 = 4 digits (10)
+
+÷: 法+商 = 4 digits (10)
+
+Time: 20 min; Pass ≥ 120/200.
+shuzan.jp`,
+
+  '6-kyu': `Add/Sub: 10口, 30字
+
+×: 実+法 = 5 digits (20)
+
+÷: 法+商 = 4 digits (20)
+
+Time: 30 min; Pass ≥ 210/300.
+shuzan.jp`,
+
+  '5-kyu': `Add/Sub: 10口, 40字
+
+×: 実+法 = 6 digits (20)
+
+÷: 法+商 = 5 digits (20)
+
+Time: 30 min; Pass ≥ 210/300.
+shuzan.jp`,
+
+  '4-kyu': `Add/Sub: 10口, 50字
+
+×: 実+法 = 7 digits (20)
+
+÷: 法+商 = 6 digits (20)
+
+Time: 30 min; Pass ≥ 210/300.
+shuzan.jp`,
+
+  'Pre-3-kyu': `Add/Sub: 10口, 50字 ×5題 and 10口, 60字 ×5題 (total 10)
+
+×: 実+法 = 7 digits (20)
+
+÷: 法+商 = 6 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+
+  '3-kyu': `Add/Sub: 10口, 60字
+
+×: 実+法 = 7 digits (20)
+
+÷: 法+商 = 6 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+
+  'Pre-2-kyu': `Add/Sub: 10口, 70字
+
+×: 実+法 = 8 digits (20)
+
+÷: 法+商 = 7 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+
+  '2-kyu': `Add/Sub: 10口, 80字
+
+×: 実+法 = 9 digits (20)
+
+÷: 法+商 = 8 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+
+  'Pre-1-kyu': `Add/Sub: 10口, 90字
+
+×: 実+法 = 10 digits (20)
+
+÷: 法+商 = 9 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+
+  '1-kyu': `Add/Sub: 10口, 100字
+
+×: 実+法 = 11 digits (20)
+
+÷: 法+商 = 10 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+} as const
+
+export type KyuLevel = keyof typeof kyuLevelDetails

package.json

@@ -1,6 +1,6 @@
 {
   "name": "soroban-monorepo",
-  "version": "4.41.0",
+  "version": "4.46.2",
   "private": true,
   "description": "Beautiful Soroban Flashcard Generator - Monorepo",
   "workspaces": [