body[data-page-id="color-mixer"] .cm-workbench {
  display: grid;
  gap: 1rem;
}

body[data-page-id="color-mixer"] .cm-inputs,
body[data-page-id="color-mixer"] .cm-result {
  min-width: 0;
}

body[data-page-id="color-mixer"] .cm-color-fields {
  display: grid;
  gap: 0.875rem;
}

body[data-page-id="color-mixer"] .cm-color-card {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr);
  gap: 0.625rem 0.75rem;
  align-items: end;
  padding: 0.875rem;
  border: 1px solid var(--border, #d9e2ef);
  border-radius: 0.75rem;
  background: var(--card, #fff);
}

body[data-page-id="color-mixer"] .cm-color-card .cm-text-field,
body[data-page-id="color-mixer"] .cm-color-card .cm-field-help,
body[data-page-id="color-mixer"] .cm-color-card .cm-field-error,
body[data-page-id="color-mixer"] .cm-color-card .cm-apply-row {
  grid-column: 1 / -1;
}

body[data-page-id="color-mixer"] input[type="color"] {
  width: 100%;
  min-width: 4.5rem;
  min-height: 2.75rem;
}

body[data-page-id="color-mixer"] .cm-field-help,
body[data-page-id="color-mixer"] .cm-field-error,
body[data-page-id="color-mixer"] .cm-result-state {
  margin: 0;
}

body[data-page-id="color-mixer"] .cm-field-error {
  color: var(--danger, #b42318);
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  body[data-page-id="color-mixer"] .cm-field-error {
    color: var(--danger, #ffb4ab);
  }
}

body[data-page-id="color-mixer"] .cm-ratio-panel {
  margin-top: 1rem;
  padding: 0.875rem;
  border: 1px solid var(--border, #d9e2ef);
  border-radius: 0.75rem;
}

body[data-page-id="color-mixer"] .cm-ratio-row {
  display: grid;
  grid-template-columns: 1fr minmax(7rem, 10rem) 1fr;
  gap: 0.75rem;
  align-items: end;
  margin-top: 0.625rem;
}

body[data-page-id="color-mixer"] .cm-ratio-row > :last-child {
  text-align: end;
}

body[data-page-id="color-mixer"] .cm-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1rem;
}

body[data-page-id="color-mixer"] .cm-action-row .button {
  min-height: 2.75rem;
}

body[data-page-id="color-mixer"] .cm-status {
  margin: 1rem 0 0;
}

body[data-page-id="color-mixer"] .cm-result-state {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  border: 1px solid #d97706;
  border-radius: 0.625rem;
  background: #fff7ed;
  color: #7c2d12;
}

body[data-page-id="color-mixer"] .cm-swatches {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 0.625rem;
}

body[data-page-id="color-mixer"] .cm-swatch {
  display: flex;
  min-height: 7rem;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem;
  border: 2px solid CanvasText;
  border-radius: 0.75rem;
  forced-color-adjust: none;
}

body[data-page-id="color-mixer"] .cm-swatch--mixed {
  min-height: 8.5rem;
}

body[data-page-id="color-mixer"] .cm-swatch-label {
  font-weight: 700;
}

body[data-page-id="color-mixer"] .cm-swatch-value {
  direction: ltr;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 700;
  unicode-bidi: isolate;
}

body[data-page-id="color-mixer"] .cm-copy-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

body[data-page-id="color-mixer"] .cm-copy-item {
  min-width: 0;
}

body[data-page-id="color-mixer"] .cm-copy-item code {
  display: block;
  overflow-wrap: anywhere;
}

body[data-page-id="color-mixer"] .cm-copy-fallback {
  margin-top: 0.875rem;
}

body[data-page-id="color-mixer"] .cm-copy-fallback input {
  direction: ltr;
  unicode-bidi: plaintext;
}

body[data-page-id="color-mixer"] .cm-method-note {
  margin-bottom: 0;
}

@media (min-width: 800px) {
  body[data-page-id="color-mixer"] .cm-workbench {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
  }
}

@media (max-width: 520px) {
  body[data-page-id="color-mixer"] .cm-color-card,
  body[data-page-id="color-mixer"] .cm-ratio-row,
  body[data-page-id="color-mixer"] .cm-copy-group {
    grid-template-columns: 1fr;
  }

  body[data-page-id="color-mixer"] .cm-ratio-row > :last-child {
    text-align: start;
  }

  body[data-page-id="color-mixer"] .cm-swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page-id="color-mixer"] .cm-swatch--mixed {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body[data-page-id="color-mixer"] .cm-action-row .button {
    flex: 1 1 9rem;
  }
}

@media (forced-colors: active) {
  body[data-page-id="color-mixer"] .cm-swatch {
    forced-color-adjust: auto;
    background: Canvas !important;
    color: CanvasText !important;
  }
}