/* ============================================================
   WORKOUT
   ============================================================ */
.wk-h{ font-family:var(--head); font-size:23px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; margin:2px 0 14px; }

/* ---------- goal selector ---------- */
.goalseg{ display:flex; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:18px; }
.goalseg button{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 6px 14px; background:transparent; border:none; cursor:pointer; font:inherit;
  color:var(--muted); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border-right:1px solid var(--line); transition:color .18s, background .18s;
}
.goalseg button:last-child{ border-right:none; }
.goalseg button span{ text-align:center; line-height:1.25; }
.goalseg__ic{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:transparent; transition:background .18s; }
.goalseg__ic svg{ width:28px; height:28px; }
.goalseg button.active{ color:var(--gold); background:linear-gradient(180deg,rgba(245,179,1,.10),transparent); box-shadow:inset 0 0 0 1.5px var(--gold); border-radius:13px; }
.goalseg button.active .goalseg__ic{ background:#000; }

/* ---------- plan hero card ---------- */
.plancard{ position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 20px 20px; }
/* Scrim over the photo's lower half. Measured positions inside the card:
   title 4-10%, blurb 18-28%, stat row 31.5-37%, Plan Overview from 40%.
   So the photo is left alone across the headline band and is damped out from
   ~24% down, which keeps the stat row readable whatever the artwork does —
   without it, "TIME / DAY" landed on a brightly lit shoulder. Copy and panels
   carry z-index:1, so they paint above this. */
.plancard::after{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom,
    transparent 22%, rgba(20,21,24,.55) 32%, rgba(20,21,24,.92) 40%, var(--card) 48%); }
/* The photo sits in the TOP-RIGHT of the card and feathers away before it
   reaches the copy.
   Geometry matters here: the visible area must roughly match the art's aspect,
   or `cover` crops a tall sliver and you end up looking at the back of the
   athlete's head. A 60% x 56% box is ~0.67 against 3:4 art, so `cover` trims
   only a little and the whole subject reads.
   Capping the height at 56% also guarantees the stat row and the Plan Overview
   panel can never sit on top of the photo.
   The left feather is a CSS mask on the ELEMENT, so it is expressed in box
   percentages and cannot be thrown off by however `cover` decides to crop; the
   bottom edge is feathered in the art itself. */
.plancard__bg{ position:absolute; top:0; right:0; width:60%; height:56%;
  background-size:cover; background-position:center top; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,
     transparent 22%, rgba(0,0,0,.16) 40%, rgba(0,0,0,.60) 58%, #000 78%);
          mask-image:linear-gradient(90deg,
     transparent 22%, rgba(0,0,0,.16) 40%, rgba(0,0,0,.60) 58%, #000 78%); }
.plancard > *:not(.plancard__bg){ position:relative; z-index:1; }
.plancard__t{ font-family:var(--head); font-size:38px; font-weight:700; letter-spacing:.02em; line-height:1; }
.plancard__s{ font-size:12.5px; font-weight:600; letter-spacing:.14em; color:var(--text-soft); text-transform:uppercase; margin-top:8px; }
.plancard__rule{ width:74px; height:4px; border-radius:2px; background:var(--gold); margin:14px 0 14px; }
.plancard__blurb{ font-size:14px; line-height:1.5; color:var(--muted); max-width:52%; }

/* Sized to content and spaced apart — NOT equal thirds. Forcing three equal
   columns left every block at exactly 102px, which "LEVEL / BEGINNER" already
   exceeded, so the longest label ("TIME / DAY") was clipped by the card's
   overflow:hidden. Now each block takes the width it needs and the leftover
   space goes into the gaps. */
.planstats{ display:flex; align-items:center; justify-content:space-between;
  gap:6px; margin:20px 0 18px; }
.planstats > div{ display:flex; align-items:center; gap:9px; flex:0 1 auto; min-width:0; }
.planstats__txt{ display:flex; flex-direction:column; min-width:0; }
.planstats__ic{ width:36px; height:36px; flex:0 0 36px; border-radius:11px; background:var(--field-2,var(--field)); border:1px solid var(--line); display:grid; place-items:center; }
.planstats__ic svg{ width:18px; height:18px; }
.planstats__k{ font-size:9px; line-height:1.2; letter-spacing:.07em; color:var(--muted); text-transform:uppercase; font-weight:600; white-space:nowrap; }
.planstats__v{ font-size:12.5px; line-height:1.25; font-weight:800; color:var(--gold); letter-spacing:.02em; margin-top:3px; white-space:nowrap; }
.planstats__sep{ width:1px; align-self:stretch; background:var(--line); flex:0 0 1px; }

.planov{ background:var(--card-2); border:1px solid var(--line); border-radius:14px; padding:16px 14px 6px; }
.planov__h{ font-family:var(--head); font-size:14px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; }
.wkrow{ display:flex; align-items:center; gap:13px; width:100%; background:none; border:none; padding:13px 2px; cursor:pointer; font:inherit; color:inherit; text-align:left; border-top:1px solid var(--line); }
.planov .wkrow:first-of-type{ border-top:none; }
.wkbadge{ width:50px; height:50px; flex:0 0 50px; border-radius:50%; border:1.5px solid var(--gold); display:grid; place-items:center; line-height:1; }
.wkbadge b{ display:block; font-size:9px; letter-spacing:.08em; color:var(--gold); font-weight:700; }
.wkbadge i{ display:block; font-style:normal; font-family:var(--head); font-size:24px; font-weight:700; color:var(--gold); margin-top:1px; }
.wkrow__t{ flex:1 1 auto; min-width:0; }
.wkrow__t b{ display:block; font-size:15px; font-weight:700; }
.wkrow__t span{ display:block; font-size:12.5px; color:var(--muted); margin-top:3px; }
.wkrow svg{ width:18px; height:18px; color:var(--muted-2); flex:0 0 18px; }

.btn-gold{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  margin-top:18px; padding:17px 16px; border:none; border-radius:13px; cursor:pointer;
  background:var(--gold); color:#111; font-family:var(--head); font-size:16px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; transition:transform .12s, filter .15s;
}
.btn-gold:hover{ filter:brightness(1.05); }
.btn-gold:active{ transform:scale(.985); }
.btn-gold:disabled{ opacity:.55; cursor:default; }

/* ---------- plan detail ---------- */
.pd-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.pd-back{ width:34px; height:34px; flex:0 0 34px; margin-top:2px; display:grid; place-items:center; background:none; border:none; color:var(--text); cursor:pointer; padding:0; }
.pd-back svg{ width:22px; height:22px; }
.pd-title{ flex:1 1 auto; min-width:0; }
.pd-title h2{ font-family:var(--head); font-size:21px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; line-height:1.15; margin:0; }
.pd-title p{ font-size:13.5px; color:var(--muted); margin:5px 0 0; }
.pd-prog{ flex:0 0 auto; display:flex; align-items:center; gap:11px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.pd-prog__k{ font-size:9.5px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; font-weight:600; }
.pd-prog__v{ font-family:var(--head); font-size:19px; font-weight:700; color:var(--gold); margin-top:2px; }
.ring{ width:42px; height:42px; flex:0 0 42px; transform:rotate(-90deg); }
.ring__bg{ fill:none; stroke:var(--line-2); stroke-width:3.5; }
.ring__fg{ fill:none; stroke:var(--gold); stroke-width:3.5; stroke-linecap:round; transition:stroke-dashoffset .5s var(--ease); }

.pd-bar{ height:4px; border-radius:2px; background:var(--line); overflow:hidden; margin-bottom:16px; }
.pd-bar i{ display:block; height:100%; border-radius:2px; background:var(--gold); transition:width .5s var(--ease); }

.pd-stats{ display:flex; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 4px; margin-bottom:16px; }
.pd-stats > div{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px; padding:0 4px; border-right:1px solid var(--line); }
.pd-stats > div:last-child{ border-right:none; }
.pd-stats svg{ width:21px; height:21px; color:var(--text); }
.pd-stats b{ font-size:9px; letter-spacing:.07em; color:var(--muted); text-transform:uppercase; font-weight:600; text-align:center; }
.pd-stats i{ font-style:normal; font-size:12.5px; font-weight:800; color:var(--gold); letter-spacing:.02em; text-align:center; line-height:1.2; }

.wktabs{ display:flex; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:13px; padding:8px; margin-bottom:6px; }
.wktab{ flex:1 1 0; min-width:0; position:relative; background:var(--card-2); border:1px solid var(--line); border-radius:10px; padding:11px 4px; cursor:pointer; font:inherit; color:var(--text-soft); text-align:center; transition:background .15s, color .15s; }
.wktab b{ display:block; font-family:var(--head); font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.wktab span{ display:block; font-size:10.5px; color:var(--muted); margin-top:3px; }
.wktab.active{ background:var(--gold); border-color:var(--gold); color:#111; }
.wktab.active span{ color:rgba(0,0,0,.65); }
/* the little pointer under the selected week, as in the design */
.wktab.active::after{ content:''; position:absolute; left:50%; bottom:-7px; width:11px; height:11px; background:var(--gold); transform:translateX(-50%) rotate(45deg); border-radius:2px; }

.wkhead{ padding:18px 2px 2px; }
.wkhead h3{ font-family:var(--head); font-size:15px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0; }
.wkhead p{ font-size:13px; color:var(--muted); margin:6px 0 0; }

.daylist{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.dayrow{ display:flex; align-items:center; gap:13px; background:var(--card); border:1px solid var(--line); border-radius:13px; padding:13px 13px 13px 12px; }
.dayrow--next{ border-color:var(--gold); box-shadow:0 0 0 1px rgba(245,179,1,.25); }
.dayrow--done{ border-color:rgba(45,166,100,.4); }
.daybadge{ width:56px; height:56px; flex:0 0 56px; border-radius:50%; border:1.5px solid var(--line-2); display:grid; place-items:center; line-height:1; }
.daybadge b{ display:block; font-size:9px; letter-spacing:.08em; color:var(--muted); font-weight:700; }
.daybadge i{ display:block; font-style:normal; font-family:var(--head); font-size:26px; font-weight:700; color:var(--text-soft); margin-top:1px; }
.dayrow--next .daybadge{ border-color:var(--gold); }
.dayrow--next .daybadge b,.dayrow--next .daybadge i{ color:var(--gold); }
.dayrow--done .daybadge{ border-color:rgba(45,166,100,.55); }
.dayrow--done .daybadge i,.dayrow--done .daybadge b{ color:var(--ok,#2da664); }
.daymain{ flex:1 1 auto; min-width:0; }
.daymain b{ display:block; font-size:15.5px; font-weight:700; line-height:1.25; }
.daymeta{ display:flex; align-items:center; gap:7px; margin-top:6px; font-size:12.5px; color:var(--muted); }
.daymeta svg{ width:13px; height:13px; flex:0 0 13px; }
.daymeta em{ font-style:normal; color:var(--line-2); }
.daygo{ flex:0 0 auto; border:none; cursor:pointer; font:inherit; }
.daygo--start{ background:var(--gold); color:#111; font-family:var(--head); font-size:13.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:12px 20px; border-radius:24px; }
.daygo--lock,.daygo--done{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--field); border:1px solid var(--line); color:var(--muted); }
.daygo--done{ color:var(--ok,#2da664); border-color:rgba(45,166,100,.45); }
.daygo--lock svg,.daygo--done svg{ width:18px; height:18px; }
.daygo:disabled{ cursor:default; }

/* ---------- day / session view ---------- */
.sess-block{ margin-top:18px; }
.sess-block__h{ display:flex; align-items:baseline; gap:9px; margin-bottom:10px; }
.sess-block__h b{ font-family:var(--head); font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.sess-block__h span{ font-size:12px; color:var(--muted); }
.exrow{ display:flex; align-items:center; gap:13px; background:var(--card); border:1px solid var(--line); border-radius:13px; padding:11px; width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit; margin-bottom:9px; }
.exrow:last-child{ margin-bottom:0; }
.exthumb{ width:58px; height:58px; flex:0 0 58px; border-radius:11px; background:var(--field); border:1px solid var(--line); overflow:hidden; }
.exrow__t{ flex:1 1 auto; min-width:0; }
.exrow__t b{ display:block; font-size:14.5px; font-weight:700; }
.exrow__t span{ display:block; font-size:12.5px; color:var(--muted); margin-top:3px; }
.exrow__n{ flex:0 0 auto; font-size:13px; font-weight:800; color:var(--gold); letter-spacing:.02em; }

/* ---------- interactive player ---------- */
.player{ text-align:center; }
.player__stage{ width:min(260px,72vw); height:min(260px,72vw); margin:6px auto 4px; border-radius:20px; background:var(--card); border:1px solid var(--line); overflow:hidden; }
.player__name{ font-family:var(--head); font-size:22px; font-weight:700; letter-spacing:.02em; margin:14px 0 4px; }
.player__target{ font-size:13px; color:var(--muted); }
.player__count{ font-family:var(--head); font-size:52px; font-weight:700; color:var(--gold); line-height:1; margin:14px 0 2px; font-variant-numeric:tabular-nums; }
.player__sub{ font-size:12.5px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
.player__rest{ color:var(--brand); }
.cues{ text-align:left; background:var(--card-2); border:1px solid var(--line); border-radius:13px; padding:13px 15px; margin-top:18px; }
.cues b{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.cues li{ font-size:13.5px; line-height:1.55; margin-left:16px; }
.cues li + li{ margin-top:5px; }
.player__bar{ display:flex; gap:10px; margin-top:18px; }
.player__bar .btn{ flex:1 1 0; padding:15px; font-size:14.5px; }
.player__dots{ display:flex; justify-content:center; gap:6px; margin-top:14px; flex-wrap:wrap; }
.player__dots i{ width:7px; height:7px; border-radius:50%; background:var(--line-2); display:block; }
.player__dots i.on{ background:var(--gold); }
.player__dots i.cur{ background:var(--gold); box-shadow:0 0 0 3px rgba(245,179,1,.22); }

/* ---------- home "today" card ---------- */
.todaycard{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:15px; padding:14px; cursor:pointer; font:inherit; color:inherit; margin-bottom:16px; }
.todaycard__ic{ width:48px; height:48px; flex:0 0 48px; border-radius:13px; background:rgba(245,179,1,.1); border:1px solid rgba(245,179,1,.32); display:grid; place-items:center; color:var(--gold); }
.todaycard__ic svg{ width:24px; height:24px; }
.todaycard__t{ flex:1 1 auto; min-width:0; }
.todaycard__t b{ display:block; font-size:15px; font-weight:700; }
.todaycard__t span{ display:block; font-size:12.5px; color:var(--muted); margin-top:3px; }
.todaycard__go{ color:var(--muted-2); flex:0 0 18px; }
.todaycard__go svg{ width:18px; height:18px; }

/* ============================================================
   Workout — exercise figures
   ============================================================
   Articulated SVG stick figures. Each exercise rotates a few joints with CSS
   keyframes, so a demo is a few hundred bytes, stays sharp at any size, works
   with no network, and needs no third-party media licence.
   ============================================================ */
.exfig{ width:100%; height:100%; display:block; }
.exfig .j-fig line{ stroke:var(--gold); stroke-width:5; stroke-linecap:round; fill:none; }
.exfig .j-head{ fill:none; stroke:var(--gold); stroke-width:4.5; }
.exfig .j-floor{ stroke:var(--line-2); stroke-width:2; stroke-dasharray:3 6; stroke-linecap:round; }
.exfig .j-bell rect{ fill:var(--gold); stroke:none; }
/* transform-origin is expressed in viewBox units */
.exfig g,.exfig circle,.exfig line{ transform-box:view-box; }
.exfig .j-fig,.exfig .j-body{ transform-origin:60px 108px; }
.exfig .j-armL,.exfig .j-armR{ transform-origin:60px 38px; }
.exfig .j-foreL,.exfig .j-foreR{ transform-origin:60px 56px; }
.exfig .j-legL,.exfig .j-legR{ transform-origin:60px 62px; }
.exfig .j-shinL,.exfig .j-shinR{ transform-origin:60px 86px; }
.exfig .j-armR,.exfig .j-legR{ opacity:.5; }              /* far-side limb reads as depth */
.exfig .j-bell{ transform-origin:60px 73px; }

@media (prefers-reduced-motion:reduce){
  .exfig *{ animation:none !important; }
}

/* squat */
@keyframes k-sqb{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(15px)} }
@keyframes k-sqt{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(52deg)} }
@keyframes k-sqs{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-52deg)} }
@keyframes k-sqa{ 0%,100%{transform:rotate(4deg)} 50%{transform:rotate(-78deg)} }
.ex-squat .j-fig{ animation:k-sqb 2.2s ease-in-out infinite }
.ex-squat .j-legL,.ex-squat .j-legR{ animation:k-sqt 2.2s ease-in-out infinite }
.ex-squat .j-shinL,.ex-squat .j-shinR{ animation:k-sqs 2.2s ease-in-out infinite }
.ex-squat .j-armL,.ex-squat .j-armR{ animation:k-sqa 2.2s ease-in-out infinite }

/* squat pulses — same shape, short fast range */
@keyframes k-pub{ 0%,100%{transform:translateY(11px)} 50%{transform:translateY(17px)} }
@keyframes k-put{ 0%,100%{transform:rotate(42deg)} 50%{transform:rotate(58deg)} }
@keyframes k-pus{ 0%,100%{transform:rotate(-42deg)} 50%{transform:rotate(-58deg)} }
.ex-pulse .j-fig{ animation:k-pub .7s ease-in-out infinite }
.ex-pulse .j-legL,.ex-pulse .j-legR{ animation:k-put .7s ease-in-out infinite }
.ex-pulse .j-shinL,.ex-pulse .j-shinR{ animation:k-pus .7s ease-in-out infinite }
.ex-pulse .j-armL,.ex-pulse .j-armR{ transform:rotate(-78deg) }

/* wall sit — held position, subtle breathing */
@keyframes k-wall{ 0%,100%{transform:translateY(15px)} 50%{transform:translateY(17px)} }
.ex-wall .j-fig{ animation:k-wall 3s ease-in-out infinite }
.ex-wall .j-legL,.ex-wall .j-legR{ transform:rotate(56deg) }
.ex-wall .j-shinL,.ex-wall .j-shinR{ transform:rotate(-56deg) }
.ex-wall .j-armL,.ex-wall .j-armR{ transform:rotate(-82deg) }

/* jumping jacks */
@keyframes k-jkb{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes k-jka{ 0%,100%{transform:rotate(8deg)} 50%{transform:rotate(155deg)} }
@keyframes k-jkar{ 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(-155deg)} }
@keyframes k-jkl{ 0%,100%{transform:rotate(4deg)} 50%{transform:rotate(24deg)} }
@keyframes k-jklr{ 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(-24deg)} }
.ex-jack .j-fig{ animation:k-jkb .85s ease-in-out infinite }
.ex-jack .j-armL{ animation:k-jka .85s ease-in-out infinite }
.ex-jack .j-armR{ animation:k-jkar .85s ease-in-out infinite }
.ex-jack .j-legL{ animation:k-jkl .85s ease-in-out infinite }
.ex-jack .j-legR{ animation:k-jklr .85s ease-in-out infinite }

/* marching / high knees */
@keyframes k-mkl{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-58deg)} }
@keyframes k-mks{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(64deg)} }
@keyframes k-mka{ 0%,100%{transform:rotate(-26deg)} 50%{transform:rotate(26deg)} }
.ex-march .j-legL{ animation:k-mkl 1.4s ease-in-out infinite }
.ex-march .j-shinL{ animation:k-mks 1.4s ease-in-out infinite }
.ex-march .j-legR{ animation:k-mkl 1.4s ease-in-out infinite .7s }
.ex-march .j-shinR{ animation:k-mks 1.4s ease-in-out infinite .7s }
.ex-march .j-armL{ animation:k-mka 1.4s ease-in-out infinite .7s }
.ex-march .j-armR{ animation:k-mka 1.4s ease-in-out infinite }
.ex-knees .j-legL{ animation:k-mkl .6s ease-in-out infinite }
.ex-knees .j-shinL{ animation:k-mks .6s ease-in-out infinite }
.ex-knees .j-legR{ animation:k-mkl .6s ease-in-out infinite .3s }
.ex-knees .j-shinR{ animation:k-mks .6s ease-in-out infinite .3s }
.ex-knees .j-armL{ animation:k-mka .6s ease-in-out infinite .3s }
.ex-knees .j-armR{ animation:k-mka .6s ease-in-out infinite }

/* lunges */
@keyframes k-lub{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(13px)} }
@keyframes k-luf{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-34deg)} }
@keyframes k-lufs{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(62deg)} }
@keyframes k-lur{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(26deg)} }
@keyframes k-lurs{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-58deg)} }
.ex-lunge .j-fig{ animation:k-lub 2.4s ease-in-out infinite }
.ex-lunge .j-legL{ animation:k-luf 2.4s ease-in-out infinite }
.ex-lunge .j-shinL{ animation:k-lufs 2.4s ease-in-out infinite }
.ex-lunge .j-legR{ animation:k-lur 2.4s ease-in-out infinite }
.ex-lunge .j-shinR{ animation:k-lurs 2.4s ease-in-out infinite }

/* calf raises */
@keyframes k-calf{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.ex-calf .j-fig{ animation:k-calf 1.4s ease-in-out infinite }

/* arm circles */
@keyframes k-circ{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
.ex-circle .j-armL{ animation:k-circ 2s linear infinite }
.ex-circle .j-armR{ animation:k-circ 2s linear infinite reverse }

/* shoulder press / curl / row (dumbbell) */
@keyframes k-prs{ 0%,100%{transform:rotate(148deg)} 50%{transform:rotate(178deg)} }
@keyframes k-prf{ 0%,100%{transform:rotate(-52deg)} 50%{transform:rotate(0)} }
@keyframes k-prb{ 0%,100%{transform:translateY(-40px)} 50%{transform:translateY(-64px)} }
.ex-press .j-armL,.ex-press .j-armR{ animation:k-prs 1.9s ease-in-out infinite }
.ex-press .j-foreL,.ex-press .j-foreR{ animation:k-prf 1.9s ease-in-out infinite }
.ex-press .j-bell{ animation:k-prb 1.9s ease-in-out infinite }
@keyframes k-cur{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-128deg)} }
@keyframes k-curb{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-26px)} }
.ex-curl .j-foreL,.ex-curl .j-foreR{ animation:k-cur 1.8s ease-in-out infinite }
.ex-curl .j-bell{ animation:k-curb 1.8s ease-in-out infinite }
@keyframes k-rowa{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-16deg)} }
@keyframes k-rowf{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-104deg)} }
@keyframes k-rowb{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(0,-22px)} }
.ex-row .j-fig{ transform:rotate(-46deg); transform-origin:60px 62px }
.ex-row .j-armL,.ex-row .j-armR{ animation:k-rowa 1.9s ease-in-out infinite }
.ex-row .j-foreL,.ex-row .j-foreR{ animation:k-rowf 1.9s ease-in-out infinite }
.ex-row .j-bell{ animation:k-rowb 1.9s ease-in-out infinite }

/* burpee — condensed squat/plank/jump cycle */
@keyframes k-brb{ 0%,100%{transform:translateY(0)} 30%{transform:translateY(16px)} 60%{transform:translateY(30px)} 80%{transform:translateY(-8px)} }
@keyframes k-brl{ 0%,100%{transform:rotate(0)} 30%{transform:rotate(54deg)} 60%{transform:rotate(84deg)} }
@keyframes k-brs{ 0%,100%{transform:rotate(0)} 30%{transform:rotate(-54deg)} 60%{transform:rotate(-84deg)} }
@keyframes k-bra{ 0%,100%{transform:rotate(6deg)} 45%{transform:rotate(-96deg)} 80%{transform:rotate(168deg)} }
.ex-burpee .j-fig{ animation:k-brb 2.2s ease-in-out infinite }
.ex-burpee .j-legL,.ex-burpee .j-legR{ animation:k-brl 2.2s ease-in-out infinite }
.ex-burpee .j-shinL,.ex-burpee .j-shinR{ animation:k-brs 2.2s ease-in-out infinite }
.ex-burpee .j-armL,.ex-burpee .j-armR{ animation:k-bra 2.2s ease-in-out infinite }

/* stretches */
@keyframes k-str{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(56deg)} }
.ex-stretch .j-fig{ animation:k-str 3s ease-in-out infinite; transform-origin:60px 62px }
@keyframes k-qs{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(112deg)} }
.ex-quadstretch .j-shinL{ animation:k-qs 3s ease-in-out infinite }
.ex-quadstretch .j-armL{ transform:rotate(-24deg) }

/* prone family: plank / push-up / climber / superman / bird dog / child's pose */
@keyframes k-push{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(13px)} }
.ex-push .j-body{ animation:k-push 1.9s ease-in-out infinite; transform-origin:98px 100px }
@keyframes k-hold{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(2px)} }
.ex-plank .j-body{ animation:k-hold 3.2s ease-in-out infinite }
@keyframes k-clk{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-52deg)} }
.ex-climb .j-legL{ animation:k-clk .62s ease-in-out infinite; transform-origin:86px 76px }
@keyframes k-sup{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-9deg)} }
.ex-super .j-body{ animation:k-sup 2.4s ease-in-out infinite; transform-origin:62px 72px }
@keyframes k-bird{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(34deg)} }
.ex-bird .j-legL{ animation:k-bird 2.6s ease-in-out infinite; transform-origin:86px 76px }
.ex-bird .j-armL{ animation:k-bird 2.6s ease-in-out infinite reverse; transform-origin:42px 67px }
@keyframes k-child{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(-5px)} }
.ex-child .j-body{ animation:k-child 4s ease-in-out infinite }

/* supine family: crunch / bridge / dead bug / leg raise */
@keyframes k-crn{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-22deg)} }
.ex-crunch .j-body{ animation:k-crn 1.9s ease-in-out infinite; transform-origin:74px 96px }
@keyframes k-brg{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-13px)} }
.ex-bridge .j-spine{ animation:k-brg 2.1s ease-in-out infinite; transform-origin:56px 93px }
@keyframes k-db{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-30deg)} }
.ex-deadbug .j-legL{ animation:k-db 2.4s ease-in-out infinite; transform-origin:74px 96px }
.ex-deadbug .j-armL{ animation:k-db 2.4s ease-in-out infinite reverse; transform-origin:42px 91px }
@keyframes k-lr{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-56deg)} }
.ex-legraise .j-legL{ animation:k-lr 2.2s ease-in-out infinite; transform-origin:74px 96px }

/* side plank */
@keyframes k-sp{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-4deg)} }
.ex-sideplank .j-body{ animation:k-sp 3s ease-in-out infinite; transform-origin:40px 66px }

/* light theme: the figures need a darker gold to stay legible on white */
html[data-theme="light"] .exfig .j-fig line,
html[data-theme="light"] .exfig .j-head{ stroke:var(--gold-3); }
html[data-theme="light"] .exfig .j-bell rect{ fill:var(--gold-3); }

/* Same problem across the whole Workout tab: --gold is #f5b301, which is only
   ~1.8:1 on a white card. Everything that paints gold TEXT or a gold HAIRLINE
   switches to the darker --gold-3 in light mode. Gold FILLS (the week tab, the
   START pill, the progress bar) keep the bright gold because they carry dark
   text on top and already have plenty of contrast. */
html[data-theme="light"] .planstats__v,
html[data-theme="light"] .pd-prog__v,
html[data-theme="light"] .pd-stats i,
html[data-theme="light"] .exrow__n,
html[data-theme="light"] .player__count,
html[data-theme="light"] .wkbadge b,
html[data-theme="light"] .wkbadge i,
html[data-theme="light"] .goalseg button.active,
html[data-theme="light"] .dayrow--next .daybadge b,
html[data-theme="light"] .dayrow--next .daybadge i{ color:var(--gold-3); }
html[data-theme="light"] .wkbadge,
html[data-theme="light"] .dayrow--next .daybadge{ border-color:var(--gold-3); }
html[data-theme="light"] .ring__fg{ stroke:var(--gold-3); }
html[data-theme="light"] .goalseg button.active{ box-shadow:inset 0 0 0 1.5px var(--gold-3); }
html[data-theme="light"] .plancard__rule{ background:var(--gold-3); }