:root {
  --sx-bg: #0a0c10;
  --sx-bg-elev: #11151b;
  --sx-bg-panel: #161b23;
  --sx-border: #2a3340;
  --sx-text: #e8ecf3;
  --sx-text-soft: #b4bfce;
  --sx-link: #c2d0e0;
  --sx-link-hover: #d7e2ef;
  --sx-radius: 12px;
  --sx-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
}

[data-md-color-scheme="slate"],
[data-md-color-scheme="default"] {
  --md-default-bg-color: #0a0c10;
  --md-default-bg-color--light: #11151b;
  --md-default-bg-color--lighter: #161b23;
  --md-default-bg-color--lightest: #1d2430;
  --md-default-fg-color: #e8ecf3;
  --md-default-fg-color--light: #d0d8e4;
  --md-default-fg-color--lighter: #a9b6c7;
  --md-default-fg-color--lightest: #8e9bb0;
  --md-primary-fg-color: #0a0c10;
  --md-primary-bg-color: #e8ecf3;
  --md-accent-fg-color: #b8c7d9;
  --md-accent-fg-color--transparent: rgba(184, 199, 217, 0.15);
  --md-typeset-a-color: var(--sx-link);
}

html,
body,
.md-main,
.md-container {
  background: var(--sx-bg);
}

.md-header {
  background: #080a0e;
  border-bottom: 1px solid var(--sx-border);
}

.md-footer {
  background: #080a0e;
  border-top: 1px solid var(--sx-border);
}

.md-header__button.md-logo img {
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
}

.md-typeset {
  color: var(--sx-text);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: #f4f6fa;
}

.md-typeset a {
  color: var(--sx-link);
}

.md-typeset a:hover {
  color: var(--sx-link-hover);
}

.md-typeset pre > code,
.md-typeset .highlight pre {
  background: #0d1118;
  border: 1px solid var(--sx-border);
  border-radius: 8px;
}

.md-typeset .hero-card,
.md-typeset .next-block,
.md-typeset .learn-block,
.md-typeset .api-signature {
  background: var(--sx-bg-elev);
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius);
  box-shadow: var(--sx-shadow);
}

.md-typeset .hero-card {
  padding: 1.7rem;
}

.md-typeset .hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
}

.md-typeset .hero-pill {
  background: var(--sx-bg-panel);
  border: 1px solid var(--sx-border);
  border-radius: 999px;
  color: var(--sx-text-soft);
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.95rem;
}

.md-typeset .next-block,
.md-typeset .learn-block,
.md-typeset .api-signature {
  padding: 1rem 1.05rem;
  margin: 1rem 0;
}

.md-typeset .next-block {
  border-left: 4px solid #f2b84a;
}

.md-typeset .learn-block {
  border-left: 4px solid #9eb0c8;
}

.md-typeset .api-signature {
  border-left: 4px solid #75d7cb;
  overflow-x: auto;
}

.md-typeset img[alt$="preview image"] {
  display: block;
  width: min(100%, 980px);
  margin: 0.55rem 0 0.95rem;
  border: 1px solid var(--sx-border);
  border-radius: 10px;
  background: #0f1319;
}

.md-search__form {
  background: var(--sx-bg-elev);
  border: 1px solid var(--sx-border);
}

.md-search__input {
  color: var(--sx-text);
}

.md-search__input::placeholder {
  color: #9da9bc;
}

.md-nav__link:focus-visible,
.md-search__input:focus-visible,
button:focus-visible {
  outline: 2px solid #c7d2e2;
  outline-offset: 2px;
  border-radius: 6px;
}

@media screen and (min-width: 76.25em) {
  .md-main__inner {
    align-items: flex-start;
  }

  .md-sidebar--primary {
    align-self: start;
    position: sticky;
    top: calc(var(--md-header-height, 2.4rem) + 0.55rem);
    max-height: calc(100vh - var(--md-header-height, 2.4rem) - 1rem);
  }

  .md-sidebar--primary .md-sidebar__inner {
    box-sizing: border-box;
    max-height: 100%;
    background: #0f1319;
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-radius);
    padding: 0.45rem 0.35rem;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap {
    max-height: calc(100vh - var(--md-header-height, 2.4rem) - 2.3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.2rem;
    padding-bottom: 1.2rem;
  }
}