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

/* the body, in millimeters */
.axn-body .axn-sil > * { fill: rgba(169,155,255,.10); stroke: rgba(169,155,255,.42); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.axn-body .axn-cord { fill: none; stroke: var(--violet-bright); stroke-linecap: round; opacity: .5; stroke-width: 12; }
.axn-body .axn-wire, .axn-body .axn-dead, .axn-body .axn-new { fill: none; stroke: var(--gold); stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; }
.axn-body .axn-wire { filter: drop-shadow(0 0 3px rgba(252,192,80,.55)); }
.axn-body .axn-soma { fill: var(--gold); filter: drop-shadow(0 0 4px rgba(252,192,80,.8)); }
.axn-body .axn-toe { fill: rgba(252,192,80,0); transition: fill .5s; }
.axn-body .axn-toe.on, .axn-body.axn-back .axn-toe { fill: rgba(252,192,80,.55); }
.axn-body .axn-spark { fill: #fff; filter: drop-shadow(0 0 4px var(--gold)); }
.axn-body .axn-lab { fill: var(--text); font-family: var(--sans); font-weight: 700; }
.axn-body .axn-dend { fill: none; stroke: var(--gold); stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; }

/* 0. the zoom */
.axn-zoom { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; touch-action: none; cursor: grab; overflow: hidden; }
.axn-zoom .axn-body { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.axn-z .axn-dead, .axn-z .axn-new { display: none; }
.axn-z .axn-cord { stroke-width: 12; }
/* SVG filters measure in user units, here millimeters: a 4px glow became a 4 mm blur, thousands of pixels wide. No filters in the zoom. */
.axn-z .axn-wire, .axn-z .axn-soma, .axn-z .axn-spark { filter: none; }
.axn-z.axn-end .axn-spark { display: none; }
.axn-bar { position: absolute; right: 22px; align-items: flex-end; bottom: 16px; display: flex; flex-direction: column; gap: 5px; pointer-events: none; }
.axn-bar i { display: block; width: 64px; height: 3px; border-radius: 2px; background: var(--text); }
.axn-bar span { font: 700 13px var(--sans); color: var(--dim); }

/* 2. in and out */
.axn-neu { width: 100%; max-width: 360px; display: block; }
.axn-dends path { fill: none; stroke: var(--violet-bright); stroke-width: 4; stroke-linecap: round; }
.axn-hit { fill: transparent; cursor: pointer; }
.axn-cb { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 2; transition: fill .3s; }
.axn-cbon .axn-cb { fill: var(--gold); stroke: var(--gold); }
.axn-ax, .axn-term { fill: none; stroke: var(--violet-bright); stroke-width: 5; stroke-linecap: round; transition: stroke .4s; }
.axn-cbon .axn-ax, .axn-cbon .axn-term { stroke: var(--gold); }
.axn-mus { fill: #E59A8C; transform-box: fill-box; transform-origin: center; }
.axn-twitch .axn-mus { animation: axnTwitch .5s ease-in-out 2; }
@keyframes axnTwitch { 50% { transform: scaleY(.82) scaleX(1.18); } }
.axn-sp { fill: #fff; filter: drop-shadow(0 0 4px var(--gold)); }
.axn-t { fill: var(--dim); font: 600 13px var(--sans); }
.axn-twitch .axn-t3 { fill: var(--gold); font-weight: 800; }

/* 3-4. the leg */
.axn-legwrap { height: 300px; }
.axn-legwrap .axn-body { width: 100%; height: 100%; display: block; }
.axn-legv .axn-lab { font-size: 62px; }
.axn-legv .axn-cord { stroke-width: 26; }
.axn-legv .axn-spark { display: none; }
.axn-legv .axn-wire, .axn-legv .axn-dead { stroke-width: 4px; }
.axn-legv .axn-new { stroke-width: 4.5px; filter: drop-shadow(0 0 3px rgba(252,192,80,.7)); }
.axn-legv .axn-dead { transition: stroke 1.2s, opacity 1.2s; }
.axn-legv.axn-dying .axn-dead { stroke: var(--dim); opacity: .3; }
.axn-legv.axn-dead-still .axn-dead { transition: none; }
.axn-legv.axn-dying .axn-toelab { opacity: .5; }
.axn-slash { stroke: #fff; stroke-width: 16; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255,255,255,.6)); }
.axn-pkover { position: absolute; inset: 0; }
.choices.axn-cutpk { position: absolute; inset: 0; display: block; }
.axn-cutpk .choice { position: absolute; width: 118px; min-height: 44px; padding: 8px 10px; font-size: 14px; line-height: 1.2; }
.axn-cutpk .choice:nth-child(1) { right: 0; top: 64%; }
.axn-cutpk .choice:nth-child(2) { left: 0; top: 14%; }

/* 5. the arms */
.choices.axn-arms { display: flex; flex-direction: row; justify-content: center; gap: 18px; width: 100%; }
.axn-arms .choice { padding: 6px 8px 8px; background: transparent; border-color: transparent; box-shadow: none; justify-content: center; min-height: 0; }
.axn-arms .choice.right { border-color: var(--mint); background: rgba(63,214,154,.08); }
.axn-arms .choice.wrong { border-color: var(--red); background: rgba(216,85,85,.08); }
.axn-armbox { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.axn-arm { width: 110px; height: 196px; display: block; }
.axn-armlab { font: 700 13px var(--sans); color: var(--dim); white-space: nowrap; }
.axn-armsil, .axn-hand { fill: rgba(169,155,255,.12); stroke: rgba(169,155,255,.45); stroke-width: 2; }
.axn-aw, .axn-an { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
.axn-an { stroke-dasharray: 0 1000; }
.axn-ad { fill: none; stroke: rgba(166,159,147,.5); stroke-width: 3; stroke-dasharray: 4 6; }
.axn-tip { fill: rgba(252,192,80,0); transition: fill .4s; }
.axn-arm.axn-back .axn-tip { fill: rgba(252,192,80,.75); }
.axn-arm .axn-slash { stroke-width: 3.5; }

/* 7. the giraffe */
.axn-gir { position: relative; height: 290px; aspect-ratio: 619 / 640; margin: 0 auto; }
.axn-gir img { width: 100%; height: 100%; display: block; }
.axn-girsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.axn-gp { fill: none; stroke: var(--gold); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; filter: drop-shadow(0 0 5px rgba(252,192,80,.8)); }
.axn-gon .axn-gp { transition: stroke-dashoffset 2.5s ease-in-out; stroke-dashoffset: 0; }
.axn-gdot { fill: var(--gold); stroke: #fff; stroke-width: 3; }
.axn-gl { position: absolute; font: 700 13px var(--sans); color: var(--text); background: rgba(10,14,26,.7); padding: 2px 7px; border-radius: 8px; white-space: nowrap; }
.axn-gl1 { left: 42%; top: 0; }
.axn-gl2 { right: 72%; top: 15%; }
.axn-gl3 { left: 58%; top: 54%; opacity: 0; transition: opacity .4s 2.3s; }
.axn-gon .axn-gl3 { opacity: 1; }

@media (max-height: 700px) {
  .axn-legwrap { height: 250px; }
  .axn-arm { width: 96px; height: 170px; }
  .axn-gir { height: 240px; }
}
.axn-gnow .axn-gp, .axn-gnow .axn-gl3 { transition: none; }
.axn-gbtn { border: 0; cursor: pointer; }
.axn-gbtn::before { content: ''; position: absolute; inset: -12px -8px; }
.axn-gbtn.locked { pointer-events: none; }
.axn-gbtn.right { color: var(--mint-ink); background: var(--mint); }
.axn-gbtn.wrong { color: #fff; background: var(--red); }