.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)}}.wx-keyboard{--wx-key-h:clamp(42px,6.6svh,56px);gap:6px;display:grid}.wx-krow{justify-content:center;gap:5px;display:flex}.wx-key{min-width:0;height:var(--wx-key-h);background:var(--color-sand);color:var(--color-ink);font-family:var(--font-dm-sans);cursor:pointer;touch-action:manipulation;border-radius:9px;flex:1 1 0;font-size:clamp(.95rem,4.2vw,1.25rem);font-weight:800;transition:transform 90ms,background .16s,opacity .16s}.wx-key:active{transform:scale(.93)}.wx-key:focus-visible{outline:3px solid var(--color-navy);outline-offset:2px}.wx-key.used{color:#17171780;background:#ffe66d73}.wx-key.solved{background:var(--color-teal);color:#fff}.wx-krow .wx-spacer{flex:.5 1 0}.wx-key.action{letter-spacing:.04em;flex:1.6 1 0;place-items:center;font-size:clamp(.7rem,3vw,.85rem);font-weight:900;display:grid}.wx-key.enter{background:var(--color-lime)}.wx-key.enter:disabled{background:var(--color-slate);opacity:.75;cursor:not-allowed}.wx-key.enter:disabled:active{transform:none}.wx-key.del{background:var(--color-red);color:#fff}@media (prefers-reduced-motion:reduce){.wx-tile.pop,.wx-row.invalid{animation:none}.wx-tile,.wx-key{transition:none}}@media (min-width:768px){.wx-board{--wx-gap:8px;--wx-tile-max:72px}.wx-keyboard{gap:7px}.wx-krow{gap:6px}}