body{background:#121213;color:#fff;font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;font-size:1em;margin:0;text-align:center}.header{border-bottom:1px solid #3a3a3c;color:#fff;font-size:1.4em;letter-spacing:.1em;margin:0 0 40px;padding:16px 0;position:relative;text-transform:uppercase}.header,.header-info-btn{align-items:center;display:flex;font-weight:700;justify-content:center}.header-info-btn{background:#0000;border:1px solid #3a3a3c;border-radius:50%;color:#818384;cursor:pointer;font-size:.7em;height:32px;position:absolute;right:16px;width:32px}.header-info-btn:active{transform:scale(.95)}.row{display:flex;justify-content:center}.row,.row>div{text-align:center}.row>div{border:2px solid #3a3a3c;color:#fff;display:block;font-size:2em;font-weight:700;height:50px;line-height:50px;margin:3px;text-transform:uppercase;width:50px}.row>div.filled{border-color:#565758}.row>div.green{--background:#538d4e;--border-color:#538d4e;animation:flip .5s ease forwards}.row>div.grey{--background:#3a3a3c;--border-color:#3a3a3c;animation:flip .6s ease forwards}.row>div.yellow{--background:#b59f3b;--border-color:#b59f3b;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{bottom:60px;box-sizing:border-box;left:50%;margin:20px auto;max-width:520px;padding:0 8px;position:fixed;transform:translateX(-50%);width:100%}.keypad-row{display:flex;justify-content:center;margin-bottom:6px}.keypad-key{background:#818384;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.9em;font-weight:700;height:50px;line-height:50px;margin:0 3px;text-align:center;text-transform:uppercase;-webkit-user-select:none;user-select:none;width:36px}.keypad-key:active{transform:scale(.95)}.keypad-key.wide{font-size:.7em;width:60px}.keypad-key.green{background:#538d4e}.keypad-key.green,.keypad-key.yellow{color:#fff;transition:all .3s ease-in}.keypad-key.yellow{background:#b59f3b}.keypad-key.grey{background:#3a3a3c;color:#fff;transition:all .3s ease-in}.modal{background:#121213cc;height:100%;left:0;position:fixed;top:0;width:100%}.modal-content{background:#1a1a1b;border-radius:10px;box-shadow:2px 2px 10px #00000080;color:#fff;margin:10% auto;max-width:480px;padding:40px}.modal-buttons{display:flex;gap:12px;justify-content:center}.modal .solution{color:#538d4e;font-size:.8em;font-weight:700;letter-spacing:1px;text-transform:uppercase}.info-modal-content{max-height:70vh;overflow-y:auto;text-align:left}.info-modal-content h2{margin-top:0;text-align:center}.info-modal-content h3{color:#818384;font-size:.9em;letter-spacing:.05em;margin-bottom:8px;text-transform:uppercase}.info-modal-content p{font-size:.9em;line-height:1.5}.info-modal-content ol{font-size:.9em;line-height:1.8;padding-left:20px}.info-modal-content a{color:#538d4e}.info-section{margin-bottom:20px}.info-section:last-of-type{margin-bottom:24px}.info-modal-buttons{display:flex;gap:12px;justify-content:center}.color-legend{display:flex;flex-direction:column;gap:10px}.color-legend-row{align-items:center;display:flex;font-size:.9em;gap:12px}.color-example{align-items:center;border-radius:4px;display:flex;flex-shrink:0;font-size:1.2em;font-weight:700;height:36px;justify-content:center;text-transform:uppercase;width:36px}.color-example.green{background:#538d4e}.color-example.yellow{background:#b59f3b}.color-example.grey{background:#3a3a3c}.hints-btn-container{margin:12px 0 200px;text-align:center}.hints-btn{background:#818384;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:.9em;font-weight:700;letter-spacing:.05em;padding:8px 24px;text-transform:uppercase;-webkit-user-select:none;user-select:none}.hints-btn:active{transform:scale(.95)}.hints-drawer-overlay{background:#12121399;height:100%;left:0;position:fixed;top:0;width:100%;z-index:10}.hints-drawer{background:#1a1a1b;border-radius:16px 16px 0 0;bottom:0;box-shadow:0 -4px 20px #00000080;left:0;max-height:50vh;overflow-y:auto;position:fixed;transform:translateY(100%);transition:transform .3s ease;width:100%;z-index:11}.hints-drawer.open{transform:translateY(0)}.hints-drawer-header{align-items:center;border-bottom:1px solid #3a3a3c;display:flex;font-size:1.1em;font-weight:700;justify-content:space-between;letter-spacing:.05em;padding:16px 20px 8px;text-transform:uppercase}.hints-drawer-close{background:none;border:none;color:#818384;cursor:pointer;font-size:1.5em;line-height:1;padding:0 4px}.hints-drawer-body{padding:12px 20px 24px}.hint-row{align-items:baseline;border-bottom:1px solid #2a2a2b;display:flex;justify-content:space-between;padding:10px 0}.hint-row:last-child{border-bottom:none}.hint-label{color:#818384;flex-shrink:0;font-size:.8em;font-weight:700;margin-right:12px;text-transform:uppercase}.hint-value{color:#fff;font-size:.85em;text-align:right}.hint-reveal-btn{background:#3a3a3c;border:none;border-radius:4px;color:#818384;cursor:pointer;font-size:.8em;font-weight:700;padding:4px 14px;text-transform:uppercase}.hint-reveal-btn:active{transform:scale(.95)}.hint-reveal-btn:disabled{cursor:default;font-weight:400;opacity:.4;text-transform:none}.hint-reveal-btn:disabled:active{transform:none}.hints-note{color:#606062;font-size:.75em;margin-top:16px;text-align:center}@media (max-width:600px){.row>div{font-size:1.2em;height:30px;line-height:30px;margin:2px;width:30px}.keypad-key{font-size:.75em;height:42px;line-height:42px;width:28px}.keypad-key.wide{width:48px}}@media (min-width:601px) and (max-width:900px){.row>div{font-size:1.5em;height:40px;line-height:40px;margin:3px;width:40px}}.message-toast{animation:fade-in-out 2s ease forwards;background:#1a1a1b;border-radius:8px;box-shadow:0 4px 12px #0006;color:#fff;font-size:.9em;font-weight:700;left:50%;padding:12px 24px;position:fixed;top:60px;transform:translateX(-50%);z-index:20}@keyframes flip{0%{background:#121213;border-color:#565758;transform:rotateX(0)}45%{background:#121213;border-color:#565758;transform:rotateX(90deg)}55%{background:var(--background);border-color:var(--border-color);transform:rotateX(90deg)}to{background:var(--background);border-color:var(--border-color);color:#fff;transform:rotateX(0deg)}}@keyframes fade-in-out{0%{opacity:0}10%{opacity:1}80%{opacity:1}to{opacity:0}}@keyframes shake{0%,to{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}@keyframes bounce{0%{border-color:#3a3a3c;transform:scale(1)}50%{transform:scale(1.2)}to{border-color:#565758;transform:scale(1)}}
/*# sourceMappingURL=main.13578e10.css.map*/