:root {
  --background: 165 38% 3%;
  --foreground: 150 28% 94%;
  --primary: 126 100% 56%;
  --secondary: 164 22% 13%;
  --muted: 150 10% 66%;
  --destructive: 0 88% 61%;
  --border: 145 28% 20%;
  --card: 164 36% 7%;
  --shadow-sm: 0 8px 22px hsl(126 100% 56% / 0.08);
  --shadow-md: 0 18px 42px hsl(126 100% 56% / 0.18);
  --shadow-lg: 0 30px 80px hsl(0 0% 0% / 0.48), 0 0 70px hsl(126 100% 56% / 0.10);
  --transition-fast: 150ms ease;
  --transition-smooth: 360ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.75rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.65rem;
}
.dark {
  --background: 165 38% 3%;
  --foreground: 150 28% 94%;
  --primary: 126 100% 56%;
  --secondary: 164 22% 13%;
  --muted: 150 10% 66%;
  --destructive: 0 88% 61%;
  --border: 145 28% 20%;
  --card: 164 36% 7%;
}
* { box-sizing: border-box; }
html { background: hsl(var(--background)); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, hsl(var(--primary) / 0.10), transparent 32%), hsl(var(--background)); color: hsl(var(--foreground)); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-size: max(16px, 1rem); }
.qr-grid { display: grid; place-items: center; width: 100%; height: 100%; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(0,0,0,.07) 12px 15px), repeating-linear-gradient(0deg, transparent 0 12px, rgba(0,0,0,.07) 12px 15px); border-radius: 1.25rem; }
.demo-stage { perspective: 900px; background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 42%), radial-gradient(circle at 50% 70%, hsl(var(--primary) / .16), transparent 28%); }
.demo-stage:before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(hsl(var(--primary)/.08) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--primary)/.07) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, transparent, black 28%, black 80%, transparent); }
.live-person-stage:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.42), transparent 22%, transparent 72%, rgba(0,0,0,.46)), radial-gradient(circle at 50% 55%, transparent 28%, rgba(0,0,0,.34) 78%); pointer-events: none; }
.live-demo { --move-speed: 2.6s; position: absolute; left: 50%; top: 38%; z-index: 1; width: min(74vw, 560px); height: 270px; transform: translate(-50%, -50%); border-radius: 2rem; overflow: hidden; border: 1px solid hsl(var(--primary)/.32); box-shadow: 0 28px 80px rgba(0,0,0,.58), 0 0 42px hsl(var(--primary)/.16); animation: live-breathe calc(var(--move-speed) * 1.15) ease-in-out infinite; }
.live-demo.is-paused, .live-demo.is-paused *, .movement-board.is-paused, .movement-board.is-paused * { animation-play-state: paused !important; }
.live-demo-image { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.08) brightness(.78); transform-origin: 50% 56%; animation: live-motion var(--move-speed) ease-in-out infinite; }
.live-demo:before { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(135deg, rgba(0,0,0,.16), transparent 42%), linear-gradient(0deg, rgba(0,0,0,.38), transparent 36%), radial-gradient(circle at 68% 32%, hsl(var(--primary)/.18), transparent 28%); mix-blend-mode: screen; pointer-events: none; }
.live-demo:after { content: 'BLACK / NEON PUSHMODE KIT'; position: absolute; left: 18px; top: 18px; z-index: 3; border-radius: 999px; background: rgba(0,0,0,.58); padding: 7px 11px; color: hsl(var(--primary)); font-size: 11px; font-weight: 900; letter-spacing: .12em; backdrop-filter: blur(8px); }
.live-demo-trail { position: absolute; inset: 14%; z-index: 2; border: 1px solid hsl(var(--primary)/.32); border-radius: 999px; filter: blur(.2px); opacity: .45; animation: trail-pulse var(--move-speed) ease-in-out infinite; pointer-events: none; }
.trail-two { inset: 24% 18%; animation-delay: calc(var(--move-speed) * -.35); }
.coach-scanline { position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, transparent, hsl(var(--primary)/.18), transparent); transform: translateY(-100%); animation: scanline calc(var(--move-speed) * 1.8) linear infinite; pointer-events: none; }
.form-marker { position: absolute; z-index: 4; max-width: 170px; border: 1px solid hsl(var(--primary)/.38); border-radius: 999px; background: rgba(0,0,0,.66); padding: 7px 10px; color: white; font-size: 11px; font-weight: 900; letter-spacing: .02em; box-shadow: 0 0 20px hsl(var(--primary)/.16); backdrop-filter: blur(8px); animation: marker-pop var(--move-speed) ease-in-out infinite; }
.form-marker-a { left: 14px; bottom: 18px; }
.form-marker-b { right: 14px; top: 56px; animation-delay: calc(var(--move-speed) * -.25); }
.form-marker-c { right: 18px; bottom: 20px; animation-delay: calc(var(--move-speed) * -.5); }
.live-demo-pushup { top: 36%; height: 245px; }
.live-demo-squat { height: 292px; animation-name: live-breathe, vertical-drive; }
.live-demo-lunge { height: 292px; animation-name: live-breathe, lateral-shift; }
.live-demo-dip { height: 260px; }
.live-demo-climber, .live-demo-bridge, .live-demo-plank { top: 36%; height: 240px; }
.live-demo-skater { height: 285px; animation-name: live-breathe, lateral-shift; }
.live-demo-pushup .live-demo-image, .live-demo-climber .live-demo-image, .live-demo-plank .live-demo-image { object-position: center 58%; }
.live-demo-squat .live-demo-image, .live-demo-lunge .live-demo-image, .live-demo-skater .live-demo-image { object-position: center 38%; }
.movement-board { position: absolute; left: 4%; right: 4%; bottom: 158px; z-index: 6; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.movement-frame { min-height: 88px; border: 1px solid hsl(var(--primary)/.24); border-radius: 1rem; background: rgba(0,0,0,.56); padding: 8px; backdrop-filter: blur(10px); opacity: .58; animation: phase-highlight calc(var(--move-speed) * 1.15) linear infinite; animation-delay: calc(var(--move-speed) * var(--phase) * .28); }
.movement-frame b { display: inline-grid; width: 20px; height: 20px; place-items: center; border-radius: 999px; background: hsl(var(--primary)); color: #031006; font-size: 12px; }
.movement-frame p { margin: 4px 0 0; color: white; font-size: 11px; font-weight: 900; line-height: 1.15; }
.mini-trainer { position: relative; height: 32px; margin-bottom: 4px; }
.mini-trainer:before { content: ''; position: absolute; left: 50%; top: 3px; width: 12px; height: 12px; border-radius: 999px; background: #d8b09a; transform: translateX(-50%); box-shadow: 0 0 10px hsl(var(--primary)/.22); }
.mini-trainer:after { content: ''; position: absolute; left: 50%; top: 15px; width: 12px; height: 18px; border-radius: 10px 10px 5px 5px; background: linear-gradient(135deg, #020403 45%, hsl(var(--primary))); transform: translateX(-50%); }
.mini-trainer span:before, .mini-trainer span:after { content: ''; position: absolute; left: 50%; top: 22px; width: 5px; height: 17px; border-radius: 8px; background: #050706; border: 1px solid hsl(var(--primary)/.45); transform-origin: top center; }
.mini-trainer span:before { transform: translateX(-8px) rotate(10deg); }
.mini-trainer span:after { transform: translateX(3px) rotate(-10deg); }
.movement-pushup .mini-trainer { transform: rotate(90deg) scale(.9); }
.movement-pushup .movement-frame:nth-child(2) .mini-trainer, .movement-dip .movement-frame:nth-child(2) .mini-trainer { transform: translateY(7px) rotate(90deg) scale(.9); }
.movement-squat .movement-frame:nth-child(2) .mini-trainer, .movement-squat .movement-frame:nth-child(3) .mini-trainer { transform: translateY(8px) scale(.92); }
.movement-lunge .movement-frame:nth-child(2) .mini-trainer, .movement-skater .movement-frame:nth-child(even) .mini-trainer { transform: translateX(9px) rotate(7deg); }
.movement-climber .mini-trainer, .movement-bridge .mini-trainer, .movement-plank .mini-trainer { transform: rotate(90deg) scale(.88); }
.movement-bridge .movement-frame:nth-child(2) .mini-trainer { transform: rotate(90deg) translateX(-8px) scale(.88); }
.rep-track { position: absolute; left: 12%; right: 12%; bottom: 138px; z-index: 6; height: 4px; border-radius: 999px; background: hsl(var(--primary)/.18); overflow: hidden; }
.rep-track span { position: absolute; width: 26%; height: 100%; border-radius: inherit; background: hsl(var(--primary)); box-shadow: 0 0 18px hsl(var(--primary)); animation: rep-loop var(--move-speed) ease-in-out infinite; }
.rep-track em { position: absolute; right: 0; top: -18px; color: hsl(var(--primary)); font-size: 10px; font-style: normal; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.floor-line { position: absolute; left: 8%; right: 8%; bottom: 132px; height: 2px; background: linear-gradient(90deg, transparent, hsl(var(--primary)), transparent); box-shadow: 0 0 22px hsl(var(--primary)); }
@keyframes live-breathe { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.14); } }
@keyframes live-motion { 0%,100% { transform: scale(1.06) translateY(0); } 50% { transform: scale(1.12) translateY(10px); } }
@keyframes vertical-drive { 0%,100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -44%); } }
@keyframes lateral-shift { 0%,100% { transform: translate(-54%, -50%); } 50% { transform: translate(-46%, -50%); } }
@keyframes trail-pulse { 0%,100% { transform: scale(.94); opacity: .22; } 50% { transform: scale(1.08); opacity: .62; } }
@keyframes marker-pop { 0%,100% { transform: scale(.96); opacity: .72; } 45%,60% { transform: scale(1.03); opacity: 1; } }
@keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
@keyframes phase-highlight { 0%,24% { opacity: 1; border-color: hsl(var(--primary)/.78); box-shadow: 0 0 22px hsl(var(--primary)/.18); transform: translateY(-3px); } 25%,100% { opacity: .54; border-color: hsl(var(--primary)/.22); transform: translateY(0); } }
@keyframes rep-loop { 0%,100% { transform: translateX(0); } 50% { transform: translateX(285%); } }
.trainer { --move-speed: 2.6s; position: absolute; left: 50%; bottom: 98px; width: 190px; height: 250px; transform: translateX(-50%); transform-origin: 50% 90%; animation: trainer-breathe calc(var(--move-speed) * 1.15) ease-in-out infinite; }
.trainer.is-paused, .trainer.is-paused * { animation-play-state: paused !important; }
.breath-aura { position: absolute; inset: 10px 28px; border-radius: 999px; background: radial-gradient(circle, hsl(var(--primary)/.12), transparent 68%); filter: blur(6px); animation: aura var(--move-speed) ease-in-out infinite; }
.head { position: absolute; left: 72px; top: 10px; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(145deg, #2d211e, #8d6555); box-shadow: inset 8px -6px 12px rgba(0,0,0,.25); }
.torso { position: absolute; left: 58px; top: 58px; width: 74px; height: 98px; border-radius: 34px 34px 26px 26px; background: linear-gradient(135deg, #020403, #121b18 55%, hsl(var(--primary))); box-shadow: inset -14px -12px 18px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.38); transform-origin: 50% 16%; }
.torso:after { content: 'P'; position: absolute; left: 28px; top: 24px; font-weight: 900; color: hsl(var(--primary)); text-shadow: 0 0 12px hsl(var(--primary)); }
.arm, .leg { position: absolute; background: linear-gradient(180deg, #101715, #050706); border: 2px solid hsl(var(--primary)/.28); transform-origin: 50% 8%; box-shadow: 0 0 18px hsl(var(--primary)/.12); }
.arm { width: 22px; height: 104px; border-radius: 18px; top: 70px; }
.arm-left { left: 42px; }
.arm-right { right: 42px; }
.leg { width: 25px; height: 120px; border-radius: 20px; top: 145px; }
.leg-left { left: 67px; }
.leg-right { right: 67px; }
.shoe { position: absolute; width: 44px; height: 16px; border-radius: 12px; top: 254px; background: hsl(var(--primary)); box-shadow: 0 0 18px hsl(var(--primary)/.5); }
.shoe-left { left: 51px; }
.shoe-right { right: 51px; }
@keyframes trainer-breathe { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.14); } }
@keyframes aura { 0%,100% { transform: scale(.96); opacity: .45; } 50% { transform: scale(1.08); opacity: .95; } }
.trainer-pushup { height: 150px; bottom: 106px; transform: translateX(-50%) rotate(-90deg) scale(.94); animation: pushup-body var(--move-speed) ease-in-out infinite; }
.trainer-pushup .arm-left, .trainer-pushup .arm-right { animation: pushup-arms var(--move-speed) ease-in-out infinite; }
.trainer-pushup .leg-left, .trainer-pushup .leg-right { transform: rotate(-8deg); }
@keyframes pushup-body { 0%,100% { transform: translateX(-50%) rotate(-90deg) translateY(0) scale(.94); } 50% { transform: translateX(-50%) rotate(-90deg) translateY(24px) scale(.94); } }
@keyframes pushup-arms { 0%,100% { transform: rotate(4deg); } 50% { transform: rotate(25deg); } }
.trainer-squat .torso { animation: squat-torso var(--move-speed) ease-in-out infinite; }
.trainer-squat .leg-left { animation: squat-left var(--move-speed) ease-in-out infinite; }
.trainer-squat .leg-right { animation: squat-right var(--move-speed) ease-in-out infinite; }
@keyframes squat-torso { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(52px) rotate(-7deg); } }
@keyframes squat-left { 0%,100% { transform: rotate(0); } 50% { transform: translateY(35px) rotate(28deg); } }
@keyframes squat-right { 0%,100% { transform: rotate(0); } 50% { transform: translateY(35px) rotate(-28deg); } }
.trainer-lunge .leg-left { animation: lunge-front var(--move-speed) ease-in-out infinite; }
.trainer-lunge .leg-right { animation: lunge-back var(--move-speed) ease-in-out infinite; }
.trainer-lunge .torso { animation: lunge-drop var(--move-speed) ease-in-out infinite; }
@keyframes lunge-front { 0%,100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(-36px) translateY(30px) rotate(28deg); } }
@keyframes lunge-back { 0%,100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(36px) translateY(28px) rotate(-32deg); } }
@keyframes lunge-drop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(38px); } }
.trainer-dip { bottom: 122px; }
.trainer-dip:after { content: ''; position: absolute; left: 12px; right: 12px; top: 150px; height: 18px; border-radius: 999px; background: linear-gradient(90deg, #111, hsl(var(--primary)/.75), #111); box-shadow: 0 0 22px hsl(var(--primary)/.3); }
.trainer-dip .torso { animation: dip-drop var(--move-speed) ease-in-out infinite; }
.trainer-dip .arm-left, .trainer-dip .arm-right { animation: dip-arm var(--move-speed) ease-in-out infinite; }
@keyframes dip-drop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(34px); } }
@keyframes dip-arm { 0%,100% { transform: rotate(8deg); } 50% { transform: rotate(34deg); } }
.trainer-climber { height: 145px; bottom: 104px; transform: translateX(-50%) rotate(-82deg) scale(.92); }
.trainer-climber .leg-left { animation: climb-left var(--move-speed) ease-in-out infinite; }
.trainer-climber .leg-right { animation: climb-right var(--move-speed) ease-in-out infinite; }
@keyframes climb-left { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(58deg) translateY(-18px); } }
@keyframes climb-right { 0%,100% { transform: rotate(58deg) translateY(-18px); } 50% { transform: rotate(-8deg); } }
.trainer-bridge { height: 130px; bottom: 104px; transform: translateX(-50%) rotate(-90deg) scale(.95); }
.trainer-bridge .torso { animation: bridge-lift var(--move-speed) ease-in-out infinite; }
@keyframes bridge-lift { 0%,100% { transform: translateY(20px); } 50% { transform: translateY(-12px) rotate(5deg); } }
.trainer-plank { height: 140px; bottom: 104px; transform: translateX(-50%) rotate(-90deg) scale(.95); animation: plank-breath var(--move-speed) ease-in-out infinite; }
@keyframes plank-breath { 0%,100% { transform: translateX(-50%) rotate(-90deg) translateY(0) scale(.95); } 50% { transform: translateX(-50%) rotate(-90deg) translateY(4px) scale(.97); } }
.trainer-skater { animation: skater-body var(--move-speed) ease-in-out infinite; }
.trainer-skater .leg-left { animation: skate-left var(--move-speed) ease-in-out infinite; }
.trainer-skater .leg-right { animation: skate-right var(--move-speed) ease-in-out infinite; }
@keyframes skater-body { 0%,100% { transform: translateX(-64%) rotate(-5deg); } 50% { transform: translateX(-36%) rotate(5deg); } }
@keyframes skate-left { 0%,100% { transform: rotate(22deg); } 50% { transform: rotate(-28deg); } }
@keyframes skate-right { 0%,100% { transform: rotate(-28deg); } 50% { transform: rotate(22deg); } }
@media (max-width: 520px) { .movement-frame { min-height: 82px; padding: 6px; } .movement-frame p { font-size: 10px; } .live-demo { width: 92vw; } }
@media (min-width: 640px) { .trainer { transform: translateX(-50%) scale(1.12); } .live-demo { height: 340px; } .live-demo-pushup, .live-demo-climber, .live-demo-bridge, .live-demo-plank { height: 310px; } }