Chart Prompts

Restyle my chart in the "Bento Grid" 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 modern product launch page laid out as a bento box. Calm off-white page, an asymmetric mosaic of rounded tiles, charcoal ink, one saturated lime tile that carries the key number.

Colors (use these exact values):
- Page: #F5F5F2. Tiles: #FFFFFF, one pale sand tile #EDE6D6 and exactly one lime tile #D4F25A.
- Ink and the lead series: #1C1C1A (charcoal). Secondary text: #6B6A63. Gridlines: #E6E4DC.
- Other series: #5A6CF0 (periwinkle blue) and #F0823C (tangerine). Tangerine text labels use the darker #C45A17 for contrast; a negative delta uses #B4471A.

Typography (Google Fonts):
- Inter Tight for everything numeric and every label: eyebrow 11.5px 600 uppercase with 1.6px letter-spacing in #6B6A63; headline 32px 700 with -0.8px letter-spacing; tile headings 14px 600; axis labels 12px 500 with tabular figures; the KPI numeral 104px 700 with -5px letter-spacing.
- Instrument Serif italic 400 at 40px for exactly one expressive word in the headline (for example "doubled"), set inline after the sans words with a 4px gap.

Layout:
- 24px outer margin, 12px gutters, every tile 24px corner radius with a barely-there shadow (0 1px 0.6px at 5% and 0 6px 10px at 4% charcoal).
- Left column 612px wide: a short title tile (118px tall: eyebrow, headline, subtitle with measure and unit) above a tall chart tile.
- Right column: the lime KPI tile on top (about 238px tall), a sand tile beneath it with the other series' final values and delta chips, and a white tile at the bottom with the legend and the source line.
- The lime tile: an uppercase eyebrow naming the lead series and period, a 24px charcoal circle with a lime arrow in the top-right corner, the huge KPI numeral, a one-line explanation, then a charcoal pill (28px tall, fully rounded) with the change in lime 12.5px 700.
- Delta chips: white pills 64 x 26px, 13px radius, 12.5px 700 text.

Axes and grid:
- No axis lines. Horizontal gridlines 1px #E6E4DC dashed (2 on, 4 off, round caps). The reference level (100 for an index) is a solid 1.2px charcoal line at 55% opacity with its label bold.
- Y labels right-aligned 14px left of the plot; three or four x labels only, first left-aligned and last right-aligned.
- A small "26 weeks" style range pill (page color fill, fully rounded) in the chart tile's top right.

Marks:
- Line chart: monotone smooth lines, lead series 3px charcoal, others 2.5px, round caps and joins, drawn so the lead series sits on top. End dots: the lead gets a 9px lime disc with a 2px charcoal ring and a 3px charcoal center; others a 5px dot with a 2px white ring. Direct labels right of the end: name in 12px 600 in the series color, final value in 14px 700 charcoal below it.
- Bar chart: rounded-top columns (8px radius) in charcoal for the lead category and #5A6CF0 / #F0823C for others, 12px gaps, value labels 13px 700 above each bar; the lime tile still holds the headline figure.

Avoid: gradients, heavy shadows, borders on tiles, more than one lime tile, and letting any tile touch another (keep the 12px gutter).

When you're done, render the chart and check that the tile edges line up on a shared grid, the KPI and deltas are arithmetically right, and the serif word sits on the same baseline as the sans headline.