/* Shared material preserves the existing chrome, palette and hit areas. */
html body .masthead .box,
html body .sheet .sheet__body,
html body .studio-shell>.rail.rail--workspace,
  html body .studio-shell[data-inline-menu=true][data-nav-open=true]>.rail.rail--workspace,
html body .account-system.studio-shell .studio-profile-menu__panel{
  background:var(--surface);
}
@supports ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))){
  html body .masthead .box,
  html body .sheet .sheet__body,
  html body .studio-shell>.rail.rail--workspace,
  html body .studio-shell[data-inline-menu=true][data-nav-open=true]>.rail.rail--workspace,
  html body .account-system.studio-shell .studio-profile-menu__panel{
    background:var(--color-surface-backdrop);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }
}
html body .masthead .box:hover{background:var(--surface-subtle)}
html body .masthead .box--fill,html body .masthead .box--fill:hover{background:var(--brand-fill)}
html body .masthead .box--on,html body .masthead .box--on:hover{background:var(--n900)}
@media(prefers-reduced-transparency:reduce){
  html body .masthead .box,
  html body .sheet .sheet__body,
  html body .studio-shell>.rail.rail--workspace,
  html body .studio-shell[data-inline-menu=true][data-nav-open=true]>.rail.rail--workspace,
  html body .account-system.studio-shell .studio-profile-menu__panel{
    background:var(--surface);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  html body .masthead .box--fill,html body .masthead .box--fill:hover{background:var(--brand-fill)}
  html body .masthead .box--on,html body .masthead .box--on:hover{background:var(--n900)}
}