/* Filter the root once. Filtering every element compounds the effect. */
html[data-sidm-mode="dark"] {
    filter: invert(1) hue-rotate(180deg) !important;
    background-color: #fff;
}
/* Top-layer surfaces are outside the root's compositing group. */
html[data-sidm-mode="dark"] :is(dialog:modal, [popover]:popover-open):not([data-sidm-read-filter]) {
    filter: var(--sidm-original-filter, ) invert(1) hue-rotate(180deg) !important;
}
/* CSS fallback protects media even before runtime discovery/lazy loading. */
html[data-sidm-mode="dark"] :is(img, video, iframe, canvas, object, embed):not([data-sidm-nested-media]):not([data-sidm-read-filter]) {
    filter: var(--sidm-original-filter, ) hue-rotate(-180deg) invert(1) !important;
}
html[data-sidm-mode="dark"] img.salmon-dark-invert:not([data-sidm-read-filter]),
html[data-sidm-mode="dark"] .salmon-dark-invert img:not([data-sidm-read-filter]) {
    filter: var(--sidm-original-filter, none) !important;
}

/* Cross-fade complete snapshots so protected media never interpolates its filters. */
html[data-sidm-transition]::view-transition-group(root) {
    animation-duration: 250ms;
}
html[data-sidm-transition]::view-transition-old(root),
html[data-sidm-transition]::view-transition-new(root) {
    animation-duration: 250ms;
    animation-timing-function: ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    html[data-sidm-transition]::view-transition-group(root),
    html[data-sidm-transition]::view-transition-old(root),
    html[data-sidm-transition]::view-transition-new(root) {
        animation-duration: 0s;
    }
}