.PinyinChart-module___cfH8a__container{background-color:#f8f9fa;flex-direction:column;min-height:100vh;padding:20px;font-family:Inter,sans-serif;display:flex}.PinyinChart-module___cfH8a__chartWrapper{background:#fff;border-radius:12px;margin-top:20px;padding:16px;overflow-x:auto;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.PinyinChart-module___cfH8a__grid{grid-template-columns:60px repeat(24,minmax(44px,1fr));gap:4px;width:max-content;display:grid}.PinyinChart-module___cfH8a__cell{text-align:center;border-radius:8px;justify-content:center;align-items:center;padding:8px 4px;font-size:15px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.PinyinChart-module___cfH8a__headerCell{color:#c53030;z-index:10;background-color:#fff5f5;border-bottom:2px solid #fed7d7;font-weight:700;position:sticky;top:0}.PinyinChart-module___cfH8a__initialCell{color:#2b6cb0;z-index:10;background-color:#ebf8ff;border-right:2px solid #bee3f8;font-weight:700;position:sticky;left:0}.PinyinChart-module___cfH8a__syllableCell{color:#2d3748;cursor:pointer;background-color:#fff;border:1px solid #e2e8f0;font-weight:600;box-shadow:0 2px #e2e8f0}.PinyinChart-module___cfH8a__syllableCell:hover,.PinyinChart-module___cfH8a__activeCell{color:#fff;z-index:50;background-color:#3182ce;border-color:#2b6cb0;transform:translateY(-2px)scale(1.05);box-shadow:0 4px 12px #3182ce66}.PinyinChart-module___cfH8a__lockedCell{color:#cbd5e0;cursor:not-allowed;opacity:.7;background-color:#edf2f7;border:1px dashed #e2e8f0}.PinyinChart-module___cfH8a__emptyCell{background-color:#0000}.PinyinChart-module___cfH8a__tooltip{color:#fff;z-index:20;pointer-events:auto;cursor:default;background:#1e293b;border-radius:8px;gap:8px;padding:8px;display:flex;position:absolute;bottom:100%;left:50%;transform:translate(-50%);box-shadow:0 10px 15px -3px #0000001a}.PinyinChart-module___cfH8a__tooltip:after{content:"";border:5px solid #0000;border-top-color:#1e293b;margin-left:-5px;position:absolute;top:100%;left:50%}.PinyinChart-module___cfH8a__toneButton{color:#fff;cursor:pointer;background:0 0;border:1px solid #475569;border-radius:4px;padding:4px 8px;font-size:14px;transition:background .2s}.PinyinChart-module___cfH8a__toneButton:hover{background:#3b82f6;border-color:#3b82f6}.PinyinChart-module___cfH8a__pitchTrack{text-align:center;background:#fff;border-radius:12px;margin-top:20px;padding:20px;box-shadow:0 4px 6px -1px #0000001a}.PinyinChart-module___cfH8a__pitchSvg{width:200px;height:100px;margin:0 auto}.PinyinChart-module___cfH8a__pathPath{fill:none;stroke:#3b82f6;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;transform-origin:50%}.PinyinChart-module___cfH8a__draw1,.PinyinChart-module___cfH8a__draw2,.PinyinChart-module___cfH8a__draw3,.PinyinChart-module___cfH8a__draw4{stroke-dasharray:200;stroke-dashoffset:200px;animation:.5s ease-in-out forwards PinyinChart-module___cfH8a__drawLine}.PinyinChart-module___cfH8a__draw0{stroke-dasharray:50;stroke-dashoffset:50px;animation:.2s ease-in-out forwards PinyinChart-module___cfH8a__drawLine}@keyframes PinyinChart-module___cfH8a__drawLine{to{stroke-dashoffset:0}}.PinyinChart-module___cfH8a__controls{justify-content:center;gap:10px;margin-top:16px;display:flex}.PinyinChart-module___cfH8a__btn{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:6px;padding:8px 16px;font-weight:500;transition:background .2s}.PinyinChart-module___cfH8a__btn:hover{background:#2563eb}