Chart Prompts

Restyle my chart in the "Score Bands" 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 lending scorecard exhibit in a credit policy memo. Sober slate bars, one urgent red for risk figures, and a clear cutoff decision drawn right on the chart.

Colors (use these exact values):
- Page: #FFFFFF.
- Bars: #5A6475 (slate); bars on the decline side of the cutoff at 72% opacity.
- Risk figures (bad rates) and the "DECLINE" label: #C8102E (red).
- Decline-side shading: #F3F0EE (warm pale gray) behind the plot from the left edge to the cutoff.
- Ink #1F2430 for the title, band labels, baseline and cutoff; secondary text #707786; gridlines #D9DCE2.

Typography (Google Fonts):
- Karla for everything. Title 700, 26px, -0.3px letter-spacing, stating the decision's finding. Subtitle 400, 16px, #707786, naming both measures and the sample size.
- Bad rates 700 15px red; share labels inside bars 700 13px white; band labels 700 14px ink; band counts 400 12px #707786; row headers ("Band", "Applicants") 700 12px ink, right aligned left of the plot; side summaries: label 700 12px uppercase with 1.6px letter-spacing, text 400 13px ink.

Layout:
- 48px margins. Plot from x 120 to 900, baseline at y 440.
- Under the baseline, two aligned rows: band ranges written like "580–619" (with an en dash), then a 0.8px rule, then applicant counts per band. This makes the second measure a table row, never a second axis.
- The shaded decline region extends about 64px above the top gridline to hold its summary: "DECLINE" in red and "24.5% of applicants, bad rate 12.8%"; the approve side gets "APPROVE" in slate with its own summary.
- A key along the bottom (slate square "Share of applicants", red "Red figures" and the bad rate definition) with the source right aligned.

Axes and grid:
- Horizontal gridlines 0.8px #D9DCE2 every 5 points, labels "10%" 13px right aligned 12px left of the plot. A 1.2px ink baseline. No vertical axis line.
- The cutoff is a 1.4px ink vertical line, dashed 5 on 4 off, running from the top of the shaded region down past the count row, ending in a dark pill (80 x 22, fully rounded, ink fill) reading "Cutoff 620" in 700 12px white.

Marks:
- Bar chart: square-cornered slate columns, 58px wide at 8 bands, starting at zero. The share value sits inside the top of each bar in white; the bad rate floats 10px above each bar in red.
- Line chart: a 2.5px slate line with 5px slate dots per band over the same shaded decline region and dashed cutoff, bad rates in red above each point.

Avoid: a second y axis for the bad rate, color-coding bars by risk, gradients, rounded bars, legends in boxes, any accent color besides the one red.

When you're done, render the chart and check that bars start at zero, the decline and approve summaries equal the weighted sums of the bands on each side, counts add up to the stated total, and no red label touches a bar or gridline label.