*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}*:focus{outline:none}html{background-color:#888}body{width:100vw;height:100vh;overflow:hidden;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;position:relative;border:20px solid #211f20;box-sizing:border-box;background-color:#651c16;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px),repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(0,0,0,.03) 3px,rgba(0,0,0,.03) 6px)}body:before{content:"";position:fixed;top:20px;left:20px;width:calc(100% - 40px);height:calc(100% - 40px);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");opacity:.4;pointer-events:none;z-index:100;mix-blend-mode:overlay}body:after{content:"";position:fixed;top:20px;left:20px;width:calc(100% - 40px);height:calc(100% - 40px);background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,.02) 1px,rgba(0,0,0,.02) 2px),repeating-linear-gradient(90deg,transparent,transparent 1px,rgba(0,0,0,.02) 1px,rgba(0,0,0,.02) 2px);pointer-events:none;z-index:98}.split-bg{position:fixed;top:20px;left:20px;width:calc(100% - 40px);height:calc(100% - 40px);display:flex;z-index:2;overflow:hidden}.left-panel{width:50%;height:100%;background-color:#bd4f26;position:relative}.left-panel:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px),repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(0,0,0,.03) 3px,rgba(0,0,0,.03) 6px)}.right-panel{width:50%;height:100%;background-color:#e8cab2;position:relative}.right-panel:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(0,0,0,.06) 2px,rgba(0,0,0,.06) 4px),repeating-linear-gradient(-45deg,transparent,transparent 3px,rgba(0,0,0,.03) 3px,rgba(0,0,0,.03) 6px)}.welcome-text{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:8vw;font-weight:700;font-family:Bebas Neue,sans-serif;color:#211f20;display:flex;gap:.1em;z-index:10;letter-spacing:.05em;text-shadow:2px 2px 4px rgba(0,0,0,.15)}.letter{opacity:0;position:relative}.letter:before{content:attr(data-letter);position:absolute;top:0;left:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='textNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23textNoise)'/%3E%3C/svg%3E");background-clip:text;-webkit-background-clip:text;opacity:.15;mix-blend-mode:multiply}.page{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .3s ease}.page.active{opacity:1;pointer-events:auto}#home-page{overflow:hidden}#home-page .navbar{position:fixed;top:20px;left:20px;right:20px;height:80px;display:flex;justify-content:space-between;align-items:center;padding:0 40px;z-index:101}#home-page .logo{font-family:"Noto Serif SC",serif;font-size:2.5rem;color:#e8cab2;letter-spacing:.1em;text-shadow:2px 2px 4px rgba(0,0,0,.3);opacity:0;font-weight:600}#home-page .nav-links{display:flex;gap:40px}#home-page .nav-link{font-family:"Noto Serif SC",serif;font-size:1.5rem;color:#e8cab2;letter-spacing:.05em;text-shadow:1px 1px 2px rgba(0,0,0,.3);opacity:0;font-weight:500;cursor:pointer;transition:all .3s ease}#home-page .nav-link:hover{color:#fff;transform:scale(1.05)}#home-page .nav-link.active{color:#fff}.sections-container{position:fixed;top:0;left:0;width:100%;height:100%;transition:transform .8s cubic-bezier(.65,0,.35,1)}.content-section{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .8s ease;visibility:hidden}.content-section.active{opacity:1;pointer-events:auto;visibility:visible}.section-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#e8cab2;font-family:"Noto Serif SC",serif;max-width:1100px;padding:40px}.section-content h1{font-size:2rem;margin-bottom:30px;letter-spacing:.1em;font-weight:600}.section-content p{font-size:1.4rem;line-height:1.9;letter-spacing:.05em;margin-bottom:20px;text-align:center}.section-content .story-text{font-size:1.7rem;margin-top:40px;margin-bottom:20px;text-align:center;font-weight:500}.arrow-down-icon{width:3rem;height:3rem;margin:20px auto 0;cursor:pointer;transition:transform .3s ease,opacity .5s ease,filter .3s ease;opacity:1;animation:float 2s ease-in-out infinite;display:block}.arrow-down-icon:hover{transform:scale(1.2);filter:brightness(1.2)}.content-section:not(.active) .arrow-down-icon{opacity:0}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(15px)}}@media(max-width:768px){.section-content{width:90%;padding:20px}.section-content h1{font-size:1.5rem}.section-content p{font-size:1rem}.section-content .story-text{font-size:1.3rem}}.character-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:85%;max-width:1400px;height:85%;display:flex;gap:30px;justify-content:center}.character-list{width:150px;height:90%;display:flex;flex-direction:column;gap:20px;padding:40px 0 20px;position:relative;z-index:10;overflow-y:auto;overflow-x:hidden}.character-list::-webkit-scrollbar{width:0;display:none}.character-btn{width:100%;min-height:120px;border:3px solid transparent;cursor:pointer;transition:all .3s ease;overflow:hidden;background:#211f20}.character-btn img{width:100%;height:auto;object-fit:contain;transition:transform .3s ease}.character-btn:hover{border-color:#e8cab2}.character-btn:hover img{transform:scale(1.1)}.character-btn.active{border-color:#e8cab2;box-shadow:0 0 15px #e8cab280}.character-detail{flex:1;position:relative;background:transparent;border:none}.character-info{position:absolute;width:100%;height:100%;display:block;opacity:0;pointer-events:none;transition:opacity .5s ease}.character-info.active{opacity:1;pointer-events:auto}.character-image{position:absolute;left:150px;top:0;right:480px;height:100%;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;pointer-events:none}.img-wrapper{position:relative;display:inline-block}.character-image img{object-fit:contain;pointer-events:none;position:relative;display:block}.img-wrapper:before{content:"德牧工作室";position:absolute;top:30%;left:60%;transform:translate(-50%,-50%) rotate(-45deg);font-size:3rem;color:#e8cab22e;font-family:"Noto Serif SC",serif;font-weight:700;letter-spacing:.5em;white-space:nowrap;pointer-events:none;z-index:1;text-shadow:0 0 20px rgba(0,0,0,.3)}.img-wrapper:after{content:"德牧工作室";position:absolute;top:50%;left:60%;transform:translate(-50%,-50%) rotate(-45deg);font-size:3rem;color:#e8cab22e;font-family:"Noto Serif SC",serif;font-weight:700;letter-spacing:.5em;white-space:nowrap;pointer-events:none;z-index:1;text-shadow:0 0 20px rgba(0,0,0,.3)}.watermark-extra{position:absolute;top:70%;left:60%;transform:translate(-50%,-50%) rotate(-45deg);font-size:3rem;color:#e8cab22e;font-family:"Noto Serif SC",serif;font-weight:700;letter-spacing:.5em;white-space:nowrap;pointer-events:none;z-index:1;text-shadow:0 0 20px rgba(0,0,0,.3)}.watermark-extra:before{content:"德牧工作室"}.char-cyril{max-width:550px;max-height:85%}.char-talek{max-width:720px;max-height:92%;position:relative;right:-100px;top:-10px}.char-muanyuan{max-width:600px;max-height:85%;position:relative;right:-30px}.char-weiyi{max-width:700px;max-height:90%;position:relative;right:-80px}.char-badiya{max-width:690px;max-height:92%;position:relative;right:-60px}.char-sifenke{max-width:450px;max-height:75%;position:relative;right:50px}.char-kelin,.char-woersitian{max-width:650px;max-height:90%;position:relative;right:-20px}.char-songqingrong,.char-langshuhuai{max-width:650px;max-height:90%;position:relative;right:-30px}.character-text{position:absolute;right:0;top:50%;transform:translateY(-50%);width:450px;padding:40px;color:#e8cab2;font-family:"Noto Serif SC",serif}.character-text h2{font-size:2.5rem;margin-bottom:30px;letter-spacing:.15em;font-weight:600}.character-text p{font-size:1.2rem;line-height:1.9;letter-spacing:.05em}.book-carousel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:80vw;max-width:900px;height:55vh;max-height:500px;margin-top:-20px;z-index:5;perspective:2000px}.carousel-item{position:absolute;width:100%;height:100%;background:#211f20;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transform-style:preserve-3d;backface-visibility:hidden;transition:transform 1s ease-in-out}.carousel-item:not(.active){pointer-events:none}.carousel-item.flip-out-left{transform:rotateY(-180deg)}.carousel-item.flip-out-right{transform:rotateY(180deg)}.carousel-item.active{transform:rotateY(0);pointer-events:auto}.carousel-item iframe{width:100%;height:100%;border:none;pointer-events:none}.carousel-item:after{content:"点击游玩";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:"Noto Serif SC",serif;font-size:1.2rem;color:#e8cab2;background:#211f20d9;padding:10px 25px;border:2px solid #e8cab2;opacity:0;transition:opacity .3s ease;pointer-events:none;letter-spacing:.1em;z-index:10}.carousel-item.active:hover:after{opacity:1}.carousel-nav{position:fixed;bottom:15%;left:50%;transform:translate(-50%);display:flex;gap:30px;z-index:10}.carousel-btn{width:55px;height:55px;border:3px solid #e8cab2;background:transparent;color:#e8cab2;font-size:1.5rem;cursor:pointer;transition:all .3s ease}.carousel-btn:hover:not(:disabled){background:#e8cab21a}.carousel-btn:disabled{opacity:.3;cursor:not-allowed}.carousel-indicators{position:fixed;bottom:8%;left:50%;transform:translate(-50%);display:flex;gap:12px;z-index:10}.indicator{width:12px;height:12px;border-radius:50%;background:#e8cab266;cursor:pointer;transition:all .3s ease}.indicator.active{background:#e8cab2}.music-player{position:fixed;bottom:40px;right:40px;z-index:102;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s ease}#home-page.active~.music-player{opacity:1;pointer-events:auto}.vinyl-disc{width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at center,#211f20 0% 15%,#444 15% 16%,#252323 16% 20%,#3a3838 20% 21%,#252323 21% 25%,#3a3838 25% 26%,#252323 26% 30%,#3a3838 30% 31%,#252323 31% 35%,#3a3838 35% 36%,#252323 36% 40%,#3a3838 40% 41%,#252323 41% 45%,#3a3838 45% 46%,#252323 46% 50%,#3a3838 50% 51%,#252323 51% 55%,#3a3838 55% 56%,#252323 56% 60%,#3a3838 60% 61%,#252323 61% 65%,#3a3838 65% 66%,#252323 66% 70%,#3a3838 70% 71%,#252323 71%);box-shadow:0 4px 15px #00000080;position:relative;transition:transform .3s ease}.vinyl-disc:hover{transform:scale(1.05)}.vinyl-disc.playing{animation:spin 3s linear infinite}.vinyl-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:25px;height:25px;border-radius:50%;background:radial-gradient(circle at center,#e8cab2 0% 40%,#bd4f26 40% 60%,#211f20 60%);box-shadow:inset 0 2px 5px #0000004d}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.story-reader{position:absolute;inset:100px 20px 20px;display:flex;gap:0}.story-sidebar{width:280px;background:#211f2099;overflow-y:auto;border-right:1px solid rgba(232,202,178,.2)}.story-sidebar::-webkit-scrollbar{width:6px}.story-sidebar::-webkit-scrollbar-track{background:#0003}.story-sidebar::-webkit-scrollbar-thumb{background:#e8cab24d;border-radius:3px}.volume-list{padding:20px 0}.volume-item{margin-bottom:10px}.volume-title{font-family:"Noto Serif SC",serif;font-size:1.1rem;color:#e8cab2;cursor:pointer;transition:all .3s ease;font-weight:600;position:relative;padding:12px 20px 12px 45px;display:flex;align-items:center}.volume-title:before{content:"›";position:absolute;left:20px;top:50%;transform:translateY(-50%) rotate(0);font-size:1.5rem;transition:transform .3s ease;line-height:1}.volume-item.active .volume-title:before{transform:translateY(-50%) rotate(90deg)}.volume-title:hover{background:#e8cab21a;color:#fff}.volume-item.active .volume-title,.volume-item.selected .volume-title{background:#bd4f264d;color:#fff}.chapter-list{display:none;padding-left:10px}.volume-item.active .chapter-list{display:block}.chapter-item{padding:10px 20px;font-family:"Noto Serif SC",serif;font-size:1rem;color:#e8cab2cc;cursor:pointer;transition:all .3s ease}.chapter-item:hover{background:#e8cab20d;color:#e8cab2}.chapter-item.active{background:#bd4f2633;color:#fff}.story-content-area{flex:1;background:#e8cab20d;overflow-y:auto;padding:40px 60px}.story-content-area::-webkit-scrollbar{width:8px}.story-content-area::-webkit-scrollbar-track{background:#0000001a}.story-content-area::-webkit-scrollbar-thumb{background:#e8cab24d;border-radius:4px}.story-header{margin-bottom:40px;padding-bottom:20px;border-bottom:2px solid rgba(232,202,178,.2)}.story-title{font-family:"Noto Serif SC",serif;font-size:2rem;color:#e8cab2;font-weight:600;letter-spacing:.1em}.story-text-content{font-family:"Noto Serif SC",serif;font-size:1.2rem;line-height:2;color:#e8cab2;letter-spacing:.05em}.story-text-content p{margin-bottom:1.5em;text-indent:2em}.story-link{color:#e8cab2;text-decoration:none;transition:color .3s ease;cursor:pointer;display:block;margin-top:20px;font-size:1.2rem;line-height:1.9;letter-spacing:.05em;pointer-events:auto}.story-link:hover{color:#fff}.help-icon{width:1.2em;height:1.2em;vertical-align:-.2em;cursor:pointer;margin:0 .1em;opacity:1;transition:opacity .5s ease,filter .3s ease,transform .3s ease}.help-icon:hover{filter:brightness(1.2);transform:scale(1.1)}.voice-icon{width:1em;height:1em;vertical-align:-.1em;cursor:pointer;margin-left:.3em;display:inline-block;opacity:1;transition:opacity .5s ease,filter .3s ease,transform .3s ease}.voice-icon:hover{filter:brightness(1.2);transform:scale(1.1)}.character-info:not(.active) .voice-icon{opacity:0}.certificate-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:1000;justify-content:center;align-items:center;cursor:pointer}.certificate-modal.active{display:flex}.certificate-content{max-width:500px;max-height:700px;background:#211f20;padding:20px;border-radius:8px;box-shadow:0 8px 32px #00000080;cursor:default;overflow:auto}.certificate-content::-webkit-scrollbar{width:0;display:none}.certificate-content img{max-width:100%;max-height:100%;display:block}@media(max-width:1024px){.section-content{max-width:1000px}.section-content p{font-size:1.1rem}.character-container{width:90%;gap:20px}.character-text{width:350px}.character-image{right:380px}.character-detail{margin-top:40px}}@media(max-width:768px){.section-content{max-width:90%}.section-content h1{font-size:1.6rem}.section-content p{font-size:1rem}.section-content .story-text{font-size:1.4rem}.character-container{width:95%;flex-direction:column;align-items:center;overflow-y:auto;height:85%}.character-container::-webkit-scrollbar{width:0;display:none}.character-container{-ms-overflow-style:none;scrollbar-width:none}.character-list{width:100%;height:auto;flex-direction:row;gap:10px;padding:20px;overflow-x:auto;overflow-y:hidden}.character-btn{width:80px;height:80px;min-height:80px;min-width:80px;flex-shrink:0}.character-detail{width:100%;margin-top:50px}.character-image{position:static;right:auto;height:200px;margin-bottom:60px;display:flex;justify-content:center}.character-text{position:static;width:100%;transform:none;top:auto;padding:20px;text-align:center}.character-text h2{font-size:1.8rem}.character-text p{font-size:1rem}.story-reader{flex-direction:column}.story-sidebar{width:100%;height:auto;max-height:200px;border-right:none;border-bottom:1px solid rgba(232,202,178,.2)}.story-content-area{width:100%;padding:20px 30px}.story-title{font-size:1.5rem}.story-text-content{font-size:1rem}}@media(max-width:600px){body{border:10px solid #211f20}#home-page .navbar{height:60px;padding:0 20px}#home-page .logo{font-size:1.5rem}#home-page .nav-links{gap:15px}#home-page .nav-link{font-size:1rem}.section-content{max-width:95%}.section-content h1{font-size:1.4rem}.section-content p{font-size:.9rem;line-height:1.7}.section-content .story-text{font-size:1.2rem}.arrow-down{font-size:2rem}.character-list{gap:8px;padding:15px}.character-btn{width:70px;height:70px;min-height:70px;min-width:70px}.character-detail{width:100%;margin-top:50px}.character-image{position:static;right:auto;height:180px;margin-bottom:60px;display:flex;justify-content:center}.character-text{position:static;width:100%;transform:none;top:auto;padding:40px 20px;text-align:center}.character-text h2{font-size:1.5rem;margin-bottom:15px}.character-text p{font-size:.9rem}.char-cyril,.char-talek,.char-muanyuan,.char-weiyi,.char-badiya,.char-sifenke,.char-kelin,.char-woersitian,.char-songqingrong,.char-langshuhuai{max-width:100%!important;max-height:100%!important;position:static!important;right:auto!important}.char-talek{max-width:125%!important;max-height:125%!important}.story-link{font-size:1rem}.book-carousel{width:90vw;height:40vh}.carousel-btn{width:45px;height:45px;font-size:1.2rem}.carousel-nav{bottom:20%;gap:20px}.carousel-indicators{bottom:12%;gap:8px}.indicator{width:10px;height:10px}.music-player{bottom:20px;right:20px}.vinyl-disc{width:60px;height:60px}}