/* Spotter: Color field look (ported from mock/src/app.css and docs/design-round.html, look "field") */
@font-face{font-family:"Archivo";src:url("/fonts/archivo-latin-standard-normal.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:block}

:root{
  --c-set:oklch(0.54 0.2 36);--c-rest:oklch(0.46 0.16 258);--c-log:oklch(0.5 0.2 352);--c-done:oklch(0.88 0.16 95);
  --c-stretch:oklch(0.5 0.1 190);--c-ink:var(--g0);--c-ink2:var(--g1);--c-ink3:var(--g2);
  --white:oklch(0.99 0 0);--mute:oklch(0.97 0.012 60);--mute-ink:var(--gm);
  --surface:oklch(1 0 0 / .16);--surface-ink:var(--gs);--line:oklch(1 0 0 / .32);--line-ink:var(--gl);
  --done-ink:oklch(0.2 0.03 70);
  /* heat map: all positive, distinct from workout-mode state colours */
  --hm-strength:oklch(0.77 0.17 150);--hm-cardio:oklch(0.72 0.13 228);--hm-rest:oklch(0.54 0.16 302);--hm-ink:oklch(0.2 0 0);
  /* level ramp (DESIGN.md) */
  --t0:oklch(0.52 0.02 260);--t1:oklch(0.55 0.06 240);--t2:oklch(0.62 0.11 200);--t3:oklch(0.7 0.14 160);--t4:oklch(0.8 0.16 120);
  --t5:oklch(0.86 0.16 90);--t6:oklch(0.75 0.18 55);--t7:oklch(0.65 0.22 30);--t8:oklch(0.62 0.25 350);
  --toast-bg:oklch(0.2 0 0 / .96);
  --f:"Archivo","Helvetica Neue","Arial Narrow",Helvetica,sans-serif;
  --ease:cubic-bezier(.2,.9,.2,1);--ease-in:cubic-bezier(.4,0,1,1);--dur:240ms;--press:.96;
  --sat:max(env(safe-area-inset-top),16px);--sab:max(env(safe-area-inset-bottom),12px);
  color-scheme:dark;
  /* ground A (default): true black */
  --g0:oklch(0.13 0 0);--g1:oklch(0.2 0 0);--g2:oklch(0.26 0 0);--gm:oklch(0.8 0 0);--gs:oklch(1 0 0 / .08);--gl:oklch(1 0 0 / .12);--gsil:oklch(0.22 0 0);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;overscroll-behavior:none}
body{font-family:var(--f);color:var(--white);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow:hidden;font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
input,textarea,select{-webkit-user-select:text;user-select:text}
button,input,textarea,select{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer;border:0;background:none;padding:0;text-align:inherit}
svg{display:block}
svg:where(:not(.chart):not(.bbrk):not([data-view])){width:20px;height:20px;flex:none}
:focus-visible{outline:3px solid var(--white);outline-offset:3px;border-radius:6px}
[hidden]{display:none !important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- frame: full-screen on a phone; a centred phone-width column on a wide window ---------- */
#stage{position:fixed;inset:0;display:block}
#fit{width:100%;height:100%}
#phone{position:relative;width:100%;height:100%;overflow:hidden;background:var(--c-set);isolation:isolate}
@media (min-width:700px){
  body{background:#060606}
  #phone{max-width:430px;margin:0 auto;box-shadow:0 0 0 1px oklch(1 0 0 / .06),0 30px 80px -20px rgba(0,0,0,.8)}
}
/* inactive views and overlays leave the accessibility tree and the text flow */
#wo .view{visibility:hidden;transition:opacity 140ms ease-in,transform 160ms ease-in,visibility 0s linear 160ms}
#wo .view.on{visibility:visible;transition:opacity 260ms var(--ease) 60ms,transform 320ms var(--ease) 60ms,visibility 0s}
#wo:not(.on){visibility:hidden}
.page:not(.on){visibility:hidden}

/* ---------- type ---------- */
.disp{font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.015em;line-height:.84}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mute{color:var(--mute)}
.num{font-variant-numeric:tabular-nums}

/* ---------- field colour layers + flood ---------- */
.fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fl{position:absolute;inset:0;opacity:0;transition:opacity 420ms ease}
.fl.on{opacity:1}
.fl[data-c="set"]{background:var(--c-set)}.fl[data-c="stretch"]{background:var(--c-stretch)}.fl[data-c="ink"]{background:var(--c-ink)}
.fl[data-c="rest"]{background:var(--c-rest)}.fl[data-c="log"]{background:var(--c-log)}.fl[data-c="done"]{background:var(--c-done)}
.flood{position:absolute;border-radius:50%;will-change:transform}

/* ---------- press squish (every button) ---------- */
.sq,.slab,.chip,.btn-s,.icon,.tab,.txtbtn,.row-btn,.choice,.door,.pcard,.seg button,.cal button,.hm-cell,.mini-btn{transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease),opacity 200ms ease}
.sq:active,.slab:active,.chip:active,.btn-s:active,.icon:active,.tab:active,.txtbtn:active,.row-btn:active,.choice:active,.door:active,.pcard:active,.seg button:active,.cal button:active,.hm-cell:active,.mini-btn:active{transform:scale(var(--press))}

/* ---------- top bar: tabs with a gliding underline ---------- */
.topbar{position:absolute;left:0;right:0;top:0;padding:var(--sat) 8px 0 8px;height:calc(var(--sat) + 52px);display:flex;align-items:center;z-index:20;transition:opacity 200ms ease,transform 260ms var(--ease)}
.topbar.away{opacity:0;transform:translateY(-12px);pointer-events:none}
.tabs{position:relative;display:flex;align-items:center;height:48px}
.tab{height:48px;padding:0 12px;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--white);opacity:.72;display:flex;align-items:center}
.tab[aria-selected="true"]{opacity:1}
.uline{position:absolute;left:0;bottom:4px;height:4px;width:40px;border-radius:2px;background:var(--white);transform-origin:0 0;transition:transform 380ms var(--ease),width 380ms var(--ease)}
.topbar .gear{margin-left:auto}
.icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--white)}
.icon svg{width:24px;height:24px}
.icon.fill{background:var(--surface)}

/* ---------- pages ---------- */
.pages{position:absolute;inset:0;z-index:1}
.page{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 160ms ease-in;--slab-ink:var(--c-set)}
.page.on{opacity:1;pointer-events:auto;transition:opacity 280ms var(--ease) 80ms}
.page[data-tab="stretch"]{--slab-ink:var(--c-stretch)}
.page[data-tab="stats"]{--slab-ink:var(--c-ink)}
.scroll{position:absolute;left:0;right:0;top:calc(var(--sat) + 52px);bottom:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px);mask-image:linear-gradient(to bottom,transparent 0,#000 14px);scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.pad{padding:8px 22px 0}
.dock{position:absolute;left:0;right:0;bottom:0;z-index:5;pointer-events:none}
.dock>*{pointer-events:auto}
.dock .fade{height:36px;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--dock-bg,var(--c-set)))}
.dock .sec{display:flex;gap:8px;padding:0 22px 14px;background:var(--dock-bg,var(--c-set))}
.page[data-tab="stretch"] .dock{--dock-bg:var(--c-stretch)}

/* giant page title */
.ptitle{font-size:84px;margin:6px 0 0;white-space:nowrap}
.hero-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}

/* ---------- buttons ---------- */
.slab{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;width:100%;min-height:150px;
  padding:22px 24px calc(var(--sab) + 26px) 28px;border-radius:34px 34px 0 0;background:var(--white);color:var(--slab-ink);
  font-weight:800;font-size:44px;font-stretch:72%;line-height:.9;letter-spacing:-.01em;text-transform:uppercase;text-align:left;
  box-shadow:0 -10px 30px oklch(0 0 0 / .14),0 -1px 0 oklch(1 0 0 / .4) inset}
.slab small{display:block;font-stretch:100%;text-transform:none;font-size:14px;font-weight:600;letter-spacing:0;margin-top:8px;line-height:1.25}
.slab .gi{width:60px;height:60px;border-radius:50%;background:var(--slab-ink);color:var(--white);display:grid;place-items:center;flex:none}
.slab .gi svg{width:28px;height:28px}
.slab[aria-disabled="true"]{opacity:.55}
.slab[aria-disabled="true"]:active{transform:none}
.btn-s{flex:1;min-height:48px;padding:0 14px;border-radius:16px;background:var(--surface);color:var(--white);font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn-s svg{width:18px;height:18px}
.txtbtn{min-height:44px;padding:0 4px;font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:6px;color:var(--white);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:oklch(1 0 0 / .45)}
.txtbtn svg{width:16px;height:16px}
.chip svg{width:18px;height:18px}
.chip{min-height:44px;min-width:44px;padding:0 16px;border-radius:14px;background:var(--surface);color:var(--white);font-weight:800;font-size:18px;font-stretch:72%;letter-spacing:.01em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.chip[aria-pressed="true"],.chip.on{background:var(--white);color:var(--chip-on,var(--c-set))}
.chips{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Strength home ---------- */
.upnext-row{display:flex;align-items:center;gap:8px;margin-top:16px}
.upnext-row .eyebrow b{font-weight:800}
.upnext-row .txtbtn{margin-left:auto;font-size:14px}
.daychips{margin-top:8px}
.daychips .chip{font-size:20px;min-width:72px}
.exlist{list-style:none;margin:24px 0 0;padding:0}
.exhead{display:flex;align-items:center;justify-content:space-between;margin-top:24px}
.exrow{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0 9px 0;border-top:1px solid oklch(1 0 0 / .22)}
.exrow:first-child{border-top:0}
.exrow.g{padding-left:18px}
.exrow .en{font-weight:800;font-stretch:72%;text-transform:uppercase;font-size:27px;line-height:.92;letter-spacing:-.005em;min-width:0}
.exrow .en small{display:block;font-stretch:100%;text-transform:none;font-weight:600;font-size:13px;letter-spacing:0;margin-top:4px;color:var(--mute)}
.exrow .ew{text-align:right;flex:none}
.exrow .ew b{font-weight:800;font-stretch:72%;font-size:40px;line-height:.86;letter-spacing:-.01em;display:block}
.exrow .ew span{font-size:12px;font-weight:700;color:var(--mute)}
.exrow .ew .upby{display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;background:var(--white);color:var(--c-set);border-radius:8px;padding:2px 6px;margin-right:6px;vertical-align:3px}
.exrow .ew .upby svg{width:11px;height:11px}
.brk{position:absolute;left:2px;width:10px;border:2px solid var(--white);border-right:0;border-radius:6px 0 0 6px;pointer-events:none}
.brk-label{position:absolute;left:-4px;font-size:10px;font-weight:800;letter-spacing:.1em;writing-mode:vertical-rl;transform:rotate(180deg)}
.optional-tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.listfoot{display:flex;gap:16px;margin:16px 0 0}

/* ---------- Stretch home ---------- */
.bigstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.bigstats div{border-top:3px solid var(--white);padding-top:8px}
.bigstats b{display:block;font-weight:800;font-stretch:72%;font-size:52px;line-height:.86;letter-spacing:-.01em}
.bigstats span{font-size:13px;font-weight:700}
.strlist{list-style:none;margin:24px 0 0;padding:0;counter-reset:s}
.strlist li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid oklch(1 0 0 / .22)}
.strlist li:first-child{border-top:0}
.strlist .sn{font-weight:800;font-stretch:72%;text-transform:uppercase;font-size:25px;line-height:.92}
.strlist .st{font-size:14px;font-weight:700;white-space:nowrap}

/* ---------- Stats ---------- */
.page[data-tab="stats"] .pad{padding-bottom:180px}
.st-sec{margin-top:32px}
.st-h{position:sticky;top:0;z-index:3;background:var(--c-ink);padding:10px 0 8px;margin:0 -22px;padding-left:22px;padding-right:22px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.st-h h2{margin:0;font-size:46px}
.st-h .eyebrow{color:var(--mute-ink)}
.lede{font-size:15px;line-height:1.4;color:var(--mute-ink);margin:8px 0 0;max-width:34em}
.streakline{display:flex;align-items:baseline;gap:12px;margin-top:8px}
.streakline b{font-weight:800;font-stretch:72%;font-size:72px;line-height:.84}
.streakline span{font-size:16px;font-weight:700;line-height:1.25}
.streakline small{display:block;color:var(--mute-ink);font-weight:600;font-size:14px}

.hm-wrap{margin:16px 0 0;position:relative}
.hm{display:grid;gap:4px}
.hm-row{display:grid;grid-template-columns:34px repeat(7,minmax(0,1fr)) 12px;gap:4px;align-items:center}
.hm-row.ms{border-top:1px solid var(--line-ink);padding-top:7px;margin-top:3px}
.hm-head{margin-bottom:2px}
.hm .dl{font-size:11px;font-weight:700;color:var(--mute-ink);text-align:center}
.hm .mh{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mute-ink);align-self:start;padding-top:3px}
.hm-cell{position:relative;height:40px;min-width:0;border-radius:9px;display:grid;place-items:end center;padding-bottom:6px;font-size:11px;font-weight:800;font-stretch:72%;letter-spacing:.02em;color:var(--hm-ink);overflow:hidden}
.hm-cell .dn{position:absolute;top:3px;left:5px;font-style:normal;font-size:9px;font-weight:700;font-stretch:100%;opacity:.75}
.hm-cell[data-kind="strength"]{background:var(--hm-strength)}
.hm-cell[data-kind="cardio"]{background:var(--hm-cardio)}
.hm-cell[data-kind="rest"]{background:var(--hm-rest);color:var(--white)}
.hm-cell[data-kind="both"]{background:linear-gradient(135deg,var(--hm-strength) 0 50%,var(--hm-cardio) 50% 100%)}
.hm-cell[data-kind="future"]{background:transparent;box-shadow:inset 0 0 0 1.5px oklch(1 0 0 / .3);color:var(--white)}
.hm-cell.today{box-shadow:0 0 0 2px var(--c-ink),0 0 0 4px var(--white)}
.hm-cell span{position:relative;z-index:1}
.hm-cell::after{content:"";position:absolute;inset:-2px}
.hm .wk{width:8px;height:24px;border-radius:4px;justify-self:end;background:var(--white);opacity:.9}
.hm .wk.miss{background:transparent;box-shadow:inset 0 0 0 1.5px oklch(1 0 0 / .4);opacity:1}
.hm .wk.cur{background:linear-gradient(to top,var(--white) 0 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px oklch(1 0 0 / .6);opacity:1}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font-size:13px;font-weight:700}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px}
.pop{position:absolute;z-index:6;width:220px;padding:14px 16px;border-radius:18px;background:var(--white);color:var(--c-ink);box-shadow:0 18px 40px oklch(0 0 0 / .4);transform-origin:var(--ox,50%) var(--oy,0%);animation:pop-in 220ms var(--ease) both}
.pop.out{animation:pop-out 140ms var(--ease-in) both}
.pop b{display:block;font-weight:800;font-stretch:72%;font-size:28px;line-height:.9;text-transform:uppercase}
.pop p{margin:6px 0 0;font-size:14px;line-height:1.35;font-weight:600}
.pop .eyebrow{color:oklch(0.42 0 0)}
@keyframes pop-in{from{opacity:0;transform:scale(.92)}}
@keyframes pop-out{to{opacity:0;transform:scale(.96)}}

.prof-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end;margin-top:16px}
.prof-top .lvl b{display:block;font-weight:800;font-stretch:72%;font-size:44px;line-height:.86;text-transform:uppercase}
.sym{text-align:right}
.sym b{font-weight:800;font-stretch:72%;font-size:96px;line-height:.8;letter-spacing:-.01em}
.sym b small{font-size:28px}
.weak{margin-top:16px;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px;background:var(--surface-ink);font-size:15px;line-height:1.35}
.weak svg{width:22px;height:22px;flex:none}
.mmap{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.mmap figure{margin:0;text-align:center}
.mmap figcaption{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-ink);margin-top:4px}
.mmap svg{width:100%;height:auto;overflow:visible}
.sil{fill:var(--gsil)}
.mu{cursor:pointer;outline:none}
.mu path{stroke:var(--c-ink);stroke-width:1.5;stroke-linejoin:round;transition:fill 300ms ease,transform 200ms var(--ease);fill:var(--tc)}
.mu[data-tier="none"] path{fill:transparent;stroke:oklch(1 0 0 / .28);stroke-width:1.1}
.mu[data-tier="Subpar"]{--tc:var(--t0)}.mu[data-tier="Untrained"]{--tc:var(--t1)}.mu[data-tier="Novice"]{--tc:var(--t2)}.mu[data-tier="Intermediate"]{--tc:var(--t3)}
.mu[data-tier="Proficient"]{--tc:var(--t4)}.mu[data-tier="Advanced"]{--tc:var(--t5)}.mu[data-tier="Exceptional"]{--tc:var(--t6)}.mu[data-tier="Elite"]{--tc:var(--t7)}.mu[data-tier="World class"]{--tc:var(--t8)}
.mu:hover path,.mu:focus-visible path{filter:brightness(1.12)}
.mu.hit path{stroke:var(--white);stroke-width:2.2}
.mmap .bl{fill:none;stroke:var(--c-ink);stroke-opacity:.5;stroke-width:1.1;stroke-linecap:round;pointer-events:none}
.mmap.drawing .mu{opacity:0}
.mmap.drawn .mu{animation:mu-in 420ms var(--ease) both;animation-delay:calc(var(--k) * 45ms + var(--d,0ms))}
.mmap svg[data-view="back"] .mu{--d:120ms}
@keyframes mu-in{from{opacity:0}}
.tlegend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;margin-top:16px;font-size:13px;font-weight:700}
.tlegend span{display:flex;align-items:center;gap:6px;white-space:nowrap}
.tlegend i{width:14px;height:14px;border-radius:4px;flex:none}
.tlegend i.none{box-shadow:inset 0 0 0 1.5px oklch(1 0 0 / .35)}
.btn-wide{width:100%;margin-top:16px;justify-content:space-between;padding:0 18px;min-height:56px;font-size:16px;background:var(--surface-ink)}

.lcards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:16px -22px 0;padding:0 22px 4px;scrollbar-width:none;overscroll-behavior-x:contain}
.lcards::-webkit-scrollbar{display:none}
.lcard{flex:0 0 300px;scroll-snap-align:start;scroll-margin-left:22px;border-radius:28px;padding:18px 18px 16px;background:var(--c-ink2);box-shadow:inset 0 0 0 1px var(--line-ink)}
.lcard:first-child{background:var(--c-set)}
.lcard h3{margin:0;font-size:32px}
.lcard .lv{display:flex;gap:8px;align-items:center;margin-top:6px;font-size:13px;font-weight:700}
.lcard .lv i{width:12px;height:12px;border-radius:3px}
.lcard .lv em{font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-variant:small-caps;opacity:.85}
.lcard .big{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.lcard .big b{font-weight:800;font-stretch:72%;font-size:64px;line-height:.84}
.lcard .big span{font-size:13px;font-weight:700}
.lcard .from{font-size:13px;font-weight:600;margin-top:6px;opacity:.92}
.lcard .facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;font-size:13px;line-height:1.3}
.lcard .facts b{display:block;font-size:16px;font-weight:800}
.chart{width:100%;height:auto;margin-top:8px;overflow:visible}
.chart .grid{stroke:oklch(1 0 0 / .14);stroke-width:1}
.chart .ln{fill:none;stroke:var(--white);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chart .ar{fill:oklch(1 0 0 / .1)}
.chart .dot{fill:var(--white)}
.chart text{fill:var(--mute-ink);font-size:10px;font-weight:700;font-family:var(--f)}
.chart.draw .ln{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.chart.drawn .ln{transition:stroke-dashoffset 1100ms var(--ease);stroke-dashoffset:0}
.chart.draw .ar,.chart.draw .dot{opacity:0}
.chart.drawn .ar,.chart.drawn .dot{opacity:1;transition:opacity 500ms ease 700ms}

.feed{list-style:none;margin:12px 0 0;padding:0}
.feed li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line-ink)}
.feed li:first-child{border-top:0}
.feed .fd{font-size:13px;font-weight:700;color:var(--mute-ink)}
.feed .fl1{font-weight:800;font-stretch:72%;font-size:24px;text-transform:uppercase;line-height:.92}
.feed .fl2{font-size:14px;color:var(--mute-ink);margin-top:2px}
.prtag{font-size:11px;font-weight:800;letter-spacing:.08em;padding:4px 8px;border-radius:8px;background:var(--c-done);color:var(--done-ink);white-space:nowrap}
.status{list-style:none;margin:12px 0 0;padding:0}
.status li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 0;border-top:1px solid var(--line-ink)}
.status li:first-child{border-top:0}
.status .sn{font-weight:800;font-stretch:72%;font-size:24px;text-transform:uppercase;line-height:.92}
.status .sx{grid-column:1/-1;font-size:14px;color:var(--mute-ink)}
.badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:9px;font-size:13px;font-weight:800;white-space:nowrap}
.badge svg{width:14px;height:14px}
.badge.up{background:var(--hm-strength);color:var(--hm-ink)}
.badge.hold{background:var(--surface-ink);color:var(--white);box-shadow:inset 0 0 0 1.5px var(--line)}
.badge.stall{background:var(--c-done);color:var(--done-ink)}
.badge.max{background:var(--white);color:var(--c-ink)}
.bars{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.bars li{display:grid;grid-template-columns:84px minmax(0,1fr) 100px;gap:12px;align-items:center;font-size:14px;font-weight:700}
.bars .tr{position:relative;height:14px;border-radius:7px;background:var(--surface-ink)}
.bars .fi{position:absolute;inset:0;border-radius:7px;background:var(--white);transform-origin:left;transform:scaleX(0);transition:transform 900ms var(--ease)}
.bars .tg{position:absolute;top:-4px;bottom:-4px;width:3px;border-radius:2px;background:var(--hm-strength)}
.bars .bv{text-align:right;font-size:13px;color:var(--mute-ink)}
.vis .bars .fi{transform:scaleX(var(--v))}
.vbars{display:flex;align-items:flex-end;gap:8px;height:120px;margin-top:16px}
.vbars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.vbars i{display:block;width:100%;border-radius:8px 8px 3px 3px;background:var(--white);transform-origin:bottom;transform:scaleY(0);transition:transform 800ms var(--ease);transition-delay:calc(var(--k) * 50ms)}
.vbars div:last-child i{background:var(--c-set)}
.vis .vbars i{transform:scaleY(1)}
.vbars span{font-size:11px;font-weight:700;color:var(--mute-ink)}
.totals{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin-top:16px}
.totals div{border-top:3px solid var(--white);padding-top:8px}
.totals b{display:block;font-weight:800;font-stretch:72%;font-size:56px;line-height:.86;letter-spacing:-.01em}
.totals span{font-size:13px;font-weight:700;color:var(--mute-ink)}
.ctype{list-style:none;margin:12px 0 0;padding:0}
.ctype li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line-ink)}
.ctype li:first-child{border-top:0}
.ctype .ci{width:40px;height:40px;border-radius:12px;background:var(--hm-cardio);color:var(--hm-ink);display:grid;place-items:center}
.ctype .ci svg{width:24px;height:24px}
.ctype b{font-weight:800;font-stretch:72%;font-size:24px;text-transform:uppercase}
.ctype span{font-size:13px;color:var(--mute-ink);display:block}
.ctype .cv{text-align:right;font-weight:800;font-size:15px}
.subh{margin:24px 0 0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-ink)}
.bw-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:12px}
.bw-row b{font-weight:800;font-stretch:72%;font-size:72px;line-height:.84}
.bw-row b small{font-size:24px}

/* ---------- sheets (slide up over ink) ---------- */
.sheets{position:absolute;inset:0;z-index:40;pointer-events:none}
.scrim{position:absolute;inset:0;background:oklch(0 0 0 / .5);opacity:0;transition:opacity 300ms ease;pointer-events:auto}
.scrim.on{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;background:var(--c-ink);color:var(--white);border-radius:28px 28px 0 0;pointer-events:auto;
  box-shadow:0 -12px 40px oklch(0 0 0 / .35);transform:translateY(100%);will-change:transform;--slab-ink:var(--sheet-accent,var(--c-set));--surface:var(--surface-ink);--chip-on:var(--c-ink);max-height:calc(100% - var(--sat) - 8px)}
.sheet.full{top:calc(var(--sat) + 8px)}
.sheet.tall{height:calc(100% - var(--sat) - 40px)}
.sheet.edge{top:0;max-height:none;border-radius:0}
.sheet.behind{filter:brightness(.7)}
.grab{position:absolute;top:6px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:oklch(1 0 0 / .35);z-index:3}
.sh-head{position:relative;flex:none;display:flex;align-items:center;gap:8px;min-height:64px;padding:12px 12px 0 16px;touch-action:none;cursor:grab}
.sheet.edge .sh-head{padding-top:calc(var(--sat) + 4px)}
.sh-head .t{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;flex:1;min-width:0}
.sh-head .icon{background:var(--surface-ink)}
.sh-body{margin-bottom:var(--lane,0px);flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 22px 24px;scrollbar-width:none}
.sh-body::-webkit-scrollbar{display:none}
.sh-foot{flex:none}
.sheet .slab{min-height:128px}
.sh-title{font-size:64px;margin:4px 0 0}
.sh-title.m{font-size:52px}
.sh-sub{font-size:16px;line-height:1.4;color:var(--mute-ink);margin:12px 0 0}
.sheet .in-rv{animation:en-big 560ms var(--ease) backwards;animation-delay:calc(var(--i,0) * 50ms)}
@keyframes en-big{from{opacity:0;transform:translateY(28px)}}
.rv-on .rv{animation:en-big 560ms var(--ease) backwards;animation-delay:calc(var(--i,0) * 50ms)}

/* form bits */
.field{display:block;margin-top:24px}
.field>span{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-ink);margin-bottom:8px}
.inp{width:100%;min-height:60px;padding:0 18px;border-radius:18px;border:2px solid transparent;background:var(--surface-ink);color:var(--white);font-size:24px;font-weight:700;outline:none;transition:border-color 200ms ease,box-shadow 200ms ease}
.inp:focus{border-color:var(--white);box-shadow:0 0 0 4px oklch(1 0 0 / .14)}
.inp.big{font-size:40px;font-weight:800;font-stretch:72%;text-transform:uppercase;min-height:76px}
textarea.inp{min-height:88px;padding:14px 18px;font-size:17px;font-weight:600;resize:none;line-height:1.35}
.inp::placeholder{color:oklch(1 0 0 / .4)}
.shake{animation:shake 380ms var(--ease)}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.err{color:oklch(0.82 0.12 50);font-size:14px;font-weight:700;margin-top:8px;min-height:18px}

.seg{position:relative;display:flex;padding:4px;border-radius:16px;background:var(--surface);isolation:isolate}
.seg button{position:relative;z-index:1;flex:1;min-height:44px;border-radius:12px;font-size:15px;font-weight:700;padding:0 10px;white-space:nowrap;color:var(--white);transition:color 240ms var(--ease),transform var(--dur) var(--ease)}
.seg button[aria-pressed="true"]{color:var(--seg-on,var(--c-ink))}
.seg .thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:0;border-radius:12px;background:var(--white);transition:transform 340ms var(--ease),width 340ms var(--ease);box-shadow:0 2px 8px oklch(0 0 0 / .2)}
.seg.big button{min-height:52px;font-size:18px;font-weight:800;font-stretch:72%;text-transform:uppercase}

.stepper{display:flex;align-items:center;gap:8px}
.stepper .sv{min-width:72px;height:56px;position:relative;overflow:hidden;display:grid;place-items:center}
.stepper .sv span{grid-area:1/1;font-weight:800;font-stretch:72%;font-size:44px;line-height:1}
.stepper .icon{width:48px;height:48px;background:var(--surface)}
.stepper.sm .sv{min-width:56px;height:44px}
.stepper.sm .sv span{font-size:30px}
.stepper.sm .icon{width:44px;height:44px}
.stepper .unit{font-size:14px;font-weight:700;color:var(--mute-ink);margin-left:-4px}

.switch{position:relative;width:56px;height:34px;border-radius:17px;background:oklch(1 0 0 / .2);flex:none;transition:background-color 260ms ease}
.switch i{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:var(--white);box-shadow:0 2px 6px oklch(0 0 0 / .3);
  transition:transform 420ms linear(0,0.2 7%,0.6 16%,0.92 26%,1.06 34%,1.08 40%,1.04 50%,0.99 62%,1)}
.switch[aria-checked="true"]{background:var(--c-set)}
.switch[aria-checked="true"] i{transform:translateX(22px)}
.switch:active i{width:32px}
.switch[aria-checked="true"]:active i{transform:translateX(18px)}

/* choices (big tappable answers) */
.choices{display:grid;gap:8px;margin-top:24px}
.choice{display:flex;align-items:center;gap:16px;min-height:76px;padding:14px 18px;border-radius:22px;background:var(--surface-ink);text-align:left;width:100%;box-shadow:inset 0 0 0 2px transparent;transition:transform var(--dur) var(--ease),background-color 240ms ease,box-shadow 240ms ease,color 240ms ease}
.choice b{display:block;font-weight:800;font-stretch:72%;font-size:30px;line-height:.9;text-transform:uppercase}
.choice small{display:block;font-size:14px;color:var(--mute-ink);margin-top:4px;line-height:1.3;font-weight:600}
.choice .ck{margin-left:auto;width:30px;height:30px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px oklch(1 0 0 / .35);display:grid;place-items:center;color:transparent;transition:background-color 200ms ease}
.choice .ck svg{width:18px;height:18px}
.choice .ck path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset 260ms var(--ease) 60ms}
.choice[aria-checked="true"],.choice[aria-pressed="true"]{background:var(--white);color:var(--c-ink)}
.choice[aria-checked="true"] small,.choice[aria-pressed="true"] small{color:oklch(0.4 0 0)}
.choice[aria-checked="true"] .ck,.choice[aria-pressed="true"] .ck{background:var(--c-set);box-shadow:none;color:var(--white)}
.choice[aria-checked="true"] .ck path,.choice[aria-pressed="true"] .ck path{stroke-dashoffset:0}
.choice.sm{min-height:64px;padding:10px 16px}
.chv{margin-left:auto;width:32px;height:32px;display:grid;place-items:center;flex:none;opacity:.8}
.chv svg{width:20px;height:20px}
.choice.sm b{font-size:24px}
.subchoices{display:grid;gap:6px;margin:6px 0 4px 16px;padding-left:12px;border-left:2px solid oklch(1 0 0 / .25);transform-origin:top;animation:en-big 320ms var(--ease) both}

/* setup */
.setup{--sheet-accent:var(--c-set)}
.sheet.setup{background:transparent;box-shadow:none;--fc:var(--c-set);--mute-ink:var(--white);--surface-ink:oklch(1 0 0 / .1);--surface:oklch(1 0 0 / .1);--line-ink:oklch(1 0 0 / .3);--c-ink:var(--fc);--slab-ink:var(--fc);--seg-on:var(--fc);--chip-on:var(--fc)}
.sheet.setup[data-c="rest"]{--fc:var(--c-rest)}.sheet.setup[data-c="log"]{--fc:var(--c-log)}.sheet.setup[data-c="stretch"]{--fc:var(--c-stretch)}.sheet.setup[data-c="done"]{--fc:var(--c-done)}
.sheet.setup>.fx{z-index:0}
.sheet.setup>.sh-head,.sheet.setup>.sh-body,.sheet.setup>.sh-foot{position:relative;z-index:1}
.setup .inp,.setup .choice,.setup .seg{box-shadow:inset 0 0 0 1.5px oklch(1 0 0 / .24)}
.setup .inp::placeholder{color:oklch(1 0 0 / .55)}
.setup .inp:focus{box-shadow:0 0 0 4px oklch(1 0 0 / .2)}
.setup .choice[aria-checked="true"],.setup .choice[aria-pressed="true"]{box-shadow:none;color:var(--fc)}
.setup .choice[aria-checked="true"] small,.setup .choice[aria-pressed="true"] small{color:var(--fc)}
.setup .choice[aria-checked="true"] .ck,.setup .choice[aria-pressed="true"] .ck{background:var(--fc)}
.setup .switch{background:oklch(1 0 0 / .24)}
.setup .switch[aria-checked="true"]{background:var(--white)}
.setup .switch[aria-checked="true"] i{background:var(--fc)}
.setup .err{color:var(--white);font-weight:800}
.setup .door .gi{color:oklch(0.2 0 0)}
.sheet.setup[data-c="done"]{--mute-ink:var(--done-ink);--surface-ink:oklch(0.2 0.03 70 / .1);--line-ink:oklch(0.2 0.03 70 / .3)}
.sheet.setup[data-c="done"] .sh-head,.sheet.setup[data-c="done"] .step,.sheet.setup[data-c="done"] .sh-head .icon{color:var(--done-ink)}
.sheet.setup[data-c="done"] .prog i{background:oklch(0.2 0.03 70 / .2)}
.sheet.setup[data-c="done"] .prog i b{background:var(--done-ink)}
.sheet.setup[data-c="done"] .door:nth-child(3){background:var(--done-ink)}
.prog{display:flex;gap:4px;padding:0 0 0 4px;flex:1}
.prog i{flex:1;height:5px;border-radius:3px;background:oklch(1 0 0 / .2);overflow:hidden;position:relative}
.prog i b{position:absolute;inset:0;background:var(--white);transform:scaleX(0);transform-origin:left;transition:transform 420ms var(--ease)}
.prog i.on b{transform:scaleX(1)}
.steps{position:relative;flex:1;min-height:0;overflow:hidden}
.step{position:absolute;inset:0;overflow-y:auto;padding:8px 22px 24px;scrollbar-width:none}
.step.enter-r{animation:st-in-r 380ms var(--ease) both}.step.enter-l{animation:st-in-l 380ms var(--ease) both}
.step.leave-l{animation:st-out-l 220ms var(--ease-in) both}.step.leave-r{animation:st-out-r 220ms var(--ease-in) both}
@keyframes st-in-r{from{opacity:0;transform:translateX(40px)}}@keyframes st-in-l{from{opacity:0;transform:translateX(-40px)}}
@keyframes st-out-l{to{opacity:0;transform:translateX(-40px)}}@keyframes st-out-r{to{opacity:0;transform:translateX(40px)}}
.q{font-size:64px;margin:16px 0 0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.unitrow{display:flex;align-items:flex-end;gap:12px}
.unitrow .inp{flex:1}
.unitrow .seg{width:132px;flex:none}
.goalrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0;border-top:1px solid var(--line-ink)}
.goalrow:first-of-type{border-top:0}
.goalrow b{display:block;font-weight:800;font-stretch:72%;font-size:30px;line-height:.9;text-transform:uppercase}
.goalrow small{display:block;color:var(--mute-ink);font-size:14px;margin-top:4px;font-weight:600;line-height:1.3}
.goal-off{opacity:.4;pointer-events:none;transition:opacity 240ms ease}
.doors{display:grid;gap:10px;margin-top:24px}
.door{display:grid;grid-template-columns:minmax(0,1fr) 56px;align-items:end;gap:12px;min-height:116px;padding:16px 18px 16px 22px;border-radius:28px;text-align:left;color:var(--white);background:var(--c-set)}
.door:nth-child(2){background:var(--c-stretch)}
.door:nth-child(3){background:var(--c-ink3)}
.door b{display:block;font-weight:800;font-stretch:72%;font-size:44px;line-height:.86;text-transform:uppercase}
.door small{display:block;font-size:14px;font-weight:600;margin-top:8px;line-height:1.3}
.door .gi{width:56px;height:56px;border-radius:50%;background:var(--white);color:var(--c-ink);display:grid;place-items:center}
.door .gi svg{width:26px;height:26px}
.door em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;display:inline-block;padding:3px 8px;border-radius:7px;background:oklch(1 0 0 / .22);margin-bottom:10px}

/* equipment checklist */
.eqlist{display:grid;gap:8px;margin-top:16px}

/* routines list */
.rlist{display:grid;gap:10px;margin-top:24px}
.rcard{display:block;width:100%;text-align:left;padding:18px;border-radius:28px;background:var(--surface-ink)}
.rcard.cur{background:var(--c-set)}
.rcard .rt{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rcard h3{margin:0;font-size:38px}
.rcard p{margin:6px 0 0;font-size:14px;font-weight:600;color:var(--mute-ink)}
.rcard.cur p{color:var(--mute)}
.rcard .chips{margin-top:14px}
.rcard .chip{min-height:36px;font-size:16px;background:oklch(1 0 0 / .14);pointer-events:none}
.rcard .use{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:8px;background:var(--white);color:var(--c-set);white-space:nowrap}
.rcard .acts{display:flex;gap:8px;margin-top:14px}
.rcard .acts .btn-s{flex:0 0 auto;min-height:44px;background:oklch(1 0 0 / .14);font-size:14px}

/* program library */
.filters{display:grid;gap:12px;margin-top:16px}
.filters .fl-l{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-ink);margin-bottom:6px;display:block}
.eqchip{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:0 16px;border-radius:16px;background:var(--surface-ink);font-size:15px;font-weight:700;text-align:left}
.eqchip svg{width:20px;height:20px;flex:none}
.eqchip .ch{margin-left:auto;opacity:.7}
.pcount{display:flex;justify-content:space-between;align-items:baseline;margin-top:24px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-ink)}
.plist{position:relative;display:grid;gap:12px;margin-top:12px}
.pcard{display:block;width:100%;text-align:left;padding:18px 18px 16px;border-radius:28px;background:var(--c-ink2);box-shadow:inset 0 0 0 1px var(--line-ink);color:var(--white)}
.pcard.best{background:var(--c-set);box-shadow:none}
.pcard .pt{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pcard h3{margin:0;font-size:40px}
.pcard .meta{margin-top:8px;font-size:14px;font-weight:700;display:flex;gap:12px;flex-wrap:wrap}
.pcard .bestt{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:8px;background:var(--white);color:var(--c-set);white-space:nowrap}
.pcard .fitt{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:8px;box-shadow:inset 0 0 0 1.5px var(--line);white-space:nowrap}
.pcard .chips{margin-top:12px;gap:6px}
.pcard .chip{min-height:32px;padding:0 10px;font-size:15px;background:oklch(1 0 0 / .14);border-radius:10px}
.cover{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;margin-top:14px}
.cover div{text-align:center}
.cover i{display:block;height:6px;border-radius:3px;background:var(--white)}
.cover span{display:block;font-size:9.5px;font-weight:700;margin-top:4px;letter-spacing:.01em;white-space:nowrap}
.volrow{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;margin-top:10px;align-items:end;height:34px;position:relative}
.volrow div{position:relative;height:100%;display:flex;align-items:flex-end}
.volrow i{display:block;width:100%;border-radius:3px 3px 1px 1px;background:oklch(1 0 0 / .85);transition:height 400ms var(--ease)}
.volrow .tl{position:absolute;left:-2px;right:-2px;height:2px;background:var(--white);opacity:.5}
.vollab{display:flex;justify-content:space-between;font-size:11px;font-weight:700;margin-top:6px;color:var(--mute-ink)}
.pcard.best .vollab{color:var(--mute)}
.pdays{display:flex;gap:8px;margin-top:16px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.pdays .chip{flex:none}
.pex{list-style:none;margin:16px 0 0;padding:0}
.pex li{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-top:1px solid var(--line-ink)}
.pex li:first-child{border-top:0}
.pex li.g{padding-left:18px}
.pex .en{font-weight:800;font-stretch:72%;font-size:26px;text-transform:uppercase;line-height:.92}
.pex .en small{display:block;font-stretch:100%;text-transform:none;font-size:13px;font-weight:600;color:var(--mute-ink);margin-top:4px;letter-spacing:0}
.pex .sr{font-weight:800;font-size:17px;white-space:nowrap;text-align:right}
.pex .sr small{display:block;font-size:12px;font-weight:700;color:var(--mute-ink)}
.pex .brk{border-color:var(--white)}

/* builder */
.rname{width:100%;background:transparent;border:0;border-bottom:2px solid oklch(1 0 0 / .2);padding:4px 0 6px;font-size:48px;font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.01em;line-height:1;color:var(--white);outline:none;border-radius:0}
.rname:focus{border-bottom-color:var(--white)}
.daytabs{display:flex;gap:8px;margin-top:16px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.daytabs .chip{flex:none;font-size:20px}
.daytabs .chip.add{background:transparent;box-shadow:inset 0 0 0 2px oklch(1 0 0 / .3)}
.dayopts{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;font-weight:600;color:var(--mute-ink)}
.dayopts .lab-in{width:110px;min-height:44px;padding:0 12px;border-radius:12px;border:2px solid transparent;background:var(--surface-ink);font-size:20px;font-weight:800;font-stretch:72%;text-transform:uppercase;color:var(--white);outline:none}
.dayopts .lab-in:focus{border-color:var(--white)}
.dayopts .txtbtn{margin-left:auto;font-size:14px}
.pairbar{position:sticky;top:0;z-index:6;box-shadow:0 10px 24px oklch(0 0 0 / .35);display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 12px 12px 16px;border-radius:18px;background:var(--white);color:var(--c-ink);font-size:15px;font-weight:700;line-height:1.3;animation:en-big 300ms var(--ease) both}
.pairbar .txtbtn{color:var(--c-ink);margin-left:auto;text-decoration-color:oklch(0.2 0 0 / .4)}
.blist{position:relative;list-style:none;margin:16px 0 0;padding:0 0 0 20px}
.brow{position:relative;display:flex;align-items:center;gap:4px;min-height:76px;padding:8px 4px 8px 0;margin-bottom:8px;border-radius:20px;background:var(--surface-ink);touch-action:pan-y;transition:transform 260ms var(--ease),box-shadow 200ms ease,background-color 200ms ease}
.brow.lift{z-index:5;transition:box-shadow 200ms ease,background-color 200ms ease;background:var(--c-ink3);box-shadow:0 18px 40px oklch(0 0 0 / .5),0 0 0 2px var(--white)}
.brow.lift.sc{transform:translateY(var(--dy)) scale(1.03)}
.brow.pick{box-shadow:inset 0 0 0 2px var(--white)}
.brow.target{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:inset 0 0 0 2px oklch(1 0 0 / .6)}}
.brow .handle{width:44px;height:60px;display:grid;place-items:center;flex:none;touch-action:none;cursor:grab;color:oklch(1 0 0 / .6)}
.brow .handle svg{width:22px;height:22px}
.brow .bmain{flex:1;min-width:0;text-align:left;min-height:56px;display:flex;flex-direction:column;justify-content:center;border-radius:12px}
.brow .bn{font-weight:800;font-stretch:72%;font-size:26px;text-transform:uppercase;line-height:.92;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .bx{font-size:13px;font-weight:600;color:var(--mute-ink);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-btn{height:44px;min-width:44px;padding:0 10px;border-radius:12px;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:none}
.row-btn.pair{flex-direction:column;gap:3px;min-width:54px;height:54px;padding:0 4px;font-size:9.5px;letter-spacing:.08em;border-radius:14px;background:oklch(1 0 0 / .07)}
.row-btn.pair svg{width:20px;height:20px}
.row-btn.pair.paired{background:transparent;box-shadow:inset 0 0 0 1.5px oklch(1 0 0 / .22)}
.row-btn.pair[aria-pressed="true"]{background:var(--white);color:var(--c-ink)}
.row-btn.pair.here{background:var(--white);color:var(--c-ink)}
.row-btn svg{width:20px;height:20px}
.bbrk{position:absolute;left:4px;width:12px;pointer-events:none;overflow:visible}
.bbrk path{fill:none;stroke:var(--white);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.bbrk.drawin path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 520ms var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.bbrk text{fill:var(--white);font-size:9px;font-weight:800;letter-spacing:.12em}
.addex{width:100%;min-height:64px;margin-top:4px;border-radius:20px;box-shadow:inset 0 0 0 2px oklch(1 0 0 / .3);display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-stretch:72%;font-size:26px;text-transform:uppercase}
.addex svg{width:22px;height:22px}
.menu{position:absolute;z-index:30;min-width:220px;padding:6px;border-radius:18px;background:var(--white);color:var(--c-ink);box-shadow:0 18px 44px oklch(0 0 0 / .5);transform-origin:top right;animation:pop-in 200ms var(--ease) both}
.menu.out{animation:pop-out 130ms var(--ease-in) both}
.menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 14px;border-radius:12px;font-size:16px;font-weight:700;text-align:left}
.menu button:active{background:oklch(0.2 0 0 / .08)}
.menu button svg{width:20px;height:20px}
.menu .danger{color:oklch(0.5 0.2 30)}
.menu hr{border:0;height:1px;background:oklch(0.2 0 0 / .12);margin:4px 8px}
.hintline{font-size:14px;line-height:1.4;color:var(--mute-ink);margin:12px 0 0}
.flip-move{transition:transform 360ms var(--ease)}

/* picker */
.search{position:relative;margin-top:8px}
.search svg{position:absolute;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;opacity:.7}
.search .inp{padding-left:46px;font-size:18px;min-height:52px}
.eqnote{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;font-weight:600;color:var(--mute-ink)}
.eqnote .txtbtn{margin-left:auto;font-size:14px}
.pgroup h4{margin:24px 0 4px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-ink)}
.pitem{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 0;border-top:1px solid var(--line-ink)}
.pgroup h4+.pitem{border-top:0}
.pitem .pn{font-weight:800;font-stretch:72%;font-size:24px;text-transform:uppercase;line-height:.92}
.pitem .px{font-size:13px;font-weight:600;color:var(--mute-ink);margin-top:4px}
.pitem .need{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:oklch(0.85 0.09 60)}
.pitem.no .pn,.pitem.no .px{opacity:.45}
.pitem .icon{margin-left:auto;background:var(--white);color:var(--c-ink)}
.pitem.no .icon{background:var(--surface-ink);color:var(--white);opacity:.5}
.pitem.added .icon{background:var(--hm-strength)}

/* row edit */
.edrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-top:1px solid var(--line-ink)}
.edrow:first-child{border-top:0}
.edrow b{font-size:17px;font-weight:700}
.edrow small{display:block;font-size:13px;font-weight:600;color:var(--mute-ink);margin-top:2px}
.reprange{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.reprange .dash{font-weight:800;font-size:28px;opacity:.6}
.stepinfo{margin-top:8px;padding:14px 16px;border-radius:18px;background:var(--surface-ink);font-size:14px;line-height:1.4;font-weight:600}
.stepinfo b{font-weight:800}
.wnudge{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.wnudge .rew{min-width:52px;text-align:center;font-weight:800;font-stretch:72%;font-size:34px}
.mini-btn.stepb{background:var(--surface-ink);color:var(--white);min-width:104px;white-space:nowrap;font-size:16px;justify-content:center;font-variant-numeric:tabular-nums}
.mini-btn.stepb[aria-disabled="true"]{opacity:.4}
.ladder{display:flex;gap:4px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.ladder span{flex:none;min-width:44px;padding:6px 8px;border-radius:9px;background:oklch(1 0 0 / .08);font-size:14px;font-weight:800;text-align:center}
.ladder span.cur{background:var(--white);color:var(--c-ink)}

/* cardio */
.ctypes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.ctypes .chip{flex-direction:column;min-height:60px;gap:4px;font-size:16px;border-radius:16px}
.ctypes .chip svg{width:24px;height:24px}
.dur{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dur .dv{display:flex;align-items:baseline;gap:8px;position:relative;height:120px;overflow:hidden;flex:1;justify-content:center}
.dur .dv .dn{font-weight:800;font-stretch:72%;font-size:120px;line-height:1;position:relative;display:grid}
.dur .dv .dn span{grid-area:1/1}
.dur .dv em{font-style:normal;font-size:18px;font-weight:800}
.ruler{position:relative;margin:4px -22px 0;height:56px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x mandatory;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.ruler::-webkit-scrollbar{display:none}
.ruler .rt{display:flex;align-items:flex-end;height:44px;width:max-content}
.ruler .rt i{flex:none;width:12px;height:16px;display:flex;justify-content:center;scroll-snap-align:center}
.ruler .rt i::before{content:"";width:2px;height:100%;border-radius:1px;background:oklch(1 0 0 / .4)}
.ruler .rt i.m5{height:26px}
.ruler .rt i.m15{height:38px}
.ruler .rt i.m15::before{background:var(--white)}
.ruler .needle{position:absolute;left:50%;bottom:0;width:4px;height:52px;margin-left:-2px;border-radius:2px;background:var(--white);pointer-events:none}
.ruler-wrap{position:relative}
.ruler-wrap .needle{position:absolute;left:50%;top:8px;width:4px;height:48px;margin-left:-2px;border-radius:2px;background:var(--c-set);pointer-events:none;z-index:2}
.tbox{display:flex;align-items:flex-start;gap:6px}
.tbox>b{font-size:36px;font-weight:800;padding-top:12px;opacity:.55}
.tf{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.tf .inp{text-align:center;min-height:60px;padding:0 8px;font-size:40px;font-weight:800;font-stretch:72%}
.tf small{font-size:12px;font-weight:700;color:var(--mute-ink);letter-spacing:.06em;text-transform:uppercase}
.inp.num-in{font-size:34px;font-weight:800;font-stretch:72%;min-height:60px}
.unit-fixed{flex:none;min-width:64px;font-size:18px;font-weight:800;text-align:center;color:var(--mute-ink)}
.pacecard{margin-top:12px;padding:10px 16px;border-radius:18px;background:var(--c-set);display:flex;align-items:baseline;gap:10px;min-height:56px}
.pacecard .eyebrow{margin-right:auto;align-self:center}
.pacecard b{font-weight:800;font-stretch:72%;font-size:40px;line-height:.9;letter-spacing:-.01em}
.pacecard em{font-style:normal;font-size:18px;font-weight:800}
.optl{font-size:13px;font-weight:600;color:var(--mute-ink);text-transform:none;letter-spacing:0;margin-left:6px}

/* calendar */
.calhead{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.calhead b{font-weight:800;font-stretch:72%;font-size:32px;text-transform:uppercase}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:8px}
.cal .dw{font-size:12px;font-weight:700;color:var(--mute-ink);text-align:center;padding:4px 0}
.cal button{position:relative;height:46px;border-radius:12px;font-size:17px;font-weight:700;display:grid;place-items:center}
.cal button:disabled{opacity:.3;cursor:not-allowed}
.cal button:disabled:active{transform:none}
.cal button .dt{position:absolute;bottom:5px;left:50%;display:flex;gap:3px;transform:translateX(-50%)}
.cal button .dt i{width:5px;height:5px;border-radius:50%}
.cal button[aria-pressed="true"]{background:var(--white);color:var(--c-ink)}
.cal button.today{box-shadow:inset 0 0 0 2px oklch(1 0 0 / .4)}
.markinfo{margin-top:12px;padding:14px 16px;border-radius:18px;background:var(--surface-ink);font-size:14px;line-height:1.4;font-weight:600;display:flex;gap:12px}
.markinfo svg{width:20px;height:20px;flex:none;margin-top:1px}

/* settings */
.sgroup{margin-top:32px}
.sgroup:first-child{margin-top:8px}
.sgroup h3{margin:0;font-size:40px}
.sgroup>p{margin:6px 0 0;font-size:14px;line-height:1.35;color:var(--mute-ink)}
.srows{margin-top:12px;border-radius:22px;background:var(--surface-ink);overflow:hidden}
.srow{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 14px 8px 18px;width:100%;text-align:left;position:relative}
.srow+.srow::before{content:"";position:absolute;top:0;left:18px;right:0;height:1px;background:var(--line-ink)}
.srow .sl{flex:1;min-width:0}
.srow .sl b{display:block;font-size:17px;font-weight:700}
.srow .sl small{display:block;font-size:13px;color:var(--mute-ink);margin-top:2px;line-height:1.3;font-weight:600}
.srow .sv2{font-size:16px;font-weight:700;color:var(--mute-ink);white-space:nowrap;display:flex;align-items:center;gap:4px}
.srow .sv2 svg{width:16px;height:16px}
.srow.tap{transition:background-color 160ms ease}
.srow.tap:active{background:oklch(1 0 0 / .06)}
.srow .seg{width:auto;min-width:150px}
.srow .seg button{min-height:44px;font-size:14px}
.srow .inline-in{width:130px;min-height:44px;padding:0 12px;border-radius:12px;border:2px solid transparent;background:oklch(1 0 0 / .08);font-size:17px;font-weight:700;color:var(--white);text-align:right;outline:none}
.srow .inline-in:focus{border-color:var(--white)}
.mini-btn{height:44px;padding:0 14px;border-radius:12px;background:var(--white);color:var(--c-ink);font-size:14px;font-weight:800;display:inline-flex;align-items:center;gap:6px}
.mini-btn svg{width:14px;height:14px}
.mini-btn.playing{background:var(--c-set);color:var(--white)}
.range{-webkit-appearance:none;appearance:none;width:130px;height:44px;background:transparent}
.range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--white) var(--p,60%),oklch(1 0 0 / .2) var(--p,60%))}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--white);margin-top:-11px;box-shadow:0 2px 6px oklch(0 0 0 / .4)}
.range::-moz-range-track{height:6px;border-radius:3px;background:oklch(1 0 0 / .2)}
.range::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--white);border:0}
.signout{color:oklch(0.8 0.13 40)}
.ver{font-size:13px;color:var(--mute-ink);text-align:center;margin:32px 0 8px}

/* muscle sheet + standards */
.lvchip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:12px;font-weight:800;font-size:16px;color:var(--c-ink);background:var(--tc,var(--white))}
.mhero{display:flex;align-items:baseline;gap:12px;margin-top:12px}
.mhero b{font-weight:800;font-stretch:72%;font-size:96px;line-height:.84;letter-spacing:-.01em}
.mhero span{font-size:15px;font-weight:700;color:var(--mute-ink);line-height:1.3}
.mlevel{display:flex;align-items:center;gap:12px;margin-top:16px}
.lvchip.big{height:44px;padding:0 18px;font-size:20px;font-stretch:80%;text-transform:uppercase;letter-spacing:.02em;border-radius:14px;color:oklch(0.15 0 0)}
.msc{font-size:13px;font-weight:600;color:var(--mute-ink)}
.mscore{display:flex;align-items:baseline;gap:16px;margin-top:16px}
.mscore b{font-weight:800;font-stretch:72%;font-size:88px;line-height:.84}
.mscore span{font-size:14px;font-weight:700;color:var(--mute-ink);line-height:1.3}
.ramp{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;margin-top:16px}
.ramp i{height:10px;border-radius:3px;opacity:.4}
.ramp i.on{opacity:1;height:14px;margin-top:-2px;box-shadow:0 0 0 2px var(--c-ink),0 0 0 4px var(--white)}
.ramp i.done{opacity:1}
.nextbox{margin-top:16px;padding:16px;border-radius:20px;background:var(--surface-ink);font-size:15px;line-height:1.45}
.nextbox b{font-weight:800}
.std-note{font-size:14px;line-height:1.45;color:var(--mute-ink);margin:12px 0 0}
.std{margin-top:16px}
.std-row{padding:14px 0;border-top:1px solid var(--line-ink)}
.std-row:first-child{border-top:0}
.std-row .sh{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.std-row .sh b{font-weight:800;font-stretch:72%;font-size:28px;text-transform:uppercase;line-height:.9}
.std-row .sh span{font-size:14px;font-weight:700;color:var(--mute-ink);text-align:right;white-space:nowrap}
.std-row .sh strong{color:var(--white);font-weight:800}
.std-sub{margin:4px 0 0;font-size:13px;font-weight:600;color:var(--mute-ink);line-height:1.35}
.std-row .est{font-size:11px;font-weight:800;letter-spacing:.08em;font-variant:small-caps;text-transform:lowercase;color:var(--mute-ink);margin-left:6px}
.std-cells{display:flex;gap:6px;overflow-x:auto;margin:10px -22px 0;padding:4px 22px;scrollbar-width:none;scroll-snap-type:x proximity}
.std-cells::-webkit-scrollbar{display:none}
.std-cell{flex:0 0 86px;scroll-snap-align:start;scroll-margin-left:22px;padding:10px 10px 9px;border-radius:14px;background:var(--surface-ink);position:relative}
.std-cell i{display:block;height:5px;border-radius:3px;background:var(--tc);margin-bottom:8px}
.std-cell small{display:block;font-size:11px;font-weight:700;color:var(--mute-ink);white-space:nowrap}
.std-cell b{display:block;font-weight:800;font-stretch:72%;font-size:28px;line-height:.95;margin-top:2px}
.std-cell[aria-current="true"]{box-shadow:inset 0 0 0 2.5px var(--white);background:oklch(1 0 0 / .14)}
.std-cell .nx{display:block;font-size:11px;font-weight:800;color:var(--c-ink);background:var(--white);border-radius:6px;padding:2px 5px;margin-top:5px;white-space:nowrap;text-align:center}
.std-cell .you{display:block;font-size:11px;font-weight:800;margin-top:5px;white-space:nowrap;text-align:center}
.std-cell.met{opacity:.7}
.bwp{font-size:12px;font-weight:800;margin-right:2px;opacity:.75}

/* toasts */
.toasts{position:absolute;left:16px;right:16px;bottom:var(--tb,160px);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:120;pointer-events:none}
.toast{position:relative;display:flex;align-items:center;gap:10px;background:var(--toast-bg);color:var(--white);padding:9px 16px 9px 9px;border-radius:16px;font-size:14.5px;font-weight:600;line-height:1.2;box-shadow:inset 0 0 0 1px oklch(1 0 0 / .1),0 2px 6px rgba(0,0,0,.14),0 14px 30px rgba(0,0,0,.28);animation:tin 260ms var(--ease) both;pointer-events:none;overflow:hidden;max-width:100%}
.toast .tc{width:26px;height:26px;border-radius:50%;background:var(--white);color:var(--c-ink);display:grid;place-items:center;flex:none;animation:tcpop 380ms var(--ease) 100ms both}
.toast .tc svg{width:15px;height:15px}
.toast .ta{pointer-events:auto;margin-left:8px;min-height:44px;padding:0 12px;border-radius:10px;background:var(--white);color:var(--c-ink);font-weight:800;font-size:14px}
.toast .tbar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--white);opacity:.6;transform-origin:left;animation:tbar linear forwards}
.toast.out{position:absolute;bottom:0;animation:tout 160ms ease-in both}
.toast.big{min-height:68px;padding:10px 10px 10px 12px;border-radius:20px;font-size:16px;gap:12px}
.toast.big .tc{width:32px;height:32px}
.toast.big .ta{min-height:52px;padding:0 22px;font-size:17px;border-radius:14px}
.toast.big .tbar{height:4px}
@keyframes tin{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes tout{to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes tcpop{from{opacity:0;transform:scale(.9) rotate(-35deg)}}
@keyframes tbar{to{transform:scaleX(0)}}

/* screens jump menu */
.jump{position:absolute;left:0;top:50%;z-index:150;width:12px;height:56px;border-radius:0 10px 10px 0;background:oklch(1 0 0 / .18);display:grid;place-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.jump i{width:3px;height:22px;border-radius:2px;background:oklch(1 0 0 / .7)}
.jump::after{content:"";position:absolute;inset:-6px -16px -6px 0}
.jump-out{display:none;position:fixed;left:16px;top:16px;z-index:300;min-height:40px;padding:0 14px;border-radius:12px;background:oklch(1 0 0 / .1);color:var(--white);font-size:14px;font-weight:700;align-items:center;gap:8px}
.clean .jump,.clean .jump-out{display:none !important}
.jlist{margin-top:8px}
.groundpick{margin-top:16px}
.groundpick .seg button{font-size:14px}
.jlist h4{margin:20px 0 6px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-ink)}
.jlist button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:0 4px;border-top:1px solid var(--line-ink);font-size:17px;font-weight:700;text-align:left}
.jlist button span{font-size:12px;color:var(--mute-ink);font-weight:600}

/* ---------- workout mode (ported from design-round look "field") ---------- */
#wo{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;--bg:var(--c-set);--ink:oklch(0.99 0 0);--mute:oklch(0.97 0.012 60);--surface:oklch(1 0 0 / .16);--line:oklch(1 0 0 / .32);--hover:oklch(1 0 0 / .22);
  --accent:oklch(0.99 0 0);--slab:oklch(0.99 0 0);--slab-ink:var(--bg);color:var(--ink);opacity:0;pointer-events:none;transition:opacity 200ms ease}
#wo.on{opacity:1;pointer-events:auto}
#wo:not(.on) *{pointer-events:none !important}
#wo[data-state="rest"]{--bg:var(--c-rest)}
#wo[data-state="log"]{--bg:var(--c-log)}
#wo[data-state="done"]{--bg:var(--c-done);--ink:oklch(0.2 0.03 70);--mute:oklch(0.3 0.04 70);--surface:oklch(0.2 0.03 70 / .08);--line:oklch(0.2 0.03 70 / .3);--hover:oklch(0.2 0.03 70 / .12);--accent:oklch(0.2 0.03 70);--slab:oklch(0.2 0.03 70);--slab-ink:var(--c-done)}
#wo .wfx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#wo .drain{display:none;position:absolute;inset:0;background:oklch(1 0 0 / .11);transform-origin:50% 100%}
#wo[data-state="rest"] .drain,#wo[data-state="log"] .drain{display:block}
#wo .tb,#wo .strip,#wo .views{position:relative;z-index:1}
#wo .tb{display:flex;align-items:center;gap:10px;padding:calc(var(--sat) + 2px) 12px 2px 20px;flex:none;min-height:calc(var(--sat) + 52px)}
#wo .ttl{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:8px}
#wo .el{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink);font-size:16px;font-weight:600}
#wo .icon{color:var(--ink)}
#wo .strip{display:flex;gap:8px;padding:2px 20px 10px;flex:none}
#wo .sg{flex:var(--n) 1 0;display:flex;align-items:center;gap:6px;min-width:0}
#wo .sl{font:700 11px/1 var(--f);color:var(--ink);flex:none}
#wo .ss{flex:1;display:flex;gap:2px;min-width:0}
#wo .ss i{flex:1;height:5px;border-radius:3px;background:oklch(1 0 0 / .22);overflow:hidden;position:relative}
#wo[data-state="done"] .ss i{background:var(--hover)}
#wo .ss i b{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 480ms var(--ease)}
#wo .ss i.on b{transform:scaleX(1)}
#wo .ss i.cur{box-shadow:inset 0 0 0 1.5px var(--ink)}
#wo .views{flex:1;min-height:0}
#wo .view{position:absolute;inset:0;padding:6px 22px 0;display:grid;grid-template-columns:minmax(0,1fr);opacity:0;transform:scale(.985);pointer-events:none;transition:opacity 140ms ease-in,transform 160ms ease-in}
#wo .view.on{opacity:1;transform:none;pointer-events:auto;transition:opacity 260ms var(--ease) 60ms,transform 320ms var(--ease) 60ms}
#wo .meta{grid-area:meta;color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;align-self:center;display:flex;align-items:center;gap:8px}
#wo .setno{grid-area:setno;justify-self:end;align-self:center;color:var(--ink);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
#wo .v-set{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto auto auto auto 1fr auto auto auto;
  grid-template-areas:"meta setno" "name name" "sub sub" "tgt tgt" "wt wt" "coach coach" ". ." "next next" "sec sec" "go go"}
#wo .exname{grid-area:name;margin:12px 0 0;font-weight:800;font-size:96px;line-height:.84;font-stretch:72%;letter-spacing:-.015em;text-transform:uppercase;min-width:0}
#wo .exname[data-len="long"]{font-size:62px}
#wo .exname .nm{display:block;min-width:0;max-width:100%;white-space:nowrap}
#wo .exsub{grid-area:sub;color:var(--mute);font-size:17px;font-weight:600;margin-top:10px}
#wo .tgt,#wo .wt{display:flex;flex-direction:row;align-items:baseline;gap:10px;min-width:0}
#wo .tgt{grid-area:tgt;margin-top:22px}#wo .wt{grid-area:wt}
#wo .tgt b,#wo .wt b{display:block;font-weight:800;font-size:112px;line-height:.88;font-stretch:72%;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:0;flex:0 1 auto}
#wo .tgt span,#wo .wt span{color:var(--ink);font-size:18px;font-weight:700;flex:none}
#wo .coach{grid-area:coach;margin:16px 0 0;font-size:15px;font-weight:600;display:flex;gap:10px;align-items:center;line-height:1.3}
#wo .coach .ar{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg)}
#wo .coach .ar svg{width:16px;height:16px}
#wo .next{grid-area:next;color:var(--ink);margin:0 0 4px;font-size:15px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
#wo .next b{font-weight:700}
#wo .next .nl{font-weight:700}
#wo .sec{grid-area:sec;display:flex;gap:8px;margin-top:12px}
#wo .sb{flex:1;min-height:44px;padding:0 12px;border-radius:16px;background:var(--surface);color:var(--ink);font:600 14px/1 var(--f);display:inline-flex;align-items:center;justify-content:center;gap:5px;transition:transform var(--dur) var(--ease)}
#wo .sb:active{transform:scale(var(--press))}
#wo .sb svg{width:15px;height:15px}
#wo .sb.wstep{min-height:52px;flex-direction:column;gap:3px;justify-content:center}
#wo .sb.wstep b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
#wo .sb.wstep small{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
#wo .sb.wstep[aria-disabled="true"]{opacity:.45}
#wo .wt b{display:grid;overflow:hidden}
#wo .wt b span{grid-area:1/1}
#wo .sb[aria-disabled="true"]{opacity:.45}
#wo .go{grid-area:go;margin:14px -22px 0;width:auto;background:var(--slab);color:var(--slab-ink);min-height:150px}
#wo .go .gi{background:var(--slab-ink);color:var(--slab)}
#wo .v-rest{grid-template-rows:auto auto auto 1fr auto auto;grid-template-areas:"meta" "timer" "upnext" "." "sec" "go"}
#wo .timer{grid-area:timer;margin-top:18px}
#wo .clock{text-align:left}
#wo .cv{font-weight:800;font-size:168px;line-height:.82;font-stretch:72%;letter-spacing:-.01em;font-variant-numeric:tabular-nums;display:block;white-space:nowrap}
#wo .cs{display:inline-block}
#wo .co{color:var(--ink);font-size:18px;font-weight:700;margin-top:10px}
#wo .timer.ended .clock{animation:popx 460ms var(--ease)}
@keyframes popx{35%{transform:scale(1.07)}}
#wo .upnext{grid-area:upnext;display:flex;flex-direction:column;gap:3px;margin-top:34px;min-width:0}
#wo .upnext .ul{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
#wo .upnext b{display:block;font-weight:800;font-size:58px;line-height:.88;font-stretch:72%;text-transform:uppercase;margin:4px 0 6px;letter-spacing:-.01em;white-space:nowrap}
#wo .upnext .ux{color:var(--ink);font-size:14px}
#wo .upnext .then{margin-top:10px;font-size:15px;font-weight:600;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
#wo .upnext .then strong{font-weight:800}
#wo .prtag-w{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:8px;background:var(--c-done);color:var(--done-ink);font-size:12px;font-weight:800;letter-spacing:.08em;animation:prpop 520ms var(--ease) both}
@keyframes prpop{0%{opacity:0;transform:scale(.9)}55%{opacity:1;transform:scale(1.08)}100%{transform:none}}
#wo .v-log{grid-template-rows:auto auto auto 1fr auto auto auto auto;grid-template-areas:"meta" "q" "ctx" "ticker" "pills" "chips" "hint" "go"}
#wo .q{grid-area:q;font-weight:800;font-size:64px;line-height:.86;font-stretch:72%;text-transform:uppercase;margin:12px 0 0;letter-spacing:-.01em}
#wo .ctx{grid-area:ctx;color:var(--ink);margin-top:10px;font-size:15px}
#wo .ticker{grid-area:ticker;display:flex;align-items:center;justify-content:space-between;gap:8px;align-self:center}
#wo .tkb{width:64px;height:64px;border-radius:50%;background:var(--surface);display:grid;place-items:center;flex:none;color:var(--ink);transition:transform var(--dur) var(--ease)}
#wo .tkb:active{transform:scale(var(--press))}
#wo .tkb svg{width:30px;height:30px}
#wo .rnum{flex:1;height:168px;position:relative;overflow:hidden;display:grid;place-items:center;min-width:0}
#wo .rnum span{grid-area:1/1;font-weight:800;font-size:150px;font-stretch:72%;letter-spacing:-.01em;line-height:.9;font-variant-numeric:tabular-nums}
#wo .rchips{grid-area:chips;display:flex;gap:8px;margin-top:10px}
#wo .pills{grid-area:pills;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:38px 10px 16px;column-gap:var(--pg,4px)}
#wo .pill{grid-row:1;position:relative;height:38px;min-width:0;border-radius:10px;box-shadow:inset 0 0 0 1.5px oklch(1 0 0 / .45);color:var(--ink);font:800 14px/1 var(--f);font-stretch:80%;font-variant-numeric:tabular-nums;display:grid;place-items:center;text-align:center;
  transition:background-color 110ms ease,color 110ms ease,box-shadow 110ms ease,transform var(--dur) var(--ease)}
#wo .pill.on{background:var(--ink);color:var(--bg);box-shadow:none}
#wo .pills.dense .pill{font-size:9.5px;font-stretch:62%;letter-spacing:-.02em;border-radius:7px}
#wo .pill::after{content:"";position:absolute;inset:-7px calc(var(--pg,4px) / -2)}
#wo .pill:active{transform:scale(.88)}
#wo .pills .tbr{grid-row:2;align-self:start;height:8px;margin-top:3px;border:2px solid var(--ink);border-top:0;border-radius:0 0 6px 6px}
#wo .pills .tlab{grid-row:3;justify-self:center;font-size:11px;font-weight:800;letter-spacing:.1em;line-height:16px;white-space:nowrap}
#wo .rchip{text-align:center;min-width:44px;height:50px;flex:1;border-radius:14px;background:var(--surface);color:var(--ink);font:700 19px/1 var(--f);font-variant-numeric:tabular-nums;transition:transform var(--dur) var(--ease)}
#wo .rchip:active{transform:scale(var(--press))}
#wo .rchip[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
#wo .hint{grid-area:hint;text-align:center;color:var(--ink);font-size:14px;margin:10px 0 0}
#wo .v-done{grid-template-rows:auto auto auto auto auto 1fr auto;grid-template-areas:"meta" "big" "stats" "up" "streak" "." "go"}
#wo .big{grid-area:big;font-weight:800;font-size:100px;line-height:.82;font-stretch:72%;text-transform:uppercase;margin:10px 0 0;letter-spacing:-.01em}
#wo .stats{grid-area:stats;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.45fr);gap:14px;margin-top:18px}
#wo .st{padding:8px 0 0;border-top:3px solid var(--ink);min-width:0}
#wo .st b{display:block;font-weight:800;font-size:46px;font-stretch:72%;letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
#wo .st span{font-size:13px;color:var(--ink);font-weight:600}
#wo .up{grid-area:up;margin-top:14px;padding:16px 18px;border-radius:28px;background:var(--surface)}
#wo .uh{display:flex;align-items:center;gap:10px;font-size:16px}
#wo .ui{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--c-done);display:grid;place-items:center;flex:none}
#wo .ui svg{width:17px;height:17px}
#wo .up ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
#wo .up li{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;align-items:center}
#wo .up .ch{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
#wo .up .tagpr{font-size:10px;font-weight:800;letter-spacing:.08em;padding:3px 6px;border-radius:6px;background:var(--ink);color:var(--c-done);margin-right:8px}
#wo .up .more{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:14px;font-weight:600}
#wo .streak{grid-area:streak;margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 0}
#wo .streak b{font-size:32px;font-weight:800;margin-right:8px;font-variant-numeric:tabular-nums}
#wo .streak span{color:var(--ink);font-weight:600;font-size:14px}
#wo .wkb{display:flex;gap:4px}
#wo .wkb i{width:10px;height:26px;border-radius:3px;box-shadow:inset 0 0 0 2px var(--ink)}
#wo .wkb i.on{background:var(--ink)}
#wo .burst{position:absolute;left:50%;top:150px;width:0;height:0;pointer-events:none;z-index:5}
#wo .pt{position:absolute;left:0;top:0;border-radius:3px;width:13px;height:13px;margin:-6px 0 0 -6px;background:var(--c-set)}
#wo .pt:nth-child(4n+1){background:var(--c-rest)}
#wo .pt:nth-child(4n+2){background:var(--c-log)}
#wo .pt:nth-child(4n+3){background:oklch(0.99 0 0);box-shadow:0 0 0 1.5px var(--ink)}
#wo .prburst{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:6}
#wo .prburst i{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:3px;background:var(--c-done)}
#wo .prburst i:nth-child(3n){background:var(--white)}
.wo-end{margin-top:16px}

/* ---------- reduced motion: floods become crossfades, no squish, fades only ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-delay:0ms !important;animation-iteration-count:1 !important;transition-duration:180ms !important;transition-delay:0ms !important}
  .sq:active,.slab:active,.chip:active,.btn-s:active,.icon:active,.tab:active,.txtbtn:active,.row-btn:active,.choice:active,.door:active,.pcard:active,.seg button:active,.cal button:active,.hm-cell:active,.mini-btn:active,#wo .sb:active,#wo .tkb:active,#wo .rchip:active{transform:none}
  .page,.page.on,#wo .view,#wo .view.on{transform:none !important}
}

/* ---------- display caps that keep the real words in the text (screen readers and copy read "Squats", the eye sees SQUATS) ---------- */
.ucase>.t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;text-transform:none}
.ucase::after{content:attr(data-t)}
@supports (content:"x" / "") { .ucase::after{content:attr(data-t) / ""} }
#wo .confetti{position:absolute;inset:0;pointer-events:none;display:none}
#wo .confetti[data-confetti]{display:block}
.wo-on .pages,.wo-on .topbar{visibility:hidden;transition:visibility 0s linear 560ms}
/* press feedback that shows even while an entrance animation owns transform */
.slab:active,#wo .sb:active,.btn-s:active,.chip:active,.choice:active,.door:active{filter:brightness(.9)}
#wo .pills .tbrk{grid-row:2/4;display:flex;flex-direction:column;align-items:stretch;min-width:0}
#wo .pills .tbrk .tbr{align-self:stretch;display:block;height:8px;margin-top:3px;border:2px solid var(--ink);border-top:0;border-radius:0 0 6px 6px}
#wo .pills .tbrk .tlab{display:flex;justify-content:center;font-size:11px;font-weight:800;letter-spacing:.1em;line-height:16px;white-space:nowrap;margin-top:-1px}
.leaving::after{content:attr(data-t)}
/* sign-in expired banner: sits under the status bar, above everything, never over the bottom actions */
.signin{position:absolute;left:12px;right:12px;top:calc(var(--sat) + 58px);z-index:25;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:16px;background:var(--toast-bg);color:var(--white);font-size:14px;font-weight:600;line-height:1.25;box-shadow:0 14px 30px rgba(0,0,0,.3)}
.signin button{flex:none;min-height:44px;padding:0 14px;border-radius:12px;background:var(--white);color:var(--c-set);font-weight:800}
.stepper input.sv-in{width:72px;height:56px;border:0;border-radius:14px;background:transparent;text-align:center;font-weight:800;font-stretch:72%;font-size:40px;line-height:1;padding:0;color:inherit;-moz-appearance:textfield}
.stepper input.sv-in:focus{background:var(--surface);outline:none}
.stepper.sm input.sv-in{width:60px;height:44px;font-size:28px}
.mu{fill:var(--tc,transparent)}
.mu[data-tier="none"]{fill:transparent}
.st-empty{padding:8px 0 4px}.st-empty b{display:block;font-weight:800;font-stretch:72%;text-transform:uppercase;font-size:28px;line-height:.9;letter-spacing:-.01em}

/* ---------- stretch mode (the workout's Color field language on the stretch teal) ---------- */
#so{position:absolute;inset:0;z-index:31;display:flex;flex-direction:column;color:var(--white);opacity:0;pointer-events:none;--bg:var(--c-stretch);--ink:oklch(0.99 0 0);--surface:oklch(1 0 0 / .16);--line:oklch(1 0 0 / .32)}
#so:not(.on){visibility:hidden}
#so.on{opacity:1;pointer-events:auto}
#so .sfx{position:absolute;inset:0;overflow:hidden}
#so .sfx .fl{position:absolute;inset:0;opacity:0;transition:opacity 420ms ease}
#so .sfx .fl.on{opacity:1}
#so .sfx .fl[data-c="set"].on{transition:opacity 120ms ease}
#so .fl[data-c="done"]{background:var(--c-done)}
#so .drain{position:absolute;left:0;right:0;bottom:0;height:100%;transform-origin:bottom;background:oklch(1 0 0 / .09);transform:scaleY(1)}
#so .tb,#so .sstrip,#so .sview{position:relative;z-index:1}
#so .tb{display:flex;align-items:center;gap:10px;padding:calc(var(--sat) + 2px) 12px 2px 20px;min-height:calc(var(--sat) + 52px)}
#so .tb .ttl{flex:1;font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:.06em;font-size:17px}
#so .tb .el{font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
#so .tb .icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center}
#so .sstrip{display:grid;grid-auto-flow:column;gap:4px;padding:2px 20px 0}
#so .sstrip i{height:5px;border-radius:3px;background:oklch(1 0 0 / .25)}
#so .sstrip i.on{background:var(--white)}
#so .sstrip i.cur{background:oklch(1 0 0 / .65)}
#so .sview{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 22px calc(var(--sab) + 18px)}
#so .meta{display:flex;justify-content:space-between;font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:.08em;font-size:15px;opacity:.9}
#so .sname{margin:8px 0 0;font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.015em;line-height:.86;font-size:64px;white-space:nowrap}
#so .sname .nm{display:block;overflow:hidden}
#so .sart{flex:1;min-height:150px;display:grid;place-items:center;margin:6px -10px 0;transition:transform 420ms var(--ease)}
#so .sart svg{width:100%;height:100%;max-height:300px}
#so .sart.mirror{transform:scaleX(-1)}
#so .scue{margin:0 0 6px;font-size:17px;font-weight:600;line-height:1.3}
#so .stime{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
#so .stime .clock{font-weight:800;font-stretch:72%;font-size:112px;line-height:.82;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
#so .sside{font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:.06em;font-size:16px;text-align:right}
#so .sec{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
#so .sb{min-height:56px;border-radius:16px;background:var(--surface);font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:.04em;font-size:19px}
#so .sb:active{transform:scale(var(--press));filter:brightness(.92)}
#so[data-state="done"]{color:var(--done-ink)}
#so [data-sview="done"] .big{font-size:96px;margin:14px 0 18px;line-height:.84}
#so [data-sview="done"] .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:auto}
#so [data-sview="done"] .st b{display:block;font-weight:800;font-stretch:72%;font-size:64px;line-height:.86}
#so [data-sview="done"] .st span{font-weight:700;font-size:14px}
#so .slab{margin:18px -22px calc(-1 * (var(--sab) + 18px));width:auto;--slab-ink:var(--c-stretch)}
#so[data-state="done"] .slab{--slab-ink:var(--done-ink)}
.sedit{list-style:none;margin:16px 0 8px;padding:0;display:grid;gap:8px}
.sedit li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:10px 12px;border-radius:18px;background:var(--surface-ink)}
.sedit .se-n b{display:block;font-weight:800;font-stretch:72%;text-transform:uppercase;font-size:20px;line-height:.95}
.sedit .se-n small{font-size:13px;color:var(--mute-ink);font-weight:600}
.sedit .se-mv{display:grid;gap:4px}
.sedit .se-mv .icon{width:40px;height:34px;border-radius:10px;background:var(--surface-ink)}
.sedit .stepper .icon{width:36px;height:36px}
.sedit .stepper input.sv-in{width:48px;font-size:24px}
@media (prefers-reduced-motion:reduce){#so .sart{transition:none}}

/* the colour flood is a growing clip circle on a full-screen layer, so nothing ever sits past the screen edge */
.flood{position:absolute;inset:0;border-radius:0;pointer-events:none}
input,textarea,select{font-size:max(16px,1em)}
.state-h{font-size:64px;margin:28px 0 0;line-height:.86}
.pad[data-state] .sub{font-size:17px;font-weight:600;line-height:1.35;margin:14px 0 0;max-width:30ch}
.skel{display:grid;gap:12px;margin-top:28px}
.skel i{display:block;height:52px;border-radius:14px;background:oklch(1 0 0 / .14);animation:skel 1.4s ease-in-out infinite}
.skel i:nth-child(2){animation-delay:.15s;width:86%}.skel i:nth-child(3){animation-delay:.3s;width:92%}.skel i:nth-child(4){animation-delay:.45s;width:70%}
@keyframes skel{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.skel i{animation:none}}

.rew-in{width:110px;border:0;background:transparent;text-align:center;font-weight:800;font-stretch:72%;font-size:56px;line-height:1;color:inherit;padding:0;border-radius:14px}
.rew-in:focus{outline:none;background:var(--surface-ink)}
.rest-mss{font-weight:800;font-stretch:72%;font-size:18px;color:var(--mute-ink);margin-left:6px;min-width:34px}
.offstep{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-size:14px;font-weight:600;color:var(--mute-ink)}
.offstep span{flex-basis:100%}
#so .sart{margin:0 -16px;min-height:200px}
#so .sart svg{max-height:360px}
.reprange .stepper.sm input.sv-in{width:50px}
.reprange .stepper.sm .icon{width:40px;height:40px}

/* design review fixes: stretch-mode controls and title, focus visibility on light surfaces, chip contrast on bright fields */
#so .sb{display:inline-flex;align-items:center;justify-content:center;padding:0 12px;text-align:center}
#so .sname{white-space:normal;font-size:60px;line-height:.86}
#so .sname .nm{overflow:visible}
#so .sart svg{max-height:400px}
.menu :focus-visible,.pop :focus-visible,.toast button:focus-visible,.slab:focus-visible,.sheet .choice:focus-visible{outline-color:var(--c-ink)}
#wo[data-state="done"] :focus-visible,#so[data-state="done"] :focus-visible{outline-color:var(--done-ink)}
.mu:focus-visible path{stroke:var(--white);stroke-width:3}
.stepper input.sv-in:focus-visible,.rew-in:focus-visible{outline:3px solid var(--white);outline-offset:2px}
#wo .sb,.page[data-tab="strength"] .dock .btn-s,.page[data-tab="stretch"] .dock .btn-s,#so .sb{background:oklch(1 0 0 / .13)}