diff --git a/lessons/20-html-elements.json b/lessons/20-html-elements.json
index 01263c8..b7a9c39 100644
--- a/lessons/20-html-elements.json
+++ b/lessons/20-html-elements.json
@@ -10,12 +10,12 @@
 			"id": "block-vs-inline-intro",
 			"title": "Block vs Inline Elements",
 			"description": "HTML elements fall into two main categories:<br><br><strong>Block elements</strong> (containers) start on a new line and take full width. Examples: <kbd>&lt;div&gt;</kbd>, <kbd>&lt;p&gt;</kbd>, <kbd>&lt;h1&gt;</kbd>, <kbd>&lt;section&gt;</kbd><br><br><strong>Inline elements</strong> flow within text and only take needed width. Examples: <kbd>&lt;span&gt;</kbd>, <kbd>&lt;a&gt;</kbd>, <kbd>&lt;strong&gt;</kbd>, <kbd>&lt;em&gt;</kbd>",
-			"task": "Create a paragraph with a <kbd>&lt;strong&gt;</kbd> word inside it. Notice how the paragraph is a block element (takes full width) while strong is inline (flows with text).",
+			"task": "Wrap the word <kbd>important</kbd> with <kbd>&lt;strong&gt;</kbd> tags to make it bold. Notice how the paragraph (block) takes full width while strong (inline) flows with text.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }",
 			"sandboxCSS": "",
 			"initialCode": "<p>This is a paragraph with an important word.</p>",
-			"solutionCode": "<p>This is a paragraph with a <strong>important</strong> word.</p>",
+			"solutionCode": "<p>This is a paragraph with an <strong>important</strong> word.</p>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -26,7 +26,7 @@
 				{
 					"type": "parent_child",
 					"value": { "parent": "p", "child": "strong" },
-					"message": "Place a <strong> element inside your paragraph"
+					"message": "Wrap the word 'important' with <strong> tags"
 				}
 			]
 		},
diff --git a/src/app.js b/src/app.js
index 92b7893..b285dbd 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,66 +1,130 @@
 import { LessonEngine } from "./impl/LessonEngine.js";
-import { renderLesson, renderModuleList, renderLevelIndicator, showFeedback, updateActiveLessonInSidebar } from "./helpers/renderer.js";
+import { renderLesson, renderModuleList, renderLevelIndicator, updateActiveLessonInSidebar } from "./helpers/renderer.js";
 import { loadModules } from "./config/lessons.js";
 
 // Simplified state - LessonEngine now manages lesson state and progress
 const state = {
 	userSettings: {
 		disableFeedbackErrors: false
-	}
+	},
+	showExpected: false
 };
 
-// DOM elements
+// DOM elements - updated for new layout
 const elements = {
-	moduleList: document.querySelector(".module-list"),
+	// Header
+	menuBtn: document.getElementById("menu-btn"),
+	helpBtn: document.getElementById("help-btn"),
+
+	// Left panel
 	lessonTitle: document.getElementById("lesson-title"),
 	lessonDescription: document.getElementById("lesson-description"),
 	taskInstruction: document.getElementById("task-instruction"),
-	previewArea: document.getElementById("preview-area"),
-	editorPrefix: document.getElementById("editor-prefix"),
 	codeInput: document.getElementById("code-input"),
-	editorSuffix: document.getElementById("editor-suffix"),
+	runBtn: document.getElementById("run-btn"),
+	hintArea: document.getElementById("hint-area"),
+	validationIndicators: document.querySelector(".validation-indicators-container"),
+	editorContent: document.querySelector(".editor-content"),
+	codeEditor: document.querySelector(".code-editor"),
+
+	// Right panel
+	previewArea: document.getElementById("preview-area"),
+	showExpectedBtn: document.getElementById("show-expected-btn"),
+	expectedOverlay: document.getElementById("expected-overlay"),
+	previewWrapper: document.querySelector(".preview-wrapper"),
 	prevBtn: document.getElementById("prev-btn"),
 	nextBtn: document.getElementById("next-btn"),
-	runBtn: document.getElementById("run-btn"),
 	levelIndicator: document.getElementById("level-indicator"),
+
+	// Sidebar
+	sidebarDrawer: document.getElementById("sidebar-drawer"),
+	sidebarBackdrop: document.getElementById("sidebar-backdrop"),
+	closeSidebar: document.getElementById("close-sidebar"),
+	moduleList: document.getElementById("module-list"),
+	progressFill: document.getElementById("progress-fill"),
+	progressText: document.getElementById("progress-text"),
+	resetBtn: document.getElementById("reset-btn"),
+	disableFeedbackToggle: document.getElementById("disable-feedback-toggle"),
+
+	// Modal
 	modalContainer: document.getElementById("modal-container"),
 	modalTitle: document.getElementById("modal-title"),
 	modalContent: document.getElementById("modal-content"),
-	modalClose: document.getElementById("modal-close"),
-	moduleSelectorBtn: document.getElementById("module-selector-btn"),
-	resetBtn: document.getElementById("reset-btn"),
-	helpBtn: document.getElementById("help-btn"),
-	lessonContainer: document.querySelector(".lesson-container"),
-	editorContent: document.querySelector(".editor-content"),
-	codeEditor: document.querySelector(".code-editor"),
-	validationIndicators: document.querySelector(".validation-indicators-container"),
-	disableFeedbackToggle: document.getElementById("disable-feedback-toggle")
+	modalClose: document.getElementById("modal-close")
 };
 
 // Initialize the lesson engine - now the single source of truth
 const lessonEngine = new LessonEngine();
 
-// Load user progress from localStorage
-function loadUserProgress() {
-	const savedProgress = localStorage.getItem("codeCrispies.progress");
-	if (savedProgress) {
-		state.userProgress = JSON.parse(savedProgress);
+// ================= SIDEBAR FUNCTIONS =================
+
+function openSidebar() {
+	elements.sidebarDrawer.classList.add("open");
+	elements.sidebarBackdrop.classList.add("visible");
+}
+
+function closeSidebar() {
+	elements.sidebarDrawer.classList.remove("open");
+	elements.sidebarBackdrop.classList.remove("visible");
+}
+
+// ================= EXPECTED RESULT TOGGLE =================
+
+function toggleExpectedResult() {
+	state.showExpected = !state.showExpected;
+
+	if (state.showExpected) {
+		elements.expectedOverlay.classList.add("visible");
+		elements.showExpectedBtn.textContent = "Hide Expected";
+		elements.showExpectedBtn.classList.add("btn-primary");
+	} else {
+		elements.expectedOverlay.classList.remove("visible");
+		elements.showExpectedBtn.textContent = "Show Expected";
+		elements.showExpectedBtn.classList.remove("btn-primary");
 	}
 }
 
-// Save user progress to localStorage
-function saveUserProgress() {
-	localStorage.setItem("codeCrispies.progress", JSON.stringify(state.userProgress));
+// ================= HINT SYSTEM =================
+
+function showHint(message, step, total, isSuccess = false) {
+	const hintClass = isSuccess ? "hint hint-success" : "hint";
+	elements.hintArea.innerHTML = `
+		<div class="${hintClass}">
+			<span class="hint-progress">${step}/${total}</span>
+			<span class="hint-message">${message}</span>
+		</div>
+	`;
 }
 
+function clearHint() {
+	elements.hintArea.innerHTML = "";
+}
+
+function showSuccessHint(message) {
+	elements.hintArea.innerHTML = `
+		<div class="hint hint-success">
+			<span class="hint-progress">✓</span>
+			<span class="hint-message">${message}</span>
+		</div>
+	`;
+}
+
+// ================= PROGRESS DISPLAY =================
+
+function updateProgressDisplay() {
+	const stats = lessonEngine.getProgressStats();
+	elements.progressFill.style.width = `${stats.percentComplete}%`;
+	elements.progressText.textContent = `${stats.percentComplete}% Complete (${stats.totalCompleted}/${stats.totalLessons})`;
+}
+
+// ================= USER SETTINGS =================
+
 function loadUserSettings() {
 	const savedSettings = localStorage.getItem("codeCrispies.settings");
 	if (savedSettings) {
 		try {
 			const settings = JSON.parse(savedSettings);
 			state.userSettings = { ...state.userSettings, ...settings };
-
-			// Apply saved settings to UI
 			elements.disableFeedbackToggle.checked = !state.userSettings.disableFeedbackErrors;
 		} catch (e) {
 			console.error("Error loading user settings:", e);
@@ -72,14 +136,8 @@ function saveUserSettings() {
 	localStorage.setItem("codeCrispies.settings", JSON.stringify(state.userSettings));
 }
 
-function initFeedbackToggle() {
-	elements.disableFeedbackToggle.addEventListener("change", (e) => {
-		state.userSettings.disableFeedbackErrors = !e.target.checked;
-		saveUserSettings();
-	});
-}
+// ================= MODULE INITIALIZATION =================
 
-// Initialize the module list
 async function initializeModules() {
 	try {
 		const modules = await loadModules();
@@ -98,45 +156,15 @@ async function initializeModules() {
 			selectModule(modules[0].id);
 		}
 
-		// Update progress indicator on module selector button
-		updateModuleSelectorButtonProgress();
+		updateProgressDisplay();
 	} catch (error) {
 		console.error("Failed to load modules:", error);
 		elements.lessonDescription.textContent = "Failed to load modules. Please refresh the page.";
 	}
 }
 
-// Update progress indicator on module selector button
-function updateModuleSelectorButtonProgress() {
-	const stats = lessonEngine.getProgressStats();
+// ================= MODULE/LESSON SELECTION =================
 
-	// Create progress indicator
-	const progressBar = document.createElement("div");
-	progressBar.className = "progress-indicator";
-	progressBar.style.cssText = `
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		height: 3px;
-		width: ${stats.percentComplete}%;
-		background-color: var(--primary-light);
-		border-radius: 0 3px 3px 0;
-	`;
-
-	// Add progress percentage text
-	elements.moduleSelectorBtn.innerHTML = `Progress <span style="font-size: 0.8em; opacity: 0.8;">${stats.percentComplete}%</span>`;
-	elements.moduleSelectorBtn.style.position = "relative";
-
-	// Remove any existing progress bar before adding new one
-	const existingBar = elements.moduleSelectorBtn.querySelector(".progress-indicator");
-	if (existingBar) {
-		existingBar.remove();
-	}
-
-	elements.moduleSelectorBtn.appendChild(progressBar);
-}
-
-// Select a module - delegate to LessonEngine
 function selectModule(moduleId) {
 	const success = lessonEngine.setModuleById(moduleId);
 	if (!success) return;
@@ -151,30 +179,38 @@ function selectModule(moduleId) {
 	});
 
 	loadCurrentLesson();
-
-	// Reset any success indicators
 	resetSuccessIndicators();
+
+	// Close sidebar after selection on mobile
+	if (window.innerWidth <= 768) {
+		closeSidebar();
+	}
 }
 
 function selectLesson(moduleId, lessonIndex) {
-	// Select the module first if it's not already selected
 	const currentState = lessonEngine.getCurrentState();
 	if (!currentState.module || currentState.module.id !== moduleId) {
 		lessonEngine.setModuleById(moduleId);
 	}
 
-	// Set the lesson
 	lessonEngine.setLessonByIndex(lessonIndex);
 	loadCurrentLesson();
+
+	// Close sidebar after selection on mobile
+	if (window.innerWidth <= 768) {
+		closeSidebar();
+	}
 }
 
-// Reset success indicators
+// ================= LESSON LOADING =================
+
 function resetSuccessIndicators() {
 	elements.codeEditor.classList.remove("success-highlight");
 	elements.lessonTitle.classList.remove("success-text");
 	elements.nextBtn.classList.remove("success");
 	elements.taskInstruction.classList.remove("success-instruction");
-	elements.runBtn.classList.remove("re-run");
+	elements.runBtn.classList.remove("success");
+	elements.previewWrapper?.classList.remove("matched");
 }
 
 function updateEditorForMode(mode) {
@@ -201,12 +237,6 @@ function updateEditorForMode(mode) {
 	if (editorLabel) editorLabel.textContent = config.label;
 }
 
-// Configure editor layout based on display type
-function resetEditorLayout(lesson) {
-	elements.validationIndicators.innerHTML = "";
-}
-
-// Load the current lesson - now delegates to LessonEngine
 function loadCurrentLesson() {
 	const engineState = lessonEngine.getCurrentState();
 
@@ -223,29 +253,38 @@ function loadCurrentLesson() {
 	// Reset any success indicators
 	resetSuccessIndicators();
 
+	// Clear hints
+	clearHint();
+
+	// Hide expected overlay
+	state.showExpected = false;
+	elements.expectedOverlay.classList.remove("visible");
+	elements.showExpectedBtn.textContent = "Show Expected";
+	elements.showExpectedBtn.classList.remove("btn-primary");
+
 	// Update UI
 	renderLesson(
 		elements.lessonTitle,
 		elements.lessonDescription,
 		elements.taskInstruction,
 		elements.previewArea,
-		elements.editorPrefix,
+		null, // editorPrefix no longer used
 		elements.codeInput,
-		elements.editorSuffix,
+		null, // editorSuffix no longer used
 		lesson
 	);
 
 	// Set user code in input
 	elements.codeInput.value = engineState.userCode;
 
-	// Configure editor layout based on lesson settings
-	resetEditorLayout(lesson);
+	// Reset validation indicators
+	elements.validationIndicators.innerHTML = "";
 
 	// Update Run button text based on completion status
 	if (engineState.isCompleted) {
-		elements.runBtn.innerHTML = '<img src="./gear.svg" />Re-run';
+		elements.runBtn.innerHTML = '<img src="./gear.svg" alt="" />Re-run';
 
-		// Add completion badge next to title if not already present
+		// Add completion badge if not present
 		if (!document.querySelector(".completion-badge")) {
 			const badge = document.createElement("span");
 			badge.className = "completion-badge";
@@ -253,13 +292,11 @@ function loadCurrentLesson() {
 			elements.lessonTitle.appendChild(badge);
 		}
 	} else {
-		elements.runBtn.innerHTML = '<img src="./gear.svg" />Run';
+		elements.runBtn.innerHTML = '<img src="./gear.svg" alt="" />Run';
 
 		// Remove completion badge if exists
 		const badge = document.querySelector(".completion-badge");
-		if (badge) {
-			badge.remove();
-		}
+		if (badge) badge.remove();
 	}
 
 	// Update level indicator
@@ -271,64 +308,50 @@ function loadCurrentLesson() {
 	// Update navigation buttons
 	updateNavigationButtons();
 
-	// Update progress indicator on module selector button
-	updateModuleSelectorButtonProgress();
+	// Update progress display
+	updateProgressDisplay();
 
-	// Focus on the code editor by default
+	// Focus on the code editor
 	elements.codeInput.focus();
 
-	// Render the expected/solution preview for comparison
+	// Render the expected/solution preview
 	lessonEngine.renderExpectedPreview();
 
-	// Track live changes and update preview when the user pauses typing
+	// Setup live preview
 	setupLivePreview();
 }
 
-// Setup live preview functionality
-let previewTimer = null;
-function setupLivePreview() {
-	// Clear previous event listener if any
-	elements.codeInput.removeEventListener("input", handleUserInput);
+// ================= LIVE PREVIEW =================
 
-	// Add new event listener
+let previewTimer = null;
+
+function setupLivePreview() {
+	elements.codeInput.removeEventListener("input", handleUserInput);
 	elements.codeInput.addEventListener("input", handleUserInput);
 }
 
-// Handle user input with debounced preview updates
 function handleUserInput() {
-	// Clear the previous timer
 	if (previewTimer) {
 		clearTimeout(previewTimer);
 	}
 
-	// Set a new timer for preview update after user stops typing
 	previewTimer = setTimeout(() => {
 		runCode();
-	}, 800); // Update preview 800ms after user stops typing
+	}, 800);
 }
 
-// Update navigation buttons state
+// ================= NAVIGATION =================
+
 function updateNavigationButtons() {
 	const engineState = lessonEngine.getCurrentState();
 
 	elements.prevBtn.disabled = !engineState.canGoPrev;
 	elements.nextBtn.disabled = !engineState.canGoNext;
 
-	// Style changes for disabled buttons
-	if (elements.prevBtn.disabled) {
-		elements.prevBtn.classList.add("btn-disabled");
-	} else {
-		elements.prevBtn.classList.remove("btn-disabled");
-	}
-
-	if (elements.nextBtn.disabled) {
-		elements.nextBtn.classList.add("btn-disabled");
-	} else {
-		elements.nextBtn.classList.remove("btn-disabled");
-	}
+	elements.prevBtn.classList.toggle("btn-disabled", !engineState.canGoPrev);
+	elements.nextBtn.classList.toggle("btn-disabled", !engineState.canGoNext);
 }
 
-// Go to the next lesson - delegate to LessonEngine
 function nextLesson() {
 	const success = lessonEngine.nextLesson();
 	if (success) {
@@ -336,7 +359,6 @@ function nextLesson() {
 	}
 }
 
-// Go to the previous lesson - delegate to LessonEngine
 function prevLesson() {
 	const success = lessonEngine.previousLesson();
 	if (success) {
@@ -344,14 +366,17 @@ function prevLesson() {
 	}
 }
 
-// Run the user code - now uses LessonEngine validation
+// ================= CODE EXECUTION =================
+
 function runCode() {
 	const userCode = elements.codeInput.value;
 
 	// Rotate the Run button icon
 	const runButtonImg = document.querySelector("#run-btn img");
-	const runButtonRotationDegree = Number(runButtonImg.style.transform.match(/\d+/)?.pop() ?? 0);
-	document.querySelector("#run-btn img").style.transform = `rotate(${runButtonRotationDegree + 180}deg)`;
+	if (runButtonImg) {
+		const currentRotation = parseInt(runButtonImg.style.transform?.match(/\d+/)?.[0] || "0");
+		runButtonImg.style.transform = `rotate(${currentRotation + 180}deg)`;
+	}
 
 	// Apply the code to the preview via LessonEngine
 	lessonEngine.applyUserCode(userCode, true);
@@ -359,27 +384,21 @@ function runCode() {
 	// Validate code using LessonEngine
 	const validationResult = lessonEngine.validateCode();
 
-	// Add validation indicators based on validCases count if available
-	if (validationResult.validCases) {
-		const casesCount =
-			typeof validationResult.validCases === "number"
-				? validationResult.validCases
-				: Array.isArray(validationResult.validCases)
-					? validationResult.validCases.length
-					: 1;
-
-		elements.validationIndicators.innerHTML = `${Math.round((validationResult.validCases / validationResult.totalCases) * 100)}%`;
+	// Update validation indicators
+	if (validationResult.totalCases > 0) {
+		const percent = Math.round((validationResult.validCases / validationResult.totalCases) * 100);
+		elements.validationIndicators.innerHTML = `${percent}%`;
 	}
 
 	if (validationResult.isValid) {
-		// Show success feedback with visual indicators
-		showFeedback(true, validationResult.message || "Great job! Your code works correctly.");
+		// Show success hint
+		showSuccessHint(validationResult.message || "Great job! Your code works correctly.");
 
-		// Update the Run button to Re-run
-		elements.runBtn.innerHTML = '<img src="./gear.svg" />Re-run';
-		elements.runBtn.classList.add("re-run");
+		// Update Run button
+		elements.runBtn.innerHTML = '<img src="./gear.svg" alt="" />Re-run';
+		elements.runBtn.classList.add("success");
 
-		// Add completion badge if not present
+		// Add completion badge
 		if (!document.querySelector(".completion-badge")) {
 			const badge = document.createElement("span");
 			badge.className = "completion-badge";
@@ -393,174 +412,97 @@ function runCode() {
 		elements.nextBtn.classList.add("success");
 		elements.taskInstruction.classList.add("success-instruction");
 
-		// Show merge animation for side-by-side comparison
-		lessonEngine.showMatchAnimation();
+		// Show match animation
+		elements.previewWrapper?.classList.add("matched");
+		setTimeout(() => {
+			elements.previewWrapper?.classList.remove("matched");
+		}, 2500);
 
-		// Update navigation buttons
 		updateNavigationButtons();
-
-		// Update progress indicator
-		updateModuleSelectorButtonProgress();
+		updateProgressDisplay();
 	} else {
-		// Reset any success indicators
+		// Reset success indicators
 		resetSuccessIndicators();
 
-		// Hide merge animation if it was showing
-		lessonEngine.hideMatchAnimation();
+		// Show hint with step progress
+		const step = validationResult.validCases + 1;
+		const total = validationResult.totalCases;
 
-		// Show error feedback (with friendly message)
-		showFeedback(false, validationResult.message || "Not quite there yet! Let's try again.");
+		// Only show hints if enabled
+		if (!state.userSettings.disableFeedbackErrors) {
+			showHint(validationResult.message || "Keep trying!", step, total);
+		}
 	}
 }
 
-// Show the module selector modal
-function showModuleSelector() {
-	elements.modalTitle.textContent = "Select a Module";
+// ================= MODALS =================
 
-	const engineState = lessonEngine.getCurrentState();
-	const modules = lessonEngine.modules;
-
-	// Create module buttons
-	const moduleButtons = modules.map((module) => {
-		const button = document.createElement("button");
-		button.classList.add("btn", "module-button");
-		button.style.display = "block";
-		button.style.width = "100%";
-		button.style.marginBottom = "10px";
-		button.style.padding = "15px";
-		button.style.textAlign = "left";
-
-		// Add completion status using LessonEngine
-		const completedCount = lessonEngine.userProgress[module.id]?.completed.length || 0;
-		const totalLessons = module.lessons.length;
-		const percentComplete = Math.round((completedCount / totalLessons) * 100);
-
-		button.innerHTML = `
-			<strong>${module.title}</strong>
-			<div style="margin-top: 5px; font-size: 0.8rem; color: var(--light-text);">
-				${module.description}
-			</div>
-			<div style="margin-top: 8px; height: 6px; background-color: #f0f0f0; border-radius: 3px;">
-				<div style="height: 100%; width: ${percentComplete}%; background-color: var(--primary-color); border-radius: 3px;"></div>
-			</div>
-			<div style="margin-top: 5px; font-size: 0.8rem; text-align: right;">
-				${completedCount}/${totalLessons} lessons completed
-			</div>
-		`;
-
-		button.addEventListener("click", () => {
-			selectModule(module.id);
-			closeModal();
-		});
-
-		return button;
-	});
-
-	// Clear and update modal content
-	elements.modalContent.innerHTML = "";
-	moduleButtons.forEach((button) => {
-		elements.modalContent.appendChild(button);
-	});
-
-	// Show the modal
-	elements.modalContainer.classList.remove("hidden");
-}
-
-// Show help modal
 function showHelp() {
 	elements.modalTitle.textContent = "Help";
 
 	elements.modalContent.innerHTML = `
 		<h3>How to Use Code Crispies</h3>
-		<p>Code Crispies is an interactive platform for learning CSS through practical exercises.</p>
-		
+		<p>Code Crispies is an interactive platform for learning HTML, CSS, and Tailwind through practical exercises.</p>
+
 		<h4>Getting Started</h4>
-		<p>Select a module from the sidebar to start learning. Each module contains a series of lessons focused on specific CSS concepts.</p>
-		
+		<p>Open the menu (☰) to select a lesson module. Each module contains a series of lessons.</p>
+
 		<h4>Completing Lessons</h4>
-		<p>For each lesson:</p>
 		<ol>
-			<li>Read the instructions and objective</li>
-			<li>Write your CSS code in the editor</li>
-			<li>Click "Run" to test your solution</li>
-			<li>If correct, you can proceed to the next lesson</li>
+			<li>Read the instructions on the left</li>
+			<li>Write your code in the editor</li>
+			<li>Click "Run" or press Ctrl+Enter to test</li>
+			<li>Follow the hints to fix any issues</li>
+			<li>Click "Next" when you're done</li>
 		</ol>
-		
-		<h4>Controls</h4>
-		<ul>
-			<li><strong>Run</strong> - Test your CSS code and apply it to the preview</li>
-			<li><strong>Previous/Next</strong> - Navigate between lessons</li>
-			<li><strong>Progress</strong> - Select a different learning module</li>
-			<li><strong>Reset Progress</strong> - Clear all your saved progress</li>
-		</ul>
-		
+
 		<h4>Tips</h4>
 		<ul>
-			<li>Your code changes will automatically preview as you type</li>
-			<li>The preview area shows how your CSS affects the elements</li>
-			<li>Your progress is automatically saved in your browser storage</li>
-			<li>You can revisit completed lessons at any time</li>
-			<li>Press Tab in the code editor to indent with two spaces</li>
-			<li>Use Ctrl+Enter to quickly run your code</li>
+			<li>Click "Show Expected" to see the target result</li>
+			<li>Your progress is saved automatically</li>
+			<li>Use Tab for indentation</li>
+			<li>Ctrl+Enter runs your code</li>
 		</ul>
 	`;
 
 	elements.modalContainer.classList.remove("hidden");
 }
 
-// Reset user progress
-function resetProgress() {
+function showResetConfirmation() {
 	elements.modalTitle.textContent = "Reset Progress";
 
 	elements.modalContent.innerHTML = `
 		<p>Are you sure you want to reset all your progress? This cannot be undone.</p>
 		<div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
 			<button id="cancel-reset" class="btn">Cancel</button>
-			<button id="confirm-reset" class="btn btn-primary">Reset Progress</button>
+			<button id="confirm-reset" class="btn btn-ghost">Reset All</button>
 		</div>
 	`;
 
 	document.getElementById("cancel-reset").addEventListener("click", closeModal);
 	document.getElementById("confirm-reset").addEventListener("click", () => {
-		localStorage.removeItem("codeCrispies.progress");
-		localStorage.removeItem("codeCrispies.lastModuleId");
-		state.userProgress = {};
+		lessonEngine.clearProgress();
 		closeModal();
+		closeSidebar();
 
-		// Reload the current module
-		if (state.currentModule) {
-			const currentModuleId = state.currentModule.id;
-			selectModule(currentModuleId);
-		} else if (state.modules.length > 0) {
-			selectModule(state.modules[0].id);
+		// Reload first module
+		const modules = lessonEngine.modules;
+		if (modules.length > 0) {
+			selectModule(modules[0].id);
 		}
 
-		// Update progress indicator
-		updateModuleSelectorButtonProgress();
+		updateProgressDisplay();
 	});
 
 	elements.modalContainer.classList.remove("hidden");
 }
 
-// Close the modal
 function closeModal() {
 	elements.modalContainer.classList.add("hidden");
 }
 
-// Handle clicks in the code editor to focus the input
-function handleEditorClick() {
-	elements.codeInput.focus();
+// ================= KEYBOARD HANDLERS =================
 
-	// Add a temporary highlight class to show where the cursor is
-	elements.editorContent.classList.add("editor-focused");
-
-	// Remove the highlight after a short delay
-	setTimeout(() => {
-		elements.editorContent.classList.remove("editor-focused");
-	}, 300);
-}
-
-// Handle tab key in the code editor
 function handleTabKey(e) {
 	if (e.key === "Tab") {
 		e.preventDefault();
@@ -568,103 +510,60 @@ function handleTabKey(e) {
 		const start = e.target.selectionStart;
 		const end = e.target.selectionEnd;
 
-		// Add two spaces at cursor position
 		e.target.value = e.target.value.substring(0, start) + "  " + e.target.value.substring(end);
-
-		// Move cursor position after the inserted spaces
 		e.target.selectionStart = e.target.selectionEnd = start + 2;
 	}
 }
 
-// Initialize the application
+// ================= INITIALIZATION =================
+
 function init() {
-	loadUserProgress();
 	loadUserSettings();
 	initializeModules().catch(console.error);
-	initFeedbackToggle();
 
-	// Event listeners
+	// Sidebar controls
+	elements.menuBtn.addEventListener("click", openSidebar);
+	elements.closeSidebar.addEventListener("click", closeSidebar);
+	elements.sidebarBackdrop.addEventListener("click", closeSidebar);
+
+	// Expected result toggle
+	elements.showExpectedBtn.addEventListener("click", toggleExpectedResult);
+
+	// Navigation
 	elements.prevBtn.addEventListener("click", prevLesson);
 	elements.nextBtn.addEventListener("click", nextLesson);
 	elements.runBtn.addEventListener("click", runCode);
-	elements.modalClose.addEventListener("click", closeModal);
-	elements.moduleSelectorBtn.addEventListener("click", showModuleSelector);
-	elements.resetBtn.addEventListener("click", resetProgress);
+
+	// Modals
 	elements.helpBtn.addEventListener("click", showHelp);
-	elements.codeInput.addEventListener("click", handleEditorClick);
+	elements.modalClose.addEventListener("click", closeModal);
+	elements.resetBtn.addEventListener("click", showResetConfirmation);
 
-	// Also make the editor container clickable to focus the text area
-	elements.editorContent.addEventListener("click", (e) => {
-		elements.codeInput.focus();
-	});
-
-	// Load user settings
+	// Settings
 	elements.disableFeedbackToggle.addEventListener("change", (e) => {
 		state.userSettings.disableFeedbackErrors = !e.target.checked;
 		saveUserSettings();
 	});
 
-	// Add tab key handler for the code input
+	// Editor interactions
 	elements.codeInput.addEventListener("keydown", handleTabKey);
+	elements.editorContent?.addEventListener("click", () => {
+		elements.codeInput.focus();
+	});
 
-	// Handle keyboard shortcuts
+	// Keyboard shortcuts
 	document.addEventListener("keydown", (e) => {
 		// Ctrl+Enter to run code
 		if (e.ctrlKey && e.key === "Enter") {
 			runCode();
 			e.preventDefault();
 		}
-	});
 
-	// Add this to your app.js file
-
-	// Mobile Menu Functionality
-	document.addEventListener("DOMContentLoaded", function () {
-		// Create hamburger menu button
-		const hamburger = document.createElement("button");
-		hamburger.className = "hamburger";
-		hamburger.setAttribute("aria-label", "Toggle menu");
-		hamburger.innerHTML = `
-    <span class="hamburger-line"></span>
-    <span class="hamburger-line"></span>
-    <span class="hamburger-line"></span>
-  `;
-
-		// Get the header and nav elements
-		const header = document.querySelector(".header");
-		const logo = document.querySelector(".logo");
-		const nav = document.querySelector(".main-nav");
-
-		// Insert hamburger button after the logo
-		header.insertBefore(hamburger, logo.nextSibling);
-
-		// Toggle menu on hamburger click
-		hamburger.addEventListener("click", function () {
-			nav.classList.toggle("open");
-			hamburger.classList.toggle("open");
-
-			// Set aria-expanded attribute for accessibility
-			const isExpanded = nav.classList.contains("open");
-			hamburger.setAttribute("aria-expanded", isExpanded);
-		});
-
-		// Close menu when clicking outside
-		document.addEventListener("click", function (event) {
-			if (!nav.contains(event.target) && !hamburger.contains(event.target) && nav.classList.contains("open")) {
-				nav.classList.remove("open");
-				hamburger.classList.remove("open");
-				hamburger.setAttribute("aria-expanded", false);
-			}
-		});
-
-		// Close menu when window is resized to desktop size
-		window.addEventListener("resize", function () {
-			if (window.innerWidth > 768 && nav.classList.contains("open")) {
-				nav.classList.remove("open");
-				hamburger.classList.remove("open");
-				hamburger.setAttribute("aria-expanded", false);
-			}
-		});
+		// Escape to close sidebar
+		if (e.key === "Escape") {
+			closeSidebar();
+			closeModal();
+		}
 	});
 }
 
diff --git a/src/index.html b/src/index.html
index e688320..5a8b0bd 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,104 +9,126 @@
 	</head>
 	<body>
 		<div class="app-container">
+			<!-- Minimal Header -->
 			<header class="header">
+				<button id="menu-btn" class="menu-toggle" aria-label="Open menu">
+					<span class="hamburger-line"></span>
+					<span class="hamburger-line"></span>
+					<span class="hamburger-line"></span>
+				</button>
 				<div class="logo">
-					<img src="./bowl.png" width="52" alt="CODE CRISPIES Logo" />
-					<h1>CODE<br /><span>CRISPIES</span></h1>
+					<img src="./bowl.png" width="40" alt="CODE CRISPIES Logo" />
+					<h1>CODE<span>CRISPIES</span></h1>
 				</div>
-				<nav class="main-nav">
-					<ul>
-						<li class="toggle-container">
-							<label class="toggle-switch" title="Toggle error feedback">
-								<input type="checkbox" id="disable-feedback-toggle" checked />
-								<span class="toggle-slider"></span>
-								<span class="toggle-label">Show Hints</span>
-							</label>
-						</li>
-						<li><button id="module-selector-btn" class="btn">Progress</button></li>
-						<li><button id="reset-btn" class="btn">Reset Progress</button></li>
-						<li><button id="help-btn" class="btn">Help</button></li>
-					</ul>
-				</nav>
+				<button id="help-btn" class="help-toggle" aria-label="Help">?</button>
 			</header>
 
-			<main class="main-content">
-				<div class="sidebar">
-					<div class="module-list">
-						<!-- Module list will be populated here -->
-					</div>
-					<div class="lesson-progress">
-						<!-- Lesson progress will be shown here -->
-					</div>
+			<!-- Main Game Layout -->
+			<main class="game-layout">
+				<!-- Left Panel: Instructions + Editor -->
+				<div class="left-panel">
+					<section class="instructions">
+						<h2 id="lesson-title">Loading...</h2>
+						<div class="lesson-description" id="lesson-description">
+							Please select a lesson to begin.
+						</div>
+						<div class="task-instruction" id="task-instruction">
+							<!-- Task instructions will be shown here -->
+						</div>
+					</section>
+
+					<section class="editor-section">
+						<div class="code-editor">
+							<div class="editor-header">
+								<label for="code-input" class="editor-label">CSS Editor</label>
+								<div class="editor-actions">
+									<div class="validation-indicators-container"></div>
+									<button id="run-btn" class="btn btn-run">
+										<img src="./gear.svg" alt="" />Run
+									</button>
+								</div>
+							</div>
+							<div class="editor-content">
+								<textarea id="code-input" class="code-input" spellcheck="false"></textarea>
+							</div>
+						</div>
+						<div class="hint-area" id="hint-area">
+							<!-- Hints displayed inline here -->
+						</div>
+					</section>
 				</div>
 
-				<div class="content-area">
-					<div class="lesson-container">
-						<h2 id="lesson-title">Loading...</h2>
-						<div class="lesson-description" id="lesson-description">Please select a lesson to begin.</div>
-
-						<div class="challenge-container">
-							<div class="preview-comparison" id="preview-comparison">
-								<div class="preview-pane preview-student">
-									<div class="preview-header">
-										<span class="preview-label">Your Output</span>
-									</div>
-									<div class="preview-frame" id="preview-area">
-										<!-- Student's preview iframe will be shown here -->
-									</div>
-								</div>
-
-								<div class="preview-pane preview-expected">
-									<div class="preview-header">
-										<span class="preview-label">Expected Result</span>
-									</div>
-									<div class="preview-frame" id="preview-expected">
-										<!-- Expected result iframe will be shown here -->
-									</div>
-								</div>
-
-								<div class="preview-overlay" id="match-overlay">
-									<div class="match-celebration">Perfect Match!</div>
-								</div>
+				<!-- Right Panel: Preview + Navigation -->
+				<div class="right-panel">
+					<div class="preview-section">
+						<div class="preview-header">
+							<span class="preview-label">Your Output</span>
+							<button id="show-expected-btn" class="btn btn-small">Show Expected</button>
+						</div>
+						<div class="preview-wrapper">
+							<div class="preview-frame" id="preview-area">
+								<!-- User's preview iframe will be shown here -->
 							</div>
-
-							<div class="editor-container">
-								<div class="task-instruction" id="task-instruction">
-									<!-- Task instructions will be shown here -->
-								</div>
-
-								<div class="code-editor">
-									<div class="editor-header">
-										<label for="code-input">CSS Editor</label>
-										<div class="validation-indicators-container"></div>
-										<button id="run-btn" class="btn btn-secondary"><img src="./gear.svg" alt="" />Run</button>
-									</div>
-									<div class="editor-content">
-										<!--										<pre><code id="editor-prefix"></code></pre>-->
-										<textarea id="code-input" class="code-input" spellcheck="false"></textarea>
-										<!--										<pre><code id="editor-suffix"></code></pre>-->
-									</div>
+							<div class="expected-overlay" id="expected-overlay">
+								<div class="expected-frame" id="preview-expected">
+									<!-- Expected result iframe (toggleable) -->
 								</div>
 							</div>
 						</div>
-
-						<footer>
-							Free and Open Source Software:
-							<a href="https://github.com/nextlevelshit/code-crispies" target="_blank"
-								>https://github.com/nextlevelshit/code-crispies</a
-							>
-							by <a href="https://dailysh.it" title="Website of Michael W. Czechowski">Michael W. Czechowski</a>
-						</footer>
-
-						<div class="controls">
-							<button id="prev-btn" class="btn">Previous</button>
-							<div class="level-indicator" id="level-indicator">Level 0/0</div>
-							<button id="next-btn" class="btn btn-primary">Next</button>
-						</div>
+					</div>
+					<div class="game-controls">
+						<button id="prev-btn" class="btn">Previous</button>
+						<div class="level-indicator" id="level-indicator">Level 0/0</div>
+						<button id="next-btn" class="btn btn-primary">Next</button>
 					</div>
 				</div>
 			</main>
 
+			<!-- Sidebar Backdrop -->
+			<div class="sidebar-backdrop" id="sidebar-backdrop"></div>
+
+			<!-- Slide-out Sidebar -->
+			<aside class="sidebar-drawer" id="sidebar-drawer">
+				<div class="sidebar-header">
+					<h3>Menu</h3>
+					<button id="close-sidebar" class="close-btn" aria-label="Close menu">&times;</button>
+				</div>
+
+				<div class="sidebar-section">
+					<h4>Progress</h4>
+					<div class="progress-display" id="progress-display">
+						<div class="progress-bar">
+							<div class="progress-fill" id="progress-fill"></div>
+						</div>
+						<span class="progress-text" id="progress-text">0% Complete</span>
+					</div>
+				</div>
+
+				<div class="sidebar-section">
+					<h4>Lessons</h4>
+					<div class="module-list" id="module-list">
+						<!-- Module list will be populated here -->
+					</div>
+				</div>
+
+				<div class="sidebar-section">
+					<h4>Settings</h4>
+					<label class="toggle-switch">
+						<input type="checkbox" id="disable-feedback-toggle" checked />
+						<span class="toggle-slider"></span>
+						<span class="toggle-label">Show Hints</span>
+					</label>
+					<button id="reset-btn" class="btn btn-text">Reset All Progress</button>
+				</div>
+
+				<footer class="app-footer">
+					Open Source:
+					<a href="https://github.com/nextlevelshit/code-crispies" target="_blank">GitHub</a>
+					by <a href="https://dailysh.it" title="Michael W. Czechowski">mwc</a>
+				</footer>
+			</aside>
+
+			<!-- Help Modal -->
 			<div id="modal-container" class="modal-container hidden">
 				<div class="modal">
 					<div class="modal-header">
diff --git a/src/main.css b/src/main.css
index 9dceba9..7728a76 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1,9 +1,9 @@
 /* ================= BASE THEME ================= */
 :root {
 	/* Primary colors */
-	--primary-color: #5e4b8b; /* Rich purple */
-	--primary-light: #8a77b5; /* Lighter purple */
-	--primary-dark: #3b2e63; /* Darker purple */
+	--primary-color: #5e4b8b;
+	--primary-light: #8a77b5;
+	--primary-dark: #3b2e63;
 
 	/* Secondary colors */
 	--secondary-color: #444444;
@@ -17,9 +17,9 @@
 	--white-text: #ffffff;
 
 	/* Background colors */
-	--bg-color: #f8f7fc; /* Subtle purple tint */
+	--bg-color: #f8f7fc;
 	--panel-bg: #ffffff;
-	--code-bg: #f7f5fa; /* Very light purple */
+	--code-bg: #f7f5fa;
 	--editor-bg: #1e1e1e;
 	--editor-highlight: #303030;
 
@@ -28,46 +28,37 @@
 
 	/* Status colors */
 	--info-color: #7a93fe;
-	--info-color-dark: #4a6bfd;
-	--success-color: #58b890; /* Muted teal green */
+	--success-color: #58b890;
 	--success-color-dark: #3d8d6a;
 	--success-color-light: #a3e6c8;
-	--error-color: #cb6e75; /* Muted red */
+	--error-color: #cb6e75;
+	--danger-color: #dc3545;
 
 	/* Special colors */
 	--primary-bg-light: rgba(94, 75, 139, 0.05);
 	--primary-bg-medium: rgba(94, 75, 139, 0.1);
-	--primary-bg-instruction: rgba(125, 92, 203, 0.84);
-	--primary-bg-instruction-light: rgba(244, 244, 244, 0.2);
-	--success-bg-light: rgba(88, 184, 144, 0.76);
-	--success-bg-medium: rgba(88, 184, 144, 0.4);
-	--error-bg-light: rgba(244, 244, 244, 0.8);
+	--primary-bg-instruction: rgba(125, 92, 203, 0.9);
+	--success-bg-light: rgba(88, 184, 144, 0.15);
 	--modal-bg: rgba(0, 0, 0, 0.5);
 
-	/* Additional colors */
-	--badge-bg: var(--success-color);
-
 	/* Typography */
-	--font-main: "Playfair Display", "Inter", "Segoe UI", Roboto, sans-serif;
+	--font-main: "Inter", "Segoe UI", Roboto, sans-serif;
 	--font-code: "JetBrains Mono", "Fira Code", monospace;
 
 	/* Effects */
-	--shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
-	--shadow-modal: 0 4px 16px rgba(0, 0, 0, 0.15);
-	--text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
+	--shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+	--shadow-modal: 0 4px 20px rgba(0, 0, 0, 0.15);
 
-	/* Sizes and spacing */
-	--header-height: 60px;
-	--sidebar-width: 240px;
+	/* Sizes */
+	--header-height: 50px;
+	--sidebar-width: 280px;
 	--border-radius-sm: 4px;
 	--border-radius-md: 6px;
 	--border-radius-lg: 8px;
-	--border-accent: 4px;
 	--spacing-xs: 0.5rem;
 	--spacing-sm: 0.75rem;
 	--spacing-md: 1rem;
 	--spacing-lg: 1.5rem;
-	--spacing-xl: 2rem;
 }
 
 /* ================= RESET ================= */
@@ -82,187 +73,534 @@ body {
 	font-family: var(--font-main);
 	background-color: var(--bg-color);
 	color: var(--text-color);
-	line-height: 1.6;
+	line-height: 1.5;
+	overflow: hidden;
 }
 
-code {
+code, kbd {
 	font-family: var(--font-code);
 }
 
-footer {
-	margin: 2rem auto 0;
-	display: block;
-	color: var(--light-text);
-	text-align: center;
-}
-
-footer a {
-	color: var(--primary-color);
-	text-decoration: none;
-	transition: color 0.2s ease;
-}
-
-/* ================= LAYOUT ================= */
+/* ================= APP CONTAINER ================= */
 .app-container {
 	display: flex;
 	flex-direction: column;
-	min-height: 100vh;
-}
-
-.main-content {
-	display: flex;
-	flex: 1;
-	min-height: calc(100vh - var(--header-height));
+	height: 100vh;
+	overflow: hidden;
 }
 
 /* ================= HEADER ================= */
 .header {
-	background-color: var(--panel-bg);
-	padding: var(--spacing-md) var(--spacing-xl);
 	display: flex;
-	justify-content: space-between;
 	align-items: center;
-	box-shadow: var(--shadow);
-	position: sticky;
-	top: 0;
-	z-index: 100;
+	justify-content: space-between;
 	height: var(--header-height);
+	padding: 0 var(--spacing-md);
+	background: var(--panel-bg);
+	border-bottom: 1px solid var(--border-color);
+	flex-shrink: 0;
+}
+
+.menu-toggle {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+	width: 28px;
+	height: 20px;
+	background: none;
+	border: none;
+	cursor: pointer;
+	padding: 0;
+}
+
+.hamburger-line {
+	width: 100%;
+	height: 2px;
+	background-color: var(--text-color);
+	border-radius: 2px;
+	transition: all 0.3s ease;
 }
 
 .logo {
 	display: flex;
 	align-items: center;
-	gap: 0.6rem;
+	gap: 0.5rem;
 }
 
 .logo h1 {
+	font-size: 1rem;
+	font-weight: 800;
 	color: var(--text-color);
-	font-size: 1.1rem;
-	line-height: 0.8;
-	font-weight: 900;
+	line-height: 1;
 }
 
 .logo h1 span {
 	color: var(--primary-color);
 }
 
-/* Navigation */
-.main-nav ul {
-	display: flex;
-	list-style: none;
-	gap: var(--spacing-md);
-}
-
-/* Hamburger Menu Icon */
-.hamburger {
-	display: none;
+.help-toggle {
+	width: 28px;
+	height: 28px;
+	border-radius: 50%;
+	border: 2px solid var(--border-color);
+	background: none;
+	font-weight: bold;
 	cursor: pointer;
-	flex-direction: column;
-	justify-content: space-around;
-	width: 30px;
-	height: 21px;
-	background: transparent;
-	border: none;
-	padding: 0;
+	color: var(--light-text);
+	transition: all 0.2s;
 }
 
-.hamburger-line {
-	display: block;
+.help-toggle:hover {
+	border-color: var(--primary-color);
+	color: var(--primary-color);
+}
+
+/* ================= GAME LAYOUT ================= */
+.game-layout {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+}
+
+/* ================= LEFT PANEL ================= */
+.left-panel {
+	width: 50%;
+	display: flex;
+	flex-direction: column;
+	border-right: 1px solid var(--border-color);
+	background: var(--panel-bg);
+	min-height: 0;
+}
+
+.instructions {
+	padding: var(--spacing-md);
+	overflow-y: auto;
+	max-height: 45%;
+	border-bottom: 1px solid var(--border-color);
+}
+
+#lesson-title {
+	font-size: 1.25rem;
+	color: var(--primary-dark);
+	margin-bottom: var(--spacing-sm);
+}
+
+.lesson-description {
+	font-size: 0.95rem;
+	line-height: 1.6;
+	color: var(--text-color);
+	margin-bottom: var(--spacing-md);
+}
+
+.lesson-description kbd {
+	background: var(--primary-bg-medium);
+	padding: 2px 6px;
+	border-radius: 3px;
+	font-size: 0.85rem;
+}
+
+.lesson-description pre {
+	background: var(--code-bg);
+	padding: var(--spacing-md);
+	border-radius: var(--border-radius-sm);
+	overflow-x: auto;
+	font-size: 0.85rem;
+	margin: var(--spacing-sm) 0;
+}
+
+.task-instruction {
+	background: var(--primary-bg-instruction);
+	color: var(--white-text);
+	padding: var(--spacing-sm) var(--spacing-md);
+	border-radius: var(--border-radius-sm);
+	font-size: 0.9rem;
+	line-height: 1.6;
+}
+
+.task-instruction kbd {
+	background: rgba(255, 255, 255, 0.2);
+	padding: 2px 6px;
+	border-radius: 3px;
+	font-size: 0.85rem;
+}
+
+/* ================= EDITOR SECTION ================= */
+.editor-section {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
+.code-editor {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
+.editor-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: var(--spacing-xs) var(--spacing-md);
+	background: var(--code-bg);
+	border-bottom: 1px solid var(--border-color);
+}
+
+.editor-label {
+	font-size: 0.85rem;
+	font-weight: 600;
+	color: var(--light-text);
+}
+
+.editor-actions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-sm);
+}
+
+.editor-content {
+	flex: 1;
+	display: flex;
+	min-height: 0;
+}
+
+.code-input {
+	flex: 1;
 	width: 100%;
-	height: 3px;
-	background-color: var(--text-color);
+	padding: var(--spacing-md);
+	background: var(--editor-bg);
+	color: var(--editor-text);
+	border: none;
+	font-family: var(--font-code);
+	font-size: 14px;
+	line-height: 1.5;
+	resize: none;
+	outline: none;
+}
+
+.code-input::placeholder {
+	color: #666;
+}
+
+/* ================= HINT AREA ================= */
+.hint-area {
+	min-height: 3rem;
+	padding: var(--spacing-sm) var(--spacing-md);
+	background: var(--code-bg);
+	border-top: 1px solid var(--border-color);
+}
+
+.hint {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-sm);
+	padding: var(--spacing-xs) var(--spacing-sm);
+	background: var(--primary-bg-light);
+	border-left: 3px solid var(--primary-color);
+	border-radius: var(--border-radius-sm);
+}
+
+.hint-progress {
+	background: var(--primary-color);
+	color: white;
+	padding: 2px 8px;
 	border-radius: 10px;
-	transition: all 0.3s ease;
+	font-size: 0.75rem;
+	font-weight: bold;
+	flex-shrink: 0;
+}
+
+.hint-message {
+	font-size: 0.9rem;
+	color: var(--text-color);
+}
+
+.hint-message kbd {
+	background: var(--primary-bg-medium);
+	padding: 2px 6px;
+	border-radius: 3px;
+	font-size: 0.8rem;
+}
+
+.hint-success {
+	background: var(--success-bg-light);
+	border-left-color: var(--success-color);
+}
+
+.hint-success .hint-progress {
+	background: var(--success-color);
+}
+
+/* ================= RIGHT PANEL ================= */
+.right-panel {
+	width: 50%;
+	display: flex;
+	flex-direction: column;
+	background: var(--bg-color);
+	min-height: 0;
+}
+
+.preview-section {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
+.preview-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: var(--spacing-xs) var(--spacing-md);
+	background: var(--panel-bg);
+	border-bottom: 1px solid var(--border-color);
+}
+
+.preview-label {
+	font-size: 0.85rem;
+	font-weight: 600;
+	color: var(--light-text);
+}
+
+.preview-wrapper {
+	flex: 1;
+	position: relative;
+	background: var(--panel-bg);
+	margin: var(--spacing-md);
+	border-radius: var(--border-radius-md);
+	box-shadow: var(--shadow);
+	overflow: hidden;
+	min-height: 0;
+}
+
+.preview-frame {
+	width: 100%;
+	height: 100%;
+	padding: var(--spacing-sm);
+}
+
+.preview-frame iframe {
+	width: 100%;
+	height: 100%;
+	border: none;
+	border-radius: var(--border-radius-sm);
+}
+
+/* Expected Overlay (toggleable) */
+.expected-overlay {
+	position: absolute;
+	inset: 0;
+	background: rgba(88, 184, 144, 0.1);
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.3s ease;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.expected-overlay.visible {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+.expected-frame {
+	width: 100%;
+	height: 100%;
+	padding: var(--spacing-sm);
+}
+
+.expected-frame iframe {
+	width: 100%;
+	height: 100%;
+	border: none;
+	border-radius: var(--border-radius-sm);
+	opacity: 0.7;
+}
+
+/* Success Match Animation */
+.preview-wrapper.matched {
+	box-shadow: 0 0 0 3px var(--success-color);
+}
+
+.preview-wrapper.matched::after {
+	content: "Perfect Match!";
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background: var(--success-color);
+	color: white;
+	padding: var(--spacing-sm) var(--spacing-lg);
+	border-radius: var(--border-radius-lg);
+	font-weight: bold;
+	font-size: 1.1rem;
+	animation: pop-in 0.4s ease-out;
+	z-index: 10;
+}
+
+@keyframes pop-in {
+	0% {
+		transform: translate(-50%, -50%) scale(0.8);
+		opacity: 0;
+	}
+	100% {
+		transform: translate(-50%, -50%) scale(1);
+		opacity: 1;
+	}
+}
+
+/* ================= GAME CONTROLS ================= */
+.game-controls {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: var(--spacing-md);
+	background: var(--panel-bg);
+	border-top: 1px solid var(--border-color);
+}
+
+.level-indicator {
+	font-size: 0.9rem;
+	color: var(--light-text);
+	font-weight: 500;
 }
 
 /* ================= SIDEBAR ================= */
-.sidebar {
+.sidebar-backdrop {
+	position: fixed;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.4);
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity 0.3s, visibility 0.3s;
+	z-index: 199;
+}
+
+.sidebar-backdrop.visible {
+	opacity: 1;
+	visibility: visible;
+}
+
+.sidebar-drawer {
+	position: fixed;
+	left: calc(-1 * var(--sidebar-width));
+	top: 0;
 	width: var(--sidebar-width);
-	padding: var(--spacing-lg) var(--spacing-md);
-	overflow-y: auto;
-	height: calc(100vh - var(--header-height));
-	position: sticky;
-	top: var(--header-height);
-	scroll-behavior: smooth;
+	height: 100vh;
+	background: var(--panel-bg);
+	box-shadow: var(--shadow-modal);
+	transition: left 0.3s ease;
+	z-index: 200;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
 }
 
-.sidebar .module-list {
-	max-height: calc(100vh - 200px);
-	padding-right: 5px;
+.sidebar-drawer.open {
+	left: 0;
 }
 
-/* ================= CONTENT AREA ================= */
-.content-area {
-	flex: 1;
-	padding: var(--spacing-xl);
-	max-width: calc(100% - var(--sidebar-width));
+.sidebar-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: var(--spacing-md);
+	border-bottom: 1px solid var(--border-color);
+	flex-shrink: 0;
 }
 
-/* ================= MODULE LIST ================= */
-.module-list {
-	margin-bottom: var(--spacing-xl);
+.sidebar-header h3 {
+	font-size: 1.1rem;
+	color: var(--primary-dark);
 }
 
-.module-list h3 {
-	margin-bottom: var(--spacing-md);
-	font-size: 0.7rem;
-	letter-spacing: 1px;
-	font-weight: 800;
-	padding: var(--spacing-xs) var(--spacing-md);
-	text-transform: uppercase;
-	border-left: var(--border-accent) solid var(--primary-color);
-	border-radius: 2px;
-}
-
-.module-list-item {
-	padding: var(--spacing-sm) var(--spacing-md);
-	margin-bottom: var(--spacing-xs);
-	border-radius: var(--border-radius-md);
+.close-btn {
+	width: 32px;
+	height: 32px;
+	border: none;
+	background: none;
+	font-size: 1.5rem;
 	cursor: pointer;
-	transition: background-color 0.2s;
+	color: var(--light-text);
+	border-radius: var(--border-radius-sm);
 }
 
-.module-list-item:hover {
-	background-color: var(--primary-bg-light);
-}
-
-.module-list-item.active {
-	background-color: var(--primary-bg-medium);
+.close-btn:hover {
+	background: var(--primary-bg-light);
 	color: var(--primary-color);
 }
 
-.module-list-item.completed {
-	position: relative;
-	padding-right: 2rem;
+.sidebar-section {
+	padding: var(--spacing-md);
+	border-bottom: 1px solid var(--border-color);
 }
 
-.module-list-item.completed::after {
-	content: "✓";
-	position: absolute;
-	right: 0.8rem;
-	top: 50%;
-	transform: translateY(-50%);
-	color: var(--primary-color);
-	font-weight: bold;
+.sidebar-section:last-child {
+	border-bottom: none;
+}
+
+.sidebar-section h4 {
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	color: var(--light-text);
+	margin-bottom: var(--spacing-sm);
+}
+
+/* Progress Display */
+.progress-display {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xs);
+}
+
+.progress-bar {
+	height: 8px;
+	background: var(--border-color);
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.progress-fill {
+	height: 100%;
+	background: var(--success-color);
+	border-radius: 4px;
+	transition: width 0.3s ease;
+	width: 0%;
+}
+
+.progress-text {
+	font-size: 0.85rem;
+	color: var(--light-text);
+}
+
+/* Module List in Sidebar */
+.module-list {
+	max-height: 40vh;
+	overflow-y: auto;
 }
 
-/* Module and Lesson List */
 .module-container {
-	margin-bottom: 8px;
+	margin-bottom: 4px;
 }
 
 .module-header {
 	display: flex;
 	align-items: center;
+	padding: var(--spacing-xs) var(--spacing-sm);
 	cursor: pointer;
-	padding: 8px 12px;
-	border-radius: 4px;
-	transition: background-color 0.2s;
+	border-radius: var(--border-radius-sm);
 	font-weight: 600;
+	font-size: 0.9rem;
+	transition: background 0.2s;
 }
 
 .module-header:hover {
-	background-color: var(--hover-color);
+	background: var(--primary-bg-light);
 }
 
 .module-header.completed::before {
@@ -272,7 +610,6 @@ footer a {
 }
 
 .expand-icon {
-	display: inline-block;
 	margin-right: 8px;
 	font-size: 10px;
 	transition: transform 0.2s;
@@ -285,22 +622,21 @@ footer a {
 }
 
 .lesson-list-item {
-	padding: 6px 12px;
-	border-radius: 4px;
+	padding: 6px 10px;
+	border-radius: var(--border-radius-sm);
 	cursor: pointer;
-	transition: background-color 0.2s;
-	font-size: 0.9em;
-	margin: 4px 0;
+	font-size: 0.85rem;
+	margin: 2px 0;
+	transition: background 0.2s;
 }
 
 .lesson-list-item:hover {
-	background-color: var(--primary-bg-medium);
+	background: var(--primary-bg-light);
 }
 
 .lesson-list-item.active {
-	background-color: var(--primary-bg-medium);
-	color: var(--dark-text);
-	font-weight: bold;
+	background: var(--primary-bg-medium);
+	font-weight: 600;
 }
 
 .lesson-list-item.completed::before {
@@ -309,279 +645,21 @@ footer a {
 	color: var(--success-color);
 }
 
-/* ================= LESSON CONTAINER ================= */
-.lesson-container {
-	display: flex;
-	flex-flow: column;
-	align-items: stretch;
-	justify-content: flex-start;
-	gap: 1.4rem;
-	background-color: var(--panel-bg);
-	border-radius: var(--border-radius-lg);
-	box-shadow: var(--shadow);
-	padding: var(--spacing-xl);
-	height: 100%;
-	margin-bottom: var(--spacing-xl);
-}
-
-#lesson-title {
-	color: var(--primary-dark);
-}
-
-.lesson-description {
-	color: var(--text-color);
-	line-height: 1.7;
-	font-size: 1.1rem;
-	margin-bottom: 2rem;
-	width: 86%;
-}
-
-.lesson-description pre {
-	display: inline-block;
-	width: 100%;
-	font-family: var(--font-code);
-	font-size: 0.9rem;
-	background-color: var(--code-bg);
-	padding: var(--spacing-xl) calc(var(--spacing-xl) + var(--spacing-md)) var(--spacing-xl) var(--spacing-xl);
-	border-radius: var(--border-radius-md);
-	overflow-x: auto;
-	margin-bottom: var(--spacing-lg);
-}
-
-.lesson-description kbd {
-	font-family: var(--font-code);
-	background-color: var(--primary-bg-medium);
-	color: var(--dark-text);
-	border-radius: var(--border-radius-sm);
-	padding: calc(var(--spacing-xs) / 2);
-	font-size: 0.9rem;
-	letter-spacing: -0.75px;
-}
-
-/* ================= CHALLENGE CONTAINER ================= */
-.challenge-container {
-	display: flex;
-	flex: 1;
-	flex-direction: column;
-	gap: var(--spacing-lg);
-	margin-bottom: var(--spacing-xl);
-}
-
-/* ================= PREVIEW COMPARISON ================= */
-.preview-comparison {
-	position: relative;
-	display: flex;
-	gap: var(--spacing-md);
-	min-height: 300px;
-	flex: 1;
-}
-
-.preview-pane {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	border: 1px solid var(--border-color);
-	border-radius: var(--border-radius-md);
-	overflow: hidden;
-	background-color: var(--panel-bg);
-}
-
-.preview-header {
-	padding: var(--spacing-xs) var(--spacing-md);
-	background-color: var(--code-bg);
-	font-size: 0.85rem;
-	font-weight: 600;
-	color: var(--light-text);
-	border-bottom: 1px solid var(--border-color);
-}
-
-.preview-frame {
-	flex: 1;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	padding: var(--spacing-sm);
-	min-height: 200px;
-}
-
-/* Merge overlay when student matches expected */
-.preview-overlay {
-	position: absolute;
-	inset: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	opacity: 0;
-	pointer-events: none;
-	transition: opacity 0.5s ease;
-	z-index: 10;
-	border-radius: var(--border-radius-md);
-}
-
-.preview-overlay.matched {
-	opacity: 1;
-	background: rgba(88, 184, 144, 0.15);
-}
-
-.match-celebration {
-	background: var(--success-color);
-	color: var(--white-text);
-	padding: var(--spacing-md) var(--spacing-lg);
-	border-radius: var(--border-radius-lg);
-	font-weight: 700;
-	font-size: 1.2rem;
-	box-shadow: 0 4px 20px rgba(88, 184, 144, 0.3);
-	animation: pop-in 0.4s ease-out;
-}
-
-@keyframes pop-in {
-	0% {
-		transform: scale(0.8);
-		opacity: 0;
-	}
-	100% {
-		transform: scale(1);
-		opacity: 1;
-	}
-}
-
-/* Both previews visually "merge" at 50% opacity */
-.preview-comparison.matched .preview-pane {
-	opacity: 0.5;
-	transition: opacity 0.5s ease;
-}
-
-/* Legacy preview-area styles (now used inside preview-frame) */
-.preview-area {
-	background-color: var(--panel-bg);
-	border: none;
-	border-radius: 0;
-	padding: 0;
-	overflow: hidden;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.editor-container {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-md);
-}
-
-.task-instruction {
-	color: var(--white-text);
-	background-color: var(--primary-bg-instruction);
-	border-left: var(--border-accent) solid var(--primary-color);
-	padding: var(--spacing-sm);
-	border-radius: var(--border-radius-sm);
-	line-height: 1.8;
-	font-weight: 600;
-}
-
-.task-instruction kbd {
-	font-family: var(--font-code);
-	background-color: var(--primary-bg-instruction-light);
-	/*color: var(--dark-text);*/
-	border-radius: var(--border-radius-sm);
-	padding: calc(var(--spacing-xs) / 2);
-	font-size: 0.9rem;
-	letter-spacing: -0.75px;
-}
-
-/* ================= CODE EDITOR ================= */
-.code-editor {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	position: relative;
-	border: 1px solid var(--border-color);
-	border-radius: var(--border-radius-md);
-	overflow: hidden;
-	min-height: 200px;
-}
-
-.editor-header {
-	background-color: var(--code-bg);
-	padding: var(--spacing-xs) var(--spacing-md);
-	display: flex;
-	justify-content: space-between;
-	min-height: 2rem;
-	align-items: center;
-	font-size: 0.9rem;
-	color: var(--light-text);
-	border-bottom: 1px solid var(--border-color);
-}
-
-.editor-content {
-	display: flex;
-	flex: 1;
-	flex-direction: column;
-	background-color: var(--editor-bg);
-	color: var(--editor-text);
-	padding: 0;
-	font-family: var(--font-code);
-	font-size: 14px;
-	line-height: 1.5;
-	cursor: text; /* Add text cursor to indicate it's editable */
-}
-
-.editor-focused {
-	animation: focus-pulse 0.3s ease;
-}
-
-.code-input {
-	flex: 1;
-	display: block;
-	background-color: transparent;
-	color: var(--editor-text);
-	border: none;
-	width: 100%;
-	min-height: 14px; /* Ensure minimum height */
-	font-family: var(--font-code);
-	font-size: 14px;
-	line-height: 1.5;
-	padding: var(--spacing-md);
-	outline: none;
-	overflow-y: scroll; /* Ensure scrolling works */
-	resize: none; /* Disable textarea resize */
-	caret-color: var(--primary-light);
-	transition: background-color 0.2s ease;
-}
-
-/* ================= CONTROLS ================= */
-.controls {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-top: var(--spacing-lg);
-}
-
-.level-indicator {
-	font-size: 0.9rem;
-	color: var(--light-text);
-}
-
 /* ================= BUTTONS ================= */
 .btn {
 	padding: var(--spacing-xs) var(--spacing-md);
 	border-radius: var(--border-radius-sm);
 	border: 1px solid var(--border-color);
-	background-color: var(--panel-bg);
+	background: var(--panel-bg);
 	color: var(--text-color);
 	cursor: pointer;
 	font-family: var(--font-main);
 	font-size: 0.9rem;
-	transition:
-		background,
-		color 0.2s;
-	text-shadow: var(--text-shadow);
+	transition: all 0.2s;
 }
 
 .btn:hover {
-	background-color: var(--code-bg);
+	background: var(--code-bg);
 }
 
 .btn img {
@@ -591,210 +669,67 @@ footer a {
 }
 
 .btn-primary {
-	background-color: var(--primary-color);
+	background: var(--primary-color);
 	color: var(--white-text);
-	border: 1px solid var(--primary-dark);
+	border-color: var(--primary-dark);
 }
 
 .btn-primary:hover {
-	background-color: var(--primary-dark);
+	background: var(--primary-dark);
 }
 
-.btn-secondary {
-	background-color: var(--secondary-color);
+.btn-run {
+	background: var(--secondary-color);
 	color: var(--white-text);
-	border: 1px solid var(--secondary-dark);
+	border-color: var(--secondary-dark);
 }
 
-.btn-secondary:hover {
-	background-color: var(--secondary-dark);
+.btn-run:hover {
+	background: var(--secondary-dark);
 }
 
-.btn-disabled {
-	opacity: 0.6;
-	cursor: not-allowed;
-}
-
-#module-selector-btn {
-	overflow: hidden;
-}
-
-#run-btn img {
-	transition: transform 420ms ease;
-}
-
-#run-btn.re-run {
-	background-color: var(--success-color);
-	border-color: var(--success-color);
-}
-
-#run-btn.re-run:hover {
-	background-color: var(--success-color-dark);
+.btn-run.success {
+	background: var(--success-color);
 	border-color: var(--success-color-dark);
 }
 
-/* ================= VALIDATION INDICATORS ================= */
-.validation-indicators-container {
-	display: flex;
-	gap: 5px;
-	z-index: 5;
+.btn-small {
+	padding: 4px 10px;
+	font-size: 0.8rem;
 }
 
-.validation-success-indicator {
-	background-color: var(--success-color);
-	color: var(--white-text);
-	width: 20px;
-	height: 20px;
-	border-radius: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 12px;
-}
-
-/* ================= MODAL ================= */
-.modal-container {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: var(--modal-bg);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	z-index: 1000;
-}
-
-.modal {
-	background-color: var(--panel-bg);
-	border-radius: var(--border-radius-lg);
-	box-shadow: var(--shadow-modal);
-	width: 90%;
-	max-width: 600px;
-	max-height: 80vh;
-	overflow-y: auto;
-}
-
-.modal-header {
-	padding: var(--spacing-md);
-	border-bottom: 1px solid var(--border-color);
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.modal-content {
-	padding: var(--spacing-lg);
-}
-
-.modal-content ol,
-.modal-content ul {
-	margin-left: var(--spacing-lg);
-	margin-bottom: var(--spacing-md);
-}
-
-.modal-content h3 {
-	margin-bottom: 0.2rem;
-	font-size: 1.2rem;
-}
-
-.modal-content h4 {
-	margin-bottom: 0.1rem;
-	font-size: 1rem;
-}
-
-.modal-content p {
-	margin-bottom: var(--spacing-md);
-}
-
-.modal-close {
-	background: none;
-	border: none;
-	font-size: 1.5rem;
-	cursor: pointer;
+.btn-ghost {
+	background: transparent;
 	color: var(--light-text);
+	border: 1px solid var(--border-color);
 }
 
-/* ================= FEEDBACK STYLES ================= */
-.feedback-success {
-	position: absolute;
-	bottom: 0.8rem;
-	right: 1.6rem;
-	color: var(--success-color-light);
-	font-weight: 800;
-	padding: var(--spacing-xs);
-	border-radius: var(--border-radius-sm);
-	background-color: var(--success-bg-medium);
-	border-left: 3px solid var(--success-color);
-	transition: all 0.3s ease;
+.btn-ghost:hover {
+	background: var(--bg-color);
+	color: var(--danger-color);
+	border-color: var(--danger-color);
 }
 
-.feedback-error {
-	position: absolute;
-	bottom: 0.8rem;
-	right: 1.6rem;
-	color: var(--text-color);
-	font-weight: 500;
-	padding: var(--spacing-xs);
-	border-radius: var(--border-radius-sm);
-	background-color: var(--error-bg-light);
-	border-left: 3px solid var(--white-text);
+.btn-text {
+	background: transparent;
+	color: var(--light-text);
+	border: none;
+	font-size: 0.85rem;
+	text-decoration: underline;
+	padding: var(--spacing-xs) 0;
 }
 
-.feedback-error kbd {
-	font-family: var(--font-code);
-	background-color: var(--error-bg-light);
-	color: var(--text-color);
-	border-radius: var(--border-radius-sm);
-	padding: calc(var(--spacing-xs) / 2);
-	font-size: 0.7rem;
-	letter-spacing: -0.75px;
-}
-
-/* ================= SUCCESS STATES ================= */
-.success {
-	background-color: var(--success-color);
-	border: 1px solid var(--success-color);
-}
-
-.success:hover,
-.success:focus {
-	background-color: var(--success-color-dark);
-	border: 1px solid var(--success-color-dark);
-}
-
-.success-highlight {
-	border-left: var(--border-accent) solid var(--success-color);
-	transition: all 0.3s ease;
-}
-
-.success-text {
-	color: var(--success-color);
-	transition: color 0.3s ease;
-}
-
-.success-instruction {
-	background-color: var(--success-bg-light);
-	border-left: var(--border-accent) solid var(--success-color);
-	padding: var(--spacing-md);
-	border-radius: var(--border-radius-sm);
+.btn-text:hover {
+	background: transparent;
+	color: var(--danger-color);
 }
 
 /* ================= TOGGLE SWITCH ================= */
-.toggle-container {
-	display: flex;
-	align-items: center;
-	margin-left: 10px;
-}
-
 .toggle-switch {
-	position: relative;
-	display: inline-block;
-	height: 24px;
 	display: flex;
 	align-items: center;
 	cursor: pointer;
+	margin-bottom: var(--spacing-sm);
 }
 
 .toggle-switch input {
@@ -806,292 +741,185 @@ footer a {
 .toggle-slider {
 	position: relative;
 	display: inline-block;
-	width: 40px;
+	width: 36px;
 	height: 20px;
-	background-color: #ccc;
-	border-radius: 34px;
-	transition: 0.4s;
+	background: #ccc;
+	border-radius: 20px;
+	transition: 0.3s;
 	margin-right: 8px;
+	flex-shrink: 0;
 }
 
-.toggle-slider:before {
-	position: absolute;
+.toggle-slider::before {
 	content: "";
+	position: absolute;
 	height: 16px;
 	width: 16px;
 	left: 2px;
 	bottom: 2px;
-	background-color: white;
+	background: white;
 	border-radius: 50%;
-	transition: 0.4s;
+	transition: 0.3s;
 }
 
 input:checked + .toggle-slider {
-	background-color: var(--primary-color);
+	background: var(--primary-color);
 }
 
-input:focus + .toggle-slider {
-	box-shadow: 0 0 1px var(--primary-color);
-}
-
-input:checked + .toggle-slider:before {
-	transform: translateX(20px);
+input:checked + .toggle-slider::before {
+	transform: translateX(16px);
 }
 
 .toggle-label {
-	font-size: 14px;
+	font-size: 0.9rem;
 	color: var(--text-color);
 }
 
-/* ================= UTILITY CLASSES ================= */
-.hidden {
+/* ================= VALIDATION INDICATORS ================= */
+.validation-indicators-container {
+	display: flex;
+	gap: 4px;
+}
+
+.validation-success-indicator {
+	background: var(--success-color);
+	color: white;
+	width: 18px;
+	height: 18px;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 10px;
+}
+
+/* ================= MODAL ================= */
+.modal-container {
+	position: fixed;
+	inset: 0;
+	background: var(--modal-bg);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 1000;
+}
+
+.modal-container.hidden {
 	display: none;
 }
 
-.completion-badge {
-	display: inline-block;
-	margin-left: 0.8rem;
-	padding: 0.2rem 0.6rem;
+.modal {
+	background: var(--panel-bg);
+	border-radius: var(--border-radius-lg);
+	box-shadow: var(--shadow-modal);
+	width: 90%;
+	max-width: 500px;
+	max-height: 80vh;
+	overflow-y: auto;
+}
+
+.modal-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: var(--spacing-md);
+	border-bottom: 1px solid var(--border-color);
+}
+
+.modal-close {
+	background: none;
+	border: none;
+	font-size: 1.5rem;
+	cursor: pointer;
+	color: var(--light-text);
+}
+
+.modal-content {
+	padding: var(--spacing-lg);
+}
+
+.modal-content p {
+	margin-bottom: var(--spacing-md);
+}
+
+/* ================= FOOTER ================= */
+.app-footer {
+	padding: var(--spacing-md);
 	font-size: 0.7rem;
-	font-weight: 600;
-	color: var(--white-text);
-	background-color: var(--badge-bg);
-	border-radius: 1rem;
-	vertical-align: middle;
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
+	color: var(--light-text);
+	text-align: center;
+	border-top: 1px solid var(--border-color);
+	margin-top: auto;
 }
 
-/* ================= ANIMATIONS ================= */
-@keyframes focus-pulse {
-	0% {
-		background-color: var(--editor-bg);
-	}
-	50% {
-		background-color: var(--editor-highlight);
-	}
-	100% {
-		background-color: var(--editor-bg);
-	}
+.app-footer a {
+	color: var(--primary-color);
+	text-decoration: none;
 }
 
-/* ================= RESPONSIVE DESIGN ================= */
-@media (min-width: 1024px) {
-	.challenge-container {
-		flex-direction: row;
-	}
-
-	.preview-comparison,
-	.editor-container {
-		width: 50%;
-	}
+/* ================= UTILITY ================= */
+.hidden {
+	display: none !important;
 }
 
-/* Responsive: Stack preview panes on medium screens */
-@media (max-width: 1200px) {
-	.preview-comparison {
+/* ================= RESPONSIVE ================= */
+@media (max-width: 768px) {
+	.game-layout {
 		flex-direction: column;
+		overflow-y: auto;
 	}
 
-	.preview-pane {
-		min-height: 150px;
-	}
-}
-
-@media (max-width: 1024px) {
-	.main-content {
-		flex-direction: column;
-	}
-
-	.sidebar {
+	.left-panel,
+	.right-panel {
 		width: 100%;
-		height: auto;
-		position: static;
-		padding: var(--spacing-md);
+		min-height: 50vh;
 		border-right: none;
+	}
+
+	.left-panel {
 		border-bottom: 1px solid var(--border-color);
 	}
 
-	.content-area {
-		max-width: 100%;
-		padding: var(--spacing-md);
+	.instructions {
+		max-height: 30vh;
 	}
 
-	.challenge-container {
-		flex-direction: column;
+	.preview-wrapper {
+		margin: var(--spacing-sm);
 	}
 
-	.preview-comparison,
-	.editor-container {
-		width: 100%;
-	}
-
-	.preview-comparison {
-		min-height: 200px;
-	}
-
-	.lesson-progress {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: center;
-		gap: var(--spacing-xs);
-		margin-top: var(--spacing-md);
-	}
-}
-
-@media (max-width: 768px) {
-	.header {
-		flex-wrap: wrap;
-		padding: var(--spacing-md);
-		position: static;
-		height: auto;
-		gap: var(--spacing-md);
-	}
-
-	.logo {
-		flex: 1;
-	}
-
-	.hamburger {
-		display: flex;
-		order: 2;
-	}
-
-	.hamburger.open .hamburger-line:nth-child(1) {
-		transform: translateY(9px) rotate(45deg);
-	}
-
-	.hamburger.open .hamburger-line:nth-child(2) {
-		opacity: 0;
-	}
-
-	.hamburger.open .hamburger-line:nth-child(3) {
-		transform: translateY(-5px) rotate(-45deg);
-	}
-
-	.main-nav {
-		width: 100%;
-		order: 3;
-		height: 0;
-		overflow: hidden;
-		transition: height 0.3s ease;
-	}
-
-	.main-nav.open {
-		height: auto;
-		margin-top: var(--spacing-md);
-	}
-
-	.main-nav ul {
-		flex-direction: column;
-		width: 100%;
-		align-items: flex-start;
-		gap: var(--spacing-sm);
-		flex-wrap: wrap;
-		justify-content: center;
-	}
-
-	.main-nav ul li {
-		width: 100%;
-	}
-
-	.main-nav ul li .btn {
-		width: 100%;
-		text-align: left;
-	}
-
-	.toggle-container {
-		margin: var(--spacing-sm) 0;
-	}
-
-	.main-content {
-		min-height: calc(100vh - 120px);
-	}
-
-	.lesson-description {
-		width: 100%;
-		font-size: 1rem;
-	}
-
-	.lesson-container {
-		padding: var(--spacing-md);
-	}
-
-	#lesson-title {
-		font-size: 1.5rem;
-	}
-
-	.code-input {
-		font-size: 13px;
-	}
-
-	.controls {
-		flex-wrap: wrap;
-		gap: var(--spacing-sm);
+	.game-controls {
+		padding: var(--spacing-sm);
 	}
 
 	.btn {
 		padding: var(--spacing-xs) var(--spacing-sm);
 		font-size: 0.85rem;
 	}
-
-	.lessons-container {
-		margin-left: 8px;
-		padding-left: 6px;
-	}
-
-	.lesson-list-item,
-	.module-header {
-		padding: 8px 6px;
-	}
-
-	.validation-indicators-container {
-		justify-content: flex-end;
-		flex: 1;
-	}
-
-	.editor-header {
-		flex-wrap: wrap;
-	}
-
-	.lesson-description pre {
-		padding: var(--spacing-md);
-		font-size: 0.8rem;
-	}
-
-	.task-instruction {
-		font-size: 0.9rem;
-	}
 }
 
 @media (max-width: 480px) {
-	.logo {
-		flex-direction: row;
-		gap: 0.4rem;
-	}
-
-	.logo img {
-		width: 40px;
-	}
-
 	.logo h1 {
 		font-size: 0.9rem;
 	}
 
-	.main-nav ul {
-		gap: var(--spacing-sm);
+	.logo img {
+		width: 32px;
 	}
 
-	.toggle-label {
-		font-size: 12px;
+	#lesson-title {
+		font-size: 1.1rem;
 	}
 
-	.modal {
-		width: 95%;
+	.lesson-description {
+		font-size: 0.9rem;
 	}
 
-	.header {
-		padding: var(--spacing-sm);
-		gap: var(--spacing-sm);
+	.task-instruction {
+		font-size: 0.85rem;
+	}
+
+	.code-input {
+		font-size: 13px;
 	}
 }