body.welcome-open{overflow:hidden}
#welcome.welcome{--welcome-bg:#a95446;--welcome-ink:#fff5eb;position:fixed;inset:0;max-width:none;max-height:none;width:100%;height:100%;height:100dvh;margin:0;padding:max(20px,env(safe-area-inset-top)) 24px max(20px,env(safe-area-inset-bottom));border:0;border-radius:0;background:var(--welcome-bg);color:var(--welcome-ink);overflow:auto;box-sizing:border-box;z-index:10000}
#welcome.welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
.welcome::backdrop{background:#151426}#welcome.welcome.space{--welcome-bg:#20265d;--welcome-ink:#ffdc83}#welcome.welcome.card{--welcome-bg:#392a60;--welcome-ink:#fff0ed}
.welcome-stage{position:relative;width:min(78vw,360px);flex:0 1 auto;min-height:0;aspect-ratio:4/5;max-height:56dvh}
.welcome-frame{position:absolute;inset:0;background:#000;overflow:hidden;isolation:isolate;border:1px solid #ffffff50;box-shadow:0 24px 65px #0003;border-radius:45% 45% 8px 8px}
.window .welcome-frame{transform:rotate(-4deg);border-radius:24px}.card .welcome-frame{border-radius:38px}.space .welcome-frame{border-radius:50%;inset:5% -2%;}
.welcome-title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;background:var(--welcome-bg);z-index:2}
.welcome-title p{font-size:16px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 18px}.welcome-title h2{font-family:inherit;font-size:clamp(3rem,12vw,4.7rem);line-height:1.12;margin:0 0 20px;color:inherit}.window .welcome-title h2{font-family:'Great Vibes',cursive}.welcome-title span{font-size:14px}.welcome-photo{width:100%;height:100%;object-fit:cover;opacity:0;display:block}
.welcome-actions{position:relative;z-index:3;text-align:center;width:min(100%,360px);flex-shrink:0}.welcome-caption{font-size:16px;margin:0 0 16px;color:inherit}.welcome-actions button{width:100%;font:inherit;cursor:pointer;border-radius:999px;padding:14px 20px;min-height:48px}.welcome-sound{border:0;background:var(--welcome-ink);color:var(--welcome-bg);font-weight:600!important}.welcome-sound small{display:block;font-size:14px;font-weight:400;margin-top:4px}.welcome-silent{background:transparent;border:1px solid #ffffff65;color:var(--welcome-ink);margin-top:12px}.welcome-actions button:focus-visible{outline:3px solid white;outline-offset:4px}
.welcome-rocket,.welcome-planet{position:absolute;width:32%;height:auto;pointer-events:none;z-index:2}.welcome-rocket{left:-15%;bottom:8%;animation:welcome-float 3s ease-in-out infinite}.welcome-planet{right:-14%;top:5%;animation:welcome-float 4s ease-in-out infinite reverse}
@keyframes welcome-float{50%{transform:translateY(-14px) rotate(6deg)}}
.welcome.departing{animation:welcome-out .85s ease forwards}.card.departing .welcome-frame{transition:transform .85s ease,border-radius .85s ease;transform:scale(2.7);border-radius:0}.departing .welcome-actions{opacity:0;transition:opacity .2s}.space.departing{animation:welcome-out 1.1s ease forwards}.space.departing .welcome-rocket{animation:welcome-launch 1.1s ease-in forwards}.space.departing .welcome-planet{transition:transform 1s;transform:translate(100px,-80px) rotate(35deg)}
@keyframes welcome-out{0%,35%{opacity:1}100%{opacity:0}}@keyframes welcome-launch{to{transform:translate(180px,-100vh) rotate(12deg)}}
@media(max-height:640px){#welcome.welcome{gap:12px}.welcome-stage{max-height:43dvh}.welcome-caption{margin-bottom:8px}.welcome-actions button{padding:10px 16px}.welcome-title span{display:none}}
@media(prefers-reduced-motion:reduce){.welcome-rocket,.welcome-planet{animation:none}.card.departing .welcome-frame{transform:none}}

.space .welcome-stage{aspect-ratio:1;max-height:49dvh}.space .welcome-frame{inset:0}

/* Explicit dimensions avoid collapsed flex/aspect-ratio stages in embedded browsers. */
#welcome.welcome{display:flex;visibility:visible;opacity:1;transform:none;left:0;top:0;right:0;bottom:0;height:100vh;height:100dvh;z-index:2147483000}.welcome-stage{height:min(450px,52vh);height:min(450px,52dvh);flex-shrink:0}.space .welcome-stage{width:min(78vw,360px,46vh);height:min(78vw,360px,46vh);max-height:none}#welcome.welcome.birthday{--welcome-bg:#176567;--welcome-ink:#fff3d5}.birthday .welcome-frame{border-radius:36px;transform:rotate(3deg)}

/* Programmatic focus on a non-interactive title must not draw a browser ring. */
h1.welcome-arrival-focus:focus{outline:none!important;box-shadow:none!important}