/* Cell culture lesson. All rules scoped under .cul-* */
.cul-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cul-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.cul-hero img { width: 280px; max-width: 100%; max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.cul-photo img { width: 100%; max-height: 36vh; object-fit: cover; border-radius: 16px; display: block; }
.cul-svg { display: block; width: 100%; height: auto; }
.cul-t { fill: var(--text); font: 700 13px var(--sans); text-anchor: middle; }
.cul-t.dim { fill: var(--dim); font-weight: 600; font-size: 12.5px; }
.cul-t.gold { fill: var(--gold); }
.cul-t.red { fill: #FF8A8A; }
.cul-t.violet { fill: var(--violet-bright); }
.cul-t.big { font-size: 18px; fill: var(--dim); }
.cul-t.start { text-anchor: start; }
.cul-t.end { text-anchor: end; }

/* thermometer */
.cul-therm { max-height: 34vh; }
.cul-tube { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; }
.cul-merc, .cul-bulbm { fill: #FF8A8A; }
.cul-tick { stroke: var(--line-strong); stroke-width: 2; }
.cul-mark { stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 5 4; }

/* flask */
.cul-glass { fill: rgba(234,227,215,.05); stroke: var(--line-strong); stroke-width: 2.5; stroke-linejoin: round; }
.cul-broth { fill: rgba(236,96,150,.55); }
.cul-cap { fill: var(--violet-deep); }
.cul-cells ellipse { fill: rgba(169,155,255,.85); }
.cul-cloud { fill: rgba(234,227,215,.5); opacity: 0; }
.cul-bug { fill: #FF8A8A; }
.cul-flask .cul-cells ellipse { transition: fill .4s; }
.cul-mini.hela .cul-c { fill: rgba(79,179,255,.45); stroke: #4FB3FF; }

/* dish */
.cul-dish { fill: rgba(236,96,150,.1); stroke: var(--line-strong); stroke-width: 2; }
.cul-c { fill: rgba(169,155,255,.28); stroke: var(--violet-bright); stroke-width: 1.4; transition: fill .4s, stroke .4s; }
.cul-c.ca { fill: rgba(216,85,85,.3); stroke: #FF8A8A; }
.cul-c.up { fill: rgba(255,138,138,.5); }
.cul-count { font-size: 15px; font-weight: 700; color: var(--dim); }
.cul-count b { color: var(--text); }
.cul-dead circle { fill: rgba(216,85,85,.08); stroke: #FF8A8A; stroke-width: 1.5; stroke-dasharray: 3 3; }

/* body */
.cul-man circle, .cul-man path { fill: rgba(169,155,255,.14); stroke: rgba(169,155,255,.5); stroke-width: 2; }
.cul-man .lim { fill: none; stroke: rgba(169,155,255,.35); stroke-width: 14; stroke-linecap: round; }
.cul-tum { fill: rgba(216,85,85,.5); stroke: #FF8A8A; stroke-width: 2; }
.cul-obst line { stroke: rgba(255,138,138,.6); stroke-width: 1.5; }
.cul-obst circle { fill: #FF8A8A; }

.cul-stat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px; text-align: center; }
.cul-stat b { font: 700 54px var(--serif); color: var(--gold); line-height: 1; }
.cul-stat span { font-size: 15px; color: var(--dim); max-width: 280px; line-height: 1.4; }

@media (max-height: 700px) {
  .cul-hero img { max-height: 30vh; }
  .cul-photo img { max-height: 30vh; }
  .cul-stat { padding: 8px 12px; }
}