html,
body,
.library-deck-content .page {
  background: #d8dcda;
}

.library-deck-content iframe {
  box-sizing: border-box;
  width: min(
    calc(100vw - clamp(4rem, 13.333vw, 12rem)),
    calc((100vh - 7rem) * 16 / 9)
  );
  height: min(
    calc(100vh - 7rem),
    calc((100vw - clamp(4rem, 13.333vw, 12rem)) * 9 / 16)
  );
  border: 0;
  outline: 3px solid #17211c;
  background: #fff;
  box-shadow: 0 10px 30px rgba(23, 33, 28, 0.22);
}

.library-deck-content .state {
  top: 0.7rem;
  right: 2rem;
  bottom: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid #17211c;
  border-radius: 0.35rem;
  background: #17211c;
  color: #fff;
  font: 750 0.9rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.01em;
  opacity: 1;
}

.library-deck-content #previous,
.library-deck-content #next {
  width: 1.75rem;
  min-width: 1.75rem;
}

.library-deck-content #previous {
  left: 0;
}

.library-deck-content #next {
  right: 0;
}