feat(01-03): add QWERTZ keyboard renderer with finger colors and animations

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

src/styles/main.css

@@ -161,3 +161,75 @@ h3 {
 	opacity: 0.4;
 	cursor: not-allowed;
 }
+
+/* Keyboard */
+.keyboard {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 4px;
+	padding: 1rem;
+	background: rgba(255, 255, 255, 0.6);
+	border-radius: 12px;
+	user-select: none;
+}
+
+.keyboard__row {
+	display: flex;
+	gap: 4px;
+}
+
+.keyboard__key {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 44px;
+	height: 44px;
+	border-radius: 8px;
+	font-family: "Quicksand", sans-serif;
+	font-weight: 700;
+	font-size: 1rem;
+	color: var(--text-dark);
+	background: #e0e0e0;
+	transition:
+		transform 0.1s ease,
+		background-color 0.2s ease,
+		box-shadow 0.2s ease;
+	cursor: default;
+}
+
+.keyboard__key--space {
+	width: 280px;
+}
+
+.keyboard__key--inactive {
+	background: #e0e0e0;
+	color: var(--text-light);
+	opacity: 0.5;
+}
+
+.keyboard__key--active {
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Pulse animation for the target key (KYBD-03) */
+.keyboard__key--highlight {
+	animation: key-pulse 1.2s ease-in-out infinite;
+	box-shadow: 0 0 12px rgba(232, 184, 75, 0.6);
+}
+
+@keyframes key-pulse {
+	0%,
+	100% {
+		transform: scale(1);
+	}
+	50% {
+		transform: scale(1.08);
+	}
+}
+
+/* Press animation (KYBD-03) */
+.keyboard__key--pressed {
+	transform: scale(0.9) !important;
+	animation: none;
+}