Chart Prompts

Restyle my chart in the "Index Hit Ratio" 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 database engineer's postmortem page. Warm cream paper, a forest green keyline border, a small schema diagram in the corner, and amber tags pinned to the moments something changed. Editorial serif headline over technical monospace detail.

Colors (use these exact values):
- Page: #FDFBF6 cream. A 1.5px #166534 border inset 16px from every edge.
- Primary data mark: #166534 forest green; its area fill the same green at 7% opacity.
- Event tags and markers: #B45309 amber (tag fill, leader lines, marker rings, tag captions).
- Text: #1C2B22 for the title and strong labels, #6B7266 for secondary text. Gridlines: #E7E2D6. Schema box fill: #FFFFFF; header text on green: #FFFFFF with #CFE6D6 for the secondary header note.

Typography (Google Fonts):
- Fraunces 600, 34px, -0.5px letter-spacing, #1C2B22 for the title (stating the finding, two lines at a 40px leading). Fraunces 700 22px green for the final value label, 600 18px ink for the starting value label.
- Space Mono for everything else: eyebrow 11px 700 uppercase with 2px letter-spacing in green; subtitle 12px #6B7266; axis labels 11px; schema rows 11px (column names 700) with types 10px; tag text 10px 700 white with 0.6px letter-spacing; tag captions 10px amber; footer 10px.

Layout:
- 52px inner margins. Eyebrow at the top left, the two-line title under it, the subtitle below.
- Top right: a schema-diagram box 236px wide, 4px radius, 1.5px green stroke. A 30px green header row with the table name in 12px 700 white and the row count right-aligned; then 26px rows separated by 1px #E7E2D6 hairlines, each with a small line-drawn key icon (circle plus a toothed shaft, 1.4px stroke), the column name and its type right-aligned. The primary key icon is green; indexed columns get amber keys.
- A row of rounded amber tags sits in a band between the header and the plot (above the target line); the plot fills the lower half; footer with "Source: illustrative data" at the left and a monospace formula at the right.

Axes and grid:
- Horizontal gridlines 1px #E7E2D6; the bottom (floor) line 1.2px green. Y labels with a % suffix, right-aligned 12px left of the plot. Category labels (W1, W2 ...) centered under each band. No vertical gridlines, no axis lines.
- A target line in 1.5px green dots (dasharray 0.1 5, round caps) with a small uppercase label "TARGET 99%" in 10px 700 green just under its left end.

Marks:
- Line chart: a single thick 4px stepped line (step-after, miter joins) in green over a 7% green fill to the floor. Each step that corresponds to an event gets an amber marker: a 4.5px radius ring (2px amber stroke, cream fill) on the step corner, a 1px dashed (2 2) amber leader up to a pill tag (104 x 22, fully rounded, amber fill, white "CREATE INDEX") and a caption under the tag such as "on customer_id".
- Bar chart: square-cornered green bars (about 60% of the band) with a lighter 7% green track behind them; bars after an event keep the same green, and the event is marked with the same amber pill tag and dashed leader pinned above the first changed bar. The target is the same dotted green line.
- Label the first and last values directly in Fraunces instead of using a legend.

Avoid: more than one data color, smooth curves, drop shadows, gradients, rounded bars, a legend, and letting any tag overlap the line or another tag.

When you're done, render the chart and check that each tag's leader lands exactly on its step corner, the schema box columns match the tagged events, and the headline numbers match the first and last data points.