.video-frame {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  background: #0b0819;
  isolation: isolate;
}
.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--video-position, 50% 50%);
}
.video-actions {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .15s;
}
.video-frame:hover .video-actions,
.video-frame:focus-within .video-actions,
.video-frame.is-paused .video-actions { opacity: 1; }
.video-actions button {
  border: 1px solid #ffffff66;
  border-radius: 20px;
  min-width: 32px;
  min-height: 32px;
  padding: 6px 9px;
  background: #0b0819cc;
  color: white;
  font: 14px/1 system-ui, sans-serif;
  cursor: pointer;
}
.video-actions button:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.video-error {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 40%;
  color: white;
  text-align: center;
  background: #0b0819dd;
  padding: 10px;
  font: 12px/1.4 system-ui, sans-serif;
}
@media (hover: none) { .video-actions { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .video-actions { opacity: 1; transition: none; } }