feat: implement section-based color coding

- Add CSS variables for section colors (CSS violet, HTML raspberry, Tailwind cyan)
- Set data-section attribute on body based on current route
- Color code header nav links, logo, reference nav, topic links
- Color code CodeMirror editor cursor/selection
- Color code task instruction bubble
- Add reference page footer
- Section pages, lessons, and references all use matching colors

src/app.js

@@ -1982,6 +1982,18 @@ function hideAllPages() {
 	elements.gameLayout?.classList.add("hidden");
 }
 
+/**
+ * Update section color coding on body
+ * @param {string|null} sectionId - Section ID (css, html, tailwind) or null to reset
+ */
+function updateSectionColor(sectionId) {
+	if (sectionId) {
+		document.body.setAttribute("data-section", sectionId);
+	} else {
+		document.body.removeAttribute("data-section");
+	}
+}
+
 /**
  * Show home landing page
  */
@@ -1990,6 +2002,9 @@ function showLandingPage() {
 	elements.landingPage?.classList.remove("hidden");
 	window.scrollTo(0, 0);
 
+	// Reset section color on landing page
+	updateSectionColor(null);
+
 	// Update section progress on landing page
 	updateLandingProgress();
 
@@ -2062,6 +2077,9 @@ function showSectionPage(sectionId) {
 	elements.sectionPage?.classList.remove("hidden");
 	window.scrollTo(0, 0);
 
+	// Update section color
+	updateSectionColor(sectionId);
+
 	// Track section page view
 	track("section_view", { section: sectionId });
 
@@ -2113,6 +2131,10 @@ function showReferencePage(refId) {
 	// Default to CSS if no refId
 	const activeRef = refId || "css";
 
+	// Map reference to section for color coding
+	const refToSection = { css: "css", selectors: "css", flexbox: "css", grid: "css", html: "html" };
+	updateSectionColor(refToSection[activeRef] || "css");
+
 	// Track reference page view
 	track("reference_view", { ref: activeRef });
 
@@ -2256,10 +2278,14 @@ function navigateToLesson(moduleId, lessonIndex, shouldUpdateUrl = true) {
 			lessonEngine.setLessonByIndex(0);
 			loadCurrentLesson();
 			updateModuleHighlight(fallbackModule.id);
+			updateSectionColor(getModuleSection(fallbackModule));
 		}
 		return;
 	}
 
+	// Update section color based on module
+	updateSectionColor(getModuleSection(module));
+
 	// Validate lessonIndex is in bounds
 	if (lessonIndex < 0 || lessonIndex >= module.lessons.length) {
 		// Invalid lesson - go to first lesson of module