.pinyin-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.pinyin-hero-badge{padding:8px 12px;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:700;white-space:nowrap}.pinyin-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 0 14px;margin-bottom:12px}.pinyin-tab{border:1px solid var(--border);background:var(--card-bg);color:var(--text2);border-radius:999px;min-height:44px;padding:10px 14px;font-weight:700;white-space:nowrap;cursor:pointer}.pinyin-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}.pinyin-panel{display:none}.pinyin-panel.active{display:block}.pinyin-card{background:var(--card-bg);border:1px solid var(--border);border-radius:20px;padding:18px;box-shadow:var(--shadow-sm)}.pinyin-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}.pinyin-section-head h2{margin:0 0 6px}.pinyin-section-head p{margin:0;color:var(--text2)}.pinyin-tone-picker{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.pinyin-tone-btn,.pinyin-initial-btn,.pinyin-chip,.pinyin-answer,.pinyin-pair-check{border:1px solid var(--border);background:var(--bg2);color:var(--text);border-radius:12px;min-width:44px;min-height:44px;padding:9px 12px;font-weight:700;cursor:pointer}.pinyin-tone-btn.active,.pinyin-initial-btn.active,.pinyin-answer:hover,.pinyin-chip:hover,.pinyin-chip.selected{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary)}.pinyin-table-wrap{overflow-x:auto;padding-bottom:6px}.pinyin-table{border-collapse:separate;border-spacing:6px;min-width:1120px;width:100%}.pinyin-table th{color:var(--text2);font-size:12px;text-align:center;position:sticky;left:0;background:var(--card-bg);z-index:1}.pinyin-table thead th{position:static}.pinyin-table td,.pinyin-table th{min-width:58px}.pinyin-cell{position:relative;width:100%;min-height:48px;border:1px solid var(--border);background:var(--bg2);color:var(--text);border-radius:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px}.pft-py{font-weight:800;font-size:14px}.pft-hz{font-family:Noto Sans SC,sans-serif;font-size:14px;color:var(--text2);font-weight:400;line-height:1}.pinyin-cell:hover,.pinyin-cell:focus{border-color:var(--primary);color:var(--primary)}.pinyin-empty{opacity:.35}.pinyin-tooltip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%);min-width:150px;max-width:220px;padding:8px 10px;border-radius:10px;background:var(--text);color:var(--bg);font-size:12px;font-weight:600;line-height:1.35;opacity:0;pointer-events:none;transition:opacity .16s ease;z-index:5}.pinyin-cell:hover .pinyin-tooltip,.pinyin-cell:focus .pinyin-tooltip{opacity:1}.pinyin-drill-box,.pinyin-sound-results{min-height:180px}.pinyin-empty-state{color:var(--text2);background:var(--bg2);border:1px dashed var(--border);border-radius:16px;padding:18px;text-align:center}.pinyin-drill-progress{color:var(--text2);font-weight:700;margin-bottom:10px}.pinyin-drill-syllable{font-size:clamp(48px,12vw,86px);font-weight:900;text-align:center;margin:12px 0}.pinyin-answer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}.pinyin-feedback{margin-top:14px;padding:12px;border-radius:12px;text-align:center;font-weight:800}.pinyin-feedback.ok{background:color-mix(in srgb,var(--thuy-luc) 16%,transparent);color:var(--thuy-luc)}.pinyin-feedback.no{background:color-mix(in srgb,var(--chau-hong-3) 16%,transparent);color:var(--chau-hong-3)}.pinyin-result{text-align:center;padding:18px}.pinyin-result h3{margin:0 0 8px}.pinyin-pairs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.pinyin-pair-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:16px}.pinyin-pair-card h3{margin:0 0 8px;font-size:22px}.pinyin-pair-card p{margin:0 0 12px;color:var(--text2)}.pinyin-pair-items,.pinyin-syllable-list,.pinyin-sound-picker{display:flex;gap:8px;flex-wrap:wrap}.pinyin-pair-quiz{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.pinyin-pair-prompt{font-weight:800}.pinyin-pair-feedback{margin-top:10px;min-height:24px;font-weight:800}.pinyin-pair-feedback.ok{color:var(--thuy-luc)}.pinyin-pair-feedback.no{color:var(--chau-hong-3)}.pinyin-sound-results h3,.pinyin-sound-results h4{margin:18px 0 10px}.pinyin-example-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pinyin-word-example{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;text-align:left;border:1px solid var(--border);background:var(--bg2);color:var(--text);border-radius:14px;padding:12px;cursor:pointer}.pinyin-word-example strong{grid-row:span 2;font-size:28px}.pinyin-word-example span{font-weight:800}.pinyin-word-example em{color:var(--text2);font-style:normal}.pinyin-home-widget{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 16%,var(--card-bg)),var(--card-bg));border:1px solid var(--border);border-radius:20px;padding:16px;margin:18px 0}.pinyin-home-widget-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px}.pinyin-home-widget-title{font-weight:900;font-size:18px}.pinyin-home-widget-link{color:var(--primary);font-weight:800;text-decoration:none;white-space:nowrap}.pinyin-home-widget p{margin:0;color:var(--text2)}@media(max-width:720px){.pinyin-hero,.pinyin-section-head{display:block}.pinyin-hero-badge,.pinyin-tone-picker,#pinyinStartDrill{margin-top:12px}.pinyin-card{padding:14px;border-radius:16px}.pinyin-answer-grid,.pinyin-pairs-grid,.pinyin-example-list{grid-template-columns:1fr}.pinyin-pair-quiz{align-items:stretch;flex-direction:column}}.pinyin-tone-demo{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 10%,var(--card-bg)),var(--card-bg));border:1px solid var(--border);border-radius:20px;padding:16px 18px;margin-bottom:14px}.ptd-title{font-weight:800;font-size:15px;margin-bottom:12px;color:var(--text2)}.ptd-items{display:flex;gap:10px;flex-wrap:wrap}.ptd-item{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--border);background:var(--bg2);border-radius:14px;padding:10px 16px;cursor:pointer;transition:transform .15s,box-shadow .15s;min-width:72px}.ptd-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}.ptd-item.ptd-active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}.ptd-char{font-size:24px;font-weight:900;line-height:1.2}.ptd-hanzi{font-size:28px;line-height:1.2}.ptd-vi{font-size:12px;color:var(--text2);font-weight:600}.pft-controls{display:flex;flex-direction:column;gap:8px;align-items:flex-end;flex-shrink:0}.pft-search-input{border:1px solid var(--border);background:var(--bg2);color:var(--text);border-radius:12px;padding:9px 14px;font-size:14px;font-weight:600;width:180px;min-height:44px;outline:none;transition:border-color .15s}.pft-search-input:focus{border-color:var(--primary)}.pft-search-input::placeholder{color:var(--text2);opacity:.7}.pft-tone-1{color:var(--tone-1)!important}.pft-tone-2{color:var(--tone-2)!important}.pft-tone-3{color:var(--tone-3)!important}.pft-tone-4{color:var(--tone-4)!important}.pinyin-tone-btn.pft-tone-1.active{border-color:var(--tone-1);background:color-mix(in srgb,var(--tone-1) 14%,transparent)}.pinyin-tone-btn.pft-tone-2.active{border-color:var(--tone-2);background:color-mix(in srgb,var(--tone-2) 14%,transparent)}.pinyin-tone-btn.pft-tone-3.active{border-color:var(--tone-3);background:color-mix(in srgb,var(--tone-3) 14%,transparent)}.pinyin-tone-btn.pft-tone-4.active{border-color:var(--tone-4);background:color-mix(in srgb,var(--tone-4) 14%,transparent)}.pinyin-table.pft{border-collapse:separate;border-spacing:3px;min-width:1400px;width:100%}.pft-corner{position:sticky;left:0;top:0;z-index:4;background:var(--card-bg);min-width:52px}.pft-col-head{position:sticky;top:0;z-index:3;background:var(--card-bg);color:var(--primary);font-weight:800;font-size:13px;text-align:center;padding:6px 4px;white-space:nowrap}.pft-row-head{position:sticky;left:0;z-index:2;background:var(--card-bg);color:var(--accent);font-weight:800;font-size:13px;text-align:center;padding:6px 8px;min-width:52px;white-space:nowrap}.pft-cell{position:relative;width:100%;min-height:40px;min-width:52px;border:1px solid var(--border);background:var(--bg2);color:var(--text);border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;transition:border-color .12s,background .12s,transform .12s;padding:4px 2px}.pft-cell:hover{border-color:var(--primary);color:var(--primary);transform:scale(1.06);z-index:1}.pft-empty{opacity:.12}.pft-cell.pft-t1{color:var(--tone-1)}.pft-cell.pft-t2{color:var(--tone-2)}.pft-cell.pft-t3{color:var(--tone-3)}.pft-cell.pft-t4{color:var(--tone-4)}.pft-cell.pft-t1:hover{border-color:var(--tone-1)}.pft-cell.pft-t2:hover{border-color:var(--tone-2)}.pft-cell.pft-t3:hover{border-color:var(--tone-3)}.pft-cell.pft-t4:hover{border-color:var(--tone-4)}.pft-cell.pft-playing{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent);transform:scale(1.08)}@keyframes pftFlash{0%,to{box-shadow:none}25%,75%{box-shadow:0 0 0 3px var(--primary),0 0 12px color-mix(in srgb,var(--primary) 40%,transparent)}}.pft-cell.pft-flash{animation:pftFlash .8s ease 2;border-color:var(--primary)}.pinyin-table-wrap{overflow:auto;max-height:70vh;padding-bottom:6px;-webkit-overflow-scrolling:touch}.pinyin-table.pft thead th{position:sticky;top:0;z-index:3;background:var(--card-bg)}.pinyin-table.pft .pft-corner{position:sticky;left:0;top:0;z-index:4;background:var(--card-bg)}.pft-cell[disabled]{opacity:.2;pointer-events:none;cursor:default}.pft-cell.pft-playing:after{content:"🔊";position:absolute;top:2px;right:2px;font-size:7px;line-height:1;pointer-events:none;animation:pftSpeakerPulse .45s ease infinite alternate}@keyframes pftSpeakerPulse{0%{opacity:.5}to{opacity:1}}@media(max-width:720px){.pft-controls{align-items:stretch;flex-direction:column}.pft-search-input{width:100%}.pinyin-table.pft{min-width:1100px;border-spacing:2px}.pft-cell{min-width:44px;min-height:44px;font-size:12px;border-radius:8px}.pft-col-head,.pft-row-head{font-size:11px;padding:4px 3px;min-width:44px}.ptd-items{gap:6px}.ptd-item{padding:8px 12px;min-width:64px}}