Chart Prompts

Restyle my chart in the "Pipeline Stages" 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 CRM deal board turned into a chart. Each category is a lane on a kanban board with a white header card, and the data sits in slim rounded stacks inside the lanes. Tidy, friendly, product-UI calm.

Colors (use these exact values):
- Page: #F6F5F2 (warm gray). Lanes: #ECEAE5. Header cards and count badges: #FFFFFF.
- Series, bottom to top in a stack: #1E3A8A (navy, the most certain part, e.g. committed), #60A5FA (blue, e.g. best case), #DBEAFE (pale blue, e.g. pipeline) with a 1px #93C5FD outline so it holds up against the lane.
- Ink: #1C1F2A. Secondary text: #6B6A66. Dotted in-lane gridlines: #D8D5CE. Lane baseline: #BDB9B0.

Typography (Google Fonts):
- Manrope 800 for the title (26px, -0.4px letter-spacing, sentence case, stating the totals) and the lane header values (18px navy); Manrope 700 12.5px for the circled counts.
- Commissioner for everything else: eyebrow 11px 600 uppercase with 1.8px letter-spacing in #6B6A66 ("COMPANY · SALES BOARD · Q3"); subtitle 14px #6B6A66 with measure, unit and period; lane names 13px 600 ink; legend 12px 500; segment value labels 11px 600 navy; lane footers 11.5px; source 11.5px.

Layout:
- 40px side margins. Eyebrow at y 52, title at y 88, subtitle at y 114, legend top right on the eyebrow line (12px rounded squares, radius 3).
- One lane per category, laid out left to right, filling 880px with 12px gutters. Lanes run from y 140 to y 548 with 10px corner radius.
- Each lane starts with a white header card inset 6px (56px tall, radius 7) holding the category name on top and its total value in large navy numerals below, a small "3/6" position counter at the right, and a 3px accent strip at the card's left edge in navy whose opacity climbs from 0.25 to 1 across the lanes.
- Lane footer under a 1px #BDB9B0 baseline: a derived metric in 11.5px #6B6A66 (e.g. "avg deal $153K") and a share line in 11.5px 600 ("48% committed"), navy when it is 50% or more.
- Footer line: "Source: illustrative data" left; right, a small circled "n" with "= open deals in the stage".

Axes and grid:
- No y-axis line or tick labels; values live in the header cards and beside the bars. Three dotted 1px #D8D5CE gridlines (2 on, 3 off) inside each lane only, stopping 10px short of the lane edges.

Marks:
- Bar chart: one slim stacked bar per lane (40px wide, about 30% of the lane), centered, with its whole stack clipped to an 8px corner radius so both ends are rounded. Segments are separated by 2px gaps in the lane color. Print the bottom segment's value in 11px 600 navy 8px to the right of the bar when the segment is tall enough. Above each stack, a 13px-radius white circle with a 1.5px navy ring holding a count (e.g. deal count), joined to the stack top by a 1px #6B6A66 stem.
- Line chart: keep the lanes as time periods or categories. Draw one 2.5px navy line through the lane centers with round joins, white-filled 13px count circles as markers ringed in navy, and a light #DBEAFE area below the line; a second series in #60A5FA at 2px. Header cards carry each lane's value.

Avoid: axis lines, heavy shadows, gradients, more than three series colors, and labels inside the pale segments.

When you're done, render the chart and check that every lane header total equals the sum of its stack, the circled counts sit clear of the header cards, the pale segment is still visible against the lane, and no label spills out of its lane.