/* Homepage dark theme: keep the studio and its proof preview readable as one surface. */
html.ls-dark-mode:has(.learnstack-home),
html.ls-dark-mode:has(.learnstack-home) body {
  background: #0b1320;
}

html.ls-dark-mode .learnstack-home {
  --ls-ink: #eef4fa;
  --ls-muted: #b4c0d2;
  --ls-soft: #91a1b8;
  --ls-paper: #0b1320;
  --ls-surface: #121d2d;
  --ls-line: rgba(180, 198, 222, 0.16);
  --ls-line-soft: rgba(180, 198, 222, 0.1);
  --ls-cyan: #58d6cc;
  --ls-cyan-soft: rgba(88, 214, 204, 0.14);
  --accent: var(--ls-cyan);
  --accent-strong: var(--ls-cyan);
  --text-main: var(--ls-ink);
  --text-muted: var(--ls-muted);
  --border: var(--ls-line);
  color-scheme: dark;
  background: var(--ls-paper);
  color: var(--ls-ink);
}

html.ls-dark-mode .learnstack-home > .relative.z-10,
html.ls-dark-mode .learnstack-home .homepage-section-frame,
html.ls-dark-mode .learnstack-home .final-cta-section {
  background: var(--ls-paper);
  color: var(--ls-ink);
}

html.ls-dark-mode .learnstack-home.learnstack-studio-home {
  --ls-studio-ink: #eef4fa;
  --ls-studio-muted: #b4c0d2;
  --ls-studio-paper: #0b1320;
  --ls-studio-line: rgba(180, 198, 222, 0.16);
  --ls-studio-cyan: #58d6cc;
  background: var(--ls-studio-paper);
  color: var(--ls-studio-ink);
}

html.ls-dark-mode .learnstack-home.learnstack-studio-home #philosophy.homepage-section-frame,
html.ls-dark-mode .learnstack-home.learnstack-studio-home #philosophy > .ls-studio-hero {
  background: var(--ls-studio-paper);
  color: var(--ls-studio-ink);
}

/* The original studio artwork is intentionally dimmed instead of replaced so its geometry remains intact. */
html.ls-dark-mode .learnstack-home .intro-studio-layers {
  background: #0b1320;
  filter: none;
}

html.ls-dark-mode .learnstack-home .intro-studio-layers.has-fallback {
  filter: brightness(0.3) saturate(0.74) contrast(1.12) !important;
}

html.ls-dark-mode .learnstack-home .intro-studio-layer-image {
  filter: brightness(0.3) saturate(0.74) contrast(1.12) !important;
}

html.ls-dark-mode .learnstack-home .ls-studio-light {
  background: rgba(8, 14, 24, 0.3);
}

html.ls-dark-mode .learnstack-home .ls-studio-logo,
html.ls-dark-mode .learnstack-home .ls-nav-logo-svg {
  content: url("./learnstack-wordmark-traced-dark.svg");
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.24));
}

html.ls-dark-mode .ls-intro-loader {
  --ls-intro-ink: #0b1320;
  --ls-intro-paper: #eef4fa;
  color: var(--ls-intro-paper);
}

html.ls-dark-mode .ls-intro-loader::before {
  background: var(--ls-intro-ink);
}

html.ls-dark-mode .ls-intro-loader::after {
  background: #0b1320;
}

html.ls-dark-mode .ls-intro-letter {
  animation-name: lsLetterStackDrop, lsDarkIntroLetterColor;
}

@keyframes lsDarkIntroLetterColor {
  0%,
  58%,
  86%,
  100% {
    color: #eef4fa;
  }
}

html.ls-dark-mode .ls-studio-copy h1 {
  color: var(--ls-studio-ink);
}

html.ls-dark-mode .ls-studio-copy > p {
  color: var(--ls-studio-muted);
}

html.ls-dark-mode .learnstack-home .ls-studio-cta,
html.ls-dark-mode .learnstack-home .ls-hero-primary,
html.ls-dark-mode .learnstack-home .ls-account-action,
html.ls-dark-mode .learnstack-home .ls-pro-payment,
html.ls-dark-mode .ls-account-modal .ls-account-action {
  border-color: #58d6cc;
  background: #58d6cc;
  color: #07171d;
}

html.ls-dark-mode .learnstack-home .ls-studio-cta:hover,
html.ls-dark-mode .learnstack-home .ls-studio-cta:focus-visible,
html.ls-dark-mode .learnstack-home .ls-hero-primary:hover,
html.ls-dark-mode .learnstack-home .ls-hero-primary:focus-visible,
html.ls-dark-mode .learnstack-home .ls-account-action:hover,
html.ls-dark-mode .learnstack-home .ls-account-action:focus-visible,
html.ls-dark-mode .learnstack-home .ls-pro-payment:hover,
html.ls-dark-mode .learnstack-home .ls-pro-payment:focus-visible,
html.ls-dark-mode .ls-account-modal .ls-account-action:hover,
html.ls-dark-mode .ls-account-modal .ls-account-action:focus-visible {
  border-color: #77e5db;
  background: #77e5db;
  color: #07171d;
}

html.ls-dark-mode .learnstack-home .ls-studio-cta:focus-visible,
html.ls-dark-mode .learnstack-home .ls-hero-primary:focus-visible,
html.ls-dark-mode .learnstack-home .ls-account-action:focus-visible,
html.ls-dark-mode .learnstack-home .ls-pro-payment:focus-visible,
html.ls-dark-mode .ls-account-modal .ls-account-action:focus-visible {
  outline-color: rgba(88, 214, 204, 0.46);
}

html.ls-dark-mode .learnstack-home .ls-hero-secondary,
html.ls-dark-mode .learnstack-home .ls-teacher-payment,
html.ls-dark-mode .ls-account-modal .ls-account-secondary {
  border-color: var(--ls-line);
  background: var(--ls-surface);
  color: var(--ls-ink);
}

html.ls-dark-mode .learnstack-home .ls-hero-secondary:hover,
html.ls-dark-mode .learnstack-home .ls-hero-secondary:focus-visible,
html.ls-dark-mode .learnstack-home .ls-teacher-payment:hover,
html.ls-dark-mode .learnstack-home .ls-teacher-payment:focus-visible,
html.ls-dark-mode .ls-account-modal .ls-account-secondary:hover,
html.ls-dark-mode .ls-account-modal .ls-account-secondary:focus-visible {
  border-color: rgba(88, 214, 204, 0.5);
  background: #1a2940;
  color: #eef4fa;
}

/* The proof card has a separate hard-coded light palette in the studio stylesheet. */
html.ls-dark-mode .learnstack-home .ls-coded-proof-card {
  --ls-proof-paper: #111b2a;
  --ls-proof-surface: #17263a;
  --ls-proof-line: rgba(180, 198, 222, 0.24);
  --ls-proof-ink: #eef4fa;
  --ls-proof-muted: #a4b2c6;
  border-color: rgba(255, 112, 124, 0.62);
  background: var(--ls-proof-paper);
  box-shadow: 0 34px 68px rgba(0, 0, 0, 0.32), 0 7px 18px rgba(0, 0, 0, 0.18);
  color: var(--ls-proof-ink);
}

html.ls-dark-mode .learnstack-home .ls-coded-proof-close {
  background: rgba(255, 112, 124, 0.16);
  color: #ff9ea8;
}

html.ls-dark-mode .learnstack-home .ls-coded-proof-subject {
  border-color: var(--ls-proof-line);
  background: #1a2940;
  color: var(--ls-proof-ink);
}

html.ls-dark-mode .learnstack-home .ls-coded-proof-difficulty {
  background: #2cbfae;
  color: #07171d;
}

html.ls-dark-mode .learnstack-home .ls-coded-proof-incorrect {
  background: #aa303f;
  color: #fff1f2;
}

html.ls-dark-mode .learnstack-home .ls-coded-proof-question {
  color: var(--ls-proof-ink);
}

html.ls-dark-mode .learnstack-home .ls-coded-proof-similar {
  border-color: var(--ls-proof-line);
  background: var(--ls-proof-surface);
  color: var(--ls-proof-ink);
}

html.ls-dark-mode .learnstack-home .ls-coded-proof-choice {
  border-color: var(--ls-proof-line);
  background: var(--ls-proof-surface);
  color: var(--ls-proof-muted);
}

html.ls-dark-mode .learnstack-home .ls-coded-proof-choice.is-wrong {
  border-color: #ff6672;
  background: rgba(217, 80, 91, 0.16);
  color: #ffd9dc;
}

html.ls-dark-mode .learnstack-home .ls-coded-proof-choice.is-correct {
  border-color: #39d978;
  background: rgba(57, 217, 120, 0.14);
  color: #e2ffec;
}

html.ls-dark-mode .learnstack-home .ls-coded-proof-answer {
  border-color: var(--ls-proof-line);
  background: var(--ls-proof-surface);
  color: var(--ls-proof-ink);
}

html.ls-dark-mode .learnstack-home .ls-coded-proof-copy strong,
html.ls-dark-mode .learnstack-home .ls-coded-proof-references strong {
  color: var(--ls-proof-ink);
}

html.ls-dark-mode .learnstack-home .ls-coded-proof-copy p,
html.ls-dark-mode .learnstack-home .ls-coded-proof-references p {
  color: var(--ls-proof-muted);
}

html.ls-dark-mode .learnstack-home .ls-coded-proof-references {
  border-top-color: var(--ls-proof-line);
}

html.ls-dark-mode .learnstack-home .ls-coded-proof-references strong::before {
  border-color: var(--ls-proof-ink);
  box-shadow: inset 0.23rem 0 0 var(--ls-proof-surface), inset 0.31rem 0 0 var(--ls-proof-ink);
}

html.ls-dark-mode .learnstack-home .ls-product-visual:not(.ls-coded-proof-card) {
  border-color: var(--ls-line);
  background: var(--ls-surface);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.24);
}

html.ls-dark-mode .learnstack-home .ls-product-visual-image:not(.ls-coded-proof-card) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html.ls-dark-mode .learnstack-home .ls-teacher-section {
  background: var(--ls-surface);
}

html.ls-dark-mode .learnstack-home .ls-plan-card,
html.ls-dark-mode .learnstack-home .ls-account-card {
  border-color: var(--ls-line);
  background: #111b2a;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22);
}

html.ls-dark-mode .learnstack-home .ls-plan-card-featured {
  border-color: rgba(88, 214, 204, 0.38);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
}

html.ls-dark-mode .learnstack-home .ls-account-benefits li {
  border-color: var(--ls-line-soft);
  background: #17263a;
}

html.ls-dark-mode .learnstack-home .ls-privacy-footer {
  border-top-color: var(--ls-line-soft);
}

html.ls-dark-mode .learnstack-home .ls-privacy-footer a {
  color: var(--ls-ink);
}

html.ls-dark-mode .ls-site-menu {
  color: #eef4fa;
}

html.ls-dark-mode .ls-site-menu-button {
  background: transparent;
  color: inherit;
}

html.ls-dark-mode .ls-site-menu-button:hover,
html.ls-dark-mode .ls-site-menu-button:focus-visible {
  color: #58d6cc;
}

html.ls-dark-mode .ls-site-menu-button:focus-visible {
  outline-color: rgba(88, 214, 204, 0.5);
}

html.ls-dark-mode .ls-site-menu-panel {
  border-color: rgba(180, 198, 222, 0.18);
  background: rgba(18, 29, 45, 0.98);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
}

html.ls-dark-mode .ls-site-menu-title {
  color: #91a1b8;
}

html.ls-dark-mode .ls-site-menu-item {
  color: #eef4fa;
}

html.ls-dark-mode .ls-site-menu-item:hover,
html.ls-dark-mode .ls-site-menu-item:focus-visible {
  background: #1a2940;
  color: #58d6cc;
}

html.ls-dark-mode .ls-account-modal {
  background: rgba(2, 7, 14, 0.72);
}

html.ls-dark-mode .ls-account-modal-panel {
  border-color: rgba(180, 198, 222, 0.2);
  background: #111b2a;
  box-shadow: 0 28px 78px rgba(0, 0, 0, 0.46);
}

html.ls-dark-mode .ls-account-modal-panel h2 {
  color: #eef4fa;
}

html.ls-dark-mode .ls-account-modal-panel > p:not(.ls-account-kicker) {
  color: #b4c0d2;
}

html.ls-dark-mode .ls-account-input {
  border-color: rgba(180, 198, 222, 0.22);
  background: #17263a;
  color: #eef4fa;
}

html.ls-dark-mode .ls-account-input::placeholder {
  color: #91a1b8;
}

html.ls-dark-mode .ls-account-input[aria-invalid="true"] {
  border-color: rgba(255, 112, 124, 0.62);
  background: rgba(217, 80, 91, 0.12);
}

html.ls-dark-mode .ls-account-error {
  color: #ffb4be;
}

html.ls-dark-mode .ls-account-modal .ls-account-secondary {
  border-color: rgba(180, 198, 222, 0.22);
  background: #17263a;
  color: #eef4fa;
}

@media (prefers-contrast: more) {
  html.ls-dark-mode .learnstack-home {
    --ls-muted: #c7d1df;
    --ls-soft: #abb9cc;
    --ls-line: rgba(206, 220, 238, 0.26);
    --ls-line-soft: rgba(206, 220, 238, 0.18);
  }
}