Chart Prompts

Restyle my chart in the "Warm Graphite" 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 warm dark mode of a calm productivity app. Brown-leaning graphite instead of cold blue-black, stone greys, one warm and one cool accent, and a borderless list that feels native to the app.

Colors (use these exact values):
- Background: #1C1917 (warm graphite). Control surfaces: #292524 (stone), the selected segment #44403C.
- Positive values: #F59E5B warm orange. Negative values: #5FB3A8 dusty teal.
- Text: #F5F5F4 for title, selected segment and values; #A8A29E stone grey for category names, subtitle and axis labels (axis labels and footer at 75% opacity).
- Zero spine: #78716C, 1.5px. Row dividers: #2E2A27, 1px.

Typography (Google Fonts):
- Onest for everything, values with tabular figures (font-variant-numeric: tabular-nums): title 28px 600 with -0.4px letter-spacing; subtitle 15px 400; segmented control 13px (600 selected, 500 others); category names 14px 500 stone; values 14px 600 #F5F5F4 with an explicit sign ("+14", and a true minus sign for negatives); scale labels 12px; footer 12px.

Layout:
- 56px side margins. Title, subtitle, then a row with a segmented control at left (three segments 78px wide, 32px tall, 9px radius track in #292524 with the selected one in #44403C, 7px radius) and a small key at right (14px rounded squares for positive and negative).
- A borderless list: category names left-aligned in a column at the margin, bars diverging from a zero spine placed right of center, rows 33px apart separated by soft 1px dividers across the full width (no divider above the first row). Footer with the source at left and a sample-size note at right.

Axes and grid:
- No gridlines and no axis box. Scale labels above the list at even steps ("−20", "−10", "0", "+10", "+20") in 12px stone at 75% opacity. The thin warm zero spine runs 6px past the first and last rows.

Marks:
- Bar chart: diverging horizontal bars 16px tall, square at the spine and with a 6px radius on the outer end only; orange to the right, teal to the left. Value labels 10px beyond the outer end (left-aligned for positives, right-aligned for negatives). Sort from most positive to most negative.
- Line chart: a 2.5px orange line for the main series and a 2.5px teal line for the comparison, with a filled area between them tinted orange (18% opacity) where the main series is above and teal where it is below; 6px dots at the ends with signed value labels, and the same thin warm zero spine as a horizontal reference.

Avoid: cold blue-grey or pure black backgrounds, borders around the chart, heavy gridlines, fully rounded pill bars, red and green for sentiment, more than two data hues.

When you're done, render the chart and check that the bars meet the spine squarely, only the outer ends are rounded, negative labels use a true minus sign, and the title names the largest gain and the largest loss correctly.