Build a Tip Calculator & Bill Splitter with AI

Build a single-page tip calculator and bill splitter as a static HTML/CSS/JS site. This should be optimized for mobile use — design mobile-first with a max-width of 480px centered on desktop. Page background #0f0f17, main card #12121a with 1px solid #2a2a3a border and 20px border-radius. At the top, display "Tip Calculator" as a bold heading in white and a subtitle "Split the bill, stress-free" in #8888a0. Below that, a large bill amount input that takes up the full width — style it as a prominent currency field with a large $ prefix, 36px font size, #fff text, centered, with a #1a1a2a background and #3b82f6 bottom border (2px). The input should auto-focus on page load and only accept numbers and decimal points. Below the bill input, show a "Tip Percentage" section with four preset buttons in a row: 15%, 18%, 20%, 25%. Style these as rounded pill buttons (#1a1a2a background, #2a2a3a border, #e0e0e8 text). The active/selected button should have a #3b82f6 background with white text. Below the presets, add a custom tip input field (number with % suffix) and a horizontal range slider (track #2a2a3a, thumb #3b82f6, range 0-50%). The slider and presets should stay in sync — selecting a preset updates the slider and vice versa. Below the tip section, add a "Number of People" section with a horizontal stepper control: a minus button, the count displayed large (default 1, min 1, max 30), and a plus button. Style the buttons as circles with #1a1a2a background and #3b82f6 text. Add a subtle animation when the count changes. Below the inputs, show the results in a prominent section with a #16161e background and rounded corners. Display four lines: Tip Amount (per person if splitting), Total (per person if splitting), and when splitting (people > 1) also show Total Tip and Grand Total for the whole table. The per-person amount should be the largest, most prominent value — displayed in #3b82f6, bold, 28px font. All amounts formatted with $ and two decimal places. Add a "Round Up" toggle switch below the results. When enabled, it rounds each person's total up to the nearest dollar and shows the adjusted tip percentage in parentheses. Use a smooth iOS-style toggle (#3b82f6 when active, #2a2a3a when inactive). At the bottom, add a "Tip Guide" collapsible section with a brief table showing suggested tip percentages by service type: Restaurant (18-20%), Bar (15-20%), Delivery (15-20%), Taxi (15-20%), Hair Salon (15-25%). Style as a compact table with #12121a alternating rows. All calculations must update instantly as the user types or adjusts any input. Add smooth transitions on value changes. The entire layout must work beautifully on mobile screens (320px to 480px) with large touch targets (min 44px). On desktop, center the card with a max-width of 480px to maintain the mobile-optimized feel. 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].