/* Najah Strength, the app (najah/SPEC.md section 6). Every class starts with "ns-", every token "--ns-", everything is
   scoped to .ns-root except the icon (.ns-icon*), which the page may draw in its search card. The host declares the
   fonts (Figtree 700 / 800 / 900, Inter 500 / 600) and sets --ns-w / --ns-h on the mount; app.js writes the geometry
   it shares with this sheet next to them (--ns-spIcon, --ns-rowH, --ns-expH, --ns-hero, --ns-prCard, --ns-fiMedia,
   --ns-seal). Her world: chalk and iron, her white boxes, one red line. Motion: transform, opacity, clip-path and
   stroke-dashoffset only. */

/* ------------------------------------------------------------------ the icon (works inside and outside the app) */
.ns-icon {
  position: relative; display: block; flex: none; width: var(--t, 56px); height: var(--t, 56px); overflow: hidden;
  border-radius: calc(var(--t, 56px) * .2237);
  background: radial-gradient(120% 120% at 18% 0%, #383838 0%, #1C1C1C 44%, #141414 72%);
  box-shadow: inset 0 0 0 max(.5px, calc(var(--t, 56px) * .008)) rgba(255, 255, 255, .09);
}
.ns-icon__box {
  position: absolute; left: 50%; top: calc(var(--t, 56px) * .17); width: calc(var(--t, 56px) * .54); height: calc(var(--t, 56px) * .44);
  margin-left: calc(var(--t, 56px) * -.27); border-radius: calc(var(--t, 56px) * .1); background: #FFFFFF; color: #141414;
  font-family: "Figtree", "Inter", -apple-system, "Segoe UI", sans-serif; font-weight: 900; font-size: calc(var(--t, 56px) * .36);
  line-height: calc(var(--t, 56px) * .45); letter-spacing: -.02em; text-align: center; font-synthesis: none;
}
.ns-icon__bar {
  position: absolute; left: 50%; top: calc(var(--t, 56px) * .71); width: calc(var(--t, 56px) * .46); height: calc(var(--t, 56px) * .076);
  margin-left: calc(var(--t, 56px) * -.23); border-radius: calc(var(--t, 56px) * .04); background: #E3342A; transform: rotate(-4deg);
}

/* ------------------------------------------------------------------ root */
.ns-root {
  --ns-chalk: #F2F0EB; --ns-paper: #FFFFFF; --ns-iron: #141414; --ns-steel: #5C5952; --ns-faint: #8C887F;
  --ns-hair: rgba(20, 20, 20, .12); --ns-hair2: rgba(20, 20, 20, .2); --ns-well: #E7E4DD; --ns-rubber: #202020;
  --ns-red: #E3342A; --ns-red-ink: #B72218; --ns-red-soft: rgba(227, 52, 42, .1);
  --ns-shadow: 0 18px 40px -18px rgba(0, 0, 0, .28);
  --ns-card-sh: 0 1px 1px rgba(20, 20, 20, .04), 0 10px 24px -16px rgba(20, 20, 20, .3);
  --ns-ios: cubic-bezier(.32, .72, 0, 1); --ns-out: cubic-bezier(.22, 1, .36, 1);
  --ns-display: "Figtree", "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ns-sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ns-hl: 1px;
  position: relative; display: block; overflow: hidden; overflow: clip;
  width: var(--ns-w, 393px); height: var(--ns-h, 852px);
  background: var(--ns-chalk); color: var(--ns-iron);
  font: 500 15px/1.35 var(--ns-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;
}
@media (min-resolution: 2dppx) { .ns-root { --ns-hl: .5px; } }
.ns-root :where(*), .ns-root :where(*)::before, .ns-root :where(*)::after { box-sizing: border-box; touch-action: pan-y; }
.ns-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; }
.ns-root :where(h2, h3, h4, p, ul, ol, li) { margin: 0; padding: 0; font: inherit; list-style: none; }
.ns-root :where(img, video, svg) { display: block; max-width: none; }
.ns-root :where(img) { -webkit-user-drag: none; }
.ns-root :where(b, strong) { font-weight: inherit; }
.ns-root :where(i, em) { font-style: normal; }
.ns-story { pointer-events: none; }
.ns-desk.ns-live :where(button, [data-act]) { cursor: pointer; }
.ns-root :focus { outline: none; }
.ns-root :focus-visible { outline: 2px solid var(--ns-red-ink); outline-offset: 3px; border-radius: 12px; }
.ns-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ glass, layers, chrome */
.ns-glass { position: absolute; inset: 0; overflow: hidden; background: var(--ns-chalk); }
.ns-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--ns-chalk); contain: layout style size; }
.ns-layer:not(.is-on):not(.is-leaving) { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.ns-layer.is-moving { box-shadow: -14px 0 38px -10px rgba(0, 0, 0, .2); }
.ns-l-start { z-index: 2; } .ns-l-exercise { z-index: 3; } .ns-l-first { z-index: 8; } .ns-l-splash { z-index: 9; }
.ns-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 20; pointer-events: none; color: var(--ns-iron); transition: color .2s linear; }
.ns-status__t { position: absolute; left: 0; width: 140px; top: 18px; text-align: center; font: 600 17px/1 var(--ns-sans); letter-spacing: -.012em; font-variant-numeric: tabular-nums; }
.ns-status__r { position: absolute; right: 26px; top: 20px; display: flex; align-items: center; gap: 6px; }
.ns-status.is-light { color: #FFFFFF; }
.ns-status.is-light .ns-status__t, .ns-status.is-light .ns-status__r { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.ns-homeind { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: rgba(20, 20, 20, .88); z-index: 20; pointer-events: none; }
.ns-full .ns-status, .ns-full .ns-homeind { display: none; }
.ns-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 83px; z-index: 5; display: flex; padding: 0 8px 34px; background: rgb(242, 240, 235); box-shadow: inset 0 var(--ns-hl) 0 var(--ns-hair2); }
.ns-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding-top: 7px; color: var(--ns-faint); font: 600 11px/1.2 var(--ns-sans); letter-spacing: .005em; }
.ns-tab svg { width: 26px; height: 26px; }
.ns-tab.is-on { color: var(--ns-iron); }
.ns-touch { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 21; pointer-events: none; opacity: 0; background: rgba(20, 20, 20, .18); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95), 0 6px 18px rgba(0, 0, 0, .28); }
.ns-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(20, 20, 20, .55), inset 0 0 0 1px rgba(255, 255, 255, .6); }
.ns-toast { position: absolute; left: 50%; bottom: 120px; z-index: 22; transform: translate3d(-50%, 8px, 0); opacity: 0; padding: 10px 16px; border-radius: 18px; background: var(--ns-iron); color: #FFFFFF; font: 600 14px/1.2 var(--ns-sans); white-space: nowrap; pointer-events: none; transition: opacity .2s linear, transform .3s var(--ns-out); }
.ns-toast.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); }

/* ------------------------------------------------------------------ shared parts */
.ns-scr { position: absolute; inset: 0; padding: 64px 24px 0; display: flex; flex-direction: column; align-items: stretch; }
.ns-ov { display: block; font: 700 12px/14px var(--ns-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ns-steel); }
.ns-ah { font: 800 26px/1.1 var(--ns-display); letter-spacing: -.01em; color: var(--ns-iron); }
.ns-card { position: relative; background: var(--ns-paper); border-radius: 20px; box-shadow: var(--ns-card-sh); }
.ns-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ns-av { position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; background: var(--ns-well); }
.ns-vs { position: relative; display: block; overflow: hidden; background: var(--ns-rubber); }
.ns-vs__p, .ns-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ns-video { opacity: 0; transition: opacity .2s linear; pointer-events: none; }
.ns-vs.is-playing .ns-video { opacity: 1; }
.ns-src { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/14px var(--ns-sans); letter-spacing: .01em; color: var(--ns-steel); white-space: nowrap; }
.ns-src__ic { width: 12px; height: 12px; flex: none; color: var(--ns-faint); }
.ns-draft { display: inline-flex; align-items: center; height: 16px; padding: 1px 5px 0; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--ns-faint); font: 700 9.5px/1 var(--ns-display); letter-spacing: .1em; color: var(--ns-steel); white-space: nowrap; }
.ns-calc { display: inline-block; font: 600 10.5px/1 var(--ns-sans); letter-spacing: .02em; color: var(--ns-faint); white-space: nowrap; }
.ns-calc--inv { color: rgba(255, 255, 255, .58); }
.ns-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--ns-well); font: 600 12px/1 var(--ns-sans); white-space: nowrap; }
.ns-chip--red { background: var(--ns-red-soft); color: var(--ns-red-ink); }
.ns-chip--that { height: 28px; padding: 0 12px; border-radius: 14px; background: var(--ns-red); color: #FFFFFF; font: 600 13px/1.2 var(--ns-sans); }
.ns-ic-check { width: 14px; height: 14px; }
.ns-tick { width: 16px; height: 16px; }
.ns-tickp { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.ns-note__by { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/16px var(--ns-sans); color: var(--ns-steel); }
.ns-cue { font: 500 14px/1.35 var(--ns-sans); color: var(--ns-iron); }
.ns-nw { white-space: nowrap; }
.ns-brand { display: flex; align-items: center; gap: 10px; height: 28px; font: 800 15px/1 var(--ns-display); letter-spacing: -.01em; }
/* her white box: Figtree 800, iron on paper, rounded, centred; never a shadow over video */
.ns-box { display: inline-block; padding: .32em .62em; border-radius: 14px; background: var(--ns-paper); color: var(--ns-iron); font-family: var(--ns-display); font-weight: 800; text-align: center; }
.ns-box--h { font-size: 26px; line-height: 1.1; letter-spacing: -.01em; max-width: 100%; }
.ns-box--xl { font-size: 32px; line-height: 1.12; letter-spacing: -.012em; border-radius: 16px; }
/* the red line on "No": drawn left to right (stroke-dashoffset), tilted -4 degrees, a little past the word */
.ns-no { position: relative; display: inline-block; }
.ns-strike { position: absolute; left: -.18em; top: .37em; width: 1.7em; height: .3em; overflow: visible; transform: rotate(-4deg); pointer-events: none; }
.ns-strike path { fill: none; stroke: var(--ns-red); stroke-width: 9.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
/* pills: iron is the action; off is waiting */
.ns-pill { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border-radius: 28px; background: var(--ns-iron); color: #FFFFFF; font: 600 17px/1 var(--ns-sans); letter-spacing: -.005em; box-shadow: 0 14px 26px -16px rgba(0, 0, 0, .6); transition: transform .16s var(--ns-out), background-color .22s linear, color .22s linear, box-shadow .22s linear; }
.ns-pill svg { width: 18px; height: 18px; flex: none; }
.ns-pill.is-press, .ns-live .ns-pill:active { transform: scale(.97); }
.ns-pill.is-off { background: var(--ns-well); color: var(--ns-faint); box-shadow: none; }
.ns-cta { position: absolute; left: 24px; right: 24px; bottom: 52px; }
.ns-ib { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--ns-iron); background: var(--ns-paper); }
.ns-ib::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.ns-ib--glass { background: rgba(20, 20, 20, .4); color: #FFFFFF; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* the seal "THAT girl" */
.ns-seal { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--ns-red); color: #FFFFFF; box-shadow: 0 0 0 4px var(--ns-chalk), 0 16px 30px -14px rgba(183, 34, 24, .75); transform: rotate(-8deg); }
.ns-seal__r { position: absolute; inset: 0; width: 100%; height: 100%; }
.ns-seal__t { position: relative; font: 600 13px/1 var(--ns-sans); letter-spacing: .01em; white-space: nowrap; }

/* ------------------------------------------------------------------ splash */
.ns-sp { position: absolute; inset: 0; }
.ns-sp__light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(110% 64% at 16% 0%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 62%); }
.ns-sp__icon { position: absolute; left: 50%; top: var(--ns-spIcon); width: 104px; height: 104px; margin-left: -52px; }
.ns-sp__icon .ns-icon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 22px 40px -22px rgba(0, 0, 0, .55); }
.ns-sp__wm { position: absolute; left: 0; right: 0; top: calc(var(--ns-spIcon) + 130px); height: 42px; overflow: hidden; text-align: center; }
.ns-sp__wf { display: inline-block; font: 900 32px/42px var(--ns-display); letter-spacing: -.02em; color: var(--ns-iron); }
.ns-sp__bio { position: absolute; left: 50%; top: calc(var(--ns-spIcon) + 184px); width: 280px; margin-left: -140px; text-align: center; font: 500 15px/1.35 var(--ns-sans); color: var(--ns-steel); text-wrap: balance; }
.ns-sp__src { position: absolute; left: 0; right: 0; top: calc(var(--ns-spIcon) + 236px); text-align: center; }
.ns-sp__dots { position: absolute; left: 50%; bottom: 92px; display: flex; gap: 6px; width: 134px; margin-left: -67px; }
.ns-sp__dots > i { flex: 1; height: 4px; border-radius: 2px; background: var(--ns-hair); overflow: hidden; }
.ns-sp__dots > i > i { display: block; width: 100%; height: 100%; background: var(--ns-iron); transform-origin: 0 50%; transform: scaleX(0); }
.ns-sp__dots > i:last-child > i { background: var(--ns-red); }

/* ------------------------------------------------------------------ start */
.ns-st__t { margin-top: 22px; font: 900 32px/1.06 var(--ns-display); letter-spacing: -.02em; }
.ns-st__s { margin-top: 8px; font: 500 15px/1.35 var(--ns-sans); color: var(--ns-steel); }
.ns-st__opts { margin-top: 24px; display: grid; gap: 12px; }
.ns-opt { position: relative; display: flex; align-items: center; gap: 14px; height: 80px; padding: 0 16px 0 12px; border-radius: 18px; background: var(--ns-paper); box-shadow: var(--ns-card-sh); transition: transform .16s var(--ns-out); }
.ns-opt.is-press, .ns-live .ns-opt:active { transform: scale(.98); }
.ns-opt__ring { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--ns-iron); opacity: 0; pointer-events: none; }
.ns-opt__th { flex: none; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--ns-well); }
.ns-opt__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ns-opt__n { font: 800 19px/1.15 var(--ns-display); letter-spacing: -.01em; }
.ns-opt__m { font: 500 13px/1.3 var(--ns-sans); color: var(--ns-steel); }
.ns-radio { position: relative; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ns-hair2); color: #FFFFFF; }
.ns-radio__f { position: absolute; inset: 0; border-radius: 50%; background: var(--ns-iron); opacity: 0; transform: scale(.4); }
.ns-radio .ns-ic-check { position: relative; opacity: 0; }
.ns-st__w { margin-top: 32px; font: 800 18px/1.2 var(--ns-display); letter-spacing: -.01em; }
.ns-st__tiles { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.ns-tile { position: relative; height: 100px; border-radius: 18px; background: var(--ns-paper); box-shadow: var(--ns-card-sh); overflow: hidden; transition: transform .16s var(--ns-out); }
.ns-tile.is-press, .ns-live .ns-tile:active { transform: scale(.97); }
.ns-tile__bg { position: absolute; inset: 0; border-radius: inherit; background: var(--ns-iron); opacity: 0; }
.ns-tile__in { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; font: 600 14px/1 var(--ns-sans); color: var(--ns-iron); transition: color .18s linear; }
.ns-tile__in svg { width: 28px; height: 28px; }
.ns-tile.is-on .ns-tile__in { color: #FFFFFF; }

/* ------------------------------------------------------------------ plan */
.ns-pl__t { margin-top: 6px; font: 900 34px/1 var(--ns-display); letter-spacing: -.02em; }
.ns-pl__s { margin-top: 8px; font: 500 15px/1.35 var(--ns-sans); color: var(--ns-steel); }
.ns-tiers { margin-top: 18px; padding: 4px 0; }
.ns-tiers__rail { position: absolute; left: 30px; top: 36px; bottom: 36px; width: 2px; border-radius: 1px; background: var(--ns-hair); transform-origin: 50% 0; }
.ns-tier { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 14px 16px; }
.ns-tier + .ns-tier { box-shadow: inset 0 var(--ns-hl) 0 var(--ns-hair); }
.ns-tier__nd { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ns-paper); box-shadow: inset 0 0 0 1.5px var(--ns-hair2); font: 800 14px/1 var(--ns-display); color: var(--ns-faint); }
.ns-tier--cur .ns-tier__nd { background: var(--ns-iron); color: #FFFFFF; box-shadow: none; }
.ns-tier__hd { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ns-tier__hd b { font: 800 19px/1.15 var(--ns-display); letter-spacing: -.01em; }
.ns-tier:not(.ns-tier--cur) .ns-tier__hd b { color: var(--ns-steel); }
.ns-tier__hd span { font: 500 13px/1.3 var(--ns-sans); color: var(--ns-steel); }
.ns-tier__lk { color: var(--ns-faint); display: grid; place-items: center; }
.ns-tier__wk, .ns-wk, .ns-tier__wh { grid-column: 2 / 4; }
.ns-tier__wk { margin-top: 14px; display: flex; align-items: baseline; gap: 6px; font: 600 14px/1.2 var(--ns-sans); }
.ns-wk { margin-top: 8px; display: flex; gap: 4px; }
.ns-wk__s { flex: 1; height: 8px; border-radius: 4px; background: var(--ns-well); overflow: hidden; }
.ns-wk__f { display: block; width: 100%; height: 100%; background: var(--ns-iron); transform-origin: 0 50%; transform: scaleX(0); }
.ns-wk__s:nth-child(3) .ns-wk__f { background: var(--ns-red); }
.ns-tier__wh { margin-top: 12px; display: flex; gap: 6px; }
.ns-wh { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--ns-well); font: 600 12.5px/1 var(--ns-sans); color: var(--ns-steel); }
.ns-wh__ck { display: none; color: var(--ns-red); margin-left: -3px; }
.ns-wh__ck .ns-tick { width: 14px; height: 14px; }
.ns-wh.is-on { background: var(--ns-iron); color: #FFFFFF; }
.ns-wh.is-on .ns-wh__ck { display: inline-flex; }
.ns-tdl { margin-top: 14px; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 16px 0 12px; text-align: left; }
.ns-tdl__i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--ns-iron); color: #FFFFFF; }
.ns-tdl__i svg { width: 15px; height: 15px; }
.ns-tdl__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ns-tdl__tx b { font: 600 15px/1.2 var(--ns-sans); }
.ns-tdl__tx > span { display: inline-flex; align-items: baseline; gap: 5px; font: 500 13px/1.2 var(--ns-sans); color: var(--ns-steel); }
.ns-tdl > .ns-ic-chev { color: var(--ns-faint); }
.ns-live .ns-tdl:active { opacity: .7; }
.ns-coach { margin-top: 14px; display: flex; align-items: center; gap: 14px; padding: 14px; }
.ns-coach__ph { flex: none; width: 72px; height: 90px; border-radius: 14px; overflow: hidden; background: var(--ns-well); }
.ns-coach__tx { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.ns-coach__tx b { font: 800 18px/1.15 var(--ns-display); letter-spacing: -.01em; }
.ns-coach__tx .ns-her { font: 500 14px/1.35 var(--ns-sans); color: var(--ns-iron); }

/* ------------------------------------------------------------------ today */
.ns-td__t { margin-top: 6px; }
.ns-sess { position: relative; margin-top: 16px; height: 108px; padding: 14px 16px; border-radius: 20px; background: var(--ns-iron); color: #FFFFFF; box-shadow: var(--ns-shadow); }
.ns-sess__a { display: flex; align-items: baseline; gap: 6px; }
.ns-sess__n { font: 900 40px/1 var(--ns-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ns-sess__u { font: 600 15px/1 var(--ns-sans); }
.ns-sess__rest { position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 14px; background: rgba(255, 255, 255, .13); font: 600 12.5px/1 var(--ns-sans); }
.ns-sess__m { margin-top: 6px; font: 500 13px/1.2 var(--ns-sans); color: rgba(255, 255, 255, .72); }
.ns-sess__bar { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; gap: 4px; height: 6px; }
.ns-sb { position: relative; display: block; height: 100%; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.ns-sb__f { position: absolute; inset: 0; border-radius: inherit; background: #FFFFFF; transform-origin: 0 50%; transform: scaleX(0); }
.ns-sb:first-child .ns-sb__f { background: var(--ns-red); }
.ns-rows { margin-top: 12px; display: flex; flex-direction: column; }
.ns-row { display: flex; align-items: center; gap: 12px; height: 70px; box-shadow: inset 0 calc(-1 * var(--ns-hl)) 0 var(--ns-hair); transition: opacity .16s linear; }
.ns-row:last-child { box-shadow: none; }
.ns-live .ns-row:active { opacity: .6; }
.ns-row__th { flex: none; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: var(--ns-well); }
.ns-row__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ns-row__tx b { font: 600 15px/1.25 var(--ns-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-row__tx > span { font: 500 13px/1.25 var(--ns-sans); color: var(--ns-steel); font-variant-numeric: tabular-nums; }
.ns-row__end { flex: none; display: flex; align-items: center; gap: 8px; color: var(--ns-faint); }
.ns-row__ok { display: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ns-iron); color: var(--ns-red); }
.ns-row.is-done .ns-row__ok { display: grid; }
.ns-note { margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--ns-paper); box-shadow: var(--ns-card-sh); }
.ns-note__tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ns-note__l { font: 600 15px/1.3 var(--ns-sans); color: var(--ns-iron); }
.ns-td__go { bottom: 101px; height: 52px; border-radius: 26px; }

/* ------------------------------------------------------------------ exercise */
.ns-ex { position: absolute; inset: 0; }
.ns-ex__media { position: absolute; left: 0; top: 0; right: 0; height: 300px; overflow: hidden; background: var(--ns-rubber); }
.ns-ex__vs { position: absolute; inset: 0; }
.ns-ex__shade { position: absolute; left: 0; right: 0; top: 0; height: 120px; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0)); }
.ns-ex__back { position: absolute; left: 16px; top: 56px; }
.ns-ex__body { position: absolute; left: 24px; right: 24px; top: 316px; display: flex; flex-direction: column; }
.ns-ex__t { font: 800 24px/1.2 var(--ns-display); letter-spacing: -.01em; }
.ns-ex__m { margin-top: 4px; font: 600 15px/1.3 var(--ns-sans); color: var(--ns-steel); font-variant-numeric: tabular-nums; }
.ns-sets { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ns-set { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 52px; padding: 0 12px; border-radius: 14px; background: var(--ns-paper); box-shadow: inset 0 0 0 1px var(--ns-hair); transition: background-color .2s linear, box-shadow .2s linear; }
.ns-set__n { font: 600 11px/1 var(--ns-sans); letter-spacing: .02em; color: var(--ns-steel); }
.ns-set__v { font: 800 15px/1.1 var(--ns-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ns-set__ok { position: absolute; right: 9px; top: 8px; color: var(--ns-red); opacity: 0; }
.ns-set__ok .ns-tick { width: 15px; height: 15px; }
.ns-set.is-cur { box-shadow: inset 0 0 0 2px var(--ns-iron); }
.ns-set.is-done { background: var(--ns-iron); box-shadow: none; color: #FFFFFF; }
.ns-set.is-done .ns-set__n { color: rgba(255, 255, 255, .66); }
.ns-set.is-done .ns-set__ok { opacity: 1; }
.ns-cues { margin-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; }
.ns-cues.is-next { gap: 10px; }
.ns-upn { display: flex; align-items: center; gap: 12px; width: 100%; }
.ns-next { margin-top: 12px; display: flex; align-items: center; gap: 8px; height: 32px; font: 600 15px/1 var(--ns-sans); opacity: 0; }
.ns-next__t { font-variant-numeric: tabular-nums; }
.ns-ex__log { overflow: hidden; }
.ns-ex__fill { position: absolute; inset: 0; background: rgba(255, 255, 255, .14); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
.ns-ex__lt, .ns-ex__rt, .ns-ex__dt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none; }
.ns-ex__rt { justify-content: space-between; padding: 0 22px; opacity: 0; }
.ns-ex__rt > span { display: inline-flex; align-items: center; gap: 8px; }
.ns-ex__rt > span svg { width: 16px; height: 16px; }
.ns-ex__rs { font: 800 20px/1 var(--ns-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.ns-ex__dt { opacity: 0; }

/* ------------------------------------------------------------------ progression: the ladder */
.ns-pr { position: absolute; inset: 0; }
.ns-pr__hero { position: absolute; left: 0; top: 0; right: 0; height: var(--ns-hero); overflow: hidden; background: var(--ns-rubber); }
.ns-pr__vs { position: absolute; inset: 0; opacity: 0; }
.ns-pr__shade { position: absolute; left: 0; right: 0; top: 0; height: 110px; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); }
.ns-pr__box { position: absolute; left: 16px; right: 16px; bottom: 16px; text-align: center; }
.ns-pr__src { position: absolute; left: 24px; top: calc(var(--ns-hero) + 9px); }
.ns-lad { position: absolute; left: 24px; right: 24px; top: var(--ns-prCard); height: calc(5 * var(--ns-rowH) + var(--ns-expH)); overflow: hidden; }
.ns-lad__rail, .ns-lad__fill { position: absolute; left: 27px; top: 0; width: 2px; height: 1000px; border-radius: 1px; transform-origin: 50% 0; transform: scaleY(0); pointer-events: none; }
.ns-lad__rail { background: var(--ns-hair); }
.ns-lad__fill { background: var(--ns-iron); }
.ns-rung { position: absolute; left: 0; right: 0; top: 0; height: var(--ns-expH); }
.ns-nd { position: absolute; left: 16px; top: calc(var(--ns-rowH) / 2 - 12px); width: 24px; height: 24px; }
.ns-nd > span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; }
.ns-nd__lk { background: var(--ns-paper); box-shadow: inset 0 0 0 1.5px var(--ns-hair2); font: 800 11px/1 var(--ns-display); color: var(--ns-faint); }
.ns-nd__cur { background: var(--ns-paper); box-shadow: inset 0 0 0 2.5px var(--ns-red); opacity: 0; }
.ns-nd__cur i { width: 8px; height: 8px; border-radius: 50%; background: var(--ns-red); }
.ns-nd__dn { background: var(--ns-iron); color: var(--ns-red); opacity: 0; }
.ns-nd__dn .ns-tick { width: 14px; height: 14px; }
.ns-rung__t { position: absolute; left: 52px; right: 108px; top: 0; height: var(--ns-rowH); display: flex; align-items: center; font: 600 15px/1.2 var(--ns-sans); white-space: nowrap; }
.ns-rung--goal .ns-rung__t { right: 92px; font-size: 14.5px; }
.ns-rung.is-lk .ns-rung__t { color: var(--ns-steel); }
.ns-rung__st { position: absolute; right: 14px; top: 0; height: var(--ns-rowH); display: grid; align-items: center; justify-items: end; }
.ns-rung__st > * { grid-area: 1 / 1; }
.ns-rung__lk { display: grid; place-items: center; color: var(--ns-faint); }
.ns-rung__cur { height: 24px; padding: 0 9px; font-size: 11.5px; opacity: 0; }
.ns-rung__dn { display: inline-flex; align-items: baseline; gap: 5px; font: 500 12.5px/1 var(--ns-sans); color: var(--ns-steel); white-space: nowrap; opacity: 0; }
.ns-rung__x { position: absolute; left: 52px; right: 16px; top: var(--ns-rowH); opacity: 0; }
.ns-rung__l { font: 500 14px/1.35 var(--ns-sans); color: var(--ns-iron); text-wrap: pretty; }
.ns-rung__x > .ns-src { margin-top: 4px; }
.ns-rung__d { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.ns-rung__dl { font: 600 14px/1.35 var(--ns-sans); }
.ns-rung__that { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ns-pr__cues { position: absolute; left: 24px; right: 24px; top: calc(var(--ns-prCard) + 5 * var(--ns-rowH) + var(--ns-expH) + 12px); padding: 12px 16px; }
.ns-pr__ch { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ns-pr__cues .ns-cue { margin-top: 4px; }
.ns-pr__log { bottom: 99px; height: 52px; border-radius: 26px; }
.ns-pr__lt, .ns-pr__dt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none; }
.ns-pr__dt { opacity: 0; }
.ns-pr__pulse { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--ns-red); opacity: 0; pointer-events: none; }
.ns-pr__log.is-hint .ns-pr__pulse { animation: ns-pulse 1.7s var(--ns-out) infinite; }
@keyframes ns-pulse { 0% { opacity: .9; transform: scale(1, 1); } 70% { opacity: 0; transform: scale(1.06, 1.42); } 100% { opacity: 0; transform: scale(1.06, 1.42); } }
.ns-osrm .ns-pr__log.is-hint .ns-pr__pulse, .ns-rm .ns-pr__log.is-hint .ns-pr__pulse { animation: none; opacity: 1; transform: none; box-shadow: 0 0 0 3px var(--ns-chalk), 0 0 0 5px var(--ns-red); }

/* ------------------------------------------------------------------ first: the signature overlay */
.ns-fi { position: absolute; inset: 0; }
.ns-fi__media { position: absolute; left: 0; top: 0; right: 0; height: var(--ns-fiMedia); overflow: hidden; background: var(--ns-rubber); transform-origin: 50% 40%; }
.ns-fi__vs { position: absolute; inset: 0; }
.ns-fi__shade { position: absolute; left: 0; right: 0; top: 0; height: 120px; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0)); }
.ns-fi__boxw { position: absolute; left: 16px; right: 16px; bottom: calc(var(--ns-seal) / 2 + 36px); text-align: center; }
.ns-fi__boxw .ns-strike { opacity: 0; }
.ns-fi__x { position: absolute; right: 16px; top: 56px; z-index: 2; }
.ns-fi__panel { position: absolute; left: 0; right: 0; top: calc(var(--ns-fiMedia) - var(--ns-seal) / 2); display: flex; flex-direction: column; align-items: center; padding: 0 24px; text-align: center; }
.ns-fi__seal { width: var(--ns-seal); height: var(--ns-seal); opacity: 0; }
.ns-fi__bsrc { margin-top: 12px; opacity: 0; }
.ns-fi__t { margin-top: 12px; font: 900 26px/1.15 var(--ns-display); letter-spacing: -.02em; }
.ns-fi__l { margin-top: 14px; max-width: 345px; font: 500 15px/1.35 var(--ns-sans); color: var(--ns-iron); text-wrap: balance; }
.ns-fi__lsrc { margin-top: 6px; opacity: 0; }

/* ------------------------------------------------------------------ gains */
.ns-gn__t { margin-top: 6px; font: 900 34px/1 var(--ns-display); letter-spacing: -.02em; }
.ns-cv { margin-top: 16px; padding: 14px 16px 12px; }
.ns-cv__hd { display: flex; flex-direction: column; gap: 6px; }
.ns-cv__k { font: 600 14px/1.2 var(--ns-sans); color: var(--ns-steel); white-space: nowrap; }
.ns-cv__v0 { display: inline-flex; align-items: baseline; gap: 5px; font: 500 13px/1 var(--ns-sans); color: var(--ns-steel); white-space: nowrap; }
.ns-cv__v0 b { font: 900 22px/1 var(--ns-display); letter-spacing: -.01em; color: var(--ns-iron); }
.ns-cv__svg { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.ns-cv__g { fill: none; stroke: var(--ns-hair); stroke-width: 1; }
.ns-cv__y, .ns-cv__x { font: 600 10.5px var(--ns-sans); fill: var(--ns-faint); }
.ns-cv__l { fill: none; stroke: var(--ns-iron); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.ns-cv__n { fill: none; stroke: var(--ns-red); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .5 6; }
.ns-cv__d { fill: var(--ns-iron); stroke: var(--ns-paper); stroke-width: 2.5; }
.ns-cv__d--next { fill: var(--ns-paper); stroke: var(--ns-red); stroke-width: 2.4; }
.ns-cv__v { font: 800 11.5px var(--ns-display); fill: var(--ns-iron); }
.ns-cv__v--next { fill: var(--ns-red-ink); }
.ns-gw { margin-top: 14px; padding: 14px; }
.ns-gw__hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ns-gw__hd b { font: 800 18px/1.2 var(--ns-display); letter-spacing: -.01em; }
.ns-gw__row { margin-top: 12px; display: flex; gap: 16px; }
.ns-gw__vs { flex: none; width: 160px; height: 200px; border-radius: 14px; }
.ns-gw__list { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0; }
.ns-gain { display: flex; align-items: center; gap: 9px; height: 24px; font: 600 14px/1 var(--ns-sans); color: var(--ns-faint); transition: color .2s linear; }
.ns-gain.is-on { color: var(--ns-iron); }
.ns-gain__ck { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ns-well); color: var(--ns-red); transition: background-color .2s linear; }
.ns-gain__ck .ns-tick { width: 13px; height: 13px; }
.ns-gain.is-on .ns-gain__ck { background: var(--ns-iron); }
.ns-mile { margin-top: 14px; display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.ns-mile__b { flex: none; width: 44px; height: 44px; }
.ns-seal--mini { box-shadow: none; }
.ns-seal--mini .ns-seal__t { display: none; }
.ns-mile:not(.is-done) .ns-seal { background: var(--ns-well); color: var(--ns-faint); }
.ns-mile__tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ns-mile__tx b { font: 800 16px/1.2 var(--ns-display); letter-spacing: -.005em; }
.ns-mile__m { display: inline-flex; align-items: baseline; gap: 5px; font: 500 13px/1.2 var(--ns-sans); color: var(--ns-steel); }

/* ------------------------------------------------------------------ the 780 canvas */
.ns-short .ns-scr { padding-top: 60px; }
.ns-short .ns-brand { height: 26px; }
.ns-short .ns-st__t { margin-top: 16px; font-size: 30px; }
.ns-short .ns-st__s { margin-top: 6px; }
.ns-short .ns-st__opts { margin-top: 18px; gap: 9px; }
.ns-short .ns-opt { height: 72px; }
.ns-short .ns-opt__th { width: 50px; height: 50px; }
.ns-short .ns-st__w { margin-top: 24px; font-size: 17px; }
.ns-short .ns-st__tiles { margin-top: 10px; }
.ns-short .ns-tile { height: 88px; }
.ns-short .ns-cta { bottom: 44px; height: 52px; border-radius: 26px; }
.ns-short .ns-pl__t { font-size: 32px; }
.ns-short .ns-tiers { margin-top: 14px; }
.ns-short .ns-tier { padding: 12px 16px; }
.ns-short .ns-tier__wk { margin-top: 12px; }
.ns-short .ns-tier__wh { margin-top: 10px; }
.ns-short .ns-tdl { margin-top: 10px; height: 56px; }
.ns-short .ns-tdl__i { width: 36px; height: 36px; }
.ns-short .ns-coach { margin-top: 10px; padding: 12px; }
.ns-short .ns-coach__ph { width: 64px; height: 80px; }
.ns-short .ns-sess { margin-top: 12px; height: 92px; padding: 12px 16px; }
.ns-short .ns-sess__n { font-size: 34px; }
.ns-short .ns-sess__rest { top: 12px; }
.ns-short .ns-sess__bar { bottom: 12px; }
.ns-short .ns-rows { margin-top: 8px; }
.ns-short .ns-row { height: 60px; }
.ns-short .ns-row__th { width: 46px; height: 46px; }
.ns-short .ns-note { margin-top: 8px; padding: 10px 14px; }
.ns-short .ns-td__go { bottom: 97px; height: 50px; border-radius: 25px; }
.ns-short .ns-ex__media { height: 250px; }
.ns-short .ns-ex__body { top: 264px; }
.ns-short .ns-ex__t { font-size: 23px; }
.ns-short .ns-sets { margin-top: 10px; }
.ns-short .ns-set { height: 48px; }
.ns-short .ns-cues { margin-top: 10px; padding: 12px 16px; gap: 5px; }
.ns-short .ns-next { margin-top: 8px; height: 28px; }
.ns-short .ns-ex__log { bottom: 44px; height: 52px; border-radius: 26px; }
.ns-short .ns-pr__src { top: calc(var(--ns-hero) + 7px); }
.ns-short .ns-rung__t { font-size: 14.5px; }
.ns-short .ns-rung--goal .ns-rung__t { font-size: 14px; }
.ns-short .ns-pr__cues { top: calc(var(--ns-prCard) + 5 * var(--ns-rowH) + var(--ns-expH) + 8px); padding: 10px 16px; }
.ns-short .ns-pr__log { bottom: 97px; height: 50px; border-radius: 25px; }
.ns-short .ns-box--xl { font-size: 30px; }
.ns-short .ns-fi__t { margin-top: 10px; font-size: 24px; }
.ns-short .ns-fi__l { margin-top: 10px; }
.ns-short .ns-gn__t { font-size: 32px; }
.ns-short .ns-cv { margin-top: 12px; padding: 12px 16px 10px; }
.ns-short .ns-cv__svg { margin-top: 8px; }
.ns-short .ns-gw { margin-top: 10px; padding: 12px 14px; }
.ns-short .ns-gw__row { margin-top: 10px; }
.ns-short .ns-gw__vs { width: 136px; height: 170px; }
.ns-short .ns-gain { height: 22px; }
.ns-short .ns-mile { margin-top: 10px; padding: 10px 14px; }

/* ------------------------------------------------------------------ reduced motion */
.ns-rm .ns-pill, .ns-rm .ns-opt, .ns-rm .ns-tile, .ns-rm .ns-set, .ns-rm .ns-gain, .ns-rm .ns-gain__ck, .ns-rm .ns-video { transition-duration: .15s; }
.ns-rm .ns-pill.is-press, .ns-rm.ns-live .ns-pill:active, .ns-osrm .ns-pill.is-press, .ns-osrm.ns-live .ns-pill:active { transform: none; }
.ns-story .ns-pill, .ns-story .ns-opt, .ns-story .ns-tile { transition-property: background-color, color, box-shadow; }