:root {
	--csss-cursor-color: #ffffff;
	--csss-accent-color: #20e0c3;
	--csss-cursor-size: 1;
	--csss-hover-scale: 1.35;
}

.csss-hide-native,
.csss-hide-native * {
	cursor: none !important;
}

.csss-cursor,
.csss-trail,
.csss-particles {
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 2147483646;
}

.csss-cursor {
	width: calc(46px * var(--csss-cursor-size));
	height: calc(46px * var(--csss-cursor-size));
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease, visibility .15s ease;
	mix-blend-mode: difference;
}

.csss-cursor.is-visible {
	opacity: 1;
	visibility: visible;
}

.csss-main,
.csss-main::before,
.csss-main::after,
.csss-hover-ring {
	position: absolute;
	display: block;
	box-sizing: border-box;
	content: "";
}

.csss-cursor-classic-dot .csss-main { width: 9px; height: 9px; left: 50%; top: 50%; border-radius: 50%; background: var(--csss-cursor-color); transform: translate(-50%,-50%); }
.csss-cursor-circle .csss-main { inset: 3px; border: 2px solid var(--csss-cursor-color); border-radius: 50%; }
.csss-cursor-ring-dot .csss-main { inset: 2px; border: 2px solid var(--csss-cursor-color); border-radius: 50%; }
.csss-cursor-ring-dot .csss-main::before { width: 8px; height: 8px; left: 50%; top: 50%; border-radius: 50%; background: var(--csss-cursor-color); transform: translate(-50%,-50%); }
.csss-cursor-crosshair .csss-main { inset: 7px; border: 1px solid var(--csss-cursor-color); border-radius: 50%; }
.csss-cursor-crosshair .csss-main::before { left: 50%; top: -7px; width: 2px; height: calc(100% + 14px); background: var(--csss-cursor-color); transform: translateX(-50%); }
.csss-cursor-crosshair .csss-main::after { top: 50%; left: -7px; width: calc(100% + 14px); height: 2px; background: var(--csss-cursor-color); transform: translateY(-50%); }
.csss-cursor-plus .csss-main::before { left: 50%; top: 0; width: 2px; height: 100%; background: var(--csss-cursor-color); transform: translateX(-50%); }
.csss-cursor-plus .csss-main::after { top: 50%; left: 0; width: 100%; height: 2px; background: var(--csss-cursor-color); transform: translateY(-50%); }
.csss-cursor-diamond .csss-main { inset: 7px; border: 2px solid var(--csss-cursor-color); transform: rotate(45deg); }
.csss-cursor-square .csss-main { inset: 5px; border: 2px solid var(--csss-cursor-color); }
.csss-cursor-target .csss-main { inset: 3px; border: 2px solid var(--csss-cursor-color); border-radius: 50%; }
.csss-cursor-target .csss-main::before { inset: 8px; border: 2px solid var(--csss-cursor-color); border-radius: 50%; }
.csss-cursor-target .csss-main::after { left: 50%; top: -4px; width: 2px; height: calc(100% + 8px); background: var(--csss-cursor-color); transform: translateX(-50%); }
.csss-cursor-brackets .csss-main { inset: 3px; border-left: 2px solid var(--csss-cursor-color); border-right: 2px solid var(--csss-cursor-color); }
.csss-cursor-brackets .csss-main::before,
.csss-cursor-brackets .csss-main::after { left: 0; width: 100%; height: 2px; background: var(--csss-cursor-color); }
.csss-cursor-brackets .csss-main::before { top: 0; }
.csss-cursor-brackets .csss-main::after { bottom: 0; }
.csss-cursor-triangle .csss-main { left: 50%; top: 50%; width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 22px solid var(--csss-cursor-color); transform: translate(-50%,-50%) rotate(30deg); }
.csss-cursor-minimal .csss-main { width: 6px; height: 6px; left: 50%; top: 50%; border-radius: 50%; background: var(--csss-cursor-color); transform: translate(-50%,-50%); }
.csss-cursor-glow .csss-main { width: 13px; height: 13px; left: 50%; top: 50%; border-radius: 50%; background: var(--csss-cursor-color); transform: translate(-50%,-50%); box-shadow: 0 0 15px 6px var(--csss-cursor-color); }
.csss-cursor-double-ring .csss-main { inset: 2px; border: 2px solid var(--csss-cursor-color); border-radius: 50%; }
.csss-cursor-double-ring .csss-main::before { inset: 8px; border: 2px solid var(--csss-cursor-color); border-radius: 50%; }
.csss-cursor-focus .csss-main { width: 13px; height: 13px; left: 50%; top: 50%; border: 2px solid var(--csss-cursor-color); border-radius: 50%; transform: translate(-50%,-50%); }
.csss-cursor-focus .csss-main::before { left: 4px; top: -13px; width: 2px; height: 38px; background: var(--csss-cursor-color); }
.csss-cursor-focus .csss-main::after { left: -13px; top: 4px; width: 38px; height: 2px; background: var(--csss-cursor-color); }
.csss-cursor-comet .csss-main { width: 12px; height: 12px; left: 50%; top: 50%; border-radius: 50%; background: var(--csss-cursor-color); transform: translate(-50%,-50%); box-shadow: -9px 6px 0 -3px var(--csss-cursor-color), -18px 12px 0 -5px var(--csss-cursor-color); }
.csss-cursor-four-corners .csss-main { inset: 7px; border: 2px solid var(--csss-cursor-color); }
.csss-cursor-halo-dot .csss-main { inset: 5px; border: 1px solid var(--csss-accent-color); border-radius: 50%; }
.csss-cursor-halo-dot .csss-main::before { width: 7px; height: 7px; left: 50%; top: 50%; border-radius: 50%; background: var(--csss-cursor-color); transform: translate(-50%,-50%); }
.csss-cursor-cross-dot .csss-main { width: 9px; height: 9px; left: 50%; top: 50%; border-radius: 50%; background: var(--csss-cursor-color); transform: translate(-50%,-50%); }
.csss-cursor-cross-dot .csss-main::before { left: 50%; top: -15px; width: 1px; height: 39px; background: var(--csss-accent-color); transform: translateX(-50%); }
.csss-cursor-cross-dot .csss-main::after { top: 50%; left: -15px; width: 39px; height: 1px; background: var(--csss-accent-color); transform: translateY(-50%); }
.csss-cursor-orb .csss-main { width: 18px; height: 18px; left: 50%; top: 50%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--csss-accent-color)); box-shadow: 0 0 22px var(--csss-accent-color); transform: translate(-50%,-50%); }
.csss-cursor-pointer .csss-main { width: 0; height: 0; left: 50%; top: 50%; border-top: 18px solid var(--csss-cursor-color); border-left: 6px solid transparent; border-right: 6px solid transparent; transform: translate(-50%,-50%) rotate(-25deg); }

.csss-hover-ring { inset: 0; border: 1px solid var(--csss-accent-color); border-radius: 50%; opacity: 0; transform: scale(.35); transition: .25s ease; }
.csss-cursor.is-hovering .csss-hover-ring { opacity: .9; transform: scale(var(--csss-hover-scale)); }

.csss-trail { width: 1px; height: 1px; opacity: 0; visibility: hidden; }
.csss-trail.is-visible { opacity: 1; visibility: visible; }
.csss-trail-node { position: fixed; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--csss-accent-color); }
.csss-trail-circles .csss-trail-node { width: 18px; height: 18px; border: 1px solid var(--csss-accent-color); background: transparent; }
.csss-trail-line .csss-trail-node { width: 32px; height: 2px; border-radius: 99px; background: var(--csss-accent-color); }
.csss-trail-ghost .csss-trail-node { width: 22px; height: 22px; border: 1px solid var(--csss-cursor-color); background: transparent; }
.csss-trail-echo .csss-trail-node { width: 22px; height: 22px; border: 1px solid var(--csss-accent-color); background: transparent; }
.csss-trail-comet .csss-trail-node { width: 8px; height: 8px; border-radius: 50%; background: var(--csss-accent-color); box-shadow: 0 0 8px var(--csss-accent-color); }
.csss-trail-none { display: none; }

.csss-particles { opacity: 0; visibility: hidden; }
.csss-particles.is-visible { opacity: 1; visibility: visible; }
.csss-particle { position: fixed; left: 0; top: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--csss-accent-color); }
.csss-particles-spark .csss-particle { width: 3px; height: 12px; border-radius: 99px; }
.csss-particles-stars .csss-particle { width: 3px; height: 3px; }
.csss-particles-stars .csss-particle::before,
.csss-particles-stars .csss-particle::after { position: absolute; content: ""; background: var(--csss-accent-color); }
.csss-particles-stars .csss-particle::before { width: 12px; height: 2px; left: -4px; top: 1px; }
.csss-particles-stars .csss-particle::after { height: 12px; width: 2px; left: 1px; top: -4px; }
.csss-particles-bubbles .csss-particle { width: 9px; height: 9px; border: 1px solid var(--csss-accent-color); background: transparent; }
.csss-particles-orbital .csss-particle { width: 5px; height: 5px; box-shadow: 0 0 8px var(--csss-accent-color); }
.csss-particles-snow .csss-particle { width: 3px; height: 3px; opacity: .7; }

.csss-click { position: fixed; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid var(--csss-accent-color); pointer-events: none; z-index: 2147483647; animation: csss-click .6s ease-out forwards; }
.csss-click-spark { border: 0; background: var(--csss-accent-color); box-shadow: 0 -22px 0 -4px var(--csss-accent-color), 0 22px 0 -4px var(--csss-accent-color), -22px 0 0 -4px var(--csss-accent-color), 22px 0 0 -4px var(--csss-accent-color); }
.csss-click-burst { border: 0; background: var(--csss-accent-color); box-shadow: 0 -28px 0 -4px var(--csss-accent-color), 20px -20px 0 -4px var(--csss-accent-color), 28px 0 0 -4px var(--csss-accent-color), 20px 20px 0 -4px var(--csss-accent-color), 0 28px 0 -4px var(--csss-accent-color), -20px 20px 0 -4px var(--csss-accent-color), -28px 0 0 -4px var(--csss-accent-color), -20px -20px 0 -4px var(--csss-accent-color); }

@keyframes csss-click {
	0% { opacity: 1; transform: scale(.4); }
	100% { opacity: 0; transform: scale(5); }
}

@media (prefers-reduced-motion: reduce) {
	.csss-cursor,
	.csss-trail,
	.csss-particles,
	.csss-click {
		display: none !important;
	}
}