/* Font-independent sun/moon, preserving the outlined square controls. */
html[data-theme] body #theme-toggle,
html.discover-preview[data-theme] body #themeButton{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;
  padding:0!important;font-size:0!important;line-height:0!important;flex-shrink:0;
  border:1px solid #c7b791!important;border-radius:8px!important;overflow:hidden;
}
html[data-theme] body #theme-toggle::before,
html.discover-preview[data-theme] body #themeButton::before{
  content:""!important;display:block!important;position:static!important;box-sizing:border-box!important;
  width:12px!important;height:12px!important;background:none!important;border:2px solid currentColor!important;
  border-radius:50%!important;transform:none!important;
  box-shadow:0 -8px 0 -5px currentColor,0 8px 0 -5px currentColor,8px 0 0 -5px currentColor,-8px 0 0 -5px currentColor,6px 6px 0 -5px currentColor,-6px -6px 0 -5px currentColor,6px -6px 0 -5px currentColor,-6px 6px 0 -5px currentColor!important;
}
html[data-theme="light"] body #theme-toggle::before,
html.discover-preview[data-theme="light"] body #themeButton::before{
  width:18px!important;height:18px!important;border:0!important;box-shadow:inset 5px -3px 0 0 currentColor!important;
}
html[data-theme] body #theme-toggle::after,
html.discover-preview[data-theme] body #themeButton::after{content:none!important;display:none!important}
@media(max-width:700px){
  html[data-theme] body #theme-toggle,html.discover-preview[data-theme] body #themeButton{
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
  }
}