.cr-pix-stage{padding:var(--space-5)}.cr-pix-canvas{display:block;width:min(100%,640px);height:auto;aspect-ratio:1;image-rendering:pixelated;touch-action:none;cursor:crosshair;border:1.5px solid var(--color-edge);border-radius:var(--radius-s);box-shadow:var(--shadow-s);background:var(--color-surface)}.cr-pix-canvas:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}.cr-pix-current{width:30px;height:30px;border-radius:var(--radius-s);border:1.5px solid var(--color-edge);background-image:repeating-conic-gradient(#d9d9d9 0 25%,#f4f4f4 0 50%);background-size:10px 10px}.cr-pix-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}.cr-pix-swatch{min-width:44px;min-height:44px;padding:0;border:1.5px solid var(--color-line-strong);border-radius:var(--radius-s)}.cr-pix-swatch:hover:not(:disabled){border-color:var(--color-edge);filter:brightness(1.05)}.cr-pix-swatch[aria-pressed=true]{border:2px solid var(--color-ink);box-shadow:0 0 0 2px var(--color-surface) inset,0 0 0 3px var(--color-accent)}.cr-pix-sub{margin:0;color:var(--color-muted);font-size:var(--text-xs);line-height:1.6}.cr-pix-link{min-height:0;padding:0;border:0;color:var(--color-accent);font-size:inherit;text-decoration:underline;text-underline-offset:3px}.cr-pix-link,.cr-pix-link:hover:not(:disabled){background:none}@media (max-width:560px){.cr-pix-stage{padding:var(--space-3)}}