:root{
  --page-w: 520px;
  --page-h: calc(var(--page-w) * 1.448);
  --ink:#172238;
  --gold:#c9a767;
  --paper:#f8f7f3;
}
*{box-sizing:border-box} html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:"Noto Serif SC","Songti SC","Microsoft YaHei",serif;color:var(--ink);background:#e7f5ff;}
.bg{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 82% 13%,rgba(255,245,190,.98) 0 5%,rgba(255,216,124,.58) 6% 13%,rgba(255,196,89,.22) 14% 25%,transparent 36%),linear-gradient(145deg,#2d85db 0%,#78c7ff 32%,#fff2c9 69%,#f8fcff 100%);} 
.bg:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 82% 18%,rgba(255,255,255,.34),transparent 28%),linear-gradient(0deg,rgba(255,255,255,.82),rgba(255,255,255,.13) 48%,rgba(255,255,255,.02));backdrop-filter:blur(.2px)}
.sun{position:absolute;right:7%;top:6%;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#fffceb 0 12%,#ffd98b99 13% 32%,#ffc65c44 33% 55%,transparent 72%);filter:blur(.6px);animation:pulse 7s ease-in-out infinite;}
.mist{position:absolute;width:72vw;height:28vh;left:8vw;bottom:7vh;background:radial-gradient(ellipse at center,rgba(255,255,255,.78),transparent 70%);filter:blur(28px);animation:drift 25s linear infinite;opacity:.72}.mist-b{bottom:28vh;left:-20vw;animation-duration:37s;opacity:.46}
.mountain{position:absolute;bottom:0;width:120vw;height:43vh;left:-10vw;background:linear-gradient(135deg,transparent 0 28%,rgba(0,44,88,.22) 29% 39%,transparent 40%),linear-gradient(45deg,transparent 0 32%,rgba(6,56,98,.32) 33% 47%,transparent 48%);clip-path:polygon(0 100%,8% 72%,17% 92%,27% 50%,39% 89%,50% 56%,64% 90%,76% 48%,88% 86%,100% 62%,100% 100%);opacity:.58}.mountain-b{bottom:-4vh;height:31vh;opacity:.36;filter:blur(4px)}
#particles{position:absolute;inset:0;z-index:2;opacity:.64}
@keyframes pulse{50%{transform:scale(1.08);opacity:.78}}@keyframes drift{from{transform:translateX(-10vw)}to{transform:translateX(35vw)}}
.topbar{position:fixed;z-index:10;top:0;left:0;right:0;height:64px;display:flex;justify-content:space-between;align-items:center;padding:12px 22px;color:#173052;background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,0));}
.brand{display:flex;gap:12px;align-items:center}.mark{width:52px;height:34px;border:1px solid rgba(255,255,255,.88);border-radius:14px;display:grid;place-items:center;font-weight:700;letter-spacing:1px;background:rgba(255,255,255,.5);backdrop-filter:blur(8px)}.title{font-size:19px;font-weight:700;letter-spacing:.08em}.sub{font-size:11px;opacity:.74;letter-spacing:.12em;margin-top:2px}
button{border:0;border-radius:999px;padding:9px 14px;background:rgba(255,255,255,.84);color:#163052;box-shadow:0 8px 24px rgba(13,37,74,.16);cursor:pointer;transition:.25s;font-weight:600;white-space:nowrap}button:hover{transform:translateY(-2px);background:#fff}.actions{display:flex;gap:9px;align-items:center}
.zoom-control{height:38px;display:flex;gap:6px;align-items:center;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.48);box-shadow:0 8px 24px rgba(13,37,74,.12);backdrop-filter:blur(12px)}.zoom-control button{width:30px;height:30px;padding:0;display:grid;place-items:center;box-shadow:none}.zoom-control input{width:110px;accent-color:#173a66}.zoom-control span{font-size:12px;font-weight:700;min-width:38px;color:#173052}
.stage{position:relative;z-index:5;height:100vh;display:grid;grid-template-columns:230px 1fr;align-items:center;padding:66px 14px 58px 14px;gap:6px}.toc{align-self:center;width:220px;padding:20px 16px;border:1px solid rgba(255,255,255,.44);border-radius:24px;background:rgba(255,255,255,.35);box-shadow:0 28px 80px rgba(4,28,62,.14);backdrop-filter:blur(14px)}.toc-title{font-size:25px;font-weight:700;margin-bottom:12px;letter-spacing:.18em}.toc button{width:100%;margin:6px 0;text-align:left;background:rgba(255,255,255,.68);font-size:13px;padding:10px 12px;border-radius:14px;box-shadow:none}.toc button.active{background:#183a65;color:#fff}
.book-wrap{position:relative;height:calc(var(--page-h) + 38px);display:grid;place-items:center;perspective:2500px;overflow:visible}.book{position:relative;width:calc(var(--page-w) * 2);height:var(--page-h);transform-style:preserve-3d;filter:drop-shadow(0 30px 42px rgba(2,22,48,.30));cursor:grab;opacity:1}.book:active{cursor:grabbing}.book.is-hidden{display:none}.left-board{position:absolute;left:0;top:0;width:var(--page-w);height:var(--page-h);border-radius:12px 0 0 12px;background:linear-gradient(90deg,#ece6dc,#fffdf8 88%);box-shadow:inset -22px 0 32px rgba(0,0,0,.08), inset 0 0 0 1px rgba(80,60,40,.16);overflow:hidden;transition:opacity .16s}.left-board img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.98)}
.sheet{position:absolute;left:50%;top:0;width:var(--page-w);height:var(--page-h);transform-style:preserve-3d;transform-origin:left center;transition:transform 1.08s cubic-bezier(.17,.74,.24,1), z-index .1s .52s;backface-visibility:hidden}.sheet.flipped{transform:rotateY(-180deg)}.face{position:absolute;inset:0;overflow:hidden;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:0 12px 12px 0;box-shadow:inset 16px 0 28px rgba(0,0,0,.08), inset 0 0 0 1px rgba(50,40,20,.12);transform:translateZ(.1px)}.back{transform:rotateY(180deg) translateZ(.1px);border-radius:12px 0 0 12px;box-shadow:inset -16px 0 28px rgba(0,0,0,.08), inset 0 0 0 1px rgba(50,40,20,.12)}.face img{width:100%;height:100%;object-fit:cover;display:block;background:#fff}.sheet:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.20),rgba(0,0,0,0) 18%,rgba(255,255,255,.10) 46%,rgba(0,0,0,.16) 100%);opacity:0;transition:opacity .35s}.sheet.turning:after{opacity:.42}.book:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:26px;transform:translateX(-50%);z-index:999;background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(255,255,255,.45),rgba(0,0,0,.12));mix-blend-mode:multiply;opacity:.62;pointer-events:none}.book-shadow{position:absolute;width:calc(var(--page-w)*2.04);height:28px;background:radial-gradient(ellipse,rgba(0,0,0,.35),transparent 70%);bottom:0;filter:blur(10px);transform:translateY(30px)}.hint{position:absolute;bottom:-19px;color:#17345a;background:rgba(255,255,255,.58);padding:6px 14px;border-radius:999px;font-size:12px;backdrop-filter:blur(12px)}
.controls{position:fixed;z-index:10;left:50%;bottom:13px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:10px 15px;border-radius:999px;background:rgba(255,255,255,.40);backdrop-filter:blur(14px);box-shadow:0 14px 45px rgba(3,21,48,.17)}input[type=range]{width:280px;accent-color:#173a66}.counter{min-width:92px;text-align:center;font-weight:700;color:#173052}.page-pop{position:fixed;left:50%;top:50%;z-index:30;transform:translate(-50%,-50%);font-size:42px;color:#fff;text-shadow:0 10px 30px rgba(0,0,0,.35);letter-spacing:.12em;pointer-events:none;animation:pop 1s ease forwards}@keyframes pop{0%{opacity:0;transform:translate(-50%,-44%) scale(.92)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-58%) scale(1.04)}}
.sheet.drag-preview{transition:none!important;overflow:visible}.sheet.drag-preview .face{box-shadow:inset 12px 0 22px rgba(0,0,0,.07),0 14px 40px rgba(0,0,0,.16)}.sheet.drag-preview:before{content:"";position:absolute;inset:-2px;background:#fff;transform:translateZ(-1px);border-radius:12px;backface-visibility:hidden;z-index:-1}.book.dragging{isolation:isolate}.book.dragging:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;background:linear-gradient(90deg,transparent 0 49.3%,rgba(255,255,255,.96) 49.35% 50.65%,transparent 50.7%);z-index:9998}
.cover-screen{position:absolute;z-index:22;width:var(--page-w);height:var(--page-h);border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 38px 88px rgba(4,28,62,.34), inset 0 0 0 1px rgba(255,255,255,.45);cursor:pointer;filter:drop-shadow(0 24px 38px rgba(2,22,48,.26));}
.cover-screen img{width:100%;height:100%;display:block;object-fit:cover;}.cover-screen:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 8%,transparent 86%,rgba(0,0,0,.12));pointer-events:none;}.cover-screen:after{content:"";position:absolute;left:0;top:0;bottom:0;width:18px;background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(255,255,255,.16),transparent);pointer-events:none;}.cover-screen.hide{display:none}.cover-tip{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.74);color:#183a65;font-size:13px;font-weight:700;letter-spacing:.08em;backdrop-filter:blur(10px);box-shadow:0 10px 28px rgba(3,24,54,.18);white-space:nowrap;animation:tipFloat 2.2s ease-in-out infinite;}@keyframes tipFloat{50%{transform:translateX(-50%) translateY(-5px)}}
@media(max-width:1100px){.toc{display:none}.stage{grid-template-columns:1fr;padding-left:10px;padding-right:10px}.sub{display:none}.topbar{height:auto;align-items:flex-start}.actions{flex-wrap:wrap;justify-content:flex-end}.zoom-control input{width:90px}.controls{width:calc(100vw - 28px);gap:8px}.controls input{flex:1;width:auto}.counter{display:none}}

.final-cover{position:absolute;left:50%;top:0;width:var(--page-w);height:var(--page-h);transform:translateX(-50%) scale(.985);z-index:12000;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 32px 72px rgba(2,22,48,.30), inset 0 0 0 1px rgba(255,255,255,.5);opacity:0;pointer-events:none;transition:opacity .28s ease, transform .28s ease;}
.final-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.book.end-mode .final-cover{opacity:1;transform:translateX(-50%) scale(1);pointer-events:auto;}
.book.end-mode .left-board,.book.end-mode .sheet{visibility:hidden;}
.book.end-mode:before{display:none;}


/* V16 Mobile simple page-curl single-page adaptation */
.mobile-only{display:none;}
.mobile-reader{display:none;position:relative;width:var(--page-w);height:var(--page-h);border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 30px 70px rgba(2,22,48,.26), inset 0 0 0 1px rgba(255,255,255,.55);touch-action:pan-y;cursor:grab;}
.mobile-reader:active{cursor:grabbing;}
.mobile-reader>img{width:100%;height:100%;object-fit:cover;display:block;background:#fff;}
.mobile-reader:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.06),transparent 8%,transparent 92%,rgba(0,0,0,.05));mix-blend-mode:multiply;opacity:.24;}
.mobile-flip-sheet{position:absolute;inset:0;z-index:8;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.12);will-change:transform,opacity,clip-path;}
.mobile-flip-sheet img{width:100%;height:100%;object-fit:cover;display:block;background:#fff;}
.mobile-flip-sheet:before{content:"";position:absolute;right:0;bottom:0;width:72px;height:72px;z-index:4;pointer-events:none;border-radius:100% 0 0 0;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(241,236,222,.90) 58%,rgba(173,145,96,.22));box-shadow:-8px -8px 18px rgba(26,42,62,.12), inset 7px 7px 14px rgba(255,255,255,.7);transform-origin:right bottom;animation:simpleCornerNext .44s ease-out forwards;}
.mobile-flip-sheet:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(110deg,transparent 0 76%,rgba(0,0,0,.10) 100%);opacity:0;animation:simpleShade .44s ease-out forwards;}
.mobile-flip-prev:before{left:0;right:auto;bottom:0;border-radius:0 100% 0 0;background:linear-gradient(225deg,rgba(255,255,255,.96),rgba(241,236,222,.90) 58%,rgba(173,145,96,.22));box-shadow:8px -8px 18px rgba(26,42,62,.12), inset -7px 7px 14px rgba(255,255,255,.7);transform-origin:left bottom;animation:simpleCornerPrev .44s ease-out forwards;}
.mobile-flip-prev:after{background:linear-gradient(70deg,rgba(0,0,0,.10) 0%,transparent 24% 100%);}
.mobile-flip-next{animation:simpleCurlNext .44s cubic-bezier(.25,.72,.25,1) forwards;}
.mobile-flip-prev{animation:simpleCurlPrev .44s cubic-bezier(.25,.72,.25,1) forwards;}
@keyframes simpleCurlNext{0%{transform:translateX(0);opacity:1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}100%{transform:translateX(-18px);opacity:0;clip-path:polygon(0 0,100% 0,84% 100%,0 100%);}}
@keyframes simpleCurlPrev{0%{transform:translateX(0);opacity:1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}100%{transform:translateX(18px);opacity:0;clip-path:polygon(0 0,100% 0,100% 100%,16% 100%);}}
@keyframes simpleCornerNext{0%{transform:scale(.45);opacity:0;}35%{opacity:.88;}100%{transform:scale(1.18);opacity:0;}}
@keyframes simpleCornerPrev{0%{transform:scale(.45);opacity:0;}35%{opacity:.88;}100%{transform:scale(1.18);opacity:0;}}
@keyframes simpleShade{0%{opacity:0;}45%{opacity:.22;}100%{opacity:0;}}
@media(max-width:760px){
  html,body{overflow:hidden;}
  .topbar{height:58px;padding:8px 10px;align-items:center;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.08));}
  .brand{gap:8px}.mark{width:44px;height:30px;border-radius:12px;font-size:13px}.title{font-size:15px;letter-spacing:.04em}.sub{display:none;}
  .actions{gap:6px;justify-content:flex-end}.actions button{padding:7px 10px;font-size:12px}.mobile-only{display:inline-flex;position:relative;z-index:1003;}
  .zoom-control{display:none;}
  .stage{display:block;height:100vh;padding:68px 10px 72px 10px;}
  .toc{display:block;position:fixed;z-index:40;left:10px;top:62px;bottom:74px;width:min(78vw,310px);overflow:auto;transform:translateX(calc(-100% - 18px));transition:transform .28s ease;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);}
  body.nav-open .toc{transform:translateX(0);z-index:1001;pointer-events:auto;}
  body.nav-open:before{content:"";position:fixed;inset:0;z-index:900;background:rgba(14,37,66,.25);backdrop-filter:blur(2px);pointer-events:auto;}
  .toc-title{font-size:24px}.toc button{font-size:15px;padding:12px 14px;margin:7px 0;position:relative;z-index:1002;pointer-events:auto;}
  .book-wrap{height:100%;display:grid;place-items:center;perspective:none;}
  .book,.book-shadow{display:none!important;}
  .mobile-reader{display:block;}
  .hint{display:block;left:50%;bottom:8px;transform:translateX(-50%);font-size:12px;padding:6px 12px;white-space:nowrap;background:rgba(255,255,255,.68);color:#17345a;z-index:20;}
  .controls{width:calc(100vw - 20px);bottom:10px;padding:8px 10px;gap:8px;border-radius:20px;}
  .controls button{font-size:12px;padding:8px 10px;}
  .controls input{flex:1;width:auto;min-width:0;}
  .counter{display:block;min-width:50px;font-size:12px;}
  .page-pop{font-size:26px;}
}
@media(min-width:761px){.mobile-reader{display:none!important;}}


/* V13 mobile navigation overlay fix: keep the menu above the blur mask */
@media(max-width:760px){
  body.nav-open .stage{z-index:10020;}
  body.nav-open .toc{
    z-index:10040!important;
    pointer-events:auto!important;
    transform:translateX(0)!important;
    opacity:1!important;
  }
  body.nav-open:before{
    z-index:10000!important;
    pointer-events:auto;
  }
  body.nav-open .topbar{z-index:10050;}
  body.nav-open #toc,
  body.nav-open #toc *{
    pointer-events:auto!important;
  }
}

.mobile-reader{touch-action:pan-x pan-y pinch-zoom;}