:root {
  --docs-radius: 0.78rem;
  --docs-shadow: 0 0.45rem 1.6rem rgb(0 0 0 / 10%);
}

[data-md-color-scheme="default"] {
  --docs-surface: #ffffff;
  --docs-surface-soft: #fff4f6;
  --docs-border: #eadde0;
  --docs-muted: #67585d;
}

[data-md-color-scheme="slate"] {
  --docs-surface: #202126;
  --docs-surface-soft: #18191e;
  --docs-border: #3a3439;
  --docs-muted: #c3b8bc;
}

.md-grid { max-width: 90rem; }
.md-header { border-bottom: 1px solid rgb(255 255 255 / 12%); box-shadow: 0 0.15rem 0.8rem rgb(0 0 0 / 14%); }
.md-tabs { border-bottom: 1px solid rgb(0 0 0 / 12%); }
.md-tabs__link, .md-nav__link--active { font-weight: 700; }
.md-main__inner { margin-top: 0.8rem; }
.md-content__inner { padding-bottom: 3rem; }
.md-typeset h1 { margin-bottom: 1rem; color: var(--md-default-fg-color); font-weight: 760; letter-spacing: -0.025em; }
.md-typeset h2 { padding-bottom: 0.35rem; border-bottom: 1px solid var(--docs-border); font-weight: 720; }
.md-typeset a:not(.md-button) { text-underline-offset: 0.15em; }
.md-typeset table:not([class]) { border: 1px solid var(--docs-border); border-radius: var(--docs-radius); box-shadow: 0 0.15rem 0.55rem rgb(0 0 0 / 5%); }
.md-typeset table:not([class]) th { background: var(--docs-surface-soft); }

.docs-hero {
  margin: 0 0 1.6rem;
  padding: clamp(1.35rem, 3vw, 2.4rem);
  border: 1px solid var(--docs-border);
  border-left: 0.3rem solid var(--md-primary-fg-color);
  border-radius: var(--docs-radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--md-primary-fg-color) 11%, transparent), transparent 64%), var(--docs-surface);
  box-shadow: var(--docs-shadow);
}
.docs-hero > :first-child { margin-top: 0; }
.docs-hero > :last-child { margin-bottom: 0; }

.docs-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; margin: 1.2rem 0 2rem; }
.docs-card { min-height: 10rem; padding: 1rem 1.1rem; border: 1px solid var(--docs-border); border-radius: var(--docs-radius); background: var(--docs-surface); box-shadow: 0 0.15rem 0.6rem rgb(0 0 0 / 5%); }
.docs-card h3 { margin-top: 0; }

@media screen and (max-width: 60em) {
  .docs-card-grid { grid-template-columns: 1fr; }
  .docs-card { min-height: auto; }
}

@media screen and (max-width: 44.9375em) {
  .md-main__inner { margin-top: 0.25rem; }
  .docs-hero { padding: 1.15rem; }
  .md-typeset .md-button { display: flex; width: 100%; justify-content: center; margin: 0.35rem 0; }
}
