@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'Nunito','Noto Sans SC',sans-serif;color:#112656;background:#f8f9f5;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.site-header{height:82px;max-width:1500px;margin:auto;padding:0 44px;display:flex;align-items:center;gap:70px;background:#fff}.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:900;white-space:nowrap}.brand-mark{display:grid;place-items:center;background:#d7ecff;color:#2874fa;border:3px solid #79b7ff;border-radius:18px;width:39px;height:39px;font-size:31px;line-height:1;transform:rotate(-10deg)}.site-header nav{display:flex;gap:42px;height:100%;align-items:center}.site-header nav a{font-weight:700;color:#52627b;height:100%;display:flex;align-items:center;position:relative}.site-header nav a.active{color:#2877ff}.site-header nav a.active:after{content:'';position:absolute;bottom:18px;left:12%;width:76%;height:3px;border-radius:4px;background:#2877ff}.header-actions{margin-left:auto;display:flex;align-items:center;gap:16px}.icon-button{border:0;border-radius:50%;background:#eef5ff;color:#3364a4;width:40px;height:40px;font-size:27px}.login,.small-blue-button{border:0;background:#2876f9;color:white;padding:11px 24px;border-radius:999px;font-weight:800;box-shadow:0 7px 18px #2876f929}.hero{max-width:1500px;min-height:435px;margin:auto;display:grid;grid-template-columns:46% 54%;overflow:hidden;background:radial-gradient(circle at 78% 47%,#b5ddff 0,#e6f3ff 30%,#fdfcf6 69%)}.hero-copy{padding:44px 0 40px 75px;z-index:2}.eyebrow{display:inline-block;color:#566e7e;background:#e9f5ed;border:1px solid #d6ecdf;border-radius:10px;padding:8px 14px;font-size:12px;font-weight:700}.hero h1{font-size:clamp(44px,5vw,73px);line-height:1.17;letter-spacing:-.035em;margin:22px 0 14px;font-weight:900}.hero h1 span{color:#2876f9}.hero h1 i{font-style:normal;color:#ffac2e;font-size:31px;vertical-align:top}.hero p{font-size:17px;color:#4c5d77;margin:0 0 26px;line-height:1.8;max-width:495px}.primary-button{background:linear-gradient(120deg,#ffa42b,#ff7a20);color:white;border:0;border-radius:999px;padding:15px 35px;font-size:20px;font-weight:900;box-shadow:0 10px 25px #ff8e3066}.primary-button span{font-size:25px;margin-left:10px}.hero-note{font-size:13px;color:#5082c6;margin:12px 0 0 220px;transform:rotate(-8deg)}.hero-art{position:relative;min-height:435px}.sun{position:absolute;right:75px;top:42px;border-radius:50%;width:95px;height:95px;background:#ffe897;box-shadow:0 0 80px #ffdc8d}.cloud{position:absolute;background:#fff;border-radius:50px;filter:drop-shadow(0 8px 8px #82b3dc44)}.cloud-a{width:160px;height:54px;bottom:25px;left:30px}.cloud-b{width:200px;height:65px;top:65px;right:125px}.floating-island{position:absolute;width:520px;height:320px;left:10%;top:35px;filter:drop-shadow(0 25px 15px #6e9cc65c)}.island-top{position:relative;width:100%;height:220px;background:linear-gradient(135deg,#a6df80,#69bf84);border:17px solid #e7d0a6;border-radius:42% 50% 36% 38%;transform:rotate(-5deg);box-shadow:inset 0 -22px 0 #79b864}.island-top:after{content:'';position:absolute;left:115px;bottom:-78px;width:270px;height:75px;background:linear-gradient(#b89b72,#e8c89c);clip-path:polygon(0 0,100% 0,70% 100%,30% 100%)}.tree{position:absolute;right:45px;top:-86px;font-size:125px}.book-tower{position:absolute;left:70px;top:35px;font-size:115px}.child{position:absolute;font-size:93px}.child-one{left:150px;top:-25px}.child-two{right:15px;top:85px}.star{position:absolute;left:285px;top:35px;color:#fff394;font-size:62px}.chalkboard{position:absolute;right:120px;top:24px;background:#2e715d;color:#fff6d9;padding:17px;border-radius:9px;line-height:1.4;transform:rotate(7deg);box-shadow:5px 7px 0 #865e41}.mascot{position:absolute;left:0;bottom:85px;font-size:80px;transform:rotate(18deg)}.mascot small{font-size:26px;color:#ffd65e}.art-label{position:absolute;right:28px;top:30px;color:#2972c5;font-size:17px;font-weight:800;line-height:1.5;transform:rotate(8deg)}.resume-section{max-width:1390px;margin:-19px auto 0;z-index:3;position:relative;min-height:93px;background:#fff;border-radius:26px;box-shadow:0 13px 32px #122b5330;display:flex;align-items:center;gap:22px;padding:13px 23px}.resume-intro{display:flex;align-items:center;gap:18px;min-width:125px;font-size:19px;font-weight:900}.round-arrow{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#eef3fa;font-size:28px}.resume-icon{background:#d4efff;border-radius:15px;padding:8px;font-size:38px}.resume-info{display:flex;flex-direction:column;min-width:225px;gap:3px}.resume-info strong{font-size:15px}.resume-info span{font-size:13px;color:#546989}.progress-bar{height:7px;background:#e4e9ef;width:225px;border-radius:7px;overflow:hidden;margin-top:3px}.progress-bar span{display:block;height:100%;background:#377dff;width:0;transition:width .4s}.progress-label{font-size:13px;color:#5a6c8c;margin-right:auto}.subjects{max-width:1390px;margin:34px auto 65px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px}.section-heading>div{display:flex;align-items:baseline;gap:18px}.section-heading h2{font-size:30px;margin:0;font-weight:900}.section-heading p{color:#72819a;margin:0;font-size:14px}.section-heading a{font-size:15px;color:#2876f9;font-weight:800}.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.course-card{min-height:245px;border-radius:25px;overflow:hidden;position:relative;padding:24px 26px;border:2px solid transparent;box-shadow:0 8px 20px #35456510;display:flex;flex-direction:column}.course-card.english{background:linear-gradient(135deg,#abddff,#d6f4ff);border-color:#a0d8fa}.course-card.chinese{background:linear-gradient(135deg,#ffe0bb,#fff0d6)}.course-card.math{background:linear-gradient(135deg,#d8f2a5,#f0f8be)}.course-card h3{font-size:29px;margin:0 0 4px;font-weight:900}.course-card p{margin:0;font-size:13px;font-weight:700}.course-card .card-art{font-size:72px;text-align:right;flex:1;line-height:1.3;filter:drop-shadow(3px 9px 4px #36486536)}.course-card .card-bottom{background:#fff;box-shadow:0 5px 12px #21365a20;border-radius:16px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}.card-bottom strong{display:block;font-size:16px}.card-bottom span{display:block;font-size:12px;color:#68809c;margin-top:3px}.card-bottom button{width:33px;height:33px;border:0;background:#ecf4ff;border-radius:50%;font-size:27px;color:#19345f}.course-badge{position:absolute;right:22px;top:25px;background:white;border-radius:20px;padding:5px 11px;font-size:11px;font-weight:800}.parent-strip{max-width:1390px;margin:0 auto 45px;background:#e8f0ff;padding:35px 48px;border-radius:28px;display:flex;justify-content:space-between;align-items:center;gap:30px}.tiny-label{color:#2d7cff;font-size:12px;font-weight:900}.parent-strip h2{margin:8px 0;font-size:25px}.parent-strip p{margin:0;color:#64748a}.parent-points{display:grid;gap:8px;color:#2c71d6;font-weight:800}footer{max-width:1390px;margin:auto;padding:0 10px 30px;display:flex;justify-content:space-between;color:#71809b}footer span{font-weight:900;color:#1b4279}.lesson-dialog,.auth-dialog,.edit-dialog{border:0;border-radius:27px;box-shadow:0 30px 80px #10235166;padding:0;max-width:min(920px,94vw)}dialog::backdrop{background:#102657aa;backdrop-filter:blur(5px)}.lesson-dialog{width:920px;min-height:530px;display:none}.lesson-dialog[open]{display:flex}.dialog-close{position:absolute;right:20px;top:13px;border:0;background:none;font-size:29px;color:#789}.lesson-sidebar{width:190px;padding:30px 20px;background:#eaf3ff}.mini-brand{font-size:17px;font-weight:900;color:#2769c7}.lesson-steps{display:grid;gap:13px;margin-top:45px}.lesson-steps span{padding:12px;border-radius:13px;color:#56709a;font-weight:800}.lesson-steps .current{background:white;color:#2675ef;box-shadow:0 4px 12px #426bb625}.lesson-body{padding:36px 40px;flex:1}.lesson-topline{font-size:13px;color:#7285a0;display:flex;justify-content:space-between}.lesson-body h2{font-size:30px;margin:12px 0 4px}.lesson-body>p{color:#687d96}.lesson-scene{margin:19px 0;background:linear-gradient(120deg,#d5efff,#eafcf0);border-radius:21px;display:flex;align-items:center;justify-content:space-around;min-height:140px}.speech-art{font-size:75px}.speech-art span{background:white;border-radius:30px;padding:8px 15px;font-size:16px}.word-bubble{background:white;border-radius:18px;padding:18px;font-weight:800;box-shadow:0 8px 15px #56739e21}.activity-box{background:#fff8e9;border-radius:18px;padding:16px 20px;margin-bottom:20px}.activity-box p{margin:5px 0 10px;color:#526a83}.word-options{display:flex;gap:8px;flex-wrap:wrap}.word-options button{background:white;border:2px solid #dce8f8;border-radius:13px;padding:7px 13px;color:#35629b}.word-options button.chosen{border-color:#2474ff;background:#e5f0ff}.admin-page{background:#f5f8fd}.admin-header{height:75px;background:white;display:flex;align-items:center;padding:0 28px;gap:20px;box-shadow:0 1px 8px #203f6c12}.admin-search{margin-left:auto;background:#f3f7fc;color:#94a5ba;border-radius:25px;padding:12px 35px;min-width:290px}.admin-avatar{font-weight:800;padding-left:20px}.admin-layout{display:grid;grid-template-columns:235px 1fr;min-height:calc(100vh - 75px)}.admin-nav{background:#eff6ff;padding:27px 16px;display:flex;flex-direction:column;gap:11px}.admin-nav a{padding:15px 20px;color:#5f7396;font-weight:800;border-radius:13px}.admin-nav a.selected,.admin-nav a:hover{background:#638dfa;color:white}.admin-nav-bottom{margin-top:auto;background:#dcf0ff;border-radius:20px;padding:18px;text-align:center;color:#4479b9}.admin-main{padding:32px;max-width:1500px;width:100%;margin:auto}.admin-hero{background:linear-gradient(105deg,#fff 60%,#d8eaff);border-radius:25px;min-height:140px;padding:25px 28px;display:flex;justify-content:space-between;overflow:hidden}.admin-hero h1{font-size:37px;margin:0 0 5px}.admin-hero p{margin:0;color:#657b98}.admin-mascot{font-size:70px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}.metrics>div{background:#fff;border-radius:19px;padding:16px 20px;box-shadow:0 5px 18px #264c8110;display:grid;grid-template-columns:43px 1fr;align-items:center}.metrics span{font-size:25px;color:#4780e9;grid-row:span 2}.metrics small{color:#72819c}.metrics strong{font-size:30px}.admin-columns{display:grid;grid-template-columns:minmax(550px,1fr) 315px;gap:15px}.admin-card{background:#fff;border-radius:19px;padding:21px;box-shadow:0 5px 20px #264c8110}.admin-card h2,.admin-card h3{margin:0;font-size:21px}.card-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}th{background:#f2f7fd;color:#6880a3;padding:14px 10px}td{padding:17px 10px;border-bottom:1px solid #edf1f5}td strong{display:block}td small{display:block;color:#8b9cb2;margin-top:2px}.status{padding:5px 11px;border-radius:15px;font-weight:800}.status.published{background:#e3f9e9;color:#1d9957}.status.draft{background:#fff0d5;color:#bf841f}.table-actions{display:flex;gap:8px}.text-button{border:0;background:none;color:#2575e9;font-weight:800;padding:4px}.empty-hint{color:#788ba4;font-size:13px}.admin-side{display:grid;gap:15px;align-content:start}.admin-side h3{margin-bottom:15px}.check-row{display:flex;align-items:center;gap:10px;border-radius:13px;background:#f7faff;padding:12px;margin-top:9px}.check-row>span{font-size:25px}.check-row div{flex:1}.check-row strong{display:block;font-size:13px}.check-row small{font-size:11px;color:#92a0b2}.check-row b{font-size:11px;color:#ce8a20}.flow{display:flex;align-items:center;justify-content:space-between;margin:29px 0 18px;color:#3375db;font-weight:800}.flow span{background:#eaf3ff;padding:9px 10px;border-radius:12px}.flow i{font-style:normal}.admin-side p{font-size:12px;color:#8a99ad}.auth-dialog,.edit-dialog{width:520px;padding:28px}.edit-dialog{width:720px}.auth-dialog h2,.edit-dialog h2{margin:0 0 10px}.auth-dialog p,.helper{font-size:13px;color:#789}.auth-dialog label,.form-grid label{display:grid;gap:7px;font-size:13px;font-weight:800;margin-top:16px}input,textarea,select{width:100%;border:1px solid #d8e3f2;background:#fff;border-radius:11px;padding:10px 12px;color:#123}textarea{resize:vertical}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.form-grid .full{grid-column:1/-1}.form-head{display:flex;justify-content:space-between}.form-head button{border:0;background:none;font-size:26px;color:#789}.outline-button{border:1px solid #b9d3f3;background:#fff;border-radius:20px;color:#3976c8;padding:9px 19px;font-weight:800}.error{color:#cc3d42!important;font-size:13px}.auth-dialog:not([open]),.edit-dialog:not([open]){display:none}@media(max-width:950px){.site-header{padding:0 20px;gap:20px}.site-header nav{gap:16px}.hero{grid-template-columns:1fr}.hero-copy{padding:35px}.hero-art{display:none}.resume-section,.subjects,.parent-strip{margin-left:20px;margin-right:20px}.course-grid{grid-template-columns:1fr 1fr}.admin-columns{grid-template-columns:1fr}.admin-side{grid-template-columns:1fr 1fr}}@media(max-width:640px){.site-header{height:67px}.site-header nav{display:none}.brand{font-size:20px}.header-actions{gap:6px}.login{padding:9px 12px;font-size:12px}.hero{min-height:410px}.hero-copy{padding:30px 22px}.hero h1{font-size:47px}.hero p{font-size:15px}.hero-note{margin-left:130px}.resume-section{flex-wrap:wrap;gap:10px;margin-top:-10px}.resume-intro{width:100%}.resume-info{min-width:0}.progress-bar{width:180px}.progress-label{display:none}.resume-section .small-blue-button{margin-left:auto}.section-heading>div{display:block}.section-heading h2{font-size:25px}.section-heading p{font-size:12px}.course-grid{grid-template-columns:1fr}.parent-strip{display:block;padding:23px}.parent-points{margin-top:15px}footer{padding:20px;gap:10px;flex-wrap:wrap}.lesson-dialog[open]{display:block;max-height:90vh;overflow:auto}.lesson-sidebar{width:100%;padding:14px}.lesson-steps{display:flex;margin:10px 0 0;overflow:auto}.lesson-steps span{white-space:nowrap;padding:7px}.lesson-body{padding:22px}.admin-header{padding:0 14px}.admin-search,.admin-avatar{display:none}.admin-layout{grid-template-columns:1fr}.admin-nav{display:flex;flex-direction:row;overflow:auto;padding:7px;gap:4px}.admin-nav a{white-space:nowrap;padding:10px;font-size:12px}.admin-nav-bottom{display:none}.admin-main{padding:15px}.admin-hero{min-height:95px}.admin-hero h1{font-size:25px}.admin-mascot{font-size:43px}.metrics{grid-template-columns:repeat(2,1fr)}.admin-columns{grid-template-columns:1fr}.admin-side{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.edit-dialog{max-height:90vh;overflow:auto}}
.hero-illustration{position:absolute;width:min(760px,108%);max-width:none;left:-4%;top:-70px;filter:drop-shadow(0 22px 18px #4577ab3b)}@media(max-width:950px){.hero-art{display:block;min-height:320px}.hero-illustration{top:-100px;width:590px;left:50%;transform:translateX(-50%)}}@media(max-width:640px){.hero-art{display:none}}
.lesson-dialog{width:min(980px,96vw);max-width:none;min-height:600px}.lesson-body{display:flex;flex-direction:column;min-width:0}.lesson-body h2{margin:8px 0 2px}.lesson-body>p{margin:5px 0 12px}.lesson-steps .done{background:#d9f6e9;color:#178358}.voice-picker{display:flex;align-items:center;gap:8px;margin:4px 0 14px;flex-wrap:wrap}.voice-picker span{font-size:13px;font-weight:800;color:#5a708e;margin-right:4px}.voice-picker button{border:2px solid #d9e7f7;background:#fff;color:#456486;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:800}.voice-picker button.selected{border-color:#3c83f5;background:#eaf3ff;color:#1d65cb}.lesson-panel{background:#f8fbff;border:1px solid #e7eef9;border-radius:20px;padding:20px 23px;min-height:260px}.stage-label{display:inline-block;color:#2571d8;background:#e2f0ff;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:900}.lesson-panel h3{font-size:23px;margin:12px 0 5px}.lesson-panel p{color:#61748c;font-size:14px;line-height:1.6;margin:5px 0 16px}.audio-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.audio-line{display:flex;align-items:center;gap:11px;text-align:left;border:2px solid #e0eaf5;border-radius:15px;background:#fff;padding:11px;color:#17345b}.audio-line:hover,.audio-line:focus-visible{border-color:#448bff}.audio-icon{display:grid;place-items:center;background:#e8f2ff;color:#2778ed;width:34px;height:34px;border-radius:50%;flex:none;font-size:12px}.audio-line strong,.audio-line small{display:block}.audio-line small{color:#7185a1;font-size:11px;margin-top:2px}.audio-line em{font-style:normal;color:#aac0da;margin-left:auto}.speak-panel{text-align:center}.speak-phrase{font-size:32px;font-weight:900;color:#286fdb;background:white;border-radius:18px;padding:22px;margin:18px 0}.speak-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}.privacy-note{display:block;color:#7a8ba3;margin-top:18px}.quiz-options{display:grid;gap:9px;margin-top:18px}.quiz-options button{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:2px solid #dce7f5;border-radius:14px;padding:10px 13px;color:#244163;font-weight:800}.quiz-options button span{display:grid;place-items:center;width:27px;height:27px;background:#e7f1ff;border-radius:50%;color:#3175df}.quiz-options button:hover:not(:disabled){border-color:#518eec}.quiz-options button.correct{background:#e9fbef;border-color:#4ac77b;color:#197b45}.quiz-options button.wrong{background:#fff0ef;border-color:#ee8080}.lesson-feedback{min-height:22px;color:#cb5959;font-size:13px;font-weight:800!important}.lesson-feedback.good{color:#238e57}.lesson-next{align-self:flex-end;font-size:16px;padding:11px 25px;margin-top:auto}.lesson-next:disabled{background:#b4c3d8;box-shadow:none;cursor:not-allowed}.finish-panel{text-align:center;display:grid;place-content:center}.finish-star{font-size:72px}.finish-panel h3{color:#2876f9}.word-options{margin:15px 0}@media(max-width:640px){.lesson-dialog{width:96vw}.lesson-body{min-height:520px}.lesson-panel{padding:16px;min-height:290px}.audio-list{grid-template-columns:1fr}.voice-picker button{font-size:12px}.speak-phrase{font-size:26px}.lesson-next{width:100%}}
/* Textbook unit catalog and in-page learning experience */
.primary-button{display:inline-flex;align-items:center;justify-content:center}.unit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.unit-card{background:#fff;border:1px solid #e2ebf5;border-radius:24px;overflow:hidden;box-shadow:0 8px 22px #284a7410;display:flex;flex-direction:column}.unit-card.ready{border-color:#bcdef9}.unit-card-top{display:flex;justify-content:space-between;align-items:center;padding:15px 17px 11px;color:#3973bd;font-weight:900;font-size:12px}.unit-card-top span:last-child{color:#34835c;background:#e9f8ed;border-radius:20px;padding:4px 9px}.unit-card.pending .unit-card-top span:last-child{color:#78879c;background:#f0f3f7}.unit-card img,.unit-placeholder{width:100%;height:145px;object-fit:cover}.unit-placeholder{display:grid;place-items:center;background:linear-gradient(140deg,#e6f2ff,#fff4dc);font-size:62px}.unit-card-content{padding:14px 18px 19px;display:flex;flex:1;flex-direction:column}.unit-card-content small{color:#67809c;font-weight:800}.unit-card-content h3{font-size:17px;line-height:1.35;margin:5px 0 8px;min-height:45px}.unit-card-content p{color:#60738a;font-size:13px;margin:0 0 14px}.unit-card-content a,.unit-locked{margin-top:auto;display:flex;justify-content:space-between;background:#eaf3ff;color:#236bd2;border-radius:13px;padding:10px 12px;font-size:13px;font-weight:900}.unit-card-content a:hover{background:#d8eaff}.unit-locked{background:#f3f5f8;color:#98a5b5}.catalog-note{color:#74839a;font-size:13px;margin:17px 0}.learning-page{background:#f8f9f5}.learning-shell{max-width:1360px;margin:auto;padding:25px 24px 70px}.learning-breadcrumb{display:flex;gap:11px;align-items:center;color:#73859d;font-size:13px;font-weight:700}.learning-breadcrumb a:hover{color:#2876f9}.learning-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin:23px 0}.learning-heading h1{font-size:clamp(36px,4vw,56px);line-height:1.15;margin:13px 0 8px}.learning-heading p{color:#60738b;font-size:17px;margin:0}.learning-progress{background:#fff;border:1px solid #e5edf5;border-radius:20px;padding:18px 22px;min-width:220px;box-shadow:0 8px 20px #2049780c}.learning-progress>span,.learning-progress strong{font-size:12px;color:#647b96}.learning-progress .progress-bar{margin:10px 0;width:100%}.learning-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:22px;align-items:start}.learning-main{display:grid;gap:20px}.story-card,.choice-card,.practice-card,.aside-card{background:#fff;border:1px solid #e5edf5;border-radius:26px;box-shadow:0 9px 25px #2049780d}.story-card,.choice-card,.practice-card{padding:25px}.story-top{display:flex;justify-content:space-between;color:#2c70ce;font-size:12px;font-weight:900}.story-top span:last-child{color:#69819d}.learning-main h2{font-size:25px;margin:11px 0 18px}.story-picture{position:relative;overflow:hidden;border-radius:22px;background:#e2f1ff}.story-picture img{display:block;width:100%;max-height:410px;object-fit:cover}.picture-label{position:absolute;left:16px;top:15px;background:#fffdf2ec;border-radius:999px;padding:6px 12px;color:#4b7db4;font-size:12px;font-weight:900}.dialogue-list{display:grid;gap:11px;margin:20px 0 13px}.dialogue-line{width:100%;display:flex;align-items:center;gap:15px;text-align:left;background:#fff8f7;border:2px solid #ffe6e3;border-radius:18px;padding:12px 16px;color:#1f3554}.dialogue-line.blue{background:#f3f8ff;border-color:#deebff}.dialogue-line:hover,.dialogue-line:focus-visible{border-color:#79b3ff;transform:translateY(-1px)}.dialogue-avatar{display:grid;place-items:center;width:48px;height:48px;flex:none;background:white;border-radius:50%;font-size:27px}.dialogue-copy{display:grid;gap:2px;flex:1}.dialogue-copy small{color:#7188a5;font-size:11px;font-weight:900}.dialogue-copy strong{font-size:21px}.dialogue-copy em{font-style:normal;font-size:12px;color:#788a9e}.dialogue-play{color:#397bd9;background:white;border-radius:50%;width:33px;height:33px;display:grid;place-items:center;font-size:12px}.story-actions{display:flex;align-items:center;gap:14px;color:#8190a3;font-size:12px}.activity-number{color:#2c70ce;font-size:12px;font-weight:900}.choice-card p,.practice-card p{color:#61748d;margin-top:-7px;line-height:1.7}.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.choice-option{border:2px solid #e0eaf6;border-radius:18px;background:#fafdff;padding:16px 10px;display:grid;gap:6px;justify-items:center;color:#203b60}.choice-option>span{font-size:34px}.choice-option strong{font-size:15px}.choice-option small{font-size:13px;color:#6480a0}.choice-option:hover,.choice-option.selected{border-color:#377cf0;background:#eaf3ff}.choice-result{background:#fff7e6;color:#9a6623;border-radius:14px;padding:12px 16px;margin-top:15px;font-size:13px;font-weight:800;min-height:45px}.practice-phrase{font-size:30px;font-weight:900;color:#2876ed;background:#eef6ff;border-radius:18px;padding:21px;margin:18px 0}.practice-actions{display:flex;gap:9px;flex-wrap:wrap}.practice-card>small{display:block;color:#8392a6;margin-top:13px}.finish-row{border-top:1px solid #e9edf2;margin-top:22px;padding-top:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.finish-row .primary-button{font-size:16px;padding:12px 23px}.finish-row .primary-button:disabled{background:#bcc9d7;box-shadow:none;cursor:not-allowed}.finish-row span{color:#238e57;font-size:13px;font-weight:800}.learning-aside{display:grid;gap:15px;position:sticky;top:18px}.aside-card{padding:21px}.aside-card>strong{font-size:16px}.aside-card p{color:#6c7d95;font-size:13px;line-height:1.6}.aside-card ul{padding-left:19px;color:#496585;font-size:13px;line-height:1.9}.aside-card .voice-picker{display:grid}.aside-card .voice-picker button{width:100%;text-align:left}.next-card{background:#e8f4ff}.next-card a{font-size:13px;color:#2374df;font-weight:900}
@media(max-width:1100px){.unit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.learning-layout{grid-template-columns:1fr}.learning-aside{position:static;grid-template-columns:repeat(3,1fr)}}@media(max-width:640px){.unit-grid{grid-template-columns:1fr 1fr;gap:10px}.unit-card img,.unit-placeholder{height:100px}.unit-card-content{padding:10px}.unit-card-content h3{font-size:14px;min-height:58px}.unit-card-content p{font-size:11px}.learning-shell{padding:20px 14px 45px}.learning-heading{display:block}.learning-heading h1{font-size:37px}.learning-progress{margin-top:18px}.learning-main h2{font-size:21px}.story-card,.choice-card,.practice-card{padding:16px}.story-picture img{height:230px}.choice-grid{grid-template-columns:1fr}.choice-option{grid-template-columns:40px 1fr;text-align:left;justify-items:start;padding:10px}.choice-option small{grid-column:2}.learning-aside{grid-template-columns:1fr}.practice-phrase{font-size:24px}.story-actions{flex-wrap:wrap}.dialogue-copy strong{font-size:18px}}
/* Character-led story interaction */
.story-picture img{height:auto;max-height:none;aspect-ratio:16/9;object-fit:cover}.scene-instruction{display:inline-flex;align-items:center;background:#fff5df;color:#8a5c1a;border-radius:13px;padding:9px 14px;margin:-2px 0 14px;font-weight:800;font-size:14px}.scene-hotspots{position:absolute;inset:0}.character-hotspot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:85px;height:85px;display:grid;place-items:center;border:0;background:transparent;color:#17395b;z-index:3}.hotspot-ring{width:64px;height:64px;border:3px solid #fff;border-radius:50%;background:#ffffff15;box-shadow:0 0 0 5px #2876f977,0 5px 18px #153d6380;transition:transform .2s,background .2s}.character-hotspot:hover .hotspot-ring,.character-hotspot:focus-visible .hotspot-ring{transform:scale(1.12);background:#ffffff55}.character-hotspot.guided .hotspot-ring{animation:hotspot-pulse 1.6s ease-in-out infinite}.character-hotspot.discovered .hotspot-ring{box-shadow:0 0 0 4px #61c484aa,0 5px 18px #153d6366}.hotspot-label{position:absolute;top:76px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff;color:#245b9c;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:900;box-shadow:0 3px 9px #12345633}.character-hotspot.guided:after{content:'👆';position:absolute;top:-20px;right:-10px;font-size:30px;animation:point-bob 1s ease-in-out infinite}.scene-bubble{position:absolute;left:var(--bubble-x);top:var(--bubble-y);transform:translateX(-50%);max-width:42%;min-width:210px;z-index:5;background:#fff;border:3px solid #ffd475;border-radius:21px;padding:11px 17px;box-shadow:0 11px 27px #183d6b3d;text-align:center;pointer-events:none}.scene-bubble[hidden]{display:none}.scene-bubble small,.scene-bubble strong,.scene-bubble span{display:block}.scene-bubble small{color:#7990a6;font-size:11px;font-weight:800}.scene-bubble strong{color:#165cb3;font-size:clamp(17px,2vw,27px);line-height:1.2;margin:4px 0}.scene-bubble span{color:#657c92;font-size:12px}.scene-bubble.bubble-enter{animation:bubble-pop .4s cubic-bezier(.2,1.4,.4,1) both}.story-actions .outline-button:disabled{opacity:.45;cursor:not-allowed}.dialogue-list:empty{display:none}.dialogue-list .dialogue-line{animation:bubble-pop .35s ease-out both}@keyframes hotspot-pulse{0%,100%{box-shadow:0 0 0 5px #2876f977,0 5px 18px #153d6380}50%{box-shadow:0 0 0 13px #2876f922,0 5px 18px #153d6380}}@keyframes point-bob{50%{transform:translateY(-9px)}}@keyframes bubble-pop{from{opacity:0;transform:translateX(-50%) scale(.75) translateY(10px)}to{opacity:1;transform:translateX(-50%) scale(1) translateY(0)}}.dialogue-list .dialogue-line{animation:none}@media(max-width:640px){.story-picture img{height:auto}.character-hotspot{width:54px;height:54px}.hotspot-ring{width:40px;height:40px;border-width:2px;box-shadow:0 0 0 4px #2876f977}.hotspot-label{top:46px;font-size:10px;padding:2px 7px}.character-hotspot.guided:after{font-size:21px;top:-10px;right:-6px}.scene-bubble{min-width:135px;max-width:48%;padding:6px 8px;border-width:2px;border-radius:13px}.scene-bubble strong{font-size:14px}.scene-bubble small,.scene-bubble span{font-size:9px}.scene-instruction{font-size:12px}.picture-label{font-size:10px;left:8px;top:8px}}
@media(prefers-reduced-motion:reduce){.character-hotspot.guided .hotspot-ring,.character-hotspot.guided:after,.scene-bubble.bubble-enter{animation:none}}
`n/* Show only the next guidance ring; hide it immediately after discovery. */`n.character-hotspot:not(.guided),.character-hotspot[hidden]{display:none}`n