.mdn-html-embed {
    width: 100%;
    margin: 1.5rem auto;
}

/* Most embed providers (Scribe included) return a responsive <iframe> with
   width:100%, but this covers cases where a fixed-width iframe is pasted in,
   so it never overflows the article column on mobile. */
.mdn-html-embed iframe {
    max-width: 100%;
    display: block;
}

/* Positioning context for the spinner/fallback overlays. */
.mdn-html-embed__frame-area {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    background: #f5f6f7;
}

/* Smooth touch scrolling if a fixed-width guide ever needs to scroll
   horizontally inside its frame on a phone. */
.mdn-html-embed__frame-area,
.mdn-html-embed iframe {
    -webkit-overflow-scrolling: touch;
}

/* Loading indicator shown until the iframe's load event fires (or the
   10s fallback timeout in the widget's inline script elapses). Centered
   over the reserved aspect-ratio box, so there's no layout shift either
   while it's visible or once it's hidden. */
.mdn-html-embed__spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
}

.mdn-html-embed__spinner span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9aa0a6;
    animation: mdn-html-embed-bounce 1.1s ease-in-out infinite;
}

.mdn-html-embed__spinner span:nth-child(2) { animation-delay: 0.15s; }
.mdn-html-embed__spinner span:nth-child(3) { animation-delay: 0.3s; }

@keyframes mdn-html-embed-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .mdn-html-embed__spinner span {
        animation: none;
        opacity: 0.7;
    }
}

/* Shown in place of the iframe if it never fires a load event within the
   timeout — e.g. blocked by a Content Security Policy, an expired Scribe
   share link, or a network failure — so the reader always has a working
   way to reach the guide instead of a blank box. */
.mdn-html-embed__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    padding: 1.5rem;
    background: #f5f6f7;
}

.mdn-html-embed__fallback p {
    margin: 0;
    color: #5f6368;
    font-size: 0.9rem;
}

.mdn-html-embed__fallback a,
.mdn-html-embed__open-link,
.mdn-html-embed__noscript a {
    color: #1a73e8;
    text-decoration: underline;
    font-weight: 500;
}

.mdn-html-embed__fallback a:focus-visible,
.mdn-html-embed__open-link:focus-visible,
.mdn-html-embed__noscript a:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
}

/* Persistent "open in a new tab" link below the embed — a deliberate
   usability choice, not just a fallback: interactive step-by-step guides
   are often easier to follow full-screen on a small phone viewport than
   scrolled inside an article. */
.mdn-html-embed__open-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.mdn-html-embed__noscript {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
}