*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:"Microsoft YaHei",sans-serif;color:#087bb9;background:#e3ecec}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:3px solid #b9783a;outline-offset:4px}
#book{width:100%;height:100dvh;background:radial-gradient(ellipse at 30% 15%,#f8f7ed,#e0e9eb);position:relative;overflow:hidden;touch-action:none}
#map{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;pointer-events:none;transition:opacity .15s}#book[data-page="map"] #map{opacity:1;pointer-events:auto}
#scene{position:absolute;perspective:6000px;perspective-origin:40% 45%;touch-action:none;user-select:none}#paper{width:100%;height:100%;transform-style:preserve-3d;filter:drop-shadow(1px 12px 13px #24495c30)}
.strip{position:absolute;top:0;height:100%;transform-style:preserve-3d;transform-origin:left center}.face{position:absolute;inset:0;backface-visibility:hidden;background-repeat:no-repeat}.front{background-image:url('assets/cover-preview.png')}.back{transform:rotateY(180deg);background:#f8f7ed;background-image:linear-gradient(90deg,#adc0c012,transparent 70%)}.face:after{content:'';position:absolute;inset:0;background:rgba(30,58,69,var(--shade,0));pointer-events:none}
#corner{position:absolute;right:0;bottom:0;width:48px;height:48px;border:0;background:linear-gradient(135deg,transparent 50%,#d5e4e7 51%,#f9faf3 75%);filter:drop-shadow(-2px -2px 2px #315e7325);padding:15px 0 0 15px;touch-action:none}#corner span{font-size:16px}
.reader-controls{position:fixed;z-index:10;bottom:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:0;border:1px solid #9ec0cd;background:#fffdf4ed;box-shadow:0 3px 14px #315e7315;white-space:nowrap;font-size:11px}.reader-controls>span{padding:10px 15px;opacity:.7}.reader-controls button{background:none;border:0;border-left:1px solid #bad0d8;padding:10px 14px}.reader-controls button:hover,.small-control:hover{background:#e5eff0}.small-control{position:fixed;z-index:10;left:18px;top:18px;background:#fffdf4ed;border:1px solid #9ec0cd;padding:10px 15px;font-size:12px}#book[data-page="map"] #scene{visibility:hidden}
@media(max-width:600px){.reader-controls{bottom:10px}.reader-controls>span{padding:9px}.reader-controls button{padding:9px 10px}.small-control{left:12px;top:12px}}

#map{inset:auto;border:0;background:#f8f7ed;transition:none;box-shadow:0 12px 32px #315e7326}
#scene{z-index:2}
.back{background-image:url('assets/map-spread.png');background-repeat:no-repeat}
#return-corner{position:absolute;z-index:5;width:44px;height:44px;padding:14px 14px 0 0;border:0;touch-action:none;background:linear-gradient(225deg,transparent 50%,#d5e4e7 51%,#f9faf3 75%);filter:drop-shadow(2px -2px 2px #315e7325)}
.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}
#book[data-page="cover"] #map,#book[data-page="turning"] #map{opacity:1}

#page-shadow{position:absolute;z-index:1;pointer-events:none;transform-origin:left center;background:linear-gradient(90deg,#173440a6,#17344033 65%,transparent);border-radius:0 30% 30% 0}
#paper{filter:drop-shadow(2px 8px 8px #24495c20)}
/* A single image is used at rest, so no composited strip seams reach the cover. */
#flat-cover{position:absolute;inset:0;display:block;width:100%;height:100%;user-select:none;pointer-events:none;box-shadow:2px 8px 18px #24495c20}
#paper{filter:none}
#book[data-page="cover"] #paper{visibility:hidden}
#book[data-page="turning"] #flat-cover,#book[data-page="map"] #flat-cover{visibility:hidden}
.face{background-color:#f8f7ed}
#scene{cursor:grab}#book[data-page="turning"] #scene{cursor:grabbing}
#book[data-page="turning"] .strip{will-change:transform}
.face:after{background:#1e3a45;opacity:var(--shade,0);will-change:opacity}
/* Shared spread surfaces: section and atlas have identical physical page sizes. */
.spread-frame{position:absolute;inset:auto;border:0;background:#f8f7ed;opacity:1;pointer-events:none;box-shadow:0 12px 32px #315e7326}
#book[data-page="section"] #section,#book[data-page="map"] #map{pointer-events:auto}
#book[data-page="section"] #scene{visibility:hidden}
#book[data-page="section"] #flat-cover{visibility:hidden}
#scene{z-index:3}#page-shadow{z-index:2}
#forward-surface{position:absolute;z-index:4;cursor:grab;touch-action:none;outline-offset:4px}
.surface-corner{position:absolute;right:0;bottom:0;display:grid;place-items:end;width:44px;height:44px;padding:0 4px 4px 0;background:linear-gradient(135deg,transparent 50%,#d5e4e7 51%,#f9faf3 75%);filter:drop-shadow(-2px -2px 2px #315e7325);font-size:16px}

#book[data-page="section-02"] #section-02{pointer-events:auto}
#book[data-page="section-02"] #scene,#book[data-page="section-02"] #flat-cover{visibility:hidden}

/* Every settled spread uses its live iframe; the paper mesh is only visible in flight. */
#book:not([data-page="cover"]):not([data-page="turning"]) #scene,#book:not([data-page="cover"]):not([data-page="turning"]) #flat-cover{visibility:hidden}
.spread-frame:not([inert]){pointer-events:auto}