html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000000;
  color: #1c252c;
  font-family: Segoe UI, Arial, sans-serif;
}
body {
  display: flex;
  flex-direction: column;
}
.topbar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 18px;
  padding: 12px 96px 6px 18px;
  background: #ffffff;
  border-bottom: 1px solid #cfd7df;
  z-index: 5;
}
.bar-toggle {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  position: fixed;
  right: 12px;
  top: 20px;
  height: 32px;
  min-width: 0;
  padding: 0;
  width: 38px;
  font-family: Segoe UI Symbol, Segoe UI, Arial, sans-serif;
  font-size: 18px;
  line-height: 1;
  z-index: 10;
}
.fullscreen-button, .fullscreen-exit {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  height: 32px;
  min-width: 0;
  padding: 0;
  width: 38px;
  z-index: 10;
}
.fullscreen-button {
  position: fixed;
  right: 58px;
  top: 20px;
}
.fullscreen-exit {
  background: rgba(248, 250, 252, 0.94);
  box-shadow: 0 8px 22px rgba(28, 37, 44, 0.2);
  display: none;
  position: fixed;
  right: 14px;
  top: 14px;
  z-index: 12;
}
.fullscreen-exit[hidden] { display: none; }
body.viewer-fullscreen .fullscreen-exit:not([hidden]) { display: inline-flex; }
.fullscreen-svg {
  display: block;
  height: 20px;
  width: 20px;
}
.fullscreen-svg path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.bar-toggle .glyphicon {
  display: inline-block;
  height: 14px;
  position: relative;
  width: 16px;
}
.bar-toggle .glyphicon::before {
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  content: "";
  display: block;
  height: 8px;
  left: 3px;
  position: absolute;
  width: 8px;
}
.bar-toggle .glyphicon-menu-up::before {
  top: 6px;
  transform: rotate(-135deg);
}
.bar-toggle .glyphicon-menu-down::before {
  top: 0;
  transform: rotate(45deg);
}
body.topbar-hidden .topbar {
  display: none;
}
body.topbar-hidden .bar-toggle {
  top: 12px;
}
body.topbar-hidden .fullscreen-button {
  top: 12px;
}
body.viewer-fullscreen .topbar,
body.viewer-fullscreen .bar-toggle,
body.viewer-fullscreen .fullscreen-button,
body.viewer-fullscreen .thumbs {
  display: none;
}
.title-block {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 220px;
}
.brand-logo-link {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: 48px;
  justify-content: center;
  width: 48px;
}
.brand-logo {
  flex: 0 0 auto;
  height: 48px;
  object-fit: contain;
  width: 48px;
}
.title-block h1 {
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 4px;
}
.page-status {
  color: #5f6f7a;
  font-size: 13px;
}
.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
button {
  border: 1px solid #aebac5;
  border-radius: 6px;
  background: #f8fafc;
  color: #1c252c;
  cursor: pointer;
  font: inherit;
  padding: 7px 10px;
}
button:hover { background: #e9eef3; }
button:disabled {
  color: #8b99a4;
  cursor: default;
}
.page-jump, .zoom-control {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}
#pageInput {
  box-sizing: border-box;
  border: 1px solid #aebac5;
  border-radius: 6px;
  font: inherit;
  padding: 6px;
  width: 76px;
}
#zoomInput { width: 120px; }
.zoom-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  text-align: right;
}
.zoom-reset {
  min-width: 90px;
  padding: 6px 9px;
}
.zoom-reset-hidden {
  pointer-events: none;
  visibility: hidden;
}
.viewer-shell {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  padding: 12px 18px 10px;
}
body.viewer-fullscreen .viewer-shell {
  gap: 0;
  padding: 0;
}
.stage {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  perspective: 1800px;
  position: relative;
}
body.viewer-fullscreen .stage {
  perspective: 2200px;
}
.book-mount {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}
.book {
  align-items: center;
  display: flex;
  gap: 10px;
  height: 100%;
  justify-content: center;
  max-width: 100%;
  transform-origin: center center;
  transition: transform 180ms ease;
}
.book.spread {
  gap: 0;
  position: relative;
}
.book.spread::after {
  background: linear-gradient(90deg, rgba(28, 37, 44, 0.24), rgba(28, 37, 44, 0.08) 28%, rgba(255, 255, 255, 0.62) 50%, rgba(28, 37, 44, 0.1) 72%, rgba(28, 37, 44, 0.22));
  content: "";
  height: calc(var(--spread-page-height, 100%) - 2px);
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  z-index: 2;
}
.book.under-turn::before {
  content: "";
  height: 100%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 50%;
  z-index: 1;
}
.book.under-turn {
  position: relative;
}
.book.under-turn-forward::before {
  animation: receivingPageShadowForward 720ms cubic-bezier(0.22, 0.61, 0.28, 1) forwards;
  background: linear-gradient(90deg, rgba(28, 37, 44, 0.22), rgba(28, 37, 44, 0.14) 26%, rgba(28, 37, 44, 0.02));
  left: 0;
}
.book.under-turn-back::before {
  animation: receivingPageShadowBack 720ms cubic-bezier(0.22, 0.61, 0.28, 1) forwards;
  background: linear-gradient(270deg, rgba(28, 37, 44, 0.22), rgba(28, 37, 44, 0.14) 26%, rgba(28, 37, 44, 0.02));
  right: 0;
}
.book.zoomed {
  cursor: grab;
  touch-action: none;
}
.book.panning {
  cursor: grabbing;
  transition: none;
}
.page {
  background: #ffffff;
  border: 1px solid #c5cfd8;
  box-sizing: border-box;
  box-shadow: 0 12px 34px rgba(28, 37, 44, 0.22);
  cursor: pointer;
  max-height: 100%;
  max-width: min(92vw, 850px);
  object-fit: contain;
  backface-visibility: hidden;
  transition: filter 120ms ease, transform 120ms ease;
}
.book.zoomed .page { cursor: grab; }
.book.panning .page { cursor: grabbing; }
.page:hover { filter: brightness(0.97); }
.spread .page {
  max-width: min(46vw, 620px);
}
.spread .page-left {
  border-right-width: 0;
  box-shadow: -12px 14px 32px rgba(28, 37, 44, 0.2);
  transform-origin: right center;
}
.spread .page-right {
  border-left-width: 0;
  box-shadow: 12px 14px 32px rgba(28, 37, 44, 0.2);
  transform-origin: left center;
}
body.viewer-fullscreen .page {
  max-height: calc(100vh - 20px);
  max-width: min(96vw, 1100px);
}
body.viewer-fullscreen .spread .page {
  max-width: min(48vw, 820px);
}
.turn-overlay {
  cursor: default;
  margin: 0;
  pointer-events: none;
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform, filter;
  z-index: 4;
}
.turn-sheet {
  background: #ffffff;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 18px 46px rgba(28, 37, 44, 0.3);
  overflow: hidden;
}
.turn-sheet::before {
  bottom: 0;
  content: "";
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 24px;
  z-index: 3;
}
.turn-sheet::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.62), rgba(28, 37, 44, 0.18));
  bottom: 0;
  content: "";
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 4px;
  z-index: 3;
}
.turn-sheet.turn-overlay-forward::before {
  animation: pageHingeShadowForward 720ms cubic-bezier(0.22, 0.61, 0.28, 1) forwards;
  background: linear-gradient(90deg, rgba(28, 37, 44, 0.34), rgba(28, 37, 44, 0.08), rgba(255, 255, 255, 0));
  left: 0;
}
.turn-sheet.turn-overlay-forward::after {
  right: 0;
}
.turn-sheet.turn-overlay-back::before {
  animation: pageHingeShadowBack 720ms cubic-bezier(0.22, 0.61, 0.28, 1) forwards;
  background: linear-gradient(270deg, rgba(28, 37, 44, 0.34), rgba(28, 37, 44, 0.08), rgba(255, 255, 255, 0));
  right: 0;
}
.turn-sheet.turn-overlay-back::after {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.62), rgba(28, 37, 44, 0.18));
  left: 0;
}
.turn-overlay-segmented {
  animation: segmentedFlipClock 780ms linear forwards;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  perspective: 1400px;
  --strip-count: 10;
}
.turn-strip {
  height: 100%;
  position: absolute;
  top: 0;
  transform-style: preserve-3d;
  will-change: transform, filter;
  z-index: var(--strip-z, 1);
}
.turn-strip-face {
  backface-visibility: hidden;
  background-color: #ffffff;
  background-repeat: no-repeat;
  border-bottom: 1px solid #c5cfd8;
  border-top: 1px solid #c5cfd8;
  bottom: 0;
  box-sizing: border-box;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}
.turn-strip-back {
  filter: brightness(0.22) saturate(0.3) contrast(0.75) blur(1px);
  transform: rotateY(180deg) translateZ(0.6px);
}
.turn-strip-front {
  transform: translateZ(0.6px);
}
.turn-strip-shade {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(28, 37, 44, 0.34), rgba(255, 255, 255, 0));
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateZ(1px);
}
.turn-overlay-segmented.turn-overlay-forward .turn-strip {
  animation: turnStripForward 620ms ease-in-out forwards;
  animation-delay: var(--strip-delay, 0ms);
  transform-origin: left center;
}
.turn-overlay-segmented.turn-overlay-back .turn-strip {
  animation: turnStripBack 620ms ease-in-out forwards;
  animation-delay: var(--strip-delay, 0ms);
  transform-origin: right center;
}
.turn-overlay-segmented.turn-overlay-forward .turn-strip-shade { animation: turnStripShadeForward 620ms ease-in-out forwards; animation-delay: var(--strip-delay, 0ms); }
.turn-overlay-segmented.turn-overlay-back .turn-strip-shade { animation: turnStripShadeBack 620ms ease-in-out forwards; animation-delay: var(--strip-delay, 0ms); }
.turn-page-face {
  backface-visibility: hidden;
  background: #ffffff;
  border: 1px solid #c5cfd8;
  box-sizing: border-box;
  display: block;
  height: 100%;
  left: 0;
  object-fit: fill;
  position: absolute;
  top: 0;
  width: 100%;
}
.turn-page-front {
  transform: translateZ(0.8px);
}
.turn-page-back {
  filter: brightness(0.22) saturate(0.3) contrast(0.75) blur(1px);
  transform: rotateY(180deg) translateZ(0.8px);
}
.turn-shade {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(28, 37, 44, 0.38), rgba(255, 255, 255, 0.08));
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateZ(1.4px);
}
.turn-sheet.turn-overlay-forward {
  animation: pageFlipRightToLeft 720ms cubic-bezier(0.22, 0.61, 0.28, 1) forwards;
  transform-origin: left center;
}
.turn-sheet.turn-overlay-back {
  animation: pageFlipLeftToRight 720ms cubic-bezier(0.22, 0.61, 0.28, 1) forwards;
  border-radius: 2px 0 0 2px;
  transform-origin: right center;
}
.turn-sheet.turn-overlay-forward .turn-shade { animation: pageFlipShadeForward 720ms cubic-bezier(0.22, 0.61, 0.28, 1) forwards; }
.turn-sheet.turn-overlay-back .turn-shade { animation: pageFlipShadeBack 720ms cubic-bezier(0.22, 0.61, 0.28, 1) forwards; }
@keyframes segmentedFlipClock {
  0%, 100% { opacity: 1; }
}
@keyframes turnStripForward {
  0% { transform: translateZ(0) rotateY(0deg); filter: brightness(1); }
  42% { transform: translateZ(34px) rotateY(-92deg) skewY(-0.8deg); filter: brightness(0.9); }
  72% { transform: translateZ(18px) rotateY(-146deg) skewY(0.45deg); filter: brightness(0.96); }
  100% { transform: translateZ(0) rotateY(-180deg); filter: brightness(1); }
}
@keyframes turnStripBack {
  0% { transform: translateZ(0) rotateY(0deg); filter: brightness(1); }
  42% { transform: translateZ(34px) rotateY(92deg) skewY(0.8deg); filter: brightness(0.9); }
  72% { transform: translateZ(18px) rotateY(146deg) skewY(-0.45deg); filter: brightness(0.96); }
  100% { transform: translateZ(0) rotateY(180deg); filter: brightness(1); }
}
@keyframes turnStripShadeForward {
  0%, 100% { opacity: 0; transform: translateZ(1px) translateX(0); }
  38% { opacity: 0.42; transform: translateZ(1px) translateX(-16%); }
  66% { opacity: 0.22; transform: translateZ(1px) translateX(-30%); }
}
@keyframes turnStripShadeBack {
  0%, 100% { opacity: 0; transform: translateZ(1px) translateX(0); }
  38% { opacity: 0.42; transform: translateZ(1px) translateX(16%); }
  66% { opacity: 0.22; transform: translateZ(1px) translateX(30%); }
}
@keyframes pageFlipRightToLeft {
  0% { transform: translateZ(2px) rotateY(0deg) scaleX(1); filter: brightness(1); }
  18% { transform: translateZ(22px) rotateY(-28deg) scaleX(0.997); filter: brightness(1.03); }
  48% { transform: translateZ(58px) rotateY(-92deg) scaleX(0.985); filter: brightness(0.88); }
  76% { transform: translateZ(26px) rotateY(-154deg) scaleX(0.996); filter: brightness(0.97); }
  100% { transform: translateZ(2px) rotateY(-180deg) scaleX(1); filter: brightness(1); }
}
@keyframes pageFlipLeftToRight {
  0% { transform: translateZ(2px) rotateY(0deg) scaleX(1); filter: brightness(1); }
  18% { transform: translateZ(22px) rotateY(28deg) scaleX(0.997); filter: brightness(1.03); }
  48% { transform: translateZ(58px) rotateY(92deg) scaleX(0.985); filter: brightness(0.88); }
  76% { transform: translateZ(26px) rotateY(154deg) scaleX(0.996); filter: brightness(0.97); }
  100% { transform: translateZ(2px) rotateY(180deg) scaleX(1); filter: brightness(1); }
}
@keyframes pageFlipShadeForward {
  0%, 100% { opacity: 0; transform: translateZ(1.4px) translateX(0); }
  40% { opacity: 0.58; transform: translateZ(1.4px) translateX(-12%); }
  68% { opacity: 0.2; transform: translateZ(1.4px) translateX(-30%); }
}
@keyframes pageFlipShadeBack {
  0%, 100% { opacity: 0; transform: translateZ(1.4px) translateX(0); }
  40% { opacity: 0.58; transform: translateZ(1.4px) translateX(12%); }
  68% { opacity: 0.2; transform: translateZ(1.4px) translateX(30%); }
}
@keyframes pageHingeShadowForward {
  0%, 100% { opacity: 0.28; }
  48% { opacity: 0.7; }
}
@keyframes pageHingeShadowBack {
  0%, 100% { opacity: 0.28; }
  48% { opacity: 0.7; }
}
@keyframes receivingPageShadowForward {
  0%, 100% { opacity: 0; transform: translateX(0); }
  42% { opacity: 0.5; transform: translateX(4%); }
  70% { opacity: 0.22; transform: translateX(-2%); }
}
@keyframes receivingPageShadowBack {
  0%, 100% { opacity: 0; transform: translateX(0); }
  42% { opacity: 0.5; transform: translateX(-4%); }
  70% { opacity: 0.22; transform: translateX(2%); }
}
.thumbs {
  align-items: center;
  display: flex;
  flex: 0 0 102px;
  gap: 8px;
  justify-content: flex-start;
  margin-top: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0 2px;
}
.thumb {
  background: #ffffff;
  border: 3px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  flex: 0 0 auto;
  height: 84px;
  padding: 2px;
}
.thumb.active { border-color: #009dff; box-shadow: 0 0 0 2px rgba(0, 157, 255, 0.28); }
.thumb:first-child { margin-left: auto; }
.thumb:last-child { margin-right: auto; }
.thumb img {
  display: block;
  filter: brightness(0.72) saturate(0.9);
  height: 100%;
  transition: filter 120ms ease;
  width: auto;
}
.thumb:not(.active):hover img { filter: brightness(0.9) saturate(0.95); }
.thumb.active img { filter: brightness(1) saturate(1); }
.side-nav {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #aebac5;
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(28, 37, 44, 0.2);
  color: #1c252c;
  display: flex;
  font-size: 34px;
  font-weight: 600;
  height: 58px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 58px;
  z-index: 3;
}
.side-nav:hover { background: #ffffff; }
.side-nav:disabled { opacity: 0.35; }
.side-nav-left { left: 10px; }
.side-nav-right { right: 10px; }
@media (max-width: 820px) {
  .topbar { align-items: center; flex-direction: row; gap: 10px; min-height: 48px; padding: 6px 92px 6px 10px; }
  .title-block { flex: 1 1 auto; gap: 8px; min-width: 0; }
  .title-block > div { min-width: 0; }
  .brand-logo { height: 34px; width: 40px; }
  .title-block h1 { font-size: 16px; line-height: 1.15; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toolbar { display: none; }
  .page-status { display: block; font-size: 12px; line-height: 1.1; margin-top: 2px; }
  .bar-toggle { height: 30px; right: 10px; top: 9px; width: 30px; }
  body.topbar-hidden .bar-toggle { top: 9px; }
  .fullscreen-button { height: 30px; right: 46px; top: 9px; width: 30px; }
  body.topbar-hidden .fullscreen-button { top: 9px; }
  .fullscreen-svg { height: 18px; width: 18px; }
  .viewer-shell { gap: 8px; padding: 8px 8px 6px; }
  .book { gap: 0; }
  .page, .spread .page { max-width: 96vw; }
  .thumbs { flex-basis: 72px; }
  .thumb { height: 60px; }
  .side-nav { background: rgba(255, 255, 255, 0.42); border-color: rgba(174, 186, 197, 0.5); border-radius: 50%; box-shadow: 0 2px 8px rgba(28, 37, 44, 0.12); font-size: 20px; height: 34px; width: 34px; }
  .side-nav:hover, .side-nav:focus { background: rgba(255, 255, 255, 0.78); }
  .side-nav:disabled { opacity: 0.16; }
  .side-nav-left { left: 5px; }
  .side-nav-right { right: 5px; }
}