/* Long-term potentiation lesson. All rules scoped under .ltp-* */
.ltp-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ltp-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 330px; }

/* the rig */
.ltp-rig { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.ltp-cells { width: 100%; height: auto; display: block; cursor: pointer; overflow: visible; }
.ltp-wire { stroke: var(--dim); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.ltp-tip { fill: var(--gold); }
.ltp-fiber { stroke: var(--violet-bright); stroke-width: 3; fill: none; opacity: .7; }
.ltp-den { stroke: var(--violet-bright); stroke-width: 4; stroke-linecap: round; fill: none; }
.ltp-body { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 2; transition: fill .2s, filter .2s; }
.ltp-nuc { fill: var(--violet-deep); }
.ltp-cell.on .ltp-body { fill: var(--gold); filter: drop-shadow(0 0 calc(6px * var(--k, 1)) rgba(252,192,80,.9)); }
.ltp-cell.on .ltp-den { stroke: var(--gold); }
.ltp-cell.fast .ltp-body { animation: ltpFlick .09s steps(2) infinite; }
@keyframes ltpFlick { 50% { fill: var(--violet); } }
.ltp-knob { fill: var(--violet-bright); transition: r .4s; }
.ltp-jglow { fill: var(--gold); opacity: 0; transition: opacity .2s, r .4s; }
.ltp-junc.on .ltp-jglow { opacity: .35; }
.ltp-junc.strong .ltp-knob { r: 10; fill: var(--gold); }
.ltp-junc.strong .ltp-jglow { r: 18; opacity: .22; }
.ltp-junc.strong.on .ltp-jglow { opacity: .5; }
.ltp-pulse { fill: var(--gold); opacity: 0; filter: drop-shadow(0 0 4px rgba(252,192,80,.9)); }
.ltp-lb { font: 600 13px var(--sans); fill: var(--dim); }
.ltp-jl { fill: var(--faint); }
.ltp-send { cursor: pointer; }

.ltp-tr { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px 4px 2px; }
.ltp-trl { position: absolute; left: 12px; top: 6px; font: 600 12.5px var(--sans); color: var(--dim); }
.ltp-trs { width: 100%; height: auto; display: block; }
.ltp-base { stroke: var(--line-strong); stroke-width: 1.5; }
.ltp-was, .ltp-wasl { opacity: 0; transition: opacity .3s; }
.ltp-was { stroke: var(--dim); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ltp-wasl { font: 600 14px var(--sans); fill: var(--dim); }
.show-was .ltp-was, .show-was .ltp-wasl { opacity: 1; }
.ltp-blip { fill: none; stroke: var(--violet-bright); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; animation: ltpDraw .35s ease-out both; stroke-dasharray: 200; }
.ltp-blip.big { stroke: var(--gold); }
@keyframes ltpDraw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
.ltp-comb line { stroke: var(--violet-bright); stroke-width: 1.2; opacity: .8; }

.ltp-clock { align-self: center; padding: 4px 14px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line-strong); }
.ltp-clock b { font: 700 15px var(--sans); color: var(--text); }
.ltp-clock.tick { animation: ltpTick .4s cubic-bezier(.2,.8,.2,1); }
@keyframes ltpTick { from { transform: scale(1.18); background: var(--violet-deep); } }

/* together */
.ltp-pair { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ltp-ps { width: 100%; height: auto; display: block; overflow: visible; }
.ltp-in circle { fill: var(--raised); stroke: var(--line-strong); stroke-width: 2; transition: fill .2s, stroke .2s; }
.ltp-in.on circle { stroke: var(--gold); fill: #2a2440; }
.ltp-ico { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ltp-line { fill: none; stroke: var(--violet-bright); stroke-linecap: round; transition: stroke-width .5s, stroke .5s; }
.ltp-lk { stroke-width: 7; }
.ltp-lc { stroke-width: 2; opacity: .8; }
.ltp-lc.strong { stroke-width: 7; stroke: var(--gold); opacity: 1; }
.ltp-dot { fill: var(--gold); opacity: 0; filter: drop-shadow(0 0 4px rgba(252,192,80,.9)); }
.ltp-ps .ltp-cell.weak .ltp-body { fill: #6c5bc0; }
.ltp-fire { font: 800 14px var(--sans); fill: var(--gold); opacity: 0; transition: opacity .15s; letter-spacing: .06em; text-transform: uppercase; }
.ltp-fire.on { opacity: 1; }

/* the pool */
.ltp-pools { display: flex; gap: 14px; justify-content: center; width: 100%; }
.ltp-pool { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; max-width: 160px; }
.ltp-pool svg { width: 100%; height: auto; display: block; }
.ltp-pool span { font: 600 13px var(--sans); color: var(--dim); text-align: center; }
.ltp-water { fill: #c9cde0; stroke: #8e93ad; stroke-width: 3; }
.ltp-plat { fill: none; stroke: #6b6f88; stroke-width: 2; stroke-dasharray: 3 3; }
.ltp-swim { fill: none; stroke: var(--violet-deep); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ltp-rat { fill: #fff; stroke: var(--violet-deep); stroke-width: 2; }

@media (max-height: 700px) {
  .ltp-rig { gap: 4px; }
  .ltp-pair { max-width: 310px; }
  .ltp-pool { max-width: 132px; }
}