*,
: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 {
    font-family: var(--font-body);
    font-size: var(--base-font-size);
    line-height: var(--font-content-line-height);
    text-rendering: optimizeSpeed
}

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

a {
    text-decoration: none
}

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

em {
    font-variation-settings: "slnt" -10
}

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

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

    *,
    :after,
    :before {
        animation-duration: .01ms !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;
    font-variation-settings: "slnt" -10
}

.token.entity {
    cursor: help
}

.notecard {
    --note-background: var(--background-information);
    --note-theme: var(--icon-information);
    background-color: var(--note-background);
    border-left: 2px solid var(--note-theme);
    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
}

.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.35rem;
    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)
}

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

.main-page-content .notecard li,
.main-page-content .notecard ol,
.main-page-content .notecard p,
.main-page-content .notecard ul,
.notecard li,
.notecard ol,
.notecard p,
.notecard ul,
dd .notecard li,
dd .notecard ol,
dd .notecard p,
dd .notecard ul {
    margin: 0;
    padding-bottom: .5rem
}

.main-page-content .notecard li:last-child,
.main-page-content .notecard ol:last-child,
.main-page-content .notecard p:last-child,
.main-page-content .notecard ul:last-child,
.notecard li:last-child,
.notecard ol:last-child,
.notecard p:last-child,
.notecard ul:last-child,
dd .notecard li:last-child,
dd .notecard ol:last-child,
dd .notecard p:last-child,
dd .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>:last-child :last-child {
    margin-bottom: 0
}

.notecard h1,
.notecard h2,
.notecard h3,
.notecard h4,
.notecard h5,
.notecard h6 {
    color: var(--text-primary);
    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: var(--type-smaller-font-size)
}

.mdn-form {
    font-family: var(--font-body);
    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=email],
.mdn-form-item [type=text],
.mdn-form-item select,
.mdn-form-item textarea {
    background: var(--background-primary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    flex: 1 1 100%;
    font-size: var(--type-smaller-font-size);
    min-width: 0;
    padding: .5rem
}

.mdn-form-item [type=email]:focus,
.mdn-form-item [type=text]:focus,
.mdn-form-item select:focus,
.mdn-form-item textarea:focus {
    border: 1px solid var(--button-secondary-border-focus);
    box-shadow: var(--focus-effect);
    outline: 0 none
}

.mdn-form-item select {
    -webkit-appearance: none;
    appearance: none
}

.mdn-form-item .select-wrap {
    display: flex;
    flex: 1 1 100%;
    position: relative
}

.mdn-form-item .select-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;
    pointer-events: none;
    position: absolute;
    right: .5rem;
    top: calc(50% - .5rem);
    width: 16px
}

.mdn-form-item label,
.mdn-form-item select {
    text-overflow: ellipsis;
    width: 100%
}

.mdn-form-item :invalid {
    border-color: var(--form-invalid-color)
}

.mdn-form-item :invalid:focus {
    border-color: var(--form-invalid-focus-color);
    box-shadow: 0 0 0 3px var(--form-invalid-focus-effect-color)
}

.mdn-form-item .limit {
    color: var(--form-limit-color);
    font-size: .6875rem;
    margin-left: auto
}

.mdn-form-item .limit b {
    color: var(--form-limit-color-emphasis)
}

.mdn-form-item .limit.invalid b {
    color: var(--form-invalid-color)
}

.mdn-form.mdn-form-big .mdn-form-item,
.modal-body .mdn-form-item {
    padding-top: 1.5rem
}

.mdn-form.mdn-form-big .mdn-form-item:first-child,
.modal-body .mdn-form-item:first-child {
    padding-top: 0
}

.mdn-form.mdn-form-big .mdn-form-item [type=email],
.mdn-form.mdn-form-big .mdn-form-item [type=text],
.mdn-form.mdn-form-big .mdn-form-item label,
.mdn-form.mdn-form-big .mdn-form-item textarea,
.modal-body .mdn-form-item [type=email],
.modal-body .mdn-form-item [type=text],
.modal-body .mdn-form-item label,
.modal-body .mdn-form-item textarea {
    font-size: 1rem;
    font-weight: 400
}

.mdn-form.mdn-form-big .button-wrap,
.modal-body .button-wrap {
    font-size: 1rem;
    height: auto;
    line-height: 1.5;
    padding: .5rem 2rem
}

: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;
    --top-banner-inner-height: 3.125rem;
    --top-banner-height: calc(var(--top-banner-inner-height) + 0.25rem);
    --top-banner-outer-height: calc(var(--top-banner-height) + 2px);
    --z-index-a11y: 10000;
    --z-index-modal-content: 801;
    --z-index-modal-overlay: 800;
    --z-index-main-header: 700;
    --z-index-sidebar-mobile: 600;
    --z-index-mid: 500;
    --z-index-nav-menu: 200;
    --z-index-search-results: 101;
    --z-index-low: 100;
    --z-index-search-results-home: 99;
    --z-index-back: -1;
    --elem-radius: 0.25rem;
    --focus-effect: 0 0 0 3px var(--accent-primary-engage);
    --form-elem-height: 2rem;
    --top-nav-height: 4rem;
    --article-actions-container-height: 2rem;
    --icon-size: 1rem;
    --sticky-header-without-actions-height: calc(var(--top-nav-height) + 1px);
    --sticky-header-with-actions-height: calc(var(--sticky-header-without-actions-height) + var(--article-actions-container-height) + 1px)
}

@media(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,
section[id] {
    scroll-margin-top: var(--sticky-header-with-actions-height)
}

.sticky-header-container.without-actions~* :target,
.sticky-header-container.without-actions~* section[id] {
    scroll-margin-top: var(--sticky-header-without-actions-height)
}

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

@media(max-width:769px) {
    body.mobile-overlay-active {
        overflow: hidden
    }
}

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

main {
    display: flow-root;
    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 {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !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
}

.contents {
    display: contents
}

.hidden {
    display: none
}

.inline-block {
    display: inline-block
}

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

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

.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
}

button.button[disabled],
input[disabled] {
    cursor: not-allowed
}

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

[type=search]::-ms-clear,
[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 {
    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-engage: var(--plus-accent-engage);
    --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-engage: var(--html-accent-engage);
    --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-engage: var(--css-accent-engage);
    --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-engage: var(--js-accent-engage);
    --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-engage: var(--http-accent-engage);
    --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-engage: var(--apis-accent-engage);
    --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-engage: var(--learn-accent-engage);
    --category-color-background: var(--learn-accent-background-color);
    --mark-color: var(--api-mark-color)
}

.mify {
    margin-left: .5rem
}

.mify:after {
    content: " ";
    text-decoration: underline;
    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;
    transform: translate(-.2em, .2em);
    width: 1.2em
}

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

@media(forced-colors:active) {
    .icon {
        background-color: CanvasText !important
    }
}

sup.new {
    background: var(--new-background);
    border-radius: 1em;
    color: var(--new-color);
    display: inline-block;
    font-size: .45rem;
    font-weight: 700;
    line-height: 1.7;
    padding: 0 .4em;
    text-rendering: optimizeLegibility;
    text-transform: uppercase
}

sup.new.beta {
    background: var(--new-background-beta, var(--new-background))
}

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

.feedback-link:before {
    background-color: var(--feedback-link-icon, var(--text-link));
    content: "";
    display: inline-flex;
    height: 1em;
    margin-right: .4em;
    -webkit-mask-image: url(/static/media/feedback.8628a9cde87e3951f74c.svg);
    mask-image: url(/static/media/feedback.8628a9cde87e3951f74c.svg);
    -webkit-mask-size: cover;
    mask-size: cover;
    vertical-align: middle;
    width: 1em
}

.homepage {
    align-items: center;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    overflow-y: visible;
    position: relative;
    width: 100%
}

.homepage>* {
    margin-top: 2rem
}

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

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

.homepage-hero section {
    --contrast-boost-bg: #191919;
    --contrast-boost-shadow: 2px 2px 3px var(--contrast-boost-bg), 2px -2px 3px var(--contrast-boost-bg), -2px -2px 3px var(--contrast-boost-bg), -2px 2px 3px var(--contrast-boost-bg);
    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(min-width:426px) {
    .homepage-hero section h1 {
        font-size: 2.5rem
    }
}

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

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

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

.homepage-hero section h1,
.homepage-hero section p {
    text-shadow: var(--contrast-boost-shadow)
}

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

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

@media(min-width:426px) {
    .homepage-hero .homepage-hero-bg .mandala-translate {
        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: #01010180;
    border-radius: 10rem;
    padding: 2rem;
    width: 100%
}

.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::placeholder {
    font-size: 1.5rem
}

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

.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: #0000
}

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

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

.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)
}

.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 {
    -webkit-mask-image: url(/static/media/bell.034a87122ec06307f900.svg);
    mask-image: url(/static/media/bell.034a87122ec06307f900.svg)
}

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

.icon.icon-bell-ring {
    -webkit-mask-image: url(/static/media/bell-ring.f5fbaa601143398eeea6.svg);
    mask-image: url(/static/media/bell-ring.f5fbaa601143398eeea6.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-chatgpt {
    -webkit-mask-image: url(/static/media/chatgpt.ec5d4e8331e69d951bde.svg);
    mask-image: url(/static/media/chatgpt.ec5d4e8331e69d951bde.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-curriculum-next {
    -webkit-mask-image: url(/static/media/curriculum-next.0f2043596d05c646edbc.svg);
    mask-image: url(/static/media/curriculum-next.0f2043596d05c646edbc.svg)
}

.icon.icon-curriculum-prev {
    -webkit-mask-image: url(/static/media/curriculum-prev.728a5770a530d855c524.svg);
    mask-image: url(/static/media/curriculum-prev.728a5770a530d855c524.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-edit-filled {
    -webkit-mask-image: url(/static/media/edit-filled.0eeb84246a509df204e7.svg);
    mask-image: url(/static/media/edit-filled.0eeb84246a509df204e7.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-feed {
    -webkit-mask-image: url(/static/media/feed.566a60406f1ae82b0738.svg);
    mask-image: url(/static/media/feed.566a60406f1ae82b0738.svg)
}

.icon.icon-filter {
    -webkit-mask-image: url(/static/media/filter.97c596624d8d10e6722d.svg);
    mask-image: url(/static/media/filter.97c596624d8d10e6722d.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-highlight {
    -webkit-mask-image: url(/static/media/highlight.603e1d7a3220ae8bec0a.svg);
    mask-image: url(/static/media/highlight.603e1d7a3220ae8bec0a.svg)
}

.icon.icon-history {
    -webkit-mask-image: url(/static/media/history.8374de5fe8527c5bd888.svg);
    mask-image: url(/static/media/history.8374de5fe8527c5bd888.svg)
}

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

.icon.icon-mastodon {
    -webkit-mask-image: url(/static/media/mastodon.ef3a62906d984f615f00.svg);
    mask-image: url(/static/media/mastodon.ef3a62906d984f615f00.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-new-topic {
    -webkit-mask-image: url(/static/media/new-topic.720f18d11d16a610687a.svg);
    mask-image: url(/static/media/new-topic.720f18d11d16a610687a.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-play {
    -webkit-mask-image: url(/static/media/play.58df7f218e19b3192014.svg);
    mask-image: url(/static/media/play.58df7f218e19b3192014.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-queue {
    -webkit-mask-image: url(/static/media/queue.dfe43f8d814aab275f6d.svg);
    mask-image: url(/static/media/queue.dfe43f8d814aab275f6d.svg)
}

.icon.icon-queued {
    -webkit-mask-image: url(/static/media/queued.00676c98baccdc4d581c.svg);
    mask-image: url(/static/media/queued.00676c98baccdc4d581c.svg)
}

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

.icon.icon-return {
    -webkit-mask-image: url(/static/media/return.acc1f3dbf1e4a9f356a6.svg);
    mask-image: url(/static/media/return.acc1f3dbf1e4a9f356a6.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-send {
    -webkit-mask-image: url(/static/media/send.c057b0f96c5f2bd89e12.svg);
    mask-image: url(/static/media/send.c057b0f96c5f2bd89e12.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.4a19445942692d9e111d.svg);
    mask-image: url(/static/media/thumbs-down.4a19445942692d9e111d.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-trash-filled {
    -webkit-mask-image: url(/static/media/trash-filled.850d364bbc6af47d67df.svg);
    mask-image: url(/static/media/trash-filled.850d364bbc6af47d67df.svg)
}

.icon.icon-twitter-x {
    -webkit-mask-image: url(/static/media/twitter-x.2281a8f12c7edfe78a52.svg);
    mask-image: url(/static/media/twitter-x.2281a8f12c7edfe78a52.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.dc22c0f5614a5ff2d93a.svg);
    mask-image: url(/static/media/webview.dc22c0f5614a5ff2d93a.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)
}

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

.icons-highlighted {
    align-items: center;
    display: flex;
    flex-direction: column
}

.icons-highlighted>span {
    height: var(--icon-size);
    line-height: 0;
    width: var(--icon-size)
}

.icons-highlighted>span.icons-icon-wrapper {
    margin-top: -.1rem
}

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

.button {
    --button-bg: var(--button-primary-default);
    --button-bg-hover: var(--button-primary-hover);
    --button-bg-active: var(--button-primary-active);
    --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-border-color: var(--button-bg-hover, var(--button-bg))
}

.button.hover .button-wrap,
.button:hover .button-wrap {
    background-color: var(--button-bg-hover, var(--button-bg))
}

.button.active .button-wrap,
.button:active .button-wrap {
    background-color: var(--button-bg-active, var(--button-bg))
}

.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-hover: unset
}

.button.button.inactive:active,
.button.button[disabled]:active {
    --button-bg-active: unset
}

.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-bg-hover: var(--button-secondary-hover);
    --button-bg-active: var(--button-secondary-active)
}

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

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

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

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

.button.action .button-wrap {
    text-transform: var(--button-action-transform, uppercase)
}

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

.button.select {
    --button-bg: var(--button-secondary-default);
    --button-bg-hover: var(--button-secondary-hover);
    --button-bg-active: var(--button-secondary-active);
    --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
}

.button.link {
    --button-bg: none;
    --button-bg-hover: none;
    --button-bg-active: none;
    --button-border-color: none;
    --button-focus-effect: none;
    --button-secondary-border-focus: none;
    --button-height: auto;
    --button-font: unset;
    --button-padding: 0;
    --button-radius: 0;
    --button-color: var(--text-link);
    -webkit-appearance: none;
    appearance: none;
    display: inline;
    text-decoration: none
}

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

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

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

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

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

.header-search .search-input-field:focus~.button.clear-search-button,
.header-search .search-input-field:valid~.button.clear-search-button,
.header-search .search-widget:focus-within .search-input-field~.button.clear-search-button {
    display: block;
    right: 2.8rem
}

.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%
}

@keyframes blink {

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

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

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

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

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

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

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

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

.header-search .search-input-field:not(:focus),
.header-search .search-input-field:not(:focus)::placeholder {
    animation: none;
    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,
.header-search .search-input-field::placeholder {
    font: var(--type-body-l);
    opacity: 1;
    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;
    font-variation-settings: "slnt" -10
}

.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>*,
.homepage-hero-search .search-results .result-item>* {
    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: #0000
}

@media(min-width:769px) {

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

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

.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 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 textPath[href="#circle1"] {
    font-size: 1.5rem
}

.mandala-container textPath[href="#circle2"] {
    font-size: 1.3rem
}

.mandala-container textPath[href="#circle3"] {
    font-size: 1.2rem
}

.mandala-container textPath[href="#circle4"] {
    font-size: 1.1rem
}

.mandala-container textPath[href="#circle5"] {
    font-size: 1rem
}

.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 {
    display: grid;
    gap: 1rem;
    grid-auto-flow: row;
    max-width: 52rem
}

@media(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-start;
    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: var(--background-primary);
    content: "";
    display: block;
    height: calc(1em*var(--base-line-height));
    -webkit-mask-image: linear-gradient(90deg, #0000, #000 75%);
    mask-image: linear-gradient(90deg, #0000, #000 75%);
    pointer-events: none;
    position: absolute;
    right: 0;
    top: calc(2em*var(--base-line-height));
    width: 20ch
}

.featured-articles .article-tile p:dir(rtl):after {
    left: 0;
    -webkit-mask-image: linear-gradient(270deg, #0000, #000 75%);
    mask-image: linear-gradient(270deg, #0000, #000 75%);
    right: auto
}

@media(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(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(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(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(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;
    overflow-wrap: break-word
}

.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;
    font-variation-settings: "slnt" -10;
    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: 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: 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: 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(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: #010101e6;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

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

section.place {
    display: flex;
    margin: 1rem 0
}

section.place a,
section.place a:not(.button) {
    color: var(--text-primary);
    text-decoration: none
}

section.place .pong-box2 {
    --place-new-side-background-light: #111;
    --place-new-side-color-light: #fff;
    --place-new-side-background-dark: #111;
    --place-new-side-color-dark: #fff;
    --place-new-side-background: var(--place-new-side-background-light);
    --place-new-side-color: var(--place-new-side-color-light);
    --border-radius: 0.5rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius);
    height: 100%;
    margin: 0;
    min-height: 20rem;
    overflow: hidden;
    position: relative;
    width: 11rem
}

@media(prefers-color-scheme:dark) {
    section.place .pong-box2 {
        --place-new-side-background: var(--place-new-side-background-dark);
        --place-new-side-color: var(--place-new-side-color-dark)
    }
}

section.place .pong-box2 .pong-note {
    background-color: var(--place-new-side-color);
    border: 1px solid var(--place-new-side-background);
    border-radius: .25rem;
    color: var(--place-new-side-background);
    font-size: .625rem;
    margin: .5rem;
    opacity: .4;
    padding: 0 .25rem;
    position: absolute;
    right: 0;
    text-decoration: underline;
    text-transform: uppercase;
    top: 0;
    width: max-content
}

section.place .pong-box2 .pong-note:hover {
    opacity: unset;
    text-decoration: none
}

section.place .pong-box2 .pong {
    height: 100%;
    padding: 0;
    width: 100%
}

section.place .pong-box2 .pong>img {
    height: auto;
    width: 100%
}

section.place .pong-box2 .pong>div.content {
    background: linear-gradient(to top, var(--place-new-side-background) 9rem, #0000);
    border-radius: var(--border-radius);
    color: var(--place-new-side-color);
    display: flex;
    flex-direction: column;
    gap: .25rem;
    height: 100%;
    justify-content: end;
    position: absolute;
    top: 0;
    width: 100%
}

section.place .pong-box2 .pong>div.content strong {
    font-size: .8875rem;
    line-height: 1.25;
    padding: 0 1rem
}

section.place .pong-box2 .pong>div.content span {
    font-size: .75rem;
    line-height: 1.25;
    padding: 0 1rem
}

section.place .pong-box2 .pong>div.content .pong-cta {
    --color: var(--place-new-side-color);
    --icon-primary: var(--color);
    background-color: hsla(0, 0%, 100%, .067);
    border: 2px solid;
    border-radius: 2rem;
    color: var(--color);
    font-size: .75rem;
    font-weight: 600;
    margin: .5rem auto 1rem 1rem;
    padding: .5em 1em;
    transition: all .3s ease-in-out
}

section.place .pong-box2 .pong>div.content .pong-cta:after {
    transition: all .3s ease-in-out
}

section.place .pong-box2 .pong>div.content .pong-cta:hover {
    --color: var(--place-new-side-background);
    background-color: var(--place-new-side-color)
}

section.place .pong-box {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-primary);
    margin: 0 0 .125rem;
    padding: 0;
    width: 10rem
}

section.place .pong-box .pong {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: .825rem
}

section.place .pong-box .pong img {
    margin: 0;
    max-height: 6.25rem;
    width: 8.125rem
}

section.place .pong-box .pong span {
    color: var(--text-secondary);
    font-size: .75rem;
    padding: .5rem
}

section.place .pong-box .pong-note {
    color: var(--text-secondary);
    display: flex;
    font-size: .625rem;
    justify-content: space-between;
    margin: 1rem .25rem 0 auto;
    text-decoration: underline;
    width: max-content
}

section.place .no-pong,
section.place.top .pong-note {
    text-decoration: none
}

section.place .no-pong:focus,
section.place .no-pong:hover,
section.place.bottom-banner .pong-note,
section.place.side .pong-note,
section.place.top .pong-note:focus,
section.place.top .pong-note:hover {
    text-decoration: underline
}

section.place.bottom-banner .pong-note:focus,
section.place.bottom-banner .pong-note:hover,
section.place.side .pong-note:focus,
section.place.side .pong-note:hover {
    text-decoration: none
}

section.place .no-pong {
    color: var(--text-secondary);
    font-size: .6rem;
    margin-bottom: .5rem;
    max-width: 12rem;
    padding: 0;
    width: 100%
}

section.place.side {
    flex-direction: column;
    height: fit-content;
    max-width: 12rem;
    min-height: 20rem
}

section.place.new-side {
    height: fit-content;
    min-height: 22rem
}

section.place.top {
    align-items: center;
    display: grid;
    font-size: .625rem;
    grid-template-areas: "pong cta" "no note";
    height: var(--top-banner-height);
    margin: 0 auto;
    width: 100%
}

@media(min-width:769px) {
    section.place.top {
        grid-template-areas: "pong cta note" "pong cta no";
        grid-template-columns: fit-content(100%) auto fit-content(100%)
    }
}

section.place.top .pong-box {
    border: none;
    display: contents;
    width: 100%
}

section.place.top .pong-box .pong {
    color: var(--place-top-color);
    flex-direction: row;
    grid-area: pong;
    padding: .125rem;
    text-decoration: none
}

section.place.top .pong-box .pong img {
    height: var(--top-banner-inner-height);
    max-height: var(--top-banner-inner-height);
    width: auto
}

section.place.top .pong-box .pong span {
    color: var(--place-top-color);
    max-height: var(--top-banner-inner-height);
    overflow: auto;
    padding: 0 1rem
}

section.place.top .pong-box .pong-cta {
    background-color: var(--place-top-cta-background);
    border-radius: var(--elem-radius);
    color: var(--place-top-cta-color);
    font-size: var(--type-smaller-font-size);
    grid-area: cta;
    height: fit-content;
    margin-right: auto;
    padding: .25rem 1rem;
    text-align: center
}

section.place.top .pong-box .pong-note {
    background-color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: 0 0 .5rem .5rem;
    border-top: none;
    color: var(--background-secondary);
    grid-area: note;
    margin: 0 0 auto auto;
    padding: 0 .5rem .125rem
}

section.place.top .no-pong {
    color: var(--place-top-color);
    grid-area: no;
    margin: auto 0 0 2rem;
    width: auto
}

html[data-nop] section.place {
    display: none
}

.dark section.place .pong-box2 {
    --place-new-side-background: var(--place-new-side-background-dark);
    --place-new-side-color: var(--place-new-side-color-dark)
}

section.place.hp-main {
    background-color: var(--place-hp-main-background);
    margin: 0;
    width: 100%
}

section.place.hp-main a {
    display: flex;
    justify-content: center;
    width: 100%
}

section.place.hp-main a img {
    height: auto
}

.top-banner {
    --place-top-background-light: var(--background-secondary);
    --place-top-color-light: var(--text-primary);
    --place-top-cta-background-light: var(--text-primary);
    --place-top-cta-color-light: var(--background-secondary);
    --place-top-background-dark: var(--background-secondary);
    --place-top-color-dark: var(--text-primary);
    --place-top-cta-background-dark: var(--text-primary);
    --place-top-cta-color-dark: var(--background-secondary);
    --place-top-background: var(--place-top-background-light);
    --place-top-color: var(--place-top-color-light);
    --place-top-cta-background: var(--place-top-cta-background-light);
    --place-top-cta-color: var(--place-top-cta-color-light);
    background-color: var(--place-top-background);
    border-bottom: 1px solid var(--border-primary);
    height: var(--top-banner-height)
}

@media(prefers-color-scheme:dark) {
    .top-banner {
        --place-top-background: var(--place-top-background-dark);
        --place-top-color: var(--place-top-color-dark);
        --place-top-cta-background: var(--place-top-cta-background-dark);
        --place-top-cta-color: var(--place-top-cta-color-dark)
    }
}

.top-banner.fallback {
    position: static
}

@media(max-width:768px) {
    .top-banner {
        display: none
    }
}

.top-banner .fallback-copy {
    font-size: 1rem;
    grid-column: 1/4;
    line-height: var(--top-banner-height);
    margin: 0 auto
}

.top-banner .fallback-copy a:not(.button) {
    color: var(--apis-accent-color)
}

.top-banner .fallback-copy a:not(.button):focus,
.top-banner .fallback-copy a:not(.button):hover {
    text-decoration: underline
}

html[data-nop] .top-banner {
    display: none
}

div.empty-place.bottom-banner {
    height: 152px;
    position: absolute;
    width: 1px
}

.dark .top-banner {
    --place-top-background: var(--place-top-background-dark);
    --place-top-color: var(--place-top-color-dark);
    --place-top-cta-background: var(--place-top-cta-background-dark);
    --place-top-cta-color: var(--place-top-cta-color-dark)
}

.bottom-banner-container {
    background-color: var(--place-bottom-banner-background, var(--background-primary));
    color: var(--place-bottom-banner-color, var(--text-primary));
    margin: 0;
    width: 100%
}

.bottom-banner-container>section.place.bottom-banner {
    column-gap: 3rem;
    display: grid;
    grid-template-areas: "nope pong note" "nope pong no";
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 15rem);
    margin: 0 auto;
    max-width: var(--max-width);
    padding: 0 1rem
}

.bottom-banner-container>section.place.bottom-banner .pong {
    grid-area: pong;
    justify-self: center
}

.bottom-banner-container>section.place.bottom-banner .pong img {
    height: auto
}

.bottom-banner-container>section.place.bottom-banner .pong-note {
    color: var(--place-bottom-banner-color, var(--text-primary));
    font-size: .625rem;
    grid-area: note;
    margin-top: .5rem
}

.bottom-banner-container>section.place.bottom-banner .no-pong {
    color: var(--place-bottom-banner-color, var(--text-primary));
    font-size: .625rem;
    grid-area: no;
    margin-top: auto
}

@media(max-width:1200px) {
    .bottom-banner-container>section.place.bottom-banner {
        grid-template-areas: "pong note" "pong no";
        grid-template-columns: auto max-content;
        grid-template-rows: auto 2rem
    }
}

@media(max-width:992px) {
    .bottom-banner-container>section.place.bottom-banner {
        grid-template-areas: "pong pong" "note no";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 2rem
    }

    .bottom-banner-container>section.place.bottom-banner .no-pong {
        justify-self: end;
        width: fit-content
    }
}

.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;
    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: #3a39444d;
    --button-border-color: #0000
}

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

.toast-verbose-text {
    display: none
}

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

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

@keyframes fade-in {
    0% {
        opacity: 0
    }

    50% {
        opacity: .5
    }

    to {
        opacity: 1
    }
}

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

    50% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

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

.bc-table {
    border: 1px solid var(--border-primary);
    border-collapse: initial;
    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(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 {
    background: var(--background-primary);
    padding: .4rem;
    vertical-align: bottom
}

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

@media(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 .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 {
    border: 0;
    clip: rect(0 0 0 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-table .bc-feature-depth-3 {
    border-left-width: 16px
}

.bc-head-txt-label {
    left: calc(50% - .5rem);
    line-height: 1;
    padding-top: .5rem;
    position: relative;
    transform: rotate(180deg);
    white-space: nowrap;
    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;
    font-variation-settings: "slnt" -10;
    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 {
    border: 0;
    clip: rect(0 0 0 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(max-width:425px) {
    .bc-table thead {
        display: none
    }

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

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

    .bc-table .bc-history-desktop {
        display: none
    }

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

@media(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-container {
        margin: 0 -3rem;
        overflow: auto;
        width: 100vw
    }

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

    .table-container-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(min-width:769px) {
    .table-container {
        width: calc(100% + 6rem)
    }

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

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

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

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

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

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

.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(min-width:769px) {
    .bcd-cell-icons {
        display: block
    }

    .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;
    width: 160px
}

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

.logo .logo-_,
.logo .logo-m {
    fill: var(--text-link)
}

.logo .logo-text {
    fill: var(--text-primary)
}

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

.auth-container .login-link:link,
.auth-container .login-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-shrink: 0;
    flex-wrap: nowrap;
    font-family: var(--font-body);
    font-size: var(--type-smaller-font-size);
    font-weight: var(--font-body-strong-weight);
    gap: 1rem;
    list-style: none;
    padding: 0
}

.auth-container li {
    flex-shrink: 0
}

@media(max-width:991px) {
    .top-navigation-main .auth-container {
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        text-align: center
    }
}

.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 #0000;
    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: #0000
}

.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(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: 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(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: 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(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(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(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)
}

.top-level-entry-container.active>a:link,
.top-level-entry-container.active>a:visited {
    color: var(--text-active)
}

.top-level-entry-container.active>a:active,
.top-level-entry-container.active>a:hover {
    color: var(--category-color)
}

.top-level-entry-container .top-level-entry-dot~.top-level-entry:after {
    background: var(--text-primary-blue);
    border: 1px solid var(--background-primary);
    border-radius: 2rem;
    content: "";
    height: .5rem;
    position: absolute;
    right: 0;
    top: .5rem;
    width: .5rem
}

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

.guides .desktop-only {
    display: none
}

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

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

.references .desktop-only {
    display: none
}

@media(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(min-width:992px) {
    .mdn-plus .mobile-only {
        display: none
    }
}

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

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

@media(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
    }

    ul.main-menu li:last-child {
        flex-basis: inherit
    }

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

    ul.main-menu .top-level-entry-container {
        flex-shrink: 0
    }
}

@media(min-width:1200px) {
    ul.main-menu {
        gap: 1rem
    }
}

@media(min-width:992px) {
    ul.main-menu .submenu {
        display: none
    }

    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
    }
}

@media screen and (min-width:992px) {
    #tools-button {
        display: flex
    }

    #tools-button:after {
        display: none
    }
}

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

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

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

.signout-form {
    padding: .5rem
}

@media(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 .dot~.avatar-wrap:after {
    background: var(--text-primary-blue);
    border: 1px solid var(--background-primary);
    border-radius: 2rem;
    content: "";
    height: .5rem;
    position: absolute;
    right: 0;
    top: 0;
    width: .5rem
}

@media(max-width:992px) {
    .user-menu .user-menu-toggle:hover {
        --button-bg: #0000
    }
}

@media(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: #0000;
        border-color: #0000;
        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: 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: #0000;
    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 .user-menu {
    order: 3
}

.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(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: #0000
}

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

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

.top-navigation-main .top-level-entry {
    background: none;
    border-top: 1px solid var(--border-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    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 {
    padding: .5rem
}

.top-navigation-main .top-level-entry sup.new {
    --new-background: var(--text-primary-blue);
    --new-background-beta: var(--learn-accent-color);
    --new-color: var(--background-primary);
    align-self: flex-start
}

@media(max-width:991px) {
    .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
    }

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

@media(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 {
    transform: rotate(180deg)
}

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

@media(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 {
        margin-right: auto;
        order: 0;
        width: max-content
    }

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

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

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

    .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: #0000;
    --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(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: max-content;
        min-width: 130px
    }

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

.languages-switcher-menu>.button,
.theme-switcher-menu>.button {
    display: block
}

.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 {
    transform: rotate(180deg)
}

@media(min-width:992px) {

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

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

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

@media(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(min-width:992px) {
    .maintenance:not(:focus-within):not(:hover) .maintenance-info-container {
        border: 0 !important;
        clip: rect(1px, 1px, 1px, 1px) !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%
}

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

@media(min-width:769px) {
    .top-navigation .container {
        background-color: #0000
    }
}

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

.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 #0003
}

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

@media(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 {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.2;
    padding: .25rem 0;
    row-gap: .25rem
}

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

.breadcrumbs-container li:nth-last-child(-n+2) {
    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;
    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(min-width:1200px) {
    .breadcrumbs-container li {
        display: inline-flex
    }
}

.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
}

.article-actions .article-actions-toggle {
    display: block
}

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

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

@media(max-width:769px) {
    .article-actions.show-actions {
        background-color: var(--background-primary);
        color: var(--text-primary);
        display: block;
        height: 100vh;
        left: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        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-submenu {
    --gutter-padding: 1rem;
    display: none;
    overflow: auto
}

.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-submenu.wait,
.article-actions-submenu.wait * {
    cursor: wait !important
}

.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-submenu .header .header-inner {
    align-items: center;
    display: flex;
    gap: .5rem;
    position: relative
}

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

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

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

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

.article-actions-submenu .notecard {
    margin: var(--gutter-padding);
    margin-bottom: 0
}

.article-actions-submenu .notecard:before {
    top: 1.37rem
}

.article-actions-submenu .notecard p {
    margin: 0;
    padding: 0
}

@media(min-width:769px) {
    .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: var(--article-actions-position-left, initial);
        max-height: calc(100vh - 12px - var(--sticky-header-with-actions-height));
        padding: 0;
        position: absolute;
        right: 0;
        top: calc(100% + 6px);
        width: 316px;
        z-index: var(--z-index-mid)
    }

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

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

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

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

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

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

@media(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
}

body.ReactModal__Body--open {
    overflow: hidden
}

.modal-overlay {
    background: var(--background-primary);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    right: 0;
    top: 0;
    z-index: var(--z-index-modal-overlay)
}

.modal-overlay.wait,
.modal-overlay.wait * {
    cursor: wait !important
}

.modal-content {
    background: var(--background-primary);
    flex-basis: 32.5rem;
    outline: none;
    padding: 1.5rem;
    z-index: var(--z-index-modal-content)
}

.modal-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-bottom: 1.5rem
}

.modal-header .button.has-icon {
    --button-color: var(--icon-secondary)
}

.modal-header .button.has-icon:hover {
    --button-color: var(--icon-primary)
}

.modal-header .button.has-icon .button-wrap {
    height: auto;
    margin: -.5rem;
    padding: .5rem;
    width: auto
}

.modal-header .icon {
    height: 1.25rem;
    margin: 0;
    width: 1.25rem
}

.modal-heading {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0
}

.modal-body .notecard {
    margin: 0 0 1rem
}

.modal-body p {
    margin: 1rem 0 0;
    overflow-wrap: anywhere
}

.modal-body p:first-child {
    margin: 0
}

@media(max-width:992px) {
    .modal-body .mdn-form-item:last-child {
        padding-bottom: 1.5rem
    }
}

.modal-body .mdn-form-item.is-button-row {
    flex-direction: row-reverse;
    flex-wrap: wrap-reverse;
    gap: 1.5rem;
    justify-content: flex-start
}

.modal-body button {
    flex: 1 1
}

@media(min-width:992px) {
    body.ReactModal__Body--open {
        overflow: unset
    }

    .modal-overlay {
        align-items: center;
        background-color: #f0f0f4a8
    }

    .modal-content {
        border-radius: var(--elem-radius);
        box-shadow: 0 2px 14px #3a394433;
        height: fit-content;
        max-height: 90vh;
        max-width: 40rem;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        width: 90vw
    }

    .modal-content.is-small {
        max-width: 24rem
    }

    .modal-content button {
        flex: unset
    }
}

.bookmark-menu>.button {
    display: block
}

.bookmark-menu .is-button-row {
    flex-direction: row-reverse;
    justify-content: flex-start
}

.bookmark-menu #bookmark-delete {
    margin-right: auto
}

.bookmark-menu #bookmark-delete .icon {
    background-color: var(--text-primary-red)
}

@media(min-width:769px) {
    .bookmark-menu #bookmark-note {
        max-height: max(100vh - 30rem, 5rem)
    }
}

.article-actions-container {
    align-items: center;
    background-color: var(--background-secondary);
    border-bottom: 1px solid var(--border-primary);
    margin: 0;
    min-height: var(--article-actions-container-height);
    padding: 0;
    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(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(min-width:769px) {
    .article-actions-container {
        position: static
    }

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

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

.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 {
    animation: fade-out 3s ease-out .5s
}

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

    to {
        opacity: 0
    }
}

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

@media(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: inline-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-bottom-right-radius: .25rem;
    border-left: 2px solid var(--category-color);
    border-top-right-radius: .25rem;
    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 {
    color: var(--text-secondary)
}

.sidebar .backdrop {
    display: none
}

.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-bottom-right-radius: .25rem;
    border-left: 2px solid var(--category-color);
    border-top-right-radius: .25rem;
    font-style: normal;
    font-variation-settings: normal;
    font-weight: 600;
    padding: .25rem .5rem
}

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

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

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

.sidebar li.section {
    display: flex;
    font-size: var(--type-base-font-size-rem);
    font-weight: var(--font-body-strong-weight);
    letter-spacing: .02rem;
    margin-top: 1.5rem
}

.sidebar li.section.no-link {
    padding: .25rem
}

.sidebar li:first-of-type strong {
    margin-top: unset
}

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

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

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

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

.sidebar .sidebar-actions {
    height: 0;
    padding-bottom: 4rem;
    position: sticky;
    top: 0;
    z-index: var(--z-index-main-header)
}

.sidebar .sidebar-actions~.sidebar-inner-nav {
    margin-top: .5rem
}

@media(max-width:769px) {
    .sidebar .sidebar-actions {
        height: unset;
        margin-top: unset;
        padding-bottom: unset;
        position: unset;
        top: unset
    }

    .sidebar .sidebar-actions~.sidebar-inner-nav {
        margin-top: unset
    }
}

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

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

.sidebar summary {
    cursor: pointer
}

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

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

.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)
}

@media(max-width:768px) {
    .sidebar {
        height: 100vh;
        left: 0;
        max-height: 100vh;
        position: fixed;
        right: 0;
        top: var(--offset);
        transform: translateX(-100%)
    }

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

    .sidebar .sidebar-inner .sidebar-inner-nav {
        display: contents;
        -webkit-mask-image: linear-gradient(180deg, #000 0 calc(100% - 3rem), #0000);
        mask-image: linear-gradient(180deg, #000 0 calc(100% - 3rem), #0000);
        padding-bottom: 3rem
    }
}

@media(max-width:768px)and (min-height:44rem) {
    .sidebar .sidebar-inner {
        display: flex;
        flex-direction: column;
        overflow: hidden
    }

    .sidebar .sidebar-inner .sidebar-inner-nav {
        display: block;
        overflow: auto
    }
}

@media(max-width:768px) {
    .sidebar .sidebar-inner .place {
        align-self: center;
        grid-row: 2/3;
        justify-self: center;
        margin-bottom: 0
    }

    .sidebar .backdrop {
        background: #0000004d;
        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
    }

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

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

@media(min-width:769px) {
    .sidebar .place {
        display: none
    }

    .sidebar {
        display: flex;
        position: relative
    }
}

@media(min-height:44rem), (min-width:992px) {
    .sidebar {
        display: block;
        overflow: auto
    }
}

@media(min-width:1200px) {
    .sidebar {
        max-height: var(--max-height);
        position: sticky;
        top: var(--offset)
    }
}

.sidebar-filter-container {
    background: linear-gradient(to bottom, var(--background-primary) 0 calc(100% - 2rem), #0000 100%);
    display: flex;
    flex-direction: column;
    font-size: var(--type-smaller-font-size);
    padding-bottom: 2rem;
    padding-right: .5rem;
    padding-top: .5rem
}

@media(max-width:769px) {
    .sidebar-filter-container {
        padding-bottom: unset
    }
}

.sidebar-filter-container .sidebar-filter {
    align-items: center;
    display: flex;
    margin-bottom: .5rem
}

.sidebar-filter-container .sidebar-filter.has-input .sidebar-filter-label .icon {
    background-color: var(--category-color)
}

.sidebar-filter-container .sidebar-filter-label {
    left: .5rem;
    position: relative;
    width: 0
}

.sidebar-filter-container .sidebar-filter-label .icon {
    background-size: 1rem;
    height: 1rem;
    -webkit-mask-size: 1rem;
    mask-size: 1rem;
    width: 1rem
}

.sidebar-filter-container .sidebar-filter-input-field {
    -webkit-appearance: none;
    background-color: var(--background-primary);
    border: 1px solid var(--border-primary);
    border-radius: 1rem;
    color: var(--text-primary);
    height: var(--form-elem-height);
    padding-left: 1.75rem
}

.sidebar-filter-container .sidebar-filter-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
}

.sidebar-filter-container .sidebar-filter-input-field[value=""] {
    width: 5rem
}

.sidebar-filter-container .sidebar-filter-input-field:not([value=""])~.sidebar-filter-label .icon {
    background-color: var(--category-color) !important
}

.sidebar-filter-container .sidebar-filter-input-field.is-active,
.sidebar-filter-container .sidebar-filter-input-field:focus {
    padding-right: 7rem;
    width: 100%
}

.sidebar-filter-container .sidebar-filter-input-field.is-active~.button.clear-sidebar-filter-button,
.sidebar-filter-container .sidebar-filter-input-field.is-active~.sidebar-filter-count,
.sidebar-filter-container .sidebar-filter-input-field:focus~.button.clear-sidebar-filter-button,
.sidebar-filter-container .sidebar-filter-input-field:focus~.sidebar-filter-count {
    display: block
}

.sidebar-filter-container .sidebar-filter-input-field~.sidebar-filter-count {
    background: var(--mark-color);
    border-radius: 1rem;
    display: none;
    font-size: var(--type-tiny-font-size);
    padding: 0 .25rem;
    position: absolute;
    right: 2.5rem
}

@media(max-width:769px) {
    .sidebar-filter-container .sidebar-filter-input-field~.sidebar-filter-count {
        right: 3rem
    }
}

.sidebar-filter-container .sidebar-filter-input-field~.button.clear-sidebar-filter-button {
    display: none;
    position: absolute;
    right: .75rem
}

.sidebar-filter-container .sidebar-filter-input-field~.button.clear-sidebar-filter-button:hover {
    background: #0000
}

@media(max-width:769px) {
    .sidebar-filter-container .sidebar-filter-input-field~.button.clear-sidebar-filter-button {
        left: calc(100% - 3rem)
    }
}

.sidebar-filter-container .button {
    --button-color: var(--icon-secondary);
    --button-height: 1.5rem;
    --button-padding: 0;
    width: 1.5rem
}

.sidebar-filter-container .icon {
    background-color: var(--icon-secondary);
    margin-right: unset;
    position: unset;
    position: relative;
    z-index: unset
}

.sidebar mark {
    background-color: var(--mark-color);
    color: unset
}

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

.article-footer {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--elem-radius);
    box-shadow: var(--shadow-01);
    margin: 0;
    padding: 1rem
}

@media(max-width:769px) {
    .article-footer {
        margin: 0 3rem 3rem
    }
}

@media(max-width:426px) {
    .article-footer {
        margin-left: 1rem;
        margin-right: 1rem
    }
}

.article-footer .article-footer-inner {
    margin: 0 auto;
    max-width: 1440px;
    width: 100%
}

.article-footer .article-footer-inner .svg-container {
    position: relative
}

.article-footer .article-footer-inner .svg-container svg {
    height: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 20%
}

.article-footer .article-footer-inner h2 {
    margin-top: 0;
    padding: 0
}

.article-footer .article-footer-inner .feedback {
    border: none;
    margin: 0 0 .25rem;
    padding: 0
}

.article-footer .article-footer-inner .feedback>label {
    display: block;
    margin-bottom: .25rem
}

.article-footer .article-footer-inner .feedback .thank-you {
    display: block;
    margin-bottom: calc(2.75rem + 2px)
}

.article-footer .article-footer-inner .feedback .button-container {
    display: inline-flex;
    gap: .75rem;
    margin: .25rem 0
}

.article-footer .article-footer-inner .feedback button {
    flex: 1 1;
    min-width: 0
}

.article-footer .article-footer-inner .feedback button:not(:hover) {
    --button-bg: var(--background-secondary);
    --button-color: var(--text-primary)
}

.article-footer .article-footer-inner .feedback button.yes {
    --button-bg-hover: var(--text-primary-green)
}

.article-footer .article-footer-inner .feedback button.no {
    --button-bg-hover: var(--text-primary-red)
}

.article-footer .article-footer-inner .feedback .button-wrap {
    display: flex;
    gap: .5rem;
    padding: 1rem
}

.article-footer .article-footer-inner .feedback .radio-container {
    align-items: center;
    display: flex;
    gap: .25rem;
    margin: .25rem 0
}

.article-footer .article-footer-inner .contribute {
    margin-top: .25rem
}

.article-footer .article-footer-inner .last-modified-date {
    margin-bottom: 0;
    margin-top: 2rem
}

.article-footer .article-footer-inner .emoji {
    font-family: initial
}

.page-not-found .fallback-document .fallback-link {
    font-size: 1rem
}

:root,
body {
    --mdn-color-white: #fff;
    --mdn-color-black: #000;
    --mdn-color-ads: #00d0aa;
    --mdn-color-background-highlight: #f0e498;
    --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-active: #858585;
    --text-inactive: #9e9e9ea6;
    --text-link: #0069c2;
    --text-visited: #551a8b;
    --text-invert: #fff;
    --text-muted: #6f6f6f;
    --background-primary: #fff;
    --background-secondary: #f9f9fb;
    --background-tertiary: #ebeaea;
    --background-toc-active: #ebeaea;
    --background-mark-yellow: #c7b70066;
    --background-mark-green: #00d06166;
    --background-information: #0085f21a;
    --background-warning: #ff2a511a;
    --background-critical: #d300381a;
    --background-success: #0079361a;
    --background-del: #d3003880;
    --background-ins: #00793680;
    --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: #0085f21a;
    --accent-secondary: #0085f2;
    --accent-tertiary: #0085f21a;
    --shadow-01: 0 1px 2px #2b2a330d;
    --shadow-02: 0 1px 6px #2b2a331a;
    --focus-01: 0 0 0 3px #0090ed66;
    --field-focus-border: #0085f2;
    --code-token-tag: #0069c2;
    --code-token-punctuation: #858585;
    --code-token-attribute-name: #d30038;
    --code-token-attribute-value: #007936;
    --code-token-comment: #858585;
    --code-token-default: #1b1b1b;
    --code-token-selector: #872bff;
    --code-background-inline: #f2f1f1;
    --code-background-block: #f2f1f1;
    --notecard-link-color: #343434;
    --scrollbar-bg: #0000;
    --scrollbar-color: #00000040;
    --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: #ff2a51b3;
    --html-accent-engage: #ff2a51b3;
    --css-accent-engage: #0085f2b3;
    --js-accent-engage: #938700b3;
    --http-accent-engage: #009a46b3;
    --apis-accent-engage: #9b65ffb3;
    --learn-accent-engage: #ff1f72b3;
    --modal-backdrop-color: #1b1b1b1a;
    --blend-color: #fff80;
    --text-primary-red: #d30038;
    --text-primary-green: #007936;
    --text-primary-blue: #0069c2;
    --text-primary-yellow: #746a00;
    --collections-link: #9e0027;
    --collections-header: #ffd9dc;
    --collections-mandala: #ff97a0;
    --collections-icon: #ff2a51;
    --updates-link: #0069c2;
    --updates-header: #f9f9fb;
    --updates-mandala: #8cb4ff;
    --updates-icon: #0085f2;
    --ai-help-link: #007936;
    --ai-help-header: #f9f9fb;
    --ai-help-mandala: #00d061;
    --ai-help-icon: #009a46;
    --ai-help-accent-background-color: #009a4610;
    --observatory-bg: #f2f2f5;
    --observatory-bg-code: #e1e1e1;
    --observatory-bg-secondary: #fff;
    --observatory-color: #000;
    --observatory-color-secondary: #696969;
    --observatory-inverse-color: #fff;
    --observatory-inverse-color-secondary: #b3b3b3;
    --observatory-accent: #5a23d7;
    --observatory-accent-light: #5a23d7aa;
    --observatory-border: #e4e4f6;
    --observatory-border-accent: #5a23d7;
    --observatory-pass-icon-bg: #e5fae6;
    --observatory-pass-icon-color: #007936;
    --observatory-fail-icon-bg: #fae5e5;
    --observatory-fail-icon-color: #d30038;
    --observatory-table-bg: #fff;
    --observatory-table-bg-alternate: #f9f9fb;
    --observatory-table-header-bg: #f9f9fb;
    --observatory-grade-a-bg: #d2fadd;
    --observatory-grade-a-border: #017a37;
    --observatory-grade-b-bg: #e8fad2;
    --observatory-grade-b-border: #547a01;
    --observatory-grade-c-bg: #faf8d2;
    --observatory-grade-c-border: #7a7001;
    --observatory-grade-d-bg: #fae8d2;
    --observatory-grade-d-border: #a65001;
    --observatory-grade-f-bg: #fad2d2;
    --observatory-grade-f-border: #a00;
    --observatory-arrow-down-color: #9e0027;
    --observatory-arrow-up-color: #007936;
    --form-limit-color: #696969;
    --form-limit-color-emphasis: #4e4e4e;
    --form-invalid-color: #d30038;
    --form-invalid-focus-color: #ff2a51;
    --form-invalid-focus-effect-color: #ff2a5133;
    --baseline-high-bg: #e6f4ea;
    --baseline-high-engine-bg: #ceead6;
    --baseline-high-img: url(/static/media/high.1cadd1dd8633aafe4118.svg);
    --baseline-high-check: #099949;
    --baseline-low-bg: #e8f0fe;
    --baseline-low-engine-bg: #d2e3fc;
    --baseline-low-check: #1a73e8;
    --baseline-low-img: url(/static/media/low.f0f04252a312a99f0354.svg);
    --baseline-low-pill-bg: #3367d6;
    --baseline-low-pill-color: #f1f3f4;
    --baseline-limited-bg: #f1f3f4;
    --baseline-limited-engine-bg: #e3e6e8;
    --baseline-limited-img: url(/static/media/limited.33014e3dcdb86f37e0c8.svg);
    --baseline-limited-check: #1e8e3e;
    --baseline-limited-cross: #ea8600;
    --curriculum-bg-color: #fcefe2;
    --curriculum-bg-color-note: #fcefe280;
    --curriculum-bg-large-color: #fcefe2;
    --curriculum-bg-color-topic-standards: #ff2a5130;
    --curriculum-bg-color-topic-styling: #0085f230;
    --curriculum-bg-color-topic-scripting: #93870030;
    --curriculum-bg-color-topic-tooling: #009a4630;
    --curriculum-bg-color-topic-practices: #9b65ff30;
    --curriculum-bg-color-landing: #fff;
    --curriculum-bg-color-landing-about-ul: #fff;
    --curriculum-bg-color-landing-top-icon: #fcefe2;
    --curriculum-bg-color-landing-stairway-floor: #fcefe2;
    --curriculum-category-color: #e3642a;
    --curriculum-color: #d47d55;
    --curriculum-module-label-color: #b34d1f;
    --curriculum-module-label-bg-color: #faf0e3;
    --curriculum-color-topic-standards: #d30038;
    --curriculum-color-topic-styling: #0069c2;
    --curriculum-color-topic-scripting: #746a00;
    --curriculum-color-topic-tooling: #007936;
    --curriculum-color-topic-practices: #872bff;
    --curriculum-color-landing-laptop: #e3642a;
    --curriculum-border-color: #f2f1f1;
    --curriculum-border-color-hover: var(--text-inactive);
    --curriculum-bg-color-list-item-body: #fff;
    --curriculum-color-list-item-icon-topic-standards: #d30038;
    --curriculum-color-list-item-icon-topic-styling: #0069c2;
    --curriculum-color-list-item-icon-topic-scripting: #746a00;
    --curriculum-color-list-item-icon-topic-tooling: #007936;
    --curriculum-color-list-item-icon-topic-practices: #872bff;
    --curriculum-bg-color-list-item-icon-topic-standards: #fff;
    --curriculum-bg-color-list-item-icon-topic-styling: #fff;
    --curriculum-bg-color-list-item-icon-topic-scripting: #fff;
    --curriculum-bg-color-list-item-icon-topic-tooling: #fff;
    --curriculum-bg-color-list-item-icon-topic-practices: #fff;
    --curriculum-bg-color-list-item-topic-standards: #ff2a5130;
    --curriculum-bg-color-list-item-topic-styling: #0085f230;
    --curriculum-bg-color-list-item-topic-scripting: #93870030;
    --curriculum-bg-color-list-item-topic-tooling: #009a4630;
    --curriculum-bg-color-list-item-topic-practices: #9b65ff30;
    --curriculum-bg-color-partner: #fff;
    --curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
    --curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
    --curriculum-landing-about-beginner: url(/static/media/curriculum-landing-about-beginner.7e0e795029ffef7171e9.svg#light);
    --curriculum-landing-about-pace: url(/static/media/curriculum-landing-about-pace.cba550dca84e77e508e3.svg#light);
    --curriculum-landing-about-free: url(/static/media/curriculum-landing-about-free.72e91e2f7d6cd807f99a.svg#light);
    --curriculum-landing-about-bullet: url(/static/media/curriculum-landing-about-bullet.6ddad7f362afafb9f1d2.svg#light);
    --curriculum-landing-started-beginner: url(/static/media/curriculum-landing-started-beginner.98498a537d7bc0081455.svg#small-light);
    --curriculum-landing-started-advanced: url(/static/media/curriculum-landing-started-advanced.f1ff5aabbd25eb7c84b9.svg#small-light);
    --curriculum-landing-started-employment: url(/static/media/curriculum-landing-started-employment.6dfff83343aff136eed6.svg#small-light);
    --curriculum-landing-started-educator: url(/static/media/curriculum-landing-started-educator.2b1973dd359c46918e58.svg#small-light);
    --curriculum-module-mdn-resource: url(/static/media/curriculum-mdn-resource.1cf9ad8f86adfca49b67.svg#light);
    --curriculum-bullet: url(/static/media/curriculum-bullet.417fa50fd3559a7556d8.svg#light);
    --curriculum-about-covered: url(/static/media/curriculum-about-covered.6570f5157d434ba42984.svg#light);
    --curriculum-about-detail: url(/static/media/curriculum-about-detail.b708e21902f138eba9bf.svg#light);
    --curriculum-about-educators: url(/static/media/curriculum-about-educators.b29c7d71b39c1b0a0afe.svg#light);
    --curriculum-about-not: url(/static/media/curriculum-about-not.2ee2d9f300a73d1ebd6e.svg#light);
    --curriculum-about-students: url(/static/media/curriculum-about-students.2cd6ad2fcf4a6207f793.svg#light);
    --curriculum-bg-image-partner: url(/static/media/curriculum-partner-bg.b22eb19c53210709769d.svg#light);
    --curriculum-scrim-bg: url(/static/media/curriculum-scrim-bg.31bd527e5f6181a86b6f.svg#light);
    --curriculum-landing-arrow: url(/static/media/curriculum-landing-arrow.583d54721a2c1d371598.svg#light);
    color-scheme: light
}

@media(min-width:769px) {
    .light {
        --curriculum-landing-started-beginner: url(/static/media/curriculum-landing-started-beginner.98498a537d7bc0081455.svg#light);
        --curriculum-landing-started-advanced: url(/static/media/curriculum-landing-started-advanced.f1ff5aabbd25eb7c84b9.svg#light);
        --curriculum-landing-started-employment: url(/static/media/curriculum-landing-started-employment.6dfff83343aff136eed6.svg#light);
        --curriculum-landing-started-educator: url(/static/media/curriculum-landing-started-educator.2b1973dd359c46918e58.svg#light)
    }
}

.dark {
    --text-primary: #fff;
    --text-secondary: #cdcdcd;
    --text-active: #858585;
    --text-inactive: #cdcdcda6;
    --text-link: #8cb4ff;
    --text-visited: #ffadff;
    --text-invert: #1b1b1b;
    --text-muted: #858585;
    --background-primary: #1b1b1b;
    --background-secondary: #313131;
    --background-tertiary: #858585;
    --background-toc-active: #343434;
    --background-mark-yellow: #c7b70066;
    --background-mark-green: #00d06166;
    --background-information: #0085f21a;
    --background-warning: #ff2a511a;
    --background-critical: #d300381a;
    --background-success: #0079361a;
    --background-del: #d3003880;
    --background-ins: #00793680;
    --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: #5e9eff1a;
    --accent-secondary: #5e9eff;
    --accent-tertiary: #0085f21a;
    --shadow-01: 0 1px 2px #fbfbfe33;
    --shadow-02: 0 1px 6px #fbfbfe33;
    --focus-01: 0 0 0 3px #fbfbfe80;
    --field-focus-border: #fff;
    --code-token-tag: #c1cff1;
    --code-token-punctuation: #b3b3b3;
    --code-token-attribute-name: #ff97a0;
    --code-token-attribute-value: #00d061;
    --code-token-comment: #b3b3b3;
    --code-token-default: #fff;
    --code-token-selector: #bea5ff;
    --code-background-inline: #343434;
    --code-background-block: #343434;
    --notecard-link-color: #e2e2e2;
    --scrollbar-bg: #0000;
    --scrollbar-color: #ffffff40;
    --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: #ff707fb3;
    --html-accent-engage: #ff707fb3;
    --css-accent-engage: #8cb4ffb3;
    --js-accent-engage: #afa100b3;
    --http-accent-engage: #00b755b3;
    --apis-accent-engage: #ae8affb3;
    --learn-accent-engage: #ff6d91b3;
    --modal-backdrop-color: #1b1b1bb3;
    --blend-color: #00080;
    --text-primary-red: #ff97a0;
    --text-primary-green: #00d061;
    --text-primary-blue: #8cb4ff;
    --text-primary-yellow: #c7b700;
    --collections-link: #ff97a0;
    --collections-header: #40000a;
    --collections-mandala: #9e0027;
    --collections-icon: #d30038;
    --updates-link: #8cb4ff;
    --updates-header: #000;
    --updates-mandala: #c1cff1;
    --updates-icon: #8cb4ff;
    --ai-help-link: #00d061;
    --ai-help-header: #000;
    --ai-help-mandala: #73e693;
    --ai-help-icon: #00d061;
    --ai-help-accent-background-color: #009a4630;
    --observatory-bg: #343434;
    --observatory-bg-code: #4d4d4d;
    --observatory-bg-secondary: #000;
    --observatory-color: #fff;
    --observatory-color-secondary: #f9f9fb;
    --observatory-inverse-color: #1b1b1b;
    --observatory-inverse-color-secondary: #696969;
    --observatory-accent: #a388ff;
    --observatory-accent-light: #a388ffaa;
    --observatory-border: #696969;
    --observatory-border-accent: #a388ff;
    --observatory-pass-icon-bg: #265c3d;
    --observatory-pass-icon-color: #8affa3;
    --observatory-fail-icon-bg: #5c2626;
    --observatory-fail-icon-color: #ff799b;
    --observatory-table-bg: #1b1b1b;
    --observatory-table-bg-alternate: #212121;
    --observatory-table-header-bg: #1b1b1b;
    --observatory-grade-a-bg: #265c3d;
    --observatory-grade-a-border: #89fca1;
    --observatory-grade-b-bg: #52662a;
    --observatory-grade-b-border: #d5fc88;
    --observatory-grade-c-bg: #66602a;
    --observatory-grade-c-border: #fcf988;
    --observatory-grade-d-bg: #5c3d26;
    --observatory-grade-d-border: #ff6a00;
    --observatory-grade-f-bg: #5c2626;
    --observatory-grade-f-border: #fc8888;
    --observatory-arrow-down-color: #ff707f;
    --observatory-arrow-up-color: #00ff6a;
    --form-limit-color: #9e9e9e;
    --form-limit-color-emphasis: #b3b3b3;
    --form-invalid-color: #ff97a0;
    --form-invalid-focus-color: #ff707f;
    --form-invalid-focus-effect-color: #ff707f33;
    --baseline-high-bg: #0e2a10;
    --baseline-high-engine-bg: #031b05;
    --baseline-high-img: url(/static/media/high-dark.b34312d314ead604bfbd.svg);
    --baseline-high-check: #099949;
    --baseline-low-bg: #041e49;
    --baseline-low-engine-bg: #020d20;
    --baseline-low-check: #1a73e8;
    --baseline-low-img: url(/static/media/low-dark.4ed53864ce1653e32eaa.svg);
    --baseline-low-pill-bg: #3367d6;
    --baseline-low-pill-color: #f1f3f4;
    --baseline-limited-bg: #282a2c;
    --baseline-limited-engine-bg: #1d1e1f;
    --baseline-limited-img: url(/static/media/limited-dark.407e5f7602b35f7d9bc8.svg);
    --baseline-limited-check: #1e8e3e;
    --baseline-limited-cross: #ea8600;
    --curriculum-color: #e3642a;
    --curriculum-color-topic-standards: #f2919c;
    --curriculum-color-topic-styling: #91a6f2;
    --curriculum-color-topic-scripting: #f2cf8f;
    --curriculum-color-topic-tooling: #8ff2a4;
    --curriculum-color-topic-practices: #c891f2;
    --curriculum-bg-color: #321d13;
    --curriculum-bg-color-note: #332c29;
    --curriculum-bg-large-color: #343434;
    --curriculum-bg-color-topic-standards: #994b53;
    --curriculum-bg-color-topic-styling: #4e609e;
    --curriculum-bg-color-topic-scripting: #7d683d;
    --curriculum-bg-color-topic-tooling: #3d7c4b;
    --curriculum-bg-color-topic-practices: #584280;
    --curriculum-bg-color-landing: #0e0b0a;
    --curriculum-bg-color-landing-about-ul: #000;
    --curriculum-bg-color-landing-top-icon: #321d13;
    --curriculum-bg-color-landing-stairway-floor: #895b33;
    --curriculum-category-color: #e3642a;
    --curriculum-bg-color-grey: #1f1c1a;
    --curriculum-bg-color-orange: #b25c35;
    --curriculum-color-landing-laptop: #b25c35;
    --curriculum-bg-color-list-item-body: #000;
    --curriculum-border-color: #4e4e4e;
    --curriculum-border-color-hover: var(--text-inactive);
    --curriculum-module-label-color: #e3642a;
    --curriculum-module-label-bg-color: #321d13;
    --curriculum-bg-color-list-item-topic-standards: #343434;
    --curriculum-bg-color-list-item-topic-styling: #343434;
    --curriculum-bg-color-list-item-topic-scripting: #343434;
    --curriculum-bg-color-list-item-topic-tooling: #343434;
    --curriculum-bg-color-list-item-topic-practices: #343434;
    --curriculum-color-list-item-icon-topic-standards: #f2919c;
    --curriculum-color-list-item-icon-topic-styling: #91a6f2;
    --curriculum-color-list-item-icon-topic-scripting: #f2cf8f;
    --curriculum-color-list-item-icon-topic-tooling: #8ff2a4;
    --curriculum-color-list-item-icon-topic-practices: #c891f2;
    --curriculum-bg-color-list-item-icon-topic-standards: #804248;
    --curriculum-bg-color-list-item-icon-topic-styling: #425080;
    --curriculum-bg-color-list-item-icon-topic-scripting: #806a42;
    --curriculum-bg-color-list-item-icon-topic-tooling: #428050;
    --curriculum-bg-color-list-item-icon-topic-practices: #584280;
    --curriculum-bg-color-partner: #1f1c1a;
    --curriculum-shadow: 2px 2px 5px 0 #24242426, -2px 2px 8px 0 #57575726;
    --curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
    --curriculum-landing-about-beginner: url(/static/media/curriculum-landing-about-beginner.7e0e795029ffef7171e9.svg#dark);
    --curriculum-landing-about-pace: url(/static/media/curriculum-landing-about-pace.cba550dca84e77e508e3.svg#dark);
    --curriculum-landing-about-free: url(/static/media/curriculum-landing-about-free.72e91e2f7d6cd807f99a.svg#dark);
    --curriculum-landing-about-bullet: url(/static/media/curriculum-landing-about-bullet.6ddad7f362afafb9f1d2.svg#dark);
    --curriculum-landing-started-beginner: url(/static/media/curriculum-landing-started-beginner.98498a537d7bc0081455.svg#small-dark);
    --curriculum-landing-started-advanced: url(/static/media/curriculum-landing-started-advanced.f1ff5aabbd25eb7c84b9.svg#small-dark);
    --curriculum-landing-started-employment: url(/static/media/curriculum-landing-started-employment.6dfff83343aff136eed6.svg#small-dark);
    --curriculum-landing-started-educator: url(/static/media/curriculum-landing-started-educator.2b1973dd359c46918e58.svg#small-dark);
    --curriculum-module-mdn-resource: url(/static/media/curriculum-mdn-resource.1cf9ad8f86adfca49b67.svg#dark);
    --curriculum-bullet: url(/static/media/curriculum-bullet.417fa50fd3559a7556d8.svg#dark);
    --curriculum-about-covered: url(/static/media/curriculum-about-covered.6570f5157d434ba42984.svg#dark);
    --curriculum-about-detail: url(/static/media/curriculum-about-detail.b708e21902f138eba9bf.svg#dark);
    --curriculum-about-educators: url(/static/media/curriculum-about-educators.b29c7d71b39c1b0a0afe.svg#dark);
    --curriculum-about-not: url(/static/media/curriculum-about-not.2ee2d9f300a73d1ebd6e.svg#dark);
    --curriculum-about-students: url(/static/media/curriculum-about-students.2cd6ad2fcf4a6207f793.svg#dark);
    --curriculum-bg-image-partner: url(/static/media/curriculum-partner-bg.b22eb19c53210709769d.svg#dark);
    --curriculum-scrim-bg: url(/static/media/curriculum-scrim-bg.31bd527e5f6181a86b6f.svg#dark);
    --curriculum-landing-arrow: url(/static/media/curriculum-landing-arrow.583d54721a2c1d371598.svg#dark);
    color-scheme: dark
}

@media(min-width:769px) {
    .dark {
        --curriculum-landing-started-beginner: url(/static/media/curriculum-landing-started-beginner.98498a537d7bc0081455.svg#dark);
        --curriculum-landing-started-advanced: url(/static/media/curriculum-landing-started-advanced.f1ff5aabbd25eb7c84b9.svg#dark);
        --curriculum-landing-started-employment: url(/static/media/curriculum-landing-started-employment.6dfff83343aff136eed6.svg#dark);
        --curriculum-landing-started-educator: url(/static/media/curriculum-landing-started-educator.2b1973dd359c46918e58.svg#dark)
    }
}

@media(prefers-color-scheme:light) {
    :root:not(.light):not(.dark) {
        --text-primary: #1b1b1b;
        --text-secondary: #4e4e4e;
        --text-active: #858585;
        --text-inactive: #9e9e9ea6;
        --text-link: #0069c2;
        --text-visited: #551a8b;
        --text-invert: #fff;
        --text-muted: #6f6f6f;
        --background-primary: #fff;
        --background-secondary: #f9f9fb;
        --background-tertiary: #ebeaea;
        --background-toc-active: #ebeaea;
        --background-mark-yellow: #c7b70066;
        --background-mark-green: #00d06166;
        --background-information: #0085f21a;
        --background-warning: #ff2a511a;
        --background-critical: #d300381a;
        --background-success: #0079361a;
        --background-del: #d3003880;
        --background-ins: #00793680;
        --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: #0085f21a;
        --accent-secondary: #0085f2;
        --accent-tertiary: #0085f21a;
        --shadow-01: 0 1px 2px #2b2a330d;
        --shadow-02: 0 1px 6px #2b2a331a;
        --focus-01: 0 0 0 3px #0090ed66;
        --field-focus-border: #0085f2;
        --code-token-tag: #0069c2;
        --code-token-punctuation: #858585;
        --code-token-attribute-name: #d30038;
        --code-token-attribute-value: #007936;
        --code-token-comment: #858585;
        --code-token-default: #1b1b1b;
        --code-token-selector: #872bff;
        --code-background-inline: #f2f1f1;
        --code-background-block: #f2f1f1;
        --notecard-link-color: #343434;
        --scrollbar-bg: #0000;
        --scrollbar-color: #00000040;
        --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: #ff2a51b3;
        --html-accent-engage: #ff2a51b3;
        --css-accent-engage: #0085f2b3;
        --js-accent-engage: #938700b3;
        --http-accent-engage: #009a46b3;
        --apis-accent-engage: #9b65ffb3;
        --learn-accent-engage: #ff1f72b3;
        --modal-backdrop-color: #1b1b1b1a;
        --blend-color: #fff80;
        --text-primary-red: #d30038;
        --text-primary-green: #007936;
        --text-primary-blue: #0069c2;
        --text-primary-yellow: #746a00;
        --collections-link: #9e0027;
        --collections-header: #ffd9dc;
        --collections-mandala: #ff97a0;
        --collections-icon: #ff2a51;
        --updates-link: #0069c2;
        --updates-header: #f9f9fb;
        --updates-mandala: #8cb4ff;
        --updates-icon: #0085f2;
        --ai-help-link: #007936;
        --ai-help-header: #f9f9fb;
        --ai-help-mandala: #00d061;
        --ai-help-icon: #009a46;
        --ai-help-accent-background-color: #009a4610;
        --observatory-bg: #f2f2f5;
        --observatory-bg-code: #e1e1e1;
        --observatory-bg-secondary: #fff;
        --observatory-color: #000;
        --observatory-color-secondary: #696969;
        --observatory-inverse-color: #fff;
        --observatory-inverse-color-secondary: #b3b3b3;
        --observatory-accent: #5a23d7;
        --observatory-accent-light: #5a23d7aa;
        --observatory-border: #e4e4f6;
        --observatory-border-accent: #5a23d7;
        --observatory-pass-icon-bg: #e5fae6;
        --observatory-pass-icon-color: #007936;
        --observatory-fail-icon-bg: #fae5e5;
        --observatory-fail-icon-color: #d30038;
        --observatory-table-bg: #fff;
        --observatory-table-bg-alternate: #f9f9fb;
        --observatory-table-header-bg: #f9f9fb;
        --observatory-grade-a-bg: #d2fadd;
        --observatory-grade-a-border: #017a37;
        --observatory-grade-b-bg: #e8fad2;
        --observatory-grade-b-border: #547a01;
        --observatory-grade-c-bg: #faf8d2;
        --observatory-grade-c-border: #7a7001;
        --observatory-grade-d-bg: #fae8d2;
        --observatory-grade-d-border: #a65001;
        --observatory-grade-f-bg: #fad2d2;
        --observatory-grade-f-border: #a00;
        --observatory-arrow-down-color: #9e0027;
        --observatory-arrow-up-color: #007936;
        --form-limit-color: #696969;
        --form-limit-color-emphasis: #4e4e4e;
        --form-invalid-color: #d30038;
        --form-invalid-focus-color: #ff2a51;
        --form-invalid-focus-effect-color: #ff2a5133;
        --baseline-high-bg: #e6f4ea;
        --baseline-high-engine-bg: #ceead6;
        --baseline-high-img: url(/static/media/high.1cadd1dd8633aafe4118.svg);
        --baseline-high-check: #099949;
        --baseline-low-bg: #e8f0fe;
        --baseline-low-engine-bg: #d2e3fc;
        --baseline-low-check: #1a73e8;
        --baseline-low-img: url(/static/media/low.f0f04252a312a99f0354.svg);
        --baseline-low-pill-bg: #3367d6;
        --baseline-low-pill-color: #f1f3f4;
        --baseline-limited-bg: #f1f3f4;
        --baseline-limited-engine-bg: #e3e6e8;
        --baseline-limited-img: url(/static/media/limited.33014e3dcdb86f37e0c8.svg);
        --baseline-limited-check: #1e8e3e;
        --baseline-limited-cross: #ea8600;
        --curriculum-bg-color: #fcefe2;
        --curriculum-bg-color-note: #fcefe280;
        --curriculum-bg-large-color: #fcefe2;
        --curriculum-bg-color-topic-standards: #ff2a5130;
        --curriculum-bg-color-topic-styling: #0085f230;
        --curriculum-bg-color-topic-scripting: #93870030;
        --curriculum-bg-color-topic-tooling: #009a4630;
        --curriculum-bg-color-topic-practices: #9b65ff30;
        --curriculum-bg-color-landing: #fff;
        --curriculum-bg-color-landing-about-ul: #fff;
        --curriculum-bg-color-landing-top-icon: #fcefe2;
        --curriculum-bg-color-landing-stairway-floor: #fcefe2;
        --curriculum-category-color: #e3642a;
        --curriculum-color: #d47d55;
        --curriculum-module-label-color: #b34d1f;
        --curriculum-module-label-bg-color: #faf0e3;
        --curriculum-color-topic-standards: #d30038;
        --curriculum-color-topic-styling: #0069c2;
        --curriculum-color-topic-scripting: #746a00;
        --curriculum-color-topic-tooling: #007936;
        --curriculum-color-topic-practices: #872bff;
        --curriculum-color-landing-laptop: #e3642a;
        --curriculum-border-color: #f2f1f1;
        --curriculum-border-color-hover: var(--text-inactive);
        --curriculum-bg-color-list-item-body: #fff;
        --curriculum-color-list-item-icon-topic-standards: #d30038;
        --curriculum-color-list-item-icon-topic-styling: #0069c2;
        --curriculum-color-list-item-icon-topic-scripting: #746a00;
        --curriculum-color-list-item-icon-topic-tooling: #007936;
        --curriculum-color-list-item-icon-topic-practices: #872bff;
        --curriculum-bg-color-list-item-icon-topic-standards: #fff;
        --curriculum-bg-color-list-item-icon-topic-styling: #fff;
        --curriculum-bg-color-list-item-icon-topic-scripting: #fff;
        --curriculum-bg-color-list-item-icon-topic-tooling: #fff;
        --curriculum-bg-color-list-item-icon-topic-practices: #fff;
        --curriculum-bg-color-list-item-topic-standards: #ff2a5130;
        --curriculum-bg-color-list-item-topic-styling: #0085f230;
        --curriculum-bg-color-list-item-topic-scripting: #93870030;
        --curriculum-bg-color-list-item-topic-tooling: #009a4630;
        --curriculum-bg-color-list-item-topic-practices: #9b65ff30;
        --curriculum-bg-color-partner: #fff;
        --curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
        --curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
        --curriculum-landing-about-beginner: url(/static/media/curriculum-landing-about-beginner.7e0e795029ffef7171e9.svg#light);
        --curriculum-landing-about-pace: url(/static/media/curriculum-landing-about-pace.cba550dca84e77e508e3.svg#light);
        --curriculum-landing-about-free: url(/static/media/curriculum-landing-about-free.72e91e2f7d6cd807f99a.svg#light);
        --curriculum-landing-about-bullet: url(/static/media/curriculum-landing-about-bullet.6ddad7f362afafb9f1d2.svg#light);
        --curriculum-landing-started-beginner: url(/static/media/curriculum-landing-started-beginner.98498a537d7bc0081455.svg#small-light);
        --curriculum-landing-started-advanced: url(/static/media/curriculum-landing-started-advanced.f1ff5aabbd25eb7c84b9.svg#small-light);
        --curriculum-landing-started-employment: url(/static/media/curriculum-landing-started-employment.6dfff83343aff136eed6.svg#small-light);
        --curriculum-landing-started-educator: url(/static/media/curriculum-landing-started-educator.2b1973dd359c46918e58.svg#small-light);
        --curriculum-module-mdn-resource: url(/static/media/curriculum-mdn-resource.1cf9ad8f86adfca49b67.svg#light);
        --curriculum-bullet: url(/static/media/curriculum-bullet.417fa50fd3559a7556d8.svg#light);
        --curriculum-about-covered: url(/static/media/curriculum-about-covered.6570f5157d434ba42984.svg#light);
        --curriculum-about-detail: url(/static/media/curriculum-about-detail.b708e21902f138eba9bf.svg#light);
        --curriculum-about-educators: url(/static/media/curriculum-about-educators.b29c7d71b39c1b0a0afe.svg#light);
        --curriculum-about-not: url(/static/media/curriculum-about-not.2ee2d9f300a73d1ebd6e.svg#light);
        --curriculum-about-students: url(/static/media/curriculum-about-students.2cd6ad2fcf4a6207f793.svg#light);
        --curriculum-bg-image-partner: url(/static/media/curriculum-partner-bg.b22eb19c53210709769d.svg#light);
        --curriculum-scrim-bg: url(/static/media/curriculum-scrim-bg.31bd527e5f6181a86b6f.svg#light);
        --curriculum-landing-arrow: url(/static/media/curriculum-landing-arrow.583d54721a2c1d371598.svg#light);
        color-scheme: light
    }
}

@media(prefers-color-scheme:light)and (min-width:769px) {
    :root:not(.light):not(.dark) {
        --curriculum-landing-started-beginner: url(/static/media/curriculum-landing-started-beginner.98498a537d7bc0081455.svg#light);
        --curriculum-landing-started-advanced: url(/static/media/curriculum-landing-started-advanced.f1ff5aabbd25eb7c84b9.svg#light);
        --curriculum-landing-started-employment: url(/static/media/curriculum-landing-started-employment.6dfff83343aff136eed6.svg#light);
        --curriculum-landing-started-educator: url(/static/media/curriculum-landing-started-educator.2b1973dd359c46918e58.svg#light)
    }
}

@media(prefers-color-scheme:dark) {
    :root:not(.light):not(.dark) {
        --text-primary: #fff;
        --text-secondary: #cdcdcd;
        --text-active: #858585;
        --text-inactive: #cdcdcda6;
        --text-link: #8cb4ff;
        --text-visited: #ffadff;
        --text-invert: #1b1b1b;
        --text-muted: #858585;
        --background-primary: #1b1b1b;
        --background-secondary: #313131;
        --background-tertiary: #858585;
        --background-toc-active: #343434;
        --background-mark-yellow: #c7b70066;
        --background-mark-green: #00d06166;
        --background-information: #0085f21a;
        --background-warning: #ff2a511a;
        --background-critical: #d300381a;
        --background-success: #0079361a;
        --background-del: #d3003880;
        --background-ins: #00793680;
        --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: #5e9eff1a;
        --accent-secondary: #5e9eff;
        --accent-tertiary: #0085f21a;
        --shadow-01: 0 1px 2px #fbfbfe33;
        --shadow-02: 0 1px 6px #fbfbfe33;
        --focus-01: 0 0 0 3px #fbfbfe80;
        --field-focus-border: #fff;
        --code-token-tag: #c1cff1;
        --code-token-punctuation: #b3b3b3;
        --code-token-attribute-name: #ff97a0;
        --code-token-attribute-value: #00d061;
        --code-token-comment: #b3b3b3;
        --code-token-default: #fff;
        --code-token-selector: #bea5ff;
        --code-background-inline: #343434;
        --code-background-block: #343434;
        --notecard-link-color: #e2e2e2;
        --scrollbar-bg: #0000;
        --scrollbar-color: #ffffff40;
        --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: #ff707fb3;
        --html-accent-engage: #ff707fb3;
        --css-accent-engage: #8cb4ffb3;
        --js-accent-engage: #afa100b3;
        --http-accent-engage: #00b755b3;
        --apis-accent-engage: #ae8affb3;
        --learn-accent-engage: #ff6d91b3;
        --modal-backdrop-color: #1b1b1bb3;
        --blend-color: #00080;
        --text-primary-red: #ff97a0;
        --text-primary-green: #00d061;
        --text-primary-blue: #8cb4ff;
        --text-primary-yellow: #c7b700;
        --collections-link: #ff97a0;
        --collections-header: #40000a;
        --collections-mandala: #9e0027;
        --collections-icon: #d30038;
        --updates-link: #8cb4ff;
        --updates-header: #000;
        --updates-mandala: #c1cff1;
        --updates-icon: #8cb4ff;
        --ai-help-link: #00d061;
        --ai-help-header: #000;
        --ai-help-mandala: #73e693;
        --ai-help-icon: #00d061;
        --ai-help-accent-background-color: #009a4630;
        --observatory-bg: #343434;
        --observatory-bg-code: #4d4d4d;
        --observatory-bg-secondary: #000;
        --observatory-color: #fff;
        --observatory-color-secondary: #f9f9fb;
        --observatory-inverse-color: #1b1b1b;
        --observatory-inverse-color-secondary: #696969;
        --observatory-accent: #a388ff;
        --observatory-accent-light: #a388ffaa;
        --observatory-border: #696969;
        --observatory-border-accent: #a388ff;
        --observatory-pass-icon-bg: #265c3d;
        --observatory-pass-icon-color: #8affa3;
        --observatory-fail-icon-bg: #5c2626;
        --observatory-fail-icon-color: #ff799b;
        --observatory-table-bg: #1b1b1b;
        --observatory-table-bg-alternate: #212121;
        --observatory-table-header-bg: #1b1b1b;
        --observatory-grade-a-bg: #265c3d;
        --observatory-grade-a-border: #89fca1;
        --observatory-grade-b-bg: #52662a;
        --observatory-grade-b-border: #d5fc88;
        --observatory-grade-c-bg: #66602a;
        --observatory-grade-c-border: #fcf988;
        --observatory-grade-d-bg: #5c3d26;
        --observatory-grade-d-border: #ff6a00;
        --observatory-grade-f-bg: #5c2626;
        --observatory-grade-f-border: #fc8888;
        --observatory-arrow-down-color: #ff707f;
        --observatory-arrow-up-color: #00ff6a;
        --form-limit-color: #9e9e9e;
        --form-limit-color-emphasis: #b3b3b3;
        --form-invalid-color: #ff97a0;
        --form-invalid-focus-color: #ff707f;
        --form-invalid-focus-effect-color: #ff707f33;
        --baseline-high-bg: #0e2a10;
        --baseline-high-engine-bg: #031b05;
        --baseline-high-img: url(/static/media/high-dark.b34312d314ead604bfbd.svg);
        --baseline-high-check: #099949;
        --baseline-low-bg: #041e49;
        --baseline-low-engine-bg: #020d20;
        --baseline-low-check: #1a73e8;
        --baseline-low-img: url(/static/media/low-dark.4ed53864ce1653e32eaa.svg);
        --baseline-low-pill-bg: #3367d6;
        --baseline-low-pill-color: #f1f3f4;
        --baseline-limited-bg: #282a2c;
        --baseline-limited-engine-bg: #1d1e1f;
        --baseline-limited-img: url(/static/media/limited-dark.407e5f7602b35f7d9bc8.svg);
        --baseline-limited-check: #1e8e3e;
        --baseline-limited-cross: #ea8600;
        --curriculum-color: #e3642a;
        --curriculum-color-topic-standards: #f2919c;
        --curriculum-color-topic-styling: #91a6f2;
        --curriculum-color-topic-scripting: #f2cf8f;
        --curriculum-color-topic-tooling: #8ff2a4;
        --curriculum-color-topic-practices: #c891f2;
        --curriculum-bg-color: #321d13;
        --curriculum-bg-color-note: #332c29;
        --curriculum-bg-large-color: #343434;
        --curriculum-bg-color-topic-standards: #994b53;
        --curriculum-bg-color-topic-styling: #4e609e;
        --curriculum-bg-color-topic-scripting: #7d683d;
        --curriculum-bg-color-topic-tooling: #3d7c4b;
        --curriculum-bg-color-topic-practices: #584280;
        --curriculum-bg-color-landing: #0e0b0a;
        --curriculum-bg-color-landing-about-ul: #000;
        --curriculum-bg-color-landing-top-icon: #321d13;
        --curriculum-bg-color-landing-stairway-floor: #895b33;
        --curriculum-category-color: #e3642a;
        --curriculum-bg-color-grey: #1f1c1a;
        --curriculum-bg-color-orange: #b25c35;
        --curriculum-color-landing-laptop: #b25c35;
        --curriculum-bg-color-list-item-body: #000;
        --curriculum-border-color: #4e4e4e;
        --curriculum-border-color-hover: var(--text-inactive);
        --curriculum-module-label-color: #e3642a;
        --curriculum-module-label-bg-color: #321d13;
        --curriculum-bg-color-list-item-topic-standards: #343434;
        --curriculum-bg-color-list-item-topic-styling: #343434;
        --curriculum-bg-color-list-item-topic-scripting: #343434;
        --curriculum-bg-color-list-item-topic-tooling: #343434;
        --curriculum-bg-color-list-item-topic-practices: #343434;
        --curriculum-color-list-item-icon-topic-standards: #f2919c;
        --curriculum-color-list-item-icon-topic-styling: #91a6f2;
        --curriculum-color-list-item-icon-topic-scripting: #f2cf8f;
        --curriculum-color-list-item-icon-topic-tooling: #8ff2a4;
        --curriculum-color-list-item-icon-topic-practices: #c891f2;
        --curriculum-bg-color-list-item-icon-topic-standards: #804248;
        --curriculum-bg-color-list-item-icon-topic-styling: #425080;
        --curriculum-bg-color-list-item-icon-topic-scripting: #806a42;
        --curriculum-bg-color-list-item-icon-topic-tooling: #428050;
        --curriculum-bg-color-list-item-icon-topic-practices: #584280;
        --curriculum-bg-color-partner: #1f1c1a;
        --curriculum-shadow: 2px 2px 5px 0 #24242426, -2px 2px 8px 0 #57575726;
        --curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
        --curriculum-landing-about-beginner: url(/static/media/curriculum-landing-about-beginner.7e0e795029ffef7171e9.svg#dark);
        --curriculum-landing-about-pace: url(/static/media/curriculum-landing-about-pace.cba550dca84e77e508e3.svg#dark);
        --curriculum-landing-about-free: url(/static/media/curriculum-landing-about-free.72e91e2f7d6cd807f99a.svg#dark);
        --curriculum-landing-about-bullet: url(/static/media/curriculum-landing-about-bullet.6ddad7f362afafb9f1d2.svg#dark);
        --curriculum-landing-started-beginner: url(/static/media/curriculum-landing-started-beginner.98498a537d7bc0081455.svg#small-dark);
        --curriculum-landing-started-advanced: url(/static/media/curriculum-landing-started-advanced.f1ff5aabbd25eb7c84b9.svg#small-dark);
        --curriculum-landing-started-employment: url(/static/media/curriculum-landing-started-employment.6dfff83343aff136eed6.svg#small-dark);
        --curriculum-landing-started-educator: url(/static/media/curriculum-landing-started-educator.2b1973dd359c46918e58.svg#small-dark);
        --curriculum-module-mdn-resource: url(/static/media/curriculum-mdn-resource.1cf9ad8f86adfca49b67.svg#dark);
        --curriculum-bullet: url(/static/media/curriculum-bullet.417fa50fd3559a7556d8.svg#dark);
        --curriculum-about-covered: url(/static/media/curriculum-about-covered.6570f5157d434ba42984.svg#dark);
        --curriculum-about-detail: url(/static/media/curriculum-about-detail.b708e21902f138eba9bf.svg#dark);
        --curriculum-about-educators: url(/static/media/curriculum-about-educators.b29c7d71b39c1b0a0afe.svg#dark);
        --curriculum-about-not: url(/static/media/curriculum-about-not.2ee2d9f300a73d1ebd6e.svg#dark);
        --curriculum-about-students: url(/static/media/curriculum-about-students.2cd6ad2fcf4a6207f793.svg#dark);
        --curriculum-bg-image-partner: url(/static/media/curriculum-partner-bg.b22eb19c53210709769d.svg#dark);
        --curriculum-scrim-bg: url(/static/media/curriculum-scrim-bg.31bd527e5f6181a86b6f.svg#dark);
        --curriculum-landing-arrow: url(/static/media/curriculum-landing-arrow.583d54721a2c1d371598.svg#dark);
        color-scheme: dark
    }
}

@media(prefers-color-scheme:dark)and (min-width:769px) {
    :root:not(.light):not(.dark) {
        --curriculum-landing-started-beginner: url(/static/media/curriculum-landing-started-beginner.98498a537d7bc0081455.svg#dark);
        --curriculum-landing-started-advanced: url(/static/media/curriculum-landing-started-advanced.f1ff5aabbd25eb7c84b9.svg#dark);
        --curriculum-landing-started-employment: url(/static/media/curriculum-landing-started-employment.6dfff83343aff136eed6.svg#dark);
        --curriculum-landing-started-educator: url(/static/media/curriculum-landing-started-educator.2b1973dd359c46918e58.svg#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(min-width:769px) {
    .main-wrapper {
        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;
        padding-top: unset
    }

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

@media(min-width:1200px) {
    .main-wrapper {
        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(--sticky-header-with-actions-height);
        display: block;
        grid-area: toc;
        height: fit-content;
        padding-bottom: 0
    }

    .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(/styles/Inter.var.c2fe3cb2b7c746f7966a.woff2) format("woff2 supports variations"), url(/styles/Inter.var.c2fe3cb2b7c746f7966a.woff2) format("woff2-variations")
}

.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: #0000
}

.main-page-content h1 a[href^="#"]:before,
.main-page-content h2 a[href^="#"]:before,
.main-page-content h3 a[href^="#"]:before,
.main-page-content h4 a[href^="#"]:before,
.main-page-content h5 a[href^="#"]:before,
.main-page-content h6 a[href^="#"]:before {
    color: var(--text-inactive);
    content: "#";
    display: inline-block;
    font-size: .7em;
    line-height: 1;
    margin-left: -.8em;
    text-decoration: none;
    visibility: hidden;
    width: .8em
}

.main-page-content h1 a[href^="#"]:hover:before,
.main-page-content h2 a[href^="#"]:hover:before,
.main-page-content h3 a[href^="#"]:hover:before,
.main-page-content h4 a[href^="#"]:hover:before,
.main-page-content h5 a[href^="#"]:hover:before,
.main-page-content h6 a[href^="#"]:hover:before {
    visibility: visible
}

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

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

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

.main-page-content a:not(.button):visited:not([href^="#"]) {
    color: var(--text-visited)
}

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

.main-page-content a:not(.button):active code,
.main-page-content a:not(.button):active:visited code {
    background-color: #0000;
    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);
    box-sizing: initial;
    color: #1b1b1b;
    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 dt a[href^="#"] {
    color: inherit;
    position: relative;
    text-decoration: none
}

.main-page-content dl dt a[href^="#"]:focus,
.main-page-content dl dt a[href^="#"]:hover {
    text-decoration: underline
}

.main-page-content dl dt a[href^="#"]:before {
    color: var(--text-inactive);
    content: "#";
    display: inline-flex;
    font-size: .7em;
    line-height: 1;
    margin-left: -.8em;
    text-decoration: none;
    top: .5em;
    visibility: hidden;
    width: .8em
}

.main-page-content dl dt a[href^="#"]:hover:before {
    visibility: visible
}

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

.main-page-content dl dd dl {
    border-left: 1px solid var(--border-primary);
    padding-left: 1rem
}

.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 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
}

.main-page-content .section-content blockquote>:last-child {
    margin-bottom: 0
}

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

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

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

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

table th {
    background: var(--background-primary);
    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);
    box-sizing: initial;
    padding: 1rem;
    width: calc(100% - 2rem - 2px)
}

h1,
h2,
h3 {
    letter-spacing: var(--heading-letter-spacing)
}

h1 {
    font: var(--type-heading-h1);
    margin-bottom: 2rem;
    word-break: break-word
}

@media(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-family: var(--font-code);
    font-size: var(--type-smaller-font-size);
    tab-size: 4
}

code {
    background: var(--code-background-inline);
    padding: .125rem .25rem;
    width: fit-content
}

pre {
    background-color: var(--code-background-block);
    border: 1px solid #0000;
    margin: 1rem 0 2rem;
    padding: 1rem
}

pre code {
    background: none;
    color: var(--text-primary);
    padding: 0
}

math[display=block] {
    margin: 1rem 0 2rem
}

.example-bad,
.example-good {
    position: relative
}

.example-bad:before,
.example-good:before {
    background-size: 24px;
    content: "";
    margin: 0.5rem !important;
    float: right;
    height: 16px;
    margin-left: 8px;
    width: 16px
}

.example-bad+.copy-icon,
.example-good+.copy-icon {
    display: none
}

.example-bad {
    background-color: var(--background-critical)
}

.example-bad:before {
    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:before {
    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(min-width:1200px) {
    .index ul {
        column-count: 3
    }
}

.index ul li {
    break-inside: avoid-column;
    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-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 {
    --code-action-color: var(--text-secondary);
    margin-bottom: 2rem;
    position: relative
}

.code-example .example-header {
    align-items: baseline;
    background-color: var(--background-secondary);
    border-bottom: 1px solid var(--border-secondary);
    border-top-left-radius: var(--elem-radius);
    border-top-right-radius: var(--elem-radius);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    padding: .1rem 1rem
}

.code-example .example-header.active {
    background-color: var(--background-toc-active)
}

.code-example .example-header~iframe,
.code-example .example-header~pre {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0
}

.code-example .example-header~iframe:not(:last-child),
.code-example .example-header~pre:not(:last-child) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0
}

.code-example .example-header .ai-explain-info-toggle {
    --icon-size: 12px;
    background-color: var(--icon-secondary);
    cursor: pointer;
    -webkit-mask-size: contain;
    mask-size: contain
}

.code-example .example-header .ai-explain-info-toggle:focus,
.code-example .example-header .ai-explain-info-toggle:hover {
    background-color: var(--icon-information)
}

.code-example .example-header .ai-explain-info {
    background: var(--background-information);
    font-size: smaller;
    margin-bottom: .5rem;
    order: 23;
    padding: .5rem;
    width: 100%
}

.code-example .example-header .language-name {
    margin-right: auto;
    text-transform: uppercase
}

.code-example .ai-explain-answer {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-primary);
    font: var(--type-article-p)
}

.code-example .ai-explain-answer~.ai-explain-answer {
    border-top: none
}

.code-example .ai-explain-answer>.ai-explain-header {
    background-color: var(--background-primary);
    border-bottom: 1px solid var(--border-secondary);
    margin: 0;
    padding-top: 1rem;
    width: 100%
}

.code-example .ai-explain-answer>.ai-explain-header>span {
    padding: .25rem 1rem
}

.code-example .ai-explain-answer>.ai-explain-header>pre {
    background-color: var(--background-primary);
    margin: 0;
    padding: .25rem 1rem
}

.code-example .ai-explain-answer>div>p {
    margin: 0;
    padding: .5rem 1rem
}

.code-example .ai-explain-answer .ai-explain-feedback {
    align-items: center;
    display: flex;
    flex-direction: row;
    font-size: smaller;
    gap: .5rem;
    justify-content: flex-end;
    padding: .5rem
}

.code-example .ai-explain-answer .ai-explain-feedback button {
    cursor: pointer
}

.code-example .ai-explain-answer .ai-explain-feedback button.icon-thumbs-up:focus,
.code-example .ai-explain-answer .ai-explain-feedback button.icon-thumbs-up:hover {
    background-color: var(--icon-success)
}

.code-example .ai-explain-answer .ai-explain-feedback button.icon-thumbs-down:focus,
.code-example .ai-explain-answer .ai-explain-feedback button.icon-thumbs-down:hover {
    background-color: var(--icon-critical)
}

.code-example .ai-explain-button,
.code-example .play-button {
    color: var(--code-action-color);
    cursor: pointer;
    margin: 0;
    text-transform: capitalize
}

.code-example .ai-explain-button:focus,
.code-example .ai-explain-button:hover,
.code-example .play-button:focus,
.code-example .play-button:hover {
    opacity: .6
}

.code-example .ai-explain-button:first-child,
.code-example .play-button:first-child {
    margin-left: auto
}

.code-example .playlist {
    align-items: center;
    display: flex;
    gap: .5rem
}

.code-example .playlist>label {
    color: var(--code-action-color);
    cursor: pointer;
    padding: 1px;
    text-transform: capitalize
}

.code-example .playlist>label:focus,
.code-example .playlist>label:hover {
    opacity: .6
}

.code-example .playlist>input {
    height: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    width: 0
}

.code-example .playlist>input~label:before {
    background-color: var(--code-action-color);
    content: "";
    display: inline-block;
    height: 1rem;
    margin-right: 4px;
    -webkit-mask-image: url(/static/media/queue.dfe43f8d814aab275f6d.svg);
    mask-image: url(/static/media/queue.dfe43f8d814aab275f6d.svg);
    -webkit-mask-size: cover;
    mask-size: cover;
    vertical-align: middle;
    width: 1rem
}

.code-example .playlist>input:focus~label {
    opacity: 1
}

.code-example .playlist>input:focus-visible~label {
    opacity: 1;
    outline-color: var(--accent-primary);
    outline-offset: 1px;
    outline-style: auto
}

.code-example .playlist>input:checked~label {
    color: var(--category-color);
    opacity: 1
}

.code-example .playlist>input:checked~label:before {
    background-color: var(--category-color);
    -webkit-mask-image: url(/static/media/queued.00676c98baccdc4d581c.svg);
    mask-image: url(/static/media/queued.00676c98baccdc4d581c.svg)
}

.code-example .ai-explain-button.ai-explain-highlight {
    animation: ai-explain-highlight-frames 1s ease-in 1
}

.code-example .play-button:before {
    content: "";
    display: inline-block;
    margin-right: 4px;
    -webkit-mask-image: url(/static/media/play.58df7f218e19b3192014.svg);
    mask-image: url(/static/media/play.58df7f218e19b3192014.svg);
    vertical-align: middle
}

.code-example .copy-icon,
.code-example .play-button:before {
    background-color: var(--code-action-color);
    height: 1rem;
    -webkit-mask-size: cover;
    mask-size: cover;
    width: 1rem
}

.code-example .copy-icon {
    align-self: center;
    cursor: pointer;
    margin-top: -.1rem;
    -webkit-mask-image: url(/static/media/clippy.92fffda9d37d9c3a3b37.svg);
    mask-image: url(/static/media/clippy.92fffda9d37d9c3a3b37.svg);
    padding: 0
}

.code-example .copy-icon:focus,
.code-example .copy-icon:hover {
    opacity: .6
}

.code-example .copy-icon:first-child {
    margin-left: auto
}

.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: 2rem
}

.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]),
a.page-not-created:visited {
    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
}

.loading-error pre {
    overflow-y: scroll;
    white-space: pre
}

.sidebar-container {
    --offset: var(--sticky-header-with-actions-height);
    --max-height: calc(100vh - var(--offset));
    max-height: var(--max-height);
    position: sticky;
    top: var(--offset);
    z-index: var(--z-index-sidebar-mobile)
}

@media(min-width:769px)and (min-height:44rem) {
    .sidebar-container {
        display: flex;
        flex-direction: column
    }
}

@media(min-width:769px) {
    .sidebar-container {
        z-index: auto
    }

    .sidebar-container .sidebar {
        -webkit-mask-image: linear-gradient(180deg, #000 0 calc(100% - 3rem), #0000);
        mask-image: linear-gradient(180deg, #000 0 calc(100% - 3rem), #0000)
    }
}

@media(min-width:769px)and (not (min-height:44rem)) {
    .sidebar-container {
        overflow: auto
    }
}

.sidebar-container .toc-container .place,
.sidebar-container.toc-container .place {
    grid-area: toc;
    margin: 0
}

@media(min-width:1200px) {

    .sidebar-container .toc-container,
    .sidebar-container.toc-container {
        display: flex;
        flex-direction: column;
        gap: 0;
        height: calc(100vh - var(--offset));
        -webkit-mask-image: linear-gradient(180deg, #0000 0, #000 3rem calc(100% - 3rem), #0000);
        mask-image: linear-gradient(180deg, #0000 0, #000 3rem calc(100% - 3rem), #0000);
        overflow: auto;
        position: sticky;
        top: var(--offset)
    }

    .sidebar-container .toc-container .place,
    .sidebar-container.toc-container .place {
        margin: 1rem 0;
        padding-bottom: 3rem
    }
}

@media(max-width:768px) {

    .sidebar-container .toc-container .place,
    .sidebar-container.toc-container .place {
        display: none
    }
}

@media(min-width:1200px) {
    .sidebar-container {
        display: contents
    }

    .sidebar-container .sidebar {
        -webkit-mask-image: none;
        mask-image: none
    }
}

@keyframes ai-explain-highlight-frames {
    0% {
        color: var(--text-primary);
        opacity: .4
    }

    50% {
        color: var(--category-color);
        opacity: 1
    }

    to {
        color: var(--text-primary);
        opacity: .4
    }
}

html a.only-in-en-us:after {
    content: "(en-US)";
    display: inline-block;
    font-size: var(--type-tiny-font-size);
    vertical-align: super
}

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

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

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

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

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

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

html[lang=zh-CN] a.only-in-en-us:after {
    content: "（英语）";
    vertical-align: initial
}

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

.interactive {
    background-color: var(--background-secondary);
    border: none;
    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(min-width:1008px), (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 {
    --margin-vertical: 0.75rem;
    background-color: #e6deff;
    border-radius: .5rem;
    color: #1b1b1b;
    padding: 1rem
}

.document-survey:before {
    background: #0000 url(/static/media/survey.54a7f4e55430b287227c.svg) 50% no-repeat;
    background-size: cover;
    content: "";
    display: inline-block;
    height: 49px;
    position: absolute;
    width: 53px
}

.document-survey iframe {
    border: 0;
    border-radius: .5rem
}

.document-survey button[type=button],
.document-survey summary {
    cursor: pointer
}

.document-survey details iframe,
.document-survey summary {
    margin-top: var(--margin-vertical)
}

.document-survey summary {
    color: #6800cf;
    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 summary,
.document-survey .survey-footer,
.document-survey .survey-header {
    margin-left: 4rem
}

.document-survey .survey-footer {
    font-size: var(--type-smaller-font-size);
    font-style: italic;
    font-variation-settings: "slnt" -10;
    margin-top: var(--margin-vertical)
}

.document-survey .survey-dismiss {
    margin-top: -2px
}

.document-survey .survey-dismiss .icon {
    background-color: dimgray
}

.document-survey .survey-dismiss .icon:hover {
    background-color: #1b1b1b
}

.baseline-indicator {
    --baseline-bg: var(--baseline-limited-bg);
    --baseline-engine-bg: var(--baseline-limited-engine-bg);
    --baseline-img: var(--baseline-limited-img);
    --baseline-check: var(--baseline-limited-check);
    --baseline-cross: var(--baseline-limited-cross);
    --feedback-link-icon: var(--icon-primary);
    background: var(--baseline-bg);
    border-radius: .25rem;
    margin: 1rem 0;
    padding-left: 3.8125rem
}

.baseline-indicator.high {
    --baseline-bg: var(--baseline-high-bg);
    --baseline-engine-bg: var(--baseline-high-engine-bg);
    --baseline-img: var(--baseline-high-img);
    --baseline-check: var(--baseline-high-check)
}

.baseline-indicator.low {
    --baseline-bg: var(--baseline-low-bg);
    --baseline-engine-bg: var(--baseline-low-engine-bg);
    --baseline-img: var(--baseline-low-img);
    --baseline-check: var(--baseline-low-check);
    --baseline-pill-bg: var(--baseline-low-pill-bg);
    --baseline-pill-color: var(--baseline-low-pill-color)
}

.baseline-indicator[open] summary .icon-chevron {
    transform: rotate(180deg)
}

.baseline-indicator summary {
    --chevron-size: 0.6875rem;
    --chevron-padding-left: 0.75rem;
    --chevron-padding-right: 1.25rem;
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
    padding: 1rem 0;
    padding-right: calc(var(--chevron-padding-left) + var(--chevron-size) + var(--chevron-padding-right));
    position: relative
}

.baseline-indicator summary::-webkit-details-marker {
    display: none
}

.baseline-indicator summary .indicator {
    --width: 2.3125rem;
    background-image: var(--baseline-img);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 2.25rem;
    left: calc(-.5rem - var(--width));
    position: absolute;
    top: 1rem;
    width: var(--width)
}

.baseline-indicator summary h2 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.5;
    margin: 0;
    padding: .375rem 0
}

.baseline-indicator summary h2 .not-bold {
    font-weight: 400
}

.baseline-indicator summary .pill {
    background: var(--baseline-pill-bg);
    border-radius: .125rem;
    color: var(--baseline-pill-color);
    font-size: .75rem;
    font-weight: 600;
    margin-right: auto;
    padding: 0 .25rem;
    text-transform: uppercase
}

.baseline-indicator summary .browsers {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.baseline-indicator summary .browsers .engine {
    background: var(--baseline-engine-bg);
    border-radius: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem .625rem
}

.baseline-indicator summary .browsers .engine .browser {
    display: flex
}

.baseline-indicator summary .browsers .engine .browser:before {
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 1.25rem;
    width: 1.25rem
}

.baseline-indicator summary .browsers .engine .browser.chrome:before {
    background-image: url(/static/media/chrome.5e791c51c323fbb93c31.svg)
}

.baseline-indicator summary .browsers .engine .browser.edge:before {
    background-image: url(/static/media/edge.741dffaf92fcae238b84.svg)
}

.baseline-indicator summary .browsers .engine .browser.firefox:before {
    background-image: url(/static/media/firefox.1eabb4da07c095ca04fa.svg)
}

.baseline-indicator summary .browsers .engine .browser.safari:before {
    background-image: url(/static/media/safari.2532e793299f00dcf5e2.svg)
}

.baseline-indicator summary .browsers .engine .browser:after {
    background-color: var(--baseline-cross);
    content: "";
    display: block;
    height: 1.25rem;
    -webkit-mask-image: url(/static/media/browser-cross.4952f9cf19b873718764.svg);
    mask-image: url(/static/media/browser-cross.4952f9cf19b873718764.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 1rem
}

.baseline-indicator summary .browsers .engine .browser.supported:after {
    background-color: var(--baseline-check);
    -webkit-mask-image: url(/static/media/browser-check.d960a1037f7d1ffb1eec.svg);
    mask-image: url(/static/media/browser-check.d960a1037f7d1ffb1eec.svg)
}

.baseline-indicator summary .icon-chevron {
    --icon-size: var(--chevron-size);
    --icon-primary: var(--text-primary);
    position: absolute;
    right: var(--chevron-padding-right)
}

.baseline-indicator .extra {
    padding-bottom: 1.5rem;
    padding-right: 1rem
}

.baseline-indicator .extra p {
    margin-bottom: 1rem;
    margin-top: 0
}

.baseline-indicator .extra ul {
    column-gap: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    row-gap: 1rem
}

.baseline-indicator .extra ul li {
    font-weight: 500;
    list-style: none;
    margin: 0
}

.baseline-indicator .extra ul li a.learn-more,
.baseline-indicator .extra ul li a.learn-more:active,
.baseline-indicator .extra ul li a.learn-more:visited {
    background: none;
    color: var(--text-link)
}

.baseline-indicator .extra ul li a:not(.learn-more),
.baseline-indicator .extra ul li a:not(.learn-more):active,
.baseline-indicator .extra ul li a:not(.learn-more):visited {
    background: none;
    color: var(--text-primary)
}

.play-queue-container {
    position: fixed;
    right: 0;
    top: 50vh;
    transform: translateY(-50%);
    z-index: var(--z-index-modal-content)
}

.play-queue-container details {
    align-items: center;
    background: var(--background-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 1rem 0 0 1rem;
    display: flex;
    filter: drop-shadow(var(--shadow-02));
    justify-content: center;
    padding: .5rem 0;
    width: fit-content
}

.play-queue-container details>summary {
    align-items: center;
    color: var(--category-color);
    cursor: pointer;
    display: flex;
    padding: 0 1rem;
    width: 100%
}

.play-queue-container details>summary::-webkit-details-marker,
.play-queue-container details>summary::marker {
    display: none
}

.play-queue-container details>summary>div {
    display: inline-block;
    font-weight: 700;
    width: 100%
}

.play-queue-container details>summary>.button.action {
    --button-color: var(--category-color)
}

.play-queue-container details[open] {
    min-width: 12rem
}

.play-queue-container details[open]>summary {
    border-bottom: 1px solid var(--border-primary);
    padding: 0 1.5rem .5rem
}

.play-queue-container details[open]>summary:after {
    content: "▼";
    font-size: .75rem;
    margin-left: .5rem
}

.play-queue-container details:not([open]) {
    background-color: var(--category-color);
    width: min-content
}

.play-queue-container details:not([open])>summary {
    color: var(--background-primary);
    font-size: 0;
    width: fit-content
}

.play-queue-container details:not([open])>summary:after {
    content: "◀";
    font-size: .75rem;
    margin-left: .5rem
}

.play-queue-container details:not([open])>summary>div {
    width: 1rem
}

.play-queue-container details:not([open])>summary>div:first-letter {
    font-size: 1rem
}

.play-queue-container details:not([open])>summary .button {
    display: none
}

.play-queue-container button {
    cursor: pointer
}

.play-queue-container button.play-button {
    align-self: center;
    margin-bottom: .5rem;
    width: fit-content
}

.play-queue-container .play-queue-inner {
    display: flex;
    flex-direction: column
}

.play-queue-container .play-queue-inner>ul {
    margin: 0 0 .5rem;
    max-height: 50vh;
    overflow: auto;
    width: 100%
}

.play-queue-container .play-queue-inner>ul>li {
    align-items: center;
    color: var(--text-primary);
    display: flex;
    padding: .25rem 1rem;
    width: 100%
}

.play-queue-container .play-queue-inner>ul>li:active,
.play-queue-container .play-queue-inner>ul>li:hover {
    background-color: var(--background-toc-active)
}

.play-queue-container .play-queue-inner>ul>li .queue-ref {
    color: var(--text-primary);
    font-size: var(--type-smaller-font-size);
    padding: 0 .5rem
}

.play-queue-container .play-queue-inner>ul>li .queue-ref:active,
.play-queue-container .play-queue-inner>ul>li .queue-ref:hover {
    color: var(--text-link);
    text-decoration: underline
}

.play-queue-container .play-queue-inner>ul>li>code {
    background-color: #0000;
    justify-self: center;
    margin: 0 auto;
    min-width: 6rem;
    text-align: center;
    text-transform: uppercase
}

.a11y-nav {
    position: absolute;
    top: -20em;
    width: 100%;
    z-index: var(--z-index-a11y)
}

.a11y-nav a {
    background-color: #ffffffe6;
    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 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    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)
}

@media(min-width:426px) {
    .page-footer-grid {
        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(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(min-width:1441px) {
    .page-footer-grid {
        gap: 2.5rem
    }
}

.query-string {
    font-style: italic;
    font-variation-settings: "slnt" -10
}

.site-search {
    display: block
}

@media(max-width:769px) {
    .site-search article {
        display: flex;
        flex-direction: column
    }
}

.site-search article .place {
    float: right;
    padding: 1rem
}

@media(max-width:769px) {
    .site-search article .place {
        align-self: center;
        float: none;
        order: 4
    }
}

article.settings {
    display: block;
    margin: auto;
    max-width: 60em;
    padding: 1rem;
    width: min(90vw, 40em)
}

article.settings h3 {
    margin-top: 0
}

article.settings section {
    padding: 1rem
}

article.settings .field-group ul,
article.settings section.field-group,
article.settings section.setting-row {
    padding: 0
}

article.settings .field-group ul li {
    display: grid;
    gap: 0 1rem;
    grid-template-columns: 1fr 5em
}

article.settings .field-group ul li section {
    margin: .125rem 0
}

article.settings .field-group ul li section:hover,
article.settings .field-group ul li section:target {
    background-color: var(--background-information);
    border-radius: .25rem
}

article.settings .field-group ul li .setting-row {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between
}

article.settings .field-group ul li p {
    margin: 0 0 1rem
}

article.settings .field-group ul li p:first-child {
    margin-top: 0
}

article.settings .field-group ul li p:last-child {
    margin-bottom: 0
}

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;
    background-color: var(--background-primary);
    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: max-content;
    justify-self: end;
    min-width: 10rem;
    padding: .5rem 1rem;
    text-align: center;
    width: max-content
}

article.settings .field-group ul li .manage:hover,
article.settings .field-group ul li button:hover {
    background-color: var(--background-secondary)
}

article.settings .field-group ul li button[disabled] {
    background-color: var(--background-secondary);
    border: 1px solid var(--text-secondary);
    color: var(--text-secondary)
}

.spinner {
    display: inline-block;
    height: 1rem;
    position: relative;
    width: 1rem
}

.spinner div {
    animation: spinner 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
    border: .1rem solid var(--text-primary);
    border-color: var(--text-primary) #0000 #0000 #0000;
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    height: .8rem;
    margin: .1rem;
    position: absolute;
    width: .8rem
}

.spinner div:first-child {
    animation-delay: -.45s
}

.spinner div:nth-child(2) {
    animation-delay: -.3s
}

.spinner div:nth-child(3) {
    animation-delay: -.15s
}

@keyframes spinner {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.switch {
    align-items: center;
    display: inline-flex;
    position: relative
}

.switch input {
    height: 0;
    margin: 0;
    opacity: 0;
    width: 3rem
}

.switch input:checked+.slider {
    background-color: var(--text-link)
}

.switch input:checked+.slider:before {
    left: 53.25%;
    right: 3.25%
}

.switch input:focus-visible+.slider {
    outline-color: var(--accent-primary);
    outline-offset: 1px;
    outline-style: auto
}

.switch .slider {
    background-color: var(--text-secondary);
    border-radius: 1.5em;
    cursor: pointer;
    height: 1.5rem;
    position: absolute;
    transition: .4s;
    width: 3rem
}

.switch .slider:before {
    background-color: var(--background-primary);
    border-radius: 50%;
    bottom: 7.5%;
    content: "";
    left: 3.25%;
    position: absolute;
    right: 53.25%;
    top: 7.5%;
    transition: .4s
}

.switch .label {
    margin-left: .5rem
}

.plus .article-actions-container {
    display: flex
}

.plus .main-page-content em {
    font-style: normal;
    font-variation-settings: normal;
    text-decoration: underline;
    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(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;
    font-variation-settings: "slnt" -10
}

.plus .main-page-content img {
    margin: 2rem 0
}

.plus-header-mandala {
    --plus-header: var(--collections-header);
    --plus-mandala: var(--collections-mandala);
    --plus-icon: var(--collections-icon);
    --plus-link: var(--collections-link);
    background: var(--plus-header);
    overflow: hidden;
    padding: 1.25rem 0
}

.plus-header-mandala .container,
.plus-header-mandala .container>* {
    position: relative
}

.plus-header-mandala .container .mandala-icon-wrapper {
    display: inline-block;
    margin-right: .5rem;
    position: relative;
    top: -.2rem
}

@media(min-width:992px) {
    .plus-header-mandala .container .mandala-icon-wrapper {
        position: absolute;
        right: 10rem;
        top: 50%;
        transform: translateY(-50%)
    }
}

.plus-header-mandala .container .mandala-icon-wrapper .mandala-container {
    --mandala-primary: var(--plus-mandala);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -49.4%)
}

.plus-header-mandala .container .mandala-icon-wrapper .icon {
    background: var(--plus-icon);
    height: 2rem;
    width: 2rem
}

.plus-header-mandala .container h1 {
    font-size: 2rem;
    margin: 0;
    position: static
}

.plus-header-mandala .container h1 span {
    position: relative
}

.plus-header-mandala .container p {
    margin: 1rem 0
}

.plus-header-mandala .container p:last-child {
    margin-bottom: 0
}

.plus-header-mandala .container h1 span,
.plus-header-mandala .container p {
    text-shadow: 2px 2px 3px var(--plus-header), 2px -2px 3px var(--plus-header), -2px -2px 3px var(--plus-header), -2px 2px 3px var(--plus-header)
}

.plus-header-mandala .container a {
    color: var(--plus-link);
    text-decoration: underline
}

.plus-header-mandala .container .button-wrap {
    font-size: .875rem;
    font-weight: 700
}

@media(min-width:769px) {

    .ai-help .container,
    .collections .container,
    .updates .container {
        max-width: 43rem
    }
}

@media(min-width:992px) {

    .ai-help .container,
    .collections .container,
    .updates .container {
        max-width: 52rem
    }
}

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

.offer-hero .offer-hero-header {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: row;
    grid-column: 1;
    grid-row: 1;
    margin: 0 auto;
    max-width: 52rem;
    padding: 1rem;
    transition: all .3s ease-in-out;
    width: auto
}

.offer-hero .offer-hero-header .offer-hero-wrapper {
    align-self: start;
    z-index: 1
}

.offer-hero .offer-hero-header .offer-hero-wrapper h1 {
    font-size: 3rem;
    margin-top: 1rem
}

.offer-hero .offer-hero-header .offer-hero-wrapper h1 span {
    display: block
}

.offer-hero .offer-hero-header .offer-hero-wrapper h1 span:first-child {
    margin-bottom: .5rem
}

.offer-hero .offer-hero-header .offer-hero-wrapper h2 {
    font: var(--type-heading-h3);
    width: 100%
}

.offer-hero .offer-hero-header .offer-hero-wrapper .button-wrapper {
    display: flex;
    gap: 1rem;
    width: 100%
}

.offer-hero .offer-hero-header .offer-hero-wrapper .button-wrapper a {
    border-radius: var(--elem-radius);
    font-size: 14px;
    font-weight: 600;
    line-height: 175%;
    padding: .5rem;
    position: relative;
    text-align: center;
    transition: all .2s ease;
    width: 140px;
    width: 100%;
    z-index: 1
}

.offer-hero .offer-hero-header .offer-hero-wrapper .button-wrapper .button-primary {
    background-color: var(--text-primary);
    border: 2px solid var(--text-primary);
    color: var(--text-invert)
}

.offer-hero .offer-hero-header .offer-hero-wrapper .button-wrapper .button-primary:hover {
    background-color: var(--text-secondary);
    border-color: var(--text-secondary)
}

.offer-hero .offer-hero-header .offer-hero-wrapper .button-wrapper .button-secondary {
    background: rgba(21, 20, 26, .102);
    border: 2px solid var(--button-secondary-border-red);
    color: #fff
}

.offer-hero .offer-hero-header .offer-hero-wrapper .button-wrapper .button-secondary:hover {
    border: 2px solid var(--button-secondary-border-red-focus)
}

.offer-hero .mandala-wrapper {
    --mandala-primary: var(--border-primary);
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
    top: 0;
    transition: all 1s ease-in-out;
    width: 100%
}

.offer-hero .mandala-wrapper .mandala-translate {
    transform: translate(10rem, -8rem) scale(1.2)
}

@media(min-width:426px) {
    .offer-hero .mandala-wrapper .mandala-translate {
        transform: translate(12rem, -8rem)
    }
}

.offer-overview-feature {
    background-color: var(--background-primary);
    color: var(--text-primary);
    min-height: 25rem;
    width: 100%
}

.offer-overview-feature .wrapper {
    align-items: center;
    display: flex;
    flex-direction: column-reverse;
    gap: 4rem;
    height: 100%;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 64rem;
    padding: 4rem 1rem;
    width: 100%
}

@media(min-width:1200px) {
    .offer-overview-feature .wrapper {
        flex-direction: row
    }
}

.offer-overview-feature .wrapper .copy-container,
.offer-overview-feature .wrapper .img-container {
    display: flex;
    flex-direction: column;
    width: 100%
}

.offer-overview-feature .wrapper .img-container {
    align-items: center;
    border-radius: 1rem;
    box-shadow: 0 3px 22px rgba(43, 42, 51, .102);
    height: 100%;
    max-width: 25rem
}

@media(min-width:1200px) {
    .offer-overview-feature .wrapper .img-container {
        max-width: min(50%, 20rem)
    }
}

.offer-overview-feature .wrapper .copy-container {
    align-items: center;
    max-width: 40rem;
    text-align: center
}

.offer-overview-feature .wrapper .copy-container a {
    justify-content: start
}

.offer-overview-feature .wrapper .copy-container h2 {
    color: var(--plus-accent-color);
    font: 700 12px/120% Inter;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
    margin-top: 0;
    text-transform: uppercase
}

.offer-overview-feature .wrapper .copy-container h3 {
    font-size: 1.75rem;
    font-weight: 400;
    margin-top: 0
}

@media(min-width:1200px) {
    .offer-overview-feature .wrapper .copy-container {
        align-items: normal;
        height: 100%;
        max-width: 50%;
        text-align: initial
    }
}

.offer-overview-feature:nth-child(2n) .wrapper {
    flex-direction: column
}

@media(min-width:1200px) {
    .offer-overview-feature:nth-child(2n) .wrapper {
        flex-direction: row
    }
}

.offer-overview-feature:nth-child(odd) {
    background: var(--background-secondary)
}

.offer-overview-feature:nth-child(odd) .wrapper {
    flex-direction: column
}

@media(min-width:1200px) {
    .offer-overview-feature:nth-child(odd) .wrapper {
        flex-direction: row-reverse
    }
}

.plus-subscribe-wrapper {
    background: var(--background-primary)
}

.plus-subscribe-wrapper .subscribe {
    margin: 0 auto;
    padding: 2rem 1rem;
    text-align: center
}

@media(min-width:769px) {
    .plus-subscribe-wrapper .subscribe {
        padding: 2rem 4rem
    }
}

.plus-subscribe-wrapper .subscribe h2 {
    font-size: 24px;
    font-style: normal;
    font-variation-settings: normal;
    font-weight: 650;
    line-height: 120%
}

.plus-subscribe-wrapper .subscribe .switch,
.plus-subscribe-wrapper .subscribe h2 {
    color: var(--text-primary);
    margin-bottom: 2rem
}

.plus-subscribe-wrapper .subscribe .wrapper,
.plus-subscribe-wrapper .subscribe .wrapper-offline {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    margin: 0 auto
}

.plus-subscribe-wrapper .subscribe .wrapper .wrapper-offline,
.plus-subscribe-wrapper .subscribe .wrapper-offline .wrapper-offline {
    display: none
}

@media(min-width:66rem) {

    .plus-subscribe-wrapper .subscribe .wrapper,
    .plus-subscribe-wrapper .subscribe .wrapper-offline {
        align-items: stretch;
        flex-direction: row
    }
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail {
    align-items: center;
    background-color: var(--text-secondary);
    border-radius: 1rem;
    color: var(--text-invert);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 20rem;
    min-width: 16rem;
    width: 100%
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail#plus5,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail#plus5 {
    background-color: var(--text-primary-blue)
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail#plus10,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail#plus10 {
    background-color: var(--text-primary-red)
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail#core,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail#core {
    background-color: var(--text-primary-green)
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail h3,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail h3 {
    background: #00000080;
    border-radius: 1rem 1rem 0 0;
    color: var(--text-primary);
    font-size: 1em;
    margin: 0;
    padding: .5rem;
    width: 100%
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
    margin-top: 1rem;
    padding: 0 2rem 2rem;
    width: 100%
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info h3,
.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info p,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info h3,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info p {
    margin: 0
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info .price,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info .price {
    align-content: center;
    column-gap: .5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 3rem
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info .price .sub-price,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info .price .sub-price {
    font-size: 36px;
    font-style: normal;
    font-variation-settings: normal;
    font-weight: 650;
    grid-column: 1/2;
    justify-self: right;
    line-height: 120%
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info .price .free,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info .price .free {
    grid-column: 1/3;
    justify-self: center
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info .price .sub-length,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info .price .sub-length {
    font-size: .8rem;
    font-style: normal;
    font-variation-settings: normal;
    grid-column: 2/3;
    justify-self: left;
    line-height: 120%;
    margin: auto 0;
    text-align: left
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info .includes,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info .includes {
    align-self: flex-start
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info ul,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info ul {
    align-self: flex-start;
    list-style-type: "✔ ";
    margin-left: 1rem;
    width: 100%
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info ul li,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info ul li {
    line-height: 1.75;
    padding-left: .5rem;
    text-align: left;
    width: 100%
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info ul li a,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info ul li a {
    color: var(--text-invert);
    text-decoration: underline;
    width: fit-content
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info ul li a:hover,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info ul li a:hover {
    text-decoration: none
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info ul li sup.new,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info ul li sup.new {
    --new-background: var(--mdn-color-background-highlight);
    --new-color: inherit;
    margin-left: .25rem
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info .sub-link,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info .sub-link {
    align-items: center;
    align-self: center;
    background: #1b1b1b;
    border-radius: 1rem;
    color: var(--text-primary);
    display: flex;
    font-weight: 620;
    height: 2rem;
    justify-content: center;
    min-width: fit-content;
    padding: .25rem .5rem;
    width: calc(100% - 1rem)
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info .terms,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info .terms {
    color: var(--text-invert);
    font-size: 14px;
    font-style: italic;
    font-variation-settings: "slnt" -10;
    margin-top: auto;
    text-decoration: underline
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info .terms.external:after,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info .terms.external:after {
    background-color: var(--text-invert)
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info .current,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info .current {
    background-color: initial;
    border: 1px solid var(--mdn-color-black);
    color: var(--mdn-color-black)
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info .na,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info .na {
    background-color: var(--mdn-background-light-grey);
    border: 1px solid var(--mdn-background-light-grey);
    color: var(--mdn-color-dark-grey)
}

.plus-subscribe-wrapper .subscribe .wrapper .subscribe-detail .sub-info .na:after,
.plus-subscribe-wrapper .subscribe .wrapper-offline .subscribe-detail .sub-info .na:after {
    background-color: var(--mdn-color-dark-grey);
    content: "";
    display: inline-block;
    height: 16px;
    margin-left: .3rem;
    -webkit-mask-image: url(/static/media/question-mark.49cdd75ff726ea6655f4.svg);
    mask-image: url(/static/media/question-mark.49cdd75ff726ea6655f4.svg);
    width: 16px
}

.plus-for-companies {
    color: var(--text-primary);
    margin: 0;
    padding: 1rem 1rem 2rem;
    text-align: center
}

.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(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-variation-settings: 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(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(max-width:40rem) {
    blockquote.quote {
        flex-wrap: wrap-reverse
    }
}

blockquote.quote p {
    display: flex;
    font-style: italic;
    font-variation-settings: "slnt" -10
}

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;
    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;
    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 {
    display: grid;
    gap: .3em
}

@media(max-width:769px) {
    main.contribute section .stats {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:426px) {
    main.contribute section .stats {
        grid-template-columns: 1fr
    }
}

@media(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
}

.contributor-spotlight-content-container h2 a {
    color: var(--text-primary);
    text-decoration: none
}

.contributor-spotlight-content-container h2 a:hover {
    text-decoration: underline
}

main.advertise-with-us {
    margin-bottom: 3rem;
    width: 100%
}

main.advertise-with-us .stats-container {
    background-color: var(--background-primary);
    color: var(--text-primary);
    margin-bottom: 3rem;
    width: 100%
}

main.advertise-with-us section {
    margin: 0 auto;
    max-width: 52rem;
    padding: 0 1rem
}

main.advertise-with-us section.stats-header {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 0 .5rem 2rem
}

main.advertise-with-us section h1 {
    font-size: 3rem;
    margin-left: .5rem;
    margin-top: 8rem;
    text-align: center
}

main.advertise-with-us section h1:after {
    content: " ";
    text-decoration: underline;
    text-decoration-color: var(--text-link);
    text-decoration-thickness: .1em;
    text-underline-offset: .1em
}

main.advertise-with-us section h1:before {
    background-color: var(--text-link);
    background-color: var(--mdn-color-ads);
    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;
    transform: translate(-.2em, .2em);
    width: 1.2em
}

main.advertise-with-us section h1:after {
    text-decoration-color: var(--mdn-color-ads)
}

main.advertise-with-us section .quote.owd {
    background-color: var(--mdn-color-ads);
    color: var(--background-primary)
}

main.advertise-with-us section .quote.owd .icon,
main.advertise-with-us section .quote.pab {
    background-color: var(--background-primary)
}

main.advertise-with-us section .quote.pab {
    color: var(--text-primary)
}

main.advertise-with-us section .quote.pab .icon {
    background-color: var(--text-primary)
}

main.advertise-with-us section .stats {
    display: grid;
    gap: .3em
}

@media(max-width:769px) {
    main.advertise-with-us section .stats {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:426px) {
    main.advertise-with-us section .stats {
        grid-template-columns: 1fr
    }
}

@media(min-width:769px) {
    main.advertise-with-us section .stats {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
}

main.advertise-with-us section .stats li {
    align-items: center;
    background: var(--mdn-color-ads);
    color: var(--background-primary);
    display: flex;
    flex-direction: column;
    padding: .5rem 2rem
}

main.advertise-with-us section .stats li .number {
    font-size: 3rem
}

main.advertise-with-us section .stats li .number svg {
    transform: translateY(.125em)
}

main.advertise-with-us section .stats li .legend {
    font-size: .8rem;
    max-width: 5rem;
    text-align: center
}

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

.blog .top-navigation {
    --text-link: var(--category-color)
}

.blog-container {
    --author-gap: 1rem;
    --avatar-size: 3rem;
    margin: 0 auto;
    max-width: min(80vw + 4rem, var(--max-width));
    padding: 2rem 1rem
}

.blog-container .sponsored {
    color: var(--icon-primary)
}

.blog-container .sponsored:before {
    background-color: var(--icon-primary);
    content: "";
    display: inline-block;
    height: 1em;
    margin-bottom: -.15em;
    margin-right: .3em;
    -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;
    width: 1em
}

.blog-container .author,
.blog-container .date-author {
    align-content: flex-start;
    align-items: center;
    display: flex;
    flex-wrap: wrap
}

.blog-container .date-author {
    column-gap: 1.5rem;
    padding-left: calc(var(--avatar-size) + var(--author-gap))
}

.blog-container .author {
    font-weight: var(--font-body-strong-weight);
    gap: var(--author-gap);
    margin-left: calc((var(--avatar-size) + var(--author-gap))*-1)
}

.blog-container .author:after {
    margin-left: calc(4px - var(--author-gap))
}

.blog-container .author img {
    border: none !important;
    border-radius: 3rem;
    height: var(--avatar-size);
    margin: 0;
    object-fit: cover;
    width: var(--avatar-size)
}

.blog-container figure.blog-image {
    margin: 0 auto 2rem;
    width: fit-content
}

.blog-container figure.blog-image img {
    background: #0000;
    border: none !important;
    margin: 0 0 .125rem;
    width: 100%
}

.blog-container figure.blog-image figcaption {
    font-size: smaller;
    margin-left: auto;
    width: fit-content
}

.blog-container h1 {
    margin-top: 1rem
}

.blog-container.blog-index>header {
    width: 100%
}

.blog-container.blog-index>header>h1 {
    margin: 0 auto 2rem;
    width: fit-content
}

.blog-container.blog-index>header>h1:before {
    background-color: var(--category-color)
}

.blog-container.blog-index>header>h1:after {
    text-decoration-color: var(--category-color)
}

.blog-container.blog-index .article-list {
    column-gap: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr
}

@media(max-width:992px) {
    .blog-container.blog-index .article-list {
        grid-template-columns: auto
    }
}

.blog-container.blog-index article {
    border: 1px solid var(--border-primary);
    border-radius: 1rem;
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    margin-top: 2rem;
    padding: 2rem
}

.blog-container.blog-index article a.button {
    margin-left: auto;
    -webkit-text-decoration: var(--button-bg);
    text-decoration: var(--button-bg)
}

.blog-container.blog-index article header {
    display: grid;
    flex-direction: column;
    grid-row: span 3;
    grid-template-rows: subgrid
}

.blog-container.blog-index article header figure.blog-image {
    margin-bottom: 0
}

.blog-container.blog-index article header figure.blog-image img {
    margin-bottom: 0;
    max-height: 200px;
    width: auto
}

.blog-container.blog-index article header h2:first-of-type {
    align-self: center;
    font: var(--type-heading-h3);
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: 2.25rem;
    margin-top: 1.5rem
}

.blog-container.blog-index article p {
    margin-bottom: 2.25rem;
    margin-top: 1.5rem
}

.blog-container.blog-index article footer {
    align-items: center;
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem
}

.blog-post-container {
    display: grid;
    gap: 3rem;
    grid-template-areas: "post" "newsletter";
    width: 100%
}

@media(min-width:992px) {
    .blog-post-container {
        grid-template-areas: "post toc" "newsletter toc";
        grid-template-columns: minmax(auto, 100%) minmax(0, 12rem)
    }
}

@media(min-width:1200px) {
    .blog-post-container {
        grid-template-areas: "nothing post toc" "nothing newsletter toc";
        grid-template-columns: minmax(auto, 1fr) minmax(0, 52rem) minmax(15rem, 1fr)
    }
}

@media(min-width:1441px) {
    .blog-post-container {
        grid-template-areas: "toc post place" "toc newsletter place";
        grid-template-columns: minmax(15rem, 1fr) minmax(0, 52rem) minmax(15rem, 1fr)
    }
}

.blog-post-container>.toc-container {
    --offset: var(--top-nav-height);
    display: none
}

@media(min-width:992px) {
    .blog-post-container>.toc-container {
        display: flex;
        flex-direction: column;
        grid-area: toc
    }

    .blog-post-container>.toc-container .toc>nav {
        margin-top: 2rem
    }
}

@media(min-width:1441px) {
    .blog-post-container>.toc-container {
        display: contents
    }

    .blog-post-container>.toc-container .place.side,
    .blog-post-container>.toc-container .toc {
        height: max-content;
        -webkit-mask-image: linear-gradient(180deg, #0000 0, #000 3rem calc(100% - 3rem), #0000);
        mask-image: linear-gradient(180deg, #0000 0, #000 3rem calc(100% - 3rem), #0000);
        max-height: calc(100vh - var(--offset));
        overflow: auto;
        position: sticky;
        top: var(--offset)
    }

    .blog-post-container>.toc-container .place.side {
        grid-area: place;
        margin-top: 0
    }

    .blog-post-container>.toc-container .place.side>.pong-box,
    .blog-post-container>.toc-container .place.side>.pong-box2 {
        margin-top: 2rem
    }
}

.blog-post-container>.section-newsletter {
    grid-area: newsletter
}

.blog-post-container>.blog-post {
    grid-area: post;
    max-width: 52rem
}

.blog-post-container>.blog-post+.section-newsletter h2 {
    font: var(--type-heading-h3);
    margin: 0
}

.blog-post-container>.blog-post .previous-next {
    display: flex;
    gap: 1rem
}

@media(max-width:769px) {
    .blog-post-container>.blog-post .previous-next {
        flex-direction: column-reverse
    }
}

.blog-post-container>.blog-post .previous-next a {
    color: var(--text-primary);
    display: flex;
    gap: 1rem;
    text-decoration: none;
    width: 100%
}

.blog-post-container>.blog-post .previous-next a:hover h2 {
    text-decoration: underline
}

.blog-post-container>.blog-post .previous-next a:active {
    background: none
}

@media(min-width:769px) {

    .blog-post-container>.blog-post .previous-next a.next:after,
    .blog-post-container>.blog-post .previous-next a.next:before,
    .blog-post-container>.blog-post .previous-next a.previous:after,
    .blog-post-container>.blog-post .previous-next a.previous:before {
        align-self: center;
        background-color: var(--text-primary);
        flex-shrink: 0;
        height: 1rem;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        vertical-align: middle;
        width: 1rem
    }

    .blog-post-container>.blog-post .previous-next a.previous:before {
        content: "";
        -webkit-mask-image: url(/static/media/previous.585a0363cab37d75a90d.svg);
        mask-image: url(/static/media/previous.585a0363cab37d75a90d.svg)
    }

    .blog-post-container>.blog-post .previous-next a.next:after {
        content: "";
        -webkit-mask-image: url(/static/media/next.1ecddf89481891f59480.svg);
        mask-image: url(/static/media/next.1ecddf89481891f59480.svg)
    }
}

.blog-post-container>.blog-post .previous-next article {
    margin: 0 auto
}

.blog-post-container>.blog-post .previous-next h2:first-of-type {
    color: var(--text-link);
    font-size: 1rem;
    margin: 0;
    text-align: center
}

.blog-post-container>.blog-post .previous-next h2:first-of-type strong {
    color: var(--text-primary);
    display: block;
    font-size: .8em;
    font-weight: 400;
    line-height: 1.2rem
}

.section-newsletter {
    margin: 0 auto;
    max-width: 35rem;
    padding: 2rem
}

.section-newsletter button,
.section-newsletter input[type=email] {
    width: 100%
}

.section-newsletter form {
    margin-bottom: 2rem
}

svg.topic-icon circle {
    fill: var(--background-primary)
}

svg.topic-icon path {
    fill: var(--curriculum-color-topic)
}

.curriculum-content-container .curriculum-content .modules input[type=radio]:not(:checked)~a.lets-begin,
.curriculum-content-container .curriculum-content .modules input[type=radio]:not(:checked)~ol.modules-list,
.curriculum-content-container.curriculum-overview .curriculum-content .modules input[type=radio]:not(:checked)~a.lets-begin,
.curriculum-content-container.curriculum-overview .curriculum-content .modules input[type=radio]:not(:checked)~ol.modules-list {
    display: none
}

.curriculum-content-container .curriculum-content ol.modules-list-list,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list {
    display: grid;
    grid-template-areas: "started core  extensions" "hr      hr    hr" "mod     mod   mod" "cta     cta   cta";
    grid-template-columns: auto;
    margin: 0;
    padding: 0
}

@media(min-width:426px) {

    .curriculum-content-container .curriculum-content ol.modules-list-list,
    .curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list {
        grid-template-areas: "started core  extensions spacer" "hr      hr    hr         hr" "mod     mod   mod        mod" "cta     cta   cta        cta";
        grid-template-columns: auto auto auto 1fr
    }
}

.curriculum-content-container .curriculum-content ol.modules-list-list:before,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list:before {
    border: none;
    border-top: 1px solid var(--text-inactive);
    content: "";
    grid-area: hr;
    margin: 0 0 1.5rem;
    width: 100%
}

.curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item {
    display: contents
}

.curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item>input:checked+label,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item>input:checked+label {
    color: var(--text-primary)
}

.curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item>input:checked+label:before,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item>input:checked+label:before {
    height: 0;
    position: absolute;
    transform: translate3d(-.75rem, .75rem, 0);
    width: 0
}

.curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item>input:checked:focus-visible+label,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item>input:checked:focus-visible+label {
    outline-color: var(--accent-primary);
    outline-offset: 1px;
    outline-style: auto
}

.curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item>input:not(:checked)+label,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item>input:not(:checked)+label {
    color: var(--text-secondary);
    opacity: .775
}

.curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item>label,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item>label {
    cursor: pointer;
    width: max-content
}

.curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-0>input,
.curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-0>label,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-0>input,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-0>label {
    grid-area: started
}

.curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-0>input:checked+label:before,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-0>input:checked+label:before {
    content: url(/static/media/curriculum-modules-underline.c56344dae221984f8e91.svg#1)
}

.curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-1>input,
.curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-1>label,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-1>input,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-1>label {
    grid-area: core
}

@media(min-width:426px) {

    .curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-1>input,
    .curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-1>label,
    .curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-1>input,
    .curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-1>label {
        margin-left: 2rem
    }
}

.curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-1>input:checked+label:before,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-1>input:checked+label:before {
    content: url(/static/media/curriculum-modules-underline.c56344dae221984f8e91.svg#2)
}

.curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-2>input,
.curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-2>label,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-2>input,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-2>label {
    grid-area: extensions
}

@media(min-width:426px) {

    .curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-2>input,
    .curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-2>label,
    .curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-2>input,
    .curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-2>label {
        margin-left: 2rem
    }
}

.curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-2>input:checked+label:before,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item#modules-2>input:checked+label:before {
    content: url(/static/media/curriculum-modules-underline.c56344dae221984f8e91.svg#3)
}

.curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item>ol.modules-list,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item>ol.modules-list {
    grid-area: mod;
    margin: 0
}

.curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item>a.lets-begin,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item>a.lets-begin {
    grid-area: cta;
    margin-left: .5rem;
    margin-top: 2rem;
    width: fit-content
}

@media(min-width:769px) {

    .curriculum-content-container .curriculum-content ol.modules-list-list li.modules-list-list-item>a.lets-begin,
    .curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list-list li.modules-list-list-item>a.lets-begin {
        margin-left: 0
    }
}

.curriculum-content-container .curriculum-content ol.modules-list,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list {
    display: grid;
    flex-wrap: wrap;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0;
    overflow: scroll;
    padding: .5rem;
    scroll-snap-type: inline mandatory
}

@media(min-width:769px) {

    .curriculum-content-container .curriculum-content ol.modules-list,
    .curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list {
        overflow: inherit;
        padding: 0
    }
}

.curriculum-content-container .curriculum-content ol.modules-list :focus-visible,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list :focus-visible {
    outline-offset: -2px
}

.curriculum-content-container .curriculum-content ol.modules-list li.module-list-item,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list li.module-list-item {
    --spacing: 1rem;
    --icon-size: 4rem;
    display: block
}

.curriculum-content-container .curriculum-content ol.modules-list li.module-list-item>a,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list li.module-list-item>a {
    background-color: var(--curriculum-bg-color-list-item-body);
    border: 1px solid var(--curriculum-border-color);
    border-radius: var(--elem-radius);
    box-shadow: var(--curriculum-shadow);
    display: flex;
    flex-direction: column;
    justify-self: center;
    max-width: 20rem;
    min-width: 15rem;
    overflow: auto;
    padding: 0;
    scroll-snap-align: center;
    text-decoration: none;
    width: 100%
}

.curriculum-content-container .curriculum-content ol.modules-list li.module-list-item>a:hover,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list li.module-list-item>a:hover {
    border-color: var(--curriculum-border-color-hover);
    text-decoration: none
}

@media(min-width:769px) {

    .curriculum-content-container .curriculum-content ol.modules-list li.module-list-item>a,
    .curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list li.module-list-item>a {
        min-width: auto
    }
}

.curriculum-content-container .curriculum-content ol.modules-list li.module-list-item>a>header,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list li.module-list-item>a>header {
    align-items: center;
    background-color: var(--curriculum-bg-color-list-item-header);
    display: flex;
    flex-direction: column;
    font-weight: var(--font-body-strong-weight);
    height: 10.5rem;
    height: calc(var(--spacing)*3 + var(--icon-size) + 2lh);
    padding: var(--spacing);
    row-gap: var(--spacing)
}

.curriculum-content-container .curriculum-content ol.modules-list li.module-list-item>a>header svg.topic-icon,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list li.module-list-item>a>header svg.topic-icon {
    height: var(--icon-size);
    width: var(--icon-size)
}

.curriculum-content-container .curriculum-content ol.modules-list li.module-list-item>a>header svg.topic-icon circle,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list li.module-list-item>a>header svg.topic-icon circle {
    fill: var(--curriculum-bg-color-list-item-icon)
}

.curriculum-content-container .curriculum-content ol.modules-list li.module-list-item>a>header svg.topic-icon path,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list li.module-list-item>a>header svg.topic-icon path {
    fill: var(--curriculum-color-list-item-icon)
}

.curriculum-content-container .curriculum-content ol.modules-list li.module-list-item>a>header>span,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list li.module-list-item>a>header>span {
    color: var(--text-primary);
    margin: 0 auto;
    text-align: center
}

.curriculum-content-container .curriculum-content ol.modules-list li.module-list-item>a>section,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list li.module-list-item>a>section {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: var(--type-smaller-font-size);
    height: 11rem;
    justify-content: space-between;
    padding: var(--spacing)
}

.curriculum-content-container .curriculum-content ol.modules-list li.module-list-item>a>section p,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list li.module-list-item>a>section p {
    color: var(--text-secondary);
    margin: 0;
    text-align: center
}

.curriculum-content-container .curriculum-content ol.modules-list li.module-list-item>a>section p:last-child,
.curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list li.module-list-item>a>section p:last-child {
    color: var(--curriculum-color-topic);
    font-weight: 600
}

@media(min-width:426px) {

    .curriculum-content-container .curriculum-content ol.modules-list,
    .curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list {
        grid-template-columns: 1fr 1fr
    }
}

@media(min-width:1441px) {

    .curriculum-content-container .curriculum-content ol.modules-list,
    .curriculum-content-container.curriculum-overview .curriculum-content ol.modules-list {
        grid-template-columns: 1fr 1fr 1fr
    }
}

.curriculum-prev-next {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    justify-content: space-between;
    margin-top: 2rem;
    width: 100%
}

.curriculum-prev-next a {
    margin: .5rem 0
}

.curriculum-content-container.curriculum-module .curriculum-content>header {
    column-gap: 1.5rem;
    display: grid;
    grid-template-areas: ". group" "icon heading" "icon category";
    justify-content: flex-start
}

.curriculum-content-container.curriculum-module .curriculum-content>header .topic-icon {
    --background-primary: var(--curriculum-bg-color-topic);
    align-self: flex-start;
    grid-area: icon;
    height: 4rem;
    width: 4rem
}

.curriculum-content-container.curriculum-module .curriculum-content>header .topic-icon+h1 {
    grid-area: heading;
    margin-bottom: 0
}

.curriculum-content-container.curriculum-module .curriculum-content>header p.module-topic {
    color: var(--curriculum-color-topic);
    font-size: var(--type-smaller-font-size);
    grid-area: category;
    margin: .5rem 0 0
}

.curriculum-content-container.curriculum-module .curriculum-content>header p.module-topic:before {
    content: "Category: "
}

.curriculum-content-container.curriculum-module .curriculum-content>header p.module-group {
    align-self: center;
    background-color: var(--curriculum-module-label-bg-color);
    border-radius: var(--elem-radius);
    color: var(--curriculum-module-label-color);
    font-size: var(--type-smaller-font-size);
    grid-area: group;
    height: max-content;
    margin: 0 0 .25rem;
    padding: .125rem .5rem;
    width: fit-content
}

.curriculum-content-container.curriculum-module .curriculum-content p.curriculum-resources {
    margin-bottom: .5rem;
    margin-top: 2rem
}

.curriculum-content-container.curriculum-module .curriculum-content p.curriculum-resources+ul {
    padding-left: 2rem
}

.curriculum-content-container.curriculum-module .curriculum-content p.curriculum-resources+ul>li {
    list-style-image: var(--curriculum-module-mdn-resource)
}

.curriculum-content-container.curriculum-module .curriculum-content p.curriculum-resources+ul>li.curriculum-external-li {
    list-style-image: url(/static/media/curriculum-ext-resource.c5bdb845b9256c775ec3.svg)
}

.curriculum-content-container.curriculum-module .curriculum-content p.curriculum-resources+ul>li em {
    background: var(--curriculum-bg-color);
    border-radius: 1em;
    color: var(--text-primary);
    display: inline-block;
    font-size: .5rem;
    font-weight: 700;
    line-height: 1.7;
    padding: 0 .4em;
    text-rendering: optimizeLegibility;
    text-transform: uppercase;
    vertical-align: super
}

.curriculum {
    --background-toc-active: var(--curriculum-bg-color);
    --category-color: var(--curriculum-category-color);
    --curriculum-bg-color-topic: var(--curriculum-bg-color);
    --curriculum-color-topic: var(--curriculum-color)
}

.curriculum .topic-standards {
    --curriculum-bg-color-topic: var(--curriculum-bg-color-topic-standards);
    --curriculum-color-topic: var(--curriculum-color-topic-standards);
    --curriculum-bg-color-list-item-header: var(--curriculum-bg-color-list-item-topic-standards);
    --curriculum-color-list-item-icon: var(--curriculum-color-list-item-icon-topic-standards);
    --curriculum-bg-color-list-item-icon: var(--curriculum-bg-color-list-item-icon-topic-standards)
}

.curriculum .topic-styling {
    --curriculum-bg-color-topic: var(--curriculum-bg-color-topic-styling);
    --curriculum-color-topic: var(--curriculum-color-topic-styling);
    --curriculum-bg-color-list-item-header: var(--curriculum-bg-color-list-item-topic-styling);
    --curriculum-color-list-item-icon: var(--curriculum-color-list-item-icon-topic-styling);
    --curriculum-bg-color-list-item-icon: var(--curriculum-bg-color-list-item-icon-topic-styling)
}

.curriculum .topic-scripting {
    --curriculum-bg-color-topic: var(--curriculum-bg-color-topic-scripting);
    --curriculum-color-topic: var(--curriculum-color-topic-scripting);
    --curriculum-bg-color-list-item-header: var(--curriculum-bg-color-list-item-topic-scripting);
    --curriculum-color-list-item-icon: var(--curriculum-color-list-item-icon-topic-scripting);
    --curriculum-bg-color-list-item-icon: var(--curriculum-bg-color-list-item-icon-topic-scripting)
}

.curriculum .topic-tooling {
    --curriculum-bg-color-topic: var(--curriculum-bg-color-topic-tooling);
    --curriculum-color-topic: var(--curriculum-color-topic-tooling);
    --curriculum-bg-color-list-item-header: var(--curriculum-bg-color-list-item-topic-tooling);
    --curriculum-color-list-item-icon: var(--curriculum-color-list-item-icon-topic-tooling);
    --curriculum-bg-color-list-item-icon: var(--curriculum-bg-color-list-item-icon-topic-tooling)
}

.curriculum .topic-practices {
    --curriculum-bg-color-topic: var(--curriculum-bg-color-topic-practices);
    --curriculum-color-topic: var(--curriculum-color-topic-practices);
    --curriculum-bg-color-list-item-header: var(--curriculum-bg-color-list-item-topic-practices);
    --curriculum-color-list-item-icon: var(--curriculum-color-list-item-icon-topic-practices);
    --curriculum-bg-color-list-item-icon: var(--curriculum-bg-color-list-item-icon-topic-practices)
}

.curriculum .curriculum-content .modules input[type=radio]:not(:checked)~ol {
    display: none
}

.curriculum .article-actions-container {
    display: flex
}

.curriculum .sidebar>ol:first-of-type>li:first-of-type {
    font-size: var(--type-base-font-size-rem);
    font-weight: 700
}

.curriculum .sidebar li>em {
    background-color: var(--background-toc-active);
    border-bottom-right-radius: .25rem;
    border-left: 2px solid var(--category-color);
    border-top-right-radius: .25rem;
    display: inline-block;
    font-style: normal;
    font-variation-settings: normal;
    font-weight: 600;
    padding: .25rem .5rem
}

.curriculum-content-container>.curriculum-content {
    max-width: 100%
}

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

.curriculum-content-container>.curriculum-content h1 a:focus,
.curriculum-content-container>.curriculum-content h1 a:hover,
.curriculum-content-container>.curriculum-content h2 a:focus,
.curriculum-content-container>.curriculum-content h2 a:hover,
.curriculum-content-container>.curriculum-content h3 a:focus,
.curriculum-content-container>.curriculum-content h3 a:hover,
.curriculum-content-container>.curriculum-content h4 a:focus,
.curriculum-content-container>.curriculum-content h4 a:hover,
.curriculum-content-container>.curriculum-content h5 a:focus,
.curriculum-content-container>.curriculum-content h5 a:hover,
.curriculum-content-container>.curriculum-content h6 a:focus,
.curriculum-content-container>.curriculum-content h6 a:hover {
    text-decoration: underline
}

.curriculum-content-container>.curriculum-content h1 a:active,
.curriculum-content-container>.curriculum-content h2 a:active,
.curriculum-content-container>.curriculum-content h3 a:active,
.curriculum-content-container>.curriculum-content h4 a:active,
.curriculum-content-container>.curriculum-content h5 a:active,
.curriculum-content-container>.curriculum-content h6 a:active {
    background-color: #0000
}

.curriculum-content-container>.curriculum-content h1 a[href^="#"]:before,
.curriculum-content-container>.curriculum-content h2 a[href^="#"]:before,
.curriculum-content-container>.curriculum-content h3 a[href^="#"]:before,
.curriculum-content-container>.curriculum-content h4 a[href^="#"]:before,
.curriculum-content-container>.curriculum-content h5 a[href^="#"]:before,
.curriculum-content-container>.curriculum-content h6 a[href^="#"]:before {
    color: var(--text-inactive);
    content: "#";
    display: inline-block;
    font-size: .7em;
    line-height: 1;
    margin-left: -.8em;
    text-decoration: none;
    visibility: hidden;
    width: .8em
}

.curriculum-content-container>.curriculum-content h1 a[href^="#"]:hover:before,
.curriculum-content-container>.curriculum-content h2 a[href^="#"]:hover:before,
.curriculum-content-container>.curriculum-content h3 a[href^="#"]:hover:before,
.curriculum-content-container>.curriculum-content h4 a[href^="#"]:hover:before,
.curriculum-content-container>.curriculum-content h5 a[href^="#"]:hover:before,
.curriculum-content-container>.curriculum-content h6 a[href^="#"]:hover:before {
    visibility: visible
}

.curriculum-content-container,
.curriculum-content-container .button {
    --button-padding: 1rem
}

.curriculum-content-container .curriculum-content,
.curriculum-content-container .curriculum-sidebar,
.curriculum-content-container .toc {
    padding-bottom: 3rem;
    padding-top: 3rem
}

.curriculum-content-container .curriculum-content a {
    color: var(--text-link)
}

.curriculum-content-container .curriculum-content a:link,
.curriculum-content-container .curriculum-content a:visited {
    text-decoration: underline
}

.curriculum-content-container .curriculum-content a:focus,
.curriculum-content-container .curriculum-content a:hover,
.curriculum-content-container .curriculum-content a:link.button,
.curriculum-content-container .curriculum-content a:visited.button {
    text-decoration: none
}

.curriculum-content-container .curriculum-content a:visited:not([href^="#"]) {
    color: var(--text-visited)
}

.curriculum-content-container.with-sidebar>.sidebar-container {
    padding-top: 4rem
}

.curriculum-content-container.with-sidebar .curriculum-content {
    grid-area: main
}

.curriculum-content-container.curriculum-module .curriculum-content>header>h1,
.curriculum-content-container.curriculum-overview .curriculum-content>header>h1 {
    margin-bottom: 2rem
}

.curriculum-content-container.curriculum-module .curriculum-content>header>h1>span,
.curriculum-content-container.curriculum-overview .curriculum-content>header>h1>span {
    color: var(--curriculum-color)
}

.curriculum-content-container.curriculum-module .curriculum-content .module-contents>h2,
.curriculum-content-container.curriculum-overview .curriculum-content .module-contents>h2 {
    margin-bottom: 2rem;
    margin-top: 4rem
}

.curriculum-content-container.curriculum-module .curriculum-content section h2:first-of-type,
.curriculum-content-container.curriculum-overview .curriculum-content section h2:first-of-type {
    margin-top: 2rem
}

.curriculum-content-container.curriculum-module .curriculum-content blockquote.curriculum-notes,
.curriculum-content-container.curriculum-overview .curriculum-content blockquote.curriculum-notes {
    background-color: var(--curriculum-bg-color-note);
    border: 0;
    border-radius: var(--elem-radius);
    margin: 1rem;
    padding: 1rem
}

.curriculum-content-container.curriculum-module .curriculum-content blockquote.curriculum-notes ol,
.curriculum-content-container.curriculum-module .curriculum-content blockquote.curriculum-notes ul,
.curriculum-content-container.curriculum-overview .curriculum-content blockquote.curriculum-notes ol,
.curriculum-content-container.curriculum-overview .curriculum-content blockquote.curriculum-notes ul {
    padding-left: 1rem
}

.curriculum-content-container.curriculum-module .curriculum-content blockquote.curriculum-notes ol li:last-child,
.curriculum-content-container.curriculum-module .curriculum-content blockquote.curriculum-notes ul li:last-child,
.curriculum-content-container.curriculum-overview .curriculum-content blockquote.curriculum-notes ol li:last-child,
.curriculum-content-container.curriculum-overview .curriculum-content blockquote.curriculum-notes ul li:last-child {
    margin-bottom: 0
}

.curriculum-content-container.curriculum-module .curriculum-content blockquote.curriculum-notes ol,
.curriculum-content-container.curriculum-module .curriculum-content blockquote.curriculum-notes p,
.curriculum-content-container.curriculum-module .curriculum-content blockquote.curriculum-notes ul,
.curriculum-content-container.curriculum-overview .curriculum-content blockquote.curriculum-notes ol,
.curriculum-content-container.curriculum-overview .curriculum-content blockquote.curriculum-notes p,
.curriculum-content-container.curriculum-overview .curriculum-content blockquote.curriculum-notes ul {
    margin-top: .5rem
}

.curriculum-content-container.curriculum-module .curriculum-content blockquote.curriculum-notes>p:first-child,
.curriculum-content-container.curriculum-overview .curriculum-content blockquote.curriculum-notes>p:first-child {
    margin-top: 0
}

.curriculum-content-container.curriculum-module .curriculum-content blockquote.curriculum-notes>:last-child,
.curriculum-content-container.curriculum-overview .curriculum-content blockquote.curriculum-notes>:last-child {
    margin-bottom: 0
}

.curriculum-content-container.curriculum-module .curriculum-content p.curriculum-outcomes,
.curriculum-content-container.curriculum-overview .curriculum-content p.curriculum-outcomes {
    display: flex;
    font-weight: var(--font-body-strong-weight);
    margin-bottom: .5rem
}

.curriculum-content-container.curriculum-module .curriculum-content p.curriculum-outcomes:before,
.curriculum-content-container.curriculum-overview .curriculum-content p.curriculum-outcomes:before {
    content: url(/static/media/curriculum-resources.d9102b600068a6a7184c.svg);
    display: block;
    height: 24px;
    margin-right: .5rem;
    width: 24px
}

.curriculum-content-container.curriculum-module .curriculum-content ol,
.curriculum-content-container.curriculum-module .curriculum-content ul,
.curriculum-content-container.curriculum-overview .curriculum-content ol,
.curriculum-content-container.curriculum-overview .curriculum-content ul {
    margin: 1rem 0;
    padding-left: 2rem
}

.curriculum-content-container.curriculum-module .curriculum-content ol ol,
.curriculum-content-container.curriculum-module .curriculum-content ol ul,
.curriculum-content-container.curriculum-module .curriculum-content ul ol,
.curriculum-content-container.curriculum-module .curriculum-content ul ul,
.curriculum-content-container.curriculum-overview .curriculum-content ol ol,
.curriculum-content-container.curriculum-overview .curriculum-content ol ul,
.curriculum-content-container.curriculum-overview .curriculum-content ul ol,
.curriculum-content-container.curriculum-overview .curriculum-content ul ul {
    margin: 0
}

.curriculum-content-container.curriculum-module .curriculum-content li,
.curriculum-content-container.curriculum-overview .curriculum-content li {
    list-style-type: disc;
    margin: .5rem 0
}

.curriculum-content-container.curriculum-about .curriculum-content {
    margin-bottom: 5rem
}

.curriculum-content-container.curriculum-about .curriculum-content h2#motivation+div li {
    list-style-image: var(--curriculum-bullet)
}

.curriculum-content-container.curriculum-about .curriculum-content h3 {
    align-items: center;
    display: flex;
    gap: 1.25rem
}

.curriculum-content-container.curriculum-about .curriculum-content h3:before {
    display: inline-block;
    height: 2.5rem;
    width: 2.5rem
}

.curriculum-content-container.curriculum-about .curriculum-content h3#students:before {
    content: var(--curriculum-about-students)
}

.curriculum-content-container.curriculum-about .curriculum-content h3#educators:before {
    content: var(--curriculum-about-educators)
}

.curriculum-content-container.curriculum-about .curriculum-content h3#whats_covered:before {
    content: var(--curriculum-about-covered)
}

.curriculum-content-container.curriculum-about .curriculum-content h3#level_of_detail:before {
    content: var(--curriculum-about-detail)
}

.curriculum-content-container.curriculum-about .curriculum-content h3#what_is_not_covered:before {
    content: var(--curriculum-about-not)
}

.curriculum-content-container.curriculum-landing {
    background-color: var(--curriculum-bg-color-landing);
    margin: 0;
    max-width: 100%;
    padding: 0;
    width: 100%
}

.curriculum-content-container.curriculum-landing>article>header,
.curriculum-content-container.curriculum-landing>article>section {
    margin: 0 auto 3rem;
    max-width: min(var(--max-width), 74rem);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    width: 100%
}

.curriculum-content-container.curriculum-landing .curriculum-content {
    padding-top: 0
}

@media(min-width:426px) {
    .curriculum-content-container.curriculum-landing .curriculum-content ol.modules-list {
        grid-template-columns: 1fr 1fr
    }
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing .curriculum-content ol.modules-list {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media(min-width:992px) {
    .curriculum-content-container.curriculum-landing .curriculum-content ol.modules-list {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
}

.curriculum-content-container.curriculum-landing header.landing-header {
    display: grid;
    grid-template-areas: "copy" "svg"
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing header.landing-header {
        grid-template-areas: "copy svg";
        grid-template-columns: 30rem auto
    }
}

.curriculum-content-container.curriculum-landing header.landing-header>svg {
    align-self: end;
    grid-area: svg;
    justify-self: end;
    margin-bottom: 3rem;
    max-width: 28rem;
    width: 100%;
    z-index: 1
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing header.landing-header>svg {
        margin-bottom: 0
    }
}

.curriculum-content-container.curriculum-landing header.landing-header>svg #icons-bg {
    fill: var(--curriculum-bg-color-landing-top-icon)
}

.curriculum-content-container.curriculum-landing header.landing-header>svg .laptop {
    fill: var(--curriculum-color-landing-laptop)
}

.curriculum-content-container.curriculum-landing header.landing-header>section {
    grid-area: copy;
    margin-right: auto;
    margin-top: 3rem;
    max-width: 30rem;
    padding-right: 1rem
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing header.landing-header>section {
        margin-bottom: 4rem
    }
}

.curriculum-content-container.curriculum-landing header.landing-header>section h1 {
    color: var(--curriculum-color-topic);
    font-size: 2rem;
    margin-bottom: .5rem
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing header.landing-header>section h1 {
        font-size: 2.5rem
    }
}

.curriculum-content-container.curriculum-landing header.landing-header>section h2 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    margin-top: .5rem
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing header.landing-header>section h2 {
        font-size: 2rem;
        margin-bottom: 2rem
    }
}

.curriculum-content-container.curriculum-landing header.landing-header>section p {
    color: var(--text-secondary)
}

.curriculum-content-container.curriculum-landing .landing-about-container {
    background-color: var(--curriculum-bg-large-color);
    margin: -6rem 0 0;
    max-width: 100%
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about {
    display: grid;
    grid-template-areas: "li" "h2" "p1" "p2" "p3" "p4" "scrim";
    grid-template-columns: 1fr;
    margin: 0 auto 3rem;
    max-width: min(var(--max-width), 74rem)
}

@media(min-width:992px) {
    .curriculum-content-container.curriculum-landing .landing-about-container .landing-about {
        column-gap: 1rem;
        grid-template-areas: "li li    li " "h2 .     scrim" "p1 .     scrim" "p2 .     scrim" "p3 arrow scrim" "p4 arrow scrim";
        grid-template-columns: 1fr 7rem 24rem
    }
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about h2 {
    grid-area: h2;
    margin: 1rem 0
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content {
    display: contents
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content ul {
    align-items: start;
    background-color: var(--curriculum-bg-color-landing-about-ul);
    border-radius: var(--elem-radius);
    box-shadow: var(--curriculum-shadow-landing-about-ul);
    color: var(--text-secondary);
    display: grid;
    grid-area: li;
    grid-template-columns: auto auto auto;
    justify-content: center;
    margin: auto;
    min-height: 5rem;
    padding: 1rem;
    transform: translateY(-1rem);
    width: 100%
}

@media(min-width:426px) {
    .curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content ul {
        align-items: center;
        gap: 1rem
    }
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content ul {
        justify-content: start
    }
}

@media(min-width:992px) {
    .curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content ul {
        justify-content: center
    }
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content ul>li {
    margin: 0 .5rem;
    text-align: center
}

@media(min-width:426px) {
    .curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content ul>li {
        margin: 0 1rem;
        width: max-content
    }
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content ul>li {
        align-items: center;
        display: inline-flex;
        gap: 1rem
    }
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content ul>li:before {
    display: block;
    height: 3rem;
    margin: 0 auto;
    width: 3rem
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content ul>li:before {
        display: initial;
        margin: 0
    }
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content ul>li:first-child:before {
    content: var(--curriculum-landing-about-beginner)
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content ul>li:nth-child(2):before {
    content: var(--curriculum-landing-about-pace)
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content ul>li:nth-child(3):before {
    content: var(--curriculum-landing-about-free)
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content p {
    align-items: center;
    color: var(--text-secondary);
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    margin: 1rem 0
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content p:before {
    align-self: start;
    display: block;
    height: 4rem;
    width: 4rem
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content p:nth-child(2) {
    grid-area: p1
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content p:nth-child(2):before {
    content: var(--curriculum-landing-about-bullet)
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content p:nth-child(3) {
    grid-area: p2
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content p:nth-child(3):before {
    content: var(--curriculum-landing-about-bullet)
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content p:nth-child(4) {
    grid-area: p3
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content p:nth-child(4):before {
    content: var(--curriculum-landing-about-bullet)
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content p:nth-child(5) {
    grid-area: p4
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content p:nth-child(5) a {
    color: var(--text-primary);
    font-weight: var(--font-body-strong-weight);
    margin-left: 4rem;
    text-decoration: underline
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content p:nth-child(5) a:active,
.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.about-content p:nth-child(5) a:hover {
    text-decoration: none
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about>div.arrow {
    background-image: var(--curriculum-landing-arrow);
    background-position: 50%;
    background-repeat: no-repeat;
    grid-area: arrow
}

.curriculum-content-container.curriculum-landing .landing-about-container .landing-about .scrim {
    grid-area: scrim;
    justify-self: center;
    margin-top: 1rem
}

@media(min-width:992px) {
    .curriculum-content-container.curriculum-landing .landing-about-container .landing-about .scrim {
        justify-self: end;
        margin-top: 0
    }
}

.curriculum-content-container.curriculum-landing .landing-stairway {
    background-color: var(--background-secondary);
    margin: 0;
    max-width: 100%
}

.curriculum-content-container.curriculum-landing .landing-stairway>div {
    color: var(--text-secondary);
    display: grid;
    grid-template-areas: "a" "b";
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    justify-content: center;
    margin: 0 auto 3rem;
    max-width: min(var(--max-width), 74rem);
    padding: 2rem;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    width: 100%
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing .landing-stairway>div {
        grid-template-columns: min(100%, 34rem)
    }
}

@media(min-width:992px) {
    .curriculum-content-container.curriculum-landing .landing-stairway>div {
        grid-template-areas: "a b";
        grid-template-columns: 1fr 1.4fr
    }
}

.curriculum-content-container.curriculum-landing .landing-stairway>div svg {
    width: 100%
}

.curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway1-container {
    --fs: clamp(1rem, 3vw, 1.75rem);
    grid-area: a;
    margin: 0;
    position: relative;
    transform: translateX(2vw);
    width: 100%
}

@media(min-width:992px) {
    .curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway1-container {
        --fs: clamp(1rem, 2vw, 1.75rem)
    }
}

.curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway1-container #stairway1 {
    font-size: var(--fs);
    left: 32%;
    position: absolute;
    top: 18%
}

.curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway1-container #stairway1>span {
    display: block;
    line-height: calc(var(--fs)*1.25);
    text-wrap: nowrap;
    width: max-content
}

.curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway1-container #stairway1 .color {
    color: var(--curriculum-color)
}

.curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway2-container {
    --fs: clamp(0.75rem, 1.25vw, 1rem);
    grid-area: b;
    position: relative;
    transform: translateX(-5vw)
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway2-container {
        --fs: clamp(0.75rem, 1vw, 0.825rem)
    }
}

.curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway2-container #stairway2 {
    font-size: var(--fs);
    height: 100%;
    left: 0;
    margin: 0;
    position: absolute;
    top: 0;
    width: calc(100% + 5vw)
}

.curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway2-container #stairway2>span {
    display: block;
    line-height: calc(var(--fs)*1.25);
    max-width: 10rem;
    position: absolute;
    text-wrap: wrap
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway2-container #stairway2>span {
        max-width: none;
        text-wrap: nowrap
    }
}

.curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway2-container #stairway2 #stair-1 {
    left: 47%;
    top: 36%
}

.curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway2-container #stairway2 #stair-2 {
    left: 33%;
    top: 52%
}

.curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway2-container #stairway2 #stair-3 {
    left: 23%;
    top: 71%
}

.curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway2-container #stairway2 #stair-4 {
    left: 8%;
    top: 86%
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway2-container #stairway2 #stair-1 {
        left: 35%;
        top: 53%
    }

    .curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway2-container #stairway2 #stair-2 {
        left: 27%;
        top: 65%
    }

    .curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway2-container #stairway2 #stair-3 {
        left: 13%;
        top: 77%
    }

    .curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway2-container #stairway2 #stair-4 {
        left: 0;
        top: 90%
    }
}

.curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway2-container>svg#stairway2large {
    display: none;
    grid-area: b
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway2-container>svg#stairway2large {
        display: initial
    }
}

.curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway2-container>svg#stairway2small {
    grid-area: b;
    max-width: 100%
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing .landing-stairway>div>#stairway2-container>svg#stairway2small {
        display: none
    }
}

.curriculum-content-container.curriculum-landing #dont_know_where_toget_started {
    line-height: 3rem;
    margin: 1rem auto 5rem;
    text-align: center;
    width: fit-content
}

.curriculum-content-container.curriculum-landing #dont_know_where_toget_started:after {
    content: url(/static/media/curriculum-started-underline.88d0afeca5249fdd196e.svg);
    position: absolute;
    transform: translate3d(-6em, 1.25rem, 0);
    width: 6em
}

.curriculum-content-container.curriculum-landing #dont_know_where_toget_started~div>ul {
    display: grid;
    gap: 1rem;
    grid-template-areas: "beginner advanced employ educator";
    margin: 0 auto;
    max-width: 52rem;
    overflow: scroll;
    scroll-snap-type: inline mandatory
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing #dont_know_where_toget_started~div>ul {
        gap: 5rem 4rem;
        grid-template-areas: "beginner advanced" "employ educator";
        grid-template-columns: auto auto
    }
}

@media(min-width:992px) {
    .curriculum-content-container.curriculum-landing #dont_know_where_toget_started~div>ul {
        gap: 5rem 8rem
    }
}

.curriculum-content-container.curriculum-landing #dont_know_where_toget_started~div>ul>li {
    align-items: center;
    background-color: var(--curriculum-bg-large-color);
    border-radius: var(--elem-radius);
    color: var(--text-secondary);
    display: grid;
    gap: 1rem;
    grid-template-areas: "i h" "p p" "c c";
    grid-template-columns: 3rem 1fr;
    grid-template-rows: 4rem minmax(7rem, max-content) max-content;
    height: max-content;
    padding: 1rem .5rem;
    scroll-snap-align: center;
    width: 80vw
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing #dont_know_where_toget_started~div>ul>li {
        align-items: start;
        background-color: initial;
        gap: 1rem 2rem;
        grid-template-areas: "i h" "i p" "i c";
        grid-template-columns: auto auto;
        grid-template-rows: 4rem auto max-content;
        height: auto;
        padding: 0;
        width: auto
    }
}

.curriculum-content-container.curriculum-landing #dont_know_where_toget_started~div>ul>li:before {
    align-self: start;
    display: inline-block;
    height: 3rem;
    width: 3rem
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing #dont_know_where_toget_started~div>ul>li:before {
        grid-area: i;
        height: 5rem;
        width: 5rem
    }
}

.curriculum-content-container.curriculum-landing #dont_know_where_toget_started~div>ul>li:first-child:before {
    content: var(--curriculum-landing-started-beginner)
}

.curriculum-content-container.curriculum-landing #dont_know_where_toget_started~div>ul>li:nth-child(2):before {
    content: var(--curriculum-landing-started-advanced)
}

.curriculum-content-container.curriculum-landing #dont_know_where_toget_started~div>ul>li:nth-child(3):before {
    content: var(--curriculum-landing-started-employment)
}

.curriculum-content-container.curriculum-landing #dont_know_where_toget_started~div>ul>li:nth-child(4):before {
    content: var(--curriculum-landing-started-educator)
}

.curriculum-content-container.curriculum-landing #dont_know_where_toget_started~div>ul>li h3 {
    color: var(--text-primary);
    font-weight: var(--font-body-strong-weight);
    margin-top: 0
}

.curriculum-content-container.curriculum-landing #dont_know_where_toget_started~div>ul>li em {
    align-self: start;
    grid-area: p
}

.curriculum-content-container.curriculum-landing #dont_know_where_toget_started~div>ul>li a {
    --button-bg: var(--button-primary-default);
    --button-bg-hover: var(--button-primary-hover);
    --button-bg-active: var(--button-primary-active);
    --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-radius: var(--elem-radius, 0.25rem);
    align-items: center;
    background-color: var(--button-bg);
    border: 1px solid var(--button-border-color);
    border-radius: var(--button-radius);
    color: var(--button-color);
    cursor: pointer;
    display: flex;
    font: var(--button-font);
    gap: .25rem;
    grid-area: c;
    justify-content: center;
    justify-self: center;
    min-height: var(--button-height);
    padding: .5rem;
    padding-left: var(--button-padding);
    padding-right: var(--button-padding);
    position: relative;
    text-align: center;
    text-decoration: none;
    width: fit-content
}

@media(min-width:769px) {
    .curriculum-content-container.curriculum-landing #dont_know_where_toget_started~div>ul>li a {
        justify-self: start
    }
}

.curriculum-content-container.curriculum-landing #dont_know_where_toget_started~div>ul>li a:hover {
    background-color: var(--button-bg-hover, var(--button-bg))
}

.curriculum-partner-banner-container .partner-banner {
    background-color: var(--curriculum-bg-color-partner);
    background-image: var(--curriculum-bg-image-partner);
    background-repeat: no-repeat;
    border: 1px solid var(--curriculum-border-color);
    box-shadow: var(--curriculum-shadow);
    display: grid;
    grid-template-areas: "h2" "image" "p" "a";
    margin: 1rem auto
}

@media screen and (min-width:769px) {
    .curriculum-partner-banner-container .partner-banner {
        grid-template-areas: "copy image";
        grid-template-columns: 2fr minmax(24rem, 1fr)
    }
}

.curriculum-partner-banner-container .partner-banner>picture {
    align-self: end;
    grid-area: image;
    height: max-content;
    justify-self: center;
    max-width: max-content;
    width: 90%
}

@media screen and (min-width:769px) {
    .curriculum-partner-banner-container .partner-banner>picture {
        justify-self: end;
        width: 100%
    }
}

.curriculum-partner-banner-container .partner-banner>section {
    display: contents;
    grid-area: copy;
    padding: 2rem 4rem
}

@media screen and (min-width:769px) {
    .curriculum-partner-banner-container .partner-banner>section {
        display: block
    }
}

.curriculum-partner-banner-container .partner-banner>section>h2 {
    grid-area: h2;
    margin: 1rem 0 2rem;
    text-align: center
}

@media screen and (min-width:769px) {
    .curriculum-partner-banner-container .partner-banner>section>h2 {
        margin: 0 0 1rem;
        text-align: left
    }
}

.curriculum-partner-banner-container .partner-banner>section>h2>a {
    color: var(--curriculum-category-color);
    display: inline-block;
    min-width: max-content
}

.curriculum-partner-banner-container .partner-banner>section>h2>a:visited:not([href^="#"]) {
    color: var(--curriculum-category-color)
}

.curriculum-partner-banner-container .partner-banner>section>h2>a:before {
    content: url(/static/media/curriculum-partner-underline-small.7d80586dcbd51a5eadbf.svg);
    position: absolute;
    transform: translate3d(-.1em, .4em, 0)
}

@media screen and (min-width:769px) {
    .curriculum-partner-banner-container .partner-banner>section>h2>a:before {
        content: url(/static/media/curriculum-partner-underline-large.856cf9eb42ce8afd83fb.svg)
    }
}

.curriculum-partner-banner-container .partner-banner>section>h2>a:focus,
.curriculum-partner-banner-container .partner-banner>section>h2>a:hover,
.curriculum-partner-banner-container .partner-banner>section>h2>a:visited {
    text-decoration: none
}

.curriculum-partner-banner-container .partner-banner>section>h2>a:focus:before,
.curriculum-partner-banner-container .partner-banner>section>h2>a:hover:before,
.curriculum-partner-banner-container .partner-banner>section>h2>a:visited:before {
    content: none
}

.curriculum-partner-banner-container .partner-banner>section>h2>a:after {
    background-color: var(--curriculum-category-color);
    height: .625em;
    width: .625em
}

.curriculum-partner-banner-container .partner-banner>section>p {
    grid-area: p;
    margin: 1.5rem 1rem
}

@media screen and (min-width:769px) {
    .curriculum-partner-banner-container .partner-banner>section>p {
        margin: 1rem 0 1.5rem
    }
}

.curriculum-partner-banner-container .partner-banner>section>a {
    color: var(--text-primary);
    grid-area: a;
    margin: 1rem
}

@media screen and (min-width:769px) {
    .curriculum-partner-banner-container .partner-banner>section>a {
        margin: 1rem 0 0
    }
}

.scrim {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    max-width: 24rem;
    width: 100%
}

.scrim dialog {
    display: contents
}

.scrim dialog>.scrim-with-border {
    background-image: var(--curriculum-scrim-bg);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    height: 16rem;
    width: 100%
}

.scrim dialog>.scrim-with-border>.scrim-inner {
    --inner-width: 22rem;
    --inner-max-width: calc(100vw - var(--gutter)*2);
    align-items: start;
    background-color: #000;
    display: flex;
    flex-direction: column;
    max-width: var(--inner-max-width);
    width: var(--inner-width)
}

.scrim dialog>.scrim-with-border>.scrim-inner .partner-header {
    align-items: center;
    display: flex;
    flex-flow: row;
    gap: .25rem;
    justify-content: end;
    margin: 0;
    padding: 0 .5rem;
    width: 100%
}

.scrim dialog>.scrim-with-border>.scrim-inner .partner-header a:after {
    background-color: #fff
}

.scrim dialog>.scrim-with-border>.scrim-inner .partner-header a:hover:after {
    background-color: var(--curriculum-color)
}

.scrim dialog>.scrim-with-border>.scrim-inner .partner-header button {
    color: #fff;
    cursor: pointer
}

.scrim dialog>.scrim-with-border>.scrim-inner .partner-header button>div {
    background-color: hsla(0, 0%, 100%, .867);
    height: 1rem;
    width: 1rem
}

.scrim dialog>.scrim-with-border>.scrim-inner .partner-header button>div.fullscreen-button.enter {
    -webkit-mask-image: url(/static/media/fullscreen-enter.33b5e84b66d943eb1541.svg);
    mask-image: url(/static/media/fullscreen-enter.33b5e84b66d943eb1541.svg)
}

.scrim dialog>.scrim-with-border>.scrim-inner .partner-header button>div.fullscreen-button.exit {
    -webkit-mask-image: url(/static/media/cancel.ff1ee2551e18f9c9c8d3.svg);
    mask-image: url(/static/media/cancel.ff1ee2551e18f9c9c8d3.svg)
}

.scrim dialog>.scrim-with-border>.scrim-inner .partner-header button>div:hover {
    background-color: var(--curriculum-color)
}

.scrim dialog>.scrim-with-border>.scrim-inner .partner-header button:focus-visible {
    outline-color: var(--accent-primary);
    outline-offset: 1px;
    outline-style: auto
}

.scrim dialog>.scrim-with-border>.scrim-inner .partner-header span {
    color: #fff;
    font-size: var(--type-tiny-font-size);
    margin-right: auto
}

.scrim dialog>.scrim-with-border>.scrim-inner .fullscreen-overlay.enter {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 7rem;
    cursor: pointer;
    height: 12.5rem;
    margin-top: 1.75rem;
    max-width: var(--inner-max-width);
    position: absolute;
    width: var(--inner-width)
}

.scrim dialog>.scrim-with-border>.scrim-inner .fullscreen-overlay.enter>svg {
    color: #fff;
    height: 7rem;
    width: 7rem
}

.scrim dialog>.scrim-with-border>.scrim-inner .fullscreen-overlay.enter:hover>svg {
    color: var(--curriculum-color)
}

.scrim dialog>.scrim-with-border>.scrim-inner .fullscreen-overlay.enter:focus-visible>svg {
    color: var(--accent-primary)
}

.scrim dialog>.scrim-with-border>.scrim-inner .fullscreen-overlay.exit {
    display: none
}

.scrim dialog>.scrim-with-border>.scrim-inner iframe,
.scrim dialog>.scrim-with-border>.scrim-inner img {
    border: 1px solid #000;
    height: 12.5rem;
    width: 100%
}

.scrim dialog[open] {
    background-color: #0009;
    height: 90vh;
    width: 90vw
}

.scrim dialog[open] .scrim-with-border {
    background-image: none;
    height: 100%;
    width: 100%
}

.scrim dialog[open] .scrim-with-border .scrim-inner,
.scrim dialog[open] .scrim-with-border .scrim-inner iframe,
.scrim dialog[open] .scrim-with-border .scrim-inner img {
    height: 100%;
    width: 100%
}

.scrim p {
    margin: 0;
    padding: 1rem 0
}

li p {
    margin-bottom: 0;
}


h2{
    margin-top: 2rem !important;
}

/*# sourceMappingURL=main.fe129008.css.map*/