.toneTrainerPage{--tt-ink:var(--ink, #161937);--tt-soft:var(--muted, #585d80);--tt-indigo:var(--indigo, #4551b3);--tt-wash:var(--indigo-wash, #eceefb);--tt-rule:var(--rule, #e3e6f0);--tt-surface:var(--surface, #fff);--tt-sunken:var(--sunken, #eef0f7);--tt-right:#1f8a5b;--tt-right-wash:#e3f4ec;--tt-wrong:#c2453d;--tt-wrong-wash:#fbe9e7;--tt-han:var(--han, "Noto Serif SC", "Songti SC", "SimSun", serif)}body.toneTrainerPage .learning-wrp .learning-block #ttApp{margin:1.2em 0 2em;border:1px solid var(--tt-rule);border-radius:16px;background:var(--tt-sunken);overflow:hidden}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp p{margin:0 0 10px!important}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp button{font-family:inherit}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttTabs{display:flex;border-bottom:1px solid var(--tt-rule);background:var(--tt-surface)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttTab{flex:1;padding:14px 8px;border:0;border-bottom:3px solid transparent;background:0 0;color:var(--tt-soft);font-weight:600;cursor:pointer}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttTab[aria-selected=true]{border-bottom-color:var(--tt-indigo);color:var(--tt-indigo)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttPanel{padding:18px 22px 22px}@media (max-width:575.98px){body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttPanel{padding:14px}}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttHead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 18px;margin:0 0 14px}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttCompare,body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttLevels,body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttRecord,body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttVoices{display:flex;flex-wrap:wrap;align-items:center;gap:6px}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttCompare,body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttRecord{margin:10px 0}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttSmallLabel{margin-right:4px;font-size:.9rem;color:var(--tt-soft)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttChip{padding:5px 13px;border:1px solid var(--tt-rule);border-radius:999px;background:var(--tt-surface);color:var(--tt-ink);font-size:.9rem;cursor:pointer}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttChip:hover:not(:disabled){border-color:var(--tt-indigo);color:var(--tt-indigo)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttChip[aria-pressed=true]{border-color:var(--tt-indigo);background:var(--tt-indigo);color:#fff}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttChip:disabled{opacity:.6;cursor:default}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttPrompt{font-size:1.05rem;color:var(--tt-ink)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttProgress{font-size:.85rem;font-weight:600;letter-spacing:.02em;color:var(--tt-soft)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttNote{font-size:.95rem;color:var(--tt-soft)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttPlay{display:inline-flex;align-items:center;gap:10px;margin:4px 0 16px;padding:10px 22px 10px 14px;border:0;border-radius:999px;background:var(--tt-indigo);color:#fff;font-weight:600;cursor:pointer}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttPlay svg{width:22px;height:22px}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttPlay:hover{filter:brightness(1.08)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttMissed .ttPlay{margin:0 10px 0 0;padding:6px 10px}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttMissed .ttPlay .ttPlayText{display:none}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttMissed .ttPlay svg{width:16px;height:16px}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttAnswers{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:0 0 12px}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttAnswersSmall{grid-template-columns:repeat(5,minmax(0,1fr))}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttAnswersSmall .ttToneName{display:none}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttTone{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;border:2px solid var(--tt-rule);border-radius:14px;background:var(--tt-surface);color:var(--tt-ink);cursor:pointer}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttTone:hover:not(:disabled){border-color:var(--tt-indigo)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttTone[aria-pressed=true]{border-color:var(--tt-indigo);background:var(--tt-wash)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttTone:disabled{cursor:default}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttTone.isRight{border-color:var(--tt-right);background:var(--tt-right-wash)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttTone.isWrong{border-color:var(--tt-wrong);background:var(--tt-wrong-wash)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttToneMark{font-size:1.5rem;font-weight:700;line-height:1.1}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttToneName{font-size:.85rem;color:var(--tt-soft)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttPairRows{margin:0 0 6px}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttPairRow .ttSmallLabel{display:block;margin:0 0 4px}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttResult:empty{display:none}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttResult{position:relative;margin-top:6px;padding:16px;border:1px solid var(--tt-rule);border-radius:14px;background:var(--tt-surface)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttResult.isPending{border-style:dashed;background:0 0}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttResult.isPending>*{visibility:hidden}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttResult.isPending>.ttPendingHint{visibility:visible;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0!important;padding:16px;text-align:center;color:var(--tt-soft)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttVerdict{font-weight:700}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttVerdict.isRight{color:var(--tt-right)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttVerdict.isWrong{color:var(--tt-wrong)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttWord{font-size:1.05rem;color:var(--tt-ink)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttHan{font-family:var(--tt-han);font-size:1.7em;vertical-align:middle;margin-right:4px}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttPitchFig{margin:6px 0 4px;max-width:360px}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttPitch{width:100%;height:auto;display:block}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttGrid{stroke:var(--tt-rule);stroke-width:1}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttGridLabel{fill:var(--tt-soft);font-size:10px}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttShape{fill:none;stroke:var(--tt-soft);stroke-width:2;stroke-dasharray:5 4}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttCurve{fill:none;stroke:var(--tt-indigo);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttPitchCap{margin-top:2px;font-size:.8rem;color:var(--tt-soft)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttKeyCurve::before,body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttKeyShape::before{content:"";display:inline-block;width:18px;margin:0 6px 3px 0;vertical-align:middle}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttKeyCurve::before{border-top:3px solid var(--tt-indigo)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttKeyShape{margin-left:10px}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttKeyShape::before{border-top:2px dashed var(--tt-soft)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttKeyAlone{margin-left:0}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttStats{font-size:.9rem;color:var(--tt-soft)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttNext,body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttStepUp{margin:6px 8px 0 0;padding:9px 20px;border:1px solid var(--tt-indigo);border-radius:999px;background:var(--tt-surface);color:var(--tt-indigo);font-weight:600;cursor:pointer}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttNext{background:var(--tt-indigo);color:#fff}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttScore{font-size:2.2rem;font-weight:800;color:var(--tt-ink)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttGridTable{margin:6px 0 14px;border-collapse:collapse;font-size:.9rem}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttGridTable td,body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttGridTable th{padding:6px 12px;border:1px solid var(--tt-rule);text-align:center;background:var(--tt-surface)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttGridTable th{font-weight:600;color:var(--tt-soft)}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttGridTable td.isRight{background:var(--tt-right-wash);color:var(--tt-right);font-weight:700}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttGridTable td.isWrong{background:var(--tt-wrong-wash);color:var(--tt-wrong);font-weight:700}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp .ttMissedHead{margin:1em 0 .4em;font-size:1.05rem}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp ul.ttMissed{margin:0 0 10px;padding:0!important;list-style:none}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp ul.ttMissed li{display:flex;align-items:center;flex-wrap:wrap;margin:0 0 6px;padding:0!important}body.toneTrainerPage.blog.thinBlog .learning-wrp .learning-block #ttApp ul.ttMissed li::before{content:none}