*{box-sizing:border-box}body{margin:0;background:#fff;color:#111;font-family:'PingFang TC','Microsoft JhengHei',sans-serif}[hidden]{display:none!important}main{max-width:750px;margin:auto;padding:14px 24px}header,.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px}header h1{font-size:22px;margin:4px 0 12px}button{font:inherit;cursor:pointer;background:white;color:#111;border:1px solid #bbb;border-radius:5px;min-height:44px;padding:8px 18px}button:focus-visible{outline:3px solid #555;outline-offset:3px}button:disabled{color:#aaa;cursor:default}header button{font-size:12px;padding:5px 12px}.toolbar{font-size:14px;margin:0 0 12px}.toolbar button{font-size:12px}.question{position:relative;border:1.7px solid #555;border-radius:15px;padding:12px 30px 20px;max-width:560px;margin:auto}.number{position:absolute;top:15px;left:18px;font-size:24px}.picture-wrap{height:125px;display:flex;align-items:center;justify-content:center;margin:0 0 15px}.picture-wrap img{max-height:125px;max-width:180px}.choices{display:flex;justify-content:center;position:relative;max-width:360px;margin:4px auto}.choices:after{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:#222}.choice{position:relative;width:50%;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;min-height:126px;padding:10px 20px;background:transparent}.choice .key{display:none}.syllable{position:relative;display:flex;flex-direction:column;align-items:center;font-family:'Arial Unicode MS','PingFang TC','Microsoft JhengHei',sans-serif;font-size:43px;line-height:1.08}.tone{position:absolute;right:-25px;bottom:1px;font-size:30px;transform:scale(2);transform-origin:left center}.shared{display:flex;justify-content:center;gap:17px;margin:14px auto 5px}.shared:empty{display:none}.shared .syllable{font-size:36px}.shared .tone{font-size:26px;right:-23px}.choice.correct:after{content:'';position:absolute;border:3px solid #222;width:97px;height:calc(100% - 8px);border-radius:50%;transform:rotate(-6deg)}.choice .mark{position:absolute;right:13px;top:8px;font-size:20px}.choice.wrong{outline:1px dashed #999;outline-offset:-8px}.choice:hover:not(:disabled){background:#fafafa}#feedback{text-align:center;font-size:14px;line-height:1.6;min-height:24px;margin:12px 0}.controls{display:flex;justify-content:center;gap:12px}.hint{text-align:center;color:#777;font-size:12px;margin:12px 0}#finish{text-align:center;border:1px solid #777;border-radius:15px;padding:50px 20px;margin:35px auto}#finish h2{font-size:30px}@media(min-width:800px) and (max-height:650px){main{padding-top:7px}header h1{font-size:19px;margin-bottom:6px}.toolbar{margin-bottom:8px}.question{padding:8px 30px 12px}.picture-wrap{height:76px;margin-bottom:7px}.picture-wrap img{max-height:76px;max-width:140px}.syllable{font-size:33px}.shared{margin:8px auto 3px}.shared .syllable{font-size:28px}.shared .tone{font-size:23px}.choice{min-height:96px;padding:8px}.tone{font-size:26px;right:-22px}.choices{max-width:310px;margin:2px auto}.number{font-size:21px;top:12px}#feedback{margin:7px 0;font-size:13px}.controls button{min-height:42px;padding:7px 14px}.hint{margin:8px 0}}@media(max-width:600px){main{padding:12px 16px}.question{padding:12px 15px 18px}.picture-wrap{height:105px}.picture-wrap img{max-height:105px}.choices{max-width:285px}.syllable{font-size:38px}.shared .syllable{font-size:31px}.choice{min-height:117px}.number{font-size:19px}.hint{font-size:10px}}