:root{--blue:#2857d6;--navy:#17294a;--ink:#1b2940;--muted:#6f7d91;--line:#e5eaf2;--soft:#f5f7fb;--green:#27a66f}*{box-sizing:border-box}html{scroll-behavior:smooth;background:#fff}body{color:var(--ink);background:#fff;margin:0;font-family:Inter,ui-rounded,SF Pro Rounded,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}.topbar{z-index:1000;min-height:76px;padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fffffff5;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.brand{color:var(--navy);background:0 0;border:0;align-items:center;gap:10px;font-size:18px;display:flex}.brand span{background:var(--blue);color:#fff;border-radius:13px;place-items:center;width:42px;height:42px;font-weight:900;display:grid;box-shadow:0 6px 16px #2857d62b}.top-actions{align-items:center;gap:9px;display:flex}.level-pill,.icon-btn,.menu-btn{height:42px;color:var(--navy);background:#f7f9fc;border:1px solid #dce4ef;border-radius:14px;font-weight:800}.level-pill{padding:0 13px}.icon-btn{width:42px}.menu-btn{flex-direction:column;justify-content:center;gap:4px;width:46px;padding:10px;visibility:visible!important;z-index:1201!important;display:flex!important;position:relative!important}.menu-btn i{background:var(--navy);border-radius:3px;width:100%;height:3px;display:block}.scrim{z-index:1100;background:#101d356b;border:0;position:fixed;inset:0}.drawer{z-index:1200;width:min(360px,100vw - 24px);height:100dvh;padding:max(18px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) 14px;background:#fff;animation:.22s ease-out slideIn;position:fixed;top:0;right:0;overflow:auto;box-shadow:-20px 0 60px #0f1e3940}.drawer-head{text-transform:uppercase;letter-spacing:.12em;color:#52637b;justify-content:space-between;align-items:center;padding:3px 8px 14px;font-size:12px;display:flex}.drawer-head button{color:#263955;background:#eef2f8;border:0;border-radius:50%;width:38px;height:38px;font-size:25px}.drawer>button{text-align:left;width:100%;color:var(--ink);background:#fff;border:0;border-radius:16px;align-items:center;gap:13px;padding:12px;display:flex}.drawer>button:hover,.drawer>button.active{color:#204bb9;background:#edf3ff}.drawer>button>span:first-child{background:#f3f6fa;border-radius:13px;flex:0 0 43px;place-items:center;height:43px;font-size:21px;display:grid}.drawer strong,.drawer small{display:block}.drawer small{color:var(--muted);margin-top:3px}@keyframes slideIn{0%{transform:translate(100%)}to{transform:none}}.page{width:min(960px,100%);min-height:calc(100dvh - 154px);margin:auto;padding:34px 24px 64px}.mission-head{justify-content:space-between;align-items:end;gap:20px;margin-bottom:16px;display:flex}.mission-head small,.eyebrow,.task>small{letter-spacing:.13em;color:#2860aa;font-weight:900}.mission-head h1{margin:7px 0 0;font-size:clamp(23px,4vw,34px);line-height:1.15}.mission-head>b{color:var(--blue);white-space:nowrap;font-size:23px}.mission-head>b span{color:var(--muted);font-size:13px}.progress{background:#edf0f5;border-radius:20px;height:7px;margin-bottom:20px;overflow:hidden}.progress i{border-radius:inherit;background:linear-gradient(90deg,#2857d6,#4e83f3);min-width:10px;height:100%;display:block}.lesson-card{border:1px solid var(--line);background:#fff;border-radius:25px;grid-template-columns:42% 58%;display:grid;overflow:hidden;box-shadow:0 16px 45px #1d315012}.scene{background:linear-gradient(145deg,#eef7ff,#f8f2ff);place-items:center;min-height:380px;padding:26px;display:grid;position:relative}.scene em{background:#fff;border-radius:13px;padding:8px 14px;font-size:13px;font-style:normal;font-weight:800;position:absolute;bottom:24px;box-shadow:0 5px 15px #1d31501c}.character{place-items:center;display:grid;position:relative}.character .body{filter:drop-shadow(0 12px 10px #25426c20);font-size:105px}.bubble{z-index:2;background:#fff;border-radius:50% 50% 50% 10%;place-items:center;width:64px;height:64px;font-size:31px;display:grid;position:absolute;top:-43px;right:-28px;box-shadow:0 8px 28px #20385a1e}.phrase{border-bottom:1px solid var(--line);grid-column:2;align-items:center;gap:13px;padding:23px 26px;display:flex}.phrase button{background:#eef4ff;border:0;border-radius:50%;flex:0 0 43px;height:43px}.phrase strong,.phrase span{display:block}.phrase strong{font-size:19px}.phrase span{color:var(--muted);margin-top:4px}.task{grid-column:2;padding:25px 26px}.task h2{margin:8px 0 17px;font-size:21px}.listen{color:#214798;background:#f2f6ff;border:1px solid #cfe0ff;border-radius:15px;width:100%;padding:13px}.task label{margin:20px 0 7px;font-size:13px;font-weight:800;display:block}.answer-row{gap:9px;display:flex}.answer-row input{border:1px solid #cfd7e3;border-radius:14px;outline:none;flex:1;min-width:0;padding:13px}.answer-row input:focus{border-color:#4b73db;box-shadow:0 0 0 3px #4b73db1f}.answer-row button{background:#edf2fb;border:0;border-radius:14px;width:48px}.answer-row button.recording{background:#ffe9e9;animation:1s infinite pulse}.check,.feedback button,.tool-box>button{background:var(--blue);color:#fff;border:0;border-radius:14px;width:100%;margin-top:11px;padding:13px;font-weight:900}.feedback{background:#fff6e4;border:1px solid #f3d998;border-radius:20px;align-items:center;gap:18px;margin-top:18px;padding:20px;display:flex;position:relative;overflow:hidden}.feedback.ok{background:#ecfaf4;border-color:#ace5ce}.feedback strong{font-size:20px}.feedback p{margin:5px 0}.feedback button{background:var(--green);width:auto;padding-inline:20px}.hero-cheer{font-size:70px;animation:.8s cubic-bezier(.2,.9,.2,1) both cheer;position:relative}.hero-cheer span{font-size:28px;animation:1s infinite star;position:absolute;top:-4px;right:-5px}.confetti{opacity:.45;pointer-events:none;background:radial-gradient(circle,#ffd33d 0 3px,#0000 4px) 5% 10%/55px 55px,radial-gradient(circle,#46c79a 0 3px,#0000 4px) 30% 20%/70px 70px,radial-gradient(circle,#4a72e2 0 3px,#0000 4px) 60% 4%/62px 62px;position:absolute;inset:0}@keyframes cheer{0%{opacity:0;transform:translateY(40px)scale(.5)rotate(-12deg)}55%{transform:translateY(-10px)scale(1.15)rotate(8deg)}to{transform:none}}@keyframes star{50%{transform:scale(1.4)rotate(30deg)}}@keyframes pulse{50%{transform:scale(.94)}}.utility>h1{margin:9px 0;font-size:clamp(29px,5vw,44px)}.utility>p{max-width:620px;color:var(--muted);font-size:17px;line-height:1.6}.map-progress{border:1px solid var(--line);border-radius:19px;grid-template-columns:1fr auto;gap:10px;margin:27px 0;padding:20px;display:grid}.map-progress span{text-transform:uppercase;color:var(--muted);letter-spacing:.1em;font-size:12px;font-weight:900}.map-progress i{background:#eef1f5;border-radius:10px;grid-column:1/-1;height:8px;overflow:hidden}.map-progress i b{background:var(--blue);height:100%;display:block}.map-grid{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.map-grid section{border:1px solid var(--line);border-radius:18px;padding:15px}.map-grid h3{margin:0 0 13px}.map-grid section>div{gap:8px;display:flex}.map-grid button{border:1px solid var(--line);background:#fff;border-radius:13px;flex:1;place-items:center;min-width:0;padding:9px;display:grid}.map-grid button:disabled{color:#a6afbd;background:#f4f5f7}.map-grid button.current{border-color:var(--blue);color:var(--blue);background:#edf3ff}.map-grid small{font-size:10px}.tool-cards{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px;display:grid}.tool-cards button{border:1px solid var(--line);text-align:left;background:#fff;border-radius:20px;flex-direction:column;align-items:start;min-height:190px;padding:20px;display:flex;box-shadow:0 8px 24px #17294a0a}.tool-cards button>span{font-size:43px}.tool-cards strong{margin-top:18px;font-size:18px}.tool-cards small{color:var(--muted);margin-top:4px}.tool-cards em{color:var(--blue);margin-top:auto;font-size:12px;font-style:normal;font-weight:800}.tool-box{border:1px solid var(--line);border-radius:20px;max-width:650px;margin-top:25px;padding:22px}.tool-box label{margin-bottom:8px;font-weight:800;display:block}.tool-box textarea{resize:vertical;border:1px solid #cfd7e3;border-radius:14px;width:100%;min-height:130px;padding:14px}.result{background:#eef7ff;border-radius:13px;margin-top:13px;padding:15px}footer{padding:22px max(20px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));border-top:1px solid var(--line);color:var(--muted);justify-content:center;gap:10px;font-size:13px;display:flex}footer strong{color:var(--navy)}@media (max-width:700px){.topbar{min-height:68px;padding-top:max(10px,env(safe-area-inset-top));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.brand strong{display:none}.brand span{width:39px;height:39px}.top-actions{gap:6px}.level-pill{padding-inline:9px}.page{padding:24px 14px 48px}.lesson-card{border-radius:21px;display:block}.scene{min-height:230px}.character .body{font-size:82px}.phrase,.task{grid-column:auto;padding:18px}.mission-head{align-items:start}.mission-head small{font-size:10px;line-height:1.6}.mission-head h1{font-size:22px}.mission-head>b{font-size:18px}.map-grid{grid-template-columns:1fr}.tool-cards{grid-template-columns:1fr 1fr}.feedback{align-items:flex-start}.feedback.ok{flex-direction:column}.hero-cheer{align-self:center}.drawer{width:min(330px,100vw - 12px)}footer{text-align:center;display:grid}}@media (max-width:370px){.topbar{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}.level-pill{padding-inline:7px;font-size:12px}.icon-btn{width:39px}.menu-btn{width:42px}.page{padding-inline:10px}.mission-head{gap:8px}.mission-head h1{font-size:20px}.scene{min-height:205px}.phrase,.task{padding:15px}.task h2{font-size:18px}.listen{font-size:13px}.tool-cards{grid-template-columns:1fr}.answer-row input{font-size:16px}.feedback{padding:16px}.drawer>button{padding:9px}.drawer>button>span:first-child{flex-basis:39px;height:39px}}.seo-content{border:1px solid var(--line);background:#f8faff;border-radius:26px;width:min(960px,100% - 48px);margin:10px auto 70px;padding:36px}.seo-content>div:first-child{max-width:760px}.seo-content>div:first-child>span{color:var(--blue);letter-spacing:.14em;font-size:12px;font-weight:900}.seo-content h2{margin:9px 0 12px;font-size:clamp(24px,4vw,36px);line-height:1.18}.seo-content p{color:#596980;line-height:1.7}.seo-topics{grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0;display:grid}.seo-topics article{border:1px solid var(--line);background:#fff;border-radius:18px;padding:20px}.seo-topics b{font-size:26px}.seo-topics h3{margin:12px 0 5px;font-size:17px}.seo-topics p{margin:0;font-size:14px}.seo-faq{padding-top:8px}.seo-faq h2{font-size:24px}.seo-faq details{border-top:1px solid var(--line);padding:15px 2px}.seo-faq summary{cursor:pointer;font-weight:800}.seo-faq details p{margin:9px 0 0}@media (max-width:700px){.seo-content{width:calc(100% - 28px);margin-bottom:42px;padding:24px}.seo-topics{grid-template-columns:1fr}.seo-content h2{font-size:25px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}