/* Heisenberg's Uncertainty Principle lesson. All rules scoped under .hup-* */
.hup-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hup-note { font-size: 12px; color: var(--faint); text-align: center; }
.hup-hero img { display: block; width: 300px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .35)); }
.hup-cv { --cap: 9999px; display: block; width: min(100%, calc(var(--cap) * var(--ar, 2))); height: auto; margin: 0 auto; }
.hup-bars { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.hup-atom { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto; }
.hup-nuc circle { fill: #FB9679; stroke: #FFD2C2; stroke-width: 1; }
.hup-nuc circle.n { fill: #8E8799; stroke: #C9C3D6; }
.hup-lab { fill: var(--dim); font: 700 14px var(--sans); text-anchor: middle; }

@media (max-height: 700px) {
  .hup-cv { --cap: 200px; }
  .hup-sc.hup-tr .hup-cv { --cap: 150px; }
  .hup-hero img { max-height: 150px; }
  .hup-atom { max-width: 230px; }
}