:root { color-scheme: dark; font-family: "STKaiti", "KaiTi", "PingFang SC", serif; background: #050506; color: #e8dcc7; }
* { box-sizing: border-box; }
html { background: #050506; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 50% 15%, #192532 0, #07080a 45%, #020203 100%); }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.page { width: min(100%, 1672px); margin: auto; overflow: hidden; box-shadow: 0 0 80px #000; background: #080808; }
.hero { position: relative; aspect-ratio: 1672/1020; min-height: 590px; overflow: hidden; isolation: isolate; background: url("images/main_bg.png") center top/cover no-repeat; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.32), transparent 30% 72%, rgba(0,0,0,.45)), linear-gradient(0deg, #080808 0, transparent 10%); }
.logo { position: absolute; z-index: 4; top: 2.5%; left: 3.7%; width: 25.5%; filter: drop-shadow(0 10px 8px #000); }
.logo-title { position: absolute; z-index: 4; top: 4%; left: 3.7%; width: 29%; display: grid; gap: .04em; padding: .14em .28em .2em; color: #f4e9d5; background: linear-gradient(115deg, rgba(17,10,12,.94), rgba(45,13,16,.86) 72%, rgba(17,10,12,.55)); border: 2px solid #7f352b; border-radius: 10px; box-shadow: inset 0 0 22px #0a0708, 0 10px 14px #000; font-family: "STKaiti", "KaiTi", "PingFang SC", serif; font-size: clamp(29px, 4.2vw, 72px); font-weight: 900; line-height: 1.08; letter-spacing: .04em; text-align: center; text-shadow: 3px 4px 1px #080507, 0 0 14px #ad241c; transform: rotate(-2deg); }
.logo-title strong { color: #ffbeb0; font-size: 1.24em; letter-spacing: .14em; text-shadow: 2px 2px 0 #591012, 0 0 12px #dd2c20; }
.strapline { position: absolute; z-index: 5; top: 30%; left: 4.3%; margin: 0; padding: .45em 1.2em; color: #d9c3a5; background: linear-gradient(90deg, rgba(15,14,12,.95), rgba(32,24,18,.78)); border: 1px solid #6f5338; font-size: clamp(14px, 1.55vw, 26px); font-weight: 900; letter-spacing: .12em; box-shadow: inset 0 0 12px #000, 0 5px 10px #000; transform: rotate(-1deg); }
.male { position: absolute; z-index: 3; width: 46%; left: 17%; bottom: -18%; filter: drop-shadow(0 10px 10px #000); }
.female { position: absolute; z-index: 2; width: 43%; left: 50%; bottom: -8%; filter: drop-shadow(0 10px 12px #000) drop-shadow(0 0 13px rgba(32,255,229,.25)); animation: female-float 4.4s ease-in-out infinite; }
.ghost-fires { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.ghost-fires i { position: absolute; width: clamp(12px,1.7vw,28px); aspect-ratio: .72; border-radius: 50% 50% 45% 45%; opacity: .78; background: radial-gradient(circle at 50% 68%, #eaffff 0 8%, #56fff0 12% 28%, #02b7ae 38%, rgba(0,117,114,.1) 72%); filter: blur(.2px) drop-shadow(0 0 10px #20f8e8) drop-shadow(0 0 20px rgba(17,235,221,.8)); animation: ghost-drift 3.2s ease-in-out infinite; }
.ghost-fires i::before { content: ""; position: absolute; left: 24%; top: -47%; width: 54%; height: 75%; border-radius: 60% 12% 55% 45%; background: linear-gradient(30deg, rgba(27,217,208,.12), #48f7e9 65%, rgba(132,255,247,.1)); transform: rotate(18deg); }
.ghost-fires i:nth-child(1) { left: 54%; top: 33%; }
.ghost-fires i:nth-child(2) { left: 72%; top: 13%; animation-delay: -.9s; transform: scale(.7); }
.ghost-fires i:nth-child(3) { left: 77%; top: 55%; animation-delay: -1.8s; transform: scale(1.1); }
.ghost-fires i:nth-child(4) { left: 62%; top: 61%; animation-delay: -2.5s; transform: scale(.6); }
@keyframes female-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
@keyframes ghost-drift { 0%,100% { margin-top: 0; opacity: .58; } 50% { margin-top: -18px; opacity: 1; filter: drop-shadow(0 0 12px #20f8e8) drop-shadow(0 0 26px rgba(17,235,221,.95)); } }
.live-panel { position: absolute; z-index: 5; width: 23%; top: 3.2%; right: 2.2%; filter: drop-shadow(0 12px 10px rgba(0,0,0,.8)); }
.creator-card { position: absolute; z-index: 7; left: 2.6%; bottom: 5.3%; width: 24%; }
.creator-likes { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.creator-like { position: absolute; right: calc(18% + 25px); top: 5%; color: #f54a78; font-family: Arial,sans-serif; font-size: clamp(36px,4vw,68px); line-height: 1; text-shadow: 0 0 11px currentColor, 0 4px 7px #000; opacity: 0; animation: creator-like-rise 2.6s ease-out infinite; }
.creator-thumb { font-size: clamp(30px,3.4vw,58px); filter: drop-shadow(0 0 8px rgba(64,173,255,.85)); }
.creator-like:nth-child(1) { color: #ff3f72; --drift: -24px; animation-delay: 0s; }
.creator-like:nth-child(2) { color: #5db7ff; --drift: 22px; animation-delay: -.52s; }
.creator-like:nth-child(3) { color: #ff7042; --drift: -8px; animation-delay: -1.04s; }
.creator-like:nth-child(4) { color: #ffd34e; --drift: 34px; animation-delay: -1.56s; }
.creator-like:nth-child(5) { color: #ff4f9a; --drift: -34px; animation-delay: -2.08s; }
@keyframes creator-like-rise { 0% { opacity: 0; transform: translate(0,8px) scale(.45) rotate(-10deg); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--drift),-150px) scale(1.2) rotate(14deg); } }
.download-area { position: absolute; z-index: 8; left: 29%; right: 2.2%; bottom: 3%; display: flex; align-items: flex-end; gap: 2.2%; }
.launch-notice { width: 100%; padding: .32em .8em; border: 2px solid #a44f3e; border-radius: 12px; background: linear-gradient(110deg, rgba(17,10,12,.96), rgba(76,22,21,.94)); box-shadow: inset 0 0 18px #080405, 0 8px 15px #000; color: #ffe4c7; font-size: clamp(20px, 2.5vw, 40px); font-weight: 900; letter-spacing: .12em; text-align: center; text-shadow: 0 2px 5px #000; }
.cta { width: 69%; transition: transform .18s ease, filter .18s ease; }
.cta img { width: 100%; transform-origin: center; animation: pulse 2.25s ease-in-out infinite; }
.cta:hover,.cta:focus-visible { transform: translateY(-5px) scale(1.015); filter: brightness(1.12); outline: none; }
.qr-card { width: 24%; filter: drop-shadow(0 8px 10px #000); }
.qr-card img { width: 100%; }
@keyframes pulse { 0%,100% { transform: scale(1); filter: brightness(1) drop-shadow(0 4px 7px rgba(0,0,0,.7)); } 50% { transform: scale(1.035); filter: brightness(1.14) drop-shadow(0 0 18px rgba(232,45,34,.75)); } }
.heart { position: absolute; z-index: 9; right: 2.8%; bottom: 38%; color: #ef4274; font-size: clamp(18px, 2.1vw, 36px); text-shadow: 0 2px 5px #000; pointer-events: none; animation: float-heart 2.3s ease-out forwards; }
@keyframes float-heart { from { opacity: 0; transform: translateY(15px) scale(.5) rotate(-8deg); } 18% { opacity: 1; } to { opacity: 0; transform: translate(-28px,-170px) scale(1.25) rotate(15deg); } }
.intro-panel { position: relative; min-height: 680px; background: #0b0b0b; }
.panel-bg { position: absolute; top: -18%; left: 0; width: 100%; height: 135%; object-fit: fill; opacity: .96; }
.panel-content { position: relative; z-index: 2; padding: 3.5% 4% 5.2%; }
h2 { display: flex; align-items: center; justify-content: center; gap: 2%; margin: 0 0 2%; color: #d9c4a5; font-size: clamp(26px, 3vw, 50px); letter-spacing: .16em; text-shadow: 0 3px 3px #000; }
h2 span { width: 26%; height: 2px; background: linear-gradient(90deg, transparent, #8f352f); position: relative; }
h2 span:last-child { transform: scaleX(-1); }
.intro-panel h2 span { display: none; }
.features { width: 76%; margin: auto; }
.features article { display: grid; grid-template-columns: 75px 1fr; align-items: center; gap: 22px; min-height: 108px; padding: 10px 0; border-bottom: 1px dashed rgba(171,126,76,.4); }
.features article:last-child { border: 0; }
.features img { width: 68px; max-height: 78px; object-fit: contain; margin: auto; }
.features h3 { margin: 0 0 6px; color: #d9a969; font-size: clamp(18px, 1.75vw, 29px); letter-spacing: .08em; }
.features p { margin: 0; color: #c8b9a5; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: clamp(13px, 1.15vw, 19px); line-height: 1.6; letter-spacing: .06em; }
.shots-panel { position: relative; padding: 2.2% 4% 4.8%; background: radial-gradient(ellipse at 50% 0, #171513, #080808 70%); }
.shots-title { margin: 0 0 2.5%; }
.screenshots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2%; max-width: 1320px; margin: 0 auto; }
.screenshots figure { position: relative; aspect-ratio: 326/593; margin: 0; padding: 6.4% 6.2% 14.7%; overflow: hidden; background: #090909; filter: drop-shadow(0 8px 9px #000); }
.screenshots figure::after { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; background: url("images/screenshot_frame.png") center/100% 100% no-repeat; }
.screenshots img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top; transform: scale(1.1); transform-origin: center top; clip-path: inset(0 0 9.2% 0); }
.screenshots figcaption { position: absolute; left: 6%; right: 6%; bottom: calc(3.1% + 10px); z-index: 4; color: #d7a15f; font-size: clamp(13px, 1.3vw, 22px); font-weight: 900; text-align: center; letter-spacing: .08em; }
footer { position: relative; min-height: 310px; display: grid; place-items: center; background: radial-gradient(ellipse at center, #151312, #050505 72%); }
.footer-frame { position: absolute; inset: auto 0 0; width: 100%; }
.footer-slogan { position: relative; z-index: 2; width: 64%; margin-bottom: 3%; filter: drop-shadow(0 8px 6px #000); }
@media (max-width: 760px) {
  .hero { aspect-ratio: auto; height: 760px; }
  .logo { width: 48%; left: 3%; }
  .logo-title { width: 52%; left: 3%; top: 3%; font-size: clamp(27px, 7vw, 48px); }
  .strapline { top: 25%; }
  .live-panel { width: 35%; right: -4%; }
  .female { width: 76%; left: 35%; bottom: 13%; }
  .male { width: 72%; left: -9%; bottom: 9%; }
  .creator-card { display: none; }
  .download-area { left: 4%; right: 4%; bottom: 2%; gap: 3%; }
  .launch-notice { font-size: clamp(20px, 5.5vw, 30px); }
  .cta { width: 74%; }
  .qr-card { width: 23%; }
  .intro-panel { min-height: 0; }
  .panel-bg { top: 0; height: 100%; object-fit: cover; }
  .panel-content { padding: 9% 6% 10%; }
  .features { width: 100%; }
  .features article { grid-template-columns: 54px 1fr; gap: 12px; min-height: 92px; }
  .features img { width: 48px; max-height: 58px; }
  .shots-panel { padding: 9% 6% 10%; }
  .shots-title { margin-bottom: 7%; }
  .screenshots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 12px; }
  .screenshots figure { flex: 0 0 58vw; scroll-snap-align: center; }
  footer { min-height: 170px; }
  .footer-slogan { width: 84%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .cta img,.female,.ghost-fires i { animation: none; } .creator-likes { display: none; } }