/*
  Badge legacy.

  To be removed when rari no longer renders these.

  Note: The selectors are intentionally explicit to discourage use.
*/
/* See https://github.com/mdn/rari/blob/5a2ead64bb8d4f46f9c548b942072838fb686281/crates/rari-doc/src/templ/templs/inline_labels.rs#L16-L21 */
.badge.inline.optional,.badge.inline.readonly,.badge.inline.secure {
    padding: 0.25em 0.5em;

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

    vertical-align: text-top;

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

    white-space: nowrap;

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

mdn-button {
  display: inline-flex;
  vertical-align: middle;
}

html[data-theme="light"] {
  --csstools-color-scheme--light: initial;
  color-scheme: light;
}

html[data-theme="dark"] {
  --csstools-color-scheme--light:  ;
  color-scheme: dark;
}

/* Border */

:root {
  --csstools-light-dark-toggle-325475f9-0: var(--csstools-color-scheme--light) var(--color-gray-40);
  --color-border-primary: var(--csstools-light-dark-toggle-325475f9-0, var(--color-gray-60));
  --csstools-light-dark-toggle-325475f9-1: var(--csstools-color-scheme--light) var(--color-gray-60);
  --color-border-secondary: var(--csstools-light-dark-toggle-325475f9-1, var(--color-gray-40));
  --csstools-light-dark-toggle-325475f9-2: var(--csstools-color-scheme--light) var(--color-blue-80);
  --color-border-active: var(--csstools-light-dark-toggle-325475f9-2, var(--color-blue-50));
}

@supports (color: light-dark(red, red)) {
:root {
  --color-border-primary: light-dark(
    var(--color-gray-60),
    var(--color-gray-40)
  );
  --color-border-secondary: light-dark(
    var(--color-gray-40),
    var(--color-gray-60)
  );
  --color-border-active: light-dark(var(--color-blue-50), var(--color-blue-80));
}
}

@supports not (color: light-dark(tan, tan)) {

:root * {
  --csstools-light-dark-toggle-325475f9-0: var(--csstools-color-scheme--light) var(--color-gray-40);
  --color-border-primary: var(--csstools-light-dark-toggle-325475f9-0, var(--color-gray-60));
  --csstools-light-dark-toggle-325475f9-1: var(--csstools-color-scheme--light) var(--color-gray-60);
  --color-border-secondary: var(--csstools-light-dark-toggle-325475f9-1, var(--color-gray-40));
  --csstools-light-dark-toggle-325475f9-2: var(--csstools-color-scheme--light) var(--color-blue-80);
  --color-border-active: var(--csstools-light-dark-toggle-325475f9-2, var(--color-blue-50));
  }
}

/* Background */

/* Basic */

:root {
  --csstools-light-dark-toggle-6b3612a9-0: var(--csstools-color-scheme--light) var(--color-gray-05);
  --color-background-page: var(--csstools-light-dark-toggle-6b3612a9-0, var(--color-white));
  --csstools-light-dark-toggle-6b3612a9-1: var(--csstools-color-scheme--light) var(--color-gray-10);
  --color-background-primary: var(--csstools-light-dark-toggle-6b3612a9-1, var(--color-gray-90));
  --csstools-light-dark-toggle-6b3612a9-2: var(--csstools-color-scheme--light) var(--color-gray-20);
  --color-background-secondary: var(--csstools-light-dark-toggle-6b3612a9-2, var(--color-gray-80));
}

@supports (color: light-dark(red, red)) {
:root {
  --color-background-page: light-dark(var(--color-white), var(--color-gray-05));
  --color-background-primary: light-dark(
    var(--color-gray-90),
    var(--color-gray-10)
  );
  --color-background-secondary: light-dark(
    var(--color-gray-80),
    var(--color-gray-20)
  );
}
}

@supports not (color: light-dark(tan, tan)) {

:root * {
  --csstools-light-dark-toggle-6b3612a9-0: var(--csstools-color-scheme--light) var(--color-gray-05);
  --color-background-page: var(--csstools-light-dark-toggle-6b3612a9-0, var(--color-white));
  --csstools-light-dark-toggle-6b3612a9-1: var(--csstools-color-scheme--light) var(--color-gray-10);
  --color-background-primary: var(--csstools-light-dark-toggle-6b3612a9-1, var(--color-gray-90));
  --csstools-light-dark-toggle-6b3612a9-2: var(--csstools-color-scheme--light) var(--color-gray-20);
  --color-background-secondary: var(--csstools-light-dark-toggle-6b3612a9-2, var(--color-gray-80));
  }
}

/* Tinted */

:root {
  --csstools-light-dark-toggle-6b3612a9-3: var(--csstools-color-scheme--light) var(--color-red-10);
  --color-background-red: var(--csstools-light-dark-toggle-6b3612a9-3, var(--color-red-90));
  --csstools-light-dark-toggle-6b3612a9-4: var(--csstools-color-scheme--light) var(--color-orange-10);
  --color-background-orange: var(--csstools-light-dark-toggle-6b3612a9-4, var(--color-orange-90));
  --csstools-light-dark-toggle-6b3612a9-5: var(--csstools-color-scheme--light) var(--color-yellow-10);
  --color-background-yellow: var(--csstools-light-dark-toggle-6b3612a9-5, var(--color-yellow-90));
  --csstools-light-dark-toggle-6b3612a9-6: var(--csstools-color-scheme--light) var(--color-green-10);
  --color-background-green: var(--csstools-light-dark-toggle-6b3612a9-6, var(--color-green-90));
  --csstools-light-dark-toggle-6b3612a9-7: var(--csstools-color-scheme--light) var(--color-blue-10);
  --color-background-blue: var(--csstools-light-dark-toggle-6b3612a9-7, var(--color-blue-90));
  --csstools-light-dark-toggle-6b3612a9-8: var(--csstools-color-scheme--light) var(--color-purple-10);
  --color-background-purple: var(--csstools-light-dark-toggle-6b3612a9-8, var(--color-purple-90));
}

@supports (color: light-dark(red, red)) {
:root {
  --color-background-red: light-dark(var(--color-red-90), var(--color-red-10));
  --color-background-orange: light-dark(
    var(--color-orange-90),
    var(--color-orange-10)
  );
  --color-background-yellow: light-dark(
    var(--color-yellow-90),
    var(--color-yellow-10)
  );
  --color-background-green: light-dark(
    var(--color-green-90),
    var(--color-green-10)
  );
  --color-background-blue: light-dark(
    var(--color-blue-90),
    var(--color-blue-10)
  );
  --color-background-purple: light-dark(
    var(--color-purple-90),
    var(--color-purple-10)
  );
}
}

@supports not (color: light-dark(tan, tan)) {

:root * {
  --csstools-light-dark-toggle-6b3612a9-3: var(--csstools-color-scheme--light) var(--color-red-10);
  --color-background-red: var(--csstools-light-dark-toggle-6b3612a9-3, var(--color-red-90));
  --csstools-light-dark-toggle-6b3612a9-4: var(--csstools-color-scheme--light) var(--color-orange-10);
  --color-background-orange: var(--csstools-light-dark-toggle-6b3612a9-4, var(--color-orange-90));
  --csstools-light-dark-toggle-6b3612a9-5: var(--csstools-color-scheme--light) var(--color-yellow-10);
  --color-background-yellow: var(--csstools-light-dark-toggle-6b3612a9-5, var(--color-yellow-90));
  --csstools-light-dark-toggle-6b3612a9-6: var(--csstools-color-scheme--light) var(--color-green-10);
  --color-background-green: var(--csstools-light-dark-toggle-6b3612a9-6, var(--color-green-90));
  --csstools-light-dark-toggle-6b3612a9-7: var(--csstools-color-scheme--light) var(--color-blue-10);
  --color-background-blue: var(--csstools-light-dark-toggle-6b3612a9-7, var(--color-blue-90));
  --csstools-light-dark-toggle-6b3612a9-8: var(--csstools-color-scheme--light) var(--color-purple-10);
  --color-background-purple: var(--csstools-light-dark-toggle-6b3612a9-8, var(--color-purple-90));
  }
}

/* Text */

/* Basic */

:root {
  --csstools-light-dark-toggle-ca19e661-0: var(--csstools-color-scheme--light) var(--color-white);
  --color-text-primary: var(--csstools-light-dark-toggle-ca19e661-0, var(--color-black));
  --csstools-light-dark-toggle-ca19e661-1: var(--csstools-color-scheme--light) var(--color-gray-60);
  --color-text-secondary: var(--csstools-light-dark-toggle-ca19e661-1, var(--color-gray-40));
}

@supports (color: light-dark(red, red)) {
:root {
  --color-text-primary: light-dark(var(--color-black), var(--color-white));
  --color-text-secondary: light-dark(
    var(--color-gray-40),
    var(--color-gray-60)
  );
}
}

@supports not (color: light-dark(tan, tan)) {

:root * {
  --csstools-light-dark-toggle-ca19e661-0: var(--csstools-color-scheme--light) var(--color-white);
  --color-text-primary: var(--csstools-light-dark-toggle-ca19e661-0, var(--color-black));
  --csstools-light-dark-toggle-ca19e661-1: var(--csstools-color-scheme--light) var(--color-gray-60);
  --color-text-secondary: var(--csstools-light-dark-toggle-ca19e661-1, var(--color-gray-40));
  }
}

/* Tinted */

:root {
  --csstools-light-dark-toggle-ca19e661-2: var(--csstools-color-scheme--light) var(--color-red-80);
  --color-text-red: var(--csstools-light-dark-toggle-ca19e661-2, var(--color-red-20));
  --csstools-light-dark-toggle-ca19e661-3: var(--csstools-color-scheme--light) var(--color-orange-80);
  --color-text-orange: var(--csstools-light-dark-toggle-ca19e661-3, var(--color-orange-20));
  --csstools-light-dark-toggle-ca19e661-4: var(--csstools-color-scheme--light) var(--color-yellow-80);
  --color-text-yellow: var(--csstools-light-dark-toggle-ca19e661-4, var(--color-yellow-20));
  --csstools-light-dark-toggle-ca19e661-5: var(--csstools-color-scheme--light) var(--color-green-80);
  --color-text-green: var(--csstools-light-dark-toggle-ca19e661-5, var(--color-green-20));
  --csstools-light-dark-toggle-ca19e661-6: var(--csstools-color-scheme--light) var(--color-blue-80);
  --color-text-blue: var(--csstools-light-dark-toggle-ca19e661-6, var(--color-blue-20));
  --csstools-light-dark-toggle-ca19e661-7: var(--csstools-color-scheme--light) var(--color-purple-80);
  --color-text-purple: var(--csstools-light-dark-toggle-ca19e661-7, var(--color-purple-20));
}

@supports (color: light-dark(red, red)) {
:root {
  --color-text-red: light-dark(var(--color-red-20), var(--color-red-80));
  --color-text-orange: light-dark(
    var(--color-orange-20),
    var(--color-orange-80)
  );
  --color-text-yellow: light-dark(
    var(--color-yellow-20),
    var(--color-yellow-80)
  );
  --color-text-green: light-dark(var(--color-green-20), var(--color-green-80));
  --color-text-blue: light-dark(var(--color-blue-20), var(--color-blue-80));
  --color-text-purple: light-dark(
    var(--color-purple-20),
    var(--color-purple-80)
  );
}
}

@supports not (color: light-dark(tan, tan)) {

:root * {
  --csstools-light-dark-toggle-ca19e661-2: var(--csstools-color-scheme--light) var(--color-red-80);
  --color-text-red: var(--csstools-light-dark-toggle-ca19e661-2, var(--color-red-20));
  --csstools-light-dark-toggle-ca19e661-3: var(--csstools-color-scheme--light) var(--color-orange-80);
  --color-text-orange: var(--csstools-light-dark-toggle-ca19e661-3, var(--color-orange-20));
  --csstools-light-dark-toggle-ca19e661-4: var(--csstools-color-scheme--light) var(--color-yellow-80);
  --color-text-yellow: var(--csstools-light-dark-toggle-ca19e661-4, var(--color-yellow-20));
  --csstools-light-dark-toggle-ca19e661-5: var(--csstools-color-scheme--light) var(--color-green-80);
  --color-text-green: var(--csstools-light-dark-toggle-ca19e661-5, var(--color-green-20));
  --csstools-light-dark-toggle-ca19e661-6: var(--csstools-color-scheme--light) var(--color-blue-80);
  --color-text-blue: var(--csstools-light-dark-toggle-ca19e661-6, var(--color-blue-20));
  --csstools-light-dark-toggle-ca19e661-7: var(--csstools-color-scheme--light) var(--color-purple-80);
  --color-text-purple: var(--csstools-light-dark-toggle-ca19e661-7, var(--color-purple-20));
  }
}

/* Link */

:root {
  --csstools-light-dark-toggle-ec7cf761-0: var(--csstools-color-scheme--light) var(--color-blue-80);
  --color-link-normal: var(--csstools-light-dark-toggle-ec7cf761-0, var(--color-blue-20));
  --csstools-light-dark-toggle-ec7cf761-1: var(--csstools-color-scheme--light) var(--color-purple-80);
  --color-link-visited: var(--csstools-light-dark-toggle-ec7cf761-1, var(--color-purple-20));
}

@supports (color: light-dark(red, red)) {
:root {
  --color-link-normal: light-dark(var(--color-blue-20), var(--color-blue-80));
  --color-link-visited: light-dark(
    var(--color-purple-20),
    var(--color-purple-80)
  );
}
}

@supports not (color: light-dark(tan, tan)) {

:root * {
  --csstools-light-dark-toggle-ec7cf761-0: var(--csstools-color-scheme--light) var(--color-blue-80);
  --color-link-normal: var(--csstools-light-dark-toggle-ec7cf761-0, var(--color-blue-20));
  --csstools-light-dark-toggle-ec7cf761-1: var(--csstools-color-scheme--light) var(--color-purple-80);
  --color-link-visited: var(--csstools-light-dark-toggle-ec7cf761-1, var(--color-purple-20));
  }
}

/* Scrollbar */

:root {
  --color-scrollbar-track: transparent;
  --csstools-light-dark-toggle-386d1d6d-0: var(--csstools-color-scheme--light) var(--color-white-alpha-25);
  --color-scrollbar-thumb: var(--csstools-light-dark-toggle-386d1d6d-0, var(--color-black-alpha-25));
}

@supports (color: light-dark(red, red)) {
:root {
  --color-scrollbar-thumb: light-dark(
    var(--color-black-alpha-25),
    var(--color-white-alpha-25)
  );
}
}

@supports not (color: light-dark(tan, tan)) {

:root * {
  --csstools-light-dark-toggle-386d1d6d-0: var(--csstools-color-scheme--light) var(--color-white-alpha-25);
  --color-scrollbar-thumb: var(--csstools-light-dark-toggle-386d1d6d-0, var(--color-black-alpha-25));
  }
}

:root {
  --color-area-background: var(--color-background-blue);
  --color-area-highlight-border: var(--color-blue-50);
  --color-area-link: var(--color-link-normal);
}

:root[data-current-area="learn"] {
  --color-area-background: var(--color-background-orange);
  --color-area-highlight-border: var(--color-orange-50);
  --csstools-light-dark-toggle-2dbc34e2-0: var(--csstools-color-scheme--light) var(--color-orange-80);
  --color-area-link: var(--csstools-light-dark-toggle-2dbc34e2-0, var(--color-orange-20));
}

@supports (color: light-dark(red, red)) {
:root[data-current-area="learn"] {
  --color-area-link: light-dark(var(--color-orange-20), var(--color-orange-80));
}
}

@supports not (color: light-dark(tan, tan)) {

[data-current-area="learn"]:root * {
  --csstools-light-dark-toggle-2dbc34e2-0: var(--csstools-color-scheme--light) var(--color-orange-80);
  --color-area-link: var(--csstools-light-dark-toggle-2dbc34e2-0, var(--color-orange-20));
  }
}

/* Color */

/* Basic */

:root {
  --color-white: hsl(0deg 0% 100%);
  --color-white-alpha-25: hsl(0deg 0% 100% / 25%);
  --color-white-alpha-75: hsl(0deg 0% 100% / 75%);

  --color-black: hsl(0deg 0% 0%);
  --color-black-alpha-25: hsl(0deg 0% 0% / 25%);
  --color-black-alpha-75: hsl(0deg 0% 0% / 75%);
}

/* Gray */

:root {
  --color-gray-90: hsl(212deg 7% 97%);
  --color-gray-80: hsl(212deg 7% 93.5%);
  --color-gray-60: hsl(212deg 7% 78%);
  --color-gray-40: hsl(212deg 7% 34%);
  --color-gray-20: hsl(212deg 7% 19%);
  --color-gray-10: hsl(212deg 7% 14%);
  --color-gray-05: hsl(212deg 7% 10%);
}

/* Tinted */

:root {
  --color-red-90: hsl(350deg 100% 95%);
  --color-red-80: hsl(350deg 96% 74%);
  --color-red-50: hsl(350deg 84% 45%);
  --color-red-20: hsl(350deg 84% 39%);
  --color-red-10: hsl(350deg 74% 17%);

  --color-orange-90: hsl(25deg 92% 96%);
  --color-orange-80: hsl(25deg 99% 78%);
  --color-orange-50: hsl(25deg 76% 53%);
  --color-orange-20: hsl(25deg 90% 40%);
  --color-orange-10: hsl(25deg 65% 15%);

  --color-yellow-90: hsl(46deg 97% 88%);
  --color-yellow-80: hsl(46deg 90% 80%);
  --color-yellow-50: hsl(46deg 92% 47%);
  --color-yellow-20: hsl(46deg 85% 32%);
  --color-yellow-10: hsl(46deg 90% 18%);

  --color-green-90: hsl(145deg 40% 94%);
  --color-green-80: hsl(145deg 75% 68%);
  --color-green-50: hsl(145deg 90% 30%);
  --color-green-20: hsl(145deg 88% 19%);
  --color-green-10: hsl(145deg 60% 12%);

  --color-blue-90: hsl(212deg 91% 96%);
  --color-blue-80: hsl(212deg 98% 82%);
  --color-blue-50: hsl(212deg 90% 39%);
  --color-blue-20: hsl(212deg 95% 32%);
  --color-blue-10: hsl(212deg 82% 15%);

  --color-purple-90: hsl(267deg 99% 97%);
  --color-purple-80: hsl(267deg 99% 86%);
  --color-purple-50: hsl(267deg 76% 56%);
  --color-purple-20: hsl(267deg 70% 40%);
  --color-purple-10: hsl(267deg 65% 16%);
}

mdn-code-example {
  display: block;
}

mdn-dropdown {
  display: contents;
}mdn-dropdown:not([loaded],:focus-within) [slot="dropdown"] {
      display: none;
    }

.external {
  padding-right: 1.125em;
}.external::after {
    position: absolute;

    width: 1em;
    height: 1em;

    margin-left: 0.125em;

    /*
      Unicode zero width space as `<content replacement>` to expose the alt text in the a11y tree.
      See: https://bugzilla.mozilla.org/show_bug.cgi?id=1976574
    */
    content: "\200b"  " (external)";
    content: "\200b" / " (external)";

    background-color: currentcolor;

    mask-image: url(//web-static.nodejs.cn/static/client/external-link.4f3a2dc8e402cae5.svg);
    mask-size: cover;

    transform: translateY(calc(1lh / 2 - 0.5em));
  }

/* Inter */

@font-feature-values "Inter" {
  @styleset {
    /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
    disambiguation: 2;
  }
}

/* Latin */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-feature-settings: "calt" 0;

  src: url(//web-static.nodejs.cn/static/client/inter-latin.9a3b1bc220d426ef.woff2) format("woff2");
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-feature-settings: "calt" 0;

  src: url(//web-static.nodejs.cn/static/client/inter-italic-latin.fd2627ec16333c05.woff2) format("woff2");
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* Latin extended */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-feature-settings: "calt" 0;

  src: url(//web-static.nodejs.cn/static/client/inter-latin-extended.02dc98170ff37b88.woff2) format("woff2");
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-feature-settings: "calt" 0;

  src: url(//web-static.nodejs.cn/static/client/inter-italic-latin-extended.0a7409875db33654.woff2) format("woff2");
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cyrillic */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-feature-settings: "calt" 0;

  src: url(//web-static.nodejs.cn/static/client/inter-cyrillic.eecfbd79d522303a.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-feature-settings: "calt" 0;

  src: url(//web-static.nodejs.cn/static/client/inter-italic-cyrillic.d153dcd2916c4842.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* JetBrain Mono */

/* Latin */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;

  src: url(//web-static.nodejs.cn/static/client/jetbrains-mono-latin.119994ed445212c7.woff2) format("woff2");
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
  size-adjust: 95%;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 100 800;

  src: url(//web-static.nodejs.cn/static/client/jetbrains-mono-italic-latin.55b330522e5e3ed9.woff2) format("woff2");
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
  size-adjust: 95%;
}

/* Latin extended */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;

  src: url(//web-static.nodejs.cn/static/client/jetbrains-mono-latin-extended.01c891f9c832ce28.woff2) format("woff2");
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  size-adjust: 95%;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 100 800;

  src: url(//web-static.nodejs.cn/static/client/jetbrains-mono-italic-latin-extended.c25d5e1f309ed948.woff2) format("woff2");
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  size-adjust: 95%;
}

/* Cyrillic */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;

  src: url(//web-static.nodejs.cn/static/client/jetbrains-mono-cyrillic.577e793cdf179ae1.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  size-adjust: 95%;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 100 800;

  src: url(//web-static.nodejs.cn/static/client/jetbrains-mono-italic-cyrillic.8d00711fdb1702e0.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  size-adjust: 95%;
}

/* Font size */

:root {
  --font-family-text: "Inter", sans-serif;
  --font-family-code: "JetBrains Mono", monospace;

  --font-line-content: 1.75;
  --font-line-normal: 1.5;
  --font-line-header: 1.25;
  --font-line-ui: 1;

  --font-size-largest: 2.5rem;
  --font-size-larger: 2rem;
  --font-size-large: 1.5rem;
  --font-size-medium: 1.25rem;
  --font-size-normal: 1rem;
  --font-size-small: 0.8rem;

  --font-weight-normal: 400;
  --font-weight-bold: 600;
}

/* Global */

*,
::before,
::after {
  box-sizing: border-box;
}

input,
button,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
}

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

[hidden] {
  display: none !important;
}

/* HTML */

html {
  scroll-behavior: smooth;

  font-family: var(--font-family-text);
  font-size: var(--font-size-normal);
  font-feature-settings: "calt" 0;
  font-variant-alternates: styleset(disambiguation);

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

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

  overflow-wrap: break-word;

  --csstools-color-scheme--light: initial;

  color-scheme: light dark;

  background-color: var(--color-background-page);
}

@media (prefers-color-scheme: dark) {

html {

  --csstools-color-scheme--light:  ;
}
}

@media (prefers-reduced-motion: reduce) {

html {
    scroll-behavior: auto;
}
  }

/*
  Icon legacy.

  To be removed when rari no longer renders these.

  Note: The selectors are intentionally explicit to discourage use.
*/
.icon.icon-deprecated,.icon.icon-experimental,.icon.icon-nonstandard {
    display: inline-block;

    flex-shrink: 0;

    width: 1em;
    height: 1em;

    vertical-align: middle;

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

    mask-size: cover;
  }
/* See https://github.com/mdn/rari/blob/927fac7cb89c7f7e49dd3ff265c3d74ad89d6490/crates/rari-doc/src/templ/templs/badges.rs#L43-L47 */
.icon.icon-deprecated {
    mask-image: url(//web-static.nodejs.cn/static/client/trash-2.73b28bc66fb8543c.svg);
  }
/* See https://github.com/mdn/rari/blob/927fac7cb89c7f7e49dd3ff265c3d74ad89d6490/crates/rari-doc/src/templ/templs/badges.rs#L36-L41 */
.icon.icon-experimental {
    mask-image: url(//web-static.nodejs.cn/static/client/flask-conical.c16b3d71f14f31d1.svg);
  }
/* See https://github.com/mdn/rari/blob/927fac7cb89c7f7e49dd3ff265c3d74ad89d6490/crates/rari-doc/src/templ/templs/badges.rs#L43-L47 */
.icon.icon-nonstandard {
    mask-image: url(//web-static.nodejs.cn/static/client/triangle-alert.cff4c57ccef57da3.svg);
  }

/* --layout-side-padding-min * 2 + (--layout-sidebar-min + --layout-sidebar-gap) * 2 + --layout-content-min */

/* --layout-side-padding-min * 2 + --layout-sidebar-min + --layout-sidebar-gap + --layout-content-min */

:root {
  --layout-side-padding-min: 1rem;
  --layout-side-padding: max(
    var(--layout-side-padding-min),
    calc((100vw - 1440px + (2rem)) / 2)
  );
  --layout-full-width: calc(100vw - 2 * var(--layout-side-padding));

  --layout-sidebar-min: 15rem;
  --layout-sidebar-gap: 2rem;
  --layout-sidebar-padding: 1rem;
  --layout-content-min: 31rem;
  --layout-content-max: 48rem;

  /* prettier-ignore */
  --layout-2-sidebars:
    [full-start left-sidebar-start]
      minmax(var(--layout-sidebar-min), 1fr)
    [left-sidebar-end]
      var(--layout-sidebar-gap)
    [content-start]
      minmax(0, var(--layout-content-max))
    [content-end]
      var(--layout-sidebar-gap)
    [right-sidebar-start]
      minmax(var(--layout-sidebar-min), 1fr)
    [full-end right-sidebar-end];

  /* prettier-ignore */
  --layout-1-sidebar-left:
    [full-start sidebar-start left-sidebar-start]
      minmax(var(--layout-sidebar-min), 1fr)
    [sidebar-end left-sidebar-end]
      var(--layout-sidebar-gap)
    [content-start]
      minmax(0, var(--layout-content-max))
    [full-end content-end]
      minmax(0, 1fr);

  /* prettier-ignore */
  --layout-1-sidebar-right:
      minmax(0, 1fr)
    [full-start content-start]
      minmax(0, var(--layout-content-max))
    [content-end]
      var(--layout-sidebar-gap)
    [sidebar-start right-sidebar-start]
      minmax(var(--layout-sidebar-min), 1fr)
    [full-end sidebar-end right-sidebar-end];

  /* prettier-ignore */
  --layout-no-sidebar:
    [full-start]
      1fr
    [content-start]
      minmax(0, var(--layout-content-max))
    [content-end]
      1fr
    [full-end];

  /* prettier-ignore */
  --layout-no-sidebar-extended:
    [extended-full-start]
      var(--layout-side-padding)
    [full-start]
      1fr
    [content-start]
      minmax(0, var(--layout-content-max))
    [content-end]
      1fr
    [full-end]
      var(--layout-side-padding)
    [extended-full-end];
}

mdn-live-sample-result {
  display: block;
}

html a.only-in-en-us::after {
  display: inline-block;

  margin-left: 0.5ch;

  font-size: 0.7rem;

  vertical-align: super;

  content: "(en-US)";
}

html[lang="de"] a.only-in-en-us::after {
  content: "(engl.)";
}

html[lang="es"] a.only-in-en-us::after {
  content: "(inglés)";
}

html[lang="fr"] a.only-in-en-us::after {
  content: "(angl.)";
}

html[lang="ja"] a.only-in-en-us::after {
  content: "(英語)";
}

html[lang="ko"] a.only-in-en-us::after {
  content: "(영어)";
}

html[lang="ru"] a.only-in-en-us::after {
  content: "(англ.)";
}

html[lang="pt-BR"] a.only-in-en-us::after {
  content: "(inglês)";
}

html[lang="zh-CN"] a.only-in-en-us::after {
  margin-left: unset;
  vertical-align: baseline;
  content: "";
}

html[lang="zh-TW"] a.only-in-en-us::after {
  margin-left: unset;
  vertical-align: baseline;
  content: "（英語）";
}

.page-not-created {
  color: var(--color-text-red);
  text-decoration: underline !important;
  -webkit-text-decoration: underline wavy !important;
          text-decoration: underline wavy !important;
}

@media print {
  * {
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
  }

  :root {
    --csstools-color-scheme--light: initial;
    color-scheme: light;

    /* Force desktop layout for print by overriding layout variables */
    --layout-2-sidebars: minmax(0, 1fr) !important;
    --layout-1-sidebar-left: minmax(0, 1fr) !important;
    --layout-no-sidebar: minmax(0, 1fr) !important;
  }

  body {
    padding: 0;
    margin: 0;

    font-size: 9pt;

    line-height: 1.5;
  }

  .page-layout {
    display: block !important;

    grid-template-rows: none !important;

    height: auto !important;
    min-height: auto !important;
  }

  .page-layout__header {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  /* Reset sticky header height variable */
  :root {
    --sticky-header-height: 0 !important;
  }

  .page-layout__banner,
  .layout__left-sidebar,
  .layout__right-sidebar,
  .footer__socials,
  .footer__links,
  .footer__mozilla,
  .article-footer,
  .navigation__button,
  .navigation__menu,
  .content-section.article-footer,
  mdn-toggle-sidebar,
  mdn-collection-save-button,
  mdn-color-theme,
  mdn-search-button,
  mdn-user-menu,
  mdn-placement-bottom {
    display: none !important;
  }

  .reference-layout {
    grid-template-areas:
      "header"
      "body" !important;
    grid-template-rows: auto !important;
    grid-template-columns: auto !important;
  }

  a {
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
  }

  details.baseline-indicator > *:not(summary) {
    display: none !important;
  }

  details.baseline-indicator[open] > *:not(summary) {
    display: none !important;
  }

  details.baseline-indicator > summary::marker {
    display: none !important;
  }

  .example-container,
  .default-example,
  [class*="example"],
  .interactive,
  .code-example {
    position: static !important;
    float: none !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin-bottom: 1rem !important;

    overflow: visible !important;

    page-break-inside: avoid !important;

    break-inside: avoid !important;
  }

  .footer__mdn {
    row-gap: 0 !important;
  }

  section,
  interactive-example {
    position: static !important;
    clear: both !important;
    display: block !important;
  }

  interactive-example {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  [style*="position: absolute"],
  [style*="position: fixed"] {
    position: static !important;
  }
}

/* Radius */

:root {
  --radius-normal: 0.25rem;
  --radius-full: 9999px;
}

@font-face {
  font-family: "BarlowCondensed-SemiBold";
  font-weight: var(--font-weight-bold);

  src:
    local("BarlowCondensed-SemiBold"),
    url(//web-static.nodejs.cn/static/client/BarlowCondensed-SemiBold.199288b668a15dc1.woff2) format("woff2");
  font-display: block;
}

mdn-scrim-inline {
  display: block;

  width: 100%;
  max-width: 36rem;
  aspect-ratio: 1.5;

  margin: 0.5rem auto;
}

:root {
  scrollbar-gutter: stable;
}.search-modal-open:root {
    overflow: hidden;
  }

.table-container {
  margin: 0;
  overflow-x: auto;
}

:root {
  --top-banner-height: 3.375rem;
  --sticky-header-height: calc(
    var(--navigation-height) + var(--breadcrumbs-bar-height)
  );

  --z-index-sticky-header: 100;
  --z-index-sidebar-mobile: 90;
}

.visually-hidden {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  white-space: nowrap !important;

  border: 0 !important;

  clip-path: inset(50%) !important;
}


/*# sourceMappingURL=styles-global.css.map*/