:root {
  --elv-violet: #7c5cff;
  --elv-blue: #5b7cff;
  --elv-cyan: #49b9ff;
  --elv-magenta: #ec56b4;
  --elv-gradient: linear-gradient(135deg, #8b6bff 0%, #5b7cff 55%, #49b9ff 120%);
  --elv-gradient-soft: linear-gradient(135deg, rgba(124, 92, 255, .16), rgba(77, 124, 255, .1));
  --elv-sidebar-width: 260px;
  --elv-header-height: 72px;
  --elv-sidebar-footer-height: 45px;
  --elv-nav-item-height: 34px;
  --elv-nav-item-radius: 9px;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #7c5cff;
  --md-primary-fg-color--light: #8b6bff;
  --md-primary-fg-color--dark: #5b45e0;
  --md-accent-fg-color: #5b45e0;
  --md-default-bg-color: #eef0fa;
  --md-default-fg-color: #14182a;
  --md-default-fg-color--light: #333a56;
  --md-default-fg-color--lighter: #4c5470;
  --md-code-bg-color: rgba(255, 255, 255, .54);
  --elv-header-bg: rgba(255, 255, 255, .72);
  --elv-sidebar-bg: rgba(255, 255, 255, .58);
  --elv-sidebar-brand-bg: rgba(250, 251, 255, .97);
  --elv-surface: rgba(255, 255, 255, .4);
  --elv-surface-solid: #ffffff;
  --elv-field: rgba(255, 255, 255, .78);
  --elv-border: rgba(70, 72, 120, .1);
  --elv-border-strong: rgba(60, 62, 110, .15);
  --elv-shadow: 0 12px 32px -20px rgba(38, 40, 95, .22);
  --elv-active-bg: rgba(124, 92, 255, .1);
  --elv-hover: rgba(20, 30, 70, .04);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #8b6bff;
  --md-primary-fg-color--light: #9d86ff;
  --md-primary-fg-color--dark: #6f52e8;
  --md-accent-fg-color: #8da1ff;
  --md-default-bg-color: #17181d;
  --md-default-fg-color: #e6e8ef;
  --md-default-fg-color--light: #adb1c2;
  --md-default-fg-color--lighter: #868ba0;
  --md-code-bg-color: rgba(37, 39, 51, .5);
  --elv-header-bg: rgba(23, 24, 31, .9);
  --elv-sidebar-bg: rgba(21, 22, 29, .42);
  --elv-sidebar-brand-bg: rgba(21, 22, 29, .97);
  --elv-surface: rgba(30, 32, 42, .4);
  --elv-surface-solid: #22242b;
  --elv-field: rgba(19, 20, 26, .48);
  --elv-border: rgba(255, 255, 255, .08);
  --elv-border-strong: rgba(255, 255, 255, .14);
  --elv-shadow: 0 14px 40px -22px rgba(0, 0, 0, .7);
  --elv-active-bg: rgba(139, 107, 255, .16);
  --elv-hover: rgba(255, 255, 255, .05);
}

body,
input {
  font-family: "Inter Variable", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.md-header {
  color: var(--md-default-fg-color);
  background: var(--elv-header-bg);
  border-bottom: 1px solid var(--elv-border);
  box-shadow: none;
  backdrop-filter: blur(24px) saturate(145%);
}

.md-header__inner {
  min-height: var(--elv-header-height);
}

.md-header__button,
.md-header__title {
  color: var(--md-default-fg-color);
}

.md-header__button.md-logo {
  margin: .25rem;
  padding: .2rem;
}

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

.md-header__title {
  font-weight: 750;
  letter-spacing: -.02em;
}

.md-search__form {
  background: var(--elv-field);
  border: 1px solid var(--elv-border-strong);
  border-radius: .75rem;
}

.md-search__form:hover {
  background: var(--elv-surface-solid);
}

.md-search__input,
.md-search__input::placeholder {
  color: var(--md-default-fg-color--light);
}

.md-main {
  background:
    radial-gradient(52rem 34rem at 6% -8%, rgba(124, 92, 255, .12), transparent 62%),
    radial-gradient(48rem 34rem at 102% 0%, rgba(73, 185, 255, .08), transparent 58%),
    var(--md-default-bg-color);
}

.md-main__inner {
  max-width: none;
  margin-top: 0;
}

.md-content__inner {
  max-width: 74rem;
  margin: 0 auto;
  padding: 2rem 2.25rem 3.5rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.md-typeset {
  font-size: .875rem;
  line-height: 1.7;
}

.md-typeset h1 {
  margin-bottom: .35rem;
  color: var(--md-default-fg-color);
  font-size: 1.9rem;
  font-weight: 780;
  letter-spacing: -.035em;
}

.md-typeset h2 {
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--elv-border);
  font-weight: 720;
  letter-spacing: -.02em;
}

.md-typeset a {
  font-weight: 600;
}

.md-typeset code {
  border: 1px solid var(--elv-border);
  border-radius: .4rem;
}

.md-typeset .admonition,
.md-typeset details {
  background: var(--elv-surface);
  border-width: 0 0 0 .22rem;
  border-radius: .75rem;
  box-shadow: var(--elv-shadow);
}

.md-nav__link {
  min-height: var(--elv-nav-item-height);
  margin: .03125rem 0;
  padding: .35rem 9px;
  border-radius: var(--elv-nav-item-radius);
  color: var(--md-default-fg-color--light);
  font-size: .725rem;
  font-weight: 550;
  transition: color 120ms ease, background-color 120ms ease, filter 120ms ease;
}

.md-nav__link .md-ellipsis {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.3;
}

.md-nav__link:hover {
  color: var(--md-default-fg-color);
  background: var(--elv-hover);
}

.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link--active,
.md-nav--primary > .md-nav__list > .md-nav__item--nested:has(.md-nav__link--active) > .md-nav__link {
  color: #ffffff;
  background: var(--elv-gradient);
  box-shadow: 0 10px 24px -12px rgba(108, 92, 255, .85);
}

.md-nav__item--nested > .md-nav__link {
  margin-top: .0625rem;
  padding: .35rem 9px;
  border: 0;
  background: transparent;
  font-weight: 650;
}

.md-nav__item--nested > .md-nav {
  margin: 0;
  padding: 0;
  border-left: 0;
}

.md-nav__item--nested > .md-nav__toggle:not(:checked) ~ .md-nav {
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-left: 0;
}

.md-nav__item--nested > .md-nav__toggle:checked ~ .md-nav,
.md-nav__item--nested > .md-nav__toggle:checked ~ .md-nav--secondary {
  margin: .0625rem 0 .125rem 6px;
  padding: .0625rem 0 .25rem 7px;
  border-left: 1.5px solid var(--elv-border);
}

.md-nav__item--nested > .md-nav .md-nav__link {
  min-height: 32px;
  padding: .3rem 9px;
  font-size: .675rem;
}

.md-nav__item--nested > .md-nav .md-nav__link--active {
  color: var(--md-accent-fg-color);
  background: var(--elv-gradient-soft);
  box-shadow: none;
  font-weight: 650;
}

.md-nav__toggle:checked ~ .md-nav > .md-nav__list {
  padding-top: .0625rem;
}

.md-sidebar__scrollwrap:hover {
  scrollbar-color: var(--elv-violet) transparent;
}

.md-sidebar--secondary .md-nav__link {
  min-height: auto;
  padding: .25rem .6rem;
  border-radius: .45rem;
  font-size: .65rem;
}

.elv-sidebar-version {
  display: flex;
  min-height: var(--elv-sidebar-footer-height);
  margin-top: auto;
  padding: .5rem .75rem;
  align-items: center;
  justify-content: center;
  color: var(--md-default-fg-color--lighter);
  border-top: 1px solid var(--elv-border);
  font-size: .55rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.elv-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
  border: 1px solid var(--elv-border);
  border-radius: .9rem;
  background: #000000;
  box-shadow: var(--elv-shadow);
}

.elv-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media screen and (min-width: 76.25em) {
  .md-header {
    width: calc(100% - var(--elv-sidebar-width));
    margin-left: var(--elv-sidebar-width);
  }

  .md-header__inner {
    max-width: none;
    margin: 0;
    padding: 0 1.25rem;
  }

  .md-header__button.md-logo,
  .md-header__title {
    display: none;
  }

  .md-search {
    margin-left: 0;
  }

  .md-main__inner {
    min-height: calc(100vh - var(--elv-header-height));
    padding-left: var(--elv-sidebar-width);
  }

  .md-sidebar--primary {
    position: fixed;
    z-index: 5;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--elv-sidebar-width);
    height: 100vh;
    padding: 0;
    color: var(--md-default-fg-color--light);
    background: var(--elv-sidebar-bg);
    border-right: 1px solid var(--elv-border);
    backdrop-filter: blur(30px) saturate(145%);
  }

  .md-sidebar--primary .md-sidebar__scrollwrap {
    margin: 0;
    padding: 0 10px calc(1rem + var(--elv-sidebar-footer-height));
    overflow-x: hidden;
    scroll-padding-top: 92px;
  }

  .md-sidebar--primary .md-sidebar__inner {
    padding: 0;
  }

  .md-nav--primary > .md-nav__title {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    height: 84px;
    margin: 0 -14px .5rem;
    padding: 0 16px 0 60px;
    align-items: center;
    color: transparent;
    background-color: var(--elv-sidebar-brand-bg);
    background-image: url("../images/elvoris-mark.png");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 40px 40px;
    box-shadow: none;
    font-size: 0;
  }

  .md-nav--primary > .md-nav__title::after {
    color: var(--elv-violet);
    background: var(--elv-gradient);
    background-clip: text;
    content: "Elvoris";
    font-size: 1.5rem;
    font-weight: 780;
    letter-spacing: -.04em;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .md-nav--primary > .md-nav__list {
    padding-top: 0;
  }

  .md-nav--primary > .md-nav__list > .md-nav__item--nested:has(.md-nav__link--active) > .md-nav__link {
    position: sticky;
    z-index: 3;
    top: 92px;
  }

  .md-content {
    min-width: 0;
  }

  .elv-sidebar-version {
    position: fixed;
    z-index: 6;
    bottom: 0;
    left: 0;
    width: calc(var(--elv-sidebar-width) - 1px);
    min-height: var(--elv-sidebar-footer-height);
    background: var(--elv-sidebar-brand-bg);
  }
}

@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title {
    background: var(--elv-sidebar-bg);
    border-bottom: 1px solid var(--elv-border);
  }
}

@media screen and (max-width: 44.984375em) {
  .md-content__inner {
    padding: 1.25rem 1rem 2.5rem;
  }

  .md-typeset h1 {
    font-size: 1.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-nav__link {
    transition: none;
  }
}