Chart Prompts

Restyle my chart in the "Notebook Cell" 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 light computational notebook. A rendered markdown heading, then a code cell with its "In [12]:" prompt, then the "Out [12]:" plot in the plain, unstyled default look of a scientific plotting library. Honest, technical and a little dry; the charm is in the fidelity.

Colors (use these exact values):
- Page: #FFFFFF. Heading ink #212121, secondary text #757575.
- Code cell: #F7F7F7 fill with a 1px #CFCFCF border and 2px corner radius. A 4px #42A5F5 selection bar sits 12px left of the cell, running 6px past its top and bottom.
- Prompts: "In [12]:" in #303F9F, "Out [12]:" in #D84315.
- Syntax colors: plain code #212121, function names #0000FF, strings #BA2121, numbers #008800, keywords (for, in, True) #008000 at weight 600, comments #3D7B7B.
- Plot: axes, ticks and tick labels #000000. Series 1 #1F77B4 (blue), series 2 #FF7F0E (orange); further series continue the same default cycle.
- Execution check mark #388E3C.

Typography (Google Fonts):
- Source Sans 3 for the markdown cell: heading 700 25px stating the finding; subtitle 400 15px #757575 with measure, unit and method.
- Fira Code 13px for code and the In / Out prompts (prompts right-aligned 20px left of the cell edge); 12px #757575 for the execution counter.
- Noto Sans 400 for everything inside the plot: plot title 14px centered 9px above the axes box, tick labels 12px, axis labels 13px, legend 12.5px, source 11px #757575.

Layout:
- Cells start at x = 116 and end 24px from the right edge. The markdown heading sits at the top with no box; the code cell follows about 20px below; the output prompt about 30px below the code cell.
- The code cell's top right shows a small check mark and "[12]  1.8s" (execution counter and elapsed time).
- The plot sits under "Out [12]:" with its axes box running from about x = 214 to x = 900 and ending near y = 520, leaving room for tick labels, an x-axis label and a rotated y-axis label.
- "Source: illustrative data" right-aligned at the bottom right in 11px Noto Sans.

Axes and grid:
- A full 0.8px black box around the plot area (all four spines). No gridlines.
- Outward tick marks 5px long, 0.8px, on the left and bottom only; tick labels 9px from the axis.
- A plain centered x-axis label and a rotated y-axis label with the unit in parentheses.

Marks:
- Line chart: 1.5px straight-segment lines with filled circle markers (r 3) in the series color, no smoothing, no area fill. Legend in the upper right: white box at 85% opacity, 0.8px #CFCFCF border, 3px radius, each entry a 28px line with a marker through its middle and the label to the right.
- Bar chart: default-looking vertical bars, 80% of the band, square corners, flat series colors with no outline, grouped side by side for multiple series, the same framed legend and boxed axes, value axis starting at zero.

Labels and annotation:
- At most one annotation: 12px Noto Sans black text placed inside the axes in empty space, with a thin 0.9px black line and a small solid triangular arrowhead pointing at the data point.

Avoid: gradients, shadows, rounded bars, thick lines, a dark theme, decorative fonts, gridlines, and anything that looks styled rather than default. No text overlapping the tick labels.

When you're done, render the chart and check that the code cell really shows code that could have produced the chart, the axes box is closed on all four sides, the legend frame does not cover data, and the annotation text sits inside the plot without touching any line or tick label.