body {
	text-align: center;
	font-family: sans-serif;
	max-width: 86ch;
	margin: 0 auto;
}
* {
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	text-decoration: none;
	font-weight: normal;
	font-size: 1rem;
}
body > *, h1, header, #final-guess, #shill {
	margin: 2rem 0;
}
header, footer {
	font-size: 0.69rem;
}
footer {
	color: lightgray;
}
h1 {
	font-size: 3rem;
	font-weight: normal;
	padding: 0;
}
h1 span {
	color: red;
}
h2 {
	font-size: 1.33rem;
	font-weight: bold;
	padding: 0;
}
@keyframes cool-fade {
	from { opacity: 0; }
}
main > * {
	animation: 0.5s ease-in cool-fade;
}
@media (not (any-pointer: coarse)) { #keyboard-jail {
	display: none;
}}
#keyboard-jail button {
	font-size: 1.33rem;
}
#keyboard-jail textarea {
	position: fixed;
	opacity: 0;
}
#guess-count {
	font-weight: bold;
}
#guesses {
	padding: 0.5rem;
}
#guesses li, #final-guess li {
	display: inline-block;
	background: #eee;
	font-size: 2.5rem;
	font-family: monospace;
	border: 2px solid #ccc;
	border-radius: 0.5rem;
	padding: 0.33rem 0.69rem;
	margin: 0.2rem;
}
@keyframes guess-idle {
	50% { color: #600; text-shadow: 0 0 0.1em #f004; }
}
@keyframes guess-pop {
	0% { transform: scale(1.5); }
	50% { transform: scale(3); }
}
@keyframes guess-glow-wrong {
	0% { color: #f00; }
}
@keyframes guess-glow-right {
	0% { color: #0f0; }
}
@keyframes guess-halo {
	50% { text-shadow: 0 0 0.15em #ff06; }
}
#guesses li span {
	display: inline-block;
	animation: 7s linear infinite guess-idle, 0.25s ease-out guess-pop, 0.5s ease-out guess-glow-wrong;
}
#final-guess li {
	font-size: 6rem;
}
#final-guess li span {
	display: inline-block;
	animation: 1.69s ease-out guess-pop, 0.69s ease-in guess-glow-right, 2.69s ease-in-out guess-halo;
}
#shill > * {
	margin: 0.5rem 0;
}
#shill pre {
	text-align: left;
	background: #ffe;
	border: 1px dashed #888;
	padding: 0.5ch;
	cursor: pointer; cursor: copy;
	overflow: scroll;
}