dieux-tolstoy-ugc {
  display: block;
}

.tolstoy-ugc {
  --tolstoy-ugc-placeholder: color-mix(in srgb, var(--color-border) 50%, transparent);

  display: grid;
  gap: 1.25rem;
  min-inline-size: 0;
}

.tolstoy-ugc[hidden] {
  display: none;
}

.tolstoy-ugc__rail {
  display: grid;
  min-inline-size: 0;
}

.tolstoy-ugc__rail > * {
  grid-area: 1 / 1;
}

.tolstoy-ugc__stories {
  display: block;
  isolation: isolate;
  min-inline-size: 0;
  margin-block: -0.25rem;
}

.tolstoy-ugc__skeleton {
  display: flex;
  gap: 0.75rem;
  min-inline-size: 0;
  margin-block: -0.25rem;
  padding-block: 0.25rem;
  overflow: hidden;
  pointer-events: none;
}

.tolstoy-ugc__skeleton-tile {
  flex: none;
  inline-size: 4.8125rem;
  block-size: 6rem;
  background-color: var(--tolstoy-ugc-placeholder);
}

.tolstoy-ugc[data-state='ready'] .tolstoy-ugc__skeleton {
  display: none;
}

.tolstoy-ugc__stories > * {
  margin: 0 !important;
}

.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-tiles-container'] {
  gap: 0.75rem !important;
  padding: 0.25rem 0 !important;
  scrollbar-width: none;
}

.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-tiles-container']::-webkit-scrollbar {
  display: none;
}

.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-tile-'] {
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-story-name'] {
  display: none !important;
}

:root[data-focus-modality='keyboard'] .tolstoy-ugc [data-tolstoy-element^='tolstoy-stories-tile-'][role='button']:focus-visible {
  outline: none;
}

:root[data-focus-modality='keyboard'] .tolstoy-ugc [data-tolstoy-element^='tolstoy-stories-tile-'][role='button']:focus-visible::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  box-shadow:
    inset 0 0 0 var(--focus-ring-width) var(--color-foreground),
    inset 0 0 0 calc(var(--focus-ring-width) * 2) var(--color-background);
  pointer-events: none;
}

@media (forced-colors: active) {
  :root[data-focus-modality='keyboard'] .tolstoy-ugc [data-tolstoy-element^='tolstoy-stories-tile-'][role='button']:focus-visible::after {
    outline: var(--focus-ring-width) solid Highlight;
    outline-offset: calc(var(--focus-ring-width) * -1);
  }
}

.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-tile-'] :is(img, video) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
  background-color: var(--tolstoy-ugc-placeholder);
}

.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-previous-button'],
.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-next-button'] {
  align-items: center;
  justify-content: center;
  inline-size: var(--minimum-touch-target) !important;
  min-inline-size: var(--minimum-touch-target) !important;
  padding: 0 !important;
  color: var(--color-foreground);
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--radius-square) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color var(--button-transition-duration) var(--motion-easing);
}

.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-previous-button'] {
  inset-inline-start: -0.25rem !important;
}

.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-next-button'] {
  inset-inline-end: -0.25rem !important;
}

.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-previous-button'] svg,
.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-next-button'] svg {
  display: none !important;
}

.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-previous-button']::before,
.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-next-button']::before,
.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-previous-button']::after,
.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-next-button']::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  translate: -50% -50%;
  content: '';
}

.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-previous-button']::before,
.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-next-button']::before {
  border-radius: 50%;
  background: var(--g-mini-button-surface-background, var(--color-background));
  transition: background-color var(--button-transition-duration) var(--motion-easing);
}

.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-previous-button']::after,
.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-next-button']::after {
  background: currentcolor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-previous-button']::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='matrix(-1 0 0 1 24 0)'%3E%3Cpath d='M10.117187499999865 17.322345733642578 10.470740914344653 17.675899118185043 15.837770866144503 12.30886961879196 15.484217451799715 11.955316234249494 15.130664037454927 11.601762849707029 9.763634085655077 16.968792349100113 10.117187499999865 17.322345733642578Z'/%3E%3Cpath d='M10.117187499999865 6.67724609375 10.470740914344653 6.323692709207535 15.837770866144503 11.690722208600619 15.484217451799715 12.044275593143084 15.130664037454927 12.397828977685549 9.763634085655077 7.030799478292465 10.117187499999865 6.67724609375Z'/%3E%3C/g%3E%3C/svg%3E");
}

.tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-next-button']::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.117187499999865 17.322345733642578 10.470740914344653 17.675899118185043 15.837770866144503 12.30886961879196 15.484217451799715 11.955316234249494 15.130664037454927 11.601762849707029 9.763634085655077 16.968792349100113 10.117187499999865 17.322345733642578Z'/%3E%3Cpath d='M10.117187499999865 6.67724609375 10.470740914344653 6.323692709207535 15.837770866144503 11.690722208600619 15.484217451799715 12.044275593143084 15.130664037454927 12.397828977685549 9.763634085655077 7.030799478292465 10.117187499999865 6.67724609375Z'/%3E%3C/svg%3E");
}

@media (hover: hover) and (pointer: fine) {
  .tolstoy-ugc :is(
      [data-tolstoy-element*='tolstoy-stories-previous-button'],
      [data-tolstoy-element*='tolstoy-stories-next-button']
    ):not(:disabled, [aria-disabled='true']):hover {
    --g-mini-button-surface-background: var(--color-mini-button-engaged-background);
  }
}

.tolstoy-ugc :is(
    [data-tolstoy-element*='tolstoy-stories-previous-button'],
    [data-tolstoy-element*='tolstoy-stories-next-button']
  ):not(:disabled, [aria-disabled='true']):active {
  --g-mini-button-surface-background: var(--color-mini-button-engaged-background);
}

.tolstoy-ugc :is(
    [data-tolstoy-element*='tolstoy-stories-previous-button'],
    [data-tolstoy-element*='tolstoy-stories-next-button']
  ):focus-visible {
  color: var(--color-background);
  outline: none;
}

.tolstoy-ugc :is(
    [data-tolstoy-element*='tolstoy-stories-previous-button'],
    [data-tolstoy-element*='tolstoy-stories-next-button']
  ):focus-visible::before {
  background: var(--color-foreground);
  outline: var(--focus-ring-width) solid var(--color-background);
  outline-offset: var(--focus-ring-width);
  box-shadow: 0 0 0 calc(var(--focus-ring-width) * 3) var(--color-foreground);
}

/* A masked glyph paints with `background`, which forced colors override, so both
   surfaces are restated with system colors instead of vanishing. */
@media (forced-colors: active) {
  .tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-previous-button']::before,
  .tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-next-button']::before {
    background: Canvas;
  }

  .tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-previous-button']::after,
  .tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-next-button']::after {
    background: CanvasText;
  }

  .tolstoy-ugc :is(
      [data-tolstoy-element*='tolstoy-stories-previous-button'],
      [data-tolstoy-element*='tolstoy-stories-next-button']
    ):focus-visible::before {
    outline-color: Highlight;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tolstoy-ugc :is(
      [data-tolstoy-element*='tolstoy-stories-previous-button'],
      [data-tolstoy-element*='tolstoy-stories-next-button']
    ),
  .tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-previous-button']::before,
  .tolstoy-ugc [data-tolstoy-element*='tolstoy-stories-next-button']::before {
    transition: none;
  }
}

@media (scripting: none) {
  .tolstoy-ugc {
    display: none;
  }
}