:root{--bg: #111;--fg: #eee;--panel: #1a1a1a;--border: #333;--accent: #ff55ff}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}body{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg);color:var(--fg);margin:0;padding:1rem;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button,.swatch,.frame{touch-action:manipulation}header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--border);padding-bottom:.5rem;margin-bottom:1rem}header h1{margin:0;letter-spacing:.1em}header a{color:var(--fg);text-decoration:none;border-bottom:1px dashed var(--fg)}main{display:grid;grid-template-columns:auto 220px 220px;gap:1.5rem}.stage{display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}#main{image-rendering:pixelated;width:384px;height:384px;max-width:100%;aspect-ratio:1 / 1;border:1px solid var(--border);cursor:crosshair;touch-action:none}.tools{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.tool-group{display:flex;gap:.25rem;padding:.25rem;background:var(--panel);border:1px solid var(--border)}button{font:inherit;color:var(--fg);background:var(--panel);border:1px solid var(--border);padding:.3rem .6rem;cursor:pointer}button.on{border-color:var(--accent);color:var(--accent)}@media (hover: hover){button:hover{border-color:var(--accent)}}.sprite-btn{--cell: 40px;width:var(--cell);height:var(--cell);padding:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAIICAMAAADOjZksAAAADFBMVEUAAAAAzP/MzMyZmZknEDy5AAAAAXRSTlMAQObYZgAABHFJREFUeNrtnYFS20gQBXfd///PdypinpL1zb7LCBVOXisBCjqtwbKFF2wywl8OpjftHmZv2j2cnlnELE6ziFmcZhFzxqnmtjfM3rB7w+wNuzfM3kgvvfQaPczeVM8pOmdAu4fZm0ZvYJ7zp33OR706qN4uqF4dPHohhBCCB3jenHYPszftHlZPxfu+5KuH2Zt2D6NXFzkY++I8GNsiaL6qOKfmq4oM9ariHOppq3vnbtU7d+slt4qUS24VZ7nkVpHNknuq9zKozxHUW4MfPRXVU3B5rd4a1Oult0DZE3PTYz06bJY96tVBHd86qOO7Q70auzfUqyl7mF8Cfg7MrC9CCCE/7bn9pz14xTm9IqhY97wiqFj3vCKoWPe8ImJQ9rwi1EX1vCLURfW8ImZxmkXWGV/31hmL25vTO/B6B07vwOsdOL2DXU/UPbHribon1DOK1hlQvW3RPKeuPYHRU+POnyIJnJ46zrnV6mnpuAf1tsV5/9c7OFPETmR1FkIIPlztwdUeXO3B1R40vN5BSfCrg4CWPy1PIuPHX1zvjgkFetHwmgclE/7118MQQgghfA8AvW57eog3QMMr9ozrud/ShYbXWg/7e4aeJ0TDa094/2XY8/rXw/tvKbWX++shhBDCXXC5x8We9t33nhKS254eh97w5KC3aXu/fpSmt9wdped94fsEv+/9F663Fl9uvrdwrSeTnrea42zS8HQNa3oraOt7MhldT6DPouUJmt6K62WxF0IIeZjW9inbXOXBDxdMz79jz2XeQGbLk/ixcZGnPdP0JH5ufQ8dPRi0vIH+8HxpendNuNw1xfdq8dNseL0J3/J6KJMB9D2Jnx5NT2bTW82mt5r0vNVseO3HCGcdFUIIfwScsT37eai+d3+QT3reIf78cWh52rPegenZewbbq/cMfFg0PAlDYHr3TChRVMF3mjDB6vlomN67nxfPWF4e9BZCCKH7fSXHEW1vMBAD17tzwucmt+Wt30WGlqc96x2Ynr1nsL16z7rv7Hr1hALTy4RfPqHA8jJhY8JrV1JZp4QQQtgCrve+OcH4A733HxD96h+63vMlzxcMbM8QBwP4TU9LdOApDg58bzXXp/BIsz3BMETTEzp6/8/LTfGbefnCEkIIIbDy0nusFP/5GPsncT7Gv4XHqT+WogqD4vHvKhyb3l6L64SgvtCECqr/1hMeWBMe1BMiqgnP1BNqqyfUVk34cltYardO+Av1ZSiqCU+UE54oJ9Q54pc9rP9e54VM+G4TinpCUU248jIoxAghhPAOT6h/bEM8c9ShxzNXJ1Gy7ilZwYHxFPTHge7cOb+1pqhpwbOdUHNRJjVXfRlqgVLnzguU3eerYt1T0ekNqHsqmr0BVc8qFkuKcmFh9yh6VpFikVItVB6ZsH2Ub7getm8pX39bFqhnFR/XPZo4q4kQQgjhPdaLAsyeGQS8nhnkA6d34PYAo2clEXVRWJehUzxKXlGjGkfZSGIe78dp1ruvQf1gv/jNg7nrHkJw+AeIMCPecOCjOgAAAABJRU5ErkJggg==);background-repeat:no-repeat;background-size:calc(2 * var(--cell)) calc(13 * var(--cell));background-color:var(--panel);image-rendering:pixelated;filter:invert(1);background-position-x:0}.sprite-btn.on{background-position-x:calc(-1 * var(--cell));border-color:var(--accent)}.sprite-pencil{background-position-y:calc(0 * var(--cell))}.sprite-fill{background-position-y:calc(-1 * var(--cell))}.sprite-erase{background-position-y:calc(-2 * var(--cell))}.sprite-shift-up{background-position-y:calc(-3 * var(--cell))}.sprite-shift-right{background-position-y:calc(-4 * var(--cell))}.sprite-flip-v{background-position-y:calc(-5 * var(--cell))}.sprite-flip-h{background-position-y:calc(-6 * var(--cell))}.sprite-copy{background-position-y:calc(-7 * var(--cell))}.sprite-paste{background-position-y:calc(-8 * var(--cell))}.sprite-rotate{background-position-y:calc(-9 * var(--cell))}.sprite-clear{background-position-y:calc(-11 * var(--cell))}.sprite-undo{background-position-y:calc(-12 * var(--cell))}.sprite-play,.sprite-stop{--cell: 40px;width:var(--cell);height:var(--cell);padding:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEW2gISZmZlhu0GVAAAAAXRSTlMAQObYZgAAAFZJREFUWMPt1sENACAIwEC7/9IuUQyJ7QD3kYDnVH0YOgg66JIgkyCTIJMgkyCTIJMgkyCTL8Ddj7J7sHcvh90LdvmRqqqqGvi0Oyc6MDAwMHAIrKqRLhD1Ajf0yt1NAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-size:var(--cell) calc(2 * var(--cell));background-color:var(--panel);image-rendering:pixelated;filter:invert(1)}.sprite-play{background-position-y:0}.sprite-stop{background-position-y:calc(-1 * var(--cell))}.text-btn{min-width:40px;height:40px;padding:0 .6rem}.publish button svg{vertical-align:middle;margin-right:.35rem}.palette{display:grid;grid-template-columns:repeat(16,22px);gap:2px}.swatch{width:22px;height:22px;padding:0;border:1px solid var(--border)}.swatch.selected{outline:2px solid var(--accent)}.frames{background:var(--panel);padding:.75rem;border:1px solid var(--border)}.frames h2{margin-top:0;font-size:.9rem}#frameList{display:flex;flex-direction:row;flex-wrap:wrap;gap:.35rem}.frame-actions{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.5rem}.frame-actions .text-btn{flex:1 1 auto}.frame{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.2rem;border:1px solid var(--border);cursor:pointer;background:transparent}.frame.selected{border-color:var(--accent)}.frame.selected span{color:var(--accent)}.frame span{font-size:.7rem;color:#888;line-height:1}.frame canvas{image-rendering:pixelated;width:48px;height:48px;display:block}.publish{background:var(--panel);padding:.75rem;border:1px solid var(--border)}.publish button{display:block;width:100%;margin-bottom:.35rem}#status{font-size:.8rem;color:#aaa;min-height:2em;word-break:break-all}#status a{color:var(--fg);-webkit-user-select:text;user-select:text}dialog{background:var(--panel);color:var(--fg);border:1px solid var(--border);padding:1rem;max-width:95vw}#baseGrid{display:grid;grid-template-columns:repeat(16,1fr);gap:2px}.base-cell{aspect-ratio:1 / 1;width:100%;min-width:0;padding:0;border:1px solid #000}@media (max-width: 720px){body{padding:.5rem}main{grid-template-columns:1fr;gap:1rem}.stage{align-items:center}.palette{width:100%;grid-template-columns:repeat(8,1fr)}.swatch{width:100%;height:auto;aspect-ratio:1 / 1;min-width:0}.frames #frameList{flex-direction:row;flex-wrap:wrap}.frames .frame canvas{width:48px;height:48px}.tools{justify-content:center;gap:.5rem}.sprite-btn{--cell: 48px}.text-btn{height:48px}}footer{margin-top:2rem;padding:1rem 0;border-top:1px solid var(--border);color:#888;font-size:.85rem;text-align:center}footer a{color:inherit}