Chart Prompts

Restyle my chart in the "Latency Percentiles" 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 latency panel in a clean cloud infrastructure console. White, precise and calm, with a single run of blues from light to deep navy, one red rule for the objective and a small dark tag where something changed.

Colors (use these exact values):
- Page behind the panel: #EEF1F5. Panel: #FFFFFF with a 1px #D9DEE5 border, 8px corner radius and a faint shadow (the same rect offset 2px down in #0B2A5B at 5% opacity).
- Header bar: #F6F7F9 with a 1px #D9DEE5 bottom rule.
- Series, in order from the lowest to the highest measure: #8EC5F4 (light blue, p50 or the lightest series), #2F7FE0 (blue, p95), #0B2A5B (deep navy, p99 or the key series). If there are more series, step between these blues; never add a new hue for a series.
- Objective or threshold line and breach text: #D93A3A. Breach shading: #D93A3A at 10% opacity.
- Ink #16202E, secondary text #5E6978, axis labels #8A94A3, gridlines #EBEEF2, baseline and ticks #C9D0D9. Healthy status dot #2FB36E.

Typography (Google Fonts):
- Hanken Grotesk everywhere with tabular figures (font-variant-numeric: tabular-nums).
- Title 22px 700, -0.2px letter-spacing, #16202E, stating the finding with the numbers. Subtitle 14px 400 #5E6978 with measure, unit and bucket size.
- Header: service name 14px 700, breadcrumb 13px 500 #8A94A3, date range 12.5px 500 #5E6978.
- Legend labels 13px 700 with current values 13px 500 #5E6978; axis labels 12px #8A94A3; footer 12px.

Layout:
- Panel inset 24px from every canvas edge. A 44px header bar across its top: a 4px green status dot and the service name on the left, then a breadcrumb ("/ Metrics / Latency"); on the right a segmented time range selector (1h, 6h, 24h, 7d, 30d), 42px segments, 26px tall, 5px radius, white with a 1px #D9DEE5 border and 1px dividers, the active segment filled #0B2A5B with white 700 text; the date range sits to its left.
- Title at 86px below the panel top edge, subtitle 26px under it, then a legend row: a 20px line swatch in each series color and width, bold series name and its latest value, then a dashed red swatch labeled with the objective, and a right-aligned "Peak" readout.
- Plot fills the rest of the panel with a 70px left gutter for y labels; a hairline footer rule near the bottom with "Source: ..." on the left and a red breach summary on the right.

Axes and grid:
- Horizontal gridlines only, 1px #EBEEF2, with unit-suffixed y labels ("400 ms") right-aligned 12px left of the plot. Baseline 1px #C9D0D9.
- X axis: 5px ticks every 3 hours with 24-hour clock labels; the first label left-aligned and the last right-aligned so nothing clips.

Marks:
- Line chart: straight segments with round joins, no smoothing. Widths grow with the importance of the percentile: 2px light blue, 2.25px blue, 3.25px navy, drawn light to dark so the navy line sits on top. A 3.5px dot in each series color with a 1.5px white ring at the right end of each line. Mark the peak of the key series with a hollow white circle (r 4.5, 2.5px navy stroke).
- Bar chart: grouped bars per time bucket in the same three blues (light to deep, left to right), square corners with 2px top radius, 2px gaps inside a group; the objective drawn as the same red dashed rule across the plot.
- Objective line: 1.5px #D93A3A dashed 6 on 4. Where the key series exceeds it, shade the area between the line and the objective in #D93A3A at 10%.

Labels and annotation:
- Change marker (deploy, release, config push): a 1.25px #5E6978 vertical line dashed 3 on 3 from the plot top to the baseline, with a dark tag at the top: a #16202E rounded rect (4px radius, 22px tall) with a small pointer toward the line, white 12px 600 text such as "deploy v4.18.0", and the time in 12px 600 #5E6978 on the other side of the line.

Avoid: gradients on lines, area fills under the percentiles, rainbow or multi-hue series, heavy borders, dark mode, a second y axis and smoothing that hides spikes.

When you're done, render the chart and check that the percentile lines never cross in an impossible order, the breach duration in the title matches the shaded buckets, the header selector and date range do not collide, and the first and last x labels are not clipped.