:root {
  color-scheme: dark;
  --ms-canvas: #101112;
  --ms-surface: #17191b;
  --ms-surface-raised: #1d2023;
  --ms-surface-quiet: #141617;
  --ms-line: #323639;
  --ms-line-strong: #f5f4ef;
  --ms-text: #f7f6f2;
  --ms-text-soft: #b5b8bb;
  --ms-text-dim: #7d8287;
  --ms-red: #ff1010;
  --ms-red-dark: #c60000;
  --ms-magenta: #ef2b8a;
  --ms-violet: #9458ff;
  --ms-orange: #ff8a00;
  --ms-lime: #b9d80b;
  --ms-cyan: #00a7e8;
  --ms-green: #31d17c;
  --ms-radius-sm: 10px;
  --ms-radius-md: 18px;
  --ms-radius-lg: 28px;
  --ms-shadow: 0 24px 80px rgb(0 0 0 / 36%);
  --ms-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ms-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ms-focus: 0 0 0 3px rgb(0 167 232 / 45%);
}

.ms-kicker {
  color: var(--ms-text-soft);
  font: 700 0.72rem/1.2 var(--ms-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ms-signal-gradient {
  background: linear-gradient(90deg, var(--ms-red), var(--ms-orange), var(--ms-lime), var(--ms-cyan), var(--ms-violet), var(--ms-magenta));
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}