@font-face { font-family: Sendyun; src: url('../../assets/fonts/HYWenHei-85W.otf'); font-display: swap; }
@font-face { font-family: SendyunHand; src: url('../../assets/fonts/welcome/STXingkai.ttf'); font-display: swap; }
* { box-sizing: border-box; }
:root {
  color-scheme: light;
  --ink: #3f3945;
  --muted: #756c79;
  --line: rgba(89, 76, 92, .18);
  --rose: #c6909d;
  --sage: #8ca8a0;
}
html { min-width: 320px; background: #eee7ed; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    linear-gradient(115deg, rgba(255,255,255,.72), transparent 42%),
    radial-gradient(ellipse at 18% 25%, rgba(255,231,237,.88), transparent 42%),
    radial-gradient(ellipse at 82% 70%, rgba(210,231,226,.74), transparent 43%),
    #eee7ed;
  font-family: Sendyun, "Microsoft YaHei", Arial, sans-serif;
}
body:before {
  position: fixed;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: linear-gradient(rgba(73,60,77,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(73,60,77,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
#rainCanvas, .petal-field { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#rainCanvas { z-index: 1; opacity: .62; }
.petal-field { z-index: 2; overflow: hidden; }
.petal {
  position: absolute;
  top: -8vh;
  left: var(--left);
  width: var(--size);
  height: calc(var(--size) * .56);
  border-radius: 90% 0 90% 0;
  opacity: var(--opacity);
  background: rgba(255,255,255,.96);
  box-shadow: 0 2px 8px rgba(100,80,103,.12);
  animation: petalFall var(--duration) linear var(--delay) infinite;
}
.topbar {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(1380px, calc(100% - 48px));
  height: 82px;
  margin: auto;
  border-bottom: 1px solid var(--line);
}
.back-link { display: inline-flex; align-items: center; gap: 12px; width: max-content; font-size: 10px; letter-spacing: .16em; }
.back-link > span:first-child { font-size: 20px; transition: transform .2s ease; }
.back-link:hover > span:first-child { transform: translateX(-4px); }
.project-index { color: var(--muted); font-size: 10px; letter-spacing: .2em; }
.music-toggle {
  position: relative;
  justify-self: end;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255,255,255,.42);
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.play-symbol { position: absolute; top: 14px; left: 17px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid currentColor; }
.equalizer { position: absolute; inset: 11px; display: none; align-items: center; justify-content: center; gap: 3px; }
.equalizer i { width: 2px; height: 12px; background: currentColor; animation: equalize .8s ease-in-out infinite alternate; }
.equalizer i:nth-child(2) { animation-delay: -.3s; }.equalizer i:nth-child(3) { animation-delay: -.55s; }
.music-toggle.playing .play-symbol { display: none; }.music-toggle.playing .equalizer { display: flex; }
main { position: relative; z-index: 3; }
.hero {
  display: grid;
  grid-template-columns: minmax(300px, .92fr) minmax(480px, 1.08fr);
  grid-template-areas: "logo logo" "portrait copy";
  grid-template-rows: auto 1fr;
  align-items: center;
  column-gap: clamp(45px, 8vw, 130px);
  row-gap: 26px;
  width: min(1240px, calc(100% - 64px));
  min-height: calc(100svh - 120px);
  margin: auto;
  padding: 42px 0 8vh;
}
.portrait-wrap { position: relative; grid-area: portrait; width: min(100%, 520px); justify-self: center; }
.portrait-halo { position: absolute; inset: 9% -10% -8% 12%; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; transform: rotate(-9deg); }
.portrait {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50% 44% 48% 42%;
  object-fit: cover;
  box-shadow: 0 32px 75px rgba(100,79,100,.22), inset 0 0 0 1px rgba(255,255,255,.9);
  transform: rotate(-2deg);
}
.portrait-caption { position: absolute; right: -12px; bottom: 8%; padding: 8px 0; color: var(--muted); font-size: 9px; letter-spacing: .18em; writing-mode: vertical-rl; }
.hero-copy { grid-area: copy; max-width: 670px; }
.kicker { margin: 0 0 18px; color: var(--rose); font-size: 10px; letter-spacing: .24em; }
.deemo-logo { grid-area: logo; display: block; width: 240px; margin: 0 auto; filter: brightness(0) saturate(100%) opacity(.68); }
h1 { margin: 0; font-size: 58px; font-weight: 400; line-height: 1.08; letter-spacing: 0; }
h1 span { color: var(--rose); font-weight: 300; }
.lead { margin: 18px 0 clamp(38px, 6vh, 68px); color: #655d68; font-size: 20px; line-height: 1.8; }
.launch-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.launch-heading span { font-size: 13px; }.launch-heading time { color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.countdown { display: grid; grid-template-columns: minmax(74px, 1.3fr) auto minmax(58px, 1fr) auto minmax(58px, 1fr) auto minmax(58px, 1fr); align-items: start; padding: 20px 0 18px; border-bottom: 1px solid var(--line); }
.countdown > div { min-width: 0; }
.countdown > div strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 56px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown > div span { display: block; margin-top: 9px; color: var(--muted); font-size: 8px; letter-spacing: .18em; }
.countdown > i { padding: 5px clamp(7px, 1vw, 14px) 0; color: rgba(63,57,69,.33); font-family: Georgia, serif; font-size: 31px; font-style: normal; }
.status-row { display: flex; justify-content: space-between; gap: 20px; padding-top: 13px; color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.time-status { display: inline-flex; align-items: center; gap: 8px; }
.time-status b { font-weight: 400; }
.time-status i { width: 6px; height: 6px; border-radius: 50%; background: #d0a56f; box-shadow: 0 0 0 4px rgba(208,165,111,.12); }
.time-status.verified i { background: var(--sage); box-shadow: 0 0 0 4px rgba(140,168,160,.15); }
.time-status.failed { color: #9b5b62; }.time-status.failed i { background: #ad6670; }
.autoplay-prompt { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 11px 16px; border: 1px solid rgba(116,92,117,.25); border-radius: 4px; color: var(--ink); background: rgba(255,255,255,.48); cursor: pointer; }
.autoplay-prompt[hidden] { display: none; }
.prompt-play { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }
.project-note {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
  padding: 54px 0 70px;
  border-top: 1px solid var(--line);
}
.project-note p { max-width: 430px; margin: 0; color: #5f5763; font-family: Georgia, serif; font-size: 24px; line-height: 1.5; }
.project-note div { display: grid; align-content: start; gap: 7px; }
.project-note span, .project-note small { color: var(--muted); font-size: 8px; letter-spacing: .15em; }
.project-note strong { font-size: 15px; font-weight: 500; }
footer { position: relative; z-index: 3; min-height: 86px; padding: 22px clamp(20px, 4vw, 64px); border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.copyright { display: flex; justify-content: center; gap: 18px; padding-top: 6px; }
.fan-disclaimer { position: absolute; top: 22px; right: clamp(20px, 4vw, 64px); width: min(360px, 32vw); height: 38px; color: #858087; font-family: SendyunHand, "KaiTi", serif; font-size: 13px; line-height: 1.45; letter-spacing: 0; text-align: right; }
.fan-disclaimer span { position: absolute; inset: 0 0 auto; opacity: 0; animation: disclaimerCycle 12s ease-in-out infinite; }
.fan-disclaimer span:nth-child(2) { animation-delay: 4s; }
.fan-disclaimer span:nth-child(3) { animation-delay: 8s; }
@keyframes petalFall { 0% { transform: translate3d(0,-10vh,0) rotate(0deg); } 50% { transform: translate3d(var(--drift),52vh,0) rotate(210deg); } 100% { transform: translate3d(var(--drift-end),112vh,0) rotate(430deg); } }
@keyframes equalize { from { transform: scaleY(.38); } to { transform: scaleY(1); } }
@keyframes disclaimerCycle { 0%,5% { opacity: 0; transform: translateY(4px); } 12%,27% { opacity: .9; transform: translateY(0); } 33.333%,100% { opacity: 0; transform: translateY(-3px); } }
@media (max-width: 820px) {
  .topbar { width: calc(100% - 28px); height: 68px; }.project-index { display: none; }
  .topbar { grid-template-columns: 1fr auto; }.music-toggle { grid-column: 2; }
  .hero { grid-template-columns: 1fr; grid-template-areas: "logo" "portrait" "copy"; grid-template-rows: auto auto auto; gap: 28px; width: min(100% - 36px, 620px); min-height: auto; padding: 28px 0 64px; }
  .portrait-wrap { width: min(78vw, 390px); }
  .hero-copy { width: 100%; }
  .deemo-logo { width: min(230px, 56%); }
  .kicker { margin-top: 6px; }
  h1 { font-size: 42px; }.lead { font-size: 18px; }
  .countdown > div strong { font-size: 48px; }
  .lead { margin-bottom: 38px; }
  .project-note { grid-template-columns: 1fr; gap: 28px; width: calc(100% - 36px); padding: 42px 0 54px; }
  footer { min-height: 128px; padding: 20px 18px; }
  .copyright { padding-top: 0; }
  .fan-disclaimer { top: 58px; right: 18px; width: calc(100% - 36px); height: 46px; font-size: 12px; }
}
@media (max-width: 460px) {
  .back-link > span:last-child { font-size: 9px; }.hero { width: calc(100% - 28px); }
  .portrait-wrap { width: min(88vw, 350px); }.portrait-caption { right: 0; }
  h1 { font-size: 34px; }.launch-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .countdown { grid-template-columns: minmax(68px, 1.35fr) auto minmax(49px, 1fr) auto minmax(49px, 1fr) auto minmax(49px, 1fr); }
  .countdown > i { padding-inline: 4px; font-size: 23px; }.countdown > div strong { font-size: 40px; }
  .countdown > div span { font-size: 7px; letter-spacing: .08em; }
  .status-row { flex-direction: column; gap: 8px; }.timezone { padding-left: 14px; }
  .project-note p { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .petal, .equalizer i { animation: none; }
  #rainCanvas { display: none; }
  .fan-disclaimer span { animation: none; }
  .fan-disclaimer span:first-child { opacity: .9; }
}