.pxl{--accent:#6ac06a}.pxl-wrap{display:flex;gap:12px;align-items:flex-start}@media (max-width:640px){.pxl-wrap{flex-direction:column}}.pxl-palette{display:grid;grid-template-columns:repeat(2,30px);gap:6px;flex:none;padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(12,16,22,.6)}@media (max-width:640px){.pxl-palette{grid-template-columns:repeat(8,30px);width:100%;justify-content:center}}.pxl-sw{width:30px;height:30px;border-radius:7px;border:2px solid rgba(255,255,255,.08);cursor:pointer;padding:0}.pxl-sw.on{border-color:#fff;box-shadow:0 0 0 2px #ffffff4d}.pxl-board{flex:1;aspect-ratio:1/1;max-width:640px}.pxl-board canvas{cursor:crosshair;image-rendering:pixelated}