@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;900&family=JetBrains+Mono:wght@400;700&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0a;--surface:#141414;--surface2:#1c1c1c;--border:#2a2a2a;--text:#f5f5f5;--muted:#999;--accent:#e63946;--accent2:#ff6b6b;--correct:#2d6a4f;--present:#e63946;--absent:#2a2a2a}body{background:var(--bg);color:var(--text);background-image:radial-gradient(80% 50% at 50% -20%,#e6394612,#0000),radial-gradient(60% 40% at 80% 80%,#2d6a4f0f,#0000);min-height:100vh;font-family:Outfit,system-ui,sans-serif}a{color:inherit;text-decoration:none}button{cursor:pointer;border:none;font-family:Outfit,sans-serif;transition:opacity .15s,transform .15s}button:hover{opacity:.85}button:active{transform:scale(.97)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.cell{border:2px solid var(--border);letter-spacing:1px;width:56px;height:56px;color:var(--text);text-transform:uppercase;-webkit-user-select:none;user-select:none;border-radius:8px;justify-content:center;align-items:center;font-family:JetBrains Mono,monospace;font-size:22px;font-weight:900;transition:border-color .1s;display:flex}.cell.has-letter{border-color:#444}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}.cell.pop{animation:.1s ease-in-out pop}@keyframes flipIn{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}to{transform:rotateX(-90deg)}}@keyframes flipOut{0%{transform:rotateX(-90deg)}50%{transform:rotateX(0)}to{transform:rotateX(0)}}.reveal-cell{animation:.25s ease-in forwards flipIn,.25s ease-out forwards flipOut;animation-delay:var(--delay), calc(var(--delay) + .25s);backface-visibility:hidden}.reveal-cell.state-correct{animation:.25s ease-in forwards flipIn,.25s ease-out forwards flipOut;animation-delay:var(--delay), calc(var(--delay) + .25s);background:var(--correct);border-color:var(--correct);color:#fff}.reveal-cell.state-present{background:var(--present);border-color:var(--present);color:#000}.reveal-cell.state-absent{background:var(--absent);border-color:var(--absent);color:var(--muted)}@keyframes bounce{0%,to{transform:translateY(0)}40%{transform:translateY(-16px)}60%{transform:translateY(-8px)}}.cell.bounce{animation:.6s forwards bounce}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.row-shake{animation:.4s shake}@media (width<=640px){.two-col{grid-template-columns:1fr!important}}
