html{color-scheme:light;--surface:#ffffff;--control-line:#c9c3d3}
html[data-theme=dark]{color-scheme:dark;--paper:var(--dark-paper,#1b1c20)!important;--ink:var(--dark-ink,#ececef)!important;--muted:#afb0ba;--line:#3a3c45;--accent:var(--dark-accent,#b39acb)!important;--accent-ink:#141519!important;--accent-soft:color-mix(in srgb,var(--accent) 13%,var(--paper));--surface:#24252c;--control-line:#484a55}
.theme-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;min-height:36px;padding:0;border:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);cursor:pointer;align-self:center}
.theme-toggle:hover,.theme-toggle:focus-visible{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.theme-toggle svg{position:absolute;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:opacity 350ms ease,transform 450ms ease}
.theme-sun{opacity:0;transform:rotate(-40deg) scale(.7)}.theme-moon{opacity:1;transform:none}
[data-theme=dark] .theme-sun{opacity:1;transform:none}[data-theme=dark] .theme-moon{opacity:0;transform:rotate(35deg) scale(.7)}
html[data-theme=dark] .listen-links .text-link,html[data-theme=dark] #contact-form input,html[data-theme=dark] #contact-form textarea,html[data-theme=dark] #contact-form select,html[data-theme=dark] #copy-fallback,html[data-theme=dark] #email-copy-fallback{background:var(--surface);color:var(--ink);border-color:var(--control-line)}
html[data-theme=dark] .load-player,html[data-theme=dark] .project-type,html[data-theme=dark] .contact{background:var(--accent-soft);color:var(--ink)}
html[data-theme=dark] .square-button,html[data-theme=dark] .filters button{border-color:var(--control-line);color:var(--ink)}
html[data-theme=dark] .square-button.play-release,html[data-theme=dark] .filters button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
html[data-theme=dark] .square-button:hover,html[data-theme=dark] .filters button:hover,html[data-theme=dark] .listen-links .text-link:hover,html[data-theme=dark] .load-player:hover{background:var(--accent-soft);color:var(--ink)}
html[data-theme=dark] .square-button.play-release:hover,html[data-theme=dark] .filters button[aria-pressed=true]:hover{background:var(--accent);color:var(--accent-ink)}
html.theme-changing,html.theme-changing body,html.theme-changing header,html.theme-changing nav,html.theme-changing footer,html.theme-changing p,html.theme-changing h1,html.theme-changing h2,html.theme-changing h3,html.theme-changing a,html.theme-changing button,html.theme-changing input,html.theme-changing textarea,html.theme-changing select,html.theme-changing time,html.theme-changing span,html.theme-changing .current-position,html.theme-changing .news-row,html.theme-changing .news-list,html.theme-changing .archive-row,html.theme-changing .archive-year{transition:background-color 550ms ease,color 550ms ease,border-color 550ms ease,box-shadow 550ms ease}
html.theme-changing .home-section::before{transition:background-color 550ms ease}
@media(max-width:700px){.masthead .nav-anchor nav{row-gap:6px}.theme-toggle{flex-basis:32px;width:32px;height:32px;min-height:32px}}
@media(prefers-reduced-motion:reduce){.theme-toggle svg,html.theme-changing *{transition:none!important}}

html.js.home-entry.theme-changing .masthead{transition:background-color 550ms ease,color 550ms ease,border-color 550ms ease!important}
html[data-theme=dark] #contact-form input:focus,html[data-theme=dark] #contact-form textarea:focus,html[data-theme=dark] #contact-form select:focus{outline-color:var(--accent)}