Chart Prompts

Restyle my chart in the "Volunteer Hours" 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 community center's impact report. Bright, friendly and upbeat but tidy: four cheerful program colors on white, rounded tops, bold totals and one hand-drawn-feeling callout arc.

Colors (use these exact values):
- Page: #FFFFFF.
- Series, in stacking order from the bottom: #3A8FD1 (sky blue), #EE6352 (warm coral), #F2B705 (sunflower), #3F8F2A (leaf green). Keep this order so coral never touches green and sunflower sits between them.
- Ink for titles, totals and the annotation: #1E2A33. Secondary text: #66727C. Gridlines #ECEFF2. Baseline #C3CAD1.

Typography (Google Fonts):
- Poppins for the eyebrow (600, 12px uppercase, 2px letter-spacing, leaf green), title (600, 28px, #1E2A33, stating the finding), bar totals (700, 14px) and the annotation headline (600, 16px).
- Work Sans for everything else: subtitle 15px #66727C; legend 13.5px 500; month labels 13.5px 500 #66727C; y labels 12.5px; annotation detail 13.5px; source 12px; footer total 12.5px 600.

Layout:
- 56px side margins. Eyebrow at y 62, title at y 100, subtitle at y 128.
- A slim pill legend across the top at y 152: for each series a 22 x 10 px pill with 5px radius in its color and the name 8px to its right, about 24px between items, in stacking order.
- Plot from x 96 to 904, baseline at y 512, top at y 196. Footer at y 574 with the source on the left and an annual total on the right.

Axes and grid:
- Horizontal gridlines only, 1px #ECEFF2, at four round steps; a 1.2px #C3CAD1 baseline; y labels right-aligned 12px left of the plot. No axis lines, no tick marks.

Marks:
- Bar chart: stacked vertical bars 44px wide (about 65% of the band). Separate segments with 2px white gaps (shorten each segment above the first by 2px at its bottom). Only the top segment gets rounded top corners, 6px radius; everything else is square. Totals in Poppins 700 14px centered 9px above each bar.
- Line chart: 3px lines in the same four colors with 2px white-ringed dots (r 4.5) at each point and a very light area (10% opacity) under the top series only; direct labels at line ends in Work Sans 600 in each series color, and a Poppins 700 total-style label on the highest point.

Labels and annotation:
- One thin annotation arc (1.3px #1E2A33) from a 2.5px dot above the bar before the jump, rising vertically and curving into the left edge of the bar where the jump happens, ending in an open chevron arrowhead. Beside it, right-aligned, a Poppins headline ("2x in one month") and two lines of Work Sans detail with the exact values.

Avoid: gradients, 3D, shadows, borders around segments, rainbow extra colors, labels inside small segments, and a boxed legend.

When you're done, render the chart and check that the "doubled" (or other) claim is arithmetically exact, the 2px white gaps are visible between every segment, only top segments are rounded, and the arc and its text sit in empty space without crossing any total.