@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;900&display=swap');
:root{--ink:#233e37;--green:#24634f;--lime:#d8ee89;--paper:#f6f5ef;--muted:#718078}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px 'Noto Sans TC',system-ui,sans-serif}aside{position:fixed;width:228px;height:100vh;border-right:1px solid #dce1d7;padding:35px 25px;background:#fbfcf7}.brand{font:bold 70px Georgia;color:var(--green);text-decoration:none;line-height:.7}.brand span{color:#df8460}.brand small{display:block;font:700 19px Georgia;line-height:1.1;margin:15px 0 45px}nav{display:grid;gap:12px}button{font:inherit;border:0;cursor:pointer;border-radius:12px;padding:13px 18px;background:#e9eee4;color:var(--ink);font-weight:600}button:hover{filter:brightness(.96)}button:disabled{opacity:.45;cursor:default}nav button{text-align:left;background:transparent}nav button.active{background:#e3edda;color:var(--green)}.aside-bottom{position:absolute;bottom:30px;font-size:10px;letter-spacing:1px;color:var(--muted);line-height:2}main{margin-left:228px;padding:0 48px 60px;max-width:1550px}header{height:88px;border-bottom:1px solid #dce1d7;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:1.4px}header b{color:var(--green)}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--green);font-weight:700;margin:35px 0 10px}h1{font-size:38px;letter-spacing:-1.5px;margin:5px 0 15px;line-height:1.35}h2{font-size:23px;margin:0 0 12px}p{line-height:1.9;color:#64766d}.hero{display:grid;grid-template-columns:1.3fr 1fr;background:#e5ecd9;border-radius:24px;padding:32px 38px;margin-top:26px;overflow:hidden;min-height:235px}.hero p{max-width:420px}.art{align-self:end;text-align:center;font-size:75px;position:relative}.art:before{content:'BRUXELLES';display:block;font:14px Georgia;letter-spacing:6px;margin-bottom:15px}.art:after{content:'☁　　☀　　☁';position:absolute;top:-35px;left:10%;font-size:28px;color:#73927a}.primary{background:var(--green);color:white;box-shadow:0 4px 0 #164634}.secondary{background:white;border:1px solid #d4dfd0}.layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:28px;margin-top:30px}.card{background:#fff;border:1px solid #e0e4d9;border-radius:20px;padding:25px;margin-bottom:18px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.tag{font-size:10px;letter-spacing:1px;color:var(--green);background:#eaf1df;padding:6px 10px;border-radius:6px}.lesson{display:flex;align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid #edf0e7}.lesson:last-child{border:0}.orb{border-radius:18px;background:var(--lime);padding:18px;font-size:26px}.lesson p{margin:6px 0;font-size:12px}.track{height:8px;background:#e6ecdf;border-radius:9px;overflow:hidden;margin:16px 0}.track>div{height:100%;background:#91b75b}.tiny{font-size:12px;color:var(--muted);line-height:1.8}.week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:15px}.day{border-radius:8px;padding:8px 0;text-align:center;background:#eff2e9;font-size:10px}.day.ready{background:var(--lime);cursor:pointer}.training{max-width:810px;margin:32px auto}.phrase{font:42px Georgia;margin:24px 0 10px;color:var(--green)}.ipa{font:20px Georgia;color:#6b7e72}.feedback{min-height:55px;padding:14px;margin:15px 0;border-radius:12px;background:#f0f3e9;line-height:1.7}.feedback.error{background:#fff0e8;color:#9d4b2e}input,textarea,select{font:inherit;color:var(--ink);background:#fcfdf9;border:1px solid #cbd7c7;border-radius:12px;padding:15px;width:100%;margin:10px 0}textarea{min-height:100px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0}.timer{font:700 32px system-ui;color:#bc633e}.stat{font:bold 35px Georgia;color:var(--green)}details{margin:15px 0;line-height:1.9}summary{cursor:pointer;font-weight:700}.step{font-size:11px;color:var(--muted);letter-spacing:1px}a{color:var(--green)}:focus-visible{outline:3px solid #dc8e62;outline-offset:3px}@media(max-width:1000px){aside{width:180px;padding:25px 15px}main{margin-left:180px;padding:0 24px}.layout{grid-template-columns:1fr}.hero{padding:25px}.art{font-size:55px}}@media(max-width:650px){aside{position:static;width:100%;height:auto;padding:15px}.brand{font:700 23px Georgia}.brand br,.brand small,.aside-bottom{display:none}nav{display:flex;gap:2px;margin-top:15px}nav button{font-size:12px;padding:10px}main{margin:0;padding:0 16px 35px}header{height:60px;font-size:9px}h1{font-size:29px}.hero{grid-template-columns:1fr}.art{display:none}.phrase{font-size:31px}.card{padding:20px}}