@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0a0a12;--bg-secondary:#111120;--bg-panel:#16162a;--bg-panel-hover:#1e1e38;--border-color:#ffffff0f;--border-glow:#a855f759;--text-primary:#e8e8f0;--text-secondary:#88a;--text-muted:#557;--accent-purple:#a855f7;--accent-cyan:#00d4ff;--accent-pink:#ff2d87;--accent-gradient:linear-gradient(135deg, #a855f7, #00d4ff);--shadow-glow:0 0 20px #a855f726;--radius-sm:6px;--radius-md:10px;--radius-lg:14px}html{font-size:16px}body{background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;overflow-x:hidden}#root{min-height:100vh}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--accent-purple);border-radius:3px}button{cursor:pointer;border:none;outline:none;font-family:Inter,sans-serif}input{font-family:Inter,sans-serif}.header{border-bottom:1px solid var(--border-color);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:linear-gradient(#16162af2,#0a0a12d9);justify-content:space-between;align-items:center;padding:14px 28px;display:flex}.header-brand{align-items:center;gap:12px;display:flex}.header-icon{filter:drop-shadow(0 0 8px #a855f780);font-size:1.7rem}.header-title{background:var(--accent-gradient);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text;font-size:1.45rem;font-weight:700}.header-subtitle{color:var(--text-muted);font-size:.82rem;font-weight:400}.canvas-container{cursor:crosshair;justify-content:center;align-items:center;width:100%;height:100%;padding:24px;display:flex;position:relative;overflow:hidden}.canvas-container.panning{cursor:grabbing}.canvas-wrapper{transform-origin:50%;will-change:transform;line-height:0;transition:transform .12s ease-out}.pixel-canvas{image-rendering:pixelated;cursor:crosshair;border-radius:4px;box-shadow:0 0 40px #a855f71a,0 4px 24px #0006}.canvas-container.panning .pixel-canvas{cursor:grabbing}.color-palette{background:var(--bg-panel);border-radius:var(--radius-md);border:1px solid var(--border-color);padding:16px}.palette-title{text-transform:uppercase;letter-spacing:1.5px;color:var(--text-secondary);margin-bottom:14px;font-size:.75rem;font-weight:600}.selected-color-section{background:var(--bg-secondary);border-radius:var(--radius-sm);align-items:center;gap:12px;margin-bottom:14px;padding:10px;display:flex}.selected-color-preview{border-radius:var(--radius-sm);border:2px solid #ffffff26;flex-shrink:0;width:36px;height:36px;box-shadow:0 0 14px #a855f740}.selected-color-hex{color:var(--text-secondary);text-transform:uppercase;font-family:Courier New,monospace;font-size:.78rem}.color-picker-row{align-items:center;gap:10px;margin-bottom:14px;display:flex}.color-picker-label{color:var(--text-secondary);font-size:.8rem}.color-picker-input{border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;width:42px;height:32px;padding:0}.color-picker-input::-webkit-color-swatch-wrapper{padding:2px}.color-picker-input::-webkit-color-swatch{border:1px solid #ffffff26;border-radius:4px}.preset-colors-grid{grid-template-columns:repeat(5,1fr);gap:4px;display:grid}.color-swatch{aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:4px;width:100%;transition:all .15s;position:relative}.color-swatch:hover{z-index:1;transform:scale(1.2);box-shadow:0 0 10px #fff3}.color-swatch.active{border-color:var(--accent-cyan);transform:scale(1.15);box-shadow:0 0 10px #00d4ff73}.toolbar{background:var(--bg-panel);border-radius:var(--radius-md);border:1px solid var(--border-color);padding:16px}.toolbar-title{text-transform:uppercase;letter-spacing:1.5px;color:var(--text-secondary);margin-bottom:12px;font-size:.75rem;font-weight:600}.tool-buttons{flex-direction:column;gap:6px;display:flex}.tool-btn{background:var(--bg-secondary);color:var(--text-primary);border-radius:var(--radius-sm);border:1px solid #0000;align-items:center;gap:10px;padding:10px 14px;font-size:.85rem;transition:all .2s;display:flex}.tool-btn:hover{background:var(--bg-panel-hover);border-color:var(--border-glow);box-shadow:var(--shadow-glow)}.tool-btn.active{border-color:var(--accent-purple);color:var(--accent-purple);background:#a855f726;box-shadow:0 0 16px #a855f733}.tool-icon{font-size:1.1rem}.tool-label{font-weight:500}.toolbar-divider{background:var(--border-color);height:1px;margin:10px 0}.clear-btn:hover{border-color:var(--accent-pink);color:var(--accent-pink);background:#ff2d871a}.grid-controls{background:var(--bg-panel);border-radius:var(--radius-md);border:1px solid var(--border-color);padding:16px}.grid-controls-title{text-transform:uppercase;letter-spacing:1.5px;color:var(--text-secondary);margin-bottom:12px;font-size:.75rem;font-weight:600}.grid-size-buttons{grid-template-columns:repeat(2,1fr);gap:6px;display:grid}.grid-size-btn{background:var(--bg-secondary);color:var(--text-secondary);border-radius:var(--radius-sm);border:1px solid #0000;padding:8px 6px;font-size:.78rem;font-weight:500;transition:all .2s}.grid-size-btn:hover{background:var(--bg-panel-hover);color:var(--text-primary);border-color:var(--border-glow)}.grid-size-btn.active{border-color:var(--accent-cyan);color:var(--accent-cyan);background:#00d4ff1f;box-shadow:0 0 12px #00d4ff26}.zoom-controls{background:var(--bg-panel);border-radius:var(--radius-md);border:1px solid var(--border-color);padding:16px}.zoom-controls-title{text-transform:uppercase;letter-spacing:1.5px;color:var(--text-secondary);margin-bottom:12px;font-size:.75rem;font-weight:600}.zoom-buttons{align-items:center;gap:8px;margin-bottom:10px;display:flex}.zoom-btn{background:var(--bg-secondary);width:36px;height:36px;color:var(--text-primary);border-radius:var(--radius-sm);border:1px solid #0000;justify-content:center;align-items:center;font-size:1.2rem;font-weight:600;transition:all .2s;display:flex}.zoom-btn:hover{background:var(--bg-panel-hover);border-color:var(--border-glow);box-shadow:var(--shadow-glow)}.zoom-level{text-align:center;color:var(--accent-cyan);font-variant-numeric:tabular-nums;flex:1;font-size:.85rem;font-weight:600}.zoom-reset-btn{background:var(--bg-secondary);width:100%;color:var(--text-secondary);border-radius:var(--radius-sm);border:1px solid #0000;padding:8px;font-size:.8rem;transition:all .2s}.zoom-reset-btn:hover{background:var(--bg-panel-hover);color:var(--text-primary);border-color:var(--border-glow)}.download-controls{background:var(--bg-panel);border-radius:var(--radius-md);border:1px solid var(--border-color);padding:16px}.download-title{text-transform:uppercase;letter-spacing:1.5px;color:var(--text-secondary);margin-bottom:12px;font-size:.75rem;font-weight:600}.download-buttons{flex-direction:column;gap:8px;display:flex}.download-btn{border-radius:var(--radius-sm);border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:10px 14px;font-size:.85rem;font-weight:600;transition:all .2s;display:flex}.png-btn{color:var(--accent-cyan);background:linear-gradient(135deg,#a855f72e,#00d4ff2e);border-color:#00d4ff33}.png-btn:hover{border-color:var(--accent-cyan);background:linear-gradient(135deg,#a855f74d,#00d4ff4d);box-shadow:0 0 20px #00d4ff33}.jpg-btn{color:var(--accent-pink);background:linear-gradient(135deg,#ff2d872e,#a855f72e);border-color:#ff2d8733}.jpg-btn:hover{border-color:var(--accent-pink);background:linear-gradient(135deg,#ff2d874d,#a855f74d);box-shadow:0 0 20px #ff2d8733}.app{flex-direction:column;min-height:100vh;display:flex}.app-main{flex:1;gap:20px;width:100%;max-width:1440px;margin:0 auto;padding:20px;display:flex}.sidebar{flex-direction:column;flex-shrink:0;gap:14px;width:220px;display:flex}.canvas-section{background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-color);flex:1;justify-content:center;align-items:center;min-height:560px;display:flex;overflow:auto}.grid-toggle{background:var(--bg-panel);border-radius:var(--radius-md);border:1px solid var(--border-color);padding:14px 16px}.toggle-label{color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;font-size:.82rem;display:flex}.toggle-label input[type=checkbox]{accent-color:var(--accent-purple);cursor:pointer;width:16px;height:16px}@media (width<=1100px){.app-main{flex-direction:column;align-items:center}.sidebar{flex-flow:wrap;justify-content:center;width:100%;max-width:560px}.sidebar>*{flex:180px;min-width:180px}.canvas-section{width:100%;max-width:600px;min-height:420px}}