*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#080908;color:#eee7d7;font-family:"Noto Serif SC","STSong","SimSun",serif;overflow-x:hidden}
#opening{position:fixed;inset:0;background:#050505;display:flex;align-items:center;justify-content:center;z-index:1000;animation:openingFade 2.2s ease 2s forwards}
.opening-content{text-align:center;animation:openingContent 2s ease forwards}
.opening-seal{width:60px;height:60px;margin:0 auto 35px;border:2px solid #9d4238;color:#c45a4e;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;letter-spacing:4px;font-size:16px}
.opening-small{color:#99835e;letter-spacing:8px;font-size:13px;margin-bottom:20px}
.opening-content h2{font-size:clamp(45px,8vw,90px);font-weight:400;letter-spacing:15px;color:#e8dfcc}
.opening-line{width:60px;height:1px;background:#aa854c;margin:30px auto}
.opening-loading{color:#6e685d;font-size:11px;letter-spacing:5px}
@keyframes openingFade{0%{opacity:1;visibility:visible}75%{opacity:1}100%{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes openingContent{0%{opacity:0;transform:translateY(30px)}30%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}
#petalCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:auto;z-index:80}
.mouse-light{position:fixed;width:320px;height:320px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(213,178,108,.08),transparent 70%);transform:translate(-50%,-50%);z-index:75}
.ink{position:fixed;width:30px;height:30px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(10,10,9,.35),rgba(10,10,9,.12),transparent 70%);transform:translate(-50%,-50%);animation:inkSpread 1.5s ease-out forwards;z-index:70}
@keyframes inkSpread{0%{width:20px;height:20px;opacity:.7}100%{width:250px;height:250px;opacity:0}}
.navbar{position:fixed;top:0;left:0;width:100%;height:75px;display:flex;align-items:center;justify-content:space-between;padding:0 7%;background:linear-gradient(rgba(7,8,7,.65),transparent);backdrop-filter:blur(5px);z-index:110}
.logo{color:#d8b26d;font-size:20px;letter-spacing:5px}
.navbar nav{display:flex;gap:38px}
.navbar a{color:#cfc6b4;text-decoration:none;font-size:14px;letter-spacing:3px;transition:.3s}
.navbar a:hover{color:#e0b766}
.hero{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(rgba(7,8,8,.12),rgba(7,8,8,.25)),url("background.svg") center/cover no-repeat}
.night-fog{position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(12,13,12,.8));z-index:2;pointer-events:none}
.city-wall{position:absolute;bottom:15%;left:0;width:100%;height:170px;background:linear-gradient(#151615,#080909);clip-path:polygon(0 35%,15% 35%,15% 20%,28% 20%,28% 35%,42% 35%,42% 15%,58% 15%,58% 35%,72% 35%,72% 20%,85% 20%,85% 35%,100% 35%,100% 100%,0 100%);opacity:.9;z-index:3}
.city-tower{position:absolute;bottom:110px;width:110px;height:130px;background:#111210}
.tower-left{left:18%}.tower-right{right:18%}
.tower-roof{position:absolute;top:-40px;left:-30px;width:170px;height:50px;background:#090a09;clip-path:polygon(0 100%,50% 0,100% 100%)}
.tower-light{position:absolute;top:35px;left:50%;width:9px;height:18px;transform:translateX(-50%);background:#d7a451;box-shadow:0 0 30px rgba(215,164,81,.7)}
.city-gate{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:260px;height:140px;background:#0a0b0a}
.gate-door{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:130px;height:105px;background:#050605;border-radius:70px 70px 0 0}
.chang-an-street{position:absolute;bottom:0;left:0;width:100%;height:45%;background:linear-gradient(90deg,#080908,#171511,#080908);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);z-index:4}
.street-light{position:absolute;width:5px;height:100px;background:#171512}
.street-light:before{content:"";position:absolute;top:20px;left:-13px;width:30px;height:35px;border-radius:45%;background:#d19a4c;box-shadow:0 0 45px rgba(209,154,76,.75)}
.light-1{left:22%;bottom:55px}.light-2{left:32%;bottom:75px}.light-3{left:42%;bottom:100px}.light-4{right:42%;bottom:100px}.light-5{right:32%;bottom:75px}.light-6{right:22%;bottom:55px}
.person{position:absolute;bottom:30px;width:8px;height:38px;background:#050605;border-radius:50% 50% 10% 10%}
.person:before{content:"";position:absolute;top:-10px;left:-3px;width:14px;height:14px;border-radius:50%;background:#050605}
.person-1{left:45%;transform:scale(.8)}.person-2{left:52%;transform:scale(.6)}.person-3{left:57%;transform:scale(.9)}
.hero-content{position:relative;text-align:center;z-index:10;animation:heroAppear 1.8s ease both}
@keyframes heroAppear{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.small-title{color:#c4a263;letter-spacing:8px;font-size:14px;margin-bottom:35px}
h1{font-size:clamp(70px,12vw,150px);line-height:1.05;font-weight:400;letter-spacing:15px;color:#eee5d3;text-shadow:0 5px 30px #000,0 0 50px rgba(0,0,0,.5)}
h1 span{color:#d1a75d}.divider{width:70px;height:1px;background:#b8904f;margin:35px auto}
.description{color:#d0c7b8;letter-spacing:5px;font-size:15px}
.petal-hint{margin-top:18px;color:rgba(220,194,143,.7);font-size:11px;letter-spacing:3px;animation:hintFade 3s ease-in-out infinite}
@keyframes hintFade{0%,100%{opacity:.4}50%{opacity:1}}
#enterBtn{margin-top:50px;padding:15px 35px;border:1px solid #a98750;background:rgba(10,10,10,.4);color:#d6b56e;font-family:inherit;letter-spacing:4px;cursor:pointer;transition:.4s}
#enterBtn span{margin-left:20px}#enterBtn:hover{background:#a98750;color:#15120e;transform:translateY(-4px)}
.scroll-tip{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);color:#aaa092;font-size:11px;letter-spacing:4px;z-index:10}
.scroll-tip span{display:block;width:1px;height:35px;margin:0 auto 12px;background:#a88957}
#poemPaper{position:fixed;top:50%;left:50%;width:min(520px,85vw);min-height:300px;padding:70px 40px;transform:translate(-50%,-50%) scale(.7);background:linear-gradient(rgba(230,216,181,.96),rgba(215,198,158,.94));color:#332a1e;box-shadow:0 30px 100px rgba(0,0,0,.7);opacity:0;pointer-events:none;z-index:200}
#poemPaper.show{animation:paperShow 4.5s ease forwards}
@keyframes paperShow{0%{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(-2deg)}12%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-53%) scale(1.02)}}
.paper-decoration{position:absolute;right:25px;top:25px;width:42px;height:42px;border:2px solid #a34338;color:#a34338;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl}
#paperPoem{text-align:center;font-size:27px;line-height:2.2;letter-spacing:8px;min-height:120px}
#paperAuthor{text-align:center;margin-top:20px;font-size:13px;color:#75634a;letter-spacing:3px}
.section{min-height:100vh;padding:130px 10%;position:relative;background:#11110f}
.section-title{display:flex;align-items:center;gap:20px;margin-bottom:90px}
.section-title span{color:#9e7842;font-size:13px}.section-title h2{font-size:42px;font-weight:400;letter-spacing:10px}.center{justify-content:center}
.story{background:radial-gradient(circle at 70% 30%,rgba(126,77,53,.12),transparent 45%),#11110f}
.story-content{display:flex;justify-content:space-between;align-items:center;max-width:1100px;margin:auto}
.story-text{max-width:500px;color:#aaa197;line-height:2.5;font-size:15px}.story-text p{margin-bottom:20px}.ancient{font-size:25px;color:#d2c5af}.quote{color:#c9a562;margin-top:40px}
.flower-art{width:350px;height:400px;position:relative}.moon{position:absolute;width:180px;height:180px;border-radius:50%;background:#d8c49b;top:20px;right:30px;box-shadow:0 0 80px rgba(217,196,155,.08)}
.branch{position:absolute;width:330px;height:2px;background:#65513a;transform:rotate(-25deg) translateY(200px)}
.flower{position:absolute;color:#b87368;font-size:50px;animation:flowerFloat 5s ease-in-out infinite}
.flower-1{right:40px;top:100px}.flower-2{right:120px;top:180px;animation-delay:1s}.flower-3{right:200px;top:240px;animation-delay:2s}.flower-4{right:80px;top:300px;animation-delay:3s}
@keyframes flowerFloat{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(8deg) translateY(-8px)}}
.poem-section{display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at center,rgba(111,62,45,.18),transparent 60%),#11110f}
.poem-card{position:relative;width:min(500px,90%);margin:auto;padding:70px 30px;text-align:center;border:1px solid rgba(183,145,82,.3);background:rgba(33,29,23,.7);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.poem-card p{font-size:25px;line-height:2.2;letter-spacing:8px;color:#d7ccbb}.poem-card .highlight{color:#d2a65c}.poem-card small{display:block;margin-top:30px;color:#7f776b;letter-spacing:3px}
.seal{position:absolute;top:25px;right:25px;width:45px;height:45px;border:2px solid #9e3e34;display:flex;align-items:center;justify-content:center;color:#b84b40;writing-mode:vertical-rl}
.about{min-height:70vh;display:flex;flex-direction:column;justify-content:center}
.about-box{max-width:700px;margin:auto;text-align:center;font-size:18px;line-height:2.5;color:#999187}.about-box .gold{margin-top:35px;color:#c6a05d;font-size:22px}
footer{padding:70px 20px;text-align:center;border-top:1px solid rgba(255,255,255,.05);color:#746d62}
footer p{color:#c3a261;letter-spacing:8px;margin-bottom:15px}footer span{font-size:12px;letter-spacing:3px}
@media(max-width:700px){
.navbar{padding:0 20px}.navbar nav{gap:13px}.navbar a{font-size:10px;letter-spacing:1px}.logo{font-size:14px;letter-spacing:2px}
h1{font-size:70px;letter-spacing:8px}.small-title{letter-spacing:4px}.description{font-size:11px;padding:0 15px}
.section{padding:100px 25px}.section-title{margin-bottom:50px}.section-title h2{font-size:30px;letter-spacing:5px}
.story-content{flex-direction:column}.story-text{font-size:14px}.flower-art{transform:scale(.75);margin-top:40px}
#poemPaper{min-height:270px;padding:60px 20px}#paperPoem{font-size:19px;letter-spacing:4px}.poem-card p{font-size:19px;letter-spacing:4px}
}