/* MOVE, the app (lenny/SPEC.md section 9). Every class starts with "mv-", every token "--mv-*", everything is scoped
   to .mv-root. The host declares the fonts (Archivo, Inter, JetBrains Mono) and sets --mv-w / --mv-h on the mount.
   Canvas 393 × 852 (default) or 393 × 780 (.mv-short): the 780 variant compresses Today's rows to 60 pt and its hero
   card to 78 pt. One idea per screen, 12 px text at the least, lemon for progress only. Motion: transform, opacity,
   clip-path and stroke-dashoffset only. */

.mv-root {
  --mv-ground: #0B0C0B; --mv-s1: #141614; --mv-s2: #1C1F1C; --mv-s3: #252925;
  --mv-hair: rgba(236, 240, 230, .08); --mv-text: #F2F1EA; --mv-muted: #8D928A; --mv-faint: #5A5F58;
  --mv-lemon: #F8EC00; --mv-lemon-ink: #0B0C0B; --mv-lemon-press: #DCD100; --mv-lemon-soft: rgba(248, 236, 0, .14); --mv-lemon-hi: #FFF7A1;
  --mv-steel: #9BA3A7; --mv-node: #2A2F31; --mv-lake: #6E8FA8; --mv-timber: #B48A60;
  --mv-ios: cubic-bezier(.32, .72, 0, 1); --mv-out: cubic-bezier(.22, 1, .36, 1);
  --mv-sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mv-disp: "Archivo", "Inter", -apple-system, "Segoe UI", sans-serif;
  --mv-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --mv-hl: 1px;
  /* the stamp's rubber texture: a static grain mask (same object as the page's BOOKS CLOSED stamp) */
  --mv-rubber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.25'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  position: relative; display: block; overflow: hidden;
  width: var(--mv-w, 393px); height: var(--mv-h, 852px);
  background: var(--mv-ground); color: var(--mv-text);
  font: 500 15px/1.3 var(--mv-sans); letter-spacing: 0; text-align: left;
  -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; overflow: clip;
}
@media (min-resolution: 2dppx) { .mv-root { --mv-hl: .5px; } }
.mv-root :where(*), .mv-root :where(*)::before, .mv-root :where(*)::after { box-sizing: border-box; }
.mv-root :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.mv-root :where(button:disabled) { cursor: default; }
.mv-root :where(h2, h3, p, ol, li) { margin: 0; padding: 0; font: inherit; list-style: none; }
.mv-root :where(img) { display: block; max-width: none; }
.mv-root :where(b) { font-weight: inherit; }
.mv-root :where(i) { font-style: normal; }
.mv-root :where(svg) { display: block; overflow: visible; }
/* story mode: every screen and the chrome are inert (no focus, no targeting) and every handler returns outside live mode. No inherited
   pointer-events here: toggling an inherited property on the root would restyle the whole app on every mode switch */
.mv-desk .mv-root button, .mv-desk [role="button"] { cursor: pointer; }
/* focus only exists in live mode (story mode is inert), so these need no mode class: a mode class here would make
   every mode switch restyle each button of the app */
.mv-root :focus { outline: none; }
.mv-root :focus-visible { outline: 2px solid var(--mv-lemon); outline-offset: 3px; border-radius: 12px; }
.mv-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 */
.mv-mono { font-family: var(--mv-mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mv-muted); }
.mv-u { text-transform: none; }   /* the seconds unit inside a caps mono line */
.mv-lt { font: 700 32px/1.18 var(--mv-sans); letter-spacing: -.012em; color: var(--mv-text); }
.mv-av { position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; background: var(--mv-s3); }
.mv-av img, .mv-img { width: 100%; height: 100%; object-fit: cover; }
.mv-av img { transform: scale(1.35); transform-origin: 62% 42%; }
.mv-av::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(242, 241, 234, .14); }
.mv-pill { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 26px; background: var(--mv-lemon); color: var(--mv-lemon-ink); font: 650 17px/1 var(--mv-sans); font-weight: 650; letter-spacing: -.005em; transition: transform .16s var(--mv-out), background-color .16s linear; }
.mv-pill svg { width: 14px; height: 14px; }
.mv-pill.is-press, .mv-pill:active { transform: scale(.97); background: var(--mv-lemon-press); }
.mv-pill--sm { width: auto; height: 32px; border-radius: 16px; padding: 0 16px; font-size: 15px; }
.mv-pill--off { background: var(--mv-text); color: var(--mv-lemon-ink); }
.mv-pill--off.is-press, .mv-pill--off:active { background: #DAD9D2; }
.mv-ib { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 22px; color: var(--mv-text); flex: none; }
.mv-card { position: relative; background: var(--mv-s1); border-radius: 20px; padding: 14px 16px; }
.mv-user { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 16px; background: var(--mv-s2); color: var(--mv-steel); }
.mv-grab { position: absolute; left: 50%; top: 7px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: rgba(242, 241, 234, .22); }
.mv-ic-check { width: 14px; height: 14px; }
.mv-ring__tr { fill: none; stroke: var(--mv-steel); stroke-opacity: .14; }
.mv-ring__a { fill: none; stroke: var(--mv-lemon); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.mv-ring__dot { fill: var(--mv-lemon); }

/* ------------------------------------------------------------------ the glass, layers, chrome */
.mv-glass { position: absolute; inset: 0; overflow: hidden; overflow: clip; background: var(--mv-ground); }
.mv-layer { position: absolute; inset: 0; background: var(--mv-ground); overflow: hidden; overflow: clip; z-index: 1; transform-origin: 50% 46%; contain: strict; }   /* each screen is its own relayout boundary: a ticking number re-lays out its screen, not the app */
/* a screen that is off is fully transparent (and, in live mode, takes no pointer): showing or hiding it restyles that one
   element, never its whole subtree as an inherited visibility switch would (a screen change used to restyle ~800 nodes twice) */
.mv-layer:not(.is-on):not(.is-leaving) { opacity: 0 !important; }
.mv-live .mv-layer.is-leaving { pointer-events: none; }   /* live only: pointer-events is inherited, and story mode is inert anyway */
.mv-layer.is-under { border-radius: 14px; }
.mv-l-exercise, .mv-l-flow { z-index: 3; }
.mv-l-hold { z-index: 4; }
.mv-l-level, .mv-l-step, .mv-l-coach { z-index: 4; background: transparent; clip-path: inset(0 0 83px 0); }   /* under the tab bar: a tab works while a sheet is open; nothing of a sheet ever draws under the bar */
.mv-l-splash { z-index: 9; background: #0B0C0B; }
.mv-layer.is-top { z-index: 7; }
.mv-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 20; pointer-events: none; color: var(--mv-text); }
/* the scroll edge: content that scrolls up (progress, mobility, path) passes under the clock on the ground, not through it */
.mv-status::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 62px; background: linear-gradient(var(--mv-ground) 78%, rgba(11, 12, 11, 0)); }
.mv-status__t { position: absolute; left: 0; width: 140px; top: 19px; text-align: center; font: 650 17px/1 var(--mv-sans); font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.mv-status__r { position: absolute; right: 26px; top: 21px; display: flex; align-items: center; gap: 6px; }
.mv-homeind { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: rgba(242, 241, 234, .9); z-index: 20; pointer-events: none; }
.mv-full .mv-status, .mv-full .mv-homeind { display: none; }
.mv-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 83px; z-index: 5; display: flex; padding: 0 6px 34px; background: rgba(11, 12, 11, .94); box-shadow: inset 0 var(--mv-hl) 0 rgba(236, 240, 230, .1); transform-origin: 50% 0; }
.mv-blur .mv-tabbar { background: rgba(11, 12, 11, .85); }
.mv-story .mv-tabbar { background: var(--mv-ground); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .mv-blur .mv-tabbar { -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); } }
.mv-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding-top: 7px; color: var(--mv-steel); font: 600 12px/1.2 var(--mv-sans); letter-spacing: 0; }
.mv-tab svg { width: 26px; height: 26px; }
.mv-tab.is-on { color: var(--mv-text); }
.mv-minibar { position: absolute; left: 0; right: 0; top: calc(var(--mv-mini, 725px)); height: 44px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 0 16px 0 18px; background: var(--mv-s2); box-shadow: inset 0 var(--mv-hl) 0 rgba(236, 240, 230, .08); font: 500 13px/1 var(--mv-sans); font-variant-numeric: tabular-nums; visibility: hidden; }
.mv-short .mv-minibar { top: 653px; }
.mv-minibar__dot { width: 8px; height: 8px; border-radius: 4px; background: var(--mv-lemon); flex: none; }
.mv-minibar__t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-minibar svg { color: var(--mv-muted); }
.mv-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, 234, .28); box-shadow: 0 0 0 1.5px rgba(242, 241, 234, .7), 0 6px 18px rgba(0, 0, 0, .4); }
.mv-toast { position: absolute; left: 50%; top: 62px; z-index: 22; transform: translate3d(-50%, -8px, 0); opacity: 0; padding: 10px 16px; border-radius: 18px; background: rgba(37, 41, 37, .96); color: var(--mv-text); font: 600 14px/1.2 var(--mv-sans); white-space: nowrap; pointer-events: none; transition: opacity .2s linear, transform .3s var(--mv-out); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.mv-toast.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); }
.mv-matched { position: absolute; left: 0; top: 0; width: 361px; height: 451px; z-index: 8; overflow: hidden; transform-origin: 0 0; border-radius: 20px; pointer-events: none; background: var(--mv-s2); }
.mv-matched img { width: 100%; height: 100%; object-fit: cover; }

/* video slots: a poster image, the clip on top once it plays */
.mv-vs { position: relative; display: block; overflow: hidden; background: var(--mv-s2); }
.mv-vs__p { position: absolute; inset: 0; }
.mv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .18s linear; pointer-events: none; }
.mv-vs.is-playing .mv-video { opacity: 1; }

/* ------------------------------------------------------------------ splash */
.mv-sp { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 40px; background: #0B0C0B; }
.mv-sp__icon { position: relative; width: 96px; height: 96px; border-radius: 22px; background: radial-gradient(60% 60% at 50% 46%, #1A1D1A, #0B0C0B 100%); box-shadow: inset 0 0 0 var(--mv-hl) rgba(242, 241, 234, .1), 0 18px 40px rgba(0, 0, 0, .5); opacity: 0; }
.mv-sp__icon .mv-ring { position: absolute; inset: 0; }
.mv-sp__flash { position: absolute; left: 53px; top: 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--mv-lemon-hi); box-shadow: 0 0 16px 6px rgba(255, 247, 161, .7); opacity: 0; }
.mv-wm { display: flex; align-items: center; font: 900 44px/1 var(--mv-disp); font-stretch: 112%; letter-spacing: -.01em; text-transform: uppercase; color: var(--mv-text); }
.mv-wm .mv-wm__o { width: .88em; height: .88em; margin: 0 .02em 0 .03em; }
.mv-sp__wm { margin-top: 30px; opacity: 0; }
.mv-sp__by { margin-top: 14px; font: 500 12px/1 var(--mv-mono); letter-spacing: .12em; color: var(--mv-muted); opacity: 0; }

/* ------------------------------------------------------------------ today */
/* a date, the title, the hero card, seven rows. The row cells (48 x 60 at 16, 256 + 64 i; 780: 220 + 60 i) are the
   chapter 4 landing targets read through getTodayCells(): their geometry does not move */
.mv-td { position: absolute; inset: 0; }
.mv-td__date { position: absolute; left: 16px; right: 16px; top: 62px; font: 500 14px/18px var(--mv-sans); color: var(--mv-muted); white-space: nowrap; }
.mv-td__top { position: absolute; left: 16px; right: 16px; top: 82px; height: 42px; display: flex; align-items: center; gap: 8px; }
.mv-td__top .mv-lt { flex: 1; white-space: nowrap; }
.mv-td__top .mv-user { width: 36px; height: 36px; border-radius: 18px; }
.mv-hero { position: absolute; left: 16px; right: 16px; top: 140px; height: 88px; border-radius: 22px; display: block; opacity: .4; }
.mv-hero__bg { position: absolute; inset: 0; border-radius: 22px; background: var(--mv-s1); box-shadow: inset 0 0 0 var(--mv-hl) var(--mv-hair); }
.mv-hero__ov { position: absolute; left: 18px; right: 84px; top: 19px; font: 500 13px/16px var(--mv-sans); color: var(--mv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-hero__t { position: absolute; left: 18px; right: 84px; top: 41px; font: 700 21px/26px var(--mv-sans); letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-hero__t.is-long { font-size: 18px; }
.mv-hero__ring { position: absolute; right: 16px; top: 16px; width: 56px; height: 56px; }
.mv-hero__ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 15px/1 var(--mv-sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mv-td__rows { position: absolute; left: 0; right: 0; top: 254px; }
.mv-row { position: relative; display: block; height: 64px; }
.mv-row__fill { position: absolute; left: 8px; right: 8px; top: 1px; bottom: 1px; border-radius: 14px; background: var(--mv-s2); opacity: 0; }
.mv-row__rail { position: absolute; left: 5px; top: 4px; width: 3px; height: 56px; border-radius: 2px; background: var(--mv-lemon); transform: scaleY(0); transform-origin: 50% 100%; }
.mv-row__th { position: absolute; left: 16px; top: 2px; width: 48px; height: 60px; border-radius: 10px; }
.mv-row__slot { position: absolute; inset: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(155, 163, 167, .3); }
.mv-row__img { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; }
.mv-row__vs { position: absolute; inset: 0; border-radius: 10px; }
.mv-row__body { position: absolute; left: 80px; right: 52px; top: 6px; height: 52px; display: flex; flex-direction: column; justify-content: center; gap: 3px; opacity: 0; }
.mv-row__body::after { content: ""; position: absolute; left: 0; right: -36px; bottom: -6px; height: var(--mv-hl); background: var(--mv-hair); }
.mv-row:last-child .mv-row__body::after { display: none; }
.mv-row__name { display: block; font: 600 17px/21px var(--mv-sans); letter-spacing: -.01em; color: var(--mv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-row__rx { display: block; font: 500 14px/18px var(--mv-sans); color: var(--mv-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-row__st { position: absolute; right: 16px; top: 21px; width: 22px; height: 22px; opacity: 0; }
.mv-row__part, .mv-row__ck { position: absolute; inset: 0; display: none; }
.mv-row.is-part .mv-row__part { display: block; }
.mv-row.is-done .mv-row__part { display: none; }
.mv-row.is-done .mv-row__ck { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mv-lemon); color: var(--mv-lemon-ink); }
.mv-row__ck svg { width: 13px; height: 13px; }
.mv-row__line { position: absolute; left: 80px; right: 16px; bottom: 2px; height: 2px; opacity: 0; }
.mv-row__line i { position: absolute; inset: 0; background: var(--mv-lemon); border-radius: 1px; transform-origin: 0 50%; transform: scaleX(0); }
.mv-td__start { position: absolute; left: 16px; right: 16px; top: 713px; height: 48px; border-radius: 24px; font-size: 17px; opacity: 0; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
.mv-short .mv-td__date { top: 58px; }
.mv-short .mv-td__top { top: 76px; height: 40px; }
.mv-short .mv-hero { top: 126px; height: 78px; }
.mv-short .mv-hero__ov { top: 15px; }
.mv-short .mv-hero__t { top: 35px; }
.mv-short .mv-hero__ring { top: 11px; }
.mv-short .mv-td__rows { top: 220px; }
.mv-short .mv-row { height: 60px; }
.mv-short .mv-row__th { top: 0; }
.mv-short .mv-row__fill { top: 0; bottom: 0; }
.mv-short .mv-row__rail { top: 2px; }
.mv-short .mv-row__body { top: 4px; }
.mv-short .mv-row__st { top: 19px; }
.mv-short .mv-td__start { top: 645px; height: 44px; }

/* ------------------------------------------------------------------ sheets (level, step, coach) */
.mv-sheet__scrim { position: absolute; left: 0; right: 0; top: 0; bottom: 83px; background: rgba(0, 0, 0, .5); opacity: 0; }
.mv-sheet { position: absolute; left: 0; right: 0; bottom: 83px; background: var(--mv-s2); border-radius: 28px 28px 0 0; overflow: hidden; transform: translate3d(0, 100%, 0); box-shadow: 0 -10px 40px rgba(0, 0, 0, .45); }
.mv-lv { top: 68px; }
.mv-short .mv-lv { top: 62px; }
.mv-lv__track { position: absolute; inset: 0; }
.mv-lv__p { position: absolute; inset: 0; padding: 26px 16px 0; }
.mv-lv__p2 { visibility: hidden; background: var(--mv-s2); }
.mv-dash { display: flex; gap: 4px; height: 3px; }
.mv-dash i { width: 18px; height: 3px; border-radius: 2px; background: rgba(155, 163, 167, .4); }
.mv-dash i.is-on { background: var(--mv-lemon); }
.mv-lv__t { margin-top: 16px; font: 700 28px/32px var(--mv-sans); letter-spacing: -.015em; }
.mv-lv__cards { margin-top: 20px; display: grid; gap: 12px; }
.mv-lc { position: relative; display: flex; height: 124px; border-radius: 22px; background: var(--mv-s1); overflow: hidden; box-shadow: inset 0 0 0 var(--mv-hl) var(--mv-hair); transition: box-shadow .2s linear, background-color .2s linear; }
.mv-lc__tx { flex: 1; min-width: 0; padding: 0 12px 0 18px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.mv-lc__t { font: 700 20px/24px var(--mv-sans); letter-spacing: -.015em; }
.mv-lc__s { font: 500 14px/1.35 var(--mv-sans); color: var(--mv-muted); }
.mv-lc__m { position: relative; flex: none; width: 104px; height: 124px; overflow: hidden; }
.mv-lc__m > img { width: 100%; height: 100%; object-fit: cover; }
.mv-lc__ck { position: absolute; right: 10px; top: 10px; width: 24px; height: 24px; border-radius: 12px; background: var(--mv-lemon); color: var(--mv-lemon-ink); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.6); transition: opacity .2s linear, transform .3s var(--mv-out); }
.mv-lc.is-sel { box-shadow: inset 0 0 0 2px var(--mv-lemon); }
.mv-lc.is-sel .mv-lc__ck { opacity: 1; transform: scale(1); }
.mv-lc.is-touch { background: var(--mv-s3); }
.mv-lv__tiles { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mv-tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--mv-s1); }
.mv-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mv-tile[data-skill="front-lever"] > img { transform: scale(1.32); transform-origin: 60% 12%; }
.mv-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 12, 11, .9) 0, rgba(11, 12, 11, .55) 20%, rgba(11, 12, 11, 0) 40%); z-index: 1; }
.mv-tile__tx { position: absolute; left: 14px; right: 14px; bottom: 13px; z-index: 2; }
.mv-tile__tx b { font: 700 18px/1.1 var(--mv-sans); letter-spacing: -.01em; }
.mv-tile__ck { position: absolute; right: 10px; top: 10px; z-index: 2; width: 24px; height: 24px; border-radius: 12px; background: var(--mv-lemon); color: var(--mv-lemon-ink); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.6); transition: opacity .2s linear, transform .3s var(--mv-out); }
.mv-tile.is-sel { box-shadow: inset 0 0 0 2px var(--mv-lemon); }
.mv-tile.is-sel::after { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 0 0 0 2px var(--mv-lemon); z-index: 3; }
.mv-tile.is-sel .mv-tile__ck { opacity: 1; transform: scale(1); }
.mv-lv__go { position: absolute; left: 16px; right: 16px; bottom: 16px; }

/* ------------------------------------------------------------------ exercise */
.mv-ex { position: absolute; inset: 0; }
.mv-ex__top { position: absolute; left: 6px; right: 10px; top: 54px; height: 44px; display: flex; align-items: center; justify-content: space-between; z-index: 3; }
.mv-ex__clock { font: 600 17px/1 var(--mv-sans); font-variant-numeric: tabular-nums; }
.mv-ex__fin { width: 64px; height: 44px; text-align: right; font: 600 15px/44px var(--mv-sans); color: var(--mv-muted); }
.mv-ex__seg { position: absolute; left: 16px; right: 16px; top: 102px; height: 3px; display: flex; gap: 3px; z-index: 3; }
.mv-ex__seg i { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgba(155, 163, 167, .35); overflow: hidden; }
.mv-ex__seg b { position: absolute; inset: 0; display: block; background: var(--mv-lemon); transform-origin: 0 50%; transform: scaleX(0); }
.mv-ex__seg i:first-child b { transform: scaleX(.333); }
.mv-ex__vid { position: absolute; left: 16px; top: 112px; width: 361px; height: 451px; border-radius: 20px; overflow: hidden; z-index: 2; background: var(--mv-s2); }
.mv-ex__vs { position: absolute; inset: 0; }
.mv-ex__clipper { position: absolute; left: 0; right: 0; top: 563px; bottom: 0; overflow: visible; }
.mv-live .mv-ex__clipper { top: 232px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.mv-live .mv-ex__clipper::-webkit-scrollbar { display: none; }
.mv-live .mv-ex__in { position: relative; top: 0; left: 0; right: 0; margin: 347px 16px 0; padding-bottom: 120px; }
.mv-ex__in { position: absolute; left: 16px; right: 16px; top: 16px; }
.mv-ex__t { font: 700 26px/30px var(--mv-sans); letter-spacing: -.015em; }
.mv-ex__m { margin-top: 6px; font: 500 15px/20px var(--mv-sans); color: var(--mv-muted); font-variant-numeric: tabular-nums; }
.mv-sets { margin-top: 18px; }
.mv-sets__h { display: grid; grid-template-columns: 48px 1fr 44px; align-items: center; height: 24px; font: 600 12px/1 var(--mv-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--mv-muted); }
.mv-sets__h span:first-child { padding-left: 4px; }
.mv-sets__h span:last-child { display: flex; justify-content: center; color: var(--mv-muted); }
.mv-sets__b { position: relative; }
.mv-set { position: relative; display: grid; grid-template-columns: 48px 1fr 44px; align-items: center; height: 44px; font: 600 16px/1 var(--mv-sans); font-variant-numeric: tabular-nums; }
.mv-set__fill { position: absolute; inset: 2px -8px; border-radius: 12px; background: var(--mv-lemon-soft); transform-origin: 0 50%; transform: scaleX(0); }
.mv-set.is-done .mv-set__fill { transform: scaleX(1); }
.mv-set > *:not(.mv-set__fill) { position: relative; }
.mv-set__k { padding-left: 4px; }
.mv-wbadge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; border-radius: 6px; background: rgba(180, 138, 96, .2); color: var(--mv-timber); font: 600 12px/1 var(--mv-sans); }
.mv-set__reps { display: flex; align-items: center; gap: 8px; }
.mv-set__reps > b { font: 600 17px/1 var(--mv-sans); }
.mv-set__ck { justify-self: center; width: 30px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: transparent; box-shadow: inset 0 0 0 1.6px rgba(155, 163, 167, .55); transition: transform .14s var(--mv-out); }
.mv-set.is-done .mv-set__ck { background: var(--mv-lemon); color: var(--mv-lemon-ink); box-shadow: none; }
.mv-set__ck.is-press { transform: scale(.86); box-shadow: inset 0 0 0 2px var(--mv-lemon); }
.mv-step { display: inline-flex; align-items: center; height: 34px; border-radius: 17px; background: var(--mv-s3); }
.mv-step__b { width: 36px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--mv-text); border-radius: 17px; transition: background-color .12s linear; }
.mv-step__b.is-press { background: rgba(242, 241, 234, .16); }
.mv-step__v { position: relative; min-width: 26px; text-align: center; font: 700 17px/1 var(--mv-sans); font-variant-numeric: tabular-nums; overflow: hidden; height: 20px; }
.mv-step__v i { display: block; line-height: 20px; }
.mv-step__nx { display: none !important; }
.mv-set.is-done .mv-step { background: transparent; }
.mv-set.is-done .mv-step__b { visibility: hidden; }
.mv-rest { position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; gap: 10px; padding-left: 4px; opacity: 0; visibility: hidden; }
.mv-rest__r .mv-ring__a { stroke: var(--mv-steel); }
.mv-rest__r .mv-ring__tr { stroke-opacity: .22; }
.mv-rest__t { font: 600 16px/1 var(--mv-sans); font-variant-numeric: tabular-nums; color: var(--mv-text); min-width: 40px; }
.mv-rest__b { margin-left: auto; display: flex; gap: 6px; }
.mv-rest__b button { height: 32px; padding: 0 14px; border-radius: 16px; background: var(--mv-s2); font: 600 14px/1 var(--mv-sans); color: var(--mv-text); }
.mv-ex__bfade { position: absolute; left: 0; right: 0; bottom: 0; height: 132px; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(11, 12, 11, 0), rgba(11, 12, 11, .94) 34%, var(--mv-ground)); }
.mv-ex__log { position: absolute; left: 16px; right: 16px; bottom: 40px; z-index: 4; }

/* ------------------------------------------------------------------ mobility */
.mv-scroll { position: absolute; inset: 0; overflow: hidden; overflow: clip; }
.mv-topfade { position: absolute; left: 0; right: 0; top: 0; height: 58px; z-index: 3; pointer-events: none; background: linear-gradient(180deg, var(--mv-ground) 0, var(--mv-ground) 70%, rgba(11, 12, 11, 0)); }
.mv-live .mv-scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mv-live .mv-scroll::-webkit-scrollbar { display: none; }
.mv-in { position: relative; }
.mv-mb__in { padding: 62px 16px 150px; }
.mv-mb__card { position: relative; margin-top: 16px; height: 400px; border-radius: 24px; overflow: hidden; background: var(--mv-s1); }
.mv-mb__vs { position: absolute; inset: 0; }
.mv-mb__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 12, 11, 0) 50%, rgba(11, 12, 11, .82)); pointer-events: none; }
.mv-mb__ctx { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.mv-mb__ctx b { font: 700 26px/1.1 var(--mv-sans); letter-spacing: -.015em; }
.mv-mb__min { font: 500 16px/1.2 var(--mv-sans); color: rgba(242, 241, 234, .85); font-variant-numeric: tabular-nums; }
.mv-durs { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mv-dur { height: 48px; border-radius: 24px; background: var(--mv-s1); font: 600 16px/1 var(--mv-sans); text-align: center; font-variant-numeric: tabular-nums; color: var(--mv-muted); box-shadow: inset 0 0 0 var(--mv-hl) var(--mv-hair); transition: background-color .16s linear, color .16s linear, box-shadow .16s linear; }
.mv-dur.is-on { background: rgba(110, 143, 168, .16); color: var(--mv-text); box-shadow: inset 0 0 0 1.5px var(--mv-lake); }
.mv-mb__start { margin-top: 16px; width: 100%; }
.mv-short .mv-mb__card { height: 300px; }
.mv-st__go { width: 100%; }

/* ------------------------------------------------------------------ flow */
.mv-fl { position: absolute; inset: 0; }
.mv-fl__top { position: absolute; left: 6px; right: 16px; top: 54px; height: 44px; display: flex; align-items: center; gap: 4px; }
.mv-fl__pos { flex: 1; text-align: center; font: 650 15px/1 var(--mv-sans); font-weight: 650; }
.mv-fl__sp { width: 44px; }
.mv-fl__seg { position: absolute; left: 16px; right: 16px; top: 102px; height: 4px; display: flex; gap: 3px; }
.mv-fl__seg i { position: relative; height: 4px; border-radius: 2px; background: rgba(155, 163, 167, .3); overflow: hidden; }
.mv-fl__seg b { position: absolute; inset: 0; background: var(--mv-lemon); transform-origin: 0 50%; transform: scaleX(0); }
.mv-fl__seg i.is-done b { background: var(--mv-lake); }
.mv-fl__media { position: absolute; left: 16px; right: 16px; top: 118px; height: 300px; border-radius: 22px; overflow: hidden; background: var(--mv-s1); }
.mv-fl__media .mv-vs, .mv-fl__still { position: absolute; inset: 0; }
.mv-fl__still { overflow: hidden; opacity: 0; }
.mv-fl__still img { width: 100%; height: 100%; object-fit: cover; }
.mv-fl__side { position: absolute; left: 16px; right: 16px; top: 434px; display: flex; flex-direction: column; align-items: center; }
.mv-fl__ring { position: relative; width: 164px; height: 164px; }
.mv-fl__ring svg { width: 100%; height: 100%; }
.mv-fl__r .mv-ring__tr { stroke-opacity: .16; }
.mv-fl__t { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 48px/1 var(--mv-sans); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.mv-fl__name { margin-top: 12px; font: 700 22px/1.15 var(--mv-sans); letter-spacing: -.015em; text-align: center; }
.mv-fl__next { position: absolute; left: 16px; right: 16px; top: 664px; height: 24px; display: flex; align-items: center; justify-content: center; }
.mv-fl__nt { font: 500 15px/1 var(--mv-sans); color: var(--mv-muted); }
.mv-fl__tp { position: absolute; left: 0; right: 0; top: 712px; height: 64px; display: flex; align-items: center; justify-content: center; gap: 40px; }
.mv-fl__pp { width: 64px; height: 64px; border-radius: 32px; background: var(--mv-lemon); color: var(--mv-lemon-ink); display: flex; align-items: center; justify-content: center; }
.mv-short .mv-fl__media { height: 250px; }
.mv-short .mv-fl__side { top: 380px; }
.mv-short .mv-fl__ring { width: 148px; height: 148px; }
.mv-short .mv-fl__t { font-size: 44px; }
.mv-short .mv-fl__name { margin-top: 10px; font-size: 20px; }
.mv-short .mv-fl__next { top: 602px; }
.mv-short .mv-fl__tp { top: 668px; height: 60px; }
.mv-short .mv-fl__pp { width: 58px; height: 58px; border-radius: 29px; }

/* ------------------------------------------------------------------ path */
.mv-pa { position: absolute; inset: 0; }
.mv-pa__title { position: absolute; left: 16px; right: 16px; top: 60px; font: 900 34px/38px var(--mv-disp); font-stretch: 112%; letter-spacing: -.01em; white-space: nowrap; }
.mv-pa__tabs { position: absolute; left: 16px; right: 16px; top: 108px; height: 40px; display: flex; padding: 3px; border-radius: 14px; background: var(--mv-s1); }
.mv-pa__ind { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc((100% - 6px) / 4); border-radius: 11px; background: var(--mv-s3); transition: transform .32s var(--mv-ios); }
.mv-story .mv-pa__ind { transition: none; }
.mv-stab { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; font: 600 13px/1 var(--mv-sans); color: var(--mv-muted); white-space: nowrap; }
.mv-stab.is-on { color: var(--mv-text); }
.mv-pin { position: absolute; left: 16px; right: 16px; top: 158px; height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 12px 0 16px; border-radius: 18px; background: var(--mv-s1); box-shadow: inset 0 0 0 var(--mv-hl) var(--mv-hair); z-index: 2; }
.mv-pin__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.mv-pin__n { font: 650 16px/1 var(--mv-sans); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-pin__bar { position: relative; height: 4px; border-radius: 2px; background: rgba(155, 163, 167, .2); overflow: hidden; }
.mv-pin__bar i { position: absolute; inset: 0; background: var(--mv-lemon); transform-origin: 0 50%; transform: scaleX(.8); }
.mv-pa__vp { position: absolute; left: 0; right: 0; top: 228px; bottom: 83px; overflow: hidden; overflow: clip; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 10px), transparent); mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 10px), transparent); }
.mv-tree { position: absolute; inset: 0; overflow: hidden; overflow: clip; opacity: 0; transform: translate3d(200%, 0, 0); }   /* off trees wait outside the viewport (showTree) */
.mv-live .mv-tree.is-front { overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.mv-live .mv-tree::-webkit-scrollbar { display: none; }
.mv-tree__in { position: relative; height: 790px; }
.mv-tree__lines { position: absolute; left: 0; top: 0; }
.mv-ln { fill: none; stroke-width: 4; stroke-linecap: round; }
.mv-ln--steel { stroke: rgba(155, 163, 167, .45); stroke-dasharray: 2 9; stroke-width: 3; }
.mv-ln--lemon { stroke: var(--mv-lemon); stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.mv-node { position: absolute; width: var(--sz); height: var(--sz); border-radius: 50%; }
.mv-node__disc { position: absolute; inset: 0; border-radius: 50%; background: var(--mv-node); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--mv-steel); }
.mv-node__img { position: absolute; inset: 5px; border-radius: 50%; overflow: hidden; opacity: 0; }
.mv-node__img img { width: 100%; height: 100%; object-fit: cover; }
.mv-node__g, .mv-node__num { position: relative; display: flex; align-items: center; justify-content: center; }
.mv-node__num { font: 800 20px/1 var(--mv-sans); color: var(--mv-steel); font-variant-numeric: tabular-nums; }
.mv-node__ring { position: absolute; left: -4px; top: -4px; width: calc(var(--sz) + 8px); height: calc(var(--sz) + 8px); }
.mv-node__ring .mv-ring__a { stroke-dashoffset: 1; }
.mv-node__lock { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 12px; background: var(--mv-s3); color: var(--mv-steel); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--mv-ground); }
.mv-lock__sh { transform-box: fill-box; transform-origin: 85% 100%; }
.mv-node__star { position: absolute; right: -4px; top: -4px; width: 22px; height: 22px; border-radius: 11px; background: var(--mv-lemon); color: var(--mv-lemon-ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--mv-ground); }
.mv-node__star svg { width: 12px; height: 12px; }
.mv-node__medal { position: absolute; right: -4px; top: -4px; width: 24px; height: 24px; border-radius: 12px; background: var(--mv-lemon); color: var(--mv-lemon-ink); display: none; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--mv-ground); }
.mv-node__medal svg { width: 15px; height: 15px; }
.mv-node__goal { position: absolute; left: 50%; top: -14px; margin-left: -9px; color: var(--mv-steel); }
.mv-node__goal svg { width: 18px; height: 18px; }
.mv-node__pulse { position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--mv-lemon); opacity: 0; pointer-events: none; }
.mv-node.is-unlocked .mv-node__img, .mv-node.is-mastered .mv-node__img, .mv-node.is-working .mv-node__img { opacity: 1; }
.mv-node.is-unlocked .mv-node__g, .mv-node.is-mastered .mv-node__g, .mv-node.is-unlocked .mv-node__num, .mv-node.is-mastered .mv-node__num, .mv-node.is-working .mv-node__num { opacity: 0; }
.mv-node.is-unlocked .mv-node__lock, .mv-node.is-mastered .mv-node__lock, .mv-node.is-working .mv-node__lock { display: none; }
.mv-node.is-working .mv-node__disc { background: #191C19; }
.mv-node.is-working .mv-node__pulse, .mv-node.is-pulse .mv-node__pulse { animation: mv-pulse 1.6s var(--mv-out) infinite; }
.mv-node.is-available .mv-node__disc { background: #191C19; }
.mv-node.is-available .mv-node__g { color: var(--mv-text); }
.mv-node.is-medal .mv-node__medal { display: flex; }
.mv-node.is-goal .mv-node__disc { background: var(--mv-s3); box-shadow: inset 0 0 0 1.5px rgba(155, 163, 167, .4); }
.mv-node.is-goal .mv-node__lock { display: none; }
.mv-l-path .mv-tree[data-skill="planche"] .mv-node.is-working .mv-node__img { opacity: 0; }
.mv-l-path .mv-tree[data-skill="planche"] .mv-node.is-working .mv-node__g { color: var(--mv-lemon); }
.mv-node__lab { position: absolute; transform: translateY(-50%); display: flex; flex-direction: column; gap: 3px; max-width: 200px; text-wrap: balance; }
.mv-node__lab.is-left { align-items: flex-end; text-align: right; }
.mv-node__lab b { font: 650 14px/1.2 var(--mv-sans); font-weight: 650; text-wrap: balance; }
.mv-node__sub { position: relative; display: block; height: 16px; }
.mv-node__m, .mv-node__av, .mv-node__st1 { position: absolute; left: 0; top: 0; font: 500 13px/16px var(--mv-sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mv-node__m { color: var(--mv-muted); }
.mv-node__av, .mv-node__st1 { color: var(--mv-lemon); opacity: 0; }
.mv-node__lab.is-left .mv-node__m, .mv-node__lab.is-left .mv-node__av, .mv-node__lab.is-left .mv-node__st1 { left: auto; right: 0; }
.mv-next { position: absolute; left: 12px; right: 12px; bottom: 91px; z-index: 4; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 24px; background: var(--mv-s2); box-shadow: 0 -10px 40px rgba(0, 0, 0, .55), inset 0 0 0 var(--mv-hl) rgba(242, 241, 234, .1); visibility: hidden; }
.mv-next__th { width: 56px; height: 70px; border-radius: 12px; overflow: hidden; flex: none; background: var(--mv-s1); }
.mv-next__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mv-next__tx b { font: 700 17px/1.2 var(--mv-sans); letter-spacing: -.01em; }
.mv-next__l { font: 500 15px/1 var(--mv-sans); color: var(--mv-muted); font-variant-numeric: tabular-nums; }
.mv-next__go { flex: none; height: 40px; border-radius: 20px; padding: 0 20px; }
.mv-next__x { flex: none; width: 32px; height: 32px; margin: 0 -6px 0 -6px; border-radius: 16px; color: var(--mv-muted); display: none; align-items: center; justify-content: center; }
.mv-live .mv-next__x { display: flex; }
.mv-next__x svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------------ step (sheet) */
.mv-st { top: 60px; background: var(--mv-s2); }
.mv-short .mv-st { top: 56px; }
.mv-st__sc { top: 20px; bottom: 80px; }
.mv-st__in > .is-cut { visibility: hidden; }
.mv-live .mv-st__sc { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 20px), transparent); }
.mv-st__in { padding: 8px 16px 24px; display: flex; flex-direction: column; }
.mv-st__media { position: relative; display: block; height: 300px; border-radius: 20px; overflow: hidden; flex: none; background: var(--mv-s1); }
.mv-st__vs, .mv-st__still { position: absolute; inset: 0; }
.mv-st__still img { width: 100%; height: 100%; object-fit: cover; }
.mv-st__glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--mv-steel); font: 800 48px/1 var(--mv-sans); background: var(--mv-node); }
.mv-st__t { margin-top: 18px; font: 700 26px/30px var(--mv-sans); letter-spacing: -.015em; }
.mv-st__line { margin-top: 8px; font: 500 16px/20px var(--mv-sans); color: var(--mv-muted); font-variant-numeric: tabular-nums; }
.mv-st__line b { color: var(--mv-text); font-weight: 650; }
.mv-short .mv-st__media { height: 260px; }
.mv-st__foot { position: absolute; left: 16px; right: 16px; bottom: 16px; }
.mv-st__go.is-hi { box-shadow: 0 0 0 4px rgba(248, 236, 0, .22); }
.mv-st__go[disabled] { background: var(--mv-s3); color: var(--mv-muted); }
.mv-logger { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; padding: 0 6px 0 4px; border-radius: 26px; background: var(--mv-s1); }
.mv-step--lg { height: 44px; border-radius: 22px; }
.mv-step--lg .mv-step__b { width: 48px; height: 44px; }
.mv-step--lg .mv-step__v { min-width: 40px; font-size: 20px; height: 24px; }
.mv-step--lg .mv-step__v i { line-height: 24px; }
.mv-logger__ck { width: 44px; height: 44px; border-radius: 22px; color: var(--mv-lemon-ink); background: var(--mv-lemon); box-shadow: none; }

/* ------------------------------------------------------------------ progress */
.mv-pg__in { padding: 62px 16px 120px; display: flex; flex-direction: column; gap: 12px; }
.mv-pg__in .mv-lt { margin-bottom: 6px; }
.mv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mv-stat { padding: 16px 14px 14px; border-radius: 20px; background: var(--mv-s1); display: flex; flex-direction: column; gap: 8px; }
.mv-stat__v { font: 800 34px/1 var(--mv-sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.mv-stat__v small { font-size: 17px; font-weight: 700; letter-spacing: 0; }
.mv-stat > span { font: 500 13px/1.2 var(--mv-sans); color: var(--mv-muted); }
.mv-stat__v.is-new { color: var(--mv-lemon); }
.mv-chart { padding: 16px 16px 18px; border-radius: 22px; }
.mv-chart__k { display: block; font: 500 14px/18px var(--mv-sans); color: var(--mv-muted); }
.mv-chart__v { display: block; margin-top: 4px; font: 800 30px/1 var(--mv-sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mv-chart__plot { position: relative; margin-top: 18px; height: 140px; }
.mv-chart__svg { position: absolute; inset: 0; width: 100%; height: 140px; }
.mv-chart__g { stroke: rgba(155, 163, 167, .12); stroke-width: 1; }
.mv-chart__unl { stroke: var(--mv-steel); stroke-width: 1.4; stroke-dasharray: 4 5; }
.mv-chart__ln { fill: none; stroke: var(--mv-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.mv-chart__dot { fill: var(--mv-s1); stroke: var(--mv-text); stroke-width: 2; opacity: 0; }
.mv-chart__up { fill: none; stroke: var(--mv-lemon); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.mv-chart__ul { position: absolute; left: 0; font: 500 12px/16px var(--mv-sans); color: var(--mv-muted); }
.mv-chart__pt { position: absolute; width: 0; height: 0; opacity: 0; }
.mv-chart__pt i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 6px; background: var(--mv-lemon); box-shadow: 0 0 0 3px var(--mv-s1); }
.mv-chart__pt b { position: absolute; right: 10px; top: -26px; white-space: nowrap; font: 700 13px/1 var(--mv-sans); color: var(--mv-lemon); }
.mv-tier { position: relative; overflow: hidden; display: block; margin-top: 4px; padding: 12px 14px; border-radius: 20px; background: var(--mv-s1); box-shadow: inset 0 0 0 1px rgba(180, 138, 96, .55); }
.mv-tier__glint { position: absolute; left: 0; top: 0; bottom: 0; width: 90px; background: linear-gradient(90deg, rgba(180, 138, 96, 0), rgba(180, 138, 96, .28), rgba(180, 138, 96, 0)); opacity: 0; pointer-events: none; }
.mv-tier__row { display: flex; align-items: center; gap: 12px; }
.mv-tier__tx { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.mv-tier__tx b { font: 650 16px/1 var(--mv-sans); font-weight: 650; }
.mv-tier__tx span { font: 500 13px/1 var(--mv-sans); color: var(--mv-timber); }
.mv-tier svg:last-child { color: var(--mv-muted); }

/* ------------------------------------------------------------------ coach (sheet) */
.mv-co { top: 173px; background: var(--mv-s2); }
.mv-short .mv-co { top: 151px; }
.mv-co__in { padding: 24px 16px 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mv-co.is-peek .mv-co__in > :nth-child(n+3) { visibility: hidden; }
.mv-co__por { padding: 3px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--mv-timber); }
.mv-co__t { margin-top: 12px; font: 700 24px/1.1 var(--mv-sans); letter-spacing: -.015em; }
.mv-co__sub { margin-top: 8px; max-width: 300px; font: 400 15px/1.35 var(--mv-sans); color: var(--mv-muted); }
.mv-co__q { margin-top: 16px; font: 650 14px/1 var(--mv-sans); font-weight: 650; align-self: flex-start; }
.mv-cchips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; align-self: stretch; }
.mv-cchip { height: 32px; padding: 0 13px; border-radius: 16px; background: var(--mv-s1); font: 600 14px/1 var(--mv-sans); box-shadow: inset 0 0 0 var(--mv-hl) var(--mv-hair); }
.mv-cchip.is-on { background: var(--mv-text); color: var(--mv-lemon-ink); }
.mv-co__row { align-self: stretch; margin-top: 10px; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 14px; border-radius: 14px; background: var(--mv-s1); font: 500 15px/1 var(--mv-sans); color: var(--mv-muted); }
.mv-co__row b { color: var(--mv-text); font-weight: 600; padding-right: 8px; }
.mv-co__row + .mv-co__row { margin-top: 6px; }
.mv-step--sm { height: 32px; background: var(--mv-s3); }
.mv-step--sm .mv-step__b { width: 34px; height: 32px; }
.mv-co__days { padding: 0 6px; font: 650 14px/1 var(--mv-sans); font-weight: 650; color: var(--mv-text); font-variant-numeric: tabular-nums; }
.mv-co__go { align-self: stretch; margin-top: 14px; }
.mv-co__go.is-sent { display: none; }
.mv-co__done { display: none; align-self: stretch; margin-top: 14px; height: 52px; border-radius: 26px; background: var(--mv-s1); align-items: center; justify-content: center; gap: 8px; color: var(--mv-text); font: 650 16px/1 var(--mv-sans); font-weight: 650; }
.mv-co__done.is-on { display: flex; }
.mv-co__done svg { color: var(--mv-text); }
.mv-co__foot { margin-top: 12px; font: 500 13px/1 var(--mv-sans); color: var(--mv-muted); }

/* ------------------------------------------------------------------ hold (chapter 6) */
.mv-l-hold { overflow: clip; }
.mv-ho { position: absolute; inset: 0; overflow: clip; }
.mv-ho__top { position: absolute; left: 6px; right: 16px; top: 54px; height: 44px; display: flex; align-items: center; gap: 4px; }
.mv-ho__top b { flex: 1; text-align: center; font: 600 17px/1 var(--mv-sans); }
.mv-ho__sp { width: 44px; flex: none; }
.mv-mp { position: absolute; left: 0; right: 0; top: 104px; height: 66px; }
.mv-mp__n { position: absolute; top: 24px; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.mv-mp__n3 { left: 116px; background: var(--mv-lemon); color: var(--mv-lemon-ink); }
.mv-mp__n3 svg { width: 16px; height: 16px; }
.mv-mp__n4 { left: 196.5px; width: 48px; height: 48px; margin: -24px 0 0 -24px; background: #191C19; overflow: visible; }
.mv-mp__r4 { position: absolute; left: -4px; top: -4px; width: 56px; height: 56px; }
.mv-mp__fill { position: absolute; inset: 0; border-radius: 50%; background: var(--mv-lemon); clip-path: inset(100% 0 0 0); }
.mv-mp__g { position: relative; color: var(--mv-lemon); display: flex; transition: color .16s linear; }
.mv-mp__g.is-ink { color: var(--mv-lemon-ink); }
.mv-mp__pulse { position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--mv-lemon); opacity: 0; animation: mv-pulse 1.6s var(--mv-out) infinite; }
.mv-mp.is-ul .mv-mp__pulse { animation: none; opacity: 0; }
.mv-mp__n5 { left: 277px; background: var(--mv-node); color: var(--mv-steel); }
.mv-mp__l { position: absolute; top: 23px; height: 2px; }
.mv-mp__l1 { left: 136px; width: 36px; background: var(--mv-lemon); border-radius: 1px; }
.mv-mp__l2 { left: 222px; width: 34px; background: repeating-linear-gradient(90deg, rgba(155, 163, 167, .55) 0 3px, transparent 3px 8px); }
.mv-ho__grp { position: absolute; left: 46.5px; top: 210px; width: 300px; height: 300px; transform-origin: 150px 150px; }
.mv-short .mv-ho__grp { top: 190px; }
.mv-ho__ringbox { position: absolute; inset: 0; }
.mv-ho__svg { position: absolute; inset: 0; }
.mv-ho__glow { fill: none; stroke: var(--mv-lemon); stroke-opacity: .16; opacity: 0; }
.mv-ho__tr { fill: none; stroke: var(--mv-steel); stroke-opacity: .14; }
.mv-ho__arc { fill: none; stroke: var(--mv-lemon); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.mv-ho__tick line { stroke: var(--mv-steel); stroke-width: 2.4; stroke-linecap: round; }
.mv-ho__tick.is-flash line { stroke: var(--mv-lemon); }
.mv-ho__swell { fill: none; stroke: var(--mv-lemon); opacity: 0; transform-origin: 150px 150px; transform-box: view-box; }
.mv-ho__flash { fill: var(--mv-lemon-hi); opacity: 0; }
.mv-ho__win { position: absolute; left: 30px; top: 30px; width: 240px; height: 240px; border-radius: 50%; overflow: hidden; background: var(--mv-s2); -webkit-mask-image: radial-gradient(circle, #000 69.5%, transparent 70.5%); }
.mv-ho__vs { position: absolute; inset: 0; background: transparent; }
.mv-ho__vs .mv-vs__p, .mv-ho__grey img { transform-origin: 50% 50%; }
.mv-ho__grey { position: absolute; inset: 0; }
.mv-ho__grey img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.mv-ho__scrim { position: absolute; inset: 0; background: rgba(11, 12, 11, .6); }
.mv-ho__num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mv-ho__val { display: flex; align-items: baseline; gap: 2px; margin-top: 8px; color: var(--mv-text); transition: color .12s linear; }
.mv-ho__val.is-lemon { color: var(--mv-lemon); }
.mv-ho__v { font: 800 72px/1 var(--mv-sans); font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.mv-ho__val i { font: 700 24px/1 var(--mv-sans); letter-spacing: 0; }
.mv-ho__of { margin-top: 8px; padding: 4px 9px; border-radius: 11px; background: rgba(11, 12, 11, .62); font-size: 13px; line-height: 14px; letter-spacing: .06em; color: var(--mv-text); }
.mv-ho__nb { position: absolute; left: 0; right: 0; bottom: 42px; text-align: center; font: 700 13px/1 var(--mv-sans); color: var(--mv-lemon); opacity: 0; }
.mv-ho__cnt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; opacity: 0; }
.mv-ho__cnt .mv-mono { color: var(--mv-text); font-size: 12px; letter-spacing: .14em; }
.mv-ho__cn { font: 800 72px/1 var(--mv-sans); font-variant-numeric: tabular-nums; color: var(--mv-lemon); }
.mv-ho__pulse { position: absolute; left: 150px; top: 150px; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; background: radial-gradient(circle, rgba(248, 236, 0, .9), rgba(248, 236, 0, 0) 68%); opacity: 0; transform: scale(0); pointer-events: none; }
.mv-ho__low { position: absolute; left: 0; right: 0; top: 516px; bottom: 0; }
.mv-short .mv-ho__low { top: 494px; }
.mv-ho__sets { display: flex; justify-content: center; gap: 8px; height: 30px; }
.mv-hs { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 7px; border-radius: 15px; background: var(--mv-s1); font: 600 13px/1 var(--mv-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv-hs__ck { width: 18px; height: 18px; border-radius: 9px; background: var(--mv-lemon); color: var(--mv-lemon-ink); display: flex; align-items: center; justify-content: center; }
.mv-hs__ck svg { width: 11px; height: 11px; }
.mv-hs__ring { width: 18px; height: 18px; border-radius: 9px; box-shadow: inset 0 0 0 1.6px var(--mv-lemon); }
.mv-hs.is-cur { box-shadow: inset 0 0 0 1px rgba(248, 236, 0, .4); }
.mv-hs.is-cur.is-done { box-shadow: none; }
.mv-hs.is-cur.is-done .mv-hs__ring { background: var(--mv-lemon); }
.mv-ho__msg { position: absolute; left: 16px; right: 16px; top: 42px; height: 40px; display: flex; align-items: center; justify-content: center; text-align: center; font: 600 15px/1.25 var(--mv-sans); color: var(--mv-text); opacity: 0; transition: opacity .2s linear; }
.mv-ho__msg.is-on { opacity: 1; }
.mv-hpill { position: absolute; left: 16px; right: 16px; top: 124px; height: 56px; border-radius: 28px; background: var(--mv-lemon); color: var(--mv-lemon-ink); font: 700 18px/1 var(--mv-sans); letter-spacing: -.005em; display: flex; align-items: center; justify-content: center;
  touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; transition: background-color .16s linear, box-shadow .16s linear, transform .16s var(--mv-out); }
.mv-hpill::before { content: ""; position: absolute; left: -8px; right: -8px; top: -4px; bottom: -4px; border-radius: 32px; }
.mv-hpill.is-run { background: transparent; color: var(--mv-text); box-shadow: inset 0 0 0 1.5px var(--mv-steel); }
.mv-hpill.is-done { background: var(--mv-lemon); color: var(--mv-lemon-ink); box-shadow: none; }
.mv-hpill.is-hint::after { content: ""; position: absolute; inset: -2px; border-radius: 30px; box-shadow: 0 0 0 2px var(--mv-lemon); opacity: 0; animation: mv-hint 1.8s var(--mv-out) infinite; }
.mv-hpill:active:not(.is-run):not(.is-done) { transform: scale(.98); }
.mv-short .mv-ho__msg { top: 36px; }
.mv-short .mv-hpill { top: 104px; }
/* the unlocked overlay (9.3.12) */
.mv-ul { position: absolute; left: 0; right: 0; top: 512px; pointer-events: none; display: flex; flex-direction: column; align-items: center; }
.mv-short .mv-ul { top: 490px; }
.mv-ul__ov { color: var(--mv-lemon); font-size: 12px; opacity: 0; }
.mv-stamp { position: relative; display: inline-block; margin-top: 6px; padding: 7px; color: var(--mv-lemon); border: 4.6px solid currentColor; border-radius: 6px; transform: rotate(-2deg); opacity: 0;
  -webkit-mask-image: var(--mv-rubber); mask-image: var(--mv-rubber); -webkit-mask-size: 160px 160px; mask-size: 160px 160px; }
.mv-stamp__in { display: flex; flex-direction: column; align-items: center; padding: 8px 14px 6px; border: 1.6px solid currentColor; border-radius: 3px; }
.mv-stamp__in b { font: 900 38px/.92 var(--mv-disp); font-stretch: 112%; letter-spacing: -.01em; white-space: nowrap; }
.mv-ul__data { margin-top: 12px; height: 16px; line-height: 16px; max-width: calc(100% - 32px); font-size: 13px; color: var(--mv-text); letter-spacing: .08em; white-space: pre; text-transform: none; }   /* its string is set in caps, the unit stays "s" */
.mv-ul__chip { margin-top: 10px; max-width: calc(100% - 32px); display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 6px; border-radius: 15px; background: var(--mv-lemon-soft); color: var(--mv-text); font: 600 13px/1 var(--mv-sans); opacity: 0; white-space: nowrap; }
.mv-ul__medal { width: 22px; height: 22px; border-radius: 11px; background: var(--mv-lemon); color: var(--mv-lemon-ink); display: flex; align-items: center; justify-content: center; }
.mv-ul__medal svg { width: 14px; height: 14px; }
.mv-ul__small { margin-top: 10px; font: 500 13px/1 var(--mv-sans); color: var(--mv-muted); opacity: 0; }
.mv-short .mv-stamp__in b { font-size: 36px; }
.mv-short .mv-ul__data { margin-top: 10px; }
.mv-short .mv-ul__chip { margin-top: 8px; }
.mv-short .mv-ul__small { margin-top: 8px; }

/* ------------------------------------------------------------------ ambient loops (off under any reduced motion) */
@keyframes mv-pulse { 0% { opacity: .9; transform: scale(1); } 70% { opacity: 0; transform: scale(1.22); } 100% { opacity: 0; transform: scale(1.22); } }
@keyframes mv-hint { 0% { opacity: .85; transform: scale(1); } 80% { opacity: 0; transform: scale(1.08, 1.3); } 100% { opacity: 0; transform: scale(1.08, 1.3); } }
.mv-rm .mv-node__pulse, .mv-osrm .mv-node__pulse, .mv-rm .mv-mp__pulse, .mv-osrm .mv-mp__pulse, .mv-rm .mv-hpill::after, .mv-osrm .mv-hpill::after { animation: none !important; opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .mv-root .mv-node__pulse, .mv-root .mv-mp__pulse, .mv-root .mv-hpill::after { animation: none !important; opacity: 0 !important; }
}
.mv-rm .mv-toast, .mv-rm .mv-pill, .mv-rm .mv-lc__ck, .mv-rm .mv-tile__ck, .mv-rm .mv-dur { transition-duration: .15s; }
.mv-mini-on .mv-next { bottom: 135px; }
.mv-mini-on .mv-pa__vp { bottom: 127px; }
.mv-grow { position: absolute; left: 0; top: 0; width: 240px; height: 240px; z-index: 8; overflow: hidden; transform-origin: 50% 50%; pointer-events: none; }
.mv-grow img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: grayscale(1) brightness(.62); }

/* the pulses run only where they can be seen: a paused host or an app out of view (.mv-still on the root), or a
   layer that is off, holds them still, so no style work ticks every frame behind a hidden phone or screen */
.mv-still .mv-node__pulse, .mv-still .mv-mp__pulse, .mv-still .mv-hpill.is-hint::after,
.mv-layer:not(.is-on):not(.is-leaving) .mv-node__pulse, .mv-layer:not(.is-on):not(.is-leaving) .mv-mp__pulse,
.mv-layer:not(.is-on):not(.is-leaving) .mv-hpill.is-hint::after { animation-play-state: paused !important; }

/* the numbers that tick in a scrubbed frame re-lay out their own box, not their screen */
.mv-ho__num, .mv-fl__t, .mv-hero__ring b { contain: strict; }
.mv-ho__sets { contain: strict; }
.mv-ex__clock { display: block; width: 64px; height: 17px; text-align: center; contain: strict; }
.mv-rest__t { width: 46px; height: 16px; contain: strict; }
.mv-stat__v { height: 34px; contain: strict; }