Chart Prompts

Restyle my chart in the "Trade Balance" 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 crisp, modern economics explainer on a deep plum-black page. Two clear, friendly colors pulling in opposite directions from a central spine, and a single white mark that settles the argument.

Colors (use these exact values):
- Background: #1A1120 (deep plum-black). Spine gutter: #261A2E, a rounded rectangle (6px radius) behind the names.
- Outflow side (imports, left): #F4A66A (warm apricot). Inflow side (exports, right): #3FD0C9 (clear aqua).
- Net marker and title: #FFFFFF. Muted text: #A898B0. Rules and scale guides: #3A2C44.
- Net values: #3FD0C9 for a surplus, #F4A66A for a deficit.

Typography (Google Fonts):
- Outfit throughout. Headline Outfit 600 (SemiBold) 30px, -0.3px letter-spacing, white, stating the finding with counts computed from the data.
- One explanatory line under the title in Outfit 400 14px muted: year, unit, which side is which and what the diamond means.
- Column headers 12px 600 uppercase with 2px letter-spacing in their side's color ("IMPORTS" and "EXPORTS", each with a small solid triangle pointing outward), "PARTNER" and "NET" in muted 11 to 12px.
- Partner names 14px 500 white, centered in the gutter. Bar values 12.5px 400 in their bar's color. Net column 14px 600. Totals 14px 600, the grand net 16px 600.

Layout:
- 56px side margins. Title near y 62, explanatory line at 92, column headers at 146, rows from about y 176 with a 34px pitch.
- The spine gutter is 136px wide, centered around x 460. Bars grow outward from its edges on a shared scale (about 0.32 px per unit so the largest bar is about 270px).
- A right-aligned NET column at the right margin. Under the rows, a 1px rule and a totals row: total imports under the left side, "All ten" in the gutter, total exports on the right and the grand net in the NET column.
- Bottom row: a small white diamond key on the left ("Net balance (exports minus imports)"), source on the right.

Axes and grid:
- No axis lines and no tick labels; every bar carries its own value at its outer end (7px gap). Two faint dashed (2 on, 4 off) 1px #3A2C44 scale guides on each side at round values.

Marks:
- Bar chart (butterfly): 20px tall horizontal bars with a 2px corner radius, apricot extending left and aqua extending right. Sort rows by total volume. The net balance is a 13px white diamond (1.5px #1A1120 outline) placed on the winning side at distance |net| from the spine on the same scale.
- Line chart: two lines over time on a shared zero baseline mirrored the same way: exports as a 2.5px aqua line above zero, imports as a 2.5px apricot line drawn as negative values below zero, the net balance as a row of white diamonds at each period, and the latest values labeled at the right edge in their colors with the net in the NET column.

Avoid: a legend box, gridlines across the gutter, a third data color, gradients or glow, rotated labels, and names placed outside the spine gutter.

When you're done, render the chart and check that both sides use the same scale, each diamond sits at exactly the net distance on the correct side, the net column colors match surplus or deficit, and the totals and the title's count add up.