main {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.group {
	display: flex;
	justify-content: space-between;
}

.group.horizontal {
	flex-direction: row;
}

.group.vertical {
	flex-direction: column;
}

.group.gaps {
	gap: 0.5rem;
}

.fill {
	flex-grow: 1;
}

.group.horizontal.fill {
	width: 100%;
}
.group.vertical.fill {
	height: 100%;
}

.xui toolbar.right {
	justify-content: space-between;
	position: absolute;
	right: 0;
	width: calc(5rem + env(safe-area-inset-right));
}

body:not(.started) .xui toolbar.right button {
	opacity: 0.2;
	pointer-events: none;
}

.xui toolbar.right menu {
	height: 100vh;
	max-height: none !important;
	box-sizing: border-box;
	flex-direction: row;
	gap: 0.3rem;
	padding-top: calc(env(safe-area-inset-top) + 0.4rem);
	padding-bottom: calc(env(safe-area-inset-bottom) + 0.4rem);
}

#spectrogram {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}

#spectrogram canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.3s;
}
body.ui-light #spectrogram canvas {
	filter: invert(1) hue-rotate(180deg);
}

#spectrogram-scale {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 0.85rem;
	text-shadow: 0 0 3px #000;
	transition: transform 0.5s ease-out, opacity 0.5s;
}
#spectrogram:not(.scale) #spectrogram-scale {
	opacity: 0;
	transform: translateX(-3rem);
}

#spectrogram-calibration {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 10%;
	background: #fff5;
	opacity: 0;
}
#spectrogram-calibration.show {
	animation: calibration-flash 1s ease-out;
}
@keyframes calibration-flash {
	from { opacity: 1 }
	to { opacity: 0 }
}

#spectrogram-scale > div {
	position: absolute;
	width: 100%;
	padding: 0 1rem;
	box-sizing: border-box;
	white-space: nowrap;
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 0;
}

#spectrogram-scale > div.dominant {
	opacity: 0;
	color: #fff;
}
#spectrogram-scale > div.dominant.show {
	opacity: 1;
}

#spectrogram-scale > div > div {
	background: linear-gradient(to right, currentColor, transparent 70%);
	height: 1px;
	opacity: 0.3;
	flex-grow: 1;
}
#spectrogram-scale > div.note > div {
	background: linear-gradient(to left, transparent, currentColor 3rem);
}

#spectrogram-scale > div.dominant > div {
	opacity: 1;
	order: 0;
	background: linear-gradient(to right, transparent, currentColor 50%);
}

#spectrogram-scale > div > span {
	display: block;
	margin: 0 0.5rem 0 0;
}

#spectrogram-scale > div.dominant > span {
	margin: 0 0 0 -1px;
	order: 1;
	background-color: #fff;
	color: #000;
	text-shadow: none;
	padding: 0.2em 0.3em;
	border: solid #000 1px;
	border-radius: 0.3rem;
}

#spectrogram-scale > div.dominant#dominant-0 {
	font-size: 150%;
	z-index: 1;
}

audio {
	opacity: 0.2;
	border-radius: 0;
}

#light {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	transition: background-color 0.3s;
}
body:not(.light) #light {
	opacity: 0;
	pointer-events: none;
}

#button-range {
	height: auto;
	padding: 0.25em 0.7rem;
	align-items: flex-end;
}

#menu-speed {
	flex-direction: column;
}

#menu-speed radio.vertical {
	flex-grow: 1;
}

#button-freeze {
	margin-top: 0.5rem;
}

button.💙 {
	background-color: #527;
}

#sevensystems {
	width: 5em;
}

button#start {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 6rem;
	height: 6rem;
	border-radius: 100%;
}

button#start abbr {
	display: block;
	font-size: 1.7rem;
	margin-bottom: 0.2rem;
}

div#reset {
	position: fixed;
	bottom: 10vh;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	color: #f80;
	transition: opacity 0.2s 0.5s;
}
div#reset:not(.show) {
	opacity: 0;
	pointer-events: none;
}

div#reset button {
	margin-top: 0.5rem;
}

div.xui.dialog ul {
	text-align: left;
}