Chart Prompts

Restyle my chart in the "Cycle Plot" 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: an evening analytics briefing with a boutique feel. Soft lavender lines on dark plum-gray, warm gold means, and an elegant serif headline; the cycle plot separates seasonality from trend in one glance.

Colors (use these exact values):
- Background: #1E1B24 (plum-gray).
- Subseries lines: #B8A6E8 (soft lavender).
- Mean lines, latest-year dots and the callout: #E8C170 (warm gold).
- Gridlines and slot dividers: 1px #2E2A37; zero baseline 1px #4A4456.
- Text: #F2EEF7 primary, #9C95AB secondary.

Typography (Google Fonts):
- Fraunces 600 29px for the title (stating the finding, computed from the data), -0.3px letter-spacing, #F2EEF7.
- Karla for everything else: subtitle 400 15px #9C95AB; legend 400 13px #F2EEF7; y tick labels 400 12px #9C95AB right-aligned 10px left of the plot; month initials 700 14px #F2EEF7 centered under each slot; callout 700 12.5px gold; source 12px #9C95AB.

Layout:
- Title baseline y 52, subtitle y 79, a single-row legend at y 110: a short lavender zigzag "One month, 2017 to 2024", a 26px gold rule "Eight-year mean", a gold dot "2024".
- Plot from x 84 to x 920 and y 140 to y 520, divided into twelve equal month slots. Month initials 22px below the baseline. Source at y 578.

Axes and grid:
- Shared y axis for all slots with ticks at round values (0, 20, 40, 60) and faint horizontal gridlines. No x axis line beyond the baseline.
- Faint vertical dividers between month slots, running from 6px above the plot top to the baseline.

Marks:
- Line chart: inside each slot (9px padding on both sides), a 2px lavender line with straight segments and round joins traces that month across the years in order. A 2px gold mean line spans the slot (3px past the line ends, round caps, 0.9 opacity) at that month's multi-year mean. The latest year's point is a r 3.8 gold dot with a 1.5px background-colored ring. Label the most important slot with a small gold "first → last" callout 14px above its peak (Karla has no arrow glyph, so draw the arrow as a short stroked gold path between the two values).
- Bar chart: in each slot, one thin lavender column per year (2px gaps, square corners) instead of the line, the latest year's column in gold, with the same gold mean line across the slot.

Avoid: a continuous line joining slots, markers on every point, a legend box, color per year, gradients, glow, heavy gridlines.

When you're done, render the chart and check that each slot's lines are in year order, gold lines sit at the true means, the gold dot is the latest year, dividers separate the slots cleanly, and the title's percentage matches the data.