Chart Prompts

Restyle my chart in the "Loadout Stats" 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 clean, bright inventory compare screen from a modern game. Two items side by side, one stat per row, crisp condensed type, and the difference called out in green or red at the right.

Colors (use these exact values):
- Page: #FFFFFF. Frame panel: #F6F7F9 with a 1.5px #D5D9DE border. Bar tracks and row dividers: #E9ECEF.
- Ink: #1D2328. Secondary text: #6A737C. Faint labels: #9AA2AA.
- Baseline series (the current or equipped item): #5B6770 slate gray. Comparison series (the new item): #00A6A6 teal, with its value labels in #008080 for contrast.
- Tier colors on the item tabs: #2F6FD6 (rare blue) and #8A46D1 (epic purple).
- Difference chips: #1F9D4C for better, #D8423A for worse, each on a 12% tint of itself.

Typography (Google Fonts):
- Rajdhani throughout, with tabular figures (font-variant-numeric: tabular-nums).
- Title 700 27px ink stating the finding; subtitle 500 16px #6A737C.
- Row labels 700 16px uppercase with 1.4px letter-spacing; unit notes under them 500 13px #9AA2AA.
- Item names in the tabs 700 18px; tier line 700 11.5px uppercase, 1.6px letter-spacing, in the tier color ("RARE · EQUIPPED").
- Value labels 700 16px in the series color; difference numbers 700 21px; small caps labels ("COMPARE", "CHANGE", "MAX 80") 600 to 700, 11 to 14px, 1 to 3px letter-spacing.

Layout:
- Title and subtitle top left at 40px margins, then one framed panel 880 x 446px with 6px radius and 16px L-shaped slate corner brackets (2px) inside each corner.
- Top of the panel: "COMPARE" label on the left, two item tabs (236 x 54px, white, 4px radius, 1px #D5D9DE border, a 5px tier-colored strip across the top, a 12px series-color square before the name), and "CHANGE" on the right.
- Rows 66px apart separated by 1px #E9ECEF dividers: label column on the left (about 190px), paired bars in the middle (about 440px), value labels right after the track, and the difference chip at the far right.

Axes and grid:
- No axes. Each row has its own 0-to-max track: a #E9ECEF rounded (2px) track with small white tick notches every tenth, and "MAX 80" printed inside the track's right end in 11px #9AA2AA.

Marks:
- Bar chart: two 16px bars per row, 6px apart, baseline item on top in #5B6770, new item below in #00A6A6, 2px radius, always from zero. Values printed 12px after the track end.
- Line chart: draw each series as a 2.5px line (slate for the baseline, teal for the comparison) with r 4 dots filled white with a 2px ring, on the same pale #F6F7F9 framed panel; label the last value of each line and put the final difference chip at the right edge.
- Difference chip: 72 x 30px, 4px radius, tinted green or red, with a signed number ("+16", "−240"); color by whether the change is better, which means a lower number can be green (for weight or cost). Explain that in a footer legend.

Avoid: dark backgrounds, glossy gradients, heavy borders, a single shared axis across stats with different units, and using red or green for anything but the difference chips.

When you're done, render the chart and check that each bar starts at zero on its own track, the chip colors match better or worse for that stat, the tier strips read clearly, and no value label touches the chip column.