Chart Prompts

Restyle my chart in the "Climb Gradient" 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 climb profile page of a printed bike race guide. Bold, practical and instantly readable: a stepped ramp of warm color bands that tells a rider where it hurts before reading a single number.

Colors (use these exact values):
- Page: #F8F4EA (cream) for the whole canvas.
- Ink: #2B2B2B for the title, the profile edge, the baseline and the steepest band.
- Band scale, by value bin: #7FC7A0 (green, easiest), #F6D55C (yellow), #EE8434 (orange), #2B2B2B (near black, hardest). Text inside the three light bins is #2B2B2B; inside the near black bin it is #F8F4EA.
- Accent: #EE8434 for the 6 px title bar and the summit flag.
- Secondary text: #7A7263. Gridlines and legend dividers: #E3DCCB. Legend box fill: #FFFDF7.

Typography (Google Fonts):
- Fjalla One for the title (34px, #2B2B2B, stating the finding with a number), place names on the chart (16 to 18px) and the legend box header (15px, 1.5px letter-spacing, uppercase, cream on ink).
- Cabin for everything else: subtitle 15px #7A7263 naming measure, unit and what the shading means; axis labels 12 to 13px (x labels 600 in ink); values inside the bands 15px 700; legend stats 13px labels in #7A7263 with 14px 700 values right-aligned; small caps labels 10 to 11px 700 with 1.2px letter-spacing; source 12px italic.

Layout:
- Title at x 58 with a 6 x 58 px orange bar to its left spanning title and subtitle. Plot from x 88 to 896, baseline at y 486.
- A boxed legend at the top left inside the plot (232 x 140 px, 1.5px ink border, a 28px ink header strip with the climb's name), listing Summit, Length, Average and Maximum with 1px #E3DCCB dividers between rows.
- A gradient key along the bottom: "GRADIENT" in small caps, then 22 x 14 px swatches with their bin labels. Source bottom right.

Axes and grid:
- Horizontal gridlines 1px #E3DCCB with y labels at the left, the unit ("m") above the top label. No y-axis line.
- A 1.5px ink baseline with 6px ticks at every x step and bold labels 22px below; a short axis caption ("km from the foot") right-aligned under the axis.

Marks:
- Line chart: draw the line with straight segments in a 3px ink stroke (round joins), and cut the area below it into one slice per x step. Fill each slice by its bin color, separate slices with 1.5px cream verticals, and print each slice's value (for example "9.6%") centered 16px above the baseline. Add small value callouts above the line every few steps (a 14px #7A7263 tick and a 12px 600 number), an open circle (r 5, cream fill, 2.5px ink ring) at the start and a flag on a 1.5px pole at the end with the name and final value beside it. Mark the most extreme slice with a tiny "STEEPEST" caps label in yellow inside the black band.
- Bar chart: square-cornered columns packed edge to edge with 1.5px cream gaps, each filled by its value bin from the same four-color scale, with the value printed inside near the base (cream on the black bin). A 3px ink line across the column tops as a stepped outline, the same boxed legend and gradient key.

Avoid: smooth gradients between bins, drop shadows, rounded corners, more than four bins, pale text on the yellow or green bins, and 3D perspective.

When you're done, render the chart and check that every band's printed value matches its bin color, the legend box stats are arithmetically right (average = total gain / length), no callout touches a place name, and the flag and labels at the far end are not clipped.