/* MASQUE cursor: an encapsulated datagram that unwraps behind you. The head carries a varint prefix block; trailing copies lose it, which is exactly what the relay does to a packet on its way through. */ .mq-cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; display: flex; align-items: stretch; width: 30px; height: 12px; margin: -6px 0 0 -15px; transition: transform 0.12s ease-out; will-change: transform; } /* varint(quarter stream id) | varint(context id) — the encapsulation. */ .mq-cursor-prefix { width: 9px; background: rgba(251, 191, 36, 0.75); border-radius: 2px 0 0 2px; } /* The UDP payload the relay actually forwards. */ .mq-cursor-payload { flex: 1; border: 1px solid rgba(94, 234, 212, 0.85); border-left: none; border-radius: 0 2px 2px 0; background: rgba(20, 184, 166, 0.16); } .mq-cursor-active { transform: scale(1.3); } .mq-cursor-trail { position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none; width: 21px; height: 10px; margin: -5px 0 0 -10px; border: 1px solid rgba(94, 234, 212, 0.55); border-radius: 2px; will-change: transform, opacity; } /* Still-wrapped trail segments keep the amber prefix edge. */ .mq-cursor-trail-wrapped { border-left: 4px solid rgba(251, 191, 36, 0.7); } /* ── Hiding the native pointer ──────────────────────────────────────── */ /* * Gated behind a class the cursor script adds to once its elements are * in the DOM, never applied from CSS alone. If the script fails to load or * throws, the class is never set and the real pointer stays — a page that hides * the system cursor and then does not draw a replacement is unusable, and CSS * has no way to know whether the replacement arrived. * * The universal selector is deliberate: `cursor` is not inherited in the way * that matters here — links, buttons and resizable edges all set their own, so * hiding it on `body` alone leaves the arrow reappearing over exactly the * elements people move toward. */ .mq-cursor-on, .mq-cursor-on * { cursor: none; } /* * Text entry keeps the real caret. A custom dot gives no indication of where a * character will land, and these are fields people actually type into. */ .mq-cursor-on input[type="text"], .mq-cursor-on input[type="search"], .mq-cursor-on input[type="email"], .mq-cursor-on input[type="password"], .mq-cursor-on textarea { cursor: text; } @media (pointer: coarse) { .mq-cursor, .mq-cursor-trail { display: none; } }