:root {
  --wc-bg: #080c10;
  --wc-surface: #0a101c;
  --wc-accent: #2e7fff;
  --wc-accent-strong: #6eb8ff;
  --wc-text: #eef2ff;
  --wc-soft: rgba(238, 242, 255, .76);
  --wc-muted: rgba(238, 242, 255, .54);
  --wc-border: rgba(255, 255, 255, .11);
  --wc-border-blue: rgba(46, 127, 255, .32);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--wc-bg);
  --md-default-fg-color: var(--wc-text);
  --md-default-fg-color--light: var(--wc-soft);
  --md-default-fg-color--lighter: var(--wc-muted);
  --md-default-fg-color--lightest: rgba(238, 242, 255, .24);
  --md-primary-fg-color: var(--wc-surface);
  --md-primary-fg-color--dark: #080c10;
  --md-primary-fg-color--light: #111b2e;
  --md-accent-fg-color: var(--wc-accent-strong);
  --md-accent-fg-color--transparent: rgba(46, 127, 255, .16);
  --md-typeset-a-color: var(--wc-accent-strong);
  --md-code-bg-color: rgba(17, 27, 46, .82);
  --md-code-fg-color: var(--wc-text);
  --md-footer-bg-color: #080c10;
  --md-footer-bg-color--dark: #05080c;
}

.md-header {
  background:
    linear-gradient(90deg, rgba(46, 127, 255, .18), transparent 46%),
    rgba(8, 12, 16, .92);
  border-bottom: 1px solid var(--wc-border-blue);
  box-shadow: 0 8px 28px rgba(4, 8, 20, .32);
}

.md-tabs {
  background: rgba(10, 16, 28, .94);
  border-bottom: 1px solid var(--wc-border);
}

.md-tabs__link--active,
.md-tabs__link:hover,
.md-nav__link--active,
.md-nav__link:hover,
.md-typeset a:hover {
  color: var(--wc-accent-strong);
}

.md-search__form {
  background-color: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .08);
}

.md-typeset .md-button {
  color: var(--wc-text);
  border-color: var(--wc-border-blue);
}

.md-typeset .md-button--primary {
  color: #fff;
  background: linear-gradient(180deg, #3a8bff 0%, var(--wc-accent) 100%);
  border-color: var(--wc-accent);
}

.md-typeset .admonition,
.md-typeset details {
  background-color: rgba(10, 16, 28, .72);
  border-color: var(--wc-border-blue);
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: rgba(46, 127, 255, .13);
}

.md-typeset table:not([class]) {
  background-color: rgba(10, 16, 28, .74);
  border-color: var(--wc-border);
}

.md-typeset table:not([class]) th {
  background-color: rgba(17, 27, 46, .9);
  color: var(--wc-text);
}

.md-logo img {
  width: auto;
  height: 1.35rem;
}