Chart Prompts

Restyle my chart in the "Language Spoken" 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 civic census feature on deep teal. Countable unit squares make the size of each group tangible, and a neat side table gives the exact numbers. Humanist serif names, soft pastel colors, lots of calm.

Colors (use these exact values):
- Background: #0F2E2E (deep teal). Side panel card: #153B3B. Rules: #2A5454.
- Categories, in order: #A7F3D0 (pale jade), #FDE68A (sand), #FBCFE8 (rose), #BAE6FD (ice).
- Primary text: #F2F7F5. Secondary text: #8FB3AE.

Typography (Google Fonts):
- Gentium Book Plus 700 for the title (31px, sentence case, states the finding), category names (19px in the category color beside the chart, 16px in #F2F7F5 in the table) and the table total row; Gentium Book Plus italic 13.5px #8FB3AE for a one-line descriptor under each category name.
- Noto Sans for everything else: eyebrow 11px 600 uppercase, 2px letter-spacing, #8FB3AE; subtitle 14.5px #8FB3AE; unit key 12px; row-end totals 18px 700 #F2F7F5 with a 11.5px "thousand" under them; table headers 10.5px 700 uppercase with 1.4px letter-spacing; table figures 14px with tabular figures (shares in the category color).

Layout:
- 56px side margins. Eyebrow, title, subtitle, then a unit key: a 9px #F2F7F5 square followed by "= 1,000 residents (rounded)".
- Category names in a left column from x 56; unit bars start at x 206; rows 88px apart starting at y 186.
- Side panel card from x 620 to 904, y 170 to 510, 4px radius: header row (LANGUAGE, RESIDENTS, %) over a 1px rule, one row per category with a 10px color swatch, 1px dashed (2 on, 3 off) #2A5454 dividers between rows, then a 1px #8FB3AE rule and a bold total row.

Axes and grid:
- No axes or gridlines: the squares are the scale. Every row carries its own total.

Marks:
- Bar chart: horizontal unit bars. Each square is 9 x 9 px with a 1px radius on an 11px pitch, one square per 1,000 units (rounded), filled column by column five squares deep so the bar grows to the right; a partial final column fills from the top. The rounded total sits 8px after the last column.
- Line chart: a 2.5px line per category in its color with 9px square markers (1px radius) at every point, the category name and final value at the right end, and the same side panel listing the latest exact values.

Avoid: axes, gridlines, gradients, shadows, circles instead of squares, and squares so small they merge at thumbnail size.

When you're done, render the chart and check that each row has exactly round(value / 1,000) squares, the side table's figures and shares match the data, the row-end totals do not touch the side panel, and every table column lines up on its right edge.