:root { --ink:#11110f; --paper:#f1eee6; --coral:#ff694d; --lime:#d8ff54; --muted:#aaa79f; --line:rgba(241,238,230,.15); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--paper); background:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; overflow-x:hidden; }
button,input { font:inherit; } button { color:inherit; }
.noise { position:fixed; inset:0; pointer-events:none; opacity:.08; z-index:20; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
.site-header { position:sticky; top:0; z-index:10; height:78px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 clamp(20px,4vw,70px); border-bottom:1px solid var(--line); background:rgba(17,17,15,.82); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }
.brand-mark { position:relative; display:inline-grid; place-items:center; width:38px; height:38px; color:var(--paper); overflow:visible; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.brand-mark svg { position:relative; z-index:1; width:35px; height:35px; overflow:visible; filter:drop-shadow(3px 4px 0 rgba(255,105,77,.32)) drop-shadow(0 8px 12px rgba(0,0,0,.4)); }
.brand-mark .g-track,.brand-mark .g-cut { fill:none; stroke-width:6.4; stroke-linecap:round; stroke-linejoin:round; }.brand-mark .g-track{stroke:var(--coral)}.brand-mark .g-cut{stroke:var(--paper)}
.brand-mark .g-spark { fill:var(--lime); transform-origin:35px 13px; animation:brandSpark 2.8s ease-in-out infinite; }
.brand:hover .brand-mark { transform:rotate(-7deg) scale(1.08); }.brand:hover .g-track{stroke:var(--lime)}
.brand-name { font-size:1.18rem; font-weight:850; letter-spacing:-.06em; line-height:1; }.brand-name sup,.footer-wordmark sup{position:relative;top:-.45em;margin-left:2px;color:var(--lime);font-size:.36em;letter-spacing:0}
.brand-mark-large { width:64px; height:64px; }.brand-mark-large svg{width:58px;height:58px}
@keyframes brandSpark { 0%,100%{transform:scale(.78) rotate(0);opacity:.65} 45%{transform:scale(1.16) rotate(45deg);opacity:1;filter:drop-shadow(0 0 7px var(--lime))} }
nav { display:flex; gap:6px; }
.nav-link,.icon-button { border:0; background:transparent; cursor:pointer; }
.nav-link { padding:10px 14px; color:var(--muted); border-radius:99px; font-size:.86rem; font-weight:700; }
.nav-link:hover,.nav-link.active { color:var(--paper); background:rgba(255,255,255,.07); }
.profile-button { justify-self:end; display:flex; align-items:center; gap:9px; padding:5px 10px 5px 5px; border:1px solid var(--line); border-radius:99px; background:transparent; color:var(--paper); cursor:pointer; }
.profile-button span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--lime); color:var(--ink); font-weight:950; }
.profile-button b { font-size:.72rem; }
.header-actions { justify-self:end; display:flex; align-items:center; gap:8px; }
.sound-button { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--lime); cursor:pointer; font-weight:900; }
.sound-button[aria-pressed="false"] { color:var(--muted); opacity:.6; }
.view { display:none; animation:enter .45s ease both; } .view.active { display:block; }
@keyframes enter { from { opacity:0; transform:translateY(12px); } }
.hero { min-height:calc(100vh - 78px); display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:40px; padding:8vh clamp(24px,7vw,120px); }
.eyebrow { margin:0 0 22px; color:var(--lime); font-size:.74rem; font-weight:900; letter-spacing:.2em; }
h1,h2 { margin:0; line-height:.9; letter-spacing:-.06em; text-transform:uppercase; }
h1 { font-size:clamp(4rem,9.5vw,9rem); font-weight:950; }
h1 em,h2 em { color:var(--coral); font-family:Georgia,serif; font-weight:400; text-transform:none; }
.hero-note { max-width:510px; margin:30px 0; color:var(--muted); font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.65; }
.welcome-line { margin:-10px 0 18px; color:var(--muted); font-weight:750; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:35px; padding:0 24px; border:1px solid transparent; border-radius:4px; text-decoration:none; cursor:pointer; font-weight:850; transition:.2s; }
.button.primary { background:var(--coral); color:var(--ink); } .button.primary:hover { background:var(--lime); transform:translateY(-2px); }
.button.ghost { background:transparent; border-color:var(--line); } .button.ghost:hover { border-color:var(--paper); }
.focus-orbit { --tilt-x:0deg; --tilt-y:0deg; --light-x:50%; --light-y:40%; aspect-ratio:1; position:relative; display:grid; place-items:center; max-width:560px; width:100%; margin-inline:auto; perspective:1100px; transform-style:preserve-3d; outline:0; isolation:isolate; cursor:grab; touch-action:pan-y; }
.focus-orbit::before { content:""; position:absolute; inset:5%; z-index:-1; border-radius:50%; background:radial-gradient(circle at var(--light-x) var(--light-y),rgba(216,255,84,.2),rgba(255,105,77,.09) 28%,transparent 64%); filter:blur(18px); transform:translateZ(-70px); transition:background-position .2s; }
.focus-orbit::after { content:""; position:absolute; left:19%; right:19%; bottom:8%; height:12%; z-index:-1; border-radius:50%; background:rgba(0,0,0,.62); filter:blur(24px); transform:rotateX(72deg) translateZ(-90px); }
.focus-orbit:focus-visible { outline:1px solid var(--lime); outline-offset:10px; border-radius:50%; }
.focus-orbit.is-grabbing { cursor:grabbing; }
.orbit { position:absolute; border:1px solid rgba(255,105,77,.55); border-radius:50%; inset:5%; animation:rotate3d 14s linear infinite; transform-style:preserve-3d; box-shadow:inset 0 0 40px rgba(255,105,77,.07); }
.orbit::after { content:""; position:absolute; top:50%; left:-5px; width:10px; height:10px; border-radius:50%; background:var(--lime); box-shadow:0 0 28px var(--lime); }
.orbit-two { inset:18%; border-style:dashed; animation:rotate3dReverse 22s linear infinite; }
.orbit-three { inset:29%; border-color:rgba(216,255,84,.48); transform:rotateX(72deg); animation:spinFlat 9s linear infinite; }
@keyframes rotate3d { from { transform:rotateX(62deg) rotateZ(0); } to { transform:rotateX(62deg) rotateZ(360deg); } }
@keyframes rotate3dReverse { from { transform:rotateY(68deg) rotateZ(360deg); } to { transform:rotateY(68deg) rotateZ(0); } }
@keyframes spinFlat { to { transform:rotateX(72deg) rotateZ(360deg); } }
@keyframes sceneFloat { 50% { transform:translateY(-12px) rotateX(2deg) rotateY(-3deg); } }
.focus-core { position:absolute; left:50%; bottom:2%; z-index:5; width:auto; min-width:220px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:2px 18px; padding:12px 15px; border:1px solid rgba(241,238,230,.16); border-radius:7px; background:rgba(17,17,15,.82); color:var(--paper); text-align:left; box-shadow:0 20px 40px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(14px); transform:translateX(-50%) translateZ(170px) rotateX(-3deg); }
.focus-object { position:absolute; inset:10%; z-index:1; display:grid; place-items:center; pointer-events:none; perspective:1100px; transform-style:preserve-3d; filter:drop-shadow(0 34px 30px rgba(0,0,0,.58)); transform:rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) scale(1); transition:transform .18s cubic-bezier(.2,.8,.2,1),filter .25s; will-change:transform; }
.focus-orbit:hover .focus-object { filter:drop-shadow(0 42px 34px rgba(0,0,0,.68)) drop-shadow(0 0 28px rgba(255,105,77,.16)); }
.focus-orbit.is-charged .focus-object { transform:rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) scale(1.07); filter:drop-shadow(0 48px 38px rgba(0,0,0,.72)) drop-shadow(0 0 42px rgba(216,255,84,.35)); }
.focus-object>div { position:relative; width:100%; height:100%; transform-style:preserve-3d; animation:objectFloat 4.2s ease-in-out infinite; }
@keyframes objectFloat { 0%,100%{transform:translateZ(125px) rotateX(8deg) rotateY(-12deg)} 50%{transform:translateY(-12px) translateZ(150px) rotateX(-5deg) rotateY(14deg)} }
.dumbbell { display:flex; align-items:center; justify-content:center; gap:0; }.dumbbell span { width:46%; height:13%; border-radius:99px; background:linear-gradient(#faf7ef,#726f68); box-shadow:inset 0 7px 10px rgba(255,255,255,.5); }.dumbbell b,.dumbbell i { display:block; background:linear-gradient(145deg,#ff967e,#a52d1f); border:2px solid rgba(255,255,255,.25); transform:rotateY(-20deg); }.dumbbell b{width:10%;height:46%;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}.dumbbell i{width:13%;height:65%;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.power-platform i { position:absolute; left:18%; width:64%; height:19%; border-radius:50%; background:linear-gradient(90deg,#823126,#ff694d,#7b281e); box-shadow:0 18px 0 #461914,0 22px 55px rgba(255,105,77,.6); transform:rotateX(65deg); }.power-platform i:first-child{top:30%}.power-platform i:nth-child(2){top:52%;width:76%;left:12%}.power-platform b{position:absolute;left:46%;top:22%;width:8%;height:55%;background:linear-gradient(#d8ff54,#527000);clip-path:polygon(50% 0,100% 80%,50% 100%,0 80%);box-shadow:0 0 45px #d8ff54}
.power-shield i{position:absolute;inset:10% 19%;background:linear-gradient(145deg,#ff947b,#6f1e16);clip-path:polygon(50% 0,94% 18%,84% 74%,50% 100%,16% 74%,6% 18%);box-shadow:inset 0 0 0 10px rgba(255,255,255,.12),0 0 55px rgba(255,105,77,.45)}.power-shield b,.mech-mark b{position:absolute;inset:0;display:grid;place-items:center;color:#151512;font-size:8rem;font-weight:1000;text-shadow:0 3px rgba(255,255,255,.25)}
.core-reactor i{position:absolute;inset:12%;border:12px solid #ff694d;border-radius:50%;box-shadow:inset 0 0 40px #ff694d,0 0 45px #ff694d;transform:rotateX(68deg)}.core-reactor i:nth-child(2){inset:24%;border-color:#d8ff54;box-shadow:inset 0 0 35px #d8ff54,0 0 40px #d8ff54;transform:rotateY(68deg)}.core-reactor b{position:absolute;inset:35%;border-radius:50%;background:radial-gradient(circle,#fff 0,#d8ff54 30%,#ff694d 65%,transparent 70%);animation:reactorPulse 1.4s ease-in-out infinite}@keyframes reactorPulse{50%{transform:scale(1.16);filter:brightness(1.7)}}
.motion-ribbon i{position:absolute;inset:14%;border:12px solid #ff694d;border-left-color:transparent;border-radius:48% 52% 44% 56%;transform:translateZ(70px) rotateX(60deg) rotateZ(10deg);box-shadow:inset 0 5px 8px rgba(255,255,255,.22),0 0 25px rgba(255,105,77,.5);animation:ribbonFlow 5s ease-in-out infinite}.motion-ribbon i:nth-child(2){inset:24% 8%;border-color:#d8ff54 transparent #d8ff54 #d8ff54;transform:translateZ(15px) rotateY(65deg);animation-delay:-1.6s}.motion-ribbon i:nth-child(3){inset:31% 20%;border-color:#f1eee6 #f1eee6 transparent;border-width:8px;transform:translateZ(115px) rotateX(35deg) rotateY(50deg);animation-delay:-3.2s}.motion-ribbon b{position:absolute;left:39%;top:39%;width:22%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 27%,#fff 0 5%,#d8ff54 18%,#ff694d 54%,#39110c 78%);box-shadow:inset -12px -16px 24px rgba(0,0,0,.45),0 0 42px rgba(216,255,84,.62);transform:translateZ(145px);animation:mobilityCore 2.4s ease-in-out infinite}.motion-ribbon span{position:absolute;left:16%;right:16%;bottom:14%;height:12%;border-radius:50%;border:2px solid rgba(241,238,230,.28);background:radial-gradient(ellipse,rgba(255,105,77,.25),transparent 68%);box-shadow:0 0 35px rgba(255,105,77,.22);transform:rotateX(72deg) translateZ(-35px)}
@keyframes ribbonFlow{50%{filter:hue-rotate(16deg) brightness(1.18);transform:translateZ(95px) rotateX(48deg) rotateZ(28deg)}}@keyframes mobilityCore{50%{transform:translateZ(165px) scale(1.12);filter:brightness(1.22)}}
.calm-prism i{position:absolute;inset:14% 24%;background:linear-gradient(145deg,rgba(216,255,84,.85),rgba(255,105,77,.35));clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(0 0 35px rgba(216,255,84,.45))}.calm-prism b,.calm-prism span{position:absolute;left:15%;right:15%;top:61%;height:5%;border-radius:50%;background:#d8ff54;box-shadow:0 0 22px #d8ff54;transform:rotateX(70deg)}.calm-prism span{top:72%;left:7%;right:7%;opacity:.45}
.mech-mark i{position:absolute;inset:12%;background:conic-gradient(from 45deg,#ff694d,#6b2119,#d8ff54,#ff694d);clip-path:polygon(50% 0,88% 18%,100% 58%,72% 100%,28% 100%,0 58%,12% 18%);box-shadow:inset 0 0 0 12px rgba(0,0,0,.3)}.mech-mark span{position:absolute;inset:26%;border:5px solid #151512;transform:rotate(45deg)}
.focus-core span,.focus-core small { font-size:.58rem; font-weight:900; letter-spacing:.16em; }.focus-core span{grid-column:1/-1;color:var(--lime)}
.focus-core strong { max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.25rem; line-height:1; letter-spacing:-.05em; text-transform:uppercase; }.focus-core small{color:var(--muted)}
.float-chip { position:absolute; z-index:2; padding:8px 11px; border:1px solid var(--line); border-radius:4px; background:rgba(17,17,15,.86); color:var(--lime); font-size:.63rem; font-weight:900; letter-spacing:.12em; box-shadow:0 12px 30px rgba(0,0,0,.35); }
.chip-one { top:13%; right:5%; transform:translateZ(120px) rotate(7deg); }.chip-two { bottom:17%; left:1%; transform:translateZ(50px) rotate(-8deg); }.chip-three { top:42%; right:-4%; transform:translateZ(30px) rotate(4deg); }
.orbit-hint{position:absolute;left:50%;bottom:-2%;z-index:6;translate:-50% 0;color:rgba(241,238,230,.48);font-size:.56rem;font-weight:900;letter-spacing:.16em;white-space:nowrap;transition:.25s}.focus-orbit:hover .orbit-hint,.focus-orbit:focus .orbit-hint{color:var(--lime)}
.stat-strip { display:grid; grid-template-columns:repeat(5,1fr); border-block:1px solid var(--line); margin:0 clamp(20px,4vw,70px); }
.stat-strip>div { padding:28px; border-right:1px solid var(--line); } .stat-strip>div:last-child { border-right:0; }
.stat-strip strong { display:block; font-size:2rem; } .stat-strip span { color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; }
.progress-track { height:4px; background:rgba(255,255,255,.1); margin-top:14px; } .progress-track i { display:block; width:0; height:100%; background:var(--lime); transition:width .5s ease; }
.workout-section { position:relative; z-index:2; margin-top:70px; padding:110px clamp(24px,7vw,120px) 130px; border-radius:42px 42px 0 0; background:#efede7; color:var(--ink); box-shadow:0 -35px 90px rgba(0,0,0,.3); }
.workout-section::before{content:"";position:absolute;left:50%;top:18px;width:62px;height:5px;border-radius:99px;background:rgba(17,17,15,.18);transform:translateX(-50%)}
.section-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:30px; margin-bottom:50px; }
.section-heading h2,.page-intro h1 { font-size:clamp(3rem,7vw,7rem); }
.section-heading>p { max-width:500px; justify-self:end; color:#625f59; line-height:1.65; }.workout-section .eyebrow{color:#a83929}
.exercise-list { display:grid; gap:10px; border:0; }
.exercise-card { display:grid; grid-template-columns:64px 1fr auto minmax(145px,auto); gap:20px; align-items:center; min-height:118px; padding:18px 20px; border:1px solid rgba(17,17,15,.1); border-radius:18px; background:rgba(255,255,255,.72); box-shadow:0 12px 24px rgba(17,17,15,.04); transition:.28s cubic-bezier(.2,.8,.2,1); transform-style:preserve-3d; perspective:800px; }
.exercise-card:hover { background:#fff; transform:translateY(-4px) rotateX(.7deg); box-shadow:0 24px 46px rgba(17,17,15,.11); } .exercise-card.done { opacity:.58; background:#e3e1db; } .exercise-card.done h3 { text-decoration:line-through; }
.exercise-number { color:var(--coral); font-size:.75rem; font-weight:900; }
.exercise-main h3 { margin:0 0 8px; font-size:clamp(1.1rem,2vw,1.55rem); letter-spacing:-.025em; } .exercise-main p { margin:0; color:#69665f; font-size:.86rem; }
.exercise-actions { display:flex; align-items:center; gap:14px; }
.demo-button { min-height:42px; padding:0 14px; border:1px solid var(--coral); border-radius:99px; background:var(--coral); color:var(--ink); font-size:.66rem; font-weight:900; letter-spacing:.07em; cursor:pointer; white-space:nowrap; }
.demo-button:hover { background:var(--ink); color:var(--paper); }.demo-button.watched { border-color:#a7c632; background:#d8ff54; color:var(--ink); }
.exercise-prescription { text-align:right; } .exercise-prescription b { display:block; } .exercise-prescription span { color:#77736c; font-size:.74rem; }
.complete-check { width:44px; height:44px; border:1px solid rgba(17,17,15,.22); border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; font-size:0; }
.complete-check::after { content:"✓"; font-size:1rem; opacity:0; } .complete-check:hover { border-color:var(--lime); }
.exercise-card.done .complete-check { background:var(--lime); color:var(--ink); border-color:var(--lime); } .exercise-card.done .complete-check::after { opacity:1; }
.finish-button { width:100%; min-height:76px; margin-top:26px; padding:0 26px; display:flex; justify-content:space-between; align-items:center; border:0; border-radius:16px; background:#d8d5ce; color:#77736c; font-size:1.05rem; font-weight:850; }
.finish-button.ready { background:var(--ink); color:var(--paper); cursor:pointer; box-shadow:0 16px 35px rgba(17,17,15,.24); }.finish-button.ready b{color:var(--lime)}
.page-intro { padding:120px clamp(24px,7vw,120px) 70px; } .page-intro>p:last-child { max-width:560px; color:var(--muted); font-size:1.1rem; line-height:1.65; }
.week-grid { display:grid; grid-template-columns:repeat(7,minmax(190px,1fr)); overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; padding:12px clamp(24px,7vw,120px) 120px; perspective:1200px; scrollbar-color:var(--coral) rgba(255,255,255,.08); }
.day-card { min-height:430px; padding:24px; border:1px solid var(--line); border-right:0; display:flex; flex-direction:column; justify-content:space-between; scroll-snap-align:start; transform-style:preserve-3d; transition:transform .28s cubic-bezier(.2,.8,.2,1),background .28s,box-shadow .28s,border-color .28s; }
.day-card:hover,.day-card:focus-visible{position:relative;z-index:2;outline:0;border-color:rgba(216,255,84,.5);background:#181815;transform:translateY(-10px) rotateX(2deg) rotateY(-2deg) translateZ(24px);box-shadow:0 28px 60px rgba(0,0,0,.5)}
.day-card:last-child { border-right:1px solid var(--line); } .day-card.today { background:var(--coral); color:var(--ink); transform:translateY(-12px); }
.day-card.complete::after { content:"✓ DONE"; color:var(--lime); font-size:.7rem; font-weight:900; letter-spacing:.12em; } .day-card.today.complete::after { color:var(--ink); }
.day-card .day-name { font-size:.7rem; font-weight:900; letter-spacing:.15em; } .day-card h3 { max-width:100%; margin:auto 0 12px; font-size:clamp(1.45rem,2.1vw,1.9rem); line-height:.95; letter-spacing:-.04em; overflow-wrap:break-word; text-transform:uppercase; }
.day-card p { min-height:42px; color:var(--muted); font-size:.8rem; } .day-card.today p { color:rgba(17,17,15,.65); } .day-card span { font-size:.75rem; font-weight:800; }
.day-action{width:100%;min-height:38px;margin-top:18px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--paper);font-size:.61rem;font-weight:950;letter-spacing:.1em;cursor:pointer}.day-action:hover{border-color:var(--lime);background:var(--lime);color:var(--ink)}.day-card.today .day-action{border-color:var(--ink);color:var(--ink)}.day-card.today .day-action:hover{background:var(--ink);color:var(--paper)}
.settings-grid { width:min(920px,calc(100% - 48px)); margin:0 auto 120px; }
.plan-builder{margin-top:36px;padding:clamp(24px,5vw,54px);border:1px solid rgba(255,105,77,.35);border-radius:28px;background:radial-gradient(circle at 85% 0,rgba(255,105,77,.16),transparent 35%),#151512;box-shadow:0 40px 90px rgba(0,0,0,.3)}.plan-builder-heading{display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:30px;margin-bottom:38px}.plan-builder-heading h2{font-size:clamp(3rem,7vw,6rem)}.plan-builder-heading>p{color:var(--muted);line-height:1.6}.plan-builder .profile-fields{grid-template-columns:1fr}.plan-builder .eyebrow{margin-bottom:16px}.account-grid{width:min(1120px,calc(100% - 48px));margin:0 auto 50px;display:grid;grid-template-columns:minmax(340px,.8fr) minmax(420px,1.2fr);gap:18px;align-items:start}.account-settings{width:100%;margin:0;padding:26px;border:1px solid var(--line);border-radius:24px;background:#151512}.account-achievements{padding:30px;border:1px solid rgba(216,255,84,.22);border-radius:24px;background:radial-gradient(circle at 70% 0,rgba(216,255,84,.12),transparent 40%),#151512}.account-achievements .badge-shelf{grid-template-columns:repeat(3,1fr);margin-bottom:0}.account-community{width:min(1120px,calc(100% - 48px))}
.profile-fields,.onboard-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.profile-fields label,.onboard-field { display:grid; gap:9px; color:var(--muted); font-size:.78rem; font-weight:800; }
.profile-fields input,.profile-fields select,.onboard-field input,.onboard-field select { width:100%; min-height:54px; padding:0 15px; border:1px solid var(--line); border-radius:3px; background:#1b1b18; color:var(--paper); }
fieldset { border:0; border-top:1px solid var(--line); padding:30px 0 45px; margin:0; } legend { padding-top:30px; font-size:1.2rem; font-weight:850; }
.segmented,.check-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:24px; } .check-grid { grid-template-columns:repeat(5,1fr); }
.segmented input,.check-grid input { position:absolute; opacity:0; }
.segmented span,.check-grid span { display:grid; place-items:center; min-height:60px; border:1px solid var(--line); cursor:pointer; font-weight:750; }
.segmented input:checked+span,.check-grid input:checked+span { background:var(--coral); border-color:var(--coral); color:var(--ink); }
.toggle-list { margin-top:20px; } .toggle-list label { display:flex; align-items:center; justify-content:space-between; padding:22px 0; border-bottom:1px solid var(--line); }
.toggle-list b,.toggle-list small { display:block; } .toggle-list small { margin-top:5px; color:var(--muted); }
.toggle-list input { appearance:none; width:52px; height:28px; padding:3px; border-radius:99px; background:#3b3a35; cursor:pointer; transition:.2s; }
.toggle-list input::before { content:""; display:block; width:22px; height:22px; border-radius:50%; background:white; transition:.2s; }
.toggle-list input:checked { background:var(--lime); } .toggle-list input:checked::before { transform:translateX(24px); background:var(--ink); }
.save-button { width:100%; } .save-message { min-height:24px; color:var(--lime); text-align:center; }
.text-button { display:block; margin:0 auto; border:0; background:transparent; color:var(--muted); text-decoration:underline; cursor:pointer; }
.history-wrap { width:min(920px,calc(100% - 48px)); margin:0 auto 120px; }
.history-summary { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); }
.history-summary>div { padding:28px; border-right:1px solid var(--line); } .history-summary>div:last-child { border:0; }
.history-summary strong,.history-summary span { display:block; } .history-summary strong { font-size:2.4rem; } .history-summary span { color:var(--muted); text-transform:uppercase; font-size:.72rem; letter-spacing:.1em; }
.level-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:10px;background:var(--line);border:1px solid var(--line)}.level-rules>div{padding:18px;background:#151512}.level-rules b,.level-rules span{display:block}.level-rules b{color:var(--coral);font-size:1.05rem}.level-rules span{margin-top:4px;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}
.history-list { margin-top:24px; } .history-item,.empty-history { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 4px; border-bottom:1px solid var(--line); }
.history-item b { text-transform:uppercase; } .history-item span,.empty-history { color:var(--muted); }
.rank-row { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:18px; background:var(--line); border:1px solid var(--line); }.rank-row>div{padding:24px;background:#151512}.rank-row span,.rank-row strong{display:block}.rank-row span{color:var(--muted);font-size:.68rem;letter-spacing:.14em}.rank-row strong{margin-top:7px;color:var(--lime);font-size:1.8rem}.badge-shelf{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:18px 0 36px}.badge{display:grid;place-items:center;min-height:145px;padding:14px;border:1px solid var(--line);text-align:center}.badge i{font-size:2.2rem;color:var(--muted)}.badge b{font-size:.72rem}.badge span{font-size:.58rem;color:var(--muted);letter-spacing:.1em}.badge.earned{border-color:var(--lime);background:radial-gradient(circle at 50% 25%,rgba(216,255,84,.16),transparent 60%)}.badge.earned i{color:var(--lime);filter:drop-shadow(0 0 12px var(--lime))}
.leaderboard-panel,.sports-panel{margin:70px 0;border-top:1px solid var(--line);padding-top:32px}.leaderboard-panel{position:relative;padding:38px 22px 22px;border:1px solid rgba(216,255,84,.22);background:radial-gradient(circle at 50% 0,rgba(216,255,84,.12),transparent 32%),linear-gradient(145deg,#181815,#0e0e0c);box-shadow:0 40px 100px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.06);overflow:hidden}.leaderboard-panel::before{content:"";position:absolute;inset:-40% 40%;background:linear-gradient(90deg,transparent,rgba(216,255,84,.09),transparent);transform:rotate(28deg);animation:ladderScan 7s linear infinite}@keyframes ladderScan{to{transform:translateX(440px) rotate(28deg)}}.leaderboard-heading{position:relative;display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.leaderboard-heading h2{font-size:clamp(2.8rem,6vw,5.5rem);text-shadow:0 0 40px rgba(216,255,84,.18)}.leaderboard-heading>span{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}.leaderboard-list{position:relative;border:1px solid var(--line);perspective:900px}.leaderboard-row{position:relative;display:grid;grid-template-columns:58px 1fr 110px 120px 62px;align-items:center;gap:12px;min-height:78px;padding:18px;border-bottom:1px solid var(--line);background:rgba(10,10,9,.55);transition:.25s;overflow:hidden}.leaderboard-row:hover{z-index:2;transform:translateZ(16px) scale(1.012);border-color:rgba(216,255,84,.4);box-shadow:0 18px 35px rgba(0,0,0,.45)}.leaderboard-row:last-child{border:0}.leaderboard-row>strong{display:grid;place-items:center;color:var(--coral);font-size:1.1rem}.leaderboard-row>strong i{font-style:normal}.leaderboard-row div b,.leaderboard-row div span,.leaderboard-row div mark{display:block}.leaderboard-row div b{font-size:1.05rem;text-transform:uppercase;letter-spacing:.03em}.leaderboard-row div span,.leaderboard-row>span{color:var(--muted);font-size:.7rem}.leaderboard-row mark{width:max-content;margin-top:7px;padding:4px 7px;border:1px solid rgba(216,255,84,.4);background:rgba(216,255,84,.08);color:var(--lime);font-size:.56rem;font-weight:950;letter-spacing:.08em}.leaderboard-row em{color:var(--lime);font-style:normal;font-weight:950}.leaderboard-row button{border:0;background:transparent;color:var(--muted);font-size:.6rem;cursor:pointer}.leaderboard-row button:hover{color:var(--coral)}.leaderboard-row.rank-1{min-height:104px;background:linear-gradient(90deg,rgba(216,255,84,.21),rgba(216,255,84,.03) 55%,transparent);border-color:rgba(216,255,84,.55);box-shadow:inset 5px 0 #d8ff54,0 0 55px rgba(216,255,84,.08)}.leaderboard-row.rank-1>strong{color:var(--lime);font-size:2rem;filter:drop-shadow(0 0 12px var(--lime))}.leaderboard-row.rank-1 div b{font-size:1.35rem}.leaderboard-row.rank-2{background:linear-gradient(90deg,rgba(235,238,245,.14),transparent 58%);box-shadow:inset 4px 0 #d9dde8}.leaderboard-row.rank-2>strong{color:#d9dde8;font-size:1.45rem}.leaderboard-row.rank-3{background:linear-gradient(90deg,rgba(255,105,77,.17),transparent 58%);box-shadow:inset 4px 0 var(--coral)}.leaderboard-row.rank-3>strong{font-size:1.35rem}.sport-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.sport-grid article{position:relative;min-height:235px;padding:24px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,105,77,.09),transparent);overflow:hidden}.sport-grid i{color:var(--coral);font-style:normal;font-weight:900}.sport-grid h3{margin:58px 0 10px;font-size:1.5rem;text-transform:uppercase}.sport-grid p{color:var(--muted);font-size:.78rem;line-height:1.5}.sport-grid b{position:absolute;right:12px;top:12px;padding:7px;background:var(--lime);color:var(--ink);font-size:.58rem}.anon-choice{display:flex;gap:10px;align-items:center;margin:4px 0 24px;color:var(--muted);font-size:.8rem}.anon-choice input{accent-color:var(--lime)}
.swap-modal{position:fixed;inset:0;z-index:75;display:grid;place-items:center;padding:20px;background:rgba(5,5,4,.92);backdrop-filter:blur(20px);opacity:0;visibility:hidden;transition:.25s}.swap-modal.open{opacity:1;visibility:visible}.swap-card{position:relative;width:min(760px,100%);padding:clamp(28px,5vw,55px);border:1px solid var(--line);background:#121210}.swap-card h2{font-size:clamp(3rem,7vw,6rem)}.swap-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:34px}.swap-choice{min-height:58px;padding:12px;border:1px solid var(--line);background:#1b1b18;color:var(--paper);font-weight:900;text-transform:uppercase;cursor:pointer}.swap-choice:first-child{grid-column:1/-1;background:var(--lime);color:var(--ink);border-color:var(--lime)}.swap-choice:hover,.swap-choice.current{border-color:var(--coral);background:var(--coral);color:var(--ink)}
.onboarding { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; background:rgba(17,17,15,.94); backdrop-filter:blur(18px); opacity:0; visibility:hidden; transition:.3s; overflow:auto; }
.onboarding.open { opacity:1; visibility:visible; }
.onboarding-card { width:min(720px,100%); margin:auto; padding:clamp(26px,5vw,54px); border:1px solid var(--line); background:#151512; box-shadow:0 30px 100px rgba(0,0,0,.5); }
.onboarding-card>.brand-mark { margin-bottom:25px; } .onboarding-card h2 { font-size:clamp(3rem,8vw,6rem); } .onboarding-copy { color:var(--muted); line-height:1.55; }
.onboarding-card>.onboard-field { margin-top:24px; } .onboarding-card fieldset { padding-bottom:24px; }
.onboarding-card .button { width:100%; } .onboarding-card>small { display:block; margin-top:14px; color:var(--muted); text-align:center; }
.check-grid.compact { grid-template-columns:repeat(5,1fr); }
footer { min-height:200px; display:grid; grid-template-columns:1fr auto minmax(280px,1fr); align-items:center; gap:30px; padding:40px clamp(24px,7vw,120px); border-top:1px solid var(--line); color:var(--muted); }
.footer-wordmark { color:var(--paper); font-size:1.45rem; font-weight:850; letter-spacing:-.06em; }.footer-meta{justify-self:end;max-width:560px;text-align:right}.footer-meta small{display:block;line-height:1.55}.footer-meta nav{display:flex;justify-content:flex-end;gap:7px;margin-top:12px;font-size:.68rem}.footer-meta a{color:var(--muted);text-decoration:none;border-bottom:1px solid #555}.footer-meta a:hover{color:var(--paper);border-color:var(--paper)}
.celebration { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:24px; background:var(--ink); transform:translateY(110%); transition:transform .6s cubic-bezier(.8,0,.2,1); text-align:center; }
.celebration.open { transform:translateY(0); } .celebration h2 { margin:25px 0 40px; font-size:clamp(4rem,10vw,9rem); } .celebration p { color:var(--lime); letter-spacing:.18em; font-weight:900; }
.video-modal { position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:18px; background:rgba(5,5,4,.92); backdrop-filter:blur(20px); opacity:0; visibility:hidden; transition:.25s; overflow:auto; }
.video-modal.open { opacity:1; visibility:visible; }.video-shell { position:relative; width:min(900px,100%); margin:auto; padding:clamp(22px,4vw,42px); border:1px solid rgba(17,17,15,.12); border-radius:28px; background:#f1eee6; color:var(--ink); box-shadow:0 40px 120px rgba(0,0,0,.72); overflow:hidden; }
.video-shell::before{content:"";position:absolute;left:50%;top:10px;width:46px;height:4px;border-radius:99px;background:rgba(17,17,15,.2);transform:translateX(-50%)}
.video-close { position:absolute; top:18px; right:18px; z-index:2; width:40px; height:40px; border:1px solid rgba(17,17,15,.18); border-radius:50%; background:rgba(255,255,255,.55); color:var(--ink); font-size:1.4rem; cursor:pointer; }
.video-heading { display:flex; justify-content:space-between; gap:18px; align-items:end; margin-bottom:22px; padding-right:48px; }.video-heading h2 { font-size:clamp(2rem,5vw,4.3rem); }.xp-badge { padding:10px 12px; border:1px solid var(--lime); color:var(--lime); font-weight:950; white-space:nowrap; }.xp-badge.locked { border-color:var(--line); color:var(--muted); }
.video-frame { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border:1px solid rgba(17,17,15,.12); border-radius:18px; background:#050504; box-shadow:0 22px 50px rgba(0,0,0,.2); }.video-frame iframe { width:100%; height:100%; border:0; }
.video-description { color:#5d5b56; line-height:1.55; }.backup-label { display:block; margin:20px 0 10px; color:#77736c; font-size:.67rem; font-weight:900; letter-spacing:.14em; }.video-choices { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:20px; }.video-choice { min-height:46px; border:1px solid rgba(17,17,15,.16); border-radius:99px; background:rgba(255,255,255,.55); color:var(--ink); cursor:pointer; font-size:.7rem; font-weight:850; }.video-choice.active { border-color:var(--coral); background:var(--coral); color:var(--ink); }
.video-shell .eyebrow{color:#9b3528}.video-shell .xp-badge{border-color:#729000;color:#587000}.video-shell .xp-badge.locked{border-color:rgba(17,17,15,.2);color:#77736c}
.video-shell>.button { width:100%; }
.reward-burst { position:fixed; left:50%; top:50%; z-index:100; display:grid; place-items:center; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.3); text-align:center; text-shadow:0 0 28px rgba(216,255,84,.7); }.reward-burst strong { color:var(--lime); font-size:clamp(3rem,9vw,8rem); line-height:.85; }.reward-burst span { margin-top:12px; font-size:.75rem; font-weight:950; letter-spacing:.2em; }.reward-burst.pop { animation:rewardPop 1.15s cubic-bezier(.2,.9,.2,1); }
@keyframes rewardPop { 0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg)} 18%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(2deg)} 40%{transform:translate(-50%,-50%) scale(1)} 75%{opacity:1} 100%{opacity:0;transform:translate(-50%,-72%) scale(.92)} }
.screen-impact { animation:impact .36s ease; } @keyframes impact { 25%{filter:brightness(1.35);transform:scale(1.006)} 60%{transform:translateX(-2px)} }
.particle { position:fixed; z-index:95; width:8px; height:18px; pointer-events:none; background:var(--lime); animation:particleFly 1.2s ease-out forwards; } @keyframes particleFly { to{transform:translate(var(--dx),var(--dy)) rotate(620deg);opacity:0} }
.reveal { animation:reveal .8s both; animation-timeline:view(); animation-range:entry 10% cover 28%; } @keyframes reveal { from { opacity:0; transform:translateY(30px); } }
@media (max-width:860px) {
  .site-header { grid-template-columns:1fr auto; height:68px; } .site-header nav { position:fixed; left:50%; bottom:16px; transform:translateX(-50%); padding:5px; border:1px solid var(--line); border-radius:99px; background:rgba(17,17,15,.94); backdrop-filter:blur(16px); } .profile-button b { display:none; }
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:90px; } h1 { font-size:clamp(3.9rem,17vw,7rem); } .focus-orbit { max-width:430px; }
  .stat-strip { grid-template-columns:1fr 1fr; } .stat-strip>div { border-bottom:1px solid var(--line); } .stat-strip>div:nth-child(even) { border-right:0; } .stat-strip>div:last-child { grid-column:1/-1; border-bottom:0; }
  .section-heading { grid-template-columns:1fr; } .section-heading>p { justify-self:start; }
  .exercise-card { grid-template-columns:38px 1fr 46px; padding:16px; } .exercise-prescription { grid-column:2; text-align:left; } .exercise-actions { grid-column:3; grid-row:1/3; flex-direction:column-reverse; } .complete-check { width:42px; height:42px; }
  .check-grid,.check-grid.compact { grid-template-columns:1fr 1fr; } .profile-fields,.onboard-row { grid-template-columns:1fr; } footer { grid-template-columns:1fr; gap:14px; padding-bottom:110px; } footer small { justify-self:start; }
  .video-choices { grid-template-columns:1fr 1fr; }
  .badge-shelf{grid-template-columns:repeat(3,1fr)}.sport-grid{grid-template-columns:1fr 1fr}.leaderboard-row{grid-template-columns:38px 1fr 90px 50px}.leaderboard-row>span{display:none}.level-rules{grid-template-columns:1fr}.plan-builder-heading,.account-grid{grid-template-columns:1fr}.account-achievements .badge-shelf{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:520px) {
  .brand { font-size:.85rem; } .nav-link { padding:9px 8px; font-size:.69rem; } .hero { padding-inline:22px; } .hero-actions .button { width:100%; }
  .stat-strip { margin-inline:0; } .stat-strip>div { padding:20px; } .workout-section { padding:90px 20px; } .exercise-number { align-self:start; padding-top:5px; } .segmented { grid-template-columns:1fr; }.badge-shelf{grid-template-columns:repeat(2,1fr)}.rank-row{grid-template-columns:1fr}.sport-grid{grid-template-columns:1fr}.leaderboard-heading{align-items:start;flex-direction:column}.leaderboard-row{padding:13px;grid-template-columns:28px 1fr 72px 44px}
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }