Chart Prompts

Restyle my chart in the "Gate Utilization" 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 airport stand-planning gate chart printed for the morning briefing. Warm paper, tight rows, bold uppercase group headers and a single blue ramp that makes the busiest items read darkest.

Colors (use these exact values):
- Page: #FBFAF7 (warm white).
- Sequential ramp from #BFDBFE (low) to #1E40AF (high), interpolated linearly in RGB; map the value range (here 7 to 18 hours) onto it and clamp outside.
- Plan ink #1B2230: title, group headers and their rules, category labels, the target line, and the dark average tags. Secondary text #5E6573. Gridlines and the footer rule #E4E0D6.

Typography (Google Fonts):
- Titillium Web throughout. Title 700 29px ink, stating the finding with values computed from the data. Subtitle 400 15.5px #5E6573. Group headers 700 14px uppercase with 2.4px letter-spacing ("PIER A"). Category labels 600 13px right-aligned. Value labels 12.5px, 700 ink when at or above target, 400 #5E6573 below it. Small legend and tag labels 700 11px uppercase with 0.8 to 1.6px letter-spacing. Axis numbers 400 12px. Footer 12px.

Layout:
- 56px margins. Title baseline 64px, subtitle 92px, legend row at 128px: "UTILIZATION", then "7 h", a 150 x 12 px ramp swatch, "18 h", then a 1.2px vertical ink tick and "TARGET 14 H".
- Rows start around y 148: each group gets a 26px header row (label at left, a 1.2px ink rule from x 128 to the plot's right edge at 830, and a dark tag on the right: a 74 x 18 px #1B2230 box with 2px radius holding "AVG 13.1 H" in white) followed by 16px item rows and a 4px gap after the group.
- Bars start at x 132; the value axis runs 0 to 20 across to x 830. Footer rule at 556px, source left and a context note right at 577px.

Axes and grid:
- Vertical 1px #E4E0D6 gridlines every 4 units from below the first header to the last row; numbers below the last row, the last one with its unit ("20 h"). No axis lines, no horizontal gridlines.

Marks:
- Bar chart: horizontal bars 10.5px tall, square at the baseline with a 2px radius at the value end, each filled with its ramp color. Value labels 7px past the bar end with a 4px #FBFAF7 knockout stroke (paint-order stroke). When a below-target bar ends so close to the target that its label would straddle the line, start that label 6px past the target line instead, so the line never runs through a numeral.
- Line chart: one 2.5px line per group in the ramp color of that group's average, direct-labeled at the end with the group name in 700 uppercase; small group header rules above the plot become a legend.
- Target: a thin 1.2px #1B2230 vertical line (horizontal for a line chart) through the whole plot.

Avoid: categorical colors, gradients inside bars, shadows, thick borders, a legend box, and headers in title case.

When you're done, render the chart and check that the darkest bars are the largest values, every group average and count in the title and subtitle is arithmetically right, and no value label is crossed by the target line.