Chart Prompts

Restyle my chart in the "Phonics Primer" 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 early-reader workbook page. The gridlines are handwriting-practice rulings, so the chart feels like it was written on primer paper, but the data stays crisp and precise.

Colors (use these exact values):
- Paper: #FFFFFF. Hole punches #F1F3F6 with a 1px #DDE2EA edge. Left margin rule: 1.6px #F2B8C6 at x 70, full height.
- Main series: #2F4A6D (slate navy). Target or reference line: #8C8C88 (pencil gray). Additional series, if any: #D9785F then #4F8F6A, both with direct labels.
- Rulings: solid lines #A9C8E8 (pale blue), dashed midlines #F08A76 (coral). Alternate ruling bands tinted #F3F8FD.
- Title ink #23324A. Secondary text #6B7385. Note tab fill #FFF3EF with #F08A76 edge and #B4503C text.

Typography (Google Fonts):
- Edu VIC WA NT Beginner (a school print hand) for the title (700, 34px, #23324A, stating the finding), annotations (600 to 700, 17 to 20px) and the folio (14px).
- Lexend for the subtitle (14px #6B7385), tick labels (13px #6B7385), value labels (600, 14px, #2F4A6D), and the source line (12px).

Layout:
- Three hole punches (r 9) at x 26, y 150, 300 and 450, then the pink margin rule at x 70. All content starts at x 100.
- Title baseline y 70, subtitle baseline y 102. Plot from x 150 to 890, y 160 to 486.
- Footer: a 1px #E6EBF2 rule at y 548 from x 100 to 890, "Source: illustrative data" at the left and a handwritten folio like "Reading fluency check · page 12" at the right.

Axes and grid:
- The gridlines are the rulings. Labeled ticks (every 20 units in the example) are solid #A9C8E8 lines, 1.6px (2.4px for the bottom line); halfway between each pair runs a 1.3px #F08A76 dashed midline (dasharray 7 6). Rulings extend 36px left and 20px right of the plot.
- Every other ruling pair (bottom one first) gets a #F3F8FD band so the page reads as writing rows.
- Y labels in Lexend 13px, right-aligned 48px left of the plot, only on the solid lines. X labels like "Wk 1" centered 28px below the plot.

Marks:
- Line chart: a 3.5px #2F4A6D line with straight segments and round joins. Open circle markers r 6.5, white fill, 3px navy stroke. The point that first meets the goal is filled navy (r 8). Value labels 16px above each point (below the point if a note would collide).
- Target: a flat 2.4px #8C8C88 line, dasharray 3 6, round caps, labeled at the left with a white pill (height 26, radius 13, 1.4px #8C8C88 edge) reading "Goal: 60 words" in the handwriting font.
- Bar chart: slate-navy bars about 45% of the band width with 4px rounded tops, white 2px gaps, starting at zero on the bottom ruling; the bar that first meets the goal gets a 3px #2F4A6D outline on a #FFFFFF fill with diagonal navy hatching so it stands out. Value labels in Lexend 600 above each bar.

Labels and annotation:
- One milestone note in a rounded tab (radius 12, fill #FFF3EF, 1.6px #F08A76 edge): a handwritten 18px headline such as "Week 6: new sounds" in #B4503C and a 12px Lexend line under it, joined to its point by a dotted coral leader.
- A short handwritten "Goal met!" (20px, navy) with a thin curved arrow (1.6px, round caps, small open arrowhead) pointing at the first point on or above the goal.

Avoid: cartoon mascots, stars and stickers everywhere, bright primary colors, a legend box, heavy axes, and more than two handwritten notes.

When you're done, render the chart and check that rulings alternate solid blue and dashed coral correctly, tick labels appear only on the solid lines, the handwriting font actually loaded, and the "goal met" point is the first one at or above the target.