/* Immunology lesson. All rules scoped under .imy-* */

.imy-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.imy-sc > svg { display: block; width: 100%; height: auto; overflow: visible; }
.imy-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.imy-hero { width: min(80%, 320px); }
.imy-hero img, .imy-pic img { width: 100%; display: block; }
.imy-pic { width: min(100%, 360px); transition: filter .4s; }
.imy-pic.ok { filter: drop-shadow(0 0 14px rgba(94,234,179,.35)); }
.imy-t { fill: var(--text); font: 600 14px var(--sans); text-anchor: middle; }
.imy-t.dim { fill: var(--dim); font-size: 13px; }
.imy-t.big { font-size: 16px; fill: var(--gold); }
.imy-t.start { text-anchor: start; }

/* the larva */
.imy-body { fill: rgba(169,155,255,.10); stroke: rgba(234,227,215,.55); stroke-width: 2.5; }
.imy-gut { fill: none; stroke: rgba(234,227,215,.22); stroke-width: 14; stroke-linecap: round; }
.imy-wc path { fill: var(--violet-bright); stroke: #0A0E1A; stroke-width: 1; }
.imy-tb { fill: #C98A4B; stroke: #F2C38B; stroke-width: 1.2; stroke-linejoin: round; }
.imy-thit { fill: transparent; }
.imy-thorn { cursor: pointer; }
.imy-ask .imy-tb { animation: imy-glow 1.2s ease-in-out 3; }
@keyframes imy-glow { 50% { fill: var(--gold); } }
.imy-morn { opacity: 0; transition: opacity .4s; }
.imy-night .imy-morn { opacity: 1; }

/* the question */
.imy-eat { fill: rgba(123,92,253,.18); stroke: var(--violet-bright); stroke-width: 2.5; }
.imy-me { fill: rgba(94,234,179,.12); stroke: var(--mint); stroke-width: 2; }
.imy-nu { fill: rgba(94,234,179,.3); }
.imy-germ rect { fill: rgba(251,150,121,.22); stroke: #FB9679; stroke-width: 2; }
.imy-ask1, .imy-ask2 { stroke: var(--dim); stroke-width: 2; stroke-dasharray: 4 5; fill: none; }

/* sort cards */
.imy-card { display: block; font: 700 17px var(--sans); color: var(--text); }
.imy-sub { display: block; margin-top: 6px; font-size: 14px; color: var(--dim); line-height: 1.35; }

/* the baby */
.imy-bb { width: min(62%, 240px); }
.imy-genes { width: min(100%, 300px); }
.imy-gbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; }
.imy-gbar i { flex: 1; }
.imy-gbar .m { background: var(--violet-bright); }
.imy-gbar .d { background: var(--gold); }
.imy-glab { display: flex; justify-content: space-between; margin-top: 6px; font: 600 13px var(--sans); color: var(--dim); }

@media (max-height: 700px) {
  .imy-hero { width: min(62%, 240px); }
  .imy-larva { max-height: 260px; }
  .imy-pic { width: min(86%, 300px); }
  .imy-bb { width: min(50%, 180px); }
}

/* Medawar's mice */
.imy-t.sm { font-size: 12.5px; }
.imy-lab { max-width: 360px; }
.imy-trk { fill: var(--raised); }
.imy-win { fill: rgba(169,155,255,.55); transition: fill .4s; }
.imy-closed .imy-win { fill: rgba(169,155,255,.18); }
.imy-wl { fill: var(--violet-bright); transition: fill .4s; }
.imy-closed .imy-wl { fill: var(--faint); }
.imy-mk { fill: var(--gold); stroke: #0A0E1A; stroke-width: 2; transition: cx .4s; }
.imy-subs { transition: transform .4s; }
.imy-tail { fill: none; stroke: #F4A6B8; stroke-width: 3; stroke-linecap: round; }
.imy-don { cursor: pointer; }
.imy-hit { fill: transparent; stroke: transparent; stroke-width: 2; transition: stroke .3s; }
.imy-ask .imy-hit { stroke: var(--gold); stroke-dasharray: 5 5; }
.imy-don.imy-chosen .imy-hit { stroke: var(--gold); }
.imy-solo .imy-don:not(.imy-chosen) { opacity: .35; }
.imy-list rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; transition: stroke .3s; }
.imy-list.grew rect { stroke: var(--gold); }
.imy-lt { font-size: 14px; }
.imy-add { fill: var(--gold); }
.imy-dot { stroke: #0A0E1A; stroke-width: 1; transition: opacity .35s, fill .3s; }
.imy-dot.bad { fill: #FF6B6B; }
.imy-dot.gone { opacity: 0; }
.imy-pt { transition: transform .9s ease-in, opacity .9s; }
.imy-pt rect { stroke: #0A0E1A; stroke-width: 1; transition: fill .4s; }
.imy-pt.kept rect { stroke: var(--mint); stroke-width: 2; }
.imy-pt.rej rect { fill: #7A2F2F; }
.imy-pt.rej { transform: translate(0, 34px); opacity: 0; transition-delay: .4s; }

/* peanut */
.imy-pea { display: flex; gap: 18px; justify-content: center; width: 100%; }
.imy-grp { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.imy-gd { display: grid; grid-template-columns: repeat(10, 11px); gap: 3px; }
.imy-gd i { width: 11px; height: 11px; border-radius: 2px; background: var(--raised); transition: background .2s; }
.imy-gd i.al { background: #FF6B6B; }
.imy-grp b { font-size: 13px; color: var(--text); }
.imy-grp em { font: 600 13px var(--mono); font-style: normal; color: #FF8A8A; min-height: 18px; }