/* Apoptosis lesson. All rules scoped under .apo-* */
.apo-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.apo-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; min-height: 17px; }
.apo-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)); }
.apo-svg { display: block; width: 100%; height: auto; }
.apo-t { fill: var(--text); font: 700 13px var(--sans); text-anchor: middle; }
.apo-t.dim { fill: var(--dim); font-weight: 600; font-size: 12px; }
.apo-t.start { text-anchor: start; }
.apo-t.red { fill: #FF8A8A; font-size: 12px; font-weight: 800; }
.apo-t.gold { fill: var(--gold); font-size: 12px; }
.apo-t.violet { fill: var(--violet-bright); font-size: 12px; }
.apo-t.dmg { fill: #FF8A8A; font-size: 16px; font-weight: 800; pointer-events: none; }

/* cells */
.apo-body { fill: rgba(169,155,255,.16); stroke: var(--violet-bright); stroke-width: 2; }
.apo-nuc { fill: rgba(169,155,255,.4); }
.apo-cell.dying .apo-nuc { fill: #6B5FB0; }
.apo-bub { fill: rgba(63,214,154,.2); stroke: var(--mint); stroke-width: 2; }
.apo-bub.flag { stroke: var(--gold); stroke-dasharray: 2 3; stroke-width: 2.5; }
.apo-cell.swell .apo-body { fill: rgba(216,85,85,.14); stroke: #FF8A8A; }
.apo-body.torn { stroke-dasharray: 10 7; }
.apo-bit { fill: #FF8A8A; }
.apo-halo { fill: rgba(216,85,85,.22); opacity: 0; }
.apo-eater path { fill: rgba(252,192,80,.2); stroke: var(--gold); stroke-width: 2; }
.apo-eater circle { fill: rgba(252,192,80,.45); }
.apo-cell.nb .apo-body { fill: rgba(169,155,255,.08); stroke: rgba(169,155,255,.5); }
.apo-v { fill: #FF8A8A; }
.apo-tap { fill: transparent; cursor: pointer; }
.apo-tap.used { pointer-events: none; }

/* the hand */
.apo-hand, .apo-feet { max-height: 34vh; }
.apo-web { fill: rgba(169,155,255,.22); stroke: rgba(169,155,255,.5); stroke-width: 1.5; }
.apo-palm, .apo-ray { fill: rgba(169,155,255,.42); stroke: rgba(169,155,255,.42); }
.apo-ray { stroke-linecap: round; }
.apo-hit { fill: transparent; cursor: pointer; }
.apo-hand .apo-web { animation: apoPulse 1.6s ease-in-out 2; }
@keyframes apoPulse { 50% { fill: rgba(252,192,80,.28); } }

/* two ways to die */
.apo-steps2 { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.apo-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.apo-col span { font-size: 12.5px; font-weight: 700; color: var(--faint); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); transition: color .3s, border-color .3s; }
.apo-col span.on { color: var(--mint); border-color: var(--mint); }
.apo-col.red span.on { color: #FF8A8A; border-color: #FF8A8A; }
.apo-key { display: flex; gap: 14px; justify-content: center; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.apo-key span { display: inline-flex; align-items: center; gap: 6px; }
.apo-key svg { width: 14px; height: 14px; }
.apo-kx { color: #FF8A8A; font-size: 16px; }

/* skin and the rule-breaker */
.apo-cell.sk .apo-body { fill: rgba(169,155,255,.14); stroke-width: 1.5; }
.apo-cell.rogue .apo-body { fill: rgba(216,85,85,.3); stroke: #FF8A8A; }
.apo-cell.rogue .apo-nuc { fill: rgba(255,138,138,.55); }
.apo-cell.turn .apo-body { stroke: var(--mint); }
.apo-cell.shake { transform-box: fill-box; transform-origin: center; }

/* the drug */
.apo-switch rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.apo-switch .apo-t { font-size: 12px; }
.apo-switch.on rect { fill: rgba(216,85,85,.35); stroke: #FF8A8A; }
.apo-switch { transition: opacity .4s; }
.apo-bcl { fill: var(--gold); }
.apo-pill { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 1.5; }

@media (max-height: 700px) {
  .apo-hero img { max-height: 30vh; }
  .apo-col span { padding: 2px 8px; }
  .apo-two { max-height: 190px; }
}
.apo-worm circle { fill: rgba(169,155,255,.35); }
.apo-worm circle.g { fill: var(--gold); }
.apo-kg, .apo-kc { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.apo-kc { background: rgba(169,155,255,.5); }