Chart Prompts

Restyle my chart in the "SCADA Trend" 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 control room HMI screen at the end of a night shift. Flat dark gray panels, thin bright trend pens, an alarm banner and a tag table with live values: functional, calm and unmistakably industrial.

Colors (use these exact values):
- Screen: #2B2F33. Panels (trend area, tag table, value boxes' surround): #1F2327 with 1px #454C53 borders. Value boxes: #111417.
- Grid: #3A4046, 1px, both directions.
- Pens: #00D1FF (cyan), #F5D400 (yellow), #FF4FD8 (magenta), each 1.6px.
- Alarm: #FF3B30 for the banner, the high limit, the event marker, the alarm window tint (8% opacity) and the alarmed tag row (14% tint, 1px border).
- Labels #C9CFD6; dim text #8A939C; headline #EEF1F4.

Typography (Google Fonts):
- Roboto Mono for every tag, value and axis: banner 500 to 700 13px white; panel captions 500 11px; axis ticks 11px #8A939C; tag names 700 15px in their pen color; live values 500 20px white, right-aligned; clock 500 15px.
- Roboto for words: headline 500 20px stating the finding; subtitle 13px #8A939C; tag descriptions 12px; soft keys 500 13px uppercase with 1px letter-spacing.

Layout:
- A 34px red alarm banner across the top: "HI ALARM", the tag, description and value vs limit on the left; alarm, return-to-normal and acknowledge times on the right.
- Headline and subtitle below the banner at x 24. The trend panel takes the left two thirds (plot x 64 to 668), with a caption line "TREND 04 / ..." and "SPAN 8 H" above the plot.
- A tag table panel on the right (about 240px wide): header row "TAG" / "PV °C", then one row per pen with a 6 x 40px color chip, tag, description and status, and a dark value box. Below a divider, setpoint and alarm parameters as key/value rows (the high alarm value in red).
- A row of six flat beveled soft keys along the bottom (132 x 34px, #3A3F45, 1.5px light bevel #5A6168 top-left and dark #15181B bottom-right); the active one #3F6B80 with a #6FA3BA bevel. A mono clock at the far right and operator/source lines under the keys.

Axes and grid:
- Full grid inside the plot: horizontal every 1 unit, vertical every hour. Tick labels outside: values with one decimal on the left, 24-hour times under the plot.

Marks:
- Line chart: straight-segment pens at 1.6px, no smoothing, no markers, no area fill. The high limit is a 1.5px red dashed rule (8 on, 5 off) labeled "HI LIMIT 7.0" on a small panel-colored backing. Where a pen crosses the limit, drop a 1px red vertical line through the plot, a red diamond (9px half-diagonal, 1.2px white stroke) on the limit, tint the time window above the limit, and add a boxed red event label ("ALM 04:22 TT-102" plus peak value and time).
- Bar chart: flat 1px-bordered bars in the pen colors on the same grid (one color per tag, no gradients), with the alarm limit as the dashed red rule and any bar over it outlined in red with the diamond marker at its top.

Avoid: glow, gradients, rounded corners, smoothing, 3D bevels beyond the soft keys, and any decoration that isn't found on a real operator screen.

When you're done, render the chart and check that the alarm times, peak and duration in the banner, headline and event label all agree with the data, each tag's live value equals its pen's last point, and the table colors match the pens.