*{box-sizing:border-box}body{margin:0;background:#e9e3d8;color:#3b332b;font-family:Microsoft YaHei,sans-serif}header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid #cfc4b3}header strong{font:24px SimSun,serif;letter-spacing:4px}a{color:inherit;text-decoration:none;font-size:12px}button{cursor:pointer;font:inherit;border:1px solid #b9aa94;background:transparent;color:inherit;padding:9px 15px;border-radius:3px}button:hover{background:#ac8a5d22}#stage{height:calc(100dvh - 180px);padding:20px;display:flex;align-items:center;justify-content:center;overflow:hidden}#book{filter:drop-shadow(0 12px 17px #30211038)}.leaf{background:#fff}.leaf img{width:100%;height:100%;object-fit:fill;pointer-events:none}footer{display:flex;align-items:center;justify-content:center;gap:25px;height:55px;font-size:12px}#number{width:50px;font:inherit;background:transparent;border:0;border-bottom:1px solid #a79880;color:inherit;text-align:center;padding:5px}.tip{text-align:center;color:#8f806a;font-size:11px;margin:10px}dialog{max-width:96vw;max-height:95dvh;padding:15px;border:0;background:#e9e3d8}dialog::backdrop{background:#000b}dialog button{display:block;position:sticky;top:0;background:#e9e3d8;margin-bottom:10px}dialog img{display:block;width:min(1240px,86vw)}@media(max-width:650px){header{height:65px;padding:0 14px}header strong{font-size:18px;letter-spacing:1px}#stage{height:calc(100dvh - 170px);padding:10px}footer{gap:10px}button{padding:9px 10px}.tip{font-size:10px}}

.leaf{position:relative}
#book[data-layout="landscape"] .leaf:not([data-density="hard"])::after{content:"";position:absolute;top:0;bottom:0;width:6%;max-width:28px;pointer-events:none;z-index:5}
#book[data-layout="landscape"] .leaf.--left:not([data-density="hard"])::after{right:0;background:linear-gradient(to left,rgba(47,31,18,.14) 0,rgba(60,40,23,.08) 7%,rgba(72,48,26,.035) 26%,rgba(72,48,26,.01) 62%,transparent 100%);border-right:1px solid rgba(38,25,15,.07)}
#book[data-layout="landscape"] .leaf.--right:not([data-density="hard"])::after{left:0;background:linear-gradient(to right,rgba(47,31,18,.12) 0,rgba(60,40,23,.06) 8%,rgba(72,48,26,.025) 30%,transparent 100%);border-left:1px solid rgba(255,249,235,.18)}
.bowed-face{display:none;position:absolute;inset:0;pointer-events:none}
#book[data-layout="landscape"] .leaf.--left.--simple:not([data-density="hard"]){overflow:visible!important}
#book[data-layout="landscape"] .leaf.--left.--simple:not([data-density="hard"])>img{visibility:hidden}
#book[data-layout="landscape"] .leaf.--left.--simple .bowed-face{display:flex;filter:drop-shadow(-1px 5px 3px rgba(53,39,23,.13))}
.bowed-face>span{flex:1;min-width:0;height:100%;background-repeat:no-repeat;transform-origin:center;position:relative}
.bowed-face>span::after{content:"";position:absolute;inset:0;background:var(--paper-light)}
#book[data-layout="landscape"] .leaf.--left.--simple:not([data-density="hard"])::before{content:"";position:absolute;inset:3px 1px -6px -3px;background:repeating-linear-gradient(to bottom,#ece6db 0,#ece6db 2px,#cfc6b8 2px,#cfc6b8 3px);border:1px solid #d7cebf;border-radius:1px 55% 48% 2px / 2px 8px 8px 2px;box-shadow:-1px 4px 5px rgba(50,35,19,.11);pointer-events:none}

body{background:radial-gradient(ellipse at 45% 45%,#f8f4eb,#ded5c5);color:#453a2e}header{height:82px;border-bottom:1px solid #b6a17c45;background:#eee7daba}header strong{font-size:25px;letter-spacing:7px}.brand-note{font-size:10px;letter-spacing:3px;color:#887353}button{border:1px solid #bba88366;border-radius:30px;padding:9px 17px;font-size:12px;transition:background .2s}button:hover{background:#b79a6630}button:focus-visible,input:focus-visible{outline:2px solid #a1753f;outline-offset:3px}#stage{height:calc(100dvh - 210px);padding:22px 30px}footer{gap:15px;margin:4px 0;height:48px}.tip{font-size:10px;letter-spacing:2px;margin:8px}#progress{display:block;width:min(540px,70vw);height:3px;margin:14px auto 0;accent-color:#947345;cursor:pointer}#number{border-color:#b49b74}.toolbar{display:flex;gap:8px;align-items:center}.section-label{font:12px SimSun,serif;letter-spacing:4px;text-align:center;color:#947c56;margin:0;height:18px}.drawer{background:#f2ece0;color:#453a2e;width:min(960px,94vw);max-height:88dvh;padding:0;border:1px solid #baa37d;border-radius:9px}.drawer-head{position:sticky;top:0;background:#f2ece0;display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid #c9b89855;z-index:3}.drawer h2{font:22px SimSun,serif;letter-spacing:4px;margin:0}#thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:18px;padding:24px}#thumbs button{padding:7px;border-radius:3px}#thumbs img{display:block;width:100%;height:auto;aspect-ratio:1240/1683;box-shadow:0 4px 9px #0002}#thumbs span{display:block;font-size:10px;margin:8px 0 0}.chapter-list{padding:18px 24px;display:grid;gap:10px}.chapter-list button{display:flex;justify-content:space-between;border-radius:4px;padding:18px;text-align:left}.chapter-list small{color:#947b55}#message{position:fixed;bottom:95px;left:50%;transform:translateX(-50%);background:#44372be8;color:#fff5e3;border-radius:6px;padding:12px 24px;font-size:12px;z-index:500;opacity:0;pointer-events:none}#message.visible{opacity:1}#zoom{border-radius:6px}#zoom img{max-width:none}#zoomTools{display:flex;gap:12px;position:sticky;top:0;background:#e9e3d8;padding:5px;z-index:5}#zoomTools button{margin:0}#exitZoom{display:none}.bar-title{font:13px SimSun,serif;letter-spacing:3px}.mobile-label{display:inline}@media(max-width:700px){header{height:68px;padding:0 12px}header strong{font-size:19px;letter-spacing:3px}.brand-note{display:none}.toolbar{gap:4px}.toolbar button{padding:8px 10px;font-size:11px}#stage{padding:16px 12px;height:calc(100dvh - 200px)}footer{gap:7px}footer button{padding:9px 10px}#thumbs{grid-template-columns:repeat(3,1fr);gap:10px;padding:12px}.mobile-label{display:none}.tip{letter-spacing:0}.section-label{font-size:10px}}@media(prefers-reduced-motion:reduce){button{transition:none}}

#zoom{padding:0;width:96vw;max-width:1600px;max-height:94dvh}#zoomBar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;background:#ede5d7;z-index:10;border-bottom:1px solid #b7a58755}#zoomBar .zoom-actions{display:flex;gap:8px;align-items:center}#zoomBar button{margin:0;position:static}#zoomBody{overflow:auto;max-height:calc(94dvh - 70px);padding:20px;overscroll-behavior:contain}#zoomBody img{margin:auto;width:min(100%,1240px);display:block}#zoomLabel{font-size:12px;letter-spacing:1px}.dark-zoom #zoomBar{background:#17271f}.dark-zoom #zoomBar button{background:#17271f}.dark-zoom #zoomBody{background:#23362b}.dark-zoom #zoomLabel{color:#dfd1b3}.toolbar button:disabled,footer button:disabled{opacity:.35;cursor:default}
@media(max-width:700px){header{height:auto;min-height:88px;padding:10px 12px;gap:8px;flex-wrap:wrap}.toolbar{flex-wrap:wrap;justify-content:flex-end;gap:5px}#stage{height:calc(100dvh - 235px)}#zoomBar{padding:10px;flex-wrap:wrap}#zoomBody{padding:8px}#zoomBar button{font-size:11px;padding:8px}.opening-bottom{line-height:1.8}.opening-actions{flex-wrap:wrap}}

body{background:radial-gradient(ellipse at 50% 42%,#414c46,#19251f 76%);color:#e2d5b6}header{background:#17271fe8;border-color:#baa47b33}header strong{color:#e4d0a0}.brand-note{color:#a8936c}button{border-color:#bca77566}button:hover{background:#ba9f6428}#number{color:#e4d5b6}#sectionLabel,.tip{color:#bba77e}#book{filter:drop-shadow(0 18px 20px #0007)}#progress{accent-color:#d3b77f}#salonBtn{color:#e5c893}#opening{position:fixed;inset:0;z-index:700;background:radial-gradient(ellipse at 60% 45%,#4d5a4d,#13271d 80%);display:grid;grid-template-columns:minmax(0,440px) minmax(0,500px);justify-content:center;align-items:center;column-gap:clamp(55px,6vw,120px);row-gap:36px;padding:8vh 7vw;overflow:auto}#opening[hidden]{display:none}.opening-copy .overline{font-size:11px;letter-spacing:7px;color:#b7a682}.opening-copy h1{font:58px SimSun,serif;letter-spacing:13px;color:#e4d3ae;line-height:1.5;margin:25px 0}.opening-copy p{font-size:13px;line-height:2.2;color:#c1bba9;letter-spacing:2px}.opening-actions{display:flex;gap:15px;margin-top:35px}.opening-actions button{padding:13px 25px}.opening-actions .primary{background:#c6ad79;color:#203326;border:0}.cover-plinth{perspective:1400px;position:relative;max-width:340px;justify-self:center;width:100%;transform:none;filter:drop-shadow(15px 25px 20px #0007)}.cover-plinth img{width:100%;display:block;transform:rotateY(-17deg) rotateZ(-2deg);border-radius:2px 4px 4px 2px;box-shadow:7px 3px 0 #d0c6b4,12px 5px 0 #b9af9e}.cover-plinth:after{content:"";position:absolute;left:6%;right:-10%;bottom:-30px;height:10px;filter:blur(9px);background:#0008}.opening-bottom{grid-column:1/-1;text-align:center;font-size:10px;letter-spacing:5px;color:#ad9e7a}#exhibitDialog{background:#1c3025;color:#e0cfaa;border-color:#bba47766;width:min(1100px,94vw)}#exhibitDialog .drawer-head{background:#1c3025}#exhibitGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:28px}#exhibitGrid button{padding:0;border:0;border-radius:0;text-align:left}#exhibitGrid img{width:100%;display:block;aspect-ratio:1240/1683;object-fit:cover;box-shadow:0 8px 15px #0005}#exhibitGrid span{font-size:11px;display:block;padding:12px 0;letter-spacing:2px}#autoBtn.playing{background:#c5ab74;color:#1f3325}#zoom.dark-zoom{background:#17271f;color:#e2d5b6}#zoom.dark-zoom button{background:#17271f;color:#e2d5b6}@media(max-width:700px){#opening{grid-template-columns:1fr;padding:6vh 10vw;gap:28px}.opening-copy{text-align:center;order:2}.opening-copy h1{font-size:34px;margin:12px 0}.opening-copy p{font-size:11px}.cover-plinth{width:57%;min-width:190px;order:1;transform:none}.opening-actions{justify-content:center;margin-top:18px}.opening-bottom{order:3;font-size:9px;letter-spacing:2px}.toolbar button{padding:8px 7px}#exhibitGrid{grid-template-columns:repeat(2,1fr);gap:15px;padding:16px}#autoBtn{font-size:11px}}
.cover-plinth{perspective:2200px;max-width:430px;filter:drop-shadow(10px 24px 16px #0006)}.book-model{position:relative;transform-style:preserve-3d;transform:rotateY(12deg);width:100%}.cover-plinth .book-model>img{aspect-ratio:210/285;object-fit:fill;transform:translateZ(15px);border-radius:1px;box-shadow:none;backface-visibility:hidden}.book-spine{position:absolute;top:0;left:-30px;width:30px;height:100%;transform-origin:right center;transform:translateZ(15px) rotateY(-90deg);background-image:url(images/image-001.jpg);background-size:100% 100%;backface-visibility:hidden;filter:brightness(.88)}.book-model:after{content:"";position:absolute;inset:3px -4px 3px 0;background:repeating-linear-gradient(to right,#e9e1d2 0,#e9e1d2 2px,#bfb4a1 2px,#bfb4a1 3px);transform:translateZ(-15px);border:1px solid #a99a82}.cover-plinth:after{bottom:-24px;left:4%;right:0;background:#0006}@media(max-width:700px){.book-spine{width:22px;left:-22px}.book-model{transform:rotateY(10deg)}.cover-plinth{min-width:170px}}