Chart Prompts

Restyle my chart in the "Lip Sync" 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 audio track view of an animation tool while an animator keys a lip sync pass. Near-black UI, one soft lilac signal, small key tags riding along a frame ruler.

Colors (use these exact values):
- Background: #0E0E12. Track panel: #16161D with a 1px #26262F border and 8px radius.
- Signal: #C4B5FD (pale lilac) for the line, its glow, its area fill and the waveform texture.
- Tags: fill #2A2542, 1px #C4B5FD border, letter #EDE9FE. Clips (category spans): fill #221F33, 1px #3B3558 border.
- Text: primary #ECECF1, secondary #8E8CA0. Minor ruler ticks #4A4858. Time markers on the ruler ("1s", "2s"): #FBBF24.

Typography (Google Fonts):
- Rubik throughout. Title 600, 26px #ECECF1, stating the finding. Subtitle 400, 14px #8E8CA0 with measure and unit.
- Ruler numbers 500, 11px #8E8CA0; second markers 600, 11px amber; row captions ("FR", "DIAL") 600, 10px uppercase with 1px letter-spacing.
- Tag letters 700, 12px. Clip labels 500, 13.5px #ECECF1. Tick labels 11px #8E8CA0. Annotations 500, 12px lilac.

Layout:
- Title at y 52, subtitle at y 78, left margin 40.
- One track panel from y 100 to 522 (x 24 to 936) holding, top to bottom: a frame ruler (divider line at y 138), a row of key tags (y 150 to 170), the plot (y 184 to 430, x 76 to 900), a row of clips (y 450, 26px tall) and a symbol key row (y 497).
- Footer at y 562: "Source: ..." left, a production slug right, both 12px #8E8CA0.

Axes and grid:
- The x axis is the frame ruler at the top: ticks every unit (3px), every 6 (6px) and every 12 (10px, labeled just right of the tick), with amber second markers ("1s") right aligned before every 24th frame.
- Only two dashed (3 on, 4 off) #26262F gridlines at 0.5 and 1.0, labels right aligned at x 66. A solid #4A4858 baseline.
- Each key event gets a 20 x 20 px tag (4px radius) in the tag row and a faint dashed (2 on, 3 off) lilac guide at 22% opacity down through the plot.

Marks:
- Line chart: a smooth monotone 2.4px lilac line over a vertical gradient area (20% to 0% lilac), with a 5px glow copy at 35% opacity blurred by 4. Under it, a faint texture of thin vertical strokes (1.2px, lilac at 22%) whose heights jitter between 35% and 100% of the line, like a waveform. The peak gets a hollow 4.5px dot (2px lilac ring, background fill) and a small label on a panel-colored backing so the gridline does not run through it.
- Bar chart: bars as clips: rounded (5px) #221F33 blocks with #3B3558 borders whose heights start at zero, a 2.4px lilac cap line on each top with the same soft glow, value labels in 12px lilac above; keep the ruler, tags and guides.
- Categories that span time (words, takes, shots) sit in the clip row as rounded blocks with centered labels; gaps get an italic 11px #8E8CA0 note.

Avoid: bright fills, more than one signal color, a white background, heavy gridlines, and tags that overlap (keep at least 4px between them).

When you're done, render the chart and check that every tag sits exactly above its guide, tags never touch each other, the glow is not clipped, the peak label is readable and the count in the title matches the number of tags.