:root {

  --bg: #111;

  --paper: #fff;

  --ui: #1b1b1b;

  --uiText: #eee;

  --shadow: 0 2px 25px rgba(0,0,0,.35);

}



* { box-sizing: border-box; }

html, body {

  margin: 0;

  height: 100%;

  background: var(--bg);

  color: var(--uiText);

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;

}

body, main { min-height: 100svh; }



.site-header { padding: .85rem 1rem .25rem; }

.site-header h1 { margin: 0; font-size: 1.25rem; font-weight: 700; }

.site-header .lede { margin: .25rem 0 0; opacity: .8; font-size: .95rem; }



.book-wrap {

  width: min(1400px, 96vw);

  margin: 0 auto;

  display: grid;

  grid-template-rows: 1fr auto;

  gap: .75rem;

  align-items: stretch;

  justify-items: center;

  padding: 0 1rem 1rem;

}



#book {

  position: relative;

  width: 100%;

  height: min(82dvh, 80rem); 

  border-radius: 14px;

  background:

    radial-gradient(1200px 80% at 50% 100%, rgba(255,255,255,.04), transparent 70%),

    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.08));

  box-shadow: var(--shadow);

  overflow: hidden;

  user-select: none;

  touch-action: pan-y;

  scroll-margin-top: 12px;

}



.book {

  position: absolute; inset: 0;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0;

  perspective: 2000px;

}

.single .book { grid-template-columns: 1fr; }



.page {

  position: relative;

  background: var(--paper);

  display: grid;

  align-items: start;      

  justify-items: center;   

  overflow: hidden;

  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);

  padding-top: 0;         

}

.page.left  { border-right: 1px solid rgba(0,0,0,.06); }

.page.right { border-left:  1px solid rgba(0,0,0,.06); }



.page canvas { display: block; width: 100%; height: auto; }



.flip {

  position: absolute; top: 0; bottom: 0;

  width: 50%;

  transform-style: preserve-3d;

  will-change: transform;

  pointer-events: none;

}

.single .flip { width: 100%; }

.flip.right { right: 0; transform-origin: left center; }

.flip.left  { left: 0;  transform-origin: right center; }



.face {

  position: absolute; inset: 0;

  backface-visibility: hidden;

  background: var(--paper) center/cover no-repeat;

  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);

}

.face.back { transform: rotateY(180deg); }



.flip::before {

  content: ""; position: absolute; inset: 0;

  pointer-events: none; mix-blend-mode: multiply;

  opacity: .0; transition: opacity .25s ease;

}

.flip.right::before { background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0)); }

.flip.left::before  { background: linear-gradient(270deg, rgba(0,0,0,.18), rgba(0,0,0,0)); }

.flip.animating::before { opacity: .75; }



.ui-bar {

  width: 100%;

  display: flex; gap: .5rem; align-items: center; justify-content: center;

  padding: .5rem 0 0;

}

.ui-bar .btn {

  border: 1px solid rgba(255,255,255,.15);

  background: var(--ui);

  color: var(--uiText);

  padding: .55rem .9rem; border-radius: 10px; cursor: pointer;

  font-size: .95rem; line-height: 1; transition: transform .04s ease, background .2s;

}

.ui-bar .btn:active { transform: scale(.98); }

.ui-bar .btn[disabled] { opacity: .45; cursor: not-allowed; }



.pager {

  font-variant-numeric: tabular-nums;

  padding: .35rem .6rem; border-radius: 8px;

  border: 1px solid rgba(255,255,255,.12);

  background: rgba(255,255,255,.04);

}



.nav-zone {

  position: absolute; top: 0; bottom: 0; width: 34%;

  z-index: 2;

}

.nav-zone.left  { left: 0; }

.nav-zone.right { right: 0; }

.nav-zone:hover { cursor: pointer; }



@media (max-width: 900px) {

  #book {

    height: auto !important; 

    min-height: 50svh;

  }

}



noscript a { color: #fff; }



.pdf-link a {

  color: #AD0000;

  font-weight: bold;

  font-size: 16px;

  text-decoration: none;

  transition: color 0.3s ease;

}



.pdf-link a:hover {

  color: white;

}



.pdf-link p {

  font-size: 13px;

  color: #666;

  margin-top: 4px;

}



.single .page.left { display: none !important; }



.single .nav-zone.left { display: none !important; }

.single .nav-zone.right { width: 100% !important; }