:root{--background-color: #121212;--panel-background: #1e1e1e;--text-color: #e0e0e0;--text-muted: #888888;--primary-color: #3b82f6;--primary-hover: #2563eb;--border-color: #333333;--input-background: #2a2a2a;--font-family: "Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:var(--font-family);background-color:var(--background-color);color:var(--text-color);font-size:16px}.app-container{display:flex;height:100%;width:100%}.controls-panel{width:380px;flex-shrink:0;background-color:var(--panel-background);padding:24px;overflow-y:auto;border-right:1px solid var(--border-color);display:flex;flex-direction:column;gap:28px}.display-panel{flex-grow:1;padding:24px;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:24px}.control-group{display:flex;flex-direction:column;gap:12px}h1{font-size:1.5rem;font-weight:700;border-bottom:1px solid var(--border-color);padding-bottom:12px}h2{font-size:1.1rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}label{display:flex;flex-direction:column;gap:8px;font-size:.9rem}.slider-label{display:flex;justify-content:space-between}input[type=range]{-webkit-appearance:none;width:100%;height:8px;background:var(--input-background);border-radius:4px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--primary-color);cursor:pointer;border-radius:50%;transition:background .2s ease-in-out}input[type=range]::-webkit-slider-thumb:hover{background:var(--primary-hover)}input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--primary-color);cursor:pointer;border-radius:50%;border:none}.file-input-wrapper{position:relative}.file-input-label{display:inline-block;padding:10px 16px;background-color:var(--input-background);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;width:100%;text-align:center;transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.file-input-label:hover{background-color:#333;border-color:#555}.file-input-wrapper.dragging .file-input-label{border:1px dashed var(--primary-color);background-color:#3b82f61a;color:var(--primary-color)}input[type=file]{display:none}select{width:100%;padding:10px 12px;background-color:var(--input-background);border:1px solid var(--border-color);color:var(--text-color);border-radius:6px;font-family:var(--font-family);font-size:.9rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23888888%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right 12px center;background-size:.65em auto;cursor:pointer}.palette-display{display:flex;flex-wrap:wrap;gap:6px;background-color:var(--input-background);padding:8px;border-radius:6px;min-height:44px}.color-swatch{width:24px;height:24px;border-radius:4px;border:1px solid rgba(255,255,255,.1)}.status-bar{margin-top:auto;padding:12px;background-color:var(--input-background);border-radius:6px;text-align:center;font-size:.9rem;color:var(--text-muted);min-height:45px;display:flex;align-items:center;justify-content:center}.image-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;width:100%}.image-container{display:flex;flex-direction:column;gap:12px;align-items:center}.image-container canvas,.image-container img{max-width:100%;height:auto;border:1px solid var(--border-color);border-radius:8px;background-color:var(--panel-background);image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.placeholder{width:100%;aspect-ratio:1 / 1;border:2px dashed var(--border-color);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.download-link{display:inline-block;padding:12px 24px;background-color:var(--primary-color);color:#fff;text-decoration:none;border-radius:6px;font-weight:500;transition:background-color .2s ease-in-out}.download-link:hover{background-color:var(--primary-hover)}.download-link.disabled{background-color:#555;cursor:not-allowed;opacity:.7}.toggle-switch{display:flex;justify-content:space-between;align-items:center;width:100%;cursor:pointer;flex-direction:row;gap:12px}.toggle-switch .switch-wrapper{position:relative;display:inline-block;width:50px;height:28px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--input-background);transition:.4s}.toggle-switch .slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:var(--text-color);transition:.4s}.toggle-switch input:checked+.slider{background-color:var(--primary-color)}.toggle-switch input:focus+.slider{box-shadow:0 0 1px var(--primary-color)}.toggle-switch input:checked+.slider:before{transform:translate(22px)}.toggle-switch .slider.round{border-radius:34px}.toggle-switch .slider.round:before{border-radius:50%}.preset-container{display:flex;gap:8px;margin-bottom:8px}.preset-button{flex-grow:1;padding:8px 10px;font-family:var(--font-family);font-size:.8rem;background-color:var(--input-background);color:var(--text-muted);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}.preset-button:hover{background-color:#333;border-color:#555;color:var(--text-color)}.preset-button.active{border-color:var(--primary-color);color:var(--primary-color);font-weight:500;background-color:#3b82f61a}.download-palette-button{padding:10px 16px;margin-top:8px;width:100%;font-size:.9rem;font-family:var(--font-family);background-color:var(--input-background);color:var(--text-muted);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s;text-align:center}.download-palette-button:hover:not(:disabled){background-color:#333;border-color:#555;color:var(--text-color)}.download-palette-button:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.app-container{flex-direction:column}.controls-panel{width:100%;height:50vh;border-right:none;border-bottom:1px solid var(--border-color)}.display-panel{height:50vh}}