body.tts {
	background: linear-gradient(#fe4, #ffb);
	display: grid;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	margin: 0;
	min-height: 100vh;
	padding: 0;
	perspective: 1000px;
	overflow: hidden scroll;
	width: 100vw;
}

header.tts {
	background:
		conic-gradient(
			#fd7 25%,
			#fc4 25%,
			#fc4 50%,
			#fd7 50%,
			#fd7 75%,
			#fc4 75%
		);
	background-size: 10px 10px;
	border-radius: calc(1em + 5px) / 50%;
	box-shadow:
		inset 0 3px 0 2px #ffb,
		inset 0 -3px 0 2px #fb3;
	height: fit-content;
	inset: 5px 5px auto;
	padding: 5px 0;
	position: fixed;
}

header h1 {
	font-weight: normal;
	margin: 0;
	text-align: center;
}


main.tts {
	align-self: center;
	background: #ffaa;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-self: center;
	max-width: 50vw;
	padding: 20px;
	z-index: 5;
}

.pill {
	background: #ffd;
	border-radius: 1.5ch / 50%;
	box-shadow: 0 2px 0 0 #dd9;
	font-weight: normal;
	height: fit-content;
	margin: 0 auto;
	padding: 5px 1ch;
	text-align: center;
	width: 50%;
}

.textBox {
	--background: #fff;
	--border: #fc7;
	--shadow: #fed;
	background: var(--background);
	border: 2px solid var(--border);
	border-radius: 1ch;
	box-shadow:
		inset 0 3px var(--shadow),
		inset 3px 0 var(--shadow),
		inset -3px 0 var(--shadow);
	font-size: 16px;
	padding: .5em;
	transition: .1s all;
}

textarea.textBox {
	max-width: 80ch;
	min-height: 7em;
	resize: vertical;
	width: calc(100% - 20px);
}

	textarea.textBox:where(:focus, :hover) {
		--background: #eff;
		--border: #088;
		--shadow: #cff;
	}

	textarea.textBox:focus {
		--background: #7dd;
		outline: 0;
	}

select {
	--background: #fff;
	--border: #fc7;
	--shadow: #fed;
	background: var(--background);
	border: 2px solid var(--border);
	border-radius: 1ch;
	box-shadow:
		inset 0 3px var(--shadow),
		inset 3px 0 var(--shadow),
		inset -3px 0 var(--shadow);
	font-size: 16px;
	padding: .5em;
}

#savedVoices,
#languageSelect{
	transition: .1s all;
	width:100%;
}

input[type="number"] {
	--background: #fff;
	--border: #fc7;
	--shadow: #fed;
	background: var(--background);
	border: 2px solid var(--border);
	border-radius: 1ch;
	box-shadow:
		inset 0 3px var(--shadow),
		inset 3px 0 var(--shadow),
		inset -3px 0 var(--shadow);
	font-size: 16px;
	padding: .5em;
}

.buttonContainer {
	display: flex;
	gap: 10px;
	justify-content: center;
	width: 100%;
}

button,
.button {
	--background: #f60;
	--topborder: #d50;
	--reflection: var(--topborder);
	--midborder: #830;
	--botborder: #620;
	background: var(--background);
	border: 4px solid;
	border-color:
		var(--topborder)
		var(--midborder)
		var(--botborder);
	border-radius: 10px;
	box-shadow:
		inset 0 1px 0 0 var(--midborder),
		inset 0 .6em 0 0 var(--reflection);
	color: #000;
	font-size: larger;
	width: fit-content;
	padding: .6em 2ch .3em;
	text-align: center;
	text-shadow: 2px 1px 0 var(--reflection);
	transition: .1s all;
}

:where(button, .button) span {
	display: block;
	font-size: 2em;
	position: absolute;
	text-align: center;
	width: 100%;
}

	:where(button, .button).yellow:not(:has(:checked)) {
		--background: #fc0;
		--topborder: #da0;
		--reflection: #fd3;
		--midborder: #a80;
		--botborder: #640;
		text-shadow: 2px 1px 0 #ffa;
	}

	/* TODO: I clearly fucked up specificity here but fuck it we ball */
	:where(button, .button, .button.yellow):not(:has(:checked)):hover {
		--topborder: #aff;
		--midborder: #6dd;
		--botborder: #088;
		--reflection: var(--topborder);
		--background: #9ee;
		cursor: pointer;
	}

	button:disabled {
		--background: #ccc;
		--topborder: #eee;
		--reflection: #fff;
		--midborder: #999;
		--botborder: #666;
		color: #000;
		cursor: not-allowed;
	}

#input,
#output:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#controlsContainer:not([hidden]) {
	display: grid;
	gap: 20px;
}

#controlsContainer .twocol{
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr 1fr;
}

#controlsContainer .twocol h2 {
	grid-column: 1 / 3;
}

#controlsContainer label.control {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

#controlsContainer input[type="range"], .vars input[type="range"] {
	appearance: none;
	align-self: center;
	background:
		linear-gradient(
			transparent calc(50% - 2px),
			#222 calc(50% - 2px),
			#555 calc(50% + 2px),
			transparent calc(50% + 2px)
		),
		repeating-linear-gradient(
			90deg,
			#555 0px 4px,
			transparent 4px 16px),
		repeating-linear-gradient(
			90deg,
			#aaa 0px 4px,
			transparent 4px 16px);
	background-repeat:
		repeat,
		no-repeat;
	background-size:
		100% 100%,
		100% 50%,
		100% 100%;
	height: 1em;
	outline: none;
	width: 90%;
}

	#controlsContainer input[type=range]::-moz-range-thumb,
	#controlsContainer input[type=range]::-webkit-slider-thumb {
		--top: #fdc;
		--border: #c60;
		--bg: #f60;
		appearance: none;
		background: var(--bg);
		border: 3px solid;
		border-color: var(--top) var(--border) var(--border);
		border-radius: 4px;
		box-shadow: 0 0 0 2px #000;
		cursor: grab;
		width: 6px;
		height: 200%;
	}

	#controlsContainer input[type=range]:active::-moz-range-thumb,
	#controlsContainer input[type=range]:active::-webkit-slider-thumb {
		--top: #cff;
		--border: #088;
		--bg: #0ff;
		cursor: move;
	}

#randomize {
	grid-column: 1/3;
	justify-self: center;
}

#intonation,
#voicetype {
	display: flex;
	justify-content: center;
	gap: 10px;
}

:where(#intonation, #voicetype) label {
	cursor: pointer;
	height: 1.5em;
	padding: 0 !important; /* TODO: of course new specificity bs got introduced */
	position: relative;
	width: 1.5em !important;
}

:where(#intonation, #voicetype) span {
	line-height: 0.7;
}

:where(#intonation, #voicetype) input[type=radio] {
	height: 0;
	opacity: 0;
	position: absolute;
	width: 0;
}

#controlsContainer:not([hidden]) + .buttonContainer {
	padding-top: 20px;
}

#status {
	--border: #ccc;
	--shadow: #eee;
	color: #555;
	margin: auto;
	padding: .2em;
	text-align: center;
	width: 90%;
}

#audioContainer #playButton {
	height: 40px;
	padding: 0;
	position: relative;
	width: 2.5em;
}

#audioContainer #playButton span { line-height: 0;}

#audioContainer #downloadButton {
	height: 32px;
	line-height: 1.7;
	padding: 0 1ch;
}

dialog:is([open]) {
	background: #ffe7a4;
	border-radius: 8px;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 1);
	border-color: #fff;
	border-width: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	position: absolute;
	width: 30em;
	z-index: 4;
	transform: translate(0, 50%);
}

.voiceslist {
	overflow-y: auto;
	height: 20em;
}

.voiceslist .voice {
	background:#00000011;
	border-radius: 8px;
	margin-bottom: .5em;
	padding-bottom: 1%;
}

.voiceslist .voice .voiceElem{
	vertical-align: middle;
}

.voiceslist .voice button.voiceElem{
	float:right;
}

footer {
	display: flex;
	inset: auto auto 0 0;
	justify-content: space-between;
	position: fixed;
	width: 100%;
	z-index: 3;
}

.footer-left {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: 8px;
}

footer a.button {
	background: #f60;
	border: 6px solid;
	border-color: #fdc #c60 transparent #c60;
	border-radius: 8px 8px 0 0;
	box-shadow: 0 0 0 4px #000;
	color: #000;
	font-size: 2em;
	margin: 0 4px;
	padding: 0.5ch 2ch 0;
	text-decoration: none;
	transition: 0.1s all;
}

footer a.button:hover {
	background: #0ff;
	border-color: #cff #088 transparent #088;
}

/* TODO: This is a mess lol */
footer #lensdeer {
	color: #000;
	display: flex;
	filter: grayscale(1);
	font-size: 16px;
	gap: .5ch;
	height: 16px;
	image-rendering: pixelated;
	inset: -24px 0 auto auto;
	margin-right: 4px;
	opacity: .5;
	position: absolute;
	text-align: right;
	text-decoration: underline dotted;
	transition: .2s all;
	white-space: nowrap;
	width: 16px;
	
	img { width: 16px;}
}

	footer #lensdeer:hover{
		background: transparent;
		filter: none;
		opacity: 1;
		right: calc(16px + 12ch);
	}


	body.tts::before,
	body.tts::after {
		inset: auto auto 0 -50%;
		perspective: inherit;
		position: fixed;
		width: 200%;
	}

	/* Floor */
	body.tts::after {
		background:
			radial-gradient(transparent, #ff9 75%),
			radial-gradient(
				circle at 75% 25%,
				#ff8 20%,
				transparent 20%
			),
			radial-gradient(
				circle at 0% 75%,
				#ff8c 15%,
				transparent 15%
			),
			radial-gradient(
				circle at 50% 75%,
				#ff8c 20%,
				transparent 15%
			),
			radial-gradient(
				circle at 100% 75%,
				#ff8c 15%,
				transparent 15%
			),
			radial-gradient(
				circle at 25% 25%,
				#ff8 20%,
				#fd2 20% 25%,
				transparent 25%
			),
			radial-gradient(
				circle at 75% 75%,
				#fd2 20%,
				transparent 20%
			),
			#fe4;
		background-size:
			100% 100%,
			250px 250px,
			250px 250px,
			250px 250px,
			250px 250px,
			250px 250px,
			250px 250px,
			100% 100%;
		content: '';
		height: 75%;
		transform: rotateX(90deg);
		transform-origin: 50% 100%;
		z-index: 0;
	}

	/* Background */
	body.tts::before {
		animation: background 240s infinite linear;
		background:
			linear-gradient(
				#fe4,
				transparent 30% 60%,
				#ff8
			),
			radial-gradient(
				circle at 75% 25%,
				#ff8 20%,
				transparent 20%
			),
			radial-gradient(
				circle at 0% 75%,
				#ff8c 15%,
				transparent 15%
			),
			radial-gradient(
				circle at 50% 75%,
				#ff8c 20%,
				transparent 15%
			),
			radial-gradient(
				circle at 100% 75%,
				#ff8c 15%,
				transparent 15%
			),
			radial-gradient(
				circle at 25% 25%,
				#ff8 20%,
				#fd2 20% 25%,
				transparent 25%
			),
			radial-gradient(
				circle at 75% 75%,
				#fd2 20%,
				transparent 20%
			),
			transparent;
		background-size:
			100% 100%,
			250px 250px,
			250px 250px,
			250px 250px,
			250px 250px,
			250px 250px,
			250px 250px,
			100% 100%;
		content: "";
		height: 100%;
		opacity: .5;
		transform:
			translateZ(-500px)
			rotateX(-20deg);
		transform-origin: 50% 50%;
		z-index: 2;
	}

		@keyframes background {
			from {
				background-position-x:
					0%,
					0%,
					0%,
					0%,
					0%,
					0%,
					0%,
					0%;
			};
			to {
				background-position-x:
					0,
					100%,
					100%,
					100%,
					100%,
					100%,
					100%,
					0;
			};
		}

@media screen and (max-width: 770px) {
	body {
		grid-template-rows: auto 1fr auto;
		gap: 10px;
	}

	header,
	footer {
		position: relative;
	}

	footer a.button { font-size: 1.5em;}

	main {
		width: calc(90% - 40px);
		max-width: unset;
	}
}

@media screen and (max-width: 480px) {
	:where(#input, #output:not[hidden]) #controlsContainer:not([hidden]) {
		display: flex;
		flex-direction: column;
	}
}

@media (prefers-reduced-motion) {
	* {
		animation: none;
		transition: none;
	}
}