browser/components/aboutwelcome/content/aboutwelcome.css

Propagation: 38.99%

Back to Home

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* stylelint-disable max-nesting-depth */
#feature-callout {
  --fc-background: var(--fc-background-light, #FFF);
  --fc-color: var(--fc-color-light, rgb(21, 20, 26));
  --fc-border: var(--fc-border-light, #CFCFD8);
  --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224));
  --fc-button-background: var(--fc-button-background-light, #F0F0F4);
  --fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26));
  --fc-button-border: var(--fc-button-border-light, transparent);
  --fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6);
  --fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26));
  --fc-button-border-hover: var(--fc-button-border-hover-light, transparent);
  --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8);
  --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26));
  --fc-button-border-active: var(--fc-button-border-active-light, transparent);
  --fc-primary-button-background: var(--fc-primary-button-background-light, #0061E0);
  --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254));
  --fc-primary-button-border: var(--fc-primary-button-border-light, transparent);
  --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250BB);
  --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254));
  --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent);
  --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053E94);
  --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254));
  --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent);
  --fc-step-color: color-mix(in srgb, currentColor 50%, transparent);
  --fc-link-color: var(--fc-link-color-light, #0061E0);
  --fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB);
  --fc-link-color-active: var(--fc-link-color-active-light, #053E94);
  --fc-icon-success-color: var(--fc-icon-success-color-light, #2AC3A2);
  --fc-dismiss-button-bg: var(--fc-dismiss-button-bg-light, #FFF);
  --fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-light, color-mix(in srgb, currentColor 14%, #FFF));
  --fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-light, color-mix(in srgb, currentColor 14%, #FFF));
  position: absolute;
  z-index: 2147483647;
  outline: none;
  color: var(--fc-color);
  accent-color: var(--fc-accent-color);
  -moz-theme: non-native;
  -moz-window-shadow: none;
  --arrow-width: 33.9411px;
  --arrow-square-size: calc(var(--arrow-width) / sqrt(2));
  --extra-width-from-rotation: calc(var(--arrow-width) - var(--arrow-square-size));
  --arrow-visible-height: calc(var(--arrow-width) / 2);
  --arrow-visible-size: calc(var(--arrow-square-size) / 2);
  --arrow-center-inset: calc(50% - var(--arrow-visible-size));
  --arrow-offset: calc(1.5px - var(--arrow-visible-size));
  --arrow-corner-distance: 12px;
  --arrow-corner-inset: calc(var(--arrow-corner-distance) + (var(--extra-width-from-rotation) / 2));
  --arrow-overlap-magnitude: 5px;
  --button-min-height: 24px;
}
@media (prefers-color-scheme: dark) {
  #feature-callout {
    --fc-background: var(--fc-background-dark, rgb(43, 42, 51));
    --fc-color: var(--fc-color-dark, rgb(251, 251, 254));
    --fc-border: var(--fc-border-dark, #3A3944);
    --fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255));
    --fc-button-background: var(--fc-button-background-dark, #2B2A33);
    --fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254));
    --fc-button-border: var(--fc-button-border-dark, transparent);
    --fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E);
    --fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254));
    --fc-button-border-hover: var(--fc-button-border-hover-dark, transparent);
    --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66);
    --fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254));
    --fc-button-border-active: var(--fc-button-border-active-dark, transparent);
    --fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255));
    --fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51));
    --fc-primary-button-border: var(--fc-primary-button-border-dark, transparent);
    --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255));
    --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51));
    --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent);
    --fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255));
    --fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51));
    --fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent);
    --fc-link-color: var(--fc-link-color-dark, #00DDFF);
    --fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF);
    --fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF);
    --fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD);
    --fc-dismiss-button-bg: var(--fc-dismiss-button-bg-dark, rgb(66, 65, 77));
    --fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
    --fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
  }
}
:root[lwt-popup=light] #feature-callout:not(.simulateContent) {
  color-scheme: light;
  --fc-background: var(--fc-background-light, #FFF);
  --fc-color: var(--fc-color-light, rgb(21, 20, 26));
  --fc-border: var(--fc-border-light, #CFCFD8);
  --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224));
  --fc-button-background: var(--fc-button-background-light, #F0F0F4);
  --fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26));
  --fc-button-border: var(--fc-button-border-light, transparent);
  --fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6);
  --fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26));
  --fc-button-border-hover: var(--fc-button-border-hover-light, transparent);
  --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8);
  --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26));
  --fc-button-border-active: var(--fc-button-border-active-light, transparent);
  --fc-primary-button-background: var(--fc-primary-button-background-light, #0061E0);
  --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254));
  --fc-primary-button-border: var(--fc-primary-button-border-light, transparent);
  --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250BB);
  --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254));
  --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent);
  --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053E94);
  --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254));
  --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent);
  --fc-step-color: color-mix(in srgb, currentColor 50%, transparent);
  --fc-link-color: var(--fc-link-color-light, #0061E0);
  --fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB);
  --fc-link-color-active: var(--fc-link-color-active-light, #053E94);
  --fc-icon-success-color: var(--fc-icon-success-color-light, #2AC3A2);
  --fc-dismiss-button-bg: var(--fc-dismiss-button-bg-light, #FFF);
  --fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-light, color-mix(in srgb, currentColor 14%, #FFF));
  --fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-light, color-mix(in srgb, currentColor 14%, #FFF));
}

:root[lwt-popup=dark] #feature-callout:not(.simulateContent) {
  color-scheme: dark;
  --fc-background: var(--fc-background-dark, rgb(43, 42, 51));
  --fc-color: var(--fc-color-dark, rgb(251, 251, 254));
  --fc-border: var(--fc-border-dark, #3A3944);
  --fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255));
  --fc-button-background: var(--fc-button-background-dark, #2B2A33);
  --fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254));
  --fc-button-border: var(--fc-button-border-dark, transparent);
  --fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E);
  --fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254));
  --fc-button-border-hover: var(--fc-button-border-hover-dark, transparent);
  --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66);
  --fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254));
  --fc-button-border-active: var(--fc-button-border-active-dark, transparent);
  --fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255));
  --fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51));
  --fc-primary-button-border: var(--fc-primary-button-border-dark, transparent);
  --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255));
  --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51));
  --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent);
  --fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255));
  --fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51));
  --fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent);
  --fc-link-color: var(--fc-link-color-dark, #00DDFF);
  --fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF);
  --fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF);
  --fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD);
  --fc-dismiss-button-bg: var(--fc-dismiss-button-bg-dark, rgb(66, 65, 77));
  --fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
  --fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
}

@media (prefers-contrast) {
  #feature-callout {
    --fc-background: var(--fc-background-hcm, -moz-dialog);
    --fc-color: var(--fc-color-hcm, -moz-dialogtext);
    --fc-border: var(--fc-border-hcm, -moz-dialogtext);
    --fc-accent-color: var(--fc-accent-color-hcm, LinkText);
    --fc-button-background: var(--fc-button-background-hcm, ButtonFace);
    --fc-button-color: var(--fc-button-color-hcm, ButtonText);
    --fc-button-border: var(--fc-button-border-hcm, ButtonText);
    --fc-button-background-hover: var(--fc-button-background-hover-hcm, ButtonText);
    --fc-button-color-hover: var(--fc-button-color-hover-hcm, ButtonFace);
    --fc-button-border-hover: var(--fc-button-border-hover-hcm, ButtonText);
    --fc-button-background-active: var(--fc-button-background-active-hcm, ButtonText);
    --fc-button-color-active: var(--fc-button-color-active-hcm, ButtonFace);
    --fc-button-border-active: var(--fc-button-border-active-hcm, ButtonText);
    --fc-primary-button-background: var(--fc-primary-button-background-hcm, ButtonText);
    --fc-primary-button-color: var(--fc-primary-button-color-hcm, ButtonFace);
    --fc-primary-button-border: var(--fc-primary-button-border-hcm, ButtonFace);
    --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-hcm, SelectedItem);
    --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-hcm, SelectedItemText);
    --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-hcm, SelectedItemText);
    --fc-primary-button-background-active: var(--fc-primary-button-background-active-hcm, SelectedItemText);
    --fc-primary-button-color-active: var(--fc-primary-button-color-active-hcm, SelectedItem);
    --fc-primary-button-border-active: var(--fc-primary-button-border-active-hcm, SelectedItem);
    --fc-step-color: var(--fc-accent-color-hcm, LinkText);
    --fc-link-color: var(--fc-link-color-hcm, LinkText);
    --fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText);
    --fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText);
    --fc-icon-success-color: var(--fc-icon-success-color-hcm, LinkText);
    --fc-dismiss-button-bg: var(--fc-dismiss-button-bg-hcm, -moz-dialog);
    --fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-hcm, color-mix(in srgb, currentColor 14%, -moz-dialog));
    --fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-hcm, color-mix(in srgb, currentColor 14%, -moz-dialog));
  }
}
#feature-callout.simulateContent {
  color-scheme: env(-moz-content-preferred-color-scheme);
}
@media (-moz-content-prefers-color-scheme: light) {
  #feature-callout.simulateContent {
    --fc-background: var(--fc-background-light, #FFF);
    --fc-color: var(--fc-color-light, rgb(21, 20, 26));
    --fc-border: var(--fc-border-light, #CFCFD8);
    --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224));
    --fc-button-background: var(--fc-button-background-light, #F0F0F4);
    --fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26));
    --fc-button-border: var(--fc-button-border-light, transparent);
    --fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6);
    --fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26));
    --fc-button-border-hover: var(--fc-button-border-hover-light, transparent);
    --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8);
    --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26));
    --fc-button-border-active: var(--fc-button-border-active-light, transparent);
    --fc-primary-button-background: var(--fc-primary-button-background-light, #0061E0);
    --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254));
    --fc-primary-button-border: var(--fc-primary-button-border-light, transparent);
    --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250BB);
    --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254));
    --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent);
    --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053E94);
    --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254));
    --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent);
    --fc-step-color: color-mix(in srgb, currentColor 50%, transparent);
    --fc-link-color: var(--fc-link-color-light, #0061E0);
    --fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB);
    --fc-link-color-active: var(--fc-link-color-active-light, #053E94);
    --fc-icon-success-color: var(--fc-icon-success-color-light, #2AC3A2);
    --fc-dismiss-button-bg: var(--fc-dismiss-button-bg-light, #FFF);
    --fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-light, color-mix(in srgb, currentColor 14%, #FFF));
    --fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-light, color-mix(in srgb, currentColor 14%, #FFF));
  }
}
@media (-moz-content-prefers-color-scheme: dark) {
  #feature-callout.simulateContent {
    --fc-background: var(--fc-background-dark, rgb(43, 42, 51));
    --fc-color: var(--fc-color-dark, rgb(251, 251, 254));
    --fc-border: var(--fc-border-dark, #3A3944);
    --fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255));
    --fc-button-background: var(--fc-button-background-dark, #2B2A33);
    --fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254));
    --fc-button-border: var(--fc-button-border-dark, transparent);
    --fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E);
    --fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254));
    --fc-button-border-hover: var(--fc-button-border-hover-dark, transparent);
    --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66);
    --fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254));
    --fc-button-border-active: var(--fc-button-border-active-dark, transparent);
    --fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255));
    --fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51));
    --fc-primary-button-border: var(--fc-primary-button-border-dark, transparent);
    --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255));
    --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51));
    --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent);
    --fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255));
    --fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51));
    --fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent);
    --fc-link-color: var(--fc-link-color-dark, #00DDFF);
    --fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF);
    --fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF);
    --fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD);
    --fc-dismiss-button-bg: var(--fc-dismiss-button-bg-dark, rgb(66, 65, 77));
    --fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
    --fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
  }
}
:root[lwt-newtab-brighttext] #feature-callout.simulateContent.lwtNewtab {
  color-scheme: dark;
  --fc-background: var(--fc-background-dark, rgb(43, 42, 51));
  --fc-color: var(--fc-color-dark, rgb(251, 251, 254));
  --fc-border: var(--fc-border-dark, #3A3944);
  --fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255));
  --fc-button-background: var(--fc-button-background-dark, #2B2A33);
  --fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254));
  --fc-button-border: var(--fc-button-border-dark, transparent);
  --fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E);
  --fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254));
  --fc-button-border-hover: var(--fc-button-border-hover-dark, transparent);
  --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66);
  --fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254));
  --fc-button-border-active: var(--fc-button-border-active-dark, transparent);
  --fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255));
  --fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51));
  --fc-primary-button-border: var(--fc-primary-button-border-dark, transparent);
  --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255));
  --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51));
  --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent);
  --fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255));
  --fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51));
  --fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent);
  --fc-link-color: var(--fc-link-color-dark, #00DDFF);
  --fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF);
  --fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF);
  --fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD);
  --fc-dismiss-button-bg: var(--fc-dismiss-button-bg-dark, rgb(66, 65, 77));
  --fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
  --fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
}

@media (prefers-contrast) {
  #feature-callout.simulateContent {
    --fc-background: var(--fc-background-hcm, -moz-dialog);
    --fc-color: var(--fc-color-hcm, -moz-dialogtext);
    --fc-border: var(--fc-border-hcm, -moz-dialogtext);
    --fc-accent-color: var(--fc-accent-color-hcm, LinkText);
    --fc-button-background: var(--fc-button-background-hcm, ButtonFace);
    --fc-button-color: var(--fc-button-color-hcm, ButtonText);
    --fc-button-border: var(--fc-button-border-hcm, ButtonText);
    --fc-button-background-hover: var(--fc-button-background-hover-hcm, ButtonText);
    --fc-button-color-hover: var(--fc-button-color-hover-hcm, ButtonFace);
    --fc-button-border-hover: var(--fc-button-border-hover-hcm, ButtonText);
    --fc-button-background-active: var(--fc-button-background-active-hcm, ButtonText);
    --fc-button-color-active: var(--fc-button-color-active-hcm, ButtonFace);
    --fc-button-border-active: var(--fc-button-border-active-hcm, ButtonText);
    --fc-primary-button-background: var(--fc-primary-button-background-hcm, ButtonText);
    --fc-primary-button-color: var(--fc-primary-button-color-hcm, ButtonFace);
    --fc-primary-button-border: var(--fc-primary-button-border-hcm, ButtonFace);
    --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-hcm, SelectedItem);
    --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-hcm, SelectedItemText);
    --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-hcm, SelectedItemText);
    --fc-primary-button-background-active: var(--fc-primary-button-background-active-hcm, SelectedItemText);
    --fc-primary-button-color-active: var(--fc-primary-button-color-active-hcm, SelectedItem);
    --fc-primary-button-border-active: var(--fc-primary-button-border-active-hcm, SelectedItem);
    --fc-step-color: var(--fc-accent-color-hcm, LinkText);
    --fc-link-color: var(--fc-link-color-hcm, LinkText);
    --fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText);
    --fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText);
    --fc-icon-success-color: var(--fc-icon-success-color-hcm, LinkText);
    --fc-dismiss-button-bg: var(--fc-dismiss-button-bg-hcm, -moz-dialog);
    --fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-hcm, color-mix(in srgb, currentColor 14%, -moz-dialog));
    --fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-hcm, color-mix(in srgb, currentColor 14%, -moz-dialog));
  }
}
panel#feature-callout {
  --panel-color: var(--fc-color);
  --panel-shadow: none;
  --panel-shadow-margin: 6px;
  --panel-arrow-space: calc(var(--panel-shadow-margin) + var(--arrow-visible-height) - 1.5px);
  --panel-margin-offset: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-corner-distance) + (var(--arrow-width) / 2)));
}

panel#feature-callout::part(content) {
  width: initial;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: var(--panel-shadow-margin);
  background: none;
  color: inherit;
  overflow: visible !important;
}

div#feature-callout {
  transition: opacity 0.5s ease;
}
div#feature-callout.hidden {
  opacity: 0;
  pointer-events: none;
}

#feature-callout .onboardingContainer,
#feature-callout .onboardingContainer .outer-wrapper {
  --transition: none;
  height: auto;
  transform: none;
}
#feature-callout .screen:dir(rtl) {
  transform: none;
}
#feature-callout .screen[pos=callout] {
  height: fit-content;
  min-height: unset;
  overflow: visible;
}
#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content,
#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content.no-steps {
  width: 18em;
  padding-inline: 16px;
  padding-block: 0;
}
#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content .welcome-text,
#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content.no-steps .welcome-text {
  height: 24px;
  margin-block: 12px;
  margin-inline: 0;
  padding: 0;
  white-space: nowrap;
}
#feature-callout .screen[pos=callout][layout=inline] .section-main .dismiss-button {
  height: 24px;
  width: 24px;
  min-height: 24px;
  min-width: 24px;
  margin: 0;
  top: calc(50% - 12px);
  inset-inline-end: 12px;
}
#feature-callout .screen[pos=callout] .logo-container {
  display: flex;
  justify-content: center;
}
#feature-callout .screen[pos=callout] .logo-container .brand-logo {
  margin: 0;
}
#feature-callout .screen[pos=callout] .logo-container .brand-logo:dir(rtl) {
  transform: rotateY(180deg);
}
#feature-callout .screen[pos=callout] .welcome-text {
  align-items: start;
  text-align: start;
  margin: 0;
  padding: 0;
  gap: 8px;
}
#feature-callout .screen[pos=callout] .welcome-text h1,
#feature-callout .screen[pos=callout] .welcome-text h2 {
  font-size: 0.813em;
  margin: 0;
  color: inherit;
}
#feature-callout .screen[pos=callout] .welcome-text h1 {
  font-weight: 600;
}
#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container .logo-container {
  height: 16px;
  width: 16px;
  margin-inline-end: 6px;
  box-sizing: border-box;
  -moz-context-properties: fill;
  fill: currentColor;
}
#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container .logo-container img {
  height: 16px;
  width: 16px;
  margin: 0;
}
#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top], #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] {
  flex-wrap: nowrap;
}
#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top] .logo-container, #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] .logo-container {
  height: 1.5em;
  align-items: center;
  padding-bottom: 0.15em;
  box-sizing: border-box;
}
#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top] {
  align-items: start;
}
#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] {
  align-items: end;
}
#feature-callout .screen[pos=callout] .multi-select-container {
  margin: 0;
  font-size: 0.813em;
  row-gap: 12px;
  color: inherit;
  overflow: visible;
}
#feature-callout .screen[pos=callout] .multi-select-container #multi-stage-multi-select-label {
  font-size: inherit;
  margin: -4px 0 0;
  color: inherit;
}
#feature-callout .screen[pos=callout] .cta-link {
  background: none;
  text-decoration: underline;
  cursor: pointer;
  border: none;
  padding: 0;
  color: var(--fc-link-color);
  order: -1;
  margin-inline-end: auto;
  margin-block: 8px;
}
#feature-callout .screen[pos=callout] .cta-link:hover {
  color: var(--fc-link-color-hover);
}
#feature-callout .screen[pos=callout] .cta-link:active {
  color: var(--fc-link-color-active);
}
#feature-callout .screen[pos=callout] .section-secondary {
  display: none;
}
#feature-callout .screen[pos=callout] .section-main {
  height: fit-content;
  width: fit-content;
}
#feature-callout .screen[pos=callout] .section-main .main-content {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--fc-border);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  padding: var(--callout-padding, 16px);
  width: 25em;
  gap: 16px;
  background: var(--fc-background);
}
#feature-callout .screen[pos=callout] .section-main .main-content .main-content-inner {
  gap: 12px;
}
#feature-callout .screen[pos=callout] .section-main .main-content .main-content-inner .legal-paragraph .text-link {
  color: var(--fc-color);
}
#feature-callout .screen[pos=callout] .section-main .main-content .steps {
  height: auto;
  position: absolute;
  bottom: calc(var(--callout-padding, 16px) + var(--cta-height, 24px) / 2 - 4px);
  padding-block: 0;
}
#feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator {
  border: 4px solid var(--fc-step-color);
}
#feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator.current {
  border-color: var(--fc-accent-color);
}
#feature-callout .screen[pos=callout] .section-main .main-content .steps:not(.progress-bar) {
  flex-flow: row nowrap;
  gap: 8px;
}
#feature-callout .screen[pos=callout] .section-main .main-content .steps:not(.progress-bar) .indicator {
  margin: 0;
}
#feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator.current, #feature-callout .screen[pos=callout] .section-main .main-content .steps.progress-bar .indicator.complete {
  border-color: var(--fc-accent-color);
}
#feature-callout .screen[pos=callout] .section-main .dismiss-button {
  font-size: 1em;
  inset-block: 0 auto;
  inset-inline: auto 0;
  margin-block: 16px 0;
  margin-inline: 0 16px;
  background-color: transparent;
}
#feature-callout .screen[pos=callout] .section-main .dismiss-button[button-size=small] {
  height: 24px;
  width: 24px;
  min-height: 24px;
  min-width: 24px;
}
#feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background {
  background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px, var(--fc-dismiss-button-bg);
}
#feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background:hover {
  background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px, var(--fc-dismiss-button-bg-hover);
}
#feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background:hover:active {
  background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px, var(--fc-dismiss-button-bg-active);
}
#feature-callout .screen[pos=callout] .action-buttons {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  justify-content: end;
  gap: 10px;
  margin-top: 4px;
}
#feature-callout .screen[pos=callout] .action-buttons[alignment=start] {
  justify-content: start;
}
#feature-callout .screen[pos=callout] .action-buttons[alignment=space-between] {
  justify-content: space-between;
}
#feature-callout .screen[pos=callout] .action-buttons .secondary-cta {
  font-size: inherit;
}
#feature-callout .screen[pos=callout] .action-buttons .primary,
#feature-callout .screen[pos=callout] .action-buttons .secondary {
  padding: 4px 16px;
  margin: 0;
  font-size: 0.813em;
  font-weight: 600;
  line-height: 16px;
  min-height: var(--button-min-height);
  text-decoration: none;
  cursor: default;
}
#feature-callout .screen[pos=callout] .action-buttons .secondary {
  background-color: var(--fc-button-background);
}
#feature-callout .screen[pos=callout] .action-buttons .primary {
  background-color: var(--fc-primary-button-background);
}
#feature-callout .screen[pos=callout] .action-buttons .split-button-container {
  align-items: stretch;
}
#feature-callout .screen[pos=callout] .action-buttons .split-button-container:not([hidden]) {
  display: flex;
}
#feature-callout .screen[pos=callout] .action-buttons .split-button-container .primary:not(.submenu-button),
#feature-callout .screen[pos=callout] .action-buttons .split-button-container .secondary:not(.submenu-button),
#feature-callout .screen[pos=callout] .action-buttons .split-button-container .additional-cta:not(.submenu-button) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  margin-inline-end: 0;
}
#feature-callout .screen[pos=callout] .action-buttons .split-button-container .primary:focus-visible,
#feature-callout .screen[pos=callout] .action-buttons .split-button-container .secondary:focus-visible,
#feature-callout .screen[pos=callout] .action-buttons .split-button-container .additional-cta:focus-visible {
  z-index: 2;
}
#feature-callout .screen[pos=callout] .action-buttons .split-button-container .submenu-button {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  margin-inline-start: 1px;
  padding: 8px;
  min-height: var(--button-min-height);
  min-width: 30px;
  box-sizing: border-box;
  background-image: url("chrome://global/skin/icons/arrow-down.svg");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: center;
  -moz-context-properties: fill;
  fill: currentColor;
}
#feature-callout .screen[pos=callout] .action-buttons .primary,
#feature-callout .screen[pos=callout] .action-buttons .secondary,
#feature-callout .screen[pos=callout] .dismiss-button {
  border-radius: 4px;
}
#feature-callout .screen[pos=callout] .action-buttons .primary:focus-visible,
#feature-callout .screen[pos=callout] .action-buttons .secondary:focus-visible,
#feature-callout .screen[pos=callout] .dismiss-button:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--fc-accent-color);
  outline-offset: 2px;
}
#feature-callout .screen[pos=callout] .action-buttons .primary:disabled,
#feature-callout .screen[pos=callout] .action-buttons .secondary:disabled,
#feature-callout .screen[pos=callout] .dismiss-button:disabled {
  opacity: 0.4;
  cursor: auto;
}
#feature-callout .screen[pos=callout] .action-buttons .secondary,
#feature-callout .screen[pos=callout] .dismiss-button {
  border: 1px solid var(--fc-button-border);
  color: var(--fc-button-color);
}
#feature-callout .screen[pos=callout] .action-buttons .secondary:hover:not(:disabled), #feature-callout .screen[pos=callout] .action-buttons .secondary[open],
#feature-callout .screen[pos=callout] .dismiss-button:hover:not(:disabled),
#feature-callout .screen[pos=callout] .dismiss-button[open] {
  background-color: var(--fc-button-background-hover);
  color: var(--fc-button-color-hover);
  border: 1px solid var(--fc-button-border-hover);
}
#feature-callout .screen[pos=callout] .action-buttons .secondary:hover:not(:disabled):active, #feature-callout .screen[pos=callout] .action-buttons .secondary[open]:active,
#feature-callout .screen[pos=callout] .dismiss-button:hover:not(:disabled):active,
#feature-callout .screen[pos=callout] .dismiss-button[open]:active {
  background-color: var(--fc-button-background-active);
  color: var(--fc-button-color-active);
  border: 1px solid var(--fc-button-border-active);
}
#feature-callout .screen[pos=callout] .action-buttons .primary {
  border: 1px solid var(--fc-primary-button-border);
  color: var(--fc-primary-button-color);
}
#feature-callout .screen[pos=callout] .action-buttons .primary:hover:not(:disabled), #feature-callout .screen[pos=callout] .action-buttons .primary[open] {
  background-color: var(--fc-primary-button-background-hover);
  color: var(--fc-primary-button-color-hover);
  border: 1px solid var(--fc-primary-button-border-hover);
}
#feature-callout .screen[pos=callout] .action-buttons .primary:hover:not(:disabled):active, #feature-callout .screen[pos=callout] .action-buttons .primary[open]:active {
  background-color: var(--fc-primary-button-background-active);
  color: var(--fc-primary-button-color-active);
  border: 1px solid var(--fc-primary-button-border-active);
}
#feature-callout .screen[pos=callout] .action-checklist {
  display: flex;
  flex-direction: column;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-subtitle {
  text-align: start;
  margin-block-end: 8px;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-divider {
  margin-block: 0;
  width: 100%;
  color: var(--fc-button-background);
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-progress-bar {
  width: 100%;
  height: 6px;
  padding-block: 0;
  background-color: color-mix(in srgb, var(--fc-color) 25%, transparent);
  opacity: 1;
  transition: none;
  border-radius: 8px;
  display: flex;
  justify-content: flex-start;
  margin-block-end: 16px;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-progress-bar:dir(rtl) {
  justify-content: flex-end;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-progress-bar .indicator {
  width: var(--action-checklist-progress-bar-progress);
  height: 100%;
  background-color: var(--fc-accent-color);
  border: 0;
  border-radius: 8px;
  opacity: 1;
  transition: var(--progress-bar-transition);
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items {
  display: flex;
  flex-direction: column;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button {
  background: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-inline: 0;
  margin-block: 4px;
  border: none;
  border-radius: 4px;
  padding-block: 8px;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button:first-child {
  margin-block-start: 0;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button:last-child {
  margin-block-end: 0;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button:not(:disabled):hover {
  background-color: var(--fc-button-background-hover);
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button:disabled {
  color: var(--fc-color);
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container {
  display: flex;
  align-items: center;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container span {
  text-align: start;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-icon-container {
  margin-block-start: 2px;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-empty, #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-filled {
  margin-inline-end: 8px;
  flex-shrink: 0;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-empty {
  border-radius: 50%;
  width: 0.75em;
  height: 0.75em;
  border: 2px solid color-mix(in srgb, var(--fc-color) 25%, transparent);
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-filled {
  background-image: url("chrome://global/skin/icons/check-filled.svg");
  fill: var(--fc-icon-success-color);
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .external-link-icon, #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .check-filled {
  border: none;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -moz-context-properties: fill;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .external-link-icon-container .external-link-icon {
  background-image: url("chrome://global/skin/icons/open-in-new.svg");
  fill: var(--fc-color);
}
panel#feature-callout:is([side=top], [side=bottom]):not([hide-arrow=permanent]) {
  margin-inline: var(--panel-margin-offset);
}

panel#feature-callout:is([side=left], [side=right]):not([hide-arrow=permanent]) {
  margin-block: var(--panel-margin-offset);
}

panel#feature-callout::part(content) {
  position: relative;
}

#feature-callout .arrow-box {
  position: absolute;
  overflow: visible;
  transform: rotate(45deg);
  transform-style: preserve-3d;
}
#feature-callout:not([arrow-position]) .arrow-box, #feature-callout[hide-arrow] .arrow-box {
  display: none;
}
#feature-callout .arrow {
  width: var(--arrow-square-size);
  height: var(--arrow-square-size);
}
#feature-callout .shadow-arrow-box {
  z-index: -1;
}
#feature-callout .shadow-arrow {
  background: transparent;
  outline: 1px solid var(--fc-border);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
#feature-callout .background-arrow-box {
  z-index: 1;
  pointer-events: none;
}
#feature-callout .background-arrow {
  background: var(--fc-background);
  clip-path: var(--fc-arrow-clip-path);
}
#feature-callout[arrow-position=top] .arrow-box {
  top: var(--arrow-offset);
  inset-inline-start: var(--arrow-center-inset);
  --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0);
}
panel#feature-callout[arrow-position=top]::part(content) {
  margin-top: var(--panel-arrow-space);
}

panel#feature-callout[arrow-position=top] {
  margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}

#feature-callout[arrow-position=bottom] .arrow-box {
  bottom: var(--arrow-offset);
  inset-inline-start: var(--arrow-center-inset);
  --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%);
}
panel#feature-callout[arrow-position=bottom]::part(content) {
  margin-bottom: var(--panel-arrow-space);
}

panel#feature-callout[arrow-position=bottom] {
  margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}

#feature-callout[arrow-position=inline-end] .arrow-box {
  top: var(--arrow-center-inset);
  inset-inline-end: var(--arrow-offset);
  --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0);
}
panel#feature-callout[arrow-position=inline-end]::part(content) {
  margin-inline-end: var(--panel-arrow-space);
}

panel#feature-callout[arrow-position=inline-end] {
  margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}

#feature-callout[arrow-position=inline-start] .arrow-box {
  top: var(--arrow-center-inset);
  inset-inline-start: var(--arrow-offset);
  --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0);
}
panel#feature-callout[arrow-position=inline-start]::part(content) {
  margin-inline-start: var(--panel-arrow-space);
}

panel#feature-callout[arrow-position=inline-start] {
  margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}

#feature-callout[arrow-position=top-end] .arrow-box {
  top: var(--arrow-offset);
  inset-inline-end: var(--arrow-corner-inset);
  --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0);
}
panel#feature-callout[arrow-position=top-end]::part(content) {
  margin-top: var(--panel-arrow-space);
}

panel#feature-callout[arrow-position=top-end] {
  margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}

#feature-callout[arrow-position=top-start] .arrow-box {
  top: var(--arrow-offset);
  inset-inline-start: var(--arrow-corner-inset);
  --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0);
}
panel#feature-callout[arrow-position=top-start]::part(content) {
  margin-top: var(--panel-arrow-space);
}

panel#feature-callout[arrow-position=top-start] {
  margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}

#feature-callout[arrow-position=bottom-end] .arrow-box {
  bottom: var(--arrow-offset);
  inset-inline-end: var(--arrow-corner-inset);
  --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%);
}
panel#feature-callout[arrow-position=bottom-end]::part(content) {
  margin-bottom: var(--panel-arrow-space);
}

panel#feature-callout[arrow-position=bottom-end] {
  margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}

#feature-callout[arrow-position=bottom-start] .arrow-box {
  bottom: var(--arrow-offset);
  inset-inline-start: var(--arrow-corner-inset);
  --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%);
}
panel#feature-callout[arrow-position=bottom-start]::part(content) {
  margin-bottom: var(--panel-arrow-space);
}

panel#feature-callout[arrow-position=bottom-start] {
  margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}

#feature-callout[arrow-position=inline-end-top] .arrow-box {
  top: var(--arrow-corner-inset);
  inset-inline-end: var(--arrow-offset);
  --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0);
}
panel#feature-callout[arrow-position=inline-end-top]::part(content) {
  margin-inline-end: var(--panel-arrow-space);
}

panel#feature-callout[arrow-position=inline-end-top] {
  margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}

#feature-callout[arrow-position=inline-end-bottom] .arrow-box {
  bottom: var(--arrow-corner-inset);
  inset-inline-end: var(--arrow-offset);
  --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0);
}
panel#feature-callout[arrow-position=inline-end-bottom]::part(content) {
  margin-inline-end: var(--panel-arrow-space);
}

panel#feature-callout[arrow-position=inline-end-bottom] {
  margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}

#feature-callout[arrow-position=inline-start-top] .arrow-box {
  top: var(--arrow-corner-inset);
  inset-inline-start: var(--arrow-offset);
  --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0);
}
panel#feature-callout[arrow-position=inline-start-top]::part(content) {
  margin-inline-start: var(--panel-arrow-space);
}

panel#feature-callout[arrow-position=inline-start-top] {
  margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}

#feature-callout[arrow-position=inline-start-bottom] .arrow-box {
  bottom: var(--arrow-corner-inset);
  inset-inline-start: var(--arrow-offset);
  --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0);
}
panel#feature-callout[arrow-position=inline-start-bottom]::part(content) {
  margin-inline-start: var(--panel-arrow-space);
}

panel#feature-callout[arrow-position=inline-start-bottom] {
  margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}

/* stylelint-disable max-nesting-depth */
.onboardingContainer.shopping {
  height: auto;
}
.onboardingContainer.shopping .outer-wrapper {
  height: auto;
}

.onboardingContainer.shopping .screen[pos=split] {
  height: auto;
  margin: 0 auto;
  min-height: fit-content;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(58, 57, 68, 0.2);
  overflow-x: auto;
  /**
   * Overwrite other styles that are applied with widths less or more than 800px.
   * We want the opt-in screens for the Review Checker sidebar panel to expand horizontally and stay centered,
   * regardless of sidebar width.
   */
}
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
  .onboardingContainer.shopping .screen[pos=split] {
    box-shadow: 0 2px 6px rgb(21, 20, 26);
  }
}
.onboardingContainer.shopping .screen[pos=split]::before {
  display: none;
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT, .onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT_UNSUPPORTED_NON_PDP {
  box-shadow: none;
  flex-direction: column;
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main, .onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT_UNSUPPORTED_NON_PDP .section-main {
  margin: 0;
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content, .onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT_UNSUPPORTED_NON_PDP .section-main .main-content {
  background-color: transparent;
  margin-block-start: 9em;
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content.no-steps, .onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT_UNSUPPORTED_NON_PDP .section-main .main-content.no-steps {
  align-items: center;
  padding: 0;
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content picture.logo-container, .onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT_UNSUPPORTED_NON_PDP .section-main .main-content picture.logo-container {
  display: flex;
  justify-content: center;
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content picture.logo-container .brand-logo, .onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT_UNSUPPORTED_NON_PDP .section-main .main-content picture.logo-container .brand-logo {
  width: 244px;
  height: auto;
  /* We want to reduce image width on smaller sidebar width size. */
}
@media (width <= 270px) {
  .onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content picture.logo-container .brand-logo, .onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT_UNSUPPORTED_NON_PDP .section-main .main-content picture.logo-container .brand-logo {
    width: 157px;
    margin-block-end: 12px;
  }
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content .main-content-inner, .onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT_UNSUPPORTED_NON_PDP .section-main .main-content .main-content-inner {
  justify-content: center;
  align-items: center;
  max-width: 23em;
  min-height: unset;
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content .welcome-text, .onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT_UNSUPPORTED_NON_PDP .section-main .main-content .welcome-text {
  padding-inline: 16px;
  margin-block: 0 8px;
  margin-inline: 0;
  text-align: center;
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content .welcome-text h1, .onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT_UNSUPPORTED_NON_PDP .section-main .main-content .welcome-text h1 {
  font-weight: var(--font-weight-bold);
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content .link-paragraph, .onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT_UNSUPPORTED_NON_PDP .section-main .main-content .link-paragraph {
  color: var(--text-color-deemphasized);
  padding-inline: 16px;
  margin-block: 0 20px;
  text-align: center;
  /**
   * Intentionally hide body text on smaller sidebar widths to prevent text from flowing downwards and causing overflow.
   * Use -webkit-line-clamp and -webkit-box-orient to add an ellipsis to multiline text when overflow occurs.
   */
}
@media (width <= 270px) {
  .onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content .link-paragraph, .onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT_UNSUPPORTED_NON_PDP .section-main .main-content .link-paragraph {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content .legal-paragraph, .onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT_UNSUPPORTED_NON_PDP .section-main .main-content .legal-paragraph {
  padding-inline: 16px;
  margin-block: 0 40px;
  color: var(--text-color-deemphasized);
  text-align: center;
}
.onboardingContainer.shopping .screen[pos=split] .section-main {
  width: auto;
  height: auto;
  margin: 0 auto;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content {
  border-radius: 4px;
  color: inherit;
  font: menu;
}
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
  .onboardingContainer.shopping .screen[pos=split] .section-main .main-content {
    background-color: #42414D;
  }
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content.no-steps {
  padding: 16px 0 36px;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .welcome-text {
  text-align: start;
  margin-block: 10px 12px;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .welcome-text h1 {
  width: auto;
  font-weight: 400;
  line-height: 1.5;
  font-size: 1.7em;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .welcome-text h2 {
  color: inherit;
  font-size: 1em;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons .primary,
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons .secondary {
  min-width: auto;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons .primary {
  font-weight: 400;
  padding: 4px 16px;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons.additional-cta-container {
  align-items: center;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .legal-paragraph {
  font-size: 0.85em;
  line-height: 1.5;
  margin-block: 0 20px;
  padding-inline: 30px;
  text-align: start;
  color: inherit;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .legal-paragraph a {
  text-decoration: underline;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .brand-logo {
  width: 100%;
  max-width: 294px;
  max-height: 290px;
  height: auto;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .dismiss-button {
  top: 0;
  margin: 14px 10px;
}
.onboardingContainer.shopping .screen[pos=split] .section-secondary {
  display: none;
}
.onboardingContainer.shopping .screen[pos=split] .info-text, .onboardingContainer.shopping .screen[pos=split] .link-paragraph {
  font-size: 1em;
  margin: 10px auto;
  line-height: 1.5;
}
.onboardingContainer.shopping .screen[pos=split] .link-paragraph {
  margin-block: 0 10px;
  padding-inline: 30px;
  text-align: start;
}
.onboardingContainer.shopping .screen[pos=split] .link-paragraph a {
  text-decoration: underline;
}

.onboardingContainer.shopping .screen[pos=split][layout=survey] {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
  .onboardingContainer.shopping .screen[pos=split][layout=survey] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content {
  padding: 12px;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner {
  min-height: auto;
  align-items: initial;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text {
  align-items: initial;
  padding: 0;
  margin-top: 0;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h1,
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h2 {
  line-height: 20px;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h1 {
  font-size: 1em;
  font-weight: var(--font-weight-bold);
  margin: 0;
  margin-inline-end: 28px;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h2 {
  color: inherit;
  margin-block: 10px 0;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .action-buttons .cta-link {
  padding: 4px;
  margin-block: -4px;
  outline-offset: 0;
  min-height: revert;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .multi-select-container {
  color: inherit;
  padding: 0;
  margin-block: 0 24px;
  align-items: center;
  overflow: visible;
  font-size: 1em;
  gap: 12px;
  width: 100%;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .multi-select-container #multi-stage-multi-select-label {
  color: inherit;
  line-height: 20px;
  margin-block: -2px 0;
  font-size: 1em;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .multi-select-container .multi-select-item input {
  margin-block: 0;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .steps {
  height: auto;
  margin-bottom: 12px;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .dismiss-button {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin: 10px;
}

.onboardingContainer.shopping shopping-message-bar {
  font: menu;
}

/* stylelint-disable max-nesting-depth */
html {
  height: 100%;
}

.dummy {
  background: var(--mr-welcome-background-color) var(--mr-welcome-background-gradient) var(--mr-secondary-position) var(--mr-screen-background-color);
}

:root[dialogroot] {
  background-color: transparent;
}
:root[dialogroot] body {
  padding: 0;
}
:root[dialogroot] .onboardingContainer {
  height: 100%;
  background-color: transparent;
}
:root[dialogroot] .onboardingContainer:dir(rtl) {
  transform: unset;
}
:root[dialogroot] .onboardingContainer .logo-container {
  pointer-events: none;
}
:root[dialogroot] .onboardingContainer .screen:dir(rtl) {
  transform: unset;
}

.welcome-container .onboardingContainer {
  min-height: 610px;
  min-width: fit-content;
}
.welcome-container .onboardingContainer:has(.addons-picker-container) {
  min-height: 1080px;
}

.onboardingContainer {
  --grey-subtitle-1: #696977;
  --mr-welcome-background-color: #F8F6F4;
  --mr-screen-heading-color: var(--in-content-text-color);
  --mr-welcome-background-gradient: linear-gradient(0deg, rgba(144, 89, 255, 20%) 0%, rgba(2, 144, 238, 20%) 100%);
  --mr-screen-background-color: #F8F6F4;
  --single-select-border-color: #8F8F9D;
  --single-select-hover-color: #DEDEDF;
  --picker-background-color: color-mix(in srgb, transparent 98%, black 2%);
  --picker-hover-background-color: color-mix(in srgb, transparent 95%, black 5%);
  --picker-border-color: var(--in-content-border-color);
  --picker-checked-border-color: var(--in-content-item-selected);
  --picker-hover-border-color: var(--picker-border-color);
  --picker-focus-ring-color: var(--in-content-item-selected);
  --picker-checkbox-color: var(--in-content-item-selected);
  --picker-checkbox-hover-color: var(--picker-checkbox-color);
  font-family: system-ui;
  font-size: 16px;
  position: relative;
  text-align: center;
  height: 100vh;
  --transition: 0.6s opacity, 0.6s scale, 0.6s rotate, 0.6s translate;
}
@media (prefers-color-scheme: dark) {
  .onboardingContainer {
    --grey-subtitle-1: #FFF;
    --mr-welcome-background-color: #333336;
    --mr-welcome-background-gradient: linear-gradient(0deg, rgba(144, 89, 255, 30%) 0%, rgba(2, 144, 238, 30%) 100%);
    --mr-screen-background-color: #62697A;
    --single-select-hover-color: #52525E;
    --picker-background-color: color-mix(in srgb, transparent 98%, white 2%);
    --picker-hover-background-color: color-mix(in srgb, transparent 95%, white 5%);
  }
}
@media (forced-colors: active) {
  .onboardingContainer {
    --picker-background-color: ButtonFace;
    --picker-hover-background-color: SelectedItemText;
    --picker-border-color: ButtonText;
    --picker-checked-border-color: var(--picker-border-color);
    --picker-hover-border-color: SelectedItem;
    --picker-focus-ring-color: CanvasText;
    --picker-checkbox-color: ButtonText;
    --picker-checkbox-hover-color: SelectedItem;
  }
}
@media (prefers-contrast) {
  .onboardingContainer {
    --mr-screen-background-color: buttontext;
    --mr-screen-heading-color: buttonface;
    background-color: var(--in-content-page-background);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .onboardingContainer {
    --translate: 30px;
    --rotate: 20deg;
    --scale: 0.4;
    --progress-bar-transition: 0.6s translate;
  }
  .onboardingContainer:dir(rtl) {
    --scale: -0.4 0.4;
  }
}
@media (prefers-reduced-motion: reduce) {
  .onboardingContainer {
    --translate: 0;
    --rotate: 0deg;
    --scale: 1;
    --progress-bar-transition: none;
  }
  .onboardingContainer:dir(rtl) {
    --scale: -1 1;
  }
}
.onboardingContainer:dir(rtl) {
  transform: rotateY(180deg);
}
.onboardingContainer .section-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 504px;
  flex-shrink: 0;
}
.onboardingContainer .section-main:not(.embedded-migration) {
  position: relative;
}
.onboardingContainer .main-content {
  background-color: var(--in-content-page-background);
  border-radius: 20px;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  transition: var(--transition);
  z-index: 1;
  box-sizing: border-box;
}
@media (prefers-contrast) {
  .onboardingContainer .main-content {
    border: 1px solid var(--in-content-page-color);
  }
}
.onboardingContainer .main-content.no-steps {
  padding-bottom: 48px;
}
.onboardingContainer .main-content .main-content-inner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-around;
}
.onboardingContainer .main-content .no-steps .main-content {
  padding-bottom: 48px;
}
.onboardingContainer .main-content .no-steps .steps {
  display: none;
}
.onboardingContainer .screen {
  display: flex;
  position: relative;
  flex-flow: row nowrap;
  height: 100%;
  min-height: 500px;
  overflow: hidden;
}
.onboardingContainer .screen.light-text {
  --in-content-page-color: rgb(251, 251, 254);
  --in-content-primary-button-text-color: rgb(43, 42, 51);
  --in-content-primary-button-text-color-hover: rgb(43, 42, 51);
  --in-content-primary-button-background: rgb(0, 221, 255);
  --in-content-primary-button-background-hover: rgb(128, 235, 255);
  --in-content-primary-button-background-active: rgb(170, 242, 255);
  --in-content-button-text-color: var(--in-content-page-color);
}
.onboardingContainer .screen.dark-text {
  --in-content-page-color: rgb(21, 20, 26);
  --in-content-primary-button-text-color: rgb(251, 251, 254);
  --in-content-primary-button-text-color-hover: rgb(251, 251, 254);
  --in-content-primary-button-background: #0061E0;
  --in-content-primary-button-background-hover: #0250BB;
  --in-content-primary-button-background-active: #053E94;
  --in-content-primary-button-border-color: transparent;
  --in-content-primary-button-border-hover: transparent;
  --in-content-button-text-color: var(--in-content-page-color);
}
.onboardingContainer .screen:dir(rtl) {
  transform: rotateY(180deg);
}
.onboardingContainer .screen[pos=center] {
  background-color: rgba(21, 20, 26, 0.5);
  min-width: 504px;
}
.onboardingContainer .screen[pos=center].with-noodles {
  min-width: 610px;
  min-height: 610px;
}
.onboardingContainer .screen[pos=center].with-noodles .section-main {
  height: 504px;
}
.onboardingContainer .screen[pos=center].with-video {
  justify-content: center;
  background: none;
  align-items: center;
}
.onboardingContainer .screen[pos=center].with-video .section-main {
  width: 800px;
  height: 550px;
}
.onboardingContainer .screen[pos=center].with-video .main-content {
  background-color: var(--mr-welcome-background-color);
  border-radius: 8px;
  box-shadow: 0 2px 14px rgba(58, 57, 68, 0.2);
  padding: 44px 85px 20px;
}
.onboardingContainer .screen[pos=center].with-video .main-content .welcome-text {
  margin: 0;
}
.onboardingContainer .screen[pos=center].with-video .main-content .main-content-inner {
  justify-content: space-between;
}
.onboardingContainer .screen[pos=center].with-video .main-content h1,
.onboardingContainer .screen[pos=center].with-video .main-content h2 {
  align-self: start;
}
.onboardingContainer .screen[pos=center].with-video .main-content h1 {
  font-size: 24px;
  line-height: 28.8px;
}
.onboardingContainer .screen[pos=center].with-video .main-content h2 {
  font-size: 15px;
  line-height: 22px;
}
.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta {
  justify-content: end;
}
.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon {
  -moz-context-properties: fill;
  fill: currentColor;
  text-decoration: none;
}
.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon::after {
  content: "";
  padding-inline-end: 12px;
  margin-inline-start: 4px;
  background: url("chrome://browser/skin/forward.svg") no-repeat center/12px;
}
.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon:dir(rtl)::after {
  background-image: url("chrome://browser/skin/back.svg");
}
.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary {
  background-color: var(--in-content-button-background);
  border: 1px solid var(--in-content-button-border-color);
  line-height: 12px;
  font-size: 0.72em;
  font-weight: 600;
  padding: 8px 16px;
  text-decoration: none;
  cursor: default;
  color: var(--in-content-button-text-color);
}
.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary[open] {
  background-color: var(--in-content-button-background-hover);
  color: var(--in-content-button-text-color-hover);
}
.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary[open]:active {
  background-color: var(--in-content-button-background-active);
  color: var(--in-content-button-text-color-active);
}
.onboardingContainer .screen[pos=center].addons-picker {
  justify-content: center;
  align-items: center;
  background: none;
}
.onboardingContainer .screen[pos=center].addons-picker .section-main {
  width: 800px;
  height: 550px;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content {
  background-color: var(--in-content-page-background);
  border-radius: 8px;
  box-shadow: 0 2px 14px rgba(58, 57, 68, 0.2);
  overflow: hidden;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .welcome-text {
  display: flex;
  margin: 0;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .main-content-inner {
  padding: 25px 56px 0;
  justify-content: space-between;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content h1,
.onboardingContainer .screen[pos=center].addons-picker .main-content h2 {
  align-self: start;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content h2 {
  font-size: 15px;
  text-align: start;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .brand-logo {
  display: block;
  margin: 40px 56px 0;
  transition: var(--transition);
  height: 30px;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta {
  display: block;
  margin: 8px 0;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link {
  background: none;
  padding: 0;
  font-weight: normal;
  background: none;
  text-decoration: underline;
  cursor: pointer;
  color: var(--link-color);
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:hover {
  color: var(--link-color-hover);
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:active {
  color: var(--link-color-active);
}
@media (prefers-contrast) {
  .onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:active {
    text-decoration: none;
  }
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.secondary:hover {
  background-color: var(--in-content-button-background-hover);
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta {
  justify-content: end;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon {
  -moz-context-properties: fill;
  fill: currentColor;
  text-decoration: none;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon::after {
  content: "";
  padding-inline-end: 12px;
  margin-inline-start: 4px;
  background: url("chrome://browser/skin/forward.svg") no-repeat center/12px;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon:dir(rtl)::after {
  background-image: url("chrome://browser/skin/back.svg");
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary {
  background-color: var(--in-content-button-background);
  border: 1px solid var(--in-content-button-border-color);
  line-height: 12px;
  font-size: 0.72em;
  font-weight: 600;
  padding: 8px 16px;
  text-decoration: none;
  cursor: default;
  color: var(--in-content-button-text-color);
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary[open] {
  background-color: var(--in-content-button-background-hover);
  color: var(--in-content-button-text-color-hover);
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary[open]:active {
  background-color: var(--in-content-button-background-active);
  color: var(--in-content-button-text-color-active);
}
.onboardingContainer .screen[pos=center].addons-picker .addon-container {
  display: flex;
  border: 1px solid var(--in-content-border-color);
  box-shadow: 0 1px 2px 0 var(--in-content-border-color);
  border-radius: 4px;
  margin: 5px auto;
  text-align: start;
}
.onboardingContainer .screen[pos=center].addons-picker .addon-container .rtamo-icon img {
  margin: 10px;
}
.onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-details {
  display: grid;
  width: 70%;
}
.onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-title {
  margin: 10px 0 3px;
  font-size: 16px;
  font-weight: 600;
}
.onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-description {
  margin: 2px 0 10px;
  font-size: 13px;
  font-weight: 400;
}
.onboardingContainer .screen[pos=center].addons-picker .addon-container .install-button-wrapper {
  display: flex;
}
.onboardingContainer .screen[pos=center].addons-picker .addon-container button {
  align-self: center;
  width: 124px;
}
.onboardingContainer .screen[pos=center].addons-picker .loader {
  width: 1em;
  height: 1em;
  border: 3px solid var(--in-content-primary-button-text-color);
  border-bottom-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  justify-self: center;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.onboardingContainer .screen[pos=center].addons-picker .loaderContainer {
  display: flex;
  padding: 1.5px 37.5px;
  margin: auto;
}
.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary {
  background: none;
  text-decoration: underline;
  cursor: pointer;
  color: var(--link-color);
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
}
.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:hover {
  color: var(--link-color-hover);
}
.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:active {
  color: var(--link-color-active);
}
@media (prefers-contrast) {
  .onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:active {
    text-decoration: none;
  }
}
.onboardingContainer .screen:not([pos=split]) .secondary-cta.top button {
  color: #FFF;
}
.onboardingContainer .screen:not([pos=split]) .secondary-cta.top button:hover {
  color: #E0E0E6;
}
.onboardingContainer .screen:not([pos=split]) migration-wizard {
  padding: 5px 60px;
}
.onboardingContainer .screen:not([pos=split]) migration-wizard::part(header) {
  text-align: center;
}
.onboardingContainer .screen:not([pos=split]) migration-wizard::part(buttons) {
  margin: 32px auto 0;
}
.onboardingContainer .screen:not([pos=split]) .welcome-text:empty {
  margin: 0;
}
.onboardingContainer .screen[pos=split]:where(:not([fullscreen])) {
  margin: auto;
  min-height: 550px;
}
.onboardingContainer .screen[pos=split]:where(:not([fullscreen]))::before {
  content: "";
  position: absolute;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
  width: 800px;
  height: 550px;
  border-radius: 8px;
  inset: 0;
  margin: auto;
  pointer-events: none;
}
.onboardingContainer .screen[pos=split] #content-tiles-container {
  margin: 0;
}
.onboardingContainer .screen[pos=split] #content-tiles-container .content-tile:not(:only-child) {
  margin-block: 0 24px;
}
.onboardingContainer .screen[pos=split] #content-tiles-container .content-tile:last-child {
  margin-block: 0 40px;
}
.onboardingContainer .screen[pos=split] #content-tiles-container .multi-select-container {
  padding: 0;
}
.onboardingContainer .screen[pos=split] .section-secondary,
.onboardingContainer .screen[pos=split] .section-main {
  width: 400px;
  height: 550px;
}
.onboardingContainer .screen[pos=split] .secondary-cta.top {
  position: fixed;
  padding-inline-end: 0;
}
.onboardingContainer .screen[pos=split] .secondary-cta.top button {
  padding: 7px 15px;
}
.onboardingContainer .screen[pos=split] .section-main {
  flex-direction: row;
  display: block;
  margin: auto;
  margin-inline-start: 0;
}
.onboardingContainer .screen[pos=split] .section-main:dir(rtl) {
  margin: auto;
  margin-inline-start: 0;
}
.onboardingContainer .screen[pos=split] .section-main.embedded-migration .main-content {
  padding-block: 100px 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content {
  border-radius: 0 8px 8px 0;
  overflow: hidden;
  padding-inline: 35px 20px;
  padding-block: 120px 0;
  box-shadow: none;
}
.onboardingContainer .screen[pos=split] .section-main .main-content.no-steps {
  padding-bottom: 48px;
}
.onboardingContainer .screen[pos=split] .section-main .main-content:dir(rtl) {
  border-radius: 8px 0 0 8px;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph {
  text-align: start;
  font-size: 11px;
  line-height: 16.5px;
  color: #5B5B66;
}
@media only screen and (width <= 800px) {
  .onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph {
    padding-inline: 30px;
  }
}
[narrow] .onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph {
  padding-inline: 30px;
}
@media (prefers-color-scheme: dark) {
  .onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph {
    color: #CFCFD8;
  }
}
.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner {
  min-height: 330px;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .mobile-download-buttons {
  padding: 0;
  margin-inline-start: -5px;
  display: flex;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .mobile-download-buttons button {
  cursor: pointer;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .qr-code-image {
  margin: 5px 0 10px;
  display: flex;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .language-switcher-container .primary {
  margin-bottom: 5px;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons {
  position: relative;
  text-align: initial;
  height: 100%;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container {
  font-size: 13px;
  margin-block: 1em;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container:not(.multi-select-item) {
  transition: var(--transition);
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container input,
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container label {
  vertical-align: middle;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box {
  margin: 8px 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta {
  margin: 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link {
  background: none;
  text-decoration: underline;
  cursor: pointer;
  color: var(--link-color);
  padding: 0;
  font-weight: normal;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:hover {
  color: var(--link-color-hover);
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:active {
  color: var(--link-color-active);
}
@media (prefers-contrast) {
  .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:active {
    text-decoration: none;
  }
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.secondary:hover, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.secondary[open] {
  background-color: var(--in-content-button-background-hover);
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons.additional-cta-container {
  flex-wrap: nowrap;
  align-items: start;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta {
  position: absolute;
  bottom: -30px;
  inset-inline-end: 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary {
  background-color: var(--in-content-button-background);
  border: 1px solid var(--in-content-button-border-color);
  line-height: 12px;
  font-size: 0.72em;
  font-weight: 600;
  padding: 8px 16px;
  text-decoration: none;
  cursor: default;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary[open] {
  background-color: var(--in-content-button-background-hover);
  color: var(--in-content-button-text-color-hover);
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary[open]:active {
  background-color: var(--in-content-button-background-active);
  color: var(--in-content-button-text-color-active);
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon {
  -moz-context-properties: fill;
  fill: currentColor;
  text-decoration: none;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon::after {
  content: "";
  padding-inline-end: 12px;
  margin-inline-start: 4px;
  background: url("chrome://browser/skin/forward.svg") no-repeat center/12px;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon:dir(rtl)::after {
  background-image: url("chrome://browser/skin/back.svg");
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .loader {
  width: 1em;
  height: 1em;
  border: 3px solid var(--in-content-primary-button-text-color);
  border-bottom-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  justify-self: center;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .loaderContainer {
  display: flex;
  padding: 1.5px 37.5px;
  margin: auto;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .logo-container {
  text-align: start;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .brand-logo {
  height: 25px;
  margin-block: 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .logo-alt {
  width: inherit;
  height: inherit;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text {
  margin-inline: 0 10px;
  margin-block: 10px 35px;
  text-align: initial;
  align-items: initial;
  max-width: 400px;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text:empty {
  margin: 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h1 {
  font-size: 24px;
  line-height: 1.2;
  width: 300px;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h2 {
  margin: 10px 0 0;
  min-height: 1em;
  font-size: 15px;
  line-height: 1.5;
}
@media (prefers-contrast: no-preference) {
  .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h2 {
    color: #5B5B66;
  }
}
.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h1,
.onboardingContainer .screen[pos=split] .section-main .main-content .primary {
  margin: 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .steps {
  z-index: 1;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar {
  margin-inline: -35px;
}
@media (prefers-contrast) {
  .onboardingContainer .screen[pos=split] .section-main .main-content {
    border: 1px solid var(--in-content-page-color);
  }
  .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar {
    border-top: 1px solid var(--in-content-page-color);
    background-color: var(--in-content-page-background);
  }
  .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar .indicator {
    background-color: var(--color-accent-primary);
  }
}
.onboardingContainer .screen[pos=split] .section-secondary {
  --mr-secondary-position: center center / auto 350px;
  border-radius: 8px 0 0 8px;
  margin: auto 0 auto auto;
  display: flex;
  align-items: center;
  -moz-context-properties: fill, stroke, fill-opacity, stroke-opacity;
  stroke: currentColor;
  position: relative;
}
.onboardingContainer .screen[pos=split] .section-secondary:dir(rtl) {
  border-radius: 0 8px 8px 0;
  margin: auto;
  margin-inline-end: 0;
}
.onboardingContainer .screen[pos=split] .section-secondary h1 {
  color: var(--mr-screen-heading-color);
  font-weight: 700;
  font-size: 47px;
  line-height: 110%;
  max-width: 340px;
  text-align: initial;
  white-space: pre-wrap;
  text-shadow: none;
  margin-inline: 40px 0;
}
.onboardingContainer .screen[pos=split] .section-secondary .image-alt {
  width: inherit;
  height: inherit;
}
.onboardingContainer .screen[pos=split] .section-secondary .hero-image {
  flex: 1;
  display: flex;
  justify-content: center;
  max-height: 100%;
}
.onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
  width: 100%;
  max-width: 180px;
  margin: 25px 0;
  padding-bottom: 30px;
}
@media only screen and (width <= 800px) {
  .onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
    padding-bottom: unset;
  }
}
[narrow] .onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
  padding-bottom: unset;
}
.onboardingContainer .screen[pos=split] .multi-select-container {
  margin-inline: 0 10px;
}
.onboardingContainer .screen[pos=split] .multi-select-container .checkbox-container {
  display: grid;
}
.onboardingContainer .screen[pos=split] .multi-select-container .checkbox-container label, .onboardingContainer .screen[pos=split] .multi-select-container .checkbox-container p {
  grid-column: 2;
}
.onboardingContainer .screen[pos=split] .multi-select-container .checkbox-container p {
  margin-block: 0.5em 0;
}
@media only screen and (width <= 800px) {
  .onboardingContainer .screen[pos=split] .multi-select-container {
    flex-direction: column;
    align-self: center;
    align-items: start;
    justify-content: center;
    width: 240px;
    padding: 0 30px;
    margin-inline: 0;
    box-sizing: content-box;
  }
}
[narrow] .onboardingContainer .screen[pos=split] .multi-select-container {
  flex-direction: column;
  align-self: center;
  align-items: start;
  justify-content: center;
  width: 240px;
  padding: 0 30px;
  margin-inline: 0;
  box-sizing: content-box;
}
.onboardingContainer .screen[pos=split] .tiles-single-select-container {
  margin-block: -20px auto;
  align-items: initial;
}
.onboardingContainer .screen[pos=split] .tiles-single-select-container .select-item {
  min-width: 38px;
}
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
  .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h2 {
    color: #CFCFD8;
  }
  .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary {
    background-color: #2B2A33;
  }
}
@media only screen and (width >= 800px) {
  .onboardingContainer .screen[pos=split] .tiles-single-select-section {
    margin-inline-start: -10px;
  }
  .onboardingContainer .screen[pos=split][reverse-split] {
    flex-direction: row-reverse;
  }
  .onboardingContainer .screen[pos=split][reverse-split] .section-main {
    margin: auto;
    margin-inline-end: 0;
    border-radius: 8px 0 0 8px;
  }
  .onboardingContainer .screen[pos=split][reverse-split] .section-main .main-content {
    border-radius: inherit;
  }
  .onboardingContainer .screen[pos=split][reverse-split] .section-main:dir(rtl) {
    border-radius: 0 8px 8px 0;
    margin: auto;
    margin-inline-end: 0;
  }
  .onboardingContainer .screen[pos=split][reverse-split] .section-secondary {
    margin: auto;
    margin-inline-start: 0;
    border-radius: 0 8px 8px 0;
  }
  .onboardingContainer .screen[pos=split][reverse-split] .section-secondary:dir(rtl) {
    border-radius: 8px 0 0 8px;
    margin: auto;
    margin-inline-start: 0;
  }
}
.onboardingContainer .screen[pos=split]:where([no-rdm=true]) .tiles-single-select-section {
  margin-inline-start: -10px;
}
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] {
  flex-direction: row-reverse;
}
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-main {
  margin: auto;
  margin-inline-end: 0;
  border-radius: 8px 0 0 8px;
}
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-main .main-content {
  border-radius: inherit;
}
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-main:dir(rtl) {
  border-radius: 0 8px 8px 0;
  margin: auto;
  margin-inline-end: 0;
}
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-secondary {
  margin: auto;
  margin-inline-start: 0;
  border-radius: 0 8px 8px 0;
}
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-secondary:dir(rtl) {
  border-radius: 8px 0 0 8px;
  margin: auto;
  margin-inline-start: 0;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary,
.onboardingContainer .screen[pos=split][fullscreen] .section-main {
  width: 50%;
  height: 100%;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content {
  border-radius: 0;
  padding: 0;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content h1 {
  width: auto;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner {
  min-height: 0;
  flex-grow: 0;
  padding-inline: 110px;
  margin-block: auto;
}
@media only screen and (width <= 800px) {
  .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner {
    padding-block: 20px;
  }
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner .steps:not(.progress-bar) {
  justify-content: start;
  padding-top: 24px;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons {
  position: static;
  height: auto;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons .secondary-cta {
  inset-block-end: 26px;
  inset-inline-end: 30px;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
  --mr-secondary-position: center center / 50%;
  border-radius: 0;
  margin: 0;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image img {
  width: 30%;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary .message-text.hero-text {
  margin-block: auto;
  margin-inline: 17% auto;
  text-align: start;
  width: 100%;
  max-width: 450px;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary .message-text.hero-text h1 {
  font-weight: 510;
  font-size: 80px;
  margin: 0;
  width: 100%;
  max-width: 100%;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary .message-text.hero-text h2 {
  font-size: 20px;
  margin: 0;
  margin-block-start: 24px;
  font-weight: 510;
  width: 100%;
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container {
  background: none;
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container {
  display: flex;
  flex-direction: row;
  border: 1px solid var(--in-content-border-color);
  box-shadow: 0 1px 2px 0 var(--in-content-border-color);
  border-radius: 4px;
  margin-block: 0 16px;
  text-align: start;
  padding: 16px;
  max-width: 800px;
}
@media (800px <= width <= 990px) {
  .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container {
    flex-flow: row wrap;
  }
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .rtamo-icon img {
  margin-inline: 0 16px;
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .install-button-wrapper {
  display: block;
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .install-button-wrapper button {
  padding-inline: 16px;
  font-size: 12px;
  padding-block: 0;
  background-color: var(--in-content-button-background);
  color: var(--in-content-button-text-color);
  min-width: 0;
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .install-button-wrapper button:hover {
  background-color: var(--in-content-button-background-hover);
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .install-button-wrapper button:active {
  background-color: var(--in-content-button-background-active);
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row:not(:last-child) {
  margin-block: 0 12px;
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details {
  margin-block: 0 4px;
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-title {
  font-size: 16px;
  font-weight: 600;
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author {
  font-size: 12px;
  margin-block: 2px 0;
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author .author-link {
  background: none;
  padding: 0;
  font-weight: normal;
  min-width: auto;
  min-height: auto;
  margin: 0;
  text-align: start;
  background: none;
  text-decoration: underline;
  cursor: pointer;
  color: var(--link-color);
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author .author-link:hover {
  color: var(--link-color-hover);
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author .author-link:active {
  color: var(--link-color-active);
}
@media (prefers-contrast) {
  .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author .author-link:active {
    text-decoration: none;
  }
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author .addon-by-line {
  margin-inline: 0 4px;
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-description {
  font-size: 14px;
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .loader {
  width: 1em;
  height: 1em;
  border: 3px solid var(--in-content-primary-button-text-color);
  border-bottom-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  justify-self: center;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .loaderContainer {
  display: flex;
  padding: 1.5px 37.5px;
  margin: auto;
}
@media only screen and (width <= 800px) {
  .onboardingContainer .screen[pos=split][fullscreen] .section-main,
  .onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
    width: 100%;
  }
  .onboardingContainer .screen[pos=split][fullscreen] .section-main {
    height: 75%;
  }
  .onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] {
    height: 100%;
  }
  .onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] .main-content {
    border-radius: 0;
    padding: 0;
  }
  .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons .secondary-cta {
    inset-block-end: 0;
    inset-inline-end: 0;
  }
  .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner {
    padding-inline: 55px;
    margin-inline: auto;
  }
  .onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
    --mr-secondary-position: center var(--mr-secondary-background-position-y) / 50%;
  }
  .onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image img {
    width: 25%;
    max-height: 75%;
  }
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main,
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
  width: 100%;
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main {
  height: 75%;
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] {
  height: 100%;
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] .main-content {
  border-radius: 0;
  padding: 0;
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons .secondary-cta {
  inset-block-end: 0;
  inset-inline-end: 0;
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner {
  padding-inline: 55px;
  margin-inline: auto;
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
  --mr-secondary-position: center var(--mr-secondary-background-position-y) / 50%;
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image img {
  width: 25%;
  max-height: 75%;
}
@media only screen and (width <= 800px) {
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) {
    flex-direction: column;
    min-height: 550px;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))::before {
    width: 400px;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] {
    flex-direction: column;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary {
    border-radius: 8px 8px 0 0;
    margin: auto;
    margin-bottom: 0;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary:dir(rtl) {
    margin: auto;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main {
    height: auto;
    margin: auto;
    margin-top: 0;
    border-radius: 0 0 8px 8px;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main:dir(rtl) {
    margin: auto;
    margin-top: 0;
    border-radius: 0 0 8px 8px;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary,
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main {
    width: 400px;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary {
    --mr-secondary-background-position-y: top;
    --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
    border-radius: 8px 8px 0 0;
    margin: auto;
    margin-bottom: 0;
    height: 100px;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .hero-image img {
    margin: 6px 0;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .message-text {
    margin-inline: auto;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary h1 {
    font-size: 35px;
    text-align: center;
    white-space: normal;
    margin-inline: auto;
    margin-block: 14px 6px;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary:dir(rtl) {
    margin: auto;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary.with-secondary-section-hidden {
    display: none;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) migration-wizard::part(deck) {
    min-width: 330px;
    margin-inline: 36px;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main {
    margin: auto;
    margin-top: 0;
    height: 450px;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main migration-wizard::part(buttons) {
    flex-direction: column;
    margin-inline: 46px;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] {
    height: 550px;
    margin: auto;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive]:dir(rtl) {
    margin: auto;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content {
    padding: 50px 0 0;
    border-radius: 8px;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content:dir(rtl) {
    border-radius: 8px;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content {
    border-radius: 0 0 8px 8px;
    padding: 30px 0 0;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .main-content-inner {
    align-items: center;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container {
    text-align: center;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo {
    min-height: 25px;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo, .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo:dir(rtl) {
    background-position: center;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .logo-alt {
    width: inherit;
    height: inherit;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text {
    align-items: center;
    text-align: center;
    margin-inline: 0;
    padding-inline: 30px;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-bottom,
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-top {
    display: none;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons {
    text-align: center;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .checkbox-container {
    display: none;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .secondary-cta {
    position: relative;
    margin-block: 10px 0;
    bottom: 0;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .primary,
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .secondary {
    min-width: 240px;
    margin-inline: 0;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps {
    padding-block: 0;
    margin: 0;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps.progress-bar {
    margin-inline: 0;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .additional-cta.cta-link {
    align-self: center;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .dismiss-button {
    top: -100px;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) {
    margin: auto;
    margin-top: 0;
  }
  .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) .main-content {
    border-radius: 0 0 8px 8px;
  }
  .onboardingContainer .screen[pos=split][no-rdm] {
    width: 800px;
  }
  .onboardingContainer .screen[pos=split][no-rdm][reverse-split] {
    flex-direction: row-reverse;
  }
  .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main {
    margin: auto;
    margin-inline-end: 0;
    border-radius: 8px 0 0 8px;
  }
  .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main .main-content {
    border-radius: inherit;
  }
  .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main:dir(rtl) {
    border-radius: 0 8px 8px 0;
    margin: auto;
    margin-inline-end: 0;
  }
  .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary {
    margin: auto;
    margin-inline-start: 0;
    border-radius: 0 8px 8px 0;
  }
  .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary:dir(rtl) {
    border-radius: 8px 0 0 8px;
    margin: auto;
    margin-inline-start: 0;
  }
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) {
  flex-direction: column;
  min-height: 550px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))::before {
  width: 400px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] {
  flex-direction: column;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary {
  border-radius: 8px 8px 0 0;
  margin: auto;
  margin-bottom: 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary:dir(rtl) {
  margin: auto;
  margin-bottom: 0;
  border-radius: 8px 8px 0 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main {
  height: auto;
  margin: auto;
  margin-top: 0;
  border-radius: 0 0 8px 8px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main:dir(rtl) {
  margin: auto;
  margin-top: 0;
  border-radius: 0 0 8px 8px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary,
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main {
  width: 400px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary {
  --mr-secondary-background-position-y: top;
  --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
  border-radius: 8px 8px 0 0;
  margin: auto;
  margin-bottom: 0;
  height: 100px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .hero-image img {
  margin: 6px 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .message-text {
  margin-inline: auto;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary h1 {
  font-size: 35px;
  text-align: center;
  white-space: normal;
  margin-inline: auto;
  margin-block: 14px 6px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary:dir(rtl) {
  margin: auto;
  margin-bottom: 0;
  border-radius: 8px 8px 0 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary.with-secondary-section-hidden {
  display: none;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) migration-wizard::part(deck) {
  min-width: 330px;
  margin-inline: 36px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main {
  margin: auto;
  margin-top: 0;
  height: 450px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main migration-wizard::part(buttons) {
  flex-direction: column;
  margin-inline: 46px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] {
  height: 550px;
  margin: auto;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive]:dir(rtl) {
  margin: auto;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content {
  padding: 50px 0 0;
  border-radius: 8px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content:dir(rtl) {
  border-radius: 8px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content {
  border-radius: 0 0 8px 8px;
  padding: 30px 0 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .main-content-inner {
  align-items: center;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container {
  text-align: center;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo {
  min-height: 25px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo, [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo:dir(rtl) {
  background-position: center;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .logo-alt {
  width: inherit;
  height: inherit;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text {
  align-items: center;
  text-align: center;
  margin-inline: 0;
  padding-inline: 30px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-bottom,
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-top {
  display: none;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons {
  text-align: center;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .checkbox-container {
  display: none;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .secondary-cta {
  position: relative;
  margin-block: 10px 0;
  bottom: 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .primary,
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .secondary {
  min-width: 240px;
  margin-inline: 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps {
  padding-block: 0;
  margin: 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps.progress-bar {
  margin-inline: 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .additional-cta.cta-link {
  align-self: center;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .dismiss-button {
  top: -100px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) {
  margin: auto;
  margin-top: 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) .main-content {
  border-radius: 0 0 8px 8px;
}
[narrow] .onboardingContainer .screen[pos=split][no-rdm] {
  width: 800px;
}
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] {
  flex-direction: row-reverse;
}
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main {
  margin: auto;
  margin-inline-end: 0;
  border-radius: 8px 0 0 8px;
}
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main .main-content {
  border-radius: inherit;
}
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main:dir(rtl) {
  border-radius: 0 8px 8px 0;
  margin: auto;
  margin-inline-end: 0;
}
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary {
  margin: auto;
  margin-inline-start: 0;
  border-radius: 0 8px 8px 0;
}
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary:dir(rtl) {
  border-radius: 8px 0 0 8px;
  margin: auto;
  margin-inline-start: 0;
}
@media only screen and (height <= 650px) and (800px <= width <= 990px) {
  .onboardingContainer .screen[pos=split] .section-main .secondary-cta.top {
    display: none;
  }
}
@media only screen and (height <= 650px) and (width <= 620px) {
  .onboardingContainer .screen[pos=split] .section-main .secondary-cta.top {
    position: absolute;
    padding: 0;
    top: 0;
    inset-inline-end: 0;
  }
}
@media only screen and (height <= 650px) and (width <= 620px) {
  [narrow] .onboardingContainer .screen[pos=split] .section-main .secondary-cta.top {
    position: absolute;
    padding: 0;
    top: 0;
    inset-inline-end: 0;
  }
}
.onboardingContainer .brand-logo {
  margin-block: 60px 10px;
  transition: var(--transition);
  height: 80px;
  user-select: none;
}
.onboardingContainer .brand-logo.cta-top {
  margin-top: 25px;
}
.onboardingContainer .brand-logo.hide {
  visibility: hidden;
  padding: unset;
  margin-top: 50px;
}
.onboardingContainer .logo-alt {
  width: inherit;
  height: inherit;
}
.onboardingContainer .rtamo-theme-icon {
  max-height: 30px;
  border-radius: 2px;
  margin-bottom: 10px;
  margin-top: 24px;
}
.onboardingContainer .rtamo-icon {
  text-align: start;
}
@media only screen and (width <= 800px) {
  .onboardingContainer .rtamo-icon {
    text-align: center;
  }
}
[narrow] .onboardingContainer .rtamo-icon {
  text-align: center;
}
.onboardingContainer .text-link {
  background: none;
  text-decoration: underline;
  cursor: pointer;
  color: var(--link-color);
}
.onboardingContainer .text-link:hover {
  color: var(--link-color-hover);
}
.onboardingContainer .text-link:active {
  color: var(--link-color-active);
}
@media (prefers-contrast) {
  .onboardingContainer .text-link:active {
    text-decoration: none;
  }
}
.onboardingContainer .welcome-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0.5em 1em;
  transition: var(--transition);
}
.onboardingContainer .welcome-text h1,
.onboardingContainer .welcome-text h2 {
  color: var(--in-content-page-color);
  line-height: 1.5;
}
.onboardingContainer .welcome-text h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 6px;
  letter-spacing: -0.02em;
  outline: none;
}
.onboardingContainer .welcome-text h2 {
  font-size: 16px;
  font-weight: normal;
  margin: 10px 6px 0;
  max-width: 750px;
  letter-spacing: -0.01em;
}
.onboardingContainer .welcome-text.fancy h1 {
  background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF);
  background-clip: text;
  background-size: 200%;
}
@media (prefers-contrast: no-preference) {
  .onboardingContainer .welcome-text.fancy h1 {
    color: transparent;
  }
}
@media (prefers-color-scheme: dark) {
  .onboardingContainer .welcome-text.fancy h1 {
    background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF);
  }
  .onboardingContainer .welcome-text.fancy h1::selection {
    color: #FFF;
    background-color: #696977;
  }
}
.onboardingContainer .welcome-text.shine h1 {
  animation: shine 50s linear infinite;
  background-size: 400%;
}
@keyframes shine {
  to {
    background-position: 400%;
  }
}
.onboardingContainer .welcome-text .cta-paragraph a {
  margin: 0;
  text-decoration: underline;
  cursor: pointer;
}
.onboardingContainer .screen.light-text .welcome-text.fancy h1 {
  background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF);
}
.onboardingContainer .screen.dark-text .welcome-text.fancy h1 {
  background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF);
}
.onboardingContainer .welcomeZap span {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.onboardingContainer .welcomeZap .zap::after {
  display: block;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  position: absolute;
  top: calc(100% - 0.15em);
  width: 100%;
  height: 0.3em;
  left: 0;
  z-index: -1;
  transform: scaleY(3);
}
.onboardingContainer .welcomeZap .zap.short::after {
  background-image: url("chrome://activity-stream/content/data/content/assets/short-zap.svg");
}
.onboardingContainer .welcomeZap .zap.long::after {
  background-image: url("chrome://activity-stream/content/data/content/assets/long-zap.svg");
}
.onboardingContainer .language-loader {
  -moz-context-properties: fill;
  fill: currentColor;
  margin-inline-end: 10px;
  position: relative;
  top: 3px;
  width: 16px;
  height: 16px;
  margin-top: -6px;
}
.onboardingContainer .tiles-single-select-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px auto;
}
.onboardingContainer .sr-only {
  opacity: 0;
  overflow: hidden;
  position: absolute;
}
.onboardingContainer .sr-only.input {
  height: 1px;
  width: 1px;
}
.onboardingContainer .tiles-single-select-section {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: space-evenly;
  margin-inline: 10px;
  padding: 10px;
  transition: var(--transition);
}
.onboardingContainer .tiles-single-select-section:hover, .onboardingContainer .tiles-single-select-section:active, .onboardingContainer .tiles-single-select-section:focus-within {
  border-radius: 8px;
  outline: 2px solid var(--in-content-primary-button-background);
}
.onboardingContainer .tiles-single-select-section.single-select:not(.theme) {
  flex-direction: row;
  padding-top: 5px;
  gap: 10px;
  justify-content: center;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.theme) .select-item {
  position: relative;
  padding-top: 5px;
  border: 2px solid var(--single-select-border-color);
  border-radius: 12px;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.theme) .select-item:has(.input:focus), .onboardingContainer .tiles-single-select-section.single-select:not(.theme) .select-item:has(.selected) {
  outline: none;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.theme) .select-item:has(.input:focus) {
  outline: 2px solid var(--in-content-primary-button-background);
  outline-offset: 5px;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.theme) .select-item:has(.selected) {
  border: 3px solid var(--in-content-primary-button-background);
  border-radius: 12px;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.theme) .select-item:hover {
  background-color: var(--single-select-hover-color);
}
.onboardingContainer .tiles-single-select-section.single-select:not(.theme) .select-item:focus-visible {
  outline: none;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.theme) .select-item:focus-visible .icon {
  outline: initial;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.theme) .select-item .flair {
  height: 18px;
  border-radius: 4px;
  background-color: #9059FF;
  color: #FFF;
  padding: 2px 8px;
  position: absolute;
  right: 1px;
  top: -10px;
  line-height: 1;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.theme) .select-item .icon {
  outline: none;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.theme) .select-item .text {
  margin-block: 8px;
}
.onboardingContainer .tiles-single-select-section.theme .select-item {
  width: 180px;
}
.onboardingContainer .tiles-single-select-section.single-select:hover, .onboardingContainer .tiles-single-select-section.single-select:focus-within {
  outline: none;
}
.onboardingContainer .tiles-single-select-section.single-select .select-item {
  transition: var(--transition);
}
.onboardingContainer .tiles-single-select-section.single-select .select-item:has(.input:focus) {
  outline: 2px solid var(--in-content-primary-button-background);
  outline-offset: 2px;
}
.onboardingContainer .tiles-single-select-section .select-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
  min-width: 50px;
  color: #000;
  box-shadow: none;
  border-radius: 4px;
  cursor: pointer;
  z-index: 0;
}
.onboardingContainer .tiles-single-select-section .select-item:focus, .onboardingContainer .tiles-single-select-section .select-item:active {
  outline: initial;
  outline-offset: initial;
}
.onboardingContainer .tiles-single-select-section .select-item .icon {
  background-size: cover;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  outline: 1px solid var(--in-content-border-color);
  outline-offset: -0.5px;
  z-index: -1;
}
.onboardingContainer .tiles-single-select-section .select-item .icon:dir(rtl) {
  transform: scaleX(-1);
}
.onboardingContainer .tiles-single-select-section .select-item .icon:focus-visible, .onboardingContainer .tiles-single-select-section .select-item .icon:active, .onboardingContainer .tiles-single-select-section .select-item .icon.selected {
  outline: 2px solid var(--in-content-primary-button-background);
  outline-offset: 2px;
}
.onboardingContainer .tiles-single-select-section .select-item .icon.selected {
  outline-color: var(--color-accent-primary-active);
}
.onboardingContainer .tiles-single-select-section .select-item .icon.light {
  background-image: url("resource://builtin-themes/light/icon.svg");
}
.onboardingContainer .tiles-single-select-section .select-item .icon.dark {
  background-image: url("resource://builtin-themes/dark/icon.svg");
}
.onboardingContainer .tiles-single-select-section .select-item .icon.alpenglow {
  background-image: url("resource://builtin-themes/alpenglow/icon.svg");
}
.onboardingContainer .tiles-single-select-section .select-item .icon.default, .onboardingContainer .tiles-single-select-section .select-item .icon.automatic {
  background-image: url("resource://default-theme/icon.svg");
}
.onboardingContainer .tiles-single-select-section .select-item .text {
  display: flex;
  color: var(--in-content-page-color);
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  margin-inline-start: 0;
  margin-top: 9px;
}
.onboardingContainer .tiles-single-select-section legend {
  cursor: default;
}
.onboardingContainer .tiles-container {
  margin: 10px auto;
}
.onboardingContainer .tiles-container.info {
  padding: 6px 12px 12px;
}
.onboardingContainer .tiles-container.info:hover, .onboardingContainer .tiles-container.info:focus {
  background-color: rgba(217, 217, 227, 0.3);
  border-radius: 4px;
}
.onboardingContainer .tiles-delayed {
  animation: fadein 0.4s;
}
.onboardingContainer .multi-select-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: flex-start;
  gap: 16px;
  margin-block: -1em 2em;
  margin-inline: 1em;
  color: #5B5B66;
  font-weight: 400;
  font-size: 14px;
  text-align: initial;
  transition: var(--transition);
  z-index: 1;
}
.onboardingContainer .multi-select-container #multi-stage-multi-select-label {
  color: var(--in-content-page-color);
  line-height: 1.5;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: -0.01em;
  margin: calc(0.5em + 10px) 6px 0;
  max-width: 750px;
}
.onboardingContainer .screen[pos=split] .multi-select-container #multi-stage-multi-select-label {
  margin: calc(-35px + 1em + 10px) 0 0;
  min-height: 1em;
  font-size: 15px;
  line-height: 1.5;
}
@media (prefers-contrast: no-preference) {
  .onboardingContainer .screen[pos=split] .multi-select-container #multi-stage-multi-select-label {
    color: #5B5B66;
  }
}
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
  .onboardingContainer .screen[pos=split] .multi-select-container #multi-stage-multi-select-label {
    color: #CFCFD8;
  }
}

.onboardingContainer .multi-select-container .checkbox-container {
  display: flex;
}
.onboardingContainer .multi-select-container .checkbox-container > input {
  flex-grow: 0;
  flex-shrink: 0;
}
@media (prefers-color-scheme: dark) {
  .onboardingContainer .multi-select-container {
    color: #CFCFD8;
  }
}
@media (prefers-contrast) {
  .onboardingContainer .multi-select-container {
    color: var(--in-content-page-color);
  }
}
.onboardingContainer .mobile-downloads .qr-code-image {
  margin: 24px 0 10px;
  width: 113px;
  height: 113px;
}
.onboardingContainer .mobile-downloads .email-link {
  background: none;
  text-decoration: underline;
  cursor: pointer;
  color: var(--link-color);
  font-size: 16px;
  font-weight: 400;
}
.onboardingContainer .mobile-downloads .email-link:hover {
  color: var(--link-color-hover);
}
.onboardingContainer .mobile-downloads .email-link:active {
  color: var(--link-color-active);
}
@media (prefers-contrast) {
  .onboardingContainer .mobile-downloads .email-link:active {
    text-decoration: none;
  }
}
.onboardingContainer .mobile-downloads .email-link:hover {
  background: none;
}
.onboardingContainer .mobile-downloads .ios button {
  background-image: url("chrome://app-marketplace-icons/locale/ios.svg");
}
.onboardingContainer .mobile-downloads .android button {
  background-image: url("chrome://app-marketplace-icons/locale/android.png");
}
.onboardingContainer .mobile-download-buttons {
  list-style: none;
  padding: 10px 0;
  margin: 0;
}
.onboardingContainer .mobile-download-buttons li {
  display: inline-block;
}
.onboardingContainer .mobile-download-buttons li button {
  display: inline-block;
  height: 45px;
  width: 152px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  box-shadow: none;
  border: 0;
}
.onboardingContainer .mobile-download-buttons li:not(:first-child) {
  margin-inline: 5px 0;
}
.onboardingContainer .onboardingContainer .main-content.no-steps:has(button.content-tiles-header[aria-expanded=false]) {
  padding-bottom: 0;
}
.onboardingContainer #content-tiles-container button.tile-header,
.onboardingContainer button.content-tiles-header {
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-width: 1px;
  border-radius: 0;
  cursor: pointer;
  outline-offset: -12px;
}
@media (prefers-contrast: no-preference) {
  .onboardingContainer #content-tiles-container button.tile-header,
  .onboardingContainer button.content-tiles-header {
    background-color: var(--in-content-page-background);
    border-color: var(--in-content-border-color);
  }
}
.onboardingContainer #content-tiles-container button.tile-header .arrow-icon,
.onboardingContainer button.content-tiles-header .arrow-icon {
  width: 1em;
  height: 1.5em;
  -moz-context-properties: fill;
  fill: currentColor;
  background: url("chrome://global/skin/icons/arrow-down.svg") center center/100% no-repeat;
}
.onboardingContainer #content-tiles-container button.tile-header[aria-expanded=true],
.onboardingContainer button.content-tiles-header[aria-expanded=true] {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.onboardingContainer #content-tiles-container button.tile-header[aria-expanded=true] .arrow-icon,
.onboardingContainer button.content-tiles-header[aria-expanded=true] .arrow-icon {
  background: url("chrome://global/skin/icons/arrow-up.svg") center center/100% no-repeat;
}
.onboardingContainer button.content-tiles-header {
  margin: 0.5em 0 0;
  font-size: 11px;
  font-weight: 400;
  justify-content: center;
  border-width: 1px 0;
}
@media (prefers-contrast: no-preference) {
  .onboardingContainer button.content-tiles-header {
    color: #5B5B66;
  }
}
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
  .onboardingContainer button.content-tiles-header {
    color: #CFCFD8;
  }
}
@media (prefers-contrast) {
  .onboardingContainer button.content-tiles-header {
    color: var(--in-content-page-color);
  }
}
.onboardingContainer button.content-tiles-header .arrow-icon {
  margin-inline: 1em;
}
.onboardingContainer #content-tiles-container {
  --tiles-container-border-radius: 8px;
  margin: 24px 48px;
}
.onboardingContainer #content-tiles-container .content-tile {
  display: flex;
  flex-direction: column;
}
.onboardingContainer #content-tiles-container .content-tile.has-header:first-of-type button.tile-header, .onboardingContainer #content-tiles-container .content-tile:not(.has-header) + .content-tile.has-header button.tile-header {
  border-start-start-radius: var(--tiles-container-border-radius);
  border-start-end-radius: var(--tiles-container-border-radius);
}
.onboardingContainer #content-tiles-container .content-tile.has-header:not(:has(+ .content-tile.has-header)) button.tile-header {
  border-end-start-radius: var(--tiles-container-border-radius);
  border-end-end-radius: var(--tiles-container-border-radius);
}
.onboardingContainer #content-tiles-container .content-tile.has-header:not(:has(+ .content-tile.has-header)) button.tile-header[aria-expanded=true] {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.onboardingContainer #content-tiles-container .content-tile.has-header:not(:has(+ .content-tile.has-header)) button.tile-header[aria-expanded=true] + .tile-content {
  border: 1px solid var(--in-content-border-color);
  border-top: none;
  border-radius: 0 0 var(--tiles-container-border-radius) var(--tiles-container-border-radius);
}
.onboardingContainer #content-tiles-container .content-tile.has-header:has(+ .content-tile.has-header) button.tile-header[aria-expanded=false] {
  border-bottom: none;
}
.onboardingContainer #content-tiles-container .content-tile button.tile-header {
  font-size: 13px;
  justify-content: space-between;
}
.onboardingContainer #content-tiles-container .content-tile button.tile-header + .tile-content {
  border-inline-start: 1px solid var(--in-content-border-color);
  border-inline-end: 1px solid var(--in-content-border-color);
}
.onboardingContainer #content-tiles-container .content-tile button.tile-header .header-text-container {
  display: flex;
  flex-direction: column;
}
.onboardingContainer #content-tiles-container .content-tile button.tile-header .header-text-container .header-title {
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}
.onboardingContainer #content-tiles-container .content-tile button.tile-header .header-text-container .header-subtitle {
  font-weight: 400;
  line-height: 1.5;
}
.onboardingContainer #content-tiles-container .content-tile .multi-select-container {
  padding: 24px;
  margin: 0;
}
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker {
  display: flex;
  flex-flow: row wrap;
  box-sizing: border-box;
}
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--picker-background-color);
  border: 1px solid var(--picker-border-color);
  padding: 8px 12px;
  border-radius: 100px;
  user-select: none;
}
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:has(input:checked) {
  border-color: var(--picker-checked-border-color);
  border-width: 3px;
  margin: -2px;
}
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:has(input:checked):hover {
  border-color: var(--picker-hover-border-color);
}
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:hover {
  background-color: var(--picker-hover-background-color);
  border-color: var(--picker-hover-border-color);
}
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:hover .picker-icon.picker-checked {
  background-color: var(--picker-checkbox-hover-color);
}
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:focus-visible {
  outline: 2px solid var(--picker-focus-ring-color);
  outline-offset: 6px;
}
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:focus-visible:has(input:checked) {
  outline-offset: 4px;
}
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container .picker-icon {
  border-radius: 100%;
  width: 27px;
  height: 27px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-inline-end: 8px;
  font-size: 12px;
  forced-color-adjust: none;
}
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container .picker-icon.picker-checked {
  forced-color-adjust: auto;
  background-color: var(--picker-checkbox-color);
  mask: url("chrome://global/skin/icons/check.svg") center/15px no-repeat exclude, linear-gradient(#000 0 0);
}
.onboardingContainer #content-tiles-container .content-tile .multi-select-container .checkbox-container {
  display: grid;
}
.onboardingContainer #content-tiles-container .content-tile .multi-select-container .checkbox-container label,
.onboardingContainer #content-tiles-container .content-tile .multi-select-container .checkbox-container p {
  grid-column: 2;
}
.onboardingContainer #content-tiles-container .content-tile .multi-select-container .checkbox-container p {
  margin-block: 0.5em 0;
}
.onboardingContainer .tile-title-container {
  margin-inline: 0;
  margin-block: 10px 24px;
  text-align: start;
  transition: var(--transition);
}
.onboardingContainer .tile-title {
  font-size: 24px;
  font-weight: 600;
  margin-block: 0;
}
.onboardingContainer .tile-title:not(:last-child) {
  margin-block-end: 16px;
}
.onboardingContainer .tile-subtitle {
  font-size: 16px;
  margin-block: 0;
}
.onboardingContainer .dismiss-button {
  position: absolute;
  z-index: 2;
  top: 0;
  left: auto;
  right: 0;
  box-sizing: border-box;
  padding: 0;
  margin: 16px;
  display: block;
  float: inline-end;
  background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px;
  height: 32px;
  width: 32px;
  align-self: end;
  min-height: 32px;
  min-width: 32px;
  -moz-context-properties: fill;
  fill: currentColor;
  transition: var(--transition);
}
.onboardingContainer .dismiss-button:dir(rtl) {
  left: 0;
  right: auto;
}
.onboardingContainer .dismiss-button.with-background {
  background-color: var(--in-content-page-background);
}
.onboardingContainer .dismiss-button.with-background:hover {
  background-color: var(--button-background-color-hover);
}
.onboardingContainer .dismiss-button.with-background:active {
  background-color: var(--button-background-color-active);
}
@keyframes fadein {
  from {
    opacity: 0;
  }
}
.onboardingContainer .secondary-cta {
  display: flex;
  align-items: end;
  flex-direction: row;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition);
}
.onboardingContainer .secondary-cta.top {
  justify-content: end;
  padding-inline-end: min(150px, 500px - 70vh);
  padding-top: 4px;
  position: absolute;
  top: 10px;
  inset-inline-end: 20px;
  z-index: 2;
}
.onboardingContainer .secondary-cta span {
  color: var(--grey-subtitle-1);
  margin: 0 4px;
}
.onboardingContainer .message-text {
  transition: var(--transition);
}
.onboardingContainer .helptext {
  padding: 1em;
  text-align: center;
  color: var(--grey-subtitle-1);
  font-size: 12px;
  line-height: 18px;
}
.onboardingContainer .helptext.default {
  align-self: center;
  max-width: 40%;
}
.onboardingContainer .helptext span {
  padding-inline-end: 4px;
}
.onboardingContainer .helptext-img {
  height: 1.5em;
  width: 1.5em;
  margin-inline-end: 4px;
  vertical-align: middle;
}
.onboardingContainer .helptext-img.end {
  margin: 4px;
}
.onboardingContainer .helptext-img.footer {
  vertical-align: bottom;
}
.onboardingContainer .steps {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 0;
  padding-block: 16px 0;
  transition: var(--transition);
  z-index: -1;
  height: 48px;
  box-sizing: border-box;
}
.onboardingContainer .steps.has-helptext {
  padding-bottom: 0;
}
.onboardingContainer .steps .indicator {
  width: 0;
  height: 0;
  margin-inline-end: 4px;
  margin-inline-start: 4px;
  background: var(--grey-subtitle-1);
  border-radius: 5px;
  border: 3px solid var(--in-content-button-text-color);
  opacity: 0.35;
  box-sizing: inherit;
}
.onboardingContainer .steps .indicator.current {
  opacity: 1;
  border-color: var(--in-content-primary-button-background);
}
.onboardingContainer .steps .indicator.current:last-of-type:first-of-type {
  opacity: 0;
}
.onboardingContainer .steps.progress-bar {
  height: 6px;
  padding-block: 0;
  margin-block: 42px 0;
  background-color: color-mix(in srgb, var(--in-content-button-text-color) 25%, transparent);
  justify-content: start;
  opacity: 1;
  transition: none;
}
.onboardingContainer .steps.progress-bar .indicator {
  width: 100%;
  height: 100%;
  margin-inline: -1px;
  background-color: var(--in-content-primary-button-background);
  border: 0;
  border-radius: 0;
  opacity: 1;
  transition: var(--progress-bar-transition);
  translate: calc(var(--progress-bar-progress, 0%) - 100%);
}
.onboardingContainer .steps.progress-bar .indicator:dir(rtl) {
  translate: calc(var(--progress-bar-progress, 0%) * -1 + 100%);
}
.onboardingContainer .additional-cta-container[flow] {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}
.onboardingContainer .additional-cta-container[flow][flow=row] {
  flex-direction: row;
  justify-content: center;
}
.onboardingContainer .additional-cta-container[flow][flow=row] .secondary-cta {
  flex-basis: 100%;
}
.onboardingContainer .legal-paragraph {
  transition: var(--transition);
}
.onboardingContainer .primary,
.onboardingContainer .secondary,
.onboardingContainer .additional-cta,
.onboardingContainer .submenu-button {
  font-size: 13px;
  line-height: 16px;
  padding: 11px 15px;
  transition: var(--transition);
}
.onboardingContainer .primary.rtamo,
.onboardingContainer .secondary.rtamo,
.onboardingContainer .additional-cta.rtamo,
.onboardingContainer .submenu-button.rtamo {
  margin-top: 24px;
}
.onboardingContainer .secondary {
  background-color: var(--in-content-button-background);
  color: var(--in-content-button-text-color);
}
.onboardingContainer .split-button-container,
.onboardingContainer .screen .action-buttons .split-button-container {
  align-items: stretch;
}
.onboardingContainer .split-button-container:not([hidden]),
.onboardingContainer .screen .action-buttons .split-button-container:not([hidden]) {
  display: flex;
}
.onboardingContainer .split-button-container .primary:not(.submenu-button),
.onboardingContainer .split-button-container .secondary:not(.submenu-button),
.onboardingContainer .split-button-container .additional-cta:not(.submenu-button),
.onboardingContainer .screen .action-buttons .split-button-container .primary:not(.submenu-button),
.onboardingContainer .screen .action-buttons .split-button-container .secondary:not(.submenu-button),
.onboardingContainer .screen .action-buttons .split-button-container .additional-cta:not(.submenu-button) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  margin-inline-end: 0;
}
.onboardingContainer .split-button-container .primary:focus-visible,
.onboardingContainer .split-button-container .secondary:focus-visible,
.onboardingContainer .split-button-container .additional-cta:focus-visible,
.onboardingContainer .screen .action-buttons .split-button-container .primary:focus-visible,
.onboardingContainer .screen .action-buttons .split-button-container .secondary:focus-visible,
.onboardingContainer .screen .action-buttons .split-button-container .additional-cta:focus-visible {
  z-index: 2;
}
.onboardingContainer .split-button-container .submenu-button,
.onboardingContainer .screen .action-buttons .split-button-container .submenu-button {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  margin-inline-start: 1px;
  padding: 8px;
  min-width: 30px;
  box-sizing: border-box;
  background-image: url("chrome://global/skin/icons/arrow-down.svg");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: center;
  -moz-context-properties: fill;
  fill: currentColor;
}
.onboardingContainer .noodle {
  display: block;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  transition: var(--transition);
}
.onboardingContainer .noodle:dir(rtl) {
  scale: -1 1;
}
.onboardingContainer .outline-L {
  background-image: url("chrome://activity-stream/content/data/content/assets/noodle-outline-L.svg");
}
.onboardingContainer .solid-L {
  background-image: url("chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg");
  -moz-context-properties: fill;
  fill: var(--in-content-page-background);
  display: none;
}
.onboardingContainer .purple-C {
  background-image: url("chrome://activity-stream/content/data/content/assets/noodle-C.svg");
  -moz-context-properties: fill;
  fill: #E7258C;
}
.onboardingContainer .orange-L {
  background-image: url("chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg");
  -moz-context-properties: fill;
  fill: #FFA437;
}
.onboardingContainer .screen-1 .section-main {
  z-index: 1;
  margin: auto;
}
.onboardingContainer .screen-1 .section-main.system-prompt-spotlight {
  margin-top: 100px;
  margin-inline: auto;
}
.onboardingContainer .screen-1 .outline-L {
  width: 87px;
  height: 80px;
  transform: rotate(10deg) translate(-30%, 200%);
  transition-delay: 0.4s;
  z-index: 2;
}
.onboardingContainer .screen-1 .orange-L {
  width: 550px;
  height: 660px;
  transform: rotate(-155deg) translate(11%, -18%);
  transition-delay: 0.2s;
}
.onboardingContainer .screen-1 .purple-C {
  width: 310px;
  height: 260px;
  transform: translate(-18%, -67%);
}
.onboardingContainer .screen-1 .yellow-circle {
  width: 165px;
  height: 165px;
  border-radius: 50%;
  transform: translate(230%, -5%);
  background: #952BB9;
  transition-delay: -0.2s;
}
.onboardingContainer .dialog-initial .brand-logo {
  transition-delay: 0.6s;
}
.onboardingContainer .dialog-initial .welcome-text {
  transition-delay: 0.8s;
}
.onboardingContainer .dialog-initial .tiles-single-select-section,
.onboardingContainer .dialog-initial .inline-image,
.onboardingContainer .dialog-initial .link-paragraph,
.onboardingContainer .dialog-initial .multi-select-container,
.onboardingContainer .dialog-initial migration-wizard {
  transition-delay: 0.9s;
}
.onboardingContainer .dialog-initial .primary,
.onboardingContainer .dialog-initial .secondary,
.onboardingContainer .dialog-initial .secondary-cta,
.onboardingContainer .dialog-initial .steps,
.onboardingContainer .dialog-initial .cta-link,
.onboardingContainer .dialog-initial .legal-paragraph,
.onboardingContainer .dialog-initial .steps[above-button]:not(.progress-bar) {
  transition-delay: 1s;
}
.onboardingContainer .screen:not(.dialog-initial) .tiles-single-select-section,
.onboardingContainer .screen:not(.dialog-initial) .inline-image,
.onboardingContainer .screen:not(.dialog-initial) .link-paragraph,
.onboardingContainer .screen:not(.dialog-initial) .multi-select-container {
  transition-delay: 0.2s;
}
.onboardingContainer .screen:not(.dialog-initial) .primary,
.onboardingContainer .screen:not(.dialog-initial) .secondary,
.onboardingContainer .screen:not(.dialog-initial) .secondary-cta,
.onboardingContainer .screen:not(.dialog-initial) .cta-link,
.onboardingContainer .screen:not(.dialog-initial) .legal-paragraph,
.onboardingContainer .screen:not(.dialog-initial) .steps[above-button]:not(.progress-bar) {
  transition-delay: 0.4s;
}
.onboardingContainer .screen-2 .section-main {
  z-index: 1;
  margin: auto;
}
.onboardingContainer .screen-2 .section-main.system-prompt-spotlight {
  margin-top: 100px;
  margin-inline: auto;
}
.onboardingContainer .screen-2 .outline-L {
  width: 87px;
  height: 80px;
  transform: rotate(250deg) translate(-420%, 425%);
  transition-delay: 0.2s;
  z-index: 2;
}
.onboardingContainer .screen-2 .orange-L {
  height: 800px;
  width: 660px;
  transform: rotate(35deg) translate(-10%, -7%);
  transition-delay: -0.4s;
}
.onboardingContainer .screen-2 .purple-C {
  width: 392px;
  height: 394px;
  transform: rotate(260deg) translate(-34%, -35%);
  transition-delay: -0.2s;
  fill: #952BB9;
}
.onboardingContainer .screen-2 .yellow-circle {
  width: 165px;
  height: 165px;
  border-radius: 50%;
  transform: translate(160%, 130%);
  background: #E7258C;
}
.onboardingContainer.transition-in .noodle {
  opacity: 0;
  rotate: var(--rotate);
  scale: var(--scale);
}
.onboardingContainer.transition-in .dialog-initial .main-content,
.onboardingContainer.transition-in .dialog-initial .dismiss-button {
  translate: 0 calc(-2 * var(--translate));
}
.onboardingContainer.transition-in .dialog-initial .brand-logo,
.onboardingContainer.transition-in .dialog-initial .steps {
  opacity: 0;
  translate: 0 calc(-1 * var(--translate));
}
.onboardingContainer.transition-in .screen .welcome-text,
.onboardingContainer.transition-in .screen .multi-select-container,
.onboardingContainer.transition-in .screen .tiles-single-select-section,
.onboardingContainer.transition-in .screen .link-paragraph,
.onboardingContainer.transition-in .screen .inline-image,
.onboardingContainer.transition-in .screen .primary,
.onboardingContainer.transition-in .screen .checkbox-container:not(.multi-select-item),
.onboardingContainer.transition-in .screen .secondary,
.onboardingContainer.transition-in .screen .secondary-cta:not(.top),
.onboardingContainer.transition-in .screen .cta-link,
.onboardingContainer.transition-in .screen .legal-paragraph,
.onboardingContainer.transition-in .screen migration-wizard,
.onboardingContainer.transition-in .screen .tile-title-container,
.onboardingContainer.transition-in .screen .steps[above-button]:not(.progress-bar) {
  opacity: 0;
  translate: 0 calc(-1 * var(--translate));
}
.onboardingContainer.transition-in .screen:not(.dialog-initial) .steps:not(.progress-bar, [above-button]) {
  opacity: 0.2;
}
.onboardingContainer .system-prompt-spotlight .inline-icon-container {
  display: flex;
}
.onboardingContainer .system-prompt-spotlight .welcome-text {
  align-items: flex-start;
  padding: 5px;
}
.onboardingContainer .system-prompt-spotlight .welcome-text h2 {
  text-align: start;
  margin: 0;
  margin-block: 10px 15px;
}
.onboardingContainer .system-prompt-spotlight .brand-logo {
  margin-block: 2px;
}
.onboardingContainer .system-prompt-spotlight .multi-select-container {
  margin-inline-start: 23px;
  margin-block-end: 17px;
}
.onboardingContainer .system-prompt-spotlight .additional-cta-container {
  display: flex;
  flex-direction: row-reverse;
  padding-inline-end: 15px;
}
.onboardingContainer .system-prompt-spotlight .main-content.no-steps {
  padding-bottom: 12px;
  margin-inline: auto;
}
.onboardingContainer.transition-out .noodle {
  opacity: 0;
  rotate: var(--rotate);
  scale: var(--scale);
  transition-delay: 0.2s;
}
.onboardingContainer.transition-out .screen:not(.dialog-last) .main-content {
  overflow: hidden;
}
.onboardingContainer.transition-out .screen:not(.dialog-last) .welcome-text,
.onboardingContainer.transition-out .screen:not(.dialog-last) .multi-select-container {
  opacity: 0;
  translate: 0 var(--translate);
  transition-delay: 0.1s;
}
.onboardingContainer.transition-out .screen:not(.dialog-last) .tiles-single-select-section,
.onboardingContainer.transition-out .screen:not(.dialog-last) .inline-image,
.onboardingContainer.transition-out .screen:not(.dialog-last) .link-paragraph,
.onboardingContainer.transition-out .screen:not(.dialog-last) migration-wizard {
  opacity: 0;
  translate: 0 var(--translate);
  transition-delay: 0.2s;
}
.onboardingContainer.transition-out .screen:not(.dialog-last) .primary,
.onboardingContainer.transition-out .screen:not(.dialog-last) .checkbox-container:not(.multi-select-item),
.onboardingContainer.transition-out .screen:not(.dialog-last) .secondary,
.onboardingContainer.transition-out .screen:not(.dialog-last) .secondary-cta:not(.top),
.onboardingContainer.transition-out .screen:not(.dialog-last) .cta-link,
.onboardingContainer.transition-out .screen:not(.dialog-last) .legal-paragraph,
.onboardingContainer.transition-out .screen:not(.dialog-last) .steps[above-button]:not(.progress-bar) {
  opacity: 0;
  translate: 0 var(--translate);
  transition-delay: 0.3s;
}
.onboardingContainer.transition-out .screen:not(.dialog-last) .steps:not(.progress-bar, [above-button]) {
  opacity: 0.2;
  transition-delay: 0.5s;
}
.onboardingContainer.transition-out .dialog-last .noodle {
  transition-delay: 0s;
}
.onboardingContainer.transition-out .dialog-last .main-content,
.onboardingContainer.transition-out .dialog-last .dismiss-button {
  opacity: 0;
  translate: 0 calc(2 * var(--translate));
  transition-delay: 0.4s;
}
.onboardingContainer .inline-image,
.onboardingContainer .link-paragraph {
  transition: var(--transition);
}
.onboardingContainer migration-wizard {
  width: unset;
  transition: var(--transition);
}
.onboardingContainer migration-wizard::part(buttons) {
  margin-top: 24px;
  justify-content: flex-start;
}
.onboardingContainer migration-wizard::part(deck) {
  font-size: 0.83em;
}

Back to Home