.css-relative-color-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,#f093fb,#f5576c);-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: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:.6rem .5rem;border:1px solid rgba(240,147,251,.3);border-radius:8px;cursor:pointer;font-size:.8rem;color:#fff;background:#f093fb1a;transition:all .2s}.preset-btn:hover{background:#f093fb40;border-color:#f093fb80;transform:translateY(-2px)}.color-picker-wrapper{display:flex;gap:.5rem;align-items:center}.color-picker-wrapper input[type=color]{width:60px;height:45px;border:none;border-radius:8px;cursor:pointer;padding:0}.color-text{flex:1;padding:.75rem;border:2px solid rgba(255,255,255,.35);border-radius:8px;background:#ffffff26;color:#fff;font-family:monospace;font-size:1rem}.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}.channel-config{margin-bottom:1rem;padding:1rem;background:#0003;border-radius:8px}.channel-config label{display:block;font-size:.85rem;color:#ccc;margin-bottom:.5rem;font-weight:500}.channel-config select{width:100%;padding:.5rem;border:2px solid rgba(255,255,255,.35);border-radius:6px;background:#ffffff26;color:#fff;margin-bottom:.5rem}.channel-config select option{background:#1a1a2e}.channel-config input[type=number]{width:100%;padding:.5rem;border:2px solid rgba(255,255,255,.35);border-radius:6px;background:#ffffff26;color:#fff;font-family:monospace}.calc-input{width:100%;padding:.5rem;border:2px solid rgba(255,255,255,.35);border-radius:6px;background:#ffffff26;color:#fff;font-family:monospace;font-size:.85rem}.alpha-config{border-top:2px solid rgba(255,255,255,.2);padding-top:1rem;margin-top:.5rem}.alpha-input{display:flex;align-items:center;gap:.75rem;margin-top:.5rem}.alpha-input input[type=range]{flex:1}.alpha-input span{min-width:45px;text-align:right;font-family:monospace;font-size:.875rem}.save-btn{width:100%;padding:.75rem;background:linear-gradient(135deg,#f093fb,#f5576c);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:#f093fb}.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,.syntax-preview,.variations-preview,.code-output{background:#ffffff14;border-radius:12px;padding:1.5rem;border:2px solid rgba(255,255,255,.25)}.result-preview h3,.syntax-preview h3,.variations-preview h3{font-size:1rem;color:#f093fb;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.5px}.color-comparison-large{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:1rem}.color-box{width:150px;height:120px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 4px 20px #0000004d;position:relative}.color-label{font-size:.75rem;text-transform:uppercase;background:#00000080;padding:.25rem .5rem;border-radius:4px}.color-box .color-value{font-family:monospace;font-size:.85rem;background:#00000080;padding:.25rem .5rem;border-radius:4px}.arrow{font-size:2rem;color:#f093fb}.color-box.transformed{box-shadow:0 0 0 3px #f093fb66,0 4px 20px #0000004d}.transformation-summary{text-align:center;font-size:.875rem;color:#aaa;padding:1rem;background:#0003;border-radius:8px}.transformation-summary strong{color:#f5576c}.syntax-box{display:flex;align-items:center;gap:1rem;padding:1rem;background:#0000004d;border-radius:8px}.syntax-box code{flex:1;font-family:Fira Code,monospace;font-size:.875rem;color:#f093fb;word-break:break-all}.copy-inline-btn{padding:.5rem 1rem;background:#f093fb33;border:1px solid rgba(240,147,251,.4);border-radius:6px;color:#fff;font-size:.8rem;cursor:pointer;transition:all .2s}.copy-inline-btn:hover{background:#f093fb4d}.variations-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}.variation-item{text-align:center}.variation-swatch{width:100%;height:50px;border-radius:8px;margin-bottom:.5rem;box-shadow:0 2px 8px #0003}.variation-item span{font-size:.75rem;color:#aaa}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.output-header h3{font-size:1rem;color:#f093fb;text-transform:uppercase;letter-spacing:.5px;margin:0}.copy-btn{padding:.5rem 1rem;background:linear-gradient(135deg,#f093fb,#f5576c);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:#f093fb}.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:#f5576c;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:#f093fb}.support-note{font-size:.8rem;color:#27ae60;margin-top:.5rem}@media (max-width: 1023px){.generator-content{grid-template-columns:1fr}.variations-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 640px){.css-relative-color-generator{padding:1rem}.generator-header h1{font-size:1.75rem}.presets-grid{grid-template-columns:1fr}.color-comparison-large{flex-direction:column}.color-box{width:100%;max-width:200px}.arrow{transform:rotate(90deg)}.variations-grid{grid-template-columns:repeat(2,1fr)}.reference-grid{grid-template-columns:1fr}}