:root{--bg-color:#f7f9fa;--text-primary:#1e293b;--text-secondary:#475569;--accent-color:#2563eb;--accent-hover:#1d4ed8;--surface-color:#fff;--border-color:#cbd5e1;--error-color:#dc2626;--font-base:1.125rem;--font-lg:1.5rem;--font-xl:2rem;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text-primary);background-color:var(--bg-color);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-weight:400;line-height:1.6}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg-color:#0f172a;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--accent-color:#3b82f6;--accent-hover:#60a5fa;--surface-color:#1e293b;--border-color:#334155}}*{box-sizing:border-box}body{min-height:100vh;font-size:var(--font-base);justify-content:center;margin:0;padding:0;display:flex}#root{width:100%;max-width:600px;padding:1rem}button{background-color:var(--accent-color);color:#fff;font-size:var(--font-base);cursor:pointer;border:none;border-radius:8px;width:100%;min-height:56px;margin-top:1rem;padding:1rem 1.5rem;font-weight:600;transition:background-color .2s}button:hover,button:active{background-color:var(--accent-hover)}button:disabled{background-color:var(--border-color);cursor:not-allowed}textarea{width:100%;font-size:var(--font-base);border:2px solid var(--border-color);background-color:var(--surface-color);color:var(--text-primary);resize:vertical;border-radius:8px;min-height:150px;padding:1rem;font-family:inherit}textarea:focus{border-color:var(--accent-color);outline:none}.card{background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:12px;margin-bottom:2rem;padding:2rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}h1{font-size:var(--font-xl);margin-top:0;margin-bottom:.5rem}p{color:var(--text-secondary);margin-bottom:1.5rem}.text-center{text-align:center}.progress-bar{background-color:var(--border-color);border-radius:4px;width:100%;height:8px;margin-top:1rem;overflow:hidden}.progress-fill{background-color:var(--accent-color);width:0%;height:100%;transition:width 1s linear}.audio-controls{gap:1rem;margin-bottom:1rem;display:flex}.audio-controls button{flex:1}.btn-secondary{background-color:var(--surface-color);color:var(--text-primary);border:2px solid var(--border-color)}.btn-secondary:hover,.btn-secondary:active{background-color:var(--border-color)}.canvas-container{justify-content:center;margin-top:1.5rem;margin-bottom:1.5rem;display:flex}.canvas-container canvas{border-radius:8px;max-width:100%;box-shadow:0 4px 6px -1px #0000001a}