.tone-selector-sticky{position:sticky;top:0;z-index:100;background:var(--color-background);border-bottom:1px solid var(--color-border);padding:var(--spacing-sm) var(--spacing-md);box-shadow:var(--shadow-sm)}.tone-selector-container{max-width:var(--max-content-width);margin:0 auto}.tone-selector-label{display:none}.tone-options{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.tone-option{position:relative;cursor:pointer;flex:0 1 auto;min-width:70px}.tone-option input[type=radio]{position:absolute;opacity:0;width:0;height:0}.tone-button{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border:2px solid var(--tone-color);border-radius:var(--radius-md);background:var(--color-surface);transition:all var(--transition-fast);min-height:36px;justify-content:center}.tone-option:hover .tone-button{transform:translateY(-2px);box-shadow:var(--shadow-md)}.tone-option.selected .tone-button{background:var(--tone-color);color:#fff;border-color:var(--tone-color);box-shadow:var(--shadow-md)}.tone-label{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.tone-option.selected .tone-label{color:#fff}.tone-key{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid var(--tone-color);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--tone-color);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);font-family:var(--font-family-mono)}.tone-option.selected .tone-key{background:#fff3;border-color:#fff;color:#fff}.tone-name{display:none}.tone-option.selected .tone-name{color:var(--tone-color);font-weight:var(--font-weight-semibold)}.record-button-container{position:relative;display:flex;align-items:center}.record-button{position:relative;width:36px;height:36px;border:2px solid var(--color-border);border-radius:50%;background:var(--color-surface);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);touch-action:none;user-select:none}.record-button:hover{border-color:var(--color-primary);background:var(--color-border-light)}.record-button.recording{border-color:var(--color-error);background:#e74c3c1a}.record-icon{font-size:var(--font-size-base);z-index:1}.record-progress{position:absolute;top:-2px;left:-2px;width:40px;height:40px}.record-progress-bg{stroke:var(--color-border)}.record-progress-bar{stroke:var(--color-error);stroke-linecap:round}.record-instruction{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--color-text);color:var(--color-background);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:var(--font-size-xs);white-space:nowrap;z-index:10;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%) translateY(-4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.pinyin-grid-container{width:100%;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-2xl)}.pinyin-grid-scroll{overflow-x:auto;overflow-y:auto;max-height:calc(100vh - 200px);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm)}.pinyin-grid{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}.corner-cell{position:sticky;top:0;left:0;z-index:30;background:var(--color-primary);color:#fff;padding:var(--spacing-md);border-bottom:2px solid var(--color-border);border-right:2px solid var(--color-border);min-width:100px}.corner-labels{display:flex;flex-direction:column;gap:var(--spacing-xs);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.initial-header{position:sticky;top:0;z-index:20;background:var(--color-border-light);padding:var(--spacing-md);border-bottom:2px solid var(--color-border);border-right:1px solid var(--color-border);font-weight:var(--font-weight-semibold);text-align:center;min-width:80px;transition:background-color var(--transition-fast)}.initial-header.highlighted{background:#4a90e21a}.initial-label{font-size:var(--font-size-lg);color:var(--color-text)}.final-header{position:sticky;left:0;z-index:10;background:var(--color-border-light);padding:var(--spacing-md);border-right:2px solid var(--color-border);border-bottom:1px solid var(--color-border);font-weight:var(--font-weight-semibold);text-align:center;min-width:80px;transition:background-color var(--transition-fast)}tr.highlighted .final-header{background:#4a90e21a}.final-label{font-size:var(--font-size-lg);color:var(--color-text)}.syllable-cell{padding:var(--spacing-xs);border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border);transition:background-color var(--transition-fast)}.syllable-cell.highlighted{background:#4a90e20d}.syllable-cell.empty{background:var(--color-background)}.empty-cell{display:flex;align-items:center;justify-content:center;min-width:60px;min-height:60px;color:var(--color-text-tertiary);font-size:var(--font-size-sm)}.syllable-button{position:relative;display:flex;align-items:center;justify-content:center;min-width:60px;min-height:60px;padding:var(--spacing-sm);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);color:var(--color-text)}.syllable-button:hover{background:var(--color-border-light);transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--color-primary)}.syllable-button:active{transform:translateY(0)}.syllable-button:disabled{cursor:not-allowed;opacity:.7}.syllable-button.playing{background:#4a90e21a;border-color:var(--color-primary);box-shadow:var(--shadow-md);animation:pulse .5s ease}.syllable-button.error{background:#e74c3c1a;border-color:var(--color-error)}.syllable-button.selected{border-color:var(--color-primary);box-shadow:0 0 0 2px #4a90e24d}.syllable-text{font-size:var(--font-size-xl)}.playing-indicator,.error-indicator{position:absolute;top:4px;right:4px;font-size:var(--font-size-xs)}.syllable-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes tonePulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.tone-option.selected .tone-button{animation:tonePulse .3s ease}.pinyin-grid-scroll::-webkit-scrollbar{width:8px;height:8px}.pinyin-grid-scroll::-webkit-scrollbar-track{background:var(--color-background)}.pinyin-grid-scroll::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-sm)}.pinyin-grid-scroll::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}@media(max-width:768px){.tone-selector-sticky{padding:var(--spacing-md)}.tone-options{gap:var(--spacing-sm)}.tone-option{min-width:90px}.tone-button{padding:var(--spacing-sm);min-height:70px}.tone-label{font-size:var(--font-size-xl)}.tone-key{display:none}.pinyin-grid-scroll{max-height:calc(100vh - 250px)}.corner-cell,.initial-header,.final-header{min-width:60px;padding:var(--spacing-sm)}.corner-labels{font-size:var(--font-size-xs)}.initial-label,.final-label{font-size:var(--font-size-base)}.empty-cell,.syllable-button{min-width:50px;min-height:50px}.syllable-text{font-size:var(--font-size-lg)}}.pinyin-typer{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.pinyin-typer-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--spacing-lg);text-align:center}.pinyin-typer-input-row{display:flex;justify-content:center;margin-bottom:var(--spacing-lg)}.pinyin-typer-input{width:100%;max-width:300px;padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-xl);font-family:var(--font-family-mono);text-align:center;border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text);transition:border-color var(--transition-fast)}.pinyin-typer-input:focus{outline:none;border-color:var(--color-primary)}.pinyin-typer-input::placeholder{color:var(--color-text-tertiary);font-size:var(--font-size-base)}.pinyin-typer-tones{display:flex;justify-content:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.pinyin-typer-tone-btn{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md) var(--spacing-lg);border:2px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-background);color:var(--color-text);cursor:pointer;transition:all var(--transition-fast);min-width:70px}.pinyin-typer-tone-btn:hover:not(:disabled){border-color:var(--color-primary);background:#4a90e21a;transform:translateY(-2px)}.pinyin-typer-tone-btn:active:not(:disabled){transform:translateY(0)}.pinyin-typer-tone-btn:disabled{opacity:.5;cursor:not-allowed}.pinyin-typer-tone-btn .tone-number{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary)}.pinyin-typer-tone-btn.tone-1{border-color:var(--color-tone-1)}.pinyin-typer-tone-btn.tone-2{border-color:var(--color-tone-2)}.pinyin-typer-tone-btn.tone-3{border-color:var(--color-tone-3)}.pinyin-typer-tone-btn.tone-4{border-color:var(--color-tone-4)}.pinyin-typer-tone-btn.tone-1:hover:not(:disabled){background:#22c55e1a}.pinyin-typer-tone-btn.tone-2:hover:not(:disabled){background:#3b82f61a}.pinyin-typer-tone-btn.tone-3:hover:not(:disabled){background:#a855f71a}.pinyin-typer-tone-btn.tone-4:hover:not(:disabled){background:#ef44441a}.pinyin-typer-feedback{text-align:center;min-height:2em}.pinyin-typer-error{color:var(--color-error);font-size:var(--font-size-base)}.pinyin-typer-success{color:var(--color-success);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold)}.pinyin-typer-hint{color:var(--color-text-tertiary);font-size:var(--font-size-sm)}@media(max-width:768px){.pinyin-typer{padding:var(--spacing-lg)}.pinyin-typer-tones{gap:var(--spacing-sm)}.pinyin-typer-tone-btn{min-width:60px;padding:var(--spacing-sm) var(--spacing-md)}}