*{box-sizing:border-box} :root{--purple:#503966;--ink:#33283e;--muted:#948a9b;--line:#e1dce5}body{margin:0;background:#f6f4f7;color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ae85cc;outline-offset:5px}button{color:inherit}button:disabled{opacity:.22;cursor:default}.header{height:102px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin:0 5%}.brand{display:flex;gap:10px;text-decoration:none;color:var(--purple);align-items:center}.brand strong{font:600 24px Georgia,serif;letter-spacing:2px}.brand small{display:block;text-align:center;font-size:10px;margin-top:4px;letter-spacing:3px}.monogram{border:1px solid #7c628e;border-radius:50%;width:43px;height:43px;display:grid;place-items:center;font:italic 35px Georgia,serif}.edition{font-size:10px;letter-spacing:2px;color:#7d7188}.edition span{padding:0 12px;color:#baaac8}.icon-button{border:1px solid var(--line);background:transparent;border-radius:50%;width:40px;height:40px;font-size:25px}.intro{text-align:center;margin:35px 0 27px}.eyebrow{font-size:9px;letter-spacing:3px;color:#9886a8}h1{font-weight:400;font-family:"Songti SC","SimSun",serif;font-size:29px;letter-spacing:5px;margin:12px 0}.intro p{font-size:10px;letter-spacing:4px;color:#9d92a4;margin:0}.reader{position:relative;display:flex;align-items:center;justify-content:center;gap:26px;padding:0 4%}.stage{position:relative;width:min(1040px,calc((100dvh - 390px)*1.474));min-width:300px;aspect-ratio:1190.55/807.874;perspective:2000px;filter:drop-shadow(0 16px 24px #3d285c20)}.book{position:absolute;inset:0;background:#fff}.book>img,.sheet>img{width:100%;height:100%;display:block;object-fit:contain}.sheet{position:absolute;inset:0;transform-origin:left center;backface-visibility:hidden;box-shadow:0 0 0 transparent;pointer-events:none;display:none}.sheet.animating{display:block;animation:turn .65s cubic-bezier(.24,.55,.28,1) forwards}.sheet.reverse{animation:back .65s cubic-bezier(.24,.55,.28,1) forwards}@keyframes turn{0%{transform:rotateY(0);filter:brightness(1)}100%{transform:rotateY(-95deg);filter:brightness(.65)}}@keyframes back{0%{transform:rotateY(-95deg);filter:brightness(.65)}100%{transform:rotateY(0);filter:brightness(1)}}#zoomArea{position:absolute;inset:0;background:transparent;border:0;cursor:zoom-in}.arrow{flex-shrink:0;width:46px;height:46px;border-radius:50%;border:1px solid #d8d0df;background:#ffffff70;color:var(--purple);font:35px Georgia,serif;transition:background .2s,transform .2s}.arrow:hover:enabled{background:var(--purple);color:white;transform:scale(1.06)}.toolbar{display:flex;align-items:center;justify-content:space-between;width:min(1040px,calc(100% - 220px));margin:23px auto 14px}.text-button{border:0;background:none;color:#766382;font-size:11px;padding:5px 0;letter-spacing:1px}.text-button span{font-size:17px;vertical-align:-1px;margin-right:7px}.pagination{display:flex;gap:13px;align-items:center;font:12px Arial,sans-serif;color:#93849e}.pagination input{appearance:textfield;-moz-appearance:textfield;width:31px;text-align:center;border:0;border-bottom:1px solid #d3c5dd;background:transparent;color:var(--purple);font:14px Arial;padding:5px 0}.pagination input::-webkit-inner-spin-button{appearance:none}.slash{color:#c3b8cb}.progress{height:2px;background:#e6e0ea;width:min(1040px,calc(100% - 220px));margin:auto}#progressFill{height:100%;background:#8b6da1;width:8.333%;transition:width .5s}.hint{font-size:10px;color:#a59baa;text-align:center;letter-spacing:.5px;margin:17px 0 26px}.hint span{margin:0 9px;color:#c1b8c8}footer{margin:30px 5% 0;border-top:1px solid var(--line);padding:20px 0;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:#a297aa}.thumbnails{width:min(1040px,90%);margin:26px auto;display:grid;grid-template-columns:repeat(6,1fr);gap:18px}.thumbnails[hidden]{display:none}.thumb{border:1px solid transparent;background:transparent;padding:5px;color:#9c8eaa;font-size:11px;border-radius:3px}.thumb img{width:100%;display:block;aspect-ratio:1190.55/807.874;object-fit:contain;background:white;box-shadow:0 3px 8px #3b264c10;margin-bottom:8px}.thumb[aria-current=true]{border-color:#987aaa;color:#503966;background:#ece6f1}.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}dialog{border:0;padding:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;background:#29222f;color:#f4edf9}dialog::backdrop{background:#29222f}.zoom-toolbar{height:65px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #ffffff20;font-size:13px}.zoom-toolbar button{border:1px solid #ffffff25;background:transparent;color:white;padding:7px 12px;margin-left:8px;border-radius:4px}#zoomScroll{height:calc(100dvh - 104px);overflow:auto;padding:24px;display:block}#zoomImage{display:block;width:auto;height:auto;max-width:100%;max-height:100%;margin:auto;box-shadow:0 10px 35px #0003}.zoom-hint{text-align:center;font-size:11px;color:#b6a9c1;margin:8px}#error{position:absolute;inset:0;display:grid;place-content:center;background:#fff;color:#655170;font-size:14px}#error[hidden]{display:none}#retry{background:var(--purple);color:white;border:0;padding:10px;margin-top:15px}body:has(dialog[open]){overflow:hidden}:fullscreen{background:#f6f4f7}
@media(min-width:1400px){.intro{margin-top:40px}}@media(max-width:700px){.header{height:80px}.brand strong{font-size:20px}.brand small{font-size:8px}.monogram{width:35px;height:35px;font-size:28px}.edition{font-size:9px;letter-spacing:1px}.edition span{display:none}.edition{max-width:80px;text-align:center;line-height:1.7}.intro{margin:35px 0 30px}h1{font-size:25px}.eyebrow{font-size:8px}.reader{padding:0 15px;display:block}.stage{width:100%;min-width:0}.arrow{position:absolute;z-index:2;top:calc(100% + 19px);width:34px;height:34px;font-size:27px}.prev{left:calc(50% - 100px)}.next{right:calc(50% - 100px)}.toolbar{width:calc(100% - 36px);margin-top:22px}.text-button{font-size:10px;letter-spacing:0}.text-button span{margin-right:3px}.pagination{gap:8px}.progress{width:calc(100% - 36px);margin-top:20px}.hint{font-size:9px;padding:0 20px;line-height:2;margin-top:15px}.hint span{margin:0 3px}.thumbnails{grid-template-columns:repeat(3,1fr);gap:12px}footer{font-size:8px;margin-top:50px;letter-spacing:.5px}.zoom-toolbar{padding:0 12px}.zoom-toolbar button{margin-left:3px;padding:6px 9px}#zoomScroll{padding:12px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition:none!important}}
/* A physical book: a fixed spine and twelve double-sided paper sheets. */
.stage{perspective:2400px;filter:none;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.book{background:transparent;transform-style:preserve-3d;isolation:auto}
.paper{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;will-change:transform;cursor:grab}
.paper.turning{cursor:grabbing}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;overflow:hidden;box-shadow:0 3px 5px #30203c20,0 12px 25px #36234418;transform:rotateY(0deg) translateZ(.1px)}
.face.back{transform:rotateY(180deg) translateZ(.1px)}
.face img{width:100%;height:100%;object-fit:fill;display:block;pointer-events:none}
.paper-shade{position:absolute;inset:0;pointer-events:none;transition:opacity .4s;opacity:.35;background:linear-gradient(90deg,#25142c26,transparent 10%,transparent 94%,#25142c0a)}
.back .paper-shade{background:linear-gradient(270deg,#25142c30,transparent 12%,transparent 96%,#25142c0a)}
.turning .paper-shade{opacity:1;background:linear-gradient(90deg,#1c092f59,transparent 35%,#ffffff12 70%,#26123630)}
.turning .back .paper-shade{background:linear-gradient(270deg,#1c092f59,transparent 35%,#ffffff12 70%,#26123630)}
.spine{position:absolute;left:calc(50% - 3px);width:6px;top:0;height:100%;background:linear-gradient(90deg,#26123800,#26123828,#26123800);pointer-events:none;transform:translateZ(2px);z-index:30;opacity:0;transition:opacity .6s}
.is-open .spine{opacity:1}
.at-front .paper:first-of-type .front{border-radius:0 2px 2px 0}
.thumbnails{grid-template-columns:repeat(8,1fr)}
.thumb img{aspect-ratio:595.275/807.874}
.pagination input{width:25px}.pagination{gap:8px;white-space:nowrap}
@media(min-width:701px){.stage{width:min(1140px,calc((100dvh - 355px)*1.474))}.intro{margin:23px 0}.intro h1{font-size:25px}.toolbar,.progress{width:min(1140px,calc(100% - 220px))}}
@media(max-width:700px){.thumbnails{grid-template-columns:repeat(4,1fr)}.hint{font-size:9px}.pagination{font-size:10px;gap:5px}.pagination input{font-size:12px}.toolbar{width:calc(100% - 30px)}.reader{padding:0 12px}.prev{left:calc(50% - 82px)}.next{right:calc(50% - 82px)}}

.face{box-shadow:0 1px 2px #30203c0a}.paper.exposed .face,.paper.turning .face{box-shadow:0 3px 5px #30203c18,0 12px 25px #36234420}
.brand-logo{display:block;width:168px;height:auto;object-fit:contain}.intro h1{margin:12px 0 14px;line-height:0}.intro-logo{display:block;width:250px;max-width:70vw;height:auto;margin:auto;object-fit:contain}
@media(min-width:701px){.stage{width:min(1140px,calc((100dvh - 395px)*1.474))}}
@media(max-width:700px){.brand-logo{width:142px}.intro-logo{width:220px}.intro{margin:28px 0 26px}.intro h1{margin:13px 0 16px}}