Chart Prompts

Restyle my chart in the "Sheen 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 paint maker's finish guide. One slate blue shown at five sheen levels, each deeper and shinier than the last, on soft gray-white paper. Quiet, technical and tactile.

Colors (use these exact values):
- Page: #F2F2F0.
- Series ramp, one per series in order from least to most sheen: #9AABBF (flat), #6D85A4 (matte), #446089 (eggshell), #243D6B (satin), #091D48 (gloss). With fewer series use evenly spaced steps; never reorder.
- Highlight: #FFFFFF stripes inside the marks (see Effects).
- Ink #1F2733 for the title, legend text, category names and each group's top value; #6B7280 for the subtitle, tick labels, other values and source; #446089 for the eyebrow; gridlines #DEDFDD; zero line #9CA3AF; small key letters and the legend arrow #9CA3AF and #B9BDC4.

Typography (Google Fonts):
- DM Serif Text 400 for the title, 32px, ink, stating the finding.
- Figtree for everything else: eyebrow 12px 700 uppercase with 2.2px letter-spacing; subtitle 15px; legend labels 13px 600; value labels 11.5px 500 (800 in ink for the largest bar of each group); key letters under bars 10px 600; group names 15px 700; tick labels 12px; "more sheen" 12px italic; source 12px.

Layout:
- 56px left margin. Eyebrow baseline 58, title 98, subtitle 126.
- Sheen legend row at y 152: five 22 x 22 swatches, 104px apart, each drawn with its own highlight stripe and followed by its name; under the row a 1px #B9BDC4 line 480px long ending in a small filled triangle and the italic words "more sheen".
- Plot from x 96 to 904, y 222 to 494. Footer source at baseline 572.

Axes and grid:
- Horizontal gridlines at round values, 1px #DEDFDD; a 1px #9CA3AF zero line. Y tick labels right-aligned 18px left of the plot. No vertical axis line.

Marks:
- Bar chart (grouped): bars 28px wide with 5px gaps inside a group, 2px corner radius, groups centered in equal slots. Every group repeats the flat-to-gloss order. Value labels centered 7px above each bar. A single key letter (F, M, E, S, G) centered 16px under each bar, and the group name 40px under the baseline.
- Line chart: one line per sheen level in the ramp colors, 2.5px, with the line width rising 0.5px per step; each point is a 9 x 14 px mini bar-shaped marker (2px radius) carrying the same highlight stripe as the bars, and the last value is labeled at the right end in the line's color. Same legend row, grid and fonts.

Effects:
- Highlight stripe inside each mark, placed at 24% of the mark width: a crisp white stripe whose width and opacity grow with sheen (flat none; matte 2px at 16%; eggshell 3px at 26%; satin 4px at 38%; gloss 5px at 55%), plus a soft white band three times as wide centered on it at about a third of that opacity. Inset 2px from the top and bottom of the mark.

Avoid: extra hues, gradients across the bars, drop shadows, a separate legend box, dual axes, and relying on color alone (keep the key letters and legend).

When you're done, render the chart and check that the stripes visibly step up from flat to gloss, adjacent sheen levels are distinguishable, value labels never touch each other, and the title's claim matches each group's tallest bar.