* {
	/* outline: none; */
	text-align: center;
	border: none;
	border-radius: 24px;
	font-family: Ubuntu, Noto Sans SC;
	transition: all 0.5s cubic-bezier(0.5, 0, 0.2, 1);
}
*::selection{
    background: hsla(192, 53.7%, 95.2%, 0.8);
    color: hsla(192, 53.7%, 50.2%, 0.8);
}
html {
	background: hsla(192, 53.7%, 97.2%, 0.15);
}
body {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 512px;
	color: hsla(192, 53.7%, 60.2%, 0.6);
}

h1 {
	color: hsla(192, 43.7%, 60.2%, 0.7);
	text-shadow: 0 0 3px hsla(192, 53.7%, 50.2%, 0.5);
	height: 32px;
	user-select: none;
}
input {
	display: flex;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(16px);
	background: hsla(192, 53.7%, 95.2%, 0.5);
	box-shadow: 0 0 15px hsla(192, 56.7%, 50.2%, 0.5);
	outline: hsla(192, 53.7%, 60.2%, 0) solid 0px;
	height: 42px;
	width: 70%;
	color: hsla(192, 27.7%, 20.2%, 0.6);
	font-size: 21px;
	font-weight: 500;
	z-index: 1;
}
input::placeholder {
	color: hsla(192, 27.7%, 45.2%, 0.45);
	user-select: none;
}
input:hover::placeholder {
	color: hsla(192, 27.7%, 95.2%, 0.9);
}
input:hover {
	background: hsla(192, 63.7%, 56.2%, 0.7);
	box-shadow: 0 0 10px hsla(192, 53.7%, 60.2%, 0.7);
	color: hsla(192, 27.7%, 95.2%, 0.9);
}
input:focus {
	background: hsla(192, 53.7%, 99.2%, 0.9);
	box-shadow: 0 0 25px hsla(192, 56.7%, 75.2%, 0.7);
	outline: hsla(192, 53.7%, 60.2%, 0.7) solid 3px;
	color: hsla(192, 27.7%, 20.2%, 0.75);
}
#主 {
	margin: auto;
	display: flex;
	justify-content: center;
	align-content: space-around;
	align-items: center;
	flex-flow: wrap;
	height: 65.5%;
	max-width: 400px;
}
#副 {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}
#量 {
	width: 44.5%;
}
#生 {
	backdrop-filter: blur(16px);
	background: hsla(192, 66.7%, 56.2%, 0.6);
	box-shadow: 3px 4px 18px hsla(192, 53.7%, 66.2%, 0.55), inset 0 0 0px hsla(192, 53.7%, 70.2%, 0.6);
	height: 42px;
	width: 20%;
	margin-left: 5.5%;
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
	font-weight: 500;
	user-select: none;
	cursor: pointer;
	z-index: 1;
	transition: all 0.15s cubic-bezier(0.5, 0, 0.2, 1);
}
#生:hover {
	background: hsla(192, 53.7%, 45.2%, 0.6);
	box-shadow: 0 0 16px hsla(192, 53.7%, 70.2%, 0.6);
	color: rgba(255, 255, 255, 1);
}
#生:active {
	background: hsla(192, 53.7%, 60.2%, 0.6);
	box-shadow: 0 0 2px hsla(192, 53.7%, 60.2%, 0.7), inset 0 0 18px hsla(192, 53.7%, 60.2%, 0.5);
	color: rgba(255, 255, 255, 0.3);
}
#栏 {
	display: flex;
	justify-content: center;
	align-items: center;
}
#栏 span {
	font-size: 16px;
	color: hsla(192, 5%, 95.2%, 0.8);
	user-select: none;
}
#栏 p {
	position: relative;
	min-height: 25px;
	max-height: 24vh;
	min-width: 90px;
	max-width: 85vw;
	margin: 14px 0;
	padding: 0 6px;
	overflow-x: hidden;
	backdrop-filter: blur(16px);
	background: hsla(192, 53.7%, 56.2%, 0.7);
	box-shadow: 0 0 16px hsla(192, 53.7%, 50.2%, 0.5);
	color: hsla(192, 0%, 100%, 1);
	font-size: 20px;
	font-weight: 500;
	z-index: 1;
}
#栏 p::-webkit-scrollbar {
    width: 6px;
}
#栏 p::-webkit-scrollbar-track {
    background: hsla(192, 23.7%, 56.2%, 0.5);
    border-radius: 3px;
}
#栏 p::-webkit-scrollbar-thumb {
    background: hsla(192, 53.7%, 86.2%, 0.8);
    border-radius: 3px;
}
#栏 p::-webkit-scrollbar-button {
    display: block;
    height: 12px;
}
.隐 {
	background: hsla(192, 23.7%, 66.2%, 0.5) !important;
	box-shadow: inset 1.5px 1.5px 10px hsla(192, 23.7%, 66.2%, 0.7) !important;
}
.双 {
	min-width: 10% !important;
	margin: 32px 0 0 0 !important;
	padding: 0 18px !important;
	font-size: 38px !important;
}
.叒 {
	min-width: 10% !important;
	margin: 28px 0 0 0 !important;
	padding: 0 16px !important;
	font-size: 28px !important;
}
.叕 {
	margin: 20px 0 0 0 !important;
	padding: 0 12px !important;
	font-size: 24px !important;
}

.波 {
	position: absolute;
	pointer-events: none;
}
#生 .波 {
	width: 15%;
	height: 7.2px;
	background: hsla(192, 63.7%, 60.2%, 0.5);
	transition: all 0.7s ease-out !important;
}
#罩 .波 {
	width: 25px;
	height: 25px;
	background: hsla(192, 63.7%, 60.2%, 0.2);
	transition: all 1s ease-out !important;
}

#罩 {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100vh;
	width: 100vw;
	border-radius: 0;
	overflow: hidden;
	z-index: 1;
	user-select: none;
}

@media only screen and (min-width: 768px) {
	#底 {
		/* position: absolute; */
		top: 30px;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 980px;
		display: flex;
		justify-content: center;
	}
	#主 {
		height: 400px;
		margin: 12px 0 0 65px;
	}
	#栏 {
		backdrop-filter: blur(16px);
		height: 400px;
		margin: 14.5px 95px 0 0;
		min-width: 400px;
		box-shadow: inset 0 0 20px hsla(192, 40.7%, 60.2%, 0.25);
		background: hsla(192, 33.7%, 99.2%, 0.1);
        z-index: 1;
	}
	#栏 p {
		margin: 0;
		padding: 6px;
		max-height: 432px;
		max-width: 368px;
	}
	.双,
	.叒,
	.叕 {
		margin: 0 !important;
	}
}

@media (prefers-color-scheme: dark) {
	html {
		background: hsla(192, 33.7%, 2.2%, 0.9);
	}
	h1 {
		color: hsla(192, 73.7%, 60.2%, 0.8);
		font-weight: 500;
	}
	input {
		background: hsla(192, 10.7%, 36.2%, 0.7);
		box-shadow: 0 0 15px hsla(192, 26.7%, 16.2%, 0.5);
		color: hsla(192, 27.7%, 95.2%, 0.5);
		font-weight: 400;
	}
	input::placeholder {
		color: hsla(192, 27.7%, 85.2%, 0.35);
	}
	input:hover::placeholder {
		color: hsla(192, 27.7%, 85.2%, 0.9);
	}
	input:hover {
		background: hsla(192, 63.7%, 75.2%, 0.7);
		box-shadow: 0 0 22px hsla(192, 53.7%, 80.2%, 0.75);
	}
	input:focus {
		background: hsla(192, 10.7%, 26.2%, 0.7);
		box-shadow: 0 0 28px hsla(192, 56.7%, 75.2%, 0.7);
		color: hsla(192, 27.7%, 98.2%, 0.9);
	}
	#生 {
		background: hsla(192, 86.7%, 56.2%, 0.64);
		box-shadow: 3px 4px 12px hsla(192, 33.7%, 40.2%, 0.5), inset 0 0 0px hsla(192, 53.7%, 50.2%, 0.6);
		color: rgba(255, 255, 255, 0.6);
		font-weight: 400;
	}
	#生:active {
		background: hsla(192, 43.7%, 50.2%, 0.6);
		box-shadow: 0 0 2px hsla(192, 53.7%, 60.2%, 0.7), inset 0 0 18px hsla(192, 53.7%, 30.2%, 0.5);
		color: rgba(255, 255, 255, 0.3);
	}
	#栏 span {
		color: hsla(192, 5%, 65.2%, 0.8);
		font-weight: 400;
	}
	#栏 p {
		background: hsla(192, 43.7%, 40.2%, 0.6);
		color: hsla(192, 0%, 98%, 0.7);
		font-weight: 400;
	}
	.隐 {
		background: hsla(192, 23.7%, 40.2%, 0.4) !important;
		box-shadow: inset 1.5px 1.5px 10px hsla(192, 23.7%, 30.2%, 0.4) !important;
	}
	@media only screen and (min-width: 768px) {
		#栏 {
			box-shadow: inset 0 0 24px hsla(192, 23.7%, 36.2%, 0.25);
			background: hsla(192, 43.7%, 8.2%, 0.1);
		}
	}
}