.alert{background:var(--colour-text);color:var(--colour-primary);-webkit-user-select:none;user-select:none;z-index:1;border-radius:.35rem;padding:1rem;font-weight:700;transition:opacity .5s ease-in-out}.alert--fading{opacity:0}:root{--colour-wrong:#787b7d;--colour-partially-correct:#b59f3b;--colour-correct:#538d4e}@media (prefers-color-scheme:dark){:root{--colour-wrong:#39393c}}.grid{grid-gap:.3rem;grid-template:repeat(6,1fr)/repeat(5,1fr);gap:.3rem;width:min(21.5rem,100% - .5rem);height:min(25.8rem,100%);display:grid}.grid__tile{border:.15rem solid var(--colour-accent-1);text-transform:uppercase;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;font-size:1.75rem;font-weight:700;line-height:0;display:flex}@media (prefers-color-scheme:dark){.grid__tile{border-color:var(--colour-accent-3)}}.grid__tile--correct{--background:var(--colour-correct);color:var(--colour-primary);background:0 0;animation:.5s linear forwards flip}[data-delay-flip-animation] .grid__tile--correct:first-child{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);color:var(--colour-primary);background:0 0;animation:.5s linear forwards flip}[data-delay-flip-animation] .grid__tile--partially-correct:first-child{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);color:var(--colour-primary);background:0 0;animation:.5s linear forwards flip}[data-delay-flip-animation] .grid__tile--wrong:first-child{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:.1s ease-in-out pulse}.grid__row{display:contents}.grid__row--invalid>.grid__tile{animation:.1s ease-in-out pulse,.6s ease-in-out shake}.grid__row--invalid>.grid__tile:empty{animation:.6s ease-in-out shake}.grid__wrapper{flex-grow:1;justify-content:center;align-items:center;display:flex}@keyframes flip{0%{transform:rotateX(0)}50%{background:0 0;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{grid-gap:.35em;touch-action:manipulation;grid-template:repeat(2,1fr)/repeat(20,1fr);gap:.35em;display:grid}.keyboard__icon{width:1.5em;height:1.5em}.keyboard__key{background:var(--colour-accent-1);color:inherit;cursor:pointer;text-transform:uppercase;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:0;border-radius:.35em;grid-column:span 2;justify-content:center;align-items:center;min-width:0;height:3.75rem;font-size:.75em;transition:opacity .2s linear;display:flex;overflow:hidden}.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 (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:#d5d8dd;--colour-accent-2:#878a8c;--colour-primary:#fff;--colour-text:#000}@media (prefers-color-scheme:dark){:root{--colour-primary:#000;--colour-text:#fff;--colour-accent-1:#818283;--colour-accent-2:#d5d8dd;--colour-accent-3:#39393c;--colour-accent-4:#565758}}*,:before,:after{box-sizing:border-box}:root{height:100%;font-size:16px}body{background:#fff;background:var(--colour-primary);color:var(--colour-text);scrollbar-gutter:stable both-edges;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;height:100%;margin:0;font-family:Arial,Helvetica,sans-serif}.app-root{height:100%;min-height:-moz-available;min-height:-webkit-fill-available;flex-direction:column;gap:1rem;width:min(100%,32rem);min-height:stretch;margin:auto;padding:1rem .5rem .5rem;display:flex}.alert-container{z-index:1;flex-direction:column-reverse;align-items:center;gap:.75em;display:flex;position:fixed;top:10vh;left:50vw;transform:translate(-50%)}