.mif-lightbox {
    background: #33434d;
    border: 3px solid #64717a;
    border-radius: 0.45rem 1.4rem 0.45rem 0.45rem;
    box-shadow: 0.75rem 0.75rem 0 var(--mif-accent);
    color: #f3f0e8;
    max-height: 94vh;
    max-width: min(94vw, 38rem);
    overflow: visible;
    padding: 0.8rem;
    transform-origin: 50% 85%;
    width: max-content;
}
.mif-lightbox[open] { animation: mif-lightbox-in 560ms cubic-bezier(.16, 1, .3, 1) both; }
.mif-lightbox[open]::backdrop { animation: mif-backdrop-in 420ms ease both; background: rgb(0 0 0 / 82%); backdrop-filter: blur(8px); }
.mif-lightbox--closing { animation: mif-lightbox-out 280ms cubic-bezier(.55, 0, 1, .45) both !important; }
.mif-lightbox--fallback[open] { box-shadow: 0 0 0 100vmax rgb(0 0 0 / 82%); inset: 50% auto auto 50%; margin: 0; position: fixed; transform: translate(-50%, -50%); z-index: 999999; }
.mif-lightbox__frame { aspect-ratio: 9 / 16; height: min(82vh, 48rem); max-width: 84vw; }
.mif-lightbox iframe { border: 2px solid #64717a; border-radius: 0.35rem 1rem 0.35rem 0.35rem; height: 100%; width: 100%; }
.mif-lightbox__close {
    align-items: center;
    background: #4ade80;
    border: 2px solid #18242d;
    border-radius: 999px;
    box-shadow: 0.2rem 0.2rem 0 var(--mif-accent);
    color: #18242d;
    cursor: pointer;
    display: flex;
    font-size: 1.8rem;
    height: 2.75rem;
    justify-content: center;
    position: absolute;
    right: -0.8rem;
    top: -0.8rem;
    width: 2.75rem;
    z-index: 2;
}
.mif-lightbox__external { background: #4ade80; border: 2px solid #18242d; border-radius: 999px; box-shadow: 0.2rem 0.2rem 0 var(--mif-accent); color: #18242d; display: block; font-size: 0.72rem; font-weight: 950; letter-spacing: 0.08em; margin: 0.75rem auto 0.15rem; padding: 0.45rem 0.8rem; text-align: center; text-transform: uppercase; width: max-content; }
@keyframes mif-lightbox-in {
    0% { opacity: 0; rotate: -5deg; scale: 0.68; translate: 0 3rem; }
    62% { opacity: 1; rotate: 1.2deg; scale: 1.035; translate: 0 -0.25rem; }
    100% { opacity: 1; rotate: 0deg; scale: 1; translate: 0; }
}
@keyframes mif-lightbox-out {
    from { opacity: 1; rotate: 0deg; scale: 1; translate: 0; }
    to { opacity: 0; rotate: 3deg; scale: 0.82; translate: 0 2rem; }
}
@keyframes mif-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mif-lightbox[open], .mif-lightbox[open]::backdrop { animation: none; opacity: 1; transform: none; transition: none; }
}