/* ADAMANTIUM, the app (ludo/SPEC.md section 9). Every class starts with "fg-", every token "--fg-", everything is
   scoped to .fg-root. The host declares the faces (Inter for the whole app, Big Shoulders Display for the wordmark)
   and sets --fg-w / --fg-h on the mount; app.js writes the geometry table (--fg-g-ssTon, ...)
   next to them, so the rects the API returns and the boxes drawn here are the same numbers. Version 2 (19 Oct 2026):
   a plain, classic training app. Dark, one red, one type family, his photos and his clips. Motion: transform,
   opacity and stroke-dashoffset only. */

.fg-root {
  /* the page's tokens (5.2), same values */
  --fg-coal: #0B0B0C; --fg-soot: #151517; --fg-ash: #222326; --fg-iron: #3A3C41; --fg-steel: #8E9399; --fg-steel-hi: #C9CDD2;
  --fg-chalk: #F2F1EE; --fg-muted: #9EA2A8; --fg-faint: #55585E; --fg-hair: rgba(242, 241, 238, .10);
  --fg-red: #E1141C; --fg-red-ink: #FF5A5F;
  --fg-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
  /* the app's surfaces */
  --fg-s1: var(--fg-soot); --fg-s2: var(--fg-ash); --fg-s3: #2E3035; --fg-text: var(--fg-chalk);
  --fg-ios: cubic-bezier(.32, .72, 0, 1); --fg-out: cubic-bezier(.22, 1, .36, 1);
  --fg-mark: "Big Shoulders Display", "Inter", -apple-system, "Segoe UI", sans-serif;
  --fg-sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  position: relative; display: block; overflow: hidden; overflow: clip;
  width: var(--fg-w, 393px); height: var(--fg-h, 852px);
  background: var(--fg-coal); color: var(--fg-chalk);
  font: 400 17px/1.3 var(--fg-sans); letter-spacing: 0; text-align: left;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; font-kerning: normal;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  touch-action: pan-y; isolation: isolate; contain: layout paint style;
}
.fg-root :where(*), .fg-root :where(*)::before, .fg-root :where(*)::after { box-sizing: border-box; touch-action: pan-y; }
.fg-root :where(button) { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; }
.fg-root :where(h2, h3, h4, p, ul, ol, li, figure) { margin: 0; padding: 0; font: inherit; list-style: none; }
.fg-root :where(img, video, svg) { display: block; max-width: none; }
.fg-root :where(img) { -webkit-user-drag: none; }
.fg-root :where(b, strong) { font-weight: inherit; }
.fg-root :where(i, em) { font-style: normal; }
.fg-root :where(small) { font-size: inherit; }
.fg-story { pointer-events: none; }
.fg-desk.fg-live :where(button) { cursor: pointer; }
.fg-root :focus { outline: none; }
.fg-root :focus-visible { outline: 2px solid var(--fg-red-ink); outline-offset: 3px; }
.fg-sr, .fg-sr-t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------------ shared type and parts */
.fg-lt { font: 800 30px/34px var(--fg-sans); letter-spacing: -.022em; color: var(--fg-chalk); }
.fg-h3 { font: 700 19px/24px var(--fg-sans); letter-spacing: -.012em; color: var(--fg-chalk); }
.fg-ov { display: block; font: 600 12px/16px var(--fg-sans); letter-spacing: .08em; color: var(--fg-muted); white-space: nowrap; }
.fg-kick { display: block; font: 700 11px/14px var(--fg-sans); letter-spacing: .09em; color: var(--fg-red-ink); white-space: nowrap; }
.fg-kick--m { color: var(--fg-muted); }
.fg-kick--w { color: rgba(242, 241, 238, .78); }
.fg-meta { font: 500 15px/20px var(--fg-sans); color: var(--fg-muted); }
.fg-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--fg-s2); color: var(--fg-chalk); font: 600 12px/1 var(--fg-sans); letter-spacing: 0; white-space: nowrap; flex: none; }
.fg-chip--glass { background: rgba(11, 11, 12, .58); box-shadow: inset 0 0 0 1px rgba(242, 241, 238, .16); }
.fg-src { display: inline-flex; align-items: center; gap: 5px; font: 600 10px/13px var(--fg-sans); letter-spacing: .07em; color: var(--fg-muted); white-space: nowrap; }
.fg-src__ic { width: 11px; height: 11px; flex: none; }
.fg-draft { display: inline-flex; align-items: center; height: 18px; padding: 1px 6px 0; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--fg-faint); font: 700 9.5px/1 var(--fg-sans); letter-spacing: .08em; color: var(--fg-muted); vertical-align: 1px; white-space: nowrap; flex: none; }
/* on a red pill: the same tag, its rim and letters in chalk so it reads */
.fg-draft--on { box-shadow: inset 0 0 0 1px rgba(242, 241, 238, .6); color: rgba(242, 241, 238, .92); }
.fg-calc { font: 400 11px/1 var(--fg-sans); color: var(--fg-muted); letter-spacing: 0; white-space: nowrap; }
.fg-card { position: relative; display: block; background: var(--fg-s1); border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(242, 241, 238, .05); }
.fg-av { position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 50%; background: var(--fg-s2); color: var(--fg-muted); }
.fg-av::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(242, 241, 238, .12); }
.fg-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fg-ic-check { width: 16px; height: 16px; flex: none; }
.fg-icon { display: block; flex: none; }
.fg-wm { font: 900 14px/1 var(--fg-mark); letter-spacing: .08em; color: var(--fg-chalk); white-space: nowrap; font-kerning: none; }
.fg-wm--sm { font-size: 13px; }

/* pills: red is the primary action (52 pt) */
.fg-pill { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border-radius: 26px; background: var(--fg-red); color: #FFFFFF; font: 600 17px/1 var(--fg-sans); letter-spacing: -.005em; box-shadow: 0 12px 26px -14px rgba(225, 20, 28, .75); transition: transform .16s var(--fg-out); }
.fg-pill svg { width: 18px; height: 18px; flex: none; position: relative; }
.fg-pill__t { position: relative; }
.fg-pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: 0; transition: opacity .12s linear; pointer-events: none; }
.fg-pill.is-press { transform: scale(.97); }
.fg-pill.is-press::after, .fg-live .fg-pill:active::after { opacity: .2; }
.fg-live .fg-pill:active { transform: scale(.97); }
.fg-story .fg-pill { transition: none; }
.fg-pill__ok { display: none; align-items: center; gap: 8px; position: relative; }
.fg-pill.is-done { background: var(--fg-s2); color: var(--fg-muted); box-shadow: inset 0 0 0 1px var(--fg-hair); }
.fg-pill.is-done .fg-pill__t { display: none; }
.fg-pill.is-done .fg-pill__ok { display: flex; }
.fg-pill.is-done .fg-pill__ok svg { color: var(--fg-red-ink); }
.fg-live .fg-pill.is-done { pointer-events: none; }
/* live: a soft red pulse on "Valider la série" until his first touch (none under reduced motion) */
.fg-pill.fg-hint::before { content: ""; position: absolute; inset: -5px; border-radius: 31px; box-shadow: 0 0 0 2px rgba(255, 90, 95, .7), 0 0 22px 2px rgba(225, 20, 28, .45); opacity: 0; animation: fg-hint 2.4s .7s infinite both; pointer-events: none; }
@keyframes fg-hint { 0% { opacity: 0; transform: scale(.97); } 22% { opacity: 1; } 60% { opacity: 0; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.05); } }
.fg-osrm .fg-pill.fg-hint::before, .fg-rm .fg-pill.fg-hint::before { animation: none; opacity: 0; }

/* the 44 pt minimum targets: small controls extend their hit area (invisible) */
.fg-back--float::after, .fg-sh__x::after, .fg-step__b::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }

/* stills and clips: the poster, the clip over it once it plays; the frame is placed by app.js (its ratio and region only) */
.fg-vs { position: relative; display: block; overflow: hidden; background: var(--fg-s2); }
.fg-vs > img, .fg-vs > video { position: absolute; display: block; max-width: none; object-fit: cover; }
.fg-video { opacity: 0; transition: opacity .18s linear; pointer-events: none; }
.fg-vs.is-playing .fg-video { opacity: 1; }
/* the wipe for the bars */
.fg-wipe { display: block; overflow: hidden; }
.fg-wipe__i { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------------ the glass, layers, chrome */
.fg-glass { position: absolute; inset: 0; overflow: hidden; background: #000000; }
.fg-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--fg-coal); contain: layout style size; }
.fg-layer:not(.is-on):not(.is-leaving) { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.fg-layer.is-moving { box-shadow: -16px 0 40px -12px rgba(0, 0, 0, .7); }
.fg-l-program, .fg-l-level, .fg-l-session { z-index: 2; }
.fg-l-done { z-index: 3; background: transparent; pointer-events: none; }
.fg-live .fg-l-done .fg-dn__pub { pointer-events: auto; }
.fg-l-share { z-index: 8; background: transparent; }
.fg-l-splash { z-index: 10; }
/* the sheet stack: his session recedes under the sheet, about its top centre */
.fg-layer.is-stacked { transform-origin: 50% 8%; border-radius: 16px; }
.fg-scr { position: absolute; inset: 0; padding: 62px 16px 0; }

.fg-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 20; pointer-events: none; color: var(--fg-chalk); }
.fg-status__t { position: absolute; left: 0; width: 142px; top: 18px; text-align: center; font: 600 17px/1 var(--fg-sans); letter-spacing: -.012em; font-variant-numeric: tabular-nums; }
.fg-status__r { position: absolute; right: 26px; top: 20px; display: flex; align-items: center; gap: 6px; }
.fg-homeind { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: rgba(242, 241, 238, .82); z-index: 20; pointer-events: none; }
.fg-full .fg-status, .fg-full .fg-homeind { display: none; }
.fg-tabbar { position: absolute; left: 0; right: 0; top: var(--fg-g-tab, 769px); height: 83px; z-index: 6; display: flex; padding: 0 4px 34px; background: rgba(11, 11, 12, .94); box-shadow: inset 0 1px 0 var(--fg-hair); }
.fg-tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding-top: 9px; color: var(--fg-muted); font: 600 10px/12px var(--fg-sans); letter-spacing: .01em; white-space: nowrap; }
.fg-tab svg { width: 25px; height: 25px; }
.fg-tab.is-on { color: var(--fg-chalk); }
.fg-tab__dot { position: absolute; top: 2px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 2px; background: var(--fg-red); opacity: 0; }
.fg-tab.is-on .fg-tab__dot { opacity: 1; }
.fg-touch { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 21; pointer-events: none; opacity: 0; background: rgba(242, 241, 238, .2); box-shadow: 0 0 0 1.5px rgba(242, 241, 238, .92), 0 6px 18px rgba(0, 0, 0, .55); }
.fg-ripple { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 21; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1.5px rgba(242, 241, 238, .65); }

/* back buttons: the chevron and the previous title, in the tint (iOS) */
.fg-back { position: absolute; left: 10px; top: 54px; display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 8px 0 2px; color: var(--fg-red-ink); font: 500 17px/1 var(--fg-sans); white-space: nowrap; }
.fg-back svg { width: 22px; height: 22px; }
.fg-back--float { z-index: 2; left: 24px; top: calc(var(--fg-g-ssClip) + 10px); width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 18px; background: rgba(11, 11, 12, .64); color: var(--fg-chalk); box-shadow: inset 0 0 0 1px rgba(242, 241, 238, .14); }
.fg-back--float svg { width: 20px; height: 20px; margin-left: -2px; }

/* ------------------------------------------------------------------ splash */
.fg-sp { position: absolute; inset: 0; background: var(--fg-coal); }
.fg-sp__lock { position: absolute; left: 0; right: 0; top: calc(var(--fg-g-spMid) - 96px); display: flex; flex-direction: column; align-items: center; }
.fg-sp__ic { opacity: 0; border-radius: 15px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9); }
.fg-sp__wm { margin-top: 26px; font-size: 44px; line-height: 1; padding-left: .08em; }
.fg-sp__c { display: inline-block; opacity: 0; }
.fg-sp__rule { display: block; width: 44px; height: 3px; margin-top: 18px; border-radius: 2px; background: var(--fg-red); transform-origin: 50% 50%; opacity: 0; }
.fg-sp__tag { margin-top: 14px; font: 500 16px/20px var(--fg-sans); color: var(--fg-muted); opacity: 0; }
.fg-sp__src { position: absolute; left: 0; right: 0; bottom: 132px; justify-content: center; opacity: 0; }

/* ------------------------------------------------------------------ programs: his photo, the three programmes */
.fg-ps__top { position: absolute; left: 16px; top: 58px; height: 30px; display: flex; align-items: center; gap: 9px; }
.fg-ps__ic { border-radius: 7px; }
.fg-ps__wm { font-size: 17px; }
.fg-ps__hero { position: absolute; left: 16px; right: 16px; top: var(--fg-g-psHero); height: var(--fg-g-psHeroH); overflow: hidden; border-radius: 22px; background: var(--fg-s2); box-shadow: var(--fg-shadow); transform-origin: 50% 40%; }
.fg-ps__img { position: absolute; inset: 0; }
.fg-ps__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, 0) 38%, rgba(11, 11, 12, .55) 70%, rgba(11, 11, 12, .9)); }
.fg-ps__tx { position: absolute; left: 18px; right: 18px; bottom: 16px; }
.fg-ps__h { margin-top: 6px; font: 800 28px/32px var(--fg-sans); letter-spacing: -.022em; color: #FFFFFF; }
.fg-ps__s { margin-top: 4px; font: 500 14px/18px var(--fg-sans); color: rgba(242, 241, 238, .82); white-space: nowrap; }
.fg-ps__head { position: absolute; left: 16px; right: 16px; top: var(--fg-g-psHead); height: 24px; display: flex; align-items: center; justify-content: space-between; }
.fg-ps__n { font: 500 13px/1 var(--fg-sans); color: var(--fg-muted); }
.fg-ps__rows { position: absolute; left: 16px; right: 16px; top: var(--fg-g-psRows); display: flex; flex-direction: column; gap: 10px; }
.fg-prow { display: flex; align-items: center; gap: 14px; width: 100%; height: var(--fg-g-psRowH); padding: 0 14px 0 10px; overflow: hidden; text-align: left; }
.fg-prow__on { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--fg-red); background: rgba(225, 20, 28, .07); opacity: 0; pointer-events: none; }
.fg-prow__th { position: relative; flex: none; width: var(--fg-g-thW); height: var(--fg-g-thW); border-radius: 13px; }
.fg-prow__b { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.fg-prow__n { font: 700 17px/22px var(--fg-sans); letter-spacing: -.01em; color: var(--fg-chalk); white-space: nowrap; }
.fg-prow__m { font: 500 13px/17px var(--fg-sans); color: var(--fg-muted); white-space: nowrap; }
.fg-prow__c { margin-top: 3px; height: 22px; padding: 0 9px; font-size: 11.5px; }
.fg-prow > svg { position: relative; flex: none; color: var(--fg-muted); }

/* ------------------------------------------------------------------ the programme (one panel per programme, one shown) */
.fg-pd__p { position: absolute; inset: 0; }
.fg-pd__p:not(.is-cur) { display: none; }
.fg-pd__cover { position: absolute; left: 16px; right: 16px; top: var(--fg-g-pdCover); height: var(--fg-g-pdCoverH); overflow: hidden; border-radius: 22px; background: var(--fg-s2); box-shadow: var(--fg-shadow); }
.fg-pd__img { position: absolute; inset: 0; }
.fg-pd__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, .35), rgba(11, 11, 12, 0) 30%, rgba(11, 11, 12, 0) 48%, rgba(11, 11, 12, .86)); }
.fg-pd__chip { position: absolute; left: 14px; top: 14px; }
.fg-pd__t { position: absolute; left: 18px; right: 18px; bottom: 14px; font: 800 28px/32px var(--fg-sans); letter-spacing: -.022em; color: #FFFFFF; }
.fg-pd__q { position: absolute; left: 16px; right: 16px; top: var(--fg-g-pdQ); }
.fg-pd__qt { font: 600 17px/22px var(--fg-sans); letter-spacing: -.01em; color: var(--fg-chalk); }
.fg-pd__q .fg-src { margin-top: 8px; }
.fg-pd__st { position: absolute; left: 16px; right: 16px; top: var(--fg-g-pdSt); height: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fg-stat { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 12px; border-radius: 16px; }
.fg-stat__v { font: 800 22px/24px var(--fg-sans); letter-spacing: -.02em; color: var(--fg-chalk); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fg-stat__k { font: 500 11.5px/14px var(--fg-sans); color: var(--fg-muted); }
.fg-pd__cyt { position: absolute; left: 16px; top: var(--fg-g-pdCyT); }
.fg-pd__cy { position: absolute; left: 16px; right: 16px; top: var(--fg-g-pdCy); display: flex; flex-direction: column; gap: 8px; }
.fg-cy { display: flex; align-items: center; gap: 12px; height: var(--fg-g-pdCyH); padding: 0 14px; border-radius: 16px; }
.fg-cy__i { flex: none; width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; background: var(--fg-s2); font: 700 13px/1 var(--fg-sans); color: var(--fg-chalk); font-variant-numeric: tabular-nums; }
.fg-cy:first-child .fg-cy__i { background: var(--fg-red); color: #FFFFFF; }
.fg-cy__b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fg-cy__b b { font: 600 15px/19px var(--fg-sans); color: var(--fg-chalk); white-space: nowrap; }
.fg-cy__b span { font: 400 13px/17px var(--fg-sans); color: var(--fg-muted); white-space: nowrap; }
.fg-pd__go { position: absolute; left: 16px; right: 16px; top: var(--fg-g-pdGo); width: auto; }

/* ------------------------------------------------------------------ the level */
.fg-lv__t { position: absolute; left: 16px; top: 100px; }
.fg-lv__s { position: absolute; left: 16px; right: 16px; top: 140px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.fg-lv__opts { position: absolute; left: 16px; right: 16px; top: var(--fg-g-lvOpt); display: flex; flex-direction: column; gap: 10px; }
.fg-lo { display: flex; align-items: center; gap: 14px; width: 100%; height: var(--fg-g-lvOptH); padding: 0 14px 0 16px; text-align: left; transition: box-shadow .2s linear; }
.fg-lo.is-on { box-shadow: inset 0 0 0 2px var(--fg-red); background: #1A1214; }
.fg-story .fg-lo { transition: none; }
.fg-radio { position: relative; flex: none; width: 24px; height: 24px; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--fg-iron); }
.fg-radio__d { position: absolute; inset: 6px; border-radius: 6px; background: var(--fg-red); opacity: 0; }
.fg-lo.is-on .fg-radio { box-shadow: inset 0 0 0 2px var(--fg-red); }
.fg-lo.is-on .fg-radio__d { opacity: 1; }
.fg-lo__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fg-lo__b b { font: 700 17px/22px var(--fg-sans); letter-spacing: -.01em; color: var(--fg-chalk); white-space: nowrap; }
.fg-lo__b span { font: 500 13px/17px var(--fg-sans); color: var(--fg-muted); white-space: nowrap; }
.fg-lo__p { background: var(--fg-s3); }
.fg-lo.is-on .fg-lo__p { background: rgba(225, 20, 28, .18); color: #FFFFFF; }
.fg-lv__load { position: absolute; left: 16px; right: 16px; top: var(--fg-g-lvLoad); height: var(--fg-g-lvLoadH); display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 16px; transition: opacity .2s linear; }
.fg-lv__load.is-off > * { opacity: .4; }
.fg-lv__lk { display: flex; flex-direction: column; gap: 2px; }
.fg-lv__lk b { font: 600 16px/20px var(--fg-sans); color: var(--fg-chalk); }
.fg-lv__lk span { font: 400 12.5px/16px var(--fg-sans); color: var(--fg-muted); }
.fg-step { display: flex; align-items: center; gap: 6px; }
.fg-step__b { position: relative; width: 36px; height: 36px; border-radius: 18px; display: grid; place-items: center; background: var(--fg-s2); color: var(--fg-chalk); }
.fg-step__v { min-width: 76px; text-align: center; font: 800 20px/1 var(--fg-sans); letter-spacing: -.02em; color: var(--fg-chalk); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fg-lv__prev { position: absolute; left: 16px; right: 16px; top: var(--fg-g-lvPrev); height: var(--fg-g-lvPrevH); display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 16px; }
.fg-lv__pl { font: 700 17px/22px var(--fg-sans); letter-spacing: -.01em; color: var(--fg-chalk); white-space: nowrap; }
.fg-lv__ps { font: 500 13px/17px var(--fg-sans); color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fg-lv__go { position: absolute; left: 16px; right: 16px; top: var(--fg-g-lvGo); width: auto; }

/* ------------------------------------------------------------------ today */
.fg-td__date { position: absolute; left: 16px; top: 62px; }
.fg-td__t { position: absolute; left: 16px; top: 80px; }
.fg-td__av { position: absolute; right: 16px; top: 78px; width: 38px; height: 38px; }
.fg-td__av svg { width: 20px; height: 20px; }
.fg-td__prog { position: absolute; left: 16px; right: 16px; top: var(--fg-g-tdProg); height: var(--fg-g-tdProgH); width: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 8px; overflow: hidden; text-align: left; }
.fg-td__pb { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fg-td__pb b { font: 700 17px/22px var(--fg-sans); letter-spacing: -.01em; color: var(--fg-chalk); white-space: nowrap; }
.fg-td__pb span { font: 500 13px/17px var(--fg-sans); color: var(--fg-muted); white-space: nowrap; }
.fg-bar { position: absolute; left: 16px; right: 16px; bottom: 12px; height: 4px; border-radius: 2px; background: var(--fg-s2); overflow: hidden; }
.fg-bar__f { position: absolute; inset: 0; border-radius: inherit; background: var(--fg-red); transform-origin: 0 50%; transform: scaleX(0); }
.fg-td__wk { position: absolute; left: 16px; right: 16px; top: var(--fg-g-tdWk); height: var(--fg-g-tdWkH); padding: 12px 16px 0; }
.fg-td__wh { display: flex; align-items: center; justify-content: space-between; height: 18px; }
.fg-td__wh b { font: 600 14px/18px var(--fg-sans); color: var(--fg-chalk); }
.fg-td__wn { font: 500 13px/18px var(--fg-sans); color: var(--fg-muted); }
.fg-days { display: flex; justify-content: space-between; margin-top: 10px; padding: 0 2px; }
.fg-day { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 48px; }
.fg-day__k { font: 600 10.5px/12px var(--fg-sans); letter-spacing: .06em; color: var(--fg-muted); }
.fg-day__c { position: relative; width: 38px; height: 38px; border-radius: 19px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--fg-iron); }
.fg-day__f { position: absolute; inset: 0; border-radius: inherit; background: var(--fg-red); opacity: 0; }
.fg-day__n { position: relative; font: 600 14px/1 var(--fg-sans); color: var(--fg-chalk); font-variant-numeric: tabular-nums; }
.fg-day__c svg { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; color: #FFFFFF; opacity: 0; }
.fg-day--now .fg-day__c { box-shadow: inset 0 0 0 2px var(--fg-red); }
.fg-day--now .fg-day__k { color: var(--fg-red-ink); }
.fg-short .fg-day__c { width: 34px; height: 34px; }
.fg-td__card { position: absolute; left: 16px; right: 16px; top: var(--fg-g-tdCard); height: var(--fg-g-tdCardH); padding: 18px 16px 0; }
.fg-td__st { margin-top: 6px; font: 800 26px/30px var(--fg-sans); letter-spacing: -.022em; color: var(--fg-chalk); white-space: nowrap; }
.fg-ex { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 8px; border-radius: 14px; background: var(--fg-s2); }
.fg-ex__th { flex: none; width: var(--fg-g-exW); height: var(--fg-g-exW); border-radius: 10px; }
.fg-ex__b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fg-ex__b b { font: 600 15px/19px var(--fg-sans); color: var(--fg-chalk); white-space: nowrap; }
.fg-ex__b span { font: 500 13px/17px var(--fg-sans); color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fg-td__goal { margin-top: 14px; font: 500 14px/18px var(--fg-sans); color: var(--fg-muted); white-space: nowrap; }
.fg-td__goal b { color: var(--fg-chalk); font-weight: 700; font-variant-numeric: tabular-nums; }
.fg-td__go { position: absolute; left: 16px; right: 16px; bottom: 18px; width: auto; }
.fg-td__q { position: absolute; left: 16px; right: 16px; top: var(--fg-g-tdQ); height: var(--fg-g-tdQH); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 16px; }
.fg-td__qt { font: 700 19px/24px var(--fg-sans); letter-spacing: -.012em; color: var(--fg-chalk); white-space: nowrap; }
.fg-short .fg-td__card { padding-top: 14px; }
.fg-short .fg-td__st { font-size: 24px; line-height: 28px; }
.fg-short .fg-ex { margin-top: 12px; padding: 6px; }
.fg-short .fg-td__goal { margin-top: 10px; }
.fg-short .fg-td__go { bottom: 14px; }
.fg-short .fg-td__qt { font-size: 18px; line-height: 22px; }

/* ------------------------------------------------------------------ session */
.fg-ss { padding: 0; }
.fg-ss__clip { position: absolute; left: 16px; right: 16px; top: var(--fg-g-ssClip); height: var(--fg-g-ssClipH); border-radius: 20px; overflow: hidden; background: var(--fg-s2); box-shadow: var(--fg-shadow); }
.fg-ss__vs { position: absolute; inset: 0; }
.fg-ss__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, .38), rgba(11, 11, 12, 0) 26%, rgba(11, 11, 12, 0) 72%, rgba(11, 11, 12, .3)); pointer-events: none; }
/* the source of his clip (9.10), level with the back button */
.fg-ss__src { position: absolute; z-index: 2; right: 26px; top: calc(var(--fg-g-ssClip) + 17px); height: 22px; padding: 0 9px 0 7px; border-radius: 11px; background: rgba(11, 11, 12, .64); box-shadow: inset 0 0 0 1px rgba(242, 241, 238, .14); color: var(--fg-steel-hi); pointer-events: none; }
.fg-ss__head { position: absolute; left: 16px; right: 16px; top: var(--fg-g-ssHead); height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fg-ss__t { font: 800 22px/28px var(--fg-sans); letter-spacing: -.02em; color: var(--fg-chalk); white-space: nowrap; }
.fg-ss__sets { position: absolute; left: 16px; right: 16px; top: var(--fg-g-ssSets); display: flex; flex-direction: column; gap: 8px; }
.fg-set { position: relative; display: grid; grid-template-columns: 1fr 78px 66px 30px; align-items: center; width: 100%; height: 52px; padding: 0 12px 0 16px; border-radius: 14px; background: var(--fg-s1); box-shadow: inset 0 0 0 1px rgba(242, 241, 238, .05); overflow: hidden; text-align: left; }
.fg-set__done { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(225, 20, 28, .16), rgba(225, 20, 28, .06)); opacity: 0; }
.fg-set__k { position: relative; font: 600 17px/1 var(--fg-sans); color: var(--fg-chalk); }
.fg-set__r, .fg-set__l { position: relative; font: 500 15px/1 var(--fg-sans); color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fg-set.is-done .fg-set__r, .fg-set.is-done .fg-set__l { color: var(--fg-chalk); }
.fg-chk { position: relative; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--fg-iron); display: grid; place-items: center; }
.fg-chk__f { position: absolute; inset: 0; border-radius: 50%; background: var(--fg-red); opacity: 0; }
.fg-chk svg { position: relative; color: #FFFFFF; }
.fg-chk__p { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.fg-ss__lbl { position: absolute; left: 16px; top: var(--fg-g-ssTonL); font: 600 15px/18px var(--fg-sans); color: var(--fg-muted); }
.fg-ton { position: absolute; left: 16px; top: var(--fg-g-ssTon); height: 56px; display: flex; align-items: baseline; transform-origin: 0 60%; }
.fg-ton__n { position: relative; display: block; font: 800 56px/56px var(--fg-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fg-ton__u { position: relative; display: block; margin-left: 8px; font: 700 26px/56px var(--fg-sans); letter-spacing: -.01em; color: var(--fg-muted); }
.fg-tl { display: block; white-space: pre; }
.fg-tl::before { content: attr(data-t); }
.fg-tl + .fg-tl { position: absolute; left: 0; top: 0; }
.fg-tl--c { color: var(--fg-chalk); }
.fg-tl--r { color: var(--fg-red); }
.fg-rest { position: absolute; left: 0; right: 0; top: var(--fg-g-ssMid); width: max-content; margin: 0 auto; display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 5px 0 11px; border-radius: 13px; background: var(--fg-s2); color: var(--fg-muted); opacity: 0; }
.fg-rest > svg { width: 15px; height: 15px; }
.fg-rest__k { font: 600 13px/1 var(--fg-sans); }
.fg-rest__t { font: 700 13px/1 var(--fg-sans); color: var(--fg-chalk); font-variant-numeric: tabular-nums; }
.fg-rest .fg-draft { height: 18px; }
.fg-ss__go { position: absolute; left: 16px; right: 16px; top: var(--fg-g-ssPill); width: auto; }

/* ------------------------------------------------------------------ done (an overlay on the session) */
.fg-dn { position: absolute; inset: 0; }
.fg-dn__clip { position: absolute; left: 16px; right: 16px; top: var(--fg-g-ssClip); height: var(--fg-g-ssClipH); border-radius: 20px; overflow: hidden; }
.fg-dn__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, 0) 46%, rgba(11, 11, 12, .72) 100%); opacity: 0; }
.fg-dn__badge { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 6px; border-radius: 22px; background: rgba(11, 11, 12, .72); box-shadow: inset 0 0 0 1px rgba(242, 241, 238, .14), 0 10px 24px -12px rgba(0, 0, 0, .9); transform-origin: 22px 50%; opacity: 0; }
.fg-dn__ck { width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; background: var(--fg-red); color: #FFFFFF; }
.fg-dn__ck svg { width: 18px; height: 18px; }
.fg-dn__badge b { font: 700 16px/1 var(--fg-sans); color: var(--fg-chalk); white-space: nowrap; }
.fg-dn__data { position: absolute; left: 16px; right: 16px; top: var(--fg-g-ssMid); display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 600 15px/26px var(--fg-sans); color: var(--fg-muted); opacity: 0; white-space: nowrap; }
.fg-dn__pub { position: absolute; left: 16px; right: 16px; top: var(--fg-g-ssPill); width: auto; opacity: 0; }
.fg-dn__wk { position: absolute; left: 16px; right: 16px; top: var(--fg-g-ssWeek); text-align: center; font: 500 13px/18px var(--fg-sans); color: var(--fg-muted); white-space: nowrap; opacity: 0; }

/* ------------------------------------------------------------------ the exercises */
.fg-lb .fg-lt { position: absolute; left: 16px; top: 62px; }
.fg-lb__grid { position: absolute; left: 16px; right: 16px; top: var(--fg-g-lbGrid); height: var(--fg-g-lbGridH); }
.fg-tile { position: absolute; display: block; overflow: hidden; border-radius: 18px; background: var(--fg-s2); box-shadow: inset 0 0 0 1px rgba(242, 241, 238, .05); }
.fg-tile--0 { left: 0; top: 0; bottom: 0; width: 176px; }
.fg-tile--1 { right: 0; top: 0; left: 184px; height: calc(50% - 4px); }
.fg-tile--2 { right: 0; bottom: 0; left: 184px; height: calc(50% - 4px); }
.fg-tile__vs { position: absolute; inset: 0; }
.fg-tile__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, .5), rgba(11, 11, 12, 0) 30%, rgba(11, 11, 12, 0) 52%, rgba(11, 11, 12, .84)); pointer-events: none; }
.fg-tile__n { position: absolute; left: 12px; bottom: 12px; font: 700 17px/1 var(--fg-sans); letter-spacing: -.01em; color: var(--fg-chalk); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.fg-tile__pl { position: absolute; right: 10px; bottom: 9px; width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center; background: rgba(11, 11, 12, .62); color: var(--fg-chalk); box-shadow: inset 0 0 0 1px rgba(242, 241, 238, .16); }
.fg-tile__pl svg { width: 11px; height: 11px; margin-left: 2px; }
.fg-lb__ft { position: absolute; left: 16px; top: var(--fg-g-lbFmtT); }
.fg-lb__chips { position: absolute; left: 16px; right: 16px; top: var(--fg-g-lbChips); display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fg-fmt { position: relative; display: grid; place-items: center; height: 40px; border-radius: 20px; overflow: hidden; background: var(--fg-s1); box-shadow: inset 0 0 0 1px var(--fg-hair); font: 700 13px/1 var(--fg-sans); letter-spacing: .06em; color: var(--fg-chalk); }
.fg-fmt__on { position: absolute; inset: 0; border-radius: inherit; background: var(--fg-red); opacity: 0; }
.fg-fmt span { position: relative; padding-left: .06em; }
.fg-lb__def { position: absolute; left: 16px; right: 16px; top: var(--fg-g-lbDef); height: 80px; padding: 16px; }
.fg-lb__dts { position: relative; height: 48px; }
.fg-lb__dt { position: absolute; left: 0; right: 0; top: 0; font: 500 16px/23px var(--fg-sans); color: var(--fg-chalk); opacity: 0; }
.fg-lb__dt .fg-draft { margin-left: 2px; }

/* ------------------------------------------------------------------ the progress */
.fg-po__t { position: absolute; left: 16px; top: 62px; }
.fg-po__wk { position: absolute; right: 16px; top: 68px; }
.fg-po__st { position: absolute; left: 16px; right: 16px; top: var(--fg-g-poSt); height: var(--fg-g-poStH); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fg-po__st .fg-stat { padding: 0 12px; }
.fg-po__st .fg-stat__v { font-size: 24px; line-height: 26px; }
.fg-po__st .fg-stat__k { white-space: nowrap; }
.fg-po__ch { position: absolute; left: 16px; right: 16px; top: var(--fg-g-poCh); height: var(--fg-g-poChH); padding: 14px 16px 0; }
.fg-po__chh { display: flex; align-items: center; justify-content: space-between; height: 18px; }
.fg-po__chh b { font: 600 14px/18px var(--fg-sans); color: var(--fg-chalk); }
.fg-po__chh span { font: 500 12px/18px var(--fg-sans); color: var(--fg-muted); }
.fg-po__bars { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; padding: 0 8px; }
.fg-tb { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 52px; }
.fg-tb__v { font: 600 12px/14px var(--fg-sans); color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fg-tb__col { position: relative; width: 30px; }
.fg-tb__bar { position: absolute; left: 0; bottom: 0; width: 30px; border-radius: 8px; }
.fg-tb__bar .fg-wipe__i { border-radius: 8px; background: linear-gradient(180deg, #8E9399, #5A5E64); }
.fg-tb--j5 .fg-tb__bar .fg-wipe__i { background: linear-gradient(180deg, #FF5A5F, var(--fg-red)); }
.fg-tb__bar--half .fg-wipe__i { background: linear-gradient(180deg, #FF5A5F, var(--fg-red)); }
.fg-tb__d { font: 600 10.5px/12px var(--fg-sans); letter-spacing: .06em; color: var(--fg-muted); }
.fg-tb.is-now .fg-tb__d, .fg-tb.is-now .fg-tb__v { color: var(--fg-red-ink); }
.fg-po__rec { position: absolute; left: 16px; right: 16px; top: var(--fg-g-poRec); height: var(--fg-g-poRecH); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.fg-po__rk, .fg-po__rv { display: flex; flex-direction: column; gap: 2px; }
.fg-po__rv { align-items: flex-end; }
.fg-po__rk span, .fg-po__rv span { font: 500 12.5px/16px var(--fg-sans); color: var(--fg-muted); white-space: nowrap; }
.fg-po__rk b { font: 700 16px/20px var(--fg-sans); color: var(--fg-chalk); white-space: nowrap; }
.fg-po__rv b { font: 800 24px/26px var(--fg-sans); letter-spacing: -.02em; color: var(--fg-chalk); white-space: nowrap; }
.fg-po__hit { position: absolute; left: 16px; top: var(--fg-g-poHiT); }
.fg-po__hi { position: absolute; left: 16px; right: 16px; top: var(--fg-g-poHi); display: flex; flex-direction: column; gap: 6px; }
.fg-hi { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--fg-g-poHiH); padding: 0 16px; border-radius: 14px; }
.fg-hi__b { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fg-hi__b span { font: 500 12px/15px var(--fg-sans); color: var(--fg-muted); white-space: nowrap; }
.fg-hi__b b { font: 600 14.5px/19px var(--fg-sans); color: var(--fg-chalk); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fg-hi__v { font: 700 15px/1 var(--fg-sans); color: var(--fg-chalk); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ share (a sheet over his finished session) */
.fg-sh { position: absolute; inset: 0; }
.fg-sh__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .52); }
.fg-sh__panel { position: absolute; left: 0; right: 0; top: var(--fg-g-shTop); bottom: 0; display: flex; flex-direction: column; align-items: center; border-radius: 28px 28px 0 0; background: var(--fg-s1); box-shadow: inset 0 1px 0 var(--fg-hair), 0 -24px 60px -24px rgba(0, 0, 0, .9); }
.fg-sh__grab { position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--fg-iron); }
.fg-sh__x { position: absolute; right: 14px; top: 12px; width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; background: var(--fg-s2); color: var(--fg-chalk); }
.fg-sh__x svg { width: 16px; height: 16px; }
.fg-sh__src { position: absolute; left: 18px; top: 21px; }
.fg-sh__card { position: relative; flex: none; margin-top: 60px; width: var(--fg-g-shCardW); height: var(--fg-g-shCardH); border-radius: 18px; overflow: hidden; background: var(--fg-s2); box-shadow: var(--fg-shadow), inset 0 0 0 1px rgba(242, 241, 238, .06); }
.fg-sh__vs { position: absolute; inset: 0; }
.fg-sh__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, .55), rgba(11, 11, 12, 0) 22%, rgba(11, 11, 12, 0) 48%, rgba(11, 11, 12, .82) 100%); }
.fg-sh__brand { position: absolute; left: 14px; top: 14px; display: flex; align-items: center; gap: 8px; }
.fg-sh__brand .fg-icon { border-radius: 6px; }
.fg-sh__tx { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 2px; }
.fg-sh__tx span { font: 600 13px/17px var(--fg-sans); color: rgba(242, 241, 238, .82); white-space: nowrap; }
.fg-sh__tx b { font: 800 34px/38px var(--fg-sans); letter-spacing: -.03em; color: #FFFFFF; white-space: nowrap; }
.fg-sh__go { flex: none; margin-top: 24px; width: calc(100% - 32px); }
.fg-sh__t1, .fg-sh__t2 { position: relative; display: flex; align-items: center; gap: 8px; }
.fg-sh__t2 { display: none; }
.fg-sh__go.is-sent { background: var(--fg-s2); color: var(--fg-chalk); box-shadow: inset 0 0 0 1px var(--fg-hair); }
.fg-sh__go.is-sent .fg-sh__t1 { display: none; }
.fg-sh__go.is-sent .fg-sh__t2 { display: flex; }
.fg-sh__go.is-sent svg { color: var(--fg-red-ink); }
.fg-live .fg-sh__go.is-sent { pointer-events: none; }

/* ------------------------------------------------------------------ the 780 canvas: the hero zones compress */
.fg-short .fg-ps__h, .fg-short .fg-pd__t { font-size: 25px; line-height: 29px; }
.fg-short .fg-prow__c { display: none; }
.fg-short .fg-prow { gap: 12px; }

/* desktop pointer feedback, live only */
@media (hover: hover) {
  .fg-desk.fg-live .fg-tab:hover { color: var(--fg-chalk); }
  .fg-desk.fg-live .fg-pill:not(.is-done):hover::after { opacity: .1; }
  .fg-desk.fg-live .fg-fmt:hover { box-shadow: inset 0 0 0 1px rgba(242, 241, 238, .24); }
  .fg-desk.fg-live .fg-prow:hover, .fg-desk.fg-live .fg-lo:hover, .fg-desk.fg-live .fg-td__prog:hover { background: #1A1A1D; }
  .fg-desk.fg-live .fg-step__b:hover { background: var(--fg-s3); }
}