Chart Prompts

Restyle my chart in the "Donor Disbursements" 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: the financing status page of a development program report. Cream paper, a boxed headline total, sober deep blue ink and a data table printed under the chart, as a finance officer would expect.

Colors (use these exact values):
- Page: #FDFAF3 (cream). Primary data and accents: #1E40AF (deep blue). Ratio line: #8A8A8A, its label #5A5A5A.
- Ink #1C2230, secondary text #6B6558, gridlines #E3DCCB, table highlight band #F4EEDF, total box fill #FFFFFF.

Typography (Google Fonts):
- Merriweather 700 for the title (23px, ink, stating the finding) and the boxed total (30px, deep blue); Merriweather italic 11.5px for the table number at bottom right ("Table 3.2").
- Fira Sans for everything else: eyebrow 11px 500 uppercase, 1.8px letter-spacing, deep blue; subtitle 14px #6B6558; legend 13px; axis labels 12px; year labels 13px 500 ink; table 12.5px with tabular figures, row labels 12px 500 #6B6558; source 11.5px.

Layout:
- 56px margins. Eyebrow, title and subtitle at top left. At top right a 210 x 92 px box with a 1.5px deep blue border and a 22px deep blue header strip ("TOTAL COMMITTED 2018–25" in 10px 600 white uppercase), the total centered, and a 12px line under it with the second total and the ratio.
- Two separately framed panels on one category axis, x 186 to 848, never a right-hand second axis: a slim ratio panel (y 152 to 204, 0% to 100%) for the cumulative ratio, then a legend row at y 246 starting at the plot's left edge, then the bar panel (y 272 to 424) in the data unit. Each panel is named in the left column at the 56px margin in 12px 500 #6B6558 ("Cumulative ratio", "Annual, $m"), aligned with the table row labels below.
- A data table under the x axis between two 0.8px ink rules: one row per series plus the ratio, values centered under each category, the second row on a #F4EEDF band with its values in 600 deep blue.
- Footer: source note on the left, italic table number on the right.

Axes and grid:
- Bar panel: gridlines 1px #E3DCCB at five even steps, the zero line 1.2px ink, labels right-aligned 10px left of the plot in #6B6558. Ratio panel: gridlines at 0%, 50% and 100%, a 1px #8A8A8A zero line, labels right-aligned in #8A8A8A.
- No vertical gridlines. Category labels 20px below the baseline.

Marks:
- Bar chart: grouped pairs of 30px bars with a 4px gap, square corners. The planned or committed series is an outlined bar (1.5px deep blue stroke, cream fill); the actual or disbursed series is solid deep blue. No value labels on bars: the table carries the numbers.
- Line chart: the actual series as a 2.5px deep blue line with solid r 3.5 dots; the planned series as a 1.5px deep blue line with hollow cream-filled dots; the ratio as described below.
- Ratio line: 1.5px #8A8A8A straight segments with r 3 cream-filled dots (1.5px gray stroke) in the slim ratio panel only, never over the bars, each dot centered over its bar group, the final value labeled 10px right of its dot in 12px 600.

Avoid: dual axes (a % line on a right axis over the bars), rounded corners, gradients, shadows, bright secondary colors, value labels that duplicate the table, and a heavy frame around the plot.

When you're done, render the chart and check that the table columns align with the bar groups, the row labels do not touch the first column, the boxed total equals the sum of the series, and the ratio is computed as stated in the note.