/* Approved welcome and install-help comps, rendered with live type and SVG. */
body.onboarding-open #scene-atmosphere{display:block}
body.onboarding-open>.ambient,body.onboarding-open #entry-screen,body.onboarding-open #home,body.onboarding-open #session,body.onboarding-open #app-dock{visibility:hidden}
body.onboarding-departing #home,body.onboarding-departing #app-dock{visibility:visible}
body.onboarding-departing .onboard-header{visibility:hidden}
#onboarding{position:fixed;inset:0;z-index:20;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;color:var(--scene-ink);-webkit-user-select:none;user-select:none}
.onboard-shell{display:flex;flex-direction:column;width:min(100%,450px);min-height:100dvh;margin:0 auto;padding:0 max(28px,env(safe-area-inset-right)) 0 max(28px,env(safe-area-inset-left))}
.onboard-header{position:relative;flex:0 0 auto;height:calc(var(--safe-top) + 100px);padding-top:calc(var(--safe-top) + 30px);display:flex;justify-content:center;align-items:flex-start}
.onboard-mark{width:25px;height:38px;content:url('assets/mark-forest.svg')}
html[data-theme="dark"] .onboard-mark{content:url('assets/mark-lemon.svg')}
.onboard-back{position:absolute;top:calc(var(--safe-top) + 25px);left:-8px;width:44px;height:48px;padding:12px;border:0;background:none;color:inherit}
.onboard-back svg,.onboard-primary svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.onboard-content{flex:1;padding:25px 0 40px;min-width:0}
#onboarding h1{font:400 clamp(32px,8.6vw,40px)/1.15 Outfit,sans-serif;letter-spacing:0;margin:0;outline:0;overflow:visible;padding:0 .14em .2em;margin-inline:-.14em}
#onboarding h1 em{font:400 italic 1.18em/1.3 Playfair,serif;color:var(--scene-accent);white-space:nowrap}
.install-message{margin-top:30px;border:1px solid var(--scene-line);background:var(--scene-dock);border-radius:30px}
.onboard-app{display:flex;flex-direction:column;align-items:center;gap:12px;margin:42px 0 0;font-size:17px}
.onboard-icon{width:72px;height:72px;border-radius:20px;object-fit:contain;-webkit-touch-callout:none;-webkit-user-drag:none;pointer-events:none}
.onboard-footer{flex:0 0 auto;padding:8px 0 calc(var(--safe-bottom) + 24px);text-align:center}
.onboard-primary{display:flex;width:100%;min-height:58px;padding:12px 20px;align-items:center;justify-content:center;gap:17px;border-radius:40px;border:1px solid var(--scene-line);background:linear-gradient(135deg,#f8f3e412,#efe4b51c),var(--scene-dock);color:inherit;font:400 19px/1.3 Outfit,sans-serif;box-shadow:inset 0 1px 0 #f8f3e412;touch-action:manipulation}
.onboard-primary svg{color:var(--scene-accent)}
.onboard-secondary{margin:10px 0 0;min-height:44px;padding:10px 0;color:inherit;background:none;border:0;font:400 14px/1.5 Outfit,sans-serif}
.onboard-secondary button{padding:8px 0;border:0;min-height:44px;text-decoration:underline;text-underline-offset:5px;color:inherit;background:none}
body.arrival-pending #onboarding .onboard-content,body.arrival-pending #onboarding .onboard-footer{opacity:0}
.install-platform{display:flex;gap:8px;margin:18px 0 24px}
.install-platform button{flex:1;min-height:44px;padding:8px 6px;color:var(--scene-dim);background:none;border:1px solid transparent;border-radius:22px;font:400 12px/1.2 Outfit,sans-serif}
.install-platform button[aria-pressed="true"]{color:var(--scene-ink);background:var(--scene-dock);border-color:var(--scene-line)}
#onboarding .install-subtitle{font-size:.8em}
.install-steps{display:flex;flex-direction:column;gap:14px;padding:0;margin:0;list-style:none}
.install-row{display:grid;grid-template-columns:minmax(0,1fr) 100px;align-items:center;gap:14px;min-width:0}
.install-label{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font:400 14px/1.4 Outfit,sans-serif}
.install-number{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#efe4b520;color:var(--scene-accent);font-size:15px}
.install-art{min-width:0;overflow:hidden;padding:14px 10px;border-radius:21px;border:1px solid var(--scene-line);background:#f8f3e40d;font:400 10px/1.4 Outfit,sans-serif;color:#313131}
.browser-toolbar{display:flex;gap:6px;align-items:center;justify-content:space-between;background:#f8f3e4df;padding:10px 7px;border-radius:14px;min-height:56px}
.browser-toolbar svg,.system-list svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;flex-shrink:0}
.browser-toolbar>span:not(.browser-address){display:grid;place-items:center;min-width:22px;min-height:28px}
.browser-toolbar>span:first-child,.browser-toolbar>span:nth-child(2):not(.browser-address){font-size:23px;color:#817C50}
.browser-address{flex:1;font-size:9px;background:#817c5018;padding:7px 5px;border-radius:16px}
.system-list{background:#f8f3e4df;border-radius:14px;overflow:hidden}
.system-list>div{padding:9px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #4a4c3715}
.system-list>div:last-child{border-bottom:0}
.system-confirm{padding:10px;background:#f8f3e4ed;border-radius:14px}
.system-bar{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:9px;color:#4A4C37}
.system-bar>span{padding:5px 1px}
.system-app{display:flex;align-items:center;gap:8px;margin:10px 0}
.system-app .onboard-icon{width:31px;height:31px;border-radius:9px}
.system-app strong{font-size:11px;font-weight:450}
.system-toggle{display:flex;align-items:center;justify-content:space-between;font-size:8px;gap:3px}
.system-toggle i{position:relative;flex-shrink:0;width:25px;height:15px;border-radius:12px;background:#4A4C37}
.system-toggle i:after{content:'';position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#F8F3E4}
.tap-target{position:relative;background:#fffb543b!important;border-radius:11px}
.tap-target:after{content:'';position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;background:#FFFB54;opacity:0;animation:install-tap 5s ease-in-out infinite;animation-delay:calc(var(--step)*1.25s)}
@keyframes install-tap{0%,14%,40%,100%{opacity:0}22%,28%{opacity:.28}}
.install-browser{margin:0 0 14px;font-size:13px;color:var(--scene-dim)}
#onboarding[data-page="guide"] .onboard-content{padding-top:8px;padding-bottom:24px}
@media(max-height:720px){.onboard-header{height:calc(var(--safe-top) + 83px)}.onboard-content{padding-top:16px}.onboard-app{margin-top:26px}.onboard-footer{padding-bottom:calc(var(--safe-bottom) + 18px)}}
@media(prefers-reduced-motion:reduce){.tap-target:after{animation:none}}
@media(prefers-reduced-transparency:reduce){.onboard-primary{background:var(--scene-base);border-color:var(--scene-line)}}
/* Fit all three illustrated steps on ordinary phones. Smaller displays retain
   a normal page scroll and the complete safe-area padding after the action. */
#onboarding[data-page="guide"] .onboard-header{height:calc(var(--safe-top) + 68px)}
#onboarding[data-page="guide"] .install-platform{margin:12px 0 16px}
#onboarding[data-page="guide"] .install-steps{gap:10px}
#onboarding[data-page="guide"] .install-art{padding:10px 8px}
#onboarding[data-page="guide"] .system-list>div{padding:7px}
#onboarding[data-page="guide"] .system-confirm{padding:8px}
#onboarding[data-page="guide"] .system-app{margin:8px 0}
#onboarding[data-page="guide"] .install-browser{margin-bottom:10px}

.share-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;background:#f8f3e4df;padding:10px 4px;border-radius:14px}
.share-actions>span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:54px;font-size:22px;text-align:center}
.share-actions small{font:400 7px/1.3 Outfit,sans-serif;margin-top:5px}
.install-hint{display:block;font-size:10px;line-height:1.4;color:var(--scene-dim);margin-top:4px}

#onboarding[data-page="welcome"] .onboard-content{padding-bottom:calc(var(--safe-bottom) + 36px)}
#onboarding[data-page="welcome"] .onboard-footer{display:none}

/* Welcome words keep enough ink space for the italic accent. */
.onboard-word{display:inline-block;overflow:visible;padding:.08em .1em .18em;margin:-.08em -.1em -.18em}
#onboarding.welcome-leaving .onboard-content{mask-image:linear-gradient(to bottom,transparent,#000 24px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 24px)}
body.arrival-pending #onboarding .onboard-header{visibility:hidden}
/* The live SVG moves across the same wallpaper, without swapping canvases. */
html[data-theme] #arrival,html[data-theme] #arrival::backdrop{background:transparent}
#arrival:before{display:none}
/* Home remains inert until the chat has cleared, but its matching S stays lit. */
body.onboarding-departing #home[inert] .masthead{visibility:visible}
@media(max-height:680px){#onboarding[data-page="welcome"] .onboard-header{padding-top:calc(var(--safe-top) + 22px)}}
@media(max-height:540px){#onboarding[data-page="welcome"] .onboard-mark{width:18px;height:28px}}

body.onboarding-dock #app-dock{visibility:visible}
/* The saved timeline deliberately overlaps the greeting and the moving S. */
body.timed-welcome.arrival-pending #onboarding .onboard-content{opacity:1}