.keyboard-container{display:flex;justify-content:center;margin-top:8px;user-select:none;-webkit-user-select:none}.keyboard{background-color:#e0e0e0;color:#fff;display:grid;font-family:Roboto,sans-serif;font-size:16px;font-weight:300;grid-template-columns:repeat(88,17px);grid-template-rows:repeat(10,34px);letter-spacing:1px;line-height:24px;padding:16px;transform-origin:top left}.key,.keyboard{justify-content:center}.key{align-items:center;background-color:#212121;border-radius:4px;cursor:pointer;display:flex;flex-direction:column;grid-column-end:span 4;grid-row-end:span 2;grid-template-columns:repeat(2,32px);grid-template-rows:repeat(2,32px);margin:2px;padding:5px 9px}.key.is-arrow-left{grid-column-start:60;grid-row-start:9}.key.is-arrow-down{grid-column-start:64;grid-row-start:9}.key.is-arrow-right{grid-column-start:68;grid-row-start:9}.key.is-arrow-up{grid-column-start:64;grid-row-start:7}.key.is-backspace{grid-column-end:span 6}.key.is-column5,.key.is-ctrl-left,.key.is-tab{grid-column-end:span 5}.key.is-ctrl-left{grid-column-start:1}.key.is-backspace{align-items:flex-end}.key.is-capslock{grid-column-end:span 7;grid-column-start:1}.key.is-shift-left{grid-column-end:span 9;grid-column-start:1}.key.is-command{grid-column-end:span 5}.key.is-enter{border-radius:0 4px 4px 4px;grid-column-end:span 7}.key.is-enter .key__top{height:54px}.key.is-center,.key.is-left,.key.is-right{font-size:12px;justify-content:space-between;line-height:20px}.key.is-left{align-items:flex-start}.key.is-right{align-items:flex-end}.key.is-center{align-items:center}.key.is-shift-right{grid-column-end:span 9}.key.is-space{grid-column-end:span 23}.key.is-tab{align-items:flex-start;grid-column-start:1}.key__bottom,.key__top{display:flex;flex-direction:column;justify-content:flex-end}.key__bottom{flex-grow:1}.key.is-delete,.key.is-insert{grid-column-start:60}.key.is-num,.key.is-num-0,.key.is-num-1,.key.is-num-4,.key.is-num-7{grid-column-start:73}.key.is-num-0{grid-column-end:span 8}.key.orifontsize{font-size:inherit!important}.key.is-enter-right,.key.is-plus-right{grid-row-end:span 4}.key.active{box-shadow:0 0 22px #00f9a6;color:#00f9a6;font-size:20px;font-weight:600}#typing-test{position:relative}.overlay{align-items:center;background-color:hsla(0,0%,85%,.6);font-size:1.2857rem;height:120px;justify-content:center;opacity:0;position:absolute;transition:all .8s;width:100%;z-index:1}.overlay,.overlay .acts{display:none}.typing-box{padding-top:10px}.typing-box .typing-options{align-items:center;display:flex;justify-content:center;padding-bottom:20px}.typing-options .item{align-items:center;display:flex;padding:0 2px}.typing-options .item .label{margin-right:5px}.typing-options .countdown{font-size:1.2857rem;font-weight:500}.typing-options .restart{padding:.23rem!important}.typing-options .restart.rotate svg{transform:rotate(180deg);transition:all 1s}.__typing_box{display:flex;flex-wrap:wrap;font-family:Roboto Mono,"sans-serif",Helvetica,Microsoft YaHei;font-size:22px;height:120px;margin:0 auto;max-width:960px;overflow:hidden;transition:opacity .5s;user-select:none;-webkit-user-select:none}.__words{color:rgba(0,0,0,.25);margin:.3rem .4rem}.__words .__correct{color:#000}.__words .__incorrect{color:red}.__words.__incorrect{text-decoration:underline red}.__words char.active{animation:glow .8s ease-out infinite alternate}.__typing_input{background-color:transparent;border:none;color:transparent;height:1px;margin:0;outline:none;padding:0;position:absolute;width:1px;z-index:-100}@keyframes glow{0%{box-shadow:0 2px 0 #fff}to{box-shadow:0 2px 0 #000}}@keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.rotate-loading{animation:rotation 1s linear infinite}.__toggle_checkbox{align-items:center;cursor:pointer;display:inline-block;display:inline-flex;height:12px;margin-right:4px;position:relative;-webkit-user-select:none;user-select:none;width:32px}.__toggle_checkbox .__toggle_checkbox_bar{background-color:#bdc1c6;border-radius:8px;display:block;height:inherit;position:absolute;transition:background-color 80ms linear;width:inherit;z-index:0}.__toggle_checkbox[checked] .__toggle_checkbox_bar{background-color:#94b9f5}.__toggle_checkbox .__toggle_checkbox_knob{background-color:#fff;border-radius:50%;box-shadow:0 1px 3px 0 rgba(0,0,0,.4);display:block;height:16px;position:relative;transition:transform 80ms linear,background-color 80ms linear;width:16px;z-index:1}.__toggle_checkbox[checked] .__toggle_checkbox_knob{background-color:#1a73e8;transform:translate3d(18px,0,0)}