.viewer-body{
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
  background:radial-gradient(circle at 50% 12%,rgba(255,46,159,.06),transparent 34%),#020202;
}
.viewer-header{
  height:66px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:20px;
  padding:0 22px;
  border-bottom:1px solid var(--line);
  background:rgba(5,5,5,.86);
  backdrop-filter:blur(14px);
}
.viewer-title{
  text-align:center;
  color:var(--muted);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.small-link{
  color:var(--muted);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.viewer{
  height:calc(100vh - 126px);
  height:calc(100dvh - 126px);
  display:grid;
  grid-template-columns:70px minmax(0,1fr) 70px;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  overflow:hidden;
}
.page-stage{
  height:100%;
  min-width:0;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  overflow:hidden;
}
.page-stage img{
  display:block;
  width:auto;
  height:auto;
  max-width:calc(100vw - 190px);
  max-height:calc(100vh - 170px);
  max-height:calc(100dvh - 170px);
  object-fit:contain;
  background:#0b0b0b;
  box-shadow:0 24px 90px rgba(0,0,0,.7);
  transition:opacity .2s ease, transform .2s ease;
}
.page-stage img.switching{
  opacity:.25;
  transform:scale(.992);
}
.page-stage figcaption{
  color:var(--muted);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1;
}
.viewer-arrow{
  height:70px;
  width:54px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  color:var(--white);
  font-size:3rem;
  line-height:1;
  cursor:pointer;
  transition:.2s ease;
  justify-self:center;
}
.viewer-arrow:hover{
  border-color:var(--pink);
  color:var(--pink);
}
.viewer-controls{
  height:60px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  border-top:1px solid var(--line);
  background:rgba(2,2,2,.96);
}
.viewer-controls button{
  background:transparent;
  border:1px solid var(--line);
  color:var(--muted);
  padding:10px 14px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.68rem;
  cursor:pointer;
}
.viewer-controls button:hover{
  color:var(--white);
  border-color:var(--pink);
}
@media(max-width:760px){
  .viewer-body{overflow:hidden}
  .viewer-header{
    grid-template-columns:1fr auto;
    height:64px;
    padding:0 16px;
  }
  .viewer-title{display:none}
  .viewer{
    height:calc(100vh - 124px);
    height:calc(100dvh - 124px);
    grid-template-columns:1fr;
    padding:10px;
  }
  .viewer-arrow{display:none}
  .page-stage{gap:6px}
  .page-stage img{
    max-width:100%;
    max-height:calc(100vh - 158px);
    max-height:calc(100dvh - 158px);
  }
  .viewer-controls{
    height:60px;
    gap:6px;
    padding:0 8px;
  }
  .viewer-controls button{
    padding:9px 10px;
  }
}
@media(max-width:420px){
  .viewer-controls button{
    font-size:.6rem;
    letter-spacing:.1em;
    padding:9px 8px;
  }
}


.viewer-header-links{
  display:flex;
  align-items:center;
  gap:18px;
}

.exit-link{
  opacity:1;
}