Chart Prompts

Restyle my chart in the "Reservoir Rule" 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 water utility operations chart. Calm, clear and technical: the data sits over soft colored operating zones so a reader sees at a glance which regime the system is in.

Colors (use these exact values):
- Page: #EAF3F8 (pale water blue).
- Primary series: #1D5C8C (deep blue), 3px line with an area fill below it, a vertical gradient from #1D5C8C at 20% opacity to 3%.
- Comparison series (last period): #8A98A5, 1.6px line, no fill.
- Upper zone (flood control): fill #F4D9DA, label and boundary #A34A52.
- Middle zone (conservation / normal): fill #D9EDD6, label #3F7A48.
- Lower zone (drought reserve): fill #F2E6C8, label and boundary #8A6A26.
- Titles #12324A, secondary text #557087, gridlines #FFFFFF at 75% opacity.

Typography (Google Fonts):
- Figtree for everything. Eyebrow 12px 700 uppercase, 2.2px letter-spacing, #1D5C8C. Title 27px 700 #12324A stating the finding. Subtitle 15px 400 #557087 with measure, unit and period. Axis labels 13px (month labels 500). Zone labels 13px 700 in the zone ink color with a 12px 400 #557087 second line. Series labels 15px 700 (primary) and 14px 600 (comparison). Callouts 11.5px 700 plus 11px 400. Footer 12px.

Layout:
- 56px outer margins. Eyebrow at y 54, title at 90, subtitle at 116. Plot from x 76 to 810 and y 140 to 506, leaving a 94px column on the right for zone labels.
- Zone labels sit just right of the plot, each with a 3 x 36 px bar in the zone ink color at its left, vertically centered on its zone at the right edge.
- Footer at y 566: "Source: ..." left, a short note on the zone definitions right, both 12px #557087.

Axes and grid:
- Zones fill the whole plot. Zone boundaries can vary over time (a seasonal rule curve): draw them as 1px dashed (5 3) lines in the zone ink at 55% opacity.
- White gridlines at every 20 units and at each month start, over the zones. Y labels right-aligned 10px left of the plot, the top one with its unit ("100%"). Month labels centered in each month, 22px below a 1.2px #12324A baseline.

Marks:
- Line chart: the primary series as a 3px #1D5C8C line with round joins over its soft gradient area; the comparison series as a thin #8A98A5 line. Label each series directly in its own color near the line (no legend). Mark the key event (a threshold crossing) with a 5.5px circle, page-colored fill and 2.5px #1D5C8C ring, and a 1px #12324A leader up to a white callout box (rx 3, 25% ink border) with a bold date line and a short explanation. Mark the low point with a 4px solid dot and a label with a halo in the zone color, set in the clear space between the primary and comparison lines so neither line crosses the text.
- Bar chart: keep the zone bands behind the plot and draw bars in #1D5C8C at 85% opacity, 60% of the band width with square corners, comparison-period bars as thin #8A98A5 outlines (1.5px) behind them. Value labels only on the bars you annotate.

Avoid: saturated zone fills, a legend box, heavy axis lines, drop shadows, and letting the area fill hide the zone colors.

When you're done, render the chart and check that all three zones remain readable through the area fill, the zone labels line up with their bands at the right edge, the callout date matches the data, and no label crosses a line without a halo.