:root {
    --twoma-cursor-primary: #8b5cf6;
    --twoma-cursor-secondary: #d946ef;
    --twoma-cursor-blue: #60a5fa;
    --twoma-cursor-inner: #080b1a;
    --twoma-cursor-danger: #f472b6;
    --twoma-cursor-glow: rgba(139, 92, 246, .3);
    --twoma-cursor-size: 24px;
    --twoma-cursor-halo-size: 38px;
}

@media (hover: hover) and (pointer: fine) {
    html.twoma-cursor-active,
    html.twoma-cursor-active * { cursor: none !important; }

    .twoma-cursor,
    .twoma-cursor-follower {
        position: fixed;
        z-index: 2147483647;
        top: 0;
        left: 0;
        pointer-events: none;
        opacity: 0;
        will-change: transform;
    }

    .twoma-cursor.is-visible,
    .twoma-cursor-follower.is-visible { opacity: 1; }

    .twoma-cursor-shape {
        position: absolute;
        top: 0;
        left: 0;
        width: 18px;
        height: var(--twoma-cursor-size);
        clip-path: polygon(0 0, 100% 66%, 58% 70%, 43% 100%);
        background: linear-gradient(145deg, #eef2ff 0 8%, var(--twoma-cursor-blue) 25%, var(--twoma-cursor-primary) 58%, var(--twoma-cursor-secondary));
        filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 5px var(--twoma-cursor-glow));
        transition: filter 160ms ease, opacity 120ms ease;
    }

    .twoma-cursor-shape::after {
        content: "";
        position: absolute;
        inset: 2px;
        background: var(--twoma-cursor-inner);
        clip-path: inherit;
    }

    .twoma-cursor-halo {
        position: absolute;
        width: var(--twoma-cursor-halo-size);
        height: var(--twoma-cursor-halo-size);
        left: -10px;
        top: -9px;
        border: 1px solid rgba(139, 92, 246, .72);
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(139, 92, 246, .2), inset 0 0 8px rgba(96, 165, 250, .08);
        opacity: 0;
        scale: .85;
        transition: opacity 160ms ease, scale 160ms ease, border-color 160ms ease;
    }

    .twoma-cursor[data-state="interactive"] .twoma-cursor-halo,
    .twoma-cursor[data-state="button"] .twoma-cursor-halo {
        opacity: 1;
        scale: 1;
    }

    .twoma-cursor[data-state="button"] .twoma-cursor-halo {
        border-color: var(--twoma-cursor-secondary);
        box-shadow: 0 0 9px rgba(217, 70, 239, .25), inset 0 0 8px rgba(139, 92, 246, .12);
    }

    .twoma-cursor.is-clicking .twoma-cursor-halo { animation: twomaCursorClick 190ms ease-out; }

    .twoma-cursor[data-state="text"] .twoma-cursor-shape {
        width: 2px;
        height: 24px;
        translate: -1px -12px;
        clip-path: none;
        border-radius: 2px;
        background: linear-gradient(var(--twoma-cursor-blue), var(--twoma-cursor-secondary));
        box-shadow: -5px 0 0 -4px #c4b5fd, 5px 0 0 -4px #c4b5fd, 0 -11px 0 -5px #c4b5fd, 0 11px 0 -5px #c4b5fd;
    }
    .twoma-cursor[data-state="text"] .twoma-cursor-shape::after { display: none; }

    .twoma-cursor[data-state="loading"] .twoma-cursor-shape {
        width: 23px;
        height: 23px;
        translate: -11px -11px;
        clip-path: none;
        border: 2px solid rgba(96, 165, 250, .25);
        border-top-color: var(--twoma-cursor-primary);
        border-right-color: var(--twoma-cursor-secondary);
        border-radius: 50%;
        background: transparent;
        animation: twomaCursorSpin 800ms linear infinite;
    }
    .twoma-cursor[data-state="loading"] .twoma-cursor-shape::after { display: none; }

    .twoma-cursor[data-state="not-allowed"] .twoma-cursor-shape {
        width: 23px;
        height: 23px;
        translate: -11px -11px;
        clip-path: none;
        border: 2px solid var(--twoma-cursor-danger);
        border-radius: 50%;
        background: linear-gradient(135deg, transparent 44%, var(--twoma-cursor-danger) 45% 55%, transparent 56%);
        filter: drop-shadow(0 0 4px rgba(244, 114, 182, .28));
    }
    .twoma-cursor[data-state="not-allowed"] .twoma-cursor-shape::after { display: none; }

    .twoma-cursor[data-state^="resize"] .twoma-cursor-shape {
        width: 25px;
        height: 2px;
        translate: -12px -1px;
        clip-path: none;
        background: linear-gradient(90deg, var(--twoma-cursor-blue), var(--twoma-cursor-secondary));
        box-shadow: 0 0 5px var(--twoma-cursor-glow);
    }
    .twoma-cursor[data-state^="resize"] .twoma-cursor-shape::after { display: none; }
    .twoma-cursor[data-state="resize-v"] .twoma-cursor-shape { rotate: 90deg; }
    .twoma-cursor[data-state="resize-d1"] .twoma-cursor-shape { rotate: 45deg; }
    .twoma-cursor[data-state="resize-d2"] .twoma-cursor-shape { rotate: -45deg; }

    .twoma-cursor[data-state="grab"] .twoma-cursor-shape,
    .twoma-cursor[data-state="grabbing"] .twoma-cursor-shape {
        width: 18px;
        height: 18px;
        translate: -9px -9px;
        clip-path: none;
        border: 1px solid var(--twoma-cursor-primary);
        border-radius: 45% 45% 52% 52%;
        background: var(--twoma-cursor-inner);
    }
    .twoma-cursor[data-state="grabbing"] .twoma-cursor-shape { scale: .86; filter: drop-shadow(0 0 8px var(--twoma-cursor-primary)); }
    .twoma-cursor[data-state="grab"] .twoma-cursor-shape::after,
    .twoma-cursor[data-state="grabbing"] .twoma-cursor-shape::after { display: none; }

    .twoma-cursor-follower {
        z-index: 2147483646;
        width: 52px;
        height: 52px;
        margin: -26px 0 0 -26px;
        border-radius: 50%;
        background: rgba(139, 92, 246, .08);
        filter: blur(18px);
        transition: opacity 160ms ease;
    }

    .twoma-cursor-follower.is-precise { opacity: 0 !important; }

    .cursor-preference-dialog {
        width: min(420px, calc(100vw - 32px));
        padding: 0;
        border: 1px solid rgba(139, 92, 246, .32);
        border-radius: 8px;
        color: #eef2ff;
        background: rgba(8, 11, 26, .96);
        box-shadow: 0 24px 80px rgba(0, 0, 0, .58), 0 0 34px rgba(139, 92, 246, .14);
    }
    .cursor-preference-dialog::backdrop { background: rgba(2, 4, 14, .72); backdrop-filter: blur(6px); }
    .cursor-preference-content { padding: 24px; }
    .cursor-preference-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .cursor-preference-head h2 { margin: 0; font-size: 20px; }
    .cursor-preference-content > p { color: #9ca6c8; font-size: 13px; }
    .cursor-preference-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(139, 92, 246, .16); }
    .cursor-preference-row strong, .cursor-preference-row small { display: block; }
    .cursor-preference-row small { margin-top: 4px; color: #8e98ba; }
    .cursor-toggle { position: relative; width: 46px; height: 25px; flex: 0 0 auto; border: 0; border-radius: 999px; background: #303650; }
    .cursor-toggle::after { content: ""; position: absolute; width: 19px; height: 19px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: translate 160ms ease; }
    .cursor-toggle[aria-pressed="true"] { background: linear-gradient(90deg, var(--twoma-cursor-primary), var(--twoma-cursor-secondary)); }
    .cursor-toggle[aria-pressed="true"]::after { translate: 21px 0; }
}

@keyframes twomaCursorClick {
    0% { scale: 1; opacity: .8; }
    50% { scale: .75; opacity: 1; }
    100% { scale: 1; opacity: .8; }
}
@keyframes twomaCursorSpin { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
    .twoma-cursor-follower { display: none !important; }
    .twoma-cursor * { animation: none !important; transition: none !important; }
}