/* Myosatellite cell lesson. All rules scoped under .msc-* */
.msc-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.msc-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 320px; }
.msc-full { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 12px; }
.msc-count { font: 600 16px var(--sans); color: var(--dim); }
.msc-count b { color: var(--gold); font-size: 22px; font-variant-numeric: tabular-nums; }

/* the fiber */
.msc-fiber { width: 100%; max-width: 360px; overflow: visible; }
.msc-body { fill: #4A3790; stroke: var(--violet-bright); stroke-width: 2; cursor: pointer; }
.msc-stripes line { stroke: rgba(169,155,255,.28); stroke-width: 2; pointer-events: none; }
.msc-nuc { fill: #2A2152; stroke: rgba(169,155,255,.6); stroke-width: 1.5; transition: fill .25s, opacity .5s; pointer-events: none; }
.msc-nuc.lit { fill: var(--gold); stroke: #FFE08A; filter: drop-shadow(0 0 4px rgba(252,192,80,.7)); }
.msc-nuc.out { opacity: 0; }
.msc-gone { fill: #2B2B33; stroke: rgba(234,227,215,.35); stroke-width: 1.5; pointer-events: none; }
.msc-rebuilt { fill: #5E48B8; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; }
.msc-sat { cursor: pointer; transition: opacity .4s; }
.msc-sat.hid { opacity: 0; pointer-events: none; }
.msc-hit { fill: transparent; }
.msc-cell { fill: #1E5A47; stroke: var(--mint); stroke-width: 2; opacity: .5; transition: opacity .5s; }
.msc-cn { fill: var(--mint); opacity: .6; }
.msc-sat { transition: opacity .4s; }
.msc-sat.awake .msc-cell { fill: var(--mint); opacity: 1; filter: drop-shadow(0 0 6px rgba(63,214,154,.8)); }
.msc-sat.awake .msc-cn { fill: #0B2E20; opacity: 1; }
.msc-sat.ping .msc-cell { filter: drop-shadow(0 0 8px rgba(63,214,154,.9)); opacity: 1; }
.msc-move .msc-sat { pointer-events: none; }
.msc-fatc { fill: #E8D7A0; stroke: #B9A56A; stroke-width: 1.5; opacity: .9; }

/* three fibers to choose from */
.msc-pk { width: 100%; max-width: 360px; }
.msc-pk .choices.msc-col { display: flex; flex-direction: column; gap: 8px; }
.msc-pk .choice { padding: 6px 10px; min-height: 0; }
.msc-opt { display: flex; align-items: center; gap: 8px; width: 100%; }
.msc-opt b { font: 800 16px var(--sans); color: var(--text); width: 16px; }
.msc-fiber.opt { max-width: 280px; }
.msc-pk .choice { padding: 4px 10px; }
.msc-fiber.opt .msc-body { cursor: inherit; }

@media (max-height: 700px) {
  .msc-fiber.opt { max-width: 260px; }
}