Build a Typing Speed Test with AI

Build a single-page typing speed test as a static HTML/CSS/JS site. Use a dark theme with background #0f0f17 and a centered test area (max-width 700px). The accent color should be #8b5cf6 (purple). The main screen has three sections: a top stats bar, the text display area, and a text input area. The stats bar shows live-updating metrics during the test: WPM (words per minute, calculated as characters typed divided by 5 divided by minutes elapsed), accuracy percentage (correct characters / total characters typed), time remaining (countdown timer), and a small progress bar showing how far through the passage the user is. Include at least 30 hardcoded text passages organized into three difficulty levels. Easy passages (10-15 common words, simple vocabulary like "The cat sat on the mat"). Medium passages (25-40 words, moderate vocabulary drawn from general knowledge topics). Hard passages (50-70 words with punctuation, numbers, capitalization, and technical vocabulary). The user selects difficulty from three styled buttons before starting. Also include a time selector: 30 seconds, 60 seconds, or 120 seconds. The text display area shows the current passage in a large monospace font (1.1rem). As the user types, each character is color-coded in real time: correct characters turn #22c55e (green), incorrect characters turn #ef4444 (red) with a subtle red background tint, and the current character has a blinking cursor-style underline in the accent color. Characters not yet typed remain #6a6a80 (gray). If the user types an extra incorrect character, it should appear as a red inserted character. The display must handle word wrapping properly and keep the current word visible by auto-scrolling if the passage is long. The input area is a transparent text input that captures keystrokes but the user reads from the display area above. Auto-focus the input when the test starts. The timer begins on the first keystroke, not when the test loads. Pressing Tab restarts with a new random passage at the same difficulty. When the test ends (timer reaches zero or passage completed), show a results card with: final WPM, accuracy percentage, correct/incorrect/extra character counts, difficulty level, and test duration. Include a rating label: under 30 WPM = "Beginner", 30-50 = "Intermediate", 50-70 = "Proficient", 70-90 = "Advanced", 90+ = "Expert". Show a "Try Again" button and a "New Passage" button. Below the test area, display a result history section. Store every completed test result in localStorage with timestamp, WPM, accuracy, and difficulty. Show the last 20 results as a simple line chart drawn with an HTML canvas element — X axis is test number, Y axis is WPM, with dots connected by lines and the personal best highlighted with a star marker. Display the all-time personal best WPM prominently with the date it was achieved. Make it responsive: on mobile, stack the stats bar items into a 2x2 grid and reduce font sizes. Add keyboard shortcut hints: Tab to restart, Escape to quit mid-test. Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].