Chart Prompts

Restyle my chart in the "Guess the Line" 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 reveal screen of an interactive "draw your guess" news quiz. Warm, playful and friendly but still editorial: the reader's own dashed guess, the truth drawn over it and the gap between them made visible.

Colors (use these exact values):
- Page: #FBF8F3 (warm white).
- Reality and primary text: #262626 (charcoal).
- The reader's guess: #E8702A (orange).
- The gap between guess and reality: #A9CBEF at 70% opacity; gap bracket and pill text #2F6FB0.
- Secondary text and axis numbers: #6B6660. Gridlines: #E7E1D8.
- The guessed zone of the plot: #262626 at 3.5% opacity.

Typography (Google Fonts):
- Schibsted Grotesk: title 800, 33px, -0.6px letter-spacing, stating the finding; subtitle 15.5px #6B6660; the quiz prompt 14px 500; legend 13.5px 600; zone labels 11px 700 uppercase with 1.4px letter-spacing; callout labels 14px 500 and callout numbers 28px 800; button 14px 700.
- IBM Plex Mono for axis numbers (12.5px) and the small footnote on the right (11px).

Layout:
- 56px side margins. A charcoal "QUIZ" pill (58 x 22, fully rounded, 11.5px 700 white text) with a one-line prompt beside it, then the title and subtitle.
- A legend row at y 166: a 34px dashed orange line "Your guess", a solid charcoal line "Actual", a 30 x 14 blue swatch "How far off you were".
- On the right of the legend row, a pill button shape (188 x 36, charcoal, white check mark and "Show me how I did") in its pressed state.
- Plot from x 96 to 700, y 214 to 512; the right 200px holds the callout.

Axes and grid:
- Solid 1px #E7E1D8 gridlines at major values and dotted (2 on, 4 off) ones at the halves, a 1.2px charcoal zero line, percent labels in mono right-aligned 12px left of the plot.
- A dashed (3 on, 3 off) 1px charcoal divider at the last revealed period, with "WHAT WE SHOWED YOU" right-aligned before it and "WHAT YOU DREW" after it at the top, and that period's axis label in charcoal 500.

Marks:
- Line chart: reality in 3.5px charcoal, round caps. After the divider, the guess in 3px orange dashed (8 on, 6 off), the gap between the guess and reality filled blue, and reality drawn on top. The guess ends in a drag handle: an r 13 orange halo at 18%, an r 8 warm-white circle with a 3px orange ring and a small up/down chevron grip. Reality ends in an r 6 charcoal dot with a 2px page-colored ring.
- Bar chart: revealed bars solid charcoal; for the guessed periods draw the guess as a dashed 3px orange outline bar (no fill) and the actual bar as a narrower solid charcoal bar inside it, with the difference between their tops shaded in the gap blue; end the last guessed bar top with the same drag handle.

Labels and annotation:
- To the right of the final values, a 1.5px #2F6FB0 bracket spanning guess to actual, then stacked "Actual" / "51%" (charcoal) and "You guessed" / "34%" (orange) in the order they sit vertically, and a fully rounded blue pill stating the miss ("17 points short", 12.5px 700 #2F6FB0).

Avoid: making the guess look like data (it must stay dashed and orange), extra colors, gradients, drop shadows, and a legend box.

When you're done, render the chart and check that the blue fill sits exactly between the two lines, the callout numbers match the line ends and the gap arithmetic is right, and the handle reads as draggable at thumbnail size.