/* The page remains visible through a shrinking circular aperture. */
.moon-transition{position:fixed;inset:0;z-index:2147483000;overflow:hidden;visibility:hidden;opacity:0;pointer-events:none;color:var(--ink,#22201c);font-family:"Songti SC","Source Han Serif SC","Noto Serif CJK SC",SimSun,serif}
html.moon-leaving .moon-transition,html.moon-waiting .moon-transition,html.moon-arriving .moon-transition,html.moon-opening .moon-transition{visibility:visible;opacity:1;pointer-events:auto}
html.moon-waiting .moon-transition,html.moon-arriving .moon-transition,html.moon-opening .moon-transition{background:#f6f2e9}
.moon-aperture{position:absolute;left:50%;top:50%;width:300vmax;height:300vmax;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 300vmax #f6f2e9}
html.moon-leaving .moon-aperture{animation:moon-close 1.5s cubic-bezier(.45,0,.3,1) forwards,moon-fill 1.5s ease-in-out forwards}
html.moon-waiting .moon-aperture,html.moon-arriving .moon-aperture,html.moon-opening .moon-aperture{width:78px;height:78px;background:#f6f2e9;box-shadow:none}
.moon-disc{position:absolute;left:50%;top:50%;width:78px;height:78px;border-radius:50%;transform:translate(-50%,-50%);overflow:hidden;background:#f6f2e9;opacity:0}
.moon-disc:after{content:"";position:absolute;inset:0;border-radius:50%;background:#202e42;transform:translateX(var(--moon-phase,0%));will-change:transform}
html.moon-waiting .moon-disc,html.moon-arriving .moon-disc,html.moon-opening .moon-disc{opacity:1}
html.moon-waiting .moon-disc:after,html.moon-arriving .moon-disc:after{animation:moon-first-half 1.6s linear both;animation-delay:var(--moon-first-delay,350ms)}
html.moon-first-done .moon-disc:after{animation:none}
html.moon-completing .moon-disc{opacity:1}
html.moon-progressing .moon-disc:after{transition:transform .9s cubic-bezier(.33,0,.2,1)}
html.moon-completing .moon-aperture{width:78px;height:78px}
html.moon-completing .moon-status{opacity:1}
html.moon-opening .moon-disc:after{transform:translateX(105%)}
html.moon-opening .moon-transition{animation:moon-reveal .9s linear forwards}
html.moon-opening .moon-disc{animation:moon-expand .9s cubic-bezier(.45,0,.3,1) forwards}
.moon-status{position:absolute;top:calc(50% + 58px);left:0;right:0;margin:0;text-align:center;font-size:14px;letter-spacing:.2em;opacity:0;color:#6b6459;transition:opacity .35s ease}
html.moon-waiting .moon-status,html.moon-arriving .moon-status{opacity:1;animation:moon-status-in .35s ease-out both;animation-delay:var(--moon-status-delay,0ms)}
.moon-problem{position:absolute;top:calc(50% + 96px);left:16px;right:16px;text-align:center;font-size:13px;color:#6b6459}
.moon-problem button{font:inherit;color:var(--ink,#22201c);border:1px solid var(--rule,#ddd4c3);border-radius:999px;background:var(--paper,#f6f2e9);min-height:42px;padding:8px 16px;margin:8px 4px;cursor:pointer}
@keyframes moon-close{from{width:300vmax;height:300vmax}to{width:78px;height:78px}}
@keyframes moon-fill{0%,55%{background:rgba(32,46,66,0)}100%{background:rgba(32,46,66,1)}}
@keyframes moon-status-in{from{opacity:0}to{opacity:1}}
@keyframes moon-first-half{from{transform:translateX(0)}to{transform:translateX(50%)}}
@keyframes moon-expand{0%{transform:translate(-50%,-50%) scale(1)}80%,100%{transform:translate(-50%,-50%) scale(80)}}
@keyframes moon-reveal{0%,80%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.moon-transition{display:none!important}}