/* Follow the browser's system appearance, including live macOS/Safari changes. */
:root{color-scheme:light dark}
@media(prefers-color-scheme:dark){
 :root{--paper:#111111;--ink:#f2f2f2;--muted:#aaaaaa;--line:#333333;--accent:#cccccc}
 .hero-bottom p,.about-copy p,.case-description,.story-row p,.case-team-intro p,.msn-process p,.filters button,.project-caption p,figcaption p,footer{color:var(--muted)}
 .filters button.active{color:var(--paper)}
 .filters button:hover:not(.active){background:#292929}
 .project-image,.brand-grid .zoom-image,.zoom-image,.case-hero:not(.msn-case-hero){background:#202020}
 dialog{background:#202020;color:var(--ink)}
 dialog::backdrop{background:#000000cc}
 .arrow-icon,.home-logo img{filter:brightness(0) invert(1)}
 .profile-facts dt,.company-logo>span:not(.company-arrow),.slide-counter,.microsoft-board>span{color:var(--muted)}
 .slide-nav a span{background:#666666}
 .slide-nav a[aria-current=true] span,.slide-nav a:hover span{background:var(--ink)}
 .company-logo:hover{background:#202020}
 .logo-grid .logo-window img{filter:brightness(0) invert(1)}
 .is-paginated .showcase,.presentation .mobile-header{background:var(--paper)}
 .is-paginated .showcase::after{border-color:var(--paper)}
 /* Artwork and its logo-matched controls retain their original colours. */
 .pagination-controls .arrow-icon{filter:brightness(0) invert(1)}
 .pagination-controls[data-logo-tone="light"] .arrow-icon{filter:none}
}