@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
 *, *::before, *::after {
	 padding: 0;
	 margin: 0 auto;
	 box-sizing: border-box;
}
 body {
	 font-family: Lato, sans-serif;
	 background-color: #222;
	 color: #fff;
	 padding: 3em 1em;
	 text-align: center;
}
 input, button {
	 font-family: inherit;
	 font-size: inherit;
	 background: none;
	 border: none;
	 margin: 0;
}
 a {
	 color: aqua;
}
 a:hover, a:focus {
	 opacity: 0.5;
}
 p, .jest-lite-report {
	 max-width: 560px;
}
 .keys {
	 display: grid;
	 grid-template-columns: repeat(10, 3em);
	 grid-template-rows: repeat(3, 3em);
	 justify-content: center;
	 gap: 0.5em;
	 margin-block: 3em 2em;
	 perspective: 10em;
	 transform-style: preserve-3d;
}
 .key {
	 width: 100%;
	 height: 100%;
	 transform: translateX(var(--tx, 0));
	 transform-style: preserve-3d;
}
 .key::before, .key::after {
	 content: attr(letter);
	 position: absolute;
	 inset: 0;
	 border-radius: 0.25em;
	 padding-right: 1.25em;
}
 .key::before {
	 color: #000;
	 border: 3px solid;
	 transform: translateY(0.25em);
	 filter: blur(var(--tz, 0.25em));
	 transition: filter 0.5s;
}
 .key::after {
	 background-color: var(--bg, #000 0);
	 color: var(--clr, #fff);
	 border: 1px solid #fff 5;
	 font-size: 1.25em;
	 transform: translateZ(var(--tz, 0.1em));
	 transition: transform var(--td, 0.5s), background-color var(--td, 0.5s);
}
 .key:nth-child(-n + 10) {
	 --tx: -0.75em;
}
 .key:nth-child(n + 21) {
	 --tx: 1em;
}
 .key.light {
	 --bg: #0ff 9;
	 --tz: 0.25em;
	 --td: 0.25s;
}
 .key.select {
	 --bg: hotpink;
	 --clr: #000;
	 --td: 0.25s;
	 --tz: 0.5em;
}
 .currentStep {
	 font-size: 1.5em;
	 font-weight: bold;
	 color: #0ff 9;
	 transform: scale(1);
	 transition-property: color;
	 transition-duration: 50ms;
}
 .currentStep.light {
	 color: #fff;
	 transition-duration: 0ms;
}
 .currentStep.select {
	 color: hotpink;
}
 .currentStep:not(:empty) {
	 padding: 0.5em;
}
 .currentStep:not(:empty) + .inputContainer {
	 display: none;
}
 .inputContainer {
	 display: flex;
	 justify-content: center;
	 padding-block: 0.5em;
}
 .inputContainer input {
	 padding: 0.5em;
	 color: #fff;
	 border: 1px solid #0ff 9;
	 border-radius: 2em 0 0 2em;
}
 .inputContainer button {
	 padding: 0.5em 2em 0.5em 1.5em;
	 color: #fff;
	 background-color: #0ff 9;
	 border-radius: 0 2em 2em 0;
}
 p {
	 padding: 1em;
	 margin-top: 2em;
	 background-color: #fff 1;
	 border: 1px solid #fff 2;
}