Chart Prompts

Restyle my chart in the "Index Explainer" 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 dark data journalism explainer that teaches as it shows. Ink-blue night page, one warm gold story series, muted slate for everything else, and a heavy dashed start line that makes "rebased to 100" obvious.

Colors (use these exact values):
- Page: #101826 (ink blue). Explainer box: #16223A with a 1px #2C3B55 border.
- Story series and its labels, the kicker and the box's icon and heading: #F2B544 (warm gold).
- All other series: #5D6D87 (muted slate).
- Primary text, the 100 baseline and annotations: #E8ECF3. Secondary text: #8C98AD. Gridlines: #1F2B3F.

Typography (Google Fonts):
- Source Serif 4 for the title (600, 31px, #E8ECF3, stating the finding), the explainer body (400, 13.5px, 16px leading) and the annotation (italic 400, 15px, 19px leading).
- Inter for everything else: kicker 12px 600 uppercase with 2.4px letter-spacing in gold; subtitle 15px #8C98AD naming the base period ("2015 = 100"); axis labels 12.5px; end labels 14px with the change in 700 then the name in 400 #8C98AD (16px and 600 gold for the story series); box heading 11px 700 uppercase with 1.4px letter-spacing.

Layout:
- 56px left margin for the header (kicker at y 52, title at 92, subtitle at 120). Plot from x 114 to 700, y 170 to 516; the right 200px holds end labels.
- The explainer box sits in the empty upper-left of the plot (12px in from the plot edge, 246 x 104, 6px radius): a gold r 8 ring with a serif "i", the heading "HOW TO READ AN INDEX", and four short lines explaining that every line starts at 100 and what 150 and 90 mean.
- "Source: ..." bottom left at y 574.

Axes and grid:
- 1px #1F2B3F gridlines at 125, 150 and 175 (or equivalent round values) with labels right-aligned 12px left of the plot; no y-axis line.
- The 100 line is the hero of the axis: 2.5px #E8ECF3 at 70% opacity, dashed 9 on 6 off, labeled "Start" / "= 100" in 12px 700 in place of the 100 tick label.

Marks:
- Line chart: slate lines 2px, the gold line 3.5px drawn last, straight segments, round joins. An end dot on each (r 3.5 slate, r 5 gold) and a direct label 14px to the right with the percentage change from the base ("+82%"). No legend.
- Bar chart: one bar per series showing the latest index value, bars rising from the dashed 100 line (up for above 100, down for below), slate with the story series in gold, the percentage change printed at the bar end in Inter 700.

Labels and annotation:
- One annotation in serif italic, three short lines, in open space, with a 1.3px #E8ECF3 curved arrow (small filled head) to a 7px white ring around the moment the gold series crosses another. Compute the crossing from the data.

Avoid: more than one gold series, multiple colors for the slate series, a legend box, gridlines that compete with the 100 line, and glows.

When you're done, render the chart and check that every line starts exactly on the dashed 100 line, the end-label percentages equal the final index minus 100, labels do not collide, and the box text stays inside the box.