Chart Prompts

Restyle my chart in the "Thermostat Log" 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 history screen of a warm, friendly smart thermostat. Rounded type, soft paper tones, a single ember orange accent and small pill tags, like a well-made household device app.

Colors (use these exact values):
- Background: #FBF7F2 warm off-white for the whole canvas, no card.
- Target or schedule series (for example the setpoint): #2E2B28 charcoal.
- Main measured series (for example indoor temperature): #E8702A ember orange.
- Context series (for example outdoor temperature): #9C958C warm gray.
- Activity bands (for example heating on): #F9D2B1 pale orange, with #F0B585 outlines in the bottom strip; flame icon #E8702A with a #FFD9A8 inner flame.
- Text #2E2B28, secondary #77706A, axis labels #A39B92, gridlines #EDE6DC, baseline #D8CEC1, strip track #F3ECE3, tag border #E4DACD.

Typography (Google Fonts):
- Varela Round for everything (it has a single 400 weight; build hierarchy with size and color only).
- Title 24px #2E2B28 stating the finding; subtitle 14px #77706A with measures, unit, interval and place.
- Legend 13px; tags 12.5px; axis labels 12.5px #A39B92; annotations 12px #77706A; source 11.5px #A39B92.

Layout:
- 60px left margin. Title at y 64, subtitle at y 92, a single horizontal legend row at y 124 (setpoint shown as a tiny step glyph, indoor as a 3.5px orange stroke, outdoor as a dotted stroke, heating as a 22 x 14 pill).
- Plot from x 76 to 900 and about y 170 to 464. Directly below the baseline, a 16px tall rounded activity strip (8px radius) across the plot width, labeled "Heat" in 11.5px #C0602A to its left. X labels 44px below the strip.

Axes and grid:
- Horizontal gridlines every 5 degrees, 1px #EDE6DC; 1.4px #D8CEC1 baseline. Y labels "20°" 12px left of the plot. No axis lines, no ticks.
- X labels every 3 hours ("12 AM", "3 AM"...).

Marks:
- Line chart: the schedule is a 2.4px charcoal stepped line with square steps. The main measure is a smooth 3.2px orange line (monotone curve) over a 7px background-colored halo. The context measure is a dotted 2.6px gray line (round caps, dasharray 0.1 6). Each activity period is a pale orange rounded bar in the bottom strip plus a very faint full-height tint (#F9D2B1 at 28% opacity) behind the plot; a small flame icon inside a white circle (r 9.5, #F0B585 ring) sits at the start of each period.
- Bar chart: rounded-top bars (6px radius) in #E8702A for the main measure with #F9D2B1 bars for secondary values; target values as short 2.4px charcoal horizontal ticks across each bar; the same bottom activity strip and flames where relevant.

Labels and annotation:
- Schedule names sit in pill tags (24px tall, 12px radius, white fill, 1px #E4DACD border; the "Away" tag filled #F1ECE5) with the name and value ("Home 21°"). Put a tag above its step when the measured line runs below it, and below the step when the line runs above it, so no tag covers the line. Keep tags inside the plot width.
- Label the context series' low and high in 12px #77706A beside the dotted curve.

Avoid: bold weights, cold blues, gradients, drop shadows, heavy gridlines, and more than one saturated color.

When you're done, render the chart and check that no tag overlaps the orange line, the flames line up with the starts of the bands, the dotted line reads as dots at thumbnail size, and the title's duration matches the summed band lengths.