@import"https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";*,*: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-misplaced: #b59f3b;--color-incorrect: #3a3a3c;--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:Rubik,sans-serif;background-color:#121213}@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{position:relative;display:flex;align-items:center;justify-content:center;height:var(--header-height);border-bottom:1px solid var(--color-gray-700);color:var(--color-gray-700);padding:0}header .side{position:absolute;top:0;bottom:0;width:var(--header-height);display:grid;place-content:center}header .side.right{right:0}h1{flex:1;font-size:2rem;line-height:var(--header-height);text-align:center}@media (max-width: 25rem){h1{font-size:1.25rem}header .side button{font-size:1.2rem}}.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}.cell{position:relative;width:20%;display:grid;place-content:center;aspect-ratio:1 / 1;border:2px solid #3a3a3c;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-incorrect);border-color:var(--color-incorrect);color:#fff}.cell.misplaced{background:var(--color-misplaced);border-color:var(--color-misplaced);color:#fff}.guess-input-wrapper{display:flex;flex-direction:column;gap:8px;height:6.75rem}.guess-input-wrapper label{color:var(--color-gray-700);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;outline-color:var(--color-gray-300);color:var(--color-gray-700);background-color:var(--color-gray-100)}.guess-input-wrapper input:focus{outline:2px solid var(--color-gray-300)}.guess-input-wrapper input:disabled{cursor:not-allowed}.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;z-index:10}.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)}}.guess{display:flex;gap:6px;margin-bottom:6px}.cell{color:#121213;position:relative;width:20%;aspect-ratio:1 / 1;border-radius:var(--radius);font-size:2rem;transform-style:preserve-3d;perspective:1000px;transition:transform .6s}.cell.flipped{transform:rotateX(180deg)}.face{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;display:grid;place-content:center;border:2px solid #3a3a3c;border-radius:var(--radius)}.face.front{background-color:transparent;transform:rotateX(0)}.face.back{transform:rotateX(180deg);color:#fff}.face.back.correct{background:var(--color-success);border-color:var(--color-success)}.face.back.incorrect{background:var(--color-incorrect);border-color:var(--color-incorrect)}.face.back.misplaced{background:var(--color-misplaced);border-color:var(--color-misplaced)}.cell .letter{display:block}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000bf;display:flex;justify-content:center;align-items:center;z-index:100}.modal-content{background-color:#121213;color:#fff;padding:24px;border-radius:8px;max-width:500px;width:90%;position:relative;max-height:80vh;overflow-y:auto}.modal-content p,.modal-content h3,.modal-content ul{margin-bottom:1em}.modal-close-btn{position:absolute;top:10px;right:10px;background:transparent;border:none;font-size:2rem;color:#fff;cursor:pointer;padding:0;line-height:1}.example-guess{display:flex;gap:6px;margin-bottom:1em}.modal-content .cell{width:40px;height:40px;font-size:1.5rem}header .side button{background:transparent;border:none;color:var(--color-gray-700);font-size:1.25rem;cursor:pointer;height:100%;width:100%;display:flex;justify-content:center;align-items:center}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000bf;display:flex;justify-content:center;align-items:center;z-index:100;animation:fadeIn .3s ease-out forwards}.modal-overlay.closing{animation:fadeOut .3s ease-in forwards}.modal-content{background-color:#121213;color:#fff;padding:24px;border-radius:8px;max-width:500px;width:90%;position:relative;max-height:80vh;overflow-y:auto;transform-origin:var(--start-left) var(--start-top);animation:popIn .3s ease-out forwards}.modal-content.closing{animation:popOut .3s ease-in forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes popIn{0%{transform:translate(calc(var(--start-left) - 50vw),calc(var(--start-top) - 50vh)) scale(.1);opacity:0}to{transform:translate(0) scale(1);opacity:1}}@keyframes popOut{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(calc(var(--start-left) - 50vw),calc(var(--start-top) - 50vh)) scale(.1);opacity:0}}