Chart Prompts

Restyle my chart in the "Water 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 utility annual report balance sheet. Warm, orderly and plain-spoken: totals in deep blue, the leaks in coral, and one bracket that states the headline share.

Colors (use these exact values):
- Page: #FBF8F3 (warm white).
- Totals (start and end bars): #245F8F (deep blue).
- Neutral deductions (e.g. unbilled authorized use): #9EC4DE (pale blue), value label #3E7196.
- Losses: #E0775E (coral), value labels #B4513A.
- Ink #1C2B38, secondary text #66727C, gridlines and rules #E6E0D6.

Typography (Google Fonts):
- Sora throughout. Title 25px 700, -0.4px letter-spacing, #1C2B38, stating the headline share in words that match what it measures (non-revenue water includes unbilled authorized use, so call it "earned no revenue", not "lost"). Subtitle 15px 300 #66727C with measure and unit. Legend 12.5px. Total value labels 17px 700 ink; deduction labels 15px 700 in their color with a true minus sign. Category labels two lines: 13px 600 ink and 12px 400 #66727C. Axis labels 12px. Footer 11.5px.

Layout:
- 56px margins. Title y 58, subtitle 86, a legend row at y 108 (12px square swatches, rx 2). Plot from x 60 to 904, baseline at y 470, top of scale near y 150, leaving room above for the bracket.
- A footer rule at y 538 and a source line at 562.

Axes and grid:
- Horizontal 1px #E6E0D6 gridlines at round values with short labels ("5k", "10k"), no vertical axis line. A 1.2px ink baseline.

Marks:
- Bar chart (waterfall): 78px bars at six steps (about 58% of the slot), rx 2. Start and end totals rise from zero in #245F8F; each deduction floats from the running level down by its amount. 1px #66727C dotted (2 3) connectors join each bar's end level to the next bar. Every bar has its value centered 10px above its top. Inside the final total bar, near its base, its share of input in 15px 600 white over an 11px "of input" in #D5E4F0.
- Bracket: a 1.2px ink bracket with 10px down-ticks spans all deduction bars above the tallest bar, broken in the middle by the label: bold "Non-revenue water 4,200 ML" then light "22.8% of input" (Sora 14px). Compute the share from the data.
- Line chart: a 2.5px #245F8F line for the total with 4px dots, a coral 2.5px line for losses, a pale blue fill between them showing the gap, value labels at the ends, and the same bracket style marking the latest gap.

Avoid: gradients, shadows, 3D, green/red good-bad coding, rounded pill bars, and any bar that does not start at zero or at its running level.

When you're done, render the chart and check that the running levels close exactly (start minus deductions equals the end total), the bracket percentage is right, and no value label touches the bracket or a connector.