Chart Prompts

Restyle my chart in the "Tactile Dots" 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 tactile-graphic inspired chart on a slate board. Bars become plates of raised, embossed dots, and each series uses a different dot spacing, so the chart reads by texture as well as by color.

Colors (use these exact values):
- Background: #22262B (slate charcoal).
- Series 1: #E8E2D4 (pale bone). Series 2: #5FB3A8 (teal).
- Secondary text: #A9AEB5. Pill tabs and key panel: #2E3339 fill with a #4B525B outline.
- Dot shadow: #0B0D10 at 75% opacity. Dot highlight: #FFFFFF at 60% opacity.

Typography (Google Fonts):
- Title: Public Sans 700, 28px, #E8E2D4, stating the finding.
- Everything else: Atkinson Hyperlegible. Subtitle 17px 400 #A9AEB5. Side headers 15px 700 uppercase with 1.8px letter-spacing in the series color, with the total. Value labels 16px 700 in the series color. Category labels in pill tabs 17px 700 #E8E2D4. Key and source 14px.

Texture (the embossed dot):
- Each dot is three circles: a shadow offset (+0.9, +1.0) in #0B0D10 at 75%, the dot in the series color, and a highlight of 42% of the radius offset up-left by about a third of the radius in white at 60%.
- Series 1: dense grid, dot radius 2.3 on a 7px pitch (four rows in a 28px bar). Series 2: open grid, radius 4.3 on a 14px pitch (two rows). Only whole dots; start from the bar's baseline end.
- Each bar is a plate under the dots: 4px radius, series color fill at 10% opacity, 1px series-color outline at 40%.

Layout:
- A finely textured border: a ring of tiny round dots (2px stroke, dasharray 0.01 5, round caps, #E8E2D4 at 45%) inset 14px with a 10px radius, and a 1px hairline at 14% opacity inset 20px.
- 48px margins. Title, subtitle, then side headers above the bars.
- Dot-density key in the bottom right corner: a rounded panel with a small plate of each dot grid and its meaning ("7px grid: males", "14px: females"). Source bottom left.

Axes and grid:
- No axes or gridlines. A wide central axis (about 104px) holds the category labels in fully rounded pill tabs, 26px tall. Values are printed at the outer end of every bar.

Marks:
- Bar chart: a population pyramid, series 1 growing left and series 2 growing right from the central pill column, 28px bars on a 38px row pitch, oldest band at the top. Ordinary horizontal or vertical bars use the same dot plates, series side by side.
- Line chart: a 3px line in the series color traced by embossed dots every 7px (series 1) or 14px (series 2) along the path, with larger embossed dots (r 6) at each data point and end labels in the series color.

Avoid: flat solid fills, gradients across whole bars, partial dots cut off at bar ends, glows, thin hairline text, and relying on color alone: the dot spacing must differ by series.

When you're done, render the chart and check in grayscale that the two series are distinguishable by dot spacing, that no dot is clipped, and that the pill tabs are centered on each row.