/* Antibody lesson. All rules scoped under .abd-* */

.abd-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.abd-sc > svg { display: block; width: 100%; height: auto; overflow: visible; }
.abd-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.abd-hero { width: min(80%, 320px); }
.abd-hero img { width: 100%; display: block; }
.abd-t { fill: var(--text); font: 600 14px var(--sans); text-anchor: middle; transition: opacity .3s; }
.abd-t.dim { fill: var(--dim); font-size: 13px; }
.abd-t.sm { font-size: 13px; }
.abd-t.start { text-anchor: start; }

.abd-knob { fill: var(--violet-bright); stroke: #0A0E1A; stroke-width: 1; stroke-linejoin: round; }
.abd-knob.tri { fill: var(--gold); }
.abd-knob.rnd { fill: #7FC8FF; }
.abd-knob.sq { fill: var(--mint); }
.abd-knob.fork { fill: #FB9679; }
.abd-coat { fill: #2A2F52; stroke: var(--violet-bright); stroke-width: 2; }
.abd-core { fill: rgba(169,155,255,.25); }
.abd-y { fill: none; stroke: #EAE3D7; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.abd-y.link { stroke-width: 2.6; }
.abd-y.mono { stroke: var(--gold); }
.abd-cup { fill: #3C3F66; stroke: var(--text); stroke-width: 1.5; stroke-linejoin: round; }
.abd-stalk { fill: #3C3F66; }
.abd-mem { fill: none; stroke: var(--violet-bright); stroke-width: 3; stroke-linecap: round; opacity: .7; }
.abd-in .abd-cup { stroke: #FF8A8A; stroke-width: 2.5; }

/* the parts */
.abd-big { fill: none; stroke: #EAE3D7; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.abd-parts .abd-cup.tip { fill: #EAE3D7; stroke: #EAE3D7; }
.abd-lead { stroke: var(--faint); stroke-width: 1.5; }

/* coat the spikes */
.abd-hit, .abd-hitr { fill: transparent; }
.abd-coatme .abd-sp { cursor: pointer; }
.abd-coatme .abd-sp:not(.done) .abd-knob { stroke: var(--gold); stroke-width: 2; animation: abd-pulse 1.2s ease-in-out 3; }
@keyframes abd-pulse { 50% { opacity: .55; } }

/* flag */
.abd-blob { fill: rgba(63,214,154,.16); stroke: var(--mint); stroke-width: 2.5; }
.abd-grip { stroke: var(--mint); stroke-width: 3; stroke-linecap: round; }
.abd-nuc { fill: rgba(63,214,154,.3); }
.abd-cq { cursor: pointer; transition: opacity .5s; }
.abd-cq.wrong .abd-coat { stroke: var(--red); }
.abd-cq.off { opacity: .35; }
.abd-ate .abd-cq.right { opacity: 0; }
.abd-y.out { stroke: #EAE3D7; }
.abd-jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.abd-jobs span { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 8px; text-align: center; font-size: 13px; color: var(--dim); line-height: 1.3; }
.abd-jobs b { display: block; font: 700 18px var(--serif); color: var(--gold); margin-bottom: 4px; }

/* B cells */
.abd-b { cursor: pointer; transition: opacity .35s; }
.abd-bcell { fill: rgba(169,155,255,.18); stroke: var(--violet-bright); stroke-width: 2; }
.abd-b.clone { animation: abd-in .35s ease-out both; pointer-events: none; }
.abd-grow .abd-b.off { opacity: 0; }
@keyframes abd-in { from { opacity: 0; } }
.abd-b.wrong .abd-bcell { stroke: var(--red); }
.abd-b.off { opacity: .3; }
.abd-b.right .abd-bcell { stroke: var(--gold); fill: rgba(252,192,80,.2); }
.abd-big-n { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 0; text-align: center; }
.abd-big-n b { font: 700 46px var(--serif); color: var(--gold); line-height: 1; }
.abd-big-n span { font-size: 14px; color: var(--dim); max-width: 260px; line-height: 1.35; }

/* medicine */
.abd-cancer { fill: rgba(216,85,95,.18); stroke: #D8555F; stroke-width: 2; }

@media (max-height: 700px) {
  .abd-hero { width: min(62%, 240px); }
  .abd-scene { max-height: 232px; }
  .abd-big-n { padding: 12px 0; }
}