Chart Prompts

Restyle my chart in the "Pipeline Phases" 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 pipeline slide from an R&D portfolio review. Calm lavender, orderly rows, one deep violet ink that fills in as each program advances; readable at a glance by an executive and precise enough for a program lead.

Colors (use these exact values):
- Page: #F2F1F7 (pale lavender gray). Alternate rows get a #FFFFFF band at 55% opacity.
- Progress: #4B3B8F (deep violet) for completed stages and the done part of the current stage; #D8D3EC for the remaining part of the current stage; #BDB6D8 1px outlines for stages not started and for header rules.
- Category tags: #B8483A, #23788A, #9C6B12, #3867B0 (add #6A4FA0 for a fifth), always with white text.
- Ink: #1E1A33. Secondary text: #6B6680. Milestone dates: #4B3B8F.

Typography (Google Fonts): Be Vietnam Pro.
- Eyebrow: 600, 11.5px, uppercase, 2px letter-spacing, #4B3B8F. Title: 700, 27px, -0.3px letter-spacing, #1E1A33, stating the finding. Subtitle: 400, 14.5px, #6B6680.
- Column headers: 600 10.5px uppercase, 1.2 to 1.4px letter-spacing, #6B6680. Row names: 700 13.5px; the descriptor beneath: 400 10.5px #6B6680. Tags: 600 9px uppercase, 0.7px letter-spacing. Milestone text 400 12px; its date 700 12px violet.

Layout:
- 56px margins. Header block at the top, a column header row at about y 162 with a 1px #BDB6D8 rule 8px under it, then one row per item at 34px pitch.
- Columns left to right: category tag (a 122 x 18 pill, radius 9), item name with descriptor stacked under it, the segmented bar (five cells 72px wide with 4px gaps), then the next milestone right-aligned at the right margin with its description 74px to the left of the date.
- A closing rule under the last row, and a key row below it (Phase complete, In progress, Not started) with "Source: ..." right-aligned.

Axes and grid:
- No numeric axis. The stage names are the column headers, centered over their cells. No vertical gridlines; the cell gaps do the work.

Marks:
- Bar chart: each row is a horizontal bar split into equal stage cells 18px tall with 3px radius. Completed stages solid #4B3B8F; the current stage is #D8D3EC with a 1px violet outline and filled with violet from the left by its share complete; later stages are empty with a 1px #BDB6D8 outline. Sort rows by stage, most advanced first.
- Line chart: keep the row layout and put a thin 1.5px #BDB6D8 track across the stage columns per row, with a 2.5px violet line from the first stage to the item's current position and a 6px violet dot at the current position (a white-filled dot with a violet ring for stages not started). Tags and milestone columns stay the same.

Avoid: gradients, shadows, 3D, more than one fill color for progress, rainbow stage colors, and letting milestone text touch the last cell.

When you're done, render the chart and check that the count in the title matches the rows, every tag's text fits inside its pill, and the milestone column clears the last stage cell by at least 20px.