/* Synapse lesson. All rules scoped under .snp-* */
.snp-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.snp-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 330px; }
.snp-t { fill: var(--dim); font: 600 13px var(--sans); }

/* 0. Cajal */
.snp-cajal { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden; }
.snp-cajal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform-origin: 40% 70%; animation: snpZoom 9s ease-out both; }
@keyframes snpZoom { from { transform: scale(1); } to { transform: scale(1.35); } }

/* cells */
.snp-svg { width: 100%; max-width: 360px; display: block; overflow: visible; }
.snp-br { fill: none; stroke: var(--violet-bright); stroke-width: 4; stroke-linecap: round; }
.snp-wire { fill: none; stroke: var(--violet-bright); stroke-width: 5; stroke-linecap: round; }
.snp-body { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 2; transition: fill .3s, opacity .3s; }
.snp-body.on { fill: var(--gold); stroke: var(--gold); filter: drop-shadow(0 0 6px rgba(252,192,80,.9)); }
.snp-body.stir { animation: snpStir .5s ease-in-out 2; }
@keyframes snpStir { 50% { fill: #9C83F0; } }
.snp-cell.dark { opacity: .45; }
.snp-bulb { fill: var(--violet-deep); stroke: var(--violet-bright); stroke-width: 2; transition: stroke .3s; }
.snp-bulb.on { stroke: var(--gold); }
.snp-pack { fill: var(--gold); }
.snp-pad { fill: rgba(169,155,255,.35); stroke: var(--violet-bright); stroke-width: 2; transition: fill .3s; }
.snp-padg.on .snp-pad { fill: rgba(252,192,80,.45); stroke: var(--gold); }
.snp-dock { fill: var(--dim); transition: fill .2s; }
.snp-dock.on { fill: var(--gold); }
.snp-padg { transform-box: fill-box; transform-origin: center; }
.snp-padg.grow { animation: snpGrow .5s ease-out; }
@keyframes snpGrow { 0% { transform: scale(.7); opacity: .4; } 100% { transform: none; opacity: 1; } }
.snp-spark { fill: #fff; filter: drop-shadow(0 0 5px var(--gold)); }
.snp-spark.fizz { animation: snpFizz .38s steps(2) both; }
@keyframes snpFizz { 0% { opacity: 1; } 50% { opacity: .2; } 75% { opacity: .9; } 100% { opacity: 0; } }
.snp-speck { fill: var(--gold); transition: opacity .6s; }
.snp-speck.gone { opacity: 0; }
.snp-hit { fill: transparent; cursor: pointer; }
.snp-ring { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 100; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
.snp-ruler { opacity: 0; transition: opacity .4s; }
.snp-ruler path { fill: none; stroke: var(--gold); stroke-width: 2; }
.snp-ruler text { fill: var(--gold); font: 800 14px var(--sans); }
.snp-svg.ruled .snp-ruler { opacity: 1; }

/* 4. one way */
.snp-ow { padding-bottom: 54px; }
.snp-pkover { position: absolute; inset: 0; }
.choices.snp-owpk { position: absolute; inset: 0; display: block; }
.snp-owpk .choice { position: absolute; bottom: 0; width: 136px; min-height: 44px; padding: 8px 10px; font-size: 14px; justify-content: center; }
.snp-owpk .choice:nth-child(1) { left: 0; }
.snp-owpk .choice:nth-child(2) { right: 0; }

/* 7. two pairs */
.choices.snp-pairs { width: 100%; gap: 8px; }
.snp-pairs .choice { padding: 6px 8px; justify-content: center; }
.snp-pair { width: 100%; max-width: 320px; display: block; }

.snp-pic img { display: block; max-height: 200px; max-width: 100%; }

@media (max-height: 700px) {
  .snp-pic img { max-height: 160px; }
}