.brand-rolling{position:relative}
.brand-rolling>theme-toggle{position:absolute;left:0;top:100%;z-index:2}
html[data-theme=dark]{color-scheme:dark;background:#121212}
html[data-theme=dark] body,html[data-theme=dark] #main,html[data-theme=dark] .page-root{background:#121212!important;color:#eee!important;--token-b19f6397-fa30-44fc-9bd9-355cfec867b7:#121212;--token-70353759-40a6-4e8f-a67e-b6584c7df7ba:#eee;--site-text-color:#eee}
html[data-theme=dark] :is(h1,h2,h3,h4,p,dt,dd,figcaption,.case-sidebar,.case-footer,.about-introduction,.outside-work,.about-gratitude,.site-text,.home-weather,[data-clock]){color:#e5e5e5!important}
html[data-theme=dark] a{color:#ddd!important}
html[data-theme=dark] .portfolio-header{background:transparent!important}
html[data-theme=dark] .menu-toggle span{background:#eee}
html[data-theme=dark] :is(.site-z7x7se .site-text,.case-eyebrow,.outside-meta,.bio-detail){color:#a9a9a9!important}
html[data-theme=dark] :is(.site-hplced,.site-12yjx4d,.site-11c7n6r)>div,
html[data-theme=dark] :is(.site-k9oc9o-container,.site-6di9lz,.bio-expand,.case-statement,.case-principle,.library-sidebar,.canvas-toolbar,.canvas-object,.city-clock-label,.city-clock-time,.library .outside-cover,.library .article-list a){background:#2b2b2b!important;color:#eee!important;border-color:#454545!important}
html[data-theme=dark] .interactive-bio{background:#121212;box-shadow:0 0 0 12px #121212;color:#eee}
html[data-theme=dark] :is(.case-footer,footer.site-1g7hkm1,.about-timebar){background:#121212!important;color:#eee;border-color:#383838}
html[data-theme=dark] :is(.project-overview,.case-section>.case-eyebrow,.case-sidebar-title,.case-next,.about-gratitude,.library-shelf){border-color:#3b3b3b}
html[data-theme=dark] :is(.about-player button,.outer-marquee,.case-close){color:#eee}
html[data-theme=dark] .case-lightbox{background:#242424;color:#eee}
html[data-theme=dark] .outer-marquee{background:transparent}
html[data-theme=dark] .library-canvas{background-color:#121212}
html[data-theme=dark] .case-scroll-slider span{background:#eee}
html[data-theme=dark] .hero-scramble-base{color:inherit}

html[data-theme=dark] #main>div{background-color:#121212!important}

/* Leave room for the second header circle above project titles. */
html body.case-page .case-opening{padding-top:172px}
@media(max-width:809px){html body.case-page .case-opening{padding-top:148px}}

/* Liquid circles merge using the same SVG filter as the wordmark. */
.brand-rolling>rolling-logo{position:relative;z-index:3}
.brand-rolling>theme-toggle{opacity:0;pointer-events:none;z-index:2}
.brand-rolling>theme-toggle::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:18px}

/* Keep the current project section distinct in dark mode. */
html[data-theme=dark] .project-rail nav a{color:#737373!important}
html[data-theme=dark] .project-rail nav a[aria-current],html[data-theme=dark] .project-rail nav a:hover,html[data-theme=dark] .project-rail nav a:focus-visible{color:#e5e5e5!important}

/* Dark surfaces for project labels, merchandise notes, and next-project cards. */
html[data-theme=dark] :is(.hksa-label,.outer-figma-chip,.case-opening-label,.hksa-merch-note){background:#292929!important;color:#fff!important}
html[data-theme=dark] .hksa-merch-note p{color:#fff!important}
html[data-theme=dark] .case-page .case-next{background:#242424!important;border-color:#333!important;color:#fff!important}
html[data-theme=dark] .case-page .case-next:hover{background:#2b2b2b!important}
html[data-theme=dark] .case-next h2{color:#fff!important}
html[data-theme=dark] .case-next :is(p,.case-eyebrow,.next-pull-hint,h2 span){color:#b3b3b3!important}