/* Synaptogenesis lesson. All rules scoped under .syg-* */
.syg-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.syg-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 320px; }
.syg-bg { fill: #141A2E; stroke: var(--line); }

/* the field */
.syg-field { width: 100%; max-width: 340px; display: block; touch-action: none; }
.syg-dends line { stroke: #8E80F0; stroke-width: 7; stroke-linecap: round; }
.syg-axon { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.syg-tip circle { fill: #FFE7A8; filter: drop-shadow(0 0 6px rgba(245,192,78,.9)); }
.syg-feel path { fill: none; stroke: #FFD27A; stroke-width: 2.5; stroke-linecap: round; }
.syg-feel { animation: sygFeel .9s ease-in-out infinite alternate; transform-origin: 0 0; }
@keyframes sygFeel { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.syg-tip.touch .syg-feel { animation: none; }
.syg-tip.touch circle { fill: #fff; }
.syg-pulse { fill: #fff; filter: drop-shadow(0 0 8px #fff); }
.syg-fizzle .syg-pulse { animation: sygFizz .6s ease-out forwards; }
@keyframes sygFizz { to { opacity: 0; r: 16; } }
.syg-lbl { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.syg-lbl-r, .syg-zl-n2 { text-anchor: end; }

/* up close */
.syg-zoom { width: 100%; max-width: 340px; display: block; }
.syg-zaxon { fill: none; stroke: var(--gold); stroke-width: 18; stroke-linecap: round; }
.syg-bulb { fill: #E9B54C; }
.syg-zdend { fill: #7C6CE8; transition: fill .5s, filter .5s; }
.syg-packs circle { fill: #FFF3D2; stroke: #B9822B; stroke-width: 1.5; opacity: 0; transform: translateY(-30px); transition: opacity .4s, transform .6s cubic-bezier(.2,.9,.3,1.2); }
.syg-built .syg-packs circle { opacity: 1; transform: none; }
.syg-built .syg-packs circle:nth-child(2) { transition-delay: .2s; } .syg-built .syg-packs circle:nth-child(3) { transition-delay: .4s; }
.syg-built .syg-packs circle:nth-child(4) { transition-delay: .6s; } .syg-built .syg-packs circle:nth-child(5) { transition-delay: .8s; }
.syg-built .syg-packs circle:nth-child(6) { transition-delay: 1s; } .syg-built .syg-packs circle:nth-child(7) { transition-delay: 1.2s; }
.syg-recs path { fill: none; stroke: #E6DEFF; stroke-width: 3.5; stroke-linejoin: round; opacity: 0; transition: opacity .5s 1.2s; }
.syg-built .syg-recs path { opacity: 1; }
.syg-zl { font: 700 13.5px var(--sans); fill: var(--dim); }
.syg-zl-p, .syg-zl-r { opacity: 0; transition: opacity .4s 1.6s; }
.syg-built .syg-zl-p, .syg-built .syg-zl-r { opacity: 1; }
.syg-lead { stroke: var(--dim); stroke-width: 1.5; }
.syg-zl-p { fill: #FFE7A8; }
.syg-zl-r { fill: #CFC6FF; }
.syg-zl-w { fill: #fff; }
.syg-dot { fill: #FFF3D2; animation: sygCross .9s ease-in var(--d) both; }
@keyframes sygCross { from { transform: translateY(0); opacity: 1; } to { transform: translateY(20px); opacity: .2; } }
.syg-lit .syg-zdend { fill: #A99BFF; filter: drop-shadow(0 0 12px rgba(169,155,255,.9)); }
.syg-lit .syg-recs path { stroke: #fff; }

/* three ages */
.syg-row { display: flex; gap: 10px; width: 100%; max-width: 330px; }
.syg-pc { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.syg-pc img { display: block; width: 100%; height: 170px; object-fit: contain; }
.syg-pc span { font: 700 14px var(--sans); color: var(--text); }
.syg-patch { display: block; width: 100%; height: 70px; border-radius: 10px; background: #1B2138; border: 1px solid var(--line); visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.syg-show .syg-patch { visibility: visible; opacity: 1; transform: none; }
.syg-patch circle { opacity: 0; transition: opacity .5s; }
.syg-show .syg-patch circle { opacity: 1; }
.syg-patch circle { fill: var(--gold); }

/* the mouse */
.syg-lab { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 340px; }
.syg-m { flex: 1; }
.syg-m img { display: block; width: 100%; max-height: 170px; object-fit: contain; }
.syg-reach .syg-m img { animation: sygReach .5s ease-in-out infinite alternate; }
@keyframes sygReach { to { transform: translateX(6px); } }
.syg-wc { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.syg-wl { font: 700 13px var(--sans); color: var(--dim); }
.syg-win { flex: none; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, #1E2540, #10142A); border: 3px solid #8FA3C8; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.syg-win svg { width: 136px; }
.syg-br { fill: none; stroke: #8E80F0; stroke-width: 9; stroke-linecap: round; }
.syg-sp0 line, .syg-sp1 line { stroke: #8E80F0; stroke-width: 4; stroke-linecap: round; }
.syg-sp0 circle { fill: #8E80F0; }
.syg-sp1 line { stroke: var(--gold); }
.syg-sp1 circle { fill: var(--gold); filter: drop-shadow(0 0 4px rgba(245,192,78,.9)); }
.syg-sp1 { animation: sygPop .4s cubic-bezier(.2,.9,.3,1.5) both; transform-box: fill-box; }
@keyframes sygPop { from { opacity: 0; } }
.syg-clock { position: absolute; bottom: 12px; font: 800 14px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }

@media (max-height: 700px) {
  .syg-win { width: 128px; height: 128px; }
  .syg-win svg { width: 116px; }
  .syg-m img { max-height: 140px; }
  .syg-pc img { height: 120px; }
  .syg-patch { height: 56px; }
}