:root{color-scheme:dark;--sait: var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px));--saib: var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));--sail: var(--discord-safe-area-inset-left, env(safe-area-inset-left, 0px));--sair: var(--discord-safe-area-inset-right, env(safe-area-inset-right, 0px));--bg: #121213;--surface: #1a1a1b;--border: #3a3a3c;--text: #ffffff;--muted: #818384;--correct: #3eaa42;--partial: #cd8729;--incorrect: #3a3a3c;--key: #818384;--key-text: #ffffff;--gap: clamp(3px, 1vmin, 6px);--chrome: 150px;--cell-size: min( 56px, calc((100vh - var(--chrome) - 5 * var(--gap)) / 8.7), calc((100vw - 24px - 4 * var(--gap)) / 5) );--key-height: min(52px, calc(var(--cell-size) * .92));--key-min-width: max(22px, calc(var(--cell-size) * .58));font-family:Segoe UI,system-ui,sans-serif}@supports (height: 100dvh){:root{--cell-size: min( 56px, calc((100dvh - var(--chrome) - 5 * var(--gap)) / 8.7), calc((100vw - 24px - 4 * var(--gap)) / 5) )}}*{box-sizing:border-box}html{height:100%}body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--text);display:flex;justify-content:center;overflow-y:auto}#app{width:min(100%,520px);min-height:100vh;min-height:100dvh;padding-top:max(clamp(8px,2vmin,16px),var(--sait));padding-right:max(12px,var(--sair));padding-bottom:max(clamp(12px,3vmin,24px),var(--saib));padding-left:max(12px,var(--sail));display:grid;grid-template-rows:auto auto 1fr auto auto 1fr auto;align-items:center;justify-items:center;gap:clamp(4px,1.5vmin,12px)}.header{grid-row:1;text-align:center}.status{grid-row:2;flex-shrink:0}.grid{grid-row:4;display:flex;flex-direction:column;gap:var(--gap);margin-top:clamp(2px,1vmin,8px)}.message{grid-row:5;min-height:1.2em;font-weight:600;font-size:clamp(.75rem,2.5vmin,1rem)}.message[hidden]{display:block;visibility:hidden}.keyboard{grid-row:7;width:100%;display:flex;flex-direction:column;gap:var(--gap);align-self:stretch}.row{display:flex;gap:var(--gap)}.cell{width:var(--cell-size);height:var(--cell-size);perspective:600px}.cell-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d}.cell.revealed .cell-inner{transform:rotateX(180deg)}.cell.flip .cell-inner{animation:flip-reveal .5s ease forwards;animation-delay:var(--flip-delay, 0ms)}.cell-face{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;backface-visibility:hidden;border:2px solid var(--border);font-size:clamp(.9rem,calc(var(--cell-size) * .55),1.6rem);font-weight:700;text-transform:uppercase}.cell-front{transform:rotateX(0)}.cell-back{transform:rotateX(180deg)}.cell.filled .cell-front{border-color:#565758;animation:pop .08s ease}.cell-back.correct{background:var(--correct);border-color:var(--correct);color:#fff}.cell-back.partial{background:var(--partial);border-color:var(--partial);color:#fff}.cell-back.incorrect{background:var(--incorrect);border-color:var(--incorrect);color:#fff}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes flip-reveal{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}to{transform:rotateX(-180deg)}}.message.error{color:#ff6b6b}.message.success{color:var(--correct)}.header h1{margin:0;letter-spacing:clamp(.1rem,1vmin,.25rem);font-size:clamp(1.25rem,5vmin,2rem)}.header p,.status{margin:4px 0 0;color:var(--muted);font-size:clamp(.75rem,2.5vmin,.9rem)}.kb-row{display:flex;justify-content:center;gap:var(--gap);flex-wrap:nowrap}.key{min-width:var(--key-min-width);height:var(--key-height);padding:0 clamp(4px,1vmin,10px);border:none;border-radius:4px;background:var(--key);color:var(--key-text);font-size:clamp(.6rem,calc(var(--cell-size) * .24),.85rem);font-weight:700;cursor:pointer;text-transform:uppercase}.key.wide{min-width:max(44px,calc(var(--cell-size) * 1.4));font-size:clamp(.55rem,calc(var(--cell-size) * .2),.75rem)}.key.correct{background:var(--correct)}.key.partial{background:var(--partial)}.key.incorrect{background:var(--incorrect);color:#fffa}.key:disabled{opacity:.45;cursor:not-allowed}body.discord-mobile.discord-embedded #app{padding-top:max(48px,var(--sait))}html.discord-embedded,body.discord-embedded{height:100%}body.discord-embedded:not(.discord-mobile){overflow:hidden;--chrome: 132px;--cell-size: min( 50px, calc((100dvh - var(--chrome) - 5 * var(--gap)) / 8.7), calc((100vw - 24px - 4 * var(--gap)) / 5) )}body.discord-embedded:not(.discord-mobile) #app{min-height:0;height:100%;grid-template-rows:auto auto auto auto auto;gap:4px;padding-top:clamp(8px,2vmin,16px);padding-bottom:8px}body.discord-embedded:not(.discord-mobile) .header h1{font-size:clamp(1.1rem,4vmin,1.5rem)}body.discord-embedded:not(.discord-mobile) .header p{display:none}body.discord-embedded:not(.discord-mobile) .header{grid-row:1}body.discord-embedded:not(.discord-mobile) .status{grid-row:2}body.discord-embedded:not(.discord-mobile) .grid{grid-row:3;margin-top:0}body.discord-embedded:not(.discord-mobile) .message{grid-row:4}body.discord-embedded:not(.discord-mobile) .keyboard{grid-row:5}@media(max-width:520px){#app{gap:8px}}@media(max-height:520px){:root{--chrome: 100px}.header p{display:none}}@media(max-height:400px){:root{--chrome: 72px}.header h1{font-size:1.1rem}.status{font-size:.7rem}}body.layout-compact{--chrome: 80px;--cell-size: min( 56px, calc((100dvh - var(--chrome) - 5 * var(--gap)) / 6.5), calc((100vw - 24px - 4 * var(--gap)) / 5) )}body.layout-compact #app{grid-template-rows:auto auto 1fr auto 1fr}body.layout-compact .grid{grid-row:4}body.layout-compact .header{grid-row:1}body.layout-compact .status{grid-row:2}body.layout-compact .header p,body.layout-compact #keyboard,body.layout-compact #message{display:none}body.layout-compact .header h1{font-size:clamp(1rem,4vmin,1.5rem)}body.layout-compact .status{font-size:.75rem}body.layout-compact .cell-face{color:transparent}