:root{font-family:IBM Plex Sans Arabic,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;text-align:centerß}h1{font-size:2em;line-height:1.1;margin:5px 0;color:#cfffcf;text-align:center}.container{position:relative;display:flex;justify-content:center;align-items:center;flex-direction:column}.inputs{width:92vw;max-width:350px}.center{width:100%;margin:10px auto 0}.row{text-align:center;display:flex;justify-content:center}.row>div{display:block;width:-webkit-fill-available;height:55px;border:1px solid #bbb;margin:4px;text-align:center;font-weight:700;font-size:2.5em;overflow:hidden}.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{margin-top:20px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;width:95%}.keypad>div{margin:5px 4px;width:30px;height:40px;background:#eee;display:inline-block;border-radius:6px;color:#000;text-align:center;line-height:2}.keypad>div.green{background:#5ac85a;color:#fff;transition:all .3s ease-in}.keypad>div.yellow{background:#e2cc68;color:#fff;transition:all .3s ease-in}.keypad>div.grey{background:#a1a1a1;color:#fff;transition:all .3s ease-in}.modal{background:#ffffffb3;position:fixed;width:100%;height:100%;top:0;left:0}.modal div{max-width:480px;background:#fff;padding:40px;border-radius:10px;margin:10% auto;box-shadow:2px 2px 10px #0000004d}.modal .solution{color:#ff004c;font-weight:700;font-size:.8em;text-transform:uppercase;letter-spacing:1px}@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}}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}}