/* One continuous room, with the animated bear composited into the scenery. */
body:has(.welcome-room){background:#79552f;color:#fff7df;overflow-x:hidden}
body:has(.welcome-room) header{position:absolute;inset:0 0 auto;z-index:5;width:100%;max-width:none;height:80px;padding:16px 24px;background:linear-gradient(#32201277,transparent)}
body:has(.welcome-room) header .brand{font-size:17px;background:#fff5dbe8;box-shadow:0 3px 0 #593b2755;border:1px solid #fff2ce}
body:has(.welcome-room) header .tools button{font-size:13px;min-height:44px;padding:9px 13px;background:#fff5dbe8;box-shadow:0 3px 0 #593b2755}
body:has(.welcome-room) #app{width:100%;max-width:none;padding:0;margin:0}
body:has(.welcome-room) #voiceStatus{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:6;max-width:90%;background:#fff7df;color:#3a5540;border-radius:14px;padding:7px 12px;font-size:12px}
body:has(.welcome-room) #voiceStatus:empty{display:none}
.brand-welcome.welcome-room{display:block!important;width:100%;height:100svh;min-height:640px!important;border-radius:0;overflow:hidden;background:#79552f!important;isolation:isolate}
.welcome-room .brand-welcome-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;mask-image:none;z-index:-3}
.welcome-room::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,#281c12b8,transparent 65%),linear-gradient(0deg,#33201488,transparent 35%)}
.welcome-room .brand-welcome-copy{position:absolute;left:7%;top:23%;width:40%;padding:0;text-align:center;text-shadow:0 2px 10px #2c190c80}
.welcome-room .brand-welcome-copy .kicker{font-size:11px;letter-spacing:2px;color:#ffebbe}
.welcome-room .brand-welcome-copy h1{font-size:clamp(46px,5.4vw,78px);margin:14px 0;letter-spacing:-1.5px;color:#fff4cd;line-height:1.04}
.welcome-room .brand-welcome-copy h1 em{font-size:.65em;font-style:normal}
.welcome-room .brand-welcome-copy p{font-size:17px;color:#fff3d5;margin:0}
.welcome-room .cover-actions{position:absolute!important;left:7%;bottom:12%;width:40%;padding:0!important;margin:0!important;align-items:center;gap:12px}
.welcome-room #welcomeHint{font-size:14px;color:#fff5dc;text-shadow:0 1px 6px #22170e;margin:0;min-height:20px}
.welcome-room .cover-actions #resumeLesson.picture-button{min-height:68px;width:280px;max-width:100%;font-size:26px;border:3px solid #fff0b6;background:linear-gradient(#ffe6a0,#ebc774);box-shadow:0 5px 0 #91632f,0 12px 26px #30231340;border-radius:28px;padding:10px 24px}
.welcome-room #resumeLesson .toddler-icon{width:42px;height:42px}
.welcome-room .cover-actions #pause.picture-button{min-height:42px;font-size:14px;padding:5px 14px;border-radius:18px;background:#fff7e3eb;border:1px solid #ffe6b5;box-shadow:0 3px 0 #845e3577}
.welcome-room #pause .toddler-icon{width:25px;height:25px}
.welcome-room .cover-actions #pause[hidden]{display:none!important}
.welcome-room .cover-actions .caption{font-size:14px;line-height:1.4;color:#fff8e6;text-shadow:0 1px 5px #24190b;margin:0;min-height:40px;max-height:none;width:100%;max-width:390px;visibility:hidden}
.welcome-room.welcome-entered .cover-actions .caption{visibility:visible}
.welcome-room .cover-actions small{display:none}
.room-motes{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.room-motes i{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffe9ae;box-shadow:0 0 12px 3px #ffe6ad66;left:15%;top:60%;animation:room-drift 9s ease-in-out infinite}
.room-motes i:nth-child(2){left:75%;top:33%;animation-delay:-3s}.room-motes i:nth-child(3){left:38%;top:45%;animation-delay:-7s}.room-motes i:nth-child(4){left:89%;top:70%;animation-delay:-5s}.room-motes i:nth-child(5){left:57%;top:20%;animation-delay:-1s}
@keyframes room-drift{0%,100%{transform:translate(0,15px);opacity:0}40%,60%{opacity:.7}70%{transform:translate(10px,-25px)}}
@media(max-aspect-ratio:1/1){
 body:has(.welcome-room) header{height:66px;padding:10px 14px}
 body:has(.welcome-room) header .brand{font-size:14px;padding:7px 10px}
 body:has(.welcome-room) header .tools{gap:7px}
 body:has(.welcome-room) header .tools button{font-size:12px;padding:7px 10px;min-height:42px}
 .brand-welcome.welcome-room{min-height:600px!important}
 .welcome-room::before{background:linear-gradient(#32220f66,transparent 40%,transparent 70%,#2b1b12b0)}
 .welcome-room .brand-welcome-copy{left:5%;top:12%;width:90%;padding:0}
 .welcome-room .brand-welcome-copy .kicker{font-size:9px;letter-spacing:1.8px}
 .welcome-room .brand-welcome-copy h1{font-size:clamp(36px,10vw,58px);margin:10px 0;letter-spacing:-.8px}
 .welcome-room .brand-welcome-copy h1 br{display:block}
 .welcome-room .brand-welcome-copy h1 em{display:inline;font-size:.65em}
 .welcome-room .brand-welcome-copy p{font-size:14px}
 .welcome-room .cover-actions{left:7%;bottom:3%;width:86%;gap:8px}
 .welcome-room .cover-actions #resumeLesson.picture-button{width:270px;min-height:60px;font-size:24px}
 .welcome-room .cover-actions .caption{font-size:12px;min-height:34px;max-width:340px}
 .welcome-room #welcomeHint{font-size:12px;min-height:16px}
}
@media(min-aspect-ratio:1/1) and (max-height:650px){
 .brand-welcome.welcome-room{min-height:420px!important}
 .welcome-room .brand-welcome-copy{top:20%}
 .welcome-room .brand-welcome-copy h1{font-size:40px;margin:8px 0}
 .welcome-room .brand-welcome-copy p{font-size:13px}
 .welcome-room .cover-actions{bottom:3%;gap:7px}
 .welcome-room .cover-actions #resumeLesson.picture-button{min-height:50px;font-size:20px}
 .welcome-room .cover-actions .caption{font-size:12px;min-height:32px}
}
@media(prefers-reduced-motion:reduce){.room-motes{display:none}}
body.effects-paused .room-motes i,body:has(#parent[open]) .room-motes i{animation-play-state:paused}