/* Lactate dehydrogenase lesson. All rules scoped under .ldh-* */

.ldh-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ldh-sc > svg { display: block; width: 100%; height: auto; max-width: 400px; overflow: visible; }
.ldh-hero { width: min(80%, 300px); }
.ldh-hero img { width: 100%; display: block; }
.ldh-note { font-size: 13px; color: var(--dim); text-align: center; }

.ldh-cap { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.ldh-lg .gt i { background: #F0955A; }

/* the dish */
.ldh-liquid { fill: rgba(150, 190, 230, .07); stroke: rgba(170, 200, 240, .3); stroke-width: 2; }
.ldh-mem { fill: rgba(140, 120, 255, .16); stroke: var(--violet-bright); stroke-width: 2; }
.ldh-nuc { fill: rgba(140, 120, 255, .35); }
.ldh-hit { fill: transparent; }
.ldh-e { fill: #F0955A; }
.ldh-cell .ldh-mem { transition: stroke-dasharray .3s, opacity .4s; }
.ldh-cell.torn .ldh-mem { stroke-dasharray: 30 12; opacity: .45; }
.ldh-cell.torn .ldh-nuc { opacity: .3; }
.ldh-dish.ldh-ask .ldh-cell:not(.torn) { cursor: pointer; }
.ldh-dish.ldh-ask .ldh-cell:not(.torn) .ldh-mem { stroke-dasharray: 5 3; stroke: #B7A8FF; }
.ldh-key { font-size: 13px; font-weight: 700; color: var(--dim); display: flex; align-items: center; gap: 6px; }
.ldh-key i { width: 10px; height: 10px; border-radius: 50%; background: #F0955A; display: inline-block; }
.ldh-sc > .gauge { width: 100%; }

/* the test wells */
.ldh-wells { display: flex; justify-content: center; gap: 26px; padding-top: 8px; }
.ldh-well { position: relative; width: 74px; height: 74px; border-radius: 50%; border: 2.5px solid rgba(200, 214, 240, .45); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .45); margin-bottom: 26px; }
.ldh-wl { position: absolute; inset: 5px; border-radius: 50%; background: rgb(255, 244, 214); }
.ldh-well small { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--dim); }

/* sealed death */
.ldh-cup { fill: none; stroke: rgba(200, 214, 240, .45); stroke-width: 2.5; }
.ldh-shrink { transform-box: fill-box; transform-origin: center; animation: ldhShrink 1.6s ease-in-out var(--d) both; }
@keyframes ldhShrink { from { transform: scale(1.25); } }

/* the tube */
.ldh-glass { fill: rgba(150, 30, 40, .28); stroke: rgba(230, 200, 210, .5); stroke-width: 2; }
.ldh-cap2 { fill: #6B7894; stroke: #8A96B0; stroke-width: 1.5; }
.ldh-rbc ellipse { fill: #D8454F; stroke: #F07A80; stroke-width: 1; transition: opacity .4s var(--d), transform .4s var(--d); transform-box: fill-box; transform-origin: center; }
.ldh-rbc .ldh-pop { opacity: 0; transition: opacity .3s var(--d); }
.ldh-tube.burst .ldh-rbc:nth-child(3n) ellipse, .ldh-tube.burst .ldh-rbc:nth-child(3n+1) ellipse { opacity: .15; transform: scale(1.3); }
.ldh-tube.burst .ldh-rbc:nth-child(3n) .ldh-pop, .ldh-tube.burst .ldh-rbc:nth-child(3n+1) .ldh-pop { opacity: 1; }

@media (max-height: 700px) {
  .ldh-hero { width: min(64%, 220px); }
  .ldh-sc { gap: 8px; }
  .ldh-sc > svg.ldh-dish { max-width: 300px; }
}