Chart Prompts

Restyle my chart in the "Class Size" 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 staffing review slide from a school district's operations team. Dark, clean and measured: soft mint range boxes glowing faintly against slate green, crisp white medians and one red rule everybody is measured against.

Colors (use these exact values):
- Background: #1E2B26 (dark slate green).
- Primary mark color: #6EE7B7 (mint), always translucent: full range fill at 18% with a 1px stroke at 55%, middle-half band at 60%.
- Medians and the title: #FFFFFF.
- Limit or cap: #F87171 (red) for the cap line, its axis label and any value past the cap. The zone beyond the cap gets a 45-degree hatch (6px spacing, 1.5px #F87171 strokes at 35% over a 10% #F87171 wash, whole layer at 50% opacity).
- Secondary text: #93A89F. Legend and in-range value labels: #C9D6D0. Gridlines: #2C3C36. Group brackets: #4A5E56.

Typography (Google Fonts):
- Kanit throughout. Eyebrow 12px 500 uppercase with 2px letter-spacing in mint. Title 29px 600 white, stating the finding. Subtitle 15px 300 #93A89F naming the measure, unit and what the marks show.
- Legend 13px 400. Axis labels 13px (the cap value 600 red). Category labels 15px 500 white. Value labels 13px (400 in range, 600 red past the cap). Group captions 11.5px 500 uppercase with 1.8px letter-spacing. Source 12px 300.

Layout:
- 48px margins. Eyebrow at y 52, title at y 92, subtitle at y 120, a one-line legend at y 153 explaining every mark (range box, middle-half band, median tick, dashed cap line).
- Plot from x 96 to 900 and y 176 to 488. Below the category labels, thin 1px brackets group the categories (Elementary, Middle, High) with centered captions.

Axes and grid:
- Horizontal 1px #2C3C36 gridlines at round values, labels right-aligned 12px left of the plot. No axis lines, no vertical gridlines, no ticks.
- The cap drawn as a 2px #F87171 dashed line (6 on, 4 off) across the full plot, underneath the translucent boxes so it shows through them, with its value in red on the axis.

Marks:
- Bar chart: box-like range bars, 34px wide with 3px corner radius, spanning minimum to maximum; a 26px-wide inner band (2px radius) for the middle half; a 3px white median tick with round caps that overhangs the box by 3px each side. The maximum printed 9px above each box, red and 600 when it passes the cap, with a 4px #1E2B26 halo so it cuts cleanly through the cap line.
- Line chart: a 2.5px #6EE7B7 median line with r 4 white-ringed dots, a mint band at 18% opacity for the full range and 45% for the middle half behind it, the same dashed red cap and hatched over-cap zone, and red labels on points past the cap.

Avoid: solid opaque mint fills, glows, gradients, drop shadows, more than one warning color, heavy axis lines, and hiding the median under the cap line.

When you're done, render the chart and check that the title's claim holds for every category (maximum strictly above the cap), the red labels are exactly the values past the cap, medians on the cap stay visible, and no value label sits on the dashed line without its halo.