:root{color-scheme:light}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:white}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;-webkit-tap-highlight-color:transparent}.landscape{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;padding:0;background:white}.book{position:relative;width:100%;height:100%;perspective:2400px;isolation:isolate;touch-action:pinch-zoom;outline:none;background:white;cursor:pointer}.book:focus-visible{outline:2px solid #885743;outline-offset:-2px}.fixed-page{position:absolute;top:0;width:50%;height:100%;overflow:hidden;background:white}.left-page{left:0}.right-page{left:50%}.paper{position:relative;width:100%;height:100%;overflow:hidden;background:white;display:flex;align-items:center;justify-content:center}.paper img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.spine{position:absolute;left:calc(50% - 9px);top:0;bottom:0;width:18px;pointer-events:none;background:linear-gradient(90deg,transparent,#6a5a3417 44%,#52462724 49%,#fff7e533 51%,#6a5a340e 55%,transparent);z-index:2}.turn-sheet{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;z-index:5;will-change:transform;pointer-events:none}.turn-sheet.forward{left:50%;transform-origin:left center}.turn-sheet.backward{left:0;transform-origin:right center}.sheet-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:white;overflow:hidden}.sheet-back{transform:rotateY(180deg)}.sheet-face::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#6a543616,transparent 25%,transparent 75%,#6a543614)}.turn-sheet.forward .sheet-front{box-shadow:8px 3px 24px #33231125}.turn-sheet.backward .sheet-front{box-shadow:-8px 3px 24px #33231125}.controls{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));display:flex;gap:1px;padding:4px;border:1px solid #c8c2b88c;border-radius:9px;background:#fffffff0;box-shadow:0 2px 12px #0001;z-index:20;transition:opacity .2s,visibility .2s}.controls.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.controls button{font:inherit;font-size:14px;color:#514b42;background:none;border:0;min-height:40px;padding:8px 13px;cursor:pointer;touch-action:manipulation}.controls button:focus-visible{outline:2px solid #885743}.controls button:disabled{opacity:.4}.notice{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:80%;width:max-content;border-radius:7px;background:#2e2b26e8;color:white;font-size:14px;line-height:1.6;padding:9px 14px;text-align:center;margin:0;pointer-events:none;z-index:22}.book[aria-busy=true]::after{content:'';position:absolute;width:24px;height:24px;border:2px solid #ccc;border-top-color:#885743;border-radius:50%;left:calc(50% - 12px);top:calc(50% - 12px);animation:loading .9s linear infinite;z-index:10}@keyframes loading{to{transform:rotate(360deg)}}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:fullscreen,:-webkit-full-screen{background:white}@media(orientation:portrait){.landscape{inset:auto;left:50%;top:50%;width:100vh;width:100dvh;height:100vw;transform:translate(-50%,-50%) rotate(90deg)}}@media(prefers-reduced-motion:reduce){.turn-sheet,.controls{transition-duration:.01ms!important}.book[aria-busy=true]::after{animation-duration:2s}}
/* Keep facing original pages joined at the spine without stretching or cropping. */
.left-page img,.forward .sheet-back img,.backward .sheet-front img{object-position:right center}.right-page img,.forward .sheet-front img,.backward .sheet-back img{object-position:left center}
/* The interactive layer has exactly the same square bounds as the original artwork. */
.page-art{position:relative;flex:none;width:var(--page-side);height:var(--page-side)}
.left-page .paper,.forward .sheet-back .paper,.backward .sheet-front .paper{justify-content:flex-end}
.right-page .paper,.forward .sheet-front .paper,.backward .sheet-back .paper{justify-content:flex-start}
.text-hint{position:absolute;transform:translate(-50%,-50%);width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:#825842;cursor:pointer;touch-action:manipulation}
.text-hint::before{content:'';position:absolute;width:22px;height:22px;border:1px solid #b89a7c;border-radius:50%;background:#fffdf5ed;box-shadow:0 1px 3px #3c291118}
.text-hint svg{position:relative;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.text-hint:focus-visible{outline:2px solid #885743;outline-offset:1px;border-radius:50%}
.text-hint:active::before{background:#e9dfcd}
.turn-sheet .text-hint{visibility:hidden}
.text-viewer{position:absolute;inset:0;z-index:30;background:#fff;display:flex;flex-direction:column;padding:0;cursor:default}
.text-viewer-bar{flex:none;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:2px max(16px,env(safe-area-inset-right)) 2px max(20px,env(safe-area-inset-left));border-bottom:1px solid #eee8de;background:#fffdf9;color:#817567;font-size:13px}
.text-viewer-bar button{min-height:44px;padding:8px 14px;border:0;background:transparent;font:inherit;font-size:16px;color:#604433;cursor:pointer;touch-action:manipulation}
.text-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch;padding:20px;scrollbar-color:#cdbdaa #f7f3ec}
.text-content{width:100%;max-width:46rem;margin:0 auto;color:#302a24;font-family:"Songti SC","Noto Serif CJK SC","Source Han Serif SC",SimSun,serif;font-size:1.25rem;line-height:1.85;overflow-wrap:anywhere;text-align:justify}.text-content p{margin:0 0 1em;text-indent:2em}.text-content p:last-child{margin-bottom:0}
.text-scroll:focus-visible,.text-viewer-bar button:focus-visible{outline:2px solid #885743;outline-offset:-3px}