Chart Prompts

Restyle my chart in the "Shard Balance" 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: an infrastructure console showing a cluster as a grid of small multiples. Deep navy, rounded slate tiles, a cool blue ramp for normal members and one electric magenta outlier that you see instantly.

Colors (use these exact values):
- Page: #0F172A. Tiles: #1E293B with a 1px #334155 hairline border and 12px radius (the tile containing the outlier gets a #7E3A8C border).
- Normal marks, a sequential ramp by member: #1D4ED8, #3B82F6, #60A5FA, #93C5FD.
- Outlier: #E879F9 magenta (fill, outline, label, tile status dot). Healthy status dot: #34D399.
- Text: #F1F5F9 primary, #94A3B8 secondary. In-tile gridlines #334155, tile baseline #475569.

Typography (Google Fonts):
- Outfit 600 for the title (26px, -0.3px letter-spacing, the finding) and the tile names (16px).
- Azeret Mono for everything else: subtitle 12.5px, legend 11.5px, key ranges and stats in tile headers 11px, axis labels 10.5px, value labels 11px, the outlier value 14px 700, member labels 11.5px (the outlier's in 700 magenta), footer 11px.

Layout:
- Title at y 54 and subtitle at y 82, at x 32. A legend row at y 100: 12px swatches (2px radius) for each ramp step and a magenta swatch with a white 1.2px stroke labeled "over 85%".
- A 2 x 2 grid of 440 x 204 px tiles from y 130, 16px column gap and 12px row gap. Each tile header: a 4px status dot, the tile name, a monospace detail (key range) and a right-aligned stat ("spread 5 pts"; magenta 600 in the outlier tile).
- Footer at y 584: "Source: illustrative data" left, a cluster note right.

Axes and grid:
- Each tile has its own 0 to 100% scale with gridlines at 0, 50 and 100 (1px #334155; 0 in #475569), labels right-aligned 10px left of the plot. The warning threshold is a 1px dashed (3 4) magenta line at 60% opacity across every tile.
- Member labels (A, B, C, D) centered 18px under the baseline.

Marks:
- Bar chart: four 40px bars per tile with 4px top radius, colored by member position along the blue ramp, value labels 7px above. The outlier bar is solid magenta with a 1.5px magenta outline offset 4px around it (7px top radius), a soft magenta glow behind it (Gaussian blur 6 at 45% opacity), and its value in 14px 700 magenta to the right of its top on a tile-colored backing.
- Line chart: one small multiple per tile with a 2px line per member in the same blue ramp and 3px round point markers; the outlier member's line in 2.5px magenta with the same glow and its end value labeled in 14px 700 magenta.

Avoid: a shared axis across tiles that hides the outlier, more than one highlight color, gradients on bars, heavy borders and drop shadows.

When you're done, render the chart and check that only values past the threshold are magenta, every tile uses the same scale, the stats in the tile headers are right, and the glow is not clipped.