@mdn/fred 0.0.2 → 0.0.4

package/dist/legacy/index.95b67ebc43207ce9.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.95b67ebc43207ce9.css","sources":["webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/atoms/icon/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/atoms/toast/index.scss","webpack://@mdn/fred/./node_modules/@mdn/minimalist/sass/mixins/_animation.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/atoms/loading/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/atoms/page-content/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/page-not-found/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/molecules/offline-status-bar/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/settings/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/atoms/spinner/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/atoms/switch/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/document/organisms/sidebar/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/document/organisms/toc/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/organisms/placement/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/document/organisms/sidebar/filter.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/plus/plus-docs/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/molecules/breadcrumbs/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/molecules/submenu/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/organisms/article-actions/language-menu/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/molecules/dropdown/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/atoms/thumbs/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/organisms/article-actions/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/atoms/modal/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/atoms/signup-link/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/atoms/login-link/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/organisms/article-actions/bookmark-menu/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/organisms/article-actions-container/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/plus/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/molecules/mandala/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/plus/offer-overview/offer-hero/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/plus/offer-overview/offer-overview-feature/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/plus/offer-overview/offer-overview-subscribe/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/_vars.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/base/_reset.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/base/_themes.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/molecules/notecards/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/molecules/pagination/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/atoms/button/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/atoms/form/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/app.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/base/_mdn.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/document/index.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/molecules/grids/_document-page.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/molecules/grids/_standard-page.scss","webpack://@mdn/fred/./node_modules/@mdn/yari/client/src/ui/base/_typography.scss"],"sourcesContent":["$icons:\n  \"add-filled\", \"add\", \"altname\", \"bell\", \"bell-filled\", \"bell-ring\", \"bluesky\",\n  \"bookmark-filled\", \"bookmark\", \"cancel\", \"chatgpt\", \"checkmark\", \"chevron\",\n  \"chrome\", \"critical\", \"curriculum-next\", \"curriculum-prev\", \"deno\",\n  \"deprecated\", \"desktop\", \"disabled\", \"edge\", \"edit\", \"edit-filled\",\n  \"ellipses\", \"experimental\", \"external\", \"eye-filled\", \"eye\", \"feed\", \"filter\",\n  \"footnote\", \"github-mark-small\", \"ie\", \"information\", \"highlight\", \"history\",\n  \"language\", \"mastodon\", \"menu-filled\", \"menu\", \"mobile\", \"more\", \"theme-dark\",\n  \"new-topic\", \"next\", \"no\", \"nodejs\", \"nonstandard\", \"note-info\",\n  \"note-warning\", \"note-deprecated\", \"opera\", \"padlock\", \"partial\", \"play\",\n  \"prefix\", \"preview\", \"previous\", \"question-mark\", \"queue\", \"queued\", \"quote\",\n  \"return\", \"safari\", \"samsunginternet\", \"search\", \"send\", \"server\", \"sidebar\",\n  \"simple-firefox\", \"small-arrow\", \"theme-light\", \"star-filled\", \"star\",\n  \"theme-os-default\", \"thumbs-down\", \"thumbs-up\", \"trash\", \"trash-filled\",\n  \"twitter-x\", \"unknown\", \"warning\", \"webview\", \"yes\", \"yes-circle\";\n\n.icon {\n  --size: var(--icon-size, 1rem);\n  background-color: var(--icon-primary);\n  display: inline-block;\n  flex-shrink: 0;\n  height: var(--size);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  vertical-align: middle;\n  width: var(--size);\n\n  @each $name in $icons {\n    &.icon-#{$name} {\n      mask-image: url(\"../../../assets/icons/\" + $name + \".svg\");\n    }\n  }\n}\n\n// The icon class is applied directly to SVGs sometimes. This\n// override un-breaks those.\nsvg.icon {\n  background: transparent;\n  color: var(--icon-primary);\n}\n\n.icons-highlighted {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n\n  > span {\n    height: var(--icon-size);\n    line-height: 0;\n    width: var(--icon-size);\n\n    &.icons-icon-wrapper {\n      margin-top: -0.1rem;\n    }\n  }\n}\n","@use \"../../vars.scss\" as *;\n\n.toast {\n  --toast-bg: var(--text-primary);\n  --toast-color: var(--background-primary);\n  background: var(--toast-bg);\n  border-radius: var(--elem-radius);\n  bottom: 1rem;\n  box-shadow: var(--shadow-02);\n  display: flex;\n  gap: 0.5rem;\n  left: 50%;\n  max-width: 680px;\n  padding: 1rem 1rem 1rem 2rem;\n\n  position: fixed;\n  transform: translate(-50%, 0);\n  width: 90vw;\n\n  &-content {\n    color: var(--toast-color);\n    margin-right: auto;\n  }\n\n  .button.action {\n    --button-color: var(--toast-color);\n    white-space: nowrap;\n\n    &:hover {\n      --button-bg: rgba(58, 57, 68, 0.3);\n      --button-border-color: transparent;\n    }\n  }\n\n  &.is-important {\n    --toast-bg: var(--accent-secondary);\n    --toast-color: #fff;\n  }\n\n  &-verbose-text {\n    display: none;\n  }\n\n  @media (min-width: $screen-md) {\n    &-verbose-text {\n      display: inline;\n    }\n\n    &-short-text {\n      display: none;\n    }\n  }\n}\n","@mixin slow-pulse() {\n  animation: 2s infinite normal slow-pulse;\n}\n\n@mixin fade-in() {\n  animation: fade-in 0.5s ease-out;\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes slow-pulse {\n  0% {\n    opacity: 0;\n  }\n\n  50% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 0;\n  }\n}\n","@use \"~@mdn/minimalist/sass/mixins/animation\" as *;\n\n.generic-loading {\n  align-items: center;\n  /* add short delay so the animation starts from white instead of dark gray */\n  animation-delay: 1s;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  @include slow-pulse();\n}\n",".main-content.standalone {\n  margin: 0 auto;\n  max-width: var(--max-width);\n  width: 100%;\n}\n","@use \"sass:math\";\n\n.page-not-found {\n  .fallback-document {\n    .fallback-link {\n      font-size: 1rem;\n    }\n  }\n}\n",".offline-status-bar {\n  background-color: var(--accent-primary-engage); // rgba(24, 112, 240, 0.1)\n  color: var(--text-primary);\n  display: none;\n\n  &.is-offline,\n  &.is-online {\n    display: block;\n    padding: 1rem;\n    text-align: center;\n  }\n\n  &.is-online {\n    animation: fade-out 3s ease-out 0.5s;\n  }\n}\n\n@keyframes fade-out {\n  0% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 0;\n  }\n}\n","@use \"../ui/vars\" as *;\n\narticle.settings {\n  display: block;\n  margin: auto;\n  max-width: 60em;\n  padding: 1rem;\n  width: min(90vw, 40em);\n\n  h3 {\n    margin-top: 0;\n  }\n\n  section {\n    padding: 1rem;\n\n    &.field-group,\n    &.setting-row {\n      padding: 0;\n    }\n  }\n\n  .field-group {\n    ul {\n      padding: 0;\n\n      li {\n        display: grid;\n        gap: 0 1rem;\n        grid-template-columns: 1fr 5em;\n\n        section {\n          margin: 0.125rem 0;\n\n          &:hover,\n          &:target {\n            background-color: var(--background-information);\n            border-radius: 0.25rem;\n          }\n        }\n\n        .setting-row {\n          align-items: center;\n          display: flex;\n          gap: 1rem;\n          justify-content: space-between;\n        }\n\n        p {\n          margin: 0 0 1rem;\n\n          &:first-child {\n            margin-top: 0;\n          }\n\n          &:last-child {\n            margin-bottom: 0;\n          }\n        }\n\n        span {\n          font-size: 0.8rem;\n          grid-column: 1/2;\n          line-height: 1.2em;\n          padding-top: 0.3em;\n        }\n\n        .loading,\n        .switch {\n          align-self: center;\n          grid-column: 2/3;\n          grid-row: 1/3;\n          justify-self: end;\n        }\n\n        button,\n        .manage {\n          align-self: center;\n          background-color: var(--background-primary);\n          border: 1px solid var(--text-primary);\n          border-radius: var(--elem-radius);\n          color: var(--text-link);\n          font-size: 0.8rem;\n          grid-column: 2/3;\n          grid-row: 1/3;\n          height: max-content;\n          justify-self: end;\n          min-width: 10rem;\n          padding: 0.5rem 1rem;\n          text-align: center;\n          width: max-content;\n\n          &:hover {\n            background-color: var(--background-secondary);\n          }\n        }\n\n        button[disabled] {\n          background-color: var(--background-secondary);\n          border: 1px solid var(--text-secondary);\n          color: var(--text-secondary);\n        }\n      }\n    }\n  }\n}\n",".spinner {\n  display: inline-block;\n  height: 1rem;\n  position: relative;\n  width: 1rem;\n\n  div {\n    animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n    border: 0.1rem solid var(--text-primary);\n    border-color: var(--text-primary) transparent transparent transparent;\n    border-radius: 50%;\n    box-sizing: border-box;\n    display: block;\n    height: 0.8rem;\n    margin: 0.1rem;\n    position: absolute;\n    width: 0.8rem;\n  }\n\n  div:nth-child(1) {\n    animation-delay: -0.45s;\n  }\n\n  div:nth-child(2) {\n    animation-delay: -0.3s;\n  }\n\n  div:nth-child(3) {\n    animation-delay: -0.15s;\n  }\n}\n@keyframes spinner {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n",".switch {\n  align-items: center;\n  display: inline-flex;\n  position: relative;\n\n  input {\n    height: 0;\n    margin: 0;\n    opacity: 0;\n    width: 3em;\n\n    &:checked + .slider {\n      background-color: var(--text-link);\n\n      &:before {\n        left: 53.25%;\n        right: 3.25%;\n      }\n    }\n\n    &:focus-visible + .slider {\n      outline-color: var(--accent-primary);\n      outline-offset: 1px;\n      outline-style: auto;\n    }\n  }\n\n  .slider {\n    background-color: var(--text-secondary);\n    border-radius: 1.5em;\n    cursor: pointer;\n    height: 1.5em;\n    position: absolute;\n    transition: 0.4s;\n    width: 3em;\n\n    &:before {\n      background-color: var(--background-primary);\n      border-radius: 50%;\n      bottom: 7.5%;\n      content: \"\";\n      left: 3.25%;\n      position: absolute;\n      right: 53.25%;\n      top: 7.5%;\n      transition: 0.4s;\n    }\n  }\n\n  .label {\n    margin-left: 0.5em;\n  }\n}\n","@use \"../../../ui/vars\" as *;\n\n.sidebar {\n  color: var(--text-secondary);\n\n  .backdrop {\n    display: none;\n  }\n\n  &-heading {\n    color: var(--text-primary);\n    font: var(--type-heading-h5);\n    letter-spacing: 1.5px;\n    margin: 0;\n  }\n\n  em {\n    background-color: var(--background-toc-active);\n    border-bottom-right-radius: 0.25rem;\n    border-left: 2px solid var(--category-color);\n    border-top-right-radius: 0.25rem;\n    display: inline-block;\n    font-style: normal;\n    font-variation-settings: normal;\n    font-weight: 600;\n    hyphens: auto;\n    padding: 0.25rem 0.5rem;\n  }\n\n  a {\n    color: var(--text-secondary);\n    display: inline-block;\n    hyphens: auto;\n    padding: 0.25rem;\n\n    &:hover,\n    &:focus {\n      text-decoration: underline;\n    }\n  }\n\n  li.section {\n    display: flex;\n    font-size: var(--type-base-font-size-rem);\n    font-weight: var(--font-body-strong-weight);\n    letter-spacing: 0.02rem;\n    margin-top: 1.5rem;\n\n    &.no-link {\n      padding: 0.25rem;\n    }\n  }\n\n  li:first-of-type strong {\n    margin-top: unset;\n  }\n\n  ol {\n    font-size: var(--type-smaller-font-size);\n\n    ol,\n    ul {\n      padding-left: 0.5rem;\n    }\n\n    li {\n      .icon {\n        margin-right: 0.01em;\n      }\n\n      &.no-bullet {\n        display: block;\n        font-weight: var(--font-body-strong-weight);\n        list-style-type: none;\n      }\n    }\n  }\n\n  .sidebar-actions {\n    height: 0;\n    padding-bottom: 4rem;\n    position: sticky;\n    top: 0;\n    z-index: var(--z-index-main-header);\n\n    ~ .sidebar-inner-nav {\n      margin-top: 0.5rem;\n    }\n\n    @media (max-width: $screen-md) {\n      height: unset;\n      margin-top: unset;\n      padding-bottom: unset;\n      position: unset;\n      top: unset;\n\n      ~ .sidebar-inner-nav {\n        margin-top: unset;\n      }\n    }\n  }\n\n  /* This is for sidebars where there is no sub-heading\n   * for example: https://developer-mozilla.org/en-US/docs/Web/HTML/Element/progress\n   */\n  .sidebar-heading ~ ol,\n  .sidebar-heading ~ div > ol {\n    margin-top: 1rem;\n  }\n\n  summary,\n  li {\n    margin-bottom: 0.5rem;\n  }\n\n  summary {\n    cursor: pointer;\n    font-size: var(--type-smaller-font-size);\n  }\n\n  code {\n    background-color: initial;\n    border-radius: var(--elem-radius);\n    font-family: var(--font-code);\n    font-size: var(--type-smaller-font-size);\n    line-height: 1.2;\n    padding: 0.125rem;\n    white-space: normal;\n    word-wrap: break-word;\n  }\n\n  details {\n    margin: 0.75rem 0;\n\n    ol {\n      padding-left: 0.75rem;\n    }\n  }\n\n  .icon {\n    align-self: center;\n    background-size: 14px;\n    height: 14px;\n    margin-right: -0.25rem;\n    mask-size: 14px;\n    width: 14px;\n  }\n\n  /* icons in sidebars */\n  .icon-experimental,\n  .icon-nonstandard {\n    background-color: var(--icon-information);\n  }\n\n  .icon-deprecated {\n    background-color: var(--icon-critical);\n  }\n\n  // apply drawer styles only to the sizes that need them.\n  @media (max-width: #{$screen-md - 1}) {\n    height: 100vh;\n    left: 0;\n    max-height: 100vh;\n    position: fixed;\n    right: 0;\n    top: var(--offset);\n    transform: translateX(-100%);\n\n    .sidebar-inner {\n      background: var(--background-primary);\n      border-right: 1px solid var(--border-primary);\n      display: grid;\n      height: var(--max-height);\n      max-height: var(--max-height);\n      max-width: 20rem;\n      overflow: hidden; //animations look janky if scrollbars are present\n      overflow: auto;\n      padding: 1rem;\n      position: relative;\n      transform: translateX(-100%);\n      transition: 0.2s linear transform;\n      width: 80vw;\n      will-change: transform;\n\n      .sidebar-inner-nav {\n        display: contents;\n        mask-image: linear-gradient(\n          to bottom,\n          rgb(0, 0, 0) 0% calc(100% - 3rem),\n          rgba(0, 0, 0, 0) 100%\n        );\n        padding-bottom: 3rem;\n      }\n\n      @media (min-height: $screen-height-place-limit) {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n\n        .sidebar-inner-nav {\n          display: block;\n          overflow: auto;\n        }\n      }\n\n      .place {\n        align-self: center;\n        grid-row: 2/3;\n        justify-self: center;\n        margin-bottom: 0;\n      }\n    }\n\n    .backdrop {\n      background: rgba(0, 0, 0, 0.3);\n      border-radius: 0;\n      bottom: 0;\n      cursor: default;\n\n      display: flex;\n      left: 0;\n      opacity: 0;\n      position: fixed;\n      right: 0;\n      top: 0;\n      transition: opacity 0.2s linear;\n      width: 100%;\n      will-change: opacity;\n    }\n\n    &.is-animating {\n      transform: translateX(0);\n    }\n\n    &.is-expanded {\n      transform: translateX(0); // no transition on this one, just show it.\n\n      .sidebar-inner {\n        transform: translateX(0);\n      }\n\n      .backdrop {\n        opacity: 1;\n      }\n    }\n  }\n\n  @media (min-width: $screen-md) {\n    .place {\n      display: none;\n    }\n  }\n  @media (min-width: $screen-md) {\n    display: flex;\n    position: relative;\n  }\n  @media (min-width: $screen-lg), (min-height: $screen-height-place-limit) {\n    display: block;\n    overflow: auto;\n  }\n  @media (min-width: $screen-xl) {\n    max-height: var(--max-height);\n    position: sticky;\n    top: var(--offset);\n  }\n}\n","@use \"sass:math\";\n\n@use \"../../../ui/vars\" as *;\n\n.document-toc {\n  margin-bottom: 2rem;\n  padding: 0;\n\n  @media (max-width: $screen-sm) {\n    padding: 0 1rem;\n  }\n\n  // double classes to override specificity from root styles\n  &-heading.document-toc-heading {\n    font: var(--type-heading-h5);\n    letter-spacing: 1.5px;\n    margin: 0 0 1rem;\n  }\n\n  // double classes to override specificity from root styles\n  &-list.document-toc-list {\n    font-size: var(--type-smaller-font-size);\n    list-style: none;\n    padding-left: 0;\n\n    li {\n      margin: 0;\n    }\n  }\n\n  // double classes to override specificity from root styles\n  &-link.document-toc-link:not(.button) {\n    border-left: 2px solid var(--border-secondary);\n    color: var(--text-secondary);\n    display: inline-block;\n    padding: 0.5rem 1rem;\n    text-decoration: none;\n\n    &:hover {\n      color: var(--text-link);\n    }\n\n    &[aria-current]:not([aria-current=\"\"]):not([aria-current=\"false\"]) {\n      background-color: var(--background-toc-active);\n      border-bottom-right-radius: 0.25rem;\n      border-left: 2px solid var(--category-color);\n      border-top-right-radius: 0.25rem;\n      color: var(--text-primary);\n      font-weight: 600;\n    }\n  }\n\n  &-item-sub > .document-toc-link:not(.button) {\n    padding-left: 2rem;\n  }\n\n  .show-toc {\n    display: block;\n  }\n}\n","@use \"../../vars\" as *;\n\nsection.place {\n  display: flex;\n  margin: 1rem 0;\n\n  a:not(.button),\n  a {\n    color: var(--text-primary);\n    text-decoration: none;\n  }\n\n  a.pong-note {\n    background-color: #f9f9fbd0;\n    border: 1px solid #313131;\n    border-radius: 0.25rem;\n    color: #313131;\n    font-size: 0.625rem;\n    opacity: 0.85;\n    padding: 0 0.25rem;\n    text-decoration: underline;\n    text-transform: uppercase;\n    width: max-content;\n\n    &:focus,\n    &:hover {\n      opacity: unset;\n      text-decoration: none;\n    }\n  }\n\n  .pong-box2 {\n    --place-new-side-background-light: #111;\n    --place-new-side-color-light: #fff;\n\n    --place-new-side-background-dark: #111;\n    --place-new-side-color-dark: #fff;\n\n    --place-new-side-background: var(--place-new-side-background-light);\n    --place-new-side-color: var(--place-new-side-color-light);\n\n    --border-radius: 0.5rem;\n    border: 1px solid var(--border-primary);\n    border-radius: var(--border-radius);\n    height: 100%;\n    margin: 0;\n    min-height: 20rem;\n    overflow: hidden;\n    position: relative;\n    width: 11rem;\n\n    @media (prefers-color-scheme: dark) {\n      --place-new-side-background: var(--place-new-side-background-dark);\n      --place-new-side-color: var(--place-new-side-color-dark);\n    }\n\n    .pong-note {\n      margin: 0.25rem;\n      position: absolute;\n      right: 0;\n      top: 0;\n\n      &:hover {\n        opacity: unset;\n        text-decoration: none;\n      }\n    }\n\n    .pong {\n      height: 100%;\n      padding: 0;\n      width: 100%;\n\n      > img {\n        height: auto;\n        width: 100%;\n      }\n\n      > div.content {\n        background: linear-gradient(\n          to top,\n          var(--place-new-side-background) 9rem,\n          transparent 12rem,\n          transparent\n        );\n        border-radius: var(--border-radius);\n        color: var(--place-new-side-color);\n        display: flex;\n        flex-direction: column;\n        gap: 0.25rem;\n        height: 100%;\n        justify-content: end;\n        position: absolute;\n        top: 0;\n        width: 100%;\n\n        strong {\n          font-size: 0.8875rem;\n          line-height: 1.25;\n          padding: 0 1rem;\n        }\n\n        span {\n          font-size: 0.75rem;\n          line-height: 1.25;\n          padding: 0 1rem;\n        }\n\n        .pong-cta {\n          --color: var(--place-new-side-color);\n          --icon-primary: var(--color);\n          background-color: #fff1;\n          border: solid 2px;\n          border-radius: 2rem;\n          color: var(--color);\n          font-size: 0.75rem;\n          font-weight: 600;\n          margin: 0.5rem auto 1rem 1rem;\n          padding: 0.5em 1em;\n          transition: all 0.3s ease-in-out;\n\n          &::after {\n            transition: all 0.3s ease-in-out;\n          }\n\n          &:hover {\n            --color: var(--place-new-side-background);\n            background-color: var(--place-new-side-color);\n          }\n        }\n      }\n    }\n  }\n\n  .pong-box {\n    background-color: var(--background-secondary);\n    border: 1px solid var(--border-primary);\n    margin: 0 0 0.125rem;\n    padding: 0;\n    width: 10rem;\n\n    .pong {\n      align-items: center;\n      display: flex;\n      flex-direction: column;\n      padding: 0.825rem;\n\n      img {\n        margin: 0;\n        max-height: 6.25rem;\n        width: 8.125rem;\n      }\n\n      span {\n        color: var(--text-secondary);\n        font-size: 0.75rem;\n        padding: 0.5rem;\n      }\n    }\n  }\n\n  .no-pong {\n    color: var(--text-secondary);\n    font-size: 0.6rem;\n    margin-bottom: 0.5rem;\n    max-width: 12rem;\n    padding: 0;\n    width: 100%;\n\n    &:focus,\n    &:hover {\n      opacity: unset;\n      text-decoration: none;\n    }\n  }\n\n  &.side {\n    flex-direction: column;\n    height: fit-content;\n    max-width: 12rem;\n    min-height: 20rem;\n  }\n\n  &.new-side {\n    height: fit-content;\n    min-height: 22rem;\n  }\n\n  &.top {\n    align-items: center;\n    display: grid;\n    font-size: 0.625rem;\n\n    grid-template-areas: \"pong cta\" \"no note\";\n    height: var(--top-banner-height);\n    margin: 0 auto;\n    width: 100%;\n\n    @media (min-width: $screen-md) {\n      grid-template-areas: \"pong cta note\" \"pong cta no\";\n      grid-template-columns: fit-content(100%) auto fit-content(100%);\n    }\n\n    .pong-box {\n      border: none;\n      display: contents;\n      width: 100%;\n\n      .pong {\n        color: var(--place-top-color);\n        flex-direction: row;\n        grid-area: pong;\n        padding: 0.125rem;\n        text-decoration: none;\n\n        img {\n          height: var(--top-banner-inner-height);\n          max-height: var(--top-banner-inner-height);\n          width: auto;\n        }\n\n        span {\n          color: var(--place-top-color);\n          max-height: var(--top-banner-inner-height);\n          overflow: auto;\n          padding: 0 1rem;\n        }\n      }\n\n      .pong-cta {\n        background-color: var(--place-top-cta-background);\n        border-radius: var(--elem-radius);\n        color: var(--place-top-cta-color);\n        font-size: var(--type-smaller-font-size);\n        grid-area: cta;\n        height: fit-content;\n        margin-right: auto;\n        padding: 0.25rem 1rem;\n        text-align: center;\n      }\n\n      .pong-note {\n        grid-area: note;\n        margin: 0.25rem 0 auto auto;\n      }\n    }\n\n    .no-pong {\n      color: var(--place-top-color);\n      grid-area: no;\n      margin: auto 0 0 2rem;\n      width: initial;\n    }\n  }\n\n  html[data-nop] & {\n    display: none;\n  }\n}\n\n.dark section.place .pong-box2 {\n  --place-new-side-background: var(--place-new-side-background-dark);\n  --place-new-side-color: var(--place-new-side-color-dark);\n}\n\nsection.place.hp-main,\nsection.place.bottom-banner {\n  background-color: var(--place-hp-main-background);\n  display: grid;\n  grid-template-areas: \"left place right\";\n  grid-template-columns: auto min(var(--place-banner-width), 100vw) auto;\n  margin: 0;\n  width: 100%;\n\n  a.pong {\n    display: flex;\n    grid-area: place;\n    grid-column: 1/4;\n    justify-content: center;\n\n    img {\n      height: auto;\n    }\n  }\n\n  .pong-note {\n    grid-area: place;\n    grid-column: 2;\n    margin: 0.5rem 0.5rem auto auto;\n  }\n}\n\n.top-banner {\n  --place-top-background-light: var(--background-secondary);\n  --place-top-color-light: var(--text-primary);\n  --place-top-cta-background-light: var(--text-primary);\n  --place-top-cta-color-light: var(--background-secondary);\n\n  --place-top-background-dark: var(--background-secondary);\n  --place-top-color-dark: var(--text-primary);\n  --place-top-cta-background-dark: var(--text-primary);\n  --place-top-cta-color-dark: var(--background-secondary);\n\n  --place-top-background: var(--place-top-background-light);\n  --place-top-color: var(--place-top-color-light);\n  --place-top-cta-background: var(--place-top-cta-background-light);\n  --place-top-cta-color: var(--place-top-cta-color-light);\n\n  background-color: var(--place-top-background);\n  border-bottom: 1px solid var(--border-primary);\n  height: var(--top-banner-height);\n\n  @media (prefers-color-scheme: dark) {\n    --place-top-background: var(--place-top-background-dark);\n    --place-top-color: var(--place-top-color-dark);\n    --place-top-cta-background: var(--place-top-cta-background-dark);\n    --place-top-cta-color: var(--place-top-cta-color-dark);\n  }\n\n  &.fallback {\n    position: initial;\n  }\n\n  @media (max-width: #{$screen-md - 1}) {\n    display: none;\n  }\n\n  .fallback-copy {\n    font-size: 1rem;\n    grid-column: 1/4;\n    line-height: var(--top-banner-height);\n    margin: 0 auto;\n\n    a:not(.button) {\n      color: var(--apis-accent-color);\n\n      &:hover,\n      &:focus {\n        text-decoration: underline;\n      }\n    }\n  }\n\n  html[data-nop] & {\n    display: none;\n  }\n}\n\ndiv.empty-place {\n  &.bottom-banner {\n    height: 152px;\n    position: absolute;\n    width: 1px;\n  }\n}\n\n.dark .top-banner {\n  --place-top-background: var(--place-top-background-dark);\n  --place-top-color: var(--place-top-color-dark);\n  --place-top-cta-background: var(--place-top-cta-background-dark);\n  --place-top-cta-color: var(--place-top-cta-color-dark);\n}\n\n.bottom-banner-container {\n  background-color: var(\n    --place-bottom-banner-background,\n    var(--background-primary)\n  );\n  color: var(--place-bottom-banner-color, var(--text-primary));\n  margin: 0;\n  width: 100%;\n\n  > section.place.bottom-banner {\n    column-gap: 3rem;\n    display: grid;\n    grid-template-areas:\n      \"nope pong note\"\n      \"nope pong no\";\n    grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 15rem);\n    margin: 0 auto;\n    max-width: var(--max-width);\n    padding: 0 1rem;\n\n    .pong {\n      grid-area: pong;\n      justify-self: center;\n\n      img {\n        height: auto;\n      }\n    }\n\n    .pong-note {\n      color: var(--place-bottom-banner-color, var(--text-primary));\n      font-size: 0.625rem;\n      grid-area: note;\n      margin-top: 0.5rem;\n    }\n\n    .no-pong {\n      color: var(--place-bottom-banner-color, var(--text-primary));\n      font-size: 0.625rem;\n      grid-area: no;\n      margin-top: auto;\n    }\n\n    @media (max-width: $screen-xl) {\n      grid-template-areas:\n        \"pong note\"\n        \"pong no\";\n      grid-template-columns: auto max-content;\n      grid-template-rows: auto 2rem;\n    }\n\n    @media (max-width: $screen-lg) {\n      grid-template-areas:\n        \"pong pong\"\n        \"note no\";\n      grid-template-columns: 1fr 1fr;\n      grid-template-rows: auto 2rem;\n\n      .no-pong {\n        justify-self: end;\n        width: fit-content;\n      }\n    }\n  }\n}\n\n@media (min-width: 25rem) {\n  .place.horizontal {\n    align-self: flex-end;\n    max-width: 20rem;\n    min-height: 10rem;\n\n    .pong-box2,\n    .pong-box {\n      width: 100%;\n\n      .pong {\n        flex-direction: row;\n      }\n\n      .pong-note {\n        margin-top: 0;\n      }\n    }\n\n    &.new-side {\n      height: 12rem;\n      max-width: 30rem;\n      min-height: 12rem;\n\n      .pong-box2 {\n        height: 21rem;\n        min-height: 0;\n        width: 25rem;\n\n        .pong-cta {\n          margin: 0.5rem auto 1rem 1rem;\n        }\n\n        .pong-note {\n          margin: 0.5rem 0.5rem auto auto;\n        }\n\n        .pong {\n          > img {\n            height: 100%;\n            position: absolute;\n            width: auto;\n            z-index: 1;\n          }\n\n          > div.content {\n            align-items: end;\n            background: var(--place-new-side-background);\n            flex-direction: column;\n            height: 100%;\n            justify-content: end;\n            padding-left: 10rem;\n            width: 100%;\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"../../../ui/vars.scss\" as *;\n\n.sidebar-filter-container {\n  background: linear-gradient(\n    to bottom,\n    var(--background-primary) 0% calc(100% - 2rem),\n    rgb(0, 0, 0, 0) 100%\n  );\n  display: flex;\n  flex-direction: column;\n  font-size: var(--type-smaller-font-size);\n  padding-bottom: 2rem;\n  padding-right: 0.5rem;\n  padding-top: 0.5rem;\n\n  @media (max-width: $screen-md) {\n    padding-bottom: unset;\n  }\n\n  .sidebar-filter {\n    align-items: center;\n    display: flex;\n    margin-bottom: 0.5rem;\n\n    &.has-input {\n      .sidebar-filter-label .icon {\n        background-color: var(--category-color);\n      }\n    }\n  }\n\n  .sidebar-filter-label {\n    left: 0.5rem; /* Moves icon inside field. */\n    position: relative;\n    width: 0; /* Avoid moving field right. */\n\n    .icon {\n      background-size: 1rem;\n      height: 1rem;\n      mask-size: 1rem;\n      width: 1rem;\n    }\n  }\n\n  .sidebar-filter-input-field {\n    -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */\n    background-color: var(--background-primary);\n    border: 1px solid var(--border-primary);\n    border-radius: 1rem;\n    color: var(--text-primary);\n    height: var(--form-elem-height);\n    padding-left: 1.75rem;\n\n    &:focus {\n      border-color: var(--category-color);\n      box-shadow:\n        0 0 0 3px var(--blend-color),\n        0 0 0 3px var(--category-color);\n      outline: 0 none;\n    }\n\n    &[value=\"\"] {\n      width: 5rem;\n    }\n\n    &:not([value=\"\"]) ~ .sidebar-filter-label .icon {\n      background-color: var(--category-color) !important;\n    }\n\n    &:focus,\n    &.is-active {\n      padding-right: 7rem;\n      width: 100%;\n\n      ~ .sidebar-filter-count {\n        display: block;\n      }\n\n      ~ .button.clear-sidebar-filter-button {\n        display: block;\n      }\n    }\n\n    ~ .sidebar-filter-count {\n      background: var(--mark-color);\n      border-radius: 1rem;\n      display: none;\n      font-size: var(--type-tiny-font-size);\n      padding: 0 0.25rem;\n      position: absolute;\n      right: 2.5rem;\n\n      @media (max-width: $screen-md) {\n        right: 3rem;\n      }\n    }\n\n    ~ .button.clear-sidebar-filter-button {\n      display: none;\n      position: absolute;\n      right: 0.75rem;\n\n      &:hover {\n        background: transparent;\n      }\n\n      @media (max-width: $screen-md) {\n        left: calc(100% - 3rem);\n      }\n    }\n  }\n\n  .button {\n    --button-color: var(--icon-secondary);\n    --button-height: 1.5rem;\n    --button-padding: 0;\n    width: 1.5rem;\n  }\n\n  .icon {\n    background-color: var(--icon-secondary);\n    margin-right: unset;\n    position: unset;\n    position: relative;\n    z-index: unset;\n  }\n}\n\n.sidebar {\n  mark {\n    background-color: var(--mark-color);\n    color: unset;\n  }\n}\n","@use \"../../ui/vars\" as *;\n\n.plus {\n  .article-actions-container {\n    display: flex;\n  }\n\n  .main-page-content {\n    em {\n      font-style: normal;\n      font-variation-settings: normal;\n      text-decoration: underline;\n      text-decoration-color: var(--text-link);\n      text-decoration-thickness: 0.15rem;\n      text-underline-offset: 0.1em;\n    }\n\n    h1 {\n      color: var(--plus-accent-color);\n      /* MDN/Plus/Type/Overline/S */\n      font: 700 12px/120% Inter;\n      letter-spacing: 1.5px;\n      text-transform: uppercase;\n    }\n\n    h1 + blockquote {\n      border: revert;\n      border-radius: var(--elem-radius);\n      color: var(--text-primary);\n      margin: 1rem 0 2rem;\n      padding: revert;\n\n      p:first-child {\n        font: var(--type-heading-h1-mobile);\n        margin-bottom: 2rem;\n\n        @media (min-width: $screen-md) {\n          font: var(--type-heading-h1);\n        }\n      }\n\n      p {\n        font-style: italic;\n        font-variation-settings: \"slnt\" -10;\n      }\n    }\n\n    img {\n      margin: 2rem 0;\n    }\n  }\n}\n","@use \"../../vars\" as *;\n\n.breadcrumbs-container {\n  align-items: center;\n  display: flex;\n  margin-right: auto;\n\n  ol {\n    display: flex;\n    flex-wrap: wrap;\n    line-height: 1.2;\n    padding: 0.25rem 0;\n    row-gap: 0.25rem;\n  }\n\n  li {\n    display: none;\n    hyphens: auto;\n\n    // only show last two items on mobile\n    &:nth-last-child(-n + 2) {\n      display: inline-flex;\n    }\n\n    .breadcrumb {\n      &::after {\n        background-color: var(--icon-secondary);\n        content: \"\";\n        display: block;\n        flex-shrink: 0;\n        height: 12px;\n        margin-right: 0.5rem;\n        mask-image: url(\"../../../assets/icons/chevron.svg\");\n        mask-size: 12px;\n        transform: rotate(-90deg);\n        width: 12px;\n      }\n    }\n\n    a {\n      align-items: center;\n      display: flex;\n\n      &:link,\n      &:visited {\n        color: var(--text-secondary);\n      }\n\n      &:hover {\n        text-decoration: underline;\n      }\n\n      &:focus-visible {\n        outline: 0;\n\n        [property=\"name\"] {\n          outline-color: var(--accent-primary);\n          outline-offset: 1px;\n          outline-style: auto;\n        }\n      }\n    }\n\n    [property=\"name\"] {\n      display: inline-block;\n      margin-right: 0.5rem;\n    }\n  }\n\n  @media (min-width: $screen-xl) {\n    li {\n      display: inline-flex;\n    }\n  }\n}\n","@use \"../../vars\" as *;\n@use \"../../base/typography\" as *;\n\n@mixin not-inline-submenu {\n  background-color: var(--background-secondary);\n  border: 1px solid var(--border-primary);\n  border-radius: var(--elem-radius);\n  box-shadow: var(--shadow-02);\n  max-width: 25rem;\n  padding: 0.5rem;\n  position: absolute;\n  top: calc(100% + 4px);\n  width: max-content;\n  z-index: var(--z-index-mid);\n\n  @at-root .main-menu & {\n    background-color: var(--background-primary);\n  }\n\n  .submenu-item {\n    border-radius: var(--elem-radius);\n    padding: 0.75rem;\n  }\n\n  /*\n      Creates a space between the top-level menu and the submenu that\n      keeps the menu open when the cursor moves to the menu\n    */\n  &:before {\n    content: \"\";\n    display: block;\n    height: 8px;\n    left: 0;\n    position: absolute;\n    top: -8px;\n    width: 100%;\n  }\n}\n\n.submenu {\n  background-color: var(--background-primary);\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  li {\n    width: 100%;\n  }\n\n  li > a,\n  .submenu-item {\n    align-items: center;\n    border: 1px solid transparent;\n    color: var(--text-primary);\n    display: flex;\n    height: 100%;\n    padding: 0.5rem;\n    width: 100%;\n\n    li:last-child &:not(:focus) {\n      border-bottom-color: transparent;\n    }\n\n    &:hover {\n      background-color: var(--border-secondary);\n      text-decoration: none;\n    }\n\n    @at-root .main-menu &:hover {\n      background-color: var(--background-secondary);\n    }\n\n    &:focus {\n      border: 1px solid var(--button-secondary-border-focus);\n      box-shadow: var(--button-focus-effect);\n    }\n\n    .icon {\n      margin-right: 0.5rem;\n    }\n  }\n\n  &.inline-submenu-lg {\n    @media (min-width: $screen-lg) {\n      @include not-inline-submenu();\n    }\n  }\n\n  &:not(.inline-submenu-lg) {\n    @media (min-width: $screen-md) {\n      @include not-inline-submenu();\n    }\n  }\n}\n\n.submenu-header {\n  display: block;\n  padding: 1rem;\n\n  .submenu-item {\n    padding: 0;\n  }\n\n  .submenu-item:hover {\n    background: none;\n  }\n\n  @media (min-width: $screen-md) {\n    border-bottom: 1px solid var(--border-primary);\n  }\n}\n\n.submenu-icon {\n  background-color: var(--icon-primary);\n  height: 2rem;\n  margin-right: 0.75rem;\n  position: relative;\n  width: 0.2rem;\n}\n\n.submenu-item-heading,\n.submenu-item {\n  font-size: var(--type-smaller-font-size);\n\n  @media (min-width: $screen-md) {\n    // If there is sub-text associated with this heading, make it bold.\n    &:not(:only-child) {\n      font-weight: var(--font-body-strong-weight);\n    }\n  }\n}\n\n.submenu-item-description {\n  display: none;\n\n  @media (min-width: $screen-md) {\n    display: block;\n    font-size: var(--type-tiny-font-size);\n    margin: 0.25rem 0 0;\n  }\n}\n\n.submenu-item-subtext {\n  font-weight: var(--font-body-strong-weight);\n}\n\n.submenu-item-dot ~ .submenu-content-container > .submenu-item-heading::after {\n  background: var(--text-primary-blue);\n  border: 1px solid var(--background-primary);\n  border-radius: 2rem;\n  content: \"\";\n  display: inline-block;\n  height: 0.5rem;\n  margin-left: 0.5rem;\n  width: 0.5rem;\n}\n\n.active-menu-item {\n  background-color: var(--background-primary);\n  border-color: var(--border-secondary);\n}\n","@use \"../../../../ui/vars\" as *;\n\n.languages-switcher-menu.open-on-focus-within {\n  .submenu {\n    display: block;\n  }\n}\n\n.language-menu {\n  li {\n    &:not(:first-child) {\n      padding-top: 1px;\n    }\n\n    &:not(:last-child) {\n      padding-bottom: 1px;\n    }\n  }\n\n  .submenu-item {\n    // Reduce padding compared to other menus.\n    padding: 0.5rem !important;\n\n    &.locale-redirect-setting {\n      border-bottom: 1px solid var(--border-secondary) !important;\n      border-radius: 0 !important;\n      display: block;\n      font-size: var(--type-tiny-font-size);\n\n      &:hover {\n        background-color: unset;\n      }\n\n      .group {\n        align-items: center;\n        display: flex;\n        gap: 0.5em;\n      }\n\n      .switch {\n        display: flex;\n      }\n\n      .glean-thumbs {\n        font-style: italic;\n        font-variation-settings: \"slnt\" -10;\n        margin-top: 0.5em;\n      }\n\n      .icon {\n        margin-right: unset;\n      }\n\n      a[href] .icon-question-mark {\n        background-color: var(--icon-secondary);\n\n        &:hover {\n          background-color: var(--text-link);\n        }\n      }\n    }\n\n    .icon-experimental {\n      background-color: var(--icon-primary);\n      margin-left: 0.5em;\n      vertical-align: text-top;\n    }\n  }\n\n  @media (min-width: $screen-md) {\n    right: 0;\n  }\n}\n",".dropdown {\n  position: relative;\n\n  &-list {\n    background: var(--background-secondary);\n    border: 1px solid var(--border-primary);\n    border-radius: var(--elem-radius);\n    box-shadow: var(--shadow-01);\n    left: 0;\n    padding: 0.5rem;\n    position: absolute;\n    top: calc(100% + 2px);\n    z-index: var(--z-index-low);\n  }\n\n  &.is-flush-right .dropdown-list {\n    left: auto;\n    right: 0;\n  }\n\n  &-item {\n    .button.action {\n      width: 100%;\n\n      .button-wrap {\n        --button-font: var(--type-smaller-font-size);\n        --button-bg: transparent;\n        justify-content: flex-start;\n        text-align: left;\n        text-transform: none;\n\n        &:hover {\n          --button-bg: var(--button-secondary-hover);\n        }\n      }\n\n      &.active-menu-item {\n        --button-bg: var(--background-primary);\n        --button-border-color: var(--border-secondary);\n      }\n    }\n  }\n}\n",".glean-thumbs {\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: 0.5em;\n  height: 1.5em;\n\n  .confirmation {\n    animation-duration: 2.5s;\n    animation-fill-mode: forwards;\n    animation-name: colorHighlight;\n    color: var(--category-color);\n\n    @keyframes colorHighlight {\n      0% {\n        opacity: 0;\n      }\n\n      25% {\n        color: var(--category-color);\n        opacity: 1;\n      }\n\n      75% {\n        color: var(--category-color);\n      }\n\n      100% {\n        color: var(--text-inactive);\n      }\n    }\n  }\n}\n\n.thumbs {\n  &:hover {\n    --button-bg-hover: unset;\n  }\n\n  &:active {\n    --button-bg-active: unset;\n  }\n\n  .icon {\n    background-color: var(--icon-secondary);\n  }\n\n  &:focus,\n  &:hover,\n  &:active {\n    .icon-thumbs-up {\n      background-color: var(--icon-success);\n    }\n\n    .icon-thumbs-down {\n      background-color: var(--icon-critical);\n    }\n  }\n}\n","@use \"../../vars\" as *;\n\n.article-actions {\n  margin-left: auto;\n\n  .article-actions-dialog-heading {\n    display: none;\n  }\n\n  .button.action .button-wrap {\n    text-transform: initial;\n  }\n\n  .article-actions-toggle {\n    display: block;\n  }\n\n  @media (min-width: $screen-md) {\n    display: block;\n\n    .article-actions-toggle {\n      display: none;\n    }\n  }\n\n  /* Open state, mobile-only */\n  @media (max-width: $screen-md) {\n    &.show-actions {\n      background-color: var(--background-primary);\n      color: var(--text-primary);\n      display: block;\n      height: 100vh;\n      left: 0;\n      overflow: auto;\n      -webkit-overflow-scrolling: touch;\n      position: fixed;\n      top: var(--top-navigation-height);\n      width: 100vw;\n      z-index: var(--z-index-low);\n\n      > .button,\n      .article-actions-entries > li > .button,\n      .article-actions-entries > li > div > .button {\n        --button-radius: 0;\n        border-bottom: 1px solid var(--border-secondary);\n        width: 100%;\n\n        .button-wrap {\n          justify-content: flex-start;\n          margin-top: 1px;\n          padding: 1.5rem 1rem;\n        }\n      }\n\n      .article-actions-dialog-heading {\n        display: block;\n      }\n\n      .article-actions-entries {\n        display: block;\n        padding: 1rem;\n      }\n\n      .article-actions-toggle,\n      .article-action-entry {\n        border-bottom: 1px solid var(--border-secondary);\n      }\n\n      .article-actions-entry {\n        display: block;\n      }\n    }\n  }\n}\n\n.article-actions-submenu {\n  --gutter-padding: 1rem;\n  display: none;\n  overflow: auto;\n\n  &.show {\n    background: var(--background-primary);\n    bottom: 0;\n    display: flex;\n    flex-direction: column;\n    left: 0;\n    position: fixed;\n    right: 0;\n    top: var(--top-navigation-height);\n    z-index: var(--z-index-mid);\n  }\n\n  &.wait {\n    &,\n    * {\n      cursor: wait !important;\n    }\n  }\n\n  .header {\n    border-bottom: 1px solid var(--border-primary);\n    color: var(--text-primary);\n    display: block;\n    font-family: var(--font-body);\n    font-size: var(--type-smaller-font-size);\n    font-weight: var(--font-body-strong-weight);\n    margin: 0;\n    padding: 1rem;\n    text-align: left;\n    width: 100%;\n\n    .header-inner {\n      align-items: center;\n      display: flex;\n      gap: 0.5rem;\n      position: relative;\n    }\n\n    .icon {\n      transform: rotate(90deg);\n    }\n\n    &.desktop-only {\n      display: none;\n    }\n  }\n\n  .mdn-form-item,\n  p {\n    margin: 0;\n    padding: 1rem;\n    padding-bottom: 0;\n\n    &:last-child {\n      padding-bottom: 1rem;\n    }\n  }\n\n  .notecard {\n    margin: var(--gutter-padding);\n    margin-bottom: 0;\n\n    &::before {\n      top: 1.37rem;\n    }\n\n    p {\n      margin: 0;\n      padding: 0;\n    }\n  }\n\n  @media (min-width: $screen-md) {\n    &.show {\n      background-color: var(--background-secondary);\n      border: 1px solid var(--border-primary);\n      border-radius: var(--elem-radius);\n      bottom: auto;\n      box-shadow: var(--shadow-02);\n      left: var(--article-actions-position-left, initial);\n      max-height: calc(100vh - 12px - var(--sticky-header-with-actions-height));\n      padding: 0;\n      position: absolute;\n      right: 0;\n      top: calc(100% + 6px);\n      width: 316px;\n      z-index: var(--z-index-mid);\n    }\n\n    .header {\n      display: block;\n      padding: 1rem var(--gutter-padding);\n      text-align: center;\n\n      &-inner {\n        justify-content: center;\n      }\n\n      &.desktop-only {\n        display: block;\n      }\n\n      &.mobile-only {\n        display: none;\n      }\n\n      .icon {\n        left: 0;\n        position: absolute;\n      }\n    }\n  }\n}\n\n.article-actions-entries {\n  display: none;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  @media (min-width: $screen-md) {\n    display: flex;\n    gap: 0.5rem;\n\n    .sidebar-toggle {\n      display: none;\n    }\n  }\n}\n\n.article-actions-entry {\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n","@use \"../../vars\" as *;\n\nbody.ReactModal__Body--open {\n  overflow: hidden;\n}\n\n.modal-overlay {\n  background: var(--background-primary);\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: var(--z-index-modal-overlay);\n\n  &.wait {\n    &,\n    * {\n      cursor: wait !important;\n    }\n  }\n}\n\n.modal-content {\n  background: var(--background-primary);\n  flex-basis: 32.5rem;\n  outline: none;\n  padding: 1.5rem;\n  z-index: var(--z-index-modal-content);\n}\n\n.modal-header {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: 1.5rem;\n\n  .button.has-icon {\n    --button-color: var(--icon-secondary);\n\n    &:hover {\n      --button-color: var(--icon-primary);\n    }\n\n    .button-wrap {\n      height: auto;\n      margin: -0.5rem;\n      padding: 0.5rem;\n      width: auto;\n    }\n  }\n\n  .icon {\n    height: 1.25rem;\n    margin: 0;\n    width: 1.25rem;\n  }\n}\n\n.modal-heading {\n  font-size: 1.5rem;\n  font-weight: 700;\n  margin: 0;\n}\n\n.modal-body {\n  .notecard {\n    margin: 0;\n    margin-bottom: 1rem;\n  }\n\n  p {\n    margin: 0;\n    margin-top: 1rem;\n    overflow-wrap: anywhere;\n\n    &:first-child {\n      margin: 0;\n    }\n  }\n\n  .mdn-form-item {\n    @media (max-width: $screen-lg) {\n      &:last-child {\n        padding-bottom: 1.5rem;\n      }\n    }\n\n    &.is-button-row {\n      flex-direction: row-reverse;\n      flex-wrap: wrap-reverse;\n      gap: 1.5rem;\n      justify-content: flex-start;\n    }\n  }\n\n  button {\n    flex: 1;\n  }\n}\n\n@media (min-width: $screen-lg) {\n  body.ReactModal__Body--open {\n    overflow: unset;\n  }\n\n  .modal-overlay {\n    align-items: center;\n    background-color: rgba(240, 240, 244, 0.66);\n  }\n\n  .modal-content {\n    border-radius: var(--elem-radius);\n    box-shadow: 0 2px 14px rgba(58, 57, 68, 0.2);\n    height: fit-content;\n    max-height: 90vh;\n    max-width: 40rem;\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    width: 90vw;\n\n    &.is-small {\n      max-width: 24rem;\n    }\n\n    button {\n      flex: unset;\n    }\n  }\n}\n","@use \"../../vars\" as *;\n\n.mdn-plus-subscribe-link {\n  --button-padding: 1rem;\n\n  margin: 0 auto;\n  max-width: 150px;\n  text-align: center;\n  white-space: nowrap;\n}\n","@use \"../../vars\" as *;\n\n.auth-container {\n  .login-link {\n    align-items: center;\n    display: inline-flex;\n    font-weight: var(--font-body-strong-weight);\n    height: 2rem;\n    text-align: center;\n\n    &:link,\n    &:visited {\n      color: var(--text-secondary);\n    }\n  }\n}\n","@use \"../../../../ui/vars\" as *;\n\n.bookmark-menu {\n  > .button {\n    display: block;\n  }\n\n  .is-button-row {\n    flex-direction: row-reverse;\n    justify-content: flex-start;\n  }\n\n  #bookmark-delete {\n    margin-right: auto;\n\n    .icon {\n      background-color: var(--text-primary-red);\n    }\n  }\n\n  @media (min-width: $screen-md) {\n    #bookmark-note {\n      // clamp height to ensure dropdown doesn't go off screen\n      // but set a minimum, so it doesn't become unusably small\n      max-height: max(calc(100vh - 30rem), 5rem);\n    }\n  }\n}\n","@use \"../../vars\" as *;\n\n.article-actions-container {\n  align-items: center;\n  background-color: var(--background-secondary);\n  border-bottom: 1px solid var(--border-primary);\n  margin: 0;\n  min-height: var(--article-actions-container-height);\n  padding: 0;\n  position: sticky;\n  top: 0;\n  z-index: var(--z-index-low);\n\n  .container {\n    align-items: center;\n    display: flex;\n    gap: 0.5rem;\n    justify-content: space-between;\n  }\n\n  // sidebar button for tablet sizes only\n  .sidebar-button {\n    display: none;\n  }\n\n  @media (max-width: $screen-md) {\n    .sidebar-button {\n      align-items: center;\n      align-self: stretch;\n      display: flex;\n      margin: 0 0 0 -1rem;\n\n      .button-wrap {\n        border-radius: 0;\n        border-right: 1px solid var(--border-primary);\n      }\n    }\n  }\n\n  @media (min-width: $screen-md) {\n    position: static;\n\n    .bookmark-button-container {\n      flex: 0 0 40px;\n    }\n  }\n\n  @media (min-width: $screen-xxl) {\n    .container {\n      padding-left: 1rem;\n      padding-right: 1rem;\n    }\n  }\n}\n","@use \"../ui/vars\" as *;\n\n.plus-header-mandala {\n  --plus-header: var(--collections-header);\n  --plus-mandala: var(--collections-mandala);\n  --plus-icon: var(--collections-icon);\n  --plus-link: var(--collections-link);\n\n  background: var(--plus-header);\n  overflow: hidden;\n  padding: 1.25rem 0;\n\n  .container {\n    position: relative;\n\n    > * {\n      position: relative;\n    }\n\n    .mandala-icon-wrapper {\n      display: inline-block;\n      margin-right: 0.5rem;\n      position: relative;\n      top: -0.2rem;\n\n      @media (min-width: $screen-lg) {\n        position: absolute;\n        right: 10rem;\n        top: 50%;\n        transform: translate(0, -50%);\n      }\n\n      .mandala-container {\n        --mandala-primary: var(--plus-mandala);\n        left: 50%;\n        position: absolute;\n        top: 50%;\n        transform: translate(-50%, -49.4%);\n      }\n\n      .icon {\n        background: var(--plus-icon);\n        height: 2rem;\n        width: 2rem;\n      }\n    }\n\n    h1 {\n      font-size: 2rem;\n      margin: 0;\n      position: static;\n\n      span {\n        position: relative;\n      }\n    }\n\n    p {\n      margin: 1rem 0;\n\n      &:last-child {\n        margin-bottom: 0;\n      }\n    }\n\n    h1 span,\n    p {\n      // improve text contrast against mandala\n      text-shadow:\n        2px 2px 3px var(--plus-header),\n        2px -2px 3px var(--plus-header),\n        -2px -2px 3px var(--plus-header),\n        -2px 2px 3px var(--plus-header);\n    }\n\n    a {\n      color: var(--plus-link);\n      text-decoration: underline;\n    }\n\n    .button-wrap {\n      font-size: 0.875rem;\n      font-weight: 700;\n    }\n  }\n}\n\n.ai-help,\n.collections,\n.updates {\n  @media (min-width: $screen-md) {\n    .container {\n      max-width: 43rem;\n    }\n  }\n\n  @media (min-width: $screen-lg) {\n    .container {\n      max-width: 52rem;\n    }\n  }\n}\n","@use \"../../../ui/vars\" as *;\n\n.mandala-container {\n  // transform: skew(-7deg, 10deg);\n\n  --mandala-primary: #{$mdn-color-neutral-70};\n  --mandala-accent-1: var(--html-accent-color);\n  --mandala-accent-2: var(--http-accent-color);\n  --mandala-accent-3: var(--js-accent-color);\n  --mandala-accent-4: #{$mdn-color-neutral-30};\n  display: flex;\n  justify-content: center;\n\n  svg {\n    font-size: 1.5rem;\n    font-weight: 300;\n    user-select: none;\n  }\n\n  svg > text {\n    fill: var(--mandala-primary);\n  }\n\n  textPath[href=\"#circle1\"] {\n    font-size: 1.5rem;\n  }\n\n  textPath[href=\"#circle2\"] {\n    font-size: 1.3rem;\n  }\n\n  textPath[href=\"#circle3\"] {\n    font-size: 1.2rem;\n  }\n\n  textPath[href=\"#circle4\"] {\n    font-size: 1.1rem;\n  }\n\n  textPath[href=\"#circle5\"] {\n    font-size: 1rem;\n  }\n\n  &.pride:not(.animate-colors) {\n    textPath {\n      opacity: 0.9;\n    }\n\n    textPath[href=\"#circle1\"] {\n      fill: var(--pride-0);\n    }\n\n    textPath[href=\"#circle2\"] {\n      fill: var(--pride-1);\n    }\n\n    textPath[href=\"#circle3\"] {\n      fill: var(--pride-2);\n    }\n\n    textPath[href=\"#circle4\"] {\n      fill: var(--pride-3);\n    }\n\n    textPath[href=\"#circle5\"] {\n      fill: var(--pride-4);\n    }\n\n    textPath[href=\"#circle6\"] {\n      fill: var(--pride-5);\n      font-size: 0.9rem;\n      font-weight: 500;\n    }\n  }\n\n  &.pride.animate-colors {\n    svg > text > textPath > tspan {\n      animation: mandala-color-change 50s infinite;\n      animation-timing-function: ease-in-out;\n      fill: var(--mandala-primary);\n    }\n\n    textPath[href=\"#circle1\"] > tspan {\n      animation-delay: -15s;\n      fill: var(--mandala-accent-1);\n    }\n\n    textPath[href=\"#circle2\"] > tspan {\n      animation-delay: -20s;\n      fill: var(--mandala-accent-2);\n    }\n\n    textPath[href=\"#circle3\"] > tspan {\n      animation-delay: -30s;\n      fill: var(--mandala-accent-3);\n    }\n\n    textPath[href=\"#circle5\"] > tspan {\n      animation-delay: -40s;\n      fill: var(--mandala-accent-4);\n    }\n  }\n\n  @keyframes mandala-color-change {\n    0% {\n      fill: var(--mandala-primary);\n    }\n\n    10% {\n      fill: var(--mandala-primary);\n    }\n\n    15% {\n      fill: var(--mandala-accent-1);\n    }\n\n    20% {\n      fill: var(--mandala-primary);\n    }\n\n    25% {\n      fill: var(--mandala-primary);\n    }\n\n    30% {\n      fill: var(--mandala-accent-2);\n    }\n\n    35% {\n      fill: var(--mandala-primary);\n    }\n\n    40% {\n      fill: var(--mandala-primary);\n    }\n\n    50% {\n      fill: var(--mandala-accent-3);\n    }\n\n    55% {\n      fill: var(--mandala-primary);\n    }\n\n    60% {\n      fill: var(--mandala-primary);\n    }\n\n    65% {\n      fill: var(--mandala-accent-4);\n    }\n\n    70% {\n      fill: var(--mandala-primary);\n    }\n\n    100% {\n      fill: var(--mandala-primary);\n    }\n  }\n}\n","@use \"../../../ui/vars\" as *;\n\n$text-stroke-width: 2px;\n\n.offer-hero {\n  background-color: var(--background-primary);\n  color: var(--text-primary);\n  display: grid;\n  grid-template-rows: fit-content(24rem);\n  width: 100%;\n\n  .offer-hero-header {\n    align-items: center;\n\n    color: var(--text-secondary);\n    display: flex;\n    flex-direction: row;\n    grid-column: 1;\n    grid-row: 1;\n    margin: 0 auto;\n    max-width: 52rem;\n    padding: 1rem;\n    -moz-transition: all 0.3s ease-in-out;\n    transition: all 0.3s ease-in-out;\n    width: initial;\n\n    .offer-hero-wrapper {\n      align-self: start;\n      z-index: 1;\n\n      h1 {\n        font-size: 3rem;\n        margin-top: 1rem;\n\n        span {\n          display: block;\n        }\n\n        span:first-child {\n          margin-bottom: 0.5rem;\n        }\n      }\n\n      h2 {\n        font: var(--type-heading-h3);\n        width: 100%;\n      }\n\n      .button-wrapper {\n        display: flex;\n        gap: 1rem;\n        width: 100%;\n\n        a {\n          border-radius: var(--elem-radius);\n          font-size: 14px;\n          font-weight: 600;\n          line-height: 175%;\n          padding: 0.5rem;\n          position: relative;\n          text-align: center;\n          -moz-transition: all 0.2s ease;\n          transition: all 0.2s ease;\n          width: 140px;\n          width: 100%;\n          z-index: 1;\n        }\n\n        .button-primary {\n          background-color: var(--text-primary);\n          border: 2px solid var(--text-primary);\n          color: var(--text-invert);\n\n          &:hover {\n            background-color: var(--text-secondary);\n            border-color: var(--text-secondary);\n          }\n        }\n\n        .button-secondary {\n          background: #15141a1a;\n          border: 2px solid var(--button-secondary-border-red);\n          color: #fff;\n        }\n\n        .button-secondary:hover {\n          border: 2px solid var(--button-secondary-border-red-focus);\n        }\n      }\n    }\n  }\n\n  .mandala-wrapper {\n    --mandala-primary: var(--border-primary);\n    grid-column: 1;\n    grid-row: 1;\n    overflow: hidden;\n    top: 0;\n    -moz-transition: all 1s ease-in-out;\n    transition: all 1s ease-in-out;\n    width: 100%;\n\n    .mandala-translate {\n      transform: translate(10rem, -8rem) scale(1.2);\n      @media (min-width: $screen-sm) {\n        transform: translate(12rem, -8rem);\n      }\n    }\n  }\n}\n","@use \"../../../ui/vars\" as *;\n\n.offer-overview-feature {\n  background-color: var(--background-primary);\n  color: var(--text-primary);\n  min-height: 25rem;\n  width: 100%;\n\n  .wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: column-reverse;\n    gap: 4rem;\n    height: 100%;\n    justify-content: space-between;\n    margin: 0 auto;\n    max-width: 64rem;\n    padding: 4rem 1rem;\n    width: 100%;\n\n    @media (min-width: $screen-xl) {\n      flex-direction: row;\n    }\n\n    .copy-container,\n    .img-container {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n    }\n\n    .img-container {\n      align-items: center;\n      border-radius: 1rem;\n      box-shadow: 0 3px 22px #2b2a331a;\n      height: 100%;\n      max-width: 25rem;\n      @media (min-width: $screen-xl) {\n        max-width: min(50%, 20rem);\n      }\n    }\n\n    .copy-container {\n      align-items: center;\n      max-width: 40rem;\n\n      text-align: center;\n\n      a {\n        justify-content: start;\n      }\n\n      h2 {\n        color: var(--plus-accent-color);\n        font: 700 12px/120% Inter;\n        letter-spacing: 1.5px;\n        margin-bottom: 1rem;\n        margin-top: 0;\n        text-transform: uppercase;\n      }\n\n      h3 {\n        font-size: 1.75rem;\n        font-weight: 400;\n        margin-top: 0;\n      }\n\n      @media (min-width: $screen-xl) {\n        align-items: initial;\n        height: 100%;\n        max-width: 50%;\n        text-align: initial;\n      }\n    }\n  }\n}\n\n.offer-overview-feature:nth-child(even) {\n  .wrapper {\n    flex-direction: column;\n    @media (min-width: $screen-xl) {\n      flex-direction: row;\n    }\n  }\n}\n\n.offer-overview-feature:nth-child(odd) {\n  background: var(--background-secondary);\n\n  .wrapper {\n    flex-direction: column;\n    @media (min-width: $screen-xl) {\n      flex-direction: row-reverse;\n    }\n  }\n}\n","@use \"../../../ui/vars\" as *;\n\n.plus-subscribe-wrapper {\n  background: var(--background-primary);\n\n  .subscribe {\n    margin: 0 auto;\n    padding: 2rem 1rem;\n    text-align: center;\n\n    @media (min-width: $screen-md) {\n      padding: 2rem 4rem;\n    }\n\n    h2 {\n      color: var(--text-primary);\n      font-size: 24px;\n      font-style: normal;\n      font-variation-settings: normal;\n      font-weight: 650;\n      line-height: 120%;\n      margin-bottom: 2rem;\n    }\n\n    .switch {\n      color: var(--text-primary);\n      margin-bottom: 2rem;\n    }\n\n    .wrapper,\n    .wrapper-offline {\n      align-items: center;\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      justify-content: center;\n      margin: 0 auto;\n\n      .wrapper-offline {\n        display: none;\n      }\n\n      @media (min-width: 66rem) {\n        align-items: stretch;\n        flex-direction: row;\n      }\n\n      .subscribe-detail {\n        align-items: center;\n        background-color: var(--text-secondary);\n        border-radius: 1rem;\n        color: var(--text-invert);\n        display: flex;\n        flex-direction: column;\n        gap: 1rem;\n        max-width: 20rem;\n\n        min-width: 16rem;\n        width: 100%;\n\n        &#plus5 {\n          background-color: var(--text-primary-blue);\n        }\n\n        &#plus10 {\n          background-color: var(--text-primary-red);\n        }\n\n        &#core {\n          background-color: var(--text-primary-green);\n        }\n\n        h3 {\n          background: rgba(0, 0, 0, 0.5);\n          border-radius: 1rem 1rem 0 0;\n          color: var(--text-primary);\n          font-size: 1em;\n          margin: 0;\n          padding: 0.5rem;\n          width: 100%;\n        }\n\n        .sub-info {\n          display: flex;\n          flex-direction: column;\n          gap: 1.5rem;\n          height: 100%;\n          margin-top: 1rem;\n          padding: 0 2rem 2rem;\n          width: 100%;\n\n          h3,\n          p {\n            margin: 0;\n          }\n\n          .price {\n            align-content: center;\n            column-gap: 0.5rem;\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            height: 3rem;\n\n            .sub-price {\n              font-size: 36px;\n              font-style: normal;\n              font-variation-settings: normal;\n              font-weight: 650;\n              grid-column: 1/2;\n              justify-self: right;\n              line-height: 120%;\n            }\n\n            .free {\n              grid-column: 1/3;\n              justify-self: center;\n            }\n\n            .sub-length {\n              font-size: 0.8rem;\n              font-style: normal;\n              font-variation-settings: normal;\n              grid-column: 2/3;\n              justify-self: left;\n              line-height: 120%;\n              margin: auto 0;\n              text-align: left;\n            }\n          }\n\n          .includes {\n            align-self: flex-start;\n          }\n\n          ul {\n            align-self: flex-start;\n            list-style-type: \"✔ \";\n            margin-left: 1rem;\n            width: 100%;\n\n            li {\n              line-height: 1.75;\n              padding-left: 0.5rem;\n              text-align: left;\n              width: 100%;\n\n              a {\n                color: var(--text-invert);\n                text-decoration: underline;\n                width: fit-content;\n\n                &:hover {\n                  text-decoration: none;\n                }\n              }\n\n              sup.new {\n                --new-background: var(--mdn-color-background-highlight);\n                --new-color: inherit;\n                margin-left: 0.25rem;\n              }\n            }\n          }\n\n          .sub-link {\n            align-items: center;\n            align-self: center;\n            background: $mdn-color-neutral-90;\n            border-radius: 1rem;\n            color: var(--text-primary);\n            display: flex;\n            font-weight: 620;\n            height: 2rem;\n            justify-content: center;\n            min-width: fit-content;\n            padding: 0.25rem 0.5rem;\n            width: calc(100% - 1rem);\n          }\n\n          .terms {\n            color: var(--text-invert);\n            font-size: 14px;\n            font-style: italic;\n            font-variation-settings: \"slnt\" -10;\n            margin-top: auto;\n            text-decoration: underline;\n\n            &.external::after {\n              background-color: var(--text-invert);\n            }\n          }\n\n          .current {\n            background-color: initial;\n            border: 1px solid var(--mdn-color-black);\n            color: var(--mdn-color-black);\n          }\n\n          .na {\n            background-color: var(--mdn-background-light-grey);\n            border: 1px solid var(--mdn-background-light-grey);\n            color: var(--mdn-color-dark-grey);\n\n            &::after {\n              background-color: var(--mdn-color-dark-grey);\n              content: \"\";\n              display: inline-block;\n              height: 16px;\n              margin-left: 0.3rem;\n              mask-image: url(\"../../../assets/icons/question-mark.svg\");\n              width: 16px;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n.plus-for-companies {\n  color: var(--text-primary);\n  margin: 0;\n  padding: 1rem;\n  padding-bottom: 2rem;\n  text-align: center;\n}\n","@use \"./color-palette\" as *;\n\n$mdn-color-neutral-light-70: #f9f9fb;\n$mdn-color-neutral-light-80: #f2f1f1;\n$mdn-color-neutral-light-90: #ebeaea;\n\n$mdn-color-neutral-10: #e2e2e2;\n$mdn-color-neutral-20: #cdcdcd;\n$mdn-color-neutral-30: #b3b3b3;\n$mdn-color-neutral-40: #9e9e9e;\n$mdn-color-neutral-50: #858585;\n$mdn-color-neutral-60: #696969;\n$mdn-color-neutral-70: #4e4e4e;\n$mdn-color-neutral-75: #313131;\n$mdn-color-neutral-80: #343434;\n$mdn-color-neutral-90: #1b1b1b;\n\n$mdn-color-light-theme-blue: #0085f2;\n$mdn-color-light-theme-green: #009a46;\n$mdn-color-light-theme-yellow: #928700;\n$mdn-color-light-theme-red: #d30038;\n$mdn-color-light-theme-violet: #9b65ff;\n$mdn-color-light-theme-pink: #d00058;\n\n$mdn-color-dark-theme-blue: $mdn-color-light-theme-blue;\n$mdn-color-dark-theme-green: $mdn-color-light-theme-green;\n$mdn-color-dark-theme-yellow: $mdn-color-light-theme-yellow;\n$mdn-color-dark-theme-red: $mdn-color-light-theme-red;\n$mdn-color-dark-theme-violet: $mdn-color-light-theme-violet;\n$mdn-color-dark-theme-pink: $mdn-color-light-theme-pink;\n\n$mdn-color-light-theme-blue-10: #dce2f2;\n$mdn-color-light-theme-blue-20: #c1cff1;\n$mdn-color-light-theme-blue-30: #8cb4ff;\n$mdn-color-light-theme-blue-40: #5e9eff;\n$mdn-color-light-theme-blue-50: #0085f2;\n$mdn-color-light-theme-blue-60: #0069c2;\n$mdn-color-light-theme-blue-70: #004d92;\n$mdn-color-light-theme-blue-80: #003465;\n$mdn-color-light-theme-blue-90: #001b3a;\n\n$mdn-color-dark-theme-blue-10: $mdn-color-light-theme-blue-10;\n$mdn-color-dark-theme-blue-20: $mdn-color-light-theme-blue-20;\n$mdn-color-dark-theme-blue-30: $mdn-color-light-theme-blue-30;\n$mdn-color-dark-theme-blue-40: $mdn-color-light-theme-blue-40;\n$mdn-color-dark-theme-blue-50: $mdn-color-light-theme-blue-50;\n$mdn-color-dark-theme-blue-60: $mdn-color-light-theme-blue-60;\n$mdn-color-dark-theme-blue-70: $mdn-color-light-theme-blue-70;\n$mdn-color-dark-theme-blue-80: $mdn-color-light-theme-blue-80;\n$mdn-color-dark-theme-blue-90: $mdn-color-light-theme-blue-90;\n\n$mdn-color-light-theme-green-10: #a9f3ba;\n$mdn-color-light-theme-green-20: #73e693;\n$mdn-color-light-theme-green-30: #00d061;\n$mdn-color-light-theme-green-40: #00b755;\n$mdn-color-light-theme-green-50: #009a46;\n$mdn-color-light-theme-green-60: #007936;\n$mdn-color-light-theme-green-70: #005a26;\n$mdn-color-light-theme-green-80: #003d18;\n$mdn-color-light-theme-green-90: #00210a;\n\n$mdn-color-dark-theme-green-10: $mdn-color-light-theme-green-10;\n$mdn-color-dark-theme-green-20: $mdn-color-light-theme-green-20;\n$mdn-color-dark-theme-green-30: $mdn-color-light-theme-green-30;\n$mdn-color-dark-theme-green-40: $mdn-color-light-theme-green-40;\n$mdn-color-dark-theme-green-50: $mdn-color-light-theme-green-50;\n$mdn-color-dark-theme-green-60: $mdn-color-light-theme-green-60;\n$mdn-color-dark-theme-green-70: $mdn-color-light-theme-green-70;\n$mdn-color-dark-theme-green-80: $mdn-color-light-theme-green-80;\n$mdn-color-dark-theme-green-90: $mdn-color-light-theme-green-90;\n\n$mdn-color-light-theme-yellow-10: #f0e498;\n$mdn-color-light-theme-yellow-20: #dfd172;\n$mdn-color-light-theme-yellow-30: #c7b700;\n$mdn-color-light-theme-yellow-40: #afa100;\n$mdn-color-light-theme-yellow-50: #938700;\n$mdn-color-light-theme-yellow-60: #746a00;\n$mdn-color-light-theme-yellow-70: #564e00;\n$mdn-color-light-theme-yellow-80: #3a3500;\n$mdn-color-light-theme-yellow-90: #1f1c00;\n\n$mdn-color-dark-theme-yellow-10: $mdn-color-light-theme-yellow-10;\n$mdn-color-dark-theme-yellow-20: $mdn-color-light-theme-yellow-20;\n$mdn-color-dark-theme-yellow-30: $mdn-color-light-theme-yellow-30;\n$mdn-color-dark-theme-yellow-40: $mdn-color-light-theme-yellow-40;\n$mdn-color-dark-theme-yellow-50: $mdn-color-light-theme-yellow-50;\n$mdn-color-dark-theme-yellow-60: $mdn-color-light-theme-yellow-60;\n$mdn-color-dark-theme-yellow-70: $mdn-color-light-theme-yellow-70;\n$mdn-color-dark-theme-yellow-80: $mdn-color-light-theme-yellow-80;\n$mdn-color-dark-theme-yellow-90: $mdn-color-light-theme-yellow-90;\n\n$mdn-color-light-theme-red-10: #ffd9dc;\n$mdn-color-light-theme-red-20: #ffc0c4;\n$mdn-color-light-theme-red-30: #ff97a0;\n$mdn-color-light-theme-red-40: #ff707f;\n$mdn-color-light-theme-red-50: #ff2a51;\n$mdn-color-light-theme-red-60: #d30038;\n$mdn-color-light-theme-red-70: #9e0027;\n$mdn-color-light-theme-red-80: #6f0019;\n$mdn-color-light-theme-red-90: #40000a;\n\n$mdn-color-dark-theme-red-10: $mdn-color-light-theme-red-10;\n$mdn-color-dark-theme-red-20: $mdn-color-light-theme-red-20;\n$mdn-color-dark-theme-red-30: $mdn-color-light-theme-red-30;\n$mdn-color-dark-theme-red-40: $mdn-color-light-theme-red-40;\n$mdn-color-dark-theme-red-50: $mdn-color-light-theme-red-50;\n$mdn-color-dark-theme-red-60: $mdn-color-light-theme-red-60;\n$mdn-color-dark-theme-red-70: $mdn-color-light-theme-red-70;\n$mdn-color-dark-theme-red-80: $mdn-color-light-theme-red-80;\n$mdn-color-dark-theme-red-90: $mdn-color-light-theme-red-90;\n\n$mdn-color-light-theme-violet-10: #e6deff;\n$mdn-color-light-theme-violet-20: #d4c5ff;\n$mdn-color-light-theme-violet-30: #bea5ff;\n$mdn-color-light-theme-violet-40: #ae8aff;\n$mdn-color-light-theme-violet-50: #9b65ff;\n$mdn-color-light-theme-violet-60: #872bff;\n$mdn-color-light-theme-violet-70: #6800cf;\n$mdn-color-light-theme-violet-80: #480091;\n$mdn-color-light-theme-violet-90: #280056;\n\n$mdn-color-dark-theme-violet-10: $mdn-color-light-theme-violet-10;\n$mdn-color-dark-theme-violet-20: $mdn-color-light-theme-violet-20;\n$mdn-color-dark-theme-violet-30: $mdn-color-light-theme-violet-30;\n$mdn-color-dark-theme-violet-40: $mdn-color-light-theme-violet-40;\n$mdn-color-dark-theme-violet-50: $mdn-color-light-theme-violet-50;\n$mdn-color-dark-theme-violet-60: $mdn-color-light-theme-violet-60;\n$mdn-color-dark-theme-violet-70: $mdn-color-light-theme-violet-70;\n$mdn-color-dark-theme-violet-80: $mdn-color-light-theme-violet-80;\n$mdn-color-dark-theme-violet-90: $mdn-color-light-theme-violet-90;\n\n$mdn-color-light-theme-pink-10: #ffd9df;\n$mdn-color-light-theme-pink-20: #ffbbc8;\n$mdn-color-light-theme-pink-30: #ff93aa;\n$mdn-color-light-theme-pink-40: #ff6d91;\n$mdn-color-light-theme-pink-50: #ff1f72;\n$mdn-color-light-theme-pink-60: #d00058;\n$mdn-color-light-theme-pink-70: #9e0041;\n$mdn-color-light-theme-pink-80: #6d002b;\n$mdn-color-light-theme-pink-90: #3f0015;\n\n$mdn-color-dark-theme-pink-10: $mdn-color-light-theme-pink-10;\n$mdn-color-dark-theme-pink-20: $mdn-color-light-theme-pink-20;\n$mdn-color-dark-theme-pink-30: $mdn-color-light-theme-pink-30;\n$mdn-color-dark-theme-pink-40: $mdn-color-light-theme-pink-40;\n$mdn-color-dark-theme-pink-50: $mdn-color-light-theme-pink-50;\n$mdn-color-dark-theme-pink-60: $mdn-color-light-theme-pink-60;\n$mdn-color-dark-theme-pink-70: $mdn-color-light-theme-pink-70;\n$mdn-color-dark-theme-pink-80: $mdn-color-light-theme-pink-80;\n$mdn-color-dark-theme-pink-90: $mdn-color-light-theme-pink-90;\n\n$mdn-color-black: #000;\n$mdn-color-white: #fff;\n$mdn-color-ads: #00d0aa;\n\n$mdn-theme-light-text-primary: $mdn-color-neutral-90;\n$mdn-theme-light-text-secondary: $mdn-color-neutral-70;\n$mdn-theme-light-text-active: #{$mdn-color-neutral-50};\n$mdn-theme-light-text-inactive: #{$mdn-color-neutral-40}a6;\n$mdn-theme-light-text-link: $mdn-color-light-theme-blue-60;\n$mdn-theme-light-text-invert: $mdn-color-white;\n$mdn-theme-light-text-muted: #6f6f6f;\n$mdn-theme-light-background-primary: $mdn-color-white;\n$mdn-theme-light-background-secondary: $mdn-color-neutral-light-70;\n$mdn-theme-light-background-tertiary: #ebeaea;\n$mdn-theme-light-background-toc-active: $mdn-color-neutral-light-90;\n$mdn-theme-light-border-primary: $mdn-color-neutral-20;\n$mdn-theme-light-border-secondary: $mdn-color-neutral-20;\n$mdn-theme-light-border-success: $mdn-color-light-theme-green-20;\n$mdn-theme-light-button-primary-default: $mdn-color-neutral-90;\n$mdn-theme-light-button-primary-hover: $mdn-color-neutral-60;\n$mdn-theme-light-button-primary-active: $mdn-color-neutral-40;\n$mdn-theme-light-button-primary-inactive: $mdn-color-neutral-90;\n$mdn-theme-light-button-secondary-default: $mdn-color-white;\n$mdn-theme-light-button-secondary-hover: $mdn-color-neutral-20;\n$mdn-theme-light-button-secondary-active: $mdn-color-neutral-20;\n$mdn-theme-light-button-secondary-inactive: $mdn-color-neutral-light-70;\n$mdn-theme-light-button-secondary-border-focus: $mdn-color-light-theme-blue-50;\n$mdn-theme-light-button-secondary-border-red: $mdn-color-light-theme-red-30;\n$mdn-theme-light-button-secondary-border-red-focus: $mdn-color-light-theme-red-10;\n$mdn-theme-light-icon-primary: $mdn-color-neutral-60;\n$mdn-theme-light-icon-secondary: $mdn-color-neutral-30;\n$mdn-theme-light-icon-information: $mdn-color-light-theme-blue-50;\n$mdn-theme-light-icon-warning: $mdn-color-light-theme-red-50;\n$mdn-theme-light-icon-critical: $mdn-color-light-theme-red-60;\n$mdn-theme-light-icon-success: $mdn-color-light-theme-green-60;\n$mdn-theme-light-accent-primary: $mdn-color-light-theme-blue-50;\n$mdn-theme-light-accent-secondary: $mdn-color-light-theme-blue-50;\n$mdn-theme-light-field-focus-border: $mdn-color-light-theme-blue-50;\n$mdn-theme-light-focus-01: 0 0 0 3px rgba(0, 144, 237, 0.4);\n$mdn-theme-light-shadow-01: 0 1px 2px rgba(43, 42, 51, 0.05);\n$mdn-theme-light-shadow-02: 0 1px 6px rgba(43, 42, 51, 0.1);\n\n$mdn-theme-light-code-token-tag: $mdn-color-light-theme-blue-60;\n$mdn-theme-light-code-token-punctuation: $mdn-color-neutral-50;\n$mdn-theme-light-code-token-attribute-name: $mdn-color-light-theme-red-60;\n$mdn-theme-light-code-token-attribute-value: $mdn-color-light-theme-green-60;\n$mdn-theme-light-code-token-comment: $mdn-color-neutral-50;\n$mdn-theme-light-code-token-default: $mdn-color-neutral-90;\n$mdn-theme-light-code-token-selector: $mdn-color-light-theme-violet-60;\n$mdn-theme-light-code-background-inline: $mdn-color-neutral-light-80;\n$mdn-theme-light-code-background-block: $mdn-color-neutral-light-80;\n\n$mdn-theme-dark-text-primary: $mdn-color-white;\n$mdn-theme-dark-text-secondary: $mdn-color-neutral-20;\n$mdn-theme-dark-text-active: #{$mdn-color-neutral-50};\n$mdn-theme-dark-text-inactive: #{$mdn-color-neutral-20}a6;\n$mdn-theme-dark-text-link: $mdn-color-dark-theme-blue-30;\n$mdn-theme-dark-text-invert: $mdn-color-neutral-90;\n$mdn-theme-dark-text-muted: #858585;\n$mdn-theme-dark-background-primary: $mdn-color-neutral-90;\n$mdn-theme-dark-background-secondary: $mdn-color-neutral-75;\n$mdn-theme-dark-background-tertiary: #858585;\n$mdn-theme-dark-background-toc-active: $mdn-color-neutral-80;\n$mdn-theme-dark-border-primary: $mdn-color-neutral-50;\n$mdn-theme-dark-border-secondary: $mdn-color-neutral-60;\n$mdn-theme-dark-border-success: $mdn-color-dark-theme-green-20;\n$mdn-theme-dark-button-primary-default: $mdn-color-white;\n$mdn-theme-dark-button-primary-hover: $mdn-color-neutral-20;\n$mdn-theme-dark-button-primary-active: $mdn-color-neutral-40;\n$mdn-theme-dark-button-primary-inactive: $mdn-color-white;\n$mdn-theme-dark-button-secondary-default: $mdn-color-neutral-70;\n$mdn-theme-dark-button-secondary-hover: $mdn-color-neutral-50;\n$mdn-theme-dark-button-secondary-active: $mdn-color-neutral-40;\n$mdn-theme-dark-button-secondary-inactive: $mdn-color-neutral-70;\n$mdn-theme-dark-shadow-01: 0 1px 2px rgba(251, 251, 254, 0.2);\n$mdn-theme-dark-shadow-02: 0 1px 6px rgba(251, 251, 254, 0.2);\n$mdn-theme-dark-icon-primary: $mdn-color-white;\n$mdn-theme-dark-icon-secondary: $mdn-color-neutral-30;\n$mdn-theme-dark-icon-information: $mdn-color-dark-theme-blue-40;\n$mdn-theme-dark-icon-warning: $mdn-color-dark-theme-yellow-40;\n$mdn-theme-dark-icon-critical: $mdn-color-dark-theme-red-40;\n$mdn-theme-dark-icon-success: $mdn-color-dark-theme-green-40;\n$mdn-theme-dark-accent-primary: $mdn-color-dark-theme-blue-40;\n$mdn-theme-dark-accent-secondary: $mdn-color-dark-theme-blue-40;\n$mdn-theme-dark-field-focus-border: $mdn-color-white;\n$mdn-theme-dark-focus-01: 0 0 0 3px rgba(251, 251, 254, 0.5);\n\n$mdn-theme-dark-code-token-tag: $mdn-color-dark-theme-blue-20;\n$mdn-theme-dark-code-token-punctuation: $mdn-color-neutral-30;\n$mdn-theme-dark-code-token-attribute-name: $mdn-color-dark-theme-red-30;\n$mdn-theme-dark-code-token-attribute-value: $mdn-color-dark-theme-green-30;\n$mdn-theme-dark-code-token-comment: $mdn-color-neutral-30;\n$mdn-theme-dark-code-token-default: $mdn-color-white;\n$mdn-theme-dark-code-token-selector: $mdn-color-dark-theme-violet-30;\n$mdn-theme-dark-code-background-inline: $mdn-color-neutral-80;\n$mdn-theme-dark-code-background-block: $mdn-color-neutral-80;\n\n$screen-sm: 426px;\n$screen-md: 769px;\n$screen-lg: 992px;\n$screen-xl: 1200px;\n$screen-xxl: 1441px;\n\n// screen is to small for sticky placement\n$screen-height-place-limit: 44rem;\n","/*\n  Modern Reset\n  See https://hankchizljaw.com/wrote/a-modern-css-reset/\n\n  Note: This file uses some CSS variables and thus cannot be wholly updated via copy+paste.\n*/\n\n/* Box sizing rules */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/* Remove default margin */\nbody,\nh1,\nh2,\nh3,\nh4,\np,\nfigure,\nblockquote,\ndl,\ndd {\n  margin: 0;\n}\n\nul,\nol {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* Set core root defaults */\nhtml {\n  scroll-behavior: smooth;\n}\n\n/* Set core body defaults */\nbody {\n  font-family: var(--font-body);\n  font-size: var(--base-font-size);\n  line-height: var(--font-content-line-height);\n  text-rendering: optimizeSpeed;\n}\n\n/* A elements that don't have a class get default styles */\na:not([class]) {\n  text-decoration-skip-ink: auto;\n}\n\na {\n  text-decoration: none;\n}\n\n/* Make images easier to work with */\nimg,\npicture {\n  display: block;\n  max-width: 100%;\n}\n\n/* Fix Inter font bug: 'em' not slanted in Safari. See issue: https://github.com/mdn/yari/issues/7203 */\nem {\n  font-variation-settings: \"slnt\" -10;\n}\n\n/* Inherit fonts for inputs and buttons */\ninput,\nbutton,\ntextarea,\nselect {\n  font: inherit;\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  html {\n    scroll-behavior: auto;\n  }\n\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    scroll-behavior: auto !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n","@use \"sass:color\";\n@use \"../vars.scss\" as *;\n@use \"../color-palette\" as *;\n\n@mixin light-theme {\n  --text-primary: #{$mdn-theme-light-text-primary};\n  --text-secondary: #{$mdn-theme-light-text-secondary};\n  --text-active: #{$mdn-theme-light-text-active};\n  --text-inactive: #{$mdn-theme-light-text-inactive};\n  --text-link: #{$mdn-theme-light-text-link};\n  --text-visited: #551a8b; // Source: https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/modules/libpref/init/StaticPrefList.yaml#1787-1790\n  --text-invert: #{$mdn-theme-light-text-invert};\n  --text-muted: #{$mdn-theme-light-text-muted};\n\n  --background-primary: #{$mdn-theme-light-background-primary};\n  --background-secondary: #{$mdn-theme-light-background-secondary};\n  --background-tertiary: #{$mdn-theme-light-background-tertiary};\n  --background-toc-active: #{$mdn-theme-light-background-toc-active};\n  --background-mark-yellow: #{color.adjust(\n      $mdn-color-light-theme-yellow-30,\n      $alpha: -0.6\n    )};\n  --background-mark-green: #{color.adjust(\n      $mdn-color-light-theme-green-30,\n      $alpha: -0.6\n    )};\n  --background-information: #{color.adjust(\n      $mdn-theme-light-icon-information,\n      $alpha: -0.9\n    )};\n  --background-warning: #{color.adjust(\n      $mdn-theme-light-icon-warning,\n      $alpha: -0.9\n    )};\n  --background-critical: #{color.adjust(\n      $mdn-theme-light-icon-critical,\n      $alpha: -0.9\n    )};\n  --background-success: #{color.adjust(\n      $mdn-theme-light-icon-success,\n      $alpha: -0.9\n    )};\n  --background-del: #{color.adjust(\n      $mdn-theme-light-icon-critical,\n      $alpha: -0.5\n    )};\n  --background-ins: #{color.adjust($mdn-theme-light-icon-success, $alpha: -0.5)};\n\n  --border-primary: #{$mdn-theme-light-border-primary};\n  --border-secondary: #{$mdn-theme-light-border-secondary};\n\n  --button-primary-default: #{$mdn-theme-light-button-primary-default};\n  --button-primary-hover: #{$mdn-theme-light-button-primary-hover};\n  --button-primary-active: #{$mdn-theme-light-button-primary-active};\n  --button-primary-inactive: #{$mdn-theme-light-button-primary-inactive};\n\n  --button-secondary-default: #{$mdn-theme-light-button-secondary-default};\n  --button-secondary-hover: #{$mdn-theme-light-button-secondary-hover};\n  --button-secondary-active: #{$mdn-theme-light-button-secondary-active};\n  --button-secondary-inactive: #{$mdn-theme-light-button-secondary-inactive};\n  --button-secondary-border-focus: #{$mdn-theme-light-button-secondary-border-focus};\n  --button-secondary-border-red: #{$mdn-theme-light-button-secondary-border-red};\n  --button-secondary-border-red-focus: #{$mdn-theme-light-button-secondary-border-red-focus};\n\n  --icon-primary: #{$mdn-theme-light-icon-primary};\n  --icon-secondary: #{$mdn-theme-light-icon-secondary};\n  --icon-information: #{$mdn-theme-light-icon-information};\n  --icon-warning: #{$mdn-theme-light-icon-warning};\n  --icon-critical: #{$mdn-theme-light-icon-critical};\n  --icon-success: #{$mdn-theme-light-icon-success};\n\n  --accent-primary: #{$mdn-theme-light-accent-primary};\n  --accent-primary-engage: #{color.adjust(\n      $mdn-theme-light-accent-primary,\n      $alpha: -0.9\n    )};\n\n  --accent-secondary: #{$mdn-theme-light-accent-secondary};\n  --accent-tertiary: #{color.adjust(\n      $mdn-color-light-theme-blue-50,\n      $alpha: -0.9\n    )};\n\n  --shadow-01: #{$mdn-theme-light-shadow-01};\n  --shadow-02: #{$mdn-theme-light-shadow-02};\n  --focus-01: #{$mdn-theme-light-focus-01};\n  --field-focus-border: #{$mdn-theme-light-field-focus-border};\n\n  --code-token-tag: #{$mdn-theme-light-code-token-tag};\n  --code-token-punctuation: #{$mdn-theme-light-code-token-punctuation};\n  --code-token-attribute-name: #{$mdn-theme-light-code-token-attribute-name};\n  --code-token-attribute-value: #{$mdn-theme-light-code-token-attribute-value};\n  --code-token-comment: #{$mdn-theme-light-code-token-comment};\n  --code-token-default: #{$mdn-theme-light-code-token-default};\n  --code-token-selector: #{$mdn-theme-light-code-token-selector};\n  --code-background-inline: #{$mdn-theme-light-code-background-inline};\n  --code-background-block: #{$mdn-theme-light-code-background-block};\n\n  --ix-tab-background-active: #fff;\n\n  --notecard-link-color: #{$mdn-color-neutral-80};\n\n  --scrollbar-bg: transparent;\n  --scrollbar-color: rgba(0, 0, 0, 0.25);\n\n  --category-color: #{$mdn-color-light-theme-blue-50};\n  --category-color-background: #{$mdn-color-light-theme-blue-50}10;\n  --code-color: #{$mdn-color-light-theme-blue-40};\n  --mark-color: #{$mdn-color-light-theme-blue-10};\n\n  --plus-accent-color: #{$mdn-color-dark-theme-red-60};\n  --html-accent-color: #{$mdn-color-light-theme-red-60};\n  --css-accent-color: #{$mdn-color-light-theme-blue-60};\n  --js-accent-color: #{$mdn-color-light-theme-yellow-40};\n  --http-accent-color: #{$mdn-color-light-theme-green-60};\n  --apis-accent-color: #{$mdn-color-light-theme-violet-60};\n  --learn-accent-color: #{$mdn-color-light-theme-pink-60};\n\n  --plus-code-color: #{$mdn-color-light-theme-blue-60};\n  --html-code-color: #{$mdn-color-light-theme-red-70};\n  --css-code-color: #{$mdn-color-light-theme-blue-60};\n  --js-code-color: #{$mdn-color-light-theme-yellow-60};\n  --http-code-color: #{$mdn-color-light-theme-green-60};\n  --apis-code-color: #{$mdn-color-light-theme-violet-60};\n  --learn-code-color: #{$mdn-color-light-theme-pink-60};\n\n  --plus-mark-color: #{$mdn-color-light-theme-red-10};\n  --html-mark-color: #{$mdn-color-light-theme-red-10};\n  --css-mark-color: #{$mdn-color-light-theme-blue-10};\n  --js-mark-color: #{$mdn-color-light-theme-yellow-10};\n  --http-mark-color: #{$mdn-color-light-theme-green-10};\n  --apis-mark-color: #{$mdn-color-light-theme-violet-10};\n  --learn-mark-color: #{$mdn-color-light-theme-pink-10};\n\n  --plus-accent-background-color: #{$mdn-color-light-theme-red-50}30;\n  --html-accent-background-color: #{$mdn-color-light-theme-red-50}30;\n  --css-accent-background-color: #{$mdn-color-light-theme-blue-50}30;\n  --js-accent-background-color: #{$mdn-color-light-theme-yellow-50}30;\n  --http-accent-background-color: #{$mdn-color-light-theme-green-50}30;\n  --apis-accent-background-color: #{$mdn-color-light-theme-violet-50}30;\n  --learn-accent-background-color: #{$mdn-color-light-theme-pink-50}30;\n\n  --plus-accent-engage: #{color.adjust(\n      $mdn-color-light-theme-red-50,\n      $alpha: -0.3\n    )};\n  --html-accent-engage: #{color.adjust(\n      $mdn-color-light-theme-red-50,\n      $alpha: -0.3\n    )};\n  --css-accent-engage: #{color.adjust(\n      $mdn-color-light-theme-blue-50,\n      $alpha: -0.3\n    )};\n  --js-accent-engage: #{color.adjust(\n      $mdn-color-light-theme-yellow-50,\n      $alpha: -0.3\n    )};\n  --http-accent-engage: #{color.adjust(\n      $mdn-color-light-theme-green-50,\n      $alpha: -0.3\n    )};\n  --apis-accent-engage: #{color.adjust(\n      $mdn-color-light-theme-violet-50,\n      $alpha: -0.3\n    )};\n  --learn-accent-engage: #{color.adjust(\n      $mdn-color-light-theme-pink-50,\n      $alpha: -0.3\n    )};\n\n  --modal-backdrop-color: #{rgba($mdn-theme-dark-background-primary, 0.1)};\n  --blend-color: #{$mdn-color-white}80;\n\n  --text-primary-red: #{$mdn-color-light-theme-red-60};\n  --text-primary-green: #{$mdn-color-light-theme-green-60};\n  --text-primary-blue: #{$mdn-color-light-theme-blue-60};\n  --text-primary-yellow: #{$mdn-color-light-theme-yellow-60};\n\n  --collections-link: #{$mdn-color-light-theme-red-70};\n  --collections-header: #{$mdn-color-light-theme-red-10};\n  --collections-mandala: #{$mdn-color-light-theme-red-30};\n  --collections-icon: #{$mdn-color-light-theme-red-50};\n\n  --updates-link: #{$mdn-color-light-theme-blue-60};\n  --updates-header: #{$mdn-color-neutral-light-70};\n  --updates-mandala: #{$mdn-color-light-theme-blue-30};\n  --updates-icon: #{$mdn-color-light-theme-blue-50};\n\n  --ai-help-link: #{$mdn-color-light-theme-green-60};\n  --ai-help-header: #{$mdn-color-neutral-light-70};\n  --ai-help-mandala: #{$mdn-color-light-theme-green-30};\n  --ai-help-icon: #{$mdn-color-light-theme-green-50};\n  --ai-help-accent-background-color: #{$mdn-color-light-theme-green-50}10;\n\n  --observatory-bg: rgba(242, 242, 245, 1);\n  --observatory-bg-code: #e1e1e1;\n  --observatory-bg-secondary: rgba(255, 255, 255, 1);\n  --observatory-color: #000;\n  --observatory-color-secondary: rgba(105, 105, 105, 1);\n  --observatory-inverse-color: rgba(255, 255, 255, 1);\n  --observatory-inverse-color-secondary: rgba(179, 179, 179, 1);\n  --observatory-accent: #5a23d7;\n  --observatory-accent-light: #5a23d7aa;\n  --observatory-border: rgba(228, 228, 246, 1);\n  --observatory-border-accent: rgba(90, 35, 215, 1);\n  --observatory-pass-icon-bg: rgba(229, 250, 230, 1);\n  --observatory-pass-icon-color: rgba(0, 121, 54, 1);\n  --observatory-fail-icon-bg: rgba(250, 229, 229, 1);\n  --observatory-fail-icon-color: rgba(211, 0, 56, 1);\n  --observatory-table-bg: rgba(255, 255, 255, 1);\n  --observatory-table-bg-alternate: #f9f9fb;\n  --observatory-table-header-bg: rgba(249, 249, 251, 1);\n  --observatory-grade-a-bg: #d2fadd;\n  --observatory-grade-a-border: #017a37;\n  --observatory-grade-b-bg: #e8fad2;\n  --observatory-grade-b-border: #547a01;\n  --observatory-grade-c-bg: #faf8d2;\n  --observatory-grade-c-border: #7a7001;\n  --observatory-grade-d-bg: #fae8d2;\n  --observatory-grade-d-border: #a65001;\n  --observatory-grade-f-bg: #fad2d2;\n  --observatory-grade-f-border: #a00;\n  --observatory-arrow-down-color: rgba(158, 0, 39, 1);\n  --observatory-arrow-up-color: rgba(0, 121, 54, 1);\n\n  --form-limit-color: #{$mdn-color-neutral-60};\n  --form-limit-color-emphasis: #{$mdn-color-neutral-70};\n  --form-invalid-color: #{$mdn-color-light-theme-red-60};\n  --form-invalid-focus-color: #{$mdn-color-light-theme-red-50};\n  --form-invalid-focus-effect-color: #{rgba($mdn-color-light-theme-red-50, 0.2)};\n\n  --baseline-high-bg: #e6f4ea;\n  --baseline-high-engine-bg: #ceead6;\n  --baseline-high-img: url(\"../../assets/icons/baseline/high.svg\");\n  --baseline-high-check: #099949;\n  --baseline-low-bg: #e8f0fe;\n  --baseline-low-engine-bg: #d2e3fc;\n  --baseline-low-check: #1a73e8;\n  --baseline-low-img: url(\"../../assets/icons/baseline/low.svg\");\n  --baseline-low-pill-bg: #3367d6;\n  --baseline-low-pill-color: #f1f3f4;\n  --baseline-limited-bg: #f1f3f4;\n  --baseline-limited-engine-bg: #e3e6e8;\n  --baseline-limited-img: url(\"../../assets/icons/baseline/limited.svg\");\n  --baseline-limited-check: #1e8e3e;\n  --baseline-limited-cross: #ea8600;\n\n  --curriculum-bg-color: #fcefe2;\n  --curriculum-bg-color-note: rgba(252, 239, 226, 0.5);\n  --curriculum-bg-large-color: #fcefe2;\n  --curriculum-bg-color-topic-standards: #{$mdn-color-light-theme-red-50}30;\n  --curriculum-bg-color-topic-styling: #{$mdn-color-light-theme-blue-50}30;\n  --curriculum-bg-color-topic-scripting: #{$mdn-color-light-theme-yellow-50}30;\n  --curriculum-bg-color-topic-tooling: #{$mdn-color-light-theme-green-50}30;\n  --curriculum-bg-color-topic-practices: #{$mdn-color-light-theme-violet-50}30;\n  --curriculum-bg-color-landing: #fff;\n  --curriculum-bg-color-landing-about-ul: #fff;\n  --curriculum-bg-color-landing-top-icon: #fcefe2;\n  --curriculum-bg-color-landing-stairway-floor: #fcefe2;\n  --curriculum-category-color: #e3642a;\n  --curriculum-color: #d47d55;\n  --curriculum-module-label-color: #b34d1f;\n  --curriculum-module-label-bg-color: #faf0e3;\n  --curriculum-color-topic-standards: #{$mdn-color-light-theme-red-60};\n  --curriculum-color-topic-styling: #{$mdn-color-light-theme-blue-60};\n  --curriculum-color-topic-scripting: #{$mdn-color-light-theme-yellow-60};\n  --curriculum-color-topic-tooling: #{$mdn-color-light-theme-green-60};\n  --curriculum-color-topic-practices: #{$mdn-color-light-theme-violet-60};\n  --curriculum-color-landing-laptop: #e3642a;\n  --curriculum-border-color: #f2f1f1;\n  --curriculum-border-color-hover: var(--text-inactive);\n  --curriculum-bg-color-list-item-body: #fff;\n  --curriculum-color-list-item-icon-topic-standards: #{$mdn-color-light-theme-red-60};\n  --curriculum-color-list-item-icon-topic-styling: #{$mdn-color-light-theme-blue-60};\n  --curriculum-color-list-item-icon-topic-scripting: #{$mdn-color-light-theme-yellow-60};\n  --curriculum-color-list-item-icon-topic-tooling: #{$mdn-color-light-theme-green-60};\n  --curriculum-color-list-item-icon-topic-practices: #{$mdn-color-light-theme-violet-60};\n  --curriculum-bg-color-list-item-icon-topic-standards: #fff;\n  --curriculum-bg-color-list-item-icon-topic-styling: #fff;\n  --curriculum-bg-color-list-item-icon-topic-scripting: #fff;\n  --curriculum-bg-color-list-item-icon-topic-tooling: #fff;\n  --curriculum-bg-color-list-item-icon-topic-practices: #fff;\n  --curriculum-bg-color-list-item-topic-standards: #{$mdn-color-light-theme-red-50}30;\n  --curriculum-bg-color-list-item-topic-styling: #{$mdn-color-light-theme-blue-50}30;\n  --curriculum-bg-color-list-item-topic-scripting: #{$mdn-color-light-theme-yellow-50}30;\n  --curriculum-bg-color-list-item-topic-tooling: #{$mdn-color-light-theme-green-50}30;\n  --curriculum-bg-color-list-item-topic-practices: #{$mdn-color-light-theme-violet-50}30;\n  --curriculum-bg-color-partner: #fff;\n  --curriculum-shadow:\n    4px 4px 8px 0 rgba(179, 179, 179, 0.18),\n    -4px 4px 8px 0 rgba(179, 179, 179, 0.15);\n  --curriculum-shadow-landing-about-ul:\n    0 4px 10px 0 rgba(227, 100, 42, 0.06), 0 -2px 4px 0 rgba(178, 92, 53, 0.06);\n\n  --curriculum-landing-about-beginner: url(\"../../assets/icons/curriculum-landing-about-beginner.svg#light\");\n  --curriculum-landing-about-pace: url(\"../../assets/icons/curriculum-landing-about-pace.svg#light\");\n  --curriculum-landing-about-free: url(\"../../assets/icons/curriculum-landing-about-free.svg#light\");\n  --curriculum-landing-about-bullet: url(\"../../assets/icons/curriculum-landing-about-bullet.svg#light\");\n  --curriculum-landing-started-beginner: url(\"../../assets/icons/curriculum-landing-started-beginner.svg#small-light\");\n  --curriculum-landing-started-advanced: url(\"../../assets/icons/curriculum-landing-started-advanced.svg#small-light\");\n  --curriculum-landing-started-employment: url(\"../../assets/icons/curriculum-landing-started-employment.svg#small-light\");\n  --curriculum-landing-started-educator: url(\"../../assets/icons/curriculum-landing-started-educator.svg#small-light\");\n  --curriculum-module-mdn-resource: url(\"../../assets/icons/curriculum-mdn-resource.svg#light\");\n  --curriculum-bullet: url(\"../../assets/icons/curriculum-bullet.svg#light\");\n  --curriculum-about-covered: url(\"../../assets/icons/curriculum-about-covered.svg#light\");\n  --curriculum-about-detail: url(\"../../assets/icons/curriculum-about-detail.svg#light\");\n  --curriculum-about-educators: url(\"../../assets/icons/curriculum-about-educators.svg#light\");\n  --curriculum-about-not: url(\"../../assets/icons/curriculum-about-not.svg#light\");\n  --curriculum-about-students: url(\"../../assets/icons/curriculum-about-students.svg#light\");\n  --curriculum-bg-image-partner: url(\"../../assets/curriculum-partner-bg.svg#light\");\n  --curriculum-scrim-bg: url(\"../../assets/curriculum-scrim-bg.svg#light\");\n  --curriculum-landing-arrow: url(\"../../assets/curriculum-landing-arrow.svg#light\");\n\n  color-scheme: light;\n\n  @media (min-width: $screen-md) {\n    --curriculum-landing-started-beginner: url(\"../../assets/icons/curriculum-landing-started-beginner.svg#light\");\n    --curriculum-landing-started-advanced: url(\"../../assets/icons/curriculum-landing-started-advanced.svg#light\");\n    --curriculum-landing-started-employment: url(\"../../assets/icons/curriculum-landing-started-employment.svg#light\");\n    --curriculum-landing-started-educator: url(\"../../assets/icons/curriculum-landing-started-educator.svg#light\");\n  }\n}\n\n@mixin dark-theme {\n  --text-primary: #{$mdn-theme-dark-text-primary};\n  --text-secondary: #{$mdn-theme-dark-text-secondary};\n  --text-active: #{$mdn-theme-dark-text-active};\n  --text-inactive: #{$mdn-theme-dark-text-inactive};\n  --text-link: #{$mdn-theme-dark-text-link};\n  --text-visited: #ffadff; // Source: https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/modules/libpref/init/StaticPrefList.yaml#1794-1797\n  --text-invert: #{$mdn-theme-dark-text-invert};\n  --text-muted: #{$mdn-theme-dark-text-muted};\n\n  --background-primary: #{$mdn-theme-dark-background-primary};\n  --background-secondary: #{$mdn-theme-dark-background-secondary};\n  --background-tertiary: #{$mdn-theme-dark-background-tertiary};\n  --background-toc-active: #{$mdn-theme-dark-background-toc-active};\n  --background-mark-yellow: #{color.adjust(\n      $mdn-color-dark-theme-yellow-30,\n      $alpha: -0.6\n    )};\n  --background-mark-green: #{color.adjust(\n      $mdn-color-light-theme-green-30,\n      $alpha: -0.6\n    )};\n  --background-information: #{color.adjust(\n      $mdn-theme-light-icon-information,\n      $alpha: -0.9\n    )};\n  --background-warning: #{color.adjust(\n      $mdn-theme-light-icon-warning,\n      $alpha: -0.9\n    )};\n  --background-critical: #{color.adjust(\n      $mdn-theme-light-icon-critical,\n      $alpha: -0.9\n    )};\n  --background-success: #{color.adjust(\n      $mdn-theme-light-icon-success,\n      $alpha: -0.9\n    )};\n  --background-del: #{color.adjust(\n      $mdn-theme-light-icon-critical,\n      $alpha: -0.5\n    )};\n  --background-ins: #{color.adjust($mdn-theme-light-icon-success, $alpha: -0.5)};\n\n  --border-primary: #{$mdn-theme-dark-border-primary};\n  --border-secondary: #{$mdn-theme-dark-border-secondary};\n\n  --button-primary-default: #{$mdn-theme-dark-button-primary-default};\n  --button-primary-hover: #{$mdn-theme-dark-button-primary-hover};\n  --button-primary-active: #{$mdn-theme-dark-button-primary-active};\n  --button-primary-inactive: #{$mdn-theme-dark-button-primary-inactive};\n\n  --button-secondary-default: #{$mdn-theme-dark-button-secondary-default};\n  --button-secondary-hover: #{$mdn-theme-dark-button-secondary-hover};\n  --button-secondary-active: #{$mdn-theme-dark-button-secondary-active};\n  --button-secondary-inactive: #{$mdn-theme-dark-button-secondary-inactive};\n  --button-secondary-border-focus: #{$mdn-theme-light-button-secondary-border-focus};\n  --button-secondary-border-red: #{$mdn-theme-light-button-secondary-border-red};\n  --button-secondary-border-red-focus: #{$mdn-theme-light-button-secondary-border-red-focus};\n\n  --icon-primary: #{$mdn-theme-dark-icon-primary};\n  --icon-secondary: #{$mdn-theme-dark-icon-secondary};\n  --icon-information: #{$mdn-theme-dark-icon-information};\n  --icon-warning: #{$mdn-theme-dark-icon-warning};\n  --icon-critical: #{$mdn-theme-dark-icon-critical};\n  --icon-success: #{$mdn-theme-dark-icon-success};\n\n  --accent-primary: #{$mdn-theme-dark-accent-primary};\n  --accent-primary-engage: #{color.adjust(\n      $mdn-theme-dark-accent-primary,\n      $alpha: -0.9\n    )};\n  --accent-secondary: #{$mdn-theme-dark-accent-secondary};\n  --accent-tertiary: #{color.adjust(\n      $mdn-color-light-theme-blue-50,\n      $alpha: -0.9\n    )};\n\n  --shadow-01: #{$mdn-theme-dark-shadow-01};\n  --shadow-02: #{$mdn-theme-dark-shadow-02};\n  --focus-01: #{$mdn-theme-dark-focus-01};\n  --field-focus-border: #{$mdn-theme-dark-field-focus-border};\n\n  --code-token-tag: #{$mdn-theme-dark-code-token-tag};\n  --code-token-punctuation: #{$mdn-theme-dark-code-token-punctuation};\n  --code-token-attribute-name: #{$mdn-theme-dark-code-token-attribute-name};\n  --code-token-attribute-value: #{$mdn-theme-dark-code-token-attribute-value};\n  --code-token-comment: #{$mdn-theme-dark-code-token-comment};\n  --code-token-default: #{$mdn-theme-dark-code-token-default};\n  --code-token-selector: #{$mdn-theme-dark-code-token-selector};\n  --code-background-inline: #{$mdn-theme-dark-code-background-inline};\n  --code-background-block: #{$mdn-theme-dark-code-background-block};\n\n  --ix-tab-background-active: #4e4e4e;\n\n  --notecard-link-color: #{$mdn-color-neutral-10};\n\n  --scrollbar-bg: transparent;\n  --scrollbar-color: rgba(255, 255, 255, 0.25);\n\n  --category-color: #{$mdn-color-dark-theme-blue-30};\n  --category-color-background: #{$mdn-color-dark-theme-blue-30}70;\n  --code-color: #{$mdn-color-dark-theme-blue-20};\n  --mark-color: #{$mdn-color-dark-theme-blue-70};\n\n  --plus-accent-color: #{$mdn-color-dark-theme-red-30};\n  --html-accent-color: #{$mdn-color-dark-theme-red-40};\n  --css-accent-color: #{$mdn-color-dark-theme-blue-30};\n  --js-accent-color: #{$mdn-color-dark-theme-yellow-40};\n  --http-accent-color: #{$mdn-color-dark-theme-green-40};\n  --apis-accent-color: #{$mdn-color-dark-theme-violet-40};\n  --learn-accent-color: #{$mdn-color-dark-theme-pink-40};\n\n  --plus-code-color: #{$mdn-color-dark-theme-blue-20};\n  --html-code-color: #{$mdn-color-neutral-light-70};\n  --css-code-color: #{$mdn-color-dark-theme-blue-20};\n  --js-code-color: #{$mdn-color-dark-theme-yellow-30};\n  --http-code-color: #{$mdn-color-dark-theme-green-30};\n  --apis-code-color: #{$mdn-color-dark-theme-violet-30};\n  --learn-code-color: #{$mdn-color-dark-theme-pink-30};\n\n  --plus-mark-color: #{$mdn-color-dark-theme-red-70};\n  --html-mark-color: #{$mdn-color-dark-theme-red-70};\n  --css-mark-color: #{$mdn-color-dark-theme-blue-70};\n  --js-mark-color: #{$mdn-color-dark-theme-yellow-70};\n  --http-mark-color: #{$mdn-color-dark-theme-green-70};\n  --apis-mark-color: #{$mdn-color-dark-theme-violet-70};\n  --learn-mark-color: #{$mdn-color-dark-theme-pink-70};\n\n  --plus-accent-background-color: #{$mdn-color-light-theme-red-50}30;\n  --html-accent-background-color: #{$mdn-color-light-theme-red-50}30;\n  --css-accent-background-color: #{$mdn-color-light-theme-blue-50}30;\n  --js-accent-background-color: #{$mdn-color-light-theme-yellow-50}30;\n  --http-accent-background-color: #{$mdn-color-light-theme-green-50}30;\n  --apis-accent-background-color: #{$mdn-color-light-theme-violet-50}30;\n  --learn-accent-background-color: #{$mdn-color-light-theme-pink-50}30;\n\n  --plus-accent-engage: #{color.adjust(\n      $mdn-color-dark-theme-red-40,\n      $alpha: -0.3\n    )};\n  --html-accent-engage: #{color.adjust(\n      $mdn-color-dark-theme-red-40,\n      $alpha: -0.3\n    )};\n  --css-accent-engage: #{color.adjust(\n      $mdn-color-dark-theme-blue-30,\n      $alpha: -0.3\n    )};\n  --js-accent-engage: #{color.adjust(\n      $mdn-color-dark-theme-yellow-40,\n      $alpha: -0.3\n    )};\n  --http-accent-engage: #{color.adjust(\n      $mdn-color-dark-theme-green-40,\n      $alpha: -0.3\n    )};\n  --apis-accent-engage: #{color.adjust(\n      $mdn-color-dark-theme-violet-40,\n      $alpha: -0.3\n    )};\n  --learn-accent-engage: #{color.adjust(\n      $mdn-color-dark-theme-pink-40,\n      $alpha: -0.3\n    )};\n\n  --modal-backdrop-color: #{rgba($mdn-theme-dark-background-primary, 0.7)};\n  --blend-color: #{$mdn-color-black}80;\n\n  --text-primary-red: #{$mdn-color-dark-theme-red-30};\n  --text-primary-green: #{$mdn-color-dark-theme-green-30};\n  --text-primary-blue: #{$mdn-color-dark-theme-blue-30};\n  --text-primary-yellow: #{$mdn-color-dark-theme-yellow-30};\n\n  --collections-link: #{$mdn-color-dark-theme-red-30};\n  --collections-header: #{$mdn-color-dark-theme-red-90};\n  --collections-mandala: #{$mdn-color-dark-theme-red-70};\n  --collections-icon: #{$mdn-color-dark-theme-red-60};\n\n  --updates-link: #{$mdn-color-dark-theme-blue-30};\n  --updates-header: #{$mdn-color-black};\n  --updates-mandala: #{$mdn-color-dark-theme-blue-20};\n  --updates-icon: #{$mdn-color-dark-theme-blue-30};\n\n  --ai-help-link: #{$mdn-color-dark-theme-green-30};\n  --ai-help-header: #{$mdn-color-black};\n  --ai-help-mandala: #{$mdn-color-dark-theme-green-20};\n  --ai-help-icon: #{$mdn-color-dark-theme-green-30};\n  --ai-help-accent-background-color: #{$mdn-color-light-theme-green-50}30;\n\n  --observatory-bg: rgba(52, 52, 52, 1);\n  --observatory-bg-code: #4d4d4d;\n  --observatory-bg-secondary: rgba(0, 0, 0, 1);\n  --observatory-color: #fff;\n  --observatory-color-secondary: rgba(249, 249, 251, 1);\n  --observatory-inverse-color: rgb(27, 27, 27);\n  --observatory-inverse-color-secondary: rgba(105, 105, 105, 1);\n  --observatory-accent: #a388ff;\n  --observatory-accent-light: #a388ffaa;\n  --observatory-border: rgba(105, 105, 105, 1);\n  --observatory-border-accent: rgba(163, 136, 255, 1);\n  --observatory-pass-icon-bg: rgba(38, 92, 61, 1);\n  --observatory-pass-icon-color: rgba(138, 255, 163, 1);\n  --observatory-fail-icon-bg: rgba(92, 38, 38, 1);\n  --observatory-fail-icon-color: rgba(255, 121, 155, 1);\n  --observatory-table-bg: rgb(27, 27, 27);\n  --observatory-table-bg-alternate: #212121;\n  --observatory-table-header-bg: rgb(27, 27, 27);\n  --observatory-grade-a-bg: #265c3d;\n  --observatory-grade-a-border: #89fca1;\n  --observatory-grade-b-bg: #52662a;\n  --observatory-grade-b-border: #d5fc88;\n  --observatory-grade-c-bg: #66602a;\n  --observatory-grade-c-border: #fcf988;\n  --observatory-grade-d-bg: #5c3d26;\n  --observatory-grade-d-border: #ff6a00;\n  --observatory-grade-f-bg: #5c2626;\n  --observatory-grade-f-border: #fc8888;\n  --observatory-arrow-down-color: rgba(255, 112, 127, 1);\n  --observatory-arrow-up-color: rgba(0, 255, 106, 1);\n\n  --form-limit-color: #{$mdn-color-neutral-40};\n  --form-limit-color-emphasis: #{$mdn-color-neutral-30};\n  --form-invalid-color: #{$mdn-color-light-theme-red-30};\n  --form-invalid-focus-color: #{$mdn-color-light-theme-red-40};\n  --form-invalid-focus-effect-color: #{rgba($mdn-color-light-theme-red-40, 0.2)};\n\n  --baseline-high-bg: #0e2a10;\n  --baseline-high-engine-bg: #031b05;\n  --baseline-high-img: url(\"../../assets/icons/baseline/high-dark.svg\");\n  --baseline-high-check: #099949;\n  --baseline-low-bg: #041e49;\n  --baseline-low-engine-bg: #020d20;\n  --baseline-low-check: #1a73e8;\n  --baseline-low-img: url(\"../../assets/icons/baseline/low-dark.svg\");\n  --baseline-low-pill-bg: #3367d6;\n  --baseline-low-pill-color: #f1f3f4;\n  --baseline-limited-bg: #282a2c;\n  --baseline-limited-engine-bg: #1d1e1f;\n  --baseline-limited-img: url(\"../../assets/icons/baseline/limited-dark.svg\");\n  --baseline-limited-check: #1e8e3e;\n  --baseline-limited-cross: #ea8600;\n\n  --curriculum-color: #e3642a;\n  --curriculum-color-topic-standards: #f2919c;\n  --curriculum-color-topic-styling: #91a6f2;\n  --curriculum-color-topic-scripting: #f2cf8f;\n  --curriculum-color-topic-tooling: #8ff2a4;\n  --curriculum-color-topic-practices: #c891f2;\n  --curriculum-bg-color: #321d13;\n  --curriculum-bg-color-note: #332c29;\n  --curriculum-bg-large-color: #343434;\n  --curriculum-bg-color-topic-standards: #994b53;\n  --curriculum-bg-color-topic-styling: #4e609e;\n  --curriculum-bg-color-topic-scripting: #7d683d;\n  --curriculum-bg-color-topic-tooling: #3d7c4b;\n  --curriculum-bg-color-topic-practices: #584280;\n  --curriculum-bg-color-landing: #0e0b0a;\n  --curriculum-bg-color-landing-about-ul: #000;\n  --curriculum-bg-color-landing-top-icon: #321d13;\n  --curriculum-bg-color-landing-stairway-floor: rgba(137, 91, 51, 1);\n  --curriculum-category-color: #e3642a;\n  --curriculum-bg-color-grey: #1f1c1a;\n  --curriculum-bg-color-orange: #b25c35;\n  --curriculum-color-landing-laptop: #b25c35;\n  --curriculum-bg-color-list-item-body: #000;\n  --curriculum-border-color: #4e4e4e;\n  --curriculum-border-color-hover: var(--text-inactive);\n  --curriculum-module-label-color: #e3642a;\n  --curriculum-module-label-bg-color: #321d13;\n  --curriculum-bg-color-list-item-topic-standards: #343434;\n  --curriculum-bg-color-list-item-topic-styling: #343434;\n  --curriculum-bg-color-list-item-topic-scripting: #343434;\n  --curriculum-bg-color-list-item-topic-tooling: #343434;\n  --curriculum-bg-color-list-item-topic-practices: #343434;\n  --curriculum-color-list-item-icon-topic-standards: #f2919c;\n  --curriculum-color-list-item-icon-topic-styling: #91a6f2;\n  --curriculum-color-list-item-icon-topic-scripting: #f2cf8f;\n  --curriculum-color-list-item-icon-topic-tooling: #8ff2a4;\n  --curriculum-color-list-item-icon-topic-practices: #c891f2;\n  --curriculum-bg-color-list-item-icon-topic-standards: #804248;\n  --curriculum-bg-color-list-item-icon-topic-styling: #425080;\n  --curriculum-bg-color-list-item-icon-topic-scripting: #806a42;\n  --curriculum-bg-color-list-item-icon-topic-tooling: #428050;\n  --curriculum-bg-color-list-item-icon-topic-practices: #584280;\n  --curriculum-bg-color-partner: #1f1c1a;\n  --curriculum-shadow:\n    2px 2px 5px 0 rgba(36, 36, 36, 0.15), -2px 2px 8px 0 rgba(87, 87, 87, 0.15);\n  --curriculum-shadow-landing-about-ul:\n    0 4px 10px 0 rgba(227, 100, 42, 0.06), 0 -2px 4px 0 rgba(178, 92, 53, 0.06);\n\n  --curriculum-landing-about-beginner: url(\"../../assets/icons/curriculum-landing-about-beginner.svg#dark\");\n  --curriculum-landing-about-pace: url(\"../../assets/icons/curriculum-landing-about-pace.svg#dark\");\n  --curriculum-landing-about-free: url(\"../../assets/icons/curriculum-landing-about-free.svg#dark\");\n  --curriculum-landing-about-bullet: url(\"../../assets/icons/curriculum-landing-about-bullet.svg#dark\");\n  --curriculum-landing-started-beginner: url(\"../../assets/icons/curriculum-landing-started-beginner.svg#small-dark\");\n  --curriculum-landing-started-advanced: url(\"../../assets/icons/curriculum-landing-started-advanced.svg#small-dark\");\n  --curriculum-landing-started-employment: url(\"../../assets/icons/curriculum-landing-started-employment.svg#small-dark\");\n  --curriculum-landing-started-educator: url(\"../../assets/icons/curriculum-landing-started-educator.svg#small-dark\");\n  --curriculum-module-mdn-resource: url(\"../../assets/icons/curriculum-mdn-resource.svg#dark\");\n  --curriculum-bullet: url(\"../../assets/icons/curriculum-bullet.svg#dark\");\n  --curriculum-about-covered: url(\"../../assets/icons/curriculum-about-covered.svg#dark\");\n  --curriculum-about-detail: url(\"../../assets/icons/curriculum-about-detail.svg#dark\");\n  --curriculum-about-educators: url(\"../../assets/icons/curriculum-about-educators.svg#dark\");\n  --curriculum-about-not: url(\"../../assets/icons/curriculum-about-not.svg#dark\");\n  --curriculum-about-students: url(\"../../assets/icons/curriculum-about-students.svg#dark\");\n  --curriculum-bg-image-partner: url(\"../../assets/curriculum-partner-bg.svg#dark\");\n  --curriculum-scrim-bg: url(\"../../assets/curriculum-scrim-bg.svg#dark\");\n  --curriculum-landing-arrow: url(\"../../assets/curriculum-landing-arrow.svg#dark\");\n\n  color-scheme: dark;\n\n  @media (min-width: $screen-md) {\n    --curriculum-landing-started-beginner: url(\"../../assets/icons/curriculum-landing-started-beginner.svg#dark\");\n    --curriculum-landing-started-advanced: url(\"../../assets/icons/curriculum-landing-started-advanced.svg#dark\");\n    --curriculum-landing-started-employment: url(\"../../assets/icons/curriculum-landing-started-employment.svg#dark\");\n    --curriculum-landing-started-educator: url(\"../../assets/icons/curriculum-landing-started-educator.svg#dark\");\n  }\n}\n\nbody,\n:root {\n  --mdn-color-white: #{$mdn-color-white};\n  --mdn-color-black: #{$mdn-color-black};\n  --mdn-color-ads: #{$mdn-color-ads};\n  --mdn-color-background-highlight: #{$mdn-color-light-theme-yellow-10};\n  --mdn-color-dark-grey: #{$mdn-color-neutral-70};\n  --mdn-background-dark: #{$mdn-theme-dark-background-primary};\n  --mdn-background-light: #{$mdn-theme-light-background-primary};\n  --mdn-background-light-grey: #{$mdn-color-neutral-10};\n  --color-announcement-banner-accent: #{$mdn-color-light-theme-pink-40};\n  --pride-0: #e50000;\n  --pride-1: #e68d00;\n  --pride-2: #e6d600;\n  --pride-3: #008100;\n  --pride-4: #004cff;\n  --pride-5: #760188;\n}\n\n.light {\n  @include light-theme;\n}\n\n.dark {\n  @include dark-theme;\n}\n\n// OS Default.\n:root:not(.light):not(.dark) {\n  @media (prefers-color-scheme: light) {\n    @include light-theme;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    @include dark-theme;\n  }\n}\n",".notecard {\n  --note-background: var(--background-information);\n  --note-theme: var(--icon-information);\n  background-color: var(--note-background);\n  border-left: 2px solid var(--note-theme);\n  border-radius: var(--elem-radius);\n  box-shadow: var(--shadow-01);\n  margin: 1rem 0;\n  padding: 1rem 1rem 1rem 3rem;\n  position: relative;\n\n  &,\n  p,\n  li {\n    color: var(--text-secondary);\n  }\n\n  p {\n    line-height: 2;\n    margin: 0;\n  }\n\n  &:before {\n    background-color: var(--note-theme);\n    content: \"\";\n    display: block;\n    height: 1rem;\n    left: 1rem;\n    mask-image: url(\"../../../assets/icons/note-info.svg\");\n    mask-position: center;\n    mask-repeat: no-repeat;\n    mask-size: contain;\n    position: absolute;\n    top: 1.35rem;\n    width: 1rem;\n  }\n\n  &.inline {\n    font: var(--type-body-s);\n    margin: 0.5rem;\n    padding: 0.125rem 0.375rem 0.125rem 1.5rem;\n  }\n\n  &.inline::before {\n    display: block;\n    height: 0.8rem;\n    left: 0.2rem;\n    top: 0.1875rem;\n    width: 0.8rem;\n  }\n\n  &.warning {\n    --note-background: var(--background-warning);\n    --note-theme: var(--icon-warning);\n\n    &:before {\n      mask-image: url(\"../../../assets/icons/note-warning.svg\");\n    }\n  }\n\n  &.nonstandard {\n    --note-background: var(--background-warning);\n    --note-theme: var(--icon-warning);\n\n    &:before {\n      mask-image: url(\"../../../assets/icons/nonstandard.svg\");\n    }\n  }\n\n  &.error,\n  &.negative {\n    --note-background: var(--background-critical);\n    --note-theme: var(--icon-critical);\n\n    &:before {\n      mask-image: url(\"../../../assets/icons/note-deprecated.svg\");\n    }\n  }\n\n  &.deprecated {\n    --note-background: var(--background-critical);\n    --note-theme: var(--icon-critical);\n\n    &:before {\n      mask-image: url(\"../../../assets/icons/deprecated.svg\");\n    }\n  }\n\n  &.experimental {\n    &:before {\n      mask-image: url(\"../../../assets/icons/experimental.svg\");\n    }\n  }\n\n  &.success {\n    --note-background: var(--background-success);\n    --note-theme: var(--icon-success);\n\n    &:before {\n      mask-image: url(\"../../../assets/icons/note-info.svg\");\n    }\n  }\n\n  // extra classes added to fix specificity.\n\n  &,\n  .main-page-content &,\n  dd & {\n    ul,\n    ol {\n      padding-left: 1rem;\n    }\n\n    ul,\n    ol,\n    li,\n    p {\n      margin: 0;\n      padding-bottom: 0.5rem;\n\n      &:last-child {\n        padding-bottom: 0;\n      }\n    }\n  }\n\n  &:last-of-type {\n    margin-bottom: 2rem;\n  }\n\n  &:first-of-type {\n    margin-top: 2rem;\n  }\n\n  > *:first-child {\n    margin-top: 0;\n  }\n\n  > *:last-child *:last-child {\n    margin-bottom: 0;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    color: var(--text-primary);\n    font: var(--type-base-font-size-rem);\n    margin-bottom: 0.5rem;\n  }\n}\n\n.main-content {\n  .notecard {\n    a:not(.button),\n    code {\n      color: var(--notecard-link-color);\n\n      &:hover {\n        text-decoration: none;\n      }\n    }\n  }\n}\n","@use \"../../../ui/vars\" as *;\n\n.pagination {\n  align-items: center;\n  display: flex;\n  gap: 1rem;\n  justify-content: center;\n  padding: 1rem 0;\n\n  &-label {\n    font-size: var(--type-smaller-font-size);\n  }\n}\n","button,\n.button {\n  appearance: none;\n  background: none;\n  border: none;\n}\n\n.button {\n  --button-bg: var(--button-primary-default);\n  --button-bg-hover: var(--button-primary-hover);\n  --button-bg-active: var(--button-primary-active);\n  --button-border-color: var(--button-primary-default);\n  --button-focus-effect: var(--focus-effect);\n  --button-height: var(--form-elem-height, 2rem);\n  --button-color: var(--background-primary);\n  --button-font: var(--type-emphasis-m);\n  --button-padding: 0.5rem;\n  --button-radius: var(--elem-radius, 0.25rem);\n  border-radius: var(--button-radius);\n\n  cursor: pointer;\n  display: inline-block;\n  padding: 0;\n  text-decoration: none;\n}\n\n.button-wrap {\n  align-items: center;\n  background-color: var(--button-bg);\n  border: 1px solid var(--button-border-color);\n  border-radius: var(--button-radius);\n  color: var(--button-color);\n  display: flex;\n  font: var(--button-font);\n  gap: 0.25rem;\n  height: var(--button-height);\n  justify-content: center;\n  padding-left: var(--button-padding);\n  padding-right: var(--button-padding);\n  position: relative;\n}\n\n.button .icon {\n  background-color: var(--button-color);\n  margin: 0 -1px; // shrinks icon-only buttons to square.\n}\n\n/* Button States */\n\n.button:hover,\n.button.hover {\n  // In most cases, we want the border to be the same color as the background.\n  --button-border-color: var(--button-bg-hover, var(--button-bg));\n\n  .button-wrap {\n    background-color: var(--button-bg-hover, var(--button-bg));\n  }\n}\n\n.button:active,\n.button.active {\n  .button-wrap {\n    background-color: var(--button-bg-active, var(--button-bg));\n  }\n}\n\n.button:focus,\n.button.focus {\n  outline: none;\n\n  .button-wrap {\n    border: 1px solid var(--button-secondary-border-focus);\n    box-shadow: var(--button-focus-effect);\n  }\n}\n\n.button.button[disabled],\n.button.button.inactive {\n  cursor: default;\n  opacity: 0.65;\n\n  &:hover {\n    --button-bg-hover: unset;\n  }\n\n  &:active {\n    --button-bg-active: unset;\n  }\n}\n\n/* Standard Button Modifiers */\n\n.button.small,\n.button.small .button-wrap {\n  --button-height: 1.75rem;\n  --button-padding: 0.25rem;\n}\n\n/* Secondary Version */\n\n.button.secondary {\n  --button-bg: var(--button-secondary-default);\n  --button-border-color: var(--border-primary);\n  --button-color: var(--text-secondary);\n  --button-bg-hover: var(--button-secondary-hover);\n  --button-bg-active: var(--button-secondary-active);\n\n  &:focus {\n    --button-border-color: var(--button-secondary-border-focus);\n  }\n}\n\n/* Action Version */\n\n.button.action {\n  --button-bg: transparent;\n  --button-border-color: var(--button-bg);\n  --button-color: var(--text-secondary);\n  --button-font: var(--type-label-s);\n  --button-bg-hover: var(--button-secondary-hover);\n  --button-bg-active: var(--button-secondary-active);\n\n  &.has-icon {\n    --button-font: var(--type-emphasis-m);\n    text-transform: initial;\n  }\n\n  &:focus {\n    --button-border-color: var(--button-secondary-border-focus);\n  }\n\n  .button-wrap {\n    text-transform: var(--button-action-transform, uppercase);\n  }\n\n  &.highlight {\n    --button-color: var(--button-primary-default);\n  }\n}\n\n/* Select Version */\n.button.select {\n  --button-bg: var(--button-secondary-default);\n  --button-bg-hover: var(--button-secondary-hover);\n  --button-bg-active: var(--button-secondary-active);\n  --button-border-color: var(--border-primary);\n  --button-color: var(--text-secondary);\n  appearance: none;\n  background: none;\n  border: none;\n  padding: 0;\n  text-decoration: none;\n\n  .button-wrap {\n    box-shadow: var(--shadow-01);\n    padding-right: 26px;\n    position: relative;\n  }\n\n  .button-wrap::after {\n    background-color: var(--icon-primary);\n    content: \"\";\n    display: block;\n    height: 16px;\n    mask-image: url(\"../../../assets/icons/small-arrow.svg\");\n    mask-size: cover;\n    position: absolute;\n    right: 0.5rem;\n    top: calc(50% - 0.5rem);\n    width: 16px;\n  }\n}\n\n.button.link {\n  --button-bg: none;\n  --button-bg-hover: none;\n  --button-bg-active: none;\n  --button-border-color: none;\n  --button-focus-effect: none;\n  --button-secondary-border-focus: none;\n  --button-height: auto;\n  --button-font: unset;\n  --button-padding: 0;\n  --button-radius: 0;\n\n  --button-color: var(--text-link);\n  appearance: none;\n  display: inline;\n  text-decoration: none;\n\n  &:focus-visible {\n    outline-color: var(--accent-primary);\n    outline-offset: 1px;\n    outline-style: auto;\n  }\n}\n\n/*\n.high-contrast-white {\n  .button:focus {\n    --button-border-color: var(--border-primary);\n    --button-focus-effect: 0 0 0 4px var(--background-primary),\n      0 0 0 7px var(--border-primary);\n  }\n}\n\n.high-contrast-black {\n  .button:focus {\n    --button-border-color: var(--border-primary);\n    --button-focus-shadow: 0 0 0 4px var(--background-primary),\n      0 0 0 7px var(--border-primary);\n  }\n\n  .button {\n    --button-color: var(--button-secondary-default);\n  }\n\n  .button.secondary {\n    --button-border-color: var(--button-color);\n  }\n\n  .button.action {\n    --button-color: var(--text-secondary);\n  }\n}\n*/\n",".mdn-form {\n  font-family: var(--font-body);\n  font-size: var(--type-smaller-font-size);\n  font-weight: var(--font-body-strong-weight);\n}\n\n.mdn-form-item {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  padding-top: 1rem;\n\n  &:first-child {\n    padding-top: 0;\n  }\n\n  &.is-button-row {\n    display: flex;\n    justify-content: flex-end;\n\n    .button {\n      width: auto;\n    }\n  }\n\n  [type=\"text\"],\n  [type=\"email\"],\n  textarea,\n  select {\n    background: var(--background-primary);\n    border: 1px solid var(--border-primary);\n    color: var(--text-primary);\n    flex: 1 1 100%;\n    font-size: var(--type-smaller-font-size);\n    min-width: 0;\n    padding: 0.5rem;\n\n    &:focus {\n      border: 1px solid var(--button-secondary-border-focus);\n      box-shadow: var(--focus-effect);\n      outline: 0 none;\n    }\n  }\n\n  select {\n    appearance: none;\n  }\n\n  .select-wrap {\n    display: flex;\n    flex: 1 1 100%;\n    position: relative;\n  }\n\n  .select-wrap::after {\n    background-color: var(--icon-primary);\n    content: \"\";\n    display: block;\n    height: 16px;\n    mask-image: url(\"../../../assets/icons/small-arrow.svg\");\n    mask-size: cover;\n    pointer-events: none;\n    position: absolute;\n    right: 0.5rem;\n    top: calc(50% - 0.5rem);\n    width: 16px;\n  }\n\n  select,\n  label {\n    text-overflow: ellipsis;\n    width: 100%;\n  }\n\n  :invalid {\n    border-color: var(--form-invalid-color);\n\n    &:focus {\n      border-color: var(--form-invalid-focus-color);\n      box-shadow: 0 0 0 3px var(--form-invalid-focus-effect-color);\n    }\n  }\n\n  .limit {\n    color: var(--form-limit-color);\n    font-size: 0.6875rem;\n    margin-left: auto;\n\n    b {\n      color: var(--form-limit-color-emphasis);\n    }\n\n    &.invalid b {\n      color: var(--form-invalid-color);\n    }\n  }\n}\n\n.modal-body,\n.mdn-form.mdn-form-big {\n  .mdn-form-item {\n    padding-top: 1.5rem;\n\n    &:first-child {\n      padding-top: 0;\n    }\n\n    label,\n    textarea,\n    [type=\"text\"],\n    [type=\"email\"] {\n      font-size: 1rem;\n      font-weight: normal;\n    }\n  }\n\n  .button-wrap {\n    font-size: 1rem;\n    height: auto;\n    line-height: 1.5;\n    padding: 0.5rem 2rem;\n  }\n}\n","@use \"./ui/vars\" as *;\n@use \"./ui/base/mdn\";\n@use \"./ui/base/typography\";\n@use \"./ui/base/reset\";\n@use \"./ui/base/themes\";\n@use \"./ui/base/prism\";\n\n// These classes are used across several components.\n@use \"./ui/molecules/notecards\";\n@use \"./ui/molecules/pagination\";\n@use \"./ui/atoms/button\";\n@use \"./ui/atoms/form\";\n\n/*\n  Global :root variables, for those independent of themes\n*/\n:root {\n  /* Typography */\n  --font-fallback:\n    BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\",\n    \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n\n  --font-body: Inter, var(--font-fallback);\n  --font-heading: Inter, var(--font-fallback);\n  --font-code:\n    Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;\n\n  --base-font-size: 100%;\n  --base-line-height: 1.2;\n  --intermediate-line-height: 1.5;\n  --heading-line-height: var(--base-line-height);\n  --heading-letter-spacing: -0.031rem;\n  --font-content-line-height: 1.75;\n  --font-body-strong-weight: 600;\n\n  /* based on the following type-scale https://type-scale.com/?size=16&scale=1.200&text=MDN%20Web%20Docs&font=Inter&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000&preview=false */\n  --type-heading-h1-font-size: 2.488rem;\n  --type-heading-h2-font-size: 2.074rem;\n  --type-heading-h3-font-size: 1.728rem;\n  --type-heading-h4-font-size: 1.44rem;\n  --type-heading-h5-font-size: 1.2rem;\n  --type-base-font-size-rem: 1rem;\n  --type-smaller-font-size: 0.833rem;\n  --type-tiny-font-size: 0.694rem;\n\n  /* based on the following type-scale https://type-scale.com/?size=16&scale=1.125&text=MDN%20Web%20Docs&font=Inter&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000&preview=false */\n  --type-heading-h1-font-size-mobile: 1.802rem;\n  --type-heading-h2-font-size-mobile: 1.602rem;\n  --type-heading-h3-font-size-mobile: 1.424rem;\n  --type-heading-h4-font-size-mobile: 1.266rem;\n\n  --type-emphasis-m: var(--font-body-strong-weight)\n    var(--type-smaller-font-size) / 1.23 var(--font-body);\n  --type-label-s: 600 var(--type-tiny-font-size) / 1.2 var(--font-heading);\n\n  --type-heading-h1: 600 var(--type-heading-h1-font-size-mobile) /\n    var(--heading-line-height) var(--font-heading);\n  --type-heading-h2: 500 var(--type-heading-h2-font-size-mobile) /\n    var(--heading-line-height) var(--font-heading);\n  --type-heading-h3: 300 var(--type-heading-h3-font-size-mobile) /\n    var(--heading-line-height) var(--font-heading);\n  --type-heading-h4: 400 var(--type-heading-h4-font-size-mobile) /\n    var(--heading-line-height) var(--font-heading);\n  --type-heading-h5: 400 var(--type-heading-h5-font-size) /\n    var(--heading-line-height) var(--font-heading);\n  --type-heading-h6: 400 var(--type-base-font-size-rem) /\n    var(--heading-line-height) var(--font-heading);\n  --type-article-p: 400 var(--type-base-font-size-rem) /\n    var(--font-content-line-height) var(--font-body);\n\n  /* Grid and Layout */\n  --max-width: 1440px;\n  --gutter: 1rem; /* Space between content and browser window */\n  --top-navigation-height: 4rem;\n  --top-navigation-offset: -4rem;\n  --top-banner-inner-height: 3.125rem;\n  // top-banner-inner-height + 2 * padding;\n  --top-banner-height: calc(var(--top-banner-inner-height) + 2 * 0.125rem);\n  // + border\n  --top-banner-outer-height: calc(var(--top-banner-height) + 2 * 1px);\n\n  /* Z-Indexes\n     Keep this in order, and avoid reusing variables so elements each\n     exist on a distinct layer - we hit a lot of bugs if they don't */\n  --z-index-a11y: 10000;\n  --z-index-modal-content: 801;\n  --z-index-modal-overlay: 800;\n  --z-index-main-header: 700;\n  --z-index-sidebar-mobile: 600;\n  --z-index-mid: 500;\n  --z-index-nav-menu: 200;\n  --z-index-search-results: 101;\n  --z-index-low: 100;\n  --z-index-search-results-home: 99;\n  --z-index-back: -1;\n\n  /* Features */\n  --elem-radius: 0.25rem;\n  --focus-effect: 0 0 0 3px var(--accent-primary-engage);\n  --form-elem-height: 2rem;\n\n  /* Major Components */\n  --top-nav-height: 4rem;\n  --article-actions-container-height: 2rem;\n  --icon-size: 1rem;\n  --sticky-header-without-actions-height: calc(var(--top-nav-height) + 1px);\n  --sticky-header-with-actions-height: calc(\n    var(--sticky-header-without-actions-height) +\n      var(--article-actions-container-height) + 1px\n  );\n}\n\n@media (min-width: $screen-md) {\n  :root {\n    --type-heading-h1: 600 var(--type-heading-h1-font-size) /\n      var(--heading-line-height) var(--font-heading);\n    --type-heading-h2: 500 var(--type-heading-h2-font-size) /\n      var(--heading-line-height) var(--font-heading);\n    --type-heading-h3: 300 var(--type-heading-h3-font-size) /\n      var(--heading-line-height) var(--font-heading);\n    --type-heading-h4: 400 var(--type-heading-h4-font-size) /\n      var(--heading-line-height) var(--font-heading);\n  }\n}\n\n:target,\nsection[id] {\n  scroll-margin-top: var(--sticky-header-with-actions-height);\n}\n\n.sticky-header-container.without-actions ~ * :target,\n.sticky-header-container.without-actions ~ * section[id] {\n  scroll-margin-top: var(--sticky-header-without-actions-height);\n}\n\nbody {\n  accent-color: var(--accent-primary); // for checkboxes, radios, etc.\n  background-color: var(--background-primary);\n  color: var(--text-primary);\n  scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg);\n\n  &.mobile-overlay-active {\n    @media (max-width: $screen-md) {\n      overflow: hidden;\n    }\n  }\n}\n\n:focus-visible {\n  outline-color: var(--accent-primary);\n  outline-offset: 1px;\n  outline-style: auto;\n}\n\nmain {\n  // prevent margin-collapse for child elements\n  display: flow-root;\n  min-height: 80vh;\n}\n\n.main-page-content {\n  a {\n    &:link,\n    &:visited {\n      text-decoration: underline;\n    }\n\n    &:hover,\n    &:focus {\n      text-decoration: none;\n    }\n  }\n}\n\n.visually-hidden {\n  border: 0 !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  -webkit-clip-path: inset(50%) !important;\n  clip-path: inset(50%) !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  white-space: nowrap !important;\n  width: 1px !important;\n}\n\n.contents {\n  display: contents;\n}\n\n.hidden {\n  display: none;\n}\n\n.inline-block {\n  display: inline-block;\n}\n\npre {\n  white-space: pre-wrap;\n  white-space: -moz-pre-wrap;\n  white-space: -pre-wrap;\n  white-space: -o-pre-wrap;\n  word-wrap: break-word;\n}\n\na {\n  color: var(--text-link);\n}\n\n.external:after {\n  background-color: var(--icon-primary);\n  content: \"\";\n  display: inline-flex;\n  height: 10px;\n  margin-left: 4px;\n  mask-image: url(\"./assets/icons/external.svg\");\n  mask-size: cover;\n  width: 10px;\n}\n\nbutton.button[disabled],\ninput[disabled] {\n  cursor: not-allowed;\n}\n\n.expand-this-link:after {\n  bottom: 0;\n  content: \"\";\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n[type=\"search\"] {\n  /* clears the ‘X’ from Internet Explorer */\n  &::-ms-clear {\n    display: none;\n    height: 0;\n    width: 0;\n  }\n\n  &::-ms-reveal {\n    display: none;\n    height: 0;\n    width: 0;\n  }\n  /* clears the ‘X’ from Chrome */\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    display: none;\n  }\n}\n\nu {\n  text-decoration-color: var(--text-link);\n  text-decoration-thickness: 0.15rem;\n  text-underline-offset: 0.1em;\n}\n\n.plus .dark,\n.plus {\n  --background-toc-active: var(--plus-accent-background-color);\n  --text-link: var(--plus-accent-color);\n  --category-color: var(--plus-accent-color);\n  --category-color-engage: var(--plus-accent-engage);\n  --category-color-background: var(--plus-accent-background-color);\n  --code-color: var(--plus-code-color);\n  --mark-color: var(--plus-mark-color);\n}\n\n.category-html {\n  --background-toc-active: var(--html-accent-background-color);\n  --category-color: var(--html-accent-color);\n  --category-color-engage: var(--html-accent-engage);\n  --category-color-background: var(--html-accent-background-color);\n  --mark-color: var(--html-mark-color);\n}\n\n.category-css {\n  --background-toc-active: var(--css-accent-background-color);\n  --category-color: var(--css-accent-color);\n  --category-color-engage: var(--css-accent-engage);\n  --category-color-background: var(--css-accent-background-color);\n  --mark-color: var(--css-mark-color);\n}\n\n.category-javascript {\n  --background-toc-active: var(--js-accent-background-color);\n  --category-color: var(--js-accent-color);\n  --category-color-engage: var(--js-accent-engage);\n  --category-color-background: var(--js-accent-background-color);\n  --mark-color: var(--js-mark-color);\n}\n\n.category-http {\n  --background-toc-active: var(--http-accent-background-color);\n  --category-color: var(--http-accent-color);\n  --category-color-engage: var(--http-accent-engage);\n  --category-color-background: var(--http-accent-background-color);\n  --mark-color: var(--http-mark-color);\n}\n\n.category-api {\n  --background-toc-active: var(--apis-accent-background-color);\n  --category-color: var(--apis-accent-color);\n  --category-color-engage: var(--apis-accent-engage);\n  --category-color-background: var(--apis-accent-background-color);\n  --mark-color: var(--apis-mark-color);\n}\n\n.category-learn {\n  --background-toc-active: var(--learn-accent-background-color);\n  --category-color: var(--learn-accent-color);\n  --category-color-engage: var(--learn-accent-engage);\n  --category-color-background: var(--learn-accent-background-color);\n  --mark-color: var(--api-mark-color);\n}\n\n.mify {\n  @include mdn.mify;\n}\n\n._ify {\n  @include mdn.uify;\n}\n\n@media (forced-colors: active) {\n  .icon {\n    background-color: CanvasText !important;\n  }\n}\n\nsup.new {\n  background: var(--new-background);\n  border-radius: 1em;\n  color: var(--new-color);\n  display: inline-block;\n  font-size: 0.45rem;\n  font-weight: bold;\n  line-height: 1.7;\n  padding: 0 0.4em;\n  text-rendering: optimizeLegibility;\n  text-transform: uppercase;\n\n  &.beta {\n    background: var(--new-background-beta, var(--new-background));\n  }\n}\n\n.sticky-header-container {\n  position: sticky;\n  // Avoid gap on certain zoom levels.\n  top: -1px;\n  z-index: var(--z-index-main-header);\n}\n\n.feedback-link::before {\n  background-color: var(--feedback-link-icon, var(--text-link));\n  content: \"\";\n  display: inline-flex;\n  height: 1em;\n  margin-right: 0.4em;\n  mask-image: url(\"./assets/icons/feedback.svg\");\n  mask-size: cover;\n  vertical-align: middle;\n  width: 1em;\n}\n","@mixin uify {\n  &::after {\n    content: \" \";\n    text-decoration: underline;\n    text-decoration-color: var(--text-link);\n    text-decoration-thickness: 0.1em;\n    text-underline-offset: 0.1em;\n  }\n}\n\n@mixin mify {\n  margin-left: 0.5rem;\n  @include uify;\n\n  &::before {\n    background-color: var(--text-link);\n    content: \"\";\n    display: inline-block;\n    height: 1.2em;\n    mask: url(\"../../assets/m-logo.svg\") no-repeat 50% 50%;\n    mask-size: cover;\n    transform: translate(-0.2em, 0.2em);\n    width: 1.2em;\n  }\n}\n","@use \"../ui/vars\" as *;\n@use \"../ui/base/themes\" as *;\n@use \"../ui/base/mdn\";\n@use \"../ui/molecules/grids/grids.scss\" as *;\n@use \"../ui/base/typography\" as *;\n\n.main-page-content {\n  overflow-wrap: break-word;\n  padding: 3rem 1rem 1rem;\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-variant-ligatures: no-contextual;\n\n    a:link,\n    a:visited {\n      color: var(--text-primary);\n      text-decoration: none;\n    }\n\n    a:hover,\n    a:focus {\n      text-decoration: underline;\n    }\n\n    a:active {\n      background-color: transparent;\n    }\n\n    a[href^=\"#\"] {\n      &::before {\n        color: var(--text-inactive);\n        content: \"#\";\n        display: inline-block;\n        font-size: 0.7em;\n        line-height: 1;\n        margin-left: -0.8em;\n        text-decoration: none;\n        visibility: hidden;\n        width: 0.8em;\n      }\n\n      &:hover {\n        &::before {\n          visibility: visible;\n        }\n      }\n    }\n  }\n\n  h1 {\n    &::after {\n      text-decoration-color: var(--category-color);\n    }\n  }\n\n  /* reduce the top margin of the interactive example heading */\n  section h2:first-of-type {\n    margin-top: 2rem;\n  }\n\n  a:not(.button) {\n    color: var(--text-link);\n    width: fit-content;\n\n    &:visited:not([href^=\"#\"]) {\n      // Distinguish visited links (excl. anchor links).\n      color: var(--text-visited);\n    }\n\n    &:active,\n    &:active:visited {\n      background-color: var(--text-link);\n      color: #fff;\n\n      code {\n        background-color: transparent;\n        color: #fff;\n      }\n    }\n\n    &[aria-current] {\n      color: var(--text-link);\n      font-weight: var(--font-body-strong-weight);\n      text-decoration: none;\n    }\n  }\n\n  img {\n    /* In dark mode, required for images with black text on transparent background. */\n    background: #fff;\n    border: 1px solid var(--border-primary) !important;\n    border-radius: var(--elem-radius);\n    /* Required to prevent the border from scaling images, making them look blurry. */\n    box-sizing: content-box;\n    /* Required for alt texts. */\n    color: #1b1b1b;\n    display: inline-block;\n    display: flex;\n    height: auto;\n    margin: 2rem auto;\n  }\n\n  ul,\n  ol {\n    margin: 1rem 0 2rem;\n    padding-left: 2rem;\n\n    li {\n      margin: 0.5rem 0;\n\n      > p {\n        margin: 0;\n      }\n    }\n  }\n\n  ul {\n    list-style: disc;\n\n    ul {\n      list-style-type: circle;\n      margin: 0;\n      padding-left: 1rem;\n    }\n  }\n\n  ol {\n    list-style: decimal;\n\n    ol {\n      list-style: lower-roman;\n      margin: 0;\n    }\n  }\n\n  dd ol,\n  dd ul {\n    margin-bottom: 1rem;\n    padding-left: 3rem;\n  }\n\n  td ul,\n  td ol {\n    padding-left: 1rem;\n  }\n\n  dd li {\n    margin-bottom: 1rem;\n  }\n\n  td li {\n    margin-bottom: 0.5rem;\n  }\n\n  dl {\n    dt {\n      margin-bottom: 0.5rem;\n      margin-top: 2rem;\n\n      a[href^=\"#\"] {\n        color: inherit;\n        position: relative;\n        text-decoration: none;\n\n        &:hover,\n        &:focus {\n          text-decoration: underline;\n        }\n\n        &::before {\n          color: var(--text-inactive);\n          content: \"#\";\n          display: inline-flex;\n          font-size: 0.7em;\n          line-height: 1;\n          margin-left: -0.8em;\n          text-decoration: none;\n          top: 0.5em;\n          visibility: hidden;\n          width: 0.8em;\n        }\n\n        &:hover::before {\n          visibility: visible;\n        }\n      }\n    }\n\n    dd {\n      margin-bottom: 1rem;\n      margin-left: 1rem;\n\n      dl {\n        /* Nested definition list. */\n        border-left: 1px solid var(--border-primary);\n        padding-left: 1rem;\n      }\n    }\n\n    p {\n      margin: 0 0 1rem;\n    }\n  }\n\n  // specific styles to override base styles. The Markdown compiler\n  // adds extra divs, so this is a way for these styles to not\n  // stomp out component styles.\n  .section-content {\n    p {\n      font: var(--type-article-p);\n    }\n\n    figure {\n      margin-bottom: 1rem;\n    }\n\n    .prev-next {\n      display: flex;\n      gap: 0.5rem;\n      justify-content: space-between;\n      list-style: none;\n      margin: 1rem 0;\n      padding: 0;\n      text-align: center;\n\n      li {\n        display: flex;\n        margin: 0;\n      }\n\n      .button {\n        margin: 0;\n        max-width: inherit;\n      }\n\n      .button-wrap {\n        color: inherit;\n      }\n    }\n\n    blockquote > :last-child {\n      margin-bottom: 0;\n    }\n\n    scrim-inline {\n      aspect-ratio: 1.5;\n      display: block;\n      margin: 0.5rem auto;\n      max-width: 36rem;\n      width: 100%;\n    }\n  }\n\n  #specifications + table {\n    margin-bottom: 2rem;\n  }\n\n  .css-formal-syntax {\n    margin-bottom: 0;\n\n    ~ footer {\n      background-color: var(--code-background-block);\n      border: 1px solid transparent;\n      border-top: 1px solid var(--border-secondary);\n      font-size: var(--type-smaller-font-size);\n      margin-bottom: 2rem;\n      padding: 0.5rem 2.5rem 0.5rem 1rem;\n\n      > a {\n        display: inline-block;\n      }\n    }\n  }\n\n  @media (min-width: $screen-sm) {\n    padding: 3rem;\n    // Reduce space to article footer.\n    padding-bottom: 0;\n  }\n\n  @media (min-width: $screen-md) {\n    // Reduce space to article footer.\n    margin-bottom: 0;\n    padding: 0;\n  }\n}\n\n// Base typography styles. Trying to remove as much as possible from\n// the .main-page-content override.\nb,\nstrong {\n  font-weight: var(--font-body-strong-weight);\n  letter-spacing: 0.02rem;\n}\n\ntable {\n  border: 1px solid var(--border-primary);\n  border-collapse: collapse;\n  width: 100%;\n\n  th {\n    background: var(--background-primary);\n    font-weight: var(--font-body-strong-weight);\n    line-height: 1.5;\n    text-align: left;\n  }\n\n  td,\n  th {\n    border: 1px solid var(--border-primary);\n    padding: 0.5rem 0.75rem;\n    vertical-align: middle;\n  }\n\n  td {\n    .code-example pre {\n      margin: 0;\n    }\n\n    ul {\n      margin: 0;\n    }\n  }\n\n  caption {\n    font-weight: var(--font-body-strong-weight);\n    margin: 1rem 0 0.5rem;\n  }\n\n  &.properties {\n    border: none;\n    font-size: var(--type-base-font-size);\n\n    th,\n    td {\n      border: none;\n    }\n\n    th {\n      background: none;\n    }\n\n    tr {\n      border-bottom: 1px solid var(--border-secondary);\n\n      &:first-child {\n        border-top: 1px solid var(--border-primary);\n      }\n\n      &:last-child {\n        border-bottom: 1px solid var(--border-primary);\n      }\n    }\n  }\n\n  &.properties,\n  &.standard-table {\n    tr {\n      &:nth-child(odd) th,\n      &:nth-child(odd) td {\n        background-color: var(--background-secondary);\n      }\n    }\n  }\n}\n\niframe {\n  border: 1px solid var(--border-primary);\n  max-width: 100%;\n  width: 100%;\n\n  /* \"Live Samples\" discussion here:\n  https://github.com/mdn/yari-private/issues/370,\n  These src attributes taken from unsafe-html.js */\n  &[src*=\"https://mdn.github.io\"],\n  &[src*=\"https://www.youtube-nocookie.com\"],\n  &[src*=\"https://jsfiddle.net\"],\n  &[src*=\"https://test262.report\"],\n  &.nobutton,\n  &.sample-code-frame {\n    background: #fff;\n    border: 1px solid var(--border-primary);\n    border-radius: var(--elem-radius);\n    box-sizing: content-box;\n    padding: 1rem;\n    width: calc(100% - 2rem - 2px);\n  }\n}\n\nh1,\nh2,\nh3 {\n  letter-spacing: var(--heading-letter-spacing);\n}\n\nh1 {\n  font: var(--type-heading-h1);\n  margin-bottom: 2rem;\n  word-break: break-word;\n\n  @media (min-width: $screen-md) {\n    font: var(--type-heading-h1);\n  }\n}\n\nh2 {\n  font: var(--type-heading-h2);\n  margin: 4rem 0 0.5rem;\n}\n\nh3 {\n  font: var(--type-heading-h3);\n  margin: 2rem 0 0.5rem;\n}\n\n/* When an h3 immediately follows an h2 we want to use\n * a smaller top margin. We also make accommodation\n  for situations where there is an empty div\n  between the two elements */\nh2 ~ div ~ h3,\nh2 ~ h3 {\n  margin-top: 1rem;\n}\n\nh4 {\n  font: var(--type-heading-h4);\n  letter-spacing: 0.5px;\n  margin: 2rem 0 1rem;\n}\n\nh5 {\n  font: var(--type-heading-h5);\n  letter-spacing: 1.5px;\n  margin: 2rem 0 1rem;\n  text-transform: uppercase;\n}\n\nh6 {\n  font: var(--type-heading-h6);\n  letter-spacing: 1.5px;\n  margin: 2rem 0 1rem;\n  text-transform: uppercase;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  code {\n    font-size: inherit;\n  }\n}\n\np {\n  margin: 1rem 0 2rem;\n}\n\nblockquote {\n  border-left: 4px solid var(--border-secondary);\n  color: var(--text-secondary);\n  margin-bottom: 2rem;\n  padding: 1rem 2rem;\n\n  p {\n    margin: 0;\n  }\n}\n\npre,\ncode,\n.code-example {\n  border-radius: var(--elem-radius);\n  font-family: var(--font-code);\n  font-size: var(--type-smaller-font-size);\n  tab-size: 4;\n}\n\ncode {\n  background: var(--code-background-inline);\n  padding: 0.125rem 0.25rem;\n  width: fit-content;\n}\n\npre {\n  background-color: var(--code-background-block);\n  border: 1px solid transparent;\n  margin: 1rem 0 2rem;\n  padding: 1rem 2.5rem 1rem 1rem;\n\n  code {\n    background: none;\n    color: var(--text-primary);\n    padding: 0;\n  }\n}\n\nmath[display=\"block\"] {\n  margin: 1rem 0 2rem;\n}\n\n.example-good,\n.example-bad {\n  padding: 0 1rem;\n  position: relative;\n\n  &::before {\n    background-size: 24px;\n    content: \"\";\n    float: right;\n    height: 16px;\n    margin-left: 8px;\n    width: 16px;\n  }\n}\n\n.example-bad + .copy-icon,\n.example-good + .copy-icon {\n  display: none;\n}\n\n.example-bad {\n  background-color: var(--background-critical);\n\n  &::before {\n    background-color: var(--icon-critical);\n    mask-image: url(\"../assets/icons/no.svg\");\n  }\n}\n\n.example-good {\n  background-color: var(--background-success);\n\n  &::before {\n    background-color: var(--icon-success);\n    mask-image: url(\"../assets/icons/checkmark.svg\");\n  }\n}\n\n/*\n * multi-column layout on pages with an index such as\n * https://developer.mozilla.org/en-US/docs/Web/API#Specifications\n*/\n.index {\n  margin-bottom: 1rem;\n\n  ul {\n    margin: 0.5rem 0 2rem;\n\n    @media (min-width: $screen-xl) {\n      columns: 3;\n    }\n\n    li {\n      break-inside: avoid-column;\n      margin: 0 0 0.5rem;\n    }\n  }\n\n  .icon-experimental,\n  .icon-nonstandard {\n    color: var(--icon-information);\n  }\n\n  .icon-deprecated {\n    color: var(--icon-critical);\n  }\n}\n\n.callout {\n  background: var(--background-secondary);\n  border-radius: var(--elem-radius);\n  box-shadow: var(--shadow-01);\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  margin: 2rem 0;\n  padding: 1rem;\n  text-align: left;\n\n  h4 {\n    margin: 0;\n  }\n\n  p {\n    font: var(--type-smaller-font-size);\n    margin: 0;\n  }\n}\n\n.code-example {\n  --code-action-color: var(--text-secondary);\n  margin-bottom: 2rem;\n  position: relative;\n\n  [class*=\"interactive-example\"] {\n    display: none;\n  }\n\n  .example-header {\n    align-items: baseline;\n    background-color: var(--background-secondary);\n    border-bottom: 1px solid var(--border-secondary);\n    border-top-left-radius: var(--elem-radius);\n    border-top-right-radius: var(--elem-radius);\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n    margin: 0;\n    padding: 0.1rem 1rem;\n\n    &.active {\n      background-color: var(--background-toc-active);\n    }\n\n    ~ pre,\n    ~ iframe {\n      border-top: none;\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n      margin-top: 0;\n\n      &:not(:last-child) {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        margin-bottom: 0;\n      }\n    }\n\n    .ai-explain-info-toggle {\n      --icon-size: 12px;\n      background-color: var(--icon-secondary);\n      cursor: pointer;\n      mask-size: contain;\n\n      &:hover,\n      &:focus {\n        background-color: var(--icon-information);\n      }\n    }\n\n    .ai-explain-info {\n      background: var(--background-information);\n      font-size: smaller;\n      margin-bottom: 0.5rem;\n      order: 23;\n      padding: 0.5rem;\n      width: 100%;\n    }\n\n    .language-name {\n      margin-right: auto;\n      text-transform: uppercase;\n    }\n  }\n\n  .ai-explain-answer {\n    background-color: var(--background-secondary);\n    border: 1px solid var(--border-primary);\n    font: var(--type-article-p);\n\n    ~ .ai-explain-answer {\n      border-top: none;\n    }\n\n    > .ai-explain-header {\n      background-color: var(--background-primary);\n      border-bottom: 1px solid var(--border-secondary);\n      margin: 0;\n      padding-top: 1rem;\n      width: 100%;\n\n      > span {\n        padding: 0.25rem 1rem;\n      }\n\n      > pre {\n        background-color: var(--background-primary);\n        margin: 0;\n        padding: 0.25rem 1rem;\n      }\n    }\n\n    > div > p {\n      margin: 0;\n      padding: 0.5rem 1rem;\n    }\n\n    .ai-explain-feedback {\n      align-items: center;\n      display: flex;\n      flex-direction: row;\n      font-size: smaller;\n      gap: 0.5rem;\n      justify-content: flex-end;\n      padding: 0.5rem;\n\n      button {\n        cursor: pointer;\n\n        &.icon-thumbs-up:hover,\n        &.icon-thumbs-up:focus {\n          background-color: var(--icon-success);\n        }\n\n        &.icon-thumbs-down:hover,\n        &.icon-thumbs-down:focus {\n          background-color: var(--icon-critical);\n        }\n      }\n    }\n  }\n\n  .play-button,\n  .ai-explain-button {\n    color: var(--code-action-color);\n    cursor: pointer;\n    margin: 0;\n    text-transform: capitalize;\n\n    &:hover {\n      opacity: 0.6;\n    }\n\n    &:first-child {\n      margin-left: auto;\n    }\n  }\n\n  .playlist {\n    align-items: center;\n    display: flex;\n    gap: 0.5rem;\n\n    > label {\n      color: var(--code-action-color);\n      cursor: pointer;\n      padding: 1px;\n      text-transform: capitalize;\n\n      &:hover {\n        opacity: 0.6;\n      }\n    }\n\n    > input {\n      height: 0;\n      margin: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n\n      ~ label::before {\n        background-color: var(--code-action-color);\n        content: \"\";\n        display: inline-block;\n        height: 1rem;\n        margin-right: 4px;\n        mask-image: url(\"../assets/icons/queue.svg\");\n        mask-size: cover;\n        vertical-align: middle;\n        width: 1rem;\n      }\n\n      &:focus ~ label {\n        opacity: 1;\n      }\n\n      &:focus-visible ~ label {\n        opacity: 1;\n        outline-color: var(--accent-primary);\n        outline-offset: 1px;\n        outline-style: auto;\n      }\n\n      &:checked ~ label {\n        color: var(--category-color);\n        opacity: 1;\n\n        &::before {\n          mask-image: url(\"../assets/icons/queued.svg\");\n        }\n      }\n\n      &:checked ~ label:before {\n        background-color: var(--category-color);\n      }\n    }\n  }\n\n  .ai-explain-button.ai-explain-highlight {\n    animation: 1s ease-in 1 ai-explain-highlight-frames;\n  }\n\n  .play-button::before {\n    background-color: var(--code-action-color);\n    content: \"\";\n    display: inline-block;\n    height: 1rem;\n    margin-right: 4px;\n    mask-image: url(\"../assets/icons/play.svg\");\n    mask-size: cover;\n    vertical-align: middle;\n    width: 1rem;\n  }\n\n  .copy-icon {\n    align-self: center;\n    background-color: var(--code-action-color);\n    cursor: pointer;\n    height: 1rem;\n    margin-top: -0.1rem;\n    mask-image: url(\"../assets/clippy.svg\");\n    mask-size: cover;\n    padding: 0;\n    width: 1rem;\n\n    &:hover,\n    &:focus {\n      opacity: 0.6;\n    }\n\n    &:first-child {\n      margin-left: auto;\n    }\n  }\n\n  .copy-icon-message {\n    background: var(--text-primary);\n    border-radius: var(--elem-radius);\n    color: var(--text-invert);\n    font-size: 0.8125rem;\n    opacity: 1;\n    padding: 0.125rem;\n    position: absolute;\n    right: 0.25rem;\n    top: 2rem;\n  }\n\n  .example-good,\n  .example-bad {\n    padding: 1rem;\n  }\n}\n\na.page-not-created {\n  cursor: not-allowed;\n\n  &:link,\n  &:hover,\n  &:visited,\n  &:not([href]),\n  &:focus {\n    color: var(--icon-critical);\n    text-decoration: underline wavy;\n  }\n}\n\n.badge {\n  border: 1px solid var(--border-primary);\n  border-radius: 4rem;\n  color: var(--text-secondary);\n  font-size: var(--type-tiny-font-size);\n  padding: 0.125rem 0.375rem;\n  white-space: nowrap;\n}\n\nkbd {\n  border: 2px solid var(--border-secondary);\n  border-radius: var(--elem-radius);\n  box-shadow: var(--border-secondary);\n  box-shadow: inset 0 -1px 0 0 var(--border-secondary);\n  color: var(--text-secondary);\n  font-size: 0.825rem;\n  padding: 0.25rem;\n}\n\n.loading-error pre {\n  overflow-y: scroll;\n  white-space: pre;\n}\n\n.sidebar-container {\n  --offset: var(--sticky-header-with-actions-height);\n  --max-height: calc(100vh - var(--offset));\n\n  max-height: var(--max-height);\n  position: sticky;\n  top: var(--offset);\n  z-index: var(--z-index-sidebar-mobile);\n\n  @media (min-width: $screen-md) and (min-height: $screen-height-place-limit) {\n    display: flex;\n    flex-direction: column;\n  }\n\n  @media (min-width: $screen-md) {\n    z-index: auto;\n\n    .sidebar {\n      mask-image: linear-gradient(\n        to bottom,\n        rgb(0, 0, 0) 0% calc(100% - 3rem),\n        rgba(0, 0, 0, 0) 100%\n      );\n    }\n\n    @media not (min-height: $screen-height-place-limit) {\n      overflow: auto;\n    }\n  }\n\n  &.toc-container,\n  .toc-container {\n    .place {\n      grid-area: toc;\n      margin: 0;\n    }\n    @media (min-width: $screen-xl) {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      height: calc(100vh - var(--offset));\n      mask-image: linear-gradient(\n        to bottom,\n        rgba(0, 0, 0, 0) 0%,\n        rgb(0, 0, 0) 3rem calc(100% - 3rem),\n        rgba(0, 0, 0, 0) 100%\n      );\n      overflow: auto;\n      position: sticky;\n      top: var(--offset);\n\n      .place {\n        margin: 1rem 0;\n        padding-bottom: 3rem;\n      }\n    }\n    @media (max-width: #{$screen-md - 1}) {\n      .place {\n        display: none;\n      }\n    }\n  }\n  @media (min-width: $screen-xl) {\n    display: contents;\n\n    .sidebar {\n      mask-image: none;\n    }\n  }\n}\n\n@keyframes ai-explain-highlight-frames {\n  0% {\n    color: var(--text-primary);\n    opacity: 0.4;\n  }\n\n  50% {\n    color: var(--category-color);\n    opacity: 1;\n  }\n\n  100% {\n    color: var(--text-primary);\n    opacity: 0.4;\n  }\n}\n\nhtml a.only-in-en-us:after {\n  content: \"(en-US)\";\n  display: inline-block;\n  font-size: var(--type-tiny-font-size);\n  margin-left: 0.5ch;\n  vertical-align: super;\n}\n\nhtml[lang=\"de\"] a.only-in-en-us:after {\n  content: \"(engl.)\";\n}\n\nhtml[lang=\"es\"] a.only-in-en-us:after {\n  content: \"(inglés)\";\n}\n\nhtml[lang=\"fr\"] a.only-in-en-us:after {\n  content: \"(angl.)\";\n}\n\nhtml[lang=\"ja\"] a.only-in-en-us:after {\n  content: \"(英語)\";\n}\n\nhtml[lang=\"ko\"] a.only-in-en-us:after {\n  content: \"(영어)\";\n}\n\nhtml[lang=\"ru\"] a.only-in-en-us:after {\n  content: \"(англ.)\";\n}\n\nhtml[lang=\"pt-BR\"] a.only-in-en-us:after {\n  content: \"(inglês)\";\n}\n\nhtml[lang=\"zh-CN\"] a.only-in-en-us:after {\n  content: \"（英语）\";\n  margin-left: unset;\n  vertical-align: baseline;\n}\n\nhtml[lang=\"zh-TW\"] a.only-in-en-us:after {\n  content: \"（英語）\";\n  margin-left: unset;\n  vertical-align: baseline;\n}\n\n@media (max-width: $screen-sm - 1px) {\n  .table-container {\n    overflow-x: auto;\n  }\n}\n\n@media (min-width: $screen-sm) {\n  .table-container {\n    margin: 0 -3rem;\n    overflow: auto;\n    width: 100vw;\n  }\n\n  .table-container-inner {\n    min-width: max-content;\n    padding: 0 3rem;\n    position: relative;\n\n    &:after {\n      bottom: 0;\n      content: \"\";\n      height: 10px;\n      position: absolute;\n      right: 0;\n      width: 10px;\n    }\n  }\n}\n\n@media (min-width: $screen-md) {\n  .table-container {\n    width: calc(100% + 6rem);\n  }\n}\n\n@media (min-width: $screen-xl) {\n  .table-container {\n    margin: 0;\n    width: 100%;\n  }\n\n  .table-container-inner {\n    padding: 0;\n  }\n}\n","@use \"../../vars\" as *;\n\n.document-page {\n  .page-header,\n  .generic-loading,\n  .article-actions-container,\n  .document-toc-container,\n  .main-content,\n  .sidebar,\n  .metadata {\n    display: flex;\n  }\n\n  .main-content,\n  .sidebar {\n    flex-direction: column;\n    width: 100%;\n  }\n}\n\n.main-wrapper {\n  display: flex;\n  margin: 0 auto;\n  max-width: var(--max-width);\n\n  .toc {\n    display: none;\n  }\n\n  @media (min-width: $screen-md) {\n    display: grid;\n    gap: 3rem;\n    grid-template-areas: \"sidebar main\";\n    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);\n    padding-left: 1.5rem;\n    padding-right: 3rem;\n\n    .sidebar,\n    .toc,\n    .main-content {\n      padding-bottom: 3rem;\n      padding-top: 3rem;\n    }\n\n    .sidebar {\n      align-self: start;\n      grid-area: sidebar;\n      padding-top: unset;\n    }\n\n    .main-content {\n      grid-area: main;\n    }\n  }\n\n  @media (min-width: $screen-xl) {\n    display: grid;\n    gap: 3rem;\n    grid-template-areas: \"sidebar main toc\";\n    grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 15rem);\n    padding-left: 1rem;\n    padding-right: 1rem;\n\n    .toc {\n      --offset: var(--sticky-header-with-actions-height);\n\n      display: block;\n      grid-area: toc;\n      height: fit-content;\n      padding-bottom: 0;\n    }\n\n    .in-nav-toc {\n      display: none;\n    }\n  }\n}\n","@use \"../../vars\" as *;\n\n.page-wrapper {\n  grid-template-columns: 100%;\n}\n\n.standard-page {\n  max-width: inherit;\n}\n","@font-face {\n  font-display: swap;\n  font-family: \"Inter\";\n  font-stretch: 75% 100%;\n  font-style: oblique 0deg 20deg;\n  font-weight: 1 999;\n  src:\n    url(\"../../assets/fonts/Inter.var.woff2\")\n      format(\"woff2 supports variations\"),\n    url(\"../../assets/fonts/Inter.var.woff2\") format(\"woff2-variations\");\n}\n"],"names":[],"mappings":"AAgBA,MACE,4BAA8B,CAC9B,qCACA,qBACA,cACA,mBACA,kDACA,oDACA,sBACA,kBAGE,sBACE,gfADF,yDACE,4UADF,mEACE,kdADF,2DACE,kdADF,kEACE,gFADF,oEACE,6DADF,4BACE,sPADF,oEACE,0TADF,mEACE,4DADF,qBACE,6oBADF,6DACE,uLADF,oEACE,6DADF,uBACE,qIADF,gBACE,shDADF,6DACE,4TADF,kEACE,4EADF,gEACE,yDADF,uBACE,6gCADF,wEACE,iEADF,4BACE,mXADF,4DACE,icADF,mEACE,iFADF,oEACE,6DADF,0BACE,+NADF,yDACE,qFADF,2DACE,mFADF,0DACE,4cADF,oFACE,2DADF,iFACE,yDADF,mBACE,qXADF,mEACE,sVADF,uEACE,mTAON,qEAKA,wBACE,uEAKE,gEAIA,2FACE,k/CClDN,OACE,8BAA+B,CAC/B,uCAAwC,CACxC,2BACA,iCACA,YACA,4BACA,aACA,UACA,SACA,gBACA,4BAEA,eACA,0BACA,WAEA,eACE,yBACA,kBAGF,sBACE,iCAAkC,CAClC,mBAEA,4BACE,qBAAkC,CAClC,2BAAkC,CAItC,oBACE,kCAAmC,CACnC,kBAAmB,CAGrB,oBACE,aAGF,wBACE,oBACE,eAGF,kBACE,cCzCN,mBACE,GACE,UAGF,IACE,WAGF,GACE,WAIJ,sBACE,GACE,UAGF,IACE,UAGF,GACE,WC9BJ,iBACE,mBAEA,mBDJA,wCCKA,aACA,uBACA,UDPA,CEDF,yBACE,cACA,2BACA,WCCE,kDACE,eCLN,oBACE,8CACA,0BACA,aAEA,6DAEE,cACA,aACA,kBAGF,8BACE,mCAIJ,oBACE,GACE,UAGF,GACE,WCrBJ,iBACE,cACA,YACA,eACA,aACA,qBAEA,oBACE,aAGF,yBACE,aASA,2GACE,UAEA,oCACE,aACA,WACA,8BAEA,4CACE,iBAEA,qGAEE,+CACA,qBAIJ,iDACE,mBACA,aACA,SACA,8BAGF,sCACE,gBAEA,kDACE,aAGF,iDACE,gBAIJ,yCACE,gBACA,gBACA,kBACA,iBAGF,yFAEE,kBACA,gBACA,aACA,iBAGF,uFAEE,kBACA,2CACA,qCACA,iCACA,uBACA,gBACA,gBACA,aACA,8CACA,iBACA,gBACA,mBACA,kBACA,4CAEA,mGACE,6CAIJ,qDACE,6CACA,uCACA,4BCpGV,SACE,qBACA,YACA,kBACA,WAEA,aACE,wDACA,uCACA,mDACA,kBACA,sBACA,cACA,aACA,aACA,kBACA,YAGF,yBACE,sBAGF,0BACE,qBAGF,0BACE,sBAGJ,mBACE,GACE,uBAGF,GACE,yBCrCJ,QACE,mBACA,oBACA,kBAEA,cACE,SACA,SACA,UACA,UAEA,8BACE,kCAEA,qCACE,YACA,YAIJ,oCACE,oCACA,mBACA,mBAIJ,gBACE,uCACA,oBACA,eACA,aACA,kBACA,eACA,UAEA,uBACE,2CACA,kBACA,YACA,WACA,WACA,kBACA,aACA,SACA,eAIJ,eACE,iBChDJ,SACE,4BAEA,mBACE,aAGF,iBACE,0BACA,4BACA,qBACA,SAGF,YACE,8CACA,kCACA,4CACA,+BAEA,kBACA,+BACA,gBAEA,qBAGF,uBARE,qBAIA,iCAQA,CAJF,WACE,4BAGA,eAEA,kCAEE,4DAIJ,oBACE,aACA,yCACA,2CACA,sBACA,kBAEA,4BACE,eAIJ,iCACE,iBAGF,YACE,wCAEA,8BAEE,mBAIA,qBACE,mBAGF,yBACE,cACA,2CACA,qBAKN,0BACE,SACA,oBACA,wCACA,MACA,mCAEA,6CACE,iBAGF,wBAXF,0BAYI,aACA,iBACA,qBACA,eACA,UAEA,6CACE,kBAQN,8DAEE,gBAGF,6BAEE,oBAGF,iBACE,cACA,CAGF,+BAHE,uCAWA,CARF,cACE,yBACA,iCACA,6BAEA,gBACA,gBACA,mBACA,qBAGF,iBACE,gBAEA,oBACE,oBAIJ,eACE,kBACA,qBACA,YACA,qBACA,sCACA,WAIF,uDAEE,yCAGF,0BACE,sCAIF,wBA7JF,SA8JI,aACA,OACA,iBACA,eACA,QACA,kBACA,4BAEA,wBACE,qCACA,6CACA,aACA,yBACA,6BACA,gBACA,gBACA,cACA,aACA,kBACA,4BACA,gCACA,WACA,sBAEA,2CACE,iBACA,4IAKA,qBAGF,8CA1BF,wBA2BI,aACA,sBACA,gBAEA,2CACE,cACA,eA1CR,wBA8CI,+BACE,kBACA,aACA,oBACA,gBAIJ,mBACE,qBACA,gBACA,SACA,eAEA,aACA,OACA,UACA,eACA,QACA,MACA,8BACA,WACA,oBAUA,+EACE,wBAGF,+BACE,WAKN,wBACE,gBACE,aAvPN,SA2PI,aACA,kBALE,CAOJ,2CA9PF,SA+PI,cACA,eAEF,yBAlQF,SAmQI,6BACA,wCACA,mBCnQJ,cACE,mBACA,UAEA,wBAJF,cAKI,gBAIF,2CACE,4BACA,qBACA,gBAIF,qCACE,wCACA,gBACA,eAEA,wCACE,SAKJ,kDACE,8CACA,4BACA,qBACA,mBACA,kDAEA,wDACE,uBAGF,iHACE,8CACA,kCACA,4CACA,+BACA,0BACA,gBAIJ,uDACE,kBAGF,wBACE,cCvDJ,cACE,aACA,cAEA,6CAEE,0BACA,kDAGF,0BACE,wCACA,yBACA,qBACA,cACA,kBACA,YACA,iBACA,4DACA,yBACA,4CAEA,gEAEE,cACA,kDAIJ,yBACE,sCAAuC,CACvC,iCAAkC,CAElC,qCAAsC,CACtC,gCAAiC,CAEjC,kEAAmE,CACnE,wDAAyD,CAEzD,sBAAuB,CACvB,uCACA,mCACA,YACA,SACA,iBACA,gBACA,kBACA,YAEA,kCApBF,yBAqBI,iEAAkE,CAClE,uDAAwD,CAAxD,CAGF,oCACE,cACA,kBACA,QACA,MAEA,0CACE,cACA,kDAIJ,+BACE,YACA,UACA,WAEA,mCACE,YACA,WAGF,2CACE,2FAMA,mCACA,kCACA,aACA,sBACA,WACA,YACA,oBACA,kBACA,MACA,WAEA,kDACE,mBACA,iBACA,eAGF,gDACE,iBACA,iBACA,eAGF,qDACE,mCAAoC,CACpC,2BAA4B,CAC5B,sCACA,iBACA,mBACA,mBACA,iBACA,gBACA,4BACA,iBACA,+BAEA,2DACE,+BAGF,2DACE,wCAAyC,CACzC,6CAOV,wBACE,6CACA,uCACA,mBACA,UACA,YAEA,8BACE,mBACA,aACA,sBACA,gBAEA,kCACE,SACA,mBACA,eAGF,mCACE,4BACA,iBACA,cAKN,uBACE,4BACA,gBACA,oBACA,gBACA,UACA,WAEA,0DAEE,cACA,kDAIJ,mBACE,sBAEA,gBACA,iBAGF,0CALE,6CAOA,CAFF,uBAEE,iBAGF,kBACE,mBACA,aACA,kBAEA,yCACA,gCACA,cACA,WAEA,wBAVF,kBAWI,kDACA,gEAGF,4BACE,YACA,iBACA,WAEA,kCACE,6BACA,mBACA,eACA,gBACA,kDAEA,sCACE,sCACA,0CACA,WAGF,uCACE,6BACA,0CACA,cACA,eAIJ,sCACE,iDACA,iCACA,iCACA,wCACA,cACA,8CACA,kBACA,oBACA,kBAGF,uCACE,eACA,0BAIJ,2BACE,6BACA,aACA,qBACA,WAIJ,6BACE,aAIJ,+BACE,iEAAkE,CAClE,uDAAwD,CAG1D,kDAEE,iDACA,aACA,uCACA,qEACA,SACA,WAEA,gEACE,aACA,gBACA,gBACA,uBAEA,wEACE,YAIJ,wEACE,gBACA,cACA,6BAIJ,YACE,wDAAyD,CACzD,2CAA4C,CAC5C,oDAAqD,CACrD,uDAAwD,CAExD,uDAAwD,CACxD,0CAA2C,CAC3C,mDAAoD,CACpD,sDAAuD,CAEvD,wDAAyD,CACzD,8CAA+C,CAC/C,gEAAiE,CACjE,sDAAuD,CAEvD,6CACA,8CACA,gCAEA,kCApBF,YAqBI,uDAAwD,CACxD,6CAA8C,CAC9C,+DAAgE,CAChE,qDAAsD,CAAtD,CAGF,qBACE,gBAGF,wBA/BF,YAgCI,cAGF,2BACE,eACA,gBACA,qCACA,cAEA,0CACE,+BAEA,gGAEE,4DAKN,2BACE,aAKF,8BACE,aACA,kBACA,UAIJ,kBACE,uDAAwD,CACxD,6CAA8C,CAC9C,+DAAgE,CAChE,qDAAsD,CAGxD,yBACE,iFAIA,2DACA,SACA,WAEA,qDACE,gBACA,aACA,mDACE,CAEF,oEACA,cACA,2BACA,eAEA,2DACE,eACA,oBAEA,+DACE,YAIJ,gEACE,2DACA,kBACA,eACA,iBAGF,8DACE,2DACA,kBACA,aACA,gBAGF,yBAlCF,qDAmCI,yCACE,CAEF,sFACA,8BAGF,wBA1CF,qDA2CI,yCACE,CAEF,8BACA,6BAEA,8DACE,iBACA,6CAMR,wBACE,kBACE,oBACA,gBACA,iBAEA,yDAEE,WAEA,qEACE,mBAGF,+EACE,aAIJ,2BACE,aACA,gBACA,iBAEA,sCACE,aACA,aACA,YAEA,gDACE,4BAGF,iDACE,6BAIA,gDACE,YACA,kBACA,WACA,UAGF,wDACE,gBACA,4CACA,sBACA,YACA,oBACA,mBACA,YC/dZ,0BACE,+FAKA,aACA,sBACA,wCACA,oBACA,oBACA,kBAEA,wBAbF,0BAcI,sBAGF,0CACE,mBACA,aACA,oBAGE,gFACE,uCAKN,gDACE,WACA,kBACA,QAEA,sDACE,qBACA,YACA,sCACA,WAIJ,sDACE,wBACA,2CACA,uCACA,mBACA,0BACA,+BACA,qBAEA,4DACE,mCACA,uEACE,CAEF,eAGF,gEACE,WAGF,kGACE,iDAGF,4HAEE,mBACA,WAMA,4WACE,cAIJ,4EACE,6BACA,mBACA,aACA,qCACA,iBACA,kBACA,aAEA,wBATF,4EAUI,YAIJ,0FACE,aACA,kBACA,aAEA,gGACE,iBAGF,wBATF,0FAUI,wBAKN,kCACE,oCAAqC,CACrC,sBAAuB,CACvB,kBAAmB,CACnB,aAGF,gCACE,uCACA,mBACA,eACA,kBACA,cAKF,cACE,mCACA,YChIF,iCACE,aAIA,4BACE,kBACA,+BACA,4DACA,sFACA,iCACA,2BAGF,4BACE,+BAEA,yBACA,qBACA,yBAGF,uCACE,cACA,iCACA,0BACA,mBACA,eAEA,qDACE,mCACA,mBAEA,wBAJF,qDAKI,6BAIJ,yCACE,kBACA,mCAIJ,6BACE,cC9CN,uBACE,mBACA,aACA,kBAEA,0BACE,aACA,eACA,gBACA,iBACA,eAGF,0BACE,aACA,kCAGA,+CACE,oBAIA,4CACE,uCACA,WACA,cACA,cACA,YACA,mBACA,+HACA,uBACA,wCAKJ,wCACE,kBAGA,mFAEE,2BAGF,mCACE,2DAGF,2CAGE,oEACE,mCACA,mBACA,mBAKN,2CACE,oBACA,mBAIJ,0BACE,0BACE,qBC/BJ,mDAGA,gBAEA,SACE,UAGF,6DAGE,yCACA,CACA,yBAEA,cACA,WAEA,mHACE,yBAGF,kDACE,wCACA,6BAGO,6FACP,4CAGF,kDACE,qDACA,sCAGF,kDAMA,kBADF,oDA9EA,4CACA,uCACA,iCACA,4BAEA,gBACA,cACA,kBACA,+CACA,6CAES,uCACP,0CAGF,0CACE,gCAQF,kDAGE,UACA,cACA,WACA,yBAuDA,qBADF,0DApFA,4CACA,uCACA,iCACA,4BAEA,gBACA,cACA,kBACA,+CACA,6CAES,6CACP,0CAGF,gDACE,gCAQF,wDAGE,UACA,cACA,WACA,yBA6DJ,oBACE,kBACA,aAEA,4CAIA,8CAIA,eAZF,yBAaI,6DAKF,oDAEA,YACA,oBACA,kBAGF,iDAEE,uCAIE,+FACE,0CAKN,EACE,0BAEA,YAHF,yBAII,0BACA,kDAKJ,kBACE,kEAGF,0EACE,mCACA,2CAEA,mBACA,WACA,qBACA,aACA,kBAGF,YACE,6DACA,sCC5JA,uDACE,cAMA,oCACE,gBAGF,mCACE,mBAIJ,6BAEE,wBAEA,qDACE,0DACA,0BACA,cACA,qCAEA,2DACE,uBAGF,4DACE,mBACA,aACA,SAGF,6DACE,aAGF,mEACE,kBACA,mCACA,gBAGF,2DACE,mBAGF,iFACE,uCAEA,uFACE,kCAKN,gDACE,qCACA,iBACA,wBAIJ,wBA7DF,eA8DI,SCtEJ,UACE,kBAEA,eACE,uCACA,uCACA,iCACA,4BACA,OACA,cACA,kBACA,qBACA,2BAGF,wCACE,UACA,QAIA,8BACE,WAEA,2CACE,2CAA4C,CAC5C,iBAAwB,CACxB,2BACA,gBACA,oBAEA,iDACE,yCAA0C,CAI9C,+CACE,qCAAsC,CACtC,6CAA8C,CCtCtD,cACE,mBACA,aACA,mBACA,SACA,aAEA,4BACE,wBACA,6BACA,8BACA,4BAEA,0BACE,GACE,UAGF,IACE,4BACA,UAGF,IACE,4BAGF,GACE,4BAON,cACE,uBAAwB,CAG1B,eACE,wBAAyB,CAG3B,cACE,uCAMA,2FACE,qCAGF,iGACE,sCCrDN,iBACE,iBAEA,iDACE,aAGF,6CACE,oBAGF,yCACE,cAGF,wBAfF,iBAgBI,cAEA,yCACE,cAKJ,wBACE,8BACE,2CACA,0BACA,cACA,aACA,OACA,cACA,iCACA,eACA,iCACA,YACA,2BAEA,8KAGE,iBAAkB,CAClB,gDACA,WAEA,qNACE,2BACA,eACA,oBAIJ,8DACE,cAGF,uDACE,cACA,aAGF,0GAEE,gDAGF,qDACE,eAMR,yBACE,qBAAsB,CACtB,aACA,cAEA,8BACE,qCACA,SACA,aACA,sBACA,OACA,eACA,QACA,iCACA,2BAIA,8DAEE,sBAIJ,iCACE,8CACA,0BACA,cACA,6BACA,wCACA,2CACA,SACA,aACA,gBACA,WAEA,+CACE,mBACA,aACA,UACA,kBAGF,uCACE,wBAGF,8CACE,aAIJ,mEAEE,SAEA,oBAEA,yFACE,oBAIJ,mCACE,6BACA,gBAEA,0CACE,YAGF,qCACE,SACA,UAIJ,wBACE,8BACE,6CACA,uCACA,iCACA,YACA,4BACA,kDACA,yEACA,UACA,kBACA,QACA,qBACA,YACA,2BAGF,iCACE,cACA,mCACA,kBAEA,uCACE,uBAGF,8CACE,cAGF,6CACE,aAGF,uCACE,OACA,mBAMR,yBACE,aACA,gBACA,SACA,UAEA,wBANF,yBAOI,aACA,UAEA,yCACE,cAKN,uBACE,mBACA,aACA,kBCnNF,4BACE,gBAGF,eACE,qCACA,SACA,aACA,uBACA,OACA,cACA,iCACA,eACA,QACA,MACA,qCAGE,0CAEE,sBAKN,eACE,qCACA,mBACA,aACA,eACA,qCAGF,cACE,mBACA,aACA,8BACA,sBAEA,+BACE,oCAAqC,CAErC,qCACE,kCAAmC,CAGrC,4CACE,YACA,cACA,cACA,WAIJ,oBACE,eACA,SACA,cAIJ,eACE,iBACA,gBACA,SAIA,sBAEE,gBAGF,cAEE,gBACA,uBAEA,0BACE,SAKF,wBACE,sCACE,uBAIJ,yCACE,2BACA,uBACA,WACA,2BAIJ,mBACE,OAIJ,wBACE,4BACE,eAGF,eACE,mBACA,2BAGF,eACE,iCACA,gCACA,8CACA,gBACA,gBACA,cACA,iCACA,WAEA,wBACE,gBAGF,sBACE,YChIN,yBACE,qBAAsB,CAEtB,cACA,gBACA,kBACA,mBCLA,4BACE,mBACA,oBACA,2CACA,YACA,kBAEA,qEAEE,4BCTJ,uBACE,cAGF,8BACE,2BACA,2BAGF,gCACE,kBAEA,sCACE,yCAIJ,wBACE,8BAGE,oCCtBN,2BACE,mBACA,6CACA,8CACA,SACA,mDACA,UACA,wCACA,MACA,2BAEA,sCACE,mBACA,aACA,UACA,8BAIF,2CACE,aAGF,wBACE,2CACE,mBACA,mBACA,aACA,mBAEA,wDACE,gBACA,8CAKN,wBArCF,2BAsCI,gBAEA,sDACE,eAIJ,yBACE,sCACE,kBACA,oBChDN,qBACE,uCAAwC,CACxC,yCAA0C,CAC1C,mCAAoC,CACpC,mCAAoC,CAEpC,8BACA,gBACA,kBAKE,kEACE,kBAGF,sDACE,qBACA,mBACA,kBACA,WAEA,wBANF,sDAOI,kBACA,YACA,QACA,4BAGF,yEACE,qCAAsC,CACtC,SACA,kBACA,QACA,iCAGF,4DACE,4BACA,YACA,WAIJ,mCACE,eACA,SACA,gBAEA,wCACE,kBAIJ,kCACE,cAEA,6CACE,gBAIJ,0EAGE,2IACE,CAMJ,kCACE,uBACA,4DAGF,6CACE,kBACA,gBAQJ,wBACE,gEACE,iBAIJ,wBACE,gEACE,iBChGN,mBAGE,0BACA,2CAA4C,CAC5C,2CAA4C,CAC5C,yCAA0C,CAC1C,2BACA,aACA,uBAEA,uBACE,iBACA,gBACA,0CAGF,4BACE,4BAGF,6CACE,iBAGF,6CACE,iBAGF,6CACE,iBAGF,6CACE,iBAGF,6CACE,eAIA,uDACE,WAGF,wEACE,oBAGF,wEACE,oBAGF,wEACE,oBAGF,wEACE,oBAGF,wEACE,oBAGF,wEACE,oBACA,gBACA,gBAKF,gEACE,4CACA,sCACA,4BAGF,wEACE,qBACA,6BAGF,wEACE,qBACA,6BAGF,wEACE,qBACA,6BAGF,wEACE,qBACA,6BAIJ,gCACE,GACE,4BAGF,IACE,4BAGF,IACE,6BAGF,IACE,4BAGF,IACE,4BAGF,IACE,6BAGF,IACE,4BAGF,IACE,4BAGF,IACE,6BAGF,IACE,4BAGF,IACE,4BAGF,IACE,6BAGF,IACE,4BAGF,GACE,6BCzJN,YACE,2CACA,0BACA,aACA,sCACA,WAEA,+BACE,mBAEA,4BACA,aACA,mBACA,cACA,WACA,cACA,gBACA,aAEA,+BACA,WAEA,mDACE,iBACA,UAEA,sDACE,eACA,gBAEA,2DACE,cAGF,uEACE,oBAIJ,sDACE,4BACA,WAGF,mEACE,aACA,SACA,WAEA,qEACE,iCACA,eACA,gBACA,iBACA,cACA,kBACA,kBAEA,wBACA,YACA,WACA,UAGF,mFACE,qCACA,qCACA,yBAEA,yFACE,uCACA,mCAIJ,qFACE,+BACA,oDACA,WAGF,2FACE,0DAMR,6BACE,uCAAwC,CACxC,cACA,WACA,gBACA,MAEA,8BACA,WAEA,gDACE,4CACA,wBAFF,gDAGI,kCCvGR,wBACE,2CACA,0BACA,iBACA,WAEA,iCACE,mBACA,aACA,8BACA,SACA,YACA,8BACA,cACA,gBACA,kBACA,WAEA,yBAZF,iCAaI,oBAGF,iGAEE,aACA,sBACA,WAGF,gDACE,mBACA,mBACA,0CACA,YACA,gBACA,yBANF,gDAOI,0BAIJ,iDACE,mBACA,gBAEA,kBAEA,mDACE,sBAGF,oDACE,+BACA,yBACA,qBACA,mBACA,aACA,yBAGF,oDACE,kBACA,gBACA,aAGF,yBAzBF,iDA0BI,mBACA,YACA,cACA,oBAON,+CACE,sBACA,yBAFF,+CAGI,oBAKN,uCACE,uCAEA,gDACE,sBACA,yBAFF,gDAGI,4BC5FN,wBAEA,oCACE,oCAEA,aACE,kBACA,kBACA,yBAEA,mCALF,iBAMI,wCAIA,cACA,kBACA,+BACA,gBACA,iBAEA,kFAPF,yBACE,CAKA,kBAMA,iGAGF,kBAEE,aACA,sBACA,SACA,uBACA,cACA,mIAEA,YACE,yBAGF,gGAbF,mBAcI,mBACA,sIAGF,kBACE,uCACA,mBACA,yBACA,aACA,sBACA,SACA,gBACA,gBAEA,WACA,iJAEA,yCACE,mJAGF,wCACE,+IAGF,0CACE,2IAGF,oBACE,4BACA,0BACA,cACA,SACA,cACA,WACA,yJAGF,YACE,sBACA,WACA,YACA,gBACA,oBACA,WACA,2TAEA,QAEE,uKAGF,oBACE,iBACA,aACA,8BACA,YACA,6LAEA,cACE,kBACA,+BACA,gBACA,gBACA,mBACA,iBACA,mLAGF,eACE,oBACA,+LAGF,eACE,kBACA,+BACA,gBACA,kBACA,iBACA,cACA,gBACA,6KAIJ,qBACE,+JAGF,qBACE,qBACA,iBACA,WACA,qKAEA,gBACE,mBACA,gBACA,WACA,yKAEA,wBACE,kCACA,CADA,yBACA,4CACA,qLAEA,iDACE,qLAIJ,sDACE,oBACA,mBACA,6KAKN,kBACE,kBACA,mBCvJW,mBDyJX,0BACA,aACA,gBACA,YACA,uBACA,8BACA,CADA,qBACA,qBACA,wBACA,uKAGF,wBACE,eACA,kBACA,mCACA,gBACA,4DACA,qMAEA,mCACE,2KAIJ,wBACE,wCACA,6BACA,iKAGF,iDACE,kDACA,iCACA,6KAEA,2CACE,WACA,qBACA,YACA,kBACA,4IAEA,WASd,qBACE,yBAEA,UACA,sBACA,mBExNF,iBAGE,sBAmBA,iDAFF,QAQA,CANE,MACA,eAKF,gBACE,sBAIF,kCACE,gCACA,4CACA,6BAKF,8EAIA,+BACE,qBAMA,0BAKF,qDACE,8BAQA,mDAME,yBAGF,oDAGE,sCACA,+BACA,oCC4iBJ,ECthBM,kQAQA,qYAGE,gCAKN,8BACE,eAIA,gCAGF,mCACE,eAGF,WACE,+FAGF,wCAOE,wCACA,6DAMA,0CAEE,iFAEA,0BACE,2BC/JR,kCAGE,yBACA,YACA,gFCPF,8DAIE,CAGF,iDACE,oDACA,4CACA,2DACA,oCACA,gEACA,0BACA,oCACA,mBACA,4CACA,0DAGA,wEAGA,iEAIA,CACA,iEACA,iCACA,8BAEA,uEAGA,gEAEA,oCAEA,4CAIA,kCACA,kDAKF,2EAKE,oEACE,kEAMF,mCACE,kGAQF,+DACE,+BACA,wEAOF,iEAEA,8DACE,iCAGF,0BACE,qEAQF,8DAMF,2HAGE,mQAaA,6BACA,sXAeE,wCAGF,2CAMF,mDACE,kDACA,+EACA,yBACA,oCACA,yFAIA,gCACA,iFAIE,4BACA,qBAGF,+BACE,aACA,SACA,uBACA,gHACA,gCACA,YACA,kDAGA,8CAKF,gDAEA,oDAEA,0CAEA,6CAEA,yCACA,qCAEA,wBAEA,2CACA,mCAEA,oCACE,UACA,6BACA,CCjMJ,kCACE,oDACA,4CAIF,mCAEE,0BAEA,aACA,wBAEA,uCACE,uBAIA,mCACA,oCAGE,gHAIJ,6DAKE,uDAEA,wDAGA,+IAEA,mEAEE,qDAKJ,sCACE,kDAMA,wFAKA,uBAEA,kIACA,uBACA,yBACA,mBAEA,2CAEA,4CAGF,qCAGE,gDAIA,kDAEA,yBACE,0DACA,iCAIJ,uCAEE,qCAGA,kCACE,gDAGF,kDACE,yBAOJ,oCACE,oGAGE,mWAQA,6DAIJ,gBACE,CACA,gBACA,qBACA,6BCzGJ,qJAEE,oCAIA,yBACA,oFACA,gEAIA,wBACA,kCACA,kCACA,yCACA,uBACA,mDAGA,2BACA,qCACA,yCACA,qCACA,gCACA,wBACA,+BACA,kDAGA,+DACA,mBACA,0DACA,mGAEA,yEAEA,4GAEA,sJAEA,2EAEA,0GAEA,8HAEA,oFAEA,0GAEA,0BAIA,kBACA,mCACA,oCACA,WACA,kGAEA,gEAEA,CAKA,uCACA,oBACA,8BACA,iCACA,4CAEA,sBACA,oCACA,sCAEA,+BAGA,6CACA,2DAIA,oDAEA,mGACA,kIACA,kBAOA,uGACE,qVAWJ,4FAEE,6DAGF,gJAOE,uCACA,0CACA,2EASF,6CAEE,+BAIF,8CAGE,mCAKE,8DAEE,0EAGF,qCAEE,CAKN,mCACE,mCACA,+BACA,kCACA,+BACA,4CAEA,4CAEA,4CAEA,4CAOF,sGAUE,uEAMF,8GAQE,8GACA,8GAMF,CAEE,6GAcA,uGASE,2MAWJ,8DACE,8BACA,mCAIF,mEAEE,+DAEA,iDACA,mFACA,kBACA,oDAIF,oDACE,6FAEA,sFACA,iBACA,yEAIA,sIAEA,yBACA,4GAKA,uGAEA,uGAKF,uGAEE,gFACA,2GAKF,6DACE,wCACA,2CACA,qFAEA,yBAGF,4CACE,kDACA,6DACA,wEACA,iCAIF,0BCnUE,uDACE,4BACA,8FAEA,uCACA,+BAQF,qBAEE,sBACA,0BACA,4GACA,oDACA,yBACA,oBACA,0BApBA,uBACA,uBADA,qBACA,8EACA,+BACA,4BACA,qEDwUA,6DAMF,wBACA,gBACA,oDAGA,kBACA,iCACA,mBACA,iBAEA,eACE,mDAIJ,6BACE,oLAUA,YACA,yHACA,2BACA,mBACA,2DACA,q6GEnXF,WPooBA,sBAEE,uBACA,wBACA,yCACA,8BACA,8BACA,4BACA,oCACA,2CACA,kBACA,kBACA,kBACA,kBACA,kBACA,kBACA,QAGF,sBAlpBE,yBACA,sBACA,0BACA,oBACA,uBACA,mBACA,qBACA,0BAEA,+BACA,8BACA,gCACA,mCACA,kCAIA,mCAIA,+BAIA,gCAIA,+BAIA,2BAIA,2BAIA,yBAEA,2BACA,iCAEA,+BACA,gCACA,kCACA,gCAEA,iCACA,kCACA,oCACA,wCACA,sCACA,4CACA,uBAEA,yBACA,2BACA,uBACA,wBACA,uBACA,yBAEA,kCACA,2BAKA,4BACA,gCAKA,gCACA,+BACA,6BACA,yBAEA,iCACA,oCACA,qCACA,6BACA,6BACA,8BACA,iCACA,gCACA,gCAEA,8BAEA,qBAEA,4BACA,yBAEA,sCACA,qBACA,qBACA,4BAEA,4BACA,2BACA,0BACA,4BACA,4BACA,6BACA,0BAEA,0BACA,yBACA,wBACA,0BACA,0BACA,2BACA,0BAEA,0BACA,yBACA,wBACA,0BACA,0BACA,2BACA,yCAEA,yCACA,wCACA,uCACA,yCACA,yCACA,0CACA,+BAEA,+BAIA,8BAIA,6BAIA,+BAIA,+BAIA,gCAIA,iCAKA,qBACA,2BAEA,6BACA,4BACA,8BACA,2BAEA,6BACA,8BACA,2BACA,uBAEA,yBACA,0BACA,uBACA,uBAEA,yBACA,0BACA,uBACA,4CACA,yBAEA,8BACA,gCACA,yBACA,sCACA,iCACA,8CACA,6BACA,qCACA,6BACA,oCACA,mCACA,sCACA,mCACA,sCACA,4BACA,yCACA,sCACA,iCACA,qCACA,iCACA,qCACA,iCACA,qCACA,iCACA,qCACA,iCACA,kCACA,uCACA,qCACA,2BAEA,oCACA,6BACA,mCACA,4CACA,2BAEA,kCACA,kEACA,8BACA,0BACA,iCACA,6BACA,gEACA,+BACA,kCACA,8BACA,qCACA,wEACA,iCACA,iCACA,8BAEA,qCACA,oCACA,gDACA,8CACA,gDACA,8CACA,gDACA,mCACA,4CACA,+CACA,qDACA,oCACA,2BACA,wCACA,2CACA,2CACA,yCACA,2CACA,yCACA,2CACA,0CACA,kCACA,qDACA,0CACA,0DACA,wDACA,0DACA,wDACA,0DACA,0DACA,wDACA,0DACA,wDACA,0DACA,0DACA,wDACA,0DACA,wDACA,0DACA,mCACA,qEACA,mFAGA,qHAGA,6GAEA,6GACA,iHAEA,+HACA,+HAEA,mIAEA,+HAEA,wGACA,qFAEA,mGACA,iGAGA,uGAGE,2FACA,qGACA,mGAOF,yFAIA,mGAIA,uCAEA,4CACA,+HAKA,yHAYA,6HAcA,yHAKA,2BACA,+CAEA,0BACA,2CACA,sBACA,kDACA,+BACA,8DAGA,mCACA,CACA,iCACA,mCAEA,+BAEA,gCAKA,+BACA,2BAKA,oDACA,2BACA,8BACA,+BAEA,gCACA,+BACA,mCACA,iCACA,kCACA,oCACA,wCACA,sCACA,CAEA,2CAEA,oBAEA,oDACA,uBAEA,yBACA,sBACA,yBACA,kCAEA,2BACA,4BAEA,gCAEA,gCACA,+BAGA,0BACA,yBACA,iCACA,oCAEA,qCAEA,6BACA,0BACA,8BACA,iCAEA,gCACA,mCAEA,mDACA,4BACA,yBACA,sCACA,0CACA,wDACA,2BAEA,sDAIA,yDAIA,0BAIA,mDAIA,kDAIA,0BAIA,qDAKA,0BACA,yBAEA,wBACA,0BACA,0BACA,2BAEA,yCACA,yCAEA,wCAEA,uCAEA,yCAGA,yCACA,0CAEA,+BACA,+BAEA,8BACA,6BAEA,+BACA,+BACA,iEAEA,gDACA,6BACA,0DACA,wDACA,yDACA,uBACA,uEACA,uBACA,gDACA,mEAEA,yBACA,8DAEA,+DAEA,oCACA,8CAEA,6BACA,kEACA,oCAGA,mCACA,sCAEA,yEAGA,+BACA,yCACA,sCACA,iCACA,qCAEA,sEACA,iCACA,qCACA,iCACA,qCACA,sEACA,uCAEA,qCAEA,2BACA,oCACA,6BACA,+EAEA,2BACA,kCACA,uEACA,8BACA,0BACA,8DACA,qEAEA,iEACA,8BACA,qCACA,6EACA,iCACA,iCACA,2BACA,2CACA,yCACA,2CACA,yCACA,2CACA,iEACA,oCACA,+CACA,yFACA,4CACA,8CACA,kFACA,+CACA,qDACA,oCACA,wEACA,0CACA,4EACA,qDACA,wCACA,mGAEA,8GACA,8GAEA,2DAGA,iHACA,wDACA,0DACA,wHACA,6DACA,2DACA,mGACA,qEACA,mFAEA,oHAEA,4GACA,4GAEA,gHAEA,8HAmCF,8HA7BI,kIACA,8HA1nBF,uGAKA,oFAIA,kGAGA,gGAKA,sGAQA,0FAQA,oGAWA,kGAIA,wFAGA,kGAGA,iCACA,2CACA,6HAKA,wHAKA,4HAYA,wHAGA,qCAEA,6BACA,+CACA,sBACA,0BACA,2CACA,mBACA,+CACA,+BACA,8BAEA,gCAEA,mCAGA,kCAEA,mCAEA,+BAGA,gCACA,+BAEA,2BACA,2BAEA,yBAEA,2BACA,iCACA,+BACA,gCACA,kCAEA,gCAEA,iCACA,kCAEA,oCACA,wCACA,sCACA,4CAEA,uBACA,yBACA,kDACA,wBACA,gDACA,kCACA,uDAEA,gCAIA,gCAIA,+BAIA,6BAIA,yBAIA,qEAIA,qCAMA,6BAEA,6BACA,8BACA,iCACA,gCAEA,gCACA,8BACA,qBACA,4BAGA,yBACA,sCACA,qBAEA,qBACA,4BACA,4BACA,2BACA,sDAEA,4BACA,uDACA,0BACA,iDACA,oDACA,qDACA,0BACA,yBACA,kDACA,qDACA,yCACA,iFACA,uCACA,yCACA,yCACA,0CACA,+BACA,+BACA,8BACA,6BACA,+BAEA,+BACA,gCACA,iCACA,qBACA,2BACA,yDACA,+BACA,2BAEA,0DACA,2BACA,uBACA,mDACA,uBAEA,gDACA,iDACA,4CACA,yBACA,CACA,6BACA,yDACA,sCAEA,iCACA,8CACA,6BACA,qCACA,6BACA,CAEA,sEAEA,sCACA,mCACA,sCACA,4BACA,yCACA,sCACA,iCACA,qCACA,sEACA,iCACA,qCACA,iCACA,qCACA,iCACA,kCACA,uCACA,qCACA,2BACA,iEACA,mCACA,4CACA,2BACA,oGAEA,wDACA,8DACA,gEACA,iEACA,mEACA,wEACA,iCACA,iCACA,mEACA,oCACA,8FACA,gDACA,8CACA,gDACA,+EACA,oGAGA,uGAGA,2CACA,oFACA,oFACA,qFACA,uFACA,0CACA,kHACA,0DACA,wDACA,0DACA,0DACA,kHACA,wDACA,0DACA,0DACA,wDACA,kHACA,0DAEA,mCAsWF,qEAnWI,mFACA,qHAEA,6GAMF,6GAKA,iHAKA,+HAMA,+HAQA,mIAgBA,+HAMA,wGAIA,qFAEA,mGAGA,iGAIA,uGAMA,2FAKA,qGAMA,mGAGA,yFAGA,mGAIA,uCACA,6EAEA,6BAEA,wHAOA,yHAKA,6HAKA,yHAKA,oCACA,6BAEA,4CACA,sBAEA,0BACA,oBACA,uBACA,sBACA,sBACA,4BACA,6DAEA,gCACA,mCACA,kCACA,mCACA,+BACA,gCACA,+BAEA,2BAIA,2BAIA,yBAIA,yDAIA,+BAIA,+DAIA,mCAKA,iCACA,kCAGA,oCACA,wCACA,sCAGA,4CACA,oBACA,yBAEA,2BACA,uBACA,wBACA,uBAEA,yBACA,kCAEA,uDAGA,gCACA,gCACA,+BACA,0BACA,0DACA,oCACA,qCACA,6BACA,wDACA,iCACA,mEACA,+BACA,gDACA,+DACA,qBACA,iDACA,4BACA,2BACA,sDACA,4BACA,6BACA,0BACA,mDACA,wBACA,oDACA,2BACA,0BACA,mDACA,kDACA,0BAEA,oEAEA,yCACA,+EAGA,yCACA,mFAEA,+BACA,+BAEA,2DAEA,+BACA,+BACA,gCACA,iCACA,qBACA,2BACA,6BAEA,0DACA,2BACA,2DACA,2BACA,6CACA,0BACA,8CACA,sBACA,iDACA,4CACA,yBACA,8DACA,yBACA,sCACA,oCACA,8CACA,6BACA,qCACA,6BACA,oCACA,mCACA,sCAEA,mCACA,sCACA,+BACA,+EACA,iCACA,qCACA,sEACA,sEACA,iCACA,sEACA,qCACA,uCACA,gEACA,iEACA,mCACA,4CACA,6DACA,uEACA,8BACA,yFACA,qIAEA,mEAGA,6EACA,kEACA,sEACA,oFACA,oFACA,iEACA,kFACA,0FACA,4CACA,oFACA,4CACA,oGACA,oCACA,wEACA,oFACA,kCACA,6FACA,2CAEA,wDAEA,sDAoCF,wDAnCI,sDACA,kHACA,wDACA,yOQtnBA,2DAKA,6DAOF,2DAIE,6DAKA,sCACA,qEAGA,mFASA,oHAWF,4GAGE,4GAKA,gHAKE,8HC7DJ,8HCFA,gQHGA,uGAEA,oFAME,kYAIE,oGACA,4RAGF,mDAEE,6MAGF,wHACE,oPASE,CACA,4NAGA,sKAIA,oBACE,qCAON,wHAMF,oBACE,0FAIA,mBACA,yDAEA,kBAEE,wFAGF,mCAEE,uCACA,oEAEA,qCAEE,qEAKF,uDACA,+DAKJ,cAEE,wDACA,6BACA,mCAIA,sBACA,8BAEA,kBACA,6KASE,oBAEA,wBACE,uBAMJ,qIAUA,gCAGE,qCACA,+WA8BE,sDACA,8XAiBE,iCAGF,0BACE,2LAiBJ,mRAuBA,2DAGE,eACA,6DAIA,qBACA,8TAsBJ,+CAGF,mDAGE,6CACE,4CACA,kDACA,sBACA,0BACA,8EAGA,yBACE,2FAWN,iCAvRF,CAyRI,UACA,qGAYJ,sBACE,4DAIA,sBACE,2CACA,6BAEA,qBAGF,uCAEE,iDAEA,iCAQA,mBAKF,gDACE,YACA,kBAGF,4CACE,kBACA,qEAOA,cACE,uDAGF,QACE,sCAEA,gDACE,2BAGF,yCACE,mMAQF,iBAQN,4CACE,0BAEA,wMAKA,yFAQE,iCAEA,0BACA,8CAIJ,0BAMA,YACE,oBACA,gBACA,+BAHF,6BAUA,8BACE,kBACA,WAGF,oDAEE,kBASA,0BAGF,kBACE,iBACA,6BAIF,2CAEE,kBACA,yBAIF,sDAEE,0BACA,4CACA,kBASA,gDASF,oDACE,gBACA,wBACA,kBACA,mDAOF,sBAGE,uDACA,0BAEC,CAAD,4DAIA,aACA,4DAIF,iEAEE,gBACA,gCACA,gBAEA,WACE,0CAEA,kBAIJ,uCAIA,eAEE,8CACA,6CAIE,uBAEA,6CAEA,wCAMF,mBAGF,iCACE,+CAEA,oBACE,4GAKJ,8EAGE,sBACE,+HASJ,2CAII,gCAEA,mBACE,sCAIA,qBACA,uBAIJ,+CAEE,yDAQJ,sCACE,gDACA,yCAEA,WACA,qBAEA,eACA,qBACA,+CAMA,iCAMF,0CACE,gCACA,6CACA,iKASE,4CACA,8CACA,eACA,WACA,yMASA,eAEE,uCAEA,iCACA,oHAGE,+BACA,mBACA,+CAIJ,8BACE,gCACA,oBACA,+BACA,0HAEA,+BAMF,OANE,oBAEE,4CASF,CALF,8BAKE,iDAIF,iBACE,iCACA,6CAIJ,4BACE,qCACA,8CACA,gCAEA,6BACE,wCAGF,yDACE,iDAEA,kBACA,KACA,oEAGE,2DAGF,yCACE,UACA,qBACA,8CAKF,gCACA,0CAGF,oBACE,WACA,wBACA,gBACA,WACA,kDAEA,qEAGE,gLAEA,eAEE,0KAGF,8DAEE,qCAMR,6CAGE,UACA,6BACA,8FAGE,gFAGF,UACE,sCAKF,iCAEA,4BAEA,mCACE,CACA,sBACA,6BACA,iCAEA,kCAKF,SACE,eACA,yCAGA,qCAEA,4CACE,YACA,+BAEA,oBACA,uIACA,2CAGA,sCAGF,SACE,wDAGF,6CAEE,wEAEA,eAGF,yBACE,0BACA,uHAEA,2BACE,oGAKF,uDAKN,yCACE,2IAQA,gIAEA,CADA,iBACA,oBACA,uBACA,yDAIA,iBACA,yBACA,CACA,iCACA,8GACA,qDAGA,oEAEA,0CAKA,gDAKF,qCACE,0DAEA,mBACA,yDAIA,0CACA,6BAKA,wCAKF,oIAEA,4BAKE,qGAKJ,mLASA,oCACE,yKAKA,qCAIF,6DAKA,8BACE,kDACA,yEAGA,UACA,qFAGA,iBATF,wBAUI,kBACA,uBAGF,+BACE,8BAEA,oOACE,yCAlBN,YA0BM,mHAQA,0DAEF,wCACE,sBACA,WACA,2CACA,qRAgBF,uCATE,kEAEA,2DAGE,CAIJ,sDAEI,kDA1DR,mCAkEM,gCAMJ,iFAUA,yDAEE,CAKF,qBACA,4DAzBE,yCACE,YAMJ,CAYE,uBAKF,iBACA,UAuBA,CAvBA,yBAEA,kBAIF,cACE,qFAOF,2DAIA,CAIA,SACE,+DAIA,gDAIA,kDAIA,8BACA,iCACA,yBAGF,mBACE,UACA,iBACA,8BAGF,iEAMA,YACE,oBACE,kBAEA,qIAMA,0BAIE,0BAEA,uCAEA,+BAMJ,8CAKF,mBACE,CAEE,oCAIA,uDANF,2BAME"}