Chart Prompts

Restyle my chart in the "House Seats" 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 theater box office's evening sales sheet. Pale rose paper, deep burgundy ink, a confident serif headline and a small seating plan that shows at a glance where the empty seats are.

Colors (use these exact values):
- Page: #FAF3F1 (pale rose white).
- Primary data: #7B2338 (deep burgundy) for sold amounts, number badges, the eyebrow and any below-target percentage.
- Capacity: #EFC9CF (light pink), drawn full length behind each sold bar.
- Middle tone: #A4495D for the plan's "90% or more" sections; #D98E9C for "under 90%".
- Ink: #3A2226 for headline, row names and percentages. Secondary text #8E6B72. Rules and gridlines #E8D8D6.

Typography (Google Fonts):
- Gloock for the headline (33px, #3A2226, sentence case, stating the finding) and the big percentages at the right of each row (26px, right-aligned).
- Josefin Sans for everything else: eyebrow 11.5px 600 uppercase, 2.6px letter-spacing, burgundy; subtitle 16px #8E6B72 including the total sold and percent; row names 13px 700 uppercase with 1.8px letter-spacing; "598 of 612" counts 13px #8E6B72 right-aligned at the bar area's right edge; axis labels 12px; small uppercase panel labels 10.5px 700 with 2px letter-spacing; number badges 11px 700.

Layout:
- 56px side margins. Eyebrow at y 52, headline at y 96, subtitle at y 124, then a 1.2px #E8D8D6 rule.
- Left, the chart (x 64 to 488 for bars, percentages right-aligned at x 560 under a small "SOLD" header). Right, a 304 x 344 seating plan card (rx 8, white at 55% opacity, 1px #E8D8D6 border) starting at x 600.
- A small legend under the bars (14 x 10 swatches: "Seats sold", "Unsold capacity") and the source at the bottom right.

Axes and grid:
- Horizontal bar chart on a zero-based seat scale: thin 1px #E8D8D6 vertical gridlines at round values with labels below, and a 1.2px #3A2226 zero line. No top axis.

Marks:
- Bar chart: one row per category with the name above the bar (preceded by a 9px-radius burgundy numbered badge), a 30px-tall #EFC9CF capacity bar (rx 3) and the sold amount as a #7B2338 bar on top of it, both from zero. Rows are 78px apart.
- Line chart: plot the sold share or count as a 3px #7B2338 line with r 5 burgundy dots, over a #EFC9CF band showing capacity; put the latest percentage in Gloock 26px at the line's end.
- Seating plan: a #3A2226 stage bar labeled "STAGE" (10px 700, 3px letter-spacing, rose text), three concentric annular sectors for stalls, dress circle and upper circle (roughly 22 to 158 degrees, radii 14 to 76, 86 to 116 and 126 to 156, 2px rose gaps), boxes as two small rounded rectangles at the stage ends. Fill each section by how full it is: #7B2338 sold out, #A4495D 90% or more, #D98E9C under 90%. Put the matching numbered badge (rose circle, burgundy number) on each section, and a small three-swatch key under the plan.

Avoid: color on categories that don't need it, gradients, shadows, truncated bars, and a plan with realistic seat-level detail (keep it diagrammatic).

When you're done, render the chart and check that the badges on the bars match the badges on the plan, the percentages are arithmetically right, the smallest bar is still visible, and the plan fits inside its card with room to spare.