@media (hover: hover) and (pointer: fine) {
	html,
	body,
	* {
		cursor: none !important;
	}

	.cursor-dot,
	.cursor-ring {
		position: fixed;
		top: 0;
		left: 0;
		pointer-events: none;
		z-index: 999999;
		border-radius: 50%;
		will-change: transform;
	}

	.cursor-dot {
		width: 8px;
		height: 8px;
		background: rgb(0, 162, 255);
		transform: translate(-50%, -50%);
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.cursor-ring {
		width: 36px;
		height: 36px;
		border: 2px solid rgba(0, 162, 255, 0.65);
		transform: translate(-50%, -50%);
		opacity: 0;
		transition: opacity 0.2s ease, width 0.25s ease, height 0.25s ease, border-color 0.25s ease,
			background-color 0.25s ease;
	}

	body.cursor-visible .cursor-dot,
	body.cursor-visible .cursor-ring {
		opacity: 1;
	}

	body.cursor-hover .cursor-ring {
		width: 60px;
		height: 60px;
		border-color: rgb(255, 181, 4);
		background-color: rgba(255, 181, 4, 0.18);
	}
}