.alert{background:var(--colour-text);border-radius:.35rem;color:var(--colour-primary);font-weight:700;padding:1rem;transition:opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;z-index:1}.alert--fading{opacity:0}:root{--colour-wrong: hsl(200, 2%, 48%);--colour-partially-correct: hsl(49, 51%, 47%);--colour-correct: hsl(115, 29%, 43%)}@media(prefers-color-scheme:dark){:root{--colour-wrong: hsl(240, 2%, 23%)}}.grid{display:grid;gap:.3rem;grid-template:repeat(6,1fr)/repeat(5,1fr);height:min(25.8rem,100%);width:min(21.5rem,100% - .5rem)}.grid__tile{align-items:center;border:.15rem solid var(--colour-accent-1);display:flex;font-size:1.75rem;font-weight:700;justify-content:center;line-height:0;text-transform:uppercase;-webkit-user-select:none;user-select:none}@media(prefers-color-scheme:dark){.grid__tile{border-color:var(--colour-accent-3)}}.grid__tile--correct{--background: var(--colour-correct);animation:flip .5s linear forwards;background:transparent;color:var(--colour-primary)}[data-delay-flip-animation] .grid__tile--correct:nth-child(1){animation-delay:0s}[data-delay-flip-animation] .grid__tile--correct:nth-child(2){animation-delay:.25s}[data-delay-flip-animation] .grid__tile--correct:nth-child(3){animation-delay:.5s}[data-delay-flip-animation] .grid__tile--correct:nth-child(4){animation-delay:.75s}[data-delay-flip-animation] .grid__tile--correct:nth-child(5){animation-delay:1s}@media(prefers-color-scheme:dark){.grid__tile--correct{color:var(--colour-text)}}.grid__tile--partially-correct{--background: var(--colour-partially-correct);animation:flip .5s linear forwards;background:transparent;color:var(--colour-primary)}[data-delay-flip-animation] .grid__tile--partially-correct:nth-child(1){animation-delay:0s}[data-delay-flip-animation] .grid__tile--partially-correct:nth-child(2){animation-delay:.25s}[data-delay-flip-animation] .grid__tile--partially-correct:nth-child(3){animation-delay:.5s}[data-delay-flip-animation] .grid__tile--partially-correct:nth-child(4){animation-delay:.75s}[data-delay-flip-animation] .grid__tile--partially-correct:nth-child(5){animation-delay:1s}@media(prefers-color-scheme:dark){.grid__tile--partially-correct{color:var(--colour-text)}}.grid__tile--wrong{--background: var(--colour-wrong);animation:flip .5s linear forwards;background:transparent;color:var(--colour-primary)}[data-delay-flip-animation] .grid__tile--wrong:nth-child(1){animation-delay:0s}[data-delay-flip-animation] .grid__tile--wrong:nth-child(2){animation-delay:.25s}[data-delay-flip-animation] .grid__tile--wrong:nth-child(3){animation-delay:.5s}[data-delay-flip-animation] .grid__tile--wrong:nth-child(4){animation-delay:.75s}[data-delay-flip-animation] .grid__tile--wrong:nth-child(5){animation-delay:1s}@media(prefers-color-scheme:dark){.grid__tile--wrong{color:var(--colour-text)}}.grid__tile:not(:empty){border-color:var(--colour-accent-2)}@media(prefers-color-scheme:dark){.grid__tile:not(:empty){border-color:var(--colour-accent-4)}}.grid__tile:not(:empty):not(.grid__tile--correct):not(.grid__tile--partially-correct):not(.grid__tile--wrong){animation:pulse .1s ease-in-out}.grid__row{display:contents}.grid__row--invalid>.grid__tile{animation:pulse .1s ease-in-out,shake .6s ease-in-out}.grid__row--invalid>.grid__tile:empty{animation:shake .6s ease-in-out}.grid__wrapper{align-items:center;display:flex;flex-grow:1;justify-content:center}@keyframes flip{0%{transform:rotateX(0)}50%{background:transparent;transform:rotateX(90deg)}50.01%{background:var(--background)}to{background:var(--background);border-style:none;transform:rotateX(0)}}@keyframes pulse{0%{opacity:0;transform:scale(.8)}40%{opacity:1;transform:scale(1.1)}}@keyframes shake{10%,90%{transform:translate(-.0625em)}20%,80%{transform:translate(.125em)}30%,50%,70%{transform:translate(-.25em)}40%,60%{transform:translate(.25em)}}.keyboard{display:grid;gap:.35em;grid-template:repeat(2,1fr)/repeat(20,1fr);touch-action:manipulation}.keyboard__icon{height:1.5em;width:1.5em}.keyboard__key{align-items:center;background:var(--colour-accent-1);border:0;border-radius:.35em;color:inherit;cursor:pointer;display:flex;font-size:.75em;grid-column:span 2;height:3.75rem;justify-content:center;min-width:0;overflow:hidden;text-transform:uppercase;touch-action:manipulation;transition:opacity .2s linear;-webkit-user-select:none;user-select:none}.keyboard__key:focus-visible{outline:.15em solid var(--colour-text)}.keyboard__key:hover{opacity:.8}.keyboard__key[data-key=enter]{grid-column:span 3}@media(max-width:24em){.keyboard__key[data-key=enter]{font-size:.5625em}}.keyboard__key[data-key=backspace]{grid-column:span 3}.keyboard__key:nth-child(11){grid-column:2/span 2}.keyboard__key--correct{background:var(--colour-correct);color:var(--colour-primary)}@media(prefers-color-scheme:dark){.keyboard__key--correct{color:var(--colour-text)}}.keyboard__key--partially-correct{background:var(--colour-partially-correct);color:var(--colour-primary)}@media(prefers-color-scheme:dark){.keyboard__key--partially-correct{color:var(--colour-text)}}.keyboard__key--wrong{background:var(--colour-wrong);color:var(--colour-primary)}@media(prefers-color-scheme:dark){.keyboard__key--wrong{color:var(--colour-text)}}:root{--colour-accent-1: hsl(215, 10%, 85%);--colour-accent-2: hsl(204, 2%, 54%);--colour-primary: hsl(0, 0%, 100%);--colour-text: hsl(0, 0%, 0%)}@media(prefers-color-scheme:dark){:root{--colour-primary: hsl(0, 0%, 0%);--colour-text: hsl(0, 0%, 100%);--colour-accent-1: hsl(200, 1%, 51%);--colour-accent-2: hsl(215, 10%, 85%);--colour-accent-3: hsl(240, 2%, 23%);--colour-accent-4: hsl(210, 1%, 34%)}}*,*:before,*:after{box-sizing:border-box}:root{font-size:16px;height:100%}body{background:var(--colour-primary);color:var(--colour-text);font-family:Arial,Helvetica,sans-serif;height:100%;margin:0;scrollbar-gutter:stable both-edges;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}.app-root{display:flex;flex-direction:column;gap:1rem;height:100%;margin:auto;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch;padding:1rem .5rem .5rem;width:min(100%,32rem)}.alert-container{align-items:center;display:flex;flex-direction:column-reverse;gap:.75em;left:50vw;position:fixed;top:10vh;transform:translate(-50%);z-index:1}