/* BE SOMEBODY., the app (weskitts/SPEC.md section 9, amended by 2b; UI language 9.11). Every class starts with "wk-",
   every token is "--wk-*", everything is scoped to .wk-root. The host sets --wk-w / --wk-h on the mount (default
   393 x 852; 393 x 780 when --wk-h < 816, class .wk-short). Black like a warm-up room, chalk text, steel, one red.
   Red (--wk-red) only on: the Lift button, the active tab's underline, the rest clock's digits, the total's last point (9.4). --wk-red-deep only on
   chips and small text on red. Plate colours only on plates and PR chips. #FFFFFF only in the referee lamps.
   Motion: transform, opacity, clip-path and stroke-dashoffset only. No CSS filter, no backdrop-filter, no blend mode.

   Sections: fonts, tokens, shell (status bar, tab bar, layers, transitions), splash (the Euler disk), maxes, today,
   session, exercise (set table, plate loader), lights (the three white lights), rest (the competition clock), maxout,
   you, coach (the coaching sheet), reduced motion. */

/* ------------------------------------------------------------------ fonts (media/fonts/faces.css, pasted as is) */
/* Self-hosted Google Fonts for /weskitts/ (latin + latin-ext). Paste into story.css and app.css as is. */
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("media/fonts/barlow-italic-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("media/fonts/barlow-italic-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("media/fonts/barlow-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("media/fonts/barlow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("media/fonts/barlow-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("media/fonts/barlow-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("media/fonts/barlow-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("media/fonts/barlow-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("media/fonts/barlow-condensed-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("media/fonts/barlow-condensed-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("media/fonts/barlow-condensed-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("media/fonts/barlow-condensed-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Big Shoulders"; font-style: normal; font-weight: 800 900; font-display: swap;
  src: url("media/fonts/big-shoulders-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Big Shoulders"; font-style: normal; font-weight: 800 900; font-display: swap;
  src: url("media/fonts/big-shoulders-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ------------------------------------------------------------------ root, tokens */
.wk-root {
  --wk-ground: #0A0B0D; --wk-s1: #14171C; --wk-s2: #1D2128; --wk-s3: #262B33;
  --wk-hair: rgba(242, 241, 236, .08); --wk-hair2: rgba(242, 241, 236, .14);
  --wk-text: #F2F1EC; --wk-muted: #8D929B; --wk-faint: #4C525C; --wk-unlit: #2A2E35;
  --wk-red: #D7262E; --wk-red-deep: #B81F26; --wk-red-glow: rgba(255, 70, 60, .40);
  --wk-p25: #D7262E; --wk-p20: #1E5BC6; --wk-p15: #F2C230; --wk-p10: #2E9E4F; --wk-p5: #F4F1EA;
  --wk-steel-hi: #EEF0F2; --wk-steel: #A9AEB4; --wk-steel-lo: #4E535A;
  --wk-white: #FFFFFF; --wk-strike: #FFE2B8; --wk-bloom: rgba(255, 255, 255, .5);
  --wk-chrome: linear-gradient(var(--wk-steel-hi) 0, var(--wk-steel-hi) 30%, var(--wk-steel) 55%, var(--wk-steel-lo) 100%);
  --wk-seat: cubic-bezier(.3, 0, .1, 1); --wk-out: cubic-bezier(.22, 1, .36, 1);
  --wk-disp: "Big Shoulders", "Barlow Condensed", Impact, "Arial Narrow", sans-serif;
  --wk-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --wk-sans: "Barlow", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wk-hl: 1px;
  --wk-dg: .495em;   /* a Big Shoulders 800 digit cell: the widest digit's advance (measured: 5 = .494 em) */
  position: relative; display: block; overflow: hidden; overflow: clip;
  width: var(--wk-w, 393px); height: var(--wk-h, 852px);
  background: var(--wk-ground); color: var(--wk-text);
  font: 500 15px/1.3 var(--wk-sans); letter-spacing: 0; text-align: left; font-kerning: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  touch-action: pan-y; contain: layout paint style; isolation: isolate;
}
@media (min-resolution: 2dppx) { .wk-root { --wk-hl: .5px; } }
.wk-root :where(*), .wk-root :where(*)::before, .wk-root :where(*)::after { box-sizing: border-box; touch-action: pan-y; }
.wk-root :where(button) { 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; }
.wk-root :where(h2, h3, p, ol, ul, li, figure, blockquote) { margin: 0; padding: 0; font: inherit; list-style: none; }
.wk-root :where(img) { display: block; max-width: none; }
.wk-root :where(b, strong) { font-weight: inherit; }
.wk-root :where(i, em) { font-style: normal; }
.wk-root :where(svg) { display: block; overflow: visible; }
.wk-story { pointer-events: none; }
.wk-root :focus { outline: none; }
.wk-root :focus-visible { outline: 2px solid var(--wk-text); outline-offset: 3px; border-radius: 12px; }
.wk-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ shared type and parts */
.wk-k { font: 600 12px/14px var(--wk-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--wk-muted); white-space: nowrap; }
.wk-t { font: 800 44px/.9 var(--wk-disp); letter-spacing: -.005em; text-transform: uppercase; color: var(--wk-text); white-space: nowrap; }
.wk-n { font-family: var(--wk-disp); font-weight: 800; letter-spacing: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wk-dg { display: inline-block; width: var(--wk-dg); text-align: center; }   /* fixed digit cell (Big Shoulders figures are proportional) */
.wk-u { font-size: .5em; letter-spacing: .01em; margin-left: .04em; }   /* "kg" after a weight: no space, his caption format */
.wk-lb { font: 600 15px/1 var(--wk-cond); letter-spacing: .02em; color: var(--wk-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wk-draft { display: inline-flex; align-items: center; height: 17px; padding: 0 5px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(242, 241, 236, .32); font: 700 11px/1 var(--wk-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--wk-text); vertical-align: middle; }
.wk-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font: 600 11px/1 var(--wk-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--wk-text); background: rgba(10, 11, 13, .72); box-shadow: inset 0 0 0 var(--wk-hl) var(--wk-hair2); white-space: nowrap; }
.wk-card { position: absolute; left: 16px; right: 16px; border-radius: 12px; background: linear-gradient(180deg, #161A20, #12151A); box-shadow: inset 0 0 0 var(--wk-hl) var(--wk-hair), inset 0 1px 0 rgba(255, 255, 255, .035); }
.wk-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; border-radius: 12px; font: 600 17px/1 var(--wk-sans); letter-spacing: .005em; white-space: nowrap; transition: transform .16s var(--wk-out), background-color .16s linear; }
.wk-btn--chalk { background: var(--wk-text); color: var(--wk-ground); box-shadow: inset 0 -2px 0 rgba(10, 11, 13, .12), 0 10px 26px -14px rgba(242, 241, 236, .35); }
.wk-btn--chalk.is-press, .wk-live .wk-btn--chalk:active { transform: scale(.97); background: #D9D8D2; }
.wk-btn--steel { background: var(--wk-s2); color: var(--wk-text); box-shadow: inset 0 0 0 var(--wk-hl) var(--wk-hair2); }
.wk-av { position: relative; display: block; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; background: var(--wk-s3); }
.wk-av img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 30%; transform: scale(1.3); transform-origin: 38% 34%; }
.wk-av::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(242, 241, 236, .16); }
.wk-img { width: 100%; height: 100%; object-fit: cover; }
/* the lamp overhead: one static, soft top light on every screen (a warm-up room under a single lamp) */
.wk-lamp { position: absolute; left: -10%; right: -10%; top: -160px; height: 420px; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 246, 232, .055), rgba(255, 246, 232, 0) 70%); }

/* video slots: a poster image, the clip on top once it plays */
.wk-vs { position: relative; display: block; overflow: hidden; background: var(--wk-s2); }
.wk-vs > .wk-img { position: absolute; inset: 0; }
.wk-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .18s linear; pointer-events: none; }
.wk-video.is-playing { opacity: 1; }
.wk-vs::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 11, 13, 0) 55%, rgba(10, 11, 13, .55)); }

/* the crown (his mark, traced from media/brand/crown.png): one closed stroke + the diamond */
.wk-crown { width: 100%; height: auto; color: var(--wk-text); }
.wk-crown path { fill: none; stroke: currentColor; stroke-linejoin: miter; stroke-miterlimit: 8; }
.wk-icon { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: var(--s); height: var(--s); border-radius: 22.37%; background: var(--wk-red); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -2px 0 rgba(0, 0, 0, .14); }
.wk-icon .wk-crown { width: 66%; margin-top: -3%; }
.wk-wm { font: 900 20px/1 var(--wk-disp); letter-spacing: -.005em; text-transform: uppercase; color: var(--wk-text); white-space: nowrap; }
.wk-wm i { color: var(--wk-red); }

/* ------------------------------------------------------------------ glass, layers, chrome */
.wk-glass { position: absolute; inset: 0; overflow: hidden; overflow: clip; background: var(--wk-ground); }
.wk-layer { position: absolute; inset: 0; background: var(--wk-ground); overflow: hidden; overflow: clip; z-index: 1; contain: strict; }
/* a screen that is not shown is skipped by the engine (no style, layout or paint walk) and keeps its last layout */
.wk-layer:not(.is-on):not(.is-leaving) { opacity: 0 !important; visibility: hidden; content-visibility: hidden; }
.wk-live .wk-layer.is-leaving { pointer-events: none; }
.wk-l-exercise { z-index: 2; }
.wk-l-lights { z-index: 4; background: transparent; }
.wk-l-coach { z-index: 4; background: transparent; }
.wk-l-splash { z-index: 9; background: var(--wk-ground); }
.wk-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 20; pointer-events: none; color: var(--wk-text); }
.wk-status__t { position: absolute; left: 0; width: 132px; top: 18px; text-align: center; font: 600 17px/1 var(--wk-sans); letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
.wk-status__r { position: absolute; right: 26px; top: 20px; display: flex; align-items: center; gap: 6px; }
.wk-homeind { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: rgba(242, 241, 236, .9); z-index: 20; pointer-events: none; }
.wk-full .wk-status, .wk-full .wk-homeind { display: none; }
.wk-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 83px; z-index: 6; display: flex; padding: 0 4px 34px; background: rgba(10, 11, 13, .97); box-shadow: inset 0 var(--wk-hl) 0 var(--wk-hair2); }
.wk-tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 49px; padding-top: 6px; color: var(--wk-muted); }
.wk-tab svg { width: 26px; height: 26px; }
.wk-tab span { margin-top: 3px; font: 600 11px/12px var(--wk-cond); letter-spacing: .1em; text-transform: uppercase; }
.wk-tab i { position: absolute; left: 50%; top: 45px; width: 18px; height: 2px; margin-left: -9px; border-radius: 1px; background: var(--wk-red); transform: scaleX(0); transition: transform .2s var(--wk-out); }
.wk-tab.is-on { color: var(--wk-text); }
.wk-tab.is-on i { transform: scaleX(1); }
.wk-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, 236, .26); box-shadow: 0 0 0 1.5px rgba(242, 241, 236, .7); }
.wk-toast { position: absolute; left: 50%; top: 62px; z-index: 22; transform: translate3d(-50%, -8px, 0); opacity: 0; padding: 10px 16px; border-radius: 14px; background: rgba(38, 43, 51, .97); color: var(--wk-text); font: 600 14px/1.2 var(--wk-sans); white-space: nowrap; pointer-events: none; transition: opacity .2s linear, transform .3s var(--wk-out); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.wk-toast.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); }

/* nav row (pushed screens) */
.wk-nav { position: absolute; left: 0; right: 0; top: 54px; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 6px; }
.wk-nav__back { display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 10px 0 6px; font: 500 17px/1 var(--wk-sans); color: var(--wk-text); }
.wk-nav__back svg { width: 22px; height: 22px; }
.wk-nav__r { font: 600 12px/1 var(--wk-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--wk-muted); }

/* ------------------------------------------------------------------ splash: the Euler disk (transition 13) */
.wk-sp { position: absolute; inset: 0; background: radial-gradient(70% 38% at 50% 42%, #111317, var(--wk-ground) 100%); }
.wk-sp__pool { position: absolute; left: 50%; top: var(--cy); width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 246, 232, .09), rgba(255, 246, 232, .03) 55%, rgba(255, 246, 232, 0)); opacity: 0; }
.wk-sp__plate { position: absolute; left: 0; top: 0; width: 112px; height: 112px; margin: -56px 0 0 -56px; will-change: transform; }
.wk-sp__tilt { position: absolute; inset: 0; }
.wk-sp__band, .wk-sp__under, .wk-sp__face { position: absolute; left: 0; top: 0; width: 112px; height: 112px; }
/* the rim seen from above while the plate stands on it: a band of rubber with molded grooves, then the far half of the rim */
.wk-sp__band { top: 56px; height: 1px; transform-origin: 50% 0; border-radius: 0; background: linear-gradient(90deg, #4A0C10, #9E1C22 16%, #B8222A 50%, #9E1C22 84%, #4A0C10); }
.wk-sp__band { overflow: hidden; }
.wk-sp__tread { position: absolute; left: 0; top: 0; width: 130px; height: 100%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .26) 0, rgba(0, 0, 0, .26) 1.5px, rgba(0, 0, 0, 0) 1.5px, rgba(0, 0, 0, 0) 9px); }
.wk-sp__under { border-radius: 50%; background: linear-gradient(90deg, #4A0C10, #9E1C22 16%, #B8222A 50%, #9E1C22 84%, #4A0C10); }
.wk-sp__face { border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 28%, #E0353B, var(--wk-p25) 58%, #BE2229 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .16); }
.wk-sp__deco { position: absolute; inset: 0; border-radius: 50%; }
.wk-sp__rings { position: absolute; inset: 0; border-radius: 50%; background:
  radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0 25%, rgba(0, 0, 0, .16) 25.5% 27%, rgba(0, 0, 0, 0) 27.5%),
  repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 0 7px, rgba(255, 255, 255, .045) 7px 8px);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .2), inset 0 3px 2px -1px rgba(255, 255, 255, .2); }
.wk-sp__lip { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; border-radius: 50%; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .16), inset 0 -1.5px 0 rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .12); }
.wk-sp__hub { position: absolute; left: 36%; top: 36%; width: 28%; height: 28%; border-radius: 50%; background: radial-gradient(circle at 40% 32%, var(--wk-steel-hi), var(--wk-steel) 45%, var(--wk-steel-lo) 100%); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35); }
.wk-sp__hub i { position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #2A2E35, #050506); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6); }
.wk-sp__n { position: absolute; left: 0; right: 0; text-align: center; font: 800 13px/1 var(--wk-disp); letter-spacing: .02em; color: rgba(0, 0, 0, .28); text-shadow: 0 1px 0 rgba(255, 255, 255, .14); }
.wk-sp__n--t { top: 9px; }
.wk-sp__n--b { bottom: 8px; }
.wk-sp__icon { position: absolute; left: 0; top: 0; width: 112px; height: 112px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.wk-sp__icon .wk-crown { width: 74px; margin-top: -4px; }
.wk-sp__icon .wk-crown path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.wk-sp__wm { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; font: 900 40px/1 var(--wk-disp); letter-spacing: -.005em; color: var(--wk-text); white-space: pre; }
.wk-sp__wm span { display: inline-block; opacity: 0; }
.wk-sp__wm .is-dot { color: var(--wk-red); }

/* ------------------------------------------------------------------ maxes */
.wk-mx__brand { position: absolute; left: 16px; top: 64px; display: flex; align-items: center; gap: 10px; }
.wk-mx__brand .wk-icon { --s: 30px; border-radius: 7px; }
.wk-seg { position: absolute; right: 16px; top: 62px; width: 96px; height: 34px; padding: 3px; border-radius: 10px; background: var(--wk-s1); box-shadow: inset 0 0 0 var(--wk-hl) var(--wk-hair); display: flex; }
.wk-seg__k { position: absolute; left: 3px; top: 3px; width: 45px; height: 28px; border-radius: 8px; background: var(--wk-s3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .4); transition: transform .24s var(--wk-out); }
.wk-seg.is-lb .wk-seg__k { transform: translate3d(45px, 0, 0); }
.wk-seg__b { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; font: 600 15px/1 var(--wk-sans); color: var(--wk-muted); }
.wk-seg__b::after { content: ""; position: absolute; left: -2px; right: -2px; top: -8px; bottom: -8px; }
.wk-seg__b.is-on { color: var(--wk-text); }
.wk-mx__t { position: absolute; left: 16px; top: 118px; font-size: 48px; }
.wk-mx__in { position: absolute; left: 16px; right: 16px; height: 100px; border-radius: 12px; background: linear-gradient(180deg, #161A20, #12151A); box-shadow: inset 0 0 0 var(--wk-hl) var(--wk-hair), inset 0 1px 0 rgba(255, 255, 255, .035); }
.wk-mx__in.i0 { top: 186px; } .wk-mx__in.i1 { top: 298px; } .wk-mx__in.i2 { top: 410px; }
.wk-mx__in .wk-k { position: absolute; left: 18px; top: 16px; }
.wk-mx__tag { position: absolute; right: 16px; top: 16px; font: 600 12px/14px var(--wk-cond); letter-spacing: .1em; color: var(--wk-muted); opacity: .7; }
.wk-mx__v { position: absolute; left: 15px; bottom: 15px; display: flex; align-items: baseline; gap: 10px; line-height: 1; }
.wk-mx__num { display: flex; align-items: baseline; font: 800 50px/1 var(--wk-disp); color: var(--wk-text); }
.wk-mx__num .wk-u { font-size: 24px; margin-left: 2px; }
.wk-mx__v .wk-lb { font-size: 17px; }
.wk-mx__trk { position: absolute; left: 16px; top: 540px; }
.wk-mx__chips { position: absolute; left: 16px; right: 16px; top: 562px; display: flex; gap: 8px; }
.wk-tchip { position: relative; flex: 1; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font: 600 16px/1 var(--wk-sans); color: var(--wk-muted); background: var(--wk-s1); box-shadow: inset 0 0 0 var(--wk-hl) var(--wk-hair); }
.wk-tchip__on { position: absolute; inset: 0; border-radius: 12px; background: var(--wk-s2); box-shadow: inset 0 0 0 1px var(--wk-text); opacity: 0; }
.wk-tchip b { position: relative; }
.wk-tchip.is-on { color: var(--wk-text); }
.wk-mx__help { position: absolute; left: 16px; right: 16px; bottom: 120px; font: 500 15px/20px var(--wk-sans); color: var(--wk-muted); text-align: center; }
.wk-mx__go { position: absolute; left: 16px; right: 16px; bottom: 48px; }
/* an odometer keeps a hidden copy of its final number: it gives the box its width and the row its true baseline */
.wk-odo { position: relative; display: inline-block; line-height: 1; white-space: nowrap; }
.wk-odo__ph { visibility: hidden; }
.wk-odo__cols { position: absolute; left: 0; top: 0; display: flex; }
.wk-odo__c { position: relative; display: block; width: var(--wk-dg); height: 1em; overflow: hidden; }
.wk-odo__s { position: absolute; left: 0; right: 0; top: 0; display: block; }
.wk-odo__s b { display: block; height: 1em; line-height: 1em; text-align: center; }
.wk-short .wk-mx__brand { top: 62px; }
.wk-short .wk-seg { top: 60px; }
.wk-short .wk-mx__t { top: 108px; font-size: 44px; }
.wk-short .wk-mx__in { height: 88px; }
.wk-short .wk-mx__in.i0 { top: 162px; } .wk-short .wk-mx__in.i1 { top: 258px; } .wk-short .wk-mx__in.i2 { top: 354px; }
.wk-short .wk-mx__in .wk-k { top: 14px; } .wk-short .wk-mx__tag { top: 14px; }
.wk-short .wk-mx__v { bottom: 12px; }
.wk-short .wk-mx__num { font-size: 46px; }
.wk-short .wk-mx__trk { top: 466px; }
.wk-short .wk-mx__chips { top: 488px; }
.wk-short .wk-mx__help { bottom: 114px; }
.wk-short .wk-mx__go { bottom: 46px; }

/* ------------------------------------------------------------------ today */
.wk-td__ov { position: absolute; left: 16px; top: 66px; font: 600 13px/14px var(--wk-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--wk-muted); }
.wk-td__t { position: absolute; left: 16px; top: 86px; }
.wk-td__icon { position: absolute; right: 16px; top: 68px; --s: 44px; border-radius: 10px; }
.wk-td__icon .wk-crown { width: 68%; }
.wk-pg { top: 150px; height: 78px; }
.wk-pg .wk-k { position: absolute; left: 16px; top: 14px; }
.wk-pg__l { position: absolute; left: 16px; top: 31px; font: 600 17px/20px var(--wk-sans); }
.wk-pg__r { position: absolute; right: 16px; top: 14px; font: 600 12px/14px var(--wk-cond); letter-spacing: .08em; color: var(--wk-muted); font-variant-numeric: tabular-nums; }
.wk-pg__dots { position: absolute; left: 16px; right: 16px; top: 59px; height: 8px; display: flex; justify-content: space-between; align-items: center; }
.wk-pg__dots i { position: relative; width: 22px; height: 6px; border-radius: 3px; background: var(--wk-unlit); overflow: hidden; }
.wk-pg__dots i b { position: absolute; inset: 0; background: var(--wk-text); transform-origin: 0 50%; transform: scaleX(0); }
.wk-pg__dots i.is-now { box-shadow: 0 0 0 2px var(--wk-ground), 0 0 0 3px rgba(242, 241, 236, .5); }
.wk-ss { top: 242px; height: 140px; }
.wk-ss .wk-k { position: absolute; left: 16px; top: 15px; }
.wk-ss__l { position: absolute; left: 16px; right: 16px; top: 34px; font: 600 18px/22px var(--wk-sans); white-space: nowrap; }
.wk-ss__l em { color: var(--wk-muted); font-weight: 500; }
.wk-ss__strip { position: absolute; left: 16px; bottom: 16px; display: flex; }
.wk-ss__p { position: relative; width: 44px; height: 44px; margin-right: -9px; border-radius: 50%; overflow: hidden; background: var(--wk-s2); box-shadow: inset 0 0 0 3px var(--wk-p20), 0 0 0 2px #13161B; }
.wk-ss__p img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.wk-ss__p::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--wk-p20), inset 0 0 0 4px rgba(0, 0, 0, .35); }
.wk-ss__go { position: absolute; right: 16px; bottom: 16px; width: 104px; height: 44px; border-radius: 12px; font-size: 17px; }
.wk-ss__go svg { width: 12px; height: 14px; }
.wk-wes { top: 398px; height: 166px; }
.wk-wes__clip { position: absolute; left: 8px; top: 8px; width: 120px; height: 150px; border-radius: 8px; }
.wk-wes__clip .wk-chip { position: absolute; left: 8px; bottom: 8px; z-index: 2; }
.wk-wes .wk-k { position: absolute; left: 144px; top: 16px; }
.wk-wes__w { position: absolute; left: 144px; top: 40px; display: flex; align-items: baseline; gap: 6px; }
.wk-wes__w .wk-n { font-size: 40px; line-height: 1; }
.wk-wes__w .wk-lb { font-size: 16px; }
.wk-wes__lift { position: absolute; left: 144px; top: 86px; font: 600 17px/20px var(--wk-sans); }
.wk-wes__lab { position: absolute; left: 144px; top: 108px; font: 500 13px/16px var(--wk-sans); color: var(--wk-muted); }
.wk-wes__seq { position: absolute; left: 144px; right: 16px; bottom: 16px; display: flex; gap: 6px; }
.wk-wes__seq span { flex: 1; position: relative; padding-top: 8px; font: 600 11px/12px var(--wk-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--wk-faint); white-space: nowrap; }
.wk-wes__seq span::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; background: var(--wk-unlit); }
.wk-wes__seq span i { position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; background: var(--wk-text); transform-origin: 0 50%; transform: scaleX(0); }
.wk-wes__seq span.is-on { color: var(--wk-text); }
.wk-rule { top: 578px; height: 124px; padding: 16px 18px 0 18px; }
.wk-rule__q { position: absolute; left: 16px; top: 10px; font: 900 44px/1 var(--wk-disp); color: rgba(242, 241, 236, .16); }
.wk-rule .wk-k { position: absolute; left: 44px; top: 18px; }
.wk-rule__t { position: absolute; left: 44px; right: 16px; top: 38px; font: italic 500 18px/24px var(--wk-sans); color: var(--wk-text); text-wrap: balance; }
.wk-rule__s { position: absolute; left: 44px; right: 16px; bottom: 14px; font: 500 12px/14px var(--wk-sans); color: var(--wk-muted); }
.wk-short .wk-td__ov { top: 62px; }
.wk-short .wk-td__t { top: 80px; font-size: 40px; }
.wk-short .wk-td__icon { top: 64px; --s: 40px; }
.wk-short .wk-pg { top: 136px; height: 74px; }
.wk-short .wk-pg__dots { top: 56px; }
.wk-short .wk-ss { top: 220px; height: 132px; }
.wk-short .wk-wes { top: 362px; height: 152px; }
.wk-short .wk-wes__clip { width: 104px; height: 130px; }
.wk-short .wk-wes .wk-k, .wk-short .wk-wes__w, .wk-short .wk-wes__lift, .wk-short .wk-wes__lab, .wk-short .wk-wes__seq { left: 128px; }
.wk-short .wk-wes__w { top: 36px; }
.wk-short .wk-wes__w .wk-n { font-size: 36px; }
.wk-short .wk-wes__lift { top: 78px; }
.wk-short .wk-wes__lab { top: 98px; }
.wk-short .wk-wes__seq { bottom: 12px; }
.wk-short .wk-rule { top: 524px; height: 116px; }
.wk-short .wk-rule__t { line-height: 23px; }

/* ------------------------------------------------------------------ session (the six rows: the chapter 4 targets) */
.wk-se__ov { position: absolute; left: 16px; top: 106px; font: 600 13px/14px var(--wk-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--wk-muted); }
.wk-se__t { position: absolute; left: 16px; top: 126px; }
.wk-se__m { position: absolute; left: 16px; top: 174px; font: 500 15px/18px var(--wk-sans); color: var(--wk-muted); }
.wk-se__m b { color: var(--wk-text); font-weight: 600; }
.wk-se__rows { position: absolute; left: 0; right: 0; top: 204px; }
.wk-se__beam { position: absolute; left: -10%; right: -10%; top: 0; height: 220px; margin-top: -110px; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 246, 232, .08), rgba(255, 246, 232, 0)); opacity: 0; }
.wk-row { position: absolute; left: 0; right: 0; height: 84px; display: block; }
.wk-row__bg { position: absolute; left: 8px; right: 8px; top: 4px; bottom: 4px; border-radius: 12px; background: var(--wk-s1); box-shadow: inset 0 0 0 1px rgba(242, 241, 236, .5); opacity: 0; }
.wk-row__hr { position: absolute; left: 84px; right: 16px; bottom: 0; height: var(--wk-hl); background: var(--wk-hair); }
.wk-row__cell { position: absolute; left: 16px; top: 16px; width: 52px; height: 52px; }
.wk-row__th { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--wk-s2); }
.wk-row__th .wk-vs { position: absolute; inset: 0; border-radius: 50%; background: transparent; }
.wk-row__th .wk-vs::after { display: none; }
.wk-row__th .wk-img, .wk-row__th .wk-video { object-position: 50% 40%; }
.wk-row__rim { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--wk-p20), inset 0 0 0 4px rgba(0, 0, 0, .35), inset 0 4px 3px -2px rgba(255, 255, 255, .18); pointer-events: none; }
.wk-row__dim { position: absolute; inset: 0; border-radius: 50%; background: var(--wk-ground); opacity: .55; pointer-events: none; }
.wk-row__txt { position: absolute; left: 84px; right: 64px; top: 22px; }
.wk-row__n { font: 600 17px/21px var(--wk-sans); white-space: nowrap; }
.wk-row__s { margin-top: 3px; font: 500 14px/17px var(--wk-sans); color: var(--wk-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wk-ck.wk-row__st { position: absolute; right: 20px; top: 29px; width: 26px; height: 26px; }
.wk-row__next { position: absolute; right: 16px; top: 31px; height: 22px; padding: 0 8px; display: flex; align-items: center; border-radius: 11px; font: 700 11px/1 var(--wk-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--wk-ground); background: var(--wk-text); opacity: 0; }
.wk-short .wk-se__ov { top: 102px; }
.wk-short .wk-se__t { top: 120px; font-size: 40px; }
.wk-short .wk-se__m { top: 162px; }
.wk-short .wk-se__rows { top: 186px; }
.wk-short .wk-row { height: 76px; }
.wk-short .wk-row__cell { top: 12px; }
.wk-short .wk-row__txt { top: 18px; }
.wk-short .wk-ck.wk-row__st { top: 25px; }
.wk-short .wk-row__next { top: 27px; }
/* check rings (session state, set table) */
.wk-ck { position: relative; display: block; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--wk-faint); }
.wk-ck__f { position: absolute; inset: 0; border-radius: 50%; background: var(--wk-text); transform: scale(0); }
.wk-ck svg { position: absolute; left: 6px; top: 7px; width: 14px; height: 12px; color: var(--wk-ground); }
.wk-ck path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }

/* ------------------------------------------------------------------ exercise */
.wk-ex__clip { position: absolute; left: 16px; top: 106px; width: 176px; height: 220px; border-radius: 12px; }
.wk-ex__clip .wk-chip { position: absolute; left: 8px; bottom: 8px; z-index: 2; }
.wk-ex__col { position: absolute; left: 206px; right: 16px; top: 104px; }
.wk-ex__t { font-size: 46px; white-space: normal; line-height: .92; }
.wk-ex__m { margin-top: 10px; font: 500 15px/20px var(--wk-sans); color: var(--wk-muted); font-variant-numeric: tabular-nums; }
.wk-ex__m b { color: var(--wk-text); font-weight: 600; }
.wk-cue { position: absolute; left: 206px; right: 16px; top: 214px; height: 112px; border-radius: 12px; padding: 12px; background: linear-gradient(180deg, #161A20, #12151A); box-shadow: inset 0 0 0 var(--wk-hl) var(--wk-hair), inset 0 1px 0 rgba(255, 255, 255, .035); }
.wk-cue__h { display: flex; align-items: center; gap: 8px; }
.wk-cue__h .wk-k { flex: 1; color: var(--wk-text); }
.wk-cue__t { margin-top: 9px; font: italic 500 14px/19px var(--wk-sans); color: var(--wk-text); }
.wk-st { position: absolute; left: 16px; right: 16px; top: 342px; }
.wk-st__rows { position: relative; }
.wk-st__h { position: relative; height: 26px; display: flex; align-items: center; font: 600 12px/1 var(--wk-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--wk-muted); box-shadow: inset 0 calc(-1 * var(--wk-hl)) 0 var(--wk-hair); }
.wk-st__h svg { width: 14px; height: 12px; color: var(--wk-muted); }
.wk-st__h svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wk-c1 { width: 58px; padding-left: 10px; flex: none; }
.wk-c2 { width: 72px; flex: none; }
.wk-c3 { width: 96px; flex: none; }
.wk-c4 { flex: 1; }
.wk-c5 { width: 44px; flex: none; display: flex; justify-content: center; }
.wk-ckb { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 22px; }
.wk-set { position: absolute; left: 0; right: 0; height: 48px; display: flex; align-items: center; }
.wk-set__ol { position: absolute; inset: 3px 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--wk-text); opacity: 0; }
.wk-set__hl { position: absolute; inset: 3px 0; border-radius: 12px; background: rgba(242, 241, 236, .045); opacity: 0; }
.wk-set__k { position: relative; font: 700 16px/1 var(--wk-cond); letter-spacing: .06em; color: var(--wk-text); }
.wk-set__k.is-top { display: inline-flex; align-items: center; height: 22px; width: 40px; justify-content: center; border-radius: 6px; font-size: 13px; letter-spacing: .1em; box-shadow: inset 0 0 0 1px rgba(242, 241, 236, .45); }
.wk-set__p { position: relative; font: 500 15px/1 var(--wk-sans); color: var(--wk-muted); font-variant-numeric: tabular-nums; }
.wk-set__kg { position: relative; font: 800 28px/1 var(--wk-disp); color: var(--wk-text); }
.wk-set__r { position: relative; font: 600 17px/1 var(--wk-sans); color: var(--wk-text); font-variant-numeric: tabular-nums; }
.wk-set__r em { color: var(--wk-muted); font-weight: 500; margin-right: 3px; }
.wk-set.is-done .wk-set__kg, .wk-set.is-done .wk-set__r, .wk-set.is-done .wk-set__k { opacity: .62; }
.wk-set--top { height: 60px; }
.wk-set--top .wk-c4 { flex: none; width: 48px; }
.wk-lift { position: relative; flex: 1; height: 44px; margin-right: 4px; border-radius: 12px; background: var(--wk-red); color: var(--wk-text); font: 700 19px/1 var(--wk-sans); letter-spacing: .01em; display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .18); transition: transform .14s var(--wk-out); }
.wk-lift.is-press, .wk-live .wk-lift:active { transform: translate3d(0, 2px, 0); background: var(--wk-red-deep); }
.wk-lift__pulse { position: absolute; inset: -1px; border-radius: 13px; box-shadow: 0 0 0 0 rgba(215, 38, 46, .55); opacity: 0; pointer-events: none; }
.wk-live .wk-lift.is-hint .wk-lift__pulse { animation: wk-pulse 1.4s cubic-bezier(.22, 1, .36, 1) infinite; }
.wk-osrm .wk-lift .wk-lift__pulse, .wk-rm .wk-lift .wk-lift__pulse { animation: none !important; }
@keyframes wk-pulse { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(215, 38, 46, .7); } 60% { opacity: 1; box-shadow: 0 0 0 9px rgba(215, 38, 46, 0); } 100% { opacity: 0; box-shadow: 0 0 0 9px rgba(215, 38, 46, 0); } }
.wk-lift.is-done { background: var(--wk-s2); color: var(--wk-muted); box-shadow: inset 0 0 0 var(--wk-hl) var(--wk-hair2); }
/* the plate loader: one sleeve in side view, chrome flange on the left, discs heaviest inside */
.wk-pl { position: absolute; left: 16px; right: 16px; top: 634px; height: 150px; border-radius: 12px; background: linear-gradient(180deg, #161A20, #111419); box-shadow: inset 0 0 0 var(--wk-hl) var(--wk-hair), inset 0 1px 0 rgba(255, 255, 255, .035); overflow: hidden; }
.wk-pl .wk-k { position: absolute; left: 16px; top: 16px; }
.wk-pl__ps { position: absolute; left: 16px; top: 34px; font: 800 34px/1 var(--wk-disp); color: var(--wk-text); }
.wk-pl__ps .wk-u { font-size: 17px; }
.wk-pl__tot { display: none; }
.wk-pl__ft { position: absolute; left: 16px; top: 78px; width: 92px; font: 600 11px/14px var(--wk-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--wk-muted); white-space: normal; }
.wk-pl__rig { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.wk-pl__shaft { position: absolute; left: 112px; width: 18px; height: 10px; border-radius: 1px; background: var(--wk-chrome); opacity: .9; }
.wk-pl__shaft::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(60deg, rgba(0, 0, 0, .28) 0 1px, rgba(0, 0, 0, 0) 1px 3px), repeating-linear-gradient(-60deg, rgba(0, 0, 0, .2) 0 1px, rgba(0, 0, 0, 0) 1px 3px); }
.wk-pl__fl { position: absolute; left: 128px; width: 9px; border-radius: 2px; background: linear-gradient(90deg, var(--wk-steel-lo), var(--wk-steel-hi) 35%, var(--wk-steel) 60%, var(--wk-steel-lo)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); }
.wk-pl__sl { position: absolute; left: 136px; right: 8px; height: 18px; border-radius: 0 3px 3px 0; background: var(--wk-chrome); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.wk-pl__d { position: absolute; left: 0; top: 0; border-radius: 3px; opacity: 0; will-change: transform, opacity; }
.wk-pl__d::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, .16) 8%, rgba(255, 255, 255, 0) 8.5%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, .18) 80.5%, rgba(0, 0, 0, .18) 100%); }
.wk-pl__d::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .22); border-radius: 3px 0 0 3px; }
.wk-pl__d.c25 { background: var(--wk-p25); }
.wk-pl__d.c20 { background: var(--wk-p20); }
.wk-pl__d.c15 { background: var(--wk-p15); }
.wk-pl__d.c10 { background: var(--wk-p10); }
.wk-pl__d.c5 { background: var(--wk-p5); }
.wk-pl__d.is-chg { border-radius: 2px; }
.wk-pl__c { position: absolute; left: 0; top: 0; width: 16px; border-radius: 3px; background: linear-gradient(90deg, var(--wk-steel-lo), var(--wk-steel-hi) 30%, var(--wk-steel) 62%, var(--wk-steel-lo)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); opacity: 0; will-change: transform, opacity; }
.wk-pl__c::after { content: ""; position: absolute; left: 4px; top: -9px; width: 8px; height: 11px; border-radius: 2px 2px 1px 1px; background: #0C0D0F; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.wk-pl__l { position: absolute; left: 0; top: 0; width: 30px; margin-left: -15px; text-align: center; font: 600 11px/12px var(--wk-cond); letter-spacing: .02em; color: var(--wk-muted); white-space: nowrap; opacity: 0; font-variant-numeric: tabular-nums; }
.wk-pl__l::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: var(--lk, 0px); background: var(--wk-faint); }
.wk-short .wk-ex__clip { top: 104px; width: 154px; height: 192px; }
.wk-short .wk-ex__col { left: 184px; top: 102px; }
.wk-short .wk-ex__t { font-size: 44px; }
.wk-short .wk-ex__m { margin-top: 8px; }
.wk-short .wk-cue { left: 184px; top: 200px; height: 96px; }
.wk-short .wk-cue__t { margin-top: 7px; }
.wk-short .wk-st { top: 308px; }
.wk-short .wk-set { height: 44px; }
.wk-short .wk-set--top { height: 56px; }
.wk-short .wk-set__kg { font-size: 28px; }
.wk-short .wk-pl { top: 578px; height: 134px; }
.wk-short .wk-pl__ps { top: 32px; font-size: 32px; }
.wk-short .wk-pl__ft { top: 72px; }

/* ------------------------------------------------------------------ lights: the three white lights (9.11), an overlay on exercise */
.wk-l-lights { z-index: 4; background: transparent; }
.wk-li { position: absolute; inset: 0; }
/* the dim; until Lift is pressed (story p < .10) it leaves the TOP row open, the fill then closes it */
.wk-li__dim { position: absolute; left: 16px; right: 16px; top: 563px; height: 54px; border-radius: 12px; box-shadow: 0 0 0 1600px rgba(5, 5, 6, .86); pointer-events: none; }
.wk-li__fill { position: absolute; left: 15px; right: 15px; top: 562px; height: 56px; border-radius: 13px; background: rgba(5, 5, 6, .86); opacity: 0; pointer-events: none; }
.wk-li__deep { position: absolute; inset: 0; background: rgba(5, 5, 6, .62); opacity: 0; pointer-events: none; }
/* the decision board: black anodised metal, a 1 pt top highlight, four bolts */
.wk-li__board { position: absolute; left: 0; right: 0; top: 96px; height: 124px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0, rgba(255, 255, 255, .012) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 3px), linear-gradient(180deg, #0C0D10 0, #050506 30%, #050506 80%, #08090B 100%);
  box-shadow: inset 0 1px 0 rgba(242, 241, 236, .18), inset 0 -1px 0 rgba(242, 241, 236, .05), 0 26px 50px -22px rgba(0, 0, 0, .95); }
.wk-li__bolt { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #6A7078, #24272C 62%, #121316); box-shadow: 0 0 0 1px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .05); }
.wk-li__bolt:nth-child(1) { left: 12px; top: 12px; } .wk-li__bolt:nth-child(2) { right: 12px; top: 12px; }
.wk-li__bolt:nth-child(3) { left: 12px; bottom: 12px; } .wk-li__bolt:nth-child(4) { right: 12px; bottom: 12px; }
.wk-li__lamps { position: absolute; left: 50%; top: 24px; width: 168px; height: 44px; margin-left: -84px; }
.wk-lp { position: absolute; top: 0; width: 44px; height: 44px; }
.wk-lp i { position: absolute; border-radius: 50%; pointer-events: none; }
.wk-lp__bloom { left: -44px; top: -44px; width: 132px; height: 132px; opacity: 0; background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 255, 255, .26) 36%, rgba(255, 255, 255, .09) 62%, rgba(255, 255, 255, .025) 84%, rgba(255, 255, 255, 0)); }
.wk-lp__hs { left: -5px; top: -5px; width: 54px; height: 54px; background: linear-gradient(180deg, #1C1E22, #0A0B0D); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -1px 1px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .9); }
.wk-lp__glass { left: 0; top: 0; width: 44px; height: 44px; background: radial-gradient(circle at 50% 55%, #1B1C1E, #0A0A0B); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 2px 4px rgba(0, 0, 0, .6); }
.wk-lp__glass::after { content: ""; position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 2px solid transparent; border-top-color: rgba(255, 255, 255, .18); border-left-color: rgba(255, 255, 255, .12); transform: rotate(-12deg); }
.wk-lp__core { left: 0; top: 0; width: 44px; height: 44px; opacity: 0; background: radial-gradient(circle at 50% 50%, #FFFFFF 0, #FFFFFF 60%, #FFFAF2 80%, #F7EDDF 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .65), 0 0 14px 3px rgba(255, 255, 255, .38); }
.wk-lp__tint { left: 0; top: 0; width: 44px; height: 44px; opacity: 0; background: radial-gradient(circle at 50% 50%, #FFF2DE 0, var(--wk-strike) 54%, #ECBD84 100%); }
.wk-lp__flare { left: -9px; top: -9px; width: 62px; height: 62px; opacity: 0; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, .45) 58%, rgba(255, 255, 255, 0)); }
.wk-li__att { position: absolute; left: 0; right: 0; top: 80px; text-align: center; white-space: nowrap; font: 600 14px/28px var(--wk-cond); color: var(--wk-muted); }
.wk-li__att b { font: 700 13px/1 var(--wk-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--wk-text); }
.wk-li__sep { margin: 0 8px; }
.wk-li__att .wk-n { font-size: 28px; color: var(--wk-text); }
.wk-li__att .wk-lb { font-size: 14px; }
.wk-li__att em { margin: 0 3px 0 8px; }
.wk-li__good { position: absolute; left: 0; right: 0; top: 240px; display: flex; justify-content: center; font: 800 30px/1 var(--wk-disp); letter-spacing: .04em; color: var(--wk-text); white-space: nowrap; opacity: 0; }
.wk-li__good span { display: inline-block; }
.wk-li__good .is-sp { width: .22em; }
.wk-li__clip { position: absolute; left: 50%; top: 288px; width: 184px; height: 230px; margin-left: -92px; border-radius: 14px; opacity: 0; box-shadow: 0 0 0 1px rgba(242, 241, 236, .10), 0 30px 60px -24px rgba(0, 0, 0, .95); }
.wk-li__clip .wk-chip { position: absolute; left: 8px; bottom: 8px; z-index: 2; }
.wk-li__pr { position: absolute; left: 16px; right: 16px; top: 536px; height: 112px; border-radius: 14px; opacity: 0;
  background: linear-gradient(180deg, #1A1E25, #14171C); box-shadow: inset 0 0 0 var(--wk-hl) var(--wk-hair2), inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 50px -18px rgba(0, 0, 0, .95); }
.wk-li__prk { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; background: var(--wk-red-deep); color: var(--wk-text); font: 700 12px/1 var(--wk-cond); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.wk-li__prl { position: absolute; left: 96px; top: 16px; font: 600 17px/22px var(--wk-sans); }
.wk-li__prw { position: absolute; left: 16px; top: 52px; display: flex; align-items: baseline; gap: 8px; }
.wk-li__prw .wk-n { font-size: 46px; line-height: 1; }
.wk-li__prw .wk-lb { font-size: 17px; }
.wk-li__prd { position: absolute; right: 16px; top: 50%; height: 40px; margin-top: -20px; padding: 0 12px; display: flex; align-items: center; border-radius: 10px; font: 800 28px/1 var(--wk-disp); color: var(--wk-text); box-shadow: inset 0 0 0 1px rgba(242, 241, 236, .5); }
.wk-short .wk-li__dim { top: 513px; height: 50px; }
.wk-short .wk-li__fill { top: 512px; height: 52px; }
.wk-short .wk-li__board { top: 92px; height: 118px; }
.wk-short .wk-li__lamps { top: 22px; }
.wk-short .wk-li__att { top: 76px; }
.wk-short .wk-li__good { top: 228px; }
.wk-short .wk-li__clip { top: 274px; width: 164px; height: 205px; margin-left: -82px; }
.wk-short .wk-li__pr { top: 495px; height: 104px; }
.wk-short .wk-li__prw { top: 48px; }
.wk-short .wk-li__prw .wk-n { font-size: 42px; }

/* ------------------------------------------------------------------ rest: the competition clock (red dot matrix on black) */
.wk-re__ov { position: absolute; left: 16px; top: 66px; }
.wk-re__t { position: absolute; left: 16px; top: 86px; }
.wk-re__clock { position: absolute; left: 16px; right: 16px; top: 150px; height: 236px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #08090B, #050506); box-shadow: inset 0 1px 0 rgba(242, 241, 236, .14), inset 0 0 0 var(--wk-hl) var(--wk-hair), 0 20px 40px -24px rgba(0, 0, 0, .9); }
.wk-re__glow { position: absolute; left: 8%; right: 8%; top: 4%; bottom: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 70, 60, .12), rgba(255, 70, 60, 0)); }
.wk-re__led { position: absolute; left: 50%; top: 50px; display: block; transform: translate3d(-50%, 0, 0); }
.wk-re__track { position: absolute; left: 24px; right: 24px; bottom: 24px; height: 2px; border-radius: 1px; background: rgba(242, 241, 236, .10); overflow: hidden; }
.wk-re__track b { position: absolute; inset: 0; border-radius: 1px; background: rgba(242, 241, 236, .72); transform-origin: 0 50%; }
.wk-re__btns { position: absolute; left: 16px; right: 16px; top: 402px; display: flex; gap: 8px; }
.wk-re__btns .wk-btn { flex: 1; font-variant-numeric: tabular-nums; }
.wk-re__next { top: 478px; height: 100px; }
.wk-re__th { position: absolute; left: 16px; top: 24px; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--wk-s2); }
.wk-re__th .wk-img { position: absolute; inset: 0; }
.wk-re__rim { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--wk-p20), inset 0 0 0 4px rgba(0, 0, 0, .35), inset 0 4px 3px -2px rgba(255, 255, 255, .18); }
.wk-re__next .wk-k { position: absolute; left: 84px; top: 16px; }
.wk-re__nn { position: absolute; left: 84px; top: 33px; font: 600 17px/20px var(--wk-sans); }
.wk-re__nw, .wk-re__lw { position: absolute; left: 84px; top: 58px; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.wk-re__nw .wk-n, .wk-re__lw .wk-n { font-size: 28px; line-height: 1; }
.wk-re__nw .wk-lb, .wk-re__lw .wk-lb { font-size: 14px; }
.wk-re__nw em, .wk-re__lw em { margin-left: 4px; font: 500 15px/1 var(--wk-sans); color: var(--wk-muted); }
.wk-re__nw > span:last-child, .wk-re__lw > span:last-child { font: 600 17px/1 var(--wk-sans); font-variant-numeric: tabular-nums; }
.wk-re__last { top: 590px; height: 84px; }
.wk-re__last .wk-k { position: absolute; left: 16px; top: 16px; }
.wk-re__lw { left: 16px; top: 40px; }
.wk-re__ll { position: absolute; right: 16px; top: 22px; display: flex; gap: 7px; }
.wk-re__ll i, .wk-at__l i { position: relative; display: block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 50% 55%, #1B1C1E, #0A0A0B); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 0 0 2px #050506; }
.wk-re__ll b, .wk-at__l b { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #FFFFFF 0, #FFFFFF 55%, #F4E8D6 100%); box-shadow: 0 0 9px 1px rgba(255, 255, 255, .42); }
.wk-re__lg { position: absolute; right: 16px; top: 46px; font: 700 11px/12px var(--wk-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--wk-text); }
.wk-short .wk-re__ov { top: 62px; }
.wk-short .wk-re__t { top: 80px; font-size: 40px; }
.wk-short .wk-re__clock { top: 138px; height: 200px; }
.wk-short .wk-re__led { top: 38px; }
.wk-short .wk-re__track { bottom: 20px; }
.wk-short .wk-re__btns { top: 352px; }
.wk-short .wk-re__next { top: 424px; height: 96px; }
.wk-short .wk-re__th { top: 22px; }
.wk-short .wk-re__next .wk-k { top: 14px; } .wk-short .wk-re__nn { top: 31px; } .wk-short .wk-re__nw { top: 56px; }
.wk-short .wk-re__last { top: 532px; height: 80px; }
.wk-short .wk-re__lw { top: 38px; }

/* ------------------------------------------------------------------ maxout: Maxout Friday */
.wk-mo__ov { position: absolute; left: 16px; top: 66px; }
.wk-mo__t { position: absolute; left: 16px; top: 86px; }
.wk-mo__sub { position: absolute; left: 16px; top: 138px; font: 500 15px/18px var(--wk-sans); color: var(--wk-muted); white-space: nowrap; }
.wk-mo__sub span { margin: 0 6px; }
.wk-mo__sub b { color: var(--wk-text); font-weight: 600; }
.wk-mo__chase { top: 170px; height: 184px; }
.wk-mo__clip { position: absolute; left: 8px; top: 8px; width: 134px; height: 168px; border-radius: 8px; }
.wk-mo__clip .wk-chip { position: absolute; left: 8px; bottom: 8px; z-index: 2; }
.wk-mo__chase .wk-k { position: absolute; left: 158px; top: 34px; }
.wk-mo__who { position: absolute; left: 158px; top: 56px; font: 600 17px/20px var(--wk-sans); }
.wk-mo__w { position: absolute; left: 158px; top: 84px; display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.wk-mo__w .wk-n { font-size: 44px; line-height: 1; }
.wk-mo__w .wk-lb { font-size: 16px; }
.wk-mo__lift { position: absolute; left: 158px; top: 134px; font: 500 14px/18px var(--wk-sans); color: var(--wk-muted); }
.wk-mo__h { position: absolute; left: 16px; top: 372px; }
.wk-mo__rows { position: absolute; left: 16px; right: 16px; top: 394px; }
.wk-at { position: absolute; left: 0; right: 0; height: 64px; }
.wk-at:nth-child(1) { top: 0; } .wk-at:nth-child(2) { top: 72px; } .wk-at:nth-child(3) { top: 144px; } .wk-at:nth-child(4) { top: 216px; }
.wk-at__bg { position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(180deg, #161A20, #12151A); box-shadow: inset 0 0 0 var(--wk-hl) var(--wk-hair), inset 0 1px 0 rgba(255, 255, 255, .03); }
.wk-at--tg .wk-at__bg { background: rgba(20, 23, 28, .4); box-shadow: inset 0 0 0 1px rgba(242, 241, 236, .42); }
.wk-at__d { position: absolute; left: 16px; top: 15px; display: flex; flex-direction: column; font: 600 12px/17px var(--wk-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--wk-muted); white-space: nowrap; }
.wk-at__d b:first-child { color: var(--wk-text); }
.wk-at__w { position: absolute; left: 84px; top: 18px; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.wk-at__w .wk-n { font-size: 30px; line-height: 1; }
.wk-at__w .wk-lb { font-size: 14px; }
.wk-at__tag { position: absolute; right: 88px; top: 21px; height: 22px; padding: 0 8px; display: flex; align-items: center; border-radius: 4px; font: 700 11px/1 var(--wk-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--wk-text); box-shadow: inset 0 0 0 1px rgba(242, 241, 236, .4); }
.wk-at__l { position: absolute; right: 16px; top: 25px; display: flex; gap: 7px; }
.wk-at__l b { opacity: 0; }
.wk-short .wk-mo__ov { top: 62px; }
.wk-short .wk-mo__t { top: 80px; font-size: 40px; }
.wk-short .wk-mo__sub { top: 128px; }
.wk-short .wk-mo__chase { top: 156px; height: 156px; }
.wk-short .wk-mo__clip { width: 112px; height: 140px; }
.wk-short .wk-mo__chase .wk-k, .wk-short .wk-mo__who, .wk-short .wk-mo__w, .wk-short .wk-mo__lift { left: 136px; }
.wk-short .wk-mo__chase .wk-k { top: 22px; } .wk-short .wk-mo__who { top: 42px; } .wk-short .wk-mo__w { top: 70px; } .wk-short .wk-mo__lift { top: 118px; }
.wk-short .wk-mo__w .wk-n { font-size: 40px; }
.wk-short .wk-mo__h { top: 326px; }
.wk-short .wk-mo__rows { top: 346px; }
.wk-short .wk-at { height: 56px; }
.wk-short .wk-at:nth-child(2) { top: 62px; } .wk-short .wk-at:nth-child(3) { top: 124px; } .wk-short .wk-at:nth-child(4) { top: 186px; }
.wk-short .wk-at__d { top: 11px; } .wk-short .wk-at__w { top: 14px; } .wk-short .wk-at__tag { top: 17px; } .wk-short .wk-at__l { top: 21px; }
.wk-short .wk-at__w .wk-n { font-size: 28px; }

/* ------------------------------------------------------------------ you: total, PR board, streak, coaching */
.wk-yo__ov { position: absolute; left: 16px; top: 66px; }
.wk-yo__t { position: absolute; left: 16px; top: 86px; }
.wk-tot { top: 144px; height: 200px; }
.wk-tot .wk-k { position: absolute; left: 16px; top: 16px; }
.wk-tot__s { position: absolute; right: 16px; top: 16px; font: 500 13px/14px var(--wk-sans); color: var(--wk-muted); white-space: nowrap; }
.wk-tot__w { position: absolute; left: 16px; top: 38px; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.wk-tot__w .wk-n { font-size: 40px; line-height: 1; }
.wk-tot__w .wk-lb { font-size: 16px; }
.wk-tot__ch { position: absolute; left: 0; top: 94px; overflow: visible; }
.wk-tot__grid path { fill: none; stroke: rgba(242, 241, 236, .08); stroke-width: 1; stroke-dasharray: 2 4; }
.wk-tot__area { stroke: none; }
.wk-tot__ln { fill: none; stroke: var(--wk-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.wk-tot__pt { fill: var(--wk-text); }
.wk-tot__pend { fill: var(--wk-s1); stroke: var(--wk-muted); stroke-width: 1.5; stroke-dasharray: 2 2; opacity: 0; }
.wk-tot__hot, .wk-tot__ring { transform-box: fill-box; transform-origin: 50% 50%; }
.wk-tot__hot { fill: var(--wk-red); opacity: 0; }
.wk-tot__ring { fill: none; stroke: var(--wk-red); stroke-width: 1.5; opacity: 0; }
.wk-tot__d { position: absolute; left: 0; top: 0; width: 38px; height: 20px; justify-content: center; display: flex; align-items: center; border-radius: 4px; background: var(--wk-red-deep); color: var(--wk-text); font: 700 12px/1 var(--wk-cond); letter-spacing: .04em; white-space: nowrap; opacity: 0; }
.wk-tot__x0, .wk-tot__x1 { position: absolute; top: 176px; font: 600 11px/12px var(--wk-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--wk-muted); }
.wk-tot__x0 { left: 16px; } .wk-tot__x1 { right: 16px; }
.wk-prb { top: 356px; height: 154px; }
.wk-prb .wk-k { position: absolute; left: 16px; top: 16px; }
.wk-prr { position: absolute; left: 16px; right: 16px; height: 36px; display: flex; align-items: center; }
.wk-prr:nth-of-type(1) { top: 40px; } .wk-prr:nth-of-type(2) { top: 76px; } .wk-prr:nth-of-type(3) { top: 112px; }
.wk-prr:nth-of-type(n+2) { box-shadow: inset 0 var(--wk-hl) 0 var(--wk-hair); }
.wk-prr__n { font: 600 16px/20px var(--wk-sans); white-space: nowrap; }
.wk-prr__new { margin-left: 8px; height: 18px; padding: 0 6px; display: inline-flex; align-items: center; border-radius: 3px; background: var(--wk-red-deep); color: var(--wk-text); font: 700 11px/1 var(--wk-cond); letter-spacing: .12em; text-transform: uppercase; }
.wk-prr__w { margin-left: auto; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.wk-prr__w .wk-n { font-size: 28px; line-height: 1; }
.wk-prr__w .wk-lb { font-size: 14px; }
.wk-stk { top: 522px; height: 84px; }
.wk-stk__n { position: absolute; left: 16px; top: 13px; font: 800 44px/1 var(--wk-disp); color: var(--wk-text); }
.wk-stk .wk-k { position: absolute; left: 16px; top: 60px; }
.wk-stk__dots { position: absolute; right: 16px; top: 21px; display: grid; grid-template-columns: repeat(7, 10px); grid-auto-rows: 10px; gap: 6px; }
.wk-stk__dots i { position: relative; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--wk-unlit); }
.wk-stk__dots b { position: absolute; inset: 0; border-radius: 50%; background: var(--wk-text); transform: scale(0); }
.wk-stk__dots i.is-today { background: transparent; box-shadow: inset 0 0 0 1.5px var(--wk-muted); }
.wk-cch { top: 618px; height: 92px; display: block; width: auto; text-align: left; }
.wk-cch__ph { position: absolute; left: 16px; top: 18px; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--wk-s3); box-shadow: 0 0 0 1.5px var(--wk-text); }
.wk-cch__ph .wk-img { object-position: 70% 24%; transform: scale(1.55); transform-origin: 70% 26%; }
.wk-cch .wk-k { position: absolute; left: 88px; top: 18px; }
.wk-cch__t { position: absolute; left: 88px; top: 35px; font: 600 16px/20px var(--wk-sans); color: var(--wk-text); white-space: nowrap; }
.wk-cch__s { position: absolute; left: 88px; top: 57px; font: 500 13px/16px var(--wk-sans); color: var(--wk-muted); white-space: nowrap; }
.wk-cch__go { position: absolute; right: 12px; top: 50%; margin-top: -9px; color: var(--wk-muted); }
.wk-live .wk-cch:active { background: linear-gradient(180deg, #1B1F26, #161A20); }
.wk-short .wk-yo__ov { top: 62px; }
.wk-short .wk-yo__t { top: 80px; font-size: 40px; }
.wk-short .wk-tot { top: 128px; height: 178px; }
.wk-short .wk-tot .wk-k, .wk-short .wk-tot__s { top: 14px; }
.wk-short .wk-tot__w { top: 34px; }
.wk-short .wk-tot__w .wk-n { font-size: 36px; }
.wk-short .wk-tot__ch { top: 84px; }
.wk-short .wk-tot__x0, .wk-short .wk-tot__x1 { top: 156px; }
.wk-short .wk-prb { top: 316px; height: 140px; }
.wk-short .wk-prb .wk-k { top: 14px; }
.wk-short .wk-prr { height: 34px; }
.wk-short .wk-prr:nth-of-type(1) { top: 36px; } .wk-short .wk-prr:nth-of-type(2) { top: 70px; } .wk-short .wk-prr:nth-of-type(3) { top: 104px; }
.wk-short .wk-stk { top: 466px; height: 76px; }
.wk-short .wk-stk__n { top: 11px; font-size: 40px; }
.wk-short .wk-stk .wk-k { top: 54px; }
.wk-short .wk-stk__dots { top: 17px; }
.wk-short .wk-cch { top: 552px; height: 84px; }
.wk-short .wk-cch__ph { top: 14px; }
.wk-short .wk-cch .wk-k { top: 14px; } .wk-short .wk-cch__t { top: 31px; } .wk-short .wk-cch__s { top: 53px; }

/* ------------------------------------------------------------------ coach: the coaching sheet over you */
.wk-l-coach { z-index: 7; background: transparent; }
.wk-co { position: absolute; inset: 0; }
.wk-co__scrim { position: absolute; inset: 0; background: rgba(3, 3, 4, .64); }
.wk-co__panel { position: absolute; left: 0; right: 0; bottom: 0; top: 300px; border-radius: 22px 22px 0 0; outline: none;
  background: linear-gradient(180deg, #191C22 0, #121418 46%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 -24px 60px rgba(0, 0, 0, .6); }
.wk-co__panel:focus-visible { outline: none; }
.wk-co__grab { position: absolute; left: 50%; top: 8px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: rgba(242, 241, 236, .22); }
.wk-co__x { position: absolute; z-index: 2; right: 10px; top: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 22px; color: var(--wk-muted); }
.wk-co__x svg { width: 22px; height: 22px; }
.wk-co__body { position: absolute; left: 20px; right: 20px; top: 28px; display: flex; flex-direction: column; align-items: stretch; }
.wk-co__hd { display: flex; align-items: center; gap: 12px; }
.wk-co__hd .wk-icon { border-radius: 10px; }
.wk-co__t { margin-top: 18px; font: 800 34px/.95 var(--wk-disp); letter-spacing: -.005em; text-transform: uppercase; color: var(--wk-text); }
.wk-co__s { margin-top: 10px; font: 500 16px/21px var(--wk-sans); color: var(--wk-muted); }
.wk-co__lh { margin-top: 26px; display: flex; align-items: center; gap: 8px; }
.wk-co__ul { margin-top: 8px; }
.wk-co__li { display: flex; align-items: center; gap: 14px; height: 52px; font: 500 16px/20px var(--wk-sans); color: var(--wk-text); box-shadow: inset 0 calc(-1 * var(--wk-hl)) 0 var(--wk-hair); }
.wk-co__li:last-child { box-shadow: none; }
.wk-co__ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--wk-s2); color: var(--wk-text); box-shadow: inset 0 0 0 var(--wk-hl) var(--wk-hair2); }
.wk-co__ic svg { width: 22px; height: 22px; }
.wk-co__apply { position: absolute; left: 20px; right: 20px; bottom: 42px; }
.wk-co__sent { position: absolute; left: 20px; right: 20px; bottom: 42px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--wk-s2); box-shadow: inset 0 0 0 var(--wk-hl) var(--wk-hair2); font: 600 17px/1 var(--wk-sans); color: var(--wk-text); opacity: 0; visibility: hidden; }
.wk-co__tk { display: flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; background: var(--wk-text); color: var(--wk-ground); }
.wk-co__panel.is-sent .wk-co__apply { opacity: 0; visibility: hidden; }
.wk-co__panel.is-sent .wk-co__sent { opacity: 1; visibility: inherit; }
.wk-short .wk-co__panel { top: 252px; }

/* ------------------------------------------------------------------ reduced motion (?rm=1: every transition a 150 ms fade) */
.wk-rm .wk-btn, .wk-rm .wk-lift, .wk-rm .wk-tab i, .wk-rm .wk-seg__k { transition: none; }