Chart Prompts

Restyle my chart in the "Opening Book" 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 page from a well-made chess opening repertoire book. Warm paper, quiet serif headings, condensed labels and a monospace line of notation: bookish, orderly and precise.

Colors (use these exact values):
- Page: #F7F2E8 (warm paper).
- Three result shades, light to dark: #FFFDF7 (ivory, always with a 0.8px #2F2F2F outline), #9C9489 (warm gray) and #2F2F2F (charcoal).
- Ink: #2A2622. Secondary text: #7A7268. Hairline rules: #DDD4C4.

Typography (Google Fonts):
- Crimson Pro 600 for the title (32px, #2A2622, sentence case, stating the finding); Crimson Pro italic 400 for the subtitle (18px, #7A7268) and the source line (13px).
- Cabin Condensed for labels: eyebrow 12px 600 uppercase, 2.4px letter-spacing, #7A7268; category names 17px 600 #2A2622; legend 14px 600; values inside bars 14px 500 (700 for the one or two values the title refers to); count column and header 14px / 11px 600 uppercase with 1.6px letter-spacing.
- DM Mono 400 at 11.5px #7A7268 for a secondary code-like line under each category name (for chess, the move order such as "1.e4 e5 2.Nf3 Nc6 3.Bb5"; otherwise an ID, SKU or short definition).

Layout:
- 56px margins. A double rule at the very top (1.5px and 0.6px #2A2622 lines 4px apart), then the eyebrow on the left with a small total on the right, title at y 106, subtitle at y 132.
- A left label column (x 56 to about 290) with the name and the monospace line beneath it; bars from x 300 to 830; a right-aligned count column ending at x 900 with a small uppercase header.
- Rows 44px apart, separated by 0.6px #DDD4C4 hairlines spanning the full width. A 0.6px #2A2622 rule above the italic source line.

Axes and grid:
- No axis lines. Faint vertical guides at 0, 25, 75 and 100% (0.6px #DDD4C4) and a dashed 50% guide (0.8px #7A7268, 2 on 3 off). Percent labels 12px #7A7268 beneath the last row.

Marks:
- Bar chart: 100% stacked horizontal bars, 22px tall, square corners, segments in the order ivory, warm gray, charcoal, with a 0.8px #2F2F2F outline around the whole bar. Percent labels centered in each segment: charcoal text on ivory and gray, ivory text on charcoal. Sort rows by the first segment.
- Line chart: lines in the three shades (the ivory series drawn as a 2px #2F2F2F outline around a 3px #FFFDF7 core, the gray #9C9489 2px dashed 5 on 3, the charcoal #2F2F2F 2.5px solid), square markers 6px, direct labels in Cabin Condensed at the line ends; the same hairline row and guide system.

Legend: a single row above the bars, in segment order: 12px squares (ivory with its outline) followed by 14px 600 labels.

Avoid: bright colors, gradients, shadows, rounded corners, and sans-serif titles.

When you're done, render the chart and check that each bar sums to 100%, the ivory segment is clearly outlined against the paper, the monospace line sits snugly under each name, and nothing touches the right count column.