feat: add JavaScript lesson section with starter lessons and sidebar section grouping headers

Implementation following plan:
- S01: Update JSON schema to support 'javascript' mode
- S02: Install @codemirror/lang-javascript dependency
- S03: Define JavaScript section in sections.js
- S04: Create 3 JavaScript lesson JSON files (variables, DOM, events)
- S05: Add JavaScript validation support in validator.js
- S06: Add JavaScript preview rendering in LessonEngine.js
- S07: Add JavaScript CodeMirror mode and editor config
- S08: Register JavaScript modules in all language stores
- S09: Add JavaScript section to landing page, navigation, and app config
- S10: Add sidebar section grouping headers with category mapping
- S11: Update tests for JavaScript mode and section headers

src/main.css

@@ -291,6 +291,14 @@ kbd {
 	background: #5b8dd9;
 }
 
+[data-section="javascript"] .logo h1 .code-text {
+	color: #d4a020;
+}
+
+[data-section="javascript"] .logo h1 .crispies-text {
+	background: #d4a020;
+}
+
 .help-toggle {
 	width: 28px;
 	height: 28px;
@@ -1249,6 +1257,17 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {
 	/* No max-height - parent nav.sidebar-section handles overflow */
 }
 
+.module-section-header {
+	font-size: 0.7rem;
+	text-transform: uppercase;
+	color: #888;
+	letter-spacing: 0.08em;
+	padding: 0.75rem var(--spacing-sm) 0.25rem;
+	margin: 0;
+	font-weight: 600;
+	pointer-events: none;
+}
+
 .module-container {
 	margin-bottom: 4px;
 }
@@ -3618,6 +3637,14 @@ input:checked + .toggle-slider::before {
 	--section-color-rgb: 91, 141, 217;
 }
 
+/* JavaScript Section - Gold */
+[data-section="javascript"] {
+	--section-color: #d4a020;
+	--section-color-light: #e0b840;
+	--section-color-dark: #b08818;
+	--section-color-rgb: 212, 160, 32;
+}
+
 /* Apply section colors to nav links */
 .nav-link[data-section="css"] {
 	color: #9163b8;
@@ -3635,6 +3662,10 @@ input:checked + .toggle-slider::before {
 	color: #5b8dd9;
 }
 
+.nav-link[data-section="javascript"] {
+	color: #d4a020;
+}
+
 .nav-link[data-section="css"]:hover,
 .nav-link[data-section="css"].active {
 	background: rgba(145, 99, 184, 0.1);
@@ -3659,6 +3690,12 @@ input:checked + .toggle-slider::before {
 	color: #4070b8;
 }
 
+.nav-link[data-section="javascript"]:hover,
+.nav-link[data-section="javascript"].active {
+	background: rgba(212, 160, 32, 0.1);
+	color: #b08818;
+}
+
 /* Hint section colors */
 body[data-section="css"] .hint {
 	background: rgba(145, 99, 184, 0.3);
@@ -3696,6 +3733,15 @@ body[data-section="markdown"] .hint-progress {
 	background: #5b8dd9;
 }
 
+body[data-section="javascript"] .hint {
+	background: rgba(212, 160, 32, 0.3);
+	border-left-color: #e0b840;
+}
+
+body[data-section="javascript"] .hint-progress {
+	background: #d4a020;
+}
+
 /* RTL hint border */
 [dir="rtl"] body[data-section="css"] .hint {
 	border-right-color: #a98cd6;
@@ -3713,6 +3759,10 @@ body[data-section="markdown"] .hint-progress {
 	border-right-color: #7ba3e5;
 }
 
+[dir="rtl"] body[data-section="javascript"] .hint {
+	border-right-color: #e0b840;
+}
+
 /* Reference nav link colors */
 .ref-nav-link[data-ref="css"],
 .ref-nav-link[data-ref="selectors"],
@@ -3816,6 +3866,24 @@ body[data-section="markdown"] .cm-editor .cm-activeLine {
 	background-color: rgba(91, 141, 217, 0.08) !important;
 }
 
+body[data-section="javascript"] .cm-editor .cm-content {
+	caret-color: #d4a020 !important;
+}
+
+body[data-section="javascript"] .cm-editor .cm-cursor,
+body[data-section="javascript"] .cm-editor .cm-dropCursor {
+	border-left-color: #d4a020 !important;
+}
+
+body[data-section="javascript"] .cm-editor .cm-selectionBackground,
+body[data-section="javascript"] .cm-editor .cm-content ::selection {
+	background-color: rgba(212, 160, 32, 0.25) !important;
+}
+
+body[data-section="javascript"] .cm-editor .cm-activeLine {
+	background-color: rgba(212, 160, 32, 0.08) !important;
+}
+
 /* Module pill section colors */
 body[data-section="css"] .module-pill {
 	background: rgba(145, 99, 184, 0.1);
@@ -3853,6 +3921,15 @@ body[data-section="markdown"] .module-pill .level-indicator {
 	color: #4070b8;
 }
 
+body[data-section="javascript"] .module-pill {
+	background: rgba(212, 160, 32, 0.1);
+	color: #d4a020;
+}
+
+body[data-section="javascript"] .module-pill .level-indicator {
+	color: #b08818;
+}
+
 /* Code block border section colors */
 body[data-section="css"] .code-block {
 	border-color: rgba(145, 99, 184, 0.4);
@@ -3870,6 +3947,10 @@ body[data-section="markdown"] .code-block {
 	border-color: rgba(91, 141, 217, 0.4);
 }
 
+body[data-section="javascript"] .code-block {
+	border-color: rgba(212, 160, 32, 0.4);
+}
+
 /* Section code block CodeMirror syntax highlighting overrides */
 body[data-section="css"] .code-block .cm-editor .cm-line {
 	color: #c9c0e0;
@@ -3887,6 +3968,10 @@ body[data-section="markdown"] .code-block .cm-editor .cm-line {
 	color: #c0d0e8;
 }
 
+body[data-section="javascript"] .code-block .cm-editor .cm-line {
+	color: #e8dcc0;
+}
+
 /* Task instruction bubble section colors */
 [data-section="css"] .task-instruction {
 	background: rgba(145, 99, 184, 0.92);
@@ -3904,6 +3989,10 @@ body[data-section="markdown"] .code-block .cm-editor .cm-line {
 	background: rgba(91, 141, 217, 0.92);
 }
 
+[data-section="javascript"] .task-instruction {
+	background: rgba(212, 160, 32, 0.92);
+}
+
 /* Section page progress bar colors */
 body[data-section="css"] .section-progress-bar .progress-fill {
 	background: #9163b8;
@@ -3921,6 +4010,10 @@ body[data-section="markdown"] .section-progress-bar .progress-fill {
 	background: #5b8dd9;
 }
 
+body[data-section="javascript"] .section-progress-bar .progress-fill {
+	background: #d4a020;
+}
+
 /* Section page header colors */
 [data-section="css"] .section-hero h1 {
 	color: #9163b8;
@@ -3938,6 +4031,10 @@ body[data-section="markdown"] .section-progress-bar .progress-fill {
 	color: #5b8dd9;
 }
 
+[data-section="javascript"] .section-hero h1 {
+	color: #d4a020;
+}
+
 /* Lesson title h2 section colors */
 body[data-section="css"] #lesson-title {
 	color: #9163b8;
@@ -3955,6 +4052,10 @@ body[data-section="markdown"] #lesson-title {
 	color: #5b8dd9;
 }
 
+body[data-section="javascript"] #lesson-title {
+	color: #d4a020;
+}
+
 /* Section and Reference footer - override landing-footer styles */
 .section-footer.landing-footer,
 .reference-footer.landing-footer {