:root {
    --dl-cursor-color: #72e6ad;
    --dl-cursor-size: 12px;
}

.dl-global-cursor {
    position: fixed;
    z-index: 10000050;
    top: 0;
    left: 0;
    width: var(--dl-cursor-size);
    height: var(--dl-cursor-size);
    margin-left: calc(var(--dl-cursor-size) / -2);
    margin-top: calc(var(--dl-cursor-size) / -2);
    border-radius: 999px;
    background: var(--dl-cursor-color);
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-100px, -100px, 0);
    transition: opacity 160ms ease, width 180ms ease, height 180ms ease, margin 180ms ease;
    will-change: transform;
    mix-blend-mode: normal;
}

.dl-global-cursor.is-visible { opacity: 1; }
.dl-global-cursor.is-interactive {
    width: calc(var(--dl-cursor-size) * 1.65);
    height: calc(var(--dl-cursor-size) * 1.65);
    margin-left: calc(var(--dl-cursor-size) * -.825);
    margin-top: calc(var(--dl-cursor-size) * -.825);
}

@media (pointer: coarse), (max-width: 1024px), (prefers-reduced-motion: reduce) {
    .dl-global-cursor { display: none !important; }
}