Chart Prompts

Restyle my chart in the "Energy Label" 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 appliance energy-efficiency label turned into a chart. Bold, regulatory and instantly readable: a thick black frame, stepped arrow bars in a green-to-red class scale, and a black pointer on the product that matters.

Colors (use these exact values):
- Card: #FFFFFF. Frame, rules, pointer and main text: #111111. Secondary text: #555B61. Thin dividers: #C8CCD0.
- Class scale from best to worst, one per bar in order: #00A651 (A), #50B848 (B), #BDD62E (C), #FFE600 (D), #FCB814 (E), #F36F21 (F), #E3001B (G). With fewer categories, pick evenly from this ramp keeping both ends.

Typography (Google Fonts):
- Barlow Condensed 700 for the title (32px, stating the finding), the class letters on the bars (28px white with a 1.6px #111111 outline drawn behind the fill, paint-order stroke), the pointer letter (34px white) and data panel values (28px). 600 for the eyebrow (14px uppercase, 2px letter-spacing), panel keys (13px uppercase, 1.2px letter-spacing, #555B61) and small labels.
- Barlow for the subtitle (15px #555B61), category names next to bars (15px 500; the highlighted one 700) and values (15px, tabular figures, right-aligned; highlighted one 700 black, others #555B61).

Layout:
- A 5px #111111 frame with 12px corner radius, inset about 24px. Eyebrow at y 58, title at y 96, subtitle at y 122, then a 3px black rule across the frame at y 142.
- A QR-style placeholder (21 x 21 modules of 3.2px with three square finder patterns) in the top right corner inside the frame.
- Bars from x 56, one row per 40px starting at y 160. A 2px vertical black divider at x 780 separates the bars from the pointer column.
- A 3px black rule above a data panel: 4 to 5 cells with a small uppercase key over a big value, separated by 1px #C8CCD0 lines. Footer below with a 1px #C8CCD0 rule, the source at left in 12px and "Scale A to G" at right.

Axes and grid:
- No axes, ticks or gridlines. The arrow lengths are the scale (linear from zero); every bar carries its own value.

Marks:
- Bar chart: horizontal arrow bars 32px tall with a square left end and a pointed right end (the tip is a triangle half the bar height deep), ordered best to worst so they step out longer. The class letter sits inside the left end; the category name follows 12px after the tip; the value is right-aligned before the divider. The highlighted category gets a black pointer arrow in the right column (40px tall, pointing left at its row) with its class letter in white and "This model" under it.
- Line chart: draw the class scale as seven horizontal colored bands behind the plot (each at 18% opacity, lettered A to G in Barlow Condensed at the left edge), a 3px #111111 line with square joins over them, 5px black square markers, and the black pointer arrow at the right edge pointing at the latest value.

Avoid: gradients, shadows, soft pastel versions of the scale, thin frames, rounded bars, legends (the letters are the legend) and decorative icons.

When you're done, render the chart and check that the arrows step out in order, arrow length is proportional to the value, the pointer row matches the highlighted category, the class letters read on the yellow bar, and the percentage in the title is right.