Ember test 2

Role: Senior Front-End Developer. Objective: Create a single-file, high-fidelity interactive prototype for a Tablet-based Dyslexia Intervention App. CRITICAL TECHNICAL REQUIREMENT: Do NOT use a build system. Do NOT use Vite, Webpack, or NPM. Do NOT create a package.json or postcss.config.js. Deliverable: Produce a single index.html file. Use the Tailwind CSS Play CDN <script src="https://cdn.tailwindcss.com"></script> for styling. Use Vue.js (via CDN) or Alpine.js (via CDN) for the interactivity (state switching between home and learning) so that the file remains a single, portable HTML document. All logic and styles must be contained within this one file. Design Specifications: Color Palette: Background: Soft Cream (#FDFBF7). Text: Dark Navy. Interactive elements: Soft Pastels. Typography: Use a font-stack of Comic Sans MS, Andika, Lexend, or sans-serif. Set letter-spacing to 0.05rem and line-height to 1.6. UI Elements: Large, rounded "tactile" buttons with shadows. Required Screens (in one file): Home Hub: A grid of 4 large, colorful "Learning Bubbles" (🔊 Letter Sounds, 🦘 Syllable Jump, 🧱 Word Builder, 📖 Story Time). Learning Module: A "Sentence Chunking" area where a sentence is broken into individual, clickable word-chips. Clicking a chip should highlight it in yellow and trigger a console log "Playing sound for: [word]". Settings Toggle: A simple way to change the background color between Cream, Soft Blue, and Pale Green. Layout: Optimized for Tablet Landscape.