/* Muscle soreness lesson. All rules scoped under .mso-* */
.mso-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mso-note { font-size: 14px; color: var(--dim); text-align: center; }

/* ---------- legs ---------- */
.mso-legs { position: relative; height: 210px; aspect-ratio: 392 / 640; flex: none; }
.mso-legs img { width: 100%; height: 100%; display: block; }
.mso-glow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.mso-gl, .mso-gr { animation: mso-throb2 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mso-throb2 { 50% { transform: scale(1.12); } }
.mso-fz circle { fill: #FCC050; animation: mso-fizz 1.6s ease-in-out infinite; }
@keyframes mso-fizz { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-10px); opacity: .55; } }

/* ---------- 0. the clock ---------- */
.mso-full { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 16px 64px; box-sizing: border-box; min-height: 0; }
.mso-legs.big { height: auto; flex: 1 1 auto; min-height: 120px; max-height: 300px; width: auto; }
.mso-keys { display: flex; gap: 16px; font: 700 14px var(--sans); color: var(--text); }
.mso-keys span { display: flex; align-items: center; gap: 6px; transition: opacity .2s; }
.mso-keys i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.mso-keys .lac i { background: #FCC050; }
.mso-keys .ache i { background: #FF8A4C; box-shadow: 0 0 8px #FF8A4C; }
.mso-clock { width: 100%; max-width: 360px; padding: 0 14px; box-sizing: border-box; }
.mso-full.mso-s-wait { padding-bottom: 82px; }
.mso-read { text-align: center; font: 800 18px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.mso-trk { position: relative; height: 48px; touch-action: none; cursor: pointer; }
.mso-rail { position: absolute; left: 22px; right: 22px; top: 20px; height: 8px; border-radius: 4px; background: var(--raised); overflow: hidden; }
.mso-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FCC050, #FF8A4C); }
.mso-knob { position: absolute; top: 2px; left: 0; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFE7A3, var(--gold) 60%, var(--gold-deep)); box-shadow: 0 4px 14px rgba(252,192,80,.45); }
.mso-ticks { position: relative; height: 18px; margin: 10px 22px 0; font: 600 12.5px var(--sans); color: var(--dim); }
.mso-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }

/* ---------- 2. the step ---------- */
.mso-step { width: 100%; max-width: 300px; height: 230px; display: block; overflow: visible; }
.mso-floor { stroke: var(--line-strong); stroke-width: 2; }
.mso-bench { fill: #5A4E3E; }
.mso-torso, .mso-head { fill: #4A5480; }
.mso-leg line { stroke-linecap: round; }
.mso-th { stroke-width: 22; }
.mso-sh { stroke-width: 16; }
.mso-ft { stroke-width: 10; }
.mso-leg.g .mso-th, .mso-leg.g .mso-sh, .mso-leg.g .mso-ft { stroke: var(--gold); }
.mso-leg.v .mso-th, .mso-leg.v .mso-sh, .mso-leg.v .mso-ft { stroke: var(--violet-bright); }
.mso-leg { transition: opacity .25s; }
.mso-s-g .mso-leg.v, .mso-s-v .mso-leg.g { opacity: .45; }

.mso-ache { stroke: #FF8A4C; stroke-width: 44; opacity: 0; filter: blur(6px); }
.mso-leg.mso-s-sore .mso-ache { opacity: .9; animation: mso-throb 1.1s ease-in-out infinite; }
@keyframes mso-throb { 50% { opacity: .45; } }
.mso-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 8px; margin-top: 10px; font: 700 13.5px var(--sans); }
.mso-tags button { appearance: none; border: 2px solid var(--line); font: inherit; min-height: 44px; padding: 6px 12px; border-radius: 12px; background: var(--surface); color: var(--dim); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.mso-tags button.mso-s-pick { border-color: var(--text); }
.mso-tags .up { color: var(--gold); }
.mso-tags .dn { color: var(--violet-bright); }
.mso-tags.up .up { background: rgba(252,192,80,.22); }
.mso-tags.dn .dn { background: rgba(169,155,255,.24); }

/* ---------- 4. two runs ---------- */
.mso-runs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; width: 100%; max-width: 360px; padding: 12px; box-sizing: border-box; margin-bottom: 56px; }
.mso-run { appearance: none; border: 2px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); padding: 8px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; cursor: pointer; transition: border-color .25s, box-shadow .25s; }
.mso-run svg { width: 100%; height: auto; max-height: 70px; display: block; }
.mso-run b { font: 800 17px var(--sans); }
.mso-run span { font-size: 13px; color: var(--dim); }
.mso-run em { font: 700 13.5px var(--sans); font-style: normal; min-height: 18px; color: var(--dim); }
.mso-road { stroke: #5A4E3E; stroke-width: 6; stroke-linecap: round; }
.mso-rh { fill: var(--violet-bright); }
.mso-rb { stroke: var(--violet-bright); stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mso-run.mso-s-sore { border-color: #FF8A4C; box-shadow: 0 0 22px rgba(255,138,76,.45); }
.mso-run.mso-s-sore em { color: #FF8A4C; }
.mso-run.mso-s-sore .mso-rb, .mso-run.mso-s-sore .mso-rh { stroke: #FF8A4C; }
.mso-run.mso-s-sore .mso-rh { fill: #FF8A4C; }
.mso-run.mso-s-fine { opacity: .7; }

/* ---------- 6, 7. two pairs of legs ---------- */
.mso-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; width: 100%; max-width: 340px; }
.mso-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mso-legs.two { height: 165px; }
.mso-col { position: relative; }
.mso-cap { font: 600 13.5px var(--sans); color: var(--dim); text-align: center; }
.mso-cap b { display: block; font: 800 15px var(--sans); color: var(--text); }
.mso-grow { width: 100%; height: 12px; border-radius: 6px; background: var(--raised); overflow: hidden; }
.mso-grow i { display: block; height: 100%; width: 0; background: var(--mint); border-radius: 6px; transition: width .8s ease-out; }
.mso-s-grown .mso-grow i { width: 82%; }

@media (max-height: 700px) {
  .mso-legs { height: 170px; }
  .mso-legs.two { height: 128px; }
  .mso-legs.big { max-height: 220px; }
  .mso-step { height: 176px; }
}