@import "https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Serif+TC:wght@500;600;700;900&display=swap";:root{color:#173d35;font-synthesis:none;text-rendering:optimizelegibility;--ink:#153d34;--cream:#f5f0e6;--paper:#fbf8f0;--red:#ad3d2d;--gold:#c59542;--line:#c9c1af;--soft:#e9e1d1;background:#f5f0e6;font-family:Noto Sans TC,system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--cream);min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:3px;outline:3px solid #d48a62}button:disabled{cursor:not-allowed}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Noto Serif TC,serif}#root{min-height:100vh}.site-shell{flex-direction:column;min-height:100vh;display:flex}.site-header{border-bottom:1px solid var(--line);z-index:20;background:#f5f0e6f5;align-items:center;height:84px;padding:0 clamp(20px,5vw,72px);display:flex;position:relative}.brand{background:0 0;border:0;align-items:center;gap:12px;padding:0;display:flex}.brand span{letter-spacing:.16em;font:900 25px Noto Serif TC}.brand b{letter-spacing:.3em;border-left:1px solid;padding-left:12px;font-size:10px}.site-header nav{align-items:center;gap:clamp(12px,2.5vw,36px);height:100%;margin-left:auto;display:flex}.site-header nav>button{background:0 0;border:0;padding:10px 0;font-size:14px}.site-header nav>span{border-left:1px solid var(--line);height:22px}.site-header .member{font-weight:700}.member i{color:var(--red);margin-left:8px;font-style:normal}.menu-toggle{background:0 0;border:1px solid;padding:7px 12px;display:none}.primary{background:var(--ink);border:1px solid var(--ink);color:#fff;letter-spacing:.06em;padding:12px 22px;font-weight:700}.primary:hover{background:#22594c}.primary.large{padding:16px 25px}.primary.full{width:100%}.quiet,.link,.text-button{text-underline-offset:5px;background:0 0;border:0;text-decoration:underline}.kicker,.eyebrow{letter-spacing:.18em;text-transform:uppercase;font-size:11px;font-weight:700}.kicker span{border-top:2px solid var(--red);vertical-align:middle;width:28px;margin-right:10px;display:inline-block}.page{flex:1;width:min(1180px,100%);margin:0 auto;padding:clamp(42px,7vw,90px) clamp(20px,5vw,72px)}.page-head{max-width:720px;margin-bottom:48px}.page-head h1,.about-page h1{margin:20px 0;font-size:clamp(42px,7vw,76px);line-height:1.16}.page-head>p:last-child{color:#48645d;line-height:1.8}.page-head.compact h1{font-size:clamp(38px,5vw,58px)}.hero-page{border-bottom:1px solid var(--line);grid-template-columns:1.12fr .88fr;min-height:680px;display:grid}.hero-copy{padding:clamp(72px,10vw,135px) clamp(24px,6vw,90px)}.hero-copy h1{margin:30px 0;font-size:clamp(44px,6vw,82px);line-height:1.17}.hero-copy h1 em{color:var(--red);font-style:normal}.lead{max-width:620px;font-family:Noto Serif TC;font-size:clamp(17px,2vw,22px);line-height:1.85}.hero-actions{align-items:center;gap:28px;margin-top:42px;display:flex}.fineprint{letter-spacing:.08em;color:#62756f;margin-top:22px;font-size:11px}.editorial-art{border-left:1px solid var(--line);background:#dce2cf;min-height:600px;position:relative;overflow:hidden}.editorial-art:before{content:"";border:1px solid #95aa95;border-radius:50%;width:440px;height:440px;position:absolute;top:9%;left:15%}.sun{background:#d6764e;border-radius:50%;width:105px;height:105px;position:absolute;top:13%;right:12%}.book{background:#fbf6e8;border:2px solid;width:210px;height:170px;padding:25px;position:absolute;top:25%;left:16%;transform:rotate(-6deg);box-shadow:8px 9px #839b86}.book span{color:var(--red);font:900 75px Georgia;display:block}.book i{font:italic 20px Georgia}.step{background:var(--ink);color:#fff;letter-spacing:.2em;align-items:center;height:85px;padding-left:24px;font-family:Noto Serif TC;display:flex;position:absolute}.s1{width:45%;bottom:0;left:0}.s2{background:#38695c;width:56%;bottom:85px;left:23%}.s3{background:#74927b;width:50%;bottom:170px;left:50%}.seal{background:var(--red);color:#fff;width:66px;height:66px;box-shadow:0 0 0 4px #dce2cf,0 0 0 5px var(--red);border-radius:50%;place-items:center;font:700 17px/1.1 Noto Serif TC;display:grid;position:absolute;bottom:10%;right:9%}.manifesto{border-bottom:1px solid var(--line);grid-template-columns:.5fr 1.3fr 1fr;gap:45px;padding:90px clamp(24px,6vw,90px);display:grid}.manifesto h2{font-size:clamp(30px,4vw,49px);line-height:1.45}.manifesto-copy{line-height:1.9}.section-no{letter-spacing:.16em;font-size:10px}.tool-lines{padding:0 clamp(24px,6vw,90px)}.tool-lines button{text-align:left;border:0;border-bottom:1px solid var(--line);background:0 0;grid-template-columns:80px 1fr 50px;align-items:center;width:100%;padding:35px 10px;display:grid}.tool-lines b{color:var(--red);font:italic 24px Georgia}.tool-lines span{align-items:baseline;gap:25px;display:flex}.tool-lines strong{font:600 clamp(21px,3vw,32px) Noto Serif TC}.tool-lines small{color:#68766f}.tool-lines i{font-size:26px;font-style:normal}.child-bar{z-index:10;background:#e2e6d7;border-bottom:1px solid #aeb9a9;align-items:center;gap:30px;padding:15px clamp(20px,5vw,72px);display:flex;position:relative}.child-bar>div:first-child{flex-direction:column;display:flex}.child-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.chip{background:0 0;border:1px solid #9cad9f;border-radius:999px;padding:7px 14px}.chip.active{background:var(--ink);color:#fff}.inline-form{background:var(--paper);border:1px solid var(--line);align-items:end;gap:16px;padding:20px;display:flex;position:absolute;top:100%;left:clamp(20px,5vw,72px);right:clamp(20px,5vw,72px);box-shadow:0 12px 25px #173d3520}.inline-form label,.auth-form label{gap:7px;font-size:12px;font-weight:600;display:grid}.inline-form input,.inline-form select,.auth-form input{background:#fffdf7;border:1px solid #aaa391;padding:11px}.field-error,.form-message.error{color:#9b2d22}.state{text-align:center;border:1px solid var(--line);background:var(--paper);flex-direction:column;align-items:center;gap:12px;max-width:600px;margin:50px auto;padding:42px;display:flex}.spinner{border:3px solid var(--line);border-top-color:var(--red);border-radius:50%;width:25px;height:25px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.state.error{border-top:4px solid var(--red)}.phonics-layout{grid-template-columns:320px 1fr;gap:55px;display:grid}.letter-focus{background:var(--ink);color:#fff;min-height:470px;padding:35px;position:sticky;top:20px}.letter-pair{align-items:baseline;gap:20px;display:flex}.letter-pair strong{font:150px/1 Georgia}.letter-pair span{color:#bccac2;font:70px Georgia}.phoneme{color:#e6b56f;font:italic 31px Georgia}.cue{font:28px Noto Serif TC}.cue small{margin-top:8px;font:14px Noto Sans TC;display:block}.audio-locked{color:#fff;text-align:left;background:#294f46;border:1px solid #68847c;grid-template-columns:30px 1fr;padding:14px;display:grid;position:absolute;bottom:25px;left:25px;right:25px}.audio-locked span{grid-row:1/3}.audio-locked small{color:#bfcac6}.alphabet{grid-template-columns:repeat(5,1fr);gap:10px;display:grid}.alphabet button{aspect-ratio:1;border:1px solid var(--line);background:var(--paper);flex-direction:column;justify-content:center;align-items:center;display:flex}.alphabet button[aria-pressed=true]{border:2px solid var(--ink);background:#d3dbc9}.alphabet b{font:34px Georgia}.alphabet small{color:var(--red);font:17px Georgia}.notice,.parent-tip{border-top:1px solid var(--line);grid-template-columns:200px 1fr;margin-top:40px;padding:25px 0;line-height:1.8;display:grid}.auth-page{grid-template-columns:1fr 480px;min-height:700px;display:grid}.auth-note{background:#dfe3d4;padding:100px clamp(30px,7vw,120px)}.auth-note h1{margin-top:32px;font-size:clamp(42px,5vw,67px);line-height:1.4}.auth-note>p{line-height:1.9}.auth-note blockquote{border-top:1px solid #9eaa9b;margin:70px 0 0;padding-top:25px;font-family:Noto Serif TC}.auth-form{background:var(--paper);padding:70px clamp(30px,4vw,60px)}.tabs{border-bottom:1px solid var(--line);margin-bottom:45px;display:flex}.tabs button{background:0 0;border:0;padding:12px 25px}.tabs .active{border-bottom:3px solid var(--red);font-weight:700}.auth-form h2{font-size:32px}.auth-form form{gap:17px;display:grid}.auth-form input{width:100%;font-size:16px}.form-message{background:#f5e1da;margin:0;padding:10px}.form-message.success{background:#dcebdc}.centered{margin:20px auto;display:block}.auth-fine{color:#6e7773;border-top:1px solid var(--line);padding-top:18px;font-size:11px;line-height:1.7}.mode-tabs{border-bottom:1px solid var(--line);margin-bottom:40px;display:flex}.mode-tabs button{background:0 0;border:0;padding:14px 22px}.mode-tabs .active{background:var(--ink);color:#fff}.mode-tabs i{background:var(--red);color:#fff;border-radius:50%;padding:2px 6px;font-size:10px;font-style:normal}.flash-wrap{text-align:center}.flash-wrap>p{font-size:12px}.flashcard{background:var(--paper);border:1px solid var(--line);flex-direction:column;justify-content:center;align-items:center;width:min(570px,100%);min-height:340px;margin:20px auto 35px;display:flex;box-shadow:9px 10px #d9d0bd}.flashcard span{font:600 clamp(48px,8vw,83px) Georgia}.flashcard small{margin-top:25px}.flashcard.flipped{background:#e2e6d7}.flash-wrap .row{justify-content:center;gap:15px;display:flex}.flash-wrap .row>button:not(.primary){border:1px solid var(--line);background:0 0;padding:12px 22px}.quiz-card,.question-sheet,.intro-sheet{background:var(--paper);border:1px solid var(--line);max-width:760px;margin:auto;padding:clamp(25px,5vw,55px)}.quiz-card h2{margin:15px 0;font:600 clamp(48px,8vw,80px) Georgia}.example{color:#60716c;font-family:Georgia;font-style:italic}.progress{background:#d8d1c2;height:5px;margin-bottom:35px}.progress span{background:var(--red);height:100%;transition:width .2s;display:block}.options{grid-template-columns:1fr 1fr;gap:12px;margin-top:30px;display:grid}.options button{text-align:left;background:#fffdf7;border:1px solid #b8af9d;min-height:65px;padding:15px;font-weight:600}.options button:hover:not(:disabled){border-color:var(--ink);background:#e2e6d7}.feedback{justify-content:space-between;align-items:center;margin-top:20px;padding:18px;display:flex}.feedback.correct{background:#dce7d7}.feedback.wrong{background:#f1ddd4}.feedback button{background:0 0;border:0;text-decoration:underline}.disclaimer{background:#eee4d2;padding:8px 13px;font-size:12px;display:inline-block}.ability-intro{text-align:center}.ability-intro>h1,.result-page>h1{margin:20px 0;font-size:clamp(38px,6vw,68px)}.intro-sheet{text-align:left;margin-top:35px}.intro-sheet>div>span{font-size:12px}.intro-sheet>div>strong{margin:10px 0;font:600 30px Noto Serif TC;display:block}.intro-sheet fieldset{border:0;border-top:1px solid var(--line);margin:20px 0;padding:20px 0}.intro-sheet fieldset button{border:1px solid var(--line);background:0 0;width:90px;height:70px;margin-right:10px;font:700 23px Georgia}.intro-sheet fieldset .active{background:var(--ink);color:#fff}.intro-sheet fieldset small{margin-left:3px;font:11px Noto Sans TC}.ability-quiz>header{justify-content:space-between;display:flex}.question-sheet h2{margin-top:20px;font-size:clamp(24px,4vw,38px);line-height:1.5}.axis-tag{background:#dce3d4;padding:5px 11px;font-size:11px}.options.numbered{grid-template-columns:1fr}.options.numbered i{border:1px solid;place-items:center;width:30px;height:30px;margin-right:14px;font-style:normal;display:inline-grid}.result-page{text-align:center}.score-ring{border:15px solid #d9dfd1;border-radius:50%;justify-content:center;align-items:baseline;width:170px;height:170px;margin:35px auto;padding-top:45px;display:flex}.score-ring strong{font:60px Georgia}.axes{text-align:left;max-width:640px;margin:30px auto}.axes h2{border-bottom:1px solid var(--line);padding-bottom:12px}.axes>div{grid-template-columns:110px 1fr 70px;align-items:center;margin:15px 0;display:grid}.axes label{grid-column:1/-1;justify-content:space-between;display:flex}.axes i,.weak-list label i{background:#ded7c8;grid-column:1/3;height:8px;display:block}.axes i span,.weak-list label i span{background:#5f8176;height:100%;display:block}.axes small{text-align:right}.record-head{border-bottom:1px solid var(--line);justify-content:space-between;padding-bottom:30px;display:flex}.record-head h1{font-size:clamp(35px,5vw,60px)}.stars{text-align:right}.stars span,.stars small{font-size:11px;display:block}.stars strong{color:var(--red);margin:5px;font:42px Georgia;display:block}.records-grid{grid-template-columns:1.2fr .8fr;gap:50px;margin-top:45px;display:grid}.section-title{border-bottom:2px solid var(--ink);justify-content:space-between;align-items:center;display:flex}.section-title h2{margin-bottom:12px}.section-title span{font-size:11px}.attempt-list article{border-bottom:1px solid var(--line);grid-template-columns:80px 1fr auto;align-items:center;padding:18px 0;display:grid}.attempt-list time{font-size:12px}.attempt-list div{display:grid}.attempt-list small{color:#718079}.weak-list article{border-bottom:1px solid var(--line);padding:17px 0}.weak-list article>div{justify-content:space-between;display:flex}.weak-list label{grid-template-columns:1fr auto;gap:10px;margin-top:12px;display:grid}.weak-list label small{font-size:10px}.soft-empty{background:var(--paper);padding:25px}.learn-home h1{max-width:800px;font-size:clamp(38px,6vw,70px);line-height:1.35}.learn-tools{border:1px solid var(--line);grid-template-columns:repeat(3,1fr);margin-top:50px;display:grid}.learn-tools button{border:0;border-right:1px solid var(--line);background:var(--paper);text-align:left;flex-direction:column;min-height:330px;padding:35px;display:flex}.learn-tools button:last-child{border-right:0}.learn-tools button:hover{background:#e3e7d8}.learn-tools i{color:var(--red);font:italic 22px Georgia}.learn-tools b{letter-spacing:.2em;margin:25px 0 8px;font-size:10px}.learn-tools strong{font:600 27px Noto Serif TC}.learn-tools p{color:#61736d;line-height:1.7}.learn-tools span{margin-top:auto;font-weight:700}.about-page{grid-template-columns:1.2fr .8fr;gap:70px;display:grid}.about-page>div{padding-top:100px;font:18px/2 Noto Serif TC}footer{border-top:1px solid var(--line);grid-template-columns:1fr 1fr auto;align-items:center;margin-top:auto;padding:45px clamp(20px,5vw,72px);display:grid}footer p{margin:0;font-family:Noto Serif TC}footer small{color:#61736d;font-size:10px}