:root{--gold:#f8b739;--ink:#13101e}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:#fff;font-family:"Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}.icons{position:absolute;width:0;height:0}.cover{position:fixed;inset:0;background:#13101e;overflow:hidden}.cover-image,.cover-shade{position:absolute;inset:0}.cover-image{background:url('cover-background.webp') center 55%/cover}.cover-shade{background:linear-gradient(90deg,rgba(12,10,19,.88),rgba(15,12,23,.55) 55%,rgba(13,11,19,.4)),linear-gradient(0deg,#13101eb3,transparent 65%)}.cover-inner{height:100%;position:relative;max-width:1500px;margin:auto;padding:44px 7%}.brand{display:flex;align-items:center;gap:12px;letter-spacing:2px}.brand>span{height:29px;width:5px;background:var(--gold)}.brand strong{font-size:16px}.brand small{font-size:9px;letter-spacing:1px;color:#c8c1ca}.cover-copy{position:absolute;top:25%;left:7%;text-shadow:0 2px 18px #0008}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--gold)}.eyebrow i{display:inline-block;width:28px;height:1px;background:var(--gold);vertical-align:middle;margin:0 6px}.cover-copy h1{font-size:clamp(42px,5vw,72px);letter-spacing:3px;margin:22px 0 12px;font-weight:700}.cover-copy p{font-size:15px;color:#ddd7df}.gold-line{width:46px;height:3px;background:var(--gold);margin-top:28px}.loading-status{position:absolute;left:7%;top:52%;color:#e4dde5;font-size:13px;letter-spacing:1px}.cover-actions{position:absolute;left:7%;top:62%;width:min(380px,75vw)}.action-buttons{display:flex;gap:10px}.start-btn,.retry-btn{min-height:56px;padding:0 22px;color:#fff;border:1px solid #ffffff90;border-radius:4px;background:#ffffff1a;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.start-btn{position:relative;overflow:hidden;flex:1;text-align:left;letter-spacing:2px;font-weight:600}.start-btn span{float:right;font-size:20px;animation:arrow 2.6s ease-in-out infinite}.start-btn::after{content:"";position:absolute;top:-60%;bottom:-60%;width:30%;left:-50%;background:linear-gradient(90deg,transparent,#ffffff38,transparent);transform:skewX(-22deg);animation:glint 4.5s ease-in-out infinite}.start-btn:hover,.start-btn:focus-visible{border-color:var(--gold);background:#ffffff30}.retry-btn{background:#13101e88}.operation-hint{margin-top:17px;font-size:11px;color:#d3cdd5;letter-spacing:.4px}.operation-hint span{color:#f8c76a;font-size:10px;letter-spacing:1px}.operation-hint p{margin:6px 0}.cover-foot{position:absolute;bottom:38px;left:7%;right:7%;display:flex;justify-content:space-between;color:#c7bfc8;font-size:11px;letter-spacing:1px}.cover-foot span{font-size:9px}.reader{position:fixed;inset:0;background:radial-gradient(ellipse at center,#2b2633,#13101a 75%)}.reader-head{position:absolute;top:0;left:0;right:0;padding:22px 36px;display:flex;justify-content:space-between;color:#e6e0e7;font-size:12px;letter-spacing:1px;pointer-events:none}.reader-head i{display:inline-block;width:20px;height:1px;vertical-align:middle;background:var(--gold);margin:0 6px}.stage{position:absolute;inset:54px 70px 78px;display:flex;overflow:auto;overscroll-behavior:contain}.book{display:flex;flex:none;margin:auto;box-shadow:0 20px 60px #000a}.book img{display:block;flex:none;max-width:none;max-height:none;object-fit:contain;user-select:none;-webkit-user-select:none;background:#fff}.book img+img{border-left:1px solid #0002}.side-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid #ffffff55;border-radius:50%;background:#13101e80;color:#fff;display:grid;place-items:center}.side-prev{left:16px}.side-next{right:16px}.side-arrow:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}.side-arrow:disabled,.toolbar button:disabled{opacity:.3;cursor:default}.side-arrow svg,.toolbar svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}.toolbar{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:3px;padding:4px 16px;background:rgba(19,16,30,.8);border-radius:8px 8px 0 0}.toolbar button{border:0;background:none;color:#fff;min-width:60px;height:62px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-size:10px}.toolbar button:hover:not(:disabled){color:var(--gold)}.toolbar button#zoomOut,.toolbar button#zoomIn{min-width:35px}.zoom-value{font-size:11px;min-width:40px;text-align:center;color:#dcd5dd}.divider{height:26px;width:1px;background:#ffffff35;margin:0 6px}.scrim{position:fixed;inset:0;background:#0009;z-index:4}.sidebar{position:fixed;top:0;bottom:0;left:0;width:min(420px,90vw);z-index:5;background:#f7f7f6;color:#1c1c1c;display:flex;flex-direction:column;padding:28px 24px;transform:translateX(-105%);transition:transform .25s;box-shadow:10px 0 40px #0006}.sidebar.open{transform:translateX(0)}.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;flex:none}.sheet-head .eyebrow{color:#a36c0b}.sheet-head h2{font-size:23px;margin:10px 0 5px}.sheet-head p{font-size:12px;color:#888}.sheet-head button{font-size:28px;color:#777;background:none;border:0;width:44px;height:44px}.thumbnail-list{overflow:auto;flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-content:start;padding:14px 0}.thumb{display:flex;flex-direction:column;gap:7px;min-width:0;text-align:left;border:1px solid transparent;background:transparent;border-radius:6px;padding:6px;color:#666}.thumb.active{border-color:#e6c77e;background:#fff;color:#1c1c1c}.thumb img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#ddd;box-shadow:0 3px 8px #0002}.thumb span{font-size:11px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.toast{position:fixed;z-index:10;bottom:85px;left:50%;transform:translateX(-50%);padding:10px 16px;border-radius:4px;background:#f7f7f6;color:#1c1c1c;box-shadow:0 6px 20px #0005;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s}.toast.show{opacity:1}@keyframes glint{0%,55%{left:-50%}85%,100%{left:125%}}@keyframes arrow{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}@media(max-width:700px){.reader-head{padding:16px}.stage{inset:50px 40px 78px}.side-arrow{width:32px;height:32px}.side-prev{left:4px}.side-next{right:4px}.toolbar{width:100%;gap:0;padding:4px}.toolbar button{min-width:0;flex:1}.divider{margin:0 2px}.cover-inner{padding:25px}.cover-copy,.cover-actions,.loading-status{left:25px}.cover-copy{top:22%}.cover-copy h1{font-size:35px}.cover-foot{left:25px;right:25px;bottom:20px}.cover-foot span{display:none}}@media(max-height:550px){.brand{display:none}.cover-copy{top:12%}.cover-copy h1{font-size:32px;margin:10px 0}.gold-line{margin-top:10px}.loading-status{top:48%}.cover-actions{top:59%}.operation-hint{margin-top:6px}.cover-foot{bottom:10px}.reader-head{padding-top:8px}.stage{top:35px}}@media(prefers-reduced-motion:reduce){*,*::after{animation:none!important;transition:none!important}}


/* 自动阅读与翻书动效 */
.cover-auto-btn{min-height:56px;min-width:130px;padding:0 16px;color:#f8d37e;border:1px solid #f8b73999;border-radius:4px;background:#13101e99;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);white-space:nowrap}.cover-auto-btn:hover,.cover-auto-btn:focus-visible{background:#f8b73922;border-color:#f8b739}.cover-auto-btn span{margin-left:6px;font-size:11px}.toolbar button[aria-pressed="true"]{color:#f8b739}.book{position:relative;perspective:1800px}.book .turning-page{position:absolute;inset:0;z-index:2;pointer-events:none;backface-visibility:hidden;box-shadow:0 5px 28px #0009;animation-duration:.65s;animation-timing-function:cubic-bezier(.45,0,.2,1);animation-fill-mode:forwards}.book .turn-forward{transform-origin:left center;animation-name:turn-forward}.book .turn-back{transform-origin:right center;animation-name:turn-back}@keyframes turn-forward{0%{transform:rotateY(0);filter:brightness(1)}100%{transform:rotateY(-95deg);filter:brightness(.45)}}@keyframes turn-back{0%{transform:rotateY(0);filter:brightness(1)}100%{transform:rotateY(95deg);filter:brightness(.45)}}@media(prefers-reduced-motion:reduce){.book .turning-page{display:none;animation:none}}
.brand-logo{width:42px;height:32px;object-fit:contain;display:block}.cover-music{position:absolute;right:7%;top:42px;display:flex;align-items:center;gap:8px;background:rgba(19,16,30,.45);border:1px solid #ffffff55;border-radius:30px;padding:9px 14px;color:#fff;font-size:12px}.cover-music svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}.cover-music:hover,.cover-music[aria-pressed="true"]{color:#f8d37e;border-color:#f8b73980}@media(max-height:550px){.cover-music{top:12px;right:20px}}@media(max-width:700px){.cover-music{top:22px;right:22px}.cover-music span{display:none}}

/* 双面翻页：旧页卷起，新页从书脊展开；仅动画可见图像，不翻转正文镜像。 */
.book .page-turn-layer{position:absolute;inset:0;z-index:3;pointer-events:none;perspective:1800px;overflow:visible;isolation:isolate}
.book .page-turn-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;will-change:transform,opacity;box-shadow:0 8px 28px #0008;animation-duration:1s;animation-timing-function:cubic-bezier(.42,0,.2,1);animation-fill-mode:both}
.book .page-turn-face img{display:block;width:100%!important;height:100%!important;max-width:none;max-height:none;object-fit:fill;border:0!important}
.book .page-turn-face::after{content:"";position:absolute;inset:0;pointer-events:none;animation-duration:1s;animation-fill-mode:both}
.book .page-turn-next .page-turn-face{transform-origin:left center}.book .page-turn-prev .page-turn-face{transform-origin:right center}
.book .page-turn-next .page-turn-out{animation-name:page-next-out}.book .page-turn-next .page-turn-in{animation-name:page-next-in}
.book .page-turn-prev .page-turn-out{animation-name:page-prev-out}.book .page-turn-prev .page-turn-in{animation-name:page-prev-in}
.book .page-turn-out::after{background:linear-gradient(90deg,rgba(0,0,0,.36),transparent 35%,rgba(255,255,255,.08) 80%,rgba(0,0,0,.24));animation-name:page-out-shade}
.book .page-turn-in::after{background:linear-gradient(90deg,rgba(0,0,0,.38),transparent 36%,rgba(255,255,255,.12) 78%,rgba(0,0,0,.18));animation-name:page-in-shade}
@keyframes page-next-out{0%{transform:rotateY(0);opacity:1}48%{transform:rotateY(-89deg);opacity:1}49%,100%{transform:rotateY(-89deg);opacity:0}}
@keyframes page-next-in{0%,47%{transform:rotateY(89deg);opacity:0}48%{transform:rotateY(89deg);opacity:1}100%{transform:rotateY(0);opacity:1}}
@keyframes page-prev-out{0%{transform:rotateY(0);opacity:1}48%{transform:rotateY(89deg);opacity:1}49%,100%{transform:rotateY(89deg);opacity:0}}
@keyframes page-prev-in{0%,47%{transform:rotateY(-89deg);opacity:0}48%{transform:rotateY(-89deg);opacity:1}100%{transform:rotateY(0);opacity:1}}
@keyframes page-out-shade{0%{opacity:0}48%{opacity:1}100%{opacity:1}}
@keyframes page-in-shade{0%,48%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.book .page-turn-layer{display:none!important}}

/* 纸页逐步卷起：裁剪旧页并沿折线移动纸背与阴影，露出已解码的新页。 */
.book .page-turn-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;isolation:isolate}
.book .page-curl-sheet{position:absolute;inset:0;overflow:hidden;will-change:clip-path;animation-duration:1.05s;animation-timing-function:cubic-bezier(.45,.02,.28,1);animation-fill-mode:both}
.book .page-curl-sheet img{display:block;width:100%!important;height:100%!important;max-width:none;max-height:none;object-fit:fill;border:0!important}
.book .page-curl-edge{position:absolute;top:-3%;height:106%;width:13%;pointer-events:none;opacity:0;will-change:left,opacity,transform;animation-duration:1.05s;animation-timing-function:cubic-bezier(.45,.02,.28,1);animation-fill-mode:both;border-radius:48% 18% 18% 48%;box-shadow:-12px 0 25px #0007,9px 0 18px #0006}
.book .page-turn-next .page-curl-sheet{animation-name:curl-sheet-next}
.book .page-turn-next .page-curl-edge{background:linear-gradient(90deg,rgba(14,12,20,.15),rgba(244,235,215,.46) 28%,rgba(255,255,255,.8) 43%,rgba(117,103,86,.45) 57%,rgba(0,0,0,.45) 78%,transparent);animation-name:curl-edge-next}
.book .page-turn-prev .page-curl-sheet{animation-name:curl-sheet-prev}
.book .page-turn-prev .page-curl-edge{background:linear-gradient(270deg,rgba(14,12,20,.15),rgba(244,235,215,.46) 28%,rgba(255,255,255,.8) 43%,rgba(117,103,86,.45) 57%,rgba(0,0,0,.45) 78%,transparent);animation-name:curl-edge-prev}
@keyframes curl-sheet-next{0%{clip-path:polygon(0 0,100% 0,100% 25%,100% 50%,100% 75%,100% 100%,0 100%)}25%{clip-path:polygon(0 0,73% 0,82% 25%,86% 50%,82% 75%,73% 100%,0 100%)}55%{clip-path:polygon(0 0,35% 0,44% 25%,48% 50%,44% 75%,35% 100%,0 100%)}100%{clip-path:polygon(0 0,0 0,0 25%,0 50%,0 75%,0 100%,0 100%)}}
@keyframes curl-sheet-prev{0%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 75%,0 50%,0 25%)}25%{clip-path:polygon(27% 0,100% 0,100% 100%,27% 100%,18% 75%,14% 50%,18% 25%)}55%{clip-path:polygon(65% 0,100% 0,100% 100%,65% 100%,56% 75%,52% 50%,56% 25%)}100%{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%,100% 75%,100% 50%,100% 25%)}}
@keyframes curl-edge-next{0%{left:100%;opacity:0;transform:translateX(-50%) scaleX(.3)}12%{opacity:1}85%{opacity:1}100%{left:0;opacity:0;transform:translateX(-50%) scaleX(.55)}}
@keyframes curl-edge-prev{0%{left:0;opacity:0;transform:translateX(-50%) scaleX(.3)}12%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0;transform:translateX(-50%) scaleX(.55)}}
@media(prefers-reduced-motion:reduce){.book .page-turn-layer{display:none!important}.book .page-curl-sheet,.book .page-curl-edge{animation:none!important}}