:root{--bg: #1f1f28;--bg-dark: #16161d;--bg-highlight: #2a2a37;--muted: #54546d;--fg-dim: #727169;--fg: #dcd7ba;--fg-light: #c8c093;--red: #e46876;--orange: #ffa066;--yellow: #e6c384;--green: #98bb6c;--blue: #7fb4ca;--link: #7e9cd8;--purple: #957fb8}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Consolas,Monaco,Courier New,Courier,monospace;background:var(--bg);color:var(--fg);min-height:100vh}header{max-width:960px;margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bg-highlight)}header h1{font-size:1.1rem;font-weight:600;color:var(--fg-light)}main{max-width:960px;margin:0 auto;padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}#canvas-area{display:none;grid-template-columns:1fr 1fr;gap:1rem}#canvas-area.visible{display:grid}.canvas-wrap{display:flex;flex-direction:column;gap:.35rem}.canvas-wrap label{font-size:.75rem;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.05em}.canvas-wrap canvas{width:100%;background:var(--bg-dark);border:1px solid var(--bg-highlight);image-rendering:pixelated}#dropzone{border:2px dashed var(--muted);padding:2.5rem 1rem;text-align:center;cursor:pointer;color:var(--fg-dim);font-size:.85rem;transition:border-color .15s,color .15s}#dropzone:hover,#dropzone.drag-over{border-color:var(--link);color:var(--fg)}#dropzone input{display:none}#controls{display:none;flex-direction:column;gap:.75rem}#controls.visible{display:flex}.control-row{display:flex;align-items:center;gap:.75rem;font-size:.85rem}.control-row>label{min-width:7rem;color:var(--fg-dim)}.control-row input[type=range]{flex:1;max-width:200px;accent-color:var(--link)}.control-row .param-value{min-width:3.5rem;text-align:right;color:var(--fg-light);font-size:.8rem;font-variant-numeric:tabular-nums}.control-row select{flex:1;max-width:280px;padding:.35rem .5rem;background:var(--bg-dark);color:var(--fg);border:1px solid var(--bg-highlight);font-family:inherit;font-size:.85rem}.control-row select optgroup{color:var(--fg-dim)}.control-row select option{color:var(--fg);background:var(--bg-dark)}.control-row label{display:flex;align-items:center;gap:.4rem;cursor:pointer;color:var(--fg-dim)}.control-row input[type=checkbox]{accent-color:var(--link)}#algo-params{display:flex;flex-direction:column;gap:.6rem}.param-row{display:flex;align-items:center;gap:.75rem;font-size:.85rem}.param-row label{min-width:7rem;color:var(--fg-dim)}.param-row input[type=range]{flex:1;max-width:200px;accent-color:var(--link)}.param-row .param-value{min-width:3.5rem;text-align:right;color:var(--fg-light);font-size:.8rem;font-variant-numeric:tabular-nums}.param-row label.checkbox-label{display:flex;align-items:center;gap:.4rem;cursor:pointer;min-width:auto}.btn{padding:.35rem .85rem;background:var(--bg-highlight);color:var(--fg);border:1px solid var(--muted);font-family:inherit;font-size:.8rem;cursor:pointer;transition:background .15s}.btn:hover:not(:disabled){background:var(--muted)}.btn:disabled{opacity:.4;cursor:default}#palette-section{display:flex;flex-direction:column;gap:.6rem;padding-top:.5rem;border-top:1px solid var(--bg-highlight)}#palette-options{display:none;flex-direction:column;gap:.6rem}#palette-options.visible{display:flex}#extract-controls{display:none;flex-direction:column;gap:.6rem}#extract-controls.visible{display:flex}#palette-preview{display:flex;flex-wrap:wrap;gap:2px}.palette-swatch{width:24px;height:24px;border:1px solid var(--bg-highlight)}#import-controls{display:none;flex-direction:column;gap:.5rem}#import-controls.visible{display:flex}#import-dropzone{border:1px dashed var(--muted);padding:1rem;text-align:center;cursor:pointer;color:var(--fg-dim);font-size:.8rem;display:flex;flex-direction:column;gap:.25rem;transition:border-color .15s,color .15s}#import-dropzone:hover,#import-dropzone.drag-over{border-color:var(--link);color:var(--fg)}#import-dropzone input{display:none}.import-formats{font-size:.7rem;color:var(--muted)}.import-or{font-size:.7rem;color:var(--muted);text-align:center}#import-hex{background:var(--bg-dark);color:var(--fg);border:1px solid var(--bg-highlight);font-family:inherit;font-size:.8rem;padding:.4rem .5rem;resize:vertical;min-height:3rem}#import-hex::placeholder{color:var(--muted)}#import-hex:focus{outline:none;border-color:var(--link)}#import-status{font-size:.75rem;min-height:1em}#import-status.success{color:var(--green)}#import-status.error{color:var(--red)}#custom-controls{display:none;flex-direction:column;gap:.5rem}#custom-controls.visible{display:flex}.swatch-row{display:flex;align-items:center;gap:.5rem;font-size:.8rem}.swatch-preview{width:24px;height:24px;border:1px solid var(--bg-highlight);flex-shrink:0}.swatch-slider-group{display:flex;align-items:center;gap:.25rem;flex:1;min-width:0}.swatch-label{min-width:1rem;color:var(--fg-dim);font-size:.7rem}.swatch-slider-group input[type=range]{flex:1;min-width:0;max-width:100px;accent-color:var(--link)}.swatch-value{min-width:2rem;text-align:right;color:var(--fg-light);font-size:.7rem;font-variant-numeric:tabular-nums}.swatch-delete{background:none;border:none;color:var(--red);cursor:pointer;font-family:inherit;font-size:.85rem;padding:0 .25rem;flex-shrink:0}.swatch-delete:hover{opacity:.7}.swatch-row.near-duplicate{border-left:2px solid var(--orange);padding-left:.35rem}.palette-btn-row{display:flex;gap:.4rem;flex-wrap:wrap}#ramp-controls{display:none;flex-direction:column;gap:.6rem}#ramp-controls.visible{display:flex}.ramp-card{display:flex;flex-direction:column;gap:.4rem;padding:.5rem;border:1px solid var(--bg-highlight);background:var(--bg-dark)}.ramp-header{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;color:var(--fg-dim)}.ramp-preview{display:flex;height:20px}.ramp-preview-swatch{flex:1}.ramp-options{display:flex;gap:1rem;flex-wrap:wrap;font-size:.8rem}.ramp-options label{display:flex;align-items:center;gap:.3rem;color:var(--fg-dim);cursor:pointer}#mix-preview-wrap{display:none;flex-direction:column;gap:.35rem}#mix-preview-wrap.visible{display:flex}#mix-preview-wrap label{font-size:.75rem;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.05em}#mix-preview-canvas{image-rendering:pixelated;max-width:280px;border:1px solid var(--bg-highlight)}#status{font-size:.75rem;color:var(--fg-dim);min-height:1.1em}@media(max-width:640px){#canvas-area{grid-template-columns:1fr}main{padding:1rem}}