Chart Prompts

Restyle my chart in the "Cafe Rush" 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 end-of-day report on a cafe's point-of-sale tablet. Dark mocha, crema-colored bars, one cherry-red peak, friendly pill tabs and an elegant display serif headline.

Colors (use these exact values):
- Background: #2A1D17 (dark mocha). Unselected tab fill: #34251E with a 1px #46342A stroke.
- Bars: vertical gradient from #E8C9A0 (top) to #B98552 (bottom). Highlighted bar: gradient from #CF4B48 to #B83A3A (cherry red); the callout pill is solid #B83A3A.
- Headline, selected tab and callout text: #F5EBDD. Secondary text: #A8907C. Gridlines: #46342A. Bar value labels: #E8C9A0.

Typography (Google Fonts):
- Gloock 400 for the headline (38px, #F5EBDD, sentence case, stating the finding) and the KPI numeral (46px, right aligned).
- Outfit for everything else: eyebrow 600 12px uppercase with 2.6px letter-spacing; subtitle 16px #A8907C; tab labels 14px (700 #2A1D17 on the selected tab, 500 #A8907C otherwise); axis labels 13 to 14px; bar values 500 13px; callout 700 16px in the pill and 500 14px beside it; average label 600 12px; footer 12px and uppercase 11px with 2px letter-spacing.

Layout:
- 48px side margins. Eyebrow at y 50, headline at y 96, subtitle at y 124; KPI numeral and its caption ("transactions today") right aligned at the top.
- A row of pill tabs at y 150: 58 x 30px, 15px radius, 8px apart, one selected (solid #F5EBDD).
- Plot from x 88 to 912 and y 222 to 510.
- Footer at y 572: source left, uppercase note right.

Axes and grid:
- 1px #46342A horizontal gridlines at 5 round steps, labels 14px left of the plot in #A8907C. A 1px #A8907C baseline. No y axis line.
- Category labels 24px below the baseline, compact ("10a", "12p"); the highlighted category in 700 #F5EBDD.
- A reference line for the average: 1.6px #F5EBDD, dash 1 5, round caps, full width, with its label ("Weekly avg 41/hr") on a small #2A1D17 knockout pill near the right end.

Marks:
- Bar chart: 44px bars with 12px rounded tops (square at the baseline) filled with the crema gradient; values 9px above each bar. The single maximum is cherry red, with its value in a 64 x 26px cherry pill 10px above, a small downward pointer triangle, and a one-line note to the right ("Peak hour, 2.7× the weekly average").
- Line chart: a 3px #E8C9A0 line with round joins and a soft area below it using the same gradient at 25% opacity, small 4px dots, the peak point as a 7px cherry dot with the same pill callout, and the dotted average line.

Avoid: more than one red mark, drop shadows, 3D, harsh white, sharp-cornered bars, dense gridlines, and a legend.

When you're done, render the chart and check that the selected tab matches the data shown, the peak callout does not collide with neighboring value labels, the multiple in the callout equals peak divided by average, and the KPI equals the sum of the bars.