.sprite-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:24px}.sprite-controls,.sprite-exports{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.sprite-controls button,.sprite-exports button,.sprite-frames button{min-height:44px;border:1px solid #c9d6d3;border-radius:10px;background:white;color:#123337;padding:10px 16px;font:inherit;cursor:pointer}.sprite-controls button[aria-pressed=true],.sprite-frames button[aria-current=true]{background:#d7eeea;border:2px solid #148d82}.sprite-stage{overflow:auto;border:1px solid #ccd9d5;padding:12px;border-radius:16px;background:white}.sprite-stage canvas{width:100%;max-width:640px;image-rendering:pixelated;touch-action:none;background:repeating-conic-gradient(#eee 0% 25%,white 0% 50%) 0/24px 24px}.sprite-preview{width:192px;height:192px;image-rendering:pixelated;background:repeating-conic-gradient(#eee 0% 25%,white 0% 50%) 0/16px 16px}.sprite-frames{display:flex;gap:8px;overflow:auto;padding:12px 0}.sprite-frames canvas{width:48px;height:48px;display:block;image-rendering:pixelated}.sprite-layout aside{padding:16px;background:#eef6f3;border-radius:16px}.sprite-layout label{display:inline-flex;align-items:center;gap:8px}.sprite-layout input[type=range]{max-width:130px}.sprite-help{max-width:800px;margin-top:36px}.sprite-layout button:focus-visible{outline:3px solid #e58051;outline-offset:3px}@media(max-width:700px){.sprite-layout{grid-template-columns:1fr}.sprite-layout aside{order:-1;display:flex;flex-wrap:wrap;gap:12px;align-items:center}.sprite-preview{width:96px;height:96px}.sprite-controls button,.sprite-exports button{flex:1 1 125px}}