#welcome{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#001c19;color:#e8c592;overflow:hidden;font-family:BrandTech,'Microsoft YaHei',sans-serif;isolation:isolate}#welcome::backdrop{background:#001612}body.welcome-open{overflow:hidden}.welcome-world{position:absolute;inset:0;background:linear-gradient(180deg,#001a1633,#00161215 40%,#00161266),url('assets/welcome-world.webp') center/cover no-repeat;z-index:-2}.welcome-world:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 37%,#00191680,transparent 53%)}#welcome-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}.welcome-top{position:absolute;top:30px;left:4%;right:4%;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:9px;letter-spacing:2px;color:#ba9a6d}.welcome-top button,.welcome-meta button{border:1px solid #b48a4c66;color:#e4bf85;background:#001c1990;padding:10px 14px;cursor:pointer;font:10px BrandTech,sans-serif;letter-spacing:1px}.welcome-top button:hover,.welcome-meta button:hover{border-color:#f3c27d;background:#18392d}.welcome-center{position:absolute;top:20%;left:50%;transform:translateX(-50%);width:min(800px,88%);text-align:center}.welcome-center h2{display:flex;align-items:center;flex-direction:column;gap:22px}.welcome-center h2>span{font:500 clamp(13px,1.3vw,20px) BrandTech,sans-serif;letter-spacing:.45em;color:#dcb071;text-shadow:0 2px 14px #000}.welcome-center .brand-wordmark{width:min(620px,90%);filter:drop-shadow(0 6px 18px #0008)}#welcome-subtitle{font-size:clamp(13px,1.65vw,23px);letter-spacing:.5px;line-height:1.5;color:#f2dbb9;margin:25px 0 28px;text-shadow:0 2px 8px #000}#welcome-enter{padding:15px 25px;background:linear-gradient(120deg,#8c421d,#c48442 50%,#925125);border:1px solid #e1ad6b;color:#fff1d7;box-shadow:0 8px 35px #0006,inset 0 1px 0 #f3d29b55;font:600 11px BrandTech,sans-serif;letter-spacing:2px;cursor:pointer;transition:transform .25s,box-shadow .25s}#welcome-enter span{margin-left:30px}#welcome-enter:hover{transform:translateY(-3px);box-shadow:0 10px 35px #c2823633}.welcome-bottom{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);width:min(720px,88%);padding:16px 22px 10px;background:linear-gradient(90deg,#001b18d9,#00241ed9,#001b18d9);border:1px solid #93704455;backdrop-filter:blur(10px)}.welcome-stages{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;color:#8c977e}.welcome-stages .current{color:#ffcb82;text-shadow:0 0 14px #ca863755}.welcome-progress{height:2px;background:#7c713d44;margin:14px 0}.welcome-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ac5b27,#fbd391);transform:scaleX(0);transform-origin:left}.welcome-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:10px;color:#d4bd95}.welcome-meta button{font-size:8px;padding:7px 10px;white-space:nowrap}.welcome-note{font-size:7px;letter-spacing:1.2px;color:#8e9b89;margin-top:10px;text-align:center}#replay-welcome{border:0;background:none;color:inherit;font:10px BrandTech,sans-serif;cursor:pointer;padding:0}#welcome button:focus-visible{outline:2px solid #ffdc9c;outline-offset:5px}@media(max-width:720px){.welcome-world{background-position:55% center}.welcome-center{top:25%}.welcome-center h2{gap:18px}.welcome-center h2>span{letter-spacing:.3em}.welcome-top{top:20px;font-size:7px;letter-spacing:1px}.welcome-top button{font-size:8px;padding:9px}.welcome-bottom{bottom:18px;padding:14px}.welcome-stages{font-size:8px;letter-spacing:.6px}.welcome-meta{font-size:8px}.welcome-note{font-size:6px;letter-spacing:.3px}#welcome-subtitle{margin:20px 0 25px}.welcome-center .brand-wordmark{width:94%}}@media(max-height:600px) and (min-width:721px){.welcome-center{top:16%}.welcome-center .brand-wordmark{width:390px}.welcome-center h2{gap:10px}#welcome-subtitle{font-size:16px;margin:12px 0}#welcome-enter{padding:10px 20px}.welcome-bottom{bottom:12px;padding:10px 18px}.welcome-note{display:none}}

/* Bidirectional crossfade, with a background-free scroll invitation. */
#welcome{opacity:0;transition:opacity 850ms cubic-bezier(.22,.61,.36,1)}
#welcome::backdrop{background:transparent}
#welcome.is-visible{opacity:1}
#welcome-scroll{display:inline-block;margin:2px 0 0;padding:12px 4px;color:#e9c899;font:400 13px BrandTech,sans-serif;letter-spacing:1.3px;background:none;border:0;box-shadow:none;cursor:pointer;animation:welcome-scroll-drift 2.8s ease-in-out infinite;text-shadow:0 2px 10px #00130e}
#welcome-scroll:hover{color:#ffe3b4}
#welcome-scroll:focus-visible{outline:none;color:#fff0ca;text-shadow:0 0 12px #d7a85e88}
@keyframes welcome-scroll-drift{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
html{overscroll-behavior-y:none}
@media(prefers-reduced-motion:reduce){#welcome{transition-duration:260ms}#welcome-scroll{animation:none}}

#welcome-scroll,#welcome-scroll:hover,#welcome-scroll:active,#welcome-scroll:focus,#welcome-scroll:focus-visible{border:0;outline:none;box-shadow:none;background:transparent}