.pinyinChartPage{--pc-ink:#1a1d33;--pc-soft:#4a4f6a;--pc-muted:#8a8fa8;--pc-indigo:#4b57b2;--pc-indigo-deep:#343f93;--pc-rule:#e2e6f3;--pc-head:#f3f4fb;--pc-t1:#c8432f;--pc-t2:#c97d0a;--pc-t3:#1f8a63;--pc-t4:#3a5fc0;--pc-t1-tint:#fbebe8;--pc-t2-tint:#fbf1de;--pc-t3-tint:#e3f4ec;--pc-t4-tint:#e8eefb;--pc-pinyin:"SF Pro Display","Segoe UI",system-ui,-apple-system,sans-serif}.pinyinChartPage .learning-wrp.pcIntro{padding-bottom:8px}.pinyinChartPage .learning-wrp.pcIntro .learning-block p{margin-bottom:.5em}.pinyinChartPage .learning-wrp.pcAfter{padding-top:40px}.pinyinTool{background:#f9fcfe;padding:8px 0 24px;color:var(--pc-ink)}.pinyinTool button{transition:background-color .15s ease,color .15s ease,border-color .15s ease;-webkit-transition:background-color .15s ease,color .15s ease,border-color .15s ease}.pinyinTool button:focus-visible,.pinyinTool input:focus-visible{outline:3px solid var(--pc-indigo);outline-offset:2px}.pcInner{max-width:1240px;margin:0 auto;padding:0 16px}.pcBar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-bottom:14px}.pcGroup+.pcGroup{margin-left:12px}.pcGroup{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.pcGroupLabel{font-size:15px;color:var(--pc-soft);margin:0 4px 0 0}.pcSeg{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border:1px solid var(--pc-rule);border-radius:999px;background:#fff;color:var(--pc-ink);font:500 16px/1 var(--pc-pinyin);cursor:pointer}.pcSeg:hover{border-color:var(--pc-indigo)}.pcSeg[aria-pressed=true]{background:var(--pc-indigo);border-color:var(--pc-indigo);color:#fff}.pcSeg .pcContour{width:26px;height:15px}.pcSeg.pcT1 .pcContour polyline{stroke:var(--pc-t1)}.pcSeg.pcT1[aria-pressed=true]{background:var(--pc-t1-tint);border-color:var(--pc-t1);color:var(--pc-ink)}.pcSeg.pcT2 .pcContour polyline{stroke:var(--pc-t2)}.pcSeg.pcT2[aria-pressed=true]{background:var(--pc-t2-tint);border-color:var(--pc-t2);color:var(--pc-ink)}.pcSeg.pcT3 .pcContour polyline{stroke:var(--pc-t3)}.pcSeg.pcT3[aria-pressed=true]{background:var(--pc-t3-tint);border-color:var(--pc-t3);color:var(--pc-ink)}.pcSeg.pcT4 .pcContour polyline{stroke:var(--pc-t4)}.pcSeg.pcT4[aria-pressed=true]{background:var(--pc-t4-tint);border-color:var(--pc-t4);color:var(--pc-ink)}.pcFind{display:flex;align-items:center;gap:8px;margin:0 0 0 auto}.pcFind input{width:230px;min-height:40px;padding:6px 14px;border:1px solid var(--pc-rule);border-radius:999px;font:16px var(--pc-pinyin);color:var(--pc-ink);background:#fff}.pcFindNote{flex-basis:100%;margin:-6px 0 10px;min-height:0;font-size:15px;color:var(--pc-t1)}.pcFindNote:empty{display:none}.pcPanel{display:grid;grid-template-columns:minmax(180px,230px) 1fr;gap:16px 24px;align-items:center;padding:16px 18px;margin-bottom:14px;background:#fff;border:1px solid var(--pc-rule);border-radius:16px;min-height:150px}.pcSyllable p{margin:0}.pcBig{font:600 54px/1.05 var(--pc-pinyin);color:var(--pc-ink);letter-spacing:-.01em}.pcMakeUp{margin-top:6px!important;font-size:15px;color:var(--pc-soft)}.pcMakeUp b{color:var(--pc-indigo-deep);font-weight:600}.pcNote{margin-top:6px!important;font-size:14px;line-height:1.45;color:var(--pc-soft)}.pcTones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.pcTone{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"contour py" "char char" "gloss gloss";align-items:center;gap:2px 8px;text-align:left;padding:10px 12px 12px;background:#fff;border:1px solid var(--pc-rule);border-top-width:4px;border-radius:12px;color:var(--pc-ink);cursor:pointer;min-width:0}.pcTone .pcContour{grid-area:contour;width:34px;height:19px}.pcTone .pcPy{grid-area:py;font:600 22px/1.1 var(--pc-pinyin)}.pcTone .pcChar{grid-area:char;font-size:30px;line-height:1.25;margin-top:4px}.pcTone .pcChar small{font-size:17px;color:var(--pc-muted);margin-left:6px}.pcTone .pcGloss{grid-area:gloss;font-size:14px;line-height:1.35;color:var(--pc-soft);overflow-wrap:anywhere}.pcTone .pcRare{margin-top:8px;color:var(--pc-muted)}.pcTone.pcT1{border-top-color:var(--pc-t1)}.pcTone.pcT1 .pcPy{color:var(--pc-t1)}.pcTone.pcT1 .pcContour polyline{stroke:var(--pc-t1)}.pcTone.pcT1.pcPlaying,.pcTone.pcT1:hover{background:var(--pc-t1-tint);border-color:var(--pc-t1)}.pcTone.pcT2{border-top-color:var(--pc-t2)}.pcTone.pcT2 .pcPy{color:var(--pc-t2)}.pcTone.pcT2 .pcContour polyline{stroke:var(--pc-t2)}.pcTone.pcT2.pcPlaying,.pcTone.pcT2:hover{background:var(--pc-t2-tint);border-color:var(--pc-t2)}.pcTone.pcT3{border-top-color:var(--pc-t3)}.pcTone.pcT3 .pcPy{color:var(--pc-t3)}.pcTone.pcT3 .pcContour polyline{stroke:var(--pc-t3)}.pcTone.pcT3.pcPlaying,.pcTone.pcT3:hover{background:var(--pc-t3-tint);border-color:var(--pc-t3)}.pcTone.pcT4{border-top-color:var(--pc-t4)}.pcTone.pcT4 .pcPy{color:var(--pc-t4)}.pcTone.pcT4 .pcContour polyline{stroke:var(--pc-t4)}.pcTone.pcT4.pcPlaying,.pcTone.pcT4:hover{background:var(--pc-t4-tint);border-color:var(--pc-t4)}.pcContour polyline{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.pcAudioError{grid-column:1/-1;margin:0;font-size:15px;color:var(--pc-t1)}.pcChartWrap{max-height:min(74vh,720px);overflow:auto;border:1px solid var(--pc-rule);border-radius:16px;background:#fff;overscroll-behavior:contain}table.pcChart{border-collapse:separate;border-spacing:0;margin:0 auto;font-family:var(--pc-pinyin)}table.pcChart td,table.pcChart th{padding:0;border-right:1px solid var(--pc-rule);border-bottom:1px solid var(--pc-rule);text-align:center}table.pcChart thead th{position:sticky;top:0;z-index:2;height:38px;min-width:50px;background:var(--pc-head);color:var(--pc-indigo-deep);font-size:16px;font-weight:700}table.pcChart tbody th{position:sticky;left:0;z-index:1;min-width:54px;padding:0 9px;background:var(--pc-head);color:var(--pc-indigo-deep);font-size:15px;font-weight:600;text-align:right;white-space:nowrap}table.pcChart th.pcHot{background:var(--pc-indigo);color:#fff}table.pcChart .pcCorner{left:0;z-index:3;position:sticky;font-size:12px;font-weight:500;color:var(--pc-muted);line-height:1.1;padding:3px 8px}table.pcChart .pcCornerBottom,table.pcChart .pcCornerTop{display:block}table.pcChart .pcCornerTop{text-align:right}table.pcChart .pcCornerBottom{text-align:left}table.pcChart .pcNone{font-size:12px;font-weight:500}table.pcChart tr.pcGroupStart>*{border-top:2px solid #c9cdea}table.pcChart tbody tr:first-child>*{border-top:0}table.pcChart td.pcEmpty{background:radial-gradient(circle,#dfe2ee 1.5px,transparent 2px) center/100% 100% no-repeat #fcfcfe}.pcCell{display:block;width:100%;min-width:50px;height:36px;padding:0 3px;border:0;background:#fff;color:var(--pc-ink);font:500 15px/36px var(--pc-pinyin);white-space:nowrap;cursor:pointer}.pcCell:hover{background:#eef0fa;color:var(--pc-indigo-deep)}.pcCell:focus-visible{outline:3px solid var(--pc-indigo);outline-offset:-3px}.pcCell.pcSelected{background:var(--pc-indigo);color:#fff}.pcCell[data-playing="1"]{background:var(--pc-t1);color:#fff}.pcCell[data-playing="2"]{background:var(--pc-t2);color:#fff}.pcCell[data-playing="3"]{background:var(--pc-t3);color:#fff}.pcCell[data-playing="4"]{background:var(--pc-t4);color:#fff}.pcLegend{margin:10px 2px 0;font-size:14px;color:var(--pc-soft)}.pinyinChartPage .learning-block .pcToneTable td:first-child{white-space:nowrap}@media (max-width:991.98px){.pcFind{margin-left:0}}@media (max-width:767.98px){.pcBar{gap:10px}.pcGroupLabel{flex-basis:100%;margin-bottom:2px}.pcSeg{padding:6px 11px;font-size:15px}.pcFind,.pcFind input{width:100%}.pcGroup+.pcGroup{margin-left:0}.pcPanel{grid-template-columns:1fr;gap:10px;padding:12px;min-height:0}.pcBig{font-size:38px}.pcTones{gap:6px}.pcTone{grid-template-columns:1fr;grid-template-areas:"contour" "py" "char" "gloss";padding:6px 7px 8px;border-top-width:3px}.pcTone .pcContour{width:24px;height:13px}.pcTone .pcPy{font-size:17px}.pcTone .pcChar{font-size:24px;margin-top:0}.pcTone .pcChar small{display:none}.pcTone .pcGloss{font-size:12px}.pcChartWrap{max-height:70vh}}@media (prefers-reduced-motion:reduce){.pinyinTool button{transition:none;-webkit-transition:none}}