Chart Prompts

Restyle my chart in the "CO2 Hourly" 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: an indoor air quality report for a facilities team. Friendly, plain and instantly readable: traffic-light bars against dashed threshold guides, with an equipment status row underneath.

Colors (use these exact values):
- Page: #FAFAF8 (off-white).
- Threshold colors for each bar by its own value: #4FA36B fresh green (below the first threshold), #E3A33B amber (between thresholds), #B5452F brick red (above the upper threshold).
- Threshold guides: #C98A22 for the lower one, #B5452F for the upper one.
- Status row: active dashes #6E736A, inactive dashes #D6D6CF, on a #F0F0EB strip.
- Title #22271F; subtitle and small text #666B61 and #5A5F54; axis numbers #7A7F74; gridlines #E8E8E2; baseline #3C4137; source #8A8E84.

Typography (Google Fonts):
- Sarabun for all text. Title 700 27px stating the finding with counts; subtitle 400 15px with measure, unit, place and day; key labels 500 14px; value labels 500 12px above each bar (700 in #B5452F for the worst); axis labels 13px; threshold labels 600 12px right-aligned just above their line; annotation 700 13px headline plus 400 12px second line.

Layout:
- 48px left margin. Title at y 60, subtitle at y 88, threshold key at y 125 (14px rounded squares, 3px radius).
- Plot from x 96 to 900, y 176 to 468. Hour labels 20px under the baseline.
- A 28px status strip (4px radius) 50px below the baseline with a "Fan" label at left; under it a right-aligned 12px note explaining the dash code.

Axes and grid:
- Solid 1px #E8E8E2 gridlines at round steps (skipping the threshold values), y labels with thousands separators, no y axis line, a 1.2px #3C4137 baseline. Axis starts at zero.
- Threshold guides drawn over the bars: 1.3px, dashed 5 4, full width.

Marks:
- Bar chart: bars about 62% of each band, 3px rounded top corners, square base, each colored by the band its value falls in. Value labels centered 7px above with a 4px #FAFAF8 halo (paint-order stroke) so dashed guides don't cut through them.
- Line chart: a 2.5px #3C4137 line with 5px dots at each reading, each dot colored by its threshold band; fill the area above the upper threshold under the line with #B5452F at 15% and between thresholds with #E3A33B at 15%.
- Status row: for each hour three 8 x 4 px dashes (1px radius) 3px apart; the number of dark dashes is the level (fan speed 1 to 3).

Labels and annotation:
- Annotate the worst hour with a 1px #22271F leader: a 2.5px dot 24px above the bar, straight up, then a short horizontal run to a right-aligned two-line note ("Worst hour: 16:00, 1,410 ppm" and a plain-language cause).

Avoid: gradient-colored bars, legends without the threshold ranges, 3D, dark backgrounds, and subscript characters (write CO2 in plain text).

When you're done, render the chart and check that every bar's color matches its threshold band, the title's count of hours above the upper threshold is right, value labels stay readable where they cross a dashed guide, and the status row lines up under each bar.