/* Custom cursor: a hairline crosshair plus a coordinate readout that trails it. Nothing here applies until js/cursor.js puts `cursor-custom` on , which it only does on devices with a real hovering pointer. Every rule is scoped to that class or to the two elements the script creates, so a page that never runs the script is untouched. */ /* The native pointer goes away wholesale. `!important` because plenty of elements set their own cursor (links, buttons, the nav), and each of those would otherwise win on specificity. */ html.cursor-custom, html.cursor-custom * { cursor: none !important; } /* Opt-out: anything inside [data-native-cursor] keeps the system cursor. More specific than the blanket rule above, so it wins between two !important declarations. The script also hides the custom pieces over these regions. */ html.cursor-custom [data-native-cursor], html.cursor-custom [data-native-cursor] * { cursor: auto !important; } /* Two siblings, never a shared wrapper: a positioned, z-indexed wrapper would open a stacking context and the crosshair's difference blend would then see only the wrapper's backdrop instead of the page. */ .cursor-crosshair, .cursor-coords { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 2147483647; opacity: 0; transition: opacity 160ms ease; } /* White plus difference blending: the crosshair renders black over light content and inverts to white over dark marks, so it stays legible without knowing anything about what it is sitting on. */ .cursor-crosshair { width: 16px; height: 16px; margin: -8px 0 0 -8px; color: #fff; mix-blend-mode: difference; } .cursor-coords { font: 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(0, 0, 0, 0.45); white-space: pre; } html.cursor-visible .cursor-crosshair, html.cursor-visible .cursor-coords { opacity: 1; } /* The readout is the one piece that can sit on top of a line of prose and make it harder to read, so it steps back when it does. */ html.cursor-visible .cursor-coords.is-over-text { opacity: 0.25; } @media (prefers-reduced-motion: reduce) { .cursor-crosshair, .cursor-coords { transition: none; } }