/* Amyloid beta lesson. All rules scoped under .ab-* */
.ab-hero { width: min(80%, 300px); margin: 0 auto; }
.ab-hero img { width: 100%; display: block; }
.ab-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ab-sc > svg { display: block; width: 100%; height: auto; overflow: visible; }
.ab-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.ab-t { fill: var(--text); font: 600 13px var(--sans); text-anchor: middle; }
.ab-t.dim { fill: var(--dim); font-size: 12px; }
.ab-t.gold { fill: var(--gold); }
.ab-t.start { text-anchor: start; }
.ab-t.end { text-anchor: end; }

/* the long protein across the skin */
.ab-skin { fill: rgba(169,155,255,.10); }
.ab-lip { fill: rgba(169,155,255,.35); }
.ab-str { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.ab-b.v { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 1.5; }
.ab-b.g { fill: var(--gold); stroke: var(--gold-deep); stroke-width: 1.5; }
.ab-gold { transition: transform .9s cubic-bezier(.3,.7,.3,1); }
.ab-cut line { stroke: var(--mint); stroke-width: 2; }
.ab-cut circle { fill: rgba(94,224,176,.2); stroke: var(--mint); stroke-width: 2; }
.ab-cn { font: 800 12px var(--sans); fill: var(--mint); }
.ab-chain.freed .ab-gold { transform: translate(-44px, -52px); }

/* a life: the gap above, the chart below */
.ab-life { width: min(100%, 360px); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ab-gap, .ab-ch { width: 100%; height: auto; display: block; overflow: visible; }
.ab-mem1 { fill: rgba(169,155,255,.18); }
.ab-pc { fill: var(--gold); opacity: 0; transition: opacity .25s; }
.ab-pc.on { opacity: .9; }
.ab-plq circle { fill: #c9922e; stroke: var(--gold); stroke-width: 1.5; }
.ab-drain { stroke: var(--dim); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ab-age { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); min-height: 16px; }
.ab-ax { stroke: rgba(234,227,215,.35); stroke-width: 1.5; }
.ab-pline { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.ab-mline { fill: none; stroke: var(--mint); stroke-width: 3; stroke-linecap: round; }
.ab-mghost { fill: none; stroke: var(--mint); stroke-width: 2; stroke-dasharray: 4 4; opacity: .5; }
.ab-op { fill: none; stroke: var(--gold); stroke-width: 1.6; opacity: .35; }
.ab-om { fill: none; stroke: var(--mint); stroke-width: 1.6; opacity: .3; }
.ab-mlab { fill: var(--mint); font-size: 12px; font-weight: 800; }
.ab-plab { fill: var(--gold); font-size: 12px; font-weight: 800; }
.ab-span { fill: rgba(252,192,80,.10); stroke: var(--gold); stroke-dasharray: 3 3; stroke-width: 1; opacity: 0; transition: opacity .4s; }

@media (max-height: 700px) {
  .ab-life { width: min(100%, 290px); }
  .ab-life .ab-t.dim, .ab-mlab, .ab-plab { font-size: 13.5px; }
}