:root{
  --bg:#0b0a0f; --card:#15131c; --card2:#1d1a26; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --ink:#f7f3ec; --mut:#a9a2b6; --dim:#6f6880; --gold:#e8c77f; --gold2:#f5dca5; --green:#4ade80; --red:#ff6b6b; --blue:#60a5fa;
  --p:#f472b6; --c:#60a5fa; --f:#fbbf24;
  --serif:'Playfair Display',Georgia,serif; --sans:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --tabs:calc(64px + env(safe-area-inset-bottom)); --top:calc(54px + env(safe-area-inset-top));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.4}
body{min-height:100dvh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
a{color:var(--gold)}

/* top + tabs */
.top{position:fixed;top:0;left:0;right:0;z-index:30;height:var(--top);padding:env(safe-area-inset-top) 16px 0;display:flex;align-items:center;justify-content:space-between;background:rgba(11,10,15,.97);border-bottom:1px solid var(--line);transform:translateZ(0)}
.brand{display:flex;align-items:center;gap:9px}
.brand b{font-weight:800;letter-spacing:.14em;font-size:13.5px}
.brand i{font-style:normal;font-family:var(--serif);color:var(--gold);font-size:17px;letter-spacing:0;margin:0 .19em 0 -.19em}
.streak{display:flex;align-items:center;gap:5px;padding:5px 11px;border-radius:99px;background:rgba(232,199,127,.12);color:var(--gold2);font-weight:800;font-size:13px}
main{padding:calc(var(--top) + 12px) 16px calc(var(--tabs) + 90px);max-width:620px;margin:0 auto}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;height:var(--tabs);padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:1fr 1fr 76px 1fr 1fr;background:#0f0d15;border-top:1px solid var(--line);transform:translateZ(0)}
/* the bar is solid and runs past the bottom of the screen, so nothing ever shows under or below it (iPhone Safari's floating toolbar, bounce scrolling) */
.tabs::after{content:"";position:absolute;left:0;right:0;top:100%;height:240px;background:#0f0d15}
html{background:var(--bg)}html:has(body.ses-on),body.ses-on{overscroll-behavior-y:none}   /* the browser's own pull-to-refresh works everywhere except mid-workout */
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--dim);text-decoration:none;font-size:10.5px;font-weight:700}
.tabs a svg{width:22px;height:22px}
.tabs a.on{color:var(--gold)}
.fab{position:fixed;z-index:31;left:50%;bottom:calc(env(safe-area-inset-bottom) + 18px);transform:translateX(-50%);width:62px;height:62px;border-radius:50%;border:0;background:linear-gradient(145deg,var(--gold2),var(--gold) 60%,#c89b4a);color:#17120a;box-shadow:0 8px 24px rgba(232,199,127,.35),0 0 0 6px var(--bg);display:grid;place-items:center}
.fab svg{width:28px;height:28px}
.fab:active{transform:translateX(-50%) scale(.94)}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;margin:0 0 12px}
.card h3{margin:0;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:8px}
.card h3 small{font-weight:700;color:var(--mut);font-size:13px}
.lab{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.mut{color:var(--mut)} .dim{color:var(--dim)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 18px;border-radius:14px;border:0;background:var(--gold);color:#17120a;font-weight:800;font-size:15px}
.btn.ghost{background:rgba(255,255,255,.07);color:var(--ink);border:1px solid var(--line2)}
.btn.sm{height:36px;padding:0 13px;font-size:13.5px;border-radius:11px}
.btn.block{width:100%}
.btn:disabled{opacity:.5}
.btn svg{width:18px;height:18px}
.link{background:none;border:0;color:var(--gold);font-weight:700;padding:6px 0}
.row{display:flex;align-items:center;gap:10px}
.grow{flex:1;min-width:0}

/* day bar */
.daybar{display:flex;align-items:center;justify-content:space-between;margin:2px 0 12px}
.daybar b{font-size:17px;font-weight:800}
.daybar button{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center}
.daybar button svg{width:18px;height:18px}

/* the big ring */
.sum{display:flex;align-items:center;gap:16px}
.ring{position:relative;width:140px;height:140px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ring .in b{font-size:30px;font-weight:800;line-height:1}
.ring .in span{font-size:11.5px;color:var(--mut);font-weight:700;margin-top:3px}
.ring.over .in b{color:var(--red)}
.eq{flex:1;display:grid;gap:7px;font-size:13px}
.eq div{display:flex;justify-content:space-between;color:var(--mut)}
.eq div b{color:var(--ink)}
.macros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.mac{font-size:12px;font-weight:700;color:var(--mut)}
.mac b{display:block;font-size:14px;color:var(--ink)}
.mac em{font-style:normal;color:var(--red);font-size:11px}.mac.over .bar i{background:repeating-linear-gradient(45deg,var(--k),var(--k) 6px,var(--red) 6px,var(--red) 12px)}
.bar{height:7px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:5px}
.bar i{display:block;height:100%;border-radius:9px;background:var(--k,var(--gold));transition:width .5s}

/* coach nudge */
.nudge{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,rgba(232,199,127,.13),rgba(232,199,127,.04));border:1px solid rgba(232,199,127,.25);border-radius:18px;padding:13px 14px;margin:0 0 12px}
.nudge .av{flex:none;width:38px;height:38px;border-radius:50%;background:var(--gold);color:#17120a;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:20px}
.nudge p{margin:0;font-size:14px;line-height:1.45}
.nudge small{display:block;color:var(--gold);font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}

/* meals */
.meal .items{margin-top:8px}
.it{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);cursor:pointer}
.it:first-child{border-top:0}
.it .nm{flex:1;min-width:0}
.it .nm b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it .nm small{color:var(--mut);font-size:12.5px}
.it .kc{font-weight:800;font-size:14px}
.it-plus{width:30px;height:30px;border-radius:50%;border:0;background:rgba(232,199,127,.13);color:var(--gold);display:grid;place-items:center;flex:none;margin-left:2px;cursor:pointer}
.it-plus svg{width:16px;height:16px}.it-plus:active{transform:scale(.9);background:rgba(232,199,127,.3)}.it-plus:disabled{opacity:.5}
.add{margin-top:8px;width:100%;height:40px;border-radius:12px;border:1px dashed var(--line2);background:none;color:var(--gold);font-weight:800;font-size:14px}

/* water */
.cups{display:grid;grid-template-columns:repeat(min(var(--n,8),10),1fr);gap:6px;margin-top:10px}
.cup{width:100%;max-width:34px;height:38px;justify-self:center;border-radius:5px 5px 9px 9px;border:2px solid rgba(96,165,250,.45);position:relative;overflow:hidden;background:none;padding:0}
.cup.full::after{content:"";position:absolute;left:0;right:0;bottom:0;height:80%;background:linear-gradient(var(--blue),#3b82f6)}

/* sheets */
.sheet-bg{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.7)}
.sheet{position:fixed;z-index:51;left:0;right:0;bottom:0;max-height:94dvh;overflow:auto;background:#121019;border-radius:24px 24px 0 0;border-top:1px solid var(--line2);padding:10px 16px calc(20px + env(safe-area-inset-bottom));max-width:640px;margin:0 auto;animation:up .22s ease-out}
.sheet.full{top:0;max-height:none;height:100%;border-radius:0;border-top:0;padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:calc(40px + env(safe-area-inset-bottom))}
@keyframes up{from{transform:translateY(30px);opacity:0}}
.grab{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.2);margin:0 auto 10px}
.sh-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.sh-h h2{margin:0;font-size:20px;font-weight:800}
.x{width:38px;height:38px;border-radius:12px;border:0;background:rgba(255,255,255,.08);display:grid;place-items:center;flex:none}
.x svg{width:18px;height:18px}

/* the log box: talk, type, snap, scan */
.ask{display:flex;gap:8px;align-items:flex-end;background:var(--card2);border:1px solid var(--line2);border-radius:18px;padding:8px}
.ask textarea{flex:1;min-width:0;border:0;background:none;outline:0;resize:none;font-size:16px;padding:8px 6px;max-height:120px}
.ask .go{width:42px;height:42px;border-radius:13px;border:0;background:var(--gold);color:#17120a;display:grid;place-items:center;flex:none}
.ask .go svg{width:20px;height:20px}
.ask .go:disabled{opacity:.35}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 14px}
.tool{display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 6px;border-radius:16px;border:1px solid var(--line);background:var(--card);font-weight:800;font-size:12.5px}
.tool svg{width:26px;height:26px;color:var(--gold)}
.tool.rec{border-color:var(--red);color:var(--red)}
.tool.rec svg{color:var(--red);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.4}}
.search{display:flex;align-items:center;gap:8px;height:46px;padding:0 13px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.search svg{width:18px;height:18px;color:var(--mut);flex:none}
.search input{flex:1;min-width:0;border:0;background:none;outline:0;font-size:16px}
.mealpick{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 12px}
.mealpick button{flex:none;height:34px;padding:0 13px;border-radius:99px;border:1px solid var(--line2);background:none;font-weight:700;font-size:13px;color:var(--mut)}
.mealpick button.on{background:var(--gold);border-color:var(--gold);color:#17120a}
.res{list-style:none;margin:6px 0 0;padding:0}
.res li{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.res li img{width:40px;height:40px;border-radius:9px;object-fit:cover;background:#222;flex:none}
.res .nm{flex:1;min-width:0}
.res .nm b{display:block;font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res .nm small{color:var(--mut);font-size:12.5px}
.res .plus{width:34px;height:34px;border-radius:50%;border:0;background:rgba(232,199,127,.15);color:var(--gold);display:grid;place-items:center;flex:none}
.res .plus svg{width:18px;height:18px}
.res .plus{position:relative;cursor:pointer}.res .plus:active{transform:scale(.9)}
.res .plus.added{background:var(--gold);color:#14110c}
.res .plus em{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--green,#3ec98a);color:#08110c;font:800 11px/18px system-ui,sans-serif;font-style:normal;text-align:center}
.sec-t{margin:16px 0 4px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.empty{padding:22px 8px;text-align:center;color:var(--mut)}
.spin{height:22px;margin:18px auto}   /* loading: just a quiet blank space, no spinning circle */
@keyframes rot{to{transform:rotate(360deg)}}

/* food detail */
.fd-top{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.fd-top img{width:64px;height:64px;border-radius:14px;object-fit:cover}
.fd-top h2{margin:0;font-size:19px}
.amt{display:grid;grid-template-columns:110px 1fr;gap:8px;margin-bottom:12px}
.amt input,.amt select,.field input,.field select,.field textarea{height:48px;border-radius:13px;border:1px solid var(--line2);background:var(--card2);padding:0 12px;font-size:16px;width:100%;outline:0}
.field textarea{height:auto;padding:10px 12px}
.big4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 14px}
.big4 div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 4px;text-align:center}
.big4 b{display:block;font-size:19px}
.big4 span{font-size:11px;color:var(--mut);font-weight:700}
.nfacts{font-size:13px;color:var(--mut);display:grid;grid-template-columns:1fr auto;gap:4px 10px;margin:0 0 14px}

/* AI review */
.rv{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.rv input[type=checkbox]{width:22px;height:22px;accent-color:var(--gold);flex:none}
.rv{flex-wrap:wrap}
.rv .nm{flex:1;min-width:0;background:none;border:0;padding:4px 0;text-align:left;color:inherit;font:inherit;cursor:pointer}
.rv-pen{font-style:normal;color:var(--gold);font-size:13px;margin-left:4px;opacity:.8}
.rv.open{background:rgba(232,199,127,.05);border-radius:12px;padding:10px;margin:4px -10px}
.rv-ed{flex-basis:100%;padding-top:6px}
.rv-ed .field{margin-bottom:8px}
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.four input{min-width:0}
.rv .nm b{display:block}
.rv .nm small{color:var(--mut);font-size:12.5px}
.rv .q{display:flex;align-items:center;gap:4px}
.rv .q button{width:30px;height:30px;border-radius:9px;border:1px solid var(--line2);background:none;font-weight:800}
.rv .q span{min-width:34px;text-align:center;font-weight:800;font-size:13px}
.photo-prev{width:100%;max-height:220px;object-fit:cover;border-radius:16px;margin-bottom:10px}

/* scanner */
.scan{position:relative;border-radius:18px;overflow:hidden;background:#000;width:100%;height:min(62dvh,560px);margin:0 auto 12px}
.scan video{width:100%;height:100%;object-fit:cover}
.scan .frame{position:absolute;left:5%;right:5%;top:22%;bottom:22%;border:3px solid var(--gold);border-radius:16px;box-shadow:0 0 0 999px rgba(0,0,0,.28);transition:border-color .15s}
.scan .frame.hit{border-color:#3ddc84}
.scan .line{position:absolute;left:7%;right:7%;top:50%;height:2px;background:var(--red);box-shadow:0 0 10px var(--red);animation:sc 1.6s ease-in-out infinite}
.scan .torch{position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.5);color:#fff;font-size:20px;display:grid;place-items:center}
.scan .torch.on{background:var(--gold);color:#0b0a0f}
@keyframes sc{50%{transform:translateY(30px)}}

/* forms */
.field{margin:0 0 12px}
.field label{display:block;font-size:12.5px;font-weight:800;color:var(--mut);margin:0 0 6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg{display:flex;background:var(--card2);border:1px solid var(--line2);border-radius:13px;padding:3px;gap:3px}
.seg button{flex:1;height:40px;border:0;border-radius:10px;background:none;font-weight:800;font-size:13.5px;color:var(--mut)}
.seg button.on{background:var(--gold);color:#17120a}
.goalbox{text-align:center;padding:16px;border-radius:18px;background:linear-gradient(135deg,rgba(232,199,127,.16),rgba(232,199,127,.04));border:1px solid rgba(232,199,127,.3);margin:4px 0 14px}
.goalbox b{display:block;font-size:34px;font-weight:800}
.goalbox span{color:var(--mut);font-size:13px}

/* welcome */
.hello{text-align:center;padding:30px 6px 10px}
.hello img{width:96px;height:96px}
.hello h1{font-family:var(--serif);font-size:34px;margin:14px 0 6px;line-height:1.1}
.hello h1 i{color:var(--gold);font-style:normal}
.hello p{color:var(--mut);margin:0 0 18px}
.perks{display:grid;gap:10px;text-align:left;margin:0 0 22px}
.perks>div{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;font-weight:700}
.perks>div>div{flex:1;min-width:0}.perks>div>span{font-size:24px;width:30px;text-align:center;flex:none}
.perks small{margin-top:2px;line-height:1.35}
.perks small{display:block;font-weight:500;color:var(--mut)}

/* progress */
.chart{width:100%;height:180px;display:block}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.stats3 div{background:var(--card2);border-radius:14px;padding:10px;text-align:center}
.stats3 b{display:block;font-size:18px}
.stats3 span{font-size:11.5px;color:var(--mut);font-weight:700}

/* coach */
.ctabs{margin:0 0 12px}
.chat{display:flex;flex-direction:column;gap:10px;padding-bottom:10px}
.msg{max-width:86%;padding:11px 14px;border-radius:18px;font-size:14.5px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.msg.coach{align-self:flex-start;background:var(--card2);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg.me{align-self:flex-end;background:var(--gold);color:#17120a;border-bottom-right-radius:6px;font-weight:600}
.msg.typing{color:var(--mut)}
.chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:4px 0 10px}
.chips button{flex:none;height:34px;padding:0 13px;border-radius:99px;border:1px solid var(--line2);background:var(--card);font-weight:700;font-size:13px}
.coachbar{position:fixed;left:0;right:0;bottom:var(--tabs);z-index:29;padding:8px 12px;background:linear-gradient(transparent,var(--bg) 30%)}
.coachbar .ask{max-width:620px;margin:0 auto}
.wk{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.wk:first-child{border-top:0}
.wk .n{width:40px;height:40px;border-radius:12px;background:rgba(232,199,127,.12);color:var(--gold);display:grid;place-items:center;font-weight:800;flex:none}
.wk.done .n{background:var(--green);color:#06210f}
.exl{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.exl .th{width:58px;height:58px;border-radius:12px;background:linear-gradient(135deg,#2a2335,#17141f);display:grid;place-items:center;flex:none;position:relative;overflow:hidden}
.exl .th svg{width:24px;height:24px;color:var(--gold)}
.exl .th em{position:absolute;bottom:3px;left:3px;right:3px;font-style:normal;font-size:8px;font-weight:800;letter-spacing:.06em;text-align:center;color:var(--gold2)}
.excl{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#17120a;background:var(--gold);border-radius:6px;padding:2px 6px;margin-left:6px;vertical-align:middle}
.vid{width:100%;border-radius:16px;background:#000;aspect-ratio:16/9;margin-bottom:12px}
.vid-soon{aspect-ratio:16/9;border-radius:16px;margin-bottom:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:radial-gradient(circle at 50% 40%,rgba(232,199,127,.18),transparent 60%),#15121c;border:1px solid var(--line);text-align:center;color:var(--mut);font-size:13px}
.vid-soon b{color:var(--gold);font-family:var(--serif);font-size:20px}
.timer{font-size:54px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;margin:6px 0}

/* settings */
.set{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0;border-top:1px solid var(--line)}
.set:first-of-type{border-top:0}
.set b{font-weight:700}
.set small{display:block;color:var(--mut);font-size:12.5px}
.sw{position:relative;width:48px;height:28px;border-radius:99px;border:0;background:rgba(255,255,255,.15);flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .2s}
.sw[aria-pressed="true"]{background:var(--green)}
.sw[aria-pressed="true"]::after{left:23px}
.code{font-size:30px;font-weight:800;letter-spacing:.18em;text-align:center;padding:14px;border-radius:16px;background:var(--card2);margin:10px 0}

.toast{position:fixed;left:50%;bottom:calc(var(--tabs) + 86px);transform:translate(-50%,20px);z-index:60;opacity:0;pointer-events:none;background:#f7f3ec;color:#16121c;padding:11px 16px;border-radius:14px;font-weight:700;font-size:14px;max-width:calc(100% - 32px);box-shadow:0 10px 30px rgba(0,0,0,.4);transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast small{display:block;font-weight:500;color:#5b5466}
@media (min-width:700px){ main{padding-top:calc(var(--top) + 20px)} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }
/* workout music */
.sesm{display:flex;align-items:center;gap:10px;background:var(--card2);border:1px solid var(--line2);border-radius:14px;padding:10px 12px;margin-top:12px}
.sesm>span{font-size:20px}.sesm b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sesm small{display:block;color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sesm .btn.sm{padding:0 10px;min-width:0}.sesm .btn svg{width:18px;height:18px}
#spDock{position:fixed;left:10px;right:10px;bottom:calc(var(--tabs) + 8px);z-index:60;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:560px;margin:0 auto;height:80px;transition:transform .25s}
#spDock iframe{width:100%;height:80px;border:0;display:block}
#spDock .spx{position:absolute;top:4px;right:4px;z-index:2;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;padding:0}
#spDock .spx svg{width:13px;height:13px}
body:has(#spDock) #view{padding-bottom:110px}
body:has(#spDock) .sheet{padding-bottom:calc(var(--tabs) + 110px)}
/* coach looks */
.av.m{background:linear-gradient(145deg,#f5dca5,#e8c77f 60%,#c89b4a);color:#17120a}
.av.f{background:linear-gradient(145deg,#ffc7d6,#f08aa8 60%,#c85d7e);color:#2a0d17}
.av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:20px}
.av.big{width:72px;height:72px;font-size:36px}
.coachprev{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 0 14px}.coachprev b{font-size:18px}.coachprev span{color:var(--mut);font-size:13px}
.persona{width:100%;flex-direction:row!important;justify-content:flex-start;text-align:left;margin-bottom:8px}.persona b{font-size:15px}.persona .mut{font-weight:500}
.persona.on{border-color:var(--gold)!important;background:rgba(232,199,127,.08)}
/* wins */
.goals .gl{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px}
.goals .g{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--mut);text-align:center}
.goals .g span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:2px dashed var(--line2);font-size:18px;filter:grayscale(.6)}
.goals .g.ok{color:var(--ink)}.goals .g.ok span{border:0;background:var(--gold);color:#17120a;font-weight:900;filter:none;animation:pop .35s}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.medals{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.medal{border:1px solid var(--line);background:var(--card2);border-radius:14px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--dim);font-size:11px;font-weight:700;line-height:1.2}
.medal i{font-style:normal;font-size:26px;filter:grayscale(1);opacity:.35}
.medal.got{color:var(--ink);border-color:rgba(232,199,127,.4);background:linear-gradient(160deg,rgba(232,199,127,.16),rgba(232,199,127,.03))}.medal.got i{filter:none;opacity:1}
.tmedal{display:inline-block;font-size:22px;margin-right:6px;vertical-align:middle}
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:70}
.tabs a.dot{position:relative}.tabs a.dot::after{content:"";position:absolute;top:8px;left:calc(50% + 9px);width:8px;height:8px;border-radius:50%;background:var(--gold)}
/* videos + exercise picker */
.exl .th img{width:100%;height:100%;object-fit:cover}.exl .th .yt{color:#ff4e45;font-size:22px}
.clip{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:99px;border:1px solid var(--line2);background:var(--card);font-weight:700;font-size:13px;color:var(--ink);text-decoration:none}
.ytbox{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}.ytbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.actl{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.actl button{height:34px;padding:0 12px;border-radius:99px;border:1px solid var(--line2);background:var(--card);font-weight:700;font-size:13px}
.actl button.on{background:var(--gold);color:#17120a;border-color:var(--gold)}
.picked{font-size:14px;margin:0 0 8px;color:var(--gold)}
/* follow-along player */
.sheet.full:has(.pl){padding:0;background:#09080d}
.pl{display:flex;flex-direction:column;min-height:100dvh;padding:calc(8px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));max-width:640px;margin:0 auto}
.pl-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}.pl-top b{font-size:15px}
.pl-prog{height:5px;border-radius:9px;background:rgba(255,255,255,.08);margin-top:6px;overflow:hidden}.pl-prog i{display:block;height:100%;background:var(--gold);transition:width .4s}
.stage{position:relative;aspect-ratio:4/5;max-height:46dvh;width:100%;border-radius:20px;overflow:hidden;background:#000;border:1px solid var(--line)}
.stage-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;background:radial-gradient(circle at 50% 42%,rgba(232,199,127,.22),transparent 62%),#120f18}
.stage-ph b{font-family:var(--serif);font-size:26px;color:var(--gold);padding:0 16px;position:relative}.stage-ph span{color:var(--mut);font-size:13px;position:relative}.stage-ph em{position:absolute;bottom:14px;font-style:normal;font-size:11.5px;color:var(--dim)}
.ph-ring{position:absolute;width:56%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(232,199,127,.35);animation:ring 1s ease-out infinite}
@keyframes ring{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.stage.resting .stage-v{filter:brightness(.35) blur(2px)}
.ov-tl{position:absolute;top:10px;left:10px}.chip-s{background:rgba(0,0,0,.6);border:1px solid rgba(232,199,127,.5);color:var(--gold);font-weight:800;font-size:12px;letter-spacing:.08em;border-radius:99px;padding:5px 10px}
.ov-big{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(9,8,13,.55)}
.ov-big span{font-size:120px;font-weight:800;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}.ov-big small{color:var(--ink);font-weight:700;font-size:15px;margin-top:8px}
.bump{animation:bump .35s ease-out}@keyframes bump{0%{transform:scale(1.5);opacity:.4}100%{transform:scale(1);opacity:1}}
.pip{position:absolute;right:10px;bottom:10px;width:46%;border-radius:14px;overflow:hidden;border:2px solid var(--gold);background:#000;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.pip-v{position:relative;width:100%;aspect-ratio:1;object-fit:cover;display:flex}.pip .stage-ph b{font-size:15px}
.pip-l{padding:7px 9px;font-size:11px;color:var(--mut);background:#0f0d14}.pip-l b{display:block;color:var(--ink);font-size:13.5px}
.stage.resting .stage-ph b,.stage.resting .stage-ph span,.stage.resting .ph-ring{opacity:.25}
.pl-count{display:flex;flex-direction:column;align-items:center;margin-top:12px;position:relative}
.pl-count .big{font-size:72px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.pl-count small{color:var(--mut);font-size:13px;margin-top:4px}
.pl-count .dot{position:absolute;left:calc(50% - 90px);top:26px;width:16px;height:16px;border-radius:50%;background:var(--gold);opacity:.35}
.pl-count .dot.on{animation:beat .3s ease-out}@keyframes beat{0%{transform:scale(1.8);opacity:1}100%{transform:scale(1);opacity:.35}}
.pl-name{text-align:center;margin:6px 0 0;font-size:20px}
.pl-info{margin-top:12px}.pl-info h2{margin:0 0 4px}.pl-info p{margin:0;font-size:13.5px}
.pl-ctl{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:auto;padding-top:14px}
.pl-ctl .btn{width:56px;height:56px;border-radius:50%;padding:0;display:grid;place-items:center}.pl-ctl .btn svg{width:24px;height:24px}
.pl-ctl .pp{width:72px;height:72px}.pl-ctl .pp svg{width:30px;height:30px}
.coachrow{cursor:pointer}.inuse{font-size:12px;font-weight:800;color:var(--gold);border:1px solid rgba(232,199,127,.5);border-radius:99px;padding:5px 10px}
.topr{display:flex;align-items:center;gap:8px}
.mebtn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--mut);background:rgba(255,255,255,.06);border:1px solid var(--line)}
.mebtn svg{width:19px;height:19px}.mebtn.on{color:#17120a;background:var(--gold);border-color:var(--gold)}
/* buddies */
.palrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);cursor:pointer}.palrow:first-of-type{border-top:0}
.palrow b{display:block;font-size:14.5px}.palrow small{color:var(--mut);font-size:12.5px}.palrow .sc{font-weight:800;font-size:13px;color:var(--gold);min-width:28px;text-align:right}
.pals h3+.palrow{border-top:0}
.gdots{display:inline-flex;gap:3px}.gdots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12)}.gdots i.ok{background:var(--gold)}
.pdhead{display:flex;align-items:center;justify-content:space-between;font-weight:800;margin:4px 0 8px}
.pd{display:grid;grid-template-columns:26px 80px 1fr;align-items:start;gap:6px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.pd span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);font-weight:900;font-size:12px;color:var(--mut)}.pd span.ok{background:var(--gold);color:#17120a}
.pd em{font-style:normal;color:var(--mut);text-align:right}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.setlist{display:grid;gap:6px;margin:0 0 14px}.setlist div{display:flex;justify-content:space-between;font-size:14px;padding:8px 10px;border-radius:10px;background:var(--card2)}.setlist span{color:var(--mut)}
.wt{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}.wt span{font-size:12px;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.wt b{font-size:20px;min-width:80px;text-align:center;font-variant-numeric:tabular-nums}.wt button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:var(--card2);font-size:20px;font-weight:800;color:var(--ink)}
.sumg{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:6px 0 14px}.sumg div{background:var(--card2);border-radius:12px;padding:12px}.sumg b{display:block;font-size:22px}.sumg span{color:var(--mut);font-size:12.5px}
/* rest screen: the next move plays big, tinted, with a countdown ring */
.stage.resting .stage-v{filter:none}
.restov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14px 12px 16px;background:linear-gradient(180deg,rgba(14,22,48,.62),rgba(9,8,13,.38) 45%,rgba(9,8,13,.72));pointer-events:none}
#ses .ring{position:relative;width:118px;height:118px}#ses .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
#ses .ring circle{fill:none;stroke-width:6}#ses .ring .rbg{stroke:rgba(255,255,255,.22)}#ses .ring .rfg{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear}
#ses .ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.upnext{text-align:center;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}.upnext small{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
.upnext b{display:block;font-size:22px;margin:2px 0}.upnext span{font-size:13px;color:#e9e4f0}
.restword{font:800 52px/1 var(--sans);letter-spacing:.06em;color:var(--gold);text-shadow:0 4px 18px rgba(0,0,0,.5)}
.stage.resting .ov-tl{display:none}

/* ===================== WORKOUTS: black, gold, poster rails ===================== */
:root{--disp:'Anton',Impact,'Arial Narrow Bold',sans-serif}
.back{display:inline-flex;align-items:center;gap:4px;color:var(--mut);text-decoration:none;font-weight:700;font-size:14px;margin:0 0 10px}.back svg{width:18px;height:18px}
.kick{display:block;font:800 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--t,var(--gold))}
.whero{position:relative;margin:-12px -16px 6px;height:min(118vw,520px);overflow:hidden;background:#000;isolation:isolate}
.whero img{position:absolute;right:-22%;top:7%;height:96%;width:auto;filter:grayscale(1) contrast(1.35) brightness(1.1);mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 85%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 85%,transparent 100%)}
.whero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 75% at 72% 32%,var(--t),color-mix(in srgb,var(--t) 30%,#000) 55%,#000 85%)}
.whero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.75) 38%,transparent 70%),linear-gradient(0deg,var(--bg) 0%,transparent 35%)}
.wh-in{position:absolute;left:16px;right:16px;bottom:26px;z-index:2}
.whero h1{font:400 clamp(64px,22vw,112px)/.86 var(--disp);text-transform:uppercase;margin:10px 0 10px;letter-spacing:.01em;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.whero p{margin:0;color:#e9e4f0;font-size:14px;max-width:60%}
.whero .wh-m{color:var(--t);font-weight:800;font-size:12.5px;letter-spacing:.06em;margin-top:6px;text-transform:uppercase}
.wh-b{display:flex;gap:10px;margin-top:16px}
.wbtn{display:inline-flex;align-items:center;gap:7px;height:48px;padding:0 20px;border-radius:99px;border:0;background:var(--t,var(--gold));color:#0b0a0f;font-weight:800;font-size:15px;white-space:nowrap}
.wbtn svg{width:18px;height:18px}.wbtn.ghost{background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(8px)}
.wbtn:active{transform:scale(.97)}
.whmusic{position:absolute;top:14px;right:14px;z-index:3;padding:8px 13px;border-radius:99px;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);color:#fff;text-decoration:none;font-weight:700;font-size:13px;border:1px solid rgba(255,255,255,.15)}
.rail-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:22px 0 10px}
.rail-h h2{font:400 24px/1 var(--disp);text-transform:uppercase;letter-spacing:.02em;margin:0}
.rail-h span{color:var(--dim);font-size:12.5px;font-weight:700;white-space:nowrap}
.rail{display:flex;gap:10px;overflow-x:auto;margin:0 -16px;padding:0 16px 6px;scroll-snap-type:x mandatory;scroll-padding:16px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.poster{position:relative;flex:0 0 46%;max-width:200px;aspect-ratio:2/3;border-radius:14px;overflow:hidden;border:0;padding:0;text-align:left;color:#fff;background:var(--t);isolation:isolate;scroll-snap-align:start}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos);filter:grayscale(1) contrast(1.3);mix-blend-mode:multiply;z-index:-1}
.poster::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 25%,transparent 45%,rgba(0,0,0,.9) 100%)}
.poster .ptag{position:absolute;top:10px;left:10px;font:800 10.5px/1 var(--sans);letter-spacing:.16em;padding:5px 7px;border-radius:5px;background:rgba(0,0,0,.55)}
.poster .pdone{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#06210f;font-weight:900;font-size:14px}
.poster .pdone.lk{background:rgba(0,0,0,.55);font-size:12px}
.poster .pt{position:absolute;left:12px;right:10px;bottom:34px;font:400 clamp(30px,10vw,40px)/.9 var(--disp);text-transform:uppercase}
.poster .pt small{display:block;font:800 10.5px/1 var(--sans);letter-spacing:.24em;color:var(--t);margin-bottom:6px;filter:brightness(1.3)}
.poster .pm{position:absolute;left:12px;bottom:12px;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.75)}
.poster.lock{filter:saturate(.4)}.poster.lock img{opacity:.7}
.poster:active{transform:scale(.97)}
.planc{background:linear-gradient(135deg,#1d1a26,#120f18);border:1px solid var(--line2);border-radius:18px;padding:16px}
.planc>b{font:400 22px/1.05 var(--disp);text-transform:uppercase;display:block}
.planc p{color:var(--mut);font-size:13.5px;margin:6px 0 8px}
.planc.cta{display:flex;align-items:center;justify-content:space-between;gap:12px;background:radial-gradient(120% 140% at 100% 0%,rgba(232,199,127,.22),transparent 60%),#15131c}
.planc.cta b{font:400 21px/1.05 var(--disp);text-transform:uppercase;display:block;margin-top:6px}.planc.cta p{margin:4px 0 0}
#myVids{margin-top:22px}
.shero{position:relative;margin:-10px -16px 12px;height:170px;overflow:hidden;background:var(--t);isolation:isolate;border-radius:22px 22px 0 0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px 18px}
.shero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:grayscale(1) contrast(1.3);mix-blend-mode:multiply;z-index:-1}
.shero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 70%)}
.shero .kick{color:#fff;opacity:.85}.shero b{font:400 48px/.9 var(--disp);text-transform:uppercase;color:#fff;margin-top:6px}

/* ===================== KITCHEN: warm paper, editorial serif ===================== */
body[data-tab="kitchen"]{background:#f3ece0}
body[data-tab="kitchen"] .top{background:rgba(243,236,224,.88);border-bottom-color:rgba(60,40,20,.1);color:#2a1f14}
body[data-tab="kitchen"] .brand b{color:#2a1f14}body[data-tab="kitchen"] .brand i{color:#a8641f}
body[data-tab="kitchen"] .mebtn{background:rgba(60,40,20,.06);border-color:rgba(60,40,20,.12);color:#6b5a48}
body[data-tab="kitchen"] .fab{box-shadow:0 8px 24px rgba(168,100,31,.3),0 0 0 6px #f3ece0}
.kit{--ink2:#2a1f14;--mut2:#7a6a58;color:var(--ink2)}
.khero{margin:-12px -16px 0;padding:34px 18px 26px;background:radial-gradient(120% 90% at 100% 0%,#f7d9a8 0%,transparent 55%),radial-gradient(90% 80% at 0% 100%,#f1c3a6 0%,transparent 60%),#f6efe4;border-bottom:1px solid rgba(60,40,20,.08)}
.khero .kick{color:#a8641f}
.khero h1{font:700 clamp(40px,12vw,58px)/.98 var(--serif);margin:12px 0 10px;letter-spacing:-.02em}
.khero h1 i{color:#a8641f}
.khero p{margin:0 0 16px;color:var(--mut2);font-size:15px;max-width:34ch}
.kask{display:flex;gap:8px;background:#fff;border-radius:16px;padding:6px;box-shadow:0 10px 30px rgba(90,50,10,.12)}
.kask input{flex:1;min-width:0;border:0;outline:0;background:none;padding:0 10px;font-size:16px;color:var(--ink2)}
.kask input::placeholder{color:#b3a28e}
.kask button{height:46px;padding:0 20px;border-radius:12px;border:0;background:#2a1f14;color:#f6efe4;font-weight:800;font-size:15px}
.kask button:disabled{opacity:.6}
.kquick{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:12px -18px 0;padding:0 18px}
.kquick button{flex:none;height:34px;padding:0 13px;border-radius:99px;border:1px solid rgba(60,40,20,.18);background:rgba(255,255,255,.5);color:var(--ink2);font-weight:700;font-size:13px}
.krail-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:26px 0 10px}
.krail-h h2{font:700 25px/1.05 var(--serif);margin:0;letter-spacing:-.01em}
.krail-h span{color:var(--mut2);font-size:13px;font-style:italic;font-family:var(--serif)}
.krail{display:flex;gap:10px;overflow-x:auto;margin:0 -16px;padding:0 16px 8px;scroll-snap-type:x mandatory;scroll-padding:16px;scrollbar-width:none}
.krail::-webkit-scrollbar{display:none}
.rcard{flex:0 0 68%;max-width:260px;height:168px;scroll-snap-align:start;position:relative;border:0;border-radius:20px;padding:16px;text-align:left;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  background:radial-gradient(70% 90% at 100% 0%,color-mix(in srgb,var(--b) 85%,#fff) 0%,transparent 70%),linear-gradient(160deg,var(--b),var(--a) 75%);box-shadow:0 8px 22px rgba(60,30,10,.16)}
.rcard::before{content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;border:18px solid rgba(255,255,255,.12)}
.rcard b{font:700 21px/1.08 var(--serif);letter-spacing:-.01em;margin-top:auto}
.rc-m{position:absolute;top:14px;left:16px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.rc-n{font-size:12.5px;font-weight:600;margin-top:8px;opacity:.92;display:flex;align-items:center;gap:6px}.rc-n em{font-style:normal;font-weight:800}
.rc-n i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.rcard:active{transform:scale(.98)}
.kguides{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kguides button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:14px;border-radius:16px;border:1px solid rgba(60,40,20,.1);background:#fbf7f0;color:var(--ink2)}
.kguides span{font-size:24px;margin-bottom:6px}.kguides b{font:700 17px/1.1 var(--serif)}.kguides small{color:var(--mut2);font-size:12.5px}
.knote{color:var(--mut2);font-size:12px;margin:22px 0 0;text-align:center}
.rhero{position:relative;margin:-10px -16px 16px;padding:42px 18px 20px;border-radius:22px 22px 0 0;color:#fff;background:radial-gradient(70% 90% at 100% 0%,color-mix(in srgb,var(--b) 85%,#fff) 0%,transparent 70%),linear-gradient(160deg,var(--b),var(--a) 80%)}
.rhero .kick{color:#fff;opacity:.85}.rhero h2{font:700 30px/1.05 var(--serif);margin:10px 0 0}
.rhero .x{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.25);color:#fff}
.rmac{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;margin-bottom:10px}
.rmac div{background:var(--card2);border-radius:12px;padding:10px 4px;font-size:11.5px;color:var(--mut)}.rmac b{display:block;font-size:19px;color:var(--ink)}
.rsec{font:700 19px var(--serif);margin:16px 0 8px}
.ring-l,.gl{margin:0;padding-left:20px;display:grid;gap:7px}.ring-l li::marker,.gl li::marker{color:var(--gold)}
.rsteps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:12px}
.rsteps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start}
.rsteps li::before{content:counter(s);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#17120a;font-weight:800;font-size:13px}
.rlog{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.qty{display:flex;align-items:center;gap:4px;background:var(--card2);border-radius:13px;padding:4px}
.qty button{width:38px;height:40px;border:0;border-radius:10px;background:none;font-size:20px;font-weight:700}.qty span{min-width:28px;text-align:center;font-weight:800}
.btn.grow{flex:1}
.gl{gap:10px;margin-bottom:18px}
.sheet:has(.shero,.rhero)>.grab{position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:3;background:rgba(255,255,255,.5);margin:0}
/* programs → level → body area */
.poster.big{flex:0 0 72%;max-width:300px;aspect-ratio:4/5}
.poster.big .pt{font-size:clamp(34px,10.5vw,46px);bottom:38px;overflow-wrap:anywhere}
.phero{position:relative;margin:-12px -16px 0;height:min(92vw,400px);display:flex;align-items:flex-end;padding:0 16px 22px;overflow:hidden;background:var(--t);isolation:isolate}
.phero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos);filter:grayscale(1) contrast(1.3);mix-blend-mode:multiply;z-index:-1}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--bg) 0%,rgba(11,10,15,.6) 40%,transparent 75%)}
.phero .kick{color:#fff;opacity:.9}
.phero h1{font:400 clamp(56px,18vw,92px)/.88 var(--disp);text-transform:uppercase;margin:8px 0 8px;color:#fff}
.phero p{margin:0;color:#e9e4f0;font-size:14.5px;max-width:34ch}
.pback{position:absolute;top:14px;left:14px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);color:#fff}.pback svg{width:22px;height:22px}
.lvls{display:grid;gap:10px}
.lvc{display:flex;align-items:center;gap:14px;padding:18px 16px;border-radius:18px;text-decoration:none;color:var(--ink);background:linear-gradient(135deg,#1d1a26,#141119);border:1px solid var(--line2)}
.lvc:nth-child(3){border-color:rgba(232,199,127,.5);background:radial-gradient(120% 140% at 100% 0%,rgba(232,199,127,.18),transparent 60%),#15131c}
.lvc b{font:400 28px/1 var(--disp);text-transform:uppercase;letter-spacing:.02em;display:block}
.lvc small{color:var(--mut);font-size:13px;display:block;margin-top:4px}
.lvc em{font-style:normal;font-size:11px;font-weight:800;color:var(--gold);white-space:nowrap}
.lvc>svg{width:20px;height:20px;color:var(--dim);flex:none}
.bars{display:flex;align-items:flex-end;gap:3px;height:28px;flex:none}.bars i{width:6px;border-radius:2px;background:var(--gold)}.bars i:nth-child(1){height:40%}.bars i:nth-child(2){height:70%}.bars i:nth-child(3){height:100%}.bars i.off{background:var(--line2)}
.lvc:active{transform:scale(.98)}
.areas{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.poster.area{flex:none;max-width:none;width:100%;aspect-ratio:3/4}
.poster.area .pt{font-size:clamp(28px,9vw,38px)}

/* ===================== player: the video fills the whole screen, portrait or landscape ===================== */
.sheet.full:has(.pl){max-width:none;overflow:hidden;animation:none}
.pl{position:relative;height:100dvh;min-height:0;max-width:none;overflow:hidden;padding:0;background:#000;isolation:isolate}
.pl .stage{position:absolute;inset:0;z-index:0;aspect-ratio:auto;max-height:none;width:auto;border:0;border-radius:0}
.pl .stage-v{object-fit:cover;object-position:50% 50%}
.pl-top{position:relative;z-index:2;margin:0;padding:calc(10px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 28px max(14px,env(safe-area-inset-left));background:linear-gradient(180deg,rgba(0,0,0,.72),transparent)}
.pl-top b{text-shadow:0 1px 8px rgba(0,0,0,.6)}
.pl-top .x{background:rgba(0,0,0,.4);color:#fff;backdrop-filter:blur(8px)}
.pl .ov-tl{top:calc(74px + env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left))}
.pl-bot{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:60px max(14px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.6) 60%,transparent)}
.pl-bot .pl-ctl{margin-top:8px;padding-top:6px}
.pl-bot .pl-count{margin-top:0}.pl-bot .pl-count .big{font-size:80px;text-shadow:0 4px 24px rgba(0,0,0,.6)}
.pl-bot .pl-name{margin:2px 0 0;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.pl-bot .pl-info{margin:0}.pl-bot .pl-info p{color:#ddd}
.pl-bot .sesm{margin-top:10px}
.pl .restov{justify-content:center;gap:16px;padding:90px 16px 260px}
.pl .ov-big{background:rgba(0,0,0,.45);padding-bottom:160px}
.castbox{position:absolute;z-index:4;top:calc(64px + env(safe-area-inset-top));right:14px;left:14px;max-width:380px;margin-left:auto;background:rgba(18,16,25,.96);border:1px solid var(--line2);border-radius:18px;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.castbox>b{display:flex;align-items:center;gap:8px;font-size:16px}.castbox>b svg{width:22px;height:22px;color:var(--gold)}
.castbox p{font-size:14px;margin:8px 0 0}.castbox .btn{margin-top:12px}
@media (orientation:landscape) and (max-height:600px){
  .pl-top{padding-bottom:16px}
  .pl-bot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:20px;padding-top:40px}
  .pl-bot>*{grid-column:1}
  .pl-bot .pl-ctl{grid-column:2;grid-row:1 / span 4;margin:0;padding:0;align-self:end}
  .pl-bot .pl-count{align-items:flex-start}.pl-bot .pl-count .big{font-size:60px}.pl-bot .pl-count .dot{display:none}
  .pl-bot .pl-name{text-align:left;font-size:18px}
  .pl-bot .pl-info p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:60ch}
  .pl-bot .wt{justify-content:flex-start}.pl-bot #plDone{margin:4px 0 0!important}
  #sesMusic{display:none}
  .pl .restov{padding:60px 16px 110px;flex-direction:row;flex-wrap:wrap;gap:12px 28px}
  .pl .ring{width:96px;height:96px}.pl .restword{font-size:38px;width:100%;text-align:center}
  .pl .ov-big{padding-bottom:60px}.pl .ov-big span{font-size:96px}
  .pl .ov-tl{top:calc(56px + env(safe-area-inset-top))}
}
.pl .stage.resting .stage-ph>*{display:none}
.cardnext{margin:14px 0;padding:14px;border-radius:16px;background:radial-gradient(120% 140% at 100% 0%,rgba(255,79,163,.22),transparent 60%),#1a1420;border:1px solid rgba(255,79,163,.35)}
.cardnext b{display:block;font-size:16px}.cardnext span{display:block;color:var(--mut);font-size:13.5px;margin:4px 0 0}.cardnext .btn{margin-top:12px;background:#ff4fa3;color:#1a0710}
.cardnext.sm{padding:12px 14px}

/* ===== player v3: nothing covers the trainer. Upright: bar / video / panel. Sideways: video full, info on the edges ===== */
.pl{display:flex;flex-direction:column}
.pl .stage{position:relative;inset:auto;flex:1 1 auto;min-height:0}
.pl .stage-v{object-fit:cover;object-position:50% 40%}
.pl-top{flex:none;background:#000;padding-bottom:10px}
.pl .ov-tl{top:10px;left:10px}
.pl .chip-s{font-size:11px;padding:4px 9px}
.pl-bot{position:relative;flex:none;padding:12px max(14px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:#000}
.pl-bot .pl-count .big{font-size:64px;text-shadow:none}
.pl-bot .pl-name{font-size:19px;margin:0}
.pl-how{color:var(--mut);font-size:13px;text-align:center;margin:6px auto 0;max-width:46ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.restrow{display:flex;align-items:center;gap:14px}
.restrow .ring{width:86px;height:86px;flex:none}.restrow .ring span{font-size:30px}
.restrow .upnext{text-align:left;text-shadow:none}.restrow .upnext b{font-size:19px}
.restrow .btn{flex:none;display:inline-flex;align-items:center;gap:2px}.restrow .btn svg{width:16px;height:16px}
.pl-bot .pl-ctl{margin-top:10px;padding-top:0}
.pl-bot .pl-ctl .btn{width:50px;height:50px}.pl-bot .pl-ctl .pp{width:64px;height:64px}
.pl-bot .sesm{margin-top:10px}
@media (orientation:landscape) and (max-height:600px){
  .pl{display:block}
  .pl .stage{position:absolute;inset:0}
  .pl .stage-v{object-position:50% 50%}
  .pl-top{position:absolute;left:0;right:0;top:0;z-index:2;background:none;padding-bottom:0;display:flex;justify-content:space-between}
  .pl-top .grow{flex:0 1 26%;max-width:26%}.pl-top b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pl .ov-tl{top:auto;bottom:12px;left:50%;transform:translateX(-50%)}
  .pl-bot{position:absolute;inset:auto 0 0 0;z-index:2;background:none;display:block;padding:0;pointer-events:none}
  .pl-bot>*{pointer-events:auto;position:absolute;width:26%;left:max(14px,env(safe-area-inset-left))}
  .pl-bot .pl-count{bottom:96px;align-items:flex-start}.pl-bot .pl-count .big{font-size:56px;text-shadow:0 2px 14px rgba(0,0,0,.7)}
  .pl-bot .pl-name{bottom:62px;text-align:left;font-size:17px;text-shadow:0 2px 10px rgba(0,0,0,.7)}
  .pl-bot .pl-how{display:none}
  .pl-bot .restrow{bottom:20px;width:34%;flex-wrap:wrap;gap:8px 12px;background:rgba(0,0,0,.55);border-radius:16px;padding:10px;backdrop-filter:blur(8px)}
  .restrow .ring{width:68px;height:68px}.restrow .ring span{font-size:24px}.restrow .upnext{flex:1 1 0;min-width:0}.restrow .upnext b{font-size:16px}.restrow .btn{width:100%;justify-content:center}
  .pl-bot .pl-count small{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8)}
  .pl-bot .pl-ctl{left:auto;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:auto;margin:0;gap:10px}
  .pl-bot .wt{bottom:14px;justify-content:flex-start;margin:0}
  .pl-bot #plDone{left:auto!important;right:max(14px,env(safe-area-inset-right));bottom:84px;width:auto;margin:0!important}
  #sesMusic{display:none}
}
.abs-h{margin:16px 0 6px;color:var(--gold)}
.sugw{display:block;color:var(--gold);font-weight:700;font-size:12px;margin-top:2px}#plW small{display:block;font-size:10.5px;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.pl-meta{display:flex;justify-content:space-between;gap:8px;margin-top:5px;font-size:11.5px;font-weight:700;color:var(--mut)}#plLeft{color:var(--gold)}
.pl-top .pl-prog{height:7px}
.wkprog{margin:18px 0 0;padding:14px;border-radius:16px;background:#15131c;border:1px solid var(--line2)}
.wkp-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.wkp-t b{font:400 20px/1 var(--disp);text-transform:uppercase}.wkp-t span{color:var(--mut);font-size:13px;font-weight:700}
.wkprog p{margin:10px 0 0;font-weight:700;color:var(--gold)}
.wkbar{display:flex;gap:5px;margin-top:10px}.wkbar i{flex:1;height:10px;border-radius:5px;background:rgba(255,255,255,.1)}.wkbar i.on{background:var(--t,var(--gold));box-shadow:0 0 12px color-mix(in srgb,var(--t) 50%,transparent)}
.wkbar.sm{max-width:60%;margin-top:8px}.wkbar.sm i{height:6px}
@media (orientation:landscape) and (max-height:600px){.pl-meta{font-size:10.5px}}
.wsafe{font-size:12.5px;color:var(--mut);margin:12px 0 0;line-height:1.45}.wsafe b{color:var(--ink)}
.pl-secs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:8px}.pl-secs::-webkit-scrollbar{display:none}
.pl-secs button{flex:none;height:28px;padding:0 11px;border-radius:99px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#ddd;font-weight:700;font-size:12px}
.pl-secs button.on{background:var(--gold);border-color:var(--gold);color:#17120a}
.pl-bot .pl-ctl{gap:10px}.pl-bot .pl-ctl .btn{width:46px;height:46px}.pl-bot .pl-ctl .pp{width:62px;height:62px}
.pl-ctl .sk svg{width:26px;height:26px}
@media (orientation:landscape) and (max-height:600px){.pl-top .grow{flex-basis:34%;max-width:34%}.pl-bot .pl-ctl{gap:8px}.pl-bot .pl-ctl .btn{width:42px;height:42px}.pl-bot .pl-ctl .pp{width:54px;height:54px}}
.setleft{color:var(--gold)!important;font-weight:700;margin-top:2px!important}
/* exercise thumbnails */
.exl .th img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* recipe photo cards */
.krail-h.sub h2{font-size:19px}
.rcard.photo{background:#2a1f14;isolation:isolate}
.rcard.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.rcard.photo::before{content:"";position:absolute;inset:0;border:0;border-radius:0;width:auto;height:auto;right:0;top:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 35%,rgba(0,0,0,.85))}
.kit .spin{margin:30px auto}
.rhero.pic{min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;overflow:hidden}
.rhero.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.rhero.pic::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.8))}
/* steps + watch */
.stepc{display:flex;align-items:center;gap:12px}
.stepn{display:flex;align-items:baseline;gap:6px;margin-top:4px}.stepn b{font-size:26px;font-weight:800}.stepn span{color:var(--mut);font-size:13px}
.stepbar{height:7px;border-radius:9px;background:rgba(255,255,255,.08);margin-top:8px;overflow:hidden}.stepbar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#22c55e)}
.wbadge{font-size:13px}
/* the big + menu */
.addg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.addm{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 6px;border-radius:16px;border:1px solid var(--line2);background:var(--card2);color:var(--ink);text-align:center}
.addm span{font-size:26px;line-height:1.1}.addm b{font-size:14px;margin-top:4px}.addm small{font-size:11px;color:var(--mut);line-height:1.25}
.addm:active{transform:scale(.97)}
.bigr-cta{display:flex;align-items:center;gap:12px;width:100%;margin:12px 0;padding:14px;border-radius:16px;border:1px solid rgba(232,199,127,.45);text-align:left;color:var(--ink);background:radial-gradient(120% 160% at 100% 0%,rgba(232,199,127,.22),transparent 60%),#17141f}
.bigr-cta>span{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--gold);color:#17120a}.bigr-cta>span svg{width:20px;height:20px}
.bigr-cta b{display:block;font-size:15.5px}.bigr-cta small{display:block;color:var(--mut);font-size:12.5px;margin-top:2px}
.btn.wsgo{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;font-weight:800}.btn.wsgo svg{width:16px;height:16px}

/* Big R Radio station picker */
.mpicks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mpick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px;border-radius:14px;border:1px solid var(--line2);background:var(--card2);color:inherit;font:inherit;cursor:pointer;min-height:64px}
.mpick b{font-size:14.5px;line-height:1.2}.mpick small{color:var(--mut);font-size:12px}
.mpick.on{border-color:var(--gold,#e8c77f);box-shadow:inset 0 0 0 1px var(--gold,#e8c77f)}

/* start-from-here play button on each move */
.exl .exgo{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--gold,#e8c77f);color:#14110a;display:grid;place-items:center;cursor:pointer;margin-left:8px}
.exl .exgo svg{width:18px;height:18px;margin-left:2px}

/* trainer clip: two stacked players that hand off for a smooth loop */
.clip{overflow:hidden;background:#000}
.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:0}
.clip video.on{opacity:1}
.repn{color:var(--gold,#e8c77f)}

.exl .exgo{order:4}

.pl-tr{display:flex;flex-direction:column;gap:8px;align-items:center}
.pl .x.von{color:var(--gold,#e8c77f)}

/* ===== sideways HUD: the video fills the screen, timer and info sit in the corners like a TV workout,
   controls slide in when you tap and hide after a few seconds ===== */
@media (orientation:landscape) and (max-height:600px){
  .pl{--ht:calc(14px + env(safe-area-inset-top));--hl:max(16px,env(safe-area-inset-left));--hr:max(16px,env(safe-area-inset-right))}
  .pl.show{--ht:calc(76px + env(safe-area-inset-top))}
  .pl .stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 22%,transparent 70%,rgba(0,0,0,.7));opacity:0;transition:opacity .25s}
  .pl.show .stage::after{opacity:1}
  .pl-top{pointer-events:none;padding:calc(12px + env(safe-area-inset-top)) var(--hr) 0 var(--hl)}
  .pl-bot{inset:0}
  .pl-top .pl-prog{position:fixed;top:0;left:0;right:0;height:6px;margin:0;border-radius:0;background:rgba(0,0,0,.4);z-index:6}
  .pl-top .x,.pl-tr,.pl-top .grow>b,.pl-top .pl-meta,.pl-top .pl-secs{opacity:0;pointer-events:none;transition:opacity .25s}
  .pl.show .pl-top .x,.pl.show .pl-tr,.pl.show .pl-top .grow>b,.pl.show .pl-top .pl-meta,.pl.show .pl-top .pl-secs{opacity:1;pointer-events:auto}
  .pl-tr{flex-direction:row}
  .pl .ov-tl{top:var(--ht);bottom:auto;left:var(--hl);transform:none;transition:top .25s}
  .pl .chip-s{background:rgba(0,0,0,.6);backdrop-filter:blur(8px);font-size:13px;padding:6px 12px}
  .pl-bot .pl-name{top:calc(var(--ht) + 40px);bottom:auto;left:var(--hl);width:auto;max-width:34%;font-size:24px;text-align:left;transition:top .25s}
  .pl-bot .pl-count{top:var(--ht);bottom:auto;right:var(--hr);left:auto;width:auto;min-width:150px;align-items:center;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);border-radius:20px;padding:10px 18px 12px;transition:top .25s}
  .pl-bot .pl-count .big{font-size:68px;text-shadow:none}
  .pl-bot .pl-count small{text-align:center}
  .pl-bot .restrow{top:var(--ht);bottom:auto;right:var(--hr);left:auto;width:min(360px,42%);background:rgba(0,0,0,.65);transition:top .25s}
  .pl-bot .pl-ctl,.pl-bot .wt,.pl-bot #plDone{opacity:0;pointer-events:none;transition:opacity .25s}
  .pl.show .pl-bot .pl-ctl,.pl.show .pl-bot .wt,.pl.show .pl-bot #plDone{opacity:1;pointer-events:auto}
  .pl-bot .wt{left:var(--hl);bottom:max(14px,env(safe-area-inset-bottom))}
  .pl-bot #plDone{bottom:84px}
  .pl .castbox{z-index:7}
  body.ses-on #spDock{left:50%;right:auto;top:auto;bottom:max(14px,env(safe-area-inset-bottom));width:min(300px,30vw);transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .25s}
  body.ses-on.ses-show #spDock{opacity:1;pointer-events:auto}
}

/* ===== follow-along HUD (Big R style): name pill top-left, filling timer box top-right, workout bar down the right edge,
   rest = next move previews in a framed inset, 3·2·1 in a frosted square, intro title + workout format ===== */
.stage{--hs:clamp(.75,calc(100vmin / 520px),1.35)}
.pill{display:inline-block;background:#0b0a0f;color:#fff;font-family:Anton,'Plus Jakarta Sans',sans-serif;font-weight:400;letter-spacing:.03em;line-height:1.1;font-size:calc(19px * var(--hs));padding:calc(6px * var(--hs)) calc(12px * var(--hs));border-radius:9px;box-shadow:0 4px 18px rgba(0,0,0,.25);white-space:nowrap}
.pill.sm{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:calc(11.5px * var(--hs));letter-spacing:.12em;padding:calc(5px * var(--hs)) calc(10px * var(--hs));text-transform:uppercase}
.pill.xl{font-size:calc(52px * var(--hs));padding:calc(4px * var(--hs)) calc(16px * var(--hs));border-radius:12px}
.pill.gold{background:var(--gold,#e8c77f);color:#120e06}
.hud-name{position:absolute;z-index:3;top:14px;left:14px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:62%;transition:top .25s}
.hud-name .pill{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hud-name .pill:first-child{border-left:4px solid var(--gold,#e8c77f)}
.hud-sec{position:absolute;z-index:3;left:14px;bottom:14px}
.hud-sec .pill{display:inline-grid}.hud-sec .pill>span{grid-area:1/1}
.hud-sec .wb{animation:wbOut .4s 4.5s forwards}.hud-sec .wa{opacity:0;animation:wbIn .4s 4.9s forwards}
@keyframes wbOut{to{opacity:0}}@keyframes wbIn{to{opacity:1}}
.hud-box{position:absolute;z-index:3;top:14px;right:14px;width:calc(78px * var(--hs));height:calc(86px * var(--hs));border-radius:16px;background:#0b0a0f;border:3px solid #fff;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(0,0,0,.3);transition:top .25s}
.hud-box i{position:absolute;left:0;right:0;top:0;height:0;background:rgba(255,255,255,.34);transition:height .1s linear}
.hud-box.work i{background:rgba(232,199,127,.5)}
.hud-box b{position:relative;font-family:Anton,sans-serif;font-weight:400;font-size:calc(44px * var(--hs));line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.hud-box small{position:relative;font-size:calc(9.5px * var(--hs));font-weight:800;letter-spacing:.12em;color:#fff;margin-top:3px;white-space:nowrap}
.hud-box.last{background:var(--gold,#e8c77f);border-color:var(--gold,#e8c77f)}.hud-box.last i{background:rgba(0,0,0,.18)}.hud-box.last b,.hud-box.last small{color:#120e06}
.hud-bar{position:absolute;z-index:3;right:calc(14px + 39px * var(--hs) - 3px);top:calc(14px + 98px * var(--hs));bottom:16px;display:flex;flex-direction:column;align-items:center;gap:5px;transform:translateX(50%);transition:top .25s}
.hud-bar small{font-size:9px;font-weight:800;letter-spacing:.1em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);text-align:center;line-height:1.2}
.hb-t{flex:1;width:6px;border-radius:6px;background:rgba(255,255,255,.3);overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.hb-t i{display:block;width:100%;height:var(--p,0%);background:var(--gold,#e8c77f);transition:height .5s}
.stage.inset{background:radial-gradient(120% 90% at 50% 30%,#2a2216,#09080d)}
.stage.inset .stage-v{transform:scale(.84);border-radius:18px;box-shadow:0 0 0 3px #fff,0 18px 50px rgba(0,0,0,.55);transition:transform .35s ease}
.stage .stage-v{transition:transform .35s ease}
.hud-skip{position:absolute;z-index:4;right:calc(14px + 60px * var(--hs));bottom:16px;height:40px;padding:0 18px;border-radius:99px;border:0;background:var(--gold,#e8c77f);color:#120e06;font-weight:800;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:pointer}
.hud-count{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(170px * var(--hs));height:calc(170px * var(--hs));border-radius:34px;background:rgba(255,255,255,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.hud-count b{font-family:Anton,sans-serif;font-weight:400;font-size:calc(110px * var(--hs));line-height:1;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.35)}
.hud-count small{font-weight:800;font-size:12px;letter-spacing:.08em;color:#fff;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.5);max-width:90%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-count b.bump{animation:cbump .5s ease-out}@keyframes cbump{0%{transform:scale(1.35);opacity:.4}100%{transform:none;opacity:1}}
.hud-intro{position:absolute;inset:0;z-index:4}
.hi-t{position:absolute;left:16px;bottom:18px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;animation:hiT 3.5s forwards}
@keyframes hiT{0%{opacity:0;transform:translateY(14px)}12%{opacity:1;transform:none}88%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
.hi-f{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(14px * var(--hs));background:rgba(9,8,13,.72);opacity:0;animation:hiF .5s 3.5s forwards;padding:16px}
@keyframes hiF{to{opacity:1}}
.hi-h{font-family:Anton,sans-serif;font-weight:400;font-size:calc(30px * var(--hs));letter-spacing:.08em;color:#fff;text-transform:uppercase}.hi-h::before,.hi-h::after{content:' — ';color:var(--gold,#e8c77f)}
.hi-row{display:flex;align-items:center;gap:calc(28px * var(--hs));flex-wrap:wrap;justify-content:center}
.hi-n{display:flex;flex-direction:column;align-items:center;border:3px solid var(--gold,#e8c77f);border-radius:16px;padding:calc(8px * var(--hs)) calc(22px * var(--hs))}
.hi-n small{font-size:calc(11px * var(--hs));font-weight:800;letter-spacing:.12em;color:var(--gold,#e8c77f);text-transform:uppercase}
.hi-n b{font-family:Anton,sans-serif;font-weight:400;font-size:calc(64px * var(--hs));line-height:1.05;color:#fff}
.hi-row ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(6px * var(--hs))}
.hi-row li{font-family:Anton,sans-serif;font-size:calc(22px * var(--hs));letter-spacing:.04em;color:#fff;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.hi-row li::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--gold,#e8c77f)}
.hud-intro .hud-skip{right:16px}
.hud-done{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(9,8,13,.45);animation:hiF .4s forwards;opacity:0}
.pl.show .hud-name,.pl.show .hud-box{top:calc(76px + env(safe-area-inset-top))}
.pl.show .hud-bar{top:calc(76px + 98px * var(--hs) + env(safe-area-inset-top))}
@media (orientation:portrait){.stage{--hs:.8}.pl.show .hud-name,.pl.show .hud-box{top:14px}}
@media (orientation:landscape) and (max-height:600px){.pl.show .hud-sec,.pl.show .hud-skip{opacity:0;pointer-events:none}}
.hud-skip{right:auto;left:50%;transform:translateX(-50%)}
.hud-intro .hud-skip{left:auto;right:16px;transform:none}
.hud-count{left:26%}
@media (orientation:portrait){.hud-count{left:50%;top:58%}}

.sesm.only{justify-content:center;background:none;border:0;padding:0}

.hi-need{display:flex;flex-direction:column;align-items:center;gap:calc(8px * var(--hs));margin-top:calc(4px * var(--hs))}
.hi-need>small{font-size:calc(11px * var(--hs));font-weight:800;letter-spacing:.14em;color:var(--gold,#e8c77f);text-transform:uppercase}
.hi-need>div{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:90%}
.hi-need span{font-family:Anton,sans-serif;font-size:calc(17px * var(--hs));letter-spacing:.04em;text-transform:uppercase;color:#fff;border:2px solid rgba(232,199,127,.75);border-radius:10px;padding:calc(4px * var(--hs)) calc(12px * var(--hs))}

.hi-go{display:flex;align-items:center;gap:14px;margin-top:calc(6px * var(--hs));flex-wrap:wrap;justify-content:center}
.hi-btn{height:calc(44px * var(--hs));padding:0 22px;border-radius:99px;border:0;background:var(--gold,#e8c77f);color:#120e06;font-weight:800;font-size:calc(15px * var(--hs));cursor:pointer}
.hi-go small{font-weight:700;font-size:calc(13px * var(--hs));color:#fff;opacity:.8;font-variant-numeric:tabular-nums}

/* workout page: the format + what you need, before the move list */
.wfmt{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-items:center;background:var(--card2);border:1px solid var(--line2);border-radius:16px;padding:14px;margin:4px 0 14px}
.wf-n{display:flex;flex-direction:column;align-items:center;border:2px solid var(--gold);border-radius:12px;padding:6px 12px}
.wf-n b{font-family:Anton,sans-serif;font-weight:400;font-size:34px;line-height:1.05}.wf-n small{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--gold);text-transform:uppercase;white-space:nowrap}
.wfmt ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-weight:700;font-size:13.5px;min-width:0}
.wfmt li::before{content:'• ';color:var(--gold)}
.wf-need{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.wf-need small{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;margin-right:4px}
.wf-need span{font-size:12.5px;font-weight:700;border:1.5px solid var(--gold);border-radius:8px;padding:3px 9px}
.wt span small{display:block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:none;color:var(--mut)}

/* safety terms gate */
body.gated{overflow:hidden}
.gate{position:fixed;inset:0;z-index:300;background:rgba(6,5,9,.85);display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:calc(20px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.gate-c{width:100%;max-width:520px;background:var(--card);border:1px solid var(--line2);border-radius:22px;padding:22px 20px;display:flex;flex-direction:column;gap:12px;margin:auto 0}
.gate-c h2{margin:0;font-size:24px}
.gate-lead{margin:0;color:var(--mut);font-size:14.5px}
.gate-c ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.45}
.gate-c li b{color:var(--gold)}
.gate-ck{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.4;padding:12px;border-radius:14px;background:var(--card2);cursor:pointer}
.gate-ck input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--gold)}
#gateGo:disabled{opacity:.45}

.gate-c.sm{max-width:380px;gap:10px;padding:18px}
.gate-t{font-size:18px}.gate-c.sm p{margin:0;font-size:14px;line-height:1.5;color:var(--mut)}
.gate-f{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.gate-f .link{background:none;border:0;padding:0;font:inherit;cursor:pointer}

.hud-done{gap:10px;padding:16px;background:rgba(9,8,13,.72)}
.hd-next{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;margin-top:calc(10px * var(--hs));max-width:460px}
.hd-next b{font-family:Anton,sans-serif;font-weight:400;font-size:calc(24px * var(--hs));letter-spacing:.03em;text-transform:uppercase;color:#fff}
.hd-next span{color:#ddd;font-size:calc(14px * var(--hs))}
.hd-btns{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:calc(8px * var(--hs))}
.hd-sum{background:none;border:0;color:#fff;font-weight:700;font-size:calc(14px * var(--hs));text-decoration:underline;cursor:pointer}

.hud-done{background:rgba(9,8,13,.92)}
.pl.done .pl-top{display:none}

/* follow-along v2 (Christian Cruz flow, Big R look) */
.hi-gear{font-family:Anton,sans-serif;font-style:italic;font-weight:400;text-transform:uppercase;letter-spacing:.02em;color:var(--gold,#e8c77f);font-size:calc(30px * var(--hs));line-height:1.05;text-align:center;text-shadow:0 3px 18px rgba(0,0,0,.6);margin-top:calc(6px * var(--hs))}
.hi-sub{color:#fff;opacity:.85;font-weight:700;font-size:calc(13px * var(--hs));letter-spacing:.04em}
.hud-up{position:absolute;z-index:4;top:calc(8px * var(--hs));left:8%;right:22%;display:flex;align-items:center;gap:10px;min-width:0}
.hud-up b{font-family:Anton,sans-serif;font-style:italic;font-weight:400;font-size:calc(30px * var(--hs));color:#fff;letter-spacing:.01em;text-shadow:0 3px 14px rgba(0,0,0,.6);white-space:nowrap}
.hud-up i{font-style:normal;font-weight:900;color:var(--gold,#e8c77f);font-size:calc(22px * var(--hs));letter-spacing:-.1em}
.hud-up span{background:#fff;color:#0b0a0f;font-weight:800;font-size:calc(15px * var(--hs));letter-spacing:.04em;padding:calc(5px * var(--hs)) calc(12px * var(--hs));border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hud-name.up{display:none}
.stage.inset .stage-v{transform:scale(.8) translateY(4%);box-shadow:0 0 0 3px var(--gold,#e8c77f),0 0 28px rgba(232,199,127,.55),0 18px 50px rgba(0,0,0,.55)}
.stage.inset{background:radial-gradient(90% 70% at 50% 45%,#3a2c14,#0b0a0f 75%)}
.hud-bar>b{font-family:Anton,sans-serif;font-weight:400;font-size:15px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hb-t{position:relative;overflow:visible}
.hb-t i{border-radius:6px}
.hb-t em{position:absolute;top:var(--m);left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#0b0a0f;border:2px solid #fff}
.hb-t em span{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;color:#fff;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.8);text-transform:uppercase}
@media (orientation:portrait){.hud-up{left:5%;right:5%}.hud-up b{font-size:22px}}
@media (orientation:landscape) and (max-height:600px){.pl.show .hud-up{top:calc(76px + env(safe-area-inset-top))}}

/* iPhone: nothing from the page behind may show around the player (Safari's see-through toolbars) */
body.ses-on #view,body.ses-on .tabs,body.ses-on #fab,body.ses-on .top{visibility:hidden}
body.ses-on{background:#09080d;overflow:hidden}
.sheet.full:has(.pl){overscroll-behavior:none}

.qr{width:min(240px,70vw);margin:8px auto;background:#fff;border-radius:16px;padding:10px}.qr svg{display:block;width:100%;height:auto}
.qr{position:relative}.qr-r{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:22%;box-shadow:0 0 0 5px #fff}

/* intro screens switch by the clock, not by animation (works with Reduce Motion on) */
.hud-intro .hi-t{animation:none}.hud-intro .hi-f{animation:none;opacity:0;transition:opacity .4s}
.hud-intro.fmt .hi-t{display:none}.hud-intro.fmt .hi-f{opacity:1}

/* rest screen between sets: the gym, still and dimmed, a big countdown and what's next */
.stage.brk .stage-v{filter:blur(6px) brightness(.35);transform:scale(1.05)}
.rb{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(10px * var(--hs));padding:16px;text-align:center}
.rb-ring{position:relative;width:calc(150px * var(--hs));height:calc(150px * var(--hs))}
.rb-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.rb-ring .rbg{fill:none;stroke:rgba(255,255,255,.15);stroke-width:8}
.rb-ring .rfg{fill:none;stroke:var(--gold,#e8c77f);stroke-width:8;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .1s linear}
.rb-ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:Anton,sans-serif;font-weight:400;font-size:calc(64px * var(--hs));color:#fff}
.rb-next{display:flex;flex-direction:column;align-items:center;gap:2px}
.rb-next small{font-size:calc(11px * var(--hs));font-weight:800;letter-spacing:.16em;color:var(--gold,#e8c77f);text-transform:uppercase}
.rb-next b{font-family:Anton,sans-serif;font-weight:400;font-size:calc(28px * var(--hs));letter-spacing:.03em;color:#fff;text-transform:uppercase}
.rb-next span{color:#ddd;font-weight:700;font-size:calc(14px * var(--hs))}
.rb-tip{margin:0;max-width:420px;color:#fff;opacity:.85;font-size:calc(14px * var(--hs));font-style:italic}
.rb .hud-skip{position:static;transform:none;margin-top:calc(4px * var(--hs))}
@media (orientation:landscape) and (max-height:600px){.rb{flex-direction:row;flex-wrap:wrap;gap:12px 28px;padding:20px 80px}.rb>.pill{position:absolute;top:calc(14px + env(safe-area-inset-top));left:16px}.rb-tip{width:100%}}
@media (orientation:portrait){.rb-next b{font-size:24px}}
@media (orientation:landscape) and (max-height:600px){.rb{padding:20px 120px 20px 40px}.rb-tip{width:auto;flex-basis:100%}}

.stage.brk .rest-bg{filter:brightness(.42);transform:none;object-fit:cover;object-position:50% 40%}
.stage.brk .rb{background:linear-gradient(90deg,rgba(9,8,13,.55),rgba(9,8,13,.15) 50%,rgba(9,8,13,.55))}

/* one size the whole way: the video never shrinks or grows between screens. "Up next" gets a gold glow frame drawn on top instead */
.stage .stage-v,.stage.inset .stage-v{transform:none!important;border-radius:0;box-shadow:none;transition:none}
.stage.inset::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 4px var(--gold,#e8c77f),inset 0 0 40px rgba(232,199,127,.45)}
/* phone upright: show the whole move (our clips are wide), never crop the sides */
@media (orientation:portrait){
  .pl .clip video,.pl video.stage-v{object-fit:cover!important;object-position:var(--px,50%) 50%!important}
  .pl .clip.wide video{object-fit:contain!important}
  .pl .stage{background:#09080d}
}


.pill.bench{background:var(--gold,#e8c77f);color:#120e06;font-size:calc(13px * var(--hs));letter-spacing:.06em}
.stage.brk .rest-bg{filter:brightness(.6)}
.hud-name.up{display:flex;top:calc(8px * var(--hs) + 48px);left:8%}
.hud-name.up>.pill:first-child{display:none}
@media (orientation:portrait){.hud-name.up{left:5%;top:56px}}
.pl.show .hud-name.up{top:calc(76px + 48px + env(safe-area-inset-top))}

/* rest screen: everything centered in both directions, the trainer pushed into the background */
.stage.brk .rest-bg{filter:brightness(.38) blur(1.5px)!important}
.stage.brk video.rest-bg{transition:opacity .6s}
.stage.brk video.rest-bg.done{opacity:0}
.stage.brk .rb{background:radial-gradient(60% 75% at 50% 50%,rgba(9,8,13,.7),rgba(9,8,13,.35))}
@media (orientation:landscape) and (max-height:600px){
  .stage.brk .rb{flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;text-align:center;padding:16px 90px;gap:8px;width:auto;right:0}
  .stage.brk .rb>.pill{position:static}
  .stage.brk .rb-ring{width:112px;height:112px}.stage.brk .rb-ring b{font-size:48px}
  .stage.brk .rb-next{align-items:center}.stage.brk .rb-next b{font-size:24px}
}

/* after the demo: freeze it, dim it and put the rest circle on top */
.stage.frz .stage-v{filter:brightness(.38) blur(1.5px)}
.stage.frz .rb{background:radial-gradient(60% 75% at 50% 50%,rgba(9,8,13,.7),rgba(9,8,13,.35))}
@media (orientation:landscape) and (max-height:600px){
  .stage.frz .rb{flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;text-align:center;padding:16px 90px;gap:8px}
  .stage.frz .rb>.pill{position:static}
  .stage.frz .rb-ring{width:112px;height:112px}.stage.frz .rb-ring b{font-size:48px}
  .stage.frz .rb-next{align-items:center}.stage.frz .rb-next b{font-size:24px}
}

.stage.seg .rest-bg{filter:brightness(.5) blur(1px)!important;animation:segIn .5s ease-out}
@keyframes segIn{from{opacity:0}}
@media (orientation:landscape) and (max-height:600px){.pl-top .grow{margin-right:auto;flex-basis:30%;max-width:30%;text-align:left}.pl-top .pl-meta{justify-content:flex-start;gap:14px}}
@media (orientation:landscape) and (max-height:600px){.pl.show .hud-name{top:calc(100px + env(safe-area-inset-top))}}
.stage.seg::before{z-index:5}

/* gold outline over everything; it pulses with the countdown */
.pl{--edge:#e8c77f;--edgeg:rgba(232,199,127,.3)}
.pl .stage::before{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;box-shadow:inset 0 0 0 1.5px var(--edge),inset 0 0 12px var(--edgeg)}
.pl.e-tick .stage::before{animation:eTick .7s ease-out}
.pl.e-last .stage::before{animation:eLast .9s ease-out}
.pl.e-go .stage::before{animation:eGo 1.1s ease-out}
.pl.e-rest .stage::before{animation:eRest 1.4s ease-out}
@keyframes eTick{0%{box-shadow:inset 0 0 0 3px var(--edge),inset 0 0 30px var(--edgeg)}}
@keyframes eLast{0%{box-shadow:inset 0 0 0 4px var(--edge),inset 0 0 44px var(--edgeg)}}
@keyframes eGo{0%{box-shadow:inset 0 0 0 5px var(--edge),inset 0 0 60px var(--edgeg)}}
@keyframes eRest{0%{box-shadow:inset 0 0 0 2px rgba(232,199,127,.3),inset 0 0 10px rgba(232,199,127,.1)}}
/* upright: progress bar runs across the bottom */
@media (orientation:portrait){
  .pl .hud-bar,.pl.show .hud-bar{display:flex;flex-direction:row;top:auto;bottom:14px;left:16px;right:16px;transform:none;gap:10px}
  .pl .hb-t{flex:1;height:6px;width:auto}
  .pl .hb-t i{height:100%;width:var(--p,0%);transition:width .5s}
  .pl .hb-t em{top:50%;left:var(--m)}
  .pl .hb-t em span{right:auto;left:50%;top:auto;bottom:12px;transform:translateX(-50%);font-size:9px}
}
@media (orientation:portrait){.pl .hud-sec{bottom:44px}}
.pl .clip.full video{object-fit:contain}
@media (orientation:portrait){.pl .clip.wide video{transform:scale(var(--z,1))}}
/* search: add a food the databases don't have */
.nf-cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin:14px 6px 24px;padding:16px;border:1px dashed rgba(232,199,127,.45);border-radius:16px}
.nf-cta b{font-size:15px}.nf-cta span{font-size:13px;color:var(--mut);line-height:1.4}.nf-cta .btn{margin-top:6px}
.mtag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;color:#0b0a0f;background:var(--gold,#e8c77f);border-radius:6px;padding:1px 6px;margin-right:2px;text-transform:uppercase}
.tool.wide{width:100%;flex-direction:row;justify-content:center;font-size:14px}
.fs-credit{display:block;text-align:center;font-size:11px;color:var(--mut);margin:8px 0 0;text-decoration:none}
/* ---------- intermittent fasting + sleep ---------- */
.fastc .fc-row{display:flex;align-items:center;gap:14px}
.fastc .lab{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.fc-ring{position:relative;width:108px;height:108px;flex:none}
.fc-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.fc-ring circle{fill:none;stroke-width:10}.fc-ring .bg{stroke:rgba(255,255,255,.08)}.fc-ring .fg{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset .6s}
.fastc.done .fc-ring .fg{stroke:var(--green)}
.fc-ring .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fc-ring .in b{font-size:19px;font-variant-numeric:tabular-nums}.fc-ring .in span{font-size:11px;color:var(--mut);font-weight:700}
.fc-big{margin:4px 0 2px;font-size:18px;font-weight:800}.fc-sub{margin:0;font-size:12.5px;line-height:1.45}
.fc-phase{margin:6px 0 0;font-size:12px;font-weight:700;color:var(--gold2)}
.fc-week{display:flex;align-items:center;gap:6px;margin-top:12px}.fc-week i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.1)}
.fc-week i.on{background:var(--gold)}.fc-week i.part{background:linear-gradient(90deg,var(--gold) 50%,rgba(255,255,255,.1) 50%)}.fc-week span{font-size:11px;color:var(--dim);margin-left:4px}
.fastc.off .fc-row{align-items:center}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;margin:8px 0;line-height:1.35}.chk input{margin-top:2px;width:18px;height:18px;flex:none;accent-color:var(--gold)}
.fs-stop,.fs-warn{font-size:13px;line-height:1.45;margin:10px 0 0;padding:10px 12px;border-radius:12px}
.fs-stop{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.3)}.fs-warn{background:rgba(232,199,127,.1);border:1px solid rgba(232,199,127,.3)}
.flab{display:block;font-size:13px;font-weight:700;color:var(--mut);margin:4px 0 8px}.flab small{font-weight:600;color:var(--dim)}
.fplans{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-bottom:10px}
.fplan,.opt{display:flex;flex-direction:column;gap:2px;padding:11px 12px;border-radius:14px;border:1px solid var(--line2);background:var(--card);text-align:left;color:var(--ink)}
.fplan b,.opt b{font-size:15px}.fplan span,.opt span{font-size:11.5px;color:var(--mut)}
.fplan.on,.opt.on{border-color:var(--gold);background:rgba(232,199,127,.1)}
.opts{display:flex;flex-direction:column;gap:8px}
.sleepc .sl-row{display:flex;align-items:baseline;gap:10px;margin:6px 0 8px;cursor:pointer}.sleepc .sl-row b{font-size:22px}.sleepc .sl-row span{color:var(--mut);font-size:13px}
.sleepc .sl-row.nap b{font-size:15px}.sleepc .sl-q{margin-left:auto;font-size:22px}
.sleepc .stepbar i{background:var(--blue)}
.sl-tot{margin:-4px 0 12px;font-weight:700;color:var(--blue)}
.sl-qs{display:flex;gap:8px;margin-bottom:12px}.sl-qs button{flex:1;font-size:24px;padding:8px 0;border-radius:12px;border:1px solid var(--line2);background:var(--card)}
.sl-qs button.on{border-color:var(--gold);background:rgba(232,199,127,.12)}

body.pre #prBtn,body.pre #meBtn,body.pre #streak{display:none}
.srch-more{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--mut);font-size:13px;padding:14px 0}.srch-more i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--gold);animation:rot .8s linear infinite}
.mbrow{border:1px solid var(--line);border-radius:14px;padding:10px;margin:8px 0;background:var(--card2)}.mbrow.bad{border-color:rgba(255,90,90,.5)}
.mbtop{display:flex;gap:8px;align-items:center}.mbtop input{flex:1;height:40px;border-radius:10px;border:1px solid var(--line2);background:var(--card);color:var(--ink);padding:0 10px;font-size:15px;font-weight:700}
.mbnums{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:8px}.mbnums label{font-size:10.5px;color:var(--mut);font-weight:700;text-align:center}
.mbnums input{width:100%;height:34px;border-radius:8px;border:1px solid var(--line2);background:var(--card);color:var(--ink);text-align:center;font-size:13px;padding:0 2px}
.mtag.vtag{background:rgba(52,211,153,.15);color:var(--green)}


/* Cardio Series page: Emma in full color, one tap to play */
.chero{position:relative;margin:-12px -16px 0;padding:min(84vw,400px) 18px 28px;overflow:hidden;isolation:isolate;background:#0b0a0f}
.chero img{position:absolute;top:0;left:0;width:100%;height:min(112vw,530px);object-fit:cover;object-position:50% 6%;z-index:-3;-webkit-mask-image:linear-gradient(180deg,#000 48%,transparent 90%);mask-image:linear-gradient(180deg,#000 48%,transparent 90%)}
.chero::before{content:'';position:absolute;inset:0;z-index:-2;background:#ff4fa3;mix-blend-mode:soft-light;opacity:.55}
.chero::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 50% at 0% 100%,rgba(255,79,163,.34),transparent 65%)}
.ch-t{position:relative;max-width:520px}
.ch-k{display:inline-flex;white-space:nowrap;align-items:center;gap:10px;color:#ff4fa3;font:800 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.ch-k::before{content:'';width:26px;height:2px;border-radius:2px;background:#ff4fa3}
.chero h1{font:400 clamp(60px,17vw,96px)/.88 var(--disp);text-transform:uppercase;color:#fff;margin:12px 0 14px;letter-spacing:.005em}
.chero h1 i{display:block;font-style:normal;color:#ff4fa3}
.chero p{margin:0;color:#e9e4f0;font-size:15px;line-height:1.45;max-width:36ch}
.chero .cplay{margin-top:18px;height:52px;padding:0 24px;font-size:16px;box-shadow:0 12px 32px rgba(255,79,163,.38)}
@media (min-width:720px){
  .chero{min-height:480px;display:flex;align-items:center;padding:56px 44px}
  .chero img{left:auto;right:0;height:100%;width:62%;object-position:55% 22%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%);mask-image:linear-gradient(90deg,transparent 0,#000 42%)}
  .chero::after{background:radial-gradient(60% 90% at 0% 60%,rgba(255,79,163,.26),transparent 70%),linear-gradient(90deg,rgba(11,10,15,.9) 38%,rgba(11,10,15,0) 62%),linear-gradient(0deg,rgba(11,10,15,.55),transparent 35%)}
  .ch-t{max-width:44%}
  .chero h1{font-size:clamp(64px,6vw,100px)}
}
.cparts{display:grid;gap:8px}
.cpart{display:flex;align-items:center;gap:12px;width:100%;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;color:var(--ink);text-align:left}
.cpart small{display:block;color:var(--t,#ff4fa3);font:800 10.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.cpart b{display:block;font-size:16px;margin:2px 0}
.cpart em{display:block;font-style:normal;color:var(--mut);font-size:12.5px;line-height:1.35}
.cp-n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,79,163,.16);color:#ff4fa3;font-weight:800}
.cp-r{flex:none;display:flex;align-items:center;gap:6px;color:var(--mut);font-size:13px;font-weight:700}.cp-r svg{width:22px;height:22px;color:#ff4fa3}
.cnote{text-align:center;margin:14px 0 4px;font-size:13px}
.poster.big[data-bp="beat"] img{filter:none;mix-blend-mode:normal;z-index:-2}
.poster.big[data-bp="beat"]::before{content:'';position:absolute;inset:0;z-index:-1;background:#ff4fa3;mix-blend-mode:soft-light;opacity:.55;pointer-events:none}
.poster.big[data-bp="beat"]::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.85))}
.eintro{position:fixed;inset:0;z-index:60;background:#09080d;display:flex;flex-direction:column;gap:14px;padding:calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 16px);color:#fff}
.ei-top{display:flex;align-items:center;gap:12px}
.ei-top small{display:block;color:#ff4fa3;font:800 11px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.ei-top b{display:block;font:400 34px/1 var(--disp);text-transform:uppercase;letter-spacing:.01em;margin-top:4px}
.ei-pill{flex:none;font:800 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;border-radius:99px;background:rgba(255,79,163,.16);color:#ff4fa3;border:1px solid rgba(255,79,163,.4)}
.ei-stage{position:relative;flex:1;min-height:0;border:2px solid var(--gold);border-radius:18px;overflow:hidden;background:#000;box-shadow:0 0 0 4px rgba(232,199,127,.12),0 0 34px rgba(232,199,127,.22)}
.ei-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
@media (orientation:portrait){.ei-stage{flex:none;aspect-ratio:4/5;max-height:62vh;margin:auto 0}.ei-stage video{object-fit:cover;object-position:50% 50%}}
.ei-tag{position:absolute;left:12px;bottom:12px;z-index:2;font:800 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;border-radius:8px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.ei-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}.ei-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#ff4fa3);transition:width .25s linear}
.ei-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.ei-t{flex:1;color:var(--mut);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.ei-skip,.ei-snd{height:48px;padding:0 22px;border-radius:99px;border:0;font-weight:800;font-size:15px}
.ei-skip{background:#ff4fa3;color:#0b0a0f;box-shadow:0 10px 28px rgba(255,79,163,.4)}
.ei-snd{background:rgba(255,255,255,.16);color:#fff}

/* ===== Cardio player ("flow"): one picture of Emma the whole way, HUD on top of it ===== */
.pl.flow{display:flex;flex-direction:column;gap:12px;padding:calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 14px);background:#09080d}
.fl-top{display:flex;align-items:center;gap:10px;color:#fff}
.fl-top small{display:block;color:#ff4fa3;font:800 10.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.fl-top b{display:block;font-size:14px;font-weight:700;color:var(--mut);margin-top:2px}
.fl-b{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center}.fl-b svg{width:20px;height:20px}.fl-b.on{color:var(--gold)}
.pl.flow .stage.fl-stage{position:relative;inset:auto;flex:1 1 auto;min-height:0;width:100%;margin:0 auto;border:2px solid var(--edge,#e8c77f);border-radius:18px;overflow:hidden;background:#000;box-shadow:0 0 0 4px var(--edgeg,rgba(232,199,127,.15)),0 0 30px var(--edgeg,rgba(232,199,127,.25));transition:border-color .3s}
.pl.flow .stage::after{display:none}
.pl.flow .stage-v,.pl.flow .clip video{object-fit:cover!important;object-position:var(--px,50%) 50%!important;transform:none!important}
.fl-bg{object-position:50% 30%!important;transition:filter .5s}
.fl-stage.dim .fl-bg{filter:brightness(.42)}
.fl-stage.titling .fl-bg{filter:blur(8px) brightness(.5)}
.fl-tag{position:absolute;top:12px;left:12px;z-index:3;background:rgba(255,255,255,.94);color:#0b0a0f;padding:7px 10px 6px;border-radius:6px;max-width:60%}
.fl-tag b{display:block;font:400 20px/1 var(--disp);letter-spacing:.02em}
.fl-tag small{display:block;margin-top:3px;color:#d6337f;font:800 10px/1.1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.fl-tag.sm{position:static;display:inline-block;padding:5px 8px 4px;margin-bottom:6px;max-width:none}.fl-tag.sm b{font-size:13px}
.fl-pipw{position:absolute;top:12px;left:12px;z-index:3;width:50%}
.fl-pip{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:2px solid #fff;background:#111;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.fl-pip.ph{display:grid;place-items:center;color:var(--gold);font:400 18px/1.1 var(--disp);text-transform:uppercase;text-align:center;padding:8px}
.fl-clock{position:absolute;top:12px;right:12px;z-index:3;width:76px;height:76px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.fl-clock svg{position:absolute;inset:-6px;width:88px;height:88px;transform:rotate(-90deg)}
.fl-clock circle{fill:none;stroke-width:5}.fl-clock .rbg{stroke:rgba(255,255,255,.25)}.fl-clock .rfg{stroke:#ff4fa3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear}
.fl-clock b{position:relative;font:400 36px/1 var(--disp);color:#0b0a0f;font-variant-numeric:tabular-nums}
.fl-clock.last b{color:#d6337f}
.fl-prog{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:12px;padding:10px 14px 8px;border-radius:12px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px)}
.fl-prog b{flex:none;min-width:48px;color:#fff;font:400 22px/1 var(--disp);font-variant-numeric:tabular-nums}
.fl-segs{flex:1;padding-right:2px}
.fl-trk{position:relative;height:5px;border-radius:99px;background:rgba(255,255,255,.22)}
.fl-trk i{display:block;height:100%;width:var(--p,0%);border-radius:99px;background:linear-gradient(90deg,#ff4fa3,var(--gold));transition:width .25s linear}
.fl-trk em{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#0b0a0f;border:2px solid #fff}
.fl-lbl{position:relative;height:13px;margin-top:6px}
.fl-lbl span{position:absolute;top:0;transform:translateX(-50%);color:#e6e0ee;font:800 9.5px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.fl-lbl span.end{transform:translateX(-100%)}
.fl-prog.rst{left:auto;right:12px;top:100px;bottom:auto;padding:0;background:none;backdrop-filter:none}
.fl-prog .fl-rest{min-width:0;font:800 13px/1 var(--sans);letter-spacing:.16em;padding:5px 9px;border-radius:99px;background:rgba(0,0,0,.5)}
.fl-up{position:absolute;left:14px;right:110px;bottom:16px;z-index:3;color:#fff}
.fl-up b{display:block;font:400 30px/1 var(--disp);letter-spacing:.02em}
.fl-up span{display:block;margin-top:4px;color:#ff4fa3;font:400 22px/1.05 var(--disp);text-transform:uppercase}
.fl-up small{display:block;margin-top:6px;color:#e6e0ee;font:800 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.fl-title{position:absolute;left:18px;bottom:20px;z-index:3;color:#fff;animation:hiF .5s forwards}
.fl-title small{display:block;color:#ff4fa3;font:800 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.fl-title b{display:block;margin:8px 0;font:400 64px/.9 var(--disp);text-transform:uppercase}
.fl-title span{font-size:14px;font-weight:700;color:#e6e0ee}
.fl-skip{position:absolute;right:12px;bottom:14px;z-index:3;height:42px;padding:0 20px;border-radius:99px;border:0;background:#ff4fa3;color:#0b0a0f;font-weight:800;font-size:14px;box-shadow:0 8px 24px rgba(255,79,163,.45),0 0 0 3px rgba(255,79,163,.25)}
.fl-skip:active{transform:scale(.96)}
.fl-under{display:flex;flex-direction:column;gap:12px;margin-top:auto}
.fl-ctl{display:flex;justify-content:center;align-items:center;gap:12px}
.fl-c{width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center}.fl-c svg{width:22px;height:22px}
.fl-c.pp{width:68px;height:68px;background:var(--gold);color:#0b0a0f}.fl-c.pp svg{width:28px;height:28px}
.pl.flow #sesMusic{display:flex;justify-content:center}
@media (orientation:landscape) and (max-height:600px){
  .pl.flow{padding:0}
  .pl.flow .stage.fl-stage{position:absolute;inset:0;aspect-ratio:auto;max-height:none;border-radius:0;border-width:3px}
  .pl.flow .fl-top,.pl.flow .fl-under{position:absolute;z-index:6;left:0;right:0;opacity:0;pointer-events:none;transition:opacity .25s}
  .pl.flow .fl-top{top:0;padding:10px 14px;background:linear-gradient(rgba(0,0,0,.6),transparent)}
  .pl.flow .fl-under{bottom:0;padding:10px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.6))}
  .pl.flow.show .fl-top,.pl.flow.show .fl-under{opacity:1;pointer-events:auto}
  .fl-pipw{width:30%}.fl-clock{transform:scale(1.15);transform-origin:top right}.fl-prog.rst{top:112px}
  .pl.flow .stage-v,.pl.flow .clip video{object-fit:contain!important}   /* sideways: head to shoes, always */
  .pl.flow .fl-skip{z-index:8;bottom:auto;top:50%;right:16px;transform:translateY(-50%)}   /* sideways: above the control bar, so the first tap hits it */
  .pl.flow .fl-skip:active{transform:translateY(-50%) scale(.96)}
}
.qscan{position:relative;width:min(300px,78vw);aspect-ratio:1;margin:10px auto 6px;border-radius:20px;overflow:hidden;background:#000}
.qscan video{width:100%;height:100%;object-fit:cover}
.qscan i{position:absolute;inset:16%;border:3px solid var(--gold);border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
/* the big finish (Cardio Series done): sized from the screen height so it always fits, no scrolling */
.bigfin{position:fixed;inset:0;z-index:65;background:radial-gradient(120% 80% at 50% 30%,#2a2010 0%,#0b0a0f 62%);display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:0;transition:opacity .3s;padding:calc(env(safe-area-inset-top) + 1.5dvh) 16px calc(env(safe-area-inset-bottom) + 1.5dvh);--u:min(1dvh,2vw,8px)}
.bigfin.on{opacity:1}
.bf-rays{position:fixed;left:50%;top:30%;width:180vmax;height:180vmax;margin:-90vmax 0 0 -90vmax;background:repeating-conic-gradient(rgba(232,199,127,.09) 0 8deg,transparent 8deg 20deg);animation:bfspin 40s linear infinite;pointer-events:none;-webkit-mask-image:radial-gradient(circle,#000 0,transparent 55%);mask-image:radial-gradient(circle,#000 0,transparent 55%)}
@keyframes bfspin{to{transform:rotate(360deg)}}
.bf-in{position:relative;width:100%;max-width:420px;max-height:100%;text-align:center;display:flex;flex-direction:column;align-items:stretch}
.bf-k{display:block;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:calc(var(--u) * 1.5);font-weight:700;opacity:0;animation:bfup .5s .2s forwards}
.bf-medal{position:relative;width:calc(var(--u) * 17);height:calc(var(--u) * 21);margin:calc(var(--u) * 1) auto 0;flex:none;animation:bfdrop .9s cubic-bezier(.2,1.6,.4,1) .15s both}
.bf-rib{position:absolute;top:0;width:28%;height:52%;background:linear-gradient(#ff4fa3,#c2186b);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.bf-rib.l{left:20%;transform:rotate(14deg)}.bf-rib.r{right:20%;transform:rotate(-14deg)}
.bf-disc{position:absolute;left:0;right:0;bottom:0;width:calc(var(--u) * 17);height:calc(var(--u) * 17);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3cf 0,#f5dca5 18%,#e8c77f 45%,#a8833a 100%);box-shadow:0 0 0 calc(var(--u) * .7) #c9a65b,0 0 0 calc(var(--u) * 1.2) #7a5c22,0 0 50px rgba(232,199,127,.55);display:flex;align-items:center;justify-content:center;overflow:hidden;animation:bfflip 1.1s ease-out .3s both}
.bf-disc span{font-size:calc(var(--u) * 8);filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}
.bf-shine{position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);transform:translateX(-120%);animation:bfshine 2.6s ease-in-out 1.3s infinite}
@keyframes bfdrop{from{transform:translateY(-120vh)}to{transform:none}}
@keyframes bfflip{from{transform:rotateY(540deg)}to{transform:rotateY(0)}}
@keyframes bfshine{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}
.bf-h{margin:calc(var(--u) * 1.6) 0 calc(var(--u) * .4);font-size:min(calc(var(--u) * 6.4),13vw);line-height:1;letter-spacing:.04em;font-weight:900;background:linear-gradient(#fff3cf,#e8c77f 55%,#b8913f);-webkit-background-clip:text;background-clip:text;color:transparent;animation:bfpop .6s cubic-bezier(.2,1.8,.4,1) .9s both}
@keyframes bfpop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes bfup{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.bf-sub{color:var(--mut);margin:calc(var(--u) * .6) auto calc(var(--u) * 1.6);max-width:320px;font-size:calc(var(--u) * 1.8);line-height:1.35;opacity:0;animation:bfup .5s 1.2s forwards}
.bf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;opacity:0;animation:bfup .5s 1.4s forwards}
.bf-stats div{background:rgba(255,255,255,.06);border:1px solid rgba(232,199,127,.25);border-radius:14px;padding:calc(var(--u) * 1.2) 4px}
.bf-stats b{display:block;font-size:calc(var(--u) * 3);line-height:1.2;color:var(--gold2);font-variant-numeric:tabular-nums}
.bf-stats span{font-size:calc(var(--u) * 1.35);color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.bf-n{margin:calc(var(--u) * 1.4) 0 0;color:var(--ink);font-size:calc(var(--u) * 1.75);opacity:0;animation:bfup .5s 1.8s forwards}.bf-n:empty{display:none}.bf-n b{color:var(--gold)}
.bf-meds{margin-top:calc(var(--u) * 1);min-height:0;overflow:auto}.bf-meds:empty{display:none}
.bf-mt{font-size:calc(var(--u) * 1.4);color:var(--gold);letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:calc(var(--u) * .6);opacity:0;animation:bfup .4s 2.2s forwards}
.bf-med{display:flex;align-items:center;gap:12px;text-align:left;background:linear-gradient(90deg,rgba(232,199,127,.18),rgba(232,199,127,.04));border:1px solid rgba(232,199,127,.45);border-radius:14px;padding:calc(var(--u) * .9) 12px;margin:calc(var(--u) * .7) 0;opacity:0;animation:bfpop .55s cubic-bezier(.2,1.8,.4,1) both}
.bf-med span{font-size:calc(var(--u) * 3.6)}.bf-med b{display:block;font-size:calc(var(--u) * 1.9)}.bf-med small{color:var(--mut);font-size:calc(var(--u) * 1.5)}
.bf-btns{margin-top:calc(var(--u) * 1.8);display:grid;gap:calc(var(--u) * .8);flex:none;opacity:0;animation:bfup .5s 2s forwards}
.bf-btns .btn{height:calc(var(--u) * 5.4);min-height:40px}
@media (prefers-reduced-motion:reduce){.bf-rays,.bf-shine{animation:none}.bf-medal,.bf-disc{animation:none}}
/* end of the warm-up */
.wudone{position:fixed;left:50%;top:42%;z-index:69;transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;text-align:center;transition:transform .45s cubic-bezier(.2,1.7,.4,1),opacity .3s;background:rgba(11,10,15,.92);border:1px solid rgba(232,199,127,.5);border-radius:24px;padding:20px 28px 16px;min-width:240px;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(232,199,127,.25)}
.wudone.on{transform:translate(-50%,-50%) scale(1);opacity:1}
.wu-medal{position:relative;width:96px;height:96px;margin:0 auto 10px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 35% 30%,#fff3cf 0,#f5dca5 18%,#e8c77f 45%,#a8833a 100%);box-shadow:0 0 0 4px #c9a65b,0 0 30px rgba(232,199,127,.6);display:flex;align-items:center;justify-content:center;animation:bfflip .9s ease-out both}
.wu-medal span{font-size:48px}
.wudone b{display:block;white-space:nowrap;font-size:26px;font-weight:900;letter-spacing:.05em;background:linear-gradient(#fff3cf,#e8c77f 60%,#b8913f);-webkit-background-clip:text;background-clip:text;color:transparent}
.wudone small{display:block;margin-top:4px;color:#ff4fa3;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:12px}

.siri-steps{margin:8px 0 0;padding-left:20px;font-size:13.5px;line-height:1.55}.siri-steps ol{padding-left:18px;margin:4px 0}.siri-steps li{margin:3px 0}.siri-steps code{font-size:12px;background:rgba(255,255,255,.07);padding:1px 5px;border-radius:5px;word-break:break-all}
/* computer screens: keep the tab bar the same width as the app instead of stretched edge to edge */
@media (min-width:760px){.tabs{grid-template-columns:repeat(2,minmax(0,120px)) 76px repeat(2,minmax(0,120px));justify-content:center}}
/* Big R Kitchen: meal plans */
.kplan{margin:18px 0 0;background:#fbf7f0;border:1px solid rgba(60,40,20,.12);border-radius:20px;padding:16px;color:#2a1f14}
.kplan .kick{color:#a8641f}
.kplan h2{font:700 23px/1.1 var(--serif);margin:4px 0 6px;color:#2a1f14}
.kplan>p{color:#6b5a48;font-size:14px;margin:0 0 12px}
.kplan.cta{background:radial-gradient(120% 140% at 100% 0%,rgba(217,102,58,.18),transparent 60%),#fbf7f0}
.kp-btn{display:block;width:100%;height:48px;border-radius:14px;border:0;background:#2a1f14;color:#fbf7f0;font:800 15px var(--sans);margin-top:4px}
.kp-btn.ghost{background:none;border:1px solid rgba(60,40,20,.25);color:#2a1f14;margin-top:12px}
.kp-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.kp-x{flex:none;height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(60,40,20,.25);background:none;color:#2a1f14;font:700 13px var(--sans)}
.kp-days{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:6px -16px 10px;padding:0 16px}
.kp-days::-webkit-scrollbar{display:none}
.kp-days button{flex:none;height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(60,40,20,.18);background:#fff;color:#2a1f14;font:700 13px var(--sans)}
.kp-days button.on{background:#2a1f14;color:#fbf7f0;border-color:#2a1f14}
.kp-m{border-top:1px solid rgba(60,40,20,.1);padding:12px 0}
.kp-mt small{display:block;color:#a8641f;font:800 11px var(--sans);letter-spacing:.12em;text-transform:uppercase}
.kp-mt b{font:700 17px/1.2 var(--serif)}
.kp-m ul{margin:6px 0 8px;padding-left:18px;color:#4a3b2c;font-size:13.5px;line-height:1.45}
.kp-mf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kp-mf span{color:#6b5a48;font-size:12.5px}
.kp-mf button{flex:none;height:34px;padding:0 14px;border-radius:999px;border:0;background:#d9663a;color:#fff;font:800 13px var(--sans)}
.kp-mf button:disabled{background:#7cc58f}
.kp-tot{border-top:1px solid rgba(60,40,20,.1);padding-top:12px;font-size:14px}
.kp-tot span{color:#6b5a48;font-size:12.5px}
.kp-tip{color:#4a3b2c;font-size:13.5px;margin:10px 0 0}
.kp-shop{list-style:none;margin:0 0 14px;padding:0}
.kp-shop li{border-bottom:1px solid var(--line);padding:10px 2px}
.kp-shop label{display:flex;gap:10px;align-items:center;font-size:15px}
.kp-shop input{width:20px;height:20px;accent-color:var(--gold)}
.kp-shop input:checked+span{text-decoration:line-through;color:var(--dim)}
/* one food box: "log what I typed" row at the top of the results */
.ai-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin:4px 0 10px;padding:12px 14px;border-radius:16px;border:1px solid rgba(232,199,127,.35);background:radial-gradient(120% 140% at 0% 0%,rgba(232,199,127,.16),transparent 60%),var(--card2);color:var(--ink)}
.ai-row>span{font-size:22px}.ai-row div{flex:1;min-width:0}.ai-row b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-row small{color:var(--mut);font-size:12.5px}
.ai-row svg{flex:none;width:20px;height:20px;color:var(--gold)}
/* pull to refresh */
.ptr{position:fixed;z-index:29;left:50%;top:calc(var(--top) - 44px);width:38px;height:38px;border-radius:50%;background:#1d1a26;border:1px solid var(--line2);box-shadow:0 6px 18px rgba(0,0,0,.4);display:grid;place-items:center;opacity:0;transform:translate(-50%,0);transition:opacity .15s;pointer-events:none}
.ptr.show{opacity:1}
.ptr i{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--dim);border-top-color:transparent}
.ptr.go i{border-color:var(--gold);border-top-color:transparent}
.ptr.spin i{animation:ptrs .7s linear infinite}
@keyframes ptrs{to{transform:rotate(360deg)}}
/* complete the day */
.daybtn{margin:6px 0 0;height:54px;font-size:16px}
.daydone{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:6px 0 0;padding:14px 16px;border-radius:16px;border:1px solid rgba(74,222,128,.35);background:rgba(74,222,128,.08)}
.daydone b{font-size:15px}.daydone span{color:var(--mut);font-size:12.5px;flex:1;min-width:150px}.daydone .link{font-size:13px}
.dd-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.dd-sum div{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}
.dd-sum b{display:block;font-size:20px}.dd-sum span{color:var(--mut);font-size:12px}
.dd-wins{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.dd-wins span{font-size:12.5px;padding:6px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--dim)}
.dd-wins span.ok{color:var(--ink);border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.1)}
.dd-props{margin:0 0 12px}
.dd-future{padding:14px;border-radius:16px;background:radial-gradient(120% 140% at 100% 0%,rgba(232,199,127,.18),transparent 60%),var(--card2);border:1px solid rgba(232,199,127,.3)}
.dd-future small{display:block;color:var(--gold);font-weight:800;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.dd-future b{display:block;font-size:18px;margin:4px 0}.dd-future span{color:var(--mut);font-size:13.5px}
.dd-future.warn{background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.35)}.dd-future.warn b{font-size:16px}
/* friends: what each one sees */
.sharech{display:flex;flex-wrap:wrap;gap:8px}
.sharech button{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:none;color:var(--dim);font:700 13.5px var(--sans)}
.sharech button.on{background:rgba(232,199,127,.14);border-color:var(--gold);color:var(--ink)}
.sharech button.on::before{content:'✓ ';color:var(--gold)}
/* slide left to delete */
.items{overflow:hidden}
.it[data-eid],.it[data-xid],.it[data-sid]{position:relative;transition:transform .2s ease;background:var(--card);touch-action:pan-y}
.sw-del{position:absolute;top:0;bottom:0;left:100%;width:100vw;border:0;background:var(--red);color:#fff;font:800 14px var(--sans);text-align:left;padding-left:20px;cursor:pointer}
.toast .undo{margin-left:10px;border:0;background:none;color:#b8860b;font:800 14px var(--sans);text-decoration:underline;pointer-events:none}
.toast.show:has(.undo),.toast.show .undo{pointer-events:auto}


.actl button small{font-weight:600;opacity:.6;margin-left:4px}.actl .xbrands{margin:0}.xbrands{width:100%}#xL .sec-t{width:100%}.xnote{width:100%;font-size:12px;margin:4px 0 0}

/* Sunday Scorecard */
.scban{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid rgba(232,199,127,.35);background:linear-gradient(135deg,rgba(232,199,127,.14),rgba(232,199,127,.04));color:var(--ink);font:inherit;cursor:pointer}
.scban div{flex:1}.scban b{display:block}.scban small{color:var(--mut);font-size:12.5px}.scban .sc-g{font-size:24px}.scban svg{width:18px;height:18px;color:var(--gold)}
.sc .sc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sc-nav{width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--ink);display:grid;place-items:center;margin-left:6px}.sc-nav svg{width:16px;height:16px}.sc-nav:disabled{opacity:.3}
.sc-mid{display:flex;align-items:center;gap:14px;margin:14px 0 10px}
.sc-grade{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font:800 28px var(--sans);flex:none}
.sc-grade.a{background:var(--gold);color:#17120a}.sc-grade.b{background:rgba(110,200,140,.2);color:var(--green)}.sc-grade.c{background:rgba(232,199,127,.15);color:var(--gold)}.sc-grade.d{background:rgba(255,255,255,.07);color:var(--mut)}
.sc-days{display:flex;gap:6px;margin:6px 0 12px}.sc-days div{flex:1;text-align:center}.sc-days i{display:grid;place-items:center;height:28px;border-radius:9px;background:rgba(255,255,255,.06);font-style:normal;font-size:13px;color:#17120a}
.sc-days .part i{background:rgba(232,199,127,.35)}.sc-days .on i{background:var(--gold)}.sc-days span{font-size:10.5px;color:var(--dim)}
.sc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 6px}.sc-stats div{background:rgba(255,255,255,.04);border-radius:12px;padding:9px 6px;text-align:center}.sc-stats b{display:block;font-size:16px}.sc-stats span{font-size:11px;color:var(--mut)}
.sc-coach{display:flex;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.sc-coach small{color:var(--gold);font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.sc-coach p{margin:3px 0 0;font-size:14px;line-height:1.45}
/* Shot Day */
.shotc .fc-row{display:flex;align-items:center;gap:12px}.shotc .grow{flex:1;min-width:0}.shotc .lab{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.shotc b{display:block}.shotc small{display:block;font-size:12.5px}.shot-i{width:40px;height:40px;border-radius:12px;background:rgba(232,199,127,.12);display:grid;place-items:center;font-size:20px;flex:none}
.shotc.due{border-color:rgba(232,199,127,.45)}.shotc.done .shot-i{background:rgba(110,200,140,.18);color:var(--green);font-weight:800}
.seg.sm7 button{font-size:12.5px;padding:0 2px}
.shot-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}.shot-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink);font:inherit}
.shot-row span{font-size:12.5px;color:var(--mut)}
.shotc p b{display:inline}

/* are-you-sure for way-too-much */
.sure{position:fixed;inset:0;z-index:200;background:rgba(5,4,8,.75);display:grid;place-items:center;padding:20px;animation:sureIn .15s ease}
.sure-b{width:100%;max-width:360px;background:var(--card);border:1px solid var(--line2);border-radius:22px;padding:22px 18px 16px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.sure-i{font-size:34px;line-height:1;margin-bottom:8px}.sure-b>b{font-size:18px;display:block}.sure-b p{color:var(--mut);font-size:14.5px;line-height:1.45;margin:8px 0 16px}.sure-b p b{color:var(--ink)}
.sure-b .row{gap:8px}
@keyframes sureIn{from{opacity:0}to{opacity:1}}

.addg.g2{grid-template-columns:repeat(2,1fr)}

.ai-wait{text-align:center;padding:24px 0}.ai-wait p{margin:10px 0 0}
.sheet{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* full-screen pages: the title and ✕ stay pinned at the top while you scroll */
.sheet.full>.sh-h:first-child{position:sticky;top:calc(-10px - env(safe-area-inset-top));z-index:6;background:#121019;margin:calc(-10px - env(safe-area-inset-top)) -16px 12px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;border-bottom:1px solid var(--line)}
/* Cardio Series: music · voice · your own music, side by side under the controls */
.sesm.sesw{flex-wrap:wrap;gap:8px;justify-content:center}
.sesm.sesw .btn.sm{height:38px;padding:0 12px;font-size:13.5px;white-space:nowrap}
/* Your music: full screen picker over the workout */
.ownov{position:fixed;inset:0;z-index:70;background:#09080d;color:#fff;display:flex;flex-direction:column;gap:14px;padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 16px);overflow:auto}
.ow-top{display:flex;align-items:center;justify-content:space-between}.ow-top b{font-size:24px;font-weight:800}
.ow-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--card2);border:1px solid var(--line2);border-radius:14px;padding:5px}
.ow-tabs button{height:44px;border:0;border-radius:10px;background:none;color:var(--mut);font-size:16px;font-weight:700}
.ow-tabs button.on{background:var(--gold,#e8c77d);color:#111}
.ow-body{display:grid;gap:12px;align-content:start;flex:1}
.ow-play{height:56px;font-size:17px}
.ow-card{background:var(--card2);border:1px solid var(--line2);border-radius:16px;padding:14px;display:grid;gap:10px}
.ow-card>b{font-size:16px}.ow-card p{margin:0;color:var(--mut);font-size:14px;line-height:1.4}
.ow-row{display:flex;gap:8px}.ow-row input{flex:1;min-width:0;height:48px;border-radius:12px;border:1px solid var(--line2);background:#121019;color:#fff;padding:0 12px;font-size:16px}.ow-row .btn{height:48px;padding:0 18px}
.ow-picks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ow-picks button{text-align:left;border:1px solid var(--line2);background:#121019;color:#fff;border-radius:12px;padding:10px 12px;display:grid;gap:2px}
.ow-picks button b{font-size:14.5px}.ow-picks button small{color:var(--mut);font-size:12px}
.ow-note{margin:0;color:var(--mut);font-size:12.5px;text-align:center}
.ow-keep{height:50px}
/* the Spotify / Apple Music player sits at the very bottom of the workout, under everything, never on top of the controls */
@media (orientation:portrait){
  body.ses-on #spDock{left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom) + 8px);max-width:none}
  body.ses-on:has(#spDock) #ses.flow{padding-bottom:96px}
}
/* while the next warm-up move previews in the corner, its card takes the top-left spot */
.fl-stage:has(.fl-pipw.nextup)>.fl-tag{opacity:0}