Chart Prompts

Restyle my chart in the "Net Worth" 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 calm personal finance app in light mode. One white rounded card on a lilac-white page, a big hero figure with a green gain pill, a single violet line over a soft gradient, and friendly milestone flags that tell the story of the money.

Colors (use these exact values):
- Page: #F7F5FC. Card: #FFFFFF, 24px radius, soft shadows (0 10px 32px #3B2A8C at 8% and 0 1px 2px #3B2A8C at 6%), no border.
- Line and accents: #6A4CE0. Area under the line: a vertical gradient of #6A4CE0 from 26% opacity at the top, 7% at 60%, to 0 at the baseline.
- Gain: #12A36B text and arrow on a #E3F6EC pill. Losses, if any: #D6455D on #FBE7EB.
- Text: #1B1530 (hero, title, flag labels), #7A7391 (labels, subtitle, inactive selector), #A9A3BD (axes, footnote).
- Gridlines: #EEEBF6, dashed 3/4. Selector track #F1EEFB; flag label pills #FFFFFF with a 1px #E2DCF7 border.
- Extra series if needed: #6A4CE0, then #F29F4B, then #2BB3C0, each 3px, with direct end labels.

Typography (Google Fonts): Plus Jakarta Sans only, tabular figures for every number.
- Metric label "Net worth" 14px 600 #7A7391 followed by a 14px 500 #A9A3BD qualifier. Hero value 46px 800, letter-spacing -1.6px. Delta pill text 14px 700. Title 17px 700. Subtitle 13px 500. Flag labels 11.5px 600. Axis labels 12px 500 to 600. Selector 12.5px (700 active, 600 inactive). Footnote 11.5px 500.

Layout:
- Card inset 40px left/right and 28px top/bottom; 40px inner padding. Top-left stack: label, hero value (the latest figure), and to its right a 30px-tall fully rounded #E3F6EC pill with a drawn up arrow (2.2px stroke, round caps) and "$gain (+pct%)", followed by "all time" in #7A7391.
- Under the hero, a one-line title that states the finding (for example "More than tripled in five years, from A to B") and a subtitle naming the measure, unit and date range.
- Plot fills the middle of the card; y labels sit on the right, 14px after the plot.
- Under the plot, centered: a segmented selector, a #F1EEFB track 36px tall, fully rounded, holding 64px segments (1M 6M 1Y ALL or the periods that fit); the active segment is a #6A4CE0 pill 28px tall with white text and a soft violet shadow (0 2px 6px at 30%). The source line sits bottom-left at the selector's baseline.

Axes and grid:
- Dashed horizontal gridlines only, compact currency labels ($150K) in #A9A3BD. No y axis line. X axis: year labels centered under 5px tick marks at each January, no baseline.

Marks:
- Line chart: a 3px monotone smooth line in #6A4CE0 with round caps and joins over the gradient area. Milestones: at the milestone point a 4.5px white dot with a 2.5px violet ring, a 1.5px #1B1530 flag pole 46px tall rising from it, a small violet triangular pennant (14px long, 10px tall) at the top, and a 22px fully rounded white label pill above the pole. The latest point gets a 5.5px violet dot with a 2.5px white ring inside an 11px violet halo at 16%.
- Bar chart: slim #6A4CE0 columns with 6px top radius and 45% gaps, a faint #6A4CE0 at 12% column behind each for the previous period if there is one, and flag pills on milestone columns in the same pole-and-pennant style.

Avoid: dark backgrounds, heavy axes, more than one saturated hue, sharp corners, serif or condensed type, and overlapping flag labels (stagger pole heights if two milestones are close).

When you're done, render the chart and check that the gain in the pill equals latest minus first value and the percent is right, flag labels don't collide with each other or the line, the active selector segment is obvious, and the hero value matches the last data point.