:root{--color-background:#fafafa;--color-text:#1a1a1a;--color-text-muted:#6b7280;--color-accent:#2563eb;--space-0:0;--space-1:4px;--space-2:8px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;--text-xs:12px;--text-sm:14px;--text-md:16px;--text-lg:20px;--text-xl:28px;--text-2xl:40px;--text-3xl:56px;--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-header{padding:var(--space-16) var(--space-6);text-align:center}.app-title{font-family:var(--font-ui);font-size:var(--text-xl);color:var(--color-text);letter-spacing:-.02em;font-weight:700}.app-nav{justify-content:center;gap:var(--space-4);padding:var(--space-12) var(--space-6) var(--space-8);display:flex}.nav-item{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}.nav-item:hover{color:var(--color-text)}.nav-item.active{color:var(--color-accent);border-bottom-color:var(--color-accent)}.app-main{padding:var(--space-0) var(--space-6);flex-direction:column;flex:1;align-items:center;width:100%;max-width:640px;margin:0 auto;display:flex}.input-container{align-items:center;gap:var(--space-24);flex-direction:column;width:100%;display:flex}.error-message{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);text-align:center;margin-top:var(--space-4)}.loading-indicator{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-accent);margin-top:var(--space-4)}.recent-container{width:100%}.app-footer{padding:var(--space-16) var(--space-6);text-align:center}.app-footer-text{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-muted)}.input-surface{align-items:center;gap:var(--space-12);flex-direction:column;display:flex}.input-container{width:100%;max-width:512px}.input-field{width:100%;font-family:var(--font-ui);font-size:var(--text-lg);color:var(--color-text-muted);padding:var(--space-4) var(--space-0);background:0 0;border:none;outline:none}.input-field::placeholder{color:var(--color-text-muted);opacity:.7;font-style:italic}.input-field:focus{outline:none}.voice-toggle{border:2px solid var(--color-text-muted);width:48px;height:48px;color:var(--color-text);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.voice-toggle:hover{border-color:var(--color-text);background:#0000000d}.voice-toggle.recording{border-color:var(--color-accent);background:#2563eb1a;animation:2s infinite pulse}.status-message{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);text-align:center;margin-top:var(--space-4)}@keyframes pulse{0%{box-shadow:0 0 #2563ebb3}70%{box-shadow:0 0 0 12px #2563eb00}to{box-shadow:0 0 #2563eb00}}.ipa-display{align-items:center;gap:var(--space-8);margin-bottom:var(--space-24);flex-direction:column;display:flex}.ipa-text{font-family:var(--font-ipa);color:var(--color-text-muted);align-items:baseline;font-size:112px;line-height:1;display:flex}.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);margin:0 8px;font-size:40px;font-weight:400}@media (width<=768px){.ipa-text{font-size:80px}.ipa-text:before,.ipa-text:after{font-size:28px}}.syllables-text{font-family:var(--font-ui);font-size:var(--text-lg);color:var(--color-text-muted);font-style:italic}.recent-words{max-width:512px;margin:0 auto}.recent-words.empty{text-align:center;padding:var(--space-16) 0}.empty-message{font-family:var(--font-ui);font-size:var(--text-lg);color:var(--color-text-muted)}.section-title{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-8);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.recent-list{gap:var(--space-8);flex-direction:column;list-style:none;display:flex}.recent-item{padding:var(--space-4) 0;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);font-weight:600}.ipa{font-family:var(--font-ipa);font-size:var(--text-sm);color:var(--color-text-muted)}:root{--color-background:#fafafa;--color-text:#1a1a1a;--color-text-muted:#6b7280;--color-accent:#2563eb;--space-1:4px;--space-2:8px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;--text-xs:12px;--text-sm:14px;--text-md:16px;--text-lg:20px;--text-xl:28px;--text-2xl:40px;--text-3xl:56px;--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}