@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap");

:root {
  --vx-primary: #782b90;
  --vx-primary-hover: #571f69;
  --vx-text: #282823;
  --vx-muted: #6f6970;
  --vx-border: #e5e7eb;
  --vx-bg: #ffffff;
  --vx-bg-subtle: #f8f9fa;
  --vx-code-bg: #2f2336;
  --vx-code-text: #f3f6fb;
  --vx-code-comment: #b8c2cc;
  --vx-code-keyword: #8be9fd;
  --vx-code-string: #ffd479;
  --vx-code-number: #7ee787;
  --vx-code-title: #ff9ccf;
  --vx-code-variable: #ffb2b2;
  --vx-code-meta: #d2a8ff;
  --vx-inline-code: #de529a;
}

html,
body {
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  color: var(--vx-text);
  background: var(--vx-bg);
  line-height: 1.65;
}

body {
  padding-top: 3.5rem;
}

a {
  color: var(--vx-primary);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--vx-primary-hover);
  text-decoration: underline;
}

#header,
#content,
#footer {
  max-width: 68rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

#header > h1:first-child {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  font-weight: 400;
  font-size: 2rem;
  color: #242423;
  border-bottom: 1px solid var(--vx-border);
  padding-bottom: 0.9rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
#toctitle {
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  color: #3c3c3b;
  font-weight: 400;
  word-spacing: normal;
}

h2,
h3,
h4 {
  scroll-margin-top: 5rem;
}

h2 {
  margin-top: 2.1rem;
  font-size: 1.78rem;
}

h3 {
  margin-top: 1.6rem;
  font-size: 1.35rem;
}

p,
li,
dd,
dt,
.tableblock td {
  font-size: 1rem;
}

#toc,
#toc.toc2 {
  border-color: var(--vx-border);
  background: var(--vx-bg-subtle);
}

#toc.toc2 {
  position: fixed;
  left: 0;
  top: 3.5rem;
  height: calc(100vh - 3.5rem);
  width: 17rem;
  box-sizing: border-box;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  overflow: auto;
  text-align: left;
  border-right: 1px solid var(--vx-border);
  z-index: 1100;
}

body.toc2 {
  padding-left: 18.5rem;
}

#toc a {
  display: inline-block;
  color: #3c3c3b;
}

#toc a:hover {
  color: var(--vx-primary);
}

#toctitle {
  text-align: left;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vx-muted);
}

#toc ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

#toc ul ul {
  padding-left: 0.9rem;
}

#toc li {
  margin: 0.35rem 0;
}

code,
pre,
kbd,
samp {
  font-family: "Roboto Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
}

:not(pre) > code {
  color: var(--vx-inline-code);
  background: #f3eef6;
  border-radius: 0.2rem;
  padding: 0.1rem 0.35rem;
}

.listingblock > .content > pre,
.literalblock pre,
pre.highlight {
  background: transparent;
  color: var(--vx-code-text);
  border-radius: 0.25rem;
  border: 0;
  padding: 0.6rem 0.75rem;
  margin: 0;
}

.listingblock > .content,
.literalblock > .content {
  background: var(--vx-code-bg);
  border-radius: 0.2rem;
  padding: 0.45rem;
}

.hljs {
  background: transparent !important;
  color: var(--vx-code-text) !important;
}

.hljs-comment,
.hljs-quote {
  color: var(--vx-code-comment) !important;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  color: var(--vx-code-keyword) !important;
}

.hljs-string,
.hljs-doctag,
.hljs-regexp,
.hljs-attribute {
  color: var(--vx-code-string) !important;
}

.hljs-number,
.hljs-literal,
.hljs-bullet {
  color: var(--vx-code-number) !important;
}

.hljs-title,
.hljs-section,
.hljs-symbol,
.hljs-type {
  color: var(--vx-code-title) !important;
}

.hljs-variable,
.hljs-template-variable,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
  color: var(--vx-code-variable) !important;
}

.hljs-meta,
.hljs-tag {
  color: var(--vx-code-meta) !important;
}

.admonitionblock > table {
  background: #f8f9fa;
  border-left: 6px solid var(--vx-primary);
}

.admonitionblock td.content {
  border-left: 0;
  color: var(--vx-text);
}

table.tableblock,
table.tableblock th,
table.tableblock td {
  border-color: var(--vx-border);
}

#footer {
  background: #242423;
}

#footer-text {
  color: rgba(255, 255, 255, 0.86);
}

.vertx-site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  height: 3.5rem;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--vx-border);
  backdrop-filter: blur(8px);
}

.vertx-site-header__inner {
  max-width: 92rem;
  height: 100%;
  margin: 0 auto;
  padding: 0 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.vertx-site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.vertx-site-header__brand:hover {
  text-decoration: none;
}

.vertx-site-header__brand-mark {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.88rem;
  color: #ffffff;
  background: var(--vx-primary);
}

.vertx-site-header__brand-text {
  color: #242423;
  font-size: 0.96rem;
  font-weight: 500;
}

.vertx-site-header__section {
  color: var(--vx-muted);
  font-size: 0.86rem;
  white-space: nowrap;
}

@media screen and (min-width: 1280px) {
  body.toc2 {
    padding-left: 20rem;
  }

  #toc.toc2 {
    width: 18.5rem;
  }
}

@media screen and (max-width: 900px) {
  body.toc2 {
    padding-left: 0;
  }

  #toc.toc2 {
    position: static;
    width: auto;
    height: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    border-right: 0;
    border-top: 1px solid var(--vx-border);
    border-bottom: 1px solid var(--vx-border);
    margin: 0;
  }

  #header,
  #content,
  #footer {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .vertx-site-header__section {
    display: none;
  }
}