.ui-youtube-embed { position: relative; overflow: hidden; width: 100%; aspect-ratio: var(--r, 16/9); border-radius: var(--ui-radius); background: #000; }
.ui-youtube-embed-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.ui-youtube-embed-poster img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s; }
.ui-youtube-embed-poster:hover img { opacity: 1; }
.ui-youtube-embed-poster:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-youtube-embed-play {
  position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 12px;
  background: rgba(20, 20, 20, .8); color: #fff; transition: background .15s;
}
.ui-youtube-embed-poster:hover .ui-youtube-embed-play { background: #f00; }
.ui-youtube-embed-play svg { position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; }
.ui-youtube-embed-title { position: absolute; inset: 0 0 auto 0; padding: 12px 16px; background: linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent); color: #fff; font: 500 15px/1.3 var(--ui-font); text-align: left; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.ui-youtube-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) { .ui-youtube-embed-poster img, .ui-youtube-embed-play { transition: none; } }