/* Pixel Art & Sprite Editor — dark editor frame, crisp canvas on a checkerboard. */
.px-hero{background:radial-gradient(circle at 92% 18%,#ff77a833,transparent 38%),linear-gradient(120deg,#2b1d3d,#211d38 75%)}
.px-frame{border:1px solid var(--usp-line,#3a3352);border-radius:16px;background:#1c182e;margin-top:14px;overflow:hidden;display:flex;flex-direction:column}
.px-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;background:#2d2645;border-bottom:1px solid #3a3352}
.px-group{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.px-right{margin-left:auto}
.px .px-btn{min-height:32px;padding:4px 10px;font-size:.84rem;border-radius:8px;background:#1c182e;border:1px solid #3a3352;color:#e9e3f7;display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.px .px-btn.small{min-height:28px;padding:2px 8px;font-size:.8rem}
.px .px-btn.usp-primary{background:#ff77a8;color:#24101a;border-color:transparent;font-weight:700}
.px .px-btn[aria-pressed=true]{background:#7a4dff;border-color:#b69cff;color:#fff}
.px-zoom{min-width:40px;text-align:center;font:600 .84rem ui-monospace,Consolas,monospace;color:#d9d3ea}
.px-body{display:grid;grid-template-columns:50px minmax(0,1fr) 250px;height:min(64vh,640px);min-height:380px}
.px-tools{display:flex;flex-direction:column;gap:3px;padding:6px 5px;background:#241f38;border-right:1px solid #3a3352;overflow-y:auto}
.px .px-tools button{width:38px;height:38px;min-height:0;padding:0;border-radius:8px;background:#1c182e;border:1px solid #3a3352;color:#e9e3f7;font-size:1.05rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative}
.px .px-tools button[aria-checked=true]{background:#ff77a8;color:#24101a;border-color:transparent}
.px-tools button small{position:absolute;right:2px;bottom:0;font-size:9px;opacity:.7}
.px-stagewrap{position:relative;overflow:auto;background:#14111f;min-width:0}
.px-stage{min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;width:max-content;height:max-content}
#pxCanvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;cursor:crosshair;box-shadow:0 0 0 1px #3a3352,0 8px 30px #0008;background:repeating-conic-gradient(#c8c8d0 0 25%,#ffffff 0 50%) 0 0/16px 16px}
.px-info{position:sticky;left:8px;bottom:6px;display:inline-block;margin:-26px 0 0 8px;font:12px ui-monospace,Consolas,monospace;color:#9fb3c8;background:#14111fcc;padding:2px 8px;border-radius:6px;pointer-events:none}
.px-side{background:#1c182e;border-left:1px solid #3a3352;overflow:auto;padding:8px 10px}
.px-panel{margin-bottom:10px}.px-panel h3{margin:4px 0 6px;font-size:.78rem;color:#d9c1ff;text-transform:uppercase;letter-spacing:.05em}
.px-colors{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.px .px-swatch{width:26px;height:26px;min-height:0;padding:0;border-radius:6px;border:1px solid #4a4163;cursor:pointer;background-image:none}
.px .px-swatch.big{width:38px;height:38px;border:2px solid #fff;box-shadow:0 0 0 1px #000}.px .px-swatch.sec{width:30px;height:30px;border-color:#aaa}
.px-colors input[type=color]{width:38px;height:34px;padding:0;border:1px solid #4a4163;border-radius:6px;background:none}.px-colors input[type=range]{flex:1;min-width:80px}
.px-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:6px 0}.px .px-row select{height:30px;min-height:0;padding:2px 6px;font-size:.82rem;flex:1;min-width:0;background:#141022;color:#eee8ff;border:1px solid #4a3d66;border-radius:7px}
.px-row label{font-size:.8rem;color:#d9d3ea;display:flex;gap:5px;align-items:center}.px .px-row input[type=number]{width:58px;height:28px;min-height:0;padding:2px 6px}
.px-chk{font-size:.8rem}
.px-palette{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}.px .px-palette button{width:100%;aspect-ratio:1;height:auto;border-radius:4px}
.px .px-palette button[aria-selected=true]{outline:2px solid #fff;outline-offset:1px}
.px-layer{display:grid;grid-template-columns:26px 34px minmax(0,1fr) 46px;gap:4px;align-items:center;padding:4px;border-radius:8px;border:1px solid transparent;margin-bottom:3px;cursor:pointer}
.px-layer.on{background:#2d2645;border-color:#7a4dff}.px .px-layer button{width:26px;height:26px;min-height:0;padding:0;border-radius:6px;background:none;border:1px solid #3a3352;color:#e9e3f7}
.px-layer canvas{width:34px;height:34px;image-rendering:pixelated;background:repeating-conic-gradient(#c8c8d0 0 25%,#fff 0 50%) 0 0/8px 8px;border-radius:4px}
.px .px-layer input[type=text]{height:26px;min-height:0;padding:2px 5px;font-size:.8rem;background:transparent;border:1px solid transparent;color:#fff}.px .px-layer input[type=text]:focus{border-color:#7a4dff;background:#14111f}
.px .px-layer input[type=number]{height:26px;min-height:0;padding:1px 3px;font-size:.76rem;width:100%}
.px-timeline{border-top:1px solid #3a3352;background:#241f38;padding:6px 10px}
.px-tl-ctrl{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.px-delay{font-size:.8rem;color:#d9d3ea;display:flex;gap:5px;align-items:center;margin-left:6px}.px .px-delay input{width:70px;height:28px;min-height:0;padding:2px 6px}
.px-frames{display:flex;gap:6px;overflow-x:auto;padding:8px 2px 4px}
.px-fr{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;border-radius:8px;border:1px solid #3a3352;background:#1c182e;cursor:pointer;color:#c8bfd9;font:11px ui-monospace,Consolas,monospace}
.px-fr.on{border-color:#ff77a8;background:#3a2140;color:#fff}.px-fr canvas{width:48px;height:48px;image-rendering:pixelated;background:repeating-conic-gradient(#c8c8d0 0 25%,#fff 0 50%) 0 0/8px 8px}
.px-frame .usp-status:empty{display:none}.px-frame .usp-status{margin:0}
.px-dlg{border:1px solid #7a4dff;border-radius:14px;background:#1c182e;color:#e9e3f7;padding:16px 18px;max-width:min(440px,92vw);box-shadow:0 20px 50px #000a}
.px-dlg::backdrop{background:#0008}.px-dlg h3{margin:0 0 10px;color:#fff}.px-dlg .px-row label{font-size:.86rem}
.px-dlg .px-row input[type=number]{width:80px}.px-dlg select{height:32px;min-height:0;padding:2px 6px}.px-dlg .px-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:12px}.px-dlg p{font-size:.82rem;color:#c8bfd9;margin:6px 0}
.px-presets{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.px-frame:fullscreen,.px-frame.px-full{position:fixed;inset:0;z-index:1000;margin:0;border:0;border-radius:0}
.px-frame:fullscreen .px-body,.px-frame.px-full .px-body{flex:1;height:auto}
@media(max-width:900px){.px-body{grid-template-columns:44px minmax(0,1fr);grid-template-rows:minmax(320px,56vh) auto;height:auto}.px-side{grid-column:1/-1;border-left:0;border-top:1px solid #3a3352;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}.px .px-tools button{width:34px;height:34px}.px-right{margin-left:0}}
#pxWrap:focus{outline:none}
.px .px-colors input[type=color]{width:38px;flex:0 0 38px;height:34px;min-height:0;padding:0}
@media(max-width:900px){.px-frame:fullscreen,.px-frame.px-full{overflow-y:auto;-webkit-overflow-scrolling:touch;display:block}.px-frame:fullscreen .px-body,.px-frame.px-full .px-body{flex:none;height:auto;min-height:0}}