Chart Prompts

Restyle my chart in the "Abandoned Calls" 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 lighter version of a call-center wallboard. Calm blue-gray page, white rounded cards, one big headline percentage, soft blue volume with bright orange trouble on top, and a thin black rate line against a target in its own panel above the bars.

Colors (use these exact values):
- Page: #F1F5F9. Cards: #FFFFFF with a 1px #E2E8F0 border and 10px radius.
- Main segment (answered): #93C5FD (soft blue). Problem segment (abandoned): #F97316 (bright orange).
- Rate line, target line, KPI accent bar and strong text: #0F172A (near black).
- Secondary text: #64748B. Gridlines: #E2E8F0.

Typography (Google Fonts):
- Red Hat Display for the KPI numeral (800, 60px, -2px letter-spacing) and the title (700, 30px, -0.5px letter-spacing, two lines, stating the finding).
- Red Hat Text for everything else: eyebrow and small caps labels 11px 700 with 1.6px letter-spacing (eyebrow in orange), subtitle 14px, legend 13px 500, axis labels 12px, panel titles 10px 700 caps with 1.2px letter-spacing, day labels 11px 500 caps over a 12px date, footer 12px.

Layout:
- Top left, a KPI card (x 40, y 32, 236 x 132) with a 6px near-black left accent bar: small caps label, the headline percentage, and a 13px note ("467 of 6,668 calls abandoned").
- Title block to the right starting at x 304: eyebrow at y 56, two title lines at y 92 and y 126, subtitle at y 154.
- A chart card from y 184 to 540 spanning 40 to 920, legend row inside its top edge, then two panels on one shared day axis from x 104 to 852: the rate panel from y 256 to 332 and the volume panel from y 386 to 486, about 54px apart. Panel titles ("ANSWER RATE", "CALLS") sit 16px above each panel at x 64.
- Footer outside the card at y 572: formula note left, caps tag right.

Axes and grid:
- Never a right-hand second axis. Each panel has its own left axis, labels right-aligned 10px from the plot: the rate panel 80%, 90%, 100%; the volume panel 0, 200, 400, 600 (counts start at zero). 1px #E2E8F0 horizontal gridlines only.
- A 1px near-black baseline. A dashed 1px #E2E8F0 divider between weeks running through both panels.
- Target: a 1px near-black dashed line (5 on, 4 off) at 90% in the rate panel, labelled with a near-black pill (80 x 17, 3px radius) reading "TARGET 90%" in white 10px 700, placed at the left end just below the line.

Marks:
- Bar chart: 30px stacked bars; the blue answered segment square at the base, the orange abandoned segment on top with 3px rounded top corners and a 1.5px white gap between them.
- Rate line (upper panel): 1.6px near-black straight segments over a 5px white halo, 3px hollow circle markers (white fill, 1.4px stroke). Points below target become 4.5px orange-filled circles with the value (e.g. "89.0%") in 12px 700 below the point on a white halo, and their day labels turn orange and bold.
- Line chart: draw the main measure as a 2.5px #93C5FD line with a 20% #93C5FD area fill, the problem measure as a 2px #F97316 line, and keep the thin near-black rate line and target in their own upper panel exactly as above.

Avoid: dual axes (the rate never overlays the bars), gradients, shadows, 3D, more than one accent color, and labelling every rate point (only the misses).

When you're done, render the chart and check that the headline percentage and the count of below-target days match the data, the target pill does not touch the rate line, and miss labels stay inside the rate panel, clear of its bottom gridline.