/* Neurotransmitters lesson. All rules scoped under .ntm-* */
.ntm-sc { position: relative; width: 100%; display: flex; justify-content: center; }
.ntm-lab { font: 600 14px var(--sans); fill: var(--dim); text-anchor: middle; }
.ntm-sm { font-size: 13px; }

/* two hearts */
.ntm-hearts { width: 100%; max-width: 340px; height: auto; max-height: 38vh; overflow: visible; }
.ntm-zap rect { fill: var(--raised); stroke: var(--gold); stroke-width: 2; }
.ntm-zap text { font: 700 13px var(--sans); fill: var(--gold); text-anchor: middle; }
.ntm-zap.on rect { fill: var(--gold); } .ntm-zap.on text { fill: #2A1C00; }
.ntm-nerve { fill: none; stroke: #E9DCC0; stroke-width: 3.5; stroke-linecap: round; }
.ntm-spk { fill: #fff; filter: drop-shadow(0 0 4px var(--gold)); }
.ntm-dish { fill: rgba(234, 227, 215, .06); stroke: rgba(234, 227, 215, .45); stroke-width: 2; }
.ntm-water { fill: rgba(111, 211, 255, .18); }
.ntm-hb { transform-box: fill-box; transform-origin: 50% 60%; animation: ntmBeat 1s ease-in-out infinite; }
.ntm-hb path:first-child { fill: #E0566A; stroke: #FF9AA8; stroke-width: 1; }
.ntm-shine { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2; stroke-linecap: round; }
.ntm-hb.slow { animation-duration: 2.4s; }
@keyframes ntmBeat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(.97); } }
.ntm-rate { font: 600 13px var(--sans); fill: var(--faint); text-anchor: middle; }
.ntm-rate.on { fill: var(--gold); font-weight: 800; }
.ntm-bulb { fill: var(--violet); }
.ntm-tube { fill: rgba(234, 227, 215, .25); stroke: rgba(234, 227, 215, .7); stroke-width: 1.2; }
.ntm-fluid { fill: #6FD3FF; }
.ntm-drop { fill: #6FD3FF; opacity: 0; }
.ntm-drop.on { opacity: 1; }

/* pictures */
.ntm-pic { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.ntm-pic img { width: 100%; max-width: 340px; max-height: 34vh; object-fit: contain; border-radius: 16px; }
.ntm-portrait img { width: auto; max-width: 240px; }
.ntm-pic figcaption { font: 500 12.5px var(--sans); color: var(--faint); }

/* one nerve cell, dosed */
.ntm-cell { width: 100%; max-width: 340px; height: auto; max-height: 40vh; overflow: visible; }
.ntm-den path { fill: none; stroke: var(--violet-bright); stroke-width: 6; stroke-linecap: round; }
.ntm-ax { fill: none; stroke: var(--violet-bright); stroke-width: 7; stroke-linecap: round; }
.ntm-soma { fill: #4A3A9A; stroke: var(--violet-bright); stroke-width: 3; }
.ntm-soma.fire { animation: ntmFire .3s ease-out; }
@keyframes ntmFire { 0% { fill: #FFF3CC; } 100% { fill: #4A3A9A; } }
.ntm-in { fill: var(--text); font-weight: 700; font-size: 13px; }
.ntm-axs { fill: #fff; opacity: 0; }
.ntm-axs.go { animation: ntmAx .3s linear; }
@keyframes ntmAx { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(110px); } }
.ntm-logb { stroke: var(--line-strong); stroke-width: 1.5; }
.ntm-log line { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.ntm-jar { cursor: pointer; }
.ntm-hit { fill: transparent; stroke: transparent; stroke-width: 2.5; }
.ntm-glass { fill: rgba(234, 227, 215, .08); stroke: rgba(234, 227, 215, .55); stroke-width: 2; }
.ntm-glu .ntm-mol, .ntm-glum { fill: var(--gold); }
.ntm-gaba .ntm-mol, .ntm-gabam { fill: #6FD3FF; }
.ntm-mol { transition: opacity .7s; }
.ntm-mol.fade { opacity: 0; }
.ntm-jl { font-weight: 700; fill: var(--text); }
.ntm-jar.locked { pointer-events: none; }
.ntm-jar.right .ntm-hit { stroke: var(--mint); fill: rgba(63, 214, 154, .08); }
.ntm-jar.wrong .ntm-hit { stroke: var(--red); fill: rgba(216, 85, 85, .08); }

/* the day */
.ntm-day { width: 100%; max-width: 340px; height: auto; max-height: 40vh; overflow: visible; }
.ntm-face > circle { fill: #F2C48A; }
.ntm-eye circle { fill: #2A1C00; }
.ntm-lid { fill: #E2AE70; }
.ntm-mouth { fill: none; stroke: #7A4A1A; stroke-width: 2.5; stroke-linecap: round; }
.ntm-clock { font: 800 20px var(--sans); fill: var(--text); text-anchor: middle; }
.ntm-mem { fill: #4A3A9A; stroke: var(--violet-bright); stroke-width: 2; }
.ntm-mem-l { fill: var(--text); font-size: 13px; font-weight: 700; }
.ntm-sock { fill: var(--violet-bright); }
.ntm-ad { fill: #C9B8FF; stroke: #fff; stroke-width: 1.2; }
.ntm-cf { fill: #B8773A; stroke: #FFE0B8; stroke-width: 1.2; transition: opacity .5s; }
.ntm-cf.fade { opacity: 0; }
.ntm-ls { text-anchor: start; }
.ntm-le { text-anchor: end; }
.ntm-soma.fire + .ntm-in { animation: ntmLab .3s ease-out; }
@keyframes ntmLab { 0% { fill: #2A1C00; } 100% { fill: var(--text); } }