/* Gallery controls overlay the preview without resizing the design. */
body.is-preview #preview-toolbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  max-height: 85dvh;
  overflow: auto;
  background: white;
  box-shadow: 0 4px 18px #172f471a;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s;
}
body.is-preview #preview-toolbar.is-retracted {
  opacity: 0;
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s 180ms;
}
body.is-preview #viewer {
  flex: 1 1 100%;
  height: 100dvh;
}
body.is-preview #show-header {
  display: block;
  position: fixed;
  z-index: 21;
  inset: 0 0 auto;
  width: 100%;
  min-height: 8px;
  height: 8px;
  border: 0;
  border-radius: 0;
  padding: 0;
  opacity: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
body.is-preview #show-header :is(span, kbd) {
  display: none;
}
body.is-preview:not(.chrome-hidden) #show-header {
  display: none;
}
body.is-preview #show-header:focus-visible {
  opacity: 1;
  height: 44px;
  background: white;
  outline: 2px solid #183e66;
  outline-offset: -2px;
}
body.is-preview #show-header:focus-visible span {
  display: inline;
}
@media (pointer: coarse) {
  body.is-preview #show-header {
    inset: 0 auto auto 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 44px;
    opacity: 0.9;
    background: white;
    border: 1px solid #dae1e9;
    border-top: 0;
    border-radius: 0 0 9px 9px;
    font-size: 13px;
  }
  body.is-preview #show-header span {
    display: inline;
  }
}
@media (max-width: 650px) {
}
@media (prefers-reduced-motion: reduce) {
  body.is-preview #preview-toolbar,
  body.is-preview #preview-toolbar.is-retracted {
    transition: none;
  }
}