chore(release): 4.13.10 [skip ci]

## [4.13.10](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.9...v4.13.10) (2025-10-18)

### Bug Fixes

* add Typst to Docker image for flashcard generation ([d9a7694](d9a7694031))

### Code Refactoring

* remove 'Complete Soroban Learning Platform' section ([42dcbff](42dcbff857))

CHANGELOG.md

@@ -1,3 +1,29 @@
+## [4.13.10](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.9...v4.13.10) (2025-10-18)
+
+
+### Bug Fixes
+
+* add Typst to Docker image for flashcard generation ([d9a7694](https://github.com/antialias/soroban-abacus-flashcards/commit/d9a769403187bf70fb069be7ffe77417a62271a5))
+
+
+### Code Refactoring
+
+* remove 'Complete Soroban Learning Platform' section ([42dcbff](https://github.com/antialias/soroban-abacus-flashcards/commit/42dcbff85708ad378550634cbf7a3345eccb578e))
+
+## [4.13.9](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.8...v4.13.9) (2025-10-18)
+
+
+### Bug Fixes
+
+* set color on abacus container div for numeral visibility ([cd47960](https://github.com/antialias/soroban-abacus-flashcards/commit/cd4796024e41f731ae5d83c82f6582e19d6eaf99)), closes [#1f2937](https://github.com/antialias/soroban-abacus-flashcards/issues/1f2937)
+
+## [4.13.8](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.7...v4.13.8) (2025-10-18)
+
+
+### Bug Fixes
+
+* use color instead of fill for numeral styling ([ea10c16](https://github.com/antialias/soroban-abacus-flashcards/commit/ea10c16811eb969b9963417079c330ae9ff295ba))
+
 ## [4.13.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.6...v4.13.7) (2025-10-18)
 
 

Dockerfile

@@ -33,8 +33,8 @@ RUN turbo build --filter=@soroban/web
 FROM node:18-alpine AS runner
 WORKDIR /app
 
-# Install Python and build tools for better-sqlite3 (needed at runtime)
-RUN apk add --no-cache python3 py3-setuptools make g++
+# Install Python, build tools for better-sqlite3, and Typst (needed at runtime)
+RUN apk add --no-cache python3 py3-setuptools make g++ typst
 
 # Create non-root user
 RUN addgroup --system --gid 1001 nodejs

apps/web/src/app/page.tsx

@@ -62,6 +62,7 @@ export default function HomePage() {
                   border: '2px solid',
                   borderColor: 'purple.500/30',
                   boxShadow: '0 25px 50px -12px rgba(139, 92, 246, 0.25)',
+                  color: '#1f2937',
                 })}
               >
                 <AbacusReact
@@ -76,12 +77,6 @@ export default function HomePage() {
                   soundVolume={0.4}
                   scaleFactor={2.2}
                   showNumbers={true}
-                  customStyles={{
-                    numerals: {
-                      fill: '#1f2937',
-                      fontWeight: 'bold',
-                    },
-                  }}
                   onValueChange={(newValue: number) => setAbacusValue(newValue)}
                 />
               </div>
@@ -167,57 +162,8 @@ export default function HomePage() {
           </div>
         </div>
 
-        {/* Color Scheme Showcase */}
+        {/* Main content container */}
         <div className={container({ maxW: '7xl', px: '4', py: '12' })}>
-          <section className={stack({ gap: '8' })}>
-            <div className={css({ textAlign: 'center' })}>
-              <h2
-                className={css({
-                  fontSize: { base: '2xl', md: '3xl' },
-                  fontWeight: 'bold',
-                  color: 'white',
-                  mb: '3',
-                })}
-              >
-                Beautiful Color Schemes
-              </h2>
-              <p className={css({ color: 'gray.400', fontSize: 'lg' })}>
-                Choose from multiple visual styles to enhance learning
-              </p>
-            </div>
-
-            <div className={grid({ columns: { base: 1, sm: 2, lg: 4 }, gap: '6' })}>
-              <ColorSchemeCard
-                title="Monochrome"
-                description="Classic, minimalist design"
-                colorScheme="monochrome"
-                value={42}
-                beadShape="diamond"
-              />
-              <ColorSchemeCard
-                title="Place Value"
-                description="Each column has its own color"
-                colorScheme="place-value"
-                value={789}
-                beadShape="circle"
-              />
-              <ColorSchemeCard
-                title="Heaven & Earth"
-                description="Distinct heaven and earth beads"
-                colorScheme="heaven-earth"
-                value={156}
-                beadShape="square"
-              />
-              <ColorSchemeCard
-                title="Alternating"
-                description="Alternating column colors"
-                colorScheme="alternating"
-                value={234}
-                beadShape="diamond"
-              />
-            </div>
-          </section>
-
           {/* Arcade Games Section */}
           <section className={stack({ gap: '6', mt: '16' })}>
             <div className={hstack({ justify: 'space-between', alignItems: 'center' })}>
@@ -318,36 +264,6 @@ export default function HomePage() {
               accentColor="blue"
             />
           </div>
-
-          {/* Stats Banner */}
-          <section
-            className={css({
-              bg: 'linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%)',
-              rounded: '2xl',
-              p: '10',
-              mt: '16',
-              border: '2px solid',
-              borderColor: 'purple.500/20',
-            })}
-          >
-            <h2
-              className={css({
-                fontSize: { base: 'xl', md: '2xl' },
-                fontWeight: 'bold',
-                mb: '8',
-                textAlign: 'center',
-                color: 'white',
-              })}
-            >
-              Complete Soroban Learning Platform
-            </h2>
-            <div className={grid({ columns: { base: 2, md: 4 }, gap: '8', textAlign: 'center' })}>
-              <StatItem number="4" label="Arcade Games" />
-              <StatItem number="8" label="Max Players" />
-              <StatItem number="3" label="Learning Modes" />
-              <StatItem number="4+" label="Export Formats" />
-            </div>
-          </section>
         </div>
       </div>
     </PageWithNav>
@@ -547,23 +463,3 @@ function FeaturePanel({
     </div>
   )
 }
-
-function StatItem({ number, label }: { number: string; label: string }) {
-  return (
-    <div>
-      <div
-        className={css({
-          fontSize: { base: '3xl', md: '4xl' },
-          fontWeight: 'bold',
-          mb: '2',
-          background: 'linear-gradient(135deg, #fbbf24, #f59e0b)',
-          backgroundClip: 'text',
-          color: 'transparent',
-        })}
-      >
-        {number}
-      </div>
-      <div className={css({ fontSize: 'sm', color: 'gray.300' })}>{label}</div>
-    </div>
-  )
-}

package.json

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