.mf-color-mixer__section{padding-bottom:96px}
.mf-color-mixer__intro{align-items:end;margin-bottom:48px;padding-bottom:32px;border-bottom:1px solid var(--mf-border)}
.mf-color-mixer__intro h2{max-width:760px;margin:8px 0 0;font-size:clamp(28px,2.4vw,40px);line-height:1.12;letter-spacing:-.025em}
.mf-color-mixer__intro-copy{align-self:end}
.mf-color-mixer__intro-copy p{margin:0;color:var(--mf-muted);font-size:17px;line-height:1.7}
.mf-color-mixer__layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,520px);gap:clamp(36px,4.4vw,72px);align-items:start}
.mf-color-mixer__controls{min-width:0}
.mf-color-mixer__status{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;padding:0 0 16px;border-bottom:1px solid var(--mf-border)}
.mf-color-mixer__status span{font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--mf-muted)}
.mf-color-mixer__status strong{font-size:14px;font-weight:650;color:var(--mf-ink)}
.mf-color-mixer__palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.mf-mixer-color{display:grid;grid-template-columns:44px minmax(0,1fr) 44px 78px;align-items:center;gap:12px;min-height:72px;padding:12px 10px;border-bottom:1px solid var(--mf-border);transition:background-color .18s ease}
.mf-mixer-color:nth-last-child(-n+2){border-bottom:0}
.mf-mixer-color.is-selected{background:linear-gradient(90deg,rgba(72,2,162,.045),transparent 78%)}
.mf-mixer-color__swatch{width:44px;height:44px;border-radius:12px;background:var(--mf-mixer-swatch);border:1px solid rgba(17,17,17,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.mf-mixer-color__copy{display:flex;min-width:0;flex-direction:column;gap:2px}
.mf-mixer-color__copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:1.35;font-weight:650;color:var(--mf-ink)}
.mf-mixer-color__copy small{font-size:12px;line-height:1.4;font-weight:550;color:var(--mf-muted)}
.mf-mixer-color__percent{width:44px;text-align:right;font-size:15px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;color:var(--mf-ink);visibility:hidden;opacity:0;transition:opacity .18s ease}.mf-mixer-color__percent.is-visible{visibility:visible;opacity:1}
.mf-mixer-color__actions{display:flex;width:78px;justify-content:flex-end;gap:6px}
.mf-mixer-icon-button{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;padding:0;border:1px solid var(--mf-border-strong);border-radius:12px;background:#fff;color:var(--mf-ink);cursor:pointer;transition:border-color .18s ease,background-color .18s ease,transform .18s ease,opacity .18s ease}
.mf-mixer-icon-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mf-mixer-icon-button:hover:not(:disabled){border-color:#111;background:var(--mf-surface);transform:translateY(-1px)}
.mf-mixer-icon-button--add{background:var(--mf-ink);border-color:var(--mf-ink);color:#fff}
.mf-mixer-icon-button--add:hover:not(:disabled){background:#2b2b2b;color:#fff}
.mf-mixer-icon-button:disabled{opacity:.28;cursor:default}
.mf-color-mixer__preview{position:sticky;top:calc(var(--mf-header-sticky-h,116px) + 16px);display:flex;flex-direction:column;min-width:0;padding:28px;border:1px solid var(--mf-border);border-radius:24px;background:var(--mf-white);box-shadow:0 18px 50px rgba(17,17,17,.055)}
.mf-color-mixer__preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}
.mf-color-mixer__preview-head .mf-overline{margin:0 0 5px}
.mf-color-mixer__preview-head h3{margin:0;font-size:24px;line-height:1.2;letter-spacing:-.02em}
.mf-color-mixer__total-badge{display:flex;min-width:56px;height:36px;align-items:center;justify-content:center;border-radius:999px;background:#fff;border:1px solid var(--mf-border);font-size:14px;font-weight:700;color:var(--mf-ink)}
.mf-color-mixer__canvas{position:relative;width:100%;aspect-ratio:1500/854;overflow:hidden;border-radius:18px;background:#fff;border:1px solid var(--mf-border);line-height:0}
.mf-color-mixer__canvas svg{display:block;width:100%;height:100%;object-fit:contain}
.mf-color-mixer__legend{margin-top:18px}
.mf-color-mixer__bar{display:flex;width:100%;height:42px;overflow:hidden;border-radius:12px;background:#fff;border:1px solid var(--mf-border)}
.mf-color-mixer__bar-segment{display:flex;min-width:0;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1;overflow:hidden}
.mf-color-mixer__selected{display:grid;gap:0;margin-top:12px}
.mf-color-mixer__selected-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--mf-border);font-size:13px}
.mf-color-mixer__selected-row:last-child{border-bottom:0}
.mf-color-mixer__selected-row i{width:14px;height:14px;border-radius:4px;background:var(--mf-selected-color);border:1px solid rgba(17,17,17,.08)}
.mf-color-mixer__selected-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mf-ink)}
.mf-color-mixer__selected-row small{font-size:12px;font-weight:700;color:var(--mf-muted)}
.mf-color-mixer__remaining{margin:10px 0 0;font-size:13px;color:var(--mf-muted)}
.mf-color-mixer__empty{display:flex;min-height:94px;align-items:center;gap:14px;margin-top:16px;padding:18px;border-top:1px solid var(--mf-border);border-bottom:1px solid var(--mf-border);color:var(--mf-muted)}
.mf-color-mixer__empty svg{width:26px;height:26px;flex:0 0 auto;fill:none;stroke:var(--mf-purple);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mf-color-mixer__empty p{margin:0;font-size:14px;line-height:1.55}
.mf-color-mixer__actions{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;margin-top:20px}
.mf-color-mixer__actions .mf-button{width:100%;justify-content:center}
.mf-color-mixer__actions .mf-button svg{width:18px;height:18px}
.mf-color-mixer__actions .mf-button:disabled{opacity:.42;cursor:default;transform:none}
.mf-color-mixer__note{margin:16px 0 0;color:var(--mf-muted);font-size:12px;line-height:1.55}
@media (max-width:1279px){.mf-color-mixer__layout{grid-template-columns:minmax(0,1fr) minmax(340px,430px);gap:36px}.mf-color-mixer__palette{grid-template-columns:1fr}.mf-mixer-color:nth-last-child(-n+2){border-bottom:1px solid var(--mf-border)}.mf-mixer-color:last-child{border-bottom:0}}
@media (max-width:1023px){.mf-color-mixer__section{padding-bottom:72px}.mf-color-mixer__layout{grid-template-columns:1fr}.mf-color-mixer__preview{position:static;order:-1}.mf-color-mixer__palette{grid-template-columns:repeat(2,minmax(0,1fr))}.mf-mixer-color:nth-last-child(-n+2){border-bottom:0}}
@media (max-width:767px){.mf-color-mixer__section{padding-bottom:56px}.mf-color-mixer__intro{margin-bottom:28px;padding-bottom:24px}.mf-color-mixer__intro h2{font-size:27px}.mf-color-mixer__intro-copy p{font-size:16px}.mf-color-mixer__layout{gap:28px}.mf-color-mixer__preview{padding:18px;border-radius:20px}.mf-color-mixer__preview-head h3{font-size:21px}.mf-color-mixer__palette{grid-template-columns:1fr}.mf-mixer-color:nth-last-child(-n+2){border-bottom:1px solid var(--mf-border)}.mf-mixer-color:last-child{border-bottom:0}.mf-mixer-color{grid-template-columns:42px minmax(0,1fr) 40px 74px;gap:9px;min-height:68px;padding-inline:8px}.mf-mixer-color__swatch{width:42px;height:42px}.mf-mixer-color__copy strong{font-size:14px}.mf-mixer-color__percent{width:40px;font-size:14px}.mf-mixer-icon-button{width:34px;height:34px}.mf-mixer-color__actions{width:74px}.mf-color-mixer__actions{grid-template-columns:1fr}.mf-color-mixer__empty{min-height:auto;padding:16px 0}}
@media (max-width:420px){.mf-mixer-color{grid-template-columns:38px minmax(0,1fr) 74px;padding-inline:8px}.mf-mixer-color__swatch{width:38px;height:38px;border-radius:10px}.mf-mixer-color__percent{grid-column:2;grid-row:2;text-align:left;font-size:12px}.mf-mixer-color__actions{grid-column:3;grid-row:1/3}.mf-mixer-color__copy{grid-column:2;grid-row:1}.mf-color-mixer__status{align-items:flex-end}}
@media (prefers-reduced-motion:reduce){.mf-mixer-icon-button{transition:none}}