Chart Prompts

Restyle my chart in the "Flood Hydrograph" 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 storm hydrograph from a flood forecasting report. Clean white, engineering-precise, with rainfall hanging from the top and the river's response rising beneath it, so cause and effect read in one glance.

Colors (use these exact values):
- Page: #FFFFFF. Primary ink #1B2733, secondary text #5F6B78, gridlines #E3E8EE.
- Main line (discharge or the primary measure): #174A7C (deep blue), with an area fill of the same color at 7% opacity.
- Rainfall or the secondary hanging measure: #8DB9E2 (soft blue); the single largest bar #5B93C9.
- Threshold rules: minor #E6B000 (label text #9A7500 for contrast), moderate #E57A1F, major #C62F2F.

Typography (Google Fonts):
- Asap throughout. Title 700, 25px, -0.3px letter-spacing, #1B2733, stating the finding. Subtitle 400, 14px, #5F6B78 with measures, units and period.
- Panel labels 600, 11px uppercase, 1.2px letter-spacing, #5F6B78, placed above each panel's top-left ("RAINFALL, MM/H", "DISCHARGE, M³/S").
- Tick labels 12px #5F6B78. Day names on the time axis 700, 13px ink; intermediate times 12px muted. Threshold names 700, 11px uppercase with 1px letter-spacing in their color, value 11px muted beneath.

Layout:
- 56px left margin. Title baseline about 58px, subtitle 84px.
- Two stacked panels sharing one x axis, each with its own left axis (never a right-hand second axis): a short top panel (about 82px tall, from y 124) for the hanging measure, and the main panel (about 272px tall, from y 244 to 516) below.
- Plot runs from x 92 to 830; the right 110px holds threshold labels.
- Source line 12px muted at the bottom left.

Axes and grid:
- Top panel: a 1.2px ink axis line along its top edge, values increasing downward (0 at the top), with faint gridlines at the middle and bottom values.
- Main panel: 1px #E3E8EE gridlines at round values, a 1.2px ink baseline, 6px tick marks down from the baseline, day names at midnight ticks.

Marks:
- Line chart: the main series is a 3.6px #174A7C smooth (monotone) line with a 7px white under-stroke so it cuts cleanly through threshold rules, over a 7% area fill. Hanging bars in the top panel are slim (62% of the hourly slot) and square-cornered, hanging from the top axis.
- Bar chart: slim square-cornered #174A7C bars (about 60% of the band) rising from zero in the main panel, with the hanging measure still drawn as inverted #8DB9E2 bars from the top panel's axis.
- Thresholds: 1.6px solid horizontal rules in their color across the whole plot, each with a 4 x 18px color tab and a two-line label at the right edge.

Labels and annotation:
- The peak: a 6px radius white dot with a 3px #174A7C ring, a short 1px ink leader to the right, then "Crest 372 m³/s" in 700 16px #174A7C with the time and duration above the top threshold in 12.5px ink beneath.
- The lag: 1px dashed (3 3) muted verticals from the rainfall peak and the crest, joined across the top of the main panel by a 1.2px ink bracket with end ticks, labeled "Lag 10 h" in 700 12px on a white knockout.
- The largest rainfall bar labeled with its value and time in 600 12px #3F6F9E; the event total right-aligned in the top panel in 12px muted.

Avoid: a right-hand second y axis, gradients, shadows, rounded bars, legends (label everything directly), colored backgrounds between thresholds.

When you're done, render the chart and check that the hanging bars share the x positions of the main series, the lag and crest numbers are computed from the data, threshold labels do not collide at the right edge, and the yellow label text is readable on white.