*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--red: #c0392b;--red-light: #fdecea;--blue: #2471a3;--bg: #f4f5f7;--surface: #ffffff;--border: #e0e0e0;--text: #1a1a2e;--muted: #6c757d;--radius: 10px;--shadow: 0 2px 8px rgba(0,0,0,.08);--tone-1: #c0392b;--tone-2: #d35400;--tone-3: #27ae60;--tone-4: #2471a3;--tone-0: #95a5a6}html.dark{--bg: #0f1117;--surface: #1a1d27;--border: #2e3140;--text: #e8eaf0;--muted: #9099b0;--shadow: 0 2px 8px rgba(0,0,0,.4);--red-light: #2d0f0e}html.dark body{background:var(--bg);color:var(--text)}html.dark .app-header{background:#13161f;border-color:var(--border)}html.dark .vocab-card{background:var(--surface);border-color:var(--border);color:var(--text)}html.dark .detail-card{background:var(--surface);border-color:var(--border)}html.dark .search-input{background:var(--surface);border-color:var(--border);color:var(--text)}html.dark .teacher-section{border-color:var(--border)}html.dark .teacher-input{background:var(--surface);border-color:var(--border);color:var(--text)}html.dark .teacher-text{background:#1e2130;border-color:#d4a017}html.dark .level-tab{background:var(--surface);color:var(--muted);border-color:var(--border)}html.dark .level-tab.active{background:#d4a017;color:#fff}html.dark .level-progress{background:#13161f;border-color:var(--border)}html.dark .level-progress-bar{background:var(--border)}html.dark .immersion-menu{background:var(--surface);border-color:var(--border)}html.dark .immersion-option{background:var(--surface);color:var(--text)}html.dark .immersion-option:hover{background:#22263a}html.dark .badge-pos,html.dark .badge-level{background:#22263a;color:var(--muted)}html.dark .examples-section h3,html.dark .card-english,html.dark .card-pinyin{color:var(--muted)}html.dark .btn-again{background:#2d0a0a}html.dark .btn-good{background:#0d2d1a}html.dark .btn-easy{background:#0d1a3d}html.dark .grammar-notes{background:#1e1c0d;border-color:#3d3800}html.dark .flashcard-front,html.dark .flashcard-back,html.dark .practice-start-card,html.dark .practice-complete-card{background:var(--surface)}html.dark .vocab-card.learned{opacity:.55}.tone-1{color:var(--tone-1)}.tone-2{color:var(--tone-2)}.tone-3{color:var(--tone-3)}.tone-4{color:var(--tone-4)}.tone-0{color:var(--tone-0)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}.app-header{background:var(--red);color:#fff;padding:1rem 1.5rem 0;text-align:center}.app-header h1{font-size:1.4rem;font-weight:700;margin-bottom:.75rem}.app-nav{display:flex;justify-content:center;gap:0;border-top:1px solid rgba(255,255,255,.2)}.app-nav-link{color:#ffffffbf;text-decoration:none;font-size:.85rem;font-weight:600;padding:.55rem 1.25rem;border-bottom:3px solid transparent;transition:color .15s,border-color .15s}.app-nav-link:hover{color:#fff}.app-nav-link.active{color:#fff;border-bottom-color:#fff}.level-tabs{display:flex;gap:.5rem;padding:.9rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch}.level-tab{display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .85rem;border:1px solid var(--border);border-radius:20px;background:#fff;color:var(--text);cursor:pointer;font-size:.82rem;font-weight:500;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}.level-tab:hover{border-color:var(--red);color:var(--red)}.level-tab.active{background:var(--red);border-color:var(--red);color:#fff}.level-tab.empty{opacity:.4;cursor:default}.level-count{background:#0000001f;border-radius:10px;padding:0 .35rem;font-size:.72rem;font-weight:600}.level-tab.active .level-count{background:#ffffff40}.browser-controls{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;max-width:1200px;margin:0 auto}.search-input{flex:1;padding:.55rem .9rem;border:1px solid var(--border);border-radius:var(--radius);font-size:.95rem;background:var(--surface);outline:none;transition:border-color .15s,box-shadow .15s}.search-input:focus{border-color:var(--red);box-shadow:0 0 0 3px #c0392b1f}.result-count{font-size:.82rem;color:var(--muted);white-space:nowrap}.search-page-hero{padding:1.25rem 1rem .5rem;display:flex;flex-direction:column;gap:.5rem;max-width:680px;margin:0 auto}.search-input-lg{font-size:1.1rem!important;padding:.75rem 1.1rem!important}.search-hint{text-align:center;color:var(--muted);font-size:.88rem;padding:1rem;max-width:400px;margin:0 auto;line-height:1.6}.stats-page{padding:1.25rem 1rem 3rem;max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}.stats-title{font-size:1.3rem;font-weight:700}.stats-hero-row{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}@media (min-width: 480px){.stats-hero-row{grid-template-columns:repeat(4,1fr)}}.stats-hero-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem .75rem;display:flex;flex-direction:column;align-items:center;gap:.2rem;text-align:center}.stats-hero-num{font-size:2rem;font-weight:700;color:var(--text);line-height:1}.stats-hero-label{font-size:.78rem;color:var(--muted);font-weight:600}.stats-hero-sub{font-size:.72rem;color:var(--muted)}.today-badge{color:#27ae60!important;font-weight:600}.stats-link{color:var(--red);text-decoration:none}.stats-link:hover{text-decoration:underline}.stats-overall{display:flex;flex-direction:column;gap:.4rem}.stats-overall-label{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted)}.stats-bar-track{height:8px;background:var(--border);border-radius:99px;overflow:hidden;position:relative}.stats-bar-sm{height:6px}.stats-bar-fill{height:100%;background:var(--red);border-radius:99px;transition:width .4s ease;position:absolute;left:0;z-index:2}.stats-bar-reviewed{height:100%;background:#dce3f5;border-radius:99px;position:absolute;left:0;z-index:1}html.dark .stats-bar-reviewed{background:#22263a}.stats-levels{display:flex;flex-direction:column;gap:.85rem}.stats-level-row{display:flex;flex-direction:column;gap:.35rem}.stats-level-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.stats-level-name{font-weight:700;font-size:.88rem;color:var(--text);text-decoration:none;min-width:3rem}.stats-level-name:hover{color:var(--red)}.stats-level-counts{display:flex;gap:.5rem;font-size:.78rem;flex:1;flex-wrap:wrap}.slc-learned{color:var(--red);font-weight:600}.slc-due{color:#e67e22;font-weight:600}.slc-total{color:var(--muted)}.stats-practice-btn{margin-left:auto;font-size:.78rem;color:var(--red);text-decoration:none;font-weight:600;white-space:nowrap}.stats-practice-btn:hover{text-decoration:underline}.vocab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:.75rem;padding:0 1.5rem 2.5rem;max-width:1200px;margin:0 auto}.vocab-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.25rem;transition:box-shadow .15s,border-color .15s,transform .12s}.vocab-card:hover{box-shadow:var(--shadow);border-color:var(--red);transform:translateY(-1px)}.card-chinese{font-size:1.75rem;font-weight:700;color:var(--red);line-height:1.1}.card-pinyin{font-size:.78rem;color:var(--blue)}.card-english{font-size:.82rem;font-weight:500;margin-top:.1rem}.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:.35rem}.card-pos{font-size:.7rem;color:var(--muted);font-style:italic}.empty-state{text-align:center;color:var(--muted);padding:3rem 1.5rem;font-size:.95rem}.detail-page{max-width:680px;margin:0 auto;padding:1.5rem}.back-link{display:inline-block;margin-bottom:1.25rem;color:var(--red);text-decoration:none;font-size:.88rem;font-weight:500}.back-link:hover{text-decoration:underline}.detail-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow)}.detail-header{display:flex;align-items:center;gap:1rem;margin-bottom:.5rem}.detail-chinese{font-size:3.5rem;font-weight:700;color:var(--red);line-height:1}.detail-pinyin{font-size:1.25rem;color:var(--blue);margin-bottom:.8rem}.detail-meta{display:flex;gap:.5rem;margin-bottom:.9rem;flex-wrap:wrap}.badge{padding:.2rem .65rem;border-radius:12px;font-size:.78rem}.badge-pos{background:#f0f0f0;color:var(--muted);font-style:italic}.badge-level{background:var(--red-light);color:var(--red);font-weight:600}.badge-dismissed{background:#e8f8f0;color:#27ae60;border:none;cursor:pointer;font-weight:600}.badge-dismiss-btn{background:none;border:1px dashed var(--border);color:var(--muted);cursor:pointer;font-style:italic}.badge-dismissed:hover{opacity:.8}.badge-dismiss-btn:hover{border-color:var(--muted);color:var(--text)}.detail-english{font-size:1.2rem;font-weight:500;margin-bottom:.75rem}.detail-traditional{font-size:.85rem;color:var(--muted);margin-bottom:1rem}.detail-traditional span{color:var(--text);font-weight:500}.examples-section{margin-top:1.5rem}.examples-section h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:.75rem}.example-item{border-top:1px solid var(--border);padding:.85rem 0}.example-row{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.example-content{flex:1}.example-chinese{font-size:1.1rem;font-weight:600;margin-bottom:.2rem}.example-pinyin{font-size:.82rem;color:var(--blue);margin-bottom:.2rem}.example-english{font-size:.87rem;color:var(--muted)}.tags-section{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border)}.tag{background:#eaf2fb;color:var(--blue);padding:.2rem .65rem;border-radius:12px;font-size:.78rem}.audio-btn{background:none;border:1px solid var(--border);border-radius:50%;width:2.1rem;height:2.1rem;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .15s,background .15s}.audio-btn:hover{border-color:var(--red);background:var(--red-light)}.audio-btn.playing{border-color:var(--red);background:var(--red-light);animation:pulse .8s ease infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.btn-primary,.btn-secondary,.btn-practice{display:inline-flex;align-items:center;justify-content:center;padding:.55rem 1.3rem;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;border:none;text-decoration:none;transition:opacity .15s,transform .1s;white-space:nowrap}.btn-primary{background:var(--red);color:#fff}.btn-secondary{background:#f0f0f0;color:var(--text)}.btn-practice{background:var(--red-light);color:var(--red);border:1px solid #f5c6c2}.btn-practice-quiz{background:#e8f0fe;color:#3b5fe2;border-color:#c5d4f8}.btn-practice-write{background:#e8f8f0;color:#27ae60;border-color:#b8eacf}.btn-practice-listen{background:#f3e8fd;color:#7b2fa8;border-color:#d4aeef}.btn-primary:hover,.btn-secondary:hover,.btn-practice:hover{opacity:.88;transform:translateY(-1px)}.quiz-mode-picker{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}.quiz-mode-btn{padding:.35rem .8rem;border:1.5px solid var(--border);border-radius:99px;background:var(--surface);font-size:.82rem;cursor:pointer;color:var(--muted);font-family:inherit;transition:all .15s}.quiz-mode-btn.active{border-color:var(--red);color:var(--red);background:var(--red-light);font-weight:600}.quiz-prompt{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 1.5rem;text-align:center;margin:1rem 0;display:flex;flex-direction:column;align-items:center;gap:.5rem}.quiz-prompt-chinese{font-size:3.5rem;font-weight:700;line-height:1.1}.quiz-prompt-english{font-size:1.2rem;color:var(--text);line-height:1.4;max-width:320px}.quiz-prompt-pinyin{font-size:1.4rem}.quiz-prompt-sub{display:flex;justify-content:center}.quiz-options{display:flex;flex-direction:column;gap:.5rem}.quiz-option{width:100%;padding:.85rem 1.1rem;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);font-size:.92rem;text-align:left;cursor:pointer;color:var(--text);font-family:inherit;transition:border-color .12s,background .12s;line-height:1.4}.quiz-option:hover:not(:disabled){border-color:var(--red);background:var(--red-light)}.quiz-option.opt-correct{border-color:#27ae60;background:#e8f8f0;color:#27ae60;font-weight:600}.quiz-option.opt-wrong{border-color:var(--red);background:var(--red-light);color:var(--red)}.quiz-option.opt-dim{opacity:.4}.opt-chinese{font-size:1.5rem}html.dark .quiz-option.opt-correct{background:#0d2d1a}html.dark .quiz-option.opt-wrong{background:#2d0a0a}.quiz-feedback{margin-top:.75rem;padding:.85rem 1rem;border-radius:var(--radius);display:flex;flex-direction:column;gap:.5rem;font-size:.92rem}.qf-correct{background:#e8f8f0;border:1px solid #27ae60;color:#27ae60}.qf-wrong{background:var(--red-light);border:1px solid var(--red);color:var(--red)}html.dark .qf-correct{background:#0d2d1a}html.dark .qf-wrong{background:#2d0a0a}.qf-pinyin{color:var(--text);font-size:.85rem}.btn-next{align-self:flex-end;padding:.4rem 1rem;background:var(--text);color:var(--surface);border:none;border-radius:8px;font-size:.88rem;cursor:pointer;font-family:inherit;font-weight:600;transition:opacity .15s}.btn-next:hover{opacity:.85}.writing-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:1rem}.writing-word-info{text-align:center}.writing-pinyin{font-size:1.1rem}.writing-english{font-size:.9rem;color:var(--muted);margin-top:.2rem}.writing-char-progress{display:flex;gap:.4rem;justify-content:center;margin-top:.5rem;font-size:1.1rem}.writing-char-dot{color:var(--muted)}.writing-char-dot.done{color:#27ae60}.writing-char-dot.current{color:var(--red);font-weight:700;text-decoration:underline}.writing-canvas-wrap{position:relative;border:2px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}.writing-canvas{cursor:crosshair}.writing-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.82rem;color:var(--muted);background:var(--surface);z-index:2}.writing-mistakes{font-size:.82rem;color:#e67e22}.writing-hint{font-size:.82rem;color:var(--muted)}.writing-next-btn{width:100%}.practice-menu-wrap{position:relative}.practice-menu-trigger{white-space:nowrap}.practice-menu-dropdown{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 16px #0000001f;min-width:200px;z-index:100;overflow:hidden}.practice-menu-item{display:flex;flex-direction:column;gap:.1rem;padding:.7rem 1rem;text-decoration:none;color:var(--text);border-bottom:1px solid var(--border);transition:background .12s}.practice-menu-item:last-child{border-bottom:none}.practice-menu-item:hover{background:var(--bg)}.pmi-label{font-size:.9rem;font-weight:600}.pmi-sub{font-size:.75rem;color:var(--muted)}.fillblank-sentence-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin:1rem 0;display:flex;flex-direction:column;gap:.6rem}.fbs-english{font-size:.82rem;color:var(--muted);font-style:italic}.fbs-sentence{font-size:1.5rem;line-height:1.6;display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem}.fbs-blank{display:inline-block;min-width:2ch;border-bottom:2.5px solid var(--red);text-align:center;font-weight:700;color:var(--red);padding:0 .15rem;transition:color .2s,border-color .2s}.fbs-blank.blank-correct{color:#27ae60;border-color:#27ae60}.fbs-blank.blank-wrong{color:var(--red);border-color:var(--red)}.fbs-pinyin{font-size:.82rem;color:var(--muted)}.fbs-audio-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.fbs-hint-btn{background:none;border:1px dashed var(--border);border-radius:6px;padding:.2rem .6rem;font-size:.78rem;cursor:pointer;color:var(--muted);font-family:inherit}.fbs-hint-btn:hover{border-color:var(--muted);color:var(--text)}.fbs-hint{font-size:.82rem;color:var(--muted)}.fillblank-type-area{display:flex;gap:.5rem}.fillblank-input{flex:1;padding:.6rem .9rem;border:1.5px solid var(--border);border-radius:var(--radius);font-size:1.1rem;background:var(--surface);color:var(--text);font-family:inherit;outline:none;transition:border-color .15s}.fillblank-input:focus{border-color:var(--red)}.opt-english-sub{font-size:.72rem;color:var(--muted);display:block;margin-top:.15rem}.fbs-typed-was{font-size:.82rem;opacity:.75}.listening-prompt{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 1.5rem;text-align:center;margin:1rem 0;display:flex;flex-direction:column;align-items:center;gap:.75rem}.listening-play-btn{display:flex;flex-direction:column;align-items:center;gap:.4rem;background:none;border:2px solid var(--red);border-radius:50%;width:80px;height:80px;justify-content:center;cursor:pointer;transition:background .15s,transform .1s;color:var(--red)}.listening-play-btn:hover{background:var(--red-light);transform:scale(1.05)}.listening-play-icon{font-size:1.8rem;line-height:1}.listening-play-label{font-size:.65rem;color:var(--muted)}.listening-instruction{font-size:.88rem;color:var(--muted)}.listening-loading{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.88rem}.listening-spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.practice-page{max-width:600px;margin:0 auto;padding:1.5rem;min-height:100vh}.practice-start-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2.5rem 2rem;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:1rem}.practice-start-level{font-size:.8rem;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.08em}.practice-start-card h2{font-size:1.5rem}.practice-start-desc{font-size:.9rem;color:var(--muted);max-width:340px;line-height:1.5}.practice-topbar{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem}.practice-counter{font-size:.85rem;color:var(--muted);margin-left:auto}.practice-score-inline{font-size:.85rem}.progress-bar-wrap{height:4px;background:var(--border);border-radius:2px;margin-bottom:1.5rem;overflow:hidden}.progress-bar-fill{height:100%;background:var(--red);border-radius:2px;transition:width .3s ease}.got-count{color:#27ae60;font-weight:600}.missed-count{color:var(--red);font-weight:600}.flashcard-scene{perspective:1000px;cursor:pointer;margin-bottom:1.25rem;-webkit-user-select:none;user-select:none;outline:none}.flashcard-scene:focus-visible .flashcard{box-shadow:0 0 0 3px #c0392b59}.flashcard{position:relative;height:340px;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.4,0,.2,1);border-radius:var(--radius)}.flashcard.flipped{transform:rotateY(180deg)}.flashcard-face{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius);backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden}.flashcard-front{background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.fc-chinese{font-size:5rem;font-weight:700;color:var(--red);line-height:1}.fc-tap-hint{font-size:.8rem;color:var(--muted)}.flashcard-back{background:var(--surface);transform:rotateY(180deg);padding:1.5rem;display:flex;flex-direction:column;gap:.4rem;overflow-y:auto}.fc-back-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.2rem}.fc-chinese-sm{font-size:2.25rem;font-weight:700;color:var(--red);line-height:1}.fc-pinyin{font-size:1.15rem;color:var(--blue)}.fc-pos-badge{display:inline-block;background:#f0f0f0;color:var(--muted);font-size:.75rem;font-style:italic;padding:.15rem .5rem;border-radius:8px;align-self:flex-start}.fc-english{font-size:1.1rem;font-weight:600;margin-top:.1rem}.fc-example{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--border)}.fc-ex-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.2rem}.fc-ex-chinese{font-size:.95rem;font-weight:600;flex:1}.fc-ex-english{font-size:.82rem;color:var(--muted)}.answer-area{display:flex;flex-direction:column;gap:.6rem}.answer-btns{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.btn-missed,.btn-got{padding:.75rem 1rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s}.btn-missed{background:#fdecea;color:var(--red)}.btn-got{background:#e8f8f0;color:#27ae60}.btn-missed:hover,.btn-got:hover{opacity:.85;transform:translateY(-1px)}.btn-too-easy{width:100%;padding:.5rem;background:none;border:1px dashed var(--border);border-radius:8px;font-size:.82rem;color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s}.btn-too-easy:hover{border-color:var(--muted);color:var(--text)}.dismissed-info{font-size:.82rem;color:var(--muted)}.link-btn{background:none;border:none;color:var(--red);cursor:pointer;font-size:inherit;padding:0;text-decoration:underline}.flip-hint{text-align:center;font-size:.82rem;color:var(--muted)}.srs-stats{display:flex;gap:1.5rem;justify-content:center;margin:.5rem 0 1rem}.srs-stat{display:flex;flex-direction:column;align-items:center;gap:.2rem}.srs-stat-num{font-size:1.6rem;font-weight:700;color:var(--text)}.srs-stat-num.due-num{color:var(--red)}.srs-stat-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.start-btns{display:flex;flex-direction:column;gap:.6rem;width:100%;max-width:260px}.srs-answer-btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem}.btn-again,.btn-good,.btn-easy{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.65rem .5rem;border:none;border-radius:10px;cursor:pointer;font-family:inherit;transition:opacity .15s,transform .1s}.btn-again,.btn-good,.btn-easy:hover{opacity:.85;transform:translateY(-1px)}.btn-again{background:#fdecea;color:var(--red)}.btn-good{background:#e8f8f0;color:#27ae60}.btn-easy{background:#e8f0fe;color:#3b5fe2}.srs-btn-label{font-size:.95rem;font-weight:600}.srs-btn-sub{font-size:.72rem;opacity:.7}.fc-srs-badge{font-size:.72rem;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:.1rem .5rem;position:absolute;top:.75rem;right:.75rem}.srs-easy-count{color:#3b5fe2;font-weight:600}.srs-result-row{display:flex;gap:1rem;justify-content:center;font-size:.9rem;flex-wrap:wrap}.complete-subtext{font-size:.82rem;color:var(--muted);max-width:280px;line-height:1.5}.streak-badge{font-size:.9rem;font-weight:600;color:#e67e22;background:#fff3e0;border-radius:99px;padding:.25rem .75rem;display:inline-block}html.dark .streak-badge{background:#3d2b00;color:#f5a623}.pronun-btn{display:flex;align-items:center;gap:.5rem;width:100%;padding:.65rem 1rem;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;font-size:.9rem;color:var(--text);cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s;margin-top:.5rem}.pronun-btn:hover{border-color:var(--red)}.pronun-btn.listening{border-color:var(--red);background:#fff0f0;color:var(--red)}html.dark .pronun-btn.listening{background:#2d0a0a}.pronun-pulse{width:10px;height:10px;border-radius:50%;background:var(--red);animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}.pronun-result-wrap{margin-top:.5rem;border:1.5px solid var(--border);border-radius:10px;overflow:hidden}.pronun-grade{padding:.6rem 1rem;font-weight:600;font-size:.92rem}.pronun-grade-perfect{background:#e8f8f0;color:#27ae60}.pronun-grade-tones{background:#fff8e1;color:#c0860a}.pronun-grade-sounds{background:#fff0f0;color:var(--red)}.pronun-grade-miss{background:#fdecea;color:var(--red)}html.dark .pronun-grade-perfect{background:#0d2d1a}html.dark .pronun-grade-tones{background:#2d2000}html.dark .pronun-grade-sounds,html.dark .pronun-grade-miss{background:#2d0a0a}.pronun-breakdown{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border)}.pronun-syllable{display:grid;grid-template-columns:2rem 3.5rem 1fr;align-items:start;gap:.4rem;padding:.55rem 1rem;border-bottom:1px solid var(--border);font-size:.85rem}.pronun-syllable:last-child{border-bottom:none}.syl-ok{background:#f7fdf9}.syl-tone{background:#fffcf0}.syl-wrong{background:#fff7f7}html.dark .syl-ok{background:#0a1a10}html.dark .syl-tone{background:#1a1600}html.dark .syl-wrong{background:#1a0a0a}.syl-char{font-size:1.2rem;font-weight:600;color:var(--text)}.syl-expected{font-family:monospace;color:var(--muted);font-size:.78rem;align-self:center}.syl-check{color:#27ae60;font-weight:700;align-self:center}.syl-feedback{display:flex;flex-direction:column;gap:.2rem}.syl-heard{font-size:.78rem;color:var(--red);font-style:italic}.syl-tip{font-size:.78rem;color:var(--text);line-height:1.4}.syl-shape{font-weight:700;font-size:.9rem;color:#3b5fe2}.pronun-retry{display:block;width:100%;padding:.5rem;background:none;border:none;border-top:1px solid var(--border);font-size:.82rem;cursor:pointer;color:var(--muted);font-family:inherit;transition:color .15s,background .15s}.pronun-retry:hover{color:var(--text);background:var(--surface)}.stroke-order-section{margin-top:1.25rem;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.stroke-order-header{display:flex;align-items:center;justify-content:space-between;padding:.55rem 1rem;background:var(--bg);border-bottom:1px solid var(--border)}.stroke-order-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.stroke-order-actions{display:flex;gap:.4rem}.stroke-btn{padding:.25rem .65rem;background:var(--surface);border:1px solid var(--border);border-radius:6px;font-size:.78rem;cursor:pointer;color:var(--text);font-family:inherit;transition:border-color .15s,color .15s}.stroke-btn:hover:not(:disabled){border-color:var(--red);color:var(--red)}.stroke-btn:disabled{opacity:.4;cursor:default}.stroke-chars{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem;background:var(--surface)}.stroke-char-wrap svg{display:block}.stroke-missing{padding:.75rem 1rem;font-size:.82rem;color:var(--muted)}html.dark .stroke-order-section{border-color:var(--border)}html.dark .stroke-order-header{background:#13161f}html.dark .stroke-chars{background:var(--surface)}.practice-complete-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:3rem 2rem;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:2rem}.complete-score{font-size:4rem;font-weight:700;line-height:1}.score-good{color:#27ae60}.score-ok{color:#e67e22}.score-low{color:var(--red)}.practice-complete-card h2{font-size:1.4rem}.complete-detail{font-size:.9rem;color:var(--muted)}.complete-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}.grammar-list{display:flex;flex-direction:column;gap:.75rem;padding:0 1.5rem 2.5rem;max-width:860px;margin:0 auto}.grammar-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.25rem;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.35rem;transition:box-shadow .15s,border-color .15s,transform .12s}.grammar-card:hover{box-shadow:var(--shadow);border-color:var(--red);transform:translateY(-1px)}.grammar-card-title{font-size:1rem;font-weight:700;color:var(--text)}.grammar-card-pattern{font-family:SFMono-Regular,Consolas,monospace;font-size:.8rem;color:var(--red);background:var(--red-light);display:inline-block;padding:.15rem .5rem;border-radius:4px;align-self:flex-start}.grammar-card-example{display:flex;flex-direction:column;gap:.1rem;margin-top:.2rem;padding-top:.5rem;border-top:1px solid var(--border)}.gc-ex-chinese{font-size:.95rem;font-weight:600}.gc-ex-pinyin{font-size:.78rem}.gc-ex-english{font-size:.8rem;color:var(--muted)}.grammar-card-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.25rem}.grammar-detail-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}.grammar-detail-title{font-size:1.45rem;font-weight:700;margin-bottom:.9rem;line-height:1.3}.grammar-pattern-block{display:flex;align-items:baseline;gap:.6rem;background:var(--red-light);border-left:3px solid var(--red);padding:.65rem 1rem;border-radius:0 6px 6px 0;margin-bottom:1rem;flex-wrap:wrap}.grammar-pattern-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--red);flex-shrink:0}.grammar-pattern-text{font-family:SFMono-Regular,Consolas,monospace;font-size:.9rem;color:var(--text)}.grammar-explanation{font-size:.95rem;line-height:1.65;color:var(--text);margin-bottom:1rem}.grammar-notes{margin-top:1.25rem;padding:.85rem 1rem;background:#fffbf0;border:1px solid #f0e0a0;border-radius:var(--radius);font-size:.88rem;line-height:1.6}.grammar-notes-label{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#b8860b;margin-bottom:.35rem}@media (max-width: 600px){.vocab-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.detail-chinese{font-size:2.75rem}.detail-card{padding:1.25rem}.fc-chinese{font-size:4rem}.flashcard{height:320px}}.teacher-wrap{margin-top:1.25rem}.teacher-open-btn{display:flex;align-items:center;gap:.6rem;width:100%;padding:.75rem 1rem;background:var(--surface);border:1.5px solid #e0d5c5;border-radius:var(--radius);font-size:.92rem;font-weight:600;color:#b8860b;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s;position:relative}.teacher-open-btn:hover{border-color:#d4a017;background:#fdfaf6}html.dark .teacher-open-btn{border-color:#3d2e00;color:#f5a623}html.dark .teacher-open-btn:hover{background:#1e1800}.teacher-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 1px 4px #0000002e}.teacher-badge{margin-left:auto;background:var(--red);color:#fff;border-radius:99px;font-size:.72rem;font-weight:700;padding:.1rem .45rem}.teacher-chat{border:1.5px solid #e0d5c5;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}html.dark .teacher-chat{border-color:#3d2e00}.teacher-chat-header{display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;background:#fdfaf6;border-bottom:1px solid #f0e6d3}html.dark .teacher-chat-header{background:#1e1800;border-color:#3d2e00}.teacher-avatar-sm{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 1px 4px #0000002e}.teacher-chat-name{font-weight:700;font-size:.88rem;color:#b8860b}html.dark .teacher-chat-name{color:#f5a623}.teacher-close-btn{background:none;border:none;cursor:pointer;color:var(--muted);font-size:.9rem;padding:.1rem .3rem;border-radius:4px;margin-left:.25rem}.teacher-close-btn:hover{background:var(--border)}.teacher-messages{flex:1;max-height:320px;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:.6rem;background:var(--bg)}.teacher-welcome{font-size:.88rem;color:var(--muted);line-height:1.55;padding:.5rem}.teacher-suggestions{display:flex;flex-direction:column;gap:.35rem;margin-top:.6rem}.teacher-suggestion{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.45rem .75rem;font-size:.82rem;cursor:pointer;text-align:left;color:var(--text);font-family:inherit;transition:border-color .12s,background .12s}.teacher-suggestion:hover{border-color:#d4a017;background:#fdfaf6}.chat-bubble-row{display:flex;gap:.4rem;align-items:flex-end}.cb-user{flex-direction:row-reverse}.cb-teacher{flex-direction:row}.chat-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;align-self:flex-end;box-shadow:0 1px 4px #0000002e}.chat-bubble{max-width:80%;padding:.55rem .85rem;border-radius:14px;font-size:.88rem;line-height:1.5;position:relative}.bubble-user{background:var(--red);color:#fff;border-bottom-right-radius:4px}.bubble-teacher{background:var(--surface);border:1px solid var(--border);color:var(--text);border-bottom-left-radius:4px}.chat-replay-btn{background:none;border:none;cursor:pointer;font-size:.78rem;opacity:.6;padding:0 .15rem;vertical-align:middle;margin-left:.3rem}.chat-replay-btn:hover{opacity:1}.chat-typing{display:flex;align-items:center;gap:4px;padding:.55rem .85rem;min-width:50px}.typing-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:typingBounce 1.2s ease-in-out infinite}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}.teacher-clear-btn{background:none;border:none;border-top:1px solid var(--border);width:100%;padding:.4rem;font-size:.75rem;color:var(--muted);cursor:pointer;font-family:inherit}.teacher-clear-btn:hover{color:var(--text);background:var(--bg)}.teacher-section{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid #f0e6d3}.teacher-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;border-radius:999px;border:none;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .2s,transform .1s;background:#e8f4fd;color:#1a6fa8}.teacher-btn:hover:not(:disabled){background:#d0eaf8;transform:scale(1.02)}.teacher-btn:disabled{opacity:.6;cursor:default}.teacher-btn.mode-listening{background:#fde8e8;color:#c0392b;animation:pulse 1.2s infinite}.teacher-btn.mode-thinking{background:#f5f0ff;color:#6c3fcf}.teacher-btn.mode-speaking{background:#e8fdf0;color:#1a7a44}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.teacher-text{margin-top:.75rem;padding:.75rem 1rem;background:#fafaf7;border-left:3px solid #d4a017;border-radius:0 8px 8px 0;font-size:.92rem;line-height:1.55;color:#333}.teacher-name{font-weight:700;color:#b8860b;margin-right:.3rem}.teacher-input-row{display:flex;gap:.5rem;align-items:center}.teacher-input{flex:1;padding:.55rem .9rem;border:1.5px solid #e0d5c5;border-radius:999px;font-size:.9rem;outline:none;transition:border-color .2s;background:#fdfaf6}.teacher-input:focus{border-color:#d4a017}.teacher-input:disabled{opacity:.6;background:#f5f5f5}.teacher-send-btn{width:38px;height:38px;border-radius:50%;border:none;background:#d4a017;color:#fff;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;flex-shrink:0}.teacher-send-btn:hover:not(:disabled){background:#b8860b}.teacher-send-btn:disabled{opacity:.6;cursor:default}.teacher-mic-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid #e0d5c5;background:#fdfaf6;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;flex-shrink:0}.teacher-mic-btn:hover:not(:disabled){background:#f5ede0;border-color:#d4a017}.teacher-mic-btn.listening{background:#fde8e8;border-color:#c0392b;animation:pulse 1.2s infinite}.teacher-mic-btn:disabled{opacity:.5;cursor:default}.teacher-lang-toggle{display:flex;gap:.3rem;margin-bottom:.5rem}.lang-btn{padding:.2rem .7rem;border-radius:999px;border:1.5px solid #e0d5c5;background:#fdfaf6;font-size:.78rem;font-weight:600;cursor:pointer;color:#888;transition:all .2s}.lang-btn.active{background:#d4a017;border-color:#d4a017;color:#fff}.lang-btn:disabled{opacity:.5;cursor:default}.teacher-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}.teacher-label{font-weight:700;font-size:.9rem;color:#b8860b}.immersion-picker{position:relative}.immersion-trigger{padding:.25rem .7rem;border-radius:999px;border:1.5px solid #e0d5c5;background:#fdfaf6;font-size:.78rem;font-weight:600;cursor:pointer;color:#555;transition:all .2s}.immersion-trigger:hover:not(:disabled){border-color:#d4a017;color:#333}.immersion-trigger:disabled{opacity:.5;cursor:default}.immersion-menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1.5px solid #e0d5c5;border-radius:10px;box-shadow:0 4px 16px #0000001a;z-index:10;overflow:hidden;min-width:160px}.immersion-option{display:block;width:100%;padding:.55rem 1rem;border:none;background:#fff;font-size:.85rem;text-align:left;cursor:pointer;transition:background .15s;color:#333}.immersion-option:hover{background:#fdf6e9}.immersion-option.active{background:#fef3d0;font-weight:700;color:#b8860b}.level-progress{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;background:#fdfaf6;border-bottom:1px solid #f0e6d3}.level-progress-bar{flex:1;height:8px;background:#f0e6d3;border-radius:999px;overflow:hidden}.level-progress-fill{height:100%;background:linear-gradient(90deg,#d4a017,#f0c040);border-radius:999px;transition:width .4s ease}.level-progress-label{font-size:.75rem;color:#888;white-space:nowrap}.vocab-card.learned{opacity:.6;background:#f8f8f6}.vocab-card.learned .card-chinese{color:#aaa}.action-btn{background:none;border:none;cursor:pointer;font-size:1.1rem;padding:.2rem .3rem;border-radius:4px;transition:transform .15s,color .15s;color:#ccc}.action-btn:hover{transform:scale(1.2)}.fav-btn.active{color:#d4a017}.detail-actions{display:flex;align-items:center;gap:.4rem}.badge-mark-learned{background:#eaf4ea;color:#2e7d32;border:1px solid #b8e0b8;cursor:pointer}.badge-mark-learned:hover{background:#d4ecd4}.badge-learned{background:#2e7d32;color:#fff;cursor:pointer}.fav-count{display:inline-block;background:#d4a017;color:#fff;font-size:.65rem;border-radius:999px;padding:0 5px;margin-left:3px;font-weight:700}.page-title{font-size:1.1rem;font-weight:700;color:#333;margin:0}.pron-page{max-width:960px;margin:0 auto;padding:1rem 1rem 4rem}.pron-hero{text-align:center;padding:2rem 1rem 1.5rem}.pron-title{font-size:1.9rem;font-weight:800;color:var(--red);margin:0 0 .4rem}.pron-title-zh{font-size:1.2rem;font-weight:600;color:#b8860b;margin-left:.5rem}.pron-subtitle{color:var(--muted);font-size:.97rem;margin:0}.pron-section{margin-top:2.5rem}.pron-section-title{font-size:1.25rem;font-weight:800;color:#1a1a1a;border-bottom:2.5px solid var(--red);padding-bottom:.35rem;margin-bottom:.7rem}html.dark .pron-section-title{color:#f5f5f5}.pron-section-zh{font-size:.85rem;font-weight:600;color:#b8860b;margin-left:.4rem}.pron-section-desc{color:var(--muted);font-size:.88rem;margin-bottom:1.2rem;line-height:1.55}.tone-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.9rem}.tone-card{border-radius:12px;border:1.5px solid var(--border);background:var(--card);padding:.9rem .75rem;display:flex;flex-direction:column;gap:.5rem}.tone-card-1{border-top:3px solid #e74c3c}.tone-card-2{border-top:3px solid #e67e22}.tone-card-3{border-top:3px solid #27ae60}.tone-card-4{border-top:3px solid #2980b9}.tone-card-0{border-top:3px solid #7f8c8d}html.dark .tone-card{background:var(--card);border-color:#2e2e2e}.tone-card-header{display:flex;align-items:baseline;gap:.45rem}.tone-num{font-size:1.5rem;font-weight:900;color:var(--red);line-height:1}.tone-name{font-size:.82rem;font-weight:700;color:#444}html.dark .tone-name{color:#ccc}.tone-zh{font-size:.78rem;color:#b8860b;margin-left:auto}.tone-contour-wrap{background:var(--bg);border-radius:8px;padding:.3rem}.tone-card-1 .tone-contour-svg{color:#e74c3c}.tone-card-2 .tone-contour-svg{color:#e67e22}.tone-card-3 .tone-contour-svg{color:#27ae60}.tone-card-4 .tone-contour-svg{color:#2980b9}.tone-card-0 .tone-contour-svg{color:#7f8c8d}.tone-contour-svg{width:100%;height:60px}.tone-desc{font-size:.78rem;color:var(--muted);margin:0;line-height:1.45;flex:1}.tone-example-btn{display:flex;align-items:center;gap:.4rem;background:var(--bg);border:1.5px solid var(--border);border-radius:8px;padding:.45rem .55rem;cursor:pointer;transition:background .15s,border-color .15s;width:100%}.tone-example-btn:hover{background:#fdf5e8;border-color:#d4a017}.tone-example-btn.playing{background:#fff5cc;border-color:#d4a017}html.dark .tone-example-btn{background:#1e1e1e;border-color:#2e2e2e}html.dark .tone-example-btn:hover{background:#2a1e00;border-color:#d4a017}.tone-ex-char{font-size:1.3rem;font-weight:700;color:var(--red);line-height:1}.tone-ex-pinyin{font-size:.78rem;font-weight:600;color:#b8860b}.tone-ex-en{font-size:.72rem;color:var(--muted);flex:1}.tone-play-icon{font-size:.75rem;margin-left:auto}.pron-group{margin-bottom:1.2rem}.pron-group-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.5rem}.pron-items-grid{display:flex;flex-wrap:wrap;gap:.55rem}.pron-item-btn{display:flex;flex-direction:column;align-items:center;gap:.2rem;background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:.6rem .7rem;cursor:pointer;min-width:72px;text-align:center;transition:background .15s,border-color .15s,box-shadow .15s}.pron-item-btn:hover{border-color:var(--red);box-shadow:0 2px 8px #c0392b1f}.pron-item-btn.playing{background:#fff0f0;border-color:var(--red)}html.dark .pron-item-btn{background:#1e1e1e;border-color:#2e2e2e}html.dark .pron-item-btn:hover{border-color:var(--red)}html.dark .pron-item-btn.playing{background:#2e1010}.pron-item-main{font-size:1.25rem;font-weight:800;color:var(--red);line-height:1}.pron-item-char{font-size:1.1rem;color:#333;line-height:1}html.dark .pron-item-char{color:#eee}.pron-item-tip{font-size:.65rem;color:var(--muted);line-height:1.3;max-width:90px}.chart-tone-picker{display:flex;align-items:center;gap:.5rem;margin-bottom:1.2rem;flex-wrap:wrap}.chart-tone-label{font-size:.85rem;font-weight:600;color:var(--muted)}.chart-tone-btn{display:flex;align-items:center;gap:.3rem;padding:.3rem .75rem;border-radius:20px;border:1.5px solid var(--border);background:var(--card);font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}.chart-tone-btn:hover{border-color:var(--red)}.chart-tone-btn.active{background:var(--red);color:#fff;border-color:var(--red)}.chart-tone-mark{font-size:1rem}.chart-scroll{overflow-x:auto}.chart-sub{margin-bottom:2rem}.chart-sub-title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.5rem}.pron-table{border-collapse:collapse;min-width:100%;font-size:.78rem}.pron-th-init{background:var(--red);color:#fff;font-size:.7rem;padding:.4rem .5rem;text-align:center;min-width:34px;position:sticky;left:0;z-index:2}.pron-th-fin{background:#fdf5e8;color:#b8860b;font-weight:700;padding:.35rem .4rem;text-align:center;min-width:52px;border-bottom:2px solid #f0d8a8;white-space:nowrap}html.dark .pron-th-fin{background:#1e1800;color:#d4a017;border-color:#3d2e00}.pron-td-init{background:#fdf5e8;color:#b8860b;font-weight:800;font-size:.85rem;text-align:center;padding:.25rem .5rem;border-right:2px solid #f0d8a8;position:sticky;left:0;z-index:1;white-space:nowrap}html.dark .pron-td-init{background:#1e1800;border-color:#3d2e00}.pron-td{padding:.2rem;text-align:center;border:1px solid var(--border)}.pron-td-empty{padding:.2rem;text-align:center;color:var(--border);font-size:.7rem;border:1px solid var(--border)}.chart-cell-btn{display:flex;flex-direction:column;align-items:center;gap:1px;background:transparent;border:1.5px solid transparent;border-radius:6px;padding:.2rem .3rem;cursor:pointer;width:100%;min-width:44px;transition:background .1s,border-color .1s}.chart-cell-btn:hover{background:#fff0f0;border-color:var(--red)}.chart-cell-btn.playing{background:#ffe0e0;border-color:var(--red)}html.dark .chart-cell-btn:hover{background:#2e1010}html.dark .chart-cell-btn.playing{background:#3e1818}.chart-cell-syl{font-size:.72rem;font-weight:600;color:#333;white-space:nowrap}html.dark .chart-cell-syl{color:#e0e0e0}.chart-cell-char{font-size:.92rem;color:var(--red);line-height:1}@media (max-width: 600px){.tone-cards{grid-template-columns:1fr 1fr}.pron-title{font-size:1.4rem}.chart-cell-syl{font-size:.65rem}.chart-cell-char{font-size:.8rem}.pron-table{font-size:.7rem}}