Chart Prompts

Restyle my chart in the "Order Cutoff" 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 clean fulfillment operations dashboard on peak day. Light gray canvas, a dark teal promise banner, one warm orange accent, and time-of-day deadlines that everything is measured against.

Colors (use these exact values):
- Page: #F4F4F5.
- Dark teal: #115E59 (banner, primary series, primary panel's axis labels, cutoff rule). Banner eyebrow text #99F6E4.
- Orange: #EA580C (cumulative series, cumulative panel's axis labels, result pill).
- Ink: #18181B. Secondary text #71717A. Gridlines #E4E4E7; the zero line #A1A1AA.

Typography (Google Fonts):
- Figtree throughout. Banner eyebrow 700, 13px, uppercase, 1.8px letter-spacing; banner promise 500, 18px white with the deadline in 800. Title 800, 26px ink, stating the result. Subtitle 400, 14px #71717A naming both measures and which panel each uses. Panel labels 600, 13px. Tick labels 500, 12px. Rule labels 800, 11px uppercase with 1.2px letter-spacing. Notes and footer 12px.

Layout:
- A full-width promise banner at the top: 880 x 52, 10px radius, #115E59, a white outline clock icon at left, the uppercase eyebrow ("SAME-DAY PROMISE"), then "Order by 2:00 PM, ships today", and at right a white 12%-opacity pill (28px tall, fully rounded) with the site and day in white caps.
- Title at y 122, subtitle at y 148.
- Two stacked panels sharing one time axis from x 88 to 872, each with its own single scale on the left (never a right-hand second axis): the per-interval panel from y 204 to 352 (0, 500, 1,000; labels in teal) and the cumulative panel from y 406 to 500 (0%, 50%, 100%; labels in orange). Each panel is introduced by a label 18px above it at x 72, led by a line glyph at x 40 (a stepped teal glyph, a curved orange glyph); no separate legend.
- Footer: source at left, a computed total at right.

Axes and grid:
- Horizontal 1px #E4E4E7 gridlines at each panel's three ticks; each zero line #A1A1AA. No vertical axis lines.
- Time labels every 2 hours ("6 AM", "12 PM"), 22px below the bottom panel only.
- The cutoff time as a 1.5px teal dashed rule (4 on, 3 off) in both panels; everything after it sits on a #E4E4E7 shade at 55% opacity in both panels, with a two-line note in the top panel ("2:00 PM CUTOFF" in teal caps, a 11px gray explanation).
- The carrier pickup as one solid 1.5px ink rule running through both panels and the gap between them, topped (on the panel label row) by a truck outline icon (box body, cab with a sloped front, two wheels; 1.8px ink stroke, page-colored fill) with an uppercase label to its left.

Marks:
- Line chart: the per-interval series as a stepped line (horizontal then vertical), 2.25px #115E59 with a 10% teal fill down to zero; the cumulative series as a smooth monotone 3.5px #EA580C line in its own panel below. Where the cumulative line meets the pickup rule: an r 6 orange dot with a 2.5px page-colored ring and an orange pill (6px radius) with the value in white 800.
- Bar chart: interval bars in #115E59 with no gaps between them (a histogram look) and 2px top rounding; the cumulative share as the same orange line in its own panel below; bars after the cutoff sit on the gray panel.
- Label the first notable spike directly in 12px 600 teal.

Avoid: dual axes (a second measure on a right-hand scale), gradients, shadows on marks, more than two series colors, dense gridlines, a boxed legend, and hiding the cutoff or pickup rules behind marks.

When you're done, render the chart and check that the two panels share the same time positions, each panel has one labeled scale, the pill value equals the curve's value at the pickup time, the banner text does not collide, and the truck icon sits directly on its rule.