/* 5-HT2A receptor lesson. All rules scoped under .hta-* */
.hta-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hta-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.hta-hero img { width: 280px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

.hta-lock { display: block; width: 100%; max-width: 340px; height: auto; overflow: visible; }
.hta-zone { fill: var(--faint); font: 600 13px var(--sans); }
.hta-mem circle { fill: rgba(169,155,255,.22); stroke: rgba(169,155,255,.45); stroke-width: 1; }
.hta-rec { fill: rgba(123,92,253,.55); stroke: var(--violet-bright); stroke-width: 2; }
.hta-lid { fill: var(--violet-bright); }
.hta-key { cursor: pointer; }
.hta-hit { fill: transparent; }
.hta-mol polygon, .hta-mol rect { stroke-width: 2.5; }
.hta-mol path { fill: none; stroke-width: 3; stroke-linecap: round; }
.hta-key.ser polygon { fill: rgba(63,214,154,.25); stroke: var(--mint); } .hta-key.ser path { stroke: var(--mint); }
.hta-key.lsd polygon { fill: rgba(252,192,80,.25); stroke: var(--gold); } .hta-key.lsd path { stroke: var(--gold); }
.hta-key.psi polygon { fill: rgba(255,138,180,.22); stroke: #FF8AB4; } .hta-key.psi path { stroke: #FF8AB4; }
.hta-key.ket rect { fill: rgba(200,200,215,.35); stroke: #C8C8D7; }
.hta-kl { fill: var(--dim); font: 600 13px var(--sans); text-anchor: middle; }
.hta-key.hta-in .hta-kl { opacity: 0; }
.hta-sig circle { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0; }
.hta-sig text { fill: var(--gold); font: 700 13px var(--sans); opacity: 0; transition: opacity .3s; }
.hta-lock.hta-on .hta-sig text { opacity: 1; }
.hta-lock.hta-on .hta-sig circle { opacity: .8; animation: htaPulse 1.2s ease-out 3; }
.hta-lock.hta-on .hta-sig circle:nth-child(2) { animation-delay: .2s; }
.hta-lock.hta-on .hta-sig circle:nth-child(3) { animation-delay: .4s; }
@keyframes htaPulse { 0% { opacity: .9; } 100% { opacity: .25; } }
.hta-clock { fill: var(--gold); font: 700 13px var(--sans); text-anchor: middle; opacity: 0; transition: opacity .4s; }
.hta-lock.hta-late .hta-clock { opacity: 1; }

@media (max-height: 700px) {
  .hta-lock { max-width: 300px; }
  .hta-hero img { max-height: 26vh; }
}
.hta-wash path { fill: none; stroke: rgba(120,190,255,.75); stroke-width: 3; stroke-linecap: round; }