/* Shared visual language; learning controls retain their own layouts. */
:root{--blue:#3659df;--navy:#26345b;--purple:#8860d5;--muted:#62708a;--shadow:0 12px 36px #3949790d}
body{background:#fffcf6;color:var(--navy);font-family:Nunito,system-ui,sans-serif;line-height:1.55}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}:focus-visible{outline:3px solid #bd5b13;outline-offset:5px}[hidden]{display:none!important}
.skip-link{position:fixed;left:16px;top:-90px;padding:12px 20px;background:#fff;border:2px solid var(--blue);border-radius:16px;z-index:1000}.skip-link:focus{top:12px}
.header{background:#fffefaed;border-bottom:1px solid #eae5dc}.header-inner>.menu-btn{margin-left:auto}.logo-star{clip-path:none;background:transparent;width:42px;height:42px}.logo-star img{width:100%;height:100%}
.png-art{display:inline-block;width:1.5em;height:1.5em;object-fit:contain;vertical-align:middle;flex-shrink:0}.feature-icon{background:#f6f0ff!important;border-radius:18px}.feature-icon .png-art{width:42px;height:42px}
.hero{background:radial-gradient(ellipse at 85% 25%,#e8e3ff,transparent 48%),linear-gradient(125deg,#fffaf0,#eef9fc)}.hero h1{line-height:1.17}.hero-buttons{flex-wrap:wrap}.hero-btn{gap:8px}.hero-btn .png-art{width:26px;height:26px}.hero-art .spark img{position:static;height:30px;width:30px;transform:none}.benefits{border:1px solid #f0e9dd;border-radius:26px}.benefits p{font-size:13px}
.page-hero{position:relative;overflow:hidden;text-align:left;padding:54px max(24px,calc((100vw - 1192px)/2));min-height:305px;background:radial-gradient(ellipse at 88% 15%,#e6ddff,transparent 42%),linear-gradient(110deg,#fff3dc,#edf8ff);border-bottom:1px solid #eee7dc}.page-hero .tag,.page-hero h1,.page-hero>p{position:relative;z-index:1;max-width:65%}.page-hero h1{font-size:clamp(34px,4vw,54px);line-height:1.2;letter-spacing:-1.4px;margin:14px 0}.page-hero>p{margin:0;font-size:17px}.page-hero .tag{font-size:12px;letter-spacing:2px;color:#7954bd}.page-hero-art{position:absolute;right:max(30px,calc((100vw - 1170px)/2));bottom:18px;width:250px;height:250px;object-fit:contain;animation:happy-float 5s ease-in-out 3;filter:drop-shadow(0 14px 15px #8061a01a)}
.page-section{padding:44px 0}.cards{gap:24px}.cards>a{display:flex}.info-card{width:100%;border:1px solid #ece7df;border-radius:26px;padding:26px;box-shadow:0 8px 0 #e9e3d84a;display:flex;flex-direction:column;align-items:flex-start;transition:transform .22s,box-shadow .22s}.info-card:hover{transform:translateY(-5px);box-shadow:0 13px 25px #4e447313}.info-card>p{flex:1;margin-top:0}.info-card .icon{display:flex;align-items:center;justify-content:center;width:100%;height:148px;border-radius:19px;background:#f1edff;margin-bottom:10px}.info-card .icon .png-art{width:112px;height:112px;filter:drop-shadow(0 8px 6px #36467216);transition:transform .3s}.info-card:hover .icon .png-art{transform:rotate(-5deg) scale(1.06)}.cards>:nth-child(3n+2) .icon{background:#e7f7f0}.cards>:nth-child(3n) .icon{background:#fff1d8}.topic-card{align-items:center}.card-link,.game-card button{min-height:46px;border-radius:14px;padding:11px 20px;box-shadow:0 4px 0 #243aa9;font-size:15px}.card-link:active,button:active{transform:translateY(2px)}
.course{border:1px solid #eee7de;border-radius:24px}.course-cover .png-art{width:120px;height:120px;filter:drop-shadow(0 9px 6px #26345b20)}.cover-green{background:#e2f5df}.cover-blue{background:#e0f2ff}.cover-purple{background:#efe5ff}.course-cover span{letter-spacing:0}.course-info{padding:20px}.course p{min-height:62px}.course-info em{background:#e4f4ec;color:#267655}.course:last-child{display:block}.progress{border:1px solid #e9e2f6;background:#f8f3ff;border-radius:24px}.progress .png-art{width:25px;height:25px}.child .png-art{width:42px;height:42px}
.about-art{background:linear-gradient(145deg,#e5d9ff,#fff0d2);overflow:hidden}.about-art>img{width:100%;max-height:390px;object-fit:contain}.value{padding:19px;border:1px solid #eee6dc;border-radius:18px}.value .png-art{margin-right:10px}.contact-form{border:1px solid #eee7df;border-radius:26px}.contact-grid>div>p{line-height:1.8}.contact-illustration{display:block;width:210px;height:180px;object-fit:contain;margin-bottom:18px}
.auth-mascot .png-art{width:200px;height:235px}.auth-intro{background:linear-gradient(155deg,#e6dcff,#eef5ff);color:#493b78}.register-intro{background:linear-gradient(155deg,#fff0c7,#ffe3d4)}.auth-card{border:1px solid #e8e0d7;box-shadow:0 20px 60px #55458312}.auth-decor .png-art{width:65px;height:65px}
.game-nav,.eg-nav,.topic-nav{background:#fffefa;border-bottom:1px solid #eee7df}.game-card,.eg-panel{border-radius:26px}.hub-card,.eg-card{border:1px solid #e7e1d7;border-radius:22px;box-shadow:0 6px 0 #eae2d64a}.hub-card-icon .png-art{width:72px;height:72px}.eg-card-no .png-art{width:48px;height:48px;margin-right:8px}.game-header,.eg-hero,.topic-hero{background:linear-gradient(120deg,#fff4dd,#efebff);border-radius:25px;padding:26px}.game-title .png-art,h1 .png-art{width:1.15em;height:1.15em}.topic-switcher .png-art{width:25px;height:25px}.eg-link,.btn-back-hub,.topic-links a{min-height:44px;display:inline-flex;align-items:center;gap:6px}.game-box{width:100%}.answer-buttons button{min-width:48px;min-height:48px}.game-result{min-height:28px}.game-score{z-index:1;background:#fff9e7;border-radius:20px;padding:4px 10px}.game-score .png-art{width:22px;height:22px}
.learning-strip{margin:0 auto 45px;padding:26px 30px;display:flex;align-items:center;gap:22px;background:#eee8ff;border:1px solid #e3d7ff;border-radius:25px}.learning-strip img{width:84px;height:92px;object-fit:contain}.learning-strip h2{font-size:22px;margin:0 0 5px}.learning-strip p{margin:0;color:#655a7b}.learning-strip a{margin-left:auto;white-space:nowrap}
.search-dialog{width:min(560px,calc(100% - 30px));border:1px solid #e8dfd1;border-radius:24px;padding:28px;color:var(--navy);box-shadow:0 25px 100px #24345b30}.search-dialog::backdrop{background:#26345b70;backdrop-filter:blur(4px)}.search-dialog h2{margin:0 0 18px}.search-dialog input{width:100%;padding:14px;border:2px solid #ddd5ef;border-radius:12px;font:inherit}.search-dialog ul{padding:0;list-style:none}.search-dialog li a{display:block;padding:12px;background:#f4f0fc;margin:8px 0;border-radius:12px}.search-close{float:right;border:0;background:#f2edfa;border-radius:10px;padding:9px 13px;color:var(--navy)}
.menu-btn{font-size:12px;font-weight:900;width:50px;border-radius:14px}.search{font-size:12px;font-weight:900;width:52px;border-radius:14px}.faces .png-art{width:34px;height:34px}.rating strong .png-art{width:18px;height:18px}.footer-inner{flex-wrap:wrap}footer{background:#293456;border-radius:32px 32px 0 0}.footer-links{display:flex;gap:20px;flex-wrap:wrap;font-size:14px}.footer-links a:hover{text-decoration:underline}
@keyframes happy-float{50%{transform:translateY(-9px) rotate(2deg)}}
@media(min-width:761px) and (max-width:1100px){.header-inner{gap:16px}.nav{gap:12px}.nav a{font-size:13px}.header-actions{gap:6px}.btn{padding:0 15px}.search{display:none}}
@media(max-width:760px){.nav{visibility:hidden;pointer-events:none;max-height:calc(100dvh - 70px);overflow:auto}.nav.open{visibility:visible;pointer-events:auto}.page-hero{padding:34px 24px 24px;min-height:0}.page-hero .tag,.page-hero h1,.page-hero>p{max-width:100%}.page-hero h1{font-size:36px}.page-hero-art{position:relative;display:block;right:auto;bottom:auto;width:150px;height:150px;margin:18px auto 0}.page-hero>p{font-size:16px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.info-card{padding:18px}.info-card h2{font-size:21px}.info-card .icon{height:125px}.learning-strip{flex-wrap:wrap;padding:22px;gap:14px}.learning-strip>div{flex:1;min-width:180px}.learning-strip a{margin-left:0}.auth-mascot .png-art{width:100px;height:110px}.auth-intro{flex-direction:row;gap:20px}.auth-intro p{margin:0}.progress{order:0}.hero h1{letter-spacing:-1.5px}.game-nav,.eg-nav,.topic-nav{flex-wrap:wrap;gap:10px}.eg-actions,.game-nav-actions,.topic-links{flex-wrap:wrap}.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-links{justify-content:center}.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.cards,.course-grid,.hub-grid{grid-template-columns:1fr}.hero-art{overflow:hidden}.section-heading{gap:12px;align-items:flex-start}.section-heading a{flex-shrink:0}.info-card .icon{height:145px}.hero h1{font-size:39px}.page-hero h1{font-size:32px}.game-header,.eg-hero,.topic-hero{padding:20px 16px}.game-title{font-size:28px}.auth-intro p{font-size:20px}.benefits{padding:14px}.contact-form{padding:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
.course-cover .png-art{width:100%;height:160px;object-fit:contain}.info-card .course-illustration{height:180px;overflow:hidden}.info-card .course-illustration .png-art{width:100%;height:175px;object-fit:contain}.info-card .course-illustration .png-art[src*="toys"]{object-fit:cover}.course-cover .png-art[src*="toys"]{object-fit:cover}.bubble,.character,.spark,.course-cover span{animation-iteration-count:3}
.math-stage-content .png-art{width:1.3em;height:1.3em}.card-image-btn{background:linear-gradient(145deg,#f2ebff,#fff3da);border:1px solid #e7dff0;box-shadow:0 8px 0 #e6dfd755}.card-image-btn::after{border:0}.card-poster{object-fit:contain;padding:24px 24px 65px;aspect-ratio:4/5;image-rendering:auto}.card-caption{background:#ffffffed;color:#26345b;border:0;padding:12px;backdrop-filter:none}.card-caption small{color:#67718a}.card-caption b{font-size:16px}.viewer-stage img{background:#faf3e6;padding:30px;min-width:180px;min-height:180px;border-color:#e3d1ff}.card-image-btn:hover{transform:translateY(-5px) rotate(-1deg)}
.topic-hero{color:#26345b;border:1px solid #e7ddf1}.topic-hero h1{color:#26345b}.topic-hero p{color:#62708a}.topic-badge{color:#7152a2;background:#fff9ef}.game-header h1,.eg-hero h1{color:#26345b}.eg-hero p,.game-subtitle{color:#62708a}
.toggle-password{font-size:13px;font-weight:800;min-width:46px;min-height:44px}.btn-speaker .png-art{width:26px;height:26px}
.topic-practice{display:inline-flex;padding:12px 18px;margin:0 0 20px;background:#6854d8;color:white;border-radius:13px;font-weight:800}