:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#edf7ff;background:#06111b;color-scheme:dark;--mint:#53e2b2;--line:#304b5e;--muted:#a7bfd0}*{box-sizing:border-box}body{margin:0;background:#06111b}button,a,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.38;cursor:not-allowed}.hidden{display:none!important}.header{height:88px;position:absolute;left:0;right:0;top:0;z-index:8;display:flex;align-items:center;justify-content:space-between;padding:12px 2vw;pointer-events:none;background:linear-gradient(#031019d9,transparent)}.header>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:#edf7ff}.logo{width:58px;height:58px;background:var(--mint);display:grid;place-items:center;border-radius:15px;color:#06231d;font-weight:900;font-size:32px}.brand strong{display:block;font-size:28px;letter-spacing:-1px}.brand small{display:block;font-size:12px;color:#9db9cf;letter-spacing:.2px}.header nav{display:flex;gap:10px}.outline{background:#102635e8;border:1px solid #3a586c;color:#e7f3fc;border-radius:14px;padding:12px 17px;font-weight:750;text-decoration:none;text-align:center}.outline:hover,.textBtn:hover{border-color:var(--mint);color:#fff}.primary{display:block;border:1px solid var(--mint);background:var(--mint);color:#07251e;border-radius:13px;padding:14px 16px;font-weight:850;text-decoration:none;text-align:center}.primary:hover{background:#76f1cb}main{position:relative}.stage{position:relative;height:100svh;min-height:650px;background-color:#06121d;background-image:linear-gradient(#24435438 1px,transparent 1px),linear-gradient(90deg,#24435438 1px,transparent 1px);background-size:16vw 16vw;overflow:hidden}.stage video,.stage canvas,.stageTint{position:absolute;width:100%;height:100%;inset:0;object-fit:contain}.stage video{transform:scaleX(-1)}.stage canvas{pointer-events:none}.stageTint{background:linear-gradient(90deg,transparent 50%,#06121d15 80%);pointer-events:none}.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px;gap:9px}.emptySymbol{font-size:120px;color:#204a50;line-height:1}.empty strong{font-size:clamp(23px,3vw,37px)}.empty p{font-size:16px;line-height:1.6;color:var(--muted)}.tracking,.timerBox,.cue{position:absolute;background:#0a1d2ae8;border:1px solid #375368;border-radius:18px}.tracking{top:105px;left:20px;padding:13px 20px;max-width:35%;font-size:14px}.timerBox{top:105px;left:50%;transform:translateX(-50%);padding:10px 23px;text-align:center;min-width:152px}.timerBox strong{font-size:clamp(43px,5vw,73px);line-height:1.1;letter-spacing:-2.8px;display:block;font-variant-numeric:tabular-nums}.timerBox small{font-size:10px;color:#afc4d3;font-weight:800;letter-spacing:1px}.cue{bottom:65px;left:calc((100% - 410px)/2);transform:translateX(-50%);max-width:calc(100% - 465px);padding:12px 18px;text-align:center;font-size:15px;font-weight:750;z-index:3}.progress{position:absolute;bottom:0;left:0;width:100%;height:5px;background:#163346}.progress>div{background:var(--mint);height:100%;width:0;transition:width .1s}.panel{position:absolute;right:23px;bottom:25px;width:360px;max-height:calc(100svh - 133px);overflow:auto;padding:20px;border:1px solid #385368;border-radius:24px;background:#0b1c2ce9;backdrop-filter:blur(20px);box-shadow:0 20px 90px #0008;z-index:5;scrollbar-width:thin;scrollbar-color:#466476 transparent}.stepTop{display:flex;justify-content:space-between;font-size:11px;color:var(--mint);font-weight:850;letter-spacing:1px}.steps{display:flex;gap:6px;margin:12px 0 16px}.steps span{background:#274356;border-radius:4px;height:5px;flex:1}.steps span.done{background:#53e2b2}.steps span.current{background:#f4c57e}.panel h1{font-size:clamp(23px,2.3vw,30px);line-height:1.1;letter-spacing:-.8px;margin:0 0 10px}.description{color:#d4e4ec;font-size:13px;line-height:1.55;margin:0 0 8px}.target{font-size:11px;color:#a9c1d0;margin:0 0 13px}.modePicker{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 0 6px}.modePicker button{font-size:12px;padding:10px 5px}.modePicker .activeMode{border-color:var(--mint);color:var(--mint)}.micro{color:#a4bdca;font-size:11px;line-height:1.4;margin:4px 0 11px}.panel>.primary,.panel>#stopBtn{width:100%;margin-bottom:7px}.navActions{display:flex;justify-content:space-between;margin:11px 0}.textBtn{background:none;color:#b1ccda;border:1px solid transparent;border-radius:8px;padding:7px;font-size:12px;font-weight:750}.safetyMini{border-top:1px solid #284457;padding-top:10px;font-size:10px;line-height:1.5;color:#91aebe;margin:4px 0}.inlineLink{border:0;background:none;padding:0;color:#6be6c2;text-decoration:underline;cursor:pointer}.optionRow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.optionRow button{border:1px solid #405b6c;border-radius:11px;background:#15303f;color:#e0eff7;padding:10px 6px;font-weight:700;font-size:12px}.optionRow button.selected{background:var(--mint);color:#06251e;border-color:var(--mint)}.choiceGroup{display:grid;gap:8px}.choiceGroup button{border:1px solid #405b6c;border-radius:10px;background:#15303f;color:#e0eff7;padding:11px;text-align:left;font-size:13px}.choiceGroup button.selected{border-color:var(--mint);background:#21463f}.counter{display:flex;align-items:center;justify-content:center;gap:17px;padding:7px}.counter strong{font-size:46px;font-variant-numeric:tabular-nums;min-width:72px;text-align:center}.counter button{border:1px solid #416677;background:#143240;border-radius:13px;color:white;font-size:26px;width:48px;height:48px}.smallLabel{font-size:12px;color:#b7cfda;margin:4px 0 7px}.inlineResult{background:#153b3b;border:1px solid #4a927f;padding:11px;border-radius:12px;font-size:13px;margin-top:8px}.inlineResult strong{display:block;font-size:20px;color:#aafadd}.inlineResult small{display:block;color:#b6d2d5;line-height:1.4}.summary{max-width:960px;margin:35px auto 45px;padding:0 20px;scroll-margin-top:15px}.summaryHead{text-align:center}.kicker{font-size:12px;letter-spacing:1.4px;font-weight:800;color:var(--mint)}.summaryHead h2{font-size:clamp(29px,5vw,46px);margin:7px 0}.summaryHead p,.summaryFoot{color:var(--muted);font-size:13px;line-height:1.6}.resultCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:24px 0}.resultCard{padding:18px;background:#0d2432;border:1px solid #2f4b5b;border-radius:16px}.resultCard small{display:block;color:#a2c2d0;font-weight:700}.resultCard strong{display:block;font-size:25px;margin:8px 0;color:#f6cc87}.resultCard p{color:#b5cbd4;font-size:11px;line-height:1.5;margin:5px 0}.summaryButtons{display:flex;gap:10px;flex-wrap:wrap}.summaryFoot{margin-top:15px}.supportInline{padding:0;border:0;background:none;color:#72e7c1;text-decoration:underline;margin-top:8px}footer{padding:16px;text-align:center;color:#819eb0;font-size:11px}.modal{position:fixed;inset:0;background:#010a10d9;z-index:30;display:grid;place-items:center;padding:15px;backdrop-filter:blur(5px)}.dialog{background:#0d2736;border:1px solid #496573;border-radius:23px;padding:24px;width:min(650px,100%);max-height:90svh;overflow:auto;position:relative}.dialog h2{margin:0 0 12px;font-size:26px}.dialog h3{margin:18px 0 6px;color:#71e7c4;font-size:15px}.dialog p,.dialog li{font-size:13px;line-height:1.65;color:#c3d6df}.dialog a{color:#81e9ce}.dialog .primary{width:100%;margin-top:16px}.close{position:absolute;right:16px;top:10px;background:#234252;border:0;color:#fff;font-size:25px;padding:4px 12px;border-radius:10px}.setting{display:block;font-size:13px;margin:13px 0}.setting select{display:block;background:#163644;color:white;border:1px solid #537184;border-radius:9px;padding:9px;margin-top:5px}.support{text-align:center;max-width:430px}.support .logo{margin:0 auto 15px}.two{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:17px 0}.two>.primary{margin:0}.support small{font-size:11px;color:#91aebc}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid white;outline-offset:3px}@media(max-width:1100px){main{display:flex;flex-direction:column}.stage{height:59svh;min-height:350px}.panel{position:relative;bottom:auto;right:auto;width:auto;max-height:none;margin:0 10px 8px;border-radius:0 0 20px 20px}.cue{left:50%;max-width:92%;bottom:23px}.timerBox{top:90px}.tracking{top:90px}}@media(max-width:650px){.header{height:65px;padding:8px}.logo{height:39px;width:39px;font-size:22px;border-radius:10px}.brand{gap:8px}.brand strong{font-size:19px}.brand small{font-size:9px}.header nav{gap:5px}.header nav .outline{font-size:11px;padding:8px}.header nav .outline span{display:none}.stage{height:48svh;min-height:310px}.tracking{top:75px;left:9px;font-size:10px;padding:8px;max-width:42%}.timerBox{top:75px;right:9px;left:auto;transform:none;min-width:85px;padding:8px}.timerBox strong{font-size:37px}.timerBox small{font-size:8px}.emptySymbol{font-size:75px}.empty strong{font-size:22px}.empty p{font-size:12px}.cue{bottom:15px;font-size:12px;padding:9px}.panel{padding:16px;margin:0 7px 8px}.resultCards{grid-template-columns:1fr}.summaryButtons{flex-direction:column}.summaryButtons>*{width:100%}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Body 5 guided visual demonstration and live camera cues */
.demo{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:12px;pointer-events:none;text-align:center;opacity:.95;max-width:58%;}
.demoPerson{width:140px;height:220px;position:relative;animation:demoBob 2.4s ease-in-out infinite alternate;transform-origin:50% 80%}
.demoHead,.demoTrunk,.demoArm,.demoLeg,.demoFloor{position:absolute;display:block;background:#63e4bd;box-shadow:0 0 16px #62e5b032}
.demoHead{width:38px;height:38px;border-radius:50%;top:9px;left:51px}.demoTrunk{width:19px;height:91px;border-radius:12px;left:60px;top:50px}.demoArm{width:8px;height:78px;border-radius:8px;top:59px;left:82px;transform:rotate(-55deg);transform-origin:top center}.demoLeg{width:12px;height:86px;border-radius:9px;top:130px;left:53px;transform:rotate(11deg);transform-origin:top center}.demoLeg.right{left:75px;transform:rotate(-11deg)}.demoFloor{height:2px;width:190px;top:216px;left:-25px;opacity:.45}.demoTitle{font-weight:850;font-size:20px}.demoText{font-size:13px;color:#b3d3dd;line-height:1.5;max-width:300px}.demo.chair .demoPerson{animation:demoSit 2.8s ease-in-out infinite}.demo.heels .demoPerson{animation:demoRise 2s ease-in-out infinite}.demo.balance .demoLeg.right{animation:demoLegLift 2.2s ease-in-out infinite}.demo.reach .demoPerson{animation:demoBend 2.4s ease-in-out infinite}.demo.wall .demoPerson{animation:none}
@keyframes demoSit{0%,100%{transform:translateY(23px) scaleY(.78)}45%,65%{transform:translateY(0) scaleY(1)}}@keyframes demoRise{0%,100%{transform:translateY(0)}50%{transform:translateY(-19px)}}@keyframes demoLegLift{0%,100%{transform:rotate(-11deg)}45%,70%{transform:rotate(-42deg)}}@keyframes demoBend{0%,100%{transform:rotate(0)}50%{transform:rotate(28deg)}}@keyframes demoBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.liveFeedback{z-index:5;position:absolute;top:27%;left:50%;transform:translateX(-50%);width:max-content;max-width:55%;text-align:center;background:#071b2be8;border:1px solid #3b6170;padding:12px 18px;border-radius:16px;display:flex;flex-direction:column;gap:5px;pointer-events:none}.liveFeedback strong{font-size:16px;color:#58e5bb}.liveFeedback span{font-size:12px;color:#e0ebf2}
.stage.cameraMode .demo{display:none}.stage.cameraMode .empty{display:none}.evidence p{padding:8px 0;border-bottom:1px solid #2b4e5a}
@media(max-width:760px){.demo{top:58%;max-width:65%;transform:translate(-50%,-50%) scale(.78)}.liveFeedback{top:33%;max-width:90%;min-width:210px;padding:7px 9px}.liveFeedback strong{font-size:12px}.liveFeedback span{font-size:10px}}

/* v0.3: real illustrated directions replace abstract stick-person animation. */
.demoPerson{display:none!important}.demoArt{width:clamp(220px,27vw,365px);max-height:37vh;overflow:hidden;border-radius:19px;border:1px solid #416070;background:#e9e9f9;box-shadow:0 20px 65px #0007}.demoArt img{display:block;width:100%;height:100%;max-height:37vh;object-fit:contain}.demo{max-width:55%;gap:9px}.demoTitle{font-size:clamp(14px,1.4vw,18px)}.demoText{font-size:12px}.repBadge{position:absolute;z-index:6;top:23%;left:clamp(20px,3vw,50px);padding:12px 20px;border:1px solid #48a78c;background:#071c25e8;border-radius:20px;pointer-events:none;text-align:center}.repBadge strong{font-size:clamp(56px,7vw,110px);font-variant-numeric:tabular-nums;color:#58e5b5;line-height:1;display:block}.repBadge span{font-size:12px;letter-spacing:1.5px;font-weight:900;color:#c7e4e4}.stage.cameraMode .repBadge{display:block}.stage.cameraMode .repBadge.hidden{display:none}.stage.cameraMode .panel{opacity:.7}@media(max-width:760px){.demo{max-width:85%;top:57%;transform:translate(-50%,-50%)}.demoArt{width:min(220px,52vw);max-height:24vh}.demoArt img{max-height:24vh}.repBadge{top:38%;left:10px;padding:6px 10px}.repBadge strong{font-size:42px}.repBadge span{font-size:9px}}
