:root {
  color-scheme: dark;
  --sd-canvas: #181f27;
  --sd-panel: #202933;
  --sd-raised: #283440;
  --sd-chrome: #121922;
  --sd-text: #eef2f6;
  --sd-muted: #b5c1cd;
  --sd-line: #364351;
  --sd-line-strong: #596b7c;
  --sd-link: #b4d0ff;
  --sd-link-hover: #d8e7ff;
  --sd-lime: #e3fa71;
  --sd-lime-hover: #f0ffa4;
  --sd-on-accent: #161e17;
  --sd-success: #9de6bd;
  --sd-success-panel: #203a34;
  --sd-warning: #ffdb98;
  --sd-warning-panel: #3c3225;
  --sd-danger: #ffb4bd;
  --sd-danger-panel: #412b35;
  --sd-info: #b4d7ff;
  --sd-info-panel: #26394d;
  --sd-font: Inter, system-ui, -apple-system, sans-serif;
  --sd-radius: .75rem;
}

.sd-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--sd-text);
  font: 780 1.3rem/1 var(--sd-font);
  letter-spacing: -.035em;
  text-decoration: none;
}
.sd-brand:hover { color: var(--sd-text); }
.sd-brand-mark {
  flex: 0 0 auto;
  width: 2.125rem;
  height: 2.125rem;
  color-scheme: dark;
}
.sd-brand-wordmark { white-space: nowrap; }
.sd-eyebrow {
  color: var(--sd-muted);
  font: 750 .72rem/1.4 var(--sd-font);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 3rem;
  padding: .75rem 1.15rem;
  border: 1px solid transparent;
  border-radius: .55rem;
  font: 700 .9rem/1.3 var(--sd-font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.sd-button-primary { background: var(--sd-lime); color: var(--sd-on-accent); }
.sd-button-primary:hover { background: var(--sd-lime-hover); color: var(--sd-on-accent); }
.sd-button-secondary { border-color: var(--sd-line-strong); color: var(--sd-text); background: var(--sd-panel); }
.sd-button-secondary:hover { border-color: var(--sd-muted); color: var(--sd-text); background: var(--sd-raised); }
:where(.sd-brand, .sd-button):focus-visible {
  outline: 2px solid var(--sd-lime);
  outline-offset: 3px;
}

.sd-landing-header {
  display: grid;
  place-items: center;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--sd-line);
  background: var(--sd-chrome);
}
@media (prefers-reduced-motion: no-preference) {
  .sd-button, .sd-live-match, .sd-public-card, .sd-dashboard-links a, .sd-section-nav a {
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  .sd-hero-copy, .sd-auth-intro, .sd-public-hero, .tms-content > .page-header {
    animation: sd-heading-in 200ms ease-out both;
  }
}
@keyframes sd-heading-in {
  from { opacity: .9; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}