Build a Monthly Budget Planner with AI

Build a single-page monthly budget planner as a static HTML/CSS/JS site. Page background #0f0f17 with a centered layout (max-width 940px). Use #12121a for card backgrounds, 1px solid #2a2a3a borders, and 14px border-radius throughout. At the top, display "Monthly Budget Planner" heading in white and subtitle "See where every dollar goes" in #8888a0. Add a month/year selector (dropdown for month, number input for year, defaulting to the current month) that lets users plan different months. Below the heading, create an "Income" section with a card containing: a primary "Monthly Income" currency input ($ prefix, large 20px font, default $5,000), and an "Add Income Source" button that lets users add additional income lines (side gig, freelance, investments, etc.) each with a label and amount. Show the total income prominently below. Below income, create the "Expenses" section. Pre-populate with 8 default expense categories, each as a row with: a colored dot (unique color per category), category name (editable text), budgeted amount (currency input), and a delete button (red X on hover). Default categories with suggested amounts: Housing/Rent ($1,500, color #3b82f6), Groceries ($400, #22c55e), Transportation ($300, #f59e0b), Utilities ($200, #ef4444), Insurance ($250, #a855f7), Entertainment ($150, #ec4899), Dining Out ($200, #14b8a6), Savings ($500, #6366f1). Add an "Add Category" button at the bottom with a color picker for the dot. To the right of the expenses list (or below on mobile), render a donut pie chart using HTML5 Canvas. Each slice matches the category color. Show the total expenses in the center of the donut. The chart should animate when values change — slices smoothly grow or shrink. Include a legend below the chart with color dots, category names, amounts, and percentages. Below the chart, add a "Budget Summary" section with three key metrics in cards: Total Income (in #22c55e), Total Expenses (in #ef4444), and Remaining/Savings (in #3b82f6 if positive, #ef4444 if negative). Show the savings rate as a percentage with a progress bar. Below the summary, add a "50/30/20 Rule Comparison" section. Classify each expense category as Needs, Wants, or Savings using a dropdown on each expense row. Show three horizontal progress bars: Needs (target 50%, #3b82f6), Wants (target 30%, #f59e0b), Savings (target 20%, #22c55e). Each bar shows the actual percentage vs the target, with the bar turning red if over-budget. Add a "History" expandable section at the bottom that shows a list of saved months with their total income, expenses, and savings rate for quick comparison. All data must persist in localStorage. Save automatically on any change (debounced by 500ms). Include a "Reset Month" button (with confirmation dialog) and an "Export CSV" button that downloads the current month's budget as a spreadsheet-compatible file. Make the layout responsive — on mobile, stack the expenses and chart vertically, make expense rows compact, and ensure all inputs have large enough touch targets. 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].