Build a Recipe Scaler with AI

Build a single-page recipe scaler tool as a static HTML/CSS/JS site. Use a dark theme with background #0f0f17, card surfaces #1a1a2a, and accent color #14b8a6 (teal). The layout should be centered with a max-width of 700px. The main interface has two sections: Recipe Input and Scaled Output. The Recipe Input section shows the recipe name field (text input), base servings field (number input, default 4), and an ingredient list. Each ingredient row has three fields: ingredient name (text, e.g., "flour"), amount (number, e.g., "2"), and unit (dropdown: cups, tablespoons, teaspoons, ounces, pounds, grams, kilograms, milliliters, liters, pieces, pinch, to taste). Include an "Add Ingredient" button that appends a new empty row, and each row has a delete button (X icon). Start with 5 empty ingredient rows by default. Below the input section, display a prominent servings slider. The slider ranges from 1 to 20 servings (or allow typing a custom number up to 100). Show the original servings and the target servings side by side with a right arrow between them. As the slider moves, all ingredient amounts in the Scaled Output section update in real-time with smooth number transitions (CSS transition on opacity, briefly fade out and in). The Scaled Output section mirrors the ingredient list but with recalculated amounts. The scaling formula is: (target servings / base servings) * original amount. Display amounts as clean fractions where appropriate — 0.5 shows as "1/2", 0.25 as "1/4", 0.33 as "1/3", 0.75 as "3/4", 1.5 as "1 1/2". Amounts should be rounded to sensible precision (no "2.3333 cups" — round to "2 1/3 cups"). Color-code scaled amounts: green if scaled up from original, orange if scaled down, white if unchanged. Add a unit conversion toggle button that switches between Imperial (cups, tablespoons, ounces, pounds) and Metric (grams, milliliters, kilograms, liters). When toggled, convert all ingredient units appropriately using standard cooking conversions: 1 cup = 236.6ml, 1 tablespoon = 14.8ml, 1 teaspoon = 4.9ml, 1 ounce = 28.35g, 1 pound = 453.6g. Show the current unit system as a badge next to the toggle. Implement a Shopping List feature: a button that opens a modal showing all ingredients consolidated and grouped by category (produce, dairy, dry goods, spices — auto-categorize common ingredients, or default to "Other"). If the same ingredient appears multiple times (e.g., from combining multiple recipes), sum the amounts. Each item has a checkbox for crossing off while shopping. Include "Copy to Clipboard" (plain text list) and "Print" buttons. Add a Print View button that opens a clean, light-background version of the scaled recipe formatted for printing: recipe name as title, servings count, ingredient list in a clean table, and space for notes. Use @media print CSS rules to hide the app UI and show only the print content. Include preset recipes that load with one click. Provide at least 8 common recipes: Classic Pancakes, Chocolate Chip Cookies, Tomato Pasta Sauce, Caesar Salad, Banana Bread, Chicken Stir-Fry, Guacamole, and French Onion Soup. Each preset should have a realistic ingredient list with proper measurements. Display presets as small cards in a horizontal scrollable row at the top of the page. Save custom recipes to localStorage: a "Save Recipe" button stores the current recipe under the entered name. A "My Recipes" section on the main page lists saved recipes with load and delete options. Limit to 50 saved recipes. Make it fully responsive: on mobile, ingredient rows stack vertically (name on top, amount and unit side by side below). The slider should be full-width and easy to drag on touch devices. All tap targets are at least 44px tall. 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].