.sq-board{--sq-gap:6px;--sq-tile-max:58px;--sq-tile:min(13vw,44px);gap:var(--sq-gap);display:grid}@supports (container-type:size){.sq-board{--sq-tile:min(calc((min(100cqw,24rem) - 5*var(--sq-gap))/6),calc((100cqh - 5*var(--sq-gap))/6),var(--sq-tile-max))}}.sq-row{grid-template-columns:repeat(6,var(--sq-tile));grid-auto-rows:var(--sq-tile);gap:var(--sq-gap);display:grid}.sq-tile{border-radius:calc(var(--sq-tile)*.22);border:2px solid var(--color-slate);background:var(--color-paper);color:var(--color-ink);font-family:var(--font-dm-sans);font-size:calc(var(--sq-tile)*.44);place-items:center;font-weight:800;line-height:1;transition:background .16s,border-color .16s,transform .16s;display:grid}.sq-tile.correct{background:var(--color-teal);border-color:var(--color-teal);color:#fff}.sq-tile.moved{background:var(--color-sand);border-color:var(--color-sand);color:var(--color-navy)}.sq-tile.absent{background:var(--color-slate);border-color:var(--color-slate);color:#1717178c}.sq-tile.typed{background:var(--color-sand);border-color:#1717172e}.sq-tile.cursor{border-color:var(--color-teal);background:#00b87512;border-style:dashed}.sq-tile.empty{background:var(--color-paper);color:#0000}.sq-tile.flip{animation:.6s ease-in-out sq-flip}@keyframes sq-flip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}to{transform:rotateY(0)}}.sq-pad{--sq-key-h:clamp(40px,5.6svh,52px);gap:6px;display:grid}.sq-keys{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.sq-key{height:var(--sq-key-h);border:2px solid var(--color-slate);background:var(--color-offwhite);color:var(--color-ink);font-family:var(--font-dm-sans);cursor:pointer;touch-action:manipulation;border-radius:10px;font-size:1.125rem;font-weight:800;transition:transform 90ms,background .16s}.sq-key:active{transform:scale(.93)}.sq-key:focus-visible{outline:3px solid var(--color-navy);outline-offset:2px}@media (min-width:768px){.sq-pad{--sq-key-h:50px}.sq-board{--sq-gap:8px;--sq-tile-max:64px}.sq-key{background:var(--color-paper)}}@media (prefers-reduced-motion:reduce){.sq-tile.flip{animation:none}.sq-tile,.sq-key{transition:none}}