html {
	--m3-fast: linear(0.0, 0.0341, 0.121, 0.2401, 0.3747, 0.5117, 0.6416, 0.758, 0.8572, 0.9376, 0.9993, 1.0436, 1.0727, 1.0888, 1.0946, 1.0927, 1.0853, 1.0745, 1.062, 1.0489, 1.0364, 1.0251, 1.0153, 1.0073, 1.0011, 0.9966, 0.9936, 0.9918, 0.9911, 0.9911, 0.9917, 0.9927, 0.9939, 0.9951, 0.9963, 0.9974, 0.9984, 0.9992, 0.9998, 1.0002, 1.0006, 1.0008, 1.0008, 1.0008, 1);
	--m3-fast-dur: 430ms;
	--m3-spatial: linear(0.0, 0.0172, 0.0619, 0.1252, 0.2002, 0.2811, 0.3638, 0.4451, 0.5227, 0.5951, 0.6613, 0.7207, 0.7734, 0.8193, 0.8588, 0.8923, 0.9203, 0.9434, 0.9622, 0.9771, 0.9888, 0.9977, 1.0043, 1.009, 1.0121, 1.014, 1.015, 1.0152, 1.0148, 1.0141, 1.013, 1.0119, 1.0107, 1.0094, 1.0082, 1.007, 1.0059, 1.0049, 1.0041, 1.0033, 1.0026, 1.002, 1.0015, 1.0011, 1);
	--m3-spatial-dur: 441ms;
	--m3-slow: linear(0.0, 0.0172, 0.0619, 0.1253, 0.2002, 0.2812, 0.3639, 0.4452, 0.5228, 0.5952, 0.6614, 0.7209, 0.7735, 0.8194, 0.8589, 0.8924, 0.9204, 0.9435, 0.9622, 0.9772, 0.9889, 0.9978, 1.0043, 1.009, 1.0122, 1.014, 1.015, 1.0152, 1.0148, 1.014, 1.013, 1.0119, 1.0106, 1.0094, 1.0082, 1.007, 1.0059, 1.0049, 1.0041, 1.0033, 1.0026, 1.002, 1.0015, 1.0011, 1);
	--m3-slow-dur: 608ms;
	--m3-effects: linear(0.0, 0.0203, 0.0705, 0.1383, 0.2149, 0.2943, 0.3725, 0.447, 0.5163, 0.5795, 0.6365, 0.6872, 0.7319, 0.7711, 0.8052, 0.8346, 0.86, 0.8818, 0.9004, 0.9162, 0.9297, 0.941, 0.9507, 0.9588, 0.9656, 0.9713, 0.9761, 0.9801, 0.9835, 0.9863, 0.9886, 0.9906, 0.9922, 0.9935, 0.9947, 0.9956, 0.9964, 0.997, 0.9975, 0.998, 0.9983, 0.9986, 0.9989, 0.9991, 1);
	--m3-effects-dur: 238ms;
	--m3-hover: 0.08;
	--m3-press: 0.12;
	--m3-r-xs: 8px;
	--m3-r-s: 12px;
	--m3-r-m: 16px;
	--m3-r-l: 20px;
	--m3-r-xl: 28px;
	--m3-r-full: 999px;
	--m3-accent: #747bff;
	--m3-accent-soft: rgba(116, 123, 255, 0.16);
	--m3-outline: rgba(255, 255, 255, 0.14);
	--m3-tone: 255, 255, 255;
}

html[data-theme="Light"] {
	--m3-outline: rgba(0, 0, 0, 0.12);
	--m3-tone: 0, 0, 0;
}

.m3-state {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.m3-state::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(var(--m3-tone));
	opacity: 0;
	pointer-events: none;
	z-index: 0;
	transition: opacity var(--m3-effects-dur) var(--m3-effects);
}
.m3-state:hover::after {
	opacity: var(--m3-hover);
}
.m3-state:active::after,
.m3-state.pressed::after {
	opacity: var(--m3-press);
}

.left-div,
.player {
	border-radius: var(--m3-r-xl);
	border: 1px solid var(--m3-outline);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--main_text_color) 8%, transparent);
	transition:
		transform var(--m3-spatial-dur) var(--m3-spatial),
		border-color var(--m3-effects-dur) var(--m3-effects);
}

.logo {
	--logo-size: 200px;
	width: var(--logo-size);
	height: var(--logo-size);
	margin-top: 32px;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.logoShape {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	clip-path: var(--morph-clip);
}

.morphDefs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.morphShape {
	transition: d var(--m3-slow-dur) var(--m3-slow);
}

.iconItem,
.switch {
	border-radius: var(--m3-r-s);
	border: 1px solid var(--m3-outline);
	transition:
		width var(--m3-spatial-dur) var(--m3-spatial),
		border-color var(--m3-effects-dur) var(--m3-effects),
		transform var(--m3-spatial-dur) var(--m3-spatial);
}
.iconItem:hover {
	width: var(--tip-w, 95px);
	border-color: var(--m3-accent);
	transform: translateY(-3px);
}

.iconItem.tipWide {
	--tip-w: 122px;
}
.iconItem:active {
	border-radius: var(--m3-r-xs);
	transform: translateY(-1px) scale(0.94);
	transition-duration: var(--m3-fast-dur);
	transition-timing-function: var(--m3-fast);
}

.snake {
	border-radius: var(--m3-r-xl);
	overflow: hidden;
}

@media screen and (max-width: 800px) {
	.iconItem,
	.switch {
		width: 44px;
		height: 40px;
		margin-left: 7px;
	}

	.switch {
		width: 49px;
	}
}

@media screen and (max-width: 360px) {
	.iconItem,
	.switch {
		width: 40px;
		margin-left: 4px;
	}

	.switch {
		width: 45px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}