feat: reorder learning path for design students and improve animations

Learning path changes:
- Reorder modules: CSS visual (selectors, colors, typography) first,
  then layout (flexbox, grid), then HTML structure last
- Add intro lessons on CSS property syntax before selectors
- Add Figure module (images with captions)
- Remove Progress/Meter module (too niche)
- Reduce Tables from 3 to 1 lesson
- Reduce Form Validation from 3 to 1 lesson
- Rename "CSS Selectors" module to "CSS Basics"

Animation improvements:
- Change success text to "Your CODE looks CRISPY!"
- Increase animation duration to 3s
- Fix Firefox glow: use linear-gradient pulse instead of conic rotation
- Fix expected result toggle: match padding to prevent layout jump

🤖 Generated with [Claude Code](https://claude.com/claude-code)

src/main.css

@@ -207,7 +207,7 @@ kbd {
 	font-weight: bold;
 	cursor: pointer;
 	color: var(--light-text);
-	transition: all 0.2s;
+	transition: color 0.2s, border-color 0.2s;
 }
 
 .help-toggle:hover {
@@ -587,7 +587,7 @@ kbd {
 .expected-frame {
 	width: 100%;
 	height: 100%;
-	padding: var(--spacing-sm);
+	padding: var(--spacing-xs);
 }
 
 .expected-frame iframe {
@@ -617,17 +617,19 @@ kbd {
 			#7c4dff,
 			#9b59b6
 		) border-box;
-	animation: spin-border 2.5s linear forwards;
+	animation: spin-border 3s ease-out forwards;
+	overflow: visible;
 }
 
-/* Colorful glow effect layer */
+/* Colorful glow effect layer on the preview area */
 .preview-wrapper.matched::before {
 	content: "";
 	position: absolute;
 	inset: -12px;
 	border-radius: calc(var(--border-radius-md) + 12px);
-	background: conic-gradient(
-		from var(--border-angle),
+	/* Multi-color gradient glow - works in all browsers */
+	background: linear-gradient(
+		135deg,
 		#9b59b6,
 		#e040fb,
 		#00bcd4,
@@ -635,9 +637,50 @@ kbd {
 		#9b59b6
 	);
 	z-index: -1;
-	filter: blur(20px);
+	filter: blur(24px);
 	opacity: 0;
-	animation: spin-glow 2.5s linear forwards;
+	animation: glow-pulse 3s ease-out forwards;
+	pointer-events: none;
+}
+
+@keyframes glow-pulse {
+	0% {
+		opacity: 0;
+		transform: scale(0.95);
+	}
+	15% {
+		opacity: 0.8;
+		transform: scale(1);
+	}
+	60% {
+		opacity: 0.6;
+	}
+	100% {
+		opacity: 0;
+		transform: scale(1.02);
+	}
+}
+
+/* Animated CRISPY badge (matches logo style) */
+.preview-wrapper.matched::after {
+	content: "Your CODE looks CRISPY!";
+	position: absolute;
+	left: 50%;
+	top: 0;
+	transform: translateX(-50%) translateY(-100%);
+	font-family: system-ui, -apple-system, sans-serif;
+	font-size: 2rem;
+	font-weight: 800;
+	letter-spacing: 0.05em;
+	color: white;
+	background: var(--primary-color);
+	padding: 0.5rem 1.25rem;
+	border-radius: 8px;
+	z-index: 10;
+	pointer-events: none;
+	animation: crispy-fall 3s ease-in-out forwards;
+	opacity: 0;
+	white-space: nowrap;
 }
 
 @keyframes spin-border {
@@ -656,6 +699,9 @@ kbd {
 @keyframes spin-glow {
 	0% {
 		--border-angle: 0deg;
+		opacity: 0;
+	}
+	10% {
 		opacity: 0.8;
 	}
 	80% {
@@ -668,6 +714,30 @@ kbd {
 	}
 }
 
+@keyframes crispy-fall {
+	0% {
+		top: 0;
+		transform: translateX(-50%) translateY(-100%);
+		opacity: 0;
+	}
+	15% {
+		opacity: 1;
+	}
+	50% {
+		top: 50%;
+		transform: translateX(-50%) translateY(-50%);
+		opacity: 1;
+	}
+	85% {
+		opacity: 1;
+	}
+	100% {
+		top: 100%;
+		transform: translateX(-50%) translateY(0%);
+		opacity: 0;
+	}
+}
+
 /* ================= GAME CONTROLS ================= */
 .game-controls {
 	display: flex;
@@ -895,7 +965,7 @@ button.lesson-list-item {
 	cursor: pointer;
 	font-family: var(--font-main);
 	font-size: 0.9rem;
-	transition: all 0.2s;
+	transition: background 0.2s, color 0.2s, border-color 0.2s;
 }
 
 .btn:hover {
@@ -1056,7 +1126,7 @@ button.lesson-list-item {
 	height: 20px;
 	background: #ccc;
 	border-radius: 20px;
-	transition: 0.3s;
+	transition: background 0.3s;
 	margin-right: 8px;
 	flex-shrink: 0;
 }
@@ -1070,7 +1140,7 @@ button.lesson-list-item {
 	bottom: 2px;
 	background: white;
 	border-radius: 50%;
-	transition: 0.3s;
+	transition: transform 0.3s;
 }
 
 input:checked + .toggle-slider {
@@ -1134,7 +1204,7 @@ input:checked + .toggle-slider::before {
 	align-items: center;
 	justify-content: center;
 	border-radius: 50%;
-	transition: all 0.2s;
+	transition: background 0.2s, color 0.2s;
 }
 
 .dialog-close:hover {
@@ -1201,7 +1271,7 @@ input:checked + .toggle-slider::before {
 	border: 1px solid var(--primary-bg-medium);
 	text-decoration: none;
 	color: var(--text-color);
-	transition: all 0.2s ease;
+	transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
 }
 
 .project-card:hover {