:root{--ink:#203f38;--muted:#5d7068;--green:#176e58;--cream:#fcfaf2;--line:#dbe4d9;--gold:#f5be4f}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.65 'PingFang HK','Noto Sans TC','Microsoft JhengHei',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;min-height:48px;border:0;transition:background .18s,transform .18s}button:hover{filter:brightness(.96)}button:active{transform:translateY(2px)}button:disabled{cursor:default;opacity:.65}button:focus-visible,a:focus-visible{outline:3px solid #b36a0b;outline-offset:4px}header{max-width:1160px;margin:auto;display:flex;align-items:center;gap:24px;padding:25px 28px;border-bottom:1px solid var(--line)}#brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:850;font-size:22px;text-decoration:none}.brand-mark{display:grid;place-items:center;background:var(--green);color:white;border-radius:13px;width:42px;height:42px;transform:rotate(-8deg)}.unit{font-size:14px;color:var(--muted)}.quiet{background:transparent;color:var(--green);padding:8px 16px;border:1px solid var(--line);border-radius:30px}header .quiet{margin-left:auto}main{max-width:1104px;margin:32px auto;padding:0 20px}.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;background:#e5eee0;border-radius:32px;padding:44px 48px;min-height:330px}.eyebrow{font-size:14px;letter-spacing:2px;font-weight:750;color:var(--green)}h1{font-size:clamp(32px,4vw,48px);line-height:1.3;letter-spacing:1px;margin:14px 0}p{color:var(--muted);margin:12px 0 24px}.primary{background:var(--green);color:#fff;padding:14px 28px;border-radius:16px;font-weight:750;box-shadow:0 4px 0 #104d3e}.hero svg{width:100%;max-height:280px}.tag{font-size:13px;margin-left:14px;color:var(--muted)}.stats{display:flex;gap:28px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 26px;margin:22px 0 34px}.stats strong{color:var(--green);font-size:24px;margin-right:8px}.stats span{font-size:15px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}h2{font-size:25px;margin:0}.sub{font-size:14px;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.topic{text-align:left;padding:24px 20px;background:white;border:1px solid var(--line);border-radius:22px;box-shadow:0 5px 0 #e8eadd;color:var(--ink)}.topic .symbol{background:var(--tint);border-radius:17px;width:64px;height:64px;display:grid;place-items:center;margin-bottom:22px}.symbol svg{width:32px;height:32px}.topic b{font-size:20px;display:block}.topic small{display:block;font-size:13px;color:var(--muted);margin:5px 0 22px}.topic .go{display:flex;justify-content:space-between;font-size:14px;color:var(--green);font-weight:750}.review{margin-top:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;background:#f8edcf;border-radius:20px;padding:20px 26px}.review p{margin:4px 0 0;font-size:14px}footer{text-align:center;font-size:14px;color:var(--muted);padding:28px 20px}footer small{font-size:12px}.quiz{max-width:780px;margin:auto}.quiztop{display:flex;align-items:center;justify-content:space-between;gap:16px}.bar{height:10px;background:#e4e8db;border-radius:10px;margin:24px 0}.bar div{background:var(--green);height:100%;border-radius:10px}.question-card{background:white;border:1px solid var(--line);border-radius:28px;padding:36px}.qmeta{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:14px}.question-card h1{font-size:29px;margin:24px 0}.options{display:grid;gap:12px}.option{text-align:left;display:flex;align-items:center;gap:14px;border:2px solid var(--line);background:white;border-radius:16px;padding:17px 20px;font-size:21px;color:var(--ink)}.letter{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;background:#f0f3ed;border-radius:10px;font-size:15px}.option.selected{border-color:var(--green);background:#eef7ee}.option.correct{border-color:var(--green);background:#e5f3e9}.option.wrong{border-color:#a15c34;background:#fff0e4}.option:disabled{opacity:1}.feedback{border-radius:16px;background:#e9f4e8;padding:20px;margin-top:20px}.feedback.try{background:#fff0df}.feedback p{margin:6px 0 0;color:var(--ink)}.actions{display:flex;justify-content:flex-end;margin-top:24px;gap:12px}.hint{font-size:14px;color:var(--muted)}.result{text-align:center;background:white;padding:42px;border:1px solid var(--line);border-radius:28px;max-width:780px;margin:auto}.score{font-size:64px;font-weight:850;color:var(--green)}.result .actions{justify-content:center;flex-wrap:wrap}.stamp{font-size:15px;color:#775416;background:#ffedb7;display:inline-block;padding:8px 18px;border-radius:30px}.results-list{text-align:left;margin-top:25px}.results-list details{border-top:1px solid var(--line);padding:15px 0}.results-list p{font-size:16px}dialog{max-width:560px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:24px;padding:30px;color:var(--ink)}dialog::backdrop{background:#153e3588}#voiceStatus{font-size:13px;color:#855010}.empty{text-align:center;padding:60px 25px}.topic:hover{transform:translateY(-3px)}@media(max-width:760px){header{padding:16px;gap:8px}.unit{display:none}#brand{font-size:18px}header .quiet{font-size:13px;padding:6px 12px}main{margin-top:20px}.hero{padding:28px;grid-template-columns:1fr}.hero svg{max-height:200px;order:-1}.hero h1{font-size:34px}.grid{grid-template-columns:repeat(2,1fr)}.stats{gap:16px;padding:15px;justify-content:space-around}.stats span{font-size:12px}.stats strong{display:block;font-size:24px}.topic{padding:19px 15px}.topic b{font-size:18px}.review{padding:20px;align-items:flex-start}.review .quiet{white-space:nowrap}.question-card{padding:23px}.question-card h1{font-size:25px}.option{font-size:19px;padding:15px}.tag{display:block;margin:12px 0 0}.section-head{align-items:flex-start}.section-head .sub{max-width:130px;text-align:right}.quiztop{font-size:14px}.result{padding:28px 20px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.settings{background:white;border:1px solid var(--line);border-radius:24px;padding:24px;margin-top:24px}.settings h2{font-size:22px;margin-bottom:16px}.level-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.level-buttons button{border-radius:16px;text-align:left;padding:14px}.level-buttons small{display:block;color:var(--muted);font-size:13px;line-height:1.6}.active{background:#e4f1df!important;border-color:var(--green)!important}.settings select{font:inherit;color:var(--ink);border:1px solid #8ca99b;border-radius:10px;padding:10px;min-height:48px;margin-left:12px;max-width:100%}.scene{display:block;width:100%;max-width:420px;margin:0 auto 24px}.matching{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:48px}.match-col{display:grid;gap:15px}.match-item{position:relative;z-index:1;background:white;border:2px solid var(--line);border-radius:13px;padding:14px 10px;color:var(--ink);font-size:18px;min-height:80px;text-align:left}.match-item b{font-size:14px;color:var(--green)}.match-item.paired{border-color:#64947b;background:#f0f6eb}.match-item:disabled{opacity:1}.matching svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.settings .hint{margin-bottom:0}@media(max-width:520px){.settings{padding:18px}.level-buttons{gap:6px}.level-buttons button{padding:10px 8px}.level-buttons small{font-size:12px}.matching{gap:28px}.match-item{font-size:16px;padding:10px 7px;min-height:90px}.settings select{margin:10px 0;display:block;width:100%}}
#writtenAnswer{display:block;width:100%;min-height:60px;border:2px solid #779d89;border-radius:14px;background:#fff;color:var(--ink);font:24px/1.5 'PingFang HK',sans-serif;padding:12px 16px;margin-top:10px}#writtenAnswer:focus-visible{outline:3px solid #b36a0b;outline-offset:3px}#writtenAnswer:disabled{opacity:1;background:#f1f5ee;-webkit-text-fill-color:var(--ink)}.word-bank{padding:16px;background:#f8f0d9;border-radius:16px;margin-bottom:16px}.word-bank p{margin:0 0 12px;color:var(--ink);font-size:15px}.word-bank button{margin:4px;background:white}

@media(max-width:760px){header{flex-wrap:wrap}.unit{display:block;order:3;width:100%;padding-left:52px;font-size:12px}}