/* sketch: a hand-drawn SVG explainer on a dotted table, drawn in the style of Ben's canvases.
     <div class="ann-tabs sketch" id="…" data-state="before" data-switch style="--sketch-mono: 10px">
       <div class="sketch-stage"><svg viewBox="…">…</svg></div>
       <div class="tabs" role="tablist"><button class="is-on" data-state="before">before</button>…</div>
     </div>
   Pens: .hand (handwriting; .big .orange .purple), .mono (labels), .o (paper box), .s (shaded box),
   .ln (a line; give it a stroke colour), .arrow (dashed; .moving to flow).
   States (components/sketch.js), on any element:
     data-on="now"      shown only in that state (space-separate several); style="--off: translate(…)" moves it away when hidden
     data-dim="now"     faded in that state
     data-at="now"      moved to style="--at: translateY(…)" in that state
     data-blink="now"   blinks in that state
     .draw              a line that draws itself in when it appears
   Size knobs on the root: --sketch-mono, --sketch-mono-phone, --sketch-mono-ink, --sketch-s (shaded stroke), --sketch-ln. */
.sketch { --ink: var(--gray-1200); --paper: var(--surface); --shade: var(--gray-200); --line: var(--gray-500, #bbb); --dim: var(--gray-1000);
  --orange: #d9822b; --purple: #8a5cd6; --blue: #3a7bd5; --red: #d0453a; --green: #2f8f5b; --sketch-ease: cubic-bezier(.23, 1, .32, 1); }
.sketch-stage { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
  background: radial-gradient(circle, rgb(0 0 0 / 0.08) 0.8px, transparent 0.9px) 0 0 / 16px 16px, var(--gray-100); }
.sketch svg { display: block; width: 100%; height: auto; }
.sketch .hand { font-family: 'Shantell Sans', cursive; font-size: 15px; fill: var(--gray-1100); }
.sketch .hand.big { font-size: 17px; fill: var(--ink); }
.sketch .hand.orange { fill: var(--orange); font-size: 17px; }
.sketch .hand.purple { fill: var(--purple); font-size: 13px; }
.sketch .mono { font-family: var(--mono); font-size: var(--sketch-mono, 11px); fill: var(--sketch-mono-ink, var(--gray-1100)); }
.sketch .o { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.sketch .s { fill: var(--shade); stroke: var(--ink); stroke-width: var(--sketch-s, 2); stroke-linejoin: round; }
.sketch .ln { fill: none; stroke-width: var(--sketch-ln, 2); stroke-linecap: round; stroke-linejoin: round; }
.sketch .arrow { fill: none; stroke: var(--gray-1000); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 6; }
.sketch .arrow.moving { animation: sketch-flow 1.2s linear infinite; }
@keyframes sketch-flow { to { stroke-dashoffset: -22; } }

.sketch [data-on], .sketch [data-dim] { transition: opacity 400ms var(--sketch-ease); }
.sketch [data-on].is-off { opacity: 0; }
.sketch [data-on][style*="--off"] { transition: transform 700ms var(--sketch-ease), opacity 400ms; }
.sketch [data-on][style*="--off"].is-off { transform: var(--off); }
.sketch .is-dim { opacity: .35; }
.sketch [data-at] { transition: transform 600ms var(--sketch-ease); }
.sketch .is-at { transform: var(--at); }
.sketch .draw { stroke-dasharray: 400; stroke-dashoffset: 0; transition: stroke-dashoffset 800ms var(--sketch-ease) 200ms; }
.sketch .draw.is-off { stroke-dashoffset: 400; }
.sketch .is-blinking { animation: sketch-blink 1.6s ease-in-out infinite; }
@keyframes sketch-blink { 50% { opacity: .25; } }

@media (max-width: 640px) { .sketch .hand { font-size: 17px; } .sketch .mono { font-size: var(--sketch-mono-phone, 12px); } }
@media (prefers-reduced-motion: reduce) { .sketch * { transition: none !important; animation: none !important; } }