.watch-carousel[hidden], .watch-controls[hidden] { display: none; }
.watch-carousel video { display: block; width: 100%; height: 100%; object-fit: cover; }
.watch-preview { position: absolute; inset: 1px 1px auto; overflow: hidden; pointer-events: none; }
.watch-slot .project-media, .watch-screen { touch-action: pan-y; }
.watch-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); }
.watch-controls {
  position: absolute;
  inset: auto 8px 8px;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  pointer-events: none;
}
.watch-controls button {
  display: grid;
  place-items: center;
  min-width: 34px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid #ffffff70;
  border-radius: 0;
  background: #090a08e8;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.watch-controls button:is(:hover,:focus-visible) { background: var(--accent); color: #090a08; }
.watch-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.watch-controls [data-watch-prev], .watch-controls [data-watch-next] { font-size: 22px; }
.watch-preview-label {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 6px;
  background: #090a08e8;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}
.watch-caption { min-height: 1.6em; }
.watch-slide-next { animation: watch-next .24s ease-out both; }
.watch-slide-prev { animation: watch-prev .24s ease-out both; }
@keyframes watch-next { from { opacity: .65; transform: translateX(8%); } }
@keyframes watch-prev { from { opacity: .65; transform: translateX(-8%); } }
@media (max-width:620px) {
  .watch-preview-label { top: 4px; left: 4px; }
  .watch-preview .watch-controls { inset: auto 4px 4px; }
  .watch-preview .watch-controls button { min-width: 32px; min-height: 32px; padding-inline: 5px; }
}
@media (prefers-reduced-motion:reduce) {
  .watch-slide-next, .watch-slide-prev { animation: none; }
}