[data-lesson-models][hidden]{display:none}

/* The supplied AR composition fits the original cell slot and feathers into the page. */
.biology-ar{--ar-height:clamp(350px,32vw,460px);height:var(--ar-height);display:grid;place-items:center;position:relative}
.ar-composition{position:relative;width:min(100%,calc(var(--ar-height)*1.5));aspect-ratio:3/2}
.ar-photo,.ar-phone-camera{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ar-photo{mix-blend-mode:multiply;mask-image:linear-gradient(90deg,transparent,#000 1.5%,#000 98.5%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 1.5%,#000 98.5%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-composite:source-in}
.ar-cell{position:absolute;left:27%;top:0;width:46%;height:49%;touch-action:pan-y;cursor:grab;outline-offset:-4px}
.ar-cell:active{cursor:grabbing}.ar-cell:focus-visible{outline:2px solid #1a94b6}
.ar-cell canvas{display:block;width:100%;height:100%}
.ar-status{top:24%;left:30%;right:auto;width:40%}
.ar-controls{position:absolute;right:2%;bottom:0;display:flex;gap:7px;opacity:.65;transition:opacity .2s}
.biology-ar:hover .ar-controls,.biology-ar:focus-within .ar-controls{opacity:1}
.ar-controls button{display:grid;place-items:center;width:30px;height:30px;padding:6px;border:1px solid #cce0e7;border-radius:50%;background:transparent;color:#157e9e}
.ar-controls button:hover{background:#eef8fc}.ar-controls svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:650px){.biology-ar{--ar-height:340px}}