.if-preview { position: relative; width: 100%; max-width: 20rem; aspect-ratio: 9 / 16; isolation: isolate; overflow: hidden; border-radius: 16px; background: #0b1920; color: #fff; font-family: Inter, sans-serif; }
@media (min-width: 1024px) { .if-preview { max-width: none; } }
.if-preview--phone { border-radius: 10px; }
.if-preview__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 400ms cubic-bezier(.22,1,.36,1); pointer-events: none; }
.if-preview__video.is-active { opacity: 1; }
.if-preview__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, #0b19209c, transparent 24%, transparent 50%, #0b1920ed); }
.if-preview__top { position: absolute; top: 15px; left: 18px; right: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.if-preview__top > span { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.if-preview__controls { display: flex; gap: 4px; }
.if-preview__controls[hidden] { display: none; }
.if-preview__controls button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #0b1920cc; color: #fff; cursor: pointer; }
.if-preview__controls button:hover { background: #fff; color: #0b1920; }
.if-preview__controls svg { display: block; width: 20px; height: 20px; }
.if-preview__caption { position: absolute; inset: auto 20px 22px; display: flex; flex-direction: column; align-items: flex-start; }
.if-preview__count { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: #d0d9df; }
.if-preview__caption strong { font-weight: 500; font-size: 20px; line-height: 1.25; margin-top: 8px; }
.if-preview__client { color: #e1e6e9; font-size: 12px; line-height: 1.5; margin-top: 4px; }
.if-preview__caption a { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding-top: 15px; margin-top: 17px; border-top: 1px solid #ffffff40; color: #fff; text-decoration: none; font-size: 12px; }
.if-preview button:focus-visible, .if-preview a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Play/Pause: icon swap from transitions-dev, scoped to this player. */
.if-preview .t-icon-swap { --icon-swap-dur: 200ms; --icon-swap-blur: 2px; --icon-swap-start-scale: .25; --icon-swap-ease: ease-in-out; display: inline-grid; }
.if-preview .t-icon { grid-area: 1 / 1; transition: opacity var(--icon-swap-dur) var(--icon-swap-ease), filter var(--icon-swap-dur) var(--icon-swap-ease), transform var(--icon-swap-dur) var(--icon-swap-ease); }
.if-preview .t-icon-swap[data-state="a"] [data-icon="b"], .if-preview .t-icon-swap[data-state="b"] [data-icon="a"] { opacity: 0; filter: blur(var(--icon-swap-blur)); transform: scale(var(--icon-swap-start-scale)); }
@media (prefers-reduced-motion: reduce) { .if-preview__video, .if-preview .t-icon { transition: none; } }