/* ======================= VISUAL REBUILD 3 ======================= *//* ---- LIVE WORKOUT: protected zones ---- The room is three zones: the stage, the task (workspace and context) and the action (foot). The task and the action never give up space. The stage is the one flexible zone: it grows on a tall phone and gives way on a short one, so a longer coaching note pushes the picture smaller, never the information under the button. When even the smallest stage cannot make it fit, the room scrolls. */ body.pm-premium .sess:not(.resting) #sessWork:not(.hide){flex:1 1 auto;min-height:0} :root:not([data-theme="dark"]) body.pm-premium .sess:not(.resting) .sess-head{ display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);column-gap:10px; flex:1 1 236px;min-height:150px!important;max-height:260px} body.pm-premium .sess:not(.resting) .setstrip,body.pm-premium .sess:not(.resting) .sess-ws,body.pm-premium .sess:not(.resting) .sess-ctx{flex:none!important} body.pm-premium .sess:not(.resting) .sess-headtxt{grid-column:1;grid-row:1;max-width:none!important;align-self:start}/* the small figure owns the top right corner, beside the name, never under the bar */ body.pm-premium .sess:not(.resting) .sess-mini{position:relative!important;right:auto!important;top:auto!important;grid-column:2;grid-row:1;align-self:start;width:40px!important;height:auto!important;margin:-4px -4px 0 0!important} body.pm-premium .sess:not(.resting) .sess-mini .body-r,body.pm-premium .sess:not(.resting) .sess-mini svg{width:40px!important}/* the stage is its own row under the words: it can shrink, it cannot climb */ body.pm-premium .sess:not(.resting) .sess-stage{position:relative!important;left:auto;right:auto;bottom:auto;height:auto!important;grid-column:1 / span 2;grid-row:2;min-height:0;margin:6px 0 0;container-type:size;align-self:stretch;justify-self:stretch} body.pm-premium .sess:not(.resting) .sess-stage .loadvis{position:absolute!important;left:50%;right:auto;bottom:18%;transform:translateX(-50%);width:min(100%,330px,216cqh);height:auto!important;max-width:none} body.pm-premium .sess:not(.resting) .sess-stage.benched .loadvis{bottom:38%;width:min(100%,330px,205cqh)}/* "Today" over the first weight says what the set strip already says */ body.pm-premium .sess #sessWEye.quiet{display:none!important} body.pm-premium .sess:not(.resting) .sess-stage .loadvis svg{height:auto} body.pm-premium .sess:not(.resting) .sess-stage .wl-bench{max-height:70%;width:auto;max-width:46%} body.pm-premium .sess:not(.resting) .sess-stage>img,body.pm-premium .sess:not(.resting) .sess-stage .stg-obj{max-height:100%;max-width:58%;margin:0 auto;display:block}/* the video key sits in the stage's lower left, clear of the loaded bar */ body.pm-premium .sess:not(.resting) .sess-video{left:12px!important;bottom:12px!important}/* the context line wraps rather than hiding off the side */ body.pm-premium .sess .sess-ctx{flex-wrap:wrap!important;white-space:normal!important;gap:2px 16px!important;overflow:visible!important;min-height:0!important;margin-top:10px!important;padding:10px 0 4px!important} body.pm-premium .sess .sess-ctx .cx{white-space:nowrap}/* the context line now sits in the action zone, above the button */ body.pm-premium .sess>.sess-main>#sessCtx,body.pm-premium .sess>#sessCtx{flex:none!important;margin:0 0 8px!important;padding:10px 2px 0!important} body.pm-premium .sess:has(#sessWork.hide) #sessCtx,body.pm-premium .sess.resting #sessCtx{display:none!important}/* the foot's quiet second slot is sized to a text action, not a button */ body.pm-premium .sess .sess-foot{min-height:108px!important} body.pm-premium .sess .sess-foot .foot-gap{height:44px!important} /* short phones: every zone packs a little, none gives up its content */ @media (max-height:800px) and (max-width:899px){ body.pm-premium .sess .sess-body{padding-top:4px!important} :root:not([data-theme="dark"]) body.pm-premium .sess:not(.resting) .sess-head{min-height:136px!important;margin:4px 0 8px!important;padding:12px 16px 10px!important} :root:not([data-theme="dark"]) body.pm-premium .sess .sess-ws{padding:10px 12px!important;margin-top:0!important} :root:not([data-theme="dark"]) body.pm-premium .sess .wbig-step{min-height:70px!important} :root:not([data-theme="dark"]) body.pm-premium .sess .wbig{padding:2px 4px!important} body.pm-premium .sess #sessWStep .wsrow{margin-top:4px!important} } /* very short phones (SE and the like): the stage moves beside the name instead of under it, the loaded bar still shown, just smaller */ @media (max-height:700px) and (max-width:899px){ :root:not([data-theme="dark"]) body.pm-premium .sess:not(.resting) .sess-head{grid-template-columns:minmax(0,1fr) 44%;grid-template-rows:auto;flex:none;min-height:0!important;max-height:none;padding:10px 12px 10px 16px!important} body.pm-premium .sess:not(.resting) .sess-stage{grid-column:2;grid-row:1;margin:0;min-height:74px} body.pm-premium .sess:not(.resting) .sess-mini{display:none!important} body.pm-premium .sess:not(.resting) .sess-video{position:relative!important;left:auto!important;bottom:auto!important;margin-top:8px!important;display:inline-flex} body.pm-premium .sess:not(.resting) .sess-video.hide{display:none!important} body.pm-premium .sess .sess-head::after{display:none} }/* narrow phones: the video key folds to its round thumb so the bar has the stage *//* the video key is the round thumb with its play mark, so the bar owns the stage */ body.pm-premium .sess:not(.resting) .sess-video>span:not(.sv-th){display:none} body.pm-premium .sess:not(.resting) .sess-video{padding:5px!important;border-radius:50%!important}/* SEE THE MOVE. A lift with a demonstration clip gets a poster of it where the stage would otherwise sit empty: the real first frame in a ceramic-edged tile, the play mark on it, nothing else. Tapping opens the auxe sheet below. A lift with no clip gets no control at all, never a promise. */ body.pm-premium .sess:not(.resting) .sess-video.has-clip{left:8%!important;bottom:34px!important;width:min(54%,236px);padding:0!important;border-radius:18px!important; background:var(--vr-slab)!important;box-shadow:var(--vr-edge),var(--vr-lift)!important;overflow:visible} .sess-video.has-clip .sv-poster,body.pm-premium .sess:not(.resting) .sess-video.has-clip>.sv-poster{position:relative;display:block!important;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#E9E8E5;box-shadow:0 0 0 1px rgba(255,255,255,.85) inset} .sess-video.has-clip .sv-poster img{display:block;width:100%;height:100%;object-fit:cover;filter:none} .sess-video.has-clip .sv-play{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:var(--charcoal,#151617);box-shadow:0 6px 14px -4px rgba(30,31,33,.55),0 0 0 2px rgba(255,255,255,.9)} .sess-video.has-clip .sv-play::after{content:"";position:absolute;left:13px;top:10px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent} .sess-video.has-clip .sv-label{display:none} .sess-video.has-clip:active{transform:translateY(1px) scale(.985)} .sess-head:has(.sess-video.has-clip:not(.hide)) .sess-stage,body.pm-premium .sess .sess-head:has(.sess-video.has-clip:not(.hide)) .sess-stage{display:none!important}/* Dark builds the header without the stage card, so the tile takes its place in the flow under the set line */ :root[data-theme="dark"] body.pm-premium .sess:not(.resting) .sess-video.has-clip{position:relative!important;left:auto!important;bottom:auto!important;margin:14px 0 0!important;width:min(60%,236px);z-index:3} /* short phones fold the header into two columns, the name left and the stage right; the tile takes the stage's column there */ @media (max-height:700px) and (max-width:899px){ :root:not([data-theme="dark"]) body.pm-premium .sess:not(.resting) .sess-video.has-clip{position:absolute!important;left:auto!important;right:12px!important;top:10px!important;bottom:auto!important;width:42%!important;margin:0!important} :root:not([data-theme="dark"]) body.pm-premium .sess:not(.resting) .sess-head:has(.sess-video.has-clip:not(.hide)){min-height:100px!important} } @media (min-width:900px){ body.pm-premium .sess:not(.resting) .sess-video.has-clip{width:236px;margin-top:10px!important;flex-direction:column;align-items:flex-start} .sess-video.has-clip .sv-label,body.pm-premium .sess:not(.resting) .sess-video.has-clip>.sv-label{display:block!important;margin:8px 4px 2px;font-size:var(--ui-meta,14px);font-weight:700;color:var(--ink-2)} } .rf-sheet.xv{z-index:calc(var(--z-sheet) + 2)} .xv-title{font-size:22px;font-weight:800;letter-spacing:-.025em;color:var(--ink);margin:0 4px 12px} .xv-frame{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:#E9E8E5;box-shadow:var(--vr-well,inset 0 2px 5px rgba(30,31,33,.16))} .xv-frame video{display:block;width:100%;height:100%;object-fit:cover;background:#E9E8E5} .xv-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:none;background:var(--charcoal,#151617);box-shadow:0 10px 24px -8px rgba(30,31,33,.6),0 0 0 3px rgba(255,255,255,.9);cursor:pointer} .xv-play::after{content:"";position:absolute;left:26px;top:20px;border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent} .xv-play.hide{display:none} .xv-note{margin:14px 4px 16px;font-size:14.5px;line-height:1.45;color:var(--ink-2)} .xv-done{margin:0} body.pm-premium .door.xv-door .xv-th{position:relative;flex:none;width:72px;height:44px;border-radius:12px;overflow:hidden;background:#E9E8E5;box-shadow:0 0 0 1px rgba(255,255,255,.85) inset} body.pm-premium .door.xv-door .xv-th img{display:block;width:100%;height:100%;object-fit:cover} body.pm-premium .door.xv-door .xv-th i{position:absolute;right:5px;bottom:5px;width:18px;height:18px;border-radius:50%;background:var(--charcoal,#151617);box-shadow:0 0 0 2px rgba(255,255,255,.9)} body.pm-premium .door.xv-door .xv-th i::after{content:"";position:absolute;left:7px;top:5px;border-left:6px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent} :root[data-theme="dark"] .xv-frame,:root[data-theme="dark"] .xv-frame video,:root[data-theme="dark"] .sess-video.has-clip .sv-poster,:root[data-theme="dark"] body.pm-premium .door.xv-door .xv-th{background:#1E1F21} @media (prefers-reduced-motion:reduce){ .sess-video.has-clip:active{transform:none} } @media (max-width:380px){ body.pm-premium .sess:not(.resting) .sess-stage.benched .loadvis{width:min(100%,300px,230cqh);bottom:34%} }/* objects that are not a loaded bar (a stack, a pair of bells) are sized by the stage's height, so they can never climb into the words above */ body.pm-premium .sess:not(.resting) .sess-stage .loadvis:not(:has(.lr-bar)){top:0!important;bottom:0!important;left:0!important;right:0!important;transform:none!important;width:auto!important;display:flex;align-items:flex-end;justify-content:center} body.pm-premium .sess:not(.resting) .sess-stage .loadvis:not(:has(.lr-bar)) .lr{height:100%!important;width:100%!important;display:flex;align-items:flex-end;justify-content:center;position:relative} body.pm-premium .sess:not(.resting) .sess-stage .loadvis .lr-obj{height:100%!important;max-height:100%!important;width:auto!important;max-width:60%!important;object-fit:contain;position:static!important;transform:none!important} body.pm-premium .sess:not(.resting) .sess-stage.benched .loadvis:not(:has(.lr-bar)) .lr-obj{height:58%!important;margin-bottom:22%} body.pm-premium .sess:not(.resting) .sess-stage .loadvis .lr-pair .lr-obj{max-width:36%!important}/* reps: the two quiet text actions share one line under the key row */ body.pm-premium .sess #sessRepsBox:not(.hide){display:flex;flex-wrap:wrap;justify-content:center;column-gap:18px} body.pm-premium .sess #sessRepsBox>*{flex:1 1 100%} body.pm-premium .sess #sessRepsBox>#sessTrio{order:4} body.pm-premium .sess #sessRepsBox>#sessAnother{order:5;flex:0 0 auto;margin-top:10px!important} body.pm-premium .sess #sessRepsBox>#sessMoreT{order:6;flex:0 0 auto;margin-top:10px!important} body.pm-premium .sess #sessRepsBox>#sessRare{order:7} body.pm-premium .sess #sessRepsBox>#sessAnother:not([style*="none"]),body.pm-premium .sess #sessRepsBox>#sessMoreT:not([style*="none"]){width:auto!important;display:inline-flex!important;align-items:center;gap:6px} body.pm-premium .sess #sessRepsBox>#sessAnother[style*="none"],body.pm-premium .sess #sessRepsBox>#sessMoreT[style*="none"]{display:none!important} :root:not([data-theme="dark"]) body.pm-premium .sess .trio button span{white-space:nowrap} @media (max-width:380px){ :root:not([data-theme="dark"]) body.pm-premium .sess .trio{gap:6px!important} :root:not([data-theme="dark"]) body.pm-premium .sess .trio button{gap:4px;padding:8px 4px!important} :root:not([data-theme="dark"]) body.pm-premium .sess .trio button .fi{width:18px!important;height:18px!important} }/* entering reps: the stage folds to a name plate, like rest, so the keys own the room */ :root:not([data-theme="dark"]) body.pm-premium .sess:has(#sessRepsBox:not(.hide)) .sess-head{flex:none!important;min-height:0!important;max-height:none;grid-template-rows:auto!important;padding:14px 18px!important} body.pm-premium .sess:has(#sessRepsBox:not(.hide)) .sess-stage,body.pm-premium .sess:has(#sessRepsBox:not(.hide)) .sess-video,body.pm-premium .sess:has(#sessRepsBox:not(.hide)) .sess-head::after{display:none!important} body.pm-premium .sess:has(#sessRepsBox:not(.hide)) .sess-mini{width:32px!important} body.pm-premium .sess:has(#sessRepsBox:not(.hide)) .sess-mini svg,body.pm-premium .sess:has(#sessRepsBox:not(.hide)) .sess-mini .body-r{width:32px!important} body.pm-premium .sess #sessRepsBox>#sessMoreT{background:none!important;box-shadow:none!important;border:none!important;color:var(--ink-2)!important;font-size:14px!important;font-weight:700!important;padding:6px!important;min-height:0!important}/* ---- SEARCH: one carved control, not a box in a box ---- The field itself is the single surface; the input inside is bare text. Focus deepens the carve and rings it in graphite steel, never cyan. */ :root:not([data-theme="dark"]) body.pm-premium .sr-field{border:none!important;border-radius:20px!important;padding:0 8px 0 16px!important;min-height:56px;gap:10px!important; background:linear-gradient(180deg,#E9E8E5 0%,#F3F2EF 100%)!important;box-shadow:inset 0 3px 7px rgba(30,31,33,.16),inset 0 -1px 0 rgba(255,255,255,.95)!important;transition:box-shadow .2s var(--ease)} :root:not([data-theme="dark"]) body.pm-premium .sr-field:focus-within{box-shadow:inset 0 3px 8px rgba(30,31,33,.2),inset 0 -1px 0 rgba(255,255,255,.95),0 0 0 2px rgba(59,60,61,.55)!important} :root:not([data-theme="dark"]) body.pm-premium .sr-field input,:root:not([data-theme="dark"]) body.pm-premium .sr-field input:focus{background:none!important;box-shadow:none!important;border:none!important;border-radius:0!important;padding:16px 0!important; font-size:17px!important;font-weight:600!important;min-width:0;text-overflow:ellipsis} :root:not([data-theme="dark"]) body.pm-premium .sr-field svg{stroke:var(--ink-2)!important;width:21px!important;height:21px!important} body.pm-premium .sr-field input::placeholder{color:#6B7684!important;font-weight:600} @media (min-width:900px){:root:not([data-theme="dark"]) body.pm-premium .sr-field{min-height:68px;padding:0 14px 0 22px!important}:root:not([data-theme="dark"]) body.pm-premium .sr-field input,:root:not([data-theme="dark"]) body.pm-premium .sr-field input:focus{font-size:26px!important}}/* ---- WORKOUT LIST: one reading direction ---- Every row is the same: the equipment well on the left, the name, scheme, set marks, load and Swap in one column, the chevron on the right. Only the object inside the well turns, every other row, for a little life. */ body.pm-premium #progress #lifts .lift:nth-child(even) .lglyph .lg-obj,body.pm-premium #progress #lifts .lift:nth-child(even) .lglyph>img{transform:scaleX(-1)} body.pm-premium #progress #lifts .lift:nth-child(even) .lglyph{background-position:right center}/* week keys: every day's word shows whole. Keys share the width equally, and a longer word (Shoulders) takes a little more from the short ones instead of being cut to "Up..."; a week of long words scrolls, never truncates. */ body.pm-premium .wkstrip{overflow-x:auto;scrollbar-width:none} body.pm-premium .wkstrip::-webkit-scrollbar{display:none} body.pm-premium .wkstrip .wkday{flex:1 1 0!important;min-width:max-content!important;padding-left:4px!important;padding-right:4px!important} body.pm-premium .wkstrip .wkday b{overflow:visible!important;text-overflow:clip!important;padding:0!important;letter-spacing:-.01em;font-size:var(--ui-meta,14px)!important}/* ---- PROFILE: suggested is not saved ---- */ body.pm-premium .pf-state{font-size:15px;font-weight:600;color:var(--ink-2);line-height:1.4;margin:0 0 12px} body.pm-premium .pf-state.unset{color:var(--ink);font-weight:700} body.pm-premium .pf-state.unset::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px;border:1.5px dashed var(--ink-3)} body.pm-premium .pf-num.suggest .whl-band,body.pm-premium .pf-num.suggest .agc-band{background:transparent!important;border:1.5px dashed rgba(135,146,162,.45)!important;box-shadow:none!important} body.pm-premium .pf-num.suggest .whl-i.on,body.pm-premium .pf-num.suggest .agr-i.on{color:var(--ink-3)!important} body.pm-premium .pf-num.suggest .whl-i.on b,body.pm-premium .pf-num.suggest .agr-i.on{border:1.5px dashed rgba(135,146,162,.45)!important;background:transparent!important;box-shadow:none!important} body.pm-premium .pf-num.suggest .whl-i.on b{font-weight:600!important}/* ---- HELPER TEXT: readable and intentional, or gone ---- Labels that name a number are system labels: small caps, but dark enough to read. Tips that matter now are real text. Explanations live behind a key (Why 2:30? opens its reason). */ body.pm-premium #sessRest .rf-hint{font-size:14px!important;font-weight:600!important;color:var(--ink-2)!important} body.pm-premium #sessRest .rf-why{display:inline-flex!important;align-items:center;gap:7px;margin-top:8px!important;padding:7px 12px!important;border-radius:12px!important; background:var(--vr-key)!important;box-shadow:var(--vr-key-edge)!important;font-size:14px!important;font-weight:700!important;color:var(--ink-2)!important} body.pm-premium #sessRest .rf-why::before{content:"i";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%; border:1.5px solid currentColor;font-size:var(--ui-meta,14px);font-weight:800;font-style:italic;font-family:Georgia,serif;flex:none} body.pm-premium #sessRest .rf-moreb{font-size:14px!important;color:var(--ink-2)!important} body.pm-premium .mgrid label{font-size:var(--ui-meta,14px)!important;color:var(--ink-2)!important;letter-spacing:.08em!important} body.pm-premium .prbadge{font-size:var(--ui-meta,14px)!important;letter-spacing:.08em!important} body.pm-premium #wkHero .wh-n .wn span{font-size:var(--ui-meta,14px)!important;color:var(--ink-2)!important} body.pm-premium .pf-stats>div>div>div:last-child{font-size:var(--ui-meta,14px)!important;color:var(--ink-2)!important} body.pm-premium .replab{font-family:var(--sans)!important;font-size:15px!important;font-weight:700!important;letter-spacing:-.01em!important;text-transform:none!important;color:var(--ink)!important;margin:18px 2px 10px!important} body.pm-premium .startnote{font-size:14px!important;color:var(--ink-2)!important} body.pm-premium .tsum .row .k{font-size:14.5px!important;color:var(--ink-2)!important;font-weight:600!important} body.pm-premium .tsum .row .v{font-size:15px!important;color:var(--ink)!important;font-weight:700!important}/* ---- EQUIPMENT: objects you press ---- Each piece is a ceramic tile with its object. Off: raised, the object a little quiet. On: pressed into the slab, the object in full, a steel check on the corner. Only the one "where you train" choice is graphite. */ body.pm-premium #ctl-equip .eq-gh{display:flex;align-items:baseline;justify-content:space-between;margin:22px 2px 10px} body.pm-premium #ctl-equip .eq-gh span{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink)} body.pm-premium #ctl-equip .eq-gh em{font-style:normal;font-size:var(--ui-meta,14px);font-weight:700;color:var(--ink-2)} body.pm-premium #ctl-equip .eq-where .eq-gh{margin-top:4px} body.pm-premium #ctl-equip .opts[data-g="eqloc"]{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px!important;padding:5px;border-radius:16px;background:linear-gradient(180deg,#E8E7E4 0%,#F1F0ED 100%);box-shadow:var(--vr-well)} body.pm-premium #ctl-equip .opts[data-g="eqloc"] .opt{min-width:0;text-align:center;padding:11px 4px!important;font-size:var(--ui-meta,14px)!important;border-radius:12px!important;white-space:nowrap} :root:not([data-theme="dark"]) body.pm-premium #ctl-equip .opts[data-g="eqloc"] .opt:not(.sel){background:transparent!important;box-shadow:none!important;color:var(--ink-2)!important} body.pm-premium #ctl-equip .eq-avail{display:flex;align-items:baseline;justify-content:space-between;margin:26px 2px 10px;padding-top:18px;border-top:1px solid rgba(34,35,36,.08)} body.pm-premium #ctl-equip .eq-avail span{font-size:var(--ui-meta,14px);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)} body.pm-premium #ctl-equip .eq-avail em{font-style:normal;font-size:14px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums} body.pm-premium #ctl-equip .eq-q{width:100%;padding:13px 14px!important;font-size:16px!important;margin:0 0 4px} body.pm-premium #ctl-equip .eqtiles{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px!important} :root:not([data-theme="dark"]) body.pm-premium #ctl-equip .eqt{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-width:0;min-height:112px;padding:10px 6px 10px!important; border-radius:18px!important;border:none!important;background:var(--vr-key)!important;box-shadow:var(--vr-key-edge)!important;color:var(--ink-2)!important;cursor:pointer; transition:transform .12s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease)} :root:not([data-theme="dark"]) body.pm-premium #ctl-equip .eqt.sel{background:linear-gradient(180deg,#E4E3E0 0%,#EFEEEB 100%)!important;color:var(--ink)!important; box-shadow:inset 0 3px 8px rgba(30,31,33,.2),inset 0 -1px 0 rgba(255,255,255,.9),0 0 0 1.5px rgba(135,146,162,.55)!important} body.pm-premium #ctl-equip .eqt:active{transform:translateY(1px) scale(.985)} body.pm-premium #ctl-equip .eqt .eqo{flex:1;width:100%;display:flex;align-items:center;justify-content:center;min-height:56px;opacity:.5;filter:saturate(.6);transition:opacity .18s,filter .18s} body.pm-premium #ctl-equip .eqt.sel .eqo{opacity:1;filter:none} body.pm-premium #ctl-equip .eqt .eqo svg{width:64px;height:48px;overflow:visible} body.pm-premium #ctl-equip .eqt .eqo.wide svg,body.pm-premium #ctl-equip .eqt .eqo.wide img{width:92%;height:auto;max-height:30px} body.pm-premium #ctl-equip .eqt .eqo img{max-width:78%;max-height:56px;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(30,31,33,.22))} body.pm-premium #ctl-equip .eqt .eqn{font-size:var(--ui-meta,14px);font-weight:700;line-height:1.2;text-align:center;letter-spacing:-.005em} body.pm-premium #ctl-equip .eqt .eqk{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 1px 3px rgba(30,31,33,.25);background:rgba(34,35,36,.05)} body.pm-premium #ctl-equip .eqt.sel .eqk{background:linear-gradient(180deg,rgba(255,255,255,0.13),rgba(255,255,255,0.00)),linear-gradient(#A7CFF2,#A7CFF2);box-shadow:0 1px 2px rgba(30,31,33,.3)} body.pm-premium #ctl-equip .eqt.sel .eqk::after{content:"";position:absolute;left:6px;top:3.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} body.pm-premium #ctl-equip .eq-foot{display:flex;justify-content:center;gap:24px;margin:20px 0 4px} body.pm-premium #ctl-equip .eq-link{background:none;border:none;font:inherit;font-size:14.5px;font-weight:700;color:var(--vr-steel-deep,#8792A2);padding:8px;cursor:pointer} body.pm-premium #ctl-equip>.tgtline:first-child{display:none} @media (max-width:370px){body.pm-premium #ctl-equip .eqtiles{gap:8px!important}body.pm-premium #ctl-equip .eqt .eqn{font-size:var(--ui-meta,14px)}body.pm-premium #ctl-equip .opts[data-g="eqloc"] .opt{font-size:var(--ui-meta,14px)!important;padding:10px 2px!important}} @media (max-width:370px){body.pm-premium #ctl-equip .opts[data-g="eqloc"]{grid-template-columns:repeat(2,minmax(0,1fr))}body.pm-premium #ctl-equip .eqt .eqn{overflow-wrap:anywhere}} body.pm-premium #pfSheet .pfs-card{overflow-x:hidden}/* ============================ COACH ============================ auxe is the auxe form on a carved plinth. Idle: it breathes, a slow float and a slight turn. Reading: it turns steadily and the carved rings in the plinth ripple outward in shadow. Answered: it settles with a small drop. Material and motion only, no light. */ body.pm-premium #ask .adam-head{display:flex!important;flex-direction:column;align-items:center;gap:0;margin:0 0 6px!important;text-align:center} body.pm-premium #ask .adam-stage{position:relative;width:100%;height:210px;display:flex;align-items:flex-end;justify-content:center;margin-top:-6px} body.pm-premium #ask .adam-head .acore{position:relative;z-index:2;width:156px!important;height:156px!important;margin:0 0 34px!important;display:block!important;flex:none} body.pm-premium #ask .acore>span{display:none!important} body.pm-premium #ask .af-img{width:100%;height:100%;object-fit:contain;display:block;filter:saturate(.62) brightness(1.02);transform-origin:50% 60%} body.pm-premium #ask .adam-plinth{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:120px;height:14px;border-radius:50%; background:radial-gradient(closest-side,rgba(34,35,36,.16),rgba(34,35,36,0));box-shadow:none} body.pm-premium #ask .adam-plinth::after{display:none} body.pm-premium #ask .adam-plinth i{position:absolute;left:50%;top:50%;width:40%;height:40%;border-radius:50%;transform:translate(-50%,-50%);box-shadow:inset 0 1px 2px rgba(30,31,33,.14),0 1px 0 rgba(255,255,255,.9);opacity:0} body.pm-premium #ask .adam-id{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:10px} body.pm-premium #ask .adam-id h1{font-size:34px!important;font-weight:800!important;letter-spacing:-.03em!important} body.pm-premium #ask .adam-pres{margin:0!important;font-size:14px!important;font-weight:600!important;color:var(--ink-2)!important} @media (prefers-reduced-motion:no-preference){ body.pm-premium #ask .af-img{animation:adamIdle 7s ease-in-out infinite} body.pm-premium #ask .acore.think .af-img{animation:adamRead 2.4s linear infinite} body.pm-premium #ask .acore.think~.adam-plinth i{animation:adamRipple 2.1s ease-out infinite} body.pm-premium #ask .acore.think~.adam-plinth i:nth-child(2){animation-delay:.7s} body.pm-premium #ask .acore.think~.adam-plinth i:nth-child(3){animation-delay:1.4s} body.pm-premium #ask .acore.settle .af-img{animation:adamSettle .7s cubic-bezier(.2,.8,.2,1),adamIdle 7s ease-in-out .7s infinite} } @keyframes adamIdle{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}50%{transform:translateY(-5px) rotate(-3deg) scale(1.015)}} @keyframes adamRead{from{transform:translateY(-4px) rotate(0deg)}to{transform:translateY(-4px) rotate(360deg)}} @keyframes adamSettle{0%{transform:translateY(-10px) scale(1.03)}60%{transform:translateY(2px) scale(.99)}100%{transform:none}} @keyframes adamRipple{0%{opacity:.9;width:30%;height:30%}100%{opacity:0;width:100%;height:100%}}/* talking: the presence steps up into the header, the conversation owns the room */ body.pm-premium #ask.talking .adam-head{flex-direction:row;justify-content:flex-start;gap:12px;text-align:left;margin-bottom:10px!important} body.pm-premium #ask.talking .adam-stage{width:60px;height:60px;margin:0;flex:none} body.pm-premium #ask.talking .adam-head .acore{width:52px!important;height:52px!important;margin:0 0 6px!important} body.pm-premium #ask.talking .adam-plinth{width:58px;height:14px;box-shadow:inset 0 2px 4px rgba(30,31,33,.16),0 6px 10px -8px rgba(30,31,33,.45)} body.pm-premium #ask.talking .adam-id{align-items:flex-start;margin-top:0} body.pm-premium #ask.talking .adam-id h1{font-size:28px!important}/* the open state: one panel, the lead thing first, then plain readings */ body.pm-premium #ask .adam-now{margin:14px 0 16px;padding:18px 18px 8px;border-radius:24px;background:var(--vr-ceramic);box-shadow:var(--vr-edge),var(--vr-lift)} body.pm-premium #ask .an-lead{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-bottom:16px} body.pm-premium #ask .an-k{font-size:var(--ui-meta,14px);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--vr-steel-deep,#8792A2)} body.pm-premium #ask .an-lead.calm .an-k{color:var(--ink-2)} body.pm-premium #ask .an-t{font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--ink)} body.pm-premium #ask .an-ask{margin-top:8px;border:none;border-radius:14px;padding:11px 16px;font:inherit;font-size:14.5px;font-weight:800;color:var(--on-key,#fff);cursor:pointer;background:var(--vr-graphite);box-shadow:var(--vr-graphite-edge)} body.pm-premium #ask .an-reads{border-top:1px solid rgba(34,35,36,.08)} body.pm-premium #ask .an-r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid rgba(34,35,36,.06)} body.pm-premium #ask .an-r:last-child{border-bottom:none} body.pm-premium #ask .an-r span{font-size:14.5px;font-weight:600;color:var(--ink-2)} body.pm-premium #ask .an-r b{font-size:15px;font-weight:800;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums} body.pm-premium #ask .adam-earlier{display:block;margin:0 auto 10px;background:none;border:none;font:inherit;font-size:14.5px;font-weight:700;color:var(--vr-steel-deep,#8792A2);padding:8px;cursor:pointer} body.pm-premium #ask .adam-earlier.hide{display:none}/* prompts ride with the input: questions as ceramic keys, one scroll row */ body.pm-premium #ask #coachChips{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch;gap:8px!important;overflow-x:auto;scrollbar-width:none;margin:0 -16px 8px!important;padding:4px 16px 8px!important} body.pm-premium #ask #coachChips.hide{display:none!important} body.pm-premium #ask #coachChips::-webkit-scrollbar{display:none} :root:not([data-theme="dark"]) body.pm-premium #ask #coachChips .chipbtn{flex:0 0 auto;max-width:250px;display:flex!important;flex-direction:column;align-items:flex-start;gap:3px;padding:11px 14px!important;border-radius:16px!important;text-align:left; border:none!important;background:var(--vr-key)!important;box-shadow:var(--vr-key-edge)!important;white-space:normal} body.pm-premium #ask #coachChips .chipbtn b{font-size:14.5px!important;font-weight:700!important;color:var(--ink)!important;line-height:1.25} body.pm-premium #ask #coachChips .chipbtn span{font-size:var(--ui-meta,14px)!important;font-weight:600!important;color:var(--ink-2)!important} :root:not([data-theme="dark"]) body.pm-premium #ask .chatrow textarea{min-height:52px;padding:15px 16px!important;border-radius:18px!important;font-size:16px!important} :root:not([data-theme="dark"]) body.pm-premium #ask #chatSend{width:52px!important;height:52px!important;border-radius:16px!important;border:none!important;background:var(--vr-graphite)!important;box-shadow:var(--vr-graphite-edge)!important;color:var(--on-key,#fff)!important} body.pm-premium #ask #chatSend svg{stroke:#fff!important} @media (min-width:900px){body.pm-premium #ask .adam-stage{height:260px}body.pm-premium #ask .adam-head .acore{width:200px!important;height:200px!important;margin-bottom:40px!important}body.pm-premium #ask .adam-plinth{width:320px;height:70px} body.pm-premium #ask.talking .adam-stage{width:60px;height:60px}body.pm-premium #ask.talking .adam-head .acore{width:52px!important;height:52px!important;margin:0 0 6px!important}body.pm-premium #ask.talking .adam-plinth{width:58px;height:14px}} body.pm-premium #ask .chatdock #coachChips{margin:0 -16px 6px!important} @media (max-height:800px) and (max-width:899px){ body.pm-premium #ask .adam-stage{height:160px} body.pm-premium #ask .adam-head .acore{width:118px!important;height:118px!important;margin-bottom:26px!important} body.pm-premium #ask .adam-plinth{width:200px;height:46px} body.pm-premium #ask .adam-id h1{font-size:30px!important} body.pm-premium #ask .an-t{font-size:17.5px} }/* ============================ NUTRITION ============================ */ body.pm-premium #eatSub{display:none!important}/* the instrument: calories the outer channel, protein, carbs and fat the three inside it, one carved dial, one steel family, readings beneath */ :root:not([data-theme="dark"]) body.pm-premium #fuelCard{padding:18px 16px 16px!important;border-radius:28px!important;background:var(--vr-ceramic)!important;box-shadow:var(--vr-edge),var(--vr-lift)!important} body.pm-premium .fuel-inst{width:min(100%,300px)!important;margin:2px auto 0!important} body.pm-premium .fuel-inst .rt{fill:none!important;stroke:#D6DDE5!important;stroke-linecap:round;filter:drop-shadow(0 1.5px 0 rgba(255,255,255,.95))} body.pm-premium .fuel-inst .ra{fill:none!important;stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease)} body.pm-premium .fuel-inst .ra.fg-cal{stroke:url(#fgCal)!important} body.pm-premium .fuel-inst .ra.fg-pro{stroke:url(#fgPro)!important} body.pm-premium .fuel-inst .ra.fg-carb{stroke:url(#fgCarb)!important} body.pm-premium .fuel-inst .ra.fg-fat{stroke:url(#fgFat)!important} body.pm-premium .fuel-inst .ra.over{stroke:#323334!important} body.pm-premium .fuel-inst .fuel-c{top:47%!important;gap:0!important} body.pm-premium .fuel-inst .fuel-c b{font-size:clamp(32px,9.6vw,40px)!important} body.pm-premium .fuel-inst .fuel-c .tg{font-size:var(--ui-meta,14px)!important;color:var(--ink-2)!important;margin-top:2px} body.pm-premium #calLeft{margin-top:-6px!important;font-size:15px!important;font-weight:800!important;color:var(--ink)!important;text-align:center} body.pm-premium .fuel-reads{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px!important;margin-top:14px!important;padding:6px!important;border-radius:18px!important; background:linear-gradient(180deg,#E8E7E4 0%,#F1F0ED 100%)!important;box-shadow:inset 0 2px 6px rgba(30,31,33,.14),inset 0 -1px 0 rgba(255,255,255,.9)!important} body.pm-premium .fuel-reads .fch{display:flex!important;flex-direction:column;align-items:flex-start;gap:2px!important;padding:9px 10px!important;border-radius:13px;background:rgba(255,255,255,.55);min-width:0} body.pm-premium .fuel-reads .fch-key{width:22px;height:5px;border-radius:3px;margin-bottom:4px} body.pm-premium .fuel-reads .k-pro .fch-key{background:linear-gradient(90deg,rgba(28,29,30,0.24),rgba(28,29,30,0.10)),linear-gradient(#A7CFF2,#A7CFF2)} body.pm-premium .fuel-reads .k-carb .fch-key{background:linear-gradient(90deg,#8792A2,#8792A2)} body.pm-premium .fuel-reads .k-fat .fch-key{background:linear-gradient(90deg,#8792A2,#CDCECF)} body.pm-premium .fuel-reads .fch-n{font-size:var(--ui-meta,14px)!important;font-weight:700!important;color:var(--ink-2)!important} body.pm-premium .fuel-reads .fch-v{display:flex;flex-direction:column;min-width:0!important;text-align:left!important} body.pm-premium .fuel-reads .fch-v b{font-size:19px!important;font-weight:800!important;color:var(--ink)!important;font-variant-numeric:tabular-nums;letter-spacing:-.02em} body.pm-premium .fuel-reads .fch-v small{font-size:var(--ui-meta,14px)!important;font-weight:600!important;color:var(--ink-2)!important;white-space:nowrap} body.pm-premium #fuelCard .fuel-foot{margin-top:12px!important}/* FAST LOG: the camera first, a physical lens you press */ body.pm-premium #aiFoodSec .sec-head h2{font-size:20px!important} body.pm-premium #aiFoodSec .flog{display:flex;flex-direction:column;gap:10px} :root:not([data-theme="dark"]) body.pm-premium #fhPhoto.fh-photo{display:flex!important;flex-direction:row!important;align-items:center;justify-content:flex-start!important;gap:16px;min-height:96px!important;padding:14px 18px!important;border-radius:24px!important;border:none!important;text-align:left; background:var(--vr-graphite)!important;box-shadow:var(--vr-graphite-edge)!important;color:var(--on-key,#fff)!important;transition:transform .12s var(--ease)} body.pm-premium #fhPhoto.fh-photo:active{transform:translateY(2px) scale(.99)} body.pm-premium .fl-lens{position:relative;flex:none;width:66px;height:66px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8792A2 0%,#1F2021 70%);box-shadow:inset 0 2px 3px rgba(255,255,255,.18),inset 0 -3px 6px rgba(0,0,0,.5),0 0 0 4px #323334,0 0 0 5px rgba(255,255,255,.12)} body.pm-premium .fl-lens i{position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle at 38% 34%,rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.00) 30%,#161718 72%),linear-gradient(#A7CFF2,#A7CFF2);box-shadow:inset 0 0 0 2px rgba(0,0,0,.5)} body.pm-premium .fl-lens i::after{content:"";position:absolute;left:28%;top:22%;width:22%;height:16%;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(.5px)} body.pm-premium .fl-t{display:flex;flex-direction:column;gap:4px;min-width:0} body.pm-premium .fl-t b{font-size:19px;font-weight:800;letter-spacing:-.02em;color:#fff} body.pm-premium .fl-t span{font-size:14px;font-weight:600;line-height:1.35;color:rgba(255,255,255,.78)} body.pm-premium .flog-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} :root:not([data-theme="dark"]) body.pm-premium .flog-keys .fh{min-height:0!important;flex-direction:row!important;gap:8px!important;padding:14px 8px!important;border-radius:16px!important;border:none!important; background:var(--vr-key)!important;box-shadow:var(--vr-key-edge)!important;color:var(--ink)!important} body.pm-premium .flog-keys .fh svg{width:20px!important;height:20px!important;stroke:var(--ink)!important;fill:none;stroke-width:1.8;stroke-linecap:round} body.pm-premium .flog-keys .fh b{font-size:14.5px!important;font-weight:800!important;color:var(--ink)!important} body.pm-premium #aiFoodSec .aifrow{display:flex;gap:8px;margin-top:2px} body.pm-premium #aiFoodSec .aifrow input{flex:1;min-width:0;padding:14px 14px!important;font-size:16px!important} :root:not([data-theme="dark"]) body.pm-premium #aiFoodGo{border:none!important;border-radius:14px!important;background:var(--vr-key)!important;box-shadow:var(--vr-key-edge)!important;color:var(--ink)!important;font-weight:800!important;padding:0 16px!important} body.pm-premium #aiFoodNote:empty{display:none} body.pm-premium #aiFoodNote{font-size:14px!important;color:var(--ink-2)!important} body.pm-premium #foodStatus{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:10px 0;font-size:14px;line-height:1.4;scroll-margin-top:16px;scroll-margin-bottom:calc(112px + env(safe-area-inset-bottom))} body.pm-premium #foodStatus.hide{display:none!important} body.pm-premium #foodStatus #aiFoodNote{display:block!important;flex:1;min-width:160px} body.pm-premium #foodRetry{min-height:44px;color:var(--bp,#A7CFF2)!important} body.pm-premium #aiFoodSec .fhub{display:none!important}/* MEALS: the plate or the food leads, the details open on tap */ body.pm-premium #meals .mrow{display:block!important;padding:0!important;margin:0 0 10px!important;border-radius:20px;background:var(--vr-key);box-shadow:var(--vr-key-edge);overflow:hidden} body.pm-premium #meals .mr-main{display:flex;align-items:center;gap:14px;width:100%;padding:10px 14px 10px 10px;border:none;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer} body.pm-premium #meals .mph{flex:none;width:64px;height:64px;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#E9E8E5,#F3F2EF);box-shadow:inset 0 2px 5px rgba(30,31,33,.14)} body.pm-premium #meals .mph img{width:100%;height:100%;object-fit:cover} body.pm-premium #meals .mph .fi{width:88%!important;height:88%!important;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(30,31,33,.22))} body.pm-premium #meals .mph.photo{box-shadow:0 0 0 1px rgba(30,31,33,.1)} body.pm-premium #meals .xb{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} body.pm-premium #meals .xn{font-size:16px!important;font-weight:700!important;color:var(--ink)!important;line-height:1.25} body.pm-premium #meals .xm{font-size:14px!important;font-weight:700!important;color:var(--ink-2)!important} body.pm-premium #meals .mr-chev{flex:none;width:10px;height:10px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);margin-right:6px;transition:transform .2s var(--ease)} body.pm-premium #meals .mrow.open .mr-chev{transform:rotate(225deg)} body.pm-premium #meals .mdet{padding:0 14px 14px 88px} body.pm-premium #meals .md-m{display:flex;gap:16px} body.pm-premium #meals .md-m span{display:flex;flex-direction:column;font-size:var(--ui-meta,14px);font-weight:600;color:var(--ink-2)} body.pm-premium #meals .md-m b{font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums} body.pm-premium #meals .md-edit{margin-top:10px;background:none;border:none;padding:4px 0;font:inherit;font-size:14px;font-weight:700;color:var(--vr-steel-deep,#8792A2);cursor:pointer} body.pm-premium #meals .xhead{font-size:15px!important;font-weight:800!important;letter-spacing:-.01em!important;text-transform:none!important;color:var(--ink)!important;margin:16px 2px 10px!important;font-family:var(--sans)!important}/* HYDRATION: the bottle stays, the logging keys become real keys */ body.pm-premium #waterSec .wbtns{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;margin-top:14px!important} :root:not([data-theme="dark"]) body.pm-premium #waterSec .wbtns button{min-height:54px;padding:12px 10px!important;border-radius:16px!important;border:none!important;background:var(--vr-key)!important;box-shadow:var(--vr-key-edge)!important; font-size:16px!important;font-weight:800!important;color:var(--ink)!important;font-family:var(--vr-num,inherit)} :root:not([data-theme="dark"]) body.pm-premium #waterSec .wbtns button:first-child{background:var(--vr-graphite)!important;box-shadow:var(--vr-graphite-edge)!important;color:var(--on-key,#fff)!important} body.pm-premium #waterSec .wtag{font-size:14px!important;color:var(--ink-2)!important;font-weight:600!important} body.pm-premium #waterSec .wmore{margin-top:10px!important;background:none!important;border:none!important;font-size:14.5px!important;font-weight:700!important;color:var(--vr-steel-deep,#8792A2)!important;text-decoration:none!important;padding:6px 0!important} body.pm-premium #waterSec .wnum{font-size:15px}/* THE SCAN MOMENT */ .scanov{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(230,229,226,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .22s} .scanov.in{opacity:1} .sc-card{width:min(100%,420px);display:flex;flex-direction:column;align-items:center;gap:14px} .sc-frame{position:relative;width:100%;aspect-ratio:1/1;border-radius:28px;overflow:hidden;background:#1F2021;box-shadow:0 0 0 6px #F3F2EF,0 0 0 7px rgba(30,31,33,.12),0 30px 50px -24px rgba(30,31,33,.55)} .sc-frame img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9)} .sc-plane{position:absolute;left:0;right:0;top:0;height:28%;background:linear-gradient(180deg,rgba(179,180,181,0) 0%,rgba(135,146,162,.28) 82%,rgba(243,242,239,.85) 100%);border-bottom:2px solid rgba(243,242,239,.95)} @media (prefers-reduced-motion:no-preference){.scanov:not(.found) .sc-plane{animation:scSweep 1.6s cubic-bezier(.45,0,.55,1) infinite alternate}} .scanov.found .sc-plane{opacity:0;transition:opacity .2s} @keyframes scSweep{from{transform:translateY(-100%)}to{transform:translateY(357%)}} .sc-c{position:absolute;width:26px;height:26px;border:3px solid rgba(255,255,255,.92)} .sc-c.tl{left:14px;top:14px;border-right:none;border-bottom:none;border-radius:10px 0 0 0}.sc-c.tr{right:14px;top:14px;border-left:none;border-bottom:none;border-radius:0 10px 0 0} .sc-c.bl{left:14px;bottom:14px;border-right:none;border-top:none;border-radius:0 0 0 10px}.sc-c.br{right:14px;bottom:14px;border-left:none;border-top:none;border-radius:0 0 10px 0} .sc-regions{position:absolute;inset:0} .sc-r{position:absolute;border:2px solid rgba(255,255,255,.95);border-radius:14px;box-shadow:0 0 0 1px rgba(30,31,33,.35);opacity:0;transform:scale(.94);animation:scIn .3s var(--ease) forwards} .sc-r b{position:absolute;left:8px;top:-14px;padding:4px 9px;border-radius:9px;background:#F3F2EF;color:var(--t-ink,#16202B);font-size:var(--ui-meta,14px);font-weight:800;white-space:nowrap;box-shadow:0 4px 10px -4px rgba(30,31,33,.5);opacity:0;animation:scIn .25s var(--ease) forwards} @keyframes scIn{to{opacity:1;transform:none}} .sc-step{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--t-ink,#16202B)} .sc-dots{display:flex;gap:6px}.sc-dots i{width:22px;height:5px;border-radius:3px;background:rgba(34,35,36,.14);box-shadow:inset 0 1px 2px rgba(30,31,33,.2)}.sc-dots i.on{background:linear-gradient(90deg,rgba(255,255,255,0.00),rgba(255,255,255,0.13)),linear-gradient(#A7CFF2,#A7CFF2)} /* phones: the dial and its readings side by side, so the instrument stays the hero and the Fast Log still lands above the navigation */ @media (max-width:899px){ :root:not([data-theme="dark"]) body.pm-premium #fuelCard{display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"dial reads" "left reads" "foot foot" "est est";column-gap:12px;align-items:center;padding:16px 14px 14px!important} body.pm-premium #fuelCard .fuel-inst{grid-area:dial;width:100%!important;margin:0!important} body.pm-premium #fuelCard #calLeft{grid-area:left;margin-top:-4px!important;font-size:14px!important} body.pm-premium #fuelCard .fuel-reads{grid-area:reads;grid-template-columns:1fr!important;margin:0!important;gap:5px!important;align-self:stretch} body.pm-premium #fuelCard .fuel-reads .fch{display:grid!important;grid-template-columns:auto 1fr;grid-template-areas:"key key" "n n" "v v";padding:7px 10px!important} body.pm-premium #fuelCard .fuel-reads .fch-key{grid-area:key;margin-bottom:2px} body.pm-premium #fuelCard .fuel-reads .fch-n{grid-area:n} body.pm-premium #fuelCard .fuel-reads .fch-v{grid-area:v;flex-direction:row!important;align-items:baseline;gap:5px} body.pm-premium #fuelCard .fuel-reads .fch-v b{font-size:17px!important} body.pm-premium #fuelCard .fuel-foot{grid-area:foot;margin-top:10px!important} body.pm-premium #fuelCard .estnote{grid-area:est} body.pm-premium #fuelCard .fuel-inst .fuel-c b{font-size:clamp(24px,7.4vw,30px)!important} body.pm-premium #fuelCard .fuel-inst .fuel-c .tg{font-size:var(--ui-meta,14px)!important} body.pm-premium #eat>h1{margin-bottom:10px!important} :root:not([data-theme="dark"]) body.pm-premium #fhPhoto.fh-photo{min-height:80px!important;padding:10px 16px!important} body.pm-premium .fl-lens{width:56px;height:56px} body.pm-premium .fl-lens i{inset:12px} body.pm-premium .fl-t b{font-size:17.5px} body.pm-premium .fl-t span{font-size:var(--ui-meta,14px)} :root:not([data-theme="dark"]) body.pm-premium .flog-keys .fh{padding:12px 6px!important} body.pm-premium #aiFoodSec .sec-head{margin-bottom:8px!important} body.pm-premium #aiFoodSec{margin-top:16px!important} } body.pm-premium #aiFoodSec #aiFoodGo{min-height:50px;align-self:stretch} /* phones: the calories reading sits under the dial, never on a channel */ @media (max-width:899px){body.pm-premium #fuelCard .fuel-inst .fuel-c{position:static!important;flex-direction:row!important;justify-content:center;align-items:baseline;gap:6px!important;margin-top:6px}} body.pm-premium #fuelCard #calLeft{margin-top:6px!important}/* ============================ ONBOARDING SCALE ============================ The flow is unchanged. The objects become heroes: a big physical emblem, equipment that fills its well, the real body at its true height. */ body.pm-premium .onb-open .onb-em{width:min(62vw,236px)!important;height:min(62vw,236px)!important;margin:0 auto 6px!important} body.pm-premium .onb-open .onb-em img{filter:none!important;background:transparent!important;box-shadow:none!important;border:0!important;-webkit-mask:none!important} body.pm-premium .onb-open .onb-em{height:auto!important;aspect-ratio:1024/1164;background:transparent!important} body.pm-premium .onb-open .onb-word{font-size:15px!important;font-weight:800!important;letter-spacing:.42em!important;text-transform:uppercase;color:var(--ink)!important;margin:14px 0 6px!important;padding-left:.42em}/* where you train: the object owns the tile */ body.pm-premium .onb-where{gap:12px!important} :root:not([data-theme="dark"]) body.pm-premium .onb-opt.ow-tile{padding:8px 8px 14px!important;gap:10px!important} :root:not([data-theme="dark"]) body.pm-premium .ow-stage{height:156px!important;border-radius:18px!important;background:linear-gradient(180deg,#E1E0DD 0%,#EFEEEB 100%)!important;box-shadow:inset 0 3px 9px rgba(30,31,33,.18),inset 0 -1px 0 rgba(255,255,255,.9)!important} body.pm-premium .ow-obj{inset:6px 4px 16px!important} body.pm-premium .ow-obj img{filter:contrast(1.06) drop-shadow(0 14px 12px rgba(30,31,33,.34))!important} body.pm-premium .ow-floor{background:rgba(34,35,36,.34)!important;height:16px!important;bottom:14px!important} body.pm-premium .ow-gym .ow-bench{left:6%!important;width:88%!important;height:84%!important} body.pm-premium .ow-gym .ow-bar{top:2%!important;height:30%!important} body.pm-premium .ow-home .ow-db{width:74%!important;height:80%!important} body.pm-premium .ow-var .ow-kb{width:56%!important;height:98%!important;left:2%!important} body.pm-premium .ow-var .ow-band{width:54%!important;height:74%!important} body.pm-premium .ow-body .pushup{height:96%!important} body.pm-premium .ow-tile .oo-t{padding:0 6px} body.pm-premium .ow-tile .oo-t b{font-size:16.5px!important} body.pm-premium .ow-tile .oo-t small{font-size:var(--ui-meta,14px)!important;color:var(--ink-2)!important} body.pm-premium .onb-opt.ow-tile.on .ow-stage{box-shadow:inset 0 3px 10px rgba(0,0,0,.35)!important;background:linear-gradient(180deg,#444546 0%,#292A2B 100%)!important} @media (max-width:370px){:root:not([data-theme="dark"]) body.pm-premium .ow-stage{height:132px!important}}/* height: the real body, big, at its true scale */ body.pm-premium .onb-hfig{width:132px!important;height:272px!important} body.pm-premium .hfig-r{position:relative;display:block;width:100%;height:100%} body.pm-premium .hfig-r .hf-body{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:auto;max-width:none;object-fit:contain;filter:drop-shadow(0 16px 14px rgba(30,31,33,.28));transition:height .25s var(--ease)} body.pm-premium .hfig-r .hf-line{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed rgba(34,35,36,.28);margin-bottom:8px} body.pm-premium .hfig-r .hf-line em{position:absolute;right:0;top:-18px;font-style:normal;font-size:var(--ui-meta,14px);font-weight:800;color:var(--ink-2)} body.pm-premium .hfig-r .hf-floor{position:absolute;left:18%;right:18%;bottom:2px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(34,35,36,.3),rgba(34,35,36,0))} @media (max-width:370px){body.pm-premium .onb-hfig{width:112px!important;height:240px!important}} @media (min-width:900px){body.pm-premium #fuelCard .fuel-reads{max-width:none!important;width:100%!important}}