:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-bg:#101014;--color-board:#17171c;--color-grid:#ffffff0a;--color-text:#e6e6e6;--color-muted:#8a8a94;--color-focus:#4cc9f0;--color-overlay:#101014b8;--color-shadow:#00000073;--color-cell-highlight:#ffffff2e;--color-key-bg:#ffffff14;--color-rule:#ffffff12;--color-i:#4cc9f0;--color-o:#f9c74f;--color-t:#b388eb;--color-s:#80ed99;--color-z:#ef476f;--color-j:#4895ef;--color-l:#f8961e;--ghost-opacity:.22;--locked-saturation:.82;--radius-cell:2px;--radius-card:16px;--top-bar-height:48px;--gutter:12px;--hit-target:44px;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--motion-move:50ms;--motion-lock:.1s;--motion-nudge:80ms;--motion-clear-flash:80ms;--motion-clear-fade:.12s;--motion-slide:.12s;--motion-over:.4s;--motion-overlay:.16s}@media (prefers-reduced-motion:reduce){:root{--motion-move:0s;--motion-nudge:0s;--motion-slide:0s}}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}html{overscroll-behavior:none;overflow:hidden}body{color:var(--color-text);background:var(--color-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-family:system-ui,sans-serif;overflow:hidden}#root{height:100dvh}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.app{height:100%;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);flex-direction:column;display:flex}.play-area{touch-action:none;--cell:min((100cqw - 2 * var(--gutter)) / 10, (100cqh - 2 * var(--gutter)) / 20);flex:1;place-items:center;min-width:0;min-height:0;display:grid;position:relative;container-type:size}.board-slot{line-height:0}.board{width:calc(var(--cell) * 10);height:calc(var(--cell) * 20);background-color:var(--color-board);background-image:linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);background-size:var(--cell) var(--cell);border-radius:4px;position:relative}.board-viewport{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.board-row{grid-template-columns:repeat(10, var(--cell));height:var(--cell);transform:translateY(calc(var(--y) * var(--cell)));transition:transform var(--motion-slide) ease-out;will-change:transform;display:grid;position:absolute;top:0;left:0}.board-cell{width:var(--cell);height:var(--cell);position:relative}.board-cell--filled:after{content:"";border-radius:var(--radius-cell);background:var(--cell-color);box-shadow:inset 0 1px 0 var(--color-cell-highlight);position:absolute;inset:1px}.board-row .board-cell--filled:after{filter:saturate(var(--locked-saturation))}.board-piece{transform:translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell)));position:absolute;top:0;left:0}.board-piece--active{transition:transform var(--motion-move) ease-out;will-change:transform}.board-piece .board-cell{top:calc(var(--y) * var(--cell));left:calc(var(--x) * var(--cell));position:absolute}.board-piece--ghost .board-cell--filled:after{background:color-mix(in srgb, var(--cell-color) calc(var(--ghost-opacity) * 100%), transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cell-color) 55%, transparent)}[data-kind=I]{--cell-color:var(--color-i)}[data-kind=O]{--cell-color:var(--color-o)}[data-kind=T]{--cell-color:var(--color-t)}[data-kind=S]{--cell-color:var(--color-s)}[data-kind=Z]{--cell-color:var(--color-z)}[data-kind=J]{--cell-color:var(--color-j)}[data-kind=L]{--cell-color:var(--color-l)}.board-row--clearing{animation:board-row-clear calc(var(--motion-clear-flash) + var(--motion-clear-fade)) linear forwards}@keyframes board-row-clear{0%{filter:brightness();opacity:1}40%{filter:brightness(2.4);opacity:1}to{filter:brightness(2.4);opacity:0}}@keyframes board-row-clear-reduced{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.board-row--clearing{animation-name:board-row-clear-reduced}}.board--over .board-row{animation:.16s ease-out both board-row-over;animation-delay:calc(var(--over-delay) / 20 * var(--motion-over))}@keyframes board-row-over{to{filter:grayscale()brightness(.55)}}.intro{--cell:16px;--glyph:5px;justify-items:center;gap:10px;display:grid}.intro-rail{height:calc(var(--glyph) * 2);align-items:center;gap:7px;display:flex}.intro-glyph{width:calc(var(--w) * var(--glyph));height:calc(var(--h) * var(--glyph));opacity:.16;position:relative}.intro-glyph--chosen{opacity:1}.intro-glyph--chosen:after{content:"";box-shadow:0 0 0 1px var(--cell-color);opacity:.55;border-radius:6px;position:absolute;inset:-4px -5px}.intro-glyph-cell{top:calc(var(--y) * var(--glyph));left:calc(var(--x) * var(--glyph));width:var(--glyph);height:var(--glyph);position:absolute}.intro-glyph-cell:after{content:"";background:var(--cell-color);border-radius:1px;position:absolute;inset:.5px}.intro-board{width:calc(var(--cols) * var(--cell));height:calc(var(--rows) * var(--cell));background-color:var(--color-bg);background-image:linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);background-size:var(--cell) var(--cell);border-radius:4px;position:relative;overflow:hidden}.intro-field,.intro-stack,.intro-piece{position:absolute;inset:0}.intro-cell{top:calc(var(--y) * var(--cell));left:calc(var(--x) * var(--cell));width:var(--cell);height:var(--cell);position:absolute}.intro-cell:after{content:"";border-radius:var(--radius-cell);background:var(--cell-color);box-shadow:inset 0 1px 0 var(--color-cell-highlight);position:absolute;inset:1px}.intro-stack .intro-cell:after{filter:saturate(var(--locked-saturation))}.intro-well{top:calc(var(--stack-top) * var(--cell));left:calc(var(--well) * var(--cell));width:var(--cell);height:calc(var(--depth) * var(--cell));border:1px dashed var(--color-muted);opacity:.5;border-radius:3px;position:absolute}.intro-scan{top:calc(var(--cell) * -3);height:calc(var(--cell) * 3);background:linear-gradient(transparent, var(--color-cell-highlight), transparent);opacity:0;position:absolute;left:0;right:0}.intro-caption{max-width:32ch;color:var(--color-muted);text-align:center;text-wrap:pretty;margin:0;font-size:.875rem;line-height:1.5;display:grid}.intro-line{opacity:0;grid-area:1/1;transition:opacity .24s}.intro[data-beat=read] .intro-line[data-line=read],.intro[data-beat=pick] .intro-line[data-line=pick],.intro[data-beat=send] .intro-line[data-line=send]{opacity:1}.intro[data-beat=read] .intro-field{animation:intro-restack var(--read-ms) linear both}.intro[data-beat=read] .intro-scan{animation:intro-scan var(--read-ms) ease-in-out both}.intro[data-beat=read] .intro-well{animation:intro-find var(--read-ms) ease-out both}.intro[data-beat=read] .intro-glyph{opacity:.16}.intro[data-beat=read] .intro-glyph--chosen:after{opacity:0}@keyframes intro-restack{0%{opacity:0}20%,to{opacity:1}}@keyframes intro-scan{0%{opacity:0;transform:translateY(0)}10%,60%{opacity:1}72%,to{opacity:0;transform:translateY(calc((var(--rows) + 3) * var(--cell)))}}@keyframes intro-find{0%,52%{opacity:0}68%,to{opacity:1}}.intro[data-beat=pick] .intro-glyph{animation-name:intro-consider,intro-reject;animation-duration:calc(var(--pick-ms) * .26), calc(var(--pick-ms) * .2);animation-timing-function:ease-out,ease-out;animation-fill-mode:both,forwards;animation-delay:calc(var(--i) * var(--pick-ms) * .055), calc(var(--pick-ms) * .6)}.intro[data-beat=pick] .intro-glyph--chosen{animation-name:intro-consider,intro-elect;animation-duration:calc(var(--pick-ms) * .26), calc(var(--pick-ms) * .26);animation-timing-function:ease-out,cubic-bezier(.2,.9,.3,1.4)}.intro[data-beat=pick] .intro-glyph--chosen:after{animation:intro-ring calc(var(--pick-ms) * .3) ease-out both;animation-delay:calc(var(--pick-ms) * .6)}.intro[data-beat=pick] .intro-well{animation:intro-await calc(var(--pick-ms) * .5) ease-in-out infinite}@keyframes intro-consider{0%,to{opacity:.16}45%{opacity:.85}}@keyframes intro-reject{0%{opacity:.16}to{opacity:.07}}@keyframes intro-elect{0%{opacity:.16;transform:scale(1)}to{opacity:1;transform:scale(1.2)}}@keyframes intro-ring{0%{opacity:0}to{opacity:.55}}@keyframes intro-await{0%,to{opacity:.4}50%{opacity:1}}.intro[data-beat=send] .intro-piece{animation:intro-drop var(--send-ms) linear both}.intro[data-beat=send] .intro-field{animation:intro-clear var(--send-ms) linear both}.intro[data-beat=send] .intro-well{animation:intro-filled var(--send-ms) linear both}.intro[data-beat=send] .intro-glyph{opacity:.07}.intro[data-beat=send] .intro-glyph--chosen{animation:intro-handoff calc(var(--send-ms) * .26) ease-in both}@keyframes intro-drop{0%{transform:translateY(calc(var(--rows) * var(--cell) * -1));animation-timing-function:cubic-bezier(.45,0,.9,.7)}26%,to{transform:translateY(0)}}@keyframes intro-clear{0%,42%{opacity:1;filter:brightness()}54%{opacity:1;filter:brightness(2.4)}66%,to{opacity:0;filter:brightness(2.4)}}@keyframes intro-filled{0%{opacity:1}26%,to{opacity:0}}@keyframes intro-handoff{0%{opacity:1;transform:translateY(0)scale(1.2)}to{opacity:.07;transform:translateY(5px)scale(1)}}.intro[data-beat=read] .intro-piece,.intro[data-beat=pick] .intro-piece{opacity:0}@container (height<=620px){.intro{--cell:12px;--glyph:4px;gap:6px}}@container (height<=500px){.intro-rail,.intro-board{display:none}.intro-caption{display:block}.intro-line{opacity:1}.intro-line+.intro-line:before{content:" "}}@container (height<=400px){.intro{display:none}}@media (prefers-reduced-motion:reduce){.intro[data-beat] .intro-field,.intro[data-beat] .intro-scan,.intro[data-beat] .intro-well,.intro[data-beat] .intro-piece,.intro[data-beat] .intro-glyph,.intro[data-beat] .intro-glyph--chosen:after{animation:none}.intro[data-beat] .intro-piece{opacity:1}.intro[data-beat] .intro-line{transition:none}}.overlay{padding:var(--gutter);background:var(--color-overlay);-webkit-backdrop-filter:blur(6px);animation:overlay-in var(--motion-overlay) ease-out both;transition:opacity var(--motion-overlay) ease-in, visibility 0s linear 0s;place-items:safe center;display:grid;position:absolute;inset:0;overflow:auto}.overlay--over{animation-delay:var(--motion-over)}.overlay--exit{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--motion-overlay) ease-in, visibility 0s linear var(--motion-overlay);animation:none}@keyframes overlay-in{0%{opacity:0}}.overlay-card{animation:overlay-card-in var(--motion-overlay) ease-out both;animation-delay:inherit}@keyframes overlay-card-in{0%{opacity:0;transform:translateY(6px)scale(.98)}}@media (prefers-reduced-motion:reduce){@keyframes overlay-card-in{0%{opacity:0}}}.overlay:focus{outline:none}.overlay-card{border-radius:var(--radius-card);background:var(--color-board);min-width:min(280px,100%);max-width:340px;box-shadow:0 16px 48px var(--color-shadow);text-align:center;justify-items:center;gap:16px;padding:28px 28px 24px;display:grid}.overlay-intro{justify-items:center;gap:10px;display:grid}.overlay-title{letter-spacing:.02em;margin:0;font-size:1.5rem;font-weight:700}.overlay--ready .overlay-title{font-size:1.75rem}.overlay-lede{max-width:30ch;color:var(--color-muted);text-wrap:pretty;margin:0;font-size:.875rem;line-height:1.5}.overlay-hints{border-top:1px solid var(--color-rule);width:100%;color:var(--color-muted);margin:0;padding:14px 0 0;font-size:.8125rem;line-height:1.9;list-style:none}.overlay-hints kbd{background:var(--color-key-bg);min-width:1.6em;color:var(--color-text);font:inherit;border-radius:5px;padding:0 .4em;font-size:.75rem;line-height:1.6;display:inline-block}.overlay-stat{color:var(--color-muted);margin:0;font-size:1rem}.overlay-note{color:var(--color-muted);margin:-8px 0 0;font-size:.75rem}.overlay-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.overlay-button{min-height:var(--hit-target);background:var(--color-text);min-width:132px;color:var(--color-bg);font:inherit;cursor:pointer;touch-action:manipulation;border:0;border-radius:999px;padding:0 22px;font-weight:600}.overlay-button--secondary{color:var(--color-text);box-shadow:inset 0 0 0 1px var(--color-muted);background:0 0}.overlay-live{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.overlay-supply{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.overlay-supply-label{color:var(--color-muted);margin:0;font-size:.8125rem}.overlay-supply-options{background:var(--color-key-bg);border-radius:999px;padding:3px;display:flex}.overlay-supply-option{min-width:84px;min-height:36px;color:var(--color-muted);font:inherit;cursor:pointer;touch-action:manipulation;transition:background var(--motion-overlay) ease-out;background:0 0;border:0;border-radius:999px;padding:0 14px;font-size:.8125rem;font-weight:600}.overlay-supply-option[aria-pressed=true]{background:var(--color-text);color:var(--color-bg)}.top-bar{height:var(--top-bar-height);padding:0 calc(var(--gutter) / 2) 0 var(--gutter);flex:none;justify-content:space-between;align-items:center;display:flex}.top-bar-lines{color:var(--color-muted);letter-spacing:.04em;text-transform:uppercase;align-items:baseline;gap:6px;margin:0;font-size:.8125rem;display:flex}.top-bar-lines-value{color:var(--color-text);font-variant-numeric:tabular-nums;letter-spacing:0;font-size:1.125rem;font-weight:600}.top-bar-actions{display:flex}.top-bar-button{width:var(--hit-target);height:var(--hit-target);color:var(--color-muted);cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:50%;place-items:center;padding:0;text-decoration:none;display:grid}.top-bar-button:hover:not(:disabled),.top-bar-button[aria-pressed=true]{color:var(--color-text)}.top-bar-button:disabled{opacity:.35;cursor:default}