avinal.github.io/public/mdn-style.css

@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  html { font-family: 'Inter var', sans-serif; }
}

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

blockquote,
body,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
ol,
p,
ul {
    margin: 0
}

 /* ol,
ul {
    list-style: none;
    padding: 0
}  */

html {
    scroll-behavior: smooth
}

body {
    text-rendering: optimizeSpeed;
    font-family: Inter, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    font-family: var(--font-body);
    font-size: 100%;
    font-size: var(--base-font-size);
    line-height: 1.75;
    line-height: var(--font-content-line-height)
}

a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto
}

a {
    text-decoration: none
}

img,
picture {
     display: block; 
    max-width: 100%
}

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

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    :after,
    :before {
        -webkit-animation-duration: .01ms !important;
        animation-duration: .01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important
    }
}

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

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

.token.attr-name,
.token.builtin,
.token.class-name,
.token.function,
.token.inserted,
.token.property,
.token.selector {
    color: var(--code-token-attribute-name)
}

.token.atrule,
.token.attr-value {
    color: var(--code-token-attribute-value)
}

.token.keyword {
    color: var(--code-token-tag)
}

.token.boolean,
.token.char,
.token.constant,
.token.deleted,
.token.number,
.token.string,
.token.symbol,
.token.tag {
    color: var(--code-token-attribute-value)
}

.token.builtin,
.token.inserted,
.token.selector,
.token.template-string>.token.string {
    color: var(--code-token-selector)
}

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

.token.italic {
    font-style: italic
}

.token.entity {
    cursor: help
}

.notecard {
    --note-background: var(--background-information);
    --note-theme: var(--icon-information);
    background-color: var(--note-background);
    border: 1px solid var(--border-secondary);
    border-left: 4px solid var(--note-theme);
    border-radius: .25rem;
    border-radius: var(--elem-radius);
    box-shadow: var(--shadow-01);
    margin: 1rem 0;
    padding: 1rem 1rem 1rem 3rem;
    position: relative
}

.notecard,
.notecard li,
.notecard p {
    color: var(--text-secondary)
}

.notecard p {
    line-height: 2;
    margin: 0 !important
}

.notecard:before {
    background-color: var(--note-theme);
    content: "";
    display: block;
    height: 1rem;
    left: 1rem;
    /* -webkit-mask-image: url(/static/media/note-info.0eafb6e7738509bce66e.svg); */
    /* mask-image: url(/static/media/note-info.0eafb6e7738509bce66e.svg); */
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 1.5rem;
    width: 1rem
}

.notecard.inline {
    font: var(--type-body-s);
    margin: .5rem;
    padding: .125rem .375rem .125rem 1.5rem
}

.notecard.inline:before {
    display: block;
    height: .8rem;
    left: .2rem;
    top: .1875rem;
    width: .8rem
}

.notecard.warning {
    --note-background: var(--background-warning);
    --note-theme: var(--icon-warning)
}

.notecard.warning:before {
    -webkit-mask-image: url(/static/media/note-warning.d6e4c7b35b5ed187e936.svg);
    mask-image: url(/static/media/note-warning.d6e4c7b35b5ed187e936.svg)
}

.notecard.nonstandard {
    --note-background: var(--background-warning);
    --note-theme: var(--icon-warning)
}

.notecard.nonstandard:before {
    -webkit-mask-image: url(/static/media/nonstandard.d6e4c7b35b5ed187e936.svg);
    mask-image: url(/static/media/nonstandard.d6e4c7b35b5ed187e936.svg)
}

.notecard.error,
.notecard.negative {
    --note-background: var(--background-critical);
    --note-theme: var(--icon-critical)
}

.notecard.error:before,
.notecard.negative:before {
    -webkit-mask-image: url(/static/media/note-deprecated.0d2643f0c417b3670c49.svg);
    mask-image: url(/static/media/note-deprecated.0d2643f0c417b3670c49.svg)
}

.notecard.deprecated {
    --note-background: var(--background-critical);
    --note-theme: var(--icon-critical)
}

.notecard.deprecated:before {
    -webkit-mask-image: url(/static/media/deprecated.eda3b39bb2bd366d4b2b.svg);
    mask-image: url(/static/media/deprecated.eda3b39bb2bd366d4b2b.svg)
}

.notecard.experimental:before {
    -webkit-mask-image: url(/static/media/experimental.2f9e05f53c6dbee7791c.svg);
    mask-image: url(/static/media/experimental.2f9e05f53c6dbee7791c.svg)
}

.notecard.success {
    --note-background: var(--background-success);
    --note-theme: var(--icon-success)
}

.notecard.success:before {
    -webkit-mask-image: url(/static/media/note-info.0eafb6e7738509bce66e.svg);
    mask-image: url(/static/media/note-info.0eafb6e7738509bce66e.svg)
}

.notecard ol,
.notecard ul {
    padding-left: 2rem
}

.notecard p,
.notecard ul {
    padding-bottom: .5rem
}

.notecard p:last-child,
.notecard ul:last-child {
    padding-bottom: 0
}

.notecard:last-of-type {
    margin-bottom: 2rem
}

.notecard:first-of-type {
    margin-top: 2rem
}

.notecard>:first-child {
    margin-top: 0
}

.notecard h1,
.notecard h2,
.notecard h3,
.notecard h4,
.notecard h5,
.notecard h6 {
    color: var(--text-primary);
    font: 1rem;
    font: var(--type-base-font-size-rem);
    margin-bottom: .5rem
}

.main-content .notecard a:not(.button),
.main-content .notecard code {
    color: var(--notecard-link-color)
}

.main-content .notecard a:not(.button):hover,
.main-content .notecard code:hover {
    text-decoration: none
}

.pagination {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding: 1rem 0
}

.mdn-form,
.pagination-label {
    font-size: .833rem;
    font-size: var(--type-smaller-font-size)
}

.mdn-form {
    font-family: Inter, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    font-family: var(--font-body);
    font-weight: 600;
    font-weight: var(--font-body-strong-weight)
}

.mdn-form-item {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding-top: 1rem
}

.mdn-form-item:first-child {
    padding-top: 0
}

.mdn-form-item.is-button-row {
    display: flex;
    justify-content: flex-end
}

.mdn-form-item.is-button-row .button {
    width: auto
}

.mdn-form-item [type=text] {
    background: var(--background-primary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    flex: 1 1 100%;
    font-size: .833rem;
    font-size: var(--type-smaller-font-size);
    min-width: 0;
    padding: .5rem
}

.mdn-form-item [type=text]:focus {
    border: 1px solid var(--button-secondary-border-focus);
    box-shadow: 0 0 0 3px var(--accent-primary-engage);
    box-shadow: var(--focus-effect);
    outline: 0 none
}

.mdn-form-item label {
    width: 100%
}

:root {
    --font-fallback: BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --font-body: Inter, var(--font-fallback);
    --font-heading: Inter, var(--font-fallback);
    --font-code: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    --base-font-size: 100%;
    --base-line-height: 1.2;
    --intermediate-line-height: 1.5;
    --heading-line-height: var(--base-line-height);
    --heading-letter-spacing: -0.031rem;
    --font-content-line-height: 1.75;
    --font-body-strong-weight: 600;
    --type-heading-h1-font-size: 2.488rem;
    --type-heading-h2-font-size: 2.074rem;
    --type-heading-h3-font-size: 1.728rem;
    --type-heading-h4-font-size: 1.44rem;
    --type-heading-h5-font-size: 1.2rem;
    --type-base-font-size-rem: 1rem;
    --type-smaller-font-size: 0.833rem;
    --type-tiny-font-size: 0.694rem;
    --type-heading-h1-font-size-mobile: 1.802rem;
    --type-heading-h2-font-size-mobile: 1.602rem;
    --type-heading-h3-font-size-mobile: 1.424rem;
    --type-heading-h4-font-size-mobile: 1.266rem;
    --type-emphasis-m: var(--font-body-strong-weight) var(--type-smaller-font-size) /1.23 var(--font-body);
    --type-label-s: 600 var(--type-tiny-font-size) /1.2 var(--font-heading);
    --type-heading-h1: 600 var(--type-heading-h1-font-size-mobile) /var(--heading-line-height) var(--font-heading);
    --type-heading-h2: 500 var(--type-heading-h2-font-size-mobile) /var(--heading-line-height) var(--font-heading);
    --type-heading-h3: 300 var(--type-heading-h3-font-size-mobile) /var(--heading-line-height) var(--font-heading);
    --type-heading-h4: 400 var(--type-heading-h4-font-size-mobile) /var(--heading-line-height) var(--font-heading);
    --type-heading-h5: 400 var(--type-heading-h5-font-size) /var(--heading-line-height) var(--font-heading);
    --type-heading-h6: 400 var(--type-base-font-size-rem) /var(--heading-line-height) var(--font-heading);
    --type-article-p: 400 var(--type-base-font-size-rem) /var(--font-content-line-height) var(--font-body);
    --max-width: 1440px;
    --gutter: 1rem;
    --top-navigation-height: 4rem;
    --top-navigation-offset: -4rem;
    --z-index-back: -1;
    --z-index-top: 9999;
    --z-index-a11y: 10000;
    --z-index-mid: 500;
    --z-index-nav-menu: 200;
    --z-index-search-results: 101;
    --z-index-low: 100;
    --z-index-search-results-home: 99;
    --elem-radius: 0.25rem;
    --focus-effect: 0 0 0 3px var(--accent-primary-engage);
    --form-elem-height: 2rem;
    --sticky-header-height: 0;
    --top-nav-height: 4rem;
    --main-document-header-height: 6rem;
    --icon-size: 1rem
}

@media screen and (min-width:769px) {
    :root {
        --type-heading-h1: 600 var(--type-heading-h1-font-size) /var(--heading-line-height) var(--font-heading);
        --type-heading-h2: 500 var(--type-heading-h2-font-size) /var(--heading-line-height) var(--font-heading);
        --type-heading-h3: 300 var(--type-heading-h3-font-size) /var(--heading-line-height) var(--font-heading);
        --type-heading-h4: 400 var(--type-heading-h4-font-size) /var(--heading-line-height) var(--font-heading)
    }
}

:target {
    scroll-margin-top: 0;
    scroll-margin-top: var(--sticky-header-height)
}

body {
    accent-color: var(--accent-primary);
    background-color: var(--background-primary);
    color: var(--text-primary);
    scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg)
}

body.full-screen-overlay {
    overflow: hidden
}

:focus-visible {
    outline-color: var(--accent-primary);
    outline-offset: 1px;
    outline-style: auto
}

main {
    min-height: 80vh
}

.about-container a:link,
.about-container a:visited,
.main-page-content a:link,
.main-page-content a:visited {
    text-decoration: underline
}

.about-container a:focus,
.about-container a:hover,
.main-page-content a:focus,
.main-page-content a:hover {
    text-decoration: none
}

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

.hidden {
    display: none
}

pre {
    word-wrap: break-word;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap
}

a {
    color: var(--text-link)
}

a.external:after {
    background-color: var(--icon-primary);
    content: "";
    display: inline-flex;
    height: 10px;
    margin-left: 4px;
    -webkit-mask-image: url(/static/media/external.ad7e40a95bc765963433.svg);
    mask-image: url(/static/media/external.ad7e40a95bc765963433.svg);
    -webkit-mask-size: cover;
    mask-size: cover;
    width: 10px
}

.expand-this-link:after {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

[type=search]::-ms-clear {
    display: none;
    height: 0;
    width: 0
}

[type=search]::-ms-reveal {
    display: none;
    height: 0;
    width: 0
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration,
[type=search]::-webkit-search-results-button,
[type=search]::-webkit-search-results-decoration {
    display: none
}

u {
    -webkit-text-decoration-color: var(--text-link);
    text-decoration-color: var(--text-link);
    text-decoration-thickness: .15rem;
    text-underline-offset: .1em
}

.plus,
.plus .dark {
    --background-toc-active: var(--plus-accent-background-color);
    --text-link: var(--plus-accent-color);
    --category-color: var(--plus-accent-color);
    --category-color-background: var(--plus-accent-background-color);
    --code-color: var(--plus-code-color);
    --mark-color: var(--plus-mark-color)
}
 
.category-html {
    --background-toc-active: var(--html-accent-background-color);
    --category-color: var(--html-accent-color);
    --category-color-background: var(--html-accent-background-color);
    --mark-color: var(--html-mark-color)
}

.category-css {
    --background-toc-active: var(--css-accent-background-color);
    --category-color: var(--css-accent-color);
    --category-color-background: var(--css-accent-background-color);
    --mark-color: var(--css-mark-color)
}

.category-javascript {
    --background-toc-active: var(--js-accent-background-color);
    --category-color: var(--js-accent-color);
    --category-color-background: var(--js-accent-background-color);
    --mark-color: var(--js-mark-color)
}

.category-http {
    --background-toc-active: var(--http-accent-background-color);
    --category-color: var(--http-accent-color);
    --category-color-background: var(--http-accent-background-color);
    --mark-color: var(--http-mark-color)
}

.category-api {
    --background-toc-active: var(--apis-accent-background-color);
    --category-color: var(--apis-accent-color);
    --category-color-background: var(--apis-accent-background-color);
    --mark-color: var(--apis-mark-color)
}

.category-learn {
    --background-toc-active: var(--learn-accent-background-color);
    --category-color: var(--learn-accent-color);
    --category-color-background: var(--learn-accent-background-color);
    --mark-color: var(--api-mark-color)
} 

 .mify {
    margin-left: .5rem
}

.mify:after {
    content: " ";
    text-decoration: underline;
    -webkit-text-decoration-color: var(--text-link);
    text-decoration-color: var(--text-link);
    text-decoration-thickness: .1em;
    text-underline-offset: .1em
}

.mify:before {
    background-color: var(--text-link);
    content: "";
    display: inline-block;
    height: 1.2em;
    /* -webkit-mask: url(/static/media/m-logo.e19e04547be91a35c8ea.svg) no-repeat 50% 50%;
    mask: url(/static/media/m-logo.e19e04547be91a35c8ea.svg) no-repeat 50% 50%; */
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-transform: translate(-.2em, .2em);
    transform: translate(-.2em, .2em);
    width: 1.2em
}

._ify:after {
    content: " ";
    text-decoration: underline;
    -webkit-text-decoration-color: var(--text-link);
    text-decoration-color: var(--text-link);
    text-decoration-thickness: .1em;
    text-underline-offset: .1em
} 

@media(forced-colors:active) {
    .icon {
        background-color: CanvasText !important
    }
}
 
.homepage {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow-x: clip;
    overflow-y: visible;
    position: relative;
    width: 100%
}

.homepage-hero {
    color: var(--text-primary);
    display: grid;
    grid-template-rows: fit-content(24rem);
    width: 100%
}

.homepage-hero section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    justify-content: center;
    margin: 0 auto;
    max-width: 52rem;
    padding: 0 1rem;
    width: 100%
}

.homepage-hero section h1 {
    font-size: 2.2rem;
    font-weight: 200;
    letter-spacing: -.5px;
    line-height: 120%;
    margin: 0
}

@media screen and (min-width:426px) {
    .homepage-hero section h1 {
        font-size: 2.5rem
    }
}

@media screen and (min-width:769px) {
    .homepage-hero section h1 {
        font-size: 3rem
    }
}

.homepage-hero section h1:after {
    content: " ";
    text-decoration: underline;
    -webkit-text-decoration-color: var(--text-link);
    text-decoration-color: var(--text-link);
    text-decoration-thickness: .15rem;
    text-underline-offset: .1rem
}

.homepage-hero section p {
    font-weight: 300
}

.homepage-hero .homepage-hero-bg {
    --mandala-primary: var(--border-primary);
    background-color: rgba(1, 1, 1, .9);
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
    top: 0;
    width: 100%;
    z-index: -1
}

.homepage-hero .homepage-hero-bg .mandala-translate {
    -webkit-transform: translate(10rem, -8rem) scale(1.2);
    transform: translate(10rem, -8rem) scale(1.2)
}

@media screen and (min-width:426px) {
    .homepage-hero .homepage-hero-bg .mandala-translate {
        -webkit-transform: translate(12rem, -8rem);
        transform: translate(12rem, -8rem)
    }
}

.homepage-hero .homepage-hero-search {
    align-self: center;
    display: flex;
    margin-bottom: 1rem;
    max-height: 4rem;
    max-width: 40rem;
    width: 100%
}

.homepage-hero .homepage-hero-search .search-input-field {
    background-color: rgba(1, 1, 1, .5);
    border-radius: 10rem;
    padding: 2rem
}

.homepage-hero .homepage-hero-search .search-input-field:focus {
    border-color: var(--field-focus-border);
    box-shadow: var(--focus-01)
}

.homepage-hero .homepage-hero-search .search-input-field::-webkit-input-placeholder {
    font-size: 1.5rem
}

.homepage-hero .homepage-hero-search .search-input-field::placeholder {
    font-size: 1.5rem
}

.homepage-hero .homepage-hero-search .search-widget {
    display: flex;
    gap: 0
}

.homepage-hero .homepage-hero-search .search-results {
    box-shadow: var(--shadow-02);
    margin: 0 1.5rem;
    text-align: left;
    top: 4.2rem;
    width: calc(100% - 3rem);
    z-index: var(--z-index-search-results-home)
}

.homepage-hero .homepage-hero-search .search-results .result-item a {
    padding: .5rem 1.5rem
}

.homepage-hero .homepage-hero-search .search-results .result-item mark {
    background: none;
    color: var(--text-primary)
}

.homepage-hero .homepage-hero-search .search-results .result-item span {
    color: var(--text-secondary);
    font-weight: 400
}

.homepage-hero .homepage-hero-search .search-results .result-item small {
    color: var(--text-secondary)
}

.homepage-hero .search-button.button {
    height: 100%;
    left: auto;
    position: absolute;
    right: 1.5rem;
    top: 0
}

.homepage-hero .search-button.button:hover {
    background: none;
    border-color: transparent
}

.homepage-hero .search-button.button .button-wrap {
    background: none
}

.homepage-hero .search-button.button .button-wrap:hover {
    background: none;
    border: 1px solid transparent
}

.homepage-hero .search-button.button .button-wrap:hover .icon {
    background-color: var(--text-link)
}

.homepage-hero .search-button.button .button-wrap .icon {
    background-color: var(--icon-primary);
    border: none
}

.icon {
    --size: var(--icon-size, 1rem);
    background-color: var(--icon-primary);
    display: inline-block;
    flex-shrink: 0;
    height: var(--size);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    vertical-align: middle;
    width: var(--size)
}

svg.icon {
    background: transparent;
    color: var(--icon-primary)
}

.icon.icon-add-filled {
    -webkit-mask-image: url(/static/media/add-filled.a8e6793efe0c45d06016.svg);
    mask-image: url(/static/media/add-filled.a8e6793efe0c45d06016.svg)
}

.icon.icon-add {
    -webkit-mask-image: url(/static/media/add.9f0957aa3417844441a2.svg);
    mask-image: url(/static/media/add.9f0957aa3417844441a2.svg)
}

.icon.icon-altname {
    -webkit-mask-image: url(/static/media/altname.fa41e3cb6859d720b231.svg);
    mask-image: url(/static/media/altname.fa41e3cb6859d720b231.svg)
}

.icon.icon-bell-filled {
    -webkit-mask-image: url(/static/media/bell-filled.92b1b0fec0b6ed04f771.svg);
    mask-image: url(/static/media/bell-filled.92b1b0fec0b6ed04f771.svg)
}

.icon.icon-bell {
    -webkit-mask-image: url(/static/media/bell.034a87122ec06307f900.svg);
    mask-image: url(/static/media/bell.034a87122ec06307f900.svg)
}

.icon.icon-bookmark-filled {
    -webkit-mask-image: url(/static/media/bookmark-filled.22802275efddc0dd3f04.svg);
    mask-image: url(/static/media/bookmark-filled.22802275efddc0dd3f04.svg)
}

.icon.icon-bookmark {
    -webkit-mask-image: url(/static/media/bookmark.e9ba9d27f97589ba62cc.svg);
    mask-image: url(/static/media/bookmark.e9ba9d27f97589ba62cc.svg)
}

.icon.icon-cancel {
    -webkit-mask-image: url(/static/media/cancel.ff1ee2551e18f9c9c8d3.svg);
    mask-image: url(/static/media/cancel.ff1ee2551e18f9c9c8d3.svg)
}

.icon.icon-checkmark {
    -webkit-mask-image: url(/static/media/checkmark.d05ce91f65dfc321cadd.svg);
    mask-image: url(/static/media/checkmark.d05ce91f65dfc321cadd.svg)
}

.icon.icon-chevron {
    -webkit-mask-image: url(/static/media/chevron.05a124d379047e16d746.svg);
    mask-image: url(/static/media/chevron.05a124d379047e16d746.svg)
}

.icon.icon-chrome {
    -webkit-mask-image: url(/static/media/chrome.4c57086589fd964c05f5.svg);
    mask-image: url(/static/media/chrome.4c57086589fd964c05f5.svg)
}

.icon.icon-critical {
    -webkit-mask-image: url(/static/media/critical.046b659f661afa9ab11f.svg);
    mask-image: url(/static/media/critical.046b659f661afa9ab11f.svg)
}

.icon.icon-deno {
    -webkit-mask-image: url(/static/media/deno.a791d0899729b3089500.svg);
    mask-image: url(/static/media/deno.a791d0899729b3089500.svg)
}

.icon.icon-deprecated {
    -webkit-mask-image: url(/static/media/deprecated.eda3b39bb2bd366d4b2b.svg);
    mask-image: url(/static/media/deprecated.eda3b39bb2bd366d4b2b.svg)
}

.icon.icon-desktop {
    -webkit-mask-image: url(/static/media/desktop.ae5e91df1e60ced79a5e.svg);
    mask-image: url(/static/media/desktop.ae5e91df1e60ced79a5e.svg)
}

.icon.icon-disabled {
    -webkit-mask-image: url(/static/media/disabled.f52f4d023359dbf8a727.svg);
    mask-image: url(/static/media/disabled.f52f4d023359dbf8a727.svg)
}

.icon.icon-edge {
    -webkit-mask-image: url(/static/media/edge.40018f6a959bc3e5c537.svg);
    mask-image: url(/static/media/edge.40018f6a959bc3e5c537.svg)
}

.icon.icon-edit {
    -webkit-mask-image: url(/static/media/edit.2e4f3bd111b39f9ebbc2.svg);
    mask-image: url(/static/media/edit.2e4f3bd111b39f9ebbc2.svg)
}

.icon.icon-ellipses {
    -webkit-mask-image: url(/static/media/ellipses.c6dd1c04b7ef3cba126a.svg);
    mask-image: url(/static/media/ellipses.c6dd1c04b7ef3cba126a.svg)
}

.icon.icon-experimental {
    -webkit-mask-image: url(/static/media/experimental.2f9e05f53c6dbee7791c.svg);
    mask-image: url(/static/media/experimental.2f9e05f53c6dbee7791c.svg)
}

.icon.icon-external {
    -webkit-mask-image: url(/static/media/external.ad7e40a95bc765963433.svg);
    mask-image: url(/static/media/external.ad7e40a95bc765963433.svg)
}

.icon.icon-eye-filled {
    -webkit-mask-image: url(/static/media/eye-filled.dd0405b418fcfecf0f77.svg);
    mask-image: url(/static/media/eye-filled.dd0405b418fcfecf0f77.svg)
}

.icon.icon-eye {
    -webkit-mask-image: url(/static/media/eye.b451ad8ced0662500e82.svg);
    mask-image: url(/static/media/eye.b451ad8ced0662500e82.svg)
}

.icon.icon-footnote {
    -webkit-mask-image: url(/static/media/footnote.adb3f56121e4f9c95ba7.svg);
    mask-image: url(/static/media/footnote.adb3f56121e4f9c95ba7.svg)
}

.icon.icon-github-mark-small {
    -webkit-mask-image: url(/static/media/github-mark-small.348586b8904b950b8ea8.svg);
    mask-image: url(/static/media/github-mark-small.348586b8904b950b8ea8.svg)
}

.icon.icon-ie {
    -webkit-mask-image: url(/static/media/ie.cf17782c766db346d9b1.svg);
    mask-image: url(/static/media/ie.cf17782c766db346d9b1.svg)
}

.icon.icon-information {
    -webkit-mask-image: url(/static/media/information.81a9c7bfba75e9c4e993.svg);
    mask-image: url(/static/media/information.81a9c7bfba75e9c4e993.svg)
}

.icon.icon-language {
    -webkit-mask-image: url(/static/media/language.e4289910782fa8d1c882.svg);
    mask-image: url(/static/media/language.e4289910782fa8d1c882.svg)
}

.icon.icon-menu-filled {
    -webkit-mask-image: url(/static/media/menu-filled.48a621119c4448c94d79.svg);
    mask-image: url(/static/media/menu-filled.48a621119c4448c94d79.svg)
}

.icon.icon-menu {
    -webkit-mask-image: url(/static/media/menu.1ed93cf1ba8c04627c11.svg);
    mask-image: url(/static/media/menu.1ed93cf1ba8c04627c11.svg)
}

.icon.icon-mobile {
    -webkit-mask-image: url(/static/media/mobile.7f0bdae2a317caf911ee.svg);
    mask-image: url(/static/media/mobile.7f0bdae2a317caf911ee.svg)
}

.icon.icon-more {
    -webkit-mask-image: url(/static/media/more.ce2ad00a1fca149a22ce.svg);
    mask-image: url(/static/media/more.ce2ad00a1fca149a22ce.svg)
}

.icon.icon-theme-dark {
    -webkit-mask-image: url(/static/media/theme-dark.2204a73b9b7fbc5e0219.svg);
    mask-image: url(/static/media/theme-dark.2204a73b9b7fbc5e0219.svg)
}

.icon.icon-next {
    -webkit-mask-image: url(/static/media/next.1ecddf89481891f59480.svg);
    mask-image: url(/static/media/next.1ecddf89481891f59480.svg)
}

.icon.icon-no {
    -webkit-mask-image: url(/static/media/no.d2e0aa3e7440f80dccd6.svg);
    mask-image: url(/static/media/no.d2e0aa3e7440f80dccd6.svg)
}

.icon.icon-nodejs {
    -webkit-mask-image: url(/static/media/nodejs.bb93afa7923c2473034b.svg);
    mask-image: url(/static/media/nodejs.bb93afa7923c2473034b.svg)
}

.icon.icon-nonstandard {
    -webkit-mask-image: url(/static/media/nonstandard.d6e4c7b35b5ed187e936.svg);
    mask-image: url(/static/media/nonstandard.d6e4c7b35b5ed187e936.svg)
}

.icon.icon-note-info {
    -webkit-mask-image: url(/static/media/note-info.0eafb6e7738509bce66e.svg);
    mask-image: url(/static/media/note-info.0eafb6e7738509bce66e.svg)
}

.icon.icon-note-warning {
    -webkit-mask-image: url(/static/media/note-warning.d6e4c7b35b5ed187e936.svg);
    mask-image: url(/static/media/note-warning.d6e4c7b35b5ed187e936.svg)
}

.icon.icon-note-deprecated {
    -webkit-mask-image: url(/static/media/note-deprecated.0d2643f0c417b3670c49.svg);
    mask-image: url(/static/media/note-deprecated.0d2643f0c417b3670c49.svg)
}

.icon.icon-opera {
    -webkit-mask-image: url(/static/media/opera.a0ab0c5004c00e618a00.svg);
    mask-image: url(/static/media/opera.a0ab0c5004c00e618a00.svg)
}

.icon.icon-padlock {
    -webkit-mask-image: url(/static/media/padlock.6210113487ca12ff25f3.svg);
    mask-image: url(/static/media/padlock.6210113487ca12ff25f3.svg)
}

.icon.icon-partial {
    -webkit-mask-image: url(/static/media/partial.2d8806d709221f07c72c.svg);
    mask-image: url(/static/media/partial.2d8806d709221f07c72c.svg)
}

.icon.icon-prefix {
    -webkit-mask-image: url(/static/media/prefix.db94a69f5867547725e5.svg);
    mask-image: url(/static/media/prefix.db94a69f5867547725e5.svg)
}

.icon.icon-preview {
    -webkit-mask-image: url(/static/media/preview.77ee12031f5f5ecb2962.svg);
    mask-image: url(/static/media/preview.77ee12031f5f5ecb2962.svg)
}

.icon.icon-previous {
    -webkit-mask-image: url(/static/media/previous.585a0363cab37d75a90d.svg);
    mask-image: url(/static/media/previous.585a0363cab37d75a90d.svg)
}

.icon.icon-quote {
    -webkit-mask-image: url(/static/media/quote.d88c218cc7eaf9168178.svg);
    mask-image: url(/static/media/quote.d88c218cc7eaf9168178.svg)
}

.icon.icon-safari {
    -webkit-mask-image: url(/static/media/safari.3679eb31121b46323304.svg);
    mask-image: url(/static/media/safari.3679eb31121b46323304.svg)
}

.icon.icon-samsunginternet {
    -webkit-mask-image: url(/static/media/samsunginternet.55e41ddfc05627ecc331.svg);
    mask-image: url(/static/media/samsunginternet.55e41ddfc05627ecc331.svg)
}

.icon.icon-search {
    -webkit-mask-image: url(/static/media/search.cebfd63a204ba9fefa74.svg);
    mask-image: url(/static/media/search.cebfd63a204ba9fefa74.svg)
}

.icon.icon-server {
    -webkit-mask-image: url(/static/media/server.fdad5f2f9f48879ac6c2.svg);
    mask-image: url(/static/media/server.fdad5f2f9f48879ac6c2.svg)
}

.icon.icon-sidebar {
    -webkit-mask-image: url(/static/media/sidebar.18421c220ec0a5e690f1.svg);
    mask-image: url(/static/media/sidebar.18421c220ec0a5e690f1.svg)
}

.icon.icon-simple-firefox {
    -webkit-mask-image: url(/static/media/simple-firefox.9b9181d8c30c3de88edf.svg);
    mask-image: url(/static/media/simple-firefox.9b9181d8c30c3de88edf.svg)
}

.icon.icon-small-arrow {
    -webkit-mask-image: url(/static/media/small-arrow.a22801b3d18b7d1ea795.svg);
    mask-image: url(/static/media/small-arrow.a22801b3d18b7d1ea795.svg)
}

.icon.icon-theme-light {
    -webkit-mask-image: url(/static/media/theme-light.af1aa3887c0deadaaf2e.svg);
    mask-image: url(/static/media/theme-light.af1aa3887c0deadaaf2e.svg)
}

.icon.icon-star-filled {
    -webkit-mask-image: url(/static/media/star-filled.358ee4566f4a4c7d438d.svg);
    mask-image: url(/static/media/star-filled.358ee4566f4a4c7d438d.svg)
}

.icon.icon-star {
    -webkit-mask-image: url(/static/media/star.00aab2ac065852fd407a.svg);
    mask-image: url(/static/media/star.00aab2ac065852fd407a.svg)
}

.icon.icon-theme-os-default {
    -webkit-mask-image: url(/static/media/theme-os-default.b14255eadab403fa2e8a.svg);
    mask-image: url(/static/media/theme-os-default.b14255eadab403fa2e8a.svg)
}

.icon.icon-thumbs-down {
    -webkit-mask-image: url(/static/media/thumbs-down.7ca516d7f04791a3910c.svg);
    mask-image: url(/static/media/thumbs-down.7ca516d7f04791a3910c.svg)
}

.icon.icon-thumbs-up {
    -webkit-mask-image: url(/static/media/thumbs-up.10a6075a46940d218431.svg);
    mask-image: url(/static/media/thumbs-up.10a6075a46940d218431.svg)
}

.icon.icon-trash {
    -webkit-mask-image: url(/static/media/trash.edee2ea86f1b505315f7.svg);
    mask-image: url(/static/media/trash.edee2ea86f1b505315f7.svg)
}

.icon.icon-twitter {
    -webkit-mask-image: url(/static/media/twitter.cc5b37feab537ddbf701.svg);
    mask-image: url(/static/media/twitter.cc5b37feab537ddbf701.svg)
}

.icon.icon-unknown {
    -webkit-mask-image: url(/static/media/unknown.7fd13a7673ebf93f625c.svg);
    mask-image: url(/static/media/unknown.7fd13a7673ebf93f625c.svg)
}

.icon.icon-warning {
    -webkit-mask-image: url(/static/media/warning.334964ef472eac4cfb78.svg);
    mask-image: url(/static/media/warning.334964ef472eac4cfb78.svg)
}

.icon.icon-webview {
    -webkit-mask-image: url(/static/media/webview.7d9bf32041e0c57240b5.svg);
    mask-image: url(/static/media/webview.7d9bf32041e0c57240b5.svg)
}

.icon.icon-yes {
    -webkit-mask-image: url(/static/media/yes.70caad81ca5e3d9f7576.svg);
    mask-image: url(/static/media/yes.70caad81ca5e3d9f7576.svg)
}

.icon.icon-yes-circle {
    -webkit-mask-image: url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg);
    mask-image: url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg)
} 

.button,
button {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none
}

.button {
    --button-bg: var(--button-primary-default);
    --button-border-color: var(--button-primary-default);
    --button-focus-effect: var(--focus-effect);
    --button-height: var(--form-elem-height, 2rem);
    --button-color: var(--background-primary);
    --button-font: var(--type-emphasis-m);
    --button-padding: 0.5rem;
    --button-radius: var(--elem-radius, 0.25rem);
    border-radius: var(--button-radius);
    cursor: pointer;
    display: inline-block;
    padding: 0;
    text-decoration: none
}

.button-wrap {
    align-items: center;
    background-color: var(--button-bg);
    border: 1px solid var(--button-border-color);
    border-radius: var(--button-radius);
    color: var(--button-color);
    display: flex;
    font: var(--button-font);
    gap: .25rem;
    height: var(--button-height);
    justify-content: center;
    padding-left: var(--button-padding);
    padding-right: var(--button-padding);
    position: relative
}

.button .icon {
    background-color: var(--button-color);
    margin: 0 -1px
}

.button.hover,
.button:hover {
    --button-bg: var(--button-primary-hover);
    --button-border-color: var(--button-bg)
}

.button.active,
.button:active {
    --button-bg: var(--button-primary-active)
}

.button.focus,
.button:focus {
    outline: none
}

.button.focus .button-wrap,
.button:focus .button-wrap {
    border: 1px solid var(--button-secondary-border-focus);
    box-shadow: var(--button-focus-effect)
}

.button.button.inactive,
.button.button[disabled] {
    cursor: default;
    opacity: .65
}

.button.button.inactive:hover,
.button.button[disabled]:hover {
    --button-bg: inherit;
    --button-border-color: transparent
}

.button.small,
.button.small .button-wrap {
    --button-height: 1.75rem;
    --button-padding: 0.25rem
}

.button.secondary {
    --button-bg: var(--button-secondary-default);
    --button-border-color: var(--border-primary);
    --button-color: var(--text-secondary)
}

.button.secondary:hover {
    --button-bg: var(--button-secondary-hover)
}

.button.secondary:active {
    --button-bg: var(--button-secondary-active)
}

.button.secondary:focus {
    --button-border-color: var(--button-secondary-border-focus)
}

.button.action {
    --button-bg: transparent;
    --button-border-color: var(--button-bg);
    --button-color: var(--text-secondary);
    --button-font: var(--type-label-s)
}

.button.action.has-icon {
    --button-font: var(--type-emphasis-m);
    text-transform: none
}

.button.action:hover {
    --button-bg: var(--button-secondary-hover)
}

.button.action:active {
    --button-bg: var(--button-secondary-active)
}

.button.action:focus {
    --button-border-color: var(--button-secondary-border-focus)
}

.button.action .button-wrap {
    text-transform: uppercase
}

.button.action.highlight {
    --button-color: var(--button-primary-default)
}

.button.select {
    --button-bg: var(--background-primary);
    --button-border-color: var(--border-primary);
    --button-color: var(--text-secondary);
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    text-decoration: none
}

.button.select .button-wrap {
    box-shadow: var(--shadow-01);
    padding-right: 26px;
    position: relative
}

.button.select .button-wrap:after {
    background-color: var(--icon-primary);
    content: "";
    display: block;
    height: 16px;
    -webkit-mask-image: url(/static/media/small-arrow.a22801b3d18b7d1ea795.svg);
    mask-image: url(/static/media/small-arrow.a22801b3d18b7d1ea795.svg);
    -webkit-mask-size: cover;
    mask-size: cover;
    position: absolute;
    right: .5rem;
    top: calc(50% - .5rem);
    width: 16px
}

.header-search {
    max-width: 100%
}

.header-search .search-widget {
    margin: 0 auto;
    max-width: 20rem;
    position: relative;
    width: 100%
}

@media screen and (min-width:769px) {
    .header-search .search-widget {
        align-items: center;
        display: flex;
        gap: .5rem
    }
}

.header-search .search-input-field {
    -webkit-appearance: none;
    background-color: var(--background-primary);
    border: 1px solid var(--border-primary);
    border-radius: 100px;
    caret-color: var(--text-link);
    color: var(--text-primary);
    height: var(--form-elem-height);
    min-width: 5rem;
    padding-left: 1rem;
    padding-right: 2rem;
    width: 100%
}

@-webkit-keyframes blink {

    0%,
    to {
        -webkit-text-decoration-line: none;
        text-decoration-line: none
    }

    50% {
        -webkit-text-decoration-line: underline;
        text-decoration-line: underline
    }
}

@keyframes blink {

    0%,
    to {
        -webkit-text-decoration-line: none;
        text-decoration-line: none
    }

    50% {
        -webkit-text-decoration-line: underline;
        text-decoration-line: underline
    }
}

@media screen and (min-width:992px) {
    .header-search .search-input-field:invalid {
        width: 1rem
    }
}

.header-search .search-input-field:focus,
.header-search .search-input-field:valid {
    width: inherit
}

.header-search .search-input-field:invalid::-webkit-input-placeholder {
    -webkit-animation: blink 2s step-end infinite;
    animation: blink 2s step-end infinite;
    caret-color: transparent
}

.header-search .search-input-field:invalid,
.header-search .search-input-field:invalid::placeholder {
    -webkit-animation: blink 2s step-end infinite;
    animation: blink 2s step-end infinite;
    caret-color: transparent
}

@media(prefers-reduced-motion:reduce) {
    .header-search .search-input-field:invalid::-webkit-input-placeholder {
        caret-color: auto
    }

    .header-search .search-input-field:invalid,
    .header-search .search-input-field:invalid::placeholder {
        caret-color: auto
    }
}

.header-search .search-input-field:valid::-webkit-input-placeholder {
    -webkit-animation: none;
    animation: none
}

.header-search .search-input-field:valid,
.header-search .search-input-field:valid::placeholder {
    -webkit-animation: none;
    animation: none
}

.header-search .search-input-field:not(:focus):valid::-webkit-input-placeholder {
    -webkit-text-decoration-line: none;
    text-decoration-line: none
}

.header-search .search-input-field:not(:focus):valid,
.header-search .search-input-field:not(:focus):valid::placeholder {
    -webkit-text-decoration-line: none;
    text-decoration-line: none
}

.header-search .search-input-field:not(:focus),
.header-search .search-input-field:not(:focus)::placeholder {
    -webkit-animation: none;
    animation: none;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline
}

.header-search .search-input-field:not(:focus)::-webkit-input-placeholder {
    -webkit-animation: none;
    animation: none;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline
}

.header-search .search-input-field:not(:focus)::placeholder {
    -webkit-animation: none;
    animation: none;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline
}

.header-search .search-input-field:focus {
    border-color: var(--category-color);
    box-shadow: 0 0 0 3px var(--blend-color), 0 0 0 3px var(--category-color);
    outline: 0 none
}

.header-search .search-input-field::-webkit-input-placeholder {
    font: var(--type-body-l);
    opacity: 1;
    -webkit-text-decoration-color: var(--text-link);
    text-decoration-color: var(--text-link);
    text-decoration-thickness: .15rem;
    text-underline-offset: .1em
}

.header-search .search-input-field,
.header-search .search-input-field::placeholder {
    font: var(--type-body-l);
    opacity: 1;
    -webkit-text-decoration-color: var(--text-link);
    text-decoration-color: var(--text-link);
    text-decoration-thickness: .15rem;
    text-underline-offset: .1em
}

.header-search .server-error {
    color: var(--icon-critical);
    margin: 0
}

.header-search .search-results,
.homepage-hero-search .search-results {
    border: 1px solid var(--border-secondary);
    border-radius: var(--elem-radius);
    box-shadow: var(--shadow-01);
    left: 0;
    position: absolute;
    top: 42px;
    width: 100%;
    z-index: var(--z-index-search-results)
}

.header-search .search-results,
.header-search .search-results a[href],
.header-search .search-results mark,
.homepage-hero-search .search-results,
.homepage-hero-search .search-results a[href],
.homepage-hero-search .search-results mark {
    color: var(--text-primary)
}

.header-search .search-results .indexing-warning,
.homepage-hero-search .search-results .indexing-warning {
    color: var(--icon-warning)
}

.header-search .search-results .nothing-found,
.homepage-hero-search .search-results .nothing-found {
    font-style: italic
}

.header-search .search-results .result-item,
.homepage-hero-search .search-results .result-item {
    background: var(--background-secondary);
    border-bottom: 1px solid var(--border-secondary);
    font-size: var(--type-smaller-font-size);
    word-break: break-word
}

.header-search .search-results .result-item:first-child,
.homepage-hero-search .search-results .result-item:first-child {
    border-radius: var(--elem-radius) var(--elem-radius) 0 0
}

.header-search .search-results .result-item:last-child,
.homepage-hero-search .search-results .result-item:last-child {
    border-radius: 0 0 var(--elem-radius) var(--elem-radius)
}

.header-search .search-results .result-item.nothing-found code,
.homepage-hero-search .search-results .result-item.nothing-found code {
    font-size: .8125rem
}

.header-search .search-results .result-item a,
.homepage-hero-search .search-results .result-item a {
    display: block;
    padding: .5rem
}

.header-search .search-results .result-item.highlight,
.header-search .search-results .result-item:hover,
.homepage-hero-search .search-results .result-item.highlight,
.homepage-hero-search .search-results .result-item:hover {
    background-color: var(--border-secondary)
}

.header-search .search-results .result-item.qs-collection b:after,
.homepage-hero-search .search-results .result-item.qs-collection b:after {
    border: 1px solid var(--text-primary-red);
    border-radius: .5rem;
    content: "collection";
    font-size: .5rem;
    line-height: .5rem;
    margin-bottom: .5rem;
    margin-left: .5rem;
    padding: .125rem;
    vertical-align: super
}

.header-search .search-results .result-item:focus,
.header-search .search-results .result-item:hover,
.homepage-hero-search .search-results .result-item:focus,
.homepage-hero-search .search-results .result-item:hover {
    cursor: pointer
}

.header-search .search-results div:last-child,
.homepage-hero-search .search-results div:last-child {
    border-bottom: 0
}

.header-search .search-results mark,
.homepage-hero-search .search-results mark {
    background-color: var(--mark-color)
}

.header-search .search-results small,
.homepage-hero-search .search-results small {
    overflow-wrap: break-word
}

.header-search .search-results a,
.homepage-hero-search .search-results a {
    text-overflow: ellipsis
}

.header-search .search-results div.searchindex-error,
.homepage-hero-search .search-results div.searchindex-error {
    color: var(--icon-critical)
}

.search-form {
    display: flex;
    position: relative
}

.button.clear-search-button,
.button.search-button {
    --button-color: var(--icon-secondary);
    --button-height: 1.5rem;
    --button-padding: 0;
    position: absolute;
    right: .75rem;
    top: .25rem;
    width: 1.5rem
}

.button.clear-search-button:hover,
.button.search-button:hover {
    background: transparent
}

@media screen and (min-width:769px) {

    .button.clear-search-button,
    .button.search-button {
        right: 1.2rem;
        width: 1.5rem
    }
}

.button.clear-search-button {
    display: none
}

.header-search .search-input-field:focus~.button.clear-search-button,
.header-search .search-input-field:valid~.button.clear-search-button {
    display: block;
    right: 2.8rem
}
 
.mandala-container {
    --mandala-primary: #4e4e4e;
    --mandala-accent-1: var(--html-accent-color);
    --mandala-accent-2: var(--http-accent-color);
    --mandala-accent-3: var(--js-accent-color);
    --mandala-accent-4: #b3b3b3;
    display: flex;
    justify-content: center
}

.mandala-container .mandala-rotate>svg {
    -webkit-animation: rotation 500s linear infinite;
    animation: rotation 500s linear infinite
}

.mandala-container svg {
    font-size: 1.5rem;
    font-weight: 300;
    -webkit-user-select: none;
    user-select: none
}

.mandala-container svg>text {
    fill: var(--mandala-primary)
}

.mandala-container .mandala-accent-1 {
    font-size: 1.5rem
}

.mandala-container .mandala-accent-2 {
    font-size: 1.3rem
}

.mandala-container .mandala-accent-3 {
    font-size: 1.2rem
}

.mandala-container .mandala-accent-4 {
    font-size: 1.1rem
}

.mandala-container .mandala-accent-5 {
    font-size: 1rem
}

.mandala-container.animate-colors svg>text>textPath>tspan {
    -webkit-animation: mandala-color-change 50s infinite;
    animation: mandala-color-change 50s infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

.mandala-container.animate-colors svg>text>textPath>tspan {
    fill: var(--mandala-primary)
}

.mandala-container.animate-colors .mandala-accent-1>textPath>tspan {
    fill: var(--mandala-accent-1);
    -webkit-animation-delay: -15s;
    animation-delay: -15s
}

.mandala-container.animate-colors .mandala-accent-2>textPath>tspan {
    fill: var(--mandala-accent-2);
    -webkit-animation-delay: -20s;
    animation-delay: -20s
}

.mandala-container.animate-colors .mandala-accent-3>textPath>tspan {
    fill: var(--mandala-accent-3);
    -webkit-animation-delay: -30s;
    animation-delay: -30s
}

.mandala-container.animate-colors .mandala-accent-5>textPath>tspan {
    fill: var(--mandala-accent-4);
    -webkit-animation-delay: -40s;
    animation-delay: -40s
}

@-webkit-keyframes rotation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes rotation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@-webkit-keyframes mandala-color-change {
    0% {
        fill: var(--mandala-primary)
    }

    10% {
        fill: var(--mandala-primary)
    }

    15% {
        fill: var(--mandala-accent-1)
    }

    20% {
        fill: var(--mandala-primary)
    }

    25% {
        fill: var(--mandala-primary)
    }

    30% {
        fill: var(--mandala-accent-2)
    }

    35% {
        fill: var(--mandala-primary)
    }

    40% {
        fill: var(--mandala-primary)
    }

    50% {
        fill: var(--mandala-accent-3)
    }

    55% {
        fill: var(--mandala-primary)
    }

    60% {
        fill: var(--mandala-primary)
    }

    65% {
        fill: var(--mandala-accent-4)
    }

    70% {
        fill: var(--mandala-primary)
    }

    to {
        fill: var(--mandala-primary)
    }
}

@keyframes mandala-color-change {
    0% {
        fill: var(--mandala-primary)
    }

    10% {
        fill: var(--mandala-primary)
    }

    15% {
        fill: var(--mandala-accent-1)
    }

    20% {
        fill: var(--mandala-primary)
    }

    25% {
        fill: var(--mandala-primary)
    }

    30% {
        fill: var(--mandala-accent-2)
    }

    35% {
        fill: var(--mandala-primary)
    }

    40% {
        fill: var(--mandala-primary)
    }

    50% {
        fill: var(--mandala-accent-3)
    }

    55% {
        fill: var(--mandala-primary)
    }

    60% {
        fill: var(--mandala-primary)
    }

    65% {
        fill: var(--mandala-accent-4)
    }

    70% {
        fill: var(--mandala-primary)
    }

    to {
        fill: var(--mandala-primary)
    }
}

.featured-articles {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem
}

.featured-articles h2 {
    font: var(--type-heading-h4);
    margin-top: 0
}

.featured-articles .tile-container {
    grid-gap: 1rem;
    display: grid;
    gap: 1rem;
    grid-auto-flow: row;
    max-width: 52rem
}

@media screen and (min-width:769px) {
    .featured-articles .tile-container {
        grid-template-columns: repeat(2, 1fr)
    }
}

.featured-articles .article-tile {
    border: 1px solid var(--border-primary);
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    padding: 1rem
}

.featured-articles .article-tile:hover {
    box-shadow: var(--shadow-02)
}

.featured-articles .article-tile .tile-tag {
    color: var(--text-primary);
    font-weight: 500
}

.featured-articles .article-tile .tile-tag:hover {
    text-decoration: underline
}

.featured-articles .article-tile .tile-title {
    align-items: flex-end;
    display: flex;
    flex-grow: 1;
    font: var(--type-heading-h5);
    font-weight: 500;
    line-height: var(--intermediate-line-height);
    margin: 0 0 1rem
}

.featured-articles .article-tile .tile-title a {
    color: var(--text-primary)
}

.featured-articles .article-tile .tile-title a:focus,
.featured-articles .article-tile .tile-title a:hover {
    text-decoration: underline
}

.featured-articles .article-tile p {
    font: var(--type-smaller-font-size);
    line-height: var(--base-line-height);
    margin: 0;
    max-height: calc(3em*var(--base-line-height));
    overflow: hidden;
    position: relative
}

.featured-articles .article-tile p:after {
    background: linear-gradient(to right, transparent, var(--background-primary) 75%);
    content: "";
    display: block;
    height: calc(1em*var(--base-line-height));
    pointer-events: none;
    position: absolute;
    right: 0;
    top: calc(2em*var(--base-line-height));
    width: 20ch
}

.featured-articles .article-tile p:dir(rtl):after {
    background: linear-gradient(to left, transparent, var(--background-primary) 75%);
    left: 0;
    right: auto
}

@media screen and (min-width:769px) {
    .featured-articles .article-tile p {
        min-height: calc(3em*var(--base-line-height))
    }
}

.latest-news {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 52rem;
    padding: 0 1rem;
    width: 100%
}

@media screen and (min-width:1200px) {
    .latest-news {
        padding: 0
    }
}

.latest-news h2 {
    font: var(--type-heading-h4);
    margin-top: 1rem
}

.latest-news h5 {
    margin: 0
}

.latest-news .news-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: .7rem
}

@media screen and (min-width:769px) {
    .latest-news .news-item {
        flex-direction: revert
    }
}

.latest-news .news-item:nth-child(odd) {
    background: var(--background-secondary);
    border-radius: var(--elem-radius)
}

.latest-news .news-item .news-date {
    align-items: center;
    display: flex;
    font-size: 12px;
    line-height: 175%
}

.latest-news .news-title {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    line-height: var(--base-line-height);
    margin: 0
}

.latest-news .news-title a {
    color: var(--text-primary)
}

.latest-news .news-title a:hover {
    color: var(--text-primary);
    text-decoration: underline
}

.latest-news .news-title .news-source {
    color: var(--text-secondary);
    font-size: var(--type-tiny-font-size)
}

.recent-contributions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 52rem;
    padding: 0 1rem;
    width: 100%
}

@media screen and (min-width:1200px) {
    .recent-contributions {
        padding: 0
    }
}

.recent-contributions h2 {
    font: var(--type-heading-h4);
    margin-top: 1rem
}

.recent-contributions h5 {
    margin: 0
}

.recent-contributions .request-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: .7rem
}

@media screen and (min-width:769px) {
    .recent-contributions .request-item {
        flex-direction: revert
    }
}

.recent-contributions .request-item:nth-child(odd) {
    background: var(--background-secondary);
    border-radius: var(--elem-radius)
}

.recent-contributions .request-item .request-date {
    align-items: center;
    display: flex;
    font-size: 12px;
    line-height: 175%
}

.recent-contributions .request-title {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    line-height: var(--base-line-height);
    margin: 0
}

.recent-contributions .request-title a {
    color: var(--text-primary)
}

.recent-contributions .request-title a:hover {
    color: var(--text-primary);
    text-decoration: underline
}

.recent-contributions .request-title .request-repo {
    color: var(--text-secondary);
    font-size: var(--type-tiny-font-size)
}

.contributor-spotlight {
    align-items: center;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    padding: 2rem 1rem;
    position: relative;
    width: 100%
}

.contributor-spotlight blockquote {
    border: 0;
    display: flex;
    font-style: italic;
    margin: 0;
    padding: 0
}

.contributor-spotlight blockquote .icon {
    margin-right: .5rem;
    margin-top: .25rem
}

.contributor-spotlight h4 {
    font-family: var(--font-body);
    font-size: var(--type-smaller-font-size)
}

.contributor-spotlight .text-col {
    align-items: center;
    border-radius: .3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 52rem;
    width: 100%
}

.contributor-spotlight .text-col h3 {
    font-size: var(--type-heading-h5-font-size)
}

.contributor-spotlight .spotlight-cta {
    --button-bg: var(--text-link);
    --button-border-color: #1b1b1b;
    --button-color: var(--mdn-color-black);
    --button-radius: 10rem;
    --button-padding: 1rem;
    --button-primary-hover: #696969;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.contributor-spotlight .wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 52rem;
    padding: 2rem 1rem;
    width: 100%
}

.contributor-spotlight .contributor-graphic {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 50%;
    word-break: break-word
}

.contributor-spotlight .contributor-graphic img {
    height: -webkit-max-content;
    height: max-content;
    max-width: 90%
}

.contributor-spotlight .contributor-name {
    background-color: var(--mdn-color-white);
    color: var(--mdn-color-black);
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.4;
    text-transform: uppercase;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.contributor-spotlight .contributor-name:after,
.contributor-spotlight .contributor-name:before {
    content: " "
}

.contributor-spotlight .contributor-name:link,
.contributor-spotlight .contributor-name:visited {
    color: var(--mdn-color-black);
    text-decoration: none
}

.contributor-spotlight .contributor-name:focus,
.contributor-spotlight .contributor-name:hover {
    text-decoration: underline
}

@media screen and (min-width:769px) {
    .contributor-spotlight .wrapper {
        align-items: normal;
        flex-direction: row
    }

    .contributor-spotlight .text-col {
        align-items: normal;
        text-align: left
    }
}

.contributor-spotlight .mandala-container {
    --mandala-primary: var(--border-primary);
    background: rgba(1, 1, 1, .9);
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.contributor-spotlight .mandala-container .mandala-translate {
    -webkit-transform: translate(-5rem);
    transform: translate(-5rem)
}

@-webkit-keyframes slow-pulse {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes slow-pulse {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    to {
        opacity: 0
    }
} 

.generic-loading {
    align-items: center;
    -webkit-animation: slow-pulse 2s infinite normal;
    animation: slow-pulse 2s infinite normal;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    display: flex;
    justify-content: center;
    width: 100%
}

.bc-table {
    border: 1px solid var(--border-primary);
    border-collapse: separate;
    border-radius: var(--elem-radius);
    border-spacing: 0;
    margin: 1rem 0;
    width: 100%
}

.bc-table td,
.bc-table th {
    border-width: 1px;
    border-bottom: 1px solid var(--border-secondary);
    border-left: 1px solid var(--border-secondary);
    border-right: 0 solid var(--border-secondary);
    border-top: 0 solid var(--border-secondary);
    font-weight: 500;
    padding: 0
}

@media screen and (min-width:769px) {

    .bc-table td,
    .bc-table th {
        padding: .4rem
    }

    .bc-table td,
    .bc-table td code,
    .bc-table th,
    .bc-table th code {
        font-size: var(--type-smaller-font-size)
    }
}

.bc-table th {
    padding: .4rem
}

.bc-table tbody tr {
    height: 3rem
}

@media screen and (min-width:769px) {

    .bc-table tbody tr:last-child td,
    .bc-table tbody tr:last-child th {
        border-bottom-width: 0
    }
}

.bc-table tbody tr th {
    border-left-width: 0;
    vertical-align: middle
}

.bc-table tbody .bc-support {
    vertical-align: top
}

.bc-table tbody .bc-support button {
    cursor: pointer;
    width: 100%
}

.bc-table tbody .bc-support.bc-supports-no>button>span {
    color: var(--text-primary-red)
}

.bc-table tbody .bc-support.bc-supports-partial>button>span {
    color: var(--text-primary-yellow)
}

.bc-table tbody .bc-support.bc-supports-preview>button>span {
    color: var(--text-primary-blue)
}

.bc-table tbody .bc-support.bc-supports-yes>button>span {
    color: var(--text-primary-green)
}

.bc-table tbody .bc-history td {
    border-left-width: 0
}

.bc-table tbody .bc-history .icon.icon-removed-partial {
    -webkit-mask-image: url(/static/media/partial.2d8806d709221f07c72c.svg);
    mask-image: url(/static/media/partial.2d8806d709221f07c72c.svg)
}

.bc-table th {
    background: var(--background-tertiary);
    vertical-align: bottom
}

.bc-table .bc-supports {
    margin-bottom: 1rem
}

.bc-table .bc-supports .icon-wrap {
    background: var(--background-primary)
}

.bc-table .bc-supports.bc-supports-removed-partial .bcd-cell-text-copy {
    color: var(--text-primary-yellow)
}

.bc-table .icon-wrap .bc-support-level {
    clip: rect(0 0 0 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px
}

.bc-table .bc-support>button>.icon-wrap {
    display: block
}

.bc-table .bc-support .icon.icon-removed-partial {
    background-color: var(--icon-critical);
    -webkit-mask-image: url(/static/media/no.d2e0aa3e7440f80dccd6.svg);
    mask-image: url(/static/media/no.d2e0aa3e7440f80dccd6.svg)
}

.bc-table .bc-support.bc-supports-removed-partial .bcd-cell-text-copy {
    color: var(--text-primary-red)
}

.bc-table .bc-feature-depth-2 {
    border-left-width: 8px
}

.bc-head-txt-label {
    left: calc(50% - .5rem);
    line-height: 1;
    padding-top: .5rem;
    position: relative;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    white-space: nowrap;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl
}

.bc-head-icon-symbol {
    margin-bottom: .3rem
}

.bc-support {
    text-align: center;
    vertical-align: middle
}

.bc-level-no {
    background-color: var(--icon-critical)
}

.bc-level-preview {
    background-color: var(--icon-information)
}

.bc-legend-items-container {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--type-smaller-font-size);
    gap: 1.5rem;
    margin-bottom: 2rem
}

.bc-legend-tip {
    font-size: var(--type-smaller-font-size);
    font-style: italic;
    margin-bottom: 1rem;
    margin-top: 0
}

.bc-legend-item {
    align-items: center;
    display: flex;
    gap: .5rem
}

.bc-legend-item-dt {
    display: flex
}

.bc-legend-item-dt .icon {
    background-color: var(--icon-primary)
}

.bc-platforms {
    height: 2rem
}

.bc-platforms th {
    text-align: center
}

.bc-platforms td {
    border: none
}

.bc-browsers th {
    text-align: center
}

.bc-browsers td {
    border-width: 0 0 1px
}

.bc-notes-list {
    margin: .5rem 0;
    position: relative;
    text-align: left;
    width: 100%
}

.bc-notes-list:before {
    background: var(--border-primary);
    content: "";
    height: calc(100% - .25rem);
    left: 7px;
    margin-top: .25rem;
    position: absolute;
    width: 2px;
    z-index: -1
}

.bc-notes-list .bc-notes-wrapper:last-child dd:last-child {
    position: relative
}

.bc-notes-list .bc-notes-wrapper:last-child dd:last-child:before {
    background: var(--background-primary);
    bottom: 0;
    content: "";
    height: calc(100% - 6px);
    left: 7px;
    position: absolute;
    width: 2px;
    z-index: -1
}

.bc-notes-list .bc-level-yes.icon.icon-yes {
    background-color: var(--icon-success);
    -webkit-mask-image: url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg);
    mask-image: url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg)
}

.bc-notes-list .bc-supports-dd .icon {
    background: var(--border-primary);
    border: 3px solid var(--background-primary);
    border-radius: 50%;
    -webkit-mask-image: none;
    mask-image: none
}

.bc-notes-list .bc-version-label {
    display: inline
}

.bc-notes-list abbr {
    margin-right: 4px
}

.bc-notes-list dd {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    text-indent: -1.5rem
}

.bc-notes-list dd:last-child {
    margin-bottom: 2rem
}

.bc-notes-wrapper {
    color: var(--text-primary);
    margin-bottom: 1rem
}

.bc-notes-wrapper:last-child {
    margin-bottom: 0
}

dl.bc-notes-list dt.bc-supports {
    margin-top: 1rem
}

dl.bc-notes-list dt.bc-supports:first-child {
    margin-top: 0
}

dl.bc-notes-list dd.bc-supports-dd {
    margin-bottom: 1rem
}

dl.bc-notes-list dd.bc-supports-dd:last-child {
    margin-bottom: 0
}

.offscreen,
.only-icon span {
    clip: rect(0 0 0 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px
}

.bc-table-row-header {
    align-items: baseline;
    display: inline-flex;
    width: 100%
}

.bc-table-row-header code {
    overflow: hidden
}

.bc-table-row-header .left-side,
.bc-table-row-header .right-side {
    overflow: hidden;
    white-space: pre
}

.bc-table-row-header .left-side {
    flex: 0 1 auto;
    text-overflow: ellipsis
}

.bc-table-row-header .right-side {
    flex: 1 0 auto
}

.bc-table-row-header .bc-icons {
    display: flex;
    gap: .5rem;
    margin-top: .25rem
}

.bc-table-row-header .bc-icons .icon {
    background-color: var(--icon-secondary)
}

.bc-table-row-header .bc-icons .icon:hover {
    background-color: var(--icon-primary)
}

.bc-github-link {
    font: var(--type-smaller-font-size)
}

.main-page-content .bc-legend dd,
.main-page-content .bc-legend dt {
    margin-bottom: 0;
    margin-left: 0;
    margin-top: 0
}

.main-page-content .bc-supports-dd {
    margin: 0
}

@media screen and (max-width:425px) {
    thead {
        display: none
    }

    td.bc-support {
        border-left-width: 0;
        display: block
    }

    .bc-feature,
    .bc-history>td,
    .bc-support>button {
        align-content: center;
        display: flex;
        flex-wrap: wrap;
        gap: .5rem
    }

    .bc-history-desktop {
        display: none
    }

    .table-scroll {
        overflow-x: auto
    }
}

@media screen and (min-width:426px) {
    .bc-table thead {
        display: table-header-group
    }

    .bc-table thead .bc-platforms th {
        vertical-align: revert
    }

    .bc-table td,
    .bc-table th {
        background: inherit;
        padding: .25rem;
        width: 2rem
    }

    .bc-table td.bc-support {
        padding: 0
    }

    .bc-table td.bc-support>button {
        padding: .25rem
    }

    .bc-table tr.bc-history-desktop {
        display: table-row
    }

    .table-scroll {
        margin: 0 -3rem;
        overflow: auto;
        width: 100vw
    }

    .table-scroll-inner {
        min-width: -webkit-max-content;
        min-width: max-content;
        padding: 0 3rem;
        position: relative
    }

    .table-scroll-inner:after {
        bottom: 0;
        content: "";
        height: 10px;
        position: absolute;
        right: 0;
        width: 10px
    }

    .bc-browser-name,
    .bc-support-level {
        display: none
    }

    .bc-notes-list {
        margin-left: 20%;
        width: auto
    }

    .bc-support .bc-support-level {
        display: none
    }

    .bc-support[aria-expanded=true] {
        position: relative
    }

    .bc-support[aria-expanded=true]:after {
        background: var(--text-primary);
        bottom: -1px;
        content: "";
        height: 2px;
        left: 0;
        position: absolute;
        width: 100%
    }

    .bc-support[aria-expanded=true] .bc-history-mobile {
        display: none
    }

    .bc-has-history {
        cursor: pointer
    }

    .bc-has-history:hover {
        background: var(--background-secondary)
    }
}

@media screen and (min-width:769px) {
    .table-scroll {
        width: calc(100% + 6rem)
    }

    .bc-table tbody th {
        width: 20%
    }
}

@media screen and (min-width:1200px) {
    .table-scroll {
        margin: 0;
        width: 100%
    }

    .table-scroll-inner {
        padding: 0
    }
}

.bcd-cell-text-wrapper {
    display: flex;
    gap: .5rem
}

@media screen and (min-width:769px) {
    .bcd-cell-text-wrapper {
        align-items: center;
        flex-direction: column
    }
}

.bcd-cell-text-copy {
    color: var(--text-primary);
    display: flex;
    gap: .5rem
}

.bc-supports-yes .bcd-cell-text-copy {
    color: var(--text-primary-green)
}

.bc-supports-no .bcd-cell-text-copy {
    color: var(--text-primary-red)
}

.bc-supports-partial .bcd-cell-text-copy {
    color: var(--text-primary-yellow)
}

.bcd-cell-icons {
    display: flex;
    gap: .5rem
}

@media screen and (min-width:769px) {
    .bcd-cell-icons {
        display: block
    }
}

.bc-notes-wrapper .bcd-cell-text-wrapper {
    flex-direction: row
}

@media screen and (min-width:769px) {
    .bc-table td {
        height: 2rem
    }

    .bc-table td.bc-support>button {
        padding: .5rem .25rem
    }
}

.container {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-width);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    width: 100%
}

.logo {
    align-items: center;
    display: flex
}

.logo svg {
    height: 1.5rem;
    margin-top: .3rem
}

.dark .logo-text,
.high-contrast-black .logo-text {
    fill: #fff
}

.auth-container .signin-link {
    align-items: center;
    display: inline-flex;
    font-weight: var(--font-body-strong-weight);
    height: 2rem;
    text-align: center
}

.auth-container .signin-link:link,
.auth-container .signin-link:visited {
    color: var(--text-secondary)
}

.mdn-plus-subscribe-link {
    --button-padding: 1rem;
    margin: 0 auto;
    max-width: 150px;
    text-align: center;
    white-space: nowrap
}

.auth-container {
    display: flex;
    flex-flow: column-reverse;
    font-family: var(--font-body);
    font-size: var(--type-smaller-font-size);
    font-weight: var(--font-body-strong-weight);
    gap: .5rem;
    list-style: none;
    margin-bottom: .5rem;
    padding: 0;
    text-align: center
}

@media screen and (min-width:992px) {
    .auth-container {
        align-items: center;
        flex-flow: row;
        gap: 1rem;
        justify-content: flex-end;
        margin: 0;
        text-align: left;
        text-align: initial;
        width: -webkit-min-content;
        width: min-content
    }
}

@media screen and (min-width:820px) {
    .auth-container {
        width: auto
    }
}

.submenu {
    background-color: var(--background-primary);
    list-style: none;
    margin: 0;
    padding: 0
}

.submenu li {
    width: 100%
}

.submenu .submenu-item,
.submenu a {
    align-items: center;
    border: 1px solid transparent;
    color: var(--text-primary);
    display: flex;
    height: 100%;
    padding: .5rem;
    width: 100%
}

li:last-child .submenu .submenu-item:not(:focus),
li:last-child .submenu a:not(:focus) {
    border-bottom-color: transparent
}

.submenu .submenu-item:hover,
.submenu a:hover {
    background-color: var(--border-secondary);
    text-decoration: none
}

.main-menu .submenu .submenu-item:hover,
.main-menu .submenu a:hover {
    background-color: var(--background-secondary)
}

.submenu .submenu-item:focus,
.submenu a:focus {
    border: 1px solid var(--button-secondary-border-focus);
    box-shadow: var(--button-focus-effect)
}

.submenu .submenu-item .icon,
.submenu a .icon {
    margin-right: .5rem
}

@media screen and (min-width:992px) {
    .submenu.inline-submenu-lg {
        background-color: var(--background-secondary);
        border: 1px solid var(--border-primary);
        border-radius: var(--elem-radius);
        box-shadow: var(--shadow-02);
        max-width: 25rem;
        padding: .5rem;
        position: absolute;
        top: calc(100% + 4px);
        width: -webkit-max-content;
        width: max-content;
        z-index: var(--z-index-mid)
    }

    .main-menu .submenu.inline-submenu-lg {
        background-color: var(--background-primary)
    }

    .submenu.inline-submenu-lg .submenu-item {
        border-radius: var(--elem-radius);
        padding: .75rem
    }

    .submenu.inline-submenu-lg:before {
        content: "";
        display: block;
        height: 8px;
        left: 0;
        position: absolute;
        top: -8px;
        width: 100%
    }
}

@media screen and (min-width:769px) {
    .submenu:not(.inline-submenu-lg) {
        background-color: var(--background-secondary);
        border: 1px solid var(--border-primary);
        border-radius: var(--elem-radius);
        box-shadow: var(--shadow-02);
        max-width: 25rem;
        padding: .5rem;
        position: absolute;
        top: calc(100% + 4px);
        width: -webkit-max-content;
        width: max-content;
        z-index: var(--z-index-mid)
    }

    .main-menu .submenu:not(.inline-submenu-lg) {
        background-color: var(--background-primary)
    }

    .submenu:not(.inline-submenu-lg) .submenu-item {
        border-radius: var(--elem-radius);
        padding: .75rem
    }

    .submenu:not(.inline-submenu-lg):before {
        content: "";
        display: block;
        height: 8px;
        left: 0;
        position: absolute;
        top: -8px;
        width: 100%
    }
}

.submenu-header {
    display: block;
    padding: 1rem
}

.submenu-header .submenu-item {
    padding: 0
}

.submenu-header .submenu-item:hover {
    background: none
}

@media screen and (min-width:769px) {
    .submenu-header {
        border-bottom: 1px solid var(--border-primary)
    }
}

.submenu-icon {
    background-color: var(--icon-primary);
    height: 2rem;
    margin-right: .75rem;
    position: relative;
    width: .2rem
}

.submenu-item,
.submenu-item-heading {
    font-size: var(--type-smaller-font-size)
}

@media screen and (min-width:769px) {

    .submenu-item-heading:not(:only-child),
    .submenu-item:not(:only-child) {
        font-weight: var(--font-body-strong-weight)
    }
}

.submenu-item-description {
    display: none
}

@media screen and (min-width:769px) {
    .submenu-item-description {
        display: block;
        font-size: var(--type-tiny-font-size);
        margin: .25rem 0 0
    }
}

.submenu-item-subtext {
    font-weight: var(--font-body-strong-weight)
}

.submenu-item-dot~.submenu-content-container>.submenu-item-heading:after {
    background: var(--text-primary-blue);
    border: 1px solid var(--background-primary);
    border-radius: 2rem;
    content: "";
    display: inline-block;
    height: .5rem;
    margin-left: .5rem;
    width: .5rem
}

.active-menu-item {
    background-color: var(--background-primary);
    border-color: var(--border-secondary)
}

.guides .submenu .submenu-item-heading {
    font-size: var(--type-smaller-font-size);
    font-weight: 400
}

.guides .desktop-only {
    display: none
}

@media screen and (min-width:992px) {
    .guides .desktop-only {
        display: inherit
    }

    .guides .mobile-only {
        display: none
    }
}

.references .desktop-only {
    display: none
}

@media screen and (min-width:992px) {
    .references .desktop-only {
        display: inherit
    }

    .references .mobile-only {
        display: none
    }
}

.html-link-container a:focus .submenu-icon.html,
.html-link-container a:hover .submenu-icon.html {
    background: var(--html-accent-color) !important
}

.css-link-container a:focus .submenu-icon.css,
.css-link-container a:hover .submenu-icon.css {
    background-color: var(--css-accent-color) !important
}

.javascript-link-container a:focus .submenu-icon.javascript,
.javascript-link-container a:hover .submenu-icon.javascript {
    background-color: var(--js-accent-color) !important
}

.http-link-container a:focus .submenu-icon.http,
.http-link-container a:hover .submenu-icon.http {
    background-color: var(--http-accent-color) !important
}

.apis-link-container a:focus .submenu-icon.apis,
.apis-link-container a:hover .submenu-icon.apis {
    background-color: var(--apis-accent-color) !important
}

.learn-link-container a:focus .submenu-icon.learn,
.learn-link-container a:hover .submenu-icon.learn {
    background-color: var(--learn-accent-color) !important
}
 
.submenu-icon.html {
    background-color: var(--html-accent-engage)
}

.submenu-icon.css {
    background-color: var(--css-accent-engage)
}

.submenu-icon.javascript {
    background-color: var(--js-accent-engage)
}

.submenu-icon.http {
    background-color: var(--http-accent-engage)
}

.submenu-icon.apis {
    background-color: var(--apis-accent-engage)
}

.submenu-icon.learn {
    background-color: var(--learn-accent-engage)
}

.mdn-plus .submenu-icon {
    background-color: var(--plus-accent-color)
}

.mdn-plus .note {
    background-color: var(--background-information)
}

.mdn-plus .note .submenu-item-description {
    display: block;
    margin: .125rem
}

@media screen and (min-width:992px) {
    .mdn-plus .mobile-only {
        display: none
    }
} 

ul.main-menu {
    grid-gap: 1rem;
    box-sizing: border-box;
    list-style: none;
    margin-top: 1rem;
    padding: 0;
    width: 100%
}

ul.main-menu.show {
    display: block
}

@media screen and (min-width:992px) {
    ul.main-menu.show {
        display: flex
    }

    ul.main-menu {
        align-items: center;
        display: flex;
        justify-content: space-around;
        margin: 0 auto 0 0;
        max-width: 310px
    }
}

@media screen and (min-width:992px) {
    ul.main-menu li:last-child {
        flex-basis: inherit
    }

    ul.main-menu .menu-toggle,
    ul.main-menu .submenu,
    ul.main-menu .submenu.show {
        display: none
    }
}

@media screen and (min-width:992px) {

    ul.main-menu .top-level-entry-container:focus-within .submenu,
    ul.main-menu .top-level-entry-container:hover .submenu {
        display: block
    }

    .open-on-focus-within:focus-within .watch-submenu {
        display: flex
    }

    .open-on-focus-within:focus-within .submenu {
        display: block
    }

    .open-on-focus-within .submenu,
    .open-on-focus-within .watch-submenu {
        display: none
    }
}

.avatar,
.avatar-wrap {
    border-radius: 50%
}

.avatar-wrap {
    height: 32px;
    margin-left: -7px;
    margin-right: .1rem;
    position: relative;
    width: 32px
}

@media screen and (min-width:769px) {
    .avatar {
        margin: initial
    }
}

 .signout-form {
    padding: .5rem
}

@media screen and (min-width:769px) {
    .signout-form {
        border-top: 1px solid var(--border-primary)
    }
}

button.signout-button {
    width: 100%
}

button.signout-button:focus,
button.signout-button:hover {
    background-color: var(--background-secondary)
} 
 
.user-menu {
    position: relative
}

.user-menu .submenu-header {
    display: none
}

.user-menu .button.user-menu-toggle .notification-dot~.avatar-wrap:after {
    background: var(--text-primary-blue);
    border: 1px solid var(--background-primary);
    border-radius: 2rem;
    bottom: 0;
    content: "";
    height: .5rem;
    position: absolute;
    right: 0;
    width: .5rem
}

@media screen and (max-width:992px) {
    .user-menu .user-menu-toggle:hover {
        --button-bg: transparent
    }
}

@media screen and (min-width:992px) {

    .user-menu .button.user-menu-toggle:focus,
    .user-menu .button.user-menu-toggle:focus .button-wrap,
    .user-menu .button.user-menu-toggle:hover,
    .user-menu .button.user-menu-toggle:hover .button-wrap {
        background: transparent;
        border-color: transparent;
        box-shadow: none
    }

    .user-menu .button.user-menu-toggle:focus .avatar {
        border: 1px solid var(--button-secondary-border-focus);
        box-shadow: var(--focus-effect)
    }

    .user-menu .button.user-menu-toggle:after {
        display: none
    }

    .user-menu .submenu-header {
        display: block;
        margin-bottom: .5rem;
        padding: 0 0 .5rem
    }

    .user-menu .submenu-item {
        padding: .5rem
    }

    .user-menu .signout-container {
        margin-top: .5rem
    }

    .user-menu .user-menu-id {
        display: none
    }

    .user-menu .submenu {
        left: auto;
        max-width: -webkit-max-content;
        max-width: max-content;
        right: 0
    }
}

.dropdown {
    position: relative
}

.dropdown-list {
    background: var(--background-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--elem-radius);
    box-shadow: var(--shadow-01);
    left: 0;
    padding: .5rem;
    position: absolute;
    top: calc(100% + 2px);
    z-index: var(--z-index-low)
}

.dropdown.is-flush-right .dropdown-list {
    left: auto;
    right: 0
}

.dropdown-item .button.action {
    width: 100%
}

.dropdown-item .button.action .button-wrap {
    --button-font: var(--type-smaller-font-size);
    --button-bg: transparent;
    justify-content: flex-start;
    text-align: left;
    text-transform: none
}

.dropdown-item .button.action .button-wrap:hover {
    --button-bg: var(--button-secondary-hover)
}

.dropdown-item .button.action.active-menu-item {
    --button-bg: var(--background-primary);
    --button-border-color: var(--border-secondary)
} 

.top-navigation-main {
    display: none;
    justify-content: space-between;
    padding: 0;
    width: 100%
}

.show-nav .top-navigation-main {
    display: flex;
    flex-direction: column
}

.top-navigation-main .auth-container {
    order: 0
}

.top-navigation-main .header-search {
    order: 1
}

.top-navigation-main .main-nav {
    order: 2
}

.top-navigation-main .notifications-menu {
    order: 3
}

.top-navigation-main .user-menu {
    order: 4
}

.top-navigation-main .top-level-entry-container {
    position: relative
}

.top-navigation-main .top-level-entry-container .submenu {
    z-index: var(--z-index-nav-menu)
}

.top-navigation-main .theme-toggle {
    align-self: end;
    margin-bottom: 1.5rem
}

@media screen and (min-width:992px) {
    .top-navigation-main .theme-toggle {
        align-self: auto;
        margin-bottom: 0
    }
}

.top-navigation-main .button.action:hover {
    --button-bg: var(--border-secondary)
}

.is-transparent .top-navigation-main .button.action:not(:focus):hover {
    --button-border-color: transparent
}

.is-transparent .top-navigation-main .button.action:hover {
    --button-bg: var(--accent-primary-engage)
}

.top-navigation-main .button.action.search-button:hover {
    --button-bg: transparent
}

.top-navigation-main .top-level-entry {
    background: none;
    border-top: 1px solid var(--border-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: block;
    padding: 1rem .5rem;
    text-align: left;
    width: 100%
}

.top-navigation-main .top-level-entry:link,
.top-navigation-main .top-level-entry:visited {
    color: var(--text-secondary)
}

.top-navigation-main .top-level-entry.menu-toggle {
    min-height: 53px;
    padding: .5rem
}

@media screen and (max-width:992px) {
    .top-navigation-main .top-level-entry.button {
        --button-color: var(--text-secondary);
        --button-padding: 0;
        --button-radius: 0
    }

    .top-navigation-main .top-level-entry.button .button-wrap {
        background: none;
        border: none;
        gap: .5rem;
        justify-content: flex-start;
        padding: 0;
        text-transform: none
    }

    .top-navigation-main .top-level-entry.button:focus {
        --button-focus-effect: none
    }
}

@media screen and (min-width:992px) {
    .top-navigation-main .top-level-entry {
        border-radius: var(--elem-radius);
        border-top: none;
        padding: .5rem
    }

    .top-navigation-main .top-level-entry:focus,
    .top-navigation-main .top-level-entry:hover {
        background-color: var(--category-color-background);
        color: var(--category-color);
        text-decoration: none
    }

    .top-navigation-main .top-level-entry.button {
        padding: 0
    }
}

.top-navigation-main .menu-toggle {
    align-items: center;
    display: flex;
    justify-content: space-between;
    position: relative
}

.top-navigation-main .menu-toggle:after {
    background-color: var(--icon-primary);
    content: "";
    height: var(--icon-size);
    margin-left: .2em;
    margin-top: .2em;
    -webkit-mask-image: url(/static/media/chevron.05a124d379047e16d746.svg);
    mask-image: url(/static/media/chevron.05a124d379047e16d746.svg);
    width: var(--icon-size)
}

.top-navigation-main .menu-toggle[aria-expanded=true]:after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.top-navigation-main .menu-toggle+.top-level-entry {
    display: none
}

@media screen and (min-width:992px) {
    .top-navigation-main {
        align-items: center;
        display: flex;
        flex: 1 1;
        flex-direction: row;
        gap: .5rem;
        left: inherit;
        padding: 0;
        position: static;
        top: inherit;
        z-index: inherit
    }

    .show-nav .top-navigation-main {
        flex-direction: row
    }

    .top-navigation-main .main-nav {
        order: 0
    }

    .top-navigation-main .header-search {
        order: 1
    }

    .top-navigation-main .notifications-menu {
        order: 2
    }

    .top-navigation-main .auth-container {
        order: 3
    }

    .top-navigation-main .user-menu {
        order: 4
    }

    .top-navigation-main .main-nav {
        margin-right: auto;
        width: -webkit-max-content;
        width: max-content
    }

    .top-navigation-main .menu-toggle+.top-level-entry {
        display: inline-flex
    }
}

 .theme-switcher-menu {
    margin-bottom: .5rem
}

.theme-switcher-menu .button.action>.button-wrap {
    text-transform: none
}

.theme-switcher-menu .themes-menu .button.button {
    --button-bg: transparent;
    --button-border-color: var(--button-bg);
    --button-color: var(--text-primary);
    border-bottom-width: 0;
    font-size: var(--type-smaller-font-size);
    width: 100%
}

.theme-switcher-menu .themes-menu .button.button .button-wrap {
    border-width: 1px;
    font-weight: 400;
    justify-content: flex-start;
    padding: 1rem
}

.theme-switcher-menu .themes-menu .button.button:focus {
    --button-border-color: var(--button-secondary-border-focus)
}

.theme-switcher-menu .themes-menu .button.button:hover {
    --button-bg: var(--border-secondary)
}

.theme-switcher-menu .active-menu-item .button-wrap,
.theme-switcher-menu .active-menu-item:hover .button-wrap {
    --button-bg: var(--background-primary);
    --button-border-color: var(--border-secondary)
}

.theme-switcher-menu .active-menu-item:focus .button-wrap {
    --button-border-color: var(--button-secondary-border-focus)
}

@media screen and (min-width:769px) {
    .theme-switcher-menu {
        border-bottom: 0;
        margin-bottom: 0
    }

    .theme-switcher-menu .themes-menu {
        top: calc(100% - 1rem)
    }

    .theme-switcher-menu .themes-menu.show {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        max-width: -webkit-max-content;
        max-width: max-content;
        min-width: 130px
    }

    .theme-switcher-menu .themes-menu .submenu-item {
        padding: .5rem 1rem
    }
}

.languages-switcher-menu>.button .button-wrap:after,
.theme-switcher-menu>.button .button-wrap:after {
    background-color: var(--icon-secondary);
    content: "";
    display: block;
    height: 16px;
    margin-left: auto;
    -webkit-mask-image: url(/static/media/chevron.05a124d379047e16d746.svg);
    mask-image: url(/static/media/chevron.05a124d379047e16d746.svg);
    -webkit-mask-size: 16px;
    mask-size: 16px;
    width: 16px
}

.languages-switcher-menu>.button[aria-expanded=true] .button-wrap:after,
.theme-switcher-menu>.button[aria-expanded=true] .button-wrap:after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

@media screen and (min-width:992px) {

    .languages-switcher-menu>.button .button-wrap:after,
    .theme-switcher-menu>.button .button-wrap:after {
        content: normal
    }
}

.maintenance {
    color: var(--text-primary);
    cursor: help;
    flex-flow: column
}

.maintenance .maintenance-info-container {
    cursor: default;
    display: block;
    margin: 0 1rem;
    top: 2rem
}

@media screen and (min-width:992px) {
    .maintenance .maintenance-info-container {
        padding-top: 1rem;
        position: absolute
    }
}

.maintenance .maintenance-info-container .maintenance-info {
    background-color: var(--background-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--elem-radius);
    font-weight: 400;
    padding: 1rem
}

@media screen and (min-width:992px) {
    .maintenance:not(:focus-within):not(:hover) .maintenance-info-container {
        clip: rect(1px, 1px, 1px, 1px) !important;
        border: 0 !important;
        -webkit-clip-path: inset(50%) !important;
        clip-path: inset(50%) !important;
        height: 1px !important;
        margin: -1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        white-space: nowrap !important;
        width: 1px !important
    }
} 

.top-navigation {
    background-color: var(--background-primary);
    border-bottom: 1px solid var(--border-primary);
    position: relative;
    width: 100%;
    z-index: 100
}

.top-navigation .container {
    align-items: center;
    background-color: var(--background-primary);
    display: flex;
    flex-flow: row wrap;
    gap: var(--gutter)
}

@media screen and (min-width:769px) {
    .top-navigation .container {
        background-color: transparent
    }
}

.top-navigation.is-transparent {
    background-color: transparent
}

.top-navigation .top-navigation-wrap {
    align-items: center;
    display: flex;
    flex: 1 1;
    height: var(--top-nav-height);
    justify-content: space-between
}

.top-navigation.show-nav {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
    z-index: var(--z-index-top)
}

.top-navigation.show-nav .container {
    height: auto
}

@media screen and (min-width:992px) {
    .main-menu-toggle {
        display: none
    }

    .top-navigation .top-navigation-wrap {
        flex: 0 1
    }
} 

.breadcrumbs-container {
    align-items: center;
    display: flex;
    margin-right: auto
}

.breadcrumbs-container ol {
    line-height: 1.2
}

.breadcrumbs-container li {
    display: none;
    -webkit-hyphens: auto;
    hyphens: auto
}

.breadcrumbs-container li:first-child,
.breadcrumbs-container li:last-child {
    display: inline-flex
}

.breadcrumbs-container li .breadcrumb:after {
    background-color: var(--icon-secondary);
    content: "";
    display: block;
    flex-shrink: 0;
    height: 12px;
    margin-right: .5rem;
    -webkit-mask-image: url(/static/media/chevron.05a124d379047e16d746.svg);
    mask-image: url(/static/media/chevron.05a124d379047e16d746.svg);
    -webkit-mask-size: 12px;
    mask-size: 12px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    width: 12px
}

.breadcrumbs-container li a {
    align-items: center;
    display: flex
}

.breadcrumbs-container li a:link,
.breadcrumbs-container li a:visited {
    color: var(--text-secondary)
}

.breadcrumbs-container li a:hover {
    text-decoration: underline
}

.breadcrumbs-container li a:focus-visible {
    outline: 0
}

.breadcrumbs-container li a:focus-visible [property=name] {
    outline-color: var(--accent-primary);
    outline-offset: 1px;
    outline-style: auto
}

.breadcrumbs-container li [property=name] {
    display: inline-block;
    margin-right: .5rem
}

@media screen and (min-width:1200px) {
    .breadcrumbs-container li {
        display: inline-flex
    }
}

.watch-menu-item {
    background-color: transparent;
    border-bottom: 1px solid var(--border-primary);
    color: var(--text-primary);
    cursor: pointer;
    padding: 0
}

.watch-menu-item:first-of-type {
    border-top-width: 0
}

.watch-menu-item-inner {
    grid-gap: .5rem;
    display: grid;
    gap: .5rem;
    grid-template-areas: "status label""status text";
    grid-template-columns: 16px 1fr;
    padding: .8125rem var(--gutter-padding);
    text-align: left
}

.watch-menu-item:focus .watch-menu-item-inner {
    box-shadow: var(--focus-effect);
    outline: 1px solid var(--button-secondary-border-focus)
}

.watch-menu-item:hover .watch-menu-item-inner {
    background-color: var(--border-secondary)
}

.watch-menu-item-status {
    grid-area: status
}

.watch-menu-item-label {
    font-family: var(--font-body);
    font-size: var(--type-smaller-font-size);
    font-weight: var(--font-body-strong-weight);
    grid-area: label
}

.watch-menu-item-text {
    font-size: var(--type-smaller-font-size);
    grid-area: text
}

.toast {
    --toast-bg: var(--text-primary);
    --toast-color: var(--background-primary);
    background: var(--toast-bg);
    border-radius: var(--elem-radius);
    bottom: 1rem;
    box-shadow: var(--shadow-02);
    display: flex;
    gap: .5rem;
    left: 50%;
    max-width: 680px;
    padding: 1rem 1rem 1rem 2rem;
    position: fixed;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    width: 90vw
}

.toast-content {
    color: var(--toast-color);
    margin-right: auto
}

.toast .button.action {
    --button-color: var(--toast-color);
    white-space: nowrap
}

.toast .button.action:hover {
    --button-bg: rgba(58, 57, 68, .3);
    --button-border-color: transparent
}

.toast.is-important {
    --toast-bg: var(--accent-secondary);
    --toast-color: #fff
}

.toast-verbose-text {
    display: none
}

@media screen and (min-width:769px) {
    .toast-verbose-text {
        display: inline
    }

    .toast-short-text {
        display: none
    }
}

.languages-switcher-menu.open-on-focus-within .submenu {
    display: block
}

.language-menu .submenu-item {
    padding: .5rem
}

@media(min-width:769px) {
    .language-menu {
        right: 0
    }
} 

.article-actions {
    margin-left: auto
}

.article-actions .article-actions-dialog-heading {
    display: none
}

.article-actions .button.action .button-wrap {
    text-transform: none
}

@media screen and (min-width:769px) {
    .article-actions {
        display: block
    }
}

.article-actions .article-actions-submenu {
    --gutter-padding: 1rem;
    display: none;
    overflow: scroll
}

.article-actions .article-actions-submenu.show {
    background: var(--background-primary);
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: 0;
    position: fixed;
    right: 0;
    top: var(--top-navigation-height);
    z-index: var(--z-index-mid)
}

.article-actions .article-actions-submenu .header {
    border-bottom: 1px solid var(--border-primary);
    color: var(--text-primary);
    display: block;
    font-family: var(--font-body);
    font-size: var(--type-smaller-font-size);
    font-weight: var(--font-body-strong-weight);
    margin: 0;
    padding: 1rem;
    text-align: left;
    width: 100%
}

.article-actions .article-actions-submenu .header .header-inner {
    align-items: center;
    display: flex;
    gap: .5rem;
    position: relative
}

.article-actions .article-actions-submenu .header .icon {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.article-actions .article-actions-submenu .header.desktop-only {
    display: none
}

.article-actions .article-actions-submenu .mdn-form-item,
.article-actions .article-actions-submenu p {
    margin: 0;
    padding: 1rem 1rem 0
}

.article-actions .article-actions-submenu .mdn-form-item:last-child,
.article-actions .article-actions-submenu p:last-child {
    padding-bottom: 1rem
}

@media screen and (min-width:769px) {
    .article-actions .article-actions-submenu.show {
        background-color: var(--background-secondary);
        border: 1px solid var(--border-primary);
        border-radius: var(--elem-radius);
        bottom: auto;
        box-shadow: var(--shadow-02);
        left: auto;
        padding: 0;
        position: absolute;
        right: 0;
        top: calc(100% + 6px);
        width: 316px;
        z-index: var(--z-index-mid)
    }

    .article-actions .article-actions-submenu .header {
        display: block;
        padding: 1rem var(--gutter-padding);
        text-align: center
    }

    .article-actions .article-actions-submenu .header-inner {
        justify-content: center
    }

    .article-actions .article-actions-submenu .header.desktop-only {
        display: block
    }

    .article-actions .article-actions-submenu .header.mobile-only {
        display: none
    }

    .article-actions .article-actions-submenu .header .icon {
        left: 0;
        position: absolute
    }
}

.article-actions-entries {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0
}

@media screen and (min-width:769px) {
    .article-actions-entries {
        display: flex;
        gap: .5rem
    }

    .article-actions-entries .sidebar-toggle {
        display: none
    }
}

.article-actions-entry {
    align-items: center;
    display: flex;
    position: relative
}

@media screen and (max-width:769px) {
    .article-actions.show-actions {
        -webkit-overflow-scrolling: touch;
        background-color: var(--background-primary);
        color: var(--text-primary);
        display: block;
        height: 100vh;
        left: 0;
        overflow: auto;
        position: fixed;
        top: var(--top-navigation-height);
        width: 100vw;
        z-index: var(--z-index-low)
    }

    .article-actions.show-actions .article-actions-entries>li>.button,
    .article-actions.show-actions .article-actions-entries>li>div>.button,
    .article-actions.show-actions>.button {
        --button-radius: 0;
        border-bottom: 1px solid var(--border-secondary);
        width: 100%
    }

    .article-actions.show-actions .article-actions-entries>li>.button .button-wrap,
    .article-actions.show-actions .article-actions-entries>li>div>.button .button-wrap,
    .article-actions.show-actions>.button .button-wrap {
        justify-content: flex-start;
        margin-top: 1px;
        padding: 1.5rem 1rem
    }

    .article-actions.show-actions .article-actions-dialog-heading {
        display: block
    }

    .article-actions.show-actions .article-actions-entries {
        display: block;
        padding: 1rem
    }

    .article-actions.show-actions .article-action-entry,
    .article-actions.show-actions .article-actions-toggle {
        border-bottom: 1px solid var(--border-secondary)
    }

    .article-actions.show-actions .article-actions-entry {
        display: block
    }
}

.article-actions-container {
    align-items: center;
    background-color: var(--background-secondary);
    border-bottom: 1px solid var(--border-primary);
    margin: 0;
    min-height: 2rem;
    padding: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: var(--z-index-low)
}

.article-actions-container .container {
    align-items: center;
    display: flex;
    gap: .5rem;
    justify-content: space-between
}

.article-actions-container .sidebar-button {
    display: none
}

@media screen and (max-width:769px) {
    .article-actions-container .sidebar-button {
        align-items: center;
        align-self: stretch;
        display: flex;
        margin: 0 0 0 -1rem
    }

    .article-actions-container .sidebar-button .button-wrap {
        border-radius: 0;
        border-right: 1px solid var(--border-primary)
    }
}

@media screen and (min-width:769px) {
    .article-actions-container {
        position: static
    }

    .article-actions-container .article-actions-toggle {
        display: none
    }

    .article-actions-container .bookmark-button-container {
        flex: 0 0 40px
    }
}

@media screen and (min-width:1441px) {
    .article-actions-container .container {
        padding-left: 1rem;
        padding-right: 1rem
    }
}

@media screen and (max-width:769px) {
    :root {
        --sticky-header-height: 2rem
    }
}

.offline-status-bar {
    background-color: var(--accent-primary-engage);
    color: var(--text-primary);
    display: none
}

.offline-status-bar.is-offline,
.offline-status-bar.is-online {
    display: block;
    padding: 1rem;
    text-align: center
}

.offline-status-bar.is-online {
    -webkit-animation: fade-out 3s ease-out .5s;
    animation: fade-out 3s ease-out .5s
}

@-webkit-keyframes fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.document-toc {
    margin-bottom: 2rem;
    padding: 0;
    position: relative
}

@media screen and (max-width:426px) {
    .document-toc {
        padding: 0 1rem
    }
}

.document-toc-heading.document-toc-heading {
    font: var(--type-heading-h5);
    letter-spacing: 1.5px;
    margin: 0 0 1rem
}

.document-toc-list.document-toc-list {
    font-size: var(--type-smaller-font-size);
    list-style: none;
    padding-left: 0
}

.document-toc-list.document-toc-list li {
    margin: 0
}

.document-toc-link.document-toc-link:not(.button) {
    border-left: 2px solid var(--border-secondary);
    color: var(--text-secondary);
    display: block;
    padding: .5rem 1rem;
    text-decoration: none
}

.document-toc-link.document-toc-link:not(.button):hover {
    color: var(--text-link)
}

.document-toc-link.document-toc-link:not(.button)[aria-current]:not([aria-current=""]):not([aria-current=false]) {
    background-color: var(--background-toc-active);
    border-left: 2px solid var(--category-color);
    color: var(--text-primary);
    font-weight: 600
}

.document-toc-item-sub>.document-toc-link:not(.button) {
    padding-left: 2rem
}

.document-toc .show-toc {
    display: block
}

.sidebar {
    --offset: var(--main-document-header-height);
    --max-height: calc(100vh - var(--offset));
    color: var(--text-secondary)
}

.sidebar .backdrop {
    display: none
}

@media screen and (max-width:768px) {
    .sidebar {
        height: 100vh;
        left: 0;
        max-height: 100vh;
        position: fixed;
        right: 0;
         /* top: --var(--offset)  */
    }

    .sidebar,
    .sidebar .sidebar-inner {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        z-index: var(--z-index-top)
    }

    .sidebar .sidebar-inner {
        background: var(--background-primary);
        border-right: 1px solid var(--border-primary);
        height: var(--max-height);
        max-height: var(--max-height);
        max-width: 20rem;
        overflow: hidden;
        overflow: auto;
        padding: 1rem;
        position: relative;
        transition: transform .2s linear;
        width: 80vw;
        will-change: transform
    }

    .sidebar .backdrop {
        background: rgba(0, 0, 0, .3);
        border-radius: 0;
        bottom: 0;
        cursor: default;
        display: flex;
        left: 0;
        opacity: 0;
        position: fixed;
        right: 0;
        top: 0;
        transition: opacity .2s linear;
        width: 100%;
        will-change: opacity;
        z-index: var(--z-index-mid)
    }

    .sidebar.is-animating,
    .sidebar.is-expanded,
    .sidebar.is-expanded .sidebar-inner {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    .sidebar.is-expanded .backdrop {
        opacity: 1
    }
}

@media screen and (min-width:769px) {
    .sidebar {
        display: flex;
        max-height: var(--max-height);
        overflow: auto;
        position: -webkit-sticky;
        position: sticky;
        top: var(--offset)
    }
}

.sidebar-heading {
    color: var(--text-primary);
    font: var(--type-heading-h5);
    letter-spacing: 1.5px;
    margin: 0
}

.sidebar em {
    background-color: var(--background-toc-active);
    border-left: 2px solid var(--category-color);
    display: inline-block;
    font-style: normal;
    font-weight: 600;
    padding: .25rem .25rem .25rem .5rem;
    width: 100%
}

.sidebar a,
.sidebar em {
    -webkit-hyphens: auto;
    hyphens: auto
}

.sidebar a {
    color: var(--text-secondary);
    display: inline-flex;
    padding: .25rem
}

.sidebar a:focus,
.sidebar a:hover {
    text-decoration: underline
}

.sidebar .no-link {
    display: inline-flex;
    padding: .25rem
}

.sidebar strong {
    display: flex;
    font-size: var(--type-base-font-size-rem);
    margin-top: 1rem
}

.sidebar ol {
    font-size: var(--type-smaller-font-size)
}

.sidebar ol ol,
.sidebar ol ul {
    padding-left: .5rem
}

.sidebar ol ol li .icon {
    margin-right: .01em
}

.sidebar ol ol li.no-bullet {
    display: block;
    font-weight: var(--font-body-strong-weight);
    list-style-type: none
}

.sidebar .sidebar-heading~div>ol,
.sidebar .sidebar-heading~ol {
    margin-top: 1rem
}

.sidebar li,
.sidebar summary {
    margin-bottom: .5rem
}

.sidebar code,
.sidebar summary {
    font-size: var(--type-smaller-font-size)
}

.sidebar code {
    word-wrap: break-word;
    background-color: transparent;
    background-color: initial;
    border-radius: var(--elem-radius);
    font-family: var(--font-code);
    line-height: 1.2;
    padding: .125rem;
    white-space: normal
}

.sidebar summary {
    cursor: pointer
}

.sidebar details {
    margin: .75rem 0
}

.sidebar details ol {
    padding-left: .75rem
}

.sidebar .icon {
    align-self: center;
    background-size: 14px;
    height: 14px;
    margin-right: -.25rem;
    -webkit-mask-size: 14px;
    mask-size: 14px;
    width: 14px
}

.sidebar .icon-experimental,
.sidebar .icon-nonstandard {
    background-color: var(--icon-information)
}

.sidebar .icon-deprecated {
    background-color: var(--icon-critical)
}

.main-content.standalone {
    margin: 0 auto;
    max-width: var(--max-width);
    width: 100%
}

.main-page-content .metadata {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--elem-radius);
    box-shadow: var(--shadow-01);
    margin: 2rem 0;
    padding: 1rem
}

.main-page-content .metadata h3 {
    font: var(--type-heading-h4);
    margin-top: .5rem;
    padding: 0
}

.metadata-content-container {
    margin: 0 auto;
    max-width: 1440px;
    width: 100%
}

.metadata-content-container .last-modified-date {
    margin-bottom: 0
}

:root,
body {
    --mdn-color-white: #fff;
    --mdn-color-black: #000;
    --mdn-color-dark-grey: #4e4e4e;
    --mdn-background-dark: #1b1b1b;
    --mdn-background-light: #fff;
    --mdn-background-light-grey: #e2e2e2;
    --color-announcement-banner-accent: #ff6d91
}

 .light {
    --text-primary: #1b1b1b;
    --text-secondary: #4e4e4e;
    --text-inactive: #9e9e9ea6;
    --text-link: #0069c2;
    --text-invert: #fff;
    --background-primary: #fff;
    --background-secondary: #f9f9fb;
    --background-tertiary: #fff;
    --background-toc-active: #ebeaea;
    --background-mark-yellow: rgba(199, 183, 0, .4);
    --background-mark-green: rgba(0, 208, 97, .4);
    --background-information: rgba(0, 133, 242, .1);
    --background-warning: rgba(255, 42, 81, .1);
    --background-critical: rgba(211, 0, 56, .1);
    --background-success: rgba(0, 121, 54, .1);
    --border-primary: #cdcdcd;
    --border-secondary: #cdcdcd;
    --button-primary-default: #1b1b1b;
    --button-primary-hover: #696969;
    --button-primary-active: #9e9e9e;
    --button-primary-inactive: #1b1b1b;
    --button-secondary-default: #fff;
    --button-secondary-hover: #cdcdcd;
    --button-secondary-active: #cdcdcd;
    --button-secondary-inactive: #f9f9fb;
    --button-secondary-border-focus: #0085f2;
    --button-secondary-border-red: #ff97a0;
    --button-secondary-border-red-focus: #ffd9dc;
    --icon-primary: #696969;
    --icon-secondary: #b3b3b3;
    --icon-information: #0085f2;
    --icon-warning: #ff2a51;
    --icon-critical: #d30038;
    --icon-success: #007936;
    --accent-primary: #0085f2;
    --accent-primary-engage: rgba(0, 133, 242, .1);
    --accent-secondary: #0085f2;
    --accent-tertiary: rgba(0, 133, 242, .1);
    --shadow-01: 0px 1px 2px rgba(43, 42, 51, .05);
    --shadow-02: 0px 1px 6px rgba(43, 42, 51, .1);
    --focus-01: 0px 0px 0px 3px rgba(0, 144, 237, .4);
    --field-focus-border: #0085f2;
    --code-token-tag: #0069c2;
    --code-token-punctuation: #9e9e9e;
    --code-token-attribute-name: #d30038;
    --code-token-attribute-value: #007936;
    --code-token-comment: #9e9e9e;
    --code-token-default: #1b1b1b;
    --code-token-selector: #872bff;
    --code-background-inline: #f2f1f1;
    --code-background-block: #f2f1f1;
    --notecard-link-color: #343434;
    --scrollbar-bg: transparent;
    --scrollbar-color: rgba(0, 0, 0, .25);
    --category-color: #0085f2;
    --category-color-background: #0085f210;
    --code-color: #5e9eff;
    --mark-color: #dce2f2;
    --plus-accent-color: #d30038;
    --html-accent-color: #d30038;
    --css-accent-color: #0069c2;
    --js-accent-color: #afa100;
    --http-accent-color: #007936;
    --apis-accent-color: #872bff;
    --learn-accent-color: #d00058;
    --plus-code-color: #0069c2;
    --html-code-color: #9e0027;
    --css-code-color: #0069c2;
    --js-code-color: #746a00;
    --http-code-color: #007936;
    --apis-code-color: #872bff;
    --learn-code-color: #d00058;
    --plus-mark-color: #ffd9dc;
    --html-mark-color: #ffd9dc;
    --css-mark-color: #dce2f2;
    --js-mark-color: #f0e498;
    --http-mark-color: #a9f3ba;
    --apis-mark-color: #e6deff;
    --learn-mark-color: #ffd9df;
    --plus-accent-background-color: #ff2a5130;
    --html-accent-background-color: #ff2a5130;
    --css-accent-background-color: #0085f230;
    --js-accent-background-color: #93870030;
    --http-accent-background-color: #009a4630;
    --apis-accent-background-color: #9b65ff30;
    --learn-accent-background-color: #ff1f7230;
    --plus-accent-engage: rgba(255, 42, 81, .7);
    --html-accent-engage: rgba(255, 42, 81, .7);
    --css-accent-engage: rgba(0, 133, 242, .7);
    --js-accent-engage: rgba(147, 135, 0, .7);
    --http-accent-engage: rgba(0, 154, 70, .7);
    --apis-accent-engage: rgba(155, 101, 255, .7);
    --learn-accent-engage: rgba(255, 31, 114, .7);
    --modal-backdrop-color: rgba(27, 27, 27, .1);
    --blend-color: #fff80;
    --text-primary-red: #d30038;
    --text-primary-green: #007936;
    --text-primary-blue: #0069c2;
    --text-primary-yellow: #746a00;
    color-scheme: light
}

.dark {
    --text-primary: #fff;
    --text-secondary: #cdcdcd;
    --text-inactive: #cdcdcda6;
    --text-link: #8cb4ff;
    --text-invert: #1b1b1b;
    --background-primary: #1b1b1b;
    --background-secondary: #343434;
    --background-tertiary: #4e4e4e;
    --background-toc-active: #343434;
    --background-mark-yellow: rgba(199, 183, 0, .4);
    --background-mark-green: rgba(0, 208, 97, .4);
    --background-information: rgba(0, 133, 242, .1);
    --background-warning: rgba(255, 42, 81, .1);
    --background-critical: rgba(211, 0, 56, .1);
    --background-success: rgba(0, 121, 54, .1);
    --border-primary: #858585;
    --border-secondary: #696969;
    --button-primary-default: #fff;
    --button-primary-hover: #cdcdcd;
    --button-primary-active: #9e9e9e;
    --button-primary-inactive: #fff;
    --button-secondary-default: #4e4e4e;
    --button-secondary-hover: #858585;
    --button-secondary-active: #9e9e9e;
    --button-secondary-inactive: #4e4e4e;
    --button-secondary-border-focus: #0085f2;
    --button-secondary-border-red: #ff97a0;
    --button-secondary-border-red-focus: #ffd9dc;
    --icon-primary: #fff;
    --icon-secondary: #b3b3b3;
    --icon-information: #5e9eff;
    --icon-warning: #afa100;
    --icon-critical: #ff707f;
    --icon-success: #00b755;
    --accent-primary: #5e9eff;
    --accent-primary-engage: rgba(94, 158, 255, .1);
    --accent-secondary: #5e9eff;
    --accent-tertiary: rgba(0, 133, 242, .1);
    --shadow-01: 0px 1px 2px rgba(251, 251, 254, .2);
    --shadow-02: 0px 1px 6px rgba(251, 251, 254, .2);
    --focus-01: 0px 0px 0px 3px rgba(251, 251, 254, .5);
    --field-focus-border: #fff;
    --code-token-tag: #c1cff1;
    --code-token-punctuation: #9e9e9e;
    --code-token-attribute-name: #ff97a0;
    --code-token-attribute-value: #00d061;
    --code-token-comment: #9e9e9e;
    --code-token-default: #fff;
    --code-token-selector: #bea5ff;
    --code-background-inline: #343434;
    --code-background-block: #343434;
    --notecard-link-color: #e2e2e2;
    --scrollbar-bg: transparent;
    --scrollbar-color: hsla(0, 0%, 100%, .25);
    --category-color: #8cb4ff;
    --category-color-background: #8cb4ff70;
    --code-color: #c1cff1;
    --mark-color: #004d92;
    --plus-accent-color: #ff97a0;
    --html-accent-color: #ff707f;
    --css-accent-color: #8cb4ff;
    --js-accent-color: #afa100;
    --http-accent-color: #00b755;
    --apis-accent-color: #ae8aff;
    --learn-accent-color: #ff6d91;
    --plus-code-color: #c1cff1;
    --html-code-color: #f9f9fb;
    --css-code-color: #c1cff1;
    --js-code-color: #c7b700;
    --http-code-color: #00d061;
    --apis-code-color: #bea5ff;
    --learn-code-color: #ff93aa;
    --plus-mark-color: #9e0027;
    --html-mark-color: #9e0027;
    --css-mark-color: #004d92;
    --js-mark-color: #564e00;
    --http-mark-color: #005a26;
    --apis-mark-color: #6800cf;
    --learn-mark-color: #9e0041;
    --plus-accent-background-color: #ff2a5130;
    --html-accent-background-color: #ff2a5130;
    --css-accent-background-color: #0085f230;
    --js-accent-background-color: #93870030;
    --http-accent-background-color: #009a4630;
    --apis-accent-background-color: #9b65ff30;
    --learn-accent-background-color: #ff1f7230;
    --plus-accent-engage: rgba(255, 112, 127, .7);
    --html-accent-engage: rgba(255, 112, 127, .7);
    --css-accent-engage: rgba(140, 180, 255, .7);
    --js-accent-engage: rgba(175, 161, 0, .7);
    --http-accent-engage: rgba(0, 183, 85, .7);
    --apis-accent-engage: rgba(174, 138, 255, .7);
    --learn-accent-engage: rgba(255, 109, 145, .7);
    --modal-backdrop-color: rgba(27, 27, 27, .7);
    --blend-color: #00080;
    --text-primary-red: #ff97a0;
    --text-primary-green: #00d061;
    --text-primary-blue: #8cb4ff;
    --text-primary-yellow: #c7b700;
    color-scheme: dark
}

@media(prefers-color-scheme:light) {
    :root:not(.light):not(.dark) {
        --text-primary: #1b1b1b;
        --text-secondary: #4e4e4e;
        --text-inactive: #9e9e9ea6;
        --text-link: #0069c2;
        --text-invert: #fff;
        --background-primary: #fff;
        --background-secondary: #f9f9fb;
        --background-tertiary: #fff;
        --background-toc-active: #ebeaea;
        --background-mark-yellow: rgba(199, 183, 0, .4);
        --background-mark-green: rgba(0, 208, 97, .4);
        --background-information: rgba(0, 133, 242, .1);
        --background-warning: rgba(255, 42, 81, .1);
        --background-critical: rgba(211, 0, 56, .1);
        --background-success: rgba(0, 121, 54, .1);
        --border-primary: #cdcdcd;
        --border-secondary: #cdcdcd;
        --button-primary-default: #1b1b1b;
        --button-primary-hover: #696969;
        --button-primary-active: #9e9e9e;
        --button-primary-inactive: #1b1b1b;
        --button-secondary-default: #fff;
        --button-secondary-hover: #cdcdcd;
        --button-secondary-active: #cdcdcd;
        --button-secondary-inactive: #f9f9fb;
        --button-secondary-border-focus: #0085f2;
        --button-secondary-border-red: #ff97a0;
        --button-secondary-border-red-focus: #ffd9dc;
        --icon-primary: #696969;
        --icon-secondary: #b3b3b3;
        --icon-information: #0085f2;
        --icon-warning: #ff2a51;
        --icon-critical: #d30038;
        --icon-success: #007936;
        --accent-primary: #0085f2;
        --accent-primary-engage: rgba(0, 133, 242, .1);
        --accent-secondary: #0085f2;
        --accent-tertiary: rgba(0, 133, 242, .1);
        --shadow-01: 0px 1px 2px rgba(43, 42, 51, .05);
        --shadow-02: 0px 1px 6px rgba(43, 42, 51, .1);
        --focus-01: 0px 0px 0px 3px rgba(0, 144, 237, .4);
        --field-focus-border: #0085f2;
        --code-token-tag: #0069c2;
        --code-token-punctuation: #9e9e9e;
        --code-token-attribute-name: #d30038;
        --code-token-attribute-value: #007936;
        --code-token-comment: #9e9e9e;
        --code-token-default: #1b1b1b;
        --code-token-selector: #872bff;
        --code-background-inline: #f2f1f1;
        --code-background-block: #f2f1f1;
        --notecard-link-color: #343434;
        --scrollbar-bg: transparent;
        --scrollbar-color: rgba(0, 0, 0, .25);
        --category-color: #0085f2;
        --category-color-background: #0085f210;
        --code-color: #5e9eff;
        --mark-color: #dce2f2;
        --plus-accent-color: #d30038;
        --html-accent-color: #d30038;
        --css-accent-color: #0069c2;
        --js-accent-color: #afa100;
        --http-accent-color: #007936;
        --apis-accent-color: #872bff;
        --learn-accent-color: #d00058;
        --plus-code-color: #0069c2;
        --html-code-color: #9e0027;
        --css-code-color: #0069c2;
        --js-code-color: #746a00;
        --http-code-color: #007936;
        --apis-code-color: #872bff;
        --learn-code-color: #d00058;
        --plus-mark-color: #ffd9dc;
        --html-mark-color: #ffd9dc;
        --css-mark-color: #dce2f2;
        --js-mark-color: #f0e498;
        --http-mark-color: #a9f3ba;
        --apis-mark-color: #e6deff;
        --learn-mark-color: #ffd9df;
        --plus-accent-background-color: #ff2a5130;
        --html-accent-background-color: #ff2a5130;
        --css-accent-background-color: #0085f230;
        --js-accent-background-color: #93870030;
        --http-accent-background-color: #009a4630;
        --apis-accent-background-color: #9b65ff30;
        --learn-accent-background-color: #ff1f7230;
        --plus-accent-engage: rgba(255, 42, 81, .7);
        --html-accent-engage: rgba(255, 42, 81, .7);
        --css-accent-engage: rgba(0, 133, 242, .7);
        --js-accent-engage: rgba(147, 135, 0, .7);
        --http-accent-engage: rgba(0, 154, 70, .7);
        --apis-accent-engage: rgba(155, 101, 255, .7);
        --learn-accent-engage: rgba(255, 31, 114, .7);
        --modal-backdrop-color: rgba(27, 27, 27, .1);
        --blend-color: #fff80;
        --text-primary-red: #d30038;
        --text-primary-green: #007936;
        --text-primary-blue: #0069c2;
        --text-primary-yellow: #746a00;
        color-scheme: light
    }
}

@media(prefers-color-scheme:dark) {
    :root:not(.light):not(.dark) {
        --text-primary: #fff;
        --text-secondary: #cdcdcd;
        --text-inactive: #cdcdcda6;
        --text-link: #8cb4ff;
        --text-invert: #1b1b1b;
        --background-primary: #1b1b1b;
        --background-secondary: #343434;
        --background-tertiary: #4e4e4e;
        --background-toc-active: #343434;
        --background-mark-yellow: rgba(199, 183, 0, .4);
        --background-mark-green: rgba(0, 208, 97, .4);
        --background-information: rgba(0, 133, 242, .1);
        --background-warning: rgba(255, 42, 81, .1);
        --background-critical: rgba(211, 0, 56, .1);
        --background-success: rgba(0, 121, 54, .1);
        --border-primary: #858585;
        --border-secondary: #696969;
        --button-primary-default: #fff;
        --button-primary-hover: #cdcdcd;
        --button-primary-active: #9e9e9e;
        --button-primary-inactive: #fff;
        --button-secondary-default: #4e4e4e;
        --button-secondary-hover: #858585;
        --button-secondary-active: #9e9e9e;
        --button-secondary-inactive: #4e4e4e;
        --button-secondary-border-focus: #0085f2;
        --button-secondary-border-red: #ff97a0;
        --button-secondary-border-red-focus: #ffd9dc;
        --icon-primary: #fff;
        --icon-secondary: #b3b3b3;
        --icon-information: #5e9eff;
        --icon-warning: #afa100;
        --icon-critical: #ff707f;
        --icon-success: #00b755;
        --accent-primary: #5e9eff;
        --accent-primary-engage: rgba(94, 158, 255, .1);
        --accent-secondary: #5e9eff;
        --accent-tertiary: rgba(0, 133, 242, .1);
        --shadow-01: 0px 1px 2px rgba(251, 251, 254, .2);
        --shadow-02: 0px 1px 6px rgba(251, 251, 254, .2);
        --focus-01: 0px 0px 0px 3px rgba(251, 251, 254, .5);
        --field-focus-border: #fff;
        --code-token-tag: #c1cff1;
        --code-token-punctuation: #9e9e9e;
        --code-token-attribute-name: #ff97a0;
        --code-token-attribute-value: #00d061;
        --code-token-comment: #9e9e9e;
        --code-token-default: #fff;
        --code-token-selector: #bea5ff;
        --code-background-inline: #343434;
        --code-background-block: #343434;
        --notecard-link-color: #e2e2e2;
        --scrollbar-bg: transparent;
        --scrollbar-color: hsla(0, 0%, 100%, .25);
        --category-color: #8cb4ff;
        --category-color-background: #8cb4ff70;
        --code-color: #c1cff1;
        --mark-color: #004d92;
        --plus-accent-color: #ff97a0;
        --html-accent-color: #ff707f;
        --css-accent-color: #8cb4ff;
        --js-accent-color: #afa100;
        --http-accent-color: #00b755;
        --apis-accent-color: #ae8aff;
        --learn-accent-color: #ff6d91;
        --plus-code-color: #c1cff1;
        --html-code-color: #f9f9fb;
        --css-code-color: #c1cff1;
        --js-code-color: #c7b700;
        --http-code-color: #00d061;
        --apis-code-color: #bea5ff;
        --learn-code-color: #ff93aa;
        --plus-mark-color: #9e0027;
        --html-mark-color: #9e0027;
        --css-mark-color: #004d92;
        --js-mark-color: #564e00;
        --http-mark-color: #005a26;
        --apis-mark-color: #6800cf;
        --learn-mark-color: #9e0041;
        --plus-accent-background-color: #ff2a5130;
        --html-accent-background-color: #ff2a5130;
        --css-accent-background-color: #0085f230;
        --js-accent-background-color: #93870030;
        --http-accent-background-color: #009a4630;
        --apis-accent-background-color: #9b65ff30;
        --learn-accent-background-color: #ff1f7230;
        --plus-accent-engage: rgba(255, 112, 127, .7);
        --html-accent-engage: rgba(255, 112, 127, .7);
        --css-accent-engage: rgba(140, 180, 255, .7);
        --js-accent-engage: rgba(175, 161, 0, .7);
        --http-accent-engage: rgba(0, 183, 85, .7);
        --apis-accent-engage: rgba(174, 138, 255, .7);
        --learn-accent-engage: rgba(255, 109, 145, .7);
        --modal-backdrop-color: rgba(27, 27, 27, .7);
        --blend-color: #00080;
        --text-primary-red: #ff97a0;
        --text-primary-green: #00d061;
        --text-primary-blue: #8cb4ff;
        --text-primary-yellow: #c7b700;
        color-scheme: dark
    }
} 

.document-page .article-actions-container,
.document-page .document-toc-container,
.document-page .generic-loading,
.document-page .main-content,
.document-page .metadata,
.document-page .page-header,
.document-page .sidebar {
    display: flex
}

.document-page .main-content,
.document-page .sidebar {
    flex-direction: column;
    width: 100%
}

.main-wrapper {
    display: flex;
    margin: 0 auto;
    max-width: var(--max-width)
}

.main-wrapper .toc {
    display: none
}

@media screen and (min-width:769px) {
    .main-wrapper {
        grid-gap: 3rem;
        display: grid;
        gap: 3rem;
         /* grid-template-areas: "sidebar main"; 
         grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);  */
        padding-left: 1.5rem;
        padding-right: 3rem
    }

    .main-wrapper .main-content,
    .main-wrapper .sidebar,
    .main-wrapper .toc {
        padding-bottom: 3rem;
        padding-top: 3rem
    }

    .main-wrapper .sidebar {
        align-self: start;
        grid-area: sidebar
    }

    .main-wrapper .main-content {
        grid-area: main
    }
}

@media screen and (min-width:1200px) {
    .main-wrapper {
        grid-gap: 3rem;
        display: grid;
        gap: 3rem;
         /* grid-template-areas: "sidebar main toc"; 
         grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 15rem);  */
        padding-left: 1rem;
        padding-right: 1rem
    }

    .main-wrapper .toc {
        --offset: var(--main-document-header-height);
        --max-height: calc(100vh - var(--offset));
        display: block;
        grid-area: toc;
        max-height: var(--max-height);
        overflow: auto;
        position: -webkit-sticky;
        position: sticky;
        top: var(--offset)
    }

    .main-wrapper .in-nav-toc {
        display: none
    }
}

.page-wrapper {
    grid-template-columns: 100%
}

.standard-page {
    max-width: inherit
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-stretch: 75% 100%;
    font-style: oblique 0deg 20deg;
    font-weight: 1 999;
    src: url(/website/fonts/Inter.var.woff2) format("woff2 supports variations"), url(/website/fonts/Inter.var.woff2) format("woff2-variations")
}

:root {
    --sticky-header-height: var(--main-document-header-height)
}

.main-document-header-container {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: var(--z-index-top)
}

.main-page-content {
    overflow-wrap: break-word;
    padding: 3rem 1rem 1rem
}

.main-page-content h1 a:link,
.main-page-content h1 a:visited,
.main-page-content h2 a:link,
.main-page-content h2 a:visited,
.main-page-content h3 a:link,
.main-page-content h3 a:visited,
.main-page-content h4 a:link,
.main-page-content h4 a:visited,
.main-page-content h5 a:link,
.main-page-content h5 a:visited,
.main-page-content h6 a:link,
.main-page-content h6 a:visited {
    color: var(--text-primary);
    text-decoration: none
}

.main-page-content h1 a:focus,
.main-page-content h1 a:hover,
.main-page-content h2 a:focus,
.main-page-content h2 a:hover,
.main-page-content h3 a:focus,
.main-page-content h3 a:hover,
.main-page-content h4 a:focus,
.main-page-content h4 a:hover,
.main-page-content h5 a:focus,
.main-page-content h5 a:hover,
.main-page-content h6 a:focus,
.main-page-content h6 a:hover {
    text-decoration: underline
}

.main-page-content h1 a:active,
.main-page-content h2 a:active,
.main-page-content h3 a:active,
.main-page-content h4 a:active,
.main-page-content h5 a:active,
.main-page-content h6 a:active {
    background-color: transparent
}

.main-page-content h1 a[href^="#"]:hover:after,
.main-page-content h2 a[href^="#"]:hover:after,
.main-page-content h3 a[href^="#"]:hover:after,
.main-page-content h4 a[href^="#"]:hover:after,
.main-page-content h5 a[href^="#"]:hover:after,
.main-page-content h6 a[href^="#"]:hover:after {
    color: var(--text-inactive);
    content: "#";
    display: inline-flex;
    font-size: .7em;
    line-height: 1;
    margin-left: 4px;
    text-decoration: none
}

.main-page-content h1:after {
    -webkit-text-decoration-color: var(--category-color);
    text-decoration-color: var(--category-color)
}

.main-page-content h2:first-of-type {
    margin-top: 2rem
}

.main-page-content a:not(.button) {
    color: var(--text-link);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.main-page-content a:not(.button):active {
    background-color: var(--text-link);
    color: #fff
}

.main-page-content a:not(.button):active code {
    background-color: transparent;
    color: #fff
}

.main-page-content a:not(.button)[id^=attr-]:link,
.main-page-content a:not(.button)[id^=attr-]:visited {
    color: var(--text-link);
    text-decoration: none
}

.main-page-content a:not(.button)[id^=attr-]:focus,
.main-page-content a:not(.button)[id^=attr-]:hover {
    text-decoration: underline
}

.main-page-content a:not(.button)[id^=attr-]:active {
    color: #fff
}

.main-page-content a:not(.button)[aria-current] {
    color: var(--text-link);
    font-weight: var(--font-body-strong-weight);
    text-decoration: none
}

.main-page-content img {
    background: #fff;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--elem-radius);
    display: inline-block;
    display: flex;
    height: auto;
    margin: 2rem auto
}

.main-page-content ol,
.main-page-content ul {
    margin: 1rem 0 2rem;
    padding-left: 2rem
}

.main-page-content ol li,
.main-page-content ul li {
    margin: .5rem 0
}

.main-page-content ul {
    list-style: disc
}

.main-page-content ul ul {
    list-style-type: circle;
    margin: 0;
    padding-left: 1rem
}

.main-page-content ol {
    list-style: decimal
}

.main-page-content ol ol {
    list-style: lower-roman;
    margin: 0
}

.main-page-content dd ol,
.main-page-content dd ul {
    margin-bottom: 1rem;
    padding-left: 3rem
}

.main-page-content td ol,
.main-page-content td ul {
    padding-left: 1rem
}

.main-page-content dd li {
    margin-bottom: 1rem
}

.main-page-content td li {
    margin-bottom: .5rem
}

.main-page-content dl dt {
    margin-bottom: .5rem;
    margin-top: 2rem
}

.main-page-content dl dd {
    margin-bottom: 1rem;
    margin-left: 1rem
}

.main-page-content dl dd .notecard p {
    padding-left: 0
}

.main-page-content dl p {
    margin: 0 0 1rem
}

.main-page-content .section-content p {
    font: var(--type-article-p)
}

.main-page-content .section-content p:last-child {
    margin-bottom: 2rem
}

.main-page-content .section-content figure {
    margin-bottom: 1rem
}

.main-page-content .section-content .prev-next {
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    text-align: center
}

.main-page-content .section-content .prev-next li {
    display: flex;
    margin: 0
}

.main-page-content .section-content .prev-next .button {
    margin: 0;
    max-width: inherit
}

.main-page-content .section-content .prev-next .button-wrap {
    color: inherit
}

@media screen and (min-width:426px) {
    .main-page-content {
        padding: 3rem
    }
}

@media screen and (min-width:769px) {
    .main-page-content {
        margin-bottom: .5rem;
        padding: 0
    }
}

b,
strong {
    font-weight: var(--font-body-strong-weight);
    letter-spacing: .02rem
}

table {
    border: 1px solid var(--border-primary);
    border-collapse: collapse;
    width: 100%
}

table th {
    background: var(--background-tertiary);
    font-weight: var(--font-body-strong-weight);
    line-height: 1.5;
    text-align: left
}

table td,
table th {
    border: 1px solid var(--border-primary);
    padding: .5rem .75rem;
    vertical-align: middle
}

table td .code-example pre,
table td ul {
    margin: 0
}

table caption {
    font-weight: var(--font-body-strong-weight);
    margin: 1rem 0 .5rem
}

table.properties {
    border: none;
    font-size: var(--type-base-font-size)
}

table.properties td,
table.properties th {
    border: none
}

table.properties th {
    background: none
}

table.properties tr {
    border-bottom: 1px solid var(--border-secondary)
}

table.properties tr:first-child {
    border-top: 1px solid var(--border-primary)
}

table.properties tr:last-child {
    border-bottom: 1px solid var(--border-primary)
}

table.properties tr:nth-child(odd) td,
table.properties tr:nth-child(odd) th,
table.standard-table tr:nth-child(odd) td,
table.standard-table tr:nth-child(odd) th {
    background-color: var(--background-secondary)
}

iframe {
    border: 1px solid var(--border-primary);
    max-width: 100%;
    width: 100%
}

iframe.nobutton,
iframe.sample-code-frame,
iframe[src*="https://jsfiddle.net"],
iframe[src*="https://mdn.github.io"],
iframe[src*="https://test262.report"],
iframe[src*="https://www.youtube-nocookie.com"] {
    background: #fff;
    border: 1px solid var(--border-primary);
    border-radius: var(--elem-radius);
    width: 100%
}

h1,
h2,
h3 {
    letter-spacing: var(--heading-letter-spacing)
}

h1 {
    font: var(--type-heading-h1);
    margin-bottom: 2rem;
    word-break: break-word
}

@media screen and (min-width:769px) {
    h1 {
        font: var(--type-heading-h1)
    }
}

h2 {
    font: var(--type-heading-h2);
    margin: 4rem 0 .5rem
}

h3 {
    font: var(--type-heading-h3);
    margin: 2rem 0 .5rem
}

h2~div~h3,
h2~h3 {
    margin-top: 1rem
}

h4 {
    font: var(--type-heading-h4);
    letter-spacing: .5px;
    margin: 2rem 0 1rem
}

h5 {
    font: var(--type-heading-h5)
}

h5,
h6 {
    letter-spacing: 1.5px;
    margin: 2rem 0 1rem;
    text-transform: uppercase
}

h6 {
    font: var(--type-heading-h6)
}

h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
    font-size: inherit
}

p {
    margin: 1rem 0 2rem
}

blockquote {
    border-left: 4px solid var(--border-secondary);
    color: var(--text-secondary);
    margin-bottom: 2rem;
    padding: 1rem 2rem
}

blockquote p {
    margin: 0
}

.code-example,
code,
pre {
    border-radius: var(--elem-radius);
    font-size: var(--type-base-font-size-rem)
}

code {
    background: var(--code-background-inline);
    padding: .125rem .25rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

pre {
    background-color: var(--code-background-block);
    border: 1px solid transparent;
    margin: 1rem 0 2rem;
    padding: 1rem 2.5rem 1rem 1rem
}

pre code {
    background: none;
    color: var(--text-primary);
    padding: 0
}

.example-bad,
.example-good {
    padding: 0 1rem;
    position: relative
}

.example-bad:after,
.example-good:after {
    background-size: 24px;
    content: "";
    display: block;
    height: 16px;
    position: absolute;
    right: 16px;
    top: 18px;
    width: 16px
}

.example-bad+.copy-icon,
.example-good+.copy-icon {
    display: none
}

.example-bad {
    background-color: var(--background-critical)
}

.example-bad:after {
    background-color: var(--icon-critical);
    -webkit-mask-image: url(/static/media/no.d2e0aa3e7440f80dccd6.svg);
    mask-image: url(/static/media/no.d2e0aa3e7440f80dccd6.svg)
}

.example-good {
    background-color: var(--background-success)
}

.example-good:after {
    background-color: var(--icon-success);
    -webkit-mask-image: url(/static/media/checkmark.d05ce91f65dfc321cadd.svg);
    mask-image: url(/static/media/checkmark.d05ce91f65dfc321cadd.svg)
}

.index {
    margin-bottom: 1rem
}

.index ul {
    margin: .5rem 0 2rem
}

@media screen and (min-width:1200px) {
    .index ul {
        -webkit-columns: 3;
        column-count: 3
    }
}

.index ul li {
    margin: 0 0 .5rem
}

.index .icon-experimental,
.index .icon-nonstandard {
    color: var(--icon-information)
}

.index .icon-deprecated {
    color: var(--icon-critical)
}

.callout {
    background: var(--background-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--elem-radius);
    box-shadow: var(--shadow-01);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 2rem 0;
    padding: 1rem;
    text-align: left
}

.callout h4 {
    margin: 0
}

.callout p {
    font: var(--type-smaller-font-size);
    margin: 0
}

.code-example {
    color: var(--code-default);
    position: relative
}

.code-example .copy-icon {
    border-radius: var(--elem-radius);
    cursor: pointer;
    height: 1.25rem;
    margin: 0;
    -webkit-mask-image: url(/static/media/clippy.92fffda9d37d9c3a3b37.svg);
    mask-image: url(/static/media/clippy.92fffda9d37d9c3a3b37.svg);
    -webkit-mask-size: cover;
    mask-size: cover;
    opacity: .4;
    padding: .25rem;
    position: absolute;
    right: .5rem;
    top: .75rem;
    width: 1.25rem
}

.code-example .copy-icon:focus,
.code-example .copy-icon:hover {
    opacity: 1
}

.code-example .copy-icon-message {
    background: var(--text-primary);
    border-radius: var(--elem-radius);
    color: var(--text-invert);
    font-size: .8125rem;
    opacity: 1;
    padding: .125rem;
    position: absolute;
    right: .25rem;
    top: 15px
}

.code-example .example-bad,
.code-example .example-good {
    padding: 1rem
}

.only-in-en-us span {
    font-size: .8125rem
}

a.page-not-created {
    cursor: not-allowed
}

a.page-not-created:focus,
a.page-not-created:hover,
a.page-not-created:link,
a.page-not-created:not([href]) {
    color: var(--icon-critical);
    -webkit-text-decoration: underline wavy;
    text-decoration: underline wavy
}

.badge {
    border: 1px solid var(--border-primary);
    border-radius: 4rem;
    font-size: var(--type-tiny-font-size);
    padding: .125rem .375rem;
    white-space: nowrap
}

.badge,
kbd {
    color: var(--text-secondary)
}

kbd {
    border: 2px solid var(--border-secondary);
    border-radius: var(--elem-radius);
    box-shadow: var(--border-secondary);
    box-shadow: inset 0 -1px 0 0 var(--border-secondary);
    font-size: .825rem;
    padding: .25rem
}

.interactive {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--elem-radius);
    color: var(--text-primary);
    height: 675px;
    margin: 1rem 0;
    padding: 0;
    width: 100%
}

.interactive.is-js-height,
.interactive.is-shorter-height,
.interactive.is-taller-height {
    border: 0
}

.interactive.is-js-height {
    height: 513px
}

.interactive.is-shorter-height {
    height: 433px
}

.interactive.is-taller-height {
    height: 725px
}

.interactive.is-tabbed-shorter-height {
    height: 487px
}

.interactive.is-tabbed-standard-height {
    height: 548px
}

.interactive.is-tabbed-taller-height {
    height: 774px
}

@media screen and (min-width:1008px),
screen and (min-width:688px)and (max-width:768px) {
    .interactive {
        height: 375px
    }

    .interactive.is-js-height {
        height: 444px
    }

    .interactive.is-shorter-height {
        height: 364px
    }

    .interactive.is-taller-height {
        height: 654px
    }

    .interactive.is-tabbed-shorter-height {
        height: 351px
    }

    .interactive.is-tabbed-standard-height {
        height: 421px
    }

    .interactive.is-tabbed-taller-height {
        height: 631px
    }
}

.document-survey {
    background-color: #e6deff;
    border: 5px solid #6800cf;
    border-radius: .5rem;
    color: #1b1b1b;
    padding: 1em
}

.document-survey:before {
    background: transparent url(/static/media/survey.eea64fbc33bedb4fb0c5.svg) 50% no-repeat;
    background-size: cover;
    content: "";
    display: inline-block;
    height: 33px;
    position: absolute;
    width: 32px
}

.document-survey iframe {
    border: 0
}

.document-survey button[type=button],
.document-survey summary {
    cursor: pointer
}

.document-survey summary {
    text-decoration: underline
}

.document-survey summary:focus,
.document-survey summary:hover {
    text-decoration: inherit
}

.document-survey .survey-header {
    display: flex;
    justify-content: space-between
}

.document-survey .survey-container,
.document-survey .survey-header {
    padding-left: 2.5em
}

.document-survey .survey-dismiss svg.icon {
    color: #1b1b1b
}

.a11y-nav {
    position: absolute;
    top: -20em;
    width: 100%;
    z-index: var(--z-index-a11y)
}

.a11y-nav a {
    background-color: hsla(0, 0%, 100%, .9);
    font-weight: var(--font-body-strong-weight);
    left: 0;
    padding: .5rem;
    position: absolute;
    right: 0;
    text-align: center
}

.a11y-nav a:focus,
.a11y-nav a:hover {
    box-shadow: var(--shadow-01);
    text-decoration: none;
    top: 20em
}

.page-footer {
    background-color: var(--background-secondary);
    padding: 2rem 1rem;
    position: relative
}

.page-footer-grid {
    margin: 0 auto;
    max-width: 1440px
}

.page-footer,
.page-footer a {
    color: var(--text-secondary)
}

.page-footer-logo-col p {
    margin-top: 0;
    max-width: 55ch
}

.page-footer-app-list {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.page-footer-app-dl {
    display: block;
    max-width: 130px
}

.page-footer-app-dl img,
.page-footer-app-dl svg {
    width: 100%
}

.page-footer-app-dl.is-ms {
    max-width: 110px
}

.page-footer-moz {
    align-items: center;
    border-top: 1px solid var(--border-primary);
    display: flex;
    flex-flow: row wrap;
    gap: 2rem;
    padding-top: 1.5rem
}

.page-footer-legal-text {
    font-size: var(--type-tiny-font-size);
    margin: 0
}

.page-footer-legal-text a {
    text-decoration: underline
}

.page-footer-legal-text a:hover {
    text-decoration: none
}

.footer-moz-list {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--type-tiny-font-size);
    gap: 1rem
}

.footer-moz-logo-link {
    display: flex
}

.footer-moz-link {
    text-decoration: underline
}

.footer-moz-link:hover {
    text-decoration: none
}

.mdn-footer-logo {
    display: block;
    width: 50px
}

.social-icons {
    display: flex;
    gap: 1rem;
    margin-top: .5rem
}

.social-icons li {
    flex: 0 0 auto
}

.social-icons .icon {
    display: block;
    height: 21px;
    width: 21px
}

.footer-nav-heading {
    font: var(--type-smaller-font-size);
    margin: 0 0 .5rem
}

.footer-nav-list {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.footer-nav-item {
    font-size: var(--type-smaller-font-size)
}

.page-footer-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

@media screen and (min-width:426px) {
    .page-footer-grid {
        grid-gap: 2.5rem;
        display: grid;
        gap: 2.5rem;
        grid-template-areas: "logo  . ""nav1  nav2""nav3  nav4""moz   moz""legal legal";
        grid-template-columns: 1fr 1fr
    }

    .page-footer-logo-col {
        grid-area: logo
    }

    .page-footer-nav-col-1 {
        grid-area: nav1
    }

    .page-footer-nav-col-2 {
        grid-area: nav2
    }

    .page-footer-nav-col-3 {
        grid-area: nav3
    }

    .page-footer-nav-col-4 {
        grid-area: nav4
    }

    .page-footer-app-col {
        grid-area: app
    }

    .page-footer-moz {
        grid-area: moz
    }

    .page-footer-legal {
        grid-area: legal
    }

    .page-footer-app-list {
        flex-direction: row
    }

    .page-footer-app-dl img,
    .page-footer-app-dl svg {
        height: 38px
    }
}

@media screen and (min-width:769px) {
    .page-footer-grid {
        gap: 1rem;
        grid-template-areas: "logo  nav1  nav2  nav3  nav4""moz   moz   moz   moz   moz""legal legal legal legal  . ";
        grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(0, 1fr))
    }

    .page-footer-app-list {
        flex-direction: column
    }

    .page-footer-app-dl img,
    .page-footer-app-dl svg {
        height: auto
    }
}

@media screen and (min-width:1441px) {
    .page-footer-grid {
        gap: 2.5rem
    }
}

.query-string {
    font-style: italic
}

.site-search {
    display: block
}

.page-not-found .fallback-document .fallback-link {
    font-size: 1rem
}

.tabs {
    border-bottom: 1px solid var(--border-primary)
}

.tabs ul {
    display: flex;
    gap: 1rem
}

.tabs .tab-item {
    border-bottom: 2px solid transparent;
    padding: .5rem 0
}

.tabs a.tab-item {
    color: var(--text-primary);
    display: block;
    font-size: var(--type-smaller-font-size)
}

.tabs .tab-item[aria-current=true] {
    border-bottom-color: var(--text-link)
}

.plus-header {
    padding-top: 2rem
}

.plus-header h1 {
    font: var(--type-heading-h4-font-size-mobile);
    margin-bottom: 1rem
}

@media screen and (min-width:769px) {
    .plus-header h1 {
        font: var(--type-heading-h4-font-size)
    }
}

.notification-list {
    display: flex;
    flex-direction: column
}

.notification-card {
    align-items: center;
    -webkit-animation: fade-in .2s;
    animation: fade-in .2s;
    background-color: var(--background-primary);
    border: 1px solid var(--border-secondary);
    display: flex;
    justify-content: space-between;
    padding: .5rem
}

.notification-card>div {
    align-items: center;
    display: flex
}

.notification-card .desktop-only {
    display: none
}

@media screen and (min-width:769px) {
    .notification-card .desktop-only {
        display: inherit
    }
}

.notification-card.no-star {
    grid-template-columns: 1fr auto
}

.notification-card .icon {
    background-color: var(--icon-secondary)
}

.notification-card+.notification-card {
    border-top: none
}

.notification-card-description {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.notification-card-title {
    word-wrap: anywhere;
    font-family: var(--font-body);
    font-weight: var(--font-body-strong-weight)
}

.notification-card-text,
.notification-card-title {
    color: var(--text-primary);
    font-size: var(--type-smaller-font-size);
    margin: 0
}

.notification-card-created {
    color: var(--text-secondary);
    display: none;
    font-size: var(--type-tiny-font-size);
    text-align: right
}

@media screen and (min-width:769px) {
    .notification-card-created {
        display: inherit
    }
}

.notification-card:first-child {
    border-top-left-radius: var(--elem-radius);
    border-top-right-radius: var(--elem-radius);
    margin-top: 1rem
}

.notification-card:last-child {
    border-bottom-left-radius: var(--elem-radius);
    border-bottom-right-radius: var(--elem-radius)
}

.notification-card.unread {
    background-color: var(--accent-tertiary)
}

@media screen and (min-width:769px) {
    .notification-card-description {
        align-items: center;
        flex-direction: row
    }
}

.select-all-toolbar {
    border: 1px solid var(--border-primary);
    border-radius: var(--elem-radius);
    display: flex;
    gap: 1rem
}

.empty-card,
.select-all-toolbar {
    align-items: center;
    background-color: var(--background-primary);
    padding: .5rem
}

.empty-card {
    border: 1px solid var(--border-secondary);
    margin-top: .5rem
}

.empty-card p {
    font: var(--type-article-p);
    letter-spacing: .5px;
    line-height: 1.5
}

.search-widget {
    position: relative;
    width: 100%
}

.search-widget .search-filter-button {
    right: .5rem
}

@media screen and (min-width:769px) {
    .search-widget {
        align-items: center;
        display: flex;
        gap: .5rem;
        margin: 0
    }
}

.search-input-field {
    -webkit-appearance: none;
    background-color: var(--background-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--elem-radius);
    color: var(--text-primary);
    height: var(--form-elem-height);
    min-width: 60px;
    padding-left: 2rem;
    width: 100%
}

.search-input-field:focus {
    outline: var(--border-primary)
}

.search-input-field::-webkit-input-placeholder {
    color: var(--text-inactive)
}

.search-input-field::placeholder {
    color: var(--text-inactive)
}

.search-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 1rem 0
}

.search-filter.inline-on-mobile {
    flex-wrap: nowrap
}

.search-filter.inline-on-mobile .search-filter-category {
    width: auto
}

.search-filter [type=search] {
    flex: 1 1
}

.search-filter-category {
    position: relative;
    width: calc(50% - .25rem)
}

.search-filter-category .dropdown-list,
.search-filter-category>.button {
    width: 100%
}

@media screen and (min-width:769px) {
    .search-filter {
        flex-wrap: nowrap
    }

    .search-filter .submenu {
        max-width: -webkit-max-content;
        max-width: max-content;
        right: 0
    }

    .search-filter-category,
    .search-filter-category .dropdown-list {
        width: auto
    }

    .search-filter-category .dropdown-list.filters-menu {
        left: auto;
        right: 0;
        width: 180px
    }
}

.limit-banner {
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--elem-radius);
    margin-top: .5rem;
    padding-bottom: .5rem;
    padding-top: .5rem;
    text-align: center
}

.limit-banner p {
    margin: .5rem
}

.limit-banner a {
    color: var(--text-link)
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0
    }

    50% {
        opacity: .5
    }

    to {
        opacity: 1
    }
}

@keyframes fade-in {
    0% {
        opacity: 0
    }

    50% {
        opacity: .5
    }

    to {
        opacity: 1
    }
}

.icon-card-list {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.icon-card {
    -webkit-animation: fade-in .2s;
    animation: fade-in .2s;
    background-color: var(--background-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--elem-radius);
    padding: 1rem 1rem 1rem .5rem;
    transition: .3s ease-out
}

.icon-card a:link,
.icon-card a:visited {
    color: var(--text-primary)
}

.icon-card:first-child {
    margin-top: 1rem
}

.icon-card>:last-child {
    margin-bottom: 0
}

.icon-card:last-child {
    margin-bottom: 1rem
}

.icon-card-icon {
    align-items: center;
    background-color: var(--http-accent-color);
    border-radius: .125rem;
    color: var(--background-primary);
    display: flex;
    font-size: .75rem;
    font-style: italic;
    height: 3rem;
    justify-content: center;
    padding: .5rem;
    width: 3rem
}

.icon-card-icon span {
    overflow: hidden;
    text-overflow: ellipsis
}

.icon-card-icon.html {
    background-color: var(--html-accent-color)
}

.icon-card-icon.css {
    background-color: var(--css-accent-color)
}

.icon-card-icon.javascript {
    background-color: var(--js-accent-color)
}

.icon-card-icon.http {
    background-color: var(--http-accent-color)
}

.icon-card-icon.apis {
    background-color: var(--apis-accent-color)
}

.icon-card-title-wrap {
    display: flex;
    gap: 1rem
}

.icon-card-title-wrap .dropdown {
    align-self: center
}

.icon-card-title-wrap .breadcrumbs a:link,
.icon-card-title-wrap .breadcrumbs a:visited {
    color: var(--text-secondary)
}

.icon-card-title {
    word-wrap: break-word;
    font-size: var(--type-base-font-size-rem);
    font-weight: var(--font-body-strong-weight);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis
}

.icon-card-description {
    color: var(--text-secondary);
    font-size: var(--type-smaller-font-size)
}

.icon-card-actions {
    display: flex;
    gap: .5rem
}

.icon-card .icon-card-content {
    flex: 1 1 80%;
    overflow: hidden
}

@media screen and (max-width:426px) {
    .icon-card .icon-card-content {
        flex-basis: 95%
    }
}

.icon-card .icon-card-content h4 {
    overflow: hidden;
    text-overflow: ellipsis
}

.icon-card .icon-card-actions {
    align-self: center;
    margin-left: auto
}

.icon-card .breadcrumbs {
    color: var(--text-secondary);
    font-size: var(--type-smaller-font-size);
    list-style: none;
    margin-bottom: .5rem
}

.icon-card .breadcrumbs li {
    display: inline-block;
    margin: 0
}

.icon-card .breadcrumbs li:after {
    background-color: var(--text-secondary);
    content: "";
    display: inline-block;
    height: 8px;
    margin: 0 4px;
    -webkit-mask-image: url(/static/media/chevron.fd1788325bc2a3d78610.svg);
    mask-image: url(/static/media/chevron.fd1788325bc2a3d78610.svg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    vertical-align: middle;
    width: 8px
}

.icon-card .breadcrumbs li:last-child:after {
    content: normal
}

article.settings {
    display: block;
    margin: auto;
    max-width: 60em;
    padding: 1rem;
    width: min(90vw, 40em)
}

article.settings h3 {
    margin-top: .5rem
}

article.settings .field-group {
    margin: 2rem 0
}

article.settings .field-group ul {
    padding: 0
}

article.settings .field-group ul li {
    grid-gap: 0 1rem;
    display: grid;
    gap: 0 1rem;
     /* grid-template-columns: 1fr minmax(5em);  */
    margin: 2em 0
}

article.settings .field-group ul li h3 {
    font-weight: 600
}

article.settings .field-group ul li span {
    font-size: .8rem;
    grid-column: 1/2;
    line-height: 1.2em;
    padding-top: .3em
}

article.settings .field-group ul li .loading,
article.settings .field-group ul li .switch {
    align-self: center;
    grid-column: 2/3;
    grid-row: 1/3;
    justify-self: end
}

article.settings .field-group ul li .manage,
article.settings .field-group ul li button {
    align-self: center;
    border: 1px solid var(--text-primary);
    border-radius: var(--elem-radius);
    color: var(--text-link);
    font-size: .8rem;
    grid-column: 2/3;
    grid-row: 1/3;
    height: -webkit-max-content;
    height: max-content;
    justify-self: end;
    padding: .5rem 1rem;
    width: -webkit-max-content;
    width: max-content
}

article.settings .field-group ul li button[disabled] {
    background-color: var(--background-secondary);
    border: 1px solid var(--text-secondary);
    color: var(--text-secondary)
}

.plus .article-actions-container {
    display: flex
}

.plus .main-page-content em {
    font-style: normal;
    text-decoration: underline;
    -webkit-text-decoration-color: var(--text-link);
    text-decoration-color: var(--text-link);
    text-decoration-thickness: .15rem;
    text-underline-offset: .1em
}

.plus .main-page-content h1 {
    color: var(--plus-accent-color);
    font: 700 12px/120% Inter;
    letter-spacing: 1.5px;
    text-transform: uppercase
}

.plus .main-page-content h1+blockquote {
    border: revert;
    border-radius: var(--elem-radius);
    color: var(--text-primary);
    margin: 1rem 0 2rem;
    padding: revert
}

.plus .main-page-content h1+blockquote p:first-child {
    font: var(--type-heading-h1-mobile);
    margin-bottom: 2rem
}

@media screen and (min-width:769px) {
    .plus .main-page-content h1+blockquote p:first-child {
        font: var(--type-heading-h1)
    }
}

.plus .main-page-content h1+blockquote p {
    font-style: italic
}

.plus .main-page-content img {
    margin: 2rem 0
}

.get-involved {
    background-color: var(--mdn-background-dark)
}

.get-involved section {
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    line-height: 1.75;
    margin: 0 auto;
    max-width: 52rem;
    padding: 2rem 1rem
}

.get-involved section h2 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 120%;
    margin: 0
}

.get-involved section .get-involved-cta {
    color: var(--category-color);
    display: block;
    margin-top: 1rem
}

.about {
    width: 100%
}

.about .about-container {
    margin: 0 auto;
    max-width: 52rem;
    padding: 0 1rem 2rem
}

.about .about-container h1 {
    margin-top: 3rem
}

@media screen and (min-width:769px) {
    .about .about-container h1 {
        font-size: 3.5rem
    }
}

.about .about-container header {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 0
}

.about .about-container header .headline {
    font-family: var(--font-heading);
    font-size: 1.313rem;
    font-style: normal;
    font-weight: 400;
    line-height: 175%;
    margin: 0
}

.about .about-container p {
    font-size: 1rem;
    font-weight: 350;
    line-height: 175%
}

.about .about-container h2 {
    font-size: 1.3rem
}

.about .about-container .heading-break {
    display: none
}

@media screen and (min-width:769px) {
    .about .about-container .heading-break {
        display: block
    }
}

blockquote.quote {
    border: none;
    border-radius: .5rem;
    display: flex;
    flex-direction: column-reverse;
    gap: 2rem;
    margin: 2rem 0;
    padding: 2rem
}

@media screen and (max-width:40rem) {
    blockquote.quote {
        flex-wrap: wrap-reverse
    }
}

blockquote.quote p {
    display: flex;
    font-style: italic
}

blockquote.quote p .icon {
    margin-right: 1rem;
    margin-top: .2rem
}

blockquote.quote .name {
    display: inline;
    font-size: var(--type-base-font-size-rem);
    margin: 0
}

main.contribute {
    margin-bottom: 3rem;
    width: 100%
}

main.contribute .stats-container {
    background-color: var(--background-primary);
    color: var(--text-primary);
    margin-bottom: 3rem;
    width: 100%
}

main.contribute section {
    margin: 0 auto;
    max-width: 52rem;
    padding: 0 1rem
}

main.contribute section.stats-header {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 0 .5rem 2rem
}

main.contribute section h1 {
    font-size: 3rem;
    margin-left: .5rem;
    margin-top: 8rem;
    text-align: center
}

main.contribute section h1:after {
    content: " ";
    text-decoration: underline;
    -webkit-text-decoration-color: var(--text-link);
    text-decoration-color: var(--text-link);
    text-decoration-thickness: .1em;
    text-underline-offset: .1em
}

main.contribute section h1:before {
    background-color: var(--text-link);
    content: "";
    display: inline-block;
    height: 1.2em;
     /* -webkit-mask: url(/static/media/m-logo.e19e04547be91a35c8ea.svg) no-repeat 50% 50%;
    mask: url(/static/media/m-logo.e19e04547be91a35c8ea.svg) no-repeat 50% 50%;  */
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-transform: translate(-.2em, .2em);
    transform: translate(-.2em, .2em);
    width: 1.2em
}

main.contribute section .quote.owd {
    background-color: var(--text-link);
    color: var(--background-primary)
}

main.contribute section .quote.owd .icon,
main.contribute section .quote.pab {
    background-color: var(--background-primary)
}

main.contribute section .quote.pab {
    color: var(--text-primary)
}

main.contribute section .quote.pab .icon {
    background-color: var(--text-primary)
}

main.contribute section .stats {
    grid-gap: .3em;
    display: grid;
    gap: .3em
}

@media screen and (max-width:769px) {
    main.contribute section .stats {
        grid-template-columns: 1fr 1fr
    }
}

@media screen and (max-width:426px) {
    main.contribute section .stats {
        grid-template-columns: 1fr
    }
}

@media screen and (min-width:769px) {
    main.contribute section .stats {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
}

main.contribute section .stats li {
    align-items: center;
    background: var(--text-link);
    color: var(--background-primary);
    display: flex;
    flex-direction: column;
    padding: .5rem 2rem
}

main.contribute section .stats li .number {
    font-size: 3rem
}

main.contribute section .stats li .legend {
    font-size: .8rem;
    max-width: 5rem;
    text-align: center
}

.contributor-spotlight-content-container {
    margin: 3rem auto;
    max-width: 52rem;
    padding: 0 1rem
}

.contributor-spotlight-content-container li {
    line-height: 1.5;
    list-style-type: disc;
    margin-bottom: 1rem
}

.contributor-spotlight-content-container ul {
    padding-left: 1rem
}

.contributor-spotlight-content-container .quote {
    background-color: var(--category-color-background);
    color: var(--text-primary)
}

.contributor-spotlight-content-container .quote .icon {
    background-color: var(--text-primary)
}

.contributor-spotlight-content-container .profile-image {
    border-radius: 50%;
    height: 200px;
    width: 200px
}

.contributor-spotlight-content-container .profile-header {
    align-items: center;
    border-radius: var(--elem-radius);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    width: 100%
}

.contributor-spotlight-content-container .profile-header h2 {
    color: var(--text-primary);
    margin-bottom: 0;
    margin-top: 0
}

.contributor-spotlight-content-container .profile-header .username {
    background-color: var(--category-color);
    color: var(--text-invert);
    font-size: 1.75rem;
    padding: .2rem .4rem
}

.mdn-cta-container {
    align-items: center;
    background-color: #212121;
    color: #fff;
    display: flex;
    height: 100%;
    min-height: 40px;
    padding: 0 1rem;
    z-index: 999
}

.mdn-cta-container .mdn-cta-copy {
    margin: 0;
    padding: 8px 0
}

.mdn-cta-container button {
    background: none;
    border: none;
    opacity: .6
}

.mdn-cta-container button:active,
.mdn-cta-container button:focus,
.mdn-cta-container button:hover {
    cursor: pointer;
    opacity: 1
}

.mdn-cta-container button .icon {
    color: #fff;
    height: 16px
}

.mdn-cta-container .mdn-cta-content {
    margin: 0 auto
}

.mdn-cta-container a {
    color: var(--color-announcement-banner-accent);
    min-height: 0
}

.mdn-cta-container a:focus,
.mdn-cta-container a:hover {
    text-decoration: underline
}

.mdn-cta-container .underlined {
    font-style: normal;
    -webkit-text-decoration: underline var(--color-announcement-banner-accent) .15rem;
    text-decoration: underline var(--color-announcement-banner-accent) .15rem
}

.mdn-cta-container .mdn-plus {
    color: var(--color-announcement-banner-accent);
    font-size: 1.2rem;
    font-weight: 700
}

body.full-screen-overlay .mdn-cta-container {
    display: none
}

/* # sourceMappingURL=main.b0105e4f.css.map */