/* TRPV1 lesson. Everything scoped under .tv-*. */
.tv-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tv-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.tv-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)); }

.tv-nv { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 6px; }
.tv-svg { display: block; width: 100%; height: auto; overflow: visible; }
.tv-sig { margin: 0 6px; }
.tv-sig.cold.bad .gt i { background: #6FD3FF; }

.tv-tube { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.tv-bulb { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.tv-tk { fill: var(--dim); font: 600 13px var(--sans); text-anchor: end; }
.tv-tl { stroke: var(--line-strong); stroke-width: 1.5; }
.tv-read { fill: var(--text); font: 700 17px var(--mono); text-anchor: middle; }
.tv-out, .tv-in { fill: var(--faint); font: 600 13px var(--sans); text-anchor: middle; }
.tv-band { opacity: 0; transition: opacity .4s; }
.tv-band.on { opacity: 1; }
.tv-bk { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linejoin: round; }
.tv-bt { fill: var(--gold); font: 700 13px var(--sans); }
.cold .tv-bk { stroke: #6FD3FF; } .cold .tv-bt { fill: #6FD3FF; }

.tv-nerve { fill: rgba(216,101,127,.16); stroke: rgba(216,101,127,.5); stroke-width: 1.5; }
.tv-mem { fill: #8f2f48; stroke: #d8657f; stroke-width: 1.5; }
.tv-h { fill: #3a2a4a; stroke: var(--violet-bright); stroke-width: 1.5; transition: transform .35s cubic-bezier(.2,.8,.2,1), fill .3s, stroke .3s; }
.tv-g.open .tv-h.l { transform: translateX(-4px); }
.tv-g.open .tv-h.r { transform: translateX(4px); }
.heat .tv-g.open .tv-h { fill: #7a3b12; stroke: var(--gold); }
.cold .tv-g.open .tv-h { fill: #123d52; stroke: #6FD3FF; }
.tv-ion circle { fill: var(--gold); opacity: 0; }
.cold .tv-ion circle { fill: #BDEBFF; }
.tv-g.open .tv-ion circle { animation: tvIon 1s linear 4; }
.tv-g.open .tv-ion circle:nth-child(2) { animation-delay: .33s; }
.tv-g.open .tv-ion circle:nth-child(3) { animation-delay: .66s; }
@keyframes tvIon { 0% { opacity: 0; transform: translateY(-34px); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }
.tv-pulse circle { fill: var(--red); opacity: 0; }
.cold .tv-pulse circle { fill: #6FD3FF; }
.tv-svg.firing .tv-pulse circle { animation: tvPulse 1.2s ease-in 4; }
.tv-svg.firing .tv-pulse circle:nth-child(2) { animation-delay: .4s; }
.tv-svg.firing .tv-pulse circle:nth-child(3) { animation-delay: .8s; }
@keyframes tvPulse { 0% { opacity: 0; transform: translateY(-6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
.tv-mol path { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; }
.cold .tv-mol path { stroke: var(--mint); }
.tv-mol { opacity: 0; transform: translateY(-50px); transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.tv-svg.docked .tv-mol { opacity: 1; transform: none; }
.tv-svg.docked .tv-g:nth-child(odd) .tv-mol { transition-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  .tv-g.open .tv-ion circle, .tv-svg.firing .tv-pulse circle { animation: none; }
}
@media (max-height: 700px) {
  .tv-nv { max-width: 284px; }
  .tv-hero img { max-height: 26vh; }
}