.webcam-gallery { margin: 8px 8px 24px; padding: 0 0 6px; border-block: 1px solid #d8dde1; background: #fff; overflow: hidden; }
.webcam-gallery[hidden] { display: none; }
.webcam-gallery [hidden] { display: none !important; }
.gallery-stage { position: relative; height: clamp(200px, 36vw, 490px); overflow: hidden; }
.gallery-slide { position: absolute; top: 0; left: 50%; width: min(76%, 960px); height: 100%; margin: 0; background: #edf0f2; border-radius: 6px; overflow: hidden; transform: translateX(calc(-50% + var(--slot) * (100% + 16px))); opacity: .4; transition: transform .45s ease, opacity .45s ease; }
.gallery-slide[data-center="true"] { opacity: 1; }
.gallery-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-slide:not([data-center="true"]) img { object-fit: cover; }
.webcam-gallery button { appearance: none; font: inherit; cursor: pointer; }
.gallery-arrow { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 52px; height: 64px; padding: 0; border: 0; background: transparent; color: #899397; transition: color .15s ease; }
.gallery-arrow.prev { left: 0; }
.gallery-arrow.next { right: 0; }
.gallery-arrow svg { width: 24px; height: 40px; pointer-events: none; }
.gallery-arrow:active, .gallery-arrow:focus-visible { color: #1768ad; }
.gallery-controls { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 52px; padding: 4px 12px; }
.gallery-bars { display: flex; gap: 10px; }
.gallery-bar { display: flex; align-items: center; width: 54px; height: 44px; padding: 0; border: 0; background: transparent; }
.gallery-bar::after { content: ''; display: block; height: 3px; width: 100%; background: #9b9b9b; transition: background-color .2s; }
.gallery-bar[aria-current="true"]::after { background: #f07800; }
.gallery-pause { display: grid; place-items: center; width: 36px; height: 44px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #59646e; }
.gallery-pause svg { width: 18px; height: 18px; }
.webcam-gallery button:focus-visible { outline: 2px solid #c46000; outline-offset: -2px; }
@media (hover: hover) {
  .gallery-arrow:hover { color: #1768ad; }
  .gallery-pause:hover { color: #bd5e00; background: #fff0df; }
  .gallery-bar:hover::after { background: #f07800; }
}
@media (max-width: 620px) {
  .webcam-gallery { margin-bottom: 16px; }
  .gallery-stage { height: clamp(190px, 58vw, 350px); }
  .gallery-slide { width: 80%; transform: translateX(calc(-50% + var(--slot) * (100% + 8px))); }
  .gallery-bar { width: 44px; }
  .gallery-arrow { width: 44px; height: 52px; }
  .gallery-arrow svg { width: 20px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .gallery-slide, .gallery-bar::after { transition: none; } }