Chart Prompts

Restyle my chart in the "Sample Ratio" 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 data-quality alert from an experimentation platform. Cool, clinical and slightly urgent: an amber banner says something is wrong, the chart shows exactly when, and a side panel gives the key numbers.

Colors (use these exact values):
- Page: #F4F6F9 (pale blue-gray). Summary card #FFFFFF with a 1px #D3D9E2 border.
- Warning banner: #FEF3C7 fill, a 2px #F59E0B bottom edge, a #F59E0B warning triangle and #78350F text.
- Deviation toward the first group: #0D9488 (teal). Deviation toward the second group: #C2410C (rust).
- Tolerance corridor: #E2E6EC with 1px dashed (3 3) #9AA4B2 edges.
- Ink #172033 (title, center line), secondary text #5B6577, gridlines #D3D9E2.

Typography (Google Fonts):
- Hanken Grotesk: title 700 28px with -0.3px letter-spacing stating what happened; subtitle 400 15px #5B6577; banner message 500 14px; direction headers 600 12.5px in teal and rust; summary numerals 700 32px; summary notes 400 12.5px.
- Noto Sans Mono: banner tag "SRM CHECK" 700 13px with 1.6px letter-spacing; row labels ("Day 01") 10.5px, bold ink when out of tolerance; value labels 700 10.5px; axis ticks 10.5px; summary captions 10.5px uppercase with 1.2px letter-spacing; source 10.5px.

Layout:
- A full-width 46px banner flush to the top edge with the triangle icon at 40px, the tag, then one sentence counting the failing periods.
- Title and subtitle below at a 40px margin. The chart takes the left 60% of the width; a 232px summary card at the right with three stacked stats (periods outside tolerance, largest deviation colored by its direction, expected split).
- Direction headers sit just above the plot on either side of center: "← more control users" and "more treatment users →", each arrow drawn as a stroked path in the header color because Hanken Grotesk has no arrow glyphs.

Axes and grid:
- A 1.5px ink vertical center line at the expected share (50%). Vertical gridlines at ±1 and ±1.5 points in #D3D9E2. Ticks along the bottom written as shares ("49.0%", "50%" bold, "50.6%"), with a small caption under them.
- The tolerance corridor is a light gray band down the middle behind the bars.

Marks:
- Bar chart: one short horizontal bar per period (11px tall, 1.5px corners) growing left in teal or right in rust from the center line. Bars inside the corridor at 45% opacity; bars outside it at full strength with a bold signed value label (true minus sign, two decimals) just beyond the bar end.
- Line chart: plot the deviation as a 2px ink line with 4px dots crossing the center line, filling the area between the line and center in teal on one side and rust on the other at 45% opacity; points outside the corridor get full-opacity dots and value labels.

Avoid: red-green, a legend box, gridlines inside the corridor, symmetric color for both directions, and exaggerated axis ranges that hide the corridor.

When you're done, render the chart and check that the banner count equals the number of full-strength bars, the largest-deviation stat matches the longest bar, and nothing crosses into the summary card.