/* Keep completion events available for UI that waits for a transition. */
html[data-lite="true"],
html[data-lite="true"]::before,
html[data-lite="true"]::after,
html[data-lite="true"] *,
html[data-lite="true"] *::before,
html[data-lite="true"] *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* These dark homepage surfaces must stay readable without glass blur. */
html[data-lite="true"] body.home-art-direction #try .hs-quiz {
  background: #181526;
}

html[data-lite="true"] body:is(.home-art-direction, .hero-motion-page) :is(.forge-topnav, .nav-dd-menu, .mobile-menu) {
  --topnav-ink: #f4f2ff;
  --topnav-muted: #c9c3d9;
  --topnav-accent: #c9c2ff;
  --text: #f4f2ff;
  --text-2: #c9c3d9;
  --accent-text: #c9c2ff;
  --indigo-muted: #262137;
  background: #181526;
  color: #f4f2ff;
  border-color: #38314b;
}

.lite-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--ds-border, #d5d5df);
  border-radius: 999px;
  background: var(--ds-surface, #fff);
  color: var(--ds-text, #252432);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
}

.lite-mode-toggle[aria-pressed="true"] {
  border-color: #5b50e8;
  background: #efedff;
  color: #4238b8;
}

[data-dark] .lite-mode-toggle {
  border-color: #414152;
  background: #191923;
  color: #f1efff;
}

[data-dark] .lite-mode-toggle[aria-pressed="true"] {
  border-color: #a69fff;
  background: #30295c;
  color: #f1efff;
}

body:is(.home-art-direction, .hero-motion-page) :is(.forge-topnav, .mobile-menu) .lite-mode-toggle {
  background: #181526;
  border-color: #514563;
  color: #d9d3e8;
}

body:is(.home-art-direction, .hero-motion-page) :is(.forge-topnav, .mobile-menu) .lite-mode-toggle[aria-pressed="true"] {
  background: #262137;
  border-color: #746887;
  color: #f4f2ff;
}

.lite-mode-setting {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  cursor: pointer;
}

.lite-mode-setting input[type="checkbox"] {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  accent-color: #5b50e8;
  cursor: pointer;
}

.lite-mode-toggle:focus-visible,
.lite-mode-setting input:focus-visible {
  outline: 3px solid #5b50e8;
  outline-offset: 3px;
}

[data-dark] .lite-mode-toggle:focus-visible,
[data-dark] .lite-mode-setting input:focus-visible {
  outline-color: #b3adff;
}

.lite-mode-toggle:disabled,
.lite-mode-setting input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}