.css-color-mix-generator{min-height:auto;background:linear-gradient(135deg,#1a1a2e,#16213e);padding:2rem;color:#fff}.generator-header{text-align:center;margin-bottom:2rem}.generator-header h1{font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.generator-header p{color:#a0a0a0;font-size:1.1rem}.generator-content{display:grid;grid-template-columns:var(--tool-controls-width, 420px) 1fr;gap:var(--tool-content-gap, 2rem);max-width:var(--tool-container-max-width, 1600px);margin:0 auto}.config-panel{background:#ffffff14;border-radius:12px;padding:1.5rem;border:2px solid rgba(255,255,255,.25)}.config-section{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1)}.config-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.config-section h3{font-size:1.15rem;font-weight:700;color:var(--gray-900);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--primary);letter-spacing:.03em}.presets-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.preset-btn{padding:.75rem .5rem;border:none;border-radius:8px;cursor:pointer;font-size:.8rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}.preset-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0000004d}.preset-name{position:relative;z-index:1;font-weight:500}.color-space-select{width:100%;padding:.75rem;border:2px solid rgba(255,255,255,.35);border-radius:8px;background:#ffffff26;color:#fff;font-size:.875rem;cursor:pointer}.color-space-select option{background:#1a1a2e;color:#fff}.help-text{font-size:.8rem;color:#888;margin-top:.5rem;line-height:1.4}.color-inputs{display:flex;flex-direction:column;gap:1rem;align-items:center}.color-input-group{width:100%}.color-input-group label{display:block;font-size:1rem;color:var(--gray-900);margin-bottom:.5rem;font-weight:600;line-height:1.5;letter-spacing:.3px}.color-picker-wrapper{display:flex;gap:.5rem;align-items:center}.color-picker-wrapper input[type=color]{width:50px;height:40px;border:none;border-radius:8px;cursor:pointer;padding:0}.color-text{flex:1;padding:.5rem;border:2px solid rgba(255,255,255,.35);border-radius:6px;background:#ffffff26;color:#fff;font-family:monospace}.percentage-input{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}.percentage-input input[type=range]{flex:1}.percentage-input span{min-width:40px;text-align:right;font-family:monospace}.mix-indicator{font-size:1.5rem;color:#667eea;font-weight:700}.percentage-toggle{margin-top:1rem}.percentage-toggle label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#ccc}.simple-ratio{margin-top:1rem}.simple-ratio label{display:block;font-size:.85rem;color:#ccc;margin-bottom:.5rem}.simple-ratio input[type=range]{width:100%;margin-bottom:.5rem}.ratio-labels{display:flex;justify-content:space-between;font-size:.8rem;color:#888;font-family:monospace}.save-btn{width:100%;padding:.75rem;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;font-weight:500;cursor:pointer;transition:transform .2s}.save-btn:hover{transform:translateY(-2px)}.saved-configs{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}.saved-config-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;background:#ffffff26;border-radius:6px}.saved-config-name{cursor:pointer;color:#667eea}.saved-config-name:hover{text-decoration:underline}.delete-btn{background:none;border:none;color:#e74c3c;font-size:1.2rem;cursor:pointer;padding:0 .25rem}.preview-panel{display:flex;flex-direction:column;gap:1.5rem}.result-preview,.color-scale-preview,.color-space-comparison,.code-output{background:#ffffff14;border-radius:12px;padding:1.5rem;border:2px solid rgba(255,255,255,.25)}.result-preview h3,.color-scale-preview h3,.color-space-comparison h3{font-size:1rem;color:#667eea;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.5px}.mixed-color-preview{height:120px;border:2px solid #d1d5db;border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 1px 3px #0000001a}.color-value{background:#0009;padding:.5rem 1rem;border-radius:6px;font-family:monospace;font-size:.85rem;word-break:break-all;text-align:center}.color-comparison{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin-top:1rem}.color-swatch{height:60px;border-radius:8px;display:flex;align-items:center;justify-content:center}.color-swatch span{background:#00000080;padding:.25rem .5rem;border-radius:4px;font-size:.75rem}.color-swatch.mixed{box-shadow:0 0 0 3px #667eea80}.color-scale{display:flex;height:60px;border-radius:8px;overflow:hidden}.scale-step{flex:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.25rem}.scale-label{font-size:.6rem;background:#00000080;padding:.15rem .25rem;border-radius:3px}.scale-labels{display:flex;justify-content:space-between;font-size:.75rem;color:#888;margin-top:.5rem}.space-comparison-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.space-item{text-align:center}.space-label{display:block;font-size:.75rem;color:#ccc;margin-bottom:.5rem}.space-preview{height:30px;border:2px solid #d1d5db;border-radius:6px}.comparison-note{font-size:.75rem;color:#666;margin-top:1rem;font-style:italic;text-align:center}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.output-header h3{font-size:1rem;color:#667eea;text-transform:uppercase;letter-spacing:.5px;margin:0}.copy-btn{padding:.5rem 1rem;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;color:#fff;font-weight:500;cursor:pointer;transition:transform .2s}.copy-btn:hover{transform:translateY(-2px)}.css-code{background:#0000004d;padding:1rem;border-radius:8px;overflow-x:auto;font-family:Fira Code,monospace;font-size:.85rem;line-height:1.6;max-height:400px;overflow-y:auto}.reference-section{max-width:var(--tool-container-max-width, 1600px);margin:3rem auto 0}.reference-section h2{font-size:1.5rem;margin-bottom:1.5rem;color:#667eea}.reference-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.reference-card{background:#ffffff14;border-radius:12px;padding:1.5rem;border:2px solid rgba(255,255,255,.25)}.reference-card h3{font-size:1rem;color:#764ba2;margin-bottom:1rem}.reference-card pre{background:#0000004d;padding:1rem;border-radius:8px;overflow-x:auto;font-family:Fira Code,monospace;font-size:.8rem;line-height:1.6}.reference-card ul{list-style:none;padding:0;margin:0}.reference-card li{padding:.4rem 0;color:#ccc;border-bottom:1px solid rgba(255,255,255,.05)}.reference-card li:last-child{border-bottom:none}.reference-card li strong{color:#667eea}.support-note{font-size:.8rem;color:#27ae60;margin-top:.5rem}@media (max-width: 1023px){.generator-content{grid-template-columns:1fr}.space-comparison-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 640px){.css-color-mix-generator{padding:1rem}.generator-header h1{font-size:1.75rem}.presets-grid,.space-comparison-grid,.reference-grid{grid-template-columns:1fr}}