index.css

/*
		h1:not(:first-child) {
			margin-top: 1em;
		}

		.button {
			display: inline-block;
			text-align: center;
			padding: .4em .7em;
			border-radius: 5px;
			box-shadow: 0 1px 5px rgba(0, 0, 0, .7);
			margin: 8px 3px;
			cursor: pointer;
			user-select: none;
			transition: all .1s;
			min-height: 2em;
			line-height: 2em;
			vertical-align: middle;
		}

		.button:hover {
			box-shadow: 0 1px 8px #000;
			background-color: #DDD;
		}

		.button:active {
			box-shadow: 0 0px 2px rgba(0, 0, 0, .5);
		}

		.center {
			text-align: center;
		}
*/

.char {
	padding: 0 .25em;
	font-weight: bold;
	cursor: pointer;
}

.char:not(.active) {
	color: #AAA;
}

header>*:not(:first-child) {
	padding-left: .5em;
}

.gray-button {
	font-weight: bold;
	color: #AAA;
	cursor: pointer;
}

#practice {
	background: #DDD;
	font-weight: bold;
	font-size: 3em;
	border-radius: 5px;
	margin-top: .5rem;
}

#practice.waiting {
	background: #AAA;
}

#practice>* {
	padding: .5em;
	color: #555;
}

#practice pre {
	font-family: inherit;
	white-space: pre-wrap;
	word-wrap: break-word;
	display: inline;
}

#l1-Fin,
#l1-Log>* {
	color: #EEE;
	background-color: #555;
}

#l1-Log>* {
	color: #EEE;
	background: linear-gradient(to right, #555 calc(100% - 2px), #F00 calc(100% - 1px));
}

.charList {
	margin-left: .5em;
	font-weight: bold;
}

.charList>*:not(:first-child) {
	margin-left: .5em;
}

.charList>*:nth-child(odd){
	color: #777;
}

#score-container {
	margin-bottom: 1em;
	font-size: 2em;
}

#score-container>* {
	padding: 0 1em;
}

tr>* {
	padding: 0 1em;
}