Chart Prompts

Restyle my chart in the "Amortization" 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 clear, reassuring loan statement from a well-run bank. Pale blue paper, a crisp navy and soft peach pairing, a small summary table of key terms and one marker that explains the turning point.

Colors (use these exact values):
- Page: #EEF4FA (pale blue paper).
- Primary series (principal): #1D3461 (navy).
- Secondary series (interest): #F4B393 (soft peach). Peach text and the emphasized total use the deeper #B8643E so they stay readable.
- Headline ink, baseline and marker: #16233B. Secondary text: #5F6F86. Rules, gridlines and table borders: #CBD8E6. Table cells: #FFFFFF.

Typography (Google Fonts):
- Bitter: title 700, 34px, #16233B, sentence case stating the finding; table values 600, 18px.
- Figtree: eyebrow 600, 11.5px uppercase, 2.2px letter-spacing, #5F6F86; subtitle 400, 15px, #5F6F86; table labels 600, 10.5px uppercase, 1.6px letter-spacing; legend 600, 13.5px; axis labels 12.5px (500 for categories); axis title 600, 12px, 1.2px letter-spacing; marker labels 700 and 600, 13px; source 11.5px.

Layout:
- 56px left margin. Eyebrow at y 58, title at y 98, subtitle at y 124.
- Under the subtitle, a summary table: one row of four white cells, each 170px wide and 54px tall with 1px #CBD8E6 borders, holding a small uppercase label and a Bitter value (for example loan amount, rate, annual payment, total interest; the total in #B8643E).
- Legend to the right of the table: 12px square swatches stacked with their labels.
- Plot from x 96 to 904 and y 250 to 516. Source line at y 578.

Axes and grid:
- Horizontal gridlines only, 1px #CBD8E6, labeled "$10k" style right-aligned 12px left of the plot; "$0" at the baseline.
- A 1.2px #16233B baseline. Label only the first category and every fifth one below it, plus a small centered axis title.

Marks:
- Bar chart: many slim square-cornered stacked bars (17px wide in a 27px slot for 30 bars). Principal sits on the baseline in navy, interest stacks above it in peach with a 1px paper-colored gap between the two segments. No value labels on individual bars.
- Line chart: a 2.5px navy line for the primary series and a 2.5px #B8643E line for the secondary, straight segments, no dots except a 3px dot at the crossing point; fill the area between the lines with a 20% peach tint where the secondary series is above.

Labels and annotation:
- Mark the crossover (the first period where the primary series overtakes the secondary) with a 1.2px #16233B dashed vertical line (4 on, 3 off) between the two periods, rising 32px above the tallest bar and ending in a 3px dot. At its top, split the label either side of the line: the navy part right-aligned to the left ("Year 20: $15,322 principal"), the peach part left-aligned to the right ("vs. $15,018 interest").

Avoid: rounded bar corners, gradients, shadows, 3D, value labels on every bar, and a dark background.

When you're done, render the chart and check that each year's two segments sum to the same payment, the crossover marker falls exactly between the last interest-heavy and first principal-heavy period, and the table figures agree with the data.