*{box-sizing:border-box}body{margin:0;background:#f5f5f0;color:#263a30;font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;font-size:13px}button,a,input{ -webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;transition:background .18s,transform .16s;border:0}button:active{transform:scale(.97)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #658b50;outline-offset:4px}header{height:86px;display:flex;align-items:center;justify-content:space-between;margin:0 40px;border-bottom:1px solid #dce1d9}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-size:22px;font-weight:700;letter-spacing:2px}.mark{background:#304b3b;color:#e4f596;display:grid;place-items:center;width:34px;height:36px;font-size:28px;border-radius:8px;font-style:italic;letter-spacing:-5px;padding-right:6px}.brand-sub{font-size:12px;font-weight:400;letter-spacing:1px;margin-left:16px;color:#8a958c}.session{font-size:10px;letter-spacing:1.5px;display:flex;align-items:center;gap:12px;color:#7f8d82}.dot{width:5px;height:5px;background:#739071;border-radius:50%;margin-left:18px}main{display:grid;grid-template-columns:260px minmax(380px,1fr) 270px;max-width:1700px;margin:auto;min-height:calc(100vh - 86px)}aside{padding:42px 30px}.left{border-right:1px solid #e0e4dc;padding-left:40px}.eyebrow{font-size:9px;letter-spacing:2px;color:#8e9a90}h1{font-size:29px;font-weight:500;line-height:1.5;letter-spacing:-1px;margin:24px 0 12px}.intro{color:#939b94;font-size:11px;margin-bottom:44px}.label{font-size:10px;color:#8d978e;margin-bottom:15px}.move{display:flex;align-items:center;text-align:left;width:100%;gap:14px;background:transparent;border-radius:9px;padding:18px 12px;margin:5px 0}.move.active{background:#e7ecdf}.move .num{font-size:10px;color:#9ba58f}.move small{display:block;font-size:8px;letter-spacing:1px;color:#929c91;margin-top:6px}.move>span:last-child{margin-left:auto;color:#8a9987}.focus{margin-top:38px}.chip{padding:8px 12px;margin:0 4px 7px 0;background:transparent;border:1px solid #dce2d6;border-radius:20px;font-size:11px}.chip.active{background:#35513f;color:white;border-color:#35513f}.left-bottom{margin-top:72px;display:flex;gap:12px;color:#a0a89b;font-size:11px;line-height:1.8}.mini-cross{font-size:30px;color:#819875}.left-bottom p{margin:0}.stage{position:relative;min-width:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 40%,#fff 0,#f0f2e9 65%,#edf0e6 100%)}.stage-heading{position:absolute;top:33px;left:32px;right:32px;display:flex;justify-content:space-between;z-index:1;pointer-events:none}.stage-heading h2{font-weight:500;font-size:19px;margin:10px 0}.model-badge{border:1px solid #d5decf;border-radius:5px;height:25px;padding:5px 9px;color:#809074;font-size:10px}#viewport{height:calc(100vh - 285px);min-height:440px;position:relative;touch-action:none;cursor:grab}#viewport:active{cursor:grabbing}#viewport canvas{display:block;width:100%;height:100%}#loading{position:absolute;top:50%;left:30%;color:#8d9986}.coordinate{position:absolute;bottom:26px;left:32px;font-size:10px;line-height:12px;color:#9aa58f}.rotate-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;color:#99a18f}.views{position:absolute;right:24px;top:120px;display:flex;flex-direction:column;gap:6px;background:#ffffff80;padding:5px;border:1px solid #e0e5d8;border-radius:9px}.views button{background:transparent;border-radius:5px;padding:8px 10px;font-size:10px;color:#8b9785}.views button.active{background:#e4ead9;color:#3a573e}.timeline{margin:auto 28px 24px;background:#ffffffa6;border:1px solid #e0e6d7;border-radius:13px;padding:17px 21px}.transport{display:flex;align-items:center;gap:13px}.transport>button:first-child{width:34px;height:34px;border-radius:50%;background:#36543f;color:#e4f39b;font-size:12px}.transport b{font-size:12px;font-weight:500}.transport span{font-size:9px;color:#a0a997;margin-left:14px;letter-spacing:1px}#speed{margin-left:auto;border:1px solid #e0e5d9;border-radius:5px;padding:5px 9px;background:transparent;font-size:10px}input[type=range]{width:100%;accent-color:#526e46;height:3px;margin:23px 0 13px;cursor:pointer}.phases{display:flex;justify-content:space-between}.phases button{background:transparent;font-size:10px;color:#99a38f;padding:3px 0}.phases button.active{color:#3b5b38}.right{border-left:1px solid #e0e4dc}.right h3{font-size:19px;font-weight:500;margin:20px 0 27px}.phase-card{border-top:1px solid #dde3d7;padding-top:23px}.pill{color:#829675;font-size:9px;border:1px solid #d6dfcb;border-radius:4px;padding:4px 7px}.phase-card h2{font-size:19px;font-weight:500;line-height:1.7;margin:20px 0 12px}.phase-card p{color:#8b9688;font-size:11px;line-height:1.9;margin:0}.diagram{margin:22px 0;background:#ebeee5;border-radius:7px;height:98px}.diagram svg{width:100%;height:100%}.layer-label{margin-top:31px}.switch-row{display:flex;align-items:center;justify-content:space-between;margin:20px 0;color:#7a8878;font-size:11px;position:relative;cursor:pointer}.switch-row input{position:absolute;opacity:0;right:0}.switch-row span{width:28px;height:16px;background:#d7ddcf;border-radius:10px;position:relative}.switch-row span:before{content:'';position:absolute;width:10px;height:10px;left:3px;top:3px;border-radius:50%;background:white;transition:transform .18s}.switch-row input:checked+span{background:#59744b}.switch-row input:checked+span:before{transform:translateX(12px)}.switch-row input:focus-visible+span{outline:2px solid #59744b}.note{display:flex;gap:12px;margin-top:37px;border-top:1px solid #dde3d7;padding-top:23px}.note>span{font-size:23px;color:#7d936d}.note b{font-size:11px;font-weight:500}.note p{font-size:10px;color:#929d89;line-height:1.8}.footer-note{margin-top:43px;font-size:9px;letter-spacing:1.5px;color:#9aa38e;display:flex;justify-content:space-between}.footer-note span{font-size:8px;letter-spacing:0}@media(min-width:1450px){main{grid-template-columns:300px 1fr 310px}aside{padding:45px 40px}h1{font-size:34px}}@media(max-width:1000px){main{grid-template-columns:205px 1fr}.right{grid-column:1/-1;display:none}.left{padding-left:24px;padding-right:20px}header{margin:0 24px}h1{font-size:25px}.brand-sub{display:none}}@media(max-width:640px){header{height:66px;margin:0 18px}.session{font-size:8px}.brand{font-size:18px}main{display:flex;flex-direction:column}.left{padding:20px;border:0}h1,.intro,.left>.eyebrow,.left>.label,.focus,.left-bottom{display:none}#moves{display:flex;gap:5px}.move{padding:12px 10px;gap:8px}.move small,.move>span:last-child{display:none}.stage{min-height:650px}#viewport{height:480px}.stage-heading{top:22px;left:24px}.timeline{margin:0 16px 20px}.views{right:12px;top:90px}}

.scope-summary{border-top:1px solid #dce2d6;margin-top:38px;padding-top:24px;display:grid;gap:12px}.scope-summary .label{margin:0}.scope-summary strong{font-size:13px;font-weight:500;margin-bottom:18px}@media(max-width:640px){.scope-summary{display:flex;align-items:center;gap:12px;padding:0;margin:0;border:0}.scope-summary strong{margin:0}.scope-summary .label{font-size:10px}.left{padding:16px 20px}}

main{grid-template-columns:230px minmax(380px,1fr)}.stage{border-right:0}.source-video{margin-top:28px}.source-video video{display:block;width:100%;border-radius:8px;background:#e1e5da}.source-video .label{margin-bottom:10px}#viewport{height:calc(100vh - 285px)}@media(min-width:1450px){main{grid-template-columns:270px 1fr}}@media(max-width:640px){main{display:flex}.source-video{display:none}}

.chain-legend{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;margin-top:24px;color:#70806e;font-size:12px}.chain-legend div{display:flex;align-items:center;gap:9px}.chain-legend i{width:9px;height:9px;border-radius:50%}@media(max-width:640px){.chain-legend{display:flex;gap:18px;margin-top:15px}}

.chain-legend div{border-radius:6px;padding:6px 7px;margin:-6px -7px;opacity:.55}.chain-legend div.rotating{opacity:1;background:#e2e9da;color:#2f4938;font-weight:600}.rotation-order-panel{margin-top:30px}.rotation-event{display:flex;align-items:center;gap:9px;padding:8px 0;color:#9ca695;font-size:11px}.order-number{width:19px;height:19px;display:grid;place-items:center;border:1px solid #d6dfce;border-radius:50%;font-size:9px}.order-time{margin-left:auto;font-size:10px;font-variant-numeric:tabular-nums}.rotation-event.current{color:#35543b;font-weight:600}.rotation-event.current .order-number{background:#35543b;border-color:#35543b;color:white}.rotation-event.passed{color:#6f8269}#rotation-status{font-size:11px;color:#73896b;margin-top:12px}@media(max-width:640px){.rotation-order-panel{display:none}}

.chain-legend div{opacity:1;border:1px solid transparent}.chain-legend div.rotating{background:transparent;border-color:#627b57;color:#2f4938;font-weight:600}.rotation-event.current{border-left:2px solid #627b57;padding-left:8px}

.body-badges{position:absolute;inset:0;pointer-events:none;overflow:hidden}.badge-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.badge-lines line{stroke-width:1;opacity:.75}.body-badge{position:absolute;top:0;left:0;display:flex;align-items:center;gap:7px;border:1px solid #d9e0d1;background:#f8faf3f2;border-radius:18px;padding:4px 10px 4px 4px;box-shadow:0 2px 7px #273b3010;font-size:12px;color:#52614c;white-space:nowrap}.body-badge[hidden]{display:none}.body-badge b{display:grid;place-items:center;background:var(--region);color:white;width:24px;height:24px;border-radius:50%;font-size:13px;font-variant-numeric:tabular-nums}.body-badge span{font-weight:500}

.body-badge{border-color:var(--region);padding:5px 13px 5px 5px;gap:10px;background:#fff;box-shadow:0 3px 12px #263a3020;font-size:14px;border-radius:25px}.body-badge b{width:34px;height:34px;font-size:21px;font-weight:700}.badge-lines line{stroke-width:2;opacity:1}

.step-controls{display:flex;gap:6px;margin-left:auto}.step-controls button{background:transparent;border:1px solid #d5decf;border-radius:6px;padding:7px 10px;font-size:12px}.step-controls button:disabled{opacity:.35;cursor:default}#speed{margin-left:0}.body-badge small{font-size:11px;color:#687563;font-weight:500}.body-badge small[hidden]{display:none}@media(max-width:640px){.transport{gap:8px}.step-controls{gap:4px}.step-controls button{padding:7px 6px}}
.subject-names{position:absolute;top:105px;left:0;right:0;display:flex;pointer-events:none;font-size:16px;font-weight:600}.subject-names span{width:50%;text-align:center}.subject-names[hidden],.overlay-key[hidden]{display:none}.stage-heading{align-items:center}.stage-heading h2{margin:4px 0}.source-video video{width:100%;border-radius:8px}.source-video{margin-top:28px}main{grid-template-columns:230px minmax(380px,1fr)}@media(min-width:1450px){main{grid-template-columns:260px 1fr}}@media(max-width:640px){main{display:flex}.left .source-video{display:inline-block;width:47%;margin:15px 1% 0}.scope-summary{display:none}.subject-names,.stage-heading{left:18px;right:18px}.views{right:10px;top:125px}#viewport{min-height:430px}}

.analysis-panel{margin:0 28px 16px;padding:15px 18px;border:1px solid #dce3d4;border-radius:10px;background:#fff9}.analysis-head{display:flex;justify-content:space-between;gap:12px;font-weight:600;font-size:13px}.analysis-head #analysis-limit{font-size:10px;font-weight:400;color:#7a8575}.analysis-panel p{margin:8px 0 0;font-size:12px;line-height:1.65}.analysis-context{color:#7e8978}.analysis-action{color:#36543f;font-weight:500}.timeline{margin-top:0}#viewport{height:calc(100vh - 440px);min-height:400px}@media(max-width:640px){.analysis-panel{margin:0 14px 14px}#viewport{height:440px}.analysis-head{flex-wrap:wrap}}

.pending-questions{margin-top:24px;color:#66775e;font-size:12px}.pending-questions summary{cursor:pointer;font-weight:500}.pending-questions ul{padding-left:17px;margin:12px 0}.pending-questions li{line-height:1.7;margin:8px 0}

.comparison-pages{display:flex;gap:4px;pointer-events:auto;background:#e5eadd;border-radius:7px;padding:4px}.comparison-pages a{text-decoration:none;color:#65765e;font-size:12px;padding:7px 10px;border-radius:4px;white-space:nowrap}.comparison-pages a[aria-current=page]{background:white;color:#2f4b35;box-shadow:0 1px 3px #263a3015}@media(max-width:640px){.comparison-pages a{padding:6px;font-size:11px}}

.analysis-panel h3{margin:0 0 15px;font-size:15px;font-weight:600;line-height:1.5}.phase-explanation{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}.phase-explanation>div{min-width:0}.phase-explanation dt{margin:0 0 5px;font-size:11px;color:#77816f}.phase-explanation dd{margin:0;font-size:13px;line-height:1.75;color:#344636}.phase-explanation>div:last-child dd{color:#35543b}.analysis-panel{padding:18px 20px}#viewport{height:calc(100vh - 570px);min-height:430px}@media(max-width:640px){.phase-explanation{grid-template-columns:1fr;gap:14px}.analysis-panel{padding:16px}#viewport{height:440px}}

main{grid-template-columns:290px minmax(380px,1fr)}.left{padding-left:24px;padding-right:24px}#viewport{flex:0 0 auto;height:460px;min-height:460px}.analysis-panel{min-height:265px;flex:0 0 auto}.timeline{flex:0 0 auto}.subject-names{top:76px}.source-open{display:block;padding:0;width:100%;background:transparent;border-radius:8px;overflow:hidden;cursor:zoom-in}.source-open video{display:block;pointer-events:none}.source-open:hover{box-shadow:0 0 0 2px #8b9e7a}.source-open:active{transform:none}#source-dialog{width:min(1100px,94vw);max-height:94vh;padding:0;border:1px solid #dce3d4;border-radius:12px;background:#f5f5f0;color:#263a30;box-shadow:0 24px 100px #0005}#source-dialog::backdrop{background:#17231dd9}.source-dialog-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px}.source-dialog-header h2{font-size:15px;font-weight:500;margin:0}.source-dialog-header button{font-size:27px;width:34px;height:34px;line-height:1;border-radius:50%;background:transparent}#expanded-video{display:block;width:100%;max-height:calc(90vh - 66px);background:#101510}@media(min-width:1450px){main{grid-template-columns:310px 1fr}}@media(max-width:760px){main{grid-template-columns:230px minmax(360px,1fr)}.left{padding:24px 18px}.phase-explanation{grid-template-columns:1fr}}@media(max-width:640px){main{display:flex}.left .source-video{width:47%}#viewport{height:440px;min-height:440px}.subject-names{top:76px}.analysis-panel{min-height:0}}

/* Responsive viewing and touch controls. */
.source-video .label{display:flex;align-items:center;justify-content:space-between;gap:8px}.source-hint{font-size:10px;color:#718268;white-space:nowrap}.device-hint{font-size:11px;color:#7c8877}.source-open{aspect-ratio:16/9}.source-open video{height:100%;object-fit:contain}.transport button,.views button,.comparison-pages a{min-height:40px}.timeline input[type=range]{height:24px;margin:12px 0 4px}.source-dialog-header button{width:44px;height:44px}
@media(max-width:1000px) and (min-width:641px){main{grid-template-columns:220px minmax(0,1fr)}.left{padding:24px 16px}.stage-heading{left:20px;right:20px}.timeline,.analysis-panel{margin-left:16px;margin-right:16px}.transport{flex-wrap:wrap;gap:8px}.transport>button:first-child{width:44px;height:44px}.step-controls button{min-height:44px}.views{right:10px}.phase-explanation{grid-template-columns:1fr}}
@media(max-width:640px){header{height:58px;margin:0 16px}.device-hint{font-size:10px}.left{display:flex;flex-wrap:wrap;gap:12px;padding:14px 16px}.chain-legend{width:100%;margin:0;gap:22px}.left .source-video{display:block;width:calc(50% - 6px);margin:4px 0 0}.source-video .label{font-size:11px;margin-bottom:7px}.source-hint{font-size:10px}.stage-heading{top:14px;left:16px;right:16px}.stage-heading h2{font-size:17px}.comparison-pages a{display:grid;place-items:center;min-width:44px}.subject-names{top:75px;font-size:14px}#viewport{height:400px;min-height:400px;order:0}.views{top:112px;right:6px;padding:3px;gap:2px}.views button{min-height:40px;padding:6px;font-size:10px}.rotate-hint{font-size:10px;bottom:12px}.timeline{order:1;margin:0 12px 14px;padding:12px}.analysis-panel{order:2;margin:0 12px 20px}.transport{gap:8px;flex-wrap:wrap}.transport>button:first-child{width:44px;height:44px;flex-shrink:0}.transport b{font-size:12px}.step-controls{gap:5px}.step-controls button{min-height:44px;padding:7px 8px;font-size:11px}#speed{min-height:44px;padding:6px 8px}.phases button{min-height:44px;font-size:10px}.phase-explanation dd{font-size:14px;line-height:1.8}#source-dialog{width:96vw;max-height:94dvh}.source-dialog-header{padding:8px 12px}#expanded-video{max-height:calc(94dvh - 60px)}}
@media(max-width:360px){.transport b{flex:1}.step-controls{margin-left:0}.device-hint{max-width:140px;text-align:right}}
@media(max-width:640px){.views{top:332px;left:50%;right:auto;transform:translateX(-50%);flex-direction:row;gap:4px}.views button{min-width:44px}.rotate-hint{bottom:9px;font-size:0}.rotate-hint:after{content:'拖动旋转';font-size:10px}}
/* Keep the play control circular when the transport row is crowded. */
.transport>button:first-child{width:44px;height:44px;min-width:44px;min-height:44px;max-width:44px;max-height:44px;flex:0 0 44px;aspect-ratio:1;display:grid;place-items:center;padding:0;border-radius:50%;line-height:1}
.transport{flex-wrap:wrap}

.analysis-tag{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:500;line-height:1.4;letter-spacing:.02em}.coordination-tag{background:#e7ece5;color:#64745f}.priority-tag{background:#ece9e0;color:#79715c}.phase-explanation dt:has(.analysis-tag){margin-bottom:8px}

.subject-names small{display:block;margin-top:8px;font-size:11px;font-weight:400;color:#7b826f}.subject-names small b{display:inline-block;min-width:35px;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;color:#53634c}

.angle-value{position:absolute;z-index:2;pointer-events:none;transform:translate(-50%,-50%);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:#594489;background:#faf8ffe8;border:1px solid #c8bfdc;border-radius:6px;padding:3px 6px;line-height:1.25}

.measure-controls{display:flex;flex-wrap:wrap;gap:6px;margin:0 28px 14px}.measure-controls button{border:1px solid #dcd8e5;background:#f4f2f7;color:#777080;border-radius:18px;padding:7px 12px;font-size:11px;min-height:36px}.measure-controls button.active{background:#e5dfef;color:#594489;border-color:#c7bbda}@media(max-width:640px){.measure-controls{order:1;margin:0 12px 12px;gap:5px}.measure-controls button{padding:6px 9px;min-height:40px}.views{gap:1px}.views button{min-width:40px}}

.angle-value{font-weight:500;color:#5d6e5b;background:#f8faf4e8;border-color:#cdd5c7}.measure-controls button{border-color:#d9dfd3;background:#f2f4ee;color:#77816f}.measure-controls button.active{background:#e4eadd;color:#52664c;border-color:#c2ceba}
/* Keep measurement controls on the same surface as the body viewer. */
.stage{background:#eff2e8}.measure-controls{background:transparent;box-shadow:none}.measure-controls button{background:transparent}.measure-controls button.active{background:#e3e9dc}

.metric-analysis{margin-top:20px;padding-top:16px;border-top:1px solid #dde3d7}.metric-analysis h4{margin:0 0 8px;font-size:13px;font-weight:500}.metric-analysis p{margin:7px 0 0;font-size:13px;line-height:1.8;color:#596853}.metric-analysis #metric-values{font-variant-numeric:tabular-nums;color:#344b36}.analysis-panel{order:2}.timeline{order:1;margin-bottom:16px}.measure-controls{order:0}

#loading{left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px}#loading button{padding:8px 12px;border-radius:16px;background:#e1e8d9;margin-left:6px}
@media(max-width:640px){header{height:52px}.brand{font-size:17px}.device-hint{font-size:9px}.stage{min-height:0}.stage-heading{top:12px;left:16px;right:16px}.stage-heading h2{font-size:16px}.subject-names{top:68px}#viewport{height:350px;min-height:350px}.views{top:280px;padding:2px}.views button{min-height:36px;min-width:40px}.rotate-hint{bottom:8px}.measure-controls{order:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 0 12px;padding:0 14px;gap:6px;-webkit-overflow-scrolling:touch}.measure-controls::-webkit-scrollbar{display:none}.measure-controls button{flex:0 0 auto;white-space:nowrap;min-height:40px;font-size:11px;padding:8px 12px}.timeline{order:1;margin:0 12px 12px;padding:12px}.transport{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px}.transport b{font-size:12px}.step-controls{grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;margin:0;gap:8px}.step-controls button{min-height:40px;background:#f0f3eb;border-color:#e0e5d9;font-size:12px}#speed{grid-column:3;grid-row:1;min-height:40px}.timeline input[type=range]{margin-top:10px}.phases button{min-height:36px;font-size:10px}.left{order:2;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 16px 20px;border:0}.chain-legend{grid-column:1/-1;display:flex;justify-content:center;gap:24px;font-size:11px;margin:0 0 3px}.left .source-video{display:block;width:100%;margin:0}.source-video .label{font-size:11px}.source-hint{font-size:10px}.analysis-panel{order:3;margin:0 12px 18px;padding:16px}.analysis-panel h3{font-size:15px;margin-bottom:18px}.phase-explanation{gap:20px}.phase-explanation dd,.metric-analysis p{font-size:13px;line-height:1.85}.metric-analysis{margin-top:22px;padding-top:18px}.angle-value{font-size:11px;padding:2px 4px}}

#viewport.ready-preview #loading{top:auto;bottom:12px;padding:5px 9px;border-radius:12px;background:#eff2e8e8;font-size:11px}#viewport.ready-preview .rotate-hint{visibility:hidden}.transport>button:first-child:disabled{opacity:.45;cursor:wait}input:disabled{cursor:wait}