.completion-share,.atlas-welcome{position:fixed;z-index:85;color:#e4edf2;background:rgba(8,15,23,.96);border:1px solid rgba(191,218,233,.22);border-radius:18px;padding:20px;box-shadow:0 18px 60px #0008;font:14px/1.6 system-ui,sans-serif}
.completion-share[hidden],.atlas-welcome[hidden]{display:none!important}
.completion-share{left:50%;bottom:24px;transform:translateX(-50%);width:min(430px,calc(100vw - 32px));max-height:70dvh;overflow:auto}
.completion-share p,.atlas-welcome>p{color:#aabbc8;margin:8px 0 14px}.completion-share [data-dismiss]{float:right;background:transparent;border:0;color:inherit;font-size:24px;cursor:pointer}
.completion-share button[data-preview],.atlas-welcome>[data-continue]{padding:10px 18px;border:1px solid #758b9c;border-radius:8px;background:#d7e5ef;color:#13202a;cursor:pointer}
.completion-share textarea{display:block;width:100%;box-sizing:border-box;min-height:110px;margin:12px 0;background:#111f2b;color:#e4edf2;border:1px solid #536879;border-radius:8px;padding:10px}.completion-share textarea[hidden]{display:none}.completion-share [data-error]{color:#e4be9f}
/* One quiet companion invitation; no nested card chrome or duplicated copy. */
.atlas-welcome{left:auto;right:24px;top:auto;bottom:96px;width:min(316px,calc(100vw - 32px));max-height:calc(100dvh - 172px);padding:8px 34px 8px 6px;border:0;border-radius:16px;background:linear-gradient(110deg,rgba(7,14,23,.76),rgba(7,14,23,.4));box-shadow:0 8px 28px #0002;backdrop-filter:blur(16px);overflow:auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.atlas-welcome .wb-card{display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px;align-items:center;max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;overflow:visible;isolation:auto}
.atlas-welcome .wb-header{position:absolute;right:-34px;top:-4px;min-height:0;margin:0;padding:0;border:0}
.atlas-welcome .wb-kicker,.atlas-welcome .wb-description,.atlas-welcome .wb-footnote{display:none}
.atlas-welcome .wb-close{width:44px;height:44px;color:#c2ccd5;font-size:22px}
.atlas-welcome .wb-art{height:112px;margin:0;overflow:visible}.atlas-welcome .wb-image{width:90px;height:132px;max-width:none;inset:-10px auto auto -4px;mask-image:none;-webkit-mask-image:none;object-fit:contain}
.atlas-welcome .wb-content{text-align:left}.atlas-welcome .wb-title{font:600 18px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.02em;margin:0;color:#f2f5f8}
.atlas-welcome .wb-actions{display:flex;align-items:center;gap:8px;margin-top:8px;padding:0;border:0;flex-wrap:wrap}
.atlas-welcome .wb-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;min-height:0;padding:0;margin:0}
.atlas-welcome .wb-claim,.atlas-welcome [data-continue]{display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:44px;height:44px;padding:0 3px;border:0;border-radius:7px;background:none;box-shadow:none;font:500 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0;cursor:pointer}
.atlas-welcome .wb-claim{color:#c0e0ff}.atlas-welcome [data-continue]{color:#9eabb8}.atlas-welcome .wb-claim::after{content:'›';font-size:19px;margin-left:6px}
.atlas-welcome .wb-claim:hover:not(:disabled),.atlas-welcome [data-continue]:hover{background:#ffffff09;transform:none}
.atlas-welcome .wb-claim:disabled{color:#9eabb8;background:none}.atlas-welcome .wb-claim:disabled::after{display:none}
.atlas-welcome [data-notice]{margin:0 0 4px 92px;color:#bdc9d4;font-size:11px;line-height:1.5}.atlas-welcome [data-notice]:empty{display:none}
.atlas-welcome button:focus-visible{outline:2px solid #a4ccef;outline-offset:2px}
body:has(.atlas-welcome:not([hidden])) #shell .dossier{visibility:hidden}
body:has(.atlas-welcome:not([hidden])) #shell .kanshan-hub__dock>*{visibility:hidden;pointer-events:none}
body:has(#shell.spatial-immersive) .atlas-welcome{visibility:hidden;pointer-events:none}
@media(max-width:600px){.atlas-welcome{right:12px;bottom:92px;width:min(316px,calc(100vw - 24px));max-height:calc(100dvh - 176px)}.completion-share{bottom:90px;box-sizing:border-box}}
@media(orientation:landscape) and (max-height:520px){.atlas-welcome{right:12px;bottom:84px;max-height:calc(100dvh - 164px)}.atlas-welcome .wb-art{height:88px}.atlas-welcome .wb-image{height:104px;width:78px;top:-8px}.atlas-welcome .wb-title{font-size:17px}}
/* The first journey includes the welcome gift; the four operation tips are step 5. */
.atlas-welcome[data-stage]{width:min(360px,calc(100vw - 32px));padding:18px 20px;box-sizing:border-box;background:rgba(9,17,28,.94)}
.welcome-journey__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:#9aaeba;font-size:11px}
.welcome-journey__head button,.welcome-journey__actions button{min-height:44px;border:0;background:none;color:#a9bfcc;cursor:pointer;font:inherit;padding:8px}
.welcome-journey__head button{margin:-8px -8px -8px 0}.welcome-journey__mascot{float:left;width:40px;height:48px;object-fit:contain;margin:0 10px 8px 0}
.atlas-welcome [data-title]{font-size:19px;line-height:1.45;margin:0 0 10px;outline:none;letter-spacing:-.02em}
.atlas-welcome [data-copy],.atlas-welcome [data-overview]{font-size:13px;line-height:1.8;color:#b9c8d4;margin:0 0 10px;white-space:pre-line}
.welcome-journey__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;clear:both;margin-top:12px}
.welcome-journey__actions [data-next]{border-radius:10px;background:#dcebf3;color:#142330;padding:10px 14px;font-weight:600}
.welcome-journey__actions [data-next]:disabled{opacity:.5}.atlas-welcome [hidden]{display:none!important}
.atlas-welcome[data-stage] .wb-header{display:none}.atlas-welcome[data-stage] .wb-art{height:100px}.atlas-welcome[data-stage] .wb-image{height:118px;top:-8px}
.atlas-welcome[data-stage] .wb-content .wb-title{font-size:17px}.atlas-welcome[data-stage] [data-notice]:empty{display:none}
@media(max-height:520px) and (orientation:landscape){.atlas-welcome[data-stage]{right:18px;bottom:80px;max-height:calc(100dvh - 100px);padding:12px 16px}.atlas-welcome[data-stage] .welcome-journey__head{margin-bottom:5px}.atlas-welcome[data-stage] [data-copy]{line-height:1.55}.welcome-journey__actions{margin-top:6px}}
.atlas-welcome[data-stage="3"] .wb-claim:not(:disabled),.atlas-welcome[data-stage="7"] .wb-claim:not(:disabled){background:#dcebf3;color:#142330;padding:10px 14px;border-radius:10px}
.atlas-welcome[data-stage="3"]:has(.wb-card[data-status="pending"]) [data-next],.atlas-welcome[data-stage="3"]:has(.wb-card[data-status="error"]) [data-next]{background:none;color:#b5c4ce;font-weight:400}
@media(max-height:520px) and (orientation:landscape){
  .atlas-welcome[data-stage]{max-height:calc(100dvh - 160px)}
  .atlas-welcome[data-stage] .welcome-journey__head{position:sticky;top:-12px;background:#09111c;z-index:2;padding-block:4px}
  .atlas-welcome[data-stage] .welcome-journey__actions{position:sticky;bottom:-12px;background:#09111c;z-index:2;padding-block:8px}
}
@media(max-height:520px) and (orientation:landscape){
  body:has(.atlas-welcome:not([hidden])) #shell .spatial-controls{left:18px;transform:none;width:calc(100vw - 416px);max-width:calc(100vw - 416px)}
}
@media(max-height:520px) and (orientation:landscape){
  .atlas-welcome[data-stage]{display:flex;flex-direction:column;overflow:hidden}
  .atlas-welcome[data-stage] .welcome-journey__head,.atlas-welcome[data-stage] .welcome-journey__actions{position:static;flex-shrink:0}
  .atlas-welcome[data-stage] .welcome-journey__body{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .atlas-welcome[data-stage] .welcome-journey__actions{padding-bottom:0}
}
/* One persistent guide: the scene remains behind it, with no image swap. */
.welcome-guide{position:fixed;left:0;top:0;width:120px;height:150px;z-index:86;pointer-events:none;transform-origin:0 0;isolation:isolate}
.welcome-guide[hidden]{display:none!important}
.welcome-guide::before{content:'';position:absolute;inset:28% -10% 0;border-radius:50%;background:radial-gradient(ellipse,rgba(109,178,211,.14),transparent 68%);z-index:-1}
.welcome-guide img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 12px #03091470) drop-shadow(0 0 3px #b4deef25);transform-origin:50% 65%;animation:welcome-breathe 1.9s ease-in-out infinite alternate}
.welcome-guide.is-flying{will-change:transform}
.welcome-guide.is-flying img,.welcome-guide[data-quiet="true"] img{animation-play-state:paused}
@keyframes welcome-breathe{from{transform:translateY(1px) rotate(-.6deg)}to{transform:translateY(-4px) rotate(.6deg)}}
.atlas-welcome[data-stage]{display:flex;flex-direction:column;overflow:visible;background:linear-gradient(140deg,rgba(15,30,46,.88),rgba(8,17,28,.92));border:1px solid #beddeb21;box-shadow:0 16px 40px #02081140;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.atlas-welcome[data-stage] .welcome-journey__head,.atlas-welcome[data-stage] .welcome-journey__actions{position:static;flex-shrink:0;background:none}
.atlas-welcome[data-stage] .welcome-journey__body{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.atlas-welcome[data-stage] .welcome-journey__mascot{position:absolute;right:10px;top:-74px;float:none;display:block;width:72px;height:90px;margin:0;animation:none;filter:none}
.atlas-welcome[data-stage] [data-notice]{margin:8px 0 0}
.atlas-welcome[data-stage="1"]{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 120px);background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:12px}
.atlas-welcome[data-stage="1"] .welcome-journey__head{color:#c1d0dc;margin-bottom:4px}
.atlas-welcome[data-stage="1"] [data-intro]{display:flex;flex-direction:column;align-items:center;text-align:center}
.atlas-welcome[data-stage="1"] .welcome-journey__mascot{position:static;flex:none;width:156px;height:195px;margin:0 0 12px}
.atlas-welcome[data-stage="1"] [data-title]{font-size:23px;margin-bottom:14px;text-shadow:0 2px 12px #000}
.atlas-welcome[data-stage="1"] [data-copy]{position:relative;width:100%;min-height:112px;padding:18px 22px;border:1px solid #beddeb21;border-radius:20px;background:linear-gradient(140deg,rgba(15,30,46,.88),rgba(8,17,28,.92));backdrop-filter:blur(12px);color:#e1ebf1;font-size:15px;line-height:1.8;text-align:left;box-sizing:border-box;margin:0}
.atlas-welcome[data-stage="1"].is-speaking [data-copy]::after{content:'▍';color:#a8d4ec;animation:kanshan-cursor .7s steps(1) infinite}
.atlas-welcome[data-stage="1"] .welcome-journey__actions{justify-content:center;margin-top:16px}
@keyframes kanshan-cursor{50%{opacity:0}}
/* Leave the sky visible above a portrait bottom card; reserve the character's berth. */
@media(max-width:600px){
  .atlas-welcome[data-stage]:not([data-stage="1"]){left:16px;right:16px;bottom:calc(28px + env(safe-area-inset-bottom,0px));width:auto;max-height:calc(100dvh - 280px)}
  .atlas-welcome[data-stage="1"] .welcome-journey__mascot{width:128px;height:160px}
  .atlas-welcome[data-stage="1"] [data-title]{font-size:21px}
  .atlas-welcome[data-stage="1"] [data-copy]{padding:16px 18px}
}
/* Short landscape uses a side-by-side greeting and a compact dock. */
@media(max-height:520px) and (orientation:landscape){
  .atlas-welcome[data-stage]:not([data-stage="1"]){left:auto;right:16px;bottom:20px;width:min(340px,calc(100vw - 220px));max-height:calc(100dvh - 140px);padding:12px 16px}
  .atlas-welcome[data-stage] .welcome-journey__mascot{width:56px;height:70px;top:-57px;right:16px}
  .atlas-welcome[data-stage="1"]{top:52%;max-height:calc(100dvh - 80px);width:min(580px,calc(100vw - 80px));padding:10px}
  .atlas-welcome[data-stage="1"] [data-intro]{display:grid;grid-template-columns:104px 1fr;gap:8px 18px;text-align:left}
  .atlas-welcome[data-stage="1"] .welcome-journey__mascot{grid-column:1;grid-row:1 / 3;width:104px;height:130px;margin:0}
  .atlas-welcome[data-stage="1"] [data-title]{grid-column:2;font-size:18px;margin:0}
  .atlas-welcome[data-stage="1"] [data-copy]{grid-column:2;min-height:90px;font-size:13px;padding:12px 16px}
  .atlas-welcome[data-stage="1"] .welcome-journey__actions{margin-top:8px}
  body:has(.atlas-welcome:not([hidden])) #shell .spatial-controls{width:calc(100vw - 392px);max-width:calc(100vw - 392px)}
}
.has-welcome-guide .tour-mascot{opacity:0;width:44px;height:55px}
body:has(.atlas-welcome[data-stage="1"]:not([hidden])) #shell .spatial-controls{visibility:hidden;pointer-events:none}
#shell .spatial-labels{transition:opacity .65s ease}
body:has(.atlas-welcome[data-stage="1"]:not([hidden])) #shell .spatial-labels{opacity:0!important;visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){.welcome-guide img,.atlas-welcome.is-speaking [data-copy]::after{animation:none}#shell .spatial-labels{transition:none}}

/* Subsequent onboarding is a small caption, leaving the scene available to inspect. */
.atlas-welcome[data-stage]:not([data-stage="1"]){width:min(320px,calc(100vw - 24px));padding:10px 14px;border-radius:14px}
.atlas-welcome[data-stage]:not([data-stage="1"]) .welcome-journey__head{margin-bottom:4px}
.atlas-welcome[data-stage]:not([data-stage="1"]) [data-title]{font-size:16px;line-height:1.4;margin-bottom:6px}
.atlas-welcome[data-stage]:not([data-stage="1"]) [data-copy]{font-size:13px;line-height:1.65;margin-bottom:6px}
.atlas-welcome[data-stage]:not([data-stage="1"]) .welcome-journey__actions{margin-top:6px;gap:4px}
@media(max-width:600px){
 .atlas-welcome[data-stage]:not([data-stage="1"]){left:auto;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));max-height:36dvh}
 .atlas-welcome[data-stage] .welcome-journey__mascot{width:56px;height:70px;top:-57px}
 .atlas-welcome[data-stage="1"] .welcome-journey__mascot{width:128px;height:160px}
}
@media(max-height:520px) and (orientation:landscape){
 .atlas-welcome[data-stage]:not([data-stage="1"]){width:300px;right:12px;bottom:16px;max-height:calc(100dvh - 130px)}
}

/* Operation tips use the same compact caption scale as the welcome guide. */
#shell .product-tour{width:min(300px,calc(100vw - 24px));padding:12px 14px;border-color:#bdd8ef33;border-radius:14px;box-shadow:0 8px 24px #0004}
#shell .product-tour .tour-mascot{width:32px;height:40px}
#shell .product-tour h2{font-size:16px;margin:6px 0}
#shell .product-tour #tour-copy{font:13px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin-bottom:8px}
#shell .product-tour .product-tour__meta{gap:6px}
#shell .product-tour button{padding:7px 10px}
@media(max-width:600px){#shell .product-tour{left:auto;right:12px;bottom:16px;max-height:40dvh}}
@media(max-height:520px) and (orientation:landscape){#shell .product-tour{max-height:calc(100dvh - 112px);bottom:16px}}

/* Show the introduction first; the character fades in at its final anchor. */
.welcome-guide.is-arriving{animation:welcome-appear .65s ease-out .35s both}
@keyframes welcome-appear{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.welcome-guide.is-arriving{animation:none}}

/* The centered introduction is the only headline while the 2.5D sky stays visible. */
body:has(.atlas-welcome[data-stage="1"]:not([hidden])) #shell :is(.hero-copy,.chapter-nav,.scene-catalog,.journey-footer){display:none!important}

/* Keep the companion in its central entrance, without flashing the idle dock first. */
body[data-welcome-pending] :is(.kanshan-hub__dock,.hero-copy,.chapter-nav,.journey-footer){visibility:hidden;pointer-events:none}

.atlas-welcome[data-stage="1"]{animation:welcome-appear .65s ease-out .18s both}
@media(prefers-reduced-motion:reduce){.atlas-welcome[data-stage="1"]{animation:none}}

.welcome-preparing{display:flex;align-items:center;justify-content:center;gap:7px;flex-basis:100%;font-size:12px;color:#afc5d3;padding-top:4px}.welcome-preparing[hidden]{display:none!important}.welcome-preparing i{width:12px;height:12px;border:1.5px solid #b3d6e233;border-top-color:#c5e8f0;border-radius:50%;animation:welcome-loading .8s linear infinite}@keyframes welcome-loading{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.welcome-preparing i{animation:none}}

.atlas-welcome[data-stage="1"] .welcome-preparing[hidden]{display:flex!important;visibility:hidden}

/* A restrained cue for the next action, kept separate from Back. */
.atlas-welcome[data-stage="2"] .welcome-journey__actions [data-next]:not(:disabled){position:relative;border:1px solid #d8f5ff;background:linear-gradient(145deg,#effaff,#c4e5f2);color:#102737;box-shadow:0 0 0 3px #9eddf314,0 5px 20px #74cdea26;transition:box-shadow .2s ease,transform .16s ease}
.atlas-welcome[data-stage="2"] .welcome-journey__actions [data-next]:not(:disabled)::after{content:'';position:absolute;inset:-5px;border:1px solid #a5e1f66b;border-radius:14px;pointer-events:none;animation:welcome-next-glow 2.8s ease-in-out 3}
.atlas-welcome[data-stage="2"] .welcome-journey__actions [data-next]:hover{box-shadow:0 0 0 4px #9eddf326,0 6px 26px #74cdea45}
.atlas-welcome[data-stage="2"] .welcome-journey__actions [data-next]:active{transform:scale(.98)}
@keyframes welcome-next-glow{0%,100%{opacity:.2;transform:scale(.99)}50%{opacity:.75;transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){.atlas-welcome[data-stage="2"] .welcome-journey__actions [data-next]::after{animation:none!important}.atlas-welcome[data-stage="2"] .welcome-journey__actions [data-next]{transition:none!important}}

#shell[data-motion="paused"] .atlas-welcome [data-next]::after{animation:none!important}
