/* Synaptic vesicle lesson. All rules scoped under .ves-* */
.ves-sc { position: relative; width: 100%; display: flex; justify-content: center; }
.ves-svg { width: 100%; max-width: 340px; height: auto; max-height: 36vh; overflow: visible; }
.ves-svg.ves-tall { max-height: 44vh; }
.ves-end { fill: #4A3A9A; stroke: var(--violet-bright); stroke-width: 2.5; }
.ves-spark { fill: #fff; opacity: 0; }
.ves-spark.go { animation: vesSpark .42s ease-in forwards; }
@keyframes vesSpark { 0% { opacity: 0; transform: translateY(-14px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(26px); } }
.ves-in { fill: rgba(120, 70, 0, .45); }
.ves-v.empty circle:first-child { fill: rgba(234, 227, 215, .18); stroke: var(--violet-bright); stroke-width: 1.5; }
.ves-v.empty .ves-in { opacity: 0; }
.ves-v circle:first-child { transition: fill .3s; }
.ves-dot { fill: var(--gold); transition: opacity .7s; }
.ves-dot.fade { opacity: 0; }
.ves-ca { fill: #6FD3FF; stroke: #fff; stroke-width: .8; }
.ves-l { stroke: #FFE08A; stroke-width: 2.5; stroke-linecap: round; fill: none; }
.ves-l.zip { stroke: #fff; }
.ves-l.cut { stroke: var(--faint); }
.ves-mus { transform-box: fill-box; transform-origin: 50% 0; }
.ves-mus.tw { animation: vesTwitch .45s ease-out; }
@keyframes vesTwitch { 30% { transform: scale(.94, .82); filter: brightness(1.25); } 100% { transform: none; } }
.ves-rec { fill: none; stroke: #7E2E44; stroke-width: 2.5; stroke-linecap: round; }
.ves-lab { font: 600 14px var(--sans); fill: var(--dim); text-anchor: middle; }
.ves-mus .ves-lab { fill: #5A1F30; font-weight: 700; }
.ves-lab-l { text-anchor: start; }
.ves-gap { text-anchor: end; }
.ves-base { stroke: var(--line-strong); stroke-width: 1.5; }
.ves-guide { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.ves-blips { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ves-bl { font: 800 14px var(--sans); fill: var(--gold); text-anchor: middle; }

/* the mist of toxin */
.ves-mist { position: absolute; left: 50%; top: 34%; width: 180px; height: 70px; margin-left: -90px; border-radius: 50%; background: radial-gradient(closest-side, rgba(169, 155, 255, .55), rgba(169, 155, 255, 0)); opacity: 0; transition: opacity .6s; pointer-events: none; }
.ves-mist.on { opacity: 1; }

/* which blip */
.ves-which { width: 100%; }
.ves-pk .choice { padding: 6px 12px; gap: 10px; }
.ves-pk .choice svg { flex: 1; min-width: 0; height: auto; max-height: 92px; }
.ves-pk .choice span { font: 800 17px var(--sans); min-width: 18px; order: -1; }
.ves-mini .ves-base { stroke-width: 1.5; }
.ves-mini .ves-guide { stroke: var(--line-strong); }
.ves-gn { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }

/* the vial */
.ves-vial { width: 100%; max-width: 250px; height: auto; max-height: 36vh; }
.ves-glass { fill: rgba(234, 227, 215, .06); stroke: rgba(234, 227, 215, .5); stroke-width: 2.5; }
.ves-plug { fill: #E9DCC0; }
.ves-food { fill: #C98C1B; opacity: .8; }
.ves-body { fill: #8A6A3A; }
.ves-eye { fill: #D85555; }
.ves-wing { fill: rgba(234, 227, 215, .55); }
.ves-th { fill: rgba(234, 227, 215, .1); stroke: rgba(234, 227, 215, .5); stroke-width: 2; }
.ves-hg, .ves-bulb { fill: #E8705A; }
.ves-temp { font: 800 15px var(--sans); fill: var(--text); text-anchor: middle; }
.ves-v.fresh { animation: vesFresh .8s ease-out; }
@keyframes vesFresh { from { opacity: 0; } to { opacity: 1; } }
.ves-svg.ves-zoom { max-height: 38vh; }
@media (max-height: 700px) { .ves-pk .choice svg { max-height: 78px; } .ves-gn { font-size: 15px; } }