.color-preview-box{width:100%;height:140px;border-radius:12px;border:2px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;position:relative;overflow:hidden}.color-preview-box input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.color-preview-text{font-size:18px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.5);pointer-events:none}.picker-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.hue-slider-box,.sat-light-box{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:16px}.hue-slider-box label,.sat-light-box label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.hue-slider-box input[type=range],.sat-light-box input[type=range]{width:100%}.inputs-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px;grid-column:1 / -1}.inputs-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.input-group{display:flex;flex-direction:column;gap:4px}.input-group label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.input-with-copy{display:flex;gap:6px}.input-with-copy input{flex:1;font-family:JetBrains Mono,monospace;min-width:0}.input-with-copy input[type=text]{width:auto}.presets-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}.presets-grid{display:flex;flex-wrap:wrap;gap:8px}.preset-swatch{width:36px;height:36px;border-radius:8px;border:2px solid var(--border);cursor:pointer;transition:transform .15s,border-color .15s}.preset-swatch:hover{transform:scale(1.15);border-color:var(--accent)}.harmonies-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}.harmonies-grid{display:flex;gap:12px;flex-wrap:wrap}.harmony-group{display:flex;flex-direction:column;align-items:center;gap:6px}.harmony-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.harmony-swatches{display:flex;gap:4px}.harmony-swatch{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);cursor:pointer;transition:transform .15s}.harmony-swatch:hover{transform:scale(1.2)}@media(max-width:700px){.picker-grid,.inputs-grid{grid-template-columns:1fr}}