- Add lesson indicator pill to header (visible on desktop only)
- Logo stays centered, pill on left with burger menu
- Replace emoji arrows with CSS triangles for iOS compatibility
- Use native <details>/<summary> for expand/collapse
- Update tests for new implementation
- Wrap lesson label in span for mobile hiding
- Truncate module name with ellipsis if too long
- Hide "Lesson/Lektion" label on mobile, show only "1 / 3"
- Add lessonLabel i18n keys for EN/DE
- Create i18n.js module with EN/DE translations
- Add data-i18n attributes to index.html for dynamic text
- Update renderer.js to use translation functions
- Language switcher button replaces link to German page
- Stores preference in localStorage, detects browser language
- Add skip-to-content link for keyboard users
- Convert module headers and lesson items from divs to buttons
- Add ARIA attributes (aria-expanded, aria-controls, aria-label)
- Add focus return to trigger element when closing sidebar
- Shift main content when sidebar is open using CSS :has()
- Add code element styling in instruction boxes
- Add HTML mode support with new validation types (element_exists,
element_count, attribute_value, element_text, parent_child, sibling)
- Create 3 HTML lesson modules: Elements, Forms Basic, Forms Validation
- Implement side-by-side preview comparison (Your Output vs Expected)
- Add merge animation with "Perfect Match!" overlay on validation success
- Render expected output from solutionCode field in lesson JSON
- Update schema to support HTML mode and solutionCode
- Reorder modules: HTML first, then CSS, then Tailwind
- Update tests for new functionality
