Chart Prompts

Restyle my chart in the "Action Title" 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 strategy consulting slide. The headline is a full sentence that states the conclusion, the chart proves it, and everything else is quiet, aligned and exact.

Colors (use these exact values):
- Slide: #FFFFFF.
- Series one and the structural accent (active tab, title rule, callout border, page number): #1B2A4A (navy).
- Series two: #0E9384 (teal). With more series, add #5F6776 then #98A0AD, keeping navy and teal for the two that matter.
- Title ink: #1D2433. Secondary text: #5F6776. Tertiary text, inactive tabs, axis line and ticks: #98A0AD.
- Gridlines: #ECEEF2. Hairlines (inactive tab borders, footer rule): #D5D9E0.

Typography (Google Fonts):
- Roboto only, weights 400, 500 and 700.
- Action title: 700, 27px, #1D2433, sentence case, one or two lines (34px line pitch), stating the finding with a number ("Zipro overtook Voltic in Q3 2024 and now leads Brassel's scooter-sharing market by 11 points").
- Deck kicker (top left): 500, 10px, uppercase, 1.6px letter-spacing, #98A0AD.
- Section tabs: 10px uppercase with 1.2px letter-spacing; 700 white on the active tab, 500 #98A0AD on the others.
- Subtitle: 400, 14px, #5F6776, giving measure, unit and period.
- Axis labels: 12px #5F6776 (values), 11px #98A0AD (quarters), 12px 500 #5F6776 (years).
- Direct end labels: series name 700 15px and value 500 14px, both in the series color.
- Callout: heading 700 13px navy, body 400 12.5px #1D2433. Footnote 11px #5F6776, page number 700 12px navy.

Layout:
- 56px side margins. Kicker at the top left (baseline 42px); a section tracker of three square-cornered tabs at the top right (22px tall, 4px apart, 1px borders), the current section filled navy.
- Title baselines at 92px and 126px, then a 1px navy rule across the full width at 150px. Subtitle 28px below the rule.
- Plot from x 92 to 790 and y 206 to 500, leaving about 110px at the right for end labels.
- Footer: a 1px #D5D9E0 rule at 556px, the source footnote at the left and the page number at the right, both at baseline 578px.

Axes and grid:
- Horizontal gridlines only, 1px #ECEEF2, at round values (every 10 points), with % labels right-aligned 12px left of the plot.
- A 1px #98A0AD baseline with small ticks down from it: 4px per quarter, 7px at each year start. Quarter labels under every tick and the year in a second row under Q1.
- No y-axis line, no vertical gridlines, no chart border.

Marks:
- Line chart: straight 3px lines with round joins and caps, no point markers except a 4.5px filled end dot. Label each series directly at its end (name above, value below, 14px to the right of the dot). No legend.
- Bar chart: square-cornered bars at about 55% of the band, navy for the focus series and teal for the comparison (or navy with the one highlighted bar in teal). Values 500 13px above the bars, the same gridlines and baseline, category labels 12px #5F6776 below.

Labels and annotation:
- Exactly one callout: a white box with a 1px navy border and square corners (about 208 x 78 px, 14px padding), a bold one-line heading plus two lines of explanation, joined by a 1px navy leader line to a 12px-radius open navy circle around the key data point (here the crossover).
- The footnote begins "Source:" and the page number sits alone at the right.

Avoid: legends when lines can be labeled, gradients, shadows, rounded corners, colored backgrounds, more than one callout, all-caps titles and titles that only name the topic.

When you're done, render the chart and check that the title states a finding that is arithmetically true for the data, the end labels do not collide, the callout's leader points exactly at the annotated point, and the tabs, title and rule share the same left and right edges.