.tg-a3-img { cursor: pointer; }
.tg-a3-frame { position: relative; display: inline-block; }
.tg-a3-frame::after {
  content: "\25B6"; position: absolute; right: 12px; bottom: 12px;
  width: 38px; height: 38px; line-height: 38px; text-align: center; font-size: 15px;
  color: #fff; background: rgba(0,0,0,.55); border-radius: 50%; pointer-events: none;
  transition: background .2s;
}
.tg-a3-frame:hover::after { background: rgba(0,0,0,.8); }
html.tg-a3-open { overflow: hidden; }
.tg-a3-dialog {
  padding: 0; border: 0; background: #000; border-radius: 8px; overflow: visible;
  width: min(92vw, 960px, calc(88vh * 16 / 9)); aspect-ratio: 16 / 9; max-width: none; max-height: none;
}
.tg-a3-dialog::backdrop { background: rgba(0,0,0,.75); }
.tg-a3-dialog video { display: block; width: 100%; height: 100%; border-radius: 8px; background: #000; }
.tg-a3-close {
  position: absolute; top: -40px; right: 0; width: 36px; height: 36px; padding: 0;
  font-size: 28px; line-height: 34px; color: #fff; background: transparent; border: 0; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .tg-a3-frame::after { transition: none; } }