body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0d0d14;color:#e8e8f0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Helvetica Neue,sans-serif;position:relative}.github-link{position:absolute;top:24px;right:24px;color:#e8e8f059;text-decoration:none;display:flex;align-items:center;transition:color .2s ease}.github-link:hover{color:#e8e8f0d9}.main{display:flex;flex-direction:column;align-items:center;gap:48px}.header{text-align:center}.title{font-size:2rem;font-weight:700;letter-spacing:.35em;color:#e8e8f0eb}.subtitle{margin-top:8px;font-size:.78rem;letter-spacing:.18em;color:#e8e8f059;text-transform:uppercase}.controls{display:flex;flex-direction:column;align-items:center;gap:28px}.btn-wrap{position:relative;width:128px;height:128px;display:flex;align-items:center;justify-content:center}.btn{width:128px;height:128px;border-radius:50%;border:1px solid rgba(232,232,240,.1);background:#e8e8f00f;color:#e8e8f0d9;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s ease,border-color .25s ease,transform .15s ease,color .25s ease;position:relative;z-index:1}.btn:hover:not(:disabled){background:#e8e8f01f;border-color:#e8e8f033;transform:scale(1.04)}.btn:active:not(:disabled){transform:scale(.96)}.btn:disabled{cursor:default}.btn--recording{background:#ef44442e;border-color:#ef444466;color:#fca5a5;animation:pulse-record 1.4s ease-in-out infinite}.btn--processing{background:#6366f11f;border-color:#6366f140;color:#c7c8ffcc}.btn--ready{background:#6366f12e;border-color:#6366f166;color:#a5b4fc}.btn--ready:hover:not(:disabled){background:#6366f147;border-color:#6366f199}.btn--playing{background:#6366f11f;border-color:#6366f140;color:#a5b4fcb3;animation:pulse-play 1.2s ease-in-out infinite}.btn--error{background:#ef44441a;border-color:#ef444440;color:#fca5a5}.btn__icon{display:flex;align-items:center;justify-content:center;pointer-events:none}.ring{position:absolute;top:-8px;left:-8px;width:144px;height:144px;transform:rotate(-90deg);pointer-events:none}.ring__bg{fill:none;stroke:#ef444426;stroke-width:2.5}.ring__fill{fill:none;stroke:#ef4444bf;stroke-width:2.5;stroke-linecap:round;transition:stroke-dashoffset .1s linear}.status-label{font-size:.82rem;letter-spacing:.06em;color:#e8e8f066;min-height:1.5em;text-align:center;transition:color .3s ease;padding:0 16px;max-width:280px}@keyframes pulse-record{0%,to{box-shadow:0 0 #ef444440}50%{box-shadow:0 0 0 14px #ef444400}}@keyframes pulse-play{0%,to{box-shadow:0 0 #6366f133}50%{box-shadow:0 0 0 14px #6366f100}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:spin .9s linear infinite}