@layer pages {
    main:has(.lab-entry) {
        padding-top: calc(var(--nav-height) + 0.75rem);
    }

    .lab-entry {
        max-width: var(--layout-content);
    }

    .demo-container {
        position: relative;
        display: grid;
        width: 100%;
        min-height: clamp(28rem, 68vh, 46rem);
        border: 1px solid color-mix(in oklch, var(--border-dim) 70%, transparent);
        border-radius: var(--radius-md);
        overflow: hidden;
        background:
            linear-gradient(165deg, color-mix(in oklch, var(--bg-elevated) 50%, transparent), transparent 72%),
            color-mix(in oklch, var(--bg-surface) 24%, transparent);

        & iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
        }
    }

    .lab-caption {
        margin-top: clamp(1.2rem, 2.5vw, 1.8rem);

        & h1 {
            font-size: var(--text-xl);
            font-weight: 200;
            letter-spacing: -0.02em;
            line-height: 1.15;
            color: var(--text-ink);
        }
    }

    .lab-legend {
        font-size: var(--text-sm);
        line-height: 1.65;
        color: var(--text-muted);
        margin-top: 0.5rem;
    }
}