/* Loaded only by public examples, never by an event or a studio preview. */
html[data-demo-continuity] body[data-invitation-demo] {
    margin: 0;
    background-color: var(--demo-browser-color);
}

html[data-demo-continuity] #invitation-main {
    background-color: var(--demo-paper);
    background-image: inherit;
}

html[data-demo-continuity] .demo-navigation {
    --demo-nav-edge: calc(3px + env(safe-area-inset-top, 0px));
    background: var(--demo-browser-color);
    color: var(--demo-browser-ink);
    border-bottom-color: color-mix(in srgb, currentColor 16%, transparent);
    /* Keep blur off the outer edge that Safari can sample for its toolbar tint. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    transition: background-color 320ms ease, color 320ms ease;
}

html[data-demo-continuity] .demo-navigation-glass {
    position: absolute;
    inset: var(--demo-nav-edge) 0 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--demo-browser-color);
    transition: background-color 320ms ease;
}

@supports (background: color-mix(in srgb, black 86%, transparent)) and ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
    html[data-demo-continuity] .demo-navigation {
        background: linear-gradient(to bottom, var(--demo-browser-color) 0 var(--demo-nav-edge), transparent var(--demo-nav-edge) 100%);
    }

    html[data-demo-continuity] .demo-navigation-glass {
        background-color: color-mix(in srgb, var(--demo-browser-color) 86%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
}

html[data-demo-continuity] .demo-navigation > div span {
    color: inherit;
    opacity: .75;
}

html[data-demo-continuity] .intro-cover--media {
    background-color: var(--demo-photo-color);
}

html[data-demo-continuity] .intro-envelope-stage {
    padding-top: calc(32px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
}

html[data-demo-continuity] .smart-module {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

html[data-demo-continuity] .demo-footer {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
}

html[data-demo-continuity] #music-control {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right: max(20px, env(safe-area-inset-right, 0px));
}

@media (max-width: 900px) {
    html[data-demo-continuity] body[data-invitation-demo] .intro-cover {
        min-height: calc(100svh - var(--demo-nav-height));
        min-height: calc(100dvh - var(--demo-nav-height));
        padding-left: max(26px, env(safe-area-inset-left, 0px));
        padding-right: max(26px, env(safe-area-inset-right, 0px));
        padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-demo-continuity] :is(.demo-navigation, .demo-navigation-glass) { transition: none; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
    html[data-demo-continuity] .demo-navigation { background: var(--demo-browser-color); }
    html[data-demo-continuity] .demo-navigation-glass { display: none; }
}