Chart Prompts

Restyle my chart in the "Variant Compare" 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: an experiment spec sheet. Crisp, tabular and fair: control and variant sit in two side-by-side columns on the same scale so the eye compares lengths across, and a chip at the end of each row gives the verdict.

Colors (use these exact values):
- Page: #F8F7F4 (warm off-white). Ink #1C1917, secondary text #6B655F, rules and gridlines #E4E1DA, zero lines #8A847D.
- Control (A): #A8A29E (muted warm gray). Variant (B): #C026D3 (saturated magenta).
- Error whiskers: #292524, 1.5px.
- Delta chips: better = text #15803D on #DCFCE7; worse = text #B91C1C on #FEE2E2; not significant = text #6B655F on #E7E5E4.

Typography (Google Fonts):
- Figtree: title 800 30px with -0.4px letter-spacing stating the headline delta; subtitle 400 15px #6B655F; metric names 600 15px ink; column headers 700 15px (the variant's in magenta); badge letters 800 15px white.
- Spline Sans Mono: column captions ("METRIC", "B − A") 11px uppercase with 1.4px letter-spacing; sample sizes 11px; metric direction hints ("higher is better") 10px; value labels 600 12px (gray bars' in #6B655F, variant's in magenta); chips 600 12px; tick labels 10.5px; footer 11px.

Layout:
- 40px margins. Title and subtitle at top, then a 1.5px ink rule full width. A header row: "METRIC" over a left column of about 220px; an "A" badge (28px circle filled #A8A29E) with "Control" and its n over the first bar column; a "B" badge (28px circle filled #C026D3) with the variant name and its n over the second bar column; "B − A" right-aligned over the chip column. A 1px #E4E1DA rule under the header.
- Two equal bar columns (about 246px each, 42px apart) on one shared 0 to 60% scale, then an 84px chip column at the far right.
- One row per metric, 54px tall, separated by 1px dashed (2 3) #E4E1DA rules. Metric name and direction hint stacked in the left column.

Axes and grid:
- In each bar column, vertical gridlines at 0, 20, 40, 60% (1px #E4E1DA; the zero line 1.2px #8A847D) and mono tick labels under the last row. No horizontal axis lines.

Marks:
- Bar chart: horizontal bars 20px tall with 2px corners, control gray in the left column and variant magenta in the right, each with a 95% whisker (horizontal 1.5px line plus 12px end caps in #292524) centered on the bar end, and the value label 7px past the right cap.
- Line chart: the same two-column frame, each column a small line panel for its arm (control 2px #A8A29E, variant 2.5px #C026D3, 3px dots), with a 12% opacity interval ribbon in the series color and the whisker style used for the final point. Keep the chip column for the final delta.
- Delta chips: 84 x 26 pills, fully rounded, text centered like "+7.7 pts" with a true minus sign for negatives. Color by whether the change is good for that metric (direction hint), not by its sign; append "*" and use the gray chip when not significant.

Avoid: placing A and B bars in the same row cluster, a legend (the badges are the legend), heavy borders, shadows, gradients, and coloring chips by sign alone.

When you're done, render the chart and check that both columns share the same scale, whisker caps are symmetrical around each bar end, labels do not run into the chip column, and every chip's color matches the metric's direction.