:is(#welcome,#moon-gate) *{box-sizing:border-box}
:is(#welcome,#moon-gate) .moon-halo{position:absolute;top:73px;left:50%;width:380px;height:380px;margin-left:-190px;pointer-events:none;background:radial-gradient(ellipse,#fffdfdf0 0%,#f8eaf779 31%,#e7e0f434 51%,transparent 71%);animation:prelude-halo 9.4s -3s ease-in-out infinite;opacity:.55}
:is(#welcome,#moon-gate) .moon-glass{position:absolute;top:108px;left:50%;width:222px;height:327px;margin-left:-111px;border-radius:111px 111px 8px 8px;border:1px solid #ffffffe0;border-right-color:#e0d0dd66;border-bottom-color:#d5c7d65c;background:linear-gradient(135deg,#ffffff9e,#ffffff20 48%,#ffffff66);box-shadow:inset 1px 1px 2px #fff,2px 18px 32px #8e6c8b08;pointer-events:none}
:is(#welcome,#moon-gate) .moon-glass{overflow:hidden}
:is(#welcome,#moon-gate) .moon-content{position:absolute;inset:0;z-index:1;transition:opacity .7s ease,transform 1s cubic-bezier(.2,.65,.2,1)}
:is(#welcome,#moon-gate) .moon-eyebrow{position:absolute;top:47px;left:22px;right:22px;margin:0;text-align:center;font:11px/1.5 'Songti SC',serif;letter-spacing:5px;text-indent:5px;color:var(--moon-soft)}
:is(#welcome,#moon-gate) .moon-hero{position:absolute;top:174px;left:0;right:0;height:128px;display:flex;align-items:center;justify-content:center}
:is(#welcome,#moon-gate) .moon-chinese{display:flex;align-items:center;justify-content:center;gap:0;padding:0;margin:0;font-family:'Songti SC','STSong','Noto Serif CJK SC',serif;font-weight:300;font-size:77px;line-height:1.3;letter-spacing:-6px}
:is(#welcome,#moon-gate) .moon-chinese span{display:block;transform:scaleX(.78) scaleY(1.08);color:#a58094;background:linear-gradient(145deg,#81697e,#c4a5b6 58%,#8f7386);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:1px 1px 0 #ffffff24}
:is(#welcome,#moon-gate) .moon-chinese span:first-child{translate:5px -13px}
:is(#welcome,#moon-gate) .moon-chinese span:last-child{translate:-4px 14px}
:is(#welcome,#moon-gate) .moon-chinese{animation:prelude-title-breathe 6.4s -.8s ease-in-out infinite;transform-origin:center 55%}
:is(#welcome,#moon-gate) .moon-glass{animation:prelude-glass-breathe 8.6s -2s ease-in-out infinite}
:is(#welcome,#moon-gate) .moon-eyebrow span{display:inline-block;animation:prelude-soft-breathe 9.8s -3.4s ease-in-out infinite}
:is(#welcome,#moon-gate) .moon-caption span{display:inline-block;animation:prelude-soft-breathe 7.2s -2.1s ease-in-out infinite}
:is(#welcome,#moon-gate) .moon-verse span{display:inline-block;animation:prelude-verse-breathe 7.6s -4.2s ease-in-out infinite}
:is(#welcome,#moon-gate) .moon-caption{position:absolute;top:301px;left:16px;right:16px;text-align:center;font:24px/1.6 'Snell Roundhand','Baskerville',cursive;letter-spacing:1px;color:var(--moon-soft)}
:is(#welcome,#moon-gate) .moon-line{position:absolute;top:337px;left:32px;width:calc(100% - 64px);height:60px;color:var(--moon-ink);overflow:visible}
:is(#welcome,#moon-gate) .moon-line path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
:is(#welcome,#moon-gate) .moon-base{stroke-width:.5;opacity:.13}
:is(#welcome,#moon-gate) .moon-stroke{stroke-width:.9;opacity:.75}
:is(#welcome,#moon-gate) .moon-dot{fill:currentColor;opacity:0}
/* The verse sits below the glass, with a clear gap from its bottom edge. */
:is(#welcome,#moon-gate) .moon-verse{position:absolute;top:459px;left:16px;right:16px;margin:0;text-align:center;font:12px/1.8 'Songti SC','STSong',serif;letter-spacing:1.8px;text-indent:1.8px;color:#8e687b;white-space:nowrap}
:is(#welcome,#moon-gate) .moon-enter{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);appearance:none;border:0;border-radius:20px;white-space:nowrap;background:transparent;color:#977384;padding:10px 20px;min-height:44px;font:11px/1.5 'Songti SC',serif;letter-spacing:3px;text-indent:3px;touch-action:manipulation}
/* Animate the label only: the touch target remains fully present and stable. */
:is(#welcome,#moon-gate) .moon-enter-label{display:block;margin:0;padding:0;text-align:center;animation:prelude-breathe var(--moon-breath) ease-in-out infinite}
:is(#welcome,#moon-gate) .moon-enter:focus-visible .moon-enter-label{animation:none;opacity:1}
:is(#welcome,#moon-gate) .moon-enter:active .moon-enter-label{animation:none;opacity:.55}
:is(#welcome,#moon-gate).entered .moon-content{opacity:0;transform:scale(1.035) translateY(-8px);pointer-events:none}
:is(#welcome,#moon-gate).entered *,:is(#welcome,#moon-gate).suspended *{animation-play-state:paused!important}
:is(#welcome,#moon-gate).entered .moon-glass:after,:is(#welcome,#moon-gate).suspended .moon-glass:after{animation-play-state:paused!important}
:is(#welcome,#moon-gate) .playing .moon-hero{animation:prelude-title-in 1.65s cubic-bezier(.2,.65,.2,1) both}
:is(#welcome,#moon-gate) .playing .moon-caption{animation:prelude-copy-in 1.6s .3s ease both}
:is(#welcome,#moon-gate) .playing .moon-verse{animation:prelude-copy-in 1.6s .7s ease both}
@keyframes prelude-title-in{from{opacity:0;transform:translateY(10px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes prelude-copy-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes prelude-breathe{0%,100%{opacity:.25}50%{opacity:.94}}
@keyframes prelude-title-breathe{0%,100%{opacity:.64;transform:translateY(1.2px) scale(.985)}50%{opacity:1;transform:translateY(-1.2px) scale(1.025)}}
@keyframes prelude-glass-breathe{0%,100%{opacity:.6;transform:translateY(1.5px) scale(.994)}50%{opacity:1;transform:translateY(-1px) scale(1.008)}}
@keyframes prelude-halo{0%,100%{opacity:.3;transform:scale(.96)}50%{opacity:.7;transform:scale(1.04)}}
@keyframes prelude-soft-breathe{0%,100%{opacity:.58}50%{opacity:.96}}
@keyframes prelude-verse-breathe{0%,100%{opacity:.62;transform:translateY(.8px)}50%{opacity:.96;transform:translateY(-.8px)}}
:is(#welcome,#moon-gate) .light-field{position:absolute;inset:0;pointer-events:none;overflow:hidden;overflow:clip;opacity:var(--light-strength,.85)}
:is(#welcome,#moon-gate) .light-orbit{position:absolute;width:700px;height:700px;left:50%;top:45%;margin:-350px;animation:light-rotate calc(var(--moon-flow)*2) linear infinite;transform-origin:center}
:is(#welcome,#moon-gate) .orbit-ray{position:absolute;left:30px;top:244px;width:640px;height:156px;background:radial-gradient(ellipse at center,#fffffff5 0%,#ffffffab 17%,#ffffff4d 36%,#ffffff18 53%,#ffffff00 73%);animation:light-orbit-fade calc(var(--moon-flow)*.76) ease-in-out infinite;opacity:.55}
:is(#welcome,#moon-gate) .orbit-ray:nth-child(1){transform:translate(48px,-110px) rotate(-32deg);animation-delay:-2s}
:is(#welcome,#moon-gate) .orbit-ray:nth-child(2){transform:translate(-90px,65px) rotate(38deg);animation-delay:-6s}
:is(#welcome,#moon-gate) .orbit-ray:nth-child(3){transform:translate(82px,180px) rotate(-14deg);animation-delay:-9s;opacity:.35}
@keyframes light-rotate{from{transform:rotate(-18deg)}to{transform:rotate(342deg)}}
@keyframes light-orbit-fade{0%,100%{opacity:.08}45%{opacity:.88}65%{opacity:.58}}
/* The selected moonlight scene; light layers animate only transform and opacity. */
:is(#welcome,#moon-gate).moon-welcome{--moon-ink:#976e87;--moon-soft:#a18b98;--moon-breath:3.6s;--moon-flow:12s;--light-strength:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;position:fixed;inset:0 0 auto;height:100vh;height:100dvh;z-index:10000;overflow:auto;isolation:isolate;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);color:var(--moon-ink);font-family:'Songti SC','STSong',serif;background-color:color-mix(in srgb,var(--entry-bg) 16%,#fcfbff);background-image:radial-gradient(ellipse at 98% 0%,#e6dfec70,transparent 57%),radial-gradient(ellipse at 0% 100%,#f6e1df70,transparent 65%);transition:opacity .3s ease,visibility .3s ease}
:is(#welcome,#moon-gate) .moon-stage{position:relative;flex:0 0 auto;margin:auto;width:min(100%,360px);height:586px;isolation:isolate;overflow:hidden;overflow:clip}
:is(#welcome,#moon-gate) .moon-content{pointer-events:none}:is(#welcome,#moon-gate) .moon-enter{pointer-events:auto}
html[data-entry]:not([data-entry=gate]) body:after{display:none!important}
:is(#welcome,#moon-gate) .moon-status{position:absolute;top:494px;left:22px;right:22px;text-align:center;font:10px/1.8 -apple-system,'PingFang SC',sans-serif;color:#8e7c88;opacity:.8}
#welcome:not(.error) .moon-status{visibility:hidden}
#welcome.ready #welcome-enter{animation:prelude-enter-in .5s ease-out both}
@keyframes prelude-enter-in{from{opacity:0}to{opacity:1}}
:is(#welcome,#moon-gate) .moon-enter{margin:0;border:0;color:#977384;font:11px/1.5 'Songti SC',serif;letter-spacing:3px;min-height:44px}
:is(#welcome,#moon-gate).out{opacity:0;visibility:hidden;pointer-events:none}
:is(#welcome,#moon-gate).out *,:is(#welcome,#moon-gate).suspended *,html[data-motion=off] :is(#welcome,#moon-gate) *{animation-play-state:paused!important}
:is(#welcome,#moon-gate).out .moon-enter{pointer-events:none}
@media(max-height:620px){:is(#welcome,#moon-gate) .moon-stage{height:510px}:is(#welcome,#moon-gate) .moon-eyebrow{top:22px}:is(#welcome,#moon-gate) .moon-glass{top:68px;height:310px}:is(#welcome,#moon-gate) .moon-halo{top:35px}:is(#welcome,#moon-gate) .moon-hero{top:132px}:is(#welcome,#moon-gate) .moon-caption{top:259px}:is(#welcome,#moon-gate) .moon-line{top:293px}:is(#welcome,#moon-gate) .moon-verse{top:397px}:is(#welcome,#moon-gate) .moon-status{top:432px}:is(#welcome,#moon-gate) .moon-enter{bottom:10px}}
@media(prefers-reduced-motion:reduce){:is(#welcome,#moon-gate) *,:is(#welcome,#moon-gate) .moon-content{animation:none!important;transition:none!important}:is(#welcome,#moon-gate).moon-welcome{transition:none}}