.cp-shell{--ink:#243a40;--paper:#fffaf1;--cream:#f9f0df;--line:#e6d4b4;--coral:#f16b61;--gold:#f4c75d;--mint:#83c8ad;--green:#2e866e;min-height:100vh;color:var(--ink);background:var(--cream);font-family:var(--font-noto-sans-tc), "Noto Sans TC", system-ui, sans-serif}.cp-shell *,.cp-shell :before,.cp-shell :after{box-sizing:border-box}.cp-shell button,.cp-shell a{font:inherit}.cp-shell button{color:inherit;cursor:pointer}.cp-shell button:disabled{cursor:not-allowed;opacity:.52}.cp-shell h1,.cp-shell h2,.cp-shell h3,.cp-shell p{margin:0}.cp-header{z-index:10;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffaf1f0;justify-content:space-between;align-items:center;gap:28px;padding:16px max(28px,50vw - 640px);display:flex;position:sticky;top:0}.cp-brand{color:inherit;align-items:center;gap:12px;text-decoration:none;display:flex}.cp-brand>span{color:#fff;background:var(--coral);border-radius:17px;place-items:center;width:56px;height:56px;display:grid;position:relative;box-shadow:0 7px #c9544d}.cp-brand>span b{font-size:32px;line-height:1}.cp-brand>span i{width:26px;height:26px;color:var(--ink);background:var(--gold);border-radius:50%;place-items:center;font-style:normal;font-weight:900;display:grid;position:absolute;bottom:-3px;right:-7px}.cp-brand div{gap:2px;display:grid}.cp-brand strong{font-size:18px}.cp-brand small{color:#7d7067}.cp-header nav{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.cp-header nav a{color:var(--ink);border-radius:999px;padding:9px 12px;font-size:14px;font-weight:800;text-decoration:none}.cp-header nav a:hover{background:#efe2cd}.cp-hero,.cp-panel,.cp-lesson,.cp-challenge,.cp-footer{width:min(1280px,100% - 56px);margin-inline:auto}.cp-hero{grid-template-columns:1.7fr .8fr;align-items:center;gap:36px;padding:84px 0 62px;display:grid}.cp-hero>div>span,.cp-heading>span,.cp-lesson-title>span{color:#bd4941;letter-spacing:.12em;font-size:14px;font-weight:950}.cp-hero h1{letter-spacing:-.04em;margin-top:16px;font-size:clamp(42px,5.8vw,76px);line-height:1.12}.cp-hero h1 em{color:var(--coral);font-style:normal}.cp-hero p{color:#756a62;max-width:780px;margin-top:24px;font-size:20px;line-height:1.8}.cp-hero aside{border:2px solid var(--line);background:var(--paper);border-radius:30px;padding:28px;box-shadow:0 9px #243a401c}.cp-hero aside>b{font-size:20px}.cp-hero ol{color:#695f58;gap:14px;margin:20px 0 0;padding-left:24px;line-height:1.55;display:grid}.cp-panel{border:2px solid var(--line);background:var(--paper);border-radius:38px;margin-bottom:38px;padding:48px}.cp-heading{grid-template-columns:220px 1fr;align-items:start;gap:20px;margin-bottom:32px;display:grid}.cp-heading h2{font-size:clamp(30px,4vw,48px);line-height:1.2}.cp-heading p{color:#7d7067;margin-top:10px;font-size:17px;line-height:1.65}.cp-group-grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.cp-group-grid>button{border:2px solid var(--line);text-align:left;background:#fff;border-radius:24px;grid-template-columns:48px 1fr;gap:14px;min-height:170px;padding:22px;transition:transform .15s;display:grid;box-shadow:0 6px #ead8b8}.cp-group-grid>button:hover{transform:translateY(-2px)}.cp-group-grid>button.active{border-color:var(--green);box-shadow:0 7px 0 var(--green);background:#e0f1eb}.cp-group-grid>button>span{color:#fff;background:var(--coral);border-radius:15px;place-items:center;width:46px;height:46px;font-weight:950;display:grid}.cp-group-grid>button>div{gap:7px;min-width:0;display:grid}.cp-group-grid b{font-size:18px}.cp-group-grid strong{letter-spacing:.05em;font-size:25px}.cp-group-grid small{color:#7d7067;overflow-wrap:anywhere;line-height:1.5}.cp-lesson{color:#fff;background:var(--ink);border-radius:40px;margin-bottom:38px;padding:50px;box-shadow:0 12px #14272d}.cp-lesson-title p{color:#c8d3d4;max-width:750px;margin-top:10px;font-size:18px;line-height:1.65}.cp-lesson-title h2{margin-top:6px;font-size:clamp(34px,4vw,52px)}.cp-letter-tabs{flex-wrap:wrap;gap:12px;margin:30px 0;display:flex}.cp-letter-tabs button{color:#fff;background:#324c53;border:2px solid #567078;border-radius:20px;place-items:center;width:74px;height:78px;display:grid}.cp-letter-tabs button.active{color:var(--ink);background:var(--gold);border-color:#fff;box-shadow:0 6px #c99a26}.cp-letter-tabs b{font-size:28px;line-height:1}.cp-letter-tabs small{font-size:18px;font-weight:800}.cp-lesson-layout{grid-template-columns:290px minmax(0,1fr);align-items:stretch;gap:22px;display:grid}.cp-lesson-layout>nav{align-content:start;gap:10px;display:grid}.cp-lesson-layout>nav button{color:#d7e0e1;text-align:left;background:#30474e;border:1px solid #5d747b;border-radius:18px;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;min-height:82px;padding:14px;display:grid}.cp-lesson-layout>nav button.active{color:var(--ink);border-color:var(--gold);background:var(--gold);box-shadow:0 6px #c99a26}.cp-lesson-layout>nav button>span{color:#fff;background:var(--coral);border-radius:12px;place-items:center;width:38px;height:38px;font-weight:900;display:grid}.cp-lesson-layout>nav button>div{gap:3px;min-width:0;display:grid}.cp-lesson-layout>nav b{font-size:17px}.cp-lesson-layout>nav small{color:inherit;opacity:.78}.cp-lesson-layout>nav i{font-style:normal}.cp-step-card{min-height:570px;color:var(--ink);background:var(--paper);border-radius:28px;padding:32px 32px 68px;position:relative}.cp-step-meta{border-bottom:1px dashed var(--line);justify-content:space-between;gap:16px;padding-bottom:18px;display:flex}.cp-step-meta span{white-space:nowrap;background:#efe3cf;border-radius:999px;padding:7px 12px;font-weight:800}.cp-step-content{text-align:center;align-content:center;place-items:center;gap:20px;min-height:410px;display:grid}.cp-step-content>small{color:#8a7c72;font-size:17px;font-weight:800}.cp-step-content>button,.cp-question-play,.cp-audio-actions button{color:#fff;background:var(--green);border:0;border-radius:18px;min-height:60px;padding:15px 24px;font-weight:900;box-shadow:0 6px #1b5f4e}.cp-listen>span{font-size:92px}.cp-listen h3{font-size:32px}.cp-letter-pair{grid-template-columns:repeat(2,130px);gap:14px;display:grid}.cp-letter-pair b{border:3px solid var(--line);background:#fff;border-radius:28px;place-items:center;height:150px;font-size:96px;line-height:1;display:grid}.cp-letter-pair span{color:var(--coral);grid-column:1/-1;font-size:40px;font-weight:950}.cp-audio-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.cp-word>span{font-size:92px;line-height:1}.cp-word h3{font-size:clamp(52px,7vw,84px);line-height:1}.cp-word h3 em{color:var(--coral);text-underline-offset:8px;font-style:normal;text-decoration:underline;text-decoration-thickness:7px}.cp-kid{place-items:center;gap:2px;display:inline-grid}.cp-kid small{color:var(--green);letter-spacing:.08em;font-size:14px}.cp-kid b{font-size:20px}.cp-letter-quiz{align-content:start;padding-top:34px}.cp-letter-options{grid-template-columns:repeat(6,minmax(64px,1fr));gap:10px;width:100%;display:grid}.cp-letter-options button{border:2px solid var(--line);background:#fff;border-radius:18px;place-items:center;min-height:88px;display:grid}.cp-letter-options b{font-size:30px}.cp-letter-options small{font-size:17px}.cp-letter-options button.correct,.cp-vowel-options button.correct{color:#155e4c;border-color:var(--green);background:#d8f1e8}.cp-letter-options button.wrong,.cp-vowel-options button.wrong{color:#8d2c27;border-color:var(--coral);background:#ffe1df}.cp-feedback{background:#e2f2ec;border-radius:18px;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 20px;width:100%;padding:16px;display:flex}.cp-feedback.wrong{background:#ffe7e3}.cp-feedback>b{font-size:20px}.cp-feedback>span{flex:240px}.cp-feedback>button{color:#fff;background:var(--ink);border:0;border-radius:12px;padding:10px 16px;font-weight:900}.cp-playing{color:#7e7168;text-align:center;min-height:28px;position:absolute;bottom:22px;left:28px;right:28px}.cp-playing.error{color:#a7332d;font-weight:800}.cp-blend-picker{flex-wrap:wrap;gap:10px;margin-bottom:26px;display:flex}.cp-blend-picker button{border:2px solid var(--line);background:#fff;border-radius:999px;padding:11px 18px;font-size:18px;font-weight:900}.cp-blend-picker button.active{color:#fff;border-color:var(--green);background:var(--green)}.cp-blend-board{text-align:center;background:#eef6f2;border-radius:28px;place-items:center;gap:22px;min-height:430px;padding:38px;display:grid}.cp-blend-visual{flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;display:flex}.cp-blend-visual>span{font-size:82px}.cp-blend-visual>i{color:#a98d63;font-size:46px;font-style:normal}.cp-blend-visual>strong{color:var(--green);font-size:clamp(52px,7vw,90px)}.cp-blend-letters{align-items:flex-end;display:flex}.cp-blend-letters b{place-items:center;min-width:100px;padding:8px 12px 14px;font-size:clamp(56px,6vw,82px);line-height:1;display:grid}.cp-blend-letters b.vowel{color:var(--coral);text-underline-offset:8px;text-decoration:underline;text-decoration-thickness:7px}.cp-blend-letters small{color:var(--ink);margin-top:12px;font-size:22px;text-decoration:none}.cp-blend-board>button{color:#fff;background:var(--green);border:0;border-radius:18px;min-width:330px;min-height:62px;padding:15px 22px;font-weight:900;box-shadow:0 6px #1b5f4e}.cp-blend-board>button.secondary{color:var(--ink);background:var(--gold);box-shadow-color:#c99a26}.cp-vowel-tabs{grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:22px;display:grid}.cp-vowel-tabs button{border:2px solid var(--line);background:#fff;border-radius:22px;place-items:center;gap:4px;min-height:126px;padding:14px;display:grid}.cp-vowel-tabs button.active{color:#fff;border-color:var(--coral);background:var(--coral);box-shadow:0 7px #bc4b44}.cp-vowel-tabs b{font-size:42px;line-height:1}.cp-vowel-tabs span{font-size:21px;font-weight:800}.cp-vowel-detail{background:#f2e4cc;border-radius:28px;grid-template-columns:240px 1fr;gap:26px;padding:28px;display:grid}.cp-vowel-detail>div{color:#fff;background:var(--coral);border-radius:24px;align-content:center;place-items:center;min-height:300px;display:grid}.cp-vowel-detail>div b{font-size:124px;line-height:1}.cp-vowel-detail>div span{font-size:30px;font-weight:900}.cp-vowel-detail>section h3{font-size:26px}.cp-vowel-detail>section>p{color:#74675e;margin-top:8px;line-height:1.6}.cp-vowel-detail>section>div{grid-template-columns:repeat(3,minmax(130px,1fr));gap:12px;margin-top:20px;display:grid}.cp-vowel-detail>section button{border:2px solid var(--line);background:var(--paper);border-radius:20px;place-items:center;gap:7px;min-height:180px;padding:15px;display:grid}.cp-vowel-detail>section button>span{font-size:42px}.cp-vowel-detail>section button>b{font-size:28px}.cp-vowel-detail>section button>small{color:var(--green);font-weight:900}.cp-challenge{background:var(--gold);border-radius:38px;margin-bottom:38px;padding:48px;box-shadow:0 10px #c99827}.cp-challenge .cp-heading{margin-bottom:24px}.cp-challenge-card{background:var(--paper);border-radius:28px;place-items:center;min-height:480px;padding:42px;display:grid}.cp-challenge-start,.cp-result{text-align:center;place-items:center;gap:22px;max-width:720px;display:grid}.cp-challenge-start>b{font-size:28px}.cp-challenge-start p,.cp-result p{color:#756a62;font-size:19px;line-height:1.6}.cp-challenge-start>button,.cp-result>button{color:#fff;background:var(--ink);border:0;border-radius:18px;min-height:64px;padding:15px 26px;font-weight:900;box-shadow:0 6px #0f252b}.cp-challenge-question{place-items:center;gap:24px;width:min(820px,100%);display:grid}.cp-progress{border-bottom:1px dashed var(--line);justify-content:space-between;width:100%;padding-bottom:16px;display:flex}.cp-progress b{font-size:28px}.cp-guide{background:#f1e5ce;border-radius:999px;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;padding:13px 20px;display:flex}.cp-guide span{align-items:center;gap:7px;font-weight:900;display:flex}.cp-guide span b{color:#fff;background:var(--coral);border-radius:9px;place-items:center;width:28px;height:28px;display:grid}.cp-guide i{color:#9e8b71;font-style:normal}.cp-big-play{color:#fff;background:var(--green);border:0;border-radius:22px;min-width:260px;min-height:76px;padding:17px 26px;font-size:20px;font-weight:950;box-shadow:0 7px #1b5f4e}.cp-vowel-options{grid-template-columns:repeat(5,90px);gap:12px;display:grid}.cp-vowel-options button{border:3px solid var(--line);background:#fff;border-radius:22px;height:96px;font-size:42px;font-weight:950}.cp-result>span{color:#b84a43;letter-spacing:.1em;font-weight:950}.cp-result>strong{font-size:72px;line-height:1}.cp-result>div{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.cp-result>div button{border:2px solid var(--green);background:#e0f1eb;border-radius:999px;padding:9px 14px;font-weight:900}.cp-stage-grid{grid-template-columns:repeat(2,1fr);gap:18px;display:grid}.cp-stage-grid a{border:2px solid var(--line);min-height:250px;color:var(--ink);background:#fff;border-radius:26px;gap:9px;padding:28px;text-decoration:none;display:grid;box-shadow:0 7px #ead8b8}.cp-stage-grid a>span{color:#fff;background:var(--coral);border-radius:16px;place-items:center;width:50px;height:50px;font-size:24px;font-weight:950;display:grid}.cp-stage-grid a>small{color:#8a7c72;font-weight:800}.cp-stage-grid a>b{font-size:28px}.cp-stage-grid a>p{color:#766a61;font-size:18px}.cp-stage-grid a>i{color:var(--green);align-self:end;font-style:normal;font-weight:950}.cp-stage-grid a:hover{border-color:var(--green)}.cp-footer{color:#796d64;justify-content:space-between;gap:20px;padding:10px 0 46px;display:flex}@media (width<=960px){.cp-header{align-items:flex-start;position:static}.cp-header nav{display:none}.cp-hero{grid-template-columns:1fr;padding-top:52px}.cp-heading{grid-template-columns:1fr;gap:10px}.cp-group-grid{grid-template-columns:repeat(2,1fr)}.cp-lesson-layout{grid-template-columns:1fr}.cp-lesson-layout>nav{grid-template-columns:repeat(4,1fr)}.cp-lesson-layout>nav button{grid-template-columns:34px 1fr;min-height:100px}.cp-lesson-layout>nav button>i{display:none}.cp-vowel-detail{grid-template-columns:190px 1fr}.cp-vowel-detail>section>div{grid-template-columns:repeat(2,1fr)}}@media (width<=680px){.cp-hero,.cp-panel,.cp-lesson,.cp-challenge,.cp-footer{width:min(100% - 28px,1280px)}.cp-header{padding:13px 16px}.cp-brand>span{width:48px;height:48px}.cp-brand>span b{font-size:27px}.cp-brand strong{font-size:16px}.cp-brand small{font-size:11px}.cp-hero{padding:42px 0}.cp-hero h1{font-size:40px}.cp-hero p{font-size:17px}.cp-panel,.cp-lesson,.cp-challenge{border-radius:28px;padding:24px 18px}.cp-heading h2,.cp-lesson-title h2{font-size:31px}.cp-group-grid{grid-template-columns:1fr}.cp-group-grid>button{min-height:145px}.cp-letter-tabs{gap:8px}.cp-letter-tabs button{border-radius:16px;width:60px;height:66px}.cp-lesson-layout>nav{grid-template-columns:repeat(2,1fr)}.cp-lesson-layout>nav button{min-height:88px}.cp-lesson-layout>nav button>div small{display:none}.cp-step-card{min-height:560px;padding:22px 14px 64px}.cp-step-meta{align-items:center}.cp-step-meta b{font-size:14px}.cp-step-meta span{font-size:12px}.cp-letter-pair{grid-template-columns:repeat(2,108px)}.cp-letter-pair b{height:128px;font-size:78px}.cp-letter-options{grid-template-columns:repeat(3,1fr)}.cp-feedback{display:grid}.cp-feedback>span{min-width:0}.cp-blend-board{padding:28px 14px}.cp-blend-visual{gap:8px}.cp-blend-visual>span{width:100%;font-size:68px}.cp-blend-letters b{min-width:70px;padding-inline:5px;font-size:58px}.cp-blend-visual>i{font-size:30px}.cp-blend-visual>strong{font-size:54px}.cp-blend-board>button{width:100%;min-width:0}.cp-vowel-tabs{grid-template-columns:repeat(5,1fr);gap:5px}.cp-vowel-tabs button{border-radius:14px;min-height:100px;padding:8px 3px}.cp-vowel-tabs b{font-size:32px}.cp-vowel-tabs span{font-size:14px}.cp-vowel-tabs small{font-size:10px}.cp-vowel-detail{grid-template-columns:1fr;padding:16px}.cp-vowel-detail>div{min-height:190px}.cp-vowel-detail>div b{font-size:92px}.cp-vowel-detail>section>div{grid-template-columns:1fr}.cp-challenge-card{min-height:500px;padding:26px 14px}.cp-guide{border-radius:20px;gap:6px;padding:10px}.cp-guide span{font-size:13px}.cp-vowel-options{grid-template-columns:repeat(5,1fr);gap:6px;width:100%}.cp-vowel-options button{border-radius:15px;height:72px;font-size:32px}.cp-stage-grid{grid-template-columns:1fr}.cp-stage-grid a{min-height:225px}.cp-footer{font-size:13px;display:grid}}