.doc-toc {
  container: toc/inline-size;
  margin-block-end: 2rem;
}
.doc-toc ol {
  list-style: none;
  padding-inline-start: 0;
  font-size: 0.875rem;
}
.doc-toc ol li {
  margin-block-end: 4px;
}
.doc-toc ol ol {
  margin-block-start: 4px;
}
.doc-toc ol a {
  color: #6E7784;
}
.doc-toc ol a:hover {
  color: #02363D;
}
.doc-toc ol a + * {
  margin-inline-start: 1rem;
}

@container toc (min-width: 300px) {
  ol {
    display: flex;
    flex-wrap: wrap;
  }
  ol > * {
    white-space: nowrap;
  }
  ol > :not(:last-child) {
    margin-right: 0.5rem;
  }
  ol > :not(:last-child):after {
    content: "|";
    padding-left: 0.5rem;
    color: #DCDFE4;
  }
  li ol {
    display: none;
  }
}
.doc-table {
  font-size: 0.875rem;
  border-spacing: 0;
}
.doc-table th {
  text-align: left;
  border-bottom: 1px solid #DCDFE4;
}
.doc-table th, .doc-table td {
  padding: 0.25rem 0.5rem;
}
.doc-table code {
  white-space: nowrap;
}

.doc-nav-menu {
  user-select: none;
  color: #FFFFFF;
}

.doc-nav-menu > li {
  position: relative;
}

.doc-nav-menu a {
  text-decoration: none;
  position: relative;
  display: block;
  padding-block: 0.375rem;
  color: inherit;
  font-weight: 400;
}

.doc-nav-menu a,
.doc-nav-menu summary {
  transition-duration: 0.125s;
  transition-property: color;
  transition-timing-function: ease-in-out;
}

.doc-nav-menu a:hover,
.doc-nav-menu a[aria-current],
.doc-nav-menu summary:hover,
.doc-nav-menu .is-active summary {
  color: #FFFFFF;
}

.doc-nav-menu a[aria-current],
.doc-nav-menu .is-active summary {
  font-weight: 600;
}

.doc-nav-menu > li > a[aria-current]:before,
.doc-nav-menu .is-active summary:before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  position: absolute;
  left: -1.5rem;
  top: 0;
  bottom: 0;
  border-right: 4px solid #176F6F;
}

.doc-nav-menu details > summary {
  cursor: pointer;
  display: flex;
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z' fill='%23176F6F'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 1.125em 1.125em;
  padding-block: 0.375rem;
}

.doc-nav-menu summary::-webkit-details-marker {
  display: none;
}

.doc-nav-menu details[open] > summary {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z' fill='%23176F6F'/%3E%3C/svg%3E");
}

.doc-nav-menu details > [role=list] {
  padding-inline-start: 0.75rem;
  list-style: none;
}

.doc-layout-main {
  overflow-y: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}
.doc-layout-main > [data-grid-area=main],
.doc-layout-main > [data-grid-area=nav] {
  grid-column: 1/-1;
}
.doc-layout-main > [data-grid-area=header] {
  grid-row: 1/2;
  padding: 12px 16px;
  background-color: var(--layout-primary-sidebar-background-color, #02363D);
  color: var(--layout-primary-sidebar-text-color, #FFFFFF);
  border-right: 1px solid transparent;
}
.doc-layout-main > [data-grid-area=header] .pv-text-subdued {
  color: var(--layout-primary-sidebar-subdued-color, #DCDFE4);
}
.doc-layout-main > [data-grid-area=nav],
.doc-layout-main > [data-grid-area=main] {
  grid-row: 2/3;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}
.doc-layout-main > [data-grid-area=nav] {
  display: none;
  z-index: 10;
  background-color: var(--layout-primary-sidebar-background-color, #02363D);
  border-right: 1px solid transparent;
}
.doc-layout-main > [data-grid-area=main] {
  padding: 16px;
}
.doc-layout-main > [data-grid-area=main] .pv-container-md {
  margin-top: 1rem;
}
.doc-layout-main > [data-grid-area=header] button svg:last-of-type {
  display: none;
}

[data-menu] > [data-grid-area=nav] {
  display: block;
}

[data-menu] > [data-grid-area=header] button svg:first-of-type {
  display: none;
}

[data-menu] > [data-grid-area=header] button svg:last-of-type {
  display: block;
}

.doc-logo {
  width: 66px;
  height: auto;
}

.doc-hide-on-small {
  display: none;
}

@media (width >= 768px) {
  .doc-hide-on-large {
    display: none;
  }
  .doc-hide-on-small {
    display: unset;
  }
  .doc-layout-main {
    grid-template-columns: 260px 1fr;
  }
  .doc-layout-main > [data-grid-area=main] {
    grid-row: 1/3;
    grid-column: 2/3;
    padding: 48px;
  }
  .doc-layout-main > [data-grid-area=main] .pv-container-md {
    margin-top: 0;
  }
  .doc-layout-main > [data-grid-area=header] {
    padding: 24px;
  }
  .doc-layout-main > [data-grid-area=header] button {
    display: none;
  }
  .doc-layout-main > [data-grid-area=nav] {
    display: block;
    grid-column: 1/2;
  }
  article > p,
  article > ul {
    font-size: 1.125rem;
  }
  .doc-logo {
    width: 66%;
    height: auto;
  }
}
[data-grid-area=main] {
  container-type: inline-size;
  container-name: layout;
}

.doc-layout-sidebar-right {
  display: grid;
  grid-template-columns: minmax(0, 768px);
  grid-template-areas: "title" "sidebar" "content";
}
.doc-layout-sidebar-right > [data-grid-area=title] {
  grid-area: title;
}
.doc-layout-sidebar-right > [data-grid-area=sidebar] {
  grid-area: sidebar;
}
.doc-layout-sidebar-right > [data-grid-area=content] {
  grid-area: content;
}

@container layout (min-width: 768px) {
  .doc-layout-sidebar-right {
    margin-inline: auto;
    grid-template-columns: minmax(0, 768px) 172px;
    grid-template-rows: auto 1fr;
    gap: 0 2rem;
    grid-template-areas: "title title" "content sidebar";
  }
  .doc-sticky {
    --top: 1rem;
    position: sticky;
    top: var(--top);
  }
}
code[class*=language-],
pre[class*=language-],
style[style*="display: block"] {
  font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
  font-size: 14px;
  line-height: 1.375;
  direction: ltr;
  text-align: left;
  white-space: break-spaces;
  word-spacing: normal;
  word-break: break-word;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  background: #1d262f;
  color: #DCDFE4;
}

pre > code[class*=language-] {
  font-size: 1em;
}

pre[class*=language-]::-moz-selection,
pre[class*=language-] ::-moz-selection,
code[class*=language-]::-moz-selection,
code[class*=language-], ::-moz-selection,
style[style="display: block"]::-moz-selection,
style[style="display: block"] ::-moz-selection {
  text-shadow: none;
}

pre[class*=language-]::selection,
pre[class*=language-] ::selection,
code[class*=language-]::selection,
code[class*=language-] ::selection,
style[style="display: block"]::selection,
style[style="display: block"] ::selection {
  text-shadow: none;
}

/* Code blocks */
pre[class*=language-] {
  padding: 1em 2em 1em 1em;
  border-radius: 2px;
  overflow: auto;
}

/* Inline code */
:not(pre) > code[class*=language-] {
  padding: 0.1em;
  border-radius: 0.3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--color-text-inverse-subdued, #DCDFE4);
}

.token.punctuation {
  color: var(--color-text-inverse-subdued, #DCDFE4);
}

.token.namespace {
  opacity: 0.7;
}

.token.tag,
.token.operator,
.token.number {
  color: #0aa370;
}

.token.property,
.token.function {
  color: var(--color-text-inverse-subdued, #DCDFE4);
}

.token.tag-id,
.token.selector,
.token.atrule-id {
  color: #ebf4ff;
}

code.language-javascript,
.token.attr-name {
  color: #7eb6f6;
}

code.language-css,
code.language-scss,
.token.boolean,
.token.string,
.token.entity,
.token.url,
.language-css .token.string,
.language-scss .token.string,
.style .token.string,
.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit,
.token.statement,
.token.regex,
.token.atrule {
  color: var(--color-text-brand-inverse, #47ebb4);
}

.token.placeholder,
.token.variable {
  color: var(--color-text-brand-inverse, #47ebb4);
}

.token.deleted {
  text-decoration: line-through;
}

.token.inserted {
  border-bottom: 1px dotted #ebf4ff;
  text-decoration: none;
}

.token.italic {
  font-style: italic;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.important {
  color: #7eb6f6;
}

.token.entity {
  cursor: help;
}

pre > code.highlight {
  outline: 0.4em solid #34659d;
  outline-offset: 0.4em;
}

/* overrides color-values for the Line Numbers plugin
 * http://prismjs.com/plugins/line-numbers/
 */
.line-numbers.line-numbers .line-numbers-rows {
  border-right-color: #1f2932;
}

.line-numbers .line-numbers-rows > span:before {
  color: #2c3847;
}

/* overrides color-values for the Line Highlight plugin
* http://prismjs.com/plugins/line-highlight/
*/
.line-highlight.line-highlight {
  background: rgba(10, 163, 112, 0.2);
  background: -webkit-linear-gradient(left, rgba(10, 163, 112, 0.2) 70%, rgba(10, 163, 112, 0));
  background: linear-gradient(to right, rgba(10, 163, 112, 0.2) 70%, rgba(10, 163, 112, 0));
}

.pagefind-ui__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.pagefind-ui__search-input {
  grid-row: 1/1;
  grid-column: 1/1;
  padding: 0.5rem;
  font-size: 16px;
  line-height: 1.5;
  border: 2px solid #DCDFE4;
  border-radius: 2px;
  appearance: none;
  background-color: #FFFFFF;
  width: 100%;
  min-width: fit-content;
  transition-duration: 0.125s;
  transition-property: background-color, border-color, color;
  padding-inline-start: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236E7784' d='m23.6 21.6-5.4-5.4c1.3-1.7 2-3.9 2-6C20.2 4.5 15.7 0 10.1 0S0 4.5 0 10.1s4.5 10.1 10.1 10.1c2.2 0 4.3-.7 6-2l5.4 5.4c.3.2.6.4 1 .4s.7-.2 1-.4c.3-.3.4-.6.4-1 .1-.4 0-.7-.3-1zm-6.8-8.7c-.5 1.3-1.5 2.4-2.7 3.2-1.2.8-2.6 1.2-4 1.2-1.9 0-3.7-.8-5.1-2.1-1.4-1.4-2.1-3.2-2.1-5.1 0-1.4.4-2.8 1.2-4C4.9 4.9 6 4 7.3 3.4c1.3-.5 2.8-.7 4.2-.4s2.7 1 3.7 2 1.7 2.3 2 3.7c.3 1.4.1 2.8-.4 4.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  background-position: top 50% left 0.5rem;
}
.pagefind-ui__search-input:not(:disabled, [data-invalid]):focus-visible, .pagefind-ui__search-input:not(:disabled, [data-invalid]):hover {
  border-color: #176F6F;
  outline: none;
}

.pagefind-ui__search-clear {
  grid-row: 1/1;
  grid-column: 1/1;
  justify-self: end;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  margin-inline-end: 0.5rem;
  margin-block: 0.25rem;
  font-size: 0.75rem;
  color: #6E7784;
}
.pagefind-ui__search-clear:hover {
  color: inherit;
}

.pagefind-ui__message {
  font-weight: 600;
  margin-block-end: 1rem;
}

.pagefind-ui__results {
  list-style: none;
  padding: 0;
  margin-block-end: 1.5rem;
}

.pagefind-ui__result:not(:last-child) {
  margin-block-end: 1.5rem;
}

.pagefind-ui__result-inner > .pagefind-ui__result-title {
  font-size: 1.125rem;
  margin-block-end: 0.5rem;
}

.pagefind-ui__result-nested {
  font-size: 0.875rem;
}
.pagefind-ui__result-nested:not(:last-child) {
  margin-block-end: 0.5rem;
}

.pagefind-ui__button {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-weight: 600;
  font-size: 1rem;
  line-height: 20px;
  padding: 0.75rem 1.25rem;
  border-radius: 2rem;
  transition-duration: 0.125s;
  transition-property: background-color, color;
  background-color: #02363D;
  color: white;
}
.pagefind-ui__button:not(:disabled):hover, .pagefind-ui__button:not(:disabled):focus-visible {
  background-color: #011214;
}
.pagefind-ui__button:not(:disabled):active {
  background-color: #011214;
}

article {
  font-size: 1rem;
  line-height: 1.5;
}

pre, code {
  font-family: monospace;
  font-size: 0.875em;
}

code:not([class]) {
  background-color: var(--color-background-brand-accent, #A8E6E1);
  padding: 3px;
  border-radius: 0.125em;
}

.full-background {
  --bg-color: #D5EEED;
  background-color: var(--bg-color);
  box-shadow: 0 0 0 100vmax var(--bg-color);
  clip-path: inset(0 -100vmax);
}

.doc-article :where(h2, h3) {
  scroll-margin-top: 1rem;
}

.doc-example .pv-nav-container,
.doc-example .pv-org-switch {
  background-color: #02363D;
}

pre.language-html {
  position: relative;
}

.copy-button {
  position: absolute;
  top: 0;
  right: 0;
  height: 32px;
  width: 32px;
  background: #36C5BA;
  color: #FFFFFF;
  font-family: "HK Grotesk", sans-serif;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  border: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' height='16'%3E%3Ctitle%3Ecopy to clipboard%3C/title%3E%3Cpath fill='' d='M192 0c-41.8 0-77.4 26.7-90.5 64H64C28.7 64 0 92.7 0 128V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H282.5C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM112 192H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.copy-button span {
  display: none;
}

.copied {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' height='16'%3E%3Ctitle%3Ecopied!%3C/title%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64H64C28.7 64 0 92.7 0 128V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H282.5C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM305 273L177 401c-9.4 9.4-24.6 9.4-33.9 0L79 337c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L271 239c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E");
}

.doc-anchor {
  color: inherit;
}

.doc-palette {
  border: 1px solid #DCDFE4;
  border-radius: 0.75rem;
  overflow: hidden;
}
.doc-palette > div {
  aspect-ratio: 16/9;
}
.doc-palette dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
}
.doc-palette dt {
  font-weight: 600;
}
.doc-palette dd {
  text-align: right;
}

:where(.doc-example) {
  padding: 1rem;
  background-color: #F8F8FA;
  border: 1px solid #DCDFE4;
  border-radius: 2px;
}

.doc-stack,
.doc-inline,
[class*=doc-inset] {
  border: 2px solid #DCDFE4;
  height: 4rem;
  border-radius: 2px;
  position: relative;
}
.doc-stack:after,
.doc-inline:after,
[class*=doc-inset]:after {
  content: "";
  display: block;
  position: absolute;
}

.doc-inline:after {
  --inline: 1rem;
  width: var(--inline);
  height: calc(100% + 4px);
  background-color: #FAECCC;
  left: calc(100% + 2px);
  top: -2px;
}

.doc-stack:after {
  --stack: 1rem;
  height: var(--stack);
  width: calc(100% + 4px);
  background-color: #FAECCC;
  top: calc(100% + 2px);
  left: -2px;
}

[class*=doc-inset] {
  --inset: 16px;
  background-color: #DEFBE6;
}
[class*=doc-inset]:after {
  inset: var(--inset);
  background-color: #FFFFFF;
}

.doc-icon figcaption {
  white-space: nowrap;
  flex: 1;
}

section > :where(h2):not(:first-child) {
  margin-top: 2rem;
}

.pv-layout-primary .pv-icon-auto {
  margin: 0;
}

:where(h2 a, h3 a) {
  outline-offset: 2px;
}

@media (width <= 768px) {
  .pv-layout-primary {
    grid-template-columns: auto 1fr;
  }
}
.doc-swatch {
  --bg: transparent;
  white-space: nowrap;
}
.doc-swatch:before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: var(--bg);
  margin-right: 3px;
  border: 1px solid black;
  position: relative;
  top: 1px;
}

.pv-icon {
  flex-shrink: 0;
}

.pv-code-sandbox {
  min-height: 500px;
  border: none;
}