html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f7f8f6;
}

.library-layout,
.library-content,
.library-deck-content .page {
  width: 100%;
  height: 100%;
}

.library-deck-content .page {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
}

.library-deck-content .masthead,
.library-deck-content .badge,
.library-deck-content #step-position {
  display: none;
}

.library-deck-content iframe {
  display: block;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.library-deck-content .controls {
  display: block;
  margin: 0;
}

.library-deck-content .state {
  position: fixed;
  right: 0.65rem;
  bottom: 0.5rem;
  z-index: 10;
  color: #52615a;
  font: 500 0.68rem/1 ui-sans-serif, system-ui, sans-serif;
  opacity: 0.35;
}

.library-deck-content .state strong {
  font: inherit;
}

.library-deck-content .transport {
  display: contents;
}

.library-deck-content #previous,
.library-deck-content #next {
  position: fixed;
  top: 50%;
  z-index: 10;
  width: 2rem;
  min-width: 2rem;
  height: 3rem;
  min-height: 3rem;
  margin-top: -1.5rem;
  padding: 0;
  border: 0;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.7);
  color: #32423a;
  font-size: 0;
  box-shadow: none;
  opacity: 0.18;
}

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

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

.library-deck-content #previous::after,
.library-deck-content #next::after {
  font: 400 1.5rem/1 ui-sans-serif, system-ui, sans-serif;
}

.library-deck-content #previous::after {
  content: "‹";
}

.library-deck-content #next::after {
  content: "›";
}

.library-deck-content #previous:hover,
.library-deck-content #next:hover,
.library-deck-content #previous:focus-visible,
.library-deck-content #next:focus-visible {
  opacity: 0.85;
}

.library-deck-content #previous:disabled,
.library-deck-content #next:disabled {
  opacity: 0.06;
}

.deck-help {
  position: fixed;
  left: 0.65rem;
  bottom: 0.5rem;
  z-index: 10;
  color: #52615a;
  font: 500 0.68rem/1 ui-sans-serif, system-ui, sans-serif;
  opacity: 0.28;
  pointer-events: none;
}