.caic-viewer{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  font-family:Arial,sans-serif;
  --caic-paper:#fff;
  --caic-shadow:rgba(15,23,42,.24);
}
.caic-view-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  font-size:13px;
}
.caic-fullscreen{
  border:1px solid #d0d5dd;
  background:#fff;
  border-radius:7px;
  padding:7px 10px;
  cursor:pointer;
}
.caic-book-shell{
  overflow:auto;
  padding:18px 8px 24px;
  background:linear-gradient(180deg,#eef1f4,#e3e7eb);
  border-radius:12px;
}
.caic-book{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:max-content;
  min-width:100%;
  margin:0 auto;
  perspective:2200px;
}
.caic-leaf{
  position:relative;
  flex:0 0 auto;
  background:var(--caic-paper);
  line-height:0;
  overflow:hidden;
  cursor:pointer;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}
.caic-left-leaf{
  box-shadow:-10px 12px 28px var(--caic-shadow);
  border-radius:5px 0 0 5px;
}
.caic-right-leaf{
  box-shadow:10px 12px 28px var(--caic-shadow);
  border-radius:0 5px 5px 0;
}
.caic-leaf canvas{
  display:block;
  max-width:100%;
  height:auto;
}
.caic-spine{
  width:10px;
  align-self:stretch;
  z-index:8;
  background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(255,255,255,.75),rgba(0,0,0,.15));
  box-shadow:0 0 12px rgba(0,0,0,.18);
}
.caic-view-overlay{
  position:absolute;
  inset:0;
  z-index:5;
  line-height:normal;
}
.caic-live-hotspot{
  position:absolute;
  display:block;
  z-index:20;
  border:0;
  background:rgba(0,92,230,.025);
  cursor:pointer;
  text-decoration:none;
  padding:0;
}
.caic-live-hotspot:hover,
.caic-live-hotspot:focus{
  outline:2px solid rgba(0,92,230,.42);
  background:rgba(0,92,230,.09);
}
.caic-page-number{
  position:absolute;
  bottom:8px;
  z-index:7;
  font-size:11px;
  color:rgba(60,60,60,.62);
  line-height:1;
  pointer-events:none;
}
.caic-left-leaf .caic-page-number{left:12px}
.caic-right-leaf .caic-page-number{right:12px}
.caic-loading{
  position:absolute;
  inset:0;
  z-index:50;
  min-height:450px;
  display:grid;
  place-items:center;
  color:#667085;
  font-size:14px;
  pointer-events:none;
}
.caic-hint{
  text-align:center;
  color:#667085;
  font-size:12px;
  margin-top:9px;
}
.caic-message{
  padding:16px;
  border:1px solid #ddd;
  background:#fafafa;
}
.caic-disabled-side{
  cursor:default;
}
.caic-blank-page{
  min-width:260px;
  background:linear-gradient(90deg,#fff,#fafafa);
}

/* Deliberately slower, visible page-turn motion. */
.caic-book.caic-turn-next .caic-right-leaf{
  animation:caicFlipNext .62s cubic-bezier(.45,.03,.35,1);
  z-index:30;
}
.caic-book.caic-turn-prev .caic-left-leaf{
  animation:caicFlipPrev .62s cubic-bezier(.45,.03,.35,1);
  z-index:30;
}
@keyframes caicFlipNext{
  0%{transform:rotateY(0deg);filter:brightness(1)}
  48%{transform:rotateY(-72deg);filter:brightness(.88)}
  100%{transform:rotateY(-1deg);filter:brightness(1)}
}
@keyframes caicFlipPrev{
  0%{transform:rotateY(0deg);filter:brightness(1)}
  48%{transform:rotateY(72deg);filter:brightness(.88)}
  100%{transform:rotateY(1deg);filter:brightness(1)}
}
.caic-right-leaf{transform-origin:left center}
.caic-left-leaf{transform-origin:right center}

.caic-viewer:fullscreen{
  background:#171a1f;
  padding:20px;
  overflow:auto;
}
.caic-viewer:fullscreen .caic-view-top,
.caic-viewer:fullscreen .caic-hint{color:white}

@media(max-width:700px){
  .caic-book-shell{padding:10px 4px 16px}
  .caic-spine{width:5px}
  .caic-hint{font-size:11px}
  .caic-fullscreen{display:none}
}

@media(prefers-reduced-motion:reduce){
  .caic-book.caic-turn-next .caic-right-leaf,
  .caic-book.caic-turn-prev .caic-left-leaf{animation-duration:.01ms}
}