# Invoice builder with live preview

Copy this prompt into Claude, Cursor or Lovable.

```text
Build a single-file HTML invoice builder, 1280x720, soft grey-blue background #eceef4, two white rounded panels (22px radius) with a large soft shadow. Accent indigo #4f46e5. System fonts, no libraries.
Left panel "Invoice details": a Client field and a Project field styled as inputs (44px tall, 1.5px border, 12px radius), then a "Line items" group with three rows (description, quantity, price): Brand strategy 1 $1,800 / Logo system 1 $1,480 / Guidelines PDF 1 $1,000, and an indigo "Send invoice" button.
Right panel is the invoice document: large heading "Invoice #0142" with the number in indigo, "Billed to Harbor & Finch" and "Due Dec 1, 2026" on a meta row, a table of the three items that appear one at a time (fade and rise), and a big "Total due" figure (44px) that counts from $0 to $4,280.00 using a CSS @property integer animation.
Motion (8 second loop): the Client field types "Harbor & Finch" with a steps() width animation and a blinking indigo caret, then the Project field types "Brand identity refresh". The invoice rows appear, the total counts up, the Send button does a press animation (scale .94), and finally a green rotated "PAID" stamp scales from 2.2 to 1 at the bottom right. Fade everything out at the end and restart.
Respect prefers-reduced-motion. Return only the complete HTML.
```