/* One icon button, showing the theme the visitor can switch to. */
.portfolio-redesign .theme-icon-button,.case-page .case-topbar .theme-icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:9px;min-width:40px;border:0;border-radius:50%;background:transparent;color:var(--muted);box-shadow:none;cursor:pointer;transition:color .2s,background .2s}
.portfolio-redesign .theme-icon-button:hover,.case-page .case-topbar .theme-icon-button:hover{color:var(--ink);background:var(--soft)}
.theme-icon-button svg{width:22px;height:22px;flex:none;opacity:1;stroke:currentColor}
.theme-icon-button .sun-icon{display:none}.theme-icon-button .moon-icon{display:block}
:root[data-theme=dark] .theme-icon-button .sun-icon{display:block}:root[data-theme=dark] .theme-icon-button .moon-icon{display:none}
@media(pointer:coarse){.portfolio-redesign .theme-icon-button,.case-page .case-topbar .theme-icon-button{width:44px;height:44px}}

/* Override the legacy switch's dimmed icon colors in both themes. */
:root .theme-icon-button .moon-icon{opacity:1;color:#50789d;stroke:currentColor;fill:none}
:root[data-theme=dark] .theme-icon-button .sun-icon{opacity:1;color:#f4d28a;stroke:currentColor;fill:none;stroke-width:1.9}

:root .theme-icon-button .moon-icon{fill:currentColor;stroke:none}
:root[data-theme=dark] .theme-icon-button .sun-icon{fill:currentColor}

/* Reveal the new theme from the toggle at the upper right. */
:root.theme-reveal *,
:root.theme-reveal *::before,
:root.theme-reveal *::after {
  transition-duration: 0s !important;
}
:root.theme-reveal::view-transition-old(root),
:root.theme-reveal::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
:root.theme-reveal::view-transition-new(root) {
  z-index: 1;
}