/* Real-time 3D stage; the canvas itself never floats, rotates or becomes an image. */
#memoria .mg-colmena-art { height: 465px; max-width: 495px; }
#memoria .mg-miel { inset: 0 0 auto; z-index: 2; touch-action: pan-y pinch-zoom; }
#memoria .mg-miel-stage { display: block; position: relative; width: 100%; height: 392px; isolation: isolate; }
#memoria .mg-miel-stage canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
#memoria .mg-miel-stage[data-state="ready"] canvas { opacity: 1; }
#memoria .mg-miel-load-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0 auto; max-width: 220px; padding: 22px; color: #736846; font: italic 400 16px/1.65 var(--serif); text-align: center; }
#memoria .mg-miel-load-status[hidden] { display: none; }
#memoria .mg-miel-stage[data-state="error"] { background: radial-gradient(ellipse,#eee7ce90,transparent 64%); }
#memoria .mg-touch { margin-top: -2px; }
#memoria .mg-art-branch { z-index: 1; width: 102px; left: -1%; bottom: 18%; opacity: .6; }
#memoria .mg-honey-lines { opacity: .34; }
#memoria .mg-miel-message { bottom: 3px; }
#memoria .mg-miel:focus-visible { border-radius: 25%; outline-offset: -10px; }
@media(max-width:1050px) and (min-width:761px) {
 #memoria .mg-colmena-art { height: 408px; }
 #memoria .mg-miel-stage { height: 335px; }
}
@media(max-width:760px) {
 #memoria .mg-colmena-art { width: calc(100% + 20px); max-width: 380px; height: 344px; margin-left: auto; margin-right: auto; justify-self: center; }
 #memoria .mg-miel-stage { height: 285px; }
 #memoria .mg-miel { inset: -5px 0 auto; }
 #memoria .mg-art-branch { width: 65px; bottom: 22%; left: 5%; }
 #memoria .mg-touch { margin-top: 0; }
 #memoria .mg-miel-message { bottom: 2px; padding: 0 8px; font-size: 12px; }
 #memoria .mg-miel-load-status { font-size: 14px; max-width: 230px; }
}
@media(max-width:380px) {
 #memoria .mg-colmena-art { height: 322px; width: calc(100% + 16px); }
 #memoria .mg-miel-stage { height: 263px; }
}
@media(prefers-reduced-motion:reduce) { #memoria .mg-miel-stage canvas { transition: none; } }
