style.css

html,
body {
	height: 100%;
	user-select: auto;
}
body {
	color-scheme: dark;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 16px;
	font-family: "Montserrat", sans-serif;
	background-color: #22222a;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23000' fill-opacity='0.1'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E" );
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background-color: #222; }
::-webkit-scrollbar-thumb { background-color: #777; }

/* .......................................................................... */
#head {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	margin-bottom: 10px;
	padding-top: 32px;
	gap: 12px;
}
gsui-analysertime {
	width: 200px;
	height: 32px;
	border-radius: 8px;
	background-color: #0003;
}
#analyserBottom gsui-analysertime {
	width: 100%;
}
#analyserBottom {
	width: 100%;
	margin-top: 20px;
}
#analyserBottom:empty {
	display: none;
}
#title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	position: relative;
	z-index: 1;
	font-size: 24px;
	font-weight: bold;
	white-space: nowrap;
}
#title span:first-child {
	text-shadow: 0 0 20px #fff4;
}
#title span:last-child {
	font-size: 10px;
	color: #999;
}

/* .......................................................................... */
#myPiano {
	position: relative;
	display: flex;
	gap: 8px;
	padding-right: calc( 8px + 16px );
	user-select: none;
}
#velocityLabel {
	display: flex;
	width: 16px;
	align-items: center;
	writing-mode: vertical-rl;
	justify-content: space-between;
	font-size: 12px;
	opacity: .4;
}
#niceBorder {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 110px;
	min-height: 60px;
	max-width: calc( 100% - 4px * 2 );
	padding: 4px;
	border-radius: 4px;
	background-image: linear-gradient( 90deg, #ff4040, #d07fff );
	box-shadow: 8px 8px 0px #0003;
}
#myPiano gsui-keys {
	flex: 1;
}

/* .......................................................................... */
#octaves-loaders {
	display: none;
	width: 100%;
	height: 4px;
	background-color: #0008;
}
#octaves-loaders:has( .octave-needed.octave-loading ) {
	display: flex;
}
.octave-loader {
	flex: 1;
	background-color: #afa;
}
.octave-loader:not( .octave-needed ) {
	display: none;
}
.octave-loading {
	animation: octave-loading-anim .2s alternate infinite linear;
}
@keyframes octave-loading-anim {
	from { background-color: transparent; }
	to { background-color: #fffa; }
}

/* .......................................................................... */
#pianoTop {
	position: absolute;
	inset: 0 calc( 16px + 8px );
	top: -540px;
	bottom: 100%;
	pointer-events: none;
}
#pianoSVGGradients {
	position: absolute;
}
#pianoTop svg[ viewBox ] {
	position: absolute;
	bottom: 0;
	fill: url( #pianoGradient );
}
#pianoTop svg:last-child {
	transform: skewY( 345deg ) scaleX( .9 );
	transform-origin: left;
	fill: url( #pianoGradient2 );
}

/* .......................................................................... */
#foot {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-top: auto;
	gap: 12px;
	max-width: 470px;
	padding: 20px 6ch;
	font-size: 12px;
	text-align: center;
	color: #fff6;
/*	background-color: indianred;*/
}
#foot a {
	color: inherit;
}
#foot i {
	white-space: nowrap;
}
#copyright {
	font-weight: bold;
	color: inherit;
}


@media ( max-width: 450px ) {
	#head {
		flex-direction: column;
	}
}