:root{--orange:#ff891d;--deep:#bd4e00;--sky:#dff6ff;--ink:#19324a;--muted:#6d7f8d;--line:#d9e8ed;--green:#72bd36;--shadow:0 20px 55px rgba(32,91,119,.15);--unit:#12a9b9;--accent:#82d63a}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:radial-gradient(circle at 10% 0%,#fff3d4,transparent 24%),linear-gradient(180deg,#e8f8ff 0,#fff 34%,#fff8e8 100%);min-height:100vh}button,input{font:inherit}button{touch-action:manipulation}.audio-toast,#audio-toast,#audioToast,[data-audio-toast],.audio-feedback{display:none!important;visibility:hidden!important;pointer-events:none!important}
.launch{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 34%,#b9efff 0,#66c8ed 40%,#526ab8 100%);transition:.55s}.launch.out{opacity:0;visibility:hidden;transform:scale(1.04)}.launch-card{position:relative;overflow:hidden;width:min(940px,95vw);min-height:570px;display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;gap:36px;padding:42px;border-radius:42px;background:linear-gradient(145deg,#fffaf0,#e5f8ff);box-shadow:0 35px 90px rgba(17,56,107,.35);border:5px solid rgba(255,255,255,.75)}.launch-card:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-100px;top:-170px;background:rgba(255,145,25,.15)}.launch-cover{position:relative;z-index:1;width:min(330px,100%);border-radius:20px;box-shadow:0 24px 50px rgba(71,62,52,.3);transform:rotate(-2deg)}.launch-copy{position:relative;z-index:1}.launch-kicker{font-size:12px;font-weight:1000;letter-spacing:.18em;color:#0f9bb3}.launch h1{margin:12px 0 4px;font-size:clamp(50px,8vw,90px);line-height:.87;letter-spacing:-.07em;color:var(--orange);text-shadow:0 6px 0 #be560c}.launch h1 span{display:block;color:#15a6ba;text-shadow:none;font-size:.48em;letter-spacing:.02em;margin-top:20px}.launch p{max-width:430px;color:#647887;line-height:1.8;font-weight:750}.start{border:0;border-radius:18px;padding:16px 28px;color:#fff;background:linear-gradient(135deg,#ff941c,#eb5b16);font-weight:1000;font-size:17px;box-shadow:0 12px 25px rgba(235,91,22,.3);cursor:pointer}.start:hover{transform:translateY(-2px)}
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.88);backdrop-filter:blur(15px);border-bottom:1px solid var(--line)}.topin{max-width:1140px;margin:auto;padding:11px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px}.brand,.back{display:flex;align-items:center;gap:10px;font-weight:1000}.brand i,.back i{width:40px;height:40px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#ff9a21,#ef641b);color:#fff;font-style:normal;font-size:22px}.back{text-decoration:none;color:var(--ink)}.back i{background:var(--unit);font-size:17px}.overall{font-size:12px;color:var(--muted);font-weight:900}.wrap{max-width:1140px;margin:auto;padding:30px 18px 70px}.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1.25fr .55fr;align-items:center;gap:30px;padding:36px;border-radius:36px;background:linear-gradient(135deg,#15a9bf,#69c7ed 55%,#ff9a25);color:#fff;box-shadow:var(--shadow)}.hero:after{content:"a e i o u";position:absolute;right:-20px;bottom:-15px;font-size:74px;font-weight:1000;letter-spacing:.06em;color:rgba(255,255,255,.12)}.hero h2{font-size:clamp(40px,6vw,68px);margin:8px 0 12px;letter-spacing:-.055em;line-height:1}.hero p{max-width:680px;line-height:1.75;margin:0;color:rgba(255,255,255,.93)}.hero-cover{position:relative;z-index:1;width:180px;justify-self:center;border:4px solid white;border-radius:17px;box-shadow:0 20px 40px rgba(38,79,107,.3);transform:rotate(3deg)}.kicker{font-size:11px;font-weight:1000;letter-spacing:.18em}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:15px 0 34px}.metric{padding:18px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.95);box-shadow:0 12px 30px rgba(36,83,112,.08)}.metric strong{display:block;font-size:27px;color:#0c9cb2}.metric span{font-size:12px;color:var(--muted);font-weight:900}.section-title{display:flex;align-items:end;justify-content:space-between;margin:0 0 15px}.section-title h3{font-size:29px;margin:0}.section-title p{font-size:12px;color:var(--muted);margin:0}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.unit{--unit:#12a9b9;position:relative;overflow:hidden;min-height:224px;padding:22px;border:1px solid var(--line);border-radius:26px;background:#fff;text-decoration:none;color:var(--ink);box-shadow:0 13px 32px rgba(43,86,108,.1);transition:.2s}.unit:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(43,86,108,.18)}.unit:before{content:"";position:absolute;left:0;top:0;width:100%;height:8px;background:linear-gradient(90deg,var(--unit),var(--accent))}.unit-top{display:flex;align-items:center;justify-content:space-between}.unit-no{color:var(--unit);font-size:12px;font-weight:1000;letter-spacing:.1em}.emoji{font-size:35px}.unit h4{font-size:21px;line-height:1.25;margin:20px 0 7px}.unit p{font-size:13px;color:var(--muted);margin:0}.unit-foot{position:absolute;left:22px;right:22px;bottom:18px;display:flex;align-items:center;justify-content:space-between;color:#85929a;font-size:11px;font-weight:900}.state{color:var(--unit)}.tick{width:27px;height:27px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-style:normal}.unit.done{background:linear-gradient(145deg,#f5fff1,#fff)}.unit.done .tick{color:white;background:var(--green);border-color:var(--green)}.reviews{margin-top:34px;padding:24px;border:1px dashed #f4b15d;border-radius:25px;background:#fff8e9}.reviews h3{margin:0 0 12px}.review-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.review{padding:13px;border-radius:16px;background:white;border:1px solid #f0dfc2;color:#8a5a1e;font-size:12px;font-weight:900;text-align:center}.tip{margin-top:22px;padding:17px 19px;border-radius:18px;background:#eafaff;border:1px solid #bde9f3;color:#286678;font-size:13px;font-weight:800;line-height:1.7}
.unit-page .topin{max-width:980px}.badge{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:white;color:var(--unit);font-size:12px;font-weight:1000}.unit-page .wrap{max-width:980px;padding-top:24px}.mission{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 17px;border-radius:19px;color:white;background:linear-gradient(130deg,var(--unit),var(--accent));box-shadow:0 14px 28px color-mix(in srgb,var(--unit) 24%,transparent)}.mission span{font-size:11px;font-weight:1000;letter-spacing:.14em}.mission strong{font-size:13px}.unit-hero{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;padding:25px 0 15px}.unit-hero h1{font-size:clamp(38px,7vw,65px);letter-spacing:-.055em;line-height:1;margin:7px 0}.unit-hero p{color:var(--muted);line-height:1.7;margin:0}.sound-orb{width:116px;height:116px;border:0;border-radius:35px;background:linear-gradient(145deg,var(--unit),var(--accent));color:#fff;box-shadow:0 18px 38px color-mix(in srgb,var(--unit) 26%,transparent);cursor:pointer}.sound-orb b{display:block;font-size:53px;line-height:.8}.sound-orb small{font-size:16px;font-weight:1000}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.step{padding:11px 8px;border:1px solid var(--line);border-radius:16px;background:white;color:var(--muted);font-size:12px;font-weight:1000;text-align:center;cursor:pointer}.step.active{color:var(--unit);border-color:color-mix(in srgb,var(--unit) 40%,transparent);background:color-mix(in srgb,var(--unit) 7%,white)}.step.done{color:#399429;background:#f0ffed;border-color:#b9e5ae}.progress{height:9px;border-radius:999px;background:#e5eef0;overflow:hidden;margin-bottom:14px}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--unit),var(--accent));transition:.35s}.panel{display:none;padding:22px;border:1px solid var(--line);border-radius:27px;background:rgba(255,255,255,.96);box-shadow:var(--shadow)}.panel.active{display:block}.panel-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:15px}.panel-head h2{margin:0;font-size:25px}.panel-head span{font-size:12px;color:var(--muted);font-weight:900}.word-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.word{position:relative;border:1px solid var(--line);border-radius:19px;padding:15px;text-align:center;background:linear-gradient(#fff,#f8fffb)}.word .pic{font-size:36px}.word button{display:block;width:100%;border:0;background:none;color:var(--unit);font-size:20px;font-weight:1000;cursor:pointer}.word p{margin:6px 0 0;color:var(--muted);font-size:12px;font-weight:800}.vowel{color:#ef5f2f}.actions{display:flex;justify-content:center;gap:9px;margin-top:18px}.main,.ghost{padding:13px 20px;border-radius:15px;font-weight:1000;cursor:pointer}.main{border:0;color:white;background:linear-gradient(135deg,var(--unit),var(--accent))}.ghost{border:1px solid var(--line);background:white;color:var(--ink)}.quiz{max-width:650px;margin:5px auto}.counter{text-align:center;color:var(--muted);font-size:12px;font-weight:900}.blend{text-align:center;font-size:clamp(42px,8vw,70px);font-weight:1000;margin:18px 0;color:var(--ink)}.blend .onset{color:var(--unit)}.blend .plus{font-size:.55em;color:#a8b5ba;padding:0 10px}.options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.option{padding:14px;border:1px solid var(--line);border-radius:15px;background:#f8fcfd;color:var(--ink);font-weight:1000;cursor:pointer}.option.good{border-color:#5ab845;background:#efffec;color:#378927}.option.bad{border-color:#e96961;background:#fff0ef;color:#c83b34}.listen-btn{display:block;margin:18px auto;width:92px;height:92px;border:0;border-radius:50%;background:linear-gradient(145deg,var(--unit),var(--accent));color:white;font-size:37px;cursor:pointer;box-shadow:0 15px 30px color-mix(in srgb,var(--unit) 26%,transparent)}.feedback{min-height:25px;text-align:center;margin:10px;color:var(--muted);font-size:13px;font-weight:900}.feedback.good{color:#399429}.feedback.bad{color:#ce493f}.story-title{text-align:center;margin:0 0 17px}.story-title small{display:block;color:var(--unit);letter-spacing:.15em}.story-title h2{font-size:34px;margin:7px}.sight{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-bottom:17px}.sight span{padding:7px 10px;border-radius:999px;background:#fff5dc;color:#8a5b1a;font-size:12px;font-weight:900}.story-lines{display:grid;gap:9px}.story-line{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:17px;background:#fff}.story-line button{width:40px;height:40px;border:0;border-radius:13px;background:color-mix(in srgb,var(--unit) 12%,white);color:var(--unit);cursor:pointer}.story-line strong{font-size:17px;line-height:1.55}.story-line p{margin:2px 0 0;color:var(--muted);font-size:12px}.read-check{width:27px;height:27px;border:2px solid #c7d9dc;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:white;font-style:normal}.read-check.checked{background:#60b842;border-color:#60b842}.complete-box{text-align:center;padding:27px}.complete-box .trophy{font-size:62px}.complete-box h2{font-size:30px;margin:6px}.complete-box p{color:var(--muted);line-height:1.7}.locked{opacity:.55;pointer-events:none}.retry-note{padding:12px;border-radius:14px;background:#fff8de;color:#725d20;font-size:12px;font-weight:850;text-align:center;margin-top:12px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.launch-card{grid-template-columns:.8fr 1.2fr}.hero{grid-template-columns:1fr .42fr}.review-row{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.word-grid{grid-template-columns:repeat(3,1fr)}.sound-orb{width:90px;height:90px;border-radius:27px}.sound-orb b{font-size:42px}}@media(max-width:620px){.launch{padding:12px}.launch-card{min-height:0;grid-template-columns:1fr;text-align:center;padding:25px;border-radius:28px}.launch-cover{width:150px;justify-self:center}.launch h1{font-size:53px}.launch p{font-size:13px}.topin{padding:9px 12px}.brand span{font-size:13px}.overall{font-size:10px}.wrap{padding:18px 12px 50px}.hero{grid-template-columns:1fr;padding:25px;border-radius:26px}.hero-cover{display:none}.metrics{gap:7px}.metric{padding:13px}.metric strong{font-size:22px}.grid{grid-template-columns:1fr}.unit{min-height:205px}.section-title{align-items:start;gap:12px}.section-title p{text-align:right}.review-row{grid-template-columns:1fr 1fr}.unit-page .wrap{padding:17px 11px 55px}.mission{padding:12px 13px}.unit-hero{padding:20px 2px 12px}.unit-hero h1{font-size:38px}.unit-hero p{font-size:13px}.sound-orb{width:78px;height:78px}.steps{grid-template-columns:1fr 1fr}.panel{padding:15px;border-radius:22px}.panel-head{align-items:start}.word-grid{grid-template-columns:1fr 1fr}.word{padding:12px}.story-line{grid-template-columns:auto 1fr}.read-check{grid-column:2;justify-self:end}.story-line strong{font-size:15px}}