chore(release): 4.44.3 [skip ci]

## [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](29d20a6c07))
* **levels:** use uniform padding on operator box grid ([2818fd1](2818fd15ca))

CHANGELOG.md

@@ -1,3 +1,67 @@
+## [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/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.44.3",
   "private": true,
   "description": "Beautiful Soroban Flashcard Generator - Monorepo",
   "workspaces": [