.record-button-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.record-noise-warning,.record-permission-denied,.record-error{font-size:.875rem;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);max-width:28rem;text-align:center;position:fixed;z-index:100;box-shadow:0 4px 12px #00000026;bottom:5rem;right:1.5rem;@media (max-width: 640px){right:50%;transform:translate(50%);bottom:6rem}}.record-noise-warning{color:#92400e;background-color:#fef3c7;border:1px solid #fde68a}.record-permission-denied,.record-error{color:#991b1b;background-color:#fee2e2;border:1px solid #fecaca}.record-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);width:7rem;height:7rem;border-radius:50%;background-color:var(--color-bg-elevated);border:2px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;font-family:var(--font-sans);font-size:.75rem;font-weight:500;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .1s ease;user-select:none;-webkit-user-select:none;touch-action:none}.record-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}.record-button:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-subtle)}.record-button:active:not(:disabled){transform:scale(.97)}.record-button--idle svg,.record-button--ready svg{width:2rem;height:2rem}.record-button--recording{background-color:#dc2626;border-color:#dc2626;color:#fff;box-shadow:0 0 0 6px #dc262633,0 0 0 12px #dc262614;animation:record-button-pulse 1.4s ease-in-out infinite}@keyframes record-button-pulse{0%,to{box-shadow:0 0 0 6px #dc262633,0 0 0 12px #dc262614}50%{box-shadow:0 0 0 10px #dc26264d,0 0 0 20px #dc26260d}}.record-button__pulse{display:block;width:1.75rem;height:1.75rem;border-radius:50%;background-color:#fff;animation:record-dot-beat .7s ease-in-out infinite alternate}@keyframes record-dot-beat{0%{transform:scale(1);opacity:1}to{transform:scale(.7);opacity:.7}}.record-button--processing{background-color:var(--color-bg-surface);border-color:var(--color-accent);color:var(--color-accent);cursor:wait}.record-button__spinner{width:2rem;height:2rem;animation:record-spinner-rotate 1s linear infinite}@keyframes record-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.record-button__spinner-track{opacity:.2}.record-button--error{border-color:#dc2626;color:#dc2626}.record-button--error:hover:not(:disabled){background-color:#fee2e2;box-shadow:0 0 0 4px #dc26261a}.record-button:disabled{opacity:.45;cursor:not-allowed}.record-button__icon{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem}.record-button__label{font-variant-numeric:tabular-nums;line-height:1;min-height:1em}.record-button--requesting-permission{color:var(--color-text-muted);cursor:wait}.phoneme-popover-anchor{position:relative;overflow:visible}.phoneme-popover-anchor:has(.phoneme-popover--open){z-index:1000}.phoneme-popover{visibility:hidden;opacity:0;pointer-events:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);&.phoneme-popover--open:before{content:"";position:absolute;top:100%;left:0;right:0;height:10px}max-width:min(16rem,90vw);width:max-content;background:#1e293b;color:#f1f5f9;border-radius:8px;padding:10px 12px;font-family:var(--font-sans, system-ui, sans-serif);font-size:.8125rem;line-height:1.5;z-index:200;filter:drop-shadow(0 4px 10px rgb(0 0 0 / .35));transition:opacity .15s ease,visibility .15s ease,transform .15s ease}.phoneme-popover--open{visibility:visible;opacity:1;pointer-events:auto}.phoneme-popover--open{transform:translate(-50%) translateY(0)}.phoneme-popover:not(.phoneme-popover--open){transform:translate(-50%) translateY(4px)}.phoneme-popover:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#1e293b}.phoneme-popover__header{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;flex-shrink:0}.phoneme-popover__description-box{max-height:5.75rem;overflow-y:auto;margin-bottom:8px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#475569 transparent}.phoneme-popover__description-box::-webkit-scrollbar{width:6px}.phoneme-popover__description-box::-webkit-scrollbar-track{background:transparent}.phoneme-popover__description-box::-webkit-scrollbar-thumb{background:#475569;border-radius:3px}.phoneme-popover__description-box::-webkit-scrollbar-thumb:hover{background:#64748b}.phoneme-popover__description-box:focus-visible{outline:2px solid #93c5fd;outline-offset:-2px;border-radius:4px}.phoneme-popover__description-box--scrollable:after{content:"";display:block;position:sticky;bottom:0;left:0;right:0;height:20px;margin-top:-20px;background:linear-gradient(to bottom,transparent,#1e293b);pointer-events:none}.phoneme-popover__symbol{font-family:var(--font-ipa);font-size:1.5rem;font-weight:700;line-height:1;color:#e2e8f0;flex-shrink:0}.phoneme-popover__name{font-size:.75rem;font-weight:500;color:#94a3b8;line-height:1.3}.phoneme-popover__note{font-size:.75rem;font-style:italic;color:#fca5a5;margin-bottom:6px}.phoneme-popover__description{font-size:.75rem;color:#cbd5e1;line-height:1.5}.phoneme-popover__candidates-label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin-bottom:3px}.phoneme-popover__candidates{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}.phoneme-popover__candidate-row{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline;font-size:.8125rem}.phoneme-popover__candidate-row--top{font-weight:700}.phoneme-popover__candidate-phoneme{font-family:var(--font-ipa);color:#e2e8f0}.phoneme-popover__candidate-prob{font-family:var(--font-sans, system-ui, sans-serif);font-size:.75rem;opacity:.85;min-width:2.5rem;text-align:right;color:#94a3b8}.phoneme-popover__actions{display:flex;align-items:center;gap:8px;margin-bottom:8px}.phoneme-popover__play{appearance:none;background:var(--color-accent, #3b82f6);color:#fff;border:none;border-radius:4px;padding:3px 8px;font-size:.75rem;font-family:var(--font-sans, system-ui, sans-serif);cursor:pointer;line-height:1.6;transition:background .12s ease,transform .08s ease;white-space:nowrap}.phoneme-popover__play:hover{background:var(--color-accent-hover, #2563eb)}.phoneme-popover__play:active{transform:scale(.93)}.phoneme-popover__play:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}.phoneme-popover__examples-label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin-bottom:3px}.phoneme-popover__examples{font-size:.75rem;color:#94a3b8;line-height:1.5}.phoneme-popover__example-word{appearance:none;background:none;border:none;padding:0;font-family:inherit;font-size:inherit;color:#7dd3fc;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;transition:color .1s ease}.phoneme-popover__example-word:hover{color:#bae6fd}.phoneme-popover__example-word:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px;border-radius:2px}.phoneme-popover__learn-more{display:inline-block;margin-top:8px;font-size:.6875rem;color:#475569;text-decoration:none;transition:color .1s ease}.phoneme-popover__learn-more:hover{color:#94a3b8}.phoneme-display{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);min-height:5rem;width:100%;padding:var(--space-4) 0}.phoneme-display__empty{color:var(--color-text-muted);font-size:.9375rem;text-align:center}.phoneme-display__loading{display:flex;align-items:center;gap:var(--space-2);color:var(--color-text-secondary);font-size:.9375rem}.phoneme-display__loading-label{font-size:.9375rem}.phoneme-display__spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:phoneme-display-spin .7s linear infinite;flex-shrink:0}@keyframes phoneme-display-spin{to{transform:rotate(360deg)}}.phoneme-display__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);max-width:100%}.phoneme-display__chip{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;position:relative;font-family:var(--font-ipa);font-size:1.5rem;line-height:1;min-width:2.5rem;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid transparent;background-color:#dcfce7;color:#15803d;border-color:#86efac;cursor:default;user-select:text;opacity:0;animation:phoneme-display-chip-appear .2s ease-out forwards;transition:transform var(--transition-fast),background-color .15s ease,border-color .15s ease,color .15s ease}.phoneme-display__chip:hover{transform:translateY(-2px)}.phoneme-display__chip--clickable{appearance:none;cursor:pointer!important}.phoneme-display__chip--clickable:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.phoneme-display__chip--clickable:active{transform:scale(.88);transition:transform .08s ease}@keyframes phoneme-display-chip-tap{0%{transform:scale(1)}30%{transform:scale(.88)}70%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes phoneme-display-chip-appear{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.phoneme-display__chip--excellent{background:#dcfce7;color:#166534;border-color:#86efac}.phoneme-display__chip--close{background:#dbeafe;color:#1e40af;border-color:#93c5fd}.phoneme-display__chip--good{background:#fef9c3;color:#713f12;border-color:#facc15}.phoneme-display__chip--fair{background:#ffedd5;color:#7c2d12;border-color:#fb923c}.phoneme-display__chip--poor{background:#fee2e2;color:#991b1b;border-color:#fca5a5}.phoneme-display__chip--deletion{opacity:.6;text-decoration:line-through;text-decoration-color:#ef4444;text-decoration-thickness:2px;border-style:dashed}.phoneme-display__chip-missing{display:block;width:14px;height:2px;background:#ef4444;border-radius:1px;margin-top:2px}.phoneme-display__chip-expected{display:block;font-size:1.5rem;line-height:1}.phoneme-display__chip-recognized{position:absolute;top:1px;right:3px;font-size:.6rem;line-height:1;opacity:.7;font-family:var(--font-ipa);pointer-events:none}.phoneme-display__score{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:1px solid transparent;animation:phoneme-display-chip-appear .2s ease-out forwards}.phoneme-display__score-value{font-size:1.5rem;font-weight:700;line-height:1}.phoneme-display__score-label{font-size:.9375rem;font-weight:500}.phoneme-display__score--excellent{background:#dcfce7;color:#166534;border-color:#86efac}.phoneme-display__score--close{background:#dbeafe;color:#1e40af;border-color:#93c5fd}.phoneme-display__score--good{background:#fef9c3;color:#713f12;border-color:#facc15}.phoneme-display__score--fair{background:#ffedd5;color:#7c2d12;border-color:#fb923c}.phoneme-display__score--poor{background:#fee2e2;color:#991b1b;border-color:#fca5a5}.phoneme-display__comparison{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);width:100%}.phoneme-display__row-label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);align-self:flex-start;margin-left:calc(50% - 10rem)}.phoneme-display__chips--recognized{gap:var(--space-2)}.phoneme-display__chip--neutral{background:var(--color-bg-surface);color:var(--color-text-secondary);border-color:var(--color-border);font-size:1.25rem}.phoneme-display__chip--mismatch{color:#92400e;border-color:#f59e0b;background:#fffbeb}.phoneme-display__chip--spacer{background:transparent;border:1px dashed var(--color-border);opacity:.4;min-width:2.5rem;min-height:2.5rem}.phoneme-display__stress{font-size:.65em;line-height:1;vertical-align:super;margin-right:1px;opacity:.7}.phoneme-display__stress--secondary{opacity:.45}.phoneme-display__word-label{font-size:1.25rem;color:var(--color-text-primary);text-align:center;margin-bottom:var(--space-1)}.phoneme-display__latency{font-size:.8125rem;color:var(--color-text-muted);text-align:center}.phoneme-display__latency strong{color:var(--color-text-secondary);font-weight:600}.phoneme-display__latency-detail{opacity:.75}.phoneme-display__chip--invisible-spacer{visibility:hidden;min-width:2.5rem;min-height:2.5rem;padding:var(--space-2) var(--space-3)}.phoneme-display__chip--insertion{background:#fef2f2;color:#b91c1c;border-color:#fca5a5;border-style:dashed}.model-status-banner{border-radius:var(--radius-md);font-size:.8125rem;overflow:hidden;margin-bottom:var(--space-4)}.model-status-banner--downloading{background-color:var(--color-accent-subtle);border:1px solid var(--color-accent);color:var(--color-accent)}.model-status-banner--loading,.model-status-banner--cached,.model-status-banner--not-downloaded{background-color:var(--color-bg-surface);border:1px solid var(--color-border);color:var(--color-text-secondary)}.model-status-banner--error{background-color:#fef2f2;border:1px solid #fca5a5;color:#dc2626}.model-status-banner__content{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3)}.model-status-banner__content--error{justify-content:space-between}.model-status-banner__label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.model-status-banner__size{flex-shrink:0;font-variant-numeric:tabular-nums;color:var(--color-text-secondary);font-size:.75rem}.model-status-banner__progress-track{height:3px;background-color:var(--color-border)}.model-status-banner__progress-fill{height:100%;background-color:var(--color-accent);transition:width .2s ease-out;min-width:2px}.model-status-banner__spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:model-status-spin .7s linear infinite;flex-shrink:0}@keyframes model-status-spin{to{transform:rotate(360deg)}}.model-status-banner__retry{flex-shrink:0;padding:var(--space-1) var(--space-3);border:1px solid #dc2626;border-radius:var(--radius-sm);background:transparent;color:#dc2626;font-size:.75rem;font-weight:500;cursor:pointer;transition:background-color var(--transition-fast)}.model-status-banner__retry:hover{background-color:#fca5a5}.word-selector{display:flex;flex-direction:column;gap:var(--space-2);width:100%}.word-selector__controls{display:flex;gap:var(--space-2);align-items:flex-start;width:100%}.word-selector__search-wrapper{position:relative;flex:1;min-width:0}.word-selector__input{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-bg-elevated);color:var(--color-text-primary);font-size:1rem;font-family:var(--font-sans);line-height:1.5;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);box-sizing:border-box;appearance:none;-webkit-appearance:none}.word-selector__input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-subtle)}.word-selector__input:disabled{opacity:.5;cursor:not-allowed}.word-selector__input::placeholder{color:var(--color-text-muted)}.word-selector__input::-webkit-search-cancel-button{display:none}.word-selector__dropdown{position:absolute;top:calc(100% + var(--space-1));left:0;right:0;z-index:200;list-style:none;margin:0;padding:var(--space-1) 0;background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);max-height:16rem;overflow-y:auto;overscroll-behavior:contain}.word-selector__dropdown-item{display:flex;align-items:baseline;gap:var(--space-2);padding:var(--space-2) var(--space-3);cursor:pointer;transition:background-color var(--transition-fast)}.word-selector__dropdown-item:hover,.word-selector__dropdown-item:focus,.word-selector__dropdown-item--active{background-color:var(--color-accent-subtle)}.word-selector__dropdown-item--continuation{padding-top:0;border-top:none}.word-selector__dropdown-word--hidden{visibility:hidden}.word-selector__dropdown-word{font-size:.9375rem;font-weight:500;color:var(--color-text-primary);flex-shrink:0}.word-selector__dropdown-pos{font-size:.75rem;font-weight:400;color:var(--color-text-muted);background-color:var(--color-border-subtle);padding:.1em var(--space-2);border-radius:var(--radius-sm);white-space:nowrap;flex-shrink:0}.word-selector__dropdown-ipa{font-family:var(--font-ipa);font-size:.875rem;color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:auto}.word-selector__dropdown-loading,.word-selector__dropdown-empty{padding:var(--space-2) var(--space-3);font-size:.875rem;color:var(--color-text-muted);font-style:italic}.word-selector__random-btn{padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-bg-surface);color:var(--color-text-secondary);font-size:.9375rem;font-family:var(--font-sans);font-weight:500;cursor:pointer;white-space:nowrap;flex-shrink:0;line-height:1.5;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);min-height:calc(1.5em + 2 * var(--space-2) + 2px)}.word-selector__random-btn:hover:not(:disabled){background-color:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.word-selector__random-btn:active:not(:disabled){background-color:var(--color-accent);color:#fff}.word-selector__random-btn:disabled{opacity:.5;cursor:not-allowed}.word-selector__error{font-size:.875rem;color:var(--color-score-poor);padding:var(--space-1) var(--space-2);background-color:#fef2f2;border:1px solid #fca5a5;border-radius:var(--radius-sm);margin:0}@media (max-width: 360px){.word-selector__controls{flex-direction:column}.word-selector__random-btn{width:100%}}.target-word-display{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-6) var(--space-4);min-height:7rem;width:100%;background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.target-word-display__placeholder{color:var(--color-text-muted);font-size:.9375rem;text-align:center;margin:0}.target-word-display__content{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.target-word-display__word{font-size:2.25rem;font-weight:700;color:var(--color-text-primary);letter-spacing:-.02em;line-height:1.1;margin:0;text-align:center}.target-word-display__transcriptions{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.target-word-display__no-dialects{font-size:.875rem;color:var(--color-text-muted);margin:0;text-align:center}.target-word-display__dialect-group{display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap;justify-content:center}.target-word-display__dialect-label{font-size:.6875rem;font-weight:600;color:var(--color-text-muted);white-space:nowrap;min-width:5.5rem;text-align:right}.target-word-display__ipa-list{display:inline}.target-word-display__ipa{appearance:none;background:none;border:1px solid transparent;margin:0;padding:.125rem .25rem;border-radius:var(--radius-sm, 4px);user-select:text;font-family:var(--font-ipa);font-size:1.125rem;color:var(--color-text-secondary);cursor:pointer;display:inline-flex;align-items:center;gap:.25rem;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.target-word-display__ipa:hover{background-color:var(--color-bg-hover, rgba(0, 0, 0, .06));border-color:var(--color-border);color:var(--color-text-primary)}.target-word-display__ipa:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.target-word-display__ipa--playing{background-color:var(--color-accent-subtle, rgba(99, 102, 241, .1));border-color:var(--color-accent, #6366f1);color:var(--color-accent, #6366f1)}.target-word-display__speaker-icon{flex-shrink:0;opacity:.45;color:currentColor;transition:opacity .12s ease}.target-word-display__ipa:hover .target-word-display__speaker-icon{opacity:.75}.target-word-display__speaker-icon--playing{opacity:1;animation:target-word-display-speaker-pulse .6s ease-in-out infinite alternate}@keyframes target-word-display-speaker-pulse{0%{opacity:.6;transform:scale(1)}to{opacity:1;transform:scale(1.2)}}.target-word-display__ipa-sep{color:var(--color-text-muted);font-size:1rem}.dialect-filter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}.dialect-filter__heading{font-size:.75rem;font-weight:600;color:var(--color-text-muted);white-space:nowrap;margin-right:var(--space-1)}.dialect-filter__option{display:inline-flex;align-items:center;gap:var(--space-1);cursor:pointer;position:relative;padding:.2em var(--space-2);border-radius:var(--radius-sm);transition:background-color .1s ease}.dialect-filter__option:hover{background-color:var(--color-border-subtle)}.dialect-filter__checkbox{width:.875rem;height:.875rem;cursor:pointer;accent-color:var(--color-accent, #4f6ef7);flex-shrink:0}.dialect-filter__label{font-size:.75rem;font-weight:500;color:var(--color-text-secondary);white-space:nowrap;user-select:none}.dialect-filter__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}.dialect-filter__note{flex-basis:100%;font-size:.7rem;color:var(--color-text-muted);line-height:1.4}.tts-engine-selector{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}.tts-engine-selector__label{font-size:.75rem;font-weight:600;color:var(--color-text-muted);white-space:nowrap}.tts-engine-selector__select{font-size:.75rem;font-weight:500;color:var(--color-text-secondary);background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.2em var(--space-2);cursor:pointer}.tts-engine-selector__status{font-size:.75rem;color:var(--color-text-muted);white-space:nowrap}.tts-engine-selector__status--error{color:#dc2626}.example-audio-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}.example-audio-toggle__label{font-size:.75rem;font-weight:600;color:var(--color-text-muted);white-space:nowrap}.example-audio-toggle__select{font-size:.75rem;font-weight:500;color:var(--color-text-secondary);background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.2em var(--space-2);cursor:pointer}.exemplar-voice-selector{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}.exemplar-voice-selector__label{font-size:.75rem;font-weight:600;color:var(--color-text-muted);white-space:nowrap}.exemplar-voice-selector__select{font-size:.75rem;font-weight:500;color:var(--color-text-secondary);background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.2em var(--space-2);cursor:pointer}.isolated-vowel-audio-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}.isolated-vowel-audio-toggle__label{font-size:.75rem;font-weight:600;color:var(--color-text-muted);white-space:nowrap}.isolated-vowel-audio-toggle__select{font-size:.75rem;font-weight:500;color:var(--color-text-secondary);background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.2em var(--space-2);cursor:pointer}.attempt-history{width:100%}.attempt-history__title{font-size:.9375rem;font-weight:600;color:var(--color-text-secondary);margin-bottom:var(--space-3);text-transform:uppercase;letter-spacing:.05em}.attempt-history__empty{color:var(--color-text-muted);font-size:.9375rem;text-align:center;padding:var(--space-6) 0}.attempt-history__loading{display:flex;align-items:center;gap:var(--space-2);color:var(--color-text-muted);font-size:.9375rem;padding:var(--space-4) 0}.attempt-history__spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:attempt-history-spin .7s linear infinite;flex-shrink:0}@keyframes attempt-history-spin{to{transform:rotate(360deg)}}.attempt-history__list{display:flex;flex-direction:column;gap:var(--space-2)}.attempt-history__row{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast)}.attempt-history__row:hover{background-color:var(--color-bg-surface);border-color:var(--color-accent)}.attempt-history__word{font-weight:600;font-size:1rem;color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attempt-history__score{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:.875rem;font-weight:700;border:1px solid transparent;flex-shrink:0}.attempt-history__score--excellent{background:#dcfce7;color:#166534;border-color:#86efac}.attempt-history__score--close{background:#dbeafe;color:#1e40af;border-color:#93c5fd}.attempt-history__score--good{background:#fef9c3;color:#713f12;border-color:#facc15}.attempt-history__score--fair{background:#ffedd5;color:#7c2d12;border-color:#fb923c}.attempt-history__score--poor{background:#fee2e2;color:#991b1b;border-color:#fca5a5}.attempt-history__play-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;flex-shrink:0;transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.attempt-history__play-btn:hover:not(:disabled){background-color:var(--color-accent);color:#fff;border-color:var(--color-accent)}.attempt-history__play-btn:disabled{opacity:.5;cursor:default}.attempt-history__time{font-size:.8125rem;color:var(--color-text-muted);flex-shrink:0;min-width:5rem;text-align:right}.attempt-history__detail{padding:var(--space-3) var(--space-4);background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-top:none;border-radius:0 0 var(--radius-md) var(--radius-md);margin-top:calc(-1 * var(--space-2))}.attempt-history__row--expanded{border-radius:var(--radius-md) var(--radius-md) 0 0;border-bottom-color:transparent}.attempt-history__phoneme-dots{display:flex;flex-wrap:wrap;gap:3px;margin-top:var(--space-2)}.attempt-history__phoneme-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.attempt-history__phoneme-dot--excellent{background:#16a34a}.attempt-history__phoneme-dot--good{background:#ca8a04}.attempt-history__phoneme-dot--fair{background:#ea580c}.attempt-history__phoneme-dot--poor{background:#dc2626}.attempt-history__phoneme-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}.attempt-history__phoneme-chip{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-ipa);font-size:1.1rem;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);border:1px solid transparent}.attempt-history__phoneme-chip--excellent{background:#dcfce7;color:#15803d;border-color:#86efac}.attempt-history__phoneme-chip--good{background:#fef9c3;color:#854d0e;border-color:#fde047}.attempt-history__phoneme-chip--fair{background:#ffedd5;color:#9a3412;border-color:#fdba74}.attempt-history__phoneme-chip--poor{background:#fee2e2;color:#991b1b;border-color:#fca5a5}.formant-tracker__dot-anchor{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:5;transition:left 60ms linear,top 60ms linear}.formant-tracker__dot{display:block;width:1rem;height:1rem;border-radius:50%;background:#eab308;box-shadow:0 0 0 4px #eab30859,0 0 12px 2px #eab30899}@media (prefers-color-scheme: dark){.formant-tracker__dot{background:#fbbf24;box-shadow:0 0 0 4px #fbbf2459,0 0 12px 2px #fbbf2499}}.formant-tracker{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center}.formant-tracker__intro{color:var(--color-text-secondary);font-size:.9375rem;margin:0}.formant-tracker__controls{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;justify-content:center}.formant-tracker__toggle{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:2px solid var(--color-border);background:var(--color-bg-elevated);color:var(--color-text-secondary);font-family:var(--font-sans);font-size:.875rem;font-weight:500;cursor:pointer;transition:border-color .15s ease,color .15s ease,background-color .15s ease}.formant-tracker__toggle:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent)}.formant-tracker__toggle:disabled{opacity:.6;cursor:wait}.formant-tracker__toggle-icon{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem}.formant-tracker__toggle-icon svg{width:100%;height:100%}.formant-tracker__toggle--listening{border-color:#eab308;color:#a16207;background:#eab3081a}@media (prefers-color-scheme: dark){.formant-tracker__toggle--listening{border-color:#fbbf24;color:#fde68a;background:#fbbf241f}}.formant-tracker__pulse{display:block;width:.75rem;height:.75rem;border-radius:50%;background:currentColor;animation:formant-tracker-pulse .9s ease-in-out infinite alternate}@keyframes formant-tracker-pulse{0%{transform:scale(1);opacity:1}to{transform:scale(.65);opacity:.6}}.formant-tracker__toggle--error{border-color:#dc2626;color:#dc2626}.formant-tracker__readout{font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-size:.875rem;color:var(--color-text-secondary);margin:0;min-width:11rem;text-align:left}.formant-tracker__chart-wrap{width:100%;max-width:360px;--formant-chart-f1-color: #2563eb;--formant-chart-f2-color: #c026d3;--formant-chart-grid-color: rgba(100, 116, 139, .25);--formant-chart-label-color: var(--color-text-muted)}@media (prefers-color-scheme: dark){.formant-tracker__chart-wrap{--formant-chart-f1-color: #60a5fa;--formant-chart-f2-color: #e879f9;--formant-chart-grid-color: rgba(148, 163, 184, .25)}}.formant-tracker__chart-legend{display:flex;align-items:center;gap:var(--space-3);font-size:.75rem;color:var(--color-text-muted);margin-bottom:var(--space-1)}.formant-tracker__chart-legend-item{display:inline-flex;align-items:center;gap:.3em;font-weight:600}.formant-tracker__chart-legend-item:before{content:"";display:inline-block;width:.6rem;height:.6rem;border-radius:50%}.formant-tracker__chart-legend-item--f1:before{background:var(--formant-chart-f1-color)}.formant-tracker__chart-legend-item--f2:before{background:var(--formant-chart-f2-color)}.formant-tracker__chart-legend-window{margin-left:auto;font-style:italic}.formant-tracker__chart-canvas{display:block;width:100%;height:110px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-bg-elevated)}.formant-tracker__error{color:#991b1b;font-size:.875rem;margin:0}.formant-tracker__caption{color:var(--color-text-muted);font-size:.8125rem;font-style:italic;margin:0}.vowel-chart{--diph-color-0: #2563eb;--diph-color-1: #7c3aed;--diph-color-2: #c026d3;--diph-color-3: #0d9488;--diph-color-4: #0891b2}@media (prefers-color-scheme: dark){.vowel-chart{--diph-color-0: #60a5fa;--diph-color-1: #a78bfa;--diph-color-2: #e879f9;--diph-color-3: #2dd4bf;--diph-color-4: #22d3ee}}.vowel-chart>.example-audio-toggle{margin-bottom:var(--space-6)}.vowel-chart__legend{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-6);font-size:.8125rem;color:var(--color-text-secondary)}.vowel-chart__legend-item{display:inline-flex;align-items:center;gap:var(--space-2)}.vowel-chart__legend-swatch{display:inline-block;width:.875rem;height:.875rem;border-radius:50%;border:2px solid var(--color-accent)}.vowel-chart__legend-swatch--rounded{background:var(--color-accent-subtle)}.vowel-chart__legend-swatch--unrounded{background:var(--color-bg-elevated)}.vowel-chart__legend-arrow-icon{overflow:visible}.vowel-chart__frame{position:relative;max-width:640px;margin:0 auto var(--space-10);padding-left:3.25rem;padding-bottom:2.25rem;box-sizing:border-box}.vowel-chart__stage{position:relative;width:100%;aspect-ratio:3 / 2}.vowel-chart__svg{position:absolute;inset:0;width:100%;height:100%;display:block}.vowel-chart__overlay{position:absolute;inset:0;pointer-events:none}.vowel-chart__trapezoid{fill:var(--color-bg-surface);stroke:var(--color-border);stroke-width:.6}.vowel-chart__guide-line{stroke:var(--color-border-subtle);stroke-width:.3;stroke-dasharray:1.5 1.5}.vowel-chart__glide{cursor:pointer}.vowel-chart__glide-line{fill:none;stroke:var(--color-accent);stroke-width:1}.vowel-chart__glide-hit{fill:none;stroke:transparent;stroke-width:6}.vowel-chart__arrowhead{fill:var(--color-accent)}.vowel-chart__glide--0 .vowel-chart__glide-line{stroke:var(--diph-color-0)}.vowel-chart__glide--1 .vowel-chart__glide-line{stroke:var(--diph-color-1)}.vowel-chart__glide--2 .vowel-chart__glide-line{stroke:var(--diph-color-2)}.vowel-chart__glide--3 .vowel-chart__glide-line{stroke:var(--diph-color-3)}.vowel-chart__glide--4 .vowel-chart__glide-line{stroke:var(--diph-color-4)}.vowel-chart__arrowhead--0{fill:var(--diph-color-0)}.vowel-chart__arrowhead--1{fill:var(--diph-color-1)}.vowel-chart__arrowhead--2{fill:var(--diph-color-2)}.vowel-chart__arrowhead--3{fill:var(--diph-color-3)}.vowel-chart__arrowhead--4{fill:var(--diph-color-4)}.vowel-chart__yaxis-label{position:absolute;left:-3.25rem;width:2.875rem;transform:translateY(-50%);text-align:right;font-size:.75rem;color:var(--color-text-secondary)}.vowel-chart__xaxis-label{position:absolute;top:calc(100% + .5rem);transform:translate(-50%);font-size:.75rem;color:var(--color-text-secondary);white-space:nowrap}.vowel-chart__anchor{position:absolute;transform:translate(-50%,-50%);pointer-events:auto}.vowel-chart__anchor:has(.phoneme-popover--open){z-index:1000}.vowel-chart__dot{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;border:2px solid var(--color-accent);font-family:var(--font-ipa);font-size:1rem;line-height:1;color:var(--color-text-primary);cursor:pointer;transition:transform .1s ease,background-color .15s ease}.vowel-chart__dot:hover,.vowel-chart__dot:focus-visible{transform:scale(1.1)}.vowel-chart__dot--rounded{background:var(--color-accent-subtle)}.vowel-chart__dot--unrounded{background:var(--color-bg-elevated)}.vowel-chart__dot--diphthong{width:2rem;height:2rem;font-size:.9375rem;border-style:dashed;background:var(--color-bg-elevated)}.vowel-chart__dot--diphthong-0{border-color:var(--diph-color-0);background:color-mix(in srgb,var(--diph-color-0) 16%,var(--color-bg-elevated))}.vowel-chart__dot--diphthong-1{border-color:var(--diph-color-1);background:color-mix(in srgb,var(--diph-color-1) 16%,var(--color-bg-elevated))}.vowel-chart__dot--diphthong-2{border-color:var(--diph-color-2);background:color-mix(in srgb,var(--diph-color-2) 16%,var(--color-bg-elevated))}.vowel-chart__dot--diphthong-3{border-color:var(--diph-color-3);background:color-mix(in srgb,var(--diph-color-3) 16%,var(--color-bg-elevated))}.vowel-chart__dot--diphthong-4{border-color:var(--diph-color-4);background:color-mix(in srgb,var(--diph-color-4) 16%,var(--color-bg-elevated))}.vowel-chart__onset-marker{display:flex;align-items:center;justify-content:center;width:1.375rem;height:1.375rem;border-radius:50%;border:1.5px dashed var(--color-text-muted);background:transparent;font-family:var(--font-ipa);font-size:.75rem;line-height:1;color:var(--color-text-muted);cursor:help}.vowel-chart__future-placeholder{max-width:640px;margin:0 auto}@media (max-width: 480px){.vowel-chart__frame{padding-left:2.25rem;padding-bottom:1.75rem}.vowel-chart__yaxis-label{left:-2.25rem;width:2rem;font-size:.625rem}.vowel-chart__xaxis-label{font-size:.625rem}.vowel-chart__dot{width:1.875rem;height:1.875rem;font-size:.875rem}.vowel-chart__dot--diphthong{width:1.625rem;height:1.625rem;font-size:.75rem}.vowel-chart__onset-marker{width:1.125rem;height:1.125rem;font-size:.625rem}}@media (prefers-color-scheme: dark){.vowel-chart__dot--unrounded,.vowel-chart__legend-swatch--unrounded{background:var(--color-bg)}}.header-hover{position:relative;display:inline-flex;align-items:center;cursor:help}.header-hover__label{pointer-events:none}.header-hover:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}.header-hover__card{visibility:hidden;opacity:0;pointer-events:none;position:absolute;z-index:200;max-width:min(15rem,90vw);width:max-content;background:#1e293b;color:#f1f5f9;border-radius:8px;padding:8px 10px;font-family:var(--font-sans, system-ui, sans-serif);font-size:.75rem;font-weight:400;line-height:1.45;text-align:left;text-transform:none;letter-spacing:normal;white-space:normal;filter:drop-shadow(0 4px 10px rgb(0 0 0 / .35));transition:opacity .15s ease,visibility .15s ease,transform .15s ease}.header-hover:hover .header-hover__card,.header-hover:focus .header-hover__card,.header-hover:focus-within .header-hover__card{visibility:visible;opacity:1;pointer-events:auto}.header-hover--below .header-hover__card{top:calc(100% + 6px);left:50%;transform:translate(-50%) translateY(4px)}.header-hover--below:hover .header-hover__card,.header-hover--below:focus .header-hover__card,.header-hover--below:focus-within .header-hover__card{transform:translate(-50%) translateY(0)}.header-hover--right .header-hover__card{top:50%;left:calc(100% + 6px);transform:translateY(-50%) translate(-4px)}.header-hover--right:hover .header-hover__card,.header-hover--right:focus .header-hover__card,.header-hover--right:focus-within .header-hover__card{transform:translateY(-50%) translate(0)}.header-hover__text{display:block}.header-hover__diagram{display:block;margin:6px auto 0;background:#f8fafc;border-radius:6px;padding:4px}.ipa-reference>.example-audio-toggle{margin-bottom:var(--space-6)}.ipa-reference__section{margin-bottom:var(--space-10)}.ipa-reference__heading{margin-bottom:var(--space-2)}.ipa-reference__subheading{margin:var(--space-6) 0 var(--space-2);font-size:1rem;color:var(--color-text-secondary)}.ipa-reference__hint{max-width:65ch;margin-bottom:var(--space-4);color:var(--color-text-secondary);font-size:.9375rem;line-height:1.5}.ipa-reference__legend{display:flex;gap:var(--space-4);margin-bottom:var(--space-4);font-size:.8125rem;color:var(--color-text-secondary)}.ipa-reference__legend-item{display:inline-flex;align-items:center;gap:var(--space-2)}.ipa-reference__legend-swatch{display:inline-block;width:.625rem;height:.625rem;border-radius:50%}.ipa-reference__legend-swatch--voiceless{background:var(--color-border)}.ipa-reference__legend-swatch--voiced{background:var(--color-accent)}.ipa-grid{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-lg)}.ipa-grid__row{display:flex;border-bottom:1px solid var(--color-border-subtle)}.ipa-grid__row:last-child{border-bottom:none}.ipa-grid__row--header{background:var(--color-bg-surface)}.ipa-grid__row-header,.ipa-grid__col-header{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;padding:var(--space-2) var(--space-1);font-size:.75rem;font-weight:600;color:var(--color-text-secondary);text-align:center;word-break:break-word;hyphens:auto}.ipa-grid__row-header{flex:0 0 4.5rem;justify-content:flex-start;background:var(--color-bg-surface);border-right:1px solid var(--color-border-subtle)}.ipa-grid__row-header--corner{background:var(--color-bg-surface)}.ipa-grid__col-header{border-left:1px solid var(--color-border-subtle)}.ipa-grid__col-header:first-of-type{border-left:none}.ipa-grid__cell{flex:1 1 0;min-width:0;min-height:3.25rem;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-1);border-left:1px solid var(--color-border-subtle);transition:background-color .15s ease,box-shadow .15s ease}.ipa-grid__cell--empty{background:var(--color-bg-surface)}.ipa-grid__cell--active{background:var(--color-accent-subtle);box-shadow:inset 0 0 0 2px var(--color-accent)}.ipa-grid__cell--neighbor:not(.ipa-grid__cell--active){box-shadow:inset 0 0 0 1px var(--color-accent)}.ipa-reference__anchor{display:inline-flex}.ipa-reference__chip{font-family:var(--font-ipa);font-size:clamp(.9375rem,2.6vw,1.25rem);line-height:1;min-width:2rem;padding:var(--space-2) var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-elevated);color:var(--color-text-primary);cursor:pointer;transition:transform .1s ease,background-color .15s ease,border-color .15s ease}.ipa-reference__chip:hover,.ipa-reference__chip:focus-visible{background:var(--color-accent-subtle);border-color:var(--color-accent);transform:translateY(-1px)}.ipa-reference__chip--voiceless{box-shadow:inset 0 -3px 0 var(--color-border)}.ipa-reference__chip--voiced{box-shadow:inset 0 -3px 0 var(--color-accent)}.ipa-reference__chip--vowel{font-size:1.375rem;min-width:2.5rem}.ipa-reference__vowel-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}.ipa-reference__vowel-chart-link{font-weight:600;color:var(--color-accent)}@media (max-width: 640px){.ipa-grid__row-header{flex-basis:3.25rem;font-size:.6875rem;padding:var(--space-1)}.ipa-grid__col-header{font-size:.625rem;padding:var(--space-1) 2px}.ipa-reference__chip{min-width:1.75rem;padding:var(--space-1) 6px}.ipa-reference__chip--vowel{min-width:2rem}}.tts-selftest{margin-top:var(--space-8);padding:var(--space-4);background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-4)}.tts-selftest__title{font-size:1rem}.tts-selftest__status{font-size:.875rem;color:var(--color-text-secondary)}.tts-selftest__group{display:flex;flex-direction:column;gap:var(--space-3)}.tts-selftest__button{align-self:flex-start;padding:var(--space-2) var(--space-4);font-size:.875rem;font-weight:600;color:#fff;background-color:var(--color-accent);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast)}.tts-selftest__button:hover:not(:disabled){background-color:var(--color-accent-hover)}.tts-selftest__button:disabled{cursor:not-allowed;opacity:.5}.tts-selftest__grid{display:flex;flex-wrap:wrap;gap:var(--space-2)}.tts-selftest__chip{display:inline-flex;align-items:center;gap:.15em;padding:var(--space-1) var(--space-2);font-family:var(--font-ipa);font-size:.875rem;background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:border-color var(--transition-fast),background-color var(--transition-fast)}.tts-selftest__chip--clickable{color:inherit;appearance:none;cursor:pointer}.tts-selftest__chip--clickable:hover:not(:disabled){border-color:var(--color-accent)}.tts-selftest__chip--clickable:disabled{cursor:not-allowed;opacity:.6}.tts-selftest__chip--active{border-color:var(--color-accent);background-color:var(--color-accent-subtle)}.tts-selftest__chip--piper{border-color:var(--color-score-excellent)}.tts-selftest__chip--fallback{border-color:var(--color-score-fair)}.tts-selftest__chip-mark{font-family:var(--font-sans)}.ablab{padding-top:var(--space-4);border-top:1px solid var(--color-border)}.ablab__title{font-size:1rem}.ablab__description{font-size:.8125rem;color:var(--color-text-secondary);max-width:60ch}.ablab__row{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-2) 0;border-bottom:1px solid var(--color-border)}.ablab__row:last-child{border-bottom:none}.ablab__row-header{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2)}.ablab__row-word{font-weight:600}.ablab__row-ipa{font-family:var(--font-ipa);color:var(--color-text-secondary)}.ablab__row-phonemes{font-family:var(--font-mono);font-size:.75rem;color:var(--color-text-muted)}.ablab__row-buttons{display:flex;flex-wrap:wrap;gap:var(--space-2)}.ablab__button{padding:var(--space-1) var(--space-3);font-size:.8125rem;font-weight:600;color:#fff;background-color:var(--color-accent);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast)}.ablab__button:hover:not(:disabled){background-color:var(--color-accent-hover)}.ablab__button:disabled{cursor:not-allowed;opacity:.5}.ablab__problem-words{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-border)}.ablab__problem-words-controls{display:flex;flex-wrap:wrap;gap:var(--space-2)}.ablab__problem-words-display{font-family:var(--font-ipa);font-size:.8125rem;color:var(--color-text-secondary)}.ablab__custom{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-2)}.ablab__custom-title{font-size:.875rem}.ablab__custom-inputs{display:flex;flex-wrap:wrap;gap:var(--space-3)}.ablab__custom-label{display:flex;flex-direction:column;gap:var(--space-1);font-size:.75rem;color:var(--color-text-secondary)}.ablab__custom-input{padding:var(--space-1) var(--space-2);font-family:var(--font-ipa);font-size:.875rem;background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary)}.earcal{margin-top:var(--space-8);padding:var(--space-4);background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-3)}.earcal__title{font-size:1rem}.earcal__description{font-size:.8125rem;color:var(--color-text-secondary);max-width:60ch}.earcal__seed-row{display:flex;align-items:center;gap:var(--space-3)}.earcal__seed{font-family:var(--font-mono);font-size:.8125rem;color:var(--color-text-secondary)}.earcal__button{padding:var(--space-1) var(--space-3);font-size:.8125rem;font-weight:600;color:#fff;background-color:var(--color-accent);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast);align-self:flex-start}.earcal__button:hover:not(:disabled){background-color:var(--color-accent-hover)}.earcal__button:disabled{cursor:not-allowed;opacity:.5}.earcal__button--play{font-size:1rem}.earcal__error{font-size:.8125rem;color:var(--color-score-poor)}.earcal__status{font-size:.8125rem;color:var(--color-text-secondary)}.earcal__session{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}.earcal__progress{font-size:.875rem;font-weight:600}.earcal__word{font-size:2.25rem;font-weight:700}.earcal__note-row{display:flex;width:100%}.earcal__note-input{width:100%;max-width:40ch;padding:var(--space-1) var(--space-2);font-size:.8125rem;background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary)}.earcal__verdicts{display:flex;flex-wrap:wrap;gap:var(--space-2)}.earcal__verdict-button{padding:var(--space-1) var(--space-3);font-size:.8125rem;font-weight:600;color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast)}.earcal__verdict-button:hover:not(:disabled){filter:brightness(1.1)}.earcal__verdict-button:disabled{cursor:not-allowed;opacity:.5}.earcal__verdict-button--excellent{background-color:var(--color-score-excellent)}.earcal__verdict-button--fine{background-color:var(--color-score-good)}.earcal__verdict-button--off{background-color:var(--color-score-fair)}.earcal__verdict-button--bad{background-color:var(--color-score-poor)}.earcal__reveal{font-family:var(--font-ipa);font-size:.875rem;color:var(--color-text-secondary)}.earcal__results{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}.earcal__done{font-size:.875rem;font-weight:600}.earcal__tally{display:flex;flex-direction:column;gap:var(--space-1);font-size:.8125rem;color:var(--color-text-secondary);padding-left:var(--space-4)}.earcal__entries{display:flex;flex-direction:column;gap:var(--space-1);font-size:.8125rem;color:var(--color-text-secondary);padding-left:var(--space-4);max-width:60ch}.earcal__copy-status{font-size:.8125rem;color:var(--color-text-secondary)}.stress-ab{margin-top:var(--space-8);padding:var(--space-4);background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-3)}.stress-ab__title{font-size:1rem}.stress-ab__description{font-size:.8125rem;color:var(--color-text-secondary);max-width:60ch}.stress-ab__error{font-size:.8125rem;color:var(--color-score-poor)}.stress-ab__row{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-2) 0;border-bottom:1px solid var(--color-border)}.stress-ab__row:last-child{border-bottom:none}.stress-ab__row-header{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2)}.stress-ab__row-word{font-weight:600}.stress-ab__row-ipa{font-family:var(--font-ipa);color:var(--color-text-secondary)}.stress-ab__row-buttons{display:flex;flex-wrap:wrap;gap:var(--space-2)}.stress-ab__button{padding:var(--space-1) var(--space-3);font-size:.8125rem;font-weight:600;color:#fff;background-color:var(--color-accent);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast)}.stress-ab__button:hover:not(:disabled){background-color:var(--color-accent-hover)}.stress-ab__button:disabled{cursor:not-allowed;opacity:.5}.stress-ab__custom{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-2);padding-top:var(--space-3);border-top:1px solid var(--color-border)}.stress-ab__custom-title{font-size:.875rem}.stress-ab__custom-inputs{display:flex;flex-wrap:wrap;gap:var(--space-3)}.stress-ab__custom-label{display:flex;flex-direction:column;gap:var(--space-1);font-size:.75rem;color:var(--color-text-secondary)}.stress-ab__custom-input{padding:var(--space-1) var(--space-2);font-family:var(--font-ipa);font-size:.875rem;background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary)}.stress-ab__custom-hint{font-size:.75rem;font-style:italic;color:var(--color-text-secondary)}.vowel-lab{margin-top:var(--space-8);padding:var(--space-4);background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-3)}.vowel-lab__title{font-size:1rem}.vowel-lab__description{font-size:.8125rem;color:var(--color-text-secondary);max-width:60ch}.vowel-lab__picker{display:flex;align-items:center;gap:var(--space-2)}.vowel-lab__picker-label{font-size:.8125rem;color:var(--color-text-secondary)}.vowel-lab__picker-select{padding:var(--space-1) var(--space-2);font-family:var(--font-ipa);font-size:.875rem;background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary)}.vowel-lab__row{display:flex;flex-direction:column;gap:var(--space-2)}.vowel-lab__row-header{display:flex;align-items:baseline;gap:var(--space-2)}.vowel-lab__row-symbol{font-family:var(--font-ipa);font-size:1.25rem;font-weight:600}.vowel-lab__row-buttons{display:flex;flex-wrap:wrap;gap:var(--space-2)}.vowel-lab__button{padding:var(--space-1) var(--space-3);font-size:.8125rem;font-weight:600;color:#fff;background-color:var(--color-accent);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast)}.vowel-lab__button:hover:not(:disabled){background-color:var(--color-accent-hover)}.vowel-lab__button:disabled{cursor:not-allowed;opacity:.5}.vowel-lab__row-params{display:flex;flex-direction:column;gap:var(--space-1);margin:0;font-size:.75rem}.vowel-lab__row-param{display:flex;gap:var(--space-2)}.vowel-lab__row-param dt{font-weight:600;color:var(--color-text-secondary)}.vowel-lab__row-param dd{margin:0;color:var(--color-text-secondary)}.vowel-lab__row-param code{font-family:var(--font-mono);color:var(--color-text-muted)}.vowel-lab__verdict{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--color-border)}.vowel-lab__note-label{font-size:.75rem;color:var(--color-text-secondary)}.vowel-lab__note-input{width:100%;max-width:40ch;padding:var(--space-1) var(--space-2);font-size:.8125rem;background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary)}.vowel-lab__winners{display:flex;flex-wrap:wrap;gap:var(--space-2)}.vowel-lab__winner-button{padding:var(--space-1) var(--space-3);font-size:.8125rem;font-weight:600;color:var(--color-text-primary);background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast)}.vowel-lab__winner-button:hover{background-color:var(--color-accent-hover);color:#fff}.vowel-lab__winner-button--selected{background-color:var(--color-accent);border-color:var(--color-accent);color:#fff}.vowel-lab__verdict-status{font-size:.75rem;color:var(--color-text-secondary)}.vowel-lab__summary{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);padding-top:var(--space-3);border-top:1px solid var(--color-border)}.vowel-lab__progress{font-size:.875rem;font-weight:600}.vowel-lab__tally{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:0;padding:0;list-style:none;font-size:.8125rem;color:var(--color-text-secondary)}.vowel-lab__summary-actions{display:flex;align-items:center;gap:var(--space-2)}.vowel-lab__button--danger{background-color:var(--color-score-poor)}.vowel-lab__copy-status{font-size:.8125rem;color:var(--color-text-secondary)}.voices-intro{max-width:60ch;margin-bottom:var(--space-6);color:var(--color-text-secondary);font-size:.9375rem}.voices-intro code{font-family:var(--font-ipa)}.voices-table{width:100%;border-collapse:collapse;margin-bottom:var(--space-8)}.voices-table th{padding:var(--space-2) var(--space-3);text-align:left;font-size:.8125rem;color:var(--color-text-secondary);border-bottom:2px solid var(--color-border)}.voices-table td{padding:var(--space-2) var(--space-3);vertical-align:middle;border-bottom:1px solid var(--color-border)}.voices-table audio{height:2rem;max-width:14rem}.voices-table__word{display:flex;flex-direction:column;gap:.1em}.voices-table__word-text{font-weight:600}.voices-table__ipa{font-family:var(--font-ipa);font-size:.8125rem;color:var(--color-text-secondary)}.voices-live-button{padding:var(--space-1) var(--space-3);font-size:.8125rem;font-weight:600;color:#fff;background-color:var(--color-accent);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast)}.voices-live-button:hover:not(:disabled){background-color:var(--color-accent-hover)}.voices-phonemes{padding-top:var(--space-4);border-top:1px solid var(--color-border)}.voices-phonemes__title{font-size:1rem}.voices-phonemes__description{max-width:60ch;margin-bottom:var(--space-4);color:var(--color-text-secondary);font-size:.875rem}.voices-phonemes__grid{display:flex;flex-wrap:wrap;gap:var(--space-3)}.voices-phonemes__item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2);background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}.voices-live-button--phoneme{font-family:var(--font-ipa);min-width:2.5rem}.voices-phonemes__item audio{height:2rem;max-width:8rem}.app-shell{display:grid;min-height:100dvh;grid-template-rows:1fr var(--nav-height-bottom);grid-template-areas:"main" "nav"}@media (min-width: 640px){.app-shell{grid-template-rows:var(--nav-height-top) 1fr;grid-template-areas:"nav" "main"}}.app-main{grid-area:main;overflow-y:auto;padding:var(--content-padding);padding-bottom:calc(var(--content-padding) + env(safe-area-inset-bottom))}.nav-bar{grid-area:nav;display:flex;align-items:center;background-color:var(--color-bg-elevated);border-top:1px solid var(--color-border);padding:0 var(--space-2);position:sticky;bottom:0;z-index:100;justify-content:space-around;padding-bottom:env(safe-area-inset-bottom)}@media (min-width: 640px){.nav-bar{border-top:none;border-bottom:1px solid var(--color-border);position:sticky;top:0;bottom:unset;justify-content:flex-start;gap:var(--space-2);padding:0 var(--space-6);box-shadow:var(--shadow-sm)}}.nav-brand{display:none}@media (min-width: 640px){.nav-brand{display:flex;align-items:center;margin-right:var(--space-6);flex-shrink:0}}.nav-brand-link{font-weight:700;font-size:1.1rem;color:var(--color-accent);letter-spacing:-.02em}.nav-brand-link:hover{color:var(--color-accent-hover)}.nav-items{display:contents}@media (min-width: 640px){.nav-items{display:flex;align-items:center;gap:var(--space-1);flex:1}}.nav-item{flex:1}@media (min-width: 640px){.nav-item{flex:unset}}.nav-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-2) var(--space-1);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:.75rem;font-weight:500;text-decoration:none;transition:color var(--transition-fast),background-color var(--transition-fast);width:100%;min-height:44px}.nav-link:hover{color:var(--color-text-primary);background-color:var(--color-bg-surface)}.nav-link--active{color:var(--color-accent)}.nav-link--active:hover{color:var(--color-accent-hover);background-color:var(--color-accent-subtle)}@media (min-width: 640px){.nav-link{flex-direction:row;font-size:.875rem;padding:var(--space-2) var(--space-3);width:auto;min-height:unset}}.nav-link-label{display:none}.nav-link-short{display:block}@media (min-width: 640px){.nav-link-label{display:block}.nav-link-short{display:none}}.page{max-width:var(--content-max-width);margin:0 auto;padding-top:var(--space-8)}.page-header{margin-bottom:var(--space-8)}.page-title{margin-bottom:var(--space-2)}.page-subtitle{color:var(--color-text-secondary);font-size:.875rem}.page-placeholder{padding:var(--space-8);border:2px dashed var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-muted);text-align:center}.page-placeholder p{max-width:none}.practice-word-section{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-6)}.practice-record-section{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-4) 0}.practice-hint{color:var(--color-text-secondary);font-size:.9375rem;text-align:center}.practice-result-section{display:flex;flex-direction:column;align-items:center;padding:var(--space-4) 0 var(--space-8);width:100%}.practice-infer-error{color:#dc2626;font-size:.875rem;text-align:center;padding:var(--space-2) var(--space-4);background-color:#fef2f2;border:1px solid #fca5a5;border-radius:var(--radius-md);margin-bottom:var(--space-4)}.practice-replay-row{display:flex;justify-content:center;margin-top:var(--space-3)}.practice-replay-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:.875rem;font-weight:500;color:var(--color-text-secondary);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.practice-replay-btn:hover:not(:disabled){background-color:var(--color-accent);color:#fff;border-color:var(--color-accent)}.practice-replay-btn:disabled{opacity:.55;cursor:default}.practice-dialect-label{font-size:.8125rem;color:var(--color-text-muted);text-align:center;margin-top:var(--space-2)}.practice-dialect-label strong{color:var(--color-text-secondary)}.practice-word-guesses{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-bg-surface);border-radius:var(--radius-md);border:1px solid var(--color-border)}.practice-word-guesses__label{font-size:.8125rem;font-weight:600;color:var(--color-text-muted)}.practice-word-guess{font-size:.875rem;font-family:var(--font-sans);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);background:var(--color-bg-elevated);border:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast)}.practice-word-guess:hover{background:var(--color-accent-subtle);border-color:var(--color-accent)}.practice-word-guess--top{font-weight:600;background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.practice-word-guess__exact{color:#15803d;font-weight:700}:root{--color-bg: #ffffff;--color-bg-surface: #f8f9fa;--color-bg-elevated: #ffffff;--color-text-primary: #111827;--color-text-secondary: #6b7280;--color-text-muted: #9ca3af;--color-border: #e5e7eb;--color-border-subtle: #f3f4f6;--color-accent: #4f46e5;--color-accent-hover: #4338ca;--color-accent-subtle: #eef2ff;--color-score-excellent: #16a34a;--color-score-good: #ca8a04;--color-score-fair: #ea580c;--color-score-poor: #dc2626;--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;--font-ipa: "Noto Sans", "DejaVu Sans", "Charis SIL", serif;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--nav-height-top: 3.5rem;--nav-height-bottom: 4rem;--content-max-width: 900px;--content-padding: var(--space-4);--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--shadow-sm: 0 1px 2px rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .07), 0 2px 4px -1px rgb(0 0 0 / .05);--transition-fast: .1s ease;--transition-base: .15s ease}@media (prefers-color-scheme: dark){:root{--color-bg: #0f172a;--color-bg-surface: #1e293b;--color-bg-elevated: #1e293b;--color-text-primary: #f1f5f9;--color-text-secondary: #94a3b8;--color-text-muted: #64748b;--color-border: #334155;--color-border-subtle: #1e293b;--color-accent: #818cf8;--color-accent-hover: #a5b4fc;--color-accent-subtle: #1e1b4b}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}body{font-family:var(--font-sans);font-size:1rem;line-height:1.5;color:var(--color-text-primary);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}a{color:var(--color-accent);text-decoration:none}a:hover{color:var(--color-accent-hover)}ul,ol{list-style:none}img,svg{display:block;max-width:100%}h1{font-size:1.5rem;font-weight:700;line-height:1.2;letter-spacing:-.02em}h2{font-size:1.25rem;font-weight:600;line-height:1.3}h3{font-size:1rem;font-weight:600;line-height:1.4}p{max-width:65ch}