*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Noto Serif SC','Microsoft YaHei','PingFang SC',sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;color:#333;margin-top:80px;padding-bottom:100px}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}.poem-detail-card{animation:fadeInUp 0.6s ease-out}.action-buttons{display:flex;justify-content:center;gap:15px;margin-top:20px;padding-top:20px;border-top:1px solid #eee}.action-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;border:none;border-radius:25px;cursor:pointer;font-size:14px;transition:all 0.3s ease;font-family:inherit}.action-btn.favorite{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:white}.action-btn.share{background:linear-gradient(135deg,#4ecdc4,#44a3aa);color:white}.action-btn.print{background:linear-gradient(135deg,#667eea,#764ba2);color:white}.action-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,0.2)}.action-btn.active{background:linear-gradient(135deg,#ff4757,#ff3838)}.annotated-word{border-bottom:2px dotted #8B4513;cursor:pointer;position:relative;transition:color 0.3s;color:#2c3e50}.annotated-word:hover{color:#8B4513;font-weight:bold}.annotation-popup{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#2c3e50,#34495e);color:white;padding:15px 20px;border-radius:12px;font-size:14px;white-space:nowrap;z-index:1000;box-shadow:0 8px 25px rgba(0,0,0,0.3);opacity:0;transform:translateX(-50%) translateY(10px);transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);border-left:3px solid #DAA520;max-width:280px}.annotated-word:hover .annotation-popup{opacity:1;transform:translateX(-50%) translateY(0)}.annotation-title{font-weight:bold;color:#DAA520;margin-bottom:5px;font-size:13px}.annotation-content{line-height:1.6;font-size:13px}.poem-content{font-family:'KaiTi','STKaiti','Noto Serif SC',serif;font-size:24px;line-height:2.5;text-align:center;color:#2c3e50;margin:30px 0;min-height:150px}.poem-char{display:inline-block;opacity:0;transform:translateY(10px);animation:charReveal 0.4s ease-out forwards;position:relative}.poem-char::before{content:'';position:absolute;top:0;left:0;width:0;height:100%;background:linear-gradient(90deg,rgba(139,69,19,0.3),transparent);animation:brushStroke 0.3s ease-out forwards}@keyframes charReveal{to{opacity:1;transform:translateY(0)}}@keyframes brushStroke{to{width:100%}}.poem-char.reading{color:#8B4513;font-weight:bold;transform:scale(1.1);transition:all 0.3s}.section-toggle{cursor:pointer;transition:all 0.3s;padding:15px;background:linear-gradient(135deg,rgba(139,69,19,0.1),rgba(139,69,19,0.05));border-radius:10px;margin-bottom:10px}.section-toggle:hover{background:linear-gradient(135deg,rgba(139,69,19,0.2),rgba(139,69,19,0.1))}.section-content{max-height:0;overflow:hidden;transition:max-height 0.5s cubic-bezier(0.34,1.56,0.64,1);opacity:0}.section-content.open{max-height:500px;opacity:1}.ink-splash{position:absolute;width:100px;height:100px;background:radial-gradient(circle,rgba(44,62,80,0.1),transparent);border-radius:50%;pointer-events:none;z-index:0}.audio-controls{flex:1;margin-left:20px}.progress-bar{width:100%;height:6px;background:#e0e0e0;border-radius:3px;overflow:hidden;cursor:pointer;margin-bottom:10px}.progress-fill{height:100%;background:linear-gradient(90deg,#3498db,#2980b9);width:0%;transition:width 0.1s linear}.time-display{display:flex;justify-content:space-between;font-size:12px;color:#666}.poem-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:15px}.poem-tag{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:white;padding:4px 12px;border-radius:15px;font-size:12px;cursor:pointer;transition:all 0.3s ease}.poem-tag:hover{transform:scale(1.05);box-shadow:0 3px 10px rgba(245,87,108,0.4)}.detail-container{max-width:1200px;margin:0 auto;padding:20px}.back-link{display:inline-block;margin-bottom:20px;color:white;text-decoration:none;font-size:16px;transition:color 0.3s}.back-link:hover{color:#f0f0f0}.cross-links{display:flex;justify-content:center;gap:12px;padding:15px;background:rgba(255,255,255,0.9);border-radius:15px;margin-bottom:20px;flex-wrap:wrap;box-shadow:0 4px 15px rgba(0,0,0,0.1)}.cross-link-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:linear-gradient(135deg,#667eea,#764ba2);color:white;text-decoration:none;border-radius:20px;font-size:14px;font-weight:500;transition:all 0.3s}.cross-link-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,0.4)}.poem-detail-card{background:rgba(255,255,255,0.95);border-radius:20px;padding:40px;margin-bottom:30px;backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,0.1)}.poem-header{text-align:center;margin-bottom:30px}.poem-title{font-size:36px;font-weight:bold;color:#2c3e50;margin-bottom:10px}.poem-author{font-size:18px;color:#666;margin-bottom:20px}.poem-meta{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:30px}.meta-item{background:#f8f9fa;padding:8px 16px;border-radius:20px;font-size:14px;color:#666}.poem-content-section{margin-bottom:40px}.section-title{font-size:20px;font-weight:bold;color:#2c3e50;margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid #3498db}.poem-original{background:#f8f9fa;padding:30px;border-radius:15px;font-family:'SimSun',serif;font-size:18px;line-height:2.5;white-space:pre-wrap;text-align:center}.poem-translation{background:#e8f4fd;padding:30px;border-radius:15px;font-size:16px;line-height:2;margin-top:20px}.poem-notes{background:#f8f9fa;padding:30px;border-radius:15px;font-size:16px;line-height:2;margin-top:20px;border-left:4px solid #3498db}.poem-appreciation{background:#f0f8e8;padding:30px;border-radius:15px;font-size:16px;line-height:2;margin-top:20px;border-left:4px solid #6B8E23}.poem-background{background:#fff3e0;padding:30px;border-radius:15px;font-size:16px;line-height:2;margin-top:20px;border-left:4px solid #e67e22}.poem-audio{background:#f8f9fa;padding:20px;border-radius:15px;margin-top:20px;display:flex;align-items:center;gap:15px}.play-btn{background:#3498db;color:white;border:none;padding:12px 24px;border-radius:25px;cursor:pointer;font-size:16px;transition:all 0.3s}.play-btn:hover{background:#2980b9;transform:translateY(-2px)}.related-recommendations{background:rgba(255,255,255,0.95);border-radius:20px;padding:30px;backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,0.1)}.recommendations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:20px}.recommendation-card{background:#f8f9fa;padding:20px;border-radius:15px;transition:all 0.3s;cursor:pointer}.recommendation-card:hover{transform:translateY(-5px);box-shadow:0 5px 15px rgba(0,0,0,0.1)}.recommendation-title{font-weight:bold;color:#2c3e50;margin-bottom:10px}.recommendation-author{font-size:14px;color:#666;margin-bottom:10px}.recommendation-content{font-size:14px;color:#666;line-height:1.6;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.loading-spinner{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:100px;color:#666}.spinner{width:60px;height:60px;border:6px solid #f3f3f3;border-top:6px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.error-message{text-align:center;padding:100px;color:#666}.error-icon{font-size:64px;margin-bottom:20px}@media (max-width:768px){.detail-container{padding:15px}.poem-detail-card{padding:20px}.poem-title{font-size:28px}.poem-original{padding:20px;font-size:16px}.poem-translation{padding:20px}.recommendations-grid{grid-template-columns:1fr}}.scroll-to-top{position:fixed;bottom:100px;right:30px;width:50px;height:50px;background:linear-gradient(135deg,#667eea,#764ba2);color:white;border:none;border-radius:50%;cursor:pointer;font-size:24px;display:none;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,0.2);transition:all 0.3s ease;z-index:999}.scroll-to-top:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(102,126,234,0.4)}.scroll-to-top.show{display:flex}@media (max-width:768px){.scroll-to-top{bottom:90px;right:20px;width:45px;height:45px;font-size:20px}}.poem-title{animation:titleFadeIn 1s ease-out;background:linear-gradient(135deg,#8B4513,#DAA520);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@keyframes titleFadeIn{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}.poem-line{overflow:hidden}.poem-char{display:inline-block;opacity:0;transform:translateY(5px);animation:charReveal 0.3s ease-out forwards}@keyframes charReveal{to{opacity:1;transform:translateY(0)}}.poet-name{animation:poetNameFade 0.8s ease-out 0.5s backwards}@keyframes poetNameFade{0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:translateX(0)}}.annotation-card{animation:annotationSlide 0.4s cubic-bezier(0.4,0,0.2,1)}@keyframes annotationSlide{0%{opacity:0;transform:translateX(-20px)}100%{opacity:1;transform:translateX(0)}}.annotation-item{transition:all 0.3s ease;cursor:pointer}.annotation-item:hover{background:rgba(218,165,32,0.1);transform:translateX(5px);border-left:3px solid #DAA520}.audio-player{animation:audioFadeIn 0.8s ease-out}@keyframes audioFadeIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}.play-btn{position:relative;overflow:hidden;transition:all 0.3s ease}.play-btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,0.2);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.4s ease-out,height 0.4s ease-out}.play-btn:active::after{width:200%;height:200%}.progress-bar-fill{background:linear-gradient(90deg,#DAA520,#FFD700,#DAA520,#FFD700,#DAA520);background-size:200% 100%;animation:progressFlow 2s linear infinite}@keyframes progressFlow{0%{background-position:0% 50%}100%{background-position:200% 50%}}.favorite-btn{transition:all 0.3s ease}.favorite-btn.favorited{animation:heartBeat 0.5s cubic-bezier(0.68,-0.55,0.265,1.55)}@keyframes heartBeat{0%{transform:scale(1)}25%{transform:scale(1.3)}50%{transform:scale(1)}75%{transform:scale(1.15)}100%{transform:scale(1)}}.share-btn{position:relative;overflow:hidden}.share-btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(218,165,32,0.2);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.4s ease-out,height 0.4s ease-out}.share-btn:active::after{width:200%;height:200%}.poem-card{transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}.poem-card:hover{transform:translateY(-5px);box-shadow:0 12px 35px rgba(139,69,19,0.15)}.scroll-to-top.show{animation:btnBounceIn 0.4s cubic-bezier(0.68,-0.55,0.265,1.55)}@keyframes btnBounceIn{0%{transform:translateY(20px) scale(0);opacity:0}50%{transform:translateY(-5px) scale(1.1);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}.poem-tag{transition:all 0.3s ease;cursor:pointer}.poem-tag:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(218,165,32,0.3)}.related-poem-card{animation:relatedSlideIn 0.4s cubic-bezier(0.4,0,0.2,1) backwards}.related-poem-card:nth-child(1){animation-delay:0.1s}.related-poem-card:nth-child(2){animation-delay:0.2s}.related-poem-card:nth-child(3){animation-delay:0.3s}@keyframes relatedSlideIn{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.reciter-avatar{animation:avatarPulse 2s ease-in-out infinite}@keyframes avatarPulse{0%,100%{box-shadow:0 0 0 0 rgba(218,165,32,0.4)}50%{box-shadow:0 0 0 10px rgba(218,165,32,0)}}.brush-word{display:inline-block;cursor:pointer;position:relative;padding:2px 4px;margin:0 1px;border-radius:4px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);color:#8B4513;font-weight:bold}.brush-word:hover{background:linear-gradient(135deg,rgba(218,165,32,0.2),rgba(255,215,0,0.1));box-shadow:0 0 10px rgba(218,165,32,0.3)}.brush-word.brushed{background:linear-gradient(135deg,#DAA520,#FFD700);color:#5D4037;box-shadow:0 0 15px rgba(218,165,32,0.5);animation:brushStroke 0.5s cubic-bezier(0.68,-0.55,0.265,1.55)}@keyframes brushStroke{0%{transform:scale(0) rotate(-10deg);opacity:0}50%{transform:scale(1.2) rotate(5deg);opacity:1}70%{transform:scale(0.9) rotate(-2deg)}100%{transform:scale(1) rotate(0deg)}}.brush-annotation{position:fixed;background:linear-gradient(135deg,#5D4037,#8D6E63);color:#FFF8E1;padding:12px 20px;border-radius:12px;font-size:15px;font-family:'Noto Serif SC',serif;box-shadow:0 8px 25px rgba(93,64,55,0.4);z-index:10000;max-width:280px;opacity:0;transform:translateY(-10px);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);border:2px solid #DAA520;pointer-events:auto}.brush-annotation::before{content:'';position:absolute;top:-8px;left:20px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #8D6E63}.brush-annotation::after{content:'';position:absolute;top:-6px;left:22px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #DAA520}.poem-char{display:inline-block;opacity:0;transform:translateY(10px);animation:brushWrite 0.4s cubic-bezier(0.25,0.46,0.45,0.94) forwards;color:#3E2723}@keyframes brushWrite{0%{opacity:0;transform:translateY(10px) scale(0.5)}50%{opacity:0.8;transform:translateY(-2px) scale(1.1)}100%{opacity:1;transform:translateY(0) scale(1)}}.poem-original{background:linear-gradient(135deg,#FFF8E1 0%,#FFECB3 100%);border:2px solid #D7CCC8;position:relative;overflow:hidden}.poem-original::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient( transparent,transparent 50px,rgba(139,69,19,0.03) 50px,rgba(139,69,19,0.03) 51px );pointer-events:none}.poem-notes{position:relative}.poem-notes::before{content:'✒️';position:absolute;top:-5px;right:10px;font-size:24px;opacity:0.3}.action-btn.favorite{background:linear-gradient(135deg,#8B4513,#A0522D);position:relative;overflow:hidden}.action-btn.favorite::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,215,0,0.3),transparent);transition:left 0.5s}.action-btn.favorite:hover::after{left:100%}.poem-tag{background:linear-gradient(135deg,#3E2723,#5D4037);border:1px solid #8D6E63;position:relative}.poem-tag::before{content:'';position:absolute;top:2px;left:2px;right:2px;bottom:2px;background:linear-gradient(135deg,rgba(255,255,255,0.1),transparent);border-radius:13px;pointer-events:none}.poem-tag:hover{background:linear-gradient(135deg,#5D4037,#8D6E63);border-color:#DAA520}.tang-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:1000;background:linear-gradient(135deg,#8B4513 0%,#A0522D 50%,#8B4513 100%);border-top:4px solid #FFD700;box-shadow:0 -4px 20px rgba(0,0,0,0.3);padding:8px 0}.bottom-nav-container{display:flex;justify-content:center;align-items:center;gap:6px;max-width:1400px;margin:0 auto;padding:0 10px}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 10px;color:#FFD700;text-decoration:none;border-radius:8px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);background:rgba(255,255,255,0.08);border:1px solid rgba(255,215,0,0.3);position:relative;overflow:hidden;font-family:"SimSun","STSong",serif}.nav-item::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s}.nav-item:hover::before{left:100%}.nav-item:hover{background:linear-gradient(135deg,#DAA520,#FFD700);color:#5D4037;border-color:#FFD700;transform:translateY(-2px);box-shadow:0 4px 15px rgba(255,215,0,0.4)}.nav-item.special-link{background:linear-gradient(135deg,rgba(255,215,0,0.3),rgba(255,165,0,0.3));border-color:#FFD700;animation:glow 2s infinite}.nav-item.special-link:hover{background:linear-gradient(135deg,#FFD700,#FFA500);animation:none}@keyframes glow{0%,100%{box-shadow:0 0 5px #FFD700}50%{box-shadow:0 0 20px #FFD700,0 0 30px #FFA500}}.nav-icon{font-size:18px;margin-bottom:2px}.nav-text{font-size:11px;font-weight:500;white-space:nowrap}body{padding-bottom:90px}.ih-pdbjr4{display:none}.ih-1bylpw6{margin-top:30px;padding:25px;background:#fffef8;border-radius:15px;box-shadow:0 4px 15px rgba(0,0,0,0.08);border-left:4px solid #3498db}.ih-1pv0ode{color:#3498db;margin-bottom:15px;font-size:18px}.ih-1y8msbs{margin-bottom:15px}.ih-1vbrzpd{color:#2980b9;margin-bottom:8px;font-size:15px}.ih-155qddl{font-size:14px;color:#666;line-height:1.8}.ih-1txpkux{color:#3498db;text-decoration:none}.ih-1y9716f{text-align:center;padding:10px 0;font-size:14px;color:#666}.ih-cttmqt{margin:5px 0}.ih-1swgkdw{color:#1a73e8;text-decoration:none}