:root{--a:#ff3d7f;--b:#7b5cff;--c:#00e0ff;--fg:#fff;--mut:rgba(255,255,255,.62);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#0b0a1e;color:var(--fg);overflow:hidden}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0}
#app{position:relative;z-index:1;height:100%;max-width:480px;margin:auto;padding:max(14px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
.top{display:flex;justify-content:space-between;align-items:center;height:44px}
.logo{font-weight:800;letter-spacing:-.02em;font-size:20px;display:flex;align-items:center;gap:8px}.logo b{font-weight:400;opacity:.6}
.dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--c));box-shadow:0 0 14px var(--a)}
.chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;padding:9px 14px;border-radius:99px;font-family:inherit;font-weight:600;font-size:14px;backdrop-filter:blur(10px)}
.screen{display:none;flex:1;flex-direction:column;animation:in .6s cubic-bezier(.2,.8,.2,1)}
.screen.active{display:flex}
@keyframes in{from{opacity:0;transform:translateY(24px) scale(.98)}}
h1{font-size:40px;line-height:1.05;letter-spacing:-.035em;font-weight:800;margin:18px 0 6px}
em{font-style:normal;background:linear-gradient(90deg,var(--a),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub,.eyebrow{color:var(--mut);font-size:15px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;margin-top:20px}
.steps{display:flex;gap:6px;margin-top:12px}.steps i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.15);transition:.4s}.steps i.on{background:linear-gradient(90deg,var(--a),var(--b))}
.q{display:none}.q.active{display:block;animation:in .5s}
.opts{display:grid;gap:10px;margin-top:22px}
.opts button{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.12);color:#fff;text-align:left;padding:18px;border-radius:18px;font-family:inherit;font-weight:600;font-size:17px;backdrop-filter:blur(12px);transition:.2s}
.opts button.sel{border-color:transparent;background:linear-gradient(135deg,rgba(255,61,127,.55),rgba(123,92,255,.55));box-shadow:0 8px 30px rgba(255,61,127,.35);transform:scale(1.02)}
.opts.big{grid-template-columns:repeat(3,1fr)}.opts.big button{text-align:center;font-size:36px;font-weight:800;padding:26px 0}.opts.big small{display:block;font-size:13px;opacity:.7;font-weight:500}
.cta{margin-top:auto;width:100%;padding:18px;border:0;border-radius:18px;font-family:inherit;font-weight:800;font-size:18px;color:#fff;background:linear-gradient(90deg,var(--a),var(--b));box-shadow:0 10px 30px rgba(123,92,255,.45)}
.cta:disabled{opacity:.35;box-shadow:none}
.link{background:none;border:0;color:var(--mut);font-family:inherit;font-weight:500;font-size:15px;padding:14px}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px}.meta span{background:rgba(255,255,255,.1);padding:6px 12px;border-radius:99px;font-size:13px}
.plan{list-style:none;padding:0;overflow:auto;flex:1;max-height:34vh;mask-image:linear-gradient(#000 80%,transparent)}
.plan li{display:flex;justify-content:space-between;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:600}.plan li span{color:var(--mut);font-weight:500}
.start{margin:18px auto 0;width:150px;height:150px;border-radius:50%;border:0;color:#fff;font-family:inherit;font-weight:900;font-size:26px;letter-spacing:.1em;background:radial-gradient(circle at 30% 30%,#ff7aa8,var(--a) 40%,var(--b));box-shadow:0 0 0 12px rgba(255,61,127,.15),0 0 60px rgba(255,61,127,.6);animation:breath 2s ease-in-out infinite}
@keyframes breath{50%{transform:scale(1.06);box-shadow:0 0 0 22px rgba(255,61,127,.08),0 0 90px rgba(123,92,255,.7)}}
.hud{margin-top:6px}.bar{height:6px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--a),var(--c));transition:width .5s}
.hudrow{display:flex;justify-content:space-between;margin-top:8px;font-family:inherit;font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--mut)}#phaseLbl{color:var(--c)}#combo{color:#ffd166}
.stage{position:relative;width:min(84vw,360px);aspect-ratio:1;margin:18px auto 6px}
#ring{position:absolute;inset:0;transform:rotate(-90deg);filter:drop-shadow(0 0 18px var(--glow,#ff3d7f))}
.track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:6}.arc{fill:none;stroke:var(--glow,#ff3d7f);stroke-width:6;stroke-linecap:round;stroke-dasharray:603;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear,stroke .6s}
.count{position:absolute;inset:0;display:grid;place-items:center;font-family:inherit;font-weight:900;font-size:92px;letter-spacing:-.05em;text-shadow:0 4px 30px rgba(0,0,0,.4)}
.count.tick{animation:tick .35s}@keyframes tick{0%{transform:scale(1.25)}}
.motion{position:absolute;inset:16%;opacity:.38}
.motion svg{width:100%;height:100%}
.exname{text-align:center;font-size:34px;font-weight:800;letter-spacing:-.03em;margin-top:6px;transition:.4s}
.exname.swap{animation:swap .6s cubic-bezier(.2,.8,.2,1)}@keyframes swap{from{opacity:0;transform:translateY(16px);filter:blur(8px)}}
.cue{text-align:center;color:var(--mut);min-height:24px;font-size:17px;margin-top:4px}
.next{margin:auto auto 0;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.08);padding:10px 16px;border-radius:99px;backdrop-filter:blur(10px)}.next span{font-size:11px;letter-spacing:.18em;color:var(--mut)}
.ctrl{display:flex;justify-content:center;gap:10px;margin-top:14px}
.toast{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.6);font-family:inherit;font-weight:900;font-size:34px;opacity:0;pointer-events:none;white-space:nowrap;background:linear-gradient(90deg,#ffd166,var(--a));-webkit-background-clip:text;background-clip:text;color:transparent}
.toast.show{animation:pop 1.4s cubic-bezier(.2,.8,.2,1)}@keyframes pop{15%{opacity:1;transform:translate(-50%,-90%) scale(1.1)}80%{opacity:1;transform:translate(-50%,-110%) scale(1)}100%{opacity:0;transform:translate(-50%,-140%)}}
.rest .arc{--glow:#00e0ff}
.trophy{font-size:80px;text-align:center;margin-top:30px;animation:float 2.4s ease-in-out infinite;filter:drop-shadow(0 0 30px #ffd166)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.stats div{background:rgba(255,255,255,.08);border-radius:18px;padding:16px;backdrop-filter:blur(10px)}
.stats b{display:block;font-size:34px;font-weight:900}.stats span{color:var(--mut);font-size:13px}
.tags{display:flex;flex-wrap:wrap;gap:8px}.tags span{padding:6px 12px;border-radius:99px;background:linear-gradient(135deg,rgba(255,61,127,.4),rgba(0,224,255,.3));font-size:13px;font-weight:600}
.modal{position:fixed;inset:0;z-index:9;background:rgba(0,0,0,.6);display:grid;place-items:end center;padding:20px}.modal[hidden]{display:none}
.card{background:#1b1838;border-radius:24px;padding:24px;width:100%;max-width:440px}.card ol{margin:14px 0 20px;padding-left:20px;line-height:2}
.anim-nod g{animation:nod 2s ease-in-out infinite;transform-origin:50% 70%}@keyframes nod{50%{transform:translateY(8px) rotate(-8deg)}}
.anim-orbit g{animation:spin 3s linear infinite;transform-origin:50% 50%}@keyframes spin{to{transform:rotate(360deg)}}
.anim-wave path{animation:wave 3s ease-in-out infinite}@keyframes wave{50%{d:path("M10 60 Q50 85 90 60")}}
.anim-rotate g{animation:rot 3s ease-in-out infinite;transform-origin:50% 50%}@keyframes rot{50%{transform:rotate(70deg)}}
.anim-wings g{animation:wing 2.6s ease-in-out infinite;transform-origin:50% 60%}@keyframes wing{50%{transform:scaleY(1.35) translateY(-8px)}}
.anim-reach g{animation:reach 3s ease-in-out infinite;transform-origin:50% 50%}@keyframes reach{50%{transform:scaleX(1.3)}}
.anim-lift g{animation:lift 2s ease-in-out infinite}@keyframes lift{50%{transform:translateY(-14px)}}
.anim-lunge g{animation:lunge 3s ease-in-out infinite;transform-origin:30% 80%}@keyframes lunge{50%{transform:skewX(-14deg)}}
.anim-pulse g{animation:pls 1s ease-in-out infinite;transform-origin:50% 50%}@keyframes pls{50%{transform:scale(1.15)}}
@keyframes float{50%{transform:translateY(-10px) rotate(-4deg)}}
.motion{opacity:.22}
.flash{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0}
.flash.work{background:radial-gradient(circle,rgba(255,61,127,.85),rgba(123,92,255,.4) 60%,transparent)}.flash.rest,.flash.ready{background:radial-gradient(circle,rgba(0,224,255,.6),transparent 70%)}
.flash.go{animation:fl .7s ease-out}@keyframes fl{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}

.ctrl{flex-wrap:wrap}
/* ---- v2 ---- */
.logo{gap:8px}.wm{letter-spacing:-.02em}.wm b{font-weight:400;opacity:.6}.lg{width:26px;height:26px}
.topr{display:flex;gap:8px;align-items:center}.lvl{color:#ffd166;font-size:12px;padding:7px 11px}
.tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom));width:min(460px,calc(100% - 24px));display:grid;grid-template-columns:repeat(4,1fr);background:rgba(20,18,44,.75);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:6px;z-index:4}
.tabs[hidden]{display:none}.tabs button{background:none;border:0;color:var(--mut);font-size:20px;padding:6px 0;border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:2px}
.tabs button span{font-size:11px;font-weight:600}.tabs button.on{background:linear-gradient(135deg,rgba(255,61,127,.35),rgba(123,92,255,.35));color:#fff}
.screen.tabbed{padding-bottom:86px;overflow:auto}
.card2{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:18px;margin:18px 0;backdrop-filter:blur(10px)}.card2 .tags{margin-top:10px}
.screen.tabbed .cta{margin-top:12px}
.chlist{display:grid;gap:12px;margin-top:16px}
.chcard{display:flex;gap:14px;text-align:left;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:14px;backdrop-filter:blur(10px);font-family:inherit}
.chcard.done{border-color:rgba(255,209,102,.5);box-shadow:0 0 24px rgba(255,209,102,.15)}
.che{font-size:34px;width:56px;height:56px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,rgba(255,61,127,.4),rgba(0,224,255,.3));flex:none}
.chb{display:flex;flex-direction:column;gap:4px;flex:1}.chb b{font-size:17px}.chb>span{color:var(--mut);font-size:13px}
.chm{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.chm i{font-style:normal;font-size:11px;font-weight:700;padding:4px 8px;border-radius:99px;background:rgba(255,255,255,.1)}
.d-easy{color:#7dffb3}.d-medium{color:#ffd166}.d-hard{color:#ff7a7a}.d-streak{color:#ff9f43}.xpr{color:#ffd166!important}
.chs{font-size:12px;color:#ffd166;font-weight:700}.minibar{height:5px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden}.minibar i{display:block;height:100%;background:linear-gradient(90deg,#ff9f43,#ffd166)}
.ask{position:relative;margin-top:16px}.ask textarea{width:100%;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.15);border-radius:18px;color:#fff;padding:14px 56px 14px 14px;font:16px inherit;font-family:inherit;resize:none}
.mic{position:absolute;right:10px;bottom:12px;width:40px;height:40px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--a),var(--b));font-size:18px}.mic.rec{animation:breath 1s infinite}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.chips button{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:99px;padding:8px 12px;font-size:13px;font-family:inherit}
.coachout{margin-top:12px;color:#00e0ff;min-height:20px}
.xpbar{height:12px;border-radius:12px;background:rgba(255,255,255,.12);overflow:hidden;margin:10px 0 6px}.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#ffd166,var(--a));box-shadow:0 0 16px #ffd166}
.figure{position:absolute;inset:14% 10% 24%;opacity:.95}.figure .rig{width:100%;height:100%;overflow:visible}
.limb{fill:none;stroke-linecap:round;stroke-linejoin:round}.limb.f,.limb.torso{stroke:url(#rg);stroke-width:9}.limb.b{stroke:rgba(255,255,255,.35);stroke-width:8}
.headc{fill:#fff}.jt{fill:#fff}.floor{stroke:rgba(255,255,255,.2);stroke-width:2}.prop{fill:none;stroke:rgba(255,255,255,.3);stroke-width:4}
.count{place-items:end center;padding-bottom:6%;font-size:52px}
.trans{position:fixed;inset:0;z-index:8;pointer-events:none;display:grid;place-items:center;align-content:center;gap:10px;opacity:0}
.trans img{width:120px;height:120px;filter:drop-shadow(0 0 30px #ff3d7f)}.trans b{font-size:34px;font-weight:900;letter-spacing:-.03em}.trans i{font-style:normal;color:var(--mut);letter-spacing:.2em;text-transform:uppercase;font-size:12px}
.trans.go{animation:tbg 1.6s ease forwards}.trans.go img{animation:tlogo 1.6s cubic-bezier(.2,.8,.2,1) forwards}.trans.go b,.trans.go i{animation:ttxt 1.6s ease forwards}
@keyframes tbg{0%{opacity:0;background:rgba(11,10,30,0)}12%{opacity:1;background:rgba(11,10,30,.82)}75%{opacity:1;background:rgba(11,10,30,.82)}100%{opacity:0;background:rgba(11,10,30,0)}}
@keyframes tlogo{0%{transform:scale(.2) rotate(-200deg)}35%{transform:scale(1.15) rotate(20deg)}50%{transform:scale(1) rotate(0)}72%{transform:scale(1) rotate(0) translate(0,0)}100%{transform:scale(.3) rotate(540deg) translate(260px,-420px);opacity:0}}
@keyframes ttxt{0%,15%{opacity:0;transform:translateY(20px)}35%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-30px)}}
/* ---- v3 polish ---- */
:root{--sab:env(safe-area-inset-bottom,0px);--pad:20px;--tabh:64px}
#app{padding:max(12px,env(safe-area-inset-top)) var(--pad) calc(16px + var(--sab))}
.top{height:48px;margin-bottom:4px}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1;min-height:38px;padding:0 14px;font-size:14px;font-weight:600;font-family:inherit}
.chip.ib svg{display:block;flex:none}.chip.lvl{min-height:32px;padding:0 11px;font-size:12px}
.chip.big{min-height:52px;border-radius:16px;font-size:16px;flex:1}
.tabs{bottom:calc(10px + var(--sab));height:var(--tabh);padding:6px;gap:4px;border-radius:24px;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.tabs button{justify-content:center;gap:3px;font-size:19px;border-radius:18px;transition:background .25s,color .25s,transform .15s}
.tabs button:active{transform:scale(.94)}.tabs button span{font-size:10.5px;letter-spacing:.01em}
.tabs button.on{background:linear-gradient(135deg,rgba(255,61,127,.45),rgba(123,92,255,.45));box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.screen.tabbed{padding-bottom:calc(var(--tabh) + 34px + var(--sab));scrollbar-width:none}.screen.tabbed::-webkit-scrollbar{display:none}
.cta{min-height:56px;padding:0 18px;border-radius:18px;display:flex;align-items:center;justify-content:center}
.screen.tabbed .cta{margin-top:16px}.link{min-height:44px}
#screen-ready .start{margin:16px auto 4px}#screen-ready .link,#screen-end .link{align-self:center}
.cta.danger{background:linear-gradient(90deg,#ff3d5a,#ff7a3d);flex:1;margin:0}
.row2{display:flex;gap:10px;margin-top:18px}.card h3{font-size:20px}.card .sub{margin-top:6px}
.modal{z-index:20;place-items:end center;padding:16px 16px calc(16px + var(--sab))}.card{border:1px solid rgba(255,255,255,.12);animation:in .35s cubic-bezier(.2,.8,.2,1)}
.hudtop{display:flex;align-items:center;gap:12px}.hudtop .bar{flex:1}
.xbtn{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;font-size:16px;display:grid;place-items:center;backdrop-filter:blur(10px)}
.stage{width:min(72vw,315px);margin:14px auto 0}
.figure{inset:16%}
.count{position:static;display:block;text-align:center;font-size:64px;line-height:1;padding:0;margin:10px 0 2px;font-variant-numeric:tabular-nums}
.exname{margin-top:2px;font-size:30px}.cue{font-size:16px;padding:0 8px}
#screen-session .next{margin:auto auto 0}
.ctrl{gap:8px;margin-top:12px}.ctrl .chip{flex:1;max-width:100px;padding:0 8px;font-size:13px}
.lg{width:28px;height:28px}
.tlogo{width:130px;height:130px}.tlogo svg{width:100%;height:100%;overflow:visible}
.trans .tlogo{filter:drop-shadow(0 0 30px rgba(255,61,127,.6))}
.trans.go .tlogo{animation:tlogo 1.6s cubic-bezier(.2,.8,.2,1) forwards}
.trans.go .ring,.splash.go .ring{stroke-dasharray:75 100;animation:draw 1s ease-out forwards}
.trans.go .bp,.splash.go .bp{stroke-dasharray:100 100;animation:drawb .7s .75s ease-out both}
.trans.go .dot,.splash.go .dot{animation:dotspin 1.2s cubic-bezier(.5,0,.2,1) both;transform-origin:256px 256px}
@keyframes draw{from{stroke-dashoffset:75}to{stroke-dashoffset:0}}
@keyframes drawb{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes dotspin{from{transform:rotate(-270deg)}to{transform:rotate(0deg)}}
.splash{position:fixed;inset:0;z-index:30;background:#0b0a1e;display:grid;place-content:center;justify-items:center;gap:18px;pointer-events:none}
.splash .swm{font-size:30px;font-weight:800;opacity:0}.splash.go .swm{animation:ttxt 2.2s ease forwards}
.splash.go{animation:spl 2.3s ease forwards}@keyframes spl{0%,75%{opacity:1}100%{opacity:0}}
.splash.go .tlogo{animation:splogo 2.3s cubic-bezier(.2,.8,.2,1) forwards}@keyframes splogo{0%{transform:scale(.4) rotate(-120deg);opacity:0}30%{transform:scale(1.08) rotate(8deg);opacity:1}45%{transform:none}80%{transform:none}100%{transform:scale(1.6);opacity:0}}
/* ---- v3 hub/profile/icons ---- */
.ic{display:block;flex:none}
.hub{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.hubc{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;color:#fff;font-family:inherit;padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);backdrop-filter:blur(12px);min-height:128px;transition:transform .15s}
.hubc:active{transform:scale(.97)}.hubc b{font-size:17px}.hubc span:last-child{color:var(--mut);font-size:12.5px}
.hubc.big{grid-column:1/-1;min-height:150px;background:linear-gradient(135deg,rgba(255,61,127,.5),rgba(123,92,255,.45));border-color:transparent;box-shadow:0 14px 40px rgba(123,92,255,.35)}.hubc.big b{font-size:24px}.hubc.big span:last-child{color:rgba(255,255,255,.85)}
.hi{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.12)}
.rowcard{display:flex;align-items:center;gap:14px;width:100%;color:#fff;text-align:left;font-family:inherit;margin-top:18px}.rowcard small{color:var(--mut)}.rowcard>span:nth-child(2){flex:1}
.opts button{display:flex;align-items:center;gap:12px}.opts button .ic{width:22px;height:22px;opacity:.9}
.opts.big button{display:block}
.coachout{min-height:20px}#coachGo{gap:8px}
.fl{display:block;margin:18px 0 8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}.fl small{text-transform:none;letter-spacing:0;font-weight:500}
.fl input{display:block;width:100%;margin-top:8px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.15);border-radius:14px;color:#fff;padding:14px;font:16px inherit;font-family:inherit;text-transform:none;letter-spacing:0}
.chips.sel button{min-height:40px;padding:0 16px;font-weight:600}.chips.sel button.on{background:linear-gradient(135deg,rgba(255,61,127,.6),rgba(123,92,255,.6));border-color:transparent}
.saved{color:#7dffb3;min-height:20px;margin-top:14px}
.why{margin:-4px 0 8px;color:#bdb6ff}
.trophy{color:#ffd166;display:grid;place-items:center;filter:drop-shadow(0 0 30px rgba(255,209,102,.6))}
.che{color:#fff}.chm i{display:inline-flex;align-items:center;gap:4px}
.meta span{display:inline-flex;align-items:center;gap:6px}
.lg{display:block}.lg svg{width:28px;height:28px}
.tabs{grid-template-columns:repeat(5,1fr)}.tabs button{font-size:inherit}.tabs button .ic{width:21px;height:21px}
.xbtn .ic,.mic .ic{margin:auto}.mic{display:grid;place-items:center;color:#fff}
.ctrl .chip span{font-size:12.5px}
/* ---- TV pairing + remote ---- */
.tvp{display:grid;place-items:center;align-content:center;gap:3vh;height:100%;text-align:center}
.tlogo.big{width:16vh;height:16vh}
.tvstep[hidden]{display:none}.tvok{max-width:520px;margin:3vh auto 0;font-size:22px}.tvok:focus{outline:4px solid #fff;outline-offset:4px}
.tvrow{display:flex;gap:6vw;align-items:center;justify-content:center;margin-top:2vh;text-align:left}
.tvcode{font-size:14vh;font-weight:900;letter-spacing:.12em;background:linear-gradient(90deg,var(--a),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.tvqr{width:28vh;height:28vh;background:#fff;border-radius:18px;padding:1.2vh}.tvqr svg{width:100%;height:100%}
.tvstatus{margin-top:3vh;font-size:2.2vh;color:#bdb6ff}
.tvb{margin:10px auto 0}.pairin{width:100%;font:800 34px inherit;font-family:inherit;letter-spacing:.3em;text-align:center;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18);border-radius:16px;color:#fff;padding:12px;margin-top:14px}
.rmcount{font-size:120px;font-weight:900;text-align:center;margin-top:20px;line-height:1;font-variant-numeric:tabular-nums}
#screen-remote h1{text-align:center}#screen-remote .sub{text-align:center}.rmbar{margin:16px 0}
.rmgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:auto}
.rmb{min-height:96px;border-radius:22px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.09);color:#fff;font:700 15px inherit;font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.rmb.danger{background:rgba(255,61,90,.25)}
/* ---- big-screen layout (TV mode or wide desktop) ---- */
body.tv #app{max-width:none;padding:3vh 4vw}
body.tv .top{height:6vh}body.tv .wm{font-size:3vh}body.tv .lg svg{width:4vh;height:4vh}
body.tv #screen-session{display:none}
body.tv #screen-session.active{display:grid;grid-template-columns:44vw 1fr;grid-template-rows:auto 1fr auto;column-gap:4vw;align-items:center}
body.tv #screen-session .hud{grid-column:1/-1}
body.tv .hudrow{font-size:2.2vh}body.tv .bar{height:1vh}
body.tv .stage{grid-row:2/4;width:min(42vw,72vh);margin:0}
body.tv .count{grid-column:2;grid-row:2;align-self:end;font-size:22vh;text-align:left;margin:0}
body.tv .exname{grid-column:2;text-align:left;font-size:9vh;line-height:1}
body.tv .cue{grid-column:2;text-align:left;font-size:3.6vh;padding:0;margin-top:1.5vh}
body.tv .next{grid-column:2;margin:3vh 0 0;justify-self:start;font-size:3vh;padding:1.6vh 3vh}.tv .next span{font-size:1.8vh}
body.tv .ctrl,body.tv .xbtn,body.tv #tvBtn{display:none}
body.tv #screen-session.active > *:nth-child(n){grid-column:2}body.tv #screen-session.active > .hud{grid-column:1/-1}body.tv #screen-session.active > .stage{grid-column:1;grid-row:2/6}
body.tv .trans b{font-size:9vh}body.tv .trans .tlogo{width:28vh;height:28vh}body.tv .toast{font-size:8vh}
body.tv #screen-end h1{font-size:9vh}body.tv .stats b{font-size:7vh}
body.tv #screen-session.active{grid-template-rows:auto 1fr auto auto auto auto 1fr}
body.tv #screen-session.active>.stage{grid-row:2/8;grid-column:1;justify-self:center}
body.tv #screen-session.active>.count{grid-row:3}body.tv #screen-session.active>.exname{grid-row:4}body.tv #screen-session.active>.cue{grid-row:5}body.tv #screen-session.active>.next{grid-row:6}
body.tv #screen-session.active>.toast{grid-row:1}
body.tv .tabs{display:none}
body.tv .top .pill,body.tv #installBtn,body.tv .top button{display:none}
/* ---- v3.1 stage slot (ring = media stage) ---- */
.stage{--beat:0;--energy:0}
.slot{position:absolute;inset:9%;border-radius:50%;overflow:hidden;display:grid;place-items:center}
.slot>*{grid-area:1/1;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.slot .slot-figure{position:absolute;inset:6% 4% 14%}
.slot-video{width:100%;height:100%;object-fit:cover;opacity:0}
.slot-logo{display:grid;place-items:center;gap:2px;opacity:0;pointer-events:none;text-align:center}
.slot-logo .tlogo{width:44%;height:auto;aspect-ratio:1;margin:0 auto}
.slot-title{font-size:clamp(15px,5.2vw,24px);font-weight:900;letter-spacing:-.02em;max-width:84%;line-height:1.05}
.slot-sub{font-style:normal;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.slot[data-mode=figure] .slot-figure,.slot[data-mode=video] .slot-video,.slot[data-mode=logo] .slot-logo{opacity:1}
.slot[data-mode=logo] .slot-figure{opacity:0;transform:scale(.6)}
.slot[data-mode=video] .slot-figure{opacity:0}
/* beat-reactive inner glow of the stage */
.slot::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 calc(20px + var(--beat)*40px) rgba(255,61,127,calc(.08 + var(--beat)*.25))}
#ring .arc{stroke-width:calc(6px + var(--beat)*1.5px)}
#ring{filter:drop-shadow(0 0 calc(12px + var(--beat)*22px + var(--energy)*10px) var(--glow,#ff3d7f))}
/* wordmark around the inner ring */
.wmring{position:absolute;inset:0;pointer-events:none;overflow:visible}
.wmring text{font:800 11px Inter,system-ui,sans-serif;letter-spacing:.32em;fill:#fff}
.wmring .wl{opacity:0}.wmring .wl.st{fill:#fff}
.stage.intro .wmring{animation:wmspin 1.7s cubic-bezier(.3,.7,.2,1) both;transform-origin:50% 50%}
.stage.intro .wmring .wl{animation:wl 1.7s ease both;animation-delay:calc(var(--i)*22ms)}
@keyframes wl{0%{opacity:0}18%{opacity:1;fill:#ffd166}55%{opacity:.9;fill:#fff}100%{opacity:0}}
@keyframes wmspin{from{transform:rotate(-140deg)}to{transform:rotate(40deg)}}
.stage.intro .slot-logo .tlogo{animation:inspin 1.7s cubic-bezier(.2,.8,.2,1) both}
@keyframes inspin{0%{transform:scale(.2) rotate(-300deg);opacity:0}40%{transform:scale(1.08) rotate(15deg);opacity:1}55%{transform:scale(1) rotate(0)}85%{opacity:1}100%{transform:scale(.85) rotate(0);opacity:0}}
.stage.intro .slot-logo .ring{stroke-dasharray:75 100;animation:draw 1s ease-out both}
.stage.intro .slot-logo .bp{stroke-dasharray:100 100;animation:drawb .7s .75s ease-out both}
.stage.intro .slot-logo .dot{animation:dotspin 1.2s cubic-bezier(.5,0,.2,1) both;transform-origin:256px 256px}
.stage.intro .slot-title,.stage.intro .slot-sub{animation:stx 1.7s ease both}.stage.intro .slot-sub{animation-delay:.1s}
@keyframes stx{0%,25%{opacity:0;transform:translateY(10px);filter:blur(6px)}45%,82%{opacity:1;transform:none;filter:none}100%{opacity:0}}
/* final stretch: warm colours, stronger glow, count pulse */
#screen-session.final{--glow:#ff8a1f}
#screen-session.final .arc{stroke:#ff8a1f}
#screen-session.final .count{color:#ffd166;text-shadow:0 0 calc(18px + var(--beat,0)*30px) rgba(255,138,31,.8)}
#screen-session.final .slot::after{box-shadow:inset 0 0 calc(30px + var(--beat)*60px) rgba(255,138,31,calc(.18 + var(--beat)*.35))}
#screen-session.final .count.tick{animation:ftick .5s cubic-bezier(.2,.8,.2,1)}@keyframes ftick{0%{transform:scale(1.45)}}
body.tv .slot-title{font-size:4.6vh}body.tv .slot-sub{font-size:1.6vh}body.tv .wmring text{font-size:10px}
@media (prefers-reduced-motion: reduce){
 .stage.intro .wmring,.stage.intro .slot-logo .tlogo{animation:none}
 .stage.intro .wmring .wl{animation:none;opacity:.8}
 .slot>*{transition:opacity .2s}
 #screen-session.final .count.tick,.count.tick{animation:none}
 #ring .arc{stroke-width:6px}
}
.slot>*,.slot-logo{transition:none!important}
/* compact header with menu-music button */
.top .logo{min-width:0}.topr{gap:6px;flex-shrink:0}.lvl{white-space:nowrap}
.mm{padding:7px 9px}.mm.off{opacity:.55}
@media (max-width:420px){.top .wm{font-size:17px}#installBtn span{display:none}#installBtn{padding:7px 9px}.lvl{padding:7px 9px}}
.mm{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;line-height:0}.mm svg{display:block;margin:0;width:18px;height:18px}
/* ---- Daily program ---- */
.today{margin:14px 0 4px}
.tc{border-radius:22px;padding:16px;background:linear-gradient(135deg,rgba(255,209,102,.16),rgba(255,138,31,.10) 40%,rgba(123,92,255,.14));border:1px solid rgba(255,209,102,.28);display:grid;gap:9px}
.tc.lock{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.tc.done{opacity:.85}
.tch{display:flex;align-items:center;gap:8px}.tch svg{color:#ffd166}.tch b{font-size:15px}
.pp{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#ffd166;background:rgba(255,209,102,.12);padding:4px 9px;border-radius:99px}
.tc h3{margin:0;font-size:20px;font-weight:800}.tc h3 .dl{font-size:11px;color:#00e0ff;border:1px solid rgba(0,224,255,.4);border-radius:99px;padding:2px 7px;vertical-align:middle;font-weight:600}
.tc p{margin:0;color:var(--mut);font-size:13px;line-height:1.4}
.tcm{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:#e8e6ff}.tcm span{display:inline-flex;align-items:center;gap:5px}
.tcl{display:flex;align-items:center;gap:6px}
.dbars{display:inline-flex;gap:3px;align-items:flex-end}.dbars i{width:7px;height:14px;border-radius:2px;background:rgba(255,255,255,.12)}
.dbars i.on{background:#00e0ff}.dbars i.on.mid{background:#ffd166}.dbars i.on.hot{background:#ff8a1f}
.cta.sm{padding:12px 18px;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 0;width:100%}
.tgl{display:flex;align-items:center;gap:10px;margin:6px 0 10px;font-size:14px;color:#e8e6ff}.tgl small{color:var(--mut)}
.tg{width:48px;height:28px;border-radius:99px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);position:relative;padding:0;flex:none}
.tg .tgk{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.tg.on{background:linear-gradient(90deg,#ff8a1f,#ffd166);border-color:transparent}.tg.on .tgk{transform:translateX(20px)}.tg:disabled{opacity:.4}
.fb{margin:14px 0 6px;width:100%}.fbr{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fbr button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:16px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);color:#fff;font:600 13px inherit;font-family:inherit}
.fbr button.on{background:rgba(255,209,102,.2);border-color:#ffd166}
/* ---- challenge categories ---- */
.ctabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:10px -20px 4px;padding:2px 20px 6px;scroll-snap-type:x proximity}.ctabs::-webkit-scrollbar{display:none}
.ctab{flex:none;display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#e8e6ff;font:600 13px inherit;font-family:inherit;white-space:nowrap;scroll-snap-align:start}
.ctab.on{background:linear-gradient(90deg,#ff8a1f,#ffd166);color:#1a1033;border-color:transparent}
#chCatDesc{margin:2px 0 8px}
.chm .eqi{text-transform:capitalize}.chm i{display:inline-flex;align-items:center;gap:4px}
.d-beast{color:#ff5a5a}.d-hard{color:#ff8a1f}
.badge{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:99px;margin-left:8px;vertical-align:2px;display:inline-flex;align-items:center;gap:3px}
.badge.free{background:rgba(0,224,255,.15);color:#7ff0ff;border:1px solid rgba(0,224,255,.35)}
.badge.prem{background:rgba(255,209,102,.15);color:#ffd166;border:1px solid rgba(255,209,102,.4)}
/* ---- header premium + profile plan ---- */
.chip.prem{display:inline-flex;align-items:center;gap:4px;color:#1a1033;background:linear-gradient(90deg,#ff8a1f,#ffd166);font-weight:800;font-size:12px;padding:7px 10px;border:0}.chip.prem[hidden]{display:none}
@media (max-width:420px){.chip.prem span{display:none}}
.pfplan{margin:10px 0}.pact{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;padding:12px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(255,209,102,.18),rgba(255,138,31,.12));border:1px solid rgba(255,209,102,.4)}
.pact svg{grid-row:span 2;color:#ffd166}.pact span{font-size:12px;color:var(--mut)}.pact.free{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}.pact.free svg{color:#e8e6ff}.pact .link2{grid-column:1/-1;justify-self:start}
.link2{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:#ffd166;font:600 14px inherit;font-family:inherit;padding:8px 0}
.pflinks{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}
/* ---- plans ---- */
.sh{font-size:17px;margin:22px 0 10px}.sh small{font-weight:500;color:var(--mut);font-size:12px;margin-left:6px}
.plcards{display:grid;gap:12px;margin-top:12px}
.plc{position:relative;padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);display:grid;gap:10px}
.plc.premium{background:linear-gradient(140deg,rgba(255,209,102,.2),rgba(255,138,31,.12) 45%,rgba(123,92,255,.16));border-color:rgba(255,209,102,.5)}
.plh{display:flex;gap:10px;align-items:center}.plh svg{color:#ffd166}.plh b{display:block;font-size:20px}.plh span{font-size:12px;color:var(--mut)}
.plp{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.ppr{display:flex;align-items:baseline;gap:5px}.ppr b{font-size:30px;font-weight:900;letter-spacing:-.02em}.ppr span{color:var(--mut);font-size:13px}.ppr.alt b{font-size:20px}.ppr i{font-style:normal;font-size:11px;font-weight:700;color:#1a1033;background:#ffd166;border-radius:99px;padding:2px 7px}
.plc ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}.plc li{display:flex;gap:8px;align-items:flex-start}.plc li svg{color:#7ff0ff;flex:none;margin-top:2px}
.plact{position:absolute;top:14px;right:14px;font-size:11px;font-weight:800;color:#1a1033;background:#ffd166;border-radius:99px;padding:3px 9px}
.cta.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);box-shadow:none}
.plfree{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:#e8e6ff;margin:14px 2px 4px}.plfree em{color:var(--mut);font-style:normal}
/* ---- teams ---- */
.tmpoints{display:grid;gap:10px;margin-top:12px}.tmp{display:flex;gap:12px;padding:12px;border-radius:16px;background:rgba(255,255,255,.05)}.tmp svg{color:#ffd166;flex:none}.tmp b{display:block;font-size:14px}.tmp span{font-size:12.5px;color:var(--mut);line-height:1.4}
.tmboard{display:grid;gap:8px}.tmr{display:grid;grid-template-columns:20px 90px 1fr auto;gap:8px;align-items:center;font-size:13px}.tmr i{font-style:normal;color:#ffd166;font-weight:800}
.tmbar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.tmbar em{display:block;height:100%;background:linear-gradient(90deg,#ff8a1f,#ffd166)}.tmr s{text-decoration:none;color:var(--mut)}
.demof{display:grid;gap:4px}.demof input,.demof select,.demof textarea{width:100%;margin-top:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:12px;color:#fff;padding:11px;font:15px inherit;font-family:inherit}
.ctabs{flex:none;margin:12px 0 4px;padding:2px 0 8px;min-height:46px}.ctab{min-height:38px}#chCatDesc,.sh,.plcards,.plc,.tmpoints,.tmboard,.demof,.pfplan,.today,.chlist>*{flex-shrink:0}
.badge.teams{background:rgba(0,224,255,.12);color:#7ff0ff;border:1px solid rgba(0,224,255,.35)}
/* v4.3 exercise video in ring: graded + vignette so it reads as part of the stage */
.slot-video{position:absolute;inset:0;z-index:0;filter:saturate(.78) contrast(1.08) brightness(.86) hue-rotate(-8deg);transition:opacity .35s}
.slot::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s;
 background:radial-gradient(circle at 50% 45%,transparent 34%,rgba(124,58,237,.55) 62%,rgba(236,72,153,.8) 84%,rgba(10,6,24,.95) 100%),
 linear-gradient(160deg,rgba(236,72,153,.45),rgba(124,58,237,.3) 50%,rgba(34,211,238,.35));mix-blend-mode:overlay}
.slot[data-mode=video]::before{opacity:1}
.slot::after{z-index:2}
.slot>.slot-figure,.slot>.slot-logo{z-index:1}

/* v4.4 ring: inner content tucks under the stroke and pulses with the ring -> no gap */
.stage{--ps:1}
.slot{inset:6.4%;z-index:1;transform:scale(var(--ps));will-change:transform}
#ring{z-index:2}.wmring{z-index:3;transform:scale(var(--ps))}
#ring .halo{fill:none;stroke:#fff;stroke-width:1;stroke-dasharray:2 7;opacity:calc(.12 + var(--energy)*.25);transform-origin:110px 110px;animation:halo 24s linear infinite}
#ring .halo2{fill:none;stroke:var(--glow,#ff3d7f);stroke-width:.8;stroke-dasharray:40 260;opacity:calc(.25 + var(--beat)*.5);transform-origin:110px 110px;animation:halo 9s linear infinite reverse}
@keyframes halo{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#ring .halo,#ring .halo2{animation:none}}
/* ===== v4.7 session layout: bigger centered ring, beat only on the line ===== */
#screen-session .stage{width:min(86vw,46vh,420px);margin:auto auto 0}
#screen-session .count{margin-top:clamp(8px,2vh,18px)}
#screen-session .next{margin:clamp(10px,3vh,28px) auto 0}
#screen-session .ctrl{margin-top:clamp(10px,2vh,16px);margin-bottom:auto;padding-top:clamp(10px,3vh,26px)}
@media (max-height:700px){#screen-session .stage{width:min(80vw,42vh)}#screen-session .count{font-size:52px}#screen-session .exname{font-size:26px}}
.slot{transform:none}.wmring{transform:none}
#ring .arc{stroke-width:calc(6px + var(--beat)*.9px)}
#ring .halo{opacity:calc(.07 + var(--energy)*.1)}#ring .halo2{opacity:calc(.12 + var(--beat)*.18)}
.sline,.nthumb{display:none}
/* red final-stretch atmosphere */
.redwash{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity 1.2s ease;overflow:hidden;
 background:radial-gradient(120% 80% at 50% 110%,rgba(255,40,40,.42),transparent 60%),radial-gradient(90% 60% at 50% -10%,rgba(200,20,60,.28),transparent 65%),linear-gradient(180deg,rgba(120,0,20,.25),rgba(160,10,10,.35));
 box-shadow:inset 0 0 calc(80px + var(--beat,0)*60px) rgba(255,30,30,.45)}
#screen-session{position:relative}
#screen-session>*:not(.redwash):not(.toast){position:relative;z-index:1}
#screen-session.final .redwash{opacity:1}
.redwash i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#ff6a3d;box-shadow:0 0 8px 2px rgba(255,80,40,.8);opacity:0;animation:ember 6s linear infinite}
.redwash i:nth-child(1){left:6%;animation-delay:0s}.redwash i:nth-child(2){left:14%;animation-delay:2.1s;animation-duration:7s}.redwash i:nth-child(3){left:23%;animation-delay:4s}.redwash i:nth-child(4){left:31%;animation-delay:1s;animation-duration:8s}
.redwash i:nth-child(5){left:42%;animation-delay:3.2s}.redwash i:nth-child(6){left:52%;animation-delay:.6s;animation-duration:7.5s}.redwash i:nth-child(7){left:61%;animation-delay:2.7s}.redwash i:nth-child(8){left:70%;animation-delay:4.6s;animation-duration:6.5s}
.redwash i:nth-child(9){left:78%;animation-delay:1.6s}.redwash i:nth-child(10){left:86%;animation-delay:3.7s;animation-duration:8s}.redwash i:nth-child(11){left:93%;animation-delay:.3s}.redwash i:nth-child(12){left:47%;animation-delay:5.2s;animation-duration:9s;width:3px;height:3px}
@keyframes ember{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}70%{opacity:.6}100%{transform:translate(30px,-95vh);opacity:0}}
#screen-session.final .slot-video{filter:saturate(.9) contrast(1.1) brightness(.85) sepia(.35) hue-rotate(-30deg)}
.slot-video{transition:opacity .35s,filter 1.2s ease}
#screen-session.final .slot::before{background:radial-gradient(circle at 50% 45%,transparent 34%,rgba(200,20,40,.55) 64%,rgba(255,50,40,.85) 86%,rgba(30,4,6,.95) 100%),linear-gradient(160deg,rgba(255,60,60,.5),rgba(180,20,40,.35))}
#screen-session.final #ring{filter:drop-shadow(0 0 calc(10px + var(--beat)*16px) rgba(255,50,40,.85))}
@media (prefers-reduced-motion:reduce){.redwash i{display:none}.redwash{transition:opacity .3s}}
/* ===== shared landscape layout: desktop + TV ===== */
body.land #screen-session.active{display:grid;grid-template-columns:50% 50%;grid-template-rows:auto 1fr auto auto auto auto auto auto 1fr;column-gap:0;align-items:center}
body.land #screen-session.active>.hud{grid-column:1/-1;grid-row:1}
body.land #screen-session.active>.stage{grid-column:1;grid-row:2/10;justify-self:center;align-self:center;width:min(42vw,74vh);margin:0}
body.land #screen-session.active>*:not(.hud):not(.stage):not(.redwash):not(.toast){grid-column:2;justify-self:start;text-align:left;max-width:44vw;margin-left:2vw}
body.land .sline{display:flex;grid-row:3;flex-direction:column;gap:1.4vh}
body.land #sMove{font-size:clamp(12px,1.7vh,22px);letter-spacing:.28em;color:var(--mut);font-weight:700}
body.land .segs{display:flex;gap:.6vh}body.land .segs i{width:4.2vh;height:.6vh;border-radius:9px;background:rgba(255,255,255,.14)}
body.land .segs i.d{background:rgba(255,255,255,.55)}body.land .segs i.c{background:var(--glow,#ff3d7f);box-shadow:0 0 calc(6px + var(--beat,0)*14px) var(--glow,#ff3d7f)}
body.land #screen-session.active>.exname{grid-row:4;font-size:clamp(34px,8vh,110px);line-height:.95;margin-top:2.4vh;letter-spacing:-.04em}
body.land #screen-session.active>.count{grid-row:5;position:static;font-size:clamp(70px,20vh,260px);line-height:.9;margin-top:1vh;text-align:left;font-variant-numeric:tabular-nums}
body.land #screen-session.active>.cue{grid-row:6;font-size:clamp(16px,3vh,40px);margin-top:1.4vh;padding:0;border-left:3px solid var(--glow,#ff3d7f);padding-left:1.6vh;min-height:0}
body.land #screen-session.active>.next{grid-row:7;margin-top:4vh;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:1.8vh;align-items:center;padding:1.4vh 3vh 1.4vh 1.4vh;border-radius:2vh;font-size:clamp(15px,2.6vh,34px);border:1px solid rgba(255,255,255,.12)}
body.land .next span{font-size:clamp(10px,1.4vh,18px)!important;grid-column:2;align-self:end}body.land .next b{grid-column:2;align-self:start}
body.land .nthumb:not([hidden]){display:block;grid-row:1/3;width:9vh;height:9vh;border-radius:1.4vh;object-fit:cover;filter:saturate(.78) brightness(.86)}
body.land #screen-session.active>.ctrl{grid-row:8;margin-top:3vh;padding:0;justify-content:flex-start}
body.tv.land #screen-session.active>.ctrl{display:none}
body.land #app:has(#screen-session.active){max-width:none;padding:3vh 4vw}
body.land #screen-session.active>.count{margin-top:2.5vh}
body.land #screen-session.active>.cue{max-width:36vw}
.slot{clip-path:circle(50% at 50% 50%);isolation:isolate}
#screen-session.final .slot::before{mix-blend-mode:normal;opacity:.55}
/* ===== v4.8: info around the ring, beat pulse back, fixed name/cue boxes ===== */
.slot{transform:scale(var(--ps,1))}.wmring{transform:scale(var(--ps,1))}
#screen-session .hudtop .bar,body.land .sline,#screen-session #phaseLbl{visibility:hidden}
#screen-session .hudtop .bar{height:0}
.mticks circle{fill:rgba(255,255,255,.18);transition:fill .4s,r .4s}
.mticks circle.d{fill:rgba(255,255,255,.6)}
.mticks circle.c{fill:var(--glow,#ff3d7f);filter:drop-shadow(0 0 calc(2px + var(--beat,0)*4px) var(--glow,#ff3d7f))}
.wmring .mlbl{font:700 5px Inter,system-ui,sans-serif;letter-spacing:.26em;fill:rgba(255,255,255,.62)}
#screen-session.final .mlbl{fill:#ffd166}
#screen-session .exname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:1.15em;line-height:1.15;max-width:100%}
#screen-session .cue{height:2.7em;line-height:1.35;min-height:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-style:italic;letter-spacing:.01em}
#screen-session .cue::before{content:"";display:inline-block;width:14px;height:2px;border-radius:2px;background:var(--glow,#ff3d7f);vertical-align:middle;margin-right:8px;transform:translateY(-2px)}
.cue.cin{animation:cuein .6s cubic-bezier(.2,.8,.2,1)}@keyframes cuein{from{opacity:0;transform:translateY(6px);filter:blur(4px)}}
body.land #screen-session.active>.cue{border-left:0;padding-left:0;height:2.7em}
body.land #screen-session.active>.exname{height:1.1em;line-height:1.1;max-width:44vw}
body.land #screen-session.active>.count{grid-row:5}
@media (prefers-reduced-motion:reduce){.cue.cin{animation:none}}
/* v4.9 */
#screen-session .hudrow{display:none}
.wmring .clbl{fill:#ffd166}
#screen-session .cue::before{content:none;display:none}
/* v4.10 session header: level + X only */
.tq{display:none}
body.insess .tq{display:grid}
body.insess #menuMusicBtn,body.insess #installBtn{display:none!important}
body.insess #screen-session .hudtop{display:none}
body.tv.insess .tq{display:none}
/* v4.12: dynamic viewport, bottom-anchored controls, total progress bar, scroll fade masks */
html,body{height:100%;height:100dvh}
#app{height:100%;height:100dvh;padding-bottom:max(14px,env(safe-area-inset-bottom))}
#screen-session{min-height:0}
#screen-session .stage{margin:auto auto 0}
#screen-session .next{margin-top:auto}
#screen-session .ctrl{margin:clamp(12px,2.2vh,20px) auto 0;padding-top:0;width:100%}
#screen-session .cue{margin-bottom:clamp(10px,3vh,28px)}
body.insess #screen-session .hudtop{display:flex;margin-top:4px}
body.insess #screen-session .hudtop .xbtn{display:none}
#screen-session .hudtop .bar{visibility:visible;height:3px;border-radius:3px;background:rgba(255,255,255,.1)}
.screen.tabbed{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22px,#000 calc(100% - 96px),transparent calc(100% - 60px));mask-image:linear-gradient(to bottom,transparent 0,#000 22px,#000 calc(100% - 96px),transparent calc(100% - 60px))}
.screen.tabbed>:first-child{margin-top:14px}
/* v4.13 mobile next-up card */
#screen-session .next{display:grid;grid-template-columns:52px 1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;height:72px;width:min(100%,340px);padding:10px 16px 10px 10px;border-radius:18px;border:1px solid rgba(255,255,255,.12);text-align:left}
#screen-session .next>span{grid-column:2;grid-row:1;align-self:end;font-size:10px}
#screen-session .next>b{grid-column:2;grid-row:2;align-self:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}
#screen-session .next .ndur{grid-column:3;grid-row:1/3;font-style:normal;font-weight:700;font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums}
#screen-session .nthumb:not([hidden]),#screen-session .nfig:not([hidden]){display:block;grid-column:1;grid-row:1/3;width:52px;height:52px;border-radius:12px;object-fit:cover}
#screen-session .nthumb{filter:saturate(.78) brightness(.86)}
#screen-session .nfig{position:relative;inset:auto;background:rgba(255,255,255,.06);overflow:hidden}
.nfig[hidden]{display:none!important}
body.land .nfig:not([hidden]){grid-row:1/3;width:9vh;height:9vh;border-radius:1.4vh}
body.land #screen-session.active>.next{grid-template-columns:auto 1fr auto;height:auto;width:auto}
body.land #screen-session.active>.next .ndur{font-size:clamp(12px,1.8vh,24px)}
body.spaused #screen-session *,body.spaused #screen-session *::before,body.spaused #screen-session *::after{animation-play-state:paused!important}
/* v4.15 gentler scroll fades: eased multi-stop, top fade only once scrolled */
.screen.tabbed{--ft:0px;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.12) 0,rgba(0,0,0,.3) calc(var(--ft)*.18),rgba(0,0,0,.55) calc(var(--ft)*.4),rgba(0,0,0,.8) calc(var(--ft)*.65),rgba(0,0,0,.95) calc(var(--ft)*.85),#000 var(--ft),#000 calc(100% - 150px),rgba(0,0,0,.92) calc(100% - 132px),rgba(0,0,0,.75) calc(100% - 114px),rgba(0,0,0,.5) calc(100% - 96px),rgba(0,0,0,.26) calc(100% - 80px),rgba(0,0,0,.08) calc(100% - 66px),transparent calc(100% - 58px));mask-image:linear-gradient(to bottom,rgba(0,0,0,.12) 0,rgba(0,0,0,.3) calc(var(--ft)*.18),rgba(0,0,0,.55) calc(var(--ft)*.4),rgba(0,0,0,.8) calc(var(--ft)*.65),rgba(0,0,0,.95) calc(var(--ft)*.85),#000 var(--ft),#000 calc(100% - 150px),rgba(0,0,0,.92) calc(100% - 132px),rgba(0,0,0,.75) calc(100% - 114px),rgba(0,0,0,.5) calc(100% - 96px),rgba(0,0,0,.26) calc(100% - 80px),rgba(0,0,0,.08) calc(100% - 66px),transparent calc(100% - 58px))}
#installBtn[hidden]{display:none!important}
/* home hero: brand athlete */
.hhero{position:relative;margin:0 calc(-1*var(--pad)) 6px;aspect-ratio:16/10;max-height:46vh;overflow:hidden;display:flex;align-items:flex-end}
.hhero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;-webkit-mask:linear-gradient(180deg,transparent 0,#000 14%,#000 55%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 14%,#000 55%,transparent 100%)}
.hhero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,10,30,.55),transparent 40%,transparent 60%,rgba(11,10,30,.55));pointer-events:none}
.hht{position:relative;z-index:1;padding:0 var(--pad) 4px}
.hhero{flex-shrink:0;height:min(56vw,300px);aspect-ratio:auto}
.hhero{margin-left:0;margin-right:0}.hhero img{-webkit-mask:radial-gradient(ellipse 62% 78% at 50% 38%,#000 45%,transparent 100%);mask:radial-gradient(ellipse 62% 78% at 50% 38%,#000 45%,transparent 100%)}.hhero:after{display:none}
.hhero img{mix-blend-mode:lighten;-webkit-mask:radial-gradient(ellipse 50% 58% at 50% 40%,#000 40%,transparent 100%);mask:radial-gradient(ellipse 50% 58% at 50% 40%,#000 40%,transparent 100%)}
/* beFit athlete stage: live ring behind cutout */
.stg{--h:600px;position:relative;height:var(--h);width:calc(var(--h)*.82);margin:0 auto;pointer-events:none;isolation:isolate}
.stg .sr{position:absolute;left:50%;top:calc(var(--h)*-.02);width:calc(var(--h)*.74);height:calc(var(--h)*.74);transform:translateX(-50%);z-index:0;overflow:visible;animation:srb .5s ease-in-out infinite alternate,srf 7s steps(1) infinite}
.stg .sr .dots{fill:none;stroke:rgba(255,255,255,.28);stroke-width:2.2;stroke-dasharray:.12 1.3;stroke-linecap:round;transform-origin:200px 200px;animation:srs 80s linear infinite reverse}
.stg .sr .trk{fill:none;stroke:rgba(255,255,255,.1);stroke-width:14}
.stg .sr .spin{transform-origin:200px 200px;animation:srs 48s linear 2s infinite}
.stg .sr .arc{fill:none;stroke:url(#srg);stroke-width:14;stroke-linecap:round;stroke-dasharray:75 100;stroke-dashoffset:75;animation:srd 1.8s cubic-bezier(.6,0,.2,1) .2s forwards}
.stg .sr .gd{fill:#ffd166;opacity:0;animation:srp .4s ease-out 1.9s forwards}
.stg .sr .halo{fill:none;stroke:url(#srg);stroke-width:34;opacity:.22;filter:blur(14px);stroke-dasharray:75 100;stroke-dashoffset:75;animation:srd 1.8s cubic-bezier(.6,0,.2,1) .2s forwards}
.stg .ath{position:absolute;left:50%;bottom:calc(var(--h)*.03);height:calc(var(--h)*.95);width:auto;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 0 calc(var(--h)*.03) rgba(123,92,255,.35));animation:ain 1.2s cubic-bezier(.2,.7,.2,1) both}
.stg .refl{position:absolute;left:50%;top:calc(var(--h)*1.92);height:calc(var(--h)*.95);transform:translateX(-50%) scaleY(-1);transform-origin:top;z-index:1;opacity:.16;-webkit-mask:linear-gradient(to top,#000,transparent 14%);mask:linear-gradient(to top,#000,transparent 14%);filter:blur(1.5px)}
.stg .flr{position:absolute;left:50%;bottom:calc(var(--h)*.005);width:calc(var(--h)*.78);height:calc(var(--h)*.08);transform:translateX(-50%);z-index:1;border-radius:50%;background:radial-gradient(closest-side,rgba(0,224,255,.45),rgba(123,92,255,.28) 45%,rgba(255,61,127,.12) 70%,transparent);filter:blur(4px);animation:flp .5s ease-in-out infinite alternate}
@keyframes srd{to{stroke-dashoffset:0}}
@keyframes srp{to{opacity:1}}
@keyframes srs{to{transform:rotate(360deg)}}
@keyframes srg2{0%,100%{stroke-dasharray:75 100}50%{stroke-dasharray:82 100}}
@keyframes srb{from{filter:drop-shadow(0 0 6px rgba(0,224,255,.25))}to{filter:drop-shadow(0 0 18px rgba(0,224,255,.55))}}
@keyframes srf{0%,100%{opacity:1}61%{opacity:.82}62%{opacity:1}64%{opacity:.88}65%{opacity:1}}
@keyframes flp{from{opacity:.65}to{opacity:1}}
@keyframes ain{from{opacity:0;transform:translateX(-50%) translateY(14px)}}
@media(prefers-reduced-motion:reduce){.stg *,.stg .sr{animation:none!important}.stg .sr .arc,.stg .sr .halo{stroke-dashoffset:0}.stg .sr .gd{opacity:1}}
.hhero{height:300px;max-height:none;overflow:visible}
.hhero:after{display:none}
.hhero .stg{--h:290px;position:absolute;right:-6px;bottom:0;margin:0}
.hht{max-width:62%}
.hhero .stg img{inset:auto;left:50%;width:auto;height:calc(var(--h)*.95);-webkit-mask:none;mask:none;mix-blend-mode:normal;object-fit:initial}.hhero .stg img.ath{bottom:calc(var(--h)*.03)}.hhero .stg img.refl{top:calc(var(--h)*1.92);-webkit-mask:linear-gradient(to top,#000,transparent 14%);mask:linear-gradient(to top,#000,transparent 14%)}

#screen-ready .rdyrow{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:auto;padding:10px 2px calc(6px + env(safe-area-inset-bottom))}#screen-ready .rdyrow .tvb{margin:0}#screen-ready .bkb{font-weight:500}
#screen-ready .rdyrow{flex-direction:row-reverse}
.ncup{display:flex;align-items:center;justify-content:center;color:#ffd166;background:radial-gradient(circle,rgba(255,209,102,.25),rgba(255,209,102,.05) 70%);filter:drop-shadow(0 0 10px rgba(255,209,102,.45))}.ncup[hidden]{display:none}