:root {
  --background: 220 42% 4%;
  --foreground: 160 20% 96%;
  --primary: 141 100% 52%;
  --secondary: 192 100% 48%;
  --muted: 220 18% 18%;
  --muted-foreground: 160 12% 72%;
  --destructive: 0 84% 58%;
  --border: 150 22% 22%;
  --card: 222 38% 8%;
  --shadow-sm: 0 6px 18px rgba(0,0,0,.22);
  --shadow-md: 0 18px 45px rgba(0,255,106,.14);
  --shadow-lg: 0 30px 90px rgba(0,0,0,.55);
  --transition-fast: 160ms ease;
  --transition-smooth: 520ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
}
.dark { --background: 220 42% 4%; --foreground: 160 20% 96%; --card: 222 38% 8%; --border: 150 22% 22%; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 50% -10%, hsl(var(--primary)/.12), transparent 34%), hsl(var(--background)); color: hsl(var(--foreground)); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, select, input { font-size: max(16px, 1rem); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 3px; }
.glass { background: linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.48)); backdrop-filter: blur(18px); border-bottom: 1px solid hsl(var(--border)); }
.badge { min-height: 44px; display:flex; align-items:center; border-radius: 18px; padding: 10px 12px; background: hsl(var(--primary) / .12); color: hsl(var(--primary)); font-weight: 800; }
.camera-sweep { background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.08) 35%, transparent 65%); animation: sweep 6s infinite var(--transition-smooth); }
.youtube-frame, .youtube-player, .youtube-controls, .coach-subtitles, .mini-angle { box-shadow: 0 20px 60px rgba(0,0,0,.28); backdrop-filter: blur(12px); }
.yt-progress { width: 38%; animation: ytLoop 6s infinite linear; box-shadow: 0 0 18px hsl(var(--primary)); }
.live-trainer-stage { position:relative; aspect-ratio:16/9; min-height:260px; overflow:hidden; background:radial-gradient(circle at 50% 20%, hsl(var(--secondary)/.16), transparent 35%), linear-gradient(160deg,#050707,#101816 60%,#020303); }
.live-trainer-stage::before { content:""; position:absolute; inset:-20%; z-index:1; pointer-events:none; background:radial-gradient(circle at 50% 10%, transparent 38%, rgba(0,0,0,.42) 78%), linear-gradient(115deg, transparent 0%, rgba(255,255,255,.08) 34%, transparent 58%); mix-blend-mode:screen; animation:sweep 7s infinite var(--transition-smooth); }
.live-trainer-video { position:absolute; inset:0; z-index:0; width:100%; height:100%; border:0; background:#050505; }
.live-video-empty { position:absolute; inset:0; display:grid; place-content:center; padding:24px; text-align:center; background:linear-gradient(145deg,#050807,#101816); }
.demo-paused .yt-progress { animation-play-state:paused !important; }
.demo-slow .yt-progress { animation-duration:10s !important; }
.demo-stage { position:relative; aspect-ratio:16/9; min-height:260px; overflow:hidden; background:radial-gradient(circle at 50% 20%, hsl(var(--secondary)/.16), transparent 35%), linear-gradient(160deg,#050707,#101816 60%,#020303); }
.demo-bg-grid { position:absolute; inset:auto 4% 2% 4%; height:42%; background-image:linear-gradient(hsl(var(--primary)/.18) 1px,transparent 1px),linear-gradient(90deg,hsl(var(--primary)/.16) 1px,transparent 1px); background-size:44px 22px; transform:perspective(520px) rotateX(62deg); filter:drop-shadow(0 0 18px hsl(var(--primary)/.18)); }
.demo-camera-tag { position:absolute; left:16px; bottom:72px; z-index:5; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.58); padding:8px 11px; color:white; font-size:10px; font-weight:900; letter-spacing:.16em; }
.demo-person { position:absolute; left:50%; top:50%; width:190px; height:260px; transform:translate(-50%,-48%); transform-origin:50% 55%; filter:drop-shadow(0 28px 34px rgba(0,0,0,.55)); animation:demoBreathe 2.4s infinite ease-in-out; }
.demo-slow .demo-person, .demo-slow .demo-person *, .demo-slow .demo-prop { animation-duration:4.2s !important; }
.demo-paused .demo-person, .demo-paused .demo-person *, .demo-paused .demo-prop { animation-play-state:paused !important; }
.demo-aura { position:absolute; inset:20px 34px; border-radius:999px; background:radial-gradient(circle,hsl(var(--primary)/.22),transparent 65%); filter:blur(16px); animation:demoPulse 2.6s infinite ease-in-out; }
.demo-head { position:absolute; left:74px; top:4px; width:43px; height:49px; border-radius:44% 44% 48% 48%; background:linear-gradient(145deg,#2b211d,#a87358 58%,#eeb08a); box-shadow:0 0 22px hsl(var(--primary)/.22); overflow:hidden; }
.demo-head span { position:absolute; inset:0 0 auto 0; height:14px; background:#0b0d0c; border-radius:0 0 55% 55%; }
.demo-neck { position:absolute; left:86px; top:51px; width:18px; height:18px; border-radius:7px; background:#8d624e; }
.demo-body { position:absolute; left:57px; top:63px; width:76px; height:98px; border-radius:28px 28px 18px 18px; background:linear-gradient(135deg,#050807,#121918 60%,hsl(var(--primary)/.72)); border:1px solid rgba(255,255,255,.12); transform-origin:50% 12%; animation:demoTorso 2.3s infinite ease-in-out; }
.demo-body b { position:absolute; left:14px; bottom:15px; color:hsl(var(--primary)); font-size:10px; letter-spacing:.12em; } .demo-body i { position:absolute; right:13px; top:8px; width:7px; height:78px; border-radius:99px; background:hsl(var(--primary)); box-shadow:0 0 15px hsl(var(--primary)); }
.demo-arm,.demo-forearm,.demo-leg,.demo-shin,.demo-shoe { position:absolute; border-radius:999px; background:linear-gradient(180deg,#202927,#050606); transform-origin:top center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.demo-arm { width:20px; height:62px; top:73px; } .demo-forearm { width:18px; height:58px; top:126px; } .demo-leg { width:25px; height:72px; top:151px; } .demo-shin { width:22px; height:62px; top:213px; } .demo-shoe { width:48px; height:16px; top:256px; background:linear-gradient(90deg,#050505,hsl(var(--primary)/.78)); }
.demo-arm-left { left:36px; animation:demoArmL 2.3s infinite ease-in-out; } .demo-arm-right { right:36px; animation:demoArmR 2.3s infinite ease-in-out; }
.demo-forearm-left { left:29px; animation:demoForeL 2.3s infinite ease-in-out; } .demo-forearm-right { right:29px; animation:demoForeR 2.3s infinite ease-in-out; }
.demo-leg-left { left:64px; animation:demoLegL 2.3s infinite ease-in-out; } .demo-leg-right { right:64px; animation:demoLegR 2.3s infinite ease-in-out; }
.demo-shin-left { left:58px; animation:demoShinL 2.3s infinite ease-in-out; } .demo-shin-right { right:58px; animation:demoShinR 2.3s infinite ease-in-out; }
.demo-shoe-left { left:39px; animation:demoShoeL 2.3s infinite ease-in-out; } .demo-shoe-right { right:39px; animation:demoShoeR 2.3s infinite ease-in-out; }
.demo-prop { display:none; position:absolute; left:50%; bottom:26%; width:220px; height:16px; border-radius:999px; transform:translateX(-50%); background:linear-gradient(90deg,hsl(var(--primary)/.12),hsl(var(--primary)/.75),hsl(var(--primary)/.12)); box-shadow:0 0 24px hsl(var(--primary)/.28); }
.pushups .demo-person,.inclinepush .demo-person,.mountain .demo-person,.plank .demo-person { transform:translate(-50%,-42%) rotate(-90deg) scale(.88); animation:pushBody 2.4s infinite ease-in-out; }
.pushups .demo-arm,.pushups .demo-forearm,.inclinepush .demo-arm,.inclinepush .demo-forearm { animation:pushArms 2.4s infinite ease-in-out; }
.squats .demo-body,.gobletsquat .demo-body { animation:squatTorso 2.4s infinite ease-in-out; } .squats .demo-leg,.squats .demo-shin,.gobletsquat .demo-leg,.gobletsquat .demo-shin { animation:squatLegs 2.4s infinite ease-in-out; }
.dips .demo-prop,.benchdips .demo-prop,.stepups .demo-prop { display:block; } .dips .demo-person,.benchdips .demo-person { top:46%; animation:dipBody 2.1s infinite ease-in-out; } .dips .demo-arm,.dips .demo-forearm,.benchdips .demo-arm,.benchdips .demo-forearm { animation:dipArms 2.1s infinite ease-in-out; }
.lunges .demo-leg-left,.lunges .demo-shin-left { animation:lungeFront 2.3s infinite ease-in-out; } .lunges .demo-leg-right,.lunges .demo-shin-right { animation:lungeBack 2.3s infinite ease-in-out; }
.mountain .demo-leg-left,.mountain .demo-shin-left { animation:climbA 1.2s infinite ease-in-out; } .mountain .demo-leg-right,.mountain .demo-shin-right { animation:climbB 1.2s infinite ease-in-out; }
.burpee .demo-person { animation:burpee 2.4s infinite ease-in-out; } .stepups .demo-person { animation:stepup 2.2s infinite ease-in-out; } .deadbug .demo-person { transform:translate(-50%,-42%) rotate(90deg) scale(.82); animation:deadbug 2.5s infinite ease-in-out; }
@keyframes sweep { 0%{transform:translateX(-80%)} 55%,100%{transform:translateX(80%)} }
@keyframes ytLoop { 0%{width:0%} 92%{width:100%} 100%{width:0%} }
@keyframes demoPulse { 0%,100%{transform:scale(.95);opacity:.55} 50%{transform:scale(1.08);opacity:1} }
@keyframes demoBreathe { 0%,100%{translate:0 0} 50%{translate:0 -4px} }
@keyframes demoTorso { 0%,100%{transform:rotate(0)} 50%{transform:rotate(2deg)} }
@keyframes demoArmL { 0%,100%{transform:rotate(14deg)} 50%{transform:rotate(35deg)} } @keyframes demoArmR { 0%,100%{transform:rotate(-14deg)} 50%{transform:rotate(-35deg)} }
@keyframes demoForeL { 0%,100%{transform:rotate(24deg)} 50%{transform:rotate(48deg)} } @keyframes demoForeR { 0%,100%{transform:rotate(-24deg)} 50%{transform:rotate(-48deg)} }
@keyframes demoLegL { 0%,100%{transform:rotate(4deg)} 50%{transform:rotate(16deg)} } @keyframes demoLegR { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(-16deg)} }
@keyframes demoShinL { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(-18deg)} } @keyframes demoShinR { 0%,100%{transform:rotate(2deg)} 50%{transform:rotate(18deg)} }
@keyframes demoShoeL { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-10px)} } @keyframes demoShoeR { 0%,100%{transform:translateX(0)} 50%{transform:translateX(10px)} }
@keyframes pushBody { 0%,100%{transform:translate(-50%,-42%) rotate(-90deg) scale(.88)} 50%{transform:translate(-50%,-30%) rotate(-90deg) scale(.88)} }
@keyframes pushArms { 0%,100%{height:62px} 50%{height:41px} }
@keyframes squatTorso { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(42px) rotate(-8deg)} }
@keyframes squatLegs { 0%,100%{transform:rotate(0)} 50%{transform:rotate(34deg)} }
@keyframes dipBody { 0%,100%{transform:translate(-50%,-48%)} 50%{transform:translate(-50%,-32%)} }
@keyframes dipArms { 0%,100%{height:62px} 50%{height:41px; transform:rotate(8deg)} }
@keyframes lungeFront { 0%,100%{transform:rotate(8deg)} 50%{transform:rotate(48deg)} }
@keyframes lungeBack { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(-42deg)} }
@keyframes climbA { 0%,100%{transform:rotate(8deg) translateY(0)} 50%{transform:rotate(62deg) translateY(-20px)} }
@keyframes climbB { 0%,100%{transform:rotate(-62deg) translateY(-20px)} 50%{transform:rotate(-8deg) translateY(0)} }
@keyframes burpee { 0%,100%{transform:translate(-50%,-48%) scale(1)} 45%{transform:translate(-50%,-28%) rotate(-80deg) scale(.9)} 70%{transform:translate(-50%,-58%) scale(1.05)} }
@keyframes stepup { 0%,100%{transform:translate(-50%,-38%)} 50%{transform:translate(-50%,-58%)} }
@keyframes deadbug { 0%,100%{transform:translate(-50%,-42%) rotate(90deg) scale(.82)} 50%{transform:translate(-42%,-42%) rotate(90deg) scale(.86)} }
@media (min-width: 640px) { .demo-stage, .live-trainer-stage { min-height:360px; } .demo-person { width:220px; height:300px; } }