Chart Prompts

Restyle my chart in the "Compliance Gap" 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 regulator's year-end position table, drawn as a chart on a deep navy-green screen. Composed and editorial: an elegant condensed serif title over tidy grouped rows of diverging bars, with each group summed in a bold total row.

Colors (use these exact values):
- Background: #0D1A1F (deep navy-green). Total rows are tinted #12242A.
- Positive values (surplus): #5CC8B5 (soft teal), right of zero.
- Negative values (shortfall): #F07B68 (coral), left of zero.
- Primary text #E8EEEC; secondary text #809297; group rules and dotted gridlines #1C3036; the zero line #E8EEEC at 60% opacity.

Typography (Google Fonts):
- Instrument Serif 400 for the title, 36px, #E8EEEC, stating the finding.
- Sora for everything else: eyebrow 10.5px 600 uppercase with 2px letter-spacing; subtitle 12.5px #809297 with measure, unit and the net total; direction headers ("SHORTFALL" right-aligned left of zero in coral, "SURPLUS" left-aligned right of zero in teal) 10px 600 with 1.6px letter-spacing; group headers 10px 600 uppercase with 1.4px letter-spacing in #809297; row names 11.5px; value labels 10.5px in the bar color with a sign; total rows 11.5px 700 with a 12px 700 total value.

Layout:
- 56px side margins. Eyebrow at y 50, title at y 94, subtitle at y 122, direction headers at y 158.
- Row labels start at x 66 (group headers at x 56). Zero sits at x 548 with 300px of scale on each side.
- 17px row pitch; each group opens with a header row and a 1px #1C3036 rule, and closes with a total row tinted #12242A across the full width; 10px extra space between groups.
- Tick labels under the last row; source line at y 580.

Axes and grid:
- Dotted (2 on, 4 off) 1px #1C3036 vertical gridlines at round values on both sides; a solid zero line from the direction headers to the last row. Tick labels signed ("+125", "-250").

Marks:
- Bar chart: 11px-tall horizontal bars with 1.5px corner radius growing left (coral) or right (teal) from zero; the value label sits 6px beyond the bar end. Group totals are 12px-tall outlined bars (1.6px stroke in the sign's color, no fill) with a bold value.
- Line chart: a dot plot style works best: each row gets an r 4.5 dot in the sign's color connected to the zero line by a 1.5px stem; for a true time series, draw a 2px teal line above zero and switch to coral where it dips below, with a filled 15% band between the line and zero in the same color.

Avoid: a single diverging color ramp, gradients, 3D, thick borders, unsigned labels, and a second axis.

When you're done, render the chart and check that the group totals equal the sum of their rows, the title agrees with the signs of the totals, value labels never overlap bars from the other side, and no row label collides with a long negative bar.