Chart Prompts

Restyle my chart in the "Easing Curves" 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: the graph editor of a modern animation tool. Clean light UI chrome, white panels on a pale gray desk, a frame ruler, a playhead and curves you feel you could grab and drag.

Colors (use these exact values):
- Page (the app background behind the panels): #F3F4F6.
- Panels: #FFFFFF with a 1px #E5E7EB border and 8px corner radius.
- Series, in order: #2563EB (blue), #EA580C (orange), #DB2777 (magenta). The highlighted or "selected" series is always the magenta one.
- Primary text, keyframes and the playhead: #111827. Secondary text: #6B7280.
- Grid: minor lines #E7E9ED, major lines #D5D9E0, reference lines (zero and target) #9CA3AF.
- Selected row tint in the channel list: #FCE7F3.

Typography (Google Fonts):
- Manrope throughout. Title 800, 25px, #111827, -0.3px letter-spacing, stating the finding. Subtitle 500, 14px, #6B7280, with measure and unit.
- Panel headers 700, 10.5px uppercase, 1.6px letter-spacing, #6B7280. Channel names 700, 14px. Channel values 700, 14px in the series color, right aligned. Small parameters 500, 11px #6B7280.
- Tick labels 600, 11px #6B7280. Direct labels 700, 12.5px in the series color. Reference line labels 700, 10px uppercase, 1.4px letter-spacing.

Layout:
- Title at top-left (48px margin), subtitle 28px below it.
- A channel list panel on the left (x 48 to 258, y 118 to 514) that doubles as the legend: header row "CHANNELS" with the current playhead frame ("F12") at right, a divider, a parent item with a small disclosure triangle, then one row per series with a 24px x 3px rounded color stroke, the series name, its value at the playhead on the right, and a small parameter line below. The selected series row sits on a #FCE7F3 rounded (6px) highlight. A footer row explains the symbols: a keyframe diamond and a handle (short line ending in a circle).
- The graph panel fills the rest (x 282 to 912). Its top 28px is a frame ruler strip divided from the plot by a 1px #E5E7EB line; its bottom 30px is a second axis strip (normalized time 0, 0.25, 0.50, 0.75, 1).
- Footer at y 556: "Source: ..." left, a small meta line right (fps, frame range, playhead frame), both 12px #6B7280.

Axes and grid:
- Vertical grid on every frame (0.7px #E7E9ED) with every 4th frame major (1px #D5D9E0). The ruler has 5px ticks per frame and 9px ticks with a number every 4th frame.
- Horizontal grid every 0.25 units, labels every 0.5 outside the panel's left edge, right aligned. The two reference lines (0 and 1 here, "GROUND" and "APEX") are 1px #9CA3AF and labeled in small caps just left of the playhead.
- Playhead: a 1.2px #111827 vertical line from the ruler to the bottom strip, topped by a 28 x 18 px #111827 tag (4px radius) with the frame number in white 700 11px.

Marks:
- Line chart: smooth curves, 2.4px, round caps; the selected series 3.2px and drawn on top. Where the data comes from key points (or on the first and last points of each series), draw tangent handles: 1px lines in the series color ending in 4.5px radius circles with a white fill and a 2px series-colored stroke. Keyframes are 16px #111827 diamonds with a 1.5px white outline. At the playhead, a 4px dot per series in the series color with a white 1.5px ring.
- Bar chart: treat bars as keyframe spans on the graph panel: square-ended bars 60% of the band in the three series colors at full strength, a #111827 diamond keyframe at each bar's top center, and a 1px handle line with a hollow circle extending 20px either side of the diamond. Keep the frame ruler and playhead; bars start at zero.

Labels and annotation:
- Direct labels beside each unselected curve in its color. Callouts for notable points on the selected series use a dashed (3 on, 2 off) 1.2px magenta drop line from the reference line to the point, a 2.5px dot, a 0.8px leader to a 12.5px 700 magenta label placed in open space (e.g. "9% overshoot past apex").

Avoid: shadows, gradients, heavy outlines, dark mode, more than three hues, and labels that sit on top of handle lines.

When you're done, render the chart and check that the handles, diamonds and playhead read clearly at thumbnail size, the playhead values in the channel list match the dots on the curves, and no callout text crosses a curve or handle.