Build an Interactive Multiplication Table with AI

Build a single-page interactive multiplication table as a static HTML/CSS/JS site. Use a dark theme with background #0f0f17 and make it visually appealing for kids aged 6-12. The accent color is #8b5cf6 (purple) with secondary colors #22c55e (green for correct) and #ef4444 (red for wrong). The main view shows a 12x12 multiplication grid rendered as an HTML table. The first row and first column are header cells (1-12) with a darker background (#1e1e2e) and bold white text. Each body cell shows the product of its row and column numbers. Apply a gradient color scale to the cells based on value: low numbers (1-24) get a cool blue tint (#3b82f620), medium numbers (25-72) get a purple tint (#8b5cf620), and high numbers (73-144) get a warm pink tint (#ec489920). Each cell should have a subtle border (#2a2a3a) and padding (8px). When the user hovers over any cell, highlight the entire row and entire column that intersect at that cell with a brighter background (#2a2a4a), and make the hovered cell itself glow with a box-shadow in the accent color. Also display a tooltip-style equation above the table: "7 x 8 = 56" in large text (1.5rem). Clicking a cell should toggle it as "mastered" (add a small checkmark icon) and save that state to localStorage so the grid remembers which facts the student has learned. Above the grid, add three mode buttons: "Table View" (default), "Quiz Mode", and "Timed Challenge". In Quiz Mode, the grid is hidden and replaced with a large centered problem display. Show a random multiplication problem (e.g., "6 x 9 = ?") in big text (3rem). Below it, show a number input field that auto-focuses. When the user submits an answer (Enter key), show immediate feedback: correct answers flash the screen border green and increment a streak counter displayed prominently at the top right (with a fire emoji when streak is 5+). Wrong answers flash red, show the correct answer for 2 seconds, and reset the streak to zero. Display a running score: "14 correct out of 18 attempted (78%)". After every correct answer, trigger a brief CSS confetti animation — small colored squares that burst from the answer area and fade out over 1 second using CSS keyframe animations. Include a dropdown to focus on specific tables (e.g., "Only 7s" or "Only 6s and 8s") or "All (1-12)". In Timed Challenge mode, the user selects a time limit (30s, 60s, 120s) and a table range (1-12 all, or specific numbers). A countdown timer starts on the first answer. Problems appear one after another rapidly. At the end, show a results card with: total correct, total wrong, average time per problem (in milliseconds), fastest answer, and a comparison to their personal best. Store the top 10 scores in localStorage as a leaderboard table showing rank, score, time per problem, date, and table range. Add a progress tracker at the bottom of the page in Table View: a 12x12 mini-grid where each cell is colored green if the user has answered that fact correctly 3+ times in quiz mode, yellow for 1-2 times, and gray for never attempted. This gives a visual overview of which multiplication facts the student has mastered. Make the layout responsive: on mobile (under 600px), the 12x12 grid should be horizontally scrollable with sticky first column and first row. Quiz mode should use larger text and a bigger input field for touch screens. 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].