Chart Prompts

Restyle my chart in the "Supplier Scorecard" 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 printed quarterly vendor review. Cream paper, a ruled table, one bullet graph per row and a boxed letter grade, as orderly as a school report card.

Colors (use these exact values):
- Page: #FFFDF5 (pale cream), alternate rows #F7F3E6.
- Measure bars, rates that meet target, eyebrow and A grades: #1E3A8A (dark navy).
- Target tick and failing grades: #B91C1C (deep red).
- Qualitative bands, darkest to lightest: #C9C6BD (poor), #DDDAD2 (fair), #EEECE6 (good).
- Ink #1C1917, secondary text #6B665C.

Typography (Google Fonts):
- Bitter 700 for the title (28px, #1C1917, stating how many rows meet target) and for the grade letters (14px).
- Source Sans 3 for everything else: eyebrow 11.5px 700 uppercase with 2px letter-spacing in navy ("VENDOR REVIEW | COMPANY | PERIOD"); subtitle 15px #6B665C; column headers 11px 700 uppercase with 1.4px letter-spacing; row names 15px 600; counts 14px tabular figures; rate values 15px 700 tabular figures; axis and key 12 to 12.5px.

Layout:
- 48px margins. Eyebrow at y 50, title at y 88, subtitle at y 114.
- A table: a 2px ink rule on top, header row (SUPPLIER, ORDERS right-aligned at x 214, ON-TIME DELIVERY starting at x 300, RATE right-aligned at x 830, GRADE centered at x 884), a 0.8px rule, then rows on a 34px pitch with alternate-row shading, and a closing 0.8px rule.
- Below the table: percent ticks under the bullet column, then a single key line (band swatches, measure, target, grade cut-offs) and the source.

Axes and grid:
- No gridlines. A shared 0 to 100% scale for every bullet (x 300 to 770), with 5px ticks and labels every 20% under the closing rule.

Marks:
- Bar chart (bullet graph per row): three stacked 20px-tall band rectangles (0 to 80, 80 to 90, 90 to 100), an 8px navy measure bar centered on them from zero, and a 2.5 x 26 px red target tick. Square corners throughout.
- Line chart: one small panel per row: the three bands as horizontal bands behind a 2px navy line of the measure over time, with the target as a 1.5px red horizontal line; keep the table, rate column and grades.
- Grade: a 22px square at x 873 with 1.5px border: A is navy fill with white letter, B and C navy outline and letter, D red outline and letter.

Avoid: rounded bars, gradients, shadows, colored bands (the bands stay gray), and axis labels repeated on every row.

When you're done, render the chart and check that grades match the stated cut-offs, the target tick sits at the same x on every row, the title count equals the rows at or above target, and the header labels align with their columns.