Build a Mortgage Calculator with AI

Build a single-page mortgage calculator as a static HTML/CSS/JS site. The page background should be #0f0f17 with a centered card (max-width 900px) using a #12121a background, 1px solid #2a2a3a border, and 16px border-radius. At the top, show a large heading "Mortgage Calculator" in white (#fff) with a subheading in #8888a0. Below that, create an input section with four fields arranged in a 2x2 grid: Home Price (currency input with $ prefix, default $350,000), Down Payment (currency input with $ prefix AND a percentage toggle that auto-calculates between dollar amount and percentage, default 20%), Interest Rate (percentage input with % suffix, default 6.5%, step 0.125%), and Loan Term (dropdown with options: 10, 15, 20, 25, 30 years, default 30). Style all inputs with #1a1a2a background, #2a2a3a border, #e0e0e8 text, and a blue #3b82f6 focus ring. Below the inputs, display the results in a prominent summary bar with a #1a1a2e background: Monthly Payment (large, bold, #3b82f6 color), Total Interest Paid (secondary), Total Amount Paid (secondary), and Loan-to-Value ratio. Format all currency with commas and two decimal places. Below the summary, render an area chart using HTML5 Canvas (no libraries) showing the loan payoff over time. The x-axis is years, y-axis is dollars. Stack two filled areas: principal paid (gradient from #3b82f630 to transparent) and interest paid (#ef444430 to transparent) with crisp axis labels in #6a6a80. Add gridlines in #1a1a2a. The chart should be responsive and redraw on window resize. Below the chart, generate a full amortization schedule table with columns: Payment #, Payment Date, Payment Amount, Principal, Interest, Remaining Balance. Style the table with alternating row backgrounds (#12121a and #16161e), #2a2a3a borders, and sticky header row. Add a "Show Full Schedule" toggle that initially shows the first 12 rows and expands to show all. Add a "Compare Rates" mode — a toggle button that reveals a second set of inputs so users can compare two mortgage scenarios side by side. When active, split the results area into two columns showing both scenarios with the difference highlighted in green (#22c55e) or red (#ef4444). Include a "Property Tax & Insurance" expandable section where users can add annual property tax, homeowner insurance, and PMI (auto-calculated when down payment is below 20%) to see the true total monthly cost. Make the entire layout responsive — on mobile, stack the input grid to single column, make the chart full-width, and make the amortization table horizontally scrollable. All calculations should update in real-time as the user types. 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].