/* Language entry, mirrored layouts, and small finite web-inspired motions. */
.app-booting .app-shell,.app-booting .sidebar{visibility:hidden}
.choosing-language .app-shell,.choosing-language .sidebar,.choosing-language .skip-link{display:none}
.language-page{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 24px 34px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 10%,#fff7e8 0,transparent 48%),linear-gradient(155deg,#edf5fc,#fafbff 63%,#fceee9);isolation:isolate}
.welcome-web{position:absolute;width:650px;height:650px;top:-380px;inset-inline-end:-220px;border:1px solid #b8cedb;border-radius:50%;opacity:.34;z-index:-1;box-shadow:0 0 0 58px #f3f7fb,0 0 0 59px #b8cedb,0 0 0 124px #f3f7fb,0 0 0 125px #b8cedb,0 0 0 190px #f3f7fb,0 0 0 191px #b8cedb}
.welcome-parent{position:absolute;inset-block-start:22px;inset-inline-end:28px;display:flex;gap:8px;align-items:center;color:#647a91;font-size:14px;padding:8px 12px;border:1px solid #dbe4ed;border-radius:12px;background:#ffffffb3}
.welcome-parent .icon{height:17px;width:17px}.welcome-mark{display:flex;align-items:center;gap:9px;font-weight:700;color:#4d6e8b;font-size:17px;margin-top:5px}.welcome-mark .mask-icon{height:29px;width:29px}
.welcome-character{height:203px;width:183px;margin:9px auto -1px;position:relative}.welcome-character:before{content:'';position:absolute;left:50%;top:-60px;height:95px;width:1px;background:linear-gradient(transparent,#9fb8c9);z-index:-1}
.language-page h1{text-align:center;line-height:1.5;font-size:34px;color:#244669}.language-page h1>span{display:block}.language-page h1>span+span{font-size:27px;color:#497894;margin-top:0}
.language-caption{font-size:17px;color:#617a91;margin:14px 0 19px}.language-options{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:min(720px,100%)}
.language-card{background:#fff;border:2px solid #d8e6f1;border-bottom:5px solid #c9dce9;border-radius:22px;min-height:126px;padding:18px 21px;display:flex;align-items:center;gap:16px;text-align:start;transition:transform .2s,box-shadow .2s}
.language-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px #254c6c12}.language-card:focus-visible{outline:3px solid #d6a344;outline-offset:4px}.language-glyph{height:65px;width:65px;display:grid;place-items:center;flex-shrink:0;border-radius:20px;font-size:38px;font-weight:800;background:#e8f2fa;color:#4079a0}.language-en .language-glyph{font-size:30px;background:#fff0dd;color:#a77b39}.language-card strong{font-size:27px;display:block;font-weight:800;line-height:1.4}.language-card small{display:block;font-size:14px;color:#657e96;margin-top:4px}.language-arrow{margin-inline-start:auto;color:#84a0b4;font-size:26px}.welcome-save{display:flex;gap:22px;color:#728398;font-size:13px;margin-top:23px}
.language-toggle{border:1px solid #d8e3ee;border-radius:12px;background:#fff;padding:7px 12px;min-height:42px;color:#466d8f;font-size:15px;white-space:nowrap}.cloud-ready{color:#527b4f}
html[dir=ltr] .sidebar{inset:0 auto 0 0;border-left:0;border-right:1px solid var(--line)}
html[dir=ltr] .app-shell{margin-right:0;margin-left:218px}html[dir=ltr] .main-nav b{margin-right:0;margin-left:auto}
html[dir=ltr] .brand{font-size:17px;gap:7px}html[dir=ltr] .brand small{font-size:10px;line-height:1.5;max-width:125px;white-space:normal}
html[dir=ltr] .hero-art{left:auto;right:0}html[dir=ltr] .hero h2{font-size:44px}html[dir=ltr] .activity-card,html[dir=ltr] .review-card,html[dir=ltr] .route-card,html[dir=ltr] .lesson{text-align:left}
html[dir=ltr] .round-arrow{left:auto;right:17px;transform:rotate(180deg)}html[dir=ltr] .text-link>.icon,html[dir=ltr] .button>.icon:last-child{transform:rotate(180deg)}
html[dir=ltr] .daily-mini{border-left:0;border-right:1px solid var(--line)}html[dir=ltr] .daily-mini>.text-link{margin-right:0;margin-left:auto}
html[dir=ltr] .mini-stat{border-left:0;border-right:1px solid var(--line)}html[dir=ltr] .mini-stat:last-child{border:0}
html[dir=ltr] .review-card>.icon,html[dir=ltr] .route-card>.icon,html[dir=ltr] .week-count,html[dir=ltr] .lesson-result{margin-right:0;margin-left:auto}
html[dir=ltr] .puzzle-filters>span{margin-right:0;margin-left:auto}html[dir=ltr] .activity-label h3{font-size:23px}
body[data-motion=on] .hero-character{animation:hero-arrive 1.1s cubic-bezier(.2,.7,.2,1) both;transform-origin:50% 0}
body[data-motion=on] .hero-web path{stroke-dasharray:1900;stroke-dashoffset:1900;animation:web-draw 2.3s ease-out .1s forwards}
body[data-motion=on] .activity-card{animation:card-arrive .45s ease-out both}body[data-motion=on] .activity-card:nth-child(2){animation-delay:.04s}body[data-motion=on] .activity-card:nth-child(3){animation-delay:.08s}body[data-motion=on] .activity-card:nth-child(4){animation-delay:.12s}
body[data-motion=on] .correct-tick{animation:web-pop .45s ease-out}body[data-motion=on] .game-feedback.success{animation:success-arrive .35s ease-out}body[data-motion=on] .earned-stars .icon{animation:star-arrive .6s ease-out both}body[data-motion=on] .earned-stars .icon:nth-child(2){animation-delay:.08s}body[data-motion=on] .earned-stars .icon:nth-child(3){animation-delay:.16s}body[data-motion=on] .earned-stars .icon:nth-child(4){animation-delay:.24s}body[data-motion=on] .earned-stars .icon:nth-child(5){animation-delay:.32s}
body[data-motion=on] .welcome-character{animation:welcome-swing 1.3s ease-out both;transform-origin:50% -55px}
body[data-motion=off] *,body[data-motion=off] *:before,body[data-motion=off] *:after{animation:none!important;transition:none!important}
@keyframes hero-arrive{0%{opacity:0;transform:translateY(-16px) rotate(-10deg)}60%{opacity:1;transform:translateY(2px) rotate(-1deg)}100%{transform:rotate(-4deg)}}
@keyframes welcome-swing{0%{opacity:0;transform:rotate(7deg) translateY(-12px)}65%{opacity:1;transform:rotate(-3deg)}100%{transform:none}}
@keyframes web-draw{to{stroke-dashoffset:0}}@keyframes card-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes web-pop{0%{transform:scale(.4);box-shadow:0 0 0 0 #8ab86850}70%{transform:scale(1.1);box-shadow:0 0 0 14px #8ab86800}100%{transform:scale(1)}}@keyframes success-arrive{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes star-arrive{from{opacity:0;transform:scale(.5) rotate(-25deg)}to{opacity:1;transform:none}}
@media(max-width:1100px) and (min-width:571px){html[dir=ltr] .app-shell{margin-left:190px}html[dir=ltr] .hero h2{font-size:39px}html[dir=ltr] .activity-label h3{font-size:21px}html[dir=ltr] .brand{font-size:14px;gap:6px}html[dir=ltr] .brand small{font-size:9px;max-width:103px}}
@media(min-width:1500px){html[dir=ltr] .app-shell{margin-left:239px}}
@media(max-width:1150px) and (min-width:901px){html[dir=ltr] .app-shell{margin-left:198px}}
@media(max-width:900px) and (min-width:571px){html[dir=ltr] .app-shell{margin-left:82px}}
@media(max-width:570px){html[dir=ltr] .app-shell{margin-left:0}.main-nav{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:570px){
 .language-page{padding:66px 20px 27px;justify-content:flex-start}.welcome-parent{inset-block-start:16px;inset-inline-end:17px;font-size:12px;padding:6px 9px}.welcome-mark{font-size:15px}.welcome-character{height:157px;width:148px;margin:5px auto -1px}.language-page h1{font-size:29px}.language-page h1>span+span{font-size:23px}.language-caption{font-size:15px;margin:11px 0 16px}.language-options{grid-template-columns:1fr;gap:12px;max-width:390px}.language-card{min-height:100px;padding:15px 17px;gap:15px;border-radius:18px}.language-glyph{width:57px;height:57px;font-size:34px;border-radius:17px}.language-card strong{font-size:25px}.language-card small{font-size:13px}.welcome-save{flex-direction:column;gap:0;font-size:12px;text-align:center;margin-top:17px}.language-toggle{font-size:14px;min-height:39px;padding:6px 10px}
 .main-nav a{min-width:0}.main-nav{justify-content:space-around}.page-footer{align-items:center;gap:10px}.page-footer>a{white-space:nowrap}.page-footer #sync-status{font-size:12px;line-height:1.5}
 html[dir=ltr] .hero-art{left:auto;right:-8px}html[dir=ltr] .hero h2{font-size:38px;line-height:1.4}html[dir=ltr] .hero-actions{margin-right:0;margin-left:0}
 html[dir=ltr] .hero-character .spidey,html[dir=ltr] .hero-character .spidey text{transform:none}
 html[dir=ltr] .hero-actions .button{font-size:16px}html[dir=ltr] .hero-actions .hero-secondary{font-size:15px!important}
 html[dir=ltr] .activity-card{height:204px;display:flex;flex-direction:column;align-items:stretch}html[dir=ltr] .activity-tag{align-self:flex-start}html[dir=ltr] .activity-visual{flex-shrink:0;margin-block:1px}html[dir=ltr] .activity-label{margin-top:auto}html[dir=ltr] .activity-label h3{font-size:20px;line-height:1.25}html[dir=ltr] .round-arrow{right:10px}
 html[dir=ltr] .game-question h2{font-size:29px}.game-title{max-width:70%;line-height:1.4}
}
@media(max-width:350px){.language-page{padding-top:62px}.welcome-character{height:135px;width:126px}.language-page h1{font-size:27px}.language-card{min-height:92px}.welcome-save{margin-top:12px}html[dir=ltr] .activity-card{height:196px}html[dir=ltr] .activity-label h3{font-size:18px}html[dir=ltr] .hero h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}