:root[data-theme="dark"] {
  --paper: #151515;
  --ink: #f4f4f1;
  --muted: #b6b6b2;
  --line: #414141;
  --browser-surface: #151515;
  color-scheme: dark;
}
:root[data-theme="dark"][data-footer-visible] { --browser-surface: #111111; }
:root[data-theme="dark"] .brand svg path { fill: currentColor; }
:root[data-theme="dark"] .brand svg image { filter: invert(1); }
:root[data-theme="dark"] .next-project { background: #232323; }
:root[data-theme="dark"] .project-art { background: #202020; }
:root[data-theme="dark"] .forma-zoom.is-open::backdrop { background: rgb(21 21 21 / .97); }
:root[data-theme="dark"] .forma-gallery img { border-color: var(--line); }
.main-nav .theme-control { display: inline-flex; align-items: center; margin-left: 4px; flex-shrink: 0; }
.main-nav .theme-control select {
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 7px 9px;
  min-height: 36px;
  max-width: 110px;
  cursor: pointer;
}
.main-nav .theme-control select:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.main-nav .theme-control option { color: var(--ink); background: var(--paper); }
@media (max-width: 640px) {
  .site-header .main-nav { gap: 12px; justify-content: space-between; }
  .main-nav .theme-control { margin-left: auto; }
  .main-nav .theme-control select { width: 88px; font-size: 13px; padding-inline: 6px; }
}

/* Ordinary page overlay: no native view-transition snapshot or browser surface. */
.theme-live-overlay {
  position: fixed !important; inset: 0 auto auto 0 !important;
  width: 100vw !important; height: 100vh !important; height: 100lvh !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  pointer-events: none !important; overflow: hidden !important;
  z-index: 2147483000 !important; isolation: isolate !important;
  contain: layout paint style !important; background: transparent !important;
}
.theme-live-overlay, .theme-live-overlay * { pointer-events: none !important; }
:root.theme-capture :not(.theme-live-overlay):not(.theme-live-overlay *) {
  transition-property: transform, translate, scale, rotate, opacity !important;
}
@media (prefers-reduced-motion: reduce) { .theme-live-overlay { display: none !important; } }

/* One shared palette clock: no duplicated page, masks or browser snapshots. */
@property --browser-surface { syntax: '<color>'; inherits: true; initial-value: #faf9f6; }
@property --paper { syntax: '<color>'; inherits: true; initial-value: #faf9f6; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #171716; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #65645f; }
@property --line { syntax: '<color>'; inherits: true; initial-value: #deddd7; }
@property --forma-surface { syntax: '<color>'; inherits: true; initial-value: #f1f0eb; }
@property --theme-menu-hover { syntax: '<color>'; inherits: true; initial-value: #f1f1f1; }
:root.theme-mobile-fade {
  transition: --browser-surface 300ms ease-in-out, --paper 300ms ease-in-out,
    --ink 300ms ease-in-out, --muted 300ms ease-in-out, --line 300ms ease-in-out,
    --forma-surface 300ms ease-in-out, --theme-menu-hover 300ms ease-in-out;
}
/* Resolve the animated surface directly; the cover's shorthand fallback can
   otherwise remain painted until the registered-colour transition ends. */
:root.theme-mobile-fade .forma-cover { background-color: var(--forma-surface); }
/* Nested colour transitions would chase the interpolating palette and lag. */
:root.theme-mobile-fade :is(.project-caption, .next-project, .theme-menu-trigger, .theme-menu-item) {
  transition-property: transform, translate, scale, rotate, opacity !important;
}
:root.theme-mobile-fade .hwf-root canvas,
:root.theme-mobile-fade .home-about-backdrop > canvas,
:root.theme-mobile-fade .forma-cover-wordmark,
:root.theme-mobile-fade .forma-wordmark img,
:root.theme-mobile-fade .brand svg image { transition: filter 300ms ease-in-out; }
:root.theme-capture { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root.theme-mobile-fade { transition: none; }
  :root.theme-mobile-fade .hwf-root canvas,
  :root.theme-mobile-fade .home-about-backdrop > canvas,
  :root.theme-mobile-fade .forma-cover-wordmark,
  :root.theme-mobile-fade .forma-wordmark img,
  :root.theme-mobile-fade .brand svg image { transition: none; }
}