.human-study{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#242e31;border-radius:3px;color:#e9eeee;isolation:isolate;container-type:inline-size}
.human-poster{width:100%;height:100%;display:block;object-fit:contain;background:#242e31}
.human-status{position:absolute;top:14px;left:16px;right:16px;font:500 10px/1.4 var(--mono,monospace);letter-spacing:.06em;pointer-events:none;color:#d3dcdd;text-transform:uppercase;z-index:1}
.drill-art .human-status{display:none}
.human-canvas{position:absolute;inset:0 0 auto;width:100%;height:auto;aspect-ratio:4/3;display:block;touch-action:pan-y;outline-offset:-4px;cursor:grab}
.human-canvas:active{cursor:grabbing}
.human-canvas:focus-visible{outline:2px solid #ffc46b}
/* Poster first, then the model. The poster is the real rendered frame of the
   phase on screen, so the wait shows the movement rather than a spinner, and the
   swap is a fade rather than a cut. Visibility is held until the fade ends so
   the hidden poster never takes a click. */
.human-study>.human-poster{opacity:1;transition:opacity .22s ease}
.human-study[data-ready=true]>.human-poster{opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s}
@media(prefers-reduced-motion:reduce){.human-study>.human-poster,.human-study[data-ready=true]>.human-poster{transition:none}}
.human-study[data-ready=fallback]>.human-canvas{display:none}
.human-study[data-ready=fallback]>.human-status{background:#242e31ed;padding:8px;top:auto;bottom:60px;left:0;right:0;font-size:10px;text-transform:none}
/* Camera controls occupy their own row at EVERY width, including the timer. */
.motion-stage .human-study{aspect-ratio:auto;max-height:none}
.motion-stage .human-poster{height:auto;aspect-ratio:4/3}
.human-toolbar{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:5px;padding:10px;border-top:1px solid #59676c;background:#1c272b}
/* 45 px, not 44: Firefox reports a 44 px box as 43.99994 after a fractional scroll on a long study page, and the touch minimum is asserted, not rounded. */
.human-toolbar button{min-width:0;min-height:45px;border:1px solid #64777c;border-radius:4px;background:#202e33;color:#e9eeee;padding:6px 5px;font:500 12px/1.2 var(--sans,Arial,sans-serif);cursor:pointer}
.human-toolbar button:hover{background:#3c5055}
.human-toolbar button[aria-pressed=true]{background:#e9eeee;color:#1e292c;border-color:#e9eeee}
.human-toolbar button:focus-visible{outline:2px solid #ffc46b;outline-offset:2px}
@container(max-width:420px){.human-status{font-size:9px}}
.motion-stage{width:100%}
.drill-art .human-study{aspect-ratio:4/3;pointer-events:none}
.human-help{font-size:12px;line-height:1.6;color:var(--muted,#606962);margin:0;padding:0 20px;min-width:0;max-width:100%;overflow-wrap:anywhere}
.human-help summary{cursor:pointer;min-height:44px;padding:12px 0;box-sizing:border-box;font-size:12px}
.human-help summary:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.human-help p{margin:0;padding:0 0 14px}
.human-help:not([open])>p{display:none}
.human-retry{position:relative;display:block;margin:10px 16px;min-height:44px;padding:8px 16px;border:1px solid #a6b9be;border-radius:4px;background:#e9eeee;color:#172328;cursor:pointer}
.human-study[data-ready=fallback]{padding-bottom:66px}
@media(prefers-reduced-motion:reduce){.human-study *{scroll-behavior:auto;transition:none!important}}

/* The current cue, on the model, in sync with the loop. It sits over the
   bottom of the frame where the athlete never is, so it never hides the
   movement it is describing. */
.human-caption{position:absolute;left:10px;right:10px;bottom:calc(100% - 100cqw * 0.75 + 10px);margin:0;padding:7px 10px;border-radius:3px;background:#141d20d9;color:#eef3f3;font:500 12px/1.35 var(--sans,Arial,sans-serif);pointer-events:none;z-index:2}
.human-study[data-ready=fallback] .human-caption,.drill-art .human-caption{display:none}
@container(max-width:420px){.human-caption{font-size:11px;padding:6px 8px}}