.gsuiKeys {
	position: relative;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.gsuiKey .gsuiKey-row {
	display: none;
}
.gsuiKey-row {
	position: relative;
	box-sizing: border-box;
	height: 1em;
}
.gsuiKeyBlack-row {
	background-color: rgba( 0, 0, 0, .1 );
}
.gsuiKey[data-key="0"],
.gsuiKey[data-key="5"],
.gsuiKey-row[data-key="0"],
.gsuiKey-row[data-key="5"] {
	border-bottom: 1px solid rgba( 0, 0, 0, .2 );
}
.gsuiKey-row > div {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
}

.gsuiKey {
	box-sizing: border-box;
	position: relative;
	height: 1.5em;
	background-image: linear-gradient( 90deg, #888, #eee );
	cursor: default;
}
.gsuiKeyBlack {
	position: absolute;
	z-index: 1;
	width: 65%;
	height: 1em;
	margin-top: -.5em;
	border-radius: 0 .1em .1em 0;
	background-image: linear-gradient( 90deg, #111, #444 );
}
.gsuiKey[data-key="0"] {
	background-image: linear-gradient( 90deg, #888, #ccc );
}
.gsuiKey[data-key="0"]::after {
	counter-increment: octave -1;
	content: "C" counter( octave );
	position: absolute;
	right: .25em;
	bottom: 0;
	color: #000;
	font-size: calc( 6px + .25em );
	font-family: monospace;
}
.gsuiKey.gsui-active {
	background-image: linear-gradient( 90deg, #353b52, #7886bd );
}

.gsuiKey:last-child {
	border-bottom: 0;
}
.gsuiKey[data-key="9"],
.gsuiKey[data-key="7"],
.gsuiKey[data-key="2"] {
	height: 2em;
}