.lw{--lw-key:54px;--lw-gap:7px;--lw-empty-line:#d4d4d8;justify-items:center;gap:20px;padding:4px 0;display:grid;position:relative}:is(html.dark,body.dark,html[data-stacklumen-theme=dark],body[data-stacklumen-theme=dark]) .lw{--lw-empty-line:#34343a}.lw-top{justify-content:center;align-items:center;gap:12px;width:100%;display:flex}.lw-board{--tile:clamp(38px, min(13vw, calc((100svh - 560px) / 6)), 64px);gap:var(--lw-gap);display:grid;position:relative}.lw-row{grid-template-columns:repeat(5, var(--tile));gap:var(--lw-gap);display:grid}.lw-row.is-shake{animation:.42s cubic-bezier(.36,.07,.19,.97) lw-shake}@keyframes lw-shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-6px)}40%,60%{transform:translate(6px)}}.lw-tile{width:var(--tile);height:var(--tile);perspective:640px;position:relative}.lw-face{font-size:calc(var(--tile) * .46);letter-spacing:-.01em;text-transform:uppercase;backface-visibility:hidden;border-radius:3px;place-items:center;font-weight:700;line-height:1;transition:transform .56s cubic-bezier(.2,.9,.3,1);display:grid;position:absolute;inset:0}.lw-front{border:2px solid var(--lw-empty-line);background:var(--pl-tile-bg);color:var(--sl-text);transition:transform .56s cubic-bezier(.2,.9,.3,1),border-color .12s}.lw-tile.has-letter:not(.is-done):not(.is-reveal) .lw-front{border-color:color-mix(in srgb, var(--sl-text) 52%, var(--lw-empty-line));animation:.14s cubic-bezier(.2,.9,.3,1) lw-pop}@keyframes lw-pop{50%{transform:scale(1.06)}}.lw-tile.is-next .lw-front{border-color:color-mix(in srgb, var(--sl-text) 22%, var(--lw-empty-line))}.lw-tile.is-next .lw-front:after{content:"";background:var(--sl-accent);border-radius:1px;width:26%;height:2px;animation:1.1s cubic-bezier(.2,.9,.3,1) infinite alternate lw-caret;position:absolute;bottom:22%;left:50%;transform:translate(-50%)}@keyframes lw-caret{0%{opacity:.9}to{opacity:.25}}.lw-ghost{color:color-mix(in srgb, var(--sl-accent) 62%, transparent)}.lw-back{color:#fff;transform:rotateX(-180deg);box-shadow:inset 0 1px #ffffff29,inset 0 -1px #0000001f}.lw-tile.is-hit .lw-back{background:var(--pl-hit)}.lw-tile.is-near .lw-back{background:var(--pl-near)}.lw-tile.is-miss .lw-back{background:var(--pl-miss)}.lw-tile.is-done .lw-front,.lw-tile.is-reveal .lw-front{transform:rotateX(180deg)}.lw-tile.is-done .lw-back,.lw-tile.is-reveal .lw-back{transform:rotateX(0)}.lw-tile.is-reveal .lw-face{transition-delay:calc(var(--i) * .28s)}.lw-tile.is-done .lw-face{transition-duration:0s}.lw-row.is-wave .lw-tile{animation:.62s cubic-bezier(.2,.9,.3,1) both lw-jump;animation-delay:calc(var(--i) * 90ms)}@keyframes lw-jump{0%{transform:translateY(0)}38%{transform:translateY(-26%)}72%{transform:translateY(3%)}to{transform:translateY(0)}}.lw .pl-keys{max-width:none}.lw .pl-key{height:var(--lw-key)}.lw-keys-half{flex:.5 1 0}.lw .pl-key.is-miss{box-shadow:inset 0 0 0 1px var(--sl-border);color:var(--sl-text-faint);opacity:1;background:0 0}.lw .pl-key.is-hinted{position:relative}.lw .pl-key.is-hinted:after{content:"";background:var(--pl-near);border-radius:50%;width:4px;height:4px;position:absolute;bottom:7px;left:50%;transform:translate(-50%)}.lw.is-over .lw-keys{pointer-events:none}@media (height<=720px){.lw{--lw-key:44px}}.is-fit .lw{grid-template-rows:auto minmax(0,1fr) auto;align-items:center;gap:16px;height:100%;padding:0}.is-fit .lw-board{--tile:min(80px, calc((100cqw - 4 * var(--lw-gap)) / 5), calc((100cqh - 36px - 3 * var(--lw-key) - 16px - 32px - 5 * var(--lw-gap)) / 6))}.is-fit .lw .pl-keys{align-self:end}@media (width>=641px) and (height<=760px){.is-fit .lw{--lw-key:clamp(32px, 7.5cqh, 44px);--lw-gap:5px;gap:10px}.is-fit .lw .pl-keys{gap:5px}.is-fit .lw .pl-key{font-size:13.5px}.is-fit .lw-board{--tile:min(80px, calc((100cqw - 4 * var(--lw-gap)) / 5), calc((100cqh - 36px - 3 * var(--lw-key) - 10px - 20px - 5 * var(--lw-gap)) / 6))}}@media (width>=1100px) and (hover:hover) and (pointer:fine){.pl-center.is-narrow .pl-stage>.lw{max-width:none}.lw{--lw-key:46px}.lw .pl-keys{gap:6px;max-width:484px}.lw-top{z-index:2;width:auto;position:absolute;top:0;left:0}.is-fit .lw{grid-template-rows:minmax(0,1fr) auto}.is-fit .lw-board{--tile:min(80px, calc((100cqw - 4 * var(--lw-gap)) / 5), calc((100cqh - 3 * var(--lw-key) - 12px - 16px - 5 * var(--lw-gap)) / 6))}}@media (width>=1100px) and (height<=760px) and (hover:hover) and (pointer:fine){.is-fit .lw{gap:8px}.is-fit .lw .pl-keys{gap:5px}.is-fit .lw-board{--tile:min(80px, calc((100cqw - 4 * var(--lw-gap)) / 5), calc((100cqh - 3 * var(--lw-key) - 10px - 8px - 5 * var(--lw-gap)) / 6))}}@media (width<=640px){.lw{--lw-key:46px;--lw-gap:5px}.lw .pl-key.is-hinted:after{bottom:5px}.is-fit .lw{gap:10px}.is-fit .lw-top .pl-tray button{min-height:32px;padding:3px 14px;font-size:12.5px;position:relative}.is-fit .lw-top .pl-tray button:before{content:"";position:absolute;inset:-4px 0}.is-fit .lw-board{--tile:min(62px, calc((100cqw - 4 * var(--lw-gap)) / 5), calc((100cqh - 38px - 3 * var(--lw-key) - 12px - 20px - 5 * var(--lw-gap)) / 6))}}@media (prefers-reduced-motion:reduce){.lw-face,.lw-front{transition:none}.lw-tile.is-reveal .lw-face{transition-delay:0s}.lw-row.is-shake,.lw-row.is-wave .lw-tile,.lw-tile.has-letter .lw-front,.lw-tile.is-next .lw-front:after{animation:none}}
