html,body{margin:0;padding:0}body{display:flex;font-family:sans-serif;flex-direction:column;gap:6rem;height:100vh;justify-content:center;align-items:center}.letter-container{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:2rem;width:100%}.letter-container .title{font-weight:600;font-size:2rem}.letter-container .letters{display:flex;flex-direction:row;gap:.5rem;padding-bottom:2rem}.letter-container .button{background:#2196f3;padding:1rem 2rem;border-radius:.4rem;color:#fff;cursor:pointer}.letter-container .button.disabled{opacity:.5;pointer-events:none}.letter-container .letters div{--width: 3rem;background:#eee;width:var(--width);height:calc(3*var(--width)/2);text-align:center;font-size:3rem;border:1px solid #ccc;border-radius:.2rem;align-items:center;position:relative;justify-content:center;display:flex}.letter-container .letters div::before{content:attr(data-num);font-size:1rem;position:absolute;top:5.5rem}.letter-container .letters div:not(.focus).status-correct{outline:2px solid #4caf50}.letter-container .letters div:not(.focus).status-incorrect{outline:2px solid #ff5722}.letter-container .letters div.focus{outline:2px solid #292929}.keyboard-container{display:flex;flex-direction:column;gap:1rem}.keyboard-container .row{display:flex;gap:1rem;justify-content:space-between}.keyboard-container .row:nth-child(2){padding-inline:2.4rem}.keyboard-container .row:nth-child(3){padding-inline:5rem 10.1rem}.keyboard-container .row .letter{--width: 4rem;background:#eee;aspect-ratio:1;width:var(--width);height:var(--width);line-height:4rem;text-align:center;font-size:3rem;border:1px solid #ccc;border-radius:.2rem}.success-container{z-index:99;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);align-items:center;justify-content:center;display:none}.success-container.visible{display:flex}.success-container .inner{background-color:#fff;padding:5rem;border-radius:1rem}