Chart Prompts

Restyle my chart in the "Streak Calendar" 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 progress screen of a friendly language-learning app. Bright, rounded and encouraging, but tidy enough for a product report: one lime data color, one orange celebration color, lots of white.

Colors (use these exact values):
- Background: #FFFFFF across the whole canvas, no card.
- Primary data: #65A30D (lime) for lines, bars and the darkest calendar cells; area wash under it #ECFCCB.
- Celebration accent: #F97316 (flame orange) for milestone pills, milestone dots and the streak badge flame and label. Badge fill #FFF7ED with a 1.5px #FED7AA border.
- Gaps and missed periods: #A1A1AA dots; empty calendar cells #F4F4F5 with a 1px #D4D4D8 stroke.
- Calendar ramp from light to dark: #D9F99D, #BEF264, #A3E635, #84CC16, #65A30D.
- Ink: #1F2A1A for the title and legend text; secondary text #71717A; faint grid #EEEEF1; baseline #D4D4D8.

Typography (Google Fonts):
- Baloo 2 700, 38px, #1F2A1A for the title, sentence case, stating the finding. Baloo 2 800, 40px for the big badge number.
- Nunito for everything else: subtitle 600 16px #71717A; axis labels 700 13px (#A1A1AA for values, #71717A for dates); a small axis caption "LESSONS" 800 11px with 1.6px letter-spacing; pill text 800 13px white; legend 700 14px ink; source 600 12px #A1A1AA and a right-aligned summary 700 12px #71717A.

Layout:
- 48px side margins. Title baseline at 66, subtitle at 96, top left.
- Top right: a streak badge, a 222 x 74 rounded rectangle (radius 22) holding a flame outline icon (2px orange stroke, round joins, with a small inner flame), the current value in Baloo 2 800 40px and a two-line label ("day streak" Nunito 800 15px orange, then a 12px muted line).
- Plot from x 96 to 912, y 176 to 408. Directly under the plot, a calendar strip: one 7.6 x 18px cell (radius 2.5) per period, aligned to the x positions, shaded by value. Period labels ("Day 15") 26px below the strip.
- A single-row legend at y 516, a 1.5px #EEEEF1 rule at 548, source and summary at 576.

Axes and grid:
- No axis lines except a 1.5px #D4D4D8 baseline. Gridlines at a few round values, 1.5px #EEEEF1 dotted (1 on, 6 off, round caps). Value labels right-aligned 14px left of the plot.

Marks:
- Line chart: a stepped (step-after) line, 3px #65A30D with round joins, split into runs. Each run rises from the baseline, steps through its values and drops back to the baseline, with a #ECFCCB fill beneath. A missing or zero period breaks the line: leave the gap, knock a 5px white break into the baseline and put a 3px #A1A1AA dot in the middle of it. Milestones get a 5.5px white dot with a 3px orange ring on the line, a 1.5px orange dotted stem (2 on, 3 off) up to an orange pill (24px tall, fully rounded) above the plot at y 134, clamped inside the plot's width.
- Bar chart: rounded-top lime bars (radius 6) about 60% of the band, zero values drawn as a gray dot on the baseline instead of a bar; highlight milestone bars with an orange pill above and a 3px orange outline. Keep the calendar strip underneath when the x axis is time.

Labels and annotation:
- Legend items: a tiny stepped-line glyph for the series, a gray dot for gaps, an orange pill for milestones, three calendar cells for the shading ramp.

Avoid: gradients, drop shadows, cartoon mascots, confetti, more than two accent colors, heavy gridlines, and smoothing the stepped line.

When you're done, render the chart and check that the badge number equals the current unbroken run, every gap has its gray dot, the pills sit inside the canvas without touching each other, and the calendar cells line up exactly under their periods.