Act as my "Funnel Profit Calculator" builder for SAMPLE Northline Learning, a made-up online course business (all inputs below are made up). Build ONE premium-looking, self-contained HTML app named funnel-profit-calculator.html using the file tool (reply with a short summary only). DESIGN: a polished dark design system with clean spacing, a gradient accent colour, rounded cards, good typography from the system font stack, subtle animations (fade-in on load, smooth bar and number transitions, hover lift on cards), and a header titled "SAMPLE Northline Learning: Funnel Profit Calculator". It must look like a finished product, not a basic form. PARTS, all linked so that moving any slider updates every part at once: 1) SEVEN SLIDERS, each with its label, a live value readout and a small "baseline" marker: ad spend (1000 to 30000, step 500, baseline 10000), cost per click (0.50 to 6.00, step 0.10, baseline 2.00), opt-in rate (10 to 60 percent, step 1, baseline 30), booking rate (5 to 50 percent, step 1, baseline 20), show rate (30 to 95 percent, step 1, baseline 70), close rate (5 to 50 percent, step 1, baseline 25), price (500 to 6000, step 100, baseline 3000). 2) A LIVE FUNNEL VISUAL with five horizontal bars that shrink and grow smoothly: clicks, opt-ins, booked calls, shown calls, sales, each with its count and the step conversion rate. 3) FOUR BIG TILES: revenue, profit, ROAS and cost per shown call. Formulas: clicks = ad spend divided by cost per click; opt-ins = clicks times opt-in rate; booked calls = opt-ins times booking rate; shown calls = booked calls times show rate; sales = shown calls times close rate; revenue = sales times price; profit = revenue minus ad spend (show the formula and say no other costs are included); ROAS = revenue divided by ad spend; cost per shown call = ad spend divided by shown calls. Round counts to 1 decimal place, money to whole dollars with thousands separators, ROAS to 2 decimals. 4) A WHAT CHANGED panel comparing the current inputs with the baseline: for each of the four tiles and the sales count show the baseline value, the current value, and a green or red delta with an arrow (absolute and relative), and a line naming which slider moved most. The baseline results are computed from the baseline slider values. 5) AN A VS B SCENARIO TABLE: buttons "Save as A" and "Save as B" store a snapshot of all seven inputs and the four tile results; a table shows A and B side by side with a difference column (B minus A), highlights the better value in each row, and has a "Clear" button; empty slots say "Not saved yet". 6) A button "Reset to baseline". 7) Every output area carries the label "calculated from your inputs, not a guarantee". 8) A footer note headed "Not provided" listing: dates, platforms, audiences, refunds, fees, other costs, client names. TECHNICAL RULES: inline CSS and JavaScript only, no external libraries, CDNs, fonts, images or network calls; the baseline lives in one JavaScript object; it works when opened directly in a browser. HARD RULES: every number shown must be a slider value or be computed in JavaScript from the slider values; never invent a number, trend, benchmark or forecast; never promise results; never mention discounts, offers, free items or trials; never use any person, brand or studio names (the header name above is the only name allowed); never address me by name anywhere in the chat reply or the file. Draft only, nothing is published.
SAMPLE baseline inputs: ad spend 10000, cost per click 2.00, opt-in rate 30, booking rate 20, show rate 70, close rate 25, price 3000.
Not provided: dates, platforms, audiences, refunds, fees, other costs, client names.