/* 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; }

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