.d2-diagram .d2-dark {
    display: none;
}

html.dark .d2-diagram .d2-light {
    display: none;
}

html.dark .d2-diagram .d2-dark {
    display: block;
}

article .typography h2 {
    margin-top: 2.2rem;
}

article .typography h3 {
    margin-top: 1.8rem;
}

article .typography h4 {
    margin-top: 1.6rem;
}

article .typography h5 {
    margin-top: 1.4rem;
}

article .typography p {
    margin-top: 1.2rem;
}

article .codehilite td.linenos {
    display: none;
}

html {
    scrollbar-gutter: stable;
}

/* Blur when search is open */

html.search-open body::before {
    content: "";
    position: fixed;
    inset: 0;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    background: rgb(0 0 0 / 0.08);
    pointer-events: none;
    z-index: 30;
}

#search-dialog {
    z-index: 40;
}

html.dark #search-dialog {
    box-shadow: 0 0 100px 10px rgba(0, 0, 0, 0.5);
}

/* Fixes for layout full width */

html.layout-full .container,
html.layout-full .container-wrapper,
html.layout-full [class~="3xl:fixed:container"],
html.layout-full [data-slot="sidebar-wrapper"],
html.layout-full [data-slot="docs"] {
  max-width: none !important;
  width: 100% !important;
}

html.layout-full article[view-transition-name="page"] {
  width: 100%;
  max-width: 1100px;
  padding-inline: 1rem;
  box-sizing: border-box;
}

html.layout-full .typography {
  width: 100%;
  max-width: 1100px;
}

html.layout-full .mx-auto.flex.flex-wrap.h-16.w-full.max-w-2xl {
  max-width: 1100px !important;
  padding-inline: 1rem;
  box-sizing: border-box;
}

/* FIXED */
html.layout-fixed article[view-transition-name="page"] {
  max-width: 800px;
  padding-inline: 1rem;
  box-sizing: border-box;
}

html.layout-fixed .typography {
  max-width: 800px;
}

/* Fixes for search dialog alignment */

#search-dialog {
  top: calc(var(--header-height) + 1rem) !important;
  left: 50% !important;
  margin: 0 !important;

  translate: -50% 0 !important;
  transform: none !important;
}

#search-dialog > .w-lg {
  width: min(800px, calc(100vw - 2rem)) !important;
  max-width: min(800px, calc(100vw - 2rem)) !important;
}

#mkdocs-search-results {
  max-height: 70vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#mkdocs-search-results article {
  margin: 0.25rem !important;
  width: 100% !important;
  max-width: none !important;
}

#mkdocs-search-results article:hover {
  background: var(--muted);
}