.wx-board{--wx-gap:6px;--wx-tile-max:64px;--wx-tile:min(15vw,52px);gap:var(--wx-gap);display:grid}@supports (container-type:size){.wx-board{--wx-tile:min(calc((min(100cqw,24rem) - 4*var(--wx-gap))/5),calc((100cqh - 5*var(--wx-gap))/6),var(--wx-tile-max))}}.wx-row{grid-template-columns:repeat(5,var(--wx-tile));grid-auto-rows:var(--wx-tile);gap:var(--wx-gap);display:grid}.wx-tile{border-radius:calc(var(--wx-tile)*.2);border:2px solid var(--color-slate);background:var(--color-paper);color:var(--color-ink);font-family:var(--font-dm-sans);grid-template-rows:1fr auto;place-items:center;font-weight:800;line-height:1;transition:background .16s,border-color .16s,transform .16s;display:grid}.wx-tile .wx-letter{padding-top:calc(var(--wx-tile)*.06);font-size:calc(var(--wx-tile)*.42);grid-row:1;align-self:center}.wx-tile .wx-mark{height:calc(var(--wx-tile)*.28);font-size:calc(var(--wx-tile)*.26);opacity:.9;grid-row:2;place-items:center;display:grid}.wx-tile .wx-mark svg{width:1em;height:1em}.wx-tile.later{background:#1547ff17;border-color:#1547ff4d}.wx-tile.later .wx-mark{color:var(--color-navy)}.wx-tile.earlier{background:#ff4f5f1a;border-color:#ff4f5f52}.wx-tile.earlier .wx-mark{color:var(--color-red)}.wx-tile.correct{background:var(--color-teal);border-color:var(--color-teal);color:#fff}.wx-tile.correct .wx-mark{color:#fff}.wx-tile.typed{background:var(--color-sand);border-color:#1717172e}.wx-tile.cursor{border-color:var(--color-teal);background:#00b87512;border-style:dashed}.wx-row.invalid{animation:.38s cubic-bezier(.36,.07,.19,.97) wx-shake}@keyframes wx-shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-7px)}40%,60%{transform:translate(7px)}}.wx-tile.pop{animation:.18s ease-out wx-pop}@keyframes wx-pop{0%{transform:scale(.86)}to{transform:scale(1)}}@media (prefers-reduced-motion:reduce){.wx-tile.pop,.wx-row.invalid{animation:none}.wx-tile{transition:none}}@media (min-width:768px){.wx-board{--wx-gap:8px;--wx-tile-max:72px}}