@charset "UTF-8";
:root{color-scheme:dark;--cream:#f4eee6;--muted:#b0a8b9;--lavender:#c7b2df}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#191b2b}
body{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:var(--cream);min-height:100svh;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid #dbc8f0;outline-offset:7px}
.scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:#1b1d30}
.layer{position:absolute;inset:-35px;will-change:transform}
.sky{background:radial-gradient(ellipse at 81% 35%,#65617b 0,#383d5e 28%,#242c49 54%,#1b2138 80%)}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#ede8fc;box-shadow:0 0 8px #c2b7eb;animation:twinkle 6s ease-in-out infinite alternate}
.stars i:nth-child(1){left:55%;top:19%}.stars i:nth-child(2){left:68%;top:24%;animation-delay:-2s}.stars i:nth-child(3){left:84%;top:14%;width:3px;height:3px;animation-delay:-3s}.stars i:nth-child(4){left:92%;top:33%}.stars i:nth-child(5){left:75%;top:44%;animation-delay:-4s}.stars i:nth-child(6){left:59%;top:42%}.stars i:nth-child(7){left:79%;top:20%;animation-delay:-1s}.stars i:nth-child(8){left:87%;top:48%}.stars i:nth-child(9){left:64%;top:36%}.stars i:nth-child(10){left:81%;top:38%;animation-delay:-5s}.stars i:nth-child(11){left:71%;top:12%}.stars i:nth-child(12){left:94%;top:18%}
.moon span{position:absolute;left:77%;top:21%;width:70px;height:70px;border-radius:50%;background:#efe7d9;box-shadow:0 0 45px #ede7ff30,0 0 140px #dac5ff20}
.moon span:after{content:"";position:absolute;inset:9px -9px -1px 15px;border-radius:50%;background:#5a5873}
.city{background:linear-gradient(transparent 62%,#202c46 62%,#22283b 80%);clip-path:polygon(0 100%,0 67%,48% 67%,48% 62%,54% 62%,54% 65%,58% 65%,58% 61%,61% 61%,61% 64%,64% 64%,64% 59%,67% 59%,67% 63%,70% 63%,70% 66%,74% 66%,74% 61%,77% 61%,77% 57%,80% 57%,80% 64%,84% 64%,84% 60%,88% 60%,88% 64%,92% 64%,92% 61%,100% 61%,100% 100%)}
.room-art,.foreground svg{width:100%;height:100%;position:absolute}
.curtain{transform-origin:780px 100px;animation:curtain 9s ease-in-out infinite alternate}.curtain-right{transform-origin:1460px 100px;animation-delay:-4s}
.character-slot{z-index:2;left:51%;right:21%;top:37%;bottom:6%}.character-slot canvas{width:100%;height:100%;object-fit:contain}
.foreground{z-index:3}
.shade{position:absolute;inset:0;z-index:5;background:linear-gradient(90deg,#151727f2 0%,#191b2cd9 28%,#191b2c61 49%,#191b2c00 69%),linear-gradient(0deg,#141622cf,transparent 25%,transparent 82%,#14162240)}
.grain{position:absolute;inset:0;z-index:6;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.dust{position:absolute;inset:0;z-index:4}.dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:#e6d3ba88;animation:float 14s ease-in-out infinite alternate}.dust i:nth-child(1){left:64%;top:57%}.dust i:nth-child(2){left:76%;top:71%;animation-delay:-4s}.dust i:nth-child(3){left:86%;top:65%;animation-delay:-7s}.dust i:nth-child(4){left:57%;top:82%;animation-delay:-9s}.dust i:nth-child(5){left:91%;top:42%;animation-delay:-12s}
.header{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:35px 5.5vw}
.wordmark{display:flex;align-items:center;gap:13px;font-size:18px;letter-spacing:.3px;font-weight:500}.brand-moon{font-size:32px;line-height:1;color:#d4c6e4}.wordmark-dot{color:#b69acc}
.header-link{font-size:13px;color:#d6cfdf;display:flex;gap:15px;align-items:center}.header-link span{font-size:20px}
.content{position:relative;z-index:10;margin:clamp(48px,12vh,135px) 0 140px 11.5vw;width:480px;max-width:calc(100% - 48px)}
.eyebrow{font-size:12px;letter-spacing:3px;color:#c7b8d2;display:flex;align-items:center;gap:11px}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:#b6a2c8;box-shadow:0 0 13px #b6a2c85c}
h1{font-family:"Noto Serif SC","Songti SC","SimSun",serif;font-size:clamp(46px,4.5vw,72px);line-height:1.47;font-weight:400;letter-spacing:7px;margin:23px 0 22px;text-shadow:0 3px 22px #15172760}.soft-word{color:#d3bfdf}
.intro{font-size:14px;line-height:2.1;color:#c0b7c8;letter-spacing:1.5px;margin:0}.mobile-break{display:none}
.actions{margin-top:37px;display:flex;align-items:flex-start;flex-direction:column;gap:16px}
.enter-button{display:inline-flex;align-items:center;gap:43px;min-height:53px;padding:14px 23px;border:1px solid #d5bed54a;border-radius:4px;background:#cbb5cc13;font-size:14px;letter-spacing:2px;transition:background .25s,border-color .25s,transform .25s}.enter-button:hover{background:#cbb5cc25;border-color:#d5bed591;transform:translateY(-2px)}.enter-button svg{width:22px;height:22px;fill:none;stroke:#d7c7df;stroke-width:1.3}.invitation{font-size:11px;color:#898298;letter-spacing:2px;padding-left:1px}
.footer{position:fixed;bottom:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:28px 5.5vw max(25px,env(safe-area-inset-bottom));gap:16px}.scene-caption{font-size:11px;letter-spacing:2px;color:#9e94ab}.tiny-star{color:#cab1cd;font-size:20px;vertical-align:-2px;margin-right:7px}
.controls{display:flex;gap:10px}.controls button{cursor:pointer;border:1px solid #b4a4c123;background:#201f305e;padding:9px 13px;border-radius:4px;font-size:11px;letter-spacing:1px;color:#bfb3ca}.controls button:hover{background:#393044}.controls button span{margin-left:7px}.controls button:disabled{opacity:.6;cursor:default}
.status{position:fixed;bottom:85px;right:5.5vw;z-index:11;background:#282537eb;color:#e5dcec;border:1px solid #7b668044;border-radius:6px;padding:12px 16px;max-width:min(380px,89vw);font-size:12px;line-height:1.7;opacity:0;transition:opacity .25s;pointer-events:none}.status.visible{opacity:1}
body.entering .content,body.entering .header,body.entering .footer{opacity:0;transition:opacity .26s}body.entering .scene{filter:brightness(.75);transition:filter .3s}
body.paused .scene *{animation-play-state:paused!important}
@keyframes twinkle{from{opacity:.2}to{opacity:.85}}@keyframes curtain{from{transform:skewX(-.3deg)}to{transform:skewX(.4deg)}}@keyframes float{from{transform:translate(0,0);opacity:.15}to{transform:translate(18px,-35px);opacity:.65}}
@media(min-aspect-ratio:18/10){.content{margin-top:5vh;margin-bottom:100px}h1{font-size:56px;line-height:1.3}.actions{margin-top:25px}}
@media(max-width:700px){.header{padding:25px 25px}.wordmark{font-size:15px;gap:8px}.brand-moon{font-size:28px}.header-link{font-size:12px;gap:8px}.room-art,.foreground svg{width:160%;left:-54%}.sky{background:radial-gradient(ellipse at 78% 28%,#5a5875,#242d47 60%)}.moon span{left:73%;top:20%;width:50px;height:50px}.city{transform:none}.shade{background:linear-gradient(90deg,#1517277d,transparent 70%),linear-gradient(0deg,#151727 0%,#151727f2 24%,#191b2cbb 44%,#191b2c13 78%,#191b2c40)}.content{margin:clamp(185px,34svh,310px) 26px 135px;width:auto;max-width:none}.eyebrow{font-size:10px;letter-spacing:2px}h1{font-size:44px;line-height:1.4;letter-spacing:5px;margin:18px 0}.intro{font-size:12px;line-height:2;letter-spacing:1px}.actions{margin-top:24px;gap:12px}.enter-button{min-height:49px;font-size:13px;padding:12px 18px;gap:35px}.invitation{font-size:10px}.footer{padding:20px 24px max(20px,env(safe-area-inset-bottom))}.scene-caption{font-size:10px;letter-spacing:1px}.controls{gap:6px}.controls button{font-size:10px;padding:9px}.controls button span{display:none}.character-slot{left:32%;right:1%;top:22%;bottom:37%}.status{bottom:70px;right:24px}.dust i:nth-child(1){left:40%;top:31%}}
@media(max-width:380px){h1{font-size:39px}.content{margin-top:28svh}.scene-caption{letter-spacing:0}.footer{padding-left:20px;padding-right:20px}.controls button{padding:8px}}
@media(max-height:650px) and (max-width:700px){.content{margin-top:130px;margin-bottom:110px}.footer{position:relative}h1{font-size:38px}.intro{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.layer{will-change:auto}}