.youtube-card { --card-footer-color: #a1afba; --attribution-secondary: #a1afba; position: relative; width: 100%; height: 100%; color: #f8f6f0; background: radial-gradient(ellipse at 10% 35%, #30485090, transparent 65%), #17212b; }
.youtube-card__top { position: absolute; top: var(--format-top); left: max(var(--edge), env(safe-area-inset-left)); right: max(var(--edge), env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.youtube-card__label { margin: 0; font-size: 9px; font-weight: 650; letter-spacing: .1em; color: #b9c9d1; }
.youtube-card__external { display: inline-flex; align-items: center; min-height: 44px; color: #d9e2e5; font-size: 11px; text-decoration: none; }
.youtube-card__external:hover { text-decoration: underline; }
.youtube-card__stage { position: absolute; top: calc(var(--format-top) + 58px); left: max(var(--edge), env(safe-area-inset-left)); right: max(var(--edge), env(safe-area-inset-right)); }
.youtube-card__frame { position: relative; width: 100%; min-height: 200px; aspect-ratio: 16 / 9; background: #080d12; border-radius: 12px; box-shadow: 0 24px 50px -24px #0008; }
.youtube-card__mount, .youtube-card__iframe { width: 100%; height: 100%; position: absolute; inset: 0; border: 0; border-radius: 12px; }
.youtube-card__mount { touch-action: auto; }
.youtube-card__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 18px; text-align: center; }
.youtube-card__placeholder-icon { color: #f14646; width: 42px; height: 32px; }
.youtube-card__placeholder-icon svg { width: 100%; height: 100%; }
.youtube-card__status { max-width: 30ch; margin: 0; font-size: 13px; line-height: 1.5; color: #bccbd3; }
.youtube-card__retry { padding: 10px 20px; min-height: 44px; border: 1px solid #49616e; border-radius: 24px; background: #233947; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.youtube-card__hint { margin: 12px 0 0; font-size: 10px; line-height: 1.5; color: #a1afba; max-width: calc(100% - var(--social-reserve)); }
.youtube-card__info { position: absolute; bottom: calc(var(--content-bottom) + 62px); left: max(var(--edge), env(safe-area-inset-left)); right: calc(max(var(--edge), env(safe-area-inset-right)) + var(--social-reserve)); }
.youtube-card__info .card-attribution__name { max-width: 24ch; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.youtube-card__info .card-attribution__description { max-width: 38ch; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.youtube-card__footer { position: absolute; bottom: var(--content-bottom); left: max(var(--edge), env(safe-area-inset-left)); right: max(var(--edge), env(safe-area-inset-right)); }
.youtube-card__notice { position: absolute; z-index: 2; bottom: calc(var(--content-bottom) + 24px); left: var(--edge); right: calc(var(--edge) + var(--social-reserve)); }
.youtube-card a:focus-visible, .youtube-card__retry:focus-visible { outline: 2px solid #d8e5ed; outline-offset: 3px; }
@media (max-width: 699px) {
  .youtube-card__stage { right: 0; left: 0; }
  .youtube-card__frame, .youtube-card__iframe { border-radius: 0; }
  .youtube-card__hint { margin-inline: max(var(--edge), env(safe-area-inset-left)); }
}
@media (max-height: 650px) and (max-width: 699px) {
  .youtube-card__stage { top: var(--format-top); }
  .youtube-card__frame { height: 200px; aspect-ratio: auto; }
  .youtube-card__top { top: calc(var(--format-top) + 202px); right: calc(var(--edge) + var(--social-reserve)); gap: 8px; }
  .youtube-card__label { font-size: 8px; }
  .youtube-card__external { font-size: 10px; }
  .youtube-card__hint { margin-top: 52px; }
  .youtube-card__info { bottom: calc(var(--content-bottom) + 34px); }
  .youtube-card__info .card-attribution__description { margin-top: 8px; font-size: 12px; }
}
@media (max-width: 559px) and (max-height: 480px) {
  .youtube-card__stage { right: var(--social-reserve); }
  .youtube-card__info .card-attribution__description, .youtube-card__hint { display: none; }
}
@media (min-width: 700px) {
  .youtube-card__stage { top: calc(var(--format-top) + 60px); left: 38%; right: calc(max(var(--edge), env(safe-area-inset-right)) + var(--social-reserve)); }
  .youtube-card__info { right: auto; width: 30%; }
  .youtube-card__hint { max-width: none; }
}
@media (min-width: 560px) and (max-height: 480px) {
  .youtube-card__top { top: var(--format-top); right: calc(var(--edge) + var(--social-reserve)); }
  .youtube-card__label { display: none; }
  .youtube-card__stage { top: calc(var(--format-top) + 4px); left: 37%; right: calc(var(--edge) + var(--social-reserve)); }
  .youtube-card__frame { aspect-ratio: auto; height: 200px; }
  .youtube-card__info { top: calc(var(--format-top) + 52px); bottom: auto; width: 32%; right: auto; }
  .youtube-card__info .card-attribution__name { font-size: 22px; }
  .youtube-card__info .card-attribution__description { font-size: 11px; margin-top: 8px; }
  .youtube-card__hint { display: none; }
}