Chart Prompts

Restyle my chart in the "Skill 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: a learning app's skills report. Clean white, one bright hue per skill, and a row of icon badges that work as both a summary and the legend.

Colors (use these exact values):
- Background #FFFFFF.
- Series in this fixed order: #14B8A6 (teal), #F97316 (orange), #6366F1 (indigo), #EC4899 (pink).
- Badge tints in the same order: #F0FDFA, #FFF7ED, #EEF2FF, #FDF2F8. Darker partners for text: #0F766E, #C2410C, #4338CA, #BE185D.
- Ink #1E293B, muted text #64748B, group separators #E2E8F0, zero line #CBD5E1, vertical gridlines #F1F5F9, footer text #94A3B8.

Typography (Google Fonts):
- Rubik throughout. Title 700 29px ink, sentence case, stating the finding. Subtitle 400 15px muted. Badge names 600 15px ink, badge captions 400 11px muted, badge numbers 700 24px in the darker partner. Group codes 700 22px ink with a 400 12px muted descriptor beneath. Value labels 500 11px in the darker partner. Tick labels and footer 400 12px.

Layout:
- 48px side margins. Title at y 58, subtitle at 86.
- A row of four badges at y 106, each 204 x 50 fully rounded (radius 25), 16px apart, with a 1.5px border in the series color and its tint as fill. Inside: a 16px-radius circle in the series color holding a white line icon (2px strokes), the series name and a small caption, and the series average right-aligned in big numerals.
- Group labels in a left column from x 48; bars start at x 196 and run to x 872 for the maximum.
- Source bottom right, the unit note bottom left, both at y 584.

Axes and grid:
- Vertical gridlines at quarter steps, 1px #F1F5F9, with a 1.5px #CBD5E1 zero line. Tick labels centered 20px below the last group.
- 1px #E2E8F0 horizontal separators between groups spanning the full width.

Marks:
- Bar chart: grouped horizontal bars, 12px thick with 3px between bars of a group, each group centered in a 72px row, series always in the same order. Right ends rounded (radius 6), square at the zero line. Value label 7px past each bar end.
- Line chart: one 2.5px line per series in the same colors with 7px dots ringed in 2px white, direct labels at the right end in the darker partner color, and the badge row kept as the legend.

Avoid: a separate legend box, shadows, gradients, 3D, reordering series between groups, and axis titles that repeat the subtitle.

When you're done, render the chart and check that badge averages match the data, every group keeps the same series order, and value labels never touch the next bar.