feat: add Reference link to main navigation

- Add Reference nav link with subtle separator styling
- Update nav highlight to show active state on reference pages

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

src/app.js

@@ -1941,6 +1941,8 @@ function updateNavHighlight(route) {
 
 		if (route?.type === RouteType.SECTION && link.dataset.section === route.sectionId) {
 			link.classList.add("active");
+		} else if (route?.type === RouteType.REFERENCE && link.dataset.section === "reference") {
+			link.classList.add("active");
 		} else if (route?.type === RouteType.LESSON) {
 			// Highlight section based on module's inferred section
 			const module = lessonEngine.modules.find((m) => m.id === route.moduleId);

src/index.html

@@ -31,6 +31,7 @@
 						<a href="#css" class="nav-link" data-section="css">CSS</a>
 						<a href="#html" class="nav-link" data-section="html">HTML</a>
 						<a href="#tailwind" class="nav-link" data-section="tailwind">Tailwind</a>
+						<a href="#reference/css" class="nav-link nav-link-ref" data-section="reference">Reference</a>
 					</nav>
 					<button id="help-btn" class="help-toggle" data-i18n-aria-label="help" aria-label="Help">?</button>
 				</div>

src/main.css

@@ -1521,6 +1521,12 @@ input:checked + .toggle-slider::before {
 	color: var(--primary-color);
 }
 
+.nav-link-ref {
+	margin-left: 0.5rem;
+	padding-left: 1rem;
+	border-left: 1px solid var(--border-color);
+}
+
 @media (min-width: 769px) {
 	.main-nav {
 		display: flex;