Chart Prompts

Restyle my chart in the "Markdown Ladder" 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: an end-of-season sale review from a fashion retailer. Black page, a loud condensed uppercase headline, white for full price and a red ladder that deepens with every markdown step, like sale signage.

Colors (use these exact values):
- Page: #0D0D0D.
- Ordered ladder, lightest to deepest: full price #FFFFFF, first step #F4A3A3, second step #E0524F, third step #9E1B1B. Keep this order; it is sequential, so a deeper red always means a deeper discount.
- Text on #FFFFFF, #F4A3A3 and #E0524F segments: #0D0D0D. Text on #9E1B1B: #FFFFFF.
- Secondary text and the 50% reference line: #8F8F8F. Footer rule: #2B2B2B. A small #E0524F "SALE" tag in the eyebrow.

Typography (Google Fonts):
- Anton 33px uppercase #FFFFFF, 0.4px letter-spacing, for the title, stating the finding in one line.
- Libre Franklin for everything else: eyebrow 10.5px 600 uppercase with 2.2px letter-spacing in #8F8F8F after the tag (tag text 10px 800, 1.6px letter-spacing, white on a 44 x 18 #E0524F rectangle); subtitle 14px #8F8F8F; legend 12.5px 600 white; category names 14px 500 (white for the categories that pass the 50% mark, #C9C9C9 otherwise); the headline share in 17px 800 white with tabular figures; segment values 12px 600; axis labels 10.5px; column headers 9.5 to 11px 700 uppercase with 1 to 1.4px letter-spacing.

Layout:
- 56px margins. Eyebrow at y 51, title at y 104, subtitle at y 132, a legend row of 14px square swatches at y 166.
- One row per category, 38px apart starting at y 212, sorted by the first segment's share. Category name at x 56, the bold first-segment share right-aligned at x 228 under a small "FULL" header, bars from x 246 to 904.
- Axis labels (0%, 25%, 75%, 100%) under the last row; footer rule and source line below.

Axes and grid:
- No gridlines. A single vertical 50% reference line, 1.4px #8F8F8F dashed (3 on, 3 off), from just above the first bar to just below the last, labeled "50%" in 11px 700 white above it.

Marks:
- Bar chart: 100% stacked horizontal bars, 26px tall, square-cornered, segments in ladder order from the left, separated by 1.5px page-colored gaps. Print each non-first segment's value centered inside it when the segment is at least 24px wide; the first segment's share is printed at the left instead.
- Line chart: one line per stage over time as a 100% stacked area in the same ladder (white at the bottom), 1.5px page-colored boundaries between bands, with each band labeled at its right end and the 50% line drawn horizontally in the same dashed gray.

Avoid: any hue outside the red ladder, gradients, rounded corners, shadows, and a ladder whose colors are out of order.

When you're done, render the chart and check that each bar sums to 100%, the headline count matches the rows that pass 50%, the dark red segments carry white text, and the 50% line stays visible across white segments.