:root{--bg:#090b10;--panel:#11141c;--panel2:#171b25;--line:#292e3c;--text:#f2f4fb;--muted:#8c93a8;--purple:#7657ff;--cyan:#53e6c1;--danger:#ff5577;--checker1:#202430;--checker2:#181b24}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}button,input,select{font:inherit}.app-shell{height:100vh;display:grid;grid-template-rows:64px 1fr}.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);background:#0d1016}.brand{display:flex;align-items:center;gap:10px;letter-spacing:.14em}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--cyan);color:var(--cyan);font-weight:900;box-shadow:4px 4px 0 #40308c}.brand div{display:flex;flex-direction:column}.brand small{font-size:8px;color:var(--muted);margin-top:2px}.top-actions{display:flex;gap:7px;align-items:center}button,.button{border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:8px 11px;border-radius:5px;cursor:pointer;transition:.15s}.button{display:inline-block}button:hover,.button:hover{border-color:#555d75;background:#202533}.primary{background:var(--purple);border-color:#8b73ff}.accent{background:var(--cyan);color:#07110e;border-color:var(--cyan);font-weight:800}button:disabled{opacity:.35;cursor:not-allowed}main{min-height:0;display:grid;grid-template-columns:224px minmax(340px,1fr) 280px}.panel{background:var(--panel);overflow-y:auto;padding:16px;border-color:var(--line)}.left-panel{border-right:1px solid var(--line)}.right-panel{border-left:1px solid var(--line)}section section,.panel section{padding:5px 0 18px;margin-bottom:14px;border-bottom:1px solid var(--line)}section section:last-child,.panel section:last-child{border:0}h3{margin:0 0 12px;text-transform:uppercase;font-size:10px;letter-spacing:.16em;color:#b4bbce}.section-title{display:flex;justify-content:space-between;align-items:center}.section-title h3{margin-bottom:12px}.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.tool{height:58px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted)}.tool b{font-size:19px;color:var(--text)}.tool.active{background:#292243;border-color:var(--purple);color:#c8bcff}.color-well{height:42px;border:1px solid var(--line);display:flex;align-items:center;padding:6px;border-radius:5px;gap:8px}.color-well input{width:30px;height:28px;padding:0;border:0;background:none}.color-well span{font-family:ui-monospace,monospace}.recent-colors,.palette{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}.swatch{width:25px;height:25px;padding:0;border-radius:3px;border:2px solid #333846}.swatch:hover{transform:scale(1.1)}label{display:block;color:var(--muted);font-size:11px;margin:10px 0 6px}select,input[type=number]{width:100%;padding:8px;background:#0d1017;color:var(--text);border:1px solid var(--line);border-radius:4px}.range-label{display:flex;justify-content:space-between}.range-label output{color:var(--cyan);font-family:ui-monospace,monospace}input[type=range]{width:100%;accent-color:var(--purple)}.check{display:flex;gap:8px;align-items:center;color:var(--text)}.check input{accent-color:var(--purple)}.icon-btn,.text-btn{padding:3px 7px}.text-btn{font-size:10px;text-transform:uppercase;color:var(--cyan)}.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.preset-grid button{padding:7px 3px;font-family:ui-monospace,monospace;font-size:11px}.preset-grid button.active{background:var(--purple);border-color:#9c89ff}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wide{width:100%;margin-top:12px}.workspace{min-width:0;display:grid;grid-template-rows:58px 1fr 28px;background:#0b0d12}.workspace-bar,.statusbar{display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#10131a;border-bottom:1px solid var(--line)}.workspace-bar>div:first-child{display:flex;flex-direction:column;gap:3px}.workspace-bar strong{font-size:11px;letter-spacing:.1em}.workspace-bar span,.statusbar{font-size:10px;color:var(--muted);font-family:ui-monospace,monospace}.zoom-controls{display:flex;align-items:center;gap:5px}.zoom-controls button{padding:5px 8px}.zoom-controls span{min-width:48px;text-align:center}.canvas-stage{position:relative;overflow:hidden;display:grid;place-items:center;background-color:#0b0d12;background-image:linear-gradient(45deg,#10131a 25%,transparent 25%),linear-gradient(-45deg,#10131a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#10131a 75%),linear-gradient(-45deg,transparent 75%,#10131a 75%);background-size:40px 40px;background-position:0 0,0 20px,20px -20px,-20px 0}.canvas-wrap{box-shadow:0 0 0 1px #444a5c,0 18px 60px #0009;background:repeating-conic-gradient(var(--checker1) 0 25%,var(--checker2) 0 50%) 0/16px 16px;line-height:0}#pixelCanvas{image-rendering:pixelated;display:block;width:512px;height:512px;cursor:crosshair}.canvas-wrap.grid canvas{background-image:linear-gradient(#ffffff18 1px,transparent 1px),linear-gradient(90deg,#ffffff18 1px,transparent 1px)}.drop-hint{position:absolute;bottom:22px;display:flex;flex-direction:column;align-items:center;padding:9px 16px;border:1px dashed #51586c;border-radius:6px;background:#10131adc;pointer-events:none;color:var(--muted)}.drop-hint b{color:var(--text);font-size:11px}.drop-hint span{font-size:9px;margin-top:2px}.statusbar{border-top:1px solid var(--line);border-bottom:0}.frames{display:flex;gap:7px;overflow-x:auto;padding:2px}.frame{min-width:56px;height:56px;padding:3px;background-color:#0c0f15;background-image:repeating-conic-gradient(#222630 0 25%,#191c24 0 50%);background-size:10px 10px}.frame.active{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}.frame canvas{width:100%;height:100%;image-rendering:pixelated}.toast{position:fixed;left:50%;bottom:36px;transform:translate(-50%,20px);opacity:0;background:#242936;border:1px solid #4c5368;padding:10px 16px;border-radius:6px;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:900px){main{grid-template-columns:185px 1fr}.right-panel{position:absolute;right:0;top:64px;bottom:0;width:260px;z-index:3;box-shadow:-10px 0 30px #0008}.workspace{margin-right:260px}.left-panel{display:none}}@media(max-width:680px){.right-panel{display:none}.workspace{margin:0}main{grid-template-columns:1fr}.brand small{display:none}.top-actions button:nth-child(-n+2){display:none}}