feat(01-04): wire lesson screen UI with keyboard and falling letters

- 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>

src/styles/main.css

@@ -162,6 +162,59 @@ h3 {
 	cursor: not-allowed;
 }
 
+/* Lesson screen */
+.lesson {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 2rem;
+	padding: 2rem;
+	min-height: 100vh;
+	background: var(--bg-cream);
+}
+
+.lesson__letter-area {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 200px;
+	height: 200px;
+}
+
+.falling-letter {
+	font-family: "Quicksand", sans-serif;
+	font-size: 5rem;
+	font-weight: 700;
+	color: var(--accent-green);
+	animation: letter-float 2s ease-in-out infinite;
+}
+
+@keyframes letter-float {
+	0%,
+	100% {
+		transform: translateY(0);
+	}
+	50% {
+		transform: translateY(-10px);
+	}
+}
+
+.falling-letter--dissolve {
+	animation: letter-dissolve 0.3s ease-out forwards;
+}
+
+@keyframes letter-dissolve {
+	0% {
+		transform: scale(1);
+		opacity: 1;
+	}
+	100% {
+		transform: scale(1.5);
+		opacity: 0;
+	}
+}
+
 /* Keyboard */
 .keyboard {
 	display: flex;