[data-page-id="css-color-mix"] .cxm-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; }
[data-page-id="css-color-mix"] .cxm-color-row { display:grid; grid-template-columns:1fr; gap:.6rem; margin-bottom:1.2rem; }
[data-page-id="css-color-mix"] .cxm-color-row label { display:grid; gap:.35rem; }
[data-page-id="css-color-mix"] .cxm-color-row input[type="color"] { width:100%; height:44px; }
[data-page-id="css-color-mix"] .cxm-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-block:.8rem; }
[data-page-id="css-color-mix"] .cxm-ratios { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
[data-page-id="css-color-mix"] .cxm-ratios label { display:grid; max-width:12rem; }
[data-page-id="css-color-mix"] #cxm-ratio { width:100%; min-height:44px; }
[data-page-id="css-color-mix"] .cxm-preview { height:160px; border-radius:12px; border:1px solid var(--border,#888); }
[data-page-id="css-color-mix"] .cxm-approx { height:32px; border-radius:6px; }
[data-page-id="css-color-mix"] .cxm-output { display:grid; gap:.5rem; margin-block:.8rem; }
[data-page-id="css-color-mix"] .cxm-output code { white-space:pre-wrap; overflow-wrap:anywhere; }
[data-page-id="css-color-mix"] .cxm-output button { justify-self:start; }
[data-page-id="css-color-mix"] .cxm-input-swatches { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1rem; }
[data-page-id="css-color-mix"] .cxm-input-swatches figure { margin:0; }
[data-page-id="css-color-mix"] .cxm-input-swatches figure div { height:40px; border-radius:6px; }
[data-page-id="css-color-mix"] .cxm-error { color:#b91c1c; }
:root.dark [data-page-id="css-color-mix"] .cxm-error { color:#fca5a5; }
[data-page-id="css-color-mix"] #cxm-status { background:#eff6ff; color:#1e3a8a; }
[data-page-id="css-color-mix"] #cxm-status.w40-banner--error { background:#fef2f2; color:#991b1b; }
[data-page-id="css-color-mix"] .cxm-result[data-state="draft"], [data-page-id="css-color-mix"] .cxm-result[data-state="invalid"] { border-inline-start:4px solid var(--border,#888); padding-inline-start:1rem; }
[data-page-id="css-color-mix"] .button { min-height:44px; white-space:normal; }
[data-page-id="css-color-mix"] .cxm-details summary { cursor:pointer; padding-block:.75rem; }
[data-page-id="css-color-mix"] #cxm-summary { overflow-wrap:anywhere; }
[data-page-id="css-color-mix"] :focus-visible { outline:3px solid var(--accent,#2563eb); outline-offset:3px; }
@media (max-width:760px) {
  [data-page-id="css-color-mix"] .cxm-layout { grid-template-columns:minmax(0,1fr); gap:1rem; }
}