Chart Prompts

Restyle my chart in the "Price Variance" style described below. Keep my data, chart type, title meaning and units; change only the presentation. Use the charting library this project already uses (plain SVG if there is none). If the library can't express a detail, draw it in a custom layer instead of dropping it. Measurements assume a 960 x 600 chart; scale them proportionally.

Mood: a purchase-order audit sheet. Plain stone paper, a boxed form header like the top of a PO, a thin working line, and red only where money leaked above the agreed price.

Colors (use these exact values):
- Page: #F5F5F0 (light stone). Form header boxes: #FCFCF8 with 1px #262626 borders.
- Actual values line and neutral points: #3F3F46 (charcoal). Reference price: #15803D (green), with a 5% opacity green wash below it.
- Exceptions above the reference: #DC2626 (red) points and stems.
- Title ink #262626, secondary text #737067, gridlines #D6D3C8.

Typography (Google Fonts):
- Libre Franklin 700 for the title: 29px, -0.5px letter-spacing, #262626, stating how many points breach the reference.
- Overpass for everything else: subtitle 15px #737067 (measure, currency per unit, period); form field labels 10px 700 uppercase with 1.4px letter-spacing in #737067; form values 14.5px 600 in ink; axis labels 12 to 12.5px #737067; callout 13px 700 plus a 12.5px red detail line; source and key 12px.

Layout:
- 48px side margins. Title at y 60, subtitle at y 88.
- At y 108 a 58px-tall boxed form strip across the full width, split by 1px vertical rules into fields: PO RANGE, SUPPLIER, ITEM, BUYER, CURRENCY (label on top, value below).
- Plot from x 96 to x 800, y 208 to 500. The right margin holds the reference price tag.
- A 1px #262626 rule at y 546; source at left, a two-item key at right (hollow charcoal dot "At or below contract", red dot on a stem "Paid above contract").

Axes and grid:
- Y labels at left ("£0.42") in 12.5px, dotted 0.8px gridlines (1 on, 3 off) in #D6D3C8, a solid 1.2px baseline.
- X axis shows order numbers (last four digits) at every fifth order with 6px ticks; a small "PO" caption to the left of the first label.

Marks:
- Line chart: a 1.4px #3F3F46 polyline with straight segments through every order. Orders at or below the reference get a 2.6px hollow dot (stone fill, 1.3px charcoal stroke). Orders above it get a 4.8px solid red dot with a 1.5px stone ring and a 1.2px red vertical stem down to the reference line.
- Reference: a 2px #15803D horizontal line across the plot, ending in a green arrow-shaped tag in the right margin ("CONTRACT" 10.5px 700 over "£0.42" 14px 700, white).
- Bar chart: thin 6px charcoal bars per order from the baseline; bars above the reference turn red above the green line (split the bar at the reference), with the same green reference line and tag.

Labels and annotation:
- Call out the largest exception: a 0.8px leader to the right, the order number in 13px 700 ink, and "£0.50, +19% over contract" in red. Compute the percentage from the data.

Avoid: smoothing the line, area fills other than the faint green wash, more than one alert color, legends inside the plot, and rounded corners on the form strip.

When you're done, render the chart and check that the count in the title equals the number of red points, every red stem ends exactly on the reference line, and the tag and callout do not cover any point.