.color-harmonies-wrapper:where(.astro-36bp22fe){border:1px solid var(--sl-color-gray-5);padding:1.5rem;border-radius:.5rem;background-color:var(--sl-color-gray-6);margin-top:2rem}h3:where(.astro-36bp22fe){margin-top:0;margin-bottom:1rem}.color-input:where(.astro-36bp22fe){width:100%;padding:.6rem;background:#000;color:#fff;border:1px solid var(--sl-color-gray-4);border-radius:.25rem;margin-bottom:1.5rem;font-family:var(--sl-font-mono)}.harmonies-container:where(.astro-36bp22fe){display:flex;flex-direction:column;gap:2rem}.harm-grid:where(.astro-36bp22fe){display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}.preview-box:where(.astro-36bp22fe).mini{height:70px;border-radius:.4rem;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.1);transition:background-color .2s ease}.base-box:where(.astro-36bp22fe){border:2px solid var(--sl-color-white)!important}.base-box:where(.astro-36bp22fe) span:where(.astro-36bp22fe){background:#00000080;color:#fff;padding:2px 6px;border-radius:3px;font-size:.7rem;font-weight:700;text-transform:uppercase}.preview-title:where(.astro-36bp22fe){display:block;font-size:.85rem;margin-bottom:.5rem;color:var(--sl-color-gray-3);font-weight:600}.copy-btn:where(.astro-36bp22fe){background:#0009;border:none;color:#fff;padding:4px 8px;border-radius:4px;cursor:pointer;font-family:var(--sl-font-mono);font-size:.75rem;transition:background .2s}.copy-btn:where(.astro-36bp22fe):hover{background:#000c}.color-preview-wrapper:where(.astro-t2ywmnwq){border:1px solid var(--sl-color-gray-5);padding:1.5rem;border-radius:.5rem;background-color:var(--sl-color-gray-6);margin-top:1rem}label:where(.astro-t2ywmnwq){display:block;font-weight:700;color:var(--sl-color-white);margin-bottom:.25rem}.help-text:where(.astro-t2ywmnwq){font-size:.85rem;color:var(--sl-color-gray-3);margin-bottom:1rem;line-height:1.4}.color-input:where(.astro-t2ywmnwq){width:100%;padding:.5rem .75rem;border-radius:.25rem;border:1px solid var(--sl-color-gray-4);background-color:var(--sl-color-black);color:var(--sl-color-white);font-family:var(--sl-font-mono);margin-bottom:1.5rem;font-size:1rem}.color-input:where(.astro-t2ywmnwq):focus{outline:2px solid var(--sl-color-accent);border-color:transparent}.previews-stack:where(.astro-t2ywmnwq){display:flex;flex-direction:column;gap:1.5rem}.preview-title:where(.astro-t2ywmnwq){display:block;margin-bottom:.5rem;font-size:.9rem;font-weight:600;color:var(--sl-color-gray-2)}.preview-box:where(.astro-t2ywmnwq){width:100%;height:110px;border-radius:.5rem;border:2px dashed var(--sl-color-gray-4);display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;position:relative}.label-stack:where(.astro-t2ywmnwq){display:flex;flex-direction:column;gap:6px;align-items:center}.copy-btn:where(.astro-t2ywmnwq){appearance:none;border:none;background-color:#0009;color:#fff;padding:4px 10px;border-radius:4px;font-size:.9rem;font-family:var(--sl-font-mono);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px}.copy-btn:where(.astro-t2ywmnwq):after{content:"";display:inline-block;width:12px;height:12px;background-color:currentColor;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>');-webkit-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;-webkit-mask-repeat:no-repeat;opacity:.7}.copy-btn:where(.astro-t2ywmnwq):hover{background-color:#000000d9;transform:translateY(-1px)}.copy-btn:where(.astro-t2ywmnwq):active{transform:translateY(0)}.copy-btn:where(.astro-t2ywmnwq).secondary{font-size:.75rem;opacity:.9}.copy-btn:where(.astro-t2ywmnwq).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-t2ywmnwq).copied:after{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>');-webkit-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>');background-color:var(--sl-color-green-high);opacity:1}.color-mixer-wrapper:where(.astro-plrxtgka){border:1px solid var(--sl-color-gray-5);padding:1.5rem;border-radius:.5rem;background-color:var(--sl-color-gray-6);margin-top:2rem}h3:where(.astro-plrxtgka){margin-top:0;font-size:1.2rem;color:var(--sl-color-white);margin-bottom:.5rem}.help-text:where(.astro-plrxtgka){font-size:.85rem;color:var(--sl-color-gray-3);margin-bottom:1.5rem}.mixer-inputs:where(.astro-plrxtgka){display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}.input-wrapper:where(.astro-plrxtgka){flex:1}.operator:where(.astro-plrxtgka){font-size:1.5rem;font-weight:700;color:var(--sl-color-gray-3);padding-top:1rem}label:where(.astro-plrxtgka){display:block;font-size:.9rem;font-weight:700;color:var(--sl-color-white);margin-bottom:.25rem}.color-input:where(.astro-plrxtgka){width:100%;padding:.5rem .75rem;border-radius:.25rem;border:1px solid var(--sl-color-gray-4);background-color:var(--sl-color-black);color:var(--sl-color-white);font-family:var(--sl-font-mono);font-size:1rem}.color-input:where(.astro-plrxtgka):focus{outline:2px solid var(--sl-color-accent);border-color:transparent}@media(max-width:600px){.mixer-inputs:where(.astro-plrxtgka){flex-direction:column;gap:.5rem}.operator:where(.astro-plrxtgka){padding-top:0;transform:rotate(90deg)}.input-wrapper:where(.astro-plrxtgka){width:100%}}.result-section:where(.astro-plrxtgka){border-top:1px solid var(--sl-color-gray-5);padding-top:1.5rem}.preview-title:where(.astro-plrxtgka){display:block;margin-bottom:.5rem;font-size:.9rem;font-weight:600;color:var(--sl-color-gray-2);text-align:center}.preview-box:where(.astro-plrxtgka){width:100%;height:100px;border-radius:.5rem;border:2px dashed var(--sl-color-gray-4);display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}.label-stack:where(.astro-plrxtgka){display:flex;flex-direction:column;gap:6px;align-items:center}.copy-btn:where(.astro-plrxtgka){appearance:none;border:none;background-color:#0009;color:#fff;padding:4px 10px;border-radius:4px;font-size:.9rem;font-family:var(--sl-font-mono);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px}.copy-btn:where(.astro-plrxtgka):after{content:"";display:inline-block;width:12px;height:12px;background-color:currentColor;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>');-webkit-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;-webkit-mask-repeat:no-repeat;opacity:.7}.copy-btn:where(.astro-plrxtgka):hover{background-color:#000000d9;transform:translateY(-1px)}.copy-btn:where(.astro-plrxtgka).secondary{font-size:.75rem;opacity:.9}.copy-btn:where(.astro-plrxtgka).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-plrxtgka).copied:after{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>');-webkit-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>');background-color:var(--sl-color-green-high);opacity:1}