.endocrine-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(132, 117, 83, 0.14), transparent 28rem),
    var(--color-surface);
}

.endocrine-atlas-hero {
  background:
    radial-gradient(circle at 86% 20%, rgba(132, 117, 83, 0.13), transparent 24rem),
    var(--color-surface);
}

body[data-page="endocrine"] .system-visual {
  background:
    linear-gradient(145deg, rgba(245, 241, 230, 0.94), rgba(232, 240, 238, 0.9)),
    var(--color-surface);
}

body[data-page="endocrine"] .system-airway {
  width: 5.5rem;
  height: 3.2rem;
  border-radius: 52% 48% 50% 50%;
  background: rgba(52, 99, 92, 0.34);
  border: 3px solid rgba(36, 79, 73, 0.5);
  transform: translate(-4.4rem, -0.5rem);
}

body[data-page="endocrine"] .system-branch {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 0.8rem solid rgba(151, 112, 91, 0.36);
  transform: translate(0.2rem, -0.7rem);
}

body[data-page="endocrine"] .system-alveoli {
  width: 4.4rem;
  height: 5.6rem;
  border-radius: 1.2rem 1.2rem 2.2rem 2.2rem;
  background:
    linear-gradient(
      to bottom,
      rgba(177, 146, 89, 0.46) 0 17%,
      rgba(226, 204, 143, 0.5) 17% 63%,
      rgba(118, 82, 74, 0.42) 63%
    );
  border: 3px solid rgba(93, 75, 60, 0.35);
  transform: translate(4.3rem, -0.4rem);
}

body[data-page="endocrine"] .system-focus {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(192, 122, 95, 0.58);
  box-shadow:
    1.8rem 0.8rem 0 -0.45rem rgba(45, 100, 91, 0.52),
    -1.2rem 1.7rem 0 -0.65rem rgba(190, 158, 84, 0.58);
  transform: translate(0.4rem, 2.3rem);
}

body[data-page="endocrine"] .system-number {
  background: rgba(132, 117, 83, 0.16);
  color: #5d5137;
}

body[data-page="endocrine"] .system-tab.is-visited,
body[data-page="endocrine"] .system-evidence.is-visited,
body[data-page="endocrine-terms"] .system-term-card[open] {
  border-color: rgba(132, 117, 83, 0.68);
}

@media (max-width: 480px) {
  body[data-page="endocrine"] .system-airway {
    transform: translate(-3.2rem, -0.5rem) scale(0.85);
  }

  body[data-page="endocrine"] .system-alveoli {
    transform: translate(3.2rem, -0.4rem) scale(0.85);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="endocrine"] .system-airway,
  body[data-page="endocrine"] .system-branch,
  body[data-page="endocrine"] .system-alveoli,
  body[data-page="endocrine"] .system-focus {
    transition: none;
  }
}