:root {
  --mu-fg: #14161a;
  --mu-bg: #ffffff;
  --mu-muted: #5f6570;
  --mu-line: rgba(20, 22, 26, 0.12);
  --mu-surface: #f4f5f7;
  --mu-accent: #3a5bd9;
  --mu-accent-2: #c2255c;
  --mu-accent-3: #e8890c;
  --mu-on-accent: #ffffff;
  --mu-radius: 12px;
  --mu-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mu-dur: 280ms;
  --mu-spring: linear(0, 0.0512, 0.1628, 0.2936, 0.4219, 0.5371, 0.6355, 0.7167, 0.7822, 0.8339, 0.8743, 0.9054, 0.9292, 0.9473, 0.9609, 0.9711, 0.9787, 0.9843, 0.9885, 0.9916, 0.9939, 0.9955, 0.9968, 0.9976, 1);
  --mu-spring-dur: 550ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mu-fg: #eceef2;
    --mu-bg: #0f1114;
    --mu-muted: #a2a8b3;
    --mu-line: rgba(236, 238, 242, 0.14);
    --mu-surface: #1a1d22;
    --mu-accent: #7d97ff;
    --mu-accent-2: #f06595;
    --mu-accent-3: #ffa94d;
    --mu-on-accent: #0f1114;
  }
}

:root[data-theme="dark"] {
  --mu-fg: #eceef2;
  --mu-bg: #0f1114;
  --mu-muted: #a2a8b3;
  --mu-line: rgba(236, 238, 242, 0.14);
  --mu-surface: #1a1d22;
  --mu-accent: #7d97ff;
  --mu-accent-2: #f06595;
  --mu-accent-3: #ffa94d;
  --mu-on-accent: #0f1114;
}

.mu-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.mu-motion-toggle {
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1;
  padding: 0.5rem 0.75rem;
  min-height: 44px;
  min-width: 44px;
  border-radius: 999px;
  border: 1px solid var(--mu-line);
  background: var(--mu-bg);
  color: var(--mu-fg);
  cursor: pointer;
}

.mu-motion-toggle:focus-visible {
  outline: 2px solid var(--mu-accent);
  outline-offset: 2px;
}