Chart Prompts

Restyle my chart in the "Depth 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: the order book panel of an exchange, redrawn as a clean diverging bar chart. Very dark navy, translucent green and red bars growing out of a central price column, and one pale yellow row glowing where the two sides meet.

Colors (use these exact values):
- Background: #0A1022 (navy). Price column backdrop: #0F1830 with 6px radius. Rules: #1B2642.
- Bids / left side: #1FD39B (bid green). Asks / right side: #F4566F (ask red). Order bars at 42% opacity, cumulative bars at 13%.
- Spread row: #FDE68A (spread yellow) 1.2px outline at 85% opacity on #2A2A22, plus a soft glow of the same yellow at 35% opacity with a 7px Gaussian blur.
- Text: #E7ECF7 (title, sizes), #7E8AA8 (subtitle, cumulative values), #5A6687 (column heads, source). Prices take their side's color.

Typography (Google Fonts):
- Space Grotesk for words: title 23px 700 with -0.3px letter-spacing, stating the finding; subtitle 13.5px 400; side labels ("BIDS", "ASKS") 12px 700 with 1.6px letter-spacing in their side colors; column heads 11px 500 uppercase with 0.8px letter-spacing; source 11.5px 400.
- Space Mono for every number: prices 13.5px 700, order sizes 12.5px 700, cumulative sizes 11.5px 400, the mid price 22px 700 in yellow.

Layout:
- 40px margins. Title and subtitle top left. A row of side totals above the columns ("BIDS 97,400 KLV" at left, "75,800 KLV ASKS" at right).
- Column heads: CUMULATIVE, SIZE, PRICE, SIZE, CUMULATIVE. The price column is centered at x 480 and 124px wide.
- Asks stacked above the spread with the highest price on top; bids below it with the best bid first. 30px rows with 24px bars.
- The spread row spans the full width (x 60 to 900) and is 38px tall with 8px radius: "SPREAD" and the spread with its basis points on the left, the mid price large in the center, "MID PRICE, <unit>" on the right.

Axes and grid:
- No axes or gridlines: the price column is the axis. Both sides share one length scale, set so the largest cumulative bar is about 290px, leaving room for the cumulative labels at the outer edges.

Marks:
- Bar chart: each level gets a pale cumulative bar (13% opacity) with the level's own order bar (42% opacity) drawn over it from the same inner edge, both 3px radius. Order sizes sit just inside the inner end of the bar in bold #E7ECF7, cumulative sizes at the outer margin in #7E8AA8. For an ordinary diverging bar chart, use the same two colors for negative (left) and positive (right), the category column in the middle, and the glowing yellow row for the zero or reference category.
- Line chart: draw a depth curve instead: cumulative size as stepped lines (2px) in bid green to the left and ask red to the right of a central yellow mid-price line, each with an area fill at 13% opacity, prices along the bottom in Space Mono and the same spread readout in a yellow-outlined box at the top center.

Avoid: solid opaque bars, gradients across the bars, glows anywhere but the spread, rounded display fonts, light backgrounds, and a legend (the side labels do that job).

When you're done, render the chart and check that cumulative values add up level by level, the ratio in the title matches the two side totals, the spread and basis points are arithmetically right, and no size label collides with its neighbor or the price column.