- Lesson screen HTML with letter-area and keyboard containers
- initLessonScreen: renders keyboard, shows letters, handles keypress
- Correct key dissolves letter with animation, advances to next
- Wrong key does nothing (per D-03), correct key stays highlighted
- startLesson in app.ts: manages lesson lifecycle and cleanup
- onComplete: updates progress, unlocks next level, saves to IndexedDB
- CSS: floating letter animation, dissolve effect on correct press
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Full QWERTZ keyboard with DE and CH layout support
- Finger color mapping for all keys per spec section 8.3
- renderKeyboard, highlightKey, pressKey, updateKeyboardForLevel exports
- CSS: pulse animation for target key, press animation on keydown
- Inactive keys grayed at 0.5 opacity, active keys with finger colors
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Vite 6 + TypeScript + Biome + Vitest configured
- All directories from spec section 13 created
- CSS custom properties for full color palette and finger colors
- index.html with 5 screen sections and Google Fonts
- Dev server binds to 0.0.0.0:5173 for VPS access
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>