.storiiies-viewer {
  --storiiies-viewer-container-bg: #111;
  --storiiies-viewer-outer-spacing: 16px;
  --storiiies-viewer-row-gap: 16px;
  --storiiies-viewer-col-gap: 16px;
  --storiiies-viewer-bg: #d4c6af;
  --storiiies-viewer-fg: #110554;
  --storiiies-viewer-button-bg: var(--storiiies-viewer-bg);
  --storiiies-viewer-button-fg: var(--storiiies-viewer-fg);
  --storiiies-viewer-button-hover-bg: var(--storiiies-viewer-button-fg);
  --storiiies-viewer-button-hover-fg: var(--storiiies-viewer-button-bg);
  --storiiies-viewer-accent-outer: var(--storiiies-viewer-button-hover-bg);
  --storiiies-viewer-accent-inner: var(--storiiies-viewer-button-hover-fg);
  --storiiies-viewer-font-family: serif;
  --storiiies-viewer-font-size: 18px;
  --storiiies-viewer-line-height: 1.2;
  --storiiies-viewer-title-font-size: 20px;
  --storiiies-viewer-title-line-height: 1.2;
  --storiiies-viewer-transition-speed: 0.4s;
  --storiiies-viewer-scroll-size: 8px;

  position: relative;
  inline-size: 100%;
  overflow: hidden;
  font-family: var(--storiiies-viewer-font-family);
  background: var(--storiiies-viewer-container-bg);
  container: storiiies-viewer / size;
  block-size: min(640px, 100dvb);
}

.storiiies-viewer > *,
.storiiies-viewer__info-area > * {
  all: initial;
  box-sizing: border-box;
  display: block;
}

.storiiies-viewer__description {
  display: none;
}

.storiiies-viewer__osd-container {
  inline-size: 100cqi;
  block-size: 50cqb;
}

.storiiies-viewer--info-hidden .storiiies-viewer__osd-container {
  block-size: 100cqb;
}

.storiiies-viewer__icon-button {
  display: block;
  inline-size: 44px;
  color: var(--storiiies-viewer-button-fg);
  cursor: pointer;
  background: var(--storiiies-viewer-button-bg);
  border-radius: 50%;
  opacity: 0.9;
  transition:
    color 0.1s,
    background 0.1s;
  block-size: 44px;
}

.storiiies-viewer__icon-button:disabled {
  cursor: default;
  opacity: 0.3;
}

.storiiies-viewer__icon-button:focus-visible,
.storiiies-viewer__icon-button:hover:not(:disabled) {
  color: var(--storiiies-viewer-button-hover-fg);
  background: var(--storiiies-viewer-button-hover-bg);
  outline: 2px solid var(--storiiies-viewer-accent-inner);
  box-shadow: 0 0 0 4px var(--storiiies-viewer-accent-outer);
}

.storiiies-viewer__button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.storiiies-viewer__info-toggle {
  position: absolute;
  inset-block-end: calc(50cqb + var(--storiiies-viewer-outer-spacing));
  inset-inline-start: calc(var(--storiiies-viewer-outer-spacing));
  z-index: 1;
}

.storiiies-viewer--info-hidden .storiiies-viewer__info-toggle {
  inset-block-end: var(--storiiies-viewer-outer-spacing);
}

.storiiies-viewer__info-area {
  display: grid;
  grid-template-rows: 44px 1fr;
  grid-template-columns: 1fr repeat(2, 44px);
  gap: var(--storiiies-viewer-row-gap) var(--storiiies-viewer-col-gap);
  padding: var(--storiiies-viewer-outer-spacing);
  color: var(--storiiies-viewer-fg);
  background: var(--storiiies-viewer-bg);
  border-radius: 10px;
  opacity: 0.9;
  translate: 0 0;
  block-size: 50cqb;
}

.storiiies-viewer__info-area--hidden {
  opacity: 0;
  translate: 0 88px;
}

.storiiies-viewer__previous {
  grid-column: -3 / -2;
  rotate: 180deg;
}

.storiiies-viewer__next {
  grid-column: -2 / -1;
}

.storiiies-viewer__info-text {
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  gap: 1em;
  padding-inline-end: 8px;
  overflow: auto;
  font-family: var(--storiiies-viewer-font-family);
  font-size: var(--storiiies-viewer-font-size);
  line-height: var(--storiiies-viewer-line-height);
  color: var(--storiiies-viewer-fg);
  max-block-size: calc(
    75cqb - var(--storiiies-viewer-outer-spacing) * 4 - 44px
  );
  scrollbar-gutter: stable;
  overflow-wrap: break-word;
}

.storiiies-viewer__info-text::-webkit-scrollbar {
  inline-size: var(--storiiies-viewer-scroll-size);
  block-size: var(--storiiies-viewer-scroll-size);
}

.storiiies-viewer__info-text::-webkit-scrollbar-track {
  border-radius: var(--storiiies-viewer-scroll-size);
  box-shadow: inset 0 0 var(--storiiies-viewer-scroll-size)
    var(--storiiies-viewer-fg);
}

.storiiies-viewer__info-text::-webkit-scrollbar-thumb {
  background: var(--storiiies-viewer-fg);
  border-radius: var(--storiiies-viewer-scroll-size);
  box-shadow: inset 0 0 calc(var(--storiiies-viewer-scroll-size) * 2)
    var(--storiiies-viewer-fg);
}

.storiiies-viewer__text-section > *:first-child {
  margin-block-start: 0;
}

.storiiies-viewer__text-section > *:last-child {
  margin-block-end: 0;
}

.storiiies-viewer__title {
  margin: 0;
  font-size: var(--storiiies-viewer-title-font-size);
  line-height: var(--storiiies-viewer-title-line-height);
}

@media (prefers-reduced-motion: no-preference) {
  .storiiies-viewer__info-area,
  .storiiies-viewer__info-area--hidden {
    transition:
      opacity var(--storiiies-viewer-transition-speed) ease-in-out,
      translate var(--storiiies-viewer-transition-speed) ease-in-out;
  }

  .storiiies-viewer__osd-container {
    transition: block-size var(--storiiies-viewer-transition-speed) ease-in-out;
  }

  .storiiies-viewer__info-toggle {
    transition: inset-block-end var(--storiiies-viewer-transition-speed)
      ease-in-out;
  }
}

@container storiiies-viewer (min-inline-size: 640px) {
  .storiiies-viewer__osd-container {
    inline-size: 100cqi;
    block-size: 100cqb;
  }

  .storiiies-viewer__info-toggle {
    position: absolute;
    inset-block-start: calc(var(--storiiies-viewer-outer-spacing) * 2);
    inset-block-end: auto;
    inset-inline-start: calc(var(--storiiies-viewer-outer-spacing) * 2);
    z-index: 1;
  }

  .storiiies-viewer__info-area {
    position: absolute;
    inset-block-start: var(--storiiies-viewer-outer-spacing);
    inset-inline-start: var(--storiiies-viewer-outer-spacing);
    inline-size: max(
      420px,
      calc(42cqi - var(--storiiies-viewer-outer-spacing) * 2)
    );
    block-size: auto;
    box-shadow: 0 0 2px #1f1f1f6b;
  }

  .storiiies-viewer__info-area--hidden {
    translate: -88px 0;
  }
}

@supports not (container: storiiies-viewer) {
  .storiiies-viewer__osd-container {
    inline-size: 100%;
    block-size: 50%;
  }

  .storiiies-viewer--info-hidden .storiiies-viewer__osd-container {
    block-size: 100%;
  }

  .storiiies-viewer__toggle {
    inset-block-end: calc(50% + var(--storiiies-viewer-outer-spacing));
  }

  .storiiies-viewer__info-area {
    block-size: 50%;
  }

  .storiiies-viewer__info-text {
    max-block-size: calc(
      100% - var(--storiiies-viewer-outer-spacing) * 2 - 44px
    );
  }
}