/* 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-t { fill: var(--text); font: 600 14px var(--sans); text-anchor: middle; }
.ab-t.dim { fill: var(--dim); font-size: 13.5px; }
.ab-t.gold { fill: var(--gold); font-weight: 800; }
.ab-t.mint { fill: var(--mint); font-weight: 800; }

/* the gap between two nerve cells */
.ab-gapbox, .ab-linebox { width: min(100%, 360px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ab-gap, .ab-line { width: 100%; height: auto; display: block; overflow: visible; }
.ab-gap { cursor: pointer; }
.ab-mem { fill: rgba(169,155,255,.18); }
.ab-stalk { stroke: rgba(169,155,255,.7); stroke-width: 4; stroke-linecap: round; fill: none; }
.ab-knob { fill: var(--violet, #a99bff); }
.ab-knob.cut { animation: ab-cut .35s ease-out; }
@keyframes ab-cut { 0% { fill: #fff; transform-box: fill-box; transform-origin: center; transform: scale(1.8); } 100% { transform-box: fill-box; transform-origin: center; transform: scale(1); } }
.ab-pc { fill: var(--gold); opacity: 0; transition: opacity .25s; }
.ab-pc.on { opacity: .95; }
.ab-st .ab-pc.on { fill: #d9a43b; }
.ab-fp { fill: var(--gold); }
.ab-drain { stroke: var(--dim); stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke-width .25s; }
.ab-pl { opacity: 0; transition: opacity .3s; text-anchor: start; }
.ab-note { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }

/* age line */
.ab-ax { stroke: rgba(234,227,215,.35); stroke-width: 1.5; }
.ab-dotp { fill: var(--gold); }
.ab-dotm, .ab-lm, .ab-gapy, .ab-span { opacity: 0; transition: opacity .5s; }
.ab-dotm { fill: var(--mint); }
.ab-span { fill: rgba(252,192,80,.14); stroke: var(--gold); stroke-dasharray: 3 3; stroke-width: 1; }
.ab-gapy { font-size: 14px; font-weight: 800; }
.ab-line.shown .ab-dotm, .ab-line.shown .ab-lm, .ab-line.shown .ab-gapy, .ab-line.shown .ab-span { opacity: 1; }

/* 100 people */
.ab-grid { width: min(100%, 300px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ab-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 18px)); gap: 6px; }
.ab-dots i, .ab-cap i { display: block; aspect-ratio: 1; border-radius: 50%; background: rgba(169,155,255,.22); }
.ab-dots i.on, .ab-cap i.on { background: var(--gold); }
.ab-cap { display: flex; gap: 18px; font-size: 13px; font-weight: 700; color: var(--text); }
.ab-cap span { display: flex; align-items: center; gap: 6px; }
.ab-cap i { width: 12px; height: 12px; }

@media (max-height: 700px) {
  .ab-gapbox, .ab-linebox { width: min(100%, 330px); }
  .ab-dots { grid-template-columns: repeat(10, minmax(0, 14px)); gap: 5px; }
  .ab-t.dim { font-size: 13.5px; }
}