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/flexbox.json

@@ -8,8 +8,8 @@
 		{
 			"id": "flexbox-1",
 			"title": "Container",
-			"description": "Learn how to create a flex container and understand the main and cross axes.<br><br><pre>.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}</pre>",
-			"task": "Add <kbd>display: flex</kbd> to <kbd>.wrap</kbd> to create a flexbox layout.",
+			"description": "Before flexbox, creating even simple layouts required floats, positioning hacks, or table-based layouts. Flexbox (Flexible Box Layout) revolutionized CSS by providing a one-dimensional layout system designed specifically for distributing space and aligning content.<br><br><strong>How it works:</strong> When you set <kbd>display: flex</kbd> on an element, it becomes a <em>flex container</em>. Its direct children automatically become <em>flex items</em> that flow along a main axis (horizontal by default). This single property transforms stacked block elements into a horizontal row.<br><br><strong>The two axes:</strong><br>• <em>Main axis</em> – The primary direction items flow (row = left→right)<br>• <em>Cross axis</em> – Perpendicular to main (row = top→bottom)<br><br><pre>.container {\n  display: flex;\n  /* Items now flow horizontally */\n}</pre>",
+			"task": "Add <kbd>display: flex</kbd> to <kbd>.wrap</kbd> to arrange the boxes horizontally.",
 			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; }",
 			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; }",