.social-reel { position: relative; min-inline-size: 0; border-radius: var(--radius-feature); overflow: hidden; background: var(--color-background); }
.social-reel__link { position: relative; display: block; aspect-ratio: 380 / 673; color: var(--color-on-accent); }
.social-reel__poster { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.social-reel__play { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); inline-size: 29%; aspect-ratio: 112 / 124; transition: scale var(--dur-fast) var(--ease-standard); }
.social-reel__play svg { inline-size: 100%; block-size: 100%; }
.social-reel__link:hover .social-reel__play { scale: 1.06; }
.social-reel__link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.social-reel__embed { display: block; border: 0; inline-size: 100%; block-size: 42rem; }
.social-reel__fallback { display: block; padding: var(--space-4); font-size: var(--fs-small); }
@media (width < 48rem) { .social-reel { border-radius: var(--radius-panel); } }

/* The page preview cannot capture scrolling; playback uses the shared dialog. */
.social-reel[data-preview-ready] .social-reel__embed { pointer-events: none; }
.social-reel__open { position: absolute; inset: 0; }