:root { color-scheme: dark; --orange: #f39200; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #171a1b; }
body {
  min-height: 100dvh; overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f4f0e9; -webkit-tap-highlight-color: transparent; user-select: none;
}
button { font: inherit; }
.viewer {
  min-height: 100dvh; display: grid; grid-template-rows: minmax(0, 1fr) auto auto;
  place-items: center;
  padding: max(.65rem, env(safe-area-inset-top)) max(.65rem, env(safe-area-inset-right)) max(.65rem, env(safe-area-inset-bottom)) max(.65rem, env(safe-area-inset-left));
  background: radial-gradient(circle at 50% 34%, rgba(255,255,255,.055), transparent 38%), linear-gradient(145deg, #232728 0%, #111314 100%);
}
.loading {
  grid-row: 1 / -1; display: flex; align-items: center; gap: .8rem;
  color: rgba(255,255,255,.72); letter-spacing: .12em; text-transform: uppercase; font-size: .78rem;
}
.loading-mark {
  width: 1.1rem; height: 1.1rem; border: 2px solid rgba(255,255,255,.2);
  border-top-color: var(--orange); border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.book-shell {
  width: min(96vw, calc((100dvh - 8.6rem) * 1.4140625));
  height: min(calc(100dvh - 8.6rem), 67.88vw);
  display: grid; place-items: center;
  filter: drop-shadow(0 1.8rem 2.8rem rgba(0,0,0,.48));
}
.book {
  width: 100%; height: 100%;
  transform: translateX(0);
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
}
.book-shell.is-cover .book {
  transform: translateX(-25%);
  clip-path: inset(0 0 0 50%);
}
.book-shell.is-back-cover .book {
  transform: translateX(25%);
  clip-path: inset(0 50% 0 0);
}
.stf__wrapper { margin: auto; }
.stf__item { background: #f4f0e9; }
.stf__item img { display: block; width: 100%; height: 100%; object-fit: fill; }
.controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .75rem; }
.control-button {
  width: 2.7rem; height: 2.7rem; display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.control-button:hover:not(:disabled) { background: rgba(243,146,0,.18); border-color: rgba(243,146,0,.7); }
.control-button:focus-visible { outline: 3px solid rgba(243,146,0,.82); outline-offset: 3px; }
.control-button:disabled { opacity: .26; cursor: default; }
.page-status {
  margin: 0; min-width: 9rem; text-align: center; color: rgba(255,255,255,.72);
  font-size: .84rem; letter-spacing: .08em; font-variant-numeric: tabular-nums;
}
.hint { margin: .5rem 0 0; color: rgba(255,255,255,.38); font-size: .76rem; }
@media (max-width: 760px) and (orientation: portrait) {
  .book-shell {
    width: min(94vw, calc((100dvh - 8.2rem) * .70703125));
    height: min(calc(100dvh - 8.2rem), 132.96vw);
  }
  .controls { margin-top: .45rem; }
  .hint { margin-top: .3rem; }
}
@media (prefers-reduced-motion: reduce) { .loading-mark { animation-duration: 1.8s; } }