Chart Prompts

Restyle my chart in the "Region Load" 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 live traffic board in a cloud platform's edge console. Deep navy-black, monospaced and engineered: bright blue load bars riding inside dim capacity tracks, with amber chips flagging whatever is running hot.

Colors (use these exact values):
- Background: #0E1320. Tiles: #131A2A with a 1px #222C42 border.
- Load (the measured value): #4C8DF6 (bright blue).
- Capacity track (the limit or target the value is measured against): #1C2640 fill with a 1px #2C3957 edge.
- Hot flag: #F2A93B (amber) chips with #0E1320 text.
- Ink #E4E9F2, secondary text #8792A8, faint labels and the 80% ticks #5B6680, vertical gridlines #172035, live dot #3DDC97.

Typography (Google Fonts):
- Space Mono (400 and 700) for everything.
- Eyebrow path 11px 700 uppercase in #4C8DF6 with 2px letter-spacing ("EDGE / TRAFFIC / REGIONS"); a live timestamp 11px #8792A8 right-aligned with a 3.5px green dot.
- Title 21px 700 with -0.6px letter-spacing, stating the finding as a count. Subtitle 13px #8792A8 with measure, unit and aggregation.
- Category labels 13px right-aligned, 700 #E4E9F2 for hot rows and 400 #8792A8 otherwise. Chip text 11.5px 700. Column headers 10px uppercase with 1px letter-spacing #5B6680. Values 12 to 12.5px.

Layout:
- 40px side margins. Eyebrow at the top, title and subtitle, then a row of three summary tiles (178 x 30px, 4px radius: key 10px faint at left, value 12px 700 right-aligned) and a compact legend (load swatch, capacity swatch, amber ">80" chip and "hot").
- Bars from a 136px left gutter to about 80% of the width; to the right two value columns: "LOAD / CAP" as "412/480" centered, and "UTIL" as a bold percent right-aligned (amber for hot rows).
- Rows about 31px apart, sorted by load descending. A one-line note under the axis explains the tick, and a footer rule with "Source: ..." left and the sort order right.

Axes and grid:
- Vertical gridlines only, 1px #172035, at round values with "100k" style labels in 11px #5B6680 under the plot; the zero line is #2C3957. No horizontal gridlines.

Marks:
- Bar chart: horizontal. Each row draws the capacity track first (16px tall, 3px radius) on the same zero-based scale as the load, then the load bar inset 2px top and bottom (12px tall, 2px radius) in #4C8DF6. A 1.5px #5B6680 tick extending 3px beyond the track marks 80% of that row's capacity. Rows above 80% get an amber pill chip (46 x 20px, 10px radius, 2px background-colored outline) starting 5px after the end of the load bar, showing the utilization.
- Line chart: a 2px #4C8DF6 line per series with a dim 6px #1C2640 band behind it showing capacity over time, a 1px dashed #5B6680 line at 80% of capacity, and an amber chip at any point above it.

Avoid: gradients, glows, rounded fat bars, light backgrounds, bars that do not start at zero, a chip on rows that are not above the threshold, and proportional fonts.

When you're done, render the chart and check that tracks and bars share one zero-based scale, chips never cover the end of their bar, the hot count in the title matches the number of chips, and the value columns line up.