:root {
	color-scheme: light;
	--transition-normal:
		background-color var(--duration-short) ease-out,
		color var(--duration-short) ease-out;
	--cubic-bezier: cubic-bezier(0.4, 0, 0.2, 1);
	--duration-short: 0.12s;
	--duration-base: 0.15s;
	--duration-medium: 0.2s;
	--duration-long: 0.3s;
	--ease-in-out-cubic: var(--cubic-bezier);
	--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-default: ease-out;
	--bg-color: light-dark(#fcfced, #1c1c1c);
	--sidebar-bg: light-dark(#e2f5f5, #161515);
	--text-color: light-dark(#0e141a, #f9f1d5e6);
	--link-color: light-dark(#23d6e3, #74ceff);
	--hover-bg: light-dark(#dfe6e9, #2d3436);
	--button-bg: light-dark(#a1dcf5, #5d6687);
	--button-hover: light-dark(#faeaf4, rgb(201, 207, 159));
	--header-bg: light-dark(#88dcfa, #ffffff4b);
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
	--shadow-md: 2px 0 5px rgba(0, 0, 0, 0.2);
	--shadow-lg: 0 0 10px rgba(0, 0, 0, 0.2);
	--button-shadow: 3px 0 8px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
	--button-shadow-expanded:
		0 2px 8px rgba(0, 0, 0, 0.25), -2px 0 4px rgba(0, 0, 0, 0.15);
	--button-shadow-hover:
		4px 0 12px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
	--theme-shadow-hover: 0 0 10px rgba(0, 0, 0, 0.2);

	--desktop-base-offset: 110px;

	--scroll-indicator-bg: light-dark(
		rgba(161, 220, 245, 0.3),
		rgba(93, 102, 135, 0.3)
	);
	--scroll-indicator-thumb: light-dark(#23d6e3, #74ceff);
	--scroll-indicator-thumb-hover: light-dark(#88dcfa, #ffffff4b);
	--scroll-indicator-width: 5px;
	--scroll-indicator-border-radius: 4px;

	--home-button-bg-start: light-dark(#9ee9f4d8, #5d6687d8);
	--home-button-bg-end: light-dark(#d1d1f3a5, #3d4663a5);
	--home-button-text: light-dark(#333, #f9f1d5e6);
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--shadow-sm: 0 2px 4px rgba(255, 255, 255, 0.1);
	--shadow-md: 2px 0 5px rgba(255, 255, 255, 0.2);
	--shadow-lg: 0 0 10px rgba(255, 255, 255, 0.2);
	--button-shadow:
		3px 0 8px rgba(255, 255, 255, 0.15), 0 2px 4px rgba(255, 255, 255, 0.1);
	--button-shadow-expanded:
		0 2px 8px rgba(255, 255, 255, 0.15), -2px 0 4px rgba(255, 255, 255, 0.1);
	--button-shadow-hover:
		4px 0 12px rgba(255, 255, 255, 0.25), 0 4px 6px rgba(255, 255, 255, 0.2);
	--theme-shadow-hover: 0 0 12px rgba(255, 255, 255, 0.3);
}

* {
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color var(--duration-short) var(--ease-default),
		color var(--duration-short) var(--ease-default);
}

html {
	font-size: 13px;
	scrollbar-width: none;
	scrollbar-color: rgba(0, 0, 0, 0.2) var(--bg-color);
}

html,
body {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

body {
	font-family: "LXGW WenKai", Arial, sans-serif;
	background-color: var(--bg-color);
	position: relative;
	color: var(--text-color);
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
}

body::after {
	content: "";
	position: fixed;
	bottom: 0;
	right: 0;
	width: 1000px;
	height: 1000px;
	background: url("../images/moecat.gif") no-repeat right bottom;
	background-size: contain;
	z-index: 1;
	pointer-events: none;
}

.sidebar,
.main-content,
.search-container,
.github-link,
#theme-toggle {
	position: relative;
	z-index: 2;
}

@media screen and (min-width: 480px) {
	.custom-scroll-indicator {
		position: fixed;
		top: 0;
		right: 1px;
		width: var(--scroll-indicator-width);
		height: 100vh;
		background: var(--scroll-indicator-bg);
		border-radius: var(--scroll-indicator-border-radius);
		z-index: 9999;
		opacity: 0;
		transition: opacity var(--duration-short) var(--ease-default);
		pointer-events: none;
		background: rgba(161, 220, 245, 0.6);
		box-shadow: var(--shadow-sm);
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	@supports not (backdrop-filter: blur(2px)) {
		.custom-scroll-indicator {
			background: var(--scroll-indicator-bg);
			background: rgba(161, 220, 245, 0.6);
		}

		[data-theme="dark"] .custom-scroll-indicator {
			background: rgba(93, 102, 135, 0.6);
		}
	}

	.custom-scroll-thumb {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background: var(--scroll-indicator-thumb);
		border-radius: var(--scroll-indicator-border-radius);
		transition:
			background-color var(--duration-short) var(--ease-default),
			box-shadow var(--duration-short) var(--ease-default);
		box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
		min-height: 20px;
	}

	body.scrolling .custom-scroll-indicator {
		opacity: 1;
	}

	.custom-scroll-indicator:hover {
		opacity: 1;
		transform: scaleX(1.2);
		transform-origin: right center;
	}

	.custom-scroll-indicator:hover .custom-scroll-thumb {
		background: var(--scroll-indicator-thumb-hover);
		box-shadow: var(--shadow-md);
	}

	@media screen and (min-width: 1024px) {
		.custom-scroll-indicator {
			right: 2px;
		}
	}
}