@charset "UTF-8";
/* Окно историй (Figma: 390 4959:25478, 768 4959:21967, 1440 4959:22000). <dialog> на весь экран,
   Фон (::backdrop): телефон — сплошной black-bg, с md — затемнение black-40 с blur 16.
   Телефон: кадр на весь экран с полем 14 (r 4), «Закрыть» внутри справа сверху (8 от края),
   стрелки — по бокам посередине (10 от края), подложка white-40 и тёмная стрелка (на фото белые 4% не видны).
   С md: окно с пропорциями макета 456 × 736 по центру, высотой 776 (md) / 736 (xl), но не выше экрана
   без 32 сверху и снизу; рамка 4 black-40 (r 20), кадр r 16; «Закрыть» — справа от окна через 8, по верху;
   стрелки — внизу по центру через 4, 20 (md) / 32 (xl) от низа окна.
   Стрелки — square-button `--on-photo`; прокрутка страницы под окном заблокирована общим правилом (base). */
.story-viewer {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 0.875rem;
  overflow: hidden;
  border: 0;
  color: var(--color-white);
  background-color: transparent;
}
.story-viewer::backdrop {
  background-color: var(--color-black-bg);
}
@media (min-width: 768px) {
  .story-viewer::backdrop {
    background-color: var(--color-black-40);
    backdrop-filter: blur(1rem);
  }
}
.story-viewer[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .story-viewer {
    padding: 2rem;
  }
}
.story-viewer__window {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
}
@media (min-width: 768px) {
  .story-viewer__window {
    width: auto;
    height: min(100%, 48.5rem);
    aspect-ratio: 456/736;
    padding: 0.25rem;
    background-color: var(--color-black-40);
    border-radius: var(--radius-20);
  }
}
@media (min-width: 1280px) {
  .story-viewer__window {
    height: min(100%, 46rem);
  }
}
.story-viewer__slides, .story-viewer__slide {
  height: 100%;
}
.story-viewer__slides {
  border-radius: var(--radius-4);
}
@media (min-width: 768px) {
  .story-viewer__slides {
    border-radius: var(--radius-16);
  }
}
.story-viewer__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--color-black);
  border-radius: var(--radius-4);
}
@media (min-width: 768px) {
  .story-viewer__media {
    border-radius: var(--radius-16);
  }
}
.story-viewer__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.story-viewer__controls {
  position: absolute;
  z-index: 2;
  inset: 50% 0.625rem auto;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}
@media (min-width: 768px) {
  .story-viewer__controls {
    inset: auto 0 1.25rem;
    gap: 0.25rem;
    justify-content: center;
    transform: none;
  }
}
@media (min-width: 1280px) {
  .story-viewer__controls {
    bottom: 2rem;
  }
}
.story-viewer__close {
  position: absolute;
  z-index: 2;
  top: 0.5rem;
  right: 0.5rem;
}
@media (min-width: 768px) {
  .story-viewer__close {
    top: 0;
    right: -3rem;
  }
}

/* Если автозапуск запрещён, Safari рисует поверх ролика свою кнопку запуска — прячем:
   под ней постер, а нажатие по кадру включает ролик (JS) */
.story-viewer__media::-webkit-media-controls,
.story-viewer__media::-webkit-media-controls-start-playback-button {
  display: none !important;
  appearance: none;
}