/* ═══════════════════════════════════════════════════════════════════
TOONSHEAD — custom toon cursors (ADDITIVE).
Two states, both drawn in the site's own sticker language: flat fill,
heavy ink outline, hard offset shadow. No gradients, no glow.
arrow default. white body + ink outline so it survives BOTH the
lime panels and the ink-dark sections. hotspot = the tip.
bubble anything clickable. the site already runs an ambient
#bubbles layer because every Surf figure rides a passenger
in a water bowl — so the click cursor is that same bubble.
hotspot = its centre. Geometry locked by pixel measurement:
cyan r8 + stroke 2.2 (ink outer edge 9.1) inside a white
disc r12 = a continuous ~3px white halo on every flank, so
the edge holds on the dark sections too.
styles.css / app.js are NOT touched. Removal = delete this file and
its one in index.html.
═══════════════════════════════════════════════════════════════════ */
/* fine-pointer only: never override touch/coarse input, and skip it when
the OS asks for reduced motion-free simplicity is not the concern here,
but a custom cursor is decoration — respect the pointer type. */
@media (pointer: fine) {
html, body {
cursor: url("data:image/svg+xml,") 4 3, auto;
}
/* every interactive surface gets the bubble */
a, button, summary, label[for],
.btn, .spin, .tab, .dstep, .layer, .more, .x,
.flinks a, .seek button, .io-skip,
[role="button"], [onclick] {
cursor: url("data:image/svg+xml,") 14 14, pointer;
}
/* text entry keeps a caret — a bubble over an input reads as broken */
input, textarea, select {
cursor: text;
}
input[type="submit"], input[type="button"], select {
cursor: url("data:image/svg+xml,") 14 14, pointer;
}
/* disabled things must not promise a click */
button:disabled, .btn[aria-disabled="true"] {
cursor: url("data:image/svg+xml,") 4 3, not-allowed;
}
/* the modal scrim closes on click, so it is clickable too */
.veil { cursor: url("data:image/svg+xml,") 14 14, pointer; }
.veil .sheet { cursor: url("data:image/svg+xml,") 4 3, auto; }
}