*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:#020516;color:#e5e7eb}#app{width:100%;height:100%;position:relative}.background-gradient{position:absolute;top:0;right:0;bottom:0;left:0;background:#020516;opacity:1;pointer-events:none}.content{position:relative;z-index:1;width:100%;height:100%;display:flex;flex-direction:column;align-items:stretch;justify-content:center}.center-area{flex:1;display:flex;align-items:center;justify-content:flex-start;padding-left:4vw;position:relative;z-index:1}.center-images{position:relative;width:40vw;max-width:40vw;aspect-ratio:16 / 9;display:flex;align-items:center;justify-content:center}.center-images.ship-animate{animation:ship-fly 6s ease-in-out forwards}.center-video{width:100%;height:100%;object-fit:contain;border-radius:0;box-shadow:none;background:transparent}.center-final-image{width:100%;height:100%;object-fit:contain}@keyframes ship-fly{0%{transform:translate(0) scale(1)}35%{transform:translate(45vw) scale(1)}70%{transform:translate(22vw) scale(1.4)}to{transform:translate(22vw) scale(1.6)}}.center-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1.02);transition:opacity .8s ease-in-out,transform 1.2s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 24px 80px rgba(0,0,0,.8));will-change:opacity,transform}.center-image.active{opacity:1;transform:scale(1)}.center-area.fly-out{animation:fly-out 4s ease-in-out forwards}@keyframes fly-out{0%{transform:translateY(0) scale(1);opacity:1}40%{transform:translateY(-10vh) scale(1.08)}to{transform:translateY(-120vh) scale(1.12);opacity:0}}.slogan-area{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:10vh;gap:28px;background:radial-gradient(circle at top,rgba(56,189,248,.1),transparent 60%),radial-gradient(circle at bottom,rgba(34,197,94,.12),transparent 60%);opacity:0;transform:translateY(32px);transition:opacity 1.6s ease-out,transform 1.6s ease-out;z-index:4}.slogan-area.visible{opacity:1;transform:translateY(0)}.slogan-area.hidden{pointer-events:none}.slogan-logo{width:260px;max-width:26vw;filter:drop-shadow(0 18px 50px rgba(0,0,0,.9))}.slogan-text-main{font-size:40px;letter-spacing:.24em;text-indent:.24em;font-weight:700;color:#f9fafb;text-shadow:0 0 24px rgba(59,130,246,.65)}.slogan-text-sub{font-size:24px;color:#e5e7eb;opacity:.9}.danmu-layer{pointer-events:none;position:absolute;top:8vh;right:0;bottom:16vh;left:0;overflow:hidden;z-index:3}.planet-layer{position:absolute;top:10vh;right:4vw;bottom:18vh;width:20vw;display:flex;flex-direction:column;align-items:center;justify-content:space-around;pointer-events:none;z-index:1}.planet{border-radius:999px;box-shadow:0 0 40px #3b82f6b3;animation:planet-float 12s ease-in-out infinite}.planet-1{width:120px;height:120px;background:radial-gradient(circle at 30% 30%,#f97316,#b91c1c);animation-delay:0s}.planet-2{width:90px;height:90px;background:radial-gradient(circle at 30% 30%,#22c55e,#065f46);animation-delay:-4s}.planet-3{width:70px;height:70px;background:radial-gradient(circle at 30% 30%,#3b82f6,#1d4ed8);animation-delay:-8s}@keyframes planet-float{0%{transform:translateY(0) translate(0) scale(1)}50%{transform:translateY(-18px) translate(-10px) scale(1.06)}to{transform:translateY(0) translate(0) scale(1)}}.danmu-item{position:absolute;white-space:nowrap;padding:8px 18px;border-radius:999px;background:#0f172ae6;border:1px solid rgba(148,163,184,.6);color:#e5e7eb;font-size:16px;display:inline-flex;align-items:center;gap:8px;box-shadow:0 12px 40px #0f172ae6}.danmu-tag{font-size:12px;padding:2px 8px;border-radius:999px;background:#3b82f62e;color:#93c5fd}.danmu-text{max-width:460px;overflow:hidden;text-overflow:ellipsis}@keyframes danmu-move{0%{transform:translate(100vw)}to{transform:translate(-120%)}}.bottom-bar{position:absolute;left:0;right:0;bottom:32px;padding:0 7vw}.progress-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:18px;color:#e5e7eb}.progress-label span{font-variant-numeric:tabular-nums;color:#93c5fd}.progress-track{width:100%;height:18px;border-radius:999px;background:#0f172ae0;overflow:hidden;border:1px solid rgba(148,163,184,.65);box-shadow:0 16px 45px #0f172ae6}.progress-fill{width:0%;height:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e,#3b82f6,#a855f7);box-shadow:0 0 18px #3b82f6cc;transition:width .9s cubic-bezier(.22,1,.36,1)}@media (max-width: 1024px){.center-images{width:380px}.slogan-text-main{font-size:32px}.slogan-text-sub{font-size:18px}}