.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;opacity:1;transition:opacity 260ms ease}
.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}
.human-study[data-ready=true]>.human-poster{opacity:0;visibility:hidden;transition:opacity 260ms ease,visibility 0s linear 260ms}
/* Wave four. The poster of the current phase is the first thing painted and it
   stays until the live model has drawn its first frame, then the two cross-fade
   in under 300 ms. Neither state is a spinner over an empty box. */
.human-study>.human-canvas{opacity:0;transition:opacity 260ms ease}
.human-study[data-ready=true]>.human-canvas{opacity:1}
@media(prefers-reduced-motion:reduce){.human-study>.human-canvas,.human-study>.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(7,minmax(0,1fr));gap:5px;padding:10px;border-top:1px solid #59676c;background:#1c272b}
.human-toolbar button{min-width:0;min-height:44.5px;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-toolbar{grid-template-columns:repeat(4,minmax(0,1fr))}.human-toolbar button:last-child{grid-column:3/5}.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}}
/* Wave three. The current cue, drawn over the player in step with the loop, and
   a quiet placeholder while the model is still arriving. */
.human-caption{position:absolute;left:0;right:0;top:75cqw;transform:translateY(-100%);margin:0;padding:10px 14px 12px;font:500 13px/1.45 var(--sans,system-ui);color:#f1f4ee;background:linear-gradient(to top,#12191693,#12191600);pointer-events:none;z-index:1;text-wrap:balance}
.human-study[data-ready=fallback] .human-caption{display:none}
.drill-art .human-caption{display:none}
@container(max-width:420px){.human-caption{font-size:12px;padding:8px 10px 10px}}
.human-study[data-ready=loading]::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#242e3100 18%,#3b4a4a6b 34%,#242e3100 52%);background-size:260% 100%;animation:human-wait 1.5s linear infinite;pointer-events:none}
/* Wave four. The wait a reader sees first is the poster arriving, not the model.
   The shimmer is the poster's own background, so it is covered the moment the
   image paints and no script has to switch it off. */
.human-study[data-ready=poster]>.human-poster,.human-study[data-ready=loading]>.human-poster{background-image:linear-gradient(100deg,#242e3100 18%,#3b4a4a6b 34%,#242e3100 52%);background-size:260% 100%;animation:human-wait 1.5s linear infinite}
@keyframes human-wait{from{background-position:130% 0}to{background-position:-30% 0}}
@media(prefers-reduced-motion:reduce){.human-study[data-ready=loading]::after,.human-study>.human-poster{animation:none;background-image:none}}