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

/* 0. the stubbed toe */
.mye-stub { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; }
.mye-stubsvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mye-p { fill: none; stroke-linecap: round; }
.mye-pf { stroke: var(--gold); stroke-width: 5; stroke-dasharray: 16 4; opacity: .9; }
.mye-ps { stroke: var(--violet-bright); stroke-width: 2.5; opacity: .9; }
.mye-df { fill: #fff; filter: drop-shadow(0 0 5px var(--gold)); }
.mye-ds { fill: #fff; filter: drop-shadow(0 0 5px var(--violet-bright)); }
.mye-hitfoot { fill: transparent; cursor: pointer; }
.mye-footg { transform-box: fill-box; transform-origin: center; }
.mye-hit .mye-footg { animation: myeKick .35s ease-out; }
@keyframes myeKick { 0% { transform: translateX(-14px); } 40% { transform: translateX(4px) rotate(-2deg); } 100% { transform: none; } }
.mye-brainimg { transform-box: fill-box; transform-origin: center; }
.mye-zap .mye-brainimg { filter: drop-shadow(0 0 10px rgba(252,192,80,.9)); }
.mye-throb .mye-brainimg { animation: myeThrob .9s ease-in-out 3; }
@keyframes myeThrob { 50% { transform: scale(1.06); filter: drop-shadow(0 0 16px rgba(169,155,255,.95)); } }
.mye-pop { position: absolute; font: 800 20px var(--sans); opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; pointer-events: none; }
.mye-pop.on { opacity: 1; transform: none; }
.mye-bump { left: 8%; top: 6%; color: var(--gold); }
.mye-ache { left: 8%; top: 17%; color: var(--violet-bright); }

/* wires, close up */
.mye-race { width: 100%; max-width: 360px; display: block; overflow: visible; }
.mye-ax { stroke: var(--violet-bright); stroke-width: 4; stroke-linecap: round; }
.mye-wire.wrapped .mye-ax { stroke: var(--gold); }
.mye-sl { fill: #EFE4CF; stroke: rgba(201,140,27,.6); stroke-width: 1.5; transition: opacity .5s, fill .5s; }
.mye-sl.gone { fill: transparent; stroke: var(--dim); stroke-dasharray: 3 4; opacity: .7; }
.mye-dot { fill: #fff; filter: drop-shadow(0 0 5px var(--gold)); }
.mye-wire:not(.wrapped) .mye-dot { filter: drop-shadow(0 0 5px var(--violet-bright)); }
.mye-flash { fill: var(--gold); }
.mye-t { fill: var(--dim); font: 600 13px var(--sans); }
.mye-arr { fill: var(--gold); font: 800 15px var(--sans); }
.mye-slhit { fill: transparent; cursor: pointer; }

/* photos */
.mye-photo { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mye-photo img { display: block; max-width: 100%; max-height: 250px; border-radius: 14px; }
.mye-photo figcaption { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 320px; }
.mye-wide img { max-height: 210px; }

/* eyes to brain */
.mye-eyes { width: 100%; max-width: 360px; display: block; }
.mye-eye ellipse { fill: #F4EEE3; stroke: var(--line-strong); stroke-width: 2; }
.mye-eye circle { fill: var(--violet); }
.mye-ew { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 18 4; }
.mye-patch { fill: var(--bg); stroke: var(--dim); stroke-width: 2; stroke-dasharray: 3 3; }

.mye-squid img { display: block; max-height: 220px; max-width: 100%; }

@media (max-height: 700px) {
  .mye-photo img { max-height: 190px; }
  .mye-wide img { max-height: 170px; }
  .mye-squid img { max-height: 170px; }
}