Chart Prompts

Restyle my chart in the "Gray HMI" 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 high-performance operator display in a power plant control room. Almost everything is muted gray so that the one abnormal thing jumps out. Calm, flat, functional, zero decoration.

Colors (use these exact values):
- Canvas: #D4D5D6 (flat mid-gray), no gradients anywhere.
- Normal operating bands, header strip and readout panels: #BFC1C3 (a darker gray).
- Gridlines: #E4E5E6 (lighter than the canvas). Panel frames: #A9ACAF, 1px.
- Data traces: #34373A (dark gray). Title ink: #26292C. Labels and secondary text: #5F6367.
- Abnormal only: #F0A800 (amber). Used for the out-of-band part of a trace, the alarm diamond, the alarm tag box outline and nothing else. If nothing is abnormal, there is no color at all.

Typography (Google Fonts):
- Titillium Web for everything. Title 25px 600 #26292C stating the finding in sentence case. Subtitle 14px 400 #5F6367 with measures, units, period and sample interval.
- Header strip text and panel headings: 11 to 12px 600 uppercase with 1.2 to 1.6px letter-spacing, #5F6367, formatted like tag paths ("UNIT 2 / BOILER / MAIN STEAM TRENDS", "PT-2104 MAIN STEAM PRESSURE").
- Tick labels 12px 400 #5F6367. Readout values 22px 600 #26292C with the unit in 13px 400 #5F6367.

Layout:
- A 30px #BFC1C3 header strip across the top with the display path on the left and shift and clock on the right. Title and subtitle below at a 24px left margin.
- Chart area on the left (about 72 to 748px). A readout column on the right (776 to 936px): for each series a #BFC1C3 panel with tag, short name, state word ("NORMAL") and a boxed current value on the canvas color, plus a small outlined "ALARMS THIS SHIFT" box.
- Footer rule at y 548 with a legend sentence on the left (an amber diamond plus "Color marks abnormal only: ...") and "Source: ..." on the right, 12 to 13px.

Axes and grid:
- Each plot sits in a 1px #A9ACAF frame. Hour gridlines and value gridlines 1px #E4E5E6. No axis lines beyond the frame.
- Draw the normal operating range as a solid #BFC1C3 band behind the trace, full width, with "NORMAL lo–hi unit" right-aligned above the plot.
- Never put two measures on one y axis: if there are two measures with different units, stack them as separate panels sharing the time axis, each with its own scale and band.

Marks:
- Line chart: 1.8px #34373A straight-segment traces, no markers, no smoothing, no fills. Where a value leaves its normal band, overdraw that stretch only (clip at the limit) in 3.2px #F0A800. Put a 16px amber diamond with a 1px #26292C outline at the crossing point (priority number "2" inside in 9px 700), a dotted 1px #5F6367 drop line to the panel bottom and a tag box (canvas fill, 1.5px amber outline) reading "PAH-2104 HI 10:50" in 12px 700 plus "peak 173.7 bar at 11:10" in 12px 400, joined to the diamond by a 1.2px amber leader.
- Bar chart: flat #34373A bars on the canvas with no rounding, a #BFC1C3 band behind them showing the normal range, and any bar outside its range filled #F0A800 with the same diamond tag at its end. All other bars stay gray.

Avoid: any color on normal data, multiple hues for series (distinguish series by panel and label), gradients, shadows, 3D, glowing effects, a black or dark background, and a legend box.

When you're done, render the chart and check that amber appears only where a value is outside its normal band, the gray bands are visible behind the traces, the stated excursion duration matches the crossing times, and everything is readable at thumbnail size.