Chart Prompts

Restyle my chart in the "Dock 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 live operations board for a city service. Dark teal, calm and legible, with two warm signal colors diverging from a bright spine, and small outlined tags that tell a crew exactly where to act.

Colors (use these exact values):
- Page: #0E2B2E (dark teal).
- Positive side: #FFC93C (sunny yellow). Negative side: #F28482 (soft coral).
- Center line: #E8FBF8, 2px. Text and tag outlines: #F2FBFA. Secondary text and threshold lines: #8FB3B0. Gridlines: #1F4447.

Typography (Google Fonts):
- Outfit throughout. Eyebrow 12px 600 caps with 2px letter-spacing in #8FB3B0; title 29px 600 #F2FBFA stating the finding; subtitle 15px 400 #8FB3B0 naming measure, unit, time window and how many items cross the threshold; row names 13px 400; values 13px 600 in the bar's color; tags 11px 500 with 0.6px letter-spacing; axis ticks 12px.

Layout:
- 48px margins. Sorted rows from most positive to most negative, about 18.5px apart, 12px tall bars, the center line at x 500 with 270px of scale each side.
- Row names sit on the opposite side of the center from their bar: right-aligned 12px left of center for positive rows, left-aligned 12px right of center for negative rows.
- Under the axis, two direction captions pointing away from the center with 1.6px arrows in each side's color ("More arrivals than departures (9 stations)"). Source bottom left, unit bottom right.

Axes and grid:
- 1px #1F4447 vertical gridlines every 10 units with signed tick labels below ("+10", "-20"). Threshold lines at plus and minus the action threshold, 1px dashed (3 on, 4 off) in #8FB3B0, labeled at the top.

Marks:
- Bar chart: diverging horizontal bars from the center line, with a 3px radius on the outer end only. Values 8px past the bar end in the bar's color, with a 4px #0E2B2E stroke behind the text (paint-order stroke) so gridlines never cut through them. Rows beyond the threshold get a 70 x 16 px pill tag (8px radius, no fill, 1.2px #F2FBFA outline) reading "rebalance", placed 32px beyond the value.
- Line chart: net flow over time as one line per series around a bright zero line, the area above zero filled #FFC93C at 25% and below zero #F28482 at 25%, 2px lines, and outlined "rebalance" pill tags at the points that cross the threshold lines.

Avoid: red and green, saturated neon, glows, legends in a box (the direction captions are the legend), and gridlines at every unit.

When you're done, render the chart and check that the subtitle and caption counts match the data, every tagged row really crosses the threshold, no value label is cut by a threshold line, and the longest tag stays inside the canvas.