/* Shared sun / moon glyphs, with a small rose accent and an intact hit target. */
#themeToggle .sp-theme-glyph {
    position:relative; display:block; width:24px; height:24px;
}
#themeToggle .sp-theme-glyph svg {
    position:absolute; inset:0; display:block; width:24px; height:24px;
    fill:none; stroke:currentColor; stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round;
    transition:opacity .18s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
#themeToggle .sp-theme-glyph .sp-theme-accent { stroke:#e11d48; }
[data-theme="dark"] #themeToggle .sp-theme-glyph .sp-theme-accent { stroke:#fb7185; }
#themeToggle .sp-theme-glyph .sp-theme-sun { opacity:0; transform:rotate(-45deg) scale(.65); }
#themeToggle .sp-theme-glyph .sp-theme-moon { opacity:1; transform:rotate(0) scale(1); }
[data-theme="dark"] #themeToggle .sp-theme-glyph .sp-theme-sun { opacity:1; transform:rotate(0) scale(1); }
[data-theme="dark"] #themeToggle .sp-theme-glyph .sp-theme-moon { opacity:0; transform:rotate(30deg) scale(.65); }
#themeToggle:focus-visible { outline:2px solid #e11d48; outline-offset:3px; }
[data-theme="dark"] #themeToggle:focus-visible { outline-color:#fb7185; }

/* No page-wide colour interpolation, no DOM clone and no permanent layer. */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
    transition:none!important;
}
html.sp-theme-transition::view-transition { pointer-events:none; }
html.sp-theme-transition::view-transition-group(root) { animation:none; }
html.sp-theme-transition::view-transition-image-pair(root) { isolation:isolate; }
html.sp-theme-transition::view-transition-old(root),
html.sp-theme-transition::view-transition-new(root) {
    animation:none; mix-blend-mode:normal;
}
html.sp-theme-transition::view-transition-old(root) { z-index:1; }
html.sp-theme-transition::view-transition-new(root) {
    z-index:2;
    clip-path:circle(0px);
}
@media (prefers-reduced-motion:reduce) {
    #themeToggle .sp-theme-glyph svg { transition:none; }
}
@media (forced-colors:active) {
    #themeToggle .sp-theme-glyph .sp-theme-accent { stroke:ButtonText; }
    #themeToggle:focus-visible { outline-color:Highlight; }
}
