/* MIX playground. Scoped to .mixpg; own tokens so it works on any page. */
.mixpg {
  --mx-bg: #ffffff;
  --mx-soft: #f8fafc;
  --mx-line: #e2e8f0;
  --mx-text: #0f172a;
  --mx-dim: #64748b;
  --mx-primary: #1e40af;
  --mx-primary-hover: #1e3a8a;
  --mx-primary-ink: #ffffff;
  --mx-current: #dbeafe;
  --mx-ok: #15803d;
  --mx-ok-bg: #f0fdf4;
  --mx-bad: #b91c1c;
  --mx-bad-bg: #fef2f2;
  --mx-warn: #a16207;
  --mx-warn-bg: #fefce8;
  --mx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--mx-text);
  background: var(--mx-bg);
  border: 1px solid var(--mx-line);
  border-radius: 8px;
  padding: 16px;
  font-size: 15px;
  line-height: 1.5;
  box-sizing: border-box;
  max-width: 100%;
}
.mixpg *, .mixpg *::before, .mixpg *::after { box-sizing: border-box; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .mixpg {
    --mx-bg: #111827; --mx-soft: #1f2937; --mx-line: #374151; --mx-text: #f9fafb; --mx-dim: #9ca3af;
    --mx-primary: #93c5fd; --mx-primary-hover: #bfdbfe; --mx-primary-ink: #0b1f38; --mx-current: #1e3a8a;
    --mx-ok: #86efac; --mx-ok-bg: #052e16; --mx-bad: #fca5a5; --mx-bad-bg: #2a0a0a; --mx-warn: #fde047; --mx-warn-bg: #2a2205;
  }
}
:root[data-theme='dark'] .mixpg {
  --mx-bg: #111827; --mx-soft: #1f2937; --mx-line: #374151; --mx-text: #f9fafb; --mx-dim: #9ca3af;
  --mx-primary: #93c5fd; --mx-primary-hover: #bfdbfe; --mx-primary-ink: #0b1f38; --mx-current: #1e3a8a;
  --mx-ok: #86efac; --mx-ok-bg: #052e16; --mx-bad: #fca5a5; --mx-bad-bg: #2a0a0a; --mx-warn: #fde047; --mx-warn-bg: #2a2205;
}

.mixpg h3 { margin: 0 0 8px; font-size: 1.15rem; }
.mixpg h4 { margin: 0 0 6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mx-dim); }
.mixpg-section { font-weight: 400; font-size: 0.85rem; color: var(--mx-dim); }
.mixpg-task { margin-bottom: 16px; }
.mixpg-task p { margin: 0 0 8px; }

.mixpg-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .mixpg-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.mixpg-left, .mixpg-right { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.mixpg-editor, .mixpg-cards {
  width: 100%;
  font: 13px/1.45 var(--mx-mono);
  color: var(--mx-text);
  background: var(--mx-soft);
  border: 1px solid var(--mx-line);
  border-radius: 6px;
  padding: 10px;
  resize: vertical;
  tab-size: 4;
  white-space: pre;
  overflow-x: auto;
}
.mixpg-editor { min-height: 22rem; }
.mixpg-editor:focus, .mixpg-cards:focus, .mixpg-select:focus, .mixpg-btn:focus-visible {
  outline: 2px solid var(--mx-primary);
  outline-offset: 1px;
}

.mixpg-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mixpg-btn {
  font: inherit;
  font-size: 0.9rem;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--mx-line);
  background: var(--mx-bg);
  color: var(--mx-text);
  cursor: pointer;
}
.mixpg-btn:hover { border-color: var(--mx-primary); }
.mixpg-btn.primary, .mixpg-btn.check { background: var(--mx-primary); border-color: var(--mx-primary); color: var(--mx-primary-ink); }
.mixpg-btn.primary:hover, .mixpg-btn.check:hover { background: var(--mx-primary-hover); }
.mixpg-time { margin-left: auto; font: 600 0.9rem var(--mx-mono); color: var(--mx-primary); }

.mixpg-select { font: inherit; font-size: 0.9rem; padding: 6px 8px; min-height: 40px; border: 1px solid var(--mx-line); border-radius: 6px; background: var(--mx-bg); color: var(--mx-text); max-width: 100%; }

.mixpg-msg { white-space: pre-wrap; font: 13px/1.45 var(--mx-mono); padding: 0; }
.mixpg-msg:empty { display: none; }
.mixpg-msg.ok, .mixpg-msg.bad, .mixpg-msg.warn { padding: 8px 10px; border-radius: 6px; }
.mixpg-msg.ok { color: var(--mx-ok); background: var(--mx-ok-bg); }
.mixpg-msg.bad { color: var(--mx-bad); background: var(--mx-bad-bg); }
.mixpg-msg.warn { color: var(--mx-warn); background: var(--mx-warn-bg); }

.mixpg-caselist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mixpg-caselist li { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--mx-line); }
.mixpg-caselist li.pass strong { color: var(--mx-ok); }
.mixpg-caselist li.fail strong { color: var(--mx-bad); }
.mixpg-detail { font: 12px/1.4 var(--mx-mono); color: var(--mx-dim); white-space: pre-wrap; overflow-wrap: anywhere; }

.mixpg-regs { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 4px 8px; margin: 0; }
.mixpg-reg { display: flex; justify-content: space-between; gap: 6px; padding: 3px 8px; background: var(--mx-soft); border-radius: 4px; font: 13px var(--mx-mono); }
.mixpg-reg dt { color: var(--mx-dim); }
.mixpg-reg dd { margin: 0; font-weight: 600; }

.mixpg-memwrap { overflow-x: auto; border: 1px solid var(--mx-line); border-radius: 6px; }
.mixpg-mem { border-collapse: collapse; width: 100%; font: 12px/1.4 var(--mx-mono); }
.mixpg-mem th, .mixpg-mem td { padding: 2px 8px; text-align: left; white-space: pre; }
.mixpg-mem th { color: var(--mx-dim); font-weight: 500; border-bottom: 1px solid var(--mx-line); }
.mixpg-mem tr.current td { background: var(--mx-current); font-weight: 600; }

.mixpg-printer {
  margin: 0;
  min-height: 4rem;
  max-height: 20rem;
  overflow: auto;
  padding: 10px;
  font: 12px/1.4 var(--mx-mono);
  background: var(--mx-soft);
  border: 1px solid var(--mx-line);
  border-radius: 6px;
}