:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:#f4f8ff;background:#081018;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}a{color:#79efc8}.hidden{display:none!important}.app{height:100dvh;min-height:400px;position:relative;overflow:hidden;background:#081018}.viewer{position:absolute;inset:0;overflow:hidden}.viewer video,.viewer canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.viewer video{display:none;object-fit:contain;transform:scaleX(-1)}.viewer.camera .gridlines{display:none}.viewer.camera video{display:block}.viewer.camera canvas{display:none}.gridlines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#3b687224 1px,transparent 1px),linear-gradient(90deg,#3b687224 1px,transparent 1px);background-size:14.5% 18%;mask-image:linear-gradient(180deg,black,transparent 100%)}.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#020a0ce8,transparent 21%,transparent 63%,#020a0cec)}.header{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left))}.brand{display:flex;gap:10px;align-items:center}.logo{background:#53dfa9;color:#05221b;border-radius:11px;width:44px;height:44px;display:grid;place-items:center;font-weight:950;font-size:26px}.brand strong{display:block;font-size:18px;letter-spacing:-.6px}.brand small{display:block;color:#8fbdf4;font-weight:750;font-size:11px}.headActions{display:flex;gap:8px}.button{border:1px solid #ffffff30;background:#0c1e2cdd;backdrop-filter:blur(14px);color:#f5faff;border-radius:13px;padding:11px 15px;font-weight:750;font-size:14px;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:5px}.button.primary{color:#05231b;background:#53dfa9;border-color:#53dfa9}.button.active{border-color:#53dfa9;color:#a6ffdb}.button:disabled{opacity:.42;cursor:not-allowed}.button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #53dfa9;outline-offset:2px}.iconbutton{width:44px;height:44px;font-size:22px;padding:0}.modeBadge{position:absolute;top:88px;left:50%;transform:translateX(-50%);color:#9fc0d0;letter-spacing:.08em;font-size:11px;font-weight:800;white-space:nowrap}.state{position:absolute;left:15px;top:155px;background:#0b1a29df;border-radius:12px;padding:11px 14px;display:flex;align-items:center;gap:9px;font-size:12px;font-weight:750}.state i{width:8px;height:8px;background:#53dfa9;border-radius:100%}.metric{position:absolute;right:17px;top:155px;width:215px;background:#0d1928e8;border:1px solid #ffffff24;border-radius:20px;padding:19px 17px}.metric small{display:block;font-size:11px;font-weight:760;color:#aac4d4}.metric strong{display:block;font-size:48px;letter-spacing:-2px;color:#62ebbf;font-variant-numeric:tabular-nums;line-height:1.3}.metric strong span{font-size:23px;color:#d7e8ef;letter-spacing:0}.stageText{position:absolute;left:50%;bottom:195px;transform:translateX(-50%);background:#081727d6;border:1px solid #ffffff24;border-radius:14px;padding:11px 17px;text-align:center;min-width:235px;max-width:calc(100vw - 30px);pointer-events:none}.stageText span{display:block;font-size:15px;font-weight:780}.stageText small{font-size:11px;color:#b5ccdb}.status{position:absolute;left:50%;bottom:119px;transform:translateX(-50%);text-align:center;background:#0d2033e8;border:1px solid #ffffff24;border-radius:11px;padding:9px 13px;color:#d1e4ec;font-size:12px;width:max-content;max-width:92vw;pointer-events:none}.dock{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:8px;background:#071420e8;border:1px solid #ffffff2b;border-radius:19px;padding:9px;backdrop-filter:blur(20px)}.dock .button{min-height:49px}.dock #cameraBtn,.dock #recordBtn{min-width:165px}.intro{position:absolute;z-index:3;left:50%;top:46%;transform:translate(-50%,-50%);width:min(570px,calc(100vw - 32px));padding:26px 28px;background:#091b29ec;backdrop-filter:blur(20px);border:1px solid #406072b0;border-radius:22px;box-shadow:0 28px 70px #000a}.intro h1{font-size:clamp(25px,3vw,40px);line-height:1.13;letter-spacing:-.04em;margin:12px 0}.intro p{color:#c2d4df;line-height:1.52;font-size:14px}.eyebrow{font-size:11px;letter-spacing:.09em;font-weight:850;color:#6cecc4}.introActions{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0 13px}.intro small{font-size:11px;color:#a9bcc9}.scrim{position:absolute;z-index:5;inset:0;background:#0009}.drawer{position:absolute;z-index:6;right:0;top:0;bottom:0;width:min(445px,100vw);background:#0b1724fa;border-left:1px solid #ffffff2a;box-shadow:-20px 0 55px #0009;transform:translateX(105%);transition:transform .2s ease;display:flex;flex-direction:column}.drawer.open{transform:none}.drawerHead{display:flex;align-items:center;justify-content:space-between;padding:17px 18px;border-bottom:1px solid #ffffff20}.drawerHead strong{font-size:19px}.drawerContent{overflow-y:auto;overscroll-behavior:contain;padding:18px 18px 35px}.section{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #ffffff20}.section h2{font-size:16px;margin:0 0 12px}.section p{line-height:1.55;font-size:13px;color:#b7cbd8}.notice{background:#302923;color:#f6deac!important;border:1px solid #9a6b38;border-radius:10px;padding:12px}.section label{font-size:12px;color:#bbd1df;display:block;margin:12px 0 7px}.section select{width:100%;background:#10283b;color:#fff;border:1px solid #446277;padding:11px;border-radius:10px}.section input[type=checkbox]{accent-color:#53dfa9;width:17px;height:17px}.section .check{display:flex;align-items:center;gap:9px;font-size:13px;margin-top:12px}.help{color:#a8bccd!important;font-size:12px!important;line-height:1.55}.full{display:flex;width:100%;margin-top:10px;min-height:46px}.scorePhase{border:1px solid #3a5065;background:#0e2232;padding:13px;border-radius:12px;margin-bottom:13px}.scorePhase h3{margin:0 0 11px;font-size:14px}.bigScore{display:flex;gap:12px;align-items:baseline;margin:6px 0}.bigScore strong{font-size:82px;color:#53dfa9;font-variant-numeric:tabular-nums}.bigScore span{font-size:28px;color:#b0c7d6}.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat{padding:13px 10px;background:#10283b;border-radius:11px;min-width:0}.stat label{font-size:11px;margin:0 0 5px}.stat strong{font-size:22px}.stat em{font-style:normal;color:#b1c7d6;font-size:11px}.support{border:1px solid #335d54;border-radius:13px;padding:15px}.smallFoot{color:#a9bed0;font-size:12px;line-height:1.9}.supportLink{white-space:normal;text-align:center}@media(max-width:700px){.header{padding:10px}.brand .logo{width:37px;height:37px}.brand strong{font-size:16px}.headActions .button{padding:9px 11px;font-size:12px}.headActions .iconbutton{width:40px;height:40px}.modeBadge{top:72px}.state{top:117px;left:9px;font-size:10px;padding:9px}.metric{top:117px;right:9px;width:137px;padding:12px}.metric small{font-size:9px}.metric strong{font-size:32px}.metric strong span{font-size:17px}.stageText{bottom:182px;padding:8px 12px}.stageText span{font-size:13px}.stageText small{font-size:10px}.status{bottom:110px;font-size:11px}.dock{bottom:max(8px,env(safe-area-inset-bottom));width:calc(100% - 18px);gap:5px;padding:7px}.dock .button{min-height:45px;flex:1;min-width:0!important;padding:9px 6px;font-size:12px}.intro{top:48%;padding:20px}.intro h1{font-size:28px}.intro p{font-size:12px}}@media(max-height:600px){.intro{top:50%;max-height:calc(100dvh - 105px);overflow:auto}.state,.metric{top:92px}.stageText{bottom:103px}.status{bottom:79px}.dock{bottom:5px}.dock .button{min-height:38px}.modeBadge{top:67px}}@media(prefers-reduced-motion:reduce){.drawer{transition:none}}

/* v0.4 help and responsive refinements */
.helpSteps{padding-left:20px;color:#dce8f2;font-size:13px;line-height:1.65}.helpSteps li{margin:9px 0}.citation{display:flex;flex-direction:column;gap:5px;padding:12px;margin:10px 0;background:#0e2232;border:1px solid #375368;border-radius:11px;font-size:12px;line-height:1.55}.citation span{color:#afc5d4}.citation a{color:#6ceac0}.support{background:linear-gradient(135deg,#17352f,#102532);border-color:#429c7d}.support h2{font-size:21px}.supportLink{font-weight:800;justify-content:center}
@media(max-width:420px){.drawer{width:min(100vw,440px)}.dock{flex-wrap:wrap}.stageText{max-width:84vw}.metric{width:120px}.metric strong{font-size:28px}}

/* Measured pose overlay follows the live full-screen video. */
#trackingOverlay{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:2}.viewer:not(.camera) #trackingOverlay{display:none}.motionStatus{position:absolute;top:118px;left:18px;right:18px;z-index:7;max-width:600px;color:#9fdfd4;font-size:12px;text-shadow:0 1px 3px #071119;background:#07111999;border-radius:9px;padding:8px 11px;pointer-events:none}@media(min-width:800px){.motionStatus{top:108px;left:24px}}

/* v0.6 tracking visibility: keep the real pose canvas visible on camera. */
.viewer.camera #scene{display:none}
.viewer.camera #trackingOverlay{display:block;z-index:2}
.viewer.camera #trackingOverlay.mirrored{transform:scaleX(-1)}
.viewer.camera #trackingOverlay:not(.mirrored){transform:none}
.viewer.camera video.unmirrored{transform:none}
.motionStatus{z-index:3;top:auto;bottom:178px;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);text-align:center;font-size:13px;font-weight:750;border:1px solid #8aa2b544;white-space:normal}
.motionStatus[data-level="ok"]{color:#9df8cf;background:#0c392cd9;border-color:#53dfa9}
.motionStatus[data-level="warn"]{color:#ffe6a3;background:#302719ed;border-color:#c09a55}
.motionStatus[data-level="bad"]{color:#ffb6b6;background:#451e29ed;border-color:#b65a6b}
@media(max-width:700px){.motionStatus{bottom:165px;font-size:11px;max-width:calc(100% - 18px)}}

/* v0.7: prominent instructions legible when user is away from the screen */
.movementCue{position:absolute;z-index:3;top:48%;left:50%;transform:translate(-50%,-50%);width:min(660px,calc(100vw - 32px));padding:20px 24px;text-align:center;background:#051b22dd;border:2px solid #53dfa9;border-radius:18px;box-shadow:0 8px 40px #000b;pointer-events:none}
.movementCue strong{display:block;font-size:clamp(28px,4.2vw,64px);line-height:1.05;letter-spacing:-.03em;color:#a5ffdc;text-wrap:balance}
.movementCue span{display:block;font-size:clamp(17px,2.2vw,29px);margin-top:9px;font-weight:700}
.movementCue small{display:block;font-size:clamp(13px,1.4vw,19px);color:#b8d9e4;margin-top:8px}
.movementCue[data-level=complete]{background:#073529e8}.movementCue[data-level=bad]{background:#4a1d28ed;border-color:#f28f95}.movementCue[data-level=bad] strong{color:#ffd7da}
.viewer:not(.camera) ~ .movementCue{display:none}
.app:not(:has(.viewer.camera)) .movementCue{display:none}
.app:has(.intro:not(.hidden)) .movementCue{display:none}
.captureSummary{padding:15px;background:#0c2931;border:1px solid #53dfa966;border-radius:12px;font-size:18px;line-height:1.5;font-weight:760;color:#d9fff0}
@media(max-width:700px){.movementCue{top:48%;padding:14px 12px}.movementCue strong{font-size:clamp(27px,7vw,40px)}.movementCue span{font-size:16px}.movementCue small{font-size:13px}.stageText{display:none}.motionStatus{bottom:144px}.status{display:none}}