*{box-sizing:border-box;touch-action:manipulation}body{position:fixed;width:100%;height:100%;overflow:hidden;-webkit-user-select:none;user-select:none;background:#121212;color:#fff;margin:0;display:grid;align-items:center}:root{--unsubmitted-color: rgba(255, 255, 255, .08);--correct-color: #4caf50;--somewhere-color: #ff9800;--incorrect-color: rgba(255, 255, 255, .16)}svg{display:block;width:24px}.app{min-width:320px;max-width:428px;min-height:480px;height:100%;max-height:880px;width:100vw;font-family:-apple-system,Helvetica Neue,Helvetica,Arial,sans-serif;margin:0 auto;padding:0 1rem calc(env(safe-area-inset-bottom) + .5rem);display:grid;grid-template:auto 1fr auto auto / 1fr;justify-content:center;align-items:center}header{height:56px;display:flex;align-items:center;justify-content:space-between;font-size:1.5rem}.help{transition:opacity .2s ease-in-out;opacity:0;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}.help p{width:300px;background:#282828;padding:1rem;border-radius:1rem}.help a{color:var(--correct-color)}.help--visible{opacity:1;pointer-events:auto}.guesses{aspect-ratio:5 / 6;max-width:100%;min-width:0;min-height:0;height:100%;display:grid;grid-template:repeat(6,1fr) / repeat(5,1fr);grid-gap:.5rem;justify-self:center}@supports not (aspect-ratio: 5 / 6){.guesses{width:100%;max-height:calc((100vw - 1rem) / (5 / 6))}}#guess-input{position:absolute;left:-100000px;font-size:16px}.letter{background:#ffffff0d;border-radius:8px;display:flex;align-items:center;justify-content:center;position:relative;text-transform:uppercase;font-weight:700;font-size:1.5rem}.submitted{animation:flip .5s ease-in-out forwards}@keyframes flip{50%{transform:rotateX(-90deg);background:var(--unsubmitted-color)}50.001%{background:var(--color)}to{background:var(--color)}}.letter:nth-child(5n+1){animation-delay:0s}.letter:nth-child(5n+2){animation-delay:.1s}.letter:nth-child(5n+3){animation-delay:.2s}.letter:nth-child(5n+4){animation-delay:.3s}.letter:nth-child(5n+5){animation-delay:.4s}.letter:not(.submitted):not(:empty){animation:pop .2s ease-out}@keyframes pop{50%{transform:scale(1.2)}}.letter.active:after{content:"";display:block;width:30%;height:2px;background:#ffffff4d;position:absolute;bottom:calc(50% - .8rem);animation:blink .6s ease-in-out infinite alternate}@keyframes blink{to{opacity:0}}.message{background-color:#ffffff29;color:#fff;border-radius:4px;box-shadow:#0003 0 5px 5px -3px,#00000024 0 8px 10px 1px,#0000001f 0 3px 14px 2px;text-align:center;height:2.4rem;line-height:2.4rem;width:85%;margin:1rem auto;opacity:1;will-change:opacity;transition:opacity .3s ease-in-out;flex-shrink:0}.message:empty{opacity:0}.keyboard{display:grid;grid-template:repeat(3,1fr) / repeat(11,minmax(0,1fr));grid-gap:.3rem;justify-content:center}.key{background:var(--color, rgba(255, 255, 255, .5));border-radius:8px;display:flex;align-items:center;justify-content:center;height:40px;font-size:1rem;border:none;color:#fff;box-shadow:0 1px 2px #000c;will-change:transform;transition:all .15s ease-in-out;text-transform:uppercase}.key:active{transform:scale(.95) translateY(2px)}.key[data-key=⌫]{grid-column:span 2 / -1;width:75%;justify-self:end}.key[data-key=⏎]{background:#0288d1;grid-column:span 2;width:75%}.🟩{--color: #4caf50}.🟨{--color: #ff9800}.⬛{--color: rgba(255, 255, 255, .16)}