Chart Prompts

Restyle my chart in the "Training Run" 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: an experiment-tracking dashboard for a model training run, frozen at the moment someone hovers over one step. Dark, dense and calm: small panels, thin smoothed lines over ghosted raw values, monospace numbers.

Colors (use these exact values):
- Background: #15171C (charcoal). Panels: #1E2128 with a 1px #2A2E37 border and 6px radius. Gridlines: #272B33.
- Metric colors: #E8B45A (warm gold), #7CB8E8 (soft sky blue), #E59AB8 (muted pink). Cycle them across panels in reading order; within one panel use one color, or all three in this order for multiple series.
- Main text: #E7E9EE. Secondary text and tick labels: #8A909C. Status dot and "live" label: #5CCB8A. Tooltip chip: #2C313B with a 1px #3A404B border.

Typography (Google Fonts):
- Inter for the title (600, 24px, -0.2px letter-spacing, stating the finding), subtitle (14px, #8A909C), panel titles (600, 13.5px, written as metric keys like "train/loss") and the source line (12px).
- JetBrains Mono for every number: the value at the cursor in each panel header (500, 13px, in the panel's color, right-aligned), tick labels (10.5px, #8A909C), the run pill (500, 12.5px), tooltip text (11 to 12px) and the footer status line (11.5px).

Layout:
- A run pill at the top-left (x 32, y 18, 262 x 26, fully rounded, #1E2128 with a #2A2E37 border): green status dot, run name, a 1px divider, the commit hash with a "#" in #8A909C, and "live" at the right end.
- Title at y 80 and subtitle at y 104. Panels in a 3 x 2 grid from x 32 to 928 and y 122 to 544 with 14px gaps.
- Inside each panel: a 3.5px colored dot and the metric name at the top-left, the current cursor value at the top-right, the plot area inset 52px left, 14px right, 46px top and 30px bottom. Step labels "0 20k 40k 60k" below.
- Footer: "Source: ..." at the bottom-left and a monospace status line ("cursor: step 41,500 · 8x accelerators · bf16") right-aligned.

Axes and grid:
- Three horizontal 1px #272B33 gridlines per panel with monospace tick labels 8px left of the plot. No axis lines, no vertical gridlines.

Marks:
- Line chart: in every panel draw the raw logged values as a 0.9px line at 22% opacity, then the exponential moving average as a 1.8px line with round caps and joins in full color. Exact schedules (learning rate) get only the solid line.
- Bar chart: small panels of thin vertical bars (2px gaps, 1.5px top radius) in the panel color at 35% opacity for raw values, with the smoothed trend drawn over them as a 1.8px line in full color.
- Shared cursor: a 1px dashed (3 on, 3 off) #C9CDD6 line at 55% opacity at the same step in every panel, with a 3.6px ring marker (panel-colored 1.8px stroke, filled with the panel color #1E2128) where it meets the smoothed line.
- Tooltip chip: in the first panel only, a 120 x 40 chip with 5px radius placed just left of the cursor near the top of the plot, showing "step 41,500" in #8A909C and the metric value in the panel color.
- Anomaly marker: circle a spike with a 5.5px ring (1.4px stroke), draw a short leader line and label it "spike 6.84" with "@ 31.25k" below, placed on the side away from the cursor.

Avoid: thick lines, area fills, gradients, glows, bright white gridlines, legends (the panel titles name each metric) and proportional fonts for numbers.

When you're done, render the chart and check that the cursor sits at the same step in every panel, the raw traces read as ghosts behind the smoothed lines, the tooltip chip does not hide the line it describes, and the header values match the smoothed values at the cursor.