*,*:before,*:after{box-sizing:border-box}*{margin:0}html,body,#root{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}html{overflow-y:scroll;--game-spacing: 32px;--header-height: 4rem;--color-success: hsl(150deg 70% 30%);--color-warning: hsl(50deg 100% 30%);--color-error: hsl(0deg 70% 45%);--color-gray-100: hsl(0deg 0% 10%);--color-gray-300: hsl(0deg 0% 25%);--color-gray-500: hsl(0deg 0% 50%);--color-gray-700: hsl(0deg 0% 75%);--color-gray-900: hsl(0deg 0% 90%)}body{font-family:sans-serif}@media (max-height: 600px){body{--game-spacing: 8px}}button{margin:0;padding:0;border:none;background:transparent;cursor:pointer;text-align:left;color:inherit}.wrapper{display:flex;flex-direction:column;min-height:100%}header{display:flex;height:var(--header-height);border-bottom:1px solid var(--color-gray-700);color:var(--color-gray-300)}header .side{width:var(--header-height);display:grid;place-content:center}h1{flex:1;font-size:2rem;line-height:var(--header-height);text-align:center}@media (max-width: 25rem){h1{font-size:1.25rem}}.game-wrapper{flex:1;display:flex;flex-direction:column;gap:var(--game-spacing);padding:var(--game-spacing) 32px;margin:0 auto;min-width:250px;max-width:min(500px,58vh,100%)}.guess-results{flex:1;display:flex;flex-direction:column;justify-content:center}.guess{display:flex;gap:4px;margin-bottom:4px}.cell{position:relative;width:20%;display:grid;place-content:center;aspect-ratio:1 / 1;border:2px solid var(--color-gray-700);border-radius:var(--radius);font-size:2rem}.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.correct{background:var(--color-success);border-color:var(--color-success);color:#fff}.cell.incorrect{background:var(--color-gray-300);border-color:var(--color-gray-300);color:#fff}.cell.misplaced{background:var(--color-warning);border-color:var(--color-warning);color:#fff}.guess-input-wrapper{display:flex;flex-direction:column;gap:8px;height:6.75rem}.guess-input-wrapper label{font-size:1.25rem}.guess-input-wrapper input{display:block;width:100%;font-size:2rem;border:2px solid var(--color-gray-300);border-radius:4px;padding:8px 16px;outline-offset:4px}.banner{position:fixed;left:0;right:0;bottom:0;width:100%;max-width:600px;margin:0 auto;padding:32px;text-align:center;animation:slideUp .75s cubic-bezier(0,.72,.24,1.02);border-radius:4px 4px 0 0;will-change:transform}.happy.banner{background:var(--color-success);color:#fff}.sad.banner{background:var(--color-error);color:#fff}.visually-hidden{position:absolute;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}[data-reach-dialog-content]{position:relative;border-radius:8px;padding:24px 32px}.modal-close-btn{position:absolute;top:0;right:0;padding:16px;cursor:pointer}.modal-title{margin-bottom:.5em}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}