.tp-hero{padding-bottom:40px}.tp-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.tp-badge{display:inline-block;padding:5px 14px;border-radius:999px;background:var(--primary-light);color:var(--primary);font-size:.88rem;font-weight:700}.player-wrap{display:flex;flex-direction:column;gap:28px}.player-block{display:flex;flex-direction:column;gap:12px}.player-label{margin:0;font-weight:700;font-size:.95rem}.syllable-btns{display:flex;flex-wrap:wrap;gap:8px}.syllable-btn{padding:8px 20px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:all .15s;font-family:monospace}.syllable-btn:hover{border-color:var(--primary);color:var(--primary)}.syllable-btn.is-active{background:var(--primary);color:#fff;border-color:var(--primary)}.tone-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.tone-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 14px;border:2px solid var(--line);border-radius:18px;background:#fff;text-align:center;transition:border-color .2s,background .2s,transform .15s}.tone-card.is-playing{border-color:var(--primary);background:var(--primary-light);transform:translateY(-3px)}.tone-card-top{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}.tone-num{margin:0;font-size:.82rem;font-weight:700;color:var(--primary)}.tone-curve{width:64px;height:38px;color:var(--primary)}.tone-pinyin{margin:0;font-size:1.5rem;font-weight:700;color:#111827;font-family:serif}.tone-desc{margin:0;font-size:.78rem;color:var(--muted);line-height:1.4}.tone-play-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border:1.5px solid var(--primary);border-radius:999px;background:#fff;color:var(--primary);font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;transition:background .15s,color .15s;margin-top:4px}.tone-play-btn:hover{background:var(--primary);color:#fff}.play-icon{font-size:.75rem}.play-all-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.play-all-note{margin:0;font-size:.85rem;color:var(--muted)}.quiz-start-card{max-width:480px;margin:0 auto;padding:48px 32px;border:2px solid var(--line);border-radius:24px;background:#fff;text-align:center;box-shadow:0 8px 24px #0f172a0f}.quiz-start-icon{margin:0 0 12px;font-size:2.5rem}.quiz-start-title{margin:0 0 10px;font-size:1.2rem;font-weight:700}.quiz-start-desc{margin:0 0 24px;color:var(--muted);line-height:1.7}.quiz-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}.quiz-header-left{flex:1;display:flex;flex-direction:column;gap:6px;min-width:160px}.quiz-progress-text{margin:0;font-size:.9rem;font-weight:700;color:var(--muted)}.quiz-progress-bar{height:6px;background:var(--line);border-radius:999px;overflow:hidden}.quiz-progress-fill{height:100%;background:var(--primary);border-radius:999px;transition:width .4s ease}.quiz-score-text{margin:0;font-weight:700;color:var(--primary);white-space:nowrap}.quiz-question-card{padding:40px 24px;border:2px solid var(--line);border-radius:24px;background:#fff;text-align:center;margin-bottom:20px;box-shadow:0 8px 24px #0f172a0f;transition:border-color .25s,background .25s}.quiz-question-card.is-correct{border-color:#6ee7b7;background:#f0fdf8}.quiz-question-card.is-wrong{border-color:#fca5a5;background:#fff5f5}.quiz-question-label{margin:0 0 24px;font-size:.9rem;font-weight:700;color:var(--primary);letter-spacing:.04em}.quiz-play-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:20px}.quiz-play-btn{width:80px;height:80px;border:3px solid var(--primary);border-radius:50%;background:var(--primary-light);color:var(--primary);font-size:1.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,transform .1s}.quiz-play-btn:hover{background:var(--primary);color:#fff;transform:scale(1.05)}.quiz-play-btn.is-playing{background:var(--primary);color:#fff;animation:pulse .8s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.quiz-play-hint{margin:0;font-size:.82rem;color:var(--muted)}.quiz-syllable-hint{margin:0;font-size:.9rem;color:var(--muted);font-weight:600}.quiz-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}.quiz-choice-btn{padding:18px 12px;border:2px solid var(--line);border-radius:16px;background:#fff;font:inherit;font-size:1rem;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .15s}.quiz-choice-btn:hover:not(:disabled){border-color:var(--primary);background:var(--primary-light);transform:translateY(-2px)}.quiz-choice-btn.is-correct{background:#d1fae5;border-color:#6ee7b7;color:#065f46}.quiz-choice-btn.is-wrong{background:#fee2e2;border-color:#fca5a5;color:#991b1b}.quiz-choice-btn:disabled{cursor:default}.choice-sub{font-size:.78rem;font-weight:400;color:var(--muted)}.quiz-choice-btn.is-correct .choice-sub,.quiz-choice-btn.is-wrong .choice-sub{color:inherit;opacity:.8}.quiz-feedback{padding:20px;border:1.5px solid var(--line);border-radius:16px;background:#f8fafc;margin-bottom:16px}.feedback-inner{margin-bottom:16px;display:flex;flex-direction:column;gap:6px}.feedback-result{margin:0;font-size:1.1rem;font-weight:700}.feedback-result.is-correct{color:#065f46}.feedback-result.is-wrong{color:#991b1b}.feedback-correct{margin:0;font-weight:600;color:var(--text)}.feedback-tip{margin:0;color:var(--muted);font-size:.9rem}.feedback-actions{display:flex;gap:12px;flex-wrap:wrap}.feedback-btn{padding:10px 20px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;transition:background .15s}.feedback-btn:hover{background:#f1f5f9}.quiz-result-card{max-width:480px;margin:0 auto 32px;padding:48px 32px;border:2px solid var(--line);border-radius:24px;background:#fff;text-align:center;box-shadow:0 8px 24px #0f172a0f}.result-emoji{margin:0 0 12px;font-size:3rem}.result-score{margin:0 0 8px;font-size:2rem;font-weight:700;color:#111827}.result-msg{margin:0 0 28px;color:var(--muted);font-size:1rem;font-weight:600}.result-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.mistakes-title{margin:0 0 16px;font-size:1.1rem}.mistakes-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.mistake-item{padding:14px;border:1.5px solid #fca5a5;border-radius:12px;background:#fff5f5}.mistake-syllable{margin:0 0 4px;font-size:1.1rem;font-weight:700;font-family:monospace}.mistake-correct{margin:0 0 2px;font-size:.88rem;font-weight:700;color:#065f46}.mistake-chosen{margin:0;font-size:.85rem;color:#991b1b}.no-mistakes{text-align:center;color:var(--muted);padding:16px 0}.sound-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}.sound-card{padding:22px;border:1.5px solid var(--line);border-radius:18px;background:#fff;display:flex;flex-direction:column;gap:12px}.sound-title{margin:0;font-size:1.1rem;font-weight:700;color:var(--primary)}.sound-desc{margin:0;font-size:.9rem;color:var(--muted);line-height:1.7}.sound-play-row{display:flex;gap:8px;flex-wrap:wrap}.sound-play-btn{padding:8px 16px;border:1.5px solid var(--primary);border-radius:999px;background:var(--primary-light);color:var(--primary);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;transition:background .15s,color .15s;font-family:monospace}.sound-play-btn:hover,.sound-play-btn.is-playing{background:var(--primary);color:#fff}.sound-example{margin:0;font-size:.85rem;color:var(--muted)}.tp-link-card{display:flex;flex-direction:column;gap:6px}.tp-link-icon{margin:0;font-size:1.5rem}.tp-link-card h3{margin:0;font-size:1rem;font-weight:700}.tp-link-card p{margin:0;font-size:.88rem;color:var(--muted)}@media(max-width:767px){.tone-cards{grid-template-columns:repeat(2,1fr)}.quiz-choices{grid-template-columns:1fr}.quiz-start-card,.quiz-result-card{padding:32px 20px}.quiz-question-card{padding:28px 16px}}.quiz-mode-select{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 0 24px}.quiz-mode-option{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:.92rem;font-weight:700;cursor:pointer}.quiz-mode-option input{margin:0}