.color-harmonies-wrapper:where(.astro-ajtel2io){border:1px solid var(--sl-color-gray-5);background-color:var(--sl-color-gray-6);border-radius:.5rem;margin-top:2rem;padding:1.5rem}h3:where(.astro-ajtel2io){margin-top:0;margin-bottom:1rem}.color-input:where(.astro-ajtel2io){color:#fff;border:1px solid var(--sl-color-gray-4);width:100%;font-family:var(--sl-font-mono);background:#000;border-radius:.25rem;margin-bottom:1.5rem;padding:.6rem}.harmonies-container:where(.astro-ajtel2io){flex-direction:column;gap:2rem;display:flex}.harm-grid:where(.astro-ajtel2io){grid-template-columns:1fr 1fr 1fr;gap:.5rem;display:grid}.preview-box:where(.astro-ajtel2io).mini{border:1px solid #ffffff1a;border-radius:.4rem;flex-direction:column;justify-content:center;align-items:center;height:70px;transition:background-color .2s;display:flex}.base-box:where(.astro-ajtel2io){border:2px solid var(--sl-color-white)!important}.base-box:where(.astro-ajtel2io) span:where(.astro-ajtel2io){color:#fff;text-transform:uppercase;background:#00000080;border-radius:3px;padding:2px 6px;font-size:.7rem;font-weight:700}.preview-title:where(.astro-ajtel2io){color:var(--sl-color-gray-3);margin-bottom:.5rem;font-size:.85rem;font-weight:600;display:block}.copy-btn:where(.astro-ajtel2io){color:#fff;cursor:pointer;font-family:var(--sl-font-mono);background:#0009;border:none;border-radius:4px;padding:4px 8px;font-size:.75rem;transition:background .2s}.copy-btn:where(.astro-ajtel2io):hover{background:#000c}.color-preview-wrapper:where(.astro-nbe3slij){border:1px solid var(--sl-color-gray-5);background-color:var(--sl-color-gray-6);border-radius:.5rem;margin-top:1rem;padding:1.5rem}label:where(.astro-nbe3slij){color:var(--sl-color-white);margin-bottom:.25rem;font-weight:700;display:block}.help-text:where(.astro-nbe3slij){color:var(--sl-color-gray-3);margin-bottom:1rem;font-size:.85rem;line-height:1.4}.color-input:where(.astro-nbe3slij){border:1px solid var(--sl-color-gray-4);background-color:var(--sl-color-black);width:100%;color:var(--sl-color-white);font-family:var(--sl-font-mono);border-radius:.25rem;margin-bottom:1.5rem;padding:.5rem .75rem;font-size:1rem}.color-input:where(.astro-nbe3slij):focus{outline:2px solid var(--sl-color-accent);border-color:#0000}.previews-stack:where(.astro-nbe3slij){flex-direction:column;gap:1.5rem;display:flex}.preview-title:where(.astro-nbe3slij){color:var(--sl-color-gray-2);margin-bottom:.5rem;font-size:.9rem;font-weight:600;display:block}.preview-box:where(.astro-nbe3slij){border:2px dashed var(--sl-color-gray-4);border-radius:.5rem;justify-content:center;align-items:center;width:100%;height:110px;transition:background-color .2s;display:flex;position:relative}.label-stack:where(.astro-nbe3slij){flex-direction:column;align-items:center;gap:6px;display:flex}.copy-btn:where(.astro-nbe3slij){appearance:none;color:#fff;font-size:.9rem;font-family:var(--sl-font-mono);cursor:pointer;background-color:#0009;border:none;border-radius:4px;align-items:center;gap:6px;padding:4px 10px;transition:all .2s;display:flex}.copy-btn:where(.astro-nbe3slij):after{content:"";opacity:.7;background-color:currentColor;width:12px;height:12px;display:inline-block;mask-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path></svg>");mask-repeat:no-repeat}.copy-btn:where(.astro-nbe3slij):hover{background-color:#000000d9;transform:translateY(-1px)}.copy-btn:where(.astro-nbe3slij):active{transform:translateY(0)}.copy-btn:where(.astro-nbe3slij).secondary{opacity:.9;font-size:.75rem}.copy-btn:where(.astro-nbe3slij).copied{background-color:var(--sl-color-green-low);color:var(--sl-color-green-high);border:1px solid var(--sl-color-green)}.copy-btn:where(.astro-nbe3slij).copied:after{background-color:var(--sl-color-green-high);opacity:1;mask-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg>")}.color-mixer-wrapper:where(.astro-wjo3ijqc){border:1px solid var(--sl-color-gray-5);background-color:var(--sl-color-gray-6);border-radius:.5rem;margin-top:2rem;padding:1.5rem}h3:where(.astro-wjo3ijqc){color:var(--sl-color-white);margin-top:0;margin-bottom:.5rem;font-size:1.2rem}.help-text:where(.astro-wjo3ijqc){color:var(--sl-color-gray-3);margin-bottom:1.5rem;font-size:.85rem}.mixer-inputs:where(.astro-wjo3ijqc){justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.input-wrapper:where(.astro-wjo3ijqc){flex:1}.operator:where(.astro-wjo3ijqc){color:var(--sl-color-gray-3);padding-top:1rem;font-size:1.5rem;font-weight:700}label:where(.astro-wjo3ijqc){color:var(--sl-color-white);margin-bottom:.25rem;font-size:.9rem;font-weight:700;display:block}.color-input:where(.astro-wjo3ijqc){border:1px solid var(--sl-color-gray-4);background-color:var(--sl-color-black);width:100%;color:var(--sl-color-white);font-family:var(--sl-font-mono);border-radius:.25rem;padding:.5rem .75rem;font-size:1rem}.color-input:where(.astro-wjo3ijqc):focus{outline:2px solid var(--sl-color-accent);border-color:#0000}@media (width<=600px){.mixer-inputs:where(.astro-wjo3ijqc){flex-direction:column;gap:.5rem}.operator:where(.astro-wjo3ijqc){padding-top:0;transform:rotate(90deg)}.input-wrapper:where(.astro-wjo3ijqc){width:100%}}.result-section:where(.astro-wjo3ijqc){border-top:1px solid var(--sl-color-gray-5);padding-top:1.5rem}.preview-title:where(.astro-wjo3ijqc){color:var(--sl-color-gray-2);text-align:center;margin-bottom:.5rem;font-size:.9rem;font-weight:600;display:block}.preview-box:where(.astro-wjo3ijqc){border:2px dashed var(--sl-color-gray-4);border-radius:.5rem;justify-content:center;align-items:center;width:100%;height:100px;transition:background-color .2s;display:flex}.label-stack:where(.astro-wjo3ijqc){flex-direction:column;align-items:center;gap:6px;display:flex}.copy-btn:where(.astro-wjo3ijqc){appearance:none;color:#fff;font-size:.9rem;font-family:var(--sl-font-mono);cursor:pointer;background-color:#0009;border:none;border-radius:4px;align-items:center;gap:6px;padding:4px 10px;transition:all .2s;display:flex}.copy-btn:where(.astro-wjo3ijqc):after{content:"";opacity:.7;background-color:currentColor;width:12px;height:12px;display:inline-block;mask-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path></svg>");mask-repeat:no-repeat}.copy-btn:where(.astro-wjo3ijqc):hover{background-color:#000000d9;transform:translateY(-1px)}.copy-btn:where(.astro-wjo3ijqc).secondary{opacity:.9;font-size:.75rem}.copy-btn:where(.astro-wjo3ijqc).copied{background-color:var(--sl-color-green-low);color:var(--sl-color-green-high);border:1px solid var(--sl-color-green)}.copy-btn:where(.astro-wjo3ijqc).copied:after{background-color:var(--sl-color-green-high);opacity:1;mask-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg>")}