@font-face{font-family:Gentium Plus;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/gentiumplus/v17/K317vCQm0XkX760hEOVh1w.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--color-background:#fafafa;--color-text:#1a1a1a;--color-text-muted:#6b7280;--color-accent:#1a1a1a;--color-primary:var(--color-text);--color-secondary:var(--color-text-muted);--color-tertiary:var(--color-text-muted);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-9:36px;--space-10:40px;--space-11:44px;--space-12:48px;--space-14:56px;--space-16:64px;--space-20:80px;--space-24:96px;--text-xs:clamp(11px, 2vw, 12px);--text-sm:clamp(13px, 2.5vw, 14px);--text-md:clamp(16px, 3vw, 16px);--text-lg:clamp(18px, 3.5vw, 20px);--text-xl:clamp(24px, 4.5vw, 28px);--text-2xl:clamp(32px, 6vw, 40px);--text-3xl:clamp(48px, 8vw, 56px);--text-4xl:clamp(64px, 10vw, 80px);--font-size-ipa:clamp(48px, 8vw, 120px);--font-size-ipa-secondary:clamp(14px, 3vw, 20px);--font-size-label:clamp(11px, 2vw, 13px);--font-ipa:"Gentium Plus", "Charis SIL", "Noto Serif", serif;--font-ui:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--radius-none:0;--radius-sm:4px;--radius-md:8px;--z-dropdown:100;--z-modal:200;--z-tooltip:300}.app{flex-direction:column;min-height:100vh;display:flex}.app-main{padding:var(--space-4) var(--space-6);flex-direction:column;flex:1;align-items:center;width:100%;max-width:800px;margin:0 auto;display:flex;position:relative}.input-container{align-items:center;gap:var(--space-12);flex-direction:column;flex:1;width:100%;min-height:0;display:flex}.input-container>.ipa-display{flex:1;justify-content:center;align-items:flex-start;width:100%;min-height:0;display:flex}.input-container>.input-surface-wrapper{justify-content:center;align-items:center;gap:var(--space-3);flex-direction:column;flex:1;width:100%;min-height:0;display:flex}.input-container>.transcribe-wrapper{flex:none;justify-content:center;align-items:center;width:100%;display:flex}.tabs-container{justify-content:center;gap:var(--space-4);display:flex}.tab-button{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);padding:var(--space-2) var(--space-8);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;font-weight:500;transition:all .2s}.tab-button:hover{color:var(--color-text)}.tab-button.active{color:var(--color-accent);border-bottom-color:var(--color-accent)}.error-message{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text);margin-top:var(--space-4)}.transcribe-button{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text);border:2px solid var(--color-text);border-radius:var(--radius-md);padding:var(--space-3) var(--space-8);cursor:pointer;background:0 0;min-height:44px;font-weight:400;transition:all .2s}.transcribe-button:hover{background:#0000000d}.transcribe-button:active{background:#0000001a}.recent-container{flex:1;width:100%;max-width:512px;min-height:0;overflow-y:auto}.sticky-bottom-container{z-index:100;background:var(--color-background);border-top:1px solid #0000001a;position:sticky;bottom:0;left:0;right:0}.sticky-row{height:56px;padding:0 var(--space-6);border-bottom:1px solid #0000001a;justify-content:center;align-items:center;display:flex}.sticky-row:last-child{border-bottom:none}.sticky-bottom-container.recent-mode .sticky-row:first-child{display:none}.global-nav{justify-content:center;gap:0;width:100%;height:100%;margin:0;padding:0;display:flex}.nav-tab{font-family:var(--font-ui);font-size:var(--text-md);text-transform:uppercase;letter-spacing:.05em;color:var(--color-secondary);cursor:pointer;background:0 0;border:none;flex:1;justify-content:center;align-items:center;min-width:0;height:100%;padding:0;font-weight:400;transition:all .2s;display:flex;position:relative}.nav-tab:not(:last-child):after{content:"";background:#0000001a;width:1px;position:absolute;top:-1px;bottom:-1px;right:0}.nav-tab:hover{color:var(--color-text)}.nav-tab.active{color:var(--color-text);font-weight:600}.app-footer-text{font-family:var(--font-ui);font-size:var(--text-md);color:var(--color-secondary);letter-spacing:.05em;text-transform:uppercase}@media (width<=480px){.ipa-text:before,.ipa-text:after{font-size:calc(var(--font-size-ipa) * .3);margin:0 2px}}.empty-message{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-secondary)}.section-title{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-secondary);margin-bottom:var(--space-8);text-transform:uppercase;letter-spacing:.05em;font-weight:400}.word{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text);flex:1;font-weight:400}@media (width<=480px){.word{font-size:var(--text-sm)}.ipa{font-size:var(--text-xs)}}.input-surface{justify-content:space-between;align-items:center;gap:var(--space-4);flex-direction:row;width:100%;max-width:512px;display:flex}.input-container{width:100%}.text-input-wrapper{flex:1;position:relative}.text-input{width:100%;font-family:var(--font-ui);font-size:var(--text-md);color:var(--color-text);padding:var(--space-3) var(--space-4);padding-right:calc(var(--space-4) + 32px);box-sizing:border-box;text-transform:uppercase;letter-spacing:.05em;background:0 0;border:none;outline:none}.text-input::placeholder{color:var(--color-secondary);opacity:.7;text-transform:uppercase;letter-spacing:.05em;font-style:normal}.input-form{align-items:center;gap:var(--space-4);flex-direction:row;width:100%;display:flex}.voice-toggle{width:44px;height:44px;color:var(--color-secondary);cursor:pointer;box-sizing:border-box;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:color .2s;display:flex}.voice-toggle:hover{color:var(--color-text)}.voice-toggle.recording{border-color:var(--color-text);background:#0000000d;animation:2s infinite pulse}.voice-toggle svg{stroke-width:2px;stroke:currentColor;width:20px;height:20px}.submit-btn{right:var(--space-4);width:32px;height:32px;color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;transition:color .2s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.submit-btn:hover{color:var(--color-text)}.submit-btn svg{stroke-width:2px;stroke:currentColor;width:16px;height:16px}.status-message,.error-message{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-secondary);text-align:center;margin-bottom:var(--space-3)}@keyframes pulse{0%{box-shadow:0 0 #1a1a1ab3}70%{box-shadow:0 0 0 12px #1a1a1a00}to{box-shadow:0 0 #1a1a1a00}}@media (width<=480px){.text-input{font-size:var(--text-md);padding:var(--space-3) var(--space-4)}.voice-toggle{width:44px;height:44px}}.ipa-display{width:100%;margin-bottom:var(--space-12);flex-direction:column;align-items:center;display:flex}.ipa-text{font-family:var(--font-ipa);font-size:var(--font-size-ipa);text-align:center;color:var(--color-text-muted);line-height:1.1}.ipa-text:not(:empty){color:var(--color-text)}.ipa-text:before,.ipa-text:after{content:"/";font-family:var(--font-ui);color:var(--color-text-muted);font-weight:400;font-size:calc(var(--font-size-ipa) * .35);margin:0 4px}@media (width<=480px){.ipa-text:before,.ipa-text:after{font-size:calc(var(--font-size-ipa) * .3);margin:0 2px}}.syllables-text{font-family:var(--font-ui);font-size:var(--font-size-ipa-secondary);color:var(--color-text-muted);margin-top:var(--space-2);font-style:italic}.recent-words{width:100%}.recent-words.empty{text-align:center;padding:var(--space-12) 0}.empty-message{font-family:var(--font-ui);font-size:var(--text-md);color:var(--color-secondary);text-transform:uppercase;letter-spacing:.05em}.recent-list{gap:var(--space-4);flex-direction:column;list-style:none;display:flex}.recent-item{padding:var(--space-3) var(--space-4);cursor:pointer;border-radius:var(--radius-sm);justify-content:space-between;align-items:baseline;transition:background-color .2s;display:flex}.recent-item:hover{background-color:#0000000d}.word{font-family:var(--font-ui);font-size:var(--text-md);color:var(--color-text);text-transform:uppercase;letter-spacing:.05em;flex:1;font-weight:400}.ipa{font-family:var(--font-ipa);font-size:calc(var(--text-md) * 2);color:var(--color-text);margin-left:var(--space-4);font-weight:400}@media (width<=480px){.word{font-size:var(--text-md)}.ipa{font-size:calc(var(--text-md) * 2)}}:root{--color-background:#fafafa;--color-text:#1a1a1a;--color-text-muted:#6b7280;--color-accent:#2563eb;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-9:36px;--space-10:40px;--space-11:44px;--space-12:48px;--space-14:56px;--space-16:64px;--space-20:80px;--space-24:96px;--text-xs:clamp(11px, 2vw, 12px);--text-sm:clamp(13px, 2.5vw, 14px);--text-md:clamp(16px, 3vw, 16px);--text-lg:clamp(18px, 3.5vw, 20px);--text-xl:clamp(24px, 4.5vw, 28px);--text-2xl:clamp(32px, 6vw, 40px);--text-3xl:clamp(48px, 8vw, 56px);--text-4xl:clamp(64px, 10vw, 80px);--font-size-ipa:clamp(48px, 8vw, 120px);--font-size-ipa-secondary:clamp(14px, 3vw, 20px);--font-size-label:clamp(11px, 2vw, 13px);--font-ipa:"Gentium Plus", "Charis SIL", "Noto Serif", serif;--font-ui:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--radius-none:0;--radius-sm:4px;--radius-md:8px;--z-dropdown:100;--z-modal:200;--z-tooltip:300}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-ui);background-color:var(--color-background);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}#root{min-height:100vh}