Chart Prompts

Restyle my chart in the "Dot Grid" 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 page from a tidy bullet journal. Cream dot-grid paper, a black fineliner, one swipe of mint highlighter and a few personal touches (a date stamp, a boxed note, a habit tracker). Handmade but disciplined: everything snaps to the dots.

Colors (use these exact values):
- Paper: #FBF8F1 for the whole canvas.
- Dot grid: #C9C4B8 dots, radius 1.15px, every 20px in both directions, starting at the canvas origin.
- Fineliner ink for all marks, rules and headline text: #1F1F1F. Secondary text (axis numbers, subtitle, source): #6B665C.
- Highlighter: #9FE8C4 at 55% opacity with multiply blending, used once, behind the key period.
- Date stamp ink: #4F6F9F.
- Page corner fold: #EFEADF.

Typography (Google Fonts):
- Caveat for the title (700, 44px), the note text (400, 22px), the highlight label (600, 22px) and the tracker row label (600, 21px). The title states the finding and gets a hand-drawn 1.6px underline curve.
- DM Mono for everything numeric or small: subtitle 13px uppercase with 1px letter-spacing (measure, unit and period), axis numbers 12px, value labels 13 to 15px weight 500, stamp text 11 to 14px weight 500, source 11px.

Layout:
- Title at the top left (x 60), subtitle about 44px below it.
- A rubber date stamp top right: a 180 x 50 double-ruled rectangle (2px outer, 0.8px inner, 4px corner radius) rotated -5 degrees, with a small spaced-out label ("LOGGED") and the date range.
- Plot sits on the grid: every category occupies exactly 2 dot columns (40px) and the y scale is 1 dot row per round unit, so every corner of the line lands on a dot.
- Below the x labels, a habit-tracker row: one hand-inked 14px checkbox per category, centered on a dot, with a tally on the right ("14 / 16").
- A folded page corner (a 58px right triangle, bottom right) carrying the page number in DM Mono 15px.
- Source line bottom left.

Axes and grid:
- No gridlines beyond the dot grid itself. A 1.4px slightly wobbly baseline with 6px ticks at every 4th category.
- Y numbers every 4 dot rows, right-aligned 14px left of the plot, with the unit ("mi") on top.

Marks:
- Line chart: a step line, 2.6px fineliner, square caps and miter joins, horizontal runs covering each category's two dot columns and vertical risers on the column boundaries. A 6px filled square on the middle dot of each step. Label the first, peak and last values in DM Mono just above the line.
- Bar chart: square-cornered outline bars, 1.6px fineliner, each exactly 2 dot columns wide (leave one empty column between bars), heights snapped to whole dot rows; fill only the key bars with the mint highlighter wash. Values in DM Mono above each bar.

Labels and annotation:
- One boxed note: a slightly irregular 1.5px rectangle filled with paper color, two short lines of Caveat, and a curved 1.5px hand-drawn arrow with an open chevron head pointing at the relevant data.
- The highlighter wash is a slightly skewed quadrilateral, taller than the data it marks, labeled in Caveat above it.
- Checkboxes are drawn as slightly jittered squares (1.3px), ticked with a 2px hand checkmark that overshoots the box.

Avoid: smooth curves, color-coded series, drop shadows, gradients, more than one highlight, and any text that is not either Caveat or DM Mono.

When you're done, render the chart and check that every line corner sits on a grid dot, the highlight covers exactly the key period, the checkbox tally matches the ticked boxes, and the note's arrow points at the right step.