.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 .24s 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}
/* The poster holds the frame until the live model has drawn, then fades out
   under it rather than disappearing. `visibility` follows the fade so the
   hidden poster is out of the accessibility tree and out of hit testing. */
.human-study[data-ready=true]>.human-poster{opacity:0;visibility:hidden;transition:opacity .24s ease,visibility 0s linear .24s}
.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:44px;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}.human-study>.human-poster{transition:none!important}}
/* The current cue, laid over the frame in sync with the loop. It is a caption,
   not a control: the same words are in the phase readout below the viewer, so
   it is hidden from assistive technology rather than repeated to it. */
.human-caption{position:absolute;left:0;right:0;bottom:56px;margin:0;padding:10px 16px;font:500 13px/1.4 var(--sans,system-ui);color:#f4efe7;background:linear-gradient(180deg,#0e232400,#0e2324d9 38%);text-align:center;pointer-events:none;z-index:1}
@container(max-width:420px){.human-caption{font-size:12px;bottom:96px;padding:8px 12px}}