Chart Prompts

Restyle my chart in the "Step Change" 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 central bank or policy briefing chart. Precise, calm and factual: levels hold flat, changes are events, and every event is dated.

Colors (use these exact values):
- Background: #F2F5F8 (light gray-blue) for the whole canvas.
- Main series: #1D3557 (navy).
- Comparison series: #9AA5B1 (gray), dotted.
- Change markers and date flags: #E63946 (signal red).
- Title ink #1B2430, secondary text #5E6B7A, gridlines #D9E0E7, zero line and ticks #8793A1, flag fill #FFFFFF.

Typography (Google Fonts):
- Public Sans for text: title 700 30px with -0.4px letter-spacing, stating the finding; subtitle 400 15px #5E6B7A; legend 600 13px; x labels 12.5px; footer 12px; badge label 700 10px uppercase with 1.6px letter-spacing.
- Roboto Mono for every number: y labels 11.5px, level labels 500 12px navy, flag dates 500 9.5px red, badge value 700 18px white.

Layout:
- 56px side margins. Title baseline y 64, subtitle y 92, a one-line legend at y 124 (step swatch "Policy rate", dotted step swatch "Staff neutral-rate estimate", red dot "Rate decision", pale red and pale navy squares "Gap opened by a hike / cut").
- Plot from x 76 to x 788 and y 178 to y 500, leaving the right margin for the current-level badge.
- Footer at y 566: "Source: ..." left, a factual low and peak note right-aligned, both 12px.

Axes and grid:
- 1px #D9E0E7 horizontal gridlines at round steps with mono labels right-aligned 10px left of the plot and a small "%" above them; the zero line 1.2px #8793A1.
- Year ticks 5px long below the baseline, year labels centered in each year.

Marks:
- Line chart: a step line (hold then jump). Draw horizontal holds at 3px navy and the vertical risers at only 1.2px, so levels dominate. The comparison series is a step line at 2px #9AA5B1 with a 1.5 on / 3.5 off dash and round caps.
- At each change put a red dot, r 4.5, with a 1.5px background-colored ring, at the start of the new level.
- Label every level at the start of its segment in mono navy, 6px right of the riser: 8px above the line, or 17px below it when the next change goes up (so the next riser never hits the label).
- Shade the gap each move opened: a rectangle between the old and new level spanning the new level's duration, #E63946 at 10% opacity for increases and #1D3557 at 8% for decreases.
- Bar chart: draw each period's level as a flat-topped navy column with no gaps between columns of the same level, with changed periods marked by a red dot on the column top and the same gap shading between the old and new heights. The comparison series becomes a dotted gray step outline over the columns.

Labels and annotation:
- Date flags for every change: a 54 x 14 px white pennant with a 1px red outline and a 6px notch on its right edge, holding the date ("Sep '16") in red mono, set on two tiers (y 146 and y 166) so neighbors never collide, joined to the marker by a 0.8px red 2-2 dashed guide at 55% opacity.
- Current-level badge on the right: a navy arrow tag (90 x 48 px, pointed left edge) aligned to the latest level, a 1.2px navy leader from the plot edge, "CURRENT" in #AFC3DA, the value in white, and "since <date>" in 11.5px secondary text beneath.

Avoid: diagonal or smoothed lines between levels, markers on points that did not change, heavy gridlines, gradients and shadows.

When you're done, render the chart and check that holds are horizontal and risers vertical, every change has one marker and one flag, no flag overlaps another, level labels never touch risers, and the count of changes in the title matches the data.