.book-container{width:100%;min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem}.book{position:relative;width:100%;min-width:380px;max-width:720px;aspect-ratio:3 / 4;margin:0 auto;cursor:pointer;overflow:hidden;border-radius:12px}.page{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;transform-origin:left center;transition:transform .7s cubic-bezier(.4,0,.2,1);border-radius:12px;overflow:hidden;box-shadow:0 4px 20px #00000026;background:linear-gradient(160deg,#2d1b4e,#1a0a2e)}.page.flipped{transform:rotateY(-180deg)}.page-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d}.page-front,.page-back{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}.page-front{border-radius:inherit;overflow:hidden}.page-back{transform:rotateY(180deg);background:transparent;border-radius:12px 0 0 12px}.page-cover{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,#2d1b4e,#1a0a2e);padding:2rem;position:relative}.page-cover-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(255,215,0,.15) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(255,105,180,.1) 0%,transparent 40%);pointer-events:none}.page-cover h1{position:relative;font-size:2rem;font-weight:600;color:#f5e6d3;letter-spacing:.2em;margin-bottom:.5rem;text-shadow:0 2px 20px rgba(255,215,0,.3)}.page-cover .subtitle{position:relative;font-size:.9rem;color:#f5e6d3b3;letter-spacing:.25em;margin-bottom:2rem;font-style:italic}.page-cover .hint{position:relative;font-size:.75rem;color:#f5e6d373;letter-spacing:.15em;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.45}50%{opacity:.8}}.page-content-inner{width:100%;height:100%;background:linear-gradient(180deg,#fdf8f0,#f5e6d3);padding:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.page-content-inner p{font-size:1rem;line-height:1.9;color:#3d2c29}.page-content-inner .from{margin-top:auto;font-size:.9rem;color:#6b5344;font-style:italic;letter-spacing:.1em}.page-photo{width:100%;max-width:100%;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin:.5rem 0;border-radius:8px;overflow:hidden;background:#0000000a}.page-photo img{width:100%;height:100%;object-fit:contain;display:block}.book-controls{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}.btn-prev,.btn-next{padding:.5rem 1rem;font-size:.9rem;font-family:inherit;color:#f5e6d3;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;transition:background .2s,color .2s}.btn-prev:hover,.btn-next:hover{background:#fff3;color:#fff}.page-indicator{font-size:.85rem;color:#f5e6d3cc;min-width:4ch}.app{display:flex;justify-content:center;align-items:center;min-height:100vh}*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;font-family:"Noto Serif SC","Source Han Serif CN",Georgia,serif;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);display:flex;align-items:center;justify-content:center;padding:1rem}#root{width:100%;max-width:800px;min-height:100vh;display:flex;align-items:center;justify-content:center}