Build a BMI Calculator with AI

Build a single-page BMI calculator as a static HTML/CSS/JS site. Page background #0f0f17 with a centered card (max-width 560px) using #12121a background, 1px solid #2a2a3a border, and 20px border-radius. Design mobile-first. At the top, display "BMI Calculator" heading in white and subtitle "Body Mass Index" in #8888a0. Below the subtitle, add a unit toggle switch with two options: "Imperial (ft/in, lbs)" and "Metric (cm, kg)". Style the toggle as a segmented control with the active segment having a #3b82f6 background and white text, inactive segment having transparent background and #8888a0 text. Below the toggle, create the input section. In Imperial mode, show: Height as two side-by-side inputs — Feet (number, range 3-8, default 5) and Inches (number, range 0-11, default 10) — and Weight in Pounds (number input, default 160). In Metric mode, show: Height in Centimeters (number input, default 178) and Weight in Kilograms (number input, default 73). Style all inputs with #1a1a2a background, #2a2a3a border, large 22px font, white text, and #3b82f6 focus ring. Add labels above each input in #8888a0. Below the inputs, display the BMI result prominently: the number in large 48px bold font, colored according to the category (Underweight #3b82f6, Normal #22c55e, Overweight #f59e0b, Obese #ef4444). Below the number, show the category label text (e.g., "Normal Weight") in the same color, 18px font. Below the result, render a horizontal BMI scale bar using HTML5 Canvas or CSS. The bar should be a rounded rectangle (full width, 24px tall) with a smooth gradient: #3b82f6 (left, BMI 15) transitioning to #22c55e (BMI 18.5-24.9) to #f59e0b (BMI 25-29.9) to #ef4444 (right, BMI 40+). Place labeled tick marks at key thresholds: 18.5, 25, 30 with small labels below. Add a triangular pointer/indicator on the bar that animates smoothly to the user's BMI position. Below the scale, show the four category ranges as a legend with colored dots. Below the scale, add a "Healthy Weight Range" info box with a #16161e background showing: "For your height, a healthy BMI (18.5-24.9) corresponds to a weight range of X - Y lbs/kg." Calculate and display this dynamically based on the entered height. Below that, add a "BMI Categories" reference table with four rows: Underweight (<18.5), Normal (18.5-24.9), Overweight (25-29.9), Obese (30+). Each row has the category color dot, name, BMI range, and a brief one-line health note. Style with #12121a background and #1a1a2a borders. At the very bottom, include a medical disclaimer in a bordered box (#1a1a2a border, #6a6a80 text, smaller 0.8rem font): "BMI is a screening tool, not a diagnostic measure. It does not account for muscle mass, bone density, age, sex, or ethnicity. Consult a healthcare professional for personalized health assessments." Include a small info icon before the text. All calculations update in real-time. BMI formula: Imperial = (weight / height_inches^2) * 703, Metric = weight / (height_m^2). Switching units should convert the current values (not reset them). Make the layout responsive and ensure large touch targets on mobile. 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].