.pxl{position:absolute;inset:0;container-type:size;user-select:none;-webkit-user-select:none}.pxl-in{height:100%;display:flex;flex-direction:column;gap:2cqh;padding:3.5cqw}.pxl-hud{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:space-between}.pxl-stats,.pxl-actions{display:flex;gap:6px;align-items:center}.pxl-stat{min-width:52px;padding:3px 8px;border-radius:var(--rounded-sm);background:var(--color-canvas-soft-2);text-align:center;line-height:1.2}.pxl-stat span{display:block;font-size:10px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--color-mute)}.pxl-stat b{font-size:15px;font-variant-numeric:tabular-nums;color:var(--color-ink)}.pxl-stat.is-hot{min-width:64px;background:color-mix(in srgb,var(--color-cat) 22%,var(--color-canvas-soft-2));box-shadow:inset 0 0 0 var(--border-w) color-mix(in srgb,var(--color-cat) 50%,transparent)}.pxl-stat.is-hot b{font-family:var(--font-display);font-weight:var(--display-weight);font-size:calc(17px * var(--display-scale))}.pxl-btn,.pxl-select{height:30px;padding:0 9px;border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);background:var(--color-canvas);color:var(--color-ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer}.pxl-select{padding:0 4px}.pxl-btn.is-on{background:color-mix(in srgb,var(--color-cat) 25%,var(--color-canvas));border-color:var(--color-cat)}.pxl-btn:hover,.pxl-tool:hover,.pxl-mode:hover{background:var(--color-canvas-soft-2)}.pxl-btn:focus-visible,.pxl-select:focus-visible,.pxl-tool:focus-visible,.pxl-mode:focus-visible,.pxl-board:focus-visible{outline:2px solid var(--color-cat);outline-offset:2px}.pxl-board-wrap{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;container-type:size}.pxl-board{--u: min(100cqw / var(--pxl-w), 100cqh / var(--pxl-h));--pxl-tint: var(--color-cat);display:grid;grid-template-columns:repeat(var(--pxl-w),minmax(0,1fr));grid-template-rows:repeat(var(--pxl-h),minmax(0,1fr));width:calc(var(--u) * var(--pxl-w));height:calc(var(--u) * var(--pxl-h));touch-action:none;-webkit-touch-callout:none;border-radius:var(--rounded-md, 10px)}.pxl-board[data-tint=warning]{--pxl-tint: var(--color-warning)}.pxl-board[data-tint=error]{--pxl-tint: var(--color-error)}.pxl-board[data-tint=success]{--pxl-tint: var(--color-success)}.pxl-board[data-tint=primary]{--pxl-tint: var(--color-primary)}.pxl-corner{display:flex;align-items:center;justify-content:center;padding:calc(var(--u) * .3)}.pxl-preview{display:grid;grid-template-columns:repeat(var(--pxl-n),1fr);aspect-ratio:1;width:min(100%,calc(var(--u) * var(--pxl-C) - var(--u) * .6));max-height:100%;background:var(--color-canvas-soft-2);border-radius:4px;overflow:hidden}.pxl-preview i.on{background:var(--color-ink)}.pxl-board.is-solved .pxl-preview i.on{background:var(--pxl-tint)}.pxl-cc,.pxl-rc{display:flex;justify-content:flex-end;align-items:center;gap:0;border-radius:calc(var(--u) * .25);font-family:var(--font-display);font-weight:var(--display-weight);font-variant-numeric:tabular-nums;line-height:1;font-size:calc(var(--u) * .55 * var(--display-scale));color:var(--color-ink);transition:color .2s}.pxl-cc{flex-direction:column;margin:0 calc(var(--u) * .06);padding-bottom:calc(var(--u) * .12)}.pxl-rc{margin:calc(var(--u) * .06) 0;padding-right:calc(var(--u) * .2)}.pxl-cc b,.pxl-rc b{display:flex;align-items:center;justify-content:center;font-weight:inherit}.pxl-cc b{height:var(--u)}.pxl-rc b{width:var(--u)}.pxl-cc.is-done,.pxl-rc.is-done{color:color-mix(in srgb,var(--color-mute) 55%,transparent)}.pxl-cc.is-line,.pxl-rc.is-line{background:color-mix(in srgb,var(--color-cat) 22%,transparent)}.pxl-cell{position:relative;min-width:0;min-height:0;margin:calc(var(--u) * .05);border-radius:22%;cursor:pointer;background:color-mix(in srgb,var(--color-cat) 12%,var(--color-canvas-soft-2))}.pxl-cell.g-r{margin-right:calc(var(--u) * .14)}.pxl-cell.g-b{margin-bottom:calc(var(--u) * .14)}.pxl-cell.is-line{background:color-mix(in srgb,var(--color-cat) 24%,var(--color-canvas-soft-2))}.pxl-cell.is-fill{background:var(--color-ink)}.pxl-cell.is-bad{background:var(--color-error)}.pxl-cell.is-cur{box-shadow:0 0 0 2px var(--color-cat);z-index:1}.pxl-cell.is-cross:before,.pxl-cell.is-cross:after{content:"";position:absolute;left:22%;right:22%;top:46%;height:8%;min-height:1.5px;border-radius:2px;background:var(--color-mute);transform:rotate(45deg)}.pxl-cell.is-cross:after{transform:rotate(-45deg)}.pxl-cell.is-hinted{animation:pxl-hint .9s ease-out}.pxl-cell.is-caught{animation:pxl-caught .7s ease-out}@keyframes pxl-hint{0%,40%{box-shadow:0 0 0 3px var(--color-success)}to{box-shadow:0 0 0 0 transparent}}@keyframes pxl-caught{0%,35%{background:var(--color-error)}}.pxl-board.is-solved .pxl-cell{cursor:default}.pxl-board.is-solved .pxl-cell.is-cross:before,.pxl-board.is-solved .pxl-cell.is-cross:after{opacity:0;transition:opacity .4s}.pxl-board.is-solved .pxl-cell.is-fill{background:var(--pxl-tint);border-radius:12%}.pxl-board.is-solved .pxl-cc,.pxl-board.is-solved .pxl-rc{color:color-mix(in srgb,var(--color-mute) 55%,transparent)}.pxl-cell.is-wave{animation:pxl-wave .5s ease-out var(--pxl-delay, 0ms) both}@keyframes pxl-wave{0%{transform:scale(1)}40%{transform:scale(.7)}to{transform:scale(1)}}@media(prefers-reduced-motion:reduce){.pxl-cell.is-hinted,.pxl-cell.is-caught,.pxl-cell.is-wave{animation:none}}.pxl-paused{position:absolute;inset:0;display:none;align-items:center;justify-content:center;border-radius:var(--rounded-lg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:color-mix(in srgb,var(--color-canvas) 55%,transparent);font-family:var(--font-display);font-size:22px;color:var(--color-ink)}.pxl-board-wrap.is-paused .pxl-paused{display:flex}.pxl-tools{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:6px}.pxl-tool,.pxl-mode{min-width:0;height:40px;overflow:hidden;white-space:nowrap;border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);background:var(--color-canvas);color:var(--color-ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer}.pxl-tool[aria-pressed=true]{background:color-mix(in srgb,var(--color-cat) 25%,var(--color-canvas));border-color:var(--color-cat)}.pxl-tool:disabled{opacity:.45;cursor:default}.pxl-mode{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;background:var(--color-canvas-soft-2)}.pxl-mode span{display:flex;align-items:center;justify-content:center;gap:6px;border-radius:calc(var(--rounded-sm) - 2px);color:var(--color-mute)}.pxl-mode-fill:before{content:"";width:10px;aspect-ratio:1;border-radius:2px;background:var(--color-ink)}.pxl-mode-cross:before{content:"×";font-size:16px;line-height:1}.pxl-mode[aria-pressed=false] .pxl-mode-fill,.pxl-mode[aria-pressed=true] .pxl-mode-cross{background:var(--color-canvas);color:var(--color-ink);box-shadow:0 0 0 1px var(--color-cat)}.pxl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@container (min-aspect-ratio: 5/4){.pxl-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,32cqw);grid-template-rows:auto 1fr;gap:2cqh 3cqh;padding:2cqh}.pxl-board-wrap{grid-column:1;grid-row:1 / 3}.pxl-hud{grid-column:2;grid-row:1;flex-direction:column;align-items:stretch}.pxl-stats,.pxl-actions{flex-wrap:wrap}.pxl-tools{grid-column:2;grid-row:2;grid-template-columns:1fr 1fr 1fr;align-content:center}.pxl-mode{grid-column:1 / 4}}@container (max-height: 300px){.pxl-stat span,.pxl-stat[data-s]{display:none}.pxl-hud,.pxl-stats,.pxl-actions,.pxl-tools{gap:4px}.pxl-btn,.pxl-select{height:26px;padding:0 6px;font-size:12px}.pxl-tool,.pxl-mode{height:32px;font-size:12px}}