*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:#16141f;margin:0}.doc-page{color:#e7e1d4;background:radial-gradient(circle at 8% 0,#243044 0%,#0000 36%),#10141c;min-height:100vh}.doc-bar{z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#10141ce0;border-bottom:1px solid #e7e1d41f;justify-content:space-between;align-items:center;gap:16px;padding:16px 28px;display:flex;position:sticky;top:0}.doc-bar-kicker{letter-spacing:.22em;color:#c9bfa8;margin:0;font-family:ZCOOL XiaoWei,Noto Serif SC,serif;font-size:15px}.doc-bar-btn{color:#1a1408;letter-spacing:.12em;background:#f2c14e;border:1px solid #f2c14e;justify-content:center;align-items:center;min-height:40px;padding:0 18px;font-family:Noto Serif SC,serif;font-size:14px;font-weight:600;text-decoration:none;transition:transform .18s,background .18s;display:inline-flex}.doc-bar-btn:hover{background:#ffd56a;transform:translateY(-1px)}.doc-list{flex-direction:column;gap:36px;max-width:1080px;margin:0 auto;padding:36px 24px 72px;display:flex}.doc-step{margin:0}.doc-step-id{letter-spacing:.28em;color:#f2c14e;margin:0 0 12px;font-family:ZCOOL XiaoWei,Noto Serif SC,serif;font-size:18px}.doc-step-img{background:#0b0e14;border:1px solid #e7e1d41f;width:100%;height:auto;display:block;box-shadow:0 18px 40px #00000047}@media (width<=720px){.doc-bar{padding:14px 16px}.doc-list{gap:28px;padding:24px 14px 56px}}.moon-letter{--ink:#3a2d24;--paper:#f4ead4;--gold:#e8c56a;--dusk:#4a3d68;min-height:100vh;color:var(--ink);background:radial-gradient(70% 50% at 22% 18%,#6a5478 0%,#0000 55%),radial-gradient(50% 40% at 80% 10%,#3d4a72 0%,#0000 50%),linear-gradient(#2b2748 0%,#3a3f68 28%,#5a4d6e 52%,#2a3148 78%,#12141f 100%);position:relative;overflow:hidden}.sky,.haze,.grain{pointer-events:none;position:absolute;inset:0}.haze{background:radial-gradient(circle at 24% 22%,#ffe6aa2e,#0000 28%),radial-gradient(circle at 70% 70%,#503c5a33,#0000 40%)}.grain{z-index:8;opacity:.18;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.star{width:calc(2px * var(--s));height:calc(2px * var(--s));background:#fff8e4;border-radius:50%;animation:3.6s ease-in-out infinite twinkle;position:absolute;box-shadow:0 0 6px #fff3c8}.moon{aspect-ratio:1;z-index:2;width:min(28vw,220px);position:absolute;top:7%;left:14%}.moon-core{background:radial-gradient(circle at 32% 30%,#fff7d6 0%,#f0d48a 42%,#d8b15a 100%);border-radius:50%;width:100%;height:100%;animation:8s ease-in-out infinite moonPulse;display:block;box-shadow:0 0 40px 12px #ffe09673,0 0 120px 40px #ffd2782e}.moon-ring{border:1px solid #ffe8b42e;border-radius:50%;position:absolute;inset:-18%}.lantern{z-index:4;filter:drop-shadow(0 0 10px #ffaa468c);animation:linear infinite riseLantern;position:absolute;bottom:-10%}.lantern svg{animation:sway var(--drift,6s) ease-in-out infinite}.petal{z-index:6;opacity:.72;background:linear-gradient(135deg,#f3d56a,#c9962a);border-radius:70% 10%;animation:linear infinite fallPetal;position:absolute;top:-4%}.garden{z-index:3;height:46%;position:absolute;inset:auto 0 0}.water,.bridge,.bank-left,.bank-right{position:absolute}.water{width:100%;height:82%;inset:18% 0 0}.bridge{opacity:.92;width:min(42vw,420px);bottom:18%;left:18%}.bank-left{width:min(38vw,360px);bottom:0;left:0}.bank-right{width:min(46vw,420px);bottom:0;right:0}.letter{z-index:7;background:linear-gradient(#fff8e6eb,#f4e6cce0);border:1px solid #d6be96b3;width:min(520px,100vw - 40px);margin:14vh auto 0;padding:48px 52px 40px;animation:1.4s .2s both letterIn;position:relative;box-shadow:0 24px 60px #14101c59,inset 0 0 40px #d2b4822e}.letter:before,.letter:after{content:"";opacity:.35;background:radial-gradient(circle at 30% 30%,#d4b03a 0 3px,#0000 4px),radial-gradient(circle at 70% 40%,#c9a227 0 2px,#0000 3px),radial-gradient(circle at 50% 70%,#e0c25a 0 2.5px,#0000 3.5px);width:46px;height:46px;position:absolute}.letter:before{top:14px;left:16px}.letter:after{bottom:14px;right:16px}.letter-kicker{text-align:center;letter-spacing:.38em;color:#7a6854;margin:0 0 28px;font-family:ZCOOL XiaoWei,Noto Serif SC,serif;font-size:15px}.letter-kicker:after{content:"";background:linear-gradient(90deg,#0000,#b89a6a,#0000);width:72px;height:1px;margin:14px auto 0;display:block}.letter-name{color:#2d221c;margin:0 0 28px;font-family:Ma Shan Zheng,Liu Jian Mao Cao,cursive;font-size:clamp(36px,6vw,52px);font-weight:400;line-height:1.3}.letter-body{letter-spacing:.12em;color:#4a3b32;margin:0 0 40px;font-family:Noto Serif SC,serif;font-size:clamp(16px,2.2vw,20px);font-weight:500;line-height:2.05}.letter-sign{text-align:right;letter-spacing:.18em;color:#8a7358;margin:0;font-family:ZCOOL XiaoWei,Noto Serif SC,serif;font-size:14px}@keyframes twinkle{0%,to{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}@keyframes moonPulse{0%,to{box-shadow:0 0 40px 12px #ffe0966b,0 0 120px 40px #ffd27829}50%{box-shadow:0 0 56px 18px #ffe0968c,0 0 140px 52px #ffd27838}}@keyframes riseLantern{0%{opacity:0;transform:translateY(0)translate(0)}12%{opacity:1}88%{opacity:.9}to{opacity:0;transform:translateY(-118vh)translate(18px)}}@keyframes sway{0%,to{transform:rotate(-6deg)}50%{transform:rotate(7deg)}}@keyframes fallPetal{0%{opacity:0;transform:translateY(-8vh)rotate(0)}12%{opacity:.75}to{opacity:0;transform:translateY(110vh)rotate(280deg)}}@keyframes letterIn{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@media (width<=720px){.moon{width:28vw;left:8%}.letter{margin-top:18vh;padding:36px 28px 32px}.bridge{width:58vw;left:6%}.lantern{transform:scale(.85)}}