html{--fs-1:1rem;--fs-2:1.25rem;--fs-3:2rem;--color-success:#17824d;--color-warning:#998000;--color-error:#c32222;--color-gray-100:#1a1a1a;--color-gray-300:#404040;--color-gray-500:gray;--color-gray-700:#bfbfbf;--color-gray-900:#e6e6e6}body{font-family:sans-serif}button{cursor:pointer;text-align:left;color:inherit;background:0 0;border:none;margin:0;padding:0}header{border-bottom:1px solid var(--color-gray-700);color:var(--color-gray-300);justify-content:center;padding-block:1rem;display:flex}h1{font-size:var(--fs-3);text-align:center;line-height:1.2}.game-wrapper{width:min(100%,120ch);margin-inline:auto;padding:2rem}main{align-items:flex-start;gap:4vw;display:flex}@media (max-width:60em){:root{--fs-1:1rem;--fs-2:1rem;--fs-3:1.75rem}.game-wrapper{width:min(100%,60ch);padding:1rem 2rem}main{flex-direction:column;align-items:center;gap:1rem}}.guess-results{--gap:.25rem;justify-content:center;gap:var(--gap);flex-direction:column;display:flex}.guess-results,.form-container{width:100%}.form-container{gap:1rem;display:grid}.guess{gap:var(--gap);display:flex}.cell{aspect-ratio:1;border:2px solid var(--color-gray-700);border-radius:var(--radius);font-size:var(--fs-3);place-content:center;width:20%;display:grid}.guess:first-of-type .cell:first-of-type{--radius:4px 0px 0px 0px}.guess:first-of-type .cell:last-of-type{--radius:0px 4px 0px 0px}.guess:last-of-type .cell:last-of-type{--radius:0px 0px 4px 0px}.guess:last-of-type .cell:first-of-type{--radius:0px 0px 0px 4px}.cell{--color:transparent}.cell:is(.cell.correct,.cell.incorrect,.cell.misplaced){color:#fff;background:var(--color);border-color:var(--color)}.cell.correct{--color:var(--color-success)}.cell.incorrect{--color:var(--color-gray-300)}.cell.misplaced{--color:var(--color-warning)}.guess-input-wrapper{flex-direction:column;gap:.5rem;display:flex}.guess-input-wrapper label{font-size:var(--fs-2)}.guess-input-wrapper input{font-size:var(--fs-3);border:2px solid var(--color-gray-300);outline-offset:4px;border-radius:.25em;width:100%;padding:.25em .5em;display:block}.guess-input-wrapper input[disabled]{opacity:.25;background-color:var(--color-gray-300)}.guess-input-wrapper .count{font-size:var(--fs-1)}.guess-input-wrapper .count span{font-weight:700}.guess-input-wrapper .count span.neuter{color:var(--color-gray-300)}.guess-input-wrapper .count span.less{color:var(--color-warning)}.guess-input-wrapper .count span.exact{color:var(--color-success)}.guess-input-wrapper .count span.more{color:var(--color-error)}.guess-input-wrapper .error{font-size:var(--fs-1);color:var(--color-error)}.banner{text-align:center;will-change:transform;color:#fff;z-index:1;border-radius:0 0 4px 4px;width:100%;max-width:600px;margin:0 auto;padding:32px;animation:.75s cubic-bezier(0,.72,.24,1.02) slideDown;position:fixed;top:0;left:0;right:0}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0%)}}.happy.banner{background:var(--color-success)}.sad.banner{background:var(--color-error)}.banner button{font-size:var(--fs-2);border:1px solid #fff;border-radius:.5em;margin-top:1em;padding:.5em 1em}.keyboard{--gap:.5rem;gap:var(--gap);display:grid}.keyboard>div{justify-content:center;gap:var(--gap);flex-wrap:wrap;display:flex}.keyboard span{background-color:var(--color-gray-900);font-size:var(--fs-1);border-radius:.25em;padding:.5em .75em}.keyboard span:is(.correct,.misplaced,.incorrect){color:#fff}.keyboard span.correct{background-color:var(--color-success)}.keyboard span.misplaced{background-color:var(--color-warning)}.keyboard span.incorrect{background-color:var(--color-gray-300)}.visually-hidden{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}
/*# sourceMappingURL=index.c82dbdbf.css.map */