*{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:clamp(1.5rem,4vw,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:clamp(15px,4vw,40px)}#home-page .nav-link{font-family:"Noto Serif SC",serif;font-size:clamp(1rem,2.5vw,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:min(90vw,1100px);width:90%;padding:clamp(20px,4vw,60px)}.section-content h1{font-size:clamp(1.2rem,2.5vw,2.2rem);margin-bottom:clamp(15px,2.5vw,35px);letter-spacing:.1em;font-weight:600}.section-content p{font-size:clamp(.9rem,1.5vw,1.4rem);line-height:1.9;letter-spacing:.05em;margin-bottom:clamp(12px,2vw,25px);text-align:center}.section-content .story-text{font-size:clamp(1.1rem,2vw,1.7rem);margin-top:clamp(20px,3vw,45px);margin-bottom:clamp(12px,2vw,25px);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:1200px){.section-content{max-width:85vw}}@media(max-width:768px){.section-content{width:92%;max-width:none;padding:clamp(15px,3vw,25px)}.section-content h1{font-size:clamp(1.1rem,4vw,1.5rem)}.section-content p{font-size:clamp(.85rem,3vw,1rem);line-height:1.8}.section-content .story-text{font-size:clamp(1rem,3.5vw,1.3rem)}}.character-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:1400px;height:85%;display:flex;gap:2%;justify-content:center;padding-left:3%;padding-top:8vh}.character-list{width:10%;min-width:80px;max-width:150px;height:100%;display:flex;flex-direction:column;gap:1.5vh;padding:0 0 2vh;position:relative;z-index:10;overflow-y:auto;overflow-x:hidden}.character-list::-webkit-scrollbar{width:0;display:none}.character-btn{width:100%;max-width:100px;aspect-ratio:1 / 1;min-height:auto;flex-shrink:0;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:5%;top:0;right:35%;height:100%;display:flex;align-items:center;justify-content:flex-end;padding-right:2%;pointer-events:none}.img-wrapper{position:relative;display:inline-block;max-width:100%;max-height:100%}.character-image img{object-fit:contain;pointer-events:none;position:relative;display:block;max-height:80vh}.img-wrapper:before{content:"德牧工作室";position:absolute;top:30%;left:50%;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:50%;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:50%;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:min(550px,45vw);max-height:85%}.char-talek{max-width:min(720px,55vw);max-height:92%;position:relative;right:0;top:-10px}.char-muanyuan{max-width:min(600px,48vw);max-height:85%;position:relative;right:-2vw}.char-weiyi{max-width:min(700px,55vw);max-height:90%;position:relative;right:0}.char-badiya{max-width:min(690px,55vw);max-height:92%;position:relative;right:-3vw}.char-sifenke{max-width:min(450px,35vw);max-height:75%;position:relative;right:2vw}.char-kelin,.char-woersitian{max-width:min(650px,52vw);max-height:90%;position:relative;right:-1vw}.char-songqingrong,.char-langshuhuai{max-width:min(650px,52vw);max-height:90%;position:relative;right:-2vw}.char-liqi,.char-bulanwen,.char-luni{max-width:min(650px,52vw);max-height:90%;position:relative;right:-1vw}.char-halley{max-width:min(500px,38vw);max-height:80%;position:relative;right:1vw}.char-wenge{max-width:min(450px,35vw);max-height:75%;position:relative;right:2vw}.char-yulin{max-width:min(500px,40vw);max-height:75%;position:relative;right:2vw}.char-tuling,.char-weile,.char-philo,.char-qingfangyi{max-width:min(650px,52vw);max-height:90%;position:relative;right:-1vw}.char-peiliya,.char-shiwei,.char-zhenhuajiu{max-width:min(500px,40vw);max-height:80%;position:relative;right:1vw}.char-elos{max-width:min(650px,52vw);max-height:90%;position:relative;right:-1vw}.char-linghongyuan{max-width:min(500px,40vw);max-height:80%}.char-yanyu{max-width:min(630px,52vw);max-height:85%;position:relative;right:-3vw}.char-baixu{max-width:min(600px,55vw);max-height:80%}.char-kafen{max-width:min(450px,35vw);max-height:75%;position:relative;left:-3vw}.char-yasilan{max-width:min(500px,40vw);max-height:80%}.character-text{position:absolute;right:0;top:50%;transform:translateY(-50%);width:32%;min-width:200px;max-width:450px;padding:3%;color:#e8cab2;font-family:"Noto Serif SC",serif}.character-text h2{font-size:clamp(1.4rem,2.2vw,2.8rem);margin-bottom:clamp(10px,2vh,30px);letter-spacing:.15em;font-weight:600}.character-text p{font-size:clamp(.9rem,1.2vw,1.35rem);line-height:1.8;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:clamp(220px,18vw,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}.beian-footer{margin-top:60px;padding:30px 0;text-align:center;border-top:1px solid rgba(232,202,178,.2);display:flex;align-items:center;justify-content:center;gap:8px;font-family:"Noto Serif SC",serif;font-size:.9rem;color:#e8cab299;letter-spacing:.05em}.beian-icon{width:16px;height:16px}.beian-footer a:hover{color:#e8cab2}.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)}.fullscreen-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}.fullscreen-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}.img-wrapper:before,.img-wrapper:after,.watermark-extra{font-size:clamp(1.5rem,2.5vw,3rem)}@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%;gap:0;padding:0;top:55%}.character-container::-webkit-scrollbar{width:0;display:none}.character-container{-ms-overflow-style:none;scrollbar-width:none}.character-list{width:100%;max-width:none;min-width:auto;height:auto;flex-direction:row;flex-wrap:nowrap;gap:2vw;padding:1vh 3vw;margin:0;overflow-x:auto;overflow-y:hidden;justify-content:flex-start}.character-btn{width:15vw;height:15vw;min-height:60px;min-width:60px;max-width:90px;max-height:90px;flex-shrink:0;aspect-ratio:1 / 1}.character-detail{width:100%;flex:1;margin-top:0}.character-info{display:flex;flex-direction:column;align-items:center}.character-image{position:relative;left:auto;right:auto;top:auto;width:100%;height:40vh;margin-bottom:2vh;display:flex;justify-content:center;align-items:center}.img-wrapper{display:flex;justify-content:center;align-items:center}.character-image img{max-width:80%;max-height:100%}.character-text{position:relative;width:90%;max-width:none;min-width:auto;transform:none;top:auto;padding:3vw;text-align:center}.character-text h2{font-size:clamp(1.4rem,4vw,1.8rem);margin-bottom:2vh}.character-text p{font-size:clamp(.9rem,2.5vw,1rem);line-height:1.7}.char-cyril,.char-muanyuan,.char-peiliya,.char-shiwei,.char-zhenhuajiu,.char-linghongyuan{max-width:min(80%,350px)!important;max-height:100%!important;position:static!important;right:auto!important;top:auto!important}.char-talek,.char-bulanwen,.char-weiyi,.char-badiya,.char-luni,.char-tuling,.char-kelin,.char-woersitian,.char-qingfangyi,.char-songqingrong,.char-langshuhuai,.char-philo,.char-weile,.char-liqi,.char-elos,.char-yanyu,.char-baixu{max-width:min(95%,450px)!important;max-height:100%!important;position:static!important;right:auto!important;top:auto!important}.char-sifenke,.char-halley,.char-wenge,.char-yulin,.char-kafen{max-width:min(65%,280px)!important;max-height:100%!important;position:static!important;right:auto!important;top:auto!important}.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}.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:2vw;padding:2vh 2vw}.character-btn{width:18vw;height:18vw;min-height:55px;min-width:55px}.character-image{height:40vh}.character-text{padding:2vw}.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}}