.note {
	--y: calc( var(--key) * var(--shift-y) );
	top: calc( 100% - var(--base-y) - var(--y) );
}

.key { 
	height: var(--note-height);
	border: 1px solid black;
	border-width: 0 0 1px 0;
	position:relative;
}

.key::before, .key::after {
	content: ' ';
	position:absolute;
	left: 0;
	top: 0;
	height: var(--note-height);
}

.key::after { 
	content: ' ';
	font-size: .75rem;
	width: var(--note-width);
	left: calc( 2.5 * var(--note-width) );
	top: -2px;
}

.key.black::before {
	left:0;
	background-color: #000;
	width: calc( 2 * var(--note-width) );
}

.key[note="0"]::after { content: 'C' }
.key[note="1"]::after { content: 'C#' }
.key[note="2"]::after { content: 'D' }
.key[note="3"]::after { content: 'D#' }
.key[note="4"]::after { content: 'E' }
.key[note="5"]::after { content: 'F' }
.key[note="6"]::after { content: 'F#' }
.key[note="7"]::after { content: 'G' }
.key[note="8"]::after { content: 'G#' }
.key[note="9"]::after { content: 'A' }
.key[note="10"]::after { content: 'A#' }
.key[note="11"]::after { content: 'B' }