:root {
  --ink: #e7ecee;
  --ink-muted: #8e9ca2;
  --rule: rgba(231, 236, 238, 0.2);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--ink); background: #000; font-family: Arial, Helvetica, sans-serif; }
button, a { font: inherit; }

.viewer {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  padding: clamp(18px, 3vw, 40px);
  overflow: hidden;
  background: #000;
}

.masthead, .footer, .controls { width: min(100%, 1320px); margin-inline: auto; }
.masthead, .footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.eyebrow { margin: 0 0 4px; color: var(--ink-muted); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(1.05rem, 2vw, 1.55rem); font-weight: 700; letter-spacing: -.025em; }
.text-link { border: 0; padding: 0; color: var(--ink); background: transparent; text-decoration: none; border-bottom: 1px solid var(--rule); cursor: pointer; white-space: nowrap; }
.text-link:hover, .text-link:focus-visible { border-color: var(--ink); }

.book-stage { position: relative; min-height: 0; display: grid; place-items: center; isolation: isolate; }
.book-stage::after { content: ""; position: absolute; z-index: -1; left: 15%; right: 15%; bottom: 2%; height: 7%; border-radius: 50%; background: rgba(255,255,255,.08); filter: blur(24px); }
.book { background: #000; opacity: 0; transition: opacity 350ms ease; }
.book.is-ready { opacity: 1; }
.book .stf__block, .book-page { background: #000; }
.book-page { overflow: hidden; }
.book img { width: 100%; height: 100%; object-fit: cover; user-select: none; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--ink-muted); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }

.controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-top: 12px; border-top: 1px solid var(--rule); }
.controls button { width: max-content; border: 0; padding: 7px 0; color: var(--ink); background: transparent; cursor: pointer; }
.controls button:last-child { justify-self: end; }
.controls button:disabled { opacity: .28; cursor: default; }
.controls p, .footer p { margin: 0; color: var(--ink-muted); font-size: .76rem; }
.footer { align-items: center; }
.footer .text-link { font-size: .76rem; }

@media (max-width: 680px) {
  .viewer { gap: 10px; padding: 16px 14px; }
  .masthead { align-items: start; }
  .eyebrow, .footer p { display: none; }
  .masthead .text-link { font-size: .76rem; }
  .controls { gap: 12px; }
  .controls p { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) { .book { transition: none; } }