Chart Prompts

Restyle my chart in the "Over Manhattan" 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 match summary page of a cricket club's scoring app, printed. A skyline of solid green bars on pale grass, friendly slab headings, red cricket balls marking the events and a thin run-rate strip riding above. Sporty but orderly.

Colors (use these exact values):
- Page: #EEF5E8 (pale grass).
- Main bars and score block: #2C6E49 (deep green). Highlighted phase bars (here the powerplay): #8CC49F (light green); the same color at 16% opacity shades that phase's background.
- Events: #C1121F (ball red), with a faint #F5C6C9 seam curve inside each ball.
- Ink and the run-rate line: #1B2B22. Secondary text: #5D6E62. Gridlines and dotted strip guides: #C9D9C2.

Typography (Google Fonts):
- Zilla Slab 700 for the title (31px ink, stating the finding) and the score block figure (30px white); Zilla Slab italic 400 13px for the venue line at bottom right.
- Karla with tabular figures for everything else: eyebrow 700 12px uppercase with 2px letter-spacing in deep green; subtitle 16px #5D6E62; panel labels ("RUN RATE", "RUNS") 700 11px uppercase with 1.6px letter-spacing; axis labels 12px; category labels 600 12px ink; bar value labels 700 13px inside the bar top (white on deep green, ink on light green); phase labels 700 12px uppercase 1.2px letter-spacing; legend 13px.

Layout:
- 48px margins. A 6 x 58px deep green accent bar at the left of the eyebrow and title block; subtitle under the title. A 152 x 66px deep green score block with 4px radius at top right with a small uppercase label and the headline total.
- A secondary strip panel (about 56px tall) under the header for a related running measure, with its own label, two dotted guide lines labeled at left and three marked values. It is a separate panel, never a right-hand axis on the main chart.
- The main plot from x 88 to x 912, y 262 to y 500. Legend right-aligned on the "RUNS" label row. Under the category labels, thin 1px brackets group the categories into phases, each labeled with its subtotal ("POWERPLAY 58/1").
- Footer: "Source: ..." at left in 12px, italic venue line at right.

Axes and grid:
- Y from zero, 1px #C9D9C2 gridlines every 5 units with labels right-aligned 10px left of the plot. A 1.4px ink baseline. No y-axis line, no tick marks.

Marks:
- Bar chart: vertical bars at 70% of the band with 3px rounded top corners only, deep green, the highlighted phase in light green. Each event is a 5.2px-radius red ball centered 10px above the bar top, further events stacked 13px apart upward.
- Line chart: a 2.6px deep green line with straight segments over a light green 16% area for the highlighted phase, a small deep green dot per point, and the red balls sitting on the line at event points. Keep the run-rate style strip above as a 1.6px ink line.

Avoid: a second y axis, gradients, shadows, outlines on bars, more than two greens, and dense value labels outside the bars.

When you're done, render the chart and check that the phase subtotals and the title add up from the bars, every event ball sits clear of its bar and value label, the strip's marked values are right, and the legend does not touch the subtitle or panel labels.