.search-bar-wrapper{position:relative}.search-bar{display:flex;align-items:center;gap:.4rem;padding:.45rem .65rem;background:#ffffffa6;border:1px solid var(--glass-border);border-radius:var(--radius);transition:all .25s var(--anim-ease-out)}.search-bar:hover{background:#fff9;border-color:#c4a88259}.search-bar:focus-within{background:#ffffffb3;border-color:var(--text-accent);box-shadow:0 0 0 3px #c0392b14}.search-icon{flex-shrink:0;display:grid;place-items:center;color:var(--text-secondary);opacity:.85;pointer-events:none;transition:opacity .2s ease;line-height:1}.search-bar:focus-within .search-icon{opacity:1}.search-input{flex:1;min-width:0;border:none;background:transparent;color:var(--text-primary);font-family:var(--font-sans);font-size:.88rem;font-weight:400;letter-spacing:.02em;outline:none;line-height:1.4;padding:.25rem 0;transition:color .2s ease}.search-input::placeholder{color:var(--text-secondary)}.search-clear{flex-shrink:0;width:2rem;height:2rem;border:none;border-radius:50%;background:transparent;color:var(--text-secondary);cursor:pointer;display:grid;place-items:center;padding:0;line-height:1;transition:all .15s ease;-webkit-tap-highlight-color:transparent;opacity:.85}.search-clear:hover{background:#c0392b14;color:var(--text-accent);opacity:1}.search-hint{flex-shrink:0;font-family:var(--font-sans);font-size:.7rem;font-weight:400;color:var(--text-secondary);letter-spacing:.02em;white-space:nowrap;pointer-events:none;transition:opacity .2s ease}.search-bar:focus-within .search-hint{opacity:.6}.click-mode-switch{display:flex;gap:2px;padding:3px;background:#fff6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--glass-border);border-radius:999px;width:fit-content;position:relative}.mode-btn{border:none;background:transparent;color:var(--text-secondary);font-family:var(--font-sans);font-size:.75rem;font-weight:400;letter-spacing:.02em;padding:.45rem .7rem;min-height:44px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:all .2s ease;-webkit-tap-highlight-color:transparent;user-select:none;position:relative;z-index:1}.mode-btn:hover{color:var(--text-primary);background:#ffffff80}.mode-btn:active{background:#fff6}.mode-btn[data-state=on]{color:var(--text-primary);background:#ffffffb3;font-weight:500}.mode-btn[data-state=on].mode-btn--tone{color:var(--mode-accent, var(--tone-1));background:#ffffffb3;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mode-accent, var(--tone-1)) 20%,transparent)}.tp-wrapper{display:flex;justify-content:center;padding:.5rem;position:relative}.tp-board{background:var(--glass-bg);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--card-border);border-radius:14px;padding:.7rem .5rem;margin:.5rem 0;width:100%;max-width:540px}@media(max-width:359px){.tp-board{min-width:340px;overflow-x:auto}}.tp-head{text-align:center;margin-bottom:.6rem;padding-bottom:.4rem;border-bottom:1px solid var(--border-color);position:relative}.tp-head:after{content:"";position:absolute;bottom:-1px;left:50%;transform:translate(-50%);width:30px;height:2px;background:var(--red);border-radius:1px}.tp-title{font-family:var(--font-serif);font-size:1.1rem;font-weight:400;color:var(--text-primary);letter-spacing:.03em;mix-blend-mode:multiply}.tp-sub{font-family:var(--font-serif);font-style:italic;font-size:.75rem;color:var(--text-secondary);margin-top:.1rem}.tp-grid{display:grid;grid-template-columns:2.3rem repeat(5,1fr);gap:3px}.tp-grid-corner{background:#fff3;border-radius:6px;min-height:2rem}.tp-grid-header,.tp-grid-row-header{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#ffffff40;border-radius:6px;font-family:var(--font-sans);font-size:.7rem;font-weight:600;color:var(--hc);min-height:2rem;padding:0 .1rem}.tp-grid-row-header{flex-direction:row;gap:.15rem}.tp-grid-header-icon{font-size:.6rem;opacity:.6}.tp-grid-header-label{letter-spacing:.02em}.tp-cell{all:unset;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#ffffff59;border:1px solid var(--glass-border);border-radius:8px;padding:.25rem .1rem;min-height:3.2rem;cursor:pointer;transition:all .2s var(--anim-ease-out);position:relative;-webkit-tap-highlight-color:transparent;user-select:none}.tp-cell:hover{background:#fff9;border-color:var(--red);box-shadow:0 0 0 1px var(--red);transform:translateY(-1px) scale(1.03)}.tp-cell:active{transform:scale(.96);box-shadow:none}.tp-cell:focus-visible{outline:2px solid var(--red);outline-offset:1px}.tp-cell--sandhi{border-color:#c0392b59;box-shadow:0 0 0 1px #c0392b26}.tp-cell-label{display:flex;align-items:center;gap:1px}.tp-cell-label-num{font-family:var(--font-sans);font-size:.85rem;font-weight:700}.tp-cell-label-num:first-child{color:var(--tc1)}.tp-cell-label-num:last-child{color:var(--tc2)}.tp-cell-label-sep{font-size:.65rem;color:var(--text-secondary);opacity:.4}.tp-cell-badge{font-family:var(--font-sans);font-size:.65rem;font-weight:600;color:var(--red);background:#c0392b14;padding:.02rem .25rem;border-radius:3px;margin-top:.08rem;line-height:1.2;letter-spacing:.02em}.tp-cell-count{font-family:var(--font-sans);font-size:.65rem;font-weight:500;color:var(--text-secondary);margin-top:.1rem}.tpop-overlay{position:fixed;inset:0;z-index:1000;background:#1e191266;backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2)}.tpop-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fffc;backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border:1px solid var(--glass-border);border-radius:16px;width:calc(100% - 2rem);max-width:380px;max-height:75vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--glass-shadow-lg);z-index:1001;animation:tpop-in .25s var(--anim-ease-out)}.tpop-modal:focus{outline:none}@keyframes tpop-in{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}}.tpop-header{display:flex;align-items:center;justify-content:space-between;padding:.7rem .9rem;border-bottom:1px solid var(--border-color);flex-shrink:0}.tpop-title-area{display:flex;align-items:center;gap:.4rem}.tpop-pair{display:flex;align-items:center;gap:2px}.tpop-tone-num{font-family:var(--font-sans);font-size:1rem;font-weight:700}.tpop-sep{font-size:.65rem;color:var(--text-secondary);opacity:.4}.tpop-title-label{font-family:var(--font-sans);font-size:.7rem;color:var(--text-secondary);font-weight:500}.tpop-close{border:none;background:#ffffff80;color:var(--text-secondary);width:2.75rem;height:2.75rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.65rem;transition:all .15s;-webkit-tap-highlight-color:transparent;flex-shrink:0}.tpop-close:hover{background:#c0392b14;color:var(--text-accent)}.tpop-list{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:.35rem}.tpop-word{padding:.5rem .6rem;border-radius:10px;margin-bottom:.15rem;transition:background .15s}.tpop-word:hover{background:#fff6}.tpop-word-main{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.tpop-word-left{display:flex;flex-direction:column;gap:0;min-width:0;flex:1}.tpop-chars{font-family:var(--font-serif);font-size:1.1rem;font-weight:400;color:var(--text-primary);line-height:1.3}.tpop-pinyin{font-family:var(--font-sans);font-size:.8rem;font-weight:500;color:var(--text-accent);line-height:1.3;margin-top:.05rem}.tpop-trans{font-family:var(--font-sans);font-size:.7rem;font-weight:400;color:var(--text-secondary);line-height:1.2;margin-top:.05rem}.tpop-play{border:none;background:#c0392b14;color:var(--text-accent);width:2.75rem;height:2.75rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;-webkit-tap-highlight-color:transparent}.tpop-play:hover{background:#c0392b24}.tpop-play:active{transform:scale(.9);background:#c0392b2e}.tpop-play--active{animation:tpop-pulse .8s ease-in-out infinite}@keyframes tpop-pulse{0%,to{opacity:1}50%{opacity:.55}}.tp-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin-top:.6rem;padding-top:.4rem;border-top:1px solid var(--border-color)}.tp-legend-item{font-family:var(--font-sans);font-size:.75rem;font-weight:500;color:var(--text-secondary);display:flex;align-items:center;gap:.2rem}.tp-legend-dot{display:inline-block;width:6px;height:6px;border-radius:50%}.tp-legend-sandhi{font-style:italic}@media(max-width:420px){.tp-board{padding:.5rem .35rem}.tp-grid{grid-template-columns:1.85rem repeat(5,1fr);gap:2px}.tp-cell{min-height:2.75rem;padding:.15rem .05rem;border-width:1.5px}.tp-cell-label-num{font-size:.75rem}.tp-cell-count{font-size:.6rem}.tp-grid-header,.tp-grid-row-header{font-size:.6rem;min-height:1.6rem}.tp-grid-corner{min-height:1.6rem}.tp-grid-header-icon{font-size:.55rem}.tpop-modal{top:auto;bottom:0;left:0;transform:none;width:100%;max-width:100%;max-height:85vh;border-radius:16px 16px 0 0;border-bottom:none;animation:tpop-slide-up .3s var(--anim-ease-out-quint)}@keyframes tpop-slide-up{0%{transform:translateY(100%)}}.tpop-chars{font-size:1rem}}@media(min-width:768px){.tp-wrapper{padding:1rem}.tp-board{max-width:620px;padding:1.25rem}.tp-grid{gap:4px;grid-template-columns:2.7rem repeat(5,1fr)}.tp-cell{min-height:3.8rem;padding:.35rem .2rem}.tp-cell-label-num{font-size:1rem}.tp-grid-header,.tp-grid-row-header{font-size:.75rem;min-height:2.4rem}.tp-grid-corner{min-height:2.4rem}.tpop-modal{max-width:400px;max-height:70vh}}.learn-page{background:color-mix(in srgb,white 45%,var(--bg-primary));padding:0 1rem 3rem;min-height:60vh}.learn-page-inner{max-width:720px;margin:0 auto}.lp-header{text-align:center;padding:1.8rem 0 .8rem}.lp-kicker{display:inline-block;font-family:var(--font-sans);font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red);mix-blend-mode:multiply;margin-bottom:.6rem}.lp-title{font-family:var(--font-serif);font-size:1.75rem;font-weight:500;color:var(--text-primary);margin:0 0 .4rem;letter-spacing:-.01em;mix-blend-mode:multiply}.lp-sub{font-size:1.05rem;line-height:1.65;color:var(--text-secondary);max-width:520px;margin:.5rem auto 0}.lp-toc{margin:0 0 .5rem;padding:1rem 1.2rem;border:1px solid var(--border-color);border-radius:var(--radius);background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lp-toc-list{display:grid;grid-template-columns:1fr;gap:.15rem;list-style:none;margin:0;padding:0;counter-reset:toc}.lp-toc-link{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;font-family:var(--font-sans);font-size:.85rem;color:var(--text-primary);text-decoration:none;border-radius:6px;transition:background .15s ease,color .15s ease;counter-increment:toc}.lp-toc-link:before{content:counter(toc) ".";font-size:.7rem;font-weight:600;color:var(--text-secondary);min-width:1.2rem}.lp-toc-link svg{flex-shrink:0;color:var(--text-accent);opacity:.6}.lp-toc-link:hover{background:var(--bg-hover);color:var(--text-accent)}.lp-toc-link:active{background:#c0392b14}@media(min-width:600px){.lp-toc-list{grid-template-columns:1fr 1fr}}.lp-section{margin:1.5rem 0;padding:1.4rem 1.2rem;border:1px solid var(--border-color);border-radius:var(--radius);background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .2s ease,box-shadow .2s ease;scroll-margin-top:4rem}.lp-section:hover{border-color:#c4a88233}.lp-h{font-family:var(--font-serif);font-size:1.3rem;font-weight:400;color:var(--text-primary);margin:0 0 .75rem;display:flex;align-items:center;gap:.5rem}.lp-h svg{flex-shrink:0;color:var(--text-accent);opacity:.8}.lp-body{font-size:1rem;line-height:1.75;color:var(--text-primary);opacity:.9;margin:0 0 .8rem}.lp-body strong{color:var(--text-accent);font-weight:500}.lp-caption{font-size:.85rem;color:var(--text-secondary);line-height:1.5;margin:.6rem 0 0}.lp-caption code{font-family:var(--font-sans);font-weight:500;font-size:.9em;color:var(--text-accent);background:var(--highlight-bg);padding:.08em .35em;border-radius:3px}.lp-split{display:flex;align-items:center;gap:.75rem;margin:1.8rem 0 .8rem;padding:0}.lp-split:first-of-type{margin-top:0}.lp-split-line{flex:1;height:1px;background:linear-gradient(to right,transparent,var(--border-color),transparent)}.lp-split-label{font-family:var(--font-sans);font-size:.55rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--text-secondary);white-space:nowrap}.lp-callout{background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--text-accent) 25%,var(--border-color));border-radius:var(--radius);padding:.7rem .9rem;font-size:.9rem;line-height:1.6;color:var(--text-primary);margin-top:.8rem;display:flex;align-items:flex-start;gap:.4rem}.lp-callout svg{flex-shrink:0;margin-top:.15rem;color:var(--text-accent)}.lp-footer{text-align:center;padding:1.5rem 0;border-top:1px solid var(--border-color);margin-top:1rem}.lp-footer p{font-size:.72rem;color:var(--text-secondary);line-height:1.6}.lp-footer-copy{font-size:.6rem!important;margin-top:.3rem}.lp-footer a{color:var(--text-accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}.lp-footer a:hover{border-color:#c0392b4d}.tone-chart-wrap{margin:.6rem 0 0}.tone-chart-svg{width:100%;max-width:360px;height:auto;display:block;margin:0 auto}.tone-chart-labels{display:flex;flex-wrap:wrap;gap:.35rem .8rem;justify-content:center;margin-top:.4rem}.tone-chart-label{font-family:var(--font-sans);font-size:.78rem;display:inline-flex;align-items:center;gap:.3rem;letter-spacing:.02em}.tone-chart-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.syllable-diagram{margin:.6rem 0 .3rem}.syll-diagram-inner{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap}.syll-block{display:flex;flex-direction:column;align-items:center;gap:.25rem;min-width:5.5rem}.syll-block-label{font-family:var(--font-sans);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-secondary)}.syll-block-box{font-family:var(--font-serif);font-size:1.3rem;font-weight:500;color:#fff;width:2.6rem;height:2.6rem;display:flex;align-items:center;justify-content:center;border-radius:8px;text-shadow:0 1px 2px rgba(0,0,0,.15)}.syll-block-desc{font-size:.65rem;color:var(--text-secondary);font-style:italic}.syll-plus,.syll-eq{font-family:var(--font-serif);font-size:1.2rem;color:var(--text-secondary);opacity:.5}.syll-eq-box{font-family:var(--font-sans);font-weight:600;font-size:1.2rem;color:var(--text-primary);background:var(--bg-secondary);padding:.4rem .8rem;border-radius:8px;border:1px solid var(--border-color)}.finals-table-wrap{overflow-x:auto;margin-top:.5rem}.finals-table{width:100%;border-collapse:collapse;font-size:.88rem}.finals-table th{font-family:var(--font-sans);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-secondary);padding:.45rem .7rem;text-align:left;border-bottom:2px solid var(--border-color);background:var(--bg-secondary)}.finals-table td{padding:.4rem .7rem;border-bottom:1px solid var(--border-color);vertical-align:top}.finals-table tbody tr:hover{background:var(--bg-hover)}.ft-group{font-family:var(--font-serif);font-weight:500;font-size:.92rem;color:var(--text-accent);white-space:nowrap;min-width:5rem}.ft-finals{display:flex;flex-wrap:wrap;gap:.35rem}.ft-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.32rem .6rem;border:1px solid var(--glass-border);border-radius:999px;background:#fff6;color:var(--text-primary);font-family:var(--font-sans);font-size:.8rem;letter-spacing:.02em}.ft-chip--playable{appearance:none;-webkit-appearance:none;font:inherit;cursor:pointer;transition:all .15s ease;-webkit-tap-highlight-color:transparent}.ft-chip--playable:hover{border-color:var(--text-accent);background:#fff9}.ft-chip--playable:active{transform:scale(.95)}.ft-chip--active{border-color:var(--text-accent);color:var(--text-accent);background:#c0392b14;animation:lp-listen-pulse .8s ease-in-out infinite}.ft-chip-alt{color:var(--text-secondary);font-size:.72rem;font-style:italic}.pron-groups{display:flex;flex-direction:column;gap:.7rem;margin-top:.5rem}.pron-group{border:1px solid var(--border-color);border-radius:var(--radius);overflow:hidden;background:var(--glass-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s ease,box-shadow .2s ease}.pron-group:hover{border-color:#c4a88233}.pron-group-head{display:flex;align-items:center;gap:.45rem;padding:.55rem .7rem;background:#ffffff4d;border-bottom:1px solid var(--border-color);font-family:var(--font-serif);font-size:.9rem;color:var(--text-primary)}.pron-group-head svg{color:var(--text-accent);opacity:.7;flex-shrink:0}.pron-title{font-weight:500}.pron-group-rows{display:flex;flex-direction:column;gap:.55rem;padding:.5rem .7rem .6rem}.pron-row{display:flex;flex-direction:column;gap:.4rem;padding-bottom:.55rem;font-size:.88rem;line-height:1.5;border-bottom:1px solid var(--border-color)}.pron-row:last-child{border-bottom:none;padding-bottom:0}.pron-row-main{display:flex;flex-wrap:wrap;align-items:center;column-gap:.6rem;row-gap:.3rem}.pron-code{font-family:var(--font-sans);font-weight:600;font-size:.95rem;color:var(--text-accent);min-width:2rem}.pron-desc{flex:1 1 auto;max-width:58ch;color:var(--text-primary);opacity:.85}.pron-row-main .lp-listen-btn{margin-left:auto}.pron-asp{align-self:flex-start;font-size:.65rem;font-weight:500;color:var(--text-secondary);white-space:nowrap;padding:.12rem .4rem;border:1px solid var(--border-color);border-radius:3px;background:var(--bg-secondary)}.irreg-group-card{margin:1rem 0;border:1px solid var(--border-color);border-radius:var(--radius);overflow:hidden;background:var(--glass-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.irreg-group-head{font-family:var(--font-serif);font-size:.95rem;font-weight:500;color:var(--text-primary);margin:0;padding:.55rem .75rem;background:#ffffff4d;border-bottom:1px solid var(--border-color)}.irreg-group-desc{font-size:.82rem;line-height:1.5;color:var(--text-secondary);padding:.4rem .75rem .2rem;margin:0}.irreg-group-rows{display:flex;flex-direction:column;gap:.65rem;padding:.65rem .75rem .75rem}.irreg-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:.75rem;row-gap:.3rem;padding-bottom:.65rem;border-bottom:1px solid var(--border-color);line-height:1.45;transition:background .15s ease}.irreg-row:last-child{border-bottom:none;padding-bottom:0}.irreg-row:hover{background:var(--bg-hover)}.irreg-syl{font-family:var(--font-sans);font-weight:500;font-size:.9rem;color:var(--text-accent)}.irreg-exp{flex:1 1 100%;max-width:60ch;font-size:.85rem;color:var(--text-primary);opacity:.85}.irreg-audio{display:flex;align-items:center;gap:.5rem;margin-left:auto}.irreg-audio-note{font-family:var(--font-sans);font-size:.7rem;font-style:italic;color:var(--text-secondary);white-space:nowrap}.tone-demo{display:flex;flex-direction:column;gap:.4rem;margin:.6rem 0 .8rem}.tone-demo-row{display:flex;align-items:center;gap:.6rem;padding:.65rem .75rem;border:1px solid color-mix(in srgb,var(--tone-color) 30%,var(--border-color));border-radius:var(--radius);background:var(--bg-secondary);font-size:.92rem;transition:border-color .2s ease,background .2s ease}.tone-demo-row:hover{background:var(--bg-hover);border-color:#c4a88233}.tone-demo-mark{font-size:1.3rem;line-height:1;color:var(--tone-color);min-width:1.2rem;text-align:center}.tone-demo-num{font-family:var(--font-sans);font-size:.7rem;font-weight:600;color:var(--tone-color);text-transform:uppercase;letter-spacing:.08em;min-width:2rem}.tone-demo-label{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--text-secondary);min-width:5rem;font-size:.85rem}.tone-demo-example{font-family:var(--font-sans);font-weight:500;font-size:1.1rem;color:var(--tone-color);min-width:2.2rem;letter-spacing:.02em}.tone-demo-meaning{font-family:var(--font-sans);font-size:.78rem;color:var(--text-secondary)}.sandhi-demo{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;margin:.6rem 0 .3rem;padding:.7rem;background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius)}.sandhi-cell{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.45rem .7rem;border:1px solid var(--border-color);border-radius:var(--radius);background:var(--bg-card);min-width:3rem}.sandhi-cell--result{border-color:#c4a88259;box-shadow:0 0 0 1px #c0392b26}.sandhi-cell-tone{font-family:var(--font-sans);font-size:.7rem;font-weight:700;letter-spacing:.08em}.sandhi-cell-char{font-family:var(--font-sans);font-weight:500;font-size:1rem;color:var(--text-primary)}.sandhi-arrow{font-family:var(--font-serif);font-size:1.1rem;color:var(--text-secondary);opacity:.4}.sandhi-table{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:.5rem}.sandhi-table th{font-family:var(--font-sans);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-secondary);padding:.45rem .6rem;text-align:left;border-bottom:2px solid var(--border-color);background:var(--bg-secondary)}.sandhi-table td{padding:.4rem .6rem;border-bottom:1px solid var(--border-color);color:var(--text-primary);opacity:.85}.sandhi-table tbody tr:hover{background:var(--bg-hover)}.tone-tag{display:inline-block;font-family:var(--font-sans);font-size:.65rem;font-weight:700;padding:.12rem .35rem;border-radius:3px;letter-spacing:.05em;min-width:1.2rem;text-align:center;color:#fff}.tone-tag.t1{background:var(--tone-1)}.tone-tag.t2{background:var(--tone-2)}.tone-tag.t3{background:var(--tone-3)}.tone-tag.t4{background:var(--tone-4)}.tone-tag.t5{background:var(--tone-neutral);color:#fff}.lp-listen-btn{border:none;background:#c0392b14;color:var(--text-accent);width:2.75rem;height:2.75rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;-webkit-tap-highlight-color:transparent}.lp-listen-btn:hover{background:#c0392b24}.lp-listen-btn:active{transform:scale(.9);background:#c0392b2e}.lp-listen-btn--active{animation:lp-listen-pulse .8s ease-in-out infinite}@keyframes lp-listen-pulse{0%,to{opacity:1}50%{opacity:.55}}@media(min-width:768px){.learn-page{padding:0 2rem 4rem}.lp-header{padding:2.5rem 0 1.2rem}.lp-title{font-size:2.1rem}.lp-section{padding:1.6rem 1.5rem}.lp-h{font-size:1.4rem}.irreg-syl{min-width:3.5rem;text-align:right}.tone-demo-row{padding:.65rem .85rem;gap:.8rem}.syll-diagram-inner{gap:.8rem}.pron-groups{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem}.pron-group{flex:1}}.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-top:var(--nav-height, 60px)}:root{--dock-clearance: calc(7.5rem + env(safe-area-inset-bottom, 0px)) }.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;flex-direction:column;background:#ffffffd9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--glass-border);padding-bottom:env(safe-area-inset-bottom,0px)}.dock-context{padding:.5rem .6rem .35rem;border-bottom:1px solid var(--border-color)}.dock-tabs{display:flex;gap:.35rem;padding:.4rem .5rem}.dock-btn{flex:1;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;border:1px solid transparent;background:transparent;color:var(--text-secondary);font-family:var(--font-sans);font-size:.62rem;font-weight:400;letter-spacing:.02em;padding:.4rem .3rem;min-height:44px;cursor:pointer;transition:all .25s var(--anim-ease-out);-webkit-tap-highlight-color:transparent;user-select:none;border-radius:10px}.dock-btn:hover{color:var(--text-primary);background:#fff6}.dock-btn:active{transform:scale(.97)}.dock-btn svg{flex-shrink:0;opacity:.45;transition:opacity .2s}.dock-btn[data-state=active]{color:var(--text-accent);font-weight:500;background:#ffffffb3;border-color:var(--glass-border)}.dock-btn[data-state=active]:hover,.dock-btn[data-state=active]:focus,.dock-btn[data-state=active]:focus-visible{color:var(--text-accent);font-weight:500;background:#ffffffb3;border-color:var(--glass-border);outline:none}.dock-btn[data-state=active] svg{opacity:1}@keyframes dock-pop-grid{0%{transform:scale(.85);opacity:.5}60%{transform:scale(1.12)}to{transform:scale(1);opacity:1}}@keyframes dock-pop-waypoints{0%{transform:rotate(-12deg) scale(.8);opacity:.5}to{transform:rotate(0) scale(1);opacity:1}}@keyframes dock-pop-book{0%{transform:translateY(3px);opacity:.5}to{transform:translateY(0);opacity:1}}.dock-btn--chart[data-state=active] svg{animation:dock-pop-grid .25s var(--anim-ease-out-quint)}.dock-btn--pairs[data-state=active] svg{animation:dock-pop-waypoints .22s var(--anim-ease-out-quint)}.dock-btn--learn[data-state=active] svg{animation:dock-pop-book .2s var(--anim-ease-out)}.tab-content{display:flex;flex-direction:column;flex:1;padding-bottom:var(--dock-clearance)}.tab-content:focus{outline:none}.mode-bar{display:flex;justify-content:center;padding:.5rem .6rem;background:#fdf9f1eb;border-bottom:1px solid var(--glass-border)}@media(min-width:768px){.dock{position:sticky;top:var(--nav-height, 60px);order:-1;flex-direction:column;z-index:9;padding-bottom:0;background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:none;border-bottom:1px solid var(--glass-border)}.dock-context{display:flex;order:2;border-bottom:none;border-top:1px solid var(--border-color);padding:.5rem .6rem}.dock-context .search-bar-wrapper{flex:1;min-width:0}.dock-tabs{order:1;gap:.35rem;padding:.5rem}.dock-btn{flex-direction:row;gap:.35rem;font-size:.78rem;letter-spacing:.06em;padding:.7rem .6rem;text-transform:uppercase}.tab-content{padding-bottom:0}}.table-wrap{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;position:relative;padding-bottom:.85rem;scrollbar-width:thin;scrollbar-color:rgba(196,168,130,.45) transparent}.table-wrap::-webkit-scrollbar{height:6px}.table-wrap::-webkit-scrollbar-track{background:transparent}.table-wrap::-webkit-scrollbar-thumb{background:#c4a88273;border-radius:3px}.table-wrap:after{content:"";position:absolute;top:0;right:0;bottom:0;width:2.5rem;background:linear-gradient(to right,transparent,var(--bg-primary));pointer-events:none;z-index:5;opacity:0;transition:opacity .3s}.table-wrap:hover:after{opacity:.6}.table-wrap.scrolled-right:after{opacity:0}.table-wrap{background:#fdf9f1eb}.sound-table{border-collapse:separate;border-spacing:0;width:max-content}.th{position:sticky;background:var(--glass-bg-strong);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:.4rem .3rem;font-family:var(--font-sans);font-size:.75rem;font-weight:500;text-transform:lowercase;letter-spacing:.03em;white-space:nowrap;border-bottom:1px solid var(--border-color);border-right:1px solid var(--border-color)}.corner{top:0;left:0;z-index:4;min-width:1.8rem}.col-head{top:0;z-index:3;color:var(--text-secondary);text-align:center}.row-head{left:0;z-index:2;color:var(--ic);text-align:center;min-width:2.2rem;font-weight:700;font-size:.8rem;background:color-mix(in srgb,var(--ic) 5%,rgba(253,249,241,.95));backdrop-filter:none;-webkit-backdrop-filter:none;border-right:2.5px solid color-mix(in srgb,var(--ic) 30%,transparent)}.group-header{font-family:var(--font-sans);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gc);background:color-mix(in srgb,var(--gc) 6%,rgba(255,255,255,.6));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:2.5px solid color-mix(in srgb,var(--gc) 40%,transparent);padding:.4rem .3rem;position:relative}.group-header-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gc);margin-right:.25rem;vertical-align:middle;opacity:.7}.group-header+.group-header{border-left:1px solid var(--border-color)}.search-info{padding:.4rem .75rem;font-family:var(--font-sans);font-size:.6rem;color:var(--text-secondary);font-style:italic;border-top:1px solid var(--border-color);background:var(--glass-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.lp-footer{padding:1rem;padding-bottom:calc(1rem + var(--dock-clearance));text-align:center;font-size:.58rem;color:var(--text-secondary);opacity:.7;border-top:1px solid var(--border-color);background:var(--glass-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.lp-footer a{color:var(--text-accent);text-decoration:underline;text-underline-offset:3px}.lp-footer-copy{margin-top:.25rem;font-size:.52rem}@media(min-width:768px){.dock-btn{font-size:.82rem;padding:.65rem .85rem}.dock-context{padding:.6rem 1rem}.lp-footer{padding-bottom:1rem}.th{padding:.4rem .25rem;font-size:.7rem}.group-header{font-size:.6rem;padding:.35rem .25rem}}@media(min-width:1200px){.th{padding:.45rem .4rem;font-size:.75rem}}.cell{padding:0;border-bottom:1px solid var(--border-color);border-right:1px solid var(--border-color)}.cell--empty{background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(196,168,130,.04) 4px,rgba(196,168,130,.04) 5px)}.cell-btn{display:block;width:100%;min-width:2.6rem;min-height:2.6rem;padding:.4rem .2rem;border:none;background:color-mix(in srgb,var(--gc, transparent) 4%,rgba(255,255,255,.12));color:var(--text-primary);font-family:var(--font-sans);font-size:.82rem;font-weight:400;cursor:pointer;transition:all .2s var(--anim-ease-out);-webkit-tap-highlight-color:transparent;position:relative}.cell-btn:after{content:"";position:absolute;bottom:0;left:20%;right:20%;height:1.5px;background:var(--gc, transparent);opacity:0;transition:opacity .2s,left .2s,right .2s;border-radius:1px}.cell-btn:hover{background:color-mix(in srgb,var(--gc, var(--red)) 12%,rgba(255,255,255,.5));color:var(--gc, var(--text-accent));transform:translateY(-1px)}.cell-btn:hover:after{opacity:.5;left:10%;right:10%}.cell-btn:active{background:color-mix(in srgb,var(--gc, var(--red)) 18%,rgba(255,255,255,.3));transform:scale(.95) translateY(0);box-shadow:none}.cell-btn--dimmed{opacity:.12;pointer-events:none}.cell-btn--matched{background:color-mix(in srgb,var(--gc, var(--red)) 14%,rgba(255,255,255,.4));border-radius:4px;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--gc, var(--red)) 35%,transparent);font-weight:600;color:var(--gc, #C0392B);position:relative;z-index:1}.cell-btn--matched:after{opacity:.6;left:10%;right:10%}.cell-btn--matched:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--gc, var(--red)) 40%,transparent)}.cell-btn--current{box-shadow:0 0 0 2px var(--red),0 0 0 4px var(--highlight-bg);z-index:2}.cell-btn--irregular{font-weight:500;text-decoration:underline dotted color-mix(in srgb,var(--gc, var(--text-accent)) 60%,transparent);text-underline-offset:3px}@media(min-width:768px){.cell-btn{min-width:2.8rem;min-height:2.5rem;padding:.45rem .25rem;font-size:.8rem}}@media(min-width:1200px){.cell-btn{min-width:3.2rem;font-size:.85rem;padding:.55rem .35rem}}.overlay{position:fixed;inset:0;z-index:1000;background:#1e191259;backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);animation:fadeIn .2s ease}.sheet{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:440px;border-radius:1.25rem 1.25rem 0 0;animation:slideUp .3s var(--anim-ease-out-quint);z-index:1001}.sheet:focus{outline:none}.sheet-shimmer{border-radius:inherit}.sheet-inner{background:#fffc;backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border-radius:inherit;padding:1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom,0px));box-shadow:var(--glass-shadow-lg)}.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;padding-bottom:.8rem;border-bottom:1px solid var(--border-color)}.sheet-syl{font-family:var(--font-serif);font-size:1.8rem;font-weight:400;letter-spacing:.05em;color:var(--text-primary)}.sheet-close{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid rgba(196,168,130,.2);background:#ffffff80;color:var(--text-secondary);font-size:.85rem;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;transition:all .2s}.sheet-close:hover{border-color:var(--text-accent);color:var(--text-accent);background:#c0392b0f}.sheet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}.tone-btn{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:1rem .5rem .8rem;border:1px solid rgba(255,255,255,.6);border-radius:12px;background:#ffffff73;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:inherit;cursor:pointer;transition:all .2s var(--anim-ease-out);-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}.tone-btn:before{content:"";position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--c);opacity:.8}.tone-btn:hover{border-color:var(--c);background:#ffffffb3;transform:translateY(-1px)}.tone-btn:active{transform:scale(.96);background:#c0392b14;border-color:var(--c)}.tone-num{font-family:var(--font-serif);font-size:.65rem;font-weight:300;color:var(--text-secondary);letter-spacing:.1em;margin-bottom:.1rem}.tone-py{font-family:var(--font-sans);font-size:1.25rem;font-weight:500;color:var(--c);line-height:1}.tone-label{font-family:var(--font-sans);font-size:.6rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.12em;margin-top:.15rem}@keyframes fadeIn{0%{opacity:0}}@keyframes slideUp{0%{transform:translate(-50%) translateY(100%)}}@media(min-width:768px){.sheet{bottom:auto;top:50%;transform:translate(-50%,-50%);border-radius:16px;max-width:420px;animation:dialogIn .25s var(--anim-ease-out)}.sheet-inner{padding-bottom:1.5rem;box-shadow:var(--glass-shadow-lg);border-radius:inherit}@keyframes dialogIn{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}}.sheet-grid{grid-template-columns:repeat(4,1fr)}}:root{--red: var(--color-cinnabar, #9B1B15);--red-bright: var(--color-cinnabar, #9B1B15);--sand: #C4A882;--sand-light: #D9C5A8;--ink: var(--color-ink, #2C2C2A);--gold: var(--color-gold, #C39A3C);--card-border: rgba(213, 194, 165, .5);--bg-primary: var(--color-xuan-100, #F5ECE0);--bg-secondary: var(--color-xuan-200, #EEDBB6);--bg-card: rgba(255, 255, 255, .55);--bg-card-solid: #FFFFFF;--bg-hover: rgba(196, 168, 130, .12);--text-primary: var(--ink);--text-secondary: #74685F;--text-accent: var(--red);--tone-1: var(--red);--tone-2: #1B7A43;--tone-3: #2470A2;--tone-4: #8E44AD;--tone-neutral: #6A6A6A;--border-color: rgba(196, 168, 130, .25);--radius: 10px;--font-serif: var(--font-display, "Cormorant Garamond", Georgia, serif);--font-sans: var(--font-body, "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif);--font-chinese: var(--font-chinese, "Noto Sans SC", sans-serif);--anim-duration-fast: .15s;--anim-duration-normal: .25s;--anim-duration-slow: .35s;--anim-ease-out: cubic-bezier(.4, 0, .2, 1);--anim-ease-out-quint: cubic-bezier(.22, 1, .36, 1);--anim-ease: cubic-bezier(.4, 0, .2, 1);--highlight-bg: rgba(192, 57, 43, .08);--highlight-border: rgba(192, 57, 43, .3);--glass-bg: rgba(255, 255, 255, .45);--glass-bg-strong: rgba(255, 255, 255, .65);--glass-border: rgba(255, 255, 255, .5);--glass-shadow: 0 8px 30px rgba(0, 0, 0, .04);--glass-shadow-lg: 0 20px 50px rgba(43, 32, 20, .18), 0 4px 14px rgba(43, 32, 20, .08)}@media(prefers-reduced-motion:reduce){.pinyin-page *,.pinyin-page *:before,.pinyin-page *:after,[data-radix-popper-content-wrapper],[data-radix-popper-content-wrapper] *,.tpop-overlay,.tpop-overlay *,.tpop-modal,.tpop-modal *,.overlay,.overlay *,.sheet,.sheet *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pinyin-page{font-family:var(--font-sans);font-weight:300;color:var(--text-primary);line-height:1.6}.pinyin-page:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(rgba(196,168,130,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(196,168,130,.1) 1px,transparent 1px);background-size:40px 40px,40px 40px}.pinyin-page ::selection{background:#c0392b33;color:var(--ink)}.pinyin-page :focus-visible{outline:2px solid var(--text-accent);outline-offset:2px;border-radius:4px}.pinyin-page button:focus:not(:focus-visible),.pinyin-page input:focus:not(:focus-visible){outline:none}.pinyin-page .search-input:focus-visible{outline:2px solid var(--text-accent);outline-offset:-2px;border-radius:4px}.pinyin-page .dock-btn:focus-visible{outline-offset:-2px}.pinyin-page .cell-btn:focus-visible{outline:2px solid var(--text-accent);outline-offset:-2px;border-radius:4px}.pinyin-page .tone-btn:focus-visible,.pinyin-page .mode-btn:focus-visible,.pinyin-page .sheet-close:focus-visible,.pinyin-page .search-clear:focus-visible{outline-offset:0px}[data-radix-popper-content-wrapper] :focus-visible,.tpop-modal :focus-visible,.sheet :focus-visible{outline:2px solid var(--text-accent);outline-offset:0px;border-radius:4px}.pinyin-page[data-astro-cid-gk7zkqjf]{position:relative;min-height:100dvh}