Chart Prompts

Restyle my chart in the "Deconstructed Grid" 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: 1990s deconstructed editorial design on a pale gray page. The grid is visibly broken, rules slice through the bars, labels hide in odd margins and huge numerals overprint the grid above the data, yet every value stays readable and the scale stays straight.

Colors (use these exact values):
- Page: #E9E9E6 (pale gray).
- Bars: #1D3FD0 (cobalt) for the highlighted group and #111111 (black) for the rest.
- Overprinted numerals: #F0432A (signal red) with mix-blend-mode multiply, so they print through the gridlines like overprinted ink.
- Small margin labels: #6E6E69.

Typography (Google Fonts):
- Syne 800 for the title, 44px, -1px letter-spacing, in two lines with the second line indented about 72px and set in cobalt; the same weight at 40px for the overprinted value numerals (-2px letter-spacing).
- Barlow Condensed for everything else: kicker 13px 600 uppercase with 3px letter-spacing; subtitle 18px 500; axis numbers 15px 600; category labels 19px 700; group labels 15px 700 uppercase with 1.5px letter-spacing; margin labels 11px 600 uppercase with 2.5 to 3px letter-spacing; source 13px 500.

Layout:
- Kicker top left at y 40, sample size top right. Title lines at y 90 and 136, subtitle at y 174 indented to x 120.
- Chart area x 128 to 884, baseline y 492, top of scale y 204. The right group of bars is shifted 10px right of the regular slots.
- Tiny labels in unexpected margins: the value axis title rotated -90 degrees at far left, "AGE" (or the category axis title) left of the category labels, and a figure caption rotated 90 degrees in the right margin.

Axes and grid:
- Gridlines 0.8px #111111 at 40% opacity with irregular gaps cut out of them (gaps 10 to 70px wide at different x positions on every line).
- The value axis is one straight 1.6px black line at x 106 with every tick label right-aligned 8px left of it. Keep the scale honest: the deconstruction lives in the grid, the cuts and the baseline, never in a jogged or broken value axis.
- The baseline is two 2px black segments: one under the highlighted group at the baseline, the other under the remaining bars 5px lower, with a gap between.

Marks:
- Bar chart: square-cornered bars 76px wide (about 60% of the slot). Four page-colored #E9E9E6 rules, 2 to 3px thick, cut across the bars at irregular heights and partial widths. Each value numeral (e.g. "31%") starts 8px left of its bar with its baseline 8px above the bar top, so it overprints the grid in multiply but never covers the bar.
- Line chart: a 5px #111111 line with a cobalt 5px segment for the highlighted range, square 10px markers, the same broken gridlines and page-colored cuts, and oversized multiply numerals whose baseline sits 12px above each labeled point, clear of the line.
- Direct group labels under the category labels with a 10px square swatch each; no separate legend box.

Avoid: a clean continuous grid, rounded corners, gradients, shadows, more colors, and letting the numerals collide with each other or hide a bar's length.

When you're done, render the chart and check that the numerals sit fully clear of the bars, no two numerals touch, the value axis is one straight line with every tick aligned to its gridline, and group percentages add up correctly.