.code-example {
  --border: 1px solid var(--color-border-primary);
  overflow: hidden;
  border: var(--border);
  border-radius: 0.25rem;
}.code-example .example-header {
    display: flex;

    align-items: center;

    min-height: 3.1rem;

    padding: 0.5rem 1rem;

    line-height: var(--font-line-ui);

    border-bottom: var(--border);
  }:is(.code-example .example-header) .language-name {
      text-transform: uppercase;
    }.code-example pre {
    display: flex;

    margin: 0;

    white-space: pre-wrap;

    background-color: var(--color-background-secondary);
  }:is(.code-example pre) code {
      flex-grow: 1;
      flex-shrink: 1;

      padding: 1rem;

      overflow: auto;

      font-family: var(--font-family-code);

      background-color: transparent;
    }.hidden:is(.code-example pre),[class*="interactive-example"]:is(.code-example pre) {
      display: none;
    }:is(.example-good:is(.code-example pre),.example-bad:is(.code-example pre))::after {
        display: inline-block;

        flex-shrink: 0;

        width: var(--font-size-medium);
        height: var(--font-size-medium);

        margin: 1.255rem 1rem;

        content: "";

        mask-size: cover;
      }.example-good:is(.code-example pre) {
      background-color: var(--color-background-green);
    }.example-good:is(.code-example pre)::after {
        background-color: var(--color-text-green);
        mask-image: url(//web-static.nodejs.cn/static/client/circle-check.205f48f66c3c9d17.svg);
      }.example-bad:is(.code-example pre) {
      background-color: var(--color-background-red);
    }.example-bad:is(.code-example pre)::after {
        background-color: var(--color-text-red);
        mask-image: url(//web-static.nodejs.cn/static/client/circle-x.4b1c3fa0511867e7.svg);
      }.code-example:has(.hidden,[class*="interactive-example"]) {
    /* TODO: we might want to fix this in rari */
    display: none;
  }.code-example iframe,.code-example mdn-play-runner {
    box-sizing: content-box;
    display: block;

    padding: 1rem;

    border: none;
  }

/* Tutorial nav. */
.prev-next {
  display: flex;

  flex-wrap: nowrap;

  gap: 1rem;
  justify-content: space-between;

  width: 100%;

  padding: 0.5rem;
  margin: 0;

  list-style: none;

  border: 1px solid var(--color-border-primary);
  border-width: 1px 0;
}
.prev-next a {
    color: var(--color-link-normal) !important;
    text-wrap: balance;
  }
:is(.prev-next a):visited {
      color: var(--color-link-visited) !important;
    }
@media (width <= 426px) {
.prev-next {
    display: grid;
    grid-template-areas:
      "title title"
      "prev next";
}

    .prev-next li.menu {
      grid-area: title;
      justify-self: center;
    }

    .prev-next li.prev {
      grid-area: prev;
      justify-self: start;
    }

    .prev-next li.next {
      grid-area: next;
      justify-self: end;
    }
  }
.prev-next .prev a,.prev-next .next a {
    display: flex;
    gap: 0.25rem;
    align-items: center;
  }
.prev-next li {
    display: flex;

    flex-wrap: nowrap;

    place-items: center;

    background: none;
  }
:is(.prev-next li) .button {
      color: inherit;
      background-color: inherit;
      border: inherit;
    }
:is(:is(.prev-next li) .button):hover {
        -webkit-text-decoration: underline;
        text-decoration: underline;
      }
.prev:is(.prev-next li) a::before,.next:is(.prev-next li) a::after {
      display: inline-block;

      width: 1em;
      height: 1em;

      vertical-align: middle;

      content: "";

      background-color: currentcolor;

      mask-size: cover;
    }
.prev:is(.prev-next li) {
      margin-right: auto;
    }
.prev:is(.prev-next li) a::before {
        mask-image: url(//web-static.nodejs.cn/static/client/arrow-left.29a44bc5a550fe38.svg);
      }
.prev:is(.prev-next li) ~ .menu:is(.prev-next li) {
      margin-right: auto;
      margin-left: auto;
      text-align: center;
    }
.next:is(.prev-next li) {
      margin-left: auto;
    }
.next:is(.prev-next li) a::after {
        mask-image: url(//web-static.nodejs.cn/static/client/arrow-right.648145f00e77b7f0.svg);
      }

.notecard,
.callout {
  position: relative;

  padding-block: 1px;
  padding-inline: 1em;
  padding-inline-start: 3em;
  margin-block: 1em;

  color: var(--color-text-primary);

  background-color: var(--color-background-secondary);
  border-inline-start: 2px solid
    var(--accent-color, var(--color-text-secondary));
  border-radius: 0.25em;
}.note:is(.notecard,.callout),.secure:is(.notecard,.callout),.experimental:is(.notecard,.callout) {
    background-color: var(--color-background-blue);
    --accent-color: var(--color-text-blue);
  }.warning:is(.notecard,.callout),.deprecated:is(.notecard,.callout),.nonstandard:is(.notecard,.callout) {
    background-color: var(--color-background-red);
    --accent-color: var(--color-text-red);
  }.tip:is(.notecard,.callout) {
    background-color: var(--color-background-green);
    --accent-color: var(--color-text-green);
  }:is(.deprecated:is(.notecard,.callout),.experimental:is(.notecard,.callout),.nonstandard:is(.notecard,.callout),.note:is(.notecard,.callout),.secure:is(.notecard,.callout),.tip:is(.notecard,.callout),.warning:is(.notecard,.callout),.worker:is(.notecard,.callout))::before {
      position: absolute;
      top: 1.45em;
      left: 1em;

      display: block;

      width: 1em;
      height: 1em;

      content: "";

      background-color: var(--accent-color, var(--color-text-secondary));

      mask-size: cover;
    }.deprecated:is(.notecard,.callout)::before {
    /* e.g. Window: blur() method */
    mask-image: url(//web-static.nodejs.cn/static/client/trash-2.73b28bc66fb8543c.svg);
  }.experimental:is(.notecard,.callout)::before {
    /* e.g. Barcode Detection API */
    mask-image: url(//web-static.nodejs.cn/static/client/flask-conical.c16b3d71f14f31d1.svg);
  }.nonstandard:is(.notecard,.callout)::before {
    /* e.g. Document: caretRangeFromPoint() method */
    mask-image: url(//web-static.nodejs.cn/static/client/triangle-alert.cff4c57ccef57da3.svg);
  }.note:is(.notecard,.callout)::before {
    /* e.g. Barcode Detection API */
    mask-image: url(//web-static.nodejs.cn/static/client/info.d40b80f84482feba.svg);
  }.secure:is(.notecard,.callout)::before {
    /* e.g. Barcode Detection API */
    mask-image: url(//web-static.nodejs.cn/static/client/lock.4befe79c52ccec2a.svg);
  }.tip:is(.notecard,.callout)::before {
    /* (Not used in content yet) */
    mask-image: url(//web-static.nodejs.cn/static/client/lightbulb.f54f9e803373ffd2.svg);
  }.warning:is(.notecard,.callout)::before {
    /* e.g. Navigator: scheduling property */
    mask-image: url(//web-static.nodejs.cn/static/client/triangle-alert.cff4c57ccef57da3.svg);
  }.worker:is(.notecard,.callout)::before {
    /* e.g. Worker: Worker() constructor (needs rari change) */
    mask-image: url(//web-static.nodejs.cn/static/client/cog.f23af856fab34421.svg);
  }


  :is(.code-example,.css-formal-syntax) .token.comment,:is(.code-example,.css-formal-syntax) .token.prolog,:is(.code-example,.css-formal-syntax) .token.doctype,:is(.code-example,.css-formal-syntax) .token.cdata {
    --csstools-light-dark-toggle-48fa44be-0: var(--csstools-color-scheme--light) #b3b3b3;
    color: var(--csstools-light-dark-toggle-48fa44be-0, #51565d);
    color: light-dark(#51565d, #b3b3b3);
  }:is(.code-example,.css-formal-syntax) .token.punctuation {
    --csstools-light-dark-toggle-48fa44be-1: var(--csstools-color-scheme--light) #b3b3b3;
    color: var(--csstools-light-dark-toggle-48fa44be-1, #51565d);
    color: light-dark(#51565d, #b3b3b3);
  }:is(.code-example,.css-formal-syntax) .token.attr-name,:is(.code-example,.css-formal-syntax) .token.builtin,:is(.code-example,.css-formal-syntax) .token.inserted,:is(.code-example,.css-formal-syntax) .token.selector,:is(.code-example,.css-formal-syntax) .token.property,:is(.code-example,.css-formal-syntax) .token.class-name,:is(.code-example,.css-formal-syntax) .token.function {
    --csstools-light-dark-toggle-48fa44be-2: var(--csstools-color-scheme--light) #ff97a0;
    color: var(--csstools-light-dark-toggle-48fa44be-2, #d30038);
    color: light-dark(#d30038, #ff97a0);
  }:is(.code-example,.css-formal-syntax) .token.atrule,:is(.code-example,.css-formal-syntax) .token.attr-value {
    --csstools-light-dark-toggle-48fa44be-3: var(--csstools-color-scheme--light) #00d061;
    color: var(--csstools-light-dark-toggle-48fa44be-3, #007936);
    color: light-dark(#007936, #00d061);
  }:is(.code-example,.css-formal-syntax) .token.keyword {
    --csstools-light-dark-toggle-48fa44be-4: var(--csstools-color-scheme--light) #c1cff1;
    color: var(--csstools-light-dark-toggle-48fa44be-4, #0069c2);
    color: light-dark(#0069c2, #c1cff1);
  }:is(.code-example,.css-formal-syntax) .token.tag,:is(.code-example,.css-formal-syntax) .token.char,:is(.code-example,.css-formal-syntax) .token.string,:is(.code-example,.css-formal-syntax) .token.boolean,:is(.code-example,.css-formal-syntax) .token.number,:is(.code-example,.css-formal-syntax) .token.constant,:is(.code-example,.css-formal-syntax) .token.symbol,:is(.code-example,.css-formal-syntax) .token.deleted {
    --csstools-light-dark-toggle-48fa44be-5: var(--csstools-color-scheme--light) #00d061;
    color: var(--csstools-light-dark-toggle-48fa44be-5, #007936);
    color: light-dark(#007936, #00d061);
  }:is(.code-example,.css-formal-syntax) .token.selector,:is(.code-example,.css-formal-syntax) .token.builtin,:is(.code-example,.css-formal-syntax) .token.template-string > .token.string,:is(.code-example,.css-formal-syntax) .token.inserted {
    --csstools-light-dark-toggle-48fa44be-6: var(--csstools-color-scheme--light) #bea5ff;
    color: var(--csstools-light-dark-toggle-48fa44be-6, #872bff);
    color: light-dark(#872bff, #bea5ff);
  }:is(.code-example,.css-formal-syntax) .token.important,:is(.code-example,.css-formal-syntax) .token.bold {
    font-weight: bold;
  }:is(.code-example,.css-formal-syntax) .token.italic {
    font-style: italic;
  }:is(.code-example,.css-formal-syntax) .token.entity {
    cursor: help;
  }


  :is(.left-sidebar,.content-section) .icon.icon-baseline {
    display: none;
  }

.content-section {
  line-height: var(--font-line-content);
}

.content-section :target {
    scroll-margin-top: var(--sticky-header-height);
  }

.content-section h2,.content-section h3,.content-section h4,.content-section h5,.content-section h6 {
    margin: 1rem 0 0;
    font-weight: var(--font-weight-normal);
    line-height: var(--font-line-header);
  }

:is(.content-section h2,.content-section h3,.content-section h4,.content-section h5,.content-section h6) code {
      padding: 0 0.125em;
    }

.content-section h2 {
    font-size: var(--font-size-larger);
  }

.content-section h3 {
    font-size: var(--font-size-large);
  }

.content-section h4 {
    font-size: var(--font-size-medium);
  }

.content-section h5,.content-section h6 {
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-bold);
  }

:is(.content-section a):visited {
      color: var(--color-link-visited);
    }

/* Regular links */

:is(.content-section a):not([href^="#"]) {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

:is(.content-section a):not([href^="#"]):hover {
        -webkit-text-decoration: none;
        text-decoration: none;
      }

/* Anchor links */

[href^="#"]:is(.content-section a) {
      -webkit-text-decoration: none;
      text-decoration: none;
    }

[href^="#"]:is(.content-section a):hover {
        -webkit-text-decoration: underline;
        text-decoration: underline;
      }

.content-section blockquote {
    margin-inline: 0;
    color: var(--color-text-secondary);
    border-inline-start: 0.25rem solid var(--color-border-primary);
  }

:is(.content-section blockquote)  > p {
      padding: 1rem 2rem;
    }

.content-section pre,.content-section code {
    font-family: var(--font-family-code);
    background-color: var(--color-background-secondary);
  }

.content-section pre {
    white-space: pre-wrap;
  }

.content-section pre:not(.code-example pre) {
    padding: 1rem;

    overflow: auto;

    border: 1px solid var(--color-border-primary);
    border-radius: 0.25rem;
  }

.css-formal-syntax:is(.content-section pre:not(.code-example pre)) {
      margin-bottom: 0;

      text-wrap: wrap;

      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

.css-formal-syntax:is(.content-section pre:not(.code-example pre))  ~ footer {
        padding: 0.5rem 1rem;
        margin-bottom: 1rem;

        border: 1px solid var(--color-border-primary);
        border-top: 0;
        border-bottom-right-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
      }

.example-good:is(.content-section pre:not(.code-example pre)),.example-bad:is(.content-section pre:not(.code-example pre)) {
      display: flex;
      justify-content: space-between;
    }

:is(.example-good:is(.content-section pre:not(.code-example pre)),.example-bad:is(.content-section pre:not(.code-example pre)))::after {
        display: inline-block;

        flex-shrink: 0;

        width: var(--font-size-medium);
        height: var(--font-size-medium);

        content: "";

        mask-size: cover;
      }

.example-good:is(.content-section pre:not(.code-example pre)) {
      background-color: var(--color-background-green);
    }

.example-good:is(.content-section pre:not(.code-example pre))::after {
        background-color: var(--color-text-green);
        mask-image: url(//web-static.nodejs.cn/static/client/circle-check.205f48f66c3c9d17.svg);
      }

.example-bad:is(.content-section pre:not(.code-example pre)) {
      background-color: var(--color-background-red);
    }

.example-bad:is(.content-section pre:not(.code-example pre))::after {
        background-color: var(--color-text-red);
        mask-image: url(//web-static.nodejs.cn/static/client/circle-x.4b1c3fa0511867e7.svg);
      }

.content-section code {
    padding: 0.125em 0.25em;
    border-radius: var(--radius-normal);
  }

.content-section kbd {
    padding: 0.0625em 0.125em;

    font-family: var(--font-family-code);

    color: var(--color-text-secondary);

    background-color: var(--color-background-primary);
    border: 1px solid var(--color-border-primary);
    border-bottom-width: 2px;
    border-radius: var(--radius-normal);
  }

.content-section img {
    display: block;

    margin: 2rem auto;

    background-color: var(--color-white);
    border: 1px solid var(--color-border-primary);
    border-radius: 0.25rem;
  }

.content-section iframe {
    border: 1px solid var(--color-border-primary);
    border-radius: 0.25rem;
  }

.content-section table {
    width: 100%;
    border-collapse: collapse;
  }

:is(.content-section table) tr {
      background-color: var(--color-background-primary);
    }

:is(.content-section table) thead tr,:is(.content-section table) tr:nth-of-type(2n) {
      background-color: var(--color-background-page);
    }

:is(.content-section table) th,:is(.content-section table) td {
      padding: 0.5rem 0.75rem;
      border: 1px solid var(--color-border-primary);
    }

:is(.content-section table) th {
      font-weight: var(--font-weight-bold);
      text-align: left;
    }

.properties:is(.content-section table) th,.properties:is(.content-section table) td {
        border-width: 1px 0;
      }

.properties:is(.content-section table) th {
        min-width: 25%;
        font-weight: var(--font-weight-bold);
        background-color: transparent;
      }

.content-section .table-container {
    margin: 1rem 0;
  }

.content-section .code-example,.content-section mdn-code-example,.content-section mdn-live-sample-result {
    margin: 1rem 0;
  }

:is(.content-section .code-example,.content-section mdn-code-example,.content-section mdn-live-sample-result) + :is(.content-section .code-example,.content-section mdn-code-example,.content-section mdn-live-sample-result) {
      margin-top: 1.5rem;
    }

.content-section interactive-example {
    display: block;
    height: 375px;
    margin: 1rem 0;
  }

[name^="JavaScript Demo:" i]:is(.content-section interactive-example) {
      height: 444px;
    }

[height="shorter"]:is(.content-section interactive-example) {
      height: 364px;
    }

[height="taller"]:is(.content-section interactive-example) {
      height: 654px;
    }

[height="tabbed-shorter"]:is(.content-section interactive-example) {
      height: 351px;
      margin-top: 1.5rem;
    }

[height="tabbed-standard"]:is(.content-section interactive-example) {
      height: 421px;
    }

[height="tabbed-taller"]:is(.content-section interactive-example) {
      height: 631px;
    }

@media (width <= 992px) {

.content-section interactive-example {
      height: 675px;
  }

      [name^="JavaScript Demo:" i]:is(.content-section interactive-example) {
        height: 513px;
      }

      [height="shorter"]:is(.content-section interactive-example) {
        height: 433px;
      }

      [height="taller"]:is(.content-section interactive-example) {
        height: 725px;
      }

      [height="tabbed-shorter"]:is(.content-section interactive-example) {
        height: 487px;
      }

      [height="tabbed-standard"]:is(.content-section interactive-example) {
        height: 548px;
      }

      [height="tabbed-taller"]:is(.content-section interactive-example) {
        height: 774px;
      }
    }

/* Definition list */

:is(.content-section dl) dl {
      padding-left: 1rem;
      border-left: 1px solid var(--color-border-primary);
    }

:is(.content-section dl) dd {
      margin-left: 1rem;

      /* Move description closer to term. */
    }

:is(:is(.content-section dl) dd) p:first-child {
        margin-top: 0.5rem;
      }

:is(.content-section dl) ul {
      margin: 1rem 0 2rem;
    }

:is(.content-section dl) dt a[href^="#"] {
      color: inherit;
    }

:is(:is(.content-section dl) dt a[href^="#"]):hover::before {
        position: absolute;

        margin-top: 0.3em;
        margin-left: -0.9em;

        font-size: var(--font-size-small);

        color: var(--color-text-secondary);

        content: "#";
      }

:is(.content-section ul.specifications-list) li:has(details) {
      margin-left: -1.25rem;
      list-style: none;
    }

:is(.content-section ul.specifications-list) details {
      width: 100%;
    }

[open]:is(:is(.content-section ul.specifications-list) details)  > summary {
          margin-bottom: 0.5rem;
        }

:is([open]:is(:is(.content-section ul.specifications-list) details) > summary)::before {
            transform: rotate(90deg);
          }

:is(:is(.content-section ul.specifications-list) details) summary {
        display: flex;
        align-items: center;
        cursor: pointer;
      }

:is(:is(:is(.content-section ul.specifications-list) details) summary)::before {
          display: inline-block;

          flex-shrink: 0;

          width: 1rem;
          height: 1rem;

          margin: 0.125rem;

          content: "";

          background-color: currentcolor;

          mask-image: url(//web-static.nodejs.cn/static/client/chevron-right.a81fc439dd5e4839.svg);
          mask-size: cover;
        }

:is(:is(:is(.content-section ul.specifications-list) details) summary):hover {
          background-color: var(--color-background-secondary);
        }

:is(:is(:is(.content-section ul.specifications-list) details) summary):hover:has(a:hover) {
            /* Don't highlight, as link click doesn't toggle. */
            background-color: unset;
          }

/* Alphabetical/grouped indexes (rari `CSS_Ref`, `ListGroups`, `APIListAlpha`, `css_ref_list`) */

:is(.content-section .index) ul {
      columns: 18rem;
      column-gap: 2rem;
    }

:is(.content-section .index) li {
      page-break-inside: avoid;
      break-inside: avoid;
    }

/* Article footer */

.content-section.article-footer {
    margin: 2rem 0;
  }


/*# sourceMappingURL=styles-content-section.css.map*/