Chart Prompts

Restyle my chart in the "Zone Temps" 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 building management system screen. Clean white workspace inside blue-gray app chrome, calm muted series, and one thing that is out of range shouting in orange with an alert chip. Operational, not decorative.

Colors (use these exact values):
- Canvas: #FFFFFF. App bar and the active selector button: #33414F. Selector strip fill: #EEF2F6 with button borders #D3DBE3.
- Target or acceptable range band: #E4F3E4 fill with 1px #A9D5AC edges; its label #4E9A58.
- Ordinary series (muted, thin): #3F6FB8 blue, #2AA391 teal, #9A4F92 plum.
- The out-of-range series and its alert chip: #E0752D orange.
- Setpoint or target line: #1A1A1A dashed.
- Title #1D2733; subtitle #5F6E7E; axis labels #6B7A8A; gridlines #E6EAEF; baseline #9AA8B6; footer text #7C8A98.

Typography (Google Fonts):
- Hind for everything. Title 600 27px stating the finding; subtitle 400 16px with measure, unit and period; app bar 600 15px white plus a 400 14px #9FB0C2 breadcrumb; axis labels 13px; strip label "FLOOR" 600 12px uppercase with 1.5px letter-spacing; legend 500 13px; end labels 500 13px in series color (600 for the alert series) with values 13px #5F6E7E.

Layout:
- A 44px app bar across the top (#33414F) with a small square logo mark, site name, breadcrumb, and a right-aligned date with a 3.5px green #5CC98A live dot.
- Title at y 88 and subtitle at y 114, 32px left margin.
- A 42px-tall rounded (6px) selector strip under the subtitle: a "FLOOR" label, then 34 x 28 buttons (4px radius) for neighboring floors or segments, the current one filled #33414F with white text; the legend sits in the same strip to the right.
- Plot from x 84 to 800, y 214 to 510; right margin holds direct end labels with short #B7C2CD leader lines, dodged at least 17px apart.
- A 1px #E1E6EC footer rule with the source on the left and a sensor status note on the right.

Axes and grid:
- No axis lines except a 1px #9AA8B6 baseline with 5px ticks; 1px #E6EAEF horizontal gridlines at every unit; y labels like "24°" right-aligned 12px left of the plot; time labels "09:00" every three hours.

Marks:
- Line chart: monotone smooth lines, 1.8px for ordinary series with round caps, the out-of-range series 3.6px orange drawn last. Shade the part of the alert series that leaves the band with #E0752D at 12% opacity. Setpoint as a 1.5px #1A1A1A line dashed 6 4 with a 12px 500 label just above its left end. Dots at line ends (r 2.8, r 3.8 for the alert series).
- Bar chart: slim bars (about 55% of the band) in the muted series colors with 2px top corners; bars outside the acceptable range in #E0752D; the band still drawn behind as #E4F3E4, the setpoint as the dashed #1A1A1A rule.

Labels and annotation:
- Mark the peak of the out-of-range series with a white circle (r 6) ringed 3px #E0752D, and attach an alert chip: a 206 x 46 #E0752D rounded rectangle (8px radius) with a white exclamation disc, a 600 14px white headline ("7-East 26.1°C at 15:00") and a 12px #FFE9DA second line saying how long it was out of range.
- Label the band inside its top-left corner: "COMFORT BAND 21–24°C", 600 11px, 1.2px letter-spacing.

Avoid: dark mode, gradients, drop shadows, thick lines for normal series, more than one alert color, and a legend without the direct end labels.

When you're done, render the chart and check that the title's count of out-of-range hours matches the data, the end labels don't collide, the alert chip doesn't cover the line, and the live dot does not overlap the date text.