/* Theme toggle button, shared by /app, /explore and the marketing pages (see theme.js).
   Markup:
   <button type="button" class="fl-theme-tgl" data-fl-theme-toggle aria-label="Switch to light mode">
     <svg class="fl-tgl-sun" viewBox="0 0 24 24" aria-hidden="true">...</svg>
     <svg class="fl-tgl-moon" viewBox="0 0 24 24" aria-hidden="true">...</svg>
   </button>
   Dark mode shows the sun (tap for light); light mode shows the moon. */
.fl-theme-tgl{
  --fl-tgl-fg:#EEEAE2;--fl-tgl-line:rgba(255,255,255,.16);--fl-tgl-hover:rgba(255,255,255,.07);
  display:inline-grid;place-items:center;flex:0 0 auto;width:34px;height:34px;padding:0;margin:0;
  border-radius:999px;border:1px solid var(--fl-tgl-line);background:transparent;color:var(--fl-tgl-fg);
  cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease;
  -webkit-tap-highlight-color:transparent
}
.fl-theme-tgl:hover{background:var(--fl-tgl-hover)}
.fl-theme-tgl:active{transform:scale(.94)}
.fl-theme-tgl:focus-visible{outline:2px solid #F5D130;outline-offset:2px}
.fl-theme-tgl svg{grid-area:1/1;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .2s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.fl-theme-tgl .fl-tgl-moon{opacity:0;transform:rotate(-40deg) scale(.6)}
:root[data-theme="light"] .fl-theme-tgl{--fl-tgl-fg:#121212;--fl-tgl-line:rgba(18,18,18,.16);--fl-tgl-hover:rgba(18,18,18,.05)}
:root[data-theme="light"] .fl-theme-tgl .fl-tgl-sun{opacity:0;transform:rotate(40deg) scale(.6)}
:root[data-theme="light"] .fl-theme-tgl .fl-tgl-moon{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fl-theme-tgl svg{transition:none}}