Build a Compound Interest Calculator with AI

Build a single-page compound interest calculator as a static HTML/CSS/JS site. The page background should be #0f0f17 with a centered card (max-width 880px) using a #12121a background, 1px solid #2a2a3a border, and 16px border-radius. At the top, display "Compound Interest Calculator" as a heading in white with a subtitle in #8888a0 that reads "See how your money grows over time." Below that, create an input form with five fields in a responsive grid (3 columns on desktop, 1 on mobile): Initial Deposit (currency input with $ prefix, default $10,000), Monthly Contribution (currency input, default $500), Annual Interest Rate (percentage input with % suffix, default 7%, step 0.1%), Compounding Frequency (dropdown: Daily, Monthly, Quarterly, Annually, default Monthly), and Time Period (range slider from 1-40 years with the current value displayed prominently, default 20 years). Style all inputs with #1a1a2a background, #2a2a3a border, white text, and #3b82f6 focus ring. The range slider track should be #2a2a3a with a #3b82f6 thumb. Below the inputs, show three result cards in a row: Final Amount (large, bold, #22c55e color), Total Contributions (in #3b82f6), and Interest Earned (in #a855f7 purple). Each card should have a #16161e background with a subtle top border matching its accent color. Format all values with $ sign, commas, and two decimals. Below the result cards, render a stacked area chart using HTML5 Canvas. The bottom area represents total contributions over time (filled with #3b82f640), and the top area represents interest earned (filled with #a855f740). Draw a smooth line at the top edge of each area in their respective solid colors. X-axis shows years (0 to N), y-axis shows dollar amounts with formatted labels. Include horizontal gridlines in #1a1a2a, axis labels in #6a6a80, and a tooltip that appears on hover showing the exact values at that year. Below the chart, display a year-by-year breakdown table with columns: Year, Starting Balance, Annual Contributions, Interest Earned, End Balance. Style with alternating row backgrounds (#12121a and #16161e) and a sticky header. Add a toggle to switch between yearly and monthly view. In monthly view, show Month, Contribution, Interest, Balance. Add a "Compare Scenarios" button that duplicates the input section so users can overlay a second growth curve on the chart in a different color (#f59e0b amber). Show the difference between scenarios in the result cards. All calculations must update in real-time as inputs change. Use the standard compound interest formula: A = P(1 + r/n)^(nt) + PMT * [((1 + r/n)^(nt) - 1) / (r/n)]. Make the entire layout responsive with proper mobile stacking. 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].