:root{font-family:Inter,system-ui,-apple-system,sans-serif;color:#172c48;background:#f5f7fb;font-size:16px;line-height:1.5;--blue:#164fba;--red:#c5363f}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #245ecc;outline-offset:4px}header{padding:24px max(24px,calc((100vw - 1160px)/2));display:flex;align-items:center;justify-content:space-between;background:white;border-bottom:1px solid #e0e6ee;gap:20px}.brand{text-decoration:none;color:#172c48;font-size:21px;font-weight:750;display:flex;gap:12px;align-items:center}.brand small{display:block;font-size:11px;letter-spacing:2.2px;font-weight:600;color:#64738a}.seal{display:grid;place-items:center;background:var(--red);color:white;width:45px;height:45px;border-radius:12px;font-size:30px;font-family:serif}main{max-width:1160px;margin:40px auto;padding:0 24px;min-height:70vh}h1{font-size:clamp(28px,4vw,40px);line-height:1.2;letter-spacing:-1px;margin:8px 0 16px}h2{font-size:23px;line-height:1.35;margin:0 0 16px}h3{font-size:18px;margin:0 0 6px}p{margin:0 0 16px}.muted{color:#596b83}.eyebrow{font-size:13px;letter-spacing:1.5px;font-weight:750;color:var(--red);text-transform:uppercase}.layout{display:grid;grid-template-columns:1fr 300px;gap:28px;margin-top:28px}.panel{background:white;border:1px solid #dfe5ef;border-radius:20px;padding:28px;box-shadow:0 4px 18px #233b6010}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.mode{background:white;border:1px solid #dbe2ec;text-align:left;border-radius:14px;padding:18px;min-height:100px;color:inherit}.mode.active{border:2px solid var(--blue);background:#f0f5ff;padding:17px}.mode small{display:block;font-size:14px;color:#596b83;margin-top:5px}.mode strong{font-size:17px}.num{font-size:36px;font-weight:750;line-height:1.2}.stat{padding:18px 0;border-bottom:1px solid #e6ebf3}.stat:last-child{border:0}.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}label{font-size:14px;font-weight:650;display:block}select{margin-top:8px;padding:12px;width:100%;border:1px solid #b4c2d4;border-radius:10px;background:white;color:inherit}.primary,.secondary,.quiet{border-radius:10px;padding:12px 20px;font-weight:650;border:0}.primary{background:var(--blue);color:white}.secondary{background:#eaf0fa;color:#174794}.quiet{background:transparent;color:#455a75;border:1px solid #dbe3ee;font-size:14px}.wide{width:100%}.note{font-size:14px;background:#f3f6fb;border-radius:10px;padding:14px;margin:16px 0;color:#51627a}.tags{display:flex;flex-wrap:wrap;gap:8px}.tag{font-size:13px;border-radius:30px;background:#eef2f8;padding:5px 10px}.quiz{max-width:820px;margin:auto}.topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}progress{width:100%;height:8px;appearance:none;border:0;display:block;margin:16px 0 28px}progress::-webkit-progress-bar{background:#e4eaf4;border-radius:8px}progress::-webkit-progress-value{background:var(--blue);border-radius:8px}progress::-moz-progress-bar{background:var(--blue)}.focus{text-align:center;padding:20px;background:#f6f8fc;border-radius:14px;margin:20px 0}.han{font-size:clamp(36px,8vw,54px);line-height:1.5;font-family:'Noto Sans SC','Microsoft YaHei',sans-serif}.pinyin{font-size:23px;color:#2453a1}.options{display:grid;gap:10px;margin:22px 0}.option{display:flex;align-items:center;gap:14px;text-align:left;background:white;border:1px solid #c9d4e3;border-radius:12px;padding:16px;color:inherit;min-height:60px}.letter{display:grid;place-items:center;background:#edf1f7;border-radius:8px;min-width:32px;height:32px;font-weight:700}.option.selected{border:2px solid var(--blue);padding:15px;background:#f0f5ff}.option.correct{border-color:#237753;background:#edf8f2}.option.wrong{border-color:#b8323e;background:#fff0f1}.option:disabled{opacity:1}.feedback{border-left:4px solid #237753;background:#edf8f2;padding:20px;border-radius:12px;margin:20px 0}.feedback.bad{border-color:#b8323e;background:#fff0f1}.example{margin:18px 0;padding:20px;background:white;border:1px solid #dce4ef;border-radius:12px}.example .han{font-size:30px}.example .pinyin{font-size:20px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.score{font-size:76px;color:var(--blue);font-weight:800;letter-spacing:-4px}.resultstats{display:flex;gap:36px;margin:24px 0}.empty{padding:24px;text-align:center}.danger{color:#a72836}.storage{font-size:14px;line-height:1.6;margin-top:22px}.storage button{margin-top:12px}.toast{color:#9b2430;font-size:14px;margin-top:12px}footer{max-width:1160px;margin:35px auto;padding:24px;display:flex;justify-content:space-between;gap:16px;color:#66788f;font-size:13px;border-top:1px solid #dce4ef}.skip{position:absolute;top:-80px;background:white;padding:12px;z-index:3}.skip:focus{top:0}dialog{border:1px solid #cbd5e5;border-radius:18px;padding:28px;max-width:450px;width:90%}dialog::backdrop{background:#172c4880}@media(max-width:780px){header{padding:16px;align-items:flex-start}.brand{font-size:17px}.brand small{font-size:10px;letter-spacing:1px}.seal{width:36px;height:36px;font-size:25px}header .quiet{font-size:12px;padding:7px;max-width:125px}main{margin:24px auto;padding:0 16px}.layout{grid-template-columns:1fr;gap:18px}.panel{padding:20px;border-radius:16px}.form{grid-template-columns:1fr}.mode{padding:13px}.mode.active{padding:12px}.mode small{font-size:13px}.mode-grid{gap:8px}footer{flex-direction:column;padding:16px}.score{font-size:64px}.option{padding:13px}.option.selected{padding:12px}.actions button{flex:1;min-width:140px}}

.learning{max-width:1160px;margin:0 auto 40px;padding:0 24px}.learning h3{margin-top:24px}.learning p,.learning li{max-width:850px}.sample-han{font-size:32px;line-height:1.5;margin-bottom:6px}.learning li{margin-bottom:10px}[hidden]{display:none!important}@media(max-width:780px){.learning{padding:0 16px}}