#rb-theme-toggle-btn .rb-theme-icon-light {
        opacity: 0;
        transform: scale(0.5) rotate(-90deg);
    }
    #rb-theme-toggle-btn .rb-theme-icon-dark {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    html.dark #rb-theme-toggle-btn .rb-theme-icon-light {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    html.dark #rb-theme-toggle-btn .rb-theme-icon-dark {
        opacity: 0;
        transform: scale(0.5) rotate(90deg);
    }

    /* Circular wipe via the View Transitions API (Chromium/Edge). Ignored elsewhere. */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
        mix-blend-mode: normal;
    }
    ::view-transition-old(root) { z-index: 1; }
    ::view-transition-new(root) { z-index: 2; }
    html.rb-theme-wipe::view-transition-new(root) {
        animation: rb-theme-wipe-in 0.55s ease-in-out;
    }
    @keyframes rb-theme-wipe-in {
        from { clip-path: circle(0% at var(--rb-theme-toggle-x, 100%) var(--rb-theme-toggle-y, 100%)); }
        to { clip-path: circle(150% at var(--rb-theme-toggle-x, 100%) var(--rb-theme-toggle-y, 100%)); }
    }

    /* Fallback crossfade for browsers without View Transitions support. */
    html.rb-theme-fading,
    html.rb-theme-fading * {
        transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, fill 0.3s ease !important;
    }

    #mi-theme-toggle-btn .mi-theme-icon-light {
        opacity: 0;
        transform: scale(0.5) rotate(-90deg);
    }
    #mi-theme-toggle-btn .mi-theme-icon-dark {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    html.dark #mi-theme-toggle-btn .mi-theme-icon-light {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    html.dark #mi-theme-toggle-btn .mi-theme-icon-dark {
        opacity: 0;
        transform: scale(0.5) rotate(90deg);
    }

    /* Circular wipe via the View Transitions API (Chromium/Edge). Ignored elsewhere. */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
        mix-blend-mode: normal;
    }
    ::view-transition-old(root) { z-index: 1; }
    ::view-transition-new(root) { z-index: 2; }
    html.mi-theme-wipe::view-transition-new(root) {
        animation: mi-theme-wipe-in 0.55s ease-in-out;
    }
    @keyframes mi-theme-wipe-in {
        from { clip-path: circle(0% at var(--mi-theme-toggle-x, 100%) var(--mi-theme-toggle-y, 100%)); }
        to { clip-path: circle(150% at var(--mi-theme-toggle-x, 100%) var(--mi-theme-toggle-y, 100%)); }
    }

    /* Fallback crossfade for browsers without View Transitions support. */
    html.mi-theme-fading,
    html.mi-theme-fading * {
        transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, fill 0.3s ease !important;
    }