/* Sports science lesson. All rules scoped under .sps-* */
.sps-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sps-hero { margin: 0; }
.sps-hero img { display: block; max-height: 170px; width: auto; filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); }

/* 0. the lab */
.sps-lab { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(70% 50% at 50% 50%, rgba(123,92,253,.25), transparent 70%); }
.sps-run { width: 74%; max-width: 320px; height: auto; filter: drop-shadow(0 16px 26px rgba(0,0,0,.5)); }
.sps-lab.go .sps-run { animation: spsBob .5s ease-in-out infinite alternate; }
@keyframes spsBob { to { transform: translateY(-5px); } }
.sps-speed { display: flex; align-items: baseline; gap: 6px; padding: 6px 16px; border-radius: 14px; background: #0b0f1c; border: 1px solid var(--line-strong); }
.sps-speed b { font: 800 34px/1 var(--mono); color: var(--gold); font-variant-numeric: tabular-nums; }
.sps-speed span { font: 700 14px var(--sans); color: var(--dim); }

/* 1 and 2. the step test chart */
.sps-top { display: flex; align-items: center; gap: 14px; }
.sps-mini { height: 92px; width: auto; animation: spsBob .9s ease-in-out infinite alternate; }
.sps-read { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 14px; background: #0b0f1c; border: 1px solid var(--line-strong); transition: border-color .3s; }
.sps-read span { font: 700 13px var(--sans); color: var(--dim); }
.sps-read b { font: 800 24px/1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.sps-sc.hot .sps-read { border-color: var(--gold); }
.sps-sc.hot .sps-read b { color: var(--gold); }
.sps-drop { width: 16px; height: 21px; }
.sps-drop path { fill: #e0484f; }
.sps-chart { position: relative; width: 100%; max-width: 360px; }
.sps-plot { display: block; width: 100%; height: auto; overflow: visible; }
.sps-ax { stroke: var(--line-strong); stroke-width: 2; }
.sps-axl { font: 700 14px var(--sans); fill: var(--dim); }
.sps-tk { font: 700 14px var(--sans); fill: var(--dim); text-anchor: middle; }
.sps-unit { margin-top: 2px; text-align: center; font: 700 13px var(--sans); color: var(--dim); }
.sps-line { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.sps-pt { fill: var(--surface, #1a1d2a); stroke: var(--line-strong); stroke-width: 2; opacity: 0; transition: opacity .25s; }
.sps-pt.on { opacity: 1; fill: var(--gold); stroke: #0b0f1c; }
.sps-pt.bend { r: 9; fill: var(--mint); }
.sps-col { position: absolute; top: 0; height: calc(100% - 22px); width: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.sps-col.locked { pointer-events: none; }
.sps-col.wrong { background: rgba(216,85,85,.16); }
.sps-col.right { background: rgba(63,214,154,.16); }
.sps-bendtag { position: absolute; left: calc(51.47% - 40px); top: 4px; width: 80px; text-align: center; font: 800 13px var(--sans); color: var(--mint); opacity: 0; transition: opacity .4s; pointer-events: none; }
.sps-chart.named .sps-bendtag { opacity: 1; }

/* 4. engines */
.sps-engs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 360px; align-items: end; }
.sps-eng { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sps-eng img { height: 84px; width: auto; max-width: 100%; object-fit: contain; }
.sps-eng figcaption { font: 700 13px var(--sans); color: var(--text); }
.sps-bar { position: relative; width: 34px; height: 110px; border-radius: 10px; background: #0b0f1c; border: 1px solid var(--line-strong); overflow: visible; display: flex; align-items: flex-end; }
.sps-bar i { display: block; width: 100%; height: 0; border-radius: 9px; background: linear-gradient(0deg, var(--violet), var(--violet-bright)); transition: height 1.2s cubic-bezier(.2,.8,.2,1); }
.fill .sps-bar i { height: var(--h); }
.sps-bar b { position: absolute; bottom: calc(100% + 4px); left: 50%; translate: -50% 0; white-space: nowrap; font: 800 13px var(--sans); color: var(--gold); opacity: 0; transition: opacity .4s 1s; }
.fill .sps-bar b { opacity: 1; }
.sps-engs { padding-top: 22px; }

/* 5. two runners */
.sps-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 340px; }
.sps-rn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; border-radius: 14px; background: var(--raised); border: 1px solid var(--line-strong); }
.sps-rn img { height: 96px; width: auto; }
.sps-rn.b img { filter: hue-rotate(150deg); }
.sps-rn b { font: 800 17px var(--sans); color: var(--text); }
.sps-rn em { font: 700 13px var(--sans); font-style: normal; color: var(--gold); }
.sps-gauge { position: relative; width: 100%; height: 12px; border-radius: 6px; background: #0b0f1c; border: 1px solid var(--line-strong); }
.sps-gauge i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 6px; background: linear-gradient(90deg, var(--violet), var(--violet-bright)); }
.sps-gauge span { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; background: var(--gold); border-radius: 2px; }

/* 6. economy */
.sps-ecs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 340px; }
.sps-ec { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 8px; border-radius: 16px; background: var(--raised); border: 2px solid var(--line-strong); color: var(--text); font: inherit; cursor: pointer; }
.sps-ec img { height: 96px; width: auto; }
.sps-ec:first-child img { filter: hue-rotate(250deg); }
.sps-ec b { font: 800 17px var(--sans); }
.sps-o2 { display: flex; gap: 4px; min-height: 16px; }
.sps-o2 i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #bfe6ff, #3c8fd6); }
.sps-ec em { font: 700 12.5px var(--sans); font-style: normal; color: var(--dim); }
.sps-ec.locked { pointer-events: none; }
.sps-ec.right { border-color: var(--mint); background: rgba(63,214,154,.14); }
.sps-ec.wrong { border-color: var(--red); background: rgba(216,85,85,.14); }

/* 7. three numbers */
.sps-three { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sps-three span { padding: 6px 12px; border-radius: 12px; background: rgba(123,92,253,.14); border: 1px solid rgba(123,92,253,.5); font: 700 14px var(--sans); color: var(--text); }

/* 8. the clock */
.sps-goal { padding: 5px 12px; border-radius: 999px; border: 1px dashed rgba(252,192,80,.7); font: 700 13px var(--sans); color: var(--gold); }
.sps-clock { display: flex; flex-direction: column; align-items: center; padding: 10px 22px; border-radius: 16px; background: #0b0f1c; border: 1px solid var(--line-strong); transition: box-shadow .5s, border-color .5s; }
.sps-clock b { font: 800 44px/1.05 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.sps-clock span { font: 700 13px var(--sans); color: var(--dim); }
.sps-clock.done { border-color: var(--gold); box-shadow: 0 0 26px rgba(252,192,80,.35); }
.sps-clock.done b { color: var(--gold); }
.sps-recs { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 280px; }
.sps-recs > div { display: grid; grid-template-columns: 48px 76px 1fr; gap: 8px; align-items: baseline; opacity: .25; transition: opacity .3s; }
.sps-recs > div.on { opacity: 1; }
.sps-recs i { font: 700 13px var(--sans); font-style: normal; color: var(--dim); }
.sps-recs b { font: 800 15px var(--mono); color: var(--text); }
.sps-recs span { font: 600 13px var(--sans); color: var(--dim); }

@media (max-height: 700px) {
  .sps-mini { height: 58px; }
  .sps-chart { max-width: 300px; }
  .sps-bar { height: 86px; }
  .sps-eng img { height: 64px; }
  .sps-clock b { font-size: 36px; }
  .sps-hero img { max-height: 130px; }
  .sps-mask img { height: 56px; }
  .sps-track { height: 48px; } .sps-track img { height: 44px; }
  .sps-shoe b { font-size: 46px; }
}

/* the bend tap: halos on the dots; the tall buttons stay invisible */
.sps-note { text-align: center; font: 600 12.5px var(--sans); color: var(--dim); }
.sps-chart .sps-bendtag { top: calc(66% - 34px); }
.sps-halo { position: absolute; left: 12px; width: 20px; height: 20px; border-radius: 50%; pointer-events: none; }

/* 4. the mask */
.sps-mask { display: flex; align-items: center; gap: 10px; }
.sps-mask img { height: 74px; width: auto; }
.sps-mask span { max-width: 170px; font: 700 13px var(--sans); color: var(--dim); }

/* 5. two bends on one engine */
.sps-g2s { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 340px; }
.sps-g2h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.sps-g2h b { font: 800 19px var(--sans); color: var(--text); }
.sps-g2h em { font: 800 15px var(--sans); font-style: normal; color: var(--gold); }
.sps-g2bar { position: relative; height: 34px; border-radius: 10px; background: #0b0f1c; border: 1.5px solid var(--line-strong); }
.sps-g2bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 9px 0 0 9px; background: linear-gradient(90deg, var(--violet), var(--violet-bright)); }
.sps-g2bar span { position: absolute; top: -7px; bottom: -7px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 10px rgba(252,192,80,.6); }
.sps-g2bar u { position: absolute; left: 10px; top: 50%; translate: 0 -50%; text-decoration: none; font: 700 13px var(--sans); color: #fff; }
.sps-g2key { display: flex; align-items: center; gap: 8px; font: 600 13px var(--sans); color: var(--dim); }
.sps-g2key i { width: 22px; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--violet), var(--violet-bright)); }

/* 6. the race on one tank */
.sps-race { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 350px; }
.sps-lh { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sps-lh b { width: 44px; font: 800 16px var(--sans); color: var(--text); }
.sps-tank { flex: 1; height: 12px; border-radius: 6px; background: #0b0f1c; border: 1px solid var(--line-strong); overflow: hidden; }
.sps-tank i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #3c8fd6, #bfe6ff); }
.sps-track { position: relative; height: 58px; border-radius: 10px; background: linear-gradient(180deg, rgba(190,90,60,.35), rgba(150,70,50,.35)); border-bottom: 2px solid rgba(255,255,255,.25); }
.sps-track img { position: absolute; left: 0; bottom: 2px; height: 54px; width: auto; }
.sps-lane.d .sps-track img { filter: hue-rotate(150deg); }
.sps-fin { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 4px; background: repeating-linear-gradient(180deg, #fff 0 5px, #222 5px 10px); }
.sps-race.done .sps-lane.c .sps-lh b { color: var(--gold); }
.sps-key { display: flex; align-items: center; gap: 8px; font: 600 13px var(--sans); color: var(--dim); }
.sps-key i { width: 22px; height: 10px; border-radius: 4px; background: linear-gradient(90deg, #3c8fd6, #bfe6ff); }

/* 7. the shoes */
.sps-shoe { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 26px; border-radius: 18px; background: var(--raised); border: 1px solid var(--line-strong); }
.sps-shoe b { font: 800 56px/1 var(--serif); color: var(--gold); }
.sps-shoe span { font: 700 15px var(--sans); color: var(--text); }
.sps-shoe i { margin-top: 4px; font: 600 12.5px var(--sans); font-style: normal; color: var(--dim); }

/* 8. the sum */
.sps-eq .sps-is { grid-column: 1 / -1; }
.sps-eq .sps-t.r { grid-column: 2 / 5; }
.sps-eq { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 6px 6px; align-items: center; width: 100%; max-width: 340px; }
.sps-eq > i { font: 800 22px var(--sans); font-style: normal; color: var(--dim); text-align: center; }
.sps-t { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; padding: 8px 6px; border-radius: 14px; background: var(--raised); border: 1px solid var(--line-strong); text-align: center; opacity: 0; translate: 0 8px; transition: opacity .4s, translate .4s; }
.sps-t b { font: 800 14.5px/1.2 var(--sans); color: var(--text); }
.sps-t span { font: 700 12.5px var(--sans); color: var(--dim); }
.sps-t.r { border-color: var(--gold); background: rgba(252,192,80,.12); }
.sps-t.r b { color: var(--gold); }
.sps-eq.on .sps-t { opacity: 1; translate: 0 0; }
.sps-eq.on .sps-t.b { transition-delay: .3s; }
.sps-eq.on .sps-t.c { transition-delay: .6s; }
.sps-eq.on .sps-t.r { transition-delay: 1.1s; }