:root {
  color-scheme: light;
  --theme-page: #ecebe6;
  --theme-surface: #f3f2ec;
  --theme-ink: #3a3936;
  --theme-muted: #6f6d66;
  --theme-line: #c9c5ba;
  --theme-accent: #982321;
  --theme-button-bg: transparent;
  --theme-button-ink: #3a3936;
  --theme-button-muted: #55534d;
  --theme-button-active-bg: #191617;
  --theme-button-active-ink: #ecebe6;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-page: #0c0d0f;
  --theme-surface: #16171a;
  --theme-ink: #e8e2dc;
  --theme-muted: #b8b0aa;
  --theme-line: #4d4845;
  --theme-accent: #d4837c;
  --theme-button-bg: rgba(255, 255, 255, .035);
  --theme-button-ink: #e8e2dc;
  --theme-button-muted: #b8b0aa;
  --theme-button-active-bg: #e8e2dc;
  --theme-button-active-ink: #191617;
  --paper: #0c0d0f;
  --paper-light: #16171a;
  --ink: #e8e2dc;
  --muted: #b8b0aa;
  --line: #4d4845;
  --wine: #c27470;
  --wine-deep: #7d4144;
  --rose: #68494b;
  --green: #7da281;
  background: var(--theme-page);
}

body,
x-dc {
  transition: background-color .25s ease, color .25s ease;
}

.theme-toggle {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(25, 22, 23, .22);
  border-radius: 50%;
  background: rgba(236, 235, 230, .92);
  color: #191617;
  box-shadow: 0 8px 28px rgba(25, 22, 23, .16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font: 600 10px/1 'Archivo', sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
}

.theme-toggle:hover {
  transform: translateY(-2px);
}

.theme-toggle:active {
  transform: translateY(0) scale(.98);
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--theme-accent);
  outline-offset: 3px;
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.theme-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.back-to-top {
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 58px) !important;
}

.theme-toggle .theme-icon-sun,
html[data-theme="dark"] .theme-toggle .theme-icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle .theme-icon-sun {
  display: block;
}

html[data-theme="dark"] .theme-toggle {
  border-color: rgba(232, 226, 220, .2);
  background: rgba(37, 34, 34, .92);
  color: #e8e2dc;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .34);
}

body.has-shortlist-tray .theme-toggle {
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 82px);
}

body.has-catalog-dialog .theme-toggle {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

html[data-theme="dark"] body,
html[data-theme="dark"] x-dc,
html[data-theme="dark"] main {
  background: var(--theme-page) !important;
  color: var(--theme-ink) !important;
}

html[data-theme="dark"] body :where(
  h1, h2, h3, h4, h5, h6,
  p, span, a, button, label,
  figcaption, dt, dd, small, strong, em
) {
  color: #f7f4ef !important;
}

html[data-theme="dark"] body .compare-options .compare-choice-copy {
  background: #f4f2ed !important;
}

html[data-theme="dark"] body .compare-options .compare-choice-copy strong,
html[data-theme="dark"] body .compare-options .compare-choice-copy span {
  color: #191617 !important;
}

html[data-theme="dark"] body .compare-options .compare-choice-copy span {
  color: #6f6c66 !important;
}

html[data-theme="dark"] body .compare-options .compare-choice[aria-pressed="false"] .compare-choice-mark {
  background: rgba(236,235,230,.94) !important;
  color: #77736d !important;
}

html[data-theme="dark"] body .compare-options .compare-choice[aria-pressed="true"] .compare-choice-mark {
  background: #982321 !important;
  color: #fff !important;
}

html[data-theme="dark"] #gallery-content h1 img[alt="The Disease of “More”"] {
  filter: invert(1) grayscale(1) brightness(1.9);
}

html[data-theme="dark"] [style*="background: #ecebe6"],
html[data-theme="dark"] [style*="background:#ecebe6"] {
  background: var(--theme-page) !important;
}

html[data-theme="dark"] [style*="background: #f3f2ec"],
html[data-theme="dark"] [style*="background:#f3f2ec"],
html[data-theme="dark"] [style*="background: #dedcd4"],
html[data-theme="dark"] [style*="background:#dedcd4"] {
  background: var(--theme-surface) !important;
}

html[data-theme="dark"] [style*="background: rgba(236,235,230"],
html[data-theme="dark"] [style*="background:rgba(236,235,230"] {
  background: rgba(12, 13, 15, .94) !important;
}

html[data-theme="dark"] .sticky-header {
  border-color: var(--theme-line) !important;
  background: rgba(12, 13, 15, .94) !important;
  color: var(--theme-ink) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .about-modal {
  background: rgba(0, 0, 0, .72) !important;
}

html[data-theme="dark"] .about-modal-panel {
  border: 1px solid rgba(232, 226, 220, .14);
  background: var(--theme-surface) !important;
  color: var(--theme-ink) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .58) !important;
}

html[data-theme="dark"] .about-modal-panel p {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] .about-modal-panel .about-modal-emphasis,
html[data-theme="dark"] .about-modal-panel :is(#reading-title, #artist-title, button) {
  color: var(--theme-ink) !important;
}

html[data-theme="dark"] [style*="color: #3a3936"],
html[data-theme="dark"] [style*="color:#3a3936"],
html[data-theme="dark"] [style*="color: #191617"],
html[data-theme="dark"] [style*="color:#191617"] {
  color: var(--theme-ink) !important;
}

html[data-theme="dark"] [style*="color: #55534d"],
html[data-theme="dark"] [style*="color:#55534d"],
html[data-theme="dark"] [style*="color: #6f6d66"],
html[data-theme="dark"] [style*="color:#6f6d66"],
html[data-theme="dark"] [style*="color: #77756f"],
html[data-theme="dark"] [style*="color:#77756f"],
html[data-theme="dark"] [style*="color: #7c7a74"],
html[data-theme="dark"] [style*="color:#7c7a74"] {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .collector-chip {
  border-color: var(--theme-line) !important;
  background-color: rgba(255, 255, 255, .035) !important;
  color: var(--theme-ink) !important;
}

html[data-theme="dark"] input::placeholder {
  color: #918984;
}

html body .availability-filter button,
html body .gallery-toolbar .toolbar-button,
html body .gallery-view-controls button {
  background: var(--theme-button-bg) !important;
  color: var(--theme-button-muted) !important;
}

html body .availability-filter button[aria-pressed="true"],
html body .gallery-toolbar .toolbar-button[aria-pressed="true"],
html body .gallery-view-controls button[aria-pressed="true"] {
  background: var(--theme-button-active-bg) !important;
  color: var(--theme-button-active-ink) !important;
}

html body .availability-filter .availability-button-available {
  background: #3f7d4a !important;
  color: #fff !important;
}

html body .availability-filter .availability-button-available .status-dot {
  background: #fff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .22);
}

html body .availability-filter .availability-button-available[aria-pressed="true"] {
  background: #285f34 !important;
}

html body .availability-filter .availability-button-available:hover {
  background: #347142 !important;
}

html body .gallery-toolbar .toolbar-button:not([aria-pressed]) {
  color: var(--theme-button-ink) !important;
}

html body .gallery-toolbar .compare-toolbar-action {
  background: #982321 !important;
  color: #fff !important;
}

html[data-theme="dark"] body .gallery-toolbar .compare-toolbar-action {
  background: #c27470 !important;
  border-color: #c27470 !important;
  color: #191617 !important;
}

html[data-theme="dark"] body .compare-footer-actions a {
  border-color: #e8e2dc !important;
  background: #e8e2dc !important;
  color: #191617 !important;
}

html[data-theme="dark"] body .compare-footer-actions a:hover {
  border-color: #fff !important;
  background: #fff !important;
  color: #191617 !important;
}

html[data-theme="dark"] .availability-filter,
html[data-theme="dark"] .collector-ledger,
html[data-theme="dark"] [style*="border-color: #c9c5ba"],
html[data-theme="dark"] [style*="border-color:#c9c5ba"],
html[data-theme="dark"] [style*="border-color: #d5d2c8"],
html[data-theme="dark"] [style*="border-color:#d5d2c8"] {
  border-color: var(--theme-line) !important;
}

html[data-theme="dark"] .study-nav {
  background: rgba(12, 13, 15, .93);
}

html[data-theme="dark"] .intro-copy,
html[data-theme="dark"] .tab,
html[data-theme="dark"] .study-copy p,
html[data-theme="dark"] .timeline-note {
  color: var(--theme-muted);
}

html[data-theme="dark"] .stage::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, .035), transparent 42%);
}

@media (max-width: 540px) {
  .theme-toggle {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
  }

  .back-to-top {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 54px) !important;
    width: 44px;
    height: 44px;
  }

  body.has-shortlist-tray .theme-toggle {
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 70px);
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .back-to-top {
    right: calc(max(12px, env(safe-area-inset-right)) + 54px) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  x-dc,
  .theme-toggle {
    transition: none;
  }
}