:root{font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:#3f4653;background:#fff;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;height:100svh;min-height:440px;display:flex;flex-direction:column;overflow-x:hidden;background:#fff}
button,a,input{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,#book:focus-visible{outline:1px solid #e3d5b0;outline-offset:5px}
header{display:none}
.wordmark{display:flex;align-items:center;gap:19px;font:23px "SimSun",serif;letter-spacing:5px;text-decoration:none;color:#f0efe6}
.wordmark span{font:9px "Segoe UI",sans-serif;letter-spacing:3px;color:#b7bfcd;border-left:1px solid #a1a9b640;padding-left:19px}
.edition{font-size:10px;letter-spacing:2px;color:#b1b9cc}
main{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:0 0 6px}
.stage{position:relative;flex-shrink:0;min-height:0;display:flex;justify-content:center;align-items:center;overflow:hidden}
.book{position:relative;flex-shrink:0;touch-action:none;cursor:grab;user-select:none;isolation:isolate}
.book.dragging{cursor:grabbing}
#paper{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;filter:drop-shadow(0 0 2px #3d46502e) drop-shadow(0 4px 7px #3d465024) drop-shadow(0 12px 18px #3d465014)}
.floating-shadow{position:absolute;left:12%;right:12%;bottom:1%;height:9%;background:radial-gradient(ellipse,#48515f38 0,#65708020 38%,transparent 73%);filter:blur(16px);transform:scaleY(.58);z-index:0}
nav{display:flex;align-items:center;justify-content:center;gap:15px;height:46px;flex-shrink:0;position:relative;z-index:2}
.arrow{display:grid;place-items:center;width:34px;height:34px;background:transparent;border:1px solid #5961712e;border-radius:50%;transition:background .2s,opacity .2s;color:#454d5c}
.arrow:hover:not(:disabled){background:#5961710d}
.arrow:disabled{opacity:.22;cursor:default}
.arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4}
#page-number{font:15px Georgia,serif;letter-spacing:1px;min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.page-total{font:12px Georgia,serif;letter-spacing:1px;color:#8d95a3;margin-left:-9px;margin-right:7px}
.hint{text-align:center;font-size:10px;letter-spacing:2px;color:#788292;margin:12px 0 9px;transition:opacity .2s}
body.turning .hint{opacity:.35}
footer{display:none}
.options{display:flex;gap:25px}
.slow{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:10px;position:relative;white-space:nowrap}
.slow input{position:absolute;opacity:0;width:27px;height:18px;left:0;margin:0}
.switch{height:14px;width:25px;border:1px solid #b4bdd180;border-radius:20px;position:relative;transition:background .2s}
.switch:after{content:"";position:absolute;left:3px;top:3px;width:6px;height:6px;border-radius:50%;background:#b6bfd0;transition:transform .2s}
.slow input:checked+.switch{background:#dadccc;border-color:#dadccc}
.slow input:checked+.switch:after{background:#586176;transform:translateX(11px)}
.slow input:focus-visible+.switch{outline:1px solid #e4d4a8;outline-offset:5px}
#reset{font-size:10px;letter-spacing:1px;padding:5px 0;background:none;border:0;color:#b2bcd0;white-space:nowrap}
#reset span{font-size:14px;margin-left:6px}
.inspection{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px auto 0;padding:12px 18px;border:1px solid #5961711f;border-radius:8px;font-size:10px;color:#697383;max-width:calc(100% - 30px)}
[hidden]{display:none!important}
#phase{width:150px;accent-color:#d5d9c9;height:15px;cursor:ew-resize}
#phase-value{width:31px;font-variant-numeric:tabular-nums}
.guide-toggle{display:flex;gap:5px;align-items:center;white-space:nowrap;cursor:pointer}
.guide-toggle input{accent-color:#d5d9c9}
#fallback{position:absolute;bottom:12px;font-size:11px;color:#eee}
.no-webgl:after{content:"";position:absolute;inset:9% 21% 12%;border-radius:9px;background:linear-gradient(90deg,#fafbf8 49.7%,#d3d5cd 50%,#f6f7f3 50.3%);box-shadow:0 20px 35px #131a3233}
@media(max-width:600px){header{height:72px;padding:0 7%}.wordmark{font-size:22px;gap:12px}.wordmark span{font-size:8px;letter-spacing:2px;padding-left:12px}.edition{font-size:9px;letter-spacing:1px}main{padding-bottom:20px}.stage{overflow:visible}.hint{font-size:10px;letter-spacing:1px;margin-top:14px}footer{padding:20px 7% 24px;font-size:9px;flex-wrap:wrap;justify-content:center;gap:18px}.footer-note{display:none}.options{gap:20px}.slow,#reset{font-size:10px}.inspection{gap:7px;padding:10px 12px;flex-wrap:wrap}#phase{width:115px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}