:root{color-scheme:light;--bg: #f3f6fb;--card: #ffffff;--text: #1f2937;--muted: #6b7280;--primary: #2563eb;--primary-hover: #1d4ed8;--border: #dbe3f0;--shadow: 0 12px 30px rgba(37, 99, 235, .12);--focus-ring: #0f766e;--error: #dc2626;--success: #059669}html[data-appearance=forest]{--primary: #12805c;--primary-hover: #0f6b4d}html[data-appearance=space]{--primary: #0ea5e9}html[data-appearance=paper]{--primary: #b9482b}html[data-theme=dark]{color-scheme:dark;--bg: #0f172a;--card: #172033;--text: #e5edf8;--muted: #a9b8cc;--border: #334155;--shadow: 0 12px 30px rgba(0, 0, 0, .28)}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{color:var(--text);background:var(--bg);font-family:Inter,PingFang SC,Microsoft YaHei,sans-serif}:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.skip-link{position:fixed;top:8px;left:8px;z-index:200;padding:10px 14px;border-radius:8px;color:#fff;background:#111827}.skip-link:not(:focus){width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.topbar{min-height:70px;display:flex;align-items:center;gap:24px;padding:0 max(22px,calc((100% - 880px)/2));background:var(--card);border-bottom:1px solid var(--border)}.topbar div{display:flex;flex:1;flex-direction:column;min-width:0}.topbar a{color:var(--muted);text-decoration:none;font-weight:700}.topbar a:hover,.topbar a:focus-visible{color:var(--primary)}.topbar small{margin-top:3px;color:var(--muted)}.pinyin-main{display:grid;gap:18px;max-width:880px;margin:0 auto;padding:20px max(16px,calc((100% - 880px)/2)) 72px}.pinyin-main:focus{outline:none}.pinyin-panel{padding:20px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}.pinyin-panel[hidden]{display:none}.pinyin-kicker{color:var(--primary);font-size:.72rem;font-weight:800;letter-spacing:.14em}.pinyin-panel h1,.pinyin-panel h2{margin:8px 0 10px;font-size:1.6rem}.pinyin-lead,.pinyin-daily{margin:0 0 14px;color:var(--muted);line-height:1.6}.pinyin-setup{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:16px}.pinyin-setup label{display:grid;gap:6px;font-size:.85rem;font-weight:700}.pinyin-setup select{min-height:44px;min-width:132px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font:inherit}.pinyin-recommend-hint{margin:-6px 0 16px;color:var(--muted);font-size:.9rem;line-height:1.5}.btn{min-height:44px;padding:0 16px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font:inherit;font-weight:700;cursor:pointer}.btn.primary{border-color:var(--primary);background:var(--primary);color:#fff}.btn:disabled{opacity:.45;cursor:not-allowed}.pinyin-task-note{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--primary) 10%,var(--card));color:var(--text);font-weight:700}.pinyin-task-note[hidden]{display:none}.pinyin-task-note p{margin:0;flex:1;min-width:12rem}.pinyin-wrong{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}.pinyin-wrong h2{margin:0 0 8px;font-size:1.1rem}.pinyin-wrong ul{margin:0 0 12px;padding-left:20px;color:var(--muted)}.pinyin-recommend{margin:12px 0;color:var(--primary);font-weight:700}.pinyin-records{margin-top:8px}.pinyin-records summary{cursor:pointer;font-weight:700}.pinyin-records ol{margin:8px 0 0;padding-left:20px;color:var(--muted)}.pinyin-work-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:12px}.pinyin-work-head p{margin:0;color:var(--muted);font-weight:700}.pinyin-stem{margin:0 0 8px;color:var(--muted)}.pinyin-prompt{margin:0;font-size:4.2rem;line-height:1.1;font-weight:800;text-align:center}.pinyin-hint,.pinyin-blank{margin:8px 0 0;text-align:center;color:var(--muted)}.pinyin-blank{font-size:1.6rem;font-weight:800;color:var(--text);letter-spacing:.12em}.pinyin-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 12px;padding:0;border:0;min-width:0}.pinyin-choice{position:relative;display:grid;gap:2px;min-height:56px;min-width:0;padding:10px 12px 10px 28px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font:inherit;font-weight:800;cursor:pointer}.pinyin-choice-index{position:absolute;top:8px;left:8px;color:var(--muted);font-size:.72rem;font-weight:700}.pinyin-choice small{color:var(--muted);font-weight:600}.pinyin-choice.is-correct{border-color:var(--success);background:color-mix(in srgb,var(--success) 14%,var(--card))}.pinyin-choice.is-wrong{border-color:var(--error);background:color-mix(in srgb,var(--error) 12%,var(--card))}.pinyin-feedback{min-height:1.4em;margin:0 0 12px;font-weight:700}.pinyin-feedback.is-correct{color:var(--success)}.pinyin-feedback.is-wrong{color:var(--error)}.pinyin-actions{display:flex;flex-wrap:wrap;gap:10px}.pinyin-misses{color:var(--muted)}.pinyin-misses ul{margin:6px 0 0;padding-left:20px}.pinyin-footer{margin:0;color:var(--muted);font-size:.9rem}html[data-reduce-motion] .pinyin-choice{transition:none}@media(max-width:560px){.topbar{gap:12px;padding:10px 14px}.pinyin-main{padding:16px 14px 56px}.pinyin-panel{padding:16px}.pinyin-panel h1,.pinyin-panel h2{font-size:1.3rem}.pinyin-prompt{font-size:3.1rem}.pinyin-blank{font-size:1.3rem}.pinyin-choice{min-height:52px;padding:10px 12px}.pinyin-choice-index{display:none}}