:root{--cw-primary:var(--main-primary);--cw-text:#1f2937;--cw-text-muted:#64748b;--cw-bg:#fff;--cw-bg-hover:#f8fafc;--cw-border:#e2e8f0;--cw-border-hover:#cbd5e1;--cw-shadow:0 1px 3px #0000001a;--cw-shadow-lg:0 4px 12px #00000026;--cw-radius:.5rem;--cw-radius-lg:.75rem}._cw-container{width:100%;max-width:1000px;margin:0 auto}._cw-layout{grid-template-columns:auto 1fr;align-items:start;gap:2rem;display:grid}@media (max-width:768px){._cw-container{padding-left:1rem;padding-right:1rem}._cw-layout{grid-template-columns:1fr;gap:1.5rem}}._cw-wheel-area{flex-direction:column;gap:1.5rem;display:flex}._cw-wheel-wrapper{width:320px;height:320px;margin:0 auto;position:relative}._cw-wheel{cursor:crosshair;width:100%;height:100%;box-shadow:var(--cw-shadow-lg);border-radius:50%}._cw-wheel-center{background:var(--cw-bg);pointer-events:none;border-style:solid;border-width:3px;border-color:var(--cw-bg);border-radius:50%;width:60px;height:60px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px #0003}._cw-sliders{background:var(--cw-bg);border-radius:var(--cw-radius-lg);box-shadow:var(--cw-shadow);border-style:solid;border-width:1px;border-color:var(--cw-border);flex-direction:column;gap:1rem;padding:1rem 1.25rem;display:flex}._cw-slider-group{flex-direction:column;gap:.5rem;display:flex}._cw-slider-label{color:var(--cw-text);justify-content:space-between;font-size:.8125rem;font-weight:500;display:flex}._cw-slider-label span{color:var(--cw-text-muted);font-weight:400;font-family:var(--main-font-mono)}._cw-slider{background:linear-gradient(to right, #e2e8f0, var(--cw-primary));-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:4px;width:100%;height:8px}._cw-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--cw-bg);border-style:solid;border-width:2px;border-color:var(--cw-primary);cursor:pointer;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 4px #0003}._cw-slider::-moz-range-thumb{background:var(--cw-bg);border-style:solid;border-width:2px;border-color:var(--cw-primary);cursor:pointer;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 4px #0003}@media (max-width:768px){._cw-wheel-wrapper{width:280px;height:280px}._cw-wheel-center{width:50px;height:50px}}@media (max-width:400px){._cw-wheel-wrapper{width:240px;height:240px}._cw-wheel-center{width:40px;height:40px}}._cw-panel{flex-direction:column;gap:1.5rem;display:flex}._cw-section-label{color:var(--cw-text);text-transform:uppercase;letter-spacing:.025em;margin-bottom:.75rem;font-size:.8125rem;font-weight:600;display:block}._cw-harmony-section{background:var(--cw-bg);border-radius:var(--cw-radius-lg);box-shadow:var(--cw-shadow);border-style:solid;border-width:1px;border-color:var(--cw-border);padding:1.25rem}._cw-harmony-buttons{grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}._cw-harmony-btn{color:var(--cw-text-muted);background:var(--cw-bg-hover);border-style:solid;border-width:1px;border-color:var(--cw-border);border-radius:var(--cw-radius);cursor:pointer;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem .5rem;font-size:.75rem;font-weight:500;transition:all .15s;display:flex}._cw-harmony-btn:hover{color:var(--cw-text);border-color:var(--cw-border-hover)}._cw-harmony-btn-active{color:var(--cw-primary);border-color:var(--cw-primary);background:#6366f11a}._cw-harmony-btn-active ._cw-harmony-icon{border-color:var(--cw-primary)}._cw-harmony-btn-active ._cw-dot,._cw-harmony-btn-active ._cw-line{background:var(--cw-primary)}._cw-harmony-btn-active ._cw-ring{border-color:var(--cw-primary)}._cw-harmony-icon{border-style:solid;border-width:2px;border-color:var(--cw-border-hover);border-radius:50%;flex-shrink:0;width:36px;height:36px;position:relative}._cw-dot{background:var(--cw-text-muted);border-radius:50%;width:6px;height:6px;position:absolute}._cw-dot-lg{width:10px;height:10px}._cw-line{background:var(--cw-text-muted);opacity:.5;position:absolute}._cw-line-triangle{border-bottom-style:solid;border-bottom-width:18px;border-left:11px solid #0000;border-right:11px solid #0000;border-bottom-color:var(--cw-text-muted);opacity:.3;background:0 0;width:22px;height:20px;top:50%;left:50%;transform:translate(-50%,-50%)rotate(180deg)}._cw-harmony-btn-active ._cw-line-triangle{border-bottom-color:var(--cw-primary)}._cw-line-split{width:1px;height:28px;top:4px;left:50%;transform:translate(-50%)}._cw-line-split:before,._cw-line-split:after{content:"";background:inherit;width:12px;height:1px;position:absolute;bottom:0}._cw-line-split:before{transform-origin:100%;right:0;transform:rotate(-30deg)}._cw-line-split:after{transform-origin:0;left:0;transform:rotate(30deg)}._cw-line-square{border-style:solid;border-width:1px;border-color:var(--cw-text-muted);opacity:.5;background:0 0;width:20px;height:20px;top:50%;left:50%;transform:translate(-50%,-50%)}._cw-harmony-btn-active ._cw-line-square{border-color:var(--cw-primary)}._cw-ring{border-style:dashed;border-width:2px;border-color:var(--cw-text-muted);opacity:.5;border-radius:50%;width:24px;height:24px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}._cw-harmony-text{text-align:center;line-height:1.2}._cw-harmony-desc{color:var(--cw-text-muted);margin-top:.75rem;font-size:.8125rem;line-height:1.5}._cw-input-section{background:var(--cw-bg);border-radius:var(--cw-radius-lg);box-shadow:var(--cw-shadow);border-style:solid;border-width:1px;border-color:var(--cw-border);padding:1.25rem}._cw-input-row{align-items:center;gap:.75rem;display:flex}._cw-color-input{border-radius:var(--cw-radius);cursor:pointer;background:0 0;border:none;width:48px;height:40px;padding:0}._cw-color-input::-webkit-color-swatch-wrapper{padding:0}._cw-color-input::-webkit-color-swatch{border-radius:var(--cw-radius);border:none;box-shadow:0 1px 3px #00000026}._cw-hex-input{height:40px;font-size:.9375rem;font-family:var(--main-font-mono);color:var(--cw-text);background:var(--cw-bg-hover);border-style:solid;border-width:1.5px;border-color:var(--cw-border);border-radius:var(--cw-radius);text-transform:uppercase;flex:1;padding:0 .875rem}._cw-hex-input:focus{border-color:var(--cw-primary);outline:none;box-shadow:0 0 0 3px #6366f11a}@media (max-width:768px){._cw-harmony-buttons{grid-template-columns:repeat(2,1fr);gap:.375rem}._cw-harmony-btn{padding:.625rem .5rem;font-size:.6875rem}._cw-harmony-icon{width:32px;height:32px}}._cw-swatches-section{background:var(--cw-bg);border-radius:var(--cw-radius-lg);box-shadow:var(--cw-shadow);border-style:solid;border-width:1px;border-color:var(--cw-border);padding:1.25rem}._cw-swatches{flex-direction:column;gap:.75rem;min-height:180px;display:flex}._cw-swatch{background:var(--cw-bg-hover);border-radius:var(--cw-radius);border-style:solid;border-width:1px;border-color:var(--cw-border);cursor:pointer;align-items:center;gap:.875rem;padding:.75rem;transition:all .15s;display:flex}._cw-swatch:hover{border-color:var(--cw-border-hover);box-shadow:0 2px 6px #00000014}._cw-swatch-color{border-radius:var(--cw-radius);flex-shrink:0;width:44px;height:44px;box-shadow:inset 0 0 0 1px #0000001a}._cw-swatch-info{flex:1;min-width:0}._cw-swatch-label{color:var(--cw-text-muted);text-transform:uppercase;letter-spacing:.025em;margin-bottom:.25rem;font-size:.75rem;font-weight:500}._cw-swatch-hex{font-size:.9375rem;font-weight:600;font-family:var(--main-font-mono);color:var(--cw-text);text-transform:uppercase}._cw-swatch-angle{color:var(--cw-text-muted);margin-top:.125rem;font-size:.75rem}._cw-swatch-copy{width:32px;height:32px;color:var(--cw-text-muted);background:var(--cw-bg);border-radius:var(--cw-radius);border-style:solid;border-width:1px;border-color:var(--cw-border);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;transition:all .15s;display:flex}._cw-swatch-copy:hover{color:var(--cw-primary);border-color:var(--cw-primary)}._cw-swatch-copy svg{width:14px;height:14px}._cw-swatch-base{background:var(--cw-bg);border-color:var(--cw-primary);border-width:2px}._cw-swatch-base ._cw-swatch-label{color:var(--cw-primary)}@media (max-width:768px){._cw-swatches{min-height:150px}._cw-swatch{gap:.75rem;padding:.625rem}._cw-swatch-color{width:36px;height:36px}._cw-swatch-hex{font-size:.875rem}}