Chart Prompts

Restyle my chart in the "Abatement Curve" 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 policy consultancy slide on a dark charcoal screen. Bold and analytical: a staircase of variable-width blocks, money-saving options in green hanging below zero and costly options in orange above, every block named on a leader line.

Colors (use these exact values):
- Background: #18191B (dark charcoal).
- Negative values (savings): #4CC38A (green) at 88% opacity.
- Positive values (costs): #F0883E (orange), 88% opacity when below the reference line, full opacity above it.
- Reference line and its label: #F2F0EA.
- Primary text #ECEBE7; secondary text and leaders #8E9095; gridlines #2A2C30; zero line and x ticks #6B6E74.

Typography (Google Fonts):
- Archivo Black 400 for the title, 26px, #ECEBE7, stating the finding with a number.
- Archivo for everything else: eyebrow 11.5px 600 uppercase with 2px letter-spacing; subtitle 13.5px #8E9095 naming what height and width encode; axis labels 12px; block labels 12px 600 #ECEBE7 with the value as a 500-weight tspan in the block's color 6px after the name; reference label 12.5px 700; legend 12.5px 500.

Layout:
- 56px side margins. Eyebrow at y 50, title at y 94, subtitle at y 124.
- Plot from x 104 to x 880, y 178 to 516. X axis title right-aligned under the x labels. Legend (12px squares) and source on one line at y 572.

Axes and grid:
- Horizontal 1px #2A2C30 gridlines every 40 units with signed dollar labels ("-$40", "$0", "$40"); the zero line in #6B6E74.
- X axis ticks every unit, labeled every second unit plus the final total.

Marks:
- Bar chart: a marginal cost curve. Sort items by value, then draw each as a rectangle whose width is its volume (cumulative along x) and whose height runs from zero to its value, with a 2px background-colored gap between blocks. Labels: costly blocks are labeled 20px above their top, right-aligned to a 0.9px leader at the block center; saving blocks are labeled 24px below their bottom, left-aligned to the leader. Every label gets a 5px background-colored halo (paint-order stroke) so it stays readable across the reference line. The reference value (the allowance price) is a 1.4px #F2F0EA dashed line (7 on, 5 off) across the full plot with its label on the left above the line.
- Line chart: the same palette with a 2.5px #F0883E stepped line (step-after) of cost against cumulative volume, the segments below zero recolored #4CC38A, the dashed reference line, and each step labeled on a leader in the same one-line name-plus-value style.

Avoid: equal-width bars (width must carry volume), gradients, rounded corners, drop shadows, a rotated label, and a second y axis.

When you're done, render the chart and check that the widths sum to the x-axis total, the title's percent equals the volume priced below the reference line divided by the total volume, no label touches another label or a block, and the negative labels clear the x axis.