/* Pituitary Gland lesson. All rules scoped under .pit-* */
.pit-stage { flex: none; width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pit-head { display: block; flex: none; width: 100%; aspect-ratio: 300 / 200; height: auto; overflow: visible; }
.pit-head.pit-small { width: 74%; }
.pit-skin { fill: rgba(255,214,190,.12); stroke: rgba(255,214,190,.3); stroke-width: 2; }
.pit-brain { fill: rgba(240,150,200,.2); stroke: rgba(240,150,200,.45); stroke-width: 1.5; }
.pit-lb { font: 700 15px var(--sans); fill: var(--dim); }
.pit-bone { fill: none; stroke: #EADFC8; stroke-width: 5; stroke-linecap: round; }
.pit-stalk { stroke: rgba(240,150,200,.6); stroke-width: 3; }
.pit-drip { fill: none; stroke: none; }
.pit-head.pit-s-trail .pit-drip { stroke: rgba(155,216,107,.75); stroke-width: 6; stroke-linecap: round; }
.pit-hit { fill: transparent; }
.pit-bean { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(150,120,255,.8)); }
.pit-slime { fill: #9BD86B; stroke: #5E9E3A; stroke-width: 1.5; }
.pit-head.pit-s-dripped .pit-slime { animation: pitDrip .6s ease-in forwards; }
@keyframes pitDrip { to { translate: 0 22px; opacity: 0; } }
.pit-lbean { opacity: 0; transition: opacity .4s; }
.pit-head.pit-s-named .pit-lbean { opacity: 1; fill: var(--violet-bright); }
.pit-head.pit-s-low .pit-lbean { opacity: 0; }
.pit-hypg { display: none; }
.pit-head.pit-s-boss .pit-hypg { display: inline; }
.pit-hyp { fill: var(--gold); filter: drop-shadow(0 0 5px rgba(252,192,80,.9)); }
.pit-hypg text { fill: var(--gold); }
.pit-gh { display: none; }
.pit-head.pit-s-low .pit-gh, .pit-head.pit-s-dose .pit-gh { display: inline; }
.pit-gh circle { fill: var(--gold); opacity: .9; transition: opacity .3s; }
.pit-head.pit-s-low .pit-gh circle:not(:first-of-type) { opacity: 0; }
.pit-head.pit-s-dose .pit-gh circle { opacity: .9; animation: pitPop .4s ease-out backwards; }
.pit-head.pit-s-dose .pit-gh circle:nth-of-type(2) { animation-delay: .1s; }
.pit-head.pit-s-dose .pit-gh circle:nth-of-type(3) { animation-delay: .2s; }
.pit-head.pit-s-dose .pit-gh circle:nth-of-type(4) { animation-delay: .3s; }
.pit-head.pit-s-dose .pit-gh circle:nth-of-type(5) { animation-delay: .4s; }
.pit-gh text { fill: var(--gold); }
@keyframes pitPop { from { opacity: 0; scale: .2; } }

/* sheep brains */
.pit-big { display: flex; align-items: baseline; gap: 8px; }
.pit-big b { font: 800 30px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.pit-big span { font: 700 15px var(--sans); color: var(--dim); }

/* the rats */
.pit-rats { flex: none; width: 100%; max-width: 340px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pit-rat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pit-rbox { position: relative; width: 100%; height: 150px; display: flex; align-items: flex-end; justify-content: center; border-radius: 16px; background: rgba(255,255,255,.04); cursor: pointer; }
.pit-rbox img { height: 100%; width: auto; max-width: 100%; object-fit: contain; scale: .58; transform-origin: 50% 100%; transition: scale 1.4s cubic-bezier(.4,.1,.2,1), filter .4s; }
.pit-rats.pit-s-grown .pit-ra img { scale: 1; }
.pit-rn { font: 800 14px var(--sans); color: var(--text); }
.pit-rb.pit-s-out .pit-rn { color: var(--violet-bright); }
.pit-out { position: absolute; left: 50%; top: 40%; width: 16px; height: 12px; margin-left: -8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 8px rgba(150,120,255,.9); opacity: 0; pointer-events: none; }
.pit-rb.pit-s-out .pit-out { animation: pitOut .9s ease-out forwards; }
@keyframes pitOut { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -60px; scale: 1.4; } }
.pit-gls { display: flex; gap: 10px; visibility: hidden; }
.pit-rats.pit-s-glands .pit-gls { visibility: visible; }
.pit-gl { display: flex; align-items: center; gap: 4px; font: 700 12.5px var(--sans); color: var(--dim); }
.pit-gl i { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); transition: scale 1s cubic-bezier(.4,.1,.2,1), background .6s; }
.pit-rb.pit-s-shrunk .pit-gl i { scale: .4; background: var(--dim); }

/* the chain */
.pit-chain { flex: none; width: 100%; max-width: 300px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.pit-chain .slot .n { font-size: 12.5px; }
.pit-arrow { display: block; width: 0; height: 0; margin: 0 auto; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid var(--dim); }

/* Wadlow */
.pit-photo { position: relative; flex: none; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pit-photo img { display: block; height: 210px; width: auto; border-radius: 12px; transition: opacity .6s; }
.pit-photo .pit-man { position: absolute; left: 50%; top: 0; translate: -50% 0; opacity: 0; }
.pit-photo.pit-s-man .pit-man { opacity: 1; }
.pit-photo.pit-s-man .pit-kid { opacity: 0; }
.pit-photo figcaption { font: 700 13px var(--sans); color: var(--dim); }

@media (max-height: 700px) {
  .pit-rbox { height: 120px; }
  .pit-photo img { height: 170px; }
}