--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -6,17 +6,17 @@
 @namespace html url("http://www.w3.org/1999/xhtml");
 @namespace svg url("http://www.w3.org/2000/svg");
 
 :root {
   --identity-popup-expander-width: 38px;
   --panelui-subview-transition-duration: 150ms;
 }
 
-#main-window:not([chromehidden~="toolbar"]) {
+:root:not([chromehidden~="toolbar"]) {
 %ifdef XP_MACOSX
   min-width: 335px;
 %else
   min-width: 300px;
 %endif
 }
 
 /* These values are chosen to keep the Loop detached chat window from
@@ -38,17 +38,17 @@
   * In some ideal world, we'd have a simple way to express "block resizing
   * along any dimension beyond the point at which an overflow event would
   * occur".  But none of -moz-{fit,max,min}-content do what we want here. So..
   */
   min-width: 260px;
   min-height: 315px;
 }
 
-#main-window[customize-entered] {
+:root[customize-entered] {
   min-width: -moz-fit-content;
 }
 
 searchbar {
   -moz-binding: url("chrome://browser/content/search/search.xml#searchbar");
 }
 
 /* Prevent shrinking the page content to 0 height and width */
@@ -214,33 +214,33 @@ toolbar[overflowable] > .customization-t
 }
 
 toolbar:not([overflowing]) > .overflow-button,
 toolbar[customizing] > .overflow-button {
   display: none;
 }
 
 %ifdef CAN_DRAW_IN_TITLEBAR
-#main-window:not([chromemargin]) > #titlebar,
-#main-window[inFullscreen] > #titlebar,
-#main-window[inFullscreen] .titlebar-placeholder,
-#main-window:not([tabsintitlebar]) .titlebar-placeholder {
+:root:not([chromemargin]) > #titlebar,
+:root[inFullscreen] > #titlebar,
+:root[inFullscreen] .titlebar-placeholder,
+:root:not([tabsintitlebar]) .titlebar-placeholder {
   display: none;
 }
 
 #titlebar {
   -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
   -moz-window-dragging: drag;
 }
 
 #titlebar-spacer {
   pointer-events: none;
 }
 
-#main-window[tabsintitlebar] #titlebar-buttonbox {
+:root[tabsintitlebar] #titlebar-buttonbox {
   position: relative;
 }
 
 #titlebar-buttonbox {
   -moz-appearance: -moz-window-button-box;
 }
 
 #personal-bookmarks {
@@ -275,41 +275,41 @@ toolbar[customizing] > .overflow-button 
 
 %if !defined(MOZ_WIDGET_GTK)
 #TabsToolbar > .private-browsing-indicator {
   -moz-box-ordinal-group: 1000;
 }
 %endif
 
 %ifdef XP_WIN
-#main-window[sizemode="maximized"] #titlebar-buttonbox {
+:root[sizemode="maximized"] #titlebar-buttonbox {
   -moz-appearance: -moz-window-button-box-maximized;
 }
 
-#main-window[tabletmode] #titlebar-min,
-#main-window[tabletmode] #titlebar-max {
+:root[tabletmode] #titlebar-min,
+:root[tabletmode] #titlebar-max {
   display: none !important;
 }
 
-#main-window[tabsintitlebar] #TabsToolbar,
-#main-window[tabsintitlebar] #toolbar-menubar,
-#main-window[tabsintitlebar] #navigator-toolbox > toolbar:-moz-lwtheme {
+:root[tabsintitlebar] #TabsToolbar,
+:root[tabsintitlebar] #toolbar-menubar,
+:root[tabsintitlebar] #navigator-toolbox > toolbar:-moz-lwtheme {
   -moz-window-dragging: drag;
 }
 %endif
 
 %endif
 
-#main-window[inFullscreen][inDOMFullscreen] #navigator-toolbox,
-#main-window[inFullscreen][inDOMFullscreen] #fullscr-toggler,
-#main-window[inFullscreen][inDOMFullscreen] #sidebar-box,
-#main-window[inFullscreen][inDOMFullscreen] #sidebar-splitter,
-#main-window[inFullscreen]:not([OSXLionFullscreen]) toolbar:not([fullscreentoolbar=true]),
-#main-window[inFullscreen] #global-notificationbox,
-#main-window[inFullscreen] #high-priority-global-notificationbox {
+:root[inFullscreen][inDOMFullscreen] #navigator-toolbox,
+:root[inFullscreen][inDOMFullscreen] #fullscr-toggler,
+:root[inFullscreen][inDOMFullscreen] #sidebar-box,
+:root[inFullscreen][inDOMFullscreen] #sidebar-splitter,
+:root[inFullscreen]:not([OSXLionFullscreen]) toolbar:not([fullscreentoolbar=true]),
+:root[inFullscreen] #global-notificationbox,
+:root[inFullscreen] #high-priority-global-notificationbox {
   visibility: collapse;
 }
 
 #navigator-toolbox[fullscreenShouldAnimate] {
   transition: 1.5s margin-top ease-out;
 }
 
 /* Rules to help integrate SDK widgets */
@@ -429,23 +429,23 @@ toolbar:not(#TabsToolbar) > #personal-bo
 #urlbar,
 .searchbar-textbox {
   /* Setting a width and min-width to let the location & search bars maintain
      a constant width in case they haven't be resized manually. (bug 965772) */
   width: 1px;
   min-width: 1px;
 }
 
-#main-window:-moz-lwtheme {
+:root:-moz-lwtheme {
   background-repeat: no-repeat;
   background-position: top right;
 }
 
 %ifdef XP_MACOSX
-#main-window[inFullscreen="true"] {
+:root[inFullscreen="true"] {
   padding-top: 0; /* override drawintitlebar="true" */
 }
 %endif
 
 #browser-bottombox[lwthemefooter="true"] {
   background-repeat: no-repeat;
   background-position: bottom left;
 }
@@ -596,17 +596,17 @@ toolbar:not(#TabsToolbar) > #personal-bo
 #identity-icon-country-label {
   direction: ltr;
 }
 
 #identity-box.verifiedIdentity > #identity-icon-labels > #identity-icon-label {
   margin-inline-end: 0.25em !important;
 }
 
-#main-window[customizing] :-moz-any(#urlbar, .searchbar-textbox) > .autocomplete-textbox-container > .textbox-input-box {
+:root[customizing] :-moz-any(#urlbar, .searchbar-textbox) > .autocomplete-textbox-container > .textbox-input-box {
   visibility: hidden;
 }
 
 /* ::::: Unified Back-/Forward Button ::::: */
 #back-button > .toolbarbutton-menu-dropmarker,
 #forward-button > .toolbarbutton-menu-dropmarker {
   display: none;
 }
@@ -710,17 +710,17 @@ html|*.pointerlockfswarning:not([hidden]
 }
 html|*.pointerlockfswarning[onscreen] {
   transform: translate(-50%, 50px);
 }
 html|*.pointerlockfswarning[ontop] {
   /* Use -10px to hide the border and border-radius on the top */
   transform: translate(-50%, -10px);
 }
-#main-window[OSXLionFullscreen] html|*.pointerlockfswarning[ontop] {
+:root[OSXLionFullscreen] html|*.pointerlockfswarning[ontop] {
   transform: translate(-50%, 80px);
 }
 
 html|*.pointerlockfswarning-domain-text,
 html|*.pointerlockfswarning-generic-text {
   word-wrap: break-word;
   /* We must specify a min-width, otherwise word-wrap:break-word doesn't work. Bug 630864. */
   min-width: 1px
@@ -1029,19 +1029,19 @@ toolbarpaletteitem[place="palette"] > #d
 }
 
 /* hide chat chrome when chat is fullscreen */
 #chat-window[sizemode="fullscreen"] chatbox > .chat-titlebar {
   display: none;
 }
 
 /* hide chatbar and sidebar if browser tab is fullscreen */
-#main-window[inFullscreen][inDOMFullscreen] chatbar,
-#main-window[inFullscreen][inDOMFullscreen] #social-sidebar-box,
-#main-window[inFullscreen][inDOMFullscreen] #social-sidebar-splitter {
+:root[inFullscreen][inDOMFullscreen] chatbar,
+:root[inFullscreen][inDOMFullscreen] #social-sidebar-box,
+:root[inFullscreen][inDOMFullscreen] #social-sidebar-splitter {
   display: none;
 }
 
 /* Combobox dropdown renderer */
 #ContentSelectDropdown > menupopup {
   /* The menupopup itself should always be rendered LTR to ensure the scrollbar aligns with
    * the dropdown arrow on the dropdown widget. If a menuitem is RTL, its style will be set accordingly */
   direction: ltr;
@@ -1214,17 +1214,17 @@ toolbarpaletteitem[place="palette"][hidd
 
 #customization-palette .toolbarpaletteitem-box {
   -moz-box-pack: center;
   -moz-box-flex: 1;
   width: 10em;
   max-width: 10em;
 }
 
-#main-window[customizing=true] #PanelUI-update-status {
+:root[customizing=true] #PanelUI-update-status {
   display: none;
 }
 
 /* UI Tour */
 
 @keyframes uitour-wobble {
   from {
     transform: rotate(0deg) translateX(3px) rotate(0deg);

--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -799,21 +799,21 @@ menuitem:not([type]):not(.menuitem-toolt
   list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=menu") !important;
 }
 
 /* Menu panel buttons */
 
 %include ../shared/toolbarbuttons.inc.css
 %include ../shared/menupanel.inc.css
 
-#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
-#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
-#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
-#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
-#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
+:root:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
+:root:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
+:root:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
+:root:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
+:root:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
   opacity: 0.4;
 }
 
 /* Fullscreen window controls */
 #window-controls {
   -moz-box-align: start;
   margin-inline-start: 10px;
 }
@@ -824,17 +824,17 @@ menuitem:not([type]):not(.menuitem-toolt
 #restore-button {
   list-style-image: url("chrome://global/skin/icons/Restore.gif");
 }
 #close-button {
   list-style-image: url("chrome://global/skin/icons/Close.gif");
 }
 
 /* Location bar */
-#main-window {
+:root {
   --urlbar-border-color: ThreeDShadow;
 }
 
 #navigator-toolbox:-moz-lwtheme {
   --urlbar-border-color: rgba(0,0,0,.3);
 }
 
 #urlbar,
@@ -1835,74 +1835,74 @@ notification.pluginVulnerable > .notific
 }
 
 %include ../shared/social/chat.inc.css
 
 /* Customization mode */
 
 %include ../shared/customizableui/customizeMode.inc.css
 
-#main-window[customize-entered] > #tab-view-deck {
+:root[customize-entered] > #tab-view-deck {
   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"),
                     linear-gradient(to bottom, #bcbcbc, #b5b5b5);
   background-attachment: fixed;
 }
 
-#main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
+:root[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
   background-repeat: no-repeat;
   background-position: right top;
   background-attachment: fixed;
   /* The image will get set from CustomizeMode.jsm */
   background-image: none;
   background-color: transparent;
 }
 
-#main-window[customization-lwtheme]:-moz-lwtheme {
+:root[customization-lwtheme]:-moz-lwtheme {
   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"),
                     url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),
                     linear-gradient(to bottom, #bcbcbc, #b5b5b5);
   background-color: #b5b5b5;
   background-repeat: repeat;
   background-attachment: fixed;
   background-position: left top;
 }
 
-#main-window[customize-entered] #browser-bottombox,
-#main-window[customize-entered] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar),
-#main-window[customize-entered] #customization-container {
+:root[customize-entered] #browser-bottombox,
+:root[customize-entered] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar),
+:root[customize-entered] #customization-container {
   border: 3px solid hsla(0,0%,0%,.1);
   border-top-width: 0;
   background-clip: padding-box;
   background-origin: padding-box;
   -moz-border-right-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2);
   -moz-border-bottom-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2);
   -moz-border-left-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2);
 }
 
-#main-window[customize-entered] #customization-container,
-#main-window[customize-entered] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
+:root[customize-entered] #customization-container,
+:root[customize-entered] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
   border-bottom-width: 0;
 }
 
-#main-window[customize-entered] #TabsToolbar {
+:root[customize-entered] #TabsToolbar {
   -moz-appearance: none;
   background-clip: padding-box;
   border-right: 3px solid transparent;
   border-left: 3px solid transparent;
 }
 
 /* The :hover:active style from toolkit doesn't seem to work in this panel so just use :active. */
 .customization-tipPanel-closeBox > .close-icon:active {
   background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32);
 }
 
 /* End customization mode */
 
 
-#main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
+:root[privatebrowsingmode=temporary] #private-browsing-indicator {
   background: url("chrome://browser/skin/privatebrowsing-mask.png") center no-repeat;
   width: 40px;
 }
 
 %include ../shared/UITour.inc.css
 
 #UITourHighlight {
   /* Below are some fixes for people without an X compositor on Linux.

--- a/browser/themes/linux/devedition.css
+++ b/browser/themes/linux/devedition.css
@@ -53,17 +53,17 @@
   box-shadow: none !important;
 }
 
 #forward-button > .toolbarbutton-icon {
   border-inline-start: none;
 }
 
 /* Override a box shadow for disabled back button */
-#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
+:root:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
   box-shadow: none !important;
 }
 
 #back-button:hover:not([disabled="true"]) > .toolbarbutton-icon,
 #forward-button:hover:not([disabled="true"]) > .toolbarbutton-icon {
   background: var(--chrome-nav-buttons-hover-background) !important;
 }
 

--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -70,17 +70,17 @@
   }
 }
 
 #navigator-toolbox toolbarbutton:-moz-lwtheme {
   color: inherit;
   text-shadow: inherit;
 }
 
-#main-window {
+:root {
   -moz-appearance: none;
   background-color: #eeeeee;
 }
 
 /** Begin titlebar **/
 
 #titlebar-buttonbox > .titlebar-button {
   display: none;
@@ -94,52 +94,52 @@
 }
 
 .titlebar-placeholder[type="fullscreen-button"],
 #titlebar-secondary-buttonbox {
   margin-right: 7px;
   margin-left: 7px;
 }
 
-#main-window:not(:-moz-lwtheme) > #titlebar {
+:root:not(:-moz-lwtheme) > #titlebar {
   -moz-appearance: -moz-window-titlebar;
 }
 
-#main-window:not([tabsintitlebar]) > #titlebar {
+:root:not([tabsintitlebar]) > #titlebar {
   height: 22px; /* The native titlebar on OS X is 22px tall. */
 }
 
 /**
  * For tabs in titlebar on OS X, we stretch the titlebar down so that the
  * tabstrip can overlap it.
  */
-#main-window[tabsintitlebar] > #titlebar {
+:root[tabsintitlebar] > #titlebar {
   min-height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tab-toolbar-navbar-overlap));
 }
 
 /**
  * We also vertically center the window buttons.
  */
-#main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-buttonbox-container,
-#main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button {
+:root[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-buttonbox-container,
+:root[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button {
   margin-top: @windowButtonMarginTop@;
 }
 
-#main-window:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-buttonbox-container:-moz-lwtheme,
-#main-window:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button:-moz-lwtheme {
+:root:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-buttonbox-container:-moz-lwtheme,
+:root:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button:-moz-lwtheme {
   margin-top: 3px;
 }
 
-#main-window[customize-entered] > #titlebar {
+:root[customize-entered] > #titlebar {
   -moz-appearance: none;
 }
 
 /** End titlebar **/
 
-#main-window[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
+:root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
   border-top: 1px solid rgba(0,0,0,0.65);
 }
 
 /* Because of -moz-box-align: center above, separators will be invisible unless
    we set their min-height. See bug 583510 for more information. */
 toolbarseparator {
   min-height: 22px;
 }
@@ -203,40 +203,40 @@ toolbarseparator {
 
   #nav-bar:-moz-window-inactive {
     background: linear-gradient(hsl(0,0%,97%), hsl(0,0%,95%));
   }
 }
 
 /* Draw the bottom border of the tabs toolbar when it's not using
    -moz-appearance: toolbar. */
-#main-window:-moz-any([sizemode="fullscreen"],[customize-entered]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
-#main-window:not([tabsintitlebar]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
+:root:-moz-any([sizemode="fullscreen"],[customize-entered]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
+:root:not([tabsintitlebar]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
 #TabsToolbar:not([collapsed="true"]) + #nav-bar:-moz-lwtheme {
   border-top: 1px solid hsla(0,0%,0%,.3);
   background-clip: padding-box;
   margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap));
   /* Position the toolbar above the bottom of background tabs */
   position: relative;
   z-index: 1;
 }
 
 /* Always draw a border on Yosemite to ensure the border is well-defined there
  * (the default border is too light). */
 @media (-moz-mac-yosemite-theme) {
-  #main-window[tabsintitlebar] #TabsToolbar:not([collapsed="true"]) + #nav-bar:not(:-moz-lwtheme) {
+  :root[tabsintitlebar] #TabsToolbar:not([collapsed="true"]) + #nav-bar:not(:-moz-lwtheme) {
     border-top: 1px solid hsla(0,0%,0%,.2);
     background-clip: padding-box;
     margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap));
     /* Position the toolbar above the bottom of background tabs */
     position: relative;
     z-index: 1;
   }
 
-  #main-window[tabsintitlebar] #TabsToolbar:not([collapsed="true"]) + #nav-bar:-moz-window-inactive:not(:-moz-lwtheme) {
+  :root[tabsintitlebar] #TabsToolbar:not([collapsed="true"]) + #nav-bar:-moz-window-inactive:not(:-moz-lwtheme) {
     border-top-color: hsla(0,0%,0%,.05);
   }
 }
 
 #nav-bar-customization-target {
   padding: 4px;
 }
 
@@ -1071,34 +1071,34 @@ toolbar .toolbarbutton-1 > .toolbarbutto
   }
 }
 
 toolbar .toolbarbutton-1:not([type="menu-button"]),
 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
   min-width: 28px;
 }
 
-#main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-icon,
-#main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
-#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon,
-#main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-menu-dropmarker,
-#main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-menubutton-dropmarker,
+:root:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-icon,
+:root:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
+:root:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon,
+:root:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-menu-dropmarker,
+:root:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-menubutton-dropmarker,
 .toolbarbutton-1:not(:hover):-moz-window-inactive > #downloads-indicator-anchor,
 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-icon,
 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-text,
 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-badge-stack > .toolbarbutton-icon,
 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-menu-dropmarker,
 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
   opacity: .5;
 }
 
-#main-window:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] > .toolbarbutton-icon,
-#main-window:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
-#main-window:not([customizing]) .toolbarbutton-1:-moz-window-inactive > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon {
+:root:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] > .toolbarbutton-icon,
+:root:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
+:root:not([customizing]) .toolbarbutton-1:-moz-window-inactive > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon {
   opacity: .25;
 }
 
 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   list-style-image: url(chrome://browser/skin/toolbarbutton-dropmarker.png);
 }
 
@@ -2559,18 +2559,18 @@ toolbarbutton.chevron > .toolbarbutton-m
 }
 
 #TabsToolbar {
   -moz-appearance: none;
   /* overlap the nav-bar's top border */
   margin-bottom: calc(-1 * var(--tab-toolbar-navbar-overlap));
 }
 
-#main-window:not([customizing]) #navigator-toolbox[inFullscreen] > #TabsToolbar:not(:-moz-lwtheme),
-#main-window:not(:-moz-any([customizing],[tabsintitlebar])) #navigator-toolbox > #TabsToolbar:not(:-moz-lwtheme) {
+:root:not([customizing]) #navigator-toolbox[inFullscreen] > #TabsToolbar:not(:-moz-lwtheme),
+:root:not(:-moz-any([customizing],[tabsintitlebar])) #navigator-toolbox > #TabsToolbar:not(:-moz-lwtheme) {
   -moz-appearance: toolbar;
 }
 
 #TabsToolbar:not(:-moz-lwtheme) {
   color: var(--tabs-toolbar-color);
   text-shadow: @loweredShadow@;
 }
 
@@ -3274,77 +3274,77 @@ menulist.translate-infobar-element > .me
 /* === end of social toolbar provider menu === */
 
 %include ../shared/social/chat.inc.css
 
 /* Customization mode */
 
 %include ../shared/customizableui/customizeMode.inc.css
 
-#main-window[customizing] {
+:root[customizing] {
   background-color: rgb(178,178,178);
 }
 
-#main-window[tabsintitlebar][customize-entered] > #titlebar,
-#main-window[privatebrowsingmode=temporary]:not([tabsintitlebar])[customize-entered] > #titlebar,
-#main-window[customize-entered] > #tab-view-deck {
+:root[tabsintitlebar][customize-entered] > #titlebar,
+:root[privatebrowsingmode=temporary]:not([tabsintitlebar])[customize-entered] > #titlebar,
+:root[customize-entered] > #tab-view-deck {
   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"),
                     url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),
                     linear-gradient(to bottom, rgb(233,233,233), rgb(178,178,178) 40px);
   background-attachment: fixed;
 }
 
-#main-window[tabsintitlebar][customization-lwtheme] > #titlebar:-moz-lwtheme,
-#main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
+:root[tabsintitlebar][customization-lwtheme] > #titlebar:-moz-lwtheme,
+:root[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
   background-repeat: no-repeat;
   background-position: right top;
   background-attachment: fixed;
   /* The image will get set from CustomizeMode.jsm */
   background-image: none;
   background-color: transparent;
 }
 
-#main-window[customization-lwtheme]:-moz-lwtheme {
+:root[customization-lwtheme]:-moz-lwtheme {
   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"),
                     url("chrome://browser/skin/customizableui/background-noise-toolbar.png");
   background-color: rgb(178,178,178);
   background-repeat: repeat;
   background-attachment: fixed;
   background-position: left top;
 }
 
-#main-window[customize-entered] #browser-bottombox,
-#main-window[customize-entered] #navigator-toolbox > toolbar:not(#TabsToolbar),
-#main-window[customize-entered] #customization-container {
+:root[customize-entered] #browser-bottombox,
+:root[customize-entered] #navigator-toolbox > toolbar:not(#TabsToolbar),
+:root[customize-entered] #customization-container {
   border: 3px solid hsla(0,0%,0%,.1);
   border-top-width: 0;
   background-clip: padding-box;
   background-origin: padding-box;
   -moz-border-right-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2);
   -moz-border-bottom-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2);
   -moz-border-left-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2);
 }
 
-#main-window[customize-entered] #customization-container,
-#main-window[customize-entered] #navigator-toolbox > toolbar:not(#TabsToolbar) {
+:root[customize-entered] #customization-container,
+:root[customize-entered] #navigator-toolbox > toolbar:not(#TabsToolbar) {
   border-bottom-width: 0;
 }
 
-#main-window[customize-entered] #nav-bar {
+:root[customize-entered] #nav-bar {
   border-top-left-radius: 2.5px;
   border-top-right-radius: 2.5px;
 }
 
 /* Compensate for the border set above for this horizontal line. */
-#main-window[customize-entered] #navigator-toolbox::after {
+:root[customize-entered] #navigator-toolbox::after {
   margin-left: 3px;
   margin-right: 3px;
 }
 
-#main-window[customize-entered] #TabsToolbar {
+:root[customize-entered] #TabsToolbar {
   background-clip: padding-box;
   border-right: 3px solid transparent;
   border-left: 3px solid transparent;
 }
 
 @media (min-resolution: 2dppx) {
   .customization-tipPanel-infoBox {
     background-image: url(chrome://browser/skin/customizableui/info-icon-customizeTip@2x.png);
@@ -3385,50 +3385,50 @@ menulist.translate-infobar-element > .me
   margin-left: 4px;
   margin-right: 4px;
 }
 
 #titlebar-secondary-buttonbox > .private-browsing-indicator {
   position: relative;
 }
 
-#main-window[privatebrowsingmode=temporary]:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator {
+:root[privatebrowsingmode=temporary]:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator {
   background-image: url("chrome://browser/skin/privatebrowsing-mask-short.png");
   height: 20px;
 }
 
-#main-window:not([privatebrowsingmode=temporary]) .private-browsing-indicator,
-#main-window[privatebrowsingmode=temporary][inFullscreen] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator,
-#main-window[privatebrowsingmode=temporary]:not([inFullscreen]) > #tab-view-deck > #browser-panel > #navigator-toolbox > #TabsToolbar > .private-browsing-indicator {
+:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator,
+:root[privatebrowsingmode=temporary][inFullscreen] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator,
+:root[privatebrowsingmode=temporary]:not([inFullscreen]) > #tab-view-deck > #browser-panel > #navigator-toolbox > #TabsToolbar > .private-browsing-indicator {
   display: none;
 }
 
 @media (min-resolution: 2dppx) {
   .private-browsing-indicator {
     background-image: url("chrome://browser/skin/privatebrowsing-mask@2x.png");
   }
-  #main-window[privatebrowsingmode=temporary]:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator {
+  :root[privatebrowsingmode=temporary]:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator {
     background-image: url("chrome://browser/skin/privatebrowsing-mask-short@2x.png");
   }
 }
 
 #TabsToolbar > .private-browsing-indicator {
   transform: translateY(calc(-1 * var(--space-above-tabbar)));
   /* We offset by 38px for mask graphic, plus 4px to account for the
    * margin-left, which sums to 42px.
    */
   margin-right: -42px;
 }
 
-#main-window[privatebrowsingmode=temporary] .titlebar-placeholder[type="fullscreen-button"],
-#main-window[privatebrowsingmode=temporary] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button {
+:root[privatebrowsingmode=temporary] .titlebar-placeholder[type="fullscreen-button"],
+:root[privatebrowsingmode=temporary] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button {
   margin-left: 0px;
 }
 
-#main-window[privatebrowsingmode=temporary][inFullscreen] .titlebar-placeholder[type="fullscreen-button"] {
+:root[privatebrowsingmode=temporary][inFullscreen] .titlebar-placeholder[type="fullscreen-button"] {
   /* Override display:none for .titlebar-placeholder in fullscreen so we can have consistent
      position and padding for the private browsing indicator. */
   display: -moz-box;
 }
 
 #TabsToolbar > .private-browsing-indicator:-moz-locale-dir(rtl) {
   -moz-box-ordinal-group: 0;
 }

--- a/browser/themes/osx/devedition.css
+++ b/browser/themes/osx/devedition.css
@@ -10,40 +10,40 @@
 
 /* Use only 1px separator between nav toolbox and page content */
 #navigator-toolbox::after {
   background: linear-gradient(to top, var(--chrome-navigator-toolbox-separator-color), var(--chrome-navigator-toolbox-separator-color) 1px, transparent 1px);
 }
 
 /* Include extra space on left/right for dragging since there is no space above
    the tabs */
-#main-window[tabsintitlebar] #TabsToolbar {
+:root[tabsintitlebar] #TabsToolbar {
   padding-left: 50px;
   padding-right: 50px;
   margin-bottom: 0; /* Don't overlap the inner highlight at the top of the nav-bar */
 }
 
 /* Get rid of 1px bright strip at the top of window */
-#main-window[tabsintitlebar] #titlebar-content {
+:root[tabsintitlebar] #titlebar-content {
   background: var(--chrome-background-color);
 }
 
 /* Resize things so that the native titlebar is in line with the tabs */
-#main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-buttonbox-container,
-#main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button {
+:root[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-buttonbox-container,
+:root[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button {
   margin-top: 6px;
 }
 
 /* In private windows, the #titlebar-content is higher because of the
  * private browsing indicator. With the margin-top the titlebar buttons
  * align to the top correctly in that case, but only if we don't stretch
  * the box they're in because the container is too high, so we override
  * the default alignment value (stretch).
  */
-#main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-buttonbox-container {
+:root[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-buttonbox-container {
   -moz-box-align: start;
 }
 
 /* Square back and forward buttons.  Need !important on these because there
    are a lot of more specific selectors sprinkled around elsewhere for changing
    background / shadows for different states */
 #back-button,
 #forward-button {

--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -328,18 +328,18 @@ description#identity-popup-content-verif
 #tracking-action-block,
 #tracking-action-unblock,
 #tracking-action-unblock-private {
   margin: 1em 0 0;
 }
 
 #tracking-protection-content[state] > #tracking-not-detected,
 #tracking-protection-content:not([state="blocked-tracking-content"]) > #tracking-blocked,
-#main-window[privatebrowsingmode] #tracking-action-unblock,
-#main-window:not([privatebrowsingmode]) #tracking-action-unblock-private,
+:root[privatebrowsingmode] #tracking-action-unblock,
+:root:not([privatebrowsingmode]) #tracking-action-unblock-private,
 #tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock,
 #tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock-private,
 #tracking-protection-content:not([state="loaded-tracking-content"]) > #tracking-loaded,
 #tracking-protection-content:not([state="loaded-tracking-content"]) #tracking-action-block,
 #tracking-protection-content:not([state]) > #tracking-actions {
   display: none;
 }
 

--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -3,69 +3,69 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Customization mode */
 
 :root {
   --drag-drop-transition-duration: .3s;
 }
 
-#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
+:root:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
   margin-bottom: 2em;
 }
 
-#main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
-#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
-#main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
+:root:-moz-any([customize-entering],[customize-entered]) #content-deck,
+:root:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
+:root:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
   margin-left: 2em;
   margin-right: 2em;
 }
 
-#main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
+:root:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
   pointer-events: none;
 }
 
-#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
+:root[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
 #PanelUI-contents > .panel-customization-placeholder {
   -moz-outline-radius: 2.5px;
   outline: 1px dashed transparent;
 }
 
-#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
+:root[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
   /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
   -moz-box-ordinal-group: 0;
   content: "";
   display: -moz-box;
   height: 100%;
   left: 0;
   outline-offset: -2px;
   pointer-events: none;
   position: absolute;
   top: 0;
   width: 100%;
 }
 
 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
    #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
    offset from the bottom effectively the same as other targets (-2px). */
-#main-window[customize-entered] #TabsToolbar.customization-target::before {
+:root[customize-entered] #TabsToolbar.customization-target::before {
   top: -2px;
 }
 
 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
-#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
-#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
-#main-window[customize-entered] #nav-bar-customization-target.customization-target {
+:root[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
+:root[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
+:root[customize-entered] #nav-bar-customization-target.customization-target {
   position: relative;
 }
 
 /* Most target outlines are shown on hover and drag over but the panel menu uses
    placeholders instead. */
-#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
-#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
+:root[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
+:root[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
 /* nav-bar and panel outlines are always shown */
 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
   outline-color: rgb(102,102,102);
 }
 
 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
   transition: outline-color 250ms linear;
 }
@@ -75,17 +75,17 @@
   outline-color: #bbb;
 }
 
 #PanelUI-contents > .panel-customization-placeholder {
   cursor: auto;
   outline-offset: -5px;
 }
 
-#main-window[customizing] .customization-target:not(#PanelUI-contents) {
+:root[customizing] .customization-target:not(#PanelUI-contents) {
   min-width: 100px;
   padding-left: 10px;
   padding-right: 10px;
 }
 
 #customization-container {
   background-color: rgb(247,247,247);
   color: black;
@@ -107,17 +107,17 @@
   border-bottom: 1px solid #e5e5e5;
 }
 
 #customization-panel-container {
   padding: 15px 25px 25px;
   background-image: linear-gradient(to bottom, #3e86ce, #3878ba);
 }
 
-#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
+:root:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
 #customization-footer {
   background-color: rgb(236,236,236);
 }
 
 #customization-footer {
   border-top: 1px solid rgb(221,221,221);
   padding: 10px;
 }
@@ -189,17 +189,17 @@
     -moz-image-region: rect(0, 48px, 48px, 0);
   }
 
   #customization-titlebar-visibility-button[checked] {
     -moz-image-region: rect(0, 96px, 48px, 48px);
   }
 }
 
-#main-window[customize-entered] #customization-panel-container {
+:root[customize-entered] #customization-panel-container {
   background-image: url("chrome://browser/skin/customizableui/customizeMode-separatorHorizontal.png"),
                     url("chrome://browser/skin/customizableui/customizeMode-separatorVertical.png"),
                     url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"),
                     url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),
                     linear-gradient(to bottom, #3e86ce, #3878ba);
   background-position: center top, left center, left top, left top, left top;
   background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
   background-size: auto 12px, 12px 100%, auto, auto, auto;

--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -400,17 +400,17 @@ toolbarpaletteitem:-moz-any([place="pale
   background-color: hsla(210,4%,10%,.1) !important;
   border-radius: 0 0 0 2px;
 }
 
 .panelUI-grid .toolbarbutton-1:not([buttonover])@buttonStateHover@ > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
   border-radius: 0 0 2px 0;
 }
 
-#main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
+:root:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
   opacity: .5;
 }
 
 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
   width: calc(@menuPanelButtonWidth@);
   margin: 0 !important;
 }
 
@@ -525,17 +525,17 @@ toolbarpaletteitem[place="palette"] > to
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
   background-color: hsla(210,4%,10%,.07);
   padding: 0;
   margin: 0;
 }
 
-#main-window[customizing] #PanelUI-footer-fxa {
+:root[customizing] #PanelUI-footer-fxa {
   display: none;
 }
 
 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
 #PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
   display: none;
 }
@@ -1327,17 +1327,17 @@ toolbarpaletteitem[haswideitem][place="p
 #edit-controls@inAnyPanel@ > #copy-button,
 #zoom-controls@inAnyPanel@ > #zoom-reset-button {
   /* reduce the width with 2px for this button to compensate for two separators
      of 1px. */
   min-width: calc(@menuPanelButtonWidth@ - 2px);
   max-width: calc(@menuPanelButtonWidth@ - 2px);
 }
 
-#main-window:not([customizing]) .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton[disabled] > .toolbarbutton-icon {
+:root:not([customizing]) .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton[disabled] > .toolbarbutton-icon {
   opacity: .25;
 }
 
 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
 %ifdef XP_MACOSX
   min-width: 6ch;
 %else
   min-width: 7ch;

--- a/browser/themes/shared/devedition.inc.css
+++ b/browser/themes/shared/devedition.inc.css
@@ -92,17 +92,17 @@
   --toolbarbutton-active-background: #d7d7d8 border-box;
   --toolbarbutton-active-boxshadow: none;
   --toolbarbutton-active-bordercolor: rgba(0,0,0,0.15);
   --toolbarbutton-checkedhover-backgroundcolor: #d7d7d8;
 }
 
 /* Give some space to drag the window around while customizing
    (normal space to left and right of tabs doesn't work in this case) */
-#main-window[tabsintitlebar][customizing] {
+:root[tabsintitlebar][customizing] {
   --space-above-tabbar: 9px;
 }
 
 /* Override @tabCurveHalfWidth@ and @tabCurveWidth@.  XXX: Switch to a CSS variable once the perf is sorted out - bug 1088771 */
 .tab-background-middle {
   border-left-width: 0;
   border-right-width: 0;
   margin: 0;

--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -91,25 +91,25 @@
 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
    toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
    of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
 #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar:not([inFullscreen]),
 #toolbar-menubar[autohide=true]:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) {
   margin-top: 3px;
 }
 
-#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
-#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
+:root[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
+:root[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
   margin-top: var(--space-above-tabbar);
 }
 
-#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
-#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
-#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
-#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
+:root[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
+:root[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
+:root[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
+:root[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
   outline-color: CaptionText;
 }
 
 #navigator-toolbox {
   -moz-appearance: none;
   background-color: transparent;
   border-top: none;
 }
@@ -180,37 +180,37 @@
   transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
 }
 
 @media not all and (-moz-windows-compositor),
        not all and (-moz-windows-default-theme) {
   /* Please keep the menu text colors in this media block in sync with
    * devedition.css, minus the :not(:-moz-lwtheme) condition - see Bug 1165718.
    */
-  #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
-  #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
+  :root[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
+  :root[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
     color: CaptionText;
   }
 
-  #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
-  #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
+  :root[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
+  :root[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
     color: InactiveCaptionText;
   }
 
-  #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
+  :root[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
     color: inherit;
   }
 }
 
 @media not all and (-moz-windows-compositor) {
-  #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
+  :root[tabsintitlebar] #titlebar:-moz-lwtheme {
     visibility: hidden;
   }
 
-  #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
+  :root[tabsintitlebar] #titlebar-content:-moz-lwtheme {
     -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
     visibility: visible;
   }
 }
 
 /**
  * In the classic themes, the titlebar has a horizontal gradient, which is
  * problematic for reading the text of background tabs when they're in the
@@ -218,26 +218,26 @@
  * the tabs. Unfortunately, this requires a bunch of positioning in order to get
  * text and icons to not appear fuzzy.
  */
 @media (-moz-windows-classic) {
   /**
    * We need to bump up the z-index of the tabbrowser-tabs so that they appear
    * over top of the fog we're applying for classic themes, as well as the nav-bar.
    */
-  #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #tabbrowser-tabs {
+  :root[tabsintitlebar]:not([sizemode=fullscreen]) #tabbrowser-tabs {
     position: relative;
     z-index: 2;
   }
 
-  #main-window[tabsintitlebar] #TabsToolbar:not(:-moz-lwtheme) {
+  :root[tabsintitlebar] #TabsToolbar:not(:-moz-lwtheme) {
     position: relative;
   }
 
-  #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme)::after {
+  :root[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme)::after {
     /* Because we use placeholders for window controls etc. in the tabstrip,
      * and position those with ordinal attributes, and because our layout code
      * expects :before/:after nodes to come first/last in the frame list,
      * we have to reorder this element to come last, hence the
      * ordinal group value (see bug 853415). */
     -moz-box-ordinal-group: 1001;
     box-shadow: 0 0 50px 8px ActiveCaption;
     content: "";
@@ -245,120 +245,120 @@
     height: 0;
     margin: 0 50px;
     position: absolute;
     pointer-events: none;
     top: 100%;
     width: -moz-available;
   }
 
-  #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive::after {
+  :root[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive::after {
     box-shadow: 0 0 50px 8px InactiveCaption;
   }
 
-  #main-window[tabsintitlebar]:not([sizemode=fullscreen]) toolbar[customindex]:not(:-moz-lwtheme),
-  #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #PersonalToolbar:not(:-moz-lwtheme) {
+  :root[tabsintitlebar]:not([sizemode=fullscreen]) toolbar[customindex]:not(:-moz-lwtheme),
+  :root[tabsintitlebar]:not([sizemode=fullscreen]) #PersonalToolbar:not(:-moz-lwtheme) {
     position: relative;
   }
 
   /* Need to constrain the box shadow fade to avoid overlapping layers, see bug 886281. */
-  #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #navigator-toolbox:not(:-moz-lwtheme) {
+  :root[tabsintitlebar]:not([sizemode=fullscreen]) #navigator-toolbox:not(:-moz-lwtheme) {
     overflow: -moz-hidden-unscrollable;
   }
 
   /**
    * When the tabstrip is overflowed, pinned tab separators get position: absolute,
    * which makes the pinned tab separators leak over the nav-bar highlight. Forcing
    * the element to snap to the bottom of the client rect works around the issue.
    */
-  #main-window[tabsintitlebar] #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
+  :root[tabsintitlebar] #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
     bottom: 0px;
   }
 
-  #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar .toolbarbutton-1 {
+  :root[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar .toolbarbutton-1 {
     position: relative;
     z-index: 1;
   }
 
   /**
    * With the tabbrowser-tabs element z-index'd above the nav-bar, we now get the
    * scrollbox button borders leaking over the nav-bar highlight. This transparent bottom
    * border forces the scrollbox button borders to terminate a pixel early, working
    * around the issue.
    */
-  #main-window[tabsintitlebar]:not([sizemode=fullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up,
-  #main-window[tabsintitlebar]:not([sizemode=fullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down {
+  :root[tabsintitlebar]:not([sizemode=fullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up,
+  :root[tabsintitlebar]:not([sizemode=fullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down {
     border-bottom: 1px solid transparent;
   }
 
-  #main-window[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme {
+  :root[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme {
     /* Render a window top border: */
     background-image: linear-gradient(to bottom,
           ThreeDLightShadow 0, ThreeDLightShadow 1px,
           ThreeDHighlight 1px, ThreeDHighlight 2px,
           ActiveBorder 2px, ActiveBorder 4px, transparent 4px);
   }
 
   /* End classic titlebar gradient */
 
-  #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) toolbarbutton:not(:-moz-lwtheme) {
+  :root[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) toolbarbutton:not(:-moz-lwtheme) {
     color: inherit;
   }
 }
 
 /* Render a window top border for lwthemes on WinXP modern themes: */
 @media (-moz-windows-theme: luna-blue) {
-  #main-window[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme {
+  :root[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme {
     background-image: linear-gradient(to bottom,
         rgb(8, 49, 216) 0, rgb(8, 49, 216) 1px,
         rgb(15, 77, 227) 1px, rgb(15, 77, 227) 2px,
         rgb(22, 106, 238) 2px, rgb(22, 106, 238) 3px,
         rgb(8, 85, 221) 3px, rgb(8, 85, 221) 4px,
         transparent 4px);
   }
 
-  #main-window[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme:-moz-window-inactive {
+  :root[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme:-moz-window-inactive {
     background-image: linear-gradient(to bottom,
         rgb(91, 104, 205) 0, rgb(91, 104, 205) 1px,
         rgb(116, 128, 220) 1px, rgb(116, 128, 220) 2px,
         rgb(117, 140, 221) 2px, rgb(117, 140, 221) 4px,
         transparent 4px);
   }
 }
 
 @media (-moz-windows-theme: luna-silver) {
-  #main-window[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme {
+  :root[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme {
     background-image: linear-gradient(to bottom,
         rgb(102,102,126) 0, rgb(102,102,126) 1px,
         rgb(168,167,191) 1px, rgb(168,167,191) 2px,
         white 2px, white 3px,
         rgb(188,188,207) 3px, rgb(188,188,207) 4px,
         transparent 4px);
   }
 
-  #main-window[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme:-moz-window-inactive {
+  :root[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme:-moz-window-inactive {
     background-image: linear-gradient(to bottom,
         rgb(186,186,197) 0, rgb(186,186,197) 1px,
         rgb(236,238,245) 1px, rgb(236,238,245) 2px,
         white 2px, white 3px,
         rgb(215,215,227) 3px, rgb(215,215,227) 4px,
         transparent 4px);
   }
 }
 
 @media (-moz-windows-theme: luna-olive) {
-  #main-window[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme {
+  :root[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme {
     background-image: linear-gradient(to bottom,
         rgb(139,161,105) 0, rgb(139,161,105) 1px,
         rgb(171, 189, 133) 1px, rgb(171, 189, 133) 2px,
         rgb(164,178,127) 2px, rgb(164,178,127) 3px,
         transparent 3px);
   }
 
-  #main-window[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme:-moz-window-inactive {
+  :root[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme:-moz-window-inactive {
     background-image: linear-gradient(to bottom,
         rgb(207, 214, 188) 0, rgb(207, 214, 188) 1px,
         rgb(224, 226, 200) 1px, rgb(224, 226, 200) 2px,
         rgb(214, 216, 190) 2px, rgb(214, 216, 190) 3px,
         transparent 3px);
   }
 }
 
@@ -388,33 +388,33 @@
   -moz-appearance: toolbox;
 }
 
 #browser-bottombox:not(:-moz-lwtheme) {
   background-color: -moz-dialog;
 }
 
 @media (-moz-os-version: windows-xp) and (-moz-windows-default-theme) {
-  #main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar {
+  :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar {
     margin-top: 4px;
   }
 }
 
 /* ::::: titlebar ::::: */
 
-#main-window[sizemode="normal"] > #titlebar {
+:root[sizemode="normal"] > #titlebar {
   -moz-appearance: -moz-window-titlebar;
 }
 
-#main-window[sizemode="maximized"] > #titlebar {
+:root[sizemode="maximized"] > #titlebar {
   -moz-appearance: -moz-window-titlebar-maximized;
 }
 
 @media (-moz-windows-classic) {
-  #main-window[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel > #navigator-toolbox > #toolbar-menubar {
+  :root[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel > #navigator-toolbox > #toolbar-menubar {
     margin-top: 4px;
   }
 }
 
 /* The button box must appear on top of the navigator-toolbox in order for
  * click and hover mouse events to work properly for the button in the restored
  * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
  * can swallow those events. It will also place the buttons above the fog on
@@ -439,17 +439,17 @@
 #titlebar-min {
   -moz-appearance: -moz-window-button-minimize;
 }
 
 #titlebar-max {
   -moz-appearance: -moz-window-button-maximize;
 }
 
-#main-window[sizemode="maximized"] #titlebar-max {
+:root[sizemode="maximized"] #titlebar-max {
   -moz-appearance: -moz-window-button-restore;
 }
 
 #titlebar-close {
   -moz-appearance: -moz-window-button-close;
 }
 
 @media not all and (-moz-windows-classic) {
@@ -654,21 +654,21 @@ menuitem.bookmark-item {
 
 @media (-moz-windows-theme: luna-silver) and (max-resolution: 1dppx) {
   :-moz-any(@primaryToolbarButtons@),
   #bookmarks-menu-button.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
     list-style-image: url("chrome://browser/skin/Toolbar-lunaSilver.png");
   }
 }
 
-#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
-#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
-#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
-#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
-#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
+:root:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
+:root:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
+:root:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
+:root:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
+:root:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
   opacity: .4;
 }
 
 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png");
 }
 
@@ -1165,37 +1165,37 @@ toolbar[brighttext] #close-button {
   #restore-button:-moz-locale-dir(rtl),
   #close-button:-moz-locale-dir(rtl) {
     transform: scaleX(-1);
   }
 }
 
 /* ::::: Location Bar ::::: */
 
-#main-window {
+:root {
   --urlbar-border-color: ThreeDShadow;
   --urlbar-border-color-hover: var(--urlbar-border-color);
 }
 
 #navigator-toolbox:-moz-lwtheme {
   --urlbar-border-color: var(--toolbarbutton-hover-bordercolor);
 }
 
 @media (-moz-windows-default-theme) {
   @media (-moz-os-version: windows-vista),
          (-moz-os-version: windows-win7),
          (-moz-os-version: windows-win8) {
-    #main-window:not(:-moz-lwtheme) {
+    :root:not(:-moz-lwtheme) {
       --urlbar-border-color: hsla(210,54%,20%,.25) hsla(210,54%,20%,.27) hsla(210,54%,20%,.3);
       --urlbar-border-color-hover: hsla(210,54%,20%,.35) hsla(210,54%,20%,.37) hsla(210,54%,20%,.4);
     }
   }
 
   @media (-moz-os-version: windows-win10) {
-    #main-window:not(:-moz-lwtheme) {
+    :root:not(:-moz-lwtheme) {
       --urlbar-border-color: hsl(0,0%,90%);
       --urlbar-border-color-hover: hsl(0,0%,80%);
     }
   }
 }
 
 #urlbar,
 .searchbar-textbox {
@@ -1978,17 +1978,17 @@ html|span.ac-emphasize-text-url {
 
 #TabsToolbar {
   min-height: 0;
   padding: 0;
   margin-bottom: calc(-1 * var(--tab-toolbar-navbar-overlap)); /* overlap the nav-bar's top border */
 }
 
 @media (-moz-os-version: windows-xp) and (-moz-windows-default-theme) {
-  #main-window[sizemode=normal] #TabsToolbar {
+  :root[sizemode=normal] #TabsToolbar {
     padding-left: 2px;
     padding-right: 2px;
   }
 }
 
 %include ../shared/tabs.inc.css
 
 /* Remove border between tab strip and navigation toolbar on Windows 10+ */
@@ -2516,49 +2516,49 @@ notification.pluginVulnerable > .notific
 %include ../shared/customizableui/customizeMode.inc.css
 
 /**
  * This next rule is a hack to disable subpixel anti-aliasing on all
  * labels during the customize mode transition. Subpixel anti-aliasing
  * on Windows with Direct2D layers acceleration is particularly slow to
  * paint, so this hack is how we sidestep that performance bottleneck.
  */
-#main-window:-moz-any([customize-entering],[customize-exiting]) label {
+:root:-moz-any([customize-entering],[customize-exiting]) label {
   transform: perspective(0.01px);
 }
 
-#main-window[customize-entered] > #tab-view-deck {
+:root[customize-entered] > #tab-view-deck {
   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
   background-attachment: fixed;
 }
 
-#main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
+:root[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
   background-repeat: no-repeat;
   background-position: right top;
   background-attachment: fixed;
   /* The image will get set from CustomizeMode.jsm */
   background-image: none;
   background-color: transparent;
 }
 
-#main-window[customization-lwtheme]:-moz-lwtheme {
+:root[customization-lwtheme]:-moz-lwtheme {
   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
   background-repeat: repeat;
   background-attachment: fixed;
   background-position: left top;
 }
 
-#main-window[customize-entered] #browser-bottombox,
-#main-window[customize-entered] #customization-container {
+:root[customize-entered] #browser-bottombox,
+:root[customize-entered] #customization-container {
   border-left: 1px solid @toolbarShadowColor@;
   border-right: 1px solid @toolbarShadowColor@;
   background-clip: padding-box;
 }
 
-#main-window[customize-entered] #browser-bottombox {
+:root[customize-entered] #browser-bottombox {
   border-bottom: 1px solid @toolbarShadowColor@;
 }
 
 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
   margin-right: -2px;
 }
 
 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
@@ -2582,88 +2582,88 @@ notification.pluginVulnerable > .notific
   pointer-events: none;
 }
 
 #private-browsing-indicator-titlebar {
   display: block;
   position: absolute;
 }
 
-#main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
+:root[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
   display: block;
 }
 
-#main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
+:root[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
   display: -moz-box;
 }
 
 #TabsToolbar > .private-browsing-indicator {
   background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
   margin-inline-start: 4px;
   width: 48px;
 }
 
 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
  * mode, since the tabstrip "mimics" the titlebar in that case with its own
  * min/max/close window buttons.
  */
 #private-browsing-indicator-titlebar > .private-browsing-indicator,
-#main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
+:root[inFullscreen] #TabsToolbar > .private-browsing-indicator {
   background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
   margin-inline-end: 4px;
   width: 40px;
   height: 20px;
   position: relative;
 }
 
 @media (-moz-os-version: windows-xp) {
   @media not all and (-moz-windows-classic) {
     #private-browsing-indicator-titlebar > .private-browsing-indicator {
       background-image: url("chrome://browser/skin/privatebrowsing-mask-titlebar-XPVista7-tall.png");
       height: 28px;
     }
 
-    #main-window[sizemode="maximized"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
+    :root[sizemode="maximized"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
       top: -5px;
     }
-    #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
+    :root[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
       top: -1px;
     }
   }
 }
 
 @media (-moz-windows-classic) {
   /**
    * We have to use top instead of background-position in this case, otherwise
    * the bottom of the indicator would get cut off by the bounds of the
    * private-browsing-indicator element.
    */
-  #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
+  :root[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
     top: 4px;
   }
 }
 
 @media (-moz-os-version: windows-vista),
        (-moz-os-version: windows-win7) {
   @media (-moz-windows-glass) {
-    #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
+    :root[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
       top: 1px;
     }
-    #main-window[sizemode="maximized"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
+    :root[sizemode="maximized"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
       top: -1px;
     }
   }
 
   /**
    * This next block targets Aero Basic, which has different positioning for the
    * window caption buttons, and therefore needs to be special-cased.
    */
   @media (-moz-windows-default-theme) {
     @media not all and (-moz-windows-compositor) {
-      #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
+      :root[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
         background-image: url("chrome://browser/skin/privatebrowsing-mask-titlebar-XPVista7-tall.png");
         height: 28px;
       }
     }
   }
 }
 
 /* End private browsing indicators */

--- a/browser/themes/windows/devedition.css
+++ b/browser/themes/windows/devedition.css
@@ -15,27 +15,27 @@
 }
 
 /* The window background is white due to no accentcolor in the lightweight
    theme. It can't be changed to transparent when there is no compositor
    (Win XP or 7 in classic / basic theme), or else dragging and focus become
    broken. So instead just show the normal titlebar in that case, and override
    the window color as transparent when the compositor is available. */
 @media not all and (-moz-windows-compositor) {
-  #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
+  :root[tabsintitlebar] #titlebar:-moz-lwtheme {
     visibility: visible;
   }
 
-  #main-window {
+  :root {
     background: var(--chrome-background-color) !important;
   }
 }
 
 @media (-moz-windows-compositor) {
-  #main-window {
+  :root {
     background: transparent !important;
   }
 }
 
 #TabsToolbar::after {
   display: none;
 }
 
@@ -65,23 +65,23 @@
   box-shadow: none !important;
 }
 
 #forward-button > .toolbarbutton-icon {
   border-inline-start: none !important;
 }
 
 /* Override a box shadow for disabled back button */
-#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
+:root:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
   box-shadow: none !important;
 }
 
 /* Override !important properties for hovered back button */
-#main-window #back-button:hover:not([disabled="true"]) > .toolbarbutton-icon,
-#main-window #forward-button:hover:not([disabled="true"]) > .toolbarbutton-icon {
+:root #back-button:hover:not([disabled="true"]) > .toolbarbutton-icon,
+:root #forward-button:hover:not([disabled="true"]) > .toolbarbutton-icon {
   background: var(--chrome-nav-buttons-hover-background) !important;
   box-shadow: none !important;
 }
 
 #back-button > .toolbarbutton-icon {
   border-radius: 2px 0 0 2px !important;
 }
 
@@ -125,45 +125,45 @@
   }
 
   /* It'd be nice if there was an element in the scrollbox's inner content
      that collapsed to the current width of the tabs. Since there isn't we
      need to handle overflowing and non-overflowing tabs separately.
 
      In the case of overflowing tabs, set a border-top on the entire container,
      otherwise we need to set it on each element individually */
-  #main-window[sizemode=normal] .tabbrowser-tabs[overflow="true"] {
+  :root[sizemode=normal] .tabbrowser-tabs[overflow="true"] {
     background-clip: padding-box;
     border-top: 1px solid var(--chrome-nav-bar-separator-color);
     border-inline-end: 1px solid var(--chrome-nav-bar-separator-color);
     background-color: var(--tab-background-color); /* Make sure there is no transparent gap during tab close animation */
   }
 
   /* Add a border to the left of the first tab (or scroll arrow).  Using .tabbrowser-tabs
      instead of #TabsToolbar because it will work even in customize mode. */
-  #main-window[sizemode=normal] .tabbrowser-tabs {
+  :root[sizemode=normal] .tabbrowser-tabs {
     background-clip: padding-box;
     border-inline-start: 1px solid var(--chrome-nav-bar-separator-color);
     border-inline-end: 1px solid transparent;
   }
 
-  #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab,
-  #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-arrowscrollbox > .scrollbutton-down,
-  #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-arrowscrollbox > .scrollbutton-up,
-  #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabs-newtab-button {
+  :root[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab,
+  :root[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-arrowscrollbox > .scrollbutton-down,
+  :root[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-arrowscrollbox > .scrollbutton-up,
+  :root[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabs-newtab-button {
     background-clip: padding-box;
     border-top: 1px solid var(--chrome-nav-bar-separator-color);
   }
 
   /* Allow the border-top rule to take effect */
-  #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab {
+  :root[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab {
     -moz-border-top-colors: none;
   }
 
-  #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .closing-tabs-spacer {
+  :root[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .closing-tabs-spacer {
     background-clip: padding-box;
     border-inline-start: 1px solid var(--chrome-nav-bar-separator-color);
   }
 
   .tabs-newtab-button {
     background: var(--tab-background-color);
   }
 
@@ -171,44 +171,44 @@
   #tabbrowser-tabs,
   #TabsToolbar,
   #browser-panel,
   #titlebar-content {
     background: transparent;
   }
 
   /* Ensure that the entire background is styled when maximized/fullscreen */
-  #main-window:not([sizemode="normal"]):not([customizing]) #browser-panel {
+  :root:not([sizemode="normal"]):not([customizing]) #browser-panel {
     background: var(--chrome-background-color) !important;
   }
 
   /* The menu items need to be visible when the entire background is styled */
-  #main-window:not([sizemode="normal"]) #main-menubar {
+  :root:not([sizemode="normal"]) #main-menubar {
     color: var(--chrome-color);
     background-color: transparent;
   }
 
-  #main-window[sizemode="maximized"] #main-menubar > menu:not(:-moz-window-inactive) {
+  :root[sizemode="maximized"] #main-menubar > menu:not(:-moz-window-inactive) {
     color: inherit;
   }
 
   /* Use proper menu text styling in Win7 classic mode (copied from browser.css) */
   @media not all and (-moz-windows-compositor),
          not all and (-moz-windows-default-theme) {
-    #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar,
-    #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar {
+    :root[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar,
+    :root[tabsintitlebar]:not([inFullscreen]) #TabsToolbar {
       color: CaptionText;
     }
 
-    #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:-moz-window-inactive,
-    #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:-moz-window-inactive {
+    :root[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:-moz-window-inactive,
+    :root[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:-moz-window-inactive {
       color: InactiveCaptionText;
     }
 
-    #main-window[tabsintitlebar] #main-menubar > menu {
+    :root[tabsintitlebar] #main-menubar > menu {
       color: inherit;
     }
   }
 
   /* Use less opacity than normal since this is very dark, and on top of the default toolbar color */
   .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
   .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
     opacity: .6;
@@ -217,23 +217,23 @@
   /* Override scrollbutton gradients in normal and hover state */
   .tabbrowser-arrowscrollbox > .scrollbutton-down,
   .tabbrowser-arrowscrollbox > .scrollbutton-up {
     background-image: none !important;
     transition: none; /* scrollbutton-down has an unwanted transition on background color */
   }
 
   /* Restore draggable space on the sides of tabs when maximized */
-  #main-window[sizemode="maximized"] .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
+  :root[sizemode="maximized"] .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
     padding-left: 15px;
     padding-right: 15px;
   }
 
   /* Override the padding that's intended to compensate for tabs that can overlap border-radius on nav-bar in default theme. */
-  #main-window[sizemode=normal]:not([customizing]) #TabsToolbar {
+  :root[sizemode=normal]:not([customizing]) #TabsToolbar {
     padding-left: 0;
     padding-right: 0;
   }
 }
 
 /* Restored windows get an artificial border on windows, because the lwtheme background
  * overlaps the regular window border. That isn't the case for us, so we avoid painting
  * over the native border with our custom borders: */
@@ -246,68 +246,68 @@
 #navigator-toolbox {
   /* The side borders on the toolbox also look out-of-place because we don't paint over
    * the native background color at all, and these are !important for the same reason as above. */
   border-left: none !important;
   border-right: none !important;
 }
 
 /* Disable dragging like in the default theme: */
-#main-window[tabsintitlebar] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):-moz-lwtheme {
+:root[tabsintitlebar] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):-moz-lwtheme {
   -moz-window-dragging: no-drag;
 }
 
 /* The sidebar header has no background now that the background of the #browser-panel
  * has no image and is transparent. Fix: */
 .sidebar-header:-moz-lwtheme,
 #sidebar-header {
   background-color: var(--chrome-background-color);
   color: var(--chrome-color);
 }
 
 @media (-moz-os-version: windows-vista),
        (-moz-os-version: windows-win7),
        (-moz-os-version: windows-win8) {
   /* And then we add them back on toolbars so that they don't look borderless: */
-  #main-window:not([customizing])[sizemode=normal] #navigator-toolbox::after,
-  #main-window:not([customizing])[sizemode=normal] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
+  :root:not([customizing])[sizemode=normal] #navigator-toolbox::after,
+  :root:not([customizing])[sizemode=normal] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
     border-left: 1px solid hsla(209,67%,12%,0.35);
     border-right: 1px solid hsla(209,67%,12%,0.35);
   }
 }
 
 @media (-moz-os-version: windows-win10) {
   /* Always keep draggable space on the sides of tabs since there is no top margin on Win10 */
-  #main-window .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
+  :root .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
     padding-left: 15px;
     padding-right: 15px;
   }
 
   /* Force white caption buttons for the dark theme on Windows 10 */
   :root[devtoolstheme="dark"] #titlebar-min {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-white);
   }
   :root[devtoolstheme="dark"] #titlebar-max {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-white);
   }
-  #main-window[devtoolstheme="dark"][sizemode="maximized"] #titlebar-max {
+  :root[devtoolstheme="dark"][sizemode="maximized"] #titlebar-max {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-white);
   }
   :root[devtoolstheme="dark"] #titlebar-close {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white);
   }
 
   /* ... and normal ones for the light theme on Windows 10 */
   :root[devtoolstheme="light"] #titlebar-min {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
   }
   :root[devtoolstheme="light"] #titlebar-max {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize);
   }
-  #main-window[devtoolstheme="light"][sizemode="maximized"] #titlebar-max {
+  :root[devtoolstheme="light"][sizemode="maximized"] #titlebar-max {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
   }
   :root[devtoolstheme="light"] #titlebar-close {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
   }
 
   :root[devtoolstheme="light"] #titlebar-close:hover {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white);