Chart Prompts

Restyle my chart in the "Delivery Cost" 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 unit-economics card from a delivery company's finance review. Midnight blue, one raised card, a clean waterfall that walks from what the customer pays to what the company keeps, and a compact breakdown column that restates each step as a share.

Colors (use these exact values):
- Page: #0F1630. Card: #151E3F with a 1px #26315C border, 18px radius, and shadow 0 12px 36px #050814 at 50%.
- Starting total (revenue): #A5B4FC. Deductions (costs): #FB7185. Ending result (margin): #2DD4BF with a vertical gradient to 70% opacity at the base.
- Connectors: #9AA5CE, 1px dashed 3/3.
- Text: #F1F4FF for the title, totals and start/end category labels, #9AA5CE for the subtitle and cost labels, #65719D for y labels, dollar footnotes and source.
- Gridlines: #212B52; baseline #3A4777. Kicker chip fill #26315C.
- Additional series if needed: #FBBF24 then #C4B5FD.

Typography (Google Fonts): Sora everywhere, tabular figures for numbers.
- Kicker chip text 10.5px 600 uppercase with 1.4px tracking; context line 12.5px 400.
- Title 27px 700 with -0.6px tracking, stating what is kept. Subtitle 14px 400 with measure and currency.
- Bar value labels 14px 700 in the bar's color (white for the starting total). Category labels 12.5px (600 for start and end, 400 for steps). Y labels 12px 400. Breakdown heading 14px 600, rows 13px 400, shares 15px 700, dollar footnotes 11px 400. Source 11.5px 400.

Layout:
- Card inset 24px from the canvas edge. Inside: a 24px-tall fully rounded kicker chip ("UNIT ECONOMICS") at x 56, y 52, then the context line beside it; title at y 118, subtitle at y 146.
- Waterfall plot from x 96 to 612, y 222 to 486, six equal columns with bars at 58% of the column width.
- Breakdown column from x 664 to 904, separated by a 1px #26315C vertical rule: heading "Where the $9.80 goes", then one 58px row per item with a 5px color dot, label, right-aligned whole-number share, a 6px #212B52 track with a filled 3px-radius bar proportional to the share, and the dollar value right-aligned beneath.
- Source at y 552 inside the card.

Axes and grid:
- Horizontal gridlines every $2, y labels right-aligned 14px left of the plot with a $ prefix. Category labels centered under each bar, 24px below the baseline. No vertical lines.

Marks:
- Bar chart: a waterfall. The first bar rises from zero in #A5B4FC with a 6px top radius; each cost floats from the running total down by its amount in #FB7185 with 6px radius on all corners (smaller for thin steps) and a small 10px downward triangle 5px under its bottom edge; the final bar rises from zero in the teal gradient with a 6px top radius. Dashed connectors run from each bar's running level to the next bar. Value labels sit 12px above each bar, costs prefixed with a minus sign.
- Line chart: a 3px #A5B4FC line for the total with a teal #2DD4BF line for the margin, the gap between them filled with #FB7185 at 18% opacity to show costs, 4px dots at each point, and the latest values labeled at the right end; keep the breakdown column for the latest period.

Avoid: green/red profit-loss clichés, 3D, bar outlines, gradients on the cost bars, and a legend box (the labels and breakdown column do that job).

When you're done, render the chart and check that the running levels are arithmetically exact, the final bar equals the start minus every cost, the shares in the breakdown add up to 100%, and no value label collides with a connector.