@layer components {
    /* A story as a print on the paper: no frame, a soft shadow; the button sits on its lower edge. */
    .story-video {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin: 0;
    }

    .story-video__frame {
        position: relative;
    }

    .story-video__video {
        display: block;
        inline-size: 100%;
        block-size: auto;
        aspect-ratio: 9 / 16;
        background: var(--color-bg);
        box-shadow: 0 1px 2px oklch(0 0 0 / 0.12), 0 8px 24px oklch(0 0 0 / 0.1);
    }

    /* Two classes: the shared .btn sits in the same layer. */
    .story-video .story-video__toggle {
        position: absolute;
        inset-inline-end: var(--space-2);
        inset-block-end: var(--space-2);
        min-block-size: 44px;
        font-size: var(--text-s);
    }

    .story-video__pause,
    .story-video[data-state='playing'] .story-video__play,
    .story-video[data-state='failed'] .story-video__toggle {
        display: none;
    }

    .story-video__play,
    .story-video[data-state='playing'] .story-video__pause {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
    }

    .story-video__caption {
        color: var(--color-text-muted);
        font-size: var(--text-s);
        font-style: italic;
    }
}