:root{--bg:#10161a;--bg2:#151e23;--ink:#eee9df;--muted:#aeb5b5;--accent:#b88b5a;--accent2:#c6a06e;--petrol:#172a30;--petrol2:#203941;--bar:#2a464d;--sideText:#eee9df;--size:1}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Arial,sans-serif}
body{background:
radial-gradient(ellipse at 64% 42%,rgba(63,82,87,.28) 0%,rgba(28,39,44,.16) 28%,rgba(10,15,18,0) 58%),
radial-gradient(ellipse at 50% 110%,rgba(180,139,90,.055) 0%,rgba(180,139,90,0) 42%),
linear-gradient(135deg,#0a1013 0%,#11191d 44%,#0d1418 100%);
}
button{font:inherit;cursor:pointer;border:0}
.app{display:flex;width:100vw;height:100dvh;background:transparent}
.sidebar{width:300px;flex:0 0 300px;position:relative;background:
radial-gradient(ellipse at 50% 8%,rgba(82,111,116,.20) 0%,rgba(82,111,116,0) 34%),
radial-gradient(ellipse at 50% 96%,rgba(184,139,90,.055) 0%,rgba(184,139,90,0) 42%),
linear-gradient(180deg,#182b31 0%,#14262c 48%,#101e23 100%);
padding:24px 14px 20px;overflow-y:auto;overflow-x:hidden;z-index:40;transition:.25s;box-shadow:8px 0 28px rgba(0,0,0,.32),inset -1px 0 rgba(198,160,110,.10),inset 1px 0 rgba(255,255,255,.025)}
.sidebar:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,.025) 0%,rgba(255,255,255,0) 24%,rgba(0,0,0,.045) 72%,rgba(0,0,0,.11) 100%);}
.sidebar:after{content:"";position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(180deg,rgba(198,160,110,0),rgba(198,160,110,.20) 18%,rgba(198,160,110,.10) 72%,rgba(198,160,110,0));pointer-events:none}
.sidebar.collapsed{width:0;flex-basis:0;padding:0;box-shadow:none}
.sidebar.collapsed>*{display:none}
.tutorial{display:block;width:250px;margin:2px auto 12px;background:rgba(255,255,255,.065);color:#e5e0d8;border:1px solid rgba(198,160,110,.28);border-radius:5px;padding:9px 8px;font-size:13px;letter-spacing:.2px;transition:.2s}
.tutorial:hover{background:rgba(198,160,110,.12);border-color:rgba(198,160,110,.5)}
.side-title{text-align:center;font:normal 28px "Cormorant Garamond",Georgia,serif;letter-spacing:1.2px;margin:10px 0 16px;color:#eee9df}
.sidebar nav{display:flex;flex-direction:column;gap:6px}
.toc-item{width:100%;min-height:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(180deg,#35565e 0%,#2a474e 46%,#223b42 100%);border:1px solid rgba(198,160,110,.22);border-radius:6px;padding:7px 10px;font:500 12.5px/1.15 "Cormorant Garamond",Georgia,serif;letter-spacing:.1px;text-align:left;color:#f0ece4;transition:.18s;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(5,13,16,.24),0 2px 0 rgba(8,16,19,.62),0 4px 9px rgba(0,0,0,.18)}
.toc-item span{float:right;color:#d2ad79;font-family:Arial,sans-serif;font-size:12px;margin-left:8px;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.toc-item:hover{background:linear-gradient(180deg,#416771 0%,#355761 48%,#29474e 100%);border-color:rgba(198,160,110,.55);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.19),inset 0 -2px 0 rgba(5,13,16,.26),0 3px 0 rgba(8,16,19,.62),0 7px 14px rgba(0,0,0,.24)}
.toc-item:active{transform:translateY(1px);box-shadow:inset 0 2px 3px rgba(5,13,16,.28),0 1px 0 rgba(8,16,19,.7)}
.stage{position:relative;flex:1;min-width:0;height:100dvh;background:
radial-gradient(ellipse at 52% 47%,rgba(70,88,93,.18) 0%,rgba(31,43,48,.10) 34%,rgba(8,12,15,.22) 73%),
linear-gradient(135deg,rgba(255,255,255,.012),rgba(0,0,0,.035));overflow:hidden}
.stage:before{content:"";position:absolute;inset:0;pointer-events:none;background:
linear-gradient(90deg,rgba(255,255,255,.018),transparent 14%,transparent 86%,rgba(0,0,0,.06)),
radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.16) 100%)}
.top-controls{position:absolute;top:0;left:0;right:0;height:54px;z-index:30;display:flex;align-items:center;padding:0 12px;background:linear-gradient(rgba(7,11,13,.78),rgba(7,11,13,.08),transparent);color:#fff}
.top-controls>button,.controls button{background:rgba(23,35,40,.78);border:1px solid rgba(198,160,110,.16);color:#e9e5de;padding:7px 10px;border-radius:4px;transition:.18s}
.top-controls>button:hover,.controls button:hover{background:rgba(42,70,77,.9);border-color:rgba(198,160,110,.38);color:#fff}
.book-name{flex:1;text-align:center;font:11px Arial,sans-serif;letter-spacing:2.8px;color:#d9d4ca;opacity:.82}
.controls{display:flex;gap:4px}
.reader{position:absolute;top:54px;left:68px;right:68px;bottom:58px;overflow:auto;background:
radial-gradient(ellipse at center,rgba(72,91,96,.22) 0%,rgba(40,53,58,.12) 34%,rgba(13,19,23,.16) 70%,rgba(7,11,13,.30) 100%),
linear-gradient(135deg,rgba(255,255,255,.012),rgba(0,0,0,.018));scroll-behavior:smooth;border-radius:3px;box-shadow:inset 0 0 70px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.018)}
.page-canvas{position:relative;display:flex;justify-content:center;align-items:flex-start;min-width:100%;min-height:100%;padding:14px}
#pageImage{display:block;flex:none;width:auto;height:auto;object-fit:contain;box-shadow:0 12px 32px rgba(0,0,0,.42),0 0 1px rgba(255,255,255,.16);user-select:none}
.nav-arrow{position:absolute;top:54px;bottom:58px;width:68px;background:transparent;color:#d6d1c9;font:54px Georgia,sans-serif;z-index:25;display:flex;align-items:center;justify-content:center;transition:.18s}
.nav-arrow.left{left:0}.nav-arrow.right{right:0}
.nav-arrow:hover{color:var(--accent2);text-shadow:0 0 12px rgba(198,160,110,.25)}
.bottom-bar{position:absolute;left:0;right:0;bottom:0;height:58px;background:linear-gradient(rgba(10,15,18,.82),rgba(10,15,18,.96));border-top:1px solid rgba(198,160,110,.10);z-index:30;color:#d1ccc4;display:flex;align-items:center;padding:0 14px;font:11px Arial,sans-serif}
#where{flex:1;color:#d5d0c8}#counter{flex:1;text-align:center;color:#aeb5b5}
#fullscreen{background:linear-gradient(135deg,#b88b5a,#9d754d);color:#17120d;padding:9px 12px;border-radius:4px;font-size:11px;border:1px solid rgba(255,255,255,.08);font-weight:600}
#fullscreen:hover{background:linear-gradient(135deg,#c6a06e,#ad8257)}
.overlay{display:none;position:absolute;inset:0;z-index:35;background:rgba(6,10,12,.76);align-items:center;justify-content:center;padding:30px;backdrop-filter:blur(2px)}
.overlay.open{display:flex}
.toc-card{position:relative;width:min(760px,94%);max-height:calc(100dvh - 70px);overflow:auto;background:#f7f3eb;color:#272522;padding:42px 50px;box-shadow:0 20px 55px rgba(0,0,0,.5);border:1px solid rgba(184,139,90,.35)}
.toc-card h1{font:normal 40px "Cormorant Garamond",Georgia,serif;letter-spacing:.4px;margin:0;color:#27343a}.toc-card p{color:#746f67;font:14px/1.4 "Cormorant Garamond",Georgia,serif;margin-top:4px}
.eyebrow{font:600 10px Arial,sans-serif;letter-spacing:2.4px;color:#9a7048;margin-bottom:10px}
.toc-main button{width:100%;display:flex;justify-content:space-between;text-align:left;background:transparent;border-bottom:1px solid #d9d0c2;padding:9px 2px;font:15px "Cormorant Garamond",Georgia,serif;color:#30373a;transition:.15s}
.toc-main button:hover{color:#8b6746;padding-left:5px}
.close{position:absolute;right:12px;top:8px;background:transparent;font-size:30px;color:#6b655d}
body.dark .toc-card{background:#242321;color:#eee}.dark .toc-main button{color:#eee}
@media(max-width:800px){
 .sidebar{width:245px;flex-basis:245px}
 .reader{left:52px;right:52px}
 .nav-arrow{width:52px}
}

/* v1.3 — leitura em dupla página e virada editorial */
.page-canvas{align-items:center;padding:17px;position:relative;perspective:1800px}
.book-spread{position:relative;display:flex;align-items:center;justify-content:center;gap:0;transform-style:preserve-3d;z-index:3}
.book-page{position:relative;flex:none;overflow:hidden;background:#f7f4ec;backface-visibility:hidden;box-shadow:0 13px 32px rgba(0,0,0,.38),0 0 1px rgba(255,255,255,.18)}
.book-page.left{transform-origin:right center;border-radius:2px 0 0 2px;box-shadow:0 13px 32px rgba(0,0,0,.38),inset -12px 0 18px rgba(0,0,0,.045)}
.book-page.right{transform-origin:left center;border-radius:0 2px 2px 0;box-shadow:0 13px 32px rgba(0,0,0,.38),inset 12px 0 18px rgba(0,0,0,.045)}
.book-page img{display:block;width:100%;height:100%;object-fit:contain;user-select:none}
.book-spread:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:8px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(0,0,0,.10),rgba(255,255,255,.18) 38%,rgba(0,0,0,.12));opacity:.42;pointer-events:none;z-index:6}
.spread-back{position:absolute;display:flex;align-items:center;justify-content:center;gap:0;z-index:1;pointer-events:none;opacity:.98}
.spread-back img{display:block;object-fit:contain;background:#f7f4ec;box-shadow:0 13px 32px rgba(0,0,0,.38)}
#backLeft,#backRight{width:var(--page-w);height:var(--page-h)}
#backLeft{border-radius:2px 0 0 2px}.spread-back #backRight{border-radius:0 2px 2px 0}
.page-turn{position:absolute;display:none;top:0;right:0;width:50%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 48%,rgba(0,0,0,.16));transform-origin:left center;backface-visibility:hidden;z-index:7;pointer-events:none}
.turn-forward .book-page.right{animation:pageTurnForward 1.10s cubic-bezier(.38,.05,.22,1) both}
.turn-forward .page-turn{display:block;animation:shadowForward 1.15s ease both}
.turn-back .book-page.left{animation:pageTurnBack 1.10s cubic-bezier(.38,.05,.22,1) both;transform-origin:right center}
.turn-back .page-turn{display:block;left:0;right:auto;transform-origin:right center;animation:shadowBack 1.15s ease both}
@keyframes pageTurnForward{0%{transform:rotateY(0deg);filter:brightness(1)}20%{transform:rotateY(-7deg);filter:brightness(.99)}52%{transform:rotateY(-70deg);filter:brightness(.93)}82%{transform:rotateY(-153deg);filter:brightness(.97)}100%{transform:rotateY(-180deg);filter:brightness(.98)}}
@keyframes pageTurnBack{0%{transform:rotateY(0deg);filter:brightness(1)}20%{transform:rotateY(7deg);filter:brightness(.99)}52%{transform:rotateY(70deg);filter:brightness(.93)}82%{transform:rotateY(153deg);filter:brightness(.97)}100%{transform:rotateY(180deg);filter:brightness(.98)}}
@keyframes shadowForward{0%{opacity:0;transform:scaleX(.98)}40%{opacity:.42}100%{opacity:0;transform:scaleX(.82)}}
@keyframes shadowBack{0%{opacity:0;transform:scaleX(.98)}40%{opacity:.42}100%{opacity:0;transform:scaleX(.82)}}
@media(max-width:1050px){
 .book-spread,.spread-back{transform:scale(.94);transform-origin:center}
}
@media(max-width:800px){
 .book-spread,.spread-back{transform:scale(.82);transform-origin:center}
}

/* v1.4 — capa sem elemento de lombada ao fundo */
.single-spread .spread-back{display:none}
.single-spread .book-spread:after{display:none}


/* v1.5 — transição para a quarta capa: a capa final começa na posição da página direita, sem sobreposição */
.final-turn .spread-back{
  margin-left:var(--page-w);
}
.final-turn .spread-back #backLeft{
  box-shadow:0 13px 32px rgba(0,0,0,.38),inset 12px 0 18px rgba(0,0,0,.045);
}
@media(max-width:1050px){
  .final-turn .spread-back{margin-left:calc(var(--page-w) * .94);}
}
@media(max-width:800px){
  .final-turn .spread-back{margin-left:calc(var(--page-w) * .82);}
}

/* v1.6 — ajuste fino da virada final e encerramento mais natural */
.final-turn .spread-back{
  left:50%;
  margin-left:0;
  transform:translateX(0);
}
.final-turn .spread-back #backLeft{
  display:block;
}
.final-turn .book-spread .book-page.right{
  z-index:8;
}
@media(max-width:1050px){
  .final-turn .spread-back{left:50%;margin-left:0;}
}
@media(max-width:800px){
  .final-turn .spread-back{left:50%;margin-left:0;}
}

/* v1.7 — quarta capa isolada após a última página de texto */
.final-turn .spread-back{
  left:50%;
  top:50%;
  margin:0;
  transform:translate(-50%,-50%);
  opacity:0;
  z-index:1;
  display:flex;
}
.final-turn .spread-back #backLeft{
  display:block;
  box-shadow:0 16px 38px rgba(0,0,0,.44),0 0 1px rgba(255,255,255,.16);
}
.final-turn .spread-back #backRight{display:none}
.final-turn .book-page.right{z-index:8}
.final-turn .book-page.left{z-index:3}
.final-turn .page-turn{z-index:9}
.final-turn .spread-back{animation:finalCoverReveal 1.10s ease-out both}
@keyframes finalCoverReveal{
  0%,68%{opacity:0}
  84%{opacity:.72}
  100%{opacity:1}
}


/* v1.8 — última capa só entra depois que a última página de texto terminou de virar */
.final-turn .spread-back{
  display:none !important;
  opacity:0 !important;
  animation:none !important;
}
.final-turn .book-page.right{z-index:8;}
.final-turn .page-turn{z-index:9;}

/* v1.9 — encerramento físico do livro: página 360 + folha em branco 361 + quarta capa isolada */
.close-book .book-page.right{animation:blankPageExit .82s cubic-bezier(.28,.06,.20,1) both;transform-origin:left center;}
.close-book .book-page.left{animation:textPageSettle .82s cubic-bezier(.28,.06,.20,1) both;}
.close-book .book-spread:after{opacity:.16;}
@keyframes blankPageExit{
  0%{transform:rotateY(0deg);opacity:1;filter:brightness(1)}
  55%{transform:rotateY(-82deg);opacity:1;filter:brightness(.96)}
  100%{transform:rotateY(-178deg);opacity:0;filter:brightness(.98)}
}
@keyframes textPageSettle{
  0%{transform:translateX(0)}
  100%{transform:translateX(0)}
}
.final-cover-mode .book-spread:after{display:none}
.final-cover-mode .book-page.left{box-shadow:0 16px 40px rgba(0,0,0,.46),0 0 1px rgba(255,255,255,.16);border-radius:2px}
.final-cover-mode .book-page.right{display:none!important}
/* v2.0 — encerramento: a página 360 é texto; a quarta capa é independente e sem borda branca */
.final-cover-mode .book-page.left{
  box-shadow:0 18px 42px rgba(0,0,0,.50);
  border:0 !important;
  outline:0 !important;
  border-radius:0;
}
.final-cover-mode .book-page.left img{
  border:0 !important;
  outline:0 !important;
}



/* v2.6 — capa-dura refinada + ambiente editorial: lombada lisa, retangular e perspectiva mais natural */
.stage.cover-stage{
  background:
    radial-gradient(ellipse at 50% 70%,rgba(91,104,108,.16) 0%,rgba(37,48,52,.10) 34%,rgba(8,13,16,.18) 65%,rgba(3,6,8,.82) 100%),
    linear-gradient(135deg,#05090b 0%,#172127 48%,#06090b 100%);
}
.stage.cover-stage:before{
  background:
    radial-gradient(ellipse at 50% 88%,rgba(180,145,95,.08) 0%,rgba(180,145,95,0) 34%),
    linear-gradient(90deg,rgba(0,0,0,.30),transparent 22%,transparent 78%,rgba(0,0,0,.30));
}
.cover-front-mode .book-spread,
.final-cover-mode .book-spread{
  position:relative;
  overflow:visible;
  transform-style:preserve-3d;
  transform-origin:center center;
}
/* Pequena inclinação, suficiente para revelar o volume sem deformar a capa. */
.cover-front-mode .book-spread{transform:perspective(1500px) rotateY(-8deg) rotateX(1deg);}
.final-cover-mode .book-spread{transform:perspective(1500px) rotateY(8deg) rotateX(1deg);}
.cover-front-mode .book-page.left,
.final-cover-mode .book-page.left{
  position:relative;
  overflow:visible;
  background:#1a3440;
  border-radius:0;
  transform:none;
  transform-style:preserve-3d;
  box-shadow:0 22px 42px rgba(0,0,0,.68),0 3px 0 rgba(0,0,0,.50),0 0 0 1px rgba(0,0,0,.55);
}
.cover-front-mode .book-page.left img,
.final-cover-mode .book-page.left img{
  position:relative;
  z-index:3;
  display:block;
  border-radius:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.09), inset 0 0 0 1px rgba(0,0,0,.14);
}
/* Lombada lisa: estrutura retangular independente da fotografia da capa. */
.cover-front-mode .book-page.left:before,
.final-cover-mode .book-page.left:before{
  content:"";
  position:absolute;
  z-index:1;
  top:0;
  bottom:0;
  width:38px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 10%,rgba(24,50,62,1) 22%,rgba(18,42,53,1) 76%,rgba(5,15,20,.92) 100%);
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(0,0,0,.72);
  box-shadow:
    inset 1px 0 rgba(255,255,255,.18),
    inset -2px 0 rgba(0,0,0,.55),
    0 0 0 1px rgba(3,10,14,.92),
    0 12px 22px rgba(0,0,0,.34);
}
.cover-front-mode .book-page.left:before{left:-38px;}
.final-cover-mode .book-page.left:before{right:-38px;}
/* Filete de junção entre capa e lombada. */
.cover-front-mode .book-page.left:after,
.final-cover-mode .book-page.left:after{
  content:"";
  position:absolute;
  z-index:4;
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.08) 45%,rgba(0,0,0,.52));
}
.cover-front-mode .book-page.left:after{left:0;}
.final-cover-mode .book-page.left:after{right:0;}
.cover-front-mode .book-spread:after,
.final-cover-mode .book-spread:after{display:none!important}


/* v2.7 — ambiente mais claro e moldura de capa-dura para a leitura */
.stage{
  background:
    radial-gradient(ellipse at 55% 44%,rgba(255,248,236,.62) 0%,rgba(218,209,198,.34) 28%,rgba(154,149,143,.20) 58%,rgba(112,111,108,.18) 100%),
    linear-gradient(135deg,#8f8b86 0%,#b6afa6 48%,#87847f 100%);
}
.stage:before{
  background:
    radial-gradient(ellipse at 52% 48%,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 54%),
    linear-gradient(90deg,rgba(20,26,28,.12),transparent 16%,transparent 84%,rgba(20,26,28,.14));
}
.reader{
  background:
    radial-gradient(ellipse at center,rgba(255,250,242,.24) 0%,rgba(221,214,204,.13) 34%,rgba(105,103,100,.10) 74%,rgba(56,58,58,.14) 100%),
    linear-gradient(135deg,rgba(255,255,255,.06),rgba(0,0,0,.025));
  box-shadow:inset 0 0 90px rgba(30,28,26,.10),inset 0 1px rgba(255,255,255,.10);
}
/* A moldura representa a estrutura das capas-duras envolvendo o miolo. */
.book-spread:before{
  content:"";
  position:absolute;
  z-index:-2;
  top:-11px;
  bottom:-11px;
  left:-11px;
  right:-11px;
  background:linear-gradient(180deg,#203945 0%,#172e39 48%,#10232d 100%);
  border:1px solid rgba(8,20,27,.82);
  border-radius:3px;
  box-shadow:
    0 17px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.26);
}
.book-spread:after{
  z-index:6;
}
.book-spread:global-placeholder{}
.book-spread .book-page{
  box-shadow:0 10px 22px rgba(0,0,0,.30), inset 0 0 0 1px rgba(0,0,0,.035);
}
.book-spread .book-page.left{box-shadow:0 10px 22px rgba(0,0,0,.30),inset -13px 0 18px rgba(0,0,0,.045)}
.book-spread .book-page.right{box-shadow:0 10px 22px rgba(0,0,0,.30),inset 13px 0 18px rgba(0,0,0,.045)}
/* Lombada: tipografia vertical, sem interferir com a fotografia da capa. */
.spine-label{
  position:absolute;
  z-index:6;
  top:9px;
  bottom:9px;
  left:-34px;
  width:30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:15px;
  color:#e4c58f;
  pointer-events:none;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  text-shadow:0 1px 2px rgba(0,0,0,.65);
  letter-spacing:1px;
  font:600 9px/1.05 Georgia,serif;
}
.spine-label b{font:500 7px/1 Arial,sans-serif;letter-spacing:1.1px;color:#d6b879}
.cover-front-mode .spine-label{left:-31px}
.final-cover-mode .spine-label{left:auto;right:-31px;transform:rotate(0deg)}
.cover-front-mode .book-spread:before,.final-cover-mode .book-spread:before{
  top:-8px;bottom:-8px;left:-8px;right:-8px;
}
.cover-front-mode .book-page.left:before,.final-cover-mode .book-page.left:before{
  width:38px;
  background:linear-gradient(180deg,#264653 0%,#1a3643 48%,#102732 100%);
  border-color:rgba(255,255,255,.12);
}
.cover-front-mode .book-page.left:before{left:-38px}
.final-cover-mode .book-page.left:before{right:-38px}
.cover-front-mode .book-spread{transform:perspective(1500px) rotateY(-11deg) rotateX(1.5deg)}
.final-cover-mode .book-spread{transform:perspective(1500px) rotateY(11deg) rotateX(1.5deg)}

/* v2.8 — acabamento final das capas: ambiente editorial claro, lombada física e volume de capa-dura */
.stage{
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255,249,239,.94) 0%, rgba(244,235,222,.78) 25%, rgba(205,194,182,.58) 54%, rgba(151,146,141,.48) 100%),
    linear-gradient(135deg,#aaa39b 0%,#d2c8bc 48%,#9d9791 100%);
}
.stage:before{
  background:
    radial-gradient(ellipse at 50% 86%,rgba(255,220,172,.30) 0%,rgba(255,220,172,0) 34%),
    radial-gradient(ellipse at 50% 12%,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 48%),
    linear-gradient(90deg,rgba(42,38,34,.10),transparent 18%,transparent 82%,rgba(42,38,34,.12));
}
.reader{
  background:
    radial-gradient(ellipse at 50% 48%,rgba(255,252,246,.34) 0%,rgba(236,226,214,.20) 38%,rgba(145,140,135,.08) 78%,rgba(80,78,76,.08) 100%),
    linear-gradient(135deg,rgba(255,255,255,.10),rgba(80,72,65,.03));
  box-shadow:inset 0 0 100px rgba(50,44,39,.10),inset 0 1px rgba(255,255,255,.18);
}

/* Moldura estrutural: sugere as capas-duras envolvendo o miolo aberto. */
.book-spread:before{
  content:"";
  position:absolute;
  z-index:-2;
  top:-15px; bottom:-15px; left:-15px; right:-15px;
  background:
    linear-gradient(180deg,#223d48 0%,#1a3440 48%,#102833 100%);
  border:1px solid rgba(11,24,31,.72);
  border-radius:4px;
  box-shadow:
    0 18px 34px rgba(47,40,34,.28),
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -3px 0 rgba(0,0,0,.22);
}

/* Lombadas reais, separadas da fotografia e com geometria de capa-dura. */
.hardcover-spine{
  position:absolute;
  top:0;
  bottom:0;
  width:46px;
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#e8d09a;
  background:
    linear-gradient(90deg,#102a36 0%,#173d4b 24%,#1d4a58 52%,#173845 78%,#0c202b 100%);
  border-top:1px solid rgba(255,255,255,.24);
  border-bottom:1px solid rgba(0,0,0,.48);
  box-shadow:
    inset 2px 0 0 rgba(255,255,255,.12),
    inset -3px 0 0 rgba(0,0,0,.34),
    0 16px 28px rgba(45,39,34,.30),
    0 0 0 1px rgba(8,19,25,.65);
  backface-visibility:hidden;
}
.front-spine{left:-50px;}
.back-spine{right:-50px;}
.spine-title,.spine-author,.spine-mark{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.65);
}
.spine-title{
  font:600 8px/1.1 Georgia,serif;
  letter-spacing:1px;
}
.spine-author{
  margin-top:17px;
  font:500 7px/1 Arial,sans-serif;
  letter-spacing:1.2px;
  color:#d8bb7c;
}
.spine-mark{
  margin-top:16px;
  font:14px/1 Georgia,serif;
  color:#d8bb7c;
}

.cover-front-mode .book-spread,
.final-cover-mode .book-spread{
  overflow:visible;
  transform-style:preserve-3d;
}
.cover-front-mode .book-spread{transform:perspective(1650px) rotateY(-12deg) rotateX(1.2deg);}
.final-cover-mode .book-spread{transform:perspective(1650px) rotateY(12deg) rotateX(1.2deg);}
.cover-front-mode .hardcover-spine,
.final-cover-mode .hardcover-spine{
  top:0;
  bottom:0;
}
.cover-front-mode .front-spine{left:-50px;}
.final-cover-mode .back-spine{right:-50px;}
.cover-front-mode .back-spine,.final-cover-mode .front-spine{display:none;}

/* A capa continua sendo a imagem original, sem duplicação fotográfica na lombada. */
.cover-front-mode .book-page.left,
.final-cover-mode .book-page.left{
  overflow:visible;
  background:#173c49;
  box-shadow:0 25px 48px rgba(45,38,33,.40),0 0 0 1px rgba(8,19,25,.60);
}
.cover-front-mode .book-page.left img,
.final-cover-mode .book-page.left img{
  box-shadow:0 0 0 1px rgba(255,255,255,.11), inset 0 0 0 1px rgba(0,0,0,.14);
}
.cover-front-mode .book-page.left:before,
.cover-front-mode .book-page.left:after,
.final-cover-mode .book-page.left:before,
.final-cover-mode .book-page.left:after{display:none!important;}
.cover-front-mode .book-spread:before,
.final-cover-mode .book-spread:before{display:none;}
.cover-front-mode .spine-title,.final-cover-mode .spine-title{color:#f0d59c;}

/* Mantém a capa centralizada mesmo com a lombada externa. */
@media(max-width:1050px){
  .front-spine{left:-47px}.back-spine{right:-47px}
  .cover-front-mode .book-spread{transform:perspective(1500px) rotateY(-10deg) rotateX(1deg)}
  .final-cover-mode .book-spread{transform:perspective(1500px) rotateY(10deg) rotateX(1deg)}
}
@media(max-width:800px){
  .front-spine{left:-43px}.back-spine{right:-43px}
  .hardcover-spine{width:40px}
  .cover-front-mode .book-spread{transform:perspective(1300px) rotateY(-8deg) rotateX(.8deg)}
  .final-cover-mode .book-spread{transform:perspective(1300px) rotateY(8deg) rotateX(.8deg)}
}

/* v2.9 — capas 3D finais extraídas do mockup aprovado; lombadas ocultas no miolo */
.hardcover-spine{display:none!important;}
.cover-front-mode .book-spread,
.final-cover-mode .book-spread{
  transform:none!important;
  perspective:none!important;
}
.cover-front-mode .book-page.left,
.final-cover-mode .book-page.left{
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.cover-front-mode .book-page.left img,
.final-cover-mode .book-page.left img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  box-shadow:none!important;
  border:0!important;
  outline:0!important;
  filter:none!important;
}
.cover-front-mode .book-spread:before,
.cover-front-mode .book-spread:after,
.final-cover-mode .book-spread:before,
.final-cover-mode .book-spread:after{display:none!important;}
.cover-front-mode .book-spread,
.final-cover-mode .book-spread{background:transparent!important;}


/* v3.0 — ajuste final de enquadramento das capas 3D extraídas do mockup aprovado.
   As imagens já contêm perspectiva, lombada, sombras e tipografia; não devem receber
   uma segunda transformação 3D pelo CSS. */
.cover-front-mode .book-spread,
.final-cover-mode .book-spread{
  transform:none !important;
  perspective:none !important;
  margin:0 auto;
}
.cover-front-mode .book-page.left,
.final-cover-mode .book-page.left{
  width:var(--page-w) !important;
  height:var(--page-h) !important;
  flex:none !important;
}
.cover-front-mode .book-page.left img,
.final-cover-mode .book-page.left img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
.cover-front-mode .book-spread{
  margin-left:auto; margin-right:auto;
}
.final-cover-mode .book-spread{
  margin-left:auto; margin-right:auto;
}
/* v3.1 — capas de referência extraídas diretamente do mockup aprovado.\n   O miolo nunca recebe lombadas; somente as imagens de capa possuem esse elemento. */
.book-spread:not(.cover-front-mode):not(.final-cover-mode) .hardcover-spine,
.book-spread:not(.cover-front-mode):not(.final-cover-mode) .spine-label{display:none!important;}

/* v3.4 — capas fornecidas pelo autor: a imagem já contém lombada e perspectiva.
   Não acrescentar outra lombada ou transformação CSS sobre elas. */
.cover-front-mode .book-page.left:before,
.cover-front-mode .book-page.left:after,
.final-cover-mode .book-page.left:before,
.final-cover-mode .book-page.left:after{display:none!important;content:none!important;}
.cover-front-mode .book-spread,
.final-cover-mode .book-spread{transform:none!important;}
.cover-front-mode .book-page.left,
.final-cover-mode .book-page.left{background:transparent!important;box-shadow:none!important;overflow:visible!important;}
.cover-front-mode .book-page.left img,
.final-cover-mode .book-page.left img{display:block;object-fit:contain;border:0!important;}

/* v3.5 — tela de acolhimento antes da capa */
.welcome-overlay{
  position:absolute;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:34px;
  background:
    radial-gradient(ellipse at 50% 34%,rgba(255,244,222,.72) 0%,rgba(223,207,185,.48) 28%,rgba(96,91,88,.22) 56%,rgba(38,42,43,.58) 100%),
    linear-gradient(135deg,#b9b1a7 0%,#d8cfc2 44%,#8c8985 100%);
  backdrop-filter:blur(1.5px);
  transition:opacity .45s ease,visibility .45s ease;
}
.welcome-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.welcome-card{
  width:min(700px,92vw);max-height:calc(100dvh - 68px);overflow:auto;
  padding:48px 62px 44px;
  text-align:center;color:#29353a;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.88),rgba(250,246,238,.96) 42%,rgba(239,232,220,.97) 100%);
  border:1px solid rgba(122,91,58,.28);
  box-shadow:0 28px 70px rgba(28,25,22,.32),0 2px 0 rgba(255,255,255,.72) inset;
  position:relative;
}
.welcome-card:before,.welcome-card:after{content:"";position:absolute;left:28px;right:28px;height:1px;background:linear-gradient(90deg,transparent,rgba(184,139,90,.34),transparent)}
.welcome-card:before{top:18px}.welcome-card:after{bottom:18px}
.welcome-kicker{font:600 10px Arial,sans-serif;letter-spacing:3.2px;color:#8b6846;margin-bottom:12px}
.welcome-rule{width:64px;height:1px;margin:0 auto 22px;background:linear-gradient(90deg,transparent,#b88b5a,transparent)}
.welcome-card h1{margin:0;color:#27343a;font:normal 44px/1.05 "Cormorant Garamond",Georgia,serif;letter-spacing:.3px}
.welcome-card h2{margin:10px 0 26px;color:#8b6746;font:normal 23px/1.15 "Cormorant Garamond",Georgia,serif}
.welcome-card p{max-width:560px;margin:0 auto 15px;font:17px/1.52 "Cormorant Garamond",Georgia,serif;color:#4b4843}
.welcome-card .welcome-emphasis{margin-top:20px;color:#303b40;font-style:italic}
.welcome-card .welcome-last{margin-top:22px;margin-bottom:14px;line-height:1.4}
.welcome-card .welcome-last strong{color:#8b6746;font-weight:600}
.welcome-author{margin:18px 0 24px;font:normal 20px "Cormorant Garamond",Georgia,serif;color:#29353a}
.welcome-start{display:inline-flex;align-items:center;gap:14px;padding:12px 24px;border-radius:5px;background:linear-gradient(135deg,#314a54,#22383f);border:1px solid rgba(184,139,90,.45);color:#f5f0e7;font:600 14px Arial,sans-serif;letter-spacing:.2px;box-shadow:0 7px 18px rgba(28,31,31,.20),inset 0 1px rgba(255,255,255,.12);transition:.2s}
.welcome-start span{font-size:18px;line-height:1}
.welcome-start:hover{transform:translateY(-1px);background:linear-gradient(135deg,#3b5964,#2b464f);border-color:rgba(184,139,90,.68);box-shadow:0 10px 22px rgba(28,31,31,.25),inset 0 1px rgba(255,255,255,.14)}
@media(max-width:700px){
 .welcome-overlay{padding:18px}
 .welcome-card{padding:38px 28px 34px}
 .welcome-card h1{font-size:36px}
 .welcome-card h2{font-size:20px}
 .welcome-card p{font-size:16px}
}

/* v3.6 — refinamento da tela de acolhimento e retorno à saudação */
.welcome-return{margin-top:0}
.welcome-overlay{
  padding:20px;
  background:
    radial-gradient(ellipse at 50% 32%,rgba(255,248,232,.94) 0%,rgba(230,215,193,.78) 30%,rgba(171,157,143,.54) 64%,rgba(91,87,82,.72) 100%),
    linear-gradient(135deg,#b9b1a7 0%,#ded4c5 46%,#8f8a84 100%);
  backdrop-filter:blur(2px);
}
.welcome-card{
  width:min(640px,88vw);
  max-height:calc(100dvh - 40px);
  overflow:hidden;
  padding:34px 52px 30px;
  border:1px solid rgba(122,91,58,.34);
  box-shadow:0 24px 62px rgba(28,25,22,.30),0 1px 0 rgba(255,255,255,.82) inset,0 -1px 0 rgba(122,91,58,.08) inset;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.96),rgba(250,246,238,.98) 46%,rgba(239,232,220,.98) 100%);
}
.welcome-card:before,.welcome-card:after{left:22px;right:22px;background:linear-gradient(90deg,transparent,rgba(184,139,90,.48),transparent)}
.welcome-kicker{font-size:9px;letter-spacing:3.5px;margin-bottom:8px}
.welcome-rule{width:76px;margin-bottom:16px}
.welcome-card h1{font-size:38px;line-height:1.02}
.welcome-card h2{margin:7px 0 18px;font-size:21px}
.welcome-card p{max-width:540px;margin:0 auto 10px;font-size:15.5px;line-height:1.40}
.welcome-card .welcome-emphasis{margin-top:13px}
.welcome-card .welcome-last{margin-top:15px;margin-bottom:10px;line-height:1.32}
.welcome-author{margin:12px 0 17px;font-size:19px}
.welcome-start{padding:10px 22px;border-radius:5px;font-size:13px;box-shadow:0 6px 16px rgba(28,31,31,.18),inset 0 1px rgba(255,255,255,.14)}
@media(max-height:720px){
  .welcome-card{padding:25px 42px 22px}
  .welcome-card h1{font-size:33px}
  .welcome-card h2{margin:5px 0 12px;font-size:19px}
  .welcome-card p{font-size:14px;line-height:1.32;margin-bottom:7px}
  .welcome-card .welcome-emphasis{margin-top:9px}
  .welcome-card .welcome-last{margin-top:10px;margin-bottom:7px}
  .welcome-author{margin:8px 0 12px;font-size:17px}
  .welcome-start{padding:9px 20px}
}
@media(max-width:800px){
  .welcome-card{width:min(620px,92vw);padding:28px 30px 24px}
  .welcome-card p{font-size:14.5px}
}

/* v3.8 — folha editorial premium: marfim/couché VISÍVEL, sem aspecto de pergaminho */
.welcome-card{
  position:relative;
  background-color:#ebe3d4;
  background-image:
    radial-gradient(ellipse at 50% 8%, rgba(255,255,255,.88) 0%, rgba(255,252,246,.48) 27%, transparent 57%),
    repeating-linear-gradient(0deg, rgba(92,73,48,.018) 0px, rgba(92,73,48,.018) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0px, rgba(255,255,255,.045) 1px, transparent 1px, transparent 5px),
    radial-gradient(circle at 17% 24%, rgba(112,92,67,.075) 0 .55px, transparent .9px),
    radial-gradient(circle at 71% 62%, rgba(112,92,67,.055) 0 .5px, transparent .85px),
    linear-gradient(180deg,#f1eadf 0%,#e7ddcc 100%);
  background-size:100% 100%,100% 4px,5px 100%,17px 17px,23px 23px,100% 100%;
  border:1px solid rgba(118,91,59,.30);
  box-shadow:
    0 30px 72px rgba(20,18,15,.34),
    0 0 0 7px rgba(245,240,231,.08),
    0 1px 0 rgba(255,255,255,.96) inset,
    0 -2px 0 rgba(112,82,48,.12) inset;
}
.welcome-card:after{
  opacity:.72;
  box-shadow:0 0 28px rgba(255,255,255,.18);
}
.welcome-card:before{opacity:.58}


/* v3.9 — folha de acolhimento ilustrada, criada especialmente para a edição digital */
.welcome-overlay{
  padding:18px;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(33,28,24,.18) 0%,rgba(12,15,17,.74) 78%),
    linear-gradient(135deg,#17191a 0%,#292522 48%,#101213 100%);
  backdrop-filter:blur(1px);
}
.welcome-card{
  width:min(1280px,94vw,calc(92vh * 1.5));
  aspect-ratio:3 / 2;
  max-height:92vh;
  height:auto;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:2px;
  background:#1a1714 url('acolhimento.png') center center / 100% 100% no-repeat;
  box-shadow:0 32px 90px rgba(0,0,0,.48),0 0 0 1px rgba(184,139,90,.24);
  position:relative;
}
.welcome-card > *:not(#startReading){display:none!important}
.welcome-card:before,.welcome-card:after{display:none!important}
.welcome-start{
  position:absolute;
  left:50%;
  bottom:13.5%;
  transform:translateX(-50%);
  width:23%;
  height:7%;
  margin:0;
  padding:0;
  opacity:0;
  border:0;
  border-radius:24px;
  background:transparent;
  box-shadow:none;
  cursor:pointer;
  color:transparent;
  font-size:0;
  z-index:5;
}
.welcome-start span{display:none}
.welcome-start:hover,.welcome-start:focus{transform:translateX(-50%);background:transparent;box-shadow:none;outline:2px solid rgba(220,177,103,.45);outline-offset:3px}
@media(max-width:700px){
  .welcome-overlay{padding:10px}
  .welcome-card{width:96vw;max-height:94vh}
  .welcome-start{width:24%;height:8%;bottom:12.5%}
}