code[class*="language-"], pre[class*="language-"] {
  color: #000;
  text-shadow: 0 1px #fff;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  tab-size: 4;
  -webkit-hyphens: none;
  hyphens: none;
  background: none;
  font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
  font-size: 1em;
  line-height: 1.5;
}

code[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
}

code[class*="language-"]::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
}

pre[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
}

pre[class*="language-"]::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
}

code[class*="language-"] ::selection {
  text-shadow: none;
  background: #b3d4fc;
}

code[class*="language-"]::selection {
  text-shadow: none;
  background: #b3d4fc;
}

pre[class*="language-"] ::selection {
  text-shadow: none;
  background: #b3d4fc;
}

pre[class*="language-"]::selection {
  text-shadow: none;
  background: #b3d4fc;
}

@media print {
  code[class*="language-"], pre[class*="language-"] {
    text-shadow: none;
  }
}

pre[class*="language-"] {
  margin: .5em 0;
  padding: 1em;
  overflow: auto;
}

:not(pre) > code[class*="language-"], pre[class*="language-"] {
  background: #f5f2f0;
}

:not(pre) > code[class*="language-"] {
  white-space: normal;
  border-radius: .3em;
  padding: .1em;
}

.token.cdata, .token.comment, .token.doctype, .token.prolog {
  color: #708090;
}

.token.punctuation {
  color: #999;
}

.token.namespace {
  opacity: .7;
}

.token.boolean, .token.constant, .token.deleted, .token.number, .token.property, .token.symbol, .token.tag {
  color: #905;
}

.token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string {
  color: #690;
}

.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url {
  color: #9a6e3a;
  background: #ffffff80;
}

.token.atrule, .token.attr-value, .token.keyword {
  color: #07a;
}

.token.class-name, .token.function {
  color: #dd4a68;
}

.token.important, .token.regex, .token.variable {
  color: #e90;
}

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

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

.token.entity {
  cursor: help;
}
:root {
  --demo-page-background: #fffdf9;
  --demo-page-foreground: #171412;
  --demo-link-color: #005f73;
  --demo-code-background: #f5f2f0;
  --demo-code-foreground: #171412;
  --demo-code-selection: #b3d4fc;
  --demo-focus-color: #005f73;
  --demo-token-comment: #4a525a;
  --demo-token-punctuation: #3f3f3f;
  --demo-token-namespace: #4a525a;
  --demo-token-constant: #7a003c;
  --demo-token-string: #1b5e20;
  --demo-token-operator: #7c2d12;
  --demo-token-keyword: #005a7a;
  --demo-token-function: #8a1c4a;
  --demo-token-important: #7a3e00;
}

body {
  max-width: 40rem;
  color: var(--demo-page-foreground);
  background-color: var(--demo-page-background);
  margin: 0 auto;
  font-family: Gill Sans, Gill Sans MT, Calibri, Trebuchet MS, sans-serif;
}

main {
  max-width: 100%;
}

h1 {
  font-size: 2rem;
  line-height: 1.2;
}

a {
  color: var(--demo-link-color);
}

button {
  cursor: pointer;
}

code[class*="language-"], pre[class*="language-"] {
  color: var(--demo-code-foreground);
  background: var(--demo-code-background);
  text-shadow: none;
}

code[class*="language-"]::selection {
  color: var(--demo-code-foreground);
  background-color: var(--demo-code-selection);
}

pre[class*="language-"]::selection {
  color: var(--demo-code-foreground);
  background-color: var(--demo-code-selection);
}

code[class*="language-"] ::selection {
  color: var(--demo-code-foreground);
  background-color: var(--demo-code-selection);
}

pre[class*="language-"] ::selection {
  color: var(--demo-code-foreground);
  background-color: var(--demo-code-selection);
}

code-block .token.comment, code-block .token.cdata, code-block .token.doctype, code-block .token.prolog {
  color: var(--demo-token-comment);
}

code-block .token.punctuation {
  color: var(--demo-token-punctuation);
}

code-block .token.namespace {
  color: var(--demo-token-namespace);
  opacity: 1;
}

code-block .token.boolean, code-block .token.constant, code-block .token.deleted, code-block .token.number, code-block .token.property, code-block .token.symbol, code-block .token.tag {
  color: var(--demo-token-constant);
}

code-block .token.attr-name, code-block .token.builtin, code-block .token.char, code-block .token.inserted, code-block .token.selector, code-block .token.string {
  color: var(--demo-token-string);
}

code-block .token.entity, code-block .token.operator, code-block .token.url {
  color: var(--demo-token-operator);
  background: none;
}

code-block .token.atrule, code-block .token.attr-value, code-block .token.keyword {
  color: var(--demo-token-keyword);
}

code-block .token.class-name, code-block .token.function {
  color: var(--demo-token-function);
}

code-block .token.important, code-block .token.regex, code-block .token.variable {
  color: var(--demo-token-important);
}

code-block .code-block-controls button:focus-visible {
  outline-color: var(--demo-focus-color);
}
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.visually-hidden:not(:focus, :active) {
  clip-path: inset(100%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}
:root {
  --code-block-copy-space: 4rem;
  --code-block-copy-button-color: currentcolor;
  --code-block-copy-button-success-color: currentcolor;
  --code-block-copy-button-hint-background: CanvasText;
  --code-block-copy-button-hint-color: Canvas;
  --code-block-copy-button-focus-color: currentcolor;
}

.visually-hidden:where(:not(:focus-within, :active)) {
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  overflow: hidden !important;
}

code-block {
  box-sizing: border-box;
  max-width: 100%;
  display: block;
}

code-block .code-block-inner {
  min-width: 0;
  max-width: 100%;
  position: relative;
}

code-block .code-block-inner pre {
  box-sizing: border-box;
  max-width: 100%;
  padding-top: var(--code-block-copy-space);
  overflow-x: auto;
}

code-block .code-block-inner pre:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  padding-right: var(--code-block-copy-space);
}

code-block .code-block-inner pre:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  padding-left: var(--code-block-copy-space);
}

code-block .code-block-inner pre:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  padding-left: var(--code-block-copy-space);
}

code-block .code-block-controls {
  position: absolute;
  top: 1rem;
}

code-block .code-block-controls:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 1rem;
}

code-block .code-block-controls:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 1rem;
}

code-block .code-block-controls:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 1rem;
}

code-block copy-button {
  height: 44px;
  min-height: 44px;
  width: 44px;
  min-width: 44px;
  color: var(--code-block-copy-button-color);
  display: inline-block;
  position: relative;
}

code-block copy-button .copy-wrapper, code-block copy-button .success-wrapper {
  height: 100%;
  width: 100%;
  display: inline-block;
}

code-block copy-button .copy-wrapper {
  fill: var(--code-block-copy-button-color);
}

code-block copy-button .success-svg {
  fill: var(--code-block-copy-button-success-color);
}

code-block .code-block-controls button {
  height: 100%;
  min-height: 44px;
  width: 100%;
  min-width: 44px;
  color: inherit;
  cursor: pointer;
  background-color: #0000;
  border: 0;
  padding: 0;
  display: block;
  position: relative;
}

code-block .code-block-controls button:focus-visible {
  outline: 2px solid var(--code-block-copy-button-focus-color);
  outline-offset: 2px;
}

code-block copy-button .copy-hint {
  inset: unset;
  background: var(--code-block-copy-button-hint-background);
  color: var(--code-block-copy-button-hint-color);
  opacity: 0;
  transition: opacity .15s ease-in-out,
        display .15s allow-discrete;
  white-space: nowrap;
  border: 0;
  margin: 0 0 4px;
  padding: .25rem .5rem;
  font-size: .75rem;
  display: none;
  position: absolute;
  bottom: 100%;
  transform: translateX(-50%);
}

code-block copy-button .copy-hint:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 50%;
}

code-block copy-button .copy-hint:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 50%;
}

code-block copy-button .copy-hint:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 50%;
}

code-block copy-button [class~="copy-hint--visible"] {
  opacity: 1;
  display: block;
}

code-block copy-button .copy-hint:popover-open {
  opacity: 1;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  code-block copy-button .copy-hint {
    transition: none;
  }
}