feat: restructure learning path with new modules and enhanced explanations

- Add CSS Colors, Typography, Advanced Selectors, and Grid modules
- Remove deprecated HTML Marquee module from all languages
- Remove redundant div & span lesson from HTML Block & Inline
- Move SVG module from HTML to CSS section
- Enhance first lessons with comprehensive explanations:
  - Flexbox: historical context, axes concept
  - Colors: named colors, background-color explained
  - Grid: comparison to Flexbox, key properties
- Swap header logo highlight (CRISPIES instead of CODE)
- Use English fallbacks for new modules in non-EN languages
- Fix test to include 'playground' mode

New path: 19 modules (~78 lessons) vs previous 16 modules (62 lessons)

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

lessons/es/20-html-elements.json

@@ -63,35 +63,6 @@
 					"message": "Add an <kbd>&lt;h1&gt;</kbd> heading inside your header"
 				}
 			]
-		},
-		{
-			"id": "div-vs-span",
-			"title": "div & span",
-			"description": "When you need a container without semantic meaning:<br><br><kbd>&lt;div&gt;</kbd> - Generic block container (for layout/grouping)<br><kbd>&lt;span&gt;</kbd> - Generic inline container (for styling text portions)<br><br>Use semantic elements when possible, div/span when no semantic element fits.",
-			"task": "Wrap the word 'highlighted' in a <kbd>&lt;span&gt;</kbd> to style it differently. Wrap the whole quote in a <kbd>&lt;div&gt;</kbd>.",
-			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: Georgia, serif; padding: 20px; } div { background: #f5f5f5; padding: 15px; border-left: 4px solid #1976d2; } span { background: #fff59d; padding: 2px 4px; }",
-			"sandboxCSS": "",
-			"initialCode": "The most highlighted moment was unforgettable.",
-			"solution": "<div>The most <span>highlighted</span> moment was unforgettable.</div>",
-			"previewContainer": "preview-area",
-			"validations": [
-				{
-					"type": "element_exists",
-					"value": "div",
-					"message": "Wrap everything in a <kbd>&lt;div&gt;</kbd> element"
-				},
-				{
-					"type": "element_exists",
-					"value": "span",
-					"message": "Add a <kbd>&lt;span&gt;</kbd> around the word <kbd>highlighted</kbd>"
-				},
-				{
-					"type": "element_text",
-					"value": { "selector": "span", "text": "highlighted" },
-					"message": "The <kbd>&lt;span&gt;</kbd> should contain the word <kbd>highlighted</kbd>"
-				}
-			]
 		}
 	]
 }