.welcome-intro[open] {
 width:min(830px,calc(100% - 24px));
 max-height:calc(100dvh - 24px);
 border:1px solid color-mix(in srgb,var(--brand-secondary) 44%,var(--line));
 border-radius:19px;
 background:var(--panel);
 box-shadow:0 28px 100px #060a08b3;
 animation:welcome-entrance .24s ease-out both;
}
.welcome-intro::backdrop { background:#0b140ce0; backdrop-filter:blur(5px); }
.welcome-intro.is-dismissing[open],
.welcome-intro.is-dismissing::backdrop {
 animation:welcome-dissolve var(--welcome-exit-duration,640ms) ease-in both;
}
.welcome-header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; padding:15px clamp(12px,3vw,26px); }
.welcome-header img { display:block; width:50px; height:50px; object-fit:contain; background:#fffcf3; border-radius:10px; }
.welcome-kicker { color:var(--brand-secondary); font-size:.61rem; letter-spacing:.13em; font-weight:700; text-transform:uppercase; overflow-wrap:anywhere; }
.welcome-header h2 { color:var(--text); font-size:clamp(1.3rem,3vw,1.9rem); line-height:1.15; letter-spacing:-.04em; margin-top:4px; }
.welcome-skip { min-height:44px; padding:6px 9px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--text); font-size:.79rem; }
.welcome-skip:hover { color:var(--text); background:var(--bg); }

.welcome-scene { overflow:hidden; background:#17211b; border-block:1px solid var(--line); }
.welcome-scene svg { display:block; width:100%; height:min(385px,52dvh); }
.welcome-stage { position:relative; width:900px; height:450px; }
.welcome-performer,.welcome-ground,.welcome-gate { display:block; width:900px; height:450px; }
.welcome-performer,.welcome-ground { position:absolute; inset:0; }

.welcome-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px; padding:9px clamp(12px,3vw,26px); }
.welcome-actions span { color:var(--muted); font-size:.76rem; }
.welcome-actions button { min-height:44px; padding:8px 12px; font-size:.77rem; }
.welcome-progress { height:3px; background:var(--brand-primary); transform-origin:left; }
.welcome-scene.is-playing ~ .welcome-progress { animation:welcome-progress var(--welcome-duration) linear both; }

@keyframes welcome-entrance { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
@keyframes welcome-dissolve { from { opacity:1; } to { opacity:0; } }
@keyframes welcome-progress { from { transform:scaleX(1); } to { transform:scaleX(0); } }

@media (max-width:580px) {
 .welcome-header { gap:8px; padding-block:11px; }
 .welcome-header img { width:37px; height:37px; }
 .welcome-kicker { font-size:.51rem; }
 .welcome-skip { font-size:.72rem; padding-inline:5px; }
 .welcome-scene svg { height:min(300px,51dvh); }
}
@media (prefers-reduced-motion:reduce) {
 .welcome-intro[open],.welcome-intro::backdrop,.welcome-intro * { animation:none!important; }
 .welcome-progress { display:none; }
}