:root {
  --board-w:750;
  --board-h:1312.5;
  --board-scale:1;
  --hero-extra:0px;
  --hero-base:343.35443px;
  --footer-base:1226.26582px;
  --body-height:882.91139px;
  --content-max-width:1120px;
  --ink:#f5f3ff;
  --muted:#c1c9fa;
  --line:#597bd0;
  --violet:#a28aff;
  color-scheme:dark;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  background:#070e23;
  color:var(--ink);
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}

a {
  color:inherit;
  text-decoration:none;
}

button:focus-visible,a:focus-visible {
  outline:2px solid #efbaff;
  outline-offset:3px;
}

button {
  border:0;
}

h1,h2,h3,p {
  margin:0;
}

.fit-shell {
  position:relative;
  isolation:isolate;
  width:100%;
  display:grid;
  place-items:start center;
  overflow-x:clip;
  background-color:#08132f;
}

.page-backdrop {
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.backdrop-region {
  position:absolute;
  left:0;
  width:100%;
}

.backdrop-region img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

#hero-sky {
  top:0;
  height:calc(var(--hero-base) * var(--board-scale) + var(--hero-extra));
}

#hero-sky img {
  object-position:center bottom;
}

#section-sky {
  top:calc(var(--hero-base) * var(--board-scale) + var(--hero-extra));
  height:calc(var(--body-height) * var(--board-scale));
}

#footer-sky {
  top:calc(var(--footer-base) * var(--board-scale) + var(--hero-extra));
  bottom:0;
}

.page-backdrop::after {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:calc(var(--hero-base) * var(--board-scale) + var(--hero-extra));
  background:linear-gradient(90deg,#06102766,transparent 70%);
}

.fit-box {
  width:100%;
  max-width:var(--content-max-width);
  aspect-ratio:4 / 7;
  position:relative;
  overflow:hidden;
  z-index:1;
}

.artboard {
  width:750px;
  height:1312.5px;
  position:relative;
  transform:scale(var(--board-scale));
  transform-origin:top left;
  isolation:isolate;
  background:transparent;
}

.layer {
  position:absolute;
  margin:0;
  padding:0;
}

.image-layer {
  pointer-events:none;
}

.image-layer img,.image-button img {
  width:100%;
  height:100%;
  display:block;
  object-fit:fill;
}

.image-button {
  background:none;
  transition:filter .2s;
}

.image-button:hover {
  filter:brightness(1.2) drop-shadow(0 0 5px #af91ff);
}

.image-button[aria-pressed=true] {
  filter:drop-shadow(0 0 4px #ff8ce1) brightness(1.4);
}

.brand {
  font-weight:700;
  white-space:nowrap;
  line-height:1.5;
}

.nav-link {
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10.28px;
  letter-spacing:.6px;
}

.nav-link.active {
  background:linear-gradient(110deg,#6555b5,#243d9a);
  border:1px solid #755ee0;
  border-radius:30px;
  box-shadow:0 1px 13px #7056e788,inset 0 0 9px #7284ff33;
}

.nav-link:hover,.footer-link:hover {
  color:#cfb7ff;
}

.button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:40px;
  font-size:10.28px;
  letter-spacing:1px;
  white-space:nowrap;
  transition:filter .2s,box-shadow .2s;
}

.button:hover {
  filter:brightness(1.16);
}

.primary {
  border:1.3px solid #d2bfff;
  background:linear-gradient(105deg,#db8cff 0%,#946aff 34%,#6675ff 76%,#82c9ff 100%);
  box-shadow:0 0 13px #a874ff99,inset 0 0 7px #ffe8ffb3;
  font-weight:700;
}

.outline {
  background:linear-gradient(100deg,#101b3988,#17285688);
  border:1px solid #bcc2ff;
  box-shadow:inset 0 0 0 2px #1d2c5366;
  color:#d9ddff;
}

.intro {
  line-height:1.6;
  letter-spacing:.4px;
}

.body-copy {
  color:var(--muted);
  line-height:1.62;
  letter-spacing:.35px;
  white-space:nowrap;
}

.section-panel {
  border:.8px solid #607bc6;
  border-radius:10px;
  box-shadow:inset 0 0 10px #325a9530,0 2px 5px #03091666;
  background:linear-gradient(110deg,#101c3922,#0b153522);
  pointer-events:none;
}

.section-title {
  font-weight:700;
  line-height:1.5;
  letter-spacing:.5px;
  white-space:nowrap;
}

.title-rule {
  border-radius:10px;
  background:linear-gradient(90deg,#f6a6ef,#a5baff);
  box-shadow:0 0 3px #c290fa55;
}

.card {
  border:.65px solid #4668b2;
  border-radius:8px;
  background:linear-gradient(125deg,#213759e8,#14284aea 72%,#142b4aea);
  box-shadow:inset 0 0 14px #101a3d44;
}

.card-title {
  font-weight:700;
  line-height:1.5;
  white-space:nowrap;
  letter-spacing:.2px;
}

.center {
  text-align:center;
}

.art-frame {
  border:.8px solid #6380d6;
  border-radius:10px;
  box-shadow:inset 0 0 7px #2d488b44;
  pointer-events:none;
}

#about-moon,#closing-moon {
  overflow:hidden;
  border-radius:10px;
}

.benefit-panel {
  background:linear-gradient(120deg,#273866ee,#112347ef);
  border:.7px solid #5365a0;
  border-radius:9px;
  box-shadow:0 0 8px #050e2377,inset 0 0 8px #8285ce22;
}

.step-number {
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #7178ff;
  border-radius:50%;
  font-size:13px;
  background:linear-gradient(120deg,#7c75ff,#4039fe);
  box-shadow:0 0 11px #5750ff77;
}

.step-card {
  cursor:pointer;
  transition:filter .2s;
}

.step-card:hover {
  filter:brightness(1.16);
}

.step-card~.image-layer,.step-card~.card-title {
  pointer-events:none;
}

.scene-card {
  overflow:hidden;
}

#scene-image-0,#scene-image-1,#scene-image-2,#scene-image-3 {
  border-radius:7px 7px 0 0;
  overflow:hidden;
}

.footer-link {
  line-height:1.8;
  white-space:nowrap;
}

.selected {
  color:#a495ff;
}

.dialog-eyebrow {
  color:#b3a0ff;
  font-size:11px;
  letter-spacing:3px;
  margin-bottom:13px;
}

dialog {
  width:min(440px,calc(100vw - 32px));
  border:1px solid #7769bc;
  border-radius:20px;
  background:linear-gradient(140deg,#202b51,#101830);
  color:#eeebff;
  padding:30px;
  box-shadow:0 0 60px #8e66fe30;
}

dialog::backdrop {
  background:#02081ac7;
  backdrop-filter:blur(7px);
}

.dialog-close {
  position:absolute;
  right:13px;
  top:9px;
  background:transparent;
  font-size:27px;
  color:#c8b9fa;
}

dialog h2 {
  font-size:23px;
  margin-bottom:18px;
}

dialog p {
  font-size:14px;
  line-height:1.85;
  color:#c5cae8;
}

dialog .entry {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:15px 16px;
  margin-top:12px;
  text-align:left;
  border:1px solid #595791;
  border-radius:11px;
  background:#36315c;
  color:#f1eaff;
}

dialog .entry:hover {
  background:#48406f;
}

dialog .entry small {
  color:#b9b2d6;
}

.toast {
  position:fixed;
  bottom:26px;
  left:50%;
  transform:translate(-50%,15px);
  opacity:0;
  pointer-events:none;
  background:#2d2552;
  border:1px solid #a18cce;
  border-radius:50px;
  padding:11px 20px;
  font-size:13px;
  transition:.2s;
  white-space:nowrap;
  z-index:50;
}

.toast.visible {
  opacity:1;
  transform:translate(-50%,0);
}

@font-face {
  font-family:MoonSans;
  src:url('https://eidolon.oss-cn-chengdu.aliyuncs.com/website/assets/moon-sans.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

:root {
  font-family:MoonSans,"Microsoft YaHei","PingFang SC",sans-serif;
}

.brand,.section-title,.card-title {
  font-weight:600;
}

.body-copy {
  letter-spacing:.25px;
}

.primary,.button.arrow {
  padding-right:17px;
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  * {
    transition:none!important;
  }
}
/* Footer center alignment: keep side columns unchanged, center the middle information on the 750px artboard. */
#footer-copyright,
#footer-company,
#footer-icp {
  left:50% !important;
  transform:translateX(-50%);
  text-align:center;
}

#footer-copyright {
  width:320px !important;
}

#footer-company {
  width:320px !important;
}

#footer-icp {
  width:245px !important;
}

/* The navigation group is already visually balanced; shift the whole group by its original 4.35px offset so its center is exactly x=375. */
[id^="footer-nav-"] {
  transform:translateX(-4.35px);
}