:root{--bg-primary: #f8f9fa;--bg-card: #ffffff;--bg-hover: #f7fafc;--bg-input: #ffffff;--bg-button: #f5f5f5;--bg-button-hover: #eee;--text-primary: #213547;--text-heading: #1a365d;--text-secondary: #666;--text-muted: #999;--text-placeholder: #999;--accent-blue: #4a90d9;--accent-blue-light: #ebf8ff;--accent-blue-hover: #63b3ed;--accent-green: #38a169;--accent-green-hover: #2f855a;--accent-green-light: #f0fff4;--accent-green-dark: #c6f6d5;--accent-red: #e53e3e;--accent-red-light: #fff5f5;--border-light: #ddd;--border-medium: #e2e8f0;--border-input: #ddd;--border-input-focus: #4a90d9;--shadow-card: 0 2px 8px rgba(0, 0, 0, .08);--shadow-popup: 0 4px 12px rgba(0, 0, 0, .15);--shadow-settings: 0 8px 32px rgba(0, 0, 0, .2);--shadow-sticky: 0 -2px 8px rgba(0, 0, 0, .1);--ctrl-btn-bg: #f5f5f5;--ctrl-btn-border: #ddd;--ctrl-btn-color: #555;--ctrl-btn-hover-bg: #eee;--ctrl-btn-hover-border: #ccc;--ctrl-btn-hover-color: #333;--play-btn-bg: #f0fff4;--play-btn-border: #38a169;--play-btn-color: #38a169;--play-btn-hover-bg: #c6f6d5;--toggle-track-bg: #4a90d9;--toggle-track-off-bg: #cbd5e0;--toggle-thumb-bg: #ffffff;--phoneme-hover-bg: rgba(74, 144, 217, .15);--phoneme-playing-bg: rgba(74, 144, 217, .4);--phoneme-current-bg: rgba(74, 144, 217, .25);--tooltip-grapheme: #2d3748;--tooltip-phoneme: #2b6cb0;--tooltip-abc: #718096;--tooltip-meta: #718096;--tooltip-viseme: #4a90d9;--tooltip-source: #a0aec0;--tooltip-border: #e2e8f0;--variant-hover-bg: #f7fafc;--variant-selected-bg: #ebf8ff;--variant-label: #666;--variant-ipa: #1a365d;--say-btn-disabled-bg: #a0aec0;--backdrop-bg: rgba(0, 0, 0, .3);--nav-bg: var(--bg-card);--nav-border: var(--border-light);--nav-btn-color: var(--text-secondary);--nav-btn-hover-bg: var(--bg-hover);--nav-btn-active-color: var(--accent-blue);--decoration-opacity: 0}[data-theme=original-dark]{--bg-primary: #1a202c;--bg-card: #2d3748;--bg-hover: #374151;--bg-input: #2d3748;--bg-button: #374151;--bg-button-hover: #4a5568;--text-primary: #e2e8f0;--text-heading: #90cdf4;--text-secondary: #a0aec0;--text-muted: #718096;--text-placeholder: #718096;--accent-blue: #63b3ed;--accent-blue-light: #2a4365;--accent-blue-hover: #90cdf4;--accent-green: #48bb78;--accent-green-hover: #38a169;--accent-green-light: #1c4532;--accent-green-dark: #276749;--accent-red: #fc8181;--accent-red-light: #742a2a;--border-light: #4a5568;--border-medium: #4a5568;--border-input: #4a5568;--border-input-focus: #63b3ed;--shadow-card: 0 2px 8px rgba(0, 0, 0, .3);--shadow-popup: 0 4px 12px rgba(0, 0, 0, .4);--shadow-settings: 0 8px 32px rgba(0, 0, 0, .5);--shadow-sticky: 0 -2px 8px rgba(0, 0, 0, .3);--ctrl-btn-bg: #374151;--ctrl-btn-border: #4a5568;--ctrl-btn-color: #a0aec0;--ctrl-btn-hover-bg: #4a5568;--ctrl-btn-hover-border: #718096;--ctrl-btn-hover-color: #e2e8f0;--play-btn-bg: #1c4532;--play-btn-border: #68d391;--play-btn-color: #68d391;--play-btn-hover-bg: #276749;--toggle-track-bg: #63b3ed;--toggle-track-off-bg: #4a5568;--phoneme-hover-bg: rgba(99, 179, 237, .2);--phoneme-playing-bg: rgba(99, 179, 237, .5);--phoneme-current-bg: rgba(99, 179, 237, .3);--tooltip-grapheme: #e2e8f0;--tooltip-phoneme: #90cdf4;--tooltip-abc: #a0aec0;--tooltip-meta: #a0aec0;--tooltip-viseme: #63b3ed;--tooltip-source: #718096;--tooltip-border: #4a5568;--variant-hover-bg: #374151;--variant-selected-bg: #2a4365;--variant-label: #a0aec0;--variant-ipa: #90cdf4;--say-btn-disabled-bg: #4a5568;--backdrop-bg: rgba(0, 0, 0, .5)}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;font-weight:400;color-scheme:light dark;color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;touch-action:manipulation}body{margin:0;min-height:100vh;display:flex;flex-direction:column}body.modal-open{overflow:hidden}#app{max-width:600px;margin:0 auto;padding:.5rem 2rem 2rem;width:100%;flex:1}.viseme-container{flex-shrink:0;overflow:hidden;border-radius:8px}.viseme-canvas{display:block;width:150px;height:auto}.viseme-container[data-face=girl]{width:120px;height:calc(150px * 495 / 362 * .8)}.viseme-container[data-face=girl] .viseme-canvas{transform:translate(-10%,-10%) scale(1)}.viseme-container[data-face=man]{width:120px;height:calc(150px * 495 / 362 * .8)}.viseme-container[data-face=man] .viseme-canvas{transform:translate(-10%,-3%) scale(1)}.site-header{display:flex;justify-content:space-between;align-items:center;height:48px;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-light)}@media(max-width:600px){.site-header{height:56px}}.site-title{font-size:15px;font-weight:500;color:var(--text-heading)}.site-header-controls{display:flex;align-items:center;gap:.75rem}.search-box{display:flex;gap:0;margin-bottom:1rem;position:relative}.search-box-input-wrapper{flex:1;position:relative;display:flex}#word-input{flex:1;padding:.75rem 2rem .75rem 1rem;font-size:1.1rem;border:2px solid var(--border-input);border-radius:8px 0 0 8px;border-right:none;outline:none;transition:border-color .2s;background:var(--bg-input);color:var(--text-primary);height:48px;box-sizing:border-box}#word-input:focus{border-color:var(--border-input-focus);z-index:1}.search-box:focus-within .say-btn:disabled{border-color:var(--border-input-focus)}#word-input::placeholder{color:var(--text-placeholder)}.clear-btn{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);z-index:10;width:20px;height:20px;padding:0;border:none;background:var(--text-muted);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .15s}.clear-btn:hover{background:var(--text-secondary)}.clear-btn.hidden{display:none}.say-btn{position:relative;padding:0 1.25rem;font-size:1rem;font-weight:600;color:var(--text-secondary);background:var(--bg-button);border:2px solid var(--border-input);border-left:none;border-radius:0 8px 8px 0;cursor:not-allowed;transition:all .15s;white-space:nowrap;min-width:64px;height:48px;box-sizing:border-box}.say-btn:not(:disabled){background:var(--accent-green);color:#fff;border:2px solid var(--accent-green);border-left:none;cursor:pointer}.say-btn:hover:not(:disabled){background:var(--accent-green-hover)}.say-btn.loading{color:transparent;background:var(--accent-blue);border-color:var(--accent-blue)}.say-btn.loading:after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.say-btn.playing{background:var(--accent-red)}.suggestions{text-align:center;padding:.5rem;font-size:.85rem;color:var(--text-secondary)}.suggestions.hidden{display:none}.suggestions-label{color:var(--text-muted)}.suggestion-words{margin-left:.25rem}.suggestion-word{color:var(--accent-blue);cursor:pointer;padding:.1rem .3rem;border-radius:4px;transition:background-color .15s}.suggestion-word:hover{background-color:var(--accent-blue-light);color:var(--accent-blue-hover)}.result{display:flex;align-items:flex-start;gap:1rem;background:var(--bg-card);border-radius:12px;padding:1rem 1.25rem;box-shadow:var(--shadow-card);position:relative}.result.hidden{display:none!important}.result-content{flex:1;min-width:0}.pronunciation-display{display:flex;align-items:flex-start;gap:.5rem;container-type:inline-size}.ipa-text{flex:1;font-size:1.4rem;font-family:Doulos SIL,Charis SIL,Gentium,serif;color:var(--text-heading);line-height:1.4}.ipa-espeak{font-weight:300;opacity:.7}.ipa-espeak b{font-weight:600}.syllable-space{display:inline-block;width:.075em}.phoneme{cursor:default;border-radius:2px;transition:background .1s}.phoneme:hover{background:var(--phoneme-hover-bg)}.phoneme.playing{background:var(--phoneme-playing-bg)}.phoneme.current{background:var(--phoneme-current-bg);border-radius:3px}.phoneme-tooltip{position:fixed;z-index:1000;background:var(--bg-card);border:1px solid var(--tooltip-border);border-radius:8px;padding:8px 12px;box-shadow:var(--shadow-popup);font-size:.9rem;pointer-events:none;max-width:280px}.tooltip-correspondence{display:flex;align-items:center;gap:6px;font-family:Doulos SIL,Charis SIL,serif}.tooltip-grapheme{color:var(--tooltip-grapheme);font-weight:600}.tooltip-arrow{color:var(--text-muted)}.tooltip-phoneme{color:var(--tooltip-phoneme);font-weight:500}.tooltip-abc{color:var(--tooltip-abc);font-size:.85em;margin-left:4px}.tooltip-abc:before{content:"("}.tooltip-abc:after{content:")"}.tooltip-meta{margin-top:4px;font-size:.8rem;color:var(--tooltip-meta)}.tooltip-viseme{margin-top:4px;font-size:.8rem;color:var(--tooltip-viseme);font-style:italic}.tooltip-detailed{margin-top:2px;font-size:.75rem;color:var(--tooltip-source)}.tooltip-source{margin-top:6px;padding-top:6px;border-top:1px solid var(--tooltip-border);font-size:.75rem;color:var(--tooltip-source);font-style:italic}.pronunciation-controls{display:flex;align-items:center;gap:.5rem;flex-shrink:0}@container (max-width: 280px){.pronunciation-controls{flex-direction:column;gap:.25rem}}.ctrl-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--ctrl-btn-bg);border:1px solid var(--ctrl-btn-border);border-radius:6px;cursor:pointer;color:var(--ctrl-btn-color);transition:all .15s;flex-shrink:0}.ctrl-btn:hover{background:var(--ctrl-btn-hover-bg);border-color:var(--ctrl-btn-hover-border);color:var(--ctrl-btn-hover-color)}.ctrl-btn:disabled{color:var(--text-muted);cursor:not-allowed;background:var(--bg-button)}.ctrl-btn.copied{color:var(--accent-green);border-color:var(--accent-green)}.play-btn{color:var(--play-btn-color);border-color:var(--play-btn-border);background:var(--play-btn-bg)}.play-btn:hover:not(:disabled){background:var(--play-btn-hover-bg)}.play-btn.loading{color:var(--accent-blue);border-color:var(--accent-blue);background:var(--accent-blue-light)}.play-btn.playing{color:var(--accent-red);border-color:var(--accent-red);background:var(--accent-red-light)}.mode-switch{display:flex;align-items:center;gap:.35rem}.mode-label{font-size:.75rem;font-weight:600;color:var(--text-muted);cursor:pointer;transition:color .15s;user-select:none}.mode-label.selected{color:var(--text-heading)}.mode-toggle-track{position:relative;width:32px;height:18px;background:var(--toggle-track-bg);border:none;border-radius:9px;cursor:pointer;padding:0;transition:background .2s}.mode-toggle-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--toggle-thumb-bg);border-radius:50%;transition:transform .2s;box-shadow:0 1px 2px #0003}.mode-toggle-track[aria-checked=true] .mode-toggle-thumb{transform:translate(14px)}.phoneme-details{display:flex;align-items:center;gap:.75rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-medium);touch-action:manipulation}.phoneme-details.hidden{display:none}.phoneme-details-nav{display:flex;gap:.25rem;flex-shrink:0}.phoneme-nav-btn,.phoneme-play-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--ctrl-btn-bg);border:1px solid var(--ctrl-btn-border);border-radius:6px;cursor:pointer;color:var(--ctrl-btn-color);transition:all .15s}.phoneme-nav-btn:hover:not(:disabled),.phoneme-play-btn:hover{background:var(--ctrl-btn-hover-bg);border-color:var(--ctrl-btn-hover-border);color:var(--ctrl-btn-hover-color)}.phoneme-nav-btn:disabled{opacity:.4;cursor:not-allowed}.phoneme-play-btn{width:26px;height:26px;background:var(--play-btn-bg);border-color:var(--play-btn-border);color:var(--play-btn-color);margin-left:.5rem}.phoneme-play-btn:hover{background:var(--play-btn-hover-bg)}.phoneme-details-content{flex:1;min-width:0;text-align:center}.phoneme-details-main{display:flex;align-items:center;justify-content:center;gap:.35rem;font-family:Doulos SIL,Charis SIL,Gentium,serif;font-size:1.1rem}.phoneme-details-grapheme{color:var(--tooltip-grapheme);font-weight:600}.phoneme-details-arrow{color:var(--text-muted)}.phoneme-details-ipa{color:var(--tooltip-phoneme);font-weight:500}.phoneme-details-abc{color:var(--tooltip-abc);font-size:.9em}.phoneme-details-meta{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:.25rem;font-size:.8rem;color:var(--tooltip-meta)}.phoneme-details-category{color:var(--tooltip-meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phoneme-details-type{color:var(--tooltip-viseme);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phoneme-details-link{display:inline-block;margin-top:.35rem;font-size:.75rem;color:var(--accent-blue);text-decoration:none}.phoneme-details-link:hover{text-decoration:underline}.phoneme-details.sticky{position:fixed;bottom:0;left:0;right:0;margin:0;padding:.75rem 1rem;background:var(--bg-card);border-top:1px solid var(--border-medium);box-shadow:var(--shadow-sticky);z-index:100}body.phoneme-details-sticky{padding-bottom:80px}.voice-selector{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.5rem}.voice-selector label{font-size:.8rem;color:var(--text-muted)}.voice-selector select{font-size:.9rem;padding:.4rem 1.25rem;min-width:110px;border:1px solid var(--border-light);border-radius:6px;background:var(--bg-card);color:var(--text-primary);cursor:pointer;outline:none}.voice-selector select:focus{border-color:var(--border-input-focus)}.settings-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--ctrl-btn-bg);border:1px solid var(--ctrl-btn-border);border-radius:6px;cursor:pointer;color:var(--ctrl-btn-color);transition:all .15s}.settings-btn:hover{background:var(--ctrl-btn-hover-bg);border-color:var(--ctrl-btn-hover-border);color:var(--ctrl-btn-hover-color)}.settings-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:200;background:var(--bg-card);border-radius:12px;box-shadow:var(--shadow-settings);min-width:300px;max-width:400px}.settings-popup.hidden{display:none}.settings-popup-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--border-medium);font-weight:600;color:var(--text-heading)}.settings-close-btn{background:none;border:none;font-size:1.5rem;color:var(--text-muted);cursor:pointer;padding:0;line-height:1}.settings-close-btn:hover{color:var(--text-primary)}.settings-popup-content{padding:1rem 1.25rem}.settings-item{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}.settings-item:last-child{margin-bottom:0}.settings-item-label{flex:1}.settings-item-title{display:block;font-weight:500;color:var(--text-heading);margin-bottom:.25rem}.settings-item-desc{display:block;font-size:.8rem;color:var(--text-secondary)}.settings-toggle{display:flex;align-items:center;gap:.35rem}.settings-toggle-label{font-size:.75rem;font-weight:600;color:var(--text-muted);cursor:pointer;transition:color .15s;user-select:none}.settings-toggle-label.selected{color:var(--text-heading)}.mode-toggle-single{background:var(--toggle-track-off-bg)}.mode-toggle-single[aria-checked=true]{background:var(--toggle-track-bg)}.settings-backdrop{position:fixed;inset:0;background:var(--backdrop-bg);z-index:199}.settings-backdrop.hidden{display:none}.details-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:200;background:var(--bg-card);border-radius:12px;box-shadow:var(--shadow-settings);min-width:320px;max-width:450px;max-height:80vh;display:flex;flex-direction:column}.details-modal.hidden{display:none}.details-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--border-medium);font-weight:600;color:var(--text-heading);gap:.5rem}.details-modal-header>span{flex:1}.details-header-play-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--play-btn-bg);border:1px solid var(--play-btn-border);border-radius:6px;cursor:pointer;color:var(--play-btn-color);transition:all .15s;flex-shrink:0}.details-header-play-btn:hover{background:var(--play-btn-hover-bg)}.details-header-play-btn.playing{color:var(--accent-red);border-color:var(--accent-red);background:var(--accent-red-light)}.details-modal-content{padding:1rem 1.25rem;overflow-y:auto;flex:1}.details-word{margin-bottom:1.25rem}.details-word:last-child{margin-bottom:0}.details-separator{border:none;border-top:1px solid var(--border-light);margin:1rem 0}.details-word-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.details-play-btn{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-light);border-radius:4px;cursor:pointer;color:var(--text-muted);transition:all .15s;flex-shrink:0;padding:0;margin-left:auto}.details-play-btn:hover{color:var(--play-btn-color);border-color:var(--play-btn-border);background:var(--play-btn-bg)}.details-play-btn:active{transform:scale(.95)}.details-word-play-btn{width:22px;height:22px}.details-word-text{font-weight:600;color:var(--text-heading)}.details-word-ipa{font-family:var(--font-ipa);color:var(--text-secondary)}.details-breakdown{display:flex;flex-direction:column;gap:.25rem;margin-left:.5rem;padding-left:.75rem;border-left:2px solid var(--border-light)}.details-row{display:flex;align-items:center;gap:.5rem;padding:.2rem 0;font-size:.9rem}.details-row .details-phoneme-play-btn{margin-left:auto}.details-row.highlighted{background:var(--phoneme-playing-bg);border-radius:4px;padding-left:.5rem;padding-right:.5rem;margin-left:-.5rem;margin-right:-.5rem}.details-grapheme{font-weight:500;min-width:2.5rem;color:var(--text-primary)}.details-arrow{color:var(--text-muted)}.details-phoneme{font-family:var(--font-ipa);min-width:2.5rem;color:var(--text-heading)}.details-category{font-size:.75rem;padding:.1rem .4rem;border-radius:3px;text-transform:lowercase}.details-category.basic{background:#d4edda;color:#155724}.details-category.exception{background:#fff3cd;color:#856404}.details-category.oddity{background:#f8d7da;color:#721c24}.details-category.r-linking{background:#cce5ff;color:#004085}.details-variants{margin-top:.5rem;padding-top:.5rem;border-top:1px dashed var(--border-light)}.details-variants-title{font-size:.8rem;color:var(--text-muted);margin-bottom:.25rem}.details-variant-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding:.15rem 0}.details-variant-ipa{font-family:var(--font-ipa);color:var(--text-heading)}.details-variant-label{color:var(--text-secondary)}.details-variant-ipa:before{content:"•";margin-right:.35rem;color:var(--text-muted)}.build-info{text-align:center;font-size:12px;color:var(--text-muted);margin-top:1.5rem;padding-top:.75rem;border-top:1px solid var(--border-light)}.build-info.error{color:var(--accent-red);font-weight:500}@keyframes copyPulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}