Chart Prompts

Restyle my chart in the "Roast 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 live readout of a specialty coffee roaster's profiling software, cleaned up for print. Dark roasted-brown screen, cream and ember traces, monospaced readouts and a big roast timer.

Colors (use these exact values):
- Background: #1F1814 (roasted brown) for the whole canvas.
- Primary series and main readouts: #EFE4CF (cream).
- Secondary series, its axis and highlight readouts: #E0763A (ember orange).
- Phase bands, left to right: #241C17, #2A201A, #3A2419 (each a touch warmer than the last). Gridlines: #3A2E26. Secondary text: #9C8C7A.

Typography (Google Fonts):
- DM Sans for the title (700, 30px, cream, stating the finding), subtitle (400, 16px, #9C8C7A, naming both measures and units) and direct series labels (500, 15px, in the series color).
- DM Mono for every readout and axis: eyebrow 12.5px uppercase with 1.5px letter-spacing in #9C8C7A; timer 58px 500 cream with -1px letter-spacing; small caps labels 11 to 12.5px with 1 to 2px letter-spacing; axis numbers 12.5px; footer 12px #9C8C7A.

Layout:
- 56px side margins. Eyebrow at y 56, title at y 96, subtitle at y 126.
- Signature timer readout top right, right-aligned at x 904: "ROAST TIME" label at y 58, the big total time at y 114 ("11:42"), and a short ember line under it at y 140 ("DROP 212°C").
- Plot from x 88 to 860, baseline y 512, top y 196. Phase bands span the full plot height plus a 22px header strip above it where each band's name sits centered in 11.5px spaced mono caps (for example "DRYING", "MAILLARD", "DEV 20%").
- Footer at y 572: source at the left, a one-line event summary in mono at the right ("Charge 200°C · Dry end 4:44 · Drop 11:42").

Axes and grid:
- Dual axes: the left axis for the primary measure (labels 12.5px cream at 75% opacity, unit "°C" above), the right axis for the secondary measure in ember (unit "RoR" above). Choose the two ranges so gridlines are shared.
- 1px #3A2E26 horizontal gridlines at the left-axis steps. A 1px #9C8C7A baseline with 5px ticks each minute, labeled every two minutes as m:ss.

Marks:
- Line chart: the primary series as a smooth 2.5px cream line with round caps; the secondary series as a thinner 1.6px ember line that keeps some measurement jitter (do not over-smooth). Event points as cream dots (r 4.5) or an open ring (r 4, 1.5px cream) for a turning point, each with a mono readout ("TP 1:30 92°C").
- Bar chart: bars as flat #EFE4CF columns 60% of the band with square ends; a second measure as a 1.6px ember line with small ember dots on the right axis. Phase bands and the event marker still apply, and values read out in DM Mono above bars.
- Signature event marker: a 1.2px dashed cream vertical line (4 on, 4 off) through the full plot at the key event, with a small readout box beside it (#1F1814 fill, 1px cream outline at 50% opacity, rx 3): "FIRST CRACK" in 11px #9C8C7A mono and "9:20  196°C" in 14px 500 cream mono.

Avoid: glows, gradients, neon, rounded cards, chart junk like 3D, a boxed legend (label lines directly), and more than the two series colors.

When you're done, render the chart and check that the timer does not crowd the title, the phase percentages and times are computed from the data (development share = time after the event / total time), both axes are labeled in their series color, and the event box sits clear of both lines.