:root{color-scheme:dark;font:16px system-ui,sans-serif;background:#151322;color:#f4edf8}*{box-sizing:border-box}body{margin:0 auto;max-width:1600px;padding:24px}header{display:flex;justify-content:space-between;gap:20px}h1{font-size:30px;margin:0;color:#ead1ff}h2{font-size:17px}p{line-height:1.5;color:#bfb4cd}main{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px}fieldset,details{border:1px solid #51405f;border-radius:10px;padding:16px;min-width:0;margin:0 0 14px}legend{padding:0 8px;color:#dec2f5}label{display:block;margin:8px 0;font-size:14px}button,input,select,textarea{font:inherit;color:inherit;background:#292137;border:1px solid #665174;border-radius:5px;padding:8px}input:not([type=checkbox],[type=color],[type=range]),select,textarea{width:100%}button{cursor:pointer;margin:3px 2px;min-height:40px}button:hover,button[aria-pressed=true]{background:#674782}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #f3d18a;outline-offset:3px}button:disabled{opacity:.45;cursor:default}input[type=color]{width:58px;padding:3px;height:38px}input[type=checkbox]{accent-color:#d6acf3}textarea{font:13px ui-monospace,monospace}a{color:#e1b5ff}.toolbar{display:flex;gap:6px;align-items:end;flex-wrap:wrap}.toolbar label{min-width:80px}.toolbar label:first-child{flex:1}.canvases{display:grid;grid-template-columns:minmax(280px,512px) minmax(200px,1fr);gap:20px;margin:18px 0}canvas{image-rendering:pixelated;background:repeating-conic-gradient(#352d42 0% 25%,#2a2335 0% 50%) 0/16px 16px;max-width:100%;border:1px solid #6b577a}#pixels{width:100%;aspect-ratio:1;touch-action:none;cursor:crosshair}#preview{width:192px;height:192px}.library{max-height:430px;overflow:auto}.library button,#drafts button{display:block;width:100%;text-align:left}.frames{display:grid;grid-template-columns:repeat(4,minmax(36px,1fr));gap:3px}.frames button{padding:3px;margin:0;font-size:12px}.frames canvas{display:block;width:100%;aspect-ratio:1}.palette{display:flex;gap:5px;flex-wrap:wrap}.palette button{width:25px;min-height:25px;margin:0;border:1px solid #9a829f}#status{background:#292137;border-left:3px solid #d3a3f3;padding:12px;min-height:48px}#status.error{border-color:#ff9494;color:#ffcccc}footer{padding:16px;font-size:14px;color:#bfb4cd}summary{cursor:pointer;font-weight:600}#hides label{display:inline-block;margin-right:15px}[hidden]{display:none!important}@media(max-width:850px){body{padding:12px}main{grid-template-columns:1fr}#library .library{max-height:160px}.canvases{grid-template-columns:1fr}.canvases aside{max-width:360px}header{display:block}}