:root {
  --slide-canvas: #ffffff;
  --slide-surface: #f6f6f6;
  --slide-surface-hover: #f1efff;
  --slide-text: #000000;
  --slide-text-muted: #333333;
  --slide-social-proof: #666666;
  --slide-border: rgba(0, 0, 0, 0.15);
  --slide-progress-track: #f1f1f1;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --slide-canvas: #1f1d33;
  --slide-surface: #2a2742;
  --slide-surface-hover: #353052;
  --slide-text: #ffffff;
  --slide-text-muted: #d2d2d6;
  --slide-social-proof: #ffffff;
  --slide-border: rgba(241, 238, 253, 0.35);
  --slide-progress-track: #353249;
}

body.deck-body {
  background: var(--slide-canvas);
  color: var(--slide-text);
}

.sl-welcome-social-proof {
  color: var(--slide-social-proof);
}

.swiper,
.swiper-wrapper,
.swiper-slide {
  background-color: var(--slide-canvas);
}

html[data-theme="dark"] body.deck-body,
html[data-theme="dark"] body.chatgpt-mode {
  background: var(--slide-canvas);
}

html[data-theme="dark"] .deck-header {
  background: transparent !important;
}

html[data-theme="dark"] [data-controller~="logo-switcher"] img {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .deck-progress > div,
html[data-theme="dark"] #slide-loading-indicator {
  background: var(--slide-progress-track) !important;
}

html[data-theme="dark"] .sl-title,
html[data-theme="dark"] .sl-title *,
html[data-theme="dark"] .sl-description,
html[data-theme="dark"] .sl-description *,
html[data-theme="dark"] .sl-feedback,
html[data-theme="dark"] .sl-feedback *,
html[data-theme="dark"] .sl-next-text,
html[data-theme="dark"] .sl-next-text * {
  color: var(--slide-text) !important;
  border-color: var(--slide-border) !important;
}

html[data-theme="dark"] .sl-description,
html[data-theme="dark"] .sl-description *,
html[data-theme="dark"] .sl-feedback,
html[data-theme="dark"] .sl-feedback *,
html[data-theme="dark"] .sl-next-text,
html[data-theme="dark"] .sl-next-text *,
html[data-theme="dark"] .sl-privacy-slide .sl-description,
html[data-theme="dark"] .sl-privacy-slide .sl-description * {
  color: var(--slide-text-muted) !important;
}

html[data-theme="dark"] .sl-description a,
html[data-theme="dark"] .sl-title a,
html[data-theme="dark"] .sl-statementend .sl-description a {
  color: #b9abff !important;
}

html[data-theme="dark"] .sl-description strong,
html[data-theme="dark"] .sl-welcome-supporting-text strong {
  color: var(--slide-text) !important;
}

html[data-theme="dark"] .sl-welcome-supporting-text,
html[data-theme="dark"] .sl-welcome-supporting-text * {
  color: var(--slide-text-muted) !important;
}

html[data-theme="dark"] .sl-description h3,
html[data-theme="dark"] .sl-opinion-btn {
  background: var(--slide-surface) !important;
  border-color: var(--slide-border) !important;
}

html[data-theme="dark"] .sl-opinion-btn,
html[data-theme="dark"] .sl-opinion-btn * {
  color: #f1eefd !important;
}

html[data-theme="dark"] .sl-opinion-btn:hover,
html[data-theme="dark"] .sl-opinion-btn:focus-visible,
html[data-theme="dark"] .sl-opinion-btn.sl-active,
html[data-theme="dark"] .sl-opinion-btn.active {
  background: var(--slide-surface-hover) !important;
  border-color: #8e79f0 !important;
}

html[data-theme="dark"] .sl-opinion-btn p > em {
  color: #f1eefd !important;
  background: #1f1d33 !important;
  border-color: #8e79f0 !important;
}

html[data-theme="dark"] .sl-input,
html[data-theme="dark"] .sl-choice-input,
html[data-theme="dark"] .sl-choice-other input {
  color: #f1eefd !important;
  background: transparent !important;
  border-color: #8e79f0 !important;
  caret-color: #b9abff;
}

html[data-theme="dark"] .sl-input::placeholder,
html[data-theme="dark"] .sl-choice-input::placeholder,
html[data-theme="dark"] .sl-choice-other input::placeholder {
  color: #aaa4bf !important;
  opacity: 1;
}

html[data-theme="dark"] .chatgpt-overlay-btn,
html[data-theme="dark"] .chatgpt-info-btn,
html[data-theme="dark"] .chatgpt-info-tooltip {
  color: var(--slide-text);
  background: var(--slide-surface);
  border-color: var(--slide-border);
}

html[data-theme="dark"] .chatgpt-info-tooltip__title,
html[data-theme="dark"] .chatgpt-info-tooltip__body {
  color: var(--slide-text-muted);
}

html[data-theme="dark"] .chatgpt-info-tooltip__link {
  color: #b9abff;
}

@media (max-width: 769px) {
  html[data-theme="dark"] #sl-fix-button::after {
    background: linear-gradient(180deg, rgba(31, 29, 51, 0) 0%, #1f1d33 100%) !important;
  }
}