Chart Prompts

Restyle my chart in the "MRR Stack" 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: the revenue page of a subscription dashboard in dark mode. Near-black, dense but orderly, four crisp KPI tiles and a diverging stack where gains and losses meet at one bright zero line.

Colors (use these exact values):
- Page: #0B0C0F. KPI tiles: #131519 with a 1px #23262D border and 10px radius. Gridlines: #1A1D23.
- Ink: #F4F4F5. Secondary text: #A1A1AA. Axis labels and source: #71717A. Zero line: #E4E4E7.
- Gains: #22C55E (new) and #1E9FB8 (expansion). Losses: #F59E0B (contraction) and #EF4444 (churn).
- Net line and highlight outline: #FFFFFF.

Typography (Google Fonts):
- Onest throughout, tabular figures for every number.
- Title 21px 600, -0.3px letter-spacing, stating the finding. Subtitle 13.5px 400 #A1A1AA with measure, unit and period.
- Tile labels 12.5px 500 #A1A1AA; tile values 24px 600, -0.5px letter-spacing; tile deltas 11.5px 500 in #22C55E when good and #EF4444 when bad.
- Legend 12.5px 500 #A1A1AA; axis labels 11px #71717A; month labels 12px (latest 600 #F4F4F5); direct labels 11.5px 500 in the series color; the latest-period caption 10.5px 600 uppercase with 1px letter-spacing.

Layout:
- 32px side margins. Title and subtitle at top left.
- Four equal KPI tiles in a row (84px tall, 12px gutters): headline value, net new, churn rate and net revenue retention. Each has label, value and delta stacked on the left and a 60 x 34 sparkline of that metric's history on the right: a 1.5px line in the delta's color with a 2.5px dot on the latest point.
- Legend row under the tiles: 11px rounded squares (2.5px radius) per series plus a white line-and-dot swatch for "Net new MRR".
- Plot below, leaving a right gutter of about 110px for direct labels on the latest bar. Source line and the net formula at bottom left, 11px.

Axes and grid:
- Y axis symmetric in spirit: gains above, losses below, with horizontal 1px #1A1D23 gridlines every $20K and labels right-aligned ("$120K", "$0", "−$20K" with a true minus sign).
- The zero line is the brightest structure on the chart: 1.5px #E4E4E7, extending 4px past the plot on the left.
- Month labels centered under each bar; year labels in 10.5px under the first month of each year.

Marks:
- Bar chart: one 34px diverging stacked bar per period, 2px corner radius on every segment and 1px dark gaps between segments. Gains stack upward from zero (new first, then expansion); losses stack downward (contraction first, then churn). The latest bar gets a 1px #FFFFFF outline at 75% opacity, 5px outside the bar on every side with a 6px radius. Beside it, a short 8px leader in each series color and a direct label ("Expansion +$43K"), with an uppercase caption above ("SEP · NET +$80K").
- Net line on top of the bars: a 2px #FFFFFF polyline through each period's net value (gains minus losses), with a 5px page-colored under-stroke at 70% opacity to separate it from the bars, and 3.2px white dots with a 1.5px page-colored ring.
- Line chart: draw each component as a 2px line in its series color (losses plotted below zero), keep the bright zero line and the white net line with dots on top, and fill between the net line and zero with white at 6% opacity.

Avoid: gradients, glow, rounded pill bars, 3D, light backgrounds, stacking losses above zero, and KPI deltas whose sign or color disagrees with the data.

When you're done, render the chart and check that each net dot equals new + expansion − contraction − churn for that period, the KPI values recompute from the data, the latest bar's outline encloses both halves of the bar, and green and teal stay distinguishable at thumbnail size.