:root{--bg:#1a1a2e;--surface:#16213e;--surface-alt:#0f3460;--text:#e6e6e6;--text-dim:#a0a0b0;--accent:#e94560;--radius:8px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#app{max-width:1200px;margin:0 auto;padding:24px}.header{text-align:center;margin-bottom:32px}.header-top{justify-content:center;align-items:center;gap:16px;margin-bottom:8px;display:flex}.header h1{font-size:2rem}.header p{color:var(--text-dim)}.lang-select{background:var(--surface);color:var(--text);border:1px solid var(--surface-alt);border-radius:var(--radius);cursor:pointer;padding:4px 8px;font-size:.8rem}.lang-select:focus{border-color:var(--accent);outline:none}.upload-section{flex-direction:column;align-items:center;gap:12px;margin-bottom:24px;display:flex}.sample-picker{align-items:center;gap:12px;display:flex}.sample-picker-label{color:var(--text-dim);font-size:.85rem}.sample-thumbs{gap:8px;display:flex}.sample-thumb{border-radius:var(--radius);cursor:pointer;width:56px;height:56px;image-rendering:pixelated;object-fit:cover;border:2px solid #0000;transition:border-color .15s,transform .15s}.sample-thumb:hover{border-color:var(--surface-alt);transform:scale(1.05)}.sample-thumb.active{border-color:var(--accent)}.upload-label{background:var(--surface);border:2px dashed var(--surface-alt);border-radius:var(--radius);cursor:pointer;align-items:center;gap:8px;padding:16px 32px;transition:border-color .2s;display:flex}.upload-label:hover{border-color:var(--accent)}.upload-icon{font-size:1.5rem}#file-input{display:none}.error{color:var(--accent);font-weight:600}.sample-info{color:var(--text-dim);font-size:.85rem}.sample-info a{color:var(--text);text-decoration:none}.sample-info a:hover{color:var(--accent)}.palette-selector-section{background:var(--surface);border-radius:var(--radius);margin-bottom:24px;padding:20px 24px}.palette-selector-section h3{color:var(--text-dim);margin-bottom:12px;font-size:1rem}.palette-options{flex-wrap:wrap;gap:8px;margin-bottom:12px;display:flex}.palette-radio{background:var(--bg);border:1px solid var(--surface-alt);border-radius:var(--radius);cursor:pointer;align-items:center;gap:6px;padding:8px 16px;font-size:.85rem;transition:border-color .2s,background .2s;display:flex}.palette-radio:hover{border-color:var(--accent)}.palette-radio.active{border-color:var(--accent);background:#e945601a}.palette-radio input[type=radio]{display:none}.palette-sub-options{margin-bottom:12px}.palette-sub-options select{background:var(--bg);color:var(--text);border:1px solid var(--surface-alt);border-radius:var(--radius);cursor:pointer;min-width:180px;padding:8px 12px;font-size:.85rem}.palette-sub-options select:focus{border-color:var(--accent);outline:none}.preset-link{color:var(--accent);opacity:.8;margin-left:12px;font-size:.8rem;text-decoration:none;transition:opacity .15s}.preset-link:hover{opacity:1;text-decoration:underline}.upload-label.small{padding:8px 16px;font-size:.85rem;display:inline-flex}#pal-file-input{display:none}.pal-name{color:var(--text-dim);margin-left:8px;font-size:.8rem}.random-controls{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.random-group{align-items:center;gap:6px;display:flex}.random-label{color:var(--text-dim);min-width:fit-content;font-size:.8rem}.toggle-group{gap:0;display:flex}.toggle-btn{background:var(--bg);color:var(--text-dim);border:1px solid var(--surface-alt);cursor:pointer;padding:5px 10px;font-size:.78rem;transition:background .15s,color .15s,border-color .15s}.toggle-btn:first-child{border-radius:var(--radius) 0 0 var(--radius)}.toggle-btn:last-child{border-radius:0 var(--radius) var(--radius) 0}.toggle-btn:not(:first-child){border-left:none}.toggle-btn:hover{background:var(--surface-alt);color:var(--text)}.toggle-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.toggle-btn.active+.toggle-btn{border-left:none}.generate-btn{background:var(--surface-alt);color:var(--text);border-radius:var(--radius);cursor:pointer;border:none;padding:6px 16px;font-size:.85rem;transition:background .2s}.generate-btn:hover{background:var(--accent)}.exact-colors-label{color:var(--text-dim);cursor:pointer;align-items:center;gap:6px;margin-bottom:8px;font-size:.85rem;display:flex}.exact-colors-label input[type=checkbox]{accent-color:var(--accent)}.palette-preview{flex-wrap:wrap;gap:3px;display:flex}.palette-preview-swatch{border:1px solid #ffffff14;border-radius:3px;width:20px;height:20px}.controls-section{background:var(--surface);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:32px;margin-bottom:24px;padding:24px;display:flex}.slider-group{flex:1;min-width:200px}.slider-group label{color:var(--text-dim);margin-bottom:8px;font-size:.9rem;display:block}.slider-group input[type=range]{width:100%;accent-color:var(--accent)}.reset-btn{background:var(--surface-alt);color:var(--text);border-radius:var(--radius);cursor:pointer;border:none;padding:8px 20px;font-size:.9rem;transition:background .2s}.reset-btn:hover{background:var(--accent)}.content-section{flex-direction:column;gap:24px;display:flex}.preview-area{flex-wrap:wrap;gap:24px;display:flex}.preview-box{background:var(--surface);border-radius:var(--radius);flex:1;min-width:300px;padding:16px}.preview-box h3{color:var(--text-dim);margin-bottom:12px;font-size:1rem}.preview-box canvas{width:100%;height:auto;image-rendering:pixelated;border-radius:4px}.palette-area{background:var(--surface);border-radius:var(--radius);padding:16px}.palette-area-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.palette-area h3{color:var(--text-dim);font-size:1rem}.download-btn{background:var(--surface-alt);color:var(--text);border-radius:var(--radius);cursor:pointer;border:none;padding:6px 14px;font-size:.8rem;transition:background .2s}.download-btn:hover{background:var(--accent)}.palette{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;display:grid}.palette-item{background:var(--bg);border-radius:4px;align-items:center;gap:6px;padding:6px 8px;display:flex}.color-swatch{border:1px solid #ffffff1a;border-radius:4px;flex-shrink:0;width:28px;height:28px}.color-arrow{color:var(--text-dim);font-size:.8rem}.color-info{flex-direction:column;min-width:0;font-size:.75rem;display:flex}.color-info .hex{color:var(--text);font-family:monospace}.color-info .oklch-info{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.footer{background:var(--surface);border-radius:var(--radius);justify-content:center;align-items:center;gap:16px;margin-top:48px;padding:20px 24px;display:flex}.footer p{color:#fff;font-size:.85rem}.footer a{color:#fff;text-decoration:none;transition:color .15s}.footer a:hover{color:var(--accent)}.lightbox{z-index:1000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.lightbox-backdrop{background:#000000d9;position:absolute;inset:0}.lightbox-content{justify-content:center;align-items:center;max-width:90vw;max-height:90vh;display:flex;position:relative}.lightbox-content canvas{max-width:90vw;max-height:90vh;image-rendering:pixelated;border-radius:var(--radius);box-shadow:0 8px 32px #00000080}.lightbox-close{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.4rem;line-height:1;transition:transform .15s;display:flex;position:absolute;top:-16px;right:-16px}.lightbox-close:hover{transform:scale(1.1)}