body{text-align:center;margin:0;font-family:verdana;font-size:1em}h1{color:#333;border-bottom:1px solid #eee;margin:0 0 30px;padding:20px 0;font-size:1.2em}.row{text-align:center;display:flex;justify-content:center}.row>div{display:block;text-align:center;text-transform:uppercase;border:1px solid #bbb;width:clamp(40px,12vw,60px);height:clamp(40px,12vw,60px);margin:3px;font-size:clamp(1.5em,5vw,2.5em);font-weight:700;line-height:clamp(40px,12vw,60px)}.row>div.green{--background:#5ac85a;--border-color:#5ac85a;animation:flip .5s ease forwards}.row>div.grey{--background:#a1a1a1;--border-color:#a1a1a1;animation:flip .6s ease forwards}.row>div.yellow{--background:#e2cc68;--border-color:#e2cc68;animation:flip .5s ease forwards}.row>div:nth-child(2){animation-delay:.2s}.row>div:nth-child(3){animation-delay:.4s}.row>div:nth-child(4){animation-delay:.6s}.row>div:nth-child(5){animation-delay:.8s}.row.current>div.filled{animation:bounce .2s ease-in-out forwards}.keypad{max-width:500px;margin:20px auto;padding:0 5px}.keypad>div{display:inline-flex;cursor:pointer;user-select:none;background:#eee;border-radius:6px;justify-content:center;align-items: center;width:clamp(28px,8vw,40px);height:clamp(36px,10vw,50px);margin:4px;font-size:clamp(.7em,2.5vw,1em)}.keypad>div.key-action{width:clamp(50px,14vw,65px);font-size:clamp(.6em,2vw,.8em);font-weight:700}.keypad>div.green{color:#fff;background:#5ac85a;transition:all .3s ease-in}.keypad>div.yellow{color:#fff;background:#e2cc68;transition:all .3s ease-in}.keypad>div.grey{color:#fff;background:#a1a1a1;transition:all .3s ease-in}.modal{position:fixed;background:#ffffffb3;width:100%;height:100%;top:0;left:0}.modal div{background:#fff;border-radius:10px;max-width:480px;margin:10% auto;padding:40px;box-shadow:2px 2px 10px #0000004d}.modal .solution{color:#ff004c;text-transform:uppercase;letter-spacing:1px;font-size:.8em;font-weight:700}@media (max-width:400px){h1{margin:0 0 15px;padding:12px 0;font-size:1em}.modal div{margin:20% 15px;padding:20px}}@keyframes flip{0%{transform:rotateX(0);background:#fff;border-color:#333}45%{transform:rotateX(90deg);background:#fff;border-color:#333}55%{transform:rotateX(90deg);background:var(--background);border-color:var(--border-color)}to{transform:rotateX(0);background:var(--background);border-color:var(--border-color);color:#eee}}@keyframes bounce{0%{transform:scale(1);border-color:#ddd}50%{transform:scale(1.2)}to{transform:scale(1);border-color:#333}}