Chart Prompts

Restyle my chart in the "Proficiency Levels" 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 table figure from a state education agency's assessment report. Orderly, neutral and official: light gray paper, a four-level color key, a firm center line at the proficiency cut and a bold summary column.

Colors (use these exact values):
- Page: #F6F7F9, with a 6px #1E3A8A band across the very top. Alternate rows get a white stripe (#FFFFFF at 70% opacity).
- Four ordered levels, low to high: #C2410C (below basic, deep orange), #FDBA74 (basic, light orange), #93C5FD (proficient, light blue), #1E3A8A (advanced, navy). Segment labels: #FFFFFF on the deep orange and navy, #7C2D12 on light orange, #1E3A8A on light blue.
- Ink and center line: #0F172A. Secondary text: #64748B. Gridlines and footer rule: #D8DDE4. Meter tracks: #E2E8F0; meter fill #1E3A8A above 50%, #94A3B8 below.

Typography (Google Fonts):
- Mukta throughout. Eyebrow 11.5px 600 uppercase, 1.3px letter-spacing, #64748B, items separated by spaced middle dots. Title 29px 700 #0F172A stating the finding. Subtitle 15px 400 #64748B with measure, unit and sort order.
- Key labels 14px 500. Group captions 11px 700 uppercase, 1.4px letter-spacing (NOT PROFICIENT in #C2410C, PROFICIENT OR ABOVE in #1E3A8A). Row labels 15px 500 right-aligned. Segment values 13.5px 600. Summary column values 19px 800. Axis labels 12.5px. Source 12px.

Layout:
- 40px margins. Eyebrow at y 40, title at y 78, subtitle at y 104.
- Header key at y 142: four 30 x 14 swatches (2px radius) with labels, in level order, with a 28px gap between the two groups; a thin 1.2px bracket above each group in its group color (deep orange over the two lower levels, navy over the two upper levels).
- Row labels end at x 222; the plot runs from x 238 to 796; the summary column sits at right with a 36 x 6 rounded meter and the percent right-aligned at x 904 under a "PROFICIENT+" caption.
- Rows 40px tall with 24px bars, sorted by the summary value. A 1px #64748B dashed separator runs under the last row above 50%, labeled "BELOW 50%" in 10.5px 700 at the left margin.

Axes and grid:
- A 2px #0F172A vertical center line at the proficiency cut, extending slightly above and below the rows.
- Dotted (2 on, 3 off) #D8DDE4 vertical gridlines every 20 points; axis labels below show absolute percentages on both sides (60%, 40%, 20%, 0%, 20%...).

Marks:
- Bar chart: diverging 100% stacked horizontal bars. The two lower levels extend left of the center line (the level nearest proficiency adjacent to it), the two upper levels extend right. Square ends, 1px #F6F7F9 separators between segments, values centered in each segment when it is at least 7 points wide.
- Line chart: one line per level across time with the same four colors (2.5px, square points r 4), the proficient-or-above total as a thicker 3.5px #1E3A8A line, a #0F172A horizontal reference at 50%, and the same grouped header key; label each line at its right end.

Avoid: rounded bars, gradients, shadows, rainbow palettes, percentage signs inside segments, legends at the bottom, and centering the bars on 0 of a plain stacked axis instead of the proficiency cut.

When you're done, render the chart and check that every row's segments sum to 100, the summary column equals the two upper levels added together, the separator sits exactly between the rows above and below 50%, and the count in the title matches.