:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-bg: #242424;--color-text: rgba(255, 255, 255, .87);--color-title: whitesmoke;--color-tile-border: #565758;--color-tile-text: white;--color-key-bg: #818384;--color-key-text: white;--color-absent: #3a3a3c;--color-modal-bg: #1a1a1a;--color-modal-text: white;--color-modal-secondary: #ccc;color:var(--color-text);background-color:var(--color-bg)}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{--color-bg: #ffffff;--color-text: #213547;--color-title: #213547;--color-tile-border: #d3d6da;--color-tile-text: #213547;--color-key-bg: #d3d6da;--color-key-text: #213547;--color-absent: #787c7e;--color-modal-bg: #f9f9f9;--color-modal-text: #213547;--color-modal-secondary: #555;color:var(--color-text);background-color:var(--color-bg)}a:hover{color:#747bff}button{background-color:var(--color-key-bg)}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:25px}.title{color:var(--color-title);letter-spacing:.2rem;text-decoration:underline}.grid{display:flex;flex-direction:column;margin:5px;border-color:gray;gap:5px}.grid-row{display:flex;flex-direction:row;gap:5px}.grid-row.shake{animation:shake .4s ease-in-out}.grid-item{background-color:transparent;color:var(--color-tile-text);border:1px solid var(--color-tile-border);width:62px;height:62px;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;transition:background-color 0s}.grid-item.present{background-color:#eec780e0}.grid-item.absent{background-color:var(--color-absent)}.grid-item.correct{background-color:#4e9c4e}.grid-item.filled{animation:pop .1s ease-in-out}.valid-word-warning{position:absolute;bottom:-1.2rem;left:50%;transform:translate(-50%);color:red;white-space:nowrap;margin:0}.grid-item.correct,.grid-item.present,.grid-item.absent{animation:flip .5s ease-in-out;animation-fill-mode:backwards;transition-delay:.25s}.grid-item:nth-child(1){animation-delay:0s;transition-delay:.25s}.grid-item:nth-child(2){animation-delay:.1s;transition-delay:.35s}.grid-item:nth-child(3){animation-delay:.2s;transition-delay:.45s}.grid-item:nth-child(4){animation-delay:.3s;transition-delay:.55s}.grid-item:nth-child(5){animation-delay:.4s;transition-delay:.65s}@keyframes pop{0%{transform:sclae(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}@keyframes shake{0%{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}to{transform:translate(0)}}.keyboard{display:flex;flex-direction:column;align-items:center;gap:4px}.keyboard-row{display:flex;justify-content:center}.key{background:var(--color-key-bg);height:58px;width:40px;margin:2px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-family:Arial,Helvetica,sans-serif;font-weight:700;color:var(--color-key-text);border:none}.key.special{width:65px}.key.absent{background:var(--color-absent);color:#fff}.key.present{background:#c9b458;color:#fff}.key.correct{background:#4e9c4e;color:#fff}.key svg{width:60px}.modal-overlay{position:fixed;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--color-modal-bg);color:var(--color-modal-text);padding:2rem 3rem;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 8px 32px #00000080;min-width:300px}.modal h2{font-size:2rem;margin:0}.modal p{font-size:1.1rem;color:var(--color-modal-secondary);margin:0}.modal button{margin-top:8px;padding:10px 24px;font-size:1rem;font-weight:700;border:none;border-radius:6px;background-color:#4e9c4e;color:#fff;cursor:pointer}.modal button:hover{background-color:#3c823c}