Chart Prompts

Restyle my chart in the "Patch Notes" 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 game studio's developer blog post about balance changes. Calm, off-white and technical, with changelog notes hung from the chart like code comments and small green and red badges marking what was buffed or nerfed.

Colors (use these exact values):
- Page: #F7F7F5 (off-white). Ink: #1C1D21. Secondary text: #6B6E76. Faint labels: #9A9CA3. Gridlines and quiet rules: #DEDED9. Tag fill: #ECECE7.
- Series, in order: #3F4F8C (slate indigo), #008F7E (teal), #A052B8 (violet), #BF8424 (ochre), #C0506F (rose).
- Change badges: #1E9E5A (up, improved or buffed) and #D6453D (down, reduced or nerfed).

Typography (Google Fonts):
- Space Grotesk 700 for the title: 30px, -0.6px letter-spacing, sentence case, stating the finding.
- Karla for prose: subtitle 400 15px #6B6E76; series labels 700 14px in the series color; legend and source 12 to 12.5px.
- JetBrains Mono for anything code-like: the eyebrow ("DEV BLOG / BALANCE REPORT", 500 11px, 1.2px letter-spacing, #9A9CA3), tick labels (11 to 12px), the changelog tags (500 11px) and end values (500 12.5px ink).

Layout:
- 40px side margins. Eyebrow at top, title about 38px below, subtitle under it.
- A band of changelog tags between the subtitle and the plot (tags start about 30px under the subtitle, plot starts about 30px below the tallest tag).
- Plot about 700px wide on the left; direct series labels and end values in a column to the right of the last point.
- Footer row: badge legend on the left ("buffed in patch", "nerfed in patch"), "Source: ..." on the right in 12px #9A9CA3.

Axes and grid:
- Horizontal gridlines every 2 units, 1px #DEDED9, labels in 11px mono to the left. One reference line (for example 50%) drawn 1px #6B6E76 dashed 4 4.
- Every x category (patch, release, version, period) gets a thin 1px #DEDED9 vertical rule. Categories with a change get a darker rule instead (1px #1C1D21 at 55% opacity) that runs from the tag down to the baseline, and their x label turns 700 ink; other x labels stay 400 #9A9CA3.

Marks:
- Line chart: straight 2.5px lines with round joins, each drawn over a 6px #F7F7F5 halo so crossings stay readable. Small r 3 dots in the series color with a 1.5px page-colored ring at every point.
- Bar chart: grouped or single vertical bars in the series colors, 2px top radius, separated by a 2px page-colored gap, with the same category rules and changelog tags above the groups; flagged bars get the badge centered just above their top.
- Change badges: where a series was changed, replace its point with an r 8.5 circle filled #1E9E5A or #D6453D, 2px page-colored ring, holding a white 8px triangle pointing up or down.

Labels and annotation:
- Changelog tags: 148px wide rounded rectangles (3px radius) filled #ECECE7 with a 2px ink stripe on the left edge, hung from the top of the category rule with a 3px ink dot at the hanging point. First line "// patch 3.6" in 11px mono #9A9CA3, then one line per change: a small green up or red down triangle and a short note like "Warden armor -8%" in 11px mono ink.
- Keep notes to about 18 characters so neighboring tags never touch.

Avoid: a boxed legend (label lines at their ends instead), dark backgrounds, gradients, shadows, more than two badge colors, and tags that overlap the lines.

When you're done, render the chart and check that every tag sits clear of its neighbors, each badge sits exactly on the changed point, end labels do not collide, and the title's claim is true for the data.