.sp{--gap: clamp(4px, 1.2vw, 8px)}.sp-board{position:relative;width:min(100%,440px);aspect-ratio:1;border-radius:16px;background:color-mix(in oklab,var(--cell-strong) 30%,var(--surface-2));container-type:inline-size;touch-action:none}.sp-tile{position:absolute;left:var(--gap);top:var(--gap);width:calc((100% - (var(--n) + 1) * var(--gap)) / var(--n));height:calc((100% - (var(--n) + 1) * var(--gap)) / var(--n));transform:translate(calc(var(--c) * (100% + var(--gap))),calc(var(--r) * (100% + var(--gap))));transition:transform .13s ease-out,background-color .2s,box-shadow .2s;appearance:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;border-radius:10px;display:grid;place-items:center;background:var(--cell);color:var(--text);box-shadow:inset 0 -4px color-mix(in oklab,var(--cell-strong) 30%,transparent);font-weight:800;font-size:calc(100cqw / var(--n) * .4);font-variant-numeric:tabular-nums}.sp-tile:hover{background:color-mix(in oklab,var(--accent) 10%,var(--cell))}.sp-tile.home{background:color-mix(in oklab,var(--accent) 22%,var(--cell));color:var(--accent)}.sp-tile.nope{animation:sp-nope .22s}@keyframes sp-nope{25%{margin-left:-4px}75%{margin-left:4px}}.sp-num{pointer-events:none}.sp-last{opacity:0;pointer-events:none;transition:opacity .4s .12s}.sp-board.picture .sp-tile{background-image:var(--art);background-size:calc(var(--n) * 100%) calc(var(--n) * 100%);background-position:calc(var(--gc) / (var(--n) - 1) * 100%) calc(var(--gr) / (var(--n) - 1) * 100%);box-shadow:inset 0 0 0 1px #ffffff40,0 1px 3px #00000040;color:#fff}.sp-board.picture .sp-num{display:none}.sp-board.picture.labels .sp-num{display:block;position:absolute;left:5px;top:4px;font-size:clamp(.7rem,calc(100cqw / var(--n) * .16),1rem);background:#00000073;color:#fff;border-radius:6px;padding:0 5px;line-height:1.4}.sp-board.picture .sp-tile.home{box-shadow:inset 0 0 0 2px #ffffff8c}.sp-board:not(.labels) .sp-num{display:none}.sp-board:not(.picture) .sp-last{display:none}.sp-board.solved .sp-tile{cursor:default}.sp-board.solved:not(.picture) .sp-tile{animation:sp-wave .5s ease-out backwards;animation-delay:calc((var(--gr) + var(--gc)) * 50ms)}.sp-board.solved.picture .sp-tile{border-radius:0;box-shadow:none}.sp-board.solved.picture .sp-num{display:none}.sp-board.solved.picture .sp-last{opacity:1}.sp-board.solved.picture{--gap: 0px;overflow:hidden;transition:none}@keyframes sp-wave{40%{transform:translate(calc(var(--c) * (100% + var(--gap))),calc(var(--r) * (100% + var(--gap)))) scale(1.08)}}.sp-banner{min-height:1.5em;font-weight:600;color:var(--muted)}