:root{--cm-primary:#6366f1;--cm-primary-hover:#4f46e5;--cm-text:#1e293b;--cm-text-muted:#64748b;--cm-bg:#fff;--cm-bg-secondary:#f8fafc;--cm-border:#e2e8f0;--cm-border-hover:#cbd5e1;--cm-shadow:0 1px 3px #0000001a;--cm-shadow-lg:0 8px 24px #0000001f;--cm-radius:10px;--cm-radius-lg:16px;--cm-radius-xl:20px;--cm-radius-full:9999px}._cm-container{gap:var(--main-space-8);grid-template-columns:1fr 1fr;align-items:start;max-width:1100px;margin:0 auto;display:grid}._cm-column{gap:var(--main-space-6);flex-direction:column;display:flex}._cm-column-right{top:var(--main-space-4);position:sticky}._cm-section-title{font-size:var(--main-text-sm);color:var(--cm-text);margin:0 0 var(--main-space-3) 0;font-weight:600}@media (max-width:900px){._cm-container{gap:var(--main-space-6);grid-template-columns:1fr;max-width:600px}._cm-column-right{position:static}}@media (max-width:640px){._cm-container{padding-left:var(--main-space-3);padding-right:var(--main-space-3);gap:var(--main-space-5)}._cm-column{gap:var(--main-space-5)}}._cm-inputs-section{background:var(--cm-bg);border-radius:var(--cm-radius-xl);padding:var(--main-space-5);box-shadow:var(--cm-shadow-lg);border-style:solid;border-width:1px;border-color:var(--cm-border)}._cm-inputs-header{margin-bottom:var(--main-space-4);justify-content:space-between;align-items:center;display:flex}._cm-inputs-header ._cm-section-title{margin:0}._cm-inputs-actions{gap:var(--main-space-2);display:flex}._cm-btn{align-items:center;gap:var(--main-space-2);border-radius:var(--cm-radius);font-size:var(--main-text-sm);cursor:pointer;border:none;padding:.5rem .875rem;font-weight:500;transition:opacity .15s,background-color .15s;display:inline-flex}._cm-btn-primary{background:var(--cm-primary);color:#fff}._cm-btn-primary:hover{opacity:.9}._cm-btn-secondary{background:var(--cm-bg-secondary);color:var(--cm-text);border-style:solid;border-width:1px;border-color:var(--cm-border)}._cm-btn-secondary:hover{background:var(--cm-border)}._cm-color-cards{gap:var(--main-space-3);flex-direction:column;min-height:140px;display:flex}._cm-color-card{gap:var(--main-space-3);padding:var(--main-space-3);background:var(--cm-bg-secondary);border-radius:var(--cm-radius);border-style:solid;border-width:1px;border-color:var(--cm-border);grid-template-columns:56px 1fr auto;align-items:center;display:grid}._cm-color-preview{border-radius:var(--cm-radius);cursor:pointer;border-style:solid;border-width:2px;border-color:var(--cm-border);width:56px;height:56px;transition:border-color .15s;position:relative;overflow:hidden}._cm-color-preview:hover{border-color:var(--cm-border-hover)}._cm-color-preview-inner{width:100%;height:100%}._cm-color-picker-hidden{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}._cm-pick-hint{color:#fff;pointer-events:none;background:#0009;justify-content:center;align-items:center;gap:3px;padding:2px 4px;font-size:9px;display:flex;position:absolute;bottom:0;left:0;right:0}._cm-color-info{gap:var(--main-space-2);flex-direction:column;display:flex}._cm-hex-input{border-radius:var(--cm-radius);border-style:solid;border-width:1.5px;border-color:var(--cm-border);width:100%;max-width:120px;font-size:var(--main-text-sm);font-family:var(--main-font-mono);color:var(--cm-text);background:var(--cm-bg);text-transform:uppercase;padding:.5rem .75rem}._cm-hex-input:focus{border-color:var(--cm-primary);outline:none;box-shadow:0 0 0 3px #6366f126}._cm-ratio-wrapper{align-items:center;gap:var(--main-space-2);display:flex}._cm-ratio-slider{-webkit-appearance:none;appearance:none;background:var(--cm-border);border-radius:var(--cm-radius-full);cursor:pointer;flex:1;height:6px}._cm-ratio-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--cm-primary);cursor:pointer;border:2px solid #fff;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 4px #0003}._cm-ratio-slider::-moz-range-thumb{background:var(--cm-primary);cursor:pointer;border:2px solid #fff;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 4px #0003}._cm-ratio-value{min-width:42px;font-size:var(--main-text-sm);color:var(--cm-text);text-align:right;font-weight:600}._cm-remove-btn{border-radius:var(--cm-radius);width:28px;height:28px;color:var(--cm-text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:background-color .15s,color .15s;display:flex}._cm-remove-btn:hover{color:#ef4444;background:#ef44441a}._cm-remove-btn.hidden{visibility:hidden}._cm-mode-section{justify-content:space-between;align-items:center;gap:var(--main-space-3);background:var(--cm-bg);border-radius:var(--cm-radius-xl);padding:var(--main-space-3) var(--main-space-4);border-style:solid;border-width:1px;border-color:var(--cm-border);box-shadow:var(--cm-shadow);display:flex}._cm-mode-label{font-size:var(--main-text-sm);color:var(--cm-text);font-weight:600}._cm-mode-tabs{background:var(--cm-bg-secondary);border-radius:var(--cm-radius);gap:2px;padding:3px;display:flex}._cm-mode-tab{border-radius:calc(var(--cm-radius) - 2px);font-size:var(--main-text-sm);color:var(--cm-text-muted);cursor:pointer;background:0 0;border:none;padding:.4rem .875rem;font-weight:500;transition:background-color .15s,color .15s}._cm-mode-tab:hover{color:var(--cm-text);background:var(--cm-border)}._cm-mode-tab-active{background:var(--cm-primary);color:#fff;box-shadow:0 1px 3px #6366f14d}._cm-mode-tab-active:hover{color:#fff;background:var(--cm-primary)}@media (max-width:640px){._cm-inputs-header{align-items:flex-start;gap:var(--main-space-3);flex-direction:column}._cm-color-card{grid-template-columns:48px 1fr auto}._cm-color-preview{width:48px;height:48px}._cm-hex-input{max-width:100px}._cm-mode-section{align-items:stretch;gap:var(--main-space-2);flex-direction:column}._cm-mode-tabs{justify-content:center}}._cm-result-section{background:var(--cm-bg);border-radius:var(--cm-radius-xl);padding:var(--main-space-5);box-shadow:var(--cm-shadow-lg);border-style:solid;border-width:1px;border-color:var(--cm-border)}._cm-result-card{gap:var(--main-space-5);align-items:center;display:flex}._cm-result-preview-wrapper{align-items:center;gap:var(--main-space-2);flex-direction:column;display:flex}._cm-result-preview{border-radius:var(--cm-radius-lg);border-style:solid;border-width:3px;border-color:var(--cm-border);width:100px;height:100px;box-shadow:var(--cm-shadow-lg);background:gray}._cm-result-label{font-size:var(--main-text-xs);color:var(--cm-text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:500}._cm-result-values{gap:var(--main-space-3);flex-direction:column;flex:1;display:flex}._cm-result-value{align-items:center;gap:var(--main-space-3);display:flex}._cm-value-label{min-width:36px;font-size:var(--main-text-xs);color:var(--cm-text-muted);font-weight:600}._cm-value-wrapper{align-items:center;gap:var(--main-space-2);background:var(--cm-bg-secondary);border-radius:var(--cm-radius);border-style:solid;border-width:1px;border-color:var(--cm-border);flex:1;padding:.5rem .75rem;display:flex}._cm-value-text{font-family:var(--main-font-mono);font-size:var(--main-text-sm);color:var(--cm-text);flex:1}._cm-copy-btn{border-radius:var(--cm-radius);width:28px;height:28px;color:var(--cm-text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:background-color .15s,color .15s;display:flex}._cm-copy-btn:hover{background:var(--cm-border);color:var(--cm-text)}._cm-copy-btn.copied{color:#10b981}._cm-gradient-section{background:var(--cm-bg);border-radius:var(--cm-radius-xl);padding:var(--main-space-5);box-shadow:var(--cm-shadow-lg);border-style:solid;border-width:1px;border-color:var(--cm-border)}._cm-gradient-bar{border-radius:var(--cm-radius);border-style:solid;border-width:2px;border-color:var(--cm-border);background:linear-gradient(90deg,red,#00f);height:48px}@media (max-width:640px){._cm-result-card{text-align:center;flex-direction:column}._cm-result-preview{width:80px;height:80px}._cm-result-values{width:100%}._cm-result-value{align-items:stretch;gap:var(--main-space-1);flex-direction:column}._cm-value-label{text-align:left}._cm-gradient-bar{height:36px}}._cm-steps-section{background:var(--cm-bg);border-radius:var(--cm-radius-xl);padding:var(--main-space-5);padding-bottom:var(--main-space-8);box-shadow:var(--cm-shadow-lg);border-style:solid;border-width:1px;border-color:var(--cm-border);overflow:hidden}._cm-steps-grid{gap:var(--main-space-2);min-height:60px;padding-top:var(--main-space-1);grid-template-columns:repeat(9,1fr);display:grid}._cm-step{aspect-ratio:1;border-radius:var(--cm-radius);cursor:pointer;border-style:solid;border-width:2px;border-color:var(--cm-border);transition:border-color .15s;position:relative}._cm-step:hover{border-color:var(--cm-primary)}._cm-step-label{color:var(--cm-text-muted);white-space:nowrap;font-size:10px;position:absolute;bottom:-20px;left:50%;transform:translate(-50%)}._cm-step-tooltip{background:var(--cm-text);color:#fff;font-size:11px;font-family:var(--main-font-mono);white-space:nowrap;opacity:0;visibility:hidden;z-index:10;border-radius:4px;padding:4px 8px;transition:opacity .15s,visibility .15s;position:absolute;top:-32px;left:50%;transform:translate(-50%)}._cm-step:hover ._cm-step-tooltip{opacity:1;visibility:visible}._cm-presets-section{background:var(--cm-bg);border-radius:var(--cm-radius-xl);padding:var(--main-space-5);box-shadow:var(--cm-shadow-lg);border-style:solid;border-width:1px;border-color:var(--cm-border)}._cm-presets-grid{gap:var(--main-space-2);flex-wrap:wrap;display:flex}._cm-preset-btn{border-radius:var(--cm-radius);font-size:var(--main-text-sm);color:var(--cm-text);background:var(--cm-bg-secondary);border-style:solid;border-width:1px;border-color:var(--cm-border);cursor:pointer;padding:.5rem 1rem;font-weight:500;transition:background-color .15s,border-color .15s}._cm-preset-btn:hover{background:var(--cm-border);border-color:var(--cm-border-hover)}._cm-preset-btn._cm-preset-active{background:var(--cm-primary);color:#fff;border-color:var(--cm-primary)}._cm-preset-equal{background:var(--cm-bg)}._cm-palettes-wrapper{margin-top:var(--main-space-4);padding-top:var(--main-space-4);border-top-style:solid;border-top-width:1px;border-top-color:var(--cm-border)}._cm-palettes-header{margin-bottom:var(--main-space-3);justify-content:space-between;align-items:center;display:flex}._cm-palettes-label{font-size:var(--main-text-sm);color:var(--cm-text-muted);font-weight:500}._cm-palettes-toggle{align-items:center;gap:var(--main-space-1);font-size:var(--main-text-xs);color:var(--cm-primary);cursor:pointer;border-radius:var(--cm-radius);background:0 0;border:none;padding:.25rem .5rem;font-weight:500;transition:background-color .15s;display:inline-flex}._cm-palettes-toggle:hover{background:var(--cm-bg-secondary)}._cm-palettes-toggle svg{transition:transform .2s}._cm-palettes-toggle._cm-toggle-expanded svg{transform:rotate(180deg)}._cm-palettes-grid{gap:var(--main-space-2);grid-template-columns:repeat(auto-fill,minmax(100px,1fr));min-height:50px;max-height:240px;transition:max-height .3s;display:grid;overflow-y:auto}._cm-palettes-grid._cm-palettes-collapsed{max-height:58px;overflow:hidden}._cm-palette-item{cursor:pointer;border-radius:var(--cm-radius);border:2px solid #0000;flex-direction:column;gap:4px;padding:6px;transition:border-color .15s,background-color .15s;display:flex}._cm-palette-item:hover{border-color:var(--cm-border);background:var(--cm-bg-secondary)}._cm-palette-item._cm-palette-active{border-color:var(--cm-primary);background:var(--cm-bg-secondary)}._cm-palette-colors{border-style:solid;border-width:1px;border-color:var(--cm-border);border-radius:4px;height:24px;display:flex;overflow:hidden}._cm-palette-color{flex:1}._cm-palette-name{color:var(--cm-text-muted);text-align:center;white-space:nowrap;text-overflow:ellipsis;font-size:10px;font-weight:500;overflow:hidden}@media (max-width:640px){._cm-steps-grid{grid-template-columns:repeat(5,1fr)}._cm-step-label{display:none}._cm-presets-grid{justify-content:center}}@media (max-width:400px){._cm-steps-grid{grid-template-columns:repeat(3,1fr)}}