:root {
  --sidebar-left-w: 260px;
  --sidebar-right-w: 220px;
  --topbar-h: 4em;
  --content-max: 1000px;
  --layout-max: calc(var(--content-max) + var(--sidebar-left-w) + var(--sidebar-right-w));
  --layout-top-space: 4em;
  --page-margin: 2em;
  --layout-offset: max(2em, calc((100vw - var(--layout-max)) / 2));
  --edge: rgba(255,255,255,.06);
}

body.scrolled {
  --layout-top-space: 2em;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--container) !important;
  color: var(--content);
  user-select: text !important;
  padding-top: var(--topbar-h);
  font-family: 'dstrn-font';
}

#sidebar-left,
#sidebar-right,
.code-scroll {
  scrollbar-width: none;
}

#sidebar-left::-webkit-scrollbar,
#sidebar-right::-webkit-scrollbar,
.code-scroll::-webkit-scrollbar {
  display: none;
}

#sidebar-left > div,
#sidebar-right > div,
.flex-1.w-100 {
  transition: padding-top .18s ease;
}

.sidebar-close {
  background: none;
  border: none;
  color: var(--content-d);
  width: 1.8em;
  height: 1.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color .12s;
}

.sidebar-close:hover {
  color: var(--content-l);
}

.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--edge);
  border-radius: .45em;
  color: var(--content-l);
  transition: background .12s, border-color .12s;
}

.hamburger:hover {
  background: rgba(255,255,255,.08);
}

.ham-bar {
  display: block;
  width: 1em;
  height: .1em;
  background: var(--content-l);
  border-radius: 2px;
}

.nav-group {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-section {
  margin-top: 1.2em;
}

.nav-section-label {
  margin: 0;
  padding: .6em 1.25em .4em;
  letter-spacing: .07em;
}

.nav-link {
  display: block;
  padding: .4em 1.25em;
  font-size: .9em;
  color: var(--content-d);
  text-decoration: none;
  line-height: 1.6;
  transition: color .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.nav-link:hover {
  color: var(--content-l);
}

.nav-link--active {
  color: var(--content-l);
  font-weight: 500;
}

.nav-link--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 1em;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

.nav-section .nav-link {
  padding-left: 1.75em;
}

.toc-list,
.toc-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-sub {
  margin: .2em 0 .3em;
}

.toc-empty {
  padding: .6em 1.25em;
  font-size: .75em;
  color: var(--content-d);
}

.toc-link {
  display: block;
  padding: .35em 1.25em;
  font-size: .75em;
  color: var(--content-d);
  text-decoration: none;
  line-height: 1.6;
  transition: color .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.toc-link:hover {
  color: var(--content-l);
}

.toc-link.is-active {
  color: var(--accent-l);
  font-weight: 500;
}

.toc-link.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 1em;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

.toc-link--sub {
  padding-left: 2em;
}

.copy-md-btn {
  background: none;
  border: none;
  color: var(--content-d);
  font-family: inherit;
  line-height: 1.4;
  transition: color .12s;
  padding: 0;
}

.copy-md-btn:hover {
  color: var(--content-l);
}

.copy-md-btn.copied {
  color: var(--green);
}

#doc-shell {
  margin-left: max(var(--sidebar-left-w) + var(--layout-offset), calc((100vw - var(--layout-max)) / 2 + var(--sidebar-left-w)));
  margin-right: max(var(--sidebar-right-w) + var(--layout-offset), calc((100vw - var(--layout-max)) / 2 + var(--sidebar-right-w)));
  padding: var(--topbar-h) var(--page-margin) 0 var(--page-margin);
}

.prose {
  width: 100%;
  color: var(--content);
  line-height: 1.75;
  transition: padding-top .18s ease;
}

.prose h1 {
  font-size: 2em;
  font-weight: 500;
  color: var(--content-l);
  line-height: 1.15;
  margin: 0 0 1em !important;
}

.prose h2 {
  font-size: 1.35em;
  font-weight: 600;
  color: var(--content-l);
  line-height: 1.3;
  margin: 2.5em 0 .9em !important;
}

.prose h3 {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--content-l);
  line-height: 1.4;
  margin: 2em 0 .8em !important;
}

.prose h4,
.prose h5,
.prose h6 {
  font-weight: 600;
  color: var(--content-l);
  margin: 1.2em 0 .5em !important;
}

.prose p {
  margin: 0 0 1.2em !important;
}

.prose p:last-child {
  margin-bottom: 0 !important;
}

.prose a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(211,172,95,.3);
  transition: border-color .12s;
}

.prose a:hover {
  border-bottom-color: var(--accent);
}

.prose ul,
.prose ol {
  padding-left: 1.5em;
  margin: 0 0 1.2em !important;
}

.prose li {
  margin-bottom: .4em;
}

.prose strong {
  color: var(--content-l);
  font-weight: 600;
}

.prose code {
  font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: .8em;
  background: rgba(255,255,255,.07);
  color: var(--accent-l);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.1);
}

.prose blockquote {
  border-left: 3px solid rgba(255,255,255,.15);
  padding: .1em 0 .1em 1.25em;
  color: var(--content-d);
  margin: 1.25em 0 !important;
  font-style: italic;
}

.prose blockquote p {
  margin-bottom: 0 !important;
}

.prose hr {
  border: none;
  border-top: 1px solid var(--edge);
  margin: 2.75em 0 !important;
}

.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.25em 0;
  font-size: .875em;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  overflow: hidden;
}

.prose th,
.prose td {
  padding: .56em .875em;
  border-right: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  text-align: left;
}

.prose th:last-child,
.prose td:last-child {
  border-right: none;
}

.prose tr:last-child td {
  border-bottom: none;
}

.prose th {
  background: rgba(255,255,255,.04);
  color: var(--content-l);
  font-weight: 600;
}

.prose td {
  color: var(--content);
}

.code-block code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.code-block {
  position: relative;
  background: #161616;
  border: 1px solid var(--edge);
  border-radius: 8px;
  margin: .375em 0 1.5em;
  overflow: hidden;
}

.code-scroll {
  overflow-x: auto;
}

.code-pre {
  margin: 0;
  padding: .875em 0;
  font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: .8125em;
  line-height: 1.6;
  white-space: pre;
  background: none;
  border: none;
  overflow: visible;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.code-row {
  display: flex;
  align-items: baseline;
  min-height: 1.6em;
}

.code-ln {
  flex-shrink: 0;
  width: 2.75em;
  padding: 0 .75em 0 0;
  text-align: right;
  color: rgba(255,255,255,.2);
  font-size: .75em;
  user-select: none;
  line-height: inherit;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.code-line {
  flex: 1;
  padding: 0 4em 0 1em;
  color: #c9d1d9;
  line-height: inherit;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.code-copy {
  position: absolute;
  top: .625em;
  right: .625em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: 1.75em;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  color: rgba(255,255,255,.4);
  cursor: pointer;
  transition: color .12s, background .12s;
  z-index: 2;
  padding: 0;
}

.code-copy:hover {
  color: var(--content-l);
  background: rgba(255,255,255,.1);
}

.code-copy.copied {
  color: var(--green);
  border-color: var(--green);
}

.hljs-comment,
.hljs-quote {
  color: #6e7681;
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag {
  color: var(--red);
}

.hljs-addition {
  color: var(--green);
}

.hljs-string,
.hljs-doctag,
.hljs-regexp {
  color: var(--green);
}

.hljs-number,
.hljs-literal,
.hljs-boolean {
  color: var(--blue);
}

.hljs-title,
.hljs-section,
.hljs-name,
.hljs-selector-id {
  color: var(--accent-l);
}

.hljs-variable,
.hljs-attr,
.hljs-attribute,
.hljs-template-variable {
  color: var(--orange);
}

.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-class {
  color: var(--orange);
}

.hljs-params {
  color: var(--content);
}

.hljs-meta {
  color: #6e7681;
}

.hljs-deletion {
  color: var(--red-inactive);
}

.hljs-tag {
  color: var(--green);
}

.hljs-property {
  color: var(--blue);
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: 700;
}

.alert {
  display: flex;
  gap: 1em;
  border-radius: .5em;
  padding: 1em;
  margin: 1.5em 0 !important;
  border: 1px solid;
  font-size: .9em;
  line-height: 1.65;
}

.alert-icon {
  display: flex;
  align-items: flex-start;
  padding-top: 1px;
  flex-shrink: 0;
}

.alert-body {
  flex: 1;
  min-width: 0;
}

.alert-body p {
  margin: .25em 0 0 !important;
  font-size: inherit;
  color: inherit;
}

.alert-body p:first-child {
  margin-top: 0 !important;
}

.alert-label {
  display: block;
  font-size: .75em;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: .2em;
}

.alert-note {
  background: rgba(99,133,186,.08);
  border-color: rgba(99,133,186,.25);
}

.alert-tip {
  background: rgba(80,160,100,.08);
  border-color: rgba(80,160,100,.25);
}

.alert-important {
  background: rgba(180,90,175,.08);
  border-color: rgba(180,90,175,.25);
}

.alert-warning {
  background: rgba(200,155,60,.08);
  border-color: rgba(200,155,60,.25);
}

.alert-caution {
  background: rgba(195,80,80,.08);
  border-color: rgba(195,80,80,.25);
}

.alert-note .alert-icon,
.alert-note .alert-label {
  color: var(--blue);
}

.alert-tip .alert-icon,
.alert-tip .alert-label {
  color: var(--green);
}

.alert-important .alert-icon,
.alert-important .alert-label {
  color: var(--purple);
}

.alert-warning .alert-icon,
.alert-warning .alert-label {
  color: var(--accent-l);
}

.alert-caution .alert-icon,
.alert-caution .alert-label {
  color: var(--red);
}

.anchor {
  display: block;
  position: relative;
  top: -80px;
  visibility: hidden;
}

#toc-inline {
  display: none;
  margin: 2em 0;
  padding: 1.5em;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--edge);
  border-radius: 8px;
}

#toc-inline h2 {
  font-size: 1em !important;
  font-weight: 600 !important;
  margin: 0 0 1em !important;
  color: var(--content-l);
  text-transform: uppercase;
  letter-spacing: .07em;
}

#toc-inline .toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#toc-inline .toc-link {
  display: block;
  padding: .4em 0 .4em 1.2em;
  font-size: .9em;
  color: var(--content);
  text-decoration: none;
  line-height: 1.5;
  transition: color .12s;
  border-bottom: none;
  position: relative;
}

#toc-inline .toc-link::before {
  content: '#';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 600;
}

#toc-inline .toc-link:hover {
  color: var(--content-l);
}

#toc-inline .toc-link.is-active {
  color: var(--accent-l);
  font-weight: 500;
}

#toc-inline .toc-link.is-active::before {
  color: var(--accent-l);
}

#toc-inline .toc-link--sub {
  padding-left: 2.7em;
  font-size: .85em;
}

#toc-inline .toc-link--sub::before {
  left: 1.5em;
}

#top-navigation{
    gap: 2em;
    justify-content:space-between;
  }

@media (max-width: 1100px) {
  :root {
    --sidebar-right-w: 0px;
    --layout-offset: max(0px, calc((100vw - var(--content-max) - var(--sidebar-left-w)) / 2));
  }

  #padder{
    display: none !important;
  }

  .logo-text{
    margin-left: 0 !important;;
  }

  #doc-shell {
    margin-right: 0;
  }

  #sidebar-right {
    display: none;
  }

  #toc-inline {
    display: block;
  }
}

@media (max-width: 860px) {
  :root {
    --page-margin: 1em;
    --layout-offset: 0px;
  }

  #doc-shell {
    margin-left: 0;
    margin-right: 0;
  }

  #sidebar-left {
    left: 0;
    width: 300px !important;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  #sidebar-left.is-open {
    transform: translateX(0);
  }

  #sidebar-left.is-open > div {
    padding: 2em 1.5em 3em !important;
  }

  #btn-left-close {
    display: flex !important;
  }

  #top-menu {
    display: flex !important;
  }

  #top-navigation{
    gap: 1em;
    justify-content:flex-start;
  }

  #btn-search-sidebar{
    width: 100% !important;
    max-width: 100% !important;
    margin-left:1em !important;
  }
}

.logo-text{
  margin-left:var(--layout-offset);
}

#padder{
  margin-right:var(--layout-offset);
}

#btn-search-sidebar{
  --width: calc(100vw - (max(var(--sidebar-left-w) + var(--layout-offset), calc((100vw - var(--layout-max)) / 2 + var(--sidebar-left-w)))) - (max(var(--sidebar-right-w) + var(--layout-offset), calc((100vw - var(--layout-max)) / 2 + var(--sidebar-right-w)))) - 3em);
  max-width: var(--width);
  width: min(var(--width), 100%);
  padding:.6em .75em;
  background:rgba(255,255,255,.04);
  border:1px solid var(--edge);
  border-radius:6px;
  color:var(--content-d);
  margin-left:3em;
}

#btn-search-sidebar:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  color: var(--content);
}

#search-input:focus {
  outline: none;
  border-color: var(--accent);
}