Chart Prompts

Restyle my chart in the "Shot Profile" 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 shot-graph screen of a modern espresso machine app right after a pull. Black glass, a thin giant timer, glowing warm and cool traces, and compact condensed type.

Colors (use these exact values):
- Screen: #0E0E10. Chart panel: #17171A, 18px radius.
- Series: #F4A259 (warm amber, primary), #5DA9E9 (cool blue, secondary), #EDE3D1 (cream, dotted, in its own strip panel below).
- Gridlines: #2B2926. Secondary text: #8E877D. Highlight band: #EDE3D1 at 7% opacity.

Typography (Google Fonts):
- Rajdhani for everything. Status row 600 14px uppercase with 2.5px letter-spacing (#8E877D, the status in amber after a 4px amber dot). Title 700 30px #EDE3D1, sentence case, stating the finding, kept short so it clears the timer. Subtitle 500 16px #8E877D naming each measure and unit.
- Timer: 300 weight, 92px, #EDE3D1, -2px letter-spacing, right aligned at x 920, y 94, with a 36px 500 #8E877D unit suffix.
- Axis labels 600 14px; phase labels and legend 600 12 to 14px with 2px letter-spacing on uppercase; pill text 700 15px.

Layout:
- Status row at y 40, title at y 88, subtitle at y 116, 40px left margin.
- Panel from x 24 to 936 and y 140 to 540. Inside it, two plots share one time axis from x 88 to 860: the main plot from y 196 to 384 and a slim strip for the third measure from y 440 to 490, each with its own single scale on the left. Never put a measure on a right-hand second axis.
- Header row inside the panel at y 184: phase labels ("PREINFUSION 0–8 s" centered over the band, "EXTRACTION" after it) on the left and a line-swatch legend on the right (22px swatches).
- The strip's header row sits in the gap between the plots: at left a dotted cream swatch and "WEIGHT IN CUP  g" (600 12px, 2px letter-spacing, cream at 75%); at right, right-aligned to the plot edge, a result pill (250 x 32, 16px radius, #0E0E10 fill, 1px #EDE3D1 stroke at 35% opacity) reading "36.4 g out · 18.0 g in · 1:2.0".
- Footer at y 574: source left, uppercase spec note right.

Axes and grid:
- 1px #2B2926 horizontal gridlines at 5 even steps in the main plot (#8E877D labels, unit caption "bar · ml/s" above) and at 0, 20, 40 in the strip (labels in cream at 70% opacity).
- X labels every 5 seconds ("10s"), 24px under the plot. No axis lines.
- A translucent band for the opening phase, drawn in both plots.

Marks:
- Line chart: smooth monotone curves, 3.2px amber for the primary series, 2.6px blue for the secondary, and a cream dotted line (2.6px, dash 0.1 6, round caps, so it reads as beads) for the strip series. A 4.5px solid dot at each line's end; the strip series also gets its final value ("36.4 g", 700 15px cream) 12px right of its end dot. One small annotation in the series color for a notable moment ("4.6 ml/s fill").
- Bar chart: slim vertical bars per time step with 3px rounded tops in amber (bars in the highlight band in cream at 40% opacity), the secondary series as a blue line over the bars and the cumulative series dotted in cream in the strip below.

Avoid: dual axes (a second measure on a right-hand scale), glows and bloom, gradients, bright white, boxed legends, bold serif type, heavy axis lines, and letting the timer touch the title.

When you're done, render the chart and check that the timer and title never overlap, the dotted line reads as dots at thumbnail size, the pill covers no data, the two plots share exact time positions, and the ratio in the pill equals yield divided by dose.