Chart Prompts

Restyle my chart in the "Housing Index" 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 thoughtful policy-institute data brief at night. Deep indigo, soft warm and cool index lines, and one shaded gap that tells the story.

Colors (use these exact values):
- Background: #1A1740, with a soft radial glow of #2A2360 centered near the top right (center 75% x, 20% y, radius 90%) fading to #1A1740.
- Series: rents #F5A77F (warm peach), wages #4FB3A5 (muted teal), house prices #C9B8F5 (pale lavender).
- Gridlines: #3A3470 (faint violet). Primary text: #F1EEFB. Secondary text and the base rule: #A9A3CC. Callout box fill: #231F52.

Typography (Google Fonts):
- Red Hat Display: title 700 30px, -0.3px letter-spacing, stating the finding; end-label values 700 20px in the series color; callout eyebrow 700 11px uppercase with 2px letter-spacing in peach.
- Red Hat Text: subtitle 400 15px #A9A3CC with the base year in it ("index (2010 = 100)"); tick labels 12px; end-label series names 500 13px in the series color; callout body 500 15px #F1EEFB; source 12px.

Layout:
- 56px margins. Title at y 66, subtitle at y 94. Plot from x 96 to 790 and y 132 to 520; right 110px reserved for end labels. Source at the bottom left.

Axes and grid:
- 1px #3A3470 horizontal gridlines every 20 index points, labels right-aligned 12px left of the plot. No vertical gridlines, no axis lines.
- A bold 2px #A9A3CC rule at 100, with its label "100" in 700 #F1EEFB.
- X labels only at 5-year intervals, 24px below the plot.

Marks:
- Line chart: smooth monotone-cubic lines, 3px, round caps and joins, all starting at 100. Fill the area between the two lines that make the point (here rents and wages) with #F5A77F at 16% opacity, and set a small "The gap" label (700 12px peach, 0.6px letter-spacing) inside the wedge. End dots r 5 in the series color with a 2px background-colored ring; end labels 14px right of the dot: the final index value on top, the series name below.
- Bar chart: grouped vertical bars per period with 3px top radius in the same three colors, bars 70% of the group width, the base line at 100 drawn bold with bars growing up or down from it; shade the difference between the two key series with a peach 16% bracket rectangle, and put the final values on top of the last group.
- Callout: a 300 x 92 box with 6px radius, #231F52 fill and a 1.2px peach border, placed in empty space at the upper left of the plot: eyebrow "AFFORDABILITY GAP", then two lines stating the gap in plain words (for example "A month's rent now takes 28% more of a typical paycheck than it did in 2010."), computed from the data.

Avoid: a legend (use end labels), neon glows, harsh saturated colors, dense gridlines, and anything that crosses the callout box.

When you're done, render the chart and check that the shaded wedge exactly spans the two lines, the end labels don't collide, the numbers in the title and callout are arithmetically correct from the final index values, and the lavender and teal remain distinguishable on the indigo.