.cx-cursor { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; }
.cx-dot, .cx-ring { position: fixed; left: 0; top: 0; pointer-events: none; will-change: transform; }
.cx-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--cx-color, #FFD700); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.35); }
.cx-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1.5px solid var(--cx-color, #FFD700);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  transition: width .3s, height .3s, margin .3s, background-color .3s;
}
.cx-label { font: 600 12px/1 'DM Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #0a0a0a; opacity: 0; transition: opacity .2s; }
.cx-big .cx-ring { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--cx-color, #FFD700); }
.cx-big .cx-label { opacity: 1; }
.cx-native .cx-cursor { opacity: 0; }
html.cx-on, html.cx-on a, html.cx-on button, html.cx-on [role=button], html.cx-on summary, html.cx-on label, html.cx-on [data-cursor] { cursor: none; }
html.cx-on.cx-native, html.cx-on.cx-native a, html.cx-on.cx-native button, html.cx-on.cx-native label,
html.cx-on input, html.cx-on textarea, html.cx-on select, html.cx-on [contenteditable] { cursor: auto; }
html.cx-on input, html.cx-on textarea { cursor: text; }
/* a radio button or a checkbox gets the ring, like a button (cursor.js NATIVE) */
html.cx-on input[type=radio], html.cx-on input[type=checkbox] { cursor: none; }