/* Angiogenesis lesson. All rules scoped under .ang-* */
.ang-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ang-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; min-height: 17px; }
.ang-hero img { width: 280px; max-width: 100%; max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.ang-svg { display: block; width: 100%; height: auto; touch-action: none; border-radius: 14px; background: rgba(169,155,255,.05); }
.ang-t { font: 800 12px var(--sans); text-anchor: middle; }
.ang-t.gold { fill: var(--gold); }

.ang-c { fill: rgba(240,140,150,.45); transition: fill .5s; }
.ang-c.st { fill: #4A4640; }
.ang-v { fill: none; stroke: #E0474C; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; transition: opacity .6s; }
.ang-v.sp { stroke: #FF6A6E; stroke-width: 4.5; }
.ang-v.gone { opacity: 0; }
.ang-v.wither { opacity: .12; }
.ang-tu { fill: #C06AE0; stroke: rgba(10,14,26,.5); stroke-width: 1; transition: fill .5s; }
.ang-tu.st { fill: #4A4640; }
.ang-call circle { fill: none; stroke: var(--gold); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: angRing 1.6s ease-out infinite; }
.ang-call circle + circle { animation-delay: .8s; }
.ang-call text { paint-order: stroke; stroke: rgba(10,14,26,.8); stroke-width: 3px; }
.ang-call.off { opacity: 0; transition: opacity .4s; }
@keyframes angRing { from { transform: scale(.6); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }

.ang-key { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.ang-key span { display: inline-flex; align-items: center; gap: 6px; }
.ang-key i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.ang-kf { background: rgba(240,140,150,.7); }
.ang-ks { background: #5A554E; }
.ang-kt { background: #C06AE0; }
.ang-kv { width: 16px !important; height: 5px !important; border-radius: 3px !important; background: #E0474C; }
.ang-kfib { background: rgba(169,155,255,.35); border: 1.5px solid var(--violet-bright); }

/* the trial */
.ang-bars { width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.ang-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ang-row { display: grid; grid-template-columns: 128px 1fr 64px; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.ang-row i { height: 16px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.ang-row b { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--dim); transition: width 1s cubic-bezier(.3,.7,.3,1); }
.ang-bars.on .ang-row b { width: calc(var(--w) * 100%); }
.ang-row.gold b { background: var(--gold); }
.ang-row em { font-style: normal; font-family: var(--mono); font-size: 14px; text-align: right; }
.ang-row.gold em { color: var(--gold); }

/* muscle */
.ang-fib { fill: rgba(169,155,255,.18); stroke: var(--violet-bright); stroke-width: 1.5; }
.ang-cap { fill: #E0474C; transition: opacity .6s, r .6s; }
.ang-cap.new { opacity: 0; }
.ang-mus.trained .ang-cap.new { opacity: 1; }