/* Shared decorative layer. Content and controls remain above the illustration. */
.anatomy-page {
  isolation: isolate;
  --muted: #354e53;
  --accent: #31534e;
  --anatomy-line-color: #9baea2;
}
.anatomy-background {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
}
.anatomy-background img,
.anatomy-background canvas {
  position: absolute;
  top: 106px;
  left: 75%;
  display: block;
  width: auto;
  height: calc(100vh - 160px);
  height: calc(100svh - 160px);
  max-width: none;
  opacity: .13;
  transform: translate3d(-50%, 0, 0);
}
.anatomy-motion .anatomy-background img,
.anatomy-motion .anatomy-background canvas {
  height: clamp(1200px, 180vh, 1900px);
  height: clamp(1200px, 180svh, 1900px);
  transform: translate3d(-50%, var(--anatomy-offset, 0px), 0);
}
.anatomy-home .anatomy-background img,
.anatomy-home .anatomy-background canvas { left: 75%; }
.anatomy-home .hero-copy { min-width: 0; }
@media (min-width: 981px) {
  .anatomy-home .hero-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
  .anatomy-home .hero-copy { grid-column: 2; grid-row: 1; }
  .anatomy-home .hero-photo { grid-column: 1; grid-row: 1; }
}
.anatomy-reading .anatomy-background img,
.anatomy-reading .anatomy-background canvas { opacity: .09; }
.anatomy-page main > .container,
.anatomy-page main > section > .container,
.anatomy-page main > section.container {
  position: relative;
  z-index: 2;
}
.anatomy-page > .top,
.anatomy-page > .footer {
  position: relative;
  z-index: 2;
}
@media (max-width: 980px) {
  .anatomy-home .anatomy-background img,
  .anatomy-home .anatomy-background canvas { left: 65%; }
}
@media (max-width: 760px) {
  .anatomy-background img,
  .anatomy-background canvas {
    top: 96px;
    left: 70%;
    opacity: .085;
  }
  .anatomy-home .anatomy-background img,
  .anatomy-home .anatomy-background canvas { left: 70%; }
  .anatomy-reading .anatomy-background img,
  .anatomy-reading .anatomy-background canvas { opacity: .065; }
  .anatomy-motion .anatomy-background img,
  .anatomy-motion .anatomy-background canvas {
    height: clamp(1050px, 160vh, 1450px);
    height: clamp(1050px, 160svh, 1450px);
  }
}
/* The source image remains a fallback. JS paints its original alpha contours
   once, in a midtone visible on both light and browser-forced dark surfaces.
   No CSS color filter, blend mode or mask is needed for this rendering. */
.anatomy-background canvas { display: none; }
.anatomy-canvas img { visibility: hidden; }
.anatomy-canvas canvas { display: block; opacity: .28; }
.anatomy-reading .anatomy-canvas canvas { opacity: .19; }
@media (prefers-color-scheme: dark) {
  .anatomy-page { --anatomy-line-color: #b7c9bf; }
}
@media (prefers-reduced-motion: reduce) {
  .anatomy-motion .anatomy-background img,
  .anatomy-motion .anatomy-background canvas {
    height: calc(100vh - 160px);
    height: calc(100svh - 160px);
    transform: translate3d(-50%, 0, 0);
  }
}
@media print {
  .anatomy-background { display: none; }
}