Chart Prompts

Restyle my chart in the "Lollipop Funnel" 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 crisp product analytics review. Cool, precise and friendly: navy stems, big bright aqua heads you can read the numbers in, a ghost of last period behind each row, and one warm orange flag on the step that matters most.

Colors (use these exact values):
- Canvas: #EEF1F5 (cool pale gray).
- Stems and primary ink: #13254B (deep navy).
- Heads (current period): #1CC6DA (bright aqua), with navy text inside.
- Highlight for the worst step: #F2661B (warm orange). Only for the leak bracket, its note heading and that step's rate.
- Ghost (previous period): #C9D0DA. Secondary text: #5E6B80. Vertical gridlines: #DCE1E8.

Typography (Google Fonts):
- Onest for everything, always with tabular figures (font-variant-numeric: tabular-nums).
- Title 32px 700, -0.6px letter-spacing, navy, stating the finding with the overall rate. Subtitle 15px 400 #5E6B80.
- Row labels 16px 600 navy. Values inside heads 15px 700 (13px for 4-digit numbers), -0.3px letter-spacing. Step-through rates 12.5px 500 #5E6B80. Change vs previous period 13px 500 #5E6B80. Legend 13px. Axis labels 12px. Leak note heading 11.5px 800 uppercase with 1.4px tracking in orange, body 13.5px 600 and 500 navy.

Layout:
- 56px left margin. Title baseline y 66, subtitle y 96, legend at the top right at y 130 (8px aqua dot "September", 8px ghost dot "August (ghost)").
- Label column from x 56; stems start at x 230. Value axis from 0 at x 230 to a round maximum at x 850, with room past the biggest head for its change label.
- Rows 78px apart starting at y 200.

Axes and grid:
- Vertical 1px #DCE1E8 gridlines at round values from y 160 to 530; labels ("10k") centered below at y 552 in 12px #5E6B80. No horizontal axis line. Unit label ("Sessions") right-aligned under the axis end.

Marks:
- Bar chart (horizontal lollipops): for each row first draw the ghost: an 8px #C9D0DA round-capped stem to last period's value and a r 28 #C9D0DA circle. Then the current stem, 3.5px navy with round caps, and a r 28 aqua circle with a 3px canvas-colored ring so the ghost reads as a crescent behind it. Print the value inside the head ("48.2k" above 10,000, "6,120" below). To the right of the larger head, print "+6.9% vs Aug" computed from the data.
- Between rows at x 64, a small 1.6px down arrow and "45.0% continue" (this step's conversion). The leakiest step's arrow and text are orange and 700.
- Leak bracket: an orange 2.5px bracket (10px arms) spanning from the upper row to the lower row of the worst step, a 12px stub out of its middle, and a three-line note: "LEAKIEST STEP", "71.8% of product viewers", "leave before adding to cart" (compute from the data).
- Line chart: draw each series as a 3.5px navy line with r 10 aqua dots (navy value labels above), the previous period as an 8px #C9D0DA line behind it, and flag the biggest period-over-period drop with the same orange bracket and note.

Avoid: a funnel shape, gradients, shadows, more than one orange element group, hollow heads, value labels outside the heads, and horizontal gridlines.

When you're done, render the chart and check that the numbers fit inside every head, ghost crescents are visible where values changed, the step-through rates and overall rate are computed correctly, and the bracket spans exactly the leakiest step.