@media (hover: hover) and (pointer: fine) { body, a, button, input, textarea, select, .mode-btn, .color-btn { cursor: none !important; } .cursor-dot { width: 8px; height: 8px; background-color: var(--theme-color); border-radius: 50%; position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); z-index: 9999999999; pointer-events: none; opacity: 0; transition: opacity 0.3s ease, background-color 0.3s ease; } .cursor-outline { width: 40px; height: 40px; border: 2px solid var(--theme-color); background-color: transparent; border-radius: 50%; position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); z-index: 9999999999; pointer-events: none; opacity: 0; transition: width 0.2s ease, height 0.2s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; } body.mouse-in-window .cursor-dot, body.mouse-in-window .cursor-outline { opacity: 1; } body.cursor-hover .cursor-outline { width: 60px; height: 60px; background-color: var(--theme-color); opacity: 0.3; border-color: transparent; } } @media (hover: none) { .cursor-dot, .cursor-outline { display: none !important; } body { cursor: auto !important; } }