@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
	html,
	body,
	a,
	button,
	[role="button"],
	input,
	textarea,
	select {
		cursor: none !important;
	}

	#cursor {
		position: fixed;
		top: 0;
		left: 0;
		width: 18px;
		height: 18px;
		border: 2px solid var(--accent);
		pointer-events: none;
		z-index: 9999;
		opacity: 0;
		transform: translate(-50%, -50%) scale(1);
		transition: border-color 120ms ease, opacity 120ms ease, transform 40ms linear, width 120ms ease, height 120ms ease;
		mix-blend-mode: normal;
		border-radius: 0;
	}

	#cursor.selecting {
		width: 2px;
		height: 18px;
		border-width: 2px;
		border-color: color-mix(in oklab, var(--accent), white 12%);
	}
}

* {
	scrollbar-color: var(--border) var(--hairline);
	scrollbar-width: thin;
}

*::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
	background: var(--hairline);
}

*::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--muted);
}

.site-scrollbar {
	position: fixed;
	display: block;
	background: var(--hairline);
	pointer-events: auto;
	touch-action: none;
	user-select: none;
	cursor: none !important;
}

.site-scrollbar[hidden] {
	display: none;
}

.site-scrollbar.vertical {
	width: 6px;
}

.site-scrollbar.horizontal {
	height: 6px;
}

.site-scrollbar.corner {
	width: 6px;
	height: 6px;
}

.site-scrollbar-thumb {
	position: absolute;
	background: var(--border);
	border-radius: 3px;
	cursor: none !important;
}

.site-scrollbar.vertical .site-scrollbar-thumb {
	left: 0;
	width: 100%;
}

.site-scrollbar.horizontal .site-scrollbar-thumb {
	top: 0;
	height: 100%;
}

.site-scrollbar-thumb:hover {
	background: var(--muted);
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
	html.custom-scrollbars,
	html.custom-scrollbars * {
		scrollbar-width: none;
	}

	html.custom-scrollbars::-webkit-scrollbar,
	html.custom-scrollbars *::-webkit-scrollbar {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
	html,
	body,
	a,
	button,
	[role="button"],
	input,
	textarea,
	select {
		cursor: auto !important;
	}

	#cursor {
		display: none !important;
	}
}