/* Neurogenesis lesson. All rules scoped under .ngn-* */
.ngn-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* the stem cell */
.ngn-cells { width: 100%; max-width: 330px; display: block; overflow: visible; }
.ngn-wobble .ngn-a, .ngn-wobble .ngn-b { transform-origin: 160px 100px; animation: ngnWob 1.1s ease-in-out infinite alternate; }
@keyframes ngnWob { from { transform: scale(1, 1); } to { transform: scale(1.08, .94); } }
.ngn-arm { fill: none; stroke: #A99BFF; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--g, 0)); }
.ngn-axon { stroke-width: 4; }
.ngn-cl { font: 700 14px var(--sans); fill: var(--dim); text-anchor: middle; }
.ngn-hit { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; transform: translate(-50%, -50%); border-radius: 50%; border: 0; background: transparent; cursor: pointer; }

/* the quote */
.ngn-quote { margin: 0; display: flex; gap: 14px; align-items: center; width: 100%; max-width: 340px; }
.ngn-quote img { width: 110px; flex: none; border-radius: 12px; filter: grayscale(1); }
.ngn-quote blockquote { margin: 0; font: 600 19px/1.3 var(--serif); color: var(--text); }
.ngn-quote cite { display: block; margin-top: 8px; font: 600 12.5px/1.35 var(--sans); font-style: normal; color: var(--dim); }

/* the chart */
.ngn-ct { font: 700 12.5px var(--sans); color: var(--dim); align-self: flex-end; margin-right: 8px; }
.ngn-chart { width: 100%; max-width: 340px; display: block; overflow: visible; }
.ngn-axis { stroke: var(--line-strong); stroke-width: 2; }
.ngn-base { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ngn-dbl { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; }
.ngn-tk { font: 600 14px var(--sans); fill: var(--dim); text-anchor: middle; }
.ngn-yl { font: 600 13px var(--sans); fill: var(--faint); }
.ngn-air { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(245,192,78,.5)); }
.ngn-puff .ngn-pin { fill: #FF9A6B; animation: ngnPuff 1.5s cubic-bezier(.2,.9,.3,1.2) both; transform-box: fill-box; transform-origin: 50% 100%; }
.ngn-puff .ngn-flash { fill: #FFE7A8; opacity: .55; }
@keyframes ngnPuff { 0% { transform: scale(0); opacity: 0; } 18% { transform: scale(1); opacity: 1; } 65% { opacity: 1; } 100% { transform: translateY(-4px) scale(1.08); opacity: 0; } }
.ngn-flag line { stroke: var(--violet-bright); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ngn-flag text { font: 700 13px var(--sans); fill: var(--violet-bright); }
.ngn-made line { stroke: var(--mint); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ngn-made circle { fill: var(--mint); stroke: var(--bg); stroke-width: 2; }
.ngn-tip { min-height: 22px; font: 600 14px var(--sans); color: var(--dim); text-align: center; }
.ngn-tip b { color: var(--mint); }
.ngn-lvl { stroke: var(--mint); stroke-width: 3; stroke-dasharray: 7 5; }
.ngn-hit-dot { fill: none; stroke: var(--mint); stroke-width: 3; }
.ngn-life rect { fill: var(--violet-bright); opacity: .7; }

/* the man */
.ngn-man { display: flex; align-items: center; gap: 8px; align-self: flex-start; margin-left: 6px; margin-top: -4px; }
.ngn-man img { height: 54px; }
.ngn-man span { font: 600 12.5px/1.3 var(--sans); color: var(--dim); }

/* the argument */
.ngn-cards { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; }
.ngn-card { padding: 11px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.ngn-card b { display: block; font: 800 13px var(--sans); color: var(--gold); }
.ngn-card span { font: 600 15px/1.3 var(--sans); color: var(--text); }
.ngn-card.ngn-new b { color: var(--mint); }

.ngn-you img { display: block; width: 100%; max-width: 300px; max-height: 190px; object-fit: contain; }

@media (max-height: 700px) {
  .ngn-quote img { width: 90px; }
  .ngn-quote blockquote { font-size: 17px; }
  .ngn-man img { height: 44px; }
  .ngn-chart { max-width: 310px; }
}