*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(135deg,#f5f3e6,#e8e2d0);font-family:Microsoft YaHei,SimSun,serif;overflow:hidden;min-height:100vh;display:flex;justify-content:center;align-items:center}.app{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;position:relative;background:linear-gradient(135deg,#f5f3e6,#e8e2d0)}.poem-book{width:90%;max-width:480px;height:80vh;background:#fff;border-radius:8px;box-shadow:0 20px 60px #00000026,0 4px 12px #0000001a;position:relative;overflow:hidden;border:1px solid #d4c9a6;background-image:linear-gradient(rgba(180,160,120,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(180,160,120,.1) 1px,transparent 1px);background-size:20px 20px}.page{width:100%;height:100%;display:flex;flex-direction:column;transition:all .8s cubic-bezier(.4,0,.2,1);position:absolute;top:0;left:0;opacity:0;transform:translate(100%) rotateY(-30deg);z-index:1;backface-visibility:hidden;perspective:1000px;background:#fffffff2;border-radius:8px}.page.active{opacity:1;transform:translate(0) rotateY(0);z-index:10}.page.prev{opacity:0;transform:translate(-100%) rotateY(30deg);z-index:5}.cover{background:linear-gradient(135deg,#8b4513,sienna);color:#fff;display:flex;justify-content:center;align-items:center;text-align:center;box-shadow:inset 0 0 100px #0000004d;border:2px solid #654321}.cover-content{padding:40px}.cover-title{font-size:36px;font-weight:700;margin-bottom:20px;text-shadow:2px 2px 4px rgba(0,0,0,.5);font-family:SimSun,serif;letter-spacing:2px}.cover-subtitle{font-size:18px;margin-bottom:40px;opacity:.9;font-style:italic}.cover-decoration{margin-top:40px}.scroll-prompt{font-size:16px;opacity:.8;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:.8}50%{opacity:1}}.back-cover{background:linear-gradient(135deg,sienna,#8b4513);color:#fff;display:flex;justify-content:center;align-items:center;text-align:center;box-shadow:inset 0 0 100px #0000004d;border:2px solid #654321}.back-cover-title{font-size:32px;font-weight:700;margin-bottom:20px;text-shadow:2px 2px 4px rgba(0,0,0,.5);font-family:SimSun,serif}.back-cover-subtitle{font-size:18px;opacity:.9}.video-container{width:100%;position:relative;background:#000;overflow:hidden;flex:1}.video-container:before{content:"";display:block;padding-top:177.78%}.video-container video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;transition:transform .3s ease}.poem-content{width:100%;padding:20px;background:#ffffffe6;border-radius:0 0 8px 8px;box-shadow:inset 0 2px 8px #0000000d;transition:all .3s ease;min-height:200px;display:flex;flex-direction:column;justify-content:center}.poem-title{font-size:20px;font-weight:700;margin-bottom:15px;color:#8b4513;text-align:center;font-family:SimSun,serif;border-bottom:1px solid #d4c9a6;padding-bottom:10px}.poem-text{font-size:16px;line-height:1.8;color:#333;text-align:center;font-family:SimSun,serif;background:#f5f3e680;padding:15px;border-radius:4px;border:1px solid #e8e2d0}.poem-line{display:block;margin:0 auto 5px;text-align:center;max-width:100%;white-space:normal;overflow-wrap:break-word;word-break:break-word}.navigation{position:absolute;top:70%;transform:translateY(-50%);width:100%;display:flex;justify-content:space-between;padding:0 10px;z-index:20}.nav-btn{background:#ffffffe6;border:1px solid #d4c9a6;width:40px;height:40px;border-radius:50%;font-size:20px;cursor:pointer;box-shadow:0 2px 8px #0000001a;transition:all .3s ease;display:flex;justify-content:center;align-items:center;color:#8b4513;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-family:SimSun,serif}.nav-btn:hover:not(:disabled){background:#fff;transform:scale(1.1);box-shadow:0 4px 12px #00000026;border-color:#8b4513}.nav-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.page-info{position:fixed;top:10px;right:10px;background:#ffffffe6;padding:6px 12px;border-radius:20px;font-size:14px;color:#8b4513;box-shadow:0 2px 8px #0000001a;z-index:100;font-weight:500;border:1px solid #d4c9a6}.volume-btn{position:absolute;top:10px;left:10px;background:#fffffff2;border:1px solid rgba(139,69,19,.2);color:#8b4513;width:36px;height:36px;border-radius:50%;font-size:18px;box-shadow:0 2px 8px #00000026;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center}.volume-btn:hover{background:#fff;border-color:#8b451380;transform:scale(1.1);box-shadow:0 4px 12px #0003}.volume-btn:active{transform:scale(.95)}@media(max-width:768px){.volume-btn{width:32px;height:32px;top:8px;left:8px;box-shadow:0 2px 6px #0000001f}.volume-btn svg{width:16px;height:16px}}.volume-icon{width:20px;height:20px;transition:all .2s ease}.volume-btn:hover .volume-icon{transform:scale(1.1)}.volume-btn:active .volume-icon{transform:scale(.9)}@media(max-width:768px){.poem-book{width:95%;height:90vh}.cover-title{font-size:28px}.cover-subtitle{font-size:16px}.poem-title{font-size:18px}.poem-text{font-size:15px}.nav-btn{width:36px;height:36px;font-size:18px}}@media(orientation:landscape){.poem-book{max-width:90%;height:90vh;flex-direction:row}.video-container{width:50%;padding-top:0;height:100%}.poem-content{width:50%;border-radius:0 8px 8px 0;margin-top:0;display:flex;flex-direction:column;justify-content:center}.cover,.back-cover{flex-direction:column}}@media(prefers-color-scheme:dark){body,.app{background:linear-gradient(135deg,#2c2c2c,#1a1a1a)}.poem-book{background:#2c2c2c;border-color:#444;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:20px 20px}.page{background:#2c2c2cf2}.poem-content{background:#373737e6}.poem-title{color:#d4a76a;border-bottom-color:#444}.poem-text{color:#e0e0e0;background:#3c3c3c80;border-color:#444}.nav-btn{background:#3c3c3ce6;border-color:#555;color:#d4a76a}.nav-btn:hover:not(:disabled){background:#444;border-color:#d4a76a}.page-info{background:#3c3c3ce6;color:#d4a76a;border-color:#555}}