/* Bit-Map · Cursor — the small ring cursor for mouse users (CSS only).

   Two named cursors:
     --cur-ring  the small ink ring with a centre dot (normal)
     --cur-hot   the larger ring filled yellow (over anything clickable): size + colour, not colour alone
   They change instantly, with no animation, so they never lag the mouse.

   Use them wherever a page sets its own cursors, with the browser cursor as fallback:
     cursor: var(--cur-hot, pointer);     instead of  cursor: pointer;
     cursor: var(--cur-ring, default);    instead of  cursor: default;
   Other cursors (text, grab, zoom-in…) stay as they are.

   For a page that sets no cursors of its own (like the demo), add class="cur-auto" to <html>:
   then targets, links, buttons and labels get the hot ring automatically.

   Touch screens and other devices without a fine pointer keep the normal browser cursors. */

:root {
  --cur-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='5' fill='none' stroke='%23fbfbf9' stroke-width='3.5'/%3E%3Ccircle cx='10' cy='10' r='5' fill='none' stroke='%231b2023' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='10' r='1' fill='%231b2023'/%3E%3C/svg%3E") 10 10, default;
  --cur-hot:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='8.5' fill='%23f2c230' fill-opacity='.6' stroke='%23fbfbf9' stroke-width='3.5'/%3E%3Ccircle cx='14' cy='14' r='8.5' fill='none' stroke='%231b2023' stroke-width='2'/%3E%3Ccircle cx='14' cy='14' r='1.2' fill='%231b2023'/%3E%3C/svg%3E") 14 14, pointer;
}
@media (hover: none), (pointer: coarse) {
  :root { --cur-ring: default; --cur-hot: pointer; }
}

html { cursor: var(--cur-ring); }
:where(a[href]) { cursor: var(--cur-hot); }
:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="number"],
       input[type="password"], input[type="url"], input[type="tel"], textarea, [contenteditable="true"]) { cursor: text; }

/* Automatic mode (opt-in): for pages without their own cursor rules. */
.cur-auto :where([data-hk], a[href], button:not(:disabled), label, summary, select, [role="button"],
  input[type="radio"], input[type="checkbox"], input[type="button"], input[type="submit"], input[type="range"]) {
  cursor: var(--cur-hot);
}
.cur-auto :where(button:disabled) { cursor: var(--cur-ring); }