@layer components{.mx-screen{-webkit-user-select:none;user-select:none;background:#050505;padding:0}.mx-head{justify-content:space-between;align-items:flex-start;display:flex;position:absolute;top:14px;left:20px;right:20px}.mx-label{letter-spacing:.08em;color:var(--on-dark-faint);font-size:12px;font-weight:600}.mx-count{letter-spacing:-.03em;margin-top:2px;font-size:22px;font-weight:600}.mx-clock{letter-spacing:-.05em;font-size:clamp(44px,12cqw,64px);font-weight:600;line-height:.9;transition:color .2s}.mx-clock span{color:#fff6}.mx-clock.is-low{color:#ff8a66}.mx-clock.is-done{color:#fff}.mx-area{place-items:center;display:grid;position:absolute;inset:92px 16px 20px;container-type:size}.mx-board{--gap:4px;aspect-ratio:6/8;touch-action:none;width:min(100cqw,75cqh);position:relative}.mx-tile{width:calc((100% - 5 * var(--gap)) / 6);height:calc((100% - 7 * var(--gap)) / 8);translate:calc(var(--x) * (100% + var(--gap))) calc(var(--y) * (100% + var(--gap)));transition:translate .26s var(--ease-out), scale .2s var(--ease-spring), box-shadow .2s ease;border-radius:6px;position:absolute;top:0;left:0}.mx-tile.is-picked{z-index:2;scale:1.08;box-shadow:0 0 0 2.5px #fff,0 10px 22px #0000008c}.mx-tile.is-home{animation:mx-home .42s var(--ease-pop) .2s}@keyframes mx-home{40%{scale:1.12}}.mx-tile:focus-visible{z-index:3;outline:2px solid var(--rn);outline-offset:2px}.mx-tile.is-off:after{content:"";background:#fff;border-radius:50%;position:absolute;inset:38%;box-shadow:0 0 0 2px #00000059}.mx-board.is-solved .mx-tile{animation:mx-wave .52s var(--ease-out) calc(var(--d) * 35ms) both}@keyframes mx-wave{30%{scale:.86}}.mx-mini{background:#050505;grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:1px;display:grid;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.mx-tile{transition:none}.mx-tile.is-home,.mx-board.is-solved .mx-tile{animation:none}}}